/* Registration statistics page. Builds on acuity.css and site.css; data in ink, red stays for threats. */

.stats__block { margin-top: var(--s-8); }
.stats__empty { max-width: 640px; }

/* Readings for the latest day */
.readings {
  margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--chart); border: 1px solid var(--ink-line); border-top: 2px solid var(--ink);
}
.readings__cell { padding: var(--s-4); border-bottom: 1px solid var(--ink-line); }
.readings__cell:nth-child(odd) { border-right: 1px solid var(--ink-line); }
.readings dt { font: 600 12px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.readings dd { margin: var(--s-2) 0 0; font: 600 clamp(26px, 3vw, 36px)/1.1 var(--f-mono); color: var(--ink); }
@media (min-width: 900px) {
  .readings { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .readings__cell { border-bottom: 0; border-right: 1px solid var(--ink-line); }
  .readings__cell:last-child { border-right: 0; }
}

/* Segmented range control */
.range { display: inline-flex; border: 2px solid var(--ink); }
.range__btn {
  min-height: 40px; padding: 0 14px; white-space: nowrap; border: 0; background: var(--chart); color: var(--ink);
  font: 600 13px/1 var(--f-mono); letter-spacing: 0.04em; cursor: pointer;
}
.range__btn + .range__btn { border-left: 1px solid var(--ink-line); }
.range__btn:hover { background: var(--paper); }
.range__btn[aria-pressed="true"] { background: var(--ink); color: var(--chart); }
.range__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; position: relative; z-index: 1; }

/* Chart */
.chart-panel { margin: 0; background: var(--chart); border: 1px solid var(--ink-line); padding: var(--s-5) var(--s-4) var(--s-4); position: relative; }
@media (min-width: 768px) { .chart-panel { padding: var(--s-6) var(--s-6) var(--s-4); } }
.chart-panel__plot { position: relative; width: 100%; height: 300px; }
.chart-panel__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-panel__note { margin-top: var(--s-3); font: 400 13px/1.4 var(--f-mono); color: var(--ink-2); }
.chart-axis text { font: 400 12px var(--f-mono); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.chart-grid line { stroke: rgba(12, 16, 18, 0.1); stroke-width: 1; shape-rendering: crispEdges; }
.chart-base { stroke: var(--ink); stroke-width: 1; shape-rendering: crispEdges; }
.chart-col { fill: var(--ink); }
.chart-hit { fill: transparent; cursor: default; }
.chart-hit:hover + .chart-col, .chart-col.is-active { fill: var(--slate-3); }
.chart-tip {
  position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 10px));
  background: var(--ink); color: var(--chart); padding: 6px 10px; white-space: nowrap;
  font: 600 13px/1.35 var(--f-mono); font-variant-numeric: tabular-nums;
}
.chart-tip span { display: block; font-weight: 400; color: var(--on-dark-2); font-size: 12px; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; font: 400 14px var(--f-mono); color: var(--ink-2); }

.stats__table-toggle { margin-top: var(--s-3); }
.stats__table-toggle summary { cursor: pointer; font: 600 14px/1.4 var(--f-text); width: max-content; }
.stats__table-toggle summary:hover { text-decoration: underline; }
.stats__table-toggle .table-scroll { margin-top: var(--s-3); max-height: 320px; overflow: auto; max-width: 420px; }

/* Tables */
.table-scroll { overflow-x: auto; border: 1px solid var(--ink-line); background: var(--chart); }
.datatable { width: 100%; border-collapse: collapse; font-size: 16px; }
.datatable th, .datatable td { padding: 10px 14px; border-bottom: 1px solid var(--ink-line); text-align: left; vertical-align: middle; }
.datatable thead th {
  position: sticky; top: 0; z-index: 1; background: var(--paper); border-bottom: 2px solid var(--ink);
  font: 600 12px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.datatable tbody tr:last-child > * { border-bottom: 0; }
.datatable tbody tr:hover { background: rgba(12, 16, 18, 0.03); }
.datatable .num { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.datatable--compact th, .datatable--compact td { padding: 6px 12px; font-size: 15px; }
.tld { font: 600 16px/1.3 var(--f-mono); white-space: nowrap; }
.datatable tbody th.tld { font-weight: 600; }

/* Biggest increases */
.rise__rank { width: 1%; font: 400 12px/1 var(--f-mono); color: var(--ink-2); }
.rise__barcol { width: 42%; min-width: 180px; }
.rise__cell { display: flex; align-items: center; gap: var(--s-3); }
.rise__track { flex: 1; min-width: 80px; }
.rise__bar { display: block; height: 14px; width: var(--w); min-width: 3px; background: var(--ink); }
.rise__pct { min-width: 5ch; text-align: right; }
.rise__pct { font: 600 15px/1 var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats__new { margin-top: var(--s-4); font-size: 15px; color: var(--ink-2); max-width: none; }
.stats__new-label { font: 600 12px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; margin-right: var(--s-2); color: var(--ink); }
.stats__new .tld { font-size: 15px; color: var(--ink); }
.stats__quiet { color: var(--ink-2); }

/* Raw counts */
.tldfilter { min-width: 240px; }
.tldfilter .form-control { min-height: 44px; }
.tldtable { min-width: 640px; }
.tldtable tbody { counter-reset: none; }
.sortbtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sortbtn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sortbtn::after { content: ""; width: 0; height: 0; border: 5px solid transparent; opacity: 0.25; border-top-color: currentColor; margin-top: 5px; }
th[aria-sort="descending"] .sortbtn { color: var(--ink); }
th[aria-sort="descending"] .sortbtn::after { opacity: 1; }
th[aria-sort="ascending"] .sortbtn { color: var(--ink); }
th[aria-sort="ascending"] .sortbtn::after { opacity: 1; border-top-color: transparent; border-bottom-color: currentColor; margin-top: -5px; }
.tldtable tr[hidden] { display: none; }
.stats__foot { margin-top: var(--s-3); font-size: 14px; color: var(--ink-2); max-width: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }

/* Top hikes: unit tabs */
.unit-tabs { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--ink); margin-bottom: var(--s-4); }
.unit-tabs__tab {
  min-height: 44px; padding: 0 18px; margin-bottom: -2px; background: none; color: var(--ink-2);
  border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font: 600 15px/1 var(--f-text); white-space: nowrap;
}
.unit-tabs__tab:hover { color: var(--ink); }
.unit-tabs__tab[aria-selected="true"] { color: var(--ink); border-bottom: 4px solid var(--ink); }
.unit-tabs__tab:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.unit-tabs__state { font: 400 12px/1 var(--f-mono); color: var(--ink-2); }
.unit-panel__window { font: 400 14px/1.5 var(--f-mono); color: var(--ink-2); margin: 0 0 var(--s-3); max-width: none; }
.unit-panel__pending { background: var(--chart); border: 1px solid var(--ink-line); padding: var(--s-5); max-width: 640px; }
.unit-panel__pending-title { font-weight: 800; margin-bottom: var(--s-2); }

/* Sparklines in the hikes table */
.rise__spark { width: 150px; }
.spark { display: block; line-height: 0; }
.spark__prev { fill: none; stroke: rgba(12, 16, 18, 0.35); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark__now { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark__dot { fill: var(--ink); stroke: var(--chart); stroke-width: 2; }

/* Trend panels: small multiples, one per TLD, each on its own scale */
.trends { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }
.trend { background: var(--chart); border: 1px solid var(--ink-line); border-top: 2px solid var(--ink); padding: var(--s-3) var(--s-4) var(--s-3); }
.trend__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.trend__head .tld { font-size: 18px; }
.trend__pct { font: 600 15px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.trend__plot { position: relative; height: 132px; margin-top: var(--s-1); }
.trend__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.trend__now { fill: rgba(12, 16, 18, 0.05); }
.trend__area { fill: rgba(12, 16, 18, 0.06); }
.trend__line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend__dot { fill: var(--ink); stroke: var(--chart); stroke-width: 2; }
.trend__cross { stroke: rgba(12, 16, 18, 0.4); stroke-width: 1; shape-rendering: crispEdges; }
.trend__max, .trend__axis { font: 400 11px var(--f-mono); fill: var(--ink-2); }
.trend__foot { margin: var(--s-1) 0 0; font: 400 13px/1.3 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.trend__tip { z-index: 2; }

@media (max-width: 599px) {
  .range { display: flex; width: 100%; }
  .range__btn { flex: 1; padding: 0 6px; font-size: 12px; }
  .rise__barcol { width: auto; min-width: 0; }
  .rise__track { display: none; }
  .rise__spark { display: none; }
  .unit-tabs__tab { padding: 0 12px; flex: 1; }
  .unit-tabs__state { display: block; margin-top: 4px; }
  .datatable th, .datatable td { padding: 9px 10px; font-size: 15px; }
}