/* ============================================================================= KANINE — Blazor design-system foundation (Step-0, UI-FIRST gate) ----------------------------------------------------------------------------- THE PORT. This is the hand-written `kl-*` / `kf-*` realization of the prototype's design system (`ProposedUI/design-system/kanine.css` + `kanine.config.js`). The prototype uses Tailwind utilities for component LOOK; the Blazor build does NOT ship Tailwind — its pages carry semantic `kl--*` / `kf-*` class names that, until now, had NO backing CSS (screens rendered unstyled). This file is that backing: the --k-* brand token mirror, the light/dark/outdoor flip, and a base treatment for the shared component vocabulary, keyed to the SUFFIX of the page-prefixed families (kl-ce-card, kl-uof-field, kl-medit-input, …) so every screen gets coherent, on-brand structure for free. Per-page R11 then REFINES each screen with page-scoped CSS; it never reinvents the system. Loaded BEFORE app.css (which keeps the a11y target-size/reflow overrides that must win) so app.css's narrower fixes take precedence on cascade ties. Source of truth for hexes/tokens: brand/BRAND-AND-DESIGN.md + DESIGN-INTEGRATION -BRIEF §5.1 + ProposedUI/design-system/kanine.css. Do not introduce off-token colour here — the R11 token-conformance scan reds on it. SCOPING RULE (load-bearing): the broad suffix-family selectors are scoped under `.kl-shell-main` (the page content region). The app shell chrome (the ShellNav `.kl-shellnav-*` rail + top bar) lives OUTSIDE `
`, so a family like [class*="-header"] can never bleed onto the chrome. Named primitives (kf-*, kl-btn, kl-dialog) are global so top-layer + cross-cutting buttons style everywhere. ========================================================================== */ /* ---- 0. Self-hosted web fonts (offline-first; no CDN) -------------------- The four families the tokens below name are SELF-HOSTED from wwwroot/fonts because Kanine runs offline in the field — a Google Fonts CDN link would vanish the moment the device loses signal, and the icon font failing open renders ligature NAMES as literal words (the pg35 finding this fixes). Regenerate with tools/fonts/build-fonts.py. Material Symbols is subset to the 68 icons in tools/fonts/icon-names.txt (3.95 MB full -> ~50 KB); the text families are Google's 'latin' slice. Licenses in wwwroot/fonts/LICENSE.md (Material Symbols Apache-2.0; the rest OFL-1.1). The text faces use font-display:optional + a preload of each woff2 (App.razor): the faces are LOCAL files, so with the preload they are in the font cache at first paint and always render — but if a paint ever races the load, the browser keeps the fallback for that page view instead of RE-WRAPPING painted text (font-display:swap re-flowed content-sized bands site-wide — the record-view CLS 0.24 root cause, final-draft sweep 2026-07-03). The ICON face uses font-display:block so the load window shows a blank box, never a flash of the literal ligature word. */ @font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:400 800; font-display:optional; src:url("../fonts/hanken-grotesk-latin.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:normal; font-weight:400 600; font-display:optional; src:url("../fonts/inter-latin.woff2") format("woff2"); } @font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400 600; font-display:optional; src:url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); } @font-face { font-family:"Material Symbols Outlined"; font-style:normal; font-weight:100 700; font-display:block; src:url("../fonts/material-symbols-outlined.woff2") format("woff2"); } /* The icon primitive. Pages render icons as LIGATURE NAMES, e.g. verified; the 'liga' feature maps the name to its glyph. Default axes mirror the prototype (opsz 24 / wght 400 / FILL 0 / GRAD 0); a page may override font-variation-settings (e.g. 'FILL' 1 for a filled state). */ .material-symbols-outlined { font-family:"Material Symbols Outlined"; font-weight:normal; font-style:normal; font-size:24px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; /* pg40 CLS hardening: reserve EXACTLY the glyph's 1em advance + clip the pre-load ligature NAME. font-display:block (above) only makes the FOUT text INVISIBLE — it still occupies the full ligature-name width ("radio_button_unchecked" ≈ 400px) and then collapses to a ~1em glyph when the icon font applies, a reflow that produced a deterministic ~0.32 CLS on /suspects' icon-bearing filter chips. The LOADED-state width is unchanged (Material Symbols glyphs advance 1em), so this is purely a loading-state guard that cannot move any already-painted icon — a strict, app-wide improvement. text-align:center keeps the glyph optically centred in the box. */ inline-size:1em; overflow:hidden; text-align:center; -webkit-font-feature-settings:"liga"; font-feature-settings:"liga"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24; vertical-align:middle; } /* ---- 1. Token mirror (--k-* ; mirrors kanine.css §1) ---------------------- */ :root { --k-ink-900:#0A1A2B; --k-ink-800:#0E2236; --k-ink-700:#13304A; --k-ink-500:#2B5A8C; --k-teal-700:#0A7D77; --k-teal-500:#10B5A8; --k-teal-400:#2DD4C4; --k-paper:#F5F7FA; --k-gray-100:#E6EBF2; --k-gray-300:#C2CCD9; --k-gray-500:#7A8699; --k-gray-700:#3E4A5C; --k-gray-900:#161C26; --k-seal-brass:#C9A227; --k-success:#1E9E6A; --k-caution:#E08A00; --k-critical:#D7402B; --k-info:#2B7FFF; /* flipping semantic channels — RGB is the source of truth (swap with mode) */ --k-bg-rgb: 245 247 250; /* paper #F5F7FA */ --k-surface-rgb: 255 255 255; /* white card */ --k-surface-2-rgb: 238 242 247; /* #EEF2F7 subtle fill */ --k-surface-3-rgb: 230 235 242; /* #E6EBF2 */ --k-text-rgb: 14 34 54; /* ink-800 body text */ --k-text-muted-rgb: 62 74 92; /* gray-700 muted */ --k-border-rgb: 194 204 217; /* gray-300 */ --k-outline-rgb: 122 134 153; /* gray-500 */ --k-bg:rgb(var(--k-bg-rgb)); --k-surface:rgb(var(--k-surface-rgb)); --k-surface-2:rgb(var(--k-surface-2-rgb)); --k-surface-3:rgb(var(--k-surface-3-rgb)); --k-text:rgb(var(--k-text-rgb)); --k-text-muted:rgb(var(--k-text-muted-rgb)); --k-border:rgb(var(--k-border-rgb)); --k-outline:rgb(var(--k-outline-rgb)); --k-accent:var(--k-teal-700); /* teal as TEXT/foreground accent (AA on light) */ --k-accent-bright:var(--k-teal-500); --k-on-accent:#FFFFFF; --k-header-bg:var(--k-ink-800); --k-header-text:#FFFFFF; --k-focus:var(--k-teal-400); --k-font-display:"Hanken Grotesk",system-ui,sans-serif; --k-font-ui:"Inter","IBM Plex Sans",system-ui,sans-serif; --k-font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace; --k-space-1:4px; --k-space-2:8px; --k-space-3:12px; --k-space-4:16px; --k-space-6:24px; --k-space-8:32px; --k-space-12:48px; --k-space-16:64px; --k-radius-sm:4px; --k-radius-md:8px; --k-radius-lg:16px; --k-radius-xl:28px; --k-radius-full:9999px; --k-elev-1:0 1px 2px rgb(0 0 0 / .08); --k-elev-2:0 2px 6px rgb(0 0 0 / .10); --k-elev-3:0 6px 16px rgb(0 0 0 / .12); --k-touch:48px; --k-content-max:1120px; /* §A10 phone-card title line (§8b-m). Both are DERIVED, not chosen: the line floor is the touch target minus the card's block padding, which is the tallest line the 48px pinned kebab can sit on while bleeding symmetrically into that padding instead of reaching the next line; the reserve is the pinned slot's own width plus one gutter. They are tokens so the pin inset, the line height and the horizontal reserve cannot drift apart in three separate rules — the guard test asserts they are still derived from --k-touch. */ --k-tcard-line:calc(var(--k-touch) - var(--k-space-3)); --k-tcard-reserve:calc(var(--k-touch) + var(--k-space-2)); /* motion — restrained-premium register (R11). Calm, precise; signature flows override. */ --k-ease:cubic-bezier(.2,.6,.2,1); --k-dur-1:.12s; --k-dur-2:.2s; --k-dur-3:.32s; } /* ---- 2. Modes (mirrors kanine.css §2) ------------------------------------- */ /* Dark: never pure black (halation). Set by the shell theme toggle (html.dark). */ html.dark { --k-bg-rgb: 15 22 32; --k-surface-rgb: 22 30 43; --k-surface-2-rgb: 30 40 56; --k-surface-3-rgb: 40 53 73; --k-text-rgb: 230 235 242; --k-text-muted-rgb: 159 176 194; /* R11 punch-list TOP-5: dark card borders were near-invisible (#28394C on #161E2B). Raise the edge so a card reads AS a card in the dark field POV (still on the ink ramp; bg/surface tokens untouched so the R11 canvas gate holds). */ --k-border-rgb: 58 80 107; --k-outline-rgb: 122 140 162; --k-accent:var(--k-teal-400); --k-on-accent:var(--k-ink-900); --k-header-bg:#161E2B; } /* Outdoor / high-contrast: glove-grade, ≥7:1. Outdoor alone = light high-contrast. */ :root[data-outdoor="true"], html[data-outdoor="true"] { --k-bg-rgb: 255 255 255; --k-surface-rgb: 255 255 255; --k-surface-2-rgb: 237 242 247; --k-surface-3-rgb: 222 229 238; --k-text-rgb: 6 18 31; --k-text-muted-rgb: 35 53 74; --k-border-rgb: 43 90 140; --k-outline-rgb: 43 90 140; --k-accent:#066159; } /* Dark + outdoor = DARK high-contrast (night field). Specificity beats both singles. */ html.dark[data-outdoor="true"] { --k-bg-rgb: 6 11 18; --k-surface-rgb: 19 27 39; --k-surface-2-rgb: 30 41 56; --k-surface-3-rgb: 44 59 80; --k-text-rgb: 255 255 255; --k-text-muted-rgb: 201 214 229; --k-border-rgb: 86 116 148; --k-outline-rgb: 120 150 180; --k-accent: var(--k-teal-400); --k-on-accent: var(--k-ink-900); --k-header-bg: #0C141F; } html[data-outdoor="true"] body { font-size:18px; font-weight:500; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ---- 3. Base reset + typography ------------------------------------------- */ html { -webkit-text-size-adjust:100%; } body { margin:0; background:var(--k-bg); color:var(--k-text); font-family:var(--k-font-ui); font-size:16px; /* 16px floor (glare/low-vision) */ line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .k-mono { font-family:var(--k-font-mono); font-variant-ligatures:none; } .k-display { font-family:var(--k-font-display); } :where(a,button,input,select,textarea,[tabindex],[role="button"],[role="tab"],[role="switch"],[role="treeitem"]):focus-visible { outline:3px solid var(--k-focus); outline-offset:2px; border-radius:var(--k-radius-sm); } ::selection { background:color-mix(in srgb, var(--k-teal-500) 30%, transparent); } /* ---- 4. Page content region ----------------------------------------------- */ /* MainLayout's
is the content surface. Give the page a comfortable measure + rhythm; headings get the display face. */ .kl-shell-main { background:var(--k-bg); color:var(--k-text); } .kl-shell-main > * { box-sizing:border-box; } .kl-shell-main h1 { font-family:var(--k-font-display); font-size:clamp(22px, 2.2vw, 28px); line-height:1.2; font-weight:800; letter-spacing:-0.01em; margin:0 0 var(--k-space-4); color:var(--k-text); } .kl-shell-main h2 { font-family:var(--k-font-display); font-size:18px; font-weight:700; margin:var(--k-space-2) 0; } /* Buttons styled as links (a.kl-btn) must keep their button text colour, not the teal link colour (which, at its higher specificity, was washing the navy "New record" anchor to low-contrast teal-on-navy). Exclude any -btn class. */ .kl-shell-main a:not([class*="-btn"]) { color:var(--k-accent); text-underline-offset:2px; } .kl-shell-main p { color:var(--k-text); } /* ============================================================================= 5. THE COMPONENT FOUNDATION — suffix-keyed families, scoped to page content. Each rule targets the shared SUFFIX of the page-prefixed family classes, so kl-ce-card / kl-uof-card / kl-medit-card all inherit one card treatment, etc. `:where([class^="kl-"],[class*=" kl-"])[class$="-x"]` (ends-with) disambiguates -card from -card-title cleanly. ========================================================================== */ .kl-shell-main { --kf-field-gap: var(--k-space-2); } /* ---- 5a. Cards / sections ------------------------------------------------- */ /* `.kl-card` — the GENERIC card, and the one member of this family that had no rule at all (found 2026-07-24). The suffix selector matches the whole class ATTRIBUTE, so `class="kl-card"` alone happened to end in "-card" and picked the chrome up by luck, while every MULTI-class use — `kl-card kl-gate-profile`, `kl-card kl-onb-fields`, `kl-card kl-hub-group`, `kl-card kl-sign-pad`, … — ended in some other suffix and got NOTHING. On the device that shipped the /signin remembered-profile tile as a raw UA