/* Singbud welcome test (start/)
   Builds on css/styles.css: same tokens, buttons, Bud and ticket. Flat colour, ink only on
   illustrations, solid bottom edges instead of blurry shadows. Motion: strong ease-out for
   anything arriving, ease-in-out for things moving on screen, never ease-in. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --edge: var(--line);  /* was the solid bottom edge under white cards; now a hairline */
  --track: #ECE8E0;
  --good-text: #3E9C9D;
}

.ob-shell { background: var(--mint); min-height: 100svh; display: flex; flex-direction: column; }

/* ---------- Top bar: back, progress, close ---------- */

.ob-top {
  position: sticky; top: 0; z-index: 20;
  background: var(--mint);
  padding: 10px var(--gutter) 8px;
  padding-top: max(10px, env(safe-area-inset-top));
}
.ob-top-inner {
  max-width: 760px; margin: 0 auto;
  display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 12px;
}
.ob-brand { display: none; }
.ob-icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 0; background: var(--white); color: var(--ink);
  box-shadow: var(--sh-card);
  cursor: pointer; text-decoration: none;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ob-icon-btn:active { transform: translateY(1px); box-shadow: var(--sh-press); }
.ob-icon-btn[hidden] { display: inline-grid !important; visibility: hidden; }

.ob-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ob-seg { min-width: 0; }
.ob-seg-track { display: block; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.ob-seg-fill {
  display: block; height: 100%; border-radius: inherit; background: var(--teal-deeper);
  transform-origin: left center; transform: scaleX(0.0001);
  transition: transform 500ms var(--ease-out);
}
.ob-seg-label {
  display: block; margin-top: 5px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
  visibility: hidden;
}
.ob-seg.is-now .ob-seg-label { visibility: visible; color: var(--teal-text); }
.ob-seg:last-child .ob-seg-label { direction: rtl; } /* long labels run left, clear of the close button */

/* ---------- Layout ---------- */

.ob-main {
  flex: 1;
  width: 100%; max-width: 720px; margin: 0 auto;
  padding: 6px var(--gutter) 40px;
}
.ob-stage { position: relative; }
.ob-stage section { padding: 0; } /* styles.css pads every section for the landing page */
.ob-stage:focus { outline: none; }
.ob-screen.is-leaving { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }

/* Bud and the speech bubble */
.ob-guide { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; min-height: 76px; }
.ob-guide-bud { flex: none; width: 76px; transform-origin: 50% 50%; }
.ob-guide-bud .bud { overflow: visible; }
.ob-bubble {
  position: relative;
  background: var(--white);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: var(--sh-card);
  font-weight: 600; font-size: 0.98rem; line-height: 1.35;
  transform-origin: 0 50%;
}
.ob-bubble::before {
  content: ''; position: absolute; left: -7px; top: 50%; width: 16px; height: 16px;
  background: var(--white); border-radius: 3px; transform: translateY(-50%) rotate(45deg);
}
.ob-bubble:empty { visibility: hidden; }

/* Screen arrival: a short stagger for the pieces of a screen (decorative, never blocks input) */
@keyframes ob-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
[data-rise] { animation: ob-rise 420ms var(--ease-out) both; animation-delay: calc(80ms + var(--i, 0) * 45ms); }

.ob-head { margin-bottom: 18px; }
.ob-title {
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.4rem);
  font-weight: 650; line-height: 1.12; letter-spacing: -0.02em;
}
.ob-title:focus { outline: none; }
.ob-hint { margin-top: 8px; color: var(--ink-soft); font-size: 1.05rem; transition: color 150ms ease; }
.ob-hint.is-warn { color: var(--coral-text); font-weight: 700; }

.ob-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  margin-top: 22px;
  position: sticky; bottom: 0; z-index: 5;
  padding: 12px 0 max(14px, env(safe-area-inset-bottom));
  background: var(--mint);
  /* A soft fade above the bar, so what scrolls under it slides away instead of being cut by a hard edge. */
  box-shadow: 0 -20px 16px -6px var(--mint);
}
.ob-actions .btn-link { align-self: center; }
.ob-actions-col { position: static; background: none; }
.ob-nudge {
  font-weight: 700; font-size: 0.92rem; color: var(--coral-text); text-align: center;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: opacity 200ms ease, max-height 240ms var(--ease-out);
}
.ob-nudge.is-on { max-height: 3em; opacity: 1; }

/* ---------- Choice cards ---------- */

.opts { display: grid; gap: 10px; }
.opt { position: relative; display: block; }
.opt input, .tile input, .chip-opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.opt-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  min-height: 62px;
  padding: 10px 12px 10px 10px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--sh-card);
  cursor: pointer;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background-color 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.opt-card:active { transform: translateY(1px); box-shadow: var(--sh-press); }
.opt input:focus-visible + .opt-card,
.tile input:focus-visible + .tile-card,
.chip-opt input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }

.opt-icon {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--mint);
  transition: background-color 160ms ease;
}
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic .ic-fill { fill: var(--coral); stroke: currentColor; }
.opt-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.opt-label { font-weight: 700; line-height: 1.25; }
.opt-tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--coral); line-height: 1.2;
}
.opt-tag:empty { display: none; }

.opt-badge {
  position: relative; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2.5px solid var(--dash);
  transition: background-color 160ms ease, border-color 160ms ease, transform 200ms var(--ease-out);
}
.opt-num { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; line-height: 1; color: var(--white); }
.opt-num:empty { display: none; }
.opt-check { position: absolute; width: 18px; height: 18px; stroke: var(--white); stroke-width: 3; opacity: 0; }
.opt-check path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 260ms var(--ease-out) 60ms; }
.opt-num:not(:empty) + .opt-check { display: none; }

.opt input:checked + .opt-card { background: var(--teal-wash); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--teal-deeper); }
.opt input:checked + .opt-card:active { box-shadow: inset 0 0 0 1.5px var(--teal-deeper); }
.opt input:checked + .opt-card .opt-icon { background: var(--white); }
.opt input:checked + .opt-card .opt-badge { background: var(--teal-deeper); border-color: var(--teal-deeper); transform: scale(1.04); }
.opt input:checked + .opt-card .opt-check { opacity: 1; }
.opt input:checked + .opt-card .opt-check path { stroke-dashoffset: 0; }
.opt.is-main input:checked + .opt-card .opt-tag { color: var(--cheek); }

/* Confidence meter on the "how do you feel" cards */
.opt-meter { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.opt-meter i { width: 5px; border-radius: 3px; background: var(--dash); }
.opt-meter i:nth-child(1) { height: 7px; }
.opt-meter i:nth-child(2) { height: 12px; }
.opt-meter i:nth-child(3) { height: 17px; }
.opt-meter i:nth-child(4) { height: 22px; }
.opt-meter i.on { background: var(--coral); }

@media (hover: hover) and (pointer: fine) {
  .opt-card:hover { box-shadow: var(--sh-card); transform: translateY(-1px); }
  .opt input:checked + .opt-card:hover { box-shadow: inset 0 0 0 1.5px var(--teal-deeper); }
  .opt-card:active, .opt input:checked + .opt-card:active { transform: translateY(1px); }
}

/* Event sub-choice: opens under the event card */
.ob-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-out); }
.ob-reveal[data-open="true"] { grid-template-rows: 1fr; }
.ob-reveal-inner { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 200ms ease; }
.ob-reveal[data-open="true"] .ob-reveal-inner { opacity: 1; transition-delay: 80ms; }
.event-panel {
  margin: 2px 0 6px;
  padding: 16px;
  border-radius: 14px;
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--line);
}
.event-label { display: block; font-weight: 700; font-size: 0.95rem; margin: 0 0 10px; }
.event-label + .chip-opts { margin-bottom: 16px; }
.chip-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt span {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 6px 15px; border-radius: 999px;
  background: var(--white); box-shadow: var(--sh-card);
  font-weight: 700; font-size: 0.95rem; cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 160ms ease, color 160ms ease, box-shadow 120ms var(--ease-out);
}
.chip-opt span:active { transform: translateY(1px); box-shadow: var(--sh-press); }
.chip-opt input:checked + span { background: var(--teal-wash); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--teal-deeper); }
.event-date { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.input-date, .input-time { width: auto; min-height: 48px; padding: 8px 18px; font-weight: 700; }
.input-date:disabled { opacity: 0.45; }
.event-hint { margin-top: 10px; font-size: 0.92rem; color: var(--ink-soft); }

.check-pill { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.check-pill input { width: 20px; height: 20px; accent-color: var(--coral); margin: 0; }

/* Minutes per day */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile { position: relative; display: flex; }
.tile-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-height: 112px; padding: 12px 4px;
  border-radius: 16px; background: var(--white); box-shadow: var(--sh-card);
  cursor: pointer; text-align: center;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background-color 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.tile-card:active { transform: translateY(1px); box-shadow: var(--sh-press); }
.tile-num { font-family: var(--font-head); font-weight: 700; font-size: 2.1rem; line-height: 1; }
.tile-unit { font-weight: 700; font-size: 0.85rem; }
.tile-tag { margin-top: 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.tile input:checked + .tile-card { background: var(--teal-wash); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--teal-deeper); }
.tile input:checked + .tile-card .tile-tag { color: var(--teal-text); }

.reminder {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 22px; padding: 14px 16px;
  border-radius: 14px; background: var(--white); box-shadow: var(--sh-card);
}
.reminder label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.input-time { background: var(--mint); box-shadow: none; }
.reminder-hint { width: 100%; font-size: 0.9rem; color: var(--ink-soft); }

/* Song */
.song-field { position: relative; }
.song-field .input { padding-left: 54px; }
.song-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink); display: flex; }

/* ---------- Hello ---------- */

.hello { text-align: center; padding-top: 4px; }
.hello-bud { width: 190px; margin: 0 auto 6px; }
.hello .eyebrow { margin-bottom: 8px; }
.hello-title { font-size: clamp(2.4rem, 1.8rem + 3vw, 3.4rem); font-weight: 700; letter-spacing: -0.035em; }
.hello-title .squiggle-line path { animation: draw-on 0.9s cubic-bezier(.6, 0, .3, 1) 0.6s both; }
.hello-body { margin: 14px auto 0; max-width: 34ch; color: var(--ink-soft); font-size: 1.12rem; }
.hello-steps {
  list-style: none; margin: 22px auto 0; padding: 0; max-width: 420px;
  display: grid; gap: 8px; text-align: left;
}
.hello-steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 16px; background: var(--white); box-shadow: var(--sh-card);
  font-weight: 700;
}
.hello-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--coral); color: var(--white);
  font-family: var(--font-head); font-size: 0.95rem;
}
.privacy-line {
  display: flex; align-items: center; gap: 10px; text-align: left;
  margin: 16px auto 0; max-width: 420px;
  padding: 12px 14px; border-radius: 16px; background: var(--belly);
  font-weight: 600; line-height: 1.35;
}
.privacy-line .ic { flex: none; width: 26px; height: 26px; }
.privacy-line .ic .ic-fill { fill: var(--teal); }
.hello-cta { margin: 22px auto 0; max-width: 420px; display: grid; gap: 12px; }
.hello-time { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.92rem; color: var(--ink-soft); font-weight: 600; }
.hello-time .ic { width: 18px; height: 18px; }

/* Phones: the whole welcome fits on one screen (checked at 375x667), and the button stays pinned to the
   bottom like every other step's, so it's in reach on shorter phones too. */
@media (max-width: 559px) {
  .hello { padding-top: 0; }
  .hello-bud { width: 118px; margin-bottom: 2px; }
  .hello .eyebrow { margin-bottom: 4px; }
  .hello-title { font-size: 2.1rem; }
  .hello-body { margin-top: 8px; font-size: 1rem; line-height: 1.45; }
  .hello-steps { margin-top: 14px; gap: 6px; }
  .hello-steps li { padding: 7px 12px; font-size: 0.95rem; box-shadow: var(--sh-card); }
  .hello-num { width: 24px; height: 24px; font-size: 0.85rem; }
  .privacy-line { margin-top: 10px; padding: 8px 12px; font-size: 0.88rem; }
  .privacy-line .ic { width: 22px; height: 22px; }
  .hello-cta {
    margin-top: 12px; gap: 6px;
    position: sticky; bottom: 0; z-index: 5;
    padding: 10px 0 max(12px, env(safe-area-inset-bottom));
    background: var(--mint); box-shadow: 0 -20px 16px -6px var(--mint);
  }
  .hello-time { font-size: 0.84rem; }
}

/* ---------- Mic screen ---------- */

.mic .privacy-line { margin-left: 0; max-width: none; }
.task-preview {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.task-preview li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--white); box-shadow: var(--sh-card);
  font-weight: 700; font-size: 0.92rem;
}
.task-preview span {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sun); font-family: var(--font-head); font-size: 0.85rem;
}
.tick-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.tick-list li { position: relative; padding-left: 32px; font-weight: 600; }
.tick-list li::before {
  content: ''; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 11.5l3 3 5-6' fill='none' stroke='%232E3D44' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.mic-status { font-weight: 700; line-height: 1.4; }
.mic-status:empty { display: none; }
.mic-status.is-error { color: var(--coral-text); }

/* ---------- Voice tasks ---------- */

.task-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.task-kicker { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.task-kicker span { color: var(--coral-text); }
.task-pips { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.task-pips li { width: 16px; height: 6px; border-radius: 3px; background: var(--track); }
.task-pips li.done { background: var(--teal-dark); }
.task-pips li.now { background: var(--coral); }

.task .ob-hint { margin-bottom: 16px; }
.task-stage {
  position: relative;
  border-radius: 18px; background: var(--white); box-shadow: var(--sh-card);
  overflow: hidden;
}
.task-stage:has(.novoice:not([hidden])) { min-height: 340px; }
.pitch { width: 100%; height: 210px; }
.pitch-tall { height: 270px; }

.meter {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  display: flex; align-items: flex-end; gap: 3px; height: 18px;
}
.meter i { width: 4px; border-radius: 2px; background: var(--track); transition: background-color 80ms linear; }
.meter i:nth-child(1) { height: 6px; }
.meter i:nth-child(2) { height: 9px; }
.meter i:nth-child(3) { height: 12px; }
.meter i:nth-child(4) { height: 15px; }
.meter i:nth-child(5) { height: 18px; }
.meter i.on { background: var(--coral); }

.task-status {
  min-height: 2.4em; margin-top: 14px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.35rem; line-height: 1.2;
  text-align: center; text-wrap: balance;
}
.task-status.is-good { color: var(--good-text); }
.task-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 8px; transition: opacity 200ms ease; }
.task-actions .btn-lg { min-width: 200px; }
.task-actions.is-done { opacity: 0; pointer-events: none; }

/* "That's your note" */
.found {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  translate: -50% -50%;
  min-width: 200px; text-align: center;
  padding: 14px 22px 16px; border-radius: 16px;
  background: var(--sun); box-shadow: var(--sh-card);
}
.found-kicker { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-text); }
.found-note { font-family: var(--font-head); font-weight: 700; font-size: 3.2rem; line-height: 1.05; letter-spacing: -0.03em; }
.found-body { font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }

/* Match and slide-up: one dot per note */
.dots-row { list-style: none; display: flex; justify-content: center; gap: 10px; margin: 0; padding: 14px 0 0; }
.dots-row li {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--ink); background: var(--white);
  transition: background-color 200ms ease, transform 200ms var(--ease-out);
}
.dots-row li.now { background: var(--yellow); transform: scale(1.15); }
.dots-row li.hit { background: var(--teal); }
.dots-row li.miss { background: var(--cheek); }

/* Listen */
.ear { padding: 22px 16px 18px; text-align: center; }
.ear-notes { display: flex; justify-content: center; align-items: center; gap: 22px; height: 76px; }
.ear-note {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--belly); box-shadow: inset 0 0 0 3px var(--ink);
  transition: background-color 160ms ease, transform 320ms var(--ease-out);
}
.ear-note.is-on { background: var(--coral); }
.ear-progress { margin-top: 10px; font-weight: 700; font-size: 0.85rem; color: var(--ink-soft); }
.ear-pips { list-style: none; display: flex; justify-content: center; gap: 6px; margin: 8px 0 18px; padding: 0; }
.ear-pips li { width: 10px; height: 10px; border-radius: 50%; background: var(--track); transition: background-color 200ms ease, transform 200ms var(--ease-out); }
.ear-pips li.now { background: var(--yellow); transform: scale(1.3); }
.ear-pips li.hit { background: var(--teal-dark); }
.ear-pips li.miss { background: var(--dash); }
.ear-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ear-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px 12px; border: 0; border-radius: 14px;
  background: var(--mint); box-shadow: var(--sh-card);
  font-weight: 700; cursor: pointer;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background-color 160ms ease, opacity 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.ear-btn .ic { width: 28px; height: 28px; stroke-width: 2.4; }
.ear-btn:active:not([disabled]) { transform: translateY(1px); box-shadow: var(--sh-press); }
.ear-btn[disabled] { opacity: 0.5; cursor: default; }
.ear-btn.is-right { background: var(--teal); opacity: 1; }
.ear-btn.is-picked { background: var(--track); opacity: 1; }

/* Hold */
.hold-wrap { display: grid; justify-items: center; padding-top: 16px; }
.pitch-hold { height: 150px; }
.ring { position: relative; width: 124px; height: 124px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--track); stroke-width: 10; }
.ring-fill { fill: none; stroke: var(--coral); stroke-width: 10; stroke-linecap: round; }
.ring-num { font-family: var(--font-head); font-weight: 700; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ring-unit { position: absolute; top: 64%; font-weight: 700; font-size: 0.8rem; color: var(--ink-soft); }

/* Slide: an arrow that points the way */
.slide-cue {
  position: absolute; left: 12px; top: 50%; z-index: 2;
  width: 38px; height: 38px; margin-top: -19px; border-radius: 50%;
  display: grid; place-items: center; background: var(--sun);
  opacity: 0; transition: opacity 200ms ease, rotate 300ms var(--ease-in-out);
}
.slide-cue svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.slide-cue.is-up, .slide-cue.is-down { opacity: 1; }
.slide-cue.is-up svg { animation: cue-up 1s var(--ease-in-out) infinite; }
.slide-cue.is-down { rotate: 180deg; }
.slide-cue.is-down svg { animation: cue-up 1s var(--ease-in-out) infinite; }
@keyframes cue-up { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-3px); } }

/* Tap */
.tap-wrap { display: grid; justify-items: center; gap: 10px; padding: 18px 16px 22px; }
.tap-count { min-height: 1.2em; font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; line-height: 1.2; }
.tap-pad {
  width: 150px; height: 150px; border-radius: 50%;
  border: 4px solid var(--ink); background: var(--coral); color: var(--white);
  box-shadow: var(--sh-solid);
  font-family: var(--font-head); font-weight: 700; font-size: 1.6rem;
  cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tap-pad[disabled] { opacity: 0.55; cursor: default; }
.tap-beats { list-style: none; display: flex; gap: 8px; margin: 8px 0 0; padding: 0; }
.tap-beats li { width: 14px; height: 14px; border-radius: 50%; background: var(--track); transition: background-color 120ms ease; }
.tap-beats li.now { background: var(--yellow); }
.tap-beats li.hit { background: var(--teal-dark); }

/* "I couldn't hear you": never a fail */
.novoice {
  position: absolute; inset: 0; z-index: 4; overflow: auto;
  padding: 20px 20px 22px; background: var(--white);
}
.novoice h2 { font-size: 1.5rem; }
.novoice p { margin-top: 6px; color: var(--ink-soft); }
.novoice .tick-list { margin-bottom: 18px; }

/* Thinking dots */
.crunch { text-align: center; padding: 40px 0; }
.crunch .ob-title { font-size: 1.6rem; }
.crunch-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.crunch-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--coral); animation: crunch 900ms var(--ease-in-out) infinite; }
.crunch-dots i:nth-child(2) { animation-delay: 150ms; background: var(--teal-dark); }
.crunch-dots i:nth-child(3) { animation-delay: 300ms; background: var(--yellow); }
@keyframes crunch { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } }

.tap-offer { padding-top: 6px; }
.tap-offer .ob-actions { margin-top: 26px; }

/* ---------- Results ---------- */

.card {
  margin-top: 14px; padding: 18px 18px 20px;
  border-radius: 18px; background: var(--white); box-shadow: var(--sh-card);
}
.card-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-meta { font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); }
.card-note { margin-top: 12px; font-size: 0.95rem; color: var(--ink-soft); }
.card-note-soft { padding: 10px 12px; border-radius: 12px; background: var(--mint); }

.results .eyebrow, .planview .eyebrow { margin-bottom: 8px; }
.results-title { font-size: clamp(1.65rem, 1.2rem + 2vw, 2.35rem); line-height: 1.18; margin-bottom: 6px; }
.results-title .squiggle-line path { animation: draw-on 0.9s cubic-bezier(.6, 0, .3, 1) 0.7s both; }

.skills { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.skill {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name word" "bar bar";
  align-items: center; gap: 6px 12px;
}
.skill-name { grid-area: name; font-weight: 700; }
.skill-word {
  grid-area: word; font-weight: 700; font-size: 0.92rem; text-align: right;
  opacity: 0; transition: opacity 300ms ease calc(450ms + var(--i) * 90ms);
}
.skill-bar { grid-area: bar; position: relative; height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.skill-fill {
  position: absolute; inset: 0; border-radius: inherit; background: var(--teal-deeper);
  transform-origin: left center; transform: scaleX(0.0001);
  transition: transform 900ms var(--ease-out) calc(var(--i) * 90ms);
}
.skill-ticks { position: absolute; inset: 0; display: flex; justify-content: space-evenly; pointer-events: none; }
.skill-ticks i { width: 2px; background: var(--white); opacity: 0.9; }
.results.is-in .skill-fill { transform: scaleX(var(--v)); }
.results.is-in .skill-word { opacity: 1; }
.est {
  display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px;
  background: var(--sun); font-style: normal; font-weight: 700; font-size: 0.72rem; color: var(--ink); vertical-align: 2px;
}

.notes-big { margin-top: 6px; font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; line-height: 1.1; letter-spacing: -0.02em; }
.piano { width: 100%; height: auto; margin-top: 12px; }
.piano .k-w { fill: var(--white); stroke: var(--ink); stroke-width: 1.6; }
.piano .k-b { fill: var(--ink); }
.piano .k-w.on, .piano .k-b.on { transition: fill 260ms ease calc(500ms + var(--k, 0) * 30ms); }
.results.is-in .piano .k-w.on { fill: var(--teal); }
.results.is-in .piano .k-b.on { fill: #3E8E8F; }
.piano .k-label { font-family: var(--font-body); font-weight: 700; font-size: 7px; fill: #7C8B91; text-anchor: middle; }

.level-line { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.45rem; line-height: 1.15; }
.level-badge {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--coral); color: var(--white); box-shadow: var(--sh-solid);
  font-size: 1.35rem;
}

.share-open { width: 100%; }
.share-body { display: grid; justify-items: center; gap: 14px; margin-top: 16px; }
.share-img { width: min(100%, 280px); aspect-ratio: 1; border-radius: 16px; background: var(--cream); box-shadow: var(--sh-card); }
.share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- Plan ---------- */

.lvl-path {
  position: relative; list-style: none; margin: 30px 0 4px; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
}
.lvl-path::before {
  content: ''; position: absolute; left: 10%; right: 10%; top: 20px;
  border-top: 3px dashed var(--dash);
}
.lvl { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.lvl-dot {
  position: relative; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); box-shadow: inset 0 0 0 3px var(--dash);
  font-family: var(--font-head); font-weight: 700; color: var(--ink-soft);
}
.lvl.past .lvl-dot { background: var(--belly); box-shadow: inset 0 0 0 3px var(--teal-dark); color: var(--ink); }
.lvl.now .lvl-dot {
  background: var(--coral); color: var(--white); box-shadow: 0 0 0 3px var(--ink), var(--sh-solid);
  transform: scale(1.12);
}
.lvl-name { font-size: 0.74rem; font-weight: 700; line-height: 1.2; color: var(--ink-soft); }
.lvl.now .lvl-name { color: var(--ink); font-weight: 700; }
.lvl-flag {
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.25rem; line-height: 1; color: var(--coral-text);
}
.lvl:first-child .lvl-flag { left: 0; transform: none; }
.lvl:last-child .lvl-flag { left: auto; right: 0; transform: none; }
.planview.is-in .lvl.now .lvl-dot { animation: hop 0.9s ease-out 0.5s; }
.lvl-blurb { margin-top: 16px; color: var(--ink-soft); }
.lvl-blurb b { color: var(--ink); }
.zone-chip { display: inline-block; margin-top: 4px; padding: 1px 10px; border-radius: 999px; background: var(--mint); font-weight: 700; font-size: 0.82rem; color: var(--ink); }

.ob-ticket { margin-top: 18px; transform: rotate(-1deg); grid-template-columns: 1fr 96px; box-shadow: var(--sh-card); max-width: none; }
.ob-ticket .ticket-main { padding: 20px 16px 20px 20px; }
.ob-ticket .ticket-stub::before, .ob-ticket .ticket-stub::after { background: var(--mint); }
.ob-ticket .ticket-icon { width: 62px; height: 62px; }
.ob-ticket .ticket-icon .ic { width: 34px; height: 34px; }
.phase-bar { display: grid; gap: 6px; margin-top: 16px; }
/* One row per phase; the coloured fill shows its share of the countdown */
.phase {
  --c: var(--sun);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: 12px; background: var(--white);
}
.phase::before {
  content: ''; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0;
  width: calc(var(--w) * 100%); min-width: 14px; background: var(--c);
}
.phase b { font-size: 0.86rem; line-height: 1.25; }
.phase small { flex: none; font-weight: 700; font-size: 0.8rem; color: var(--ink-soft); }
.phase-rehearse { --c: var(--blush); }
.phase-light { --c: var(--belly); }
.phase-oneSong { --c: var(--blush); }

.plan-grid { display: grid; gap: 0 14px; }
.focus-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.focus-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--mint); }
.focus-name { font-weight: 700; }
.focus-word { font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); }
.goal-name { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
.goal-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--blush); }
.goal-adds { margin-top: 8px; color: var(--ink-soft); }
.milestone { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--sun); font-weight: 700; line-height: 1.3; }
.milestone span { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-text); }

.session-bar { display: flex; gap: 3px; height: 16px; margin-top: 14px; }
.seg { flex: var(--w) 1 0; border-radius: 6px; transform-origin: left center; transform: scaleX(0.0001); transition: transform 500ms var(--ease-out) calc(300ms + var(--i) * 90ms); }
.planview.is-in .seg { transform: none; }
.seg:first-child { border-radius: 999px 6px 6px 999px; }
.seg:last-child { border-radius: 6px 999px 999px 6px; }
.seg-listen { background: var(--yellow); }
.seg-warmup { background: var(--teal); }
.seg-focus { background: var(--coral); }
.seg-goal { background: var(--teal-deeper); }
.seg-win { background: var(--cheek); }
.session-parts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.session-parts li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px; }
.part-swatch { width: 14px; height: 14px; border-radius: 50%; }
.part-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.part-text small { color: var(--ink-soft); font-size: 0.88rem; }
.part-time { font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums; }

.next-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.next-list li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; }
.next-list b { display: block; }
.next-list li > span:last-child { color: var(--ink-soft); line-height: 1.4; }
.next-date {
  padding: 6px 4px; border-radius: 12px; background: var(--cream); box-shadow: inset 0 0 0 1px var(--line);
  text-align: center; font-weight: 700; font-size: 0.9rem; color: var(--ink);
}

.app-note { margin: 18px auto 0; max-width: 44ch; text-align: center; font-size: 0.95rem; color: var(--ink-soft); }

.save-card { background: var(--coral); color: var(--white); box-shadow: var(--sh-solid); padding: 22px 20px 20px; }
.save-title { font-size: 1.5rem; }
.save-body { margin-top: 8px; color: #FFF3EF; }
.save-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.save-form .btn { --edge: #18242A; background: var(--ink); color: var(--cream); }
.save-form .btn:hover { background: #3A4B53; }
.save-card .form-error { color: var(--ink); }
.save-card .fine { color: #FFE9E4; }
.save-done:focus { outline: none; }
.save-done p { margin-top: 6px; color: #FFF3EF; }
.save-check { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 50%; background: var(--white); }
.save-check .ic { width: 30px; height: 30px; stroke: var(--coral); stroke-width: 3; }
.save-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px !important; }
.save-links .btn-link { color: var(--white); text-decoration-color: var(--ink); }

/* ---------- Progress list beside Bud (wide screens only) ---------- */

.ob-side { display: none; }
.side-title {
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal-text);
}
.side-steps { list-style: none; margin: 12px 0 0; padding: 0; }
.side-steps li { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 7px 0 9px; }
.side-steps li:not(:last-child)::before {
  content: ''; position: absolute; left: 12px; top: 37px; bottom: -5px;
  border-left: 2.5px dashed var(--dash);
}
.side-steps li.done:not(:last-child)::before { border-left-style: solid; border-color: var(--teal-dark); }
.side-dot {
  position: relative; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); box-shadow: inset 0 0 0 2.5px var(--dash);
}
.side-dot .ic { width: 15px; height: 15px; stroke: var(--white); stroke-width: 3.2; }
.side-steps li.done .side-dot { background: var(--teal-dark); box-shadow: none; }
.side-steps li.now .side-dot { box-shadow: inset 0 0 0 3px var(--coral); }
.side-steps li.now .side-dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.side-text { min-width: 0; padding-top: 2px; }
.side-label { display: block; font-weight: 700; line-height: 1.3; }
.side-steps li:not(.done):not(.now) .side-label { color: var(--ink-soft); font-weight: 600; }
.side-value {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 2px; font-size: 0.88rem; line-height: 1.35; color: var(--ink-soft);
}
.side-private {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--track);
  font-size: 0.86rem; line-height: 1.4; color: var(--ink-soft); font-weight: 600;
}
.side-private .ic { flex: none; width: 20px; height: 20px; }
.side-private .ic .ic-fill { fill: var(--teal); }

/* ---------- Two columns for results and plan on big screens ---------- */

.cols { display: block; }

/* ---------- Celebration bits ---------- */

.ob-fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.fx-bit { position: absolute; display: block; will-change: transform, opacity; }
.fx-note { width: 16px; height: 20px; }
.fx-note svg { width: 100%; height: 100%; }
.fx-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.fx-dash { width: 14px; height: 5px; border-radius: 3px; background: currentColor; }

/* ---------- Reduced motion: keep fades that explain, drop movement ---------- */

@media (prefers-reduced-motion: reduce) {
  [data-rise] { animation: none; }
  .ob-seg-fill, .skill-fill, .seg { transition: none !important; }
  .slide-cue svg { animation: none !important; }
}

/* ---------- Wider screens ---------- */

@media (min-width: 480px) {
  .opts-grid { grid-template-columns: 1fr 1fr; }
  .ob-actions { flex-direction: row; justify-content: flex-start; align-items: center; }
  .ob-actions .btn-lg { min-width: 220px; }
  .ob-actions .btn-link { align-self: auto; }
  .save-form { flex-direction: row; }
  .save-form .btn { flex: none; }
  .skill { grid-template-columns: 110px 1fr 128px; grid-template-areas: "name bar word"; }
  .skill-word { text-align: left; }
}

@media (min-width: 560px) {
  .ob-seg-label { visibility: visible; }
  .ob-seg.is-done .ob-seg-label { color: var(--ink); }
}

@media (min-width: 760px) {
  .ob-top { padding-top: 14px; padding-bottom: 12px; }
  .ob-top-inner { grid-template-columns: 40px auto 1fr 40px; gap: 18px; }
  .ob-brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; text-decoration: none;
  }
  .ob-brand img { width: 40px; height: 40px; max-width: none; margin: -4px -4px -4px -2px; }
  .ob-main { padding-top: 18px; }
  .ob-guide { margin-bottom: 20px; }
  .ob-guide-bud { width: 96px; }
  .ob-bubble { font-size: 1.05rem; padding: 12px 16px; }
  .ob-actions { position: static; background: none; padding-bottom: 0; }
  .opts { grid-template-columns: 1fr 1fr; }
  .opts .ob-reveal { grid-column: 1 / -1; }
  /* Cards after the event panel fill the gap beside it; a folded panel takes no space */
  .opts { grid-auto-flow: row dense; }
  .opts .ob-reveal[data-open="false"] { margin-top: -10px; }
  .opts[role="radiogroup"] { grid-template-columns: 1fr; }
  .pitch { height: 250px; }
  .pitch-tall { height: 300px; }
  .hold-wrap { grid-template-columns: 150px 1fr; align-items: center; padding: 10px 0 10px 18px; }
  .pitch-hold { height: 190px; }
  .hello-bud { width: 230px; }
  .card { padding: 22px 24px 24px; }
  .plan-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .lvl-name { font-size: 0.85rem; }
}

/* ---------- Desktop browsers: full-width web layout ----------
   Edge-to-edge header, a full-height cream panel on the left for Bud and the progress list,
   and the screen itself using the rest of the window. Hello is a full-bleed split hero. */
@media (min-width: 900px) {
  :root { --top-h: 72px; --panel-w: clamp(300px, 30vw, 500px); --pad-x: clamp(32px, 5vw, 96px); --pad-top: 48px; }

  .ob-shell { min-height: 100svh; }
  .ob-top {
    height: var(--top-h); padding: 0 32px;
    display: flex; align-items: center;
    background: var(--white); box-shadow: var(--sh-card);
  }
  .ob-top-inner { max-width: none; width: 100%; grid-template-columns: 40px auto minmax(0, 1fr) 40px; gap: 28px; }
  .ob-icon-btn { background: var(--mint); box-shadow: none; }
  .ob-icon-btn:active { box-shadow: none; }

  .ob-main {
    max-width: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: var(--panel-w) minmax(0, 1fr); align-items: start;
  }
  .ob-shell.ob-solo .ob-main { display: block; }

  /* Bud's panel */
  .ob-guide {
    position: sticky; top: var(--top-h);
    height: calc(100svh - var(--top-h)); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 18px;
    margin: 0; min-height: 0; padding: 40px 36px 32px;
    background: var(--panel); box-shadow: inset -1px 0 0 var(--line);
    isolation: isolate;
  }
  .ob-guide-bud { position: relative; align-self: center; width: clamp(150px, 13vw, 210px); margin: 0; }
  .ob-guide-bud::before {
    content: ''; position: absolute; z-index: -1; left: 8%; top: 4%; width: 88%; aspect-ratio: 1;
    border-radius: 50%; background: var(--sun);
  }
  .ob-bubble { font-size: 1.05rem; padding: 14px 18px; text-align: center; box-shadow: var(--sh-card); }
  .ob-bubble::before { left: 50%; top: -7px; transform: translateX(-50%) rotate(45deg); }
  .ob-side { display: block; margin-top: 10px; }
  .side-steps li:not(:last-child)::before { border-color: var(--cream-deep); }
  .side-dot { box-shadow: inset 0 0 0 2.5px #E2D3BC; }
  .side-private { border-top-color: var(--cream-deep); }

  /* The screen */
  .ob-stage { min-height: calc(100svh - var(--top-h)); padding: var(--pad-top) var(--pad-x) 80px; }
  .ob-stage > .ob-screen { max-width: 1040px; margin: 0 auto; }
  .ob-shell.ob-wide .ob-stage > .ob-screen { max-width: 1320px; }
  .ob-screen.is-leaving { top: var(--pad-top); left: var(--pad-x); right: var(--pad-x); }

  .ob-title { font-size: clamp(2.3rem, 1.4rem + 1.7vw, 3.1rem); }
  .ob-hint { font-size: 1.15rem; }
  .ob-head { margin-bottom: 28px; }
  .ob-actions { margin-top: 32px; }
  .opts { gap: 14px; }
  .opts .ob-reveal[data-open="false"] { margin-top: -14px; }
  .opts[role="radiogroup"] { grid-template-columns: 1fr 1fr; }
  .opt-card { min-height: 76px; padding: 14px 18px 14px 14px; }
  .opt-icon { width: 46px; height: 46px; }
  .tiles { gap: 16px; }
  .tile-card { min-height: 160px; }
  .tile-num { font-size: 3rem; }

  /* Hello: full-bleed split hero */
  .ob-shell.ob-solo .ob-stage { padding: 0; }
  .ob-shell.ob-solo .ob-stage > .ob-screen { max-width: none; }
  .ob-shell.ob-solo .ob-screen.is-leaving { top: 0; left: 0; right: 0; }
  .hello {
    display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: stretch;
    min-height: calc(100svh - var(--top-h)); text-align: left;
  }
  .hello-art {
    position: relative; display: grid; place-items: center; overflow: hidden;
    background: var(--panel); box-shadow: inset -1px 0 0 var(--line);
  }
  .hello-art::before {
    content: ''; position: absolute; width: min(76%, 600px); aspect-ratio: 1; border-radius: 50%; background: var(--sun);
  }
  .hello-bud { position: relative; width: min(66%, 540px); margin: 0 0 0 4%; }
  .hello-copy { align-self: center; justify-self: center; width: 100%; max-width: 720px; padding: 48px var(--pad-x); }
  .hello .eyebrow { margin-bottom: 14px; }
  .hello-title { font-size: clamp(3.4rem, 2rem + 3vw, 5rem); }
  .hello-body { margin: 18px 0 0; font-size: 1.25rem; max-width: 32ch; }
  .hello-steps, .privacy-line, .hello-cta { margin-left: 0; margin-right: 0; max-width: 500px; }
  .hello-steps { margin-top: 28px; }
  .hello-cta { justify-items: start; margin-top: 28px; }
  .hello-cta .btn { min-width: 300px; }

  /* Voice tasks */
  .task .ob-hint { margin-bottom: 24px; }
  .pitch { height: clamp(280px, 34vh, 380px); }
  .pitch-tall { height: clamp(320px, 42vh, 460px); }
  .hold-wrap { grid-template-columns: 190px 1fr; padding: 16px 0 16px 28px; }
  .pitch-hold { height: 240px; }
  .ring { width: 160px; height: 160px; }
  .ring-num { font-size: 2.5rem; }
  .task-status { font-size: 1.65rem; margin-top: 20px; }
  .ear { padding: 40px 32px 34px; }
  .ear-notes { height: 110px; gap: 36px; }
  .ear-note { width: 64px; height: 64px; }
  .ear-btns { max-width: 640px; margin: 0 auto; gap: 16px; }
  .ear-btn { padding: 20px 8px 18px; font-size: 1.08rem; }
  .tap-pad { width: 200px; height: 200px; }
  .mic .ob-actions { position: static; }

  /* Results and plan */
  .cols { display: grid; gap: 0 20px; align-items: start; }
  .results .cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .results .skill { grid-template-columns: 1fr auto; grid-template-areas: "name word" "bar bar"; }
  .results .skill-word { text-align: right; }
  .results .skills { gap: 16px; }
  .results-title { font-size: clamp(2.2rem, 1.4rem + 1.6vw, 3rem); max-width: 26ch; }
  .app-note { text-align: left; margin-left: 4px; }
}

/* Roomy windows: more columns, and the plan gets a sticky side column */
@media (min-width: 1180px) {
  .planview .cols { grid-template-columns: minmax(0, 1fr) 360px; }
  .planview .col-side { position: sticky; top: calc(var(--top-h) + 24px); }
  .planview .plan-grid { grid-template-columns: 1fr; }
  .save-form { flex-direction: column; }
}
@media (min-width: 1360px) {
  .opts { grid-template-columns: repeat(3, 1fr); }
  .opts-grid { grid-template-columns: repeat(4, 1fr); }
  .opts-grid .opt-card { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: start; min-height: 132px; }
  .opts-grid .opt-icon { grid-column: 1; grid-row: 1; }
  .opts-grid .opt-text { grid-column: 1 / -1; grid-row: 2; align-self: end; }
  .opts-grid .opt-badge { grid-column: 2; grid-row: 1; }
  .results .cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 28px; }
}
@media (min-width: 1600px) {
  .ob-stage > .ob-screen { max-width: 1180px; }
  .planview .plan-grid { grid-template-columns: 1fr 1fr; }
  .planview .cols { grid-template-columns: minmax(0, 1fr) 400px; gap: 0 28px; }
}

@media (min-width: 900px) and (max-height: 760px) {
  .hello-title { font-size: 3.4rem; }
  .hello-steps li { padding: 8px 14px; }
  .hello-copy { padding-top: 28px; padding-bottom: 28px; }
}

/* ---------- Desktop, short windows: Bud's panel compacts so nothing is cut off ----------
   Below ~860px of height Bud and the bubble sit side by side and the steps tighten; below ~620px the
   answers under each step go. The panel still scrolls as a last resort, with a fade to show there's more. */
@media (min-width: 900px) and (max-height: 860px) {
  .ob-guide {
    display: grid; grid-template-columns: clamp(76px, 11vh, 104px) minmax(0, 1fr); align-content: start; align-items: center;
    gap: 14px 14px; padding: 24px 28px 20px;
  }
  .ob-guide-bud { width: 100%; min-width: 0; max-width: 100%; align-self: center; }
  .ob-guide-bud .bud, .ob-guide-bud svg { width: 100%; height: auto; }
  .ob-bubble { font-size: 0.98rem; padding: 10px 14px; text-align: left; }
  .ob-bubble::before { left: -7px; top: 50%; transform: translateY(-50%) rotate(45deg); }
  .ob-side { grid-column: 1 / -1; margin-top: 4px; }
  .side-steps { margin-top: 8px; }
  .side-steps li { padding: 5px 0 6px; }
  .side-steps li:not(:last-child)::before { top: 33px; }
  .side-private { margin-top: 12px; padding-top: 12px; }
}
@media (min-width: 900px) and (max-height: 620px) {
  .ob-guide { padding: 18px 24px 16px; gap: 10px 12px; }
  .side-value { display: none; }
  .side-steps li { padding: 3px 0 4px; }
  .side-steps li:not(:last-child)::before { top: 30px; bottom: -3px; }
  .side-private { font-size: 0.8rem; }
}
@media (min-width: 900px) {
  .ob-guide {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
    padding-bottom: 36px;
  }
}

/* Phones: only the current step's name shows, so it may run past its short bar instead of being cut to "…". */
@media (max-width: 899px) {
  .ob-seg.is-now .ob-seg-label { overflow: visible; text-overflow: clip; }
}

/* ---------- Phones: one layout for every step ----------
   Top bar, Bud, the question, then the buttons pinned to the bottom of the screen in thumb reach, so
   "Continue" and "Start" never jump around between steps. Long screens still scroll under the
   sticky button bar. */
@media (max-width: 759px) {
  .ob-main { display: flex; flex-direction: column; padding-bottom: 0; }
  .ob-stage { flex: 1; display: flex; flex-direction: column; }
  .ob-stage > .ob-screen:not(.is-leaving) { flex: 1; display: flex; flex-direction: column; }
  .ob-screen > .ob-actions,
  .ob-screen > .task-actions,
  .ob-screen .hello-copy > .hello-cta { margin-top: auto; width: 100%; max-width: none; }
  .hello { display: flex; flex-direction: column; }
  .hello-copy { flex: 1; display: flex; flex-direction: column; }
  .ob-actions, .hello-cta { padding-top: 16px; }

  /* Voice tasks: a full-width Start like every other step, Skip quietly underneath */
  .task-actions {
    position: sticky; bottom: 0; z-index: 5;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 14px 0 max(14px, env(safe-area-inset-bottom));
    background: var(--mint); box-shadow: 0 -20px 16px -6px var(--mint);
  }
  .task-actions .btn-lg { min-width: 0; width: 100%; }
  .task-actions .btn-link { align-self: center; padding: 10px 16px; }
  .task-actions .btn-secondary { align-self: center; }
  .task-status { min-height: 1.4em; }
}

/* One progress indicator per step: the top bar names the stage, the task line says "3 of 6". */
.task-pips { display: none; }
.task-top { margin-bottom: 4px; }
.task-kicker { color: var(--coral-text); }
.mic > .eyebrow { display: none; }

/* Phones: the task box shares the screen with Bud, the question and the pinned Start button, so it
   takes its height from the screen instead of a fixed size (checked at 360x640 and 412x892). */
@media (max-width: 759px) {
  .pitch { height: clamp(120px, 26svh, 230px); }
  .pitch-tall { height: clamp(140px, 32svh, 280px); }
  .hold-wrap { grid-template-columns: 1fr 104px; align-items: center; padding: 8px 8px 8px 0; }
  .pitch-hold { height: clamp(110px, 20svh, 170px); }
  .hold-wrap .ring { width: 92px; height: 92px; }
  .hold-wrap .ring-num { font-size: 1.6rem; }
}
@media (max-width: 759px) and (max-height: 760px) {
  .ob-guide { min-height: 0; margin: 0 0 8px; gap: 8px; }
  .ob-guide-bud { width: 52px; }
  .ob-bubble { padding: 8px 12px; font-size: 0.9rem; }
  .ob-head { margin-bottom: 12px; }
  .ob-title { font-size: 1.6rem; }
  .ob-hint { font-size: 0.98rem; margin-top: 6px; }
  .task .ob-hint { margin-bottom: 10px; }
  .task-status { margin-top: 8px; font-size: 1.15rem; }
  .ob-actions, .task-actions, .hello-cta { padding-top: 10px; }
}

/* Bud's hello is the first screen after install: no progress bar yet, and a quiet way in for
   returning singers under the button. */
.ob-at-hello .ob-progress { opacity: 0; pointer-events: none; }
.ob-at-hello .ob-seg-label { visibility: hidden !important; }
.hello-cta .hello-time { order: 0; }
.hello-have { justify-self: center; align-self: center; min-height: 44px; padding: 8px 16px; font-weight: 700; color: var(--ink-soft); }
@media (max-width: 559px) { .hello-cta { gap: 8px; } }
@media (max-width: 559px) and (max-height: 650px) {
  .hello-bud { width: 84px; }
  .hello .eyebrow { margin-bottom: 2px; font-size: 0.78rem; }
  .hello-title { font-size: 1.8rem; }
  .hello-body { margin-top: 4px; font-size: 0.94rem; line-height: 1.4; }
  .hello-steps { margin-top: 10px; gap: 4px; }
  .hello-steps li { padding: 5px 10px; font-size: 0.9rem; }
  .hello-num { width: 22px; height: 22px; font-size: 0.8rem; }
  .privacy-line { margin-top: 8px; padding: 6px 10px; font-size: 0.84rem; }
  .ob-at-hello .ob-top { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 0; }
  .hello-cta { gap: 4px; padding-top: 8px; }
  .hello-have { min-height: 40px; padding: 6px 16px; }
}
@media (min-width: 760px) { .hello-have { justify-self: start; align-self: flex-start; padding-left: 0; } }

/* Phones of normal height: the hello is drawn at the proportions of a 360x711 phone and scales with
   the phone's width, so every phone shows the same composition (the user's pick, 18 Oct 2026). */
@media (max-width: 559px) and (min-height: 651px) {
  .hello-bud { width: min(39vw, 20svh, 210px); margin-bottom: 1.5vw; }
  .hello .eyebrow { margin-bottom: 1.5vw; font-size: min(3.7vw, 1rem); }
  .hello-title { font-size: min(9.9vw, 5svh, 2.9rem); }
  .hello-body { margin-top: 2.8vw; font-size: min(4.55vw, 2.4svh, 1.25rem); line-height: 1.45; }
  .hello-steps { margin-top: 5vw; gap: 2.2vw; }
  .hello-steps li { padding: 2.5vw 3.9vw; font-size: min(4.45vw, 1.2rem); }
  .hello-num { width: 7.8vw; height: 7.8vw; font-size: 3.9vw; }
  /* The privacy promise is said on the mic screen, right before the mic opens; here it would crowd Bud. */
  .hello .privacy-line { display: none; }
  .hello-copy > .hello-cta { margin-top: auto; padding-top: 6vw; gap: 2vw; }
  .hello-cta .btn-lg { min-height: min(15.5vw, 66px); font-size: min(5vw, 1.35rem); }
  .hello-time { font-size: min(3.9vw, 1.05rem); }
  .hello-time .ic { width: 5vw; height: 5vw; }
  .hello-have { font-size: min(4.45vw, 1.2rem); }
}
}

/* Results: the level leads, as a compact strip */
.results-title { line-height: 1.26; }
.results .level-card { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.results .level-card .card-title { margin: 0; }
.results .level-card .level-line { margin: 0; }
.results .level-card .card-note { flex-basis: 100%; }

/* Plan: one pinned way forward on phones; the start card keeps its buttons on wider screens */
.plan-bar { display: none; }
@media (max-width: 759px) {
  .plan-bar { display: flex; }
  .start-card .btn, .start-card .btn-link { display: none; }
  .planview .zone-chip { display: none; }
}

/* One-tap questions: no Continue to press. It comes back for keyboard users (focus-visible inside the
   form) and when a choice needs more (the event's type and date). */
.ob-auto:not(.ob-wait):not(:has(:focus-visible)) > .ob-actions { display: none; }

/* A mic problem is help, not an alarm: a soft card in plain weight */
.mic-status.is-error {
  padding: 10px 14px; border-radius: 16px; background: var(--blush);
  color: var(--ink); font-weight: 600; font-size: 0.95rem; text-align: left;
}

/* Typing (the on-screen keyboard is up): a pinned button bar would sit on top of the field being
   typed in, so while a text field has focus the buttons drop back into place right under it. The
   keyboard's Go key still submits. */
:is(.ob-screen, .sa, .sc-ytstart, .sheet):has(:is(input[type="text"], input[type="search"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], textarea):focus) :is(.ob-actions, .task-actions, .hello-cta, .plan-bar) {
  position: static; margin-top: 16px; box-shadow: none;
}

/* Phones, once a task is running (Start is gone): "Play it again" and "Skip" share one slim row and
   nothing fades over the status line above them. */
@media (max-width: 759px) {
  .task-actions:has(> [data-act="start"][hidden]) {
    flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 18px;
    padding-top: 8px; box-shadow: none;
  }
  .task-actions:has(> [data-act="start"][hidden]) > .btn-link { align-self: center; }
  .task-actions:has(> [data-act="start"][hidden]) > .btn-secondary { align-self: center; flex: none; }
}

/* ---------- Song first: "Which song would you love to sing?" ---------- */
.pick-field .input { font-size: 1.05rem; }
.pick-error { margin: 8px 0 0; color: var(--coral-text); font-weight: 700; font-size: 0.92rem; }
.pick-or { margin: 22px 0 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.pick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-chip {
  font: inherit; font-weight: 700; font-size: 0.95rem; color: var(--ink); cursor: pointer;
  padding: 10px 16px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--white);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.pick-chip:hover { border-color: var(--teal-deeper); }
.pick-chip[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: var(--white); }
.pick-chip:focus-visible { outline: 3px solid var(--teal-deeper); outline-offset: 2px; }
/* Short windows: Continue stays in view under the song chips. */
@media (min-width: 760px) and (max-height: 760px) {
  .ob-q:has(.pick-chips) .ob-actions { position: sticky; bottom: 0; z-index: 5; background: var(--mint); padding: 12px 0 14px; box-shadow: 0 -20px 16px -6px var(--mint); }
}

/* Hello on wide screens: the hero sits right under the header, and the header's cream logo block is as
   wide as the hero's art panel, so logo, Bud and the copy line up as two clean columns. */
@media (min-width: 900px) {
  .ob-shell.ob-at-hello .ob-stage { padding: 0 !important; }
  .ob-shell.ob-at-hello .ob-top { background: linear-gradient(to right, var(--cream) 46%, var(--mint) 46%) !important; box-shadow: none !important; }
  /* The art panel's edge line runs up through the header, where the side panel's line was. */
  .ob-shell.ob-at-hello .ob-top::after { left: calc(46% - 2px) !important; }
  .ob-shell.ob-at-hello .ob-top-inner .ob-brand { width: 46vw !important; min-width: 0 !important; margin-left: -32px !important; justify-content: center; }
}
/* Short laptop windows: the hero fits on one screen, "Let's go" included. */
@media (min-width: 900px) and (max-height: 720px) {
  .ob-shell.ob-at-hello .hello { min-height: calc(100svh - var(--top-h)); }
  .ob-shell.ob-at-hello .hello-copy { padding-top: 20px; padding-bottom: 20px; }
  .ob-shell.ob-at-hello .hello-title { font-size: clamp(2.4rem, 1.2rem + 3vh, 3.4rem); }
  .ob-shell.ob-at-hello .hello-body { margin-top: 10px; font-size: 1.05rem; }
  .ob-shell.ob-at-hello .hello-steps { margin-top: 14px; gap: 6px; }
  .ob-shell.ob-at-hello .hello-steps li { padding-top: 7px; padding-bottom: 7px; }
  .ob-shell.ob-at-hello .privacy-line { margin-top: 10px; padding-top: 8px; padding-bottom: 8px; }
  .ob-shell.ob-at-hello .hello-cta { margin-top: 12px; }
  .ob-shell.ob-at-hello .hello-art::before { width: min(76%, 62vh); }
  .ob-shell.ob-at-hello .hello-bud { width: min(66%, 54vh); }
}
@media (min-width: 900px) and (max-height: 600px) {
  .ob-shell.ob-at-hello .hello-steps { display: none; }
  .ob-shell.ob-at-hello .eyebrow { margin-bottom: 8px; }
}

/* Song first: upload a song file instead of typing or linking it. */
.pick-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; }
.pick-file-btn { display: inline-flex; align-items: center; gap: 6px; }
.pick-file-btn .ic { width: 18px; height: 18px; }
.pick-file-on { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; color: var(--teal-deeper); }
.pick-file-on .ic { width: 16px; height: 16px; flex: none; }