Level 3, a shell. 105 headers on 105 painted screens, and the one component that shows a different set of controls at every combination of two auth states and two widths. Measured 2026-08-08 in a browser, at 390 and 1280, in both pointer branches.
The level and its reason stay on the organisms page. This page holds the census of a shell whose contents change with WHO is looking and HOW WIDE the window is, plus two rules that were written twice because nobody had put the two auth states side by side.
The specimen's links are the screens' links, re-rooted, and 100 of them are
on this page. The header ships an href on nearly every control it has, and where the row goes
is part of what the row IS: neutralised to # the panel would look right and say
nothing. Copied here verbatim they were worse than broken. Eighty-eight resolved to nothing, and
twelve landed on ui-kit/event-detail.html, this stand's own component page, with a
200 and no sign at all. So each one carries the screen's name under
../ui-visual/: the target is the product's, the prefix is a fact about which folder
this document sits in, and it is the same way the overview already
names a screen.
| part | placements | when it is there | at 390 | at 1280 |
|---|---|---|---|---|
| the bar | 105 | always | 379x59 | 1049x59 |
| the wordmark | 105 | always | 149x40 with a mouse, 149x44 with a finger | |
| How it works | 105 | in the markup always | 0x0 | drawn |
| the bell and the avatar | 73 each | logged in | 44x44 and 56x44 with a finger | |
| the balance | 73 | logged in | 0x0 | 161x42 |
| Sign in / Sign up | 32 | logged out | the button family's | |
| the unread dot | 70 | logged in, with news | a mark on the bell | |
| the search field | 108 | 56.25rem and up, never below | 0x0 | 441x44 |
| the search mark | 108 | below 56.25rem, never above | 44x44 | 0x0 |
| the condensed strip | 105 | never, at rest | 379x0 | 1049x0 |
The two search rows are one control and they are the first pair in this band
that swaps rather than hides. Everything else above is present-or-absent: How it works and the
balance are 0x0 below the desk rung and that is the end of it. Search is
either / or, on one rung, and the rung is a measurement of THIS ROW: the free middle
between the end of .left and the start of .utility is 69px at 640,
137 at 760 and 277 at 900. 640 is the tightest width in the whole product, because the
desk rung turns on the balance pill, the heart and How it works at the same moment it first gives
the row any width to spend. So the field cannot enter at DESK, it enters at RAIL, and below that
the mark opens a sheet. Read on both engines at sixteen widths from 320 to 1600: exactly one
way in at every one of them.
The condensed category strip is in the markup of every screen and 0px tall on every one of them. It is revealed by a script watching the feed's own category bar, so a static reading can only ever see it collapsed. That is correct behaviour and it is worth writing down, because it is the reason another component's sticky offset was wrong for a month: the contents rail cleared 61px for a strip its screen never shows.
Below 640 the wordmark is the ONLY target on the left of the header, because the menu mark and How it works are both switched off there. That is why it is a control at all rather than an image: it is a button that goes home.
The header the 105 screens ship, logged in, both themes. It was a wordmark, a How it works and a balance figure until 2026-08-09: eight elements against the product's seventy-two, and the note under it described two dropdowns and three circles that were not in the cell. A page about a component that shows less of it than the shelf does is the wrong way round: the shelf gives every component one specimen, and this page exists because taking one apart needs room the shelf has not got.
The two dropdowns are nav item's rows in this file's panel, and the circles are icon button's. What this file draws is the band, the row, the inset, the panel and where it opens.
Two things in the cell are the product's and are not this file's: the
balance cluster and the Favorites circle carry .desk-only, so below 640 they are
display:none and the bar is a wordmark, a bell and an avatar. The cell is read at
1280, which is where all three groups exist at once.
The band and the circles belong to other files. What is genuinely this
component's is the panel: a <details> whose marker is removed, a
.dropdown pinned to the right edge of its summary at top:calc(100% + 4px),
and the rows inside it. None of that is visible while the menu is shut, so the specimen opens it.
The panel keeps the product's position and the CELL makes room, which
is the opposite of the bargain .tk-dlg takes for a dialog and the filter menu takes
on its own page. Pinning it static was tried first and it was wrong
here: those two ARE the whole specimen, and this one hangs off one control inside a band, so
static put it in the flow, grew the <details> to 244px and drew the header
440px tall with a wordmark floating in the middle of it. A specimen that has to distort its
own component to show a part of it is showing neither. The band is 59px here and 59px in the
product.
AND OPENING IT FOUND A PRODUCT DEFECT NOBODY COULD HAVE SEEN, on
every one of the 105 screens. This file positioned the panel TWICE. Lines 22 and 36 say
right:0, which is the only thing that can work for two controls at the right end of
a band; a later rule at the same specificity restated position:absolute and added
left:0, so left won and both menus opened RIGHTWARDS from their
control. Measured in the product, not here: at 390 the notification panel stood 142px past
the right edge of a 390px window, 55 per cent of it off-screen, and the account menu 126px;
at 1280, 116 and 100. Every sweep this repository runs reads the document as it loads, and a
<details> is SHUT then, so the panel had no box to measure and no contrast to
check. It took building this page and opening the menu on purpose. Fixed in
components/header.css: the later rule carries the skin and the position stays where
it was declared first. Verified right-aligned and inside the window on the product and on both
kit pages, at 390 and 1280.
What the stand adds is two declarations on the cell:
overflow:visible, because .tk-theme-fig carries
overflow-x:auto for the category rail and CSS resolves the other axis to
auto with it, which is exactly what scrolls an absolute panel out of sight; and a
reserved strip below the band, the panel's own measured height plus its 4px offset.
Logged out, above. The claim below was measured across all 105 screens and had no specimen under it until 2026-08-09.
The bell and the heart are the same shape in both header states, measured across all 105 screens at 360 and 1440: 36px, a 1px hairline, a transparent ground and a pill corner, logged in and logged out alike. What differs is the ELEMENT. Logged out they are buttons; logged in the bell is a summary that opens a menu.
Two rules for one face is how a divergence starts. The face is the atom's now, and this file keeps only what is genuinely different: a summary needs its marker removed and a panel positioned under it, and neither of those is what the circle looks like.
How it works left on 2026-08-06 and became the button family's fifth size, a labelled press with a transparent ground, which the family had no name for until the census measured 177 placements wearing one. Two selectors were SPLIT rather than moved, because each also styled the two disclosures, and those are still this file's.
The press was the axis this file never had. Every quiet control in the header is flat at rest, a transparent ground inside a hairline, so it presses the one way the whole system presses: it settles onto the single held ground, declared in both themes. Nothing to unlift, because nothing here is lifted.
The wordmark presses square-cornered, and the reason is a rule rather than a taste: a radius is geometry and a state may not move the element it is on. The card file gives the same answer for the same reason.
The balance plate is the exception, and it is the system's three-step of a brass plate: rest lights it from the top left, hover takes the lit role to both stops so the whole face comes up, press flips the angle so the light falls to the bottom right, which is what a plate pushed IN looks like, and drops the glow, because a plate that is down is not lifted.
A selector for a course-page layout sat in this file describing something the
app header has nothing to do with. The class it named is carried by three course pages, and not
one of the 28 course pages loads components/index.css, so the rule could never
fire in any tree.
A rule in the wrong file is invisible until somebody counts what is actually worn. It was found the first time the worn names were counted, not by reading the file, which had been read many times.
The panel above is the panel with rows in it, and the product ships a
second face. .notif-empty stands on 3 screens: one paragraph where the rows
would be, and the See all link stays. It had never been drawn in the kit, so the panel a new
account actually opens on its first day was the one face nobody could look at.
The header has a second face and the kit had never drawn it.
.scrolled is added by a page script the moment the full category bar leaves the
viewport, and it is on the live header of 57 screens. What it does is open
.cat-condensed, the small icon-less strip that keeps the categories reachable once
the big one has gone: max-height 0 to 54 and opacity 0 to 1, with a groove above
it. The strip is in the markup of every specimen on this page and every one of them was drawn
shut, so the class was measurable, correct and invisible.
Written by hand here because a script writes it in the product, the same bargain the odds bar and the meta row take on card. Nothing else in the cell differs: it is the specimen above with one class added.
Its own width query: 640 DESK, and that is one number where it was two until 2026-08-14. Below DESK the row drops the one labelled control in it, .hiw-btn, and there is nothing else conditional left. The reserved hamburger used to go at the same rung and the hamburger does not exist any more: a <button> labelled "Menu (reserved for future scaling)" with no handler, no drawer and no destination, on 105 painted screens, 87 grey ones and 10 specimens here. A rule that hides a control below the desk is a rule whose whole content is an opinion about that control, so that one went with its subject rather than sitting as a selector matching nothing. And the label moved DOWN a rung because the hamburger was 44px of the reason it waited. It used to wait for DETAIL 760, cut on a measurement: at 641 the desk row asked 694px against a 641px window and 73 of 106 screens took horizontal scroll from 641 to 652. 36 of that 694 was the hamburger and 8 was its gap. Re-measured with the label forced visible on all 105 screens in both engines: 0 pages scroll sideways from 358 up, worst intrinsic row demand 535.8 at 641. The rule is still real and its width is 358, not 760: walked at 4px steps from 320, 32 screens overflow their header row by 38px at 320 falling to 2px at 356, and all 32 are the logged-out ones carrying .auth-btns, which is the mirror of the 73 above. 358 does not become a rung. The ladder holds three and a fourth number bought for one control is what the registry exists to stop, so the rule sits on DESK 640 and the band from 641 to 759 comes back. As shipped: hidden 0 of 105 below 640, shown 105 of 105 from 640, 0 side scroll at 320, 390, 639, 640, 641, 759, 760 and 1280 in Chromium and WebKit. docs/backlog.md 149. Below DETAIL the one labelled button in the row goes: at 641 the signed-in desk row asks for 694px against a 641px window, which put 73 of the 106 painted screens into horizontal scroll from 641 to 652. Without .hiw-btn the row asks 598 and fits from 641 on. Nothing is lost, because How it works has a second trigger on every feed and a page of its own.
And that walk was taken with a mouse, so it measured a row 24px narrower than the one a thumb gets. With pointer:coarse asserted in the page the two icon marks in this cluster go from 32 to 44 each, and at 320 the logged-out utility asks 213.72px against the 306 this row can give. The pair was not just overflowing, it was being SHRUNK to pay for it: Sign in measured 49.27 and Sign up 52.45 against their natural 63.97 and 69.17, so what a reader saw was a squeezed pair with the 14px gutter gone and 1.81px of Sign up off the edge, on 36 painted documents and their 36 grey twins. No rule was added: the answer was already in the row. The logged-out heart has always been .desk-only, because below the rung the thumb bar carries Favorites. The bell logged-out is the same kind of thing one control along, showing no badge and routing to Sign In, which this row already offers twice. It takes the class its sibling wears and the cluster falls to 193.14, landing on 306 exactly. Walked 320 to 400 at 2px on both engines over all 36 documents with a positive control at every width: 0 over. docs/backlog.md 205.
A shell owns the band, the row and the panel. It owns no control. The wordmark, the circles, the menu rows and the labelled press are four other files.
The same face in two auth states is one rule, not two. The element may differ; the drawing may not.
A state may not move the element it is on. A press changes colour and depth, never geometry.
Never write the same circle twice because the tag changed. The measurement said 36px, a hairline, transparent and a pill in both states, and the two copies had already begun to drift.
Never assume a part you can see in the markup is on the screen. The condensed strip is 0px tall on all 105, and another component's sticky offset was built on the assumption that it is not.
Never leave a hover without a press in a shell that is used on a phone. Nine of them, and a tap said nothing at all.
The level and its reason: the organisms
page. The stylesheet: components/header.css. The circles:
icon button. The menu rows: nav item. The
labelled press: button. The strip below it:
category nav. The rail that trusted the strip:
contents.