/* Headcount. Colours, fonts and radii come from /brand/tokens.css, exported from the
   Studio pack (subcult-tv studio/brands/headcount); edit there and export again. The
   names below are the dashboard's chart roles, mapped onto those tokens. See
   docs/design-system.md. */
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/brand/fonts/Barlow-Condensed-1.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400; font-display: swap; src: url("/brand/fonts/Public-Sans-0.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 700; font-display: swap; src: url("/brand/fonts/Public-Sans-1.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/brand/fonts/JetBrains-Mono-0.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("/brand/fonts/JetBrains-Mono-1.woff2") format("woff2"); }

:root { color-scheme: dark; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } }
:root[data-theme="light"] { color-scheme: light; }

.viz-root {
  --surface-0: var(--hc-bg);
  --surface-1: var(--hc-panel);
  --border: var(--hc-line);
  --grid: var(--hc-raised);
  --text-primary: var(--hc-fg);
  --text-secondary: color-mix(in srgb, var(--hc-fg) 45%, var(--hc-muted));
  --text-muted: var(--hc-muted);
  /* Viewers are ink, chatters teal, follows blue. Amber is the brand and the score, never a series. */
  --series-1: var(--hc-fg);
  --series-2: var(--hc-secondary);
  --series-3: var(--hc-tertiary);
  --baseline: var(--hc-muted);
  --meter-track: var(--hc-raised);
  --meter-fill: var(--hc-q3);
  --critical: var(--hc-critical);
  /* Ordinal quotient ramp: q1 is a tint for low scores, q2 to q4 are marks. */
  --q1: var(--hc-q1);
  --q2: var(--hc-q2);
  --q3: var(--hc-q3);
  --q4: var(--hc-q4);
  --wash: color-mix(in srgb, var(--hc-fg) 5%, transparent);
  --wash-strong: color-mix(in srgb, var(--hc-fg) 9%, transparent);
  --label: 500 11px/1.4 var(--hc-font-label);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--hc-bg); }
.viz-root {
  min-height: 100vh;
  background: var(--surface-0);
  color: var(--text-primary);
  font: 14px/1.5 var(--hc-font-body);
}
a { color: inherit; }
.prose a, .note a, .caption a { color: var(--hc-accent-ink); }
:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

.top {
  display: flex; align-items: center; gap: 28px;
  padding: 0 24px; min-height: 60px; border-bottom: 1px solid var(--border); background: var(--surface-1);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand .mark { width: 28px; height: 28px; flex: none; }
.brand .mark .ink { fill: var(--hc-fg); }
.brand .mark .hollow { fill: none; stroke: var(--hc-fg); stroke-width: 1.2; }
.brand .mark .slash { stroke: var(--hc-accent); stroke-width: 2.8; stroke-linecap: round; }
.brand .word {
  font: 700 26px/1 var(--hc-font-display); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--hc-wordmark);
}
.top nav { display: flex; gap: 22px; align-self: stretch; }
.top nav a {
  display: flex; align-items: center; color: var(--text-muted); text-decoration: none;
  font: var(--label); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 3px solid transparent; padding-top: 3px;
}
.top nav a:hover { color: var(--text-primary); }
.top nav a.active { color: var(--text-primary); border-bottom-color: var(--hc-accent); }

main { max-width: 1200px; margin: 0 auto; padding: 24px; }
h1 { font: 700 34px/1.1 var(--hc-font-display); margin: 0 0 6px; letter-spacing: 0.005em; }
h2 { font: 700 21px/1.2 var(--hc-font-display); margin: 30px 0 10px; letter-spacing: 0.01em; }
.sub { color: var(--text-secondary); margin: 0 0 20px; }
.muted { color: var(--text-muted); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 24px; }
.tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--hc-radius-panel); padding: 14px 16px 12px; }
.tile .v { font: 700 38px/1.05 var(--hc-font-display); font-variant-numeric: tabular-nums; }
.tile .l { color: var(--text-muted); font: var(--label); text-transform: uppercase; letter-spacing: 0.05em; }

.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--hc-radius-panel); padding: 16px; margin-bottom: 16px; }

table { width: 100%; border-collapse: collapse; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--hc-radius-panel); overflow: hidden; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--grid); white-space: nowrap; }
th { font: var(--label); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
td.r, th.r { text-align: right; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-0); }
td.cat { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
td.title { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--critical); margin-right: 6px; vertical-align: 1px; }
.tier { font-size: 12px; color: var(--text-muted); }

.meter { display: inline-flex; align-items: center; gap: 8px; }
.meter .track { width: 90px; height: 8px; background: var(--meter-track); border-radius: 4px; overflow: hidden; }
.meter .fill { height: 100%; background: var(--meter-fill); border-radius: 0 4px 4px 0; transform-origin: left; animation: grow 0.6s ease-out; }
.meter.low-conf .fill { opacity: 0.45; }
@keyframes grow { from { transform: scaleX(0); } }

.chart { position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .label { font-size: 13px; font-weight: 700; margin: 0 0 4px; }
.chart .label small { font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.axis text { fill: var(--text-muted); font: 400 10.5px var(--hc-font-label); }
.axis line, .axis path { stroke: var(--grid); }
.gridline { stroke: var(--grid); }
.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.2s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.event-line { stroke: var(--text-muted); stroke-dasharray: 3 3; }
.event-label { fill: var(--text-secondary); font-size: 11px; }
.crosshair { stroke: var(--text-secondary); stroke-width: 1; pointer-events: none; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--text-secondary); font-size: 13px; margin: 4px 0 12px; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.legend i.dash { background: repeating-linear-gradient(90deg, var(--baseline) 0 4px, transparent 4px 7px) !important; }

.comp { display: grid; grid-template-columns: 200px 1fr 70px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--grid); }
.comp:last-child { border-bottom: 0; }
.comp .name { font-weight: 550; }
.comp .name small { display: block; font-weight: 400; color: var(--text-muted); font-size: 12px; }
.comp .bar { height: 10px; background: var(--meter-track); border-radius: 5px; overflow: hidden; }
.comp .bar div { height: 100%; background: var(--meter-fill); border-radius: 0 5px 5px 0; animation: grow 0.8s ease-out; transform-origin: left; }
.comp.na { color: var(--text-muted); }
.comp .detail { grid-column: 1 / -1; color: var(--text-muted); font-size: 12px; margin-top: -4px; }

.tooltip {
  position: fixed; pointer-events: none; z-index: 20;
  background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px; font-size: 12px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
  min-width: 160px;
}
.tooltip .t { color: var(--text-secondary); margin-bottom: 4px; }
.tooltip .row { display: flex; justify-content: space-between; gap: 14px; }
.tooltip .row i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }

.note { color: var(--text-secondary); background: var(--surface-1); border: 1px solid var(--border); border-left: 3px solid var(--hc-accent); padding: 10px 14px; border-radius: 6px; margin: 0 0 16px; }
.empty { color: var(--text-muted); padding: 32px; text-align: center; }
.prose { max-width: 720px; }
.prose li { margin-bottom: 6px; }

/* ---------- added charts ---------- */
.small { font-size: 12px; }
.caption { color: var(--text-secondary); font-size: 13px; max-width: 860px; margin: 10px 0 0; }
.basis { color: var(--text-secondary); max-width: 860px; margin: 0 0 20px; }
.stats-line { margin: 0 0 12px; color: var(--text-secondary); }
.stats-line b { color: var(--text-primary); }
.table-note { margin: 0 0 8px; }
.axis .axis-title, .axis-title { fill: var(--text-secondary); font-size: 12px; }
.annot { fill: var(--text-secondary); font-size: 12px; }
.annot.strong { fill: var(--text-primary); font-weight: 600; }
.annot { paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; stroke-linejoin: round; }
.zeroline { stroke: var(--baseline); }
.row-label { fill: var(--text-primary); font-size: 13px; font-weight: 600; }
.row-note, .axis-label { fill: var(--text-muted); font-size: 11px; font-weight: 400; }
.na-mark { fill: var(--text-muted); font-size: 12px; }
.legend.compact { margin: 8px 0 0; font-size: 12px; }
.legend i.band { height: 10px; width: 14px; vertical-align: -1px; background: var(--wash-strong); }
.legend i.faint { background: var(--series-1); opacity: 0.35; }
.legend svg.key { vertical-align: -1px; margin-right: 6px; overflow: visible; }
.hit { cursor: default; }

.filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 0 0 12px; color: var(--text-secondary); font-size: 13px; }
.filters select, .replay select {
  font: inherit; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px; margin-left: 6px;
}

/* engagement map */
.pt { stroke: var(--surface-1); stroke-width: 1.5; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pt.q1 { fill: var(--q1); } .pt.q2 { fill: var(--q2); } .pt.q3 { fill: var(--q3); } .pt.q4 { fill: var(--q4); }
.pt.provisional { fill: var(--surface-1); stroke-width: 2; }
.pt.provisional.q1 { stroke: var(--q1); } .pt.provisional.q2 { stroke: var(--q2); }
.pt.provisional.q3 { stroke: var(--q3); } .pt.provisional.q4 { stroke: var(--q4); }
.pt.hover { stroke: var(--text-primary); stroke-width: 2; }
.fit-band { fill: var(--wash-strong); stroke: none; }
.fit-band.outer { fill: var(--wash); }
.fit-line { fill: none; stroke: var(--text-muted); stroke-width: 2; }
.table-view { margin-top: 14px; }
.table-view summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; }
.table-view table { margin-top: 8px; }

/* periodicity */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pair > .chart { min-width: 0; }
.acf { fill: var(--baseline); }
.acf.multiple { fill: var(--series-1); opacity: 0.45; }
.acf.period { fill: var(--series-1); }
.noise-band { fill: var(--wash-strong); }
.line.cycle { stroke: var(--series-1); stroke-width: 1; opacity: 0.3; }
.line.median-line { stroke: var(--series-1); stroke-width: 2.5; }
.fade-in { animation: fade-in 0.5s ease-out both; }
@keyframes fade-in { from { opacity: 0; } }

/* synchrony raster */
.onset-window { fill: var(--wash-strong); }
.lane { stroke: var(--grid); }
.lane-label { fill: var(--text-secondary); font-size: 12px; }
.lane-label.strong { fill: var(--text-primary); font-weight: 600; }
a .lane-label:hover { text-decoration: underline; }
.lane-note { fill: var(--text-muted); font-size: 11px; }
.tick { fill: var(--baseline); }
.tick.matched { fill: var(--series-1); }
.tick-hit:focus { outline: none; }
.tick-hit:focus-visible { stroke: var(--text-primary); stroke-width: 1.5; }
.onset-dot { fill: var(--surface-1); stroke: var(--text-primary); stroke-width: 1.5; }

/* columns */
.col { fill: var(--series-1); }
.col.q-col { fill: var(--meter-fill); }
.col.follows { fill: var(--series-3); }
.col-hover { fill: var(--wash); pointer-events: none; }

/* leaderboard controls */
.board-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 10px; scroll-margin-top: 76px; }
.toggle {
  display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 6px 12px; cursor: pointer;
  font: var(--label); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-secondary); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--hc-radius-control);
}
.toggle:hover { color: var(--text-primary); border-color: var(--text-muted); }
.toggle[aria-pressed="true"] { color: var(--text-primary); border-color: var(--hc-accent); background: color-mix(in srgb, var(--hc-accent) 12%, var(--surface-1)); }
.toggle .count { margin-left: 6px; color: var(--text-muted); }
th a.sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
th a.sort:hover, th a.sort.active { color: var(--text-primary); }
th a.sort .arrow { opacity: 0.5; }
th a.sort.active .arrow { opacity: 1; color: var(--hc-accent-ink); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin: 14px 0 0; font-size: 13px; }
.pager a, .pager span {
  min-width: 36px; min-height: 36px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--hc-radius-control); text-decoration: none; color: var(--text-secondary);
}
.pager a:hover { border-color: var(--border); color: var(--text-primary); }
.pager a[aria-current="page"] { border-color: var(--hc-accent); color: var(--text-primary); font-weight: 700; }
.pager .off { color: var(--text-muted); opacity: 0.5; }
.pager .gap { min-width: 20px; padding: 6px 2px; }

.foot { max-width: 1200px; margin: 24px auto 0; padding: 18px 24px 32px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 13px; }
.foot p { margin: 0 0 6px; max-width: 860px; }
.foot a { color: var(--hc-accent-ink); }
.foot a.support { font-weight: 700; }

/* sparklines */
.table-wrap { overflow-x: auto; border-radius: var(--hc-radius-panel); }
.spark-cell { padding-top: 4px; padding-bottom: 4px; }
.spark { display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--series-1); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--series-1); stroke: var(--surface-1); stroke-width: 1.5; }

/* replay */
.replay { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 6px; }
.replay .play {
  font: inherit; font-weight: 700; color: #121316; background: var(--hc-accent); border: 1px solid var(--hc-accent);
  border-radius: var(--hc-radius-control); padding: 5px 12px; cursor: pointer; min-width: 98px;
}
.replay .play:hover { background: color-mix(in srgb, var(--hc-accent) 85%, #fff); }
.replay .speed { color: var(--text-secondary); font-size: 13px; }
.replay .scrub { flex: 1 1 160px; min-width: 120px; accent-color: var(--hc-accent); }
.counters { display: flex; gap: 20px; flex-wrap: wrap; }
.counters > div { display: flex; flex-direction: column; min-width: 70px; }
.counters .cv { font: 700 24px/1.1 var(--hc-font-display); font-variant-numeric: tabular-nums; }
.counters .cl { color: var(--text-muted); font: var(--label); }
.counters .cl i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 4px; vertical-align: 2px; }
.replay + .caption { margin: 0 0 8px; }

@media (max-width: 760px) {
  .pair { grid-template-columns: 1fr; }
  .top { flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; }
  .top nav { flex-wrap: wrap; gap: 6px 14px; align-self: auto; }
  .top nav a { padding: 4px 0 2px; }
  main { padding: 16px; }
  .comp { grid-template-columns: 1fr 1fr 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .draw, .meter .fill, .comp .bar div, .fade-in { animation: none; stroke-dashoffset: 0; }
  .pt { transition: none; }
}

.search { position: relative; margin-left: auto; }
.search input {
  width: 260px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--hc-radius-control);
  background: var(--surface-0); color: var(--text-primary); font: inherit;
}
.search input::placeholder { color: var(--text-muted); }
.search input:focus { outline: 2px solid var(--hc-accent); outline-offset: -1px; }
.suggest {
  position: absolute; right: 0; top: calc(100% + 4px); width: 300px; max-height: 70vh; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; padding: 4px 0;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.15);
}
.suggest .group { padding: 8px 12px 2px; font: var(--label); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.suggest a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 12px; text-decoration: none; }
.suggest a:hover, .suggest a:focus { background: var(--wash-strong); outline: none; }
.suggest a.all { border-top: 1px solid var(--border); margin-top: 4px; color: var(--text-secondary); }
@media (max-width: 760px) {
  .top { flex-wrap: wrap; }
  .search { margin-left: 0; width: 100%; }
  .search input, .suggest { width: 100%; }
}
.plain-links { padding-left: 18px; }
.plain-links li { margin: 4px 0; }