/*
  bugmunch stylesheet. SparkBugz · bugcache.com · MIT
  colors are all css vars so light/dark is one swap. edges kept crisp on purpose.
  no inline styles anywhere - the dynamic bits (bar widths etc.) get set via
  element.style.* in app.js so the CSP can stay strict. utilities are at the bottom.
*/

/* palette: dark (default) */
:root {
  color-scheme: dark;
  --bg: #060c1f;
  --panel: #0f1829;
  --panel-2: #19253d;
  --border: rgba(255,255,255,0.14);
  --text: #e8edf5;
  --muted: #9aa6bf;
  --faint: #5b6675;
  --accent: #38bdf8;
  --green: #3fb950;
  --grid: #1b2740;

  /* token-stage palette (everything token-based uses these) */
  --t-before: #38bdf8;   /* Before  */
  --t-removed: #f5a623;  /* Removed (during compression) */
  --t-after: #3fb950;    /* After   */
  --t-output: #a78bfa;   /* Output  */

  /* source palette (which layer removed tokens) */
  --c-comp: #f5a623;     /* compression */
  --c-cli: #38bdf8;      /* CLI filtering */
  --c-rtk: #a78bfa;      /* RTK */

  /* dollar metrics - deliberately distinct gold/green family */
  --d-comp: #f5a623;     /* compression $ (small) */
  --d-cache: #2ea043;    /* prefix-cache $ (large) */

  /* edge radii - kept small on purpose */
  --r-lg: 5px;           /* cards / panels */
  --r-md: 4px;           /* chips / bars / blocks */
  --r-sm: 3px;           /* controls / inputs */
  --r-xs: 2px;           /* swatches / tiny accents */
}

/* palette: light */
[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #f7f5f2;
  --panel-2: #eeece8;
  --border: #b5b2ab;
  --text: #18181b;
  --muted: #4a4743;
  --faint: #6b6660;
  --accent: #0284c7;
  --green: #1a7f37;
  --grid: #ded9d2;
  --t-before: #0284c7;
  --t-removed: #c77d0a;
  --t-after: #1a7f37;
  --t-output: #7c3aed;
  --c-comp: #c77d0a;
  --c-cli: #0284c7;
  --c-rtk: #7c3aed;
  --d-comp: #c77d0a;
  --d-cache: #1a7f37;
}

/* base */
* { box-sizing: border-box; }
html, body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.45;
}
a { color: var(--accent); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 22px 18px 60px; }

/* header */
header.top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
header.top h1 { font-size: 19px; font-weight: 650; margin: 0; letter-spacing: .2px; }
header.top h1 .dot { color: var(--accent); }
header.top h1 .tagline { font-size: 12px; font-weight: 400; color: var(--faint); margin-left: 8px; letter-spacing: 0; }
.status { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.pulse { width: 8px; height: 8px; border-radius: var(--r-xs); background: var(--faint); display: inline-block; }
.pulse.ok { background: var(--green); }
.pulse.err { background: #f85149; }
/* theme toggle button (was an inline style in the header) */
.theme-btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer; padding: 4px 7px; margin-left: 10px;
  display: inline-flex; align-items: center;
}
.theme-btn svg { width: 15px; height: 15px; display: block; }  /* beat the global svg{width:100%} */
.theme-btn:hover { filter: brightness(1.15); }

/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.kpi {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 16px; position: relative; overflow: hidden;
}
.kpi .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.kpi .value { font-size: 26px; font-weight: 680; margin-top: 6px; line-height: 1.1; }
.kpi .sub { font-size: 12px; color: var(--faint); margin-top: 4px; min-height: 16px; }
.kpi .tag { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; font-weight: 700; }
.kpi.stage-before { border-top: 2px solid var(--t-before); }
.kpi.stage-removed { border-top: 2px solid var(--t-removed); }
.kpi.stage-after { border-top: 2px solid var(--t-after); }
.kpi.stage-output { border-top: 2px solid var(--t-output); }
.kpi.stage-before .value { color: var(--t-before); }
.kpi.stage-removed .value { color: var(--t-removed); }
.kpi.stage-after .value { color: var(--t-after); }
.kpi.stage-output .value { color: var(--t-output); }

/* generic panel */
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 18px; margin-bottom: 18px;
}
.panel h2 {
  font-size: 15px; font-weight: 650; margin: 0 0 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.panel .hint { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
.panel .caption { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; font-style: italic; line-height: 1.5; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 880px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .kpis { grid-template-columns: 1fr; } }

/* token-flow bar */
.flowbar { width: 100%; height: 38px; border-radius: var(--r-sm); overflow: hidden; display: flex; background: var(--panel-2); border: 1px solid var(--border); }
.flowbar.sm { height: 24px; }
.flowseg { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #0d1117; white-space: nowrap; overflow: hidden; min-width: 0; }
.flowbar.thin .flowseg { font-size: 0; }
.flow-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; }
.flow-meta .item { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.flow-meta .swatch { width: 11px; height: 11px; border-radius: var(--r-xs); display: inline-block; }
.flow-meta strong { color: var(--text); }

/* cost panel */
.cost-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) { .cost-grid { grid-template-columns: 1fr; } }
.costcard { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; }
.costcard .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.costcard .amount { font-size: 24px; font-weight: 700; margin-top: 5px; }
.costcard.comp .amount { color: var(--d-comp); }
.costcard.cache .amount { color: var(--d-cache); }
.costcard.total { border-color: var(--d-cache); }
.costcard.total .amount { color: var(--green); }
.costcard .note { font-size: 11px; color: var(--faint); margin-top: 4px; }
.costbars { margin-top: 14px; }

/* segmented toggle (history granularity) */
.toggles { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.toggles button {
  background: transparent; color: var(--muted); border: 0; padding: 5px 11px;
  font: inherit; font-size: 12px; cursor: pointer; border-right: 1px solid var(--border);
}
.toggles button:last-child { border-right: 0; }
.toggles button.active { background: var(--panel-2); color: var(--text); }
.toggles button:hover { color: var(--text); }

/* legends */
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 4px 0 12px; }
.legend .item { display: flex; align-items: center; gap: 6px; }
.legend .swatch { width: 11px; height: 11px; border-radius: var(--r-xs); display: inline-block; }

.empty { color: var(--faint); font-size: 13px; padding: 8px 2px 2px; font-style: italic; }

/* billing-basis panel */
.billing-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 880px) { .billing-chips { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 520px) { .billing-chips { grid-template-columns: 1fr 1fr; } }
.bchip { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 12px; position: relative; overflow: hidden; }
.bchip .bc-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; line-height: 1.3; min-height: 26px; }
.bchip .bc-tokens { font-size: 20px; font-weight: 700; margin-top: 5px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bchip .bc-price { font-size: 11px; margin-top: 4px; font-weight: 600; }
.bchip.b-fresh { border-top: 2px solid var(--t-before); }
.bchip.b-read { border-top: 2px solid var(--green); }
.bchip.b-w5 { border-top: 2px solid var(--t-removed); }
.bchip.b-w1 { border-top: 2px solid var(--d-comp); }
.bchip.b-out { border-top: 2px solid var(--t-output); }
.bchip.b-fresh .bc-tokens { color: var(--t-before); }
.bchip.b-read .bc-tokens { color: var(--green); }
.bchip.b-w5 .bc-tokens { color: var(--t-removed); }
.bchip.b-w1 .bc-tokens { color: var(--d-comp); }
.bchip.b-out .bc-tokens { color: var(--t-output); }
.bchip.b-fresh .bc-price { color: var(--t-before); }
.bchip.b-read .bc-price { color: var(--green); }
.bchip.b-w5 .bc-price { color: var(--t-removed); }
.bchip.b-w1 .bc-price { color: var(--d-comp); }
.bchip.b-out .bc-price { color: var(--muted); }

.stackbar { width: 100%; height: 34px; border-radius: var(--r-sm); overflow: hidden; display: flex; background: var(--panel-2); border: 1px solid var(--border); }
.stackseg { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: #0d1117; white-space: nowrap; overflow: hidden; min-width: 0; }
.stackseg.empty-seg { width: 100%; color: var(--faint); background: var(--panel-2); }
.stack-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; font-size: 12px; }
.stack-meta .item { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.stack-meta .swatch { width: 11px; height: 11px; border-radius: var(--r-xs); display: inline-block; }
.stack-meta strong { color: var(--text); }

.billing-dollars { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--d-cache); border-radius: var(--r-md); }
.billing-dollars .bd { min-width: 130px; }
.billing-dollars .bd .lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.billing-dollars .bd .amt { font-size: 22px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.billing-dollars .bd.cost .amt { color: var(--d-comp); }
.billing-dollars .bd.net .amt { color: var(--d-cache); }
.billing-dollars .bd.prem .amt { color: var(--t-removed); }

.billing-hits { display: flex; flex-wrap: wrap; align-items: baseline; gap: 22px; margin-bottom: 14px; }
.billing-hits .hit { display: flex; flex-direction: column; }
.billing-hits .hit .hv { font-size: 24px; font-weight: 700; color: var(--green); line-height: 1.05; font-variant-numeric: tabular-nums; }
.billing-hits .hit .hl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.billing-hits .ttl { font-size: 11.5px; color: var(--faint); font-style: italic; }

/* cache-bust flag (wasted writes COST money) */
.bust-flag { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 12px; border-radius: var(--r-md);
  background: var(--panel-2); border: 1px solid var(--t-removed); }
.bust-flag .bf-lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.bust-flag .bf-val { font-size: 15px; font-weight: 700; color: var(--t-removed); font-variant-numeric: tabular-nums; }
.bust-flag .bf-note { font-size: 11px; color: var(--faint); }

/* per-provider sub-table */
.prov-sub { margin: 4px 0 4px; }
.prov-sub .pcap { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 0 0 6px; }

/* tables */
table.models { width: 100%; border-collapse: collapse; font-size: 13px; }
table.models th, table.models td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--border); }
table.models th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
table.models td.name, table.models th.name { text-align: left; color: var(--text); font-variant-numeric: tabular-nums; }
table.models td { color: var(--text); font-variant-numeric: tabular-nums; }
table.models td .req { color: var(--accent); }

/* proxy health */
.health { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 700px) { .health { grid-template-columns: 1fr 1fr; } }
.health .h { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; }
.health .h .label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.health .h .val { font-size: 18px; font-weight: 650; margin-top: 3px; }
.health .h.warn .val { color: #f0883e; }

/* charts (SVG) */
svg { display: block; width: 100%; height: auto; }
svg text { fill: var(--muted); font-size: 11px; }
svg .axis { stroke: var(--grid); stroke-width: 1; }
svg .gridline { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 2 4; }
svg .barlabel { fill: var(--text); font-size: 11px; }

/* hover tooltip */
#tip {
  position: fixed; pointer-events: none; z-index: 60; display: none;
  background: var(--panel-2); color: var(--text); border-radius: var(--r-md);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  padding: 9px 12px; font-size: 12.5px; line-height: 1.5; box-shadow: 0 6px 20px rgba(0,0,0,.35);
  max-width: 300px;
}
[data-theme="light"] #tip { background: #ffffff; color: #18181b; border-color: #b5b2ab; border-left-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.14); }
#tip .t-title { color: var(--text); font-weight: 600; margin-bottom: 5px; }
#tip .t-row { display: flex; gap: 10px; justify-content: space-between; color: var(--muted); }
footer { color: var(--faint); font-size: 11px; text-align: center; margin-top: 28px; }

/* tab navigation */
.tabs { display: flex; gap: 4px; margin: 0 0 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tabs button {
  background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent;
  padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: -1px;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

/* settings */
.set-group { max-width: 780px; }
.set-row { margin-bottom: 18px; }
.set-row label.fld { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.set-row input[type=text], .set-row input[type=number], .set-row input[type=password], .set-row select {
  width: 100%; max-width: 540px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; font-size: 13px;
}
.set-row input:disabled { opacity: .6; }
.set-row .help { font-size: 12.5px; color: var(--muted); margin-top: 6px; max-width: 560px; line-height: 1.5; }
.transport-note { font-size: 12.5px; line-height: 1.5; margin-top: 8px; max-width: 560px; padding: 8px 11px; border-radius: var(--r-md); border: 1px solid var(--border); border-left: 3px solid var(--border); background: var(--panel-2); color: var(--text); }
.transport-note.ok { border-left-color: var(--green); }
.transport-note.warn { border-left-color: #f85149; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.seg button {
  background: transparent; color: var(--muted); border: 0; border-right: 1px solid var(--border);
  padding: 7px 15px; font: inherit; font-size: 13px; cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button.active { background: var(--panel-2); color: var(--text); }
.btn {
  background: var(--accent); color: #fff; border: 0; border-radius: var(--r-sm);
  padding: 9px 17px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
pre.gen {
  white-space: pre-wrap; word-break: break-word; margin-top: 16px;
  background: #050d1c; border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5;
  color: var(--text); overflow: auto; max-height: 540px;
}
[data-theme="light"] pre.gen { background: #f1efe9; }

/* utilities - these stand in for what used to be inline style="" attrs,
   which is what lets the CSP forbid inline styles outright. */

/* visibility */
.hidden { display: none; }

/* spacing helpers */
.mt-8  { margin-top: 8px; }
.mt-14 { margin-top: 14px; }
.mt-28 { margin-top: 28px; }
/* divider lines between settings sections so they don't run together */
[data-tab="settings"] .mt-28 { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.mb-6  { margin-bottom: 6px; }

/* small uppercase note tag used beside section headings */
.tag-note { font-size: 10px; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; font-weight: 700; }

/* swatch fills (static legends) - dynamic legends set color via CSSOM in app.js */
.sw-before  { background: var(--t-before); }
.sw-after   { background: var(--t-after); }
.sw-removed { background: var(--t-removed); }
.sw-output  { background: var(--t-output); }
.sw-comp    { background: var(--c-comp); }
.sw-cli     { background: var(--c-cli); }
.sw-rtk     { background: var(--c-rtk); }
.sw-accent  { background: var(--accent); }

/* text-color helpers for table cells / inline notes */
.c-green   { color: var(--green); }
.c-faint   { color: var(--faint); }
.c-removed { color: var(--t-removed); }
.c-dcomp   { color: var(--d-comp); }
.c-dcache  { color: var(--d-cache); }

/* bits for routing / agents / memory-store / settings */

/* destination chain: agent -> BugMunch -> Headroom -> provider */
.dest-chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 4px 0 14px; }
.dest-node {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px 14px; min-width: 120px;
}
.dest-node .dn-role { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.dest-node .dn-name { font-size: 14px; font-weight: 700; margin-top: 3px; word-break: break-all; }
.dest-node .dn-sub { font-size: 11px; color: var(--faint); margin-top: 2px; }
.dest-node.is-provider { border-color: var(--t-after); }
.dest-node.is-provider .dn-name { color: var(--t-after); }
.dest-arrow { display: flex; align-items: center; color: var(--muted); font-size: 18px; padding: 0 10px; }

/* request feed badges (reuses table.models) */
.badge { display: inline-block; padding: 1px 7px; border-radius: var(--r-sm); font-size: 11px; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
.badge.prov { color: var(--t-after); border-color: var(--t-after); }
.badge.client { color: var(--accent); border-color: var(--accent); }
.hit-yes { color: var(--green); font-weight: 700; }
.hit-no  { color: var(--faint); }

/* detected-agent + generic info cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.icard { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; }
.icard .ic-name { font-size: 14px; font-weight: 700; }
.icard .ic-big { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.icard .ic-sub { font-size: 11px; color: var(--faint); margin-top: 3px; }
.icard.on { border-color: var(--green); }
.icard.on .ic-name::before { content: "● "; color: var(--green); }
.icard.off .ic-name::before { content: "○ "; color: var(--faint); }

/* module on/off toggles */
.mod-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-width: 780px; }
.mod-toggle { display: flex; align-items: center; gap: 8px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 11px; cursor: pointer; font-size: 13px; }
.mod-toggle input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.mod-toggle .mt-tab { color: var(--faint); font-size: 11px; margin-left: auto; }

/* quota bars */
.quota-row { margin-bottom: 14px; }
.quota-row .ql { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.quota-row .ql strong { color: var(--text); }
.qbar { height: 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.qfill { height: 100%; background: var(--accent); }
.qfill.warn { background: var(--t-removed); }
.qfill.crit { background: #f85149; }

/* memory-store cards (reuses .card-grid/.icard) + control buttons */
.controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger { border-color: #f85149; color: #f85149; }
.btn-danger:hover { background: #f85149; color: #fff; border-color: #f85149; }
.ctl-note { font-size: 11.5px; color: var(--faint); margin-top: 8px; }

/* security info rows */
.sec-item { display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.sec-item .sd { width: 9px; height: 9px; border-radius: var(--r-xs); background: var(--faint); display: inline-block; flex: 0 0 auto; }
.sec-item .sd.ok { background: var(--green); }
.sec-item .sd.warn { background: var(--t-removed); }
.sec-item .sl { color: var(--muted); min-width: 150px; }
.sec-item .sv { color: var(--text); font-weight: 600; }

/* trust badges + footprint readout */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.badge-trust { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
.badge-trust.ok { border-color: var(--green); }
.badge-trust.ok::before { content: "\2713"; color: var(--green); font-weight: 700; }
.badge-trust.warn { border-color: var(--t-removed); }
.badge-trust.warn::before { content: "\0021"; color: var(--t-removed); font-weight: 700; }
/* header Headroom-reachability badge - squared off, not a pill */
.hr-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: var(--r-xs); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.hr-status::before { content: ""; width: 7px; height: 7px; background: var(--faint); display: inline-block; }
.hr-status.ok { border-color: var(--green); }
.hr-status.ok::before { background: var(--green); }
.hr-status.warn { border-color: var(--t-removed); color: var(--t-removed); }
.hr-status.warn::before { background: var(--t-removed); }
.hr-status.checking { color: var(--muted); }
.fp-total { font-size: 15px; font-weight: 700; margin: 4px 0 12px; }
.fp-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12px; }
.fp-row .fp-name { width: 116px; color: var(--muted); }
.fp-bar { flex: 1; height: 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.fp-fill { height: 100%; width: 0; background: var(--accent); }
.fp-row .fp-val { width: 84px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }

/* orchestration tree (requests grouped by turn) */
.orch-turn { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; }
.orch-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; padding: 9px 12px; background: var(--panel-2); }
.orch-head .orch-id { font-weight: 700; font-size: 13px; }
.orch-head .orch-meta { font-size: 12px; color: var(--muted); }
.orch-head .orch-save { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--t-after); }
.orch-kids { padding: 4px 12px 8px; }
.orch-kid { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border); font-size: 12px; }
.orch-kid:first-child { border-top: 0; }
.orch-kid .orch-model { color: var(--text); }
.orch-kid .orch-tok { color: var(--muted); font-variant-numeric: tabular-nums; }
.orch-kid .c-removed { margin-left: auto; }

/* what-if calculator */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 16px; }
.calc-grid .set-row { margin-bottom: 4px; }

/* onboarding / empty-state coaching */
.onboard-step { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; }
.onboard-step:first-child { border-top: 0; }
.onboard-step .ob-dot { width: 19px; height: 19px; border-radius: var(--r-sm); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
.onboard-step.done .ob-dot { background: var(--green); border-color: var(--green); color: #fff; }
.onboard-step.todo .ob-dot { border-color: var(--accent); color: var(--accent); }
.onboard-step .ob-title { font-weight: 600; }
.onboard-step .ob-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* offline log-player dropzone */
.dropzone { border: 1px dashed var(--border); border-radius: var(--r-md); padding: 18px; text-align: center; background: var(--panel-2); }
.dropzone.drag { border-color: var(--accent); }
.dropzone .dz-hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
.dropzone input[type=file] { color: var(--text); font: inherit; font-size: 13px; }

/* header link to headroom */
.hr-link { font-size: 12px; color: var(--accent); text-decoration: none; }
.hr-link:hover { text-decoration: underline; }

/* demo-mode notice (calm, not alarming) */
.demo-banner { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  font-size: 12px; text-align: center; padding: 7px 10px; border-radius: var(--r-sm); margin-bottom: 14px; }

/* help guide typography */
.help-doc p { font-size: 13px; color: var(--text); line-height: 1.55; margin: 0 0 10px; }
.help-doc ul { margin: 0; padding-left: 18px; }
.help-doc li { font-size: 13px; color: var(--text); line-height: 1.55; margin-bottom: 7px; }
.help-doc code { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 1px 5px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

/* hover ? explainers on panel headings */
/* the ? help button. bigger + accent-colored so it reads as clickable; the tip
   itself is the shared #tip element, positioned + clamped on-screen by app.js. */
.qmark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.28); background: var(--accent); color: #06121f;
  font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; margin-left: 8px; flex: 0 0 auto;
  vertical-align: middle; box-shadow: 0 1px 5px rgba(0,0,0,0.35); transition: transform .1s ease, filter .1s ease, box-shadow .1s ease; }
/* dark glyph on the bright dark-theme accent, white glyph on the deeper light-theme accent */
[data-theme="light"] .qmark { color: #ffffff; border-color: rgba(0,0,0,0.18); }
.qmark:hover { filter: brightness(1.15); transform: scale(1.2); box-shadow: 0 2px 9px rgba(0,0,0,0.5); }
.qmark:active { transform: scale(0.96); }
.qmark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* wide tables (e.g. By model) scroll inside their panel instead of off-screen */
#model_table_wrap, #feed_wrap, #replay_table_wrap, #billing_providers, #dest_providers { overflow-x: auto; }