/* Centurion MCN prototype. Visual language borrowed from the PERIO client book: a warm off-white ground, deep navy for structure, a single gold accent, thin coloured rules along the top of cards, big quiet numerals, and a lot of air. One purpose per section, strong titles, short ledes, and a gold-barred line where the page has one thing to say. Severity carries a mark and a word as well as a colour, so the table still reads in greyscale and on a projector. */ /* --- the product's first typeface ------------------------------------------ INTER, VARIABLE, SELF-HOSTED. Instruction 59. Until this landed CRI had no specified face at all -- no @font-face, no font-family on body -- so every page rendered in whatever sans the reader's OS supplied. VARIABLE IS NOT A PREFERENCE. This stylesheet asks for 550, 640, 650 and 750 across 26 rules. Static cuts snap those to the nearest available weight and nothing errors, nothing fails a test, and the page is quietly not what the stylesheet says. The axis served here is 400-800. SELF-HOSTED RATHER THAN LINKED, deliberately. A fonts.googleapis.com request fails on one network and not another -- a blocker, a firewall, an offline machine -- and a font that vanishes for some readers is exactly the silent fallback this product refuses everywhere else. Same-origin files cannot be third-party blocked, and the bytes are pinned rather than whatever the CDN serves that day. CYRILLIC IS NOT AN EDGE CASE HERE. 120 of 252 video titles are Cyrillic and 6 of 15 channel names are. A face whose Cyrillic fell back would swap face per string INSIDE one column, which reads worse than a whole-page fallback. Both cyrillic subsets are below and `unicode-range` keeps them lazy: a Latin page fetches 47KB, a Ukrainian one adds 18KB. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-greek-ext.woff2') format('woff2'); unicode-range: U+1F00-1FFF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* --- WHAT `ch` IS, AND WHERE IT IS THE RIGHT UNIT ------------------------- Instruction 113. Measured in Chrome against the served stylesheet, signed in, after `document.fonts.load()` for each script and `document.fonts.check()` asserted TRUE -- and against a deliberately nonexistent family as a control, because a metric taken before its subset loads silently returns the FALLBACK's numbers with no error. `1ch` IS THE ADVANCE OF THE LATIN DIGIT ZERO. Nothing else. Inter's zero 0.6309 em <- what `ch` measures a Latin character 0.5164 em <- median over the rendered title corpus a Cyrillic char 0.5694 em So `1ch` over-states a Latin character by 22.2% and a Cyrillic one by 10.8%, and Cyrillic is 10.3% wider per character than Latin. THE FONT SIZE CANCELS: an `Nch` box holds 1.22N Latin characters or 1.11N Cyrillic ones at EVERY size, so a cap stated in `ch` is always ~10% tighter in Cyrillic than the number suggests. AND THE GLYPH EFFECT IS THE SMALL HALF. Over the 115 titles the latest runs actually render, the median Latin title is 35 characters and the median Cyrillic one is 89 -- 154% longer. Any statement of this problem that leads with the 10.3% understates it by roughly fifteen times. THE UNIT IS NOT THE DEFECT; THE USE IS, and this comment must not be read as condemning `ch`: RIGHT for a PROSE MEASURE. Line length for readability genuinely is counted in characters -- the 45-75 range is characters per line, not pixels. The sixteen prose measures in this file are correct and were deliberately left alone. `.v3-note` (88ch) and `.v3-nowhere__body` (62ch) are among them. WRONG for a LAYOUT WIDTH. A grid or table column is a question about a BOX. The three layout uses were replaced with lengths -- see `.lvgrid`, `.ownercol` and `.covcol`, each carrying its own measured pixel delta. WRONG for CLIPPING, which is also a question about a box. The five truncation uses are MEASURED AND LEFT IN PLACE pending a ruling, because they decide what a reader cannot see and that is the owner's call. Measured: all five are inert or near-inert -- the column binds long before the cap does. `.one-line` caps at 52ch = 426.5px while its column renders 297px, so a reader gets 44 Latin or 40 Cyrillic characters and the cap never engages. A cap that cannot bite is a dormant contradiction, not a safeguard. A comment stating this must not be counted as a use. Any guard that greps for `ch` here has to strip comments first: stripped 26, unstripped 33. */ :root { /* The UI face. Inter first, then a stack somebody chose -- never a bare `Inter, sans-serif`, so a failed load lands somewhere deliberate. */ --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* LIGHT IS THE BASE AND DARK IS THE OVERRIDE, per the owner's 2026-08-24 reversal: "keep the other tenants with light theme with toggles to switch". THREE STATES, AND THE ORDER BELOW IS THE MECHANISM RATHER THAN A STYLE. :root the complete LIGHT palette @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) dark, when the system says so :root[data-theme="dark"] dark, when the reader says so THE `:not([data-theme="light"])` GUARD IS WHAT LETS AN EXPLICIT LIGHT CHOICE SURVIVE A DARK SYSTEM PREFERENCE. Without it a reader who chose light on a dark-preferring machine gets the media query anyway, which is the person the owner just asked us to serve. EVERY COLOUR TOKEN IS DEFINED HERE, ON BARE `:root`. A token defined only inside a media block does not exist in one of the three states, and what it renders is one theme's foreground on the other's ground. `test_theme_cascade` fails on exactly that. `--navy` IS THE TRAP IN THIS FILE AND ITS NAME INVERTS. It is not a surface: it is the HEADING AND EMPHASIS TEXT colour, read by `h1.display`, `h2.sec`, `.cell-title` and the current nav item -- 28 rules. On dark it holds a cool near-white; on light it holds the deep navy the name suggests. Anyone deriving light values by reading token names gets this one exactly backwards. `--band` / `--band-ink` ARE AN INVERTED SURFACE IN BOTH THEMES. Table headers, primary buttons, tags and badges: a dark ground with light text on it, which is what they are on a white page and on a black one. So their values barely move, and that is the role being stable rather than an oversight. `--gold` NAMES A MAGENTA and keeps its name on purpose -- renaming it across every rule that reads it is a separate change. It is ONE HUE AT TWO VALUES: syncRed #f61e6f on dark, syncRed-700 #c0073f on light. 500 and 600 were measured and rejected -- 3.80:1 and 4.34:1 on this ground, and 4.49:1 for 600 on pure white, which fails AA by a hundredth and must not be rounded. THE FOUR SEMANTICS ARE RE-DERIVED, NOT LIGHTENED. Each is a text, a wash and an outline chosen as a set: the text darkens as the wash lightens, so an algorithmic inversion produces neither. Held to >= 6.30:1 on the worst pair, which is what the dark theme already achieves -- not to the AA minimum, since 4.5 would be a visible regression from a design that reaches 6.30 to 8.07. `test_theme_contrast` computes all of them and asserts the floor. `--*-line` ARE NEW NAMES FOR VALUES THAT HAD NONE. The four chip outlines were hard-coded literals (var(--material-line), var(--attention-line), var(--settled-line), var(--coverage-line)) repeated across eleven rules. They are not a new colour with a new name -- they are the existing outline, named, which CONSTRAINTS.md §20 permits and requires: a literal repeated in eleven places is a token that has not been declared. */ --ground: #fbfbfa; --paper: #ffffff; /* The hover and inset surface: row hover, chip--plain, form controls, the rail's current item. On dark it is the LIGHTEST of the three surfaces; on light it is the darkest, because both directions mean "separated from the page". */ --raised: #f1f0ec; --navy: #12182a; --navy-soft: #3a4560; --ink: #1a1a18; --ink-mid: #55554e; /* NOT A TEXT COLOUR. Retired from `color:` in every rule, and the three remaining uses are borders, where 4.5:1 does not apply. In dark it is #7a7a7a, which measures 4.36:1 on `--paper` and 3.93:1 on `--raised` -- below the AA floor -- and 4.61:1 on `--ground`, which clears it by 0.11. A token that passes on its best ground by a hundredth is one theme edit from failing everywhere. Measured across six design-v2 pages: 1,584 elements painted it, 1,512 of them below AA. Use `--ink-mid`. */ --ink-faint: #6b6b63; --rule: #e3e1db; --rule-firm: #b6b3aa; /* THE PLAIN CHIP'S OWN BOUNDARY, SEPARATE FROM `--rule-firm` ON PURPOSE. 176 draws an absent area ledger `quiet` and a complete one `plain`, and that distinction rests entirely on fill plus border because both chips carry the same `--ink-mid` text. Measured on the deployed sheet: plain FILL vs its ground 1.14:1 light 1.11:1 dark plain BORDER vs its ground 2.10:1 light 2.94:1 dark No component reached the 3:1 non-text floor, so 176 worked for a normal-vision reader and may not have for the one it was made for. A NEW TOKEN RATHER THAN A RETUNED `--rule-firm`, WHICH HAS 55 CONSUMERS. Fixing one chip by moving that token would move 54 unrelated boundaries, and a stylesheet diff cannot show what it did to them. #b6b3aa -> #95938b, 2.096:1 -> 3.077:1 against `--paper`. Uniform channel scaling (0.819/0.821/0.818) so the warm neutral stays warm. `--ink-mid` is 6.59:1 on the chip's fill, so the word keeps the emphasis and the border only delimits. NOT APPLIED TO `.chip--quiet`: its transparency IS its meaning -- the estate spends `quiet` on absence -- and raising it to 3:1 would undo 176. */ --chip-edge: #95938b; --gold: #c0073f; --gold-ink: #ffffff; --gold-tile: #f7dbe4; --gold-soft: #f7dbe4; --gold-wash: #fdf2f5; --material: #9c3125; --material-wash: #fdeeec; --material-line: #e8b3ab; --attention: #71500f; --attention-wash: #fbf3e2; --attention-line: #dcc188; --settled: #1a6440; --settled-wash: #e9f7ef; --settled-line: #a3d6b8; --coverage: #3f439a; --coverage-wash: #ecedfa; --coverage-line: #b3b5e4; --band: #2b3244; --band-ink: #edf0f6; /* THE THIRD PINNED COLOUR. `--band` and `--band-ink` are pinned because the band is a fixed dark surface in both themes; ink drawn on it must not move. `.tag--warn` needed a THIRD such ink: a stable colour that still reads as coverage rather than as a plain tag. `--coverage` itself is 1.51:1 on the band in light. This is `--coverage`'s dark value, held still: 5.38:1 on the band in BOTH themes, and 2.08:1 against `--band-ink`, so the distinction a warn tag exists to make survives the fix. Pinning it as a token rather than writing the hex into the rule is what puts it under the cascade guard's every-token-on-bare-root check and the two-dark-blocks-identical check. */ --band-coverage: #a0a2e8; /* RE-DERIVED, NEVER CARRIED. On a near-black ground a black shadow is nearly invisible and the depth comes from surfaces being lighter than the page; the same rgba(0,0,0,.3)/.7 on white are heavy smears. Light gets a lighter, cooler, tighter shadow. */ --shadow: 0 1px 2px rgba(20, 22, 30, .06), 0 10px 28px -14px rgba(20, 22, 30, .20); /* NATIVE CONTROLS FOLLOW THE THEME. Declared here so selects, date pickers and scrollbars render with the page rather than against it. The two rule-level `color-scheme: dark` declarations this file used to carry forced dark native controls onto a white page, and no test in this suite looks at a native control. */ color-scheme: light; /* NATIVE CONTROLS TAKE THE PRODUCT'S ACCENT, ONCE, HERE. 66 radios on /settings/specialists and 2 on /settings/settings rendered in Chrome's default blue because `accent-color` was never set. On the token layer rather than per page, so a surface that later grows a radio inherits it. It follows `--gold`, so it moves with the theme. */ accent-color: var(--gold); /* Widened from 1200px: the live tables carry more columns than the prototype's mock ones, and at 1200 the last column was clipped on two pages. */ --measure: 1500px; /* THE RAIL'S WIDTH IS HALF OF ITS BREAKPOINT, so the two may not drift. `--measure` + `--rail` is the viewport at which the rail becomes permanent. */ --rail: 240px; } /* THE DARK PALETTE, TWICE, AND THE DUPLICATION IS REQUIRED RATHER THAN SLOPPY. CSS cannot share one declaration list between a media query and an attribute selector, and both are needed: the media query serves a reader who has chosen nothing, the attribute selector serves one who chose dark on a light machine. `test_theme_cascade` asserts the two blocks are IDENTICAL, so they cannot drift -- which is the failure duplication actually risks. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #0a0a0a; --paper: #121212; --raised: #1d1d1d; --navy: #E8EBF2; --navy-soft: #AEB8CA; --ink: #fafafa; --ink-mid: #c9c9c9; --ink-faint: #7a7a7a; --rule: #242424; --rule-firm: #5d5f66; /* See `--chip-edge` in the light block. #5d5f66 -> #606269 is a nudge: 2.939:1 -> 3.076:1 against `--paper`, channels scaled 1.032/1.032/1.029. */ --chip-edge: #606269; --gold: #f61e6f; --gold-ink: #0a0a0a; --gold-tile: #330316; --gold-soft: #8e0733; --gold-wash: #330316; --material: #F08579; --material-wash: #331C1C; --material-line: #5E3230; --attention: #E5B45F; --attention-wash: #322718; --attention-line: #5A4726; --settled: #6FCF9A; --settled-wash: #16291F; --settled-line: #2C5240; --coverage: #A0A2E8; --coverage-wash: #22233A; --coverage-line: #3E4066; --band: #2B3244; --band-ink: #EDF0F6; --band-coverage: #A0A2E8; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .7); color-scheme: dark; } /* RULE-LEVEL DARK OVERRIDES -- the three places one value cannot serve both themes. Everything else in this stylesheet reads a token and needs nothing here, so these are listed together rather than scattered. EVERY SELECTOR CARRIES THE THEME PREFIX. A bare `.st-new` inside the media query would apply on a dark SYSTEM even to a reader who chose light -- which is the exact failure the `:not([data-theme="light"])` guard on the token block exists to prevent, arriving one level down where the guard cannot see it. `.st-new` / `.st-open` its own amber, not one of the four semantics, so it cannot borrow `--attention*` without changing dark. `.kpi:hover` its shadow was ALREADY a light value -- a navy cast from when this product was light -- so dark is the theme that needs correcting here, not light. `.search-results` / a near-black dropdown shadow reads as depth on a `.acctmenu` dark page and as a smear on a white one. */ :root:not([data-theme="light"]) .st-new, :root:not([data-theme="light"]) .st-open { color: #F0A868; background: #33241A; border-color: #5C4128; } :root:not([data-theme="light"]) .kpi:hover { box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 16px 32px -14px rgba(0,0,0,.6); } :root:not([data-theme="light"]) .search-results, :root:not([data-theme="light"]) .acctmenu { box-shadow: 0 20px 44px -18px rgba(0,0,0,.8); } :root:not([data-theme="light"]) .row--missing { background: color-mix(in srgb, var(--coverage) 6%, transparent); } :root:not([data-theme="light"]) .track-played { background: color-mix(in srgb, var(--gold) 14%, transparent); } } :root[data-theme="dark"] { --ground: #0a0a0a; --paper: #121212; --raised: #1d1d1d; --navy: #E8EBF2; --navy-soft: #AEB8CA; --ink: #fafafa; --ink-mid: #c9c9c9; --ink-faint: #7a7a7a; --rule: #242424; --rule-firm: #5d5f66; /* See `--chip-edge` in the light block. #5d5f66 -> #606269 is a nudge: 2.939:1 -> 3.076:1 against `--paper`, channels scaled 1.032/1.032/1.029. */ --chip-edge: #606269; --gold: #f61e6f; --gold-ink: #0a0a0a; --gold-tile: #330316; --gold-soft: #8e0733; --gold-wash: #330316; --material: #F08579; --material-wash: #331C1C; --material-line: #5E3230; --attention: #E5B45F; --attention-wash: #322718; --attention-line: #5A4726; --settled: #6FCF9A; --settled-wash: #16291F; --settled-line: #2C5240; --coverage: #A0A2E8; --coverage-wash: #22233A; --coverage-line: #3E4066; --band: #2B3244; --band-ink: #EDF0F6; --band-coverage: #A0A2E8; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .7); color-scheme: dark; } /* RULE-LEVEL DARK OVERRIDES -- the three places one value cannot serve both themes. Everything else in this stylesheet reads a token and needs nothing here, so these are listed together rather than scattered. EVERY SELECTOR CARRIES THE THEME PREFIX. A bare `.st-new` inside the media query would apply on a dark SYSTEM even to a reader who chose light -- which is the exact failure the `:not([data-theme="light"])` guard on the token block exists to prevent, arriving one level down where the guard cannot see it. `.st-new` / `.st-open` its own amber, not one of the four semantics, so it cannot borrow `--attention*` without changing dark. `.kpi:hover` its shadow was ALREADY a light value -- a navy cast from when this product was light -- so dark is the theme that needs correcting here, not light. `.search-results` / a near-black dropdown shadow reads as depth on a `.acctmenu` dark page and as a smear on a white one. */ :root[data-theme="dark"] .st-new, :root[data-theme="dark"] .st-open { color: #F0A868; background: #33241A; border-color: #5C4128; } :root[data-theme="dark"] .kpi:hover { box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 16px 32px -14px rgba(0,0,0,.6); } :root[data-theme="dark"] .search-results, :root[data-theme="dark"] .acctmenu { box-shadow: 0 20px 44px -18px rgba(0,0,0,.8); } :root[data-theme="dark"] .row--missing { background: color-mix(in srgb, var(--coverage) 6%, transparent); } :root[data-theme="dark"] .track-played { background: color-mix(in srgb, var(--gold) 14%, transparent); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.6 var(--font-ui); -webkit-font-smoothing: antialiased; } a { color: inherit; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--raised); color: var(--ink); padding: 10px 14px; } /* --- chrome --------------------------------------------------------------- */ .topline { height: 4px; background: var(--band); } .topline::after { content: ""; display: block; height: 3px; background: var(--gold); } .proto { /* `#0E1016` was a near-black banner, which on a white page is a black bar. A banner is a surface separated from the page, and that is `--raised` in both themes. */ background: var(--raised); color: var(--ink-mid); font-size: 12px; letter-spacing: .04em; padding: 7px 0; } .proto .wrap { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; } .proto strong { color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; } .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 32px; } .masthead { background: var(--paper); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 60; } .masthead .wrap { display: flex; align-items: center; gap: 28px; min-height: 62px; } .brand { font-weight: 800; color: var(--ink); letter-spacing: -.01em; text-decoration: none; font-size: 17px; } .brand span { color: var(--gold); } .mastnav { display: flex; gap: 22px; font-size: 14px; } .mastnav a { color: var(--ink-mid); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; } .mastnav a:hover { color: var(--navy); } .mastnav a[aria-current="page"] { color: var(--navy); font-weight: 600; border-bottom-color: var(--gold); } .mastright { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-mid); } /* --- the operator rail ----------------------------------------------------- */ /* * IT LIVES IN THE MARGIN, WHICH IS THE ONLY PLACE IT IS FREE. * * `.wrap` is `max-width: var(--measure)` with 32px of padding, so the content * column caps at 1,436px however wide the window gets. At 2,245px that is 745px * of margin doing nothing, and a rail in it costs the tables NOTHING. * * Below that there is no spare margin to take. At 1,288px the column is already * viewport-limited to 1,224px, so every pixel the rail takes comes straight out * of a table -- and `.table-wrap` is `overflow: hidden`, so it comes out * silently. Measured on the live pages by constraining `.wrap` and counting * elements whose scrollWidth exceeds their rendered width: * * content 1,436 /concerns 0 clipped * content 1,048 /concerns 48 clipped, five distinct sentences, among them * the scope statement and the source attribution * * THAT ARITHMETIC PUT THE BREAKPOINT AT 1500 + 240 = 1740px, AND THE OWNER HAS * OVERRULED IT. Instruction 144, in their words: * * "the left hand side menu is collapsing even on my laptop view. it only * opens on a very wide screen. It needs to only collapse on mobile or iPad * size screen" * * A 13" MacBook is 1440, a 16" is 1728, a common external is 1920. So 1740 hid * the product's primary navigation behind a hamburger on almost every real * machine, including theirs -- on the surface whose weakest point was already * navigation. THE TRADE IS DELIBERATE AND IT IS NOT FREE, so here is its price, * measured on this tree rather than inherited: * * page width clipped today clipped with the rail unrecoverable * v2 /concerns 1100 15 21 0 * v2 /concerns 1512 0 15 0 * v2 /videos 1100 0 3 3 * v3 dashboard 1100-1512 0 29 29 * * WHAT MAKES IT PAYABLE ON /concerns IS RECOVERABILITY, NOT WIDTH. `950035f` * added `title` to the cells that clip, so the extra 15-21 there are readable. * `title` IS HOVER-ONLY and reaches neither a keyboard nor a touch screen, so * that is a mitigation and not a fix; it is stated here rather than relied on * silently. * * THE v3 DASHBOARD'S 29 ARE THE REAL COST AND THEY ARE NOT THIS RULE'S FAULT. * All 29 are the LEVEL column, whose whole content is one word -- "Medium". 22px * of it is an icon added to that chip by instruction 145; the rest is a column * that is 63px wide at 1280 and clips a 66px chip with no icon at all. The fix * belongs to that table, not to this breakpoint: raising the breakpoint back to * 1740 would hide the navigation again to avoid truncating a single word that a * `nowrap` would also fix. Reported to 147. * * 1100 RATHER THAN A ROUNDER NUMBER: iPad landscape is 1024, so 1100 is the * first width above every tablet. Phones and both iPad orientations keep the * drawer, which is what was asked for. */ .rail { position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail); z-index: 110; background: var(--paper); border-right: 1px solid var(--rule); display: flex; flex-direction: column; /* Off-canvas is the DEFAULT so that a viewport too narrow for the rail never depends on a media query having matched. `visibility` rather than opacity: it takes the links out of the tab order, which opacity does not. */ transform: translateX(-100%); visibility: hidden; transition: transform .16s ease, visibility .16s ease; } body.rail-open .rail { transform: none; visibility: visible; } .rail__brand { padding: 18px 20px 14px; border-bottom: 1px solid var(--rule); flex: 0 0 auto; } .rail__scroll { flex: 1 1 auto; overflow-y: auto; padding: 18px 12px 28px; } .rail__label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; padding: 0 8px; } .rail__label + .rail__label { margin-top: 22px; } .rail__group { list-style: none; margin: 0 0 22px; padding: 0; } .rail__group li { margin: 0; } .rail__group a { display: block; padding: 8px 8px; border-radius: 8px; font-size: 14px; color: var(--ink-mid); text-decoration: none; border-left: 2px solid transparent; } .rail__group a:hover { color: var(--ink); background: var(--raised); } /* The mark, the weight and the rule -- three carriers, because a colour is never the only one. The horizontal nav used exactly this pair of tokens. */ .rail__group a[aria-current="page"] { color: var(--navy); font-weight: 600; background: var(--raised); border-left-color: var(--gold); } .rail__group a:focus-visible, .rail__brand a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .rail__acting { margin: 0 0 22px; padding: 0 8px; } .rail__acting .finput { width: 100%; } .rail__note { font-size: 11.5px; line-height: 1.5; color: var(--ink-mid); margin: 8px 0 0; } .rail__note b { color: var(--ink-mid); font-weight: 600; } .railtoggle { background: transparent; border: 1px solid var(--rule-firm); border-radius: 8px; color: var(--ink-mid); font-size: 15px; line-height: 1; padding: 8px 10px; cursor: pointer; flex: 0 0 auto; } .railtoggle:hover { color: var(--ink); border-color: var(--ink-faint); } .railtoggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* No `display` here, so the `hidden` attribute still hides it. */ .railscrim { position: fixed; inset: 0; z-index: 105; background: rgba(0, 0, 0, .6); } @media (min-width: 1740px) { /* Padding on the body rather than a wrapper element: every child shifts, including the sticky masthead, and NOTHING inside the page is restructured. `position: fixed` resolves against the viewport rather than the padded body, so `.viewer` and `.vmodal` still cover the whole screen and overlay the rail -- which is the decision: a modal beside the navigation is a modal competing with it. */ body.has-rail { padding-left: var(--rail); } body.has-rail .rail { transform: none; visibility: visible; transition: none; } body.has-rail .railtoggle { display: none; } /* One wordmark on screen. `_brand.html` renders in both places and exactly one is shown at any width; above the breakpoint it is the rail's. */ body.has-rail .masthead .brand { display: none; } body.has-rail .railscrim { display: none; } } /* THE SAME RAIL, EARLIER, ON DESIGN-V3 ONLY. * * The owner's complaint in instruction 144: "the left hand side menu is collapsing * even on my laptop view. it only opens on a very wide screen. It needs to only * collapse on mobile or iPad size screen". A 13" MacBook is 1440 and a 16" is 1728, * so 1740 hid the product's primary navigation on almost every real machine. * * QUALIFIED ON `.v3-surface`, AND THAT IS THE WHOLE POINT OF THE MARKER. The block * above is unqualified and therefore reaches `base.html` too -- all 28 design-v2 * pages. Lowering it in place was measured and it is not free: * * page width clipped before after unrecoverable * v2 /concerns 1100 15 21 0 * v2 /concerns 1512 0 15 0 * v2 /videos 1100 0 3 3 * * design-v2 is the product until it is retired, so it keeps the arithmetic -- * `viewport - rail >= measure`, 1500 + 240 = 1740 -- and every one of those rows * goes to zero. design-v3 takes the narrower breakpoint deliberately, and pays for * it out of its own tables. * * 1100 rather than a rounder number: iPad landscape is 1024, so this is the first * width above every tablet. Phones and both iPad orientations keep the drawer. */ @media (min-width: 1100px) { body.v3-surface.has-rail { padding-left: var(--rail); } /* THE RAIL ENDS WHERE ITS CONTENT ENDS. 198, owner decision 4, in the owner's words: "make the rail shorter, don't fill the void." * * WHAT WAS WRONG. `.rail` above is `position: fixed; top: 0; bottom: 0`, so it was * viewport height on every page whatever it held. After 195 took the v3 rail from * eight entries to two, that measured 919.4px of empty column below the last entry * at a 1000px-tall viewport -- and 1219.4px at 1400. Two entries in the top sixth * of a full-height panel. * * WHY THE OBVIOUS REPAIR WAS REJECTED. Adding entries back cannot remove the void: * it is `bottom: 0`, so it scales with the viewport and twelve entries would still * leave several hundred pixels at 1440. And four of the six entries 195 removed -- * Channels, Findings, Analysis, Events -- have no v3 route to point at; restoring * them pointing at design-v2 would reverse the owner's own ruling to get there. * Adding entries was the wrong repair for a right complaint. * * WHAT IS NOW TRUE. `bottom: auto` makes the height the content's, and * `max-height: 100dvh` keeps it bounded so a rail that ever outgrows the screen * scrolls in `.rail__scroll` rather than overflowing. `dvh` and not `vh`: mobile * browsers report `100vh` taller than the visible viewport, which is the one case * the bound exists for. * * `min-height: 0` ON THE SCROLLER, WITHOUT WHICH THE BOUND DOES NOTHING. A flex * item's `min-height` is `auto`, meaning its content size, so `flex: 1 1 auto` * refuses to shrink below its content and the rail would overflow `max-height` * instead of scrolling inside it. The bound and this line are one mechanism. * * A PANEL WITH A BOTTOM EDGE, NOT A FULL-HEIGHT DIVIDER. `.rail`'s `border-right` * now ends with the rail, so it is a stub rather than the full-height rule that * separated navigation from content. Keeping that line would need a second element * or a body background-image, and a rule below a rail that has ended separates * nothing from nothing. So the rail closes with `border-bottom` and reads as a * panel. Below it the body ground shows through a column that is still * `padding-left: var(--rail)` wide; that seam is deliberate and is checked in both * themes, because `--paper` and the ground differ. * * SCOPED, AND THE SCOPE IS THE POINT. The block above this one is unqualified and * reaches `base.html` -- all 28 design-v2 pages, whose rails stay viewport height. * `943e46b` made exactly that mistake once. * * MERGED INTO THE RULE THAT WAS ALREADY HERE, NOT ADDED AS A SECOND ONE. The first * version of this put `bottom: auto` in its own * `body.v3-surface.has-rail .rail { }` beneath the drawer-reset rule, and * `test_the_v3_family_defines_each_selector_once` refused it: two rules with the * same selector in the same at-rule context, where the later silently overrides the * earlier and any reason written above the earlier one stops being enforced. A * selector's identity is (at-rule context, selector), and this comment is exactly * the kind of reason that would have been the thing silently unenforced. */ body.v3-surface.has-rail .rail { transform: none; visibility: visible; transition: none; bottom: auto; max-height: 100dvh; border-bottom: 1px solid var(--rule); } body.v3-surface.has-rail .railtoggle { display: none; } body.v3-surface.has-rail .masthead .brand { display: none; } body.v3-surface.has-rail .railscrim { display: none; } body.v3-surface.has-rail .rail__scroll { min-height: 0; } } main { padding: 44px 0 90px; } /* --- section furniture ---------------------------------------------------- */ .eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } h1.display { font-size: 40px; line-height: 1.1; font-weight: 800; color: var(--navy); margin: 0 0 14px; letter-spacing: -.02em; } .lede { font-size: 16.5px; line-height: 1.62; color: var(--ink-mid); max-width: 74ch; margin: 0; } .keyline { border-left: 5px solid var(--gold); padding: 4px 0 4px 20px; margin: 26px 0 0; font-size: 20px; line-height: 1.45; font-weight: 700; color: var(--navy); max-width: 82ch; } .keyline .quiet { font-weight: 500; color: var(--ink-mid); font-size: 16px; display: block; margin-top: 6px; } section { margin-top: 56px; } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; } /* A section head carrying only a right-aligned control -- no title, no rule above it. Used where an action belongs to the table BELOW it rather than to a section of its own, so it must not open a visual section it does not have. */ .sec-head--tight { margin-bottom: 10px; align-items: center; } h2.sec { font-size: 23px; font-weight: 750; color: var(--navy); margin: 0; letter-spacing: -.01em; } .sec-note { font-size: 13.5px; color: var(--ink-mid); margin: 5px 0 0; } /* TWO CLASSES THE TEMPLATES HAVE ALWAYS ASSUMED AND THE STYLESHEET NEVER HAD. `quiet` is used 33 times across the live pages and had a rule only INSIDE `.keyline` and `.claimline`. Everywhere else -- the six-cell facts strip on the video page, the scope line on every contribution chip, the Actions meta row -- it inherited full `--ink`, so "Not connected" printed at exactly the brightness of a recorded value. That is not a styling miss: the house rule is that "not connected" must read as muted TEXT, and a gap rendered at full strength reads as data. `small` had no rule anywhere and is used twice on the video page, both times for the sentence that says a thing is NOT a clearance. Both were invisible to the class guard because both were sitting on its `_NOT_STYLED` exemption list, described there as "behaviour hooks or bare HTML, not styled components". They are neither: each names a visual rank. The exemption is removed with this rule. */ .quiet { color: var(--ink-mid); } .small { font-size: 12.5px; color: var(--ink-mid); } /* --- KPI cards ------------------------------------------------------------ */ .kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } @media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .kpis { grid-template-columns: 1fr; } } .kpi { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; box-shadow: var(--shadow); overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; display: flex; flex-direction: column; } /* THE SHADOW HERE WAS ALREADY A LIGHT-THEME VALUE. `rgba(18,41,74,…)` is a navy cast left over from when this product was light, and it is correct on white -- so this is the one place where DARK is the theme that needs the override. */ .kpi:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(18,41,74,.06), 0 16px 32px -14px rgba(18,41,74,.24); } .kpi:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .kpi-rule { height: 4px; background: var(--rule-firm); } .kpi--material .kpi-rule { background: var(--material); } .kpi--attention .kpi-rule { background: var(--attention); } .kpi--coverage .kpi-rule { background: var(--coverage); } /* A CLASS NAMED NEUTRAL PAINTED THE BRAND ACCENT. Under gold that read as "notable" and was tolerable; syncRed is a high-alarm colour and cannot carry that second meaning, so six inert cards -- "Channels analysed", "Areas concluded", "Frames retained" among them -- wore the same value as the primary button a reader is meant to press. The accent was doing two jobs: brand-and-press, and section emphasis. Only the first transfers. This is the second one, and it is now the grey the unmarked `.kpi-rule` already uses -- stated explicitly rather than removed, because the class still says something true about the card. */ .kpi--neutral .kpi-rule { background: var(--rule-firm); } .kpi-body { padding: 18px 20px 20px; display: flex; flex-direction: column; height: 100%; } .kpi-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mid); margin: 0 0 12px; min-height: 2.6em; line-height: 1.3; } .kpi-figure { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-height: 46px; } .kpi-num { font-size: 42px; line-height: 1; font-weight: 800; color: var(--navy); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .kpi--material .kpi-num { color: var(--material); } .kpi--coverage .kpi-num { color: var(--coverage); } .kpi-unit { font-size: 13px; font-weight: 650; color: var(--ink); line-height: 1.3; } .kpi-sub { font-size: 12.5px; color: var(--ink-mid); margin: 9px 0 0; line-height: 1.45; min-height: 2.9em; } .kpi-trend { margin-top: auto; padding-top: 14px; font-size: 12px; display: flex; align-items: center; gap: 6px; color: var(--ink-mid); } .kpi-trend .arrow { font-weight: 700; } .trend--worse .arrow { color: var(--material); } .trend--better .arrow { color: var(--settled); } .trend--neutral .arrow { color: var(--ink-mid); } .kpi-open { font-size: 11.5px; color: var(--gold); font-weight: 700; margin-top: 10px; letter-spacing: .03em; } /* --- generic cards -------------------------------------------------------- */ .cards { display: grid; gap: 16px; } .cards--2 { grid-template-columns: 1fr 1fr; } .cards--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .cards--2, .cards--3 { grid-template-columns: 1fr; } } .card { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 22px; box-shadow: var(--shadow); } .card-top { border-top: 4px solid var(--gold); border-radius: 12px 12px 0 0; } .card-top--navy { border-top-color: var(--band); } .card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 8px; } .card p { margin: 0; font-size: 14px; color: var(--ink-mid); line-height: 1.6; } .card .tag { display: inline-block; background: var(--band); color: var(--band-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; margin-bottom: 12px; } .card .tag--gold { background: var(--gold-soft); color: var(--gold); } /* --- pattern callout ------------------------------------------------------ */ .pattern { background: var(--gold-wash); border: 1px solid var(--gold-soft); border-radius: 12px; padding: 22px 24px; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; } @media (max-width: 800px) { .pattern { grid-template-columns: 1fr; } } .pattern h3 { margin: 0 0 6px; font-size: 18px; color: var(--navy); font-weight: 750; } /* WAS PALE GOLD, ORPHANED BY THE RETUNE. Explanatory prose under a heading -- "this concern was not recorded about this video alone" -- so it takes the ink ramp's secondary step, not the accent. Instruction 43's acceptance check 3 greps for exactly this literal and was failing. */ .pattern p { margin: 0; color: var(--ink-mid); font-size: 14.5px; max-width: 76ch; } .pattern .count { font-size: 13px; color: var(--gold); margin-top: 10px; font-weight: 650; } /* --- tables --------------------------------------------------------------- */ .table-wrap { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); } /* Fixed layout on every live grid. Removing the horizontal scroll revealed that these tables never actually fit -- they had been overflowing all along and the scrollbar was hiding it, so the last column was clipped the moment the scroll went away. Fixed layout makes the columns share the page instead of demanding more of it, and a cell that cannot fit truncates visibly rather than falling off the edge. */ table.grid { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; } table.grid td { overflow-wrap: anywhere; } /* A chip in a narrow cell wraps rather than being sliced by the column edge. */ table.grid td .chip { white-space: normal; } /* The first column carries the name and gets the room to show it; the last carries the control and takes exactly what the control needs. */ table.grid th:first-child, table.grid td:first-child { width: 22%; } /* ...UNLESS the first column is a selection checkbox. The rule above assumed the first column carries the name. On the prototype channel table it is a checkbox, which was handed 22% of the table and squeezed the channel name to about five characters -- "Nordvi k Advent ure". A checkbox column takes the width of a checkbox, and the column after it is the one that carries the name. */ table.grid th:first-child:has(input[type="checkbox"]), table.grid td:first-child:has(input[type="checkbox"]) { width: 42px; } table.grid th:first-child:has(input[type="checkbox"]) + th, table.grid td:first-child:has(input[type="checkbox"]) + td { width: 22%; } /* A real width, not 1%. Under fixed layout a percentage that small collapses the column and the button spills past the table edge -- the same clipping, reintroduced by the fix for it. */ /* Wide enough for the longest control any grid puts here -- "Open concerns" on the prototype channel table. At 92px it wrapped to three lines. Fixed layout needs a real number; `width: 1%` collapses the column instead of shrinking to fit the way it would under auto layout. */ table.grid th:last-child, table.grid td:last-child { width: 136px; white-space: nowrap; } table.grid td:last-child .btn, table.grid td:last-child .chip, table.grid td:last-child a, table.grid td:last-child button { white-space: nowrap; } /* Under fixed layout a `nowrap` cell wider than its column does not widen the column, it OVERFLOWS it -- channel names were being drawn on top of the published dates. It has to clip. */ table.grid td.nowrap, table.grid td .cell-sub, table.grid td .cell-title { overflow: hidden; text-overflow: ellipsis; } table.grid td.nowrap { max-width: 0; } table.grid thead th { background: var(--band); color: var(--band-ink); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 12px 16px; white-space: nowrap; } table.grid td { padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: middle; } table.grid tbody tr:last-child td { border-bottom: 0; } table.grid tbody tr.rowlink { cursor: pointer; transition: background .1s ease; } table.grid tbody tr.rowlink:hover { background: var(--raised); } table.grid tbody tr.rowlink:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; } .cell-title { font-weight: 650; color: var(--navy); } .cell-sub { font-size: 12.5px; color: var(--ink-mid); margin-top: 3px; } .num { text-align: right; font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } /* --- severity + status chips --------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 999px; border: 1px solid; } .chip .dot { font-size: 9px; line-height: 1; } .chip--material { color: var(--material); background: var(--material-wash); border-color: var(--material-line); } .chip--attention { color: var(--attention); background: var(--attention-wash); border-color: var(--attention-line); } .chip--settled { color: var(--settled); background: var(--settled-wash); border-color: var(--settled-line); } .chip--coverage { color: var(--coverage); background: var(--coverage-wash); border-color: var(--coverage-line); } .chip--plain { color: var(--ink-mid); background: var(--raised); border-color: var(--chip-edge); } /* --- dashboard scan-date quick links -------------------------------------- */ /* LINKS INTO the queue, not filters of the dashboard. The queue's own control is a