/* Statistics charts: rating line, win/draw/loss by side, pit heatmap, activity
   calendar. Colours come from the theme tokens only; the six intensity steps
   are the accent mixed into the surface, so every theme gets its own ramp. */

#screen-stats .sv-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

#screen-stats .sv-block { min-width: 0; }

#screen-stats .sv-note {
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

#screen-stats .sv-empty {
    margin: 0;
    padding: 18px 0 6px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.45;
}

/* Rating */
#screen-stats .sv-rating-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 8px;
}

#screen-stats .sv-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0;
}

#screen-stats .sv-figures div { min-width: 0; }
#screen-stats .sv-figures dt { color: var(--text-secondary); font-size: 12px; }
#screen-stats .sv-figures dd {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
#screen-stats .sv-figures dd.is-up { color: var(--success); }
#screen-stats .sv-figures dd.is-down { color: var(--danger); }

#screen-stats .sv-figure {
    position: relative;
    min-width: 0;
    border-radius: 8px;
    outline: none;
    touch-action: pan-y;
}

#screen-stats .sv-figure:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

#screen-stats .sv-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-variant-numeric: tabular-nums;
}

#screen-stats .sv-svg text { font-size: 12px; fill: var(--text-secondary); }
#screen-stats .sv-grid { stroke: color-mix(in srgb, var(--border-subtle) 70%, transparent); stroke-width: 1; }
#screen-stats .sv-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#screen-stats .sv-dot { fill: var(--accent); stroke: var(--surface-1); stroke-width: 2; }
#screen-stats .sv-cursor { stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 3 3; }
#screen-stats .sv-mark { fill: var(--surface-1); stroke: var(--accent); stroke-width: 2; }

#screen-stats .sv-tip {
    position: absolute;
    z-index: 3;
    max-width: min(240px, 80%);
    padding: 7px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--surface-raised);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    box-shadow: 0 6px 18px color-mix(in srgb, #000 22%, transparent);
}
#screen-stats .sv-tip[hidden] { display: none; }
#screen-stats .sv-tip b { display: block; font-size: 14px; }
#screen-stats .sv-tip span { color: var(--text-secondary); }

/* Intensity ramp, shared by the heatmap and the calendar. */
#screen-stats .sv-l0 { fill: var(--surface-2); }
#screen-stats .sv-l1 { fill: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
#screen-stats .sv-l2 { fill: color-mix(in srgb, var(--accent) 34%, var(--surface-2)); }
#screen-stats .sv-l3 { fill: color-mix(in srgb, var(--accent) 54%, var(--surface-2)); }
#screen-stats .sv-l4 { fill: color-mix(in srgb, var(--accent) 76%, var(--surface-2)); }
#screen-stats .sv-l5 { fill: color-mix(in srgb, var(--accent) 96%, var(--surface-2)); }
#screen-stats .sv-svg text.sv-ink-dark { fill: var(--text-primary); }
#screen-stats .sv-svg text.sv-ink-light { fill: var(--surface-1); }
#screen-stats .sv-svg .sv-cellbox { stroke: color-mix(in srgb, var(--border-subtle) 60%, transparent); stroke-width: 1; }
#screen-stats .sv-svg .sv-cellbox.is-future { fill: transparent; stroke-dasharray: 2 3; }
#screen-stats .sv-svg .sv-cellbox.is-active { stroke: var(--text-primary); stroke-width: 2; }
#screen-stats .sv-svg .sv-rowlabel { fill: var(--text-primary); font-size: 12px; }
#screen-stats .sv-svg .sv-strong { font-weight: 650; }

/* Win / draw / loss */
#screen-stats .sv-colors { display: grid; gap: 14px; padding-top: 12px; }
#screen-stats .sv-wdl { display: grid; gap: 6px; min-width: 0; }
#screen-stats .sv-wdl-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-primary);
    font-size: 14px;
}
#screen-stats .sv-wdl-head span { color: var(--text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
#screen-stats .sv-wdl-bar {
    display: flex;
    height: 14px;
    overflow: hidden;
    border-radius: 7px;
    background: var(--surface-2);
}
#screen-stats .sv-wdl-bar i { display: block; height: 100%; min-width: 0; }
#screen-stats .sv-wdl-bar .is-win { background: var(--success); }
#screen-stats .sv-wdl-bar .is-draw { background: color-mix(in srgb, var(--text-secondary) 55%, var(--surface-2)); }
#screen-stats .sv-wdl-bar .is-loss { background: var(--danger); }
#screen-stats .sv-wdl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
#screen-stats .sv-wdl-legend li::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
}
#screen-stats .sv-wdl-legend .is-win::before { background: var(--success); }
#screen-stats .sv-wdl-legend .is-draw::before { background: color-mix(in srgb, var(--text-secondary) 55%, var(--surface-2)); }
#screen-stats .sv-wdl-legend .is-loss::before { background: var(--danger); }

/* Pit heatmap and calendar */
#screen-stats .sv-pits, #screen-stats .sv-calendar { padding-top: 12px; min-width: 0; }
#screen-stats .sv-cal-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding-bottom: 4px; }
#screen-stats .sv-cal-scroll .sv-svg { width: auto; max-width: none; }
#screen-stats .sv-cal-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
    margin: 10px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
#screen-stats .sv-cal-summary strong { color: var(--text-primary); font-weight: 650; }

#screen-stats .sv-legend { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--text-secondary); font-size: 12px; }
#screen-stats .sv-legend svg { display: block; }

@media (max-width: 480px) {
    #screen-stats .sv-figures dd { font-size: 18px; }
}