/* sing v2 — components: the shared class contract (ticket B-DESIGN).
   docs/DESIGN-V2.md §5 surfaces/components, §6 motion, §10 success. */

/* ---- §5 cards (glass: sheen over surface, hairline, blur) ---- */

.card {
  background-image: var(--sheen);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: var(--sp-4);
}

.card-title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-heading);
}

/* ---- §5 buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-card);
  font-size: var(--fs-body);
  font-weight: 600;
  white-space: nowrap;
  transition: filter var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.btn:active {
  filter: brightness(0.92);
}

/* §5: no disabled look harsher than 55% opacity (+ a "locked" label) */
.btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.btn-primary {
  background-image: var(--gold-grad);
  color: var(--on-gold);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}

.btn-text {
  background: none;
  border: none;
  min-height: var(--sp-7);
  padding: var(--sp-2) var(--sp-2);
  color: var(--text-dim);
}

.btn-text:hover,
.btn-text:focus-visible {
  color: var(--text);
}

/* ---- icon buttons: 48×48 touch targets ---- */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-7);
  height: var(--sp-7);
  border-radius: var(--r-pill);
  color: var(--text-dim);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.icon-btn:active {
  background-color: var(--surface-2);
}

.icon-btn.on {
  color: var(--gold);
}

/* ---- §5 chips ---- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: var(--sp-1) var(--sp-3);
  background-color: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}

/* §11 touch targets: an interactive chip stays visually small (28px pill) but
   its hit box is 48px tall — the ::after extends it without moving layout.
   Non-interactive chips (span/div status chips) need no tap target. */
button.chip {
  position: relative;
}

button.chip::after {
  content: "";
  position: absolute;
  inset: -10px -6px;
}

.chip-streak {
  color: var(--gold-soft);
}

/* §10 a day added: one 320ms pulse */
.chip-streak.pulse {
  animation: chip-pulse var(--dur-slow) var(--ease);
}

@keyframes chip-pulse {
  50% {
    transform: scale(1.08);
  }
}

/* "smaller version" chip on adapted results (lavender, kid-warm) */
.variant-chip {
  color: var(--lavender);
}

/* ---- §5/§10 star pips: 3 slots, outline dim / filled gold + glow ---- */

.star-pips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.star-pip {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--text-faint);
  opacity: 0.7;
}

.star-pip svg {
  width: 100%;
  height: 100%;
}

/* §10 earned: 0→1.15→1 spring, staggered 80ms, 0.6s gold glow decay */
.star-pip.earned {
  color: var(--gold);
  opacity: 1;
  animation: star-pop var(--dur-hero) var(--ease-spring) backwards;
}

.star-pips .star-pip.earned:nth-child(2) {
  animation-delay: 80ms;
}

.star-pips .star-pip.earned:nth-child(3) {
  animation-delay: 160ms;
}

@keyframes star-pop {
  0% {
    transform: scale(0);
    filter: drop-shadow(0 0 12px var(--glow-gold));
  }
  60% {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px var(--glow-gold));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
}

@keyframes star-settle {
  from {
    opacity: 0;
  }
}

/* ---- §5 toggles: 52×32 pill, 24px knob ---- */

.toggle {
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  border-radius: var(--r-pill);
  background-color: var(--surface-2);
  border: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--text-dim);
  transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease);
}

.toggle.on,
.toggle[aria-checked="true"] {
  border-color: var(--gold);
}

.toggle.on::after,
.toggle[aria-checked="true"]::after {
  transform: translateX(20px);
  background-color: var(--gold);
}

/* ---- rows and stacks ---- */

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ---- progress dots (onboarding) ---- */

.progress-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.progress-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--line);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.progress-dots i.on {
  background-color: var(--gold);
  transform: scale(1.25);
}

/* ---- §7 result lines (REPEAT) ---- */

.well-line,
.fix-line,
.next-line {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-left: var(--sp-3);
  font-size: var(--fs-secondary);
  line-height: var(--lh-body);
}

.well-line {
  border-left: 2px solid var(--mint);
}

.fix-line {
  border-left: 2px solid var(--gold);
}

.next-line {
  border-left: 2px solid var(--line);
  color: var(--text-dim);
}

/* LISTEN phase hint copy */
.listen-hint {
  font-size: var(--fs-secondary);
  color: var(--text-dim);
}

/* ---- §6 motion helpers (320ms screen change) ---- */

.fade-in {
  animation: fade-in var(--dur-slow) var(--ease) both;
}

.rise-in {
  animation: rise-in var(--dur-slow) var(--ease) both;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes fade-only {
  from {
    opacity: 0;
  }
}