/* sound-panel (.contracts/sound-panel.md; owner 09.10–10.10; sound-panel-v3, 12.10): the sound step of the quiz, on unless
   ?sound=0 (core.js, js/sound-panel.js). The rules of the owner's draft for layout A2 with the look "covers with symbols"
   (site-drafts/quiz-sound/sound.css on branch quiz-sound-design: .v-a, body.look-cov, body.look-sym, .snd-*), on top of
   quiz.css. Every rule here is keyed on #snd, #snd-mp, the panel's own .snd-* elements or body.snd-on — all made by sound-panel.js
   only when the switch is on — so with the switch off none of them matches anything on the page.
   Every tap target 44 px or more; the chosen cover has a ring, not only its color (WCAG 1.4.1); white names on the covers
   ≥ 5:1 at the lighter end of each gradient (the draft's README, WCAG 1.4.3). */

/* ---------- the panel ---------- */
/* the quiz's main is a flex column: without this a wide row would widen the page */
body.snd-on #quiz-form, body.snd-on #quiz-form [data-step], #snd { min-width: 0; }
#snd { margin: 0; }
#snd button { -webkit-tap-highlight-color: transparent; }
#snd .snd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin: 0; }
#snd .snd-lab { display: block; margin: 14px 0 6px; font-weight: 700; font-size: 1rem; }
#snd .snd-head .snd-lab { margin: 0; }
#snd .snd-opt { font-weight: 500; color: var(--muted); font-size: .9rem; }
#snd .snd-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px 0 8px; border: 0; background: none; color: var(--accent-text);
  font: 700 .95rem/1.2 var(--sans); cursor: pointer; white-space: nowrap; }
#snd .snd-group { margin: 12px 0 0; }
#snd .snd-group h3 { margin: 0 0 6px; font: 700 .85rem/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* the drawn symbols (js/sound-icons.js): the line of the occasion icons of step 1 */
#snd .snd-os, .snd-tap .snd-os { display: inline-block; width: 20px; height: 20px; margin-right: 6px; vertical-align: -4px; fill: none;
  color: var(--accent-text); stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#snd .snd-group h3 .snd-os { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; }
#snd .snd-sym { display: block; width: 20px; height: 20px; fill: none; color: var(--accent-text); stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }

/* "Tap to hear" with the headphones on the heading's line, right */
body.snd-on .snd-h1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
body.snd-on .snd-h1 #h-step3 { margin-bottom: 6px; }
.snd-tap { flex: none; margin: 0; color: var(--accent-text); font: 700 .92rem/1.2 var(--sans); white-space: nowrap; }

/* the round ▶ / ■: a ring fills while the clip plays (--p 0…1, sound-panel.js) */
#snd .snd-pl { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text); }
#snd .snd-pl svg { width: 13px; height: 13px; fill: currentColor; }
#snd .snd-pl .i-play { margin-left: 2px; }
#snd .snd-pl .i-stop, #snd [data-playing="true"] .snd-pl .i-play { display: none; }
#snd [data-playing="true"] .snd-pl .i-stop { display: block; }
#snd [data-playing="true"] .snd-pl { background: var(--accent); color: #fff; }
#snd [data-playing="true"] .snd-pl::before { content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: conic-gradient(var(--ring, var(--accent)) calc(var(--p, 0) * 1turn), rgba(209, 71, 47, .22) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }

/* ---------- the covers: two columns, a colored card per genre, the name in white, the symbol big and white in the corner ---------- */
#snd .snd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 6px; }
#snd .snd-tile { position: relative; display: flex; align-items: flex-start; gap: 8px; min-height: 60px; padding: 8px 40px 8px 12px; border: 0;
  border-radius: var(--r-sm); overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 4px 12px rgba(42, 30, 27, .14); font: 700 .95rem/1.2 var(--sans); text-align: left; cursor: pointer; }
#snd .snd-tile .snd-t { min-width: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
#snd .snd-tile .snd-ic { display: contents; }
#snd .snd-tile .snd-sym { position: absolute; right: 3px; bottom: -6px; width: 36px; height: 36px; color: #fff; stroke-width: 1.6;
  opacity: .92; transform: rotate(-8deg); pointer-events: none; }
#snd .snd-tile .snd-pl { position: absolute; top: 7px; right: 8px; width: 24px; height: 24px; background: rgba(255, 255, 255, .95); color: var(--ink); }
#snd .snd-tile .snd-pl svg { width: 9px; height: 9px; }
#snd .snd-tile[data-playing="true"] .snd-pl { background: #fff; color: var(--accent); }
#snd .snd-tile[data-playing="true"] .snd-pl::before { background: conic-gradient(#fff calc(var(--p, 0) * 1turn), rgba(255, 255, 255, .35) 0); }
#snd .snd-tile[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--accent), 0 6px 16px rgba(42, 30, 27, .2); }
#snd .snd-eqt { display: none; }
#snd .snd-tile[data-playing="true"] .snd-eqt { display: flex; position: absolute; left: 12px; bottom: 6px; align-items: flex-end; gap: 2px; height: 10px; }
#snd .snd-eqt i { width: 3px; height: 100%; border-radius: 2px; background: #fff; transform-origin: bottom; animation: sndEq 1s ease-in-out infinite; }
#snd .snd-eqt i:nth-child(2) { animation-delay: -.35s; }
#snd .snd-eqt i:nth-child(3) { animation-delay: -.7s; }
/* the 13 genres of 11.10 (demo shared/demo.css:37-46; feelgood, softrock70 new) — the covers and the mini-player's cover */
#snd [data-g="country-love"], #snd-mp [data-g="country-love"] { --c1: #8E2F1F; --c2: #B83A25; }
#snd [data-g="rnb"], #snd-mp [data-g="rnb"] { --c1: #2A1F47; --c2: #553A85; }
#snd [data-g="piano-pop"], #snd-mp [data-g="piano-pop"] { --c1: #3D2A63; --c2: #62458F; }
#snd [data-g="acoustic"], #snd-mp [data-g="acoustic"] { --c1: #6B4214; --c2: #8F5A1C; }
#snd [data-g="softrock70"], #snd-mp [data-g="softrock70"] { --c1: #6E3A12; --c2: #9C5A22; }
#snd [data-g="upbeat-country"], #snd-mp [data-g="upbeat-country"] { --c1: #7A4B00; --c2: #9A6005; }
#snd [data-g="feelgood"], #snd-mp [data-g="feelgood"] { --c1: #8A2A55; --c2: #B23C6E; }
#snd [data-g="soul60"], #snd-mp [data-g="soul60"] { --c1: #5A2A0A; --c2: #8A4312; }
#snd [data-g="heartland"], #snd-mp [data-g="heartland"] { --c1: #123848; --c2: #1D5E73; }
#snd [data-g="worship"], #snd-mp [data-g="worship"] { --c1: #1F405A; --c2: #33678A; }
#snd [data-g="gospel"], #snd-mp [data-g="gospel"] { --c1: #43205F; --c2: #6E3792; }
#snd [data-g="country-gospel"], #snd-mp [data-g="country-gospel"] { --c1: #4E3016; --c2: #7A5029; }
#snd [data-g="xmas"], #snd-mp [data-g="xmas"] { --c1: #0F4A28; --c2: #1A6B3D; }
#snd [data-g="gentle-piano"], #snd-mp [data-g="gentle-piano"] { --c1: #3E4A5C; --c2: #61718A; } /* memory-refs-live: Gentle Piano & Strings */

/* ---------- voice: "Voice" and two buttons in a row ---------- */
#snd .snd-vrow { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
#snd .snd-vrow .snd-lab { flex: none; margin: 0; }
#snd .snd-seg { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#snd .snd-vo { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 4px 14px 4px 8px;
  border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 1rem/1.2 var(--sans); cursor: pointer; }
#snd .snd-vo[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1.5px var(--accent); }
#snd .snd-vo[aria-pressed="true"] .snd-pl { background: var(--paper); }

/* ---------- the bar on step 3: what the song will sound like, then Continue — in the page, not stuck to the bottom ---------- */
.snd-sum { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 .95rem/1.3 var(--sans); color: var(--ink); }
.snd-sum[hidden] { display: none; }
.snd-sum #snd-sum-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.snd-eq { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.snd-eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--accent); transform: scaleY(.45); transform-origin: bottom; }
.snd-eq i:nth-child(2) { transform: scaleY(.8); }
body.snd-playing .snd-eq i { animation: sndEq 1s ease-in-out infinite; }
body.snd-playing .snd-eq i:nth-child(2) { animation-delay: -.35s; }
body.snd-playing .snd-eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes sndEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { body.snd-playing .snd-eq i, #snd .snd-eqt i { animation: none; } }
/* A2 (owner 09.10): Continue right after the panel, as on a plain page; the whole screen scrolls. Steps 1, 2 and 4, and
   the quiz without the switch, keep the sticky bar of quiz.css. */
/* the live quiz has #turnstile-widget and #err-submit between the form and the bar (the draft had not): a smaller top margin
   than the draft's 12px keeps the guarantee line on a 390x754 screen. The mini-player #snd-mp lives in this bar, so in the
   page flow it can only sit above Continue, never over it. */
body.snd-on[data-page="quiz"] #view-quiz .q-foot { position: static; margin: 6px 0 0; padding: 0 0 12px; background: none; }

/* ---------- the mini-player (sound-panel-v3): one for the page, in the bar's flow right above the line and Continue — never
   over them (owner 12.10: it must not cover Continue). Shown by sound-panel.js after the first tap, on step 3 only. ---------- */
#snd-mp { display: grid; grid-template-columns: 44px minmax(0, 1fr) 48px; align-items: center; gap: 4px 10px; margin: 0 0 10px; padding: 8px 10px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); }
#snd-mp[hidden] { display: none; }
#snd-mp .snd-mp-c { position: relative; display: block; width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, var(--c1), var(--c2)); }
#snd-mp .snd-mp-c .snd-sym { position: absolute; right: 2px; bottom: 1px; width: 60%; height: 60%; fill: none; stroke: #fff; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; transform: rotate(-8deg); }
#snd-mp .snd-mp-t { min-width: 0; }
#snd-mp .snd-mp-t b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 .95rem/1.25 var(--sans); }
#snd-mp .snd-mp-t small { display: block; color: var(--muted); font: 600 .82rem/1.3 var(--sans);
  font-variant-numeric: tabular-nums; }
#snd-mp .snd-mp-pp { display: grid; place-items: center; width: 48px; height: 48px; min-height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: var(--accent); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#snd-mp .snd-mp-pp .snd-pl { display: grid; place-items: center; width: 20px; height: 20px; }
#snd-mp .snd-mp-pp svg { width: 16px; height: 16px; fill: currentColor; }
#snd-mp .snd-mp-pp .i-stop, #snd-mp .snd-mp-pp[data-playing="true"] .i-play { display: none; }
#snd-mp .snd-mp-pp[data-playing="true"] .i-stop { display: block; }
#snd-mp .snd-mp-seek { grid-column: 1 / -1; width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; }
#snd-mp .snd-mp-seek:disabled { cursor: default; opacity: .55; }
#snd-mp .snd-mp-full { grid-column: 1 / -1; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--accent); border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-text); font: 700 1rem/1.2 var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
#snd-mp .snd-mp-full[hidden] { display: none; }