/* Learning-only emphasis; roles come from confirmed phonics units. */
.learning-card[data-primary-word]{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:3px;background:#fff}
.learning-card[data-primary-word]>.learning-word{grid-column:1/-1;grid-row:1;margin:0;text-align:center;min-width:0}
.learning-card[data-primary-word]>.learning-tools{grid-column:2;grid-row:2;min-height:44px;margin:0;align-items:center}
.learning-card[data-primary-word]>.word-voice-choice{grid-column:1;grid-row:2;justify-self:center;align-self:center}
.learning-card[data-primary-word]>.learning-image-trigger{grid-column:1/-1;grid-row:3}
.learning-card[data-primary-word]>.pi-controls{grid-column:1/-1;grid-row:4}
.learning-card[data-primary-word]>.learning-definition{grid-column:1/-1;grid-row:5}
.learning-card[data-primary-word]>.learning-sentence{grid-column:1/-1;grid-row:6}
.word-voice-choice{display:inline-flex;align-items:center;gap:0;position:relative;border-radius:11px;background:#f1eafa;padding:0 2px;max-width:100%}
.word-voice-choice button{position:relative;min-width:52px;min-height:44px;padding:0 8px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:12px;font-weight:650;color:#6e6092;isolation:isolate}
.word-voice-choice button::before{content:"";position:absolute;inset:7px 1px;z-index:-1;border-radius:7px}
.word-voice-choice button[aria-pressed=true]{color:#fff}
.word-voice-choice button[aria-pressed=true]::before{background:#7650bd;box-shadow:0 1px 3px #7650bd26}
.word-voice-choice button:disabled{opacity:.5}
.word-voice-choice button:focus-visible{outline:2px solid #7650bd;outline-offset:0}
.learning-card[data-primary-word] .word{font-size:var(--learning-word-size,40px);font-weight:800;text-align:center}
.learning-card[data-primary-word] .ph-integrated{font-size:inherit;font-weight:800;gap:.12em;line-height:1.15}
:is(.learning-card,.word-voyage) .pi-consonant{color:#1679bf}
:is(.learning-card,.word-voyage) .pi-vowel{color:#ed665d}
:is(.learning-card,.word-voyage) .pi-vowel.pi-weak{color:#cc7565}
:is(.learning-card,.word-voyage) .pi-irregular{color:#8261a8}
:is(.learning-card,.word-voyage) .pi-silent{color:#a1a9b0}
.learning-card[data-primary-word] .pi-syllable{background:transparent;border:1px solid #d6e3ed;box-shadow:none}
.learning-card[data-primary-word] .pi-letter{text-decoration:none;border-bottom:0}
.learning-card[data-primary-word] .pi-syllable.pi-active{background:#e6daf7;border-color:#b8a1d6}
.learning-card[data-primary-word] .pi-letter.pi-active,.learning-card[data-primary-word] .pi-ipa .pi-active,.learning-card[data-primary-word] .pi-ipa.pi-active{background:#e6daf7;color:#513880}
.learning-card[data-primary-word] .ipa:has(.pi-ipa){margin-top:4px;line-height:1.4}
@media(max-width:599px){
 .learning-card[data-primary-word]{padding:7px 10px;row-gap:2px}
 .learning-card[data-primary-word] .pi-syllable{padding:2px 3px 0}
 .learning-card[data-primary-word] .pi-letter{min-height:36px;min-width:16px;padding:0 1px}
 .learning-card[data-primary-word] .learning-image{height:clamp(52px,calc(100dvh - 565px),145px);width:min(100%,180px)}
 .learning-card[data-primary-word] .learning-image-trigger{width:min(100%,180px)}
 .learning-card[data-primary-word] .learning-definition{margin:3px auto 4px;font-size:14px;line-height:1.35}
 .learning-card[data-primary-word] .learning-sentence{padding-top:5px}
 .learning-card[data-primary-word] .sentence{font-size:15px;line-height:1.4}
 .learning-card[data-primary-word] .word-translation,.learning-card[data-primary-word] .sentence-translation{font-size:12px;line-height:1.35;margin-top:2px}
}

@media(max-width:360px){.learning-card[data-primary-word]{row-gap:1px}}

/* Short recognition cards: retain every control and full text in the viewport. */
@media(max-width:360px) and (max-height:700px){
 .learning-card[data-primary-word]{grid-template-columns:44px minmax(0,1fr) auto;column-gap:4px;row-gap:0;padding:2px 7px}
 .learning-card[data-primary-word]>.learning-word{grid-column:1/-1}
 .learning-card[data-primary-word]>.learning-image-trigger{grid-column:1;grid-row:2;width:44px;height:44px;margin:0}
 .learning-card[data-primary-word] .learning-image{width:44px;height:44px;object-fit:contain}
 .learning-card[data-primary-word]>.word-voice-choice{grid-column:2;grid-row:2}
 .learning-card[data-primary-word]>.learning-tools{grid-column:3;grid-row:2}
 .learning-card[data-primary-word]>.pi-controls{grid-row:3;margin:0;gap:0}
 .learning-card[data-primary-word]>.learning-definition{grid-row:4;margin:2px 0;font-size:13px;line-height:1.25}
 .learning-card[data-primary-word]>.learning-sentence{grid-row:5;padding:2px 0;min-height:44px}
 .learning-card[data-primary-word] .sentence{font-size:14px;line-height:1.25}
 .learning-card[data-primary-word] .word{font-size:min(var(--learning-word-size),24px);display:flex;align-items:flex-end;justify-content:center;gap:2px}
 .learning-card[data-primary-word] .word>small{flex:0 0 auto;font-size:11px;line-height:1.3}
 .learning-card[data-primary-word] .ph-integrated{min-width:0;font-size:clamp(20px,calc(var(--learning-word-size) - 10px),24px);gap:2px}
 .learning-card[data-primary-word] .pi-letter{min-width:10px;padding-inline:0}
 .learning-card[data-primary-word] .pi-syllable{padding:1px 2px 0}
 .learning-card[data-primary-word] .pi-syllable-letters{gap:0}
 .learning-card[data-primary-word] .ipa:has(.pi-ipa){font-size:14px;margin-top:2px;line-height:1.3}
 .learning-card[data-primary-word] .pi-ipa{white-space:normal;overflow-wrap:anywhere}
 .learning-card[data-primary-word] .pi-status{font-size:10px;line-height:1.2}
 .learning-card[data-primary-word] .word-voice-choice button{min-width:44px;padding:0 5px}
}
@media(min-width:600px) and (max-height:1100px){
 .learning-card[data-primary-word] .learning-image{height:clamp(52px,calc(100dvh - 885px),160px)}
 .learning-card[data-primary-word]{padding-bottom:14px}
 .learning-card[data-primary-word] .learning-definition{margin:6px auto}
 .learning-card[data-primary-word] .learning-sentence{padding-top:10px}
}

@media(max-width:360px) and (max-height:700px){
 body[data-page="cards"] .view:has(.learning-card[data-primary-word]),body[data-page="session"] .view:has(.learning-card[data-primary-word]){padding-top:2px;padding-bottom:2px}
 body[data-page="cards"] .view:has(.learning-card[data-primary-word]) .learning-progress-status,body[data-page="session"] .view:has(.learning-card[data-primary-word]) .learning-progress-status{font-size:10px;line-height:12px;margin:0}
 body[data-page="cards"] .view:has(.learning-card[data-primary-word]) .learning-progress,body[data-page="session"] .view:has(.learning-card[data-primary-word]) .learning-progress{margin-bottom:2px}
 .learning-card[data-primary-word]{margin:0}
}

/* Recognition card hierarchy: picture, word/meta, phonics, meaning, sentence. */
.learning-card[data-primary-word]{position:relative;grid-template-columns:minmax(0,1fr)}
.learning-card[data-primary-word]>.learning-image-trigger{grid-column:1;grid-row:1}
.learning-card[data-primary-word]>.learning-word{grid-column:1;grid-row:2}
.learning-card[data-primary-word]>.pi-controls{grid-column:1;grid-row:3}
.learning-card[data-primary-word]>.learning-definition{grid-column:1;grid-row:4;text-align:center}
.learning-card[data-primary-word]>.learning-sentence{grid-column:1;grid-row:5;text-align:center}
.learning-card[data-primary-word] .word-translation,.learning-card[data-primary-word] .sentence-translation{text-align:center}
.learning-card[data-primary-word]>.learning-tools{position:absolute;grid-area:auto;top:4px;right:8px;display:flex;flex-wrap:nowrap;width:max-content;gap:0;min-height:44px;margin:0;z-index:1}
.learning-card[data-primary-word]>.learning-tools>button{min-width:44px;min-height:44px;padding:0 6px;border:0;background:transparent;box-shadow:none;font-size:12px}
.learning-card[data-primary-word]>.learning-tools>.vocabulary-add{font-size:20px}
.learning-card[data-primary-word] .learning-meta{display:flex;align-items:center;justify-content:center;gap:8px;max-width:100%;min-height:44px;margin:2px auto 0}
.learning-card[data-primary-word] .learning-meta .ipa{flex:0 1 auto;min-width:0;max-width:calc(100% - 96px);margin:0;line-height:1.4}
.learning-card[data-primary-word] .learning-meta .pi-ipa{white-space:normal;overflow-wrap:anywhere}
.learning-meta .word-voice-choice{flex:0 0 88px;min-width:88px;padding:0;background:transparent;box-shadow:none;border:0;border-radius:0}
.learning-meta .word-voice-choice::before{content:"";position:absolute;inset:7px 0;border:1px solid #e2e5eb;border-radius:7px;background:#f8f9fb;pointer-events:none}
.learning-meta .word-voice-choice button{min-width:44px;min-height:44px;padding:0 5px;font-size:12px;font-weight:500;color:#81909b}
.learning-meta .word-voice-choice button::before{inset:8px 1px;border-radius:5px;box-shadow:none}
.learning-meta .word-voice-choice button[aria-pressed=true]{color:#65528b;font-weight:650}
.learning-meta .word-voice-choice button[aria-pressed=true]::before{background:#eeeaf5;box-shadow:none}
@media(max-width:599px){
 .learning-card[data-primary-word]>.learning-image-trigger{width:min(100%,145px)}
 .learning-card[data-primary-word] .learning-image{width:100%}
}
@media(max-width:360px) and (max-height:700px){
 .learning-card[data-primary-word]{grid-template-columns:minmax(0,1fr);padding-top:0;padding-bottom:0}
 .learning-card[data-primary-word]>.learning-image-trigger{grid-column:1;grid-row:1;width:44px;height:44px;justify-self:center;margin:0 auto}
 .learning-card[data-primary-word] .learning-image{width:44px;height:44px}
 .learning-card[data-primary-word]>.learning-tools{top:0;right:4px}
 .learning-card[data-primary-word]>.pi-controls{grid-column:1;grid-row:3}
 .learning-card[data-primary-word]>.learning-definition{grid-row:4;margin:1px 0}
 .learning-card[data-primary-word]>.learning-definition>p{line-height:1.25}
 .learning-card[data-primary-word]>.learning-sentence{grid-row:5;padding-top:0;padding-bottom:0}
 .learning-card[data-primary-word] .learning-meta{margin-top:0}
 .learning-card[data-primary-word] .learning-meta .ipa{font-size:14px;line-height:1.25}
 body[data-page="cards"] .view:has(.learning-card[data-primary-word]),body[data-page="session"] .view:has(.learning-card[data-primary-word]){position:relative}
 body[data-page="cards"] .view:has(.learning-card[data-primary-word]) .learning-course,body[data-page="session"] .view:has(.learning-card[data-primary-word]) .learning-course{align-self:flex-start;line-height:14px;margin-top:8px}
 body[data-page="cards"] .view:has(.learning-card[data-primary-word]) .learning-progress-status,body[data-page="session"] .view:has(.learning-card[data-primary-word]) .learning-progress-status{position:absolute;top:28px;left:66px;right:58px;line-height:12px;margin:0;text-align:left}
}

body:is([data-page="cards"],[data-page="session"]) .learning-card .word-translation,body:is([data-page="cards"],[data-page="session"]) .learning-card .sentence-translation{text-align:center}

@media(max-width:360px) and (max-height:700px){body:is([data-page="cards"],[data-page="session"]) .view:has(.learning-card[data-primary-word]) .learning-course{align-self:center;margin:0}}

/* Square image with deliberate word separation; compact screens adapt the image only. */
.learning-card[data-primary-word]>.learning-image-trigger{width:168px;height:168px;max-width:100%;aspect-ratio:1}
.learning-card[data-primary-word] .learning-image{width:100%;height:100%;aspect-ratio:1;object-fit:contain}
.learning-card[data-primary-word]>.learning-word{margin-top:12px}
.learning-meta .word-voice-choice::before{inset:9px 0;background:#fafbfc}
.learning-meta .word-voice-choice button::before{inset:10px 1px}
@media(min-width:600px){.learning-card[data-primary-word]>.learning-image-trigger{width:160px;height:160px}}
@media(max-width:360px) and (max-height:700px){
 .learning-card[data-primary-word]>.learning-image-trigger{width:var(--learning-image-cap,44px);height:var(--learning-image-cap,44px)}
 .learning-card[data-primary-word] .learning-image{width:100%;height:100%}
 .learning-card[data-primary-word]>.learning-word{margin-top:8px}
 .learning-card[data-primary-word]>.learning-definition{margin-top:0;margin-bottom:0}
}

/* Existing settings and compact phonetic row. */
.learning-card[data-primary-word] .learning-meta{min-height:0;margin-top:4px}
.learning-card[data-primary-word] .learning-meta .ipa{max-width:100%;flex:0 1 auto}
.playback-settings .word-voice-choice{background:#f6f7fa;border-radius:8px;padding:0;gap:0}
.playback-settings .word-voice-choice button{min-width:56px;min-height:44px;font-size:13px;color:#788391}
.playback-settings .word-voice-choice button[aria-pressed=true]{color:#65528b;font-weight:650}
.playback-settings .word-voice-choice button[aria-pressed=true]::before{background:#eeeaf5;box-shadow:none}

/* Current three-role settings; unavailable voices never fall back. */
.playback-settings .word-voice-setting{align-items:flex-start;flex-wrap:wrap;gap:8px}
.playback-settings .word-voice-options{width:100%;min-width:0}
.playback-settings .word-voice-choice{display:flex;flex-wrap:wrap;width:100%;gap:4px}
.playback-settings .word-voice-choice button{flex:1 1 120px;white-space:normal;min-height:44px}
.word-voice-pending-note{font-size:12px;line-height:1.5;color:#677c8b;margin:8px 0 0}

/* Compact category selector: only three short labels, including on narrow phones. */
.playback-settings .word-voice-choice.voice-categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.playback-settings .voice-categories button{min-width:0;white-space:nowrap}

/* One compact entry next to the phonetic transcription. */
.learning-card .learning-meta{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;margin:3px auto 0}
.learning-card .learning-meta .ipa{min-width:0;margin:0;overflow-wrap:anywhere}
.word-voice-picker{position:relative;flex:none;text-align:left;font-size:13px;color:#476c88}
.word-voice-picker summary{display:grid;place-items:center;list-style:none;min-width:44px;min-height:44px;border-radius:8px;cursor:pointer}
.word-voice-picker summary::-webkit-details-marker{display:none}
.word-voice-picker summary:focus-visible{outline:2px solid #2782bd;outline-offset:0}
.word-voice-badge{display:flex;align-items:center;gap:3px;padding:2px 5px;border-radius:5px;background:#edf4f9;line-height:1.4;font-weight:650}
.word-voice-badge svg{width:12px;height:12px}
.word-voice-picker[open] .word-voice-badge svg{transform:rotate(180deg)}
.word-voice-panel{position:absolute;z-index:5;inset-inline-start:0;top:calc(100% - 5px);display:grid;gap:2px;width:124px;padding:4px;border:1px solid #d6e6ef;border-radius:11px;background:white;box-shadow:0 6px 18px #173e621f}
.word-voice-panel button{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:0 9px;border:0;border-radius:7px;background:white;box-shadow:none;color:#315c7e;font:inherit;text-align:left}
.word-voice-panel button[aria-pressed=true],.word-voice-panel button:enabled:hover{background:#edf6fd;color:#165d95}
.word-voice-panel button[aria-pressed=true]:not(:disabled)::after{content:"✓"}
.word-voice-panel button:disabled{opacity:.64}
.word-voice-panel small{font-size:11px}