Locked list

Anatomy

Synced from the product, 2026-09-30 (P31, P34). Two objects in one file, and since 2026-09-29 only one of them stands on a screen. The block, .locked-note, is the one place the withheld rows appear: a free scan keeps no name it does not show (P31), so a row would be a placeholder for nothing, and the figures at the top of the screen already count them. The row, .row.is-locked with its slot, is still in the css and is shown further down as what it is: a form the file draws and no screen wears.

The block speaks the public page's language (P34, the founder: "как на хоумпейдж, там более визуально красиво"): the dotted eyebrow, the count as the stat card's figure, the row of squares, the hero's floating tiles as a small stage, the landing's shadows and 24px radius, and its pill buttons with the travelling arrow. Past the desktop point on a wide screen the words stand left and the stage right; on a phone, and on the reveal at every width, the stage comes first.

Home, the wide form

The stage is 926px wide past a 1280 window, so the block's 900 query fires and it takes its two columns; at a phone width the same markup stacks, stage first. Switch the theme in the panel: every paint is a role, and the shadows are shares of --tone-shade and petrol through color-mix, so the dark half costs nothing of its own.

The reveal, the flow form

The same block with two things left out, both by D1: no sum line, and no amount in the glass chips, because on the reveal the number comes third and step 2 carries none. The flow form is one reading column at every width, so .app:not(.flow) keeps the two-column arrangement off it even on this wide stage.

• .locked-note the card: surface, the container's hairline as an inset shadow, the landing's two float shadows cast in --tone-shade, and the landing's 24px card radius, a literal with one consumer in the app, said at its line. A grid: one column, then 6fr and 5fr past container 900 outside the flow form
• .stage 180px, 260px in the wide form. Its ::before is the landing's dotted field, a petrol share under a radial mask. aria-hidden: the heading says it in words
• .tile.t1 .t2 .t3 three app tiles not named yet: petrol with the lock (the block's one filled mark), a surface tile with a withheld bar where a logo would be, and one out of focus behind, the depth the hero gets from its blurred tiles. One slow float, 6s, offset per tile
• .float.f1 .f2 .f3 the amounts and when-lines a free scan kept (P31), in the landing's glass: a surface share, a backdrop blur, a hairline. Placed from the stage's own edges, so a chip never leaves a narrow stage
• .eyebrow the landing's dotted eyebrow, local to this block. It is not the Eyebrow atom .k, which is a caption over a figure; this one names the subject of a section
• .pre .fig .unit the heading is one sentence, "You have 11 more subscriptions", with the count set as the stat card's figure: --type-display, petrol through --text-action, tabular
• .sum the amount line, bold where it states the amount. Home only (D1)
• .squares one square per subscription, the named ones filled, the same picture as "14 subscriptions" on the public page. aria-hidden
• the wrapper .copy is what the product prints around the words, and no rule in the system selects it: it exists so the grid has exactly two cells. Named here so a reader grepping the css for it is not surprised
• .btn.pill.go the button's own modifiers (button.css, P34), not a button of this file's: the fill, the ink, the states and the ring cannot drift from every other button

Behaviour at width

Synced from the product, 2026-09-30 (P33, P34). This said "none of its own", which was true while the component was a row modifier and a sentence. The block has one point now, the desktop one: past container 56.25rem (900px), and outside .app.flow, the words and the stage stand side by side with the stage second. app-shell.css gives it order: 3 on a screen whose layout is the groups column set (P31), the groups' own slot and later in the DOM, so it follows the list it completes; it had no order and printed above the summary at 1280 until that line was written.

Variants and sizes

One block, two contents. On Free it sells the plan. On Pro, for somebody who paid before their bank was read again, the rows are still nameless and what names them is a read of the bank, not a plan, so the same block says that and offers the bank door. The words are microcopy's rows home-pro-unnamed.

Two screens is a component and three would be a pattern. Rule 7, and it is the reason this is one css file in components/ rather than something in patterns/. If a third screen ever wears it, the composition moves and this file stays where it is.

When to use it

Only where the rows are really there and really counted. That is the whole honesty of the object: the total above it includes every unnamed row, the category counts include them, and the sum line says so in so many words. A block over rows that were excluded from the total would be the product inventing a number to sell the answer to, which is the frame voice.md forbids by name.

It is never the first thing on a screen. D-Gate put the gate inside step 2 of the reveal and on a populated Home, both times after the count and the total have already been given away. A lock at the door is a paywall pretending to be a product, and the founder chose this shape over marking the door Pro precisely so that a person sees something true before they are asked for anything.

And it is a state and never a screen. D3 as amended on 2026-08-20 says the plans are one product, not two, with no Pro twin of a screen. There is no locked Home; there is Home, ending in this block. The moment the rows are named, the block is simply not drawn, and no route changes.

The row form, drawn by the css and worn by no screen

Synced from the product, 2026-09-30 (P31). Until 2026-09-29 a withheld row stood in its category as a .row.is-locked with a grey bar for a name, carrying "Shown with Tendd Pro" as its accessible label. P31 removed it from both screens (microcopy's rewrite log: "a row with no name and no logo is a hole in a list whose promise is names"). The rules are still in locked-list.css, so the form is shown here as what the file draws, and the anti-rule under it still holds for any future row.

• .row.is-locked takes the pointer away and nothing else. The row is rendered as a span or a div rather than an anchor, because there is nothing to open, so this only undoes the cursor .row sets. Exactly what .row.is-skel does in skeleton-bar.css, and for the same stated reason: the class exists solely for this state
• .name-withheld the slot where the name would be. 11px, which is the cap height of --type-sub and not its line box: a bar as tall as the line reads as a filled field, and this is standing in for lettering
• .w40 .w55 .w70 an uneven set, and it is load bearing. Identical bars down a column read as redactions of exactly equal length, which is the one shape that says the product is hiding rather than gating. Real merchant names are not the same length
• --bg-withheld its own role beside --bg-placeholder, at the same primitive today. A skeleton means wait and this means pay, and rule 4 asks whether two roles can ever part company. These can. Since P34 it also paints the bar inside the block's blank tile

One form, three widths, no other axis. There is no small locked row and no loud one. The three width classes are not sizes, they are a way of not looking like a redaction, and which one a row gets is arbitrary by design: nothing about the withheld name may be inferable from the bar, including its length.

The rule, and the anti-rule

Limits

• one slow float Synced from the product, 2026-09-30 (P34). This read "no motion", and it was true of the row and of the first note. The block now floats its three tiles and three chips, one move each, 6s and 7s, alternate, 8px. Reduced motion stops it through base.css like every other animation. The withheld bar itself still never moves: its token comment carries why
• petrol, counted Synced from the product, 2026-09-30 (P34). This read "no petrol on the row", and on the row it still holds. The block spends petrol on the primary pill (the first job), and borrows the landing's figure, its dotted eyebrow, its field and its front tile, which is the founder's decision in P34 and the landing's own treatment. It is the one place inside the app that does, and it is the place the product sells
• the count, in words the number of withheld rows is said once, in the heading, as a sentence. It is never a badge beside the list: decision N7 settled what a counter does to this audience, a counter is a demand and a dot is an offer
• the slot is not a control no hover, no focus, no press on a row or a tile. The way to Pro is the button in the block, once, so that a person cannot arrive at a paywall by poking at their own data
• U1 one filled action per zone: the block is a zone and carries one .btn.primary; "Add them yourself" is the outline pill beside it
• U17 a screen-level order belongs to the layout that needs it: the block's order: 3 is scoped .app > .screen:has(> .groups) in app-shell.css, never on the block itself. Usage rules

Lives in system/components/locked-list.css. Its row in the system is in kit/docs/inventory.md, and the decisions under it are D-Gate (2026-09-02), P31, P32, P33 and P34 (2026-09-29) in docs/decisions.md.