/*
  Statistics page (/stats). Owner: C. Only what app.css and map.css do not cover:
  the filter strip, page-level layout, skeleton geometry. Colours and borders only through tokens. No inline styles (CSP).
*/

/* ---- totals: the report count in red (huge type, so red is allowed) */

.stats-metric--accent .metric__value { color: var(--c-accent); }
.metric__value .skeleton--metric { height: 0.9em; width: 2.5em; }

/* ---- filters: one framed strip; one row on desktop, two columns on phones */

.stats-filters {
  padding: var(--s-4);
  border: var(--bw) solid var(--c-ink);
  background: var(--c-surface);
}
.stats-filters__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  align-items: end;
}
/* an odd last filter spans the row instead of hanging alone */
.stats-filters__row > .field:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .stats-filters__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-filters__row > .field:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 70rem) {
  .stats-filters__row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.stats-filters__row .field { gap: var(--s-1); }
.stats-filters__row .field__label { font-size: 1.125rem; }

.stats-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
}
.stats-bar__status {
  min-height: 1em;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.stats-bar__copy { display: flex; align-items: center; gap: var(--s-3); margin-inline-start: auto; }
.stats-error { color: var(--c-danger); font-size: var(--fs-sm); font-weight: 700; }

/* Off-screen buffer for the copy fallback (document.execCommand). */
.stats-copy-buffer {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---- empty database: one line and the report button */

.stats-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }

/* ---- data area */

.stats-data,
.stats-blocks { display: grid; gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); min-width: 0; }

/* While a new selection loads, the previous figures stay in place, dimmed (no layout shift). */
.stats-data.is-stale { opacity: 0.4; transition: opacity var(--t-fast) ease 150ms; }

.stats-more { margin-top: var(--s-3); }

.stats-foot { margin-top: var(--s-7); }
.stats-foot > span:empty { display: none; }

/* ---- skeletons (geometry follows .barlist__row and .timeline in app.css) */

.stats-skel { container-type: inline-size; display: grid; gap: 0.125rem; }
.stats-skel__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.3rem;
  align-items: center;
  padding: 0.4rem 0;
}
.stats-skel__label { height: 0.85rem; margin-block: 0.2625rem; width: 45%; }   /* 1.375rem line, as the value */
.stats-skel__row:nth-child(3n + 2) .stats-skel__label { width: 60%; }
.stats-skel__row:nth-child(3n) .stats-skel__label { width: 35%; }
.stats-skel__track { height: 0.75rem; }
@container (min-width: 32rem) {
  .stats-skel__row {
    grid-template-columns: minmax(8rem, 34%) minmax(0, 1fr) 3.5rem;
    column-gap: var(--s-3);
    padding-block: 0.3rem;
  }
  .stats-skel__row:nth-child(n) .stats-skel__label { width: 80%; }
  .stats-skel__track { height: 1rem; }
}

.stats-skel-timeline { --plot-h: clamp(9rem, 6rem + 14vw, 14rem); }
.stats-skel-timeline .skeleton--text { margin: 0 0 var(--s-2); height: 1.65rem; }
.stats-skel-timeline__plot { height: calc(var(--plot-h) + var(--s-3) + var(--s-2) + 1.2 * var(--fs-xs)); }

.stats-skel-more { width: 6rem; height: 1.3rem; margin-top: var(--s-3); }

.stats-skel-map { aspect-ratio: 1000 / 436; width: 100%; height: auto; }
.stats-skel-legend { width: 60%; height: 1.3rem; margin-top: 0.5rem; }

/* Loading failed before anything arrived: stop the pulse so it does not look like progress. */
.stats-failed .skeleton { animation: none; }