/* Content → SongHug (Spec v2 §4). Tokens only; white paper, pink acts, rose holds. */
#songhug-root { display: grid; gap: var(--s-4); }
/* 3.3b: StoryHug had no gap, so its cards, button rows, note box and Approve touched. minmax(0, 1fr) keeps
 * long lines from pushing the screen wider than the phone. */
#storyhug-root { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
#storyhug-root[hidden] { display: none; }
.sh-preview { margin: 0; font-size: var(--t-xs); color: var(--muted); text-align: center; }
.sh-hero > div { padding: var(--s-6) var(--s-5); text-align: center; display: grid; gap: var(--s-3); justify-items: center; }
.sh-brand { font-family: var(--serif); font-weight: 400; font-size: var(--t-display); margin: 0; color: var(--rose); line-height: 1; }
.sh-brand.sh-small { font-size: var(--t-xl); }
.sh-tag { margin: 0; color: var(--muted); font-size: var(--t-md); }
.sh-primary { min-height: 52px; padding: 0 var(--s-6); border: 0; border-radius: 999px; background: var(--pink);
  color: #fff; font: 600 var(--t-md) var(--sans); letter-spacing: .02em; cursor: pointer; box-shadow: var(--shadow-sm); }
.sh-primary:hover { filter: brightness(.95); }
.sh-primary:disabled { opacity: .45; cursor: default; filter: none; }   /* StoryHug: Approve waits for the S24 ticks */
.sh-wide { width: 100%; }
.sh-cats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
/* Buttons that are cards: keep .card's silver edge and radius, drop the button chrome. */
button.card, .sh-pick { border: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.sh-pick { background: none; padding: 0; text-align: center; }
button.card:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.sh-cat .inner { min-height: 120px; padding: var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.sh-cat b { font-size: var(--t-lg); color: var(--rose); }
.sh-cat.comfort b { color: var(--blue); }
.sh-cat span, .sh-type small { color: var(--muted); font-size: var(--t-sm); }
.sh-mysongs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.sh-count { background: var(--silver-2); border-radius: var(--radius); padding: var(--s-3); text-align: center; }
.sh-count b { display: block; font-size: var(--t-xl); color: var(--ink); }
.sh-count span { font-size: var(--t-xs); color: var(--muted); }
.sh-continue .inner { padding: var(--s-4); }
/* Five named steps (2026-10-15): a bar each, its name underneath. */
.sh-steps { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0; }
.sh-steps li { flex: 1; min-width: 0; border-top: 6px solid var(--silver-1); border-radius: 3px; padding-top: 4px;
               font-size: var(--t-xs); line-height: 1.2; color: var(--muted); text-align: center; }
.sh-steps li.done { border-top-color: var(--rose); }
.sh-steps li.now { border-top-color: var(--pink); color: var(--rose); font-weight: 600; }
.sh-next { color: var(--rose); font-weight: 600; margin: var(--s-3) 0; }
.sh-back { justify-self: start; padding-left: 0; }
.sh-q { font-size: var(--t-xl); font-weight: 600; margin: 0; line-height: 1.25; }
.sh-qn { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.sh-input { width: 100%; box-sizing: border-box; font: var(--t-md) var(--sans); padding: var(--s-3); border: 1px solid var(--silver-1);
  border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.sh-input:focus { outline: 2px solid var(--pink); border-color: transparent; }
.sh-actions { display: flex; justify-content: space-between; align-items: center; }
.sh-list { display: grid; gap: var(--s-2); }
.sh-type .inner { padding: var(--s-4); display: grid; gap: 2px; min-height: 48px; }
.sh-type b { font-size: var(--t-md); }
.sh-type.on > .inner, .sh-singer.on > .inner, .sh-take.on > .inner, .sh-recipient.on > .inner { background: var(--pink-lo); box-shadow: inset 0 0 0 2px var(--pink); }
.sh-recipient .inner { padding: var(--s-4); }
.sh-photo, .sh-face { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--rose-lo);
  color: var(--rose); font: 400 var(--t-xl) var(--serif); flex: none; }
.sh-tick { color: var(--pink); font-size: var(--t-lg); }
.sh-working { text-align: center; display: grid; gap: var(--s-3); justify-items: center; padding: var(--s-7) 0; }
.sh-spinner { width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--pink-lo); border-top-color: var(--pink);
  animation: sh-spin 1s linear infinite; }
@keyframes sh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sh-spinner { animation: none; } }
.sh-heart { font-size: 56px; color: var(--pink); }
.sh-title { font-family: var(--serif); font-weight: 400; font-size: var(--t-xl); margin: 0; color: var(--rose); }
.sh-cues { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sh-cues span { font-size: var(--t-xs); background: var(--green-lo); color: var(--green); padding: 4px 10px; border-radius: 999px; }
.sh-section .inner { padding: var(--s-3) var(--s-4); }
.sh-section.chorus > .inner { background: var(--rose-lo); }
.sh-sec { text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-xs); color: var(--muted); }
.sh-line { margin: 4px 0; font-size: var(--t-md); line-height: 1.5; border-radius: 6px; padding: 2px 4px; }
.sh-line:focus { outline: 2px solid var(--pink); background: var(--paper); }
.sh-talk { display: flex; gap: var(--s-2); }
.sh-singers, .sh-takes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.sh-singer .inner, .sh-take .inner { padding: var(--s-3); display: grid; gap: var(--s-2); justify-items: center; text-align: center; }
.sh-pick { display: grid; justify-items: center; gap: 4px; width: 100%; }
.sh-pick small { color: var(--muted); font-size: var(--t-xs); }
.sh-singer audio, .sh-take audio, .sh-hero audio { width: 100%; height: 36px; }
.sh-stages { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; text-align: left; }
.sh-stages li { color: var(--muted); }
.sh-stages li.done { color: var(--green); }
.sh-stages li.done::before { content: "✓ "; }
.sh-stages li.now { color: var(--pink); font-weight: 600; }
.sh-check { display: flex; gap: var(--s-2); align-items: center; font-size: var(--t-base); }
@media (max-width: 380px) { .sh-cats, .sh-singers, .sh-takes { grid-template-columns: 1fr; } }

/* 2026-10-15 feedback round */
.sh-error { margin: 0; padding: var(--s-3); border-radius: var(--radius); background: var(--rose-lo); color: var(--rose); font-size: var(--t-sm); }
.sh-tools { display: flex; justify-content: space-between; gap: var(--s-2); }
.sh-titlerow { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.sh-last { border: 1px solid var(--pink); background: var(--pink-lo); color: var(--rose); border-radius: var(--radius);
  padding: 6px 12px; font: 600 var(--t-sm) var(--sans); text-align: right; cursor: pointer; max-width: 55%; }
.sh-last small { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-xs); }
.sh-used { font-size: var(--t-xs); color: var(--muted); background: var(--silver-2); border-radius: 999px; padding: 2px 8px; }
.sh-type .inner.row { flex-direction: row; align-items: center; }
.sh-type .grow { display: grid; gap: 2px; }
.sh-type.loading span[aria-hidden] { animation: sh-spin 1s linear infinite; display: inline-block; }
.sh-pick[aria-checked="true"] b { color: var(--pink); }
.sh-amber { margin: 0; color: #8A5A00; font-size: var(--t-sm); }
.sh-line.amber { background: #FFF4DB; }
.sh-karaoke .inner { gap: var(--s-3); }
.sh-karaoke audio { width: 100%; }
.sh-lines { max-height: 300px; overflow-y: auto; padding: var(--s-2) 0; scroll-behavior: smooth; }
.sh-lines p { margin: 0; padding: 6px var(--s-2); font-size: var(--t-lg); line-height: 1.35; color: var(--silver-3);
  border-radius: 8px; cursor: pointer; transition: color .25s, background .25s; }
.sh-lines p.sung { color: var(--muted); }
.sh-lines p.now { color: var(--ink); background: var(--pink-lo); font-weight: 600; box-shadow: inset 4px 0 0 var(--pink); }
.sh-speed { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); color: var(--muted); }
.sh-speed input { flex: 1; accent-color: var(--pink); }
.sh-speed b { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; }
.sh-locked { margin: 0; font-size: var(--t-sm); color: var(--green); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* The song's theme, above the questions and every later step (2026-10-15). */
.sh-theme { border-left: 4px solid var(--rose); background: var(--pink-lo); border-radius: var(--radius);
            padding: var(--s-3) var(--s-4); margin: var(--s-3) 0; display: grid; gap: 2px; }
.sh-theme small { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.sh-theme b { color: var(--rose); font-size: var(--t-lg, 1.25rem); }
.sh-theme span { color: var(--ink, inherit); }

/* How it sounds (2026-10-15): play and select are separate; one sound is selected. */
.sh-sound .inner { display: flex; flex-direction: row; gap: var(--s-3); align-items: center; }
.sh-sound .inner > b { flex: 1; min-width: 0; }
.sh-sound .sh-hear, .sh-sound .sh-tickbox { width: auto; flex: none; margin: 0; }
.sh-tickbox { border: 1px solid var(--silver-1); background: #fff; color: var(--muted); border-radius: var(--radius);
              padding: var(--s-2) var(--s-3); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sh-tickbox.on { border-color: var(--rose); background: var(--rose); color: var(--rose-ink); }

/* "Longer" (2026-10-16): one minute a tap, with a running count */
.sh-longer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 56px;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--pink); border-radius: var(--radius); background: var(--paper);
  color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: background .2s, box-shadow .2s; }
.sh-longer:hover:not(:disabled) { background: var(--pink-lo); }
.sh-longer.on { background: var(--pink-lo); box-shadow: inset 4px 0 0 var(--pink); }
.sh-longer:disabled { opacity: .55; cursor: default; border-color: var(--silver-2); }
.sh-longer-txt { display: grid; gap: 2px; }
.sh-longer-txt b { font-size: var(--t-md); color: var(--rose); }
.sh-longer-txt small { font-size: var(--t-xs); color: var(--muted); }
.sh-longer-n { flex: none; min-width: 4.5em; text-align: center; padding: 6px 12px; border-radius: 999px; background: var(--silver-2);
  color: var(--muted); font: 600 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; }
.sh-longer.on .sh-longer-n { background: var(--pink); color: #fff; }

/* StoryHug's words (P5, 3.3n): each paragraph with who reads it. */
.sh-lrow { margin: var(--s-2) 0; }
.sh-lrow select.sh-input { width: auto; min-height: 0; padding: 4px var(--s-2); font-size: var(--t-sm); }
.sh-lines p small { color: var(--muted); font-size: var(--t-sm); font-weight: 400; }