/* styles.css — MeasureX Command Center (Fable remake)
   Dark, matte field instrument. One accent (electric blue). Orbitron for titles and numerals,
   Inter for everything readable, JetBrains Mono for kickers, IDs and timestamps.
   Six complete visual systems are token swaps on :root[data-scene]. Motion answers input only. */

/* ---------- tokens ---------- */
:root {
  --bg:#070a10; --bg-2:#0b1018; --panel:#0d121b; --glass:rgba(10,15,23,.93); --glass-2:rgba(14,20,30,.96); --glass-3:rgba(20,28,41,.97);
  --line:rgba(140,172,220,.13); --line-2:rgba(140,172,220,.26);
  --text:#dde6f1; --text-hi:#ffffff; --dim:#8a9db4; --faint:#5a6b80;
  --blue:#0072ff; --blue-2:#3d95ff; --blue-3:#8fc1ff; --blue-soft:rgba(0,114,255,.14); --blue-line:rgba(0,114,255,.5);
  --green:#2fd67f; --green-soft:rgba(47,214,127,.14); --amber:#e8a13a; --amber-soft:rgba(232,161,58,.16); --red:#ff5a5a; --red-soft:rgba(255,90,90,.14);
  --purple:#a78bfa; --teal:#2dd4bf; --rose:#f472b6; --slate:#94a3b8;
  --shadow:0 20px 60px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  --glow:0 0 0 1px rgba(0,114,255,.35),0 0 28px rgba(0,114,255,.25);
  --display:'Orbitron', 'Inter', system-ui, sans-serif; --ui:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --radius:18px; --gap:14px; --pad:18px;
  --grid-color:rgba(0,114,255,.06); --scene-image:none; --on-accent:#fff; --brand-blue:#0072ff;
  color-scheme: dark;
}
:root[data-scene="light"], :root[data-scene="inverted"] { color-scheme: light; }
:root[data-scene="light"] {
  --bg:#e9eef5; --bg-2:#f4f7fb; --panel:#ffffff; --glass:rgba(255,255,255,.94); --glass-2:rgba(255,255,255,.97); --glass-3:rgba(240,244,250,.98);
  --line:rgba(20,45,80,.12); --line-2:rgba(20,45,80,.24); --text:#233447; --text-hi:#0a1826; --dim:#5b6f85; --faint:#8797aa;
  --blue-2:#0064e0; --blue-3:#0072ff; --blue-soft:rgba(0,114,255,.1);
  --green:#1a9d5c; --green-soft:rgba(26,157,92,.12); --amber:#b8720f; --amber-soft:rgba(184,114,15,.12); --red:#d63c3c; --red-soft:rgba(214,60,60,.1);
  --shadow:0 20px 60px rgba(15,35,60,.18),0 2px 8px rgba(15,35,60,.08); --grid-color:rgba(0,114,255,.045);
}
:root[data-scene="inverted"] {
  --bg:#f3e4c4; --bg-2:#f9eed8; --panel:#fff8ea; --glass:rgba(255,248,234,.95); --glass-2:rgba(255,251,242,.98); --glass-3:rgba(250,240,220,.98);
  --line:rgba(120,70,10,.16); --line-2:rgba(120,70,10,.32); --text:#2a1c07; --text-hi:#1a1000; --dim:#7a5a1e; --faint:#a98a55;
  --blue:#c2410c; --blue-2:#9a3412; --blue-3:#f59e0b; --blue-soft:rgba(194,65,12,.12); --blue-line:rgba(194,65,12,.5);
  --green:#3f6212; --green-soft:rgba(63,98,18,.12); --amber:#92400e; --amber-soft:rgba(146,64,14,.14); --red:#b91c1c; --red-soft:rgba(185,28,28,.12);
  --shadow:0 20px 60px rgba(90,50,0,.2),0 2px 8px rgba(90,50,0,.1); --glow:0 0 0 1px rgba(194,65,12,.35),0 0 28px rgba(194,65,12,.22); --grid-color:rgba(194,65,12,.06);
}
:root[data-scene="terminal"] {
  --bg:#020704; --bg-2:#04100a; --panel:#04110a; --glass:rgba(2,11,6,.94); --glass-2:rgba(3,15,8,.97); --glass-3:rgba(5,22,12,.98);
  --line:rgba(72,255,128,.16); --line-2:rgba(72,255,128,.3); --text:#cfeed9; --text-hi:#eafff0; --dim:#74a882; --faint:#4c7a5c;
  --blue:#1bd85b; --blue-2:#3cff79; --blue-3:#a6ffc2; --blue-soft:rgba(60,255,121,.12); --blue-line:rgba(60,255,121,.5);
  --green:#3cff79; --amber:#f2c14e; --red:#ff6b6b; --glow:0 0 0 1px rgba(60,255,121,.35),0 0 28px rgba(60,255,121,.22); --grid-color:rgba(60,255,121,.05);
  --ui:'JetBrains Mono', ui-monospace, Menlo, monospace; --on-accent:#03110a;
}
:root[data-scene="ocean"] {
  --bg:#001522; --bg-2:#02283d; --panel:#02223a; --glass:rgba(1,22,38,.86); --glass-2:rgba(2,30,50,.95); --glass-3:rgba(3,40,64,.97);
  --line:rgba(255,214,120,.16); --line-2:rgba(255,214,120,.32); --text:#f1fbff; --text-hi:#ffffff; --dim:#a9d3df; --faint:#6f9caa;
  --blue:#f2b134; --blue-2:#ffd166; --blue-3:#ffe9b3; --blue-soft:rgba(242,177,52,.16); --blue-line:rgba(242,177,52,.55); --on-accent:#1a1200;
  --green:#5cf0c0; --amber:#ffb454; --red:#ff7a7a; --glow:0 0 0 1px rgba(242,177,52,.35),0 0 28px rgba(242,177,52,.22); --grid-color:rgba(255,214,120,.045);
  --scene-image:radial-gradient(ellipse at 18% -8%, rgba(103,239,245,.32), transparent 31%), radial-gradient(ellipse at 80% 17%, rgba(30,164,211,.24), transparent 34%), linear-gradient(155deg,#075f7b 0%,#023c57 36%,#001a2b 70%,#000d17 100%);
}
:root[data-scene="space"] {
  --bg:#05060f; --bg-2:#0b0c1f; --panel:#0c0d22; --glass:rgba(9,10,26,.82); --glass-2:rgba(12,13,32,.92); --glass-3:rgba(16,17,40,.97);
  --line:rgba(173,183,255,.2); --line-2:rgba(173,183,255,.38); --text:#e9ebff; --text-hi:#ffffff; --dim:#aab0d8; --faint:#7a80a8;
  --blue:#8b93ff; --blue-2:#b3b8ff; --blue-3:#d9dbff; --blue-soft:rgba(139,147,255,.18); --blue-line:rgba(139,147,255,.55); --on-accent:#0a0b1e;
  --green:#5ee6b8; --green-soft:rgba(94,230,184,.16); --amber:#f5b86a; --amber-soft:rgba(245,184,106,.16); --red:#ff6b8a; --red-soft:rgba(255,107,138,.16);
  --slate:#9aa0c4; --purple:#c7a4ff; --shadow:0 20px 60px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.45);
  --glow:0 0 0 1px rgba(139,147,255,.4),0 0 28px rgba(139,147,255,.28); --grid-color:rgba(139,147,255,.05);
  --scene-image:linear-gradient(115deg, rgba(2,3,10,.62), rgba(7,8,24,.38) 45%, rgba(2,3,12,.78)), url('assets/milky-way-eso.jpg');
}


/* ---------- base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { background:var(--bg); }
body {
  margin:0; min-height:100svh; color:var(--text); background:var(--bg); font-family:var(--ui); font-size:13.5px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
:root[data-scene="ocean"] body, :root[data-scene="space"] body { background-image:var(--scene-image); background-attachment:fixed; background-size:cover; background-position:center; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:not-allowed; opacity:.55; }
:focus-visible { outline:2px solid var(--blue-2); outline-offset:2px; }
a { color:var(--blue-2); text-decoration:none; } a:hover { text-decoration:underline; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
#errlog { position:fixed; inset:auto 8px 8px 8px; z-index:400; max-height:30vh; overflow:auto; margin:0; padding:10px; font:11px/1.4 var(--mono); color:#ffb4b4; background:rgba(40,0,0,.92); border:1px solid var(--red); border-radius:10px; }
kbd { font:600 11px var(--mono); padding:2px 6px; border:1px solid var(--line-2); border-bottom-width:2px; border-radius:6px; background:var(--glass-2); color:var(--text-hi); }

/* ---------- ambient layers ---------- */
#fx-grid { position:fixed; inset:-40px; z-index:0; pointer-events:none; will-change:transform; background-image:linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size:40px 40px; opacity:1; }
:root[data-motion="max"][data-fx="on"] #fx-grid { animation:grid-drift 40s linear infinite; }
@keyframes grid-drift { from { transform:translate3d(0,0,0); } to { transform:translate3d(40px,40px,0); } }
#fx-spot { position:fixed; left:0; top:0; width:720px; height:720px; margin:-360px 0 0 -360px; z-index:0; pointer-events:none; border-radius:50%; background:radial-gradient(circle, var(--blue-soft), transparent 60%); opacity:0; transition:opacity .4s; will-change:transform; }
:root[data-motion="max"][data-fx="on"] #fx-spot.on { opacity:.8; }
:root[data-fx="off"] #fx-grid, :root[data-motion="reduce"] #fx-grid { animation:none; }
#scene-layer { position:fixed; inset:0; z-index:1; pointer-events:none; display:none; overflow:hidden; }
.scene-crt { display:none; position:absolute; left:16px; bottom:14px; font:10px/1.6 var(--mono); letter-spacing:.14em; color:var(--blue-2); opacity:.7; }
.scene-crt span { display:block; }
.space-sky { position:absolute; inset:0; overflow:hidden; }
.stars { position:absolute; inset:-10%; z-index:1; background-image:
  radial-gradient(1.4px 1.4px at 8% 12%, #fff 55%, transparent 100%), radial-gradient(1px 1px at 22% 68%, #dfe7ff 55%, transparent 100%), radial-gradient(1.6px 1.6px at 37% 28%, #fff 55%, transparent 100%),
  radial-gradient(1px 1px at 51% 81%, #cdd8ff 55%, transparent 100%), radial-gradient(1.3px 1.3px at 63% 17%, #fff 55%, transparent 100%), radial-gradient(1px 1px at 74% 54%, #e8eeff 55%, transparent 100%),
  radial-gradient(1.8px 1.8px at 86% 33%, #fff 55%, transparent 100%), radial-gradient(1px 1px at 93% 77%, #d6dfff 55%, transparent 100%), radial-gradient(1.2px 1.2px at 44% 47%, #fff 55%, transparent 100%),
  radial-gradient(1px 1px at 15% 91%, #fff 55%, transparent 100%), radial-gradient(1.5px 1.5px at 68% 92%, #fff 55%, transparent 100%), radial-gradient(1px 1px at 30% 6%, #e4ebff 55%, transparent 100%);
  background-size:760px 620px; opacity:.85; animation:twinkle 7s ease-in-out infinite alternate; }
.stars.far { background-size:420px 380px; opacity:.5; z-index:3; animation-duration:11s; animation-delay:-4s; }
@keyframes twinkle { from { opacity:.45; } to { opacity:.95; } }
/* Jupiter fills the sky behind the page, seen close up: a giant tilted globe whose limb curves through the top-right corner, belts drifting
   both ways, the Great Red Spot, two moons transiting the disc, and the cupola's struts in front. Each moving part is one composited layer. */
.jupiter { z-index:2; position:absolute; right:4vw; top:8vh; width:min(46vw, 62vh); aspect-ratio:1; transform:rotate(-12deg); transform-origin:50% 50%; contain:layout style; }
.globe { position:absolute; inset:0; border-radius:50%; overflow:hidden; background:#c9a279; contain:strict; isolation:isolate; z-index:2; box-shadow:0 0 60px 18px rgba(236,204,150,.18), 0 0 160px 50px rgba(150,110,60,.14), 0 0 0 2px rgba(255,240,215,.22); }
.belts { position:absolute; inset:0; border-radius:50%; background:linear-gradient(180deg,
  #b8916c 0%, #d3b592 5%, #a86c45 9%, #c99772 12%, #ead8ba 15%, #d0a87f 19%, #f0e2c8 24%, #c98c60 28%, #a45f37 32%, #c9946a 35%, #ecd9b9 39%, #d3a97f 43%, #a8623a 47%,
  #c58e63 50%, #eedec4 54%, #cc9b70 58%, #ab6a41 61%, #d5ae86 65%, #f0e3ca 69%, #c48d62 73%, #a4673f 77%, #cfa57c 81%, #e2cbac 85%, #b98b64 90%, #cdb193 95%, #b79a7f 100%); }
.belts::after { content:""; position:absolute; inset:0; border-radius:50%; background:repeating-linear-gradient(180deg, rgba(255,255,255,0) 0 9px, rgba(255,255,255,.045) 9px 11px, rgba(0,0,0,0) 11px 19px, rgba(0,0,0,.05) 19px 21px); }
.belt-drift { position:absolute; left:-50%; top:0; width:200%; height:100%; will-change:transform; transform:translateZ(0); background-size:50% 100%; background-repeat:repeat-x; }
.belt-drift.d1 { background-image:radial-gradient(ellipse 7.6% 0.7% at 14.9% 80.6%, rgba(255,244,222,0.16), transparent 72%), radial-gradient(ellipse 3.6% 0.5% at 64.6% 75.4%, rgba(255,244,222,0.16), transparent 72%), radial-gradient(ellipse 5.7% 1.0% at 75.2% 6.2%, rgba(70,32,12,0.21), transparent 72%), radial-gradient(ellipse 3.2% 0.9% at 88.5% 8.7%, rgba(255,244,222,0.16), transparent 72%), radial-gradient(ellipse 3.2% 0.7% at 22.8% 43.1%, rgba(70,32,12,0.17), transparent 72%), radial-gradient(ellipse 4.3% 0.8% at 24.4% 26.3%, rgba(70,32,12,0.12), transparent 72%), radial-gradient(ellipse 6.9% 0.6% at 82.4% 55.0%, rgba(255,244,222,0.21), transparent 72%), radial-gradient(ellipse 7.3% 1.0% at 13.6% 35.3%, rgba(255,244,222,0.16), transparent 72%), radial-gradient(ellipse 4.8% 0.9% at 81.7% 65.0%, rgba(255,244,222,0.20), transparent 72%), radial-gradient(ellipse 3.2% 0.7% at 50.5% 57.8%, rgba(255,244,222,0.16), transparent 72%), radial-gradient(ellipse 7.2% 1.0% at 18.6% 54.3%, rgba(70,32,12,0.16), transparent 72%), radial-gradient(ellipse 6.1% 0.8% at 50.8% 74.5%, rgba(255,244,222,0.12), transparent 72%), radial-gradient(ellipse 8.9% 0.9% at 6.2% 67.9%, rgba(70,32,12,0.14), transparent 72%), radial-gradient(ellipse 7.6% 0.9% at 50.2% 92.4%, rgba(255,244,222,0.14), transparent 72%), radial-gradient(ellipse 6.5% 0.8% at 51.3% 89.8%, rgba(70,32,12,0.17), transparent 72%), radial-gradient(ellipse 7.7% 1.1% at 93.9% 6.5%, rgba(255,244,222,0.19), transparent 72%); animation:drift-e 220s linear infinite; }
.belt-drift.d2 { background-image:radial-gradient(ellipse 3.3% 0.6% at 93.8% 89.4%, rgba(255,244,222,0.19), transparent 72%), radial-gradient(ellipse 6.6% 0.9% at 66.3% 33.1%, rgba(255,244,222,0.14), transparent 72%), radial-gradient(ellipse 7.3% 1.2% at 43.3% 40.6%, rgba(255,244,222,0.17), transparent 72%), radial-gradient(ellipse 3.2% 0.5% at 44.7% 29.6%, rgba(255,244,222,0.15), transparent 72%), radial-gradient(ellipse 6.2% 0.9% at 38.5% 84.5%, rgba(70,32,12,0.12), transparent 72%), radial-gradient(ellipse 6.1% 1.2% at 33.2% 18.0%, rgba(255,244,222,0.14), transparent 72%), radial-gradient(ellipse 7.4% 1.1% at 87.8% 76.1%, rgba(255,244,222,0.20), transparent 72%), radial-gradient(ellipse 8.8% 0.6% at 36.0% 92.3%, rgba(255,244,222,0.19), transparent 72%), radial-gradient(ellipse 5.9% 1.1% at 46.3% 52.7%, rgba(255,244,222,0.20), transparent 72%), radial-gradient(ellipse 8.4% 0.8% at 36.0% 83.7%, rgba(255,244,222,0.21), transparent 72%), radial-gradient(ellipse 4.3% 0.7% at 71.5% 48.8%, rgba(255,244,222,0.14), transparent 72%), radial-gradient(ellipse 8.5% 0.7% at 89.2% 29.6%, rgba(255,244,222,0.19), transparent 72%), radial-gradient(ellipse 6.9% 0.9% at 50.4% 51.6%, rgba(70,32,12,0.14), transparent 72%), radial-gradient(ellipse 6.7% 0.6% at 51.1% 88.2%, rgba(255,244,222,0.19), transparent 72%); animation:drift-w 320s linear infinite; }
@keyframes drift-e { from { transform:translate3d(0, 0, 0); } to { transform:translate3d(25%, 0, 0); } }
@keyframes drift-w { from { transform:translate3d(25%, 0, 0); } to { transform:translate3d(0, 0, 0); } }
.storms { position:absolute; left:-50%; top:0; width:200%; height:100%; will-change:transform; animation:drift-e 380s linear infinite; background-size:50% 100%; background-repeat:repeat-x; background-image:
  radial-gradient(ellipse 1.6% .8% at 12% 25%, rgba(255,250,240,.7), transparent 70%), radial-gradient(ellipse 1.3% .7% at 41% 66%, rgba(255,250,240,.6), transparent 70%),
  radial-gradient(ellipse 2% .9% at 64% 33%, rgba(255,250,240,.65), transparent 70%), radial-gradient(ellipse 1.2% .6% at 83% 74%, rgba(255,250,240,.6), transparent 70%),
  radial-gradient(ellipse 1.8% .8% at 27% 86%, rgba(90,40,20,.5), transparent 70%), radial-gradient(ellipse 1.4% .7% at 74% 15%, rgba(90,40,20,.45), transparent 70%); }
.grs { position:absolute; left:-24%; top:57%; width:20%; height:11%; will-change:transform; animation:grs-pass 300s linear infinite; animation-delay:-120s; }
.grs i { position:absolute; inset:0; border-radius:50%; background:radial-gradient(ellipse at 42% 46%, #f3bf98 0, #d2673f 34%, #a8472a 62%, #7d3320 84%, rgba(120,50,30,0) 100%); box-shadow:0 0 0 4px rgba(245,215,180,.3), 0 0 14px rgba(0,0,0,.25); }
.grs i::after { content:""; position:absolute; inset:16% 18%; border-radius:50%; border:3px solid rgba(255,220,190,.4); border-left-color:transparent; border-bottom-color:transparent; animation:grs-turn 40s linear infinite; }
.grs i::before { content:""; position:absolute; inset:34% 36%; border-radius:50%; border:2px solid rgba(255,230,200,.3); border-right-color:transparent; border-top-color:transparent; animation:grs-turn 26s linear infinite reverse; }
@keyframes grs-pass { from { transform:translate3d(0, 0, 0); } to { transform:translate3d(640%, 0, 0); } }
@keyframes grs-turn { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.terminator { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 40% 38%, transparent 42%, rgba(30,15,5,.25) 64%, rgba(12,6,2,.72) 90%, rgba(4,2,0,.96) 100%); }
.glow-edge { position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 40px 8px rgba(255,235,200,.2), inset -20px -14px 60px rgba(0,0,0,.4); }
/* moons transit the visible disc slowly, each throwing a small shadow onto the clouds */
.moons { position:absolute; right:4vw; top:8vh; width:min(46vw, 62vh); aspect-ratio:1; z-index:3; pointer-events:none; transform:rotate(-12deg); }
.moon { position:absolute; left:0; top:var(--y); width:var(--size); height:var(--size); will-change:transform; animation:transit var(--t) linear infinite; animation-delay:var(--d, 0s); }
.moon i { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--c1), var(--c2) 70%); box-shadow:0 0 8px rgba(255,240,210,.35); }
.moon::after { content:""; position:absolute; left:calc(var(--size) * 1.7); top:calc(var(--size) * .8); width:calc(var(--size) * .95); height:calc(var(--size) * .95); border-radius:50%; background:rgba(8,4,2,.6); box-shadow:0 0 6px 2px rgba(8,4,2,.35); }
@keyframes transit { from { transform:translate3d(-40%, 0, 0); } 42% { opacity:1; } 58% { opacity:1; } to { transform:translate3d(calc(min(46vw, 62vh) + 40%), 0, 0); } }
/* cupola struts in front of the planet, behind the page */
.struts { position:absolute; inset:0; z-index:4; pointer-events:none; }
.strut { position:absolute; left:50%; top:-12vh; width:26px; height:150vh; margin-left:-13px; transform-origin:50% 0; background:linear-gradient(90deg, #05060c, #1a1c2c 35%, #2a2d42 50%, #1a1c2c 65%, #05060c); box-shadow:0 0 30px rgba(0,0,0,.6); }
.strut::before { content:""; position:absolute; left:14px; top:0; bottom:0; width:6px; background:repeating-linear-gradient(180deg, rgba(120,235,255,.75) 0 60px, transparent 60px 100px, rgba(120,235,255,.35) 100px 130px, transparent 130px 240px); box-shadow:0 0 12px rgba(120,235,255,.35); }
.strut.s1 { transform:rotate(26deg); left:30%; } .strut.s2 { transform:rotate(-6deg); left:46%; } .strut.s3 { transform:rotate(-40deg); left:96%; opacity:.85; } .strut.s4 { display:none; }
.hood { position:absolute; left:8vw; top:-6px; width:50vw; height:12vh; background:linear-gradient(180deg, #0d0e1c, #06070f); clip-path:polygon(0 0, 100% 0, 92% 100%, 14% 100%); box-shadow:0 12px 30px rgba(0,0,0,.6); }
.hood i { position:absolute; bottom:22%; width:9px; height:9px; border-radius:50%; background:#8ff0ff; box-shadow:0 0 10px #8ff0ff; } .hood i:first-child { left:22%; } .hood i:last-child { left:26%; }
:root[data-motion="reduce"] .jupiter * { animation:none !important; }
:root[data-scene="space"] .stars { z-index:1; } :root[data-scene="space"] .stars.far { z-index:3; opacity:.25; }
/* the page header sits on cloud: darken the top of the scene the way the original does */
:root[data-scene="space"] .space-sky::after { content:""; position:absolute; inset:0; z-index:5; background:linear-gradient(180deg, rgba(5,6,15,.82) 0, rgba(5,6,15,.55) 22%, rgba(5,6,15,.18) 46%, rgba(5,6,15,.35) 100%); }
:root[data-scene="space"] .kicker::before { content:"— "; color:var(--blue-2); } :root[data-scene="space"] .kicker { color:var(--blue-2); letter-spacing:.12em; }
:root[data-scene="space"] .seg button[aria-pressed="true"] { background:#b3b8ff; color:#0a0b1e; }
@media (max-width:900px) { .jupiter, .moons { right:-6vw; top:auto; bottom:16vh; width:min(78vw, 46vh); } .strut.s3, .strut.s4 { display:none; } .hood { width:74vw; height:7vh; } .hood i { display:none; } }
#space-frame { position:fixed; inset:0; z-index:45; pointer-events:none; display:none; --bezel-top:12px; --bezel:24px; --bezel-bottom:26px; }
#space-frame .glass { position:absolute; left:var(--bezel); right:var(--bezel); top:var(--bezel-top); bottom:var(--bezel-bottom); border-radius:34px 34px 40px 40px;
  box-shadow:0 0 0 9999px #12161f, 0 0 0 2px #2b3243, 0 0 0 4px #0a0d14, 0 0 0 5px #3a4256, inset 0 0 0 1px rgba(255,255,255,.1), inset 0 0 120px rgba(0,0,0,.42), inset 0 -40px 90px rgba(0,0,0,.25);
  background:linear-gradient(112deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 18%, transparent 34%, transparent 66%, rgba(255,255,255,.025) 84%, rgba(255,255,255,.05) 100%); }
#space-frame::before { content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 12px 5px, #8d97ad 0 2px, #2c3446 2.5px, transparent 3.5px), radial-gradient(circle at calc(100% - 12px) 5px, #8d97ad 0 2px, #2c3446 2.5px, transparent 3.5px),
  radial-gradient(circle at 12px calc(100% - 12px), #8d97ad 0 2px, #2c3446 2.5px, transparent 3.5px), radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #8d97ad 0 2px, #2c3446 2.5px, transparent 3.5px),
  radial-gradient(circle at 50% calc(100% - 12px), #8d97ad 0 2px, #2c3446 2.5px, transparent 3.5px), radial-gradient(circle at 12px 50%, #8d97ad 0 2px, #2c3446 2.5px, transparent 3.5px), radial-gradient(circle at calc(100% - 12px) 50%, #8d97ad 0 2px, #2c3446 2.5px, transparent 3.5px),
  linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%, transparent 60%, rgba(0,0,0,.35)); }
#space-frame .frame-label { position:absolute; left:40px; bottom:7px; font:600 9px/1 var(--mono); letter-spacing:.22em; color:rgba(255,255,255,.42); }
:root[data-scene="space"][data-fx="on"] #scene-layer, :root[data-scene="space"][data-fx="on"] #space-frame { display:block; }
:root[data-scene="space"][data-fx="on"] .main { padding-inline:clamp(34px, 3.2vw, 46px); }
:root[data-scene="space"][data-fx="on"] .topbar { padding:0 34px; }
:root[data-scene="space"][data-fx="on"] .foot { padding-bottom:36px; padding-inline:36px; }
:root[data-scene="space"][data-fx="on"] .toast { bottom:38px; }
:root[data-scene="space"][data-fx="on"] .scene-crt { display:none; }
:root[data-scene="space"][data-fx="on"] .scene-cupola, :root[data-scene="space"][data-fx="on"] .scene-jupiter { display:none; }
:root[data-scene="terminal"][data-fx="on"] #scene-layer { display:block; background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
:root[data-scene="terminal"][data-fx="on"] .space-sky { display:none; }
:root[data-scene="terminal"][data-fx="on"] .scene-crt { display:block; }
:root[data-motion="reduce"] .stars { animation:none !important; }
@media (max-width:900px) { #space-frame { --bezel-top:8px; --bezel:10px; --bezel-bottom:14px; } #space-frame .glass { border-radius:22px; } #space-frame .frame-label { display:none; } :root[data-scene="space"][data-fx="on"] .dock { bottom:24px; } :root[data-scene="space"][data-fx="on"] .main { padding-inline:18px; } :root[data-scene="space"][data-fx="on"] .topbar { padding:0 18px; } }


/* ---------- ocean scene: sunlit water with sea life ---------- */
.ocean-sea { position:absolute; inset:0; overflow:hidden; display:none; }
:root[data-scene="ocean"][data-fx="on"] #scene-layer { display:block; }
:root[data-scene="ocean"][data-fx="on"] .ocean-sea { display:block; }
:root[data-scene="ocean"] .space-sky, :root[data-scene="ocean"] .scene-crt { display:none; }
:root[data-scene="space"] .ocean-sea, :root[data-scene="terminal"] .ocean-sea { display:none; }
.ocean-sea .sun { position:absolute; left:54%; top:-26vh; width:min(78vw, 980px); aspect-ratio:1; border-radius:50%; transform:translateX(-50%); background:radial-gradient(circle, rgba(255,252,225,1) 0, rgba(255,242,180,.72) 9%, rgba(170,238,246,.3) 26%, rgba(60,180,210,.1) 42%, transparent 62%); animation:sun-breathe 12s ease-in-out infinite alternate; }
@keyframes sun-breathe { from { transform:translateX(-50%) scale(1); opacity:.85; } to { transform:translateX(-50%) scale(1.06); opacity:1; } }
.ocean-sea .rays { position:absolute; left:-20%; right:-20%; top:-30vh; height:160vh; transform-origin:54% 0; will-change:transform; background:repeating-linear-gradient(97deg, transparent 0 70px, rgba(255,255,225,.1) 70px 112px, transparent 112px 196px), repeating-linear-gradient(84deg, transparent 0 120px, rgba(210,255,255,.075) 120px 172px, transparent 172px 300px); -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 12%, transparent 78%); mask-image:linear-gradient(180deg, rgba(0,0,0,1) 12%, transparent 78%); animation:rays-sway 22s ease-in-out infinite alternate; }
@keyframes rays-sway { from { transform:rotate(-2.5deg) translateX(-2%); } to { transform:rotate(2.5deg) translateX(2%); } }
.ocean-sea .caustics { position:absolute; inset:0; background:radial-gradient(ellipse 28% 10% at 28% 8%, rgba(255,255,255,.1), transparent 70%), radial-gradient(ellipse 22% 8% at 70% 5%, rgba(255,255,255,.09), transparent 70%), radial-gradient(ellipse 40% 14% at 50% 16%, rgba(180,255,255,.07), transparent 70%); animation:caustic 9s ease-in-out infinite alternate; }
@keyframes caustic { from { opacity:.5; transform:translateX(-1.5%); } to { opacity:1; transform:translateX(1.5%); } }
.creature { position:absolute; left:0; will-change:transform; transform:translateZ(0); }
.fish { width:50px; top:var(--y, 40%); animation:swim-west var(--t, 50s) linear infinite; animation-delay:var(--d, 0s); }
.fish.flip { animation-name:swim-east; }
.fish .tail { transform-box:fill-box; transform-origin:0% 50%; animation:wag .55s ease-in-out infinite alternate; }
.fish .pec { transform-box:fill-box; transform-origin:0% 0%; animation:flutter .8s ease-in-out infinite alternate; }
.fish .dorsal { transform-box:fill-box; transform-origin:50% 100%; animation:flutter 1.3s ease-in-out infinite alternate; }
@keyframes wag { from { transform:rotate(-9deg); } to { transform:rotate(9deg); } }
@keyframes flutter { from { transform:rotate(-6deg); } to { transform:rotate(6deg); } }
/* the fish are drawn head-left, so the un-flipped fish swim west and the flipped ones swim east */
@keyframes swim-west { 0% { transform:translateX(114vw) translateY(0); } 25% { transform:translateX(82vw) translateY(-16px); } 50% { transform:translateX(50vw) translateY(10px); } 75% { transform:translateX(18vw) translateY(-12px); } 100% { transform:translateX(-14vw) translateY(0); } }
@keyframes swim-east { 0% { transform:translateX(-14vw) scaleX(-1); } 25% { transform:translateX(16vw) translateY(12px) scaleX(-1); } 50% { transform:translateX(48vw) translateY(-14px) scaleX(-1); } 75% { transform:translateX(80vw) translateY(10px) scaleX(-1); } 100% { transform:translateX(114vw) scaleX(-1); } }
.jelly { width:72px; left:var(--x, 20%); top:0; color:rgba(255,170,224,.92); animation:rise var(--t, 80s) linear infinite; animation-delay:var(--d, 0s); }
.jelly .bell { transform-box:view-box; transform-origin:40px 52px; animation:bell 3.6s ease-in-out infinite; }
.jelly .tentacles { transform-box:view-box; transform-origin:40px 60px; animation:tentacles 3.6s ease-in-out infinite; }
@keyframes rise { 0% { transform:translateY(112vh) translateX(0); } 30% { transform:translateY(72vh) translateX(24px); } 60% { transform:translateY(34vh) translateX(-18px); } 100% { transform:translateY(-34vh) translateX(12px); } }
@keyframes bell { 0%, 100% { transform:scale(1, 1); } 45% { transform:scale(1.06, .86); } 60% { transform:scale(.96, 1.05); } }
@keyframes tentacles { 0%, 100% { transform:scaleY(1) rotate(0); } 45% { transform:scaleY(1.08) rotate(1.5deg); } 60% { transform:scaleY(.96) rotate(-1.5deg); } }
.squid { width:150px; top:var(--y, 30%); color:#ffb9a7; animation:jet var(--t, 46s) ease-in-out infinite; animation-delay:var(--d, 0s); }
.squid.flip { animation-name:jet-flip; }
.squid .arms { transform-box:view-box; transform-origin:112px 40px; animation:arms 1.9s ease-in-out infinite; }
@keyframes arms { 0%, 100% { transform:scaleX(1); } 50% { transform:scaleX(.9) translateX(2px); } }
@keyframes jet { 0% { transform:translateX(118vw); } 14% { transform:translateX(84vw) translateY(-10px); } 32% { transform:translateX(74vw) translateY(6px); } 46% { transform:translateX(38vw) translateY(-8px); } 64% { transform:translateX(30vw) translateY(4px); } 80% { transform:translateX(-4vw); } 100% { transform:translateX(-30vw); } }
@keyframes jet-flip { 0% { transform:translateX(-30vw) scaleX(-1); } 14% { transform:translateX(6vw) translateY(-10px) scaleX(-1); } 32% { transform:translateX(16vw) translateY(6px) scaleX(-1); } 46% { transform:translateX(52vw) translateY(-8px) scaleX(-1); } 64% { transform:translateX(60vw) translateY(4px) scaleX(-1); } 80% { transform:translateX(96vw) scaleX(-1); } 100% { transform:translateX(124vw) scaleX(-1); } }
.seafloor { position:absolute; left:0; right:0; bottom:0; width:100%; height:min(32vh, 300px); }
.seaweed { position:absolute; bottom:0; height:min(30vh, 260px); width:auto; aspect-ratio:140 / 260; opacity:.92; transform-origin:50% 100%; will-change:transform; animation:sway 6.5s ease-in-out infinite alternate; animation-delay:var(--d, 0s); }
@keyframes sway { from { transform:translateX(-50%) translateZ(0) rotate(-4.5deg); } to { transform:translateX(-50%) translateZ(0) rotate(4.5deg); } }
.bubble { position:absolute; left:var(--x, 50%); bottom:-24px; width:var(--s, 8px); height:var(--s, 8px); border-radius:50%; border:1px solid rgba(220,255,255,.6); background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.7), rgba(255,255,255,.05) 60%); animation:bubble var(--t, 15s) linear infinite; animation-delay:var(--d, 0s); }
@keyframes bubble { 0% { transform:translate(0, 0); opacity:0; } 10% { opacity:.9; } 50% { transform:translate(14px, -56vh); } 100% { transform:translate(-10px, -112vh); opacity:0; } }
:root[data-motion="reduce"] .creature, :root[data-motion="reduce"] .bubble { display:none; }
:root[data-motion="reduce"] .ocean-sea * { animation:none !important; }
@media (max-width:900px) { .fish { width:36px; } .squid { width:100px; } .jelly { width:50px; } .seaweed { height:22vh; } .seafloor { height:24vh; } }

/* ---------- primitives ---------- */
.kicker { font:600 10px/1.2 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--blue-2); margin:0 0 6px; }
.kicker::before { content:"// "; } .kicker.red { color:var(--red); } .kicker.green { color:var(--green); }
h1, h2, h3 { margin:0; color:var(--text-hi); }
.card, .panel { position:relative; background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.panel { padding:var(--pad); }
.panel::before, .panel::after, .card::before, .card::after { content:""; position:absolute; width:18px; height:18px; border:1px solid var(--blue-line); pointer-events:none; opacity:.7; }
.panel::before, .card::before { left:-1px; top:-1px; border-right:0; border-bottom:0; border-radius:var(--radius) 0 0 0; }
.panel::after, .card::after { right:-1px; bottom:-1px; border-left:0; border-top:0; border-radius:0 0 var(--radius) 0; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.panel-head h2 { font:700 14px/1.25 var(--display); letter-spacing:.14em; text-transform:uppercase; }
.panel-head > span, .panel-head .sub { font:500 11px var(--mono); color:var(--dim); letter-spacing:.04em; white-space:nowrap; padding-top:4px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:7px 13px; font:600 11.5px/1 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--text-hi); background:var(--glass-2); border:1px solid var(--line-2); border-radius:10px; transition:transform .12s var(--ease), border-color .12s, background .12s, box-shadow .12s; white-space:nowrap; }
.btn:hover:not(:disabled) { transform:translateY(-1px); border-color:var(--blue-line); } .btn:active:not(:disabled) { transform:scale(.98); }
.btn.primary { color:var(--on-accent); background:var(--blue); border-color:transparent; box-shadow:var(--glow); }
.btn.ghost { background:transparent; border-color:transparent; } .btn.ghost:hover:not(:disabled) { border-color:var(--line-2); }
.btn.danger { color:var(--red); border-color:var(--red); }
.btn.xs { min-height:28px; padding:4px 10px; font-size:10.5px; } .btn.sm { min-height:31px; padding:6px 11px; } .btn.lg { min-height:44px; padding:10px 18px; font-size:12.5px; width:100%; }
.btn svg { width:15px; height:15px; }
.icon-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; color:var(--text-hi); background:var(--glass-2); border:1px solid var(--line-2); border-radius:10px; font:700 14px var(--display); transition:transform .12s var(--ease), border-color .12s; }
.icon-btn:hover:not(:disabled) { transform:translateY(-1px); border-color:var(--blue-line); }
.icon-btn svg { width:18px; height:18px; }
.icon-btn.busy svg { animation:spin .9s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; font:600 10.5px/1.3 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); border:1px solid var(--line-2); border-radius:99px; white-space:nowrap; }
.chip i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.chip.ok { color:var(--green); border-color:var(--green); background:var(--green-soft); } .chip.amber { color:var(--amber); border-color:var(--amber); background:var(--amber-soft); }
.chip.red { color:var(--red); border-color:var(--red); background:var(--red-soft); } .chip.blue { color:var(--blue-2); border-color:var(--blue-line); background:var(--blue-soft); }
.seg { display:inline-flex; padding:3px; gap:2px; background:var(--glass-2); border:1px solid var(--line); border-radius:12px; }
.seg button { min-height:28px; padding:4px 11px; font:600 11px/1 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); background:transparent; border:0; border-radius:9px; transition:background .12s, color .12s; }
.seg button[aria-pressed="true"] { color:var(--on-accent); background:var(--blue); box-shadow:var(--glow); }
.avatar { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; font:700 11px var(--mono); letter-spacing:.04em; color:var(--blue-3); background:var(--blue-soft); border:1px solid var(--blue-line); flex:none; }
.avatar.tiny { width:24px; height:24px; font-size:9px; border-radius:7px; } .avatar.large { width:48px; height:48px; font-size:14px; border-radius:14px; }
.empty { padding:22px 16px; text-align:center; color:var(--dim); border:1px dashed var(--line-2); border-radius:12px; }
.empty strong { display:block; color:var(--text-hi); margin-bottom:4px; }
.stamp { display:inline-block; padding:4px 8px; font:700 9px/1 var(--display); letter-spacing:.2em; text-transform:uppercase; border:2px solid currentColor; border-radius:4px; transform:rotate(-2.5deg); }
.stamp.amber { color:var(--amber); } .stamp.green { color:var(--green); } .stamp.red { color:var(--red); }
.receipt { margin:0 0 12px; padding:10px 12px; font-size:12.5px; border:1px solid var(--line-2); border-left:3px solid var(--amber); border-radius:10px; background:var(--glass-2); color:var(--text); }
.receipt.error { border-left-color:var(--red); } .receipt.ok { border-left-color:var(--green); }
.field { display:grid; gap:6px; } .field > span { font:600 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.field input, .field select, .field textarea, .toolbar input, .toolbar select, .dialog input, .dialog select, .dialog textarea { width:100%; min-height:38px; padding:8px 11px; color:var(--text-hi); background:var(--bg-2); border:1px solid var(--line-2); border-radius:10px; transition:border-color .12s; }
.field input:focus, .dialog input:focus, .dialog select:focus, .dialog textarea:focus, .toolbar input:focus, .toolbar select:focus { outline:none; border-color:var(--blue-2); box-shadow:0 0 0 3px var(--blue-soft); }
.field-help { display:block; font-size:11.5px; color:var(--dim); line-height:1.4; }
.check { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text); }
.check input { width:16px; height:16px; accent-color:var(--blue); }
.pw-wrap { position:relative; display:block; } .pw-wrap input { padding-right:44px; }
.eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:30px; height:28px; padding:0; color:var(--dim); background:transparent; border:0; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; }
.eye svg { width:18px; height:18px; } .eye[aria-pressed="true"] { color:var(--blue-2); }

/* ---------- boot ---------- */
.boot { position:fixed; inset:0; z-index:90; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; background:var(--bg); }
.boot-mark { width:76px; height:70px; display:grid; place-items:center; } .boot-mark svg { width:100%; height:100%; display:block; fill:var(--blue); filter:drop-shadow(0 0 14px var(--blue-soft)); animation:boot-x 1.6s ease-in-out infinite; }
@keyframes boot-x { 0%, 100% { opacity:.72; transform:scale(.97); } 50% { opacity:1; transform:scale(1); } }
:root[data-motion="reduce"] .boot-mark svg { animation:none; }
.boot-title { font:700 13px var(--display); letter-spacing:.24em; color:var(--blue-2); }
.boot-title i { font-style:normal; animation:blink 1.2s infinite; } .boot-title i:nth-child(2) { animation-delay:.2s; } .boot-title i:nth-child(3) { animation-delay:.4s; }
@keyframes blink { 0%,100% { opacity:.2; } 50% { opacity:1; } }
.boot p { margin:0; color:var(--dim); max-width:38ch; } .boot-timer { font:500 11px var(--mono); color:var(--faint); }

/* ---------- gate ---------- */
.gate { position:relative; z-index:2; min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; }
.gate-rail { display:flex; align-items:center; gap:16px; padding:16px clamp(16px, 4vw, 40px); border-bottom:1px solid var(--line); background:var(--glass); }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--text-hi); }
.brand-logo { display:inline-block; width:132px; height:27px; } .brand-logo svg { width:100%; height:100%; display:block; }
.brand-logo svg .w { fill:var(--text-hi); } .brand-logo svg .x { fill:var(--blue); }
.brand-tag { white-space:nowrap; padding:3px 7px; font:700 9.5px var(--mono); letter-spacing:.16em; color:var(--blue-2); background:var(--blue-soft); border:1px solid var(--blue-line); border-radius:99px; }
.gate-rail-copy { display:grid; margin-right:auto; }
.gate-rail-copy strong { font:700 11px var(--display); letter-spacing:.2em; color:var(--text-hi); } .gate-rail-copy span { font:500 9.5px var(--mono); letter-spacing:.18em; color:var(--dim); }
.gate-stage { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(360px, 460px); gap:clamp(20px, 4vw, 56px); align-items:start; padding:clamp(24px, 6vh, 72px) clamp(16px, 5vw, 64px); max-width:1240px; width:100%; margin:0 auto; }
.gate-title { font:800 clamp(30px, 4.2vw, 50px)/1.02 var(--display); letter-spacing:.02em; text-transform:uppercase; margin:6px 0 18px; }
.gate-title span { background:linear-gradient(90deg, var(--blue), var(--blue-2) 50%, var(--blue-3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gate-brief > p { max-width:60ch; color:var(--text); font-size:14px; }
.proof-line { display:flex; flex-wrap:wrap; gap:10px 22px; margin:22px 0; padding:0; list-style:none; }
.proof-line li { display:flex; align-items:center; gap:8px; font:600 11px var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.proof-line span { font:700 10px var(--mono); color:var(--blue-2); padding:3px 6px; border:1px solid var(--blue-line); border-radius:6px; }
.gate-note { font-size:12px; color:var(--dim); }
.gate-card { padding:24px; } .gate-card-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.gate-card-head h2 { font:700 16px/1.2 var(--display); letter-spacing:.1em; text-transform:uppercase; }
.lock-mark { width:38px; height:38px; border-radius:11px; border:1px solid var(--blue-line); background:var(--blue-soft); position:relative; flex:none; }
.lock-mark::before { content:""; position:absolute; left:12px; top:8px; width:12px; height:10px; border:2px solid var(--blue-2); border-bottom:0; border-radius:7px 7px 0 0; }
.lock-mark::after { content:""; position:absolute; left:9px; top:17px; width:18px; height:12px; background:var(--blue-2); border-radius:3px; }
.gate-card-copy { margin:0 0 14px; color:var(--dim); font-size:12.5px; }
.gate-form { display:grid; gap:12px; }
.turnstile { min-height:66px; display:grid; place-items:center; font-size:12px; color:var(--dim); border:1px dashed var(--line-2); border-radius:10px; }
.gate-links { display:flex; gap:16px; margin-top:14px; font-size:12px; } .gate-security { margin:12px 0 0; font:500 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.gate-local { grid-column:1 / -1; padding:20px 24px; border-color:var(--amber); }
.gate-local::before, .gate-local::after { border-color:var(--amber); }
.gate-local h2 { font:700 14px var(--display); letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; } .gate-local p { margin:0 0 12px; color:var(--dim); max-width:70ch; }
.gate-local-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.gate-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:14px clamp(16px, 4vw, 40px); border-top:1px solid var(--line); font:500 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.gate-foot nav { display:flex; gap:14px; }
@media (max-width:900px) { .gate-stage { grid-template-columns:1fr; } .gate-rail-copy { display:none; } }

/* ---------- shell ---------- */
.shell { position:relative; z-index:2; min-height:100svh; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:40; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; height:60px; padding:0 18px; background:var(--glass-2); border-bottom:1px solid var(--line); }
.modes { position:relative; justify-self:center; display:inline-flex; gap:2px; padding:3px; background:var(--glass); border:1px solid var(--line); border-radius:12px; }
.modes-ind { position:absolute; top:3px; left:0; height:calc(100% - 6px); width:0; background:var(--blue); border-radius:9px; box-shadow:var(--glow); transition:left .5s var(--ease), width .5s var(--ease); opacity:0; }
.mode { position:relative; z-index:1; min-height:30px; padding:5px 11px; font:600 11px/1 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); background:transparent; border:0; border-radius:9px; transition:color .35s var(--ease); }
.mode[aria-current="page"] { color:var(--on-accent); }
.tb-right { display:flex; align-items:center; gap:7px; min-width:0; }
.clock { padding:6px 9px; font:500 10.5px var(--mono); letter-spacing:.06em; color:var(--blue-2); border:1px solid var(--blue-line); border-radius:9px; white-space:nowrap; }
.mode-badge { padding:5px 9px; font:700 9.5px var(--mono); letter-spacing:.16em; border-radius:99px; border:1px solid var(--line-2); color:var(--slate); }
.mode-badge.live { color:var(--green); border-color:var(--green); background:var(--green-soft); } .mode-badge.demo { color:var(--amber); border-color:var(--amber); background:var(--amber-soft); }
.who { display:flex; align-items:center; gap:8px; padding:3px 10px 3px 3px; border:1px solid var(--line); border-radius:99px; }
.who .avatar { width:26px; height:26px; border-radius:50%; font-size:9px; } .who strong { display:block; font-size:11.5px; color:var(--text-hi); line-height:1.1; } .who span { font:500 9.5px var(--mono); letter-spacing:.1em; color:var(--dim); text-transform:uppercase; }
.scene-dot { position:absolute; right:-3px; top:-3px; width:9px; height:9px; border-radius:50%; background:var(--blue); border:2px solid var(--bg); }
.main { flex:1; width:100%; max-width:1480px; margin:0 auto; padding:22px clamp(14px, 2.4vw, 28px) 96px; }
.foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:14px clamp(14px, 2.4vw, 28px); border-top:1px solid var(--line); font:500 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.dock { display:none; }

/* page head */
.page-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 22px; margin-bottom:20px; }
.page-head h1 { font:800 clamp(24px, 2.6vw, 30px)/1.05 var(--display); letter-spacing:.16em; text-transform:uppercase; background:linear-gradient(90deg, var(--blue), var(--blue-2) 50%, var(--blue-3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
:root[data-motion="max"] .page-head h1 { animation:typed .5s var(--ease); clip-path:inset(0 0 0 0); }
@keyframes typed { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
.page-head .copy { margin:6px 0 0; color:var(--dim); font-size:12.5px; max-width:70ch; }
.head-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.data-badge { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; font:600 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line-2); border-radius:99px; color:var(--dim); }
.data-badge i { width:7px; height:7px; border-radius:50%; background:currentColor; }
.data-badge.live { color:var(--green); border-color:var(--green); } .data-badge.demo { color:var(--amber); border-color:var(--amber); }

/* grids */
.view { display:grid; gap:var(--gap); }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:var(--gap); }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:var(--gap); }
.grid-3-1 { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(300px, 1fr); gap:var(--gap); align-items:start; }
.side-stack { display:grid; gap:var(--gap); align-content:start; }
@media (max-width:980px) { .grid-3-1 { grid-template-columns:1fr; } }

/* metric card */
.metric { position:relative; display:grid; gap:4px; padding:16px 16px 14px; text-align:left; color:var(--text); background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); transition:transform .12s var(--ease), border-color .12s; }
.metric:hover { transform:translateY(-1px); border-color:var(--blue-line); }
.metric-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.metric-icon { display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:9px; color:var(--blue-2); background:var(--blue-soft); }
.metric-icon svg { width:17px; height:17px; }
.metric.tone-green .metric-icon { color:var(--green); background:var(--green-soft); } .metric.tone-orange .metric-icon, .metric.tone-amber .metric-icon { color:var(--amber); background:var(--amber-soft); }
.metric.tone-red .metric-icon { color:var(--red); background:var(--red-soft); } .metric.tone-violet .metric-icon { color:var(--purple); background:rgba(167,139,250,.14); }
.metric-trend { font:600 10.5px var(--mono); letter-spacing:.06em; color:var(--dim); padding:3px 7px; border:1px solid var(--line-2); border-radius:99px; }
.metric.tone-green .metric-trend { color:var(--green); border-color:var(--green); } .metric.tone-red .metric-trend { color:var(--red); border-color:var(--red); }
.metric > strong { font:500 34px/1 var(--display); letter-spacing:-.01em; color:var(--text-hi); }
.metric > span { font:600 11px var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--text); }
.metric > small { font-size:11.5px; color:var(--dim); }
.metric-proof { margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font:500 10px var(--mono); color:var(--faint); letter-spacing:.04em; display:flex; justify-content:space-between; gap:8px; }
.metric-proof b { color:var(--dim); font-weight:600; }

/* priority / attention / exceptions */
.priority-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; }
.priority { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 14px; text-align:left; background:var(--glass-2); border:1px solid var(--line); border-radius:14px; color:var(--text); transition:transform .12s var(--ease), border-color .12s; }
.priority:hover { transform:translateY(-1px); border-color:var(--blue-line); }
.priority .metric-icon { width:36px; height:36px; }
.priority small { display:block; font:600 10px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } .priority strong { display:block; font:500 26px/1.1 var(--display); color:var(--text-hi); } .priority em { display:block; font-style:normal; font-size:11px; color:var(--dim); }
.priority svg.arrow { width:15px; height:15px; color:var(--blue-2); }
.attention { display:grid; gap:8px; }
.att { display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:12px; padding:10px 12px; text-align:left; color:var(--text); background:var(--glass-2); border:1px solid var(--line); border-left:3px solid var(--slate); border-radius:12px; transition:transform .12s var(--ease); }
.att:hover { transform:translateY(-1px); } .att.urgent { border-left-color:var(--red); } .att.review { border-left-color:var(--amber); } .att.watch { border-left-color:var(--blue-2); }
.att strong { font:500 26px/1 var(--display); color:var(--text-hi); text-align:center; } .att b { display:block; font-weight:700; color:var(--text-hi); } .att small { color:var(--dim); font-size:11.5px; }
.att em { font-style:normal; font:600 10.5px var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--blue-2); display:inline-flex; align-items:center; gap:4px; } .att em svg { width:13px; height:13px; }
.exc-list { display:grid; gap:8px; }
.exc { display:grid; grid-template-columns:auto 1fr auto auto auto; align-items:center; gap:12px; padding:10px 12px; text-align:left; color:var(--text); background:var(--glass-2); border:1px solid var(--line); border-radius:12px; transition:transform .12s var(--ease), border-color .12s; }
.exc:hover { transform:translateY(-1px); border-color:var(--blue-line); }
.exc-sev { padding:4px 8px; font:700 9.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; border-radius:6px; }
.exc-sev.overdue { color:var(--red); background:var(--red-soft); } .exc-sev.awaiting-review { color:var(--amber); background:var(--amber-soft); }
.exc strong { display:block; color:var(--text-hi); } .exc small { color:var(--dim); font:500 11px var(--mono); }
.exc .who-col b { display:block; font-weight:600; color:var(--text); } .exc time { font:500 11px var(--mono); color:var(--dim); } .exc svg { width:14px; height:14px; color:var(--dim); }
.text-btn { display:inline-flex; align-items:center; gap:5px; padding:0; font:600 11px var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--blue-2); background:none; border:0; } .text-btn svg { width:14px; height:14px; }

/* data health */
.health-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px; }
.health { display:grid; grid-template-columns:auto 1fr; gap:10px 12px; padding:12px; background:var(--glass-2); border:1px solid var(--line); border-radius:12px; }
.health .glyph { grid-row:span 2; display:grid; place-items:center; width:34px; height:34px; border-radius:9px; font:700 13px var(--display); color:var(--blue-2); background:var(--blue-soft); }
.health strong { display:block; color:var(--text-hi); font-size:12.5px; } .health small { color:var(--dim); font-size:11px; }
.health p { margin:0; font:500 11px var(--mono); color:var(--dim); display:flex; justify-content:space-between; gap:8px; } .health p b { color:var(--text-hi); }
.health-status { display:inline-flex; align-items:center; gap:6px; } .health-status i { width:7px; height:7px; border-radius:50%; background:var(--amber); } .health-status.live i { background:var(--green); }

/* charts */
.chart { position:relative; }
.chart-insight { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.chart-insight strong { font:500 20px/1 var(--display); color:var(--text-hi); } .chart-insight small { color:var(--dim); font-size:11.5px; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart .grid-line { stroke:var(--line); stroke-width:1; } .chart .axis { stroke:var(--line-2); stroke-width:1; }
.chart .area { fill:url(#areaFill); } .chart .line { fill:none; stroke:var(--blue-2); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart .dot { fill:var(--blue-2); stroke:var(--bg); stroke-width:2; } .chart .hit { fill:transparent; cursor:crosshair; }
.chart .xhair { stroke:var(--line-2); stroke-width:1; stroke-dasharray:3 3; pointer-events:none; } .chart .xdot { fill:var(--text-hi); stroke:var(--blue-2); stroke-width:2; pointer-events:none; }
.chart-labels { display:flex; justify-content:space-between; margin-top:6px; font:500 10.5px var(--mono); color:var(--faint); }
.tip { position:fixed; z-index:3500; padding:8px 10px; font-size:12px; color:var(--text-hi); background:var(--glass-3); border:1px solid var(--line-2); border-radius:9px; box-shadow:var(--shadow); pointer-events:none; white-space:nowrap; transform:translate(-50%, calc(-100% - 12px)); }
.tip small { display:block; font:500 10px var(--mono); color:var(--dim); letter-spacing:.06em; }
.chart-table-toggle { margin-top:8px; }
.chart-table { width:100%; border-collapse:collapse; font:500 11px var(--mono); margin-top:8px; } .chart-table th, .chart-table td { padding:4px 6px; border-bottom:1px solid var(--line); text-align:left; } .chart-table td:last-child, .chart-table th:last-child { text-align:right; }

/* website intent + ledger */
.intent-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:14px; }
.intent-row > div { padding:10px 12px; background:var(--glass-2); border:1px solid var(--line); border-radius:12px; }
.intent-row span { display:block; font:600 10px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } .intent-row strong { display:block; font:500 24px/1.15 var(--display); color:var(--text-hi); } .intent-row small { color:var(--dim); font-size:11px; }
.ledger { display:grid; gap:6px; }
.ledger-row { display:grid; grid-template-columns:70px repeat(3, 1fr); align-items:center; gap:10px; padding:8px 10px; background:var(--glass-2); border:1px solid var(--line); border-radius:10px; }
.ledger-row .date { font:600 11px var(--mono); color:var(--blue-2); } .ledger-row .kpi strong { display:block; font:500 16px/1.1 var(--display); color:var(--text-hi); } .ledger-row .kpi small { font-size:10.5px; color:var(--dim); }
.ledger-row .kpi.risk strong { color:var(--red); } .ledger-row .kpi.healthy strong { color:var(--green); }

/* funnel + sources */
.funnel { display:grid; gap:8px; }
.stage-meta { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; margin-bottom:4px; }
.stage-meta span { display:inline-flex; align-items:center; gap:6px; color:var(--text); } .stage-meta i { width:8px; height:8px; border-radius:50%; background:var(--blue-2); }
.stage-meta strong { font:500 15px var(--display); color:var(--text-hi); }
.track { height:8px; background:var(--bg-2); border:1px solid var(--line); border-radius:99px; overflow:hidden; } .track b { display:block; height:100%; background:var(--blue-2); border-radius:99px; transition:width .8s var(--ease); }
.stage-customer .stage-meta i, .stage-customer .track b { background:var(--green); } .stage-churned .stage-meta i, .stage-churned .track b { background:var(--red); }
.sources { display:grid; gap:10px; }
.source > div { display:flex; justify-content:space-between; font-size:12.5px; } .source strong { font:500 15px var(--display); color:var(--text-hi); } .source small { font:500 10.5px var(--mono); color:var(--dim); }

/* leads route */
.lead-summary { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; }
.lead-summary h2 { font:700 16px/1.2 var(--display); letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; } .lead-summary > div > span { color:var(--dim); font-size:12px; }
.kpis { display:flex; gap:22px; } .kpis span { display:grid; } .kpis strong { font:500 28px/1 var(--display); color:var(--text-hi); } .kpis small { font:600 10px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.route-head { display:grid; grid-template-columns:minmax(220px, 1.1fr) minmax(0, 2fr) minmax(160px, .9fr); gap:14px; padding:0 12px 8px; font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.route-axis { display:flex; justify-content:space-between; }
.route-list { display:grid; gap:6px; }
.route { display:grid; grid-template-columns:minmax(220px, 1.1fr) minmax(0, 2fr) minmax(160px, .9fr); align-items:center; gap:14px; padding:10px 12px; text-align:left; color:var(--text); background:var(--glass-2); border:1px solid var(--line); border-radius:12px; transition:border-color .12s, background .12s; }
.route:hover { border-color:var(--blue-line); background:var(--glass-3); }
.route-id { display:flex; align-items:center; gap:10px; min-width:0; } .route-num { font:600 10.5px var(--mono); color:var(--faint); }
.route-id strong { display:block; font-weight:700; color:var(--text-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .route-id span:last-child { font-size:11px; color:var(--dim); }
.route-track { position:relative; height:26px; display:flex; justify-content:space-between; align-items:center; }
.route-track::before { content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--line-2); transform:translateY(-50%); }
.route-fill { position:absolute; left:0; top:50%; height:2px; background:var(--blue-2); transform:translateY(-50%); transition:width .8s var(--ease); }
.node { position:relative; z-index:1; width:12px; height:12px; border-radius:50%; background:var(--bg-2); border:2px solid var(--line-2); }
.node.complete { border-color:var(--blue-2); background:var(--blue-2); } .node.current { border-color:var(--blue-2); background:var(--text-hi); box-shadow:0 0 0 4px var(--blue-soft); }
.route-owner { display:flex; align-items:center; gap:8px; justify-content:flex-end; } .route-owner strong { display:block; font-size:12px; color:var(--text-hi); } .route-owner span:last-of-type { font-size:10.5px; color:var(--dim); } .route-owner svg { width:14px; height:14px; color:var(--dim); }
.dial-wrap { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; }
.ring { position:relative; width:104px; height:104px; } .ring svg { width:100%; height:100%; transform:rotate(-90deg); } .ring .bg { fill:none; stroke:var(--line-2); stroke-width:8; } .ring .fg { fill:none; stroke:var(--blue-2); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 1.1s var(--ease); }
.ring.green .fg { stroke:var(--green); }
.ring div { position:absolute; inset:0; display:grid; place-content:center; text-align:center; } .ring strong { font:500 22px/1 var(--display); color:var(--text-hi); } .ring small { font:600 9.5px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.counts { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:12px; } .counts span { display:grid; padding:8px; text-align:center; background:var(--glass-2); border:1px solid var(--line); border-radius:10px; } .counts strong { font:500 20px/1.1 var(--display); color:var(--text-hi); } .counts small { font:600 9.5px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }

/* tables */
.toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-bottom:12px; }
.toolbar label { display:grid; gap:5px; flex:1 1 200px; } .toolbar label span { font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.toolbar .btn { align-self:end; }
.table-shell { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
table.data { width:100%; border-collapse:collapse; font-size:12.5px; }
table.data th { padding:9px 12px; text-align:left; font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--line-2); background:var(--glass-2); white-space:nowrap; }
table.data td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--text); } table.data tr:last-child td { border-bottom:0; }
table.data tr[data-new="true"] td { background:var(--green-soft); }
.person { display:flex; align-items:center; gap:10px; } .person strong { display:block; color:var(--text-hi); } .person small { color:var(--dim); font-size:11px; }
.rank { display:inline-grid; place-items:center; width:22px; height:22px; font:700 10px var(--mono); border-radius:6px; color:var(--dim); border:1px solid var(--line-2); } .rank.rank-1 { color:var(--on-accent); background:var(--blue); border-color:transparent; }
.goal { display:grid; gap:4px; min-width:120px; } .goal span { font:500 11px var(--mono); color:var(--dim); } .goal i { display:block; height:6px; background:var(--bg-2); border:1px solid var(--line); border-radius:99px; overflow:hidden; } .goal b { display:block; height:100%; background:var(--blue-2); transition:width .8s var(--ease); }
.pos { color:var(--green); font-weight:700; }
.pill { display:inline-flex; align-items:center; padding:3px 9px; font:600 10.5px var(--ui); letter-spacing:.04em; border-radius:99px; border:1px solid var(--line-2); color:var(--text); white-space:nowrap; }
.pill.status-queued { color:var(--slate); } .pill.status-in-review { color:var(--blue-2); border-color:var(--blue-line); background:var(--blue-soft); } .pill.status-estimate-ready { color:var(--green); border-color:var(--green); background:var(--green-soft); }
.pill.status-estimate-ready.gated { color:var(--amber); border-color:var(--amber); background:var(--amber-soft); }
.row-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; align-items:center; }
.note { font:500 10.5px var(--mono); color:var(--faint); letter-spacing:.04em; white-space:nowrap; }
.done { color:var(--green); display:inline-flex; } .done svg { width:16px; height:16px; }
.proj strong { display:block; color:var(--text-hi); } .proj small { font:500 10.5px var(--mono); color:var(--dim); }
@media (max-width:760px) {
  table.data thead { display:none; } table.data tr { display:grid; gap:4px; padding:10px 12px; border-bottom:1px solid var(--line); }
  table.data td { display:grid; grid-template-columns:110px 1fr; gap:8px; padding:3px 0; border:0; } table.data td::before { content:attr(data-label); font:600 9.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); align-self:center; }
  table.data td.actions-cell { grid-template-columns:1fr; } table.data td.actions-cell::before { display:none; } table.data td.actions-cell .row-actions { justify-content:flex-start; }
}

/* team */
.team-summary { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.team-summary > div { padding:14px 16px; text-align:center; background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); } .team-summary strong { display:block; font:500 30px/1 var(--display); color:var(--text-hi); } .team-summary span { font:600 10px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.team-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--gap); }
.emp { display:grid; gap:6px; padding:16px; background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.emp-top { display:flex; justify-content:space-between; align-items:flex-start; } .emp h3 { font:700 14px var(--ui); color:var(--text-hi); margin-top:4px; } .emp p { margin:0; font-size:12px; color:var(--dim); }
.emp-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; padding-top:10px; border-top:1px solid var(--line); } .emp-stats strong { display:block; font:500 20px/1.1 var(--display); color:var(--text-hi); } .emp-stats span { font:600 9.5px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.status-active { color:var(--green); border-color:var(--green); } .status-inactive { color:var(--slate); } .status-leave { color:var(--amber); border-color:var(--amber); }

/* takeoffs */
.quality-body { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; margin:6px 0 14px; }
.kd span { display:block; font:600 10px var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); } .kd strong { display:block; font:500 40px/1 var(--display); color:var(--text-hi); } .kd small { font-size:11px; color:var(--dim); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .split > div { padding:10px 12px; background:var(--glass-2); border:1px solid var(--line); border-radius:12px; display:grid; grid-template-columns:auto auto 1fr; gap:4px 8px; align-items:baseline; }
.split i { width:8px; height:8px; border-radius:50%; align-self:center; } .split .kill { background:var(--green); } .split .death { background:var(--red); }
.split strong { font:500 22px/1 var(--display); color:var(--text-hi); } .split small { font:600 10px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } .split p { grid-column:1 / -1; margin:0; font-size:11px; color:var(--dim); }
.prod { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; } .prod > div { padding:10px 12px; background:var(--glass-2); border:1px solid var(--line); border-radius:12px; }
.prod span { display:block; font:600 10px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } .prod strong { display:block; font:500 26px/1.15 var(--display); color:var(--text-hi); } .prod small { font-size:10.5px; color:var(--dim); }
.legend { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 14px; background:var(--glass); border:1px solid var(--line); border-radius:12px; }
.legend span { padding:4px 9px; font:600 10.5px var(--ui); letter-spacing:.04em; border-radius:99px; background:var(--blue-soft); color:var(--text-hi); } .legend svg { width:13px; height:13px; color:var(--dim); }
.truth { display:inline-flex; align-items:center; gap:5px; font:500 10.5px var(--mono); color:var(--green); } .truth svg { width:13px; height:13px; }

/* hunter */
.hero { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; align-items:flex-end; }
.hero h2 { font:700 16px/1.2 var(--display); letter-spacing:.1em; text-transform:uppercase; } .hero > div > span { display:block; color:var(--dim); font-size:12px; margin-top:4px; max-width:60ch; }
.agent-row { display:grid; grid-template-columns:auto 1fr minmax(180px, 1fr) auto; gap:12px; align-items:center; padding:10px 12px; background:var(--glass-2); border:1px solid var(--line); border-radius:12px; }
.agent-row strong { display:block; color:var(--text-hi); } .agent-row small { color:var(--dim); font-size:11px; }
.agent-row label { display:grid; gap:4px; } .agent-row label span { font:600 9.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.agent-row select { min-height:34px; padding:6px 10px; color:var(--text-hi); background:var(--bg-2); border:1px solid var(--line-2); border-radius:9px; }
.agent-row .warn { grid-column:1 / -1; margin:0; font-size:11px; color:var(--amber); }
.agent-list, .place-list { display:grid; gap:8px; }
.place { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:10px 12px; background:var(--glass-2); border:1px solid var(--line); border-radius:12px; }
.place .tgt { width:26px; height:26px; border-radius:50%; border:2px solid var(--blue-2); display:grid; place-items:center; } .place .tgt i { width:8px; height:8px; border-radius:50%; background:var(--blue-2); }
.place strong { display:block; color:var(--text-hi); } .place small { display:block; color:var(--dim); font-size:11px; } .place em { display:block; font:500 10.5px var(--mono); color:var(--faint); font-style:normal; } .place b { font:600 11px var(--mono); color:var(--blue-2); white-space:nowrap; }
.create-form { display:grid; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.create-form h3 { font:700 13px var(--display); letter-spacing:.12em; text-transform:uppercase; } .create-form header span { display:block; color:var(--dim); font-size:11.5px; margin-top:4px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .form-grid .wide { grid-column:1 / -1; }
.form-grid .field input { min-height:36px; }

/* sheets, dialogs, settings */
.layer { position:fixed; inset:0; z-index:60; }
.scrim { position:absolute; inset:0; width:100%; height:100%; padding:0; background:rgba(0,0,0,.6); border:0; cursor:default; }
.sheet { position:absolute; top:10px; right:10px; bottom:10px; width:min(560px, calc(100vw - 20px)); display:flex; flex-direction:column; background:var(--glass-3); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.sheet.settings { width:min(440px, calc(100vw - 20px)); }
:root[data-motion="max"] .layer:not([hidden]) .sheet { animation:summon .5s var(--ease); } :root[data-motion="standard"] .layer:not([hidden]) .sheet { animation:summon .32s var(--ease); }
@keyframes summon { from { opacity:0; transform:translateX(30px) scale(.96) skewY(-1.5deg); } to { opacity:1; transform:none; } }
.sheet-head { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); }
.sheet-head h2 { font:700 20px/1.15 var(--ui); } .sheet-head .kicker { margin-bottom:2px; } .sheet-head small { display:block; color:var(--dim); font-size:12px; }
.sheet-head .icon-btn { margin-left:auto; }
.sheet-body { flex:1; overflow:auto; padding:18px 20px; display:grid; gap:16px; align-content:start; }
.sheet-foot { padding:12px 20px; border-top:1px solid var(--line); font-size:11.5px; color:var(--dim); }
.sec { padding:14px; background:var(--glass-2); border:1px solid var(--line); border-radius:12px; display:grid; gap:10px; }
.sec-title { display:flex; align-items:center; gap:10px; } .sec-title svg { width:16px; height:16px; color:var(--blue-2); } .sec-title strong { display:block; color:var(--text-hi); font-size:13px; } .sec-title small { color:var(--dim); font-size:11px; }
.contact { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; } .contact strong { display:block; color:var(--text-hi); } .contact small { color:var(--dim); font-size:11px; }
.contact dl { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; } .contact dt { font:600 9.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } .contact dd { margin:2px 0 0; color:var(--text); font-size:12.5px; }
.intel { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; } .intel > div { padding:8px 10px; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; } .intel span { display:block; font:600 9.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); } .intel strong { display:block; font:500 18px/1.2 var(--display); color:var(--text-hi); }
.route-mini { display:grid; gap:6px; } .route-mini-top { display:flex; justify-content:space-between; font-size:12px; color:var(--dim); } .route-mini-top strong { color:var(--text-hi); }
.route-mini-labels { display:flex; justify-content:space-between; font:600 9.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.next { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--blue-line); background:var(--blue-soft); border-radius:12px; }
.next span { display:block; font:600 9.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--blue-2); } .next strong { display:block; color:var(--text-hi); font-size:13px; } .next time { display:grid; text-align:right; font-size:12px; color:var(--text); } .next time small { color:var(--dim); font-size:10.5px; }
.meta-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .meta-row span { display:grid; padding:8px 10px; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; } .meta-row small { font:600 9.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); } .meta-row strong { color:var(--text-hi); font-size:12.5px; }
.notes { margin:0; font-size:12.5px; color:var(--text); line-height:1.5; }
.mono-line { font:500 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.dialog { position:absolute; left:50%; top:50%; width:min(520px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; transform:translate(-50%, -50%); padding:20px; background:var(--glass-3); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow); }
:root[data-motion="max"] .layer:not([hidden]) .dialog { animation:summon-c .45s var(--ease); }
@keyframes summon-c { from { opacity:0; transform:translate(-50%, -50%) scale(.9); } to { opacity:1; transform:translate(-50%, -50%); } }
.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; } .dialog-head h2 { font:700 16px/1.2 var(--display); letter-spacing:.1em; text-transform:uppercase; }
.dialog form { display:grid; gap:12px; } .dialog label { display:grid; gap:5px; font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); } .dialog textarea { resize:vertical; min-height:70px; }
.dialog-foot { display:flex; justify-content:space-between; gap:10px; margin-top:6px; }
.keys { display:grid; gap:8px; margin:0; } .keys div { display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:center; } .keys dt { display:flex; gap:4px; align-items:center; } .keys dd { margin:0; color:var(--text); font-size:12.5px; }
.settings-body { flex:1; overflow:auto; padding:16px 20px; display:grid; gap:18px; align-content:start; }
.group-label { font:600 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.scenes { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.scene-opt { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:8px 10px; text-align:left; color:var(--text); background:var(--glass-2); border:1px solid var(--line); border-radius:12px; transition:border-color .12s; }
.scene-opt[aria-pressed="true"] { border-color:var(--blue-2); box-shadow:0 0 0 1px var(--blue-line); }
.scene-opt strong { display:block; font-size:12px; color:var(--text-hi); } .scene-opt small { font-size:10.5px; color:var(--dim); }
.scene-sw { width:34px; height:24px; border-radius:7px; border:1px solid rgba(255,255,255,.12); position:relative; overflow:hidden; }
.scene-sw::after { content:""; position:absolute; left:6px; right:6px; bottom:5px; height:3px; border-radius:2px; }
.scene-sw.light { background:#f4f7fb; } .scene-sw.light::after { background:#0072ff; } .scene-sw.dark { background:#070a10; } .scene-sw.dark::after { background:#0072ff; }
.scene-sw.inverted { background:#f3e4c4; } .scene-sw.inverted::after { background:#c2410c; } .scene-sw.terminal { background:#020704; } .scene-sw.terminal::after { background:#3cff79; }
.scene-sw.ocean { background:linear-gradient(155deg,#075f7b,#001a2b); } .scene-sw.ocean::after { background:#ffd166; } .scene-sw.space { background:linear-gradient(115deg,#1b1f4a,#040611); } .scene-sw.space::after { background:#8b93ff; }
.scene-opt svg { width:14px; height:14px; color:var(--blue-2); opacity:0; } .scene-opt[aria-pressed="true"] svg { opacity:1; }
.toggle { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; width:100%; padding:10px 12px; margin-bottom:6px; text-align:left; color:var(--text); background:var(--glass-2); border:1px solid var(--line); border-radius:12px; }
.toggle strong { display:block; font-size:12.5px; color:var(--text-hi); } .toggle small { font-size:11px; color:var(--dim); }
.switch { width:38px; height:22px; border-radius:99px; background:var(--bg-2); border:1px solid var(--line-2); position:relative; transition:background .2s; } .switch::after { content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:var(--dim); transition:transform .2s var(--ease), background .2s; }
.toggle[aria-checked="true"] .switch { background:var(--blue); border-color:transparent; } .toggle[aria-checked="true"] .switch::after { transform:translateX(16px); background:var(--on-accent); }
.credit { font-size:10.5px; color:var(--faint); }

/* toast */
.toast { position:fixed; left:50%; bottom:22px; z-index:95; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; max-width:min(560px, calc(100vw - 24px)); padding:10px 14px; font-size:12.5px; color:var(--text-hi); background:var(--glass-3); border:1px solid var(--line-2); border-left:3px solid var(--green); border-radius:12px; box-shadow:var(--shadow); animation:toast-in .3s var(--ease); }
.toast.error { border-left-color:var(--red); } .toast.warn { border-left-color:var(--amber); }
@keyframes toast-in { from { opacity:0; transform:translate(-50%, 8px); } to { opacity:1; transform:translate(-50%, 0); } }

/* error panel */
.error-panel { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding:20px; border-color:var(--red); }
.error-panel::before, .error-panel::after { border-color:var(--red); }
.error-panel svg { width:26px; height:26px; color:var(--red); } .error-panel h2 { font:700 15px var(--display); letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; } .error-panel p { margin:0 0 10px; color:var(--text); } .error-panel small { display:block; color:var(--dim); margin-bottom:10px; }

/* density + motion */
:root[data-density="compact"] { --gap:10px; --pad:13px; --radius:14px; } :root[data-density="compact"] body { font-size:12.5px; } :root[data-density="compact"] .metric > strong { font-size:28px; } :root[data-density="compact"] table.data td { padding:7px 10px; }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* responsive */
@media (max-width:1380px) { .brand-tag { display:none; } .who > div { display:none; } .who { padding:3px; border:0; } }
@media (max-width:1180px) { .mode { padding:5px 9px; font-size:10.5px; } .clock { display:none; } }
@media (max-width:900px) {
  .topbar { grid-template-columns:auto 1fr; } .modes { display:none; } .who > div { display:none; } .who { padding:3px; border:0; }
  .dock { position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); z-index:50; display:grid; grid-template-columns:repeat(5, 1fr); padding:6px; background:var(--glass-3); border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--shadow); }
  .dock button { display:grid; justify-items:center; gap:3px; padding:6px 2px; color:var(--dim); background:transparent; border:0; border-radius:10px; font:600 8.5px var(--ui); letter-spacing:.04em; text-transform:uppercase; }
  .dock button[aria-current="page"] { color:var(--blue-2); background:var(--blue-soft); } .dock i { display:block; width:18px; height:18px; } .dock i svg { width:18px; height:18px; }
  .main { padding-bottom:110px; } .page-head h1 { font-size:22px; }
  .route-head { display:none; } .route { grid-template-columns:1fr; gap:8px; } .route-owner { justify-content:flex-start; }
  .agent-row { grid-template-columns:auto 1fr; } .agent-row label, .agent-row .btn { grid-column:1 / -1; }
  .quality-body { grid-template-columns:1fr; justify-items:center; text-align:center; } .exc { grid-template-columns:auto 1fr; } .exc time, .exc svg { display:none; }
  .team-summary { grid-template-columns:1fr; } .form-grid { grid-template-columns:1fr; } .intent-row { grid-template-columns:1fr; }
}
@media (max-width:560px) { .kpis { gap:14px; } .kpis strong { font-size:22px; } .ledger-row { grid-template-columns:60px repeat(3, 1fr); gap:6px; } .brand-tag { display:none; } .scenes { grid-template-columns:1fr; } }

/* print — the case file view */
@media print { #fx-grid, #fx-spot, #scene-layer, .topbar, .dock, .foot, .toast, .head-actions { display:none !important; } body { background:#fff; color:#000; } .panel, .card, .metric { box-shadow:none; border-color:#ccc; background:#fff; } }


/* ---------- identity card + section nav ---------- */
.who { position:relative; }
.who-btn { display:flex; align-items:center; gap:9px; padding:3px 12px 3px 3px; color:var(--text); background:transparent; border:1px solid var(--line); border-radius:99px; transition:border-color .15s; }
.who-btn:hover, .who-btn[aria-expanded="true"] { border-color:var(--blue-line); }
.who-btn .avatar { width:28px; height:28px; border-radius:50%; font-size:10px; }
.who-text { display:grid; text-align:left; line-height:1.15; } .who-text strong { font-size:13px; color:var(--text-hi); } .who-text span { font-size:11px; color:var(--dim); }
.who-card { position:absolute; right:0; top:calc(100% + 10px); width:320px; display:none; padding:16px; background:var(--glass-3); border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--shadow); z-index:70; text-align:left; }
.who:hover .who-card, .who:focus-within .who-card, .who.open .who-card { display:block; animation:card-in .22s var(--ease); }
@keyframes card-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.who-card-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .who-card-head strong { display:block; font-size:16px; color:var(--text-hi); } .who-card-head span { font-size:12.5px; color:var(--dim); }
.who-card dl { display:grid; gap:8px; margin:0 0 14px; } .who-card dl div { display:grid; grid-template-columns:96px 1fr; gap:8px; align-items:baseline; }
.who-card dt { font-size:12px; color:var(--dim); } .who-card dd { margin:0; font-size:13px; color:var(--text); overflow-wrap:anywhere; }
.who-card-foot { display:flex; justify-content:space-between; gap:8px; }
.subnav { display:flex; flex-wrap:wrap; gap:8px; }
.subnav button { padding:7px 14px; font:600 13px var(--ui); color:var(--text); background:var(--glass); border:1px solid var(--line); border-radius:99px; transition:border-color .12s, transform .12s var(--ease); }
.subnav button:hover { border-color:var(--blue-line); transform:translateY(-1px); }
@media (max-width:900px) { .who-text { display:none; } .who-btn { padding:3px; border:0; } .who-card { right:-60px; width:min(320px, calc(100vw - 24px)); } }

/* ---------- readability pass: bigger sentence-case type, plain labels, readable numerals ---------- */
:root { --text:#e8eef6; --dim:#a7b6c8; --faint:#7d8ca0; }
:root[data-scene="light"] { --text:#1f2f42; --dim:#4f647c; --faint:#7b8ca1; }
:root[data-scene="ocean"] { --glass:rgba(1,22,38,.9); } :root[data-scene="space"] { --glass:rgba(0,0,0,.9); }
body { font-size:15px; line-height:1.5; }
.kicker { font:600 12px/1.3 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin:0 0 4px; } .kicker::before { content:none; }
.panel { padding:20px; } .panel::before, .panel::after, .card::before, .card::after { display:none; }
.panel-head { margin-bottom:16px; } .panel-head h2 { font:600 18px/1.3 var(--ui); letter-spacing:0; text-transform:none; }
.panel-head > span, .panel-head .sub { font:500 13px var(--ui); letter-spacing:0; color:var(--dim); padding-top:5px; }
.btn { min-height:36px; padding:8px 14px; font:600 13px/1 var(--ui); letter-spacing:.01em; text-transform:none; }
.btn.xs { min-height:30px; padding:5px 11px; font-size:12.5px; } .btn.sm { min-height:33px; font-size:13px; } .btn.lg { min-height:46px; font-size:15px; letter-spacing:.02em; }
.chip { padding:4px 10px; font:600 12px/1.3 var(--ui); letter-spacing:.02em; text-transform:none; }
.seg button { min-height:30px; padding:5px 12px; font:600 13px/1 var(--ui); letter-spacing:.01em; text-transform:none; }
.mode { min-height:32px; padding:6px 14px; font:600 13.5px/1 var(--ui); letter-spacing:.01em; text-transform:none; }
.brand-tag { font:600 10.5px var(--ui); letter-spacing:.1em; }
.clock { font:500 12px var(--mono); letter-spacing:.03em; }
.mode-badge { font:700 10.5px var(--ui); letter-spacing:.12em; }
.page-head h1 { font:800 clamp(24px, 2.4vw, 30px)/1.1 var(--display); letter-spacing:.08em; }
.page-head .copy { font-size:14px; }
.data-badge { font:600 12px var(--ui); letter-spacing:.02em; text-transform:none; }
.metric { gap:5px; padding:18px 18px 16px; }
.metric > strong { font:700 34px/1.05 var(--ui); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.metric > span { font:600 14px var(--ui); letter-spacing:0; text-transform:none; color:var(--text-hi); }
.metric > small { font-size:13px; } .metric-trend { font:600 12px var(--ui); letter-spacing:0; }
.metric-proof { font:500 12px var(--ui); letter-spacing:0; color:var(--dim); } .metric-proof b { color:var(--text); }
.priority small { font:600 12.5px var(--ui); letter-spacing:0; text-transform:none; } .priority strong { font:700 28px/1.1 var(--ui); font-variant-numeric:tabular-nums; } .priority em { font-size:12.5px; }
.att strong { font:700 26px/1 var(--ui); font-variant-numeric:tabular-nums; } .att b { font-size:15px; } .att small { font-size:13px; } .att em { font:600 12.5px var(--ui); letter-spacing:0; text-transform:none; }
.exc-sev { font:700 11px var(--ui); letter-spacing:.06em; } .exc small { font:500 12.5px var(--ui); } .exc time { font:500 12.5px var(--ui); }
.health .glyph { font:700 14px var(--ui); } .health strong { font-size:14px; } .health small { font-size:12.5px; } .health p { font:500 12.5px var(--ui); }
.health-status { font:500 13px var(--ui); }
.chart-insight strong { font:700 20px/1 var(--ui); font-variant-numeric:tabular-nums; } .chart-insight small { font-size:12.5px; } .chart-labels { font:500 12px var(--ui); }
.chart-table { font:500 12.5px var(--ui); }
.intent-row span { font:600 12.5px var(--ui); letter-spacing:0; text-transform:none; } .intent-row strong { font:700 24px/1.15 var(--ui); font-variant-numeric:tabular-nums; } .intent-row small { font-size:12px; }
.ledger-row .date { font:600 13px var(--ui); } .ledger-row .kpi strong { font:700 17px/1.1 var(--ui); font-variant-numeric:tabular-nums; } .ledger-row .kpi small { font-size:12px; }
.stage-meta { font-size:13.5px; } .stage-meta strong { font:700 16px var(--ui); } .source > div { font-size:14px; } .source strong { font:700 16px var(--ui); } .source small { font:500 12px var(--ui); }
.lead-summary h2 { font:600 20px/1.3 var(--ui); letter-spacing:0; text-transform:none; } .lead-summary > div > span { font-size:13.5px; }
.kpis strong { font:700 28px/1 var(--ui); font-variant-numeric:tabular-nums; } .kpis small { font:600 12px var(--ui); letter-spacing:0; text-transform:none; }
.route-head { font:600 12px var(--ui); letter-spacing:.04em; } .route-num { font:600 12px var(--ui); } .route-id strong { font-size:14.5px; } .route-id span:last-child { font-size:12.5px; }
.route-owner strong { font-size:13px; } .route-owner span:last-of-type { font-size:12px; }
.ring strong { font:700 22px/1 var(--ui); font-variant-numeric:tabular-nums; } .ring small { font:600 11px var(--ui); letter-spacing:0; text-transform:none; }
.counts strong { font:700 20px/1.1 var(--ui); font-variant-numeric:tabular-nums; } .counts small { font:600 11.5px var(--ui); letter-spacing:0; text-transform:none; }
.toolbar label span { font:600 12.5px var(--ui); letter-spacing:0; text-transform:none; }
table.data { font-size:14px; } table.data th { font:600 12px var(--ui); letter-spacing:.05em; }
.goal span { font:500 12.5px var(--ui); } .pill { font:600 12.5px var(--ui); } .note { font:500 12.5px var(--ui); letter-spacing:0; } .proj small { font:500 12.5px var(--ui); }
.person small { font-size:12.5px; } .rank { font:700 11px var(--ui); }
.team-summary strong { font:700 30px/1 var(--ui); font-variant-numeric:tabular-nums; } .team-summary span { font:600 12.5px var(--ui); letter-spacing:0; text-transform:none; }
.emp h3 { font-size:15px; } .emp p { font-size:13px; } .emp-stats strong { font:700 20px/1.1 var(--ui); font-variant-numeric:tabular-nums; } .emp-stats span { font:600 11.5px var(--ui); letter-spacing:0; text-transform:none; }
.kd span { font:600 12.5px var(--ui); letter-spacing:0; text-transform:none; } .kd strong { font:700 40px/1 var(--ui); font-variant-numeric:tabular-nums; } .kd small { font-size:12.5px; }
.split > div { grid-template-columns:auto auto; } .split strong { font:700 24px/1 var(--ui); font-variant-numeric:tabular-nums; } .split p { font-size:13px; color:var(--text); }
.prod span { font:600 12.5px var(--ui); letter-spacing:0; text-transform:none; } .prod strong { font:700 26px/1.15 var(--ui); font-variant-numeric:tabular-nums; } .prod small { font-size:12px; }
.truth { font:500 12.5px var(--ui); }
.sheet-head h2 { font-size:21px; } .sheet-head small { font-size:13px; } .sec-title strong { font-size:14.5px; } .sec-title small { font-size:12.5px; }
.contact dt { font:600 11.5px var(--ui); letter-spacing:.04em; } .contact dd { font-size:13.5px; } .contact strong { font-size:14px; } .contact small { font-size:12.5px; }
.intel span { font:600 11.5px var(--ui); letter-spacing:.02em; } .intel strong { font:700 18px/1.2 var(--ui); font-variant-numeric:tabular-nums; }
.next span { font:600 11.5px var(--ui); letter-spacing:.04em; } .next strong { font-size:14px; } .next time { font-size:13px; } .next time small { font-size:11.5px; }
.meta-row small { font:600 11.5px var(--ui); letter-spacing:.02em; } .meta-row strong { font-size:13.5px; } .notes { font-size:13.5px; }
.mono-line { font:500 12.5px var(--ui); letter-spacing:0; text-transform:none; color:var(--dim); }
.sheet-foot { font-size:12.5px; }
.dialog-head h2 { font:600 19px/1.25 var(--ui); letter-spacing:0; text-transform:none; } .dialog label { font:600 12.5px var(--ui); letter-spacing:0; text-transform:none; }
.group-label { font:600 12px var(--ui); letter-spacing:.05em; } .scene-opt strong { font-size:13.5px; } .scene-opt small { font-size:12px; } .toggle strong { font-size:13.5px; } .toggle small { font-size:12px; }
.keys dd { font-size:14px; } .tip { font-size:13px; } .tip small { font:500 11.5px var(--ui); letter-spacing:0; }
.foot { font:500 12px var(--ui); letter-spacing:.02em; text-transform:none; }
.field > span { font:600 12.5px var(--ui); letter-spacing:0; text-transform:none; } .field-help { font-size:12.5px; } .gate-card-copy { font-size:13.5px; }
.proof-line li { font:600 12.5px var(--ui); letter-spacing:0; text-transform:none; } .proof-line span { font:700 11px var(--ui); }
.gate-security, .gate-foot { font:500 12px var(--ui); letter-spacing:.02em; text-transform:none; } .gate-links { font-size:13px; }
.receipt { font-size:13.5px; } .empty { font-size:13.5px; } .empty strong { font-size:14.5px; }
.boot p { font-size:14px; }
.dock button { font:600 10px var(--ui); letter-spacing:0; text-transform:none; }

.route-head, .route { grid-template-columns:minmax(270px, 1.25fr) minmax(0, 2fr) minmax(170px, .9fr); }
@media (max-width:900px) { .route { grid-template-columns:1fr; } }

/* ---------- overseer ---------- */
.digest { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.digest > div { padding:12px 14px; background:var(--glass-2); border:1px solid var(--line); border-radius:12px; }
.digest span { display:block; font:600 12.5px var(--ui); color:var(--dim); } .digest strong { display:block; font:700 26px/1.15 var(--ui); color:var(--text-hi); font-variant-numeric:tabular-nums; } .digest small { font-size:12px; color:var(--dim); }
.people-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--gap); }
.person-card { display:grid; gap:6px; padding:18px; background:var(--glass-2); border:1px solid var(--line); border-radius:var(--radius); }
.person-card h3 { font:700 16px var(--ui); color:var(--text-hi); margin-top:4px; } .person-card p { margin:0; font-size:13px; color:var(--dim); }
.person-card .chip.blue { justify-self:start; }
.pace { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:13px; color:var(--text); }
.pace-chip { padding:3px 9px; font:600 12px var(--ui); border-radius:99px; border:1px solid var(--line-2); color:var(--dim); }
.pace-chip.on { color:var(--green); border-color:var(--green); background:var(--green-soft); } .pace-chip.watch { color:var(--amber); border-color:var(--amber); background:var(--amber-soft); } .pace-chip.behind { color:var(--red); border-color:var(--red); background:var(--red-soft); }
.person-card .goal { min-width:0; }
.stat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 8px; margin-top:10px; padding-top:12px; border-top:1px solid var(--line); }
.stat-grid strong { display:block; font:700 17px/1.15 var(--ui); color:var(--text-hi); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .stat-grid span { font-size:11.5px; color:var(--dim); line-height:1.3; display:block; }
@media (max-width:560px) { .stat-grid { grid-template-columns:repeat(2, 1fr); } }

/* ---------- activity feed + alerts ---------- */
.feed-panel { align-self:start; }
.feed { display:grid; gap:2px; max-height:720px; overflow:auto; padding-right:4px; }
.feed-day { font:600 12px var(--ui); letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin:10px 0 4px; position:sticky; top:0; background:var(--glass); padding:4px 0; }
.feed-item { display:grid; grid-template-columns:62px auto 1fr; gap:10px; align-items:start; padding:8px 8px 8px 10px; border-left:3px solid var(--slate); border-radius:0 10px 10px 0; }
.feed-item:hover { background:var(--glass-2); }
.feed-item time { font:500 12.5px var(--ui); color:var(--dim); padding-top:3px; font-variant-numeric:tabular-nums; }
.feed-item p { margin:0; font-size:13.5px; color:var(--text); line-height:1.4; }
.feed-item.tone-green { border-left-color:var(--green); } .feed-item.tone-amber { border-left-color:var(--amber); } .feed-item.tone-red { border-left-color:var(--red); } .feed-item.tone-blue { border-left-color:var(--blue-2); }
.alert-list { display:grid; gap:8px; }
.alert-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:12px 14px; text-align:left; color:var(--text); background:var(--glass-2); border:1px solid var(--line); border-radius:12px; transition:transform .12s var(--ease), border-color .12s; }
.alert-row:hover { transform:translateY(-1px); border-color:var(--blue-line); }
.alert-kind { padding:5px 10px; font:700 12px var(--ui); letter-spacing:.03em; border-radius:99px; white-space:nowrap; }
.alert-row.pastdue .alert-kind { color:var(--red); background:var(--red-soft); border:1px solid var(--red); } .alert-row.notouch .alert-kind { color:var(--amber); background:var(--amber-soft); border:1px solid var(--amber); }
.alert-row strong { display:block; font-size:15px; color:var(--text-hi); } .alert-row small { font-size:13px; color:var(--dim); }
.alert-row em { font:600 13px var(--ui); font-style:normal; color:var(--blue-2); display:inline-flex; align-items:center; gap:4px; } .alert-row em svg { width:14px; height:14px; }
@media (max-width:760px) { .alert-row { grid-template-columns:1fr; } .feed-item { grid-template-columns:56px 1fr; } .feed-item .avatar { display:none; } }

/* ---------- strips, source notes, alerts handling, pipeline table, banner, dim scenery, plain titles ---------- */
.strip { display:grid; gap:10px; }
.strip-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:0 4px; }
.strip-head h2 { font:600 16px var(--ui); color:var(--text-hi); } .strip-head span { font-size:12.5px; color:var(--dim); }
.source-note { margin:0; padding:0 4px; font-size:12px; color:var(--faint); }
.alert-row { grid-template-columns:auto 1fr auto; }
.alert-body { display:block; padding:0; text-align:left; color:var(--text); background:none; border:0; min-width:0; }
.alert-body strong { display:block; font-size:15px; color:var(--text-hi); } .alert-body small { display:block; font-size:13px; color:var(--dim); }
.alert-state { color:var(--blue-2) !important; }
.alert-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.alert-row.cleared { opacity:.7; } .cleared-list { margin-top:8px; }
.connect-banner { border-color:var(--amber); } .connect-banner .notes { margin:0 0 8px; }
.route-head, .route { grid-template-columns:minmax(230px, 1.1fr) minmax(0, 1.4fr) 92px 112px 64px minmax(150px, .8fr); }
.route .cell { display:grid; } .route .cell strong { font-size:13.5px; color:var(--text-hi); font-variant-numeric:tabular-nums; } .route .cell small { font-size:11.5px; color:var(--dim); }
.route .cell.red strong { color:var(--red); } .route .cell.amber strong { color:var(--amber); }
.route-head { grid-template-columns:minmax(230px, 1.1fr) minmax(0, 1.4fr) 92px 112px 64px minmax(150px, .8fr); }
.health-grid.one-col { grid-template-columns:1fr; }
.icon-btn.plan { width:32px; height:32px; }
.feed-filters { margin-bottom:8px; } .feed-filters label { flex:1 1 120px; }
:root[data-dim="on"] #scene-layer::after { content:""; position:absolute; inset:0; z-index:6; background:rgba(0,0,0,.4); }
:root[data-dim="on"][data-scene="ocean"] { --glass:rgba(1,22,38,.96); } :root[data-dim="on"][data-scene="space"] { --glass:rgba(9,10,26,.94); } :root[data-dim="on"][data-scene="terminal"] { --glass:rgba(2,11,6,.97); }
:root[data-dim="on"][data-scene="ocean"] #scene-layer::after { background:rgba(0,10,20,.35); }
.page-head h1 { font:800 28px/1.15 var(--ui); letter-spacing:-.01em; text-transform:none; background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--text-hi); animation:none; }
:root[data-scene="space"] .page-head h1 { background:none; color:var(--text-hi); }
@media (max-width:900px) { .priority-grid, .grid-4 { grid-template-columns:repeat(2, 1fr); } .dock button { font-size:11px; } .route { grid-template-columns:1fr 1fr; } .route-id, .route-track, .route-owner { grid-column:1 / -1; } }
@media (max-width:560px) { .grid-4 { grid-template-columns:1fr 1fr; } .metric > strong { font-size:26px; } }

/* ---------- windowed and phone layouts, idle and lean behaviour ---------- */
.panel { contain:layout style; }
@media (max-width:1180px) {
  .route-head { display:none; }
  .route { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px 12px; }
  .route .cell { padding-top:2px; }
}
@media (max-width:1100px) { .tb-right { gap:5px; } .mode-badge { display:none; } }
@media (max-width:900px) {
  .digest { grid-template-columns:repeat(2, 1fr); } .strip-head { flex-wrap:wrap; }
  .toolbar .seg { order:3; } .feed { max-height:480px; }
  .grid-3-1 > aside, .side-stack { order:2; }
  .head-actions { width:100%; } .head-actions .seg { flex:1; justify-content:space-between; } .head-actions .seg button { flex:1; }
  /* lighter scenes on small screens */
  .fish:nth-child(odd), .bubble:nth-child(n+5), .seaweed:nth-of-type(even), .eddies i:nth-child(n+5), .stars.far { display:none; }
  .belt-drift.d2, .storms, .moon.m-europa { display:none; }
}
@media (max-width:560px) { .alert-row { grid-template-columns:1fr; } .alert-actions { justify-content:flex-start; } .digest { grid-template-columns:1fr 1fr; } .who-card { right:-90px; } .route { grid-template-columns:1fr 1fr; } .route .cell:last-of-type { grid-column:1 / -1; } }
@media (max-height:560px) { .sheet { top:6px; right:6px; bottom:6px; } .dialog { max-height:calc(100vh - 12px); } }
/* nothing moves while the tab is hidden */
:root[data-hidden="true"] *, :root[data-hidden="true"] *::before, :root[data-hidden="true"] *::after { animation-play-state:paused !important; }
/* lean: no scenery, no shadows, no ambient motion; panels stay readable */
:root[data-lean="on"] #scene-layer, :root[data-lean="on"] #space-frame, :root[data-lean="on"] #fx-grid, :root[data-lean="on"] #fx-spot { display:none !important; }
:root[data-lean="on"] .panel, :root[data-lean="on"] .metric, :root[data-lean="on"] .card, :root[data-lean="on"] .sheet, :root[data-lean="on"] .dialog, :root[data-lean="on"] .who-card, :root[data-lean="on"] .toast, :root[data-lean="on"] .globe { box-shadow:none !important; }
:root[data-lean="on"] .btn.primary, :root[data-lean="on"] .seg button[aria-pressed="true"], :root[data-lean="on"] .modes-ind { box-shadow:none; }
:root[data-lean="on"] body { background-image:none !important; background-attachment:scroll; }
:root[data-lean="on"] .main { padding-inline:clamp(14px, 2.4vw, 28px); } :root[data-lean="on"] .topbar { padding:0 18px; } :root[data-lean="on"] .foot { padding-bottom:14px; }

/* grid items may shrink below their content: tables scroll inside their panel instead of widening the page */
.view { grid-template-columns:minmax(0, 1fr); }
.view > *, .grid-2 > *, .grid-4 > *, .grid-3-1 > *, .side-stack > *, .strip > *, .panel, .metric { min-width:0; }
.table-shell { max-width:100%; }
.main { overflow-x:clip; }
@media (max-width:760px) { .panel-head { flex-wrap:wrap; } .panel-head > span, .panel-head .chip { white-space:normal; } .kd small, .notes { overflow-wrap:anywhere; } }

/* ---------- theme crossfade + drag navigation ---------- */
.scene-veil { position:fixed; inset:0; z-index:200; pointer-events:none; opacity:1; transition:opacity .7s var(--ease); }
.scene-veil.out { opacity:0; }
:root.theme-fading body, :root.theme-fading .panel, :root.theme-fading .metric, :root.theme-fading .topbar, :root.theme-fading .foot, :root.theme-fading .btn, :root.theme-fading .seg, :root.theme-fading .seg button, :root.theme-fading .chip, :root.theme-fading .who-btn, :root.theme-fading .icon-btn, :root.theme-fading .kicker, :root.theme-fading h1, :root.theme-fading h2, :root.theme-fading h3, :root.theme-fading p, :root.theme-fading span, :root.theme-fading strong, :root.theme-fading small, :root.theme-fading td, :root.theme-fading th, :root.theme-fading input, :root.theme-fading select, :root.theme-fading .brand-logo svg .x, :root.theme-fading .brand-logo svg .w, :root.theme-fading .modes-ind, :root.theme-fading .sheet, :root.theme-fading .dialog, :root.theme-fading .scene-opt, :root.theme-fading .toggle { transition:background-color .7s var(--ease), color .7s var(--ease), border-color .7s var(--ease), fill .7s var(--ease), box-shadow .7s var(--ease) !important; }
:root[data-motion="reduce"] .scene-veil { transition:none; display:none; }
.modes, .dock { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
.modes .mode, .dock button { -webkit-user-drag:none; -webkit-touch-callout:none; }
.modes.dragging, .modes.dragging .mode, .dock.dragging, .dock.dragging button { cursor:grabbing; }
.modes.dragging .modes-ind, .dock.dragging .dock-ind { transition:none; }
.mode.preview { color:var(--on-accent); }
.dock button.preview { color:var(--blue-2); }

/* dock slider: the same gliding highlight the top bar has */
.dock { position:fixed; }
.dock-ind { position:absolute; top:6px; left:0; height:calc(100% - 12px); width:0; border-radius:10px; background:var(--blue-soft); box-shadow:inset 0 0 0 1px var(--blue-line); opacity:0; transition:left .45s var(--ease), width .45s var(--ease); pointer-events:none; }
.dock button { position:relative; z-index:1; }
.dock button[aria-current="page"] { background:transparent; }
.modes-ind { transition:left .45s var(--ease), width .45s var(--ease); }


/* =====================================================================================================================
   LEDGER — the revamp. Flat ink surfaces with hairlines instead of glass cards, a numbered section rhythm, Bricolage
   Grotesque for titles and hero numerals, an underline slider in the masthead, and stat rows read like a ledger.
   ===================================================================================================================== */
:root { --display:'Bricolage Grotesque', 'Inter', system-ui, sans-serif; --radius:14px; --gap:16px; --pad:22px;
  --bg:#0a0c12; --bg-2:#0f121a; --panel:#0f121a; --glass:#0f121a; --glass-2:#141824; --glass-3:#181d2b;
  --line:rgba(160,176,205,.14); --line-2:rgba(160,176,205,.28); --text:#e4e9f2; --text-hi:#ffffff; --dim:#98a4ba; --faint:#6b768c;
  --shadow:none; --glow:0 0 0 1px rgba(0,114,255,.35); }
:root[data-scene="light"] { --bg:#f6f4ef; --bg-2:#ffffff; --panel:#ffffff; --glass:#ffffff; --glass-2:#f2f0ea; --glass-3:#ebe8e0;
  --line:rgba(24,30,40,.12); --line-2:rgba(24,30,40,.24); --text:#1f2733; --text-hi:#0d1219; --dim:#5d6878; --faint:#8a93a3; --grid-color:rgba(0,114,255,.04); }
:root[data-scene="ocean"] { --glass:rgba(2,24,40,.9); --glass-2:rgba(4,32,52,.95); --glass-3:rgba(6,40,64,.97); }
:root[data-scene="space"] { --glass:rgba(10,11,26,.86); --glass-2:rgba(14,15,34,.94); --glass-3:rgba(18,19,42,.97); }
:root[data-scene="terminal"] { --glass:rgba(2,11,6,.94); }
:root[data-scene="inverted"] { --glass:#fff8ea; --glass-2:#f7ecd6; --glass-3:#f1e3c8; }

/* masthead: names on a rule with an underline slider instead of a pill container */
.topbar { height:64px; padding:0 clamp(16px, 2.4vw, 32px); background:var(--bg); border-bottom:1px solid var(--line); }
:root[data-scene="space"] .topbar, :root[data-scene="ocean"] .topbar, :root[data-scene="terminal"] .topbar { background:var(--glass-2); }
.modes { padding:0; gap:0; background:transparent; border:0; border-radius:0; height:64px; align-items:stretch; }
.mode { min-height:0; padding:0 16px; font:600 14px/1 var(--ui); letter-spacing:0; text-transform:none; color:var(--dim); border-radius:0; transition:color .3s var(--ease); }
.mode[aria-current="page"], .mode.preview { color:var(--text-hi); }
.modes-ind { top:auto; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--blue); box-shadow:none; }
.brand-tag { display:none; }
.clock { padding:6px 10px; font:500 12.5px var(--ui); letter-spacing:0; color:var(--dim); border:1px solid var(--line); border-radius:99px; }
.mode-badge { font:700 10.5px var(--ui); letter-spacing:.1em; }
.who-btn { border-color:transparent; } .who-btn:hover { border-color:var(--line-2); }

/* page head: big display title on a hairline, actions on the right */
.page-head { padding:8px 0 18px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.page-head h1 { font:700 clamp(30px, 3.4vw, 42px)/1.05 var(--display); letter-spacing:-.02em; color:var(--text-hi); }
.page-head .kicker { font:600 12px var(--ui); letter-spacing:.08em; color:var(--blue-2); }
.page-head .copy { font-size:14px; color:var(--dim); }

/* surfaces: flat, hairlined, no shadow; a numbered eyebrow row */
.panel, .card, .metric, .priority, .att, .exc, .health, .alert-row, .route, .fu-row, .person-card, .digest-tiles > div, .prod > div, .split > div, .intent-row > div, .counts span, .ledger-row, .team-summary > div, .emp, .intel > div, .meta-row span, .sec, .who-card, .sheet, .dialog, .toast, .scene-opt, .toggle, .return-row { box-shadow:none; }
.panel { background:var(--glass); border:1px solid var(--line); }
.panel:hover { border-color:var(--line); }
.eyebrow-row { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.section-no { font:600 11px/1 var(--mono); letter-spacing:.08em; color:var(--blue-2); padding:3px 6px; border:1px solid var(--blue-line); border-radius:6px; }
.eyebrow-row .kicker { margin:0; }
.panel-head h2 { font:600 19px/1.25 var(--display); letter-spacing:-.01em; }
.strip-head h2 { font:600 17px var(--display); letter-spacing:-.01em; }
.lead-summary h2 { font:600 22px/1.25 var(--display); }

/* stat ledger: the grid-4 metric row reads as one hairlined strip with big display numerals */
.strip .grid-4, .grid-4 { gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--glass); }
.grid-4 > .metric { border:0; border-radius:0; border-right:1px solid var(--line); background:transparent; padding:20px 22px 18px; }
.grid-4 > .metric:last-child { border-right:0; }
.grid-4 > .metric:hover { transform:none; background:var(--glass-2); }
.metric > strong { font:700 40px/1 var(--display); letter-spacing:-.03em; }
.metric > span { font:600 13.5px var(--ui); color:var(--text); }
.metric-top { margin-bottom:10px; } .metric-icon { width:28px; height:28px; border-radius:8px; background:transparent; border:1px solid var(--line-2); } .metric-icon svg { width:15px; height:15px; }
.metric-trend { border-color:var(--line); }
@media (max-width:900px) { .grid-4 > .metric { border-right:0; border-bottom:1px solid var(--line); } .grid-4 > .metric:nth-child(odd) { border-right:1px solid var(--line); } .grid-4 > .metric:nth-last-child(-n+2) { border-bottom:0; } }
@media (max-width:560px) { .grid-4 > .metric:nth-child(odd) { border-right:1px solid var(--line); } }

/* rows */
.alert-row, .route, .fu-row, .exc, .att, .health, .person-card, .feed-item { border-radius:10px; }
.alert-row { background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding:14px 4px; }
.alert-list .alert-row:first-child { border-top:0; }
.alert-kind { font:700 11.5px var(--ui); letter-spacing:.02em; }
.alert-row.pastdue .alert-kind { background:transparent; } .alert-row.notouch .alert-kind { background:transparent; }
.route { background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding:12px 4px; }
.route-list .route:first-child { border-top:0; } .route:hover { background:var(--glass-2); border-color:var(--line); }
.route-head { padding-bottom:10px; border-bottom:1px solid var(--line-2); }
.person-card { background:var(--glass); }
.digest-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.digest-tiles > div { padding:14px 16px; background:transparent; border:0; border-right:1px solid var(--line); border-radius:0; }
.digest-tiles > div:last-child { border-right:0; }
.digest-tiles span { display:block; font:600 12.5px var(--ui); color:var(--dim); } .digest-tiles strong { display:block; font:700 26px/1.15 var(--display); color:var(--text-hi); letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .digest-tiles small { font-size:12px; color:var(--dim); }
@media (max-width:900px) { .digest-tiles { grid-template-columns:1fr 1fr; } .digest-tiles > div { border-bottom:1px solid var(--line); } .digest-tiles > div:nth-child(even) { border-right:0; } .digest-tiles > div:nth-last-child(-n+2) { border-bottom:0; } }
.kpis strong, .counts strong, .prod strong, .intent-row strong, .team-summary strong, .kd strong, .split strong, .emp-stats strong, .stat-grid strong, .chart-insight strong, .ledger-row .kpi strong, .ring strong, .intel strong { font-family:var(--display); letter-spacing:-.02em; }
.priority strong { font:700 30px/1.1 var(--display); letter-spacing:-.02em; }

/* follow-ups */
.fu-list { display:grid; }
.fu-row { display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:12px; padding:10px 4px; text-align:left; color:var(--text); background:transparent; border:0; border-top:1px solid var(--line); }
.fu-list .fu-row:first-child { border-top:0; } .fu-row:hover { background:var(--glass-2); }
.fu-row time { font:600 13px var(--ui); color:var(--dim); font-variant-numeric:tabular-nums; } .fu-row.overdue time { color:var(--red); }
.fu-row strong { display:block; font-size:14.5px; color:var(--text-hi); } .fu-row small { display:block; font-size:12.5px; color:var(--dim); }
.fu-row em { font:600 12px var(--ui); font-style:normal; padding:3px 9px; border-radius:99px; border:1px solid var(--line-2); color:var(--dim); } .fu-row.overdue em { color:var(--red); border-color:var(--red); }
/* source return */
.return-list { display:grid; gap:12px; }
.return-head { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:baseline; margin-bottom:6px; }
.return-head strong { font-size:14.5px; color:var(--text-hi); } .return-head span { font-size:12.5px; color:var(--dim); } .return-head b { font:700 16px var(--display); color:var(--text-hi); font-variant-numeric:tabular-nums; }
/* review timer */
.wait { display:inline-flex; align-items:center; gap:4px; margin-left:8px; font:600 12px var(--ui); color:var(--amber); } .wait.late { color:var(--red); } .wait svg { width:12px; height:12px; }
/* digest dialog */
.digest { margin:0 0 10px; max-height:52vh; overflow:auto; padding:14px; font:500 12.5px/1.55 var(--mono); color:var(--text); background:var(--bg-2); border:1px solid var(--line); border-radius:10px; white-space:pre-wrap; }
.toast .btn { margin-left:6px; }
/* pills / segments / buttons: squarer, quieter */
.btn { border-radius:9px; } .btn.primary { box-shadow:none; } .seg { border-radius:10px; } .seg button { border-radius:7px; } .seg button[aria-pressed="true"] { box-shadow:none; }
.chip { border-radius:7px; } .data-badge { border-radius:8px; }
.icon-btn { border-radius:9px; }
/* dock in the ledger look */
.dock { background:var(--bg); border:1px solid var(--line); border-radius:14px; box-shadow:none; }
.dock-ind { background:var(--blue-soft); box-shadow:none; }
/* gate */
.gate-title { font:700 clamp(34px, 4.6vw, 56px)/1.02 var(--display); letter-spacing:-.025em; text-transform:none; }
.gate-title span { -webkit-text-fill-color:initial; background:none; color:var(--blue-2); }
.gate-card { border-radius:var(--radius); } .gate-card-head h2 { font:600 20px var(--display); letter-spacing:-.01em; text-transform:none; }
/* remove the last sci-fi flourishes */
.lock-mark { border-radius:9px; } .boot-mark, .boot-title { font-family:var(--display); letter-spacing:.02em; }
.sheet-head h2 { font:700 22px/1.15 var(--display); letter-spacing:-.02em; } .dialog-head h2 { font:600 20px/1.25 var(--display); letter-spacing:-.01em; }
:root[data-scene="space"] .kicker::before { content:none; }

/* print: the lead sheet and the page as a case file */
@media print {
  #fx-grid, #fx-spot, #scene-layer, #space-frame, .topbar, .dock, .foot, .toast, .head-actions, .scrim, .who-card, .alert-actions, .toolbar, .subnav { display:none !important; }
  body, :root { background:#fff !important; color:#000 !important; }
  .layer:not([hidden]) { position:static; } .layer:not([hidden]) ~ .shell, .layer:not([hidden]) .scrim { display:none; }
  .sheet { position:static; width:auto; max-width:none; border:0; box-shadow:none; background:#fff; color:#000; }
  .sheet-body { overflow:visible; } .sec, .next, .intel > div, .meta-row span { border:1px solid #ccc; background:#fff; }
  .panel, .metric, .route, .alert-row, .person-card { background:#fff; border-color:#ccc; break-inside:avoid; }
  .page-head h1, h2, h3, strong { color:#000 !important; } .kicker, .dim, small, .source-note { color:#444 !important; }
  .grid-4 > .metric { border-right:1px solid #ccc; }
}

.fu-row { grid-template-columns:auto 1fr auto; } .fu-row time { white-space:nowrap; min-width:88px; }
.text-btn { font:600 13px var(--ui); letter-spacing:0; text-transform:none; }
.gate-local h2 { font:600 20px var(--display); letter-spacing:-.01em; text-transform:none; }


/* =====================================================================================================================
   FIELD INSTRUMENT — the MACE Hunter vibe. Gradient Orbitron titles that type themselves in, mono "//" kickers, corner
   brackets on every surface, summon-with-skew entrances, a scanline on each view change, ripples on press, pulsing live
   dots, a ticking mono clock and a slow signal band drifting behind the page. Transforms and opacity only.
   ===================================================================================================================== */
:root { --glass:rgba(10,15,23,.93); --glass-2:rgba(14,20,30,.96); --glass-3:rgba(20,28,41,.97); --line:rgba(140,172,220,.14); --line-2:rgba(140,172,220,.28);
  --shadow:0 20px 60px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.35); --glow:0 0 0 1px rgba(0,114,255,.35),0 0 28px rgba(0,114,255,.25); --hud:'Orbitron', 'Bricolage Grotesque', sans-serif; }
:root[data-scene="light"] { --glass:rgba(255,255,255,.94); --glass-2:rgba(255,255,255,.98); --glass-3:rgba(244,246,250,.98); --shadow:0 20px 60px rgba(15,35,60,.14),0 2px 8px rgba(15,35,60,.06); }
:root[data-scene="space"] { --glass:rgba(10,11,26,.88); } :root[data-scene="ocean"] { --glass:rgba(2,24,40,.9); } :root[data-scene="terminal"] { --glass:rgba(2,11,6,.94); }

/* titles: gradient Orbitron, typed in with a caret */
.page-head h1 { font:800 clamp(24px, 2.6vw, 32px)/1.15 var(--hud); letter-spacing:.16em; text-transform:uppercase; padding-right:.2em;
  background:linear-gradient(90deg, var(--blue), var(--blue-2) 55%, var(--blue-3)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.typed { display:block; width:max-content; max-width:100%; white-space:nowrap; overflow:hidden; clip-path:inset(0 100% 0 0); }
.typed.go { animation:typeIn .9s steps(28, end) forwards; }
@keyframes typeIn { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
.caret::after { content:"▍"; color:var(--blue-2); -webkit-text-fill-color:var(--blue-2); margin-left:2px; animation:blink 1s steps(1, end) infinite; }
@keyframes blink { 50% { opacity:0; } }
@media (max-width:900px) { .typed { white-space:normal; overflow:visible; width:auto; clip-path:none !important; animation:none !important; } }
.panel-head h2, .lead-summary h2, .strip-head h2, .gate-card-head h2, .gate-local h2, .sheet-head h2, .dialog-head h2 { font-family:var(--hud); text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.panel-head h2 { font-size:14.5px; } .strip-head h2 { font-size:13.5px; } .lead-summary h2 { font-size:16px; } .sheet-head h2 { font-size:18px; letter-spacing:.08em; } .dialog-head h2 { font-size:15px; }
.gate-card-head h2 { font-size:15px; } .gate-local h2 { font-size:14px; }
.gate-title { font:800 clamp(30px, 4vw, 48px)/1.08 var(--hud); letter-spacing:.06em; text-transform:uppercase; }
.gate-title span { background:linear-gradient(90deg, var(--blue), var(--blue-2) 50%, var(--blue-3)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
/* kickers: mono with the // prefix */
.kicker { font:500 10.5px/1.2 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--blue-2); }
.kicker::before { content:"// "; color:var(--faint); }
.section-no { font:600 10.5px var(--mono); }
.eyebrow-row { gap:8px; }
/* hero numerals in the HUD face */
.metric > strong, .digest-tiles strong, .priority strong, .kpis strong, .prod strong, .kd strong, .split strong, .team-summary strong, .intent-row strong, .counts strong, .ring strong, .chart-insight strong { font-family:var(--hud); font-weight:500; letter-spacing:0; }
.metric > strong { font-size:36px; } .digest-tiles strong { font-size:24px; } .kd strong { font-size:36px; }
.stat-grid strong, .emp-stats strong, .return-head b, .intel strong, .ledger-row .kpi strong, .route .cell strong { font-family:var(--display); }

/* corner brackets: the targeting-HUD frame on every surface, brightening and extending on hover */
.panel, .metric, .gate-card, .gate-local, .person-card, .digest-tiles, .grid-4 { position:relative; }
.panel::before, .panel::after, .sheet::before, .sheet::after, .dialog::before, .dialog::after, .who-card::before, .who-card::after, .gate-card::before, .gate-card::after, .gate-local::before, .gate-local::after, .person-card::before, .person-card::after, .grid-4::before, .grid-4::after {
  content:""; display:block; position:absolute; width:16px; height:16px; pointer-events:none; z-index:2; border:0 solid var(--blue-line); opacity:.8; transition:width .25s var(--ease), height .25s var(--ease), opacity .25s; }
.panel::before, .sheet::before, .dialog::before, .who-card::before, .gate-card::before, .gate-local::before, .person-card::before, .grid-4::before { top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; border-top-left-radius:var(--radius); }
.panel::after, .sheet::after, .dialog::after, .who-card::after, .gate-card::after, .gate-local::after, .person-card::after, .grid-4::after { bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; border-bottom-right-radius:var(--radius); }
.panel:hover::before, .panel:hover::after, .person-card:hover::before, .person-card:hover::after, .grid-4:hover::before, .grid-4:hover::after { width:26px; height:26px; opacity:1; }
.gate-local::before, .gate-local::after { border-color:var(--amber); }
.card::before, .card::after { display:none; }

/* surfaces float again: glass with shadow, hairline, hover lift */
.panel, .person-card, .grid-4, .digest-tiles, .who-card, .sheet, .dialog { background:var(--glass); box-shadow:var(--shadow); }
.panel, .person-card { transition:transform .18s var(--ease), border-color .18s; }
.panel:hover, .person-card:hover { transform:translateY(-1px); border-color:var(--blue-line); }
.metric, .priority, .alert-row, .route, .fu-row, .att, .exc { transition:transform .14s var(--ease), background .14s, border-color .14s; }
.route:hover, .fu-row:hover, .alert-row:hover { transform:translateX(3px); }

/* masthead: MACE segmented pill nav with a glowing slider, mono clock */
.modes { padding:3px; gap:2px; height:auto; align-self:center; background:var(--glass); border:1px solid var(--line); border-radius:12px; }
.mode { min-height:30px; padding:5px 13px; font:600 11px/1 var(--ui); letter-spacing:.06em; text-transform:uppercase; border-radius:9px; }
.mode[aria-current="page"], .mode.preview { color:var(--on-accent); }
.modes-ind { top:3px; bottom:auto; height:calc(100% - 6px); border-radius:9px; background:var(--blue); box-shadow:var(--glow); }
.clock { display:inline-flex; padding:6px 10px; font:500 12px var(--mono); letter-spacing:.04em; color:var(--blue-2); border:1px solid var(--blue-line); border-radius:9px; font-variant-numeric:tabular-nums; }
.mode-badge { position:relative; padding-left:16px; } .mode-badge::before { content:""; position:absolute; left:6px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; animation:blink 1.6s steps(1, end) infinite; }
.brand-tag { display:inline-flex; }
.data-badge i, .chip.ok i, .chip.red i, .chip.amber i, .health-status i { box-shadow:0 0 8px currentColor; animation:livePulse 2.2s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.5); opacity:.55; } }
.alert-list:not(.cleared-list) .alert-row .alert-kind { animation:kindPulse 2.6s ease-in-out infinite; }
@keyframes kindPulse { 0%, 100% { box-shadow:0 0 0 0 transparent; } 50% { box-shadow:0 0 0 4px rgba(255,90,90,.12); } }
.alert-row.notouch .alert-kind { animation-name:kindPulseAmber; } @keyframes kindPulseAmber { 0%, 100% { box-shadow:0 0 0 0 transparent; } 50% { box-shadow:0 0 0 4px rgba(232,161,58,.14); } }

/* ambient: spotlight, signal band, grid drift */
#fx-spot { background:radial-gradient(circle, color-mix(in srgb, var(--blue) 12%, transparent), transparent 62%); }
:root[data-fx="on"]:not([data-motion="reduce"]):not([data-lean="on"]) #fx-spot.on { opacity:1; }
#fx-signal { position:fixed; inset:-20% -40%; z-index:0; pointer-events:none; opacity:0; background:linear-gradient(115deg, transparent 38%, rgba(0,114,255,.07) 48%, rgba(143,193,255,.05) 52%, transparent 62%); will-change:transform; }
:root[data-motion="max"][data-fx="on"]:not([data-lean="on"]) #fx-signal { opacity:1; animation:signal 38s linear infinite; }
@keyframes signal { from { transform:translate3d(-18%, 0, 0); } to { transform:translate3d(18%, 0, 0); } }
:root[data-motion="max"][data-fx="on"] #fx-grid { animation-duration:26s; }
/* scanline: sweeps down the workspace when a view enters */
.scanline { position:absolute; left:0; right:0; top:0; height:3px; z-index:3; pointer-events:none; opacity:0; background:linear-gradient(90deg, transparent, var(--blue-2), transparent); box-shadow:0 0 18px var(--blue-2); }
.main { position:relative; }
.scanline.go { animation:scan .9s var(--ease) forwards; }
@keyframes scan { 0% { opacity:0; transform:translateY(0); } 8% { opacity:.9; } 100% { opacity:0; transform:translateY(min(100vh, 900px)); } }
/* rows and feed items rise in, staggered */
.route-list .route, .fu-list .fu-row, .alert-list .alert-row, .feed .feed-item, table.data tbody tr, .people-grid .person-card, .health-grid .health, .return-list .return-row { animation:rise .45s var(--ease) both; }
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.route-list > :nth-child(1), .fu-list > :nth-child(1), .alert-list > :nth-child(1), .feed > :nth-child(2), table.data tbody tr:nth-child(1) { animation-delay:.04s; }
.route-list > :nth-child(2), .fu-list > :nth-child(2), .alert-list > :nth-child(2), .feed > :nth-child(3), table.data tbody tr:nth-child(2) { animation-delay:.09s; }
.route-list > :nth-child(3), .fu-list > :nth-child(3), .alert-list > :nth-child(3), .feed > :nth-child(4), table.data tbody tr:nth-child(3) { animation-delay:.14s; }
.route-list > :nth-child(4), .fu-list > :nth-child(4), .alert-list > :nth-child(4), .feed > :nth-child(5), table.data tbody tr:nth-child(4) { animation-delay:.19s; }
.route-list > :nth-child(5), .fu-list > :nth-child(5), .feed > :nth-child(6), table.data tbody tr:nth-child(5) { animation-delay:.24s; }
.route-list > :nth-child(6), .fu-list > :nth-child(6), .feed > :nth-child(7), table.data tbody tr:nth-child(6) { animation-delay:.29s; }
.route-list > :nth-child(7), .feed > :nth-child(8), table.data tbody tr:nth-child(7) { animation-delay:.34s; }
.route-list > :nth-child(8), .feed > :nth-child(9), table.data tbody tr:nth-child(8) { animation-delay:.39s; }
.route-list > :nth-child(n+9), .feed > :nth-child(n+10), table.data tbody tr:nth-child(n+9) { animation-delay:.44s; }
/* summon: sheets, dialogs, identity card, toast */
:root:not([data-motion="reduce"]) .layer:not([hidden]) .sheet { animation:summon .5s var(--ease) both; transform-origin:100% 50%; }
:root:not([data-motion="reduce"]) .layer:not([hidden]) .dialog { animation:summonCenter .45s var(--ease) both; }
@keyframes summon { 0% { opacity:0; transform:translateX(40px) scale(.86) skewY(-1.5deg); } 100% { opacity:1; transform:none; } }
@keyframes summonCenter { 0% { opacity:0; transform:translate(-50%, -50%) scale(.86) skewY(-1.5deg); } 100% { opacity:1; transform:translate(-50%, -50%); } }
.who-card { animation:ddIn .28s var(--ease) both; } @keyframes ddIn { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:none; } }
.toast { animation:summonToast .4s var(--ease) both; } @keyframes summonToast { 0% { opacity:0; transform:translate(-50%, 12px) scale(.92); } 100% { opacity:1; transform:translate(-50%, 0); } }
/* ripple on press */
.btn, .mode, .seg button, .icon-btn, .priority, .alert-body, .route, .fu-row, .scene-opt, .toggle, .dock button, .metric { position:relative; overflow:hidden; }
.ripple-dot { position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(143,193,255,.35), rgba(0,114,255,.12) 45%, transparent 70%); pointer-events:none; transform:scale(.2); opacity:.9; animation:rippleOut .6s var(--ease) forwards; }
@keyframes rippleOut { to { transform:scale(1); opacity:0; } }
.btn:active:not(:disabled), .mode:active, .icon-btn:active:not(:disabled) { transform:scale(.97); }
/* section numbers pop as their panel lands */
.section-no { animation:pop .5s var(--ease) both; animation-delay:.25s; }
@keyframes pop { 0% { transform:scale(.4); } 60% { transform:scale(1.25); } 100% { transform:scale(1); } }
/* boot */
.boot-title { font-family:var(--hud); letter-spacing:.24em; }
/* lean and reduced keep it calm */
:root[data-lean="on"] .typed { clip-path:none !important; animation:none !important; } :root[data-lean="on"] .caret::after { display:none; }
:root[data-lean="on"] .panel::before, :root[data-lean="on"] .panel::after { transition:none; }
:root[data-lean="on"] #fx-signal, :root[data-lean="on"] .scanline, :root[data-lean="on"] .ripple-dot { display:none !important; }
:root[data-motion="reduce"] .typed { clip-path:none !important; } :root[data-motion="reduce"] .caret::after { animation:none; }
@media (max-width:1180px) { .clock { display:none; } }
@media (max-width:900px) { .mode-badge { display:none; } }


/* ---------- overlap fixes (found at 960–1280 px and in the Space scene) ---------- */
/* alert rows: below ~1280 px the buttons take the width they need and the body wraps onto its own line */
.alert-row { grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; }
.alert-row .alert-body { min-width:0; } .alert-body strong, .alert-body small { overflow-wrap:anywhere; }
@media (max-width:1320px) { .alert-row { grid-template-columns:auto minmax(0, 1fr); } .alert-row .alert-actions { grid-column:1 / -1; justify-content:flex-start; padding-left:0; } }
@media (max-width:560px) { .alert-row { grid-template-columns:1fr; } }
/* pipeline rows: between 900 and 1320 px use a tidy two-line layout instead of the six-column grid */
@media (max-width:1320px) and (min-width:901px) {
  .route-head { display:none; }
  .route { grid-template-columns:minmax(0, 1.4fr) 92px 112px 64px minmax(150px, .9fr); grid-template-areas:"id value follow age owner" "track track track track track"; gap:6px 14px; align-items:center; }
  .route-id { grid-area:id; } .route-track { grid-area:track; height:22px; } .route .cell.value { grid-area:value; } .route .cell.value + .cell { grid-area:follow; } .route .cell.value + .cell + .cell { grid-area:age; } .route-owner { grid-area:owner; justify-content:flex-end; }
}
/* space scene: the gradient title was invisible over the page-top dark band; give it solid ink there */
:root[data-scene="space"] .page-head h1 { background:none; -webkit-text-fill-color:var(--text-hi); color:var(--text-hi); }
:root[data-scene="space"] .page-head h1.caret::after { -webkit-text-fill-color:var(--blue-2); }
:root[data-scene="space"] .kicker { color:var(--blue-2); }
/* space scene: content clears the viewport frame's bezel so headings never sit under its edge */
:root[data-scene="space"][data-fx="on"] .main { padding-top:26px; padding-bottom:110px; }
:root[data-scene="space"][data-fx="on"] .foot { padding-bottom:42px; }
:root[data-scene="space"][data-fx="on"] .strip-head, :root[data-scene="space"][data-fx="on"] .source-note { position:relative; z-index:1; }
:root[data-scene="space"][data-fx="on"] .strip-head { padding:6px 10px; background:rgba(9,10,26,.7); border-radius:8px; }
/* masthead: the clock, badge and identity never collide; drop the clock first, then the badge */
.tb-right { flex-wrap:nowrap; min-width:0; } .tb-right > * { flex:none; }
@media (max-width:1400px) { .brand-tag { display:none; } }
@media (max-width:1320px) { .clock { display:none; } }
@media (max-width:1180px) { .mode-badge { display:none; } }
@media (max-width:1100px) { .who-text { display:none; } .who-btn { padding:3px; border:0; } }
.topbar { gap:12px; }
.modes { max-width:100%; flex-wrap:nowrap; overflow:hidden; }
/* follow-up rows: the time column never wraps onto two lines */
.fu-row { grid-template-columns:minmax(112px, auto) minmax(0, 1fr) auto; } .fu-row time { white-space:nowrap; }
/* tables: action cells never overflow the row */
table.data td.actions-cell { min-width:0; } .row-actions { flex-wrap:wrap; }


/* ---------- UI batch: kickers, sections, alert band, summary row, stage chips, people cards, person sheet, palette, gear menu, light pass, dock ---------- */
.kicker::before { content:none; } .kicker.page::before { content:"// "; color:var(--faint); }
.section-no { display:inline-flex; }
.panel.band { border-left:3px solid var(--red); }
.panel.band .alert-list { display:grid; grid-template-columns:1fr; gap:0; }
.panel.band .alert-row { grid-template-columns:auto minmax(0, 1fr) auto; }
@media (max-width:1320px) { .panel.band .alert-row { grid-template-columns:auto minmax(0, 1fr); } .panel.band .alert-row .alert-actions { grid-column:1 / -1; } }
@media (max-width:560px) { .panel.band .alert-row { grid-template-columns:1fr; } }
.summary-row { display:grid; grid-template-columns:repeat(4, 1fr); border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); overflow:hidden; }
.summary-row button { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"v l" "v d"; gap:0 12px; align-items:center; padding:12px 16px; text-align:left; color:var(--text); background:transparent; border:0; border-right:1px solid var(--line); transition:background .14s; }
.summary-row button:last-child { border-right:0; } .summary-row button:hover { background:var(--glass-2); }
.summary-row strong { grid-area:v; font:500 24px/1 var(--hud); color:var(--text-hi); letter-spacing:0; } .summary-row span { grid-area:l; font:600 13px var(--ui); color:var(--text-hi); } .summary-row small { grid-area:d; font-size:12px; color:var(--dim); }
@media (max-width:900px) { .summary-row { grid-template-columns:1fr 1fr; } .summary-row button:nth-child(2) { border-right:0; } .summary-row button:nth-child(-n+2) { border-bottom:1px solid var(--line); } }
.route { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:8px; padding:8px 4px; }
.route-main { display:grid; grid-template-columns:minmax(260px, 1.6fr) 96px 96px 112px 56px minmax(150px, .8fr); gap:14px; align-items:center; width:100%; padding:4px 0; text-align:left; color:var(--text); background:transparent; border:0; min-width:0; }
.route-main:hover { background:transparent; }
.route-head { display:grid; grid-template-columns:minmax(260px, 1.6fr) 96px 96px 112px 56px minmax(150px, .8fr) 32px; }
.route-id strong { white-space:normal; } .route-id span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.stage-chip { display:inline-flex; align-items:center; padding:4px 10px; font:600 12px var(--ui); border-radius:99px; border:1px solid var(--line-2); color:var(--text); white-space:nowrap; }
.stage-chip.s-lead { color:var(--slate); } .stage-chip.s-qualified { color:var(--blue-2); border-color:var(--blue-line); background:var(--blue-soft); } .stage-chip.s-demo { color:var(--green); border-color:var(--green); background:var(--green-soft); } .stage-chip.s-customer { color:var(--green); } .stage-chip.s-churned { color:var(--red); }
.row-call { width:32px; height:32px; flex:none; opacity:.55; } .route:hover .row-call, .fu-row:hover .row-call, .row-call:focus-visible { opacity:1; }
@media (max-width:1320px) and (min-width:901px) { .route-main { grid-template-columns:minmax(0, 1.4fr) 92px 92px 104px 56px minmax(140px, .9fr); grid-template-areas:none; } .route-main .cell, .route-owner { grid-area:auto; } }
@media (max-width:900px) { .route-main { grid-template-columns:1fr 1fr; } .route-id { grid-column:1 / -1; } .route-owner { grid-column:1 / -1; justify-content:flex-start; } .route .cell.stage { grid-column:1 / -1; } }
.fu-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:8px; padding:6px 4px; }
.fu-main { display:grid; grid-template-columns:minmax(112px, auto) minmax(0, 1fr) auto; align-items:center; gap:12px; width:100%; padding:4px 0; text-align:left; color:var(--text); background:transparent; border:0; }
.fu-main time { font:600 13px var(--ui); color:var(--dim); white-space:nowrap; font-variant-numeric:tabular-nums; } .fu-row.overdue .fu-main time { color:var(--red); }
.fu-main strong { display:block; font-size:14.5px; color:var(--text-hi); } .fu-main small { display:block; font-size:12.5px; color:var(--dim); }
.fu-main em { font:600 12px var(--ui); font-style:normal; padding:3px 9px; border-radius:99px; border:1px solid var(--line-2); color:var(--dim); } .fu-row.overdue .fu-main em { color:var(--red); border-color:var(--red); }
.stat-grid.four { grid-template-columns:repeat(2, 1fr); }
.card-open { justify-self:end; display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:5px 10px; font:600 12px var(--ui); color:var(--blue-2); background:transparent; border:1px solid var(--line); border-radius:8px; }
.card-open svg { width:13px; height:13px; }
.person-link { padding:0; background:transparent; border:0; text-align:left; color:var(--text); cursor:pointer; } .person-link:hover strong { color:var(--blue-2); }
.mini-list { display:grid; gap:6px; }
.mini-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:8px 10px; text-align:left; color:var(--text); background:var(--bg-2); border:1px solid var(--line); border-radius:10px; }
.mini-row:not(.static):hover { border-color:var(--blue-line); } .mini-row strong { font-size:13.5px; color:var(--text-hi); } .mini-row small { font-size:12px; color:var(--dim); }
.feed.compact { max-height:280px; } .feed.compact .feed-item { grid-template-columns:62px 1fr; }
.palette { display:grid; gap:10px; }
#paletteInput { width:100%; min-height:46px; padding:10px 14px; font:500 16px var(--ui); color:var(--text-hi); background:var(--bg-2); border:1px solid var(--line-2); border-radius:12px; }
#paletteInput:focus { outline:none; border-color:var(--blue-2); box-shadow:0 0 0 3px var(--blue-soft); }
#paletteList { display:grid; gap:4px; max-height:52vh; overflow:auto; }
.pal-row { display:grid; grid-template-columns:86px 1fr; grid-template-areas:"k l" "k d"; align-items:center; gap:0 12px; padding:9px 12px; text-align:left; color:var(--text); background:transparent; border:1px solid transparent; border-radius:10px; }
.pal-row[aria-selected="true"], .pal-row:hover { background:var(--glass-2); border-color:var(--blue-line); }
.pal-kind { grid-area:k; font:600 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--blue-2); } .pal-row strong { grid-area:l; font-size:14px; color:var(--text-hi); } .pal-row small { grid-area:d; font-size:12px; color:var(--dim); }
.pal-hint { padding:8px 12px; font-size:12.5px; color:var(--dim); }
.gear-wrap { position:relative; }
.gear-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:70; min-width:220px; padding:6px; background:var(--glass-3); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--shadow); display:grid; gap:2px; animation:ddIn .22s var(--ease) both; }
.gear-menu button { display:flex; align-items:center; gap:9px; width:100%; padding:9px 10px; font:500 13.5px var(--ui); color:var(--text); background:transparent; border:0; border-radius:8px; text-align:left; }
.gear-menu button:hover, .gear-menu button:focus-visible { background:var(--glass-2); color:var(--text-hi); }
.gear-menu button svg { width:15px; height:15px; color:var(--blue-2); } .gear-menu kbd { margin-left:auto; }
:root[data-scene="light"] { --glow:0 0 0 1px rgba(0,114,255,.3); --blue-line:rgba(0,114,255,.42); --grid-color:rgba(0,114,255,.035); }
:root[data-scene="light"] #fx-spot { background:radial-gradient(circle, color-mix(in srgb, var(--blue) 7%, transparent), transparent 62%); }
:root[data-scene="light"] #fx-signal { background:linear-gradient(115deg, transparent 38%, rgba(0,114,255,.04) 48%, rgba(0,114,255,.03) 52%, transparent 62%); }
:root[data-scene="light"] .panel::before, :root[data-scene="light"] .panel::after, :root[data-scene="light"] .grid-4::before, :root[data-scene="light"] .grid-4::after, :root[data-scene="light"] .person-card::before, :root[data-scene="light"] .person-card::after { opacity:.55; }
:root[data-scene="light"] .btn.primary { box-shadow:none; } :root[data-scene="light"] .modes-ind { box-shadow:none; }
:root[data-scene="light"] .metric-icon { border-color:var(--line-2); } :root[data-scene="light"] .data-badge i, :root[data-scene="light"] .chip i, :root[data-scene="light"] .health-status i { box-shadow:none; }
:root[data-scene="light"] .scanline { opacity:0 !important; } :root[data-scene="light"] .ripple-dot { background:radial-gradient(circle, rgba(0,114,255,.18), rgba(0,114,255,.06) 45%, transparent 70%); }
:root[data-scene="light"] .page-head h1 { background:linear-gradient(90deg, #0057c8, #0072ff 55%, #2b8bff); -webkit-background-clip:text; background-clip:text; }
:root[data-scene="light"] .clock { color:#0057c8; }
.dock { padding:6px; } .dock button { gap:2px; padding:8px 2px; font:600 12px var(--ui); } .dock button span { display:none; } .dock button[aria-current="page"] span, .dock button.preview span { display:block; }
.dock i svg { width:20px; height:20px; }

/* sales authority banner (live mode) */
.panel.authority { border-left:3px solid var(--amber); } .panel.authority.ok { border-left-color:var(--green); } .panel.authority.red { border-left-color:var(--red); }
.panel.authority .notes { margin:0; }

/* tracked sources (handoff 2026-10-01): slots, state chips, gaps */
.source-slot { display:contents; }
.head-right { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.chip.src { text-transform:none; letter-spacing:.02em; } .chip b { font-weight:700; color:var(--text-hi); }
.chip.src.loading i { animation:blink 1.2s ease-in-out infinite; } .chip.src.not_configured i { opacity:.45; }
.empty.src-gap em { display:block; margin-top:4px; font:500 11px var(--mono); color:var(--faint); font-style:normal; } .empty.src-gap .btn { margin-top:8px; }
.metric.static { cursor:default; } .metric.static:hover { transform:none; border-color:var(--line); }
.grid-4.tight { gap:8px; margin-bottom:12px; } .grid-4.tight .metric { padding:12px 14px 10px; } .grid-4.tight .metric > strong { font-size:26px; }
.health-strip .strip-head { align-items:center; }
.conn-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:8px; } .conn-grid.small { margin-top:12px; }
.conn { display:grid; gap:6px; align-content:start; padding:10px 12px; background:var(--glass-2); border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:12px; }
.conn.ready { border-left-color:var(--green); } .conn.ready_empty { border-left-color:var(--blue-2); } .conn.stale { border-left-color:var(--amber); } .conn.unavailable { border-left-color:var(--red); }
.conn strong { font-size:12.5px; color:var(--text-hi); } .conn small { font-size:11px; color:var(--dim); line-height:1.4; } .conn .chip { justify-self:start; }
.panel .sub { padding-top:14px; border-top:1px solid var(--line); min-width:0; } .panel .sub h3, .panel .grid-2 > div > h3 { font:700 12px/1.2 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--text-hi); margin:0 0 8px; } .panel .sub h4 { font:600 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin:12px 0 6px; }
.hb-stats, .calls-stats { margin-bottom:12px; } .digest-tiles.tight > div { padding:8px 10px; } .digest-tiles.tight strong { font-size:20px; } .digest-tiles > div.bad strong { color:var(--red); }
.hb-stages { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.stage-filter { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:4px 10px; font:600 11px var(--ui); color:var(--text); background:var(--glass-2); border:1px solid var(--line); border-radius:99px; cursor:pointer; --sc:var(--blue-2); }
.stage-filter i { width:7px; height:7px; border-radius:50%; background:var(--sc); } .stage-filter b { color:var(--text-hi); }
.stage-filter[aria-pressed="true"] { border-color:var(--sc); box-shadow:0 0 0 1px var(--sc) inset; color:var(--text-hi); }
.s-appointment_scheduled { --sc:var(--green); } .s-closed { --sc:var(--purple); } .s-no_answer, .s-not_qualified, .s-overdue { --sc:var(--red); } .s-follow_up_not_ready, .s-review { --sc:var(--amber); } .s-lead_responded { --sc:var(--blue-2); } .s-lead_in { --sc:var(--slate); }
.stage-chip.s-appointment_scheduled, .stage-chip.s-closed, .stage-chip.s-no_answer, .stage-chip.s-not_qualified, .stage-chip.s-follow_up_not_ready, .stage-chip.s-lead_responded, .stage-chip.s-lead_in, .stage-chip.s-overdue, .stage-chip.s-review { color:var(--sc); border-color:var(--sc); }
.hb-list { display:grid; gap:6px; margin-bottom:10px; }
.hb-row { display:grid; grid-template-columns:auto minmax(160px, 1.4fr) auto repeat(4, minmax(84px, .7fr)); align-items:center; gap:12px; width:100%; padding:9px 12px; text-align:left; color:var(--text); background:var(--glass-2); border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.hb-row:hover, .hb-row:focus-visible { border-color:var(--blue-line); background:var(--glass-3); }
.hb-main { min-width:0; } .hb-main strong { display:block; color:var(--text-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hb-main small { display:block; font-size:11px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hb-row .cell strong { display:block; font:500 13px/1.2 var(--display); color:var(--text-hi); } .hb-row .cell small { font-size:10.5px; color:var(--dim); } .hb-row .cell.red strong { color:var(--red); } .hb-row .cell.amber strong { color:var(--amber); }
.acct-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:8px; }
.acct-grid article { padding:10px 12px; background:var(--glass-2); border:1px solid var(--line); border-radius:12px; display:grid; gap:6px; align-content:start; } .acct-grid article.unmapped { border-style:dashed; }
.acct-top { display:flex; justify-content:space-between; align-items:center; gap:8px; } .acct-grid strong { font-size:12.5px; color:var(--text-hi); }
.acct-grid dl { display:grid; gap:3px; margin:0; } .acct-grid dl div { display:flex; justify-content:space-between; gap:8px; font-size:11.5px; } .acct-grid dt { color:var(--dim); } .acct-grid dd { margin:0; color:var(--text-hi); font-weight:600; font-variant-numeric:tabular-nums; }
.acct-grid .person-link { display:inline-flex; align-items:center; gap:6px; padding:0; background:none; border:0; color:var(--text-hi); font:600 12px var(--ui); cursor:pointer; }
.sched-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; } .sched-controls strong { font:600 12px var(--mono); letter-spacing:.06em; color:var(--text-hi); }
.sched-list { display:grid; gap:8px; max-height:440px; overflow:auto; padding-right:2px; }
.sched-day { display:grid; grid-template-columns:86px 1fr; gap:10px; } .sched-day > time { font:600 11px var(--mono); color:var(--blue-2); padding-top:8px; } .sched-day > div { display:grid; gap:4px; }
.sched-row { display:grid; grid-template-columns:70px 1fr; grid-template-areas:"w t" "w s"; gap:0 10px; align-items:center; width:100%; padding:7px 10px; text-align:left; color:var(--text); background:var(--glass-2); border:1px solid var(--line); border-left:3px solid var(--blue-2); border-radius:10px; cursor:pointer; }
.sched-row.appointment { border-left-color:var(--green); } .sched-row.past { opacity:.62; } .sched-row:hover, .sched-row:focus-visible { border-color:var(--blue-line); }
.sched-row .when { grid-area:w; font:600 11px var(--mono); color:var(--dim); } .sched-row strong { grid-area:t; font-size:12.5px; color:var(--text-hi); } .sched-row small { grid-area:s; font-size:11px; color:var(--dim); }
.icon-btn svg.flip { transform:rotate(180deg); }
.status-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
table.data td.mono, table.data small.mono { font-family:var(--mono); font-size:11px; } table.data td small { display:block; font-size:10.5px; color:var(--dim); }
table.data tr.missed td { background:var(--red-soft); } .neg { color:var(--red); }
table.data.catalog td strong { display:block; }
.health p .chip.src { margin-right:6px; }
.hunter-edit .dialog-foot { align-items:center; } .hunter-edit textarea { resize:vertical; }
@media (max-width:900px) { .hb-row { grid-template-columns:auto 1fr auto; } .hb-row .cell { display:none; } .sched-day { grid-template-columns:1fr; } .sched-day > time { padding-top:0; } .head-right { justify-content:flex-start; } }
@media (max-width:480px) { .metric > strong { font-size:26px; overflow-wrap:anywhere; } .digest-tiles strong { font-size:22px; } }

/* short overview: action tiles + one-line health bar */
.action-tiles button { display:block; width:100%; padding:14px 16px; text-align:left; color:var(--text); background:transparent; border:0; border-right:1px solid var(--line); border-radius:0; cursor:pointer; }
.action-tiles button:last-child { border-right:0; } .action-tiles button:hover, .action-tiles button:focus-visible { background:var(--glass-2); outline:none; }
.action-tiles button strong { display:block; font:700 30px/1.1 var(--display); color:var(--text-hi); letter-spacing:-.02em; margin:2px 0; }
.action-tiles button span { display:block; font:600 12.5px var(--ui); color:var(--dim); } .action-tiles button small { display:block; font-size:11.5px; color:var(--dim); }
.action-tiles .tone-red strong { color:var(--red); } .action-tiles .tone-amber strong { color:var(--amber); } .action-tiles .tone-ok strong { color:var(--green); }
.action-tiles .tone-red { box-shadow:inset 0 3px 0 var(--red); } .action-tiles .tone-amber { box-shadow:inset 0 3px 0 var(--amber); }
.health-bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); }
.health-bar .hb-label { display:inline-flex; align-items:center; gap:8px; } .health-bar .hb-label .kicker { margin:0; }
.health-bar .hb-chips { display:inline-flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; }
.health-bar .hb-more { display:inline-flex; align-items:center; gap:10px; margin-left:auto; font:500 11px var(--mono); color:var(--dim); }
@media (max-width:760px) { .action-tiles { grid-template-columns:repeat(2, 1fr); } .action-tiles button { border-bottom:1px solid var(--line); } .action-tiles button:nth-child(2n) { border-right:0; } .health-bar .hb-more { margin-left:0; } }

/* glance overview: one-line urgent rows with icon actions */
.glance .action-tiles { margin-bottom:12px; }
.alert-list.compact { display:grid; gap:4px; }
.alert-list.compact .alert-row { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; padding:6px 10px; }
.alert-list.compact .alert-body { display:flex; align-items:baseline; gap:8px; min-width:0; padding:4px 0; text-align:left; }
.alert-list.compact .alert-body strong { white-space:nowrap; } .alert-list.compact .alert-body small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.alert-list.compact .alert-body .alert-state { margin-left:auto; flex:0 0 auto; }
.alert-list.compact .alert-actions { display:inline-flex; gap:4px; }
.icon-btn.xs { width:28px; height:28px; min-height:28px; padding:0; } .icon-btn.xs svg { width:14px; height:14px; }
.icon-btn.xs.primary { color:var(--on-accent); background:var(--blue); border-color:transparent; }
.alert-row.followup .alert-kind { color:var(--amber); border-color:var(--amber); }
.glance-foot { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.text-btn.danger { color:var(--red); }
@media (max-width:760px) { .alert-list.compact .alert-row { grid-template-columns:1fr auto; } .alert-list.compact .alert-kind { grid-column:1 / -1; } .alert-list.compact .alert-body { flex-direction:column; align-items:flex-start; gap:2px; } .alert-list.compact .alert-body strong, .alert-list.compact .alert-body small { white-space:normal; } }

/* sign-in gate: the theme's X, HUD title, account picker */
.gate-x { width:64px; height:60px; margin-bottom:14px; } .gate-x svg { width:100%; height:100%; display:block; fill:var(--blue); filter:drop-shadow(0 0 16px var(--blue-soft)); animation:boot-x 2.4s ease-in-out infinite; }
:root[data-motion="reduce"] .gate-x svg { animation:none; }
.gate-brief > .kicker.page { margin-bottom:10px; }
.gate-brief > p { max-width:52ch; font-size:14.5px; color:var(--text); line-height:1.55; }
.gate-card { padding:24px 24px 20px; }
.acct-pick { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; margin:4px 0 14px; }
.acct { display:grid; justify-items:center; gap:7px; padding:10px 6px 9px; color:var(--text); background:var(--glass-2); border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.acct .avatar { width:40px; height:40px; font-size:16px; } .acct strong { font:600 11.5px var(--ui); letter-spacing:.02em; color:var(--text-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.acct:hover, .acct:focus-visible { transform:translateY(-1px); border-color:var(--blue-line); background:var(--glass-3); outline:none; }
.acct[aria-pressed="true"] { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset, var(--glow); background:var(--blue-soft); }
.acct[aria-pressed="true"] .avatar { background:var(--blue); color:var(--on-accent); }
@media (max-width:520px) { .acct-pick { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:900px) { .gate-brief { text-align:left; } .gate-x { width:52px; height:48px; } }
/* sign-in security line: readable in every theme (was --faint, under 4.5:1) */
.gate .gate-security { color:var(--dim); }