/**
 * Pocket Stage — mobile story presentation (illuminating-pocket-stage M1).
 * Z2 stage (essence cards / native-fit frames) + Z3 Words band + Z4 rail.
 *
 * Scoped ENTIRELY to the POCKET media queries: portrait mobile
 * (max-width:767px) OR a PHONE held landscape (orientation:landscape +
 * max-height:480px + pointer:coarse — orienting-about-pocket-voice S2, the
 * Three Voices foundation). A landscape iPhone is 852px WIDE, so the width
 * query alone silently un-styled the whole Pocket voice on rotation — the
 * root cause of "landscape inherits the Mac composite" (LS-9/LS-12).
 * pointer:coarse keeps desktop excluded: byte-zero desktop effect.
 * Tokens mirror the bespoke-cue :root block (substrate wash, teal/amber,
 * Playfair/Source Sans ramp) so a derived Essence card reads as kin to the
 * desktop art it stands in for.
 *
 * Accessibility: rem-scaled type (Dynamic Type reflow is safe — pure f(T)
 * recomputes every state); prefers-reduced-motion cuts transforms to opacity
 * steps; the amber word highlight pairs ≥4.5:1 on the substrate.
 */

@media (max-width: 767px), (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {

  /* ── iOS large-viewport fix on produced pages (standardizing-mobile-chrome S3) ──
     The produced story pages (prototype/stories/<slug>/) load about.css, not
     styles.css, so they never inherited the #1 fix (styles.css html,body{min-height:
     100lvh}). Without it they share the exact iOS SMALL-layout-viewport bug #1 just
     closed in-app: in a standalone viewport-fit=cover PWA the document resolves to the
     short viewport (e.g. 812 on iPhone 16 Pro = 874 − 62 safe-area-inset-top), which
     strands the universal control panel (position:fixed; bottom:0) 62px above the true
     bottom — the panel would FLOAT exactly as #1 did. `min-height:100lvh` makes iOS
     commit to the LARGE viewport (innerHeight 874) so `.mobile-tab-bar{bottom:0}` seats
     flush. 100vh is the fallback for engines without lvh. Mobile-scoped (byte-zero
     desktop effect); do NOT reintroduce any JS bottom-pin — the CSS handles it. */
  html, body {
    min-height: 100vh;
    min-height: 100lvh;
  }

  /* ── Frame plumbing ── */

  .presentation-root .mvd-frame {
    display: none;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }
  .presentation-root .mvd-frame.active {
    display: flex;
    flex: 1;
    min-height: 0;
    /* The Z3 Words band is RETIRED (recasting-pocket-stagecraft S1). The stage
       is now bounded by the flex column — Z2 deck (flex:1) / Z4 rail / Z5
       transport are in-flow siblings — so no fixed-overlay padding reservation
       is needed. Removing it dissolves the overlap Joe flagged (the movement
       title / featured text colliding with the transport column). */
  }

  /* ── LS-9 video-dominant guarantee (orienting-about-pocket-voice S2) ──
     A first-class mobile video (visual.mobile.kind:"video") IS the stage in
     BOTH orientations: absolute cover-fill of its frame, substrate behind so
     letterboxed metadata gaps never read as dead black (LS-8). This rule was
     the doctrine's stated contract (AT-6 "CSS object-fit:cover") but had no
     stylesheet realization — a video mount smaller than a thumbnail is a
     broken cue. */
  .presentation-root .mvd-frame[data-mvd-tier="video"] {
    background: #0d2a30;
  }
  .mvd-frame video.mvd-video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #0d2a30;
  }

  /* Treated-pending fit wrapper (pre-M3 posture): contain the desktop
     renderer inside Z2 — scaled, scrollable if taller, never clipped blank. */
  .presentation-root .mvd-frame.mvd-fit {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .presentation-root .mvd-frame.mvd-fit > * {
    max-width: 100%;
  }
  .presentation-root .mvd-frame.mvd-fit img,
  .presentation-root .mvd-frame.mvd-fit svg,
  .presentation-root .mvd-frame.mvd-fit video,
  .presentation-root .mvd-frame.mvd-fit iframe {
    max-width: 100% !important;
    height: auto;
  }

  /* ── Essence card (Z2) — GRAPHIC-FIRST (recasting-pocket-stagecraft S1) ──
     Focal photography LEADS; each idea IGNITES as a crafted SVG symbol on its
     spoken beat, strung on a connective thread so the ideas argue, not just
     appear. NO on-stage prose — kicker/title/quote/text-chips are retired; the
     words live only behind the Download/View-PDF control. */

  .mvd-essence {
    --pkt-substrate: #0d2a30;
    --pkt-teal: #6DD4D4;
    --pkt-amber: #e8a040;
    --pkt-amber-bright: #f0b860;
    --pkt-fg-1: #e0e6e8;
    --pkt-fg-2: #a8b4b8;
    --pkt-fg-3: #6c787e;
    --pkt-ease: cubic-bezier(0.33, 0, 0.2, 1);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: max(0.9rem, env(safe-area-inset-top)) 1rem 0.6rem;
    background:
      radial-gradient(ellipse 120% 80% at 50% 0%, rgba(26, 82, 88, 0.35), transparent 70%),
      var(--pkt-substrate);
    color: var(--pkt-fg-1);
    overflow: hidden; /* a composed graphic stage, never a scroll document */
  }
  /* With no focal photography, the crafted marks become the hero of the stage. */
  .mvd-essence.mvd-no-media { justify-content: center; gap: 1.4rem; }

  /* Focal media zone — 1 large, or large + peek pair. UMI-hot tiles. */
  .mvd-essence-media {
    display: grid;
    gap: 8px;
    min-height: 0;
    flex: 1 1 auto;
  }
  .mvd-essence-media.mvd-media-n2 { grid-template-columns: 3fr 2fr; }
  .mvd-essence-media.mvd-media-n3 { grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; }
  .mvd-essence-media.mvd-media-n3 .mvd-essence-tile:first-child { grid-row: 1 / 3; }

  .mvd-essence-tile {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(20, 60, 66, 0.5);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 900ms var(--pkt-ease), transform 900ms var(--pkt-ease);
    min-height: 72px;
  }
  .mvd-essence-tile.in { opacity: 1; transform: none; }
  /* S5 D4 (aspect-ratio class fix): the tile had only `min-height: 72px`, so its
     shape was whatever the pocket stage could spare and the cover-crop moved
     with it. This rule is fleet-wide — every pocket story's essence tiles — so
     the cell now declares 3/2, the dominant shape of the vault's scanned frames.
     cover is kept: cover-not-contain is craft law (01c wedding, praised). */
  .mvd-essence-tile { aspect-ratio: 3 / 2; }
  .mvd-essence-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mvd-essence-tile.mvd-tile-missing { display: none; } /* assets never gate */

  /* ── The idea MARKS — crafted SVG symbols igniting on their spoken beat ──
     A row of symbols strung on a connective thread; each mark inks in + brightens
     to amber as its idea arrives (pure f(T), `.lit`). The thread links draw
     between marks so the composite ARGUES (de-PowerPoint: meaning in the object's
     own body, TIER_PARITY §5.2). NO text — the beat label is aria-only. */
  .mvd-marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 6px;
    flex: 0 0 auto;
    padding: 0.2rem 0;
  }
  /* When the marks are the hero (no focal photo) they breathe larger + center. */
  .mvd-no-media .mvd-marks { flex: 1 1 auto; align-content: center; gap: 10px 12px; }

  .mvd-mark {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    color: var(--pkt-teal);
    opacity: 0.35;
    transform: scale(0.82);
    transition: opacity 620ms var(--pkt-ease), transform 620ms var(--pkt-ease), color 620ms var(--pkt-ease);
  }
  .mvd-no-media .mvd-mark { width: 4.2rem; height: 4.2rem; }
  .mvd-mark.lit { opacity: 1; transform: none; color: var(--pkt-amber-bright); }
  /* UMI/person-hot marks (a portrait rides the mark) invite the tap. */
  .mvd-mark[data-media-id], .mvd-mark[data-person-id] { cursor: pointer; }

  .pkt-sym { width: 100%; height: 100%; display: block; overflow: visible; }
  .pkt-sym .pkt-draw {
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;         /* undrawn until lit (pathLength=1 normalized) */
  }
  .pkt-sym .pkt-line { stroke-width: 3.5; }
  .pkt-sym .pkt-accent { stroke: var(--pkt-amber); }
  .pkt-sym .pkt-core { fill: var(--pkt-amber); stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); }
  .mvd-mark.lit .pkt-sym .pkt-draw,
  .mvd-emblem .pkt-sym .pkt-draw {
    stroke-dashoffset: 0;         /* the pen draws the symbol in */
    transition: stroke-dashoffset 900ms var(--pkt-ease);
  }
  .mvd-mark.lit .pkt-sym .pkt-core,
  .mvd-emblem .pkt-sym .pkt-core {
    opacity: 1; transform: scale(1);
    transition: opacity 500ms var(--pkt-ease) 260ms, transform 500ms var(--pkt-ease) 260ms;
  }

  /* Infographic DATA label under a mark — a number / year / short code (data-viz
     is legal on the stage; narration prose is not). */
  .mvd-mark-data {
    position: absolute;
    bottom: -0.85rem;
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--pkt-fg-3);
    font-variant-numeric: tabular-nums;
    transition: color 620ms var(--pkt-ease);
    white-space: nowrap;
  }
  .mvd-mark.lit .mvd-mark-data { color: var(--pkt-amber-bright); }

  /* The connective thread — a short segment between two marks. It FILLS
     CONTINUOUSLY across the narration window between its two beats (--fill,
     driven by the director as pure f(p)) so the argument visibly advances at
     the pace of speech — the stage develops BETWEEN beats, not only at them
     (fable-mobile-toolkit 2026-07-07, AT-6 re-tune). */
  .mvd-mark-link {
    flex: 0 0 auto;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background-color: rgba(109, 212, 212, 0.18);
    background-image: linear-gradient(90deg, var(--pkt-amber, #e8a040), var(--pkt-amber, #e8a040));
    background-repeat: no-repeat;
    background-size: calc(var(--fill, 0) * 100%) 100%;
    transform: scaleX(0.4);
    transform-origin: left center;
    transition: transform 620ms var(--pkt-ease);
  }
  .mvd-mark-link.lit { background-color: rgba(232, 160, 64, 0.4); transform: none; }
  .mvd-no-media .mvd-mark-link { width: 22px; }

  /* The NOW cursor — the most-recently-arrived idea carries a gentle living
     emphasis that travels with the narration (ambient life, clock-free). */
  @keyframes mvd-now-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
  }
  .mvd-mark.now {
    animation: mvd-now-breathe 4.5s ease-in-out infinite;
  }
  .mvd-mark.now .pkt-sym { filter: drop-shadow(0 0 6px rgba(240, 184, 96, 0.55)); }
  @media (prefers-reduced-motion: reduce) {
    .mvd-mark.now { animation: none; }
  }

  /* The lone ambient emblem — an un-derived cue's dignified graphic placeholder
     (fail toward a graphic, never a void). It breathes so the stage is alive. */
  .mvd-essence-emblem { align-items: center; justify-content: center; }
  .mvd-emblem {
    width: 7rem;
    height: 7rem;
    color: var(--pkt-teal);
    opacity: 0.7;
    animation: pkt-emblem-breathe 5.5s ease-in-out infinite;
  }
  .mvd-emblem .pkt-sym .pkt-accent { stroke: var(--pkt-amber); }
  @keyframes pkt-emblem-breathe {
    0%, 100% { opacity: 0.55; transform: scale(0.97); }
    50%      { opacity: 0.85; transform: scale(1.0); }
  }

  /* ── Z4 media-rail thumbs (base class — shared with the stat-rollup rail) ── */
  .mvd-rail-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(20, 60, 66, 0.5);
  }
  .mvd-rail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mvd-rail-thumb.mvd-tile-missing { display: none; }

  /* ── Z3 (the Words band) is RETIRED — no on-stage text, no toggle. ──
     The narration text lives only behind the Z1 Download/View-PDF control.
     The legacy subtitle strips are still suppressed defensively (the in-app
     scaffold path may build them; the produced player no longer does). */
  /* anchoring-mobile-stagecraft S3 — #2: the desktop caption strip leaked.
     DOMBuilder.createSubtitleBar() (PresentationPlayer.js:279) emits class
     `.pres-subtitles` (id `subtitleBar`), NOT `.pres-subtitle-bar` — the old
     selector matched NO element, so the narration text ("Here's what I know
     about Laura Updegrove…") rendered at the bottom of the Pocket Stage. The
     produced story pages load pocket-stage.css but NOT mobile-presentation.css
     (whose `.presentation-root .pres-subtitles` display-none rule would
     otherwise have hidden it), so this rule is the sole suppressor there. Target the real
     class + the mobile-strip + the narration-text-panel alias. No toggle — the
     on-stage narration text is gone on mobile (AT-2). Narration AUDIO is
     untouched (Joe's TTS is authoritative). */
  /* pragma: ffa-bottombar-allowed — reason: the Pocket Stage retires on-stage
     narration text per AT-2 (recasting-pocket-stagecraft, 2026-07-04) + Joe S0
     directive #2 for anchoring-mobile-stagecraft (both NEWER than the 2026-05-18
     A3 always-render directive). The escape hatch is the Bio PDF Download/View
     control; narration AUDIO is unchanged. Same sanctioned mobile-substitute
     case as mobile-presentation.css:340. */
  .presentation-root.pocket-stage-active .pres-subtitles,
  .presentation-root.pocket-stage-active .mobile-subtitle-strip,
  .presentation-root.pocket-stage-active .narration-text-panel {
    display: none !important;
  }

  /* ── Z4 — the persistent media carousel (AT-2b) ──────────────────────────
     A first-class, always-discoverable rail bound to the active chapter's
     media. An IN-FLOW flex sibling of the deck + transport under the
     presentation-root, ordered between them (order 80 < transport 90) so it
     never overlaps — the root fix for the collision the fixed Words band + its
     padding guess used to cause. Tap a thumb → freeze → UMI → resume. */
  /* POCKET RESTACK order swap (translating-mobile-stagecraft LS-2, 2026-07-05,
     Joe directive): the media carousel moves to the ABSOLUTE BOTTOM of the
     screen with the combined transport bar directly above it. (The flex
     column these orders act in is established by the body.pocket-restack
     scope at the end of this file.) */
  .presentation-root.pocket-stage-active > .mobile-transport { order: 80; }
  .presentation-root.pocket-stage-active > .pocket-rail { order: 90; }

  .pocket-rail {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px) * 0);
    background: linear-gradient(180deg, rgba(9, 31, 36, 0.0), rgba(9, 31, 36, 0.55));
    scrollbar-width: none;
  }
  .pocket-rail::-webkit-scrollbar { display: none; }
  .pocket-rail.pocket-rail-empty { display: none; } /* no media → no empty zone */
  .pocket-rail-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid rgba(109, 212, 212, 0.2);
    border-radius: 9px;
    overflow: hidden;
    background: rgba(20, 60, 66, 0.5);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 200ms ease, transform 200ms ease;
  }
  .pocket-rail-thumb:active { transform: scale(0.94); border-color: var(--pkt-amber, #e8a040); }
  .pocket-rail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pocket-rail-thumb.pocket-rail-thumb-missing { display: none; } /* photos: assets never gate */

  /* ── Supporting-shelf rail tiles (completing-custody-carousels S4, LS-2 + LS-3) ──
     DOCUMENT tiles (the KG-custody proof) + EXTERNAL hot-link tiles + non-clickable
     CITATION tiles. A doc/external tile NEVER vanishes on a thumbnail 404 — it falls
     back to an SVG glyph (the LS-2 fix: a doc must always be discoverable). */
  .pocket-rail-thumb--document {
    border-color: rgba(232, 160, 64, 0.42);           /* amber ⇒ "a record, not a snapshot" */
    background: rgba(28, 46, 40, 0.6);
  }
  .pocket-rail-thumb--external {
    border-color: rgba(109, 212, 212, 0.55);          /* teal ⇒ "an outbound reference" */
    background: rgba(16, 44, 52, 0.6);
  }
  .pocket-rail-thumb--citation {
    border-style: dashed;                              /* by-reference, not held */
    border-color: rgba(109, 212, 212, 0.35);
    background: rgba(16, 40, 46, 0.5);
    cursor: default;
  }
  .pocket-rail-thumb--citation:active { transform: none; }  /* non-clickable */

  /* The glyph fallback (doc/external/citation with no image). Centered, stroke-first. */
  .pocket-rail-glyph { width: 100%; height: 100%; display: block; padding: 10px; box-sizing: border-box; color: var(--pkt-teal, #6dd4d4); }
  .pocket-rail-thumb--document .pocket-rail-glyph { color: var(--pkt-amber, #e8a040); }
  .pocket-rail-glyph .pkt-draw { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  .pocket-rail-glyph .pkt-line { stroke-width: 4; }
  .pocket-rail-glyph .pkt-accent { stroke: var(--pkt-amber, #e8a040); fill: none; }
  .pocket-rail-thumb--glyph { background: rgba(20, 60, 66, 0.5); }

  /* External-link badge — the special-document treatment that marks a tile as an
     inbound hot-link to an external source (distinct from a held document). */
  .pocket-rail-thumb--external { position: relative; }
  .pocket-rail-extlink {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    background: var(--pkt-teal, #6dd4d4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  .pocket-rail-extlink::before {
    content: "";
    position: absolute;
    inset: 0;
    /* a small ↗ arrow-out-of-box glyph, drawn in the tile background colour */
    background:
      linear-gradient(45deg, transparent 45%, rgba(9, 31, 36, 0.9) 45%, rgba(9, 31, 36, 0.9) 55%, transparent 55%) center / 10px 10px no-repeat;
  }

  /* ── Z1 — the Download/View-PDF control (AT-2) ───────────────────────────
     The ONLY path to the words. A subtle pill, top-left (clear of the top-right
     safety-exit X). Mounts only when the subject has a published bio PDF. */
  .pocket-bio-pill {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 12px;
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(109, 212, 212, 0.32);
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #cfe6e6;
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
  }
  .pocket-bio-pill svg { flex: 0 0 auto; color: var(--pkt-amber-bright, #f0b860); }
  .pocket-bio-pill:active { background: rgba(0, 0, 0, 0.78); }

  /* The self-contained PDF overlay: VIEW (in-viewer iframe) + DOWNLOAD. */
  .pocket-pdf-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    background: #0a1417;
  }
  .pocket-pdf-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
    background: rgba(9, 31, 36, 0.96);
    border-bottom: 1px solid rgba(109, 212, 212, 0.18);
  }
  .pocket-pdf-close, .pocket-pdf-download {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(109, 212, 212, 0.22);
    background: rgba(20, 60, 66, 0.5);
    color: #cfe6e6;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .pocket-pdf-download { color: var(--pkt-amber-bright, #f0b860); }
  .pocket-pdf-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #e6ecec;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
  .pocket-pdf-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #333;
  }

  /* ════════════════════════════════════════════════════════════════════
     Treated adapters (adapting-portrait-cues M3, 10 §5.4) — mobile-only
     portrait re-layouts of the census D-types. Shared tokens live on the
     frame so every adapter reads as kin to the essence card + desktop art.
     ════════════════════════════════════════════════════════════════════ */

  .presentation-root .mvd-frame {
    --pkt-substrate: #0d2a30;
    --pkt-teal: #6DD4D4;
    --pkt-amber: #e8a040;
    --pkt-amber-bright: #f0b860;
    --pkt-fg-1: #e0e6e8;
    --pkt-fg-2: #a8b4b8;
    --pkt-fg-3: #6c787e;
    --pkt-ease: cubic-bezier(0.33, 0, 0.2, 1);
  }
  /* Adapter frames scroll their portrait content within Z2. */
  .presentation-root .mvd-frame[data-mvd-adapter] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(ellipse 120% 80% at 50% 0%, rgba(26, 82, 88, 0.35), transparent 70%),
      var(--pkt-substrate);
    color: var(--pkt-fg-1);
    padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.5rem;
  }

  /* ── screenshot ── */
  .mvd-shot { display: flex; flex-direction: column; gap: 0.6rem; }
  .mvd-shot-fig {
    border-radius: 10px;
    overflow: hidden;
    background: rgba(20, 60, 66, 0.5);
    border: 1px solid rgba(109, 212, 212, 0.15);
  }
  .mvd-shot-img { width: 100%; height: auto; display: block; }
  .mvd-shot-missing { display: none; } /* assets never gate (P8) */
  .mvd-shot-placeholder {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 2.5rem 1rem; border-radius: 10px;
    background: rgba(20, 60, 66, 0.4);
    color: var(--pkt-fg-2); font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.9rem; text-align: center;
  }
  .mvd-shot-placeholder-icon { font-size: 2rem; }
  .mvd-shot-caption {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.85rem; line-height: 1.4; color: var(--pkt-fg-2);
    display: flex; align-items: center; gap: 0.5rem;
  }
  .mvd-shot-zoom {
    margin-left: auto; flex: 0 0 auto;
    min-width: 44px; min-height: 44px;
    border: 1px solid rgba(109, 212, 212, 0.3); border-radius: 8px;
    background: rgba(20, 60, 66, 0.5); color: var(--pkt-teal);
    font-size: 1.1rem; line-height: 1;
  }

  /* ── screenshot-deck (vertical deck, one focal + peek edges) ── */
  .mvd-deck { display: flex; flex-direction: column; gap: 0.6rem; height: 100%; min-height: 0; }
  .mvd-deck-heading { text-align: center; }
  .mvd-deck-heading-icon { font-size: 1.4rem; }
  .mvd-deck-heading-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.3rem; font-weight: 600; color: var(--pkt-fg-1); margin: 0.2rem 0 0;
  }
  .mvd-deck-heading-sub {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.85rem; color: var(--pkt-fg-2); margin: 0.15rem 0 0;
  }
  .mvd-deck-empty { color: var(--pkt-fg-3); text-align: center; padding: 2rem; }
  .mvd-deck-stack { position: relative; flex: 1 1 auto; min-height: 220px; touch-action: pan-y; }
  .mvd-deck-card {
    position: absolute; left: 6%; right: 6%; top: 50%;
    border-radius: 12px; overflow: hidden;
    background: rgba(13, 42, 48, 0.95);
    border: 1px solid rgba(109, 212, 212, 0.2);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    transform: translateY(-50%) scale(0.78); opacity: 0; pointer-events: none;
    transition: transform 420ms var(--pkt-ease), opacity 420ms var(--pkt-ease);
    z-index: 1;
  }
  .mvd-deck-card[data-rel="0"] { transform: translateY(-50%) scale(1); opacity: 1; pointer-events: auto; z-index: 3; }
  .mvd-deck-card[data-rel="-1"] { transform: translateY(calc(-50% - 42%)) scale(0.84); opacity: 0.4; z-index: 2; }
  .mvd-deck-card[data-rel="1"] { transform: translateY(calc(-50% + 42%)) scale(0.84); opacity: 0.4; z-index: 2; }
  .mvd-deck-img { width: 100%; height: auto; display: block; }
  .mvd-deck-missing { display: none; }
  .mvd-deck-placeholder {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    padding: 2rem 1rem; color: var(--pkt-fg-2); text-align: center;
    font-family: 'Source Sans 3', -apple-system, sans-serif; font-size: 0.85rem;
  }
  .mvd-deck-placeholder-icon { font-size: 1.8rem; }
  .mvd-deck-caption {
    padding: 0.4rem 0.7rem; font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.78rem; color: var(--pkt-fg-2);
  }

  /* ── diagram (connection-flow vertical ladder / architecture stack) ── */
  .mvd-diagram { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; }
  .mvd-flow-node {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.95rem; font-weight: 600; text-align: center;
    padding: 0.7rem 1rem; border-radius: 10px;
    background: rgba(20, 60, 66, 0.55); border: 1px solid rgba(109, 212, 212, 0.28);
    color: var(--pkt-fg-1);
  }
  .mvd-flow-arrow { text-align: center; color: var(--pkt-teal); font-size: 1.2rem; line-height: 1; }
  .mvd-diagram-desc {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.85rem; color: var(--pkt-fg-2); text-align: center; margin-top: 0.3rem;
  }
  .mvd-arch-layer {
    display: flex; flex-direction: column; gap: 2px;
    padding: 0.7rem 0.9rem; border-radius: 10px;
    background: rgba(20, 60, 66, 0.5); border: 1px solid rgba(109, 212, 212, 0.2);
  }
  .mvd-arch-dimmed { opacity: 0.5; }
  /* 13px legibility floor — the adapter scale check (10 §5.4). */
  .mvd-arch-label { font-family: 'Source Sans 3', -apple-system, sans-serif; font-weight: 600; font-size: max(0.9rem, 13px); color: var(--pkt-fg-1); }
  .mvd-arch-tech { font-size: max(0.82rem, 13px); color: var(--pkt-teal); font-family: 'Source Sans 3', -apple-system, sans-serif; }
  .mvd-arch-detail { font-size: max(0.8rem, 13px); color: var(--pkt-fg-2); font-family: 'Source Sans 3', -apple-system, sans-serif; }

  /* ── timeline (single vertical rail, alternating accent, sticky years) ── */
  .mvd-timeline { position: relative; padding-left: 1.4rem; }
  .mvd-timeline::before {
    content: ''; position: absolute; left: 6px; top: 0.4rem; bottom: 0.4rem;
    width: 2px; background: linear-gradient(180deg, var(--pkt-teal), rgba(109, 212, 212, 0.2));
  }
  .mvd-timeline-year {
    position: sticky; top: 0; z-index: 2;
    margin: 0.4rem 0 0.3rem -1.4rem; padding: 0.2rem 0.6rem;
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
    color: var(--pkt-amber); text-transform: uppercase;
    background: linear-gradient(90deg, var(--pkt-substrate) 70%, transparent);
    width: fit-content;
  }
  .mvd-timeline-event { position: relative; display: flex; gap: 0.6rem; padding: 0.5rem 0; }
  .mvd-timeline-dot { position: absolute; left: calc(-1.4rem + 1px); top: 0.65rem; width: 12px; height: 12px; }
  .mvd-timeline-dot-inner {
    display: block; width: 12px; height: 12px; border-radius: 50%;
    background: var(--pkt-substrate); border: 2px solid var(--pkt-teal);
  }
  .mvd-timeline-alt .mvd-timeline-dot-inner { border-color: var(--pkt-amber); }
  .mvd-timeline-body { display: flex; flex-direction: column; gap: 1px; }
  .mvd-timeline-date {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.75rem; font-weight: 600; color: var(--pkt-teal);
  }
  .mvd-timeline-alt .mvd-timeline-date { color: var(--pkt-amber-bright); }
  .mvd-timeline-label {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.95rem; line-height: 1.35; color: var(--pkt-fg-1);
  }

  /* ── stat-grid (2-column count-up cards) ── */
  .mvd-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mvd-stat-card {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 1rem 0.6rem; border-radius: 12px; text-align: center;
    background: rgba(20, 60, 66, 0.5); border: 1px solid rgba(109, 212, 212, 0.18);
  }
  .mvd-stat-icon { font-size: 1.3rem; }
  .mvd-stat-number {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.9rem; font-weight: 700; line-height: 1;
    color: var(--pkt-amber-bright); font-variant-numeric: tabular-nums;
  }
  .mvd-stat-label {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.78rem; color: var(--pkt-fg-2); line-height: 1.2;
  }

  /* ── stat-dashboard (horizontal bars, one metric per row) ── */
  .mvd-dash { display: flex; flex-direction: column; gap: 0.8rem; }
  .mvd-dash-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.35rem; font-weight: 600; color: var(--pkt-fg-1);
  }
  .mvd-dash-subtitle {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.85rem; color: var(--pkt-fg-2); margin-top: 2px;
  }
  .mvd-dash-rows { display: flex; flex-direction: column; gap: 0.7rem; }
  .mvd-dash-row {
    opacity: 0; transform: translateY(8px);
    transition: opacity 500ms var(--pkt-ease), transform 500ms var(--pkt-ease);
  }
  .mvd-dash-row.in { opacity: 1; transform: none; }
  .mvd-dash-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 4px; }
  .mvd-dash-row-label {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.9rem; color: var(--pkt-fg-1); display: inline-flex; align-items: center; gap: 5px;
  }
  .mvd-dash-row-number {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem; font-weight: 700; color: var(--pkt-amber-bright);
    font-variant-numeric: tabular-nums;
  }
  .mvd-dash-track {
    height: 10px; border-radius: 999px; overflow: hidden;
    background: rgba(20, 60, 66, 0.6);
  }
  .mvd-dash-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, var(--pkt-teal), var(--pkt-amber));
  }

  /* ════════════════════════════════════════════════════════════════════
     S2 Treated adapters — cards, flows, svg-scale, media, compound.
     Every reveal is a `.in`/`.lit`/`.on`/`.shown` toggle driven by the
     adapter's pure-f(p) update(); CSS only styles the two states + transition.
     ════════════════════════════════════════════════════════════════════ */

  /* ── card family: feature-cards / story-cards / icon-feature ── */
  .mvd-cards { display: flex; flex-direction: column; gap: 0.6rem; }
  .mvd-card {
    display: flex; gap: 0.7rem; align-items: flex-start;
    padding: 0.85rem 0.9rem; border-radius: 12px;
    background: rgba(20, 60, 66, 0.5); border: 1px solid rgba(109, 212, 212, 0.18);
    opacity: 0; transform: translateY(8px);
    transition: opacity 500ms var(--pkt-ease), transform 500ms var(--pkt-ease);
  }
  .mvd-card.in { opacity: 1; transform: none; }
  .mvd-card-hidden { display: none; }
  .mvd-cards-expanded .mvd-card-hidden { display: flex; opacity: 1; transform: none; }
  .mvd-card-highlight { border-color: var(--pkt-amber); background: rgba(40, 74, 66, 0.55); }
  .mvd-card-feature { flex-direction: column; align-items: center; text-align: center; }
  .mvd-card-icon { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
  .mvd-card-icon svg { width: 34px; height: 34px; }
  .mvd-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mvd-card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.05rem; font-weight: 600; color: var(--pkt-fg-1); line-height: 1.15;
  }
  .mvd-card-sub {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.78rem; color: var(--pkt-amber-bright);
  }
  .mvd-card-desc {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.86rem; color: var(--pkt-fg-2); line-height: 1.35;
  }
  .mvd-card-link {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.85rem; color: var(--pkt-teal); text-decoration: none; margin-top: 3px;
  }
  .mvd-card-more {
    align-self: center; min-height: 44px; padding: 0 1.1rem; margin-top: 2px;
    border-radius: 999px; border: 1px solid rgba(109, 212, 212, 0.3);
    background: rgba(20, 60, 66, 0.6); color: var(--pkt-teal);
    font-family: 'Source Sans 3', -apple-system, sans-serif; font-size: 0.85rem;
  }

  /* ── pipeline: horizontal flow → vertical step ladder ── */
  .mvd-pipeline-wrap { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
  .mvd-pipeline { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; width: 100%; }
  .mvd-pipe-step {
    padding: 0.75rem 0.9rem; border-radius: 12px; text-align: center;
    background: rgba(20, 60, 66, 0.5); border: 1px solid rgba(109, 212, 212, 0.18);
    color: var(--pkt-fg-2);
    opacity: 0.45; transform: scale(0.98);
    transition: opacity 450ms var(--pkt-ease), transform 450ms var(--pkt-ease), border-color 450ms var(--pkt-ease), color 450ms var(--pkt-ease);
  }
  .mvd-pipe-step.lit { opacity: 1; transform: none; color: var(--pkt-fg-1); border-color: var(--pkt-amber); }
  .mvd-pipe-step-label {
    font-family: 'Source Sans 3', -apple-system, sans-serif; font-size: 0.95rem; font-weight: 600;
  }
  .mvd-pipe-arrow {
    text-align: center; color: var(--pkt-fg-3); font-size: 1.1rem; line-height: 1;
    transition: color 450ms var(--pkt-ease);
  }
  .mvd-pipe-arrow.lit { color: var(--pkt-amber); }
  .mvd-pipeline-label {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.85rem; color: var(--pkt-fg-2); text-align: center;
  }

  /* ── narration-pipeline: vertical stage ladder ── */
  .mvd-narrpipe { display: flex; flex-direction: column; gap: 0.6rem; }
  .mvd-narrpipe-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.3rem; font-weight: 600; color: var(--pkt-fg-1); text-align: center;
  }
  .mvd-narrpipe-ladder { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; }
  .mvd-narr-stage {
    padding: 0.7rem 0.85rem; border-radius: 12px;
    background: rgba(20, 60, 66, 0.5); border: 1px solid rgba(109, 212, 212, 0.16);
    opacity: 0.4; transform: translateY(6px);
    transition: opacity 450ms var(--pkt-ease), transform 450ms var(--pkt-ease), border-color 450ms var(--pkt-ease);
  }
  .mvd-narr-stage.lit { opacity: 1; transform: none; border-color: rgba(232, 160, 64, 0.4); }
  .mvd-narr-label {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--pkt-teal); margin-bottom: 4px;
  }
  .mvd-narr-arrow { text-align: center; color: var(--pkt-fg-3); font-size: 1rem; transition: color 450ms var(--pkt-ease); }
  .mvd-narr-arrow.lit { color: var(--pkt-amber); }
  .mvd-narr-wave { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
  .mvd-narr-bar {
    flex: 1 1 auto; background: linear-gradient(180deg, var(--pkt-amber), var(--pkt-teal));
    border-radius: 2px; opacity: 0; transition: opacity 220ms linear;
  }
  .mvd-narr-bar.on { opacity: 0.85; }
  .mvd-narr-transcript {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.92rem; line-height: 1.5; color: var(--pkt-fg-2);
  }
  .mvd-narr-word { opacity: 0.28; transition: opacity 200ms linear; }
  .mvd-narr-word.shown { opacity: 1; }
  .mvd-narr-keyword { color: var(--pkt-amber-bright); font-weight: 700; }
  .mvd-narr-badge {
    display: inline-block; padding: 0.35rem 0.9rem; border-radius: 999px;
    background: rgba(232, 160, 64, 0.18); border: 1px solid var(--pkt-amber);
    color: var(--pkt-amber-bright); font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.05rem; font-weight: 700;
  }
  .mvd-narr-photo {
    border-radius: 10px; overflow: hidden; opacity: 0; transform: scale(0.96);
    transition: opacity 500ms var(--pkt-ease), transform 500ms var(--pkt-ease);
  }
  .mvd-narr-stage.lit .mvd-narr-photo { opacity: 1; transform: none; }
  .mvd-narr-photo-img { width: 100%; height: auto; display: block; }
  .mvd-narr-photo-placeholder { height: 140px; background: rgba(20, 60, 66, 0.6); }
  .mvd-narr-photo-missing { display: none; }
  .mvd-narr-caption {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.8rem; color: var(--pkt-fg-2); padding: 5px 8px;
  }

  /* ── stat-rollup: counter focal + Z4 rail ── */
  .mvd-rollup { display: flex; flex-direction: column; gap: 0.8rem; }
  .mvd-rollup-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.35rem; font-weight: 600; color: var(--pkt-fg-1); text-align: center;
  }
  .mvd-rollup-subtitle {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.85rem; color: var(--pkt-fg-2); text-align: center;
  }
  .mvd-rollup-shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mvd-rollup-stat {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 1rem 0.6rem; border-radius: 12px; text-align: center;
    background: rgba(20, 60, 66, 0.5); border: 1px solid rgba(109, 212, 212, 0.18);
    opacity: 0; transform: translateY(8px);
    transition: opacity 500ms var(--pkt-ease), transform 500ms var(--pkt-ease);
  }
  .mvd-rollup-stat.in { opacity: 1; transform: none; }
  .mvd-rollup-icon { font-size: 1.3rem; }
  .mvd-rollup-number {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.9rem; font-weight: 700; line-height: 1;
    color: var(--pkt-amber-bright); font-variant-numeric: tabular-nums;
  }
  .mvd-rollup-label {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.78rem; color: var(--pkt-fg-2); line-height: 1.2;
  }
  .mvd-rollup-rail {
    display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .mvd-rollup-rail .mvd-rail-thumb { flex: 0 0 auto; width: 88px; height: 88px; }

  /* ── constellation: fit-width svg, declutter labels ── */
  .mvd-constellation { width: 100%; height: auto; display: block; }
  .mvd-cst-edge { stroke: rgba(109, 212, 212, 0.2); stroke-width: 2; transition: stroke 450ms var(--pkt-ease); }
  .mvd-cst-edge.lit { stroke: rgba(232, 160, 64, 0.6); }
  .mvd-cst-node { opacity: 0.4; transition: opacity 450ms var(--pkt-ease); }
  .mvd-cst-node.lit, .mvd-cst-focal { opacity: 1; }
  .mvd-cst-ring { fill: none; stroke: var(--pkt-teal); stroke-width: 2; }
  .mvd-cst-node.lit .mvd-cst-ring, .mvd-cst-focal .mvd-cst-ring { stroke: var(--pkt-amber); }
  .mvd-cst-fallback { fill: rgba(20, 60, 66, 0.9); }
  .mvd-cst-initial {
    fill: var(--pkt-fg-1); font-family: 'Playfair Display', Georgia, serif;
    font-size: 34px; font-weight: 700;
  }
  /* Declutter: labels hidden by default; only the focal + lit nodes name. */
  .mvd-cst-label {
    fill: var(--pkt-fg-1); font-family: 'Source Sans 3', sans-serif; font-size: 22px;
    opacity: 0; transition: opacity 450ms var(--pkt-ease);
  }
  .mvd-cst-node.lit .mvd-cst-label, .mvd-cst-focal .mvd-cst-label { opacity: 0.95; }

  /* ── system-reveal: concentric-ring threshold reveal ── */
  .mvd-sysreveal { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding-top: 1.5rem; }
  .mvd-sysreveal-motif { width: 160px; height: 160px; }
  .mvd-sysreveal-ring {
    fill: none; stroke: var(--pkt-teal); stroke-width: 2;
    opacity: 0; transform-origin: center; transform: scale(0.7);
    transition: opacity 500ms var(--pkt-ease), transform 500ms var(--pkt-ease);
  }
  .mvd-sysreveal-ring.lit { opacity: 0.7; transform: none; }
  .mvd-sysreveal-core { fill: var(--pkt-amber); }
  .mvd-sysreveal-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem; font-weight: 700; color: var(--pkt-fg-1); text-align: center;
    opacity: 0; transform: translateY(8px);
    transition: opacity 500ms var(--pkt-ease), transform 500ms var(--pkt-ease);
  }
  .mvd-sysreveal-title.lit { opacity: 1; transform: none; }
  .mvd-sysreveal-subtitle {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.92rem; color: var(--pkt-fg-2); text-align: center;
    opacity: 0; transition: opacity 500ms var(--pkt-ease);
  }
  .mvd-sysreveal-subtitle.lit { opacity: 1; }

  /* ── kg-infographic: phase card + ≥44pt chips ── */
  .mvd-kg { display: flex; flex-direction: column; gap: 0.6rem; }
  .mvd-kg-kicker {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--pkt-teal);
  }
  .mvd-kg-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem; font-weight: 600; color: var(--pkt-fg-1);
  }
  .mvd-kg-desc {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.9rem; color: var(--pkt-fg-2); line-height: 1.4;
  }
  .mvd-kg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .mvd-kg-chip {
    min-height: 44px; display: inline-flex; align-items: center;
    padding: 0 0.9rem; border-radius: 999px;
    background: rgba(20, 60, 66, 0.6); border: 1px solid rgba(109, 212, 212, 0.22);
    color: var(--pkt-fg-2); font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.88rem; opacity: 0.4; transition: opacity 400ms var(--pkt-ease), border-color 400ms var(--pkt-ease), color 400ms var(--pkt-ease);
  }
  .mvd-kg-chip.lit { opacity: 1; border-color: var(--pkt-amber); color: var(--pkt-fg-1); }

  /* ── chapter-opener: hero centered ── */
  .mvd-chapter-opener { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding-top: 2rem; text-align: center; }
  .mvd-co-hero {
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(232, 160, 64, 0.35), transparent 70%);
    border: 2px solid var(--pkt-amber);
    opacity: 0; transform: scale(0.8);
    transition: opacity 600ms var(--pkt-ease), transform 600ms var(--pkt-ease);
  }
  .mvd-co-hero.in { opacity: 1; transform: none; }
  .mvd-co-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.9rem; font-weight: 700; color: var(--pkt-fg-1); line-height: 1.1;
    opacity: 0; transform: translateY(10px);
    transition: opacity 600ms var(--pkt-ease), transform 600ms var(--pkt-ease);
  }
  .mvd-co-title.in { opacity: 1; transform: none; }
  .mvd-co-subtitle {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 1rem; color: var(--pkt-fg-2); line-height: 1.4;
    opacity: 0; transition: opacity 600ms var(--pkt-ease);
  }
  .mvd-co-subtitle.in { opacity: 1; }

  /* ── compound: vertical stack of sub-tiers ── */
  .mvd-compound { display: flex; flex-direction: column; gap: 1rem; }
  .mvd-compound-item { min-height: 0; }
  .mvd-compound-item.mvd-fit { overflow: hidden; }
  .mvd-compound-item.mvd-fit img,
  .mvd-compound-item.mvd-fit svg,
  .mvd-compound-item.mvd-fit video { max-width: 100%; height: auto; }

  /* ── video-stage: single focal + Z4 rail (portrait reflow over canonical DOM) ── */
  .presentation-root .mvd-frame.mvd-video-stage[data-mvd-adapter] { padding: 0; }
  .mvd-video-stage .vis-video-stage {
    display: flex; flex-direction: column; gap: 8px; width: 100%; height: auto;
  }
  .mvd-video-stage .vis-video-stage .stage-slot { width: 100%; }
  .mvd-video-stage .vis-video-stage .stage-primary { order: 0; }
  .mvd-video-stage .vis-video-stage .stage-primary video,
  .mvd-video-stage .vis-video-stage .stage-primary img { width: 100%; height: auto; display: block; }
  /* satellites → a Z4 rail row */
  .mvd-video-stage .vis-video-stage .stage-secondary,
  .mvd-video-stage .vis-video-stage .stage-tertiary,
  .mvd-video-stage .vis-video-stage .stage-context {
    order: 1; display: inline-flex; width: auto; max-width: 45%;
  }
  .mvd-video-stage .vis-video-stage .stage-secondary video,
  .mvd-video-stage .vis-video-stage .stage-secondary img,
  .mvd-video-stage .vis-video-stage .stage-tertiary video,
  .mvd-video-stage .vis-video-stage .stage-tertiary img { width: 100%; height: auto; display: block; }

  /* ── archival-clip: video full-width in Z2; wing → Z4 rail; Z3 dims ── */
  .presentation-root .mvd-frame.mvd-archival-clip[data-mvd-adapter] { padding: 0.25rem 0 0; }
  .mvd-archival-clip .vis-archival-clip { display: flex; flex-direction: column; gap: 8px; width: 100%; }
  .mvd-archival-clip .ac-stage { width: 100%; }
  .mvd-archival-clip .ac-video { width: 100%; height: auto; display: block; }
  .mvd-archival-clip .ac-wing {
    order: 2; display: flex; flex-direction: row; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 0.5rem;
  }
  .mvd-archival-clip .ac-wing-card { flex: 0 0 auto; max-width: 40%; }
  .mvd-archival-clip .ac-context { padding: 0 0.6rem; }
  /* (The Words band is retired — no clip-time dim rule needed; narration is
     paused by clip mode and the stage carries the clip full-width.) */

  /* ── Tap-to-zoom lightbox (shared: screenshot / deck / diagram) ── */
  .mvd-lightbox {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(4, 14, 17, 0.94);
    display: flex; align-items: center; justify-content: center;
  }
  .mvd-lightbox[hidden] { display: none; }
  .mvd-lightbox-scroll {
    max-width: 100%; max-height: 100%; overflow: auto;
    -webkit-overflow-scrolling: touch; touch-action: pinch-zoom;
    display: flex; align-items: center; justify-content: center;
  }
  .mvd-lightbox-img { max-width: 100vw; height: auto; display: block; }
  .mvd-lightbox-close {
    position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 16px;
    min-width: 44px; min-height: 44px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(20, 60, 66, 0.8);
    color: #fff; font-size: 1.1rem; line-height: 1; z-index: 2001;
  }
  .mvd-lightbox-caption {
    position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    text-align: center; padding: 0 1.2rem;
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.85rem; color: #d8e0e2; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  }
  .mvd-zoomable { cursor: zoom-in; }

  /* ════════════════════════════════════════════════════════════════════
     Native tier (adapting-portrait-cues M3 S3, 10 §5.4 Native rows) — the
     8 T-types that already transfer render their EXISTING desktop renderer
     output inside Z2; this scoped stylesheet is the ONLY mobile treatment
     (no data re-layout, no DOM edit — 10 §5.4 rule N). Every rule is scoped
     to [data-mvd-tier="native"] so it can never touch the desktop cascade,
     and it overrides the landscape desktop `.vis-*` styles by media-query +
     descendant specificity. Frames scroll within Z2 (contained, never blank).
     ════════════════════════════════════════════════════════════════════ */

  .presentation-root .mvd-frame[data-mvd-tier="native"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(ellipse 120% 80% at 50% 0%, rgba(26, 82, 88, 0.35), transparent 70%),
      var(--pkt-substrate);
    color: var(--pkt-fg-1);
    padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.5rem;
    justify-content: center;
  }
  /* Any desktop renderer child must fit the portrait column, never overflow-x. */
  .presentation-root .mvd-frame[data-mvd-tier="native"] > * { max-width: 100%; }

  /* Native TEXT cues DEMOTED (recasting-pocket-stagecraft S1, Joe directive
     2026-07-04): on the graphic-first Pocket Stage, title-card / text-highlight
     / blockquote must not reintroduce prose-as-canvas. They render at a compact
     orientation-MARKER register (Joe: "a tiny movement/section marker is fine"),
     the graphic substrate dominant + the title-card ICON leading over its words.
     Full graphic-first authoring of these product-story text types is a Fable-
     Tuesday candidate (the 18 bios are all cue-bundle→essence, never these). */
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-title-card { text-align: center; }
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-title-card .section-icon {
    font-size: clamp(2.2rem, 11vw, 3.4rem); /* the icon leads — a graphic, larger than the words */
  }
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-title-card h2 {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: clamp(1.05rem, 4.2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.25;
    margin: 0.3em 0 0.1em;
    overflow-wrap: break-word;
    color: var(--pkt-fg-1);
  }
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-title-card .subtitle {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--pkt-fg-2);
  }

  /* text-highlight — a compact marker, not a featured-text stage */
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-text-card { text-align: center; }
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-text-card .text-line {
    font-size: clamp(0.98rem, 3.6vw, 1.2rem);
    line-height: 1.34;
    overflow-wrap: break-word;
    color: var(--pkt-fg-1);
  }

  /* blockquote — a compact quote led by a crafted amber quote-emblem (a graphic
     sets the register, the words follow at marker scale) */
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-blockquote {
    max-width: 34ch;
    margin: 0 auto;
    text-align: center;
    position: relative;
  }
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-blockquote::before {
    content: '\201C';
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3rem;
    line-height: 0.7;
    color: var(--pkt-amber);
    opacity: 0.7;
    margin-bottom: 0.15rem;
  }
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-blockquote blockquote {
    font-size: clamp(1.0rem, 4vw, 1.25rem);
    line-height: 1.4;
    margin: 0 0 0.5em;
    color: var(--pkt-fg-1);
  }
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-blockquote .attribution {
    font-size: 0.85rem;
    opacity: 0.8;
  }

  /* checklist — full-width rows, ≥44pt tap-height items */
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-checklist .checklist-item {
    min-height: 44px;
    align-items: center;
  }
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-checklist .checklist-text {
    font-size: clamp(1rem, 4vw, 1.2rem);
    line-height: 1.34;
  }

  /* photo — object-fit:contain (already portrait-friendly, 10 §5.4); cap height
     so a tall portrait photo doesn't push the words band off the words band. */
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-photo { text-align: center; }
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-photo img {
    max-width: 100%;
    max-height: 60dvh;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
  }

  /* photo-sequence — swipe advances within the cue window (visual only; f(T)
     still governs — 10 §5.4). object-fit:contain keeps each frame whole. */
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-photo-sequence .photo-seq-img {
    max-width: 100%;
    max-height: 60dvh;
    object-fit: contain;
  }

  /* archive-video — full-width, muted, progress-mapped as on desktop (10 §5.4) */
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-archive-video video {
    width: 100%;
    max-height: 62dvh;
    height: auto;
    object-fit: contain;
  }

  /* privacy-shield — SVG scales; minor label clamp (10 §5.4) */
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-privacy-shield svg {
    max-width: 100%;
    height: auto;
  }
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-privacy-shield .ps-concept-label,
  .presentation-root .mvd-frame[data-mvd-tier="native"] .vis-privacy-shield .ps-member-label {
    font-size: max(11px, 0.72rem); /* label legibility floor */
  }

  /* ── Accessibility (10 §5.10) ────────────────────────────────────────
     VoiceOver: transport aria-labels; the idea marks are role=list with each
     mark's meaning as its aria-label (announced as a list, never on ignition);
     rail thumbs + focal tiles carry their media captions; the Biography pill is
     labeled. Captions are the bio PDF (Footnote Canon). This block carries the
     Dynamic-Type + tap-target CSS floor. text-size-adjust:100% keeps iOS scaling
     PROPORTIONAL (never `none`, which would DISABLE Dynamic Type / user zoom). */
  .presentation-root .mvd-frame,
  .pocket-bio-pill,
  .pocket-pdf-overlay {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  /* Motor (10 §5.10): every pocket interactive target clears 44pt — the rail
     thumbs (56px), the PDF overlay controls (44px), the transport buttons. The
     Biography pill's 34px height is offset by generous hit-padding; UMI-hot
     marks are ≥3.1rem. No gesture is the sole path to any function. */

  /* ── Degrade ladder (10 §5.9) ── */

  @media (prefers-reduced-motion: reduce) {
    .mvd-essence-tile,
    .mvd-mark,
    .mvd-mark-link {
      transform: none !important;
      transition: opacity 200ms linear !important;
    }
    /* Symbols show fully (informational — the idea IS the graphic); cut the
       draw-in wipe, the core pop, and the emblem breathe to instant states. */
    .pkt-sym .pkt-draw { stroke-dashoffset: 0 !important; transition: none !important; }
    .pkt-sym .pkt-core { transform: scale(1) !important; transition: opacity 200ms linear !important; }
    .mvd-emblem { animation: none !important; }
    /* Adapters: cut transforms to opacity steps; count-ups + bar fills remain
       (they are informational, not decorative). */
    .mvd-deck-card,
    .mvd-dash-row,
    .mvd-dash-fill {
      transition: opacity 200ms linear !important;
    }
    .mvd-dash-row { transform: none !important; }
    /* S2 adapters: keep informational count-ups/fills, cut motion to opacity. */
    .mvd-card, .mvd-pipe-step, .mvd-narr-stage, .mvd-narr-photo,
    .mvd-rollup-stat, .mvd-cst-node, .mvd-cst-edge, .mvd-sysreveal-ring,
    .mvd-sysreveal-title, .mvd-sysreveal-subtitle, .mvd-kg-chip,
    .mvd-co-hero, .mvd-co-title, .mvd-co-subtitle {
      transform: none !important;
      transition: opacity 200ms linear !important;
    }
    /* Native-tier desktop renderers may carry their own decorative transitions;
       the ambient washes go static (karaoke word-highlight is informational and
       is preserved above — 10 §5.9 reduced-motion row). */
    .presentation-root .mvd-frame[data-mvd-tier="native"] * {
      animation: none !important;
      transition: opacity 200ms linear !important;
    }
  }

  /* Slow-device heuristic (10 §5.9) — the director sets `.ffa-lite` on the
     presentation root when Device-Memory / hardwareConcurrency reads low.
     Media choreography simplifies to cut-only (no transform tweens); ambient
     washes static; Authored tier is already suppressed → Essence in the
     resolver. Count-ups/karaoke stay (informational). Thumbnails at reduced
     DPR are requested JS-side (the director drops the _w300 suffix to _w150). */
  .presentation-root.ffa-lite .mvd-essence-tile,
  .presentation-root.ffa-lite .mvd-mark,
  .presentation-root.ffa-lite .mvd-mark-link,
  .presentation-root.ffa-lite .mvd-emblem,
  .presentation-root.ffa-lite .mvd-deck-card,
  .presentation-root.ffa-lite .mvd-card,
  .presentation-root.ffa-lite .mvd-pipe-step,
  .presentation-root.ffa-lite .mvd-narr-stage,
  .presentation-root.ffa-lite .mvd-cst-node,
  .presentation-root.ffa-lite .mvd-cst-edge,
  .presentation-root.ffa-lite .mvd-kg-chip,
  .presentation-root.ffa-lite .mvd-co-hero,
  .presentation-root.ffa-lite .mvd-sysreveal-ring {
    transition: opacity 160ms linear !important;
    transform: none !important;
    animation: none !important;
  }
  .presentation-root.ffa-lite .mvd-essence,
  .presentation-root.ffa-lite .mvd-frame[data-mvd-adapter],
  .presentation-root.ffa-lite .mvd-frame[data-mvd-tier="native"] {
    background-image: none; /* static — drop the radial ambient wash */
  }

  /* Offline toast (10 §5.9 offline-mid-play row) — audio continues from the
     buffered range; this calm banner surfaces the connection loss. Audio NEVER
     gates on this (assets-never-gate). The director toggles `.is-visible`. */
  .pocket-offline-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
    z-index: 1900;
    max-width: min(88vw, 22rem);
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: rgba(18, 42, 48, 0.96);
    border: 1px solid rgba(109, 212, 212, 0.28);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    color: #dfeceb;
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.9rem;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease, transform 260ms ease;
  }
  .pocket-offline-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* Height-constrained (landscape phone / short screens) — 10 §5.9: the marks +
     Z4 rail shrink so no zone starves; the rail STAYS (it is the discoverable
     carousel, never hidden — AT-2b). */
  @media (max-height: 620px) {
    .mvd-mark { width: 2.6rem; height: 2.6rem; }
    .mvd-no-media .mvd-mark { width: 3.2rem; height: 3.2rem; }
    .mvd-emblem { width: 5rem; height: 5rem; }
    .pocket-rail-thumb { width: 46px; height: 46px; }
  }

  /* SE-class WIDTH minimum (iPhone SE 320×568, 10 §5.9): tighten padding + mark/
     rail sizing; the rail remains discoverable (never collapsed to nothing). */
  @media (max-width: 360px) {
    .mvd-mark { width: 2.7rem; height: 2.7rem; }
    .pocket-rail-thumb { width: 48px; height: 48px; }
    .mvd-essence { padding-left: 0.7rem; padding-right: 0.7rem; }
    .presentation-root .mvd-frame[data-mvd-adapter],
    .presentation-root .mvd-frame[data-mvd-tier="native"] { padding-left: 0.7rem; padding-right: 0.7rem; }
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   POCKET UMI — the bespoke, simplified mobile media interface
   (recasting-pocket-stagecraft S3, 2026-07-04, Opus 4.8 --effort max).
   Rendered by prototype/js/mobile/presentation/pocket-umi.js. Mobile-gated —
   desktop INVIOLATE (the wrapper delegates to the desktop UMI above 767px, and
   none of these rules apply). Clusters 6 (bespoke UMI) + 7 (clickable sources).
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px), (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {

  /* ── the subtle Sources chrome pill (mirrors .pocket-bio-pill; second row) ── */
  .pocket-sources-pill {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px + 42px);
    left: 12px;
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(232, 160, 64, 0.34);
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #f2e2c8;
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
  }
  .pocket-sources-pill svg { flex: 0 0 auto; color: var(--pkt-amber-bright, #f0b860); }
  .pocket-sources-pill:active { background: rgba(0, 0, 0, 0.78); transform: scale(0.97); }

  /* ── the overlay + sheet (slide up over the frozen story) ── */
  .pkt-umi-overlay {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
  }
  .pkt-umi-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 12, 14, 0.62);
    opacity: 0;
    transition: opacity 220ms var(--pkt-ease, ease);
  }
  .pkt-umi-overlay.pkt-umi-visible .pkt-umi-backdrop { opacity: 1; }
  .pkt-umi-sheet {
    position: relative;
    z-index: 1;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(109, 212, 212, 0.07), transparent 62%),
      var(--pkt-substrate, #0d2a30);
    color: var(--pkt-fg-1, #e0e6e8);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 1px solid rgba(109, 212, 212, 0.18);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
    padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
    transform: translateY(100%);
    transition: transform 300ms var(--pkt-ease, cubic-bezier(0.33, 0, 0.2, 1));
    overflow: hidden;
  }
  .pkt-umi-sheet::before {
    content: "";
    position: absolute;
    top: 7px; left: 50%;
    width: 38px; height: 4px;
    margin-left: -19px;
    border-radius: 4px;
    background: rgba(168, 180, 184, 0.4);
  }
  .pkt-umi-overlay.pkt-umi-visible .pkt-umi-sheet { transform: translateY(0); }
  /* Documents get the full height (a page wants room to read). */
  .pkt-umi-overlay.pkt-umi-doc .pkt-umi-sheet,
  .pkt-umi-overlay.pkt-umi-picker .pkt-umi-sheet,
  .pkt-umi-overlay.pkt-umi-sources .pkt-umi-sheet { max-height: 94dvh; height: 94dvh; }

  .pkt-umi-close {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 3;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.34);
    color: var(--pkt-fg-1, #e0e6e8);
    -webkit-tap-highlight-color: transparent;
  }
  .pkt-umi-close:active { background: rgba(0, 0, 0, 0.6); }

  /* ── #5b standard header: back ‹ · title · Fergi AI 🧠 ── */
  .pkt-umi-header {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(168, 180, 184, 0.14);
  }
  .pkt-umi-hdr-back, .pkt-umi-hdr-fergi {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.28);
    color: var(--pkt-fg-1, #e0e6e8);
    font-size: 20px; line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .pkt-umi-hdr-back:active, .pkt-umi-hdr-fergi:active { background: rgba(0, 0, 0, 0.55); }
  .pkt-umi-hdr-fergi { background: rgba(109, 212, 212, 0.12); }
  .pkt-umi-hdr-spacer { flex: 0 0 auto; width: 40px; height: 40px; }
  .pkt-umi-hdr-title {
    flex: 1 1 auto; min-width: 0;
    text-align: center;
    font-size: 1.02rem; font-weight: 700; line-height: 1.25;
    color: var(--pkt-fg-1, #e0e6e8);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }

  .pkt-umi-body {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }
  .pkt-umi-framewrap { display: flex; flex: 1 1 auto; min-height: 52dvh; }

  /* ── hero + title ── */
  .pkt-umi-hero {
    margin: 0 0 12px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    max-height: 42dvh;
    display: flex; align-items: center; justify-content: center;
  }
  .pkt-umi-hero img { width: 100%; height: auto; max-height: 42dvh; object-fit: contain; display: block; }
  .pkt-umi-hero.pkt-umi-hero-missing { display: none; }
  .pkt-umi-title {
    margin: 0 40px 12px 2px;
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.28;
    color: var(--pkt-fg-1, #e0e6e8);
  }

  /* ── HEAR-FIRST: the Listen button is the primary description affordance ── */
  .pkt-umi-listen {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    min-height: 46px;
    padding: 0 20px 0 16px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(180deg, var(--pkt-amber-bright, #f0b860), var(--pkt-amber, #e8a040));
    color: #241606;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 3px 14px rgba(232, 160, 64, 0.34);
    -webkit-tap-highlight-color: transparent;
  }
  .pkt-umi-listen:active { transform: scale(0.97); }
  .pkt-umi-listen-ico { display: inline-flex; }
  .pkt-umi-listen.pkt-umi-listening {
    background: rgba(232, 160, 64, 0.16);
    color: var(--pkt-amber-bright, #f0b860);
    box-shadow: inset 0 0 0 1px rgba(232, 160, 64, 0.5);
  }
  .pkt-umi-listen.pkt-umi-listening .pkt-umi-listen-ico svg polygon {
    fill: var(--pkt-amber-bright, #f0b860) !important;
  }

  /* ── text description: SECONDARY, collapsed by default ── */
  .pkt-umi-desc-wrap { margin-top: 12px; }
  .pkt-umi-read-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
    background: none; border: none;
    color: var(--pkt-fg-2, #a8b4b8);
    font-family: inherit; font-size: 0.92rem; font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }
  .pkt-umi-read-toggle svg { transition: transform 200ms var(--pkt-ease, ease); }
  .pkt-umi-read-toggle.pkt-umi-read-open svg { transform: rotate(180deg); }
  .pkt-umi-desc {
    margin: 6px 0 0;
    font-size: 0.96rem;
    line-height: 1.5;
    color: var(--pkt-fg-2, #a8b4b8);
  }

  /* ── document view ── */
  .pkt-umi-dochead { padding-right: 40px; }
  .pkt-umi-frame {
    width: 100%;
    flex: 1 1 auto;
    min-height: 52dvh;
    border: 1px solid rgba(109, 212, 212, 0.14);
    border-radius: 12px;
    background: #fff;
  }
  .pkt-umi-docimg {
    flex: 1 1 auto;
    border-radius: 12px; overflow: auto;
    background: rgba(0, 0, 0, 0.25);
    display: flex; align-items: flex-start; justify-content: center;
  }
  .pkt-umi-docimg img { width: 100%; height: auto; display: block; }
  .pkt-umi-docsummary {
    margin-top: 10px;
    font-size: 0.9rem; line-height: 1.5;
    color: var(--pkt-fg-2, #a8b4b8);
  }
  .pkt-umi-docsummary p { margin: 0; }

  /* ══ LS-2 fitted document COVER + LS-3 in-app READER (opus-rides-alone S6) ══ */
  /* The focal document is a FITTED FULL COVER — object-fit:contain in a fixed
     frame; nothing pans (LS-2). An "Open" pill docks bottom-right; tapping opens
     the reader. A doc-glyph + title placeholder shows when the cover 404s. */
  .pkt-umi-doccover {
    position: relative;
    display: block;
    width: 100%;
    flex: 0 0 auto;
    max-height: 52dvh;
    aspect-ratio: 3 / 4;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(109, 212, 212, 0.16);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pkt-umi-doccover:active { transform: scale(0.995); }
  .pkt-umi-doccover-img {
    width: 100%; height: 100%;
    object-fit: contain;              /* the WHOLE cover, never cropped/panned */
    display: block;
    background: #fff;
  }
  .pkt-umi-doccover-noimg .pkt-umi-doccover-img { display: none; }
  .pkt-umi-doccover-fallback {
    display: none;
    position: absolute; inset: 0;
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; padding: 20px;
    color: var(--pkt-fg-2, #a8b4b8); text-align: center;
  }
  .pkt-umi-doccover-noimg .pkt-umi-doccover-fallback { display: flex; }
  .pkt-umi-doccover-fallback-title {
    font-size: 0.95rem; font-weight: 600; line-height: 1.3;
    color: var(--pkt-fg-1, #e0e6e8);
  }
  .pkt-umi-doccover-open {
    position: absolute; right: 12px; bottom: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px 7px 11px;
    border-radius: 999px;
    background: rgba(6, 16, 18, 0.82);
    color: var(--pkt-amber-bright, #f0b860);
    font-size: 0.86rem; font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;             /* the whole cover is the button */
  }

  /* The in-app document reader — full stage, above the UMI sheet, with Done. */
  .pkt-umi-reader {
    position: fixed; inset: 0;
    z-index: 13500;                   /* above .pkt-umi-overlay (13000) */
    display: flex; flex-direction: column;
    background: #0a1416;
    opacity: 0;
    transition: opacity 200ms var(--pkt-ease, ease);
    font-family: 'Source Sans 3', -apple-system, sans-serif;
  }
  .pkt-umi-reader.pkt-umi-reader-visible { opacity: 1; }
  .pkt-umi-reader-hdr {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding: max(10px, env(safe-area-inset-top)) 12px 10px;
    background: rgba(6, 14, 16, 0.96);
    border-bottom: 1px solid rgba(109, 212, 212, 0.12);
  }
  .pkt-umi-reader-done {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 12px 8px 6px;
    border: none; background: none;
    color: var(--pkt-amber-bright, #f0b860);
    font-family: inherit; font-size: 1rem; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }
  .pkt-umi-reader-done:active { opacity: 0.7; }
  .pkt-umi-reader-title {
    flex: 1 1 auto; min-width: 0;
    text-align: center;
    font-size: 0.98rem; font-weight: 600;
    color: var(--pkt-fg-1, #e0e6e8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pkt-umi-reader-spacer { flex: 0 0 68px; }
  .pkt-umi-reader-body {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    overflow: auto; -webkit-overflow-scrolling: touch;
    background: #12201f;
  }
  .pkt-umi-reader-body .pkt-umi-frame {
    width: 100%; flex: 1 1 auto; min-height: 100%;
    border: none; border-radius: 0; background: #fff;
  }
  .pkt-umi-reader-img { width: 100%; height: auto; display: block; }

  /* ══ LS-5 lean FACE-BOX tagger (opus-rides-alone S6) ══ */
  /* Self-contained face boxes over the photo on produced/story surfaces (the
     heavy MobilePhotoFaceTagging stack isn't loaded there). Boxes are positioned
     as % of the image element (normalized bbox → the un-cropped img maps 1:1). */
  .pkt-facetag-sheet .pkt-umi-body { padding-bottom: 20px; }
  .pkt-facebox-stage {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
  }
  .pkt-facebox-img { width: 100%; height: auto; display: block; }
  .pkt-facebox-layer { position: absolute; inset: 0; }
  .pkt-facebox {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--pkt-amber-bright, #f0b860);
    border-radius: 8px;
    background: rgba(240, 184, 96, 0.08);
    padding: 0; margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pkt-facebox.pkt-facebox-named {
    border-color: rgba(109, 212, 212, 0.92);
    background: rgba(109, 212, 212, 0.08);
  }
  .pkt-facebox.pkt-facebox-busy { opacity: 0.5; }
  .pkt-facebox-tag {
    position: absolute; left: 50%; bottom: -9px;
    transform: translateX(-50%);
    max-width: 160px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(6, 16, 18, 0.9);
    color: var(--pkt-amber-bright, #f0b860);
    font-size: 0.74rem; font-weight: 700; line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pkt-facebox-named .pkt-facebox-tag { color: rgba(150, 226, 226, 1); }
  .pkt-facebox-hint {
    margin: 12px 2px 0;
    font-size: 0.92rem; line-height: 1.45;
    color: var(--pkt-fg-2, #a8b4b8);
    text-align: center;
  }

  /* ── citation card = the attribution-in-detail (byteless source) ── */
  .pkt-umi-citation {
    margin-top: 8px;
    padding: 22px 18px;
    border-radius: 14px;
    border: 1px solid rgba(232, 160, 64, 0.26);
    background: rgba(232, 160, 64, 0.06);
    text-align: center;
  }
  .pkt-umi-cite-seal { color: var(--pkt-amber, #e8a040); margin-bottom: 8px; }
  .pkt-umi-cite-kind {
    margin: 0 0 8px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--pkt-amber-bright, #f0b860);
  }
  .pkt-umi-cite-summary { margin: 0 0 14px; font-size: 0.98rem; line-height: 1.5; color: var(--pkt-fg-1, #e0e6e8); }
  .pkt-umi-cite-link {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 42px; padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(109, 212, 212, 0.36);
    color: var(--pkt-teal, #6DD4D4);
    font-size: 0.94rem; font-weight: 600; text-decoration: none;
  }
  .pkt-umi-cite-link:active { background: rgba(109, 212, 212, 0.1); }
  .pkt-umi-cite-note { margin: 14px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--pkt-fg-3, #6c787e); }

  /* ── control-panel action buttons (shared by #5c control panel) ── */
  .pkt-umi-action {
    flex: 1 1 0;
    min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    min-height: 58px;
    padding: 8px 4px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.04);
    color: var(--pkt-fg-2, #a8b4b8);
    font-family: inherit; font-size: 0.72rem; font-weight: 600;
    -webkit-tap-highlight-color: transparent;
    transition: background 160ms var(--pkt-ease, ease), color 160ms var(--pkt-ease, ease);
  }
  .pkt-umi-action svg { color: var(--pkt-teal, #6DD4D4); }
  .pkt-umi-action:active { background: rgba(255, 255, 255, 0.09); }
  .pkt-umi-action.pkt-umi-action-on { background: rgba(232, 160, 64, 0.14); color: var(--pkt-amber-bright, #f0b860); }
  .pkt-umi-action.pkt-umi-action-on svg { color: var(--pkt-amber-bright, #f0b860); }

  /* ── #5c fixed bottom control panel: Fergi AI · Sources · Download · Tag ── */
  .pkt-umi-controlpanel {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(168, 180, 184, 0.14);
  }
  .pkt-umi-controlpanel[hidden] { display: none; }

  /* ── merged Fergi panel: Ask ⇄ Add/correct tabs ── */
  .pkt-umi-fergi-tabs {
    display: flex; gap: 6px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 12px;
    padding: 4px;
  }
  .pkt-umi-fergi-tab {
    flex: 1 1 0;
    min-height: 38px;
    border: none; border-radius: 9px;
    background: transparent;
    color: var(--pkt-fg-2, #a8b4b8);
    font-family: inherit; font-size: 0.86rem; font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }
  .pkt-umi-fergi-tab.pkt-umi-fergi-tab-on {
    background: rgba(109, 212, 212, 0.16);
    color: var(--pkt-teal, #6DD4D4);
  }

  /* ── self-contained person picker (Tag) ── */
  .pkt-picker-search {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(168, 180, 184, 0.2);
    background: rgba(0, 0, 0, 0.24);
    color: var(--pkt-fg-1, #e0e6e8);
    font-family: inherit; font-size: 0.98rem;
  }
  .pkt-picker-search:focus { outline: none; border-color: rgba(109, 212, 212, 0.5); }
  .pkt-picker-list { display: flex; flex-direction: column; gap: 6px; }
  .pkt-picker-row {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px;
    padding: 0 14px;
    border: none; border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--pkt-fg-1, #e0e6e8);
    font-family: inherit; font-size: 0.98rem; font-weight: 600; text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  .pkt-picker-row:active { background: rgba(255, 255, 255, 0.09); }
  .pkt-picker-row.pkt-picker-row-busy { opacity: 0.5; }
  .pkt-picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pkt-picker-go { flex: 0 0 auto; color: var(--pkt-teal, #6DD4D4); font-size: 1.4rem; line-height: 1; }
  .pkt-picker-empty { margin: 18px 0; text-align: center; color: var(--pkt-fg-3, #6c787e); font-size: 0.92rem; }

  /* ── the inline panel (commentary / chat expand under the actions) ── */
  .pkt-umi-panel { margin-top: 12px; }
  .pkt-umi-panel-h { display: block; margin-bottom: 8px; font-size: 0.9rem; font-weight: 600; color: var(--pkt-fg-1, #e0e6e8); }
  .pkt-umi-textarea {
    width: 100%; box-sizing: border-box;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(109, 212, 212, 0.22);
    background: rgba(0, 0, 0, 0.28);
    color: var(--pkt-fg-1, #e0e6e8);
    font-family: inherit; font-size: 0.98rem; line-height: 1.4;
    resize: none;
  }
  .pkt-umi-textarea:focus { outline: none; border-color: rgba(232, 160, 64, 0.5); }
  .pkt-umi-panel-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
  .pkt-umi-send {
    min-height: 42px; padding: 0 20px;
    border-radius: 999px; border: none;
    background: linear-gradient(180deg, var(--pkt-amber-bright, #f0b860), var(--pkt-amber, #e8a040));
    color: #241606; font-family: inherit; font-size: 0.94rem; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }
  .pkt-umi-send:disabled { opacity: 0.6; }
  .pkt-umi-panel-note { font-size: 0.78rem; line-height: 1.35; color: var(--pkt-fg-3, #6c787e); }
  .pkt-umi-thanks { margin: 4px 0; font-size: 0.98rem; line-height: 1.45; color: var(--pkt-amber-bright, #f0b860); }

  /* ── Ask-Fergi mini-chat ── */
  .pkt-umi-chat-log { max-height: 32dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
  .pkt-umi-bubble {
    max-width: 86%; padding: 9px 13px; border-radius: 15px;
    font-size: 0.95rem; line-height: 1.42; white-space: pre-wrap; word-wrap: break-word;
  }
  .pkt-umi-you { align-self: flex-end; background: rgba(109, 212, 212, 0.16); color: #dff4f4; border-bottom-right-radius: 5px; }
  .pkt-umi-ai { align-self: flex-start; background: rgba(255, 255, 255, 0.06); color: var(--pkt-fg-1, #e0e6e8); border-bottom-left-radius: 5px; }
  .pkt-umi-ai.pkt-umi-pending { color: var(--pkt-fg-3, #6c787e); letter-spacing: 0.15em; }
  .pkt-umi-ai.pkt-umi-error { color: #e88; }
  .pkt-umi-chat-row { display: flex; gap: 8px; align-items: center; }
  .pkt-umi-chat-input {
    flex: 1 1 auto; box-sizing: border-box;
    min-height: 44px; padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(109, 212, 212, 0.22);
    background: rgba(0, 0, 0, 0.28);
    color: var(--pkt-fg-1, #e0e6e8);
    font-family: inherit; font-size: 0.98rem;
  }
  .pkt-umi-chat-input:focus { outline: none; border-color: rgba(232, 160, 64, 0.5); }
  .pkt-umi-chat-send {
    flex: 0 0 auto; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: none;
    background: linear-gradient(180deg, var(--pkt-amber-bright, #f0b860), var(--pkt-amber, #e8a040));
    color: #241606; -webkit-tap-highlight-color: transparent;
  }
  .pkt-umi-chat-send:active { transform: scale(0.94); }

  /* ── the Sources list sheet (cluster 7) ── */
  .pkt-sources-title { margin: 6px 40px 4px 2px; font-size: 1.14rem; font-weight: 600; color: var(--pkt-fg-1, #e0e6e8); }
  .pkt-sources-sub { margin: 0 0 12px 2px; font-size: 0.86rem; line-height: 1.4; color: var(--pkt-fg-2, #a8b4b8); }
  .pkt-sources-list { overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 7px; padding-bottom: 6px; }
  .pkt-source-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left;
    min-height: 58px; padding: 10px 12px;
    border-radius: 13px; border: 1px solid rgba(109, 212, 212, 0.14);
    background: rgba(255, 255, 255, 0.035);
    color: var(--pkt-fg-1, #e0e6e8);
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .pkt-source-row:active { background: rgba(232, 160, 64, 0.12); border-color: rgba(232, 160, 64, 0.36); }
  .pkt-source-ico {
    flex: 0 0 auto; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(232, 160, 64, 0.12);
    color: var(--pkt-amber-bright, #f0b860);
  }
  .pkt-source-ico.pkt-source-cit { background: rgba(109, 212, 212, 0.12); color: var(--pkt-teal, #6DD4D4); }
  .pkt-source-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pkt-source-cap { font-size: 0.94rem; line-height: 1.28; font-weight: 600; }
  .pkt-source-meta {
    font-size: 0.76rem; line-height: 1.3; color: var(--pkt-fg-3, #6c787e);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pkt-source-go { flex: 0 0 auto; color: var(--pkt-fg-3, #6c787e); }

  /* ── the Sources two-level detail view (LS-6) ── */
  .pkt-sources-body { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  .pkt-source-back {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 5px;
    margin: 2px 0 12px; padding: 7px 12px 7px 8px;
    border-radius: 999px; border: 1px solid rgba(109, 212, 212, 0.22);
    background: rgba(0, 0, 0, 0.28); color: var(--pkt-fg-2, #a8b4b8);
    font-family: inherit; font-size: 0.86rem; font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }
  .pkt-source-back:active { background: rgba(109, 212, 212, 0.12); color: var(--pkt-fg-1, #e0e6e8); }
  .pkt-source-detail { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .pkt-source-detail-kind {
    margin: 0 0 4px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--pkt-teal, #6DD4D4);
  }
  .pkt-source-detail-title { margin: 0 0 12px; font-size: 1.16rem; font-weight: 600; line-height: 1.28; color: var(--pkt-fg-1, #e0e6e8); }
  .pkt-source-desc { margin: 0 0 12px; font-size: 0.95rem; line-height: 1.5; color: var(--pkt-fg-1, #e0e6e8); }
  .pkt-source-cite {
    margin: 0 0 12px; padding: 11px 13px;
    border-left: 3px solid rgba(109, 212, 212, 0.45); border-radius: 0 8px 8px 0;
    background: rgba(109, 212, 212, 0.06);
    font-size: 0.9rem; line-height: 1.5; color: var(--pkt-fg-1, #e0e6e8); font-style: italic;
  }
  .pkt-source-claims { margin: 0 0 12px; font-size: 0.85rem; line-height: 1.4; color: var(--pkt-fg-2, #a8b4b8); }
  .pkt-source-preds { margin: 0 0 12px; padding-left: 18px; }
  .pkt-source-preds li { font-size: 0.84rem; line-height: 1.5; color: var(--pkt-fg-2, #a8b4b8); }
  .pkt-source-note { margin: 12px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--pkt-fg-3, #6c787e); }
  a.pkt-source-open, button.pkt-source-open {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 2px 0 4px; padding: 11px 16px;
    border-radius: 12px; border: 1px solid rgba(232, 160, 64, 0.4);
    background: rgba(232, 160, 64, 0.14); color: var(--pkt-amber-bright, #f0b860);
    font-family: inherit; font-size: 0.92rem; font-weight: 600;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  a.pkt-source-open:active, button.pkt-source-open:active { background: rgba(232, 160, 64, 0.24); }

  /* ── loading spinner ── */
  .pkt-umi-spinner { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 44px 0; }
  .pkt-umi-spinner span {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--pkt-teal, #6DD4D4);
    animation: pkt-umi-bounce 1.1s var(--pkt-ease, ease) infinite;
  }
  .pkt-umi-spinner span:nth-child(2) { animation-delay: 0.15s; }
  .pkt-umi-spinner span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes pkt-umi-bounce { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

  /* ── degrade ladders (match S1) ── */
  @media (prefers-reduced-motion: reduce) {
    .pkt-umi-backdrop, .pkt-umi-sheet { transition: none; }
    .pkt-umi-spinner span { animation: none; opacity: 0.7; }
  }
}
.ffa-lite .pkt-umi-backdrop, .ffa-lite .pkt-umi-sheet { transition: none !important; }
.ffa-lite .pkt-umi-spinner span { animation: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   POCKET RESTACK — translating-mobile-stagecraft LS-2 (2026-07-05, Joe directive)

   The pocket owns the whole viewport as ONE flex column:

   (standardizing-mobile-chrome S2, 2026-07-06: the header left is the
   HAMBURGER, the chapter/segment label rides as the topbar subtitle, and the
   four former transport rows collapse into ONE line so the stage fills the
   panel. Exit + Sources/Bio move onto the universal control panel.)

       ┌──────────────────────────────┐
       │ ☰   Laura Updegrove       🧠 │  .pocket-topbar   (order 0)
       │        2/6 · The Rooms       │    hamburger · title/subtitle · Fergi
       ├──────────────────────────────┤
       │                              │
       │           STAGE              │  .pres-deck       (order 10, flex:1)
       │                              │
       ├──────────────────────────────┤
       │ «30 ▶ 30» ☰        6:08  1×  │  .mobile-transport (order 80, LS-8 row)
       ├──────────────────────────────┤
       │ ▣ ▣ ▣ ▣ ▣ ▣ ▣ ▣ ▣            │  .pocket-rail     (order 90, absolute bottom)
       └──────────────────────────────┘
       │ Exit  Stories  Sources Bio  Import │  .mobile-tab-bar (universal panel,
       └────────────────────────────────────┘   position:fixed; present in-shell)

   The desktop chrome (.pres-header speed/lock row, .pres-controls right rail,
   .deck-dots bubble column, .pres-media-carousel strip) is RETIRED from the
   mobile viewport — hidden, not removed, so programmatic .click() routing
   (speed cycle, Sources, Fergi AI, exit) keeps one brain in the engine.
   Scoped to body.pocket-restack (set by MobilePlayerController when it builds
   the pocket chrome) — the desktop path never carries the class.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px), (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {

  /* The flex column that makes the zone orders real (the pre-restack sheet
     declared orders with no flex container — inert by construction). */
  body.pocket-restack .presentation-root.pocket-stage-active {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }
  body.pocket-restack .presentation-root.pocket-stage-active > .pocket-topbar { order: 0; }
  body.pocket-restack .presentation-root.pocket-stage-active > .pres-deck,
  body.pocket-restack .presentation-root.pocket-stage-active > #presentationDeck {
    order: 10;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    position: relative;
    /* fable-mobile-toolkit B4 (Joe 2026-07-07 #3): about.css's mobile rule
       `.pres-deck { top: 48px }` still applies to this now-relative flex child,
       translating the stage 48px DOWN — a dead band under the header and an
       equal overlap into the transport. The flex row IS the layout; zero the
       inset. */
    top: 0;
    bottom: auto;
  }

  /* Desktop chrome retired from the mobile viewport (kept in DOM for the
     one-brain .click() routing above). */
  body.pocket-restack .presentation-root.pocket-stage-active .pres-header,
  body.pocket-restack .presentation-root.pocket-stage-active .pres-controls,
  body.pocket-restack .presentation-root.pocket-stage-active .deck-dots,
  body.pocket-restack .presentation-root.pocket-stage-active .pres-media-carousel,
  body.pocket-restack .presentation-root.pocket-stage-active .landing-chapters,
  body.pocket-restack .presentation-root.pocket-stage-active > .pres-nav,
  body.pocket-restack .mobile-story-safety-exit,
  body.pocket-restack .pocket-sources-pill {
    display: none !important;
  }
  /* Non-zone direct children must not become stray flex rows: the pause
     overlay keeps its own overlay geometry, parked last in the column. */
  body.pocket-restack .presentation-root.pocket-stage-active > .pres-countdown {
    flex: 0 0 auto;
    order: 99;
  }

  /* ── The pocket top bar: hamburger · title/subtitle · Fergi AI ──
     standardizing-mobile-chrome S2 (#4): the standard FFV mobile header —
     hamburger left (opens the nav drawer; falls back to the exit chevron on
     panel-less produced pages), the story/subject title with the chapter
     subtitle line beneath it in the center, Fergi AI right. Exit moved onto the
     universal control panel's permanent left anchor. */
  .pocket-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px;
    background: rgba(9, 31, 36, 0.96);
    border-bottom: 1px solid rgba(109, 212, 212, 0.16);
  }
  .pocket-topbar-exit,
  .pocket-topbar-menu,
  .pocket-topbar-fergi {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: rgba(20, 60, 66, 0.55);
    color: #cfe6e6;
    font-size: 1.15rem;
    -webkit-tap-highlight-color: transparent;
  }
  .pocket-topbar-fergi {
    background: rgba(10, 46, 46, 0.9);
    border: 1px solid rgba(109, 212, 212, 0.3);
  }
  /* D5.4 — the header is identity + Fergi AI. The balance spacer mirrors the
     Fergi button so the title stays optically centred with one flanking control
     instead of drifting left. It is presentational only (aria-hidden in JS). */
  .pocket-topbar-balance {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
  }
  /* interpreting-family-channels S3 (R-C) — the balance slot is Fergi AI's mark now,
     at the same 40 px, so the title stays centred. The header's artwork, never the
     Halo: the right-hand slot is the one Say It. */
  .pocket-topbar-fergiai {
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(20, 184, 166, 0.35);
    background: rgba(13, 148, 136, 0.18);
    -webkit-tap-highlight-color: transparent;
  }
  .pocket-topbar-fergiai-art { width: 24px; height: 24px; display: block; pointer-events: none; }
  .pocket-topbar-titlewrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
  }
  .pocket-topbar-title {
    max-width: 100%;
    text-align: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.06rem;
    font-weight: 600;
    color: #e6ecec;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pocket-topbar-subtitle {
    max-width: 100%;
    text-align: center;
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: #9fb4b4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pocket-topbar-subtitle:empty { display: none; }

  /* ── The combined transport bar (scrub / play cluster / function row) ── */
  body.pocket-restack .presentation-root.pocket-stage-active > .mobile-transport {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px 4px;
    background: rgba(9, 31, 36, 0.92);
    border-top: 1px solid rgba(109, 212, 212, 0.14);
    /* LS-4 (furnishing-biography-stages S2): the containing block for the
       hairline's hit area and the scrub sheet, both of which reach up over
       the foot of the stage — so the row must paint above the deck. */
    position: relative;
    z-index: 40;
  }
  /* standardizing-mobile-chrome S2 (#4): the ONE-LINE navigation row.
     refining-pocket-madrid S4 (LS-8): the ‹/› chapter arrows + the small
     drag-scrub bar are removed (that finding stands).
     furnishing-biography-stages S2 (LS-4, Joe 2026-09-25, approved): the ±30s
     jumps are removed too; the row is  play · [elapsed / total] · speed , the
     readout is the scrub sheet's trigger and takes the middle. */
  .mobile-transport-nav {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  /* LS-8: legacy scrub classes retained for the non-pocket path; unused on the
     pocket stage (the scrub DOM is no longer built). */
  .mobile-transport-scrub {
    flex: 1 1 auto;
    min-width: 48px;
    display: flex;
    align-items: center;
  }
  .mobile-transport-track-wrap {
    flex: 1 1 auto;
    padding: 12px 0; /* generous touch target around the 4px track */
    touch-action: none;
  }
  /* LS-4: the position readout `elapsed / total` — a button (it opens the
     scrub sheet), so it gets a full touch height and the middle of the row. */
  body.pocket-restack .mobile-transport .mobile-transport-time {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 8px;
    border: none;
    border-radius: 12px;
    background: transparent;
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #cfe6e6;
    text-align: center;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  body.pocket-restack .mobile-transport .mobile-transport-time[aria-expanded="true"] {
    background: rgba(109, 212, 212, 0.1);
  }
  .mobile-transport-time-sep {
    opacity: 0.55;
  }
  .mobile-transport-time-total {
    opacity: 0.75;
  }

  /* ── LS-4 part 1: the always-on position hairline ──
     3px on the transport's top edge (over its border), filled to the current
     position, faint ticks at the chapter boundaries. The element is a 20px
     hit area reaching 14px up over the stage's foot and ending exactly where
     the row's buttons begin (padding-top 6px), so it never steals their taps. */
  .mobile-transport-hairline {
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 20px;
    touch-action: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-transport-hairline-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 13px;
    height: 3px;
    background: rgba(109, 212, 212, 0.2);
    pointer-events: none;
  }
  .mobile-transport-hairline-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: var(--pkt-amber, #e8a040);
  }
  .mobile-transport-hairline-tick {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    margin-left: -0.5px;
    background: rgba(224, 230, 232, 0.38);
  }

  /* ── LS-4 parts 2+3: the pop-up scrub sheet ──
     Rises just above the transport (bottom:100% of it). Not a modal: no
     backdrop, no focus trap; a tap outside dismisses it (and still lands). */
  .pocket-scrub-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    padding: 56px 16px 6px;
    background: rgba(9, 31, 36, 0.97);
    border-top: 1px solid rgba(109, 212, 212, 0.22);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: 0 8px;
    transition: opacity 160ms var(--pkt-ease, ease), translate 160ms var(--pkt-ease, ease), visibility 0s linear 160ms;
  }
  .pocket-scrub-sheet.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    translate: 0 0;
    transition: opacity 160ms var(--pkt-ease, ease), translate 160ms var(--pkt-ease, ease), visibility 0s;
  }
  .pocket-scrub-trackwrap {
    position: relative;
    height: 44px;            /* the approved 44px touch height */
    touch-action: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  .pocket-scrub-trackwrap:focus-visible {
    box-shadow: 0 0 0 2px rgba(240, 184, 96, 0.55);
    border-radius: 8px;
  }
  .pocket-scrub-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 19px;
    height: 6px;
    border-radius: 3px;
    background: rgba(109, 212, 212, 0.24);
    overflow: hidden;
  }
  .pocket-scrub-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: var(--pkt-amber, #e8a040);
  }
  /* Chapter segmentation: a gap the sheet's colour cut through the track. */
  .pocket-scrub-gap {
    position: absolute;
    top: 0; bottom: 0;
    width: 3px;
    margin-left: -1.5px;
    background: rgba(9, 31, 36, 1);
  }
  .pocket-scrub-thumb {
    position: absolute;
    top: 22px;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    background: var(--pkt-amber-bright, #f0b860);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
    pointer-events: none;
  }
  .pocket-scrub-sheet.is-dragging .pocket-scrub-thumb {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
  }
  .pocket-scrub-bubble {
    position: absolute;
    top: 6px;
    left: 0;
    max-width: calc(100% - 8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 11px 5px;
    border-radius: 10px;
    background: rgba(13, 42, 48, 0.98);
    border: 1px solid rgba(240, 184, 96, 0.45);
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    line-height: 1.2;
    pointer-events: none;
    white-space: nowrap;
  }
  .pocket-scrub-bubble-time {
    font-size: 0.86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pkt-amber-bright, #f0b860);
  }
  .pocket-scrub-bubble-chapter {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.72rem;
    font-weight: 500;
    color: #cfe6e6;
  }
  .pocket-scrub-bubble-rate {
    font-size: 0.66rem;
    font-weight: 600;
    color: #9fc4c4;
  }
  .pocket-scrub-bubble-rate:empty,
  .pocket-scrub-bubble-chapter:empty { display: none; }
  .pocket-scrub-sheet.is-fine .pocket-scrub-bubble { border-color: rgba(109, 212, 212, 0.6); }
  .mobile-transport-track {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: rgba(109, 212, 212, 0.18);
  }
  .mobile-transport-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    border-radius: 2px;
    background: var(--pkt-amber, #e8a040);
  }
  .mobile-transport-thumb {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pkt-amber-bright, #f0b860);
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  }
  .mobile-transport-btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #cfe6e6;
    -webkit-tap-highlight-color: transparent;
  }
  /* LS-1: the ±15s skip buttons are gone, so the chapter arrows no longer need
     the 32px clamp — they get the full 40px touch target like every other btn. */
  .mobile-transport-btn.transport-play {
    width: 48px;
    height: 44px;
    border-radius: 14px;
    background: rgba(232, 160, 64, 0.16);
    color: var(--pkt-amber-bright, #f0b860);
  }
  .mobile-transport-fnrow {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
  }
  .mobile-transport-speed {
    flex: 0 0 auto;
    min-width: 40px;
    height: 30px;
    border: 1px solid rgba(109, 212, 212, 0.28);
    border-radius: 999px;
    background: transparent;
    color: #cfe6e6;
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-transport-sources,
  .pocket-bio-pill--bar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(109, 212, 212, 0.28);
    border-radius: 999px;
    background: transparent;
    color: #cfe6e6;
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-transport-sources svg,
  .pocket-bio-pill--bar svg { color: var(--pkt-amber-bright, #f0b860); }
  /* The in-bar Bio pill overrides the legacy fixed-pill geometry wholesale. */
  .pocket-bio-pill.pocket-bio-pill--bar {
    position: static;
    top: auto; left: auto;
    z-index: auto;
    min-height: 30px;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: transparent;
  }
  .mobile-transport-extras { flex: 0 0 auto; display: inline-flex; }
  /* Fallback fnrow (panel-less produced pages only): Sources on the left, the
     Bio-PDF extras slot pushed right. */
  .mobile-transport-fnrow .mobile-transport-extras { margin-left: auto; }

  /* ── The media rail LEAVES THE CANVAS (repairing-portrait-custody S5, D5.5) ──
     Joe, Item 7.2 (2026-07-27): "The media carousel should be available from a
     control in the control panel rather than as a visible carousel uncomfortably
     squeezed at the top of the canvas."

     It is not deleted — it is relocated. mobile-visual-director still builds and
     syncs exactly one `.pocket-rail`; the Media slot in the universal control
     panel borrows that live node into an MCP popup and returns it here on close
     (MobilePlayerController._renderMediaSheet / _stowMediaRail). Hidden HERE, as
     a direct child of the stage, so the selector simply stops matching while the
     rail is in the sheet — no competing !important, no second visibility brain.

     (Why it was "squeezed at the very top" in the screenshot rather than at the
     bottom: this zone's `order: 90` placement only ever applied under
     body.pocket-restack, and the restack was being skipped. D5.2a fixed the
     gate; this rule now decides the rail's home deliberately.)

     Scoped to `.pocket-stage-panel` — i.e. the rail leaves the canvas EXACTLY
     WHEN there is a control panel to summon it back from. On a panel-less pocket
     surface (a landscape boot has no `.mobile-tab-bar`; so does a produced page
     before the MCP modules load) the rail stays resident at the foot of the
     stage, as it did before S5, because hiding it there would put the story's
     media out of reach entirely. Never hide an affordance whose new home is
     absent on this surface. */
  body.pocket-restack.pocket-stage-panel .presentation-root.pocket-stage-active > .pocket-rail {
    display: none !important;
  }
  /* Resident-rail geometry for the panel-less fallback (unchanged from S4): last
     in-flow zone, safe-area aware. */
  body.pocket-restack .presentation-root.pocket-stage-active > .pocket-rail {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(9, 31, 36, 0.96);
  }

  /* The sheet is an MCP popup (mobile-tab-bar.css owns its position, backdrop,
     rise animation and reduced-motion handling — the pocket does not
     re-implement any of it). Its default skin is the app's white card; on the
     Pocket Stage it takes the pocket substrate so summoning the media does not
     flash a white panel over a dark story. The title rule is scoped through
     `.pocket-media-sheet` because `.mcp-popup .mcp-popup-title` would otherwise
     outrank a bare class and paint it slate-on-teal. */
  .mcp-popup.pocket-media-sheet {
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(109, 212, 212, 0.08), transparent 62%),
      var(--pkt-substrate, #0d2a30);
    border: 1px solid rgba(109, 212, 212, 0.18);
    color: var(--pkt-fg-1, #e0e6e8);
  }
  /* Three classes deep on purpose. `.mcp-popup .mcp-popup-title` (slate #1f2937,
     for the white default card) has the same specificity as a two-class rule
     here, and mobile-tab-bar.css loads AFTER pocket-stage.css on every produced
     page — so an equal-specificity rule LOSES on source order and the heading
     paints dark-on-dark. Caught by looking at the rendered sheet; every
     structural check passed while the title was unreadable. */
  .mcp-popup.pocket-media-sheet .pocket-media-sheet-title {
    margin: 0 0 10px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.98rem;
    font-weight: 600;
    color: #e6ecec;
    text-align: center;
  }
  /* In the sheet the rail is a comfortable, wrapping grid of real thumbnails
     rather than a squeezed one-line strip — it finally has room to be looked at. */
  .pocket-media-sheet .pocket-rail.pocket-rail--in-sheet {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 2px 0 0;
    max-height: 46dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
  }
  .pocket-media-sheet .pocket-rail.pocket-rail--in-sheet .pocket-rail-thumb {
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
  }
  .pocket-media-sheet .pocket-media-sheet-empty {
    padding: 8px 2px 2px;
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    font-size: 0.84rem;
    color: #9fb4b4;
    text-align: center;
  }

  /* ── anchoring-mobile-stagecraft S4 — #3: reserve the universal-control-panel
     band ──
     When the panel is mounted (body.has-mobile-tab-bar, set by tab-bar.js
     create()), shorten the Pocket Stage flex column by the fixed
     .mobile-tab-bar's height (position:fixed; bottom:0, anchored flush per S2)
     so the media rail sits flush ABOVE the bar instead of behind it. The bar
     carries the home-indicator safe-area inset, so the rail drops its own
     bottom inset here to avoid double-padding. Reducing the column height (vs
     adding padding) keeps the box model exact under overflow:hidden.
     Dormant until the produced pages load the MCP modules via the boot injector
     (see the S4 OUTCOME realization note); the in-app shell realizes it live. */
  body.pocket-restack.has-mobile-tab-bar .presentation-root.pocket-stage-active { /* anchoring-mobile-stagecraft S4 */
    height: calc(100dvh - var(--mobile-tab-bar-height, 48px) - env(safe-area-inset-bottom, 0px));
  }
  body.pocket-restack.has-mobile-tab-bar .presentation-root.pocket-stage-active > .pocket-rail {
    padding-bottom: 8px;
  }

  /* unleashing-laura-stagecraft S1 */
  /* ════════════════════════════════════════════════════════════════════════
     unleashing-laura-stagecraft S1 — full-stage framing + slimmed bottom panel
     ════════════════════════════════════════════════════════════════════════ */

  /* ── LS-3 FULL-STAGE FRAMING (ROOT CAUSE) — unleashing-laura-stagecraft S1 ──
     The produced story pages load about.css + pocket-stage.css but NOT
     mobile-presentation.css — so about.css's desktop `.pres-card { padding:
     48px 92px 86px 16px }` (which reserves the DESKTOP cue-progress rail band
     on the right + the media-carousel band at the bottom) applies UN-reset on
     the produced page, insetting every cue into a smaller rectangle with the
     letterbox bands Joe flagged (ch2 "The Rooms" — "not using even the
     restricted stage"). The canonical mobile reset (mobile-presentation.css:276)
     never loads here. On the pocket restack the topbar/transport/rail are their
     OWN flex rows, so the deck card needs ZERO reserved bands — the cue FILLS
     the whole stage. This is the fix, at the root, on the stylesheet the page
     actually loads. */
  body.pocket-restack .presentation-root.pocket-stage-active .pres-card,
  body.pocket-restack .presentation-root.pocket-stage-active .chapter-card {
    position: absolute;
    inset: 0;
    padding: 0 !important;
  }
  body.pocket-restack .presentation-root.pocket-stage-active .pres-card-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /* Non-cue-bundle visual frames (essence, adapters) must fill the flex column
     too (about.css only :has()-fills the abs-positioned types). */
  body.pocket-restack .presentation-root.pocket-stage-active .visual-frame.active {
    flex: 1;
    min-height: 0;
  }

  /* ── BOTTOM UNIVERSAL PANEL — THE ONE NAVIGATION SURFACE ──
     [Done · Chapters · Media · Sources · [Bio] · [Import]]
     (fable-mobile-toolkit B3, Joe directive 2026-07-07 #2, extended by
     repairing-portrait-custody S5 per Joe's 2026-07-27 Item 7)
     The bottom is the mobile UNIVERSAL dynamic control panel, exactly as every
     other mobile modal: Done (left bookend) · dynamic slots · Import (permanent
     right anchor). Chapters (7.1) and Media (7.2) moved HERE from the stage;
     the transport bar above carries playback only, and the story-player MCP
     consumer that used to push a second transport into this same bar is
     retired. Reshaped via the EXISTING tab-bar / MobileControlPanel path (one
     brain), body.pocket-stage-panel-scoped so only the Pocket Stage is affected.
     repairing-portrait-custody S5 (D5.6/D5.7): the panel is now the ONE
     navigation surface — Done · Chapters · Media · Sources · [Bio] · [Import].
     The old `[data-tab="stories"] { display:none }` rule is GONE: hiding the
     pixels left a live, focusable, tappable Stories button in the bar. Real
     suppression is declared by the surface and applied by tab-bar.js
     (`suppressTabs`), which also disables the control and refuses its click.
     The style below is the visual half of that one mechanism. */
  .mobile-tab-bar .mobile-tab-item.mobile-tab-suppressed {
    display: none !important;
  }
  body.pocket-stage-panel .mobile-tab-bar {
    justify-content: space-between;   /* Done hard-left, Import hard-right */
  }
  body.pocket-stage-panel .mobile-tab-bar .mobile-tab-item {
    flex: 1 1 0;
    min-width: 0;
  }
  /* At five or six controls the equal-flex columns get narrow enough that a
     full-size label wraps or clips. The bar already exposes `mcp-has-many`
     (>=4 dynamic slots) for exactly this and left the styling to "a follow-on
     if/when the count actually crosses the threshold in production" — it does
     now, so this is that follow-on: shrink and tighten the label rather than
     drop it, because an icon-only bar of six unfamiliar glyphs is worse than a
     small word. */
  body.pocket-stage-panel .mobile-tab-bar.mcp-has-many .mobile-tab-label {
    font-size: 0.62rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* ── The 3-panel scaffold is a STAGE layout, not a chrome owner (D5.2a) ──
     `.msp-root` is position:fixed/inset:0 by its own stylesheet. That was
     harmless while it owned the whole pocket; now that the restack owns the
     chrome unconditionally, a mounted scaffold must stay inside the stage band
     instead of covering the header and the transport. It does not mount on any
     surface that loads the mobile bundle today (measured 2026-07-27: cue-bundle
     stories never build a MediaPool grid), so this is the contract written down
     before the first story that does. */
  body.pocket-restack .presentation-root.pocket-stage-active .msp-root:not(.msp-maximized) {
    position: absolute;
    inset: 0;
  }

  /* ── Header "<" chevron removed (Joe directive #5: Done owns exit/return) ──
     (unleashing-laura-stagecraft S1)
     On the produced page there is no drawer module, so the top-bar left button
     falls back to an exit chevron (.pocket-topbar-exit). Now that Done is the
     single exit anchor in the bottom panel, the chevron is a redundant second
     exit — hide it. The hamburger variant (.pocket-topbar-menu, present only
     when a drawer exists) is untouched. The title recentres via flex. */
  body.pocket-restack.pocket-stage-panel .pocket-topbar-exit {
    display: none !important;
  }

  /* ── Nav-panel: the chapter-scrubbing control (Joe directive #6.5) ──
     (unleashing-laura-stagecraft S1) A button in the transport nav row that
     opens the self-contained chapter popup (jump within/among the 6 chapters). */
  .mobile-transport-btn.transport-chapters { min-width: 34px; }
  .mobile-transport-btn.transport-chapters.is-open { color: var(--pkt-amber-bright, #f0b860); }

  .pocket-chapscrub-overlay {
    position: fixed;
    inset: 0;
    z-index: 12500;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    -webkit-tap-highlight-color: transparent;
  }
  .pocket-chapscrub-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 12, 14, 0.6);
    opacity: 0;
    transition: opacity 200ms var(--pkt-ease, ease);
  }
  .pocket-chapscrub-overlay.is-visible .pocket-chapscrub-backdrop { opacity: 1; }
  .pocket-chapscrub-sheet {
    position: relative;
    z-index: 1;
    max-height: 78dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(109, 212, 212, 0.07), transparent 62%),
      var(--pkt-substrate, #0d2a30);
    color: var(--pkt-fg-1, #e0e6e8);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 1px solid rgba(109, 212, 212, 0.18);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
    padding: 18px 14px calc(env(safe-area-inset-bottom, 0px) + 16px);
    transform: translateY(100%);
    transition: transform 260ms var(--pkt-ease, cubic-bezier(0.33, 0, 0.2, 1));
  }
  .pocket-chapscrub-overlay.is-visible .pocket-chapscrub-sheet { transform: translateY(0); }
  .pocket-chapscrub-title {
    margin: 0 4px 12px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.12rem; font-weight: 600; color: #e6ecec;
  }
  .pocket-chapscrub-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left;
    min-height: 52px; padding: 8px 12px;
    border: 1px solid rgba(109, 212, 212, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--pkt-fg-1, #e0e6e8);
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    margin-bottom: 7px;
    -webkit-tap-highlight-color: transparent;
  }
  .pocket-chapscrub-row:active { background: rgba(232, 160, 64, 0.12); }
  .pocket-chapscrub-row.is-current {
    border-color: rgba(232, 160, 64, 0.5);
    background: rgba(232, 160, 64, 0.1);
  }
  .pocket-chapscrub-num {
    flex: 0 0 auto; width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: rgba(109, 212, 212, 0.14);
    color: var(--pkt-teal, #6DD4D4);
    font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .pocket-chapscrub-row.is-current .pocket-chapscrub-num {
    background: rgba(232, 160, 64, 0.18); color: var(--pkt-amber-bright, #f0b860);
  }
  .pocket-chapscrub-label { flex: 1 1 auto; font-size: 0.96rem; font-weight: 600; line-height: 1.3; }

  /* ── First-class mobile VIDEO tier (visual.mobile.kind:"video", AT-6) ──
     (unleashing-laura-stagecraft S1) The dominant clip commands the full
     (limited) stage as a single central focus — object-fit:cover, no bands. */
  .presentation-root .mvd-frame[data-mvd-tier="video"] { padding: 0; overflow: hidden; }
  .presentation-root .mvd-frame[data-mvd-tier="video"] video {
    /* aspect-ratio-doctor: intended-full-bleed — the rule above says it in
       prose ("commands the full stage as a single central focus, no bands");
       this makes the same statement to the detector. */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--pkt-substrate, #0d2a30);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   THE MOBILE LANDSCAPE VOICE — Three Voices composition layer
   (orienting-about-pocket-voice S2, LS-10/LS-11 — resolves POCKET_STAGE open
   question #5). A phone held sideways is a CO-EQUAL voice, never the Mac stage
   shrunk and never the portrait stack rotated: the chrome compacts so the
   stage owns the short axis, the essence card recomposes as a row, and a cue
   whose composition is deliberately portrait-locked renders PILLARBOXED on the
   substrate (an authored directorial choice surfaced gracefully — never a
   broken rotate). pointer:coarse keeps desktop excluded (inviolate).
   ════════════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {

  /* ── Chrome compaction: every vertical pixel belongs to the stage ── */
  .pocket-topbar {
    padding: calc(env(safe-area-inset-top, 0px) + 4px) 10px 4px;
  }
  .pocket-topbar-exit,
  .pocket-topbar-menu,
  .pocket-topbar-fergi,
  .pocket-topbar-fergiai {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .pocket-rail { padding: 5px 12px; }
  .pocket-rail-thumb { width: 40px; height: 40px; border-radius: 7px; }

  /* ════════════════════════════════════════════════════════════════════
     SP-2 UNIVERSAL PILLARBOX — the landscape doctrine
     (refining-about-mobile S2; Joe orientation-doctrine reversal 2026-07-10:
     "We're not trying to have distinct voices. We're just trying to have
     landscape be compatible with portrait, which is the design center of
     the cues.")

     Landscape is NOT an authored voice. Every cue presents its PORTRAIT-
     composed stage — the same logical portrait viewport the member sees
     holding the phone upright — CENTERED on the landscape stage, scaled to
     the deck's short axis, with the vault substrate as pillars either side.

     Mechanism: every frame child (the authored bundle's iframe, the
     pocket-video element, the essence card, an adapter/native root) is
     boxed to the portrait stage's logical size (--pkt-pbx-w × --pkt-pbx-h —
     the director stashes the REAL portrait deck box while portrait;
     393×640 is the cold-start-in-landscape fallback) and transform-scaled
     to fit (--pkt-pbx-scale, director-maintained per tick on a dims
     change). Inside a bundle iframe the layout viewport is therefore
     PORTRAIT — every internal @media (orientation:...) query resolves
     portrait, so the previously-authored landscape CSS across the mobile
     bundles goes inert WITHOUT touching the bundles (inert variants,
     reaped later per the doctrine banner).

     The !important box contract out-ranks the mount's inline
     width:100%/height:100% on the iframe (cue-bundle.js mountBundleIframe)
     and any renderer-inlined sizing. Scoped to the pocket-landscape media
     arm — desktop and portrait never reach these rules. The former per-cue
     landscape recompositions (essence row, archival-clip letterbox,
     lock-portrait special case) are superseded by this one path. */

  .presentation-root.pocket-stage-active {
    /* The pillars. Authored frames carry inline background:transparent
       (mountBundleIframe's container reset), so the substrate must paint
       BEHIND the frame — on the player container — or the app bleeds
       through the pillars (the clip-behind contract class). */
    background:
      radial-gradient(ellipse 120% 80% at 50% 0%, rgba(26, 82, 88, 0.35), transparent 70%),
      #0d2a30;
  }
  /* Frame padding would skew the centered box (absolute positioning
     resolves against the padding box) — the portrait composition carries
     its own interior padding. */
  .presentation-root .mvd-frame,
  .presentation-root .mvd-frame[data-mvd-adapter],
  .presentation-root .mvd-frame[data-mvd-tier="native"] {
    padding: 0 !important;
  }
  .presentation-root .mvd-frame.active > * {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--pkt-pbx-w, 393px) !important;
    height: var(--pkt-pbx-h, 640px) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) scale(var(--pkt-pbx-scale, 0.42)) !important;
    transform-origin: center center !important;
  }
  /* archival-clip inside the portrait box: the renderer inlines
     min-height:240px (a desktop grid-collapse guard baked at render time).
     The portrait box is ~640 logical px tall so it rarely binds, but a
     stage-takeover clip's aspect can push past it — keep the release so
     the portrait fit rules (width-sized, §3k) govern inside the box
     exactly as they do on a real portrait stage. */
  .mvd-archival-clip .ac-stage { min-height: 0 !important; }
}

/* ═══ Touch targets for the phone story's top bar and speed control (Greg, 2026-10-02) ═══
   Family-device matrix (iPhone SE / 15 / 15 Pro Max, Galaxy S9+, Pixel 7): the biography story's SAY IT, the
   release's front door (Joe: correcting one's own and one's family's biography is the most important factor in
   family recruitment), measured 40×40 (34×34 in the compact variant), and Playback speed 40×30, under the 44 px floor
   on every phone. The visible sizes are deliberate ("every vertical pixel belongs to the stage"), so they stay; each
   gets an invisible centred max(100%,44px) target (the G-027 pattern). Regression: tests/mobile/family-device-matrix.js. */
.pocket-topbar-exit, .pocket-topbar-menu, .pocket-topbar-fergi, .pocket-topbar-fergiai, .mobile-transport-speed {
  position: relative;
  touch-action: manipulation;
}
.pocket-topbar-exit::after, .pocket-topbar-menu::after, .pocket-topbar-fergi::after, .pocket-topbar-fergiai::after, .mobile-transport-speed::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}