/* ════════════════════════════════════════════════════════════════════════════
   oscar-webtui.css — WebTUI COMPONENT-GRAMMAR shell for the SleepPi Evidence
   screen + a btop-style Status console.  PROTOTYPE / SAMPLE only.
   ----------------------------------------------------------------------------
   STRUCTURAL rebuild (supersedes the earlier theme-only port, commit 5476614).
   The chrome is expressed as WebTUI-style ATTRIBUTE components — box-/shear-/is-/
   variant-/state-/tone-/divide- — not class-skinned OSCAR. Uses CSS @layer like
   WebTUI, and bridges WebTUI theme vars (--background0..3 / --foreground0..2) to
   the SleepPi palette so real @webtui/css could later drop in.
   The graph engine (oscar-webtui.js) reads the SAME signal/grid CSS variables, so
   graph geometry is untouched; the lane wrappers are hosted in is-="graph-panel"
   component panels. Class-based rules below are ONLY the graph-engine internals
   (SVG plot, cursor, brush, markers) — deliberately not "chrome".
   ════════════════════════════════════════════════════════════════════════════ */

@layer base, utils, components;

@layer base {
  /* Palette/token definitions moved to sleeppi-tokens.css (defaults + engine-glue
     aliases) and sleeppi-themes.css (per-theme). Components below read the same
     var names (--bg, --panel, --c-flow, --ev-*, ...) which now alias to --sp-*
     tokens, so switching data-webtui-theme re-themes everything, graphs included.
     --box-rounded-radius kept here (non-colour). */
  :root { --box-rounded-radius: 4px; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: var(--font-size, 13px); }
  body { background: var(--bg); color: var(--text-sec); font-family: var(--ui); -webkit-font-smoothing: antialiased; padding: 8px; }
  a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; }
}

@layer utils {
  /* ── box-="square|round|double" bordered panel + shear-="top" title tab ────── */
  [box-] { border: 1px solid var(--box-border-color); background: var(--background1); position: relative; border-radius: 0; }
  [box-~="round"] { border-radius: var(--box-rounded-radius); }
  [box-~="double"] { box-shadow: 0 0 0 1px var(--background0), 0 0 0 2px var(--box-border-color); }
  [box-~="flush"] { background: var(--background0); }
  [shear-~="top"] { margin-top: 8px; }
  [shear-~="top"] > [is-~="title"] {
    position: absolute; top: 0; left: 12px; transform: translateY(-50%);
    background: var(--background1); padding: 0 7px; font-size: 10.5px; color: var(--accent);
    letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  }
  [box-~="flush"][shear-~="top"] > [is-~="title"] { background: var(--background0); }
  [box-~="double"][shear-~="top"] > [is-~="title"] { background: var(--bg); color: var(--text); font-weight: 700; }

  /* app layout primitives (component roles, not OSCAR classes) */
  [is-~="app-frame"] { padding: 10px 12px 12px; }
  [is-~="split"] { display: grid; grid-template-columns: 244px 1fr 300px; gap: 10px; align-items: start; margin-top: 8px; }
  [is-~="sidebar"] { min-width: 0; }
  [is-~="main"] { min-width: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
  [is-~="graphs"] { position: relative; padding: 6px 10px 10px; overflow-y: auto; min-width: 0; }
  [is-~="inspector"] { min-width: 0; align-self: stretch; }
  .row { display: flex; align-items: center; gap: 8px; } .grow { flex: 1; } .push { margin-left: auto; }
  .mut { color: var(--text-dim); } .good { color: var(--ok); } .warn { color: var(--warn); } .crit { color: var(--crit); }
}

@layer components {
  /* panel body + title */
  [is-~="panel"] { padding: 0; }
  [is-~="panel"] > .body { padding: 7px 9px; }
  [is-~="title"] { display: inline-block; }

  /* ── dense table (divide-="horizontal|both") ──────────────────────────────── */
  [is-~="dense-table"] { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  [is-~="dense-table"] td, [is-~="dense-table"] th { padding: 2px 4px; }
  [is-~="dense-table"] th { text-align: left; color: var(--text-dim); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border); }
  [is-~="dense-table"] td.k, [is-~="dense-table"] td:first-child { color: var(--text-mut); }
  [is-~="dense-table"] td.v, [is-~="dense-table"] td:last-child { text-align: right; color: var(--text); }
  [divide-~="horizontal"] tr + tr td { border-top: 1px solid var(--border-dim); }
  [divide-~="both"] td + td { border-left: 1px solid var(--border-dim); }
  [is-~="dense-table"] td.v .good, [is-~="dense-table"] .good { color: var(--ok); }
  [is-~="dense-table"] td.v .warn, [is-~="dense-table"] .warn { color: var(--warn); }
  [is-~="dense-table"] .kn { color: var(--accent); font-size: 9.5px; }

  /* process table (btop-style, left-aligned values) */
  [is-~="process-table"] { width: 100%; border-collapse: collapse; font-size: 11px; }
  [is-~="process-table"] th { text-align: left; color: var(--text-dim); font-weight: 600; padding: 3px 6px; border-bottom: 1px solid var(--border); font-size: 10px; text-transform: uppercase; }
  [is-~="process-table"] td { padding: 3px 6px; border-bottom: 1px solid var(--border-dim); color: var(--text-sec); }
  [is-~="process-table"] td.st-ok { color: var(--ok); } [is-~="process-table"] td.st-warn { color: var(--warn); }
  [is-~="process-table"] td.st-crit { color: var(--crit); } [is-~="process-table"] td.st-idle { color: var(--idle); }
  .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }
  .dot-ok { background: var(--ok); } .dot-warn { background: var(--warn); } .dot-crit { background: var(--crit); } .dot-idle { background: var(--idle); }

  /* ── badge / pill (tone-=) ────────────────────────────────────────────────── */
  [is-~="badge"] { display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--border); border-radius: 3px; padding: 0 5px; color: var(--text-dim); }
  [is-~="badge"][tone-~="sample"] { color: var(--sp-status-warn); border-color: color-mix(in srgb, var(--sp-status-warn) 45%, transparent); background: color-mix(in srgb, var(--sp-status-warn) 10%, transparent); }
  [is-~="badge"][tone-~="proxy"] { color: var(--sp-experimental-badge); border-color: color-mix(in srgb, var(--sp-experimental-badge) 45%, transparent); background: color-mix(in srgb, var(--sp-experimental-badge) 10%, transparent); }
  [is-~="badge"][tone-~="sleeppi"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
  [is-~="badge"][tone-~="canon"] { color: var(--sp-status-ok); border-color: color-mix(in srgb, var(--sp-status-ok) 40%, transparent); }
  [is-~="badge"][tone-~="audit"] { color: var(--sp-audit-only-badge); }
  [is-~="pill"] { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 10px; padding: 1px 9px; font-size: 10.5px; color: var(--text-mut); }
  [is-~="pill"][state-~="ok"] { color: var(--text-sec); }
  [is-~="pill"][state-~="warn"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
  [is-~="pill"][state-~="idle"] { color: var(--sp-absent-o2-neutral); border-style: dashed; }

  /* ── meter / progress row ─────────────────────────────────────────────────── */
  [is-~="meter"] { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 2px 0; }
  [is-~="meter"] .lbl { color: var(--text-mut); width: 104px; }
  [is-~="meter"] .bar { flex: 1; height: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
  [is-~="meter"] .bar > i { display: block; height: 100%; background: var(--ok); }
  [is-~="meter"] .bar > i[tone-~="acc"] { background: var(--accent); }
  [is-~="meter"] .bar > i[tone-~="warn"] { background: var(--warn); }
  [is-~="meter"] .pct { color: var(--text); width: 52px; text-align: right; }

  /* ── status bar / footer ──────────────────────────────────────────────────── */
  [is-~="status-bar"] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 5px 10px; font-size: 11.5px; color: var(--text-mut); }
  [is-~="status-bar"] b { color: var(--text); }
  [is-~="status-footer"] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 5px 10px; font-size: 11px; color: var(--text-dim); margin-top: 8px; }
  [is-~="status-footer"] .key, [is-~="status-bar"] .key { color: var(--accent); }
  .lamp { display: inline-flex; align-items: center; gap: 5px; }
  .lamp .dot { width: 8px; height: 8px; margin: 0; }
  .lamp .dot-ok { box-shadow: 0 0 5px color-mix(in srgb, var(--sp-status-ok) calc(var(--sp-glow-strength, 0.5) * 100%), transparent); }

  /* ── toolbar / button / menu / chip / legend ──────────────────────────────── */
  [is-~="toolbar"] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 0 6px; position: relative; }
  [is-~="button"] { border: 1px solid var(--border); background: var(--panel); border-radius: 3px; padding: 2px 9px; font-size: 11px; color: var(--text-mut); cursor: pointer; font-family: var(--ui); }
  [is-~="button"]:hover { border-color: var(--accent); color: var(--link); }
  [is-~="button"].on { background: var(--sel); border-color: var(--sel-border); color: var(--text); }
  [is-~="toolbar"] .tool-note { color: var(--text-dim); font-size: 10px; margin-left: auto; }
  [is-~="menu"] { position: absolute; top: 26px; left: 0; z-index: 10; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.5); padding: 6px 10px; display: grid; gap: 3px; }
  [is-~="menu"][hidden] { display: none; }
  [is-~="menu"] label { font-size: 11px; color: var(--text-sec); display: flex; gap: 6px; align-items: center; white-space: nowrap; cursor: pointer; }
  [is-~="chip"] { font-size: 10.5px; border: 1px solid var(--border); background: var(--panel); border-radius: 3px; padding: 2px 8px; cursor: pointer; color: var(--text-mut); font-family: var(--ui); text-align: left; }
  [is-~="chip"]:hover { border-color: var(--accent); color: var(--text); }
  [is-~="chip"].active { background: var(--sel); border-color: var(--sel-border); color: var(--text); font-weight: 600; }
  [is-~="chip"][tone-~="warn"] { color: var(--warn); }
  [is-~="legend"] { display: flex; flex-wrap: wrap; gap: 10px; font-size: 10.5px; color: var(--text-mut); padding: 3px 4px 6px; }
  [is-~="legend"] i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

  /* ── graph panel (hosts a clinical lane; box-="square" is-="graph-panel") ──── */
  [is-~="graph-panel"] { padding: 0; overflow: hidden; margin-bottom: 6px; background: var(--panel); }
  [is-~="graph-panel"] > [is-~="title-bar"] { display: flex; align-items: center; background: var(--head); border-bottom: 1px solid var(--border-lt); padding: 2px 8px; font-size: 11px; position: static; }
  [is-~="graph-panel"] > [is-~="title-bar"] > [is-~="title"] { position: static; transform: none; background: none; padding: 0; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; font-size: 11px; }
  [is-~="graph-panel"].sp-lane > [is-~="title-bar"] { background: linear-gradient(color-mix(in srgb, var(--accent) 16%, var(--head)), var(--head)); }
  [is-~="graph-panel"].lane-hot { outline: 2px solid var(--sel-border); outline-offset: -1px; }
  [is-~="graph-panel"].lane-dim { opacity: .34; }
  [is-~="graph-panel"].pinned { position: sticky; top: 0; z-index: 4; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
}

/* ════════════════════════════════════════════════════════════════════════════
   GRAPH-ENGINE INTERNALS (class-based) — deliberately NOT chrome. These style the
   SVG plot + interaction overlays the engine draws; geometry comes from the JS.
   ════════════════════════════════════════════════════════════════════════════ */
.graph { margin: 0; }                 /* border/bg now come from [box-]/[is-~="graph-panel"] */

/* ── lane-height policy (Part A) ──────────────────────────────────────────────
   Two tiers only. Every continuous chart lane shares ONE plotting-area height so
   the stack reads as a consistent grid; only the two non-chart lanes are compact.
   The engine reads these tokens (laneSpecs) to set each SVG plot height, so the
   SVG height and the lane container height always agree. Headers / min-med-max
   labels live in the fixed-height title bar and never change the plot height;
   unavailable (O₂ not worn) lanes keep the standard height with a neutral state. */
:root { --sp-lane-height-standard: 96px; --sp-lane-height-compact: 32px; }  /* OSCAR density default; JS density control overrides */
.graph.lane--standard > .graph-plot { min-height: var(--sp-lane-height-standard); }
.graph.lane--compact  > .graph-plot { min-height: var(--sp-lane-height-compact); }
.graph-title .res-pill { margin-left: 8px; font-size: 9.5px; padding: 0 4px; border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text);
  border: 1px solid var(--border-lt); letter-spacing: .02em; }
.graph-title .res-pill.res-detail { background: color-mix(in srgb, var(--good) 26%, transparent); }
.graph-title .res-pill.res-yaxis { background: color-mix(in srgb, var(--text-mut) 20%, transparent); color: var(--text-dim); }

/* ── surface separation (unlayered → overrides the @layer utils [box-] default).
      Tokens default to prior values, so only themes that override the surface
      tokens (claude-light-clinical) change; layout is untouched. ─────────────── */
[is-~="app-frame"] { background: var(--sp-page-bg); }        /* the CANVAS — panels lift off this */
[is-~="main"] { background: var(--sp-graph-bg); }            /* graph CONTAINER surface */
[is-~="inspector"][box-] { background: var(--sp-inspector-bg); }
[is-~="sidebar"] { background: var(--sp-rail-bg); border-radius: 5px; }
[is-~="sidebar"] [box-], [is-~="inspector"][box-], [is-~="main"] { box-shadow: var(--sp-shadow-subtle, none); }
[is-~="graph-panel"] { background: var(--sp-graph-lane-bg); }
[is-~="graph-panel"] > [is-~="title-bar"] { background: var(--sp-graph-lane-header-bg); }
.graph-title .name { font-weight: 600; color: var(--text); }
.graph-title .unit { color: var(--text-dim); margin-left: 6px; }
.graph-title .stats { margin-left: auto; color: var(--text-mut); } .graph-title .stats b { color: var(--text); }
.gctl { display: inline-flex; gap: 1px; margin-left: 8px; }
.gctl button { border: 1px solid transparent; background: transparent; color: var(--text-dim); font-size: 10px; line-height: 1; padding: 1px 3px; border-radius: 3px; cursor: pointer; font-family: var(--ui); }
.gctl button:hover { border-color: var(--border); color: var(--text); background: var(--bg2); }
.graph.pinned .gctl button[data-act="pin"] { color: var(--accent); }
.graph-plot { display: block; width: 100%; background: var(--panel); }
.osc-timeaxis { font-size: 10px; }
.pulse-spike { transition: transform .1s; }
.osc-graphs.show-links .pulse-spike { stroke: #fff; stroke-width: 1; }
.osc-graphs.show-links .flag-rera, .osc-graphs.show-links .pulse-spike { filter: drop-shadow(0 0 3px rgba(143,212,106,.9)); }
.osc-cursor { position: absolute; display: none; width: 1px; background: var(--sp-graph-cursor); pointer-events: none; z-index: 5; }
.osc-cursor .tip { position: absolute; top: 2px; left: 3px; background: var(--sp-graph-cursor); color: var(--sp-page-bg); font-size: 10px; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.osc-window { position: absolute; display: none; background: var(--sp-graph-window-highlight); border-left: 1px solid var(--sel-border); border-right: 1px solid var(--sel-border); pointer-events: none; z-index: 3; }
.osc-brush { position: absolute; display: none; background: color-mix(in srgb, var(--sp-graph-selection) 24%, transparent); border: 1px solid var(--sel-border); pointer-events: none; z-index: 4; }
.sp-tag { margin-left: 6px; font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 3px; padding: 0 4px; }

/* overview charts (engine ovChart uses .ov-chart / .graph-title) */
.ov-controls { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 12px; color: var(--text-mut); margin-bottom: 8px; }
.ov-controls select { border: 1px solid var(--border); background: var(--panel); border-radius: 3px; padding: 2px 8px; font-size: 12px; color: var(--text); font-family: var(--ui); }
.ov-chart { border: 1px solid var(--border-lt); border-radius: 3px; margin-bottom: 6px; background: var(--panel); overflow: hidden; }
.ov-chart .graph-title { display: flex; align-items: center; background: var(--head); border-bottom: 1px solid var(--border-lt); padding: 2px 8px; font-size: 11px; }
.ov-note { color: var(--text-dim); font-size: 10.5px; margin-top: 6px; }

/* calendar (engine-generated, inside a component panel) */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-head .mlabel { font-weight: 600; font-size: 12px; color: var(--text); }
.cal-head button { width: 20px; height: 20px; border: 1px solid var(--border); background: var(--bg2); border-radius: 3px; cursor: pointer; color: var(--text-dim); font-family: var(--ui); }
.cal-head button:hover { border-color: var(--accent); color: var(--accent); }
.cal-head button:disabled { opacity: .35; cursor: default; border-color: var(--border); color: var(--text-dim); }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.cal-grid .dow { font-size: 9.5px; color: var(--text-dim); text-align: center; }
.cal-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 10.5px; border-radius: 3px; color: var(--text-dim); position: relative; }
.cal-cell.has { color: var(--text-sec); cursor: pointer; }
.cal-cell.has::after { content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; }
.cal-cell.good::after { background: var(--ok); } .cal-cell.warn::after { background: var(--warn); } .cal-cell.crit::after { background: var(--crit); }
.cal-cell.sel { background: var(--sel); outline: 1px solid var(--sel-border); color: var(--text); font-weight: 700; }
.cal-cell.muted { color: color-mix(in srgb, var(--text-muted) 45%, transparent); }
.sess-row { display: flex; justify-content: space-between; font-size: 11.5px; padding: 2px 0; color: var(--text-sec); }
.sess-row + .sess-row { border-top: 1px solid var(--border-dim); }
.sess-row .dur { color: var(--text-dim); }
.audit { margin-top: 6px; } .audit summary { font-size: 10.5px; color: var(--text-dim); cursor: pointer; }
.audit .audit-body { font-size: 10.5px; color: var(--text-dim); padding: 4px 0 0 8px; }

/* datebar + summary (engine fills #sumBoxes / #dateLabel) */
.osc-datebar { display: flex; align-items: center; gap: 10px; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 6px 10px; }
.osc-datebar .nav a, .osc-datebar .nav button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid var(--border); background: var(--panel); border-radius: 3px; width: 24px; height: 22px; cursor: pointer; color: var(--text-dim); font-family: var(--ui); text-decoration: none; }
.osc-datebar .nav a:hover { border-color: var(--accent); color: var(--text); }
/* Boundary nights have no prev/next — render as a muted, non-clickable disabled button. */
.osc-datebar .nav button:disabled { cursor: not-allowed; opacity: .35; color: var(--text-mut); }
.osc-datebar .date { font-size: 14px; font-weight: 700; color: var(--text); }
.osc-datebar .spacer { flex: 1; }
.osc-summary { display: flex; }
.sumbox { padding: 2px 12px; border-left: 1px solid var(--border-dim); text-align: center; }
.sumbox .lbl { font-size: 9.5px; text-transform: uppercase; color: var(--text-dim); }
.sumbox .val { font-size: 14px; font-weight: 700; color: var(--text); } .sumbox .val.good { color: var(--ok); }
.sumbox .val.warn { color: var(--warn); } .sumbox .val.crit { color: var(--crit); }
.sess-note { font-size: 9.5px; line-height: 1.3; padding: 3px 2px 0; }

/* interpretation strip (engine fills #sleeppiRead; clauses are is-="chip") */
.sleeppi-read { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding: 5px 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); border-bottom: 1px solid var(--border); font-size: 11.5px; }
.sleeppi-read .rd-label { font-weight: 700; color: var(--ok); } .sleeppi-read .rd-label::before { content: "$ "; color: var(--text-dim); }
.sleeppi-read .rd-sep { color: var(--text-dim); } .sleeppi-read .rd-foot { margin-left: auto; color: var(--text-dim); font-size: 10px; font-style: italic; }
.rd-clause.active { background: var(--sel); border-color: var(--sel-border); color: var(--text); font-weight: 600; }

/* inspector internals */
.insp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.insp-title { font-weight: 700; font-size: 12px; margin-bottom: 6px; color: var(--text); }
.insp-clear { margin-left: auto; font-size: 10px; padding: 1px 7px; border-radius: 3px; cursor: pointer;
  color: var(--text-dim); background: transparent; border: 1px solid var(--border); align-self: center; }
.insp-clear:hover:not(:disabled) { color: var(--text); border-color: var(--border-lt); background: var(--bg2); }
.insp-clear:disabled { opacity: .38; cursor: default; }
.insp-empty { color: var(--text-dim); font-size: 11.5px; line-height: 1.5; padding: 6px 2px; }
.insp-empty-sub { display: block; margin-top: 5px; color: var(--text-mut); font-size: 10.5px; }
.osc-inspector .body, [is-~="inspector"] > .body { padding: 7px 9px; }
[is-~="inspector"] .kv td { padding: 3px 2px; vertical-align: top; }
[is-~="inspector"] .kv td.k { width: 92px; }
[is-~="inspector"] .kv td.v.warn { color: var(--warn); } [is-~="inspector"] .kv td.v.mut { color: var(--text-dim); }
.insp-trace { margin-top: 8px; color: var(--link); font-size: 10.5px; }

/* structured event evidence (deterministic /event-evidence payload, 2026-07-08) */
.ev-detect { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; font-size: 10.5px; }
.ev-rule-main { font-size: 10.5px; line-height: 1.45; margin-bottom: 6px; }
[is-~="inspector"] .kv.ev-bda td.k { width: 74px; }
[is-~="inspector"] .kv.ev-bda td.v { text-align: right; }
.ev-cors { margin-top: 8px; }
.ev-cor { font-size: 10.5px; line-height: 1.45; padding: 3px 0; border-top: 1px dotted var(--grid); }
.ev-cor.warn b { color: var(--warn); }
.ev-cor .ev-rule { display: block; font-size: 10px; }
.ev-cav { margin-top: 8px; }
.mut { color: var(--text-dim); }

/* ── STATUS page (btop console) ───────────────────────────────────────────────── */
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.st-span2 { grid-column: span 2; }
.st-map { font-size: 11px; line-height: 1.5; white-space: pre; overflow-x: auto; color: var(--text-mut); margin: 0; }
.st-map .ok { color: var(--ok); } .st-map .warn { color: var(--warn); } .st-map .crit { color: var(--crit); } .st-map .idle { color: var(--idle); } .st-map .svc { color: var(--text-dim); }
.st-log { font-size: 10.5px; line-height: 1.55; color: var(--text-mut); max-height: 172px; overflow-y: auto; }
.st-log .t { color: var(--text-dim); } .st-log .lvl-ok { color: var(--ok); } .st-log .lvl-info { color: var(--c-spo2); } .st-log .lvl-warn { color: var(--warn); } .st-log .lvl-note { color: var(--text-dim); } .st-log .lvl-error { color: var(--crit); }

/* ── status ops console: layout + severity + equipment (token-based) ────────── */
/* two independent vertical stacks — each column fills naturally (no row-alignment,
   no forced full-width bottom rows) so short panels never open a dead zone. */
.ops-columns { --ops-gap: 10px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(420px, 0.95fr); gap: var(--ops-gap); align-items: start; }
.ops-stack { display: flex; flex-direction: column; gap: var(--ops-gap); min-width: 0; }
.ops-activity .st-log { max-height: 232px; }
.st-rail { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.st-rail .kpi { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11.5px; color: var(--text-mut); }
.st-rail .kpi b { color: var(--text); font-size: 13px; }
.st-rail .kpi .n-warn { color: var(--warn); } .st-rail .kpi .n-err { color: var(--crit); } .st-rail .kpi .n-ok { color: var(--ok); } .st-rail .kpi .n-mut { color: var(--sp-absent-o2-neutral); }

/* single clean header: overall state in the frame title + a low-weight generated stamp */
.hdr-state { text-transform: none; }
.hdr-state.n-ok { color: var(--ok); } .hdr-state.n-warn { color: var(--warn); } .hdr-state.n-err { color: var(--crit); }
.hdr-gen { color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; }

/* severity dot + tag — separates pipeline-failure / data-warning / not-worn / audit */
.sev { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sev .d { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.sev-error .d { background: var(--crit); } .sev-error { color: var(--crit); }
.sev-warn  .d { background: var(--warn); } .sev-warn  { color: var(--warn); }
.sev-info  .d { background: var(--c-spo2); } .sev-info { color: var(--text-sec); }
.sev-muted .d { background: var(--sp-absent-o2-neutral); } .sev-muted { color: var(--text-dim); }   /* not-worn / audit / informational — never red */
.sev-tag { font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; }

/* diagnostics + equipment tables reuse is-="dense-table"; add wrap for long messages */
[is-~="dense-table"].wide td { white-space: normal; }
[is-~="dense-table"].wide td.k { white-space: nowrap; }
.diag-msg { color: var(--text-sec); } .diag-act { color: var(--text-dim); font-style: italic; }
.diag-age { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.status-pill { font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; padding: 0 5px; border: 1px solid var(--border); border-radius: 2px; color: var(--text-dim); }
.status-pill[data-s="active"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.status-pill[data-s="watching"] { color: var(--c-spo2); }
.status-pill[data-s="resolved"] { color: var(--ok); }
.status-pill[data-s="muted"] { color: var(--sp-absent-o2-neutral); border-style: dashed; }

/* open actions — compact actionable summary (replaces always-on metadata tiles) */
.ops-actions { list-style: none; margin: 0; padding: 0; font-size: 11.5px; }
.ops-actions li { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--text-sec); border-top: 1px solid var(--border-dim); }
.ops-actions li:first-child { border-top: none; }
.ops-actions .sev { flex: none; }
.ops-actions .oa-ref { margin-left: auto; font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); flex: none; }

/* demoted metadata drawers — collapsed reference at the bottom of the right stack */
.ops-details { border: 1px solid var(--border-dim); border-radius: 4px; background: var(--bg2); }
.ops-details > summary { cursor: pointer; font-size: 11px; color: var(--text-dim); padding: 6px 10px; letter-spacing: .03em; list-style: none; }
.ops-details > summary::-webkit-details-marker { display: none; }
.ops-details > summary::before { content: "▸ "; color: var(--text-mut); }
.ops-details[open] > summary::before { content: "▾ "; }
.ops-details[open] > summary { border-bottom: 1px solid var(--border-dim); color: var(--text-mut); }
.ops-details > summary:hover { color: var(--text-sec); }
.ops-details > summary .mut { color: var(--text-dim); font-weight: 400; }
.ops-details-body { padding: 8px 10px; }

/* equipment health states — attention scale, NOT clinical/infra red */
.eq { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; padding: 0 6px; border: 1px solid var(--border); border-radius: 2px; }
.eq[data-eq="ok"] { color: var(--sp-status-ok); border-color: color-mix(in srgb, var(--sp-status-ok) 40%, transparent); }
.eq[data-eq="watch"] { color: var(--sp-status-warn); }
.eq[data-eq="due"] { color: var(--sp-status-warn); border-color: color-mix(in srgb, var(--sp-status-warn) 45%, transparent); font-weight: 600; }
.eq[data-eq="overdue"] { color: var(--sp-autonomic-burden); border-color: color-mix(in srgb, var(--sp-autonomic-burden) 50%, transparent); font-weight: 600; }
.eq[data-eq="unknown"] { color: var(--text-dim); border-style: dashed; }
.eq-impact { color: var(--text-dim); font-size: 10px; }

/* ── tabs / menubar (thin chrome) ─────────────────────────────────────────────── */
.tui-menubar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 5px 12px; font-size: 12px; color: var(--text-mut); margin-bottom: 8px; }
.tui-menubar .brand { font-weight: 700; color: var(--text); letter-spacing: .04em; } .tui-menubar .brand .v { color: var(--text-dim); font-weight: 400; margin-left: 6px; }
.tui-menubar a { color: var(--text-dim); } .tui-menubar a:hover { color: var(--link); }
.tui-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; }
.tui-tab { padding: 4px 14px; font-size: 12px; color: var(--text-dim); background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; text-decoration: none; }
.tui-tab.active { background: var(--panel-alt); color: var(--text); font-weight: 600; }
a.tui-tab:hover { border-color: var(--accent); color: var(--text); }
.tui-tab .num { color: var(--accent); margin-right: 4px; }

/* theme switcher (compact, in the menubar) */
.sp-theme-switch { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 11px; color: var(--text-dim); }
.sp-theme-switch .lbl { color: var(--text-mut); }
.sp-theme-select { font-family: var(--ui); font-size: 11px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; cursor: pointer; }
.sp-theme-select:hover { border-color: var(--accent); }
.sp-theme-role { color: var(--text-dim); font-style: italic; }

/* welcome/comparison index */
.idx-wrap { max-width: 940px; margin: 0 auto; }
.idx-note { color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: 4px; padding: 8px 10px; font-size: 12px; margin: 10px 0; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp .card h4 { color: var(--text); font-size: 13px; margin-bottom: 4px; } .cmp .card p { color: var(--text-mut); font-size: 11.5px; } .cmp .card .go { color: var(--accent); font-size: 11px; margin-top: 6px; }

/* ── responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  [is-~="split"] { grid-template-columns: 1fr; }
  [is-~="inspector"] { align-self: auto; }
  .st-span2 { grid-column: auto; }
  .ops-columns { grid-template-columns: 1fr; }
  .cmp { grid-template-columns: 1fr; }
}