/* =====================================================================
   /en/stats — public visitor stats (stats/index.php). Plain HTML, no JS:
   the daily chart is CSS bars with native title tooltips + a table view.
   Bar colour validated for both schemes (dataviz validator, 2026-09-25):
   #a32b1f on cream (light), #e0624f on the dark surface.
   ===================================================================== */
.stats-page { --stats-bar: #a32b1f; max-width: 960px; margin: 0 auto; padding: 1.5rem 16px 3rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stats-page { --stats-bar: #e0624f; } }
:root[data-theme="dark"] .stats-page { --stats-bar: #e0624f; }

.stats-page__title { margin: 0 0 0.4rem; font-family: var(--font-serif); font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--ink); }
.stats-page__lead { margin: 0 0 1.2rem; max-width: 68ch; color: var(--ink-2); line-height: 1.6; }
.stats-page a { color: var(--ink); text-underline-offset: 2px; }
.stats-page a:hover { color: var(--accent); }
.stats-updated, .stats-empty, .stats-alltime, .stats-note { color: var(--ink-3); font-size: 0.8rem; }
.stats-h2 { margin: 0 0 0.8rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

/* Stat tiles */
.stats-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 2rem; }
.stats-tile { padding: 1rem 1.1rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.stats-tile dt { font-size: 0.75rem; color: var(--ink-3); }
.stats-tile dd { margin: 0; }
.stats-tile__num { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats-tile__note { font-size: 0.72rem; color: var(--ink-3); }

/* Daily chart: one series, so no legend — the caption names it. */
.stats-chart { margin: 0 0 2rem; }
.stats-chart__plot { position: relative; height: 200px; margin-left: 2.6rem; }
.stats-chart__grid span {
    position: absolute; left: -2.6rem; right: 0; transform: translateY(50%);
    font-size: 0.68rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.stats-chart__grid span::after { content: ""; position: absolute; left: 2.6rem; right: 0; top: 50%; border-top: 1px solid var(--line); }
.stats-chart__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
/* The whole column is the hover target; the bar is the span inside it. */
.stats-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.stats-col span { display: block; width: 100%; min-height: 1px; background: var(--stats-bar); border-radius: 4px 4px 0 0; }
.stats-col:hover span { filter: brightness(1.2); }
.stats-col:hover { background: var(--wash, rgba(26, 18, 16, 0.05)); }
.stats-col--empty { border-bottom: 2px dotted var(--line-strong); height: 0; align-self: flex-end; }
.stats-chart__x { display: flex; justify-content: space-between; margin: 0.35rem 0 0 2.6rem; font-size: 0.68rem; color: var(--ink-3); }

.stats-table { margin-top: 0.8rem; font-size: 0.8rem; }
.stats-table summary { cursor: pointer; color: var(--ink-2); min-height: 44px; display: flex; align-items: center; }
.stats-table table { border-collapse: collapse; margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { padding: 0.25rem 1rem 0.25rem 0; text-align: right; border-bottom: 1px solid var(--line); }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; }

/* Top pages / sources */
.stats-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 1.5rem; }
.stats-list { list-style: none; margin: 0; padding: 0; }
.stats-list li { padding: 0.35rem 0; }
.stats-list__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; }
.stats-list__row > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-list__n { color: var(--ink-2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.stats-meter { display: block; height: 4px; margin-top: 0.25rem; background: var(--line); border-radius: 2px; overflow: hidden; }
.stats-meter span { display: block; height: 100%; background: var(--stats-bar); border-radius: 2px; }

.stats-how { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.stats-how ul { padding-left: 1.2rem; color: var(--ink-2); line-height: 1.7; font-size: 0.88rem; max-width: 75ch; }
.stats-how li { margin-bottom: 0.5rem; }