/* Spectra: opt-in bottom-centre dock (?nav=dock). Everything is scoped to html.nav-dock / .nd, so with no opt-in this file
   changes nothing. 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:rgba(14,14,18,.58);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border-radius:14px;box-shadow:0 10px 36px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.16);
  transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.nd.nd-on{display:flex}
.nd.nd-tuck{opacity:0;transform:translate(-50%,24px);pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nd{background:rgba(18,18,22,.94)}}

/* inside the dock the Menu and Sound buttons lose their own glass and cut corner: the dock is the glass */
.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 glass */
.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. */
/* plain pages: let the last content scroll clear of the dock */
html.nav-dock body:not(.fall){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}

@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}}