/* =============================================================================
   Spoiler settings (Phase 2, 2026-07-25) — the navbar gear + chip, its panel,
   and the site-wide reactions to the reader's watch position.

   Loaded globally from layouts/app.blade.php. Everything here is scoped to
   `.frnav-settings`, `.fr-spoiler-alert` or one of the `<html>` state classes
   set by public/js/spoiler-settings.js, so it is inert on any page that has
   neither. Colours come from the navbar's per-verse `--frnav-accent`, so the
   gear tints with the page like the rest of the bar.
   ============================================================================= */

/* --- JS gate --------------------------------------------------------------
   With JS off the <select> has nothing to write to, so the whole control is
   absent rather than present-and-dead. `fr-js` lands in <head>, before paint. */
.frnav-settings { display: none }
.fr-js .frnav-settings { display: block }

/* --- The toggle: gear + current position ---------------------------------- */
.frnav .frnav-settings__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.frnav .frnav-settings__gear {
    font-size: 0.9rem;
    opacity: 0.85;
    transition: transform 0.25s ease, opacity 0.15s ease;
}
.frnav .frnav-settings__toggle:hover .frnav-settings__gear,
.frnav .frnav-settings__toggle:focus .frnav-settings__gear,
.frnav .show > .frnav-settings__toggle .frnav-settings__gear {
    opacity: 1;
    transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
    .frnav .frnav-settings__gear { transition: none }
    .frnav .frnav-settings__toggle:hover .frnav-settings__gear,
    .frnav .frnav-settings__toggle:focus .frnav-settings__gear,
    .frnav .show > .frnav-settings__toggle .frnav-settings__gear { transform: none }
}

/* The chip states the answer the menu asks for, so the control explains itself
   without being opened. Sized off the nav's own scale so it never grows the bar. */
.frnav .frnav-settings__chip {
    display: inline-block;
    max-width: 11ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.08rem 0.45rem;
    border: 1px solid rgba(var(--frnav-accent), 0.5);
    border-radius: 999px;
    background: rgba(var(--frnav-accent), 0.16);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.5;
}
.frnav .frnav-settings__toggle:hover .frnav-settings__chip,
.frnav .frnav-settings__toggle:focus .frnav-settings__chip {
    background: rgba(var(--frnav-accent), 0.3);
    border-color: rgba(var(--frnav-accent), 0.75);
}

/* --- The panel ------------------------------------------------------------ */
.frnav .frnav-mega-settings {
    width: min(20rem, calc(100vw - 2rem));
}
.frnav .frnav-settings__lead,
.frnav .frnav-settings__note {
    color: rgba(226, 230, 235, 0.72);
    font-size: 0.78rem;
    line-height: 1.45;
    margin: 0.55rem 0.15rem 0;
}
.frnav .frnav-settings__note {
    font-size: 0.72rem;
    color: rgba(226, 230, 235, 0.5);
    margin-top: 0.5rem;
}
.frnav .frnav-settings__label {
    display: block;
    margin: 0.7rem 0.15rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(226, 230, 235, 0.6);
}
/* The native select is kept (100 options in 5 groups is exactly what optgroups
   are for, and it is the one control that works the same on a phone), just
   dressed to match the dark panel. */
.frnav .frnav-settings__select {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(var(--frnav-accent), 0.45);
    background: rgba(12, 14, 18, 0.9);
    color: #ffffff;
    font-size: 0.85rem;
}
.frnav .frnav-settings__select:focus {
    outline: none;
    border-color: rgb(var(--frnav-accent));
    box-shadow: 0 0 0 3px rgba(var(--frnav-accent), 0.3);
}
/* The dropdown list itself is drawn by the OS; on the platforms that do let CSS
   through, keep it dark rather than a white flash against the panel. */
.frnav .frnav-settings__select option,
.frnav .frnav-settings__select optgroup {
    background: #181b20;
    color: #e2e6eb;
}

/* --- Reactive spoiler warnings -------------------------------------------
   The red "spoilers through season N" banners (partials/spoiler-alert-*) and
   the /guide notices carry a season class. Once the reader is past that season
   the warning is noise, so it goes — before paint, not after. */
.fr-seen-s1 .fr-spoiler-alert--s1,
.fr-seen-s2 .fr-spoiler-alert--s2,
.fr-seen-s3 .fr-spoiler-alert--s3,
.fr-seen-s4 .fr-spoiler-alert--s4,
.fr-seen-s5 .fr-spoiler-alert--s5 {
    display: none !important;
}

/* --- Reactive chrome: the footer + the FEATURES menu ---------------------
   Both the footer (partials/footer) and the FEATURES mega-menu
   (partials/nav/features-mega) list every feature page, so both give away the
   show's turns to a first-time reader one glance/one hover from anywhere. Same
   contract as the warnings above and as the rest of the site: the server
   renders the chrome WITHOUT the gated links (the safe state) and these rules
   only ever REVEAL them, keyed off the cumulative fr-seen-sN classes that land
   in <head> before paint — so JS-off, a cold load and an undecided reader all
   keep the safe version. Season gates: s2 = the alternate-universe reveal
   (ep 221/222), s3 = reached season 4, s4 = the 2036 / season-5 material. */

/* Footer: each gated <li> stays out until its season is reached. */
.frfoot__feature--gated { display: none }
.fr-seen-s1 .frfoot__feature--s1,
.fr-seen-s2 .frfoot__feature--s2,
.fr-seen-s3 .frfoot__feature--s3,
.fr-seen-s4 .frfoot__feature--s4,
.fr-seen-s5 .frfoot__feature--s5 { display: list-item }

/* "More unlocks as you watch" — only while something is still hidden (the last
   footer gate is s4) and only where the settings menu exists to open (fr-js;
   the button is a silent no-op otherwise, e.g. the retired ?nav=current bar). */
.frfoot__more { display: none }
.fr-js .frfoot__more { display: block }
.fr-js.fr-seen-s4 .frfoot__more { display: none }

/* FEATURES mega-menu. The whole "Differences" column is the alternate-universe
   concept itself, so it's hidden entire until s2; while it's gone the 3-column
   grid drops to two (desktop only — the mobile stack is already one column, and
   must stay that way, so scope the override above the collapse breakpoint). The
   later-revealing items inside Differences, and the gated items in the other two
   columns, carry their own season gate. */
@media (min-width: 992px) {
    html:not(.fr-seen-s2) .frnav-mega-features .frnav-mega-grid {
        grid-template-columns: repeat(2, minmax(190px, 1fr));
    }
}
.frnav-mega-col--gated { display: none }
.fr-seen-s2 .frnav-mega-col--gated { display: block }

.frnav-mega-features .frnav-col-list .frnav-feature--gated { display: none }
.fr-seen-s2 .frnav-mega-features .frnav-col-list .frnav-feature--s2,
.fr-seen-s3 .frnav-mega-features .frnav-col-list .frnav-feature--s3,
.fr-seen-s4 .frnav-mega-features .frnav-col-list .frnav-feature--s4 { display: list-item }

/* The link that opens the navbar menu from inside a warning — the warning is
   where the reader is thinking about spoilers, so it is where the setting is
   worth offering. Inherits the alert's own colour rather than introducing one. */
.fr-spoiler-alert__set {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.fr-spoiler-alert__set:hover,
.fr-spoiler-alert__set:focus { text-decoration: none }
/* Only offer it where it can work: JS on, and a settings menu to open (the
   legacy navbar has none — spoiler-settings.js sets [hidden] in that case, which
   has to out-rank the .fr-js rule below). */
.fr-spoiler-alert__setline { display: none }
.fr-js .fr-spoiler-alert__setline { display: block }
.fr-spoiler-alert__setline[hidden] { display: none }
