/* ============================================================
   mobile-nav.css (K281) — the mobile navigation sheet.

   Replaces the top-right dropdown disclosure on phones with a
   full-viewport opaque sheet built from the site's own
   .destination card language (eyebrow / title / tag), grouped
   into five clusters, opened from a thumb-reachable trigger at
   the bottom of the screen.

   THREE THINGS THIS FIXES
   1. A flat 19-item list is not scannable on a phone. Five headed
      clusters are.
   2. The room names (Void, Frame, Successor) tell a stranger
      nothing. Every row now carries the site's own descriptor.
   3. The homepage cover mark is a <video>; hardware-composited
      video on mobile Chromium is promoted to an overlay layer
      that IGNORES z-index, which is why the old dropdown was
      painted over by the W.U.L.D. figure. An opaque position:fixed
      sheet with its own compositing layer (translateZ) sits above
      it reliably. A z-index bump alone does not fix that class of
      bug.

   DESKTOP-INERT BY CONSTRUCTION, doubly gated: the <link> carries
   media="(max-width: 640px)" AND every rule below sits inside the
   same query. Nothing here can reach a desktop viewport.

   CURTAINED ROOMS: /successor/ and /console/ are hidden on mobile
   (K281 ruling — mobile is the utilitarian surface). They stay in
   the desktop nav, greyed, where the tease is the point.
   ============================================================ */

@media (max-width: 640px) {

  /* --- the curtained rooms leave the phone entirely (also covers
         the no-JS path, where the legacy nav is still the nav) --- */
  .site-nav a[href="/successor/"],
  .site-nav a[href="/console/"] { display: none; }

  /* --- with JS on, the sheet is the nav: retire the legacy
         disclosure. Without JS, .mnav-on is never set and the
         legacy nav behaves exactly as it does today. --- */
  html.mnav-on .nav-toggle,
  html.mnav-on .nav-toggle-cb,
  html.mnav-on .site-nav { display: none; }

  /* --- K282: the trigger moved OUT of the bottom float and INTO the
         header, which the sheet had left empty (Josiah: "a little barren
         at the top"). The header becomes a sticky one-line bar: wordmark
         left, INDEX right. Sticky so navigation never needs a scroll to
         the top on a long reading page — the ergonomic reason the trigger
         was at the bottom is preserved without a floating element.
         Opaque + translateZ for the same reason the sheet is: it has to
         sit above the homepage cover <video>'s overlay layer. --- */
  /* K283: the banner is BACK on phones (Josiah: it fills the top above the
     mascot and carries the identity). It cannot stick — it is far too tall —
     so the sticky bar is now a SIBLING inserted after the header: the banner
     scrolls away, the bar stays. body.home's absolute header is forced static
     here so the banner sits above the cover instead of over it. */
  html.mnav-on .site-header {
    position: static;
    z-index: auto;
    transform: none;
    background: var(--c-bg);
    margin-block-end: 0;
    padding-block: 0;
    border-bottom: none;
  }
  html.mnav-on .site-banner { display: block; }
  html.mnav-on .site-banner img { height: 5rem; }
  html.mnav-on .site-header-inner { display: none; }

  .mnav-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 9998;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3, 12px);
    padding: var(--s-1, 4px) max(var(--s-3, 12px), env(safe-area-inset-left));
    background: var(--c-bg);
    /* own compositing layer: the homepage cover <video> is promoted to an
       overlay that ignores z-index (ccxlv). */
    transform: translateZ(0);
    border-block: var(--bw-base) solid var(--c-border);
  }

  .mnav-home {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-fg-dim);
    text-decoration: none;
    padding-block: var(--s-2, 8px);
  }
  .mnav-home:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

  .mnav-trigger {
    min-height: 44px;
    padding: var(--s-2, 8px) var(--s-4, 16px);
    font-family: var(--font-mono);
    font-size: .9rem;
    letter-spacing: var(--ls-mega, .18em);
    text-transform: uppercase;
    color: var(--c-fg);
    background: var(--c-bg);
    border: var(--bw-base) solid var(--c-accent);
    border-radius: 0;
  }
  .mnav-trigger:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

  /* ============================================================
     K284 — mobile spacing. The cover was authored as a desktop book
     jacket: min-height:100vh with grid-template-rows 1fr auto 1fr.
     On a 390x844 phone that measured 257px / 258px of content / 257px,
     i.e. ~480px of dead air inside one section, and the page ran 1590px
     for maybe 900px of substance. Measured, not guessed.
     The jacket keeps presence (68vh) but the rows collapse to their
     content and centre, so the air goes without the composition going.
     ============================================================ */
  html.mnav-on .cover {
    min-height: 68vh;
    grid-template-rows: auto auto auto;
    align-content: center;
    row-gap: var(--s-5, 24px);
    padding-block: var(--s-5, 24px);
  }
  /* 54px of lead-in above the search field, and a 108px moat before the
     footer — both desktop rhythm, both too much on a phone. */
  html.mnav-on .cover-search-band { padding-block-start: var(--s-5, 24px); }
  html.mnav-on .page-footer { margin-block-start: var(--s-6, 36px); }
  /* the bar itself carried an inherited 18px bottom margin + uneven padding */
  html.mnav-on .mnav-bar { margin-block-end: 0; padding-block: var(--s-1, 4px); }

  /* --- the homepage index grid and its INDEX-down link now duplicate the
         sheet exactly, so they are retired on phones. The search band
         between them STAYS (Josiah: "Leave the search bar though") — it is
         a plain GET form to /search/, the one thing the sheet cannot be. --- */
  html.mnav-on .index,
  html.mnav-on a[href="#index"] { display: none; }

  /* --- the sheet --- */
  .mnav-sheet {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--c-bg);          /* fully opaque: no video bleed-through */
    transform: translateZ(0);          /* own compositing layer: beats the video overlay */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: max(var(--s-4, 16px), env(safe-area-inset-top))
             max(var(--s-4, 16px), env(safe-area-inset-right))
             calc(72px + env(safe-area-inset-bottom))
             max(var(--s-4, 16px), env(safe-area-inset-left));
  }
  html.mnav-locked, html.mnav-locked body { overflow: hidden; }

  .mnav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3, 12px);
    padding-block-end: var(--s-3, 12px);
    margin-block-end: var(--s-4, 16px);
    border-bottom: var(--bw-base) solid var(--c-border);
  }
  .mnav-wordmark {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-fg-dim);
  }
  .mnav-close {
    min-height: 44px; min-width: 44px;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--c-accent);
    background: none;
    border: var(--bw-base) solid var(--c-border);
  }
  .mnav-close:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

  .mnav-group { margin-block-end: var(--s-5, 24px); }
  .mnav-group-label {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: var(--ls-mega, .18em);
    text-transform: uppercase;
    color: var(--c-accent);
    margin: 0 0 var(--s-2, 8px);
  }

  /* --- the row, in the .destination card language --- */
  .mnav-item {
    display: block;
    min-height: 44px;
    padding: var(--s-3, 12px) 0;
    border-bottom: var(--bw-thin, 1px) solid var(--c-border);
    text-decoration: none;
  }
  .mnav-item:last-child { border-bottom: none; }
  .mnav-item:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
  .mnav-item[aria-current="page"] .mnav-title { color: var(--c-accent); }

  .mnav-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-fg-dim);
  }
  .mnav-title {
    display: block;
    font-family: var(--font-headline, var(--font-body));
    font-size: 1.25rem;
    line-height: var(--lh-snug, 1.2);
    color: var(--c-fg);
    margin-block: 2px;
  }
  .mnav-tag {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    line-height: 1.45;
    color: var(--c-fg-muted, var(--c-fg-dim));
  }

  @media (prefers-reduced-motion: no-preference) {
    .mnav-sheet { animation: mnav-in 140ms var(--ease, ease-out); }
    @keyframes mnav-in { from { opacity: 0 } to { opacity: 1 } }
  }
}