* { box-sizing: border-box; } /* ==================================================================== * * TOKENS -- the vocabulary every rule below spends from. * * Added 2026-08-06 as the first step of the UI pass. * * * * Before this block this file had ZERO custom properties (bar * * `--tenant-accent`, set on `.topbar`) and carried 22 font sizes, 28 * * spacings, 16 radii, 11 shadows and 106 distinct hex values -- each * * one typed by eye at its own call site, which is exactly how a * * stylesheet goes from 14KB to 106KB in a day. * * * * THE CONVERSION IS NOW DONE -- 2026-08-07. This block used to end * * "only a handful of rules below have been converted so far", and * * that was the whole problem: a declared scale nobody spends from is * * a second vocabulary, not a smaller one. 174 font sizes, 346 * * spacings, 73 radii and 9 shadows now read from the tokens above. * * What that actually reduced, measured before and after: * * * * font-size 22 distinct -> 10 tokens + 5 responsive literals * * border-radius 17 distinct -> 4 tokens, no literals at all * * spacing 25 scalars -> 9 tokens + 1px, and three real * * layout offsets (70/80/202px) * * elevation 11 shadows -> 3 tokens + the rings and the glow, * * which are not elevation and never were * * * * The four sizes doing ONE job are the clearest thing the audit * * found: uppercase micro-labels were set at 9px, 9.5px, 10px and * * 10.5px in different corners of the same product. They are all * * `--fs-eyebrow` now, which is also the accessibility answer -- 9px * * tracked uppercase is not legible type for this audience. * * * * THE FIVE REMAINING LITERAL FONT SIZES ARE ALL INSIDE `@media`, and * * they stay literal on purpose. A responsive override is a platform * * constraint, not a step on a type scale: the 16px on phone text * * inputs is the iOS zoom threshold, not a size somebody chose. The * * SIXTH was the phone `h1`, and it was never a platform constraint -- * * it is a step on the scale (M3 Headline Small), so it reads from * * `--fs-xl` now. * * * * If you are about to type a literal below, the value you want is * * probably already here. If it genuinely is not, add it HERE. * * * * DELIBERATELY ABSENT: `--tenant-accent`. It is set on `.topbar` and * * read with a fallback in three places, so defining it at `:root` * * would silently change what those fallbacks resolve to. Moving it to * * `` is its own change (it is a visible one, for one tenant). * * ==================================================================== */ :root { /* ---- SCHEME. One line, and it is a bug fix rather than a step towards a dark mode. This app declared no `color-scheme` at all, so on a machine set to dark the BROWSER decided for the parts it owns: form controls, scrollbars, the native `` ends up rendering pale text on a dark ground inside a white card -- unreadable, and invisible to anybody developing on a light machine. `light` states what is true today. A real dark mode is a SECOND SET OF VALUES for the colour roles above under `prefers-color-scheme: dark`, and it is not startable yet: 408 hex literals and 22 `rgb()` calls still sit outside `:root` in this file, plus ~190 more in the modules that render HTML, so a token flip would repaint the roles and leave the literals light. Finishing the colour conversion the way the type, space and radius conversions were finished is the prerequisite, and it is its own piece of work. When it lands, change this to `light dark` in the same commit -- declaring both before the values exist is worse than declaring neither. */ color-scheme: light; /* ---- TYPE. Ten steps to replace twenty-two. No half-pixels: they snap to device pixels inconsistently, so the same label renders a pixel taller on one monitor than another. MAPPED ONTO MATERIAL DESIGN 3, 2026-08-07, per the instruction to default to Google style on a taste call. The SPECIFICATION was adopted, not Material Web's custom elements -- those would add a build step and a JS dependency to every page for a project Google has deprioritised, where the type scale is free and authoritative. The mapping is mostly an identity, which is why almost nothing below moved. M3's steps, and what each of ours is: --fs-eyebrow 11 = Label Small (exact) --fs-xs 12 = Body Small / Label Medium (exact) --fs-sm 13 - no M3 step; ours, for dense table cells --fs-base 14 = Body Medium / Label Large / Title Small --fs-md 16 = Body Large / Title Medium (exact) --fs-lg 18 - no M3 step; sits where Title Large (22) would --fs-xl 24 = Headline Small (exact) --fs-display 30 - between Headline Medium (28) and Large (32) --fs-headline 32 = Headline Large (exact) <- NEW --fs-hero 44 ~ Display Medium (45) WHAT M3 ACTUALLY CHANGED HERE: the scale topped out at 24px and `h1` sat on it, so every page in the product opened at Headline SMALL -- the quietest step M3 offers for a page title -- and nothing established hierarchy at a glance. `h1` is Headline Large now, and the space above it grew with it (see the `h1` rule): a bigger heading in the same 4px of clearance is a cramped page shouting, not a hierarchy. `--fs-display`'s NAME PREDATES THIS MAPPING and does not mean M3's Display role. It is the big-numeral size (`.stat .value`, `.lp-title`, `.lg-stat`); M3 would call 30px a Headline. Renaming it would touch every call site to gain nothing, so it is documented instead. If you want M3's Display, that is `--fs-hero`. CORRECTED 2026-08-07 (earlier the same day): these comments named the wrong headings, and a comment on a scale is what the next person types a literal against. `h3` is `--fs-base` now that it has a rule at all -- it had none, so it fell through to ~16.4px browser default and rendered LARGER than the h2 above it. ---- */ --fs-eyebrow: 11px; /* uppercase micro-labels, badges, counts */ --fs-xs: 12px; /* filter labels, dense chrome */ --fs-sm: 13px; /* secondary + meta text, table cells */ --fs-base: 14px; /* body, nav, buttons, form controls */ --fs-md: 16px; /* card titles, .ws-name */ --fs-lg: 18px; /* h2, topbar brand, .lp-name, phase nums */ --fs-xl: 24px; /* h1 on a phone, .fin-tile figures */ --fs-display: 30px; /* .stat .value, .lp-* */ --fs-headline: 32px; /* h1, and nothing else */ --fs-hero: 44px; /* .fin-hero-value, and nothing else */ --lh-tight: 1.2; /* display and headings */ --lh-snug: 1.35; /* dense UI: cells, pills, bubbles */ --lh-body: 1.5; /* default */ --lh-prose: 1.6; /* long-form paragraphs */ --ls-tight: -0.015em; /* display only */ --ls-caps: 0.05em; /* the one tracking value for small caps */ /* ---- MEASURE. `ch`, not `em`: `em` measures the FONT SIZE, `ch` measures the glyph, so only one of the two actually tracks characters. The existing em caps all land near double. ---- */ --measure: 68ch; --measure-short: 46ch; /* ---- SPACE. A 4px grid with one half-step at 6px for inline and icon gaps. Nine tokens to replace twenty-eight values. ---- */ --sp-05: 2px; --sp-1: 4px; --sp-15: 6px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* ---- NEUTRALS. 900/700/600/400/300/200/100 are the exact values already carrying most of the greys in this file; 800/500/050 are the three rungs that were missing, which is why so many one-off greys were mixed by hand between them. ---- */ --n-900: #1f2933; --n-800: #323f4b; --n-700: #3e4c59; --n-600: #52606d; --n-500: #616e7c; --n-400: #7b8794; --n-300: #9aa5b1; --n-200: #cbd2d9; --n-100: #e4e7eb; --n-050: #f5f7fa; /* ---- SURFACES AND TEXT. THE RULE: `--n-400` and lighter are NEVER a text colour. They are borders, dividers, icons and dot fills. Every declaration that broke that rule failed WCAG AA, several of them badly. ---- */ --bg-app: #f7f8fa; --bg-surface: #fff; --bg-sunken: var(--n-050); --bg-hover: #f2f6fc; /* what tr.rowlink:hover already uses */ --text: var(--n-900); --text-2: var(--n-700); --text-muted: var(--n-500); /* 5.21:1 on white, 4.90:1 on --bg-app */ --border: var(--n-200); --border-subtle: var(--n-100); --border-strong: var(--n-400); /* 3.66:1 -- clears 1.4.11 for a control boundary, where #d5dbe3 was 1.39:1 */ /* ---- BRAND. Tenant-neutral; the per-tenant colour stays `--tenant-accent`, which both tenants set for themselves. ---- */ --brand: #1f3864; /* 11.62:1 on white */ --brand-hover: #2b4a80; --brand-active: #182c50; --brand-weak: #e8edf6; --link: #2f5b8c; /* 7.01:1; already in the file, as .ub-more */ /* ---- STATUS. Each is a TEXT tone at >= 4.5:1 plus a ground and a border. Colour is never the only signal: every use keeps its word and, where one exists, its border-style. ---- */ --ok-text: #2e7d32; --ok-ground: #d9ead3; --ok-border: #a8cfa8; --warn-text: #8a6d00; --warn-ground: #fff2cc; --warn-border: #e8b931; --danger-text: #b42318; --danger-ground: #f4cccc; --danger-border: #e0a49c; --info-text: var(--link); --info-ground: #d9e2f3; --info-border: #b8c8e6; /* The intelligence rail's PROPOSAL tint is a spatial boundary, not a status. Folding it into `warn` would make a proposal look like a warning, so it keeps its own pair. */ --proposal-ground: #fbf9f4; --proposal-rule: #b7791f; /* ---- RADII. Four to replace sixteen. 999px rather than 50%, because 50% makes an ellipse of anything that is not square. ---- */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-full: 999px; /* ---- ELEVATION. Three to replace eleven, all on one hue. Four of the eleven were the same shadow retyped with the alpha nudged. ---- */ --sh-1: 0 1px 2px rgba(31,56,100,.06), 0 1px 3px rgba(31,56,100,.08); --sh-2: 0 2px 4px rgba(31,56,100,.06), 0 4px 12px rgba(31,56,100,.10); --sh-3: 0 4px 8px rgba(31,41,51,.07), 0 14px 38px -8px rgba(31,41,51,.22); --ring: 0 0 0 3px rgba(31,56,100,.30); /* ---- MOTION. Interaction states ONLY. `app_feedback.py` owns its own timings and nothing here may reach them. ---- */ --dur-1: 120ms; --dur-2: 200ms; --ease: cubic-bezier(.2,0,.2,1); /* ---- LAYOUT ---- */ --page-max: 1240px; --page-wide: 1680px; --gutter: 24px; } /* ---- Links and focus, the two global primitives this file never had. THERE WAS NO `a { }` RULE IN THIS STYLESHEET. Every bare content link rendered at the browser default -- #0000EE, and #551A8B once visited. Purple-means-read is useful on the open web and actively misleading in a tool where you open the same client forty times a day, so `:visited` is pinned to the same colour rather than left to the browser. Every scoped nav/tab/tile rule below sets its own colour and text-decoration at a higher specificity, so this sits underneath them. THE FOCUS RING is written with `:where()`, which contributes ZERO specificity -- so all seven bespoke rings already in this file still win, wherever they are in source order. Nothing here suppresses an outline; there was simply never a designed one, and a keyboard user was following the browser default across 147 interactive selectors. */ a { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; } a:visited { color: var(--link); } a:hover { text-decoration-thickness: 2px; } :where(a, button, .btn, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } /* On the navy top bar a navy ring is invisible. */ .topbar :where(a, button, summary):focus-visible { outline-color: #fff; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; margin: 0; background: #f7f8fa; color: #1f2933; font-size: var(--fs-base); line-height: 1.5; /* Mobile browsers inflate text in some orientations once a viewport is declared, which would silently change every measured size below. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ---- THE MAIN NAV IS PINNED, ON EVERY VIEW ------------------------------ Direct instruction 2026-08-08, from the browser: *"the main nav scrolls, it should always be pinned on every view including hatch."* So this is a change to the SHELL and not to Hatch -- it is the one rule every page in the product goes through, which is the only placement that makes "every view" true without each new route remembering it. `sticky` and not `fixed`, and the difference is the whole reason this is safe to apply globally. A fixed bar leaves the page's first ~64px underneath it and every surface in the app would need a compensating `padding-top`; a sticky bar occupies its own space in flow, so nothing below it moves and no other rule has to know the bar exists. AN OPEN NAV PANEL MUST NOT BE CLIPPED, and it is not. `NAV_MODE` defaults to `grouped` now, so the bar holds `

` panels that open downward: they are `.tenant-menu`, `position: absolute`, hanging out of the bar's box. Nothing here sets `overflow`, so there is nothing to clip them -- the trap would have been reaching for `overflow: hidden` to tidy the bar's corners, and this comment is the reason not to. The panels still close each other by themselves: they share `name="navgroup"` (`nav._panel`), which is a browser behaviour and needs no CSS. THE `z-index` IS LOAD-BEARING AND NOT DECORATION. Sticky is a positioned element, and Hatch's work column is sticky too -- with both at `z-index: auto` the column paints over the bar, because they tie and the later one in the document wins. 50 puts the bar above every surface and below `.cp-bar` (9999) and `.cp-note` (9998), which are meant to sit above everything including this. It makes the bar a stacking context, which is why `.tenant-menu`'s `z-index: 60` is now scoped inside it rather than competing with the page -- that is fine and in fact tidier, since a dropdown belongs to its bar. NOT PINNED ON PAPER (see `@media print`) and NOT PINNED ON A PHONE (see the 700px block): below 700px the nav is a scrolling row and the bar is one 44px line, but the tenant chip and the signed-in name still wrap it onto two or three rows on a narrow screen, and a permanently parked third of a phone screen is not what "pinned" was asked for. */ .topbar { display: flex; align-items: center; gap: var(--sp-4); background: #1f3864; color: #fff; padding: var(--sp-3) var(--sp-6); position: sticky; top: 0; z-index: 50; } .topbar img { width: 40px; height: 40px; border-radius: var(--r-md); background: #fff; padding: var(--sp-1); } .topbar .brand { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; margin-right: var(--sp-4); } /* The mark and the product name became ONE link to /home, 2026-08-06, when the landing page arrived: clicking the logo to get back to the front is the convention people already try, and it means the page needs no nav item of its own -- one that appeared for every tenant would be a permanent invitation to a page you only need at the start of a session. Wrapping them re-creates the 14px the topbar's own `gap` used to put between two separate flex items. */ .topbar .topbrand { display: flex; align-items: center; gap: var(--sp-4); color: inherit; text-decoration: none; } .topbar .topbrand:hover .brand, .topbar .topbrand:focus-visible .brand { text-decoration: underline; } .topbar nav { display: flex; gap: var(--sp-1); flex: 1; } /* THE BAR WRAPS AT EVERY WIDTH, NOT ONLY BELOW 900px, AND THAT BREAKPOINT IS WHY THIS DEFECT SURVIVED NINE ZOOM STEPS. The 900px block far below already solved this exact problem and explains it exactly right: flex items cannot shrink below min-content, so a nowrap `.topbar` has a hard minimum of about 1,450px and everything past it is pushed out of the bar and off the screen. That block is gated on the VIEWPORT, and a reader who scales TEXT does not change the viewport -- `html { font-size: 32px }` multiplies the bar's min-content to ~2,900px while the window still reports 1,440px, so the rule that would have saved it never fires. BROWSER ZOOM HIDES IT AND TEXT SCALING FINDS IT, and the distinction is the whole reason nobody caught this: zoom multiplies every CSS pixel AND divides the viewport, so at 200% zoom the window reports 720px, the 900px block fires, the bar wraps, and a px layout survives by accident. Measured on the text ladder 100/125/150/175/200/250 at 1440x900, 1152x720 and the shell's own declared minimum 1001x620, with `NAV_MODE=grouped` (the default, and what production runs): before this rule `Sign out` left the bar and the viewport at 200%/1001x620 for a 22-character name and the document gained 106px of sideways scroll; at 250% it failed at 1152x720 as well. It is the top bar, so it is EVERY page, and the control it loses is the one that ends a session. THREE RULES AND EACH IS LOAD-BEARING. `flex-wrap` on the bar lets the signed-in name drop to its own row instead of being pushed off the end; `min-width: 0` on the nav is what lets a flex item shrink past min-content at all, and without it the wrap happens but the nav still overflows its own row; `margin-left: auto` keeps the name hard right on the row it lands on, which is where the previous layout put it by consuming the leftover space. COSTS NOTHING AT 100%. Content that fits does not wrap, so every viewport at every ordinary text size renders byte-identically to before. Verified across the same eighteen measurements. */ .topbar { flex-wrap: wrap; row-gap: var(--sp-2); } .topbar nav { flex-wrap: wrap; min-width: 0; } .topbar .who { min-width: 0; margin-left: auto; } .topbar nav a { color: #c9d4e6; text-decoration: none; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); font-weight: 600; font-size: var(--fs-sm); } .topbar nav a.active, .topbar nav a:hover { background: rgba(255,255,255,0.14); color: #fff; } .topbar nav a .soon { font-size: var(--fs-eyebrow); background: #d9a441; color: #1f2933; border-radius: var(--r-full); padding: 1px var(--sp-15); margin-left: var(--sp-15); vertical-align: middle; } /* Nav tags marking the two client surfaces while both exist. Quieter than .soon: these are orientation, not an announcement, and they disappear when the legacy page is retired. */ .topbar nav a .navtag { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .04em; border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-full); padding: 0 var(--sp-15); margin-left: var(--sp-15); vertical-align: middle; opacity: .8; } /* HOW MANY FLAGS ARE OPEN, next to the Flags item. Per direct instruction 2026-08-06, and rendered by `flag_tally.nav_badge`. NOT `.pill red`, which is what the Admin dual-write badge uses. That badge means "something is wrong"; this one means "there is work", and work is the normal state of a review queue -- a permanently red nav bar is a nav bar people stop reading, which is the same failure as having no badge at all. So it borrows `.navtag`'s quiet treatment and adds only a filled ground and tabular figures, so 9 and 41 do not shift the label beside them. `.unknown` is the "?" state: the count is unavailable. Deliberately the SAME shape and a lighter weight, because it is not an alarm either -- it is an admission, and the title attribute carries the reason. */ /* THE SAME BADGE IN THE TWO PLACES IT CAN APPEAR, grouped rather than copied. With `NAV_MODE=grouped` a member's count is rendered on the GROUP'S `

` so it is readable with the panel shut -- and a summary is not an ``, so the rule below styled the flat-nav copy and left the grouped one unstyled. An unstyled `.navcount` is not broken, it is INVISIBLE: white-on-navy text with no pill behind it, which is the precise failure the `.unknown` sibling exists to stop somebody shipping. `> summary` and not a descendant combinator: the copy inside the OPEN menu is a dark-on-white pill with its own rule further down this file, and a descendant selector here would reach it and repaint it for a navy bar it is not on. */ .topbar nav a .navcount, .topbar nav .nav-group > summary .navcount { font-size: var(--fs-eyebrow); font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); color: #fff; border-radius: var(--r-full); padding: 0 var(--sp-15); margin-left: var(--sp-15); vertical-align: middle; } .topbar nav a .navcount.unknown, .topbar nav .nav-group > summary .navcount.unknown { font-weight: 600; opacity: .75; } /* ---- Client Workspace: the three-zone shell ------------------------------ Grid, not flex: the two rails hold their width while only the centre reflows, which is the whole point of a persistent context rail -- it must not move as you change panes. */ .ws { display: grid; grid-template-columns: 260px minmax(0,1fr) 320px; gap: var(--sp-4); align-items: start; } /* JUGGERNAUT COMMUNICATIONS widens the left column, because the intelligence panel is the headline surface there and 260px does not hold a category, four facts, a move and the reason for it. Hatch's own proportions are unchanged -- this is scoped to the class only the comms shell adds. THE `min-width` BOUND IS LOAD-BEARING AND IT IS A CORRECTION. The obvious form is `body:has(.ws-hatch) .ws.ws-coach { ... }` placed after the rule above, on the reasoning that avoiding `!important` leaves the ≤1200px and ≤900px breakpoints free to win. THEY WOULD NOT. Those breakpoints target `.ws`, specificity (0,1,0); that selector is roughly (0,3,1), and SPECIFICITY BEATS SOURCE ORDER -- so it would win INSIDE both media queries and the page would stop stacking on a phone, which is the exact failure the no-`!important` rule was meant to prevent. Bounding it above the first breakpoint means it does not exist where they apply, so there is nothing to out-rank. */ @media (min-width: 1201px) { .ws.ws-coach { grid-template-columns: minmax(0,28%) minmax(0,1fr) minmax(0,19%); } } .ws-rail, .ws-main, .ws-intel { min-width: 0; } .ws-rail .card, .ws-intel .card { padding: var(--sp-3) var(--sp-4); } .ws-rail h2 { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: var(--sp-4) 0 var(--sp-1); } .ws-rail h2:first-child { margin-top: 0; } /* The client's name is the page's `h1` as of this pass -- it was a `

`, so every one of the six client panes rendered with NO h1 at all and its first heading was "Stage". Sized here rather than inherited, because 24px navy in a 260px rail would out-shout the pane the person came to read. */ .ws-name { font-size: var(--fs-md); font-weight: 700; margin: 0 0 var(--sp-05); } /* "(derived)" beside a rail heading: the heading is small caps, the note is not. */ .ws-h-note { text-transform: none; letter-spacing: 0; } .ws-more { margin-top: var(--sp-3); } /* CONTACT & DETAILS GETS THE SAME HOVER AFFORDANCE EVERY OTHER DISCLOSURE HAS. Added 2026-08-08 (U1). This was reported as "Contact & Details does not expand", and it always did -- it is a native

that nothing clips, no rule sets `pointer-events` on, and `app_feedback`'s capture-phase click handler does not match (it looks for a[href], button and input[type=submit]; a

is none of those). What it did not do was LOOK clickable: `.conv-fold`, `.set-fold`, `.ff-detail`, `.ff-canned-box`, `.itfw-nofile` and `.tenant-chip` all set `cursor: pointer` on their summary, and this was the only one that did not. Muted grey text with an arrow cursor reads as a label. "Does not expand" and "gives no sign it can be clicked" are the same report from somebody using the page. */ .ws-more > summary { cursor: pointer; } .ws-more-body { margin-top: var(--sp-15); } .ws-legacy { margin: var(--sp-3) 0 0; } .ws-notyet-stacked { margin-bottom: var(--sp-3); } .ws-stage { display: flex; gap: var(--sp-15); align-items: center; margin: var(--sp-1) 0 var(--sp-05); } /* SHAPE, NOT ONLY COLOUR. A filled green dot and an empty grey one differed by hue alone, which is the one thing this audience cannot rely on -- and five dots in a row is exactly the pattern somebody reads at a glance and never hovers. The reached steps are filled and ringed, the unreached ones are a hollow outline, so the count survives greyscale and a printout. The rail also names the stage in words underneath, and `.ws-stage` carries an `aria-label` saying which of five it is. */ .ws-dot { width: 9px; height: 9px; border-radius: var(--r-full); background: #fff; border: 2px solid #cbd2d9; box-sizing: border-box; } .ws-dot.on { background: #2e7d32; border-color: #1e5b21; } /* The sentence beside a lane count taken from legacy `claim_type`, which `EXT-229` §43 requires be labelled `legacy_not_authoritative`. It arrived in `55d44e9` with NO CSS RULE, which `test_module_split` correctly failed -- a class rendered with no rule renders unstyled, and an unstyled caution reads as body copy. Small, muted and set off, because it is the reason a number above it is not an answer. */ .ws-legacy-note { font-size: var(--fs-eyebrow); line-height: 1.4; margin-top: var(--sp-15); padding-left: var(--sp-2); border-left: 2px solid #e4e7eb; } .ws-tabs { display: flex; gap: var(--sp-05); border-bottom: 2px solid #e4e7eb; margin-bottom: var(--sp-3); flex-wrap: wrap; } .ws-tabs a { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); font-weight: 600; color: #52606d; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; } .ws-tabs a:hover { color: #1f3864; } .ws-tabs a.on { color: #1f3864; border-bottom-color: #1f3864; } .ws-tabs a .cnt { font-size: var(--fs-eyebrow); background: #e4e7eb; color: #52606d; border-radius: var(--r-full); padding: 1px var(--sp-15); margin-left: var(--sp-15); } /* Everything in the intelligence rail is a PROPOSAL. The tint is the boundary -- see DESIGN_CLIENT_WORKSPACE.md: a spatial rule a developer cannot accidentally violate beats a pill somebody has to notice. */ .ws-intel .card { background: #fbf9f4; border-left: 3px solid #b7791f; } /* The rail's own heading, which was five declarations in a `style=` attribute repeated on every card in `workspace_routes` -- twelve copies across the six panes, carrying a raw 11px and a raw #b7791f that the token pass could not see because they were in HTML rather than in this file. Same shape as `.ws-rail h2` above, in the rail's amber rather than the muted grey, because these headings label PROPOSALS and the left rail labels facts. */ .ws-intel h2 { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .06em; color: #b7791f; margin: 0 0 var(--sp-1); } /* ---- The utility rail (U10) -------------------------------------------- The rail was two fixed cards stacked in one column and both were always rendered, so it spent most of its height on whichever one you were not reading. It now carries modes: Decisions, Conditions, Intelligence, Client App, one visible at a time. THE STRIP IS BUTTONS AND NOT LINKS, and that is a behaviour decision rather than a styling one. Every panel is in the same server response, so switching changes nothing but which one is `hidden` -- there is no request, and a progress bar started for it would run until something unrelated cleared it. `workspace_rail` puts `data-no-busy` on the whole rail for that reason, and nothing is ever `disabled` to show which mode is on: `.on` and `aria-selected` carry it. Shaped after the flag pane's `cf-subtabs` strip rather than after `.ws-tabs`, for the same reason `client_flags` chose it: this is a level BELOW the pane tabs and two identical-looking tab strips is a reader guessing which one they are on. The active colour is the rail's amber and not the app's navy, because the rail already reads as its own territory. (Written without the leading dot deliberately -- `test_client_flags.test_no_new_media_query_fires_when_printing` slices this stylesheet on the FIRST occurrence of the dotted selector, so naming it here would move that slice up by 1,300 lines and fail on the workspace breakpoints.) */ .ws-util { display: block; } .ws-modes { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin: 0 0 var(--sp-3); } .ws-mode { padding: var(--sp-15) var(--sp-2); font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7f6000; background: #fff; border: 1px solid #e6dcc4; border-radius: var(--r-full); cursor: pointer; font-family: inherit; } .ws-mode:hover { border-color: #b7791f; } .ws-mode.on { background: #b7791f; border-color: #b7791f; color: #fff; } .ws-mode .cnt { font-size: var(--fs-eyebrow); background: #f4ecd8; color: #7f6000; border-radius: var(--r-full); padding: 0 var(--sp-15); margin-left: var(--sp-1); } .ws-mode.on .cnt { background: rgba(255,255,255,.24); color: #fff; } .ws-panel[hidden] { display: none; } /* THE CONTEXT RAIL'S CONDITION COUNTS OPEN NOW. `PLAN_UNBUTTONED.md` lists "the condition counts do not open" as one of the four things wrong with Hatch. The heading and the lane breakdown are unchanged; they are wrapped in a button that switches the utility rail to the Quick View. Reset to look exactly like the text it replaced, because it is the same information -- the only added mark is the cue line, so it does not read as a dead label the way Contact & Details did before U3. */ .ws-count-open { display: block; width: 100%; text-align: left; padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; } .ws-count-cue { display: block; margin-top: var(--sp-1); font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #b7791f; } .ws-count-open:hover .ws-count-cue { text-decoration: underline; } /* ---- Condition Quick View (U11) ---------------------------------------- Rapid inspection, between the context rail's summary and the Case tab's full management. One scannable line per condition and everything else behind a fold. Every judgement on it comes from `road_map.compute_evidence_lights` and `summarize_condition_status`, the same two functions the Case tab renders from, and the pills are `app_shared._light_pill`. There is no second calculator here and there must never be one. `.cqv-list` HAS NO SCROLLER OF ITS OWN, AND THAT IS A DECISION, 2026-08-08. It carried `max-height: clamp(240px, 100vh - 420px, 560px); overflow-y: auto` -- written when the page was the only scroller and a long rail simply made a long page. U7 changed the arrangement underneath it: on Hatch the WORK COLUMN is pinned and the rails are what move past it, so the rail's height IS the scroll. A 560px scroller inside it does three bad things and buys nothing: * IT EATS THE GESTURE. The wheel over a nested scroller is consumed by that scroller until it bottoms out. The rail is the one place a reader points while reading the rail, and on Hatch the clamped rail is shorter than the 100vh pinned column, so the page underneath has nothing to scroll -- "the rails scroll" was being delivered as "a box inside the rail scrolls". * THE ROWS ARE `

`. Opening one inside a short scroller reveals a body that is frequently below that box's own fold: a scroll, inside a scroll, inside a page. * IT CLIPPED THE PRINTED PAGE. `@media print` deliberately un-clamps `.conv` and the composer's textarea, on the stated rule that a case file must not silently lose everything below one screen. This scroller was never added to that block, so a printed workspace dropped every condition past the first ~560px with no indication that it had. Compactness was never coming from the clamp -- it comes from the row being one line with everything else folded away, which is unchanged. The same call was already made one breakpoint down for `.panel`, whose sticky max-height scroller goes static below 760px for exactly this reason. */ .cqv-head { font-size: var(--fs-eyebrow); margin: 0 0 var(--sp-2); } .cqv-row { border-top: 1px solid #eee6d5; } /* ---- THE ROW READS AS A COLUMN, because the rail is one ------------------ Reported 2026-08-07: *"on hatch on the right side rail, when conditions is selected the surfacing of the details is not easily readable looks like some column vs row issues."* It was two, and both are exactly that. ONE: this summary was `display: flex` with NO `flex-wrap`, holding `.cqv-name` (`overflow-wrap: anywhere`) beside `.cqv-state`, which is a `.pill` and therefore `white-space: nowrap`. The state text is a whole sentence from `road_map.summarize_condition_status` -- "Needs diagnosis + nexus + functional impact" is about 275px with its padding, against roughly 208px of usable width in a 240px rail and 288px in a 320px one. So the unbreakable pill took the entire line, the name was squeezed into whatever remained, and `overflow-wrap: anywhere` then broke it a character or two per line. The worst case is also the COMMON case: a condition with all three gaps open is the longest label there is. The fix is layout only. Nothing about the status is computed anywhere near here -- the words come from `summarize_condition_status`, the pill from `app_shared._light_pill`, and `workspace_rail` decides nothing but the order. The name takes its own row (`flex: 1 1 100%`) rather than being made to compete, and the state sits under it and may wrap. That is deterministic at 240px and at 320px, which is the width the rail actually is at each of the two breakpoints -- `.ws` is `240px minmax(0,1fr) 320px`, and below 1200px the intelligence rail moves to column 1, which is the 240px one. And the disclosure looks like one again. `display: flex` on a `

fell through to the browser default -- 1.17em of 14px, so ~16.4px in near-black -- while the

above it is 16px navy. The subordinate heading rendered LARGER than its parent and in a different colour family, on /questions and anywhere else outside a scoped block. Every scoped `.tile h3` / `.cond-card h3` / `.hs-beat h3` sets its own size and still wins on specificity, so this only reaches the bare ones. `h4` is folded in at the same size and a muted colour: below h3 the distinction people actually read is weight and colour, not another step down the scale -- a fifth size here would be a fifth thing to keep true. / h3 { color: #1f3864; font-size: var(--fs-base); font-weight: 700; line-height: var(--lh-snug); margin: var(--sp-4) 0 var(--sp-2); } h4 { color: var(--n-700); font-size: var(--fs-base); font-weight: 700; line-height: var(--lh-snug); margin: var(--sp-4) 0 var(--sp-2); } .card { background: #fff; border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-6); box-shadow: var(--sh-1); } / VERTICAL RHYTHM BETWEEN CARDS, which this file never had. `.card` set no margin at all, so two adjacent cards touched -- 22 flush pairs across 13 rendered pages, and two white rounded boxes with no gap read as one box that has broken rather than as two things. Every surface that noticed patched itself instead: `.fl-alarm`, `.fl-empty`, `.itfw` and `.asw` each carry their own `margin-bottom`, which is the same primitive written four times and the reason the fifth surface did not get one. ADJACENT SIBLING MARGINS COLLAPSE, so this does not double up on any of those four -- 16 against 16 stays 16. It is the ADJACENCY selector and not a margin on `.card` itself, deliberately: cards are grid and flex children in the workspace rails and in `.tiles`, where a trailing margin would fight the container's own `gap`. / .card + .card { margin-top: var(--sp-4); } / A card's first child must not add its own top margin on top of the card's padding. `h2` carries `margin-top: 22px`, so almost every card in the app opened with 40px of dead space while a handful had 18px -- the difference being whether somebody had noticed and patched that one card with an inline `style="margin-top:0"`. Those inline patches are now redundant rather than wrong; removing them is a later, separate sweep. / .card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; } .muted { color: var(--text-muted); font-size: var(--fs-sm); } .error { color: #c0392b; font-weight: 600; } table.grid { border-collapse: collapse; width: 100%; } table.grid th { text-align: left; color: #52606d; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.03em; padding: var(--sp-2) var(--sp-3); border-bottom: 2px solid #e3e8ee; } table.grid td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid #eef1f4; vertical-align: top; } / A TOTALS ROW, which the app had no treatment for. `/admin/activity` made every footer cell a `` to get some emphasis, and inherited the header treatment instead -- so the only row on the page that is a figure rendered as 11px grey uppercase, `$0.00` included. Weight and a rule above it, which is what a reader is actually looking for, and the numbers stay at the size of the numbers above. / table.grid tfoot td, table.grid tfoot th { border-top: 2px solid #e3e8ee; border-bottom: none; padding-top: var(--sp-3); } table.grid tfoot td { font-weight: 700; color: var(--n-900); } .pill { display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); font-size: var(--fs-eyebrow); font-weight: 700; white-space: nowrap; } .pill.red { background: #f4cccc; color: #85200c; } .pill.amber { background: #fff2cc; color: #7f6000; } .pill.green { background: #d9ead3; color: #274e13; } .pill.blue { background: #d9e2f3; color: #1f3864; } .pill.gray { background: #eeeeee; color: #52606d; } .btn { display: inline-block; background: #1f3864; color: #fff; border: none; border-radius: var(--r-md); padding: var(--sp-2) var(--sp-4); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; text-decoration: none; transition: background-color var(--dur-1) var(--ease); } .btn.secondary { background: #e3e8ee; color: #1f3864; } .btn.danger { background: #c0392b; } .btn.success { background: #2e7d32; cursor: default; } .btn:disabled { opacity: 0.5; cursor: default; } / PRESSED AND HOVER STATES. The primary action on every page was inert under the cursor, which matters more here than in most apps: this runs on a starter instance that can take two seconds to answer, so the acknowledgement layer correctly paints a busy state AFTER the click and there was nothing at all before it. A hover state is the cheapest possible signal that a click is going to land. `:not(:disabled)` rather than a pile of resets, so a control that cannot be pressed does not brighten under the cursor -- and it raises the specificity to 0,3,0, which is why each variant needs its own hover rather than inheriting the navy one. `.btn.ghost:hover` is declared further down this file and still wins on source order. ONLY `background-color` transitions, and only via `--dur-1`. Nothing here touches what `app_feedback.py` animates: `.cp-busy` adds a pseudo-element and changes no background. / .btn:hover:not(:disabled) { background: var(--brand-hover); } .btn:active:not(:disabled) { background: var(--brand-active); } .btn.secondary:hover:not(:disabled) { background: var(--n-200); } .btn.danger:hover:not(:disabled) { background: #a13124; } / `.success` is a state, not an action -- it already says `cursor: default`, so it must not react either. / .btn.success:hover { background: #2e7d32; } / ---- The hub LIST. Three surfaces, one rule, and it used to be squares. Changed 2026-08-07, per the instruction to default to Google style. WHAT WAS WRONG: `.tile` was `aspect-ratio: 1 / 1` with a heading, a paragraph and a location stacked inside it. A square with a paragraph in it is not a pattern Google ships anywhere -- Drive, Gmail and the Workspace admin console all list this kind of thing as ROWS with a short label and secondary text beside it. The square also cost real legibility: at 210px wide it forced the blurb down to `--fs-xs`, and `/features` is 40-odd of them, so the page was six screens of boxes with no scannable left edge. ONE CHANGE REACHES ALL THREE SURFACES, and that is why it is done in CSS and not in markup. `/needs-review`, `/features` and `/admin` emit the SAME shape -- a pill, an `h3`, a `p`, and a `.where` -- from three different modules, one of which (`road_map_app`) is under a line ratchet and could not be touched. A markup fix would have converted two of the three and left the product disagreeing with itself, which is worse than leaving all three square. SOURCE ORDER IS PILL-FIRST AND READING ORDER IS NAME-FIRST, so the name is ordered into place rather than moved in the markup: the pill is a status and the name is the thing you are looking for, but a screen reader and the tab order should still meet the status label attached to the row it belongs to. THE NAME COLUMN IS A FIXED BASIS, not `auto`, so names line up down the page -- that alignment is the entire reason a list scans faster than a grid. A longer name wraps inside its column instead of pushing everything after it out of line. `--fs-xs` -> `--fs-sm` on the blurb. There is room now, and 12px was a symptom of the square rather than a decision. / .tiles { display: flex; flex-direction: column; gap: var(--sp-1); } / `--tile-name` is LOCAL to this component and is the name column's width. It is here rather than typed twice because two rules need the same number -- the heading's flex-basis and the indent that lines `.nr-note` up with the blurb rather than with the name -- and the phone override below changes it in one place. Not a `:root` token: it is one component's measurement, and a design token is a value the whole product spends from. / .tile { --tile-name: 24ch; background: var(--bg-surface); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); box-shadow: var(--sh-1); display: flex; flex-flow: row wrap; align-items: baseline; column-gap: var(--sp-3); row-gap: var(--sp-1); text-decoration: none; color: inherit; border: 2px solid transparent; } / Hover keeps the border it always had -- it is already reserved at `transparent`, so nothing reflows -- and gains the row tint Drive uses, which is what actually reads as "this row" at full width. / .tile:hover { border-color: #1f3864; background: var(--bg-hover); } .tile.dead { cursor: default; } .tile.dead:hover { border-color: #e3e8ee; background: var(--bg-surface); } .tile h3 { order: 1; margin: 0; font-size: var(--fs-base); line-height: var(--lh-snug); flex: 0 0 var(--tile-name); min-width: 0; } .tile > .pill, .tile > .nr-ind { order: 2; flex: 0 0 auto; } .tile p { order: 3; margin: 0; font-size: var(--fs-sm); color: #52606d; line-height: var(--lh-snug); flex: 1 1 26ch; min-width: 0; } / A SHRINKABLE COLUMN, and an auto margin, and both are load-bearing. With `flex: 0 0 auto` this took its content's full width, so the two or three rows whose location is a sentence ("the transaction register, the event stream, git, ...") could not fit beside the blurb and dropped onto a line of their own -- where an uppercase caption under a paragraph reads as a footnote to it rather than as the same row's last column. A shrinkable basis wraps the long ones inside their column instead. `margin-left: auto` does nothing on a row that fits, because the blurb's `flex-grow` has already eaten the free space; it acts only when this DOES land on a wrapped line (a `/needs-review` row carrying a note), where without it the location would sit stranded at the left edge under the name. / .tile .where { order: 5; flex: 0 1 20ch; margin-left: auto; text-align: right; font-size: var(--fs-eyebrow); color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); } / ---- The Juggernaut LAUNCHER, 2026-08-09 (ROUTE AC) -------------------- Four rules, and this section exists to say why they are not the block directly above. WHY NOT `.tile`. Because `.tile` USED to be exactly this -- a square with a heading in it -- and it was deliberately un-squared on 2026-08-07 on the instruction to default to Google style. That change is right and stands: `/features` is 40-odd rows, `/needs-review` and `/admin` emit the same shape from three modules, and a square with a paragraph in it scans worse than a row with a left edge. THIS IS A DIFFERENT INSTRUCTION ABOUT A DIFFERENT SURFACE -- "a juggernaut homepage with square tiles that go into the juggernaut apps" -- and the two do not conflict, because the thing that made the square wrong there is absent here: a launcher tile carries a LABEL and at most ONE fact, never a blurb. Reusing `.tile` would have meant overriding almost every declaration in it, which is `.lp-tile`'s stated reason for existing and is how one component quietly becomes two that share a name. Nothing above is touched, so `/features`, `/needs-review` and `/admin` render byte-identically. WHY NOT `.admin-grid` OR `.lp-tiles`. `.admin-grid` is `1fr` columns with no aspect, so a square in it would be 400px tall on a wide screen; `.lp-tiles` is centred and capped for the one-or-two brand tiles it was measured for. Both would have needed overriding into a third thing. NO MEDIA QUERY, AND THAT IS THE POINT OF THE FLOOR. `min(100%, 210px)` is `.lp-tiles`' own trick: a 320px phone gets one tile that FITS rather than one that overflows, and the grid reflows from four columns to one on its own at every width in between. A breakpoint fewer is a breakpoint that cannot silently apply to a printout. THE CAP IS 260px SO A SQUARE STAYS A SQUARE YOU CAN READ. Uncapped `1fr` columns make a 500px square on a wide monitor, which is a poster. `aspect-ratio` AND NOT A FIXED HEIGHT, so the box grows if a label wraps to three lines rather than clipping it. `min-height: 0` is not needed: nothing here scrolls. AN ANCHOR, SO IT IS KEYBOARD REACHABLE FOR FREE. `:focus-visible` gets the same treatment as `:hover` because a keyboard user has to be able to see where they are; the border is reserved at `transparent` so nothing reflows when it appears. / .jt-grid { display: grid; gap: var(--sp-4); margin: var(--sp-4) 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 260px)); } .jt-tile { aspect-ratio: 1 / 1; display: flex; flex-direction: column; gap: var(--sp-2); background: var(--bg-surface); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--sh-1); border: 2px solid transparent; text-decoration: none; color: inherit; } .jt-tile:hover, .jt-tile:focus-visible { border-color: #1f3864; background: var(--bg-hover); } .jt-tile h3 { margin: 0; font-size: var(--fs-base); line-height: var(--lh-snug); } / The fact sits at the BOTTOM of the square, pushed there by the auto margin rather than by a spacer: the label is what you are looking for and the number is what you read once you have found it. `margin-top: auto` on a flex column is the whole mechanism. / .jt-fact { margin: auto 0 0; font-size: var(--fs-sm); color: #52606d; line-height: var(--lh-snug); } / `flex-wrap: wrap` added 2026-08-06: without it a filter row that does not fit overflows the page rather than reflowing, which is never the better of the two. It changes nothing at any width where the row already fits. / form.filters { display: flex; gap: var(--sp-3); align-items: end; margin: 0 0 var(--sp-4); flex-wrap: wrap; } form.filters label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-xs); color: #52606d; font-weight: 700; } select, input, textarea { font: inherit; padding: var(--sp-2) var(--sp-3); border: 1px solid #d5dbe3; border-radius: var(--r-md); background: #fff; } / ---- The stacked form, which the app wrote out longhand three times ------ `form.filters label` and `.login-box label` above are the same six declarations twice already, and `/tasks` and `/questions` wrote a THIRD copy in `style=` attributes -- `width:100%` on every control and a `margin-left:1.5rem` to fake a second column. Those pixel values sit off the 4px scale and were invisible to the token pass because they live in HTML, not here. `box-sizing: border-box` is the part that was actually broken: a control at `width:100%` WITH padding overflows its label by the padding, so every one of those inputs ran a few pixels past the card it sat in. / .stack { display: flex; flex-direction: column; gap: var(--sp-4); } .field { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 700; color: #52606d; } .field > input, .field > select, .field > textarea { width: 100%; box-sizing: border-box; font-size: var(--fs-base); font-weight: 400; color: var(--text); } .field-hint { font-weight: 400; color: var(--text-muted); } .field-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; } .field-row > .field { flex: 1 1 200px; } .login-box { max-width: 360px; margin: 80px auto; text-align: center; } .login-logo { width: 64px; height: 64px; } .login-box form { display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; margin-top: var(--sp-4); } .login-box label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 700; color: #52606d; } / ---- Admin dashboard ------------------------------------------ Status colours are the reserved status palette (good/warning/ critical), validated for CVD separation and the normal-vision floor in both light and dark. They are NEVER the only signal -- every use is paired with an icon and a text label, because warning sits below 3:1 contrast on a light surface by design and because colour alone excludes colourblind readers. Backup GENERATIONS (daily/weekly/monthly) are distinguished by row and label, not by hue, so colour is free to mean one thing only: health. / .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); } / Was `style="margin-top:14px"`. 14px is not on the 4px scale and never was. / .admin-grid-spaced { margin-top: var(--sp-4); } .stat { background: #fff; border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--sh-1); } .stat .label { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.03em; color: #52606d; font-weight: 700; } .stat .value { font-size: var(--fs-display); font-weight: 700; color: #1f2933; letter-spacing: -0.02em; margin-top: var(--sp-1); } .stat .sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-05); } .status-line { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-sm); } .status-dot { width: 11px; height: 11px; border-radius: var(--r-full); flex: none; } .s-good .status-dot { background: #0ca30c; } .s-good { color: #0a7a0a; } .s-warn .status-dot { background: #fab219; } .s-warn { color: #7a5600; } .s-crit .status-dot { background: #d03b3b; } .s-crit { color: #a52a2a; } / Unknown/unconfigured: deliberately NEUTRAL, not red. It is separated from the health states by lightness and by its own glyph, so it never reads as a failure and stays distinct in greyscale. / .s-unknown .status-dot { background: #8a97a3; } .s-unknown { color: #52606d; } / Coverage strip: one cell per day. Presence/absence, not magnitude -- so cells are uniform and only filled-vs-empty carries meaning. / .cov { display: flex; gap: var(--sp-05); align-items: flex-end; margin-top: var(--sp-3); } .cov .day { width: 100%; height: 34px; border-radius: var(--r-sm); background: #eef1f4; position: relative; } .cov .day.has { background: #0ca30c; } / A GAP is encoded by FORM, not colour: diagonal hatch plus a solid border. Measured with the palette validator, #0ca30c vs #d03b3b is CVD deltaE 4.1 under deuteranopia -- i.e. indistinguishable to a colourblind reader even though full-colour vision sees 33.9. The hatch and border survive colourblindness, greyscale printing and forced-colors mode; the red is redundant reinforcement only. / .cov .day.gap { background: repeating-linear-gradient(45deg, #d03b3b 0 3px, #ffffff 3px 6px); border: 2px solid #d03b3b; } .cov .day.today-pending { background: #eef1f4; border: 2px dashed #b6c0cb; } / The legend beside the strip, which was three `style=` attributes carrying the same three encodings again -- two raw hexes, a second hatch at a different pitch, and a 3px radius the radius pass had already retired everywhere else. Same three names as the cells so a change to one is visibly a change to both. / .cov-key { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; border-radius: var(--r-sm); box-sizing: border-box; background: #eef1f4; } .cov-key.has { background: #0ca30c; } .cov-key.gap { background: repeating-linear-gradient(45deg, #d03b3b 0 3px, #ffffff 3px 6px); border: 2px solid #d03b3b; } .cov-key.today-pending { border: 2px dashed #b6c0cb; } .cov-axis { position: relative; height: 16px; font-size: var(--fs-eyebrow); color: var(--text-muted); margin-top: var(--sp-15); } .cov-axis span { position: absolute; white-space: nowrap; } .depth-scale-pos { position: relative; height: 16px; font-size: var(--fs-eyebrow); color: var(--text-muted); margin-left: 202px; margin-top: var(--sp-1); } .depth-scale-pos span { position: absolute; white-space: nowrap; } .depth-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(31,56,100,0.13); } / Recovery depth: two coverage windows on ONE shared time axis. Answers "how far back can we actually go?" at a glance. / .depth-row { display: grid; grid-template-columns: 190px 1fr; gap: var(--sp-3); align-items: center; margin: var(--sp-2) 0; } .depth-row .name { font-size: var(--fs-sm); font-weight: 700; color: #1f2933; } .depth-row .name small { display: block; font-weight: 400; color: var(--text-muted); font-size: var(--fs-eyebrow); } .depth-track { position: relative; height: 22px; background: #eef1f4; border-radius: var(--r-sm); overflow: hidden; } .depth-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-sm); } .depth-fill.pitr { background: #1f3864; } .depth-fill.offsite { background: #0ca30c; } .depth-fill.none { background: #f4d3d3; } .depth-scale { display: flex; justify-content: space-between; font-size: var(--fs-eyebrow); color: var(--text-muted); margin-left: 202px; margin-top: var(--sp-1); } .depth-note { font-size: var(--fs-xs); color: #52606d; margin-top: var(--sp-3); } .kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); } .kv dt { color: #52606d; font-weight: 700; } .kv dd { margin: 0; } / ---- /admin/dev control centre --------------------------------- Six statuses, none optimistic by default. Colour NEVER carries the meaning alone: every badge has a glyph and a text label, because green vs red measures CVD deltaE 4.1 under deuteranopia. The three grey states are separated from each other by GLYPH and wording, not hue, so they stay distinguishable in greyscale and for any CVD. / .st { display: inline-flex; align-items: center; gap: var(--sp-15); font-size: var(--fs-eyebrow); font-weight: 700; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-full); white-space: nowrap; } .st-good { background: #e6f4e6; color: #0a6b0a; border: 1px solid #0ca30c; } .st-warn { background: #fdf3dd; color: #6f4e00; border: 1px solid #fab219; } .st-crit { background: #fae3e3; color: #8f2020; border: 1px solid #d03b3b; } .st-unconf { background: #eef1f4; color: #52606d; border: 1px dashed #8a97a3; } .st-uninst { background: #f7f8fa; color: #6b7885; border: 1px solid #d5dbe3; } .st-planned{ background: #f0f3f9; color: #3d5280; border: 1px solid #b7c4de; } .env-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-15); } .env-card { flex: 1 1 220px; background: #fff; border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); box-shadow: var(--sh-1); border-left: 4px solid #d5dbe3; } .env-card.is-active { border-left-color: #0ca30c; } .env-card .env-name { font-weight: 700; font-size: var(--fs-base); color: #1f2933; } .env-card .env-backend { font-size: var(--fs-xs); color: #52606d; margin-top: var(--sp-05); } .env-card .env-note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-15); } / Rendered on /admin/dev's environment cards and never styled -- a pre-existing gap, found 2026-08-06 by the test that asserts every rendered class has a rule. Matched to .env-note's weight so a probe result reads as detail rather than as the card's headline. / .env-card .env-probe { font-size: var(--fs-xs); color: #52606d; margin-top: var(--sp-15); } / Warning state carries its meaning in the words and the bold lead-in, not the amber alone -- the same rule the status badges follow. / .env-warn { flex: 1 1 100%; background: #fff8e6; border: 1px solid #e8b931; border-left: 4px solid #e8b931; border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: #6b5000; } .switcher { display: flex; gap: var(--sp-15); align-items: center; margin: var(--sp-3) 0 var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); } .switcher button { font: inherit; font-weight: 700; padding: var(--sp-15) var(--sp-3); border-radius: var(--r-md); border: 1px solid #d5dbe3; background: #eef1f4; color: var(--text-muted); cursor: not-allowed; } .phase { display: grid; grid-template-columns: 42px 1fr auto; gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; border-bottom: 1px solid #eef1f4; } .phase:last-child { border-bottom: none; } .phase .num { font-weight: 700; color: var(--text-muted); font-size: var(--fs-lg); text-align: right; } .phase .title { font-weight: 700; color: #1f2933; } .phase .sum { font-size: var(--fs-sm); color: #52606d; margin-top: var(--sp-05); } .phase .gate { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-1); } .phase .ev { font-size: var(--fs-xs); color: #52606d; margin-top: var(--sp-1); } .blocker { border-left: 3px solid #d03b3b; padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); margin: var(--sp-3) 0; } .blocker .bt { font-weight: 700; color: #1f2933; font-size: var(--fs-sm); } .blocker .bd { font-size: var(--fs-xs); color: #52606d; margin-top: var(--sp-1); } .kanban { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: var(--sp-3); overflow-x: auto; } .kcol { background: #eef1f4; border-radius: var(--r-lg); padding: var(--sp-2); min-height: 90px; } / `h3`, not `h4`: the board sits under an `h2` and the columns were jumping a level, which is the one heading error a screen reader user cannot work around -- the outline simply loses a rung. Nothing about the rendering changed. / .kcol h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.03em; color: #52606d; display: flex; justify-content: space-between; } .kempty { font-size: var(--fs-xs); } .kcard { background: #fff; border-radius: var(--r-md); padding: var(--sp-2); margin-bottom: var(--sp-2); box-shadow: var(--sh-1); font-size: var(--fs-xs); } .kcard .kt { font-weight: 700; color: #1f2933; } .kcard .kn { color: var(--text-muted); font-size: var(--fs-eyebrow); margin-top: var(--sp-1); } .kcard .kref { font-size: var(--fs-eyebrow); color: var(--text-muted); margin-top: var(--sp-1); font-family: ui-monospace, monospace; } .readonly-note { background: #f0f3f9; border: 1px solid #b7c4de; border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); color: #3d5280; margin: 0 0 var(--sp-4); } .review-layout { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: var(--sp-4); align-items: start; } .doc-frame { width: 100%; height: calc(100vh - 170px); border: 1px solid #d5dbe3; border-radius: var(--r-lg); background: #fff; } .panel { position: sticky; top: 16px; max-height: calc(100vh - 150px); overflow-y: auto; } .section-list { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-4); } .section-list button { text-align: left; background: #f2f4f7; border: 1px solid transparent; border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--fs-sm); cursor: pointer; } .section-list button.selected { border-color: #1f3864; background: #e8edf6; font-weight: 700; } .section-list .edited { float: right; font-size: var(--fs-eyebrow); background: #d9a441; color: #1f2933; border-radius: var(--r-full); padding: 1px var(--sp-2); } #editor { min-height: 140px; max-height: 320px; overflow-y: auto; border: 1px solid #d5dbe3; border-radius: var(--r-md); padding: var(--sp-3); background: #fff; font-size: var(--fs-sm); } #editor:focus { outline: 2px solid #1f3864; } .panel textarea { width: 100%; min-height: 64px; margin-top: var(--sp-2); } .panel .actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; } .flash { background: #d9ead3; color: #274e13; border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-weight: 600; } .flash.bad { background: #f4cccc; color: #85200c; } .itf-chip { font-size: var(--fs-xs); } .coming-soon { text-align: center; padding: 70px 0; color: var(--text-muted); } tr.rowlink { cursor: pointer; } tr.rowlink:hover td { background: #f2f6fc; } .client-header { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); } .client-header + .client-header { margin-top: var(--sp-3); } .section-sub { color: #52606d; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; margin: var(--sp-4) 0 var(--sp-15); } .card .section-sub:first-child { margin-top: 0; } .hdr-label { font-size: var(--fs-eyebrow); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } .evidence-list { padding-left: var(--sp-4); list-style: disc; margin: 0; font-size: var(--fs-sm); } .evidence-list li { margin-bottom: var(--sp-1); } .lights-cell { white-space: nowrap; } .lights-cell .light-label { font-size: var(--fs-eyebrow); color: var(--text-muted); margin: 0 var(--sp-1) 0 var(--sp-2); font-weight: 700; } .lights-cell .light-label:first-child { margin-left: 0; } select.cond-edit { font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-15); margin-bottom: var(--sp-1); max-width: 175px; } .table-wrap { overflow-x: auto; } .cond-lane { border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4) var(--sp-15); margin-top: var(--sp-4); } .lane-title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--sp-3); } .lane-count { display: inline-block; background: rgba(255,255,255,0.85); border-radius: var(--r-full); padding: 1px var(--sp-2); font-size: var(--fs-eyebrow); margin-left: var(--sp-15); color: #52606d; } .cond-card { background: #fff; border-radius: var(--r-md); border-left: 4px solid #1f3864; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); box-shadow: var(--sh-1); } .cond-card h3 { color: #1f3864; font-size: var(--fs-base); margin: 0 0 var(--sp-2); } .cond-canonical { font-weight: 400; font-size: var(--fs-xs); margin-left: var(--sp-2); } / THE THREE REGISTERS, ABOVE THE CONTROLS AND ABOVE THE LIGHTS. EXT-184 §130-138. Documented / Veteran reported / Filing selection, always all three, so the absence of a selection is a visible line rather than a gap somebody reads as "not applicable". A LEFT RULE AND NOT A BADGE, deliberately. A badge appears only when there is something to say, and "nobody has asked the veteran yet" is exactly the case that has to be seen. `.register-open` warms the rule for an unrecorded selection -- the same amber the four-state pill uses for `not_examined`, and for the same reason: amber is GO AND LOOK. It is never red, because red reads as stop-working-it and nothing here says stop. / .cond-registers { border-left: 3px solid var(--line); padding-left: var(--sp-3); margin: 0 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); } .cond-registers.register-open, .register-line.register-open { border-left-color: #b7791f; } .register-headline { font-size: var(--fs-sm); font-weight: 700; color: #1f3864; } .register-line { font-size: var(--fs-xs); color: var(--text-muted); } .register-line.register-open { color: #8a5b00; font-weight: 700; padding-left: var(--sp-2); border-left: 3px solid #b7791f; } / THE UNAVAILABLE LINE AND THE CAPTURE CONTROL. EXT-198 §98, §110. `.register-unavailable` is NOT styled as an error, deliberately: it is a statement that this surface could not determine something, and the next action belongs to an engineer rather than to the coach reading the card. Grey and quiet, with the typed reason's own sentence in it. Red would send somebody to the veteran, which is precisely the confusion this line exists to remove. / .register-unavailable { font-size: var(--fs-xs); color: var(--text-muted); background: #f0f2f4; border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); margin-top: var(--sp-1); } .selection-capture { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; margin-top: var(--sp-2); } .selection-capture label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-eyebrow); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } .selection-words { min-width: 260px; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-sm); } .selection-stance, .selection-source { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-sm); } / `.btn` already carries the look; this only stops the button stretching to the flex row's full height beside the labelled inputs. A rule is required because `test_module_split` refuses a class the app renders and the stylesheet does not know -- an unstyled control is an unfinished one. / .selection-save { align-self: flex-end; } .selection-receipt { font-size: var(--fs-xs); font-weight: 700; } / FIVE OUTCOMES, THREE TONES, AND `conflicted` IS NOT ONE OF THE QUIET ONES. written/updated are done. `kept` is grey: nothing changed and nothing is wrong. `conflicted` and `refused` are red because both need a human, and a conflict that reads as "saved" is the one outcome that could lose a veteran's answer. / .outcome-written, .outcome-updated { color: #2e7d32; } .outcome-kept { color: var(--text-muted); } .outcome-conflicted, .outcome-refused { color: #c0392b; } .cond-controls { display: flex; gap: var(--sp-4); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--sp-3); } .cond-controls label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-eyebrow); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } .cond-status-grid { display: flex; gap: var(--sp-4); flex-wrap: wrap; } .status-col { display: flex; flex-direction: column; gap: var(--sp-15); } .status-col label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-eyebrow); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } .light-slot { min-height: 22px; } .log-expander { margin-top: var(--sp-2); font-size: var(--fs-sm); } .log-expander summary, .log-title { font-size: var(--fs-eyebrow); color: #52606d; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; cursor: pointer; } .log-none .log-title { cursor: default; } .log-body { background: #fafbfc; border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-15); color: #3e4c59; font-size: var(--fs-xs); line-height: 1.6; max-height: 320px; overflow-y: auto; } / THE TALLER LOG, AND IT IS AN ATTRIBUTE HERE BECAUSE IT WAS AN INLINE STYLE. The client record's flag log wants 480px rather than 320, and it asked for it with `style="max-height:480px"` -- which an author stylesheet cannot beat, so `@media print`'s un-clamp below could not reach it and that log clipped on paper on the one page whose whole purpose is going into a case file. Same defect as the two `.log-body` clampers already recorded in the print block, arriving by a different route: not a rule somebody forgot to un-clamp, a rule nothing was allowed to un-clamp. A `data-` hook rather than a class, following `data-ca` next door. / .log-body[data-log="tall"] { max-height: 480px; } .log-entry { padding: var(--sp-2) 0; border-top: 1px solid #e8ecf0; } .log-entry:first-child { border-top: none; padding-top: var(--sp-05); } .log-entry strong { color: #1f3864; } .extract-list li { margin-bottom: var(--sp-3); } .extract-detail { background: #fff; border: 1px solid #eef1f4; border-radius: var(--r-md); padding: var(--sp-15) var(--sp-3); margin-top: var(--sp-15); font-size: var(--fs-xs); } .extract-sub { margin-top: var(--sp-1); } .extract-sub summary { font-size: var(--fs-eyebrow); color: #52606d; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; cursor: pointer; } mark { background: #fff59d; padding: 0 var(--sp-05); border-radius: var(--r-sm); } .evidence-block { background: #fafbfc; border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-15); } .evidence-heading { font-size: var(--fs-eyebrow); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } / ---- Conversation bubbles, reworked 2026-08-06 on direct instruction ------- "a clear indicator that something is email... email needs to be collapsed and expandable... client comms to us should be a different color than our comms to them." COLOUR CARRIES THE DIRECTION, not position alone. In a narrow column left-vs-right is easy to misread, and the cost of misreading is replying to your own message. / / The channel BADGE. Scanning a thread for "which of these was a text?" should not require reading -- so channel is a shape and a colour, not a word in grey. / .conv-badge { display: inline-block; font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px var(--sp-2); border-radius: var(--r-full); margin-right: var(--sp-2); border: 1px solid transparent; } .conv-badge.ch-email { background: #e7edf7; color: #2f5b8c; border-color: #cfdcee; } .conv-badge.ch-sms { background: #e6f5ec; color: #1f6b40; border-color: #c9e7d6; } .conv-badge.ch-portal { background: #f1eaf8; color: #5c3d8a; border-color: #e0d2f0; } .conv-badge.ch-phone { background: #fdf0e3; color: #8a5a1f; border-color: #f4dcc0; } .conv-badge.ch-other { background: #eef1f4; color: #52606d; border-color: #e0e5ea; } / The only badge in the thread that is a warning rather than a label. Solid amber against five pale tints, because this one answers "can the veteran see this?" and every other one answers "how did it get here?" / .conv-badge.ch-internal { background: #a8620d; color: #fff; border-color: #a8620d; } / ---- Internal notes ----------------------------------------------------- A note the client never sees, sitting in the same column as messages they did. Marked THREE ways -- the amber badge above, this left edge, and the tinted ground -- because one marking is one refactor away from none, and the cost of mistaking a private note for a sent message runs in both directions: quoting it to the veteran, or assuming they were told something they never were. / .conv-item.internal { background: #fdf6ec; border-left: 3px solid #a8620d; padding-left: var(--sp-2); border-radius: 0 var(--r-md) var(--r-md) 0; } / ---- The message panel -------------------------------------------------- Four channels, and a rule down the middle. Left of it reaches the veteran, right of it never does. Position is what somebody learns after a week; the labels and the colour are what they read before that. / / ---- COMPACT AT REST ----------------------------------------------------- Direct instruction 2026-08-08, from the browser: "the text editor/composer is clunky and big, needs to be overhauled for best ui ux and pinned below." THE PANEL NOW COSTS THE THREAD ITS OWN HEIGHT, which is why this is a requirement and not a preference. Pinned to the bottom of a fixed-height column, every pixel the composer takes at rest is a pixel of conversation nobody can read -- the two share one viewport and there is no third place for the height to come from. At rest it was around 340px; the same panel with the same controls is around 235px now. WHERE THE HEIGHT WENT, in order of size, so none of it is mysterious: * The textarea opens at TWO lines instead of four and grows from there (`#composer textarea` below, and the `rows` attribute in `composer.py` so it is right before any CSS or JS loads). ~41px. * "Replying to ..." and the subject row SHARE A LINE (`.cmp-meta`). ~26px. * The Wingman bar is one line rather than two (`.cmp-est`). ~18px. * The card's own padding drops from 16/24 to 12/16. ~8px, and it also stops the panel reading as a page-level card when it is a dock. * The channel note drops to the eyebrow size and the block margins go from 8px to 6px. ~25px between them. NOTHING ON THE PRIVACY BOUNDARY WAS TOUCHED TO GET IT. Not the four tabs, not the rule between them, not the amber, not the confirm. The rule about which of those wins is stated in `composer.py` and it is not close: if a compact panel ever made the divider harder to read, the divider wins and the panel gets taller. The tab padding here is unchanged from before this pass for exactly that reason. THE `hidden` ATTRIBUTE HAS TO ACTUALLY HIDE, and until this pass it did not. `[hidden] { display: none }` lives in the USER-AGENT stylesheet, and any author `display` beats a UA declaration outright -- so `.cmp-subject { display: flex }` had been defeating `hidden` since the subject box shipped, and the Subject field and its "quote their message" checkbox rendered on Text and on Internal note, where neither has anywhere to go. `.cmp-who` carries a comment warning about precisely this trap; the rule three lines below it walked into it. Fixed once, at the panel, rather than per class: `#composer [hidden]` is (1,1,0) and outranks every `.cmp-` rule in this file, so a control added later with a `display` of its own cannot re-open the hole. Scoped to `#composer` rather than written globally because a global `[hidden]` override is the kind of rule that changes something on a page nobody was looking at. / .conv-composer { padding: var(--sp-3) var(--sp-4); } #composer [hidden] { display: none; } /* TWO SIDES AND A RULE BETWEEN THEM, and the grouping is in the markup. `composer.render` wraps each side in `.cmp-side` -- derived from `reaches_client`, never from a count -- so `.cmp-tabs` holds three children and not five. That is what lets the rule stay VERTICAL at every width: the reaching side wraps onto as many rows as it needs, inside its own box, and the rule stands to the right of all of them. It used to be a flat run of four buttons with a 1px span spliced in, which wrapped to wherever there was room. / .cmp-tabs { display: flex; align-items: stretch; gap: var(--sp-1); margin-bottom: var(--sp-2); flex-wrap: nowrap; } / The reaching side takes the slack and is the one allowed to wrap. `min-width: 0` is load-bearing: without it a flex item will not shrink below its content and the internal tab would be pushed off the right edge -- taking the rule with it. / .cmp-side { display: flex; align-items: stretch; flex-wrap: wrap; gap: var(--sp-1); flex: 0 1 auto; min-width: 0; } .cmp-side.internal { flex: 0 0 auto; } .cmp-tab { font: inherit; font-size: var(--fs-xs); padding: var(--sp-15) var(--sp-3); cursor: pointer; background: #f4f6f8; border: 1px solid #d7dde3; border-radius: var(--r-md); color: #52606d; } .cmp-tab:hover { background: #eaeef2; } .cmp-tab.on { background: #1f3864; border-color: #1f3864; color: #fff; font-weight: 600; } / An unavailable channel is SHOWN, dimmed, never hidden. A tab that vanishes leaves somebody wondering whether the feature exists; a dim one with a reason under it answers the question, and the panel does not change shape the day it turns on. / .cmp-tab.off { opacity: .5; } .cmp-tab.off.on { background: #7b8794; border-color: #7b8794; opacity: .75; } / The divider. Its own element rather than a border on a tab, so it stays put when the tab beside it is selected and grows a border of its own. `flex: 0 0 1px` and not a bare `width`, because a 1px flex item with `flex-shrink` at its default of 1 is a 1px item a crowded row is allowed to shrink to nothing -- and the one thing on this panel that must never disappear is the rule that says which side reaches the veteran. It stretches to the full height of the tallest side, so when the reaching side wraps to two or three rows the rule grows with it instead of marking only the first row. / .cmp-divide { flex: 0 0 1px; width: 1px; background: #cbd2d9; margin: var(--sp-05) var(--sp-15); align-self: stretch; } / ---- The head, which never folds --------------------------------------- The panel is a head and a body, and only the body folds. What is in the head is a safety decision rather than a layout one: THE FOUR TABS STAY, because they are the privacy control and the rule down their middle is one of the four places "this reaches a veteran" is drawn. A folded panel whose only visible element was a box you can type into would have dropped that signal entirely -- and the channel is remembered across a page load, so the one somebody last used is not the one they would assume. `.cmp-who` stands in for the fuller note under the tabs, which is inside the folded part. Amber when it is the internal note, the same as everywhere else. / .cmp-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-15); } .cmp-head .cmp-tabs { margin-bottom: 0; } / NO `display` declaration, deliberately: these carry the `hidden` attribute for the three channels that are not selected, and an author `display` on the class would beat it and show all four at once. / .cmp-who { font-size: var(--fs-xs); color: #52606d; } .cmp-who.internal { color: #8a5a1f; font-weight: 700; } #composer:not(.collapsed) .cmp-who { display: none; } .cmp-fold { margin-left: auto; font: inherit; font-size: var(--fs-xs); font-weight: 600; padding: var(--sp-15) var(--sp-3); cursor: pointer; white-space: nowrap; color: #2f5b8c; background: #fff; border: 1px solid #cbd2d9; border-radius: var(--r-md); } .cmp-fold:hover { background: #f4f6f8; border-color: #9aa5b1; } #composer.collapsed .cmp-body { display: none; } / Folded, the whole strip is the way back in: a one-line panel whose only target is a small button at the far right is a panel people miss. / #composer.collapsed .cmp-head { margin-bottom: 0; cursor: pointer; } @media screen and (max-width: 900px) { / Same tap-target treatment the tabs beside it get. / / `--fs-sm` is exactly the 13px this said, written as the token. Same reason as `.cmp-tab` in the phones block: a literal that happens to equal a token is a literal somebody will change without changing the scale. / .cmp-fold { padding: var(--sp-3); min-height: 42px; font-size: var(--fs-sm); } } .cmp-note { font-size: var(--fs-eyebrow); color: #52606d; margin-bottom: var(--sp-15); line-height: var(--lh-snug); } / WHAT IS BEING REPLIED TO AND WHAT IT IS CALLED, ON ONE LINE. Two email-only strips that were two stacked rows and are one row wherever there is room for one. They wrap independently at their own flex bases, so a 420px work column stacks them exactly as before rather than crushing both -- the compaction is taken where it is free and given back where it is not. `display: flex` here is safe because `#composer [hidden]` above outranks it; that was not true of the rule it replaces, and the note up there says why. / .cmp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-15); } .cmp-meta > { margin-bottom: 0; } .cmp-meta .cmp-reply-to { flex: 1 1 210px; min-width: 0; } .cmp-meta .cmp-subject { flex: 3 1 300px; min-width: 0; } /* ---- COMPACT, THEN IT GROWS, THEN IT STOPS ----------------------------- TWO lines to start (the `rows` attribute, so it is right before any CSS or JS loads), growing with what is typed to about nine, and after that THE TEXTAREA SCROLLS -- never the page. IT WAS FOUR LINES UNTIL 2026-08-08 and the founder called the panel "clunky and big" in the browser. Two is the right floor rather than a smaller number that looks tidier in a screenshot: one line reads as a search box and hides the fact that this is where a letter to a veteran gets written, and it makes the box resize on the second word of every message. Two lines is the smallest thing that still looks like a message editor and holds a normal reply without moving. THE CEILING LIVES HERE AND NOT IN THE SCRIPT. `PANEL_SCRIPT` sets `height` from the box's own `scrollHeight` and knows nothing about a maximum; `max-height` clamps it and `overflow-y` gives it somewhere to go. So the limit is a style decision in the stylesheet rather than a number in JavaScript, and a browser with JavaScript off still gets a two-line box that scrolls rather than one that grows. `line-height` is declared because a textarea does NOT inherit it usefully -- the UA `font` shorthand resets it to `normal` -- and every figure below is counted in lines, so an unknown line height would make them arbitrary. 1.5 x 14px is 21px a line: `min-height` is two of them plus the 16px of padding, and `max-height`'s 14em is a little over nine. THE `32vh` IS A SHORT-SCREEN GUARD, not a second opinion about line count. In the pinned Hatch column the composer and the thread divide one viewport between them, so on a 640px window nine lines of editor would leave the thread a strip. At that height 32vh is about six lines; on any ordinary screen the `14em` is what binds. `resize: vertical` stays available: auto-grow is a default, not a policy, and somebody drafting a long letter should be able to overrule it -- which matters more now that the floor is lower, not less. / #composer textarea { width: 100%; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-base); border: 1px solid #cbd2d9; border-radius: var(--r-md); font-family: inherit; line-height: 1.5; min-height: 4.2em; max-height: min(14em, 32vh); overflow-y: auto; resize: vertical; box-sizing: border-box; } / SEND AND THE STATE LINE ON ONE ROW WITH THE WINGMAN BAR, which is why the bar is rendered INSIDE `.cmp-actions` rather than under it. Two rows of controls under a two-line box was most of what read as clunky. `margin-left: auto` on the bar is what keeps the two kinds of button apart: Send is the primary action and the priced buttons are a detour, so they sit at opposite ends of the row and a mis-click has the width of the panel to cross. / .cmp-actions { margin-top: var(--sp-15); display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); } .cmp-actions .cmp-wingman-bar { margin-top: 0; margin-left: auto; } .cmp-actions .muted { margin-left: 0; } / ---- Replying ------------------------------------------------------------ WHICH MESSAGE IS BEING ANSWERED, stated rather than inferred from the thread above. The left rule ties it visually to the quote it will produce, and it is grey rather than amber: amber in this panel means "internal, the client never sees this", and one meaning per colour is the rule that keeps that legible. / .cmp-reply-to { font-size: var(--fs-xs); color: #3e4c59; margin-bottom: var(--sp-2); padding-left: var(--sp-2); border-left: 2px solid #cbd2d9; } .cmp-subject { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; } .cmp-subject label { font-size: var(--fs-eyebrow); color: #52606d; } .cmp-subject input[type=text] { flex: 1 1 260px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); border: 1px solid #cbd2d9; border-radius: var(--r-md); font-family: inherit; } .cmp-quote { display: inline-flex; align-items: center; gap: var(--sp-15); white-space: nowrap; } / The priced buttons, and the free path named to their left. Deliberately quiet: the sentence saying it costs nothing to write it yourself should not be losing a visual contest with two buttons carrying dollar figures. / .cmp-wingman-bar { margin-top: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-xs); } .cmp-wingman-bar .pill { margin-left: var(--sp-15); } / The estimate caveat takes its own line INSIDE the bar rather than pushing the buttons off theirs -- `flex: 1 1 100%` is a line break that costs no element. Right-aligned because the bar now sits at the right end of the action row and a left-aligned caption under right-aligned buttons reads as belonging to Send. / .cmp-est { flex: 1 1 100%; font-size: var(--fs-eyebrow); text-align: right; } / Composing a note looks like the note will look. The box a person types into is the last chance to notice they picked the wrong channel. / #composer.internal textarea { background: #fdf6ec; border-color: #dbb277; } #composer.internal { border-left: 3px solid #a8620d; } / ---- Wingman ------------------------------------------------------------ A machine-written draft, and it has to look like one. Tinted ground, dashed edge, its own label: nothing else in the composer is dashed, so a glance tells you these words came from a model and have not been read by a person yet. It sits BELOW the textarea rather than replacing it, because the draft is a suggestion beside your own writing, not a replacement for it. / .cmp-wingman { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: #f3f6fb; border: 1px dashed #9fb3d1; } .cmp-wingman-head { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #2f5b8c; margin-bottom: var(--sp-15); } .cmp-wingman-text { white-space: pre-wrap; font-size: var(--fs-base); color: #1f2933; overflow-wrap: anywhere; } .cmp-wingman-actions { margin-top: var(--sp-2); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .cmp-wingman-actions .muted { font-size: var(--fs-eyebrow); } .btn.ghost { background: #fff; color: #2f5b8c; border: 1px solid #cbd2d9; } .btn.ghost:hover { background: #f4f6f8; } .btn.ghost:disabled { opacity: .5; cursor: not-allowed; } .conv-subject { font-weight: 700; color: #1f3864; margin: var(--sp-1) 0; } .conv-body { overflow-wrap: anywhere; } / Collapsed email.
rather than JavaScript so it survives the thread being replaced by the live refresh, and works with a keyboard for free. / .conv-fold > summary { cursor: pointer; list-style: none; display: block; } .conv-fold > summary::-webkit-details-marker { display: none; } .conv-preview { color: #52606d; } .conv-more { display: inline-block; margin-left: var(--sp-15); font-size: var(--fs-eyebrow); font-weight: 700; color: #2f5b8c; white-space: nowrap; } / FOUND 2026-08-08 WHILE ADDING THE SAME CARET TO THE QUICK VIEW, and it is a live defect rather than a style note. `APP_CSS` is a normal Python string, so `\25b8` was consumed by PYTHON as the octal escape `\25` -- the browser was handed chr(0x15) followed by the literal characters "b8", and this caret has been rendering as an invisible control character and the text "b8" in front of "show full email" since it was written. Escaped so the browser receives the CSS escape it was always meant to get. The same mistake is one line down and in the Quick View above; all four are corrected together. / .conv-more::before { content: "\25b8 "; } .conv-fold[open] > summary .conv-preview { display: none; } .conv-fold[open] > summary .conv-more { margin-left: 0; } .conv-fold[open] > summary .conv-more::before { content: "\25be "; } .conv-fold[open] > summary .conv-more::after { content: " (collapse)"; font-weight: 400; } .conv-fold > summary:hover .conv-more { text-decoration: underline; } / ---- The Workspace client list ------------------------------------------ Search and two filters in a row above a dense table. The condition counts are the point of the row, so they are chips rather than columns: seven numeric columns would make the table unreadable at a glance, and a client with none of a category should read as absence rather than as a nought competing for attention. / .wl-controls { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-3); } .wl-controls input, .wl-controls select { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); border: 1px solid #cbd2d9; border-radius: var(--r-md); background: #fff; } .wl-controls input { flex: 1; min-width: 200px; } .wl-counts { white-space: nowrap; } .wl-count { display: inline-block; font-size: var(--fs-eyebrow); color: #52606d; background: #eef1f4; border-radius: var(--r-full); padding: 1px var(--sp-2); margin-right: var(--sp-1); } .wl-count b { color: #1f3864; } / A zero is shown but recedes: the row must still reconcile, without every empty category shouting as loudly as a real one. / .wl-count.zero { color: var(--n-400); background: #f7f9fa; } .wl-count.zero b { color: var(--n-400); font-weight: 400; } table.wl td { vertical-align: top; } / ---- The user bar, under the nav ---------------------------------------- What the signed-in person has actually done. Quiet by design: it sits between the nav and the page content, so anything loud here competes with the work. A thin rule, small type, numbers bolded so the row scans as figures rather than as a sentence. / .userbar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; background: #fbfcfd; border-bottom: 1px solid #e4e9ee; padding: var(--sp-15) var(--sp-6); font-size: var(--fs-xs); color: var(--text-muted); } .userbar .ub-who { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: var(--fs-eyebrow); color: var(--n-600); } .userbar .ub-item b { color: #1f3864; font-weight: 700; } / An estimated figure is labelled as one, everywhere it appears. A cost that looks authoritative and is a guess is worse than one that admits it. / .userbar .ub-est { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border: 1px solid #e0e5ea; border-radius: var(--r-full); padding: 0 var(--sp-1); margin-left: var(--sp-1); } .userbar .ub-more { margin-left: auto; color: #2f5b8c; text-decoration: none; font-weight: 600; } .userbar .ub-more:hover { text-decoration: underline; } / ------------------------------------------------------------------ * * THE ACKNOWLEDGEMENT LAYER. Required on every page -- see * * app_feedback.py, which owns the behaviour these rules paint. * * * * The rule it serves: a click produces a visible change within one * * frame, whether or not the work behind it has finished. Two seconds * * of an unchanged page is indistinguishable from a click that did not * * land, and the cost of that is a double-submitted save. * * ------------------------------------------------------------------ / / The swirl. An ::after ring rather than a replaced label: swapping the label for "Saving…" loses the word somebody was reading, and on a control whose label is an icon there is nothing to swap. currentColor so it works on every button variant in this stylesheet without one rule per variant. / .cp-busy { position: relative; } .cp-busy::after { content: ''; position: absolute; top: 50%; right: 7px; width: 11px; height: 11px; margin-top: -6px; border-radius: var(--r-full); border: 2px solid currentColor; border-right-color: transparent; opacity: 0.65; animation: cp-spin 0.62s linear infinite; pointer-events: none; } / A BUTTON widens by ~19px to make room, so the ring never sits over its label. That does move whatever is beside it, and the alternative -- overlapping a tight button's text with a spinner -- is worse: the label becomes unreadable at the exact moment somebody is checking what they just pressed. It happens once, on the control being pressed, and it stops when the next page paints. A LINK does not widen. In running text or a nav row a reflow would shove the whole line, so the ring hangs outside the link's own box instead. / button.cp-busy, input.cp-busy { padding-right: var(--sp-6); } a.cp-busy::after { right: -15px; } @keyframes cp-spin { to { transform: rotate(360deg); } } / The top bar. Runs to 88% on its own and stops there: a bar that reaches 100% while the page is still loading has told a lie, and the next page's paint is what actually finishes it. / .cp-bar { position: fixed; top: 0; left: 0; height: 2.5px; width: 0; background: var(--tenant-accent, #c8a24a); box-shadow: 0 0 8px var(--tenant-accent, #c8a24a); z-index: 9999; opacity: 0; transition: opacity var(--dur-1) var(--ease); pointer-events: none; } .cp-bar.cp-bar-on { opacity: 1; animation: cp-crawl 9s cubic-bezier(0.15, 0.85, 0.25, 1) forwards; } @keyframes cp-crawl { from { width: 0; } to { width: 88%; } } / The companion note. TOP RIGHT under the topbar, and deliberately its OWN object floating above the page rather than a strip pinned into the layout -- per direct instruction: "super professional but also relaxing and fun". MOVED OFF CENTRE 2026-08-08, on direct instruction: "the fun facts bubble that comes up on every change screen needs to come up on the right side of the screen and grow in height and shrink in width so that the nav menu dropdown doesn't get covered up." It was `left: 50%; transform: translateX(-50%)` with a 600px cap -- top centre, directly under the bar, which is precisely where the grouped nav's panels open now that grouped is the default and Platform carries twelve items. SO IT IS A COLUMN NOW, not a banner: a fixed ~300px width instead of a `max-content` box up to 600px wide, which is the "grow in height and shrink in width" half of the instruction. The same sentence takes three or four lines instead of one and occupies a third of the horizontal space it used to. IT ALSO GETS OUT OF THE WAY OF AN OPEN PANEL ENTIRELY -- see the `:has` rule below -- because narrowing alone only guarantees a miss on a wide screen: a 288px menu anchored under the last group on a 1024px window still reaches the right edge, and "doesn't get covered up" was the instruction, not "usually". Depth is what makes it read as a separate friendly thing rather than a browser notification bar: a soft double shadow (a tight contact shadow plus a wide ambient one), a hairline border, and a generous radius. The tenant accent is a left rule only, so it is recognisably part of the app without shouting. Those stay exactly as they were, and they are the reason a card in the top-right corner still does not read as a toast: a toast is a status, this is a diversion, and it carries a "fun fact" label instead of an outcome. STILL AN OUTER POSITIONER AND AN INNER CARD. The original reason was that one element cannot hold both the centring transform and the transform that slides it out; with `right` doing the placement that constraint is gone, and the split is kept anyway because it is what keeps `app_feedback`'s animation ownership clean -- the positioner owns WHERE, the card owns HOW IT MOVES. / / `top` WAS THE LITERAL 74px and is now derived, because the bar it tucks under is pinned as of 2026-08-08 and is therefore always the thing directly above this. On a narrow window the bar wraps to two or three rows and 74px put the note across the middle of it -- over the nav, which is the one thing the instruction that moved this note said it must not cover. `--nav-h` is written by `app_feedback` from the bar's measured height; the fallback is the desktop bar's real 64px, so the note is placed correctly before any script runs. / .cp-note { position: fixed; top: calc(var(--nav-h, 64px) + var(--sp-15)); right: var(--sp-4); z-index: 9998; pointer-events: none; width: min(300px, calc(100vw - 40px)); transition: opacity var(--dur-1) var(--ease); } / WHILE A NAV PANEL IS OPEN, THE NOTE STANDS DOWN. The instruction names the dropdown as the thing that must not be covered, and the note is the one of the two that nobody opened on purpose -- a diversion yields to a control, never the other way round. Both disclosures in the bar are `
` (the tenant switcher and every nav group), so one selector covers them and a group added next month is covered without anybody remembering this rule. `opacity` on the POSITIONER, not on the card: the card's own opacity is mid transition for most of a note's life and fighting it would make the note flicker as it arrived. A browser without `:has()` support simply keeps the note visible, which is the behaviour before this rule and still better than the centred one. / body:has(.topbar details[open]) .cp-note { opacity: 0; pointer-events: none; } / AND IT STANDS DOWN ON THE SHELL TOO, for a reason that did not exist until today. The note is `position: fixed` and used to be scrolled out from under by the page; Hatch's app shell removed the page scroller, so it sits over the utility rail PERMANENTLY. Measured: it covers the CONDITIONS mode button at 1440, 1280 and 1100, hit-tested unclickable for 10 of 30 one-second samples. A diversion that eats a control is worse than no diversion -- the same argument as the nav panel above, arriving from a new direction. / body:has(.ws-hatch) .cp-note { display: none; } .cp-note-card { display: flex; align-items: flex-start; gap: var(--sp-3); background: linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%); border: 1px solid #dfe6ee; border-left: 3px solid var(--tenant-accent, #c8a24a); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: 1.55; color: #3e4c59; box-shadow: 0 1px 2px rgba(31, 41, 51, 0.07), 0 14px 38px -8px rgba(31, 41, 51, 0.22); opacity: 0; pointer-events: auto; / ENTERS from slightly above, LEAVES to the right. Both eased rather than linear, and the exit is slower than the entry -- a fast exit reads as a dismissal, a slow one reads as it finishing its sentence. / transform: translate3d(0, -10px, 0); transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity; } .cp-note.cp-note-on .cp-note-card { opacity: 1; transform: translate3d(0, 0, 0); } .cp-note.cp-note-out .cp-note-card { opacity: 0; transform: translate3d(120px, 0, 0); transition: opacity 0.5s ease, transform 0.62s cubic-bezier(0.4, 0, 0.2, 1); } .cp-note-tag { display: block; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--tenant-accent, #b08a2e); margin-bottom: var(--sp-1); } .cp-note-text { display: block; } / The × is a real button so it is keyboard-reachable. Quiet until you go near it: an escape hatch should be findable, not competing with the thing it closes. / .cp-note-x { flex: none; margin-left: var(--sp-1); align-self: flex-start; background: none; border: none; cursor: pointer; font-size: var(--fs-lg); line-height: 1; padding: 0 var(--sp-1) var(--sp-05); color: var(--n-400); border-radius: var(--r-md); transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .cp-note-x:hover { color: #3e4c59; background: #eef2f6; } .cp-note-x:focus-visible { outline: 2px solid var(--tenant-accent, #c8a24a); outline-offset: 1px; } / Reduced motion keeps the ACKNOWLEDGEMENT and drops the animation. The acknowledgement is the accessibility feature here; the spinning is the decoration, and this is which of the two survives. / @media (prefers-reduced-motion: reduce) { .cp-busy::after { animation: none; border-right-color: currentColor; opacity: 0.4; } .cp-bar.cp-bar-on { animation: none; width: 100%; opacity: 0.55; } .cp-note { transition: none; } } @media (max-width: 900px) { / THE BAR WRAPS HERE, so `top: 74px` stops being a number that clears it: `nav` takes `flex-basis: 100%` and a row of its own, and the whole bar goes to roughly 116-160px depending on how many rows the links need. A note pinned 74px down would sit ON the nav it was just moved away from -- and any panel opening out of that nav opens downward, into the same space again. Anchored to the BOTTOM instead of guessing a height. It cannot collide with a top bar of any height, it needs no number that goes stale when a nav item is added, and on a tablet the bottom-right corner is the one place nothing else lives. The exit animation is unchanged -- it still leaves to the right. / .cp-note { top: auto; bottom: var(--sp-4); } } @media (max-width: 760px) { / On a phone the note would sit over the content it is distracting from. / .cp-note { display: none; } } / ---- The document viewer ------------------------------------------------- document_viewer.py renders it; viewer_routes.py serves it. THE ACCESSIBILITY RULE THIS SECTION EXISTS FOR: the two stances a mark can carry are `supports` and `contradicts`, and reading one as the other is a case-strategy error rather than a cosmetic one. So colour NEVER carries the distinction on its own. Four redundant signals, in order of how reliably they survive: 1. A VISIBLE WORD in the badge ("supports" / "contradicts"). Survives greyscale, a photocopy, a fax, copy-paste into plain text, a screen reader, and every colour-vision deficiency. It is first because it is the one that always works and needs no legend. 2. TEXTURE. Flat yellow for supports, DIAGONAL STRIPES for contradicts. A stripe is still a stripe in black and white, which is what makes it the signal that survives printing. 3. UNDERLINE STYLE. Single for supports, DOUBLE for contradicts. It is intrinsic to the text run, so it survives a reader-mode or a high-contrast theme that strips backgrounds. 4. THE LEFT RULE. Solid vs dashed -- the fastest cue when scanning a column of quotes rather than reading one. Yellow is present because it was asked for, and it is the FIFTH signal, not the first. Both variants keep #1f2933 text on a light yellow ground, which stays well above 4.5:1 -- a mark you cannot read is not a highlight. THE YELLOW IS INHERITED, NOT REDECLARED. `.dv-mark` sets no background at all: it is a ``, so it takes #fff59d from the bare `mark` rule above, which exists because of the direct instruction behind the Road Map's Match Evidence highlighting. One yellow in the product, changed in one place -- a second, nearly-identical yellow here would be the kind of drift nobody notices until the two surfaces are seen side by side. / .dv { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-4); align-items: start; } .dv-left, .dv-right { min-width: 0; } .dv-back { margin: 0 0 var(--sp-3); } .dv-doc h2, .dv-quotes h2, .dv-assess h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-md); } / A tall frame, because the thing being read is a document. 70vh rather than a pixel height so it uses whatever screen it is on. / .dv-doc-frame { width: 100%; height: 70vh; border: 1px solid #cbd2d9; border-radius: var(--r-md); background: #fff; margin-top: var(--sp-2); } .dv-doc-link { margin: var(--sp-2) 0 0; } / THE IN-APP READER. An