/* ==========================================================
   RESPONSIVE — tablet tweaks, the mobile scroll mode, reduced motion
   LOAD LAST. Mobile abandons the 3D book for a scrollable stack of pages.
   ========================================================== */

/* ============ MOBILE / PORTRAIT: scrollable pages, like a PDF ============ */
.scroll-book{ display:none; }

/* Landscape tablets fall through to the desktop layout, but the indicator
   reads oversized on a tablet-sized page. Shrink it ~25% here only —
   desktop (pointer:fine) is untouched. */
@media (pointer: coarse) and (orientation: landscape) and (min-width: 721px){
  .jump{ font-size:clamp(10px, calc(var(--page-w) * .0158), 18px); }
  .folio{ font-size:calc(var(--page-w) * .04125); }
}

@media (orientation: portrait) and (max-width: 940px), (max-width: 720px){
  :root{ --page-w: min(94vw, 520px); }
  body{ height:auto; min-height:100dvh; overflow:visible; justify-content:flex-start; padding:0 0 8vh; }
  header.site{ flex:0 0 auto; padding:3vh 0 2vh; }
  .book-wrap{
    visibility:hidden;
    perspective:none;
    position:absolute;
    width:0; height:0;
    overflow:hidden;
    pointer-events:none;
  }
  .side-zone{ display:none; }
  /* mobile has no browser chrome worth hiding and no desk to give the
     candle — fullscreen is a desktop/tablet-book feature only. */
  .fs-toggle{ display:none; }
  /* the candle is desk furniture for the 3D book; portrait has no desk.
     .stage itself isn't hidden here (only its contents collapse), so this
     must be explicit or the candle floats over the scroll stack. .candle-cast
     now lives inside .page.left (book.css) and is already hidden along with
     .book-wrap above; listed here too as a harmless belt-and-braces. */
  .candle, .candle-cast{ display:none; }
  .scroll-book{
    display:block;
    width:var(--page-w);
  }
  .page.m{
    position:relative;
    width:100%;
    height:calc(var(--page-w) * 1.36);
    background:var(--paper);
    border-radius:4px;
    overflow:hidden;
    margin-bottom:16px;
    box-shadow:
      0 12px 26px rgba(0,0,0,.55),
      inset 0 0 0 1px rgba(90,60,20,.25);
  }
  /* Cancels the inline style="position:static" every page fragment ships
     with — .page-inner then falls back to book.css's own rule, which
     reserves the same 7% bottom strip mobile now shares with desktop. */
  .page.m > .page-inner{ position:absolute !important; }
  /* 2.5x the book's .0165 baseline (desktop only goes to 1.25x, typography.css)
     — mobile's page is physically small enough that a merely-proportional
     size reads illegibly tiny. Still just the glyph: height:7% is unchanged. */
  .folio{ font-size:calc(var(--page-w) * .04125); }
  .jump{
    /* .jump lives inside .book-wrap, which is hidden and unclickable on
       mobile (above); escape both so the badge can still show and be
       tapped once a folio opens it. opacity/pointer-events stay governed
       by .jump / .jump.open in ui.css — identical open/closed logic to
       desktop, just anchored to the viewport instead of the book chrome. */
    visibility:visible;
    position:fixed;
    top:auto; left:50%; right:auto; transform:translateX(-50%);
    bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    background:none; border:none; padding:0; gap:0;
  }
  .numpad{
    top:auto; bottom:calc(100% + 8px);
    left:50%; right:auto; transform:translateX(-50%);
    grid-template-columns:repeat(3, 34px);
    gap:5px;
    padding:6px;
  }
  .numpad button{ width:34px; height:34px; font-size:.85rem; padding:0; }
  .numpad button.np-go{ font-size:.55rem; }
}

@media (prefers-reduced-motion: reduce){
  .leaf{ display:none !important; }
  .turn-shade{ display:none !important; }
  .glow{ animation:none !important; }
  svg *{ animation:none !important; }
  /* the candle stops burning but stays lit — a flame whose meaning only
     appears once it moves is broken for a reader who's turned motion off */
  .flame, .flame-core, .flame-halo, .candle-cast{ animation:none !important; }
}