/* The topbar market-stats strip (#tb-stats, statsbar.js; a #topbar child right after the TF row): the
   exchange-header idiom (HyperLiquid, Binance) — one COLUMN per number, a small muted label over its
   value, a thin rule between groups — because label-over-value is about half the width of
   label-beside-value, and width is what this bar is short of. Its own file so the chart.css edits of
   the pane work never collide with it; every rule is scoped to #tb-stats, so a page without the span
   (or a stale chart.css) is untouched. statsbar.js decides WHICH columns show (it fits them to the
   room the topbar has left) — this file only styles them. */
:root {
  --tbs-oi-up: #5c9ded; /* oi.js's own palette: never confusable with the price candles */
  --tbs-oi-down: #e0a458;
  --tbs-cool: #7f9cc9;
  --tbs-warm: #f0b429;
  --tbs-hot: #ff7043;
}
:root[data-theme="light"] {
  --tbs-oi-up: #1f63c6;
  --tbs-oi-down: #a85d08;
  --tbs-cool: #4a6fa5;
  --tbs-warm: #a16207;
  --tbs-hot: #d84315;
}

#tb-stats {
  display: inline-flex;
  align-items: center;
  align-self: center; /* a two-line block centres in the bar */
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 0;
}
#tb-stats .tbs-seg {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1.2;
}
#tb-stats .tbs-join { margin-left: 4px; }
#tb-stats .tbs-l {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.2px;
}
#tb-stats .tbs-row { display: inline-flex; align-items: baseline; gap: 5px; }
#tb-stats .tbs-v {
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* The group rule. statsbar.js hides the one before the first shown group. */
#tb-stats .tbs-sep {
  align-self: center;
  width: 1px;
  height: 22px;
  margin: 0 6px;
  background: var(--border);
}

#tb-stats .tbs-up { color: var(--pos); }
#tb-stats .tbs-down { color: var(--neg); }
#tb-stats .tbs-oiup { color: var(--tbs-oi-up); }
#tb-stats .tbs-oidown { color: var(--tbs-oi-down); }
#tb-stats .tbs-muted { color: var(--muted); }
#tb-stats .tbs-strong { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Activity 0..4 = dead · quiet · normal · elevated · hot */
#tb-stats .tbs-act0 { color: var(--muted); }
#tb-stats .tbs-act1 { color: var(--tbs-cool); }
#tb-stats .tbs-act2 { color: var(--fg); }
#tb-stats .tbs-act3 { color: var(--tbs-warm); }
#tb-stats .tbs-act4 { color: var(--tbs-hot); }

/* TIGHT — statsbar.js sets it only when the normal type would drop one of the seven CORE columns (a
   ~1440 px window): the same 10 px labels, 11 px values, a third of the gaps, and a long label's / read word's
   SHORT form (data-short) printed in place of its text. The text node stays the full word, so the
   tooltip, the Data Window and a screen reader keep it; `font-size: 0` hides it without a layout box. */
#tb-stats.tbs-tight .tbs-seg { padding: 2px 1px; }
#tb-stats.tbs-tight .tbs-sep { margin: 0 2px; }
#tb-stats.tbs-tight .tbs-join { margin-left: 3px; }
#tb-stats.tbs-tight .tbs-row { gap: 4px; }
#tb-stats.tbs-tight .tbs-v { font-size: 11px; }
#tb-stats.tbs-tight [data-short] { font-size: 0; letter-spacing: 0; }
#tb-stats.tbs-tight .tbs-l[data-short]::after { content: attr(data-short); font-size: 10px; letter-spacing: 0.2px; }
#tb-stats.tbs-tight .tbs-v[data-short]::after { content: attr(data-short); font-size: 11px; }

/* A value past 5 minutes old: kept, greyed (the tooltip says how old). */
#tb-stats .tbs-stale { opacity: 0.55; }
#tb-stats .tbs-stale .tbs-v { color: var(--muted); }

/* A column with a pane behind it toggles that pane. */
#tb-stats .tbs-click { cursor: pointer; }
#tb-stats .tbs-click:hover { background: var(--hover); }
#tb-stats .tbs-click:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }