/* Spectra: bottom-centre dock (default; ?nav=top opts out). Everything is scoped to html.nav-dock / .nd. Pair: js/nav-dock.js. Sound + Menu + Book now are moved here from the header (not cloned). */

.nd{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:61;transform:translateX(-50%);
  display:none;align-items:center;gap:6px;padding:6px;max-width:calc(100vw - 24px);
  background:#0b0b0d;   /* council 2026-11-08 C18: solid near-black with a hairline, no frosted glass */
  border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.12);
  transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.nd.nd-on{display:flex}

/* inside the dock the Menu and Sound buttons lose their own fill and cut corner: the dock is the surface */
.nd .mn-btn{order:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;clip-path:none;border-radius:9px;min-height:44px}
.nd .mn-btn::before{display:none}
.nd .mn-btn::after{display:none}
@media (hover:hover){.nd .mn-btn:hover{background:rgba(255,255,255,.1)}}
.nd .mn-btn:focus-visible{background:rgba(255,255,255,.1)}
.nd .snd{order:0;min-width:44px;min-height:44px;padding:0 10px;color:var(--ink,#fcfcfc);opacity:.9;border-radius:9px}
@media (hover:hover){.nd .snd:hover{background:rgba(255,255,255,.1)}}
/* the page's bright-room ink flip is for the header; the dock is always dark */
.bright-room:not(.arrived) .nd .snd{color:var(--ink,#fcfcfc)}
.nd .book{order:0;min-height:44px;padding:0 22px;font-size:16px}
.nd .book::before{clip-path:none;border-radius:9px}
.nd .book::after{border-radius:0 0 9px 9px}
.nd .book{border-radius:9px;overflow:hidden}
.nd .snd-lbl{font-size:12px}

/* header: only the logo remains on the right-hand side, so the legible backing can stay as is */

/* make room: on wide screens the dock (bottom centre) clears the hint (right), the hero (left) and the stop card on its own.
   On phones the hint, hero and the stop card's last lines are what the dock would sit on, so they lift above it. */
/* every page: the footer's last line (the CrayWingz credit) scrolls clear of the dock. On the body this missed the landing, whose
   footer lives inside .fall .visit, its own fixed scroller (council 2026-11-08 A1). --sab once only; the dock adds its own env() on top. */
html.nav-dock .sfoot{padding-bottom:calc(32px + 84px + var(--sab))}

@media (max-width:720px){
  .nd{gap:2px;padding:5px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .nd .snd{padding:0;justify-content:center}
  .nd .snd-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .nd .mn-btn{padding:0 14px 0 12px;font-size:15px}
  .nd .book{padding:0 18px;font-size:15px}
  html.nav-dock .hint{bottom:calc(var(--gut)*1.6 + var(--sab) + 70px)}
  html.nav-dock.fall .hero{bottom:calc(var(--gut)*5.2 + var(--sab) + 56px)}
  html.nav-dock .stopcard{padding-bottom:calc(120px + var(--sab))}
  html.nav-dock .brake{bottom:calc(var(--gut)*1.1 + var(--sab) + 72px)}
}
@media (max-height:500px) and (orientation:landscape){
  .nd{bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  html.nav-dock .hint{display:none}
  html.nav-dock .stopcard{padding-bottom:calc(60px + var(--sab))}
}
@media (prefers-reduced-motion:reduce){.nd{transition:none}}

/* the menu owns the screen while open (its own Close and Book now are in its top bar): the dock steps aside */
html.mn-lock .nd{opacity:0;pointer-events:none;transition:opacity .2s linear}
/* the landing's scroll cue (bottom centre) sits above the dock */
html.nav-dock.fall #fall .scue{bottom:calc(var(--gut)*.9 + var(--sab) + 84px)}
@media (max-width:720px){html.nav-dock.fall #fall .scue{bottom:calc(var(--gut)*.9 + var(--sab) + 74px)}}
@media (max-height:500px) and (orientation:landscape){html.nav-dock.fall #fall .scue{bottom:calc(var(--gut)*.9 + var(--sab) + 64px)}}

/* no flash: Sound, Menu and Book now are in the page's HTML, so on a slow load they could paint in the header for a beat before nav-dock.js
   moves them. Keep them invisible while they are still header children; once re-parented into .nd these rules no longer match.
   Failsafe (no JS, or the script is blocked): they appear after 2.5s. ?nav=top adds html.nav-top and shows them straight away. */
header.top .book,header.top .snd,header.top .mn-btn{visibility:hidden;animation:nd-failsafe 0s linear 2.5s forwards}
html.nav-top header.top .book,html.nav-top header.top .snd,html.nav-top header.top .mn-btn{visibility:visible;animation:none}
@keyframes nd-failsafe{to{visibility:visible}}

/* a focused field or button scrolls into view clear of the dock instead of landing underneath it */
html.nav-dock{scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}