/* CC-1 The Observatory (design docs/SPRINT_CC1_OBSERVATORY_DESIGN.md §2) — CC Phase 3 T3:
   ONE of THREE static files BY LAW (index.html · console.css · console.js): zero-dependency,
   no runtime, no supply chain, served under CSP `style-src 'self'` — every style lives here or
   is set through the CSSOM; no inline style attribute exists (a Rust needle pins 0).
   Deep links ride the location hash: #tab or #logs?container=..&level=..&q=.. */
  :root { --bg:#0C0C0B; --card:#1C1B19; --border:#2E2C28; --accent:#E8930C; --gold:#FFC400;
          --text:#e8e4dc; --dim:#9a938a; --red:#e05252; --green:#4caf7d; --warn:#d9a441; }
  * { box-sizing:border-box; }
  /* House typography (BananaScan globals.css): DM Sans body / Poppins headings —
     system fallbacks only (the zero-dep law forbids a font fetch). Mono is reserved
     for data values, ids and log text. */
  body { margin:0; background:var(--bg); color:var(--text);
         font:14px/1.5 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
         -webkit-font-smoothing:antialiased; }
  h1, h3 { font-family:'Poppins','DM Sans',system-ui,sans-serif; }
  td, .mono { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:12.5px; }
  header { display:flex; align-items:center; gap:14px; padding:10px 16px; flex-wrap:wrap;
           border-bottom:1px solid var(--border); background:var(--card); }
  header h1 { font-size:15px; margin:0; color:var(--gold); letter-spacing:1px; }
  nav { display:flex; gap:6px; flex-wrap:wrap; }
  nav button { background:none; border:1px solid var(--border); color:var(--dim);
               padding:6px 14px; cursor:pointer; font:inherit; border-radius:8px; }
  nav button.on { color:var(--accent); border-color:var(--accent); }
  nav button.int { opacity:.4; cursor:not-allowed; }
  #keybox { margin-left:auto; display:flex; gap:6px; }
  input, select { background:var(--bg); border:1px solid var(--border); color:var(--text);
                  padding:6px 10px; font:inherit; border-radius:8px; }
  button.act { background:var(--accent); border:none; color:#141210; padding:6px 14px;
               cursor:pointer; font:inherit; font-weight:600; border-radius:8px; }
  button.chip { background:none; border:1px solid var(--border); color:var(--dim);
                padding:3px 10px; cursor:pointer; font:inherit; font-size:12px;
                border-radius:8px; }
  button.chip.on { color:var(--accent); border-color:var(--accent); }
  main { padding:16px; max-width:1500px; margin:0 auto; }
  .cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px; }
  .card { background:var(--card); border:1px solid var(--border); padding:12px 14px;
          border-radius:12px; cursor:pointer; }
  .card.static { cursor:default; }
  .card b { color:var(--dim); display:block; margin-bottom:4px; font-size:11px;
            letter-spacing:1.1px; text-transform:uppercase; font-weight:600; }
  .big { font-size:24px; font-weight:600; }
  .ok { color:var(--green); } .bad { color:var(--red); } .wn { color:var(--warn); }
  .dim { color:var(--dim); } .sm { font-size:11.5px; }
  table { width:100%; border-collapse:collapse; margin-top:10px; }
  th, td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--border);
           font-size:13px; vertical-align:top; }
  th { color:var(--dim); font-weight:600; }
  td.msg { white-space:pre-wrap; word-break:break-word; max-width:850px; }
  .lvl-PANIC { color:#fff; background:var(--red); padding:1px 6px; }
  .lvl-ERROR { color:var(--red); } .lvl-WARN { color:var(--warn); } .lvl-INFO { color:var(--dim); }
  .filters { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; align-items:center; }
  /* CC-P1 S2: the escalation banner — three states, BLIND is alarm-coloured and can
     never read as calm (design (S)6.1 F2). */
  #banner { display:none; padding:6px 16px; font-size:12.5px; font-weight:600;
            border-bottom:1px solid var(--border); cursor:pointer; }
  #banner.b-ok { display:block; color:var(--green); }
  #banner.b-open { display:block; color:#141210; background:var(--warn); }
  #banner.b-blind { display:block; color:#fff; background:var(--red); }
  .sev { padding:1px 7px; border-radius:6px; font-size:11px; font-weight:700;
         letter-spacing:.5px; text-transform:uppercase; }
  .sev-critical { background:var(--red); color:#fff; }
  .sev-high { background:var(--warn); color:#141210; }
  .sev-warn { border:1px solid var(--warn); color:var(--warn); }
  .sev-info { border:1px solid var(--border); color:var(--dim); }
  button.ackbtn[disabled] { opacity:.45; cursor:not-allowed; background:none;
            border:1px solid var(--border); color:var(--dim); padding:2px 9px;
            font:inherit; font-size:11.5px; border-radius:7px; }
  #status { padding:4px 16px; color:var(--dim); font-size:12px; }
  section { display:none; } section.on { display:block; }
  .subtabs { display:flex; gap:6px; margin:10px 0; }
  .trend { display:flex; align-items:flex-end; gap:2px; height:32px; margin-top:8px; }
  .trend div { flex:1; background:var(--accent); opacity:.65; border-radius:2px 2px 0 0;
               min-height:2px; }
  .trend div.e { background:var(--red); opacity:.9; }
  .spark { display:flex; align-items:flex-end; gap:2px; height:42px; margin-top:6px; }
  .spark div { flex:1; background:var(--accent); opacity:.75; min-height:2px; }
  .spark div.e { background:var(--red); }
  h3 { color:var(--dim); font-size:12.5px; letter-spacing:1.1px; text-transform:uppercase;
       margin:20px 0 6px; }
  pre { background:#111010; border:1px solid var(--border); padding:8px; overflow-x:auto; }
  /* CC Phase 3 T2 — the Lab tab (composer + ceremony). Classes only: T3 purges every inline style. */
  .lab-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:10px; margin:8px 0; }
  .lab-pane { border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin:8px 0; background:var(--card); }
  .lab-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:4px 0; }
  .lab-group { background:var(--bg); }
  .lab-node { display:inline-block; border-left:2px solid var(--border); margin-left:8px; padding-left:6px; vertical-align:top; }
  .lab-hl { outline:1px solid var(--red); outline-offset:2px; }
  .lab-report ul { margin:4px 0 4px 18px; padding:0; font-size:12px; }
  .lab-report li.ok { color:var(--green); } .lab-report li.dim { color:var(--dim); } .lab-report li.bad { color:var(--red); }
  .lab-cell { border:1px solid var(--border); border-radius:6px; padding:8px 10px; cursor:pointer; font-size:12px; }
  .lab-cell b { color:var(--text); }
  .lab-cell.on { border-color:var(--accent); color:var(--accent); }
  .lab-cell.on b { color:var(--accent); }
  .lab-cell.off { opacity:.5; }
  .lab-cell.na { opacity:.45; cursor:not-allowed; }
  .lab-chip { display:inline-block; margin-left:14px; padding:3px 9px; border:1px solid var(--border); border-radius:8px; }
  .lab-gloss { color:var(--text); margin:2px 0 6px; }
  .lab-cap { font-size:11px; color:var(--dim); margin-left:6px; }
  .lab-mono { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:11.5px; word-break:break-all; }
  .lab-trow { cursor:pointer; }
  details.lab-raw { margin:8px 0; } details.lab-raw summary { cursor:pointer; color:var(--dim); font-size:12px; }
  textarea { background:var(--bg); border:1px solid var(--border); color:var(--text); font:inherit; font-size:12px; padding:5px 8px; border-radius:6px; }
  dialog { background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:10px; max-width:600px; font:inherit; padding:16px 20px; }
  dialog::backdrop { background:rgba(0,0,0,.65); }
  dialog h3 { margin-top:0; }
  /* T3: the classes that replaced the last inline styles + the evidence card */
  .mt10 { margin-top:10px; } .ml8 { margin-left:8px; } .acc { color:var(--accent); }
  [hidden] { display:none !important; }
  .lab-ev > div { margin:6px 0; }
  .lab-ev-primary { padding:8px 10px; border-left:3px solid var(--accent); background:var(--bg); border-radius:0 6px 6px 0; }
  .lab-strip svg { display:block; max-width:100%; background:var(--bg); border:1px solid var(--border); border-radius:4px; }
  .chip-static { display:inline-block; padding:1px 7px; border:1px solid var(--border); border-radius:6px; font-size:11px; color:var(--dim); }
  .chip-static.bad { color:var(--red); border-color:var(--red); } .chip-static.wn { color:var(--warn); border-color:var(--warn); }