/* ============================================================================= platform.css -- the authenticated layer of the scientific broadsheet ============================================================================= WHAT THIS FILE IS The design bible chapter 13, built. It is loaded AFTER static/catalog.css and only on the pages served by templates/base.html. It is not a second design system: it defines no custom property that catalog.css already defines, it consumes the broadsheet's tokens, and it adds only what an authenticated, form-bearing, state-mutating surface needs and a read-only anonymous catalog does not. WHY IT IS A SEPARATE FILE (DEC-20260808T1149Z) Eleven public broadsheet pages have no visual gate at all: /tape, /issuers, /insiders, /license, the search and disambiguation pages, and the /filing/*, /issuer/*, /insider/* and /filings/* families are absent from tools/ux/screenshot.py. Editing catalog.css therefore risks regressing eleven live anonymous pages with nothing to catch it. Not editing it makes that risk zero. tests/test_catalog_routes.py:899 also pins the exact catalog.css link tag on sixteen pages, so a cache-buster has to live on a file nothing pins, which is this one. THE TOKEN COLLISION IS GONE RATHER THAN RESOLVED. styles.css and catalog.css share eleven property names, seven with different values, and --t-base is 220ms in one and 17px in the other. That only ever mattered if both sheets loaded on one page. Every page now loads either styles.css or catalog.css + platform.css and never both, so --t-base has exactly one meaning wherever it is read. THE DESTINATION. This file is written so it can be appended to catalog.css unchanged, with no renaming, once the catalog pages have a visual gate. That is the right end state and it is not the safe move during a grant window. ============================================================================= */ /* ----------------------------------------------------------------------------- 0. THE RULE THAT HAS TO COME FIRST ----------------------------------------------------------------------------- Bible 13.0. catalog.css has no [hidden] reset. styles.css:106 does, and four live templates depend on it: dashboard.html:43-44, upgrade.html:204, and admin_overrides.html:92,136, the last of which says so in a comment. The UA rule for [hidden] is `display: none` at the lowest possible precedence, so ANY class that sets display beats it. Under the broadsheet .stack is `display: grid` and .btn is `inline-flex`. Without this line every hidden-until-scripted control on the authenticated pages becomes permanently visible: no test fails, no server errors, and the first person to see it is whoever opens the deployed site. Measured in WRK-20260808T1132Z section 1. It is !important on purpose. The attribute is the platform's own way of saying "not now" and it must outrank every component in this file. -------------------------------------------------------------------------- */ [hidden] { display: none !important; } /* ----------------------------------------------------------------------------- 1. THE PAGE FRAME ----------------------------------------------------------------------------- catalog.css lays its pages out from the catalog shell. base.html has its own frame vocabulary, kept here so the fifteen migrating templates do not all need rewriting at once. .page is the text track, .wide breaks out to the flanking track, .full spans the viewport. -------------------------------------------------------------------------- */ /* The page track is measure PLUS BOTH FLANKS, matching the `wide` span of the catalog's .sheet grid (catalog.css:501-510), which runs flank | measure | flank. Sizing it at measure + one flank was measured wrong at 1440: the track came out 832px, the header could not fit its nameplate, nav, theme setter and sign-in control on one line, and the chrome wrapped to two rows while the catalog's header on the same viewport did not. Reading text still sets at --measure, because .prose and .lede carry their own max-inline-size; this only governs the shell and the wide bands. */ .page { inline-size: min(100% - (2 * var(--gutter)), calc(var(--measure) + (2 * var(--flank)))); margin-inline: auto; } .page > .wide { inline-size: 100%; } .page > .full { inline-size: 100vw; margin-inline: calc(50% - 50vw); } /* A DOCUMENT page, opted into per template. The reading column is centred on the page instead of hugging the left flank. The frame above is the WIDE track, measure plus both flanks, which is correct for the shell and for a page whose content genuinely spans. It is wrong for a document. Because .page is a block rather than the catalog's named-line grid, `max-inline-size: var(--measure)` on .prose p resolves against 1088px and left-aligns, so a prose page set its column at the far left of the sheet and left 512px of blank paper down its right side. Measured at 1440px: the catalog's own /license put every reading element at left 432, width 576; the platform's /terms, /disclaimer, /inside and /transparency put theirs at left 176, width 576. Same measure, wrong position, and it is the reason a document page read as an ordinary web page beside a catalog one (BUG-20260808T2305Z). Opt-in rather than a change to .page, because .page also frames the header, the footer, the landing page and the dashboard, and those genuinely want the wide track. .wide and .full still break out: the :not() pair keeps their own sizing, and .page > .full's margin-inline at (0,2,0) already outranks the margin here in any case. */ .page--doc > *:not(.wide):not(.full) { max-inline-size: var(--measure); margin-inline: auto; } /* A vertical rhythm primitive. Grid rather than margins so the gap is one declaration and no child owns its own outer spacing, which is what makes these composable at all. */ .stack { display: grid; gap: var(--sp-5); align-content: start; } .stack--sm { gap: var(--sp-2); } .stack--lg { gap: var(--sp-7); } /* A band is a horizontal division of the page, opened by a rule the way a broadsheet opens a section. --band is the catalog's own section spacing, so the platform and the catalog breathe identically. */ .band { padding-block: var(--band); border-block-start: var(--rule-heavy); } .band--tight { padding-block: calc(var(--band) * 0.6); } /* A BAND THAT OPENS A PAGE PAYS LESS BELOW IT. The gap between two SECTIONS is the document rhythm and is right. The gap between a page's title block and its first section is that same 62px doing a different job, and on a working surface with three short bands it reads as a hole. The PI, on the dashboard: "lot of whitespace between 00 and 01" (2026-08-19). THE NUMERAL IS NOT THE PROBLEM AND IS NOT TOUCHED. I removed it first and he corrected that in one line: it is part of the design language. This is the fix he actually asked for, and it is the same distinction the standfirst cap taught earlier today, where I shortened three sentences instead of removing the rule that was breaking them. DECLARED HERE AND NOT IN catalog.css, which is where I put it first and watched it lose. `.band` and `.band--tight` are declared in BOTH sheets, this one loads second, and the comment ten lines below already says so. A rule that has to beat platform.css must live in platform.css. That is DEC-20260808T1149Z's standing cost for the third time today, after the ticker chip and the suggestion list. Only the bottom moves: the space ABOVE the title still separates it from the masthead, which is a different relationship and reads correctly. */ .band--opens { padding-block-end: calc(var(--band) * 0.3); } .band:first-child { border-block-start: 0; } /* A BAND THAT OPENS WITH A SECTION HEAD DOES NOT DRAW ITS OWN RULE, because the section head already drew one (BUG-20260810T0657Z). `.band` is declared in BOTH sheets and this one loads second, so the two disagree about what a band is: catalog.css gives it no rule of its own and seams consecutive bands with a hairline, leaving `.section-head` to open each section, while this file opened every band with a heavy rule. The composition every catalog page uses, `section.band > div.section-head`, therefore drew two identical 3px ink rules 65px apart on a platform page. Measured on both shells 2026-08-10. It had never been seen because the four platform templates that compose that way all have exactly one band, and `.band:first-child` above zeroes it. The trap fires on a page's SECOND band, which is what the dashboard's composition has (DEC-20260810T0652Z). This makes the platform agree with the catalog for this composition and changes nothing that renders today: every current `.band > .section-head` is already a first child. It is not the full reconciliation of the two declarations, which is still owed and is still its own decision; it closes the one case that is about to have callers. */ .band:has(> .section-head) { border-block-start: 0; } /* A BAND'S HEADING IS SUBORDINATE TO THE PAGE'S, and on this platform that is a measured convention rather than a preference. `.section-head h2` is `--t-head`, the same 38px an h1 takes, because on a catalog entity page the band heads ARE the loudest thing and the page's own name lives in `.entity`. A platform page has its h1 in a `.section-head` instead: measured on /terms, /disclaimer and /inside, the h1 renders at 38px and every body h2 at 30px. A composition with a numbered page head AND numbered bands therefore rendered three headings at 38px, which is the flatness DEC-20260810T0652Z exists to fix arriving by a different route. Only the page head keeps `--t-head`. */ .band .section-head h2 { font-size: var(--t-sub); } .card-row { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } /* Prose helpers. .lede is the standfirst under an h1; .hint and .muted are the two de-emphasis levels, and they are two rather than one because a hint is guidance the reader wants and muted is furniture the reader does not. */ .lede { font-size: var(--t-sub); line-height: var(--lh-lead); color: var(--c-ink-strong); max-inline-size: var(--measure); } /* .hint is DOUBLED on purpose, as are .t-sm, .t-2xs and .t-md below: a size utility is an author's explicit per-element decision and must outrank any container's descendant default. At a single class, (0,1,0), every one of them lost to catalog.css's `.card p` at (0,1,1), and all seventeen card paragraphs on the landing page rendered 17px whatever the template wrote: five declared steps, 11px to 19px, flattened to one. The same defect shipped and was "fixed" once before by template surgery on one page (BUG-20260810T0535Z), which is why it came back: the rule was never fixed, only the instance. Doubling the class is (0,2,0), which beats any one-container-one-element default while staying beneath every two-container rule. WRK-20260819T1401Z. */ .hint.hint { font-size: var(--t-mini); color: var(--c-ink-muted); max-inline-size: var(--measure); } .muted.muted { color: var(--c-ink-muted); } /* RUNNING PROSE, NOT FURNITURE (WRK-20260819T1401Z). The store's scope statement is sentences a reader is asked to believe, and it rendered as the system's ONLY 13px ui-face passage, at 164 characters a line across 1088px, while section 4's face table says the ui face is "furniture only... Never prose". Text face, a reading size, the muted ink every other coverage line already uses, and the measure. */ .coverage { font-family: var(--face-text); font-size: var(--t-small); color: var(--c-ink-muted); max-inline-size: var(--measure); } /* ROW gap larger than COLUMN gap, and the asymmetry is measured rather than aesthetic. `.btn--sm` meets the 44px floor with an invisible hit extension, so a 31.2px button grows 6.4px above and below. Two of them stacked need 12.8px between them, and a uniform `--sp-3` gives 12px, so their extensions overlapped by 0.8px and bible 13.8's law that two targets may never contest one point was broken. Measured on /dashboard at 390: "Email me about all" hit-tested at 43px against the 44 floor while its neighbour, on top at the seam, measured fine. `--sp-4` is 16px and clears it. The column gap is untouched, because side by side the buttons never collide: the extension is inset to nothing on an axis the drawn box already satisfies, and these are wider than 44px. */ .btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-3); align-items: center; } /* The accessible-hiding primitive. clip-path rather than clip, and NOT display:none, because a screen reader must still reach it. */ .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-block-start: 0; inset-inline-start: 0; transform: translateY(-100%); z-index: 10; padding: var(--sp-3) var(--sp-5); background: var(--c-mark); color: var(--c-on-mark); font-family: var(--face-ui); font-size: var(--t-small); letter-spacing: var(--tr-caps-snug); text-transform: uppercase; } .skip-link:focus-visible { transform: translateY(0); } /* ----------------------------------------------------------------------------- 2. THE AUTHENTICATED SHELL ----------------------------------------------------------------------------- Bible 13.1. The catalog nameplate says what the publication is. The platform nameplate additionally says who is reading, as a byline rather than an avatar, in the same slot the catalog uses for its "PUBLIC · NO ACCOUNT · MACHINE-READABLE" line. The two shells therefore have the same silhouette and differ by one line of type. THE SESSION PREDICATE IS SINGLE-SOURCED. base.html computes _signed_in from _user.get("id") and nothing else may re-derive it. BUG-20260729T0049Z was a signed-in shell rendered to anonymous visitors, and nothing in this file may make .byline--account or .account visible outside that branch. -------------------------------------------------------------------------- */ /* EVERY CLASS NAME BELOW IS THE ONE ALREADY IN templates/base.html, and none of them is renamed. Two reasons, and the second is the binding one: 1. base.html's own script queries `.account-menu` directly to close the disclosure on outside click. A rename breaks that with no test failure, no server error, and nothing visibly wrong until someone tries to dismiss the menu (WRK-20260808T1132Z section 4). 2. Restyling should not need a markup edit. The shell already uses a
disclosure, which is exactly what bible 13.1 specifies, so the existing markup was right and only its clothes were wrong. */ .site-header { border-block-end: var(--rule-nameplate); } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); padding-block: var(--sp-4); } /* The nameplate. The mark keeps its diamond, which is the same rotated square the system uses for "this one" on a radio and on an interval's point estimate, so the brand mark and the data vocabulary agree. */ .logo { display: inline-flex; align-items: baseline; gap: var(--sp-2); font-family: var(--face-text); /* ONE LOGO, EVERYWHERE. --t-sub at every width on both shells, by the PI's instruction of 2026-08-19: "the diamond size keeps changing across the pages. We must have ONE uniform Logo." Both shells' marks are 0.62em of their wordmark, so one wordmark token is what makes one diamond. The platform desktop wore --t-title (50px, a 31px diamond) against the catalog's 32px and a 20px diamond; the platform steps down to match, because the catalog's compact nameplate is the one that was designed as a bar. WRK-20260819T1401Z. */ font-size: var(--t-sub); font-weight: var(--w-bold); letter-spacing: var(--tr-nameplate); line-height: var(--lh-solid); color: var(--c-ink-strong); text-decoration: none; margin-inline-end: auto; /* The 44px floor in the box, stated, not rented. Before this the home link's target height was whatever the type size happened to buy, which is why the phone wordmark wore an untokenised 2.125rem for nine days: 34px type bought a 46px line box and swapping in the token dropped the target to 41px, so the literal was load-bearing by accident. With the floor declared, the size below can be a token like everything else. WRK-20260819T1401Z. */ min-block-size: 2.75rem; } /* CENTRED ON THE WORDMARK, NOT SAT ON ITS BASELINE, and set relative to it rather than pinned. The catalog shell already does both in `.nameplate__mark`, and the PI's instruction on 2026-08-18 was to make this shell match that one, which is the right direction: the catalog's is correct and this one is the odd shell out. Two differences, and only the second was visible. `--t-sub` pinned the mark at 30px inside a 48px wordmark, which happens to be 0.625em and so matches the catalog's 0.62em by coincidence rather than by rule; a change to either nameplate size would have broken it silently. And `.logo` is a flex row with `align-items: baseline`, so a glyph whose ink sits centred in its em box was aligned by its baseline and dropped below the wordmark's optical centre. Measured on production at 1440: mark centre 47px against the wordmark's 40px, seven pixels low. `align-self: center` on the mark alone rather than `align-items: center` on `.logo`, because the wordmark and anything else in that row still want the baseline they have always had. This is the fourth cross-shell defect the PI has found by eye and the third in the wordmark (BUG-20260810T0602Z, BUG-20260817T1432Z), which is the argument for WRK-20260810T0603Z's cross-shell lens rather than for another one-off. */ .logo__mark { font-size: 0.62em; align-self: center; color: var(--c-ink); } /* Who is reading, set as a byline under the nameplate rather than as an avatar, in the slot the catalog uses for PUBLIC · NO ACCOUNT · MACHINE-READABLE. */ .byline--account { font-family: var(--face-ui); font-size: var(--t-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-ink-muted); } .primary-nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; } /* THE PAGE'S OPENING CLAIM IS NOT ITS SMALLEST TYPE. "OPEN · PEER REVIEWED · FREE FOR ACADEMIA" is the first thing the front page says and it was set at --t-micro, 11px, the size this system reserves for LABELS: smaller than every other word on the page including the provenance stamp. The PI, of the phone screenshot: "The academic tier is the tiniest font size too." He is right on the merits and on the law. Section 3's ladder makes --t-micro a label size, and a standing claim about what the product IS is not a label, it is the deck's sibling. --t-mini keeps the strip thin and stops it being the quietest thing on a page it opens. The `.kicker` label size elsewhere is untouched: where the class genuinely labels a section it is doing its job. */ .hero .kicker--plain { font-size: var(--t-mini); } /* TWO ROWS ON A PHONE, NOT FOUR. Measured at 390: four rows and 266px of masthead, 32% of the screen spent before a word of the page, and the wordmark sat alone on a row of its own because it and the controls could not fit one line at 48px. The PI sent a photograph of it from his phone and I let it sit for hours. Wordmark and controls share the first line; the nav takes the second. That is the ordinary phone masthead. (An earlier version of this comment claimed it is "what the catalog shell already does"; it is not: the catalog masthead deliberately STACKS below 64rem, because squeezing it would cost the 44px floor on every control, and that decision is recorded there. The two shells solve the same width differently for measured reasons, and a comment asserting parity that does not exist is how two audit findings burned their first hour. WRK-20260819T1401Z.) The wordmark steps down from --t-title to --t-sub, the token the catalog's compact nameplate reads, because "a reader arrives on a page, not on a cover". (This sentence used to say 34px "the size the catalog's own compact nameplate has used all along": the catalog measured 30px on the day that was written, so the claim was false at birth. One token in both shells now makes the claim true by construction rather than by assertion.) The nav is NOT hidden behind a hamburger. Three words are not a menu, and a disclosure would cost a tap, a script dependency and a focus trap to conceal them, which is the argument the primary nav's own comment already makes. */ @media (max-width: 48rem) { .site-header__inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-2) var(--sp-4); } /* Declared AFTER `.logo` rather than before it: both are one class, so at equal specificity source order decides, and the first version of this block sat above `.logo` and silently lost its font-size. Measured, not assumed: the wordmark stayed 48px and the audit said so. --t-sub, the same token the catalog's compact nameplate reads, so the two shells' phone wordmarks are one value by CONSTRUCTION. The 2.125rem that stood here carried a comment claiming it was "the size the catalog's own compact nameplate has used all along"; the catalog's measured 30px on the day that was written, so the claim was false at birth, and the two shells signed themselves 34px against 30px until the audit caught it. The 44px target this literal was accidentally buying is now bought honestly by .logo's own min-block-size. */ .site-header__brand { grid-column: 1; grid-row: 1; font-size: var(--t-sub); } .site-header__inner > .row { grid-column: 2; grid-row: 1; justify-self: end; } .primary-nav { grid-column: 1 / -1; grid-row: 2; } /* ONE LINE THAT NEVER WRAPS, superseding the two-even-column grid that stood here. The grid was itself a fix for a ragged 2+1 wrap the PI photographed, and it traded the rag for a different spillage: an orphaned third item under an empty cell, 44px rows stacked 40px apart, which he then photographed too ("the three menu items look like someone spewed them there"). The lesson is that BOTH failures are the same failure: a nav that wraps at all reads as scattered on a phone. So it takes the strip grammar the catalog folio uses on the same widths: the folio's own type step, middway tracking, one 44px line, and when a width cannot hold it the strip SCROLLS, the tabs convention every phone user knows, with the half-visible item at the edge as its own affordance. At the folio step the three items fit 390 outright; the scroll is for narrower phones. One grammar, two shells. WRK-20260819T1401Z. */ .primary-nav ul { display: flex; flex-wrap: nowrap; gap: var(--sp-5); overflow-x: auto; scrollbar-width: none; /* The strip is a drawn row of the bar, not text floating between the wordmark and the first band: a hairline above ties it to the identity row exactly as the catalog strip is tied to its nameplate. */ border-block-start: var(--rule-hair); padding-block: var(--sp-1); } .primary-nav ul::-webkit-scrollbar { display: none; } .primary-nav li { flex: none; } .primary-nav .nav-link { white-space: nowrap; font-size: var(--t-micro); } } /* The 2.75rem floor is carried in the BOX rather than as a ::before extension, because these sit in a wrapping flex row and an invisible halo on a 33px box would overlap its neighbour above and below: two targets contesting one point, which section 8 forbids outright. The header does not grow, because the logo beside them is already 48px (measured: 86px header, unchanged). Before this rule the drawn box was 33px and the real hit target, measured with elementFromPoint rather than getBoundingClientRect, was 34x81 (BUG-20260808T2330Z). */ .nav-link { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-family: var(--face-ui); font-size: var(--t-mini); letter-spacing: var(--tr-caps-snug); text-transform: uppercase; color: var(--c-ink); text-decoration: none; border-block-end: 2px solid transparent; } .nav-link:hover { border-block-end-color: var(--c-rule); } /* aria-current is the source of truth for "you are here", so the style keys to the attribute rather than to a class a template has to remember to add. It is an underline rather than a colour change, so it survives greyscale (law 2). */ .nav-link[aria-current="page"] { border-block-end-color: var(--c-ink); color: var(--c-ink-strong); } .row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .row--tight { gap: var(--sp-2); } /* Three real buttons in a ruled set, the same construction as the catalog's PAPER / AUTO / INK setter. The labels differ and the stored value does not: DEC-20260808T1149Z makes both shells write `ebomi-theme`. */ /* The header's controls are a ruled set and must share one height. The theme setter is 46px, a 44px button inside a 1px rule on each side, and .btn--sm drew at 31px, so the two sat centred on one line with visibly different top and bottom edges: misaligned to the eye even though the centres agreed. catalog.css:2022 sets the same precedent for .entity__kicker, and the reason is the same: a small button is small on purpose EXCEPT beside a full-height control (BUG-20260810T0012Z). `stretch` on the cluster rather than a height on the button, because the number that has to match is the setter's OUTER height and no rule can name it: 44px of button plus 2px of rule. Stretch makes the row's own height the contract, so the two edges line up whatever the setter's border becomes. */ .site-header .row { align-items: stretch; } .site-header .btn--sm { min-block-size: 2.75rem; } .site-header .btn--sm::before { content: none; } /* The bar's controls are chrome beside the brand, never rivals of it: the PI, of the signed-out header, "that sign in rectangle is larger than the logo. Bad." Exactly the floor, a quiet label size, padding that fits inside the 44px box. Applies to any .btn the bar carries, so the next control cannot re-grow past the wordmark either. */ .site-header .btn { min-block-size: 2.75rem; padding: 0 var(--sp-4); font-size: var(--t-mini); } /* THE THEME CONTROL IS A MENU, NOT A SEGMENTED BAR. The PI sent Render's own picker as the model: a small trigger, and behind it a vertical list with an icon per row and a tick on the one in force. Three ruled segments sitting permanently in the masthead were the loudest element in it, which is law 1 inverted, and he had said so twice before sending a picture. The list is achromatic. The current row is marked by a TICK and by ink weight, never by a fill: law 2 says the meaning has to survive greyscale, and a tick survives it better than any colour could. The old control marked the current segment with `--c-mark`, a filled block, which is the vocabulary this system reserves for data. */ .theme-menu { display: grid; } .theme-menu__item { display: grid; grid-template-columns: 1rem 1fr 0.9rem; align-items: center; gap: var(--sp-3); inline-size: 100%; min-block-size: 2.5rem; padding-inline: var(--sp-4); font-family: var(--face-ui); font-size: var(--t-mini); text-align: start; background: none; border: 0; color: var(--c-ink-muted); cursor: pointer; } .theme-menu__item:hover { background: var(--c-hover-wash); color: var(--c-ink-strong); } .theme-menu__item[aria-pressed="true"] { color: var(--c-ink-strong); font-weight: var(--w-semi); } .theme-menu__tick { visibility: hidden; } .theme-menu__item[aria-pressed="true"] .theme-menu__tick { visibility: visible; } .theme-menu__item svg { display: block; } /* The trigger. One control at the size of its neighbours, which is the whole point: what used to be three boxes is now one. */ .theme-picker { position: relative; } .theme-picker > summary { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: 2.75rem; padding-inline: var(--sp-3); font-family: var(--face-ui); font-size: var(--t-mini); letter-spacing: var(--tr-caps-snug); text-transform: uppercase; color: var(--c-ink-muted); border: var(--rule-control); cursor: pointer; list-style: none; } .theme-picker > summary::-webkit-details-marker { display: none; } .theme-picker > summary::after { content: "\25BE"; font-size: var(--t-micro); } .theme-picker[open] > summary::after { content: "\25B4"; } .theme-picker__icon { display: inline-flex; } /* THE TRIGGER IS A SQUARE THAT REPORTS THE STATE. 113x44 with the word THEME taking 51 of it, for a control that names all three of its options the moment it opens. Law 1: the chrome is subordinate. 44x44 now, which is the floor and therefore the smallest it is allowed to be. All three icons ship and CSS picks the live one, so the trigger tracks the state with NO new script. The state already lives in `aria-pressed`, which the existing paintToggle() maintains, so this reads the same source the menu draws its tick from and cannot disagree with it. */ .theme-picker > summary { inline-size: 2.75rem; min-inline-size: 0; padding-inline: 0; justify-content: center; gap: 0; } .theme-picker > summary::after { content: none; } .theme-picker__icon { display: none; } /* The fallback is System, which is also the default, so a trigger rendered before any script has run shows the state the page is actually in. */ .theme-picker__icon--system { display: inline-flex; } .theme-picker:has([data-theme-choice="light"][aria-pressed="true"]) .theme-picker__icon--system, .theme-picker:has([data-theme-choice="dark"][aria-pressed="true"]) .theme-picker__icon--system { display: none; } .theme-picker:has([data-theme-choice="light"][aria-pressed="true"]) .theme-picker__icon--light { display: inline-flex; } .theme-picker:has([data-theme-choice="dark"][aria-pressed="true"]) .theme-picker__icon--dark { display: inline-flex; } /* A CLOSED DISCLOSURE MUST NOT PAINT ITS PANEL, STATED EXPLICITLY. Measured at 390px on the front page: `details.open` was FALSE and the panel still computed `display: block` with a real 176x138 box, so the theme menu stood permanently under the masthead and the header measured 266px in seven rows. The browser's own hiding of a closed `
`' content did not reach an absolutely positioned child here, which is the sort of thing that differs by engine and is not worth relying on either way. Written for BOTH panels rather than the one that was caught, for the same reason the dismiss handler is bound to `header details` rather than to a class: a rule a pattern needs belongs on the pattern. */ .theme-picker:not([open]) .theme-picker__panel, .account-menu:not([open]) .account-menu__panel, .folio-account:not([open]) .folio-account__panel { display: none; } .theme-picker__panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--sp-2)); z-index: 5; min-inline-size: 11rem; background: var(--c-surface); border: var(--rule-control); padding-block: var(--sp-2); } /* The account affordance. Already a
disclosure in the markup, which is what bible 13.1 argues for: it works with scripting disabled, needs no focus trap, and the broadsheet has no vocabulary for a floating card. No shadow and no radius (law 7). */ .account-menu { position: relative; } .account-menu > summary { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: 2.75rem; padding-inline: var(--sp-3); font-family: var(--face-ui); font-size: var(--t-mini); letter-spacing: var(--tr-caps-snug); text-transform: uppercase; border: var(--rule-control); cursor: pointer; list-style: none; } .account-menu > summary::-webkit-details-marker { display: none; } .account-menu > summary::after { content: "\25BE"; font-size: var(--t-micro); } .account-menu[open] > summary::after { content: "\25B4"; } .account-menu__panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--sp-2)); z-index: 5; min-inline-size: 14rem; background: var(--c-surface); border: var(--rule-control); display: grid; } /* THE SUMMARY CARRIES AN ADDRESS NOW, not the word "Account", so it can no longer be uppercased or allowed to set the header's width. Lowercase because an email address is a string to be READ and matched, not a label; truncated because a long institutional address would otherwise push the nav off a laptop; and the full value is in the title attribute for anyone who needs it. PI, 2026-08-19, asking for the Render-shaped cluster. */ .account-menu > summary { text-transform: none; letter-spacing: var(--tr-flat); max-inline-size: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-menu__meta { font-family: var(--face-ui); font-size: var(--t-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-ink-muted); padding: var(--sp-3) var(--sp-4) 0; } /* The address in full inside the panel, where there is room for it and where a reader on a shared machine goes to check who they are. Set in the identifier face, because that is what it is. */ .account-menu__email { font-family: var(--face-ident); font-size: var(--t-mini); color: var(--c-ink-strong); padding: 0 var(--sp-4) var(--sp-3); overflow-wrap: anywhere; } /* THE THEME CONTROL IN THE PANEL IS CHROME AND SITS AT ITS OWN SIZE. My first version stretched it to `repeat(3, 1fr)` across the panel, which made three large blocks and gave a preference more weight than Sign out directly below it. The PI called it "way too large, looks ugly" and asked whether it was in line with the bible; it was not (2026-08-19). Law 1 is that the chrome is achromatic and subordinate, and the density ladder's own review rule is that a gear louder than its surface is a defect rather than a taste. A theme preference is the quietest thing in this menu and now looks it: intrinsic width, the panel's own type scale, and the 44px floor met by the row rather than by three stretched boxes. `min-block-size: 0` on the buttons because the row supplies the target: the whole control is 2.25rem and each button spans it, which is a hit area of 36px by its own width. Kept above the floor by the invisible extension the rest of this stylesheet uses, rather than by growing the box. */ .account-menu__panel .theme-menu { margin-block-end: var(--sp-2); } .account-menu__panel hr { margin: 0; border: 0; border-block-start: var(--rule-hair); } .account-menu__item { min-block-size: 2.75rem; display: flex; align-items: center; padding: var(--sp-2) var(--sp-4); font-family: var(--face-ui); font-size: var(--t-small); color: var(--c-ink); text-decoration: none; border-block-end: var(--rule-hair); } .account-menu__item:last-child { border-block-end: 0; } .account-menu__item:hover { background: var(--c-hover-wash); } .account-menu hr { border: 0; border-block-start: var(--rule-thin); margin: 0; } .site-footer { border-block-start: var(--rule-mid); padding-block: var(--sp-8); color: var(--c-ink-muted); } .site-footer > .page > * { font-size: var(--t-mini); } .site-footer ul { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); list-style: none; margin: 0; padding: 0; } /* Seven links at a drawn height of 17px, which missed section 8's 44px floor and also WCAG 2.2 SC 2.5.8's 24px minimum; a footer link in a list does not take that criterion's inline-in-a-sentence exception. Real height rather than a hit extension for the same reason as .nav-link: these wrap, and a halo would have neighbours contesting one point. `display: flex` on the LI was wrong and is removed. One footer item is "Questions? ping@ebomi.com", so the plain text became an anonymous flex item beside the link and the pair stopped reading as a sentence (BUG-20260810T0012Z). inline-flex on the anchor alone gives the anchor its floor and leaves the text flowing around it. */ .site-footer nav a { display: inline-flex; align-items: center; min-block-size: 2.75rem; } .site-footer a { color: var(--c-ink); } /* The one sentence in the footer that is news rather than furniture: the product is now free. It takes the body size back off the rule above and the full ink colour, because a notice nobody can read is not a notice. It is the only channel to the 925 registered accounts that never completed a login and are deliberately not being emailed. */ .footer-notice { font-size: var(--t-small) !important; color: var(--c-ink-strong); font-weight: var(--w-medium); } /* ----------------------------------------------------------------------------- 3. FEEDBACK: PRINTED, NOT FLOATED (law 11) ----------------------------------------------------------------------------- Bible 13.2. The shipped platform used a toast region: a message that appears over the page and removes itself on a timer. It is deleted rather than restyled, because a message that removes itself cannot be re-read, cannot be quoted and cannot be checked, and this product's entire claim is that what it says can be checked. A timer also decides how fast someone reads, which no document may do. Four states, told apart by kicker word, rule style and mark, NEVER by pigment (law 1). NOT DONE and FAULT are separate because they are separate facts: the first says the system understood and declined, the second says the system did not work. -------------------------------------------------------------------------- */ .notice { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-block-start: var(--rule-mid); background: var(--c-note-wash); max-inline-size: var(--measure); } .notice__kicker { font-family: var(--face-ui); font-size: var(--t-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-ink-muted); display: flex; align-items: baseline; gap: var(--sp-2); } /* The mark is generated rather than authored so a template cannot ship the wrong glyph for the state, and it is aria-hidden by being generated content: the kicker word carries the meaning for a screen reader. */ .notice__kicker::before { font-family: var(--face-fig); } .notice__body { font-size: var(--t-small); line-height: var(--lh-prose); color: var(--c-ink); } .notice--said .notice__kicker::before { content: ""; } .notice--worked .notice__kicker::before { content: "\2713\00a0"; } /* ✓ */ .notice--refused .notice__kicker::before { content: "\2716\00a0"; } /* ✖ */ .notice--faulted .notice__kicker::before { content: "\00b6\00a0"; } /* ¶ */ /* The at-cap swap offer inside a refused notice: one removable company per row, hairline-separated, each row one form whose button names the object it removes (bible 13.3). WRK-20260819T1401Z. */ .swap-list { list-style: none; margin: 0; padding: 0; display: grid; } .swap-list > li { border-block-start: var(--rule-hair); padding-block: var(--sp-2); } .swap-list > li:first-child { border-block-start: 0; } /* The closure confirmation row: the typed address, the act, the way out. Wraps on a phone; the input keeps a measure so an address is readable. */ .close-confirm { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } .close-confirm .input { flex: 1 1 16rem; max-inline-size: 24rem; } /* A refusal is doubled rather than pigmented: two rules where the others have one, which is a difference of shape and survives greyscale and every dichromacy (law 2). */ .notice--refused { border-block-start: var(--rule-mid); box-shadow: inset 0 4px 0 -2px var(--c-canvas), inset 0 6px 0 -2px var(--c-rule-strong); } /* A fault is dashed, the system's existing meaning for machinery rather than decision (law 7). */ .notice--faulted { border-block-start: 2px dashed var(--c-rule-strong); background: transparent; } /* ----------------------------------------------------------------------------- 4. DESTRUCTIVE ACTIONS, WITH THE OBVIOUS ANSWER FORBIDDEN ----------------------------------------------------------------------------- Bible 13.3. Every convention for a destructive control is a red button, and law 1 forbids it: the two pigments carry direction on transactions and nothing else in the system may take either. catalog.css has no destructive variant, which is the law holding rather than an oversight. So the channel is statement, not colour. A destructive action is never a lone button: it is a .consequence line stating in words what will be lost, with the action inside it, and the label NAMES THE OBJECT. "Remove" is a verb with no accusative and is the reason people undo things. -------------------------------------------------------------------------- */ .consequence { display: grid; gap: var(--sp-3); padding-block: var(--sp-3); border-block-start: var(--rule-hair); max-inline-size: var(--measure); } .consequence__text { font-size: var(--t-small); line-height: var(--lh-prose); color: var(--c-ink); } .consequence__text strong { font-weight: var(--w-semi); color: var(--c-ink-strong); } /* The one place a strike-through appears in the whole system, so the shape of the control says removal in greyscale and at 390px. */ .btn--struck .btn__label { text-decoration: line-through; text-decoration-color: var(--c-rule-strong); text-decoration-thickness: 2px; } .btn--struck:hover .btn__label { text-decoration-color: currentColor; } /* ----------------------------------------------------------------------------- 5. FORMS THAT MUTATE ----------------------------------------------------------------------------- Bible 13.4. catalog.css draws .field, .input, .select, .check and .fieldset for two GET search forms. These are the additions a POST needs. -------------------------------------------------------------------------- */ /* A form that has been submitted is disabled AT THE FIELDSET, not at the button. Re-entry is the defect, and a disabled button with live inputs still submits on Enter. */ .fieldset[disabled], fieldset[disabled] { opacity: 0.6; cursor: not-allowed; } .fieldset[disabled] .input, fieldset[disabled] .input { border-block-end-style: dotted; } /* The submit control states the phase and NEVER MOVES. The label text does not change to "Saving...", because a label that changes width relayouts the row under the reader's cursor. The rule sweeps beneath it instead. */ .btn[data-phase="working"] { cursor: progress; } .btn[data-phase="working"]::after { content: ""; position: absolute; inset-inline: var(--sp-3); inset-block-end: 4px; block-size: 2px; background: currentColor; animation: sweep var(--dur-page) var(--ease-inout) infinite; } @keyframes sweep { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } } @media (prefers-reduced-motion: reduce) { .btn[data-phase="working"]::after { animation: none; background: none; border-block-start: 2px dashed currentColor; } } /* The error summary links to the first invalid field by id. Errors are keyed to :user-invalid so an untouched field is never shown as an error, which is catalog.css's existing contract and is not restated here. */ .error-summary a { color: var(--c-ink-strong); } /* ----------------------------------------------------------------------------- 6. THE CONTAINER FAULT STATE, PORTED ----------------------------------------------------------------------------- Bible 13.5. catalog.css ships .blank and does NOT ship .fault, so law 8 is only half enforceable on any surface using the shipped sheet. This is the reason the landing page tells visitors "The store did not answer" when the store answered correctly with zero rows: empty and faulted were one string because the system shipped one panel (BUG-20260808T1131Z). The fault OUTRANKS the blank. An empty body under a declared fault never claims that no insider traded. -------------------------------------------------------------------------- */ .fault { display: grid; gap: var(--sp-3); padding: var(--sp-5); border: 2px dashed var(--c-rule-strong); max-inline-size: var(--measure); } .fault__mark { font-size: var(--t-head); color: var(--c-rule-strong); line-height: var(--lh-solid); } .fault__title { font-size: var(--t-lead); font-weight: var(--w-semi); color: var(--c-ink-strong); } .fault__body { font-size: var(--t-small); line-height: var(--lh-prose); max-inline-size: 42ch; } .fault__stamp { font-family: var(--face-fig); font-size: var(--t-mini); font-variant-numeric: tabular-nums lining-nums slashed-zero; color: var(--c-ink-muted); } /* Declared by the author on the wrap, because faulted-ness is not knowable from the DOM, exactly as data-filtered is for the filtered-empty state. */ [data-fault] .blank { display: none; } /* ----------------------------------------------------------------------------- 7. PRINT -------------------------------------------------------------------------- */ @media print { .site-header, .site-footer, .skip-link, .account, .primary-nav { display: none; } .notice, .fault { border: 1px solid #000; background: none; } } /* ----------------------------------------------------------------------------- 8. THE COMPATIBILITY LAYER ----------------------------------------------------------------------------- THE STRATEGY, AND WHY IT IS THIS ONE. The fifteen migrating templates use 182 distinct class names. The obvious migration is to rewrite their markup to the broadsheet's vocabulary. That is the wrong move here, for a measured reason: four of those names are queried by JavaScript (.account-menu, .listbox__option, .combobox, and input.cand-display, the last of which has no CSS rule at all so nothing about the page warns you it exists), two are asserted literally in CI, and four more are built by string interpolation and so cannot be found by grepping for the modifier. A rename breaks those silently: no test fails and no server errors (WRK-20260808T1132Z section 4). So platform.css RE-IMPLEMENTS THE EXISTING NAMES IN THE BROADSHEET'S LANGUAGE. Migrating a page becomes a stylesheet swap plus one opt-in line, not a markup rewrite, and the silent-breakage class is removed rather than managed. The names are ebomi's own history and will read oddly next to the catalog's; that is a cost worth paying for five months, and renaming can happen later against a green screenshot gate. THE SIX FALSE FRIENDS. These names exist in catalog.css with a DIFFERENT meaning, so a migrated page inherits the wrong rule unless this file overrides it. platform.css loads after catalog.css, so an equal-specificity rule here wins. ident catalog has no top-level rule, only .result__meta .ident and .entity__kicker .ident, so an unscoped .ident gets nothing wide/full catalog scopes them to `.sheet > .wide` card catalog's is a subgrid row member; ebomi's is a panel card-row catalog hard-codes 4 bands; ebomi's is auto-fit hero catalog's grid lives on .hero__grid, one level down -------------------------------------------------------------------------- */ /* .card is a panel here, not a subgrid row member. Used by the on-this-page navs in terms.html:38 and transparency.html:37. A broadsheet panel is a rule and a wash, never a box with a radius (law 7). */ /* MEASURED, and it is exactly the false-friend failure the register predicted. catalog.css's .card is a subgrid ROW MEMBER: it carries `grid-template-rows: subgrid`. Resetting only `display` is not enough, because any later rule that turns grid back on inherits those tracks. On /transactions the form carries both `card` and `filter-bar`, `.filter-bar` sets display:grid, and the box came back as `grid-template-rows: subgrid [] [] [] [] []`: five inherited tracks stretched a 178px panel to 307px and put 129px of dead space under the Apply button. The tracks have to be cleared as well as the display. */ .card { display: block; padding: var(--sp-4) var(--sp-5); border: 0; border-block-start: var(--rule-mid); background: var(--c-sunken); grid-column: auto; grid-row: auto; grid-template-rows: none; grid-template-columns: none; } /* The selector is doubled up on purpose. catalog.css:1484 carries `.card h2, .card h3 { font-size: var(--t-sub) }`, which is (0,1,1) and beats a bare `.card__title` at (0,1,0). Measured on /admin/overrides/ui: the heading took this rule's uppercase and UI face but kept catalog's 30px, so "ADD OR UPDATE AN OVERRIDE" shouted across the panel in the wrong voice. The false friends have descendant rules, not only their own. */ .card__title, .card h2.card__title, .card h3.card__title { font-family: var(--face-ui); font-size: var(--t-micro); line-height: var(--lh-ui); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-ink-muted); } /* An h3 card under an h2 band sits BELOW the band's head, one rung down. catalog.css's `.card h2, .card h3` sets both to --t-sub, which is right on the catalog home where the cards are the page's top level, and wrong on any platform page with band h2s: measured on /, the six band h2 rendered 28.5px (UA-sized, now fixed at the root) under card h3 at 30px, so the subordinate outranked its governor. Same specificity (0,1,1), this file loads later, so order decides. WRK-20260819T1401Z. */ .card h3 { font-size: var(--t-lead); } /* --t-base, not --t-small: bible 4.1 gives 17px to "inputs, notes, card bodies" by name. The --t-small this line used to declare never rendered, because `.card p` at (0,1,1) supplied 17px over it; the declaration was wrong and the paint was right, which is how it survived. */ .card__body { font-size: var(--t-base); line-height: var(--lh-prose); } /* The eyebrow is the broadsheet's kicker under ebomi's name. */ .eyebrow { font-family: var(--face-ui); font-size: var(--t-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-ink-muted); } /* An accent rule opened a section in the 2025 system. In the broadsheet a section is opened by a rule of graded weight and nothing else, so this is the heavy rule and carries no colour. */ .accent-rule { border: 0; border-block-start: var(--rule-heavy); margin: 0; } /* The credibility block on /inside: the author's standfirst. It is a deck, not a callout, because it is credentials rather than a caution. */ /* Set one step above the body rather than two. At --t-sub against the body's --t-base the standfirst wrapped at roughly half the width of the prose that followed it, so the eye read two different measures on one page and the block looked like a pull quote from somewhere else. --t-lead keeps it clearly a standfirst and lets it share the body's column. */ .credibility { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--c-ink-strong); max-inline-size: var(--measure); padding-inline-start: var(--sp-5); border-inline-start: var(--rule-heavy); } .credibility__cite { font-size: var(--t-mini); font-style: italic; color: var(--c-ink-muted); } /* The DOI chip is an identifier, so it takes the identifier face and the monospaced figure treatment the rest of the system gives accessions. */ .doi-chip { display: inline-block; position: relative; font-family: var(--face-ident); font-size: var(--t-mini); font-variant-numeric: tabular-nums lining-nums slashed-zero; /* --rule-control, not the hairline: this chip is a LINK, and law 7 says the hairline "may never be the sole boundary of a control". Measured by tools/ux/contrast.py on its first run: 1.5:1 light and 1.21:1 dark, an SC 1.4.11 miss on an operable boundary that the old stylesheet-level audit never enumerated because it never rendered a page. */ padding: var(--sp-1) var(--sp-2); border: var(--rule-control); color: var(--c-ink); } /* 27px drawn, so it needed the floor. This one takes the invisible extension rather than real height, the opposite of the .nav-link decision, and the difference is whether neighbours can collide: a DOI chip is the only control in its block and nothing wraps beside it, so a halo contests no other point. Growing the box instead would put a 44px ruled rectangle around a citation line and make an identifier look like a button. */ .doi-chip::before { content: ""; position: absolute; inset-block: min(0px, calc((100% - 2.75rem) / 2)); inset-inline: min(0px, calc((100% - 2.75rem) / 2)); } /* .callout maps onto the broadsheet's .note: a heavy rule on the inline start and a wash, never a tinted box. The tone variants differ by rule STYLE, never by pigment (law 1), which is the same grammar the code chips use: solid for a statement, dashed for machinery, dotted for the routine and pre-committed. */ .callout { display: grid; gap: var(--sp-2); padding: var(--sp-3) 0 var(--sp-3) var(--sp-5); border-inline-start: var(--rule-heavy); background: var(--c-note-wash); max-inline-size: var(--measure); } .callout__title { font-family: var(--face-ui); font-size: var(--t-micro); font-weight: var(--w-bold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-ink-muted); } .callout--method { border-inline-start-style: solid; } .callout--warning { border-inline-start-style: dashed; background: transparent; } .callout--success { border-inline-start-style: solid; } .callout--danger { border-inline-start-style: double; border-inline-start-width: 4px; background: transparent; } /* .contents, the document index. Bible 13.7. The one component a platform document needs that the catalog never did: its own pages are short entity pages, and /transparency and /terms are long enough that a reader arrives looking for one section. It was drawn as `nav.card` with the links run together on one line, which is the 2025 vocabulary and reads as a grey box of blue words (BUG-20260808T2305Z). Drawn instead as what a broadsheet uses for an index: a hairline-ruled list, one row per entry, the numeral in a fixed grotesque column and the title in the text face. The numeral is written in the markup rather than counted in CSS, because on /terms it is the clause number a reader quotes, and law 10 prints a decision rather than inferring it. The row carries the 2.75rem target floor from bible section 8. Focus comes from the global :where(a…):focus-visible at catalog.css:471, so nothing is redefined here and bare :focus is never styled. */ .contents { display: grid; gap: var(--sp-3); padding-block: var(--sp-4); border-block: var(--rule-hair); max-inline-size: var(--measure); } .contents__label { font-family: var(--face-ui); font-size: var(--t-micro); font-weight: var(--w-bold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-ink-muted); } .contents ul { display: grid; list-style: none; margin: 0; padding: 0; } .contents li { border-block-end: var(--rule-hair); } .contents li:last-child { border-block-end: 0; } .contents a { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-3); align-items: baseline; min-block-size: 2.75rem; align-content: center; padding-block: var(--sp-2); text-decoration: none; color: var(--c-ink); } .contents__no { font-family: var(--face-ui); font-size: var(--t-micro); font-weight: var(--w-bold); letter-spacing: var(--tr-caps); font-variant-numeric: tabular-nums lining-nums; color: var(--c-ink-muted); } /* The underline is the hover channel, not a colour change, so it survives greyscale and the achromatic chrome of law 1. */ .contents a:hover .contents__title { text-decoration: underline; text-underline-offset: 0.14em; } /* Figures. Every quantity is set, not typed (law 3). .num and .unit are the platform's older names for what the broadsheet calls .fig. */ .num, .unit { font-family: var(--face-fig); font-variant-numeric: tabular-nums lining-nums slashed-zero; } .unit { color: var(--c-ink-muted); } /* Doubled: see the .hint.hint comment. */ .t-md.t-md { font-size: var(--t-body); } /* An unscoped .ident, which catalog.css only defines inside two containers. */ .ident { font-family: var(--face-ident); font-size: var(--t-mini); letter-spacing: var(--tr-flat); color: var(--c-ink-muted); } /* The Form 4 code chip. Direction is the one variable allowed a pigment (law 1), and it never carries alone (law 2): the code LETTER is inside the chip, and the rule style separates a decision to trade from compensation machinery, solid for the open market and dashed for everything the broadsheet's own grammar calls admin. In greyscale, and under every dichromacy, the letter and the rule style still say it. --c-buy, --c-sell and --c-admin are catalog.css's measured roles, carried not recomputed. */ .code-badge { display: inline-flex; align-items: center; gap: var(--sp-1); min-block-size: 1.5rem; padding-inline: var(--sp-2); border: 1px solid var(--c-admin); border-radius: var(--radius); color: var(--c-admin); font-family: var(--face-ui); font-size: var(--t-micro); font-weight: var(--w-semi); letter-spacing: var(--tr-caps-snug); font-variant-numeric: tabular-nums lining-nums slashed-zero; white-space: nowrap; border-style: dashed; /* An inline-flex box's baseline is synthesized from its first flex item, and .code-badge__glyph is EMPTY in every template with no CSS content, so the chip was aligned on a box with no text in it. Measured in prose at 19px: the chip sat 13px above AND 13px below the baseline, centred on the baseline itself, while the surrounding text only descends about 4px. So it hung a full descender lower than anything beside it and inflated the line box from 30.8px to 34px, which is the "off" the owner saw on /transparency. `middle` aligns the box's centre with the baseline plus half the x-height, which is the text's own optical centre rather than its baseline. Measured after: 8px below, and the line box back to 30.8px, so the chip no longer changes the leading of the paragraph it sits in. A keyword rather than a nudge, so law 6 holds. No effect where the badge is a flex or grid item, which is every table and tape use (BUG-20260810T0012Z). */ vertical-align: middle; } .code-badge--buy { color: var(--c-buy); border-color: var(--c-buy); border-style: solid; } .code-badge--sell { color: var(--c-sell); border-color: var(--c-sell); border-style: solid; } /* A code the product has not yet classified prints dotted, the system's existing meaning for the pre-committed and routine, rather than guessing. */ .code-badge--planned { border-style: dotted; } .code-badge__glyph { font-family: var(--face-fig); } /* ----------------------------------------------------------------------------- 9. THE PLATFORM COMPONENTS ----------------------------------------------------------------------------- Everything the account and admin surfaces need that a read-only anonymous catalog never did. Same policy as section 8: the names are the ones already in the templates, re-implemented in the broadsheet's language. -------------------------------------------------------------------------- */ /* --- Buttons. The old names are aliased onto the broadsheet's variants rather than redrawn, so there is exactly one button in the system and four ways to say its name. One .btn--ink per view (bible 8.3). --------------- */ .btn--primary { --btn-face: var(--c-mark); --btn-label: var(--c-on-mark); --btn-rule: var(--c-mark); } .btn--primary:hover { --btn-face: var(--c-mark-hover); --btn-rule: var(--c-mark-hover); } .btn--primary:active { translate: 0 1px; } .btn--secondary:hover { background: var(--c-hover-wash); --btn-rule: var(--c-mark); } .btn--secondary:active { translate: 0 1px; } .btn--ghost { --btn-rule: transparent; padding-inline: var(--sp-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; text-decoration-color: var(--c-rule); } .btn--ghost:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; background: var(--c-hover-wash); } /* --t-mini, not --t-micro: bible 8.3 reserves the micro step for table and card FEET, and the platform wears btn--sm on real controls, including the dashboard's whole action set. One rung up keeps them compact without labelling working buttons at folio size, which is the PI's "tiny font" complaint in its most literal form. WRK-20260819T1401Z decision 1's tail. */ .btn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--t-mini); min-block-size: 0; } /* The small button's invisible hit extension, carried from catalog.css:913: it grows the pointer target to the 44px floor on any axis where the drawn box is smaller, and insets to nothing where it is not. */ .btn--sm::before { content: ""; position: absolute; inset-block: min(0px, calc((100% - 2.75rem) / 2)); inset-inline: min(0px, calc((100% - 2.75rem) / 2)); } .btn-group--nowrap { flex-wrap: nowrap; } /* --- Tables. .table maps onto the broadsheet's ledger: no zebra, no cell borders, no container box. Hairlines between rows, a 2px rule under the head, a 3px rule opening the wrap (bible 8.5). ---------------------- */ .table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums slashed-zero; } .table thead th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--c-canvas); font-family: var(--face-ui); font-size: var(--t-micro); font-weight: var(--w-semi); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-ink-muted); text-align: start; padding: var(--sp-2) var(--sp-3); border-block-end: var(--rule-mid); } .table tbody td { padding: var(--sp-3); border-block-end: var(--rule-hair); vertical-align: baseline; } .table tbody tr:last-child td { border-block-end: var(--rule-mid); } .table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); } .table tbody tr:hover, .table tbody tr:focus-within { background: var(--c-hover-wash); } .table--compact tbody td, .table--compact thead th { padding: var(--sp-1) var(--sp-2); font-size: var(--t-mini); } /* All three properties are load bearing: grid so the wrap cannot be sized by its content, relative so a scroll affordance can be positioned against it, and min-inline-size 0 so a grid child may actually shrink. */ .table-scroll { display: grid; position: relative; overflow-x: auto; min-inline-size: 0; border-block-start: var(--rule-heavy); } /* THE STACKING TABLE, and this is a decision rather than a default. The alternative was to set the admin tables in agate at every width, which is the broadsheet's own answer to a dense table. It is rejected here for one measured reason: admin/academic.html DELIBERATELY mismatches data-label="Domain" against its "Claimed domain" header to avoid a measured 390px ::before collision, and agate would make that carefully-placed workaround meaningless while reintroducing the collision it was written to dodge. Keeping the stack keeps a measured fix true. */ @media (max-width: 48rem) { .table--stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .table--stack tbody tr { display: grid; gap: var(--sp-1); padding-block: var(--sp-3); border-block-end: var(--rule-thin); } .table--stack tbody td { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sp-3); padding: var(--sp-1) 0; border: 0; } .table--stack tbody td::before { content: attr(data-label); font-family: var(--face-ui); font-size: var(--t-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-ink-muted); } /* Every real child belongs in the VALUE column. Without this the td is a two-column grid whose first item is the ::before label, so a cell with two children put the first in column 2 and auto-placed the second into column 1 of the next row, underneath the label rather than beside it. Measured at 390 on the dashboard's Company cell, which carries a ticker chip and a company name: the chip landed at left 164 and the name at left 8, so the name sat outside the column its own label was naming. Legible, and wrong in the one way a labelled grid must not be (WRK-20260808T1132Z, "still open in this lane"). They stack rather than sitting inline, which is the right answer at 390: a chip plus a full company name on one line is what forced the wrap in the first place. This puts both under the label, left-aligned, in the column that is theirs. */ .table--stack tbody td > * { grid-column: 2; } } /* A STACK WHOSE VALUES ARE SENTENCES, not tabular data. `.table--stack` above sets a 9rem label column beside the value, which is right for the dashboard tables it was written for, where a value is a ticker, a date or a figure. On the privacy policy the values are prose: at 390 the label column leaves about 200px for the text, roughly 25 characters a line, which is far under the measure the rest of the document is set to and turns a paragraph into a ladder. So the label goes ABOVE its value here rather than beside it, and the prose gets the full column. It is the same information in the same order, and the label keeps the kicker treatment so it still reads as a label rather than as a heading in the flow. Applied with `.table--stack--prose` rather than by changing `.table--stack`, because the dashboard's tables measured better the other way and this is an addition, not a correction (WRK-20260811T0042Z). */ @media (max-width: 48rem) { /* NOT A GRID, and that is the whole rule rather than a detail. `.table--stack` makes the cell `display: grid` so the ::before label can sit in its own track, and a grid BLOCKIFIES every child: an inline or stops being part of the sentence and becomes its own grid item on its own line. Measured at 390 on the Turnstile row, whose "Turnstile Privacy Addendum" link computed to `display: block` and pushed the full stop after it onto a line of its own. Harmless-looking, and it is a sentence coming apart. So the prose cell is a plain block and the label is a block ::before above it. Same order, same treatment, and the text flows as text. */ .table--stack--prose tbody td { display: block; padding: var(--sp-1) 0; } .table--stack--prose tbody td::before { display: block; margin-block-end: var(--sp-1); } } /* --- Empty, no-results and faulted are three states and must not look alike (law 8). The mark is what tells them apart, and it is generated so a template cannot ship the wrong glyph for its state. ----------------- */ /* No max-inline-size on the panel. An empty state that follows a table has to span the table it is speaking for; capped at --measure it drew a dashed box across the left half of a full-width header rule and read as an unfinished column rather than as a statement about the table. The BODY is capped instead, at 42ch, which is where the reading-measure argument actually applies. */ .empty-state { display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-7) var(--sp-5); border: 1px dashed var(--c-rule-strong); } .empty-state__mark { font-size: var(--t-head); line-height: var(--lh-solid); color: var(--c-rule-strong); } .empty-state__title { font-size: var(--t-lead); font-weight: var(--w-semi); color: var(--c-ink-strong); } .empty-state__body { font-size: var(--t-small); line-height: var(--lh-prose); max-inline-size: 42ch; } .empty-state__criteria { font-size: var(--t-mini); color: var(--c-ink-muted); font-family: var(--face-ident); } /* A fault outranks a blank: a container empty because something broke never gets to claim that the world is empty. Doubled rule, not a pigment. */ .empty-state--error { border-style: solid; border-width: 2px; border-inline-start-width: 6px; } /* --- Forms --------------------------------------------------------------- */ .field { display: grid; gap: var(--sp-2); } .label { font-family: var(--face-ui); font-size: var(--t-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-ink-muted); } /* The required mark is a glyph AND the word, never the glyph alone, because an asterisk is a convention a first-time visitor has to already know. */ .label--required::after { content: " (required)"; color: var(--c-ink-faint); text-transform: none; letter-spacing: normal; } .input, .select { font: inherit; color: var(--c-ink); background: transparent; border: 0; border-block-end: var(--rule-control); border-radius: var(--radius); padding: var(--sp-2) 0; min-block-size: 2.75rem; inline-size: 100%; } .input::placeholder { font-style: italic; color: var(--c-ink-disabled); } .input:focus-visible, .select:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } /* Keyed to :user-invalid so an untouched field is never shown as an error. */ .input:user-invalid { border-block-end-style: double; border-block-end-width: 3px; } .error-msg, .error-msg--inline { font-size: var(--t-mini); color: var(--c-ink-strong); display: flex; align-items: baseline; gap: var(--sp-2); } .error-msg::before, .error-msg--inline::before { content: "\2716"; font-family: var(--face-fig); } .form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding-block-start: var(--sp-3); } .filter-bar { display: grid; gap: var(--sp-3); padding-block: var(--sp-4); border-block-end: var(--rule-thin); } .filter-bar__fields { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: end; } /* --- Pagination ---------------------------------------------------------- */ .pagination { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding-block: var(--sp-4); border-block: var(--rule-hair); } .pagination__status { margin-inline-start: auto; font-size: var(--t-mini); color: var(--c-ink-muted); font-variant-numeric: tabular-nums lining-nums slashed-zero; } .result-count { font-size: var(--t-mini); color: var(--c-ink-muted); font-variant-numeric: tabular-nums lining-nums slashed-zero; } /* --- The admin console --------------------------------------------------- */ /* The list is the flex container, not the