/* Embedded film picker (create-club wizard, step 3 — film clubs only). */

/* ── Type dropdown (Film / Director / Actor) ─────────────────────────
   Replaces the old three-pill switch with a single trigger + menu. The
   trigger sits flush with the Random + Favorites action buttons that
   live in the same .fp-type-bar row. */
.fp-type-bar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fp-type-dd {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}

.fp-type-dd__toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px 0 12px;
    background: #fff;
    border: 1px solid #d8dbe8;
    border-radius: 999px;
    color: #1a1d2e;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 120ms, background 120ms, box-shadow 120ms;
}

.fp-type-dd__toggle:hover {
    border-color: #2B988F;
    background: #f6fbfa;
}

.fp-type-dd.is-open > .fp-type-dd__toggle {
    border-color: #2B988F;
    box-shadow: 0 0 0 3px rgba(43,152,143,0.15);
    background: #f6fbfa;
}

.fp-type-dd__icon {
    font-size: 18px !important;
    color: #2B988F;
}

.fp-type-dd__label {
    line-height: 1;
}

.fp-type-dd__caret {
    font-size: 20px !important;
    color: #8a8da8;
    transition: transform 160ms ease;
}

.fp-type-dd.is-open .fp-type-dd__caret {
    transform: rotate(180deg);
    color: #2B988F;
}

.fp-type-dd__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    margin: 0;
    padding: 4px;
    list-style: none;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e2e5ee;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20, 30, 60, 0.16);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
}

.fp-type-dd.is-open .fp-type-dd__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.fp-type-dd__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: #1a1d2e;
    transition: background 120ms;
}

.fp-type-dd__opt:hover {
    background: #f1faf9;
}

.fp-type-dd__opt.is-selected {
    background: rgba(43,152,143,0.10);
}

.fp-type-dd__opt .material-icons {
    font-size: 20px;
    color: #2B988F;
}

.fp-type-dd__opt-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.fp-type-dd__opt-title {
    font-size: 0.88rem;
    font-weight: 600;
}

.fp-type-dd__opt-sub {
    font-size: 0.72rem;
    color: #686b87;
    margin-top: 2px;
}

@media (max-width: 480px) {
    .fp-type-dd__toggle {
        padding: 0 8px 0 10px;
        font-size: 0.82rem;
        height: 34px;
    }
    .fp-type-dd__menu { min-width: 200px; }
}

/* Match dice + favorites buttons to the back/home circles (38px). */
.fp-type-bar .custom-album-picker__refresh-btn {
    width: 38px;
    height: 38px;
}
.fp-type-bar .custom-album-picker__refresh-btn .material-icons {
    font-size: 20px;
}


.film-picker {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.film-picker__search {
    position: relative;
    display: flex;
    align-items: center;
}

.film-picker__search-icon {
    position: absolute;
    left: 12px;
    color: #8a8da8;
    font-size: 20px;
    pointer-events: none;
}

.film-picker__input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1px solid #d8dbe8;
    border-radius: 10px;
    background: #fff;
    font-size: 0.95rem;
    color: #1a1d2e;
    transition: border-color 120ms, box-shadow 120ms;
}

.film-picker__input:focus {
    outline: none;
    border-color: #2B988F;
    box-shadow: 0 0 0 3px rgba(43,152,143,0.15);
}

.film-picker__view { display: flex; flex-direction: column; gap: 14px; }

.film-picker__view--detail { gap: 12px; }

.film-picker__loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
}

.film-picker__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(43,152,143,0.1);
    border: 1px solid rgba(43,152,143,0.25);
    border-radius: 10px;
    font-size: 0.85rem;
    color: #1f6f68;
}

.film-picker__status .material-icons {
    font-size: 18px;
    color: #2B988F;
}

.film-picker__notice {
    grid-column: 1 / -1;
    text-align: center;
    color: #686b87;
    font-size: 0.85rem;
    padding: 16px 0;
}

/* ── Active-restriction banner (search view) ────────────────────── */
.film-picker__restriction {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: #fff7e1;
    border: 1px solid #ecd07a;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #6e4f00;
}

.film-picker__restriction-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-weight: 600;
}

.film-picker__restriction-head-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.film-picker__restriction-dismiss {
    appearance: none;
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    margin: -2px -4px -2px 0;
    padding: 2px;
    line-height: 1;
    border-radius: 6px;
    color: #b58a00;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.film-picker__restriction-dismiss:hover,
.film-picker__restriction-dismiss:focus-visible {
    background: rgba(181, 138, 0, 0.14);
    color: #6e4f00;
    outline: none;
}
.film-picker__restriction-dismiss .material-icons {
    font-size: 18px;
    color: inherit;
}

.film-picker__restriction-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.film-picker__restriction-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    line-height: 1.45;
}

.film-picker__restriction-or {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #a07a00;
    padding: 2px 0 2px 28px;
}

.film-picker__restriction-row-icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.film-picker__restriction-row-body {
    flex: 1 1 auto;
    color: #6e4f00;
}

.film-picker__restriction-value {
    font-weight: 600;
    color: #4a3500;
}

.film-picker__restriction-link {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: #2B988F;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.film-picker__restriction-link:hover,
.film-picker__restriction-link:focus-visible {
    text-decoration: underline;
    color: #20706a;
    outline: none;
}

.film-picker__restriction .material-icons {
    font-size: 16px;
    color: #b58a00;
}

/* ── Restriction/validation toast — replaces the native alert() dialog.
   Same warning palette as .film-picker__restriction above so it reads as
   part of the same "this doesn't fit the club's rules" language. ── */
.fp-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(12px);
    max-width: min(92vw, 380px);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    background: #fff7e1;
    border: 1px solid #ecd07a;
    border-radius: 12px;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.28);
    color: #6e4f00;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    z-index: 12000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.fp-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.fp-toast__icon {
    flex: 0 0 auto;
    font-size: 18px !important;
    color: #b58a00;
    margin-top: 1px;
}
.fp-toast__text {
    flex: 1 1 auto;
}
@media (max-width: 540px) {
    .fp-toast {
        left: 12px;
        right: 12px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        max-width: none;
        transform: translateY(12px);
    }
    .fp-toast.is-visible {
        transform: translateY(0);
    }
}

/* ── Out-of-range note inside the film detail page ──────────────── */
.fp-detail__restriction {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
    padding: 8px 12px;
    background: #fdecec;
    border: 1px solid #f3a684;
    border-radius: 8px;
    color: #8c2f10;
    font-size: 0.82rem;
    font-weight: 600;
}

.fp-detail__restriction .material-icons {
    font-size: 18px;
    color: #b04545;
}

.film-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
}

/* ── Home landing ───────────────────────────────────────────────
   Three sections: popular films, popular directors, popular actors.
   Each row is a single responsive line of cards (2..5 columns) to
   match the filmography slider's rhythm. */
.fp-home__section {
    margin-bottom: 22px;
}
/* Split/per-category restricted rows sharing the row above's title skip
   their own header — tighten the gap between them so they read as one
   continuous group rather than separate sections. */
.fp-home__section--grouped {
    margin-top: -8px;
}

.fp-home__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 2px 10px;
}

.fp-home__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1d2e;
}

.fp-home__more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    padding: 4px 6px;
    color: #2b988f;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color .15s ease, color .15s ease;
}
.fp-home__more:hover {
    background: #f1faf9;
    color: #1f7670;
}
.fp-home__more .material-icons {
    font-size: 18px;
}

.fp-home__row {
    display: grid;
    grid-template-columns: repeat(var(--fp-cols, 5), minmax(0, 1fr));
    gap: 14px;
}

.fp-home__row-loading,
.fp-home__row-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #686b87;
    font-size: 0.85rem;
    padding: 16px 0;
}

/* ── Popular landing (rendered when search is empty) ──────────────── */
.film-picker__popular {
    margin-top: 4px;
}

.film-picker__popular-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 6px 2px 10px;
}

.film-picker__popular-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1d2e;
}

.film-picker__popular-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: #686b87;
    font-size: 0.85rem;
    padding: 24px 0;
}

.fp-card {
    appearance: none;
    background: none;
    border: 1px solid transparent;
    padding: 6px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    /* Top-anchor the poster/title/meta stack. Without this a <button>
       grid item vertically centres its content when the grid row stretches
       to a taller (2-line title) neighbour, knocking shorter-title posters
       out of line. Matches .fp-oscar__card. */
    display: flex;
    flex-direction: column;
    transition: border-color 120ms, transform 120ms, background 120ms;
}

/* Reserve two lines for the title (non-person cards) so cards with a
   1-line title keep their year/rating row on the same baseline as
   2-line neighbours. */
.fp-card:not(.fp-card--person) .fp-card__title {
    min-height: calc(0.82rem * 1.25 * 2);
}

.fp-card:hover {
    border-color: #2B988F;
    background: rgba(43,152,143,0.04);
    transform: translateY(-1px);
}

.fp-card__poster {
    position: relative;   /* positioning context for the inline Add-to-Queue pill */
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: #eef0f7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

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

.fp-card__noposter {
    color: #b6b9cf;
}

.fp-card__noposter .material-icons {
    font-size: 36px;
}

.fp-card__title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a1d2e;
    line-height: 1.25;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.fp-card__title-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Film home cards: the release year flows inline (in parens) at the end of
   the title, and the title is allowed up to 3 lines so it truncates less
   before reaching the year. Scoped to .fp-home__row — those cards are the
   only ones built by homeCardElement. */
.fp-home__row .fp-card__title-text {
    -webkit-line-clamp: 3;
}
.fp-home__row .fp-card__title-year {
    white-space: nowrap;
    color: #6b6e85;
}

/* IMDB Top 250 film cards mirror the film home cards: 3-line title clamp with
   the year inline in parens at the end (the rank badge + rating meta row stay).
   The Top 250 grid isn't inside .fp-home__row, so scope by .fp-imdb__card. */
.fp-imdb__card .fp-card__title-text {
    -webkit-line-clamp: 3;
}
.fp-imdb__card .fp-card__title-year {
    white-space: nowrap;
    color: #6b6e85;
}

/* TV picker titles clamp to 3 lines with the release year flowing inline in
   parens at the end (mirrors the film picker home cards), so the (year) is
   part of the clamped block rather than a separate row below. Applies to
   every TV card — popular/genre/person rows AND the Top 250 grid. */
.tv-picker .fp-card__title-text {
    -webkit-line-clamp: 3;
}
.tv-picker .fp-card__title-year {
    white-space: nowrap;
    color: #6b6e85;
}
/* The slider card reserves 2 lines for the title — in the TV picker
   titles clamp to 1 line, so that reservation leaves a dead gap above
   the year/character row on actor & creator pages. */
.tv-picker .fp-slider__card .fp-card__title {
    min-height: 0;
}

/* Nudge the cast/creator heart down 2px so it sits visually in line
   with the name baseline. Scoped to .tv-picker so the film picker's
   hearts keep their existing alignment. */
.tv-picker .fp-person-fav {
    margin-top: 2px;
}

/* Cast-row hearts are larger (15px) and live in a center-aligned row,
   so they read high against the name — push them down a touch more. */
.tv-picker .fp-cast__name-row .fp-person-fav {
    margin-top: 4px;
}

/* TV detail: title + inline favorite heart on one line, year shown in
   muted parentheses next to it (movie-picker style). */
.tv-picker .fp-detail__title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tv-picker .fp-detail__year {
    font-weight: 600;
    color: #8a8da8;
}
.tv-picker .fp-detail__title .fp-title-fav {
    font-size: 19px;
    margin-top: 0;
}

/* Smaller supporting copy under the title — created-by / network /
   genre rows and the synopsis. */
.tv-picker .fp-detail__row  { font-size: 0.76rem; }
.tv-picker .fp-detail__plot { font-size: 0.78rem; }

/* Episode count sits inline after the character, separated by a small
   dot. The dot and count are lighter so the character stays primary. */
.tv-picker .fp-cast__eps {
    color: #8a8da8;
}
.tv-picker .fp-cast__dot {
    display: inline-block;
    margin: 0 6px;
    color: #b6b9cf;
}

.fp-card__year {
    font-size: 0.75rem;
    color: #8a8da8;
    margin-top: 2px;
}

/* ── Detail panel ──────────────────────────────────────────────── */
.film-picker__detail {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 18px;
    padding: 4px 0 0;
}

/* The film detail wraps its poster + action buttons in .fp-detail__pmain, but
   only the ≤540px two-column layout needs it as a real block — everywhere else
   it's transparent so the poster column lays out exactly as before. */
/* Remove-from-Queue button: full label on tablet/desktop, shorter
   "Remove Queue" on mobile (only this button carries these spans). */
.fp-btn-label-short { display: none; }
@media (max-width: 540px) {
    .fp-btn-label-full  { display: none; }
    .fp-btn-label-short { display: inline; }
}

.film-picker__detail .fp-detail__pmain { display: contents; }
/* Likewise .fp-detail__main groups the right-column content (title → synopsis)
   so cast + where-to-watch can break out full-width on mobile; transparent
   elsewhere. */
.film-picker__detail .fp-detail__main { display: contents; }

/* Desktop: widen the film detail's left (poster) column to use the wider
   explorer modal instead of squishing the poster. Desktop only (992px+);
   the ≤540px stacked layout below and the TV `--cols` / episode `--ep`
   variants keep their own column tracks. */
@media (min-width: 992px) {
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) {
        grid-template-columns: 240px 1fr;
    }
    /* Let the action buttons fill the (now wider) poster column instead of the
       global .album-action-buttons max-width:220px cap, so they're exactly as
       wide as the poster above them. */
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep)
        .fp-detail__poster .album-action-buttons {
        max-width: none;
        width: 100%;
    }
}

/* iPad range (541-991.98px): the poster column keeps its base 160px width
   here (no widen-to-240px like desktop, no collapse-to-120px-two-col like
   mobile), but the action buttons still need the same "fill the column
   instead of capping at .album-action-buttons' global 220px" treatment —
   otherwise they sit at whatever width their content happens to need,
   mismatched against the poster above them. !important is required:
   embedded-pick-album.css has `#mediaExplorerModal .album-action-buttons
   { width: 130px }` (sized for the ALBUM detail page's mobile cover,
   ≤991.98px, no !important) that would otherwise win here on ID
   specificity alone despite being meant for a different picker. */
@media (min-width: 541px) and (max-width: 991.98px) {
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep)
        .fp-detail__poster .album-action-buttons {
        max-width: none !important;
        width: 100% !important;
    }
}

/* Easter egg: blue handprint tucked into the bottom-right of the
   Arrested Development show page. Rotated, partly off the edge, and
   muted so it reads as a wink rather than decoration. */
.fp-detail--ad-egg {
    position: relative;
    overflow: hidden;
}
.fp-ad-egg {
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 280px;
    height: auto;
    transform: rotate(-18deg);
    transform-origin: bottom right;
    /* TEMP: bumped to confirm the element is rendering. Tune back down
       to ~0.22 once we know it's mounting and the image loads. */
    opacity: 0.85;
    pointer-events: none;
    user-select: none;
    z-index: 5;
}

/* ── Film detail: compact two-column layout on mobile ─────────────────
   Same technique as the TV `.fp-detail--cols` pages. A small poster +
   action buttons sit in the left column; the right column holds the title,
   year/rating/runtime, IMDb/RT, director, genre, synopsis and (under it)
   the Academy Awards block. Cast + where-to-watch span full width below.
   Scoped so the TV `--cols` / episode `--ep` variants and tablet/desktop
   are untouched. */
@media (max-width: 540px) {
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) {
        grid-template-columns: 120px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 14px;
        align-items: start;
    }
    /* The media-explorer modal forces a single 1fr column — re-assert two. */
    #mediaExplorerModal .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) {
        grid-template-columns: 120px minmax(0, 1fr) !important;
    }
    /* The album picker's #mediaExplorerModal rules use the shared
       .album-action-buttons class, so they leak onto the film detail in the
       modal — 130px-wide buttons (wider than the 120px poster) with a tighter
       font. Re-assert the embedded film picker's button sizing (higher
       specificity beats the album ID rules) so the modal matches it. */
    #mediaExplorerModal .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-detail__pmain .album-action-buttons {
        width: 100% !important;
        max-width: none !important;
    }
    #mediaExplorerModal .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .album-action-buttons .btn {
        font-size: 0.72rem;
        padding: 6px;
        line-height: 1.5;
    }
    #mediaExplorerModal .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .album-action-buttons .btn .material-icons {
        font-size: 1em !important;
        margin-right: 2px !important;
    }
    /* Flatten the poster + body columns so their inner blocks become
       independent grid items. */
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-detail__poster,
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-detail__body {
        display: contents;
    }
    /* Left: the poster + action buttons, stacked, in column 1. */
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-detail__pmain {
        display: block;
        grid-column: 1; grid-row: 1; margin: 0;
    }
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-detail__pmain .album-action-buttons {
        margin-top: 8px !important; width: 100%; max-width: none;
    }
    /* Right: title, year/rating/runtime, IMDb/RT, director, genre, synopsis. */
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-detail__main {
        display: block;
        grid-column: 2; grid-row: 1; min-width: 0;
    }
    /* Academy Awards + cast + where-to-watch each span full width below
       both columns, in that order (source order controls the auto-placed
       row stacking since none of the three declare an explicit row). */
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-oscars,
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-cast,
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-watch {
        grid-column: 1 / -1;
    }
    /* Academy Awards becomes a bordered card on mobile, matching the cast
       and where-to-watch boxes it now sits flush above. */
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-oscars {
        margin-top: 0;
        border: 1px solid #e2e5ee;
        border-radius: 10px;
        overflow: hidden;
    }
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-oscars__head {
        margin: 0;
        justify-content: space-between;
        padding: 10px 14px;
        background: #f5f7fb;
        border-bottom: 1px solid #e2e5ee;
    }
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-oscars__head:hover {
        background: #eef1f8;
    }
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-oscars.is-collapsed .fp-oscars__head {
        border-bottom: none;
    }
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-oscars__list {
        padding: 8px 14px 10px;
    }
    /* Mobile ratings: show IMDb + Rotten Tomatoes only. */
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-rating--tmdb,
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-rating--mc {
        display: none;
    }
}

/* ── TV picker detail pages (series / season / episode): two-column top
   on mobile ───────────────────────────────────────────────────────────
   Each TV detail panel (.fp-detail--cols) wraps its content in four blocks:
   poster-main / poster-aside / head / rest. Those wrappers are
   display:contents by default, so desktop keeps its untouched layout
   (poster | body on the series & season pages, .fp-epd__aside | body on the
   episode page). On narrow screens we flatten the two columns and rebuild a
   compact grid: a small poster/still + buttons sit beside the title, year,
   ratings, "created by" … through the synopsis, and the episode guide plus
   the remaining sections span full width underneath. */
.fp-detail--cols .fp-detail__poster-main,
.fp-detail--cols .fp-detail__poster-aside,
.fp-detail--cols .fp-detail__head,
.fp-detail--cols .fp-detail__rest {
    display: contents;
}

@media (max-width: 540px) {
    /* Compound selector beats the 1fr single-column rules above
       (.film-picker__detail and .film-picker__detail--ep). */
    .film-picker__detail.fp-detail--cols {
        grid-template-columns: 120px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 16px;
        align-items: start;
    }
    /* The media-explorer modal forces .film-picker__detail to a single 1fr
       column (#mediaExplorerModal … grid-template-columns: 1fr !important) for
       the album/film pickers. Re-assert the TV two-column-top grid there — a
       higher-specificity ID selector with !important — otherwise our explicit
       grid-column placements collapse into one track and overlap. */
    #mediaExplorerModal .film-picker__detail.fp-detail--cols {
        grid-template-columns: 120px minmax(0, 1fr) !important;
    }
    /* Flatten the column wrappers; promote the inner blocks to grid items. */
    .fp-detail--cols .fp-detail__poster,
    .fp-detail--cols .fp-epd__aside,
    .fp-detail--cols .fp-detail__body {
        display: contents;
    }
    .fp-detail--cols .fp-detail__poster-main,
    .fp-detail--cols .fp-detail__poster-aside,
    .fp-detail--cols .fp-detail__head,
    .fp-detail--cols .fp-detail__rest {
        display: block;
        min-width: 0;
    }
    /* Top row: compact poster/still + buttons | title … synopsis */
    .fp-detail--cols .fp-detail__poster-main { grid-column: 1; grid-row: 1; margin: 0; }
    .fp-detail--cols .fp-detail__head        { grid-column: 2; grid-row: 1; }
    /* Everything else full width underneath, in source order. min-width:0 on
       the full-width aside lets the season/episode rows ellipsis-truncate
       instead of widening the track off-screen. */
    .fp-detail--cols .fp-detail__poster-aside { grid-column: 1 / -1; grid-row: 2; }
    .fp-detail--cols .fp-detail__rest         { grid-column: 1 / -1; grid-row: 3; }
    /* Tighten the gap above the action buttons now that the poster is small. */
    .fp-detail--cols .fp-detail__poster-main .album-action-buttons { margin-top: 8px !important; }
    /* The episode still otherwise centers at max 320px — fill the small column. */
    .fp-detail--cols .fp-detail__poster-main .fp-epd__still { max-width: none; margin: 0; }
}

.fp-detail__poster img,
.fp-detail__poster .fp-card__noposter {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    background: #eef0f7;
}

.fp-detail__loading,
.fp-detail__error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px;
    color: #686b87;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.fp-detail__error { color: #b04545; }

.fp-detail__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1d2e;
    line-height: 1.2;
}

.fp-detail__meta {
    margin-top: 4px;
    font-size: 0.82rem;
    color: #686b87;
}

.fp-detail__ratings {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.fp-rating {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1a1d2e;
    background: #eef0f7;
    border: 1px solid #d8dbe8;
}

.fp-rating--tmdb { background: rgba(43,152,143,0.12); border-color: rgba(43,152,143,0.3); color: #1f6f68; }
.fp-rating--imdb { background: #fff5d6; border-color: #f1d77a; color: #6e4f00; }
.fp-rating--rt   { background: #fde6dc; border-color: #f3a684; color: #8c2f10; }
.fp-rating--mc   { background: #e2ecf7; border-color: #94b8dc; color: #1f4d7a; }

.fp-detail__row {
    font-size: 0.84rem;
    color: #2c2f47;
    margin-top: 4px;
}

.fp-detail__label {
    font-weight: 700;
    color: #4a4d6a;
}

/* ── Inline person links (director / cast) ─────────────────────── */
.fp-person-link {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #2B988F;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    align-self: flex-start;
    transition: color 120ms;
}

.fp-person-link:hover { color: #1f6f68; text-decoration: underline; }
.fp-person-link:focus { outline: 2px solid rgba(43,152,143,0.3); outline-offset: 2px; border-radius: 2px; }

/* Inline name + favorite-heart pair (director row, cast list). */
.fp-person-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.fp-cast__name-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Tappable empty/filled heart next to actor/director names. */
.fp-person-fav,
.fp-title-fav,
.fp-episode-fav,
.fp-season-fav {
    font-size: 14px;
    line-height: 1;
    color: #b6b9cf;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, transform 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    border-radius: 999px;
    vertical-align: middle;
}
/* Episode hearts: small next to row titles, slightly larger on the
   episode page's detail title (matches .fp-title-fav size). */
.fp-epl__title .fp-episode-fav {
    font-size: 14px;
    margin-left: 4px;
    position: relative;
    top: -2px;
}
.fp-detail__title .fp-episode-fav { font-size: 18px; }

/* Director row sits on a small text line — keep the heart compact. */
.fp-detail__row .fp-person-fav {
    font-size: 13px;
}

/* Cast list rows have more vertical room — slightly larger heart. */
.fp-cast__name-row .fp-person-fav {
    font-size: 15px;
}

/* ── Favorites browser (film picker scope) ─────────────────────────
   Override the album-picker's fixed 6-col grid so each section stays
   on a single row at every width. Page size in JS reads back the
   rendered column count and slices to match. */
.film-picker__favorites .rtFavs__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 1100px) {
    .film-picker__favorites .rtFavs__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .film-picker__favorites .rtFavs__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .film-picker__favorites .rtFavs__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
}
@media (max-width: 480px) {
    .film-picker__favorites .rtFavs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

/* Person detail page — heart sits next to the big name heading. */
.fp-person__name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.fp-person__name .fp-person-fav {
    font-size: 22px;
    padding: 2px;
}

.fp-person-fav:hover,
.fp-title-fav:hover,
.fp-episode-fav:hover,
.fp-season-fav:hover {
    color: #ff4d8d;
    transform: scale(1.15);
}

.fp-person-fav.favorited,
.fp-title-fav.favorited,
.fp-episode-fav.favorited,
.fp-season-fav.favorited {
    color: #ff4d8d;
}

.fp-person-fav:focus-visible,
.fp-title-fav:focus-visible,
.fp-episode-fav:focus-visible,
.fp-season-fav:focus-visible {
    outline: 2px solid rgba(255, 77, 141, 0.35);
    outline-offset: 1px;
}

.fp-person-fav.is-popping,
.fp-title-fav.is-popping,
.fp-episode-fav.is-popping,
.fp-season-fav.is-popping {
    animation: fp-person-fav-pop 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.fp-detail__title .fp-season-fav { font-size: 18px; }

/* Card heart — same look and feel as the actor/director heart, sized for
   the film-card title row. Sits inside .fp-card__title (or the Oscar
   title line) and is flex-isolated so it doesn't get clamped with the
   title text. */
.fp-film-fav {
    font-size: 12px !important;
    line-height: 1;
    color: #b6b9cf;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, transform 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    border-radius: 999px;
    flex: 0 0 auto;
    margin-top: 1px;
}
.fp-film-fav:hover {
    color: #ff4d8d;
    transform: scale(1.15);
}
.fp-film-fav.favorited {
    color: #ff4d8d;
}
.fp-film-fav:focus-visible {
    outline: 2px solid rgba(255, 77, 141, 0.35);
    outline-offset: 1px;
}
.fp-film-fav.is-popping {
    animation: fp-person-fav-pop 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes fp-person-fav-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.55); }
    60%  { transform: scale(0.85); }
    100% { transform: scale(1.15); }
}

/* ── Where-to-watch (TMDB / JustWatch providers) ─────────────── */
.fp-watch {
    margin-top: 14px;
    border: 1px solid #e2e5ee;
    border-radius: 10px;
    overflow: hidden;
}

.fp-watch__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: #f5f7fb;
    border: none;
    border-bottom: 1px solid #e2e5ee;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 120ms;
}

.fp-watch__head:hover { background: #eef1f8; }

.fp-watch.is-collapsed .fp-watch__head { border-bottom: none; }
.fp-watch.is-collapsed .fp-watch__body { display: none; }

.fp-watch__heading {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #4a4d6a;
}

/* Caret sits right next to the heading (same placement as the cast
   box); the JustWatch attribution is pushed to the far right. */
.fp-watch__head-left,
.fp-watch__head-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fp-watch__attribution {
    font-size: 0.7rem;
    color: #8a8da8;
}

.fp-watch__caret {
    font-size: 18px;
    color: #6b6f8c;
    transition: transform 160ms;
}

.fp-watch.is-collapsed .fp-watch__caret { transform: rotate(-90deg); }

.fp-watch__group {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f2f7;
}

.fp-watch__group:last-child { border-bottom: none; }

.fp-watch__group-label {
    flex: 0 0 56px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #686b87;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fp-watch__chips {
    display: flex;
    flex-wrap: nowrap;          /* single line — JS hides overflow behind "Show more" */
    gap: 8px;
    flex: 1 1 0%;               /* take the row's remaining width so it can be measured */
    min-width: 0;
    overflow: hidden;           /* guard against a flash before JS fits the row */
}
/* Expanded by the "Show more" toggle — let the chips wrap to all rows. */
.fp-watch__chips.is-expanded {
    flex-wrap: wrap;
    overflow: visible;
}
/* Show more / Show less pill, sized to sit inline with the 36px chips. */
.fp-watch__more {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #e2e4ee;
    background: #f4f6fb;
    color: #4a4d6a;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.fp-watch__more:hover {
    border-color: #2B988F;
    background: #ecf7f5;
    color: #2B988F;
}

.fp-watch__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;            /* never shrink — overflow so JS can hide extras */
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8dbe8;
    box-shadow: 0 1px 2px rgba(26,29,46,0.05);
    transition: transform 120ms, border-color 120ms, box-shadow 120ms;
}

.fp-watch__chip:hover {
    border-color: #2B988F;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(26,29,46,0.1);
}

.fp-watch__chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fp-watch__chip-fallback {
    font-size: 0.7rem;
    font-weight: 700;
    color: #4a4d6a;
    padding: 0 4px;
    text-align: center;
    line-height: 1;
}

/* ── Cast list (under synopsis) ──────────────────────────────── */
.fp-cast {
    margin-top: 14px;
    border: 1px solid #e2e5ee;
    border-radius: 10px;
    overflow: hidden;
}

.fp-cast__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 14px;
    background: #f5f7fb;
    border-bottom: 1px solid #e2e5ee;
    cursor: pointer;
    transition: background 120ms;
}
.fp-cast__head:hover { background: #eef1f8; }

.fp-cast__heading {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #4a4d6a;
}

/* Cast box collapse (TV picker) — the whole head toggles like the
   where-to-watch box; heading + caret are grouped at the left. */
.fp-cast__head-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.fp-cast__caret {
    font-size: 20px;
    color: #8a8da8;
    transition: transform .15s;
}
.fp-cast.is-collapsed .fp-cast__caret { transform: rotate(-90deg); }
.fp-cast.is-collapsed .fp-cast__head  { border-bottom: none; }
.fp-cast.is-collapsed .fp-cast__list,
.fp-cast.is-collapsed .fp-cast__search-wrap,
.fp-cast.is-collapsed .fp-cast-toggle,
.fp-cast.is-collapsed .fp-cast__empty { display: none; }

/* ── Episode guide (TV picker) ─────────────────────────────────────
   Collapsible box of seasons; each season expands to lazy-load its
   episode list. Chrome mirrors the cast / where-to-watch boxes. */
.fp-eg {
    margin-top: 14px;
    border: 1px solid #e2e5ee;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.fp-eg__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 14px;
    background: #f5f7fb;
    border-bottom: 1px solid #e2e5ee;
    cursor: pointer;
    transition: background 120ms;
}
.fp-eg__head:hover { background: #eef1f8; }
.fp-eg__head-left { display: inline-flex; align-items: center; gap: 8px; }
.fp-eg__heading {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #4a4d6a;
}
.fp-eg__caret { font-size: 20px; color: #8a8da8; transition: transform .15s; }
.fp-eg.is-collapsed .fp-eg__caret { transform: rotate(-90deg); }
.fp-eg.is-collapsed .fp-eg__head  { border-bottom: none; }
.fp-eg.is-collapsed .fp-eg__body  { display: none; }

.fp-eg__seasons { list-style: none; margin: 0; padding: 0; }
.fp-eg__season { border-bottom: 1px solid #f0f2f7; }
.fp-eg__season:last-child { border-bottom: none; }
.fp-eg__season-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.fp-eg__season-head:hover { background: #fafbfd; }
.fp-eg__season-poster {
    flex: 0 0 44px;
    width: 44px;
    height: 66px;
    border-radius: 4px;
    overflow: hidden;
    background: #eef0f7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp-eg__season-poster img { width: 100%; height: 100%; object-fit: cover; }
.fp-eg__season-poster .material-icons { font-size: 22px; color: #b6b9cf; }
.fp-eg__season-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fp-eg__season-name { font-size: 0.85rem; font-weight: 700; color: #1a1d2e; }
.fp-eg__season-meta { font-size: 0.72rem; color: #8a8da8; }
.fp-eg__season-overview {
    font-size: 0.74rem;
    color: #686b87;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fp-eg__season-caret {
    flex: 0 0 auto;
    font-size: 20px;
    color: #8a8da8;
    transition: transform .15s;
}
.fp-eg__season.is-open .fp-eg__season-caret { transform: rotate(180deg); }
.fp-eg__season.is-open .fp-eg__season-head  { background: #fafbfd; }

.fp-eg__episodes { padding: 2px 14px 10px 70px; }
.fp-eg__ep { padding: 7px 0; border-top: 1px dashed #eef0f7; }
.fp-eg__ep:first-child { border-top: none; }
.fp-eg__ep-title { font-size: 0.8rem; font-weight: 600; color: #1a1d2e; }
.fp-eg__ep-num { color: #2B988F; font-weight: 700; margin-right: 4px; }
.fp-eg__ep-date { font-size: 0.7rem; font-weight: 500; color: #8a8da8; }
.fp-eg__ep-overview { font-size: 0.74rem; color: #686b87; line-height: 1.4; margin-top: 2px; }
.fp-eg__ep-empty,
.fp-eg__ep-error { font-size: 0.78rem; color: #686b87; padding: 6px 0; }
.fp-eg__sk {
    height: 11px;
    border-radius: 4px;
    margin: 7px 0;
    background: linear-gradient(110deg, #eef0f7 8%, #f7f8fc 22%, #eef0f7 38%);
    background-size: 200% 100%;
    animation: fp-card-shimmer 1.2s linear infinite;
}
.fp-eg__sk:nth-child(2) { width: 82%; }
.fp-eg__sk:nth-child(3) { width: 68%; }

/* Episode-guide season links in the side (poster) column, under the
   action buttons. Each navigates to that season's page. */
.fp-eg-aside {
    margin-top: 12px;
    border: 1px solid #e2e5ee;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.fp-eg-aside__head {
    padding: 7px 10px;
    background: #f5f7fb;
    border-bottom: 1px solid #e2e5ee;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4a4d6a;
}
.fp-eg-aside__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}
.fp-eg-aside__list li { border-top: 1px solid #f0f2f7; }
.fp-eg-aside__list li:first-child { border-top: none; }
.fp-eg-aside__season {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: #1a1d2e;
    font: inherit;
}
.fp-eg-aside__season:hover { background: #f1f3f8; color: #2B988F; }
.fp-eg-aside__name {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-eg-aside__count {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 700;
    color: #8a8da8;
    background: #eef0f7;
    border-radius: 99px;
    padding: 1px 6px;
}
.fp-eg-aside__caret { flex: 0 0 auto; font-size: 16px; color: #b6b9cf; }

/* ── Season page & Episode page (TV picker) ────────────────────────
   Season page reuses the .film-picker__detail poster+body grid. The
   episode page is single-column (wide still on top). */
/* Episode page: wider left column for the 16:9 still, info to the
   right (mirrors the show/season poster+body layout). Collapses to a
   single column on phones like the base .film-picker__detail. */
/* Aside column width matches the Seasons box's left column below
   (.fp-epd__bottom grid-template-columns: 230px 1fr) so the still +
   action buttons line up flush with the seasons list directly under
   them. */
.film-picker__detail--ep { grid-template-columns: 230px 1fr; }
@media (max-width: 540px) {
    .film-picker__detail--ep { grid-template-columns: 1fr; }
}

.fp-season__show {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a8da8;
    margin-bottom: 2px;
}
/* Episode page: the series eyebrow links back to the show page. */
button.fp-season__show--link {
    display: inline-block;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: #8a8da8;
}
button.fp-season__show--link:hover {
    color: #2B988F;
    text-decoration: underline;
}

/* Clickable episode list on a season page. */
.fp-epl { list-style: none; margin: 8px 0 0; padding: 0; }
.fp-epl__row { border-top: 1px solid #f0f2f7; }
.fp-epl__row:first-child { border-top: none; }
.fp-epl__btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 4px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.fp-epl__btn:hover { background: #fafbfd; }
.fp-epl__still {
    flex: 0 0 90px;
    width: 90px;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    overflow: hidden;
    background: #eef0f7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp-epl__still img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder TV icon — scope to direct child so the nested .fp-epl__add
   icon doesn't inherit the grey placeholder color and override the
   button's own color (was making the + on the add-to-queue chip grey
   on hover instead of white). */
.fp-epl__still > .material-icons { color: #b6b9cf; font-size: 20px; }
.fp-epl__add .material-icons { color: currentColor; }

/* Inline "Add to Queue" button overlaid on the episode still (queue
   mode + episodic-pick clubs only). Pill anchored bottom-right of the
   still; default state is a 22px round icon-only chip. On hover the
   pill expands leftward (anchored to right:4px) and reveals a small
   "Add to Queue" label. */
.fp-epl__still { position: relative; overflow: hidden; }
.fp-epl__add {
    position: absolute;
    right: 4px;
    bottom: 4px;
    height: 22px;
    padding: 0 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #2B988F;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    /* Bidirectional smooth transition. Same easing both directions so
       the pill feels symmetric on hover-in and hover-out. */
    max-width: 22px;
    transition:
        max-width 220ms cubic-bezier(0.4, 0, 0.2, 1),
        background 180ms cubic-bezier(0.4, 0, 0.2, 1),
        color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fp-epl__add .material-icons {
    font-size: 16px;
    line-height: 1;
    flex: 0 0 auto;
}
.fp-epl__add-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fp-epl__add:hover,
.fp-epl__add:focus-visible {
    max-width: 70px;
    background: #2B988F;
    color: #fff;
}
.fp-epl__add:hover .fp-epl__add-label,
.fp-epl__add:focus-visible .fp-epl__add-label {
    opacity: 1;
}
.fp-epl__add:disabled { cursor: default; }
.fp-epl__add--done {
    background: #2B988F;
    color: #fff;
    cursor: default;
}
.fp-epl__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fp-epl__title { font-size: 0.82rem; font-weight: 700; color: #1a1d2e; }
.fp-epl__num { color: #2B988F; font-weight: 700; margin-right: 4px; }
.fp-epl__meta { font-size: 0.7rem; color: #8a8da8; }
.fp-epl__overview {
    font-size: 0.74rem;
    color: #686b87;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fp-epl__caret { flex: 0 0 auto; color: #b6b9cf; font-size: 20px; transition: color .15s ease, transform .15s ease; }
.fp-epl__btn:hover .fp-epl__caret,
.fp-epl__btn:focus-visible .fp-epl__caret {
    color: #2B988F;
    transform: translateX(2px);
}

/* Episode still — left grid cell; align-self:start so it stays its
   own height instead of stretching to the info column. */
.fp-epd__still {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #eef0f7;
    align-self: start;
}
.fp-epd__still img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Guest stars span the full width under the still + info, not just
   the info column. */
/* Bottom region: season episode list on the left, guest stars on the
   right (full width under the still + info). */
.fp-epd__bottom {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 18px;
    margin-top: 16px;
}
.fp-epd__bottom--noguests { grid-template-columns: 1fr; }
/* .fp-cast carries a 14px top margin for the show-detail layout —
   drop it here so Guest stars lines up with the Episodes box. */
.fp-epd__bottom .fp-cast { margin-top: 0; align-self: start; }
/* Match the Episodes header exactly so the two boxes line up perfectly. */
.fp-epd__bottom .fp-cast__head { padding: 7px 10px; }
.fp-epd__bottom .fp-cast__heading {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
/* Empty state for episodes without guest stars — same box chrome as
   the populated Guest stars block so the layout stays balanced. */
.fp-guests-empty__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 18px 32px;
    gap: 6px;
    background:
        radial-gradient(circle at 50% 0%, rgba(43, 152, 143, 0.07), transparent 70%),
        #fff;
    border: 1px dashed #d6dae7;
    border-top: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #686b87;
}
.fp-guests-empty__icon {
    font-size: 34px;
    color: #b6b9cf;
    background: #f1f3f8;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.fp-guests-empty__title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #1a1d2e;
}
.fp-guests-empty__sub {
    font-size: 0.76rem;
    color: #8a8da8;
}
/* Left column stacks the Episodes box and the Seasons nav box. */
.fp-epd__left {
    align-self: start;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* Both boxes fill the left column (equal width) instead of
   shrink-wrapping to content — the base .fp-epd__eplist has
   align-self:start for its season-page use. With a fixed width the
   episode titles ellipsis-truncate instead of widening the box.
   .fp-epd__aside covers the episode-page case where the seasons box
   lives directly in the aside column under the still + buttons. */
.fp-epd__left .fp-epd__eplist,
.fp-epd__aside .fp-epd__eplist {
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
}

/* Season browser in the season page's left (poster) column. */
.fp-season__browser { margin-top: 12px; }

.fp-epd__eplist {
    align-self: start;
    border: 1px solid #e2e5ee;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.fp-epd__eplist-head {
    padding: 7px 10px;
    background: #f5f7fb;
    border-bottom: 1px solid #e2e5ee;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4a4d6a;
}
.fp-epd__eplist-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 460px;
    overflow-y: auto;
}
.fp-epd__eprow { border-top: 1px solid #f0f2f7; }
.fp-epd__eprow:first-child { border-top: none; }
.fp-epd__eprow-btn {
    display: flex;
    gap: 7px;
    align-items: baseline;
    width: 100%;
    padding: 6px 10px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: #1a1d2e;
    font: inherit;
}
.fp-epd__eprow-btn:hover { background: #f1f3f8; }
.fp-epd__eprow.is-current .fp-epd__eprow-btn { background: #eafaf7; }
.fp-epd__eprow.is-current .fp-epd__eprow-code,
.fp-epd__eprow.is-current .fp-epd__eprow-title { color: #2B988F; }
.fp-epd__eprow-code {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 800;
    color: #8a8da8;
}
.fp-epd__eprow-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.74rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Episodes nested under the active season row on the episode page. */
.fp-epd__sublist {
    list-style: none;
    margin: 0;
    padding: 4px 0 6px;
    background: #f8fafd;
    border-top: 1px solid #e2e5ee;
}
.fp-epd__sublist .fp-epd__eprow { border-top: 1px solid #eef0f7; }
.fp-epd__sublist .fp-epd__eprow:first-child { border-top: none; }
.fp-epd__sublist .fp-epd__eprow-btn { padding-left: 28px; }
.fp-epd__sublist .fp-epd__eprow-btn:hover { background: #eef1f8; }
.fp-epd__sublist .fp-epd__eprow.is-current .fp-epd__eprow-btn {
    background: #2B988F;
    box-shadow: inset 3px 0 0 #1f6f68;
}
.fp-epd__sublist .fp-epd__eprow.is-current .fp-epd__eprow-code,
.fp-epd__sublist .fp-epd__eprow.is-current .fp-epd__eprow-title {
    color: #fff;
    font-weight: 700;
}
.fp-epd__eprow-count {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    color: #8a8da8;
    background: #eef0f7;
    border-radius: 99px;
    padding: 1px 7px;
}
.fp-epd__eprow.is-current .fp-epd__eprow-count {
    color: #2B988F;
    background: #d8f1ed;
}
.fp-epd__eprow-empty {
    padding: 8px 10px;
    font-size: 0.76rem;
    color: #686b87;
}
@media (max-width: 540px) {
    .fp-epd__bottom { grid-template-columns: 1fr; }
    .fp-epd__eplist-ul { max-height: 300px; }
}

/* Episode page left column: still, small Open-in-IMDb button, then
   compact prev/next links — all stacked under the image. */
.fp-epd__aside {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Mirror the show-detail action stack so the IMDb button is identical
   (full-width pill, single line) here too. The global .album-action-buttons
   has max-width:220px which would leave a ~10px gap inside the 230px
   aside column — override to fill the column. */
.fp-epd__aside .album-action-buttons {
    container-type: inline-size;
    container-name: fpactions;
    max-width: none;
    width: 100%;
}
/* Same height/font/padding as the season-page action stack
   (.fp-detail__poster) — defer to each button's defaults (font:0.9rem,
   padding:0.45rem 0.9rem on the pills, btn default on the select) and
   only enforce single-line + ellipsis + 100% column width here. The
   episode aside column is wider than the season aside column on
   purpose, but the button look itself matches. */
.fp-epd__aside .fp-imdb-btn,
.fp-epd__aside .fp-ep-select-btn,
.fp-epd__aside .fp-fav-btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 10px;
    padding-right: 10px;
    min-width: 0;
    width: 100%;
}
.fp-epd__aside .fp-imdb-btn .material-icons,
.fp-epd__aside .fp-ep-select-btn .material-icons,
.fp-epd__aside .fp-fav-btn .material-icons {
    font-size: 1em !important;
    margin-right: 4px !important;
}
@container fpactions (max-width: 220px) {
    .fp-epd__aside .fp-ep-select-btn,
    .fp-epd__aside .fp-fav-btn,
    .fp-epd__aside .fp-imdb-btn {
        font-size: 0.82rem;
        padding-left: 6px;
        padding-right: 6px;
    }
}
@container fpactions (max-width: 180px) {
    .fp-epd__aside .fp-ep-select-btn,
    .fp-epd__aside .fp-fav-btn,
    .fp-epd__aside .fp-imdb-btn {
        font-size: 0.74rem;
    }
    .fp-epd__aside .fp-ep-select-btn .material-icons,
    .fp-epd__aside .fp-fav-btn .material-icons,
    .fp-epd__aside .fp-imdb-btn .material-icons {
        margin-right: 2px !important;
    }
}
@container fpactions (max-width: 150px) {
    .fp-epd__aside .fp-ep-select-btn,
    .fp-epd__aside .fp-fav-btn,
    .fp-epd__aside .fp-imdb-btn {
        font-size: 0.68rem;
    }
    /* Last-resort: hide the leading icon so labels still fit at the
       narrowest column widths the season-picker layout produces. */
    .fp-epd__aside .fp-ep-select-btn .material-icons,
    .fp-epd__aside .fp-fav-btn .material-icons,
    .fp-epd__aside .fp-imdb-btn .material-icons { display: none; }
}

@media (max-width: 540px) {
    .fp-epd__still { max-width: 320px; margin: 0 auto; }
}

.fp-cast__search-wrap {
    position: relative;
    flex: 0 1 220px;
    min-width: 0;
}

.fp-cast__search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #9aa0bd;
    pointer-events: none;
}

.fp-cast__search {
    width: 100%;
    height: 30px;
    padding: 0 26px 0 38px;
    border: 1px solid #d8dce8;
    border-radius: 6px;
    background: #fff;
    color: #2a2d44;
    font-size: 0.78rem;
    line-height: 1.2;
    outline: none;
    transition: border-color 120ms, box-shadow 120ms;
}

.fp-cast__search:focus {
    border-color: #2B988F;
    box-shadow: 0 0 0 2px rgba(43, 152, 143, 0.18);
}

.fp-cast__search::-webkit-search-cancel-button {
    appearance: none;
    width: 14px;
    height: 14px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239aa0bd"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>') center/contain no-repeat;
    cursor: pointer;
    opacity: 0.7;
}

.fp-cast__search::-webkit-search-cancel-button:hover { opacity: 1; }

@media (max-width: 480px) {
    .fp-cast__search-wrap { flex: 0 1 150px; }
}

.fp-cast__row.is-search-hidden { display: none; }
/* When the user is searching, override the show-more collapse so every
   matching cast member is visible regardless of the initial slice. */
.fp-cast__list.is-searching .fp-cast__row.is-collapsed { display: flex; }
.fp-cast__list.is-searching .fp-cast__row.is-search-hidden { display: none; }

.fp-cast__hl {
    background: #fff3a3;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* ── Episode search (TV picker) ────────────────────────────────────
   Type-ahead autocomplete that sits in the left column of the show-
   detail and episode pages (under Open in IMDb, above the episode
   guide). Picking a result opens that episode. */
.fp-epsearch {
    position: relative;
    margin-top: 12px;
}
.fp-epsearch__icon {
    position: absolute;
    top: 15px;
    left: 10px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #9aa0bd;
    pointer-events: none;
}
.fp-epsearch__input {
    width: 100%;
    height: 30px;
    padding: 0 26px 0 34px;
    border: 1px solid #d8dce8;
    border-radius: 6px;
    background: #fff;
    color: #2a2d44;
    font-size: 0.78rem;
    line-height: 1.2;
    outline: none;
}
.fp-epsearch__input:focus {
    border-color: #2B988F;
    box-shadow: 0 0 0 2px rgba(43, 152, 143, 0.18);
}
.fp-epsearch__input::-webkit-search-cancel-button {
    appearance: none;
    width: 14px;
    height: 14px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239aa0bd"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>') center/contain no-repeat;
    cursor: pointer;
    opacity: 0.7;
}
.fp-epsearch__input::-webkit-search-cancel-button:hover { opacity: 1; }
.fp-epsearch__ac {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d8dce8;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 24, 54, 0.16);
}
.fp-epsearch__ac[hidden] { display: none; }
.fp-epsearch__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    border-top: 1px solid #f0f2f7;
}
.fp-epsearch__row:first-child { border-top: none; }
.fp-epsearch__row:hover,
.fp-epsearch__row.is-active { background: #eef1f8; }
.fp-epsearch__code {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 700;
    color: #8a8da8;
    letter-spacing: 0.02em;
}
.fp-epsearch__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    color: #2a2d44;
    line-height: 1.25;
}
.fp-epsearch__empty {
    padding: 10px 12px;
    font-size: 0.8rem;
    color: #686b87;
    text-align: center;
}

/* ── Season-page episode filter ────────────────────────────────────
   Inline filter box that sits to the right of the "Episodes" header on
   a season page; narrows the list below as the user types. */
.fp-epl__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 2px 6px;
}
.fp-epl__head-title { margin: 0; }
.fp-epfilter {
    position: relative;
    flex: 0 1 200px;
    min-width: 0;
}
.fp-epfilter__icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #9aa0bd;
    pointer-events: none;
}
.fp-epfilter__input {
    width: 100%;
    height: 30px;
    padding: 0 26px 0 34px;
    border: 1px solid #d8dce8;
    border-radius: 6px;
    background: #fff;
    color: #2a2d44;
    font-size: 0.78rem;
    line-height: 1.2;
    outline: none;
}
.fp-epfilter__input:focus {
    border-color: #2B988F;
    box-shadow: 0 0 0 2px rgba(43, 152, 143, 0.18);
}
.fp-epfilter__input::-webkit-search-cancel-button {
    appearance: none;
    width: 14px;
    height: 14px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239aa0bd"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>') center/contain no-repeat;
    cursor: pointer;
    opacity: 0.7;
}
.fp-epfilter__input::-webkit-search-cancel-button:hover { opacity: 1; }
@media (max-width: 480px) {
    .fp-epfilter { flex: 0 1 140px; }
}

.fp-cast__empty {
    padding: 12px 14px;
    font-size: 0.82rem;
    color: #686b87;
    text-align: center;
    background: #fafbfd;
    border-top: 1px solid #f0f2f7;
}

.fp-cast__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fp-cast__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid #f0f2f7;
}

.fp-cast__row:last-child { border-bottom: none; }
.fp-cast__row:nth-child(even) { background: #fafbfd; }
.fp-cast__row.is-collapsed    { display: none; }

.fp-cast__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef0f7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-cast__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fp-cast__avatar-placeholder {
    color: #b6b9cf;
    font-size: 22px;
}

/* Lazy cast load (TV picker): shimmer skeleton rows shown while the
   remaining cast — which can be thousands of rows — is built after
   "Show more". Reuses the existing fp-card-shimmer keyframes. */
.fp-cast__row--skeleton { pointer-events: none; }
.fp-cast__sk {
    display: block;
    background: linear-gradient(110deg, #eef0f7 8%, #f7f8fc 22%, #eef0f7 38%);
    background-size: 200% 100%;
    animation: fp-card-shimmer 1.2s linear infinite;
    border-radius: 4px;
}
.fp-cast__sk--avatar { width: 100%; height: 100%; border-radius: 50%; }
.fp-cast__sk--name   { width: 42%; height: 12px; margin-bottom: 6px; }
.fp-cast__sk--char   { width: 64%; height: 10px; }

.fp-cast__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fp-cast__char {
    font-size: 0.78rem;
    color: #686b87;
}
.fp-cast__char-more {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 4px;
    font: inherit;
    font-size: 0.78rem;
    color: #2B988F;
    cursor: pointer;
}
.fp-cast__char-more:hover { text-decoration: underline; }

.fp-cast-toggle {
    appearance: none;
    width: 100%;
    background: #fafbfd;
    border: none;
    border-top: 1px solid #e2e5ee;
    color: #4a4d6a;
    font: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 9px 14px;
    cursor: pointer;
    transition: color 120ms, background 120ms;
}

.fp-cast-toggle:hover { color: #2B988F; background: #f1f3f8; }

.fp-detail__plot {
    margin: 10px 0 12px;
    font-size: 0.85rem;
    color: #4a4d6a;
    line-height: 1.45;
}

/* Restriction guard-rail banner shown above the TV picker views when
   the currently-loaded show / season / episode doesn't fit the club's
   pick restrictions. Rendered by setRestrictionBanner() as
   <div class="tv-picker__restriction-banner">
       <span class="material-icons">block</span> Only picks from <strong>X</strong>…
   </div>
   With no CSS the icon glyph mashed straight into the text ('blockOnly
   picks…') — give it a soft warning surface and a separated icon col. */
.tv-picker__restriction-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0 14px;
    padding: 10px 14px;
    border: 1px solid #f4d3a0;
    border-radius: 10px;
    background: #fff7e8;
    color: #6b4a16;
    font-size: 0.88rem;
    line-height: 1.4;
    text-align: left;
}
.tv-picker__restriction-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.tv-picker__restriction-banner .material-icons {
    font-size: 1.2em;
    color: #c47c1f;
    flex: 0 0 auto;
    margin-top: 1px;
}
.tv-picker__restriction-banner strong { color: #4a3210; }
.tv-picker__restriction-dismiss {
    appearance: none;
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    margin: -2px -4px -2px 0;
    padding: 2px;
    line-height: 1;
    border-radius: 6px;
    color: #c47c1f;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tv-picker__restriction-dismiss:hover,
.tv-picker__restriction-dismiss:focus-visible {
    background: rgba(196, 124, 31, 0.14);
    color: #6b4a16;
    outline: none;
}
.tv-picker__restriction-dismiss .material-icons {
    font-size: 18px;
    color: inherit;
    margin-top: 0;
}

/* Drill-down hint shown in place of the show-level Select/Add button
   when the club's template picks at a finer grain (episode_week,
   season_month, etc). Rendered by embedded-pick-tv.js as
   <div class="fp-pick-hint"><span class="material-icons">…</span>text</div>. */
.fp-pick-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;   /* clear the "Open in IMDb" button above it */
    padding: 12px 14px;
    border: 1px dashed #b9c0d4;
    border-radius: 10px;
    background: #f4f6fb;
    color: #3a3f57;
    font-size: 0.9rem;
    line-height: 1.35;
    text-align: left;
}
.fp-pick-hint .material-icons {
    font-size: 1.25em;
    color: #2b988f;
    flex: 0 0 auto;
    margin-top: 1px;
}

/* The select button reuses the album picker's .btn.btn-add-queue styling
   so the film/album/book pickers feel identical. The confirmed "done"
   state matches the green look the album picker uses (set inline so it
   wins against any base .btn theme). */

/* Keep the action button label on a single line at any column width.
   The poster column shrinks to ~200px on mobile, where "Remove from
   Queue" otherwise wraps under the icon. A container query on the
   action stack scales the font + padding so the label stays one row
   from ~140px upward. */
.fp-detail__poster .album-action-buttons {
    container-type: inline-size;
    container-name: fpactions;
}
.fp-detail__poster .fp-select-btn,
.fp-detail__poster .fp-fav-btn,
.fp-detail__poster .fp-imdb-btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 10px;
    padding-right: 10px;
}
.fp-detail__poster .fp-select-btn .material-icons,
.fp-detail__poster .fp-fav-btn .material-icons,
.fp-detail__poster .fp-imdb-btn .material-icons {
    font-size: 1em !important;
    margin-right: 4px !important;
}
@container fpactions (max-width: 220px) {
    .fp-detail__poster .fp-select-btn,
    .fp-detail__poster .fp-fav-btn,
    .fp-detail__poster .fp-imdb-btn {
        font-size: 0.82rem;
        padding-left: 6px;
        padding-right: 6px;
    }
}
@container fpactions (max-width: 170px) {
    .fp-detail__poster .fp-select-btn,
    .fp-detail__poster .fp-fav-btn,
    .fp-detail__poster .fp-imdb-btn {
        font-size: 0.72rem;
    }
    .fp-detail__poster .fp-select-btn .material-icons,
    .fp-detail__poster .fp-fav-btn .material-icons,
    .fp-detail__poster .fp-imdb-btn .material-icons {
        margin-right: 2px !important;
    }
}

/* ── Person card (search results for director/actor) ───────────── */
.fp-card__poster--portrait {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
}

.fp-card__poster--portrait img {
    border-radius: 50%;
}

.fp-card--person .fp-card__poster {
    max-width: 120px;
    margin: 0 auto 8px;
}

.fp-card--person .fp-card__title {
    text-align: center;
    justify-content: center;
}

.fp-card--person .fp-card__year {
    text-align: center;
    /* Clamp the "known for" sub-line to 2 rows and reserve that height so a
       1-line entry aligns vertically with a 2-line entry on the next card. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 2.6em;
}

/* ── Person page (filmography view) ────────────────────────────── */
.fp-person__header {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 18px;
    padding: 4px 0 0;
    margin-bottom: 16px;
}

/* The body sits in the 1fr column. Grid items default to min-width:auto,
   which sizes the track to the content's intrinsic width — and the bio's
   collapsed -webkit-box reports a large intrinsic width, so without this
   the column (and its text) blows past the right edge on narrow phones.
   min-width:0 lets the track shrink so the bio wraps within the viewport. */
.fp-person__body {
    min-width: 0;
}

@media (max-width: 540px) {
    /* Keep the photo + bio side by side, but shrink the avatar so the
       name/bio get most of the width on a single-column phone layout. */
    .fp-person__header { grid-template-columns: 88px 1fr; gap: 12px; text-align: left; }
    .fp-person__photo  { max-width: 88px; margin: 0; }
    .fp-person__photo > .fp-card__noposter .material-icons { font-size: 36px; }
    .fp-person__imdb-badge { width: 22px; height: 22px; bottom: 2px; right: 2px; border-width: 2px; }
    .fp-person__name  { font-size: 1.05rem; }
    .fp-person__facts { font-size: 0.76rem; margin-bottom: 8px; }
    .fp-person__bio   { font-size: 0.72rem; }
}

.fp-person__photo {
    /* Anchor for the IMDb badge overlay. The image inside is already
       sized to fill via the rules below. align-self:start stops the
       grid cell from stretching to match the body column's height —
       otherwise the badge anchors to the bottom of the stretched
       cell, not the bottom of the 140×140 image. */
    position: relative;
    align-self: start;
}

/* Direct child only — must NOT reach the <img> inside .fp-person__imdb-badge,
   otherwise the badge's IMDb wordmark inherits this circle bg/aspect-ratio and
   renders as a pale crushed blob instead of the m-hero look. */
.fp-person__photo > img,
.fp-person__photo > .fp-card__noposter {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    background: #eef0f7;
    display: block;
}

/* IMDb badge — 28px yellow circle, white border, IMDb wordmark. That
   stylesheet isn't loaded on the /create wizard, so the visual rules are
   duplicated here. .fp-person__photo is a circular avatar, so the badge
   is nudged inward to ride the circle's lower-right edge (~45°) instead
   of floating in an empty corner the way a rectangular poster badge would. */
.fp-person__imdb-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #F5C518;
    border: 3px solid rgba(255,255,255,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    text-decoration: none;
    transition: transform .15s;
    z-index: 3;
    padding: 0;
}
.fp-person__imdb-badge img {
    width: 90%;
    height: auto;
    object-fit: contain;
    display: block;
    /* Hard reset so no ancestor img rule can leak in (matches m-hero). */
    aspect-ratio: auto;
    border-radius: 0;
    background: none;
}
.fp-person__imdb-badge:hover { transform: scale(1.1); }
/* Center the placeholder icon in the circle when no profile photo is
   available — without this the icon sits at the top-left corner. */
.fp-person__photo > .fp-card__noposter {
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp-person__photo > .fp-card__noposter .material-icons {
    font-size: 56px;
}

.fp-person__name {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1d2e;
}

.fp-person__facts {
    font-size: 0.82rem;
    color: #686b87;
    margin-bottom: 10px;
}

.fp-person__bio {
    font-size: 0.75rem;
    color: #4a4d6a;
    line-height: 1.5;
    position: relative;
    overflow-wrap: anywhere;
}

.fp-person__bio p { margin: 0 0 8px; }

/* Collapsed state — clamp to 5 lines with a soft fade at the bottom. */
.fp-person__bio--collapsed .fp-person__bio-text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fp-person__bio-toggle {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin-top: 4px;
    color: #2B988F;
    font: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    transition: color 120ms;
}

.fp-person__bio-toggle:hover { color: #1f6f68; }

.fp-person__section {
    margin: 4px 2px 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1d2e;
}

.fp-person__count {
    color: #8a8da8;
    font-weight: 500;
    font-size: 0.85rem;
}

/* ── Filmography slider ─────────────────────────────────────────── */
.fp-slider__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 2px 10px;
}

.fp-slider__toolbar .fp-person__section { margin: 0; }

.fp-slider__sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #686b87;
}

.fp-slider__sort-label { font-weight: 600; }

.fp-slider__sort-select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%234a4d6a'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 8px center;
    background-size: 12px;
    border: 1px solid #d8dbe8;
    color: #1a1d2e;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 5px 26px 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 120ms;
}

.fp-slider__sort-select:hover  { border-color: #2B988F; }
.fp-slider__sort-select:focus  { outline: none; border-color: #2B988F; box-shadow: 0 0 0 3px rgba(43,152,143,0.15); }

/* Sort + filter cluster sits as one group on the right of the toolbar. */
.fp-slider__controls {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Hide-restricted toggle — a small custom switch next to Sort. */
.fp-slider__filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #686b87;
    cursor: pointer;
    user-select: none;
}

.fp-slider__filter-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.fp-slider__filter-track {
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 18px;
    background: #d8dbe8;
    border-radius: 999px;
    transition: background 160ms ease;
}

.fp-slider__filter-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    transition: transform 160ms ease;
}

.fp-slider__filter-input:checked + .fp-slider__filter-track {
    background: #2B988F;
}

.fp-slider__filter-input:checked + .fp-slider__filter-track .fp-slider__filter-knob {
    transform: translateX(14px);
}

.fp-slider__filter-input:focus-visible + .fp-slider__filter-track {
    box-shadow: 0 0 0 3px rgba(43,152,143,0.25);
}

.fp-slider__filter-label {
    font-weight: 600;
}

.fp-slider__filter:hover .fp-slider__filter-input:not(:checked) + .fp-slider__filter-track {
    background: #c5cad8;
}

/* Mobile — drop the Sort + Hide-restricted cluster onto its own line
   beneath the "Filmography" title, and shrink the controls to match. */
@media (max-width: 540px) {
    .fp-slider__toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .fp-slider__controls { width: 100%; gap: 12px; }
    .fp-slider__sort,
    .fp-slider__filter      { font-size: 0.76rem; }
    .fp-slider__sort-select { font-size: 0.76rem; padding: 4px 24px 4px 8px; }
    .fp-slider__filter-track { width: 28px; height: 16px; }
    .fp-slider__filter-knob  { width: 12px; height: 12px; }
    .fp-slider__filter-input:checked + .fp-slider__filter-track .fp-slider__filter-knob {
        transform: translateX(12px);
    }
}

.fp-slider {
    position: relative;
}

.fp-slider__track {
    display: grid;
    grid-template-columns: repeat(var(--fp-cols, 5), minmax(0, 1fr));
    gap: 12px;
    overflow: hidden;          /* paged carousel — no scrollbar */
    padding: 4px 4px 8px;
}

.fp-slider__card {
    width: 100%;
    min-width: 0;
}

/* ── Person page: list view ─────────────────────────────────────────
   Alternative to the tile carousel above — the whole (sorted/filtered)
   filmography in one bordered, scrollable frame instead of paging through
   it. Row styling mirrors the IMDB Top 250 list rows for consistency. */
.fp-person__filmframe {
    border: 1px solid #e2e5ee;
    border-radius: 10px;
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
}
.fp-person__filmlist {
    padding: 4px;
}
.fp-person__list-row {
    appearance: none;
    width: 100%;
    background: none;
    border: 1px solid transparent;
    border-bottom: 1px solid #eef0f7;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
}
.fp-person__list-row:last-child { border-bottom: none; }
.fp-person__list-row:nth-child(even) { background: #fafbfd; }
.fp-person__list-row:hover {
    border-color: #2B988F;
    background: rgba(43, 152, 143, 0.04);
}
.fp-person__list-row.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.8);
}
.fp-person__list-row.is-disabled:hover {
    border-color: transparent;
    background: none;
}
.fp-person__list-thumb {
    flex: 0 0 auto;
    width: 38px;
    aspect-ratio: 2 / 3;
    border-radius: 4px;
    overflow: hidden;
    background: #eef0f7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp-person__list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-person__list-thumb .fp-card__noposter .material-icons { font-size: 18px; }
.fp-person__list-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fp-person__list-titlerow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.fp-person__list-title {
    flex: 0 1 auto;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1d2e;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-person__list-titlerow .fp-film-fav { flex: 0 0 auto; }
.fp-person__list-sub {
    font-size: 0.78rem;
    color: #6b7280;
}

/* Shimmer skeleton — applied to every card on the slider while we're
   resolving restriction eligibility for the current page. Cards reveal
   together once results come back, so the user never sees them slowly
   grey out one at a time. */
.fp-slider__track.is-checking .fp-slider__card {
    pointer-events: none;
    border-color: transparent;
    background: transparent;
}
.fp-slider__track.is-checking .fp-slider__card .fp-card__poster {
    background: linear-gradient(110deg, #eef0f7 8%, #f7f8fc 22%, #eef0f7 38%);
    background-size: 200% 100%;
    animation: fp-card-shimmer 1.2s linear infinite;
}
.fp-slider__track.is-checking .fp-slider__card .fp-card__poster img,
.fp-slider__track.is-checking .fp-slider__card .fp-card__poster .fp-card__noposter {
    visibility: hidden;
}
.fp-slider__track.is-checking .fp-slider__card .fp-card__title,
.fp-slider__track.is-checking .fp-slider__card .fp-card__year {
    color: transparent;
    border-radius: 4px;
    background: linear-gradient(110deg, #eef0f7 8%, #f7f8fc 22%, #eef0f7 38%);
    background-size: 200% 100%;
    animation: fp-card-shimmer 1.2s linear infinite;
    margin-top: 6px;
}
@keyframes fp-card-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Ineligible filmography entries — kept visible for context, but greyed
   out and unclickable so the user can tell why they can't proceed. */
.fp-card.is-disabled,
.fp-oscar__card.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.8);
}
.fp-card.is-disabled:hover,
.fp-oscar__card.is-disabled:hover {
    transform: none;
    box-shadow: none;
    /* Cancel the teal hover wash for the Oscar grid card too. */
    border-color: transparent;
    background: none;
}

/* Reserve space for 2 lines of title and 2 lines of year/character so cards
   line up across the slider regardless of how long any single label is. */
.fp-slider__card .fp-card__title {
    min-height: 2.5em;
}

.fp-slider__card .fp-card__year {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 2.6em;
}

.fp-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #d8dbe8;
    box-shadow: 0 2px 8px rgba(26,29,46,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: opacity 120ms, border-color 120ms, color 120ms;
    color: #4a4d6a;
}

.fp-slider__nav:hover         { border-color: #2B988F; color: #2B988F; }
.fp-slider__nav.is-disabled   { opacity: 0.35; pointer-events: none; }
.fp-slider__nav--prev         { left: -8px; }
.fp-slider__nav--next         { right: -8px; }
.fp-slider__nav .material-icons { font-size: 22px; }

@media (max-width: 540px) {
    .fp-slider__nav--prev { left: 2px; }
    .fp-slider__nav--next { right: 2px; }
    .fp-slider__nav { width: 30px; height: 30px; }
    .fp-slider__nav .material-icons { font-size: 18px; }
    /* Tighter grid + smaller labels so 3 cards fit comfortably on phones. */
    .fp-slider__track { gap: 8px; padding: 4px 2px 8px; }
    .fp-slider__card .fp-card__title { font-size: 0.72rem; }
    .fp-slider__card .fp-card__year  { font-size: 0.68rem; }
}

/* =========================
   FILM MODAL — ADD TO FAVORITES BUTTON
   The "Add to Favorites" / "Remove Favorite" toggle on the film detail
   page sits in a d-grid column under the poster, so it stretches to the
   poster width. Keep the label on a single line and let it shrink on
   narrow viewports instead of wrapping.
========================= */
.fp-fav-btn {
    white-space: nowrap;
    min-width: 0;
}
@media (max-width: 480px) {
    .fp-fav-btn {
        font-size: 0.78rem;
        padding: 0.4rem 0.7rem;
        gap: 0.25rem;
    }
    .fp-fav-btn .material-icons {
        font-size: 0.95em;
    }
}

/* ── Oscar films browser view ─────────────────────────────────────── */
.film-picker__view--oscar { padding-top: 4px; }
.fp-oscar__header { margin: 4px 0 14px; }
.fp-oscar__title {
    font-size: 1.25rem; font-weight: 700;
    margin: 0 0 4px;
    color: #0c3530;
    letter-spacing: -0.01em;
}
.fp-oscar__subtitle {
    font-size: 0.95rem; font-weight: 600;
    color: #2B988F;
    margin: 0;
}
/* Subtitle row: category + verb on the left, the two restriction
   switches floated right on the same baseline. Wraps under the
   subtitle on narrow viewports so the switches drop in a tidy stack
   rather than pushing horizontally past the edge. */
.fp-oscar__subtitle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.fp-oscar__subtitle-switches {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.fp-oscar__subtitle-switches > div:empty { display: none; }

/* Bottom-align the filter groups so the dropdown, slider track, and
   "Hide nominees" toggle land on the same baseline. The years group
   is taller (it has the green min/max labels above the track); the
   sibling groups grow visual whitespace above their own caps label
   instead of being pinned to the top of the row. */
.fp-oscar__filters {
    display: flex; flex-wrap: wrap; gap: 14px;
    align-items: flex-end;
    margin-bottom: 16px;
}
.fp-oscar__filter-group {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.fp-oscar__filter-label {
    font-size: 0.7rem; color: #6b7280; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.fp-oscar__select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b7280' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 1px solid #d1d5db;
    color: #111827;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 28px 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    min-width: 200px;
    line-height: 1.2;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.fp-oscar__select:hover { border-color: #9ca3af; }
.fp-oscar__select:focus { outline: none; border-color: #2B988F; box-shadow: 0 0 0 3px rgba(43,152,143,0.18); }
.fp-oscar__select option[disabled] { color: #9ca3af; }

/* Year slider grows to fill whatever space is left in the filter row
   after the category and sort dropdowns lay out. */
.fp-oscar__filter-group[data-oscar-filter-group="years"] {
    flex: 1 1 160px;
    min-width: 160px;
}
.fp-oscar__year-slider { width: 100%; padding-top: 2px; }
.fp-oscar__year-labels {
    display: flex; justify-content: space-between;
    font-size: 0.78rem; font-weight: 600;
    color: #2B988F;
    margin-bottom: 6px;
}
.fp-oscar__year-track {
    position: relative;
    height: 24px;
    margin: 4px 0;
}
.fp-oscar__year-track::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 4px;
    transform: translateY(-50%);
    background: #e2e8f0;
    border-radius: 2px;
}
.fp-oscar__year-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: #2B988F;
    border-radius: 2px;
    pointer-events: none;
}
.fp-oscar__year-range {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    margin: 0;
}
.fp-oscar__year-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2B988F;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    cursor: pointer;
    pointer-events: all;
    transition: transform .12s ease;
}
.fp-oscar__year-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.fp-oscar__year-range::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2B988F;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    cursor: pointer;
    pointer-events: all;
}
.fp-oscar__year-range:disabled::-webkit-slider-thumb { border-color: #cbd5e1; cursor: not-allowed; }
.fp-oscar__year-range:disabled::-moz-range-thumb    { border-color: #cbd5e1; cursor: not-allowed; }

.fp-oscar__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
}
/* Match the home-row .fp-card aesthetic — transparent border that
   turns teal on hover, faint teal wash, and a subtle lift. The
   poster itself no longer carries the hover transform; the whole
   card does. */
.fp-oscar__card {
    appearance: none;
    background: none;
    border: 1px solid transparent;
    padding: 6px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    display: flex; flex-direction: column;
    transition: border-color 120ms, transform 120ms, background 120ms;
}
.fp-oscar__card:hover {
    border-color: #2B988F;
    background: rgba(43,152,143,0.04);
    transform: translateY(-1px);
}
.fp-oscar__poster {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: #eef0f7;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
}
/* Winning films get a gold border around the whole poster to match the
   WINNER banner. box-sizing:border-box so the 2px border doesn't grow the
   card and misalign the grid. */
.fp-oscar__card.is-win .fp-oscar__poster {
    box-sizing: border-box;
    border: 2px solid #d4af37;
}
/* Translucent yellow "WINNER" banner across the top of winning film
   posters. Sits inside the .fp-oscar__poster (which clips to its
   rounded corners) so it follows the poster's border-radius. */
.fp-oscar__win-banner {
    position: absolute;
    left: 0; right: 0; top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(212, 160, 23, 0.78);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
    z-index: 1;
}
.fp-oscar__win-banner .material-icons {
    font-size: 14px !important;
    line-height: 1;
    color: inherit;
}
.fp-oscar__win-banner-text {
    line-height: 1;
}
.fp-oscar__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-oscar__poster > .material-icons { color: #b6b9cf; font-size: 36px; }
.fp-oscar__title-line {
    font-size: 0.82rem; font-weight: 600; color: #1a1d2e;
    line-height: 1.25;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.fp-oscar__title-line .fp-card__title-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.fp-oscar__meta {
    font-size: 0.72rem; color: #8a8da8; line-height: 1.3;
    margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Nominee credit beneath the category — slightly bolder than the
   category meta so the eye reads "who" before "which award". */
.fp-oscar__nominee {
    font-size: 0.74rem; font-weight: 600;
    color: #2B988F;
    line-height: 1.25;
    margin-top: 1px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Nominee credit linked to the person's page (acting / directing
   categories in the Oscar browser). Inherits the teal nominee style;
   just adds the link affordance. */
.fp-oscar__nominee-link {
    cursor: pointer;
}
.fp-oscar__nominee-link:hover,
.fp-oscar__nominee-link:focus-visible {
    color: #20706a;
    text-decoration: underline;
    outline: none;
}

.fp-oscar__empty {
    text-align: center; color: #6b7280; padding: 28px 0;
}
.fp-oscar__empty .material-icons { font-size: 32px; color: #9ca3af; }
.fp-oscar__footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 16px;
}
.fp-oscar__footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fp-oscar__loadmore {
    appearance: none; font: inherit; cursor: pointer;
    background: #0c3530; color: #fff; font-weight: 700; font-size: 0.86rem;
    border: 0; border-radius: 8px; padding: 8px 18px;
    transition: background 0.12s ease;
}
.fp-oscar__loadmore:hover  { background: #1b6b62; }
.fp-oscar__loadmore[disabled] { opacity: 0.6; cursor: not-allowed; }
/* "Show all" — secondary action, outlined treatment so it reads
   as a sibling of Load more without competing for attention. */
.fp-oscar__showall {
    appearance: none; font: inherit; cursor: pointer;
    background: transparent; color: #0c3530;
    font-weight: 700; font-size: 0.86rem;
    border: 1px solid #0c3530; border-radius: 8px;
    padding: 7px 16px;
    transition: background 0.12s ease, color 0.12s ease;
}
.fp-oscar__showall:hover  { background: #0c3530; color: #fff; }
.fp-oscar__showall[disabled] { opacity: 0.6; cursor: not-allowed; }
.fp-oscar__count { font-variant-numeric: tabular-nums; }

/* ---- IMDB Top 250 full-list page -------------------------------------
   Reachable via the "Show all" link on the home "IMDB Top 250" row.
   Header mirrors the Oscar browser; the grid reuses the .fp-card shape
   with a corner rank badge and an IMDb-yellow rating chip. */
.fp-imdb__header { margin: 4px 0 16px; }
.fp-imdb__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.fp-imdb__title {
    font-size: 1.25rem; font-weight: 700;
    margin: 0 0 4px;
    color: #0c3530;
    letter-spacing: -0.01em;
}
/* Card / list view toggle — segmented control, teal active fill. */
.fp-imdb__toggle {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.fp-imdb__toggle-btn {
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    color: #6b7280;
    transition: background 0.12s ease, color 0.12s ease;
}
.fp-imdb__toggle-btn + .fp-imdb__toggle-btn { border-left: 1px solid #e5e7eb; }
.fp-imdb__toggle-btn .material-icons { font-size: 19px; }
.fp-imdb__toggle-btn:hover { background: rgba(43,152,143,0.08); color: #2B988F; }
.fp-imdb__toggle-btn.is-active {
    background: #2B988F;
    color: #fff;
}
.fp-imdb__subtitle {
    font-size: 0.9rem; font-weight: 600;
    color: #2B988F;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.fp-imdb__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
}
.fp-imdb__poster { position: relative; }
/* Ranked badge tucked into the poster's top-left corner. */
.fp-imdb__rank {
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    min-width: 26px;
    padding: 2px 7px;
    background: rgba(12, 53, 48, 0.86);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    border-bottom-right-radius: 8px;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
}
.fp-imdb__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.fp-imdb__rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #b8860b;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.fp-imdb__rating .material-icons {
    font-size: 14px;
    color: #f5c518;
}
.fp-imdb__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    color: #9ca3af;
    text-align: center;
}
.fp-imdb__empty .material-icons { font-size: 40px; }

/* List view — single-column stack of compact rows. Reuses the shared
   #…-imdb-grid container; --list flips it from the poster grid to a
   block flow so the toggle never reflows the surrounding layout. */
.fp-imdb__grid--list {
    display: block;
}
.fp-imdb__list-row {
    appearance: none;
    width: 100%;
    background: none;
    border: 1px solid transparent;
    border-bottom: 1px solid #eef0f7;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    transition: border-color 120ms, background 120ms;
}
.fp-imdb__list-row:hover {
    border-color: #2B988F;
    background: rgba(43,152,143,0.04);
}
.fp-imdb__list-rank {
    flex: 0 0 auto;
    min-width: 28px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0c3530;
    font-variant-numeric: tabular-nums;
}
.fp-imdb__list-thumb {
    flex: 0 0 auto;
    width: 38px;
    aspect-ratio: 2 / 3;
    border-radius: 4px;
    overflow: hidden;
    background: #eef0f7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp-imdb__list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Inline Add-to-Queue control on Top 250 list rows. The card view uses the
   absolute .fp-epl__add pill on the poster; in the row it sits static on the
   right (the 38px thumb is too small), always showing its label.
   States: translucent idle  →  solid green "Added"  →  red "Remove" on hover. */
.fp-imdb__list-row .fp-imdb__add--inline {
    position: static;
    flex: 0 0 auto;
    max-width: none;
    height: 24px;
    padding: 0 10px;
    margin-left: 6px;
    box-shadow: none;
    background: rgba(43, 152, 143, 0.14);   /* translucent until added */
    color: #1f6f68;
}
.fp-imdb__list-row .fp-imdb__add--inline .fp-epl__add-label { opacity: 1; }
.fp-imdb__list-row .fp-imdb__add--inline:hover {
    background: rgba(43, 152, 143, 0.24);
    color: #155b54;
}

/* Added / Remove states — shared by the card poster pill AND the list button
   (both carry data-imdb-add). Added is solid green with a check; hovering an
   added item turns it red and swaps to "Remove from queue". */
.fp-epl__add[data-imdb-add].fp-epl__add--done {
    background: #2B988F;
    color: #fff;
    cursor: pointer;
}
.fp-epl__add[data-imdb-add].fp-epl__add--done:hover {
    background: #d64550;
    color: #fff;
    max-width: 110px;       /* room for "Remove" when the card pill expands */
}
/* Swap the ✓ Added vs ⊖ Remove content on hover of an added item. */
.fp-epl__add[data-imdb-add] .imdb-add__i-remove,
.fp-epl__add[data-imdb-add] .imdb-add__l-remove { display: none; }
.fp-epl__add[data-imdb-add].fp-epl__add--done:hover .imdb-add__i-added,
.fp-epl__add[data-imdb-add].fp-epl__add--done:hover .imdb-add__l-added { display: none; }
.fp-epl__add[data-imdb-add].fp-epl__add--done:hover .imdb-add__i-remove { display: inline-flex; }
.fp-epl__add[data-imdb-add].fp-epl__add--done:hover .imdb-add__l-remove { display: inline; }
.fp-imdb__list-thumb .fp-card__noposter .material-icons { font-size: 18px; }
.fp-imdb__list-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fp-imdb__list-titlerow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.fp-imdb__list-title {
    flex: 0 1 auto;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1d2e;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-imdb__list-titlerow .fp-film-fav { flex: 0 0 auto; }
/* TV Top 250 reuses .fp-title-fav for the inline show heart. Cap its size in
   the card/list contexts — its base (14px, no !important) loses to Material
   Icons' 24px there, so it'd render huge. Match the film card heart (12px). */
.fp-imdb__card .fp-title-fav,
.fp-imdb__list-titlerow .fp-title-fav,
.tv-picker .fp-card__title .fp-title-fav {
    font-size: 12px !important;
    margin-top: 1px;
    flex: 0 0 auto;
}
.fp-imdb__list-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #6b7280;
    min-width: 0;
}
.fp-imdb__list-genre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-imdb__list-caret {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: #c0c4d4;
}
.fp-imdb__list-caret .material-icons { font-size: 22px; }
.fp-imdb__list-row:hover .fp-imdb__list-caret { color: #2B988F; }

/* "Open in IMDb" button — same pill shape as the Select/Favorite
   buttons it sits with; IMDb-yellow with dark text. */
.fp-imdb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: #f5c518 !important;
    color: #1a1d2e !important;
    font-weight: 600;
    font-size: 0.9rem;
    border: none !important;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(245, 197, 24, 0.35);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.fp-imdb-btn .material-icons {
    font-size: 1.1em;
    line-height: 1;
    transition: transform 0.15s ease;
}
.fp-imdb-btn:hover,
.fp-imdb-btn:focus-visible {
    background: #e0b314 !important;
    color: #1a1d2e !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(245, 197, 24, 0.42);
    outline: none;
}
.fp-imdb-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(245, 197, 24, 0.30);
}
/* Same bounce the favorite-modal button uses (fav-heart-pop is defined
   in embedded-pick-album.css, which is always loaded alongside this
   stylesheet inside the film picker). */
.fp-imdb-btn:hover .material-icons,
.fp-imdb-btn:active .material-icons {
    animation: fav-heart-pop 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* Academy Awards list on the film detail page (under the action buttons).
   Plain list on white background — winners darker, nominations softer. */
.fp-oscars {
    margin-top: 14px;
}
/* Head is a button now — click to collapse/expand the awards list.
   The caret rotates 180° when collapsed. Reset the native button
   chrome so it still reads as the existing caps-label header. */
.fp-oscars__head {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 6px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.fp-oscars__head-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.fp-oscars__head-text {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #686b87;
}
.fp-oscars__head:hover .fp-oscars__head-text { color: #2B988F; }
.fp-oscars__head:focus-visible { outline: none; }
.fp-oscars__head:focus-visible .fp-oscars__head-text { color: #2B988F; }
/* Collapsed-state summary ("2 wins, 5 nominations") — hidden once the
   list is expanded, since the rows themselves show that detail then. */
.fp-oscars__head-summary {
    display: none;
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #8a8da8;
}
.fp-oscars.is-collapsed .fp-oscars__head-summary { display: block; }
.fp-oscars__head-caret {
    font-size: 18px !important;
    color: #b9bcd0;
    transition: transform 160ms ease, color 120ms;
    flex: 0 0 auto;
}
.fp-oscars__head:hover .fp-oscars__head-caret { color: #2B988F; }
.fp-oscars.is-collapsed .fp-oscars__head-caret { transform: rotate(-90deg); }
.fp-oscars.is-collapsed .fp-oscars__list      { display: none; }
.fp-oscars__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fp-oscars__row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.72rem;
    line-height: 1.3;
    color: #1a1d2e;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
    margin-left: -4px;
    transition: background 0.12s ease, color 0.12s ease;
}
.fp-oscars__row:hover,
.fp-oscars__row:focus-visible {
    background: rgba(43, 152, 143, 0.08);
    color: #20706a;
    outline: none;
}
.fp-oscars__icon {
    font-size: 14px !important;
    color: #b9bcd0;
    flex-shrink: 0;
}
.fp-oscars__row.is-win .fp-oscars__icon {
    color: #d4a017;
}
/* Two-line row body: category on top, nominee credit beneath.
   min-width:0 lets the nominee span shrink + ellipsize when the
   credit is long (comma-stacked Best Picture producer lists, etc.). */
.fp-oscars__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
}
.fp-oscars__label {
    /* Inherits row color so the hover/win states still apply. */
}
.fp-oscars__nominee {
    color: #8a8da8;
    font-size: 0.68rem;
    font-weight: 400;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fp-oscars__row:hover .fp-oscars__nominee,
.fp-oscars__row:focus-visible .fp-oscars__nominee {
    color: inherit;
}
/* Nominee credit rendered as a link to the person's page (acting /
   directing categories). Looks like the nominee text but teal +
   clickable; stays on one line and ellipsizes like the span version. */
.fp-oscars__nominee-link {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin-top: 1px;
    max-width: 100%;
    display: block;
    text-align: left;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.25;
    color: #2B988F;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fp-oscars__nominee-link:hover,
.fp-oscars__nominee-link:focus-visible {
    color: #20706a;
    text-decoration: underline;
    outline: none;
}
/* Bump the trophy icon down a hair so it visually sits with the
   category text rather than floating above it. */
.fp-oscars__row .fp-oscars__icon {
    margin-top: 1px;
}
/* Person page Oscars block: film title link shows "(year)" — a touch
   lighter than the title itself so it reads as metadata, not part of
   the name. */
.fp-oscars__film-year {
    color: #b9bcd0;
    font-weight: 400;
}
.fp-oscars__row:hover .fp-oscars__film-year,
.fp-oscars__row:focus-visible .fp-oscars__film-year {
    color: inherit;
    opacity: 0.75;
}

/* Oscars launcher pill — gold trophy icon to match the gold Grammys
   pill on the music side (.mx-grammy-launch-pill). */
.fp-oscars-launch-pill .material-icons {
    color: #c79b1f;
}

/* ── Oscar films pager: numbered pages with prev/next chevrons,
   mirrors the Grammy pager built for the music wizard. ─────────── */
.fp-oscar-pager.d-none { display: none; }
.fp-oscar-pager__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 4px;
}
.fp-oscar-pager__item {
    display: inline-flex; align-items: center; justify-content: center;
}
.fp-oscar-pager__item--gap {
    min-width: 28px; height: 28px;
    color: #6b7280; font-size: 0.85rem; font-weight: 600;
    user-select: none;
}
.fp-oscar-pager__btn {
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 8px;
    background: #fff; color: #374151;
    border: 1px solid #e5e7eb; border-radius: 6px;
    font: inherit; font-size: 0.8rem; font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.fp-oscar-pager__btn:hover:not(.is-active):not(:disabled) {
    background: #f6f8fb; color: #0c3530; border-color: #c3c7cf;
}
.fp-oscar-pager__btn.is-active {
    background: #0c3530; color: #fff; border-color: #0c3530;
    cursor: default;
}
.fp-oscar-pager__btn:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(12, 53, 48, 0.15);
}
.fp-oscar-pager__btn--nav { padding: 0; }
.fp-oscar-pager__btn--nav .material-icons { font-size: 18px; line-height: 1; }
.fp-oscar-pager__btn:disabled {
    color: #c3c7cf; border-color: #eef0f3; background: #f9fafb;
    cursor: not-allowed;
}

/* ── Film picker autocomplete dropdown — mirrors .queue-ac in the
   music picker. Floats below the search input; row click → film
   detail (film mode) or person page (director/actor mode). ────── */
.film-picker .custom-album-picker__search-bar { position: relative; }
.fp-ac {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #F2F4F8;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    max-height: 360px;
    overflow-y: auto;
    z-index: 1000;
}
.fp-ac.d-none { display: none; }
.fp-ac__row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer;
}
.fp-ac__row:hover,
.fp-ac__row.active { background: #E5F2F1; }
.fp-ac__row img {
    width: 36px; height: 54px;
    border-radius: 4px; object-fit: cover;
    background: #ddd; flex: 0 0 auto;
}
.fp-ac__row-placeholder {
    width: 36px; height: 54px;
    border-radius: 4px; background: #ddd;
    color: #686b87;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; flex: 0 0 auto;
}
.fp-ac__info { display: flex; flex-direction: column; min-width: 0; }
.fp-ac__title {
    font-size: 0.92rem; font-weight: 600; color: #1a1d2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-ac__sub {
    font-size: 0.75rem; color: #686b87; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-ac__loading,
.fp-ac__empty {
    padding: 12px 14px; font-size: 0.85rem; color: #686b87;
}