/*  mobile.css — responsive substrate for the ontology homepage.
 *
 *  Three sections, in order:
 *    A.  @supports (height: 100dvh) — universal swap so iOS Safari's
 *        collapsing address bar doesn't jitter sticky-pinned heights.
 *    B.  @media (max-width: 720px) — the architectural fork: drops
 *        dual-pane grid + chapter-trigger virtual scroll, pins the
 *        plate (28dvh) and chip nav to the BOTTOM of the viewport
 *        with the chip strip stacked just above the plate, etc.
 *    C.  Register-tabs styling (within the same breakpoint) — the
 *        engraved frontispiece chip strip that replaces the desktop
 *        slider rail on mobile.
 *
 *  All new mobile rules consolidate here. Desktop rules in base.css /
 *  slider.css / landing.css are unchanged; this file is loaded LAST so
 *  its overrides win cleanly without specificity gymnastics.            */


/* ────────────────────────────────────────────────────────────────────
 *  Section A — 100vh → 100dvh sweep (all viewports)
 *  ----------------------------------------------------------------
 *  100dvh = "dynamic viewport height" — collapses to the visible
 *  viewport excluding browser UI when the address bar shrinks. iOS
 *  Safari's bar reflow no longer jitters our pinned heights.
 * ──────────────────────────────────────────────────────────────────── */
@supports (height: 100dvh) {
  .ontology-section { height: 100dvh; }
  .landing { min-height: 100dvh; }
  .landing-inner { height: 100dvh; }
  .register-walk { height: calc(100dvh + var(--chapter-walk-scroll)); }
}


/* ────────────────────────────────────────────────────────────────────
 *  Section B — @media (max-width: 720px)
 *  The architectural fork. Desktop's sticky-section + chapter-trigger
 *  + dual-pane grid is retired entirely; mobile is a linear document
 *  with the plate pinned at the top of the ontology section.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /*  Drop the dual-pane grid. Reorder so the prose sits at the visual
   *  top and the plate hangs at the visual bottom of <main> — the
   *  plate is first in DOM (for screen readers), but `column-reverse`
   *  flips it visually so `position: sticky; bottom: 0` makes it cling
   *  to the viewport bottom while the prose scrolls past from above. */
  main {
    display: flex;
    flex-direction: column-reverse;
  }

  /*  Stage (the painted plate) becomes sticky-pinned at the BOTTOM
   *  of the viewport at 28dvh tall. Prose flows past from above; an
   *  IO (Wave 2A) drives painted state from the prose's scroll
   *  position.
   *
   *  background: var(--paper) prevents the prose flowing above from
   *  bleeding through the plate's transparent regions. box-shadow
   *  fades UPWARD so the plate appears to float above the prose
   *  passing behind it. The top border is provided by the chip-strip
   *  immediately above (its border-bottom). */
  article#stage {
    position: sticky;
    bottom: 0;
    height: 28dvh;
    z-index: 5;
    background: var(--paper);
    border-right: none;
    box-shadow: 0 -4px 12px rgba(60, 40, 12, 0.06);
  }
  /*  Ensure the painted-plate SVG fills the sticky container width
   *  on mobile. Without this, a wide-aspect SVG can render at its
   *  intrinsic size and overflow / underflow the 40dvh region. */
  article#stage > svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /*  Panel becomes full-width with tighter padding. The desktop's
   *  1.8rem 2.4rem 3rem is too generous for a phone. */
  aside#panel {
    width: 100%;
    padding: 1.25rem 1rem 2rem;
  }

  /*  Drop the register-walk's virtual scroll length and the
   *  ontology-section's sticky pin. The section becomes a flex
   *  column so we can lift the chip-strip from its natural
   *  position (between masthead and main) down to sit immediately
   *  above the bottom-sticky plate. */
  .register-walk { height: auto; min-height: auto; }
  .ontology-section {
    position: static;
    height: auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
  }
  /*  Visual order: masthead → prose+plate (main) → chip-strip → footer.
   *  DOM order is unchanged (slider-rail and chapter-tabs remain
   *  between masthead and main for the desktop layout); flex `order`
   *  reshuffles only the visual stack. */
  header.masthead { order: 1; }
  main { order: 2; }
  .chapter-tabs { order: 3; }
  .colophon-foot { order: 4; }

  /*  Hide desktop slider, show mobile chip nav. */
  .slider-rail { display: none; }
  .chapter-tabs { display: flex; }

  /*  Masthead compression. Smaller title + subtitle, drop the top
   *  rule, keep the bottom rule + ✦ ornament for cartouche feel. */
  header.masthead { padding: 1rem 1rem 0.6rem; }
  .masthead-title {
    font-size: 26px;
    letter-spacing: 0.018em;
  }
  .masthead-rule.masthead-rule-top { display: none; }

  /*  Footer stacks vertically (medallion centered above contact). */
  .colophon-foot {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    align-items: center;
  }

  /*  Show all four prose registers stacked on mobile — override the
   *  desktop "only the [data-active] register is visible" rule.
   *  The desktop `.class-panel .prose-stack` uses `display: grid` with
   *  every `.prose` placed in `grid-row: 1; grid-column: 1` so they
   *  overlap and crossfade. On mobile we need them to flow as a normal
   *  vertical stack, so override the parent display too. */
  .class-panel .prose-stack {
    display: block !important;
  }
  .prose-stack .prose {
    opacity: 1 !important;
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /*  Mobile-active register (set by Wave 2A's IO via
   *  body[data-mobile-active-register]): fully painted; non-active
   *  registers dim but readable. */
  body[data-mobile-active-register="1"] .prose-stack .prose-technical,
  body[data-mobile-active-register="2"] .prose-stack .prose-holistic,
  body[data-mobile-active-register="3"] .prose-stack .prose-aesthetic,
  body[data-mobile-active-register="4"] .prose-stack .prose-transcendental {
    opacity: 1 !important;
  }
  body[data-mobile-active-register] .prose-stack .prose:not([data-active]) {
    opacity: 0.55;
  }

  /*  Landing tweaks for small screens.
   *
   *  Override desktop's `position: fixed` on the intro — on phones the
   *  flex-centered hero (wordmark + tagline) plus a fixed-bottom intro
   *  plus a fixed-bottom cue overlap on short viewports (iPhone SE,
   *  landscape phones). Mobile flows the intro in document instead. */
  .landing-tagline { font-size: 1.15rem; }
  .landing-intro {
    position: static;
    bottom: auto;
    left: auto;
    transform: none;
    z-index: auto;
    margin: 1.5rem auto 0;
    font-size: 0.92rem;
    max-width: 320px;
  }
  .landing-scroll-cue { bottom: 18px; }

  /*  Register anchor — invisible 0×0 scroll target. With sticky
   *  elements now at the BOTTOM of the viewport, the top of the
   *  viewport is clear when a chip is tapped, so no scroll-margin
   *  offset is needed — the anchor can land at the top edge. */
  .register-anchor {
    display: block;
    height: 0;
    width: 0;
    overflow: hidden;
    scroll-margin-top: 0;
  }

  /*  Appendix block tightens its top spacing on phones to fit
   *  comfortably below the three chapters' prose. */
  .appendix-block {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }
  .appendix-heading { font-size: 22px; }
  .appendix-subheading { font-size: 15px; }
  .appendix-prose {
    font-size: 15px;
    line-height: 1.6;
  }
  .appendix-prose-technical {
    font-size: 14px;
  }
}


/* ────────────────────────────────────────────────────────────────────
 *  Landscape mobile — kill the intro paragraph; under 568px tall in
 *  landscape we just don't have room.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-height: 568px) and (orientation: landscape) {
  .landing-intro { display: none; }
}


/* ────────────────────────────────────────────────────────────────────
 *  Very short viewports — compress the masthead more. Triggered when
 *  the phone is in a state where vertical real estate is at a premium
 *  but the breakpoint says we're still mobile.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-height: 700px) and (max-width: 720px) {
  header.masthead { padding: 0.6rem 1rem 0.3rem; }
  .masthead-title { font-size: 22px; }
  /*  Further plate compression on short phones — keep prose readable
   *  when the viewport can't spare 28dvh for the visualization. The
   *  chip-strip's bottom-offset follows in lockstep so it sits on top
   *  of the plate. */
  article#stage { height: 24dvh; }
  .chapter-tabs { bottom: 24dvh; }
}


/* ────────────────────────────────────────────────────────────────────
 *  Reduced-motion — disable smooth-scroll site-wide so anchor jumps
 *  and chip-tap scrollIntoView don't animate for visitors who've
 *  asked for reduced motion. Existing reduced-motion blocks in
 *  slider.css and landing.css still apply alongside this.
 * ──────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ────────────────────────────────────────────────────────────────────
 *  Section C — chapter-tabs styling (mobile only)
 *  ----------------------------------------------------------------
 *  Engraved frontispiece × lunarpunk register, matching the slider
 *  rail's typography (IM Fell English, Roman numerals, italic labels)
 *  so the visual register holds even though the control is different.
 *  Sticky-pinned just above the 28dvh plate at the bottom of the
 *  viewport so the chapter-walking visitor always has the three chips
 *  within thumb's reach.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Chapter tabs strip — sticky just above the bottom-pinned plate */
  .chapter-tabs {
    /*  Hidden by default via the `hidden` HTML attribute; this
     *  display: flex lifts it for mobile (HTML spec: a styled
     *  display value beats `hidden`). */
    position: sticky;
    bottom: 28dvh;
    z-index: 6;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 12px rgba(60, 40, 12, 0.08);
  }
  .chapter-tab {
    flex: 1 1 0;
    min-height: 56px;
    padding: 0.5rem 0.25rem;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--rule-faint);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: 'IM Fell English', var(--serif);
    color: var(--ink-3);
    transition: color 220ms ease, background 220ms ease, text-shadow 280ms ease;
  }
  .chapter-tab:last-child { border-right: 0; }
  .chapter-tab-numeral {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    transition: color 220ms ease, text-shadow 280ms ease;
  }
  .chapter-tab-label {
    font-family: 'IM Fell English', var(--serif);
    font-style: italic;
    font-size: 10.5px;
    line-height: 1.1;
    color: var(--ink-3);
    text-align: center;
    letter-spacing: 0.01em;
  }
  .chapter-tab[aria-current="true"] {
    background: rgba(255, 247, 200, 0.35);
  }
  .chapter-tab[aria-current="true"] .chapter-tab-numeral {
    color: var(--ink);
    text-shadow:
      0 0 3px rgba(240, 196, 104, 0.85),
      0 0 8px rgba(240, 196, 104, 0.45);
  }
  .chapter-tab[aria-current="true"] .chapter-tab-label {
    color: var(--ink-2);
  }
  .chapter-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
}

@media (min-width: 721px) {
  .chapter-tabs { display: none !important; }
}