/* =====================================================================
   nav.css  ·  Persistent world-switcher (shared, self-contained)
   ---------------------------------------------------------------------
   A fixed-corner control present on every world: one tap returns to the
   hall, or expands a switcher to jump straight to any other world.

   Self-contained: does NOT depend on any world's [hidden] paint pin.
   Skinnable per world via these custom properties (set on
   body[data-world-id="x"] in that world's world-theme.css):
     --vv-nav-bg        trigger + panel background
     --vv-nav-ink       trigger + panel text
     --vv-nav-accent    focus ring / hover accent
     --vv-nav-radius    corner radius (0 for a hard-edged metaphor)
     --vv-nav-font      label font-family
     --vv-nav-inset-x / --vv-nav-inset-y   corner offset (default top-left)
   Defaults fall back to the themed --surface / --ink / --accent so the
   control auto-matches each world even before bespoke skinning.
   ===================================================================== */

.vv-nav {
  position: fixed;
  top: var(--vv-nav-inset-y, 1rem);
  left: var(--vv-nav-inset-x, 1rem);
  z-index: 940;                     /* above world content, below .wash */
  font-family: var(--vv-nav-font, var(--font-body, Georgia, serif));
  --_bg: var(--vv-nav-bg, var(--surface, #f5efe3));
  --_ink: var(--vv-nav-ink, var(--ink, #241f1a));
  --_accent: var(--vv-nav-accent, var(--accent, #0f5c63));
  --_radius: var(--vv-nav-radius, 12px);
}
@media (prefers-reduced-motion: no-preference) {
  .vv-nav { transition: opacity .25s ease; }
}

/* ---- the always-visible trigger (the persistent exit) ---- */
.vv-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;                 /* large tap target */
  padding: .5rem .9rem;
  border: 2px solid var(--_ink);
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  -webkit-appearance: none;
  appearance: none;
}
.vv-nav__trigger:hover { border-color: var(--_accent); }
.vv-nav__trigger:focus-visible {
  outline: 3px solid var(--_accent);
  outline-offset: 3px;
}
.vv-nav__mark { font-size: 1.15em; line-height: 0; }
.vv-nav__label { white-space: nowrap; }

/* ---- the switcher panel ---- */
.vv-nav__panel {
  position: absolute;
  top: calc(100% + .55rem);
  left: 0;
  min-width: 17rem;
  max-width: min(22rem, 84vw);
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: .5rem;
  border: 2px solid var(--_ink);
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_ink);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
.vv-nav__panel[hidden] { display: none !important; }

.vv-nav__heading {
  margin: .25rem .5rem .5rem;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}

.vv-nav__hall {
  display: flex;
  align-items: center;
  gap: .6em;
  width: 100%;
  min-height: 44px;
  margin-bottom: .4rem;
  padding: .6rem .7rem;
  border: 2px solid var(--_accent);
  border-radius: calc(var(--_radius) - 2px);
  background: transparent;
  color: var(--_ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.vv-nav__hall:hover,
.vv-nav__world:hover { background: color-mix(in srgb, var(--_accent) 16%, transparent); }
.vv-nav__hall:focus-visible,
.vv-nav__world:focus-visible {
  outline: 3px solid var(--_accent);
  outline-offset: 2px;
}

.vv-nav__list { list-style: none; margin: 0; padding: 0; }

.vv-nav__world {
  display: flex;
  align-items: center;
  gap: .65em;
  width: 100%;
  min-height: 44px;
  padding: .55rem .7rem;
  border: none;
  border-radius: calc(var(--_radius) - 2px);
  background: transparent;
  color: var(--_ink);
  font: inherit;
  font-size: 1.02rem;
  text-align: left;
  cursor: pointer;
}
.vv-nav__dot {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--_ink) 45%, transparent);
}
.vv-nav__wname { font-weight: 600; }
.vv-nav__wmeta { opacity: .68; font-size: .92em; }
.vv-nav__world[aria-current="true"] {
  opacity: .5;
  cursor: default;
  font-style: italic;
}
.vv-nav__world[aria-disabled="true"] {
  opacity: .42;
  cursor: default;
}

/* Body scroll-lock isn't used; the panel simply overlays. */