/* ============================================================
   TOKENS — light is the base; dark redefines tokens only.
   ============================================================ */
:root{
  color-scheme: light;

  --ground:#F2F5F6;
  --panel:#FFFFFF;
  --panel-2:#F8FAFB;
  --panel-3:#EDF2F3;

  --ink:#101A1D;
  --ink-2:#54646A;
  --ink-3:#5E6F75;

  --rule:#DCE4E6;
  --rule-2:#EBF0F1;

  --accent:#0B5560;
  --accent-2:#0E7683;
  --accent-soft:#E1EDEF;
  --accent-ink:#FFFFFF;

  --good:#0ca30c;
  --warning:#fab219;
  --serious:#ec835a;
  --critical:#d03b3b;
  --good-wash:#E9F6E9;
  --warning-wash:#FDF3DF;
  --serious-wash:#FCEDE7;
  --critical-wash:#FAEAEA;
  --good-ink:#0a6b0a;
  --warning-ink:#8a5d00;
  --serious-ink:#a94d24;
  --critical-ink:#a32c2c;

  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;

  --grid:#E7ECEE;
  --axis:#C6D1D4;
  --track:#E9EFF0;

  --shadow-1: 0 1px 1px rgba(16,26,29,.04);
  --shadow-2: 0 1px 2px rgba(16,26,29,.05), 0 12px 28px -16px rgba(16,26,29,.22);

  --r: 4px;
  --r-lg: 6px;
}

/* Light is the committed default: the OS setting deliberately does NOT flip it,
   because this tool is specified as light-theme. Dark is opt-in via the toggle. */

:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0C1013;
  --panel:#14181A;
  --panel-2:#191E21;
  --panel-3:#1E2427;

  --ink:#E9F0F1;
  --ink-2:#9DAFB5;
  --ink-3:#75878D;

  --rule:#242C2F;
  --rule-2:#1C2225;

  --accent:#4FB3BF;
  --accent-2:#6FC8D2;
  --accent-soft:#13343A;
  --accent-ink:#07171A;

  --good-wash:#0F2A11;
  --warning-wash:#2E2308;
  --serious-wash:#2E1B12;
  --critical-wash:#2E1111;
  --good-ink:#4bc94b;
  --warning-ink:#f5c451;
  --serious-ink:#f0a37f;
  --critical-ink:#ef6d6d;

  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;

  --grid:#212829;
  --axis:#2F393C;
  --track:#20282B;

  --shadow-1: 0 1px 1px rgba(0,0,0,.3);
  --shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -16px rgba(0,0,0,.7);
}

/* ============================================================
   BASE
   ============================================================ */
*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0; font-family:"IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif; font-weight:600; text-wrap:balance; letter-spacing:-.005em; }

.mono{ font-family:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; font-variant-numeric:tabular-nums; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:none; }

button{ font:inherit; color:inherit; }

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

::selection{ background:var(--accent-soft); color:var(--ink); }

/* eyebrow / label */
.eyebrow{
  font-family:"IBM Plex Sans Condensed", sans-serif;
  font-weight:600; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}

.dim{ color:var(--ink-2); }
.dimmer{ color:var(--ink-3); }

/* ============================================================
   SHELL
   ============================================================ */
.app{
  display:grid;
  grid-template-columns:212px minmax(0,1fr);
  min-height:100vh;
}

/* ---- rail ---- */
.rail{
  background:var(--panel);
  border-right:1px solid var(--rule);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  overflow-y:auto;
}

.brand{
  padding:16px 16px 14px;
  border-bottom:1px solid var(--rule);
  display:flex; gap:10px; align-items:flex-start;
}
.brand-mark{
  width:26px;height:26px;flex:none;border-radius:3px;
  background:var(--accent);
  display:grid;place-items:center;
  color:var(--accent-ink);
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600;
  letter-spacing:-.04em;
}
.brand-name{ font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; font-size:14px; line-height:1.15; letter-spacing:.005em; }
.brand-sub{ font-size:10.5px; color:var(--ink-3); letter-spacing:.03em; margin-top:1px; }

.nav{ padding:10px 8px; display:flex; flex-direction:column; gap:1px; }
.nav-group{ padding:12px 8px 5px; }

.nav-item{
  display:flex; align-items:center; gap:9px;
  padding:7px 8px; border-radius:var(--r);
  background:none; border:0; width:100%; text-align:left;
  color:var(--ink-2); cursor:pointer;
  font-size:13px; font-weight:450;
  position:relative;
}
.nav-item:hover{ background:var(--panel-3); color:var(--ink); }
.nav-item[aria-current="true"]{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.nav-item[aria-current="true"]::before{
  content:""; position:absolute; left:-8px; top:6px; bottom:6px; width:2px;
  background:var(--accent); border-radius:0 2px 2px 0;
}
.nav-item svg{ width:15px;height:15px;flex:none; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.9; }
.nav-badge{
  margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600;
  background:var(--critical); color:#fff; border-radius:9px; padding:1px 5px; min-width:18px; text-align:center;
}

.rail-foot{ margin-top:auto; padding:12px 4px 10px; display:flex; flex-direction:column; gap:6px; }

.theme-btn{
  display:flex;align-items:center;gap:7px;
  background:var(--panel-2); border:1px solid var(--rule); border-radius:var(--r);
  padding:6px 9px; cursor:pointer; color:var(--ink-2); font-size:12px; width:100%;
}
.theme-btn:hover{ border-color:var(--axis); color:var(--ink); }
.theme-btn svg{ width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6; }

/* ---- main ---- */
.main{ min-width:0; display:flex; flex-direction:column; }

/* ---- telemetry strip ---- */
.telemetry{
  position:sticky; top:0; z-index:20;
  background:var(--panel);
  border-bottom:1px solid var(--rule);
  display:flex; align-items:stretch; gap:0;
  overflow-x:auto;
}
.tel-cell{
  padding:9px 16px; border-right:1px solid var(--rule-2);
  display:flex; flex-direction:column; gap:1px; white-space:nowrap; flex:none;
}
.tel-cell:last-child{ border-right:0; }
.tel-k{ font-family:"IBM Plex Sans Condensed",sans-serif; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.tel-v{ font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.tel-cell.live{ background:var(--panel-2); }
.tel-push{ margin-left:auto; }

.pulse{ display:inline-block; width:6px;height:6px;border-radius:50%; background:var(--good); margin-right:6px; vertical-align:middle; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.8);} }

/* ---- view ---- */
.view{ padding:20px 22px 56px; display:none; }
.view.active{ display:block; }

.view-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:16px; flex-wrap:wrap; }
.view-title{ font-size:21px; letter-spacing:-.01em; }
.view-desc{ color:var(--ink-2); font-size:13px; max-width:66ch; margin-top:3px; }

/* ============================================================
   PANELS & GRID
   ============================================================ */
.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}

.panel{
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  display:flex; flex-direction:column;
  min-width:0;
}
.panel-head{
  padding:11px 14px; border-bottom:1px solid var(--rule-2);
  display:flex; align-items:center; gap:8px; justify-content:space-between; flex-wrap:wrap;
}
.panel-title{ font-size:13.5px; font-weight:600; letter-spacing:.005em; }
.panel-body{ padding:14px; flex:1; min-width:0; }
.panel-body.tight{ padding:0; }
.panel-foot{ padding:8px 14px; border-top:1px solid var(--rule-2); font-size:11px; color:var(--ink-3); display:flex; gap:12px; flex-wrap:wrap; }

.tag{
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500;
  padding:2px 6px; border-radius:3px; background:var(--panel-3); color:var(--ink-2);
  letter-spacing:.02em; white-space:nowrap;
}
.tag.ai{ background:var(--accent-soft); color:var(--accent); }
.tag.good{ background:var(--good-wash); color:var(--good-ink); }
.tag.warn{ background:var(--warning-wash); color:var(--warning-ink); }
.tag.serious{ background:var(--serious-wash); color:var(--serious-ink); }
.tag.crit{ background:var(--critical-wash); color:var(--critical-ink); }

/* ============================================================
   STAT TILES
   ============================================================ */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:0; }
.tile{ padding:13px 14px; border-right:1px solid var(--rule-2); display:flex; flex-direction:column; gap:2px; min-width:0; }
.tile:last-child{ border-right:0; }
.tile-k{ font-family:"IBM Plex Sans Condensed",sans-serif; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.tile-v{ font-family:"IBM Plex Mono",monospace; font-size:25px; font-weight:500; line-height:1.15; letter-spacing:-.02em; }
.tile-v .unit{ font-size:14px; color:var(--ink-3); font-weight:400; }
.tile-d{ font-size:11.5px; color:var(--ink-2); display:flex; align-items:center; gap:5px; }

.delta{ font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500; display:inline-flex; align-items:center; gap:3px; }
.delta.up{ color:var(--good-ink); }
.delta.down{ color:var(--critical-ink); }
.delta.flat{ color:var(--ink-3); }

/* ============================================================
   PROGRESS / QUOTA
   ============================================================ */
.quota{ display:flex; flex-direction:column; gap:14px; }
.quota-row{ display:flex; flex-direction:column; gap:6px; }
.quota-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.quota-name{ font-size:13px; font-weight:600; }
.quota-num{ font-family:"IBM Plex Mono",monospace; font-size:13px; }
.quota-num b{ font-weight:600; font-size:16px; }
.quota-num span{ color:var(--ink-3); }

.bar{
  position:relative; height:22px; background:var(--track);
  border-radius:3px; overflow:hidden; display:flex;
}
.bar-seg{ height:100%; }
.bar-seg + .bar-seg{ box-shadow:-2px 0 0 var(--panel); }
.pace-mark{
  position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink);
  border-radius:1px;
}
.pace-mark::after{
  content:attr(data-label); position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:var(--ink-2); white-space:nowrap;
  background:var(--panel); padding:0 3px;
}
.quota-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--ink-2); }
.swatch{ display:inline-block; width:9px;height:9px;border-radius:2px; margin-right:5px; vertical-align:-1px; }

/* ============================================================
   ALERT STREAM
   ============================================================ */
.stream{ display:flex; flex-direction:column; max-height:var(--stream-h,420px); overflow-y:auto; }
.alert{
  display:flex; gap:11px; padding:10px 14px 10px 11px;
  border-bottom:1px solid var(--rule-2); border-left:3px solid transparent;
  cursor:pointer; background:none; width:100%; text-align:left; align-items:flex-start;
}
.alert:hover{ background:var(--panel-2); }
.alert.sev-critical{ border-left-color:var(--critical); }
.alert.sev-serious{ border-left-color:var(--serious); }
.alert.sev-warning{ border-left-color:var(--warning); }
.alert.sev-good{ border-left-color:var(--good); }
.alert.sev-info{ border-left-color:var(--axis); }
.alert-ico{ width:16px;height:16px;flex:none;margin-top:1px; }
.alert-ico svg{ width:16px;height:16px; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.sev-critical .alert-ico{ color:var(--critical); }
.sev-serious .alert-ico{ color:var(--serious); }
.sev-warning .alert-ico{ color:var(--warning-ink); }
.sev-good .alert-ico{ color:var(--good); }
.sev-info .alert-ico{ color:var(--ink-3); }
.alert-main{ min-width:0; flex:1; }
.alert-t{ font-size:12.5px; font-weight:600; line-height:1.35; }
.alert-s{ font-size:11.5px; color:var(--ink-2); line-height:1.45; margin-top:1px; }
.alert-m{ display:flex; gap:8px; margin-top:5px; flex-wrap:wrap; align-items:center; }
.alert-time{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3); flex:none; }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:12.5px; }
thead th{
  font-family:"IBM Plex Sans Condensed",sans-serif; font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600; text-align:left;
  padding:8px 12px; border-bottom:1px solid var(--rule); white-space:nowrap; background:var(--panel-2);
  position:sticky; top:0;
}
tbody td{ padding:8px 12px; border-bottom:1px solid var(--rule-2); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:var(--panel-2); }
td.num, th.num{ text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }
.who{ display:flex; align-items:center; gap:8px; }
.avatar{
  width:22px;height:22px;border-radius:3px;flex:none;
  background:var(--panel-3); color:var(--ink-2);
  display:grid;place-items:center; font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:600;
}
.who-id{ font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--ink-3); }

/* micro bar inside a table cell */
.mbar{ display:flex; align-items:center; gap:7px; justify-content:flex-end; }
.mbar-track{ width:64px; height:5px; border-radius:3px; background:var(--track); overflow:hidden; flex:none; }
.mbar-fill{ height:100%; border-radius:3px; }

/* integrity meter */
.meter{ display:inline-flex; align-items:center; gap:7px; }
.meter-t{ width:52px;height:6px;border-radius:3px;background:var(--track);overflow:hidden;flex:none; }
.meter-f{ height:100%; }

/* ============================================================
   CHART SCAFFOLD
   ============================================================ */
.chart{ width:100%; display:block; overflow:visible; }
.chart text{ font-family:"IBM Plex Mono", monospace; font-variant-numeric:tabular-nums; }
.ax-lab{ font-size:10px; fill:var(--ink-3); }
.val-lab{ font-size:10.5px; fill:var(--ink-2); }
.gridline{ stroke:var(--grid); stroke-width:1; }
/* A reference line — the target, a benchmark — is not a gridline and must not
   wear its colour. Carrying class="gridline" AND stroke="…" on the same element
   silently lost: a CSS declaration outranks a presentation attribute, so the
   line rendered in near-invisible grid grey. */
.refline{ stroke:var(--ink-3); stroke-width:1.25; }
.axisline{ stroke:var(--axis); stroke-width:1; }

.legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--ink-2); margin-top:10px; }
.legend i{ width:9px;height:9px;border-radius:2px; display:inline-block; margin-right:5px; vertical-align:-1px; font-style:normal; }

/* hbar list */
.hbars{ display:flex; flex-direction:column; gap:7px; }
.hbar{ display:grid; grid-template-columns:var(--lab,150px) 1fr auto; align-items:center; gap:10px; }
.hbar-l{ font-size:12px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hbar-t{ height:9px; background:var(--track); border-radius:2px; overflow:hidden; }
.hbar-f{ height:100%; border-radius:2px; }
.hbar-v{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink); min-width:44px; text-align:right; }

/* matrix / score rows */
.score-row{ display:grid; grid-template-columns:1fr 66px 92px; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--rule-2); }
.score-row:last-child{ border-bottom:0; }
.score-l{ font-size:12.5px; }
.score-track{ height:6px; border-radius:3px; background:var(--track); position:relative; overflow:hidden; grid-column:1/-1; margin-top:-2px; }

/* ============================================================
   FORMS / CONTROLS
   ============================================================ */
.seg{ display:inline-flex; background:var(--panel-3); border-radius:var(--r); padding:2px; gap:2px; }
.seg button{
  border:0;background:none;padding:4px 10px;border-radius:3px;cursor:pointer;
  font-size:12px; color:var(--ink-2); font-weight:500;
}
.seg button[aria-pressed="true"]{ background:var(--panel); color:var(--ink); box-shadow:var(--shadow-1); }

.btn{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--rule); background:var(--panel); color:var(--ink-2);
  padding:5px 11px; border-radius:var(--r); cursor:pointer; font-size:12px; font-weight:500; text-decoration:none;
}
.btn:hover{ border-color:var(--axis); color:var(--ink); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.primary:hover{ background:var(--accent-2); border-color:var(--accent-2); }
.btn svg{ width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7; }

.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--rule); background:var(--panel); border-radius:12px;
  padding:3px 10px; font-size:11.5px; color:var(--ink-2); cursor:pointer;
}
.chip:hover{ border-color:var(--axis); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent-soft); color:var(--accent); font-weight:600; }

/* ============================================================
   AI CONSOLE
   ============================================================ */
.ai-console{ background:var(--panel-2); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; }
.ai-bar{ display:flex; align-items:center; gap:9px; padding:10px 13px; border-bottom:1px solid var(--rule-2); }
.ai-dot{ width:7px;height:7px;border-radius:50%;background:var(--accent); flex:none; }
.ai-in{
  flex:1; border:0; background:none; color:var(--ink); font:inherit; font-size:13px; outline:none; min-width:0;
}
.ai-in::placeholder{ color:var(--ink-3); }
.ai-out{ padding:13px; font-size:13px; line-height:1.6; }
.ai-out p{ margin:0 0 9px; }
.ai-out p:last-child{ margin-bottom:0; }
.ai-out strong{ font-weight:600; }
.ai-cite{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3); }

.quoted{
  border-left:2px solid var(--rule); padding:2px 0 2px 11px; margin:0 0 9px;
  font-size:12.5px; color:var(--ink-2); font-style:italic;
}

/* ============================================================
   RULE CARDS / BLUEPRINT
   ============================================================ */
.rules{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:0; }
.rule-card{ padding:12px 14px; border-right:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2); }
.rule-h{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.rule-n{ font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--ink-3); }
.rule-t{ font-size:12.5px; font-weight:600; }
.rule-d{ font-size:11.5px; color:var(--ink-2); line-height:1.5; }
.rule-m{ margin-top:7px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.stack{ display:flex; flex-direction:column; gap:14px; }
.kv{ display:grid; grid-template-columns:132px 1fr; gap:10px; padding:7px 0; border-bottom:1px solid var(--rule-2); font-size:12.5px; }
.kv:last-child{ border-bottom:0; }
.kv dt{ color:var(--ink-3); font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding-top:2px; }
.kv dd{ margin:0; }

code{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  background:var(--panel-3); padding:1px 5px; border-radius:3px; color:var(--ink);
}
pre{
  margin:0; overflow-x:auto; background:var(--panel-2); border:1px solid var(--rule-2);
  border-radius:var(--r); padding:12px 13px;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; line-height:1.65; color:var(--ink-2);
}
pre b{ color:var(--ink); font-weight:600; }
pre .cm{ color:var(--ink-3); }
pre .kw{ color:var(--accent); font-weight:600; }

/* flow */
.flow{ display:flex; align-items:stretch; gap:0; overflow-x:auto; padding-bottom:4px; }
.flow-step{
  flex:1; min-width:158px; padding:12px 13px; border:1px solid var(--rule); background:var(--panel);
  position:relative;
}
.flow-step:first-child{ border-radius:var(--r) 0 0 var(--r); }
.flow-step:last-child{ border-radius:0 var(--r) var(--r) 0; }
.flow-step + .flow-step{ border-left:0; }
.flow-n{ font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--accent); font-weight:600; }
.flow-t{ font-size:12.5px; font-weight:600; margin:3px 0 3px; }
.flow-d{ font-size:11.5px; color:var(--ink-2); line-height:1.45; }

/* status dot list */
.dotlist{ display:flex; flex-direction:column; gap:0; }
.dotrow{ display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--rule-2); font-size:12.5px; }
.dotrow:last-child{ border-bottom:0; }
.dot{ width:7px;height:7px;border-radius:50%;flex:none; }

.note{
  background:var(--panel-2); border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:var(--r); padding:11px 13px; font-size:12.5px; color:var(--ink-2); line-height:1.6;
}
.note b{ color:var(--ink); font-weight:600; }

/* footnote */
.foot{
  margin-top:26px; padding-top:14px; border-top:1px solid var(--rule);
  font-size:11.5px; color:var(--ink-3); line-height:1.6; max-width:88ch;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .c3{grid-column:span 6}.c4{grid-column:span 6}.c5{grid-column:span 12}
  .c7{grid-column:span 12}.c8{grid-column:span 12}.c9{grid-column:span 12}
}
@media (max-width:860px){
  .app{ grid-template-columns:1fr; }
  .rail{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--rule); }
  .nav{ flex-direction:row; flex-wrap:wrap; }
  .nav-item{ width:auto; }
  .nav-group{ display:none; }
  .rail-foot{ flex-direction:row; }
  .c3,.c4,.c6{grid-column:span 12}
  .view{ padding:16px 14px 44px; }
  .tag{ white-space:normal; }
  .tiles{ grid-template-columns:repeat(auto-fit,minmax(136px,1fr)); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---- supplementary components ---- */
.div-row{ display:grid; grid-template-columns:112px 1fr 58px; align-items:center; gap:9px; padding:5px 0; }
.div-l{ font-size:11.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.div-track{ position:relative; height:11px; background:var(--track); border-radius:2px; }
.div-axis{ position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--axis); }
.div-fill{ position:absolute; top:0; bottom:0; border-radius:2px; }
.div-v{ font-family:"IBM Plex Mono",monospace; font-size:11px; text-align:right; }

.qrow{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--rule-2); font-size:12px; }
.qrow:last-child{ border-bottom:0; }
.qrow .q{ color:var(--ink-3); flex:1; min-width:0; }
.qrow .a{ font-family:"IBM Plex Mono",monospace; text-align:right; flex:none; max-width:56%; }
.qrow.hit .a{ color:var(--critical-ink); font-weight:600; }
.qrow.hit .q{ color:var(--ink-2); }

.insp-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.insp-id{ font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:600; }
.insp-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.section-lab{ font-family:"IBM Plex Sans Condensed",sans-serif; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:14px 0 5px; }

.theme-row{ display:grid; grid-template-columns:1fr 62px; gap:10px; align-items:center; padding:6px 0; }
.theme-l{ font-size:12.5px; }
.theme-bar{ grid-column:1/-1; height:7px; border-radius:2px; background:var(--track); overflow:hidden; margin-top:-3px; }
.theme-f{ height:100%; border-radius:2px; }
.theme-v{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; text-align:right; }
.theme-yoy{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; }

.emerg{ border:1px solid var(--rule); border-left:3px solid var(--warning); border-radius:var(--r); padding:10px 12px; margin-bottom:9px; }
.emerg-t{ font-size:12.5px; font-weight:600; }
.emerg-d{ font-size:11.5px; color:var(--ink-2); margin-top:2px; line-height:1.5; }
.emerg-a{ display:flex; gap:6px; margin-top:8px; }

.mm-row{ padding:9px 0; border-bottom:1px solid var(--rule-2); }
.mm-row:last-child{ border-bottom:0; }
.mm-top{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.mm-q{ font-size:12px; color:var(--ink-2); font-style:italic; line-height:1.5; margin-top:4px; }

.quote-card{ border:1px solid var(--rule); border-radius:var(--r); padding:11px 12px; margin-bottom:9px; background:var(--panel-2); }
.quote-t{ font-size:12.5px; line-height:1.55; }
.quote-m{ display:flex; gap:8px; margin-top:7px; align-items:center; flex-wrap:wrap; }

.heat-cell{ stroke:var(--panel); stroke-width:2; }
.tt{
  position:fixed; z-index:80; pointer-events:none; opacity:0;
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--r);
  box-shadow:var(--shadow-2); padding:7px 10px; font-size:11.5px; color:var(--ink);
  transition:opacity .12s; max-width:240px;
}
.tt b{ font-family:"IBM Plex Mono",monospace; font-weight:600; }
.tt .tt-k{ color:var(--ink-3); font-size:10.5px; }
/* ===========================================================================
   Account block.

   Lives in field.css because both shells load it — the console and the live
   dashboard show the identical control, so signing out is in the same place
   whichever screen you happen to be on.
   =========================================================================== */
.user-foot{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border-top:1px solid var(--rule);
}
.user-foot-avatar{
  width:30px; height:30px; border-radius:4px; flex:none;
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
}
.user-foot-who{ min-width:0; flex:1; }
.user-foot-name{
  font-size:12.5px; font-weight:600; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.user-foot-role{ font-size:10.5px; color:var(--ink-3); }

.user-foot-out{
  display:grid; place-items:center; flex:none;
  width:30px; height:30px; padding:0;
  border:1px solid var(--rule); border-radius:var(--r);
  background:var(--panel); color:var(--ink-2); cursor:pointer;
}
.user-foot-out:hover{ border-color:var(--critical); color:var(--critical-ink); }
.user-foot-out svg{
  width:15px; height:15px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* "Back to console" sits above the account block on the dashboard. */
.rail-back{
  display:flex; align-items:center; gap:8px;
  padding:8px; margin:0 8px 6px; border-radius:var(--r);
  color:var(--ink-2); text-decoration:none; font-size:12.5px;
}
.rail-back:hover{ background:var(--panel-3); color:var(--ink); }
.rail-back svg{
  width:14px; height:14px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* ===========================================================================
   Question analytics.

   One card per question, chart chosen by what the data is doing rather than
   by the question's type. Cards are the same width so the eye can compare
   down a column; the chart inside varies.
   =========================================================================== */

/* Likert diverging ramp: two poles with a neutral midpoint, so "middling"
   reads as absent rather than as a colour of its own. Ordered, not
   categorical, which is why adjacent steps are deliberately close. */
:root{
  --lk-1:#A93226;
  --lk-2:#E0A29C;
  --lk-3:#CFCEC8;
  --lk-4:#9EC5F4;
  --lk-5:#2A78D6;
}
:root[data-theme="dark"]{
  --lk-1:#C0392B;
  --lk-2:#B5716B;
  --lk-3:#4A4A46;
  --lk-4:#5598E7;
  --lk-5:#3987E5;
}

.qsec{ margin:26px 0 12px; display:flex; align-items:baseline; gap:10px; }
.qsec-title{
  font-family:"IBM Plex Sans Condensed",sans-serif; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600;
}
.qsec-rule{ flex:1; height:1px; background:var(--rule); }

.qcard{ display:flex; flex-direction:column; }
.qcard-head{
  padding:13px 15px 11px; border-bottom:1px solid var(--rule-2);
  display:flex; gap:12px; align-items:flex-start;
}
.qcard-code{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600;
  color:var(--accent); background:var(--accent-soft);
  padding:2px 6px; border-radius:3px; flex:none; margin-top:1px;
}
.qcard-q{ font-size:13.5px; font-weight:600; line-height:1.4; flex:1; min-width:0; }
.qcard-meta{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; align-items:center; }
.qcard-body{ padding:14px 15px 15px; flex:1; }

/* ---------------------------------------------------------------- donut */
.qdonut{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.qdonut-figure{ position:relative; flex:none; }
.qdonut-centre{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; line-height:1.1;
}
.qdonut-pct{ font-family:"IBM Plex Mono",monospace; font-size:22px; font-weight:600; }
.qdonut-lab{ font-size:10px; color:var(--ink-3); letter-spacing:.04em; }
.qdonut-keys{ display:flex; flex-direction:column; gap:7px; min-width:0; flex:1; }
.qkey{ display:flex; align-items:center; gap:8px; font-size:12.5px; min-width:0; }
.qkey i{ width:10px;height:10px;border-radius:2px;flex:none; }
.qkey-l{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.qkey-v{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2); flex:none; }

/* ---------------------------------------------------------------- gauge */
.qgauge{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.qgauge-read{ flex:none; text-align:center; }
.qgauge-mean{ font-family:"IBM Plex Mono",monospace; font-size:34px; font-weight:500; line-height:1; letter-spacing:-.02em; }
.qgauge-of{ font-size:12px; color:var(--ink-3); }
.qgauge-delta{ margin-top:5px; }

/* ---------------------------------------------------------------- bars */
.qbars{ display:flex; flex-direction:column; gap:9px; }
.qbar-row{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:baseline; }
.qbar-l{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qbar-v{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2); }
.qbar-v b{ color:var(--ink); font-weight:600; font-size:13px; }
.qbar-track{ grid-column:1/-1; height:9px; border-radius:3px; background:var(--track); overflow:hidden; margin-top:-2px; }
.qbar-fill{ height:100%; border-radius:3px; transition:width .35s cubic-bezier(.4,0,.2,1); }

/* ---------------------------------------------------------------- likert */
.qlk{ display:flex; flex-direction:column; gap:12px; }
.qlk-row{ display:flex; flex-direction:column; gap:5px; }
.qlk-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.qlk-label{ font-size:12.5px; font-weight:500; }
.qlk-nums{ display:flex; gap:10px; align-items:baseline; flex:none; }
.qlk-mean{ font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:600; }
.qlk-bar{ display:flex; height:20px; border-radius:3px; overflow:hidden; background:var(--track); }
.qlk-seg{ height:100%; position:relative; }
.qlk-seg + .qlk-seg{ box-shadow:-2px 0 0 var(--panel); }
.qlk-seg span{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:10px; color:#fff; font-weight:500;
}
.qlk-seg.pale span{ color:var(--ink-2); }
.qlk-box{ display:flex; gap:12px; font-size:11px; color:var(--ink-3); }
.qlk-box b{ font-family:"IBM Plex Mono",monospace; font-weight:600; }
.qlk-box .pos{ color:var(--s1); }
.qlk-box .neg{ color:var(--critical-ink); }

/* ---------------------------------------------------------------- numbers */
.qnum{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:0; }
.qnum-cell{ padding:0 14px 0 0; border-right:1px solid var(--rule-2); }
.qnum-cell:last-child{ border-right:0; }
.qnum-k{ font-family:"IBM Plex Sans Condensed",sans-serif; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:600; display:block; }
.qnum-v{ font-family:"IBM Plex Mono",monospace; font-size:20px; font-weight:500; }
.qnum-d{ font-size:11px; color:var(--ink-3); }

/* ---------------------------------------------------------------- empty */
.qempty{
  padding:20px; text-align:center; color:var(--ink-3); font-size:12.5px;
  border:1px dashed var(--rule); border-radius:var(--r); background:var(--panel-2);
}

@media (prefers-reduced-motion: reduce){ .qbar-fill{ transition:none; } }


/* ---- Against Last Round ------------------------------------------------ */

.bm-list{ display:flex; flex-direction:column; gap:8px; }
.bm-row{
  display:grid; gap:10px; align-items:center; background:var(--panel);
  border:1px solid var(--rule); border-radius:var(--r-lg); padding:12px 14px;
  grid-template-columns:minmax(0,1.6fr) 72px 72px 92px minmax(0,1.1fr);
  grid-template-areas:"name prior now delta word" "track track track track track";
}
.bm-name{ grid-area:name; font-size:13.5px; font-weight:600; line-height:1.35; }
.bm-base{ display:block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3); font-weight:400; margin-top:2px; }
.bm-prior{ grid-area:prior; }
.bm-now{ grid-area:now; }
.bm-prior,.bm-now{ display:flex; flex-direction:column; gap:1px; }
.bm-k{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.bm-v{ font-family:"IBM Plex Mono",monospace; font-size:16px; font-weight:600; }
.bm-prior .bm-v{ color:var(--ink-3); }
.bm-delta{ grid-area:delta; font-family:"IBM Plex Mono",monospace; font-size:14px; white-space:nowrap; }
.bm-arrow{ font-size:15px; }
.bm-word{ grid-area:word; font-size:12px; color:var(--ink-2); line-height:1.35; }

/* A movement that cannot be called gets no colour and no arrow. The muted
   state is the honest one, not a lesser version of a real result. */
.bm-row.up   .bm-delta,.bm-row.up   .bm-arrow{ color:var(--good-ink); }
.bm-row.down .bm-delta,.bm-row.down .bm-arrow{ color:var(--critical-ink); }
.bm-row.flat .bm-delta,.bm-row.flat .bm-arrow{ color:var(--ink-3); }
.bm-row.muted{ background:var(--panel-2); }
.bm-row.muted .bm-word{ font-style:italic; }

.bm-track{
  grid-area:track; position:relative; height:6px; border-radius:3px;
  background:var(--track); margin-top:2px;
}
.bm-span{ position:absolute; top:0; height:6px; border-radius:3px; }
.bm-span.up{ background:var(--good); }
.bm-span.down{ background:var(--critical); }
.bm-pin{
  position:absolute; top:-3px; width:2px; height:12px; border-radius:1px;
  transform:translateX(-1px);
}
.bm-pin.prior{ background:var(--ink-3); }
.bm-pin.now{ background:var(--ink); width:3px; }

/* ---- Excellence Model -------------------------------------------------- */

.dgep-card{ gap:8px; }
.dgep-score{ display:flex; align-items:baseline; gap:6px; margin-top:2px; }
.dgep-score b{ font-family:"IBM Plex Mono",monospace; font-size:26px; font-weight:600; }
.dgep-of{ font-size:12px; color:var(--ink-3); }
.dgep-base{ font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); margin-left:auto; }
.dgep-none{ font-size:13px; color:var(--ink-3); font-style:italic; }
.dgep-q{ font-size:11.5px; color:var(--ink-3); }
.dgep-note{ font-size:11.5px; color:var(--ink-2); line-height:1.45; margin:4px 0 0; }

@media (max-width: 860px){
  .bm-row{
    grid-template-columns:minmax(0,1fr) 68px 68px;
    grid-template-areas:"name prior now" "word delta delta" "track track track";
  }
}