/* 蹬况 (stats/index.html): page layout over styles.css. Every rule starts with body[data-page="stats"],
   so the ladder and hero pages never change. Same language as the rest of the site: black-green panels,
   hairlines, monospaced tabular numbers, one quiet glow on live figures. No filters, no new animation
   loops; the only motion (the warming cursor) uses the shared blink and is removed by
   prefers-reduced-motion in styles.css. */
body[data-page="stats"] {
  --st-gap: 14px;
  --st-panel: rgba(9, 17, 12, .82);
  --st-head: rgba(12, 22, 16, .6);
  /* Harness tones: fixed per Harness (SOURCES order), so one Harness keeps its colour on every row. */
  --st-tone-0: var(--accent);
  --st-tone-1: var(--mint);
  --st-tone-2: #b9e66b;
  --st-tone-3: #7cc8ff;
  --st-tone-4: #9aa9a0;
}
body[data-page="stats"] .overview { position: relative; padding: 20px 0 36px; border-top: 0; }

/* ---- title and the filters that drive live, window totals, trend and usage mix ---- */
body[data-page="stats"] .st-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; margin: 0 0 14px; }
body[data-page="stats"] .st-heading { flex: 1 1 240px; min-width: 0; }
body[data-page="stats"] .st-kicker { margin: 0 0 4px; font: 11.5px/1.4 var(--mono); color: var(--accent-2); letter-spacing: .06em; }
body[data-page="stats"] .st-kicker::before { content: "$ "; color: var(--ink-3); }
body[data-page="stats"] #overview-title { margin: 0; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.15; letter-spacing: .04em; }
body[data-page="stats"] .st-filters { flex: 0 1 auto; gap: 6px 8px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--st-panel); }
body[data-page="stats"] .st-filters label { gap: 6px; padding-left: 6px; font: 11.5px/1.2 var(--mono); color: var(--ink-3); letter-spacing: .03em; }
body[data-page="stats"] .st-filters select { width: 168px; height: 32px; }
body[data-page="stats"] .st-filters .seg button { min-width: 52px; font-family: var(--mono); }

/* ---- shared heads: a title, the scope it uses, and the time of the data shown ---- */
body[data-page="stats"] .st-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 10px; }
body[data-page="stats"] .st-panel-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
body[data-page="stats"] .st-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--glow); }
body[data-page="stats"] .st-block-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 18px; margin: 0 0 10px; }
body[data-page="stats"] .st-block-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body[data-page="stats"] .st-block-title h2,
body[data-page="stats"] #models-title { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 18px; line-height: 1.25; color: var(--ink); }
body[data-page="stats"] .st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; margin: 0; font: 11px/1.5 var(--mono); color: var(--ink-3); }
body[data-page="stats"] .st-scope { display: inline-block; max-width: 100%; padding: 0 6px; overflow: hidden; border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
body[data-page="stats"] .st-scope:empty,
body[data-page="stats"] .st-stamp:empty { display: none; }
body[data-page="stats"] .st-unit { color: var(--ink-2); }
body[data-page="stats"] .st-stamp { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
body[data-page="stats"] .st-stamp::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
body[data-page="stats"] .st-stamp[data-state="live"]::before { background: var(--accent-2); }
body[data-page="stats"] .st-stamp[data-state="stale"] { color: var(--warn); }
body[data-page="stats"] .st-stamp[data-state="stale"]::before { background: var(--warn); }
body[data-page="stats"] .st-stamp[data-state="error"] { color: var(--down); }
body[data-page="stats"] .st-stamp[data-state="error"]::before { background: var(--down); }
/* A definition that adds information: a small "i", reachable by keyboard and by a tap. */
body[data-page="stats"] .st-info { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; margin-left: 4px; border: 1px solid var(--line);
  border-radius: 50%; color: var(--ink-3); font: italic 600 10px/1 var(--mono); text-transform: none; letter-spacing: 0; cursor: help; vertical-align: middle; }
body[data-page="stats"] .st-info:hover,
body[data-page="stats"] .st-info:focus-visible { color: var(--accent); border-color: var(--accent-2); }

/* ---- key figures: live (green edge) beside window totals (quiet edge) ---- */
body[data-page="stats"] .st-kpis { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--st-gap); }
body[data-page="stats"] .st-panel { display: flex; flex-direction: column; min-width: 0; padding: 12px 18px 14px; }
body[data-page="stats"] .st-period::before { background: var(--accent-2); opacity: .35; box-shadow: none; }
body[data-page="stats"] .st-figures { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px 0; margin: 0 0 10px; }
body[data-page="stats"] .st-period .st-figures { display: flex; flex-wrap: wrap; gap: 12px 22px; }
body[data-page="stats"] .st-period .st-figure { flex: 1 1 max-content; }
body[data-page="stats"] .st-period .st-figure + .st-figure { padding-left: 0; margin-left: 0; border-left: 0; }
body[data-page="stats"] .st-figure { min-width: 0; }
body[data-page="stats"] .st-figure + .st-figure { padding-left: 20px; margin-left: 20px; border-left: 1px solid var(--line-soft); }
body[data-page="stats"] .st-figure .kpi-label { font-size: 12.5px; letter-spacing: .02em; }
body[data-page="stats"] .st-figure .kpi-value { margin: 4px 0 2px; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.1; }
body[data-page="stats"] .st-figure-primary .kpi-value { font-size: clamp(34px, 3.9vw, 50px); }
body[data-page="stats"] .st-figure .kpi-value small { margin-left: 6px; font-size: 12px; }
body[data-page="stats"] .st-period .kpi-value { color: var(--ink); text-shadow: none; }
body[data-page="stats"] .st-figure .kpi-sub { font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; }
body[data-page="stats"] .st-figure .kpi-sub:empty { display: none; }
/* Online devices with their per-device mean, concurrency, and input + output: one strip. */
body[data-page="stats"] .st-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: auto 0 0; padding: 0; border: 0; border-top: 1px solid var(--line-soft); }
body[data-page="stats"] .st-strip > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 9px 12px 0; border-left: 1px solid var(--line-soft); }
body[data-page="stats"] .st-strip > div:first-child { padding-left: 0; border-left: 0; }
body[data-page="stats"] .st-strip > div[tabindex] { cursor: help; }
body[data-page="stats"] .st-strip dt { font-size: 11px; line-height: 1.4; }
body[data-page="stats"] .st-strip dd { color: var(--ink); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="stats"] .st-stat-sub { margin: 0; font: 11px/1.4 var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="stats"] .st-foot-note { margin: auto 0 0; padding-top: 9px; border-top: 1px solid var(--line-soft); font: 11px/1.5 var(--mono); color: var(--ink-3); cursor: help; }
body[data-page="stats"] .st-foot-note:empty { display: none; }

/* ---- model workspace: the title, then one frame — the four views and the shared search on one bar, the
   selected view's toolbar (scope and data time, then its own controls), then its table ---- */
body[data-page="stats"] .models { margin: 24px 0 0; padding: 0; border: 0; }
body[data-page="stats"] #models .st-ws-title { margin: 0 0 10px; }
body[data-page="stats"] #models .st-ws { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--st-panel); }
body[data-page="stats"] #models .st-ws-nav { display: flex; align-items: stretch; gap: 0 16px; min-width: 0; border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0; background: var(--st-head); }
/* Each tab: the view name over its own range, so 近 5 分钟, UTC 日 and 24h · 7d stay visibly different. */
body[data-page="stats"] .st-views { display: flex; flex: 0 1 auto; gap: 0; min-width: 0; margin: 0; overflow-x: auto; scrollbar-width: thin; }
body[data-page="stats"] .st-views [role="tab"] { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  min-width: 112px; min-height: 52px; padding: 7px 18px 5px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-2);
  font: 600 13.5px/1.25 var(--sans); text-align: left; white-space: nowrap; cursor: pointer; }
body[data-page="stats"] .st-views [role="tab"] + [role="tab"] { box-shadow: inset 1px 0 0 var(--line-soft); }
body[data-page="stats"] .st-views [role="tab"]:first-child { border-top-left-radius: var(--radius); }
body[data-page="stats"] .st-views [role="tab"] small { font: 400 10.5px/1.3 var(--mono); color: var(--ink-3); letter-spacing: .02em; }
body[data-page="stats"] .st-views [role="tab"]:hover { color: var(--ink); background: rgba(57, 255, 136, .03); }
body[data-page="stats"] .st-views [role="tab"][aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); background: rgba(57, 255, 136, .06); }
body[data-page="stats"] .st-views [role="tab"][aria-selected="true"] small { color: var(--accent-2); }
body[data-page="stats"] .st-views [role="tab"]:focus-visible { outline-offset: -3px; }
/* The search filters every view, so it sits on the views' bar against the frame's right edge. */
body[data-page="stats"] .st-search { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: auto; padding: 8px 12px; }
body[data-page="stats"] .model-search { width: 240px; height: 34px; padding: 0 10px 0 30px; font-size: 12.5px; background: var(--st-panel)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23718b7a' stroke-width='1.6'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='M9.5 9.5L13 13'/%3E%3C/svg%3E") no-repeat 10px 50%; }
body[data-page="stats"] .model-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent-2); }
body[data-page="stats"] .st-count { font: 11.5px var(--mono); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Panels share the frame. Each opens with one toolbar row; the live one matches the three insight views
   (insights.css): scope and data time, then the view's own controls after a hairline. */
body[data-page="stats"] .st-view-panel { min-width: 0; }
body[data-page="stats"] .st-view-panel[hidden] { display: none; }
body[data-page="stats"] .st-live-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 46px; padding: 7px 14px; border-bottom: 1px solid var(--line-soft); }
body[data-page="stats"] .st-live-tools { display: flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid var(--line-soft); }
body[data-page="stats"] .st-tools-label { font: 11px var(--mono); color: var(--ink-3); }
body[data-page="stats"] .st-live-tools .model-inline-windows { margin: 0; }
body[data-page="stats"] #models .table-wrap { border: 0; border-radius: 0 0 var(--radius) var(--radius); background: none; }

/* ---- live table: model, mean and trend side by side; Harness wraps in its own column; totals together on the right ---- */
body[data-page="stats"] .model-table { table-layout: fixed; }
body[data-page="stats"] .model-table th { padding: 8px 12px; font-size: 11px; background: var(--st-head); white-space: nowrap; }
body[data-page="stats"] .model-table td { padding: 10px 12px; vertical-align: middle; }
/* Model (about a 20-character id), mean, request total and devices are fixed; the trend takes a quarter of the
   width and Harness the rest, so a wide screen widens the trend and the Harness chips instead of one empty gap. */
body[data-page="stats"] .model-table .m-name { width: 200px; }
body[data-page="stats"] .model-table .m-value { width: 132px; }
body[data-page="stats"] .model-table .m-spark { width: 25%; }
body[data-page="stats"] .model-table .m-harness { width: auto; }
body[data-page="stats"] .model-table .m-req { width: 108px; }
body[data-page="stats"] .model-table .m-dev { width: 88px; }
body[data-page="stats"] .model-table th.num { text-align: right; }
body[data-page="stats"] .model-table th.m-req,
body[data-page="stats"] .model-table th.m-dev { white-space: normal; }
body[data-page="stats"] .model-table .m-spark { padding-left: 8px; }
/* The inline trend fills its column; strokes keep their width when the 120-unit drawing is stretched. */
body[data-page="stats"] .model-table td.m-spark .spark { width: 100%; height: 30px; }
body[data-page="stats"] .model-table .spark path { vector-effect: non-scaling-stroke; }
/* Sortable headers: a button with a direction arrow; aria-sort names the sorted column. */
body[data-page="stats"] .st-sort { display: inline-flex; align-items: center; gap: 4px; padding: 3px 0; border: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
body[data-page="stats"] .st-sort::after { content: "↕"; color: var(--ink-3); opacity: .45; font-size: 10px; }
body[data-page="stats"] .st-sort[data-dir="asc"]::after { content: "↑"; color: var(--accent); opacity: 1; }
body[data-page="stats"] .st-sort[data-dir="desc"]::after { content: "↓"; color: var(--accent); opacity: 1; }
body[data-page="stats"] .st-sort:hover,
body[data-page="stats"] [aria-sort] > .st-sort { color: var(--ink); }
body[data-page="stats"] #model-rows tr:not(.empty):not(.skeleton):hover { background: rgba(57, 255, 136, .03); }
body[data-page="stats"] .model-name { overflow-wrap: anywhere; }
body[data-page="stats"] .st-model { display: block; color: var(--ink); font: 600 13.5px/1.4 var(--mono); }
body[data-page="stats"] .model-table .value { font-size: 17px; }
body[data-page="stats"] .model-table .value.none { color: var(--ink-3); text-shadow: none; }
body[data-page="stats"] .model-table .m-value .st-tag,
body[data-page="stats"] .model-table .m-value .st-cell-note { display: block; width: fit-content; margin: 3px 0 0 auto; }
body[data-page="stats"] .st-tag { padding: 0 4px; border: 1px solid rgba(242, 193, 78, .45); border-radius: 3px; color: var(--warn);
  font: 600 10px/1.5 var(--mono); letter-spacing: .02em; white-space: nowrap; cursor: help; }
body[data-page="stats"] .st-cell-note { font: 10.5px/1.4 var(--mono); color: var(--ink-3); white-space: nowrap; }
body[data-page="stats"] .model-table td.m-req,
body[data-page="stats"] .model-table td.m-dev { font: 13px var(--mono); color: var(--ink-2); }
body[data-page="stats"] .model-table td.m-req { color: var(--ink); }
/* Harness: compact chips that wrap inside the column; a shared or unattributed group has a dashed edge. */
body[data-page="stats"] .model-table .harness-list { gap: 4px 6px; font-size: 12px; }
body[data-page="stats"] .harness-entry { align-items: center; }
body[data-page="stats"] #models .model-table .harness-entry { max-width: 100%; padding: 1px 7px; border: 1px solid var(--line-soft); border-radius: 3px;
  background: rgba(5, 8, 6, .35); line-height: 1.5; overflow-wrap: anywhere; }
body[data-page="stats"] #models .model-table .harness-entry.st-unassigned { border-style: dashed; border-color: var(--line); }
body[data-page="stats"] .harness-entry[tabindex] { cursor: help; }
body[data-page="stats"] .st-swatch { flex: none; width: 7px; height: 7px; border-radius: 1px; background: var(--st-tone, var(--ink-3)); }
body[data-page="stats"] [data-tone="0"] { --st-tone: var(--st-tone-0); }
body[data-page="stats"] [data-tone="1"] { --st-tone: var(--st-tone-1); }
body[data-page="stats"] [data-tone="2"] { --st-tone: var(--st-tone-2); }
body[data-page="stats"] [data-tone="3"] { --st-tone: var(--st-tone-3); }
body[data-page="stats"] [data-tone="4"] { --st-tone: var(--st-tone-4); }
body[data-page="stats"] .st-swatch[data-tone="rest"] { background: repeating-linear-gradient(135deg, var(--ink-3) 0 1.5px, transparent 1.5px 3.5px); }
body[data-page="stats"] .st-unassigned { color: var(--ink-3); }

/* Empty, warming and failed tables say so in words; nothing is drawn as zero. */
body[data-page="stats"] #model-rows tr.empty td { padding: 28px 16px; }
body[data-page="stats"] #model-rows tr.st-warming td::after { content: "▍"; margin-left: 4px; color: var(--accent); animation: blink 1.1s steps(1) infinite; }
body[data-page="stats"] #model-rows tr.st-failed td { color: var(--warn); }

/* ---- site trend ---- */
body[data-page="stats"] .charts { display: flex; flex-direction: column; min-width: 0; margin: 24px 0 0; padding: 12px 16px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--st-panel); }
body[data-page="stats"] .charts .chart-head { align-items: flex-end; justify-content: space-between; margin: 0 0 8px; }
body[data-page="stats"] #charts .chart { height: 260px; }
body[data-page="stats"] .charts .legend { margin: 6px 0 0; }
body[data-page="stats"] .legend i.l-dot { width: 5px; height: 5px; border: 0; border-radius: 50%; background: var(--accent); }
body[data-page="stats"] .chart-tip { min-width: 170px; }

/* ---- usage mix: model and Harness lists over one denominator ---- */
body[data-page="stats"] .st-mix { margin: 24px 0 0; padding: 12px 16px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--st-panel); }
body[data-page="stats"] .st-mix .st-block-head { margin-bottom: 12px; }
body[data-page="stats"] .st-mix-coverage { color: var(--ink-3); }
body[data-page="stats"] .st-mix-coverage:empty { display: none; }
body[data-page="stats"] .st-mix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
body[data-page="stats"] .st-mix-panel { min-width: 0; }
body[data-page="stats"] .st-mix-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 6px; }
body[data-page="stats"] .st-mix-head h3 { margin: 0; font: 600 12px/1.4 var(--mono); letter-spacing: .08em; color: var(--ink-2); }
body[data-page="stats"] .st-mix-cap { margin: 0; font: 11px/1.4 var(--mono); color: var(--ink-3); }
body[data-page="stats"] .st-mix-cap[data-state="inconsistent"] { color: var(--warn); cursor: help; }
body[data-page="stats"] .st-mix-rows { margin: 0; padding: 0; list-style: none; }
body[data-page="stats"] .st-mix-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(40px, 1fr) auto 52px; align-items: center; gap: 10px;
  min-height: 26px; padding: 2px 0; border-bottom: 1px solid var(--line-soft); font: 12.5px/1.3 var(--mono); }
body[data-page="stats"] .st-mix-row:last-child { border-bottom: 0; }
body[data-page="stats"] .st-mix-name { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
body[data-page="stats"] .st-mix-bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--line-soft); }
body[data-page="stats"] .st-mix-bar i { display: block; height: 100%; min-width: 1px; border-radius: 3px; background: rgba(34, 199, 106, .72); }
body[data-page="stats"] .st-mix-row:first-child .st-mix-bar i { background: var(--accent); }
body[data-page="stats"] .st-mix-abs { color: var(--ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
body[data-page="stats"] .st-mix-pct { color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
body[data-page="stats"] .st-mix-rest .st-mix-name,
body[data-page="stats"] .st-na { color: var(--ink-3); }
body[data-page="stats"] .st-mix-rest { cursor: help; }
body[data-page="stats"] .st-mix-rest .st-mix-bar i { background: repeating-linear-gradient(135deg, var(--ink-3) 0 1.5px, transparent 1.5px 3.5px); }
body[data-page="stats"] .st-mix-rows .none { padding: 10px 0; font: 12.5px var(--mono); color: var(--ink-3); list-style: none; }
body[data-page="stats"] .st-more { display: block; min-height: 32px; margin: 8px 0 0; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); color: var(--accent); font: 12px var(--mono); cursor: pointer; }
body[data-page="stats"] .st-more[hidden] { display: none; }

/* ---- responsive ---- */
/* Touch and phones: filters, tabs and search are 44px targets; 16px fields avoid the iOS zoom. */
@media (pointer: coarse), (max-width: 720px) {
  body[data-page="stats"] .st-filters select,
  body[data-page="stats"] .st-filters .seg button,
  body[data-page="stats"] .model-search,
  body[data-page="stats"] .st-views [role="tab"],
  body[data-page="stats"] .st-more,
  body[data-page="stats"] .st-live-tools .seg button,
  body[data-page="stats"] #models .model-table th .st-sort,
  body[data-page="stats"] #dist-metric button,
  body[data-page="stats"] #chart-series button { min-height: 44px; }
  body[data-page="stats"] .st-filters select { font-size: 16px; }
  body[data-page="stats"] .st-info { width: 24px; height: 24px; }
}
/* Below the width where tabs and search share one bar: tabs share the bar's width, the search gets its own row
   under them, and the toolbar keeps the view's controls on its right. */
@media (max-width: 1100px) {
  body[data-page="stats"] #models .st-ws-nav { flex-direction: column; gap: 0; }
  body[data-page="stats"] .st-views { flex: none; }
  body[data-page="stats"] .st-views [role="tab"] { flex: 1 1 0; min-width: 0; }
  body[data-page="stats"] .st-search { margin-left: 0; border-top: 1px solid var(--line-soft); }
  body[data-page="stats"] .model-search { flex: 0 1 340px; width: auto; }
  body[data-page="stats"] .st-live-tools { margin-left: auto; padding-left: 0; border-left: 0; }
  body[data-page="stats"] .model-table .m-name { width: 160px; }
  body[data-page="stats"] .model-table .m-value { width: 124px; }
  body[data-page="stats"] .model-table .m-spark { width: 20%; }
  body[data-page="stats"] .model-table .m-req { width: 100px; }
  body[data-page="stats"] .model-table .m-dev { width: 84px; }
}
@media (max-width: 960px) {
  body[data-page="stats"] .st-kpis { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body[data-page="stats"] .st-filters { flex: 1 1 100%; }
  body[data-page="stats"] .st-mix-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body[data-page="stats"] .overview { padding: 14px 0 28px; }
  body[data-page="stats"] .st-hero { gap: 10px; margin-bottom: 10px; }
  body[data-page="stats"] .st-heading { flex-basis: 100%; }
  body[data-page="stats"] #overview-title { font-size: 22px; }
  body[data-page="stats"] .st-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  body[data-page="stats"] .st-filters label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; min-width: 0; }
  body[data-page="stats"] .st-filters select { width: 100%; }
  body[data-page="stats"] .st-filters .seg { grid-column: 1 / -1; display: flex; }
  body[data-page="stats"] .st-filters .seg button { flex: 1; }
  body[data-page="stats"] .st-panel { padding: 12px 14px 12px; }
  body[data-page="stats"] .st-figure + .st-figure { padding-left: 14px; margin-left: 14px; }
  body[data-page="stats"] .models,
  body[data-page="stats"] .charts,
  body[data-page="stats"] .st-mix { margin-top: 18px; }
  /* Phones: tabs in a 2 × 2 grid with hairlines, the search full width under them, toolbar controls full width. */
  body[data-page="stats"] .st-search { flex: none; padding: 8px 10px; }
  body[data-page="stats"] .model-search { flex: 1; width: auto; font-size: 16px; }
  body[data-page="stats"] .st-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  body[data-page="stats"] .st-views [role="tab"] { min-width: 0; align-items: center; padding: 6px 8px 4px; font-size: 13px; text-align: center; white-space: normal; }
  body[data-page="stats"] .st-views [role="tab"]:nth-child(2) { box-shadow: inset 1px 0 0 var(--line-soft); border-top-right-radius: var(--radius); }
  body[data-page="stats"] .st-views [role="tab"]:nth-child(3) { box-shadow: inset 0 1px 0 var(--line-soft); }
  body[data-page="stats"] .st-views [role="tab"]:nth-child(4) { box-shadow: inset 1px 1px 0 var(--line-soft); }
  body[data-page="stats"] .st-live-head { padding: 8px 10px; }
  body[data-page="stats"] .st-live-tools { flex: 1 1 100%; margin-left: 0; }
  body[data-page="stats"] .st-live-tools .model-inline-windows { flex: 1; }
  body[data-page="stats"] .st-live-tools .model-inline-windows button { flex: 1; }
  /* Phone rows: the header becomes a row of sort buttons; each model is a card that keeps every field readable. */
  body[data-page="stats"] .model-table thead { display: block; }
  body[data-page="stats"] .model-table thead tr { display: flex; flex-wrap: wrap; gap: 0 2px; padding: 4px 8px; border-bottom: 1px solid var(--line); background: var(--st-head); }
  body[data-page="stats"] .model-table th { width: auto !important; padding: 0 8px; background: none; border: 0; text-align: left; }
  body[data-page="stats"] .model-table th.m-spark { display: none; }
  body[data-page="stats"] .model-table th .st-sort { min-height: 44px; font-size: 11.5px; }
  body[data-page="stats"] .model-table tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name value" "spark spark" "harness harness" "meta meta"; gap: 6px 12px; padding: 12px; }
  body[data-page="stats"] .st-model { font-size: 14px; }
  body[data-page="stats"] .model-table td.m-value { align-self: start; text-align: right; }
  body[data-page="stats"] .model-table .value { font-size: 19px; }
  body[data-page="stats"] .model-table td.m-spark { padding: 0; align-self: center; }
  body[data-page="stats"] .model-table td.m-spark .spark { width: 100%; max-width: none; height: 32px; }
  body[data-page="stats"] .model-table .harness-list { font-size: 12.5px; }
  body[data-page="stats"] .model-table td.m-req { align-self: center; text-align: left; white-space: normal; font-size: 12.5px; color: var(--ink-2); }
  body[data-page="stats"] .model-table td.m-req::before { content: attr(data-label) " "; color: var(--ink-3); }
  body[data-page="stats"] .model-table td.m-req::after { content: " · " attr(data-devices); margin-left: 0; color: var(--ink-3); }
  body[data-page="stats"] #model-rows tr.skeleton { display: block; }
  body[data-page="stats"] .charts,
  body[data-page="stats"] .st-mix { padding: 12px 10px 10px; }
  body[data-page="stats"] #charts .chart { height: 200px; }
  body[data-page="stats"] .st-mix-row { grid-template-columns: minmax(0, 1fr) auto 50px; min-height: 30px; font-size: 13px; }
  body[data-page="stats"] .st-mix-bar { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  body[data-page="stats"] .st-live .st-figures { grid-template-columns: minmax(0, 1fr); }
  body[data-page="stats"] .st-live .st-figure + .st-figure { padding: 10px 0 0; margin: 0; border-left: 0; border-top: 1px solid var(--line-soft); }
  body[data-page="stats"] .st-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="stats"] .st-strip > div:nth-child(3) { padding-left: 0; border-left: 0; }
  /* Harness on its own row, then Model beside the window switch. */
  body[data-page="stats"] .st-filters { grid-template-columns: minmax(0, 1fr) auto; }
  body[data-page="stats"] .st-filters label { grid-template-columns: 4.5em minmax(0, 1fr); }
  body[data-page="stats"] .st-filters label:first-child { grid-column: 1 / -1; }
  body[data-page="stats"] .st-filters select { padding: 0 28px 0 10px; }
  body[data-page="stats"] .st-filters .seg { grid-column: auto; }
}
@media (max-width: 420px) {
  /* Each select names itself through its first option; the visible label text yields its width. */
  body[data-page="stats"] .st-filters label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body[data-page="stats"] .st-filters label { display: block; padding-left: 0; }
  body[data-page="stats"] .st-figure .kpi-value { font-size: 24px; }
  body[data-page="stats"] .st-figure-primary .kpi-value { font-size: 32px; }
  body[data-page="stats"] .st-period .st-figures { display: grid; grid-template-columns: minmax(0, 1fr); }
  body[data-page="stats"] .st-period .st-figure + .st-figure { padding: 10px 0 0; margin: 0; border-left: 0; border-top: 1px solid var(--line-soft); }
}