/* ═══════════════════════════════════════════════════════════════════════════
   sounds.css — the Sound Map.
   Vowels on the IPA quadrilateral, consonants on a place × manner grid, one
   sheet that opens the chosen sound with the Voice Line and the microphone.
   ═══════════════════════════════════════════════════════════════════════ */
.page-sounds { --top: calc(var(--bar-h) + var(--bar-gap) * 2); --wrap: 1400px; }
.sm-hero { padding: calc(var(--top) + clamp(16px, 4vh, 40px)) 0 clamp(20px, 3vh, 32px); }
.sm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 24px; align-items: end; }
.sm-hero-copy { display: grid; gap: 14px; }
.sm-hero .ph-title { max-width: 16ch; font-size: clamp(2.4rem, 1.3rem + 4.6vw, 5.4rem); }
.sm-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .85rem; color: var(--ink-2); justify-content: flex-end; }
.sm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.k { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: var(--cyc); }
.k-long { background: var(--ink); }
.k-diph { border-radius: 3px; border-color: var(--sound); background: var(--sound-soft); }
.k-voice { border-color: var(--sound); background: var(--sound); }
.k-unvoice { border-color: var(--line-2); background: var(--cyc-2); }
@media (max-width: 899px) { .sm-hero-grid { grid-template-columns: minmax(0, 1fr); } .sm-legend { justify-content: flex-start; } }

/* ── the map ───────────────────────────────────────────────────────────── */
.sm-map { padding: 0 0 clamp(40px, 7vh, 80px); }
.sm-map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.sm-board { display: grid; gap: 22px; }
.sm-panel { background: var(--cyc); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 2.4vw, 28px); box-shadow: var(--shadow-1); display: grid; gap: 14px; }
.sm-panel-head { display: grid; gap: 4px; }
.sm-panel-head h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.sm-panel-head p { font-size: .92rem; max-width: 60ch; }

/* vowel quadrilateral */
.sm-quad { position: relative; width: 100%; aspect-ratio: 1.55 / 1; max-height: 62vh; margin-inline: auto; }
.sm-quad-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sm-quad-svg .frame { fill: var(--cyc-2); stroke: var(--line-2); stroke-width: .4; vector-effect: non-scaling-stroke; }
.sm-quad-svg .grid { stroke: var(--line); stroke-width: .3; vector-effect: non-scaling-stroke; fill: none; }
.sm-quad-svg .lab { font-family: var(--f-display); font-size: 2.6px; fill: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.sm-quad-svg .arrow { fill: none; stroke: var(--sound); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .35; transition: opacity .25s, stroke-width .25s; marker-end: url(#sm-arrow); }
.sm-quad-svg .arrow.is-hot { opacity: 1; }
.sm-quad-svg .arrow-hit { fill: none; stroke: transparent; stroke-width: 10; vector-effect: non-scaling-stroke; cursor: pointer; }
.sm-v { position: absolute; transform: translate(-50%, -50%); width: clamp(40px, 5.2vw, 64px); height: clamp(40px, 5.2vw, 64px); border-radius: 50%; display: grid; place-items: center; font-family: var(--f-ipa); font-size: clamp(1.2rem, 1rem + 1.2vw, 1.9rem); line-height: 1; background: var(--cyc); border: 2px solid var(--ink); color: var(--ink); box-shadow: var(--shadow-1); transition: transform .3s var(--ease-out), box-shadow .3s, background .2s, color .2s; z-index: 1; }
.sm-v.long { background: var(--ink); color: var(--cyc); }
.sm-v:hover { transform: translate(-50%, -50%) scale(1.1); box-shadow: var(--shadow-2); z-index: 3; }
.sm-v.is-on { background: var(--sound); border-color: var(--sound); color: #fff; transform: translate(-50%, -50%) scale(1.14); box-shadow: 0 0 0 6px var(--sound-soft), var(--shadow-2); z-index: 4; }
.sm-d { position: absolute; transform: translate(-50%, -50%); padding: 4px 8px; border-radius: 8px; font-family: var(--f-ipa); font-size: clamp(.95rem, .8rem + .6vw, 1.25rem); line-height: 1; background: var(--sound-soft); color: var(--sound); border: 1px solid transparent; transition: transform .3s var(--ease-out), background .2s, color .2s; z-index: 2; }
.sm-d:hover { transform: translate(-50%, -50%) scale(1.08); border-color: var(--sound); }
.sm-d.is-on { background: var(--sound); color: #fff; transform: translate(-50%, -50%) scale(1.12); z-index: 4; }

/* consonant grid */
.sm-grid { display: grid; grid-template-columns: 96px repeat(8, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.sm-grid .hd { font-family: var(--f-display); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 6px 2px 4px; font-variation-settings: 'opsz' 12, 'wdth' 90, 'wght' 650; align-self: end; line-height: 1.2; }
.sm-grid .rh { font-family: var(--f-display); font-size: .74rem; color: var(--ink-2); padding: 8px 6px; font-variation-settings: 'opsz' 12, 'wdth' 92, 'wght' 650; display: grid; align-content: center; line-height: 1.15; }
.sm-grid .cell { min-height: 56px; border-radius: 10px; background: var(--cyc-2); display: grid; grid-auto-flow: column; gap: 3px; padding: 3px; }
.sm-grid .cell.empty { background: transparent; border: 1px dashed var(--line); }
.sm-c { border: 0; border-radius: 8px; display: grid; place-items: center; font-family: var(--f-ipa); font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem); line-height: 1; padding: 6px 2px; background: var(--cyc); color: var(--ink); border: 1.5px solid var(--line-2); transition: transform .25s var(--ease-out), box-shadow .25s, background .2s, color .2s, border-color .2s; min-width: 0; }
.sm-c.voiced { border-color: var(--sound); color: var(--ink); background: var(--cyc); }
.sm-c.voiced::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sound); margin-top: 3px; }
.sm-c:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: var(--ink); }
.sm-c.is-on { background: var(--sound); border-color: var(--sound); color: #fff; box-shadow: 0 0 0 4px var(--sound-soft); }
.sm-c.is-on::after { background: #fff; }

/* the sheet */
.sm-sheet { position: sticky; top: calc(var(--top) + 8px); }
.sm-sheet-inner { position: relative; background: var(--cyc); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-2); min-height: 420px; display: grid; align-content: start; }
.sm-close { display: none; position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--cyc-2); font-size: 1.4rem; line-height: 1; }
.sm-empty { color: var(--ink-2); font-size: 1.05rem; align-self: center; text-align: center; padding: 60px 10px; }
.sm-detail { display: grid; gap: 16px; }
.sm-detail-top { display: grid; gap: 4px; }
.sm-type { font-family: var(--f-display); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sound); font-variation-settings: 'opsz' 12, 'wdth' 90, 'wght' 650; }
.sm-sym { font-size: clamp(4rem, 3rem + 3vw, 6.4rem); line-height: 1; letter-spacing: -.02em; }
.sm-say { color: var(--ink-2); }
.sm-say b { font-family: var(--f-display); color: var(--ink); font-variation-settings: 'opsz' 24, 'wdth' 100, 'wght' 700; }
.sm-how { font-size: 1.1rem; line-height: 1.5; text-wrap: pretty; padding-left: 14px; border-left: 3px solid var(--pen); }
.sm-words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sm-words li { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: -.01em; padding: 8px 12px; border-radius: 10px; background: var(--cyc-2); font-variation-settings: 'opsz' 24, 'wdth' 100, 'wght' 650; }
.sm-words b { color: var(--sound); font-weight: inherit; }
.sm-spell { color: var(--ink-2); font-size: .95rem; }
.sm-spell span { font-family: var(--f-display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; font-variation-settings: 'opsz' 12, 'wdth' 90, 'wght' 650; }
.sm-spell b { color: var(--ink); font-weight: 600; }
.sm-voice { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.sm-line { height: 64px; }
.sm-line canvas { width: 100%; height: 100%; }
.sm-voice-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sm-voice-btns .btn { padding: 12px 18px; font-size: .95rem; }
.mic .rec { width: 10px; height: 10px; border-radius: 50%; background: var(--live); }
.mic[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--live); color: var(--live); }
.mic[aria-pressed="true"] .rec { animation: live-pulse 1.4s ease-out infinite; }
.sm-mic-note { font-size: .9rem; }
.sm-nav { display: flex; justify-content: space-between; gap: 8px; }
.sm-nav .btn { padding: 12px 16px; font-size: .9rem; }

@media (max-width: 1100px) { .sm-grid { grid-template-columns: 76px repeat(8, minmax(0, 1fr)); } .sm-grid .rh { font-size: .68rem; padding: 6px 4px; } }
@media (max-width: 899px) {
  .sm-map-grid { grid-template-columns: minmax(0, 1fr); }
  .sm-quad { aspect-ratio: 1.3 / 1; max-height: none; }
  .sm-grid { grid-template-columns: 56px repeat(8, minmax(0, 1fr)); gap: 3px; }
  .sm-grid .hd { font-size: .5rem; letter-spacing: .04em; }
  .sm-grid .rh { font-size: .6rem; padding: 4px 2px; }
  .sm-grid .cell { min-height: 46px; padding: 2px; gap: 2px; }
  .sm-c { font-size: 1rem; padding: 4px 0; border-radius: 6px; }
  /* the sheet becomes a bottom sheet */
  .sm-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 150; transform: translateY(110%); transition: transform .45s var(--ease-out); }
  .sm-sheet.is-open { transform: none; }
  .sm-sheet-inner { border-radius: 22px 22px 0 0; max-height: 82svh; overflow: auto; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); min-height: 0; box-shadow: 0 -20px 60px rgba(14, 17, 24, .28); }
  .sm-close { display: grid; place-items: center; }
  .sm-empty { display: none; }
  .sm-sym { font-size: 3.4rem; }
}

/* ── practice ──────────────────────────────────────────────────────────── */
.sm-sentences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 28px; }
.sm-sent { margin: 0; display: grid; gap: 10px; padding: 24px 26px; background: var(--cyc); border: 1px solid var(--line); border-radius: var(--radius); }
.sm-sent blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.02em; line-height: 1.25; font-variation-settings: 'opsz' 48, 'wdth' 100, 'wght' 680; }
.sm-sent .ipa { font-size: 1.15rem; color: var(--sound); }
.sm-sent figcaption { color: var(--ink-2); font-size: .95rem; }
.sm-cta { display: grid; gap: 10px; justify-items: start; padding: 26px 28px; border-radius: var(--radius); background: var(--cyc-2); }
@media (max-width: 760px) { .sm-sentences { grid-template-columns: minmax(0, 1fr); } .sm-cta .btn { width: 100%; } }