/* The public stats page: a station notice board of numbers. Same tokens as the game (base.css). */
.stats-page { background: var(--ground); color: var(--ink); font-family: var(--font-body); }

.st { max-width: 72rem; margin: 0 auto; padding: 18px var(--gutter, 16px) 48px; }
.st-langs { display: flex; gap: 10px; justify-content: flex-end; font-size: 0.85rem; }
.st-langs a { color: var(--ink-soft); }
.st-langs a[aria-current] { color: var(--ink); font-weight: 700; text-decoration: none; }

.st-head { padding: 18px 0 8px; border-bottom: 6px solid var(--ink); }
.st h1 { margin: 0; font: 400 clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem)/1.2 var(--font-display); }
/* Dela Gothic One lacks many Traditional Chinese characters; mixing faces mid-title looks broken. */
:lang(zh) .st h1, :lang(zh) .st h2 { font-family: var(--font-station); font-weight: 700; }
.st h2 { margin: 32px 0 6px; font: 400 clamp(1.2rem, 1rem + 1vw, 1.6rem)/1.3 var(--font-display); }
.st h3 { margin: 0 0 8px; font-size: 0.95rem; }
.st-updated { margin: 10px 0 0; font-weight: 700; }
.st-method, .st-note { max-width: 46em; margin: 6px 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.st-avg { margin: 0; font-weight: 600; }

.st-ranking { width: 100%; max-width: 36rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.st-ranking th, .st-ranking td { padding: 7px 10px; border-bottom: 1px solid var(--rule); text-align: left; }
.st-ranking thead th { font-size: 0.8rem; color: var(--ink-soft); }
.st-ranking tbody th a { color: var(--ink); font-weight: 700; }

.st-city { padding-top: 6px; border-top: 1px solid var(--rule); margin-top: 28px; }
.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 18px 28px;
  margin: 14px 0;
}

.st-list { margin: 0; padding: 0; list-style: none; counter-reset: st; }
.st-list li {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) 5.5rem 3em;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--rule);
  font-size: 0.92rem;
  counter-increment: st;
}
.st-list li::before { content: counter(st); color: var(--ink-soft); font: 600 0.8rem var(--font-num); }
.st-name { overflow-wrap: anywhere; font-family: var(--font-station); }
.st-code { font-family: var(--font-num); }
.st-rate { text-align: right; font: 600 0.9rem var(--font-num); font-variant-numeric: tabular-nums; }

.st-bar { width: 100%; height: 8px; }
.st-bar::-webkit-meter-bar { background: var(--rail-off); border: 0; border-radius: 4px; }
.st-bar::-webkit-meter-optimum-value { background: var(--ink); border-radius: 4px; }
.st-bar::-moz-meter-bar { background: var(--ink); }
.st-bottom .st-bar::-webkit-meter-optimum-value { background: var(--stamp); }
.st-bottom .st-bar::-moz-meter-bar { background: var(--stamp); }

.st-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 16px 28px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 6px solid var(--ink);
}
.st-faq .faq-item { padding-top: 8px; border-top: 1px solid var(--rule); }
.st-faq p { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }
.st-back { margin-top: 28px; }