/* presentation-media-carousel.css — Constitutional media carousel beneath
   the stage (UMI Heart Principle clauses 1, 2, 3, 6, 7).

   making-about-real S2 D5 (2026-05-17). Joe directive: "We're going to
   have a very complex presentation tool kit, which includes a stage and
   inherently a media carousel below it in which all the supporting media
   associated with the current story or chapter is available for the user
   to scroll around in unlimited size." Mounted by MediaCarousel.js as a
   child of .presentation-root, anchored above .pres-subtitles. */

/* When the carousel has items, .presentation-root.has-carousel is set
   and --pres-carousel-h is bumped to ~140px. The pres-deck (.pres-deck
   styled at about.css:113) gains a bottom inset matching --pres-carousel-h
   so the stage shrinks to leave room. The carousel sits between the deck
   and the subtitle bar; subtitle stays anchored at bottom:0. */
.presentation-root.has-carousel .pres-deck {
    bottom: var(--pres-carousel-h, 140px);
}

.pres-media-carousel {
    /* M-8 (mastering-about-production S2, 2026-05-25) — Joe directive
       (MasterPass 02:50–03:30): "put it in a container that looks like a
       jukebox or a carousel … put some graphic around that panel so it
       looks different." Pre-S2 the carousel was a near-transparent strip
       sharing its background with the chapter deck — visually it read as
       "extension of the cue" rather than its own discrete affordance. The
       jukebox styling adds: a stronger framed border (amber-warm edge to
       call out it as the supporting-media drawer, matching the AD vision
       amber palette established in directing-definitive-about), inner
       padding so items don't bleed to the frame edge, a top accent line
       that hints "this is a different surface," and a subtle drop shadow
       lifting it off the deck. */
    position: absolute;
    /* Sit above the subtitle bar (.pres-subtitles bottom:0, min-height:52,
       max-height:76; we anchor 76px up so subtitle remains overlay-able). */
    bottom: 76px;
    left: 12px;     /* M-8: inset from edges to read as a framed container */
    right: 72px;    /* mirror .pres-subtitles right:60px + 12px inset */
    height: var(--pres-carousel-h, 140px);
    box-sizing: border-box;
    padding: 10px 18px 12px 22px;
    /* Jukebox surface — deeper amber-warmed substrate so it reads as a
       supporting drawer rather than a translucent extension of the deck. */
    background:
        linear-gradient(180deg, rgba(20, 30, 36, 0.92) 0%, rgba(12, 22, 28, 0.94) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(232, 160, 64, 0.22);  /* amber edge */
    border-top-color: rgba(232, 160, 64, 0.42);  /* brighter top accent */
    border-radius: 10px 10px 6px 6px;
    box-shadow:
        0 -2px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    z-index: 75;  /* below subtitle (80) so subtitle never collides; above deck */
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: opacity 220ms ease, transform 220ms ease;
}

.pres-media-carousel.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

.pres-media-carousel-label {
    /* M-8 — amber-toned label for the jukebox surface; matches the AD
       palette established for the FFA window-frame's amber-edge motif. */
    font-size: calc(0.68rem * var(--type-scale, 1));
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(232, 160, 64, 0.78);
    padding-left: 2px;
    /* Add a small amber dot anchor to the left of the label so the
       carousel reads as a discrete "drawer" with its own identity. */
    display: flex;
    align-items: center;
    gap: 8px;
}
.pres-media-carousel-label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(232, 160, 64, 0.65);
    box-shadow: 0 0 6px rgba(232, 160, 64, 0.42);
}

.pres-media-carousel-strip {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* M-8 — center items when the row is not full (Joe directive
       02:50–03:30: "if it's not full, the media items should be centered
       by default (still scrollable)"). `safe center` is the modern
       Flexbox keyword that centers when content fits and falls back to
       flex-start when content overflows — so the first item is never
       cut off at the left edge when the user scrolls back to it. */
    justify-content: safe center;
    /* Subtle scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(232, 160, 64, 0.32) transparent;
}
.pres-media-carousel-strip::-webkit-scrollbar {
    height: 6px;
}
.pres-media-carousel-strip::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}
.pres-media-carousel-strip::-webkit-scrollbar-track {
    background: transparent;
}

.pres-media-carousel-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 96px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
    scroll-snap-align: start;
    transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.pres-media-carousel-item:hover,
.pres-media-carousel-item:focus-visible {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
    outline: none;
}
.pres-media-carousel-item:active {
    transform: translateY(0);
}

.pres-media-carousel-item--hero {
    width: 128px;
    border-color: rgba(245, 158, 11, 0.4);
}
.pres-media-carousel-item--hero:hover {
    border-color: rgba(245, 158, 11, 0.7);
}

.pres-media-carousel-thumb {
    width: 100%;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pres-media-carousel-item--hero .pres-media-carousel-thumb {
    height: 84px;
}
.pres-media-carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pres-media-carousel-thumb-fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.pres-media-carousel-caption {
    font-size: calc(0.66rem * var(--type-scale, 1));
    line-height: 1.25;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    max-width: 100%;
    /* 2-line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Type-specific accent stripes — subtle visual hint for content type */
.pres-media-carousel-item--video .pres-media-carousel-thumb::after {
    content: '\25B6';  /* ▶ */
    position: absolute;
    color: rgba(255, 255, 255, 0.85);
    font-size: calc(18px * var(--type-scale, 1));
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.pres-media-carousel-item--video .pres-media-carousel-thumb {
    position: relative;
}
.pres-media-carousel-item--video .pres-media-carousel-thumb::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pres-media-carousel-item--document .pres-media-carousel-thumb {
    background: rgba(220, 200, 160, 0.06);
    /* I-3 (restoring-about-mediaheart S1, 2026-05-25): documents are 8½×11
       portrait. `object-fit: cover` (the default img rule above) crops the
       cover image to fit the landscape 64/84 px thumb, slicing off the
       top + bottom of the cover. Override to contain so the full cover
       proportions are visible — small letterboxing on either side of the
       portrait page reads better than a sliced cover. */
}
.pres-media-carousel-item--document .pres-media-carousel-thumb img {
    object-fit: contain;
}

/* ── S37 (hallmarking-triptych-gold S1, ledger S37/A70/A79/A81/D35) —
   container-aspect rationalization: thumbnails live in containers of the
   RIGHT SHAPE. The uniform 96×64 landscape box read as "a document crammed
   into a video frame" (A70: the Master's-thesis thumb). Strip height stays
   constant; WIDTH is type-shaped:
     document → 8.5/11 portrait (50px at 64h; matches the 300×389 curator card)
     video    → true 16:9 (114px at 64h)
     photo    → unchanged 96px (cover) */
.pres-media-carousel-item--document {
    width: 50px;
}
.pres-media-carousel-item--hero.pres-media-carousel-item--document {
    width: 66px;
}
.pres-media-carousel-item--document .pres-media-carousel-thumb img {
    /* L71/A120 (hardening-triptych-templates S2): never chop a document cover.
       The box is page-shaped (8.5/11), so a 300×389 curator card fills it with
       only a hairline letterbox — but a generic page-1 render whose aspect is
       NOT exactly 8.5/11 was getting its bottom half sliced under `cover`
       (Joe 2026-06-13 "U.S. Securities thumbnail bottom-half chopped — the part
       that leads to the document"). `contain` shows the WHOLE cover always. */
    object-fit: contain;
}
.pres-media-carousel-item--video {
    width: 114px;
}
.pres-media-carousel-item--hero.pres-media-carousel-item--video {
    width: 150px;
}
.pres-media-carousel-item--video .pres-media-carousel-thumb img {
    /* A81: never clip a video frame — 4:3 sources (the 1984 VHS) pillarbox
       inside the true-16:9 box instead of losing their top/bottom. */
    object-fit: contain;
}

/* Read mode: hide the carousel (gallery mode has its own affordances) */
.presentation-root.read-mode .pres-media-carousel {
    display: none;
}
.presentation-root.read-mode.has-carousel .pres-deck {
    bottom: 0;
}

/* ── M-2 Two presentation modes (mastering-about-production S1, 2026-05-25) ──
   Joe directive (MasterPass 31:03-31:41): "two versions of the story
   presentation area. One with the media carousel and one without … for the
   constellation display and its migration into clusters, take the whole
   screen. That'll be the test case for that mode where we're not using the
   media carousel."
   When a chapter or cue declares presentationMode: 'full-screen', the
   .presentation-root carries .presentation-mode-full-screen. The carousel
   hides; the deck (which normally reserves --pres-carousel-h at the bottom)
   extends to the viewport bottom. The narration-text strip (.pres-subtitles)
   stays anchored at bottom:0 because the constellation cue still narrates.
   Application points: PresentationPlayer._applyPresentationMode runs on
   chapter activate + cue change; cue-level override beats chapter default. */
.presentation-root.presentation-mode-full-screen .pres-media-carousel {
    display: none;
}
.presentation-root.presentation-mode-full-screen.has-carousel .pres-deck {
    bottom: 0;
}

/* ── S4 atelier-with-screenwriter (2026-05-27) — Taxonomy-aliased classes ──
   The S1 stage-config taxonomy (docs/atelier-with-screenwriter/
   STAGE_CONFIG_TAXONOMY.md) names two window templates W1/W2 and one or
   more stage configurations S1/S2.a..g per cue. PresentationPlayer.
   _applyPresentationMode delegates to LayoutTemplate.applyLayout which
   toggles .pres-window-W1|W2 and .pres-stage-S1|S2-{a..g} alongside the
   legacy .presentation-mode-full-screen alias. The two W2 selectors below
   are exact-behavior aliases of the M-2 rules above — cue bundles can
   now declare their layout intent in taxonomy terms; the engine renders
   identically until/unless a bundle opts into per-config refinement. */
.presentation-root.pres-window-W2 .pres-media-carousel {
    display: none;
}
.presentation-root.pres-window-W2.has-carousel .pres-deck {
    bottom: 0;
}

/* Stage-config hook selectors — placeholder, behavior-neutral. Cue bundles
   may scope inline CSS to a parent class like .pres-stage-S2-c to refine
   their own layout (e.g. .pres-stage-S2-c .bundle-primary { ... }) while
   the same bundle remains valid under the default S1 hook. The hooks DO
   NOT impose framework-level layout — Joe decides retrofit depth at SR
   (Open Decision O2). Authors extending the taxonomy add a sibling
   selector here + a row in STAGE_CONFIG_TAXONOMY.md per the §5 extension
   rule. */
.presentation-root.pres-stage-S1 { /* full horizontal — hook */ }
.presentation-root.pres-stage-S2-a { /* center primary + left description text */ }
.presentation-root.pres-stage-S2-b { /* left counter + right rotating-media parade */ }
.presentation-root.pres-stage-S2-c { /* center subject + flanking thumbnails (Manzanar) */ }
.presentation-root.pres-stage-S2-d { /* brain-left + parade-right */ }
.presentation-root.pres-stage-S2-e { /* stats-left + illustrative-graphics-right */ }
.presentation-root.pres-stage-S2-f { /* video-right + graphic-left */ }
.presentation-root.pres-stage-S2-g { /* media-driven-left + memory-driven-right */ }

/* Mobile: hide entirely — MobileStageLayout's middle-panel carousel
   surfaces supporting media on mobile per its existing pattern. */
@media (max-width: 768px) {
    .pres-media-carousel {
        display: none;
    }
    .presentation-root.has-carousel .pres-deck {
        bottom: 0;
    }
}

/* ── S5 atelier-with-screenwriter (2026-05-27) — Media Carousel pop-up ──
   Joe directive (S1 ledger §B5): a control in the right-side vertical
   chapter-nav panel pops up the SAME carousel as a modal panel with
   thumbnails 2× the size of the regular below-stage carousel's.
   Retains focus until closed. No conflict with a simultaneously-visible
   below-stage carousel. UMI Heart Principle clauses 1, 2, 3, 6, 7. */

/* Trigger button — lives in .pres-controls (the right-side chapter-nav
   strip) below Next. Matches the visual weight of the prev/next round
   buttons but with the amber accent of the carousel itself. */
.pres-carousel-popup-toggle {
    margin-top: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(232, 160, 64, 0.32);
    background: rgba(232, 160, 64, 0.10);
    color: rgba(232, 160, 64, 0.92);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms;
}
.pres-carousel-popup-toggle:hover,
.pres-carousel-popup-toggle:focus-visible {
    background: rgba(232, 160, 64, 0.22);
    border-color: rgba(232, 160, 64, 0.62);
    color: rgba(255, 232, 200, 1);
    outline: none;
}
.pres-carousel-popup-toggle[aria-expanded="true"] {
    background: rgba(232, 160, 64, 0.32);
    border-color: rgba(232, 160, 64, 0.78);
    color: white;
}

/* ── S38 (hallmarking-triptych-gold S1) — standing SOURCES + FERGI AI
   controls. Live in .pres-controls below the carousel-expand toggle,
   SEPARATED from the chapter controls (Joe, walkthrough 83:23 — so
   chapter-next isn't hit accidentally). Cool steel accent distinguishes
   the standing pair from the amber carousel control. */
.pres-standing-sep {
    width: 18px;
    height: 1px;
    margin: 10px auto 6px;
    background: rgba(180, 200, 230, 0.28);
}
.pres-sources-btn,
.pres-fergi-btn {
    margin-top: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(150, 180, 220, 0.32);
    background: rgba(150, 180, 220, 0.10);
    color: rgba(180, 205, 235, 0.92);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms;
}
.pres-sources-btn:hover,
.pres-sources-btn:focus-visible,
.pres-fergi-btn:hover,
.pres-fergi-btn:focus-visible {
    background: rgba(150, 180, 220, 0.22);
    border-color: rgba(150, 180, 220, 0.62);
    color: rgba(225, 238, 252, 1);
    outline: none;
}

/* ── LS-16 (Joe, 2026-08-14 About walk) — Fergi AI presented SALIENTLY at the
   bottom of the right-hand chapter-navigation strip.
   "speaking of the Fergi AI icon, it should be presented in a more salient way
    at the bottom of the navigation panel to the right of the Story Stage area."

   The control was already last in the strip; it was invisible because it wore
   the same cool-steel utility chrome as .pres-sources-btn above it. This block
   OVERRIDES that shared rule for Fergi only, on the three axes that make a
   control nameable at a glance — mark, size, identity — while leaving
   .pres-sources-btn byte-identical in behaviour and appearance.

   The pink/purple is not decoration: it is LS-15's doctrine ("the look and feel
   of the Fergi AI icon ... is distinctive (pink/purple) and different from the
   other modal container designs") carried onto the surface that opens it. The
   amber carousel control, the steel Sources control and the magenta Fergi
   control now read as three different things, which is what they are. */
/* A ROUNDED RECT, not a circle — and the shape change is a salience lever, not a
   styling whim. Two reasons, one of which cost an eyeball pass to learn:
     · the utility controls above are all 32px CIRCLES, so a differently-SHAPED
       control reads as a different kind of thing before any colour is processed;
     · a circle cannot hold a mark stacked over a caption. The first cut of this
       was a 46px circle with overflow:hidden, and the machine gate passed it —
       caption present, ink measured, 36x7. The CONTACT FRAME showed the caption
       sheared off at both ends, because a circle's usable width collapses toward
       its bottom edge exactly where the caption sits. The metric flags the
       candidate; the eye adjudicates (non-bio journal §56). The gate now carries
       the clip assertion that failure taught it. */
.pres-fergi-btn {
    width: 56px;
    height: 58px;
    margin-top: 10px;
    padding: 6px 4px 5px;
    border-radius: 16px;
    flex-direction: column;
    gap: 3px;
    border-color: rgba(255, 43, 209, 0.42);
    background: radial-gradient(circle at 50% 38%,
                                rgba(255, 43, 209, 0.20) 0%,
                                rgba(150, 90, 220, 0.12) 55%,
                                rgba(150, 180, 220, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(255, 43, 209, 0.10),
                0 2px 12px rgba(255, 43, 209, 0.16);
}
.pres-fergi-mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: block;
    /* The mark carries its own dark-teal ground, so it needs no plate behind it —
       only enough lift to separate it from the magenta wash. */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    transition: transform 200ms;
}
.pres-fergi-caption {
    font-size: 8px;
    line-height: 1.05;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 190, 240, 0.95);
    /* A caption is the cheapest salience there is: it removes the hover the
       icon-only strip otherwise demands before you know what this opens.
       It must therefore READ — nowrap plus a box wide enough to hold it, or the
       affordance is worse than the glyph it replaced. */
    white-space: nowrap;
}
.pres-fergi-btn:hover,
.pres-fergi-btn:focus-visible {
    border-color: rgba(255, 43, 209, 0.85);
    background: radial-gradient(circle at 50% 38%,
                                rgba(255, 43, 209, 0.34) 0%,
                                rgba(150, 90, 220, 0.20) 55%,
                                rgba(150, 180, 220, 0.10) 100%);
    box-shadow: 0 0 0 1px rgba(255, 43, 209, 0.24),
                0 3px 18px rgba(255, 43, 209, 0.30);
}
.pres-fergi-btn:hover .pres-fergi-mark,
.pres-fergi-btn:focus-visible .pres-fergi-mark {
    transform: scale(1.06);
}
.pres-fergi-btn:hover .pres-fergi-caption,
.pres-fergi-btn:focus-visible .pres-fergi-caption {
    color: rgba(255, 225, 250, 1);
}
@media (prefers-reduced-motion: reduce) {
    .pres-fergi-mark { transition: none; }
    .pres-fergi-btn:hover .pres-fergi-mark,
    .pres-fergi-btn:focus-visible .pres-fergi-mark { transform: none; }
}

/* Backdrop — covers the whole presentation surface. Click outside the
   popup closes it (modal pattern). The z-index sits above the carousel
   (75) and below the UMI modal so a thumbnail click stacks UMI above
   the popup; the popup itself closes on click per _handleClick. */
.pres-carousel-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    box-sizing: border-box;
    transition: opacity 220ms ease;
}
.pres-carousel-popup-backdrop.hidden {
    display: none;
}

/* Popup container — mirrors the jukebox styling of the below-stage
   carousel (amber edge, deep substrate, drop shadow) but at a modal
   scale. Width is generous (90vw, max 1400px) so 2× thumbs scroll. */
.pres-carousel-popup {
    width: 100%;
    max-width: 1400px;
    max-height: min(78vh, 620px);
    box-sizing: border-box;
    padding: 18px 22px 16px;
    background: linear-gradient(180deg, rgba(20, 30, 36, 0.96) 0%, rgba(12, 22, 28, 0.97) 100%);
    border: 1px solid rgba(232, 160, 64, 0.36);
    border-top-color: rgba(232, 160, 64, 0.56);
    border-radius: 12px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
    outline: none;
}

.pres-carousel-popup-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}
.pres-carousel-popup-label {
    flex: 1;
    font-size: calc(0.78rem * var(--type-scale, 1));
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(232, 160, 64, 0.88);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pres-carousel-popup-label::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(232, 160, 64, 0.72);
    box-shadow: 0 0 6px rgba(232, 160, 64, 0.5);
}

.pres-carousel-popup-scope {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.04);
}
.pres-carousel-popup-scope-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: calc(0.75rem * var(--type-scale, 1));
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 160ms ease;
}
.pres-carousel-popup-scope-btn:hover,
.pres-carousel-popup-scope-btn:focus-visible {
    color: white;
    outline: none;
}
.pres-carousel-popup-scope-btn.is-active {
    background: rgba(232, 160, 64, 0.86);
    color: rgba(20, 16, 8, 0.95);
    font-weight: 600;
}

.pres-carousel-popup-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
    font-size: calc(22px * var(--type-scale, 1));
    line-height: 1;
    cursor: pointer;
    transition: all 160ms;
}
.pres-carousel-popup-close:hover,
.pres-carousel-popup-close:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border-color: rgba(255, 255, 255, 0.36);
    outline: none;
}

.pres-carousel-popup-strip {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;   /* snap to the gutter, not the glass (Greg G-163) */
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px 10px;
    justify-content: safe center;
    scrollbar-width: thin;
    scrollbar-color: rgba(232, 160, 64, 0.42) transparent;
}
.pres-carousel-popup-strip::-webkit-scrollbar {
    height: 8px;
}
.pres-carousel-popup-strip::-webkit-scrollbar-thumb {
    background: rgba(232, 160, 64, 0.36);
    border-radius: 4px;
}
.pres-carousel-popup-strip::-webkit-scrollbar-track {
    background: transparent;
}

/* Items — explicitly 2× the regular carousel's geometry per Joe spec.
   Regular: 96px wide / 64px thumb / 0.66rem caption. Pop-up: 192/128/
   0.82rem (hero variant scales 256/168). */
.pres-carousel-popup-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 192px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.92);
    scroll-snap-align: start;
    transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.pres-carousel-popup-item:hover,
.pres-carousel-popup-item:focus-visible {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
    outline: none;
}
.pres-carousel-popup-item:active {
    transform: translateY(0);
}
.pres-carousel-popup-item--hero {
    width: 256px;
    border-color: rgba(245, 158, 11, 0.42);
}
.pres-carousel-popup-item--hero:hover {
    border-color: rgba(245, 158, 11, 0.72);
}

.pres-carousel-popup-thumb {
    width: 100%;
    height: 128px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.pres-carousel-popup-item--hero .pres-carousel-popup-thumb {
    height: 168px;
}
.pres-carousel-popup-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pres-carousel-popup-thumb-fallback {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.pres-carousel-popup-caption {
    font-size: calc(0.82rem * var(--type-scale, 1));
    line-height: 1.3;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Type-specific play badge for video thumbs */
.pres-carousel-popup-item--video .pres-carousel-popup-thumb::after {
    content: '\25B6';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.92);
    font-size: calc(26px * var(--type-scale, 1));
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}
/* S37 — popup mirrors the type-shaped containers (see below-stage rules):
   document 8.5/11 portrait, video true 16:9, photo unchanged. */
.pres-carousel-popup-item--document {
    width: 100px;
}
.pres-carousel-popup-item--hero.pres-carousel-popup-item--document {
    width: 131px;
}
.pres-carousel-popup-item--document .pres-carousel-popup-thumb img {
    /* L71/A120 (S2): contain — never chop a doc cover (matches the strip). */
    object-fit: contain;
}
.pres-carousel-popup-item--video {
    width: 228px;
}
.pres-carousel-popup-item--hero.pres-carousel-popup-item--video {
    width: 299px;
}
.pres-carousel-popup-item--video .pres-carousel-popup-thumb img {
    object-fit: contain; /* A81 — whole frame, never clipped */
}

.pres-carousel-popup-empty {
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: calc(0.88rem * var(--type-scale, 1));
    padding: 32px 16px;
}

/* Mobile: hide the popup + its trigger — MobileStageLayout's
   middle-panel carousel serves the same role on mobile. */
@media (max-width: 768px) {
    .pres-carousel-popup-backdrop,
    .pres-carousel-popup-toggle {
        display: none !important;
    }
}

/* Atelier production-modal mount carries the same .presentation-root class
   (PresentationPlayer.init adds it) so all rules above apply automatically.
   The Atelier modal places the player inside #atelierProductionModalMount;
   the carousel anchors to the same coordinate space as production. UMI Heart
   Principle clause 7 — Atelier MUST support the media-presentation chain. */