/* Billboard's hero, charts and Beat recommendations share one content rail.
 * This small sheet follows ofm-finish and ofm-beat-showcase. No rules apply to
 * recommendations or public page shells on another route. */
main.ofm-public-page--billboard {
    --ofm-billboard-rail:1200px;
}

main.ofm-public-page--billboard .ofm-public-page__container,
main.ofm-public-page--billboard .ofm-billboard__hero .ofm-public-page__container {
    inline-size:min(var(--ofm-billboard-rail),calc(100% - var(--ofm-public-page-edge) - var(--ofm-public-page-edge)));
    max-inline-size:var(--ofm-billboard-rail);
    margin-inline:auto;
}

main.ofm-public-page--billboard .ofm-billboard__hero {
    padding-block:clamp(32px,4vw,56px) 20px;
}

main.ofm-public-page--billboard .ofm-billboard__hero h1 {
    max-inline-size:100%;
    margin-block:6px 12px;
    font-size:clamp(2.75rem,5vw,4.5rem);
    line-height:var(--ofm-font-display-line-height,1.08);
}

main.ofm-public-page--billboard .ofm-billboard__hero p:not(.ofm-eyebrow) {
    max-inline-size:720px;
}

main.ofm-public-page--billboard .ofm-billboard__tabs {
    margin-block-start:18px;
}

main.ofm-public-page--billboard .ofm-billboard__section {
    padding-block:16px 24px;
    scroll-margin-block-start:calc(var(--ofm-app-shell-header-clearance,var(--ofm-app-shell-header-height,72px)) + 16px);
}

/* The generic public-page > section reset otherwise replaces the showcase's
 * automatic inline margins with zero, putting recommendations at the edge. */
main.ofm-public-page--billboard > section.ofm-beat-showcase {
    inline-size:min(var(--ofm-billboard-rail),calc(100% - var(--ofm-public-page-edge) - var(--ofm-public-page-edge)));
    width:min(var(--ofm-billboard-rail),calc(100% - var(--ofm-public-page-edge) - var(--ofm-public-page-edge)));
    max-inline-size:var(--ofm-billboard-rail);
    margin:16px auto 0;
    padding:0;
}

main.ofm-public-page--billboard .ofm-beat-showcase__grid {
    grid-template-columns:repeat(3,minmax(0,240px));
    justify-content:start;
}

main.ofm-public-page--billboard .ofm-beat-showcase--count-2 .ofm-beat-showcase__grid {
    grid-template-columns:repeat(2,minmax(0,240px));
}

main.ofm-public-page--billboard .ofm-beat-showcase--count-1 .ofm-beat-showcase__grid {
    grid-template-columns:minmax(0,240px);
}

main.ofm-public-page--billboard .ofm-beat-showcase__item,
main.ofm-public-page--billboard .ofm-beat-showcase__card {
    max-inline-size:240px;
}

@media(max-width:720px) {
    main.ofm-public-page--billboard .ofm-billboard__hero {
        padding-block:32px 16px;
    }

    main.ofm-public-page--billboard .ofm-billboard__section {
        padding-block:12px 20px;
    }
}

/* Retain the existing small-screen horizontal recommendation rail and its
 * keyboard-accessible links; only its outer gutter now matches the charts. */
@media(max-width:690px) {
    main.ofm-public-page--billboard .ofm-beat-showcase__grid,
    main.ofm-public-page--billboard .ofm-beat-showcase--count-2 .ofm-beat-showcase__grid,
    main.ofm-public-page--billboard .ofm-beat-showcase--count-1 .ofm-beat-showcase__grid {
        grid-template-columns:none;
    }

    main.ofm-public-page--billboard .ofm-beat-showcase__item,
    main.ofm-public-page--billboard .ofm-beat-showcase__card {
        max-inline-size:208px;
    }
}

/* Billboard appearance. Opaque component surfaces keep text/icon contrast
 * independent of the surrounding page gradients and cover artwork. */
body.ofm-app-route #content main.ofm-public-page--billboard {
    --ofm-billboard-ink:#f7f4eb;
    --ofm-billboard-muted:#c7c1b6;
    --ofm-billboard-accent:#f4c430;
    --ofm-billboard-row:#15171c;
    --ofm-billboard-hover:#242720;
    --ofm-billboard-current:#302a16;
    --ofm-billboard-line:#77746b;
    --ofm-billboard-control:#17191e;
    --ofm-billboard-control-hover:#302a16;
    --ofm-billboard-focus:#f4c430;
    --ofm-billboard-focus-gap:#090a0d;
    --ofm-billboard-genre-ink:#ffe29a;
    --ofm-billboard-genre-surface:#322b17;
    --ofm-billboard-up-ink:#b0e5c4;
    --ofm-billboard-up-surface:#173524;
    --ofm-billboard-down-ink:#ffc4c4;
    --ofm-billboard-down-surface:#412022;
    --ofm-billboard-neutral-ink:#ded8cc;
    --ofm-billboard-neutral-surface:#292c31;
}

html[data-ofm-color-scheme="light"] body.ofm-app-route #content main.ofm-public-page--billboard {
    --ofm-billboard-ink:#24211b;
    --ofm-billboard-muted:#5e574b;
    --ofm-billboard-accent:#765500;
    --ofm-billboard-row:#fffdfa;
    --ofm-billboard-hover:#f1eadb;
    --ofm-billboard-current:#fff0c2;
    --ofm-billboard-line:#897c60;
    --ofm-billboard-control:#fffdfa;
    --ofm-billboard-control-hover:#f2e8ca;
    --ofm-billboard-focus:#765500;
    --ofm-billboard-focus-gap:#fffdfa;
    --ofm-billboard-genre-ink:#634706;
    --ofm-billboard-genre-surface:#f6edcd;
    --ofm-billboard-up-ink:#155b35;
    --ofm-billboard-up-surface:#e0f0e4;
    --ofm-billboard-down-ink:#842b35;
    --ofm-billboard-down-surface:#f8e3e5;
    --ofm-billboard-neutral-ink:#5e574b;
    --ofm-billboard-neutral-surface:#f0ece2;
}

body.ofm-app-route #content main.ofm-public-page--billboard :is(
    .ofm-billboard__hero p:not(.ofm-eyebrow),
    .ofm-billboard__song-context > p,
    .ofm-billboard__heading > p,
    .ofm-release-row__main > span,
    .ofm-billboard__identity > span,
    .ofm-billboard__empty
) {
    color:var(--ofm-billboard-muted);
}

body.ofm-app-route #content main.ofm-public-page--billboard :is(
    .ofm-release-row__main > a,
    .ofm-billboard__identity,
    .ofm-billboard__identity > strong,
    .ofm-billboard__owner,
    .ofm-billboard__metric
) {
    color:var(--ofm-billboard-ink);
}

body.ofm-app-route #content main.ofm-public-page--billboard :is(.ofm-eyebrow,.ofm-billboard__rank) {
    color:var(--ofm-billboard-accent);
}

body.ofm-app-route #content main.ofm-public-page--billboard .ofm-billboard__row {
    border-color:var(--ofm-billboard-line);
    background:var(--ofm-billboard-row);
}

body.ofm-app-route #content main.ofm-public-page--billboard .ofm-billboard__row.is-current {
    border-color:var(--ofm-billboard-accent);
    background:var(--ofm-billboard-current);
}

body.ofm-app-route #content main.ofm-public-page--billboard .ofm-billboard__empty {
    border-color:var(--ofm-billboard-line);
    background:var(--ofm-billboard-control);
}

/* Genre chips can have a long translated or compound label. Allow the grid
 * item and its flex child to shrink within the existing metadata column. */
body.ofm-app-route #content main.ofm-public-page--billboard .ofm-release-row__meta {
    min-inline-size:0;
    max-inline-size:100%;
}

body.ofm-app-route #content main.ofm-public-page--billboard .ofm-release-row__genre {
    min-inline-size:0;
    max-inline-size:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    border-color:var(--ofm-billboard-line);
    background:var(--ofm-billboard-genre-surface);
    box-shadow:none;
    color:var(--ofm-billboard-genre-ink);
}

body.ofm-app-route #content main.ofm-public-page--billboard .ofm-billboard__trend {
    border-color:var(--ofm-billboard-line);
    background:var(--ofm-billboard-neutral-surface);
    color:var(--ofm-billboard-neutral-ink);
}

body.ofm-app-route #content main.ofm-public-page--billboard .ofm-billboard__trend.is-up {
    background:var(--ofm-billboard-up-surface);
    color:var(--ofm-billboard-up-ink);
}

body.ofm-app-route #content main.ofm-public-page--billboard .ofm-billboard__trend.is-down {
    background:var(--ofm-billboard-down-surface);
    color:var(--ofm-billboard-down-ink);
}

body.ofm-app-route #content main.ofm-public-page--billboard :is(
    .ofm-billboard__tabs > a,
    a.ofm-billboard__market,
    .ofm-billboard__heading > a,
    .ofm-billboard__play-all
) {
    min-block-size:44px;
    border-color:var(--ofm-billboard-line);
    background:var(--ofm-billboard-control);
    box-shadow:none;
    color:var(--ofm-billboard-ink);
    transform:none;
}

body.ofm-app-route #content main.ofm-public-page--billboard :is(
    .ofm-billboard__tabs > a.is-active,
    a.ofm-billboard__market.is-active
) {
    border-color:#765500;
    background:#f4c430;
    color:#211b0d;
}

body.ofm-app-route #content main.ofm-public-page--billboard .ofm-billboard__owner {
    min-inline-size:44px;
    min-block-size:44px;
}

body.ofm-app-route #content main.ofm-public-page--billboard .ofm-billboard__owner .ofm-public-owner__avatar {
    border-color:var(--ofm-billboard-line);
    background:var(--ofm-billboard-control);
    color:var(--ofm-billboard-accent);
}

/* A visible 44px play button uses the same gold and dark icon in both modes.
 * Artwork remains visible around it; no image determines the icon contrast. */
body.ofm-app-route #content main.ofm-public-page--billboard .ofm-release-row__play {
    inset:auto;
    inset-inline-start:50%;
    inset-block-start:50%;
    inline-size:44px;
    block-size:44px;
    min-inline-size:44px;
    min-block-size:44px;
    padding:0;
    transform:translate(-50%,-50%);
    border:1px solid #211b0d;
    border-radius:50%;
    background:#f4c430;
    color:#211b0d;
    opacity:1;
}

body.ofm-app-route #content main.ofm-public-page--billboard .ofm-public-disclosure__summary::after {
    border-color:var(--ofm-billboard-line);
    background:var(--ofm-billboard-control);
    color:var(--ofm-billboard-accent);
}

@media(hover:hover) {
    body.ofm-app-route #content main.ofm-public-page--billboard .ofm-billboard__row:hover {
        border-color:var(--ofm-billboard-accent);
        background:var(--ofm-billboard-hover);
    }

    body.ofm-app-route #content main.ofm-public-page--billboard :is(
        .ofm-release-row__main > a,
        .ofm-billboard__identity,
        .ofm-billboard__owner
    ):hover {
        color:var(--ofm-billboard-accent);
        text-decoration:underline;
        text-underline-offset:3px;
    }

    body.ofm-app-route #content main.ofm-public-page--billboard .ofm-billboard__identity:hover > strong {
        color:var(--ofm-billboard-accent);
    }

    body.ofm-app-route #content main.ofm-public-page--billboard .ofm-billboard__owner:hover .ofm-public-owner__avatar {
        border-color:var(--ofm-billboard-accent);
    }

    body.ofm-app-route #content main.ofm-public-page--billboard :is(
        .ofm-billboard__tabs > a,
        a.ofm-billboard__market,
        .ofm-billboard__heading > a,
        .ofm-billboard__play-all,
        .ofm-public-disclosure__summary
    ):hover {
        border-color:var(--ofm-billboard-accent);
        background:var(--ofm-billboard-control-hover);
        color:var(--ofm-billboard-accent);
        transform:none;
    }

    body.ofm-app-route #content main.ofm-public-page--billboard :is(
        .ofm-billboard__tabs > a.is-active,
        a.ofm-billboard__market.is-active,
        .ofm-release-row__play
    ):hover {
        background:#ffdb5a;
        color:#211b0d;
    }
}

body.ofm-app-route #content main.ofm-public-page--billboard :is(
    .ofm-billboard__tabs > a,
    a.ofm-billboard__market,
    .ofm-billboard__heading > a,
    .ofm-billboard__play-all,
    .ofm-release-row__main > a,
    .ofm-billboard__identity,
    .ofm-billboard__owner,
    .ofm-public-disclosure__summary
):focus-visible {
    outline:3px solid var(--ofm-billboard-focus);
    outline-offset:3px;
    box-shadow:0 0 0 2px var(--ofm-billboard-focus-gap);
}

/* Native summary and cover overflow boundaries need their indicator inside
 * the control, where clipping and artwork cannot obscure it. */
body.ofm-app-route #content main.ofm-public-page--billboard summary.ofm-public-disclosure__summary:focus-visible {
    outline-offset:-5px;
    box-shadow:none;
}

body.ofm-app-route #content main.ofm-public-page--billboard .ofm-release-row__play:focus-visible {
    outline:2px solid #211b0d;
    outline-offset:-4px;
}

body.ofm-app-route #content main.ofm-public-page--billboard .ofm-release-row__cover:focus-within {
    outline:3px solid var(--ofm-billboard-focus);
    outline-offset:3px;
}

@media(prefers-reduced-motion:reduce) {
    body.ofm-app-route #content main.ofm-public-page--billboard :is(
        .ofm-billboard__row,
        .ofm-billboard__tabs > a,
        a.ofm-billboard__market,
        .ofm-billboard__trend,
        .ofm-release-row__play,
        .ofm-billboard__owner .ofm-public-owner__avatar
    ) {
        animation:none;
        transition:none;
    }

    body.ofm-app-route #content main.ofm-public-page--billboard .ofm-billboard__owner .ofm-public-owner__avatar {
        transform:none;
    }
}

/* Small-screen navigation is a scroll rail. Keep its complete keyboard ring
 * inside each pill so the rail cannot clip the first/last/top edge. */
@media(max-width:620px) {
    body.ofm-app-route #content main.ofm-public-page--billboard :is(
        .ofm-billboard__tabs > a,
        a.ofm-billboard__market
    ):focus-visible {
        outline-offset:-5px;
        box-shadow:none;
    }

    body.ofm-app-route #content main.ofm-public-page--billboard :is(
        .ofm-billboard__tabs > a.is-active,
        a.ofm-billboard__market.is-active
    ):focus-visible {
        outline-color:#211b0d;
    }
}