Card

What this page is for

The level and its reason stay on the organisms page. What needs the room here is the sixteen rules that were content, and the two press decisions this component had to invent because the thing being pressed has no ground.

The two cards, and the difference is the action row

They are one component and not two, which is what backlog 16d asked. Both cards carry the same fourteen classes in the same order, and the only difference is what stands in the action row: 63 binary cards hold .yesno and 21 multi-outcome cards hold .options, measured across the 106 painted screens on 2026-08-10. Nothing computes a level from that any more, and a boundary that exists only in an arithmetic deleted on 2026-08-07 is not a boundary.

The product has two kinds of card and this page has shown neither of them truthfully. Until 2026-08-09 the specimen had no action row at all, so the one control a person actually presses on the feed was missing from the page about the card. What replaced it was written from the component rather than from a screen, and it invented a third outcome row: every multi-outcome card in the product carried exactly two, 21 of 21 painted and 21 of 21 grey. That sentence stopped being true on 2026-08-17, and the correction is the opposite of the one it recorded: the card carries its WHOLE field now, three rows or four, and two is what a phone SHOWS rather than what the markup holds. Both specimens below are the feed's own first cards of each kind, copied whole. Counted on event-feed.html: 9 binary cards carrying .yesno and 3 multi-outcome cards carrying .options.

Binary. One question, one bar, one pair of buttons. The bar is in no screen's markup: a page script reads the .prob-line the screen ships, writes the bar in front of the buttons and hides the line it read. So the bar is written by hand here and the line is left standing and hidden, exactly as the script leaves it, because a specimen that drops what the script consumed is not the card the browser draws. The meta row is the second thing a script writes, and it is written out here too: a screen ships Volume: $84,200 as one string and the script splits it into .m-label and .m-val, which is the only reason the label is muted and the figure is not. The photograph is the inline datum the rules allow.

Multi-outcome. A row per outcome with its own compact pair, and no odds bar: the script skips any card holding .options, because a bar answers one question and this card asks one per row. That is the whole structural difference between the two, and it is why the card is one component and not two.

Two rows is a shortlist and the card no longer says so, which was decided twice on two screenshots and re-checked here on 2026-08-20. Three paragraphs stood in this place describing a card that grows to its whole field at DESK and a +N more outcomes link naming the remainder, with a count rule, an override and the sentence 18 cards in each tree carry it and 3 do not. None of it is true and none of it has been since 2026-08-17. docs/backlog.md 188 took the full field back off the desk and 189 deleted the link: 68 links removed across 33 documents in all three trees, the rules out of components/options.css and .opt-more off its class list. Measured from the rendered DOM at 1280 on 2026-08-20: 30 multi cards per tree and every one of them shows exactly two rows.

The reason the link went is the reason worth keeping. It was --text-muted at 12px, the same ink as the Volume and Closes line beneath it, on a card being deliberately made smaller. A card is where a person decides whether to LOOK, the question does that, and a grey caption counting what is missing was a fourth thing to read. The whole field is one tap away on the title.

data-full is still on the markup and nothing reads it, and that zero has a name. It carries the market's outcome count, which is the number the detail head prints, and its reader was the link that was deleted on purpose rather than a rule nobody wrote. It is kept as a datum rather than swept, because the fact is true and the next surface that wants it will not have to re-derive it: 30 cards per tree declare it and the three complete markets do not, which is the same switch it always was. docs/backlog.md 229.

The Related list said 4 options in 24 places for the same idea. One word for one thing: it says 4 outcomes now.

The meta row is a grammar and it holds a third span since 2026-08-20. Every span in it is Label: value, which is not decoration: the script above splits on ': ', so a span without one gets no .m-label and no .m-val and stands at full strength beside two dimmed labels. The cadence went in as a bare Weekly and at 390 the row rendered Weekly Volume: $46,300, naming a figure this product does not have. It reads Repeats: Weekly.

Recurring, and the word is on this card because there is one. The attribute data-freq stands on every card in the paint and the grey, One-time by default, because the How often filter reads it; the WORD stands only where the cadence is not the default, since Repeats: One-time on every row is a default restated. The card is the only place the reader meets a series: there is no series page, the instance carries its own window in its title so that title never changes when the market settles, and the run itself is Earlier in this series on the recurring detail. docs/backlog.md 224.

Two more faces, and both are reached through another component's container

This file draws four faces of .card and this page stood two. The two above share the whole vocabulary and differ in one row. The two below are reached through a container that belongs to somebody else, .ed-main in detail shell and .gallery in profile, so a page can be at parity with its component's richest instance and still miss a rule that only fires under another component's container. Their only specimens were on those other pages.

The stripped detail card, 11 placements, one per event-detail screen. Four selectors and every declaration is a negation: no ground, no border, no shadow, no corner, no clip, no transition, no lift on hover, and both pseudo-elements off, so the grid texture and the trust-column mark go with them. What is left is the frame's contents standing directly on the page's own plate, because on a detail screen the card is not a tile in a grid any more, it is the screen. It is the reason the lift and the press two sections down are written at (0,2,0): these rules stand at (0,3,1) and out-specify them.

The selector had a specimen and the face did not, which is the sharper half of this. detail-shell.html puts a FEED card body inside its .ed-main, so the four rules fire there and what they fire ON is not what they were written for: all 11 real placements hold .ed-head. A count of matching elements reports that face as stood. The heading is h1 on every screen and h2 here, so this page keeps one heading; that is the only difference.

The profile win tile, 6 placements on the two profile screens. Three rules and a complete replacement face: 172 x 98 fixed, a brass-tinted diagonal ground, 11px semibold text sitting on the floor of the box, the texture off and the trust-column mark replaced by a brass arrow in the corner. It stands in .gallery, a row that scrolls sideways, which is why the width is fixed and the tile does not grow.

"Replaced" was not true until 2026-08-13, and the half that was missing is the mask. The rule resets background and the glyph then wore the decoration's mask-image anyway, so the arrow was being faded by a gradient meant for a picture that is no longer there. Nobody read it as a defect while the mask was a gradient; the day the mask became the column drawing the arrow went pale, 63 pixels of it losing up to 181 of 255, and the full-tree sweep found it on this page and on profile.html and on no product screen at all. It takes mask-image:none now. A pseudo-element reused for a second purpose has to reset every channel the first purpose wrote, and the mask is a channel.

The tile wears .card and not one of this component's other thirteen classes. No body, no top, no thumbnail, no question, no meta row: a <div> with a sentence in it. So this file draws a face for an element whose whole relationship to the component is the class name, and the two faces above and the two here have almost nothing in common but that. It is worth saying on this page rather than anywhere else, because this is the page where a reader asks what a card is.

Never stand a face without the content the face was written for. The stripped card matched on a stand for two days while holding a feed card, and a count reads that as parity.

Sixteen rules that were content, not styling

Sixteen rules in this file said which of the twelve feed cards shows which photograph, keyed on the position of the card in its list. That is not styling, it is the content of a screen, and it broke the moment a card moved.

The system's own rule already names the event photograph as one of the three things that belong on the element, beside a datum and a value a script writes at run time. So the photograph is on the element now and this file describes the frame the photograph sits in: the box, the mask, the corner and the shade over the bottom edge.

A bare link has no ground, so the ink presses instead

The question wraps to two lines inside the card's text column, and an opaque stone behind it reads as a text selection rather than as a control being held. So the ink steps down instead, and quiet is a colour here, never an opacity: the thing every other product fades is written as the role that was already measured for being read.

It is the only answer that works on a touch screen, where there is no hover to have left behind, and it is the same answer the hero's headline and its hot list give, for the same reason and in the same afternoon.

The card itself does the opposite, and that is also a rule. The lift STAYS on hover, because it is the Vault's floating language, it is composited and it shifts no neighbour. A HELD card settles: the press puts it back where it already rests and restates the rest stack, so the two lines are the rest rule repeated rather than a new value.

Save presses square-cornered, because a radius is geometry and a state may not move the element it is on. The wordmark in the header gives the same answer for the same reason.

The Save button pulls its own target out of the flow

The control is icon button's bare face, and that face carries an invisible 44px target which it then pulls back out of the layout, because an untouchable box that spreads the row it sits in is the atom's problem wherever it stands.

What is left in this file is a narrower answer to the same question on a phone: the enlarged button pulled tighter into the meta row. The 44 is unconditional above, so that block stopped being a touch-target rule and is now a layout fact, which is why it stays on a width query where the target rule went to a pointer query.

What it does with width

Its own width query: none, since 2026-08-13. The card does not change width at any rung: it FILLS the grid track it is given, and the track is the pattern's decision, not the card's. It had exactly one query, moving the bookmark button's negative margin below DESK, and that query was the defect. The bare icon button pulls its invisible 44px target back by (44 - 16) / 2 = 14px; a card has 13px from its content edge to its clip edge and is overflow:clip; so above the rung, where this rule switched off, one pixel of a 44px target was cut off 84 cards at every width from 640 to 1600. Measured: the button's right edge is 603 against a card edge of 608 at 639, and was 610 against 609 at 640, unchanged at 900 and 1440. A card holds its bookmark the same way in every card, so the rule is unconditional now and the card's meta row is 37px at the desk as it has always been on a phone, up from 25. Backlog 129 named this component as the container-query case and it was: the answer was neither query.

The rule

Content goes on the element. A photograph, a percentage and a run-time value are the three things that are not styling, and everything else is a rule.

A control with no ground presses in ink. Not in opacity, and not in a stone that reads as a selection.

A lift is not a state, it is the material. So the hover keeps it and the press takes it away, which is the opposite of what a lift usually means.

The anti-rule

Never key a rule to a card's position in a list. Sixteen rules did, and they were the content of one screen written into the system.

Never fade a control to say it is held. Opacity is not a role and no theme can reach it.

Never let an invisible target spread the row it sits in. A 44 box that pushes its neighbours is a layout bug wearing an accessibility fix.

Where the rest of it is

The level and its reason: the organisms page. The stylesheet: components/card.css. The Save button: icon button. The odds bar inside it: odds bar. The pair on a multi-outcome card: options and yes / no. Its loading face: skeleton. The grid it stands in: components/patterns/card-grid.css.