/* /wordle-statistics: the living statistics reference. Uses the shared design
   tokens. Charts are server-rendered HTML/CSS bars in the emphasis form: the
   answer pool wears the accent, the guess-list context wears the de-emphasis
   gray, and every bar carries its value as adjacent text (no color-gated
   reading). The .stat-cell convention (stat-box + stat-meaning) is asserted by
   tests/test_wordle_statistics_page.py. */

.stats-ref {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
}

.stats-ref .page-header {
  margin-bottom: var(--space-6);
}

.stats-ref .content-section {
  margin-bottom: var(--space-8);
}

.stats-ref h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: 0 0 var(--space-3);
}

.stats-ref h3 {
  font-size: var(--text-base);
  margin: var(--space-5) 0 var(--space-2);
}

/* ---- Opening essay ---- */
.stats-essay p {
  font-size: var(--text-base);
  line-height: 1.65;
  margin: 0 0 var(--space-4);
}

.section-lead {
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}

.section-note {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.55;
  margin: var(--space-3) 0 0;
}

/* ---- Stat tiles: every .stat-box pairs with a .stat-meaning ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.stat-grid--pair {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.stat-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: var(--space-4);
}

.stat-cell .stat-box {
  margin-bottom: var(--space-2);
}

.stat-cell .stat-value {
  font-size: var(--text-2xl);
}

.stat-meaning {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.stat-meaning--wide {
  margin-top: var(--space-3);
}

/* ---- Server-rendered bar charts ---- */
.stat-chart {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
}

.chart-rows {
  display: grid;
  gap: var(--space-2);
}

.chart-row,
.chart-pair {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.chart-row {
  grid-template-columns: 7.5em minmax(0, 1fr) 8em;
}

.chart-row__label {
  color: var(--text-secondary);
}

.chart-pair .chart-row__label {
  font-family: var(--font-display);
  font-weight: 700;
}

.chart-pair__bars {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4em;
  gap: 2px var(--space-2);
  align-items: center;
}

.chart-row__track {
  display: block;
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  overflow: hidden;
}

.chart-row__fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  min-width: 2px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent);
}

.chart-row__fill--muted {
  background: var(--gray);
}

.chart-row__value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart-row__value em {
  font-style: normal;
  color: var(--muted);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.chart-key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.chart-swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
  background: var(--accent);
}

.chart-swatch--guesses {
  background: var(--gray);
}

.chart-meaning {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.55;
  margin-top: var(--space-4);
}

/* ---- Hardest / easiest teaser ---- */
.teaser-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.teaser-col h3 {
  margin-top: 0;
}

.teaser-list {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.teaser-date {
  color: var(--muted);
}

.teaser-score {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
}

/* ---- Tables: wide content scrolls in its own container ---- */
.table-scroll {
  overflow-x: auto;
  margin: var(--space-4) 0;
  /* Stop the tables' intrinsic min-content width propagating through the
     flex-item <main>: without containment the whole page inflates past the
     viewport and the body's overflow clip hides the loss (verified on
     mobile at ~458px). */
  contain: inline-size;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.stats-table caption {
  caption-side: bottom;
  text-align: left;
  padding-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
}

.stats-table th,
.stats-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.stats-table th {
  color: var(--text-secondary);
  font-weight: 600;
}

.stats-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stats-table .letter {
  font-family: var(--font-display);
  font-weight: 700;
}

.drift-bar-cell {
  min-width: 120px;
}

.chart-row__track--table {
  width: 100%;
}

/* ---- Near-miss families ---- */
.family-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.family-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.family-pattern {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.family-words {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.family-word {
  padding: 2px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  font-variant-numeric: tabular-nums;
}

.family-size {
  color: var(--muted);
  font-size: var(--text-xs);
}

/* ---- Citations & FAQ ---- */
.citation-list {
  margin: var(--space-4) 0 0;
  padding-left: 1.4em;
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.faq-list {
  margin: 0;
}

.faq-question {
  font-weight: 600;
  margin-top: var(--space-4);
}

.faq-answer {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 480px) {
  .chart-row {
    grid-template-columns: 6em minmax(0, 1fr);
  }

  .chart-row__value {
    grid-column: 2;
  }
}