/* The sound step, "give it its voice" (WP21; core DESIGN §5.11, §7.3; PLAN WP21, BCR-11). New, no demo source.
 * A warm paper sheet like the object cards: the cut-out on top (with a hand that knocks on it and an ear that listens),
 * the big ear button with its three dots, the eight material tiles (each with its swatch, the waves it sends out when it
 * plays, and the check of the chosen one) and one big check. [data-mode] on .snd decides what shows: grid (no microphone),
 * ear (the microphone offered), listen (the take), mine (the child's own sound). Light theme only; targets 60 px or more;
 * a calm path without movement (.snd.calm and prefers-reduced-motion). */

.sheet.snd-sheet { background: var(--paper); font-size: var(--body); }
.snd { display: grid; gap: 14px; padding-top: 4px; }
.snd-top { position: relative; display: grid; place-items: center; }
.snd-close { position: absolute; right: -6px; top: -4px; z-index: 2; }
.snd-line { justify-content: center; text-align: center; margin: 0; }

/* The picture: the cut-out, the knocking hand on its right, the listening ear on its left. */
.snd-stage { position: relative; width: min(100%, 300px); height: 164px; display: grid; place-items: center; }
.snd-sheet.has-labels .snd-stage { height: 140px; }
.snd-pic { width: 136px; height: 136px; display: grid; place-items: center; transform-origin: 50% 100%; --hop: 12px; --sq: .92; }
.snd-sheet.has-labels .snd-pic { width: 116px; height: 116px; }
.snd-pic img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 9px 7px rgba(60, 40, 20, .2)); transform-origin: 50% 100%; }
.snd-nopic { width: 96px; height: 96px; display: grid; place-items: center; color: var(--muted); }
.snd-nopic .ico { width: 64px; height: 64px; }
/* Each material lands its own way (the object cards' numbers). */
.snd-pic[data-mat="plush"] { --hop: 8px; --sq: .82; }
.snd-pic[data-mat="fabric"] { --hop: 8px; --sq: .86; }
.snd-pic[data-mat="paper"] { --hop: 14px; --sq: .96; }
.snd-pic[data-mat="wood"] { --hop: 10px; --sq: .97; }
.snd-pic[data-mat="plastic"] { --hop: 16px; --sq: .92; }
.snd-pic[data-mat="rubber"] { --hop: 32px; --sq: .76; }
.snd-pic[data-mat="ceramic"] { --hop: 6px; --sq: .98; }
.snd-pic[data-mat="metal"] { --hop: 4px; --sq: .99; }
.snd-pic.hop { animation: snd-hop 520ms cubic-bezier(.3, .7, .4, 1); }
@keyframes snd-hop {
  0% { transform: none; }
  16% { transform: scale(calc(2 - var(--sq)), var(--sq)); }
  46% { transform: translateY(calc(var(--hop) * -1)) scale(.97, 1.04); }
  76% { transform: scale(calc(2 - var(--sq)), var(--sq)); }
  100% { transform: none; }
}

.snd-hand, .snd-earpic { position: absolute; top: 50%; display: none; color: var(--ink); pointer-events: none; }
.snd-hand { left: calc(50% + 40px); width: 68px; height: 68px; margin-top: -42px; transform-origin: 100% 60%; }
.snd-sheet.has-labels .snd-hand { left: calc(50% + 31px); }
.snd-hand > .ico { width: 68px; height: 68px; }
.snd-bang { position: absolute; left: -22px; top: 6px; width: 30px; height: 30px; color: var(--coral-deep); opacity: 0; transform: rotate(-90deg); }
.snd-bang .ico { width: 30px; height: 30px; }
.snd-earpic { right: calc(50% + 86px); width: 56px; height: 56px; margin-top: -40px; color: var(--cobalt); }
.snd-sheet.has-labels .snd-earpic { right: calc(50% + 76px); }
.snd-earpic > .ico { width: 56px; height: 56px; }
.snd-earwaves { position: absolute; right: -26px; top: 12px; width: 28px; height: 28px; transform: scaleX(-1); opacity: .8; }
.snd-earwaves .ico { width: 28px; height: 28px; }
.snd[data-hand="knock"] .snd-hand, .snd[data-hand="still"] .snd-hand { display: block; }
.snd[data-earpic="1"] .snd-earpic { display: block; }
/* Knock, knock, then a breath: the hand taps the cut-out twice, the cut-out jolts, short lines burst where they meet. */
.snd[data-hand="knock"] .snd-hand { animation: snd-knock 2.4s ease-in-out infinite; }
.snd[data-hand="knock"] .snd-bang { animation: snd-bang 2.4s linear infinite; }
.snd[data-hand="knock"] .snd-pic img { animation: snd-jolt 2.4s ease-in-out infinite; }
.snd[data-earpic="1"] .snd-earwaves { animation: snd-listen 2.4s ease-in-out infinite; }
@keyframes snd-knock {
  0%, 34%, 100% { transform: translateX(18px) rotate(-10deg); }
  8%, 22% { transform: translateX(0) rotate(4deg); }
  15% { transform: translateX(14px) rotate(-8deg); }
}
@keyframes snd-bang { 0%, 6%, 13%, 20%, 27%, 100% { opacity: 0; } 8%, 10%, 22%, 24% { opacity: 1; } }
@keyframes snd-jolt { 0%, 7%, 12%, 21%, 26%, 100% { transform: none; } 9%, 23% { transform: translateX(-3px) rotate(-1.5deg); } }
@keyframes snd-listen { 0%, 100% { opacity: .35; } 12%, 30% { opacity: 1; } }

/* The microphone row: the big ear, the three dots; for the child's own sound "hear it" and "again". */
.snd-mic { display: none; align-items: center; justify-content: center; gap: 18px; min-height: 112px; }
.snd[data-mode="ear"] .snd-mic, .snd[data-mode="listen"] .snd-mic, .snd[data-mode="mine"] .snd-mic { display: flex; }
.snd-ear-btn { appearance: none; position: relative; width: 108px; height: 108px; flex: none; border: 0; margin: 0; padding: 0; border-radius: 50%;
  background: var(--butter); color: var(--ink); box-shadow: var(--shadow), var(--press); display: grid; place-items: center; cursor: pointer;
  touch-action: manipulation; transition: transform var(--t-micro) var(--spring); --lvl: 0; }
.snd-ear-btn > .ico { width: 54px; height: 54px; transform: scale(calc(1 + var(--lvl) * .14)); transition: transform 80ms linear; }
.snd-ear-btn:active { transform: scale(.94); }
.snd-ring { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); transform: rotate(-90deg); pointer-events: none; }
.snd-ring circle { fill: none; stroke-width: 7; }
.snd-ring-bg { stroke: transparent; }
.snd-ring-fg { stroke: var(--green); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
/* "Tap me": a soft halo breathes around the ear (a pseudo-element, so the button itself stays still under the finger). */
.snd[data-mode="ear"] .snd-ear-btn::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--butter) 75%, transparent); animation: snd-halo 2.4s ease-in-out infinite; }
/* Listening: a count-in glow (the floor's 150 ms), then the ring fills over the take; the ear swells with what it hears. */
.snd[data-mode="listen"] .snd-ear-btn { background: var(--signal); box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 45%, transparent), var(--shadow-lift);
  animation: snd-countin 300ms var(--spring); }
.snd[data-mode="listen"] .snd-ring-bg { stroke: color-mix(in srgb, var(--green) 18%, transparent); }
.snd[data-mode="listen"] .snd-ring-fg { animation: snd-fill var(--listen, 4s) linear 150ms forwards; }
@keyframes snd-halo { 0%, 100% { opacity: .2; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes snd-countin { 0% { transform: scale(.9); box-shadow: 0 0 0 0 var(--signal), var(--shadow); } 100% { transform: none; } }
@keyframes snd-fill { to { stroke-dashoffset: 0; } }
.snd[data-mode="mine"] .snd-ear-btn { display: none; }
/* (.snd-sheet in front: the sheets' .btn.round rule sets display, so these must out-rank it) */
.snd-sheet .snd .snd-replay, .snd-sheet .snd .snd-again { display: none; }
.snd-sheet .snd[data-mode="mine"] .snd-replay { display: grid; width: 76px; height: 76px; background: var(--butter); }
.snd-sheet .snd[data-mode="mine"] .snd-replay .ico { width: 34px; height: 34px; }
.snd-sheet .snd[data-mode="mine"] .snd-again:not([hidden]) { display: grid; }
.snd-dots { display: flex; gap: 12px; }
.snd-dots i { width: 22px; height: 22px; border-radius: 50%; background: var(--sand); box-shadow: inset 0 2px 0 rgba(93, 63, 26, .12); }
.snd-dots i.on { background: var(--coral); box-shadow: inset 0 -3px 0 rgba(93, 63, 26, .18); animation: snd-pop 380ms var(--spring); }
.snd-dots i.ping { animation: snd-ping 300ms var(--spring); }
@keyframes snd-pop { 0% { transform: scale(.3); } 100% { transform: none; } }
@keyframes snd-ping { 50% { transform: scale(1.35); } }
.snd.cheer .snd-pic img { animation: snd-cheer 650ms var(--spring); }
@keyframes snd-cheer { 30% { transform: translateY(-14px) scale(1.06); } 60% { transform: scale(1.04, .96); } }

/* The preset grid: eight material tiles, an equal path beside the ear. */
.snd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; transition: opacity var(--t-card); }
.snd[data-mode="listen"] .snd-grid { opacity: .4; }
.snd[data-mode="mine"] .snd-grid { display: none; }
.snd-tile { position: relative; min-height: 84px; border-radius: var(--tile); border: 3px solid transparent; background: var(--card); box-shadow: var(--shadow), var(--press);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px; margin: 0; font: inherit; font-weight: 750;
  font-size: 15px; line-height: 1.15; color: var(--ink); text-align: center; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform var(--t-micro) var(--spring); }
.snd-tile:active { transform: scale(.94); }
.snd-sw { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--ink); box-shadow: inset 0 -3px 0 rgba(93, 63, 26, .14); }
.snd-sw .ico { width: 32px; height: 32px; }
.snd-tile[data-material="plush"] .snd-sw { background: radial-gradient(circle, rgba(255, 251, 243, .32) 1.2px, transparent 1.9px) 0 0 / 7px 7px, #DDA77F; }
.snd-tile[data-material="fabric"] .snd-sw { background: repeating-linear-gradient(45deg, rgba(255, 251, 243, .3) 0 3px, transparent 3px 7px), repeating-linear-gradient(-45deg, rgba(24, 22, 18, .12) 0 3px, transparent 3px 7px), #8AA6E0; }
.snd-tile[data-material="paper"] .snd-sw { background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(76, 99, 216, .35) 9px 10px), #FFFDF6; }
.snd-tile[data-material="wood"] .snd-sw { background: repeating-linear-gradient(100deg, rgba(90, 50, 20, .22) 0 2px, transparent 2px 9px), #CC9461; }
.snd-tile[data-material="plastic"] .snd-sw { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .8) 0 12%, transparent 13%), #F3C341; }
.snd-tile[data-material="rubber"] .snd-sw { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .5) 0 11%, transparent 12%), #EE6A5C; }
.snd-tile[data-material="ceramic"] .snd-sw { background: linear-gradient(transparent 0 62%, rgba(76, 99, 216, .55) 62% 72%, transparent 72%), radial-gradient(circle at 34% 28%, #FFFFFF 0 24%, transparent 62%), #F1ECE2; }
.snd-tile[data-material="metal"] .snd-sw { background: linear-gradient(125deg, #8E97A1 0%, #DCE1E6 40%, #9BA4AE 58%, #CBD1D7 100%); }
.snd-tile[aria-checked="true"] { background: var(--coral-field); border-color: var(--coral-deep); box-shadow: none; color: var(--coral-deep); }
.snd-mark { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--coral-deep); color: #fff; display: none; place-items: center; }
.snd-mark .ico { width: 14px; height: 14px; stroke-width: 3.2; }
.snd-tile[aria-checked="true"] .snd-mark { display: grid; }
.snd-waves { position: absolute; left: 2px; top: 4px; width: 28px; height: 28px; color: var(--coral-deep); opacity: 0; pointer-events: none; transform: scaleX(-1); }
.snd-waves .ico { width: 28px; height: 28px; }
.snd-tile.ringing .snd-waves { animation: snd-waves 640ms ease-out; }
.snd-tile.ringing .snd-sw { animation: snd-ring 420ms var(--spring); }
@keyframes snd-waves { 0% { opacity: 0; transform: scaleX(-1) translateX(-4px) scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: scaleX(-1) translateX(6px) scale(1.1); } }
@keyframes snd-ring { 35% { transform: scale(1.12) rotate(-6deg); } 70% { transform: scale(.97) rotate(3deg); } }
.snd-word { max-width: 100%; overflow-wrap: anywhere; }

/* One big check (6-8: a round one with nothing to read); it waits, dimmed, until a tile has been heard (BCR-11). */
.snd-go { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: center; padding: 10px 0 2px; margin-top: -4px;
  background: linear-gradient(to top, var(--paper) 72%, rgba(247, 241, 231, 0)); }
.snd[data-mode="listen"] .snd-go { visibility: hidden; }
.snd-sheet:not(.has-labels) .snd-ok { width: 96px; height: 96px; min-height: 96px; border-radius: 50%; padding: 0; }
.snd-sheet .snd-ok .ico { width: 44px; height: 44px; }
.snd-sheet.has-labels .snd-ok .ico { width: 32px; height: 32px; }
.snd-ok[aria-disabled="true"] { background: var(--sand); color: rgba(24, 22, 18, .45); box-shadow: none; cursor: default; }

@media (max-width: 359px) {
  .snd-grid { gap: 8px; }
  .snd-sw { width: 46px; height: 46px; }
  .snd-ear-btn { width: 96px; height: 96px; }
}

/* Reduced motion: the same information without movement. */
.snd.calm .snd-hand, .snd.calm .snd-pic img, .snd.calm .snd-bang, .snd.calm .snd-earwaves, .snd.calm .snd-ear-btn, .snd.calm .snd-ear-btn::before, .snd.calm .snd-dots i,
.snd.calm .snd-waves, .snd.calm .snd-sw { animation: none !important; }
.snd.calm .snd-bang { opacity: 1; }
.snd.calm .snd-hand { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .snd-hand, .snd-pic img, .snd-pic.hop, .snd-bang, .snd-earwaves, .snd-ear-btn, .snd-ear-btn::before, .snd-dots i, .snd-waves, .snd-sw { animation: none !important; }
  .snd-bang { opacity: 1; }
  .snd-tile:active, .snd-ear-btn:active { transform: none; filter: brightness(.93); }
  .snd-tile.ringing .snd-waves { opacity: 1; transform: scaleX(-1); }
}