/* exp-onboarding.css
   Soft-Modernist reskin for the TROLLS onboarding and entry screens, in the same
   Stitch design language already shipped on the platform front door (see stitch.css).
   Warm off-white surfaces, one confident amber primary, Plus Jakarta Sans display +
   Be Vietnam Pro body, oversized 24px cards, fully rounded pill buttons and a gentle
   "soft lift" depth. Loaded after the base sheets so it takes priority for these roots.

   Additive and self-contained: every rule is scoped to the real component root, never
   to .platform-screen (the marketing landing is .platform-screen and is already styled;
   it must not be touched here). No file is edited, only this one is added.

   Screens covered, each keyed on its live root:
     1. First-run "how your day works" intro carousel   -> .dayintro-overlay / .dayintro-card   (LIGHT)
     2. Resumable guided tour spotlight + coach mark     -> .tutorial-overlay + .fx-spotlight-*   (LIGHT card on dim)
     3. Join by code (crew code, join code, login)       -> .join-screen                          (LIGHT)
     4. Select experience / mode choice + age gate       -> .register-choice and siblings         (LIGHT)
     5. Pre-sail / waiting room                           -> .presail                              (DARK immersive)

   Amber accent is read from the ambient theme via var(--amber) so the look carries across
   every pack (universal rule), with the Stitch amber #f59e0b as the fallback. Accent used
   as text on white falls back to a darker amber (#8a5a00) for guaranteed contrast; text on
   an amber fill is a dark ink. No em dashes or en dashes anywhere. */

/* Shared onboarding tokens. Declared on each root below via composition, kept here as a
   reference for the fixed Soft-Modernist values reused throughout this sheet:
     surface        #f9f9f7   (warm off white stage)
     surface-variant#f1f1ef
     card           #ffffff
     hairline       #e2e8f0
     ink            #1e293b   (deep slate anchor)
     muted          #475569
     accent fill    var(--amber, #f59e0b)
     accent text    #8a5a00   (on white)
     on accent      #3a2400   (ink on amber)
     radius card    24px  / inner 16px / pill 9999px
     soft lift      0 4px 20px rgba(0,0,0,0.05)
     dark stage     #0f172a -> #080b16
     on dark        #f8fafc  / muted on dark #94a3b8
     dark hairline  rgba(248,250,252,0.10)
     scrim          rgba(15,23,42,0.9)
*/

/* =====================================================================================
   1. FIRST RUN INTRO CAROUSEL  (day-intro.js)
   Root: .overlay.dayintro-overlay  >  .overlay-card.dayintro-card
   Inner: .dayintro-head (.panel-title + .menu-close), .dayintro-step
          (.dayintro-emoji, .dayintro-title, .dayintro-text), .dayintro-dots (.dayintro-dot.on),
          .dayintro-actions (.btn-small skip + .btn-amber next)
   The base .overlay is a dark scrim; here it becomes a soft warm light stage so the card
   floats on an airy off white background as in the mock.
   ===================================================================================== */
.overlay.dayintro-overlay {
  background: rgba(249, 249, 247, 0.94);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  align-items: center;
}

.dayintro-overlay .dayintro-card {
  max-width: 27rem;
  background: #ffffff;
  border: 1px solid #eef0ee;
  border-radius: 24px;
  padding: 1.5rem 1.5rem 1.35rem;
  box-shadow: 0 1px 3px rgba(30, 41, 59, 0.05), 0 18px 44px rgba(30, 41, 59, 0.10);
  color: #1e293b;
  text-align: center;
}

.dayintro-overlay .dayintro-head {
  align-items: flex-start;
  margin-bottom: 0.4rem;
}
.dayintro-overlay .panel-title {
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1e293b;
  text-transform: none;
  font-size: 1.35rem;
  text-align: left;
}
/* The skip close becomes a soft round ghost control with a comfortable tap target. */
.dayintro-overlay .menu-close {
  min-width: 44px;
  min-height: 44px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #f9f9f7;
  color: #475569;
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.dayintro-overlay .menu-close:hover { background: #f1f1ef; border-color: #cbd5e1; }
.dayintro-overlay .menu-close:active { transform: scale(0.96); }

/* The step body. The emoji sits inside a large soft tinted illustration tile that stands
   in for the illustrated scene card in the mock. */
.dayintro-overlay .dayintro-step {
  min-height: 12rem;
  padding: 0.25rem 0 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dayintro-overlay .dayintro-emoji {
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  line-height: 1;
  border-radius: 24px;
  margin-bottom: 1.1rem;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0) 60%),
    linear-gradient(180deg, #fdf1dd 0%, #f6f3ee 100%);
  border: 1px solid #f1e6d2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.dayintro-overlay .dayintro-title {
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1e293b;
  font-size: 1.4rem;
  margin: 0.15rem 0 0.5rem;
}
.dayintro-overlay .dayintro-text {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #475569;
  font-size: 1rem;
  line-height: 1.55;
  max-width: 23rem;
}

/* Progress dots. The active dot grows into a short amber pill. */
.dayintro-overlay .dayintro-dots { margin: 1rem 0 1.1rem; gap: 8px; }
.dayintro-overlay .dayintro-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #e2e8f0;
  transition: width 0.2s ease, background 0.2s ease;
}
.dayintro-overlay .dayintro-dot.on {
  width: 26px;
  background: var(--amber, #f59e0b);
}

/* Actions. Skip is a quiet text button, next is a confident amber pill. */
.dayintro-overlay .dayintro-actions { gap: 0.75rem; }
.dayintro-overlay .btn-small {
  min-height: 44px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 600;
  padding: 0.6rem 1.1rem;
}
.dayintro-overlay .btn-small:hover { background: #f1f1ef; color: #1e293b; }
.dayintro-overlay .btn-amber {
  min-height: 52px;
  border-radius: 9999px;
  border: none;
  background: var(--amber, #f59e0b);
  color: var(--on-amber, #3a2400);
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: 0;
  padding: 0.85rem 1.6rem;
  box-shadow: 0 1px 2px rgba(133, 83, 0, 0.18), 0 12px 26px rgba(245, 158, 11, 0.26);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.dayintro-overlay .btn-amber:hover { filter: brightness(1.03); }
.dayintro-overlay .btn-amber:active { transform: translateY(1px) scale(0.99); }
.dayintro-overlay .btn-amber:focus-visible,
.dayintro-overlay .btn-small:focus-visible,
.dayintro-overlay .menu-close:focus-visible {
  outline: 3px solid var(--amber, #f59e0b);
  outline-offset: 2px;
}

/* =====================================================================================
   2. GUIDED TOUR SPOTLIGHT + COACH MARK  (tutorial.js + effects.js spotlight)
   Roots (siblings appended to body):
     .tutorial-overlay  >  .tutorial-caption (.tut-speaker, .tut-text, .tut-advance),
                           .tutorial-stage (.tut-practice, .tut-row, .tut-check),
                           .tutorial-skip.btn-small
     .fx-spotlight-overlay > .fx-spotlight-ring, .fx-spotlight-pointer
   The caption becomes a white Soft-Modernist coach mark card; the ring keeps its amber glow.
   ===================================================================================== */
.tutorial-overlay {
  background: radial-gradient(circle at 50% 34%, rgba(15, 23, 42, 0.62), rgba(8, 11, 22, 0.9));
}

.tutorial-overlay .tutorial-caption {
  width: min(560px, 92vw);
  background: #ffffff;
  border: 1px solid #eef0ee;
  border-radius: 24px;
  padding: 1.35rem 1.4rem 1.2rem;
  color: #1e293b;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 24px 60px rgba(8, 11, 22, 0.28);
}

/* The speaker line reads as a small amber "feature tour" style eyebrow label. */
.tutorial-overlay .tut-speaker {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a5a00;
  margin-bottom: 0.5rem;
}
.tutorial-overlay .tut-text {
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1e293b;
  font-size: 1.3rem;
  line-height: 1.3;
}
.tutorial-overlay .tut-advance {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #64748b;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  margin-top: 0.85rem;
}

/* The practice stage controls. */
.tutorial-overlay .tut-practice.btn-amber,
.tutorial-overlay .btn-amber {
  min-height: 52px;
  border-radius: 9999px;
  border: none;
  background: var(--amber, #f59e0b);
  color: var(--on-amber, #3a2400);
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 700;
  padding: 0.85rem 1.6rem;
  box-shadow: 0 1px 2px rgba(133, 83, 0, 0.2), 0 12px 26px rgba(245, 158, 11, 0.28);
}
.tutorial-overlay .tut-row {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 6px solid var(--amber, #f59e0b);
  border-radius: 16px;
  color: #1e293b;
  padding: 0.9rem 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.tutorial-overlay .tut-check { color: #0b7a4b; }

/* The skip control is a quiet pill button, aligned to the caption foot. */
.tutorial-overlay .tutorial-skip.btn-small {
  min-height: 44px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.92);
  color: #334155;
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 600;
  padding: 0.55rem 1.2rem;
}
.tutorial-overlay .tutorial-skip.btn-small:hover { background: #ffffff; border-color: #cbd5e1; }
.tutorial-overlay .btn-amber:focus-visible,
.tutorial-overlay .tutorial-skip.btn-small:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* The spotlight ring keeps a warm amber glow around the highlighted target. */
.fx-spotlight-ring {
  border-radius: 18px;
  outline: 3px solid var(--amber, #f59e0b);
  box-shadow: 0 0 0 9999px rgba(8, 11, 22, 0.72), 0 0 26px 6px rgba(245, 158, 11, 0.55) inset;
}
.fx-spotlight-pointer { color: var(--amber, #f59e0b); }

/* =====================================================================================
   3. JOIN BY CODE  (join.js)
   Root: .join-screen
   Inner: .panel-title, .help-row (+ .f-label + help tip), .f-input (crew code / join code /
          password / email), .join-msg, .join-sub, .btn-amber.big (primary),
          .btn-small / .register-link (secondary), backButton (.btn-small)
   Note: the crew/join code is a single .f-input, not a segmented six box entry, and there is
   no illustration node. See the report for the new hooks those would need.
   ===================================================================================== */
.join-screen {
  max-width: 30rem;
  gap: 0.5rem;
  color: #1e293b;
}
.join-screen .panel-title {
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1e293b;
  text-transform: none;
  font-size: 1.6rem;
  text-align: center;
  margin: 0.25rem 0 0.75rem;
}
.join-screen .f-label {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 600;
  color: #475569;
  font-size: 0.9rem;
  margin-top: 0.65rem;
}

/* Inputs: crisp white fields, generous radius, amber focus ring. The crew code and join
   code inputs are enlarged and letter spaced so a short code reads like a key entry. */
.join-screen .f-input {
  min-height: 52px;
  background: #ffffff;
  color: #1e293b;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 0.85rem 1rem;
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-size: 1rem;
}
.join-screen .f-input::placeholder { color: #94a3b8; }
.join-screen .f-input[type='text'] {
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-align: center;
}
.join-screen .f-input:focus {
  outline: none;
  border-color: var(--amber, #f59e0b);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.join-screen .join-msg {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #8a5a00;
  font-size: 0.9rem;
  min-height: 20px;
  text-align: center;
}
.join-screen .join-sub {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #64748b;
  font-size: 0.82rem;
  text-align: center;
}
.join-screen .help-row { align-items: center; gap: 0.4rem; }

/* Primary join action: a full width confident amber pill with soft lift. */
.join-screen .btn-amber.big,
.join-screen .btn-amber {
  width: 100%;
  min-height: 56px;
  border-radius: 9999px;
  border: none;
  background: var(--amber, #f59e0b);
  color: var(--on-amber, #3a2400);
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0;
  margin-top: 0.75rem;
  box-shadow: 0 1px 2px rgba(133, 83, 0, 0.18), 0 14px 30px rgba(245, 158, 11, 0.28);
  transition: transform 0.16s ease, filter 0.16s ease;
}
.join-screen .btn-amber:hover { filter: brightness(1.03); }
.join-screen .btn-amber:active { transform: translateY(1px) scale(0.995); }

/* Secondary actions: quiet, centred text buttons so there is one primary per screen. */
.join-screen .btn-small {
  min-height: 44px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.82rem;
  padding: 0.6rem 1rem;
  margin: 0.35rem auto 0;
}
.join-screen .btn-small:hover { background: #f1f1ef; color: #1e293b; }
.join-screen .register-link { text-transform: none; letter-spacing: 0; }
.join-screen .btn-amber:focus-visible,
.join-screen .btn-small:focus-visible {
  outline: 3px solid var(--amber, #f59e0b);
  outline-offset: 2px;
}

/* =====================================================================================
   4. SELECT EXPERIENCE / MODE CHOICE + AGE GATE  (register-select.js)
   Roots: .register-choice, .register-age-gate, .register-minor-block, .register-sensitivity
   Inner: .panel-title, .panel-note, .register-cards, .register-card (+ .register-card-adult)
          with .register-card-title / .register-card-note, .register-gate-actions,
          .register-themes-note, .register-theme-row (.on/.off) with .register-theme-name /
          .register-theme-state, .btn-amber.big-tap, .btn-small.big-tap
   Note: the live cards have no cover image and no separate recommended / advanced badge or
   age chip. The two modes are distinguished by tone; the age note lives in .register-card-note
   and .register-themes-note. See the report for the badge / cover / age chip hooks.
   ===================================================================================== */
.register-choice,
.register-age-gate,
.register-minor-block,
.register-sensitivity {
  max-width: 38rem;
  color: #1e293b;
}
.register-choice .panel-title,
.register-age-gate .panel-title,
.register-minor-block .panel-title,
.register-sensitivity .panel-title {
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1e293b;
  text-transform: none;
  font-size: 1.75rem;
  text-align: center;
}
.register-choice .panel-note,
.register-age-gate .panel-note,
.register-minor-block .panel-note,
.register-sensitivity .panel-note {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #475569;
  font-size: 1rem;
  line-height: 1.55;
  text-align: center;
}

.register-cards { gap: 1.1rem; margin-top: 1.25rem; }

/* Each mode is a large selectable white card with a soft lift, rounded to 24px. */
.register-choice .register-card {
  gap: 0.55rem;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #ffffff;
  padding: 1.35rem 1.35rem 1.4rem;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(30, 41, 59, 0.04), 0 12px 30px rgba(30, 41, 59, 0.07);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.register-choice .register-card:hover,
.register-choice .register-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--amber, #f59e0b);
  box-shadow: 0 2px 6px rgba(30, 41, 59, 0.06), 0 20px 44px rgba(245, 158, 11, 0.16);
  outline: none;
}
/* The adult / advanced card carries a cooler slate accent so the two paths read apart. */
.register-choice .register-card-adult { border-color: #cdd5e1; }
.register-choice .register-card-adult:hover,
.register-choice .register-card-adult:focus-visible {
  border-color: #64748b;
  box-shadow: 0 2px 6px rgba(30, 41, 59, 0.06), 0 20px 44px rgba(84, 95, 115, 0.18);
}

.register-choice .register-card-title {
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.3rem;
  color: #1e293b;
}
.register-choice .register-card-adult .register-card-title { color: #1e293b; }
.register-choice .register-card-note {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #475569;
  font-size: 0.98rem;
  line-height: 1.5;
  opacity: 1;
}

/* Age gate actions and the minor block share the pill button language. */
.register-gate-actions { gap: 0.75rem; margin-top: 1.25rem; }
.register-themes-note {
  color: #475569;
  opacity: 1;
  background: #f1f1ef;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 0.8rem 1rem;
}

.register-choice .btn-amber,
.register-age-gate .btn-amber,
.register-minor-block .btn-amber {
  min-height: 56px;
  border-radius: 9999px;
  border: none;
  background: var(--amber, #f59e0b);
  color: var(--on-amber, #3a2400);
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 0.9rem 1.6rem;
  box-shadow: 0 1px 2px rgba(133, 83, 0, 0.18), 0 14px 30px rgba(245, 158, 11, 0.26);
}
.register-choice .btn-amber:hover,
.register-age-gate .btn-amber:hover,
.register-minor-block .btn-amber:hover { filter: brightness(1.03); }
.register-age-gate .btn-small,
.register-minor-block .btn-small {
  min-height: 48px;
  border-radius: 9999px;
  border: 1.5px solid #cdd5e1;
  background: #ffffff;
  color: #334155;
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 600;
  padding: 0.7rem 1.4rem;
}
.register-age-gate .btn-small:hover,
.register-minor-block .btn-small:hover { border-color: #94a3b8; background: #f9f9f7; }

/* Sensitivity toggle rows: soft white pills with a clear on / softened state chip. */
.register-sensitivity .register-theme-row {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  color: #1e293b;
  padding: 0.85rem 1rem;
  min-height: 56px;
  box-shadow: 0 1px 2px rgba(30, 41, 59, 0.04);
}
.register-sensitivity .register-theme-row.off { opacity: 0.75; }
.register-sensitivity .register-theme-name {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 600;
  color: #1e293b;
}
.register-sensitivity .register-theme-state {
  border-radius: 9999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.register-sensitivity .register-theme-row.on .register-theme-state {
  background: var(--amber, #f59e0b);
  color: var(--on-amber, #3a2400);
}
.register-sensitivity .register-theme-row.off .register-theme-state {
  background: #f1f1ef;
  color: #475569;
}

.register-choice .register-card:focus-visible,
.register-choice .btn-amber:focus-visible,
.register-age-gate .btn-amber:focus-visible,
.register-age-gate .btn-small:focus-visible,
.register-minor-block .btn-amber:focus-visible,
.register-sensitivity .register-theme-row:focus-visible {
  outline: 3px solid var(--amber, #f59e0b);
  outline-offset: 2px;
}

/* =====================================================================================
   5. PRE-SAIL / WAITING ROOM  (presail.js)   DARK IMMERSIVE
   Root: .presail
   Inner: .panel-title, .panel-note, .presail-rows, .presail-row (.presail-row-title,
          .presail-row-note, .presail-row-actions), .presail-warn, .presail-offset,
          .btn-amber (primary), .btn-secondary / .btn-small (utility)
   This is the "about to begin" moment, so it becomes a deep slate immersive stage with an
   amber primary. The live DOM is a checklist: it has no countdown, crew avatar strip or
   vessel / distance stat cards, so those pieces from the mock are not present here. See the
   report for the new hooks they would need.
   ===================================================================================== */
.presail {
  position: relative;
  color: #f8fafc;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0) 55%),
    linear-gradient(180deg, #0f172a 0%, #0b1120 55%, #080b16 100%);
  border: 1px solid rgba(248, 250, 252, 0.08);
  border-radius: 24px;
  padding: 1.75rem 1.4rem 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.presail .panel-title {
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f8fafc;
  text-transform: none;
  font-size: 1.75rem;
  line-height: 1.15;
}
.presail > .panel-note {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #94a3b8;
  font-size: 1rem;
  line-height: 1.55;
  margin-top: 0.35rem;
}

.presail .presail-rows { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.4rem; }

/* Each checklist step is a dark elevated glass card with a soft hairline. */
.presail .presail-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: rgba(248, 250, 252, 0.045);
  border: 1px solid rgba(248, 250, 252, 0.1);
  border-radius: 16px;
  padding: 1rem 1.1rem;
}
.presail .presail-row-title {
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f8fafc;
  font-size: 1.05rem;
}
.presail .presail-row-note {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.5;
}
.presail .presail-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

/* The data loss warning reads as an amber tinted caution note. */
.presail .presail-warn {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #fde3b3;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Primary action pills glow amber; utility buttons are quiet outline pills. */
.presail .btn-amber {
  min-height: 52px;
  border-radius: 9999px;
  border: none;
  background: var(--amber, #f59e0b);
  color: var(--on-amber, #3a2400);
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 700;
  padding: 0.8rem 1.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 30px rgba(245, 158, 11, 0.32);
  transition: transform 0.16s ease, filter 0.16s ease;
}
.presail .btn-amber:hover { filter: brightness(1.05); }
.presail .btn-amber:active { transform: translateY(1px) scale(0.99); }
.presail .btn-secondary,
.presail .btn-small {
  min-height: 48px;
  border-radius: 9999px;
  border: 1.5px solid rgba(248, 250, 252, 0.28);
  background: transparent;
  color: #f8fafc;
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 600;
  padding: 0.65rem 1.3rem;
}
.presail .btn-secondary:hover,
.presail .btn-small:hover { border-color: var(--amber, #f59e0b); color: #fde3b3; }

/* The schedule offset input sits on the dark stage. */
.presail .presail-offset,
.presail .f-input {
  min-height: 48px;
  background: rgba(248, 250, 252, 0.06);
  color: #f8fafc;
  border: 1.5px solid rgba(248, 250, 252, 0.2);
  border-radius: 14px;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
}
.presail .presail-offset:focus,
.presail .f-input:focus {
  outline: none;
  border-color: var(--amber, #f59e0b);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28);
}
.presail .btn-amber:focus-visible,
.presail .btn-secondary:focus-visible,
.presail .btn-small:focus-visible {
  outline: 3px solid var(--amber, #f59e0b);
  outline-offset: 2px;
}

/* =====================================================================================
   Reduced motion: drop the lift and glow transitions, keep every state legible.
   ===================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dayintro-overlay .btn-amber,
  .dayintro-overlay .dayintro-dot,
  .tutorial-overlay .btn-amber,
  .join-screen .btn-amber,
  .register-choice .register-card,
  .register-choice .btn-amber,
  .presail .btn-amber {
    transition: none !important;
  }
  .register-choice .register-card:hover,
  .register-choice .register-card:focus-visible,
  .presail .btn-amber:active,
  .dayintro-overlay .btn-amber:active,
  .join-screen .btn-amber:active {
    transform: none !important;
  }
}

/* =====================================================================================
   6. STRUCTURAL MOCK ELEMENTS  (Stitch stitch4 onboarding set)
   The CSS reskin above shipped first; these rules style the DOM hooks added in the same
   pass to bring the three screens in line with their Stitch mocks. Additive: every rule
   is scoped to a real component root, reuses the Soft-Modernist tokens documented at the
   top of this sheet, and touches no other screen. No em dashes or en dashes.

     3a. Join by code  -> .join-illustration + segmented .join-code-cells (join.js)
     4a. Choose your path -> .register-card-cover / -badge / -age (register-select.js)
     5a. Waiting room  -> .presail-eyebrow / -status / -ready / -crew / -stats (presail.js)
   ===================================================================================== */

/* ---- 3a. Join by code: friendly illustration + segmented six box code ---------------- */
/* The illustration is a soft tinted tile holding the inline key SVG, echoing the mock's
   "here is your key to the crew" scene without any external asset. */
.join-screen .join-illustration {
  width: 100%;
  max-width: 18rem;
  margin: 0.25rem auto 0.6rem;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0) 60%),
    linear-gradient(180deg, #fdf1dd 0%, #f6f3ee 100%);
  border: 1px solid #f1e6d2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.join-screen .join-illustration svg {
  width: 66%;
  height: auto;
  max-height: 78%;
}

/* The crew code entry: the real input (kept as the source of truth) is laid transparently
   over six cells that mirror each typed character, so the field reads like a key entry. */
.join-screen .join-code-field {
  position: relative;
  margin: 0.15rem 0 0.35rem;
}
.join-screen .join-code-cells {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}
.join-screen .join-code-cell {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4;
  max-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: 1.5rem;
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(30, 41, 59, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.join-screen .join-code-cell.filled { border-color: var(--amber, #f59e0b); }
.join-screen .join-code-cell.active {
  border-color: var(--amber, #f59e0b);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
}
/* The overlaid input is invisible but fully interactive: taps and typing land here, the
   cells above reflect the value. Transparent so only the cells show. */
.join-screen .join-code-input,
.join-screen .join-code-input[type='text'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  letter-spacing: 0;
  text-align: center;
  opacity: 0;
  cursor: pointer;
}
.join-screen .join-code-input:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

/* ---- 4a. Choose your path: cover band, badge and age chip per mode card -------------- */
.register-choice .register-card {
  position: relative;
  overflow: hidden;
}
/* An accent tinted header band (packs may be art-less, so this is a colour band, not an
   image), with the badge bottom-left and a decorative glyph top-right, as in the mock. */
.register-choice .register-card-cover {
  position: relative;
  margin: -1.35rem -1.35rem 0.9rem;
  min-height: 92px;
  display: flex;
  align-items: flex-end;
  padding: 0.85rem 1rem;
  background:
    radial-gradient(130% 130% at 18% 0%, rgba(245, 158, 11, 0.28), rgba(245, 158, 11, 0) 62%),
    linear-gradient(160deg, #fdf1dd 0%, #f6ede0 55%, #f1e6d2 100%);
  border-bottom: 1px solid #f1e6d2;
}
.register-choice .register-card-adult .register-card-cover {
  background:
    radial-gradient(130% 130% at 18% 0%, rgba(120, 150, 190, 0.35), rgba(120, 150, 190, 0) 62%),
    linear-gradient(160deg, #1f2a44 0%, #263248 55%, #2f3b54 100%);
  border-bottom-color: rgba(84, 95, 115, 0.4);
}
.register-choice .register-card-cover-icon {
  position: absolute;
  top: 0.55rem;
  right: 0.85rem;
  font-size: 1.7rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.16));
}
.register-choice .register-card-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.34rem 0.82rem;
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--amber, #f59e0b);
  color: var(--on-amber, #3a2400);
  box-shadow: 0 2px 8px rgba(133, 83, 0, 0.25);
}
.register-choice .register-card-adult .register-card-badge {
  background: #bcd3ef;
  color: #17324f;
  box-shadow: 0 2px 8px rgba(23, 50, 79, 0.3);
}
/* A quiet age chip below the description. The labels are honest: family mode has no age
   gate (all ages); adult mode is the 18+ gated path, so it reads Ages 18+. */
.register-choice .register-card-age {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  border-radius: 9999px;
  padding: 0.5rem 0.92rem;
  background: #f1f1ef;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 600;
  font-size: 0.85rem;
}
.register-choice .register-card-adult .register-card-age {
  background: #eef2f8;
  border-color: #d5deea;
  color: #334155;
}

/* ---- 5a. Waiting room: eyebrow, status pill, calm ready state, crew strip, stats ----- */
.presail .presail-eyebrow {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber, #f59e0b);
  margin-bottom: 0.35rem;
}
.presail .presail-hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.35rem;
}
/* The status pill is a calm, honest label for the prep moment, not a live countdown. */
.presail .presail-status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.34);
  color: #fde3b3;
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.9rem;
}
.presail .presail-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: var(--amber, #f59e0b);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.22);
}
/* The calm "ready when you are" state stands in for the mock's countdown, because there is
   no single real start time to count down to. A reserved .presail-countdown style is kept
   below for a future when a real target time is wired; it is not rendered today. */
.presail .presail-ready {
  background: rgba(248, 250, 252, 0.045);
  border: 1px solid rgba(248, 250, 252, 0.1);
  border-radius: 16px;
  padding: 1rem 1.1rem;
}
.presail .presail-ready-title {
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #f8fafc;
  font-size: 1.3rem;
}
.presail .presail-ready-sub {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-top: 0.25rem;
}
/* Reserved for a real, known start time (not rendered today; see presail.js note). */
.presail .presail-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
}
.presail .presail-countdown-value {
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--amber, #f59e0b);
  font-variant-numeric: tabular-nums;
}

/* Crew gathering card + horizontally scrollable avatar strip, initials based. */
.presail .presail-crew-card {
  background: rgba(248, 250, 252, 0.045);
  border: 1px solid rgba(248, 250, 252, 0.1);
  border-radius: 16px;
  padding: 1rem 1.1rem;
}
.presail .presail-crew-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.presail .presail-crew-title {
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 700;
  color: #f8fafc;
  font-size: 1.05rem;
}
.presail .presail-crew-count {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 600;
  color: #94a3b8;
  font-size: 0.85rem;
}
.presail .presail-crew {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.presail .presail-crew-member {
  flex: 0 0 auto;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}
.presail .presail-crew-avatar {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: 1.25rem;
  color: #f8fafc;
  background: linear-gradient(160deg, rgba(248, 250, 252, 0.16), rgba(248, 250, 252, 0.06));
  border: 1.5px solid rgba(248, 250, 252, 0.18);
}
.presail .presail-crew-avatar.is-you {
  color: var(--on-amber, #3a2400);
  background: var(--amber, #f59e0b);
  border-color: var(--amber, #f59e0b);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
}
.presail .presail-crew-name {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #cbd5e1;
  font-size: 0.75rem;
  line-height: 1.2;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.presail .presail-crew-empty {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Stat cards from real data (crew size, chapter count). */
.presail .presail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.presail .presail-stat {
  background: rgba(248, 250, 252, 0.045);
  border: 1px solid rgba(248, 250, 252, 0.1);
  border-radius: 16px;
  padding: 0.9rem 1rem;
}
.presail .presail-stat-label {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}
.presail .presail-stat-value {
  font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--amber, #f59e0b);
  font-size: 1.9rem;
  line-height: 1.1;
  margin-top: 0.15rem;
}
.presail .presail-stat-sub {
  font-family: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  color: #cbd5e1;
  font-size: 0.82rem;
}

/* Reduced motion for the new interactive pieces. */
@media (prefers-reduced-motion: reduce) {
  .join-screen .join-code-cell { transition: none !important; }
}