/* =====================================================================
   VividVerse shared shell — ONE control system on every page.
   Three fixed zones (Harold review #3): top nav / breadcrumb / lower dock.
   Theme-adaptive: inherits --surface / --ink / --accent from the world
   container (set by theme.js). Overlays immersive content, never pushes it.
   Progressive + reduced-motion aware. Injected by js/shell.js.
   ===================================================================== */

/* ---- zone 1: global nav (fixed top) ---- */
.vv-shell-top{
  position:fixed; inset:0 0 auto 0; z-index:80; box-sizing:border-box;
  height:3.25rem; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:0 clamp(1rem,3vw,2.5rem);
  background:color-mix(in srgb, var(--surface,#FAF5EA) 82%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--ink,#221F1A) 12%, transparent);
}
.vv-shell-word{
  font-family:var(--font-display,"Fraunces",serif); font-weight:600; font-size:1.12rem;
  color:var(--ink,#221F1A); text-decoration:none; letter-spacing:-0.01em; white-space:nowrap;
}
.vv-shell-nav{ position:relative; }
.vv-shell-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:clamp(0.9rem,2vw,1.7rem); }
.vv-shell-nav a{
  font-family:var(--font-body,"Inter",sans-serif); font-size:0.76rem; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; text-decoration:none;
  color:color-mix(in srgb, var(--ink,#221F1A) 76%, transparent);
  padding:0.35rem 0; transition:color .2s;
}
.vv-shell-nav a:hover{ color:var(--accent,#C9A227); }
.vv-shell-nav a[data-soon]{ opacity:.5; cursor:default; }
.vv-shell-nav a[aria-current="page"]{ color:var(--accent,#C9A227); }
.vv-shell-menu{ display:none; }

/* ---- zone 2: breadcrumb (fixed, directly beneath the top bar) ---- */
.vv-shell-crumb{
  position:fixed; top:3.25rem; inset-inline:0; z-index:79; box-sizing:border-box;
  padding:0.4rem clamp(1rem,3vw,2.5rem);
  font-family:var(--font-body,"Inter",sans-serif); font-size:0.74rem; letter-spacing:0.03em;
  color:color-mix(in srgb, var(--ink,#221F1A) 60%, transparent);
  background:color-mix(in srgb, var(--surface,#FAF5EA) 66%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.vv-shell-crumb a{ color:inherit; text-decoration:none; }
.vv-shell-crumb a:hover{ color:var(--accent,#C9A227); }
.vv-shell-crumb .sep{ opacity:.5; margin:0 .45em; }
.vv-shell-crumb .here{ color:var(--ink,#221F1A); font-weight:500; }

/* ---- zone 3: lower dock (fixed bottom) — Prev / CTA / Next ---- */
.vv-shell-dock{
  position:fixed; inset:auto 0 0 0; z-index:80; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
  padding:0.6rem clamp(1rem,3vw,2.5rem) max(0.6rem,env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--surface,#FAF5EA) 82%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid color-mix(in srgb, var(--ink,#221F1A) 12%, transparent);
}
.vv-shell-move{
  font-family:var(--font-body,"Inter",sans-serif); font-size:0.8rem; font-weight:500;
  color:color-mix(in srgb, var(--ink,#221F1A) 80%, transparent);
  display:inline-flex; align-items:center; gap:.4em;
  background:none; border:none; cursor:pointer; padding:.3rem; transition:color .2s;
}
.vv-shell-move[hidden]{ display:none; }
.vv-shell-move:hover{ color:var(--accent,#C9A227); }
.vv-shell-move .lbl{ max-width:10rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vv-shell-cta{
  font-family:var(--font-body,"Inter",sans-serif); font-weight:600; font-size:0.88rem;
  color:var(--surface,#FAF5EA); background:var(--accent,#C9A227); text-decoration:none;
  padding:0.55rem 1.4rem; border-radius:999px; transition:transform .2s, filter .2s; white-space:nowrap;
}
.vv-shell-cta[hidden]{ display:none; }
.vv-shell-cta:hover{ transform:translateY(-1px); filter:brightness(1.05); }

/* ---- mobile ---- */
@media (max-width:720px){
  .vv-shell-nav ul{
    display:none; position:absolute; top:calc(100% + .4rem); right:0; flex-direction:column; gap:.15rem;
    background:var(--surface,#FAF5EA); padding:.7rem 1.1rem; border-radius:12px; min-width:9rem;
    box-shadow:0 14px 44px rgba(0,0,0,.28);
  }
  .vv-shell-nav.is-open ul{ display:flex; }
  .vv-shell-nav a{ font-size:.82rem; padding:.35rem 0; }
  .vv-shell-menu{
    display:inline-block; font-family:var(--font-body,"Inter",sans-serif); font-size:.74rem; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
    background:none; color:var(--ink,#221F1A);
    border:1px solid color-mix(in srgb,var(--ink,#221F1A) 30%,transparent); border-radius:999px; padding:.35rem .85rem;
  }
  .vv-shell-cta{ display:none; }
  .vv-shell-move .lbl{ max-width:6.5rem; }
}

@media (prefers-reduced-motion:reduce){
  .vv-shell-cta{ transition:none; }
}