/* onboarding.css — guided first-run tour.
   Reuses the app's tokens (:root in styles.css) so the tour looks native:
   same card surfaces, same violet/mint accents, same mono eyebrows, same easing.
   The veil and the ring are pointer-events:none on purpose — the tour explains
   the UI without ever locking it, so gestures/keys keep working mid-step. */

/* Flat dim for centred steps (no spotlight target). */
#onb-veil {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(6, 7, 12, 0.72), rgba(4, 5, 9, 0.88));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0.32s;
}
#onb-veil.on { opacity: 1; visibility: visible; }

/* Spotlight: the huge spread shadow dims everything outside the ring. */
#onb-ring {
  position: fixed;
  z-index: 401;
  pointer-events: none;
  border-radius: 16px;
  opacity: 0;
  visibility: hidden;
  box-shadow:
    0 0 0 9999px rgba(4, 5, 9, 0.76),
    0 0 0 1px rgba(179, 155, 255, 0.55),
    0 0 32px -4px rgba(179, 155, 255, 0.45);
  transition:
    left 0.34s var(--ease), top 0.34s var(--ease),
    width 0.34s var(--ease), height 0.34s var(--ease),
    opacity 0.3s var(--ease), visibility 0.3s;
}
#onb-ring.on { opacity: 1; visibility: visible; }

#onb-ring::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid rgba(179, 155, 255, 0.32);
  animation: onb-halo 2.4s var(--ease) infinite;
}
@keyframes onb-halo {
  0%   { opacity: 0.9; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.045); }
  100% { opacity: 0;   transform: scale(1.045); }
}

/* ------------------------------------------------------------------ the card */

#onb-card {
  position: fixed;
  z-index: 410;
  width: 372px;
  max-width: calc(100vw - 32px);
  padding: 18px 18px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0)),
    var(--card-2);
  box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-family: var(--sans);
  animation: onb-in 0.34s var(--ease) both;
}
#onb-card:empty { display: none; }

/* Centred variant (welcome / final step) and the narrow-screen bottom sheet. */
#onb-card.centred {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
}
@keyframes onb-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; }
}
#onb-card.centred { animation: onb-in-c 0.34s var(--ease) both; }
@keyframes onb-in-c {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.985); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Narrow screens with a spotlight target: dock to the bottom instead of trying to
   sit beside the ring. Mutually exclusive with .centred — an animation carrying a
   different transform would otherwise fight this one and lift the sheet off the
   bottom edge. Declared last so it wins on equal specificity. */
#onb-card.sheet {
  top: auto;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  max-height: 62vh;
  overflow-y: auto;
  animation: onb-in-s 0.34s var(--ease) both;
}
@keyframes onb-in-s {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* head */
.onb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.onb-eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet);
  opacity: 0.9;
}
.onb-close {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-mute);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.onb-close:hover { color: var(--text); border-color: var(--line-2); background: rgba(255, 255, 255, 0.04); }

.onb-title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.22;
  color: var(--white);
}

/* body copy */
.onb-body { font-size: 13.5px; line-height: 1.58; color: var(--text-dim); }
.onb-body p { margin: 0 0 9px; }
.onb-body p:last-child { margin-bottom: 0; }
.onb-body b { color: var(--text); font-weight: 600; }
.onb-body ul { margin: 0 0 9px; padding-left: 16px; }
.onb-body li { margin-bottom: 5px; }
.onb-body li:last-child { margin-bottom: 0; }

/* Notes follow the app's own container idiom: a full 1px hairline on a card
   surface (cf. .panel / .legend-badge), never a coloured side bar. The accent
   lives in the emphasised words, not in the frame. */
.onb-body .onb-note {
  margin-top: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0)),
    var(--card);
  font-size: 12.5px;
  color: var(--text-mute);
}
.onb-body .onb-note b { color: var(--mint); font-weight: 600; }

/* the live "do this right now" cue, fed from trainer state */
.onb-body .onb-cue {
  margin: 4px 0 10px;
  padding: 11px 13px;
  border: 1px solid rgba(179, 155, 255, 0.3);
  border-radius: var(--r-sm);
  background: rgba(179, 155, 255, 0.075);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.onb-body .onb-key {
  display: inline-block;
  min-width: 26px;
  padding: 1px 7px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  font-family: var(--mono);
  text-align: center;
}

/* gated-step waiting indicator */
.onb-wait {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.onb-pulse {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(255, 214, 160, 0.55);
  animation: onb-pulse 1.5s var(--ease) infinite;
}
@keyframes onb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 214, 160, 0.5); opacity: 1; }
  70%  { box-shadow: 0 0 0 9px rgba(255, 214, 160, 0); opacity: 0.65; }
  100% { box-shadow: 0 0 0 0 rgba(255, 214, 160, 0); opacity: 1; }
}

/* foot: progress dots + actions */
.onb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.onb-dots { display: flex; align-items: center; gap: 4px; }
.onb-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.25s, transform 0.25s var(--ease);
}
.onb-dot.past { background: rgba(179, 155, 255, 0.42); }
.onb-dot.on { background: var(--violet); transform: scale(1.55); }

.onb-actions { display: flex; align-items: center; gap: 8px; }
/* .btn/.btn-primary/.btn-ghost come from styles.css — shrink them for the card. */
#onb-card .btn {
  padding: 8px 14px;
  font-size: 10.5px;
  border-radius: var(--r-pill);
}

/* "?" in the level bar — borrows .lb-mic's geometry so it reads as a sibling
   of the sound pill rather than a bolted-on button. */
.lb-help {
  padding: 0;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.lb-help:hover {
  color: var(--violet);
  border-color: rgba(179, 155, 255, 0.42);
  box-shadow: 0 0 0 1px rgba(179, 155, 255, 0.18);
}

/* The tour points at the level bar and the controls; keep them legible while dimmed. */
body.onb-active #levelbar,
body.onb-active #controls { position: relative; }

@media (max-width: 900px) {
  #onb-card { width: min(560px, calc(100vw - 24px)); }
  #onb-card.centred { width: min(560px, calc(100vw - 24px)); }
  .onb-title { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  #onb-ring,
  #onb-card,
  #onb-veil { transition: none; animation: none; }
  #onb-ring::after,
  .onb-pulse { animation: none; }
}