/* Ops Deck — the Observatory, instrument-panel edition. Same palette as
   clarityatlas.app; design approved from ops/mockup.html 2026-08-13. */
:root {
  --bg:#0f1115; --panel:#14171d; --panel2:#1a1e26; --line:#2a2f3a;
  --ink:#f7f7f5; --muted:#9aa1ac; --dim:#6b7280;
  --gold:#c8a15a; --gold-deep:#8a6e33; --cream:#f3edde;
  --ok:#7fb069; --warn:#e0b341; --bad:#ef6b6b;
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  background:var(--bg); color:var(--ink);
  font:14px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
  background-image:
    radial-gradient(1px 1px at 12% 20%, rgba(200,161,90,.35) 0, transparent 100%),
    radial-gradient(1px 1px at 78% 12%, rgba(247,247,245,.25) 0, transparent 100%),
    radial-gradient(1px 1px at 35% 68%, rgba(247,247,245,.18) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 55%, rgba(200,161,90,.3) 0, transparent 100%),
    radial-gradient(1px 1px at 55% 35%, rgba(247,247,245,.2) 0, transparent 100%),
    radial-gradient(1px 1px at 22% 88%, rgba(247,247,245,.22) 0, transparent 100%);
  min-height:100vh; padding:28px clamp(16px,4vw,48px) 64px;
}

/* Key gate */
#gate { display:flex; align-items:center; justify-content:center; min-height:80vh; }
.gatecard { background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:36px 32px; max-width:420px; width:100%; text-align:center; }
.gatecard h1 { font-family:Georgia,serif; color:var(--gold); letter-spacing:.1em; margin-bottom:8px; }
.gatecard p { color:var(--muted); font-size:13px; margin-bottom:18px; }
.gatecard input { width:100%; padding:12px 14px; font-size:15px; color:var(--ink);
  background:var(--panel2); border:1px solid var(--line); border-radius:9px; margin-bottom:12px; }
.gatecard input:focus { outline:2px solid var(--gold-deep); }
button.gold { width:100%; background:var(--gold); color:#1a1408; border:none; font-weight:600;
  font-size:15px; padding:12px; border-radius:9px; cursor:pointer; }
button.gold:hover { background:#d8b26b; }
.gateerr { color:var(--bad); min-height:1.2em; margin-top:10px; }

/* Top bar */
header.top { display:flex; align-items:baseline; gap:14px; margin-bottom:6px; flex-wrap:wrap; }
header.top h1 { font-family:Georgia,serif; font-size:24px; letter-spacing:.06em; color:var(--gold); font-weight:600; }
.stamp { color:var(--dim); font-size:12px; }
.spacer { flex:1; }
button.ghost { background:transparent; color:var(--muted); border:1px solid var(--line);
  padding:6px 14px; border-radius:8px; cursor:pointer; font-size:12.5px; }
button.ghost:hover { color:var(--gold); border-color:var(--gold-deep); }

/* Grid + cards */
.grid { display:grid; gap:16px; grid-template-columns:repeat(12,1fr); margin-top:18px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.card h2 { font-family:Georgia,serif; font-size:15px; color:var(--cream); letter-spacing:.08em;
  text-transform:uppercase; font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.card h2 .dot { width:7px; height:7px; border-radius:50%; background:var(--gold); display:inline-block; }
.span12{grid-column:span 12} .span7{grid-column:span 7} .span5{grid-column:span 5} .span4{grid-column:span 4}
@media (max-width:980px){ .grid>*{grid-column:span 12 !important} }

/* Runway strip */
.runway { display:flex; flex-wrap:wrap; }
.runway .big { flex:1 1 180px; padding:6px 22px; border-right:1px solid var(--line); }
.runway .big:last-child { border-right:none; }
.kpi-label { color:var(--muted); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; }
.kpi { font-family:Georgia,serif; font-size:34px; margin-top:2px; }
.kpi small { font-size:15px; color:var(--muted); font-family:system-ui,sans-serif; }
.kpi.gold{color:var(--gold)} .kpi.bad{color:var(--bad)} .kpi.ok{color:var(--ok)}
.kpi-sub { color:var(--dim); font-size:12px; margin-top:2px; }

/* Brief */
.brief p { margin-bottom:10px; }
.brief .when { color:var(--dim); font-size:12px; margin-bottom:10px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px; }
.chip { font-size:12px; padding:3px 12px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.chip.warn { border-color:var(--warn); color:var(--warn); }
.chip.ok { border-color:var(--ok); color:var(--ok); }
.chip.bad { border-color:var(--bad); color:var(--bad); }
.recs { border-top:1px solid var(--line); padding-top:12px; }
.recs li { list-style:none; padding-left:20px; position:relative; margin-bottom:8px; }
.recs li::before { content:"→"; position:absolute; left:0; color:var(--gold); }

/* Tables, themes, badges */
.rows { width:100%; border-collapse:collapse; }
.rows td { padding:7px 4px; border-top:1px solid var(--line); font-size:13px; vertical-align:top; }
.rows tr:first-child td { border-top:none; }
.rows .k { color:var(--muted); white-space:nowrap; padding-right:14px; }
.badge { font-size:11px; padding:2px 9px; border-radius:6px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.badge.live { border-color:var(--ok); color:var(--ok); }
.badge.review { border-color:var(--warn); color:var(--warn); }
.badge.q { border-color:var(--gold-deep); color:var(--gold); }
.theme { display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid var(--line); font-size:13px; }
.theme:first-of-type { border-top:none; }
.theme .n { color:var(--gold); font-family:Georgia,serif; }

/* Sparklines + meters */
.spark { width:100%; height:44px; margin-top:6px; }
.spark polyline { fill:none; stroke:var(--gold); stroke-width:2; }
.spark .area { fill:rgba(200,161,90,.12); stroke:none; }
.meters { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:8px 24px; }
.meter { height:8px; background:var(--panel2); border-radius:99px; overflow:hidden; margin:6px 0 2px; }
.meter i { display:block; height:100%; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); border-radius:99px; }
.meter i.hot { background:linear-gradient(90deg,#8a4a33,var(--bad)); }
.meter-row { margin-bottom:10px; }
.meter-row .lab { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }

/* Quick links */
.links { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.links a { color:var(--gold); text-decoration:none; font-size:12.5px; border:1px solid var(--line);
  padding:6px 14px; border-radius:8px; }
.links a:hover { border-color:var(--gold-deep); background:rgba(200,161,90,.07); }

.empty { color:var(--dim); font-style:italic; }
[hidden] { display:none !important; }
footer { margin-top:28px; color:var(--dim); font-size:11.5px; text-align:center; }