/* VNN · G8/G9 Unit 3 Preview cosmetic fixes (2026-10-22)
   1) Karaoke speaker labels: "Teacher:" (81px at 700 17px Inter) no longer wraps
      in the 70px label column. Column widened to 92px, uniform across lines, and
      labels never wrap. Applies to every grade using the shared karaoke renderer;
      short labels (G6) only gain a slightly wider, still-aligned column.
   2) G8/G9 Dictation adapter panel: buttons and cards match the G6 Dictation
      module look (sgk-g6-u3-dictation-v1.css), scoped to #g89dicPanel only.
   3) G9 U3 vocab cards: long term+IPA no longer pushes listen buttons outside
      the card (see bottom of file). */

/* 1) Karaoke speaker label column */
.karaoke-card .karaoke-lines .dialogue-line{grid-template-columns:92px minmax(0,1fr)}
.karaoke-card .karaoke-lines .dialogue-line > b{white-space:nowrap}
@media(max-width:600px){
  .karaoke-card .karaoke-lines .dialogue-line{grid-template-columns:84px minmax(0,1fr)}
}

/* 2) G8/G9 Dictation panel (adapter markup: .row, .q-card, .meta, .muted, .input) */
#g89dicPanel{min-width:0}
#g89dicPanel .row{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:12px 0}
#g89dicPanel button{border:1px solid #b8d7c5;border-radius:9px;background:#f6fbf8;color:#285843;padding:9px 11px;min-height:42px;font-weight:650;font-size:14px;cursor:pointer}
#g89dicPanel button:hover:not(:disabled){background:#eaf6ef}
#g89dicPanel button:disabled{opacity:.55;cursor:not-allowed}
#g89dicPanel button[aria-pressed="true"]{background:var(--grade-accent,#19664a);border-color:var(--grade-accent,#19664a);color:#fff}
#g89dicPanel button:focus-visible{outline:2px solid #24906b;outline-offset:2px}
#g89dicPanel .q-card{border:1px solid #d8e9df;border-radius:13px;background:#f8fcf9;padding:13px;min-width:0;margin-top:4px}
#g89dicPanel .q-card .meta{font-size:13px;font-weight:700;color:#496659}
#g89dicPanel .q-card p{margin:7px 0;font-size:15px;line-height:1.55;color:#183e2d;overflow-wrap:anywhere}
#g89dicPanel .q-card p.muted{font-size:13px;color:#496659}
#g89dicPanel .q-card label{display:block;font-size:13px;font-weight:650;color:#305945;margin:12px 0 6px}
#g89dicPanel .q-card textarea.input{box-sizing:border-box;width:100%;max-width:100%;border:1px solid #aacfb9;background:#fff;color:#183f2c;font-size:16px!important;min-height:46px;border-radius:10px;padding:10px 12px;resize:vertical}
#g89dicPanel .q-card > button{margin-top:10px;margin-right:7px;min-height:44px}
#g89dicPanel #g89dicStatus{margin-top:10px;min-height:20px;font-size:14px;font-weight:700;color:#225c39}
#g89dicPanel .lesson-scope-notice{margin-top:10px}
@media(max-width:600px){
  #g89dicPanel .row button{flex:1 1 115px}
  #g89dicPanel .q-card > button{flex:1 1 110px}
}

/* 3) G9 U3 vocab card overflow (2026-10-23)
   .vocab-en is a no-wrap flex row (flag ::before + <b> term + <em> IPA), so a long
   term+IPA pair forced .vocab-copy's auto grid track past the card edge and the
   listen buttons spilled outside the card (10 of 26 cards affected on desktop).
   Mirrors the G8 U3 fix in sgk-g8-u3-vocab-3d-preview-v1.css, plus caps the copy
   track so both audio rows stay inside the card. Content/audio wiring unchanged. */
html[data-sgk-grade="9"][data-sgk-unit="3"] .vocab-copy{grid-template-columns:minmax(0,1fr)}
html[data-sgk-grade="9"][data-sgk-unit="3"] .vocab-en{min-width:0;flex-wrap:wrap;overflow-wrap:anywhere}
html[data-sgk-grade="9"][data-sgk-unit="3"] .vocab-en em{white-space:normal;overflow-wrap:anywhere}