/**
 * Progress tracking page (site/progress/index): scoreboard, collection donut, backlog, module highlights,
 * taste, genres and eras, where to watch and milestones. The charts are plain CSS fed by custom properties
 * set in the markup (--fill, --donut, --slice). Semantic tokens of layout-site/master.css; the module color
 * comes from .is-{module} (--module, components/media-kit.css); the public switch is the kit's .public-profile.
 * Markup: resources/views/site/progress/**, resources/views/components/progress/*.
 */

/* ================== BAND ================== */
.progress-band-intro {
    max-width: 640px;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--text-2);
}

/* Someone else's page: their avatar beside the title */
.progress-owner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.progress-owner-avatar {
    --avatar-size: 56px;
    flex: none;
}

/* The page band title never shrinks (flex: none): beside the avatar it takes what is left and wraps, so a long
   name does not push the page sideways (like .profile-identity in account.css) */
.progress-owner .page-band-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The owner's name in the title leads to their profile (P-338): a muted underline tells it is a link, like
   a.game-details-game in item-page.css */
.progress-owner-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--text-2) 55%, transparent);
    text-underline-offset: 6px;
}

.progress-owner-link:hover,
.progress-owner-link:focus-visible {
    color: var(--accent);
    text-decoration-color: currentColor;
}

/* The "Perfil público" switch and the share button (.public-profile in media-kit.css) */
.progress-sharing {
    margin-top: 18px;
}

/* ================== LAYOUT ================== */
.progress-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    align-items: start;
    gap: 20px;
}

.progress-panel {
    min-width: 0;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
}

.progress-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    color: var(--text-1);
}

.progress-panel-title i {
    font-size: 14px;
    color: var(--module, var(--accent));
}

.progress-panel-subtitle {
    margin: 20px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
}

.progress-panel-text {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 20px;
    color: var(--text-2);
}

/* A big display number with its unit on the side */
.progress-big {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 10px 0 8px;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 48px;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
}

.progress-big span {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-2);
}

.progress-big.is-muted {
    color: var(--text-2);
}

.progress-versus {
    display: flex;
    flex-wrap: wrap;
    gap: 0 36px;
}

.progress-highlight-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--text-1);
}

.progress-highlight-line i {
    flex: none;
    color: var(--module, var(--accent));
}

.progress-meter {
    height: 8px;
    margin: 10px 0 4px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--surface-3);
}

.progress-meter span {
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: 4px;
    background: var(--module, var(--accent));
}

/* ================== SCOREBOARD ================== */
.progress-scoreboard {
    padding-top: 32px;
}

.progress-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 16px;
    margin: 0;
}

/* dt first for the markup, the number first on screen */
.progress-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 18px 22px 20px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface-1);
    box-shadow: inset 0 0 0 1px var(--line);
}

.progress-stat::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--module, var(--accent));
}

.progress-stat-value {
    order: 1;
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: clamp(40px, 4vw, 58px);
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
}

.progress-stat-label {
    order: 2;
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
}

.progress-stat-sub {
    order: 3;
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--text-2);
}

.progress-fact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--text-2);
}

.progress-fact i {
    color: var(--module, var(--accent));
}

/* ================== COLLECTION ================== */
.progress-collection {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 24px 40px;
}

.progress-donut {
    position: relative;
    display: grid;
    place-content: center;
    width: 190px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--donut);
    text-align: center;
}

.progress-donut::before {
    content: '';
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: var(--surface-1);
}

.progress-donut-value,
.progress-donut-label {
    position: relative;
}

.progress-donut-value {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 46px;
    line-height: 1;
    color: var(--text-1);
}

.progress-donut-label {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
}

.progress-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 0 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.progress-legend-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto 42px;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.progress-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--slice);
}

.progress-legend-name {
    font-weight: 600;
    color: var(--text-1);
}

.progress-legend-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
}

.progress-legend-share {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}

.progress-callout {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: 10px;
    background: var(--accent-soft);
}

.progress-callout i {
    color: var(--accent);
}

.progress-callout p {
    flex: 1 1 260px;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-1);
}

/* ================== BARS ================== */
.progress-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.progress-bars-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 6px 12px;
}

.progress-bars-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
}

.progress-bars-label small {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
}

.progress-bars-value {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}

.progress-bars-track {
    grid-column: 1 / -1;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--surface-3);
}

.progress-bars-fill {
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: 3px;
    background: var(--module, var(--accent));
}

/* ================== COLUMNS ================== */
.progress-columns {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 190px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.progress-column {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    height: 100%;
}

.progress-column-value {
    min-height: 16px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}

.progress-column-bar {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 44px;
    height: 130px;
}

.progress-column-bar > span {
    display: block;
    width: 100%;
    height: var(--fill);
    min-height: 2px;
    border-radius: 6px 6px 2px 2px;
    background: color-mix(in srgb, var(--module, var(--accent)) 45%, var(--surface-3));
}

.progress-column.is-highlight .progress-column-bar > span {
    background: var(--module, var(--accent));
}

.progress-column.is-highlight .progress-column-value {
    color: var(--text-1);
}

.progress-column-label {
    max-width: 100%;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
    color: var(--text-2);
}

/* The masterpiece column (11): the gold of media-kit.css */
.progress-column.is-masterpiece .progress-column-bar > span {
    background: color-mix(in srgb, var(--masterpiece) 55%, var(--surface-3));
}

.progress-column.is-masterpiece.is-highlight .progress-column-bar > span {
    background: var(--masterpiece-gradient);
}

.progress-column.is-masterpiece .progress-column-label {
    color: var(--masterpiece);
}

/* ================== POSTERS ================== */
.progress-posters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 16px 14px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.progress-poster-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}

.progress-poster-cover {
    border-radius: 8px;
}

.progress-poster-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.progress-poster-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 17px;
    color: var(--text-1);
}

.progress-poster-link:hover .progress-poster-name,
.progress-poster-link:focus-visible .progress-poster-name {
    color: var(--accent);
}

.progress-poster-meta {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: var(--module, var(--accent));
}

/* ================== DUO (genre highlights, oldest and newest) ================== */
.progress-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.progress-duo-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
}

.progress-duo-label i {
    color: var(--module, var(--accent));
}

.progress-duo-value {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 28px;
    line-height: 1.1;
    color: var(--text-1);
}

.progress-duo-text {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-2);
}

.progress-duo .progress-posters {
    grid-template-columns: minmax(0, 104px);
    margin-top: 6px;
}

/* ================== MILESTONES ================== */
.progress-milestones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 20px;
}

.progress-milestone-label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
}

.progress-milestone-value {
    margin: 6px 0 14px;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 44px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
}

.progress-milestone-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.progress-milestone-tier {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

.progress-milestone-tier.is-reached {
    background: color-mix(in srgb, var(--module, var(--accent)) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--module, var(--accent)) 60%, transparent);
    color: var(--text-1);
}

.progress-milestone-next {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-2);
}

.progress-milestone-next.is-done {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--accent);
}

/* ================== JOIN (shared page, visitors without an account) ================== */
.progress-join {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background: linear-gradient(120deg, var(--accent-soft), var(--surface-1) 60%);
}

.progress-join-text {
    flex: 1 1 320px;
}

.progress-join-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-1);
}

.progress-join .progress-panel-text {
    margin: 0;
}

.progress-join-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ================== EMPTY ================== */
.progress-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 520px;
    margin: 48px auto 24px;
    padding: 32px 24px;
    text-align: center;
    color: var(--text-2);
}

.progress-empty-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-soft);
    font-size: 28px;
    color: var(--accent);
}

.progress-empty-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-1);
}

.progress-empty p {
    margin: 0 0 8px;
    font-size: 14.5px;
    line-height: 22px;
}

/* ================== WHERE TO WATCH (came from the profile page) ================== */
.platform-type-streaming    { --platform-color: #6fb4ff; }
.platform-type-store        { --platform-color: #5fd0c0; }
.platform-type-rental       { --platform-color: #ff9a62; }
.platform-type-cloud_gaming { --platform-color: #b99cff; }

.top-platforms-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 18px;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--text-2);
}

.top-platforms-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.top-platforms-swatch {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--platform-color, var(--text-2));
}

.top-platforms-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 14px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-platform-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 10px;
}

.top-platform-rank {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text-2);
}

.top-platform-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
}

.top-platform-name i {
    flex: none;
    width: 16px;
    font-size: 12px;
    text-align: center;
    color: var(--platform-color, var(--text-2));
}

.top-platform-name span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.top-platform-count {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
}

.top-platform-count small {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
}

.top-platform-bar {
    display: block;
    grid-column: 2 / -1;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--surface-3);
}

.top-platform-bar > span {
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: 3px;
    background: var(--platform-color, var(--text-2));
}

/* ================== RESPONSIVE ================== */
@media (max-width: 767.98px) {
    .progress-panel {
        padding: 18px;
    }

    .progress-collection {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .progress-legend {
        width: 100%;
    }

    .progress-duo {
        grid-template-columns: 1fr;
    }

    .progress-columns {
        gap: 4px;
        height: 170px;
    }

    .progress-column-label {
        font-size: 11px;
    }

    .progress-owner-avatar {
        --avatar-size: 44px;
    }

    .progress-big {
        font-size: 40px;
    }

    .progress-stat {
        padding: 14px 16px 16px;
    }

    /* Poster lists become a sideways strip instead of a tall grid */
    .progress-posters {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 104px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        padding-bottom: 6px;
    }

    .progress-poster {
        scroll-snap-align: start;
    }
}