/* sing v2 — screens: exercise lane/orb/phases, home today/path, level rows,
   onboarding. docs/DESIGN-V2.md §7 screens, §8 lane/orb chrome, §9 path map. */

/* ---- §8 exercise: the pitch lane ---- */

.lane-wrap {
  position: relative;
  min-height: 260px;
  background-image: var(--sheen);
  background-color: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  overflow: hidden;
}

@media (min-width: 600px) {
  .lane-wrap {
    min-height: 320px;
  }
}

.lane-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.lane-wrap .lane-canvas {
  position: absolute;
  inset: 0;
}

/* §8 karaoke line under the lane: current syllable gold 22px, neighbors dim */
.karaoke-line {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--sp-2);
  min-height: calc(var(--fs-h3) * var(--lh-heading));
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--text-dim);
}

.karaoke-now {
  color: var(--gold);
  font-weight: 600;
}

/* ---- §8 orb (tuner): circle, min(30vw, 128px), top-center on DO ---- */

.orb-wrap {
  position: relative;
  width: min(30vw, 128px);
  aspect-ratio: 1;
  margin-inline: auto;
}

/* numeric cents below the orb (adult only; §8) */
.cents-readout {
  min-width: 76px;
  text-align: center;
  font-size: var(--fs-h3);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

/* ---- §7 LISTEN/DO controls above the safe area ---- */

.phase-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
}

/* §7 count-in numerals: display size; scale in, cross-fade under RM */
.count-in-num {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  animation: count-in var(--dur-slow) var(--ease) both;
}

@keyframes count-in {
  from {
    opacity: 0;
    transform: scale(0.72);
  }
}

/* ---- §7 REPEAT: result card ---- */

.result-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.result-card .star-pips {
  justify-content: center;
}

/* ---- §7 home: today card ---- */

.today-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.today-card .card-title {
  font-size: var(--fs-body);
}

.today-card .btn {
  align-self: flex-start;
  border-radius: var(--r-pill);
  min-height: 48px;
  padding-inline: var(--sp-5);
}

/* ---- §9 learning path map ---- */

.path-map {
  display: block;
  width: 100%;
  height: auto;
}

/* 56px circle nodes; states per §9 */
.level-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.level-node.locked {
  opacity: 0.4;
}

.level-node.current {
  border-color: var(--gold);
  color: var(--gold-soft);
  box-shadow: 0 0 16px var(--glow-gold);
  animation: node-pulse 2s var(--ease) infinite;
}

.level-node.done {
  border-color: var(--mint);
  color: var(--text);
}

/* gentle 2s pulse; static glow under reduced motion (§9) */
@keyframes node-pulse {
  50% {
    box-shadow: 0 0 26px var(--glow-gold);
  }
}

/* star pips under a completed node, smaller */
.node-stars {
  display: inline-flex;
  justify-content: center;
  gap: 4px;
}

.node-stars .star-pip {
  width: 12px;
  height: 12px;
}

/* ---- §7 level rows: 64px, full-bleed tap, gold ring on current ---- */

.level-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 64px;
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-chip);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease);
}

.level-row:active {
  background-color: var(--surface-2);
}

.level-row.current {
  box-shadow: 0 0 0 1px var(--gold), 0 0 14px var(--glow-gold);
}

/* section headings on home and level screens */
.section-label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---- §7 onboarding slides ---- */

.slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}

.slide h1 {
  font-size: var(--fs-h1);
}

.slide p {
  color: var(--text-dim);
  font-size: var(--fs-secondary);
}