/* ═══════════════════════════════════════════════════════════════════════
   SPARTAN OS — DESIGN SYSTEM
   Premium black · charcoal · metallic Spartan gold · glass · cinematic light.
   Tokens follow the approved style guide.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Colour */
  --gold:#D4AF37; --gold-dark:#B08D28; --gold-bright:#F0D278;
  --charcoal:#0F1115; --grey-dark:#151920; --grey-mid:#1C222B;
  --glass:rgba(255,255,255,.05); --glass-strong:rgba(255,255,255,.08);
  --hairline:rgba(255,255,255,.09);
  --success:#22C55E; --warning:#F59E0B; --danger:#EF4444; --info:#3B82F6;
  --ink:#F4F6FA; --ink-soft:#AAB2C0; --ink-faint:#6C7789;

  /* Type — SF Pro on Apple, Segoe on Windows, Inter/Sora when self-hosted */
  --font-head:"Sora","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  /* Radius */
  --r-card:16px; --r-btn:12px; --r-input:12px; --r-modal:20px; --r-pill:999px;

  /* Elevation */
  --e1:0 8px 24px rgba(0,0,0,.50);
  --e2:0 12px 32px rgba(0,0,0,.60);
  --e3:0 24px 60px rgba(0,0,0,.70);

  /* Motion */
  --t-fast:150ms; --t-normal:250ms; --t-smooth:350ms; --t-slow:500ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  --sidebar-w:236px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body{
  background:
    radial-gradient(1200px 700px at 78% -12%, rgba(212,175,55,.10), transparent 62%),
    radial-gradient(900px 600px at -8% 8%, rgba(59,130,246,.05), transparent 55%),
    var(--charcoal);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.seat-name,.exec-name{font-family:var(--font-head);letter-spacing:-.01em}
.seat-title,.cc-section>h3,.panel-title{
  font-size:.68rem;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--ink-faint);font-weight:600}

/* ── Glass surfaces ───────────────────────────────────────────────────── */
.glass,.cc-section,.exec-tile,.founder-seat,.timeline-list,.emergency-panel,
.cmd-console,.mission-bar{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  box-shadow:var(--e1);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}

/* Hairline gold light across the top edge of every panel — cinematic lighting */
.cc-section,.exec-tile,.founder-seat,.mission-bar{position:relative;overflow:hidden}
.cc-section::before,.exec-tile::before,.founder-seat::before,.mission-bar::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.55),transparent);
  opacity:.8;pointer-events:none}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{
  font-family:var(--font-body);font-size:.82rem;font-weight:500;
  padding:.55rem .95rem;border-radius:var(--r-btn);
  border:1px solid var(--hairline);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  color:var(--ink);cursor:pointer;
  transition:transform var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease)}
.btn:hover{border-color:rgba(212,175,55,.5);
  background:linear-gradient(180deg,rgba(212,175,55,.14),rgba(212,175,55,.05));
  box-shadow:0 0 0 1px rgba(212,175,55,.18),0 8px 22px rgba(0,0,0,.5)}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold) 45%,var(--gold-dark));
  color:#1A1408;border-color:rgba(0,0,0,.25);font-weight:650;
  box-shadow:0 6px 18px rgba(212,175,55,.28),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-danger{border-color:rgba(239,68,68,.55);color:#FFD9D9;
  background:linear-gradient(180deg,rgba(239,68,68,.16),rgba(239,68,68,.06))}
.btn-danger:hover{border-color:rgba(239,68,68,.85);
  background:linear-gradient(180deg,rgba(239,68,68,.26),rgba(239,68,68,.1));
  box-shadow:0 0 0 1px rgba(239,68,68,.25),0 8px 22px rgba(0,0,0,.5)}

/* ── Inputs ───────────────────────────────────────────────────────────── */
.cmd-input,.bar-search,input[type=text],input[type=search],input[type=password]{
  background:rgba(0,0,0,.35);border:1px solid var(--hairline);
  border-radius:var(--r-input);color:var(--ink);padding:.6rem .85rem;
  font-family:var(--font-body);font-size:.88rem;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.cmd-input:focus,.bar-search:focus,input:focus{
  outline:none;border-color:rgba(212,175,55,.6);
  box-shadow:0 0 0 3px rgba(212,175,55,.14)}
::placeholder{color:var(--ink-faint)}

/* ── Status pills ─────────────────────────────────────────────────────── */
.bar-chip,.voice-fact,.exec-status{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.7rem;font-weight:500;letter-spacing:.02em;
  padding:.28rem .6rem;border-radius:var(--r-pill);
  border:1px solid var(--hairline);background:rgba(255,255,255,.04);
  color:var(--ink-soft);white-space:nowrap}
.bar-chip::before,.exec-status::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ink-faint);box-shadow:0 0 8px currentColor;flex:none}
.voice-ok,.st-ok{color:#BFF0CE;border-color:rgba(34,197,94,.35)}
.voice-ok::before,.st-ok::before{background:var(--success)}
.voice-warn,.st-warn{color:#FCE2B4;border-color:rgba(245,158,11,.35)}
.voice-warn::before,.st-warn::before{background:var(--warning)}
.st-bad{color:#FFCFCF;border-color:rgba(239,68,68,.4)}
.st-bad::before{background:var(--danger)}
.st-idle{color:var(--ink-faint)}
.st-idle::before{background:var(--ink-faint);box-shadow:none}

:root{
  --bg:#0d0d0f; --panel:#15151a; --tile:#1c1c22; --ink:#f4f4f5; --muted:#a1a1aa;
  --gold:#C9A84C; --line:#2a2a31;
  --idle:#6b7280; --working:#3b82f6; --waiting:#eab308; --blocked:#ef4444;
  --unavailable:#4b5563; --degraded:#f97316; --approval:#C9A84C;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3{font-weight:700;letter-spacing:.02em}
a{color:var(--gold);text-decoration:none}
.btn{background:var(--tile);color:var(--ink);border:1px solid var(--line);
  padding:.6rem 1rem;border-radius:.5rem;cursor:pointer;font-size:.95rem}
.btn:hover{border-color:var(--gold)}
.btn-primary{background:var(--gold);color:#111;border-color:var(--gold);font-weight:700}
.btn-ghost{background:transparent}
.hint{color:var(--muted);font-size:.85rem}
.msg{min-height:1.2rem}.msg.err{color:#f87171}.msg.ok{color:#4ade80}

/* auth */
body.auth{display:grid;place-items:center;min-height:100vh;padding:1rem}
/* `.card` is used across the whole app, so the login card's 26rem cap must be
   scoped to the auth page. Left global it silently narrowed every card in every
   executive office and panel to 416px regardless of its column width. */
.card{background:var(--panel);border:1px solid var(--line);border-radius:1rem;
  padding:2rem;width:100%}
body.auth .card{max-width:26rem}
.card h1{color:var(--gold);margin:.2rem 0}
.tagline{color:var(--muted);margin-top:0}
.stack{display:flex;flex-direction:column;gap:.6rem;margin:1rem 0}
.stack input{background:var(--tile);border:1px solid var(--line);border-radius:.5rem;
  padding:.6rem;color:var(--ink)}
details summary{cursor:pointer;color:var(--gold);margin-top:1rem}
.footnote{color:var(--muted);font-size:.75rem;border-top:1px solid var(--line);
  padding-top:.8rem;margin-top:1rem}

/* app */
.topbar{display:flex;align-items:center;gap:1rem;padding:.8rem 1.2rem;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0}
.brand{color:var(--gold);font-weight:800;letter-spacing:.08em}
.topbar nav{display:flex;gap:1rem;flex:1}
main{width:100%;padding:1.2rem}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:1rem;
  padding:1.2rem;margin-bottom:1.2rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1rem 0}
.tile{background:var(--tile);border:1px solid var(--line);border-radius:.7rem;padding:1rem}
.tile h3{margin:0 0 .3rem;color:var(--muted);font-size:.8rem;text-transform:uppercase}
.tile p{margin:0;font-size:1.6rem;font-weight:700}
.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.6rem}
.agent{background:var(--tile);border:1px solid var(--line);border-left:4px solid var(--idle);
  border-radius:.6rem;padding:.7rem;display:flex;flex-direction:column;gap:.2rem}
.agent .role{color:var(--muted);font-size:.75rem}
.agent .badge{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
.agent small{color:var(--muted)}
.s-idle{border-left-color:var(--idle)} .s-working{border-left-color:var(--working)}
.s-waiting{border-left-color:var(--waiting)} .s-blocked{border-left-color:var(--blocked)}
.s-unavailable{border-left-color:var(--unavailable);opacity:.7}
.s-degraded{border-left-color:var(--degraded)} .s-approval{border-left-color:var(--approval)}

.voicebar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.recdot{color:#f87171;font-weight:700;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.4}}
.transcript{width:100%;min-height:4rem;background:var(--tile);color:var(--ink);
  border:1px solid var(--line);border-radius:.6rem;padding:.7rem;margin:.8rem 0}
.convo{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}
.line{background:var(--tile);border:1px solid var(--line);border-radius:.6rem;padding:.6rem .8rem}
.line.creed{border-left:3px solid var(--gold)}
.approval{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.approval span{flex:1}

/* ===== Executive Workspace (mobile-first) ===== */
:root{ --hold:#a855f7; }
body.workspace{ padding-bottom:4.5rem; }
.topbar .active-agent{ margin-left:auto; margin-right:.6rem; color:var(--gold);
  font-weight:700; font-size:.85rem; max-width:45vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.iconbtn{ background:none; border:none; color:var(--ink); font-size:1.3rem; cursor:pointer; }

.sidenav{ position:fixed; top:0; left:0; height:100%; width:78%; max-width:20rem; z-index:40;
  background:var(--panel); border-right:1px solid var(--line); transform:translateX(-100%);
  transition:transform .2s ease; padding:3.5rem .6rem 1rem; overflow-y:auto; }
.sidenav.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.6); }
.sidenav a{ display:block; padding:.7rem .6rem; border-radius:.5rem; color:var(--ink); }
.sidenav a:hover{ background:var(--tile); color:var(--gold); }
.sidenav hr{ border:none; border-top:1px solid var(--line); margin:.5rem 0; }

.view{ width:100%; padding:1rem; }
.view h1{ font-size:1.3rem; }
.briefing{ color:var(--ink); }

.office-head h1{ display:flex; align-items:center; gap:.5rem; }
.twocol{ display:grid; grid-template-columns:1fr; gap:.8rem; }
.cards{ display:grid; gap:.6rem; }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:.2rem .8rem; margin:0; }
.kv dt{ color:var(--muted); } .kv dd{ margin:0; }
.card ul{ margin:.2rem 0 0; padding-left:1.1rem; } .card li{ margin:.15rem 0; }
.note{ color:var(--muted); font-size:.8rem; font-style:italic; }

.console{ margin-top:1rem; background:var(--panel); border:1px solid var(--line);
  border-radius:.8rem; padding:1rem; }
.console .row{ display:flex; gap:.5rem; }
.console input{ flex:1; background:var(--tile); border:1px solid var(--line);
  border-radius:.5rem; padding:.6rem; color:var(--ink); }
.console .log{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:.6rem;
  max-height:16rem; overflow-y:auto; }

/* Live voice console (renderVoiceConsole) */
.voice-log{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:.6rem;
  max-height:20rem; overflow-y:auto; }
.rec-dot{ display:inline-block; width:.7rem; height:.7rem; border-radius:50%;
  background:#EF4444; margin-left:.6rem; vertical-align:middle;
  animation:pulse 1s ease-in-out infinite; }
.voice-transcript{ width:100%; min-height:3.2rem; resize:vertical; font-family:inherit; }

.feed .feedrow{ display:flex; flex-direction:column; padding:.5rem 0; border-bottom:1px solid var(--line); }
.feed .who{ color:var(--gold); font-size:.8rem; } .feed .meta{ color:var(--muted); font-size:.75rem; }

.badge.s-hold{ color:var(--hold); }
.agent.s-hold{ border-left-color:var(--hold); }
.s-hold{ border-left-color:var(--hold); }

.bottomnav{ position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex;
  background:var(--panel); border-top:1px solid var(--line); }
.bottomnav a{ flex:1; text-align:center; padding:.8rem .2rem; color:var(--muted); font-size:.8rem; }
.bottomnav a:hover{ color:var(--gold); }

@media (min-width:760px){
  .twocol{ grid-template-columns:1fr 1fr; }
  /* The rail offset is owned by the app shell block at the end of this file,
     which ties it to --rail. Reserving space here as well double-offset the
     main region and squeezed content into a narrow central column. */
  body.workspace{ padding-bottom:0; }
  .bottomnav{ display:none; }
  .topbar .iconbtn{ display:none; }
}

/* Approval Centre (Milestone 4) */
.actionbar{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.actionbar .btn{flex:0 0 auto}
.note{color:var(--muted);font-size:.85rem;margin:.2rem 0 .8rem}
.approval small{color:var(--muted)}

/* Founder Command Centre (deployment) */
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin:1rem 0}
.cc-card{border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;background:rgba(255,255,255,.02)}
.cc-card.cc-off{opacity:.6}
.cc-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cc-status{font-weight:600;margin-top:.2rem}
.cc-note{font-size:.72rem;color:var(--muted);margin-top:.25rem}

/* Founder Command Language console */
.cmd-console{margin:1.2rem 0;border:1px solid var(--line);border-radius:10px;padding:.9rem}
.cmd-row{display:flex;gap:.5rem;margin:.6rem 0}
.cmd-input{flex:1;min-width:0;padding:.6rem .7rem;border-radius:8px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:inherit;font-family:inherit}
.cmd-output{white-space:pre-wrap;word-break:break-word;font-size:.8rem;margin:0;padding:.6rem;border-radius:8px;background:rgba(0,0,0,.25);min-height:1.2rem}
@media (max-width:520px){.cmd-row{flex-direction:column}.cmd-input{width:100%}}

/* M7 dashboard sections */
.cc-sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.7rem;margin:1rem 0}
.cc-section{border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem}
.cc-section h3{margin:0 0 .4rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cc-line{font-size:.78rem;padding:.15rem 0;border-bottom:1px solid rgba(255,255,255,.04);word-break:break-word}
.cc-body{max-height:220px;overflow:auto}

/* Office voice indicator strip */
.voice-strip{border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;margin:.8rem 0;background:rgba(255,255,255,.02)}
.voice-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.45rem}
.voice-facts{display:flex;flex-wrap:wrap;gap:.35rem}
.voice-fact{font-size:.72rem;padding:.2rem .5rem;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.voice-ok{border-color:rgba(120,200,140,.45)}
.voice-warn{border-color:rgba(230,180,90,.55)}
.voice-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.voice-note{font-size:.72rem;color:var(--muted);margin-top:.4rem}
@media (max-width:520px){
  .voice-facts{flex-direction:column;gap:.25rem}
  .voice-fact{white-space:normal;border-radius:8px}
  .voice-actions{flex-direction:column}
  .voice-actions .btn{width:100%}
}

/* ---- Founder Mission Control ---- */
.mission-bar{border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem;margin-bottom:1rem;background:rgba(255,255,255,.03)}
.bar-left,.bar-mid,.bar-right{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.bar-mid,.bar-right{margin-top:.5rem}
.bar-brand{font-weight:700;letter-spacing:.03em}
.bar-greeting{font-size:1.05rem}
.bar-chip{font-size:.72rem;padding:.2rem .55rem;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.bar-search{flex:1;min-width:180px;padding:.4rem .6rem;border-radius:8px;border:1px solid var(--line);background:transparent;color:inherit}
.bar-alert{margin-top:.6rem;padding:.5rem .7rem;border-radius:8px;border:1px solid rgba(230,120,110,.7);font-weight:600}
.bar-note{margin-top:.35rem;font-size:.75rem;color:var(--muted)}
.bar-note.critical{color:#e8938a}

.cc-header-row{display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
.cc-header-row h1{margin:0}

/* Live command-centre clock — Europe/London, ticks every second (app.js). */
.live-clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.live-clock .clock-date{font-size:.68rem;font-weight:700;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase}
.live-clock .clock-time{font-size:1rem;font-weight:700;color:var(--gold)}
.mission-live{font-size:.7rem;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--line)}
.btn-danger{border-color:rgba(230,120,110,.6)}
.search-results{margin-top:.4rem}

/* founder command seat — visibly above the executives */
.founder-seat{border:2px solid rgba(201,168,76,.55);border-radius:12px;padding:.9rem 1rem;margin-bottom:1rem;background:rgba(201,168,76,.06)}
.seat-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.5rem}
.seat-subtitle{font-size:.82rem;color:var(--muted);margin:-.3rem 0 .75rem}
.seat-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}
.seat-avatar-holder{flex:none}
.seat-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;border:2px solid rgba(201,168,76,.8);overflow:hidden;cursor:pointer}
.seat-avatar:focus-visible{outline:2px solid var(--gold,#c9a84c);outline-offset:2px}
.seat-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.seat-avatar-note{margin-top:.3rem;font-size:.7rem;color:#e08a8a;max-width:160px}
.seat-name{font-size:1.15rem;font-weight:700}
.seat-role{font-size:.8rem;color:var(--muted)}
.seat-auth{font-size:.72rem;color:var(--muted)}
.seat-decisions{margin-top:.6rem}
.seat-decisions h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:.3rem 0}

/* executive wall */
.exec-wall{margin:1rem 0}
.exec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:.7rem}
.exec-tile{border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem}
.exec-tile.needs-founder{border-color:rgba(230,180,90,.7)}
.exec-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.45rem}
.exec-symbol{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;border:1px solid var(--line)}
.exec-name{font-weight:600}
.exec-title{font-size:.72rem;color:var(--muted)}
.exec-dept{font-size:.68rem;color:var(--muted)}
.exec-status{display:inline-block;font-size:.7rem;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--line);margin-bottom:.4rem}
.st-ok{border-color:rgba(120,200,140,.5)}
.st-warn{border-color:rgba(230,180,90,.6)}
.st-bad{border-color:rgba(230,120,110,.7)}
.st-idle{opacity:.75}
.exec-progress{height:5px;border-radius:3px;background:rgba(255,255,255,.08);margin:.35rem 0;overflow:hidden}
.exec-progress-fill{height:100%;background:var(--gold,#C9A84C)}
.exec-flag{margin-top:.4rem;font-size:.72rem;color:#e8c07a}

/* mission timeline */
.mission-stream{margin-top:1rem}
.timeline-list{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.timeline-row{display:flex;flex-wrap:wrap;gap:.5rem;padding:.4rem .6rem;border-bottom:1px solid rgba(255,255,255,.05);font-size:.75rem}
.timeline-row.needs-founder{background:rgba(230,180,90,.07)}
.tl-time{color:var(--muted);min-width:150px}
.tl-actor{font-weight:600}
.tl-detail{color:var(--muted)}
.tl-audit{color:var(--muted);font-size:.68rem}
.tl-flag{color:#e8c07a}

/* emergency panel */
.emergency-panel{border:1px solid rgba(230,120,110,.6);border-radius:12px;padding:.9rem 1rem;margin-top:1rem}
.emergency-confirm{margin-top:.4rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;width:100%}

@media (max-width:520px){
  .exec-grid{grid-template-columns:1fr}
  .bar-left,.bar-mid,.bar-right{flex-direction:column;align-items:flex-start}
  .bar-search{width:100%}
  .timeline-row{flex-direction:column;gap:.15rem}
  .tl-time{min-width:0}
}

/* Headquarters mode — full-bleed wall display */
body.hq-mode .mission-bar{position:sticky;top:0;z-index:5}
/* hq-mode no longer re-templates the wall; the shell owns layout */
body.hq-mode .exec-tile{padding:1rem 1.1rem}
body.hq-mode .exec-name{font-size:1.15rem}
body.hq-mode .timeline-row{font-size:.85rem}
body.hq-mode .cmd-console,body.hq-mode .search-results{display:none}

/* Mobile command grid */
@media (max-width:520px){
  .cc-sections{grid-template-columns:1fr}
  .mobile-command-grid,.exec-grid{display:grid;grid-template-columns:1fr;gap:.6rem}
  .founder-seat{padding:.75rem .8rem}
  .seat-head{gap:.5rem}
  .voice-actions .btn,.cmd-row .btn{width:100%}
  .cmd-row{flex-direction:column;align-items:stretch}
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .exec-progress-fill{transition:none !important}
}

/* Alerts never rely on colour alone — they always carry text */
.bar-alert::before{content:"ALERT: ";font-weight:700}
.exec-flag::before{content:"⚑ "}
.tl-flag::before{content:"! "}

/* Visible keyboard focus */
:focus-visible{outline:2px solid var(--gold,#C9A84C);outline-offset:2px}

/* ================= Spartan OS Mobile ================= */

/* Launch sequence: helmet splits and the screen opens onto Mission Control.
   Decorative only — it never represents real loading progress. */
.launch-stage{position:fixed;inset:0;z-index:9999;pointer-events:auto;background:transparent}
/* Two full-height doors. Each carries the matching half of the official badge,
   pinned to the screen's centre line so the mark reads as one whole emblem until
   the doors part. The halves are pre-cut from the master asset through its exact
   vertical centre — no CSS cropping, so the seam cannot drift. */
.launch-half{position:absolute;top:0;bottom:0;width:50%;background-color:#0B0B0C;
  background-repeat:no-repeat;background-size:auto 46vmin;
  transition:transform 1.05s cubic-bezier(.7,0,.2,1)}
.launch-left{left:0;background-position:right center;
  background-image:url("/static/icons/helmet-left.png")}
.launch-right{right:0;background-position:left center;
  background-image:url("/static/icons/helmet-right.png")}
.launch-line{position:absolute;left:50%;top:50%;width:2px;height:0;
  transform:translate(-50%,-50%);background:linear-gradient(180deg,transparent,#C9A84C,transparent);
  box-shadow:0 0 18px 3px rgba(201,168,76,.75);opacity:0;
  transition:height .45s ease-out,opacity .3s ease-out}
/* The line draws, holds while the doors part, then fades — it must not linger
   over Mission Control once the reveal is done. */
.launch-run .launch-line{height:64vmin;opacity:1;
  animation:launch-line-fade .45s ease-out 1.05s forwards}
@keyframes launch-line-fade{to{opacity:0}}
.launch-run .launch-left{transform:translateX(-100%);transition-delay:.5s}
.launch-run .launch-right{transform:translateX(100%);transition-delay:.5s}
body.launching{overflow:hidden}

/* Connection bar — honest connection state */
.conn-bar{position:sticky;top:0;z-index:50;padding:.45rem .7rem;font-size:.75rem;
  text-align:center;border-bottom:1px solid var(--line)}
.conn-offline{background:rgba(230,120,110,.16)}
.conn-reconnecting{background:rgba(230,180,90,.16)}
.conn-cached{background:rgba(255,255,255,.08)}
.conn-bar::before{content:"● "}

/* Offline screen */
.offline-screen{max-width:32rem;margin:12vh auto;padding:0 1.25rem;text-align:center}
.offline-screen h1{font-size:1.4rem;margin:.8rem 0 .4rem}

/* Mobile command grid + safe areas */
.mobile-command-grid{display:grid;grid-template-columns:1fr;gap:.6rem}
@supports (padding: max(0px)){
  body{padding-left:max(0px,env(safe-area-inset-left));
       padding-right:max(0px,env(safe-area-inset-right));
       padding-bottom:max(0px,env(safe-area-inset-bottom))}
}

/* Touch targets: 44px minimum on phones */
@media (max-width:820px){
  .btn,.cmd-input,.bar-search{min-height:44px}
  .exec-grid{grid-template-columns:1fr}
  .cc-sections{grid-template-columns:1fr}
  .mission-bar{padding:.6rem}
  .bar-search{width:100%}
  .timeline-row{flex-direction:column;gap:.15rem}
  .tl-time{min-width:0}
  .voice-actions{flex-wrap:wrap}
  .voice-actions .btn{flex:1 1 auto}
}

/* Bottom navigation for phones */
.mobile-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);
  background:rgba(11,11,12,.97);padding-bottom:env(safe-area-inset-bottom)}
.mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;padding:.5rem .2rem;font-size:.65rem;min-height:52px;text-decoration:none}
.mobile-nav a[aria-current="page"]{color:var(--gold,#C9A84C)}
@media (max-width:820px){
  .mobile-nav{display:grid}
  #view{padding-bottom:64px}
}

/* Push-to-talk */
.ptt-btn{width:100%;min-height:56px;border-radius:12px;border:1px solid var(--line);
  background:transparent;color:inherit;font-size:1rem}
.ptt-btn.ptt-active{border-color:var(--gold,#C9A84C);background:rgba(201,168,76,.12)}

/* Reduced motion: the launch sequence does not run at all */
@media (prefers-reduced-motion: reduce){
  .launch-stage{display:none !important}
  .launch-half,.launch-line{transition:none !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   EXECUTIVE IDENTITIES
   Each executive carries its own accent, so no two offices feel like the
   same AI. Accents are decorative; status colour still governs meaning.
   ═══════════════════════════════════════════════════════════════════════ */
.exec-tile[data-agent="creed"]    {--accent:#D4AF37}  /* gold — orchestrator */
.exec-tile[data-agent="isaiah"]   {--accent:#3B82F6}  /* blue — strategy */
.exec-tile[data-agent="naya"]     {--accent:#A855F7}  /* violet — creative */
.exec-tile[data-agent="jade"]     {--accent:#22C55E}  /* green — growth */
.exec-tile[data-agent="xavier"]   {--accent:#F97316}  /* orange — operations */
.exec-tile[data-agent="cgo"]      {--accent:#14B8A6}  /* teal — growth & partnerships */
.exec-tile[data-agent="calendar"] {--accent:#EAB308}  /* amber — calendar & research */
.exec-tile[data-agent="podcast"]  {--accent:#8B5CF6}  /* purple — podcast distribution */
.exec-tile[data-agent="guardian"] {--accent:#EF4444}  /* red — security */
.exec-tile[data-agent="sentinel"] {--accent:#06B6D4}  /* cyan — verification */

.exec-tile{--accent:var(--gold);padding:1rem 1.05rem;
  transition:transform var(--t-normal) var(--ease),
             border-color var(--t-normal) var(--ease),
             box-shadow var(--t-normal) var(--ease)}
.exec-tile::after{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.5;transition:opacity var(--t-normal) var(--ease)}
.exec-tile:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:var(--e2),0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)}
.exec-tile:hover::after{opacity:1}
.exec-tile.needs-founder{border-color:rgba(245,158,11,.55)}

/* A tile only ever gets this class when its real state changed since the last
   poll (see refreshExecGrid in app.js) — the flash marks a genuine update,
   never a decorative tick. */
.exec-tile-updated{animation:exec-tile-flash 1.6s var(--ease)}
@keyframes exec-tile-flash{
  0%{box-shadow:var(--e2),0 0 0 2px color-mix(in srgb,var(--accent) 70%,transparent)}
  100%{box-shadow:none}
}

/* ==========================================================================
   Founder-facing office status taxonomy — WORKING / AVAILABLE / IDLE /
   WAITING FOR RICHARD / BLOCKED / ERROR / OFFLINE.

   Every class below is applied only when the backend's real state_group says
   so (mission_control.py::_state_group) — never on a timer, never decorative.
   Colour for WAITING/BLOCKED/ERROR is deliberately amber/red regardless of the
   office's own identity colour, so urgency always reads the same way across
   every agent. WORKING/IDLE/AVAILABLE use the office's own --accent so the
   six identities stay visually distinct at a glance.
   ========================================================================== */

.exec-nameplate{transition:box-shadow var(--t-normal) var(--ease)}

/* WORKING — gentle continuous pulse on the nameplate and the tile border. */
.state-working{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.state-working .exec-head{animation:office-pulse-working 2.4s ease-in-out infinite}
@keyframes office-pulse-working{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}
  50%{box-shadow:0 0 14px 1px color-mix(in srgb,var(--accent) 45%,transparent)}
}

/* AVAILABLE — solid illuminated colour, deliberately no motion. */
.state-available{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.state-available .exec-status{background:color-mix(in srgb,var(--accent) 22%,transparent);
  color:color-mix(in srgb,var(--accent) 85%,white)}

/* IDLE — dim, slow heartbeat: proof of life without competing for attention. */
.state-idle .exec-head{animation:office-pulse-idle 4.2s ease-in-out infinite}
@keyframes office-pulse-idle{
  0%,100%{opacity:1}
  50%{opacity:.72}
}

/* WAITING FOR RICHARD — amber pulse, always this colour regardless of office. */
.state-waiting{border-color:rgba(245,158,11,.65)}
.state-waiting .exec-head{animation:office-pulse-amber 1.5s ease-in-out infinite}
@keyframes office-pulse-amber{
  0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}
  50%{box-shadow:0 0 16px 2px rgba(245,158,11,.55)}
}

/* BLOCKED — a stronger amber/red warning pulse; a real blocker is named on the tile. */
.state-blocked{border-color:rgba(239,68,68,.55)}
.state-blocked .exec-head{animation:office-pulse-blocked 1.1s ease-in-out infinite}
@keyframes office-pulse-blocked{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
  50%{box-shadow:0 0 18px 3px rgba(239,68,68,.6)}
}

/* ERROR / SECURITY INCIDENT — the most urgent pulse. Never hidden behind a
   generic label; the tile always names the real Guardian block or failure. */
.state-error{border-color:rgba(239,68,68,.85)}
.state-error .exec-head{animation:office-pulse-error .8s ease-in-out infinite}
@keyframes office-pulse-error{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.15)}
  50%{box-shadow:0 0 22px 4px rgba(239,68,68,.85)}
}

/* OFFLINE — grey, still, no pulse. */
.state-offline{border-color:var(--line);filter:grayscale(.85);opacity:.6}
.state-offline .exec-status{background:rgba(120,120,120,.18);color:var(--muted)}

.exec-state-note{font-size:.78rem;color:var(--muted);margin-top:.2rem}
.exec-state-note.is-waiting{color:#F59E0B}
.exec-state-note.is-blocked,.exec-state-note.is-error{color:#EF4444}
.exec-blocker{font-size:.78rem;margin-top:.15rem;padding:.35rem .55rem;
  border-radius:6px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3)}

/* Executive sigil — ringed, lit in the executive's own accent */
.exec-symbol{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:700;font-size:1.05rem;
  color:var(--accent);
  background:radial-gradient(circle at 32% 28%,
    color-mix(in srgb,var(--accent) 26%,transparent),rgba(0,0,0,.55));
  border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 30%,transparent),
             inset 0 1px 0 rgba(255,255,255,.18)}
.exec-name{font-size:.98rem;font-weight:650;letter-spacing:-.01em}
.exec-title{font-size:.72rem;color:var(--accent);opacity:.95;font-weight:500}
.exec-dept{font-size:.68rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:1px}
.exec-metrics{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.6rem 0 .4rem}
.exec-metric{background:rgba(0,0,0,.28);border:1px solid var(--hairline);
  border-radius:10px;padding:.4rem .55rem}
.exec-metric-label{font-size:.6rem;text-transform:uppercase;letter-spacing:1px;
  color:var(--ink-faint)}
.exec-metric-value{font-family:var(--font-head);font-size:1.05rem;font-weight:650;
  color:var(--ink)}
.exec-progress{height:4px;border-radius:3px;background:rgba(255,255,255,.07);
  overflow:hidden;margin:.45rem 0}
.exec-progress-fill{height:100%;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#fff));
  transition:width var(--t-smooth) var(--ease)}
.exec-flag{margin-top:.5rem;font-size:.7rem;color:#FCE2B4;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);
  border-radius:8px;padding:.3rem .5rem}
.exec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:.85rem}

/* ═══════════════════════════════════════════════════════════════════════
   COMMAND BAR
   ═══════════════════════════════════════════════════════════════════════ */
.mission-bar{padding:1rem 1.15rem;margin-bottom:1rem}
.bar-brand{font-family:var(--font-head);font-weight:700;letter-spacing:.02em;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-dark));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bar-greeting{font-family:var(--font-head);font-size:1.5rem;font-weight:650;
  letter-spacing:-.02em;color:var(--ink)}
.bar-sub{font-size:.82rem;color:var(--ink-soft)}
.bar-alert{margin-top:.7rem;padding:.6rem .8rem;border-radius:var(--r-btn);
  border:1px solid rgba(239,68,68,.6);background:rgba(239,68,68,.12);
  color:#FFD9D9;font-weight:600;font-size:.82rem}
.bar-note{margin-top:.4rem;font-size:.76rem;color:var(--ink-soft)}
.bar-note.critical{color:#FFB4B4}
.mission-live{font-size:.66rem;padding:.24rem .55rem;border-radius:var(--r-pill);
  border:1px solid var(--hairline);color:var(--ink-soft)}

/* ═══════════════════════════════════════════════════════════════════════
   FOUNDER COMMAND SEAT — Richard sits above the wall, visibly
   ═══════════════════════════════════════════════════════════════════════ */
.founder-seat{padding:1.15rem 1.25rem;margin-bottom:1rem;
  border-color:rgba(212,175,55,.34);
  background:linear-gradient(180deg,rgba(212,175,55,.10),rgba(212,175,55,.028))}
.founder-seat::before{background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:1}
.seat-avatar{width:60px;height:60px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:1.5rem;font-weight:700;color:#1A1408;
  background:linear-gradient(160deg,var(--gold-bright),var(--gold) 48%,var(--gold-dark));
  box-shadow:0 0 26px rgba(212,175,55,.42),inset 0 2px 0 rgba(255,255,255,.5)}
.seat-name{font-size:1.32rem;font-weight:700}
.seat-role{font-size:.82rem;color:var(--gold);font-weight:550;letter-spacing:.02em}
.seat-auth{font-size:.74rem;color:var(--ink-faint)}
.voice-facts{display:flex;flex-wrap:wrap;gap:.4rem;margin:.75rem 0 .5rem}
.seat-decisions{margin-top:.75rem;padding-top:.7rem;border-top:1px solid var(--hairline)}

/* ═══════════════════════════════════════════════════════════════════════
   PANELS / DATA
   ═══════════════════════════════════════════════════════════════════════ */
.cc-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:.85rem}
.cc-section{padding:1rem 1.05rem}
.cc-section>h2,.cc-section>h3{margin:0 0 .6rem}
.cc-line{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.42rem 0;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.05)}
.cc-line:last-child{border-bottom:none}
.cc-note{font-size:.76rem;color:var(--ink-faint);line-height:1.5;margin-top:.35rem}
.stat-value{font-family:var(--font-head);font-size:1.05rem;font-weight:650}

/* Honest unavailable state — a first-class visual, not an error */
.unavailable-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1.4rem .9rem;gap:.4rem;
  border:1px dashed rgba(255,255,255,.16);border-radius:var(--r-btn);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 10px,transparent 10px 20px)}
.unavailable-mark{width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--ink-faint);color:var(--ink-faint);
  display:flex;align-items:center;justify-content:center;font-size:1rem}
.unavailable-title{font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.unavailable-why{font-size:.72rem;color:var(--ink-faint);max-width:32ch;line-height:1.5}

/* Radial health gauge — drawn from real measured values only */
.gauge{position:relative;width:132px;height:132px;margin:.3rem auto .5rem}
.gauge svg{transform:rotate(-90deg)}
.gauge-track{stroke:rgba(255,255,255,.08)}
.gauge-fill{stroke-linecap:round;transition:stroke-dashoffset var(--t-slow) var(--ease)}
.gauge-centre{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.gauge-value{font-family:var(--font-head);font-size:1.55rem;font-weight:700}
.gauge-label{font-size:.62rem;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--ink-faint)}

/* Timeline */
.mission-stream{margin-top:1rem}
.timeline-list{padding:.25rem .5rem}
.timeline-row{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;
  align-items:center;padding:.6rem .55rem;font-size:.8rem;
  border-bottom:1px solid rgba(255,255,255,.05);position:relative}
.timeline-row:last-child{border-bottom:none}
.timeline-row.needs-founder{background:rgba(245,158,11,.07);
  box-shadow:inset 2px 0 0 var(--warning)}
.tl-time{color:var(--ink-faint);font-size:.7rem;font-variant-numeric:tabular-nums}
.tl-actor{font-weight:600;color:var(--ink)}
.tl-type{color:var(--ink-soft)}
.tl-detail{color:var(--ink-faint);font-size:.75rem}
.tl-audit{color:var(--ink-faint);font-size:.66rem;font-variant-numeric:tabular-nums}
.tl-flag{color:#FCE2B4;font-size:.7rem}

/* Command console */
.cmd-console{padding:1rem 1.05rem;margin-bottom:1rem}
.cmd-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.cmd-input{flex:1;min-width:200px}
.cmd-output{margin-top:.6rem;font-size:.8rem;color:var(--ink-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Emergency */
.emergency-panel{padding:1.1rem 1.15rem;margin-top:1rem;
  border-color:rgba(239,68,68,.45)}
.emergency-confirm{margin-top:.55rem;padding:.75rem .85rem;
  border:1px solid rgba(239,68,68,.35);border-radius:var(--r-btn);
  background:rgba(239,68,68,.07);width:100%}

/* Focus */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}

/* ═══════════════════════════════════════════════════════════════════════
   COMMAND CENTRE SHELL — full-width desktop layout
   The old 60rem cap suited a document; a command centre needs the wall.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:821px){
  .view,main{max-width:1720px;padding:1.25rem 1.5rem 3rem}
  /* Persistent rail on desktop — no hamburger for the founder's own HQ */
  .sidenav{position:fixed;transform:none;width:var(--sidebar-w);max-width:none;
    border-right:1px solid var(--hairline);
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    padding:.9rem .7rem;overflow-y:auto;box-shadow:none}
  .view,main{margin-left:var(--sidebar-w)}
  .topbar{margin-left:var(--sidebar-w);
    background:rgba(15,17,21,.72);backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:30}
  .topbar .menu-btn{display:none}
  .sidenav .close-btn{display:none}
}
.sidenav a{border-radius:10px;padding:.6rem .7rem;font-size:.85rem;
  color:var(--ink-soft);font-weight:500;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.sidenav a:hover{background:var(--glass);color:var(--gold)}
.sidenav a[aria-current="page"]{background:rgba(212,175,55,.12);color:var(--gold);
  box-shadow:inset 2px 0 0 var(--gold)}

/* ── Command bar as a header band ─────────────────────────────────────── */
.bar-left{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.bar-mid{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:.7rem}
.bar-right{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem}
.bar-search{flex:1;min-width:220px}
@media (min-width:1100px){
  .mission-bar{display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"left right" "mid mid";column-gap:1.25rem;align-items:start}
  .bar-left{grid-area:left}
  .bar-right{grid-area:right;margin-top:0;justify-content:flex-end}
  .bar-mid{grid-area:mid}
  .bar-search{min-width:280px;max-width:380px}
}

/* ── Executive wall: the seven, side by side on a wide screen ─────────── */
@media (min-width:1500px){ .exec-grid{grid-template-columns:repeat(7,1fr)} }
@media (min-width:1100px) and (max-width:1499px){ .exec-grid{grid-template-columns:repeat(4,1fr)} }
.exec-tile{display:flex;flex-direction:column}
.exec-tile .voice-actions{margin-top:auto;padding-top:.65rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.exec-tile .voice-actions .btn{width:100%;text-align:center;font-size:.72rem;
  padding:.45rem .4rem}
.exec-tile .voice-actions .btn:first-child{grid-column:1 / -1}
.exec-head{display:flex;align-items:center;gap:.65rem;margin-bottom:.55rem}

/* ── Panel grid rhythm ────────────────────────────────────────────────── */
@media (min-width:1100px){
  .cc-sections{grid-template-columns:repeat(4,1fr)}
  #panel-health,#panel-connectors{grid-row:span 1}
}
@media (min-width:821px) and (max-width:1099px){
  .cc-sections{grid-template-columns:repeat(2,1fr)}
}

/* ── Founder seat on desktop: seat + decisions side by side ───────────── */
@media (min-width:1100px){
  .founder-seat{display:grid;grid-template-columns:minmax(320px,1fr) 1.4fr;
    column-gap:1.5rem;align-items:start}
  .founder-seat .seat-title{grid-column:1 / -1}
  .founder-seat .seat-head{grid-column:1}
  .founder-seat .voice-facts{grid-column:2;margin-top:0}
  .founder-seat .cc-note{grid-column:2}
  .founder-seat .seat-decisions{grid-column:1 / -1}
}
.seat-head{display:flex;align-items:center;gap:.85rem}

/* ── Timeline reads as a feed on desktop ──────────────────────────────── */
@media (min-width:1100px){
  .timeline-row{grid-template-columns:110px 180px 1fr auto auto}
}

/* ── Executive tile refinements ───────────────────────────────────────── */
/* Seven across needs real width; below that, four reads better than seven
   squeezed. Names must never truncate — an executive whose name is cut off
   looks like a rendering fault. */
@media (min-width:1900px){ .exec-grid{grid-template-columns:repeat(7,1fr)} }
@media (min-width:1280px) and (max-width:1899px){ .exec-grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:821px) and (max-width:1279px){ .exec-grid{grid-template-columns:repeat(3,1fr)} }

.exec-name{overflow-wrap:anywhere;hyphens:none;line-height:1.2}
.exec-title,.exec-dept{overflow-wrap:anywhere;line-height:1.25}
.exec-metric-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exec-metric-value{font-variant-numeric:tabular-nums}
/* Provenance: present, verifiable, but visually quiet */
.exec-prov{font-size:.64rem;color:var(--ink-faint);line-height:1.45;
  margin-top:.35rem;padding-top:.35rem;border-top:1px solid rgba(255,255,255,.05);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.exec-voice{font-size:.64rem;color:var(--ink-faint);margin-top:.2rem}

/* ── Header band: greeting leads, controls follow ─────────────────────── */
.bar-version{font-size:.66rem;color:var(--ink-faint);letter-spacing:1.2px;
  text-transform:uppercase;display:block;margin-bottom:.15rem}
.bar-greeting{display:block;line-height:1.15}
@media (min-width:1100px){ .bar-greeting{font-size:1.75rem} }
.bar-left{display:block}

/* ── Console heading sits with the panels, not above them ─────────────── */
.cmd-console h2{font-family:var(--font-head);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--ink-faint);margin:0 0 .6rem}

/* ── Section label above the wall ─────────────────────────────────────── */
.wall-label{font-size:.68rem;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--ink-faint);font-weight:600;margin:.25rem 0 .6rem}

/* ── Fixes from visual review ─────────────────────────────────────────── */
/* Status pills must hug their text. Stretched full-width they read as an
   empty input field rather than a state indicator. */
.exec-status{display:inline-flex;width:auto;align-self:flex-start;max-width:100%}
.exec-head + .exec-status{margin-bottom:.25rem}

/* Greeting should hold one line on desktop */
@media (min-width:1100px){
  .bar-greeting{font-size:1.6rem;white-space:nowrap}
  .mission-bar{grid-template-columns:minmax(420px,1fr) auto}
}
@media (min-width:1500px){ .bar-greeting{font-size:1.8rem} }

/* Briefing joins the panel grid rather than sitting alone on its own row */
#panel-briefing .cmd-row{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
#panel-briefing .cmd-row .btn{width:100%;text-align:center}

/* Timeline empty state */
.timeline-list .cc-note{padding:.9rem .6rem}

/* ── Navigation rail ──────────────────────────────────────────────────── */
/* Emoji read as playful and inconsistent across platforms. An accent dot
   carries the executive's identity and stays on-brand everywhere. */
.rail-label{font-size:.6rem;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--ink-faint);font-weight:600;margin:.9rem .7rem .3rem;opacity:.75}
.rail-label:first-child{margin-top:.2rem}
.sidenav a{display:flex;align-items:center;gap:.6rem}
.sidenav a em{font-style:normal;font-size:.66rem;color:var(--ink-faint);
  margin-left:auto;letter-spacing:.3px}
.nav-dot{--accent:var(--ink-faint);width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:transform var(--t-fast) var(--ease)}
.nav-dot[data-agent="creed"]{--accent:#D4AF37}
.nav-dot[data-agent="isaiah"]{--accent:#3B82F6}
.nav-dot[data-agent="naya"]{--accent:#A855F7}
.nav-dot[data-agent="jade"]{--accent:#22C55E}
.nav-dot[data-agent="xavier"]{--accent:#F59E0B}
.nav-dot[data-agent="cgo"]{--accent:#14B8A6}
.nav-dot[data-agent="calendar"]{--accent:#EAB308}
.nav-dot[data-agent="podcast"]{--accent:#8B5CF6}
.nav-dot[data-agent="guardian"]{--accent:#EF4444}
.sidenav a:hover .nav-dot{transform:scale(1.35)}
.sidenav hr{display:none}

/* Brand lockup in the top bar */
.topbar .brand{font-family:var(--font-head);font-weight:700;letter-spacing:.06em;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-dark));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE REFINEMENTS
   Chips must flow inline and hug their text. One chip per line wastes the
   phone's most scarce resource and makes a calm system look busy.
   ═══════════════════════════════════════════════════════════════════════ */
.bar-mid,.voice-facts,.bar-right{justify-content:flex-start;text-align:left}
.bar-chip,.voice-fact{width:auto;flex:0 0 auto;display:inline-flex;
  align-items:center;justify-content:flex-start}

@media (max-width:820px){
  .mission-bar,.founder-seat,.cc-section,.cmd-console{padding:.9rem}
  .bar-greeting{font-size:1.35rem;line-height:1.2}
  .bar-mid{gap:.35rem}
  .bar-chip,.voice-fact{font-size:.66rem;padding:.24rem .5rem}
  /* Actions as a grid: two per row, primary action full width */
  .bar-right{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;width:100%}
  .bar-right .btn{width:100%;text-align:center;min-height:44px}
  .bar-right .btn:first-child{grid-column:1 / -1}
  .bar-search{width:100%;min-width:0}
  .seat-head{gap:.7rem}
  .seat-avatar{width:52px;height:52px;font-size:1.3rem}
  .seat-name{font-size:1.15rem}
  .founder-seat .voice-facts{display:flex;flex-wrap:wrap;gap:.35rem}
  .exec-tile .voice-actions{grid-template-columns:1fr 1fr}
  .exec-tile .voice-actions .btn{min-height:44px}
  .cc-sections{gap:.6rem}
  .gauge{width:112px;height:112px}
  #panel-briefing .cmd-row{grid-template-columns:1fr 1fr}
  #panel-briefing .cmd-row .btn{min-height:44px}
  .timeline-row{grid-template-columns:1fr;gap:.2rem;padding:.7rem .55rem}
  .cmd-row{display:grid;grid-template-columns:1fr;gap:.45rem}
  .cmd-row .btn{min-height:44px}
}

/* Mobile bottom nav — glass, with the gold active indicator */
.mobile-nav{background:rgba(15,17,21,.94);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-top:1px solid var(--hairline)}
.mobile-nav a{color:var(--ink-faint);font-weight:500;position:relative;
  transition:color var(--t-fast) var(--ease)}
.mobile-nav a[aria-current="page"]{color:var(--gold)}
.mobile-nav a[aria-current="page"]::before{
  content:"";position:absolute;top:0;left:26%;right:26%;height:2px;
  border-radius:0 0 3px 3px;background:var(--gold);
  box-shadow:0 0 10px rgba(212,175,55,.8)}
.mobile-nav .nav-glyph{font-size:1rem;line-height:1;filter:grayscale(1) opacity(.85)}
.mobile-nav a[aria-current="page"] .nav-glyph{filter:none}

/* Override the pre-redesign mobile rules that stacked chips vertically.
   Chips are compact status indicators — they belong in a flowing row. */
@media (max-width:820px){
  .bar-left{flex-direction:column;align-items:flex-start}
  .bar-mid,.bar-right,.voice-facts,.voice-actions{
    flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start}
  .voice-facts{gap:.35rem}
  .exec-tile .voice-actions{display:grid}
}

@media (max-width:820px){
  /* Search deserves the full row — a truncated placeholder reads as broken. */
  .bar-right .bar-search{grid-column:1 / -1;min-height:44px}
}

/* ═══════════════════════════════════════════════════════════════════════
   APP SHELL — authoritative layout
   Defined once, last, so nothing above competes with it. Everything here is
   structure only: no card-level hacks, no per-panel exceptions.

   Three zones: a fixed proportional rail, a sticky header, and a fluid main
   region that uses whatever viewport remains.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Desktop and large tablet ─────────────────────────────────────────── */
@media (min-width:821px){
  :root{--rail:clamp(200px, 15vw, 264px); --gutter:clamp(1rem, 1.6vw, 2rem)}

  .sidenav{position:fixed;top:0;left:0;height:100dvh;width:var(--rail);
    max-width:none;transform:none;z-index:40;overflow-y:auto;
    padding:.9rem .7rem 1.5rem;
    border-right:1px solid var(--hairline);box-shadow:none;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%)}

  .topbar{position:sticky;top:0;z-index:30;
    margin-left:var(--rail);padding:.7rem var(--gutter);
    background:rgba(15,17,21,.72);border-bottom:1px solid var(--hairline);
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%)}
  .topbar .menu-btn,.sidenav .close-btn{display:none}

  /* The main region takes the full remaining width. No centring, no cap. */
  .view,main{margin-left:var(--rail);margin-right:0;
    width:auto;max-width:none;
    padding:var(--gutter) var(--gutter) 4rem}
}

/* ── Executive wall ───────────────────────────────────────────────────────
   Flex rather than fixed grid columns: cards grow to consume the row, so a
   trailing row of three fills the width instead of leaving a dead cell.
   align-items:stretch keeps every card in a row exactly equal height.        */
@media (min-width:821px){
  .exec-grid{display:flex;flex-wrap:wrap;align-items:stretch;gap:.85rem}
  .exec-tile{flex:1 1 clamp(200px, 15vw, 260px);min-width:0;height:auto}
}
/* Above this width all seven sit on one row comfortably. */
@media (min-width:1780px){
  .exec-tile{flex:1 1 0;min-width:0}
}

/* Equal height is structural, not cosmetic: the card is a column and the
   action group is pinned to its base. */
.exec-tile{display:flex;flex-direction:column}
.exec-tile>.exec-body{flex:1 1 auto;min-height:0}
.exec-tile .voice-actions{margin-top:auto}

/* ── Panel grid ───────────────────────────────────────────────────────────
   auto-fit lets panels claim the width evenly at any viewport without
   hardcoding a column count per breakpoint.                                 */
@media (min-width:821px){
  .cc-sections{display:grid;
    grid-template-columns:repeat(auto-fit,minmax(clamp(260px, 20vw, 330px),1fr));
    align-items:start;gap:.85rem}
}

/* ── Controls stay horizontal wherever there is room ──────────────────── */
@media (min-width:821px){
  .cmd-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
  .cmd-row .btn{width:auto}
  #panel-briefing .cmd-row{display:flex}
  #panel-briefing .cmd-row .btn{width:auto;flex:0 0 auto}
  .exec-tile .voice-actions{display:flex;flex-wrap:wrap;gap:.4rem}
  .exec-tile .voice-actions .btn{flex:1 1 auto;width:auto;min-width:0}
  .bar-right{display:flex;flex-wrap:wrap;gap:.5rem;width:auto}
  .bar-right .btn{width:auto}
}

/* ── Header hierarchy: identity, then state, then actions ─────────────── */
@media (min-width:1100px){
  .mission-bar{display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"left right" "mid mid";
    column-gap:var(--gutter);row-gap:.6rem;align-items:center}
  .bar-left{grid-area:left;min-width:0}
  .bar-right{grid-area:right;justify-content:flex-end;margin-top:0}
  .bar-mid{grid-area:mid;margin-top:0}
  .bar-search{flex:0 1 300px;min-width:180px}
}

/* Nothing may push the page sideways. */
html,body{overflow-x:hidden}
.view,main,.mission-bar,.cc-section,.exec-tile,.founder-seat{min-width:0}

/* The rail is fixed-position and therefore out of flow; the shell reserves its
   width once, here, and nowhere else. */
@media (min-width:821px){
  body.workspace{padding-left:0}
  .sidenav{padding-top:1rem}
}

/* ── Executive wall: equal columns ────────────────────────────────────────
   Flex-grow filled the row but left a trailing card 2.5x the width of its
   siblings, which reads as a rendering fault. Seven is prime, so any count
   other than seven leaves one empty cell — an even grid with a single gap
   looks deliberate, an oversized card does not.                             */
@media (min-width:821px){
  .exec-grid{display:grid;gap:.85rem;align-items:stretch}
  .exec-tile{flex:none;width:auto;height:100%}
}
@media (min-width:1780px){ .exec-grid{grid-template-columns:repeat(7,1fr)} }
@media (min-width:1180px) and (max-width:1779px){ .exec-grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:821px)  and (max-width:1179px){ .exec-grid{grid-template-columns:repeat(3,1fr)} }

/* ── Header: actions hold one row ─────────────────────────────────────── */
@media (min-width:1100px){
  /* Search yields first so the action buttons never wrap to a second line. */
  .bar-search{flex:1 1 180px;min-width:150px;max-width:340px}
  .bar-right{flex-wrap:nowrap;align-items:center}
  .bar-right .btn{white-space:nowrap;flex:0 0 auto}
}
@media (min-width:821px) and (max-width:1099px){
  .bar-right{flex-wrap:wrap}
}

/* ── Command console: no reserved emptiness ───────────────────────────── */
/* An always-present empty output strip reads as a broken panel. It appears
   only once there is something real to show. */
.cmd-output:empty{display:none}
#mission-command-output:empty{display:none}
.cmd-console .cmd-row{margin-bottom:0}

/* ── Executive actions: one row where it fits ─────────────────────────── */
@media (min-width:821px){
  .exec-tile .voice-actions{display:flex;flex-wrap:wrap;gap:.35rem}
  .exec-tile .voice-actions .btn{flex:1 1 auto;min-width:88px;
    padding:.45rem .5rem;font-size:.7rem;white-space:nowrap}
  .exec-tile .voice-actions .btn:first-child{flex:1 1 100%}
}
/* Seven across is tight — stack the actions rather than truncate their labels. */
@media (min-width:1780px){
  .exec-tile .voice-actions .btn{flex:1 1 100%}
}

/* ═══════════════════════════════════════════════════════════════════════
   POLISH LAYER
   The layout is settled; this pass is about intent. Before it, the sheet
   carried 14 ad-hoc spacing values and 12 font sizes — the arithmetic of a
   thing assembled rather than designed. Everything below resolves to one
   4px spacing scale and one type ramp.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Spacing — 4px base. Nothing between these steps. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  /* Type ramp */
  --t-micro:.625rem;   /* 10px — caps labels */
  --t-tiny:.6875rem;   /* 11px — provenance */
  --t-sm:.75rem;       /* 12px — notes, chips */
  --t-body:.8125rem;   /* 13px — body */
  --t-md:.875rem;      /* 14px — emphasis */
  --t-lg:1rem;         /* 16px — card titles */
  --t-xl:1.25rem;      /* 20px — seat name */
  --t-metric:1.375rem; /* 22px — metric values */
  --t-display:1.75rem; /* 28px — greeting */

  /* Layered light: ambient occlusion + a key light from above.
     A single blur reads flat; two reads like a physical object. */
  --e1:0 1px 2px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.28);
  --e2:0 2px 4px rgba(0,0,0,.44), 0 10px 28px rgba(0,0,0,.38);
  --e3:0 4px 8px rgba(0,0,0,.50), 0 24px 56px rgba(0,0,0,.50);
  --lift:0 2px 4px rgba(0,0,0,.40), 0 16px 40px rgba(0,0,0,.46);

  /* Motion — one spring for lifts, one ease for everything else */
  --spring:cubic-bezier(.34,1.4,.5,1);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── Typography ───────────────────────────────────────────────────────── */
body{font-size:var(--t-body);line-height:1.55;letter-spacing:.002em}
h1,h2,h3,h4{line-height:1.18;letter-spacing:-.018em;margin:0}

/* Caps labels: one treatment everywhere they appear */
.seat-title,.panel-title,.wall-label,.rail-label,.exec-dept,
.exec-metric-label,.gauge-label,.bar-version,.cc-section>h3{
  font-size:var(--t-micro);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-faint);line-height:1.4}

/* Numerals must never shift width as they change */
.stat-value,.exec-metric-value,.gauge-value,.tl-time,.tl-audit,
.bar-chip,.voice-fact{font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"cv01" 1}

.exec-name{font-size:var(--t-lg);font-weight:640;line-height:1.25}
.exec-title{font-size:var(--t-sm);font-weight:500;line-height:1.35}
.exec-metric-value{font-family:var(--font-head);font-size:var(--t-metric);
  font-weight:640;line-height:1.1}
.seat-name{font-size:var(--t-xl);font-weight:700;line-height:1.2}
.seat-role{font-size:var(--t-md);font-weight:560}
.seat-auth{font-size:var(--t-sm)}
.cc-line{font-size:var(--t-body)}
.cc-note{font-size:var(--t-sm);line-height:1.6;color:var(--ink-faint)}
.exec-prov{font-size:var(--t-tiny);line-height:1.5}
.exec-voice{font-size:var(--t-tiny)}
.stat-value{font-family:var(--font-head);font-size:var(--t-md);font-weight:640}

/* ── Spacing, applied from the scale ──────────────────────────────────── */
.cc-section,.exec-tile,.cmd-console{padding:var(--s5)}
.founder-seat{padding:var(--s6)}
.mission-bar{padding:var(--s5) var(--s6)}
.cc-sections,.exec-grid{gap:var(--s4)}
.mission-bar,.founder-seat,.cmd-console{margin-bottom:var(--s4)}
.cc-section>h3,.panel-title{margin:0 0 var(--s4)}
.exec-head{gap:var(--s3);margin-bottom:var(--s3)}
.exec-metrics{gap:var(--s2);margin:var(--s3) 0}
.exec-metric{padding:var(--s2) var(--s3)}
.exec-tile .voice-actions{padding-top:var(--s3);gap:var(--s2)}
.cc-line{padding:var(--s2) 0}
.voice-facts{gap:var(--s2)}
.seat-decisions{margin-top:var(--s4);padding-top:var(--s4)}

/* ── Glass, refined ───────────────────────────────────────────────────────
   Real glass catches light on its top edge and sits in shadow at its base.
   A flat border on all four sides is what makes a panel look like a div.   */
.cc-section,.exec-tile,.founder-seat,.mission-bar,.cmd-console,.timeline-list,
.emergency-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.058),rgba(255,255,255,.020) 42%,
                    rgba(255,255,255,.012)),
    rgba(18,21,27,.55);
  border:1px solid rgba(255,255,255,.075);
  border-top-color:rgba(255,255,255,.13);
  border-bottom-color:rgba(0,0,0,.30);
  box-shadow:var(--e1), inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%)}

/* ── Interaction ──────────────────────────────────────────────────────── */
.btn{transition:transform var(--t-fast) var(--spring),
                border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:80ms}

.exec-tile{transition:transform var(--t-normal) var(--spring),
                      border-color var(--t-normal) var(--ease),
                      box-shadow var(--t-normal) var(--ease)}
.exec-tile:hover{transform:translateY(-4px);box-shadow:var(--lift),
  inset 0 1px 0 rgba(255,255,255,.09),
  0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}

/* Focus: visible, on-brand, and never clipped by overflow:hidden */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.exec-tile:focus-within{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.cc-section,.exec-tile,.founder-seat,.mission-bar{overflow:visible}
/* Keep the top hairline clipped to the card's own radius */
.cc-section::before,.exec-tile::before,.founder-seat::before,.mission-bar::before{
  border-radius:var(--r-card) var(--r-card) 0 0}

/* ── Entrance: panels rise rather than pop ────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.exec-tile,.cc-section{animation:rise var(--t-smooth) var(--ease) both}
.exec-tile:nth-child(1),.cc-section:nth-child(1){animation-delay:20ms}
.exec-tile:nth-child(2),.cc-section:nth-child(2){animation-delay:50ms}
.exec-tile:nth-child(3),.cc-section:nth-child(3){animation-delay:80ms}
.exec-tile:nth-child(4),.cc-section:nth-child(4){animation-delay:110ms}
.exec-tile:nth-child(5),.cc-section:nth-child(5){animation-delay:140ms}
.exec-tile:nth-child(6),.cc-section:nth-child(6){animation-delay:170ms}
.exec-tile:nth-child(7),.cc-section:nth-child(7){animation-delay:200ms}
.cc-section:nth-child(n+8){animation-delay:230ms}

/* ── Scroll ───────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);
  border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(212,175,55,.42);background-clip:content-box}

/* ── Reduced motion: nothing moves, everything still arrives ──────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .exec-tile,.cc-section{animation:none}
  .btn:hover,.exec-tile:hover{transform:none}
  /* Genuinely no motion, not merely fast. 1ms is still a transition, and a
     founder who has asked the OS to stop moving should get exactly that. */
  *,*::before,*::after{
    transition-duration:0s !important;
    animation-duration:0s !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important}
}

/* ── Executive card: a fixed internal rhythm ──────────────────────────────
   A two-line job title on one executive was pushing that card's status pill
   and metrics out of alignment with the other six. Cards in a row must agree
   on where each band sits, regardless of how long the text is.             */
.exec-head{align-items:flex-start;min-height:52px}
.exec-id{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}
.exec-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.5em}
.exec-dept{min-height:1.4em}
/* The status band is its own row at a fixed height, so metrics always start
   at the same y across every card. */
.exec-tile>.exec-status{min-height:24px;margin:0 0 var(--s1)}
.exec-metrics{margin-top:0}

/* Body region absorbs the variance; actions stay pinned to the base. */
.exec-tile .exec-body,.exec-tile>.cc-note{min-width:0}

/* ── Header: the search must never truncate its own placeholder ───────── */
@media (min-width:1100px){
  .bar-search{flex:1 1 240px;min-width:210px;max-width:400px}
}
@media (min-width:1400px){
  .bar-search{flex:1 1 300px;min-width:260px}
}

/* The header band is a fixed height, not a minimum. A minimum still lets a
   two-line title push the band 3px taller than its neighbours, and a row of
   cards that disagree by 3px is exactly what reads as unconsidered. */
.exec-head{height:74px;min-height:0;overflow:hidden}
.exec-name{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden}
.exec-id{gap:1px}

/* ═══════════════════════════════════════════════════════════════════════
   FOUNDER PRESENCE
   The seat should read as the top of the hierarchy without shouting. Warmth
   from a gold wash, weight from a heavier border, and a slow ambient pulse
   that says the system is live without implying activity that isn't there.
   ═══════════════════════════════════════════════════════════════════════ */
.founder-seat{
  background:
    radial-gradient(680px 200px at 12% 0%, rgba(212,175,55,.14), transparent 70%),
    linear-gradient(180deg,rgba(212,175,55,.075),rgba(212,175,55,.018)),
    rgba(20,18,12,.55);
  border-color:rgba(212,175,55,.30);
  border-top-color:rgba(212,175,55,.46);
  box-shadow:var(--e2), inset 0 1px 0 rgba(212,175,55,.20)}
.founder-seat::before{
  background:linear-gradient(90deg,transparent,var(--gold) 45%,var(--gold-bright) 50%,
             var(--gold) 55%,transparent);opacity:.95;height:1px}

.seat-avatar{position:relative;
  background:
    radial-gradient(circle at 34% 26%, var(--gold-bright), var(--gold) 46%, var(--gold-dark) 100%);
  box-shadow:0 0 0 1px rgba(212,175,55,.5), 0 0 28px rgba(212,175,55,.30),
             inset 0 2px 3px rgba(255,255,255,.55), inset 0 -3px 6px rgba(120,88,10,.45)}
/* A single slow breath. Ambient presence, not a progress indicator. */
@keyframes seat-breathe{
  0%,100%{box-shadow:0 0 0 1px rgba(212,175,55,.5),0 0 24px rgba(212,175,55,.24),
          inset 0 2px 3px rgba(255,255,255,.55),inset 0 -3px 6px rgba(120,88,10,.45)}
  50%    {box-shadow:0 0 0 1px rgba(212,175,55,.6),0 0 36px rgba(212,175,55,.40),
          inset 0 2px 3px rgba(255,255,255,.55),inset 0 -3px 6px rgba(120,88,10,.45)}}
.seat-avatar{animation:seat-breathe 5.5s var(--ease) infinite}

/* ═══════════════════════════════════════════════════════════════════════
   EXECUTIVE PRESENCE
   ═══════════════════════════════════════════════════════════════════════ */
.exec-symbol{position:relative;
  background:
    radial-gradient(circle at 34% 26%, color-mix(in srgb,var(--accent) 34%,transparent),
                    rgba(0,0,0,.62) 72%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent),
             0 0 16px color-mix(in srgb,var(--accent) 26%,transparent),
             inset 0 1px 0 rgba(255,255,255,.20);
  transition:box-shadow var(--t-normal) var(--ease),
             transform var(--t-normal) var(--spring)}
.exec-tile:hover .exec-symbol{transform:scale(1.06);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent),
             0 0 26px color-mix(in srgb,var(--accent) 45%,transparent),
             inset 0 1px 0 rgba(255,255,255,.28)}

/* A live executive carries a quiet pulse on its status dot. Idle does not —
   motion here would imply work that is not happening. */
@keyframes dot-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.exec-status.st-ok::before{animation:dot-pulse 2.8s var(--ease) infinite}
.exec-status.st-idle::before{animation:none}

/* ═══════════════════════════════════════════════════════════════════════
   VOICE
   ═══════════════════════════════════════════════════════════════════════ */
.voice-fact{transition:border-color var(--t-fast) var(--ease),
                       background var(--t-fast) var(--ease)}
/* Live indicator: the only element permitted to animate continuously, and
   only because the connection genuinely is live. */
.mission-live{position:relative;padding-left:1.15rem}
.mission-live::before{content:"";position:absolute;left:.5rem;top:50%;
  width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--success);
  box-shadow:0 0 8px var(--success);animation:dot-pulse 2.4s var(--ease) infinite}

/* ═══════════════════════════════════════════════════════════════════════
   LOADING — a calm skeleton, never a spinner that implies unknown duration
   ═══════════════════════════════════════════════════════════════════════ */
.hint{color:var(--ink-faint);font-size:var(--t-sm)}
@keyframes shimmer{to{background-position:200% 0}}
.skeleton{border-radius:var(--r-btn);min-height:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.10) 50%,
             rgba(255,255,255,.045) 100%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite}

/* ═══════════════════════════════════════════════════════════════════════
   GAUGE — draws to its real value on first paint
   ═══════════════════════════════════════════════════════════════════════ */
.gauge-fill{filter:drop-shadow(0 0 6px currentColor);
  transition:stroke-dashoffset 900ms var(--ease)}
.gauge::after{content:"";position:absolute;inset:14px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.035),transparent 70%);
  pointer-events:none}

/* ═══════════════════════════════════════════════════════════════════════
   UNAVAILABLE STATE — designed, not apologetic
   ═══════════════════════════════════════════════════════════════════════ */
.unavailable-state{gap:var(--s2);padding:var(--s6) var(--s4);
  border-color:rgba(255,255,255,.11);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.016) 0 8px,transparent 8px 16px)}
.unavailable-mark{width:32px;height:32px;font-size:.9rem;
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.02)}
.unavailable-title{font-size:var(--t-body);font-weight:600;color:var(--ink-soft)}
.unavailable-why{font-size:var(--t-sm);line-height:1.6}

/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION RAIL
   ═══════════════════════════════════════════════════════════════════════ */
.sidenav a{padding:var(--s2) var(--s3);font-size:var(--t-body);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             padding-left var(--t-fast) var(--ease)}
.sidenav a:hover{padding-left:calc(var(--s3) + 3px)}
.sidenav a em{font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase}
.rail-label{margin:var(--s5) var(--s3) var(--s2)}
.rail-label:first-child{margin-top:var(--s2)}

/* Topbar sits on its own plane */
.topbar{box-shadow:0 1px 0 rgba(255,255,255,.045), 0 8px 24px rgba(0,0,0,.30)}

/* Reduced motion: ambient life stops too */
@media (prefers-reduced-motion:reduce){
  .seat-avatar,.exec-status::before,.mission-live::before,.skeleton{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   FOUNDER LOGIN
   The first thing Richard sees. Calm, centred, unmistakably Spartan OS.
   ═══════════════════════════════════════════════════════════════════════ */
body.auth{min-height:100dvh;display:grid;place-items:center;padding:var(--s6);
  background:
    radial-gradient(760px 420px at 50% -8%, rgba(212,175,55,.13), transparent 68%),
    radial-gradient(600px 400px at 50% 108%, rgba(59,130,246,.05), transparent 65%),
    var(--charcoal)}
body.auth .card{
  max-width:400px;width:100%;padding:var(--s7) var(--s6) var(--s6);text-align:center;
  border-radius:var(--r-modal);
  background:linear-gradient(180deg,rgba(255,255,255,.058),rgba(255,255,255,.018) 45%,
             rgba(255,255,255,.010)), rgba(18,21,27,.62);
  border:1px solid rgba(255,255,255,.085);
  border-top-color:rgba(212,175,55,.28);
  box-shadow:var(--e3), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  animation:rise var(--t-slow) var(--ease) both}
.auth-mark{display:block;margin:0 auto var(--s4);border-radius:50%;
  box-shadow:0 0 34px rgba(212,175,55,.30);
  animation:seat-breathe 6s var(--ease) infinite}
body.auth h1{font-family:var(--font-head);font-size:1.5rem;font-weight:700;
  letter-spacing:.10em;margin:0 0 var(--s1);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,var(--gold-dark));
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.auth .tagline{font-size:var(--t-sm);color:var(--ink-faint);
  letter-spacing:.06em;margin:0 0 var(--s6)}
body.auth .btn{width:100%;padding:var(--s3) var(--s4);font-size:var(--t-md)}
body.auth .hint{margin-top:var(--s2);font-size:var(--t-sm)}
body.auth details{margin-top:var(--s5);text-align:left}
body.auth summary{cursor:pointer;font-size:var(--t-body);color:var(--ink-soft);
  padding:var(--s2) 0;list-style:none;text-align:center;
  transition:color var(--t-fast) var(--ease)}
body.auth summary::-webkit-details-marker{display:none}
body.auth summary:hover{color:var(--gold)}
body.auth h2{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-faint);font-weight:600;margin:var(--s5) 0 var(--s2)}
body.auth input{width:100%;padding:var(--s3);font-size:var(--t-md)}
body.auth .stack{gap:var(--s2)}
body.auth .footnote{margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid rgba(255,255,255,.06);
  font-size:var(--t-tiny);color:var(--ink-faint);line-height:1.6}
body.auth .msg{font-size:var(--t-sm);margin-top:var(--s3);min-height:1.2em}
@media (prefers-reduced-motion:reduce){
  body.auth .card,.auth-mark{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   EXECUTIVE OFFICE
   Entering an office should feel like entering that executive's room.
   ═══════════════════════════════════════════════════════════════════════ */
.view[data-agent]{--accent:var(--gold)}
.view[data-agent="creed"]   {--accent:#D4AF37}
.view[data-agent="isaiah"]  {--accent:#3B82F6}
.view[data-agent="naya"]    {--accent:#A855F7}
.view[data-agent="jade"]    {--accent:#22C55E}
.view[data-agent="xavier"]  {--accent:#F59E0B}
.view[data-agent="cgo"]     {--accent:#14B8A6}
.view[data-agent="calendar"]{--accent:#EAB308}
.view[data-agent="podcast"] {--accent:#8B5CF6}
.view[data-agent="guardian"]{--accent:#EF4444}
.view[data-agent="sentinel"]{--accent:#06B6D4}

.office-head{display:flex;align-items:flex-start;gap:var(--s4);
  padding:var(--s5) var(--s6);margin-bottom:var(--s5);
  border-radius:var(--r-card);position:relative;overflow:hidden;
  background:
    radial-gradient(620px 190px at 8% 0%,
      color-mix(in srgb,var(--accent) 16%,transparent), transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),
    rgba(18,21,27,.55);
  border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.07));
  border-top-color:color-mix(in srgb,var(--accent) 42%,transparent);
  box-shadow:var(--e1), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  animation:rise var(--t-smooth) var(--ease) both}
.office-head::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.9}
.office-crest .exec-symbol{width:60px;height:60px;font-size:1.35rem}
.office-ident{min-width:0}
.office-name-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.office-head h1{font-family:var(--font-head);font-size:1.5rem;font-weight:700;
  letter-spacing:-.02em;margin:0}
.office-head .role{font-size:var(--t-md);color:var(--accent);font-weight:540;
  margin:var(--s1) 0 0}
.office-head .hint{margin:var(--s1) 0 0}

/* Office section headings pick up the accent */
.view[data-agent] .card h2,.view[data-agent] .card h3{
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-faint);font-weight:600;margin:0 0 var(--s3)}
.view[data-agent] .card{border-radius:var(--r-card);padding:var(--s5);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016)),
             rgba(18,21,27,.5);
  border:1px solid rgba(255,255,255,.075);
  border-top-color:rgba(255,255,255,.12);
  box-shadow:var(--e1), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%)}
.view[data-agent] .card li{font-size:var(--t-body);line-height:1.65;
  margin-bottom:var(--s1)}
.view[data-agent] .card ul{margin:0;padding-left:1.1rem}

/* Office metric tiles: four across, so nothing is orphaned on its own row */
.view[data-agent] .grid{grid-template-columns:repeat(4,1fr);gap:var(--s4)}
@media (max-width:1100px){ .view[data-agent] .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .view[data-agent] .grid{grid-template-columns:1fr} }
.view[data-agent] .grid .card{text-align:left}
.view[data-agent] .grid .card .num,
.view[data-agent] .grid .card strong{font-family:var(--font-head);
  font-size:var(--t-metric);font-weight:640;font-variant-numeric:tabular-nums}

/* Voice strip inherits the accent */
.view[data-agent] .voice-strip,.view[data-agent] .cc-section{
  border-left:2px solid color-mix(in srgb,var(--accent) 45%,transparent)}