/* ─── /stats.html — hive-wide turn-stats rollup ────────────────────
   Extracted from the dashboard ST4TS tab. Same minimal-
   chrome pattern as /flow.html and /logs.html: the back-link header +
   title (.page-header / .page-back / .page-title) live in
   @hive/shared/chrome.css.
   `.hive-stats-table` also lives in common.css — it's shared with the
   dashboard SYST3M › C0NT41N3R L04D table. Only the ST4TS-specific
   window selector, summary chips, and bars are page-specific. */

body.stats-shell {
  margin: 0;
  padding: 0;
}

.stats-main {
  padding: 1.2em 1.5em 2em;
}

/* Window selector — now lives in the page-header (same row as ← home /
   ST4TS title). Fills the remaining header space and right-aligns the
   buttons. The shared `.btn` pill look is kept; createTabStrip flags the
   active one with `.hive-tab--active`. */
.hive-stats-windows {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
  /* Smaller than the default .btn so the pills fit comfortably in the
     header without competing visually with the page title. */
  font-size: 0.82em;
}
/* Inactive buttons: slightly muted to distinguish from the active window,
   but readable even on low-contrast operator colour schemes. */
.hive-stats-windows .btn {
  color: var(--subtext1, var(--muted));
  border-color: var(--border);
  font-size: 1em; /* relative to the .hive-stats-windows 0.82em */
}
.hive-stats-windows .btn.hive-tab--active {
  border-color: var(--amber);
  color: var(--amber);
}

.hive-stats-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.hive-stats-chip {
  display: inline-flex;
  flex-direction: column;
  padding: 6px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 7em;
}
.hive-stats-chip .k {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: lowercase;
}
.hive-stats-chip .v {
  font-size: 1.05rem;
  color: var(--fg);
}
.hive-stats-chip.est .v {
  color: var(--amber);
}

.hive-stats-bar {
  display: grid;
  grid-template-columns: 12em 1fr 4em;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
  font-size: 0.85rem;
}
.hive-stats-bar .track {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 3px;
  height: 14px;
  overflow: hidden;
}
.hive-stats-bar .fill {
  display: block;
  height: 100%;
  background: var(--purple);
}
.hive-stats-bar .cnt {
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}