:root {
  --bg: #f6f8fb; --surface: #ffffff; --surface-2: #f1f5f9; --border: #e2e8f0;
  --border-strong: #cbd5e1; --text: #0f172a; --muted: #64748b; --faint: #94a3b8;
  --accent: #0284c7; --accent-soft: rgba(2, 132, 199, 0.10);
  /* One colour per attention family (docs/design/session-status.md § 1bis, #654):
     running, calling, at rest, over. `stale` and `ended` share the grey on purpose;
     what separates them is the hollow dot, not a second grey. */
  --working: #16a34a; --thinking: #16a34a; --compacting: #16a34a;
  --waiting: #b45309; --error: #dc2626;
  --idle: #2563eb; --stale: #94a3b8; --ended: #94a3b8;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0f1a; --surface: #0f172a; --surface-2: #16233a; --border: #1e293b;
    --border-strong: #273549; --text: #e2e8f0; --muted: #8595ac; --faint: #64748b;
    --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, 0.12);
    --working: #4ade80; --thinking: #4ade80; --compacting: #4ade80;
    --waiting: #fbbf24; --error: #f87171;
    --idle: #60a5fa; --stale: #64748b; --ended: #64748b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
  }
}
.st-working { --st: var(--working); } .st-thinking { --st: var(--thinking); }
.st-compacting { --st: var(--compacting); }
.st-waiting { --st: var(--waiting); } .st-idle { --st: var(--idle); }
.st-error { --st: var(--error); } .st-ended { --st: var(--ended); }
.st-stale { --st: var(--stale); }
/* A status this build does not know: drawn in the muted neutral, never in another
   status's colour. The label beside it is the stored value, so the row says what
   it is rather than borrowing an identity (#719). */
.st-unknown { --st: var(--muted); }

* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; background: radial-gradient(1100px 500px at 78% -10%, var(--accent-soft), transparent 60%), var(--bg);
  color: var(--text); font-family: var(--mono); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.shell { max-width: 1600px; margin: 0 auto; padding: 18px 22px 26px; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
code { color: var(--muted); }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 11px; }
.mark { width: 34px; height: 34px; flex: none; }
.mark.lg { width: 52px; height: 52px; }
.sweep { transform-origin: 50px 50px; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sweep { animation: none; } }
.wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark b { font-weight: 600; font-size: 15px; letter-spacing: -0.2px; }
.wordmark b span { color: var(--accent); }
.wordmark small { color: var(--muted); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; margin-top: 2px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 11px; white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.ro { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.chip.conn.live { color: var(--working); }
.chip.conn.live .dot { animation: ping 2.2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .chip.conn.live .dot { animation: none; } }
.chip.conn.down { color: var(--waiting); }
/* The board is on screen but not current — the stream may be fine, the refresh is
   not (#673). It takes `down`'s amber rather than the grey the `stale` *status*
   uses: #654 settled that colour says how much attention a thing needs, not which
   mechanism failed, and grey is the colour of nothing to do. The two are told
   apart by their text, which is the part that names the mechanism. */
.chip.conn.stale { color: var(--waiting); }
.chip.signout:hover { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, var(--border)); }

/* ---------- tab bar ---------- */
.tabbar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tab { position: relative; background: none; border: none; padding: 9px 16px 10px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.12s ease; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }
.tab .badge { margin-left: 7px; font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--waiting) 16%, transparent); color: var(--waiting); vertical-align: 1px; }

/* ---------- summary bar ---------- */

/* ---------- table ---------- */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 1000px; }
thead th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 500; color: var(--muted); font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase; padding: 10px 11px; background: var(--surface); border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; transition: color 0.12s ease; }
thead th:hover { color: var(--text); }
thead th.nosort { cursor: default; } thead th.nosort:hover { color: var(--muted); }
thead th.num { text-align: right; } tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
th .arrow { color: var(--accent); margin-left: 4px; font-size: 9px; }
th.sorted { color: var(--text); }
tbody tr { cursor: pointer; border-left: 3px solid transparent; transition: background 0.12s ease; }
tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
tbody tr:hover { background: var(--surface-2); }
tbody tr.attn { border-left-color: var(--st); }
/* A session that called you (ADR-0010): the row is tinted and the dot inside its
   status pill pulses. Everything derives from --st — the pill keeps its status
   colour and label, because a calling session is still `idle` and must read as
   such. A web page has no gutter taken by a selection cursor, so the row tint is
   available here where it is not in the TUI. */
tbody tr.call { background: color-mix(in srgb, var(--st) 7%, transparent); }
tbody tr.call:hover { background: color-mix(in srgb, var(--st) 12%, transparent); }
tbody tr:hover .det-btn, tbody tr:focus-within .det-btn { border-color: var(--accent); color: var(--accent); }
tbody td { padding: 9px 11px; white-space: nowrap; vertical-align: middle; }
td.name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
td.name .nm { font-weight: 600; color: var(--st); }
td.proj { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
td.branch { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
td.dim { color: var(--muted); } td.faint { color: var(--faint); }
.empty { padding: 26px; text-align: center; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--st); background: color-mix(in srgb, var(--st) 13%, transparent); border: 1px solid color-mix(in srgb, var(--st) 26%, transparent); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* `stale` and `ended` share one grey, and shape is what separates them: no fresh
   signal at all against a session that really ended. The terminal draws `◌`
   against `●`; here the dot is hollow (docs/design/session-status.md § 1, § 1bis). */
.pill.st-stale .dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
/* Unlike the terminal, CSS animates properly: the pulse can be a soft fade rather
   than the two hard states the TUI is limited to. */
.pill.call .dot { animation: callpulse 1.6s ease-in-out infinite; }
@keyframes callpulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--st) 55%, transparent); }
  50% { opacity: 0.45; box-shadow: 0 0 0 5px transparent; }
}
@media (prefers-reduced-motion: reduce) { .pill.call .dot { animation: none; } }
.rc-on { color: var(--working); } .rc-off { color: var(--faint); }
.detail { color: var(--muted); max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.detail.wait { color: var(--waiting); font-weight: 600; }
/* The call message is the reason the row is pulsing: it carries the row's status
   colour instead of the muted default. */
.detail.call { color: var(--st); font-weight: 600; }
.spark { display: block; }
.det-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 7px; background: transparent; border: 1px solid transparent; color: var(--faint); transition: all 0.12s ease; }
.det-btn svg { width: 15px; height: 15px; }
.det-btn:hover, .det-btn:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); outline: none; }

/* ---------- machines ---------- */
.mach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mach { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.mach-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mach-head .nm { font-weight: 700; font-size: 15px; } .mach-head .u { color: var(--faint); font-size: 11px; }
.mach-row .big { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mach-row .big small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 5px; }
.mach-brk { display: flex; gap: 12px; flex-wrap: wrap; }
.mach-brk .b { display: inline-flex; align-items: center; gap: 5px; color: var(--st); font-variant-numeric: tabular-nums; }
.mach-brk .b .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .mach-brk .b small { color: var(--muted); }
.mach-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; border-top: 1px solid var(--border); padding-top: 10px; }
.mach-foot b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- stats ---------- */
.stat-periods { display: flex; gap: 6px; margin-bottom: 14px; }
.period { background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 5px 13px; border-radius: 8px; font-weight: 500; }
.period.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--accent-soft); font-weight: 700; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 16px 18px; }
.kpi .k { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; }
.kpi .v { font-size: 28px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: 13px; font-weight: 500; color: var(--muted); }
.stat-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 820px) { .stat-cols { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 4px 18px 16px; }
.card h3 { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 16px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.top { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.top:not(:last-child) { border-bottom: 1px solid var(--surface-2); }
.top .rk { color: var(--faint); width: 18px; font-variant-numeric: tabular-nums; }
.top .nm { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .mc { color: var(--muted); font-size: 11px; } .top .tk { font-variant-numeric: tabular-nums; font-weight: 600; }
.timebar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 6px 0 10px; background: var(--surface-2); }
.timebar i { display: block; height: 100%; background: var(--st); }
.timeleg { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 11px; }
.timeleg .b { display: inline-flex; align-items: center; gap: 6px; color: var(--st); }
.timeleg .b .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .timeleg .b b { color: var(--text); font-variant-numeric: tabular-nums; }
.muted-note { color: var(--muted); padding: 8px 0; }

/* ---------- settings ---------- */
.settings { max-width: 640px; }
.set-note { display: flex; gap: 9px; align-items: flex-start; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.set-note b { color: var(--accent); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--border); }
.set-row:last-child { border-bottom: none; }
.set-row .k { font-weight: 600; } .set-row .k small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; margin-top: 2px; }
.set-row .v { color: var(--muted); font-variant-numeric: tabular-nums; }
.set-row .v.ok { color: var(--working); }
.set-row .v .signout2 { background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 5px 12px; border-radius: 8px; margin-left: 8px; }
.set-row .v .signout2:hover { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, var(--border)); }
/* Column picker (#309) */
.set-row.col-picker { align-items: flex-start; }
.col-list { display: flex; flex-direction: column; gap: 2px; min-width: 264px; }
.col-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 6px; border-radius: 6px; }
.col-row:hover { background: var(--surface-2); }
.col-tog { display: flex; align-items: center; gap: 8px; color: var(--text); cursor: pointer; font-size: 13px; }
.col-tog input { accent-color: var(--accent); }
.col-tog input:disabled { opacity: 0.55; cursor: default; }
.col-tog small { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.col-move { display: flex; gap: 3px; }
.col-move button { background: var(--surface); border: 1px solid var(--border); color: var(--muted); width: 24px; height: 22px; border-radius: 6px; cursor: pointer; line-height: 1; }
.col-move button:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

/* ---------- detail page ---------- */
.back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 6px 12px 6px 9px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); transition: all 0.12s ease; }
.back:hover, .back:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.d-hero { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--st); border-radius: 12px; box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.d-hero .h-main { min-width: 0; flex: 1; }
.d-hero h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.4px; word-break: break-word; }
.d-hero .h-sub { color: var(--muted); margin-top: 5px; font-size: 12.5px; word-break: break-word; }
.d-hero .h-facts { display: flex; gap: 22px; margin-top: 14px; flex-wrap: wrap; }
.fact { display: flex; flex-direction: column; gap: 1px; }
.fact .k { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; } .fact .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.d-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 820px) { .d-grid { grid-template-columns: 1fr; } }
.field { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 7px 0; align-items: baseline; }
.field:not(:last-child) { border-bottom: 1px solid var(--surface-2); }
.field .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.field .v { word-break: break-word; } .field .v.mut { color: var(--muted); } .field .v.wait { color: var(--waiting); font-weight: 600; }
.field .v.call { color: var(--st); font-weight: 600; }
.field .v a { color: var(--accent); text-decoration: none; word-break: break-all; }
.field .v a:hover { text-decoration: underline; }
.tok { display: flex; justify-content: space-between; padding: 7px 0; font-variant-numeric: tabular-nums; }
.tok:not(:last-child) { border-bottom: 1px solid var(--surface-2); }
.tok .k { color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }
.tok.total { font-weight: 700; font-size: 15px; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; } .tok.total .k { color: var(--text); font-size: 11px; }
.act-block { margin-top: 4px; min-height: 46px; display: flex; align-items: center; }

/* ---------- bottom bar (usage + platform) ---------- */
.botbar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 18px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.gauges { display: flex; gap: 22px; flex-wrap: wrap; }
.gauge { display: flex; align-items: center; gap: 9px; }
.gauge .lbl { color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-size: 10px; }
.gauge .track { width: 120px; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.gauge .track i { display: block; height: 100%; border-radius: 3px; background: var(--working); }
.gauge .track.warn i { background: var(--waiting); }
/* Red from 80 %: the limit is about to stop the work, and only a different model
   or stopping changes that (docs/design/usage.md § 1bis, #844). */
.gauge .track.hot i { background: var(--error); }
.gauge .pct { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 34px; }
.gauge .rst { color: var(--faint); font-size: 10.5px; }
.botbar .push { flex: 1; }
.plat { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.plat .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.plat.ok { color: var(--working); } .plat.warn { color: var(--waiting); } .plat.bad { color: var(--error); }

/* The fleet watcher indicator, beside the platform one. Only ever shown when it
   has something to say, so it carries the alarm colour alone. */
.watch { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--error); }
.watch .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mach-foot .w-ok { color: var(--working); }
.mach-foot .w-bad { color: var(--error); }

/* ---------- token gate ---------- */
.gate { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(4px); }
.gate-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 28px 26px; }
.gate-card h1 { margin: 2px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: var(--text); }
.gate-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.gate-card input { width: 100%; font: inherit; padding: 10px 12px; border-radius: 9px; background: var(--bg); border: 1px solid var(--border-strong); color: var(--text); }
.gate-card input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.gate-err { color: var(--error); font-size: 11.5px; }
.gate-card button { width: 100%; padding: 10px 12px; border-radius: 9px; font-weight: 600; background: var(--accent); color: #fff; border: none; transition: filter 0.12s ease; }
.gate-card button:hover { filter: brightness(1.05); }

/* The filter bar sits outside the repainted table region (#545): the refresh
   tick redraws #tab-sessions every 5 s, and an input inside it would lose the
   caret and the typed text. */
.filterbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.filterbar input { flex: 1; min-width: 0; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; }
.filterbar input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.filterbar input::placeholder { color: var(--faint); }
.filter-count { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grouper { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.grouper select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; }
.grouper select:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* A group header row. It spans the table and is not selectable — it is a label,
   not a session (#546). */
tr.grouphead td { background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px; padding: 6px 12px; border-top: 1px solid var(--border); }
tr.grouphead .gk { color: var(--text); }
tr.grouphead .gm { font-weight: 400; font-variant-numeric: tabular-nums; }
.set-row select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; }
.set-row select:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* `hidden N`, the one survivor of the summary strip, in the bottom bar (#548). */
.hiddenn { color: var(--faint); display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.hiddenn .lbl { text-transform: uppercase; letter-spacing: 0.8px; font-size: 10px; }

/* CTX fill, the TUI's thresholds: green below 60, amber to 85, red past it
   (#279). Not "% before auto-compact" — Claude Code's threshold is undocumented. */
.ctx-warn { color: var(--waiting); }
.ctx-hot { color: var(--error); }

/* Permission mode, the #303 taxonomy. Vigilance rises manual → accept → plan →
   auto → bypass; an unrecognised mode gets no class and stays neutral (#304). */
.mode-manual { color: var(--muted); }
.mode-accept { color: var(--accent2, var(--accent)); }
.mode-plan { color: var(--accent); }
.mode-auto { color: var(--waiting); }
.mode-bypass { color: var(--error); }