/* 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;
    /* Desktop-only in practice: .album-type-switch is display:contents
       under 992px, so this gap never applies there — the search bar’s own
       8px/5px gap spaces the wrapped rows instead. */
    gap: 4px;
}

.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;
    /* 8px, matching the joined search control — the type half of that
       control is an .fp-type-dd__toggle too, so this is also what keeps the
       seam square. The Browse toggle picks it up for free. */
    border-radius: 8px;
    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;
}

/* Browse dropdown toggle stays highlighted while its view (Favorites,
   Awards, Top 250) is open — same treatment as the type toggle's open
   state, just triggered by the active view instead of the menu itself. */
.fp-type-dd__toggle.active {
    border-color: #2B988F;
    color: #2B988F;
    background: #f6fbfa;
}
.fp-type-dd__toggle.active .fp-type-dd__caret { color: #2B988F; }

.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; }
}

/* The search input + type dropdown are joined into one control for every
   picker by embedded-pick-album.css (search for "joined into one control").
   This file used to carry a film-only copy of those rules; it went away when
   the same treatment rolled out to music, books and television. */

/* Random (dice) — a bare icon, deliberately not a pill like the type/browse
   dropdowns next to it: no resting background, just a faint hover wash so
   the row doesn't read as three identical white circles. */
.fp-dice-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: none;
    border: none;
    border-radius: 50%;
    color: #2B988F;
    cursor: pointer;
    transition: background 120ms, transform 120ms;
}
.fp-dice-btn .material-icons { font-size: 22px; }
.fp-dice-btn:hover {
    background: rgba(43, 152, 143, 0.1);
    transform: translateY(-1px);
}
.fp-dice-btn:active { transform: translateY(0); }

/* Dice-roll flourish on click — a quick tumble, independent of (and much
   faster than) the actual random-pick fetch, so the button gives instant
   feedback the moment it's tapped instead of just sitting there while the
   network round-trip (which can retry several times against restrictions)
   plays out. Re-triggered via classList remove/reflow/add, same pattern
   as the film-card heart/eye "pop". */
@keyframes fp-dice-roll {
    0%   { transform: rotate(0deg) scale(1); }
    15%  { transform: rotate(-28deg) scale(1.12); }
    35%  { transform: rotate(22deg) scale(1.15); }
    55%  { transform: rotate(-16deg) scale(1.1); }
    75%  { transform: rotate(10deg) scale(1.04); }
    100% { transform: rotate(0deg) scale(1); }
}
.fp-dice-btn.is-rolling .material-icons {
    display: inline-block;
    animation: fp-dice-roll 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}


.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;
}

/* Card grids across every picker never drop below 3 columns: the track
   minimum is the card's target width OR a third of the row, whichever is
   smaller. 100px + 14px gap matches homeRowCols() in embedded-pick-film.js,
   so the film home rows, search results, Oscars and IMDB Top 250 all
   re-flow at the same widths. */
.film-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100px, calc((100% - 28px) / 3)), 1fr));
    gap: 14px;
}

/* ── Card grids ─────────────────────────────────────────────────────
   The film home page is the reference for what a film tile looks like, and
   the full-page grids that show films — Popular, Watchlist/Favorites,
   Academy Awards, IMDB Top 250 and Genre — draw that same card one size
   down: applyGridCols() in embedded-pick-film.js sets --fp-cols from
   gridPageCols(), which is homeRowCols() + 1 (capped at 6), so a width that
   fits 5 across on home fits 6 here. Re-set on resize.
   Only the columns are declared — each grid keeps its own display so the
   Top 250's list mode can still flip itself to a block flow. */
.film-picker .fp-grid--cards {
    grid-template-columns: repeat(var(--fp-cols, 6), minmax(0, 1fr));
}
/* …and the same title treatment: 3 lines before it truncates, with the
   release year flowing inline in muted parens at the end. The Browse
   overview sliders draw the same film card, so they're in on it too. */
.film-picker .fp-grid--cards .fp-card__title-text,
.film-picker .rtBrowse__row .fp-card__title-text {
    -webkit-line-clamp: 3;
}
.film-picker .fp-grid--cards .fp-card__title-year,
.film-picker .rtBrowse__row .fp-card__title-year {
    white-space: nowrap;
    color: #6b6e85;
}

/* ── Empty-state placeholder ────────────────────────────────────────
   Shared by every empty list in the picker (Watchlist, Favorites and the
   Browse drill-downs): a soft ringed glyph, a headline, and one line of
   copy naming the control that fills the list. */
.film-picker .fp-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 46px 24px 40px;
}
.film-picker .fp-empty__icon {
    font-size: 30px !important;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #2B988F;
    background: rgba(43, 152, 143, 0.08);
    border: 1px solid rgba(43, 152, 143, 0.18);
    margin-bottom: 16px;
}
.film-picker .fp-empty__title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1d2e;
    margin-bottom: 6px;
}
.film-picker .fp-empty__body {
    font-size: 0.84rem;
    color: #686b87;
    line-height: 1.65;
    max-width: 340px;
}
.film-picker .fp-empty__link {
    color: #2B988F;
    font-weight: 600;
    text-decoration: none;
}
.film-picker .fp-empty__link:hover { text-decoration: underline; }
/* Inline glyphs in the copy — the same icons, in the same colours, as the
   card controls the sentence points at, so "tap the eye" is unmistakable. */
.film-picker .fp-empty__glyph {
    font-size: 15px !important;
    vertical-align: -3px;
}
.film-picker .fp-empty__glyph--heart { color: #ff4d8d; }
.film-picker .fp-empty__glyph--eye   { color: #16a34a; }

/* ── 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;
}

/* ── Poster cards on a phone: favourite / watchlist as poster halves ──
   The inline title-row heart and eye are 12px — fine with a mouse, not with
   a thumb. On phones they're swapped for two targets across the bottom of
   the poster: left half favourites, right half adds to the watchlist. Each
   half IS the control the delegated handlers already look for, so state and
   repainting come for free.
   Scoped to .film-picker, which both pickers' roots carry; which cards get
   the strip is decided in the markup (the TV picker emits it on home cards,
   the film picker on every card that shows a poster). */
.film-picker .tvc-acts { display: none; }

@media (max-width: 575.98px) {
    .film-picker .fp-card__poster .tvc-acts {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 20%;
        display: flex;
        align-items: stretch;
        border-radius: 0 0 8px 8px;
        overflow: hidden;
        /* Each half carries its own translucent panel, so the strip itself
           stays transparent and only the poster's bottom fifth is covered. */
        background: transparent;
    }
    /* Beats .fp-title-fav / .fp-film-watch, which set their own 12px
       font-size with !important and a pill shape. */
    .film-picker .fp-card__poster .tvc-act {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        font-size: 18px !important;
        line-height: 1 !important;
        color: #fff;
        background: rgba(15, 18, 30, 0.55);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .12s ease, background-color .12s ease;
    }
    .film-picker .fp-card__poster .tvc-act + .tvc-act {
        border-left: 1px solid rgba(255, 255, 255, 0.18);
    }
    /* Held state — the only feedback a touch device gets. */
    .film-picker .fp-card__poster .tvc-act:active {
        background: rgba(15, 18, 30, 0.78);
    }
    .film-picker .fp-card__poster .tvc-act--fav.favorited { color: #ff4d8d; }
    .film-picker .fp-card__poster .tvc-act--watch.on-watchlist { color: #4ade80; }
    /* One set or the other, never both: any card carrying the strip hides
       its inline title-row icons. :has() keeps this to cards that actually
       have one, so the Top 250 list rows and person chips are untouched. */
    .film-picker .fp-card:has(.tvc-acts) .fp-card__title .fp-title-fav,
    .film-picker .fp-card:has(.tvc-acts) .fp-card__title .tv-watch-eye,
    .film-picker .fp-card:has(.tvc-acts) .fp-card__title .fp-film-fav,
    .film-picker .fp-card:has(.tvc-acts) .fp-card__title .fp-film-watch {
        display: none;
    }
}

/* ── Film picker above phone width: the same strip, album-picker style ──
   Embedded and in the explorer modal, film posters carry the favourite /
   watchlist halves at every width, sized and behaving like the album
   picker's cover strip (.mx-home__acts in embedded-pick-album-home.css): a
   shallow bar, 16px glyphs, and hover that brightens the half under the
   pointer while the other steps back. :not(.tv-picker) because the TV
   picker's root carries .film-picker too and keeps its strip phones-only. */
@media (min-width: 576px) {
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-acts {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 22%;
        min-height: 24px;
        max-height: 32px;
        display: flex;
        align-items: stretch;
        border-radius: 0 0 8px 8px;
        overflow: hidden;
        background: transparent;
    }
    /* !important where .fp-film-fav / .fp-film-watch set their own pill
       shape, 12px size and a scale-on-hover that would stretch the panel. */
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-act {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        font-size: 16px !important;
        line-height: 1 !important;
        color: #fff;
        background: rgba(15, 18, 30, 0.55);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
        cursor: pointer;
        user-select: none;
        transform: none !important;
        animation: none !important;
        transition: font-size .18s cubic-bezier(.34, 1.56, .64, 1),
                    color .12s ease, background-color .12s ease, opacity .12s ease;
    }
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-act + .tvc-act {
        border-left: 1px solid rgba(255, 255, 255, 0.18);
    }
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-act:active {
        background: rgba(15, 18, 30, 0.9);
        font-size: 14px !important;
    }
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-act:focus-visible {
        outline: 2px solid rgba(255, 255, 255, .7);
        outline-offset: -3px;
    }
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-act--fav.favorited { color: #ff4d8d; }
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-act--watch.on-watchlist { color: #4ade80; }

    /* One set or the other, never both. */
    .film-picker:not(.tv-picker) .fp-card:has(.tvc-acts) .fp-card__title .fp-film-fav,
    .film-picker:not(.tv-picker) .fp-card:has(.tvc-acts) .fp-card__title .fp-film-watch {
        display: none;
    }
}
/* Pointer devices only: on a touch screen :hover sticks after a tap. */
@media (min-width: 576px) and (hover: hover) {
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-act:hover {
        background: rgba(15, 18, 30, 0.8);
        font-size: 20px !important;
    }
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-acts:hover .tvc-act:not(:hover) { opacity: .55; }
    /* A not-yet-on glyph previews the colour it will turn. */
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-act--fav:not(.favorited):hover { color: #ff9cc0; }
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-act--watch:not(.on-watchlist):hover { color: #86efac; }
}
@media (min-width: 576px) and (prefers-reduced-motion: reduce) {
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-act { transition: none; }
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-act:hover,
    .film-picker:not(.tv-picker) .fp-card__poster .tvc-act:active { font-size: 16px !important; }
}

/* 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. */
/* Full label on tablet/desktop, shorter one on mobile. The film detail's
   action stack uses this for Remove from Queue ("Dequeue"), Favorite
   ("Favorite"), Watchlist ("Watchlist") and IMDb ("IMDb") — the column is
   120px wide at this size. splitLabel() in embedded-pick-film.js emits
   both 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 detail's left (poster) column to use the wider explorer
   modal instead of squishing the poster. Every picker gets the same 240px
   track — the film pages, and the TV show / season / episode pages
   (.fp-detail--cols, .film-picker__detail--ep), which used to be left at the
   base 160px and read noticeably smaller beside the film picker. Desktop only
   (992px+); the ≤540px stacked layouts below keep their own column tracks. */
@media (min-width: 992px) {
    .film-picker__detail {
        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 .fp-detail__poster .album-action-buttons,
    .film-picker__detail .fp-epd__aside .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;
}

/* ── Mobile search bar: [back][home][browse][random] / [input][type] ──
   Both rows' controls are already promoted to direct children of the search
   bar by the shared reflow in embedded-pick-album.css, so this only has to
   assign the film picker's own two controls to a row and renumber the line
   break. !important + a .film-picker prefix because the shared rules use
   !important on the row-2 orders. */
@media (max-width: 991.98px) {
    /* Row 1 — back(1) home(2) come from the shared rules; the dice sits
       with them as the Random pill, then Browse takes the rest of the row. */
    .film-picker .custom-album-picker__search-bar .fp-dice-btn {
        order: 3 !important;
        flex: 0 0 auto !important;
    }
    .film-picker .custom-album-picker__search-bar .fp-type-dd[data-browse-dd] {
        order: 4 !important;
        flex: 0 0 auto !important;
        /* Browse lives in row 1 here, not beside the joined search control,
           so it doesn't want the desktop spacer margin. */
        margin-left: 0 !important;
    }
    /* The line break moves after the dice (order 5). The shared rules put the
       input at 5 too, and equal order falls back to DOM order — which left it
       ahead of the break, on row 1. Push it to 6. */
    .film-picker .custom-album-picker__search-bar::after { order: 5; }
    .film-picker .custom-album-picker__search-bar .custom-album-picker__input {
        order: 6 !important;
    }
    .film-picker .custom-album-picker__search-bar .fp-type-dd[data-type-dd] {
        order: 7 !important;
    }
    /* Row 2 is [input][Film ▾] — one joined control. The seam itself is
       closed generically in embedded-pick-album.css. */

    /* Row 1 is the album picker's row, control for control: back, home, a
       labelled "Random" pill and Browse, all on the shared action-pill
       metrics from embedded-pick-album.css (4px/7px padding, 0.6rem text,
       13px icons, 999px radius). This used to be three 36px circles and a
       taller Browse pill.

       Desktop keeps its own look and is not touched here: .fp-dice-btn stays
       a bare teal glyph, .fp-type-dd__toggle its 38px pill, and back/home
       their 38px circles. The "Random" label rides along in the markup at
       every width because dash-mobile.css hides .picker-btn-label above
       992px, so it only ever shows at these widths. */

    /* Dice → the album picker's Random pill. */
    .film-picker .custom-album-picker__search-bar .fp-dice-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: auto;
        height: auto;
        padding: 4px 7px;
        border: 1px solid #d6dde6;
        border-radius: 999px;
        background: #fff;
        color: #555;
        font-size: 0.6rem;
        font-weight: 600;
        line-height: 1;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    .film-picker .custom-album-picker__search-bar .fp-dice-btn:hover {
        background: #f1faf9;
    }
    .film-picker .custom-album-picker__search-bar .fp-dice-btn .material-icons {
        font-size: 13px;
        line-height: 1;
        flex-shrink: 0;
    }

    /* Browse on the same pill metrics as Random beside it. The icon and
       caret rules need !important because .fp-type-dd__icon / __caret set
       their 18px/20px desktop sizes that way. */
    .film-picker .custom-album-picker__search-bar .fp-type-dd[data-browse-dd] .fp-type-dd__toggle {
        height: auto;
        padding: 4px 7px;
        gap: 3px;
        justify-content: center;
        border: 1px solid #d6dde6;
        border-radius: 999px;
        color: #555;
        font-size: 0.6rem;
        font-weight: 600;
        line-height: 1;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    .film-picker .custom-album-picker__search-bar .fp-type-dd[data-browse-dd] .fp-type-dd__icon {
        font-size: 13px !important;
        /* Album picker's Browse icon takes the pill's grey, not picker teal. */
        color: inherit;
    }
    .film-picker .custom-album-picker__search-bar .fp-type-dd[data-browse-dd] .fp-type-dd__caret {
        font-size: 13px !important;
        color: inherit;
        opacity: 0.65;
        margin-left: -2px;
    }
    .film-picker .custom-album-picker__search-bar .fp-type-dd[data-browse-dd] .fp-type-dd__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Browse takes the slack so row 1 fills edge to edge rather than
       leaving a ragged gap after Random. */
    .film-picker .custom-album-picker__search-bar .fp-type-dd[data-browse-dd] {
        flex: 1 1 auto !important;
        min-width: 0;
    }
    .film-picker .custom-album-picker__search-bar .fp-type-dd[data-browse-dd] .fp-type-dd__toggle {
        width: 100%;
    }
}

/* Phones: Browse sizes to its content instead of eating the rest of row 1.

   embedded-pick-album.css pins the dice and flexes Browse under 576px, and
   the film picker's own row-1 rules above add width:100% on the toggle —
   together that stretched Browse across everything the other three
   controls left, which on a phone is most of the row. Tablet (576–991.98px)
   is deliberately untouched: the row is wide enough there that Browse
   taking the slack reads fine, and it already does.

   The .film-picker prefix is what outranks the generic !important rule in
   embedded-pick-album.css — same !important, one more class. */
@media (max-width: 575.98px) {
    .film-picker .custom-album-picker__search-bar:has(.fp-type-dd[data-type-dd]) .fp-type-dd[data-browse-dd] {
        flex: 0 0 auto !important;
    }
    .film-picker .custom-album-picker__search-bar:has(.fp-type-dd[data-type-dd]) .fp-type-dd[data-browse-dd] .fp-type-dd__toggle {
        width: auto;
    }
}

/* ── 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;
    }

    /* Synopsis: the right column is only ~230px wide here, so a full TMDB
       overview runs many lines past the bottom of the poster's button stack
       (which ends at "Open in IMDb") and leaves the left column stranded in
       whitespace. Clamp it to roughly that height — tune the line count
       here — and let "Show more" reveal the rest in place. */
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-detail__plot-wrap.is-clamped .fp-detail__plot {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 2px;
    }
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-detail__plot-wrap--toggleable .fp-detail__plot-toggle {
        display: inline-block;
        appearance: none;
        background: none;
        border: none;
        padding: 0;
        margin: 0 0 12px;
        color: #2B988F;
        font: inherit;
        font-weight: 600;
        font-size: 0.78rem;
        cursor: pointer;
    }
}

/* ── 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;
}

/* "#12 on the IMDB Top 250" — its own detail row under the genre. The link
   is a button, not an <a>: the picker navigates in place, so a real href
   would leave the page. Styled as a link, with the rank itself emphasised
   the way the Director/Genre labels are. */
.fp-detail__top250-rank {
    font-weight: 700;
    color: #4a4d6a;
}
.fp-detail__top250-link {
    appearance: none;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #2B988F;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.fp-detail__top250-link:hover,
.fp-detail__top250-link:focus-visible {
    color: #20706a;
    outline: none;
}

.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;
}

/* ── Browse page (film picker scope) ────────────────────────────────
   Overview: one short horizontal row per category (Watchlist, Rewatch,
   Directors, …) with a "See all" link. Cards reuse .fp-oscar__card (the
   Oscar browser's card component, defined further down) so Browse items
   are visually identical to Oscar items; shape (circle vs. poster) comes
   from data-shape since a row/grid here only ever holds one category. */
.rtBrowse__header {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}
.rtBrowse__title {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-accent-primary, #2B988F);
}
.rtBrowse__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-accent-primary, #2B988F);
    cursor: pointer;
}
.rtBrowse__back .material-icons { font-size: 22px; }
.rtBrowse__back:hover { opacity: 0.8; }

.rtBrowse__section { margin-bottom: 28px; }
.rtBrowse__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.rtBrowse__section-head h4 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #424242;
}
.rtBrowse__section-head--solo { margin-bottom: 16px; }
.rtBrowse__seeall {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2B988F;
    text-decoration: none;
    white-space: nowrap;
}
.rtBrowse__seeall:hover { text-decoration: underline; }
.rtBrowse__seeall-count {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(43, 152, 143, 0.12);
    color: #2B988F;
}
/* Kept visible but inert once a row already shows everything it has —
   consistent header shape across rows instead of the link popping in/out. */
.rtBrowse__seeall.is-disabled {
    color: #b8bcc8;
    cursor: default;
    pointer-events: none;
}
.rtBrowse__seeall.is-disabled .rtBrowse__seeall-count { background: rgba(0, 0, 0, 0.06); color: #b8bcc8; }

/* Preview row: a horizontal slider. .rtBrowse__row-wrap is the
   position:relative anchor the floating .rtFavs__nav prev/next chevrons
   (embedded-pick-album.css — same component the album/book pickers use)
   center themselves against; wireBrowseRowSlider() in
   embedded-pick-film.js wires the buttons up and hides the nav once a
   row has nothing left to scroll to. */
.rtBrowse__row-wrap { position: relative; }
.rtBrowse__row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Setting overflow-x forces overflow-y to compute as auto too (it
       can't stay visible on one axis only), so without this padding the
       hover lift (.fp-oscar__card translateY(-1px)) plus its border gets
       clipped flush against the row's top edge. */
    padding: 6px 2px 10px;
    margin: -6px -2px -10px;
}
.rtBrowse__row::-webkit-scrollbar { display: none; }

/* Touch screens: the Browse rows (Favorite Films, Directors, Actors, …)
   are thumb-swiped, not arrowed — same feel as the person-page swipe
   slider (.fp-slider--swipe). The row already scrolls natively; this drops
   the chevrons (!important beats the inline display wireBrowseRowSlider
   sets) and snaps card by card. */
@media (hover: none) and (pointer: coarse) {
    .rtBrowse__row-wrap .rtFavs__nav { display: none !important; }
    .rtBrowse__row {
        scroll-behavior: auto;          /* smooth fights a finger-driven scroll */
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 2px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .rtBrowse__row > * { scroll-snap-align: start; }
}
.rtBrowse__row .fp-oscar__card {
    flex: 0 0 auto;
    width: 120px;
}
.rtBrowse__row .fp-oscar__card[data-shape="circle"] { width: 96px; }
@media (max-width: 480px) {
    .rtBrowse__row .fp-oscar__card { width: 108px; }
    .rtBrowse__row .fp-oscar__card[data-shape="circle"] { width: 88px; }
}

/* The "See all" drill-down: the exact grid the Oscar browser uses
   (.fp-oscar__grid, further down) — auto-fill columns that size
   themselves rather than a fixed per-breakpoint column count. */
.rtBrowse__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100px, calc((100% - 28px) / 3)), 1fr));
    gap: 14px;
}
/* List view (Watchlist): one .fp-person__list-row per film instead of the
   poster grid, so the columns and card gap have to go. */
.rtBrowse__grid--list {
    display: block;
    grid-template-columns: none;
    gap: 0;
}
/* The switcher sits in line with the page title, right-aligned — the same
   spot as on the Academy Awards and IMDB Top 250 pages. */
/* Scoped one level deeper than .fp-imdb__toggle, whose own display rule
   comes later in this file and would otherwise win. */
.rtBrowse__section-head--solo { align-items: center; gap: 12px; }
.rtBrowse__section-head--solo h4 { min-width: 0; margin-bottom: 0; }
.rtBrowse__section-head .rtBrowse__view--head { display: inline-flex; flex: none; margin-left: auto; }

/* ── Drill-down filter bar (Watchlist, Favorite Films, Directors, …) ──
   Built from the Academy Awards browser's filter components
   (.fp-oscar__filters / __filter-group / __filter-label / __select) so both
   browse pages carry the same bar. The filter box itself mirrors the
   edit-watchlist modal's .fve__filter: a filter_list glyph and a
   "Filter your films" input, sized to sit flush with the sort dropdown. */
.rtBrowse__filters {
    align-items: flex-end;
}
/* The find box grows into whatever the sort dropdown leaves. */
.rtBrowse__filter-group--find {
    flex: 1 1 220px;
    max-width: 340px;
}
.rtBrowse__find {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.rtBrowse__find:focus-within {
    border-color: #2B988F;
    box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.18);
}
.rtBrowse__find .material-icons {
    font-size: 18px;
    color: #9ca3af;
    flex: 0 0 auto;
}
.rtBrowse__find-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: #111827;
    line-height: 1.2;
}
.rtBrowse__find-input::placeholder { color: #9ca3af; font-weight: 400; }
/* Chrome's native search clear button sits oddly against the glyph. */
.rtBrowse__find-input::-webkit-search-cancel-button { cursor: pointer; }
/* Match the find box exactly so the two controls share a baseline. */
.rtBrowse__filters .fp-oscar__select {
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    min-width: 190px;
}
/* The Oscar bar goes nowrap on mobile because its groups collapse into one
   combo menu; this bar keeps all of its controls, so it wraps instead. */
@media (max-width: 991.98px) {
    .rtBrowse__filters { flex-wrap: wrap; gap: 10px; }
    .rtBrowse__filter-group--find { flex: 1 1 100%; max-width: none; }
    .rtBrowse__filters .fp-oscar__select { min-width: 0; }
}

/* Circle items (Directors/Actors) round the Oscar poster into an avatar;
   everything else keeps Oscar's default 2:3 poster untouched. */
.fp-oscar__card[data-shape="circle"] .fp-oscar__poster {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

/* 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);
}

/* Experimental: watchlist eye, sitting right after the heart in the same
   title row. Same shape/size/feel as .fp-film-fav — grey/crossed by default,
   green/open once the film is on the watchlist. */
.fp-film-watch {
    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-watch:hover {
    color: #16a34a;
    transform: scale(1.15);
}
.fp-film-watch.on-watchlist {
    color: #16a34a;
}
.fp-film-watch:focus-visible {
    outline: 2px solid rgba(22, 163, 74, 0.35);
    outline-offset: 1px;
}
.fp-film-watch.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) so the still + action buttons line up flush with the
   seasons list directly under them — change the two together. 240px on
   desktop (see the min-width:992px block above, which now sizes every
   picker's poster column the same); 230px below that. */
.film-picker__detail--ep { grid-template-columns: 230px 1fr; }
@media (min-width: 992px) {
    .film-picker__detail--ep { grid-template-columns: 240px 1fr; }
    .fp-epd__bottom          { grid-template-columns: 240px 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: pickeractions;
    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 pickeractions (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 pickeractions (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 pickeractions (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;
}

/* The synopsis clamp and its Show more / Show less toggle belong to the
   ≤540px two-column film detail only (rules in the mobile block further
   up) — tablet and desktop print the whole paragraph, so the toggle stays
   hidden there. */
.fp-detail__plot-toggle { display: none; }

/* "Show more · View on IMDb" row under the synopsis (plotBlock). The dot
   only exists alongside a toggle and is hidden with it — shown by the
   ≤540px rule in the mobile block — so tablet/desktop read just
   "View on IMDb". */
.fp-detail__plot-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: -4px 0 12px;
    font-size: 0.78rem;
    line-height: 1.4;
}
.fp-detail__plot-links .fp-detail__plot-toggle { margin: 0 !important; }
.fp-detail__plot-sep { display: none; margin: 0 7px; color: #9aa0b4; }
.fp-detail__imdb-link {
    font-weight: 600;
    color: #2B988F;
    text-decoration: none;
}
.fp-detail__imdb-link:hover,
.fp-detail__imdb-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
    outline: none;
}
@media (max-width: 540px) {
    .film-picker__detail:not(.fp-detail--cols):not(.film-picker__detail--ep) .fp-detail__plot-wrap--toggleable .fp-detail__plot-sep {
        display: inline;
    }
}


/* 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). */

/* The action stack under the poster (Add to Queue / Add to Favorites /
   Open in IMDb) is styled by the shared .album-action-buttons rules in
   embedded-pick-album.css — single-line labels, the icon sizing and the
   container-query shrink ladder all live there so the music and book
   pickers get the identical treatment. Nothing film-specific left here. */

/* ── 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;
}

/* Paragraph spacing goes between paragraphs, never under one. A bottom
   margin here got added to the collapsed bio's clamped height, so the box
   ran 8px past its fifth line and showed the top sliver of a sixth. */
.fp-person__bio p { margin: 0; }
.fp-person__bio p + p { margin-top: 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;
}

/* Touch screens (film person page): the JS renders the whole filmography
   and adds .fp-slider--swipe — one row you scroll with your thumb, snapping
   card by card, no arrows. ~3.4 cards show so the next one peeks in and
   says "swipe". */
.fp-slider--swipe .fp-slider__nav { display: none; }
.fp-slider--swipe .fp-slider__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
}
.fp-slider--swipe .fp-slider__track::-webkit-scrollbar { display: none; }
.fp-slider--swipe .fp-slider__card {
    flex: 0 0 calc((100% - 36px) / 3.4);
    width: auto;
    scroll-snap-align: start;
}

/* ── 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;
    filter: grayscale(0.8);
}
.fp-person__list-row.is-disabled:hover {
    opacity: 0.8;
    filter: grayscale(0.4);
}
.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-thumb > .material-icons { font-size: 20px; color: #b6b9cf; }
/* Directors / Actors in the browse list: a round headshot rather than a
   poster, matching their circular cards in the grid view. */
.fp-person__list-thumb--circle {
    width: 34px;
    aspect-ratio: 1;
    border-radius: 50%;
}
/* No trailing heart/eye on a person row, so the title sits alone and the
   row keeps the film rows' height rather than collapsing shorter. */
.fp-person__list-row--person { min-height: 48px; }
.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,
.fp-person__list-titlerow .fp-film-watch { flex: 0 0 auto; }
.fp-person__list-inline-acts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Heart + eye as a pair of buttons at the end of the row, at every width —
   phones included (they used to swap to small icons beside the title, too
   fiddly to tap). The inline copy filmListRowHtml still emits stays hidden.
   Also used by the Top 250 list rows in the film and TV pickers. */
.fp-person__list-actions {
    display: none;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
    padding-left: 4px;
}
.fp-person__list-inline-acts { display: none; }
.fp-person__list-actions { display: flex; }
/* Square-ish tappable buttons rather than bare glyphs: a quiet outline at
   rest, the icon's own colour on hover, and a press that dips. The size and
   !important match the base .fp-film-fav / .fp-film-watch rules they
   override. */
.fp-person__list-actions .fp-film-fav,
.fp-person__list-actions .fp-film-watch,
.fp-person__list-actions .fp-person-fav,
.fp-person__list-actions .fp-title-fav {
    /* material-icons.css loads after this file (header.php:58 vs :47) and
       sets display:inline-block on .material-icons, which beats the base
       .fp-film-fav rule's inline-flex on source order — the glyph then sits
       in the button's top-left instead of centred. Restated here, where the
       two-class selector outranks it. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    font-size: 17px !important;
    border: 1px solid #e6e8f0;
    border-radius: 9px;
    background: #fff;
    color: #9aa0b4;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, transform .1s ease;
}
/* The base rules scale the glyph on hover; in a fixed-size button the
   button reacts instead. */
.fp-person__list-actions .fp-film-fav:hover,
.fp-person__list-actions .fp-film-watch:hover,
.fp-person__list-actions .fp-person-fav:hover,
.fp-person__list-actions .fp-title-fav:hover { transform: none; }
.fp-person__list-actions .fp-film-fav:active,
.fp-person__list-actions .fp-film-watch:active,
.fp-person__list-actions .fp-person-fav:active,
.fp-person__list-actions .fp-title-fav:active { transform: scale(.92); }

.fp-person__list-actions .fp-film-fav:hover,
.fp-person__list-actions .fp-person-fav:hover,
.fp-person__list-actions .fp-title-fav:hover {
    background: #fff1f6;
    border-color: #ffc2d8;
    color: #ff4d8d;
}
.fp-person__list-actions .fp-film-fav.favorited,
.fp-person__list-actions .fp-person-fav.favorited,
.fp-person__list-actions .fp-title-fav.favorited {
    background: #fff1f6;
    border-color: #ffc2d8;
    color: #ff4d8d;
}
.fp-person__list-actions .fp-film-watch:hover {
    background: #eefaf1;
    border-color: #b7e7c6;
    color: #16a34a;
}
.fp-person__list-actions .fp-film-watch.on-watchlist {
    background: #eefaf1;
    border-color: #b7e7c6;
    color: #16a34a;
}
.fp-person__list-actions .fp-film-fav:focus-visible,
.fp-person__list-actions .fp-film-watch:focus-visible,
.fp-person__list-actions .fp-person-fav:focus-visible,
.fp-person__list-actions .fp-title-fav:focus-visible {
    outline: 2px solid rgba(43, 152, 143, .45);
    outline-offset: 1px;
}
/* The row tints on hover; lift the buttons off it so they still read as
   separate targets. */
.fp-person__list-row:hover .fp-person__list-actions .fp-film-fav,
.fp-person__list-row:hover .fp-person__list-actions .fp-film-watch,
.fp-person__list-row:hover .fp-person__list-actions .fp-person-fav {
    border-color: #dfe3ee;
}
.fp-person__list-row:hover .fp-person__list-actions .fp-film-fav.favorited,
.fp-person__list-row:hover .fp-person__list-actions .fp-film-fav:hover,
.fp-person__list-row:hover .fp-person__list-actions .fp-person-fav.favorited,
.fp-person__list-row:hover .fp-person__list-actions .fp-person-fav:hover { border-color: #ffc2d8; }
.fp-person__list-row:hover .fp-person__list-actions .fp-film-watch.on-watchlist,
.fp-person__list-row:hover .fp-person__list-actions .fp-film-watch:hover { border-color: #b7e7c6; }
.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 films — greyed out so it's clear they can't be picked, but
   still clickable: the film page opens with its Add to Queue / Select
   button disabled. Hover lifts them to full strength so it reads as
   clickable. */
.fp-card.is-disabled,
.fp-oscar__card.is-disabled {
    opacity: 0.45;
    filter: grayscale(0.8);
    transition: opacity 120ms, filter 120ms;
}
.fp-card.is-disabled:hover,
.fp-oscar__card.is-disabled:hover {
    opacity: 0.8;
    filter: grayscale(0.4);
}

/* 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. The
   reserve is on the wrapper around both (.fp-slider__text), not on the title:
   the year then sits straight under a 1-line title and the spare line falls
   below it, instead of opening a gap between the two.
   2 title lines (0.82rem × 1.25) + 2 year lines (0.75rem × 1.3) + the year's
   2px top margin. */
.fp-slider__text {
    min-height: calc(2.05rem + 1.95rem + 2px);
}

/* Beats .fp-card:not(.fp-card--person) .fp-card__title's own 2-line reserve. */
.fp-slider__card .fp-slider__text .fp-card__title {
    min-height: 0;
}

.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;
}
/* Inside the wrapper the reserve is already counted once. */
.fp-slider__text .fp-card__year {
    min-height: 0;
}

.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; }
    /* Same two-plus-two reserve at the smaller sizes. */
    .fp-slider__text { min-height: calc(1.8rem + 1.77rem + 2px); }
}

/* =========================
   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;
}
.fp-oscar__subtitle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* "Hide restricted" / "Hide nominees" — their own row directly under the
   Category + sort/filter controls (they used to sit beside the subtitle).
   A hairline above ties them to the filters; the grid keeps its usual gap. */
.fp-oscar__switches {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: -4px 0 16px;
    padding-top: 12px;
    border-top: 1px solid #eef0f4;
}
.fp-oscar__switches > div:empty { display: none; }
/* Neither switch applies (no restriction, no Oscar context): drop the row. */
.fp-oscar__switches:not(:has(label)) { 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;
    /* Capped near the width of the Category / Sort by selects (200px
       min-width) so it doesn't stretch across the whole row on desktop. */
    max-width: 240px;
}
.fp-oscar__year-slider { width: 100%; padding-top: 2px; }

/* ── Mobile: Sort by + year slider → one "Sort & filter" menu ─────────
   The combo group (renderOscarSortFilterCombo) sits beside Category and
   reuses the "Your Clubs" filter menu styling (.dash-m-club-type*,
   dashboard.css). Desktop keeps the separate sort + years groups. */
.fp-oscar__filter-group--combo { display: none; }
@media (max-width: 991.98px) {
    .fp-oscar__filters {
        flex-wrap: nowrap;
        gap: 8px;
    }
    .fp-oscar__filter-group[data-oscar-filter-group="sort"],
    .fp-oscar__filter-group[data-oscar-filter-group="years"] { display: none; }
    .fp-oscar__filter-group[data-oscar-filter-group="categories"] { flex: 1 1 auto; }
    .fp-oscar__filter-group[data-oscar-filter-group="categories"] .fp-oscar__select {
        width: 100%;
        min-width: 0;
        height: 36px;
    }
    .fp-oscar__filter-group--combo { display: flex; flex: 0 0 auto; }
    .fp-oscar__combo-btn {
        height: 36px;
        padding: 0 8px 0 10px;
        border-radius: 8px;
    }
    .fp-oscar__combo-menu { width: 280px; z-index: 30; }
    .fp-oscar__combo-years { padding: 0 10px 8px; }
    /* .dash-m-club-typelinks sets display:inline-flex, which beats [hidden]. */
    .fp-oscar__combo-menu .dash-m-club-typelinks[hidden] { display: none; }

    /* The footer + pager mobile overrides live below the pager's base
       rules (source order decides at equal specificity) — search for
       "Footer: the pager shared a row". */
    .fp-oscar__combo-years .fp-oscar__year-labels { margin-bottom: 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(min(100px, calc((100% - 28px) / 3)), 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-person-fav {
    flex: 0 0 auto;
    font-size: 15px;
    margin-top: 1px;
}
.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; }
/* Footer under every paged grid (Popular, Academy Awards, Top 250, the
   Browse drill-downs). Three tracks with matching 1fr gutters so the pager
   sits dead-centre in the page no matter how wide "Showing 1–25 of 120"
   runs; the count trails it in the right-hand gutter. Both children are
   placed explicitly, so a hidden pager (.d-none, single page) doesn't let
   the count slide into its column. */
.fp-oscar__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px; margin-top: 16px;
}
.fp-oscar__footer .fp-oscar-pager { grid-column: 2; }
.fp-oscar__footer .fp-oscar__count {
    grid-column: 3;
    justify-self: end;
    text-align: right;
}
.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(min(100px, calc((100% - 28px) / 3)), 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;
}
/* Zebra stripes — every other ranked row gets a faint tint so the eye
   can track rank → title across the row. Declared before :hover so the
   teal hover wash still wins on striped rows. */
.fp-imdb__list-row:nth-child(even) {
    background: #f5f6fa;
}
.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;
}
/* Rank shown inside the sub-line on phones only (see below); on wider
   screens it has its own column. */
.fp-imdb__list-subrank { display: none; }

/* Phones: the Top 250 list row matches the watchlist / browse list row
   (.fp-person__list-row) — thumb, title, one dotted sub-line, the heart
   and eye buttons on the right. The rank column folds into the sub-line
   ("#12 · 1994 · ★ 8.8") and the long genre list is dropped to fit. */
@media (max-width: 575.98px) {
    .fp-imdb__list-row { gap: 10px; padding: 7px 8px; }
    .fp-imdb__list-row:nth-child(even) { background: #fafbfd; }
    .fp-imdb__list-rank,
    .fp-imdb__list-genre { display: none; }
    .fp-imdb__list-subrank { display: inline; font-weight: 700; color: #0c3530; font-variant-numeric: tabular-nums; }
    .fp-imdb__list-sub { gap: 0; }
    .fp-imdb__list-sub > * + *::before { content: "·"; margin: 0 6px; color: #9aa0b4; font-weight: 400; }
    .fp-imdb__list-sub > :empty { display: none; }   /* no year → no stray dot */
}

/* "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;
}

/* ── Film detail action stack: flat coloured buttons ─────────────
   Film picker only — .film-picker:not(.tv-picker), since the TV picker's
   root carries .film-picker as well, and the album / book pickers keep
   their own stacks untouched.

   Each button keeps its own colour (black Queue / red Remove, pink
   Favorite, blue Watchlist, IMDb yellow); this block only flattens the
   raised look, gives the four a single type size, and stops long labels
   being clipped. Colour itself comes from the base rules in
   embedded-pick-album.css and further up this file. */
.film-picker:not(.tv-picker) .film-picker__detail .album-action-buttons .btn {
    /* Every base rule ships a big colour-matched drop shadow. Flat here. */
    box-shadow: none !important;
    font-weight: 600;
    /* One shared type size, where the base rules disagree (1rem for Queue,
       0.9rem for the rest). The @container steps below shrink it again on
       the narrow mobile column — setting it here alone would out-specify
       the ladder in embedded-pick-album.css and leave a 0.9rem label in a
       120px button. */
    font-size: 0.9rem;
    /* The base stack is `white-space: nowrap; overflow: hidden` with
       `justify-content: center`, so a label wider than its button is
       clipped at BOTH ends — text-overflow can't ellipsise the anonymous
       text run inside a flex container. Let it wrap beside the icon
       instead; the icon stays put and the label takes a second line.
       (Mobile also swaps in short labels — see splitLabel() in
       embedded-pick-film.js — so this is mostly a safety net.) */
    white-space: normal;
    overflow: visible;
    line-height: 1.2;
    padding-top: 7px;
    padding-bottom: 7px;
}
/* Hover keeps each button's own darker shade and its slight lift — just
   not the big coloured glow underneath it. */
.film-picker:not(.tv-picker) .film-picker__detail .album-action-buttons .btn:hover,
.film-picker:not(.tv-picker) .film-picker__detail .album-action-buttons .btn:focus-visible {
    box-shadow: none !important;
}
.film-picker:not(.tv-picker) .film-picker__detail .album-action-buttons .btn .material-icons {
    flex: 0 0 auto;
}
/* Same shrink steps as .album-action-buttons' own ladder (the stack is the
   `pickeractions` container), restated at this block's specificity. */
@container pickeractions (max-width: 220px) {
    .film-picker:not(.tv-picker) .film-picker__detail .album-action-buttons .btn {
        font-size: 0.82rem;
        padding-left: 6px;
        padding-right: 6px;
    }
}
@container pickeractions (max-width: 170px) {
    .film-picker:not(.tv-picker) .film-picker__detail .album-action-buttons .btn {
        font-size: 0.72rem;
    }
    .film-picker:not(.tv-picker) .film-picker__detail .album-action-buttons .btn .material-icons {
        margin-right: 2px !important;
    }
}

/* 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;
}

/* Awards row in the Browse dropdown — gold trophy icon to match the
   music side’s Grammy Awards row (embedded-pick-album-grammys.css). */
.fp-type-dd__opt[data-browse="awards"] .material-icons {
    color: #c79b1f;
}

/* ── Film picker pager (Popular, Academy Awards, IMDB Top 250) ───────
   Numbered pages with prev/next chevrons and ellipsis gaps, styled to
   match the queue pagination (.queue-pager__btn in dash-mobile.css):
   teal outline pills, the active page filled teal with a soft glow. */
.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: 6px;
}
.fp-oscar-pager__item {
    display: inline-flex; align-items: center; justify-content: center;
}
.fp-oscar-pager__item--gap {
    padding: 0 4px;
    font-size: 0.85rem;
    color: #9ca3af;
    user-select: none;
}
.fp-oscar-pager__btn {
    appearance: none; -webkit-appearance: none;
    min-width: 34px; height: 32px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-size: 0.8rem; font-weight: 500;
    line-height: 1;
    border-radius: 16px;
    border: 1px solid #dbe7e6;
    background: #fff;
    color: #2B988F;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fp-oscar-pager__btn:hover:not(.is-active):not(:disabled) {
    background-color: #DEF1EF;
    border-color: #2B988F;
    color: #2B988F;
}
.fp-oscar-pager__btn.is-active {
    background-color: #2B988F;
    border-color: #2B988F;
    color: #fff;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(43, 152, 143, 0.35);
}
.fp-oscar-pager__btn:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.25);
}
.fp-oscar-pager__btn--nav { padding: 0; }
.fp-oscar-pager__btn--nav .material-icons { font-size: 1.1rem; line-height: 1; }
.fp-oscar-pager__btn:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

/* Footer: the pager shared a row with "Showing 1–24 of 618", which squeezed
   it and pushed the next arrow onto a second line. Narrow viewports stack
   them instead — pager centred on its own line, count beneath — and keep the
   (max four-number) pager on one line. MUST stay below .fp-oscar__footer and
   .fp-oscar-pager__list: same specificity, so source order decides. */
@media (max-width: 991.98px) {
    .fp-oscar__footer {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 6px;
    }
    .fp-oscar__footer .fp-oscar-pager,
    .fp-oscar__footer .fp-oscar__count {
        grid-column: 1;
        justify-self: center;
        text-align: center;
    }
    .fp-oscar-pager__list { flex-wrap: nowrap; }
}
/* Jump-to-first/last took the pager from 7 buttons to 9, which stopped
   fitting one line on a phone — it used to wrap onto two. Shrink the whole
   strip instead so all nine stay on one line and nothing is hidden.

   Worst case is four 3-digit numbers (IMDB Top 250 / a long Academy Awards
   list): 4 nav × 28px + 4 numbers × ~31px + the ellipsis + 8 × 3px gaps
   ≈ 272px, so it clears a 320px phone. overflow-x is a belt-and-braces for
   anything wider than that — it degrades to a one-line swipe rather than a
   wrapped block, with no visible scrollbar.

   Must stay below the nowrap rule above: same specificity, so source order
   decides. */
@media (max-width: 575.98px) {
    .fp-oscar-pager__list {
        flex-wrap: nowrap;
        gap: 3px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .fp-oscar-pager__list::-webkit-scrollbar { display: none; }
    .fp-oscar-pager__btn {
        min-width: 28px;
        height: 28px;
        padding: 0 6px;
        font-size: 0.72rem;
    }
    .fp-oscar-pager__btn--nav {
        padding: 0;
    }
    .fp-oscar-pager__btn--nav .material-icons {
        font-size: 1rem;
    }
    .fp-oscar-pager__item--gap {
        padding: 0 2px;
        font-size: 0.75rem;
    }
}

/* ── 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;
}

/* ── Watchlist button + "who's seen it" (film detail page) ───────────── */
/* Its own colour: it borrows .btn-fav-album-modal for shape, which is Favorites
   pink. Teal was tried first, but this detail view already has teal/green
   icon buttons in its header bar, so blue is the one that doesn't collide
   with anything else on the card (pink favorite, black queue, gold IMDb). */
.fp-watchlist-btn {
    background: #2563eb !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35) !important;
}
.fp-watchlist-btn:hover { background: #1d4ed8 !important; }
.fp-watchlist-btn.is-on {
    background: #1e3a8a !important;
    box-shadow: 0 6px 16px rgba(30, 58, 138, 0.4) !important;
}
.fp-watchlist-btn.is-on .material-icons { color: #fbbf24; }

/* ── Favorites view: watchlist rows ── */
.rtFavs__hint {
    margin: -8px 0 12px;
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.6);
}
/* Sub-label beside a section heading ("films you haven't seen"). */
.rtFavs__hint-inline {
    font-size: 0.76rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
}

/* Rating chips that link out to TMDB / IMDb / Rotten Tomatoes / Metacritic
   (film + TV pickers, new tab). Lift and glow on hover, a small ↗ slides in,
   press dips it; the chip keeps its own brand tint throughout. */
a.fp-rating--link {
    display: inline-flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, gap .15s ease;
    -webkit-tap-highlight-color: transparent;
}
a.fp-rating--link .fp-rating__go {
    font-size: 0;
    opacity: 0;
    transform: translate(-2px, 2px);
    transition: font-size .15s ease, opacity .15s ease, transform .15s ease;
}
a.fp-rating--link:hover,
a.fp-rating--link:focus-visible {
    gap: 3px;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    filter: saturate(1.25) brightness(1.02);
    text-decoration: none;
}
a.fp-rating--link:hover .fp-rating__go,
a.fp-rating--link:focus-visible .fp-rating__go {
    font-size: .8rem;
    opacity: .85;
    transform: none;
}
a.fp-rating--link:focus-visible { outline: 2px solid #2B988F; outline-offset: 2px; }
a.fp-rating--link:active {
    transform: translateY(0) scale(.95);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    transition-duration: .06s;
}
/* Touch screens have no hover — show the ↗ so the chips read as links. */
@media (hover: none) {
    a.fp-rating--link { gap: 3px; }
    a.fp-rating--link .fp-rating__go { font-size: .8rem; opacity: .7; transform: none; }
}
/* Keep each chip's brand text colour — Bootstrap's a:hover would override it. */
a.fp-rating--tmdb.fp-rating--link, a.fp-rating--tmdb.fp-rating--link:hover { color: #1f6f68; }
a.fp-rating--imdb.fp-rating--link, a.fp-rating--imdb.fp-rating--link:hover { color: #6e4f00; }
a.fp-rating--rt.fp-rating--link,   a.fp-rating--rt.fp-rating--link:hover   { color: #8c2f10; }
a.fp-rating--mc.fp-rating--link,   a.fp-rating--mc.fp-rating--link:hover   { color: #1f4d7a; }

/* ── Browse rows sized like the music picker's favourites rows ───────
   Mirrors .queue-fav__grid (embedded-pick-album-home.css): the wrap is a
   size container, --fp-cols steps from 3 to 10 on the same widths, and
   each card is a whole column of that count (14px = the row's gap).
   Circle cards take the same column width so rows stay aligned. */
.rtBrowse__row-wrap { container-type: inline-size; }
.rtBrowse__row { --fp-cols: 3; }
@container (min-width: 570px)  { .rtBrowse__row { --fp-cols: 4; } }
@container (min-width: 714px)  { .rtBrowse__row { --fp-cols: 5; } }
@container (min-width: 858px)  { .rtBrowse__row { --fp-cols: 6; } }
@container (min-width: 1002px) { .rtBrowse__row { --fp-cols: 7; } }
@container (min-width: 1146px) { .rtBrowse__row { --fp-cols: 8; } }
@container (min-width: 1290px) { .rtBrowse__row { --fp-cols: 9; } }
@container (min-width: 1434px) { .rtBrowse__row { --fp-cols: 10; } }
.rtBrowse__row .fp-oscar__card,
.rtBrowse__row .fp-oscar__card[data-shape="circle"] {
    flex: 0 0 calc((100% - (var(--fp-cols) - 1) * 14px) / var(--fp-cols));
    width: calc((100% - (var(--fp-cols) - 1) * 14px) / var(--fp-cols));
}

/* Under 992px: the phone-app carousel, same as .queue-fav__grid — no
   chevrons (!important beats wireBrowseRowSlider's inline display),
   mandatory snap, trailing room so the last card clears the edge, and
   2.4 cards per view on phone-width rows. */
@media (max-width: 991.98px) {
    .rtBrowse__row-wrap .rtFavs__nav { display: none !important; }
    .rtBrowse__row {
        scroll-behavior: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 2px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding: 6px 16px 10px 2px;
    }
    .rtBrowse__row > * { scroll-snap-align: start; }
    @container (max-width: 569.98px) {
        .rtBrowse__row { --fp-cols: 2.4; }
    }
}

/* ── Academy Awards browser: list view ────────────────────────────────
   The Card / List toggle in the header (setOscarViewMode in
   embedded-pick-film.js). List view is one compact row per film under a
   heading for each film year; A → Z sorts drop the headings and show the
   year in each row. Rows follow the IMDB Top 250 list row, plus a
   Winner / Nominee badge. */
.film-picker .fp-oscar__grid--list { display: block; }
.fp-oscar-yr + .fp-oscar-yr { margin-top: 18px; }
/* Acting / directing categories swap the film poster for the nominee's
   photo (useNomineePhoto); the image stays hidden until the lookup settles. */
.film-picker .is-photo-pending > img,
.film-picker .is-photo-pending > .fp-card__noposter { opacity: 0; }
.fp-oscar__card .fp-card__poster > img,
.fp-oscar__lrow .fp-imdb__list-thumb > img { transition: opacity .18s ease; }
/* Nominee cards (oscarPersonCard): the name is the title — no two-line
   reserve under it, that was for long film titles — and the film is a
   small teal link beneath, with its heart. */
.fp-card.fp-oscar__card--person .fp-card__title { min-height: 0; }
.fp-oscar__film-line {
    display: flex; align-items: flex-start; gap: 4px;
    margin-top: 2px; font-size: 0.74rem; line-height: 1.25;
}
.fp-oscar__film-link { cursor: pointer; }
.fp-oscar__film-line .fp-oscar__film-link {
    flex: 1 1 auto; min-width: 0; font-weight: 600; color: #2B988F;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.fp-oscar__film-line .fp-card__title-year { font-weight: 400; color: #6b6e85; white-space: nowrap; }
.fp-oscar__film-link:hover,
.fp-oscar__film-link:focus-visible { color: #20706a; text-decoration: underline; outline: none; }
.fp-oscar__lrow-nominee.fp-oscar__film-link:hover { color: #2B988F; }
/* Card view sorted by year: the same year headings, a card grid under each. */
.fp-oscar-yr__cards { margin-top: 10px; }
.fp-oscar-yr:has(> .fp-oscar-yr__cards) + .fp-oscar-yr { margin-top: 26px; }
.fp-oscar-yr__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: #0c3530;
    font-variant-numeric: tabular-nums;
}
.fp-oscar-yr__head::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e5e7eb;
}
.fp-oscar__lrow {
    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-oscar__lrow:nth-child(even) { background: #f5f6fa; }
.fp-oscar__lrow:hover {
    border-color: #2B988F;
    background: rgba(43,152,143,0.04);
}
.fp-oscar__lrow.is-disabled {
    opacity: 0.45;
    filter: grayscale(0.8);
}
.fp-oscar__lrow.is-disabled:hover {
    opacity: 0.8;
    filter: grayscale(0.4);
}
.fp-oscar__lrow.is-win .fp-imdb__list-thumb { box-shadow: 0 0 0 2px #d4af37; }
.fp-oscar__lrow-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fp-oscar__lrow-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1d2e;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-oscar__lrow-sub {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 0.78rem;
    color: #6b7280;
    overflow: hidden;
    white-space: nowrap;
}
.fp-oscar__lrow-sub > * { overflow: hidden; text-overflow: ellipsis; }
.fp-oscar__lrow-sub > * + *::before { content: "·"; margin: 0 6px; color: #9aa0b4; }
.fp-oscar__lrow-cats { flex: 0 1 auto; }
.fp-oscar__lrow-nominee { flex: 0 1 auto; color: #4b5563; }
.fp-oscar__lrow-nominee.fp-oscar__nominee-link { cursor: pointer; }
.fp-oscar__lrow-nominee.fp-oscar__nominee-link:hover { color: #2B988F; text-decoration: underline; }
.fp-oscar__lrow-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    background: #eef0f4;
}
.fp-oscar__lrow-badge.is-win {
    color: #8a6d0b;
    background: rgba(212, 175, 55, 0.18);
}
.fp-oscar__lrow-badge .material-icons { font-size: 14px; color: #d4af37; }

/* Phones: the Nominee badge goes (no badge already reads as "nominated")
   and the Winner one shrinks to just the trophy. */
@media (max-width: 575.98px) {
    .fp-oscar__lrow { gap: 10px; padding: 7px 8px; }
    .fp-oscar__lrow:nth-child(even) { background: #fafbfd; }
    .fp-oscar__lrow-badge:not(.is-win) { display: none; }
    .fp-oscar__lrow-badge.is-win { font-size: 0; padding: 3px; gap: 0; }
}

/* ── Oscar year page ──────────────────────────────────────────────────
   Opened from a list-view year heading (showOscarYear in
   embedded-pick-film.js). Category headings and rows reuse the list view's
   .fp-oscar-yr / .fp-oscar__lrow; prev/next years use the segmented
   .fp-imdb__toggle control. */
.fp-oscar-yr__link {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    cursor: pointer;
    border-radius: 4px;
    transition: color 120ms;
}
.fp-oscar-yr__link .material-icons { font-size: 18px; color: #9aa0b4; transition: color 120ms, transform 120ms; }
.fp-oscar-yr__link:hover,
.fp-oscar-yr__link:focus-visible { color: #2B988F; }
.fp-oscar-yr__link:hover .material-icons,
.fp-oscar-yr__link:focus-visible .material-icons { color: #2B988F; transform: translateX(2px); }

.film-picker__view--oscar-year { padding-top: 4px; }
.fp-oyear__header { margin: 4px 0 16px; align-items: flex-start; }
.fp-oyear__heading { min-width: 0; }
.fp-oyear__steps .fp-imdb__toggle-btn:disabled { opacity: 0.35; cursor: default; background: none; color: #6b7280; }
.fp-oyear__cat .fp-oscar-yr__head { font-size: 0.95rem; }
/* Rows with no TMDB match (honorary awards, old shorts): listed, not links. */
.fp-oscar__lrow.is-static { cursor: default; }
.fp-oscar__lrow.is-static:hover { border-color: transparent; border-bottom-color: #eef0f7; background: none; }
.fp-oscar__lrow.is-static:nth-child(even):hover { background: #f5f6fa; }