Level 2. One bet, as a row: the question, which side you took, and what it is worth. 57 rows and 58 side tags on 14 painted screens, plus a summary face that is the same component with its box removed. Measured 2026-08-08 in a browser, at 390 and 1280.
A resolved position with its status line. 10 elements against 13.
The level and its reason stay on the molecules page. What needs the room here is the pair of colour families this row carries and why they are written apart although they hold the same values today.
Your bet is highlighted. Bets update as the odds move.
Your bet is highlighted. Bets update as the odds move.
| at 390 | at 1280 | |
|---|---|---|
| a row | 293x67 to 293x190, depending on the question | 911x67 to 911x141 |
| a figure | 39x39 to 100x39 | the same, and 222x81 in the summary |
| a side tag | 29x17 to 108x17, and it does not move with the window | |
The figures are mono and the question is display. A stake and a price are numbers to compare down a column, so they take the one typeface in the system whose digits are the same width; the question is a sentence and takes the sentence face.
On 14 placements over three screens the row is not a box that happens
to be clickable: an <a> is wrapped straight round the .pos and the
anchor is the subject, which is the shape related already uses.
This was the largest thing in this component with no specimen anywhere in the kit, and
position.css spends 132 lines of comment on the two states it could not be seen
in.
The list below is notifications.html's own, copied whole: it
carries 3 anchored rows, 2 group headings and 3 nowrap time stamps, which is three of this
component's unstood rules in one block. It stands in .pos-list, the container the
screen ships, because the 8px between rows and the 24px above a heading are that pattern's and
not this row's.
Unread
Earlier
Unread
Earlier
A hover and a press are raised by a person, not by a page, as on
the button page. The rows above are the real control, so raise them
here with a pointer. The row comes UP to meet it:
--bg-control-hover is lighter than --bg-card-quiet in both themes, so
the direction of the state is one decision and not two, and the question takes the brass a linked
question takes everywhere else.
The press is paid for out of DEPTH, and that is the whole reason it needed
its own two rules. --bg-pressed is the system's held-down stone and it was
measured against a control resting on --bg-control. This row does not: it rests on
--bg-card-quiet, one step deeper, so the press LIGHTENS it by four bytes per channel
in the Vault, and in daylight the two roles resolve to the same chalk and the press renders as
nothing at all. So the outer drop goes and the lit lip stays: a lifted stone lies down flat
under the finger, in both themes. The brass edge and the brass question are restated rather
than left to the hover above, because a touch screen never hovers and this row is read on a
phone.
The other shape the control takes, from
active-bets-history.html: the same anchor round the same row, with the figures and a
side tag instead of a time stamp. 4 of the 14 are this one and 10 are the notification
form above.
The heading between groups is the same class as the row's own status word
and it is a different thing. p.pos-status is a divider, 11px display semibold at
--track-caps-loud, the widest tracking the system has, with a 16 x 2 brass bar
before it; span.pos-status is 10px at --track-caps and says what one
row is doing. 6 headings against 48 words, measured across the 106 painted screens, and
until now the kit stood 26 of the words and none of the headings.
Never put the state on the row instead of on the anchor. The anchor is the tap target. A ground that changes inside it would leave the 12 by 16 of padding that a thumb actually lands on saying nothing.
| tag | worn | what it says |
|---|---|---|
.pos-yes | 2 | THE LIVE PAIR. Which side you are on, in a market that has not resolved |
.pos-no | 1 | |
.pos-won | 6 | THE SETTLED PAIR. What happened, in a market that has |
.pos-lost | 2 | |
| no role | 47 | the quiet tag: a side or an outcome name with no colour at all |
The two pairs hold the same values today and are written as four rules, and the reason is written into the file: a bet SIDE and a RESULT answer to different design questions. Green here means "you took YES" and green there means "you were right", and those are two sentences that happen to be the same colour. The roles exist so either can move without dragging the other, which is a change of zero pixels today and the whole point of a role.
47 of the 58 tags carry no role at all, which is worth saying out loud: most of what wears this class is not an outcome. It is a candidate name in a multi-outcome market, a plain YES on a summary line, or a label in a selected-bet row. The coloured tag is the exception in this component, not the rule, and the quiet ground is what keeps the two green ones meaning something.
Two placements, on the two profile screens. It drops the ground, the edge, the shadow and the padding, and turns the figures into a GRID: two columns below the desk rung and four from 640, each figure in a box of its own. It was 520 until 2026-08-10, which was the width at which four columns first fit rather than the width at which they first read: from 520 to 555 the cells are 102.5 to 108.8 wide and the fourth label wraps, so every figure in the row stands 91 tall instead of 80.5. The second box takes a brass-tinted ground and a larger figure, because on a profile one number is the headline and the others are context.
A third arrangement exists for the portfolio line, three columns, keyed to the
block's accessible name rather than to a class. That is a selector reaching for a label,
and it is filed as such: docs/backlog.md holds the id-keyed and name-keyed
declarations as one question.
Two of this component's four faces were on no page.
.pos-record is the same article with its rows replaced by figures, and
.pos-lost is the side role the other three had and it did not. Both stand on the two
profile screens, and a reader comparing WON against LOST had one of the two.
And the third arrangement, which this page has described since it was
written and never drawn. Two rows, both standing loose in .cat-main rather than
in a list, and the container is on the specimen because the container is the rule:
.cat-main>.pos .pos-figures steps the figure labels from 10 to 11, because a
summary row is read on its own and a list row is read against its neighbours. The
.cta-bar the profile screen puts inside the first article is left out here and that
is the one thing that differs: it is action bar's and it already
stands twice.
Balance
Balance
Those two articles are the anti-rule below, rendered. Same class, same container, same three figures, same copy in two of the three cells. The only difference is the accessible name, and it decides whether the figures are a three-column grid with a brass first figure or a flex row with neither. Change the label to Balance on the profile screen and the layout goes; nothing in the system would say why. Wallet's row is the control that proves it, because it is the same block that did not get the grid.
Its own width query: 640 DESK. The record's figure grid goes to four columns at DESK. Below it the figures wrap by themselves, which is why there is one query here and not three: repeat(4,1fr) is the only count the component states, and the fluid track states the rest.
The lead figure is a class, and it was an ordinal until 2026-08-16.
.pos-record .pos-fig:nth-child(2) gave the brass ground, the brass edge and the
24px figure to whichever tile stood second, so reordering the four stats would have moved the
emphasis without anyone editing a rule. Which number matters is a screen's decision, not a
decoration's, which is the same test trust-art.css passes from the other side when
it keys its two drawings on nth-of-type deliberately. It is
.pos-fig-lead now. The caption took full ink with the same edit, and the
reason is a measurement rather than a preference: read off the painted pixels in the Vault, the
brass wash runs rgb(60,59,55) under the top-left corner to rgb(36,40,47)
at the far one, so --text-muted on those six characters measured 4.16:1 at one
end and 5.49:1 at the other - one caption, two verdicts, across its own 60px. The wash stays
where it is, because the trust badge, the comment avatar and the gallery card all take the same
brass in from the top left and turning one tile's light around would leave one object in the
product lit from the other side. 8.96:1 now, and 13.88:1 in daylight.
A role per sentence, even when two sentences share a value. The live pair and the settled pair are four rules that draw two colours, and that is the system being able to change its mind later.
Colour is for the exception. 47 of 58 tags are quiet, which is what makes the 11 that are not read as information.
Figures are mono, questions are display. A column of numbers a person compares needs digits of one width.
Never merge the live pair with the settled pair. They agree today. The day a resolved loss should stop being red is the day the merge costs a rewrite instead of a token.
Never colour the quiet tag. 47 of 58 are candidate names and plain sides; colouring them would leave the row with no way to say which one resolved.
Never key a layout to an accessible name. The three-column portfolio grid is reached through the block's label, which makes the copy a dependency of the layout.
The level and its reason: the molecules
page. The stylesheet: components/position.css. The loading face of this row:
skeleton, which is where its 22 marks live. The outcome roles:
components/tokens.css and DESIGN.md.