/* ui-kit/_page.css - stand styles only, and only the ones a page here actually uses. WHAT THIS FILE IS NOW. The previous one was 854 lines and styled a vitrine of 65 generated pages that no longer exists. It was not restored: 800 of those lines painted classes nothing renders any more, and a stylesheet kept "in case" is the same debt as a gate kept in case. This is the small half that two index pages still need, extracted rule by rule from the original on 2026-08-07 with the values unchanged. It grows one rule at a time as the kit is rebuilt. SIX RULES HERE STYLE A PRODUCT CLASS, ON PURPOSE, AND THIS PARAGRAPH USED TO SAY NONE DID. It read "Nothing here is product. No product class is styled here", which was written when the file held two index pages' furniture and was still true of nothing after 2026-08-09. The six are `dialog[open]`, `.bet-dock`, `.bet-panel`, `.ed-layout`, `.bottom-nav` and `.filter-menu[open] > .filter-panel`, each of them a BARGAIN a specimen has to strike to be visible at all: a shut dialog is `display:none`, an absolute panel takes no room in the flow, a sticky dock is a claim about a scrolling screen and not about a 100px cell. Every one is written below with its reason and its measurement, and every one is scoped under a `.tk-*` ancestor, so it cannot reach a screen: `_page.css` is linked by two index pages and no product screen at all. THE SENTENCE WAS THE DEFECT AND NOT THE RULES. A stylesheet that claims a purity it does not have teaches the next reader to trust the claim instead of the file, and the one thing that stops a bargain becoming a habit is that it has to be declared, counted and argued for where it stands. Six today. The rule that governs them is the scope: a stand may pin a product class INSIDE a specimen cell, and may never style one loose. Product css lives in components/. Prefix: .tk-* (tokens stand), and since 2026-08-12 that is true of the classes as well as of the custom properties. No em dash. */ /* THE STAND'S FOUR CUSTOM PROPERTIES ALL CARRY --tk-, SINCE 2026-08-11, AND ONE OF THEM HAD TO BE RENAMED TO GET THERE. `--measure` was declared here as a bare name in the SYSTEM's namespace, and on 2026-08-11 the system claimed the same name for the line measure. `_page.css` loads after `components/index.css` on every kit page, so the stand won silently on all 57 of them: the system said 66ch, this file said 74ch, and the page whose whole subject is that token was drawing 810px where 66ch is 722px and calling it capped. Nothing broke and nothing looked wrong, which is why it needed a control to find. THE RULE THIS FOLDER ALREADY STATED COVERS IT AND WAS WRITTEN FOR CLASSES: a stand page may never style a product class, and `_page.css` is `.tk-*` only. A custom property is a name in the same shared namespace as a class, and the stand is a guest in it. `--cell`, `--sw` and `--u` were equally exposed and are renamed with it, so the collision is impossible rather than fixed once. The one exception is deliberate and is two hundred lines down: `.tk-measured` reads the SYSTEM's `--measure`, because that specimen IS the system token. AND THE CLASSES WERE NOT FIXED WITH THEM UNTIL 2026-08-12, WHICH LEFT THE POSTMORTEM ABOVE ARGUING AGAINST 195 LIVE CASES OF ITSELF. The four properties were renamed and the utilities were left bare: `.c-*` 66, `.p-*` 62, `.sz-*` 12, `.sp-*` 11, `.s-*` 10, `.d-*` 8, `.l-*` 6, `.r-*` 6, `.w-*` 4, `.ic-*` 4, `.ct-*` 3, `.f-*` 3. Every one of them is one word in the same shared namespace the paragraph above is about, and this file loads AFTER `components/index.css` on all 57 pages, so the stand would win the collision silently the way it won `--measure`. TWO OF THE TWELVE WERE ALREADY TOUCHING THE SYSTEM. `base.css` owns `.ic` and `.ic-sm` and this file owned `.ic-12/16/18/22`: one family, two owners, four names apart. And `oddsbar.css` writes `.l-yes` and `.l-no`, scoped under `.oddsbar`, in the same `.l-*` family this file used for line height. Neither collided, which is the point: `--measure` did not collide either, for the months before it did. So the 195 are `.tk-` prefixed, weights as `.tk-wt-*` because `.tk-w-288` was already a width, and the icons page's 72px box is `.tk-icbox` so it cannot be read as the `.tk-sz-*` ramp. Proved inert rather than eyeballed: 114 renders of all 57 pages at 360 and 1440, control 0 differing rows of 69,928 twice over, and 8 rows after the rename, all of them the two class NAMES this kit prints in its own prose getting three characters longer. */ :root{--tk-measure:74ch} /* ---- page frame ---- */ .tk-wrap{max-width:1120px;margin:0 auto;padding:0 20px 80px} @media(max-width:639.98px){.tk-wrap{padding:0 14px 60px}} /* ---- page head ---- */ .tk-hero{padding:44px 0 4px} .tk-hero h1{font-family:var(--font-display);color:var(--text-primary); /* THE STAND'S OWN TITLE KEEPS ITS OWN CLAMP AND SAYS SO. The eight `--display-*` tokens are the PRODUCT's display sizes and none of them is 30 to 44: the nearest, `--display-hiw`, tops at 38. A kit page title is furniture around the specimens rather than a specimen, so borrowing a product token here would put a product decision on a page that is not the product, which is the same mistake as a stand class standing in for a product class. It is `rem` rather than `px` so it moves with a reader's font setting, which is the whole reason the ramp exists. */ font-size:clamp(1.875rem,5vw,2.75rem);font-weight:700;letter-spacing:-.03em;margin:0;text-wrap:balance} /* 66 and not the measure, and the two used to be the same number by accident. This is the lead under a display title, and the reason written here was "a lead reads as a lead by being shorter than the body under it", which was true while --measure was 66ch and is not now: the token moved to 46ch on 2026-08-12 when `ch` turned out to be 1.48 characters rather than one. The literal stays because the relation it was chosen for was never to the token, it was to the display title above it. What changed is that the coincidence is gone and the sentence that depended on it has to go with it. */ .tk-hero p{color:var(--text-muted);font-family:var(--font-body); margin:10px 0 0;max-width:66ch;line-height:1.55;font-size:var(--text-14)} .tk-hero code,.tk-note code{font-family:var(--font-mono);font-size:.9em;color:var(--text-brass)} /* A link in running text. Without this it falls back to the browser blue, which is the one colour the Vault has no place for, and no source scan can see it: the markup is correct and the value is a User Agent default. It was found by asking the browser for the computed colour of every anchor that paints text of its own. */ .tk-note a,.tk-hero p a{color:var(--text-brass);text-decoration:underline; text-decoration-color:var(--border-brass,rgba(199,162,78,.3))} .tk-note a:hover,.tk-hero p a:hover{text-decoration-color:currentColor} .tk-note a:focus-visible,.tk-hero p a:focus-visible{outline:2px solid var(--text-brass); outline-offset:2px;border-radius:3px} .tk-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .tk-badge{display:inline-block;font-family:var(--font-mono);font-size:var(--text-11); color:var(--text-brass);border:1px solid var(--border-brass,rgba(199,162,78,.3)); border-radius:100px;padding:3px 10px} .tk-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .tk-jump a{font-family:var(--font-mono);font-size:var(--text-11); color:var(--text-muted);border:1px solid var(--border-hairline);border-radius:100px; /* THE STAND READS THE SYSTEM'S TOKENS TOO, 2026-08-15. This was `.15s` twice, a number on no ladder, and it survived every count because a stand is not a product. It stopped being harmless the moment the reduced-motion check was run without the blanket net: 690 elements per engine over 10 kit pages, and `ui-visual/overview.html`, kept moving when a reader had asked for less, because a literal reads no token and there was nothing else left to catch it. A stand is not a product and IS read by a person. */ padding:5px 12px;text-decoration:none; transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)} .tk-jump a:hover{color:var(--text-brass);border-color:var(--border-brass,rgba(199,162,78,.3))} /* A ROW THAT HAS NO PAGE YET IS STILL IN THE ROW, dashed and unclickable, for the same reason the side panel keeps it: a jump row that lists only what is finished looks finished. Same box as the link so the gap in the row is a border style and not a hole. IT DRAWS NOTHING TODAY AND IT IS KEPT, WHICH IS THE ONE EXCEPTION ON THIS FILE AND IT HAS TO BE ARGUED FOR. The dead-selector sweep of 2026-08-12 found this rule matching nothing on any of the 57 pages, because `_nav.js` has 0 rows with `done:false` and every other dead selector was deleted the same day. This one is not dead, it is UNEXERCISED: `jump()` in `_nav.js` still writes a `` for a row with no page, that branch is live and deliberate, and the panel's own mirror of it is `.sidebar-page-link .planned` in `course-chrome.css`, which nothing in this folder owns. Delete the paint and the branch still runs, so the day somebody adds a planned row the jump row gains an unstyled naked word and nobody sees the badge. THE TEST IS WHETHER A LIVE BRANCH WRITES IT, not whether it painted today. */ .tk-jump span{font-family:var(--font-mono);font-size:var(--text-11); color:var(--text-icon);border:1px dashed var(--border-hairline);border-radius:100px; padding:5px 12px;cursor:default} /* ---- section ---- */ .tk-sec{margin-top:44px;border-top:1px solid var(--border-hairline);padding-top:24px; scroll-margin-top:20px} .tk-sec>h2{font-family:var(--font-display);color:var(--text-brass); font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px; display:flex;align-items:center;gap:10px} .tk-sec>h2::before{content:attr(data-n);font-family:var(--font-mono);font-size:var(--text-10); color:var(--text-muted);border:1px solid var(--border-hairline);border-radius:6px; padding:1px 6px;letter-spacing:0} /* ONE MEASURE, DECLARED ONCE. Measured on 2026-08-05 with the real `ch` unit: a bare

inside a section ran at 99 characters per line while the footnote beside it was held to 76. The block a reader came for was the one with no max-width at all. */ .tk-sec>p{max-width:var(--tk-measure)} .tk-note{color:var(--text-muted);font-family:var(--font-body);font-size:13px; margin:0 0 18px;max-width:var(--tk-measure);line-height:1.55} .tk-subh{color:var(--text-muted);font-family:var(--font-body);font-size:var(--text-11); font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:26px 0 10px} /* ========================================================================== THE VITRINE - one component per block, its faces down the page, both themes across it. Added 2026-08-07 for vitrine.html. BOTH THEMES IN ONE DOCUMENT, and that is the point of the whole layout. The roles in tokens.css are declared on `:root,[data-theme="dark"]` and on `[data-theme="light"]`, and the light selector carries no `:root`, so ANY element can be marked and its subtree gets that theme. So the two columns are not screenshots and not a toggle: they are the same markup resolving twice, in one page, at the same instant. A role with a value in only one theme renders anyway, and the only way to see that is to have the other one next to it. Nothing in this block styles a product class. It draws the table the specimens sit in, and every specimen inside a cell is painted by components/ alone. */ .tk-comp{margin-top:40px;border-top:1px solid var(--border-hairline);padding-top:22px; scroll-margin-top:20px} .tk-comp>h2{font-family:var(--font-display);color:var(--text-primary); font-size:var(--text-20);font-weight:700;letter-spacing:-.02em;margin:0 0 8px} .tk-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none} .tk-meta li{font-family:var(--font-mono);font-size:var(--text-10);color:var(--text-muted); border:1px solid var(--border-hairline);border-radius:6px;padding:2px 8px} .tk-meta li.tk-decl{color:var(--text-brass);border-color:var(--border-brass,rgba(199,162,78,.3))} /* The 1px gap IS the rule line: the grid's own background shows through it, so a cell needs no border of its own and no border collapses against its neighbour. */ .tk-faces{display:grid;grid-template-columns:190px 1fr 1fr;gap:1px; background:var(--border-hairline);border:1px solid var(--border-hairline); border-radius:10px;overflow:hidden;margin:0 0 8px} .tk-colh{font-family:var(--font-mono);font-size:var(--text-10);letter-spacing:.06em; text-transform:uppercase;color:var(--text-muted);background:var(--bg-surface); padding:8px 12px} .tk-lab{font-family:var(--font-mono);font-size:var(--text-11);color:var(--text-muted); background:var(--bg-surface);padding:14px 12px;display:flex;flex-direction:column; justify-content:center;gap:4px;word-break:break-word} .tk-lab b{color:var(--text-primary);font-weight:400} .tk-lab i{font-style:normal;font-family:var(--font-body);font-size:var(--text-10);opacity:.8} /* THE GROUND IS THE PLATE, not the page. In the product a control almost never stands on the page: it stands on the plate the feed and the detail shell draw. A specimen on the page ground is a specimen measured against a surface it is never seen on. */ .tk-theme-fig{background:var(--bg-plate);color:var(--text-primary); padding:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-width:0; overflow-x:auto} /* A STACKED CELL MUST NOT WRAP, AND THE ONE WORD IS WORTH THIRTEEN LINES BECAUSE IT PAINTED A COMPONENT THE PRODUCT DOES NOT HAVE. `flex-wrap:wrap` is the row cell's rule and it is right there: several specimens side by side spill onto a second line. `.tk-stack` turns the same cell into a COLUMN and inherited the wrap, which makes it a multi-line column container, and a multi-line column container with a definite height hands its free space to its items instead of leaving it at the bottom. The cell's height is not its own: `.tk-pair2` is a grid and the row is as tall as the taller theme. So on action-bar.html a 218px cell pushed `.cta-bar` from 55 to 76, the bar is `align-items:normal` which is stretch, and IT PUSHED THE BUTTON FROM 47 TO 68. Twenty specimens on two pages, and the two pages are the ones whose whole job is to show what a `.btn-md` is. A person who had never opened the product would have learned the wrong number from the only place built to teach it. Proved by toggling one property at a time in a browser rather than by reading: `flex-wrap:nowrap` gives 55 and 47, the product's own numbers, and every other candidate (`align-content`, `justify-content`, the stack's `align-items`) moved the WIDTH and left the height at 68. */ .tk-theme-fig.tk-stack{flex-direction:column;align-items:stretch;flex-wrap:nowrap} .tk-theme-fig>*{max-width:100%} /* AND A CAP THAT IS THE SUBJECT OF THE PAGE MUST SURVIVE THE CELL IT IS SHOWN IN, 2026-08-20. The rule above is a guard against a specimen overflowing its cell, and on `.read-col` it was ALSO overwriting the thing being shown: the reading column declares `max-width:var(--measure)`, 46ch at its own 16px, which is 503 in the product, and the guard replaced it with 100 per cent of the cell, so `ui-kit/browse-shell.html` drew the document column at **1046 at 1440** on the page whose own prose says a column measured in a table on a page that never drew it is a number with no subject. A cap narrower than the cell cannot overflow it, so the guard has nothing to do here. Found by measuring the specimen against the screen it quotes, which is the only way this class of defect shows: it renders, it is not an error, and it is confidently the wrong number. docs/backlog.md 214. */ .tk-theme-fig>.read-col{max-width:var(--measure)} /* A COMPONENT THAT SPANS THE WINDOW CANNOT BE SHOWN IN A CELL THAT HAS MARGINS, AND THE STAND WAS 62px SHORT OF THE PRODUCT AT EVERY WIDTH. Backlog 158, 2026-08-15. The header and the bet dock are the two things here that are as wide as the window; this cell has 16px of padding inside a page with 14 or 20 more, so a header specimen measured 258 / 298 / 328 against the product's 320 / 360 / 390. **The cost was not cosmetic**: `.auth-btns` is INTRINSIC at 141 in the product at every width from 320 up, and in the cell it was squeezed to 114 and 133, so `Sign in` and `Sign up` painted on two lines at 320 and at 360 on a page whose whole job is to say what that header is. `Confirm bet` did the same in a 258px dock against the product's 320. Measured in both engines. DROPPING THE CELL'S OWN PADDING IS NOT ENOUGH AND THE HALF FIX IS THE INTERESTING PART: it gives 290 / 330 / 360, which cures 360 and leaves 320 wrapping, so a sweep run only at 360 would have called it fixed. The cell has to cancel the PAGE's inset too, which is what the negative margin is, and it is written at both of the wrap's own values rather than at one, because `.tk-wrap` is 14px below the desk and 20px above it. After: the row reads 318 of 320, the two pixels being this cell's own border, `.auth-btns` is 141, the product's number, and 0 labels wrap at any width. This is the same sentence as the one about a cell narrower than any placement, and the other half of it: the themes were ALREADY stacked here, so stacking was not the cure and the row that asked for it was reading the symptom. */ .tk-theme-fig.tk-bleed{padding-left:0;padding-right:0;margin-inline:-20px} @media(max-width:639.98px){.tk-theme-fig.tk-bleed{margin-inline:-14px}} /* A CELL SCROLLS, IT DOES NOT CLIP. `.chip-nav` is `white-space:nowrap` with 20px of side padding, and in the product it stands in a rail that scrolls sideways. In a fixed cell at 390 it ran 5px past the edge. Clipping there would have shown a chip that is not the chip, so the cell carries the rail's own behaviour. */ /* A SPECIMEN THAT IS ABSENT ON PURPOSE SAYS SO, AND IT SAYS THE COMPONENT'S OWN NUMBER. This was two classes, `.tk-absent` and `.tk-wide-only`, and both were written at 900px. 900 IS A REAL BREAKPOINT IN THIS SYSTEM, six declarations across chip, hiw, catnav, browse-shell and toc, AND IT BELONGS TO NEITHER OF THE TWO COMPONENTS THESE LABELS DESCRIBE: the bottom bar goes at 640 and the bet panel arrives at 760. That is why it was never caught by eye. A borrowed number reads exactly like the right one, because it IS one of the system's numbers, just not this component's. Read at eight widths on 2026-08-09, it bought two live bands. On molecules.html between 640 and 899 the bar was gone and the sentence had not appeared yet: 260px of silently empty cell. On vitrine.html between 761 and 899 the panel was drawn and the sentence beside it read "not rendered below 900px": 139px of a label arguing with the thing under it. A NUMBER IN A SENTENCE IS A SECOND COPY OF THAT NUMBER, so the copy is put where a reader trips over it: the threshold is in the class name, the class name sits in the markup beside the sentence, and the media query here is the only other place it is written. It was two modifiers, "because the system has two components that do this; a third would be a face with no placement", and on 2026-08-09 a THIRD PLACEMENT TURNED UP and the sentence was answered rather than argued with. The bet dock is `display:none` from 760 up, the width where `.bet-panel` replaces it, and the atom shelf had been drawing its pair in a `.tk-pair` at every width instead. Three components do this now and there are three modifiers. THE TWO NUMBERS ARE NOT MIRRORS, AND A BOUNDARY READ IS THE ONLY THING THAT SAYS SO. `min-width:640px` HIDES the bar, so the bar is gone AT 640 and the label has to start there; `min-width:760px` SHOWS the panel, so the panel is gone at 759 and the label has to stop there. Written as the obvious pair, 641 and 759, the first left a ONE PIXEL hole at exactly 640 where the cell was empty and silent, found by reading 12 widths instead of 8. BOTH NUMBERS ARE THE SYSTEM'S AND NEITHER IS THIS STAND'S: 640 is the DESK rung and 760 is the DETAIL rung, and the ladder that names them is in the page frame of components/tokens.css. That is the whole cure for the 900 this pair used to be written at. A stand may not invent a width any more than a component may. */ .tk-gone{display:none;margin:0;font-family:var(--font-mono);font-size:var(--text-11); color:var(--text-muted)} @media(min-width:640px){.tk-gone.tk-above-640{display:block}} /* A RUNG IS ONE PIXEL AND IT BELONGS TO THE WIDE SIDE, which is why the three lines here read 639.98 / 759.98 / 640 / 760 and not 640 / 760 twice. `max-width:640px` and `min-width:640px` both match AT 640, so a stand written with the pair says "not rendered from 640px up" while its own frame is still on the mobile inset. The .98 rather than 639 is because a zoomed window reports a fractional width and an integer bound would leave a gap where neither branch applies. components/tokens.css, page frame, and docs/backlog.md 72. */ @media(max-width:759.98px){.tk-gone.tk-below-760{display:block}} @media(min-width:760px){.tk-gone.tk-above-760{display:block}} /* Layout the specimens need and the product does not provide. These exist so that no `style=` attribute has to carry a layout value: the only inline styles left on this page are the two the rules allow, a datum (the odds fill width) and the event photograph. `.tk-pair` STOOD HERE UNTIL 2026-08-12 AND ITS OWN POSTMORTEM OUTLIVED IT BY THREE DAYS. It was `display:flex;gap:8px`, the stand's stand-in for the bet pick's container, and the paragraph below is the record of it being replaced by the product's `.bp-dir` on 2026-08-09. The rule was left behind, matching nothing on any of the 57 pages, under a comment explaining why nothing should ever match it again. A COMMENT IS NOT A DELETION. */ /* A PAIR THAT IS AS WIDE AS THE CELL IS A PAIR THE PRODUCT NEVER DRAWS, and for a control whose label wraps that is a different HEIGHT, not just a different width. `.yesno-pick.bp-side` stands in `.bet-panel`, which is `flex:0 0 322px`, so inside the panel's 16px padding the two picks are 140 each with an 8px gap: 288, measured on every placement in the painted tree. Given the shelf's own column it took 186.5 each and drew 66.5 tall where all 24 placements draw 70.5. THE NUMBER IS IN THE CLASS NAME for the same reason `.tk-gone` carries its threshold: a width copied into a sentence drifts away from the width in the rule, and this one is a measurement of the product rather than a taste. AND THE WIDTH WAS ONLY HALF OF IT. Capped at 288 the pick was 140 wide, the product's own number, and still drew 66.5 against 70.5. The other 4px is `betpanel.css:57`, `.bp-dir .bp-side .bp-pct{margin-top:4px}`, a rule keyed to the container the product puts the pair in. The specimen was in `.tk-pair`, so THE COMPONENT'S OWN STYLESHEET COULD NOT REACH IT. A stand class standing in for a product class is a copy of the markup, which is the one thing the kit is not allowed to hold: the pair is `.bp-dir` now and the dock pair is `.bet-dock`, exactly as the screens ship them. */ .tk-w-288{max-width:288px} /* The dock is `position:sticky;bottom:52px`, which is a claim about a scrolling screen and not about a 100px cell. Pinned static here, the same bargain `.tk-dlg` makes for a dialog and `.filter-panel` for an open menu, and the same one thing differs: the position. */ .tk-theme-fig .bet-dock{position:static;bottom:auto} /* AND THE FOURTH BARGAIN, 2026-08-09, AND THIS ONE IS ABOUT WIDTH RATHER THAN POSITION. `.bet-panel` is `display:none` below 760 and `.bet-dock` is `display:none` above it: ONE control at two widths, and neither ever sees the other. So a page read at BOTH widths draws one of them as an empty cell whichever width you are at, and on this page all three faces are the subject. `.tk-show-nav` above already made exactly this bargain for the bottom bar, so these are modifiers for the same reason: the page where an absence IS the fact being taught must keep the absence. The panel keeps `flex:0 0 322px`, the product's own width, so what stands here is the width it ships at. */ .tk-theme-fig.tk-show-panel .bet-panel{display:block;position:static;top:auto} .tk-theme-fig.tk-show-dock .bet-dock{display:flex} /* AND THE PANEL BRINGS ITS CONTAINER WITH IT, which is not a detail. `.bet-panel` sizes itself with `flex:0 0 322px`, and a flex BASIS is a width in a row and a HEIGHT in a column. `.ed-layout` is a column below 760 and a row above it, so a specimen sitting in the stand's own column cell read the 322 as a height: the panel drew 353 x 322 with `overflow:clip` cutting it, against 322 x 558 in the product. The container is `.ed-layout` here for the same reason the pair is `.bp-dir`, and the modifier holds it in the direction the panel is drawn for. */ .tk-theme-fig.tk-show-panel .ed-layout{flex-direction:row;align-items:flex-start} /* AND THE SAME BARGAIN FOR THE BOTTOM BAR, ON THE ONE PAGE WHERE THE BAR IS NOT THE SUBJECT. `.nav-slot` has 420 placements and every one of them is in `.bottom-nav`, which is `display:none` from 640px up and `position:sticky`. On `navitem.html` the subject is the SLOT, and a slot nobody at 1280 can see is not a specimen, so this cell pins the bar visible and static. It is a MODIFIER and not `.tk-theme-fig .bottom-nav`, because on `bottomnav.html` the bar IS the subject and its absence above 640 is the fact that page teaches: an unmodified selector would have quietly overwritten it. */ .tk-theme-fig.tk-show-nav .bottom-nav{display:block;position:static} /* AND THE FIFTH BARGAIN, 2026-08-14, AND IT IS DELIBERATELY HALF A BARGAIN. `.filters-btn` is `display:none` above DESK 640, so on a stand read at 1280 the phone's whole filter control is an empty cell. One declaration brings it back and **everything a reader then sees is `filters.css`'s own**: the ground, the edge, the corner, the padding, the hover, the press and the 44px floor all arrive from the system, because the button joins the summary's face rather than owning a second copy of it. That is a specimen. THE SHEET IS NOT PINNED AND THAT IS THE POINT. Its box is `position:fixed`, a bottom inset, a max-height in `svh`, a top-corner radius and a lift, and none of that survives being restated here: a cell that redrew it would be a hand-kept copy of six declarations, drifting from the file the moment either is edited, and this kit's rule is that it reads the system and never a copy of it. So the sheet is named with `.tk-gone.tk-above-640`, which is the idiom this stand already has for a face that exists at a width the page is not being read at. **Draw what the system can draw, name what it cannot, and say which is which.** The alternative is not "show more", it is "show something that is no longer true". */ .tk-theme-fig.tk-show-filters .filters-btn{display:inline-flex} .tk-photo{display:inline-flex;align-items:center;justify-content:center; width:72px;height:72px;background-size:cover;background-position:center; border-radius:10px} .tk-wide{width:120px} /* A BLOCK HOLDER, and it is load bearing. `.bet-panel` is `flex:0 0 322px`, sized to be an item in the detail screen's ROW. Dropped straight into a specimen cell that is a flex COLUMN, that basis is read as a height and the panel rendered 322px tall and mostly empty. A component carried out of its layout brings the layout's assumptions with it, and this is what that looks like. */ .tk-hold{display:block;width:100%;max-width:322px;min-width:0} /* A defect shown on purpose is labelled on purpose, or the next reader copies it. The class sits ON the label, so this is a compound and not a descendant: written as `.tk-bad .tk-lab` it matched nothing and the warning rendered as an ordinary caption, which is the exact failure the row is there to warn about. */ .tk-lab.tk-bad,.tk-lab.tk-bad b{color:var(--outcome-no-text)} @media(max-width:759.98px){ .tk-faces{grid-template-columns:1fr 1fr} .tk-lab{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:8px; padding:10px 12px;flex-wrap:wrap} .tk-colh:first-of-type{display:none} } /* AND BELOW 640 THE TWO THEMES STOP STANDING SIDE BY SIDE, which is a real cost and is taken on purpose. Side by side is the reason this vitrine exists rather than a set of screenshots. But two columns at 390 leave each specimen about 143px of room, and no placement in the product is that narrow: the notification row stands at 258 on all 210 of its placements and read 65.5 tall in a 148px cell against 49 everywhere else, and the bet pick read 70 wide against 96 to 240. A COMPONENT MEASURED IN A CELL NARROWER THAN ANY PLACEMENT IS NOT THE COMPONENT, it is that label at that width, and comparing two of those against each other compares nothing. `organisms.html` already took this bargain by hand for the same reason, a header cut to 430px is not a header; this is the same decision made once, in the stylesheet, for every shelf. 640 is the number because the file already turns at 640 and at 760, and at 640 the two columns are still 305 wide, which clears the widest placement that wraps. */ @media(max-width:639.98px){ .tk-faces{grid-template-columns:1fr} } /* ========================================================================== FOUNDATIONS: THE ICON GRID. Added 2026-08-07 for icons.html. A set is a grid with rules, not a sheet of pictures, so the page has to draw the grid. Every cell below is the 24 unit viewBox at a chosen size, with the module lines, the 2 unit safe field and the geometric centre painted under the glyph. The glyph itself is the product's own path, at the product's own stroke. THE FIELD IS CHECKED AGAINST THE PAINT, NOT THE CURVE. A stroked path paints half its width outside its geometry, so a safe field read off getBBox alone is short by stroke/2 on every side and the whole audit reads a module too kind. */ .tk-cell{--tk-cell:96px;--tk-u:calc(var(--tk-cell)/24); position:relative;width:var(--tk-cell);height:var(--tk-cell);flex:0 0 auto; border:1px solid var(--border-hairline);border-radius:10px;background:var(--bg-well); background-image: repeating-linear-gradient(to right,var(--line-grid) 0 1px,transparent 1px var(--tk-u)), repeating-linear-gradient(to bottom,var(--line-grid) 0 1px,transparent 1px var(--tk-u))} /* the safe field, 2 modules in from every edge */ .tk-cell::before{content:'';position:absolute;inset:calc(var(--tk-u)*2); border:1px dashed var(--color-action);opacity:.6;pointer-events:none} /* the geometric centre, so an optical shift can be seen rather than argued about */ .tk-cell::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5; background: linear-gradient(to right,transparent calc(50% - .5px),var(--color-action) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)), linear-gradient(to bottom,transparent calc(50% - .5px),var(--color-action) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px))} /* `.tk-plain` STOOD HERE UNTIL 2026-08-12, three rules that turned the module grid, the safe field and the geometric centre back off again. Nothing has ever worn it: every cell on `icons.html` wants the scaffolding, because the scaffolding IS the argument that a set is a grid with rules rather than a sheet of pictures. A modifier that undoes the point of the page it was written for is a modifier with no case, and it was written for a page that could imagine one. */ .tk-cell-lg{--tk-cell:264px} .tk-cell-sm{--tk-cell:72px} .tk-glyph{position:absolute;inset:0;width:100%;height:100%;overflow:visible; fill:none;stroke:var(--text-primary);stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} /* The sprite half is Solar Bold: filled, no stroke, and its paths say fill="currentColor", so the ink arrives as `color` and not as `fill`. */ .tk-glyph.tk-fill{fill:var(--text-primary);stroke:none;color:var(--text-primary)} /* `.tk-brand` stood here until 2026-08-12, a brass stroke at 2.6 for a brand GLYPH. There is no brand glyph. The mark is a wordmark, `.logo`, and `logo.html` draws it as the product's own text control in four placements. A class named for a thing the product does not have is the same defect as `.icon-btn-photo` being named for a ground it does not stand on, and this one never even had a placement to be wrong about. */ .tk-glyphs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px; margin:0 0 8px} .tk-gl{margin:0;display:flex;flex-direction:column;gap:7px;align-items:flex-start} .tk-gl figcaption{font-family:var(--font-mono);font-size:var(--text-11);color:var(--text-primary); display:flex;flex-direction:column;gap:2px;line-height:1.35} .tk-gl figcaption i{font-style:normal;font-size:var(--text-10);color:var(--text-muted)} /* An `em` in the same caption painted it in the NO red, a warning slot for a glyph with something wrong with it. Deleted 2026-08-12, worn by none of the 52. The page says what is wrong with a glyph in the sentence under the grid, where the reader is already reading, and `.tk-lab.tk-bad` is the family that does this on a cell. Two ways to mark a defect is one way and a hole. AND THE HOLE OPENED ANYWAY, FOUND 2026-08-21. `tk-bad` is styled ONLY as a compound with `.tk-lab`, and two paragraphs in two pages carried it alone - `navitem.html` as `tk-note tk-bad` and `responsive.html` as `tk-why tk-bad` - so each one asked for the warning colour and rendered as ordinary prose. The name-level idle control cannot see this: it reads 310 tk- classes declared and 310 standing and both of those placements are a declared name. A CLASS THAT IS NEVER STYLED ALONE NEEDS ITS PARTNER ON THE ELEMENT, and that is a different question from whether the name exists. Thirteen classes here are in that position; the check ran over all 61 pages with a planted control and the two above were the whole harvest. Both are deleted rather than promoted, because the rule three lines up already says prose marks its defect in the sentence. */ .tk-row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;margin:0 0 8px} .tk-anat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start; margin:0 0 8px} /* A CAPTION IS PROSE, AND PROSE IN AN `auto` COLUMN EATS ITS NEIGHBOUR. The left column is sized by its content so the 24 x 24 cell can be exactly that, and a figcaption has no width of its own: one 117-character line added to it on 2026-08-09 measured 601px on one line, took the whole column, and left the grid computing `601px 0px`. The numbered steps in the second column then stood 92px past the page. It ran from 761 to about 1025 and NOWHERE ELSE, because below 760 the rule under this one stacks the grid and above about 1100 there is room, so the page was verified at 390 and at 1280, which are the two widths either side of the band. The cap is a measure rather than a pixel, and it belongs on the caption rather than on the column, because what has no natural width here is the prose. */ .tk-anat .tk-gl figcaption{max-width:34ch} @media(max-width:759.98px){.tk-anat{grid-template-columns:1fr}.tk-cell-lg{--tk-cell:min(264px,72vw)}} .tk-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px} .tk-steps li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px; color:var(--text-muted);font-family:var(--font-body);font-size:13px;line-height:1.55; max-width:var(--tk-measure)} .tk-steps li>b:first-child{grid-row:span 2;width:22px;height:22px;border-radius:100px; background:var(--color-action);color:var(--text-on-brass);font-family:var(--font-mono); font-size:var(--text-11);display:flex;align-items:center;justify-content:center} .tk-steps li span b{color:var(--text-primary)} .tk-steps li code{font-family:var(--font-mono);font-size:.92em;color:var(--text-brass)} /* THE SIZE ROW CARRIES THE PRODUCT'S OWN CLASSES, so the stroke is the product's. Only the BOX is set here, which is what the components themselves do: `.ic` and `.ic-sm` declare a weight, and a component that wants the glyph at 16 or 20 writes only width and height. Copying 1.6 into this file would have made the demonstration a picture of this stylesheet instead of a picture of that one. */ .tk-icbox{display:flex;align-items:center;justify-content:center;width:72px;height:72px; border:1px solid var(--border-hairline);border-radius:10px;background:var(--bg-well)} .tk-b16{width:var(--icon-16);height:var(--icon-16)} .tk-b18{width:var(--icon-18);height:var(--icon-18)} .tk-b20{width:var(--size-20);height:var(--size-20)} .tk-b40{width:var(--space-40);height:var(--space-40)} /* A prose cell in a comparison table. Not `.tk-theme-fig`: that class carries a theme and a specimen, and reusing it for text would say the cell is showing a rendered control when it is showing a sentence. */ .tk-td{background:var(--bg-plate);color:var(--text-primary);padding:14px; font-family:var(--font-body);font-size:12px;line-height:1.55;min-width:0} .tk-td code{font-family:var(--font-mono);font-size:.9em;color:var(--text-brass); word-break:break-word} /* ========================================================================== FOUNDATIONS: COLOUR. Added 2026-08-07 for colour.html. ONE CLASS PER ROLE, AND IT CARRIES NO VALUE. `.tk-c-bg-plate{--tk-sw:var(--bg-plate)}` names the role and hands the resolving to tokens.css, so a swatch on this page can never disagree with the system: if the role changes, the swatch changes. This is what the page uses instead of `style="background:..."`. A swatch is arguably a datum, which the rules allow on the element, but a datum written as an inline style is also a value this stylesheet cannot see, and a colour page whose colours are invisible to the system is the exact thing being audited. */ .tk-sw{background:var(--tk-sw)} .tk-ink{color:var(--tk-sw)} /* A LINE ROLE DRAWN AS A FILL IS THE WRONG DEMONSTRATION, and eight of the fifteen roles this page did not show until 2026-08-12 are lines: three borders, two outcome edges, two result edges and the chart's stroke. `--border-brass` is `--brass-a30`, and a 30 per cent brass painted as a 52px block reads as a pale ground rather than as the hairline it is. So a border role is drawn as a BORDER and a stroke as a stroke, both taking the same `--tk-sw` the fill takes, which is how a swatch here still carries no value of its own. */ .tk-edge{border:var(--hairline) solid var(--tk-sw)} .tk-line{display:block;width:100%;height:var(--size-2);border-radius:var(--radius-2); background:var(--tk-sw)} .tk-c-bg-page{--tk-sw:var(--bg-page)} .tk-c-bg-canvas{--tk-sw:var(--bg-canvas)} .tk-c-bg-slab{--tk-sw:var(--bg-slab)} .tk-c-bg-plate{--tk-sw:var(--bg-plate)} .tk-c-bg-card{--tk-sw:var(--bg-card)} .tk-c-bg-card-quiet{--tk-sw:var(--bg-card-quiet)} .tk-c-bg-surface{--tk-sw:var(--bg-surface)} .tk-c-bg-control{--tk-sw:var(--bg-control)} .tk-c-bg-control-hover{--tk-sw:var(--bg-control-hover)} .tk-c-bg-control-brass{--tk-sw:var(--bg-control-brass)} .tk-c-border-hairline-brass{--tk-sw:var(--border-hairline-brass)} .tk-c-bg-chip{--tk-sw:var(--bg-chip)} .tk-c-bg-well{--tk-sw:var(--bg-well)} .tk-c-bg-dock{--tk-sw:var(--bg-dock)} .tk-c-bg-pressed{--tk-sw:var(--bg-pressed)} .tk-c-bg-brand-mark{--tk-sw:var(--bg-brand-mark)} .tk-c-text-primary{--tk-sw:var(--text-primary)} .tk-c-text-muted{--tk-sw:var(--text-muted)} .tk-c-text-icon{--tk-sw:var(--text-icon)} .tk-c-icon-quiet{--tk-sw:var(--icon-quiet)} .tk-c-icon-brass{--tk-sw:var(--icon-brass)} .tk-c-text-chip-hover{--tk-sw:var(--text-chip-hover)} .tk-c-text-brass{--tk-sw:var(--text-brass)} .tk-c-text-brass-lit{--tk-sw:var(--text-brass-lit)} .tk-c-text-brass-chip{--tk-sw:var(--text-brass-chip)} .tk-c-text-on-brass{--tk-sw:var(--text-on-brass)} .tk-c-text-on-yes{--tk-sw:var(--text-on-yes)} .tk-c-text-on-no{--tk-sw:var(--text-on-no)} .tk-c-text-on-photo{--tk-sw:var(--text-on-photo)} /* The ground `--text-on-photo` stands on, so the ink can be shown on the thing it was measured against rather than on a plate it never meets. A photograph would have wanted a `style="background-image:..."`, which is a datum the rules allow on the element and is still the one thing `colour.html` has never carried. */ .tk-c-scrim-photo{--tk-sw:var(--scrim-photo)} .tk-c-text-strong{--tk-sw:var(--text-strong)} .tk-c-color-action{--tk-sw:var(--color-action)} .tk-c-color-action-lit{--tk-sw:var(--color-action-lit)} .tk-c-color-action-pressed{--tk-sw:var(--color-action-pressed)} .tk-c-color-trust{--tk-sw:var(--color-trust)} .tk-c-outcome-yes{--tk-sw:var(--outcome-yes)} .tk-c-outcome-no{--tk-sw:var(--outcome-no)} .tk-c-outcome-yes-text{--tk-sw:var(--outcome-yes-text)} .tk-c-outcome-no-text{--tk-sw:var(--outcome-no-text)} .tk-c-outcome-yes-fill{--tk-sw:var(--outcome-yes-fill)} .tk-c-outcome-no-fill{--tk-sw:var(--outcome-no-fill)} /* .tk-c-outcome-yes-fill-soft and .tk-c-outcome-no-fill-soft went with their tokens on 2026-08-16, and they are why the deletion had to reach this file: a swatch class is a READER, so leaving them here would have left two cells on colour.html painting an undefined var(), which resolves to nothing and draws the card ground. A swatch that silently shows the stone behind it is the most convincing wrong answer a stand can give. */ .tk-c-outcome-yes-line{--tk-sw:var(--outcome-yes-line)} .tk-c-outcome-no-line{--tk-sw:var(--outcome-no-line)} .tk-c-outcome-no-figure{--tk-sw:var(--outcome-no-figure)} .tk-c-chart-line{--tk-sw:var(--chart-line)} .tk-c-result-won{--tk-sw:var(--result-won)} .tk-c-result-won-text{--tk-sw:var(--result-won-text)} .tk-c-result-won-fill{--tk-sw:var(--result-won-fill)} .tk-c-result-won-line{--tk-sw:var(--result-won-line)} .tk-c-result-lost-text{--tk-sw:var(--result-lost-text)} .tk-c-result-lost-fill{--tk-sw:var(--result-lost-fill)} .tk-c-result-lost-line{--tk-sw:var(--result-lost-line)} .tk-c-series-1{--tk-sw:var(--series-1)} .tk-c-series-2{--tk-sw:var(--series-2)} .tk-c-series-3{--tk-sw:var(--series-3)} .tk-c-series-4{--tk-sw:var(--series-4)} .tk-c-series-5{--tk-sw:var(--series-5)} .tk-c-border-hairline{--tk-sw:var(--border-hairline)} .tk-c-border-brass{--tk-sw:var(--border-brass)} .tk-c-border-brass-hover{--tk-sw:var(--border-brass-hover)} .tk-c-tint-brass-06{--tk-sw:var(--tint-brass-06)} .tk-c-tint-brass-09{--tk-sw:var(--tint-brass-09)} .tk-c-tint-brass-16{--tk-sw:var(--tint-brass-16)} .tk-c-tint-brass-30{--tk-sw:var(--tint-brass-30)} .tk-c-tint-brass-45{--tk-sw:var(--tint-brass-45)} .tk-c-tint-brass-60{--tk-sw:var(--tint-brass-60)} .tk-ramp{display:flex;flex-wrap:wrap;gap:3px;margin:0 0 10px} /* THE STEP NUMBER CAME OFF THE SWATCH ON 2026-08-08, and the audit is why. It used to be printed INSIDE the colour it names, in --text-muted, which is a THEME ROLE on a swatch that does not theme: light ink in Vault, dark ink in Daylight, and the graphite ramp is dark in both. 37 readings under 4.5:1 in one theme and 58 in the other, and they were the ONLY contrast failures anywhere in 460 renders. A SECOND INK DOES NOT FIX IT AND THAT WAS MEASURED, not assumed. Testing every one of the 72 cells against both a fixed light ink and a fixed dark one: 69 clear 4.5 with one of the two, and THREE CANNOT CLEAR IT WITH EITHER, because a mid-tone has no good ink. p-bone-650 tops out at 4.36, p-green-700 at 3.99 and p-ink-300 at 3.97. A per-swatch class would have fixed 69 of 72 and left three defects wearing a fix. So the label stands UNDER the swatch, on the page ground, where --text-muted is a pairing this page's own matrix already measures in both themes. It is better for the ramp as well: a swatch with a number printed on it is a swatch whose colour you cannot read clean. `.tk-onlight` went with it, and its 30 usages, because a class that paints nothing is what cost the previous stylesheet 800 lines. */ .tk-rc{width:60px;display:flex;flex-direction:column;align-items:center;gap:3px; border:0;background:none; font-family:var(--font-mono);font-size:9px;color:var(--text-muted)} .tk-rc.tk-sw{background:none} .tk-rc::before{content:'';display:block;width:60px;height:44px;border-radius:6px; border:1px solid var(--border-hairline);background:var(--tk-sw)} /* the contrast matrix: roles down, grounds across, one theme per table */ .tk-mx{display:grid;gap:1px;background:var(--border-hairline);border:1px solid var(--border-hairline); border-radius:10px;overflow:hidden;margin:0 0 10px;font-family:var(--font-mono);font-size:var(--text-10)} .tk-mx-h{background:var(--bg-surface);color:var(--text-muted);padding:7px 6px;text-align:center; letter-spacing:.03em} .tk-mx-r{background:var(--bg-surface);color:var(--text-primary);padding:7px 10px; display:flex;align-items:center;white-space:nowrap} .tk-mc{padding:9px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0} .tk-mc b{font-size:13px;font-weight:700;line-height:1} /* THREE 9px AND ONE 22px STAY LITERAL AND SAY WHY, 2026-08-15. 34 of this file's 38 font sizes moved onto the ramp when the closing audit of the Animation stage flagged them; these four have no step to move to. 9px is below `--text-10`, the smallest the product declares, and it is the coverage matrix's cell label, a thing the product does not have and would not ship at any size; 22px sits between `--text-20` and `--text-24` and belongs to a stand heading. **A literal with a reason beside it is a decision; a literal without one is the thing the detector is for**, which is the same bargain the four one-off width queries in `components/` already make. */ .tk-mc i{font-style:normal;font-size:9px;color:var(--text-muted);opacity:.85} @media(max-width:759.98px){.tk-mx{font-size:9px}.tk-mx-r{padding:6px}.tk-mc{padding:6px 2px}} /* The primitive ramps. A component may never read one of these, and a foundations page that hides them is hiding the material the roles are cut from, so they are painted here and nowhere else in the kit. */ .tk-p-graphite-950{--tk-sw:var(--graphite-950)} .tk-p-graphite-940{--tk-sw:var(--graphite-940)} .tk-p-graphite-930{--tk-sw:var(--graphite-930)} .tk-p-graphite-920{--tk-sw:var(--graphite-920)} .tk-p-graphite-910{--tk-sw:var(--graphite-910)} .tk-p-graphite-900{--tk-sw:var(--graphite-900)} .tk-p-graphite-880{--tk-sw:var(--graphite-880)} .tk-p-graphite-870{--tk-sw:var(--graphite-870)} .tk-p-graphite-860{--tk-sw:var(--graphite-860)} .tk-p-graphite-850{--tk-sw:var(--graphite-850)} .tk-p-graphite-830{--tk-sw:var(--graphite-830)} .tk-p-graphite-800{--tk-sw:var(--graphite-800)} .tk-p-graphite-780{--tk-sw:var(--graphite-780)} .tk-p-graphite-750{--tk-sw:var(--graphite-750)} .tk-p-graphite-720{--tk-sw:var(--graphite-720)} .tk-p-chalk-940{--tk-sw:var(--chalk-940)} .tk-p-chalk-930{--tk-sw:var(--chalk-930)} .tk-p-chalk-920{--tk-sw:var(--chalk-920)} .tk-p-chalk-910{--tk-sw:var(--chalk-910)} .tk-p-chalk-900{--tk-sw:var(--chalk-900)} .tk-p-chalk-880{--tk-sw:var(--chalk-880)} .tk-p-chalk-870{--tk-sw:var(--chalk-870)} .tk-p-chalk-860{--tk-sw:var(--chalk-860)} .tk-p-chalk-750{--tk-sw:var(--chalk-750)} .tk-p-bone-080{--tk-sw:var(--bone-080)} .tk-p-bone-100{--tk-sw:var(--bone-100)} .tk-p-bone-200{--tk-sw:var(--bone-200)} .tk-p-bone-250{--tk-sw:var(--bone-250)} .tk-p-bone-300{--tk-sw:var(--bone-300)} .tk-p-bone-500{--tk-sw:var(--bone-500)} .tk-p-bone-600{--tk-sw:var(--bone-600)} .tk-p-bone-650{--tk-sw:var(--bone-650)} .tk-p-bone-700{--tk-sw:var(--bone-700)} .tk-p-ink-900{--tk-sw:var(--ink-900)} .tk-p-ink-700{--tk-sw:var(--ink-700)} .tk-p-ink-500{--tk-sw:var(--ink-500)} .tk-p-ink-400{--tk-sw:var(--ink-400)} .tk-p-ink-300{--tk-sw:var(--ink-300)} .tk-p-brass-200{--tk-sw:var(--brass-200)} .tk-p-brass-220{--tk-sw:var(--brass-220)} .tk-p-brass-250{--tk-sw:var(--brass-250)} .tk-p-brass-300{--tk-sw:var(--brass-300)} .tk-p-brass-400{--tk-sw:var(--brass-400)} .tk-p-brass-500{--tk-sw:var(--brass-500)} .tk-p-brass-600{--tk-sw:var(--brass-600)} .tk-p-brass-700{--tk-sw:var(--brass-700)} .tk-p-green-200{--tk-sw:var(--green-200)} .tk-p-green-250{--tk-sw:var(--green-250)} .tk-p-green-300{--tk-sw:var(--green-300)} .tk-p-green-500{--tk-sw:var(--green-500)} .tk-p-green-700{--tk-sw:var(--green-700)} .tk-p-green-800{--tk-sw:var(--green-800)} .tk-p-green-950{--tk-sw:var(--green-950)} .tk-p-green-975{--tk-sw:var(--green-975)} .tk-p-green-050{--tk-sw:var(--green-050)} .tk-p-red-300{--tk-sw:var(--red-300)} .tk-p-red-400{--tk-sw:var(--red-400)} .tk-p-red-500{--tk-sw:var(--red-500)} .tk-p-red-700{--tk-sw:var(--red-700)} .tk-p-red-800{--tk-sw:var(--red-800)} .tk-p-red-950{--tk-sw:var(--red-950)} .tk-p-plum-950{--tk-sw:var(--plum-950)} .tk-mx-6{grid-template-columns:minmax(96px,132px) repeat(5,minmax(0,1fr))} .tk-mx-4{grid-template-columns:minmax(96px,132px) repeat(3,minmax(0,1fr))} @media(max-width:639.98px){.tk-mx-6,.tk-mx-4{grid-template-columns:76px repeat(auto-fit,minmax(0,1fr))}} /* A TINT NEEDS A REAL SURFACE UNDER IT. The matrix draws its rule lines with a 1px grid gap over `--border-hairline`, so a semi-transparent fill placed straight on a cell composites over the HAIRLINE and not over a product surface. Measured that way the light theme reported 3.34:1 on every outcome fill, which is a number about this table. The tint sits in its own box on an opaque `--bg-card` cell, which is where it stands in the product. */ .tk-fillbox{display:inline-flex;align-items:center;justify-content:center; padding:5px 10px;border-radius:6px;min-width:52px} /* At 390 the four-column tables squeeze the fill box past its cell by 4 to 6px. `min-width` is what does it, so it is dropped on narrow: the tint still shows, which is the whole job of the swatch, and the box stops overhanging. */ @media(max-width:639.98px){.tk-fillbox{min-width:0;padding:5px 4px;max-width:100%}} /* ========================================================================== FOUNDATIONS: TYPOGRAPHY. Added 2026-08-07 for typography.html. Same rule as the colour page: a class names the token and never carries a value, so a specimen cannot drift from the system. */ .tk-f-display{font-family:var(--font-display)} .tk-f-body{font-family:var(--font-body)} .tk-f-mono{font-family:var(--font-mono)} .tk-wt-medium{font-weight:var(--weight-medium)} .tk-wt-semibold{font-weight:var(--weight-semibold)} .tk-wt-bold{font-weight:var(--weight-bold)} /* THE ONLY LITERAL IN THIS BLOCK, AND IT IS THE FINDING. 400 is the weight 192 of 260 text elements on the feed render at, and it is the one step of the ramp tokens.css never named. There is nothing to reference, so the page has to type the number, which is exactly what a component would have to do. */ .tk-wt-regular{font-weight:400} .tk-s-10{font-size:var(--text-10)} .tk-s-11{font-size:var(--text-11)} .tk-s-12{font-size:var(--text-12)} .tk-s-13{font-size:var(--text-13)} .tk-s-14{font-size:var(--text-14)} .tk-s-16{font-size:var(--text-16)} .tk-s-18{font-size:var(--text-18)} .tk-s-20{font-size:var(--text-20)} .tk-s-24{font-size:var(--text-24)} .tk-s-30{font-size:var(--text-30)} .tk-d-feed{font-size:var(--display-feed)} .tk-d-hiw{font-size:var(--display-hiw)} .tk-d-sheet{font-size:var(--display-sheet)} .tk-d-seo{font-size:var(--display-seo)} .tk-d-question{font-size:var(--display-question)} .tk-d-hero{font-size:var(--display-hero)} .tk-d-quote{font-size:var(--display-quote)} .tk-d-tagline{font-size:var(--display-tagline)} .tk-l-none{line-height:var(--leading-none)} .tk-l-flat{line-height:var(--leading-flat)} .tk-l-tight{line-height:var(--leading-tight)} .tk-l-snug{line-height:var(--leading-snug)} .tk-l-base{line-height:var(--leading-base)} .tk-l-loose{line-height:var(--leading-loose)} .tk-type{display:grid;grid-template-columns:minmax(84px,120px) minmax(0,1fr);gap:10px 18px; align-items:baseline;margin:0 0 10px} .tk-type dt{font-family:var(--font-mono);font-size:var(--text-10);color:var(--text-muted); padding-top:.35em;border-top:1px solid var(--border-hairline);grid-column:1} .tk-type dd{margin:0;color:var(--text-primary);border-top:1px solid var(--border-hairline); padding-top:.35em;grid-column:2;min-width:0;overflow-wrap:anywhere} .tk-type dd small{display:block;font-family:var(--font-mono);font-size:var(--text-10); color:var(--text-muted);margin-top:3px} .tk-big{margin:0 0 2px;color:var(--text-primary);letter-spacing:-.03em} .tk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:0 0 10px} .tk-card{border:1px solid var(--border-hairline);border-radius:10px;padding:16px 18px; background:var(--bg-plate);min-width:0} .tk-card h3{margin:0 0 2px;font-family:var(--font-body);font-size:12px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--text-brass)} /* `:not([class])` and not `p`. The first version of this rule was `.tk-card p`, specificity 0-1-1, and it beat every `.tk-f-display` and `.tk-s-30` utility in this same file at 0-1-0: the three family specimens rendered in DM Sans at 12px and the page silently showed one typeface three times. It is the same failure the `@import` order in components/index.css exists to prevent, met inside the stand stylesheet, and it was found by asking the browser which family each specimen had actually resolved to rather than by looking at the page. */ .tk-card p:not([class]){margin:8px 0 0;font-size:12px;line-height:1.55; color:var(--text-muted)} .tk-card p{margin:8px 0 0} /* ========================================================================== FOUNDATIONS: GEOMETRY. Added 2026-08-07 for geometry.html. Same rule again: a class names the token, the token holds the value. */ .tk-sp-2{width:var(--space-2);height:var(--space-2)} .tk-sp-4{width:var(--space-4);height:var(--space-4)} .tk-sp-8{width:var(--space-8);height:var(--space-8)} .tk-sp-12{width:var(--space-12);height:var(--space-12)} .tk-sp-16{width:var(--space-16);height:var(--space-16)} .tk-sp-20{width:var(--space-20);height:var(--space-20)} .tk-sp-24{width:var(--space-24);height:var(--space-24)} .tk-sp-28{width:var(--space-28);height:var(--space-28)} .tk-sp-32{width:var(--space-32);height:var(--space-32)} .tk-sp-40{width:var(--space-40);height:var(--space-40)} .tk-sp-56{width:var(--space-56);height:var(--space-56)} .tk-sz-2{width:var(--size-2);height:var(--size-2)} .tk-sz-4{width:var(--size-4);height:var(--size-4)} .tk-sz-8{width:var(--size-8);height:var(--size-8)} .tk-sz-12{width:var(--size-12);height:var(--size-12)} .tk-sz-16{width:var(--size-16);height:var(--size-16)} .tk-sz-20{width:var(--size-20);height:var(--size-20)} .tk-sz-24{width:var(--size-24);height:var(--size-24)} .tk-sz-28{width:var(--size-28);height:var(--size-28)} .tk-sz-32{width:var(--size-32);height:var(--size-32)} .tk-sz-40{width:var(--size-40);height:var(--size-40)} .tk-sz-56{width:var(--size-56);height:var(--size-56)} .tk-sz-72{width:var(--size-72);height:var(--size-72)} /* THE CONTROL LADDER AND THE ICON LADDER, AND UNTIL 2026-08-12 NEITHER WAS DRAWN. These eleven classes were declared and worn NOWHERE, on the one foundation page whose whole subject is dimension: `geometry.html` printed both ladders as a `

` of prose while the space ramp and the size ramp beside them were drawn at their own sizes. So the page stated the 44px touch floor as a number and put nothing on the page at 44px, which is this kit's own rule failing on the ladder the floor is built from: a page about a rule with nothing under it cannot be checked by reading it. THE THREE MISSING RUNGS WERE THE FINDING. The ladder is six, 28 / 32 / 36 / 44 / 48 / 56, and this file held three of them, because the ramp was written when `census.md` said three heights were declared and was never re-read after 2026-08-09 declared the other three. A ramp that has to be DRAWN cannot be short without somebody seeing the hole. */ .tk-ct-28{height:var(--control-28)} .tk-ct-32{height:var(--control-32)} .tk-ct-36{height:var(--control-36)} .tk-ct-44{height:var(--control-44)} .tk-ct-48{height:var(--control-48)} .tk-ct-56{height:var(--control-56)} .tk-ic-12{width:var(--icon-12);height:var(--icon-12)} .tk-ic-16{width:var(--icon-16);height:var(--icon-16)} .tk-ic-18{width:var(--icon-18);height:var(--icon-18)} .tk-ic-20{width:var(--icon-20);height:var(--icon-20)} .tk-ic-22{width:var(--icon-22);height:var(--icon-22)} .tk-ic-28{width:var(--icon-28);height:var(--icon-28)} /* The icon ladder is drawn twice on that section, once as the BOX and once as a real mark inside it, because a mark is not the size of its box: the sprite half is filled and the stroked half paints half of `--stroke-mark` outside its geometry. The box is this rule; the ink is `.ic` in base.css, untouched. */ .tk-icwell{display:inline-flex;align-items:center;justify-content:center; width:var(--size-40);height:var(--size-40);border-radius:var(--radius-6); background:var(--bg-well);border:var(--hairline) solid var(--border-hairline)} .tk-r-2{border-radius:var(--radius-2)} .tk-r-6{border-radius:var(--radius-6)} .tk-r-10{border-radius:var(--radius-10)} .tk-r-16{border-radius:var(--radius-16)} .tk-r-pill{border-radius:var(--radius-pill)} .tk-r-half{border-radius:50%} .tk-hair{border:var(--hairline) solid var(--border-hairline)} .tk-ring{outline:var(--ring) solid var(--focus-ring);outline-offset:var(--ring)} .tk-blocks{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;margin:0 0 10px} .tk-blk{display:flex;flex-direction:column;gap:6px;align-items:center; font-family:var(--font-mono);font-size:var(--text-10);color:var(--text-muted)} .tk-blk>span:first-child{background:var(--color-action);flex:0 0 auto;display:block} .tk-blk.tk-blk-out>span:first-child{background:var(--bg-control); border:1px solid var(--border-brass-hover)} .tk-blk b{color:var(--text-primary);font-weight:400} .tk-bars{display:flex;flex-direction:column;gap:3px;margin:0 0 10px;font-family:var(--font-mono);font-size:var(--text-10)} .tk-bar{display:grid;grid-template-columns:58px minmax(0,1fr) 54px;gap:10px;align-items:center; color:var(--text-muted)} .tk-bar>u{text-decoration:none;height:11px;background:var(--color-action);border-radius:2px;display:block} .tk-bar>i{font-style:normal;text-align:right} /* ========================================================================== THE KIT PAGES, level 2 and up. Added 2026-08-08 for molecules.html. A molecule is a row or a block, not a control, so it does not fit the vitrine's three-column table: at 1120 a label column leaves 400px a side and a trust strip needs more than that. The label moves above and the two themes get half the width each, which is the same idea in the shape the subject needs. */ .tk-mol{margin-top:38px;border-top:1px solid var(--border-hairline);padding-top:20px; scroll-margin-top:20px} .tk-mol>h2{font-family:var(--font-display);color:var(--text-primary); font-size:var(--text-20);font-weight:700;letter-spacing:-.02em;margin:0 0 8px} .tk-pair2{display:grid;grid-template-columns:1fr 1fr;gap:1px; background:var(--border-hairline);border:1px solid var(--border-hairline); border-radius:10px;overflow:hidden;margin:0 0 10px} .tk-pair2>.tk-theme-fig{border-radius:0} .tk-ph{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:1px; background:var(--border-hairline)} .tk-ph>span{background:var(--bg-surface);color:var(--text-muted);padding:7px 12px; font-family:var(--font-mono);font-size:var(--text-10);letter-spacing:.06em;text-transform:uppercase} .tk-state{font-family:var(--font-mono);font-size:var(--text-11);color:var(--text-muted); margin:14px 0 6px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline} .tk-state b{color:var(--text-primary);font-weight:400} .tk-state i{font-style:normal;font-size:var(--text-10);opacity:.85} .tk-holds{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none} .tk-holds li{font-family:var(--font-mono);font-size:var(--text-10);color:var(--text-muted); border:1px solid var(--border-hairline);border-radius:6px;padding:2px 8px} .tk-holds li.tk-decl{color:var(--text-brass);border-color:var(--border-brass,rgba(199,162,78,.3))} .tk-holds li.tk-on{color:var(--text-primary)} @media(max-width:759.98px){ .tk-pair2,.tk-ph{grid-template-columns:1fr} .tk-ph>span:last-child{display:none} } /* The mirror of the narrow case lived here as `.tk-wide-only` and it is one family in one place now, `.tk-gone` above, because the two halves were written apart and drifted apart: both said 900 and neither component does. */ /* ========================================================================== THE KIT PAGES, level 3. Added 2026-08-08 for organisms.html. AN ORGANISM IS THE WIDTH OF A SCREEN, so the two themes stack instead of sitting side by side. A header cut to half a page is not a header: what a shell IS is the decision it takes about the full width, and a two-column pair would be measuring it at 430px twice and calling that the component. So the label goes above each theme and each theme gets the whole column. Same idea as .tk-pair2, in the shape this subject needs. */ .tk-org{margin-top:44px;border-top:1px solid var(--border-hairline);padding-top:22px; scroll-margin-top:20px} .tk-org>h2{font-family:var(--font-display);color:var(--text-primary); font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px} .tk-pairv{display:flex;flex-direction:column;gap:1px; background:var(--border-hairline);border:1px solid var(--border-hairline); border-radius:10px;overflow:hidden;margin:0 0 10px} .tk-pairv>.tk-theme-fig{border-radius:0} .tk-th{background:var(--bg-surface);color:var(--text-muted);padding:7px 12px; font-family:var(--font-mono);font-size:var(--text-10);letter-spacing:.06em;text-transform:uppercase} /* A DIALOG HAS TO BE PINNED INTO THE FLOW TO BE SHOWN AT ALL, and this is the one place on the kit where a specimen is not exactly what the product renders. In the product it is opened with showModal(), and the browser lifts it into the TOP LAYER: position:fixed, centred, over a ::backdrop, and only one at a time in a document. None of that can happen four times on one page. So the stand opens it with the plain `open` attribute and pins it static, and exactly two things differ from the product, the position and the backdrop. Everything inside is the rule the component's own file writes, untouched. */ .tk-dlg{display:block;width:100%;min-width:0} .tk-dlg dialog[open]{position:static;inset:auto;margin:0;width:100%;max-width:none; max-height:none;border:0} /* THE SAME BARGAIN FOR THE OPEN MENU, AND IT IS THE SECOND OF THE TWO, 2026-08-09. `.filter-panel` is `position:absolute`, so in the flow it takes NOTHING, and the cell measures itself against the `` alone: 67px tall with a specimen that needs 213. What happened next is the part worth writing down. `.tk-theme-fig` declares only `overflow-x:auto`, added so `.chip-nav` could scroll rather than be clipped, and CSS RESOLVES `visible` TO `auto` ON THE OTHER AXIS WHENEVER ONE AXIS SCROLLS. Measured on the cell: `overflow: auto / auto`. So a rule written for the horizontal axis quietly made the cell a scroll container on both, and the panel was not overlapping the prose below, it was **scrolled out of sight inside a 67px box**: 146 of 213 hidden, with a scrollbar as the only sign. A section titled "the menu, OPEN" was showing a summary and 21px of panel. Pinned static here, and ONE thing differs from the product, the position. In the product the panel floats over the feed; on the stand it stands under its summary. Everything inside it is filters.css untouched. Verified: 146 hidden to 0, the cell 67 to 229, both themes. */ .tk-theme-fig .filter-menu[open] > .filter-panel{position:static;margin-top:6px; right:auto;left:auto;min-width:0} /* AND THE THIRD, 2026-08-09, FOR THE HEADER'S OWN PANEL, AND IT IS THE OPPOSITE MOVE. `.notif-menu .dropdown` is `position:absolute`, pinned to the right edge of a `` at `top:calc(100% + 4px)`, and the panel is what `header.css` genuinely draws: the band is the surface's, the circles are the icon button's, the rows are the nav item's. It is invisible while the menu is shut, so the specimen opens it. PINNING IT STATIC WAS TRIED FIRST AND IT WAS WRONG HERE. That is the bargain `.tk-dlg` and `.filter-panel` take, and it works for them because they are the whole specimen. This panel hangs off ONE control inside a BAND: static puts it in the flow, the `
` grows to 244px, the row grows with it, and the header is drawn 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 header is 59px tall in the product and it is 59 here. So the panel keeps the product's position and THE CELL makes room instead. Two declarations: `overflow:visible`, because `.tk-theme-fig` carries `overflow-x:auto` for `.chip-nav` and CSS resolves the other axis to `auto` with it, which is what scrolls an absolute panel out of sight; and a reserved strip below the band, which is the panel's own measured height plus its 4px offset. The number is in the class name for the same reason `.tk-gone` carries its threshold. */ .tk-theme-fig.tk-open-menu{overflow:visible;padding-bottom:200px} /* A shell whose own file draws almost nothing needs its emptiness SHOWN rather than described: feed.css is eleven lines and two of its three rules are a reset. The dashed box is the box the component actually contributes. */ .tk-empty-shell{border:1px dashed var(--border-hairline);border-radius:8px; padding:12px;width:100%;min-width:0} .tk-empty-shell>p{margin:0 0 10px;font-family:var(--font-mono);font-size:var(--text-10); color:var(--text-icon);text-transform:uppercase;letter-spacing:.06em} /* The other half of the .tk-gone family. That one says a specimen is missing because of the WIDTH, and this one because THE COMPONENT CANNOT BE DRAWN TWICE IN ONE DOCUMENT. An empty cell with no sentence in it reads as a page that broke. */ .tk-why{margin:0;font-family:var(--font-mono);font-size:var(--text-11);line-height:1.55; color:var(--text-muted);max-width:62ch} .tk-why b{color:var(--text-brass);font-weight:400} /* ========================================================================== Added 2026-08-08 for patterns.html. A PLAIN READING TABLE, for a page whose subject is a measurement rather than a specimen. The patterns rung has almost nothing to look at (59 declarations, none of them a colour), so the evidence IS the table, and it needed a rule of its own rather than borrowing the contrast matrix's, which is built around a swatch cell. It scrolls inside itself at 390 rather than pushing the page. */ .tk-tblwrap{overflow-x:auto;margin:0 0 12px} .tk-tbl{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:var(--text-11); color:var(--text-muted)} .tk-tbl th{text-align:left;font-weight:400;font-size:var(--text-10);letter-spacing:.06em; text-transform:uppercase;color:var(--text-icon);padding:6px 10px; border-bottom:1px solid var(--border-hairline);white-space:nowrap} .tk-tbl td{padding:6px 10px;border-bottom:1px solid var(--border-hairline); vertical-align:top} .tk-tbl tr:last-child td{border-bottom:0} .tk-tbl td:first-child{color:var(--text-primary)} .tk-tbl code{font-family:inherit;color:var(--text-brass)} .tk-tbl b{color:var(--text-primary);font-weight:400} /* ---------------------------------------------------------- responsive.html -- THE LIVE DEMONSTRATIONS OF THE THREE WAYS, AND THEY BELONG TO THE STAND. Added 2026-08-11, Responsive step 2. Every rule below styles a specimen and none of it is a product rule: the point of this page is that a reader can DRAG a box and watch the three mechanisms answer differently, which no screenshot and no paragraph can show. `resize:horizontal` is the whole trick, because it lets the reader change a CONTAINER without changing the window, which is exactly the distinction the page is about. THE CONTAINER QUERY HERE IS THE STAND'S AND NOT THE PRODUCT'S. The system declares 0 of them; this one exists so the third way has a specimen. */ .tk-drag{resize:horizontal;overflow:auto;min-width:180px;max-width:100%;width:100%; border:var(--hairline) dashed var(--border-brass-hover);border-radius:var(--radius-10); padding:var(--space-16);background:var(--bg-well)} .tk-drag::-webkit-resizer{background:var(--color-action)} .tk-dragnote{font-family:var(--font-mono);font-size:var(--text-11);color:var(--text-muted); margin:var(--space-8) 0 0} .tk-fluidrow{display:flex;flex-wrap:wrap;gap:var(--space-8)} .tk-fluidrow>span{flex:1 1 90px;text-align:center;padding:var(--space-8); border-radius:var(--radius-6);background:var(--bg-surface); border:var(--hairline) solid var(--edge-shade-strong);font-family:var(--font-mono);font-size:var(--text-11)} .tk-livegrid{display:grid;gap:var(--space-8); grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--grid-col-min)),1fr))} .tk-livegrid>span{padding:var(--space-16) var(--space-8);text-align:center; border-radius:var(--radius-10);background:var(--bg-surface); border:var(--hairline) solid var(--edge-shade-strong);font-family:var(--font-mono);font-size:var(--text-11)} .tk-measured{max-width:var(--measure)} .tk-runs-on{max-width:none} .tk-cq{container-type:inline-size} .tk-cqbox{padding:var(--space-12);border-radius:var(--radius-10); background:var(--bg-surface);border:var(--hairline) solid var(--edge-shade-strong); display:flex;flex-direction:column;gap:var(--space-8);align-items:flex-start} .tk-cqbox .tk-lab b::after{content:'narrow: stacked'} @container (min-width: 420px){ .tk-cqbox{flex-direction:row;align-items:center;justify-content:space-between} .tk-cqbox .tk-lab b::after{content:'wide: in a row'} } .tk-rungs{display:grid;gap:var(--space-2);margin:var(--space-16) 0} .tk-rung{display:grid;grid-template-columns:74px 1fr;gap:var(--space-12);align-items:center; padding:var(--space-8) 0;border-top:var(--hairline) solid var(--border-hairline)} .tk-rung b{font-family:var(--font-mono);font-size:var(--text-13);color:var(--text-brass)} .tk-rung span{font-size:var(--text-13);color:var(--text-primary)} .tk-rung i{font-style:normal;font-family:var(--font-mono);font-size:var(--text-10);color:var(--text-muted); display:block;margin-top:2px} /* ========================================================================== motion.html, and the stand's own demonstrations MOTION CANNOT BE SHOWN IN TEXT AND IT CANNOT BE SHOWN IN A SCREENSHOT, so this page is the one place in the kit where the specimen has to be operated rather than looked at. Everything below is the STAND moving; none of it is a product rule, and none of it is counted in the product's transcript. The mechanism is a checkbox and a sibling selector, which is what the product's own filter sheet uses, so there is no script on this page either. THE ONE SPECIMEN HERE THAT THE PRODUCT DOES NOT SHIP IS LABELLED AS SUCH. The pulse is the status job, the inventory has it open, and a stand drawing more than the product ships is a defect this kit has already been caught at once. ========================================================================== */ .tk-mo{margin-top:var(--space-16)} .tk-mo-run,.tk-mo-less{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .tk-mo-btn{display:inline-flex;align-items:center;gap:var(--space-8);cursor:pointer; font-family:var(--font-mono);font-size:var(--text-11);letter-spacing:var(--track-label); text-transform:uppercase;color:var(--text-brass); border:var(--hairline) solid var(--border-brass);border-radius:var(--radius-10); padding:0 var(--space-12);min-height:var(--control-44);background:var(--bg-control); transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard)} .tk-mo-btn:hover{background:var(--bg-control-hover);border-color:var(--border-brass-hover)} .tk-mo-run:focus-visible+.tk-mo-btn,.tk-mo-less:focus-visible+.tk-mo-btn{ outline:2px solid var(--focus-ring);outline-offset:2px} .tk-mo-lanes{display:grid;gap:var(--space-12);margin-top:var(--space-16)} .tk-mo-lane{display:grid;grid-template-columns:118px 1fr;gap:var(--space-12);align-items:center} .tk-mo-lane>b{font-family:var(--font-mono);font-size:var(--text-11);color:var(--text-brass); line-height:var(--leading-snug)} .tk-mo-lane>b i{font-style:normal;display:block;color:var(--text-muted);font-size:var(--text-10)} .tk-mo-track{position:relative;height:44px;border-radius:var(--radius-10); background:var(--bg-control);border:var(--hairline) solid var(--border-hairline); overflow:clip} .tk-mo-slide{position:absolute;inset:6px;transform:translateX(0)} .tk-mo-dot{width:32px;height:32px;border-radius:var(--radius-10);background:var(--color-action)} .tk-mo-run:checked~.tk-mo .tk-mo-slide,.tk-mo-run:checked~.tk-mo-lanes .tk-mo-slide{ transform:translateX(calc(100% - 32px))} .tk-mo-slide.d-fast{transition:transform var(--dur-fast) var(--ease-standard)} .tk-mo-slide.d-slow{transition:transform var(--dur-slow) var(--ease-standard)} .tk-mo-slide.e-standard{transition:transform var(--dur-slow) var(--ease-standard)} .tk-mo-slide.e-enter{transition:transform var(--dur-slow) var(--ease-enter)} .tk-mo-slide.e-linear{transition:transform var(--dur-slow) linear} /* CONNECTION, and it is the product's own sheet rule rebuilt at stand scale: a surface that arrives from the edge it will leave by. */ .tk-mo-stage{position:relative;height:180px;border-radius:var(--radius-10); background:var(--bg-surface);border:var(--hairline) solid var(--border-hairline); overflow:clip;display:flex;align-items:flex-start;justify-content:center; padding:var(--space-12)} .tk-mo-stage>p{margin:0;font-size:var(--text-12);color:var(--text-muted);max-width:26ch; text-align:center} .tk-mo-sheet{position:absolute;left:0;right:0;bottom:0;padding:var(--space-16); background:var(--bg-plate);border-top:var(--hairline) solid var(--border-hairline); border-radius:var(--radius-16) var(--radius-16) 0 0; font-size:var(--text-13);color:var(--text-primary); translate:0 100%; transition:translate var(--dur-slow) var(--ease-enter)} .tk-mo-run:checked~.tk-mo .tk-mo-sheet{translate:0 0} /* STATUS, THE ONE JOB THIS PRODUCT DOES NOT PERFORM ANYWHERE. 482 skeleton placements on 19 screens and not one of them pulses. This is what the row asks for, drawn on the stand so the decision can be looked at rather than described. It is the stand's keyframe and it is not in `components/`. */ @keyframes tk-mo-pulse{50%{opacity:.42}} .tk-mo-pulse{display:grid;gap:var(--space-8)} .tk-mo-pulse span{display:block;height:var(--size-8);border-radius:var(--radius-2); background:var(--bg-control);animation:tk-mo-pulse var(--pulse-period) var(--ease-standard) infinite} .tk-mo-pulse span:nth-child(2){width:70%} .tk-mo-pulse span:nth-child(3){width:40%} /* `.tk-mo-still span{animation:none}` stood here and was worn by nothing on 61 pages, 2026-08-18. It was a way to freeze this specimen that no page ever asked for, and the rule that DOES the freezing is eight lines below, under the real setting, where it belongs. A stand rule with no specimen is the stand teaching a face the stand does not show. docs/backlog.md 211. */ /* AND THE DEMONSTRATION PULSE OBEYS THE REAL SETTING, not only the switch on the page. A cycle is replaced and never shortened, exactly as `skeleton.css` does it for the product's own marks: without this the page that explains reduced motion was the page still moving under it. */ @media(prefers-reduced-motion:reduce){ .tk-mo-pulse span{animation:none;opacity:1} } /* THE PAGE'S OWN LESS-MOTION SWITCH, AND IT IS A DEMONSTRATION RATHER THAN A CHECK. It redeclares the same two tokens the real block redeclares, on a scope instead of on :root, so what a reader sees here is the mechanism and not the result: the real reading is taken with the browser emulating the setting, and this switch cannot tell you about a rule that reads no token. */ .tk-mo-less:checked~.tk-mo,.tk-mo-less:checked~.tk-mo-lanes{ --dur-fast:1ms;--dur-slow:1ms;--motion:0} .tk-mo-less:checked~.tk-mo .tk-mo-pulse span{animation:none;opacity:1} .tk-mo-flag{display:none;font-family:var(--font-mono);font-size:var(--text-11);color:var(--text-brass)} .tk-mo-less:checked~.tk-mo-flag{display:block} @media (max-width:39.99875rem){ .tk-mo-lane{grid-template-columns:1fr;gap:var(--space-4)} } /* The one spacing this page needs and the section rhythm does not give it: a note that lands under a lane group rather than under prose. A `style=` attribute would have been a rule in the one place the system cannot see it. */ .tk-mo-after{margin-top:var(--space-16)}