/* ───────────────────────────────────────────────────────────────────────────
   vessel.css — THE SHARED SHELL of the SF2X vessel.
   One source of truth for the organ rail + the water-flow between rooms, linked
   by every room (cabin · cosmos · forge · studio · owner). Replaces the five
   hand-drifted inline `.sfnav` copies. Colour/type obey DESIGN.md + fieldTokens.

   Two jobs:
   1) THE RAIL — a glass organ rail, top-right, each room a field-lit dot; the
      room you're in glows gold ("you are here"); the owner's Bridge hatch stays
      hidden until the owner key is present.
   2) THE FLOW — cross-document View Transitions so moving room→room reads like a
      tide turning, not a page load. The rail is pulled out of the flow so it holds
      steady while the room behind it dissolves and reforms (the vessel holds you).
      Every motion has a prefers-reduced-motion off-switch (mandatory, DESIGN.md).
   ─────────────────────────────────────────────────────────────────────────── */

/* ── the flow: cross-document view transitions ─────────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vessel-ebb .34s cubic-bezier(.22, 1, .36, 1) both; }
::view-transition-new(root) { animation: vessel-flow .46s cubic-bezier(.22, 1, .36, 1) both; }

@keyframes vessel-ebb {
  to { opacity: 0; transform: scale(1.012); filter: blur(3px); }
}
@keyframes vessel-flow {
  from { opacity: 0; transform: scale(.994) translateY(10px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* the rail persists across the flow — anchored, no cross-fade (the ship stays put) */
::view-transition-old(vessel-rail),
::view-transition-new(vessel-rail) { animation: none; mix-blend-mode: normal; height: 100%; }

/* ── the rail ──────────────────────────────────────────────────────────────── */
.sfnav {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: 16px;
  z-index: 50;
  display: flex;
  gap: 2px;
  padding: 4px 5px;
  border-radius: 999px;
  background: rgba(6, 9, 20, .82);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(174, 233, 255, .12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 10px 30px -18px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(120, 150, 255, .04);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .06em;
  view-transition-name: vessel-rail;
}

.sfnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #92a6cc;
  text-decoration: none;
  transition: color .18s, background .18s, box-shadow .18s;
}

/* the field dot — each room its own light, dim until you reach for it */
.sfnav a i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  transition: opacity .18s, box-shadow .18s, transform .18s;
}
.sfnav a[data-room="cabin"]  i { color: #aee9ff; }   /* wind */
.sfnav a[data-room="mind"]   i { color: #d8b4ff; }   /* lightning · the mind deck */
.sfnav a[data-room="cosmos"] i { color: #ffe39a; }   /* light · her galaxy */
.sfnav a[data-room="forge"]  i { color: #b08a52; }   /* earth */
.sfnav a[data-room="teardown"] i { color: #b08a52; } /* earth · forge's sibling — real matter pulled apart */
.sfnav a[data-room="studio"] i { color: #18c6c6; }   /* water */
.sfnav a[data-room="bridge"] i { color: #f8e7a1; }   /* gold · owner */

.sfnav a:hover {
  color: #eaf1ff;
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 18px -8px #8fa3ff;
}
.sfnav a:hover i { opacity: 1; transform: scale(1.25); box-shadow: 0 0 8px currentColor, 0 0 16px currentColor; }

/* you are here — the room you're in glows gold, its dot lit, a tide-line beneath */
.sfnav a[aria-current="page"] {
  color: #f8e7a1;
  background: rgba(248, 231, 161, .06);
}
.sfnav a[aria-current="page"] i { opacity: 1; box-shadow: 0 0 8px currentColor, 0 0 16px currentColor; }

.sfnav a:focus-visible { outline: 2px solid #aee9ff; outline-offset: 2px; }

/* the owner's Bridge hatch — revealed by vesselNav.ts only when the owner key is set */
.sfnav a.owner-only[hidden] { display: none; }

/* ── the sealed bays (spec §4.5) — a not-yet door: visible, named, honest, NOT a link.
   Injected by vesselNav.ts from sealedDoor.ts (single source). Dashed + dimmed so it
   reads as a promise with a condition, never a working destination or a dead link. */
.sfnav .sealed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #5f6f92;
  cursor: not-allowed;
  border: 1px dashed rgba(159, 180, 216, .22);
  margin-left: 2px;
}
.sfnav .sealed i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; }
.sfnav .sealed[data-room="machine"] i { color: #9fb0d8; }
.sfnav .sealed .seal-label {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a7a52;
  border: 1px solid rgba(138, 122, 82, .3);
  border-radius: 5px;
  padding: 1px 5px;
}
.sfnav .sealed:focus-visible { outline: 2px solid #aee9ff; outline-offset: 2px; }
@media (max-width: 640px) { .sfnav .sealed .seal-label { display: none; } }

/* ── THE WAY BACK ─────────────────────────────────────────────────────────────
   Every room needs the same way out, in the same place, or the vessel stops
   feeling like one building. This was defined ONLY inside forge/mind/owner, so
   cosmos, studio and elite either had no back link at all or an unstyled inline
   one (Cam: "some don't have the bar to move back to where you were"). It lives
   here now, once, so a new room inherits it by writing one anchor. Rooms that
   still carry their own `a.home` rule win on specificity — no regression. */
.home {
  position: fixed;
  left: 18px;
  top: calc(18px + env(safe-area-inset-top));
  z-index: 51;                        /* above the rail's 50 — the exit is never buried */
  padding: 6px 10px;
  border-radius: 999px;
  color: #92a6cc;
  text-decoration: none;
  font: 400 13px 'Space Mono', ui-monospace, monospace;
  letter-spacing: .04em;
  background: rgba(6, 9, 20, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(174, 233, 255, .1);
  transition: color .18s, border-color .18s, background .18s;
}
.home:hover { color: #eaf1ff; border-color: rgba(174, 233, 255, .28); background: rgba(6, 9, 20, .75); }
.home:focus-visible { outline: 2px solid #f8e7a1; outline-offset: 2px; }
@media (max-width: 640px) { .home { left: 12px; top: calc(12px + env(safe-area-inset-top)); } }
@media (prefers-reduced-motion: reduce) { .home { transition: none; } }

/* ── the cross-app door ───────────────────────────────────────────────────────
   /teardown is a hatch on this rail but lands in the OTHER app (the Creator
   Next.js surface): different chrome, no rail. The scene change is real, so the
   door is marked rather than disguised — you should know before you step. The
   Creator side now carries a matching "← back to sf2x" so it is a door, not a
   trapdoor. Marker hides in the compact rail (labels are hidden there anyway). */
.sfnav a[data-room="teardown"]::after {
  content: "↗";
  font-size: 9px;
  opacity: .5;
  margin-left: -2px;
}
@media (max-width: 1599px) { .sfnav a[data-room="teardown"]:not([aria-current="page"])::after { content: none; } }

/* ── COMPACT RAIL — the rail must never sit on top of a room's own controls ──
   The rail is fixed top-right; rooms put their primary controls top-CENTER
   (the forge's summon bar, the cosmos HUD). With every hatch labelled the rail
   grew to ~782px on a 1280px viewport and covered the forge's input + FORGE
   button entirely (measured, 14.8k px² of overlap — the control was unclickable).
   Below a roomy viewport the rail therefore collapses to its field-dots and
   ONLY the room you are in keeps its name. Nothing is removed: every hatch is
   still there, still tab-reachable, still carries its accessible name (the text
   stays in the DOM — font-size:0 hides it visually, screen readers keep it),
   and hover/focus still lights the dot. Above 1600px the full rail returns. */
@media (max-width: 1599px) {
  .sfnav { gap: 1px; }
  .sfnav a { padding: 8px 9px; gap: 0; font-size: 0; letter-spacing: 0; }
  .sfnav a i { width: 7px; height: 7px; opacity: .75; }
  .sfnav a[aria-current="page"] { font-size: 11px; letter-spacing: .06em; gap: 6px; padding: 6px 12px; }
  .sfnav a[aria-current="page"] i { width: 5px; height: 5px; }
  .sfnav .sealed { font-size: 0; letter-spacing: 0; padding: 8px 9px; gap: 0; }
  .sfnav .sealed i { width: 7px; height: 7px; }
  .sfnav .sealed .seal-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .sfnav a, .sfnav a i { transition: none; }
}

@media (pointer: coarse) { .sfnav a { padding: 9px 13px; } }
@media (max-width: 540px) {
  /* full-width on a phone; wrap rather than overflow — the rail keeps earning rooms
     (mind, teardown, the sealed bay) and a long label must never push a door off the
     screen edge. Wrapping scales; a fixed single row does not. */
  .sfnav { top: calc(8px + env(safe-area-inset-top)); right: 8px; left: 8px; justify-content: center; flex-wrap: wrap; row-gap: 2px; }
}