/* Cascade — app.css Single stylesheet for the greenfield build. Uses @layer for deterministic specificity across the cascade. Visual language locked to navy/gold per docs/DEMO_ARCHITECTURE.md + demo precedent. Load order: tokens — design tokens (CSS custom properties) reset — minimal modern reset base — typography, form/element defaults layout — site shell (header, nav, main, footer, skip-link) components — cards, buttons, badges, tables, forms, tiles utilities — atomic helpers (always win against components) */ @layer tokens, reset, base, layout, components, utilities; /* ------------------------------------------------------------------------- @layer tokens — design tokens ------------------------------------------------------------------------- */ @layer tokens { :root { /* Brand palette — locked */ --color-navy: #1A2744; --color-navy-600: #232F52; /* hover on navy surfaces */ --color-navy-800: #141E36; /* footer, deeper accents */ --color-gold: #C9A84C; --color-gold-600: #B89838; /* hover on gold surfaces */ /* Neutrals */ --color-bg: #F5F5F7; --color-surface: #FFFFFF; --color-border: #E5E7EB; --color-border-strong: #D1D5DB; --color-text: #1A2744; --color-text-muted: #6B7280; --color-text-subtle: #9CA3AF; /* Semantic */ --color-success: #065F46; --color-success-bg: #D1FAE5; --color-warning: #78350F; --color-warning-bg: #FEF3C7; --color-danger: #991B1B; --color-danger-bg: #FEE2E2; --color-info: #1E40AF; --color-info-bg: #DBEAFE; /* Role-based aliases (prefer these in components). Dark-mode block below overrides these; components should reference these, not the brand tokens. */ --bg-page: var(--color-bg); --bg-surface: var(--color-surface); --bg-surface-2: #F9FAFB; /* sunken surface (search bar, dashed placeholders, ss-mini) */ --bg-header: var(--color-navy); /* legacy — used only by old top-header. Dying. */ --fg-on-navy: #FFFFFF; --fg-accent: var(--color-gold); --border-card: var(--color-border); /* Semantic accent — drives hover/active states, badges, links. Defaults to brand gold; a future per-user preference can override via inline style on . Components reference --accent, not --color-gold, so the swap is transparent. */ --accent: var(--color-gold); --accent-fg: #1A2744; --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent); /* Density tokens — mutated by [data-density="..."] block */ --row-h: 40px; --pad: 16px; --gap: 12px; /* User-preference radius — mutated by [data-radius="..."] block */ --radius: var(--radius-md); /* Sidebar width — mutated by [data-sidebar="..."] block */ --sidebar-w: 240px; /* Type */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; /* Fluid type scale — clamp(min, preferred-vw, max). Each step grows ~1rem between 320px and 1400px viewport. */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.9375rem; /* 15px — matches demo */ --fs-md: 1rem; /* 16px */ --fs-lg: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); --fs-xl: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem); --fs-2xl: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); --fs-3xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-base: 1.5; --lh-relaxed: 1.65; /* Spacing — 4px base */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ /* Radii */ --radius-sm: 3px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* Shadows — 3 levels, consistent with demo */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* Z-index scale */ --z-back-to-top: 90; --z-header: 100; --z-dropdown: 200; --z-toast: 800; --z-modal: 1000; /* Motion */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --duration-1: 120ms; --duration-2: 200ms; --duration-3: 320ms; /* Layout */ --container-max: 1200px; --container-pad: var(--space-8); /* Surface aliases — referenced across pages as --surface-1/2/3. Map to the canonical bg-/border tokens so callers don't have to remember which name the token system uses. */ --surface-1: var(--bg-surface); --surface-2: var(--bg-surface-2); --surface-3: var(--color-border-strong); } /* -- Dark mode -- Applied by [data-dark="true"] on . Keeps navy/gold readable by using navy as an accented dark surface rather than flattening to black. */ :root[data-dark="true"] { --color-bg: #0F1628; /* deep navy-black */ --color-surface: #1A2744; /* brand navy becomes the card surface */ --color-border: #2A3A63; --color-border-strong: #3A4C7A; --color-text: #F5F5F7; --color-text-muted: #9CA3AF; --color-text-subtle: #6B7280; --bg-page: var(--color-bg); --bg-surface: var(--color-surface); --bg-surface-2: #14203A; --border-card: var(--color-border); --accent-fg: #1A2744; --accent-soft: color-mix(in srgb, var(--accent) 22%, #000); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); } /* -- Density variants (personal preference) -- */ :root[data-density="comfortable"] { --row-h: 48px; --pad: 20px; --gap: 16px; } :root[data-density="dense"] { --row-h: 32px; --pad: 12px; --gap: 8px; } /* -- Radius variant (personal preference) -- Also bumps radius-lg + radius-sm in proportion so whole surface feels cohesive. */ :root[data-radius="sharp"] { --radius: 2px; --radius-sm: 2px; --radius-lg: 4px; } :root[data-radius="soft"] { --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; } /* -- Sidebar variant -- */ :root[data-sidebar="narrow"] { --sidebar-w: 64px; } :root[data-sidebar="wide"] { --sidebar-w: 240px; } } /* ------------------------------------------------------------------------- @layer reset — minimal modern reset (Inspired by Andy Bell / Josh Comeau) ------------------------------------------------------------------------- */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; } body { min-block-size: 100vh; line-height: var(--lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-inline-size: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Break unbreakable strings (long URLs, raw JSON, email-list CCs) at any character rather than overflowing the cell. Catches the most common cause of horizontal page scroll on tables and dl-grids. */ td, dd { overflow-wrap: anywhere; } /* Make the HTML `hidden` attribute actually hide elements. The UA stylesheet sets [hidden]{display:none} without !important, so any author rule that touches `display` on the same element wins by cascade order and the element stays visible. Adding !important here closes that loophole site-wide so element.hidden = true always hides. (Caught 2026-05-18 on .nav-item__submenu which had display:flex from the author rule.) */ [hidden] { display: none !important; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } /* ------------------------------------------------------------------------- @layer base — document defaults ------------------------------------------------------------------------- */ @layer base { body { font-family: var(--font-sans); font-size: var(--fs-base); color: var(--color-text); background: var(--bg-page); } h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); font-weight: var(--fw-semibold); color: var(--color-navy); } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } a { color: var(--color-navy); text-decoration-color: var(--color-gold); text-underline-offset: 2px; } a:hover { color: var(--color-navy-600); } :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--color-gold); color: var(--color-navy); } hr { border: 0; border-block-start: 1px solid var(--color-border); margin-block: var(--space-6); } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.875em; } } /* ------------------------------------------------------------------------- @layer layout — site shell ------------------------------------------------------------------------- */ @layer layout { /* Skip link — keyboard users first stop */ .skip-link { position: absolute; inset-block-start: -40px; inset-inline-start: var(--space-4); background: var(--color-navy); color: var(--fg-on-navy); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); z-index: calc(var(--z-header) + 1); transition: inset-block-start var(--duration-2) var(--ease-out); } .skip-link:focus { inset-block-start: var(--space-2); } /* ------- App shell: sidebar + topbar ------- */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-block-size: 100vh; /* Prevent any wide grid child (stats row, table, sticky pill) from pushing the whole page past the viewport on a phone. Without min-width:0 the 1fr column resolves to max-content, not the remaining track width — see assets/css mobile audit 2026-05-19. NOTE: do NOT put overflow:hidden here. The sidebar is a direct child and uses position:sticky; any overflow on an ancestor creates a new scroll container that breaks sticky. The clip lives on .page-area instead (regression caught 2026-05-20). */ min-inline-size: 0; max-inline-size: 100vw; } /* The 1fr column owns its own width discipline: shrink-to-fit + clip any too-wide child so the page can't grow past the viewport. Doing this here instead of on .app-shell keeps the sidebar's sticky positioning working (sticky needs no overflow on ancestors). */ .app-shell > .page-area { min-inline-size: 0; max-inline-size: 100%; overflow-x: hidden; } @media (max-width: 800px) { .app-shell { grid-template-columns: 1fr; } } /* ------- Sidebar ------- */ .sidebar { background: var(--bg-surface); border-inline-end: 1px solid var(--color-border); display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); position: sticky; inset-block-start: 0; block-size: 100vh; overflow-y: auto; } /* ------- Blake modals (