/* ============ MOBILE STORY DECK: the phone's spine ============ */
/* Phones read the flat story (the same 11 scenes, pre-rendered at phone
   size) as a rigid deck: one swipe, one scene, native scroll-snap on the
   page itself — the one-gesture-one-scene feel the desktop wheel engine
   gives. Snapping lives only on the analysis tab; Explore and About
   scroll free. Voices is a side room off the masthead, not the landing. */

/* the Voices door exists only where the feed does */
@media (min-width: 721px) {
  .tab-voices { display: none; }
}

@media (max-width: 720px) {
  /* the phone masthead: the mark alone, on a shorter shelf (Andrew).
     --mast is the shelf's full height; every panel clears it. */
  :root { --mast: 58px; }
  .hero-brand span { display: none; }
  .hero-brand { top: 13px; }
  .tabs-row { top: 22px; gap: 14px; }
  body::before { height: var(--mast); }

  /* three tabs fit beside the mark; four don't. About yields its seat
     to Voices on phones and keeps a door at the deck's end instead. */
  #tab-about { display: none; }

  html:has(main.daylight[data-tab="analysis"]) {
    scroll-snap-type: y mandatory;
  }
  /* the landing is the deck's first card. The global section
     scroll-margin (anchor breathing room) would pad every snap area and
     rest each card 24px shy of the top, so the deck zeroes it. */
  .hero,
  .panel-analysis .an-flat-scene {
    scroll-margin-top: 0;
  }
  .hero {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* both cue pseudos carry a z-index: a ::before with none paints UNDER
     the hero's card children (the ::after only survived by after-paint
     order), so the chevron was hiding behind the landing card */
  html:has(main.daylight[data-tab="analysis"]) .hero::after {
    content: "Swipe up";
    position: absolute;
    left: 0; right: 0;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 5;
    text-align: center;
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(19, 23, 17, 0.6);
  }
  /* the cue's arrow: a chevron over the words, bobbing a breath upward
     until the reader takes the swipe */
  html:has(main.daylight[data-tab="analysis"]) .hero::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(41px + env(safe-area-inset-bottom));
    z-index: 5;
    width: 12px; height: 12px;
    margin-left: -8px;
    border-left: 2.5px solid rgba(19, 23, 17, 0.6);
    border-top: 2.5px solid rgba(19, 23, 17, 0.6);
    transform: rotate(45deg);
    animation: cue-bob 1.6s ease-in-out infinite;
  }
  /* the same cue on the first voice: the tapes ride the same swipe.
     In-flow under the transcript (voices.js seats it on panel one). */
  .an-cue {
    flex: none;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(19, 23, 17, 0.6);
  }
  .an-cue-arrow {
    width: 12px; height: 12px;
    border-left: 2.5px solid currentColor;
    border-top: 2.5px solid currentColor;
    transform: rotate(45deg);
    animation: cue-bob 1.6s ease-in-out infinite;
  }
  /* the bob travels straight up in the chevron's rotated frame */
  @keyframes cue-bob {
    0%, 100% { transform: rotate(45deg); }
    50% { transform: rotate(45deg) translate(-3px, -3px); }
  }
  @media (prefers-reduced-motion: reduce) {
    html:has(main.daylight[data-tab="analysis"]) .hero::before,
    .an-cue-arrow { animation: none; }
  }

  .panel-analysis .an-wrap { padding-top: 0; }

  /* phone type runs a size up across the deck — the view is already
     small, the words must not be (Andrew) */
  .panel-analysis .an-flat-num { font-size: 16px; }
  .panel-analysis .an-flat-scene h3 { font-size: 29px; line-height: 1.14; }
  .panel-analysis .an-flat-scene p { font-size: 18.5px; line-height: 1.5; }
  .panel-analysis .an-flat-scene {
    box-sizing: border-box;
    min-height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-bottom: 0;
    padding: calc(var(--mast) + 8px) 16px
             calc(16px + env(safe-area-inset-bottom));
  }
  /* graphs never blow up past their 390pt design size (a Pro Max is
     440pt across), and cap to the room the screen actually has under
     the masthead and the scene's words — both axes auto so the ratio
     holds on every device height */
  .panel-analysis .an-flat-scene img {
    width: auto;
    height: auto;
    max-width: min(390px, 100%);
    max-height: calc(100svh - 310px);
    align-self: center;
  }
  /* the two dense charts (20 bars; the dumbbell with the long dek):
     shrinking them to a screen makes their labels unreadable, so they
     keep design size and their panels scroll. If a re-render changes
     these heights the cap above applies. */
  .panel-analysis .an-flat-scene img[height="946"],
  .panel-analysis .an-flat-scene img[height="642"] {
    max-height: none;
    width: min(390px, 100%);
  }
  /* the trend scene's caption runs three lines (four on the narrowest
     phones), so its chart reserves deeper */
  #an-flat-10 img { max-height: calc(100svh - 370px); }
  .panel-analysis .an-flat-scene h3 { margin-bottom: 8px; }
  .panel-analysis .an-flat-scene p { margin-bottom: 14px; }
  /* auto margins center a scene that fits and collapse to nothing on one
     that overflows — a tall scene rests where it lies, scrolls within
     itself, and the next swipe still snaps onward */
  .panel-analysis .an-flat-scene .an-flat-num { margin-top: auto; }
  .panel-analysis .an-flat-scene img { margin-bottom: auto; }

  /* ---- the interleaved voices: the desktop's own curation ----
     Injected by voices.js — the hero tour's first three after the
     landing card, each graphic's walk picks after that graphic; one
     roving tape plays the active panel and swipes the page onward
     when its clip ends. */
  .an-clip {
    box-sizing: border-box;
    /* fixed, not min: the full transcript inside must clip to its pane,
       never stretch the panel past a screen (it would break the snap
       and starve the activation observer's visibility threshold) */
    height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 0;
    display: flex;
    flex-direction: column;
    padding: calc(var(--mast) + 4px) 20px
             calc(18px + env(safe-area-inset-bottom));
  }
  .an-clip-slot {
    position: relative;
    margin: 0 -20px 16px;
    height: 56.25vw;
    background: #000;
    flex: none;
  }
  .an-tape {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; background: #000;
    display: block;
  }
  /* a live pick's YouTube player fills the slot (the API swaps the
     host div for an iframe that keeps the id), and the shield above
     it keeps taps ours — an iframe would swallow them */
  .an-clip-slot [id^="an-yt-"] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; display: block; background: #000;
  }
  .an-yt-shield { position: absolute; inset: 0; z-index: 2; }
  .an-clip .vf-tr { flex: 1; min-height: 0; }

  /* the deck's last card: the doors the masthead has no room for */
  .an-doors {
    box-sizing: border-box;
    min-height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    padding: calc(var(--mast) + 8px) 24px
             calc(28px + env(safe-area-inset-bottom));
  }
  .an-doors-line {
    font-family: "Forma DJR Text", "Switzer", var(--display);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.38;
    color: #131711;
    margin: 0 0 16px;
  }
  .an-doors button,
  .an-doors a.an-door {
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-family: "Forma DJR Text", "Switzer", var(--display);
    font-size: 18px;
    font-weight: 650;
    border-radius: 4px;
    padding: 14px 20px;
    min-height: 50px;
    cursor: pointer;
  }
  .an-doors .an-door-voices {
    background: #131711;
    color: #fff;
    border: 0;
  }
  .an-doors .an-door-about {
    background: none;
    color: #131711;
    border: 1px solid rgba(19, 23, 17, 0.28);
  }
}

@media (min-width: 721px) {
  .an-doors { display: none; }
  .an-clip { display: none; }
}