/* ═══ THE PHONE DECK IS A PAGER, AND IN PORTRAIT IT IS DRAWN SIDEWAYS ═══════════════════════════
   Adrian, 2026-08-02, choosing between a "turn your phone" cue and this: render it sideways.

   WHY SIDEWAYS RATHER THAN A CUE, and it is not a style preference. A cue depends on the browser
   reporting `orientation: landscape` when the reader turns the phone, and with ROTATION LOCK ON it
   never does. The reader turns the phone, the page stays portrait, the cue stays up, and they are
   left holding a sideways "turn your phone" message with no way through to the deck. It fails
   CLOSED, on a setting a lot of people leave on. Drawing the slide rotated fails open instead: the
   content is already oriented for a phone held sideways, so turning it works whether the browser
   noticed or not. If rotation lock is OFF, the browser switches to landscape, the rotation below
   stops applying, and the same slide is simply upright. Both paths land in the same place.

   THE ROTATION ARITHMETIC, so it is not a magic incantation. `transform-origin: top left` with
   `rotate(90deg)` maps a point (x,y) to (-y,x), which puts the box off-screen to the left, so the
   box is first pushed up by its own height. Transforms apply right to left, so
   `rotate(90deg) translateY(-100%)` runs the translate first: the box [0..W]x[0..H] becomes
   [0..W]x[-H..0], and the rotation then sends it to [0..H]x[0..W]. Give it W = 100svh and
   H = 100svw and it lands exactly on the portrait viewport, the long way round.

   WHY A PAGER AT ALL. Once a slide is rotated, the page's scroll axis no longer matches the axis
   the reader sees: scrolling "down" moves the content sideways under their thumb. Native scrolling
   is not salvageable here, and it should not be salvaged, because one slide per screen IS a pager.
   Desktop keeps the scrolling deck untouched.

   NO NEW TEXT ON THE DECK. Progress is a rule that fills, not a "3 / 13" caption. The generated
   portrait build was rejected partly for inventing 32 text runs of its own machinery, and a
   content-diff against the desktop deck has to keep coming back clean. */

@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) {

  html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }

  .wrap {
    position: fixed; inset: 0; padding: 0; gap: 0;
    display: block !important; zoom: 1;
    overflow: hidden; background: var(--leaf);
    touch-action: pan-y pinch-zoom;
  }

  /* Every slide sits on the same spot; the pager reveals one. `visibility` rather than
     `display:none` so that a hidden slide still LAYS OUT and can be measured: a verify that cannot
     see twelve of the thirteen slides is not a verify. */
  /* `position` CARRIES !important BECAUSE THE DECK'S OWN ID RULES OUTRANK IT. `#p01{position:
     relative}` and `#p02,#p03,#p06,#p10{position:relative;isolation:isolate}` are (1,0,0) against
     this (0,1,0), and a media query contributes no specificity, so without this five of the
     thirteen slides stayed in normal flow and stacked down the page: measured, p06 rendered at
     y=3376 and p10 at y=4000 while the pager cheerfully reported one slide visible. */
  .slide {
    position: absolute !important; top: 0; left: 0;
    margin: 0; box-shadow: none;
    visibility: hidden; opacity: 0;
    transition: opacity 220ms ease;
  }
  .slide.is-current { visibility: visible; opacity: 1; }

  /* LANDSCAPE: upright, the slide is the screen. */
  @media (orientation: landscape) {
    .slide { width: 100svw !important; height: 100svh !important; transform: none; }
  }

  /* PORTRAIT: same slide, drawn the long way round.
     `max-width` HAS TO BE RELEASED, and it is the whole reason the first build rendered a square.
     phone-landscape.css sets `.slide{width:100vw !important; max-width:100vw}` for the upright
     case. A rotated slide is as wide as the viewport is TALL, so `width:100svh` asks for 800px on
     a 360x800 phone and `max-width:100vw` silently caps it back to 360: measured, every slide came
     out 360x360 with the transform applied and correct. max-width does not lose to an !important
     width, it constrains the result of it, so raising specificity would never have fixed this. */
  @media (orientation: portrait) {
    .slide {
      width: 100svh !important; max-width: 100svh !important;
      height: 100svw !important; max-height: 100svw !important;
      transform: rotate(90deg) translateY(-100%);
      transform-origin: top left;
    }
  }

  /* Progress, as a rule that fills. Drawn on the viewport rather than inside a slide so the
     rotation does not take it with the content: it stays on the bottom edge of the SCREEN, which
     is where a reader looks for it, in both orientations. */
  /* THE RAIL SITS ABOVE THE PHONE'S BOTTOM FURNITURE, not on the screen edge. At bottom:0 it was
     drawn underneath the home indicator and, in landscape, underneath Safari's compact bar — a
     progress indicator nobody can see is not one. It lifts by the same reserve the slides use
     (phone-landscape.css --ios-bar / --sai-b), so on a device with no inset it stays exactly where
     it was and only moves where something is actually covering it. It keeps left/right at 0
     deliberately: the rail is a full-bleed rule, and a 3px line crossing under the island reads as
     the line continuing, not as content being lost. */
  .pg-rail {
    position: fixed; left: 0; right: 0; height: 3px;
    bottom: max(var(--sai-b, 0px), var(--ios-bar, 0px));
    background: rgba(66, 13, 19, .30); z-index: 40; pointer-events: none;
  }
  .pg-rail > i {
    display: block; height: 100%; width: 0;
    background: var(--kesari); transition: width 260ms ease;
  }
  /* The tap targets are the two halves of the screen. No furniture, nothing drawn: the affordance
     is that a deck advances when you tap it. Kept off the rail so a tap near the bottom edge still
     pages rather than landing on a 3px strip. */
  .pg-zone {
    position: fixed; top: 0; bottom: 0; width: 38%; z-index: 30;
    -webkit-tap-highlight-color: transparent; background: none; border: 0;
  }
  .pg-zone.prev { left: 0; }
  .pg-zone.next { left: auto; right: 0; width: 62%; }

  @media (prefers-reduced-motion: reduce) {
    .slide, .pg-rail > i { transition: none; }
  }
}