/* The /stats/ page ("Nortabs i tall"). Loaded only there, see
   templates/next/stats/index.php. One colour (the site's blue) for all
   the charts: each shows one measure. */

.stats {
    --stats-accent: #2987B2;
    --stats-accent-strong: #1d6587;
    --stats-accent-soft: #e6f2f8;
    --stats-border: #d9dde3;
    --stats-grid: #eceef1;
    --stats-text: #222;
    --stats-muted: #6b7280;
    --stats-surface: #fff;

    max-width: 60em;
    color: var(--stats-text);
}

/* The site's container has no side padding; keep the page off the
   screen edges once the container fills the screen. */
@media (max-width: 1060px) {
    .stats {
        padding: 0 1em;
    }
}

.stats h4 {
    margin: 0 0 0.2em;
    font-size: 1.2em;
}

.stats h5 {
    margin: 0 0 0.4em;
    font-size: 1em;
}

.stats-note {
    margin: 0 0 0.75em;
    color: var(--stats-muted);
    font-size: 0.9em;
}

.stats-muted {
    color: var(--stats-muted);
}

.stats-section {
    margin: 0 0 2.25em;
}

.stats-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
    gap: 0.75em;
    margin: 0 0 2em;
}

.stats-tile {
    padding: 0.7em 0.9em;
    border: 1px solid var(--stats-border);
    border-radius: 6px;
    background: var(--stats-surface);
}

.stats-tile-value {
    display: block;
    font-size: 1.6em;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stats-tile-label {
    color: var(--stats-muted);
    font-size: 0.85em;
}

/* Views per month: the plot is a stretched SVG, the labels are HTML so
   they keep their size. */
.stats-chart {
    padding: 0 0 0 4.5em;
}

.stats-chart-plot {
    position: relative;
    height: 15em;
    border-bottom: 1px solid var(--stats-border);
    touch-action: pan-y;
}

.stats-chart-plot svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.stats-chart-grid {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--stats-grid);
}

.stats-chart-grid span {
    position: absolute;
    right: 100%;
    margin-right: 0.5em;
    transform: translateY(-50%);
    color: var(--stats-muted);
    font-size: 0.75em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.stats-chart-area {
    fill: var(--stats-accent-soft);
}

.stats-chart-line {
    fill: none;
    stroke: var(--stats-accent);
    stroke-width: 2;
    stroke-linejoin: round;
}

.stats-chart-band {
    fill: rgba(0, 0, 0, 0.05);
    stroke: none;
}

.stats-chart-years {
    position: relative;
    height: 1.5em;
}

.stats-chart-years span {
    position: absolute;
    top: 0.3em;
    transform: translateX(-50%);
    color: var(--stats-muted);
    font-size: 0.75em;
}

.stats-chart-cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--stats-muted);
    pointer-events: none;
}

.stats-chart-cursor::after {
    content: "";
    position: absolute;
    left: -5px;
    width: 9px;
    height: 9px;
    margin-top: -5px;
    top: var(--dot, 0);
    border: 2px solid var(--stats-surface);
    border-radius: 50%;
    background: var(--stats-accent);
    box-sizing: border-box;
}

.stats-chart-tooltip {
    position: absolute;
    top: 0.25em;
    padding: 0.35em 0.6em;
    border: 1px solid var(--stats-border);
    border-radius: 4px;
    background: var(--stats-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    font-size: 0.85em;
    white-space: nowrap;
    pointer-events: none;
}

.stats-chart-tooltip strong {
    display: block;
    font-variant-numeric: tabular-nums;
}

.stats-years {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    margin: 0.5em 0 1em;
}

.stats-years a,
.stats-years span {
    padding: 0.15em 0.55em;
    border: 1px solid var(--stats-border);
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}

.stats-years span.current {
    background: var(--stats-accent);
    border-color: var(--stats-accent);
    color: #fff;
}

.stats-year-summary {
    font-size: 1.1em;
    margin: 0 0 1.25em;
}

.stats-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    gap: 1.25em 2.5em;
    margin-bottom: 1.5em;
}

.stats-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: stats;
}

/* Each row has a bar behind it, as long as its views are next to the
   first row's. */
.stats-list li {
    position: relative;
    display: flex;
    gap: 0.75em;
    align-items: baseline;
    padding: 0.3em 0.5em 0.3em 2em;
    margin-bottom: 3px;
    counter-increment: stats;
}

.stats-list li::before {
    content: counter(stats);
    position: absolute;
    left: 0.4em;
    z-index: 1;
    color: var(--stats-muted);
    font-size: 0.8em;
}

.stats-list a {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.stats-value {
    position: relative;
    z-index: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 0.9em;
}

.stats-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 0 4px 4px 0;
    background: var(--stats-accent-soft);
}

.stats-chords {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stats-chords li {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-bottom: 4px;
}

.stats-chord-name {
    flex: 0 0 3.5em;
    font-family: monospace;
    font-size: 1.05em;
    font-weight: bold;
    color: var(--stats-accent-strong);
}

.stats-chord-track {
    flex: 1;
    height: 0.8em;
}

.stats-chord-track span {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: var(--stats-accent);
}

.stats-chord-share {
    flex: 0 0 3em;
    text-align: right;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}

.stats-profile {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    max-width: 36em;
}

.stats-profile-month {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats-profile-value {
    font-size: 0.75em;
    color: var(--stats-muted);
    font-variant-numeric: tabular-nums;
}

.stats-profile-bar {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 7em;
}

.stats-profile-bar span {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: var(--stats-accent);
}

.stats-profile-month:hover .stats-profile-bar span {
    background: var(--stats-accent-strong);
}

.stats-profile-label {
    margin-top: 0.2em;
    font-size: 0.8em;
    color: var(--stats-muted);
}

.stats-seasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    gap: 1.25em 2.5em;
}

.stats-season ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stats-season li {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.25em 0;
    border-bottom: 1px solid #eef0f3;
}

.stats-season li a {
    flex: 1;
    min-width: 0;
}

.stats-spark {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    flex: 0 0 auto;
    width: 4.2em;
    height: 1.4em;
}

.stats-spark span {
    flex: 1;
    border-radius: 1px 1px 0 0;
    background: #c6dfeb;
}

.stats-spark span.peak {
    background: var(--stats-accent);
}

.stats-footer {
    margin-top: 1em;
}

@media (max-width: 600px) {
    .stats-chart {
        padding-left: 3.4em;
    }

    .stats-chart-plot {
        height: 11em;
    }

    .stats-columns,
    .stats-seasons {
        grid-template-columns: 1fr;
    }

    .stats-profile-value {
        display: none;
    }
}