/* Onboarding — shared/core styles. Loaded before any step CSS.
   Each step CSS file owns its own panel; this file owns shell chrome
   (progress bar, footer CTA, pick-toast, learn-disclosure) + tokens. */

:root {
  --bg:           #000000;
  --bg2:          #111111;
  --bg3:          #1A1A1A;
  --white:        #FAF7F2;
  --muted:        #B0ADA8;
  --muted2:       #7a7872;
  --coral:        #7C5CFF;
  --coral-soft:   rgba(124, 92, 255,0.12);
  --coral-border: rgba(124, 92, 255,0.25);
  --green:        #2A9D8F;
  --gold:         #D4A853;
  --card:         #111111;
  --subtle-border: rgba(255,255,255,0.10);
  --subtle-bg:     rgba(255,255,255,0.06);
  --font-display: 'Satoshi', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* shared motion easing */
  --ease-pick: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  background:var(--bg); color:var(--white);
  font-family:var(--font-body); min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── LOADING OVERLAY ─────────────────────────────────────────────────── */
#loading-screen {
  position:fixed; inset:0; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  z-index:999; transition:opacity 0.3s;
}
.spinner {
  width:32px; height:32px; border:3px solid var(--subtle-border);
  border-top-color:var(--coral); border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── PROGRESS BAR ────────────────────────────────────────────────────── */
#progress-bar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:calc(env(safe-area-inset-top) + 14px) 20px 14px;
  background:var(--bg);
  border-bottom:1px solid var(--subtle-border);
  display:flex; align-items:center; gap:12px;
}
.back-btn {
  width:36px; height:36px; border-radius:50%;
  background:var(--subtle-bg); border:1px solid var(--subtle-border);
  color:var(--muted); font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background 0.15s;
}
.back-btn:hover { background:var(--bg2); color:var(--white); }
.back-btn.hidden { visibility:hidden; pointer-events:none; }
.segments {
  flex:1; display:flex; gap:4px; align-items:center;
}
.seg {
  flex:1; height:3px; border-radius:2px;
  background:var(--subtle-border); transition:background 0.3s ease;
}
.seg.filled { background:var(--coral); }
.step-label {
  font-family:var(--font-mono); font-size:11px; color:var(--muted2);
  flex-shrink:0; min-width:40px; text-align:right;
}
#demo-badge {
  font-family:var(--font-mono); font-size:10px; color:var(--coral);
  background:rgba(124, 92, 255,0.10); border:1px solid rgba(124, 92, 255,0.25);
  border-radius:99px; padding:2px 8px; letter-spacing:0.08em; flex-shrink:0;
}

/* ── PANEL BASE ──────────────────────────────────────────────────────── */
.panel {
  display:none; min-height:100vh;
  padding:calc(env(safe-area-inset-top) + 70px) 0 140px;
  flex-direction:column;
}
.panel.active { display:flex; }

.panel-inner {
  width:100%; max-width:480px; margin:0 auto;
  padding:0 20px; flex:1;
}

/* Step header eyebrow — frames the whole flow as a journey.
   Each step JS sets data-eyebrow on the panel; CSS renders ::before. */
.panel-eyebrow {
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted2);
  margin-bottom:10px;
}

.panel-title {
  font-family:var(--font-display); font-size:26px; font-weight:700;
  letter-spacing:-0.4px; color:var(--white);
  margin-bottom:6px; line-height:1.25;
}
.panel-sub {
  font-size:14px; color:var(--muted); line-height:1.5; margin-bottom:28px;
}

/* ── FOOTER CTA ──────────────────────────────────────────────────────── */
.footer-cta {
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  padding:16px 20px calc(env(safe-area-inset-bottom) + 16px);
  background:linear-gradient(to top, var(--bg) 80%, transparent);
}
.footer-inner { max-width:480px; margin:0 auto; }
.btn-primary {
  width:100%; padding:16px; border-radius:var(--radius-md);
  background:var(--coral); border:none; color:#fff;
  font-family:var(--font-body); font-size:16px; font-weight:600;
  cursor:pointer; transition:opacity 0.15s, transform 0.1s;
}
.btn-primary:disabled {
  background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.35);
  cursor:not-allowed; transform:none;
}
.btn-primary:not(:disabled):active { transform:scale(0.985); }
.btn-primary:not(:disabled):hover { opacity:0.88; }

/* ── PICK-FEEDBACK TOAST ─────────────────────────────────────────────── */
/* Standardized confirmation that appears after every pick across steps.
   Slides up from above the footer CTA. Auto-dismisses after 2.4s. */
#pick-toast {
  position:fixed; left:50%; bottom:88px;
  transform:translateX(-50%) translateY(20px);
  background:var(--bg2); border:1px solid var(--coral-border);
  border-radius:99px; padding:9px 18px;
  font-size:13px; color:var(--white);
  opacity:0; pointer-events:none;
  transition:opacity 0.2s, transform 0.2s;
  z-index:120; max-width:calc(100vw - 40px);
  display:flex; align-items:center; gap:10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#pick-toast.visible {
  opacity:1; transform:translateX(-50%) translateY(0);
}
#pick-toast .pt-dot {
  width:6px; height:6px; border-radius:50%; background:var(--coral);
  flex-shrink:0;
}

/* ── LEARN-DISCLOSURE (mini taste vector) ────────────────────────────── */
/* Persistent disclosure showing how the user's profile is taking shape.
   Collapsed by default; expands inline. Sits just below progress bar. */
#learn-disclosure {
  position:fixed; top:calc(env(safe-area-inset-top) + 56px); left:0; right:0;
  z-index:90;
  background:var(--bg);
  border-bottom:1px solid var(--subtle-border);
  padding:0 20px;
  max-height:0; overflow:hidden;
  transition:max-height 0.28s var(--ease-out);
}
#learn-disclosure.open { max-height:240px; }
#learn-disclosure .ld-inner {
  max-width:480px; margin:0 auto;
  padding:14px 0;
}
.ld-row {
  display:flex; align-items:center; gap:12px;
  margin-bottom:8px;
}
.ld-row:last-child { margin-bottom:0; }
.ld-label {
  font-family:var(--font-mono); font-size:10px;
  color:var(--muted2); letter-spacing:0.12em;
  text-transform:uppercase; flex:0 0 78px;
}
.ld-track {
  flex:1; height:4px; border-radius:99px;
  background:rgba(255,255,255,0.06); overflow:hidden;
  position:relative;
}
.ld-fill {
  position:absolute; left:0; top:0; bottom:0;
  background:linear-gradient(90deg, var(--coral), #f47b73);
  border-radius:99px;
  transition:width 0.6s var(--ease-out);
}
.ld-toggle {
  position:absolute; top:8px; right:20px;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.16em; color:var(--muted2);
  padding:4px 8px;
}
.ld-toggle:hover { color:var(--white); }

/* ── ERROR / EMPTY ───────────────────────────────────────────────────── */
.error-msg {
  font-size:13px; color:#E53E3E; text-align:center;
  margin-top:8px; display:none;
}
.error-msg.visible { display:block; }
.empty-state {
  text-align:center; padding:40px 20px; color:var(--muted);
}
.retry-btn {
  margin-top:12px; background:none; border:1px solid var(--subtle-border);
  border-radius:99px; color:var(--muted); padding:8px 20px;
  font-size:13px; cursor:pointer; transition:border-color 0.15s;
}
.retry-btn:hover { border-color:var(--coral); color:var(--coral); }

/* ── REDUCED MOTION FALLBACKS ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  /* Pick toast and disclosure still need a visible state change without motion. */
  #pick-toast.visible { transform:translateX(-50%) translateY(0); }
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (min-width:600px) {
  .panel-inner { padding:0 32px; }
}