/* ==========================================================================
   Charts
   ========================================================================== */

.chart-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.stat {
    display: grid;
    gap: 2px;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.stat:first-child {
    background: var(--brand-gradient);
    border-color: transparent;
    box-shadow: 0 12px 28px var(--brand-glow);
}

.stat:first-child .stat-label,
.stat:first-child .stat-sub {
    color: color-mix(in srgb, var(--on-gradient) 72%, transparent);
}

.stat:first-child .stat-value {
    color: var(--on-gradient);
}

.stat-label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.stat-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.stat-value-time {
    font-size: 1.35rem;
    line-height: 1.6;
}

.stat-sub {
    min-height: 1.4em;
    font-size: var(--text-sm);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-text);
    font-weight: 650;
}

.text-button:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.text-button.is-busy .icon {
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.notice {
    margin-bottom: var(--space-5);
}

/* --- Toolbar ----------------------------------------------------------------- */

.chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.chart-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-faint);
}

.chart-legend b {
    margin-right: 2px;
}

/* --- Chart cards -------------------------------------------------------------- */

/* One group per platform; each starts a new row, two charts across on wide screens. */
.chart-grid {
    display: grid;
    gap: var(--space-4);
}

.chart-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: var(--space-4);
    align-items: start;
}

.chart-card {
    --platform: var(--brand);
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--normal) var(--ease), border-color var(--normal) var(--ease);
}

.chart-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.chart-card[data-platform="melon"] {
    --platform: var(--melon);
}
.chart-card[data-platform="genie"] {
    --platform: var(--genie);
}
.chart-card[data-platform="bugs"] {
    --platform: var(--bugs);
}
.chart-card[data-platform="flo"] {
    --platform: var(--flo);
}

.chart-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, color-mix(in srgb, var(--platform) 9%, transparent), transparent 70%);
}

.platform-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: var(--platform);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.chart-card-title {
    font-size: var(--text-base);
    font-weight: 700;
}

.chart-card-title span {
    color: var(--text-faint);
    font-weight: 600;
}

.chart-card-time {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.chart-card-status {
    flex-basis: 100%;
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--down);
}

.chart-entries {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chart-entry {
    display: grid;
    grid-template-columns: 56px 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border);
}

.chart-entry:last-child {
    border-bottom: 0;
}

.entry-rank {
    display: grid;
    justify-items: center;
    gap: 2px;
}

.entry-rank-number {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.move {
    font-size: var(--text-xs);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
}

.move.up {
    color: var(--up);
}
.move.down {
    color: var(--down);
}
.move.new,
.move.reentry {
    color: var(--new);
}

.entry-cover {
    position: relative;
    display: block;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    box-shadow: var(--shadow-sm);
}

.entry-cover img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

/* Covers link to the song on Apple Music. Hover and keyboard focus show a play overlay, and the
   "Listen on Apple Music" tip from .has-tip (base.css). */
.entry-cover-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: rgba(24, 12, 24, 0.5);
    color: #fff;
    opacity: 0;
    transition: opacity var(--fast) var(--ease);
}

.entry-cover-play .icon {
    width: 22px;
    height: 22px;
}

a.entry-cover:hover .entry-cover-play,
a.entry-cover:focus-visible .entry-cover-play {
    opacity: 1;
}

.entry-cover.is-empty {
    display: grid;
    place-items: center;
    color: var(--text-faint);
    box-shadow: none;
    border: 1px dashed var(--border-strong);
}

.entry-info {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.entry-title {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-artist {
    font-size: var(--text-sm);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-peak {
    display: grid;
    justify-items: end;
    font-size: var(--text-xs);
    color: var(--text-faint);
    white-space: nowrap;
}

.entry-peak strong {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.chart-empty {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-5);
    color: var(--text-faint);
    font-size: var(--text-sm);
}

.chart-footnote {
    margin-top: var(--space-6);
    max-width: 80ch;
    font-size: var(--text-sm);
    color: var(--text-faint);
}

/* --- Loading placeholders --------------------------------------------------------- */

.chart-card.is-skeleton {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.skeleton-line,
.skeleton-row {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--surface-muted) 0%, var(--brand-tint) 50%, var(--surface-muted) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
}

.skeleton-line {
    width: 55%;
    height: 22px;
}

.skeleton-row {
    height: 64px;
}

@keyframes shimmer {
    to {
        background-position: -200% 0;
    }
}

/* --- Responsive ----------------------------------------------------------------- */

@media (max-width: 1100px) {
    .chart-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .stat {
        padding: var(--space-3) var(--space-4);
    }

    .stat-value {
        font-size: 1.6rem;
    }

    .chart-card-head,
    .chart-entry {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .chart-entry {
        grid-template-columns: 40px 52px minmax(0, 1fr);
        gap: var(--space-3);
    }

    .entry-rank-number {
        font-size: 1.4rem;
    }

    .entry-cover {
        width: 52px;
        height: 52px;
    }

    .entry-peak {
        grid-column: 3;
        display: flex;
        align-items: baseline;
        gap: 4px;
        margin-top: -6px;
    }
}

/* --- Wide screens ------------------------------------------------------------------------ */

/* Each platform keeps its row of two cards until there's room for a board: one column per
   platform, with slightly more compact rows. A single platform (after filtering) keeps the card
   grid. */
@media (min-width: 1680px) {
    .chart-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 2100px) {
    .chart-grid.is-board {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        align-items: start;
    }

    .chart-grid.is-board .chart-group {
        grid-template-columns: minmax(0, 1fr);
    }

    .chart-grid:not(.is-board) .chart-group {
        grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    }

    .chart-grid.is-board .chart-card-head {
        padding: var(--space-3) var(--space-4);
    }

    .chart-grid.is-board .chart-entry {
        grid-template-columns: 44px 52px minmax(0, 1fr) auto;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }

    .chart-grid.is-board .entry-cover {
        width: 52px;
        height: 52px;
    }

    .chart-grid.is-board .entry-rank-number {
        font-size: 1.5rem;
    }
}