/* Theme system, 2026-08-24 per Jake: two named directions from the theme-pitch artifact -- "Daylight" as the light theme, "Telemetry" (dark instrument-panel/dashcam feel) as the dark theme. Same three-state pattern (system default, overridable) as the pitch artifact's own chrome used: bare :root is the light default; the media query covers "OS says dark and the user hasn't overridden to light"; the [data-theme="dark"] block covers an explicit user choice regardless of OS. base.html's toggle button sets/clears documentElement.dataset.theme and mirrors it to localStorage; a tiny inline script at the top of re-applies it on every load before first paint so there's no flash of the wrong theme. */ :root{--bg:#f3f4fa;--surf:#fff;--surf2:#eceefa;--bdr:rgba(20,24,46,.09);--bdr2:rgba(20,24,46,.18);--tx:#15182b;--tx2:#666c8a; --grn:#0f8f5f;--grn-bg:#dff5ea;--amb:#a8650a;--amb-bg:#faeed7;--red:#c23a4d;--red-bg:#fbe9ec;--blu:#0d7c82;--blu-bg:#dff4f3; --r:10px;--font:'IBM Plex Sans',sans-serif;--mono:'IBM Plex Mono',monospace;--tbl-bdr:var(--bdr)} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d1013;--surf:#15191c;--surf2:#1b2023;--bdr:rgba(255,255,255,.09);--bdr2:rgba(255,255,255,.18); --tx:#e8ece9;--tx2:#8a9599;--grn:#4fd9a8;--grn-bg:#0d2b23;--amb:#f2c14e;--amb-bg:#332405;--red:#ff6b6b;--red-bg:#391414;--blu:#ff9d3d;--blu-bg:#3a2408; --r:4px;--mono:'JetBrains Mono',monospace;--tbl-bdr:rgba(255,157,61,.4)}} :root[data-theme="dark"]{--bg:#0d1013;--surf:#15191c;--surf2:#1b2023;--bdr:rgba(255,255,255,.09);--bdr2:rgba(255,255,255,.18); --tx:#e8ece9;--tx2:#8a9599;--grn:#4fd9a8;--grn-bg:#0d2b23;--amb:#f2c14e;--amb-bg:#332405;--red:#ff6b6b;--red-bg:#391414;--blu:#ff9d3d;--blu-bg:#3a2408; --r:4px;--mono:'JetBrains Mono',monospace;--tbl-bdr:rgba(255,157,61,.4)} /* Telemetry's instrument-panel grid, dark mode only -- subtle (drawn in --bdr, already a low-opacity line colour) so it reads as texture, not noise. */ :root[data-theme="dark"] body{background-image:linear-gradient(var(--bdr) 1px,transparent 1px),linear-gradient(90deg,var(--bdr) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) body{background-image:linear-gradient(var(--bdr) 1px,transparent 1px),linear-gradient(90deg,var(--bdr) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px}} .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%; border:1px solid var(--bdr2);background:var(--surf2);color:var(--tx2);padding:0;margin-right:4px;vertical-align:middle;cursor:pointer} .theme-toggle:hover{color:var(--tx);border-color:var(--tx2);background:var(--surf2)} /* Dark/Telemetry's other big signature besides colour+radius: mono, uppercase, letter-spaced "instrument panel" chrome on titles/labels -- while body copy and table cells stay plain IBM Plex Sans (mono everywhere would risk exactly the width-driven horizontal-scroll problem fixed on people.html 2026-08-21). Scoped tight to a few structural elements, not a global font swap. */ :root[data-theme="dark"] .tt,:root[data-theme="dark"] h1,:root[data-theme="dark"] .nav-sec,:root[data-theme="dark"] .badge{font-family:var(--mono)} :root[data-theme="dark"] .tt,:root[data-theme="dark"] h1{text-transform:uppercase;letter-spacing:.03em} :root[data-theme="dark"] .badge{text-transform:uppercase;letter-spacing:.03em;border-radius:2px} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tt,:root:not([data-theme="light"]) h1,:root:not([data-theme="light"]) .nav-sec,:root:not([data-theme="light"]) .badge{font-family:var(--mono)} :root:not([data-theme="light"]) .tt,:root:not([data-theme="light"]) h1{text-transform:uppercase;letter-spacing:.03em} :root:not([data-theme="light"]) .badge{text-transform:uppercase;letter-spacing:.03em;border-radius:2px} } .theme-toggle .icon-moon{display:none} :root[data-theme="dark"] .theme-toggle .icon-sun{display:none} :root[data-theme="dark"] .theme-toggle .icon-moon{display:block} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none} :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block}} *{box-sizing:border-box;margin:0;padding:0} body{font-family:var(--font);background:var(--bg);color:var(--tx);font-size:14px;line-height:1.5} .wrap{max-width:1200px;margin:0 auto;padding:1.25rem} h1{font-size:19px;margin-bottom:.75rem;padding-left:.6rem;border-left:4px solid var(--blu)} h2{font-size:14px;margin-bottom:.5rem} .topbar{background:var(--surf);border-bottom:3px solid var(--blu);padding:.5rem 1.25rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px} .tt{font-weight:600;color:var(--blu)}.topbar nav{display:flex;gap:2px;flex-wrap:wrap} .topbar a{color:var(--tx2);text-decoration:none;padding:4px 9px;border-radius:var(--r);font-size:13px} .topbar a:hover{background:var(--surf2);color:var(--tx)} .banner{background:var(--blu-bg);border:1px solid var(--blu);border-radius:var(--r);padding:.6rem 1rem;margin:0 1.25rem;margin-top:.75rem;font-size:13px} .banner.warn{background:var(--amb-bg);border-color:var(--amb)} .banner.ok{background:var(--grn-bg);border-color:var(--grn)} /* 2026-08-18: toasts for ajax-form's in-place submits (base.html) -- same color rules as .banner (default/warn/ok) so a toast reads the same way a full-page flash message always has, just transient and stacked bottom-right instead of pinned under the topbar. */ #toast-host{position:fixed;right:1.25rem;bottom:1.25rem;display:flex;flex-direction:column;gap:.5rem;z-index:999;max-width:360px} .toast{background:var(--blu-bg);border:1px solid var(--blu);border-radius:var(--r);padding:.6rem 1rem;font-size:13px; box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s} .toast.show{opacity:1;transform:translateY(0)} .toast.warn{background:var(--amb-bg);border-color:var(--amb)} .toast.ok{background:var(--grn-bg);border-color:var(--grn)} /* 2026-08-24: was a hardcoded 12px, same in both themes -- meant --r's per-theme value (set up for exactly this) never actually reached the single most dominant surface on the page, so dark/Telemetry never got its tight, hard-edged corners and read softer/more Daylight-ish than intended. lcard/guide-card below had the identical hardcoded-12px miss. */ .card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r);padding:1rem 1.15rem;margin-bottom:.85rem} a{color:var(--blu)}a:hover{text-decoration:underline} /* Most links already have a more specific rule (.rt a, .topbar a, .pt, .pc-link, .guide-*, etc) that wins over this on specificity -- this only catches the bare, unclassed tags scattered through templates (task links, "Sync now", "Reconsider", banner links...) that were otherwise falling through to the browser's default link blue, unrelated to either theme and doing "a horrible contrast" against Telemetry's dark background. */ .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:.85rem;margin-bottom:.85rem} .grid2 .card{margin:0} .mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:.5rem} .met{background:var(--surf2);border-radius:var(--r);padding:.55rem .8rem} .met-l{font-size:11px;color:var(--tx2)}.met-v{font-size:20px;font-weight:600}.met-s{font-size:11px;color:var(--tx2)} .muted{color:var(--tx2);font-size:12px}.ok{color:var(--grn)}.small{font-size:11px}.mono{font-family:var(--mono);font-size:12px} input,select,button{font-family:var(--font);font-size:13px;padding:6px 9px;border:1px solid var(--bdr2);border-radius:var(--r);background:var(--surf);color:var(--tx)} input:focus,select:focus{outline:none;border-color:var(--tx)} input.short{width:64px}input.hin{width:56px;text-align:center;font-family:var(--mono)} /* 2026-08-21, per Jake: select.short was never actually a rule (only input.short existed), so people.html's reassign