/*
 * GreenBird OS — "Obsidian Command Deck" design system (SHARED theme). OS-005.0.
 * See docs/design/DESIGN-SYSTEM.md (the spec) + docs/design/reference-console.html (the source of
 * truth — this CSS is extracted from it VERBATIM, per the spec's "use verbatim"). See ADR-028.
 *
 * The look in one line: serious, alive, expensive — a dark-first command deck for a sovereign AI
 * operating system. Near-black green-tinted canvas, a single emerald signal color (= live/healthy),
 * terminal-grade mono data type, ambient glow + grain, motion that proves the product is autonomous.
 *
 * SHARED: this is the one theme inherited everywhere — the operator console (OS-005), the public
 * funnels (OS-003 — brand-config.json can override --acc per brand while keeping the system), and
 * client project surfaces. Codified as global CSS custom properties + the keyframes + the signature
 * component classes. NOT a Tailwind default / shadcn theme.
 *
 * FONTS: SELF-HOSTED in-repo (OS-005.0.1 / ADR-029). The two families ship as latin-subset VARIABLE
 * woff2 under ./fonts/ (vendored from the Google Fonts woff2 endpoints; SIL Open Font License — free
 * to self-host/redistribute). The @font-face below loads them with RELATIVE urls, so they resolve
 * wherever the theme is consumed. There is NO external font <link> — the served surface makes ZERO
 * runtime requests to any external font host (the sovereign-perimeter requirement). The fonts must be
 * shipped ALONGSIDE this file (./fonts/*.woff2) by each consumer's build (the console bakes them next
 * to theme.css).
 */

/* ============================ 2. FONTS — self-hosted (no external runtime dependency) ============================ */
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal; font-weight:400 800; font-display:swap;
  src:url(fonts/schibsted-grotesk.woff2) format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/jetbrains-mono.woff2) format('woff2');
}

/* ============================ 1. TOKENS — OS-009 "Restrained Desk" (Direction 3) ============================ *
 * OS-009 Stage B (Direction 3 APPROVED): the deck is re-tuned to the institutional-desk standard — a
 * CHARCOAL field (never pure black), emerald as the SINGLE semantic accent (live/positive), amber for
 * "pending", hairlines instead of boxes, and ZERO gimmicks (no gradients, glows, depth-shadows, ambient
 * atmosphere, or grain). This is a TOKEN-LEVEL pass: the glow tokens are neutralised to transparent so
 * every box-shadow/drop-shadow glow disappears at the source, and the depth gradients are flattened in
 * the component rules below. Calm and exact — the partner-review / CFO-trust bar (docs/design/os-009-*). */
:root{
  /* layered charcoal surfaces (warm-neutral, never pure black) */
  --bg-0:#14181a; --bg-1:#191e20; --bg-2:#1e2426; --bg-3:#242b2e; --bg-4:#2c3438;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.14);
  /* OS-010 design elevation — RESTRAINED, NEUTRAL depth (not glow). A faint top highlight + a tight, dark,
     low-spread shadow give cards/panels real elevation the way Linear/Stripe/Vercel do — precision, not
     atmosphere. Applied to the signature surfaces below; kept subtle so the desk stays calm. */
  --hl:inset 0 1px 0 rgba(255,255,255,.05);
  --elev-1:0 1px 2px rgba(0,0,0,.30);
  --elev-2:0 6px 20px -8px rgba(0,0,0,.45);
  /* text */
  --t-0:#e7eae8; --t-1:#9aa6a2; --t-2:#5f6b67; --t-3:#414b48;
  /* emerald = the SINGLE signal color (live / healthy / active / positive) */
  --acc:#2fb37d; --acc-bright:#4ec98f; --acc-deep:#1f7e58;
  /* glow tokens NEUTRALISED — kills every glow/pulse-shadow at the source (Direction 3 = no glow).
     --acc-glow-soft stays a FAINT FLAT tint (used for active-nav / tag fills — a flat wash, not a glow). */
  --acc-glow:transparent; --acc-glow-soft:rgba(47,179,125,.10);
  /* status (sparse, meaning-mapped) — amber = pending (kept; consistent with existing amber-tint fills) */
  --amber:#e3a93a; --red:#e5604d; --blue:#4c9bf5; --violet:#9b8cff;
  /* geometry */
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  /* type */
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Schibsted Grotesk',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--sans); background:var(--bg-0); color:var(--t-0);
  overflow:hidden; -webkit-font-smoothing:antialiased; letter-spacing:-.01em;
}

/* ============================ 3. SURFACES & ATMOSPHERE — OS-009: stripped (Direction 3 = no atmosphere) ===
 * The ambient glows + noise grain are the antithesis of the restrained desk. They are removed (display:none)
 * rather than deleted, so the existing .atmos/.grain markup in each surface is a harmless no-op. A faint,
 * static hairline grid is kept (no mask, no animation) for a sense of plane — flat, not atmospheric. */
.atmos,.atmos .glow,.atmos .glow2,.grain{display:none}
.atmos{display:block;position:fixed;inset:0;z-index:0;pointer-events:none}
.atmos .grid{position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;mask-image:linear-gradient(180deg,#000,transparent 60%)}

/* ============================ 4. MOTION — boot sequence ============================ */
#boot{position:fixed;inset:0;z-index:100;background:var(--bg-0);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .6s ease}
#boot.done{opacity:0;pointer-events:none}
.boot-mark{filter:drop-shadow(0 0 22px var(--acc-glow))}
.boot-name{font-size:15px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--t-0)}
.boot-bar{width:220px;height:2px;background:var(--bg-3);border-radius:2px;overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:var(--acc);animation:fill 1.5s cubic-bezier(.6,.05,.2,1) forwards}
.boot-status{font-family:var(--mono);font-size:11px;color:var(--t-2);letter-spacing:.04em;height:14px}
@keyframes fill{to{width:100%}}

/* app shell */
#app{position:relative;z-index:2;height:100vh;display:grid;grid-template-rows:54px 1fr;opacity:0}
#app.ready{animation:appin .7s ease forwards}
@keyframes appin{to{opacity:1}}

/* ============================ 5. SIGNATURE — top command bar ============================ */
.topbar{display:flex;align-items:center;gap:18px;padding:0 18px;border-bottom:1px solid var(--line);
  background:var(--bg-1);
  transform:translateY(-12px);opacity:0;animation:slidedown .6s .05s ease forwards}
@keyframes slidedown{to{transform:none;opacity:1}}
.brand{display:flex;align-items:center;gap:10px;min-width:200px}
.brand .name{font-weight:700;font-size:15px;letter-spacing:-.02em}
.brand .name b{color:var(--acc-bright);font-weight:700}
.sys-pill{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  color:var(--t-1);background:var(--bg-2);border:1px solid var(--line);padding:4px 9px;border-radius:20px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:pulse 2.6s ease-in-out infinite}
/* OS-010 liveness — a SOFT opacity breathing (not a glow): live/status dots read as a running signal,
   trading-terminal-alive, never a toy. transform/opacity only; reduced-motion stops it (below). */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.42}}
.cmdk{flex:1;max-width:520px;margin:0 auto;display:flex;align-items:center;gap:10px;cursor:text;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;
  color:var(--t-2);font-size:13px;transition:.2s}
.cmdk:hover{border-color:var(--line-2);background:var(--bg-2)}
.cmdk .kbd{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--t-2);
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;background:var(--bg-0)}
.topright{display:flex;align-items:center;gap:14px;min-width:200px;justify-content:flex-end}
.ticker{font-family:var(--mono);font-size:11px;color:var(--t-1);display:flex;align-items:center;gap:8px;
  max-width:260px;overflow:hidden;white-space:nowrap}
.ticker .tdot{width:6px;height:6px;border-radius:50%;background:var(--acc-bright);flex-shrink:0;animation:pulse 2.6s ease-in-out infinite}
.ticker span{opacity:0;transition:opacity .5s}
.ticker span.show{opacity:1}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--acc-deep);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#04130c;flex-shrink:0}

/* body grid */
.body{display:grid;grid-template-columns:230px 1fr;min-height:0}

/* ============================ 5. SIGNATURE — two-level nav rail ============================ */
.rail{border-right:1px solid var(--line);background:var(--bg-1);
  padding:14px 10px;display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(-14px);opacity:0;animation:slidein .6s .12s ease forwards}
@keyframes slidein{to{transform:none;opacity:1}}
.rail-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-3);padding:6px 10px 8px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;
  color:var(--t-1);font-size:13.5px;font-weight:500;transition:.16s;position:relative}
.nav-item:hover{background:var(--bg-2);color:var(--t-0)}
.nav-item.active{background:var(--bg-3);color:var(--t-0)}
.nav-item.active::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;
  background:var(--acc-bright);border-radius:0 3px 3px 0;box-shadow:0 0 10px var(--acc-glow)}
.nav-item .ic{width:18px;text-align:center;color:var(--t-2)}
.nav-item.active .ic{color:var(--acc-bright)}
.nav-item .chev{margin-left:auto;font-size:10px;color:var(--t-3);transition:transform .2s}
.nav-item.open .chev{transform:rotate(90deg)}
.nav-item .stat{margin-left:auto;width:7px;height:7px;border-radius:50%}
.subnav{margin:2px 0 6px 22px;padding-left:10px;border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden}
.subnav .si{padding:6px 10px;font-size:12.5px;color:var(--t-2);border-radius:6px;cursor:pointer;transition:.14s}
.subnav .si:hover{color:var(--t-0);background:var(--bg-2)}
.subnav .si.active{color:var(--acc-bright);background:var(--acc-glow-soft)}
.rail-foot{margin-top:auto;padding:12px 10px 4px;border-top:1px solid var(--line)}
.rail-foot .row{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;color:var(--t-1);margin-top:8px}
.rail-foot .row .ic{color:var(--acc)}

/* main */
.main{overflow-y:auto;padding:26px 30px 60px;position:relative}
.crumb{font-family:var(--mono);font-size:11px;color:var(--t-2);margin-bottom:14px;letter-spacing:.03em}
.crumb b{color:var(--t-1);font-weight:500}
.view{animation:viewin .5s ease}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero{margin-bottom:26px}
.hero h1{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.hero h1 .g{color:var(--acc-bright)}
.hero p{color:var(--t-1);font-size:14px;margin-top:8px;max-width:560px}

/* ============================ 5. SIGNATURE — KPI cards ============================ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.kpi{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--hl),var(--elev-1);
  padding:16px 18px;position:relative;overflow:hidden}
.kpi .lbl{font-size:11.5px;color:var(--t-2);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.kpi .val{font-family:var(--mono);font-size:28px;font-weight:500;margin-top:8px;letter-spacing:-.02em}
.kpi .sub{font-family:var(--mono);font-size:11px;color:var(--acc);margin-top:4px}
.kpi .sub.down{color:var(--red)}

.sec-h{display:flex;align-items:center;justify-content:between;margin:6px 0 14px}
.sec-h h2{font-size:13px;font-weight:600;color:var(--t-1);text-transform:uppercase;letter-spacing:.1em}

/* ============================ 5. SIGNATURE — mission-control tiles ============================ */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--hl),var(--elev-1);
  padding:18px;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s,transform .18s;position:relative;overflow:hidden}
.tile:hover{border-color:var(--acc-deep);background:var(--bg-2);box-shadow:var(--hl),var(--elev-2);transform:translateY(-1px)}
.tile .th{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tile .ti{width:34px;height:34px;border-radius:9px;background:var(--bg-3);display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--acc-bright);border:1px solid var(--line)}
.tile .tn{font-weight:600;font-size:15px}
.tile .ttag{font-family:var(--mono);font-size:9.5px;color:var(--t-2);letter-spacing:.04em}
.tile .status{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px}
.s-live{color:var(--acc-bright)} .s-scaf{color:var(--amber)} .s-dorm{color:var(--t-2)}
.tile .metrics{display:flex;gap:18px;margin-top:6px}
.tile .m .mv{font-family:var(--mono);font-size:19px;font-weight:500}
.tile .m .ml{font-size:10.5px;color:var(--t-2);margin-top:2px}
.spark{height:30px;margin-top:14px;display:flex;align-items:flex-end;gap:3px}
.spark i{flex:1;background:var(--acc-deep);border-radius:1px 1px 0 0;opacity:.5}
.agent{display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;color:var(--t-1)}
.agent .ad{width:6px;height:6px;border-radius:50%;background:var(--acc-bright);animation:pulse 2s infinite}
.agent.idle .ad{background:var(--t-3);animation:none}

/* ============================ 5. SIGNATURE — workspace (brokerage view) ============================ */
.ws-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.ws-head h1{font-size:22px;font-weight:600;letter-spacing:-.02em}
.tag{font-family:var(--mono);font-size:10px;padding:4px 10px;border-radius:20px;background:var(--acc-glow-soft);
  color:var(--acc-bright);border:1px solid var(--acc-deep)}
.btn{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--t-0);background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:7px 13px;cursor:pointer;transition:.16s}
.btn:hover{background:var(--bg-4);border-color:var(--acc-deep)}
.btn.p{background:var(--acc);color:#04130c;border:none;font-weight:600}
.btn.p:hover{filter:brightness(1.08)}
.btn.sm{font-size:11.5px;padding:5px 10px}
.panel{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--hl),var(--elev-1);overflow:hidden}
.lead{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);transition:.15s}
.lead:last-child{border-bottom:none}
.lead:hover{background:var(--bg-2)}
.lead .who{display:flex;align-items:center;gap:12px;min-width:0}
.lead .av{width:34px;height:34px;border-radius:9px;background:var(--bg-3);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--acc-bright);flex-shrink:0}
.lead .nm{font-size:14px;font-weight:500}
.lead .meta{font-family:var(--mono);font-size:11px;color:var(--t-2);margin-top:3px}
.lead .acts{display:flex;gap:7px;flex-shrink:0}
.stages{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.stage{font-family:var(--mono);font-size:10.5px;padding:5px 11px;border-radius:20px;background:var(--bg-2);color:var(--t-2);border:1px solid var(--line)}
.stage.on{background:var(--acc-glow-soft);color:var(--acc-bright);border-color:var(--acc-deep)}

/* operational (archetype B) simple view */
.opgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.opcard{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--hl),var(--elev-1);padding:18px}
.opcard h3{font-size:13px;color:var(--t-1);font-weight:600;margin-bottom:12px}
.line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.line:last-child{border:none}
.line .v{font-family:var(--mono);color:var(--t-0)}
.pos{color:var(--acc-bright)} .neg{color:var(--red)}

/* ============================ 5. SIGNATURE — ⌘K command palette ============================ */
#palette{position:fixed;inset:0;z-index:90;background:rgba(4,7,9,.6);backdrop-filter:blur(6px);
  display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
#palette.open{display:flex;animation:appin .2s ease}
.pal{width:560px;max-width:92vw;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 18px 44px -24px rgba(0,0,0,.55);overflow:hidden}
.pal-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.pal-in input{flex:1;background:none;border:none;outline:none;color:var(--t-0);font-family:var(--sans);font-size:16px}
.pal-in input::placeholder{color:var(--t-2)}
.pal-in .kbd{font-family:var(--mono);font-size:10px;color:var(--t-2);border:1px solid var(--line);padding:2px 6px;border-radius:5px}
.pal-list{max-height:320px;overflow-y:auto;padding:8px}
.pal-it{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-sm);cursor:pointer;color:var(--t-1)}
.pal-it:hover,.pal-it.sel{background:var(--bg-3);color:var(--t-0)}
.pal-it .pic{width:18px;color:var(--acc-bright);text-align:center}
.pal-it .pk{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--t-3)}
.pal-grp{font-family:var(--mono);font-size:9.5px;color:var(--t-3);text-transform:uppercase;letter-spacing:.12em;padding:10px 14px 5px}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:5px;border:2px solid var(--bg-0)}
::-webkit-scrollbar-track{background:transparent}

/* ============================ LIVENESS (OS-010) — the desk reads as a LIVE MACHINE ============================ *
 * Direction-3 restraint kept: transform/opacity only, sub-300ms entrances, soft pulses — alive like a trading
 * terminal, never animated like a toy. All of it stops under prefers-reduced-motion (below). */
.live-pulse{animation:pulse 2.6s ease-in-out infinite}                 /* reusable soft breathing for inline live dots */
/* staggered entrance — sections/cards assemble like a system booting (set --i per child for the delay). */
.stagger{opacity:0;transform:translateY(7px);animation:stagger-in .34s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*42ms)}
@keyframes stagger-in{to{opacity:1;transform:none}}
/* skeleton shimmer — shown briefly before baked data lands, so the page assembles rather than pops. */
.skel{position:relative;overflow:hidden;background:var(--bg-2);border-radius:6px;color:transparent}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:shimmer 1.1s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* progress bars (signature set) — thin emerald/amber, animate width on mount */
.prog{height:5px;background:var(--bg-3);border-radius:3px;overflow:hidden}
.prog i{display:block;height:100%;width:0;border-radius:3px;transition:width 1.2s cubic-bezier(.6,.05,.2,1)}
.prog i.done,.prog i.active{background:var(--acc)}
.prog i.build{background:var(--amber)}

/* ============================ 6. LIGHT THEME (OS-005.7 / ADR-038) ============================ *
 * Dark is the DEFAULT (the Obsidian Command Deck is dark-first). Light is an OPTION: a TOKEN SET that
 * overrides the palette under [data-theme="light"] — every component that uses the tokens re-themes for
 * free, no per-component rewrite. This is a SHARED-token feature: public funnels + client surfaces can
 * adopt the same light/dark switch. Constraints held: emerald stays the brand signal (AA-on-light shade),
 * text/surface contrast meets AA, the live/demo pill stays unmistakable (green/amber) in BOTH themes,
 * fonts stay self-hosted (zero external requests — the @font-face above is theme-independent), and the
 * dark-only glow/grain are toned down (not carried onto light). */
:root[data-theme="light"]{
  /* layered light surfaces (faintly green-tinted, not flat gray) */
  --bg-0:#eef2f0; --bg-1:#ffffff; --bg-2:#f4f7f5; --bg-3:#e9efec; --bg-4:#dde6e1;
  --line:rgba(16,40,30,.12); --line-2:rgba(16,40,30,.20);
  /* light elevation — Stripe-Dashboard-grade: a crisp top highlight + a soft, cool, low-spread shadow. */
  --hl:inset 0 1px 0 rgba(255,255,255,.9);
  --elev-1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.04);
  --elev-2:0 8px 24px -10px rgba(16,24,40,.14);
  /* text (dark on light; AA on white) */
  --t-0:#0d1714; --t-1:#3c4844; --t-2:#697571; --t-3:#9aa49f;
  /* emerald signal — deepened for AA on light surfaces (acc as text ~5:1; white-on-acc ~4.6:1) */
  --acc:#0b8350; --acc-bright:#0e9e63; --acc-deep:#075d39;
  --acc-glow:rgba(11,131,80,.22); --acc-glow-soft:rgba(11,131,80,.09);
  /* status — deepened for AA on light (amber stays the demo alarm color, now a deep orange) */
  --amber:#a8670c; --red:#c23a28; --blue:#2767c9; --violet:#6a59d6;
}
/* light surfaces + atmosphere: the dark-only gradients/glows are toned for a light deck (not inverted) */
:root[data-theme="light"] .topbar{background:var(--bg-1)}
:root[data-theme="light"] .rail{background:var(--bg-1)}
:root[data-theme="light"] .tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
:root[data-theme="light"] .atmos .glow{opacity:.5}
:root[data-theme="light"] .atmos .glow2{opacity:.4}
:root[data-theme="light"] .grain{opacity:.025}
:root[data-theme="light"] .btn.p{color:#fff}                       /* white on the emerald fill → AA on light */
:root[data-theme="light"] .tag,:root[data-theme="light"] .stage.on{color:var(--acc-deep)} /* AA on the faint emerald tint */

/* ============================ 6. POLISH (OS-005.7) — refinements WITHIN the language ============ *
 * Tighten, don't reinvent: consistent button states, a queue-row hover accent + rhythm, present/
 * consistent focus states (keyboard a11y), and a styled honest-empty state. Token-driven → both themes. */
.btn:active{transform:translateY(1px)}
.btn.sm{min-height:28px;display:inline-flex;align-items:center;line-height:1}
.btn:focus-visible,.nav-item:focus-visible,.tile:focus-visible,.cmdk:focus-visible,.si:focus-visible,.avatar:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.lead{border-left:2px solid transparent}
.lead:hover{border-left-color:var(--acc-deep)}
.empty{display:flex;flex-direction:column;align-items:center;gap:7px;padding:30px 16px;text-align:center;
  color:var(--t-2);font-family:var(--mono);font-size:12px;line-height:1.5}
.empty .ei{font-size:20px;color:var(--t-3);opacity:.8}

/* ============================ 4. MOTION — reduced-motion (accessibility) ============================ */
/* keep layout + colors, drop the boot + looping animations (DESIGN-SYSTEM §4.6 / §9) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  #boot{display:none !important}
  #app{opacity:1 !important}
  .topbar,.rail,.view,.tile{transform:none !important;opacity:1 !important}
  .dot,.agent .ad,.ticker .tdot,.live-pulse{animation:none !important}
  .stagger{opacity:1 !important;transform:none !important;animation:none !important}
  .skel::after{animation:none !important}
}