/* Daily warm-up (builds on voice.css) */

.wu-start { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 820px) { .wu-start { grid-template-columns: minmax(0, 1fr); } }
.wu-start[hidden], .wu-stage[hidden], .wu-done[hidden] { display: none; }
.wu-choose, .wu-streak-panel { display: grid; gap: 14px; }
.wu-today { display: grid; gap: 4px; }
.wu-today h2 { font-size: 1.4rem; }
.wu-length button[aria-pressed="true"] { background: var(--tone); color: var(--on-tone); box-shadow: 0 3px 0 var(--tone-dark); }

.wu-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: s; }
.wu-steps li {
  counter-increment: s;
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px;
  align-items: center; padding: 10px 14px; border-radius: var(--r-sm); background: var(--surface-2);
}
.wu-steps li::before {
  content: counter(s); grid-row: 1 / 3;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 0.85rem; background: var(--tone-light); color: var(--ink);
}
.wu-steps strong { font-size: 0.98rem; }
.wu-steps span { grid-column: 2; font-size: 0.82rem; color: var(--muted); }
.wu-steps em { grid-column: 3; grid-row: 1 / 3; font-style: normal; font-weight: 800; font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.wu-go { justify-self: stretch; font-size: 1.08rem; padding-block: 14px; }

/* Streak */
.wu-streak { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.st-flame { grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); filter: grayscale(1) opacity(.55); }
.wu-streak.is-on .st-flame { filter: none; background: radial-gradient(circle, rgba(255, 79, 163, .28), rgba(61, 169, 252, .12)); box-shadow: 0 0 22px rgba(255, 79, 163, .25); }
.st-n { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1.1; color: var(--deep); }
.st-sub { font-size: 0.86rem; color: var(--muted); }
.wu-streak.big .st-n { font-size: 2.2rem; }

/* Calendar */
.wu-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 360px; }
.cal-h { text-align: center; font-size: 0.72rem; font-weight: 800; color: var(--muted); }
.cal-d {
  aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700; color: var(--muted); background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}
.cal-d.other { box-shadow: inset 0 0 0 2px var(--primary); color: var(--ink); }
.cal-d.warm { background: linear-gradient(140deg, var(--secondary), var(--lav)); color: #fff; box-shadow: 0 0 12px rgba(255, 79, 163, .3); }
.cal-d.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.cal-d.future { opacity: .35; }
.wu-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-key { width: 14px; height: 14px; border-radius: 4px; display: inline-block; margin-left: 6px; }
.cal-key:first-child { margin-left: 0; }
.cal-key.warm { background: linear-gradient(140deg, var(--secondary), var(--lav)); }
.cal-key.other { box-shadow: inset 0 0 0 2px var(--primary); }

/* Running */
.wu-stage { display: grid; gap: 10px; scroll-margin-top: 128px; }
.wu-progress { display: flex; gap: 5px; height: 8px; }
.wu-progress span { flex-basis: 0; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.wu-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--secondary), var(--primary)); transform-origin: left; transform: scaleX(0); }
.wu-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wu-stepname { font-size: 0.82rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.wu-time { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.wu-do { font-size: clamp(1.6rem, 6.5vw, 2.3rem); line-height: 1.15; min-height: 1.2em; }
.wu-how { color: var(--muted); max-width: 60ch; min-height: 3em; }
.wu-canvas-box { position: relative; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(170deg, #121848, #0a0e2a); box-shadow: var(--shadow); }
#wu-canvas { display: block; width: 100%; height: min(44dvh, 380px); min-height: 250px; }
.wu-ready, .wu-pause {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: rgba(7, 10, 31, 0.55); backdrop-filter: blur(2px);
}
.wu-ready[hidden], .wu-pause[hidden] { display: none; }
.wu-ready span { font-family: var(--font-display); font-size: 4.5rem; font-weight: 600; color: #fff; text-shadow: 0 0 30px var(--tone); }
.wu-pause h3 { font-size: 1.6rem; }
.wu-sentence {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 5vw, 1.7rem); line-height: 1.35;
  background: var(--surface); border-radius: var(--r-md); padding: 16px 20px; cursor: pointer; color: var(--ink);
  border-left: 5px solid var(--tone);
}
.wu-sentence[hidden] { display: none; }
.wu-sentence.fresh { animation: wu-in .45s ease; }
@keyframes wu-in { from { opacity: 0; transform: translateY(8px); } }
.wu-controls { display: flex; gap: 10px; flex-wrap: wrap; }

/* Done */
.wu-done { display: grid; gap: 14px; justify-items: start; }
.wu-results { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; width: 100%; }
.wu-results li { background: var(--surface-2); border-radius: var(--r-sm); padding: 9px 14px; font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) { .wu-sentence.fresh { animation: none; } }
.wu-done { scroll-margin-top: 128px; }
.wu-done .wu-cal, .wu-done .wu-streak { width: 100%; }