Level 3: a component that holds molecules, or that is the shell of a screen. Twelve of
them stand on the five anchors and one does not. Each is the markup the screens ship, painted by
components/index.css, in Vault above Daylight, with what it holds, its rule and its
anti-rule. Two of the twelve are shown in one theme only, and the reason is the component
rather than the page.
An organism holds molecules, or it is a shell. A shell draws almost
nothing itself and decides where everything else goes, which is why two of the entries below have
fewer own rules than any atom on the vitrine and are still level 3. The level is
declared in docs/inventory.md with a reason, because the arithmetic that
computes it is blind to a component built out of its own class names.
The themes stack instead of sitting side by side. A molecule is a row and fits in half a column; a header cut to 430px is not a header. What a shell IS is the decision it takes about the full width, so measuring it at half width twice would be measuring something else and calling it the component.
And then two of them refused to be shown twice at all. That is the finding of this page and it is in the section under this one, because it is a property of the system rather than of the stand.
A specimen keeps the screen's href and takes the stand's prefix. One
link on this shelf points at a screen, the feed shell's, and it reads
../ui-visual/event-feed.html: the name after the prefix is the product's, unchanged,
and the prefix is a fact about which folder this document sits in rather than about the
component.
A class can appear a thousand times in a document. An id is unique by definition, so a rule written against one is not a rule about a component: it is a rule about one instance of it. Counted across all 56 stylesheets:
| File | Keyed to an id | The ids |
|---|---|---|
| tabs.css | 6 rules | #edtab-comments, #edtab-holders, #edtab-positions, #edtab-activity, #ptab-record, #ptab-wins, #ptab-resolved, #p-record, #p-wins, #p-resolved |
| hero.css | 2 paints | url(#hfyes), url(#hfvol) |
| base.css | 1 rule | #rmSidebar, and it is correct |
tabs.css writes #edtab-comments:checked ~
.ed-panel-comments and nine more of that shape, so the event tab set and the profile tab
set each work exactly once per document. hero.css writes
.hf-area{fill:url(#hfyes)}, so the hero's chart takes its gradient from whichever
#hfyes the document happens to define first. The one in base.css is
#rmSidebar and it is correct: there really is one panel per document.
Nothing is broken today, and that is the whole point. Measured over the 106 painted screens: 0 of the 13 ids appears more than once on any screen. One hero per feed, one tab set per detail page. The coupling has never fired because the product has never asked it to, and this page is the first thing that ever asked: a stand that shows a component twice in one document is the exact case an id-keyed rule cannot survive.
Which is why they are shown once, rather than shown wrong. Renaming the second copy's ids would leave the CSS pointing at the first copy; keeping them would make the daylight tab set steal the graphite one's checked state and the daylight hero paint with the graphite gradient. A stand that quietly shows a component painting with another copy's values is worse than a stand that says it cannot show it. Backlog 45.
The band that is on every screen. It carries the identity, the balance, the
two menus and the way out to How it works, and it is the only place in the product where four
different atoms wear one hover, because the skin belongs to the surface rather than to any of
them. The condensed category strip at the foot of it is aria-hidden and does not
render until a page has been scrolled past its full category bar, so it is in the markup below
and correctly invisible.
Rule. One balance figure with a swap, never two figures competing for the same corner. Anti-rule. The header never announces money it has not been asked about: no top-up prompt, no low-balance badge, no red on the figure. The product's third principle is that engagement is about events and not about a balance, and a header is where that promise is kept or quietly broken.
This entry was hiw-dialog and a DECLARED level until
2026-08-11, the last one in the kit that had to be. The file held one explainer block, the
standalone page the block is the content of, and ten rules about being a sheet, so the arithmetic
could not read a component nobody could name. The ten went to dialog;
what is left holds .brand-tile and .pos on the page host, which is the
count saying what the ceiling rule already says, that level 3 also means the shell of a screen.
The level is computed now and this list has no brass row.
How it works, as a sheet rather than a page, because the question is asked
from inside a decision and an answer that navigates away loses the decision. The sheet host does
not HOLD dialog, it WEARS it: one element carrying two component classes. The close
button is the .icon-btn-photo face because its ink and its line are tokens of the
photograph and not of the theme, which is why it is identical in both rows below and correctly
so.
Rule. Every answer is in the product's own words, and the full guide is a link rather than the sheet's content. Anti-rule. No jargon reintroduced by the explanation: a sheet that explains "prediction market" with "automated market maker" has moved the confusion one word to the right rather than removed it.
One sheet with four heads: sign in, deposit, the bet sheet and the outcome sheet with its win and loss faces. They are one component because the frame, the head, the body and the fine print are one set of rules, and the head is the only thing that changes.
This is the one specimen on the kit that is not exactly what the product
renders, and it is worth saying rather than hiding. In the product a sheet is opened with
showModal() and the browser lifts it into the top layer: fixed, centred, over a
backdrop, and one at a time per document. Four of them on one page cannot do that. So the stand
opens them with the plain open attribute and pins them into the flow, and
exactly two things differ, the position and the backdrop. Everything inside is the rule
dialog.css writes, untouched.
The bet sheet used to carry app-case on itself, and that
was what made the four amount chips above render as chips: a descendant selector does not match
the element that carries the class, so the wrapper had to go ON the dialog rather than around it.
24 dialogs in this repository wore it that way, 21 painted screens and 3 specimens, and
every one of them was a screen whose subject IS a dialog. It came off on 2026-08-08 with the
scope it was written for, and components/dialog.css holds what it cost while it was
there: .app-case declares position:relative, a modal must be
fixed, and the sheet scrolled with the page behind it until a second rule was
written to take the position back. A workaround that has to be worked around is the shape of a
scope that was never true.
Rule. A sheet states what it is for in its own head, because it is reached from a decision and the person did not navigate here. Anti-rule. The close control is never the only way out and never smaller than a thumb.
Four panels behind four labels, and no script anywhere: the state is a radio input parked off-screen and the panel is its sibling. That is why a tab set survives a page with JavaScript off, and it is also why it can only exist once in a document.
tabs.css writes six rules against ten specific ids.
#edtab-comments:checked ~ .ed-panel-comments{display:block} and nine more of that
shape. A second copy in this document would share name="edtab" with the first, so
clicking a label here would UNCHECK the row above, and both copies' panels answer to the same
#edtab-comments. Renaming the ids does not help: the rules name them. So it is
drawn once, on purpose, and the daylight tab set is one click away on the live screen.
Rule. The label that is current is marked by weight, colour and a 2px inset rule, three signals and not one, because a single colour cue fails for the reader it was added for. Anti-rule. A tab never hides something a person has to act on. A panel is for reading; a decision belongs on the page, in one place, where nothing has to be found first.
Sixty-six lines that hold fourteen components. That is what a shell is: the head, the category, the question, the two figures and the bar underneath them, and then the argument columns, the resolution note and the panel. The odds bar's width is on the element, which is one of the three things the system allows there, because a width that is a datum is not styling.
YES 38% NO 62%
YES 38% NO 62%
Rule. The question is the heading, in the words a person would use, and the resolution rule is on the same screen as the bet. Anti-rule. The head never states a probability the chart below it disagrees with, and never rounds one of the two sides so they add to 101.
The place a bet is actually made, and the one component that holds seven
others. It has three bodies for one job: this column on the desktop, a dock at the foot of the
screen on mobile, and the sheet the dock opens. All three are in
betpanel.css, because they are one decision at three widths and not three
components.
not rendered below 760px, exactly as on the detail screen: the dock stands there instead
not rendered below 760px, exactly as on the detail screen: the dock stands there instead
It is held in a block wrapper on this page and that is a finding, not a
workaround. .bet-panel is flex:0 0 300px, a basis with no axis of
its own: in the detail screen's row it is a width, and dropped into a column it is read as a
HEIGHT, so the panel came out 300px tall and empty. A component that only knows its size from the
thing holding it is a component that cannot be handed to anyone.
Rule. The payout figure is above the button and changes as the amount does, because the number a person is deciding on has to be visible while they decide. Anti-rule. The panel never pre-selects an amount larger than the smallest chip, and never the whole balance.
Two shapes for two questions. Who is on which side is a real
<table>, because a row of it has three columns that mean the same thing on
every row and that is what a table is for. What just happened is a list, because a feed of
events has one column and a time.
| Holds 320 YES | Side | Amount |
|---|---|---|
| You | YES | $4.94 |
| whale_07 | YES | $471 |
| hedge_hannah | NO | $588 |
| marketmaven | YES | $121 |
| Holds 320 YES | Side | Amount |
|---|---|---|
| You | YES | $4.94 |
| whale_07 | YES | $471 |
| hedge_hannah | NO | $588 |
| marketmaven | YES | $121 |
Rule. Your own row is marked and stays in place; it is not sorted to the top, because the order is the information. Anti-rule. No leaderboard framing. A table of who bet what is a record, and the moment it ranks people it is telling a person to copy a stranger's position.
The markup the screen ships has an empty line. The real file is
<polyline points=""/>, and a page script writes the points at load out of four
ranges of data. So this specimen carries the points that script produces for "all", because a
chart with no points is a chart nobody can look at. It is the second component in this system
whose paint is not in its markup, after the card's odds bar, and it is the reason
"the chart is ported" was once true while it drew as a black rectangle: an SVG with no
fill is black, and a missing value is a value.
Rule. One line for a binary market and the five-colour categorical series for a multi-outcome one, and the series is not the outcome palette. A candidate in a five-way race is not a YES: green and red there would say the chart has an opinion about who should win, which is the one thing a prediction market may never say. Anti-rule. The y axis always runs 0 to 100. A chart cropped to the range of its own data makes two points of movement look like a landslide.
The unit of the feed, and the one place where the product's first principle is tested every time: the why line. A card that gives a question and a number is a ticker; a card that gives a question, a number and one plain sentence about why the number is where it is, is the product.
Funding talks have stalled twice this quarter, but past deadlines settled late.
YES 38%
Funding talks have stalled twice this quarter, but past deadlines settled late.
YES 38%
The odds bar between the figure and the buttons is not in any screen's markup, and the vitrine is what found that: it counted 213 uses of a component that appears in no HTML file, because a page script builds the bar as a string at load. It is written by hand into the specimen above, so this is the one place the bar and the card can be looked at together.
Rule. One why line, in plain words, and never the marketing sentence. Anti-rule. The card never says what a person should do. "Hot", "closing soon" and "most traded" are the feed's business and belong to the strip above, not to a card that is supposed to be a fact.
The chart carries a scale since 2026-08-16, and it did not before.
Five ruled lines at 70 / 60 / 50 / 40 / 30 per cent with mono numerals in a
3.5ch gutter, the YES and NO curves mirrored about the 50 line, and volume in
--series-5 in a strip of its own under a hairline. The four lines it replaces
stood at 68.05, 55.38, 42.72 and 30.05 per cent: solvable from the two points the chart
draws, since the YES line is at y=97 for 50 per cent and y=134.9 for 38. Ruled paper that
nobody can read a value off is worse than no grid, and the product's OTHER chart, on the event
detail, has had a labelled y-axis the whole time.
The first screen of the feed, and the only block in the product with a photograph plane, a veil over it and a chart beside it. It is the answer to "what is happening right now" that a grid of equal cards cannot give, and it is one event and never a carousel.
Funding talks have stalled twice this quarter, but past deadlines settled late.
hero.css writes .hf-area{fill:url(#hfyes)}. The gradient
stops read var(--outcome-yes), which resolves against the theme of the copy that
DEFINES them, and url(#hfyes) resolves to the first #hfyes in the
document. So a daylight copy under this one would paint its area with the graphite copy's
green, and it would look plausible rather than wrong, which is the worst kind. Renaming the id
here would leave the CSS pointing at the other copy and the area would not render at all.
Drawn once, and the daylight hero is on the live feed.
Rule. One event, chosen, with its why line and its chart, and the same two buttons a card has. Anti-rule. Never a carousel and never a countdown that only exists to hurry someone. A first screen that rotates is a first screen that says the choice does not matter.
Eleven lines, three rules, and two of the three are a reset. The whole
of what this component contributes is margin:0;flex:1, the display face and size for
the heading in its head, and a rule that removes its own background inside
app-case. A specimen of .feed alone would be a blank rectangle, and
showing one would be dishonest twice over: it would look like a page that failed to load, and it
would hide the fact that the emptiness IS the component.
main.feed - margin 0, flex 1, transparent
Funding talks have stalled twice this quarter, but past deadlines settled late.
YES 38%
main.feed - margin 0, flex 1, transparent
Funding talks have stalled twice this quarter, but past deadlines settled late.
YES 38%
This is the honest answer to "is a shell a component". It is level 3 by the declaration and by the arithmetic, and it has fewer rules than the smallest atom on the vitrine. A level says what a thing HOLDS, and it has never said anything about how much a thing draws. Rule. The shell takes the remaining space and no decisions. Anti-rule. It never paints a ground of its own: the ground belongs to the page, and a feed that draws one has made every screen that holds it into two grounds stacked.
It stands on no anchor screen, so no reading was taken about it and it has no declared level. That is not the same as "holds nothing": nobody has walked it, and the inventory says so rather than guessing. It is shown here because it exists and a person looking for it should find it, and it is filed under level 3 by its import position and nothing stronger.
Rule. Identity first, then the record, then the bets. Anti-rule. The profile never shows a balance to anyone but its owner, and never a rank.
The one organism that was unmeasured is not any more. profile stands on none of the five anchor screens, so this shelf refused it a level rather than guessing one: the formula answers 1 for an atom and 1 for a file nobody has read, and the two are indistinguishable in the output. Walked on 2026-08-08 on the two screens that carry it, tabs cycled, containment read from the DOM: the identity row holds one button and the gallery holds three cards, so it holds an organism and it is level 3. Its page is profile.
Two are shown once, and that is the finding rather than a limitation of
the stand. Until tabs.css and hero.css stop naming ids, neither
component can be placed twice in one document by anybody, including a developer building a page
with two tab sets on it. Backlog 45.
And the fourth rung is next. components/patterns/ holds six
files whose criterion is repetition rather than nesting: a pattern is three screens or more, adds
no styles of its own and carries no colour. Five of the six stand on the anchors and
action-bar stands on none of the 41.
These always go to the wire. I am holding my position and adding if it dips.
The committee bloc looks firmer this time though.