/* Singbud app: shell, tabs, screens.
   Builds on base.css (tokens, buttons, Bud) and onboarding.css (voice check, cards, results).
   Same hand as the landing page: flat colour blocks, solid bottom edges instead of blurry shadows,
   ink outlines on illustrations, gentle motion only. Mobile first. */

:root {
  --tab-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --rail-w: 248px;
}

html, body { min-height: 100%; }
body { background: var(--mint); overscroll-behavior-y: none; }
#app { min-height: 100svh; }
.full-view { min-height: 100svh; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic .ic-fill { fill: var(--coral); stroke: currentColor; }
.btn .ic { width: 22px; height: 22px; }
.btn-primary .ic { stroke: var(--white); }
.btn-primary .ic .ic-fill { fill: var(--white); }
.btn-link.danger { color: var(--coral-text); }

/* ---------- Tab shell ---------- */

.app-shell { min-height: 100svh; }
.app-main { min-width: 0; }
.view { padding: calc(14px + var(--safe-t)) var(--gutter) calc(var(--tab-h) + 32px + var(--safe-b)); }
.view:focus { outline: none; }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--white);
  box-shadow: 0 -2px 0 var(--track);
  padding-bottom: var(--safe-b);
}
.rail-brand, .rail-user { display: none; }
.tab-list { list-style: none; margin: 0 auto; padding: 0 6px; max-width: 600px; display: grid; grid-template-columns: repeat(5, 1fr); }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--tab-h); padding: 6px 4px;
  text-decoration: none; color: var(--ink-soft);
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
}
.tab .ic { width: 26px; height: 26px; padding: 3px 14px; box-sizing: content-box; border-radius: 999px; transition: background-color 160ms ease; }
.tab .ic .ic-fill { fill: var(--dash); }
.tab.is-on { color: var(--ink); }
.tab.is-on .ic { background: var(--blush); }
.tab.is-on .ic .ic-fill { fill: var(--coral); }
.tab:active .ic { transform: scale(0.94); }

.avatar {
  --av: var(--coral);
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--av); color: var(--ink);
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  box-shadow: inset 0 0 0 2.5px var(--ink);
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; box-shadow: inset 0 0 0 3px var(--ink); }

/* ---------- Pages ---------- */

.page { max-width: 1120px; margin: 0 auto; }
.page-head { margin: 4px 0 16px; }
.page-head .eyebrow { margin-bottom: 6px; }
.page-title { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); line-height: 1.1; }
.page-title:focus { outline: none; }
.page-lede { margin-top: 8px; color: var(--ink-soft); max-width: 60ch; }

.hcard {
  margin-top: 14px; padding: 18px;
  border-radius: 18px; background: var(--white); box-shadow: var(--sh-card);
}
.card h2.card-title, .hcard h2 { font-size: 1.15rem; }

/* ---------- Home ---------- */

.home-grid { display: grid; gap: 0 20px; }
.today {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 104px; grid-template-areas: "head bud" "actions actions";
  gap: 6px 10px; padding: 20px 18px 20px;
  background: var(--teal); box-shadow: var(--sh-card);
}
.today .eyebrow { color: var(--ink); margin-bottom: 6px; }
.today-head { grid-area: head; min-width: 0; }
.today-title { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); line-height: 1.1; }
.today-body { margin-top: 8px; color: #23434A; }
.today-bud { grid-area: bud; align-self: start; width: 104px; margin-top: -4px; }
.today-parts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.today-parts li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.75);
  font-weight: 700; font-size: 0.85rem;
}
.today-parts .part-swatch { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); }
.today-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; }
.today-actions .btn-lg { flex: 1 1 100%; }
.today-done { background: var(--sun); box-shadow: var(--sh-card); }
.today-locked { background: var(--blush); box-shadow: var(--sh-card); }
.today-done .today-actions .btn, .today-locked .today-actions .btn { flex: 1 1 auto; }

.due-card {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center;
  background: var(--cream); box-shadow: var(--sh-card);
}
.due-card .btn { grid-column: 1 / -1; }
.due-text h2 { font-size: 1.15rem; }
.due-text p { margin-top: 2px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.4; }
.due-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--white); }
.due-icon .ic { width: 28px; height: 28px; }

.week-strip { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.week-strip li { display: grid; justify-items: center; gap: 6px; }
.wk-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); box-shadow: inset 0 0 0 2px var(--track); }
.wk-dot .ic { width: 18px; height: 18px; stroke: var(--white); stroke-width: 3; }
.week-strip li.on .wk-dot { background: var(--teal-dark); box-shadow: none; }
.week-strip li.is-today .wk-dot { box-shadow: inset 0 0 0 2.5px var(--coral); }
.week-strip li.is-today.on .wk-dot { box-shadow: 0 0 0 2.5px var(--coral); }
.wk-day { font-weight: 700; font-size: 0.78rem; color: var(--ink-soft); }
.is-today .wk-day { color: var(--coral-text); }

.stat-grid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 8px;
  height: 100%; padding: 14px 14px 14px;
  border-radius: 16px; background: var(--white); box-shadow: var(--sh-card);
  text-decoration: none; color: var(--ink);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
a.stat-tile:active { transform: translateY(1px); box-shadow: var(--sh-press); }
.stat-icon { grid-row: 1; width: 26px; height: 26px; }
.stat-icon .ic { width: 26px; height: 26px; }
.stat-label { align-self: center; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.stat-value { grid-column: 1 / -1; margin-top: 8px; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
.stat-sub { grid-column: 1 / -1; margin-top: 2px; color: var(--ink-soft); font-size: 0.84rem; line-height: 1.3; }
.home-ticket { margin-top: 26px; }

/* ---------- Path ---------- */

.path-list { display: grid; gap: 16px; }
.lvl-card { padding: 18px; border-radius: 18px; background: var(--white); box-shadow: var(--sh-card); scroll-margin-top: 16px; }
.lvl-now { box-shadow: 0 0 0 3px var(--coral), var(--sh-solid); }
.lvl-later { background: #F7FCFC; box-shadow: var(--sh-card); }
.lvl-head { display: grid; grid-template-columns: 44px 1fr; gap: 6px 12px; align-items: start; }
.lvl-head h2 { font-size: 1.3rem; }
.lvl-head p { margin-top: 2px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.4; }
.lvl-later .level-badge { background: var(--dash); box-shadow: var(--sh-solid); }
.lvl-past .level-badge { background: var(--teal-dark); box-shadow: var(--sh-card); }
.lvl-status {
  grid-column: 2; justify-self: start;
  padding: 2px 10px; border-radius: 999px; background: var(--mint);
  font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
.lvl-now .lvl-status { background: var(--coral); color: var(--white); }
.lvl-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 14px 0 6px; font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); }
.lessons { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; position: relative; }
.lesson {
  width: 100%; min-height: 64px;
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px 10px 10px; border: 0; border-radius: 14px;
  background: var(--mint); text-align: left; cursor: pointer;
  transition: transform 90ms ease-out, background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.lesson:active { transform: scale(0.985); }
.lesson-node { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--white); box-shadow: inset 0 0 0 2.5px var(--dash); }
.lesson-node .ic { width: 22px; height: 22px; }
.lesson.is-done .lesson-node { background: var(--teal-dark); box-shadow: none; }
.lesson.is-done .lesson-node .ic { stroke: var(--white); stroke-width: 3; }
.lesson.is-open .lesson-node { background: var(--white); box-shadow: inset 0 0 0 2.5px var(--teal-dark); }
.lesson.is-next { background: var(--blush); }
.lesson.is-next .lesson-node { background: var(--coral); box-shadow: var(--sh-solid); }
.lesson.is-next .lesson-node .ic { stroke: var(--white); }
.lesson.is-next .lesson-node .ic .ic-fill { fill: var(--white); }
.lesson.is-locked, .lesson.is-paywall { background: #F2F7F7; }
.lesson.is-locked .lesson-text, .lesson.is-paywall .lesson-text { color: var(--ink-soft); }
.lesson.is-locked .lesson-node .ic .ic-fill, .lesson.is-paywall .lesson-node .ic .ic-fill { fill: var(--dash); }
.lesson-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lesson-text small { color: var(--ink-soft); font-size: 0.86rem; }
.lesson-tag { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.lesson.is-next .lesson-tag { color: var(--coral-text); }
.lvl-card .card-note { margin-top: 10px; }

/* ---------- Progress ---------- */

.progress-grid, .profile-grid { display: grid; gap: 0 20px; align-items: start; }
.progress .skills { margin-top: 12px; }
.progress .skill-word { opacity: 1; }
.progress .skill-fill { transform: scaleX(var(--v)); }
.hist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.hist-item { padding-top: 12px; border-top: 2px solid var(--track); }
.hist-item:first-child { border-top: 0; padding-top: 0; }
.hist-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.hist-head .next-date { padding: 3px 10px; }
.hist-level { margin-left: auto; font-weight: 700; font-size: 0.85rem; color: var(--ink-soft); }
.hist-chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hist-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--mint); font-size: 0.85rem; }
.hist-chips li span:first-child { color: var(--ink-soft); font-weight: 600; }
.hist-chips li .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.hist-chips li.up { background: var(--belly); }
.hist-chips li.up .ic { stroke: #2F8586; }
.hist-chips li.down .ic { stroke: var(--coral-text); }
.check-card .check-head { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.check-card .due-icon { background: var(--mint); }
.check-when { font-weight: 700; color: var(--ink-soft); font-size: 0.95rem; }
.check-card.is-due { background: var(--cream); box-shadow: var(--sh-card); }
.check-card.is-due .check-when { color: var(--coral-text); }
.check-card .btn { margin-top: 14px; width: 100%; }
.log-stats { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.log-stats li { display: grid; gap: 2px; padding: 12px 8px; border-radius: 16px; background: var(--mint); text-align: center; }
.log-stats b { font-family: var(--font-head); font-size: 1.6rem; line-height: 1.1; }
.log-stats span { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); line-height: 1.25; }

/* ---------- Profile ---------- */

.user-card { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.user-card .btn { grid-column: 1 / -1; justify-self: start; }
.user-name { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; line-height: 1.15; }
.user-sub { margin-top: 2px; color: var(--ink-soft); font-size: 0.92rem; }
.demo-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--sun); color: var(--ink); font-weight: 700; font-size: 0.78rem; }
.goal-chips { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.goal-chips li { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--mint); font-weight: 700; }
.goal-chips li.is-main { background: var(--blush); }
.goal-chips small { margin-left: auto; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-text); }
.goal-chips .goal-icon { width: 36px; height: 36px; background: var(--white); }
.event-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--sun); line-height: 1.4; }
.seg-ctl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; padding: 5px; border-radius: 14px; background: var(--mint); }
.seg-ctl.style-ctl { grid-template-columns: repeat(3, 1fr); }
.seg-ctl input { position: absolute; opacity: 0; pointer-events: none; }
.seg-ctl span {
  display: grid; place-items: center; min-height: 44px; border-radius: 14px;
  font-weight: 700; cursor: pointer; transition: background-color 150ms ease;
}
.seg-ctl input:checked + span { background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong), 0 1px 3px rgba(46, 61, 68, 0.1); }
.seg-ctl input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.setting-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.setting-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.setting-row .input-time { background: var(--mint); box-shadow: none; }
.card-head .btn-sm { flex: none; }
.unlock-card.is-unlocked { background: var(--belly); box-shadow: var(--sh-card); }
.unlock-card .btn { margin-top: 12px; }
.privacy-left { justify-content: flex-start; text-align: left; margin: 10px 0 0; max-width: none; }
.demo-tools { background: #F6F3E6; box-shadow: var(--sh-card); }
.demo-tools .card-title { display: flex; align-items: center; gap: 8px; }
.demo-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.demo-jump { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.demo-jump label { font-weight: 700; }
.demo-jump .input { width: 90px; min-height: 44px; padding: 6px 14px; }
.account-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* ---------- Sheets, toast ---------- */

.sheet-wrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(46, 61, 68, 0.42); }
.sheet {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100svh - 24px); overflow-y: auto;
  padding: 22px var(--gutter) calc(22px + var(--safe-b));
  border-radius: 20px 20px 0 0; background: var(--white);
}
.sheet-art { width: 96px; margin: -4px auto 4px; }
.sheet-title { font-size: 1.5rem; text-align: left; }
.sheet-title:focus { outline: none; }
.sheet-body { margin-top: 8px; color: var(--ink-soft); }
.sheet-body .input { margin-top: 10px; }
.sheet-hint { font-size: 0.95rem; }
.sheet-main { margin-top: 10px; font-weight: 700; color: var(--ink); }
.sheet-event { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--mint); color: var(--ink); }
.goal-pick { margin-top: 12px; }
.sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.mic-canvas { height: 170px; margin-top: 12px; border-radius: 14px; background: var(--mint); }
.mic-read { margin-top: 10px; font-weight: 700; color: var(--ink); text-align: center; }
.mic-meter { position: static; justify-content: center; margin-top: 8px; }

.app-toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + 18px + var(--safe-b)); z-index: 70;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--cream); font-weight: 700; font-size: 0.95rem; text-align: center;
  transition: opacity 200ms ease, transform 260ms var(--ease-out);
}
.app-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
body.is-full .app-toast { bottom: calc(24px + var(--safe-b)); }

/* ---------- Login ---------- */

/* One message, one button: Bud on a sun with notes drifting off, a short headline, and "Get started"
   pinned to the bottom in thumb reach. The same centred column on every screen size. */
.login {
  min-height: 100svh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 38%, var(--mint) 72%);
}
.login-art {
  position: relative; flex: 1 1 auto; min-height: 230px;
  display: grid; place-items: center;
  padding: calc(20px + var(--safe-t)) 0 8px;
}
.login-sun {
  position: absolute; width: min(74vw, 46svh, 380px); aspect-ratio: 1; border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 18px rgba(244, 239, 200, 0.45), 0 0 0 40px rgba(244, 239, 200, 0.22);
  animation: login-sun 900ms var(--ease-out, cubic-bezier(.23, 1, .32, 1)) both;
}
.login-bud { position: relative; width: min(60vw, 36svh, 300px); animation: login-pop 700ms cubic-bezier(.34, 1.56, .64, 1) 120ms both; }
.login-bud .bud { animation: bob 4.5s ease-in-out 900ms infinite; }
.login-bud.bud-float { animation: login-pop 700ms cubic-bezier(.34, 1.56, .64, 1) 120ms both; }

/* Notes leave from about where Bud's beak is and drift up and away */
.login-note {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 30px; fill: var(--coral);
  opacity: 0; animation: login-note 3.6s ease-out infinite;
}
.login-note.n2 { width: 34px; fill: var(--teal-dark); animation-delay: 0.9s; }
.login-note.n3 { width: 20px; fill: var(--yellow); animation-delay: 1.8s; }
.login-note.n4 { width: 24px; fill: var(--cheek); animation-delay: 2.7s; }
@keyframes login-note {
  0% { opacity: 0; transform: translate(min(18vw, 90px), -20px) scale(0.6) rotate(-8deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(min(34vw, 170px), -150px) scale(1.05) rotate(14deg); }
}
.login-note.n2 { animation-name: login-note-b; }
.login-note.n4 { animation-name: login-note-c; }
@keyframes login-note-b {
  0% { opacity: 0; transform: translate(min(18vw, 90px), -20px) scale(0.6) rotate(6deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(min(26vw, 130px), -190px) scale(1) rotate(-10deg); }
}
@keyframes login-note-c {
  0% { opacity: 0; transform: translate(min(18vw, 90px), -20px) scale(0.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(min(40vw, 200px), -90px) scale(0.9) rotate(20deg); }
}
@keyframes login-pop { from { opacity: 0; transform: scale(0.6) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes login-sun { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes login-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.login-copy { padding: 8px var(--gutter) 0; max-width: 520px; width: 100%; margin: 0 auto; text-align: center; }
.login-brand {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink-soft);
  animation: login-rise 500ms var(--ease-out, ease-out) 300ms both;
}
.login-brand img { width: 28px; height: 28px; max-width: none; margin: -3px; }
.login-title {
  font-size: clamp(2.2rem, 1.7rem + 2.6vw, 3.2rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em;
  animation: login-rise 500ms var(--ease-out, ease-out) 380ms both;
}
.login-title:focus { outline: none; }
.login-title .squiggle-line path { animation: draw-on 0.9s cubic-bezier(.6, 0, .3, 1) 0.8s both; }
.login-lede {
  margin: 12px auto 0; max-width: 30ch; color: var(--ink-soft); font-size: 1.1rem; line-height: 1.45;
  animation: login-rise 500ms var(--ease-out, ease-out) 460ms both;
}
.login-actions {
  display: grid; gap: 4px; width: 100%; max-width: 480px; margin: 0 auto;
  padding: 26px var(--gutter) calc(14px + var(--safe-b));
  animation: login-rise 500ms var(--ease-out, ease-out) 560ms both;
}
.login-have { justify-self: center; padding: 12px 16px; min-height: 48px; font-weight: 700; color: var(--ink-soft); }

/* The returning-user sheet */
.login-gsi { width: 100%; margin-top: 16px; }
.sheet .demo-note { margin-top: 14px; text-align: left; }

/* Short phones: the art gives way first, the headline and button never move off screen */
@media (max-height: 640px) {
  .login-art { min-height: 160px; padding-top: calc(8px + var(--safe-t)); }
  .login-title { font-size: 2rem; }
  .login-lede { margin-top: 8px; font-size: 1rem; }
  .login-actions { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-note { display: none; }
  .login-sun, .login-bud, .login-bud .bud, .login-brand, .login-title, .login-lede, .login-actions { animation: none !important; }
}

/* Google sign-in button, per Google's branding guidelines: white fill, #747775 outline,
   #1F1F1F text in Roboto Medium, the standard four-colour G. Pill shape is allowed. */
.gsi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 0 20px;
  border: 1px solid #747775; border-radius: 999px; background: #FFFFFF; color: #1F1F1F;
  font-family: 'Roboto', 'Figtree', system-ui, sans-serif; font-weight: 500; font-size: 1rem; letter-spacing: 0.25px;
  cursor: pointer; transition: background-color 218ms, box-shadow 218ms;
  -webkit-tap-highlight-color: transparent;
}
.gsi-btn:hover { background: #F8FAFF; box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); }
.gsi-btn:active { background: #EEF1F6; }
.gsi-btn[disabled] { opacity: 0.7; cursor: default; }
.gsi-icon { width: 20px; height: 20px; flex: none; }
.gsi-logo { width: 20px; height: 20px; }
.demo-note {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px; border-radius: 14px; background: var(--sun);
  font-size: 0.88rem; line-height: 1.4; color: var(--ink);
}
.demo-note .ic { width: 20px; height: 20px; }

/* ---------- Unlock (paywall) ---------- */

.unlock { min-height: 100svh; background: var(--cream); }
.unlock-top { position: absolute; top: calc(12px + var(--safe-t)); right: var(--gutter); z-index: 2; }
.unlock-main { max-width: 1040px; margin: 0 auto; padding: calc(20px + var(--safe-t)) var(--gutter) calc(32px + var(--safe-b)); }
.unlock-art { display: grid; place-items: center; }
.unlock-bud { width: 150px; }
.unlock-title { margin-top: 6px; font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.unlock-title:focus { outline: none; }
.unlock-lede { margin-top: 10px; color: var(--ink-soft); font-size: 1.08rem; }
.unlock-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.unlock-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; line-height: 1.35; }
.unlock-list .ic { width: 20px; height: 20px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--teal); stroke-width: 2.8; }
.price-card { margin-top: 22px; padding: 20px 18px; border-radius: 18px; background: var(--white); box-shadow: var(--sh-card); display: grid; gap: 12px; }
.price { display: flex; align-items: baseline; gap: 10px; }
.price b { font-family: var(--font-head); font-weight: 700; font-size: 3rem; line-height: 1; letter-spacing: -0.03em; }
.price span { font-weight: 700; color: var(--ink-soft); }
.price-sub { color: var(--ink-soft); font-weight: 600; }
.unlock-copy > .btn-link { display: block; margin: 14px auto 0; }

/* ---------- Session player ---------- */

.ob-spacer { visibility: hidden; }
.ex-zone { margin: 0; transition: background-color 300ms ease; white-space: nowrap; }
.ex-zone.is-narrow { animation: zone-in 700ms var(--ease-out); background: var(--belly); }
.ex-zone.is-widen { animation: zone-out 700ms var(--ease-out); background: var(--sun); }
@keyframes zone-in { 0% { transform: scale(1); } 35% { transform: scale(0.86); } 100% { transform: scale(1); } }
@keyframes zone-out { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
.ex-body { position: relative; }
.ex-progress { height: 8px; margin: 10px 16px 0; border-radius: 999px; background: var(--track); overflow: hidden; }
.ex-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--coral); transform-origin: left center; transform: scaleX(0.0001); transition: transform 120ms linear; }
.ex .meter { position: static; justify-content: flex-end; padding: 8px 16px 10px; }
.ex-listen .ex-progress { display: none; }
.pitch-lane { height: 230px; }
.ex-result { margin-top: 10px; text-align: center; }
.ex-score { font-size: 1.15rem; }
.ex-score b { font-family: var(--font-head); font-size: 1.5rem; margin-right: 4px; }
.ex-result-actions { display: flex; flex-direction: column; gap: 10px; margin: 14px auto 0; max-width: 420px; }
.ex-listen { display: grid; justify-items: center; gap: 6px; padding: 12px 16px 4px; }
.ex-listen-note { font-size: 0.85rem; color: var(--ink-soft); text-align: center; }
.loud { position: relative; height: 26px; margin: 10px 16px 0; border-radius: 999px; background: var(--track); overflow: hidden; }
.loud-fill { position: absolute; inset: 0; background: var(--teal-dark); transform-origin: left center; transform: scaleX(0); }
.loud-label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.task-top { flex-wrap: wrap; }
.s-parts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.s-parts li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; background: var(--white); box-shadow: var(--sh-card); }
.s-parts .part-swatch { margin-top: 5px; }
.s-parts b { display: block; }
.s-parts small { color: var(--ink-soft); font-size: 0.9rem; }
.stat-row { display: grid; gap: 10px; margin-top: 16px; }
.stat { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--white); box-shadow: var(--sh-card); }
.stat .stat-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--mint); }
.stat-text b { display: block; font-family: var(--font-head); font-size: 1.35rem; line-height: 1.15; }
.stat-text small { color: var(--ink-soft); font-weight: 700; }
.start-card { display: flex; flex-direction: column; }
.start-card .btn { width: 100%; margin-top: 12px; }
.start-card .btn-lg { margin-top: 16px; }
.start-card .btn-link { align-self: center; margin-top: 12px; }

/* Check-up and retest results */
.change-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.change-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; border-radius: 14px; background: var(--mint); }
.change-list li.is-up { background: var(--belly); }
.change-name { font-weight: 700; }
.change-words { display: inline-flex; align-items: center; gap: 6px; }
.change-words s { color: var(--ink-soft); }
.change-words .ic { width: 16px; height: 16px; stroke-width: 2.8; }
.ba-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 16px; padding: 16px; border-radius: 18px; background: var(--white); box-shadow: var(--sh-card); }
.ba-col { padding: 12px; border-radius: 14px; background: var(--mint); text-align: center; min-width: 0; }
.ba-now { background: var(--sun); }
.ba-kicker { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-text); }
.ba-big { margin-top: 4px; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
.ba-small { margin-top: 2px; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.ba-arrow .ic { width: 22px; height: 22px; stroke-width: 2.6; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ex-zone.is-narrow, .ex-zone.is-widen { animation: none; }
  .ex-progress-fill { transition: none; }
}

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

@media (min-width: 560px) {
  .today { grid-template-columns: 1fr 130px; padding: 24px; }
  .today-bud { width: 130px; }
  .today-actions .btn-lg { flex: 0 1 auto; min-width: 280px; }
  .due-card { grid-template-columns: 44px 1fr auto; }
  .due-card .btn { grid-column: auto; }
  .sheet-actions { flex-direction: row-reverse; justify-content: flex-start; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .ex-result-actions { flex-direction: row; justify-content: center; }
  .lvl-head { grid-template-columns: 44px 1fr auto; }
  .lvl-status { grid-column: auto; justify-self: end; }
  .user-card { grid-template-columns: 64px 1fr auto; }
  .user-card .btn { grid-column: auto; }
}

@media (min-width: 760px) {
  .sheet-wrap { align-items: center; }
  .sheet { border-radius: 20px; padding: 28px 28px 26px; box-shadow: var(--sh-card); }
  .pitch-lane { height: 280px; }
  .view { padding-top: 28px; }
}

/* Desktop: the tabs become a side rail; content gets two columns */
@media (min-width: 960px) {
  .app-shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .tabs {
    position: sticky; top: 0; bottom: auto; height: 100svh;
    display: flex; flex-direction: column; gap: 18px;
    padding: 24px 16px; background: var(--cream); box-shadow: inset -2px 0 0 var(--cream-deep);
  }
  .rail-brand {
    display: inline-flex; align-items: center; gap: 8px; padding: 0 8px;
    font-family: var(--font-head); font-weight: 700; font-size: 1.45rem; text-decoration: none;
  }
  .rail-brand img { width: 44px; height: 44px; max-width: none; margin: -4px; }
  .tab-list { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 0; max-width: none; margin: 0; }
  .tab { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 52px; padding: 6px 12px 6px 6px; border-radius: 16px; font-size: 1.02rem; }
  .tab .ic { padding: 6px; }
  .tab:hover { background: rgba(255, 255, 255, 0.6); color: var(--ink); }
  .tab.is-on { background: var(--white); box-shadow: var(--sh-card); }
  .tab.is-on .ic { background: var(--blush); }
  .rail-user {
    display: flex; align-items: center; gap: 10px; margin-top: auto;
    padding: 10px; border-radius: 16px; text-decoration: none; background: rgba(255, 255, 255, 0.6);
  }
  .rail-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .rail-user-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-user-text small { color: var(--ink-soft); font-weight: 700; }
  .view { padding: 40px clamp(28px, 4vw, 64px) 64px; }
  .app-toast { bottom: 28px; }
  .home-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); }
  .home-main, .home-side { display: flex; flex-direction: column; }
  .home-main > :last-child, .home-side > :last-child { flex: 1 0 auto; }
  .home-side .jx-card { align-content: space-between; }
  .hcard.week { display: flex; flex-direction: column; }
  .hcard.week .card-note { margin-top: auto; padding-top: 12px; }
  /* Bud beside the eyebrow and title only, so he's sized to them: no gap above the parts. */
  .today { grid-template-columns: 1fr 108px; }
  .today-bud { width: 108px; }
  .today .today-title { font-size: 1.7rem; }
  .home-side .stat-grid { margin-top: 14px; }
  .progress-grid, .profile-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .path-list { grid-template-columns: 1fr 1fr; align-items: start; }


  .unlock-main { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; gap: 40px; min-height: 100svh; padding-top: 48px; }
  .unlock-bud { width: min(100%, 340px); }
  .price-card { max-width: 460px; }
  .unlock-copy > .btn-link { margin-left: 0; }
}

/* After a song: how each note went */
.review { margin: 14px auto 0; max-width: 520px; padding: 14px 16px; border-radius: 16px; background: var(--white); box-shadow: var(--sh-card); text-align: left; }
.review-title { font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.review-lines { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.review-line { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rv { display: inline-flex; align-items: center; gap: 3px; min-height: 32px; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; background: var(--track); }
.rv .ic { width: 15px; height: 15px; stroke-width: 3; }
.rv-hit { background: var(--teal); }
.rv-low, .rv-high { background: var(--cheek); }
.rv-quiet { background: transparent; box-shadow: inset 0 0 0 2px var(--track); color: var(--ink-soft); }
.review-key { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.82rem; color: var(--ink-soft); }
.review-key li { display: inline-flex; align-items: center; gap: 6px; }
.review-key i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--track); }
.review-key i .ic { width: 12px; height: 12px; stroke-width: 3; }
.review-key .rv-hit i { background: var(--teal); }
.review-key .rv-low i, .review-key .rv-high i { background: var(--cheek); }
.review-key .rv-quiet i { background: transparent; box-shadow: inset 0 0 0 2px var(--track); }
.review-key .rv-hit, .review-key .rv-low, .review-key .rv-high, .review-key .rv-quiet { background: none; padding: 0; min-height: 0; }
.review-tip { margin-top: 10px; font-size: 0.98rem; }

/* ---------- Kept takes: then and now ---------- */
.ex-listen-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.takes-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 14px; }
.take-song > b { display: block; margin-bottom: 6px; }
.take-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.take { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.take:hover { border-color: var(--teal-dark); }
.take[aria-pressed="true"] { border-color: var(--teal-deeper); background: var(--mint); }
.take-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--ink); }
.take-icon svg { width: 16px; height: 16px; }
.take-text { display: grid; gap: 2px; min-width: 0; }
.take-slot { font-weight: 700; }
.take-text small { color: var(--ink-soft); font-size: 0.8rem; }
.takes-delete { margin-top: 4px; }
.takes .card-title { margin-bottom: 12px; }

/* ---------- Adjusting the comfortable notes ---------- */
.notes-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.notes-row .card-note { margin: 0; }
.range-edge { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.range-label { font-weight: 700; }
.range-step { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.range-step:hover:not(:disabled) { border-color: var(--teal-dark); }
.range-step:disabled { opacity: 0.35; cursor: default; }
.range-step svg { width: 18px; height: 18px; }
.range-note { min-width: 84px; padding: 6px 10px; border-radius: 14px; border: 0; background: var(--mint); color: var(--ink); font: inherit; display: grid; justify-items: center; cursor: pointer; }
.range-note b { font-size: 1.15rem; }
.range-note small { font-size: 0.72rem; color: var(--ink-soft); }
@media (max-width: 380px) { .range-edge { grid-template-columns: 1fr auto auto auto; } .range-label { grid-column: 1 / -1; } }
.setting-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }

/* ---------- Sound check ---------- */
.s-sound { width: 100%; max-width: 560px; margin: 0 auto; }
.sc { display: grid; gap: 14px; }
.sc-title { font-family: var(--font-head); font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; margin: 0; }
.sc-title:focus { outline: none; }
.sc-body { margin: 0; color: var(--ink-soft); }
.sc-choices { display: grid; gap: 10px; }
.sc-choice { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sc-choice:hover:not(:disabled) { border-color: var(--teal-dark); }
.sc-choice:disabled { opacity: 0.6; cursor: default; }
.sc-choice > .ic { flex: none; width: 28px; height: 28px; }
.sc-choice span { display: grid; gap: 2px; }
.sc-choice small { color: var(--ink-soft); }
.sc-meter { justify-self: center; }
.sc-note { min-height: 1.5em; margin: 0; text-align: center; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sc-note .ic { width: 20px; height: 20px; }
.sc-note.is-good, .sc-status.is-good { color: var(--teal-deeper); }
.sc-status { min-height: 1.5em; margin: 0; text-align: center; }
.sc-status.is-error { color: var(--coral-text); }
.sc-help { background: var(--cream); border-radius: 16px; padding: 14px 16px; }
.sc-help p { margin: 0 0 6px; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sc-skip { justify-self: center; }
.sc-tap { justify-self: center; width: 150px; height: 150px; border-radius: 50%; border: 0; background: var(--coral); color: var(--white); font: 700 1.3rem var(--font-head); cursor: pointer; box-shadow: var(--sh-solid); touch-action: manipulation; }
.sc-tap:active { transform: translateY(1px); box-shadow: var(--sh-press); }
.sc-tap.is-hit { animation: sc-pop 180ms ease-out; }
@keyframes sc-pop { from { transform: scale(0.94); } to { transform: none; } }
.sc-summary { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sc-summary li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--mint); }
.sc-summary .ic { flex: none; width: 22px; height: 22px; }
.sc-host .sc-title { font-size: 1.4rem; }
@media (prefers-reduced-motion: reduce) { .sc-tap.is-hit { animation: none; } }

/* ---------- Speed and loop ---------- */
.tempo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 6px; }
.tempo { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--white); padding: 2px; }
.tempo button { border: 0; background: none; color: var(--ink-soft); font: 600 0.85rem var(--font-body); padding: 6px 12px; border-radius: 999px; cursor: pointer; min-height: 32px; }
.tempo button[aria-pressed="true"] { background: var(--teal); color: var(--ink); }
.tempo-loop { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--white); color: var(--ink-soft); font: 600 0.85rem var(--font-body); padding: 6px 12px; border-radius: 999px; cursor: pointer; min-height: 36px; }
.tempo-loop .ic { width: 16px; height: 16px; }
.tempo-loop[aria-pressed="true"] { background: var(--teal); border-color: var(--teal-deeper); color: var(--ink); }

/* ---------- Songs tab: the library ---------- */
.songs-tools { display: grid; gap: 12px; margin: 16px 0 14px; }
.songs-search .input { width: 100%; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
/* Phones: the row scrolls sideways and fades at the edge so it's clear there's more. Wide screens: it wraps. */
@media (max-width: 959px) {
  .chips { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
}
@media (min-width: 960px) { .chips { flex-wrap: wrap; overflow: visible; } }
.chip { flex: none; border: 1px solid var(--line); background: var(--white); color: var(--ink-soft); font: 600 0.88rem var(--font-body); padding: 7px 14px; border-radius: 999px; cursor: pointer; min-height: 38px; }
.chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal-deeper); color: var(--ink); }
.lib-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.lib-card { display: flex; align-items: stretch; background: var(--white); border-radius: 16px; box-shadow: var(--sh-card); overflow: hidden; }
.lib-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lib-main:hover .lib-icon { background: var(--teal-dark); }
.lib-icon { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--ink); }
.lib-icon .ic { width: 18px; height: 18px; }
.is-locked .lib-icon { background: var(--cream-deep); }
.lib-text { display: grid; gap: 2px; min-width: 0; }
.lib-text b { font-size: 1.02rem; }
.lib-text small { color: var(--ink-soft); font-size: 0.82rem; }
.lib-fit { color: var(--teal-deeper) !important; font-weight: 600; }
.lib-fit.is-stretch { color: var(--coral-text) !important; }
.lib-side { display: flex; align-items: center; gap: 2px; padding-right: 8px; }
.lib-fav, .lib-rec { width: 44px; height: 44px; border: 0; background: none; color: var(--dash); display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.lib-fav:hover, .lib-rec:hover { background: var(--mint); color: var(--ink-soft); }
.lib-fav .ic, .lib-rec .ic { width: 20px; height: 20px; }
.lib-fav .ic .ic-fill, .lib-rec .ic .ic-fill { fill: none; }
.lib-fav[aria-pressed="true"] { color: var(--coral); }
.lib-fav[aria-pressed="true"] .ic .ic-fill { fill: var(--coral); }
.lib-rec .ic .ic-fill { fill: currentColor; }
.songs-empty { padding: 24px 0; text-align: center; }
.songs-note { margin-top: 18px; }

/* ---------- Path / practice switch and the practice library ---------- */
.seg-switch { display: inline-flex; margin-top: 16px; padding: 3px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); }
.seg-switch a { padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: 0.92rem; }
.seg-switch a[aria-current="page"] { background: var(--teal); color: var(--ink); }
.px-hero { display: flex; align-items: center; gap: 14px; width: 100%; margin: 18px 0 8px; padding: 16px 18px; border: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; background: var(--sun); }
.px-hero-text { flex: 1; display: grid; gap: 2px; }
.px-hero-text b { font-family: var(--font-head); font-size: 1.15rem; }
.px-hero-text small { color: var(--ink-soft); }
.px-cat { margin-top: 26px; }
.px-cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.px-cat-head h2 { margin: 0; font-family: var(--font-head); font-size: 1.25rem; }
.px-cat-head p { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.92rem; }
.px-cat-icon { flex: none; width: 42px; height: 42px; border-radius: 14px; background: var(--white); display: grid; place-items: center; }
.px-cat-icon .ic { width: 22px; height: 22px; }
.px-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.px-card { background: var(--white); border-radius: 16px; box-shadow: var(--sh-card); padding: 14px 14px 12px; display: grid; gap: 10px; }
.px-top { display: flex; align-items: flex-start; gap: 10px; }
.px-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.px-text b { font-size: 1.02rem; }
.px-text small { color: var(--ink-soft); font-size: 0.85rem; }
.px-go { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--teal); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.px-go:hover { background: var(--teal-dark); }
.px-go .ic { width: 18px; height: 18px; }
.is-locked .px-go { background: var(--cream-deep); }
.px-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.px-levels { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.px-levels button { border: 0; background: none; color: var(--ink-soft); font: 600 0.8rem var(--font-body); padding: 5px 10px; border-radius: 999px; cursor: pointer; min-height: 30px; }
.px-levels button[aria-pressed="true"] { background: var(--teal); color: var(--ink); }
.px-meta { color: var(--ink-soft); font-size: 0.8rem; }
.finish-suggest { text-align: center; }

/* ---------- Sing along with any song ---------- */
.sa-main { display: block; }
.sa-stage { width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 16px 40px; }
.sa { display: grid; gap: 14px; }
.sa-bud { width: 84px; }
.sa-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sa-steps li { display: flex; align-items: center; gap: 12px; background: var(--white); border-radius: 16px; padding: 12px 14px; }
.sa-step-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); display: grid; place-items: center; font-weight: 700; }
.sa-warn, .sa-private { display: flex; align-items: center; gap: 10px; margin: 0; }
.sa-warn { background: var(--sun); border-radius: 16px; padding: 10px 14px; }
.sa-warn .ic, .sa-private .ic { flex: none; width: 20px; height: 20px; }
.sa-name { display: grid; gap: 6px; font-weight: 700; }
.sa-name .input { width: 100%; }
.sa-now { display: flex; align-items: baseline; justify-content: space-between; }
.sa-note { font-family: var(--font-head); font-size: 2.6rem; line-height: 1; color: var(--teal-deeper); }
.sa-note.is-out { color: var(--coral-text); }
.sa-time { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-weight: 700; }
.sa-canvas { width: 100%; height: clamp(240px, 42vh, 380px); }
.sa-legend { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-soft); font-size: 0.88rem; }
.sa-swatch { width: 22px; height: 12px; border-radius: 4px; background: var(--belly); }
.sa-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sa-facts li { display: flex; justify-content: space-between; gap: 12px; background: var(--white); border-radius: 16px; padding: 12px 14px; }
.sa-facts b { font-family: var(--font-head); }
.along-card { padding: 0; margin: 16px 0 6px; overflow: hidden; background: var(--sun); }
.along-main { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--ink); text-decoration: none; }
.along-text { flex: 1; display: grid; gap: 2px; }
.along-text b { font-family: var(--font-head); font-size: 1.12rem; }
.along-text small { color: var(--ink-soft); }
.along-mine { padding: 0 18px 14px; }
.along-mine-title { margin: 0 0 6px; font-weight: 700; font-size: 0.85rem; color: var(--ink-soft); }
.along-mine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.along-mine li { display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: 12px; padding: 8px 12px; font-size: 0.9rem; }
.along-mine li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.along-mine li em { font-style: normal; font-weight: 700; font-size: 0.8rem; color: var(--coral-text); }
.along-mine li em.fit-fits { color: var(--teal-deeper); }

/* ---------- Teach Bud your song, and My songs ---------- */
.tc-notes { list-style: none; margin: 0; padding: 12px 10px; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; align-items: flex-end; background: var(--white); border-radius: 16px; min-height: 140px; scrollbar-width: thin; }
.tc-notes li { flex: none; }
.tc-note { display: grid; justify-items: center; gap: 4px; min-width: 48px; padding: 8px 8px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--mint); color: var(--ink); font: inherit; cursor: pointer; margin-bottom: calc(var(--h, 0.5) * 56px); }
.tc-note b { font-family: var(--font-head); font-size: 1rem; }
.tc-note small { font-size: 0.78rem; color: var(--ink-soft); max-width: 7ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-note.is-sel { border-color: var(--coral); background: var(--blush); }
.tc-fix, .tc-play { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tc-lines p { margin: 0 0 6px; font-weight: 700; font-size: 0.85rem; color: var(--ink-soft); }
.tc-lines > div { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-learn { background: var(--sun); display: grid; gap: 8px; justify-items: start; }
.my-songs { margin: 6px 0 10px; }
.my-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.my-list li { display: flex; align-items: center; gap: 4px; background: var(--white); border-radius: 14px; padding-right: 6px; }
.my-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.my-act { border: 0; background: none; color: var(--ink-soft); font: 600 0.85rem var(--font-body); padding: 8px 10px; min-height: 40px; border-radius: 12px; cursor: pointer; display: grid; place-items: center; }
.my-act:hover { background: var(--mint); }
.my-act .ic { width: 18px; height: 18px; }

/* ---------- Recap, reminders and the unlock comparison ---------- */
.recap { display: grid; gap: 10px; }
.recap-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.recap-facts li { display: flex; align-items: center; gap: 10px; background: var(--mint); border-radius: 16px; padding: 10px 12px; }
.recap-facts b { display: block; font-family: var(--font-head); font-size: 1.15rem; }
.recap-facts small { color: var(--ink-soft); font-size: 0.8rem; }
.recap-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.recap-icon .ic { width: 18px; height: 18px; }
.recap-takes p { margin: 0 0 6px; font-size: 0.9rem; }
.recap-take-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.recap-next { text-align: center; margin: 10px 0 0; }
.home-main > .recap { margin-top: 14px; }
.remind-card { display: grid; gap: 8px; justify-items: start; }
.unlock-h2 { font-family: var(--font-head); font-size: 1.15rem; margin: 22px 0 8px; }
.unlock-copy > .recap { margin: 16px 0 0; text-align: left; }
.unlock-free { color: var(--ink-soft); font-size: 0.9rem; margin: 8px 0 0; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.compare th, .compare td { background: var(--white); padding: 10px 14px; text-align: left; font-weight: 600; }
.compare th { border-radius: 14px 0 0 14px; }
.compare td { border-radius: 0 14px 14px 0; text-align: right; color: var(--ink-soft); }
.compare .is-us th, .compare .is-us td { background: var(--teal); color: var(--ink); }
.compare-note { color: var(--ink-soft); font-size: 0.78rem; margin: 2px 0 14px; }

/* ---------- Ear quiz (two answers) and the breath exercise ---------- */
.ear-btns.is-two { grid-template-columns: repeat(2, 1fr); }
.breath { display: grid; justify-items: center; gap: 14px; padding: 22px 16px 10px; }
.breath-ring { width: 120px; height: 120px; border-radius: 50%; background: var(--mint); border: 3px solid var(--teal); display: grid; place-items: center; transition: transform 3.8s ease-in-out, background-color 300ms; }
.breath-ring.is-in { transform: scale(1.25); background: var(--belly); }
.breath-ring.is-out { transform: scale(0.9); transition-duration: 1.2s; }
.breath-count { font-family: var(--font-head); font-size: 2.4rem; }
.breath-bar { position: relative; width: min(100%, 420px); height: 18px; border-radius: 999px; background: var(--cream-deep); overflow: hidden; }
.breath-fill { position: absolute; inset: 0; background: var(--teal-deeper); transform-origin: left; transform: scaleX(0); }
.breath-time { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.breath-time b { color: var(--ink); font-size: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .breath-ring { transition: none; } }

/* ---------- Pitch mirror ---------- */
.mr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mr-bud { width: 72px; flex: none; }
.mr-readout { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 18px; row-gap: 6px; align-items: center; background: var(--white); border-radius: 16px; padding: 14px 18px; }
.mr-go { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mr-go .mic-status { margin: 0; }
@media (min-width: 720px) {
  .mr-readout { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; }
  .mr-go { grid-column: 3; grid-row: 1 / 3; }
}
.mr-note { grid-row: 1 / 3; font-family: var(--font-head); font-size: 3rem; line-height: 1; min-width: 3ch; color: var(--teal-deeper); }
.mr-tuner { position: relative; height: 26px; }
.mr-scale { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); font-size: 0.7rem; color: var(--ink-soft); }
.mr-scale i { font-style: normal; }
.mr-scale::after { content: ''; position: absolute; left: 50%; top: 2px; bottom: -2px; width: 2px; background: var(--teal-deeper); }
.mr-needle { position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--coral); transform: translateX(-50%); transition: left 90ms linear; }
.mr-needle.is-close { background: var(--teal-deeper); }
.mr-cents { font-weight: 700; color: var(--ink-soft); font-size: 0.9rem; }
.mr-keys { display: flex; align-items: flex-start; justify-content: safe center; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: thin; }
.mr-key { flex: none; position: relative; width: 44px; height: 110px; margin-right: -2px; border-radius: 0 0 10px 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink-soft); font: 700 0.7rem var(--font-body); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; cursor: pointer; z-index: 1; }
.mr-key.is-black { width: 28px; height: 70px; margin: 0 -14px; background: var(--ink); color: var(--white); border-color: var(--ink); z-index: 2; border-radius: 0 0 8px 8px; }
.mr-key.is-in:not(.is-black) { background: var(--mint); }
.mr-key.is-on, .mr-key.is-sung { background: var(--coral) !important; color: var(--white); border-color: var(--coral-dark); }
.px-mirror { background: var(--white); margin-top: 0; text-decoration: none; }
.s-voice[aria-pressed="true"] { background: var(--teal); color: var(--ink); }
.s-voice[aria-pressed="true"] .ic .ic-fill { fill: var(--ink); }
.ob-top-btns { display: flex; align-items: center; gap: 6px; justify-self: end; }

/* ---------- Desktop: use the width ---------- */
.px-heroes { display: grid; gap: 10px; margin: 18px 0 8px; }
.px-heroes .px-hero { margin: 0; }
@media (min-width: 960px) {
  /* The song coach across the top, then three equal cards in a row, each with its button along the bottom. */
  .songs-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; margin: 18px 0 8px; }
  .songs-top > * { margin: 0; min-width: 0; }
  .songs-top .along-card { display: flex; flex-direction: column; }
  .songs-top .along-main { flex: 1; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 10px; padding: 18px; }
  .songs-top .along-main > .btn { flex: none; margin-top: auto; }
  .songs-top .jx-card { grid-template-rows: auto auto 1fr; padding: 18px; }
  .songs-top .jx-card-art { gap: 6px; }
  .songs-top .jx-card-dot { width: 32px; height: 32px; border-radius: 11px; }
  .songs-top .jx-card-dot .jx-emblem-ic { width: 18px; height: 18px; }
  .songs-top .jx-card > .btn, .songs-top .jx-card .jx-card-cta { align-self: end; }
  .songs-top .my-songs { display: flex; flex-direction: column; padding: 18px; }
  .songs-top .my-songs .card-head { display: contents; }
  .songs-top .my-songs > * { order: 2; }
  .songs-top .my-songs .card-title { order: 1; margin-bottom: 6px; }
  .songs-top .my-songs .card-head .btn { order: 3; align-self: flex-start; margin-top: auto; }
  .songs-top .my-songs .card-head .btn, .songs-top .my-songs > ul { margin-top: auto; }
  .songs-top .my-songs > ul + * { margin-top: 12px; }
  .songs-top .my-songs .card-note { margin: 0 0 14px; }
  .px-heroes { grid-template-columns: 1fr 1fr; }
}
/* Two cards a row until there's room for three at a comfortable width; My songs then spans the row. */
@media (min-width: 960px) and (max-width: 1239px) {
  .songs-top .my-songs { grid-column: 1 / -1; }
}
@media (min-width: 1240px) {
  .songs-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Full-screen tools on desktop: two columns for intros, wide stages for live views */
.only-wide { display: none; }
@media (min-width: 1024px) {
  .only-narrow { display: none; }
  .only-wide { display: block; }
  .sa-stage { padding-top: 28px; }
  .sa-stage:has(.sa-split), .sa-stage:has(.sa-wide) { max-width: 1080px; }
  .sa-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "a b" "c b"; column-gap: 56px; row-gap: 18px; align-items: start; }
  .sa-a { grid-area: a; display: grid; gap: 14px; }
  .sa-b { grid-area: b; display: grid; gap: 14px; background: var(--white); border-radius: var(--r-card); padding: 26px; box-shadow: var(--sh-card); }
  .sa-c { grid-area: c; display: grid; gap: 14px; }
  .sa-b .sa-bud { width: 120px; justify-self: center; }
  .sa-b .sa-steps li { background: var(--mint); }
  .sa-split .ob-title { font-size: clamp(2.2rem, 3.2vw, 3rem); }
  .sa-split .ob-actions { position: static; flex-direction: row; justify-content: flex-start; }
  .sa-wide .sa-canvas { height: clamp(320px, 46vh, 460px); }
  .sa-wide .ob-actions { flex-direction: row; justify-content: flex-start; position: static; }
  .tc-review { max-width: 860px; }
  .mr-key { width: 52px; height: 132px; }
  .mr-key.is-black { width: 32px; height: 84px; margin: 0 -16px; }
  .mr .sa-canvas { height: clamp(260px, 36vh, 360px); }
}
@media (min-width: 1024px) and (min-height: 760px) {
  .sa-stage:has(.sa-split) { min-height: calc(100vh - 90px); display: grid; align-content: center; }
}

/* Unlock on desktop: the story on the left, the price card (with Bud) kept in view on the right */
.unlock-side > .btn-link { display: block; margin: 14px auto 0; }
@media (min-width: 960px) {
  .unlock .only-narrow { display: none; }
  .unlock .only-wide { display: block; }
  .unlock-main { grid-template-columns: minmax(0, 1fr) 380px !important; align-items: start !important; gap: 56px !important; min-height: 0 !important; max-width: 1120px; padding-top: 56px; }
  .unlock-side { position: sticky; top: 32px; display: grid; gap: 8px; }
  .unlock-side .unlock-bud { width: 190px; margin: 0 auto -8px; }
  .unlock-copy > .recap .recap-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .unlock-list { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .compare { max-width: 560px; }
}
/* The session's top bar has two buttons on the right (Bud's voice, close) */
.session-shell .ob-top-inner { grid-template-columns: 40px minmax(0, 1fr) auto; }
@media (min-width: 760px) {
  .session-shell .ob-top-inner { grid-template-columns: 40px auto minmax(0, 1fr) auto; }
}
.lvl-after { background: var(--sun); }
.lvl-after .level-badge .ic { width: 20px; height: 20px; }
.lvl-after-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- Progress in plain words ---------- */
.plain { margin-bottom: 18px; }
.plain-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.plain-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--mint); line-height: 1.4; }
.plain-list li.plain-tip { background: var(--sun); }
.plain-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.plain-icon .ic { width: 16px; height: 16px; }
@media (min-width: 960px) { .plain-list { grid-template-columns: 1fr 1fr; } }

/* ---------- Programs ---------- */
.pg-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.pg-card { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border-radius: 16px; padding: 16px; box-shadow: var(--sh-card); color: var(--ink); text-decoration: none; height: 100%; box-sizing: border-box; }
.pg-card:hover { box-shadow: var(--sh-card); }
.pg-icon { flex: none; width: 48px; height: 48px; border-radius: 16px; background: var(--sun); display: grid; place-items: center; }
.pg-icon .ic { width: 24px; height: 24px; }
.pg-text { display: grid; gap: 4px; min-width: 0; flex: 1; }
.pg-text b { font-family: var(--font-head); font-size: 1.15rem; }
.pg-text small { color: var(--ink-soft); }
.pg-meta { font-size: 0.82rem; font-weight: 700; color: var(--teal-deeper); }
.pg-bar { display: block; height: 8px; border-radius: 999px; background: var(--cream-deep); overflow: hidden; margin-top: 4px; }
.pg-bar span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--teal-deeper); border-radius: 999px; }
.pg-back { display: flex; width: fit-content; align-items: center; gap: 6px; margin-bottom: 10px; }
.pg-back .ic { width: 16px; height: 16px; }
.pg-grid { display: grid; gap: 16px; margin-top: 16px; }
.pg-next { display: grid; gap: 8px; justify-items: start; background: var(--sun); }
.pg-next h2 { margin: 0; font-family: var(--font-head); font-size: 1.4rem; }
.pg-days ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pg-day { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--mint); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.pg-day.is-done { background: var(--belly); }
.pg-day.is-next { outline: 2px solid var(--coral); }
.pg-day-icon { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.pg-day-icon .ic { width: 14px; height: 14px; }
.home-program { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px 18px; color: var(--ink); text-decoration: none; }
.home-program-text { flex: 1; display: grid; gap: 3px; min-width: 0; }
.home-program-text b { font-family: var(--font-head); font-size: 1.1rem; }
.home-program-text small { color: var(--ink-soft); }
@media (min-width: 960px) { .pg-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }

/* ---------- Unlock: your next 7 days ---------- */
.week-ahead { margin-top: 16px; text-align: left; }
.week-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.week-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--mint); }
.week-day { flex: none; width: 56px; font-weight: 700; font-size: 0.85rem; color: var(--coral-text); }
.week-what { flex: 1; display: grid; gap: 2px; min-width: 0; }
.week-what small { color: var(--ink-soft); }
.week-lock .ic { width: 16px; height: 16px; opacity: 0.6; }
@media (min-width: 960px) { .week-list { grid-template-columns: 1fr 1fr; } }

/* ---------- Singers who share your notes ---------- */
.singers { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); text-align: left; }
.first-card .singers { margin-top: 0; padding-top: 0; border-top: 0; }
.first-card .first-line { font-size: 1.1rem; font-weight: 700; margin: 0 0 6px; }
.first-card .first-take .btn { margin-top: 10px; }
.singers-title { margin: 0 0 8px; font-weight: 700; }
.singers-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.singers-list li { display: grid; gap: 1px; padding: 8px 12px; border-radius: 14px; background: var(--mint); }
.singers-list small { color: var(--ink-soft); font-size: 0.82rem; }
.singers-note { margin: 8px 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.sound-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.sound-opts { flex-direction: column; }
.credit-note { font-size: 0.78rem; margin-top: 10px; }

/* Unlock: back on the left, what you get as tiles, three years of rivals' prices as bars */
.unlock-top { left: var(--gutter); right: auto; }
.get-card, .compare-card { margin-top: 16px; text-align: left; }
.get-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.get-grid li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; background: var(--mint); }
.get-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--white); display: grid; place-items: center; }
.get-icon .ic { width: 22px; height: 22px; }
.get-text { display: grid; gap: 2px; min-width: 0; }
.get-text b { font-weight: 700; line-height: 1.25; }
.get-text small { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.35; }
.get-card .unlock-free { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; }
.get-card .unlock-free .ic { flex: none; width: 18px; height: 18px; }
@media (min-width: 720px) { .get-grid { grid-template-columns: 1fr 1fr; } }
.cmp { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.cmp li { display: grid; grid-template-columns: minmax(104px, 0.9fr) minmax(0, 1.6fr) auto; align-items: center; gap: 12px; }
.cmp-name { display: grid; gap: 1px; min-width: 0; }
.cmp-name small { color: var(--ink-soft); font-size: 0.8rem; }
.cmp-bar { height: 14px; border-radius: 99px; background: var(--cream); overflow: hidden; }
.cmp-bar span { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--ink-soft); opacity: 0.3; }
.cmp .is-us { padding-top: 14px; border-top: 1px solid var(--line); }
.cmp .is-us .cmp-bar span { background: var(--coral); opacity: 1; }
.cmp-cost { min-width: 52px; text-align: right; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; }
.cmp .is-us .cmp-cost { color: var(--coral-text); }
.compare-card .compare-note { margin: 12px 0 0; }
.run-btns { display: inline-flex; gap: 8px; }
.unlock-main { padding-top: calc(68px + var(--safe-t)) !important; }

/* The step's buttons stay in view while a song plays, however short the window */
.s-shell .task-actions, .task .task-actions {
  position: sticky; bottom: 0; z-index: 3;
  padding: 14px 0 calc(12px + var(--safe-b));
  background: linear-gradient(to top, var(--mint) 72%, rgba(247, 245, 240, 0));
}
@media (max-height: 760px) {
  .task-status { font-size: 1.25rem !important; margin-top: 10px !important; }
}
.run-btns[hidden] { display: none; }
@media (max-height: 760px) {
  .ex-song .ob-hint, .ex-record .ob-hint { display: none; }
  .ex-song .ob-title, .ex-record .ob-title { font-size: 1.6rem; }
  .ob-stage { padding-top: 16px !important; }
}

/* Note review: each word with its label underneath, counts on top */
.review { max-width: 640px; }
.review-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; font-size: 0.92rem; color: var(--ink-soft); }
.rv-count { display: inline-flex; align-items: center; gap: 6px; background: none !important; box-shadow: none !important; }
.rv-count::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--track); }
.rv-count b { color: var(--ink); }
.rv-count.rv-hit::before { background: var(--teal); }
.rv-count.rv-low::before { background: var(--sun); }
.rv-count.rv-high::before { background: var(--cheek); }
.rv-count.rv-quiet::before { background: transparent; box-shadow: inset 0 0 0 2px var(--track); }
.review-line .rv { flex-direction: column; justify-content: center; gap: 0; min-height: 0; padding: 5px 10px 4px; border-radius: 12px; line-height: 1.15; }
.review-line .rv b { font-weight: 700; font-size: 0.95rem; }
.review-line .rv small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; opacity: 0.75; }
.review-line .rv-low { background: var(--sun); }
.review-line .rv-high { background: var(--cheek); }

/* A step fits the window: the lane scales with the height, and once a step is done the result
   takes the lane's place (no scrolling down to see how it went). */
.pitch-lane { height: clamp(150px, calc(100svh - 470px), 300px) !important; }
/* Phones: the song controls wrap onto two rows, so the lane gives up that room and the status line and
   buttons fit on screen without scrolling under the bottom bar. */
@media (max-width: 600px) {
  .pitch-lane { height: clamp(150px, calc(100svh - 600px), 300px) !important; }
  .task canvas.pitch:not(.pitch-lane) { height: clamp(150px, calc(100svh - 540px), 360px); }
}
.task.is-finished .ex-body > canvas.pitch, .task.is-finished .ex-progress, .task.is-finished .meter,
.task.is-finished .ob-hint, .task.is-finished .loud { display: none !important; }
.task.is-finished .task-stage { min-height: 0; }
.task-status { font-size: 1.3rem !important; margin-top: 10px !important; }
.task canvas.pitch:not(.pitch-lane) { height: clamp(150px, calc(100svh - 440px), 360px); }
/* Finished step: score, then the buttons, then the detail */
.ex-result:not([hidden]) { display: flex; flex-direction: column; align-items: center; }
.ex-result > .ex-score { order: 0; }
.ex-result > .ex-result-actions { order: 1; }
.ex-result > .review { order: 2; margin-top: 14px; }
.ex-result > :not(.ex-score):not(.ex-result-actions):not(.review) { order: 3; }
/* All the words in one flow (a small gap between lines), so a whole song takes two or three rows */
.review-lines { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.review-lines > li { display: contents; }
.review-line { display: contents; }
.review-line > .rv:last-child { margin-right: 10px; }
.ex-result-actions { max-width: none !important; flex-wrap: wrap; }
.ex-result-actions .btn { white-space: nowrap; }
.task.is-finished .task-status:empty { display: none; }
.task.is-finished .ex-result { margin-top: 6px; }


/* Top bar on wide screens: the logo sits over Bud's panel and the progress bar starts where the
   page content starts, instead of crowding the logo. Step names never run into each other. */
@media (min-width: 900px) {
  .ob-top-inner > .ob-icon-btn:first-child[hidden] { display: none !important; }
  .ob-top-inner:has(> .ob-icon-btn:first-child[hidden]) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ob-top-inner:has(> .ob-icon-btn:first-child[hidden]) .ob-brand { min-width: calc(var(--panel-w) - 60px + var(--pad-x)); }
  .ob-stages { gap: 14px; }
}
.ob-seg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) {
  .session-shell .ob-top-inner > .ob-spacer { display: none; }
  .session-shell .ob-top-inner { grid-template-columns: auto minmax(0, 1fr) auto !important; }
  .session-shell .ob-brand { min-width: calc(var(--panel-w) - 60px + var(--pad-x)); }
}
/* Only the step you're on is named; the rest are just the bar */
.session-shell .ob-seg-label { visibility: hidden !important; }
.session-shell .ob-seg.is-now .ob-seg-label { visibility: visible !important; overflow: visible; color: var(--teal-text); }

/* Session start: one centred card. Day and length, the parts as a numbered path, then Start. */
.s-start {
  max-width: 860px; margin: clamp(0px, 6svh, 64px) auto 0; padding: 28px clamp(18px, 4vw, 40px) 26px;
  border-radius: 20px; background: var(--white); box-shadow: var(--sh-card); text-align: center;
}
.s-start .ob-title { margin-top: 2px; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem); }
.s-start .ob-hint { margin: 6px auto 0; max-width: 520px; }
.s-start .s-parts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; text-align: left; counter-reset: none; }
.s-start .s-parts li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.s-start .s-parts .part-swatch { width: 36px; height: 36px; margin: 0; display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; color: var(--ink); box-shadow: none; }
.s-start .s-parts b { display: block; font-weight: 700; line-height: 1.25; }
.s-start .s-parts small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.35; }
.s-start .card-note-soft { margin: 20px auto 0; max-width: 620px; padding: 8px 14px; font-size: 0.86rem; }
.s-start .ob-actions { margin: 22px 0 0; display: grid; justify-items: center; gap: 6px; }
.s-start .ob-actions .btn-lg { min-width: 260px; }
.s-start .tick-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 14px 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.s-start .tick-list li { margin: 0; font-weight: 600; }
/* Wide: the parts side by side, joined by a line, each centred under its number */
@media (min-width: 720px) {
  .s-start .s-parts { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; text-align: center; }
  .s-start .s-parts li { grid-template-columns: none; justify-items: center; gap: 10px; }
  .s-start .s-parts li:not(:last-child)::after {
    content: ''; position: absolute; z-index: 0; top: 17px; left: calc(50% + 26px); right: calc(-50% + 20px);
    height: 2px; background: var(--track);
  }
  .s-start .s-parts .part-swatch { position: relative; z-index: 1; }
}
/* Short windows: a tighter card */
@media (max-height: 680px) and (min-width: 720px) {
  .s-start { margin-top: 0; padding-top: 20px; padding-bottom: 18px; }
  .s-start .s-parts { margin-top: 16px; }
  .s-start .s-parts small { display: none; }
  .s-start .ob-actions { margin-top: 16px; }
}
.s-start { display: flex; flex-direction: column; align-items: stretch; }
.s-start > .tick-list { order: 2; }
.s-start > .ob-actions { order: 1; display: flex !important; flex-direction: column; align-items: center; justify-content: center; position: static; padding: 0; background: none; }
.s-start > :not(.ob-actions):not(.tick-list) { order: 0; }
.s-start .ob-actions .mic-status:empty { display: none; }
/* Sit the card in the middle of the screen's height on desktop, not stuck to the top */
@media (min-width: 900px) {
  .ob-stage > .s-start { margin-top: clamp(0px, calc((100svh - var(--top-h) - 470px) / 2 - var(--pad-top)), 220px); max-width: 860px; }
}
/* Start card, polished: real padding (the stage's "section { padding: 0 }" was winning), parts
   aligned to the top, the song note as quiet text, tips inside the card. */
.ob-stage > .s-start { padding: 36px clamp(20px, 4vw, 48px) 28px; }
.s-start .s-parts li { align-content: start; }
.s-start .ob-title { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); line-height: 1.1; }
.s-start .ob-hint { font-size: 1rem; }
.s-start .s-parts { margin-top: 28px; }
.s-start .s-parts b { font-size: 0.98rem; }
.s-start .card-note-soft { background: none; padding: 0; margin-top: 22px; color: var(--ink-soft); font-size: 0.85rem; }
.s-start > .ob-actions { margin-top: 20px; }
.s-start > .tick-list { margin-top: 14px; }
.s-start .tick-list li { padding-left: 24px; }
.s-start .tick-list li::before { transform: scale(0.8); transform-origin: left center; }
@media (max-height: 680px) and (min-width: 720px) {
  .ob-stage > .s-start { padding-top: 24px; padding-bottom: 20px; }
  .s-start .card-note-soft { display: none; }
}
@media (max-height: 680px) and (min-width: 720px) { .s-start > .tick-list { display: none; } }
/* The logo centred over Bud's panel; the progress bar still starts where the page content starts */
@media (min-width: 900px) {
  .session-shell .ob-brand, .ob-top-inner:has(> .ob-icon-btn:first-child[hidden]) .ob-brand {
    min-width: 0; width: calc(var(--panel-w) - 32px); justify-content: center;
  }
  .session-shell .ob-progress, .ob-top-inner:has(> .ob-icon-btn:first-child[hidden]) .ob-progress { padding-left: max(0px, calc(var(--pad-x) - 28px)); }
}
@media (min-width: 900px) {
  .session-shell .ob-brand, .ob-top-inner:has(> .ob-icon-btn:first-child[hidden]) .ob-brand { width: var(--panel-w); margin-left: -32px; }
}
/* The panel's cream runs up behind the logo, so the logo heads Bud's column instead of floating */
@media (min-width: 900px) {
  .session-shell .ob-top, .ob-shell:has(.ob-top-inner > .ob-icon-btn:first-child[hidden]) .ob-top {
    background: linear-gradient(to right, var(--panel) var(--panel-w), var(--white) var(--panel-w));
  }
  .session-shell .ob-top::after, .ob-shell:has(.ob-top-inner > .ob-icon-btn:first-child[hidden]) .ob-top::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--panel-w) - 1px); width: 1px; background: var(--line);
  }
}
/* Bud's panel on one centre line: logo, Bud, bubble, and the step list as a centred block.
   The top bar's bottom line runs only under the page side, so the cream is one piece. */
@media (min-width: 900px) {
  .session-shell .ob-top, .ob-shell:has(.ob-top-inner > .ob-icon-btn:first-child[hidden]) .ob-top {
    box-shadow: none;
    background:
      linear-gradient(to right, transparent var(--panel-w), var(--track) var(--panel-w)) bottom / 100% 2px no-repeat,
      linear-gradient(to right, var(--panel) var(--panel-w), var(--white) var(--panel-w));
  }
  .ob-guide { align-items: center; }
  .ob-guide .ob-bubble { width: 100%; max-width: 320px; }
  .ob-guide .ob-side { width: 100%; max-width: 280px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 900px) {
  .ob-guide .ob-side { max-width: none; }
  .ob-guide .side-title { text-align: center; }
  .ob-guide .side-steps { width: fit-content; min-width: 190px; margin-left: auto; margin-right: auto; }
  .ob-guide .side-private { justify-content: center; text-align: left; max-width: 300px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 900px) {
  .ob-guide { scrollbar-width: none; }
  .ob-guide::-webkit-scrollbar { display: none; }
}
/* Bud as big as the window's height allows (full size from about 650px tall), smaller only when short */
@media (min-width: 900px) {
  .ob-guide-bud { width: clamp(110px, calc(100svh - 520px), 210px) !important; }
}
@media (min-width: 900px) and (max-height: 620px) {
  .ob-guide { padding-top: 22px; gap: 12px; }
  .ob-guide .ob-bubble { font-size: 0.95rem; padding: 10px 14px; }
  .ob-guide .side-steps li { padding: 4px 0 6px; }
  .ob-guide .side-steps li:not(:last-child)::before { top: 31px; }
}
@media (min-width: 900px) and (max-height: 600px) {
  .ob-guide .side-private { display: none; }
}
.seg-jam { background: var(--sun); }
/* Jam: the call-and-response steps along the top of the picture */
.jam-phases { list-style: none; margin: 0 0 8px; padding: 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.jam-phases li { padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 0.8rem; background: var(--white); color: var(--ink-soft); box-shadow: inset 0 0 0 2px var(--track); transition: background 160ms, color 160ms; }
.jam-phases li.done { color: var(--ink); box-shadow: inset 0 0 0 2px var(--teal); }
.jam-phases li.now { background: var(--coral); color: var(--white); box-shadow: none; }

/* "I couldn't hear you": a calm, centred card, never a fail screen */
.novoice { display: grid; place-items: center; padding: 16px; background: rgba(247, 245, 240, 0.94); border-radius: inherit; }
.nv-card { width: 100%; max-width: 440px; text-align: center; padding: 22px 22px 18px; border-radius: 18px; background: var(--white); box-shadow: var(--sh-card); }
.nv-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--cheek); margin-bottom: 8px; }
.nv-icon .ic { width: 26px; height: 26px; }
.novoice .nv-card h2 { font-size: 1.35rem; }
.novoice .nv-card p { margin-top: 4px; font-size: 0.95rem; }
.nv-tips { list-style: none; margin: 14px 0 0; padding: 10px 14px; display: grid; gap: 6px; text-align: left; border-radius: 16px; background: var(--mint); font-size: 0.92rem; font-weight: 600; }
.nv-tips li { position: relative; padding-left: 18px; }
.nv-tips li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-dark); }
.nv-btns { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.novoice .btn:focus-visible { outline: 3px solid rgba(239, 111, 97, 0.35); outline-offset: 3px; }
.task-stage:has(.novoice:not([hidden])) { min-height: 0 !important; }
.task-stage:has(.novoice:not([hidden])) canvas.pitch,
.task-stage:has(.novoice:not([hidden])) .ex-progress,
.task-stage:has(.novoice:not([hidden])) .meter,
.task-stage:has(.novoice:not([hidden])) .jam-phases,
.task:has(.novoice:not([hidden])) .task-actions,
.task:has(.novoice:not([hidden])) .task-status { display: none !important; }
.task-stage .novoice:not([hidden]) { position: static; inset: auto; background: none; padding: 4px 0; overflow: visible; }
.task-stage .nv-card { box-shadow: none; background: none; padding-top: 14px; }

/* Jam result: a heading, one line, the big play button, then Finish / Try again. Nothing left from the jam. */
.task.is-jam-done .task-stage, .task.is-jam-done .jam-phases, .task.is-jam-done .ob-hint { display: none !important; }
.task.is-jam-done .ex-result { margin-top: 18px; }
.ex-result > .ex-listen { order: 0; padding: 14px 0 0; }
.ex-result .ex-listen .btn-primary { font-size: 1.1rem; padding-left: 26px; padding-right: 30px; }
.jam-done { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -0.02em; }
.jam-sub { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 4px; color: var(--ink-soft); font-size: 1rem; }
.jam-sub .ic { flex: none; width: 20px; height: 20px; }
/* Softer keyboard focus ring everywhere (the black ring read as a border) */
.btn:focus-visible { outline: 3px solid rgba(46, 61, 68, 0.22); outline-offset: 3px; }
.ex-result > .ex-listen { order: 0 !important; }
.ex-result > .ex-result-actions { order: 1 !important; margin-top: 18px; }

/* Jam success: no step title, a big "What a jam!", the take as a player card, then Finish / Jam again */
.task.is-jam-done .task-top, .task.is-jam-done .ob-title, .task.is-jam-done .tempo-bar, .task.is-jam-done .tempo-toggle { display: none !important; }
.task.is-jam-done .ex-result { margin-top: clamp(8px, 7svh, 64px); }
.task.is-jam-done .ex-score { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.task.is-jam-done .jam-done { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); line-height: 1.05; }
.task.is-jam-done .jam-sub { margin-top: 8px; font-size: 1.05rem; }
.jam-player { margin-top: 22px; width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; background: var(--white); box-shadow: var(--sh-card); text-align: left; }
.jam-play { width: 64px; height: 64px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--white); background: var(--coral); box-shadow: var(--sh-solid); transition: transform 120ms var(--ease-out); }
.jam-play:active { transform: translateY(1px); box-shadow: var(--sh-press); }
.jam-play .ic { width: 28px; height: 28px; stroke: currentColor; }
.jam-play:focus-visible { outline: 3px solid rgba(46, 61, 68, 0.22); outline-offset: 3px; }
.jam-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.jam-meta b { font-weight: 700; font-size: 1.05rem; }
.jam-meta small { color: var(--ink-soft); font-weight: 600; }
.jam-meta .jam-voice { margin-left: auto; font-size: 0.85rem; }
.jam-wave { margin-top: 10px; height: 44px; display: flex; align-items: center; gap: 2px; }
.jam-wave i { flex: 1; height: calc(var(--h, 0.12) * 100%); min-height: 4px; border-radius: 2px; background: var(--track); transition: background 120ms, height 300ms var(--ease-out); }
.jam-wave i.on { background: var(--coral); }
.jam-tip { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; font-size: 0.9rem; color: var(--ink-soft); }
.jam-tip .ic { flex: none; width: 18px; height: 18px; }
.jam-private { display: block; margin-top: 10px; font-size: 0.78rem; color: var(--ink-soft); }
.task.is-jam-done .ex-result-actions { margin-top: 22px !important; }

/* Today's parts run the full width of the card under the title, not squeezed beside Bud, so they sit on
   one row on a laptop and wrap two or three to a row on a phone. */
.today { grid-template-areas: "eye bud" "title bud" "parts parts" "actions actions"; grid-template-rows: auto 1fr auto auto; }
.today-head { display: contents; }
.today-head > .eyebrow { grid-area: eye; align-self: end; }
.today-head > .today-title { grid-area: title; align-self: start; }
.today-head > .today-parts, .today-head > .today-body { grid-area: parts; margin-top: 4px; }

/* "Which note changed?": one button per note, numbered, in a row */
.ear-btns.is-which { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; }
@media (max-width: 460px) { .ear-btns.is-which .ear-btn span { display: none; } .ear-btns.is-which .ear-btn { min-height: 64px; } }
.ear-btns.is-which .ear-btn { padding-left: 6px; padding-right: 6px; }
.ear-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--belly); font-family: var(--font-head); font-size: 1.15rem; }
.ear-btn.is-right .ear-num { background: var(--teal-deeper); color: var(--white); }
.ear-btns.is-which .ear-btn span { font-size: 0.8rem; }

/* Bud's instrument on Profile */
.inst { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--track, #E3F1F2); }
.inst-title { margin: 0; font-weight: 700; }
.inst .card-note { margin-top: 2px; }
.inst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 10px; }
.inst-opt {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; cursor: pointer;
  border-radius: 14px; background: var(--mint); border: 2px solid transparent; font-weight: 700; font-size: 0.9rem; line-height: 1.2;
  transition: border-color 150ms ease, background-color 150ms ease, transform 100ms ease-out;
}
.inst-opt:active { transform: scale(0.97); }
.inst-opt input { position: absolute; opacity: 0; pointer-events: none; }
.inst-opt:has(input:checked) { background: var(--teal-wash); border-color: var(--teal-deeper); box-shadow: none; }
.inst-opt:has(input:focus-visible) { outline: 3px solid var(--teal-deeper); outline-offset: 2px; }
.inst-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--white); }
.inst-opt:has(input:checked) .inst-ic { background: var(--teal-deeper); color: var(--white); }
.inst-opt:has(input:checked) .inst-ic .ic-fill { fill: var(--white); }
.inst-ic .ic { width: 18px; height: 18px; }

/* Sign-in: try first as a guest, sign in below */
.login-try { width: 100%; }
.login-try .ic { width: 22px; height: 22px; }

/* Guests and family profiles (js/household.js) */
.hh-guest { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: var(--sun); box-shadow: var(--sh-card); }
.hh-guest-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--white); }
.hh-guest-ic .ic { width: 22px; height: 22px; }
.hh-guest .card-note { margin-top: 4px; }
.hh-guest-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 12px; }
.home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.hh-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border: 0; border-radius: 99px; background: var(--white); font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; box-shadow: var(--sh-card); }
.hh-chip > .ic { width: 16px; height: 16px; color: var(--ink-soft); }
.hh-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c, var(--coral)); color: var(--ink); font-weight: 700; font-size: 0.9rem; border: 2.5px solid var(--white); box-shadow: 0 0 0 2px rgba(46, 61, 68, 0.12); }
.hh-av.sm { width: 30px; height: 30px; font-size: 0.75rem; border-width: 2px; }
.hh-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.hh-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; background: var(--mint); }
.hh-row.is-on { background: var(--white); box-shadow: inset 0 0 0 2px var(--teal); }
.hh-row-name { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hh-row-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-row-name small { color: var(--teal-deeper); font-weight: 700; font-size: 0.78rem; }
.hh-del { border: 0; background: none; padding: 8px; border-radius: 50%; cursor: pointer; color: var(--ink-soft); }
.hh-del:hover { background: var(--blush); color: var(--coral-text); }
.hh-del .ic { width: 18px; height: 18px; }
.hh-add { margin-top: 12px; }
.hh-add .ic { width: 18px; height: 18px; }
.hh-pick { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--mint); font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.hh-pick span { flex: 1; }
.hh-pick.is-on { background: var(--white); box-shadow: inset 0 0 0 2px var(--teal); }
.hh-pick small { color: var(--teal-deeper); font-weight: 700; }
.hh-pick > .ic { width: 18px; height: 18px; color: var(--ink-soft); }
.hh-name { width: 100%; margin-top: 10px; font: inherit; font-weight: 600; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--belly); }
.hh-name:focus { outline: none; border-color: var(--teal-deeper); }
.user-card .user-signin { margin-left: 8px; }

/* ---------- Story cards after a daily session (session.js runStory) ---------- */

.story-dots { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 6px; }
.story-dots li { flex: 1; height: 6px; border-radius: 999px; background: var(--track); }
.story-dots li.is-done { background: var(--teal-dark); }
.story-dots li.is-now { background: var(--coral); }
.story-card {
  padding: 22px 20px 24px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--sh-card);
}
.story-good .story-card { box-shadow: var(--sh-card), inset 6px 0 0 var(--teal-dark); }
.story-tip .story-card { box-shadow: var(--sh-card), inset 6px 0 0 var(--coral); }
.story-title { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem); line-height: 1.18; }
.story-stat { margin-top: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: #2F7778; }
.story-tip .story-stat { color: var(--coral-text); }
.story-body { margin-top: 10px; font-size: 1.05rem; line-height: 1.5; color: var(--ink); max-width: 46ch; }
.story .ob-actions { margin-top: 22px; }

/* Song steps: the knobs (speed, loop, piano, Bud's guide) fold behind one small button */
.tempo-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; width: auto; align-self: flex-start; justify-self: start;
  padding: 6px 12px 6px 10px; min-height: 36px; border: 0; border-radius: 999px;
  background: var(--white); box-shadow: var(--sh-card);
  font: inherit; font-weight: 700; font-size: 0.88rem; color: var(--ink-soft); cursor: pointer;
}
.tempo-toggle .ic { width: 18px; height: 18px; transition: transform 300ms cubic-bezier(.23, 1, .32, 1); }
.tempo-toggle[aria-expanded="true"] { color: var(--ink); }
.tempo-toggle[aria-expanded="true"] .ic { transform: rotate(60deg); }
.tempo-bar:not(.is-open) { display: none; }

/* After a step, phones: one big next step, the rest as a quiet row underneath. Listen-back keeps
   "Play it back" as the main button; keep, first take and studio become small chips. */
@media (max-width: 759px) {
  .ex-result-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ex-result-actions [data-act="next"] { grid-column: 1 / -1; width: 100%; }
  .ex-result-actions .btn-secondary {
    min-height: 44px; padding: 8px 10px; font-size: 0.9rem; white-space: normal; line-height: 1.15;
    box-shadow: var(--sh-card);
  }
  .ex-result-actions .btn-secondary:only-of-type,
  .ex-result-actions .btn-secondary:last-child:nth-child(even) { grid-column: 1 / -1; }
  .ex-result-actions .btn-secondary .ic { width: 16px; height: 16px; }
  .ex-listen-btns { gap: 6px; }
  .ex-listen-btns [data-keep], .ex-listen-btns [data-first], .ex-listen-btns [data-studio] {
    min-height: 36px; padding: 6px 12px; font-size: 0.85rem; box-shadow: none; background: transparent;
    border: 1.5px solid var(--edge, #CDEBEB);
  }
  .ex-listen-btns [data-keep] .ic, .ex-listen-btns [data-first] .ic, .ex-listen-btns [data-studio] .ic { width: 16px; height: 16px; }
}

/* Path: levels fold. Only your level is open; tap any other to look inside. */
details.lvl-card { padding: 0; }
.lvl-sum { list-style: none; cursor: pointer; padding: 16px 16px 14px; border-radius: inherit; -webkit-tap-highlight-color: transparent; }
.lvl-sum::-webkit-details-marker { display: none; }
.lvl-sum:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 2px; }
details.lvl-card > :not(summary) { margin-left: 16px; margin-right: 16px; }
details.lvl-card[open] > :last-child { margin-bottom: 16px; }
.lvl-sum .lvl-head { grid-template-columns: 44px 1fr 28px; }
.lvl-sum .lvl-head > div { min-width: 0; }
.lvl-sum .lvl-status { grid-column: 2; grid-row: 2; justify-self: start; }
.lvl-chev { grid-column: 3; grid-row: 1; align-self: center; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-soft); transform: rotate(90deg); transition: transform 280ms cubic-bezier(.23, 1, .32, 1); }
.lvl-chev .ic { width: 18px; height: 18px; }
details[open] > .lvl-sum .lvl-chev { transform: rotate(-90deg); }
details.lvl-card:not([open]) .lvl-meta { display: none; }
details.lvl-card:not([open]) > .lvl-sum { padding-bottom: 14px; }
.lvl-sum .lvl-meta { margin: 8px 0 0 56px; }
details.lvl-card:not([open]) .lvl-head p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
details.lvl-card[open] .lessons { animation: lvl-open 320ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes lvl-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 560px) {
  .lvl-sum .lvl-head { grid-template-columns: 44px 1fr auto 28px; }
  .lvl-sum .lvl-status { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
  .lvl-chev { grid-column: 4; }
}
@media (prefers-reduced-motion: reduce) { details.lvl-card[open] .lessons { animation: none; } .lvl-chev { transition: none; } }

/* Full-width buttons with a leading icon: the label sits dead centre and the icon hangs to its left,
   instead of the icon pushing the words off-centre. */
.today-actions .btn-lg > .ic:first-child + span:last-child,
.ob-actions .btn-lg > .ic:first-child + span:last-child,
.task-actions .btn-lg > .ic:first-child + span:last-child,
.sheet-actions .btn > .ic:first-child + span:last-child { margin-right: 30px; }

/* Today's session: the parts as one quiet line, not a row of chips */
.today-parts { display: block; margin-top: 8px; font-weight: 700; font-size: 0.95rem; color: #23434A; line-height: 1.45; }
.today-parts li { display: inline; padding: 0; background: none; font-size: inherit; }
.today-parts li + li::before { content: ' · '; color: var(--teal-deeper); }
.today-parts .part-swatch { display: none; }
@media (max-width: 559px) { .today .today-title { font-size: 1.9rem; letter-spacing: -0.02em; } }

/* Songs: four ways in as small tiles, then search and the library on the first screen */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 18px; }
.way {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 12px; border-radius: 16px; background: var(--white); box-shadow: var(--sh-card);
  text-decoration: none; color: var(--ink); -webkit-tap-highlight-color: transparent;
  transition: transform 120ms cubic-bezier(.23, 1, .32, 1), box-shadow 120ms;
}
.way:active { transform: translateY(1px); box-shadow: var(--sh-press); }
.way-ic { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: var(--white); }
.way-ic .ic { width: 22px; height: 22px; }
.way b { font-family: var(--font-head); font-size: 1rem; line-height: 1.15; align-self: end; }
.way small { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.25; align-self: start; }
.way-teach .way-ic { background: var(--ink); }
.way-hum .way-ic { background: var(--coral); }
.way-along .way-ic { background: var(--teal-deeper); }
.way-jam .way-ic { background: #E0A43A; }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(4, 1fr); } }
.songs-top:empty { display: none; }
/* Phones: the pitch-zone chip is jargon next to the title; the status line says when the zone moves */
@media (max-width: 559px) { .ex-zone { display: none; } }

/* After a song: the score comes first, listening back is a quiet white button, and Finish is the one
   coral button on the screen. */
.ex-result > .ex-score { order: -1 !important; }
.ex-listen [data-mix].btn-primary { background: var(--white); color: var(--ink); box-shadow: var(--sh-card); }
.ex-listen [data-mix].btn-primary .ic { color: var(--coral); }
/* Narrow phones: "Start today's session" stays on one line; the label alone, centred */
@media (max-width: 400px) {
  .today-actions .btn-lg > .ic:first-child { display: none; }
  .today-actions .btn-lg > .ic:first-child + span:last-child { margin-right: 0; }
}
/* Profile: the guest's sign-in button keeps its label on one line */
.user-signin { white-space: nowrap; flex: none; width: max-content; }

/* ---------- Phones: last screens ---------- */
@media (max-width: 1023px) {
  /* Teach Bud your song / Sing along: the start button is pinned for the whole intro, not only its last box */
  .sa-split .sa-c { display: contents; }
}
@media (max-width: 559px) {
  /* Practice library: the whole card is the button, so the pill gives way to a chevron and the text gets the width */
  .px-hero > :last-child:not(.px-hero-text) { display: none; }
  .px-hero::after { content: ''; flex: none; width: 10px; height: 10px; margin-right: 4px; border: solid var(--ink-soft); border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); }
  /* Pitch mirror: one clear full-width start */
  .mr-go .btn { width: 100%; }
}
@media (max-width: 559px) and (max-height: 760px) {
  /* Lessons and sessions: the status line ("Listen to Bud") stays clear of the controls */
  .ex .pitch-tall { height: clamp(140px, 27svh, 280px); }
  .ex .pitch { height: clamp(120px, 23svh, 230px); }
}

/* ---------- Phones: exercises and the session intro (real-phone pass, 19 Oct 2026) ---------- */
@media (max-width: 759px) {
  /* Exercise controls follow the content instead of floating over the lane */
  .task .task-actions { position: static; box-shadow: none; background: none; padding-top: 12px; }
  /* Stop · Start over · Skip on one line */
  .run-btns { gap: 6px; flex-wrap: nowrap; }
  .run-btns .btn { white-space: nowrap; padding: 8px 14px; min-height: 42px; font-size: 0.92rem; }
  .run-btns .btn .ic { width: 16px; height: 16px; }
  .task-actions:has(.run-btns:not([hidden])) { flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 10px; }
  .task-actions:has(.run-btns:not([hidden])) > .btn-link { padding: 8px 6px; }

  /* Session intro: flat on the page (no card in a card), tips as one quiet line above Start */
  .s-start { background: none; box-shadow: none; padding: 0; border-radius: 0; display: flex; flex-direction: column; flex: 1; }
  .s-start .ob-title { font-size: 2.2rem; }
  .s-start .s-parts { margin-top: 18px; gap: 12px; }
  .s-start .tick-list { order: 0; margin-top: 18px; }
  .s-start .tick-list li:not(:first-child) { display: none; }
  .s-start .ob-actions { order: 1; margin-top: auto; padding-top: 16px; width: 100%; justify-items: stretch; }
  .s-start .ob-actions .btn-lg { width: 100%; }
}

/* Sound check: the mic level sits in the flow, big and centred, instead of pinned to a corner over the text */
.s-sound .sc-meter { position: static; display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 48px; margin: 22px auto 6px; }
.s-sound .sc-meter i { width: 10px; border-radius: 5px; }
.s-sound .sc-meter i:nth-child(1) { height: 14px; } .s-sound .sc-meter i:nth-child(2) { height: 22px; }
.s-sound .sc-meter i:nth-child(3) { height: 30px; } .s-sound .sc-meter i:nth-child(4) { height: 39px; }
.s-sound .sc-meter i:nth-child(5) { height: 48px; }
.s-sound .sc-status { text-align: center; }

/* ---------- After a song: score, your take, then what's next. Finish is the one coral button. ---------- */
.ex-result > .ex-score { order: -1 !important; text-align: center; }
.task.is-finished:has(.ex-result .ex-listen) .task-stage { display: none; }
.ex-result > .ex-listen {
  width: 100%; margin-top: 14px; padding: 16px; border-radius: 16px;
  background: var(--white); box-shadow: var(--sh-card);
}
.ex-result .ex-listen-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; width: 100%; }
.ex-result .ex-listen-btns [data-mix], .ex-result .ex-listen-btns [data-listen] {
  flex: 1 1 40%; min-height: 50px; padding: 10px 12px; white-space: nowrap; font-size: 1rem;
}
.ex-result .ex-listen-btns [data-keep], .ex-result .ex-listen-btns [data-first], .ex-result .ex-listen-btns [data-studio] {
  flex: 0 0 auto; background: none; border: 0; box-shadow: none; min-height: 40px; padding: 6px 2px; white-space: nowrap;
  color: var(--ink-soft); font-size: 0.9rem; font-weight: 700;
}
.ex-result .ex-listen-btns [data-keep] .ic, .ex-result .ex-listen-btns [data-first] .ic, .ex-result .ex-listen-btns [data-studio] .ic { width: 16px; height: 16px; }
.ex-result .ex-listen-note { margin-top: 2px; font-size: 0.8rem; }
@media (max-width: 759px) {
  .ex-result-actions { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 16px !important; }
  .ex-result-actions [data-act="next"] { flex: 1 1 100%; width: 100%; min-width: 0; }
  .ex-result-actions .btn-secondary { flex: 0 0 auto; }
  .ex-result-actions .btn-secondary {
    background: none !important; box-shadow: none !important; border: 0; min-height: 44px; padding: 6px 4px;
    color: var(--ink); font-size: 0.95rem; white-space: nowrap;
    text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 5px;
  }
  .ex-result-actions .btn-secondary .ic { display: none; }
}
/* Phones: the song lane takes the room the pinned bar used to (the controls now follow it) */
@media (max-width: 759px) { .pitch-lane { height: clamp(170px, calc(100svh - 420px), 340px) !important; } }
.ex-result-actions { width: 100%; }
/* The two ways to hear your take side by side; keep and studio as quiet links under them */
.ex-result .ex-listen-btns { display: grid; grid-template-columns: 1fr 1fr; justify-items: stretch; }
.ex-result .ex-listen-btns [data-mix], .ex-result .ex-listen-btns [data-listen] { grid-row: 1; width: auto; min-width: 0; padding-left: 8px; padding-right: 8px; }
.ex-result .ex-listen-btns [data-keep], .ex-result .ex-listen-btns [data-first], .ex-result .ex-listen-btns [data-studio] { grid-row: 2; justify-self: center; width: auto; }
@media (max-width: 759px) { .ex-result-actions { flex-direction: row !important; } }
@media (max-width: 759px) {
  .ob-stage > section.s-start.ob-screen { margin: 0; padding: 0; background: none; box-shadow: none; text-align: center; }
  .ob-stage > section.s-start .s-parts { margin-top: 14px; gap: 10px; }
  .ob-stage > section.s-start .ob-title { font-size: 2rem; }
}
@media (max-width: 759px) { .ob-stage > section.s-start .ob-actions { padding-bottom: 20px; } }

/* ---------- Song steps on phones: "Speed and sound" on the kicker row, a compact panel, and the lane
   shrinks while it's open so Stop / Start over stay on screen. Gone once the step is done. ---------- */
.task-top .tempo-toggle { margin: 0; flex: none; }
.task.is-finished .tempo-toggle, .task.is-finished .tempo-bar { display: none !important; }
@media (max-width: 759px) {
  .task-top:has(.tempo-toggle) { align-items: center; margin-bottom: 6px; }
  .task-top .tempo-toggle { min-height: 34px; padding: 4px 12px 4px 10px; font-size: 0.85rem; }
  .tempo-bar.is-open { gap: 6px; margin: 0 0 8px; }
  .tempo-bar.is-open .tempo { padding: 1px; border-width: 1.5px; }
  .tempo-bar.is-open .tempo button { min-height: 30px; padding: 4px 10px; font-size: 0.82rem; }
  .tempo-bar.is-open .tempo-loop { min-height: 34px; padding: 4px 10px; font-size: 0.82rem; border-width: 1.5px; }
  .task:has(.tempo-bar.is-open) .pitch-lane { height: clamp(140px, calc(100svh - 500px), 300px) !important; }
}
@media (max-width: 759px) { .task .task-actions { padding-bottom: 14px; } }
/* Home's "Your song" card when its next line is in today's session: progress only, an arrow instead of a button. */
.home-song-go { flex: none; display: grid; place-items: center; width: 36px; height: 36px; color: var(--ink-soft); }
.home-song-go .ic { width: 22px; height: 22px; }

/* ---------- "What your song needs" (after the first try) ---------- */
.needs .first-line { font-size: 1.12rem; }
.needs-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: need; }
.needs-list > li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; counter-increment: need; }
.needs-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--coral); color: var(--white); font-weight: 700; font-family: var(--font-head); }
.needs-num::before { content: counter(need); }
.needs-text { display: grid; gap: 2px; }
.needs-text b { font-family: var(--font-head); font-size: 1.05rem; }
.needs-text small { color: var(--ink-soft); font-size: 0.95rem; }
.needs-text em { font-style: normal; font-size: 0.9rem; font-weight: 700; color: var(--teal-deeper); margin-top: 2px; }
/* The way on stays in view on wide and short screens too: Start Day 1 after the first try. */
@media (min-width: 760px) {
  .needs .ob-actions { position: sticky; bottom: 0; z-index: 5; background: var(--mint); padding: 14px 0 16px; box-shadow: 0 -20px 16px -6px var(--mint); }
}
/* Day 1's finish: the price, once, in a quiet line under what's next. */
.finish-price { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line, rgba(46, 61, 68, 0.1)); color: var(--ink-soft); font-size: 0.9rem; }
.finish-price .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }