/* Example county dashboard (/dashboard/<slug>/). Colour tokens, dots and .official boxes come from /map/map.css;
   this file is layout and chart marks only. Tier colours are the site's own (--good, --warn, --bad, --nocall). */
.dash{padding-bottom:24px}
.dash h2{font:700 22px/1.2 var(--display);margin:0 0 6px}
.dash .pill{display:inline-block;background:var(--accent-soft);color:var(--text);border-radius:999px;padding:2px 10px;margin-right:6px;letter-spacing:.08em;font-weight:600}
.dash #banner .official{max-width:760px;margin:0 0 14px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;min-width:0}
.card .note{margin:4px 0 10px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0}
.kpi h3{font:600 14px/1.3 var(--body);color:var(--muted);margin:0 0 6px}
.kpi .k-v{font:600 36px/1.1 var(--body);margin:0}
.kpi .k-v small{font-size:16px;font-weight:500;color:var(--muted)}
.kpi .k-na{font-size:24px;color:var(--muted)}
.kpi .k-s{font-size:13px;color:var(--muted);margin:6px 0 0}
.k-calls{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:4px;font-size:14px}
.k-calls li{display:flex;align-items:center;gap:2px}
.k-calls .k-n{font-weight:600;min-width:22px;font-variant-numeric:tabular-nums}
.charts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:12px}
.wide{grid-column:1/-1}
.dash>#content>.card{margin-bottom:12px}
.scroll-x{overflow-x:auto}
.legend-inline{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px}
.legend-inline span{display:inline-flex;align-items:center;gap:6px}
.legend-inline .dot{margin-right:0}
.swatch{display:inline-block;width:14px;height:10px;border-radius:2px}
.swatch.rain{background:var(--accent);opacity:.35}
.swatch.strip{background:linear-gradient(90deg,var(--good) 0 33%,var(--warn) 33% 66%,var(--bad) 66%);height:6px}
/* Charts: hairline recessive grid, text in text tokens, data marks in tier or accent colour. */
svg.chart{display:block;max-width:100%;height:auto;overflow:visible}
svg.chart text{font:12px var(--body);fill:var(--muted)}
svg.chart text.lb{fill:var(--text);font-size:13px}
svg.chart text.vl{fill:var(--text);font-size:12px;font-variant-numeric:tabular-nums}
svg.chart text.nv{font-style:italic}
svg.chart .grid{stroke:var(--line);stroke-width:1}
svg.chart .base{stroke:var(--muted);stroke-width:1}
svg.chart .std{stroke:var(--text);stroke-width:2}
svg.chart .std-l{fill:var(--text)}
svg .cell.t-green{fill:var(--good)}svg .cell.t-yellow{fill:var(--warn)}svg .cell.t-red{fill:var(--bad)}svg .cell.t-none,svg .cell.t-unknown{fill:var(--nocall)}
.cell.fc{opacity:.55}
.smp .grid{stroke:var(--line);stroke-width:1}.smp .std{stroke:var(--text);stroke-width:2}
.pt{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.pt.over{fill:var(--bad)}
.pt.below{fill:var(--surface);stroke:var(--accent);stroke-width:2}
.lab{fill:var(--surface);stroke:var(--text);stroke-width:2}
.lab.over{fill:var(--bad);stroke:var(--bad)}
.rain{fill:var(--accent);opacity:.35}
.hit{fill:transparent}
[data-tip]{cursor:default;outline:none}
[data-tip]:hover .pt,[data-tip]:focus .pt,[data-tip]:hover .lab,[data-tip]:focus .lab{stroke-width:3}
rect.cell[data-tip]:hover,rect.cell[data-tip]:focus{stroke:var(--text);stroke-width:2}
g[data-tip]:hover .hit,g[data-tip]:focus .hit{fill:var(--accent-soft);opacity:.5}
[data-tip]:focus-visible{outline:none}
.replays{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:12px 24px}
.replay{margin:0;min-width:0}
.replay figcaption{font:600 16px/1.3 var(--display);margin:0 0 4px}
.replay .note{margin:2px 0 0}
.tip{position:fixed;z-index:50;max-width:280px;background:var(--ink);color:var(--ink-text);font-size:13px;line-height:1.4;padding:6px 10px;border-radius:6px;pointer-events:none;box-shadow:var(--shadow)}
/* Table */
.beach-table{width:100%;border-collapse:collapse;font-size:14px}
.beach-table th,.beach-table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.beach-table thead th{padding:0;border-bottom:1px solid var(--muted)}
.beach-table thead th button{background:none;border:0;padding:10px 8px;font:600 13px var(--body);color:var(--text);min-height:44px;text-align:left;width:100%}
.beach-table thead th[aria-sort=ascending] button,.beach-table thead th[aria-sort=descending] button{color:var(--accent)}
.beach-table thead th:last-child{padding:10px 8px;font-size:13px}
.beach-table tbody th{font-weight:600}
.beach-table .over{color:var(--bad);font-weight:600}
.beach-table .muted{color:var(--muted)}
.sources ul{margin:0;padding-left:18px;font-size:14px}
.sources li{margin:4px 0;overflow-wrap:anywhere}
.empty{font-style:italic}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.charts{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.wrap.dash{padding:0 16px}.kpi .k-v{font-size:30px}.card{padding:14px}
  /* Phone: each beach is a block; the sort buttons stay, as one wrapping row. */
  .beach-table,.beach-table thead,.beach-table tbody,.beach-table tbody tr,.beach-table tbody th,.beach-table td{display:block;width:100%}
  .beach-table thead tr{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:8px}
  .beach-table thead th{border:1px solid var(--line);border-radius:999px}
  .beach-table thead th button{width:auto;min-height:36px;padding:6px 12px}
  .beach-table thead th:last-child{display:none}
  .beach-table tbody tr{border-bottom:1px solid var(--line);padding:8px 0}
  .beach-table tbody th,.beach-table td{border:0;padding:3px 0}
  .beach-table td[data-label]::before{content:attr(data-label) ": ";color:var(--muted);font-size:12px}
}
/* Calls by day (HTML grid) */
.cbd{display:grid;gap:4px;font-size:13px}
.cbd-row{display:grid;grid-template-columns:minmax(90px,190px) repeat(var(--n),minmax(40px,64px));gap:4px;align-items:center}
.cbd-name{font-size:14px;overflow-wrap:anywhere;line-height:1.25}
.cbd-day{text-align:center;color:var(--muted);font-size:12px;line-height:1.3}
.cbd .cell{display:block;height:24px;border-radius:4px;background:var(--nocall)}
.cbd .cell.t-green{background:var(--good)}.cbd .cell.t-yellow{background:var(--warn)}.cbd .cell.t-red{background:var(--bad)}
.cbd .cell:hover,.cbd .cell:focus{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
/* Latest results (HTML rows, percent-positioned SVG tracks) */
.smp-row{margin:0 0 6px}
.smp-head{margin:0;font-size:14px;display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline}
.smp-name{font-weight:600}
.smp-val{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.smp-val.over{color:var(--bad);font-weight:600}
.smp-track,.smp-axis{display:block;overflow:visible}
.smp-axis text{font:12px var(--body);fill:var(--muted)}
.replay svg.chart text{font-size:13px}
.kpi .k-v.k-na{font-size:22px;overflow-wrap:anywhere}