/* Applied after all themes so card-specific button styles cannot break alignment. */
.speaking-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:8px; max-width:560px; width:100%; }
.speaking-controls > button { box-sizing:border-box; width:100%; min-width:0; height:52px; min-height:52px; margin:0 !important; padding:6px 8px; font-size:14px; line-height:1.25; display:flex; align-items:center; justify-content:center; text-align:center; overflow-wrap:normal; }
.picture-word-card .speaking-controls,.word-card .speaking-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
.speaking-guide { border:0; padding:0; background:transparent; margin:0 0 12px; text-align:right; }
.help-link { border:0; background:transparent; color:#35634c; text-decoration:underline; text-underline-offset:3px; padding:8px; min-height:44px; font-size:14px; }
.speaking-status[data-error="true"] { color:#a52320; background:#fff0ef; border:1px solid #e7b3b0; border-left:4px solid #a52320; border-radius:7px; padding:10px; font-weight:700; text-align:left; }
.speaking-error-help[hidden] { display:none; }
.speaking-error-help { display:block; margin-top:4px; color:#a52320; }
.reading-word-help .word-card,.article-study .word-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; }
.reading-word-help .word-card > b,.reading-word-help .word-card > .support-py,.reading-word-help .word-card > .support-en,.article-study .word-card > .word-cn,.article-study .word-card > .py,.article-study .word-card > .english { display:block; width:100%; margin:0; float:none; }
.reading-word-help .word-card > b { font-size:26px; }
.expression-context { width:100%; text-align:left; }
.lesson-nav-title { display:block; }
.lesson-nav-cn { display:block; margin-top:3px; font-size:14px; font-weight:500; line-height:1.5; color:#536d5e; }
.lesson-nav.active .lesson-nav-cn { color:inherit; }
.faq-page { width:min(820px,calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:0; border:1px solid #d8e4db; border-radius:16px; color:#294336; background:#fff; box-shadow:0 20px 80px #142c3340; }
.faq-page::backdrop { background:#102c2a70; }
.faq-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; position:sticky; top:0; background:#fff; border-bottom:1px solid #d8e4db; z-index:1; }
.faq-header h2 { margin:0; font-size:25px; }
.faq-header h2 span { display:block; font-size:17px; font-weight:500; margin-top:4px; }
.faq-header button { min-height:44px; }
.faq-content { padding:4px 22px 24px; line-height:1.7; }
.faq-content h3 { font-size:21px; margin:22px 0 12px; }
.faq-content details { border-bottom:1px solid #e2e9e3; padding:0; scroll-margin-top:100px; }
.faq-content summary { padding:14px 4px; cursor:pointer; font-weight:650; }
.faq-content p,.faq-content ol { margin:4px 4px 16px; }
.faq-content ol { padding-left:25px; }
.faq-content a { color:#35634c; text-underline-offset:3px; }
.faq-content summary:focus-visible,.help-link:focus-visible { outline:3px solid #438168; outline-offset:3px; }
@media(max-width:540px) { .speaking-controls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .speaking-controls > button { font-size:13px; padding:6px 4px; } .faq-header { padding:14px; } .faq-header h2 { font-size:21px; } .faq-content { padding:4px 14px 20px; } }
@media(max-width:540px) { header { flex-wrap:wrap; } .header-actions { width:100%; } .site-nav { width:100%; justify-content:space-between; } }

/* Let long definitions determine the front height without shrinking the glyph. */
.flip-character-grid { align-items:stretch; }
.flip-character-card { height:auto; min-height:205px; }
.flip-card-inner { height:100%; min-height:inherit; }
.flip-card-front { position:relative; inset:auto; height:100%; min-height:205px; justify-content:flex-start; padding:18px 12px; }
.flip-card-front > span { flex-shrink:0; }
.flip-char-cn { display:block; line-height:1.25; }
.flip-char-en { width:100%; text-align:center; overflow-wrap:anywhere; line-height:1.5; }
.flip-hint { margin-top:auto; padding-top:7px; }
.flip-character-card.flipped { height:450px; min-height:450px; }
.flip-character-card.flipped .flip-card-front { height:100%; }
.sentence-card .speaking-practice .speaking-controls,
.dialogue-line .speaking-practice .speaking-controls { display:grid; width:100%; min-width:0; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.speaking-practice .speaking-controls > button { width:100%; min-width:0; margin:0; height:52px; padding:6px 8px; white-space:normal; overflow-wrap:normal; }
@media(max-width:650px) {
 .sentence-card .speaking-practice { grid-column:1 / -1; flex:0 0 100%; width:100%; margin:10px 0 0; }
 .dialogue-line .speaking-practice { grid-column:1 / -1; width:100%; }
 .sentence-card .speaking-practice .speaking-controls,
 .dialogue-line .speaking-practice .speaking-controls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .flip-character-card { height:auto; min-height:205px; }
 .flip-card-front { min-height:205px; padding:16px 10px; }
}

/* Speaking buttons belong to their own grid, never the outer text grid. */
.speaking-practice .speaking-controls > button { grid-column:auto; grid-row:auto; justify-self:stretch; }