/* ═══════════════════════════════════════════════════════════════════════
   IPA CHART  (Phonology → IPA)   —   loaded by sound-map/index.html
   Bare-bones simplified interface: symbols first, everything technical
   tucked behind "More details" and "More IPA symbols".
   Uses the app's shared palette custom-properties (--bg/--surf/--gold/…).
   ═══════════════════════════════════════════════════════════════════════ */

/* The scroll region. #panel-ipa.active is a constrained flex column (see the
   shared panel rule in index.html), so flex:1 + min-height:0 lets this fill
   the panel and scroll internally instead of overflowing the app shell. */
.ipa-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:26px 30px 64px}

/* ── Header ────────────────────────────────────────────────────────────── */
.ipa-head{margin:2px 0 12px}
.ipa-title{font-size:30px;font-weight:700;letter-spacing:.01em;color:var(--text);margin:0}
.ipa-tagline{color:var(--muted);font-size:13.5px;margin:5px 0 0}

/* ── Layout: chart uses full width until a symbol is selected ──────────── */
.ipa-layout{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.ipa-layout.sel{grid-template-columns:minmax(0,1fr) 320px}
.ipa-main{min-width:0}
.ipa-charts{min-width:0}
.ipa-block{margin-bottom:36px}
.ipa-subblock{margin:14px 0 18px}

/* Section titles: quiet, not shouting gold-uppercase. */
.ipa-h3{font-size:17px;font-weight:700;letter-spacing:.005em;color:var(--text);margin:0 0 2px}
.ipa-h3::after{content:"";display:block;width:38px;height:2px;background:var(--gold);border-radius:2px;margin-top:7px;opacity:.65}
.ipa-h4{font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--text);margin:0 0 4px}
.ipa-hint{color:var(--muted);font-size:11.5px;line-height:1.5;margin:9px 0 14px;max-width:760px}

/* ── Consonant grid ───────────────────────────────────────────────────── */
.ipa-tablescroll{overflow-x:auto;padding-bottom:4px}
.ipa-grid{border-collapse:collapse;font-size:16px}
.ipa-grid th{font-weight:600;color:var(--muted);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;font-family:ui-monospace,"Consolas",monospace;padding:5px 6px;text-align:center;white-space:nowrap}
.ipa-grid th.ipa-manner{text-align:right;padding-right:12px;position:sticky;left:0;background:var(--bg);z-index:1}
.ipa-corner{position:sticky;left:0;background:var(--bg);z-index:2}
.ipa-place{border-bottom:1px solid var(--bdr)}
.ipa-cell{border:1px solid rgba(255,255,255,.05);padding:0;min-width:64px;height:46px;vertical-align:middle;text-align:center;background:transparent}
.ipa-cell-empty{background:transparent;border-color:rgba(255,255,255,.03)}
.ipa-slot{display:inline-flex;justify-content:center;align-items:center;width:50%;height:46px}
.ipa-slot-vl{border-right:1px dotted rgba(255,255,255,.06)}

/* Symbols: bigger, tactile. */
.ipa-sym{background:none;border:1px solid transparent;border-radius:9px;color:var(--text);cursor:pointer;font-family:"Gentium Plus","Doulos SIL","Charis SIL",Georgia,serif;font-size:21px;line-height:1;padding:6px 9px;min-width:34px;transition:transform .1s,background .12s,color .12s,box-shadow .12s}
.ipa-sym:hover{background:rgba(232,200,64,.14);color:var(--gold);transform:translateY(-1px)}
.ipa-sym:active{transform:translateY(0)}
.ipa-sym.sel{background:var(--gold);color:#111;border-color:var(--gold);font-weight:600;box-shadow:0 3px 12px rgba(232,200,64,.4)}
.ipa-sym:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── Vowel quadrilateral ──────────────────────────────────────────────── */
.ipa-quad{position:relative;height:300px;max-width:580px;margin:10px 0 6px 34px}
.ipa-quad-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ipa-quad-frame polygon{fill:rgba(232,200,64,.03);stroke:rgba(232,200,64,.32);stroke-width:.6;vector-effect:non-scaling-stroke}
.ipa-quad-frame line{stroke:rgba(255,255,255,.08);stroke-width:.5;vector-effect:non-scaling-stroke}
.ipa-quad-ax{position:absolute;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;pointer-events:none}
.ipa-ax-front{top:-16px;left:0}
.ipa-ax-back{top:-16px;right:6%}
.ipa-ax-close{top:8px;left:-30px;transform:rotate(-90deg);transform-origin:left top}
.ipa-ax-open{bottom:-2px;left:-30px;transform:rotate(-90deg);transform-origin:left top}
.ipa-vnode{position:absolute;transform:translate(-50%,-50%);min-width:24px;font-size:19px;padding:3px 5px;background:var(--surf);border:1px solid var(--bdr)}
.ipa-vnode.vn-unround{margin-left:-11px}
.ipa-vnode.vn-round{margin-left:11px}
.ipa-vnode:hover{z-index:5}
.ipa-vnode.sel{z-index:6}

/* ── Chip rows (inside "More IPA symbols") ────────────────────────────── */
.ipa-chips{display:flex;flex-wrap:wrap;gap:8px}
.ipa-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--radius);cursor:pointer;padding:5px 11px 5px 7px;transition:border-color .12s,background .12s}
.ipa-chip:hover{border-color:rgba(232,200,64,.45);background:var(--surf2)}
.ipa-chip:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.ipa-chip .ipa-sym{pointer-events:none;font-size:18px;padding:2px 4px}
.ipa-chip-name{font-size:10.5px;color:var(--muted);letter-spacing:.02em;white-space:nowrap}

/* ── "More IPA symbols" collapsible ───────────────────────────────────── */
.ipa-more{margin-top:6px;border-top:1px solid var(--bdr)}
.ipa-more-summary{cursor:pointer;list-style:none;color:var(--text);font-size:14.5px;font-weight:600;padding:14px 2px;display:flex;align-items:center;gap:9px;user-select:none}
.ipa-more-summary::-webkit-details-marker{display:none}
.ipa-more-summary::before{content:"▸";color:var(--gold);font-size:12px;transition:transform .15s}
.ipa-more[open] .ipa-more-summary::before{transform:rotate(90deg)}
.ipa-more-summary:hover{color:var(--gold)}
.ipa-more-body{padding:6px 0 4px}
.ipa-more-body .ipa-h4{color:var(--gold);opacity:.92}

/* ── Compact detail card ──────────────────────────────────────────────── */
.ipa-detail{position:sticky;top:8px;align-self:start}
.ipa-detail[hidden]{display:none}
.ipa-detail-inner{position:relative;background:var(--surf);border:1px solid var(--bdr);border-top:3px solid var(--gold);border-radius:14px;padding:18px 18px 16px}
.ipa-card-close{position:absolute;top:8px;right:9px;background:none;border:none;color:var(--muted);font-size:21px;line-height:1;cursor:pointer;padding:2px 7px;border-radius:7px;transition:background .12s,color .12s}
.ipa-card-close:hover{color:var(--text);background:var(--surf2)}
.ipa-card-top{display:flex;align-items:center;gap:15px;margin-bottom:13px;padding-right:22px}
.ipa-card-glyph{font-family:"Gentium Plus","Doulos SIL","Charis SIL",Georgia,serif;font-size:52px;line-height:1;color:var(--gold);flex-shrink:0}
.ipa-card-name{font-size:18px;font-weight:600;color:var(--text);line-height:1.25}
.ipa-card-formal{font-size:11px;color:var(--muted);font-style:italic;margin-top:4px}
.ipa-card-how{font-size:13.5px;line-height:1.55;color:var(--text);margin:0 0 10px}
.ipa-card-example{font-size:12.5px;color:var(--blue);margin:0 0 13px}
.ipa-card-example b{color:var(--text);font-weight:600}
.ipa-card-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.ipa-card-play{background:var(--gold);border:none;border-radius:10px;color:#111;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;padding:9px 18px;transition:filter .12s,transform .1s}
.ipa-card-play:hover{filter:brightness(1.08)}
.ipa-card-play:active{transform:scale(.97)}
.ipa-card-play:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.ipa-card-more{background:none;border:1px solid var(--bdr);border-radius:10px;color:var(--muted);cursor:pointer;font-family:inherit;font-size:12px;padding:9px 13px;transition:border-color .12s,color .12s}
.ipa-card-more:hover{color:var(--text);border-color:var(--gold)}
.ipa-card-more:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.ipa-card-noaudio{font-size:11.5px;color:var(--muted);font-style:italic}
.ipa-card-status{font-size:10.5px;color:var(--gold);min-height:13px;margin-top:9px}
.ipa-card-details{margin-top:13px;border-top:1px solid var(--bdr);padding-top:13px}

/* Rich content revealed by "More details". */
.ipa-d-cat{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px}
.ipa-d-rows{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.ipa-d-row{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.ipa-d-k{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:9px;font-weight:700;align-self:center;flex-shrink:0}
.ipa-d-v{color:var(--text);text-align:right}
.ipa-d-howto{font-size:11.5px;line-height:1.5;color:var(--text);background:var(--surf2);border-left:2px solid var(--gold);border-radius:0 4px 4px 0;padding:8px 10px;margin-bottom:10px}
.ipa-d-howto-h{display:block;font-size:9px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.ipa-d-note{font-size:10.5px;color:var(--muted);font-style:italic;line-height:1.45;margin-bottom:8px}
.ipa-d-audionote{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.ipa-d-audionote span{font-size:10px;color:var(--muted);font-style:italic;line-height:1.4}

/* ── Articulation diagrams ────────────────────────────────────────────── */
.ipa-diagram{margin-top:6px}
.ipa-sagittal{display:block;width:100%;height:auto;max-width:240px;margin:6px auto 4px;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--radius)}
.ipa-tract{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;opacity:.7}
.ipa-tongue{fill:rgba(232,120,120,.18);stroke:rgba(232,120,120,.55);stroke-width:1.5}
.ipa-lips{fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round}
.ipa-lips.rounded{stroke:var(--gold);stroke-width:4}
.ipa-nasal{fill:rgba(64,176,232,.05);stroke:rgba(64,176,232,.2);stroke-width:1}
.ipa-nasal.on{fill:rgba(64,176,232,.22);stroke:var(--blue)}
.ipa-zone{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.2);stroke-width:1;transition:fill .18s,r .18s}
.ipa-zone.on{fill:var(--gold);stroke:var(--gold);filter:drop-shadow(0 0 5px rgba(232,200,64,.8))}
.ipa-voicebox{fill:rgba(255,255,255,.10);stroke:var(--muted);stroke-width:1}
.ipa-voicebox.voiced{fill:var(--green);stroke:var(--green);filter:drop-shadow(0 0 4px rgba(80,208,144,.7))}
.ipa-air{stroke:var(--gold);stroke-width:2;fill:none;opacity:.85}
.ipa-d-legend{font-size:10px;color:var(--muted);text-align:center;line-height:1.45;margin-top:2px}
.ipa-d-legend b{color:var(--text);font-weight:600}
.ipa-d-legend b.on{color:var(--green)}

.ipa-vspace{display:block;width:100%;height:auto;max-width:220px;margin:6px auto 4px;background:var(--surf2);border:1px solid var(--bdr);border-radius:var(--radius)}
.ipa-vquad{fill:rgba(232,200,64,.04);stroke:rgba(232,200,64,.4);stroke-width:.8;vector-effect:non-scaling-stroke}
.ipa-vlabel{fill:var(--muted);font-size:5px;letter-spacing:.05em;font-family:ui-monospace,monospace}
.ipa-vdot{fill:var(--gold);stroke:#111;stroke-width:.6;filter:drop-shadow(0 0 3px rgba(232,200,64,.8))}
.ipa-vsym{fill:var(--gold);font-size:8px;text-anchor:middle;font-family:"Gentium Plus","Charis SIL",Georgia,serif}

/* ── Contrasts / related sounds ───────────────────────────────────────── */
.ipa-d-related{margin-top:12px;border-top:1px solid var(--bdr);padding-top:10px}
.ipa-d-related-h{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ipa-rel-row{display:flex;flex-wrap:wrap;gap:6px}
.ipa-rel{display:inline-flex;flex-direction:column;align-items:center;gap:1px;background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;cursor:pointer;padding:4px 8px;transition:border-color .12s,background .12s;min-width:44px}
.ipa-rel:hover{border-color:var(--gold);background:rgba(232,200,64,.1)}
.ipa-rel:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.ipa-rel-sym{font-family:"Gentium Plus","Charis SIL",Georgia,serif;font-size:16px;color:var(--gold)}
.ipa-rel-lbl{font-size:8.5px;color:var(--muted);letter-spacing:.02em;white-space:nowrap}

/* ── Responsive & motion ──────────────────────────────────────────────── */
@media (max-width:820px){
  .ipa-layout,.ipa-layout.sel{grid-template-columns:1fr}
  .ipa-scroll{padding:20px 14px 56px}
  /* On narrow screens the card becomes a compact bottom sheet pinned to the
     scroll viewport, so it never squeezes the chart beside it. */
  .ipa-detail{position:sticky;top:auto;bottom:8px;z-index:20}
  .ipa-detail-inner{max-height:66vh;overflow:auto;box-shadow:0 -8px 28px rgba(0,0,0,.55)}
  .ipa-quad{max-width:100%;height:250px;margin-left:30px}
}
@media (max-width:430px){
  .ipa-title{font-size:26px}
  .ipa-quad{height:215px}
  .ipa-vnode{font-size:16px;min-width:20px}
}
@media (prefers-reduced-motion:reduce){
  .ipa-sym,.ipa-chip,.ipa-play,.ipa-rel,.ipa-zone,.ipa-card-play,.ipa-card-more,.ipa-card-close,.ipa-more-summary::before{transition:none}
}