/* Triage TUI — terminal-style web client. Colours from the design handoff. */
:root {
  --bg: #14161f;
  --chrome: #1b1d2b;
  --rule: #24263a;
  --rule2: #3a3d55;
  --hover: #20222f;
  --sel: #2b2547;
  --title-fg: #e7e5fe;
  --text: #c9ccdb;
  --strong: #e9e9ed;
  --white: #ffffff;
  --dim: #8a8ea3;
  --faint: #6f7387;
  --faint2: #595d6c;
  --label: #67e8f9;
  --accent: #b5abfc;
  --violet: #a79ff0;
  --magenta: #e879f9;
  --ok: #4ade80;
  --warn: #f59e0b;
  --crit: #f87171;
  --info: #60a5fa;
  --key: #22253a;
  --key-line: #2e3149;
  --key-hover: #2b2f4a;
  --key-down: #3a2f5e;
  --chip-on: #e879f9;
  --chip-off: #7c4586;
  /* The CLI's size, about 15px with ~19.5px rows. Menlo rather than the
     Terminal's SF Mono: every Mac has Menlo and every browser can use it,
     where SF Mono reaches only Safari. JetBrains Mono off the Mac. */
  --mono: Menlo, "JetBrains Mono", monospace;
  --fs: 15px;
  --lh: 1.3;
}

/* Dim: the same layout with less glare. Lower-contrast text, desaturated
   accents and status colours. D toggles it; the choice is kept per browser.
   Colours that scripts paint straight into SVG/canvas are toned with a filter. */
:root[data-theme="dim"] {
  --bg: #121318;
  --chrome: #17181f;
  --rule: #22232c;
  --rule2: #33343f;
  --hover: #1c1d25;
  --sel: #262433;
  --title-fg: #c4c2d6;
  --text: #a7a9b5;
  --strong: #c2c3ca;
  --white: #d6d6dc;
  --dim: #7a7d8b;
  --faint: #626573;
  --faint2: #4e505b;
  --label: #7fb3bb;
  --accent: #9a93c4;
  --violet: #8f89b8;
  --magenta: #b48bbb;
  --ok: #7fae8a;
  --warn: #c39a52;
  --crit: #c47f7a;
  --info: #7f9cc0;
  --key: #1d1e27;
  --key-line: #2a2b36;
  --key-hover: #262733;
  --key-down: #302b42;
  --chip-on: #b48bbb;
  --chip-off: #5f4864;
}
:root[data-theme="dim"] svg,
:root[data-theme="dim"] canvas,
:root[data-theme="dim"] .hzone { filter: saturate(.6) brightness(.85); }

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--mono);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { overflow: hidden; }
button { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--white); }

#app {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
  touch-action: manipulation;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
#app[hidden], .splash-page[hidden] { display: none; }
.splash-page { height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; }

.dot { width: 7px; height: 7px; border-radius: 99px; display: inline-block; flex-shrink: 0; background: currentColor; }

/* ── session tab bar (44px) ────────────────────────────────────── */
.tabbar {
  height: 44px; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 18px;
  padding-top: env(safe-area-inset-top); box-sizing: content-box;
  background: var(--chrome); border-bottom: 1px solid var(--rule);
  font-size: 12.5px; color: var(--dim);
  white-space: nowrap; overflow: hidden;
}
.tabbar .ti { font-size: 16px; color: var(--accent); }
.tabbar .tname { color: var(--title-fg); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 0; margin-right: 14px; }
.tabbar .ver { color: var(--faint2); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tabbar .who { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  color: var(--dim); background: transparent; border: 0; cursor: pointer;
}
.iconbtn:hover { background: var(--hover); color: var(--strong); }
.iconbtn i { font-size: 15px; }

/* ── terminal body ─────────────────────────────────────────────── */
.term {
  flex: 1; min-height: 0; overflow: auto; overflow-x: hidden;
  background: var(--bg);
  padding: 14px 20px 18px;
  font-size: var(--fs); line-height: var(--lh); color: var(--text);
  outline: none;
  -webkit-overflow-scrolling: touch;
}
#hdr { display: flex; flex-direction: column; gap: 9px; margin-bottom: 9px; }
#hdr[hidden] { display: none; }
.hlines { display: flex; flex-direction: column; gap: 2px; }
.hl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.hl > .lab { color: var(--label); width: 5.08em; flex-shrink: 0; }
.hl .pill { display: inline-flex; align-items: baseline; gap: 6px; padding-right: 14px; }
.hl .pill .pk { color: var(--accent); }
.fill { flex: 1; }
.rule {
  height: 1px; flex-shrink: 0;
  background: linear-gradient(90deg, rgba(145,132,217,0), var(--rule2) 48px, var(--rule2) calc(100% - 48px), rgba(145,132,217,0));
}
.statusline { margin: 0; color: var(--violet); text-wrap: pretty; }
.statusline .lab { color: var(--label); }
.matrix { display: flex; flex-direction: column; gap: 3px; }
/* Label column, then the row's cells in their own wrapping block — a cell
   that wraps lines up under the cells, never under the labels. Cells sit
   on a 15ch step so columns align from row to row. */
.mrow { display: flex; align-items: baseline; gap: 10px; }
.mrow > .mk { color: var(--label); width: 5.08em; flex-shrink: 0; }
.mcells { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 2ch; flex: 1; min-width: 0; }
.cell { display: inline-flex; align-items: baseline; gap: 1ch; min-width: 15ch; }
.cell .ck { color: var(--accent); }
.cell.dimmed .ck, .cell.dimmed .cv { color: var(--faint2) !important; }
.allk { color: var(--faint2); }

/* crumb row: tenant + active filters + filter prompt */
.crumb {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  min-height: 21px; margin-bottom: 6px;
}
.crumb-info { display: inline-flex; gap: 6px 14px; flex-wrap: wrap; align-items: baseline; }
.crumb .ck { color: var(--label); }
.crumb .flash { color: var(--warn); }
.fchip {
  display: inline-flex; gap: 6px; align-items: baseline;
  background: var(--sel); color: var(--title-fg); padding: 0 6px; cursor: pointer; border: 0;
}
.fchip .x { color: var(--magenta); }
.prompt { display: inline-flex; align-items: baseline; gap: 6px; flex: 1; min-width: 220px; }
.prompt[hidden] { display: none; }
.prompt-k { color: var(--magenta); }
.prompt input {
  flex: 1; min-width: 80px; background: var(--chrome); border: 0; border-bottom: 1px solid var(--magenta);
  color: var(--white); font: inherit; padding: 1px 6px; outline: none; border-radius: 0;
}
.prompt-hint { color: var(--faint2); font-size: 12px; }

/* ── panels ────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px; align-items: start;
}
.col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.col.g6 { gap: 6px; }
.tbar {
  display: flex; align-items: baseline; gap: 10px;
  background: var(--sel); color: var(--title-fg); padding: 2px 8px; min-width: 0;
}
.tbar.off { background: transparent; color: var(--violet); padding-left: 0; }
.tbar .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbar .hint { color: var(--violet); white-space: nowrap; }
.tbar.off .hint { color: var(--faint); }
.tbar .close { color: #c4b5fd; cursor: pointer; background: none; border: 0; padding: 0; white-space: nowrap; }
.tbar .close:hover { color: var(--white); }
.sub { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.sub > span:first-child { color: var(--magenta); white-space: nowrap; }
.sub::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rule2), rgba(58,61,85,0)); }
.sub.tight { padding-top: 0; padding-bottom: 2px; }

.filters { display: flex; align-items: baseline; gap: 4px 16px; padding: 2px 8px 4px; flex-wrap: wrap; }
.filt { display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer; color: var(--dim); background: none; border: 0; padding: 0; }
.filt:hover { color: var(--white); }
.filt.on { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

/* tables: fixed-width cells + one flex column */
.th, .tr { display: flex; align-items: baseline; gap: 8px; padding: 2px 8px; min-width: 0; }
.th { color: var(--dim); border-bottom: 1px solid var(--rule); padding-top: 0; padding-bottom: 3px; }
.tr { cursor: pointer; color: var(--text); }
.tr:hover { background: var(--hover); }
.tr.sel { background: var(--sel); color: var(--white); }
.tr.sel.blur { background: #221f35; }
.tr.open { background: rgba(245, 158, 11, 0.06); }
.tr.sel.open { background: var(--sel); }
.rows { display: flex; flex-direction: column; max-height: 400px; overflow: auto; overscroll-behavior: contain; }
.rows.tall { max-height: 560px; }
/* A list beside a detail column: the list fills the column to the detail's
   height (never under 560px) and scrolls on its own. Absolute, so the list's
   own length never sets the row height. */
.grid.fill { align-items: stretch; }
.rows-fill { position: relative; flex: 1; min-height: 560px; }
.rows-fill > .rows.tall { position: absolute; inset: 0; max-height: none; }
.c { flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c.r { text-align: right; }
.c.flex { flex: 1; min-width: 0; }
.mark { width: 1.23em; flex-shrink: 0; color: var(--magenta); }
.rdot { width: 9px; height: 9px; border-radius: 99px; display: block; flex-shrink: 0; align-self: center; }
.rdot.ring { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--faint); }
.rdot.dash { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--faint2); border: 1px dashed var(--faint2); }
.empty { padding: 8px; color: var(--dim); }
.splash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2em; padding: 8px; text-align: center; }
.splash-art { margin: 0 0 0.4em; color: var(--accent); font-size: clamp(5px, 1.25vw, 13px); line-height: 1.05; }
.splash .btnrow { justify-content: center; }
.tag { color: var(--faint); font-size: 12px; }

/* key/value detail rows */
.kvs { display: flex; flex-direction: column; gap: 1px; }
.kv { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.kv > .k { width: 8em; flex-shrink: 0; color: var(--label); }
.kv.w118 > .k { width: 9.08em; }
.kv.w126 > .k { width: 9.69em; }
.kv > .v { min-width: 0; overflow-wrap: anywhere; color: var(--strong); }
.kv > .s { color: var(--faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.para { margin: 0; line-height: var(--lh); text-wrap: pretty; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.note { color: var(--faint); }
.blast { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.blast .k { width: 8em; flex-shrink: 0; color: var(--label); }
.bar { flex: 1; height: 14px; background: var(--chrome); box-shadow: inset 0 0 0 1px var(--rule); position: relative; display: block; min-width: 40px; }
.bar > span { position: absolute; left: 0; top: 0; bottom: 0; display: block; }
.blast .v { width: 4.92em; text-align: right; flex-shrink: 0; color: var(--strong); }
.nb { display: flex; align-items: baseline; gap: 8px; padding: 1px 0; cursor: pointer; background: none; border: 0; text-align: left; color: var(--text); width: 100%; }
.nb:hover { color: var(--white); background: var(--hover); }
.nb .arrow { width: 1.23em; flex-shrink: 0; }
.tree { white-space: pre; color: var(--faint); }
.legendrow { display: flex; align-items: baseline; gap: 4px 18px; flex-wrap: wrap; padding: 0 8px 4px; }
.lg { display: inline-flex; align-items: baseline; gap: 6px; }
.two { display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; padding: 2px 0; }
.two .k { color: var(--label); }
.box {
  border: 1px solid var(--rule2); padding: 14px 16px; max-width: 58.46em;
  display: flex; flex-direction: column; gap: 10px;
}
/* Tenant picker: the table box with the highlighted tenant's detail
   beside it, centred; the pane hangs off its top at zero height, so the table stays put as the pane changes size. */
.modal-wrap { font-size: var(--fs); line-height: var(--lh); position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-wrap[hidden] { display: none; }
.modal-back { position: absolute; inset: 0; background: rgba(10, 11, 18, 0.72); }
.tp { position: relative; display: flex; align-items: flex-start; gap: 24px; max-width: 100%; max-height: 80vh; }
.modal {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 8px;
  background: var(--bg); border: 1px solid var(--rule2); max-height: 80vh; min-width: 0;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.modal .rows { max-height: none; flex: 1; min-height: 0; }
.tp-box { flex-shrink: 0; max-width: 100%; }
.tp-pane { position: relative; width: 72ch; max-width: 72ch; min-width: 0; height: 0; align-self: flex-start; }
.tp-in {
  position: absolute; top: 0; left: 0; right: 0; max-height: 80vh; overflow: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 0 12px 10px; background: var(--bg);
}
.tp-in .sub:first-child { padding-top: 0; }
.tp-score { padding: 2px 0 0; }
.tp-score .sigrow { padding: 0 0 0 2ch; }
.tp-hint { padding-top: 10px; }
@media (max-width: 1279px) { .tp-pane { width: 56ch; } }
@media (max-width: 899px) { .tp-pane { display: none; } .tp-box { width: 100%; } }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  background: var(--key); box-shadow: inset 0 0 0 1px var(--key-line); border: 0; border-radius: 9px;
  color: var(--strong); cursor: pointer; font-size: 13px;
}
.btn:hover { background: var(--key-hover); color: var(--white); }
.btn.primary { background: var(--sel); box-shadow: inset 0 0 0 1px #4d4482; }

/* colour helpers */
.fg-ok { color: var(--ok) !important; } .fg-warn { color: var(--warn) !important; } .fg-crit { color: var(--crit) !important; }
.fg-info { color: var(--info) !important; } .fg-dim { color: var(--dim) !important; } .fg-faint { color: var(--faint) !important; }
.fg-faint2 { color: var(--faint2) !important; } .fg-label { color: var(--label) !important; } .fg-violet { color: var(--violet) !important; }
.fg-mag { color: var(--magenta) !important; } .fg-accent { color: var(--accent) !important; } .fg-strong { color: var(--strong) !important; }
.fg-text { color: var(--text) !important; } .fg-orange { color: #fdba74 !important; }
.b { font-weight: 700; }

/* ── key bar ───────────────────────────────────────────────────── */
.keybar {
  flex-shrink: 0; background: var(--chrome); border-top: 1px solid var(--rule);
  display: flex; flex-direction: column;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  position: relative;
}
.keyrow { display: flex; align-items: center; gap: 10px; padding: 10px 18px 0; overflow-x: auto; scrollbar-width: none; }
.keyrow::-webkit-scrollbar { display: none; }
.keybar.keys-hidden .keyrow { display: none; }
.keys-toggle { margin-left: auto; }
.keys-toggle i { font-size: 14px; margin-right: 4px; color: var(--dim); }
.keys-toggle.on i { color: var(--magenta); }
.kb {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 44px; padding: 0 14px; border-radius: 9px; border: 0;
  background: var(--key); box-shadow: inset 0 0 0 1px var(--key-line), 0 1px 0 rgba(0,0,0,.4);
  color: #dcdff0; font-size: 14px; cursor: pointer; flex-shrink: 0;
  -webkit-user-select: none; user-select: none;
}
.kb:hover { background: var(--key-hover); color: var(--white); }
.kb:active, .kb.down, .kb.on { background: var(--key-down); }
.kb.on { color: var(--magenta); }
.kb-icon { color: var(--dim); }
.kb-icon i { font-size: 17px; }
.kb-icon.on { color: var(--magenta); }
.kb-spacer { flex: 1; min-width: 0; }
.legend { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 18px 2px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--fs); cursor: pointer;
  background: none; border: 0; padding: 2px 0; color: var(--dim);
}
.chip .kk { background: var(--chip-off); color: var(--bg); padding: 0 5px; }
.chip.on .kk { background: var(--chip-on); }
.chip.on .kl { color: var(--white); }
.chip.na { opacity: .4; }
.chip:hover .kl { color: var(--white); }
.chip.busy .kl { color: var(--warn); }
.chip .kl.val { color: var(--title-fg); }
.kbd-sink { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .rows-fill { min-height: 0; }
  .rows-fill > .rows.tall { position: static; max-height: 560px; }
  .term { padding: 12px 16px 16px; }
  .tabbar { padding: 0 10px 0 16px; }
  .keyrow { padding: 8px 16px 0; gap: 8px; }
  .legend { padding: 8px 16px 2px; }
}
@media (max-width: 640px) {
  :root { --fs: 13px; --lh: 1.45; }
  .opt { display: none !important; }
  .kb { min-width: 44px; padding: 0 10px; }
  .cell { min-width: 12ch; }
  .hl > .lab, .mrow > .mk { width: 4.46em; }
  .tabbar .ver { display: none; }
  .prompt-hint { display: none; }
}
.kv > .s { flex-shrink: 100; }

/* ── panel 5: signals ──────────────────────────────────────────── */
.sig .grid { gap: 28px; }
.sigrow { display: block; min-width: 0; padding: 0 8px; overflow-wrap: anywhere; }
.sigrow .sl { display: inline-block; width: 5ch; }
.sigrow .sn { display: inline-block; width: 6ch; }
.sigrow .sn.wide { width: 10ch; color: var(--strong); }
.sigrow .spark { letter-spacing: 0; white-space: pre; font-variant-ligatures: none; font-size: 1.15em; line-height: 1; }
.sigrow.top { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 8px; }
.sigrow.top .sl { flex-shrink: 0; }
.sigrow.score .scl { display: inline-block; width: 15ch; color: var(--label); }

.btn[disabled] { opacity: .5; cursor: default; }

/* ── panel 9: usage ──────────────────────────────────────────── */
.usage .ustats { flex-wrap: wrap; gap: 4px 14px; padding: 2px 8px; }
.usage .ustats .pill { gap: 6px; }
.uchart { margin: 2px 0 0; padding: 0 8px; font: inherit; line-height: 1.05; white-space: pre; overflow-x: auto; font-variant-ligatures: none; letter-spacing: 0; color: var(--text); }
.ulegend { padding-top: 4px; }
.urow { cursor: default; }
.urow .ubar { white-space: pre; font-variant-ligatures: none; letter-spacing: 0; }

/* ── panel 7: approvals ─────────────────────────────────────── */
.confirm { border: 1px solid var(--warn); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }

/* Phone: keep the tenant tab readable. */
@media (max-width: 640px) {
}

/* per-app golden rows (red / use / golden), mirrors the CLI */
.grows { margin: 4px 0; }
.grow { display: flex; gap: 12px; padding: 0 8px; }
.grow .gl { width: 7ch; flex-shrink: 0; }
.grow .gt { min-width: 0; overflow-wrap: anywhere; color: var(--strong); }
.fg-golden { color: #fb8a7e !important; }

/* ── panel 0: goals (the web UI's Home in terminal dress, goals.js) ── */
.goals { display: flex; flex-direction: column; gap: 14px; }
.goals .grow3 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; align-items: stretch; }
/* signals run under fleet + goals; the right column spans both rows */
.goals .gright { grid-column: 3; grid-row: 1 / span 2; }
.goals .gsigs { grid-column: 1 / 3; grid-row: 2; }
.goals .gcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* fleet and goals boxes share the row height */
.goals .gcol > .gbox:last-child { flex: 1; }
/* in the goals column the goals box takes the stretch, predictions keep their height */
.goals .gmid > .gbox:first-child { flex: 1; }
.goals .gmid > .gbox:last-child { flex: none; }
.gbox { border: 1px solid var(--rule2); padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gbox.gcrit { border-color: rgba(248,113,113,.5); }
.ghead { display: flex; align-items: baseline; gap: 8px; margin: -8px 0 2px; transform: translateY(-.65em); }
.ghead .gt { color: var(--magenta); background: var(--bg); padding: 0 6px; margin-left: -6px; white-space: nowrap; }
.ghead .gr { background: var(--bg); padding: 0 6px; margin-right: -6px; white-space: nowrap; font-size: .87em; }
.ghead .fill, .gl .fill { flex: 1; }
.gl { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.gl > span { overflow: hidden; text-overflow: ellipsis; }
.gsmall { font-size: .82em; }
.gring { position: relative; width: min(100%, 250px); aspect-ratio: 1; margin: 2px auto 0; }
.gring svg { width: 100%; height: 100%; display: block; }
.gcentre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gbig { font-size: 2.3em; color: var(--white); line-height: 1; }
.gband { text-align: center; letter-spacing: .22em; }
.gmean { text-align: center; font-size: .87em; }
.gfleet { justify-content: center; gap: 14px; flex-wrap: wrap; border-top: 1px dashed var(--rule2); padding-top: 6px; }
.ggraph { width: 100%; height: auto; display: block; }
.glabel { font: 7px var(--mono); fill: var(--dim); }
.gbub { font: 600 11px var(--mono); }
.ggoal { padding: 4px 0 6px; border-bottom: 1px dashed var(--rule); display: flex; flex-direction: column; gap: 2px; }
.gnum { font-size: 1.6em; line-height: 1.1; }
.gweeks { width: 72px; height: 22px; flex-shrink: 0; margin-right: 6px; }
.gstrip { display: flex; gap: 5px; padding-top: 4px; }
.gstrip > span { flex: 1; height: 4px; border-radius: 99px; }
.gsubh { color: var(--label); padding-top: 6px; }
.gvit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gcell { display: flex; flex-direction: column; border: 1px solid var(--rule); padding: 4px 8px; min-width: 0; }
.gcell > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ginc { border-left: 2px solid currentColor; padding: 4px 0 4px 10px; display: flex; flex-direction: column; gap: 2px; }
.ginc > div { color: var(--text); }
.glink { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }
.glink:hover { color: var(--white); }
.gsigrow { gap: 8px; }
.gsl { width: 11em; flex-shrink: 0; }
.gsv { width: 4.5em; flex-shrink: 0; text-align: right; }
.gspark { flex: 1; min-width: 60px; height: 20px; }
.gbubs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 1199px) { .goals .grow3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .goals .gsigs { grid-column: 1 / -1; grid-row: 2; } .goals .gright { grid-column: 1 / -1; grid-row: 3; } }
@media (max-width: 899px) { .goals .grow3 { grid-template-columns: minmax(0, 1fr); } .goals .gsigs, .goals .gright { grid-row: auto; } }
.ggoal .gl > .gbar, .ggoal .gl > .gnum { flex-shrink: 0; overflow: visible; }
.ggoal .gl > .gcap { min-width: 0; }
.gbubs .glabel { font-size: 9px; }
.hzone { display: inline-flex; gap: 2px; width: 14em; height: .6em; background: var(--rule); align-self: center; flex-shrink: 0; }
.hzone > span { display: block; height: 100%; }
.gedit { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.gerow { padding: 2px 4px; cursor: pointer; }
.gerow.sel { background: var(--sel); color: var(--white); }
.gsetcols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 14px; align-items: start; }
@media (max-width: 899px) { .gsetcols { grid-template-columns: minmax(0, 1fr); } }
.gset { padding: 6px 4px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.gset.sel { background: var(--sel); }
.gset.sel .gerow { color: var(--white); }
.gset .gerow { padding: 0; }
.gwhat { padding: 2px 0 0 2.2ch; }
.gterm { padding: 4px 0; border-bottom: 1px solid var(--rule); }
.gterm:last-child { border-bottom: 0; }
.gattain { gap: 12px; align-items: center; padding: 8px 0 4px; }
.gattain .col { display: flex; flex-direction: column; }
.gerow .gen { width: 12ch; flex-shrink: 0; }
.gerow .gev { width: 9ch; flex-shrink: 0; text-align: center; }
.gestep { width: 3ch; flex-shrink: 0; padding: 0; background: none; border: 1px solid var(--rule2); color: inherit; font: inherit; cursor: pointer; }
.gestep:hover { border-color: var(--accent); color: var(--white); }
.gtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px 0 2px; }
.gtile { border-radius: 12px; padding: 12px 12px 13px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gtile .gtn { display: flex; align-items: center; gap: 6px; font-size: .82em; color: rgba(255,255,255,.84); }
.gtile .gtn i { font-size: 1em; margin: 0; }
.gtile .gtv { font-size: 2em; line-height: 1.15; white-space: nowrap; }
.gtile .gtg { font-size: .76em; color: rgba(255,255,255,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* voice button states (voice.js) */
.voicebtn { color: #9184d9; border: 0; }
.voicebtn.v-connecting { color: var(--warn); animation: vblink 1s steps(2) infinite; }
.voicebtn.v-listening { color: var(--ok); background: rgba(74,222,128,.12); }
.voicebtn.v-thinking { color: var(--accent); background: rgba(181,171,252,.14); animation: vblink 1s steps(2) infinite; }
.voicebtn.v-speaking { color: var(--magenta); background: rgba(232,121,249,.14); }
@keyframes vblink { 50% { opacity: .45; } }
.vline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb .hzone { width: 12em; }
/* Header right side: label · bar · pills; pills wrap inside their own column so
   a second line stays indented after the bar instead of under the label. */
.hl.hb { flex-wrap: nowrap; align-items: flex-start; }
.hb .hpills { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; min-width: 0; }
.hb > .hzone { align-self: flex-start; margin-top: .45em; }

/* panel 5: memory Voronoi map (memmap.js) */
.memmap-wrap { min-width: 0; }
.memmap { display: block; width: 100%; }
.memmap .mm-cell { cursor: pointer; transition: fill-opacity .15s; }
.memmap .mm-cell:hover { fill-opacity: .55; stroke: rgba(255,255,255,.6); }
.memmap .mm-ink { pointer-events: none; }
.memmap text { text-anchor: middle; dominant-baseline: middle; font-family: inherit; }
.mm-cap { padding: 2px 8px; flex-wrap: nowrap; align-items: baseline; min-width: 0; min-height: 1.6em; overflow: hidden; white-space: nowrap; }
.mm-cap .mm-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-stage { position: relative; }
/* live hits (memlive.js): the elapsed time rides in as a negative
   animation-delay, so a redraw carries a fade on where it was */
.memmap .mm-cell.hit { animation: mm-hit 20s cubic-bezier(.33, 1, .68, 1) forwards; }
.memmap .mm-cell.region { animation: mm-region 20s cubic-bezier(.33, 1, .68, 1) forwards; }
@keyframes mm-hit {
  from { fill-opacity: .55; stroke-width: 2; filter: drop-shadow(0 0 6px currentColor); }
  to { fill-opacity: var(--mm-base); stroke-width: 1; filter: drop-shadow(0 0 0 transparent); }
}
@keyframes mm-region {
  from { fill-opacity: .4; filter: drop-shadow(0 0 3px currentColor); }
  to { fill-opacity: var(--mm-base); filter: drop-shadow(0 0 0 transparent); }
}
.memmap .mm-dot-hit { animation: mm-dot-hit 1.6s cubic-bezier(.22, 1, .36, 1) forwards; }
.memmap .mm-dot-region { animation: mm-dot-region 1.2s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes mm-dot-hit { 0% { r: 5px; opacity: 1; } 15% { r: 13px; opacity: .9; } 40% { r: 9px; opacity: .8; } 60% { r: 11px; opacity: .7; } 100% { r: 5px; opacity: .35; } }
@keyframes mm-dot-region { 0% { r: 5px; opacity: .9; } 25% { r: 9px; opacity: .85; } 55% { r: 7px; opacity: .65; } 100% { r: 5px; opacity: .35; } }
.memmap .mm-label-hit { animation: mm-label 1.2s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes mm-label { 0% { opacity: 1; } 35% { opacity: .5; } 70% { opacity: .85; } 100% { opacity: 1; } }
/* stats HUD, bottom-right over the map (X-Ray stats-hud.tsx) */
.mm-hud { position: absolute; right: 10px; bottom: 6px; pointer-events: none; text-align: right; font-size: 11px; line-height: 1.6; color: var(--faint); font-variant-numeric: tabular-nums; }
.mm-hud .k { color: var(--faint2); }
.mm-thumb { display: block; max-width: 100%; max-height: 180px; object-fit: cover; border: 1px solid var(--rule2); margin: 6px 0; }

/* Panel 0, chat (chat.js): the conversation beside tokens and tools. */
.chatgrid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.chatmain { gap: 8px; }
.chatlog { height: min(64vh, 680px); overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 4px 0; }
.chu, .chb, .chn { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.chwho { width: 4.6em; flex-shrink: 0; text-align: right; }
.chtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.chn > .para { flex: 1; min-width: 0; }
.chh { color: var(--strong); font-weight: 700; padding-top: 4px; }
.chli { position: relative; line-height: var(--lh); overflow-wrap: anywhere; }
.chli .chm { position: absolute; left: 0; color: var(--magenta); }
.chc { background: var(--chrome); color: var(--label); padding: 0 3px; font: inherit; }
.chpre { margin: 0; padding: 6px 8px; background: var(--chrome); color: var(--text); overflow: auto; font: inherit; font-size: .9em; white-space: pre; max-height: 360px; }
.chpre.tbl { color: var(--strong); }
.chcopy { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--faint); font: inherit; font-size: .87em; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.chcopy:hover { color: var(--white); }
.cht { margin-left: 5.6em; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chtl { display: flex; gap: 8px; align-items: baseline; cursor: pointer; min-width: 0; }
.chtl:hover { background: var(--hover); }
.chtl .cha { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chtd { display: flex; flex-direction: column; gap: 2px; padding-left: 1.2em; }
.chask { align-items: center; padding-left: 1.2em; }
.chatin { display: flex; gap: 10px; align-items: stretch; }
.chatin textarea { flex: 1; min-width: 0; resize: none; margin: 0; box-sizing: border-box; background: var(--chrome); border: 1px solid var(--rule2); color: var(--white); font: inherit; padding: 6px 8px; outline: none; }
.chatin textarea:focus { border-color: var(--magenta); }
.chatin textarea::placeholder { color: var(--faint2); }
.chatbtns { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.chatbtns .btn { justify-content: center; }
.chatside { max-height: calc(min(64vh, 680px) + 120px); overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
.chatside .blast .k, .chatside .kv > .k { width: 6.5em; }
.chatside .chv { width: auto; min-width: 7em; font-size: .87em; }
.chtinfo { padding: 2px 8px 6px 1.6em; display: flex; flex-direction: column; gap: 4px; }
.chst .c { white-space: normal; }
.dsearch { min-width: 0; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--magenta); padding: 2px 4px; margin: 4px 0; }
.dsearch i { color: var(--magenta); }
.dsearch input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--white); font: inherit; padding: 2px 0; }
.dsearch input::placeholder { color: var(--faint2); }
@media (max-width: 899px) {
  .chatgrid { grid-template-columns: minmax(0, 1fr); }
  .chatlog { height: 56vh; }
  .chatside { max-height: none; }
  .chwho { width: 3.6em; }
  .cht { margin-left: 0; }
}
.glabel.ctx { opacity: .5; }

/* <4> activity heatmap + prediction bubbles + compact prognosis */
.heat { display: grid; gap: 5px; align-items: center; padding-right: 2px; }
.heat .hw { color: var(--dim); text-align: center; font-size: .87em; }
.heat .hn { color: var(--label); text-align: right; padding-right: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat .hc { height: 1.9em; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 600; font-size: .87em; }
.heat .hs { color: var(--dim); text-align: right; }
.heat .h1 { background: #22c55e; } .heat .h2 { background: #f59e0b; } .heat .h3 { background: #f97316; } .heat .h4 { background: #ef4444; }
.pbub { cursor: pointer; display: inline-flex; }
.pbub:hover circle { stroke: #ffffff; }
.prog { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 1px 0; }
.prog .pt { flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog .pc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog .s { flex-shrink: 0; white-space: nowrap; color: var(--dim); }
.prog { cursor: pointer; }
.prog:hover .pt, .prog.on .pt { color: var(--accent) !important; }
.prog.on { box-shadow: inset 2px 0 0 var(--magenta); padding-left: 6px; }

/* panel 2 treemap (treemap.js) */
.tmopts { display: inline-flex; gap: 12px; }
.tmbar { gap: 12px; padding: 2px 8px 6px; flex-wrap: wrap; font-size: .92em; }
.tm { position: relative; width: 100%; aspect-ratio: 5 / 3; min-height: 260px; }
.tmg { position: absolute; box-sizing: border-box; border: 1px dashed var(--rule2); background: var(--surface, transparent); overflow: hidden; }
.tmh { display: block; padding: 1px 6px; font-size: .85em; color: var(--strong); background: var(--rule); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmt { position: absolute; box-sizing: border-box; border: 1px solid rgba(0,0,0,.35); cursor: pointer; overflow: hidden; opacity: .85; }
.tmt:hover { opacity: 1; outline: 1px solid var(--white); z-index: 1; }
.tmt.warn { border: 2px solid var(--warn); }
.tmt.drift { border: 1px dashed var(--faint2); }
.tml { display: block; padding: 0 3px; font-size: .78em; color: #0b0d12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Panel 7 — the triage logic diagram (logic.js). */
.logic { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.lg-scroll { min-height: 0; }
/* The whole diagram fits the pane: full width, and never taller than the window (the viewBox scales to fit). */
.lg { width: 100%; height: auto; max-height: calc(100vh - 150px); display: block; font-family: inherit; }
.lg-dot.off { opacity: .45; }
.lg-mem circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.6; }
.lg-title { fill: var(--white); font-size: 16px; }
.lg-tier { font-size: 13px; }
.lg-loop { fill: var(--accent); font-size: 14px; }
.lg-line { fill: var(--text); font-size: 14.5px; }
.lg-v { fill: var(--white); }
.lg-d { fill: var(--dim); }
.lg-edge { fill: none; stroke: var(--dim); stroke-width: 1.1; opacity: .8; }
.lg-edge.dash { stroke: var(--violet); stroke-dasharray: 5 4; }
.lg-head { fill: var(--dim); }
.lg-dot.dimmed, .lg-mem.dimmed, .lg-edge.dimmed { opacity: .12; }
.lg-rate { fill: var(--accent); font-size: 13px; }
@keyframes lg-pulse { from { stroke-width: 9; stroke-opacity: .9; } to { stroke-width: 1; stroke-opacity: 1; } }
@keyframes lg-flow { from { stroke: var(--accent); stroke-width: 2.6; opacity: 1; } }
.lg-dot.pulse circle, .lg-mem.pulse circle { animation: lg-pulse 1.2s ease-out; }
.lg-edge.pulse { animation: lg-flow 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .lg-dot.pulse circle, .lg-mem.pulse circle, .lg-edge.pulse { animation: none; } }