/* =============================================================================
   SOUL PILOT — SHARED SHELL CHROME
   frontend/css/shell.css

   Styles for the three shell structures:
     Shell 1 — marketing shell (Surface 1, /)
     Shell 2 — artifact shell (five-nav header + artifact body)
     Shell 3 — chamber shell (meridian + rail + chamber stage)

   The five-nav header exists only in Shell 2.
   The meridian exists only in Shell 3.
   The rail exists only in Shell 3.

   Meridian and rail component details (geometry, state-class modulation,
   slot states, hover expansion) are filled in during C3c.
   ============================================================================= */


/* =============================================================================
   AMBIENT WORLD — shared backplate (S1 / S2 / S3)
   Three fixed layers beneath all chamber content:
     - #world-starfield   — animated twinkle canvas (z 0)
     - .world-aurora      — layered radial gradient wash (z 1)
     - .world-horizon     — dark sea plate + gold seam (z 2)
   Plus the #world container itself, which carries a vertical-tone ocean
   gradient as a fourth atmospheric layer (the "ocean base").

   The starfield canvas is driven by frontend/js/shells/ambientWorld.js.
   State-driven filter modulation (register-b, oracle-invoked) on #world
   lives in chambers.css and cascades to the three sub-layers.

   ─── ADDITIVE MODEL — surface progression (2026-05-16 inversion) ──────
   The shell defaults to pure chamber-black (the html { background:
   var(--ocean-void) } baseline). #world's gradient AND all three sub-
   layers start invisible. Each surface body class then OPTS IN to the
   layers it wants present.

     Surface 1 (marketing)         opts in to: #world gradient + starfield + aurora + horizon
     Surface 2 (threshold chambers) opts in to: #world gradient + starfield + aurora
     Surface 3 (interior)           opts in to: nothing — pure chamber-black

   Why the inversion (was: subtractive, layers retire by surface):
     - The previous default state was the most-decorated state, so any
       moment when surface-specific CSS hadn't fully applied (hard
       refresh during paint, body-class swap latency, brief uninstrumented
       state) leaked the wrong chrome. Hard-refreshing a Surface 3 chamber
       briefly showed the starfield + aurora before the hide rules fired.
     - The inverted default aligns with the user's experiential home —
       Surface 3 (chambers) is where they spend most of their journey
       post-payment. The chamber-black IS the "home" state. Defaulting
       to it makes the most-common state the safe fallback.
     - Failure mode flips: any uninstrumented moment shows minimal chrome
       rather than maximal chrome.

   Cold-load flash on Surface 1: not a concern — the splash overlay
   (#splash, z-index 80, background #03050b, full viewport) covers
   everything beneath during its lifetime, masking the layer opt-in.

   Layers stay in the DOM at opacity:0 (rather than display:none) so
   between-surface transitions can animate cleanly, and so any future
   ceremony that needs to bring a layer back briefly has it ready.
   ============================================================================= */

#world {
  position: fixed;
  inset: 0;
  z-index: var(--z-atmosphere);
  pointer-events: none;
  /* Default: transparent. The vertical-tone ocean gradient is opted in
     by surface-1 / surface-2 body classes below. Surface 3 leaves this
     transparent so the html chamber-black baseline shows through. */
  background: transparent;
  transition:
    filter 1600ms var(--ease-unfurl),
    background 2000ms var(--ease-unfurl);
  will-change: filter;
}

#world-starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2000ms var(--ease-unfurl);
}

.world-aurora {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Radial glow accents only — no opaque base layer, so the starfield below
     shows through. The dark vertical-tone base lives on #world. */
  background:
    radial-gradient(1200px 700px at 50% 85%, rgba(42, 64, 96, 0.55) 0%, transparent 60%),
    radial-gradient(900px 600px at 20% 20%, rgba(26, 42, 70, 0.35) 0%, transparent 55%),
    radial-gradient(900px 600px at 80% 30%, rgba(36, 56, 90, 0.28) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 2000ms var(--ease-unfurl);
}

.world-horizon {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38vh;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(201, 168, 76, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(8, 12, 22, 0) 0%, rgba(8, 12, 22, 0.55) 40%, rgba(3, 6, 12, 0.95) 100%);
  opacity: 0;
  transition: opacity 2000ms var(--ease-unfurl);
}

.world-horizon::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 168, 76, 0.35) 30%,
    rgba(232, 201, 122, 0.55) 50%,
    rgba(201, 168, 76, 0.35) 70%,
    transparent
  );
  filter: blur(0.4px);
  opacity: 0.8;
}


/* ─────────────────────────────────────────────────────────────────────
   AMBIENT WORLD — surface opt-ins (additive model, 2026-05-16)
   See the AMBIENT WORLD comment block above for the architectural
   rationale. Each body class opts in to whichever layers it wants;
   the default (no body class match) stays at pure chamber-black.

   The shared #world gradient (surface-1 + surface-2): vertical-tone
   ocean base. The starfield + aurora opt-ins also share between S1 and
   S2. Only horizon is S1-exclusive — its gold seam belongs to the
   marketing surface only.
   ───────────────────────────────────────────────────────────────────── */

/* #world ocean base — opts in for S1 + S2 */
body.surface-1 #world,
body.surface-2 #world {
  background: linear-gradient(180deg, #05070e 0%, #070b17 40%, #0a1220 100%);
}

/* Starfield — opts in for S1 + S2. The !important is required to
   override the inline style="opacity:0" defensive FOUC guard on the
   world layer divs in app.html. See the comment block in app.html for
   the rationale. */
body.surface-1 #world-starfield,
body.surface-2 #world-starfield {
  opacity: 0.9 !important;
}

/* Aurora — opts in for S1 + S2 */
body.surface-1 .world-aurora,
body.surface-2 .world-aurora {
  opacity: 1 !important;
}

/* Horizon — opts in for S1 only */
body.surface-1 .world-horizon {
  opacity: 1 !important;
}

/* ─── Phase 1 Oracle revealed-state ambient revival (2026-05-26) ──────
   The Oracle's pinnacle moment in Phase 1 close reprises the starfield
   from the marketing surface as a deliberate signature exception to the
   S3-drops-starfield doctrine. Aurora stays at 0 — only the starfield
   returns. Applied by frontend/js/chambers/phases/phase1/oracle.js when
   the chamber enters its --revealed state; removed on unmount.

   This is the singular cross-surface ambient exception in v1. Future
   phase-closing Oracles (Phase 2-9) can reuse the same body class for
   the same elevation register. */
body.phase-oracle-revealed #world-starfield {
  opacity: 0.85 !important;
}


/* ── SHARED TYPOGRAPHY UTILITIES ── */

.eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--horizon-bright);
}

.section-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--horizon-bright);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--horizon-glow), transparent);
  opacity: 0.7;
}

.ornament {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 44px 0;
}
.ornament-line        { flex: 1; height: 1px; }
.ornament-line.left   { background: linear-gradient(90deg, transparent, var(--ocean-rim)); }
.ornament-line.right  { background: linear-gradient(90deg, var(--ocean-rim), transparent); }
.ornament-star        { color: var(--gold-deep); font-size: 12px; }


/* =============================================================================
   SHELL 1 — Marketing Header (Surface 1)
   Lightweight: wordmark + marketing nav + Begin / Sign In.
   No meridian. No rail. No artifact nav.
   ============================================================================= */

.marketing-header {
  position: sticky;
  top: 0;
  z-index: var(--z-meridian);
  background: rgba(8, 12, 22, 0.96);
  border-bottom: 1px solid var(--ocean-rim);
  backdrop-filter: blur(16px);
}

.marketing-header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 40px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

/* Header logo — defensive base sizing only. The class is currently applied
   to an inline SVG (Surface 1's index.html), with surface1.css providing
   the surface-specific color/filter treatment. Earlier this rule painted
   a background-image (/frontend/static/images/wheel-icon.png) for an old
   PNG-based logo design — removed 2026-04-25 since the inline SVG no
   longer needs it (and the missing PNG was throwing 404s on every page
   load). Width/height/flex-shrink kept here as safe defaults for any
   future context that uses .header-logo without its own surface CSS. */
.header-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.header-wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold-whisper);
  letter-spacing: 0.12em;
  text-shadow: 0 0 16px rgba(242, 228, 184, 0.2);
}

/* Marketing nav links (Surface 1 only) */
.marketing-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
  justify-content: center;
}

.nav-link {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--horizon-text);
  text-decoration: none;
  cursor: pointer;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.nav-link:hover  { color: var(--gold-mid); }
.nav-link.active { color: var(--gold-mid); border-bottom-color: rgba(201, 168, 76, 0.4); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Ghost button — shared across shells */
.btn-ghost {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-mid);
  background: transparent;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 100px;
  padding: 8px 22px;
  cursor: pointer;
  transition: all 250ms var(--ease);
}
.btn-ghost:hover {
  border-color: var(--gold-mid);
  background: rgba(201, 168, 76, 0.07);
}


/* =============================================================================
   SHELL 2 — Artifact Header (authenticated, outside journey flow)
   Five-nav: Your Chart · Your Journey · Your Crew · Dive Deeper · Account
   ============================================================================= */

.artifact-header {
  position: sticky;
  top: 0;
  z-index: var(--z-meridian);
  background: rgba(8, 12, 22, 0.96);
  border-bottom: 1px solid var(--ocean-rim);
  backdrop-filter: blur(16px);
}

.artifact-header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 40px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.artifact-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
  justify-content: center;
}

/* Artifact body container */
.artifact-body {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 60px 40px 100px;
}


/* =============================================================================
   SHELL 3 — Chamber Shell (Surfaces 2 + 3)
   Meridian top bar + right-edge rail + chamber stage + side-chamber overlay slot.
   No five-nav. Fixed-frame. Chamber-based navigation.
   ============================================================================= */

/* Chamber shell root — full-viewport fixed layout */
.chamber-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── MERIDIAN — typography atoms ──
   The .meridian element is a host for the live clock children — both surfaces
   place it in the top-bar center zone and let liveMeridian.js paint
   .meridian-dot + .meridian-time inside:
     Surface 2 → .threshold-header .meridian  (header center, C4.d)
     Surface 3 → .s3-brand-strip .meridian    (brand strip center, C4.i)
   The atoms below are the shared typography + pulse; surface-scoped rules
   position the host inside its respective top-bar grid. */

/* Time display — text atom used by all surface-scoped meridian hosts.
   Color moved from --horizon-text (blue) to --parchment-mid as of C4.d
   (Daljeet sign-off 2026-04-22) — the meridian is a warm parchment
   element in the chrome register, not a horizon-blue nav affordance.
   Uppercase + wider tracking applied to read as a ceremonial small-caps
   register when the clock carries day-of-week + full date + time + UTC. */
.meridian-time {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--parchment-mid);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Pulsing gold dot — paired with .meridian-time inside each surface's meridian host */
.meridian-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-mid);
  animation: meridian-pulse 2.4s ease-in-out infinite;
}
@keyframes meridian-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}


/* ── CHAMBER STAGE ── */
/* Fixed frame region where the current chamber paints. */
/* Register A/B/C differentiation, transitions, atmosphere z-layer handled in chambers.css */
.chamber-stage {
  position: fixed;
  top: var(--meridian-height);
  left: 0;
  right: var(--rail-collapsed);
  bottom: 0;
  z-index: var(--z-chamber);
  overflow: hidden;
}

/* Stage expands when rail is in body.register-b receded state */
body.register-b .chamber-stage {
  right: 52px;  /* receded rail width */
}

/* ── RESPONSIVE UNFIX — Surface 2 (Option A, C4.d, 2026-04-22) ──
   On narrow OR short viewports, the chamber-stage drops out of its
   viewport-locked fixed frame and becomes an ordinary block in document
   flow. The body scrolls naturally. Shell chrome (threshold-header top,
   threshold-underline bottom) remains fixed — their position:fixed is
   what justifies the padding below.

   Breakpoint matches the reference's cutoff (1101px × 760px). Scoped to
   body.surface-2 only; Surface 3 keeps its fixed-frame chamber-stage
   because S3 chambers (register-b/c) paint into an absolute-positioned
   landmark that relies on the stage being positioned. S3 responsiveness
   is a separate pass. */
@media (max-width: 1100px), (max-height: 759px) {
  body.surface-2 .chamber-stage {
    position: static;
    overflow: visible;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    padding-top: var(--meridian-height);
    padding-bottom: 72px;     /* clearance for the fixed threshold-underline */
    min-height: 100vh;
  }
  body.surface-2.register-b .chamber-stage {
    right: auto;              /* override the 52px rail-receded shift */
  }
}


/* ── RIGHT-EDGE RAIL ── */
/* 64px collapsed / 248px expanded on hover or focus.         */
/* Full slot rendering, state classes, animations: C3c.        */
.rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--rail-collapsed);
  z-index: var(--z-rail);
  background: rgba(13, 18, 32, 0.94);
  border-left: 1px solid var(--ocean-rim);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition:
    width var(--dur-rail) var(--ease),
    opacity 800ms var(--ease);
}

.rail:hover,
.rail:focus-within {
  width: var(--rail-expanded);
}

/* Rail eyebrow — parchment-deep (was horizon-mid; reclaimed for sect 2026-05-20).
   Eyebrows live in the parchment label register; horizon is now reserved for
   nocturnal-sect signal (medallion glow + planet glyph on .c-sect-lunar). */
.rail-eyebrow {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-deep);
  padding: 16px 16px 8px;
  white-space: nowrap;
  overflow: hidden;
}

/* Rail state-class modulation                                               */
/*                                                                            */
/* RETIRED 2026-05-19: the prior register-b recede rules (width: 52px +      */
/* opacity: 0.55) made the rail visibly narrower + dimmer during Reveal     */
/* chambers, intended as a "let the immersive card take primacy" gesture.   */
/* In practice that created a jarring width-and-opacity jump when           */
/* navigating between Phase 1 chambers (e.g. Invite → Reveal → Reflect),    */
/* since Reveal is the only register-b among them. Daljeet's 2026-05-19    */
/* call: rail should look identical across every Phase 1 chamber, no jumps. */
/* Both the base and surface-3 variants of the register-b rules removed     */
/* (the latter formerly lived around line 1808 of this file).               */
/*                                                                            */
/* The oracle-invoked dimming below stays — that ceremony genuinely makes   */
/* the rail inert and the visual change correctly communicates it.          */
/* Note 2026-05-16 on the (now-retired) :has(.slot.installing) auto-expand: */
/* it was removed because Phase 1's progressive install model would have   */
/* kept the rail permanently expanded (the Ship slot stays .installing     */
/* across the entire 4-step phase). Rail expands only on hover/focus now.  */
body.oracle-invoked .rail { opacity: 0.12; pointer-events: none; }


/* ── BACK NAVIGATION — transparent < affordance ── */
/* Positioned in the chamber stage left margin. Details in C3c. */
.back-nav {
  position: fixed;
  top: calc(var(--meridian-height) + 50%);
  left: 20px;
  z-index: calc(var(--z-chamber) + 1);
  transform: translateY(-50%);
  color: var(--horizon-mid);
  font-family: var(--font-ui);
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 200ms;
  padding: 12px;
}
.back-nav:hover              { opacity: 0.75; }
.back-nav:disabled,
body.oracle-invoked .back-nav {
  opacity: 0.15;
  pointer-events: none;
}
body.oracle-invoked .back-nav {
  /* formal disabled state during Oracle — see doc 32 §XII C3c */
  pointer-events: none;
}


/* ── SIDE CHAMBER OVERLAY SLOT ── */
/* Full-screen overlay for lexicon depth. Base geometry; panel family below. */
/* Uses visibility+opacity rather than display toggling so the fade transition */
/* actually fires (display:none suppresses opacity transitions). */
.side-chamber-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-side-chamber);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

body.side-chamber-open .side-chamber-overlay {
  pointer-events: auto;
}

/* When a side-chamber panel is open, lock body scroll. Chamber-flow
   chambers (T2, T4, T5+) make the document body scrollable, which
   collides with the overlay's own overflow-y: auto — the user sees a
   double scrollbar (one for the page beneath, one for the overlay).
   Locking html/body scroll while the overlay is open eliminates that
   collision. The overlay handles its own scrolling for tall panels.
   Fixed-frame chambers don't have body scroll anyway, so this rule is
   a no-op there. */
/* Reserve the vertical-scrollbar gutter unconditionally so opening the
   side-chamber overlay (which applies overflow:hidden below) doesn't
   reclaim the scrollbar's width and shift chamber content sideways. The
   gutter is invisible on platforms whose scrollbars overlay (modern
   macOS); on platforms whose scrollbars take layout space (Windows, Linux,
   some macOS preferences), the gutter is held even when the bar isn't
   drawn. Lock issue surfaced May 11 2026 against the Surface 3 footer
   rebuild when overlay open/close caused a ~15px horizontal jitter. */
html {
  scrollbar-gutter: stable;
}

html:has(body.side-chamber-open),
body.side-chamber-open {
  overflow: hidden;
}


/* =============================================================================
   SHELL 3 — SURFACE 2 VARIANT (Threshold chrome)
   Transitional chrome for the pre-payment threshold.
   All rules scoped under body.surface-2 so they paint only when the router
   has set surface-2. Vocabulary:
     .threshold-header         — top bar (display only; no functional nav)
     .threshold-underline      — bottom three-zone footer
     .threshold-underline-glyphs — left zone: Lexicon / Resources / About triggers
     .threshold-underline-tide   — center zone: decorative gold gradient
     .meridian                   — right zone: live clock (surviving .meridian use)
     .side-chamber-panel (family) — content panel inside .side-chamber-overlay
   Per navigation-layer-separation: threshold-header is NOT meridian, NOT nav;
   underline glyphs only open side chambers; live-meridian is display only.
   ============================================================================= */

/* ── THRESHOLD HEADER — top bar (transitional) ──
   Three-zone layout: left (glyph + wordmark) · center (live meridian) ·
   right (threshold eye). Grid 1fr / auto / 1fr so the meridian stays
   mathematically centered regardless of left/right zone widths. Previously
   two-zone space-between; meridian moved to the center in C4.d (Daljeet
   sign-off 2026-04-22). */
body.surface-2 .threshold-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--meridian-height);
  z-index: var(--z-meridian);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(24px, 3.2vw, 48px);
  gap: 24px;
  pointer-events: none;  /* display only */
  /* Chrome backdrop — gradient solid-at-edge fading to transparent at
     the chamber-facing edge, plus a soft backdrop-blur. Promoted to
     Surface 2-wide on 2026-04-30 (Daljeet sign-off): on chambers that
     scroll (T2 chamber-flow, T4 chart-flow), this masks scrolling
     content from "violating" the chrome; on fixed-frame chambers
     (T1, T3, etc.) it's purely cosmetic but unifies the visual register
     across the whole surface. The seam between fixed and scrolling
     chambers reads as identical chrome in both directions. */
  background: linear-gradient(
    to bottom,
    #03050b 0%,
    rgba(3, 5, 11, 0.92) 70%,
    rgba(3, 5, 11, 0) 100%
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    opacity  var(--dur-chamber) var(--ease-unfurl),
    filter   800ms              var(--ease-unfurl);
}
body.surface-2 .threshold-header-left {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 20px;
}
body.surface-2 .threshold-header .meridian {
  grid-column: 2;
  justify-self: center;
  /* Override the global fixed-bar .meridian geometry for the header host */
  position: static;
  background: none;
  border: none;
  backdrop-filter: none;
  padding: 0;
  height: auto;
  z-index: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;   /* display only */
}
body.surface-2 .threshold-header-eye {
  grid-column: 3;
  justify-self: end;
}
body.surface-2 .threshold-header-glyph {
  width: 24px;
  height: 24px;
  color: var(--gold-whisper);
  filter: drop-shadow(0 0 8px rgba(242, 228, 184, 0.35));
}
body.surface-2 .threshold-header-word {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.25em;
  color: var(--gold-whisper);
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(242, 228, 184, 0.25);
}
body.surface-2 .threshold-header-eye {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.42em;
  color: var(--parchment-deep);
  text-transform: uppercase;
}

/* ── THRESHOLD UNDERLINE — bottom three-zone footer ── */
body.surface-2 .threshold-underline {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-meridian);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(24px, 3.2vw, 48px);
  pointer-events: none;  /* children re-enable */
  /* Chrome backdrop — mirrors threshold-header above (solid-at-bottom
     gradient + backdrop-blur). Surface 2-wide so all chambers share
     the same chrome treatment. See threshold-header for rationale. */
  background: linear-gradient(
    to top,
    #03050b 0%,
    rgba(3, 5, 11, 0.92) 70%,
    rgba(3, 5, 11, 0) 100%
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    opacity var(--dur-chamber) var(--ease-unfurl),
    filter  800ms              var(--ease-unfurl);
}
body.surface-2 .threshold-underline > * { pointer-events: auto; }

/* Left zone — depth-panel trigger buttons */
body.surface-2 .threshold-underline-glyphs {
  display: flex;
  align-items: center;
  gap: 28px;
}
body.surface-2 .threshold-underline-glyphs button {
  color: var(--parchment-deep);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 300ms;
}
body.surface-2 .threshold-underline-glyphs button:hover {
  color: var(--gold-bright);
}
body.surface-2 .threshold-underline-glyphs button svg {
  width: 11px;
  height: 11px;
  color: var(--gold-mid);
  opacity: 0.75;
  transition: opacity 300ms;
}
body.surface-2 .threshold-underline-glyphs button:hover svg { opacity: 1; }

/* Center zone — decorative tide gradient */
body.surface-2 .threshold-underline-tide {
  flex: 1;
  height: 1px;
  max-width: 240px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 168, 76, 0.18) 50%,
    transparent
  );
  pointer-events: none;
}

/* Meridian live-clock moved out of the underline in C4.d. Typography +
   case/tracking for the header-centered element is defined on the shared
   .meridian-time atom further up this stylesheet (recolored to parchment
   as part of the same move). */

/* Responsive collapse — under 720px, hide tide + glyph labels, and hide
   the full meridian weekday segment (too long for narrow screens). */
@media (max-width: 720px) {
  body.surface-2 .threshold-underline-tide { display: none; }
  body.surface-2 .threshold-underline-glyphs { gap: 18px; }
  body.surface-2 .threshold-underline-glyphs button span { display: none; }
  body.surface-2 .threshold-header-eye { display: none; }
  /* Hide weekday + full date on narrow — keeps only "17:42 · UTC−7".
     The liveMeridian emits the full string; we truncate visually via
     max-width + ellipsis so resize back to wide shows the full reading
     again without a reload. Deferred to a follow-up if it reads wrong. */
  body.surface-2 .threshold-header .meridian { display: none; }
}

/* ── SIDE-CHAMBER PANEL — content inside .side-chamber-overlay ── */
/* The overlay host is already declared above (.side-chamber-overlay + body.side-chamber-open). */
/* Panel vocabulary renamed from reference .chamber-* to .side-chamber-* to avoid */
/* collision with .chamber-shell / .chamber-stage. */
.side-chamber-overlay {
  /* upgrade: add backdrop + fade transition */
  background: rgba(3, 5, 11, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  align-items: center;
  justify-content: center;
  /* Overlay no longer scrolls — the panel itself constrains to viewport
     and scrolls internally on its body-wrap. This keeps the panel header
     (eye + title + divider) pinned at top while body content scrolls,
     so the user always sees what panel they're in regardless of how
     many cards / how short the viewport. */
  overflow: hidden;
  padding: 40px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 800ms var(--ease-unfurl),
              visibility 0s linear 800ms;
}
body.side-chamber-open .side-chamber-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 800ms var(--ease-unfurl),
              visibility 0s linear 0s;
}
/* Panel — flex column with viewport-fit max-height. Header (eye + title +
   divider) is flex-shrink:0 so it stays put; .side-chamber-body-wrap is
   flex:1 + overflow-y:auto so paragraphs / cards / actions scroll
   internally when they exceed the available space. min-height: 0 on the
   body-wrap is the standard flex-overflow incantation that lets the
   child actually shrink and scroll instead of pushing the parent past
   max-height. */
.side-chamber-panel {
  max-width: min(720px, 92vw);
  max-height: calc(100vh - 80px);
  padding: 60px 56px;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: auto;
}
.side-chamber-eye,
.side-chamber-title,
.side-chamber-divider {
  flex-shrink: 0;
}
.side-chamber-body-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Firefox: style the scrollbar subtly when it appears.
     WebKit (Chrome/Safari/Mac): NO explicit -webkit-scrollbar rule — that
     forces the track to always render even when not overflowing, creating a
     permanent right-side artifact. Omitting it lets macOS overlay scrollbars
     take over: they appear only on scroll and don't reserve gutter space. */
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 168, 76, 0.25) transparent;
}
/* Close button is position: fixed in the viewport top-right so it stays
   visible regardless of overlay scrolling. Previously absolute-positioned
   inside the panel — that caused the button to scroll out of view when
   the panel was taller than the viewport (e.g. the artifacts panel with
   three cards on shorter viewports). Fixed-positioning anchors it to the
   viewport corner instead. Z-index sits above the overlay backdrop and
   panel content; visibility cascades from the overlay parent so the
   close button hides/shows in lockstep with the overlay's fade transition. */
.side-chamber-close {
  position: fixed;
  top: 20px;
  right: 28px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--parchment-deep);
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  transition: color 250ms;
  z-index: calc(var(--z-side-chamber) + 1);
}
.side-chamber-close:hover { color: var(--gold-bright); }
.side-chamber-eye {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.42em;
  color: var(--gold-mid);
  text-transform: uppercase;
  margin-bottom: 18px;
  text-align: center;
}
.side-chamber-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 52px);
  color: var(--gold-whisper);
  line-height: 1.1;
  text-align: center;
  margin-bottom: 28px;
  letter-spacing: -0.005em;
}
.side-chamber-title em {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--parchment-pale);
  font-weight: 400;
}
.side-chamber-divider {
  width: 80px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 168, 76, 0.55),
    transparent
  );
  margin: 0 auto 32px;
}
.side-chamber-body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.68;
  color: var(--parchment-mid);
  max-width: 52ch;
  margin: 0 auto;
  text-align: center;
}
.side-chamber-body + .side-chamber-body { margin-top: 20px; }
.side-chamber-body em { color: var(--parchment-light); font-style: italic; }

/* ── SIDE-CHAMBER WIDE PANEL — chart artifact override ── */
/* The chart key uses a 1200px two-column panel so the wheel and table
   are readable at a glance. The standard 720px cap is overridden here.
   Title + divider are suppressed — the eyebrow is sufficient identification
   for a graphical panel and the vertical space goes to the chart instead. */
.side-chamber-panel--wide {
  width: min(1200px, 96vw);
  max-width: min(1200px, 96vw);
  max-height: none;
  padding: 48px 48px 40px;
}

.side-chamber-panel--wide .side-chamber-eye {
  text-align: left;
}

/* Lexicon entry + browse views — the "Lexicon" eyebrow left-aligns to sit
   flush with the entry term / index list (both left-justified), rather than
   centered like the standard about/resources panels. */
.side-chamber-panel--lex-entry .side-chamber-eye,
.side-chamber-panel--lex-browse .side-chamber-eye {
  text-align: left;
}

.side-chamber-panel--wide .side-chamber-title,
.side-chamber-panel--wide .side-chamber-divider {
  display: none;
}

/* ── Iconned display-font header ───────────────────────────────────────────
   Generalizes the Your Crew header (oars + "Your Crew") to Lexicon, Your
   Chart, and Your Course: a bespoke icon + the panel name in the display
   font, with a left-anchored gradient hairline beneath and no eyebrow text.
   The scaffold order is eye → title → divider → body, so hiding the eyebrow
   lets the title → hairline → content flow naturally (no order juggling).
   Placed AFTER the --wide suppression above so the chart panel (--wide +
   --iconhead) re-shows its title + divider. */
/* Neutralize the base panel's vertical auto-margin so a SHORT iconned panel
   (e.g. Your Course) anchors to the overlay's top padding instead of floating
   centered. (The taller Chart/Lexicon panels top-anchor anyway because their
   content overflows; this keeps the short ones consistent.) margin-inline
   stays auto for horizontal centering. */
.side-chamber-panel--iconhead {
  margin-block: 0;
}
.side-chamber-panel--iconhead .side-chamber-eye {
  display: none;
}
.side-chamber-panel--iconhead .side-chamber-title {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: var(--gold-whisper);
  line-height: 1;
  letter-spacing: 0.04em;
  margin: 0 0 26px;
}
.side-chamber-panel--iconhead .side-chamber-title-icon {
  flex-shrink: 0;
  color: var(--gold-bright);
  filter: drop-shadow(0 0 12px rgba(232, 201, 122, 0.30));
}
.side-chamber-panel--iconhead .side-chamber-title-text {
  display: inline-block;
}
.side-chamber-panel--iconhead .side-chamber-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0 0 32px;
  background: linear-gradient(
    90deg,
    rgba(201, 168, 76, 0.55),
    rgba(201, 168, 76, 0.18) 60%,
    transparent
  );
}
/* Body prose left-justifies under the left-aligned iconned header (e.g. Your
   Course), flush with the heading rather than centered. Only the Course panel
   uses .side-chamber-body among the iconhead panels — Chart mounts the chart
   artifact, Lexicon renders its index. */
.side-chamber-panel--iconhead .side-chamber-body {
  text-align: left;
  margin-inline: 0;
}

/* Body-wrap — let content size naturally; no internal scroll. */
.side-chamber-panel--wide .side-chamber-body-wrap {
  overflow-y: visible;
  flex: none;
}

/* Overlay — switch to scroll when the wide panel is open so the full
   table is reachable on shorter viewports without clipping.
   justify-content must shift to flex-start: centering on an overflowing
   flex container pushes the top of the content above the scroll origin,
   making it unreachable. Padding restores the breathing room at top/bottom. */
/* Top-anchor the chart (--wide) AND all iconned-header panels (Lexicon, Your
   Chart, Your Course) at the same 48px from the top. Without this, a short
   panel like Your Course is vertically centered by the overlay and floats
   much lower than the taller Chart/Lexicon panels. */
.side-chamber-overlay:has(.side-chamber-panel--wide),
.side-chamber-overlay:has(.side-chamber-panel--iconhead) {
  overflow-y: auto;
  justify-content: flex-start;
  padding: 48px 0;
}

/* ── SIDE-CHAMBER CREW PANEL — Ship card host ──────────────────────
   1080px panel — wider than the default 720px text panel (so the
   crew card's 30/70 split has room) but narrower than the chart's
   1200px --wide.

   Chrome composition (2026-06-01 polish pass with Daljeet):
     - Title + standalone divider HIDDEN (same as the chart panel)
     - Eyebrow "Your Crew" left-justified with an inline gold
       hairline extending to the right edge as its ::after pseudo
     - Matches the Your Chart aesthetic (clean left-aligned header,
       no separate centered title block) while keeping the divider
       visible per Daljeet's preference

   Added 2026-06-01 with the Phase 1 Install enrichment session. */
.side-chamber-panel--crew {
  width: min(1080px, 95vw);
  max-width: min(1080px, 95vw);
  max-height: none;
  padding: 60px 48px 40px;
}

/* Title — oars icon + "Your Crew" left-justified in display register.
   Re-enabled for the crew panel (the wide chart panel hides it; the
   crew panel re-purposes it as the page header above the section
   eyebrow). Flex layout for icon + text, NEGATIVE order so the title
   lands ABOVE the body-wrap (which sits at default order: 0).
   Updated 2026-06-01 V2 polish: order changed from order: 1 to
   order: -2 because order: 1 placed the title AFTER body-wrap (the
   default-order ship card was outpainting it). Negative orders pull
   the header chrome before the order-0 panel elements. */
.side-chamber-panel--crew .side-chamber-title {
  display: flex;
  align-items: center;
  gap: 16px;
  order: -2;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: var(--gold-whisper);
  line-height: 1;
  letter-spacing: 0.04em;
  margin: 0 0 36px;
}

.side-chamber-panel--crew .side-chamber-title-icon {
  flex-shrink: 0;
  color: var(--gold-bright);
  filter: drop-shadow(0 0 12px rgba(232, 201, 122, 0.30));
}

.side-chamber-panel--crew .side-chamber-title-text {
  display: inline-block;
}

/* Eyebrow — "SHIP & FUEL" section label, left-justified with inline
   extending gradient hairline. Visually below the title via order: 2.
   The ::after pseudo provides the gold hairline that extends from the
   eyebrow's right edge to the panel's right side, replacing the
   standalone centered .side-chamber-divider. */
.side-chamber-panel--crew .side-chamber-eye {
  order: -1;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.side-chamber-panel--crew .side-chamber-eye::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(201, 168, 76, 0.55),
    rgba(201, 168, 76, 0.18) 60%,
    transparent
  );
}

/* Standalone divider retires — eyebrow's ::after carries the hairline */
.side-chamber-panel--crew .side-chamber-divider {
  display: none;
}

.side-chamber-panel--crew .side-chamber-body-wrap {
  overflow-y: visible;
  flex: none;
}

/* Same scroll-on-overflow behavior as --wide so the full card is
   reachable on shorter viewports. */
.side-chamber-overlay:has(.side-chamber-panel--crew) {
  overflow-y: auto;
  justify-content: flex-start;
  padding: 48px 0;
}

/* ── SIDE-CHAMBER CHART ARTIFACT — two-column layout ── */
/* Left: planetary table (450px fixed). Right: chart wheel (fluid).
   Below ~900px the columns stack, chart on top.

   Table column was widened from 360px → 450px (May 14 2026) and column
   percentages redistributed (see scoped overrides below) so the SIGN
   register. Single-column layout (2026-06-05): the wheel prints at the
   Threshold-4 size (max 800px square), centered; the ornament separator
   shows; the table sits beneath as a centered, capped reference plate at
   the relaxed T4 register (the prior two-column layout squeezed the wheel
   into a 1fr cell beside a 450px table, which read too small). */
.sc-chart-artifact {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Bearings — date · time · place line above the wheel. The base .chart-bearings
   register (centered Inter caps, parchment-deep) carries; this just sets the
   gap to the wheel since the panel hairline already spaces it from above.
   Held hidden until the chart data resolves, then blooms in with the SAME
   animation the wheel uses (chartWheelBloom) so the two arrive together. */
.sc-chart-artifact .chart-bearings {
  margin: 0 0 24px;
  opacity: 0;
}
.sc-chart-artifact .chart-bearings.chart-bearings--bloomed {
  animation: chartWheelBloom 1.2s var(--ease-unfurl) forwards;
}

/* Wheel — centered, at the Threshold-4 size (base .chart-wheel caps at
   800px square; restated here to override the prior two-column width:100%). */
.sc-chart-artifact .chart-wheel {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Ornament — the ✦ separator between wheel and table (shown in single
   column; the two-column layout used the column gap instead). */
.sc-chart-artifact .chart-ornament {
  display: flex;
  width: 100%;
  max-width: 800px;
  margin: 30px auto;
}

/* Table — centered reference plate beneath the wheel, capped a touch
   narrower than the wheel so it reads as a tidy plate rather than a
   stretched band. The compact side-chamber register is retired: with the
   full single-column width the table relaxes back to the base T4 register
   (15px, generous padding, 42/26/18/14 columns) inherited from surface2.css. */
.sc-chart-artifact .chart-table-wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* ── SIDE-CHAMBER CARDS — linked navigation entries (artifacts panel) ── */
.side-chamber-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 52ch;
  margin: 32px auto 0;
}
.side-chamber-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  border: 1px solid rgba(201, 168, 76, 0.14);
  border-radius: 2px;
  background: rgba(6, 10, 18, 0.55);
  color: inherit;
  text-align: left;
  transition:
    border-color 280ms var(--ease),
    background   280ms var(--ease),
    transform    280ms var(--ease);
}
.side-chamber-card:hover {
  border-color: rgba(232, 201, 122, 0.45);
  background: rgba(201, 168, 76, 0.05);
  transform: translateY(-1px);
}
.side-chamber-card-eye {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.38em;
  color: var(--gold-mid);
  text-transform: uppercase;
}
.side-chamber-card-title {
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--parchment-light);
  text-transform: uppercase;
}
.side-chamber-card-note {
  font-family: var(--font-body);
  font-size: 15px;
  font-style: italic;
  line-height: 1.55;
  color: var(--parchment-mid);
  margin-top: 2px;
}

/* ── SIDE-CHAMBER ACTIONS — button row (account panel) ── */
.side-chamber-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 36px auto 0;
  max-width: 52ch;
  flex-wrap: wrap;
}
.side-chamber-action {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 2px;
  cursor: pointer;
  transition:
    color        240ms var(--ease),
    background   240ms var(--ease),
    border-color 240ms var(--ease);
}
.side-chamber-action-ghost {
  background: none;
  border: 1px solid rgba(201, 168, 76, 0.28);
  color: var(--parchment-deep);
}
.side-chamber-action-ghost:hover {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}
.side-chamber-action-primary {
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.55);
  color: var(--gold-bright);
}
.side-chamber-action-primary:hover {
  background: rgba(201, 168, 76, 0.16);
  border-color: var(--gold-whisper);
  color: var(--gold-whisper);
}

/* E.5 Item 4 (May 7 2026) — sublabel state hint (e.g. "(coming soon)"). When
   an action has a `sublabel` field, the button renders label + sublabel in
   stacked spans. Sublabel sits below the main label in muted parchment with
   no letter-spacing so the parenthetical reads as a small footnote, not as
   another piece of UI text in the same register. */
.side-chamber-action:has(.side-chamber-action-sublabel) {
  flex-direction: column;
  gap: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.side-chamber-action-label {
  display: block;
}
.side-chamber-action-sublabel {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: none;
  font-style: italic;
  font-family: var(--font-body);
  opacity: 0.7;
  margin-top: 1px;
}

/* ── SIDE-CHAMBER LEXICON ENTRY — classical dictionary register ──
   Ported from Design Language.html §01 (soul-pilot-s3-static).
   The .side-chamber-panel--lex-entry modifier suppresses the standard
   panel title + divider so .lex-head owns the display register.
   EB Garamond replaced with Lora (--font-body) throughout — EB Garamond
   retired from Surface 3. Greek and transliteration sizes raised per
   Daljeet's direction (head .greek: 26px; origin .greek-inline: 16.5px).
   "In your chart" aside deferred to Phase F.
   ──────────────────────────────────────────────────────────────────────── */

/* Panel modifier — suppress standard title + divider */
.side-chamber-panel--lex-entry .side-chamber-title,
.side-chamber-panel--lex-entry .side-chamber-divider {
  display: none;
}

/* Overlay-scroll model for lex-entry panels — the whole panel drifts
   upward when content is tall, rather than the body-wrap scrolling
   internally. Eliminates the right-side scrollbar artifact. Same pattern
   as the --wide chart panel. The close button is position:fixed so it
   stays reachable regardless of scroll position. */
.side-chamber-overlay:has(.side-chamber-panel--lex-entry) {
  overflow-y: auto;
  justify-content: flex-start;
  padding: 48px 0;
}

.side-chamber-panel--lex-entry {
  max-height: none;
}

.side-chamber-panel--lex-entry .side-chamber-body-wrap {
  overflow-y: visible;
  flex: none;
}

/* ── Lexicon browse index — flat alphabetical term list ───────────────────── */
/* The main lexicon page (reached via the underline link). A quiet
   dictionary-style index: a framing line over a left-aligned column of
   clickable terms, hairline-ruled, each opening its entry. */
.lex-index-intro {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--parchment-mid);
  text-align: left;
  max-width: 52ch;
  margin: 0 0 26px;
}
.lex-index {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Each index row mirrors the inline body-prose .lex link (surface3.css):
   Cinzel small-caps with the ◇ diamond affordance marker, parchment at rest
   lifting to gold on hover. Block button for a full-width tap target. */
.lex-index-term {
  appearance: none;
  background: none;
  border: none;
  display: block;
  width: 100%;
  padding: 9px 0;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.08em;
  font-variant: small-caps;
  color: var(--parchment-light);
  cursor: pointer;
  transition: color 200ms var(--ease);
}
.lex-index-term::before {
  content: "◇";
  font-size: 0.7em;
  color: var(--gold-mid);
  margin-right: 0.5em;
  vertical-align: 0.08em;
  opacity: 0.8;
}
.lex-index-term:hover,
.lex-index-term:focus-visible {
  color: var(--gold-whisper);
}
.lex-index-term:hover::before,
.lex-index-term:focus-visible::before {
  opacity: 1;
  color: var(--gold-bright);
}
.lex-index-term:focus-visible {
  outline: 1px solid rgba(232, 201, 122, 0.4);
  outline-offset: 3px;
}

/* Entry container — right margin keeps content clear of the scrollbar gutter */
.lex-entry {
  max-width: 680px;
  font-family: var(--font-body);
  color: var(--parchment-light);
  padding-right: 8px;
}

/* ── Head — term + source line stacked, left-justified ── */
.lex-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--lib-rule);
  margin-bottom: 22px;
}

.lex-head .term {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
  color: var(--gold-whisper);
  letter-spacing: 0.005em;
  text-shadow: 0 0 22px rgba(232, 201, 122, 0.2);
  margin: 0;
}

/* Source line — "Greek · hairēsis · choosing" beneath the term */
.lex-source-line {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--parchment-deep);
}

/* ── Meta row — pos / register badge / also-called ── */
.lex-meta {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--parchment-mid);
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
}

.lex-meta .pos {
  font-style: italic;
  color: var(--gold-mid);
}

.lex-meta .register {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--parchment-deep);
  border: 1px solid var(--lib-edge);
  padding: 4px 10px;
}

/* .lex-meta .also — removed; also-called moved out of meta row */

/* ── Senses — numbered list ── */
.lex-senses {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lex-sense {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--parchment-light);
  margin: 0 0 14px;
  padding-left: 28px;
  position: relative;
}

.lex-sense .num {
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--gold-mid);
}

.lex-sense em,
.lex-subsense em,
.lex-origin em {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--parchment-light);
}

.lex-sense em {
  color: var(--parchment-pale);
}

/* Sub-sense — indented bullet beneath a numbered sense */
.lex-subsense {
  font-size: 16px;
  line-height: 1.5;
  color: var(--parchment-mid);
  margin: 6px 0 8px;
  padding-left: 28px;
  position: relative;
}

.lex-subsense::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
  color: var(--gold-mid);
  font-size: 18px;
  line-height: 1;
}

/* ── Origin / etymology block ── */
.lex-origin {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--lib-rule-soft);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--parchment-mid);
}

.lex-origin .lbl {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-mid);
  margin-right: 10px;
}

/* Greek terms inline within origin prose — raised size per Daljeet */
.lex-origin .greek-inline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16.5px;        /* raised from reference's implied body size */
  color: var(--gold-whisper);
}

/* ── Back navigation — floating chevron in the overlay negative space ──
   Injected as a direct child of .side-chamber-overlay, positioned in the
   dark backdrop to the left of the panel. Never inside the entry body.
   Hidden below 880px where there is no left negative space. */
.lex-back-float {
  position: fixed;
  left: max(20px, calc(50% - 440px));
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(13, 18, 32, 0.72);
  border: 1px solid rgba(201, 168, 76, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 30px;
  line-height: 1;
  color: rgba(201, 168, 76, 0.50);   /* gold-mid at 50% — dim resting state */
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  z-index: calc(var(--z-side-chamber) + 1);
  /* Nudge glyph optically — ‹ sits slightly low in most fonts */
  padding-right: 3px;
  padding-bottom: 2px;
}

.lex-back-float:hover {
  background: rgba(13, 18, 32, 0.92);
  color: var(--gold-bright);
  border-color: rgba(201, 168, 76, 0.5);
}

@media (max-width: 880px) {
  .lex-back-float { display: none; }
}

/* ── Cross-references ── */
.lex-xref {
  margin-top: 22px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--parchment-deep);
}

.lex-xref .arrow {
  color: var(--gold-mid);
  margin-right: 12px;
  letter-spacing: 0;
}

.lex-xref a {
  color: var(--horizon-text);
  text-decoration: none;
  border-bottom: 1px dotted rgba(138, 184, 212, 0.4);
  margin-right: 18px;
  padding-bottom: 1px;
  transition: color 150ms, border-bottom-color 150ms;
}

.lex-xref a:hover {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-mid);
}

/* ── SURFACE-2 CHROME MODULATION — body-class state machine ── */
body.register-b.surface-2 .threshold-header,
body.register-b.surface-2 .threshold-underline {
  opacity: 0.5;
}
body.oracle-invoked.surface-2 .threshold-header,
body.oracle-invoked.surface-2 .threshold-underline {
  opacity: 0.12;
  pointer-events: none;
}
body.side-chamber-open.surface-2 .threshold-header,
body.side-chamber-open.surface-2 .threshold-underline {
  filter: blur(4px);
}


/* =============================================================================
   SHELL 3 — SURFACE 3 VARIANT (Unlocked interior chrome)
   Post-payment chamber chrome. All rules scoped under body.surface-3 so they
   paint only when the router has set surface-3. Vocabulary (post C4.i, May 8 2026):
     .s3-brand-strip        — Top bar (meridian-height): brand left, live clock
                              CENTER, top actions right. Three-zone grid.
     .s3-brand              — wordmark cluster (glyph + "Soul Pilot")
     .meridian              — live clock host inside .s3-brand-strip center zone
                              (relocated from prior bottom-right corner widget)
     .s3-top-actions        — flex cluster for the two persistent affordances
     .s3-action             — shared base for action glyph buttons
     .s3-artifacts          — "Your Artifacts" panel trigger (opens side chamber)
     .s3-account            — "Account" panel trigger (opens side chamber)
     .s3-underline          — Bottom-fixed reach-to strip: Lexicon · Your Chart · Your Course
     .s3-underline-glyphs   — three in-journey reach-to triggers (May 11 footer rebuild)
     .back-nav              — left-margin chevron affordance (SVG composition)
     .rail (+ slot family)  — right-edge nine-slot crew manifest
   Per navigation-layer-separation: brand strip, underline, rail, back-nav, and
   side-chamber close are DISTINCT affordances and stay separate.
   The phase-path eyebrow that previously sat below the brand strip was
   removed in C4.i — chamber-level orientation now lives in each chamber's
   own eyebrow/title and the path label was redundant chrome.
   ============================================================================= */

/* ── S3 BRAND STRIP — top bar, three-zone grid ──
   Grid 1fr / auto / 1fr so the meridian stays mathematically centered
   regardless of left/right zone widths. Mirrors Surface 2's .threshold-header
   pattern. Live clock relocated here from the prior bottom-right corner
   widget per C4.i (May 8 2026, Daljeet sign-off — Option A). */
body.surface-3 .s3-brand-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--meridian-height);
  z-index: var(--z-meridian);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(24px, 3.2vw, 48px);
  gap: 24px;
  background: rgba(8, 12, 22, 0.82);
  border-bottom: 1px solid var(--ocean-rim);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    opacity 800ms var(--ease),
    filter  800ms var(--ease);
}

/* Wordmark cluster — display only, no click target. Grid column 1, start-justified. */
/* Brand cluster is a <button> as of May 11 2026 — click opens the About
   side-chamber overlay (sole entry point per doc 35; About removed from the
   footer trio). Resets default button chrome and re-enables pointer events
   that the rest of .s3-brand-strip suppresses for display-only zones. */
/* Column 1 holder — single grid cell, flex row. Brand pins to the start;
   the journey-name centers in the leftover space (margin-inline: auto).
   Keeps both in ONE cell so grid never spawns a second row, and the
   column-2 clock stays mathematically centered. */
body.surface-3 .s3-left-zone {
  grid-column: 1;
  justify-self: stretch;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;            /* allow the zone to shrink so the name can ellipsis */
}
body.surface-3 .s3-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 240ms var(--ease);
}
body.surface-3 .s3-brand-trigger:hover .s3-brand-glyph,
body.surface-3 .s3-brand-trigger:focus-visible .s3-brand-glyph {
  filter: drop-shadow(0 0 8px rgba(232, 201, 122, 0.55));
}
body.surface-3 .s3-brand-trigger:hover .s3-brand-word,
body.surface-3 .s3-brand-trigger:focus-visible .s3-brand-word {
  color: var(--gold-bright);
}
body.surface-3 .s3-brand-trigger:focus-visible {
  outline: 1px solid rgba(232, 201, 122, 0.4);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Center meridian — live clock host. Grid column 2, center-justified.
   Overrides the global fixed-bar .meridian geometry that exists for any
   stray full-bar meridian use. liveMeridian.js paints .meridian-dot +
   .meridian-time children inside; the typography lives on those atoms. */
body.surface-3 .s3-brand-strip .meridian {
  grid-column: 2;
  justify-self: center;
  position: static;
  background: none;
  border: none;
  backdrop-filter: none;
  padding: 0;
  height: auto;
  z-index: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;   /* display only */
}
/* Brand glyph + wordmark — Surface 3 register is intentionally quieter
   than Surface 1/2 (chamber-focused). T5 Orientation is the canonical
   reference for this register; all Surface 3 chambers conform to T5's
   rendering. Per Daljeet's 2026-05-16 lock: "reference the live version
   of Threshold 5 and match Phase 1 to that." */
body.surface-3 .s3-brand-glyph {
  width: 20px;
  height: 20px;
  color: var(--gold-bright);
  filter: drop-shadow(0 0 6px rgba(232, 201, 122, 0.32));
}
body.surface-3 .s3-brand-word {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.38em;
  color: var(--gold-mid);
  text-transform: uppercase;
}

/* Personalization beat — "{FirstName}'s Journey". Sits inside .s3-left-zone
   beside the brand; margin-inline: auto centers it in the leftover space
   between the wordmark and the center clock. Display-only (pointer-events:
   none) so it never steals clicks from the brand button. Typography + color
   mirror the .meridian-time clock atom (Inter caps, parchment-mid) so it
   reads as a quiet sibling of the chrome rather than a second brand.
   max-width + ellipsis keep a long name from ever reaching the clock. */
body.surface-3 .s3-journey-name {
  margin-inline: auto;
  min-width: 0;
  max-width: min(36ch, 100%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--parchment-mid);
  pointer-events: none;
}
/* Below the breakpoint where the left zone narrows toward the wide center
   clock, retire the personalization beat rather than crowd the meridian. */
@media (max-width: 900px) {
  body.surface-3 .s3-journey-name { display: none; }
}

/* Top-right cluster of persistent affordances. Grid column 3, end-justified. */
body.surface-3 .s3-top-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}
body.surface-3 .s3-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--parchment-deep);
  background: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: color 240ms var(--ease), background 240ms var(--ease);
}
body.surface-3 .s3-action svg {
  width: 13px;
  height: 13px;
  color: var(--gold-mid);
  opacity: 0.78;
  transition: opacity 240ms, color 240ms;
}
body.surface-3 .s3-action:hover {
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.05);
}
body.surface-3 .s3-action:hover svg {
  color: var(--gold-bright);
  opacity: 1;
}

/* Under 640px, collapse micro-labels to glyph-only */
@media (max-width: 640px) {
  body.surface-3 .s3-action .s3-action-label { display: none; }
  body.surface-3 .s3-top-actions { gap: 10px; }
}

/* ── CHAMBER STAGE offset — sits below the single-row top brand strip ──
   Phase-path eyebrow was removed in C4.i; chamber stage now clears just the
   meridian-height. Footer clearance is handled per-chamber via
   body.chamber-flow padding-bottom (S3 chamber-flow rule below). */
body.surface-3 .chamber-stage {
  top: var(--meridian-height);
}

/* ── S3 UNDERLINE — bottom-fixed reach-to strip ──
   Three in-journey reach-to triggers (Lexicon · Your Chart · Your Course)
   clustered left-justified — matches Surface 2's .threshold-underline-glyphs
   placement. Rebuilt May 11 2026 from the prior Lexicon · Resources · About
   trio (doc 35 §V.C lock). No decorative tide, no clock — quieter than
   Surface 2's underline. Hairline border at top serves as the subtle
   divider; the chrome backdrop fades upward into the chamber stage. */
body.surface-3 .s3-underline {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-meridian);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--meridian-height);
  padding: 0 clamp(24px, 3.2vw, 48px);
  pointer-events: none;  /* children re-enable */
  background: linear-gradient(
    to top,
    #03050b 0%,
    rgba(3, 5, 11, 0.92) 70%,
    rgba(3, 5, 11, 0) 100%
  );
  border-top: 1px solid rgba(36, 48, 72, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    opacity 800ms var(--ease),
    filter  800ms var(--ease);
}
body.surface-3 .s3-underline > * { pointer-events: auto; }

/* Left-justified cluster of depth-panel triggers — matches the
   Surface 2 .threshold-underline-glyphs spacing exactly. */
body.surface-3 .s3-underline-glyphs {
  display: flex;
  align-items: center;
  gap: 28px;
}
body.surface-3 .s3-underline-glyphs button {
  color: var(--parchment-deep);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 300ms;
}
body.surface-3 .s3-underline-glyphs button:hover {
  color: var(--gold-bright);
}
body.surface-3 .s3-underline-glyphs button svg {
  width: 11px;
  height: 11px;
  color: var(--gold-mid);
  opacity: 0.75;
  transition: opacity 300ms;
}
body.surface-3 .s3-underline-glyphs button:hover svg { opacity: 1; }

@media (max-width: 720px) {
  body.surface-3 .s3-underline-glyphs { gap: 20px; }
  body.surface-3 .s3-underline-glyphs button span { display: none; }
}

/* ── BACK NAV — override the legacy single-char baseline with SVG composition ── */
body.surface-3 .back-nav {
  top: 50%;
  left: clamp(24px, 3vw, 48px);
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0.45;
  transition: opacity 320ms var(--ease), background 320ms var(--ease), color 320ms var(--ease);
}
body.surface-3 .back-nav svg {
  width: 14px;
  height: 14px;
}
body.surface-3 .back-nav:hover {
  opacity: 1;
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.06);
}
/* Hidden entirely at the journey's first chamber (no previous chamber to
   return to). Toggled by _updateBackNavVisibility() in shellChamber.js.
   Placed after the .back-nav display:flex rule so it wins on source
   order at equal specificity. */
body.surface-3 .back-nav--hidden {
  display: none;
}

/* ── RAIL — nine-slot crew manifest composition ── */
/* Base .rail geometry + hover expand + body.* modulation declared in the
   SHELL 3 block above. These rules fill in the internal slot vocabulary
   and the flex-column structure that keeps header pinned at top, slots
   scrollable in the middle, foot pinned at bottom — necessary because
   short viewports otherwise clip slots beyond what fits (a real issue
   at ~700px viewport heights with 9 slots).
*/
/* Surface-3 rail — DOM is wider than visible body by --rail-overhang
   so medallions can render in the leftmost transparent zone. The
   visible body (gradient bg + gold hairline) is right-aligned within
   the rail box.

   Background is composed of TWO layers, both right-anchored and sized
   to the visible body's width, with an underlying transparent
   background-color so the overhang zone reads through to the chamber
   atmosphere behind:
     1. Top: gradient (transparent → 60% opaque dark) — the surface-2-
        style fade that softens the body's left edge into the gold line.
     2. Bottom: solid 94%-opaque dark — restores the previous version's
        density on the body so the rail reads as a substantial column.
   Both layers are confined to the rightmost var(--rail-collapsed) of
   the rail; the overhang stays fully transparent for the medallion
   straddle effect. */
body.surface-3 .rail {
  /* Clear the s3-underline footer (Lexicon · Your Chart · Your Course) at the
     bottom of the viewport. The base .rail rule sets `bottom: 0` which
     pre-dates the s3-underline chrome introduced earlier in C4.i; without
     this override, the rail's bottom-most 56px sits behind the underline
     footer (which has higher z-index) and the rail-foot content (the
     "0/9 slots gathered" count) gets visually hidden. */
  bottom: var(--meridian-height);
  width: calc(var(--rail-collapsed) + var(--rail-overhang));
  background:
    linear-gradient(90deg, rgba(4, 6, 12, 0) 0%, rgba(4, 6, 12, 0.6) 100%)
      right top / var(--rail-collapsed) 100% no-repeat,
    linear-gradient(rgba(13, 18, 32, 0.94), rgba(13, 18, 32, 0.94))
      right top / var(--rail-collapsed) 100% no-repeat,
    transparent;
  border-left: none;
  display: flex;
  flex-direction: column;
}
/* Visible body's gold hairline — replaces the global .rail border-left.
   Positioned at left: var(--rail-overhang) so it sits at the visible
   body's left edge (= the medallion's center). */
body.surface-3 .rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rail-overhang);
  width: 1px;
  background: rgba(201, 168, 76, 0.08);
  pointer-events: none;
  z-index: 0;
}
/* Hover/focus expand — rail width grows to --rail-expanded + overhang;
   both bg layers' sizes expand to cover the new visible body width. */
body.surface-3 .rail:hover,
body.surface-3 .rail:focus-within {
  width: calc(var(--rail-expanded) + var(--rail-overhang));
  background-size: var(--rail-expanded) 100%, var(--rail-expanded) 100%;
}
/* Register-b rail rules retired 2026-05-19 — see the explanatory block
   in the rail state-class modulation section above (~line 515). The rail
   now reads uniformly across all Phase 1 chambers; the surface-3 rules
   immediately above apply unconditionally regardless of register class. */
body.surface-3 .rail-header {
  flex-shrink: 0;
  padding: 80px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}
/* Rail-header divider — confined to the visible body's right portion
   (left: var(--rail-overhang) starts at the gold line; right: 0 ends
   at the rail's right edge). Replaces the previous border-bottom which
   would have spanned the full rail DOM including the overhang zone. */
body.surface-3 .rail-header::after {
  content: "";
  position: absolute;
  left: var(--rail-overhang);
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(201, 168, 76, 0.08);
  pointer-events: none;
}
body.surface-3 .rail-eye {
  font-family: var(--font-heading);
  font-size: 8.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--parchment-light);
  opacity: 0;
  white-space: nowrap;
  transition: opacity 400ms;
}
body.surface-3 .rail:hover .rail-eye,
body.surface-3 .rail:focus-within .rail-eye {
  opacity: 1;
  transition-delay: 150ms;
}
body.surface-3 .rail-header-title {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--gold-mid);
  text-transform: uppercase;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 400ms;
}
body.surface-3 .rail:hover .rail-header-title,
body.surface-3 .rail:focus-within .rail-header-title {
  opacity: 1;
  transition-delay: 200ms;
}
/* Rail-header glyph (the oars — Crew artifact mark). Visible at all rail
   states from May 11 2026 — formerly faded out on hover/focus while the
   text labels faded in. The pattern was changed so the glyph + labels
   coexist in the expanded state, mirroring the footer's [icon][label]
   pairing for Lexicon / Your Chart / Your Course. The hover-fade rule
   that previously sat here has been removed; the glyph's `transition`
   stays in case future state work re-introduces fade behavior. */
body.surface-3 .rail-header .glyph-collapsed {
  color: var(--gold-mid);
  transition: opacity 400ms;
}

body.surface-3 .rail-slots {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Explicit overflow-x: hidden suppresses any horizontal scrollbar that
     would otherwise appear because `overflow-y: auto` implicitly computes
     overflow-x to `auto` (per CSS spec when `visible` is paired with a
     non-visible value). Sub-pixel rounding or tight collapsed-state grid
     math can teeter at the edge and trigger the scrollbar — which would
     render as a horizontal bar at the rail-slots/rail-foot boundary.
     Hiding overflow-x is the right call here: nothing in the slot DOM
     legitimately needs to escape rail-slots horizontally (the medallion
     overhang is achieved by widening the rail itself, not by overflow). */
  overflow-x: hidden;
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Subtle gold-tinted scrollbar so the internal scroll reads as part of
     the rail chrome rather than the OS default grey. Matches the pattern
     used inside .side-chamber-body-wrap. */
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 168, 76, 0.22) transparent;
}
body.surface-3 .rail-slots::-webkit-scrollbar { width: 4px; }
body.surface-3 .rail-slots::-webkit-scrollbar-track { background: transparent; }
body.surface-3 .rail-slots::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.18);
  border-radius: 2px;
}
/* Slot — two-column grid with a column-gap for breathing between the
   medallion and the text-badge. The medallion column is exactly the
   medallion's diameter (36px), centered inside which the medallion
   sits at 18px from slot-left = 18px from rail-left. With the rail's
   visible body's left edge also at 18px from rail-left (= --rail-overhang),
   the medallion's center lands exactly on the visible body's left edge.
   The medallion's left half (0 to 18) is in the rail's transparent
   overhang zone (chamber/atmosphere visible behind); right half (18 to
   36) is inside the visible body. The 12px column-gap leaves space
   between the medallion's right edge (at 36 from rail-left) and the
   text-badge's left edge (at 48 from rail-left) so the badge doesn't
   feel cramped against the medallion. The slot itself stays unframed;
   only the text portion (.slot-text) carries the bordered badge framing. */
body.surface-3 .slot {
  /* Button defaults reset — .slot is a <button type="button"> as of
     2026-06-01 so the rail's filled slots are keyboard-focusable live
     links. Reset the UA button styles so the visual treatment stays
     fully owned by the rules below + the .filled / .installing /
     .future state modifiers. */
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  /* Disabled slots stay non-pointer; .filled overrides with cursor:
     pointer below. */
  cursor: default;
  width: 100%;
  outline: none;

  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 6px 0;
  position: relative;
}

/* Keyboard-focus ring for filled (clickable) slots — surfaces the
   focus state for keyboard users. Solar/lunar registers via the
   existing sect modifiers; for the focus ring we use a neutral
   gold-mid to read at all sect registers. */
body.surface-3 .slot.filled:focus-visible {
  outline: 1px solid var(--gold-mid);
  outline-offset: 2px;
  border-radius: 2px;
}
body.surface-3 .slot-medallion {
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Medallion — translucent dark with a gold-hairline border, matching
   the reference (claude-design-surface3-1.html §.slot .medallion,
   line 110). The 50%-translucent bg + the rail's gradient backdrop
   (transparent on the left fade, opaque on the right) together create
   the visual effect of the medallion floating at the rail's ghosty
   left edge — chamber stage shows faintly through both the rail's
   transparent gradient zone AND the medallion's translucent fill at
   the medallion's left half, giving the perception that it extends
   past the rail. No physical offset, no transform — purely a
   transparency-driven illusion. Filled state adds a gold tint and halo. */
body.surface-3 .slot .medallion {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 168, 76, 0.18);
  background: rgba(6, 10, 18, 0.5);
  transition: all 400ms;
}
body.surface-3 .slot .medallion .roman {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--parchment-deep);
  opacity: 0.7;
}
body.surface-3 .slot .medallion .planet-glyph {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--gold-mid);
  line-height: 1;
}
/* Slot-text is the badge — bordered card framing the three text lines.
   Visible only when the rail expands on hover/focus (opacity transition).
   Sits in the slot's right grid column; medallion in the left column
   stays unframed and visually distinct. The badge's left edge sits
   ~14px from the medallion's right edge (natural gap from medallion
   centering inside the 64px column at 36px diameter). margin-right: 12px
   keeps the badge's right edge breathing from the rail's right border. */
body.surface-3 .slot-text {
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(201, 168, 76, 0.10);
  border-radius: 3px;
  background: rgba(8, 12, 22, 0.55);
  transition:
    opacity 400ms,
    border-color 300ms,
    background 300ms;
}
body.surface-3 .rail:hover .slot-text,
body.surface-3 .rail:focus-within .slot-text {
  opacity: 1;
  transition-delay: 180ms;
}
/* Three-line slot text register (locked C4.i, May 8 2026; .role register
   reassigned 2026-05-20 — see below):
     .role   — parchment color — eyebrow / role name (was horizon)
     .planet — gold color      — planet name (or "Solar"/"Lunar" for Ship)
     .coord  — parchment color — sign · house
   All three default to a DARK state until the slot fills. .slot.filled
   below brightens each line to its lit register.

   The .role line moved from the horizon family to the parchment family
   on 2026-05-20 (color-coding audit close). Horizon-blue is now reserved
   exclusively for nocturnal-sect signal — the medallion glow + planet
   glyph on .c-sect-lunar carry it. Slot role text is a chrome eyebrow,
   which the audit's two-palette doctrine routes to parchment (the label
   register), letting gold remain the accent/state register without
   competing with sect for the same hue. */
body.surface-3 .slot .role {
  font-family: var(--font-ui);
  font-size: 8.5px;
  letter-spacing: 0.28em;
  color: var(--parchment-deep);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.surface-3 .slot .planet {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.surface-3 .slot .coord {
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
  color: var(--parchment-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Slot states. The base .role / .planet / .coord rules above carry the
   dark default register (parchment-deep / gold-deep / parchment-deep); the
   .slot.filled rules below brighten each line and warm the text-badge
   border + medallion to gold. .slot.future just softens the medallion
   border and hides the planet-glyph (so the Roman shows). */
body.surface-3 .slot.future .medallion {
  border-color: rgba(201, 168, 76, 0.12);
}
body.surface-3 .slot.future .planet-glyph { display: none; }
/* Future-state text dimming — undeclared slots read as silhouettes so
   the lit/installing slots stand out. Per Daljeet's 2026-05-16 doctrine:
   the user should feel the rail accumulating presence as they progress. */
body.surface-3 .slot.future .role   { color: var(--parchment-deep); opacity: 0.55; }
body.surface-3 .slot.future .planet { color: var(--parchment-deep); opacity: 0.55; }
body.surface-3 .slot.future .coord  { opacity: 0.45; }

/* Installing — the rim breathes on a 5.2s sine wave (slower than the
   original 2.6s; Daljeet's 2026-05-16 tune for a more meditative cadence)
   while the planet glyph cross-fades in. State applied by chambers via
   updateRailSlot() (shellChamber.js) at the moment the slot's defining
   attribute is revealed. Persists until all attributes for the slot are
   known (Phase 1: through Steps 1–3; lifts to .filled at Step 4 close).
   Roman has already vanished; planet-glyph takes its place.

   The pulse reads from CSS custom properties (--pulse-rim-dim/-bright,
   --pulse-halo) so sect modifiers (.c-sect-solar / .c-sect-lunar
   applied to the slot) can swap the register without redefining the
   keyframe. Solar = gold (default); Lunar = horizon-blue.
   Ported 2026-05-16 from reference/html/claude-design/claude-design-surface3-1.html. */
body.surface-3 .slot {
  --pulse-rim-dim:    rgba(201, 168, 76, 0.35);
  --pulse-rim-bright: rgba(232, 201, 122, 0.85);
  --pulse-halo:       rgba(232, 201, 122, 0.45);
}
body.surface-3 .slot.installing .medallion {
  animation: installPulse 6.5s ease-in-out infinite;
}
body.surface-3 .slot.installing .medallion .roman { display: none; }
body.surface-3 .slot.installing .planet-glyph {
  opacity: 0;
  animation: glyphFadeIn 3s 1s forwards;
}
/* Installing text register — planet name brightens to gold (since planet
   is now KNOWN), but role + coord stay dimmed since the slot isn't done.
   The .coord line during install carries the "Installing…" placeholder
   (set by updateRailSlot's coord arg) — italicized so the placeholder
   reads as transient gerund / in-progress state, visually distinct from
   the final coord text ("Pisces · 5th house") which sits upright at
   .filled. The italic + lower opacity together signal "this slot is
   still gathering its full identity." */
body.surface-3 .slot.installing .role   { color: var(--parchment-mid); opacity: 0.85; }
body.surface-3 .slot.installing .planet { color: var(--gold-mid); opacity: 1; }
body.surface-3 .slot.installing .coord  { opacity: 0.65; font-style: italic; }

/* Sect-tinted medallion register — applied to the slot via the
   .c-sect-solar / .c-sect-lunar utility class (set by updateRailSlot's
   sect attribute). Swaps the pulse custom properties + the planet-glyph
   color so the medallion reads in the right register. Solar uses the
   gold defaults declared on .slot above; only Lunar needs explicit
   overrides. */
body.surface-3 .slot.c-sect-lunar {
  --pulse-rim-dim:    rgba(168, 208, 232, 0.35);
  --pulse-rim-bright: rgba(168, 208, 232, 0.85);
  --pulse-halo:       rgba(168, 208, 232, 0.45);
}
body.surface-3 .slot.c-sect-lunar .planet-glyph {
  color: var(--horizon-bright);
  text-shadow: 0 0 8px rgba(168, 208, 232, 0.45);
}
body.surface-3 .slot.c-sect-lunar.filled .medallion {
  border-color: rgba(168, 208, 232, 0.55);
  background: rgba(168, 208, 232, 0.06);
  box-shadow: 0 0 12px rgba(168, 208, 232, 0.18);
}

body.surface-3 .slot.filled .medallion {
  border-color: rgba(201, 168, 76, 0.55);
  background: rgba(201, 168, 76, 0.06);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.18);
}
body.surface-3 .slot.filled .medallion .roman { display: none; }
body.surface-3 .slot.filled .slot-text {
  border-color: rgba(201, 168, 76, 0.32);
  background: rgba(8, 12, 22, 0.72);
}
body.surface-3 .slot.filled .role   { color: var(--parchment-mid); }
body.surface-3 .slot.filled .planet { color: var(--gold-mid); }
body.surface-3 .slot.filled .coord  { color: var(--parchment-light); }

/* ── Filled slots are live links ─────────────────────────────────────
   Once a slot is .filled it becomes a live affordance — click opens
   the Your Crew side chamber (event-delegated in shellChamber.js's
   _mountSurface3Chrome). The hover treatment brightens the existing
   sect-coded rim register one step + lifts the slot 1px so the user
   reads the slot as "now a button." Cursor follows.

   Sect-aware: solar slots brighten in the gold register; lunar slots
   brighten in the horizon-blue register (mirrors the .filled rules
   above). No new tokens; transition timings match the rail's existing
   200-220ms unfurl cadence.

   Added 2026-06-01 with the Phase 1 Install enrichment session — the
   Ship slot (data-n="1") is the first rail slot to go live; the same
   hover rules will apply to slots 2-9 as their phases land.

   A11y note: the slot remains a <div> in v1; keyboard focus + ARIA
   button semantics are a follow-up. */
body.surface-3 .slot.filled {
  cursor: pointer;
  transition: transform 200ms var(--ease-unfurl);
}
body.surface-3 .slot.filled .medallion {
  transition:
    border-color 220ms var(--ease-unfurl),
    background   220ms var(--ease-unfurl),
    box-shadow   220ms var(--ease-unfurl);
}
body.surface-3 .slot.filled .slot-text {
  transition: border-color 220ms var(--ease-unfurl);
}
body.surface-3 .slot.filled:hover {
  transform: translateY(-1px);
}
body.surface-3 .slot.filled:hover .medallion {
  border-color: rgba(201, 168, 76, 0.78);
  background: rgba(201, 168, 76, 0.10);
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.32);
}
body.surface-3 .slot.filled:hover .slot-text {
  border-color: rgba(201, 168, 76, 0.50);
}
body.surface-3 .slot.c-sect-lunar.filled:hover .medallion {
  border-color: rgba(168, 208, 232, 0.78);
  background: rgba(168, 208, 232, 0.10);
  box-shadow: 0 0 18px rgba(168, 208, 232, 0.32);
}
body.surface-3 .slot.c-sect-lunar.filled:hover .slot-text {
  border-color: rgba(168, 208, 232, 0.50);
}

/* Planet glyph base — Cinzel Decorative, sized to fill the medallion.
   Hidden by default (.future); animated in by .installing; static at
   full opacity for .filled. */
body.surface-3 .slot .planet-glyph {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--gold-whisper);
  text-shadow: 0 0 8px rgba(232, 201, 122, 0.45);
}
body.surface-3 .slot.filled .planet-glyph { opacity: 1; }

/* Install pulse — rim breathes between dim and bright on a 5.2s sine
   wave (Daljeet's 2026-05-16 tune). Halo bloom at peak. Reads color
   from --pulse-rim-dim/-bright + --pulse-halo custom properties so
   sect modifiers can swap the register (solar = gold; lunar = horizon
   blue). Defaults declared on .slot in the block above. */
@keyframes installPulse {
  0%, 100% {
    border-color: var(--pulse-rim-dim);
    box-shadow: 0 0 0 transparent;
  }
  50% {
    border-color: var(--pulse-rim-bright);
    box-shadow: 0 0 22px var(--pulse-halo);
  }
}
@keyframes glyphFadeIn {
  to { opacity: 1; }
}

/* Current step indicator — applied to the text-badge (.slot-text) so
   the gold accent reads as the badge's own emphasis. Border-left
   thickens to the gold-bright accent width (replaces the previous
   absolute-positioned ::before pseudo-element which was anchored to
   the whole slot's left edge — that placed the accent in the medallion
   column, which is no longer where the badge frame lives). */
body.surface-3 .slot.current .slot-text {
  border-color: rgba(232, 201, 122, 0.45);
  border-left: 2px solid var(--gold-bright);
  padding-left: 13px;  /* compensate the 1px the wider left border consumed */
  background: linear-gradient(
    90deg,
    rgba(201, 168, 76, 0.10),
    rgba(201, 168, 76, 0.02)
  );
  box-shadow: 0 0 12px rgba(232, 201, 122, 0.18);
}

body.surface-3 .rail-foot {
  flex-shrink: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  /* No separate background — let the rail's own bg (layered solid +
     horizontal gradient on right 64px) show through uniformly. The
     previous separate vertical-gradient bg used a different color
     (rgba(4,6,12)) than the rail's solid layer (rgba(13,18,32)),
     creating a perceptible color shift at the rail-slots/rail-foot
     seam. Removing the separate bg gives a continuous fill from header
     through slots through foot. The seam between slots and foot is now
     defined by content/padding only — no chrome line. */
}
body.surface-3 .rail-foot .lbl {
  font-family: var(--font-ui);
  font-size: 8.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--parchment-deep);
  opacity: 0;
  transition: opacity 400ms;
  white-space: nowrap;
}
body.surface-3 .rail:hover .rail-foot .lbl,
body.surface-3 .rail:focus-within .rail-foot .lbl {
  opacity: 1;
  transition-delay: 200ms;
}
body.surface-3 .rail-foot .count {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold-mid);
  white-space: nowrap;
}
body.surface-3 .rail-foot .count-collapsed {
  font-family: var(--font-heading);
  font-size: 10px;
  color: var(--gold-mid);
  letter-spacing: 0.08em;
}
body.surface-3 .rail:hover .count-collapsed,
body.surface-3 .rail:focus-within .count-collapsed { display: none; }
body.surface-3 .rail:hover .count-full,
body.surface-3 .rail:focus-within .count-full       { display: inline; }
body.surface-3 .count-full { display: none; }

/* ── SURFACE-3 CHROME MODULATION — body-class state machine ── */
/* Register B — brand strip + footer formerly receded to opacity 0.55
   during card-focus chambers. REMOVED 2026-05-16 per Daljeet's lock:
   the reveal card already gets its visual prominence from its outline,
   shadow, panel contrast, and entry cascade — dimming the chrome on top
   of that produced an over-recede that read as broken (Phase 1 Reveal's
   brand strip rendered ~45% dimmer than T5's). Chrome now reads
   consistently across all Surface 3 chambers regardless of register.
   The Oracle recede below stays — that's a much more intense ceremony
   moment with its own dramatic chrome quieting. */

/* Oracle invoked — chrome recedes almost entirely; rail/back-nav handled above */
body.oracle-invoked.surface-3 .s3-brand-strip,
body.oracle-invoked.surface-3 .s3-underline {
  opacity: 0.12;
  pointer-events: none;
}

/* Side-chamber open — blur non-overlay chrome so the side panel reads clearly */
body.side-chamber-open.surface-3 .s3-brand-strip,
body.side-chamber-open.surface-3 .s3-underline,
body.side-chamber-open.surface-3 .back-nav,
body.side-chamber-open.surface-3 .rail {
  filter: blur(4px);
}

/* ── SURFACE-3 + CHAMBER-FLOW — page-flow chamber stage adjustments ──
   Per Daljeet's May 8 2026 lock: the post-payment course is page-flow over
   fixed-viewport everywhere. body.chamber-flow's base rules unfix the
   chamber-stage and apply page-flow padding (top: var(--meridian-height),
   bottom: 72px). The two adjustments below are S3-specific:
     (a) reserve right-side space for the rail (including its --rail-overhang
         transparent zone) so chamber content doesn't render under either
         the rail's visible body or its overhang area where medallions sit;
     (b) raise the bottom padding to clear the new .s3-underline footer. */
body.chamber-flow.surface-3 .chamber-stage {
  padding-right: calc(var(--rail-collapsed) + var(--rail-overhang));
  padding-bottom: calc(var(--meridian-height) + 16px);
}


/* ── RESPONSIVE SHELL ADJUSTMENTS ── */
@media (max-width: 1024px) {
  .marketing-header-inner,
  .artifact-header-inner { padding: 0 28px; }
  .artifact-body          { padding: 48px 28px 80px; }
}

@media (max-width: 640px) {
  .marketing-nav          { display: none; }
  .marketing-header-inner,
  .artifact-header-inner  { padding: 0 20px; height: 60px; }
}