/* Readable sound spelling is visible with a model; detailed help stays folded. */
.sound-spelling { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; margin: 4px 0 12px; line-height: 1.65; text-align: left; }
.sound-spelling-label { font-size: 11px; font-weight: 500; color: #687062; white-space: nowrap; }
.sound-spelling-value { font-size: 15px; font-weight: 600; color: #3b5937; overflow-wrap: anywhere; }
.sound-syllable { white-space: nowrap; }
.sound-tone-mark { font-size: .8em; font-weight: 500; color: #526b49; vertical-align: .25em; line-height: 0; margin-left: 1px; }
.sound-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sound-approx { color: #6f7c67; font-weight: 400; }
.hanzi-card > .sound-spelling { justify-content: center; text-align: center; margin: 4px 0 14px; }
.hanzi-card > .sound-spelling .sound-spelling-value { font-size: 18px; }
.practice-panel > .sound-spelling { max-width: 560px; margin-left: auto; margin-right: auto; }
.study-aid { margin-top: 16px; border: 1px solid #dce5d7; border-radius: 12px; background: #f7f9f2; text-align: left; color: var(--ink); }
.study-aid > summary { min-height: 44px; padding: 10px 14px; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 650; cursor: pointer; list-style: none; }
.study-aid > summary::-webkit-details-marker { display: none; }
.study-aid > summary svg { width: 18px; height: 18px; fill: none; stroke: var(--green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.study-aid > summary .aid-chevron { margin-left: auto; color: var(--muted); font-size: 18px; }
.study-aid[open] > summary { border-bottom: 1px solid #e3e9dc; }
.study-aid[open] > summary .aid-chevron { transform: rotate(180deg); }
.pronunciation-aid { margin-top: 4px; border: 0; border-radius: 0; background: transparent; }
.pronunciation-aid > summary { padding: 6px 0; width: fit-content; gap: 7px; color: #526447; font-size: 12px; font-weight: 500; }
.pronunciation-aid > summary svg { width: 16px; height: 16px; }
.pronunciation-aid > summary .aid-chevron { margin-left: 2px; }
.pronunciation-aid[open] > summary { border-bottom: 0; }
.pronunciation-aid > .aid-body { background: #f7f9f2; border: 1px solid #dce5d7; border-radius: 12px; }
.aid-body { padding: 16px; min-width: 0; }
.aid-body p { font-size: 13px; line-height: 1.65; margin: 0; }
.aid-body > .sound-spelling { margin-bottom: 8px; }
.aid-body .tone-key { display: flex; flex-wrap: wrap; gap: 4px 12px; color: #59665d; font-size: 12px; margin-bottom: 12px; }
.tone-key > span { white-space: nowrap; }
.tone-key-mark { font-weight: 650; }
.tone-key-neutral { vertical-align: .25em; }
.aid-body .spelling-key { color: #59665d; font-size: 12px; margin-bottom: 16px; }
.aid-body .aid-intro { color: #59665d; margin-bottom: 13px; }
.syllable-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.syllable-chip { min-height: 48px; min-width: 51px; padding: 7px 10px; display: flex; flex-direction: column; gap: 3px; align-items: center; border: 1px solid #d8e1ce; border-radius: 9px; background: #fff; }
.syllable-chip strong { font-size: 16px; font-weight: 600; }
.syllable-chip small { font-size: 11px; color: #5b6a5d; }
.syllable-chip[aria-pressed="true"] { background: #e2edcc; border-color: #779762; box-shadow: inset 0 0 0 1px #779762; }
.sound-focus { padding: 15px; background: #fff; border: 1px solid #e1e6da; border-radius: 10px; }
.sound-focus-heading { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.sound-focus-heading > strong { font-size: 24px; font-weight: 600; }
.sound-tone { font-size: 11px; padding: 5px 9px; background: #eff3e6; border-radius: 20px; }
.mouth-cues { margin: 0; display: grid; gap: 10px; }
.mouth-cues dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 750; color: #60705d; margin-bottom: 3px; }
.mouth-cues dd { margin: 0; font-size: 13px; line-height: 1.65; }
.aid-body .spelling-cue { border-left: 2px solid #9cb87c; padding-left: 10px; margin-top: 12px; color: #36573f; }
.aid-body .tone-cue { margin-top: 12px; color: #53604f; }
.ipa-detail { margin-top: 12px; }
.ipa-detail > summary { cursor: pointer; min-height: 40px; display: list-item; font-size: 12px; color: #526447; padding: 10px 0; }
.ipa-detail > div { padding: 0 0 10px; }
.aid-body .ipa-value { font-family: 'Charis SIL','Doulos SIL','DejaVu Sans','Arial',sans-serif; font-size: 23px; line-height: 1.5; color: #33523c; overflow-wrap: anywhere; }
.aid-body .aid-caption { color: #687363; font-size: 11px; line-height: 1.65; margin-top: 6px; }
.aid-body .connected-cue { font-size: 12px; margin-top: 10px; color: #55664c; }
.aid-audio { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 10px; }
.aid-audio button { font-size: 12px; min-height: 44px; }
.aid-body .aid-practice { border-top: 1px dashed #d5deca; padding-top: 12px; margin-top: 10px; font-size: 12px; color: #47613e; }
.memory-aid { background: #faf8ef; border-color: #e5dfc9; }
.memory-aid[open] > summary { border-color: #eae4d0; }
.aid-body .memory-word { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 14px; }
.memory-word strong { font-family: 'PingFang SC','Microsoft YaHei',sans-serif; font-size: 24px; font-weight: 500; }
.memory-word span { font-size: 12px; color: #786e53; }
.aid-body h3 { font-size: 17px; font-weight: 650; margin: 0 0 6px; }
.memory-context { border-left: 2px solid #d1bc7a; margin-top: 16px; padding: 0 0 0 13px; }
.memory-context .eyebrow { font-size: 9px; letter-spacing: .1em; color: #85713e; margin-bottom: 6px; }
.memory-context .memory-zh { font-size: 22px; line-height: 1.55; font-family: 'PingFang SC','Microsoft YaHei',sans-serif; overflow-wrap: anywhere; }
.memory-context .py { font-size: 12px; margin: 5px 0; color: #756847; }
.memory-aid .aid-practice { border-color: #ded5b6; color: #75613a; }
.practice-panel > .study-aid { max-width: 560px; margin-left: auto; margin-right: auto; }
.feedback + .study-aid { margin-top: 12px; }
@media (max-width: 480px) {
  .aid-body { padding: 12px; }
  .sound-focus { padding: 12px; }
  .syllable-list { gap: 6px; }
  .syllable-chip { min-width: 46px; padding: 7px 8px; }
  .aid-audio { flex-direction: column; align-items: flex-start; }
  .memory-context { padding-left: 10px; }
}