/* ===========================================================================
   Stars in the Skies — v2 (real sky) styles
   Self-contained: re-uses the prod aesthetic via @import, then layers v2-only
   chrome on top. We never touch /style.css; everything below is additive.
   =========================================================================== */
@import url("/style.css");

/* ---------- a11y: skip-navigation link (studio standard) ----------
   First focusable element on the page; visually parked off-screen until keyboard
   focus lands on it, then it drops in over everything. */
.skip-link {
  position: fixed; z-index: 200;
  top: calc(env(safe-area-inset-top, 10px) + 10px); left: 12px;
  transform: translateY(calc(-100% - 40px));
  background: rgba(8, 9, 20, 0.94); color: var(--gold);
  border: 1px solid rgba(255, 216, 107, 0.5); border-radius: 10px;
  padding: 10px 16px; text-decoration: none;
  font-family: var(--display); font-size: 12px; letter-spacing: 0.08em;
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: none; outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- v2 corner badge ---------- */
.v2badge {
  position: fixed; z-index: 20;
  top: calc(env(safe-area-inset-top, 14px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  font-family: var(--display);
  font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); opacity: 0.55;
  border: 1px solid rgba(255, 216, 107, 0.30);
  border-radius: 100px; padding: 5px 11px;
  background: rgba(255, 216, 107, 0.05); backdrop-filter: blur(6px);
  pointer-events: none;
  animation: fadein 2s ease 1s forwards; opacity: 0;
}

/* ---------- orientation guides toggle ---------- */
.guidetoggle {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 18px) + 102px);
  z-index: 12; cursor: pointer;
  background: rgba(8, 9, 20, 0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 216, 107, 0.22); border-radius: 100px;
  color: var(--hud); font-family: var(--display);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 7px 15px; opacity: 0; animation: fadein 1.8s ease 1.8s forwards;
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.guidetoggle.on { color: var(--gold); border-color: rgba(255, 216, 107, 0.45); box-shadow: 0 0 18px rgba(255, 216, 107, 0.16); background: rgba(255, 216, 107, 0.10); }
.guidetoggle:not(.on) { color: var(--hud); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; background: rgba(8, 9, 20, 0.45); }
/* fade away while placing / in a flow, like the view toggle */
body.placing .guidetoggle, body.flowing .guidetoggle { opacity: 0 !important; pointer-events: none; transition: opacity 0.6s ease; }

/* ---------- B3: unified placement panel ----------
   When the claim flow is driving placement (body.flowing.placing) the SINGLE
   visible panel is the flow's place step. Hide the legacy .place-ui chrome (its
   own hint + the bottom actions/confirm) so it no longer overlaps or intercepts
   the flow panel. Commit goes through the first-class SkyAPI2.confirmPlacement()
   (P1-11); the legacy .place-confirm only serves the claim2-less #placeUI path.
   The flow's own place step is exempted from `body.flowing .hud{opacity:0}`
   because it lives in #flow, not .hud. */
body.flowing.placing #placeUI { display: none !important; }

/* the mirrored "in <con> · right beside <star>" readout inside the flow panel */
.place-readout { margin: 8px auto 2px; text-align: center; animation: fadein 0.35s ease; }
.place-readout .pw-con {
  font-family: var(--display); font-size: 15px; letter-spacing: 0.06em;
  color: var(--gold); text-shadow: 0 0 24px rgba(255, 216, 107, 0.35);
}
.place-readout .pw-near { display: block; margin-top: 4px; font-size: 12.5px; opacity: 0.62; font-style: italic; }
.place-readout .pw-zod { display: block; margin-top: 5px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.45; }
.place-step-unified .place-sub { display: block; margin-top: 6px; font-size: 12px; opacity: 0.5; }
.place-step-unified .flow-next:disabled { opacity: 0.38; cursor: default; box-shadow: none; }

/* ---------- placement: live "where in the sky" readout ---------- */
.place-where {
  position: absolute; left: 0; right: 0;
  top: calc(env(safe-area-inset-top, 16px) + 170px);
  text-align: center; pointer-events: none;
  animation: fadein 0.4s ease;
}
.place-where .pw-con {
  font-family: var(--display); font-size: 15px; letter-spacing: 0.06em;
  color: var(--gold); text-shadow: 0 0 24px rgba(255, 216, 107, 0.4);
}
.place-where .pw-near { display: block; margin-top: 5px; font-size: 12.5px; opacity: 0.62; font-style: italic; }
.place-where .pw-zod { display: block; margin-top: 6px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.45; }

/* ---------- v2 "where in the sky" step (zodiac grid + date picker) ---------- */
.zodgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 16px; }
.zodcell {
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 12px 6px; cursor: pointer; color: var(--hud);
  font-family: var(--body); display: flex; flex-direction: column; align-items: center; gap: 3px; transition: all .2s;
}
.zodcell:hover, .zodcell:active { border-color: var(--gold); background: rgba(255,216,107,.08); }
.zodcell.sel { border-color: var(--gold); background: rgba(255,216,107,.12); box-shadow: 0 0 22px rgba(255,216,107,.18); }
.zodcell .z-sign { font-size: 22px; line-height: 1; }
.zodcell .z-name { font-size: 12px; letter-spacing: .02em; }
.zodcell .z-dates { font-size: 9.5px; opacity: .45; }

.daterow { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; text-align: left; }
.daterow label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .55; margin-bottom: 5px; display: block; }
.daterow input, .daterow select {
  width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px; padding: 13px 15px; color: #fff; font-family: var(--body); font-size: 16px; outline: none;
}
.daterow input:focus, .daterow select:focus { border-color: rgba(255,216,107,.55); }
.daterow .hintsmall { font-size: 12px; opacity: .5; margin-top: -4px; }
.placepick { display:flex; flex-direction:column; gap:10px; margin-top: 8px; }

/* ===========================================================================
   EXPLORE omnibox  — "Spotlight / ⌘K for the night sky"
   Glassy command-palette: HUD summon pill + full-screen overlay panel.
   =========================================================================== */

/* ---- HUD summon pill (bottom-left, mobile-friendly) ---- */
.omni-pill {
  position: fixed; z-index: 18;
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex; align-items: center; gap: 9px;
  background: rgba(8, 9, 20, 0.58); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 216, 107, 0.28); border-radius: 100px;
  color: var(--hud); cursor: pointer;
  padding: 10px 14px 10px 13px;
  font-family: var(--display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 6px 30px rgba(0,0,0,0.35), 0 0 22px rgba(255,216,107,0.08);
  opacity: 0; animation: fadein 1.8s ease 2s forwards;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .25s ease, opacity .35s ease;
}
.omni-pill:hover, .omni-pill:active { border-color: rgba(255,216,107,0.55); box-shadow: 0 6px 30px rgba(0,0,0,0.4), 0 0 26px rgba(255,216,107,0.20); transform: translateY(-1px); }
.omni-pill .op-ic { color: var(--gold); font-size: 15px; line-height: 1; }
.omni-pill .op-tx { opacity: 0.92; }
.omni-pill .op-kbd {
  font-family: var(--display); font-size: 10px; letter-spacing: 0;
  color: var(--gold); opacity: 0.7;
  border: 1px solid rgba(255,216,107,0.3); border-radius: 6px;
  padding: 1px 6px; line-height: 1.4;
}
.omni-pill.hidden { opacity: 0 !important; pointer-events: none; transform: translateY(8px); }

/* ---- overlay + glass panel ---- */
.omni-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(env(safe-area-inset-top, 0px), 10vh) 16px 16px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(4,6,16,0.55), rgba(1,1,8,0.78));
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .24s ease;
}
.omni-overlay.show { opacity: 1; }
/* B2: when closed the overlay MUST be fully inert. `.omni-overlay{display:flex}`
   otherwise overrides the UA `[hidden]{display:none}`, leaving a full-screen,
   z-index:60, pointer-events:auto layer that eats every click (blocking
   placement + tapping stars). Force it gone + non-interactive when hidden. */
.omni-overlay[hidden] { display: none !important; pointer-events: none !important; }
.omni-panel {
  width: min(560px, 100%);
  display: flex; flex-direction: column;
  max-height: min(72vh, 640px);
  background: linear-gradient(180deg, rgba(14,16,30,0.82), rgba(8,9,20,0.86));
  border: 1px solid rgba(255,216,107,0.22); border-radius: 22px;
  backdrop-filter: blur(22px) saturate(1.1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 60px rgba(120,140,230,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  transform: translateY(-14px) scale(0.985);
  transition: transform .28s cubic-bezier(.2,.9,.25,1);
}
.omni-overlay.show .omni-panel { transform: translateY(0) scale(1); }

/* ---- search row ---- */
.omni-search {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 18px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.omni-ic { color: var(--gold); font-size: 20px; line-height: 1; opacity: 0.85; text-shadow: 0 0 16px rgba(255,216,107,0.4); }
.omni-input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-family: var(--body); font-size: 18px; letter-spacing: 0.01em;
}
.omni-input::placeholder { color: rgba(255,248,224,0.42); }
.omni-esc {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  color: var(--hud); border-radius: 8px; padding: 5px 10px; cursor: pointer;
  font-family: var(--display); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7;
}
.omni-esc:hover { opacity: 1; border-color: rgba(255,216,107,0.4); }

/* ---- results scroll area ---- */
.omni-results { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 8px 10px; }
.omni-results::-webkit-scrollbar { width: 8px; }
.omni-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 8px; }

.omni-head {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); opacity: 0.6; padding: 12px 14px 6px;
}
.omni-head.soft { opacity: 0.45; }

.omni-row {
  width: 100%; display: flex; align-items: center; gap: 13px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 11px 14px; border-radius: 13px; color: var(--hud); font-family: var(--body);
  transition: background .14s ease;
}
.omni-row.sel, .omni-row:hover { background: rgba(255,216,107,0.10); }
.omni-row.sel { box-shadow: inset 0 0 0 1px rgba(255,216,107,0.28); }
.or-glyph {
  flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; font-size: 16px; line-height: 1;
  background: rgba(255,255,255,0.05); color: var(--gold);
  text-shadow: 0 0 12px rgba(255,216,107,0.4);
}
.or-glyph.star { color: #dfe7ff; text-shadow: 0 0 12px rgba(180,200,255,0.5); }
.or-glyph.constellation { color: #b7c6ff; text-shadow: 0 0 12px rgba(150,170,230,0.5); }
.or-glyph.sun { color: #ffdf8a; }
.or-glyph.moon { color: #e8ecf4; text-shadow: 0 0 12px rgba(220,228,255,0.5); }
.or-glyph.planet { color: #ffcf9a; }
.or-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.or-title { font-size: 15.5px; letter-spacing: 0.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-sub { font-size: 11.5px; opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-go { opacity: 0; color: var(--gold); font-size: 14px; transition: opacity .14s ease; }
.omni-row.sel .or-go { opacity: 0.8; }

.omni-empty, .omni-browsehint {
  padding: 26px 18px; text-align: center; color: var(--hud); opacity: 0.5;
  font-family: var(--body); font-size: 14px; font-style: italic;
}

/* ---- browse-mode lens chips ---- */
.omni-lenses { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 12px 4px; }
.omni-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14);
  color: var(--hud); border-radius: 100px; padding: 9px 15px; cursor: pointer;
  font-family: var(--display); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: all .18s ease;
}
.omni-chip .oc-g { font-size: 13px; opacity: 0.85; }
.omni-chip:hover { border-color: rgba(255,216,107,0.4); background: rgba(255,216,107,0.06); }
.omni-chip.on { border-color: var(--gold); background: rgba(255,216,107,0.14); color: var(--gold); box-shadow: 0 0 20px rgba(255,216,107,0.16); }
.omni-chip.wander { border-color: rgba(183,198,255,0.35); color: #cdd8ff; }
.omni-chip.wander:hover { border-color: rgba(183,198,255,0.6); background: rgba(150,170,230,0.10); box-shadow: 0 0 22px rgba(150,170,230,0.18); }

/* ---- foot legend (desktop affordances; harmless on touch) ---- */
.omni-foot {
  display: flex; gap: 18px; justify-content: center;
  padding: 10px; border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--body); font-size: 11px; opacity: 0.4;
}
.omni-foot kbd {
  font-family: var(--display); font-size: 10px; color: var(--gold);
  border: 1px solid rgba(255,216,107,0.25); border-radius: 5px; padding: 0 5px; margin-right: 4px;
}
@media (max-width: 560px) { .omni-foot { display: none; } }

/* never let the explore palette collide with the claim ritual / placement */
body.omni-open .omni-pill { opacity: 0; pointer-events: none; }

/* ===========================================================================
   REAL-STAR TRUTH — the "hidden stars" substrate surfacing in the claim ritual.
   The live whisper (place/name steps), the pay-step claim block, and the
   done-screen "official" facts that the human name sits over. Cool-silver to
   read as catalogue truth against the warm gold of the human layer.
   =========================================================================== */

/* ---- live truth whisper (place + name steps) ---- */
.real-whisper {
  margin: 10px auto 14px; max-width: 34ch; text-align: center;
  font-family: var(--body);
  animation: fadein .45s ease;
}
.real-whisper.searching .rw-seek {
  font-size: 13px; font-style: italic; letter-spacing: .01em;
  color: #aebbe0; opacity: .7;
}
.real-whisper .rw-line { font-size: 14px; line-height: 1.4; }
.real-whisper .rw-id {
  font-family: var(--display); letter-spacing: .04em;
  color: #cfe2ff; text-shadow: 0 0 18px rgba(150,190,255,.4);
}
.real-whisper .rw-meta { color: var(--hud); opacity: .68; }
.real-whisper .rw-poem {
  margin-top: 6px; font-size: 12.5px; font-style: italic; line-height: 1.5;
  color: #c7d2ee; opacity: .6;
}

/* ---- pay-step claim block (the real star you're about to reserve) ---- */
.real-claimblock {
  max-width: 340px; margin: 4px auto 16px; padding: 16px 18px;
  text-align: center;
  background: rgba(150,190,255,.05);
  border: 1px solid rgba(150,190,255,.22); border-radius: 16px;
  box-shadow: inset 0 0 30px rgba(120,160,255,.06);
  animation: fadein .5s ease;
}
.real-claimblock .rc-id {
  font-family: var(--display); font-size: 17px; letter-spacing: .05em;
  color: #d8e7ff; text-shadow: 0 0 22px rgba(150,190,255,.45);
}
.real-claimblock .rc-sub { margin-top: 5px; font-size: 13px; color: var(--hud); opacity: .72; }
.real-claimblock .rc-poem {
  margin-top: 9px; font-size: 12px; font-style: italic; line-height: 1.5;
  color: #c7d2ee; opacity: .58;
}

/* ---- A13: the tonight-sentence at pay — the computed, honest answer to "can I see it?" ---- */
.rc-tonight {
  margin: 10px auto 2px; max-width: 340px; text-align: center;
  font-size: 12.5px; line-height: 1.55; color: var(--gold); opacity: .82;
}

/* ---- A13: "how this works — and what we don't pretend" sheet at the pay step ---- */
.honest-how { display: block; margin: 12px auto 0; font-size: 12px; opacity: .72; }
.honest-how:hover { opacity: 1; }
.honest-sheet {
  margin: 10px auto 0; max-width: 360px; padding: 12px 14px; text-align: left;
  border: 1px solid rgba(255,216,107,.22); border-radius: 12px;
  background: rgba(255,216,107,.04);
  font-size: 12.5px; line-height: 1.55; color: var(--hud);
}
.honest-sheet p { margin: 0 0 8px; }
.honest-sheet b { color: var(--gold); font-weight: 600; }
.honest-sheet a { color: var(--gold); font-size: 12px; }

/* ---- done-screen "in the catalogues" facts (real truth under the human name) ---- */
.done .done-ded {
  font-style: italic; opacity: .7; margin: 2px 0 12px; font-size: 14.5px; line-height: 1.5;
}
.real-facts {
  max-width: 320px; margin: 6px auto 18px; padding: 14px 16px;
  text-align: center;
  background: rgba(150,190,255,.045);
  border: 1px solid rgba(150,190,255,.20); border-radius: 14px;
}
.real-facts .rf-head {
  font-family: var(--display); font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase;
  color: #9fb6e8; opacity: .7;
}
.real-facts .rf-id {
  font-family: var(--display); font-size: 18px; letter-spacing: .05em; margin-top: 4px;
  color: #dcebff; text-shadow: 0 0 22px rgba(150,190,255,.45);
}
.real-facts .rf-meta { margin-top: 5px; font-size: 12.5px; color: var(--hud); opacity: .7; }
.real-facts .rf-claim {
  margin-top: 8px; font-size: 11.5px; letter-spacing: .04em; font-style: italic;
  color: var(--gold); opacity: .8;
}

/* ===========================================================================
   v2 checkout + accounts + guestbook
   The full pay form, sign-in and guestbook styling is inherited from prod
   /style.css via the @import above (.paysum, .cardform, .cf-field, .signin,
   .gb-list, .promorow, .tiprow, .optstrip, etc). These rules only add the
   couple of v2-only wrapper classes and small dome-aesthetic adjustments so
   the ported ritual sits cleanly in the real-sky panel.
   =========================================================================== */

/* the real-star binding block sits above the paid summary on the pay step */
.pay-step .real-claimblock { margin: 2px auto 14px; }
.pay-step .paysum { margin-top: 4px; }

/* wrapper that toggles the card form when Apple Pay is offered first (layout only) */
.cardbody { display: block; }
.cardbody[hidden] { display: none; }
.cardbody .cardform { margin-top: 2px; }

/* keep the card-number field + brand glyph on one row inside the v2 panel */
.cf-field.f-num { position: relative; }

/* guestbook inside the v2 profile — soften to match the dome panel */
.prof-guest {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}
.prof-guest .prof-guest-h {
  font-family: var(--display); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--hud); opacity: .5; margin-bottom: 10px;
}
.prof-guest .gb-empty { opacity: .5; font-size: 13px; font-style: italic; }

/* sign-in confirmation note (saved to number) — gold, gentle */
.si-ok { color: var(--gold); opacity: .85; font-size: 13.5px; line-height: 1.5; }

/* ===========================================================================
   v2 polish — honesty line, sound/comfort toggles, First Light tour overlay
   (all additive; never touches prod /style.css)
   =========================================================================== */

/* ---------- honesty line (research §15): proud + early, warm voice ---------- */
.honesty {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 14px) + 58px);
  z-index: 12; max-width: min(86vw, 460px); text-align: center; pointer-events: none;
  font-family: var(--body); font-size: 12.5px; line-height: 1.5; color: var(--hud);
  opacity: 0; animation: fadein 1.6s ease 1.4s forwards;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.honesty b { color: var(--gold); font-weight: 600; }
.honesty span { display: block; font-size: 12px; opacity: 0.72; margin-top: 2px; }
/* A13: the honesty line STAYS while flowing — the trust signal must be visible at
   the moment of trust (the old rule force-hid it exactly when money was on screen).
   It still fades for PLACING only: that's the immersive full-sky moment, and
   galaxy2's body.in-place rule clears the whole HUD there anyway. */
body.placing .honesty { opacity: 0 !important; transition: opacity 0.5s ease; }
body.flowing:not(.placing) .honesty { opacity: 0.85 !important; transition: opacity 0.5s ease; }

/* ---------- sound + comfort toggle stack (top-right, under the badge) ---------- */
.toolstack {
  position: fixed; z-index: 20;
  top: calc(env(safe-area-inset-top, 14px) + 44px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  display: flex; flex-direction: column; gap: 7px; align-items: flex-end;
  opacity: 0; animation: fadein 1.8s ease 2s forwards;
}
.tooltoggle {
  cursor: pointer; background: rgba(8, 9, 20, 0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 100px;
  color: var(--hud); font-family: var(--display);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px; transition: color .25s, border-color .25s, background .25s, box-shadow .25s;
}
.tooltoggle.on, .tooltoggle:not(.muted)#muteToggle {
  color: var(--gold); border-color: rgba(255, 216, 107, 0.42);
  box-shadow: 0 0 16px rgba(255, 216, 107, 0.14); background: rgba(255, 216, 107, 0.10);
}
.tooltoggle.muted { color: var(--hud); border-color: rgba(255,255,255,0.14); box-shadow: none; background: rgba(8,9,20,0.45); }
body.placing .toolstack, body.flowing .toolstack { opacity: 0 !important; pointer-events: none; transition: opacity 0.6s ease; }

/* ===========================================================================
   V1 + V2: HOME top-bar layout — clean hierarchy, NO overlaps at 390px.
   The prod HUD stacks wordmark (.brand) / counter / honesty / guides / badges
   at hard-coded top offsets that collide on a narrow phone. We re-space them
   into a clear vertical rhythm and shrink the secondary copy so it reads as
   secondary, never overlapping. Foreground stays minimal.
   =========================================================================== */

/* wordmark: tighten letter-spacing a touch so it never wraps at 390px, and drop it
   below the corner badge/toggle row so its centered ends never clip into them. */
.brand { margin-top: 30px; }
.brand .name { font-size: clamp(17px, 4.6vw, 26px); letter-spacing: 0.2em; }

/* counter ("8,920 real stars · real sky") sits just under the wordmark */
.counter { margin-top: 74px; }

/* honesty two-liner: clearly SECONDARY, below the counter, never colliding */
.honesty {
  top: calc(env(safe-area-inset-top, 14px) + 108px);
  max-width: min(82vw, 420px); font-size: 12px; line-height: 1.45;
}
.honesty span { font-size: 11.5px; opacity: 0.7; }

/* orientation guides toggle drops below the honesty line (clears its 2 + 2 lines) */
.guidetoggle { top: calc(env(safe-area-inset-top, 18px) + 184px); }

/* corner v2 badge stays pinned top-right; the sound/comfort toggles stack beneath it */
.v2badge { font-size: 9px; padding: 4px 9px; }
.toolstack { top: calc(env(safe-area-inset-top, 14px) + 58px); gap: 6px; }
.tooltoggle { font-size: 9px; padding: 5px 10px; letter-spacing: 0.12em; }

/* V2: keep the "✦ Add your star" CTA fully on-screen (was clipped at the left
   edge because the prod button is nowrap with wide padding + letter-spacing,
   overflowing a 390px viewport). Cap its width and ease the metrics on mobile. */
.cta { max-width: calc(100vw - 32px); }
@media (max-width: 430px) {
  .cta {
    padding: 14px 26px; font-size: 13px; letter-spacing: 0.16em;
    max-width: calc(100vw - 28px);
  }
  /* keep the centered wordmark narrow + clear of the top-right v2 badge / toggles */
  .brand { margin-top: 40px; }
  .brand .name { letter-spacing: 0.1em; font-size: clamp(16px, 4.3vw, 26px); }
  .honesty { max-width: 88vw; }
}

/* ---------- always-on legibility scrim behind copy over the starfield (research §13) ---------- */
.card, .place-where, .omni, .stage-panel { /* scrim helper applied where text sits on the sky */ }
.place-where { text-shadow: 0 1px 10px rgba(0,0,0,0.85); }

/* ===========================================================================
   First Light cinematic tour overlay
   =========================================================================== */
.firstlight {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;   /* the scene shows through; only buttons take input */
}
.firstlight .fl-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(1,1,10,0.55) 100%);
}
/* caption scrim — a soft dark pill so copy stays legible over any sky region */
.fl-caption {
  position: absolute; left: 50%; bottom: 17%; transform: translate(-50%, 12px);
  opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; pointer-events: none;
  max-width: min(88vw, 520px); text-align: center;
}
.fl-caption.show { opacity: 1; transform: translate(-50%, 0); }
.fl-cap-inner {
  display: inline-block; padding: 11px 20px; border-radius: 16px;
  background: rgba(4, 5, 14, 0.46); backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.fl-cap-text {
  font-family: var(--display); font-size: 17px; letter-spacing: 0.02em; line-height: 1.4;
  color: #fff7e2; text-shadow: 0 1px 14px rgba(0,0,0,0.6);
}
/* tap-to-begin — the gesture that unlocks audio + starts the zoom (research §12) */
.fl-begin {
  position: relative; pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 34px 48px; border-radius: 26px;
  background: rgba(6, 8, 20, 0.5); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 216, 107, 0.28);
  box-shadow: 0 0 60px rgba(255, 216, 107, 0.10);
  transition: opacity 0.6s ease, transform 0.6s ease;
  animation: flBeginIn 1.2s ease forwards;
}
@keyframes flBeginIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.fl-begin.gone { opacity: 0; transform: scale(1.04); pointer-events: none; }
.fl-begin-title { font-family: var(--display); font-size: 26px; letter-spacing: 0.06em; color: var(--gold); }
.fl-begin-sub { font-family: var(--body); font-size: 13px; opacity: 0.7; color: var(--hud); }
.fl-begin-cta {
  margin-top: 10px; font-family: var(--display); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--hud); opacity: 0.85;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; padding: 8px 18px;
}
.fl-begin-silent {
  margin-top: 4px; font-family: var(--body); font-size: 11.5px; opacity: 0.5;
  color: var(--hud); text-decoration: underline; text-underline-offset: 3px;
}
.fl-begin-silent:hover { opacity: 0.8; }
/* U1: promoted to a real standalone control beneath the begin button — a distinct,
   clearly tappable pill that starts the tour MUTED (vs "tap to begin" with sound). */
.fl-silent-standalone {
  position: absolute; left: 50%; top: calc(50% + 116px); transform: translateX(-50%);
  pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; white-space: nowrap;
  background: rgba(6, 8, 20, 0.5); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 100px;
  font-family: var(--display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hud); opacity: 0.85; text-decoration: none;
  animation: flBeginIn 1.2s ease 0.2s forwards;
  transition: opacity 0.25s, border-color 0.25s, background 0.25s;
}
.fl-silent-standalone::before { content: '♪⃠ '; opacity: 0.7; letter-spacing: 0; }
.fl-silent-standalone:hover { opacity: 1; border-color: rgba(255, 255, 255, 0.32); background: rgba(8, 10, 24, 0.6); }
.firstlight .fl-begin.gone ~ .fl-silent-standalone { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
/* quiet, peripheral skip (research §1) */
.fl-skip {
  position: absolute; pointer-events: auto; cursor: pointer;
  top: calc(env(safe-area-inset-top, 14px) + 16px); right: calc(env(safe-area-inset-right, 0px) + 16px);
  background: rgba(6, 8, 20, 0.5); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 100px;
  color: var(--hud); font-family: var(--display);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 16px;
  opacity: 0.7; transition: opacity 0.25s;
}
.fl-skip:hover { opacity: 1; }
.fl-attrib {
  position: absolute; pointer-events: none;
  bottom: calc(env(safe-area-inset-bottom, 10px) + 12px); right: 14px;
  font-family: var(--body); font-size: 10px; letter-spacing: 0.03em; color: var(--hud);
  opacity: 0.4; text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
/* comfort variant: no big motion — the overlay just cross-fades captions */
.firstlight.comfort .fl-caption { transition: opacity 0.5s ease; }

/* ---------- V3: hide/dim the HUD while First Light or the claim flow is open ----------
   The First Light modal lives at z-index:90 but the v2 HUD (Add-your-star CTA,
   orbit hint, honesty line, badges, tool toggles, explore pill) sat beneath it and
   bled through. Suppress all of it whenever #firstlight is mounted. The claim flow
   already hides .hud via prod style.css (body.flowing .hud) and .honesty/.toolstack/
   .guidetoggle above; here we also tuck the corner badge + explore pill away so
   nothing competes with either overlay. */
body:has(#firstlight) .hud,
body:has(#firstlight) .honesty,
body:has(#firstlight) .toolstack,
body:has(#firstlight) .guidetoggle,
body:has(#firstlight) .v2badge,
body:has(#firstlight) .omni-pill,
body:has(#firstlight) .scale-rail,
body:has(#firstlight) #locator,
body.flowing .v2badge,
body.flowing .omni-pill {
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity 0.4s ease;
}

/* U2: a brief, gentle attention pulse on the "Add your star" CTA when First Light
   resolves onto the explorable sky — invites the first placement without forcing it. */
@keyframes ctaInvite {
  0%, 100% { box-shadow: 0 0 40px rgba(255, 216, 107, 0.18); }
  50%      { box-shadow: 0 0 70px rgba(255, 216, 107, 0.45); }
}
/* the omni consolidation hides .cta (display:none !important below), so the pulse must
   also land on the omnibar dock's live "✦ Add star" button — the one users can see. */
.cta.first-invite, .lx-add.first-invite { animation: ctaInvite 2s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .cta.first-invite, .lx-add.first-invite { animation: none; } }

/* respect reduced motion for the chrome animations too */
@media (prefers-reduced-motion: reduce) {
  .fl-begin { animation: none; opacity: 1; }
  .honesty, .toolstack, .v2badge, .guidetoggle { animation-duration: 0.01s; }
}

/* ================= SCALE RAIL — the in/out navigator ================= */
.scale-rail {
  position: fixed; right: calc(env(safe-area-inset-right, 0px) + 16px);
  top: 50%; transform: translateY(-50%);
  z-index: 16; display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0; animation: fadein 1.4s ease 2.2s forwards; pointer-events: none;
}
.scale-rail .rail-track, .scale-rail .rail-fly { pointer-events: auto; }
.rail-track {
  position: relative; width: 30px; height: min(58vh, 460px);
  border-radius: 100px;
  background: linear-gradient(to top, rgba(255,216,107,0.10), rgba(12,16,34,0.5) 42%, rgba(8,10,24,0.5));
  border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.4);
  cursor: ns-resize; touch-action: none;
}
.rail-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  border-radius: 100px;
  background: linear-gradient(to top, rgba(255,216,107,0.28), rgba(120,160,255,0.10));
  pointer-events: none;
}
.rail-stops { position: absolute; inset: 0; pointer-events: none; }
.rail-stop {
  position: absolute; right: 50%; transform: translate(50%, 50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.32); border: 1px solid rgba(255,255,255,0.22);
  cursor: pointer; pointer-events: auto;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.rail-stop:hover { background: var(--gold); box-shadow: 0 0 10px rgba(255,216,107,0.55); }
.rail-stop.active { background: var(--gold); box-shadow: 0 0 12px rgba(255,216,107,0.7); }
.rail-stop-label {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-family: var(--display);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(220,228,245,0.62); pointer-events: none;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8); opacity: 0; transition: opacity 0.25s ease;
}
.rail-stop:hover .rail-stop-label, .rail-stop.active .rail-stop-label,
.scale-rail.scrubbing .rail-stop-label { opacity: 1; }
.rail-handle {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
}
.rail-handle-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7e2, var(--gold) 55%, #c9962f);
  box-shadow: 0 0 16px rgba(255,216,107,0.7), 0 0 4px rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.5);
}
.rail-fly {
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none;
  background: rgba(8,9,20,0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(120,160,255,0.32); border-radius: 100px;
  color: var(--hud); font-family: var(--display);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 13px; transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.rail-fly.flying { color: #cfe0ff; border-color: rgba(150,185,255,0.85); box-shadow: 0 0 22px rgba(120,160,255,0.5); background: rgba(40,60,120,0.4); }

.ringtoggle {
  position: fixed; right: calc(env(safe-area-inset-right, 0px) + 12px);
  top: calc(env(safe-area-inset-top, 14px) + 96px); z-index: 16; cursor: pointer;
  background: rgba(8,9,20,0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(120,160,255,0.22); border-radius: 100px;
  color: var(--hud); font-family: var(--display);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 13px; opacity: 0; animation: fadein 1.6s ease 2.2s forwards;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.ringtoggle.on { color: #aec6ff; border-color: rgba(120,160,255,0.55); box-shadow: 0 0 16px rgba(120,160,255,0.22); background: rgba(60,90,170,0.14); }

/* the rail + ring controls hide during a place, placement, flow, or the tour */
body.in-place .scale-rail, body.placing .scale-rail, body.flowing .scale-rail, body.fl-running .scale-rail,
body.in-place .ringtoggle, body.placing .ringtoggle, body.flowing .ringtoggle, body.fl-running .ringtoggle {
  opacity: 0 !important; pointer-events: none; transition: opacity 0.5s ease;
}

/* the rail track gets a soft outer glow; the handle breathes a faint ring */
.rail-track { box-shadow: inset 0 0 24px rgba(0,0,0,0.4), 0 0 26px rgba(120,150,230,0.10); }
.rail-handle::before {
  content: ''; position: absolute; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,216,107,0.35); animation: railPulse 3.2s ease-in-out infinite; pointer-events: none;
}
@keyframes railPulse {
  0%, 100% { transform: scale(0.8); opacity: 0.55; }
  50% { transform: scale(1.25); opacity: 0; }
}
.scale-rail.scrubbing .rail-handle-dot { box-shadow: 0 0 24px rgba(255,216,107,0.95), 0 0 6px rgba(255,255,255,1); }

/* ============ cinematic vignette — gently darkens the corners, frames the sky ============ */
.sky-vignette {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 45%, transparent 52%, rgba(2,3,12,0.28) 84%, rgba(1,1,8,0.55) 100%);
}
body.in-place .sky-vignette { opacity: 0.6; }

/* ===========================================================================
   LOCATOR — the space-coordinate command bar (replaces the old Explore pill).
   Scoped under #locator so it never clashes with base/v2 classes. Gold = your
   light / actions; ice (--ice) = the real sky / coordinates.
   =========================================================================== */
:root { --ice: #b7c6ff; --ice-dim: rgba(183,198,255,0.6); }

#locator {
  position: fixed; left: 0; right: 0; z-index: 18;
  bottom: 0; padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  display: flex; justify-content: center; align-items: flex-end; gap: 12px;
  pointer-events: none; transform: translateY(var(--lx-lift, 0px));
  transition: transform .2s ease, opacity .35s ease;
}
#locator > * { pointer-events: auto; }
#locator.lx-hidden { opacity: 0; pointer-events: none; transform: translateY(10px); }
#locator.lx-hidden > * { pointer-events: none; }

/* —— Earth home button —— */
.lx-earth {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; border: 0; padding: 0;
  position: relative; margin-bottom: 1px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(60% 55% at 38% 34%, #3a6ea5 0%, #244b78 38%, #15314f 64%, #0a1c30 100%);
  box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.4), inset -6px -7px 14px rgba(0,0,0,.55), inset 3px 3px 10px rgba(150,200,255,.25);
  transition: transform .3s var(--ease,cubic-bezier(.2,.9,.25,1)), box-shadow .3s ease, opacity .25s ease, width .3s ease;
}
.lx-earth::after { content:""; position:absolute; inset:-2px; border-radius:50%; box-shadow:0 0 22px rgba(120,170,255,.35); opacity:0; transition:opacity .3s ease; }
.lx-earth:hover { transform: translateY(-3px) scale(1.04); }
.lx-earth:hover::after { opacity:1; }
.lx-land { position:absolute; width:15px; height:10px; background:rgba(120,200,150,.55); border-radius:50% 40% 55% 45%;
  top:30%; left:28%; filter:blur(.4px); box-shadow:9px 7px 0 -2px rgba(120,200,150,.45), 3px 13px 0 -3px rgba(120,200,150,.4); }
.lx-earth-label { position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
  font-family:var(--display); font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:var(--ice-dim); white-space:nowrap; }

/* —— the morphing dock —— */
.lx-dock {
  position: relative; width: min(560px, 100%); display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,24,46,.66), rgba(10,12,26,.62));
  border: 1px solid rgba(255,255,255,.10); border-radius: 20px;
  backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 18px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
  transition: box-shadow .35s ease, border-color .35s ease;
}
.lx-dock.open { border-color: rgba(255,216,107,.22); box-shadow: 0 30px 90px rgba(0,0,0,.62), 0 0 60px rgba(120,140,230,.08), inset 0 1px 0 rgba(255,255,255,.08); }

.lx-readout { display:flex; align-items:center; gap:12px; padding:12px 15px; cursor:text; min-height:56px; }
.lx-chip { display:none; align-items:center; gap:6px; flex:0 0 auto; max-width:46%;
  font-family:var(--display); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(255,216,107,.5); background:rgba(255,216,107,.08); border-radius:100px; padding:5px 6px 5px 10px; }
.lx-dock.anchored .lx-chip { display:inline-flex; }
.lx-chip .t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lx-chip .x { flex:0 0 auto; width:16px; height:16px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,216,107,.16); color:var(--gold); font-size:11px; line-height:1; }
.lx-chip .x:hover { background:rgba(255,216,107,.3); }

.lx-loc { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; overflow:hidden; }
.lx-here { display:flex; align-items:baseline; gap:9px; }
.lx-con { font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:.04em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lx-con .g { color:var(--ice); margin-right:5px; font-weight:400; }
.lx-sub { font-size:11.5px; color:var(--hud); opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.lx-coords { flex:0 0 auto; font-family:ui-monospace,'Space Mono',monospace; font-size:12px; letter-spacing:.02em; color:var(--ice);
  display:flex; gap:10px; align-items:baseline; opacity:.92; text-shadow:0 0 14px rgba(183,198,255,.25); white-space:nowrap; }
.lx-coords i { color:var(--ice-dim); opacity:.7; margin-right:3px; font-style:normal; }

.lx-glyph { flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; cursor:pointer;
  color:var(--gold); font-size:17px; background:rgba(255,216,107,.06); border:1px solid rgba(255,216,107,.14); transition:background .2s,border-color .2s; }
.lx-glyph:hover { background:rgba(255,216,107,.12); border-color:rgba(255,216,107,.5); }

.lx-search { display:none; flex:1; align-items:center; gap:12px; min-width:0; }
.lx-search .lx-sic { color:var(--gold); font-size:18px; opacity:.85; }
.lx-search input { flex:1; background:none; border:none; outline:none; color:#fff; font-family:var(--body); font-size:17px; min-width:0; }
.lx-search input::placeholder { color:rgba(255,248,224,.4); }
.lx-save { flex:0 0 auto; font-family:var(--display); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ice);
  border:1px solid rgba(183,198,255,.28); border-radius:8px; padding:6px 9px; cursor:pointer; opacity:.85; white-space:nowrap; background:none; }
.lx-save:hover { opacity:1; border-color:var(--ice); background:rgba(183,198,255,.08); }
.lx-dock.open .lx-readout { cursor:default; }
.lx-dock.open .lx-loc, .lx-dock.open .lx-coords, .lx-dock.open .lx-glyph { display:none; }
.lx-dock.open .lx-search { display:flex; }

.lx-body { max-height:0; overflow:hidden; transition:max-height .36s var(--ease,cubic-bezier(.2,.9,.25,1)); }
.lx-dock.open .lx-body { max-height:min(64vh,560px); }
.lx-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; max-height:min(64vh,560px); border-top:1px solid rgba(255,255,255,.06); padding:6px 7px 9px; }
.lx-scroll::-webkit-scrollbar { width:8px; } .lx-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:8px; }

.lx-lenses { display:flex; flex-wrap:wrap; gap:7px; padding:11px 9px 5px; }
.lx-clip { display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.13); color:var(--hud); border-radius:100px; padding:8px 13px; transition:all .16s ease;
  font-family:var(--display); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }
.lx-clip .cg { font-size:12px; opacity:.85; }
.lx-clip:hover { border-color:rgba(255,216,107,.5); background:rgba(255,216,107,.06); }
.lx-clip.on { border-color:var(--gold); background:rgba(255,216,107,.13); color:var(--gold); box-shadow:0 0 18px rgba(255,216,107,.14); }
.lx-clip.wander { border-color:rgba(183,198,255,.32); color:var(--ice); }

.lx-head { font-family:var(--display); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; padding:14px 13px 6px;
  display:flex; align-items:center; gap:8px; color:var(--gold); opacity:.62; }
.lx-head.places { color:var(--ice); opacity:.7; } .lx-head.actions { color:var(--hud); opacity:.5; }
.lx-head .rule { flex:1; height:1px; background:linear-gradient(90deg,currentColor,transparent); opacity:.3; }

.lx-row { width:100%; display:flex; align-items:center; gap:12px; cursor:pointer; text-align:left; background:none; border:none;
  color:var(--hud); font-family:var(--body); padding:10px 12px; border-radius:12px; transition:background .13s,box-shadow .13s; }
.lx-row.sel, .lx-row:hover { background:rgba(255,216,107,.1); }
.lx-row.sel { box-shadow:inset 0 0 0 1px rgba(255,216,107,.26); }
.lx-row:focus-visible { outline:none; box-shadow:inset 0 0 0 1px rgba(255,216,107,.55), 0 0 0 1px rgba(255,216,107,.25); }
.lx-row.place.sel, .lx-row.place:hover { background:rgba(183,198,255,.1); }
.lx-row.place.sel { box-shadow:inset 0 0 0 1px rgba(183,198,255,.28); }
.lx-g { flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; font-size:15px;
  background:rgba(255,255,255,.05); color:var(--gold); text-shadow:0 0 12px rgba(255,216,107,.4); }
.lx-g.star { color:#dfe7ff; text-shadow:0 0 12px rgba(180,200,255,.5); }
.lx-g.constellation { color:var(--ice); text-shadow:0 0 12px rgba(150,170,230,.5); }
.lx-g.place { color:var(--ice); background:rgba(183,198,255,.1); }
.lx-g.planet { color:#ffcf9a; } .lx-g.moon { color:#e8ecf4; } .lx-g.sun { color:#ffdf8a; } .lx-g.action { color:var(--gold); background:rgba(255,216,107,.08); }
.lx-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lx-title { font-size:15px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lx-rs { font-size:11px; opacity:.55; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lx-rc { flex:0 0 auto; font-family:ui-monospace,'Space Mono',monospace; font-size:10.5px; color:var(--ice); opacity:.6; }
.lx-go { flex:0 0 auto; color:var(--gold); font-size:13px; opacity:0; transition:opacity .13s; }
.lx-row.sel .lx-go { opacity:.85; }
.lx-verbs { flex:0 0 auto; display:flex; gap:5px; opacity:0; transition:opacity .13s; }
.lx-row.place.sel .lx-verbs, .lx-row.place:hover .lx-verbs { opacity:1; }
.lx-verb { font-family:var(--display); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ice);
  border:1px solid rgba(183,198,255,.3); border-radius:7px; padding:4px 7px; }
.lx-verb:hover { background:rgba(183,198,255,.12); color:#fff; }
.lx-verb.del { color:#ff9a9a; border-color:rgba(255,140,140,.3); }
.lx-empty { padding:26px 18px; text-align:center; opacity:.5; font-style:italic; font-size:14px; }
/* Layers panel: each row is a checkbox you flip in place (◉ on / ○ off) */
.lx-g.layer { color:var(--hud); }
.lx-row.layer.on .lx-g.layer { color:var(--gold); text-shadow:0 0 12px rgba(255,216,107,.5); }
.lx-switch { flex:0 0 auto; min-width:42px; text-align:center; font-family:var(--display); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--hud); border:1px solid rgba(255,255,255,.16); border-radius:100px; padding:4px 10px; opacity:.7; }
.lx-switch.on { color:var(--gold); border-color:rgba(255,216,107,.45); background:rgba(255,216,107,.10); opacity:1; }
.lx-foot { display:flex; gap:16px; justify-content:center; padding:9px; border-top:1px solid rgba(255,255,255,.06); font-size:10.5px; opacity:.4; }
.lx-foot kbd { font-family:ui-monospace,'Space Mono',monospace; font-size:9.5px; color:var(--gold); border:1px solid rgba(255,216,107,.25); border-radius:5px; padding:0 5px; margin-right:4px; }
.lx-savebar { display:flex; gap:8px; align-items:center; padding:11px 13px; border-top:1px solid rgba(183,198,255,.16); background:rgba(183,198,255,.05); }
.lx-savebar[hidden] { display:none; }
.lx-savebar input { flex:1; min-width:0; background:rgba(0,0,0,.25); border:1px solid rgba(183,198,255,.3); border-radius:10px; padding:9px 12px; color:#fff; font-family:var(--body); font-size:16px; outline:none; }
.lx-savebar input:focus { border-color:var(--ice); }
.lx-savebar button { flex:0 0 auto; font-family:var(--display); font-size:10px; letter-spacing:.12em; text-transform:uppercase; border:none; border-radius:10px; padding:10px 15px; cursor:pointer; color:#04121f; background:var(--ice); font-weight:600; }

/* —— coexist with the rest of the HUD —— */
.cta { bottom: calc(env(safe-area-inset-bottom, 22px) + 90px) !important; }   /* float Add-your-star ABOVE the dock */
.hint { bottom: calc(env(safe-area-inset-bottom, 22px) + 150px) !important; }
.hint { text-shadow: 0 1px 9px rgba(0,0,0,.72); }   /* legibility over the Milky Way */
body.locator-open .cta, body.locator-open .hint, body.locator-open .counter { opacity:0 !important; pointer-events:none; transition:opacity .25s ease; }

/* —— MOBILE: full-width bottom sheet; results grow UP above a bottom-pinned input —— */
@media (max-width: 560px) {
  #locator { gap:0; padding:0 9px calc(env(safe-area-inset-bottom,0px) + 12px); }
  .lx-earth { width:46px; height:46px; margin-right:9px; } .lx-earth-label { display:none; }
  .lx-dock { width:100%; }
  .lx-coords { flex-direction:column; align-items:flex-end; gap:1px; font-size:12.5px; line-height:1.3; }
  .lx-dock.open { flex-direction:column-reverse; }
  .lx-dock.open .lx-readout { border-top:1px solid rgba(255,255,255,.08); }
  .lx-dock.open .lx-scroll { border-top:0; max-height:min(72vh,72vh); }
  .lx-dock.open .lx-body { max-height:min(72vh,72vh); }
  .lx-search input { font-size:16px; }
  body.locator-open #locator .lx-earth { opacity:0; width:0; margin-right:0; pointer-events:none; }
  .lx-lenses { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .lx-lenses::-webkit-scrollbar { display:none; }
  .lx-row { padding:13px 12px; } .lx-verbs, .lx-go { opacity:1; }
  .lx-foot { display:none; }
  #shipLaunch { bottom: calc(env(safe-area-inset-bottom,0px) + 86px) !important; }  /* lift ship pill above the dock */
}

/* ===========================================================================
   OMNI CONSOLIDATION (v2) — every scattered HUD control now lives INSIDE the
   locator/omni. The originals stay in the DOM (so the omni's clickHud() still
   drives the real scene wiring) but are visually removed. Only the scale-rail
   zoom is intentionally kept outside.
   =========================================================================== */
.guidetoggle, .toolstack, .ringtoggle, #placesRail, #shipLaunch, .cta { display: none !important; }

/* —— real Earth globe in the home button (replaces the old green blob) —— */
.lx-globe { width: 100%; height: 100%; display: block; }
.lx-land { display: none; }

/* —— pinned primary CTA in the resting bar —— */
.lx-add {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 0;
  font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: #1a1305; background: linear-gradient(180deg, #ffe392, var(--gold)); border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 6px 20px rgba(255,200,80,.22), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .16s ease, box-shadow .2s ease, filter .2s ease; white-space: nowrap;
}
.lx-add:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 9px 26px rgba(255,200,80,.32); }
.lx-add .lx-add-g { font-size: 13px; }
.lx-dock.open .lx-add { display: none; }       /* search input takes the bar when the omni opens */

/* —— in-omni control strip: toggles + gated experimental features —— */
.lx-controls { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 9px 4px; }
.lx-ctl {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; background: rgba(255,255,255,.04);
  font-family: var(--display); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--hud);
  border: 1px solid rgba(255,255,255,.13); border-radius: 100px; padding: 9px 14px; transition: all .16s ease;
}
.lx-ctl .cg { font-size: 13px; opacity: .9; }
.lx-ctl:hover { border-color: rgba(255,216,107,.5); background: rgba(255,216,107,.06); color: #fff; }
.lx-ctl.on { border-color: var(--gold); background: rgba(255,216,107,.14); color: var(--gold); box-shadow: 0 0 18px rgba(255,216,107,.14); }
.lx-ctl.exp { border-color: rgba(183,198,255,.32); color: var(--ice); }
.lx-ctl.exp:hover { border-color: var(--ice); background: rgba(183,198,255,.08); color: #fff; }
.lx-beta { font-size: 8px; letter-spacing: .14em; opacity: .7; border: 1px solid currentColor; border-radius: 5px; padding: 1px 4px; margin-left: 6px; }

/* —— bottom-sheet grab handle: a mobile-only slide-up affordance (desktop has no drag-sheet) —— */
.lx-grab { display: none; width: 38px; height: 4px; border-radius: 100px; margin: 9px auto 2px; background: rgba(255,255,255,.22); }
@media (max-width: 560px) { .lx-dock.open .lx-grab { display: block; } }

/* ===========================================================================
   LIGHT A STAR — the omnibar expands into the claim flow (claim2.js)
   The full-screen #flow overlay is retired: claim2.js's #flowBody (the step
   machine) and its #flowBack / #flowMin / #flowClose controls are relocated by
   search.js into the dock, and the dock gains `.light`. The bar IS the form.
   =========================================================================== */

/* dock header in light mode: ← back · STEP LABEL · ×  (the relocated flow controls) */
/* light mode keeps natural top→bottom order (header, then form) — even on mobile, where
   .lx-dock.open is column-reverse for the search results. The header must stay on top. */
.lx-dock.light { flex-direction: column; }

.lx-lighthead { display:none; align-items:center; gap:10px; padding:13px 15px 7px; }
.lx-dock.light .lx-lighthead { display:flex; }
.lx-lighthead #flowMin { flex:1; text-align:center; }            /* centered step label (.flow-min) */
.lx-lighthead #flowBack { order:0; flex:0 0 auto; }
.lx-lighthead #flowClose { order:2; flex:0 0 auto; }

/* in light mode the search readout + results step aside for the form */
.lx-dock.light .lx-readout { display:none; }
.lx-dock.light .lx-scroll,
.lx-dock.light .lx-foot,
.lx-dock.light .lx-savebar { display:none; }

/* the body grows to hold the form (overrides .lx-dock.open .lx-body via source order) */
.lx-dock.light .lx-body { max-height:min(76vh, 680px); overflow:hidden; }

/* the relocated claim panel: was a fixed bottom sheet → now flows inside the dock.
   neutralize the overlay positioning, the 46px top gap, and the dark scrim (the
   dock already provides the glass surface). */
/* the relocated claim body lives in the dock but must NOT exist for hit-testing unless the
   claim flow is actually open — otherwise its empty box swallows taps on the resting readout. */
.lx-dock:not(.light) #flowBody { display:none; }
.lx-dock.light #flowBody {
  position:static; inset:auto; left:auto; right:auto; bottom:auto;
  transform:none !important; animation:none !important;   /* kill the .stage-panel translateX(-50%) centering — it lives in the dock now */
  max-height:min(72vh, 640px); width:100%; margin:0;
  padding:8px 18px calc(env(safe-area-inset-bottom,16px) + 16px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:none;
  /* pay-step header clip (review shot 15): when a tall step scrolls, the active prompt
     ("Give <name> to a real star") must settle fully below the sticky light-header —
     claim2 scrolls the prompt into view; these paddings give it breathing room. */
  scroll-padding-top: 12px;
}
.lx-dock.light #flowBody .cv-prompt { scroll-margin-top: 12px; }
/* the pay step seats focus on the headline (never an editable — the mobile keyboard
   must not pop uninvited at the purchase moment); no ring for that programmatic seat. */
.lx-dock.light #flowBody .cv-prompt[tabindex="-1"]:focus { outline: none; }

/* P0-7: during placement on touch, the SKY is the instrument — collapse the sheet so
   at least ~60% of the viewport is tappable sky instead of panel + dark Earth-ground.
   The panel's own content (readout, whisper, buttons) scrolls within the slim band. */
@media (pointer: coarse) {
  body.placing .lx-dock.light #flowBody { max-height: min(32vh, 300px); }
}

/* the in-sign offer inside the whisper ("take my light to the nearest <sign> star →") */
.real-whisper .rw-suggest { display: block; margin-top: 7px; }
.lx-dock.light #flowBody > .step,
.lx-dock.light #flowBody > .done,
.lx-dock.light #flowBody > .profile,
.lx-dock.light #flowBody > .signin { width:100%; max-width:none; }

/* the headline is sized for a full screen; trim it for the dock so the form breathes */
.lx-dock.light #flowBody .q { font-size:clamp(20px, 5.2vw, 25px); margin-bottom:6px; }
.lx-dock.light #flowBody .explain { font-size:13.5px; margin:5px auto 14px; }
.lx-dock.light #flowBody .flow-foot { margin-top:18px; }

/* ===========================================================================
   CONVERSATIONAL FLOW — the claim ritual as a single stack inside the omnibar:
   finished steps lock in as chips (the "trail") above the live active step. The
   dock grows + scrolls; each new step rises in. Tap a chip to jump back + change it.
   =========================================================================== */
.lx-dock.light #flowBody .cv { display:flex; flex-direction:column; gap:9px; padding-top:2px; }
.cv-ctx { font-size:11.5px; letter-spacing:.02em; color:var(--ice); opacity:.9; padding:2px 2px 1px; }
.cv-ctx b { color:#fff; font-weight:600; }
.cv-trail { display:flex; flex-direction:column; gap:6px; }
.cv-chip {
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:13px;
  padding:9px 13px; transition:border-color .15s ease, background .15s ease;
  animation:cvUp .3s cubic-bezier(.2,.8,.2,1);
}
.cv-chip::before { content:'◉'; color:var(--gold); font-size:10px; opacity:.85; }
.cv-chip:hover { border-color:rgba(255,216,107,.35); background:rgba(255,216,107,.05); }
.cv-k { flex:0 0 auto; min-width:50px; font-family:var(--display); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--hud); opacity:.6; }
.cv-v { flex:1; min-width:0; color:#f3f5ff; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-edit { flex:0 0 auto; font-family:var(--display); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ice); opacity:0; transition:opacity .15s ease; }
.cv-chip:hover .cv-edit { opacity:.8; }
.cv-active { animation:cvUp .34s cubic-bezier(.2,.8,.2,1); }
@keyframes cvUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
/* the active step, compact + breathing for the bar (overrides the full-screen sizing above) */
.lx-dock.light #flowBody .cv-active .step { width:100%; max-width:none; padding:2px 0 0; }
.lx-dock.light #flowBody .cv-active .q { font-size:clamp(18px, 4.6vw, 22px); margin:2px 0 4px; }
.lx-dock.light #flowBody .cv-active .explain { font-size:13px; margin:4px 0 12px; opacity:.72; }
.lx-dock.light #flowBody .cv-active .choices { gap:8px; }
.lx-dock.light #flowBody .cv-active .flow-foot { margin-top:14px; }

/* —— NATIVE COMMAND-BAR FLOW: the omnibar itself is the input surface —— */
.cv-ask { display:flex; flex-direction:column; gap:12px; text-align:left; }
.cv-prompt { font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:.01em; color:#fff; line-height:1.25; }
.cv-prompt .cv-sub { display:block; font-family:var(--body); font-size:12.5px; font-weight:400; color:var(--hud); opacity:.66; margin-top:3px; }
/* composer row — the bar morphs into this question's field */
.cv-inrow { display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,216,107,.22); border-radius:14px; padding:11px 11px 11px 15px;
  transition:border-color .18s ease, box-shadow .18s ease; }
.cv-inrow:focus-within { border-color:rgba(255,216,107,.55); box-shadow:0 0 0 3px rgba(255,216,107,.10); }
.cv-ig { flex:0 0 auto; color:var(--gold); font-size:16px; opacity:.92; }
.cv-input { flex:1; min-width:0; background:none; border:0; outline:none; color:#fff; font-family:var(--body); font-size:17px; }
.cv-input::placeholder { color:rgba(255,248,224,.36); }
.cv-input.ta { resize:none; line-height:1.45; padding-top:2px; }
.cv-tag { flex:0 0 auto; font-family:ui-monospace,'Space Mono',monospace; font-size:11px; letter-spacing:.02em; white-space:nowrap; }
.cv-tag.ok { color:#8be0a0; } .cv-tag.bad { color:#ff9a9a; } .cv-tag.wait { color:var(--ice); opacity:.6; }
.cv-go { flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:0; cursor:pointer; font-size:16px; line-height:1;
  background:linear-gradient(180deg,#ffe392,var(--gold)); color:#1a1305; transition:transform .15s ease, opacity .15s ease, background .15s ease; }
.cv-go:disabled { opacity:.34; cursor:default; background:rgba(255,255,255,.08); color:var(--hud); }
.cv-go:not(:disabled):hover { transform:translateY(-1px); }
.cv-aux { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--hud); opacity:.72; }
.cv-aux .cv-domain b { color:var(--ice); font-weight:600; }
.cv-aux .cv-dot { opacity:.4; }
.cv-aux .linklike { font-size:12px; }
/* option rows — command-palette style choices */
.cv-opts { display:flex; flex-direction:column; gap:7px; }
.cv-opt { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:13px; padding:12px 14px;
  transition:border-color .15s ease, background .15s ease, transform .12s ease; }
.cv-opt:hover, .cv-opt.sel { border-color:rgba(255,216,107,.42); background:rgba(255,216,107,.06); transform:translateX(2px); }
.cv-opt-g { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--gold); background:rgba(255,216,107,.08); font-size:15px; }
.cv-opt-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cv-opt-t b { font-size:14.5px; color:#fff; font-weight:500; }
.cv-opt-t i { font-size:12px; color:var(--hud); opacity:.66; font-style:normal; }
.cv-opt-go { flex:0 0 auto; color:var(--gold); opacity:0; transition:opacity .15s ease, transform .15s ease; }
.cv-opt:hover .cv-opt-go { opacity:.85; }
/* colour swatches */
.cv-swatches { display:flex; gap:9px; align-items:center; }
.cv-swatches .hue { width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; transition:transform .15s ease, border-color .15s ease; }
.cv-swatches .hue.sel { border-color:#fff; transform:scale(1.12); }
.cv-swatches .hue:hover { transform:scale(1.08); }
/* the inline slug editor + real-star whisper sit quietly under the composer */
.cv-active .slugedit:not([hidden]) { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; margin-top:2px; }
.cv-active .real-whisper { margin-top:2px; }

/* ===========================================================================
   ZENITH MODE — the overhead-beam readout IS the omnibar (no floating panel).
   When the beam layer is on, the dock expands and hosts zenith.js's live census.
   =========================================================================== */
.lx-dock.zenith .lx-readout,
.lx-dock.zenith .lx-scroll,
.lx-dock.zenith .lx-foot,
.lx-dock.zenith .lx-savebar,
.lx-dock.zenith #flowBody,
.lx-dock.zenith .lx-lighthead { display:none; }
.lx-dock.light .lx-zen { display:none; }   /* claim form + beam readout never overlap */
.lx-zen { animation:cvUp .3s cubic-bezier(.2,.8,.2,1); padding-bottom:4px; }

/* the empty retired overlay must never intercept taps (its children now live in the dock) */
.flow.light-hosted { display:none !important; }

/* bottom chrome (ship pill + satellites layer) steps aside so the expanded form is clean —
   mirrors how the old full-screen flow cleared the HUD. */
body.locator-light #shipLaunch,
body.locator-light .sat-toggle,
body.locator-light .sat-panel,
body.locator-light .sat-status {
  opacity:0 !important; pointer-events:none; transition:opacity .25s ease;
}

/* —— MOBILE: native bottom-sheet feel + light-mode claim-form sizing (both blocks, unified) —— */
@media (max-width: 560px) {
  #locator { padding: 0 0 calc(env(safe-area-inset-bottom,0px)); }
  .lx-dock.open { border-radius: 22px 22px 0 0; border-bottom: 0; }
  body.locator-open::after {
    content: ""; position: fixed; inset: 0; z-index: 17; pointer-events: none;
    background: radial-gradient(130% 78% at 50% 100%, rgba(2,3,12,.55), transparent 72%);
  }
  .lx-add { padding: 9px 12px; font-size: 10px; }
  .lx-dock.light .lx-body { max-height:82vh; }
  .lx-dock.light #flowBody { max-height:78vh; }
}

/* ===========================================================================
   MOBILE POLISH PASS (audit) — appended last so it wins the cascade.
   Keeps the resting readout's primary CTA + live name reachable, and brings
   every interactive target up to a thumb-friendly hit size on touch.
   =========================================================================== */
@media (max-width: 560px) {
  /* #1 BLOCKER: in an anchored dock the coords + chip pushed Add-star & the search
     glyph off-screen. Drop the coords, cap the chip, keep CTA + glyph fixed-size. */
  .lx-dock.anchored .lx-coords { display: none; }
  .lx-dock.anchored .lx-chip { max-width: 40vw; }
  /* #5: reclaim ~70px so the live constellation name ("Serpens Cauda") fits —
     the Add-star button goes icon-only on mobile. */
  .lx-add { padding: 0; width: 44px; height: 44px; justify-content: center; border-radius: 12px; gap: 0; }
  .lx-add .lx-add-t { display: none; }
  .lx-add .lx-add-g { font-size: 17px; }
  /* tap targets ≥44px */
  .lx-glyph { width: 44px; height: 44px; }
  .rail-fly { min-height: 44px; }
  .lx-chip .x { width: 24px; height: 24px; }
  /* lens chip strip: a fade hint that it scrolls horizontally (no hard cut) */
  .lx-lenses { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
               mask-image: linear-gradient(90deg, #000 90%, transparent); }
}