/*
 * MMAT terminal — the single production stylesheet.
 *
 * There is exactly one of these. The Stage-1 build shipped two files both
 * named terminal.css, loaded together, which is how two visual systems came to
 * be live at once. Every value below resolves to a token; nothing invents a
 * colour, a step or a radius locally.
 */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Every market number is tabular, so digits never shift width as a price
   ticks. In a terminal this is the load-bearing typographic decision. */
.num, .val, td.num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--ink-900);
  padding: var(--s2) var(--s4); z-index: var(--z-modal);
}
.skip-link:focus { left: var(--s4); top: var(--s2); }

/* === shell ============================================================ */
.shell {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  grid-template-rows: var(--rail-h) 1fr;
  grid-template-areas: "brand rail" "nav work";
  height: 100vh;
}

.brand {
  grid-area: brand;
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s4);
  background: var(--ink-800);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 8px; height: 18px; flex: none; border-radius: 1px;
  background: linear-gradient(180deg, var(--accent), #2f5fd0);
}
.brand-name {
  font-size: var(--t-sm); font-weight: var(--w-semi);
  letter-spacing: var(--track); color: var(--text-strong);
}

/* === status rail ====================================================== */
.rail {
  grid-area: rail;
  display: flex; align-items: center; gap: var(--s5);
  padding: 0 var(--s4);
  background: var(--ink-800);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-spacer { flex: 1 1 auto; }

.stat { display: flex; align-items: baseline; gap: var(--s2); white-space: nowrap; }
.stat-k {
  font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: var(--track); color: var(--text-faint);
}
.stat-v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-sm); color: var(--text);
}

/* Broker health in the rail: name plus a trust dot. Never a bare em-dash. */
.rail-brokers { display: flex; gap: var(--s2); }
.bpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px var(--s2);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--t-micro); letter-spacing: var(--track);
  color: var(--text-muted); background: var(--ink-700);
}
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot[data-trust="OK"]        { background: var(--trust-ok); }
.dot[data-trust="DEGRADED"]  { background: var(--trust-degraded); }
.dot[data-trust="BLOCKED"]   { background: var(--trust-blocked); }
.dot[data-trust="ABSENT"]    { background: var(--trust-absent); }

.conn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px var(--s3); border-radius: var(--r-pill);
  font-size: var(--t-micro); letter-spacing: var(--track);
  border: 1px solid var(--line-strong); background: var(--ink-700);
}
.conn[data-state="LIVE"]         { color: var(--up); border-color: rgba(43,191,126,.4); }
.conn[data-state="RECONNECTING"] { color: var(--trust-degraded); border-color: rgba(230,163,56,.4); }
.conn[data-state="CONNECTING"]   { color: var(--text-muted); }
.conn[data-state="DISCONNECTED"] { color: var(--down); border-color: rgba(239,90,84,.4); }

/* === nav ============================================================== */
.nav {
  grid-area: nav;
  background: var(--ink-800);
  border-right: 1px solid var(--line);
  padding: var(--s4) 0;
  overflow-y: auto;
}
.nav-group {
  padding: var(--s4) var(--s4) var(--s2);
  font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: var(--track); color: var(--text-faint);
}
.nav-group:first-child { padding-top: 0; }
.nav-tab {
  display: block; width: 100%; text-align: left;
  padding: 7px var(--s4); border: 0; border-left: 2px solid transparent;
  background: none; color: var(--text-muted);
  font: inherit; font-size: var(--t-base); cursor: pointer;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav-tab:hover { color: var(--text); background: var(--ink-700); }
.nav-tab[aria-current="page"] {
  color: var(--text-strong); background: var(--ink-700);
  border-left-color: var(--accent);
}

/* === workspace ======================================================== */
.work { grid-area: work; overflow-y: auto; padding: var(--s5); }

/* Exactly one screen is in the document at a time. Hidden screens are
   removed, not merely visually suppressed, so nothing off-screen can push
   the active screen below the fold. */
.screen-head { margin-bottom: var(--s5); }
.screen-title {
  margin: 0; font-size: var(--t-lg); font-weight: var(--w-semi);
  color: var(--text-strong); letter-spacing: -0.01em;
}
.screen-sub { margin: 4px 0 0; color: var(--text-muted); font-size: var(--t-sm); }

/* === panels =========================================================== */
.panel {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: var(--s4);
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}
.panel-title {
  margin: 0; font-size: var(--t-sm); font-weight: var(--w-semi);
  color: var(--text); letter-spacing: 0.01em;
}
.panel-note { font-size: var(--t-xs); color: var(--text-faint); }
.panel-body { padding: var(--s4); }
.panel-body.flush { padding: 0; }

.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* === the tape: the Overview hero =====================================
   A dense instrument ledger rather than fat KPI cards. Provenance sits on
   the same row as the value, because an operator judging trust should never
   have to look somewhere else to find the source. */
.tape { width: 100%; border-collapse: collapse; }
.tape thead th {
  padding: var(--s2) var(--s4);
  font-size: var(--t-micro); font-weight: var(--w-med);
  text-transform: uppercase; letter-spacing: var(--track);
  color: var(--text-faint); text-align: right;
  border-bottom: 1px solid var(--line);
  background: var(--ink-700);
}
.tape thead th:first-child, .tape thead th.left { text-align: left; }
.tape tbody td {
  padding: 9px var(--s4);
  border-bottom: 1px solid var(--line);
  text-align: right; font-size: var(--t-base);
}
.tape tbody tr:last-child td { border-bottom: 0; }
.tape tbody tr:hover td { background: var(--ink-700); }
.tape td.left, .tape th.left { text-align: left; }

.inst { display: flex; flex-direction: column; gap: 1px; }
.inst-name {
  font-size: var(--t-base); font-weight: var(--w-med); color: var(--text-strong);
}
.inst-id {
  font-family: var(--font-mono); font-size: var(--t-micro);
  color: var(--text-faint);
}
.tape .val {
  font-size: var(--t-md); color: var(--text-strong);
}
.delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.delta[data-dir="up"]   { color: var(--up); }
.delta[data-dir="down"] { color: var(--down); }
.delta[data-dir="flat"] { color: var(--text-muted); }

/* Absence has its own texture. A missing value must never look like a
   quiet one, so it is rendered as a hatched slot rather than grey digits. */
.absent {
  display: inline-block; min-width: 46px; height: 12px;
  border-radius: 2px; vertical-align: middle;
  background-image: repeating-linear-gradient(
    -45deg, var(--ink-500) 0 3px, transparent 3px 6px);
  border: 1px solid var(--line-strong);
}

/* === trust badges ===================================================== */
.trust {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px var(--s2); border-radius: var(--r-pill);
  font-size: var(--t-micro); letter-spacing: var(--track);
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--line-strong); background: var(--ink-700);
  color: var(--text-muted);
}
.trust[data-trust="OK"] { color: var(--trust-ok); border-color: rgba(43,191,126,.35); }
.trust[data-trust="DEGRADED"] {
  color: var(--trust-degraded); border-color: rgba(230,163,56,.4);
  background: var(--trust-degraded-wash);
}
.trust[data-trust="BLOCKED"] {
  color: var(--trust-blocked); border-color: rgba(239,90,84,.4);
  background: var(--down-wash);
}
.trust[data-trust="ABSENT"] { color: var(--trust-absent); }

.src {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--text-muted);
}

/* === metric strip ===================================================== */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1180px) { .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.metric {
  padding: var(--s3) var(--s4);
  border-right: 1px solid var(--line);
}
.metric:last-child { border-right: 0; }
.metric-k {
  font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: var(--track); color: var(--text-faint);
}
.metric-v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-xl); color: var(--text-strong); margin-top: 2px;
  line-height: 1.1;
}
.metric-note { font-size: var(--t-xs); color: var(--text-muted); margin-top: 3px; }

/* === decision ========================================================= */
.decision {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4);
}
.decision-word {
  font-family: var(--font-mono); font-size: var(--t-2xl);
  letter-spacing: var(--track); color: var(--text-strong);
}
.decision-word[data-state="BULLISH"] { color: var(--up); }
.decision-word[data-state="BEARISH"] { color: var(--down); }
.decision-word[data-state="NEUTRAL"] { color: var(--text); }
.decision-word[data-state="UNKNOWN"] { color: var(--text-muted); }
.decision-why { color: var(--text-muted); font-size: var(--t-sm); max-width: 62ch; }

/* === definition rows ================================================== */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: 8px var(--s4);
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row-k { color: var(--text-muted); font-size: var(--t-sm); }
.row-v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-sm); color: var(--text);
}

/* === gates (preflight / system) ======================================= */
.gate {
  display: grid; grid-template-columns: 20px 1fr auto;
  align-items: center; gap: var(--s3);
  padding: 9px var(--s4);
  border-bottom: 1px solid var(--line);
}
.gate:last-child { border-bottom: 0; }
.gate[data-ok="false"] { background: var(--down-wash); }
.gate-mark { font-size: var(--t-sm); text-align: center; }
.gate[data-ok="true"]  .gate-mark { color: var(--trust-ok); }
.gate[data-ok="false"] .gate-mark { color: var(--trust-blocked); }
.gate-name { font-size: var(--t-base); color: var(--text); }
.gate-reason {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--trust-blocked);
}

/* === matrix =========================================================== */
.matrix { width: 100%; border-collapse: collapse; }
.matrix th {
  padding: var(--s2) var(--s4); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: var(--track);
  color: var(--text-faint); font-weight: var(--w-med);
  border-bottom: 1px solid var(--line); background: var(--ink-700);
  text-align: right;
}
.matrix th.left { text-align: left; }
.matrix td {
  padding: 8px var(--s4); border-bottom: 1px solid var(--line);
  text-align: right; font-size: var(--t-sm);
}
.matrix tr:last-child td { border-bottom: 0; }
.matrix td.left { text-align: left; }
.cellwrap { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cell-age { font-size: var(--t-micro); color: var(--text-faint); }
.role {
  font-size: var(--t-micro); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(91,140,255,.35); background: var(--accent-wash);
  border-radius: var(--r-pill); padding: 1px 7px;
}

/* === actions ========================================================== */
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; padding: var(--s4); }
.btn {
  padding: 6px var(--s4); border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--ink-600);
  color: var(--text); font: inherit; font-size: var(--t-sm); cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.btn:hover { background: var(--ink-500); border-color: var(--accent); }
.btn-primary {
  background: var(--accent-wash); border-color: rgba(91,140,255,.5);
  color: var(--text-strong);
}
.btn-danger:hover { border-color: var(--down); }

/* === forms ============================================================ */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--s3); }
.field-label { font-size: var(--t-xs); color: var(--text-muted); }
.input, .select, .textarea {
  padding: 7px var(--s3); border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--ink-900);
  color: var(--text); font: inherit; font-size: var(--t-sm);
  font-family: var(--font-mono);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent); outline: none;
}
.textarea { min-height: 110px; resize: vertical; }

/* Native checkboxes were rendering as white system controls on the dark
   canvas — the one place the design system had no coverage at all. */
.check { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box {
  width: 15px; height: 15px; border-radius: 3px; flex: none;
  border: 1px solid var(--line-strong); background: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--ink-900);
}
.check input:checked + .check-box {
  background: var(--accent); border-color: var(--accent);
}
.check input:checked + .check-box::after { content: "\2713"; }
.check input:focus-visible + .check-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.check input:disabled + .check-box { opacity: .45; }

/* === empty states: an invitation to act, not a mood ==================== */
.empty { padding: var(--s8) var(--s4); text-align: center; }
.empty-title { color: var(--text); font-size: var(--t-base); }
.empty-body {
  color: var(--text-muted); font-size: var(--t-sm);
  max-width: 56ch; margin: var(--s2) auto 0;
}

.chart { width: 100%; height: 260px; }

.footer {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  color: var(--text-faint); font-size: var(--t-xs);
}

/* === operator write surface ==========================================
   Controls restored in UI Recovery R-1. Everything resolves to an existing
   token: no new colour, spacing step or radius is invented here. */

/* --- the admin gate --------------------------------------------------- */
.shell[data-gated="true"] .nav,
.shell[data-gated="true"] .rail-brokers,
.shell[data-gated="true"] .rail-session { display: none; }

.authgate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--s5);
}
.authgate-card {
  width: 100%;
  max-width: 420px;
  padding: 32px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}
.authgate-mark {
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--accent), #1f4fd8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.authgate-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.authgate-sub {
  margin: 0 0 24px;
  color: var(--text-muted);
  line-height: 1.55;
}
.authgate-note {
  margin: 16px 0 0;
  font-size: var(--t-micro);
  color: var(--text-faint);
  line-height: 1.5;
}
.authgate .field { margin-bottom: 16px; }

.rail-session { display: flex; align-items: center; }

/* --- forms ------------------------------------------------------------ */
.form { padding: var(--s5); display: grid; gap: 16px; }
.form-sep { border-top: 1px solid var(--line); }
.form-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-help {
  margin: -6px 0 0;
  font-size: var(--t-micro);
  color: var(--text-faint);
  line-height: 1.5;
}
.field { display: grid; gap: 6px; }
.field-k {
  font-size: var(--t-micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-muted);
}
select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.form-error {
  margin: 0;
  padding: 10px 12px;
  font-size: var(--t-micro);
  color: var(--trust-blocked);
  background: rgba(239, 90, 84, .08);
  border: 1px solid rgba(239, 90, 84, .28);
  border-radius: 6px;
  line-height: 1.5;
}

/* --- buttons ---------------------------------------------------------- */
.btn[data-busy="true"] { opacity: .7; cursor: progress; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-block { width: 100%; justify-content: center; }
.icon-btn {
  font: inherit;
  font-size: var(--t-micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); }

/* --- drawer ----------------------------------------------------------- */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  background: rgba(6, 8, 12, .62);
}
.drawer {
  width: min(480px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ink-800);
  border-left: 1px solid var(--line-strong);
  box-shadow: -32px 0 64px rgba(0, 0, 0, .45);
}
.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--s5);
  border-bottom: 1px solid var(--line);
}
.drawer-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}
.drawer-sub {
  margin: 6px 0 0;
  font-size: var(--t-micro);
  color: var(--text-faint);
  line-height: 1.5;
}
.drawer-body { flex: 1 1 auto; overflow-y: auto; }
.drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px var(--s5);
  border-top: 1px solid var(--line);
  background: var(--ink-900);
}

/* --- toasts ----------------------------------------------------------- */
.toasts {
  position: fixed;
  /* Left, not right. The configuration drawer occupies the right edge, and a
     right-anchored toast covered its Save and Cancel buttons -- feedback that
     hid the control the operator needed next. */
  left: var(--s5);
  bottom: var(--s5);
  z-index: 60;
  display: grid;
  gap: 8px;
  justify-items: start;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  max-width: 380px;
  padding: 11px 15px;
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--text);
  background: var(--ink-700);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--text-faint);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  cursor: pointer;
}
.toast[data-tone="ok"]  { border-left-color: var(--trust-ok); }
.toast[data-tone="bad"] { border-left-color: var(--trust-blocked); }

/* --- per-card outcome ------------------------------------------------- */
.card-note {
  margin: 0;
  padding: 10px var(--s5);
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
}
.card-note[data-tone="ok"]  { color: var(--trust-ok); }
.card-note[data-tone="bad"] { color: var(--trust-blocked); }

/* --- market setup save bar -------------------------------------------- */
.savebar {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 12px;
  margin-top: var(--s5);
  padding: 16px var(--s5);
  background: var(--ink-800);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .35);
}
.savebar-note { font-size: var(--t-micro); color: var(--text-muted); }
.savebar .actions { padding: 0; }
tr[data-unresolved="true"] { opacity: .45; }

/* The `hidden` attribute must win over any component `display`.
   Without this a class rule setting `display: grid` silently defeated
   `element.hidden = true`, leaving the Market Setup save bar on screen with
   no unsaved changes. */
[hidden] { display: none !important; }

/* Market telemetry belongs to an authenticated terminal. Showing DATA /
   EVALUATED / GENERATION beside a sign-in box implied the terminal was already
   live to an operator who had not yet signed in. */
.shell[data-gated="true"] .rail .stat:nth-of-type(n+3),
.shell[data-gated="true"] .conn { display: none; }

/* === professional visual phase ========================================
   Components added for the Markets / Options / Analytics workspaces and the
   Overview cockpit. Every value resolves to an existing token: no new colour,
   spacing step or radius is invented here. */

/* --- ambient layer ---------------------------------------------------- */
#backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Ambient means ambient. At this weight it reads as depth behind the
     workspace rather than as marks on top of it. */
  opacity: .16;
}
.shell { position: relative; z-index: var(--z-base); }

/* --- navigation icons ------------------------------------------------- */
.icon { flex: none; }
.nav-tab { display: flex; align-items: center; gap: 10px; }
.nav-tab .icon { opacity: .55; transition: opacity var(--fast) var(--ease); }
.nav-tab:hover .icon,
.nav-tab[aria-current="page"] .icon { opacity: 1; }

/* --- screen scaffolding ----------------------------------------------- */
.screen { display: block; }
.screen-body { display: grid; gap: var(--s4); }

/* --- Overview summary strip ------------------------------------------- */
.summary {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.summary-cell {
  display: grid;
  gap: 5px;
  padding: 13px var(--s4);
  background: var(--ink-800);
}
.summary-k {
  font-size: var(--t-micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-faint);
}
.summary-v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-md);
  color: var(--text-strong);
}
.summary-v[data-dir="up"] { color: var(--up); }
.summary-v[data-dir="down"] { color: var(--down); }

/* --- KPI strip --------------------------------------------------------- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s3);
}
.kpi {
  display: grid;
  gap: 9px;
  padding: 14px var(--s4) 12px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-width: 0;
}
.kpi[data-state="ABSENT"] { background: var(--ink-900); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.kpi-name {
  font-size: var(--t-micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xl);
  font-weight: var(--w-semi);
  color: var(--text-strong);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.kpi-move {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-muted);
}
.kpi-move[data-dir="up"] { color: var(--up); }
.kpi-move[data-dir="down"] { color: var(--down); }
.kpi-pct { opacity: .85; }
.kpi-horizon {
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-faint);
}
.kpi-absent { font-size: var(--t-xs); color: var(--text-faint); }
.kpi-spark { height: 34px; position: relative; }
.kpi-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* --- charts ------------------------------------------------------------ */
.panel-chart { width: 100%; height: 300px; position: relative; }
.panel-chart-sm { height: 140px; }
.spark-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-size: var(--t-micro);
  color: var(--text-faint);
  letter-spacing: .02em;
}

/* --- the unavailable state, designed rather than blank ----------------- */
.unavail {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: var(--s8) var(--s5);
  text-align: center;
  color: var(--text-faint);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 6px,
    rgba(255, 255, 255, .012) 6px, rgba(255, 255, 255, .012) 12px);
}
.unavail-title { margin: 0; color: var(--text-muted); font-size: var(--t-base); }
.unavail-body {
  margin: 0;
  max-width: 62ch;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-faint);
}

/* --- Markets ----------------------------------------------------------- */
.mkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s3);
}
.mkt-card {
  display: grid;
  gap: 10px;
  padding: var(--s4);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-width: 0;
}
.mkt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.mkt-name {
  display: block;
  font-size: var(--t-base);
  font-weight: var(--w-semi);
  color: var(--text-strong);
}
.mkt-id {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--text-faint);
}
.mkt-figure { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.mkt-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xl);
  font-weight: var(--w-semi);
  color: var(--text-strong);
}
.mkt-move {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--text-muted);
}
.mkt-move[data-dir="up"] { color: var(--up); }
.mkt-move[data-dir="down"] { color: var(--down); }
.mkt-spark { height: 62px; position: relative; }
.mkt-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.mkt-src, .mkt-fresh { font-size: var(--t-micro); color: var(--text-faint); }
.mkt-fresh { font-family: var(--font-mono); }

/* --- shared stat rows -------------------------------------------------- */
.stat-row { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stat-row-2 { grid-template-columns: repeat(2, 1fr); }
.stat-row-4 { grid-template-columns: repeat(4, 1fr); }
.stat-row-5 { grid-template-columns: repeat(5, 1fr); }
.stat-cell { display: grid; gap: 5px; padding: 12px var(--s4); background: var(--ink-800); min-width: 0; }
.stat-cell-k {
  font-size: var(--t-micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-faint);
}
.stat-cell-v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-md);
  color: var(--text-strong);
}
.stat-cell-v[data-dir="up"] { color: var(--up); }
.stat-cell-v[data-dir="down"] { color: var(--down); }
.stat-cell-note { font-size: var(--t-micro); color: var(--text-faint); }

/* --- Options: OI balance, PCR, strike ladder --------------------------- */
.oi-balance { display: grid; gap: 7px; margin-top: var(--s4); }
.oi-legend { display: flex; justify-content: space-between; font-size: var(--t-xs); }
.oi-legend-call { color: var(--accent); }
.oi-legend-put { color: #9b7bff; }
.oi-bar { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--ink-600); }
.oi-call { background: var(--accent); }
.oi-put { background: #9b7bff; }

.pcr { display: grid; gap: 8px; margin-top: var(--s5); }
.pcr-head { display: flex; align-items: baseline; justify-content: space-between; }
.pcr-k { font-size: var(--t-micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); }
.pcr-v { font-family: var(--font-mono); font-size: var(--t-lg); color: var(--text-strong); }
.pcr-v[data-dir="up"] { color: var(--up); }
.pcr-v[data-dir="down"] { color: var(--down); }
.pcr-scale { position: relative; height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--down-wash), var(--ink-600) 50%, var(--up-wash)); }
.pcr-mid { position: absolute; left: 50%; top: -3px; width: 1px; height: 12px; background: var(--line-strong); }
.pcr-marker { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--text-strong); transform: translateX(-1px); }
.pcr-ends { display: flex; justify-content: space-between; font-size: var(--t-micro); color: var(--text-faint); }

.strike-list { display: flex; flex-wrap: wrap; gap: 5px; padding: var(--s4); }
.strike-chip {
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-muted);
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.strike-chip[data-atm="true"] { color: var(--text-strong); border-color: var(--accent); background: var(--accent-wash); }

/* --- Analytics: VIX, basis, CPR ---------------------------------------- */
.vix-figure { display: flex; align-items: baseline; gap: var(--s4); }
.vix-value { font-family: var(--font-mono); font-size: var(--t-2xl); font-weight: var(--w-semi); color: var(--text-strong); }
.vix-move { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--text-muted); }
.vix-move[data-dir="up"] { color: var(--up); }
.vix-move[data-dir="down"] { color: var(--down); }
.vix-bands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: var(--s4); background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.vix-band {
  padding: 8px;
  text-align: center;
  font-size: var(--t-micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--ink-800);
}
.vix-band[data-active="true"] { color: var(--text-strong); background: var(--ink-600); box-shadow: inset 0 -2px 0 var(--accent); }

.basis { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
.basis-scale { position: relative; height: 6px; margin-top: var(--s2); border-radius: var(--r-pill); background: var(--ink-600); }
.basis-zero { position: absolute; left: 50%; top: -3px; width: 1px; height: 12px; background: var(--line-strong); }
.basis-marker { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--text-muted); transform: translateX(-1px); }
.basis-marker[data-dir="up"] { background: var(--up); }
.basis-marker[data-dir="down"] { background: var(--down); }

.cpr { display: grid; gap: var(--s3); }
.cpr-title { font-size: var(--t-xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-muted); }
.cpr-ladder { position: relative; height: 118px; border-left: 1px solid var(--line); }
.cpr-line { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s2) 0 var(--s3); transform: translateY(-50%); }
.cpr-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; }
.cpr-tc::before { background: rgba(239, 90, 84, .45); }
.cpr-pivot::before { background: rgba(91, 140, 255, .6); }
.cpr-bc::before { background: rgba(43, 191, 126, .45); }
.cpr-line[data-absent="true"] { position: static; transform: none; opacity: .5; }
.cpr-k { position: relative; font-size: var(--t-micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-faint); background: var(--ink-800); padding-right: 6px; }
.cpr-v { position: relative; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--text); background: var(--ink-800); padding-left: 6px; }

.panel-foot { display: flex; justify-content: space-between; padding: 10px var(--s5); border-top: 1px solid var(--line); }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1600px) {
  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary { grid-template-columns: repeat(3, 1fr); }
  .stat-row-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1180px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .stat-row-4, .stat-row-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 2200px) {
  .work { padding-left: var(--s10); padding-right: var(--s10); }
  .panel-chart { height: 380px; }
}

/* ======================================================================
   PREMIUM VISUAL PASS (CF2)
   ----------------------------------------------------------------------
   The previous pass was technically disciplined but read as an internal
   tool: flat fills, a 1px line on every edge, and almost everything set at
   10-13px. Depth now comes from layered fills, controlled shadow and a top
   highlight rather than from heavier borders, and the type scale carries
   the hierarchy instead of colour. Green and red stay directional, amber
   stays degraded, blue stays interaction. Nothing else is coloured.
   ====================================================================== */

/* --- shell ------------------------------------------------------------ */
.brand {
  gap: var(--s3);
  padding: 0 var(--s5);
  background: var(--ink-900);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 10px; height: 22px; border-radius: 2px;
  box-shadow: 0 0 14px -2px rgba(91, 140, 255, .55);
}
.brand-name { font-size: var(--t-base); letter-spacing: .14em; }

.rail {
  gap: var(--s6);
  padding: 0 var(--s5);
  background: linear-gradient(180deg, #0d111a 0%, #0a0d15 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--edge-top);
}
.stat-k { font-size: var(--t-micro); }
.stat-v { font-size: var(--t-sm); }

.nav {
  background: var(--ink-900);
  border-right: 1px solid var(--line);
  padding: var(--s5) var(--s3);
}
.nav-group {
  padding: var(--s5) var(--s3) var(--s2);
  font-size: var(--t-micro);
}
.nav-tab {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; padding: 10px var(--s3);
  border: 0; border-left: 0;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  transition: color var(--fast) var(--ease),
    background var(--fast) var(--ease);
}
.nav-tab:hover { background: rgba(255, 255, 255, .035); }
.nav-tab[aria-current="page"] {
  color: var(--text-strong);
  background: linear-gradient(90deg, var(--accent-wash), transparent 85%);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-tab[aria-current="page"] .icon { color: var(--accent); opacity: 1; }

.work { padding: var(--s6) var(--s7); }

/* --- panels ----------------------------------------------------------- */
.panel {
  background: var(--panel-fill);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: var(--s5);
  box-shadow: var(--shadow-2), var(--edge-top);
}
.panel-head {
  align-items: center;
  padding: var(--s4) var(--s5);
}
.panel-title { font-size: var(--t-base); color: var(--text-strong); }
.panel-note { font-size: var(--t-micro); }
.panel-body { padding: var(--s5); }

.screen-head { margin-bottom: var(--s6); }
.screen-title {
  font-size: var(--t-lg);
  font-weight: var(--w-semi);
  letter-spacing: -0.015em;
  color: var(--text-strong);
}
.screen-sub { font-size: var(--t-sm); margin-top: 5px; }
.screen-body { gap: var(--s5); }

/* --- section heading, above a group of panels ------------------------- */
.section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4);
  margin: var(--s2) 0 calc(var(--s3) * -1 + var(--s3));
}
.section-h-t {
  font-size: var(--t-micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-faint);
}
.section-h-a {
  font-size: var(--t-micro);
  color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; letter-spacing: var(--track);
  text-transform: uppercase;
}
.section-h-a:hover { text-decoration: underline; }

/* --- KPI cards: real dashboard components ----------------------------- */
.kpi-strip { gap: var(--s4); }
.kpi {
  gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s4);
  background: var(--panel-fill-raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-2), var(--edge-top);
  position: relative;
  overflow: hidden;
}
/* A hairline of instrument identity, not a coloured card. */
.kpi::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--kpi-accent, transparent); opacity: .8;
}
.kpi[data-state="ABSENT"] {
  background: var(--ink-900);
  box-shadow: none;
}
.kpi-name { font-size: var(--t-micro); letter-spacing: .1em; }
.kpi-value {
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.kpi-move { font-size: var(--t-sm); gap: var(--s2); }
.kpi-horizon { font-size: var(--t-micro); }
.kpi-spark { height: 46px; }
.kpi-foot { padding-top: var(--s3); }
.src { font-size: var(--t-micro); color: var(--text-faint); }

/* --- summary strip ---------------------------------------------------- */
.summary {
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-2), var(--edge-top);
  background: var(--line);
}
.summary-cell { padding: var(--s4) var(--s5); background: var(--ink-800); }
.summary-k { font-size: var(--t-micro); }
.summary-v { font-size: var(--t-md); }

/* --- charts ----------------------------------------------------------- */
.panel-chart { height: 360px; }
.panel-chart-sm { height: 168px; }
.chart-frame {
  border-radius: var(--r-sm);
  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(91, 140, 255, .05) 0%, transparent 60%);
}

/* --- market cards ----------------------------------------------------- */
.mkt-grid { gap: var(--s4); }
.mkt-card {
  gap: var(--s4);
  padding: var(--s5);
  background: var(--panel-fill-raised);
  border-radius: var(--r);
  box-shadow: var(--shadow-2), var(--edge-top);
}
.mkt-name { font-size: var(--t-md); }
.mkt-id { font-size: var(--t-micro); }
.mkt-value { font-size: var(--t-xl); letter-spacing: -0.02em; }
.mkt-move { font-size: var(--t-sm); }
.mkt-spark { height: 76px; }
.mkt-foot { padding-top: var(--s3); }

/* --- stat rows -------------------------------------------------------- */
.stat-row {
  border-radius: var(--r);
  box-shadow: var(--edge-top);
  overflow: hidden;
}
.stat-cell { padding: var(--s4) var(--s5); }
.stat-cell-k { font-size: var(--t-micro); }
.stat-cell-v { font-size: var(--t-md); }

/* --- collapsible detail ----------------------------------------------- */
details.fold { margin-bottom: var(--s5); }
details.fold > summary {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--panel-fill);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--edge-top);
  cursor: pointer;
  font-size: var(--t-base);
  color: var(--text);
  list-style: none;
  transition: background var(--fast) var(--ease);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary:hover { background: var(--panel-fill-raised); }
details.fold > summary .icon {
  transition: transform var(--fast) var(--ease);
  color: var(--text-faint);
}
details.fold[open] > summary {
  border-radius: var(--r) var(--r) 0 0;
  border-bottom-color: transparent;
}
details.fold[open] > summary .icon { transform: rotate(90deg); }
details.fold > summary .fold-note {
  margin-left: auto; font-size: var(--t-micro); color: var(--text-faint);
}
details.fold > .fold-body {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
  background: var(--panel-fill);
  box-shadow: var(--shadow-2);
}
details.fold > .fold-body .panel { margin: 0; border: 0; box-shadow: none; }

/* --- tables ----------------------------------------------------------- */
.matrix { font-size: var(--t-sm); }
.matrix th {
  position: sticky; top: 0; z-index: 2;
  padding: var(--s3) var(--s5);
  font-size: var(--t-micro);
  background: var(--ink-900);
  border-bottom: 1px solid var(--line-strong);
}
.matrix td { padding: var(--s3) var(--s5); }
.matrix tbody tr { transition: background var(--fast) var(--ease); }
.matrix tbody tr:hover { background: rgba(255, 255, 255, .022); }

/* --- controls --------------------------------------------------------- */
.btn {
  padding: 9px var(--s4);
  font-size: var(--t-sm);
  border-radius: var(--r-sm);
  box-shadow: var(--edge-top);
  transition: background var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}
.btn-primary {
  background: linear-gradient(180deg, #3f74e8 0%, #2f5fd0 100%);
  border-color: #4d80f0;
  color: #fff;
  box-shadow: var(--edge-top), 0 2px 10px -3px rgba(63, 116, 232, .6);
}
.btn-primary:hover:not(:disabled) { background: #4a7ff0; }
.input {
  padding: 10px var(--s3);
  font-size: var(--t-sm);
  border-radius: var(--r-sm);
}
.input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.trust, .chip { font-size: var(--t-micro); }

/* --- drawer ----------------------------------------------------------- */
.drawer {
  width: min(520px, 100%);
  background: var(--ink-900);
  box-shadow: -32px 0 80px -20px rgba(0, 0, 0, .8);
}
.drawer-head { padding: var(--s5) var(--s6); }
.drawer-title { font-size: var(--t-md); }
.drawer-foot { padding: var(--s4) var(--s6); }
.form { padding: var(--s5) var(--s6); gap: var(--s5); }

/* --- unavailable ------------------------------------------------------ */
.unavail { border-radius: var(--r); padding: var(--s10) var(--s6); }
.unavail-title { font-size: var(--t-md); color: var(--text); }
.unavail-body { font-size: var(--t-sm); }

/* --- the fixture banner. Test mode only, never production. ------------ */
.fixture-banner {
  grid-area: work;
  align-self: start;
  position: relative;
  z-index: 5;
  margin: var(--s5) var(--s7) 0;
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s5);
  margin-bottom: var(--s5);
  font-size: var(--t-micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--trust-degraded);
  background: var(--trust-degraded-wash);
  border: 1px solid rgba(230, 163, 56, .35);
  border-radius: var(--r-sm);
}
.shell:has(.fixture-banner) .work { padding-top: 56px; }

/* --- responsive ------------------------------------------------------- */
@media (max-width: 1500px) { .work { padding: var(--s5); } }
@media (min-width: 2200px) {
  .work { padding: var(--s8) var(--s12); }
  .panel-chart { height: 440px; }
  .kpi-spark { height: 58px; }
}

.stat-row-3 { grid-template-columns: repeat(3, 1fr); }

/* The dominant chart must not consume the fold on its own: at 1920x1080 the
   compact cockpit modules have to be visible without scrolling, which is the
   whole point of a cockpit. */
.panel-chart { height: 250px; }
@media (min-width: 2200px) { .panel-chart { height: 330px; } }
@media (max-width: 1500px) { .panel-chart { height: 210px; } }

/* A panel note may carry both a caption and an "Open" link. */
.panel-note { display: flex; align-items: baseline; gap: var(--s3); }

/* --- broker connection center ----------------------------------------- */
.bk-ident { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.bk-mono {
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  letter-spacing: .04em;
  color: var(--text-strong);
  background: var(--ink-600);
  border: 1px solid var(--line-strong);
  box-shadow: var(--edge-top);
}
.bk-mono[data-trust="OK"] {
  color: var(--trust-ok);
  border-color: rgba(43, 191, 126, .4);
  background: rgba(43, 191, 126, .10);
}
.bk-mono[data-trust="DEGRADED"] {
  color: var(--trust-degraded);
  border-color: rgba(230, 163, 56, .4);
  background: var(--trust-degraded-wash);
}
.bk-role {
  display: block; margin-top: 2px;
  font-size: var(--t-micro); color: var(--text-faint);
  letter-spacing: var(--track); text-transform: uppercase;
}
.bk-health {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--ink-700);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.bk-health[data-trust="OK"] { color: var(--trust-ok); border-color: rgba(43,191,126,.32); }
.bk-health[data-trust="DEGRADED"] { color: var(--trust-degraded); border-color: rgba(230,163,56,.32); }
.summary-cell .stat-cell-note { margin-top: 3px; }

/* --- Market Setup: workspace + configuration rail ---------------------- */
.setup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s5);
  align-items: start;
}
.setup-main { min-width: 0; }
.setup-rail {
  position: sticky;
  top: 0;
  display: grid;
  gap: var(--s5);
}
.setup-rail .panel { margin-bottom: 0; }
/* Compact fields in the rail: a full-width text input for an IP address was
   the single strongest "admin form" signal on this screen. */
.setup-rail .form { padding: var(--s4) var(--s5); gap: var(--s4); }
.setup-rail .input { padding: 8px var(--s3); font-size: var(--t-sm); }
.setup-rail .field-k { font-size: var(--t-micro); }

.list-tools {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--ink-900);
}
.list-tools .input { flex: 1 1 auto; padding: 8px var(--s3); font-size: var(--t-sm); }
.list-count {
  flex: none;
  font-size: var(--t-micro);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* Selected rows are legible at a glance, not just by a small tick. */
.matrix tbody tr:has(input[data-instrument]:checked) {
  background: rgba(91, 140, 255, .055);
  box-shadow: inset 2px 0 0 var(--accent);
}

.savebar { position: static; box-shadow: var(--shadow-2), var(--edge-top); }

@media (max-width: 1500px) {
  .setup-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1180px) {
  .setup-layout { grid-template-columns: 1fr; }
  .setup-rail { position: static; }
}

/* The summary strip is a six-column grid on Overview. Where a screen supplies
   fewer cells, they should fill the row rather than leave a hollow slot. */
.summary { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
.summary { grid-template-columns: none; }
.summary-cell { min-width: 0; }
.summary-cell .summary-v { overflow-wrap: anywhere; }
@media (max-width: 1180px) {
  .summary { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
}

.cov-bar {
  display: inline-block; width: 120px; height: 6px;
  border-radius: var(--r-pill); background: var(--ink-600);
  overflow: hidden; vertical-align: middle;
}
.cov-bar span { display: block; height: 100%; background: var(--text-faint); }
.cov-bar span[data-full="true"] { background: var(--trust-ok); }
.row-v { display: inline-flex; align-items: center; gap: var(--s3); }

/* --- System readiness groups ------------------------------------------ */
.panel[data-blocking="true"] { border-color: rgba(239, 90, 84, .34); }
.gate-meter {
  height: 3px; background: var(--ink-600);
  border-bottom: 1px solid var(--line);
}
.gate-meter span { display: block; height: 100%; background: var(--trust-degraded); }
.gate-meter span[data-full="true"] { background: var(--trust-ok); }
.gate { align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s5); }
.gate-text { display: grid; gap: 3px; min-width: 0; }
.gate-name { font-size: var(--t-sm); color: var(--text); }
.gate[data-ok="false"] .gate-name { color: var(--text-strong); }
.gate-say { font-size: var(--t-micro); color: var(--text-muted); line-height: 1.5; }
.gate-code {
  justify-self: start;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint);
  background: var(--ink-900); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 5px;
}

/* --- Options: delta-OI, ladder, limitation note ------------------------ */
.doi { display: grid; gap: var(--s3); margin-top: var(--s5); }
.doi-k {
  font-size: var(--t-micro); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--text-faint);
}
.doi-line { display: grid; grid-template-columns: 56px 1fr 120px; align-items: center; gap: var(--s3); }
.doi-label { font-size: var(--t-sm); color: var(--text-muted); }
.doi-track { position: relative; height: 12px; background: var(--ink-600); border-radius: 3px; }
.doi-zero { position: absolute; left: 50%; top: -2px; width: 1px; height: 16px; background: var(--line-strong); }
.doi-bar { position: absolute; top: 0; height: 100%; border-radius: 2px; }
.doi-bar[data-dir="up"] { background: var(--up); }
.doi-bar[data-dir="down"] { background: var(--down); }
.doi-v {
  text-align: right; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-size: var(--t-sm);
  color: var(--text);
}
.doi-v[data-dir="up"] { color: var(--up); }
.doi-v[data-dir="down"] { color: var(--down); }
.ladder-block { display: grid; gap: var(--s3); margin-top: var(--s5); }
.ladder-block .strike-list { padding: 0; }
.limitation {
  display: flex; gap: var(--s3); align-items: flex-start;
  margin-top: var(--s5); padding: var(--s3) var(--s4);
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  color: var(--text-faint);
}
.limitation-t { display: block; font-size: var(--t-sm); color: var(--text-muted); }
.limitation-b { display: block; margin-top: 2px; font-size: var(--t-micro); line-height: 1.5; }

/* --- Analytics: compact decision --------------------------------------- */
.decision-compact {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: var(--s6); padding: var(--s4) var(--s5);
}
.decision-compact .decision-word { font-size: var(--t-xl); }
.decision-compact-body { display: grid; gap: var(--s3); }
.decision-compact .decision-why { margin: 0; font-size: var(--t-sm); }
.decision-vocab { display: flex; gap: 6px; }
.vocab-chip {
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 10px; letter-spacing: var(--track);
  color: var(--text-faint);
  background: var(--ink-900); border: 1px solid var(--line);
}
.vocab-chip[data-active="true"] {
  color: var(--text); border-color: var(--line-strong); background: var(--ink-600);
}

/* A blocking gate must never share a satisfied gate's treatment. */
.gate[data-ok="false"] { background: rgba(239, 90, 84, .07); }
.gate[data-ok="false"] .gate-mark { color: var(--trust-blocked); }
.gate[data-ok="true"] .gate-mark { color: var(--trust-ok); }
.decision-policy {
  font-size: var(--t-micro); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--text-faint);
}

/* --- segmented control (FYERS authentication mode) --------------------- */
.segmented {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--ink-900); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.seg-tab {
  padding: 7px var(--s4); border: 0; border-radius: 5px;
  background: none; color: var(--text-muted);
  font: inherit; font-size: var(--t-sm); cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.seg-tab:hover { color: var(--text); }
.seg-tab[aria-selected="true"] {
  color: var(--text-strong); background: var(--ink-600);
  box-shadow: var(--edge-top);
}

/* === MT8 AI Intelligence workspace ======================================
   Inherits the accepted tokens. No new colour vocabulary is introduced for
   AI output: the accent still carries interaction, green and red stay
   directional, amber stays degraded. */
.ai-card { display: grid; gap: var(--space-3); }
.ai-card-head { display: flex; align-items: center; gap: var(--space-2); }
.ai-badge {
  font-size: 0.75rem; letter-spacing: 0.04em; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--border);
}
.ai-badge-forecast { color: var(--text); }
.ai-badge-abstain { color: var(--warn); border-color: var(--warn); }
/* A shadow record is visually distinct so it can never read as active. */
.ai-badge-shadow { color: var(--muted); border-style: dashed; }
.ai-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.ai-meta dt { color: var(--muted); font-size: 0.8rem; }
.ai-meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.ai-distribution { display: grid; gap: 4px; }
.ai-dist-row { display: grid; grid-template-columns: 72px 1fr 56px;
  align-items: center; gap: var(--space-2); }
.ai-dist-track { height: 8px; background: var(--surface-2);
  border-radius: 4px; overflow: hidden; }
.ai-dist-fill { height: 100%; }
.ai-dist-p_up { background: var(--up); }
.ai-dist-p_down { background: var(--down); }
.ai-dist-p_neutral { background: var(--muted); }
/* Unknown mass is drawn, never hidden: a model that cannot see must not
   look confident. */
.ai-dist-p_unknown { background: var(--warn); }
.ai-dist-value { text-align: right; font-variant-numeric: tabular-nums; }
.ai-confidence { display: flex; justify-content: space-between; }
.ai-evidence-title { margin: 0 0 4px; font-size: 0.85rem; color: var(--muted); }
.ai-evidence-list { margin: 0; padding-left: 1.1rem; }
.ai-evidence-contradicting { border-left: 2px solid var(--warn);
  padding-left: var(--space-2); }
/* Absence uses the existing absence texture rather than a zero. */
.ai-absent { color: var(--muted); font-style: italic; }
.ai-estimate { color: var(--muted); font-size: 0.85rem; }
.ai-abstain-reason { font-family: var(--font-mono); color: var(--warn); }
.ai-gated-row { display: grid; gap: 2px; margin-bottom: var(--space-2); }
.ai-gated-name { font-family: var(--font-mono); }
.ai-gated-reason { color: var(--warn); font-size: 0.8rem; }
.ai-gated-detail { color: var(--muted); font-size: 0.8rem; }
.ai-lifecycle-row { display: flex; justify-content: space-between; }
.ai-state { font-size: 0.75rem; color: var(--muted); }
.ai-note { color: var(--muted); font-size: 0.85rem; }