/* Report Console — refined-utilitarian skin (2026-06-11 visual refresh). One plain CSS file, no build step. Inter is self-hosted (no CDN — Tailscale-only app). Every color is a token so the dark variant below only remaps :root. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; /* variable font — one latin file covers all weights */ font-display: swap; src: url("fonts/inter-var-latin.260c81a4759b.woff2") format("woff2"); } :root { --brand:#1e3a5f; /* navy identity (header) */ --brand-ink:#dbe6f4; /* text on navy */ --accent:#2563eb; --accent-strong:#1d4ed8; --ink:#0f172a; --soft:#5d6b80; /* 5.09:1 on --bg, 4.94 on --code-bg (AA off-card too) */ --bg:#f6f8fb; --surface:#ffffff; --line:#e2e8f0; /* graphics tokens (badges, rails, borders) … */ --ok:#16a34a; --warn:#d97706; --bad:#dc2626; /* …and darker -ink twins for SMALL TEXT — the plain tokens fail WCAG AA on white */ --ok-ink:#15803d; --warn-ink:#b45309; --bad-ink:#b91c1c; --tint-accent:#eff6ff; --tint-ok:#f0fdf4; --tint-warn:#fffbeb; --tint-bad:#fef2f2; --code-bg:#f1f5f9; --press:#e2e8f0; /* Radius scale (named tiers, values = the ones already in use → no visual change): xs inline code chips · sm form controls/nav · md default panels · lg cards/pills. */ --radius-xs:.25rem; --radius-sm:.35rem; --radius:.45rem; --radius-lg:.6rem; --shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08); /* Attention accent (amber) — needs-you / stale / aging. Distinct from --accent (action) and --bad (fail/destructive). The -ink twin clears AA for small text on white/tints. */ --attn-ink:#b45309; --attn-tint:#fffbeb; /* Type scale (documents the recurring sizes; values match what's in use). */ --text-xs:.75rem; --text-sm:.85rem; --text-base:1rem; --text-lg:1.15rem; --text-xl:1.5rem; /* Job-log block (a dark console look in BOTH themes — deliberately not remapped). */ --joblog-bg:#0b1426; --joblog-ink:#dbe6f4; --sidebar-w:15.5rem; } * { box-sizing:border-box; } /* 16px base: anything smaller in an input makes iOS Safari auto-zoom on focus. */ body { margin:0; font:16px/1.55 Inter, system-ui, sans-serif; color:var(--ink); background:var(--bg); -webkit-text-size-adjust:100%; } h1 { font-size:1.55rem; font-weight:700; letter-spacing:-.015em; } h2 { font-size:1.1rem; font-weight:650; letter-spacing:-.01em; color:var(--ink); } /* Micro-interactions: one shared 150ms rhythm, fully disabled on reduced motion. */ a, button, .badge, .btn-primary { transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration:.01ms !important; animation:none !important; } } /* Inline SVG icons (sprite in _icon_sprite.html). Stroke/fill via currentColor so they theme for free and inherit link/button color. Decorative — labels live on the surrounding element. */ .icon { width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.18em; } header strong .icon { width:1.3rem; height:1.3rem; vertical-align:-.24em; color:var(--brand-ink); } header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.4rem 1rem; padding:.6rem max(1rem, env(safe-area-inset-right)) .6rem max(1rem, env(safe-area-inset-left)); background:var(--brand); color:#fff; } header strong { font-weight:650; letter-spacing:-.01em; } nav { display:flex; flex-wrap:wrap; gap:.2rem .4rem; align-items:center; } /* 44px touch targets for nav links and all buttons (Apple HIG minimum). */ nav a { color:var(--brand-ink); text-decoration:none; padding:.6rem .5rem; min-height:44px; display:inline-flex; align-items:center; gap:.45rem; border-radius:var(--radius-sm); } nav a:hover { background:rgba(255,255,255,.08); color:#fff; } nav a:active { background:rgba(255,255,255,.16); color:#fff; } nav a.active { background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 0 -2px 0 #fff; } /* Log out stays a POST form (CSRF) but reads as just another nav link. */ header form.inline button { background:transparent; border:none; color:var(--brand-ink); border-radius:var(--radius-sm); display:inline-flex; align-items:center; gap:.45rem; } header form.inline button:hover { background:rgba(255,255,255,.08); color:#fff; } form.inline { display:inline; } /* The header title doubles as a home link — inherit the navy-header colors, no underline. */ header strong .brand-link { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; border-radius:var(--radius-sm); } /* Keyboard skip-link: parked off-screen until focused, then pinned above the chrome so a keyboard user can jump past the nav. Snaps into place under reduced motion (transition off). */ .skip-link { position:fixed; left:.5rem; top:-4rem; z-index:1000; background:var(--surface); color:var(--accent-strong); border:1px solid var(--accent); border-radius:var(--radius); padding:.5rem .9rem; font-weight:600; text-decoration:none; transition:top .15s ease; } .skip-link:focus { top:.5rem; } main:focus { outline:none; } /* programmatic target after skipping — suppress the full-page ring */ main { max-width:60rem; margin:0 auto; padding:1rem max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); } main a { color:var(--accent); } main a:hover { color:var(--accent-strong); } /* ── App shell: top bar on phones, left sidebar on desktop (≥1024px). ONE