/* ADM-14-04 statistics dashboards (dataviz method). Chart roles are tokens on html[data-view=stats], set by the page:
   categorical slots 1–5 (validated: CVD ΔE ≥ 8 adjacent, light on #FFFFFF, dark on #181C33), the blue sequential ramp for
   heatmaps, an ordinal blue ramp for mastery levels, recessive grid/axis hairlines. Dark mode is selected (own steps), not
   flipped: the OS setting applies it unless data-theme=light; data-theme=dark forces it. Text always wears ink tokens. */
html[data-view=stats]{--viz-s1:#2a78d6;--viz-s2:#eb6834;--viz-s3:#1baf7a;--viz-s4:#eda100;--viz-s5:#e87ba4;--viz-o1:#86b6ef;--viz-o2:#3987e5;--viz-o3:#256abf;--viz-o4:#184f95;
  --viz-h0:#cde2fb;--viz-h1:#9ec5f4;--viz-h2:#6da7ec;--viz-h3:#3987e5;--viz-h4:#256abf;--viz-h5:#184f95;--viz-h6:#0d366b;--viz-on-light:#0b0b0b;--viz-on-dark:#ffffff;
  --viz-grid:#E6E9F2;--viz-base:#C3C7D6;--viz-track:#E8EEF9;--viz-hatch:#B9C0D6;--viz-spark:#9AA0B8;--viz-good:#006300;--viz-bad:#B3261E;
  --viz-warn-bg:#FFF4D6;--viz-warn-edge:#9A5B00;--viz-tip-shadow:0 8px 24px #1b1f3b29}
@media (prefers-color-scheme:dark){html[data-palette=neutral][data-view=stats]:not([data-theme=light]){color-scheme:dark;
  --tb-color-web-canvas:#0F1222;--tb-color-web-surface:#181C33;--tb-color-web-subtle:#22274A;--tb-color-web-ink:#EEF0FA;--tb-color-web-muted:#B4B9DA;--tb-color-web-line:#6E78AE;
  --tb-color-web-primary:#8FA6FF;--tb-color-web-onprimary:#0F1222;--tb-color-web-focus:#FFE58F;--web-card-border:#2E3463;--web-primary-hover:#A9BAFF;--web-primary-edge:#5E78E0;
  --viz-s1:#3987e5;--viz-s2:#d95926;--viz-s3:#199e70;--viz-s4:#c98500;--viz-s5:#d55181;--viz-grid:#262B4A;--viz-base:#3A4170;--viz-track:#262B4A;--viz-hatch:#4A5285;
  --viz-spark:#6E75A0;--viz-good:#3DCB3D;--viz-bad:#FF8A80;--viz-warn-bg:#3A2E10;--viz-warn-edge:#F2B33D;--viz-tip-shadow:0 8px 24px #00000080}}
html[data-palette=neutral][data-view=stats][data-theme=dark]{color-scheme:dark;
  --tb-color-web-canvas:#0F1222;--tb-color-web-surface:#181C33;--tb-color-web-subtle:#22274A;--tb-color-web-ink:#EEF0FA;--tb-color-web-muted:#B4B9DA;--tb-color-web-line:#6E78AE;
  --tb-color-web-primary:#8FA6FF;--tb-color-web-onprimary:#0F1222;--tb-color-web-focus:#FFE58F;--web-card-border:#2E3463;--web-primary-hover:#A9BAFF;--web-primary-edge:#5E78E0;
  --viz-s1:#3987e5;--viz-s2:#d95926;--viz-s3:#199e70;--viz-s4:#c98500;--viz-s5:#d55181;--viz-grid:#262B4A;--viz-base:#3A4170;--viz-track:#262B4A;--viz-hatch:#4A5285;
  --viz-spark:#6E75A0;--viz-good:#3DCB3D;--viz-bad:#FF8A80;--viz-warn-bg:#3A2E10;--viz-warn-edge:#F2B33D;--viz-tip-shadow:0 8px 24px #00000080}
/* Light-only literals in the admin sheet follow the tokens on the stats view, so dark cards, inputs and tables stay dark. */
html[data-view=stats] .canvas .panel,html[data-view=stats] .page-head{border-color:var(--web-card-border)}
html[data-view=stats] .canvas :is(input:not([type=checkbox],[type=radio]),select),html[data-view=stats] .table-scroll,html[data-view=stats] .button.secondary,
html[data-view=stats] .banner.error{background:var(--tb-color-web-surface);color:var(--tb-color-web-ink)}
html[data-view=stats] th{border-bottom-color:var(--web-card-border)}html[data-view=stats] td{border-bottom-color:var(--web-card-border)}
html[data-view=stats] tbody tr:hover>td{background:var(--tb-color-web-subtle)}

/* Frame: tabs, one filter row above everything it scopes, the range line; a reload keeps the board at reduced opacity. */
.stats-tabs ul{display:flex;gap:8px;list-style:none;margin:0 0 16px;padding:0 0 4px;overflow-x:auto}
.stats-tabs a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1.5px solid var(--web-card-border);border-radius:999px;background:var(--tb-color-web-surface);color:var(--tb-color-web-ink);font-weight:600;text-decoration:none;white-space:nowrap}
.stats-tabs a:hover{border-color:var(--tb-color-web-primary)}
.stats-tabs a[aria-current=page]{background:var(--tb-color-web-primary);border-color:var(--tb-color-web-primary);color:var(--tb-color-web-onprimary);font-weight:700}
.stats-filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px 16px;padding:16px 20px;margin:0 0 12px;background:var(--tb-color-web-surface);border:1px solid var(--web-card-border);border-radius:16px}
html[data-palette=neutral] .stats-filters .field{flex:0 1 11.5rem;margin:0}.stats-filters .field label{display:block;font-weight:700;font-size:.875rem;margin-bottom:4px}
html[data-palette=neutral] .stats-filters .field :is(input,select){width:100%}
.stats-presets{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}.stats-presets .button{padding:8px 14px}
.stats-range{margin:0 0 16px;font-size:.875rem;color:var(--tb-color-web-muted)}
.stats-board{transition:opacity .2s}.stats-board.is-refreshing{opacity:.55}
.stats-loading{color:var(--tb-color-web-muted)}.stats-skeleton{height:120px;margin-top:12px;border-radius:16px;background:var(--tb-color-web-subtle)}
.stats-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
html[data-palette=neutral] .canvas .stats-grid>.panel{margin:0;grid-column:1/-1;min-width:0}
@media(min-width:900px){html[data-palette=neutral] .canvas .stats-grid>.span-6{grid-column:span 6}html[data-palette=neutral] .canvas .stats-grid>.span-4{grid-column:span 6}html[data-palette=neutral] .canvas .stats-grid>.span-8{grid-column:span 12}}
@media(min-width:1200px){html[data-palette=neutral] .canvas .stats-grid>.span-4{grid-column:span 4}html[data-palette=neutral] .canvas .stats-grid>.span-8{grid-column:span 8}}

/* Stat tiles: label, value (proportional figures), signed delta with an arrow (never colour alone), sparkline. */
.stat-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr));gap:12px}
.stat-tile{min-width:0;padding:14px 16px;background:var(--tb-color-web-surface);border:1px solid var(--web-card-border);border-radius:14px}
.stat-label{font-size:.8125rem;font-weight:600;color:var(--tb-color-web-muted)}
.stat-value{margin:2px 0;font-size:1.75rem;line-height:2.25rem;font-weight:700;color:var(--tb-color-web-ink);overflow-wrap:anywhere}
.stat-delta{display:flex;gap:6px;align-items:baseline;font-size:.8125rem;font-weight:700;color:var(--tb-color-web-muted)}
.stat-delta.is-good{color:var(--viz-good)}.stat-delta.is-bad{color:var(--viz-bad)}.stat-arrow{font-size:.6875rem}
.stat-sub{font-size:.8125rem;color:var(--tb-color-web-muted)}
.viz-spark{display:block;margin-top:8px;overflow:visible}.viz-spark-line{fill:none;stroke:var(--viz-spark);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz-spark-dot{fill:var(--viz-s1);stroke:var(--tb-color-web-surface);stroke-width:2}

/* Charts: subtitle, legend, y labels in HTML, a stretchable plot, hairline grid, x labels, crosshair + one tooltip. */
.viz{margin:0;min-width:0}.viz+.viz{margin-top:20px}
.viz-title{font-size:.875rem;font-weight:600;color:var(--tb-color-web-muted);margin:0 0 8px}
.viz-note{font-size:.8125rem;color:var(--tb-color-web-muted);margin:-4px 0 8px}
.viz-empty{margin:4px 0;padding:16px;border-radius:10px;background:var(--tb-color-web-subtle);color:var(--tb-color-web-muted);text-align:center;font-size:.875rem}
.viz-legend{display:flex;flex-wrap:wrap;gap:4px 16px;list-style:none;margin:0 0 8px;padding:0;font-size:.8125rem;color:var(--tb-color-web-ink)}
.viz-legend li{display:flex;align-items:center;gap:6px}
.viz-key{display:inline-block;flex:none;width:12px;height:12px;border-radius:3px}.viz-key.is-line{width:16px;height:3px;border-radius:2px}
.slot-1{background:var(--viz-s1)}.slot-2{background:var(--viz-s2)}.slot-3{background:var(--viz-s3)}.slot-4{background:var(--viz-s4)}.slot-5{background:var(--viz-s5)}
.slot-o1{background:var(--viz-o1)}.slot-o2{background:var(--viz-o2)}.slot-o3{background:var(--viz-o3)}.slot-o4{background:var(--viz-o4)}
.viz-frame{display:grid;grid-template-columns:3rem minmax(0,1fr)}
.viz-y{position:relative}.viz-y span{position:absolute;right:8px;transform:translateY(50%);font-size:.75rem;color:var(--tb-color-web-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.viz-plot{position:relative;height:180px;border-radius:4px}.viz-plot:focus-visible{outline:3px solid var(--tb-color-web-focus);outline-offset:4px}
.viz-grid,.viz-base{position:absolute;left:0;right:0;height:1px;background:var(--viz-grid)}.viz-base{background:var(--viz-base)}
.viz-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
path.viz-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}circle.viz-line{stroke:none}
path.viz-line.slot-1{stroke:var(--viz-s1)}path.viz-line.slot-2{stroke:var(--viz-s2)}path.viz-line.slot-3{stroke:var(--viz-s3)}path.viz-line.slot-4{stroke:var(--viz-s4)}path.viz-line.slot-5{stroke:var(--viz-s5)}
circle.viz-line.slot-1,.viz-area.slot-1{fill:var(--viz-s1)}circle.viz-line.slot-2{fill:var(--viz-s2)}circle.viz-line.slot-3{fill:var(--viz-s3)}
.viz-plot svg *{background:none}.viz-area{opacity:.1;stroke:none}
.viz-columns{position:absolute;inset:0;display:grid;align-items:end}
.viz-column{display:flex;flex-direction:column-reverse;align-items:center;height:100%;gap:2px}
.viz-bar{display:block;width:min(24px,72%);min-height:1px}.viz-column .viz-bar:last-child{border-radius:4px 4px 0 0}
.viz-hidden-band{position:absolute;top:0;bottom:0;transform:translateX(-50%);background:repeating-linear-gradient(135deg,var(--viz-hatch) 0 2px,transparent 2px 7px);opacity:.75}
.viz-crosshair{position:absolute;top:0;bottom:0;width:1px;background:var(--viz-spark);pointer-events:none}
.viz-tip{position:absolute;top:4px;z-index:2;transform:translateX(-50%);min-width:9rem;max-width:16rem;padding:8px 10px;border:1px solid var(--web-card-border);border-radius:8px;background:var(--tb-color-web-surface);box-shadow:var(--viz-tip-shadow);font-size:.8125rem;color:var(--tb-color-web-muted);pointer-events:none}
.viz-tip-title{font-weight:700;color:var(--tb-color-web-ink);margin-bottom:4px}.viz-tip-row{display:flex;align-items:center;gap:6px}.viz-tip-row strong{color:var(--tb-color-web-ink)}
.viz-x{position:relative;height:22px;margin-left:3rem}.viz-x span{position:absolute;top:4px;transform:translateX(-50%);font-size:.75rem;color:var(--tb-color-web-muted);white-space:nowrap}
.viz-x span:first-child{transform:none}.viz-x span:last-child{transform:translateX(-100%)}
.viz-kind-columns .viz-x span:first-child,.viz-kind-stacked .viz-x span:first-child{transform:translateX(-50%)}
.viz-kind-columns .viz-x span:last-child,.viz-kind-stacked .viz-x span:last-child{transform:translateX(-50%)}
.viz-table{margin-top:8px}.viz-table summary{display:flex;align-items:center;min-height:36px;cursor:pointer;font-size:.8125rem;font-weight:600;color:var(--tb-color-web-primary)}
.viz-table table{font-size:.8125rem;font-variant-numeric:tabular-nums}

/* Ranked bars: label, track (lighter step of the same ramp), value at the tip; a withheld row is hatched and says so. */
.bar-list{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.bar-list li{display:grid;grid-template-columns:minmax(5rem,10rem) minmax(0,1fr) auto;align-items:center;gap:2px 12px;font-size:.875rem}
.bar-label{overflow-wrap:anywhere;color:var(--tb-color-web-ink)}.bar-value{font-weight:700;font-variant-numeric:tabular-nums;color:var(--tb-color-web-ink);white-space:nowrap}
.bar-track{display:block;height:12px;background:var(--viz-track);border-radius:0 4px 4px 0}.bar-fill{display:block;height:100%;min-width:2px;background:var(--viz-s1);border-radius:0 4px 4px 0}
.bar-list li.is-hidden .bar-track{background:repeating-linear-gradient(135deg,var(--viz-hatch) 0 2px,transparent 2px 7px)}.bar-list li.is-hidden .bar-value{font-weight:600;color:var(--tb-color-web-muted)}
.bar-detail{grid-column:2/-1;font-size:.75rem;color:var(--tb-color-web-muted)}
.stats-card{container-type:inline-size}
@container (max-width:520px){.bar-list li{grid-template-columns:minmax(0,1fr) auto}.bar-track{grid-column:1/-1;grid-row:2}.bar-detail{grid-column:1/-1}}

/* Thin segmented bar (no text) with the parts listed beside it: swatch, name, figure, share. */
.parts-bar{display:flex;gap:2px;height:10px;margin:4px 0 12px;border-radius:999px;overflow:hidden;background:var(--viz-track)}
.parts-block{flex-basis:0;min-width:3px}
.parts-list{display:grid;gap:6px;list-style:none;margin:0;padding:0;font-size:.875rem}
.parts-list li{display:grid;grid-template-columns:12px minmax(0,1fr) auto 3rem;align-items:center;gap:8px;color:var(--tb-color-web-ink)}
.parts-list strong{font-variant-numeric:tabular-nums;white-space:nowrap}.parts-share{text-align:right;color:var(--tb-color-web-muted);font-variant-numeric:tabular-nums}

/* Heatmap: one hue, seven steps, darker = higher; the value printed in every cell; hatched "ẩn", plain "—" for none. */
.heat-scroll{border:0}html[data-palette=neutral] .heat-scroll{background:transparent}
.heat-table{width:auto;min-width:0;max-width:100%;border-collapse:separate;border-spacing:3px}
html[data-view=stats] table{background:var(--tb-color-web-surface)}html[data-view=stats] .heat-table{background:transparent}
html[data-palette=neutral] .heat-table th{background:transparent;border:0;font-size:.8125rem;white-space:nowrap}
html[data-palette=neutral] .heat-table td.heat-cell{min-width:4.5rem;padding:10px 8px;border:0;border-radius:6px;text-align:center;font-weight:700;font-size:.8125rem;font-variant-numeric:tabular-nums}
html[data-palette=neutral] .heat-table td.step-0{background:var(--viz-h0);color:var(--viz-on-light)}html[data-palette=neutral] .heat-table td.step-1{background:var(--viz-h1);color:var(--viz-on-light)}
html[data-palette=neutral] .heat-table td.step-2{background:var(--viz-h2);color:var(--viz-on-light)}html[data-palette=neutral] .heat-table td.step-3{background:var(--viz-h3);color:var(--viz-on-light)}
html[data-palette=neutral] .heat-table td.step-4{background:var(--viz-h4);color:var(--viz-on-dark)}html[data-palette=neutral] .heat-table td.step-5{background:var(--viz-h5);color:var(--viz-on-dark)}
html[data-palette=neutral] .heat-table td.step-6{background:var(--viz-h6);color:var(--viz-on-dark)}
html[data-palette=neutral] .heat-table td.is-hidden{background:repeating-linear-gradient(135deg,var(--viz-hatch) 0 2px,transparent 2px 7px);color:var(--tb-color-web-ink);font-weight:600}
html[data-palette=neutral] .heat-table td.is-empty{background:var(--tb-color-web-subtle);color:var(--tb-color-web-muted);font-weight:600}
.heat-scale{display:flex;align-items:center;gap:3px;margin-top:8px;font-size:.75rem;color:var(--tb-color-web-muted)}.heat-scale i{width:20px;height:10px;border-radius:2px}
.heat-scale span:first-child{margin-right:4px}.heat-scale span:last-child{margin-left:4px}
.heat-scale .step-0{background:var(--viz-h0)}.heat-scale .step-1{background:var(--viz-h1)}.heat-scale .step-2{background:var(--viz-h2)}.heat-scale .step-3{background:var(--viz-h3)}
.heat-scale .step-4{background:var(--viz-h4)}.heat-scale .step-5{background:var(--viz-h5)}.heat-scale .step-6{background:var(--viz-h6)}

/* Insights: an icon and a word carry the tone; the sentence carries the numbers. */
.insight-list{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.insight{display:grid;grid-template-columns:24px auto minmax(0,1fr);align-items:baseline;gap:8px;font-size:.9375rem;color:var(--tb-color-web-ink)}
.insight-icon{display:inline-grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--tb-color-web-line);border-radius:50%;font-size:.6875rem;font-weight:800;align-self:center}
.insight-tone{font-size:.8125rem;font-weight:700;white-space:nowrap}
.insight.is-warn .insight-icon{background:var(--viz-warn-bg);border-color:var(--viz-warn-edge)}.insight.is-up .insight-icon{border-color:var(--viz-good)}.insight.is-down .insight-icon{border-color:var(--viz-bad)}
@media(max-width:560px){.insight{display:block}.insight-icon{display:inline-grid;margin-right:6px;vertical-align:middle}.insight-tone{margin-right:6px}
  html[data-palette=neutral] .stats-filters .field{flex:1 1 9rem}.stats-presets{margin-left:0}}