/* The live statistics page. Layout and the chart's arrival only: every colour and face comes from the
   directory tokens in home.css, which the shell loads first. Two animations, both plain CSS over markup
   that is already finished and correct: the chart's line draws on and its area fades in, and the group
   bars grow from their left edge. Under prefers-reduced-motion every one of them is switched off and the
   finished state shown at once. */

.stats { max-width: 1120px; }

.stats-head { padding-bottom: 26px; }
.stats-head h1 {
    margin-top: 10px;
    color: var(--dir-text);
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: .95;
}
.stats-checked {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px !important;
    color: var(--dir-muted);
    font-size: 14px;
}

/* The figures: large, unboxed, a hairline between them rather than four equal panels. */
.stats-figures { padding-top: 22px; border-top: 1px solid var(--dir-line); }
.stats-figures dl { display: flex; flex-wrap: wrap; gap: 26px 0; margin: 0; }
.stats-figure { padding-right: 38px; }
.stats-figure + .stats-figure { padding-left: 38px; border-left: 1px solid var(--dir-line-soft); }
.stats-figure dt {
    margin: 0;
    color: var(--dir-faint);
    font-family: var(--dir-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.stats-figure dd {
    margin: 8px 0 0;
    color: var(--dir-text);
    font-family: var(--dir-serif);
    font-size: clamp(38px, 4.6vw, 58px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
}
.stats-figure-live dd { color: var(--dir-text); }
.stats-liveness {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 24px !important;
    color: var(--dir-faint);
    font-family: var(--dir-mono);
    font-size: 11px;
}

/* Every section under the figures shares this head: a serif heading and one quiet line beside it. */
.stats-history,
.stats-groups,
.stats-sources { margin-top: 56px; }
.stats-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dir-line-soft);
}
.stats-section-head h2 { color: var(--dir-text); font-size: 24px; font-weight: 500; letter-spacing: -0.025em; }
.stats-section-note { color: var(--dir-faint); font-family: var(--dir-mono); font-size: 11px; }
.stats-legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; color: var(--dir-muted); font-size: 12.5px; }
.stats-legend span { display: inline-flex; align-items: baseline; gap: 9px; }
.stats-legend b { color: var(--dir-text); font-family: var(--dir-mono); font-size: 14px; font-weight: 400; }
.stats-key { display: inline-block; width: 22px; height: 3px; border-radius: 2px; }
.stats-key-players { background: var(--dir-players); }
.stats-key-peak { background: var(--dir-peak); }
.stats-key-worlds { background: var(--dir-worlds); }
.stats-key-listed { background: var(--dir-faint); }
.stats-scrub { color: var(--dir-text); font-family: var(--dir-mono); font-size: 12px; }
.stats-note { margin-top: 20px !important; max-width: 62ch; color: var(--dir-muted); font-size: 14px; }

/* The chart is the page: full width, tall, on the surface colour rather than in a card. */
.stats-chart-figure { margin: 22px 0 0; }
.live-chart {
    display: block;
    width: 100%;
    height: auto;
    cursor: crosshair;
    background:
        radial-gradient(120% 90% at 18% 0%, rgba(47, 127, 224, .08), transparent 60%),
        var(--dir-surface);
    border: 1px solid var(--dir-line);
    border-radius: 14px;
}
.stats-chart-figure figcaption {
    max-width: 78ch;
    padding-top: 12px;
    color: var(--dir-faint);
    font-size: 12.5px;
    line-height: 1.6;
}
.live-chart-axis { stroke: var(--dir-line); stroke-width: 1.5; }
.live-chart-grid { stroke: var(--dir-line-soft); stroke-width: 1; stroke-dasharray: 2 6; }
.live-chart-tick { stroke: var(--dir-line); stroke-width: 1; }
.live-chart-scale,
.live-chart-day { fill: var(--dir-faint); font-family: var(--dir-mono); font-size: 12px; }
.live-chart-fade-top { stop-color: var(--dir-players); stop-opacity: .3; }
.live-chart-fade-bottom { stop-color: var(--dir-players); stop-opacity: 0; }
.live-chart-line {
    fill: none;
    stroke: var(--dir-players);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.live-chart-second {
    fill: none;
    stroke: var(--dir-worlds);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .85;
}
.live-chart-peak {
    fill: none;
    stroke: var(--dir-peak);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .8;
}
.live-chart-guide { stroke: rgba(26, 40, 56, .35); stroke-width: 1; pointer-events: none; }
.live-chart-hit { fill: transparent; }
.live-chart:focus-visible { outline: 1px solid var(--dir-players); outline-offset: 3px; }
.live-chart-now { fill: var(--dir-players); }
.live-chart-pulse { fill: var(--dir-players); opacity: .22; }
.live-chart-second-now { fill: var(--dir-worlds); }

/* The arrival. Each line carries its own drawn length as --live-chart-length, so the dash that hides it
   is exactly as long as the line and the keyframe only has to pull the offset back to zero. */
.live-chart-line,
.live-chart-second,
.live-chart-peak {
    stroke-dasharray: var(--live-chart-length);
    stroke-dashoffset: var(--live-chart-length);
    animation: live-chart-draw 1.7s .1s cubic-bezier(.2, .7, .3, 1) forwards;
}
.live-chart-second { animation-delay: .45s; animation-duration: 1.5s; }
.live-chart-peak { animation-delay: .25s; animation-duration: 1.5s; }
.live-chart-area,
.live-chart-now,
.live-chart-pulse,
.live-chart-second-now { opacity: 0; animation: live-chart-appear 1s 1.1s ease forwards; }
.live-chart-area { animation-duration: 1.4s; animation-delay: .5s; }
.live-chart-pulse { animation: live-chart-halo 1s 1.1s ease forwards, live-chart-breathe 3.4s 2.1s ease-in-out infinite; }

@keyframes live-chart-draw { to { stroke-dashoffset: 0; } }
@keyframes live-chart-appear { to { opacity: 1; } }
@keyframes live-chart-halo { to { opacity: .22; } }
/* The halo behind the last point keeps breathing after everything else has settled. Opacity only, so the
   narrow-screen radius below is free to differ and nothing fights over the same property. */
@keyframes live-chart-breathe {
    0%, 100% { opacity: .22; }
    50% { opacity: .06; }
}

/* Codebase and genre: quieter than the chart, and the same rule about motion. */
.stats-bars { margin: 6px 0 0; padding: 0; list-style: none; }
.stats-bars li {
    display: grid;
    grid-template-columns: minmax(0, 148px) minmax(0, 1fr) minmax(0, 168px);
    gap: 18px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--dir-line-soft);
}
.stats-bar-name { min-width: 0; overflow: hidden; color: var(--dir-text); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.stats-bar-track { display: block; height: 8px; border-radius: 4px; background: var(--dir-surface); }
.stats-bar-fill {
    display: block;
    width: var(--stats-bar);
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(47, 127, 224, .35), var(--dir-players));
    transform: scaleX(0);
    transform-origin: left center;
    animation: stats-bar-grow .9s var(--stats-bar-delay, 0ms) cubic-bezier(.2, .7, .3, 1) forwards;
}
.stats-bar-genre { background: linear-gradient(90deg, rgba(126, 184, 196, .4), var(--dir-worlds)); }
.stats-bar-value { color: var(--dir-muted); font-family: var(--dir-mono); font-size: 11.5px; text-align: right; }
.stats-bar-value small { display: block; margin-top: 3px; color: var(--dir-faint); font-size: 10px; }

@keyframes stats-bar-grow { to { transform: scaleX(1); } }

.stats-source-list { margin: 6px 0 0; padding: 0; list-style: none; }
.stats-source-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 18px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--dir-line-soft);
}
.stats-source-list strong { color: var(--dir-text); font-family: var(--dir-serif); font-size: 17px; font-weight: 500; }
.stats-source-list span,
.stats-source-list em { color: var(--dir-faint); font-family: var(--dir-mono); font-size: 11.5px; font-style: normal; }
.stats-source-failed { color: #E07A5F !important; }
.stats-open { max-width: 66ch; margin-top: 22px !important; color: var(--dir-muted); font-size: 13.5px; }
.stats-open a { color: var(--dir-accent-bright); }

.stats .chart-data { margin-top: 18px; }

@media (max-width: 800px) {
    .stats-head h1 { font-size: 34px; }
    .stats-figures dl { gap: 20px 0; }
    .stats-figure { flex: 1 1 40%; padding-right: 18px; }
    .stats-figure + .stats-figure { padding-left: 0; border-left: 0; }
    .stats-figure dd { font-size: 34px; }
    .stats-history,
    .stats-groups,
    .stats-sources { margin-top: 42px; }
    /* Narrow: the whole drawing is scaled to the width of the screen, so the type and the strokes inside it
       have to grow in the chart's own units to come out the same size on the glass. */
    .live-chart { border-radius: 10px; }
    .live-chart-scale,
    .live-chart-day { font-size: 26px; }
    .live-chart-line { stroke-width: 5; }
    .live-chart-peak { stroke-width: 3; }
    .live-chart-second { stroke-width: 3.5; }
    .live-chart-guide { stroke-width: 2; }
    .live-chart-axis { stroke-width: 3; }
    .live-chart-grid { stroke-width: 2; stroke-dasharray: 5 12; }
    .live-chart-tick { stroke-width: 2; }
    .live-chart-now { r: 8; }
    .live-chart-second-now { r: 6; }
    .live-chart-pulse { r: 12; }
    .stats-bars li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: baseline; }
    .stats-bar-track { grid-column: 1 / -1; order: 3; }
    .stats-bar-value { text-align: right; }
    .stats-source-list li { grid-template-columns: minmax(0, 1fr) auto; }
    .stats-source-list em { grid-column: 1 / -1; }
}

/* Asked for less motion: the same chart and the same bars, finished, with nothing moving. */
@media (prefers-reduced-motion: reduce) {
    .live-chart-line,
    .live-chart-second,
    .live-chart-peak {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        animation: none;
    }
    .live-chart-area,
    .live-chart-now,
    .live-chart-second-now { opacity: 1; animation: none; }
    .live-chart-pulse { opacity: .22; animation: none; }
    .stats-bar-fill { transform: scaleX(1); animation: none; }
}