/* hub_core/ui_shared/static/app.css * * Retracted in place (TENANCY-SPEC.md P7, §9 row P7, §6.1 SPEC-DECISION, * 2026-09-25) -- this file's own header used to read "frontend_flask/ * static/app.css". `git mv`'d here so the hub, farm_app and buy_app can all * serve the SAME component layer from one blueprint (`hub_core/ui_shared`, * `ui_shared_bp`, static_url_path "/ui-static") instead of three copies -- * see that package's own `__init__.py` and `templates/_head_assets.html`. * * Redesign P1 (docs/redesign/SPEC.md §3, §6 P1 row) -- the new * design-system COMPONENT layer: the rail/tabs shell base.html renders * around every existing page, plus the badge/banner/button/table/ledger/ * drawer/toast/case-tile/meter component classes later phases build * screens out of. Loads after tokens.css (every colour here is a * `var(--token)`, never a bare hex). * * Retracted in place (REDESIGN PHASE P11) -- the line above used to end * "...and before legacy style.css, which keeps winning any tie until P11 * folds it in (base.html's own load-order comment)." P11 folded it in: * `static/style.css` is deleted, its rules moved verbatim into this * file's own trailing "Folded from static/style.css" section (see that * section's own header). Every "style.css already owns/has/does..." * comment below this point, dating from P1-P10, describes the scoping * decisions that were true when style.css was a SEPARATE file being * planned around -- those decisions (what's scoped under `.rd`, what's * left bare) still hold exactly as described, because the SAME class * names, at the SAME cascade position (last in this file), now live in * the folded section instead. Read "style.css" in those older comments * as "the folded section below" — not re-annotated line by line, since * the folded section's own header already gives the complete, current * account of what moved and why. * * RENDER-UNCHANGED RULE (pre-flight, binding for this whole file): nothing * here may change how any EXISTING page looks, except the global * `:focus-visible` ring, which is intended. style.css already owns dozens * of class names this redesign also wants (`.btn`, `.card`, `.num`, `.sub`, * `.small`, `.muted`, `.meter`/`.meter-*`, `.k`, `.v`, `.pill`, `.stack`, * `.top`, `.topbar`, `.actions`, `.alert`, `.hint`, `.field`, `.x`, * `.wrap`) and several bare element selectors (body's own font rules, * h1-h3, table/th/td, a, input). Every rule below that would otherwise * collide with one of those is scoped under an opt-in `.rd` ancestor class * (added to a page's root by the phase that redesigns it, never by this * one -- P1 adds `.rd` nowhere) or under one of the shell's own, * genuinely-new ancestor classes (`.rail`, `.shell-topbar`, `.nav`, * `.tabs`), which never appear in legacy markup. A rule whose selector is * a NEW name with no legacy match at all (`.badge`, `.banner`, `table.t`, * `.ledger`, `.kv`, `.stat`, `.drawer`, `.toast`, `.case-tile`, `.eyebrow`, * `.due`, `.money`, `.scroll-x`, `.shell`, `.rail`, `.main`, `.page`) is * left unscoped, per the pre-flight's own list. * * The one exception needing its own note: `.meter`'s OUTER box-model rule * (display/width/height/margin) is unscoped even though `.meter` already * exists in style.css (macro_meter.html's SVG), because the value set * below is byte-identical to style.css's own -- whichever one wins, * nothing on screen changes. Its CHILDREN use the new nested short names * (`.meter .track`/`.opening`/`.fill`/`.gap`/`.tick`), which never match * legacy's flat `meter-track`/`meter-seg-fill`/`meter-gap`/`meter-tick` * classes (a compound class name vs. two separate ones) -- so no * collision there either, this system is simply dormant until a later * phase's markup actually nests elements under a `.meter` this way. */ /* ---------- Global (unscoped, render-neutral) ---------- */ body { /* Only these two properties, per the pre-flight rule -- font-family/ size/line-height stay style.css's, which redeclares body's background and color right after this (loads later, same specificity, wins the tie) so every existing page keeps its exact legacy look. */ background: var(--ground); color: var(--ink); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* REDESIGN PHASE P11 (SPEC §3.11, phase brief D) -- the base.html skip link's own visually-hidden-until-focused technique. New name, unscoped (checked against style.css and this file's own colliding-name list -- no `.visually-hidden` anywhere in either). Hidden state matches the existing `.case-tile input` visually-hidden pattern (P1) exactly; `:focus` (not `:focus-visible`) on purpose -- a skip link should reveal on ANY focus, keyboard or programmatic, not just the visible-focus heuristic. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .visually-hidden:focus { position: fixed; top: var(--s-2); left: var(--s-2); width: auto; height: auto; padding: 8px 14px; margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow); z-index: 100; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- Shell: rail (desktop) / tabs (phone) ---------- */ .shell { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100%; } .rail { background: var(--surface); color: var(--ink); border-right: 1px solid var(--line); padding: var(--s-4) var(--s-3); display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: env(safe-area-inset-top, 0px); height: 100vh; font-family: var(--sans); font-size: 14px; line-height: 1.45; } .rail .brand, .shell-topbar .brand { display: flex; align-items: center; gap: var(--s-2); } .rail .brand { padding: 0 var(--s-2); } .rail .brand .mark, .shell-topbar .brand .mark { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--mono); font-weight: 500; font-size: 13px; flex: none; } .shell-topbar .brand .mark { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; } .rail .brand b, .shell-topbar .brand b { font-weight: 600; font-size: 14px; display: block; } .rail .brand span { font-size: 11px; color: var(--muted); } .nav { display: flex; flex-direction: column; gap: 2px; } .nav a { display: flex; align-items: center; gap: var(--s-2); padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; font-size: 13px; text-decoration: none; } .nav a:hover { background: var(--surface-2); text-decoration: none; } .nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-soft-ink); } /* REDESIGN PHASE P11 (SPEC §3.11, phase brief D) -- retract in place: this used to be `.nav .nav-group` (a descendant selector, `.nav-group` nested inside `