/* P1 standalone styles. All type roles/colours/motion come from tokens.css.
 * RD-3 focus-stage geometry extends the DQA1 protected-answer layout.
 */
.p-focus{margin:0;background:var(--bg);color:var(--textPrimary);font-family:var(--font-body);font-size:var(--body);line-height:1.45}
.p-focus *{box-sizing:border-box}.p-focus [hidden]{display:none!important}
.p-focus :is(button,input,a){-webkit-tap-highlight-color:transparent}.p-focus :where(button,input){font:inherit}
.p-focus :is(h1,h2,h3,p,figure){margin:0}.p-focus :is(h1,h2,h3){font-family:var(--font-display);font-weight:900;line-height:1.15;text-wrap:balance;overflow-wrap:normal}
.p-focus h1{font-size:var(--h1)}.p-focus h2{font-size:var(--h2)}.p-focus p{text-wrap:pretty}
.p-focus :is(button,a,input):focus-visible{outline:2px solid var(--action);outline-offset:2px}
.p-focus a{color:var(--textPrimary);text-underline-offset:.18em}.p-focus a:hover{text-decoration-thickness:2px}
.p-player{width:min(100%,680px);min-height:min(760px,calc(100dvh - 48px));height:calc(100dvh - 48px);max-height:900px;margin:var(--s6) auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto;isolation:isolate}
.p-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s5);min-height:64px}
.p-progress{flex:1;height:6px;border-radius:3px;background:var(--surfaceSunken);overflow:hidden}
.p-progress>span{display:block;width:100%;height:100%;border-radius:inherit;background:var(--action);transform-origin:left;transition:transform 360ms var(--spring)}
[dir=rtl] .p-progress>span{transform-origin:right}.p-counter{font-size:var(--caption);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--textSecondary)}
.p-stage{display:flex;flex-direction:column;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s6) var(--s5);scrollbar-width:thin;scroll-padding:var(--s4)}
.p-stage:has(.p-exercise){padding-block-end:calc(var(--drawer-h,0px) + var(--s4))}
.p-stage [tabindex="-1"]:focus{outline:none}
.p-card,.p-stack{display:flex;flex-direction:column;align-items:stretch;gap:var(--s4)}
.p-card{margin-block:auto}.p-card:has(.p-hero-word){align-items:center;text-align:center;width:100%}
.p-card>.p-bg-group{max-width:100%}.p-title{max-width:100%}.p-lead{font-size:var(--bg-text);font-weight:300;line-height:1.4}
.p-muted,.p-translit{color:var(--textSecondary);font-size:var(--secondary)}
.p-caption{font-size:var(--caption);color:var(--textSecondary)}
.p-eyebrow{color:var(--textSecondary);font-size:var(--eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.p-meaning{font-size:var(--bg-text);font-weight:300;line-height:1.45}
.p-hero-word:lang(bg){overflow-wrap:anywhere}
.p-hero-word{font-family:var(--font-display);font-size:var(--hero-word);font-weight:900;line-height:1.3;letter-spacing:-.005em;overflow-wrap:normal}
.p-hero-word:lang(bg){font-language-override:"BGR"}
.p-word-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}.p-word-chips>.p-bg-group{padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r-chip);background:var(--surface)}
.p-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:52px;padding:var(--s3) var(--s5);border:1.5px solid color-mix(in srgb,var(--textPrimary) 70%,transparent);border-radius:var(--r-button);background:transparent;color:var(--textPrimary);font-size:var(--body);font-weight:600;text-align:center;text-decoration:none;cursor:pointer;transition:transform var(--t-hover) var(--ease-out),background var(--t-hover),border-color var(--t-hover),box-shadow var(--t-hover);overflow-wrap:normal}
.p-button>svg{width:24px;height:24px;flex-shrink:0;transition:transform var(--t-hover) var(--ease-out)}
.p-button:disabled{opacity:.4;cursor:default}.p-button:active:not(:disabled){transform:scale(.98);background:color-mix(in srgb,var(--action) 14%,var(--surface));transition-duration:var(--t-press)}
.p-primary{background:var(--action);color:var(--onAction);border-color:var(--action);box-shadow:var(--lift-1);overflow:hidden}
.p-primary::after{position:absolute;content:"";inset-block:-40%;inset-inline-start:-60%;width:40%;background:linear-gradient(105deg,transparent,rgb(255 255 255/.18),transparent);transform:skewX(-12deg);pointer-events:none}
[data-theme=dark] .p-primary::after{background:linear-gradient(105deg,transparent,rgb(27 28 31/.1),transparent)}
.p-icon{min-width:44px;min-height:44px;width:44px;height:44px;padding:var(--s2);border-color:transparent;border-radius:50%;flex-shrink:0}
.p-display{font-size:var(--h3);font-weight:600;letter-spacing:-.05em}.p-display>span{font-family:var(--font-display)}
.p-audio-controls{display:inline-flex;align-items:center;gap:var(--s2);margin-block:var(--s2)}
.p-audio{min-width:52px;min-height:52px;padding:var(--s2);border-radius:50%;font-size:var(--secondary);font-variant-numeric:tabular-nums}
.p-audio-large{width:72px;height:72px}.p-audio-large svg{width:32px;height:32px}
.p-audio.is-playing{color:var(--onAction);background:var(--action);border-color:var(--action)}
.p-audio.is-playing svg:not(.p-voice-ring){animation:p-bars 700ms ease-in-out infinite alternate}
.p-bg-group{display:block;max-width:100%;font-size:var(--bg-text)}.p-bg-group>.p-audio-controls{display:flex;width:fit-content}
.p-card:has(.p-hero-word) .p-audio-controls{margin-inline:auto}
.living-word{display:inline;white-space:pre-wrap;line-height:1.5;unicode-bidi:isolate;font-feature-settings:"locl" 1}
.living-word.can-play{cursor:pointer}.living-word[data-bg]{overflow-wrap:anywhere}
.living-word [data-w]{display:inline-block;position:relative;transition:color 120ms}
.living-word.is-speaking [data-w]{color:var(--textSecondary)}
.living-word.is-speaking :is(.is-spoken,.is-active){color:var(--textPrimary)}
.living-word [data-w]::after{content:"";position:absolute;inset-inline:0;inset-block-end:-2px;height:2px;background:var(--action);transform:scaleX(0);transform-origin:left;transition:transform 120ms var(--ease-out)}
.living-word .is-active::after{transform:scaleX(1)}
.p-focus .sv{position:relative}.p-focus .sv::after{content:"";position:absolute;width:2px;height:.32em;inset-block-start:-.1em;inset-inline-start:50%;background:var(--brand);transform:rotate(18deg);transform-origin:center}
.living-word .is-active .sv::after{animation:p-stress 120ms var(--ease-out)}
.p-no-stress .sv::after{display:none}.p-no-translit .p-translit{display:none}
/* Stress differences are the question, including Never and Auto at B1+. */
html[data-stress] body [data-force-stress] .sv::after,
.hide-stress [data-force-stress] .sv::after,
.p-no-stress [data-force-stress] .sv::after{display:block}
.p-actionbar{padding:var(--s4) var(--s5);border-block-start:1px solid var(--border);background:var(--bg);display:flex;flex-direction:column;gap:var(--s3);max-height:60dvh;overflow-y:auto}
.p-actionbar>.p-button{width:100%;flex-shrink:0}
.p-exercise{display:flex;flex-direction:column;gap:var(--s4);min-height:100%;min-width:0}
.p-question{font-size:var(--bg-text);font-weight:600;text-wrap:balance;line-height:1.4}
.p-exercise>.p-audio-controls{align-self:center}.p-exercise:has(.p-audio-large)>.p-audio-controls{margin-block:var(--s5)}
.p-answers{display:flex;flex-direction:column;gap:var(--s3);margin-block-start:auto;padding-block-start:var(--s4);min-width:0}
.p-option{min-height:56px;width:100%;justify-content:flex-start;text-align:start;border-color:var(--border);border-radius:var(--r-option);background:var(--surface);font-weight:500;hyphens:auto;hyphenate-limit-chars:8 4 3;overflow-wrap:break-word;container-type:inline-size}
.p-option>.p-bg-group{flex:1}.p-option>span:not(.p-key){flex:1}.p-option>svg{margin-inline-start:auto}
.p-option.is-selected,.p-match.is-selected{border:2px solid var(--action);padding:calc(var(--s3) - .5px) calc(var(--s5) - .5px)}
.p-key{display:none;min-width:20px;border:1px solid var(--border);border-radius:var(--s1);font-family:inherit;font-size:var(--eyebrow);font-weight:500;text-align:center;color:var(--textSecondary)}
.p-option.is-correct,.p-match.is-matched{border-color:var(--correct);background:var(--correctSoft);opacity:1;color:var(--textPrimary)}
.p-option.is-wrong,.p-match.is-wrong{border-color:var(--wrong);background:var(--wrongSoft);opacity:1;color:var(--textPrimary);animation:p-shake 400ms var(--ease-out)}
.p-option:is(.is-correct,.is-wrong)>svg:not(.p-outline) path{stroke-dasharray:1;stroke-dashoffset:0;animation:p-draw 220ms var(--ease-out)}
.p-option.is-correct>svg{color:var(--correct)}.p-option.is-wrong>svg{color:var(--wrong)}
.p-image-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.p-image-options>.p-option{flex-direction:column;text-align:center;justify-content:center;padding:var(--s3);min-height:144px}
.p-image-options .p-key{position:absolute;inset-block-start:var(--s2);inset-inline-start:var(--s2)}
.p-input{width:100%;min-height:56px;padding:var(--s3) var(--s4);border:1.5px solid var(--border);border-radius:var(--r-button);background:var(--surface);color:var(--textPrimary);font-size:var(--bg-text)!important;outline-offset:2px}
.p-input:focus{border-color:var(--action);box-shadow:0 0 0 3px color-mix(in srgb,var(--action) 10%,transparent)}
.p-letter-strip{display:flex;flex-wrap:wrap;gap:var(--s2)}.p-letter{min-width:44px;min-height:44px;padding:var(--s2);font-size:var(--bg-text);border-color:var(--border)}
.p-quiet{min-height:44px;padding:var(--s2) var(--s3);border-color:transparent;font-size:var(--caption);text-decoration:underline;text-underline-offset:.2em;color:var(--textSecondary)}
.p-tile-line,.p-tile-bank{display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--s2);padding:var(--s3);min-height:72px}
.p-tile-line{border-block-end:2px dashed var(--border);background:var(--surfaceSunken);border-radius:var(--r-tile)}
.p-tile{min-height:44px;padding:var(--s2) var(--s3);border:1px solid var(--border);background:var(--surface);border-radius:var(--r-tile);font-weight:500;touch-action:none;user-select:none;z-index:1}
.p-tile .p-bg-group{font-size:var(--body)}.p-ghost{opacity:.15!important;pointer-events:none;box-shadow:none}.p-ghost .p-bg-group{visibility:hidden}
.p-tile:active{z-index:2}.p-tile-line.is-drop-target{outline:2px dashed var(--action)}
.p-match-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3)}
.p-match-col{display:grid;grid-auto-rows:1fr;gap:var(--s2)}
.p-match{width:100%;min-height:52px;padding:var(--s2) var(--s3);border-color:var(--border);background:var(--surface);font-size:var(--secondary);font-weight:500;justify-content:space-between;text-align:start}
.p-match .p-bg-group{font-size:var(--body)}.p-match.is-selected{padding:calc(var(--s2) - .5px) calc(var(--s3) - .5px)}
.p-match.is-matched{opacity:.7}.p-match.is-matched svg{width:16px;height:16px;color:var(--correct)}
.p-row{display:flex;gap:var(--s3)}.p-row>.p-button{flex:1;min-width:0}.p-mic{min-height:72px}.p-mic svg{width:32px;height:32px}
.p-mic.is-recording{box-shadow:0 0 0 3px var(--action);background:var(--surfaceSunken)}
.p-wave{display:flex;align-items:center;justify-content:center;gap:var(--s1);height:48px;border-radius:var(--r-chip);background:linear-gradient(to right,var(--surfaceSunken) calc(var(--elapsed,0)*100%),transparent 0)}
.p-wave>span{display:block;width:4px;height:32px;border-radius:2px;background:var(--action);transform:scaleY(.1)}
.p-chat{display:flex;flex-direction:column;gap:var(--s3)}.p-bubble{max-width:90%;padding:var(--s3) var(--s4);border:1px solid var(--border);border-radius:18px;background:var(--surface);align-self:flex-start;border-end-start-radius:4px}
.p-me{align-self:flex-end;background:var(--surfaceSunken);border-end-start-radius:18px;border-end-end-radius:4px}.p-bubble .p-meaning{font-size:var(--secondary)}
.p-bubble .p-audio{width:44px;min-width:44px;min-height:44px;height:44px}.p-dialogue-options{display:flex;flex-direction:column;gap:var(--s3)}
.p-feedback{display:flex;flex-direction:column;gap:var(--s2);border-radius:var(--r-option);padding:var(--s4);background:var(--surfaceSunken);animation:p-drawer 260ms var(--spring)}
.p-feedback.is-correct{background:var(--correctSoft)}.p-feedback.is-wrong{background:var(--wrongSoft)}
.p-feedback h2{display:flex;align-items:center;gap:var(--s2);font-size:var(--h3)}.p-feedback h2 svg{width:24px;height:24px;flex-shrink:0}
.p-feedback.is-correct h2 svg{color:var(--correct)}.p-feedback.is-wrong h2 svg{color:var(--wrong)}
.p-actionbar>.p-primary.is-correct{background:var(--correct);border-color:var(--correct);color:var(--onAction)}.p-actionbar>.p-primary.is-wrong{background:var(--wrong);border-color:var(--wrong);color:var(--onAction)}
.p-why{padding:var(--s2) var(--s3);min-height:44px;align-self:flex-start;font-size:var(--caption);border-color:transparent}.p-why[aria-expanded=true] svg{transform:rotate(90deg)}
.p-explanation{font-size:var(--secondary)}.p-answer-diff{color:var(--correct);font-size:var(--bg-text)}.p-diff{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.p-diff-removed{text-decoration:line-through;opacity:.7}
@media(max-width:767px){.p-typing:has(.p-input:disabled) :is(.p-letter-strip,.p-quiet){visibility:hidden;pointer-events:none}}
.p-dialogue .p-chat{max-height:min(38dvh,320px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.p-picture{margin:0;max-width:100%;border-radius:var(--r-tile)}.p-picture img{display:block;width:100%;height:auto;object-fit:contain;border-radius:inherit}.p-picture figcaption{font-size:var(--eyebrow);font-weight:400;color:var(--textSecondary);line-height:1.4;margin-block-start:var(--s1);overflow-wrap:anywhere}
.p-intro-picture{max-height:180px;overflow:auto}.p-intro-picture img{max-height:144px;object-fit:cover;aspect-ratio:16/9}
.p-word-picture{width:96px}.p-word-picture img{width:96px;height:96px}.p-word-picture figcaption{max-width:224px;text-align:center}
.p-culture-picture img{max-height:220px;object-fit:cover}.p-option-picture img{width:64px;height:64px;object-fit:contain}.p-option-picture figcaption{max-height:40px;overflow:auto}
.p-reading{font-size:var(--bg-text);font-weight:300;line-height:1.6;white-space:pre-line}.p-reading .p-bg-group{display:inline}.p-reading .living-word{line-height:1.7}
.p-reading .p-audio-controls{display:inline-flex;vertical-align:middle}.lookup-word{cursor:pointer;border-block-end:1px dotted var(--textTertiary)}.lookup-word:hover{background:var(--surfaceSunken)}
.p-sheet{border:1px solid var(--border);border-radius:var(--r-sheet);padding:0;width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);background:var(--surfaceElevated);color:var(--textPrimary);box-shadow:var(--lift-2);overflow:hidden;animation:p-sheet-in 200ms var(--ease-out)}
.p-sheet::backdrop{background:rgb(0 0 0/.4)}.p-sheet-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-block-end:1px solid var(--border);touch-action:none}
.p-sheet-head h2{font-size:var(--h2)}.p-sheet-body{padding:var(--s4);overflow-y:auto;max-height:calc(100dvh - 140px)}
.p-switch-row{justify-content:space-between;gap:var(--s4);text-align:start;border-color:transparent;padding-inline:var(--s2)}.p-switch-row>span:first-child{flex:1}
.p-menu-rows{position:relative}.p-menu-rows>.p-switch-row{z-index:1}.p-menu-highlight{position:absolute;inset-inline:0;inset-block-start:0;border-radius:var(--r-chip);background:color-mix(in srgb,var(--action) 6%,transparent);transition:transform 120ms var(--ease-out);pointer-events:none}
.p-popover{position:fixed;margin:0;width:min(420px,calc(100% - 32px));transform-origin:top right}
.p-switch{display:block;position:relative;width:52px;height:32px;border-radius:16px;background:var(--surfaceSunken);border:1px solid var(--border);flex-shrink:0;transition:background 220ms}
.p-switch::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:var(--textSecondary);transition:transform 220ms var(--spring)}
.p-switch-row[aria-checked=true] .p-switch{background:var(--action);border-color:var(--action)}.p-switch-row[aria-checked=true] .p-switch::after{background:var(--onAction);transform:translateX(20px)}
[dir=rtl] .p-switch-row[aria-checked=true] .p-switch::after{transform:translateX(-20px)}
.p-latin-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}.p-latin-pair{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3);border:1px solid var(--border);border-radius:var(--r-tile)}
.p-result{display:flex;flex-direction:column;align-items:center;gap:var(--s4);text-align:center}.p-stars{display:flex;gap:var(--s3);color:var(--border)}.p-stars svg{width:48px;height:48px}.p-stars .is-earned{fill:var(--action);color:var(--action);animation:p-star 320ms var(--spring) both;animation-delay:var(--star-delay)}
.p-result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);width:100%}.p-result-stats>div{display:flex;flex-direction:column}.p-stat{font-family:var(--font-display);font-size:var(--numeric);font-weight:900;font-variant-numeric:tabular-nums}
.p-cord{width:160px;height:160px;flex-shrink:0}.p-knot.is-new{transform-origin:80px 10px;animation:p-star 700ms var(--spring)}
.p-result-mistakes{text-align:start;width:100%;padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-tile)}.p-awards{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2)}
.p-notice{position:fixed;inset-inline:var(--s4);inset-block-end:var(--s4);margin:auto;max-width:560px;padding:var(--s4);border-radius:var(--r-tile);border:1px solid var(--border);background:var(--surfaceElevated);box-shadow:var(--lift-2);z-index:10;font-size:var(--secondary)}
.p-dev-exit{max-width:680px;margin:var(--s6) auto;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.p-loading{width:min(100%,680px);height:100%;margin:auto;padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s4)}.p-loading>span{display:block;border-radius:var(--r-button);min-height:52px;background:var(--surfaceSunken)}.p-loading>span:nth-child(2){height:144px;margin-block-start:var(--s8)}.p-loading>span:nth-child(3){width:70%}.p-loading>span:last-child{margin-block-start:auto}
[aria-pressed=true].p-button:not(.p-audio){border-color:var(--action)}
:lang(ar).p-focus,:lang(he).p-focus{font-family:var(--font-system)}.p-focus .living-word{font-family:var(--font-body)}.p-focus .p-hero-word{font-family:var(--font-display)}
@media(hover:hover) and (pointer:fine){
 .p-button:hover:not(:disabled){background:color-mix(in srgb,var(--action) 8%,var(--surface));border-color:var(--action);transform:translateY(-1px)}
 .p-audio:hover:not(:disabled):not(.is-playing){background:color-mix(in srgb,var(--action) 10%,var(--bg));color:var(--textPrimary)}
 .p-audio.is-playing:hover:not(:disabled){background:var(--actionPressed);color:var(--onAction)}
 .p-primary:hover:not(:disabled){background:var(--actionPressed);box-shadow:var(--lift-2)}.p-primary:hover::after{animation:p-sheen 600ms var(--ease-out)}
 .p-icon[data-close]:hover svg{transform:rotate(90deg)}.p-audio:hover svg{transform:scale(1.06)}.p-audio:hover svg path{animation:p-speaker 300ms var(--ease-out)}
 .p-option:hover:not(:disabled){background:var(--surfaceSunken);transform:none}.p-tile:hover:not(:disabled){box-shadow:var(--lift-1)}
}
.p-audio.is-playing:active:not(:disabled){background:var(--actionPressed);color:var(--onAction)}
@media(min-width:760px){.p-key-caps .p-key{display:block}.p-focus:has(.p-player){overflow:hidden}}
@media(max-width:759px){.p-player{height:100dvh;max-height:none;min-height:100dvh;margin:0}.p-stage{padding-block-start:var(--s4)}.p-head{padding-inline:var(--s3);gap:var(--s2)}.p-actionbar{padding-block-end:max(var(--s4),env(safe-area-inset-bottom))}.p-sheet{position:fixed;inset:auto 0 0;margin:0;width:100%;max-height:calc(100dvh - 16px);border-radius:var(--r-sheet) var(--r-sheet) 0 0;animation:p-drawer 260ms var(--ease-out)}.p-sheet-head::before{content:"";position:absolute;inset-block-start:var(--s2);inset-inline-start:calc(50% - 16px);width:32px;height:4px;border-radius:2px;background:var(--border)}.p-sheet-head{padding-block-start:var(--s4)}}
[dir=rtl] .p-button>svg:has(path[d^="M9 5"]){transform:scaleX(-1)}
@keyframes p-sheen{from{transform:translateX(0) skewX(-12deg)}to{transform:translateX(var(--p-sheen-travel,450%)) skewX(-12deg)}}@keyframes p-drawer{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes p-sheet-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@keyframes p-stress{from{transform:translateY(-4px) rotate(18deg)}to{transform:translateY(0) rotate(18deg)}}
@keyframes p-shake{0%,100%{transform:none}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes p-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes p-star{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes p-speaker{50%{opacity:.5}}@keyframes p-bars{from{transform:scaleY(.65)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.p-focus *,.p-focus *::before,.p-focus *::after{animation:none!important;transition:none!important}.p-focus .p-button:hover,.p-focus .p-button:active{transform:none}.living-word [data-w]::after{display:none}.p-knot.is-new{transform:none}.p-stars .is-earned{opacity:1;transform:none}}
/* P2 interaction completion: overlays never change the stage's layout. */
.p-tile-line{position:relative}.p-drop-marker{position:absolute;display:block;width:3px;border-radius:2px;background:var(--action);pointer-events:none;z-index:3;transform:translateX(-1px)}
.p-match-board{position:relative}.p-match-links{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.p-match-links path{fill:none;stroke:var(--correct);stroke-width:2;opacity:.7}.p-match-links .is-pending{stroke:var(--action);stroke-dasharray:3 3}
.p-passage-controls{display:flex;flex-direction:column;gap:var(--s2)}.p-scrubber{position:relative;height:44px;cursor:pointer;touch-action:none;border-radius:var(--r-chip)}
.p-scrubber::before,.p-scrub-fill{position:absolute;content:"";inset-inline:0;inset-block-start:20px;height:4px;background:var(--border);border-radius:2px;pointer-events:none}.p-scrub-fill{background:var(--action);transform-origin:left}[dir=rtl] .p-scrub-fill{transform-origin:right}
.p-scrub-thumb{position:absolute;inset-block-start:13px;width:18px;height:18px;margin-inline-start:-9px;border-radius:50%;background:var(--action);box-shadow:var(--lift-1);transition:transform 160ms var(--ease-out);pointer-events:none}
.p-scrubber:is(:hover,:focus-visible,.is-dragging) .p-scrub-thumb{transform:scale(1.22)}.p-scrub-time{font-size:var(--caption);font-variant-numeric:tabular-nums;color:var(--textSecondary);text-align:center}
.p-scrub-tip{position:absolute;inset-block-end:40px;transform:translateX(-50%);padding:var(--s1) var(--s2);border:1px solid var(--border);border-radius:var(--r-chip);background:var(--surfaceElevated);font-size:var(--caption);font-variant-numeric:tabular-nums;opacity:0;pointer-events:none}.p-scrubber.is-dragging .p-scrub-tip{opacity:1}[dir=rtl] .p-scrub-tip{transform:translateX(50%)}
.p-sheet.is-closing{animation:p-sheet-out 120ms var(--ease-out) forwards}.p-sheet.is-closing::backdrop{background:transparent;transition:background 120ms}
@keyframes p-sheet-out{to{opacity:0;transform:translateY(12px)}}
.p-switch-row:active .p-switch::after{width:28px}.p-switch-row[aria-checked=true]:active .p-switch::after{margin-inline-start:-4px}
@media(min-width:760px){.p-match-links{display:block}}
@media(hover:hover) and (pointer:fine){.p-match:hover:not(:disabled){transform:none}.p-mic:hover svg{transform:scale(1.06)}.p-button:active:not(:disabled){transform:scale(.98)}.p-primary:hover:disabled::after{animation:none}}
@media(prefers-reduced-motion:reduce){.p-scrubber:is(:hover,:focus-visible,.is-dragging) .p-scrub-thumb{transform:none}.p-button:active:not(:disabled){transform:none}}

[dir=rtl] .p-primary{--p-sheen-travel:-450%}

.p-tile.is-dragging{transition:none;z-index:3;box-shadow:var(--lift-2)}

.p-scrubber[aria-disabled=true]{opacity:.4;cursor:default}
.living-word.can-play:hover{background:var(--surfaceSunken);border-radius:var(--s1)}.living-word.can-play:active,.lookup-word:active{opacity:.7}
.p-focus .lookup-word:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:var(--s1)}
/* Override dialog UA max-width, so a phone sheet spans the viewport. */
.p-sheet{max-width:none}.p-focus [role=slider]:focus-visible{outline:2px solid var(--action);outline-offset:2px}
/* Statistics reflow with enlarged text instead of colliding in three columns. */
.p-result-stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr))}

.p-focus{display:flow-root;min-height:100dvh}.p-player[aria-busy=true]{display:block}
/* Compact controls and speaking rows grow with text zoom. */
.p-display{width:auto;height:auto;min-width:44px;min-height:44px;line-height:1;white-space:nowrap}
.p-row{flex-wrap:wrap}.p-row>.p-button{min-inline-size:min(100%,6rem)}
.p-word-picture{width:min(100%,224px)}.p-word-picture img{margin-inline:auto}
/* Native-mode definitions need more room than their Bulgarian headwords. */
.p-player:lang(bg) .p-match-board{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}
/* Slow-speed labels retain room in dialogue bubbles, including text zoom. */
.p-audio-controls{align-items:stretch}.p-bubble .p-audio{width:auto;height:auto;min-width:52px;min-height:52px}
/* Photo attribution remains fully visible below its reserved image. */
.p-intro-picture{max-height:none;overflow:visible}

.p-button{flex-shrink:0}.p-letter{padding:var(--s1)}.p-tile{max-inline-size:100%}
@media(hover:hover) and (pointer:fine){
 .p-actionbar>.p-primary.is-correct:hover:not(:disabled){background:color-mix(in srgb,var(--correct) 88%,var(--textPrimary));border-color:var(--correct)}
 .p-actionbar>.p-primary.is-wrong:hover:not(:disabled){background:color-mix(in srgb,var(--wrong) 88%,var(--textPrimary));border-color:var(--wrong)}
}

/* R1-P: the answer drawer overlays a permanently reserved part of the stage. */
.p-actionbar{position:relative;block-size:calc(max(52px,1.45em + var(--s3)*2 + 3px) + var(--s4)*2 + 1px + env(safe-area-inset-bottom,0px));max-height:none;overflow:visible;flex:none;padding-block:var(--s4);padding-block-end:calc(var(--s4) + env(safe-area-inset-bottom,0px))}
.p-actionbar:has([data-back-unit]){block-size:auto}
.p-feedback{position:absolute;inset-inline:var(--s5);bottom:100%;max-block-size:var(--drawer-h);overflow:auto;z-index:2;animation:p-answer-drawer 500ms var(--spring-emphasis,var(--spring));border-end-start-radius:0;border-end-end-radius:0}
.p-feedback[data-state=correct],.p-actionbar[data-state=correct]{background:var(--correctSoft)}
.p-feedback[data-state=wrong],.p-actionbar[data-state=wrong]{background:var(--wrongSoft)}
.p-feedback-probe{visibility:hidden;pointer-events:none;animation:none;max-block-size:40dvh}
.p-option{position:relative;transition:border-color var(--t-ui) var(--ease-out),background var(--t-ui) var(--ease-out)}
.p-option.is-selected.is-correct{border-color:var(--correct)}.p-option.is-selected.is-wrong{border-color:var(--wrong)}
.p-option.is-selected.is-correct{animation:p-answer-pop 220ms var(--spring)}
.p-option>svg:not(.p-outline){position:absolute;inset-inline-end:var(--s3);inset-block-start:calc(50% - 12px)}
.p-option.is-revealed{border-color:transparent;background:var(--surface)}
.p-option>.p-outline{position:absolute;inset:0;width:100%;height:100%;margin:0;pointer-events:none;overflow:visible;color:var(--correct)}
.p-outline rect{fill:none;stroke:var(--correct);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0;animation:p-outline-draw 320ms var(--ease-out) 120ms both}
.p-choice>.p-bg-group:has(.p-question),.p-choice>.p-question{text-align:center;font-family:var(--font-display);font-size:var(--hero-word);font-weight:900;line-height:1.15;margin-block:auto}
.p-choice>.p-bg-group>.p-audio-controls{margin-inline:auto}.p-choice>.p-eyebrow{text-align:center}
.p-choice>.p-answers{margin-block-start:0}
.p-picture{position:relative}.p-credit{position:absolute;inset-inline-end:var(--s2);inset-block-end:var(--s2);width:24px;height:24px;min-height:24px;min-width:24px;padding:var(--s1);border-radius:50%;background:var(--surfaceElevated)}.p-credit svg{width:16px;height:16px}
.p-icon{border-color:color-mix(in srgb,var(--textPrimary) 70%,transparent)}.p-icon>svg,.p-audio>svg{width:20px;height:20px;stroke-width:1.6}
.p-audio-controls{gap:0;border:1.5px solid color-mix(in srgb,var(--textPrimary) 70%,transparent);border-radius:22px;overflow:visible;inline-size:fit-content}
.p-audio{min-width:44px;min-height:44px;height:44px;border:0;border-radius:22px;font-size:var(--caption);font-weight:600}
.p-audio+[data-play=slow]{border-inline-start:1px solid var(--border);border-start-start-radius:0;border-end-start-radius:0}
.p-audio:has(+[data-play=slow]){border-start-end-radius:0;border-end-end-radius:0}
.p-audio-large{width:52px;height:52px}.p-card:has(.p-hero-word) .p-audio-controls{margin-inline:auto}
.p-bubble .p-audio{min-width:44px;min-height:44px;height:44px}
.p-result>.martenitsa-cord{margin-block:var(--s2)}
@keyframes p-answer-drawer{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes p-outline-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes p-answer-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){.p-option.is-revealed{border-color:var(--correct)}.p-outline{display:none}}

@media(min-width:760px){.p-choice>.p-bg-group:has(.p-question),.p-choice>.p-question{font-size:var(--h1)}}

.p-choice .p-question{font-size:var(--hero-word);font-family:var(--font-display);font-weight:900;line-height:1.15;text-align:center}
@media(min-width:760px){.p-choice .p-question{font-size:var(--h1)}}

.p-audio{position:relative}.p-audio>.p-voice-ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);pointer-events:none;animation:none;transform:rotate(-90deg)}.p-voice-ring circle{fill:none;stroke:var(--action);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
.p-option.is-selected.is-key-selected:not(.is-correct,.is-wrong){border-color:transparent}.p-option.is-key-selected::after{content:"";position:absolute;inset:-2px;border:2px solid var(--action);border-radius:inherit;pointer-events:none;animation:p-key-select 160ms var(--ease-out) 90ms both}
@keyframes p-key-select{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.p-option.is-key-selected::after{display:none}.p-option.is-selected.is-key-selected:not(.is-correct,.is-wrong){border-color:var(--action)}}

.p-drawer-slot{position:absolute;inset-inline:var(--s5);bottom:100%;block-size:var(--drawer-h);overflow:hidden;pointer-events:none;z-index:2}.p-drawer-slot>.p-feedback{inset-inline:0;bottom:0;pointer-events:auto}

.p-card:has(.p-hero-word){position:relative}.p-favorite{position:absolute;inset-block-start:0;inset-inline-end:0;border-color:transparent}
/* Grade icons have their own reserved space, even before an answer is checked. */
.p-choice .p-option{padding-inline-end:calc(var(--s5) + var(--s6))}
.p-choice .p-option.is-selected{padding-inline-end:calc(var(--s5) + var(--s6) - .5px)}
.p-choice .p-image-options>.p-option{padding:var(--s3)}
.p-image-options>.p-option>svg:not(.p-outline){inset-block-start:var(--s2)}
.p-choice:has(>.p-audio-controls):not(:has(.p-question))>.p-audio-controls{margin-block:auto}
/* R1-P2: scalable, scroll-safe accessory controls; no new literal type sizes. */
.p-undo-toast{position:fixed;z-index:12;inset-inline:var(--s4);inset-block-end:calc(var(--action-h,84px) + var(--s4));margin-inline:auto;max-inline-size:600px;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surfaceElevated);box-shadow:var(--lift-2)}.p-undo-toast .p-button{flex-shrink:0}.p-forecast,.p-result-reminder{padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-card);text-align:start}.p-result-reminder{display:grid;gap:var(--s3)}.p-voice-wave{min-block-size:64px;max-inline-size:100%;color:var(--action);background:var(--surfaceSunken);border-radius:var(--r-tile)}.p-voice-wave svg{display:block;inline-size:100%;block-size:64px;stroke:currentColor;stroke-width:2}.p-loop-words{display:flex;flex-wrap:wrap;gap:var(--s2);direction:ltr}.p-loop-word{padding:var(--s2);min-inline-size:44px}.p-loop-word[aria-pressed=true]{background:var(--action);color:var(--onAction)}.p-voice-compare h2{font-size:var(--h3)}.f-shortcut-list{display:grid;gap:var(--s3);margin:0}.f-shortcut-list>div{display:flex;justify-content:space-between;gap:var(--s4);border-block-end:1px solid var(--border);padding-block:var(--s2)}.f-shortcut-list dd{margin:0}.f-shortcut-list dt{font-variant-numeric:tabular-nums;white-space:nowrap}.p-head .f-keyboard svg{inline-size:20px;block-size:20px}
/* Keep the shared first-entry language sheet usable inside the focus player. */
.p-focus .language-entry{max-inline-size:calc(100vw - 32px)}
.p-focus .menu-panel .primary{color:var(--onAction)}

/* Speaking self-rating is the primary action; optional comparison stays local. */
.p-actionbar:has(.p-speaking-ratings){block-size:auto}
.p-speaking-ratings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);inline-size:100%}
.p-speaking-ratings>.p-button{font-size:var(--secondary);min-inline-size:0;padding-inline:var(--s2);min-block-size:52px;line-height:1.2}
.p-speaking .p-answers{gap:var(--s3)}
.p-speaking [data-play-mine][hidden],.p-speaking .p-wave[hidden],.p-speaking .p-voice-compare[hidden],.p-actionbar>[data-action][hidden]{display:none}

.p-result-mistakes{list-style:none;margin:0;display:grid;gap:var(--s4)}
.p-result-mistake{display:grid;gap:var(--s2);min-inline-size:0;overflow-wrap:anywhere}
.p-result-mistake+.p-result-mistake{border-block-start:1px solid var(--border);padding-block-start:var(--s4)}
.p-result-mistake>.p-bg-group{align-items:start;justify-content:space-between}
.p-result-mistake p,.p-result-mistake h3{margin:0}

@media(pointer:coarse){.p-head .f-keyboard{display:none}}

/* P6: a viewport is three tracks. Content owns overflow; actions never do.
   Specific selectors also win when feature/exam CSS is loaded after this file. */
html:has(body.p-focus),html:has(.f-fit){block-size:100%;overflow:hidden;scrollbar-gutter:auto}
body.p-focus{block-size:100dvh;min-block-size:0;overflow:hidden}
.p-focus .p-player{block-size:100dvh;height:100dvh;min-block-size:0;max-block-size:none;max-height:none;margin-block:0;grid-template-rows:auto minmax(0,1fr) auto}
.p-player>.p-stage{min-block-size:0;padding-block:var(--s4);overflow:auto;overscroll-behavior:contain}
.p-player>.p-stage:has(.p-exercise){padding-block-end:var(--s4)}
.p-player>.p-actionbar{position:relative;block-size:auto;max-block-size:none;overflow:visible;padding-block:var(--s4);padding-block-end:max(16px,env(safe-area-inset-bottom));z-index:3}
.p-player>.p-actionbar:has([data-back-unit]){display:grid;grid-template-columns:1fr 1fr}
.p-player .p-drawer-slot{block-size:min(var(--drawer-h,40dvh),var(--fit-drawer-height,40dvh));max-block-size:var(--fit-drawer-height,40dvh)}
.p-player .p-feedback{max-block-size:100%;overscroll-behavior:contain}
.p-stage>.p-exercise{min-block-size:100%;flex-shrink:0}
.p-player .p-counter{white-space:normal;min-inline-size:0;overflow-wrap:anywhere}
.p-player .p-progress{min-inline-size:var(--s6)}
.p-player[data-fit=compact] .p-choice .p-question{font-size:var(--h2)}
.p-player:is([data-fit=dense],[data-fit=small]) .p-choice .p-question{font-size:var(--bg-text)}
:is(.p-player,.e-host,.f-fit)[data-fit=compact] :is(.p-card,.p-exercise,.p-answers){gap:var(--s3)}
:is(.p-player,.e-host,.f-fit):is([data-fit=dense],[data-fit=small]) :is(.p-card,.p-exercise,.p-answers){gap:var(--s2)}
:is(.p-player,.e-host,.f-fit):is([data-fit=dense],[data-fit=small]) .p-answers{padding-block-start:var(--s2)}
:is(.p-player,.e-host,.f-fit):is([data-fit=dense],[data-fit=small]) .p-exercise>.p-audio-controls{margin-block:0}
:is(.p-player,.e-host,.f-fit):is([data-fit=dense],[data-fit=small]) .p-image-options>.p-option{min-block-size:96px;padding:var(--s2)}
:is(.p-player,.e-host,.f-fit):is([data-fit=dense],[data-fit=small]) .p-hero-word{font-size:var(--h1)}
.p-player:is([data-fit=dense],[data-fit=small]) .p-stage{padding-block:var(--s2)}
/* A passage and its transport have independent tracks, including text zoom. */
.p-player .p-stage[data-step=passage]{overflow:hidden}
.p-stage[data-step=passage]>.p-card{block-size:100%;min-block-size:0;margin:0;overflow:hidden}
.p-stage[data-step=passage] .p-card>*{flex-shrink:0}
.p-stage[data-step=passage] .p-card>.p-reading{flex:1 1 auto;min-block-size:0;overflow:auto;overscroll-behavior:contain;padding:var(--s1)}
.p-player .p-stage:has(.p-dialogue){overflow:hidden}
.p-player .p-dialogue{min-block-size:0;block-size:100%;flex-shrink:1}
.p-player .p-dialogue>.p-answers{flex:1;min-block-size:0;padding-block-start:0;overflow:auto}
.p-player .p-dialogue .p-chat{flex:1 1 0;min-block-size:64px;max-block-size:none;overflow:auto}
.p-player .p-dialogue .p-dialogue-options{flex-shrink:0}
.p-player .p-dialogue .p-dialogue-options>.p-option{flex-shrink:0}
.p-sheet[open]:not(.p-popover){display:flex;flex-direction:column;overflow:hidden}
.p-sheet[open]>.p-sheet-head{flex-shrink:0}
.p-sheet[open]>.p-sheet-body{min-block-size:0;max-block-size:none;overflow:auto}
.p-sheet.f-lookup-dialog>.f-lookup-action{flex-shrink:0;padding-block-end:max(16px,env(safe-area-inset-bottom))}
/* Exam intro/results/review use the same frame as questions. Print is separate. */
@media screen{
 body.p-focus .e-host:not([data-screen=certificate]){display:grid;grid-template-rows:auto minmax(0,1fr) auto;block-size:100dvh;height:100dvh;max-block-size:none;max-height:none;min-block-size:0;margin-block:0;padding:0;overflow:hidden}
 .e-host .e-stage,.e-host .e-fit-content{min-block-size:0;max-block-size:none;overflow:auto;overscroll-behavior:contain;padding:var(--s4) var(--s5)}
 .e-host .e-actionbar{padding-block:var(--s4);padding-block-end:max(16px,env(safe-area-inset-bottom));flex-shrink:0;z-index:3}
 .e-host .e-actionbar .e-actions>.p-button{min-inline-size:0}
 .e-host:is([data-fit=dense],[data-fit=small]) .p-choice .p-question{font-size:var(--bg-text)}
 .e-host .p-exercise{min-block-size:0}
 .e-host .e-review{min-inline-size:0}
}
/* Standalone drills: compact header, bounded question, pinned action. Context
   and licence details remain reachable in the content column. */
html:has(.features-ui.f-fit) .f-dev-nav{display:none}
.features-ui.f-fit{block-size:100dvh;min-block-size:0;padding:var(--s4);display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:var(--s2);overflow:hidden}
.features-ui.f-fit>.f-header{grid-row:1;margin:0;display:flex;gap:var(--s4);align-items:center}
.features-ui.f-fit .f-brand{flex-shrink:0}.features-ui.f-fit .f-brand>span{display:none}
.features-ui.f-fit .f-title{gap:0}.features-ui.f-fit .f-title>.p-eyebrow{display:none}
.features-ui.f-fit .f-title h1{font-size:var(--h2)}
.features-ui.f-fit>.f-levels{margin:0;grid-row:2}.features-ui.f-fit>.f-native-modes{grid-row:3}
.features-ui.f-fit>.f-drill-grid{grid-row:4;min-block-size:0;align-items:stretch}
.features-ui.f-fit .f-drill{min-block-size:0;display:flex;overflow:hidden;padding:var(--s4);gap:var(--s2)}
.features-ui.f-fit .f-stage{flex:1;min-block-size:0;overflow:auto;overscroll-behavior:contain}
.features-ui.f-fit .f-stage>.p-exercise{min-block-size:100%;flex-shrink:0}
.features-ui.f-fit .f-actionbar{position:relative;flex-shrink:0;margin-inline:calc(-1 * var(--s4));margin-block-end:calc(-1 * var(--s4));padding:var(--s4);padding-block-end:max(16px,env(safe-area-inset-bottom));block-size:auto}
.features-ui.f-fit .p-drawer-slot{block-size:min(40dvh,var(--fit-drawer-height,40dvh));inset-inline:var(--s4)}
.features-ui.f-fit .p-feedback{max-block-size:100%}
.features-ui.f-fit .f-context{min-block-size:0;overflow:auto;padding:var(--s4)}
.features-ui.f-fit>.f-attribution{display:none}
.features-ui.f-fit>.f-finished{grid-row:4;min-block-size:0;overflow:auto}
.features-ui.f-fit:is([data-fit=dense],[data-fit=small]) .f-stress-word{padding-block:var(--s2);font-size:var(--h2)}
@media(max-width:759px){
 .features-ui.f-fit>.f-drill-grid{grid-template-columns:minmax(0,1fr)}
 .features-ui.f-fit .f-context{display:none}
 .features-ui.f-fit>.f-header{gap:var(--s2)}
 .features-ui.f-fit .f-title{order:-1;flex:1}
 .features-ui.f-fit .f-brand>img{display:none}
}
@media(max-height:480px) and (orientation:landscape){
 .p-player>.p-head,.e-host>.e-player-head{min-block-size:52px;padding-block:var(--s1)}
 .p-player>.p-stage,.e-host>.e-stage{padding-block:var(--s2)}
 .p-player .p-choice,.e-host .p-choice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-content:center;column-gap:var(--s4);min-block-size:100%}
 :is(.p-player,.e-host) .p-choice>.p-answers{grid-column:2;grid-row:1/span 6;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;align-content:center;gap:var(--s2)}
 :is(.p-player,.e-host) .p-choice .p-question{font-size:var(--bg-text)}
 .p-player .p-card:has(.p-hero-word){display:grid;grid-template-columns:1fr 1fr;text-align:start;align-items:center;gap:var(--s2)}
 .p-player .p-stage[data-step=passage]>.p-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-rows:auto minmax(0,1fr);gap:var(--s2)}
 .p-stage[data-step=passage] .p-card>.p-reading{grid-column:2;grid-row:1/span 6;block-size:100%}
 .p-player .p-dialogue>.p-answers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:var(--s2)}
 .p-player .p-dialogue .p-chat{grid-row:1/span 2;block-size:100%;min-block-size:0}
 .p-player .p-dialogue .p-dialogue-options{grid-column:2;grid-row:1;overflow:auto}
 .p-player .p-dialogue .p-answers>.p-muted{grid-column:2;grid-row:2}
}
/* Measure feedback independently of the action track (including expanded Why). */
.p-player .p-feedback.p-feedback-probe{max-block-size:40dvh}
:is(.p-player,.e-host,.f-fit):is([data-fit=dense],[data-fit=small]) .p-option{padding:var(--s2) var(--s3)}
:is(.p-player,.e-host,.f-fit):is([data-fit=dense],[data-fit=small]) .p-option .p-bg-group{font-size:var(--body)}
:is(.p-player,.e-host,.f-fit):is([data-fit=dense],[data-fit=small]) .p-match{padding:var(--s2);min-block-size:56px;line-height:1.3}
:is(.p-player,.e-host,.f-fit):is([data-fit=dense],[data-fit=small]) .p-match .p-bg-group{font-size:var(--secondary)}
.p-player:is([data-fit=dense],[data-fit=small]) .p-intro-picture img{max-block-size:96px}
.p-player:is([data-fit=dense],[data-fit=small]) .p-word-chips>.p-bg-group{padding:var(--s1) var(--s2);font-size:var(--body)}
.p-player:is([data-fit=dense],[data-fit=small]) .p-lead{font-size:var(--body)}
@media screen{
 html.player-open body.p-focus>main>.p-player.e-host:not([data-screen=certificate]){overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;block-size:100dvh;height:100dvh;margin:0 auto}
 html.player-open .p-player.features-ui.f-fit{display:grid;grid-template-rows:auto auto auto minmax(0,1fr);overflow:hidden;padding:var(--s4)}
}
.features-ui.f-fit:has(>.f-finished){grid-template-rows:auto auto auto minmax(0,1fr) auto}
.features-ui.f-fit>.f-result-actions{grid-row:5;block-size:auto;padding-block-end:max(16px,env(safe-area-inset-bottom))}
.features-ui.f-fit .f-brand{gap:var(--s2)}
.p-sheet .f-context{display:flex;min-block-size:0;max-inline-size:100%;padding:var(--s4)}
.p-sheet.f-lookup-dialog[open]{display:flex;flex-direction:column;overflow:hidden}
.p-sheet.f-lookup-dialog>.p-sheet-body{flex:1;min-block-size:0;max-block-size:none;overflow:auto}
.p-sheet .p-sheet-head h2{min-inline-size:0;overflow-wrap:anywhere}
.p-player>.p-actionbar,.e-host .e-actionbar,.features-ui.f-fit .f-actionbar{position:sticky;inset-block-end:0}
.p-picture>.p-credit{inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px}
.p-stage[data-step=passage] .p-passage-tools{display:flex;flex-direction:column;gap:var(--s3);min-block-size:0;max-block-size:60%;overflow:auto;overscroll-behavior:contain}
.p-stage[data-step=passage] .p-passage-tools>*{flex-shrink:0}
.p-stage[data-step=passage] .p-card>.p-reading{min-block-size:64px}
.p-player .p-dialogue>.p-answers{display:grid;grid-template-rows:minmax(64px,1fr) auto auto}
.p-player .p-dialogue .p-chat{block-size:100%;min-block-size:0}
.p-player .p-dialogue .p-dialogue-options{max-block-size:calc(var(--fit-content-height,70dvh) * .65);overflow:auto;overscroll-behavior:contain}
@media(max-height:480px) and (orientation:landscape){
 .p-stage[data-step=passage] .p-passage-tools{grid-column:1;grid-row:1/span 2;max-block-size:none;block-size:100%}
 .p-player .p-dialogue>.p-answers{grid-template-rows:minmax(0,1fr) auto}
 .p-player .p-dialogue .p-dialogue-options{max-block-size:100%}
}
@media(max-height:480px) and (orientation:landscape){
 .features-ui.f-fit{padding:var(--s2);grid-template-columns:minmax(0,.28fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 .features-ui.f-fit>.f-header{grid-column:1/-1;grid-row:1}
 .features-ui.f-fit>.f-levels{grid-column:1;grid-row:2;align-self:start}
 .features-ui.f-fit>.f-native-modes{align-self:end}
 .features-ui.f-fit>.f-drill-grid{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr)}
 .features-ui.f-fit:not(:has(>.f-levels)){grid-template-columns:minmax(0,1fr)}
 .features-ui.f-fit:not(:has(>.f-levels))>.f-drill-grid{grid-column:1}
 .features-ui.f-fit .f-context{display:none}
 .features-ui.f-fit .f-drill:has(>.f-modes){display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
 .features-ui.f-fit .f-drill:has(>.f-modes)>.p-caption{grid-column:1;grid-row:1}
 .features-ui.f-fit .f-drill>.f-modes{grid-column:1;grid-row:2;align-content:start}
 .features-ui.f-fit .f-drill:has(>.f-modes)>.f-stage{grid-column:2;grid-row:1/span 2}
 .features-ui.f-fit .f-drill:has(>.f-modes)>.f-actionbar{grid-column:1/-1;grid-row:3}
}
.features-ui.f-fit .f-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.features-ui.f-fit .f-audio-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2)}
@media(max-width:420px){.features-ui.f-fit:is([data-fit=dense],[data-fit=small]) .p-choice>.p-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}}

:is(.p-player,.e-host,.f-fit)[data-fit=small] .p-choice .p-question{font-size:var(--body)}
:is(.p-player,.e-host,.f-fit)[data-fit=small] .p-option,.p-player[data-fit=small] .p-option .p-bg-group{font-size:var(--secondary);line-height:1.3}
:is(.p-player,.e-host,.f-fit)[data-fit=small] .p-match,.p-player[data-fit=small] .p-match .p-bg-group{font-size:var(--caption)}
:is(.p-player,.e-host,.f-fit) .p-match{min-block-size:56px}
/* Compression preserves the grade-icon gutter, even for multi-line answers. */
:is(.p-player,.e-host,.f-fit):is([data-fit=dense],[data-fit=small]) .p-choice .p-option{padding-inline-end:calc(var(--s3) + var(--s6))}
:is(.p-player,.e-host,.f-fit):is([data-fit=dense],[data-fit=small]) .p-choice .p-image-options>.p-option{padding-inline-end:var(--s2)}

html:has(.p-sheet[open]){block-size:100%;overflow:hidden;scrollbar-gutter:auto}
/* P6 bounded prompts: reading questions cannot displace their answer controls.
   Long answer text has its own list scroll; paragraph/audio/action are separate. */
.p-exercise.p-bounded{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;min-block-size:0;block-size:100%;max-block-size:100%;gap:var(--s3)}
.p-bounded>.p-eyebrow{grid-row:1;text-align:center}
.p-prompt-body{grid-row:2;min-block-size:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--s3);scrollbar-width:thin;padding:var(--s1)}
.p-prompt-body>.p-bg-group,.p-prompt-body>.p-question{margin-block:auto}
.p-prompt-transport{grid-row:3;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s2);min-inline-size:0}
.p-prompt-transport .p-audio-controls{margin-block:0}
.p-player .p-bounded>.p-answers,.e-host .p-bounded>.p-answers,.features-ui.f-fit .p-bounded>.p-answers{grid-row:4;margin:0;padding-block-start:0;min-block-size:0;max-block-size:var(--answers-budget,65dvh);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.p-bounded:has(>.p-prompt-body[hidden])>.p-prompt-transport{grid-row:2/span 2;align-self:center}
.p-player>.p-stage>.p-bounded,.features-ui.f-fit .f-stage>.p-bounded{min-block-size:0;flex:1 1 0}
.e-host .p-prompt-transport>.p-quiet{display:none}
:is(.p-player,.e-host,.f-fit)[data-fit=small] .p-prompt-body .p-question{font-size:var(--body)}
@media(max-height:480px) and (orientation:landscape){
 :is(.p-player,.e-host,.f-fit) .p-exercise.p-bounded{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:var(--s3);row-gap:var(--s2)}
 :is(.p-player,.e-host,.f-fit) .p-bounded>.p-eyebrow{grid-column:1/-1;grid-row:1}
 :is(.p-player,.e-host,.f-fit) .p-bounded>.p-prompt-body{grid-column:1;grid-row:2}
 :is(.p-player,.e-host,.f-fit) .p-bounded>.p-prompt-transport{grid-column:1;grid-row:3;align-self:end}
 :is(.p-player,.e-host,.f-fit) .p-bounded>.p-answers{grid-column:2;grid-row:2/span 2;max-block-size:100%;padding:0}
 :is(.p-player,.e-host) .p-choice.p-bounded>.p-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:var(--s2)}
 :is(.p-player,.e-host,.f-fit) .p-bounded:has(>.p-prompt-body[hidden])>.p-prompt-transport{grid-row:2/span 2;align-self:center}
}
.p-choice .p-prompt-body>:is(h1,h2).p-question{font-size:var(--h1)}
@media(max-height:480px) and (orientation:landscape){:is(.p-player,.e-host,.f-fit) .p-bounded>.p-answers{max-block-size:100%!important}}
.p-audio-controls:has(>.p-audio-large)>.p-audio{min-block-size:52px;block-size:52px;height:52px}

:is(.p-player,.e-host,.f-fit):is([data-fit=dense],[data-fit=small]) .p-matching .living-word{line-height:1.3}
@media(max-height:480px) and (orientation:landscape){
 .features-ui.f-fit:has(>.f-finished){grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto}
 .features-ui.f-fit:has(>.f-finished)>.f-header{grid-column:1;grid-row:1}
 .features-ui.f-fit:has(>.f-finished)>.f-levels{grid-column:1;grid-row:2}
 .features-ui.f-fit:has(>.f-finished)>.f-native-modes{grid-row:3}
 .features-ui.f-fit>.f-finished{grid-column:1;grid-row:4}
 .features-ui.f-fit>.f-result-actions{grid-column:1;grid-row:5}
}

/* Compact navigation before sacrificing a readable task region at text zoom. */
.features-ui.f-fit:is([data-fit=compact],[data-fit=dense],[data-fit=small]) .f-title h1{font-size:var(--body)}
.features-ui.f-fit:is([data-fit=compact],[data-fit=dense],[data-fit=small]) .f-modes>.p-button{font-size:var(--caption)}
.features-ui.f-fit:is([data-fit=compact],[data-fit=dense],[data-fit=small]) .f-drill{padding-block-start:var(--s3)}
@media(max-width:759px) and (min-height:481px){
 .features-ui.f-fit:is([data-fit=compact],[data-fit=dense],[data-fit=small]){padding-block:var(--s3)}
 .features-ui.f-fit:is([data-fit=compact],[data-fit=dense],[data-fit=small])>.f-levels{max-block-size:max(10dvh,calc(var(--s9) + var(--s4)));overflow:auto;padding:var(--s1);overscroll-behavior:contain}
}
@media(max-height:480px) and (orientation:landscape){
 .features-ui.f-fit .p-exercise.p-bounded>.p-answers{grid-column:2;grid-row:2/span 2;max-block-size:100%!important}
}
.p-prompt-body .p-question.p-long-prompt{font-family:var(--font-body);font-weight:400;line-height:1.5;text-align:start;text-wrap:pretty}
.e-host :is(h1,h2,h3,p)[tabindex="-1"]:focus{outline:none}
.p-prompt-body .p-question.p-long-prompt:is(:lang(ar),:lang(he)){font-family:var(--font-system)}
@media(max-height:480px) and (orientation:landscape){.p-speaking .p-mic{min-block-size:52px}}

.p-card-study,.p-card-detail{display:contents}
/* DQA1-P: each study/answer column is a coherent group. On narrow screens
   the wrappers disappear into the existing bounded four-track grid. */
.p-study,.p-response{display:contents}.p-step-title{display:none}
.p-head.p-retry-head{flex-wrap:nowrap}
.p-retry-label{flex-basis:100%;margin:0;text-align:center;font-size:var(--secondary);line-height:1.4;color:var(--textSecondary)}
.p-player:has(>.p-stage) .p-response>.p-eyebrow{grid-row:1;text-align:center}
.p-player:has(>.p-stage) .p-response>.p-answers{grid-row:4;margin:0;padding-block-start:0;min-block-size:0;max-block-size:var(--answers-budget,65dvh);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.p-player:has(>.p-stage) .p-study>.p-prompt-body>*{flex-shrink:0}
.p-player:has(>.p-stage) .p-study>.p-prompt-body>:is(.p-question,.p-bg-group){margin-block:0}
.p-player:has(>.p-stage) .p-bounded:has(.p-study>.p-prompt-body[hidden]) .p-prompt-transport{grid-row:2/span 2;align-self:center}
.p-player:has(>.p-stage) .p-prompt-picture{align-self:center;max-block-size:26dvh}
.p-player:has(>.p-stage) .p-prompt-picture img{max-block-size:22dvh}
/* The dock reserves the real feedback height, including expanded Why. */
.p-player:has(>.p-stage)>.p-actionbar>.p-drawer-slot{position:relative;inset:auto;block-size:auto;max-block-size:28dvh;overflow:auto;pointer-events:auto;flex-shrink:0}
.p-player:has(>.p-stage)>.p-actionbar>.p-drawer-slot>.p-feedback{position:relative;inset:auto;block-size:auto;max-block-size:none;overflow:visible;border-radius:var(--r-option);animation:p-drawer 200ms var(--ease-out)}
.p-player:has(>.p-stage)>.p-actionbar:has(.p-drawer-slot){gap:var(--s2);padding-block-start:var(--s2)}
/* Grading changes colour/icons only; the option order and geometry stay put. */
.p-player:has(>.p-stage) .p-option.is-selected.is-correct{animation:none}
.p-player:has(>.p-stage) .p-option>:is(.p-bg-group,span:not(.p-key)){min-inline-size:0}
.p-player:has(>.p-stage) .p-option .living-word [data-w]{max-inline-size:100%;overflow-wrap:anywhere}
.p-player:has(>.p-stage) .p-option[aria-disabled=true]{cursor:default}
.p-player:has(>.p-stage) .p-option[aria-disabled=true]:active{transform:none}
@media(max-height:480px) and (max-width:899px) and (orientation:landscape){
 .p-player:has(>.p-stage) .p-response>.p-eyebrow{grid-column:1/-1;grid-row:1}
 .p-player:has(>.p-stage) .p-study>.p-prompt-body{grid-column:1;grid-row:2}
 .p-player:has(>.p-stage) .p-study>.p-prompt-transport{grid-column:1;grid-row:3}
 .p-player:has(>.p-stage) .p-response>.p-answers{grid-column:2;grid-row:2/span 2;max-block-size:100%!important}
 .p-player:has(>.p-stage)>.p-actionbar>.p-drawer-slot{max-block-size:20dvh}
}
@media(min-width:900px){
 .p-focus .p-player:not(.e-host,.features-ui,.pr-independent,.pr-listen,.w-certificate-host){width:min(calc(100% - 2 * var(--s6)),1240px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:0}
 .p-player:has(>.p-stage)>.p-head,.p-player:has(>.p-stage)>.p-stage{grid-column:1/-1}
 .p-player:has(>.p-stage)>.p-actionbar{grid-column:2;grid-row:3}
 .p-player:has(>.p-stage)>.p-stage{padding-inline:var(--s5);overflow:hidden}
 .p-player:has(>.p-stage) .p-exercise.p-bounded{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:calc(var(--s5) * 2);row-gap:var(--s3)}
 .p-player:has(>.p-stage) .p-study,.p-player:has(>.p-stage) .p-response{display:flex;flex-direction:column;gap:var(--s3);min-inline-size:0;min-block-size:0;max-block-size:100%;grid-row:1;overflow:hidden}
 .p-player:has(>.p-stage) .p-study{grid-column:1;justify-content:center;align-items:stretch}
 .p-player:has(>.p-stage) .p-study>.p-step-title{display:block;flex-shrink:0;font-size:var(--secondary);font-weight:600;color:var(--textSecondary)}
 .p-player:has(>.p-stage) .p-study>.p-prompt-body{flex:0 1 auto;min-block-size:0;align-items:center;justify-content:safe center;text-align:center}
 .p-player:has(>.p-stage) .p-study>.p-prompt-transport{flex-shrink:0;align-self:center}
 .p-player:has(>.p-stage) .p-response{grid-column:2;justify-content:flex-start;gap:var(--s6)}
 .p-player:has(>.p-stage) .p-response>.p-eyebrow{flex-shrink:0;text-align:start}
 .p-player:has(>.p-stage) .p-response>.p-answers{flex:0 1 auto;max-block-size:var(--answers-budget,100%);align-content:start;block-size:auto}
 /* A matching board itself supplies the two columns: Bulgarian left, meanings
    right. Keeping the board intact also preserves the real connector geometry. */
 .p-player:has(>.p-stage) .p-matching.p-bounded{grid-template-rows:auto minmax(0,1fr)}
 .p-player:has(>.p-stage) .p-matching>.p-study,.p-player:has(>.p-stage) .p-matching>.p-response{display:contents}
 .p-player:has(>.p-stage) .p-matching .p-step-title{grid-column:1;grid-row:1}
 .p-player:has(>.p-stage) .p-matching .p-response>.p-eyebrow{grid-column:2;grid-row:1}
 .p-player:has(>.p-stage) .p-matching .p-response>.p-answers{grid-column:1/-1;grid-row:2;max-block-size:100%;align-self:center}
 .p-player:has(>.p-stage) .p-match-board{column-gap:calc(var(--s5) * 2)}
 .p-player:has(>.p-stage) .p-dialogue{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:calc(var(--s5) * 2)}
 .p-player:has(>.p-stage) .p-dialogue>.p-step-title{display:block;grid-column:1;grid-row:1;font-size:var(--secondary);font-weight:600;color:var(--textSecondary)}
 .p-player:has(>.p-stage) .p-dialogue>.p-eyebrow{grid-column:2;grid-row:1}
 .p-player:has(>.p-stage) .p-dialogue>.p-answers{display:contents}
 .p-player:has(>.p-stage) .p-dialogue .p-chat{grid-column:1;grid-row:2/span 2;min-block-size:0;max-block-size:100%}
 .p-player:has(>.p-stage) .p-dialogue .p-dialogue-options{grid-column:2;grid-row:2;min-block-size:0;max-block-size:100%;overflow:auto}
 .p-player:has(>.p-stage) .p-dialogue .p-answers>.p-muted{grid-column:2;grid-row:3;align-self:start}
 .p-player:has(>.p-stage) .p-stage>.p-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4) calc(var(--s5) * 2);align-content:center;margin:0;min-block-size:0;max-block-size:100%;overflow:auto;text-align:start;align-items:start}
 .p-player:has(>.p-stage) .p-card>.p-card-study,.p-player:has(>.p-stage) .p-card>.p-card-detail{display:flex;flex-direction:column;gap:var(--s4);min-inline-size:0;min-block-size:0;max-block-size:100%;overflow:auto;padding:var(--s1)}
 .p-player:has(>.p-stage) .p-card>.p-card-study{grid-column:1;grid-row:1;align-items:center;text-align:center}
 .p-player:has(>.p-stage) .p-card>.p-card-detail{grid-column:2;grid-row:1}
 .p-player:has(>.p-stage) .p-card:has(.p-hero-word) .p-audio-controls{margin-inline:auto}
 .p-player:has(>.p-stage) .p-word-picture{inline-size:min(100%,224px)}
 .p-player:has(>.p-stage) .p-word-picture img{inline-size:160px;block-size:160px}
 .p-player:has(>.p-stage) .p-stage[data-step=passage]>.p-card{align-content:stretch}
 .p-player:has(>.p-stage) .p-stage[data-step=passage] .p-passage-tools{grid-column:1;grid-row:1;block-size:100%;max-block-size:none}
 .p-player:has(>.p-stage) .p-stage[data-step=passage] .p-card>.p-reading{grid-column:2;grid-row:1;block-size:100%;max-block-size:100%}
 .p-player:has(>.p-stage) .p-stage>.p-result{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:var(--s4);overflow:auto}
 .p-player:has(>.p-stage) .p-result>.p-result-stats,.p-player:has(>.p-stage) .p-result>.p-result-mistakes{grid-column:1/-1}
}
/* Readable text and paired foreground/background states on every surface. */
.p-player:has(>.p-stage) :is(.p-eyebrow,.p-translit,.p-caption,.p-muted,.p-key){color:var(--textSecondary)}
.p-player:has(>.p-stage) .p-button:disabled{opacity:1;color:var(--textSecondary);background:var(--surfaceSunken);border-color:var(--border);box-shadow:none}
.p-player:has(>.p-stage) .p-primary:active:not(:disabled){background:var(--actionPressed);color:var(--onAction)}
.p-player:has(>.p-stage) .p-primary.is-wrong:active:not(:disabled){background:var(--wrong);border-color:var(--wrong)}
.p-player:has(>.p-stage)>.p-actionbar>.p-primary.is-correct,.p-player:has(>.p-stage)>.p-actionbar>.p-primary.is-correct:active:not(:disabled){background:color-mix(in srgb,var(--correct) 92%,var(--textPrimary));color:var(--onAction)}
.p-player:has(>.p-stage) .p-answer-diff{color:var(--textPrimary)}
.p-player:has(>.p-stage) .p-diff{text-decoration-color:var(--correct)}
.p-player:has(>.p-stage) .p-diff-removed{opacity:1;color:var(--textSecondary)}
.p-player:has(>.p-stage) .p-option[aria-disabled=true].is-correct:is(:hover,:active){background:var(--correctSoft);border-color:var(--correct);color:var(--textPrimary)}
.p-player:has(>.p-stage) .p-option[aria-disabled=true].is-wrong:is(:hover,:active){background:var(--wrongSoft);border-color:var(--wrong);color:var(--textPrimary)}
@media(hover:hover) and (pointer:fine){
 .p-player:has(>.p-stage)>.p-actionbar>.p-primary.is-correct:hover:not(:disabled){background:color-mix(in srgb,var(--correct) 88%,var(--textPrimary));color:var(--onAction)}
 .p-player:has(>.p-stage) .p-option[aria-disabled=true]:hover{transform:none;box-shadow:none}
 .p-player:has(>.p-stage) .p-option[aria-disabled=true]:not(.is-correct,.is-wrong):hover{background:var(--surface);border-color:var(--border)}
}
@media(prefers-reduced-motion:reduce){.p-player:has(>.p-stage)>.p-actionbar>.p-drawer-slot>.p-feedback{animation:none}}

.p-player:has(>.p-stage) .p-tiles:has(.is-review-line) .p-tile-bank{display:none}
.p-player:has(>.p-stage) .p-tile-line.is-review-line{max-block-size:var(--answers-budget,50dvh);overflow:auto;overscroll-behavior:contain}
/* A short Bulgarian prompt is the stage hero on narrow layouts too. */
.p-player:has(>.p-stage) .p-choice .p-study>.p-prompt-body:not(:has(.p-long-prompt))>.p-bg-group{text-align:center}

/* RD-3: a deliberate learning stage. All text sizes derive from shared roles;
   the two columns keep DQA1's protected answers and in-flow feedback. */
.p-player:has(>.p-stage) .p-credit{inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px;padding:var(--s3)}
.p-player:has(>.p-stage) .p-audio-featured{border:0;border-radius:0;gap:var(--s2);align-items:center}
.p-player:has(>.p-stage) .p-audio-featured>.p-audio{border:1.5px solid color-mix(in srgb,var(--textPrimary) 70%,transparent);border-radius:50%;inline-size:52px;block-size:52px}
.p-player:has(>.p-stage) .p-audio-featured>.p-audio-large{inline-size:72px;block-size:72px;min-inline-size:72px;min-block-size:72px;background:var(--action);color:var(--onAction);border-color:var(--action);box-shadow:var(--lift-1)}
.p-player:has(>.p-stage) .p-audio-featured>.p-audio-large:disabled{background:var(--surfaceSunken);color:var(--textSecondary);border-color:var(--border);box-shadow:none}
.p-player:has(>.p-stage) .p-audio-featured>.p-audio-large>svg{inline-size:32px;block-size:32px}
.p-listen-wave{display:flex;align-items:center;justify-content:center;gap:var(--s1);inline-size:40px;block-size:64px;color:var(--textSecondary)}
.p-listen-wave>i{display:block;inline-size:3px;block-size:var(--bar-height);border-radius:var(--s1);background:currentColor;transform:scaleY(.7);transition:transform var(--t-ui) var(--ease-out)}
.p-listen-wave-end{scale:-1 1}
.p-audio-featured:has(.is-playing) .p-listen-wave>i{transform:scaleY(1)}
.p-player:has(>.p-stage) .p-grammar-card>.p-card-study{padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surfaceSunken);text-align:start}
.p-player:has(>.p-stage) .p-grammar-card>.p-card-detail>.p-bg-group{padding:var(--s3);border:1px solid var(--border);border-radius:var(--r-tile);background:var(--surface)}
.p-player:has(>.p-stage) .p-grammar-card>.p-card-detail>.p-button{align-self:start}
.p-result-main,.p-result-detail{display:flex;flex-direction:column;gap:var(--s3);min-inline-size:0;min-block-size:0}
.p-result-main{align-items:center}.p-result-detail{text-align:start}
.p-result-goal{display:flex;align-items:center;gap:var(--s4);padding:var(--s3);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.p-result-goal>.martenitsa-cord{margin:0;flex:none}.p-result-goal h2{font-size:var(--h3)}
.p-result-goal .p-stack{gap:var(--s2)}
.p-result-main>.p-result-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.p-result-main>.p-result-stats>div{padding:var(--s3) var(--s2);border:1px solid var(--border);border-radius:var(--r-tile);background:var(--surface)}
.p-player:has(>.p-stage) .p-result-main .p-stars svg{inline-size:32px;block-size:32px}
.p-result-main .p-result-lesson{max-inline-size:100%;text-wrap:balance}
.p-player:has(>.p-stage) .p-stage>.p-result{min-block-size:0;max-block-size:100%;gap:var(--s4)}
.p-player:has(>.p-stage) .p-result-detail>.p-forecast{padding:var(--s3)}
@media(hover:hover) and (pointer:fine){
 .p-player:has(>.p-stage) .p-audio-featured>.p-audio-large:hover:not(:disabled){background:var(--actionPressed);color:var(--onAction);box-shadow:var(--lift-2);transform:translateY(-1px)}
 .p-player:has(>.p-stage) .p-input:hover:not(:disabled){border-color:var(--action)}
 .p-player:has(>.p-stage) .p-audio:hover:not(:disabled){background:var(--surfaceSunken);color:var(--textPrimary)}
}
.p-player:has(>.p-stage) .p-audio-featured>.p-audio-large:active:not(:disabled){background:var(--actionPressed);color:var(--onAction);transform:scale(.98)}
@media(min-width:900px){
 .p-focus .p-player:has(>.p-stage){grid-template-columns:minmax(0,56fr) minmax(0,44fr)}
 .p-player:has(>.p-stage) .p-exercise.p-bounded,.p-player:has(>.p-stage) .p-stage>.p-card,.p-player:has(>.p-stage) .p-dialogue,.p-player:has(>.p-stage) .p-stage>.p-result{grid-template-columns:minmax(0,56fr) minmax(0,44fr);column-gap:var(--s7)}
 .p-player:has(>.p-stage) .p-study{padding:var(--s6);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);gap:var(--s6)}
 .p-player:has(>.p-stage) .p-study>.p-step-title{text-align:center}
 .p-player:has(>.p-stage) .p-study .p-display-prompt,.p-player:has(>.p-stage) .p-hero-word{font-size:clamp(calc(var(--letter) * 2 / 3),5vw,calc(var(--letter) * 5 / 6));line-height:1.3;font-family:var(--font-display);font-weight:900;letter-spacing:-.005em}
 .p-player:has(>.p-stage) .p-study>.p-prompt-body{gap:var(--s6);inline-size:100%}
 .p-player:has(>.p-stage) .p-study>.p-prompt-transport{flex-direction:column;gap:var(--s3)}
 .p-player:has(>.p-stage) :is(.p-study,.p-card-study) .p-audio{inline-size:64px;block-size:64px;min-inline-size:64px;min-block-size:64px;border-radius:50%}
 .p-player:has(>.p-stage) :is(.p-study,.p-card-study) .p-audio-controls:not(.p-audio-featured){border:0;gap:var(--s2)}
 .p-player:has(>.p-stage) :is(.p-study,.p-card-study) .p-audio-controls:not(.p-audio-featured)>.p-audio{border:1.5px solid color-mix(in srgb,var(--textPrimary) 70%,transparent)}
 .p-player:has(>.p-stage) .p-study .p-audio-featured>.p-audio-large{inline-size:96px;block-size:96px;min-inline-size:96px;min-block-size:96px}
 .p-player:has(>.p-stage) .p-study .p-listen-wave{inline-size:64px;block-size:96px}
 .p-player:has(>.p-stage) .p-prompt-picture,.p-player:has(>.p-stage) .p-prompt-picture img{inline-size:160px;block-size:160px;max-block-size:160px;object-fit:contain}
 .p-player:has(>.p-stage) .p-stage>.p-card{block-size:100%;align-content:start;align-items:start}
 .p-player:has(>.p-stage) .p-card>.p-card-detail{align-self:start;padding:var(--s1);gap:var(--s6)}
 .p-player:has(>.p-stage) .p-card>.p-card-study{gap:var(--s4);inline-size:100%;overflow:auto}
 .p-player:has(>.p-stage) .p-stage[data-step=intro] .p-card-study{align-items:stretch;text-align:start;padding:0}
 .p-player:has(>.p-stage) .p-intro-picture{inline-size:100%;flex-shrink:0;min-block-size:360px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-card)}
 .p-player:has(>.p-stage) .p-intro-picture img{inline-size:100%;block-size:100%;min-block-size:360px;max-block-size:none;object-fit:cover;aspect-ratio:16/9}
 .p-player:has(>.p-stage) .p-card:has(.p-hero-word) .p-card-study{padding:var(--s5);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
 .p-player:has(>.p-stage) .p-word-picture,.p-player:has(>.p-stage) .p-word-picture img{inline-size:160px;block-size:160px}
 .p-player:has(>.p-stage) .p-card:has(.p-hero-word) .p-card-detail>.p-meaning{font-size:var(--h2);font-weight:500}
 .p-player:has(>.p-stage) .p-matching.p-bounded{grid-template-rows:auto minmax(0,1fr)}
 .p-player:has(>.p-stage) .p-matching>.p-study{padding:0;border:0;background:transparent}
 .p-player:has(>.p-stage) .p-match-board{column-gap:var(--s7)}
 .p-player:has(>.p-stage) .p-stage>.p-result{block-size:100%;align-content:center;align-items:center;overflow:hidden}
 .p-player:has(>.p-stage) .p-result-main,.p-player:has(>.p-stage) .p-result-detail{max-block-size:100%;overflow:auto;padding:var(--s1)}
 .p-player:has(>.p-stage) .p-result-main{gap:var(--s6)}
 .p-player:has(>.p-stage) .p-result-main .p-stars svg{inline-size:48px;block-size:48px}
 .p-player:has(>.p-stage) .p-result-main .p-stat{font-size:var(--hero-word)}
 .p-player:has(>.p-stage) .p-result-stats>div{padding-block:var(--s5)}
 .p-player:has(>.p-stage) .p-result-goal{padding:var(--s5)}
}
@media(max-width:899px) and (min-height:481px){
 .p-player:has(>.p-stage) .p-bounded{grid-template-rows:auto minmax(0,auto) auto minmax(80px,auto);align-content:safe center;row-gap:var(--s3)}
 .p-player:has(>.p-stage) .p-bounded:has(.p-study>.p-prompt-body[hidden]){grid-template-rows:auto minmax(0,auto) auto minmax(80px,auto)}
 .p-player:has(>.p-stage) .p-stage>.p-result{overflow:auto;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){
 .p-listen-wave>i{transition:none;transform:none!important}
 .p-player:has(>.p-stage) .p-audio-featured>.p-audio-large:is(:hover,:active){transform:none}
}
.p-player:has(>.p-stage) .p-dialogue-picture{display:none}
@media(min-width:900px){
 .p-player:has(>.p-stage) .p-dialogue:has(.p-dialogue-picture){grid-template-rows:auto auto minmax(0,1fr) auto;row-gap:var(--s3)}
 .p-player:has(>.p-stage) .p-dialogue-picture{display:block;grid-column:1;grid-row:2;inline-size:100%;block-size:clamp(160px,24dvh,240px);overflow:hidden}
 .p-player:has(>.p-stage) .p-dialogue-picture img{inline-size:100%;block-size:100%;object-fit:cover}
 .p-player:has(>.p-stage) .p-dialogue:has(.p-dialogue-picture) .p-chat{grid-row:3/span 2}
 .p-player:has(>.p-stage) .p-dialogue:has(.p-dialogue-picture) .p-dialogue-options{grid-row:2/span 2}
 .p-player:has(>.p-stage) .p-dialogue:has(.p-dialogue-picture) .p-answers>.p-muted{grid-row:4}
}
@media(max-width:899px) and (min-height:481px){
 .p-player:has(>.p-stage) .p-stage:has(.p-grammar-card){overflow:hidden}
 .p-player:has(>.p-stage) .p-grammar-card{block-size:100%;margin:0;overflow:hidden}
 .p-player:has(>.p-stage) .p-grammar-card>.p-card-study{display:flex;flex-direction:column;gap:var(--s3);flex:0 1 auto;min-block-size:80px;max-block-size:45%;overflow:auto}
 .p-player:has(>.p-stage) .p-grammar-card>.p-card-detail{display:flex;flex-direction:column;gap:var(--s3);flex:1;min-block-size:0;overflow:auto;padding:var(--s1)}
}
@media(min-width:900px){
 /* The dock shares the response column's exact inner edges: stage insets
    are 20 + 20 and its gap is 32, while the outer frame splits at 56%. */
 .p-player:has(>.p-stage)>.p-actionbar{margin-inline:calc(var(--s7) * .44 - var(--s5) * .12) var(--s5);padding-inline:0}
}
.p-player:has(>.p-stage) .p-message-picture{display:none}
.p-player:has(>.p-stage) .p-recap-words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.p-player:has(>.p-stage) .p-recap-words>.p-bg-group{padding:var(--s3);border:1px solid var(--border);border-radius:var(--r-tile);background:var(--surface)}
@media(min-width:900px){
 .p-player:has(>.p-stage) .p-message-picture{display:block;inline-size:100%;max-block-size:280px;overflow:hidden}
 .p-player:has(>.p-stage) .p-message-picture img{inline-size:100%;block-size:280px;object-fit:cover}
 .p-player:has(>.p-stage) .p-message-card>.p-card-study{text-align:start;align-items:stretch}
}
/* Ungraded paragraph choices need the same containment as reviewed answers.
   Safe centring starts an overlong paragraph at its first line, never above
   the card. Scrolling is local to the option, including keyboard scrolling. */
.p-player:has(>.p-stage) .p-choice .p-option{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;align-items:safe center;scroll-padding:var(--s2)}
@media(max-width:420px){
 .p-player:has(>.p-stage) .p-choice .p-answers>.p-option{padding-inline:var(--s3)}
}
/* A short result scrolls as a stack; shrinking its groups would let the goal
   paint over the accuracy captions. The action dock remains a separate track. */
@media(max-width:899px){.p-player:has(>.p-stage) .p-result-main,.p-player:has(>.p-stage) .p-result-detail{flex:none}}
/* Focus rings have a real gutter inside every answer scrollport. Favorite
   shares the card's inset so its circular ring cannot hit the clipping edge. */
.p-player:has(>.p-stage) .p-response>.p-answers{padding:var(--s2);scroll-padding:var(--s2)}
.p-player:has(>.p-stage) .p-favorite{inset-block-start:var(--s2);inset-inline-end:var(--s2)}

/* RD-3b: the dialogue's next reply belongs beside its action, rather than
   leaving an empty response column between the choices and the dock. */
.p-dialogue-response{display:contents}
.p-dialogue-response>.p-muted:empty{display:none}
@media(min-width:900px){
 .p-player:has(>.p-stage) .p-dialogue>.p-dialogue-response{display:flex;flex-direction:column;justify-content:flex-start;gap:var(--s6);grid-column:2;grid-row:1/-1;min-block-size:0;padding:var(--s2)}
 .p-player:has(>.p-stage) .p-dialogue-response>.p-eyebrow{flex-shrink:0}
 .p-player:has(>.p-stage) .p-dialogue-response>.p-dialogue-options{flex:0 1 auto;min-block-size:0;max-block-size:100%;padding:var(--s1);scroll-padding:var(--s1)}
 .p-player:has(>.p-stage) .p-dialogue-response>.p-muted{flex-shrink:0}
}
@media(max-width:899px){
 .p-player:has(>.p-stage) .p-dialogue{display:grid;grid-template-rows:auto minmax(64px,1fr) auto auto;gap:var(--s3)}
 .p-player:has(>.p-stage) .p-dialogue>.p-answers{display:contents}
 .p-player:has(>.p-stage) .p-dialogue .p-chat{grid-row:2;min-block-size:0}
 .p-player:has(>.p-stage) .p-dialogue-response>.p-eyebrow{grid-row:1}
 .p-player:has(>.p-stage) .p-dialogue-response>.p-dialogue-options{grid-row:3;max-block-size:45dvh}
 .p-player:has(>.p-stage) .p-dialogue-response>.p-muted{grid-row:4}
}
@media(max-width:899px) and (min-height:481px){
 .p-player:has(>.p-stage) .p-dialogue{grid-template-rows:auto minmax(64px,auto) auto auto;align-content:safe center}
 .p-player:has(>.p-stage) .p-dialogue .p-chat{block-size:auto;max-block-size:40dvh}
 .p-player:has(>.p-stage) .p-dialogue .p-bubble{flex-shrink:0}
}

/* DQA-R2-P: the study card and its response start together; the separate
   actionbar grid track continues to own the bottom dock. */
@media(min-width:900px){
 .p-player:has(>.p-stage) .p-exercise.p-bounded{align-items:start}
 .p-player:has(>.p-stage) .p-study{align-self:start;block-size:auto;min-block-size:min(360px,100%);justify-content:center}
 .p-player:has(>.p-stage) :is(.p-choice,.p-typing) .p-study .p-question{font-family:var(--font-display);font-weight:900;font-size:clamp(calc(var(--letter) / 2),4.6vw,calc(var(--letter) * 5 / 6));line-height:1.05;text-wrap:balance}
 .p-player:has(>.p-stage) :is(.p-choice,.p-typing) .p-study .p-question.p-sentence-prompt{font-size:calc(var(--letter) / 2)}
 .p-player:has(>.p-stage) :is(.p-choice,.p-typing) .p-study .p-question .living-word{line-height:inherit}
 .p-player:has(>.p-stage) .p-study .p-question.p-long-prompt{font-size:calc(var(--letter) / 2);line-height:1.35}
}

/* Feedback owns the answer diff in normal flow, including production host CSS. */
.p-player:has(>.p-stage) .p-feedback>.p-answer-diff{position:static;inset:auto;display:block;max-block-size:none;overflow:visible;overflow-wrap:anywhere;flex-shrink:0}
.p-player:has(>.p-stage) .p-result .p-stat{white-space:nowrap;font-size:clamp(calc(var(--letter) * 7 / 24),8vw,calc(var(--letter) * 5 / 12))}
.p-player:has(>.p-stage) .p-dialogue .p-bubble{flex-shrink:0}
.p-player:has(>.p-stage) .p-dialogue .p-chat{scroll-padding-block:var(--s4);padding-block:var(--s2);overscroll-behavior:contain}
.p-player:has(>.p-stage) .p-dialogue .p-chat.is-scrolled{mask-image:linear-gradient(to bottom,transparent,#000 var(--s4))}
@media(max-width:899px){
 .p-player:has(>.p-stage) .p-dialogue{row-gap:var(--s4);align-content:stretch;grid-template-rows:auto minmax(0,1fr) auto auto}
 .p-player:has(>.p-stage) .p-dialogue .p-chat{block-size:100%;min-block-size:0;max-block-size:none}
}

/* HOT-3: the visual viewport, rather than dvh, owns the keyboard dock.
   Shared by lesson, practice and exam fitStage consumers. */
html body :is(.p-player,.e-host)[data-keyboard]{height:var(--study-height)!important;block-size:var(--study-height)!important;min-height:0;min-block-size:0;max-height:none;margin-block:0}
[data-keyboard] :is(.p-head,.e-player-head){min-block-size:44px;padding-block:env(safe-area-inset-top) 0}
[data-keyboard] .p-typing :is(.p-eyebrow,.p-quiet){display:none}
[data-keyboard] .p-letter-strip{flex-wrap:nowrap;overflow-x:auto;flex-shrink:0;gap:var(--s1);padding-block:var(--s1);min-block-size:52px}
[data-keyboard] .p-letter{flex:0 0 44px}
[data-keyboard] :is(.p-actionbar,.e-actionbar){padding-block:var(--s2);block-size:auto;min-block-size:68px}
[data-keyboard] .p-typing .p-answers{gap:var(--s1)}
:is(.p-head,.e-player-head){padding-block-start:max(var(--s2),env(safe-area-inset-top));padding-left:max(var(--s3),env(safe-area-inset-left));padding-right:max(var(--s3),env(safe-area-inset-right))}
:is(.p-stage,.e-stage,.p-actionbar,.e-actionbar){padding-left:max(var(--s4),env(safe-area-inset-left));padding-right:max(var(--s4),env(safe-area-inset-right))}

/* MOTION-P: the feedback track exists before grading. Its measured envelope
   never changes the study region when Check adds feedback or Why opens. */
.p-player:has(>.p-stage)>.p-actionbar>.p-drawer-slot{block-size:min(var(--feedback-reserve,0px),28dvh);max-block-size:28dvh}
.p-player:has(>.p-stage)>.p-actionbar>.p-drawer-slot:empty{pointer-events:none}
.p-player:has(>.p-stage) .p-feedback.p-feedback-probe{position:absolute;inset:0 0 auto;visibility:hidden;pointer-events:none;animation:none}
@media(max-height:480px) and (max-width:899px) and (orientation:landscape){
 .p-player:has(>.p-stage)>.p-actionbar>.p-drawer-slot{block-size:min(var(--feedback-reserve,0px),20dvh)}
}
.p-player:has(>.p-stage)>.p-actionbar[data-state]{background:var(--bg)}
.p-player:has(>.p-stage)>.p-actionbar>.p-drawer-slot{display:flex;flex-direction:column;justify-content:flex-end}
.p-player:has(>.p-stage)>.p-actionbar>.p-drawer-slot>.p-feedback{flex-shrink:0}

/* The translating drawer cannot create a temporary scrollable overflow. Long
   feedback becomes scrollable once its entrance has actually finished. */
.p-player:has(>.p-stage)>.p-actionbar>.p-drawer-slot:not([data-entered]){overflow:hidden}
.p-player:has(>.p-stage)>.p-actionbar>.p-drawer-slot[data-entered]{overflow:auto;scrollbar-width:thin;justify-content:safe flex-end}

.p-stage[data-step=result]{scrollbar-gutter:stable}
.p-player:has(>.p-stage)>.p-stage[data-entering],.p-player:has(>.p-stage)>.p-stage[data-entering]>.p-result{overflow:hidden}
.p-step-ghost{contain:layout paint;user-select:none}
/* Check changes the feedback tone immediately; interpolating graphite through
   green/red produces a muddy intermediate action while the drawer enters. */
.p-player:has(>.p-stage)>.p-actionbar[data-state]>.p-primary{transition-property:transform,box-shadow}

/* MATCH-1: instant checking with a visible correction, on phones as well as PC. */
.p-matching .p-match-board{column-gap:var(--s7);grid-template-rows:repeat(var(--pair-count),minmax(56px,auto));row-gap:var(--s2);align-items:stretch}
.p-matching .p-match-col{display:grid;grid-template-rows:subgrid;grid-row:1 / -1;gap:inherit;min-inline-size:0}
.p-matching .p-match-col:first-child{grid-column:1}.p-matching .p-match-col:nth-child(2){grid-column:2}
.p-matching .p-match-links{display:block;z-index:-1}
.p-matching .p-match-links path.is-wrong{stroke:var(--wrong);opacity:1;stroke-width:3}
.p-matching .p-match-links path.is-hint{stroke:var(--correct);stroke-dasharray:5 4;opacity:1;stroke-width:3}
.p-player .p-matching .p-match{font-size:var(--body);min-block-size:56px;padding:var(--s3) var(--s2);line-height:1.25;gap:var(--s1);hyphens:auto;hyphenate-limit-chars:8 4 3;overflow-wrap:break-word;container-type:inline-size;position:relative}
.p-player .p-matching .p-match .p-bg-group{font-size:var(--body);min-inline-size:0}
.p-matching .p-match .living-word [data-w]{white-space:nowrap;overflow-wrap:normal}
.p-player .p-matching .p-match.is-matched{opacity:.6;color:var(--textPrimary);border-color:var(--correct);background:var(--correctSoft)}
.p-matching .p-match-mark{position:absolute;inset-block-start:2px;inset-inline-end:2px;inline-size:12px;block-size:12px;color:var(--correct)}
.p-matching .is-wrong>.p-match-mark{color:var(--wrong)}
.p-matching .p-match.is-hint{border-color:var(--correct);background:var(--correctSoft);transform:scale(1.025)}
.p-matching .p-match[aria-disabled=true]{cursor:default}
.p-matching .p-match[aria-disabled=true]:is(:hover,:active){transform:none;box-shadow:none}
.p-matching .p-match.is-wrong{animation:p-shake 400ms var(--ease-out);border-color:var(--wrong);background:var(--wrongSoft)}
.p-match-counter{margin:0;display:flex;align-items:center;justify-content:center;gap:var(--s1);color:var(--textTertiary);font-size:var(--body);line-height:1.4;min-block-size:24px}
.p-match-counter.has-mistakes{color:var(--wrong)}.p-match-counter>svg{inline-size:16px;block-size:16px;flex:none}
.p-match-number-window{display:inline-block;block-size:1.4em;overflow:clip;line-height:1.4}
.p-match-number{display:inline-block;font-variant-numeric:tabular-nums}
.p-match-announce{position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.p-player:has(>.p-stage) .p-matching .p-response>.p-answers{gap:var(--s2);padding:var(--s2);max-block-size:100%}
/* The correction sheet floats above the finished board; Continue never scrolls. */
.p-player:has(.p-matching)>.p-actionbar{grid-column:1/-1;margin-inline:0}
.p-player:has(.p-matching)>.p-actionbar>.p-drawer-slot:empty{display:none}
.p-player:has(.p-matching)>.p-actionbar>.p-drawer-slot:not(:empty){position:absolute;inset-inline:var(--s4);inset-block-end:100%;block-size:auto;max-block-size:70dvh;overflow:auto;justify-content:flex-start;box-shadow:var(--lift-2);border-radius:var(--r-option)}
.p-player:has(.p-matching)>.p-actionbar>.p-drawer-slot>.p-match-feedback{padding:var(--s2);gap:var(--s1)}
.p-match-feedback h2{font-size:var(--bg-text);line-height:1.15;margin:0;min-block-size:44px}
.p-match-cards{display:grid;gap:var(--s1);min-inline-size:0}
.p-match-card{padding:var(--s1) var(--s2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-tile);min-inline-size:0;overflow-wrap:anywhere}
.p-match-card>.p-bg-group{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-block-size:44px}
.p-match-card .p-match-word{font-size:var(--bg-text);line-height:1.2;min-inline-size:0}
.p-match-card .p-audio-controls{border:0;padding:0;margin:0;flex:none}
.p-match-card .p-audio{inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px}
.p-match-card :is(.p-match-chosen,.p-match-correction){font-size:var(--body);line-height:1.25;margin:0;white-space:normal;overflow-wrap:anywhere}
.p-match-chosen s{color:var(--wrong);text-decoration-thickness:1px}
.p-match-correction .p-match-answer{color:var(--correct)}
.p-match-correction>svg{display:inline-block;inline-size:16px;block-size:16px;color:var(--correct);vertical-align:middle;margin-inline-end:var(--s1)}
@media(min-width:1024px){
 .p-match-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
 .p-match-card{padding:var(--s2) var(--s3)}
 .p-player:has(.p-matching)>.p-actionbar>.p-drawer-slot:not(:empty){inset-inline:var(--s5);max-block-size:calc(100dvh - 140px)}
 .p-player:has(.p-matching)>.p-actionbar>.p-drawer-slot>.p-match-feedback{padding:var(--s4);gap:var(--s3)}
}
@media(prefers-reduced-motion:reduce){
 .p-matching .p-match:is(.is-wrong,.is-hint){animation:none;transform:none}
}


/* PLAYER-R4a / R4-01: feedback belongs to the step, with one scroll owner.
   The dock holds only the action. No capped scroller inside a feedback card. */
.p-player:has(>.p-stage) .p-drawer-slot{position:static;inset:auto;block-size:auto;max-block-size:none;overflow:visible;pointer-events:auto;grid-column:1/-1;grid-row:5;min-inline-size:0;flex:none}
.p-player:has(>.p-stage) .p-drawer-slot>.p-feedback{position:static;inset:auto;block-size:auto;max-block-size:none;overflow:visible;border-radius:var(--r-option);animation:p-drawer 200ms var(--ease-out)}
.p-player:has(>.p-stage) .p-feedback>.p-caption{font-size:var(--secondary);font-weight:600;color:var(--textSecondary)}
.p-player:has(>.p-stage) .p-feedback h2{font-size:var(--h3);line-height:1.2;margin:0}
.p-player:has(>.p-stage) .p-feedback>.p-bg-group{font-size:var(--bg-text)}
.p-player:has(>.p-stage)>.p-actionbar{border-block-start:0}
.p-player[data-feedback]:has(>.p-stage)>.p-stage{overflow:auto}
.p-player[data-feedback]:has(>.p-stage) .p-exercise{min-block-size:0;block-size:auto;max-block-size:none;flex:none}
.p-player[data-feedback]:has(>.p-stage) .p-response>.p-answers{max-block-size:none;overflow:visible}
@media(max-width:1023px){
 .p-player[data-feedback]:has(>.p-stage) .p-exercise.p-bounded{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,auto);align-content:start;gap:var(--s4)}
 .p-player[data-feedback]:has(>.p-stage) :is(.p-study,.p-response){display:contents}
 .p-player[data-feedback]:has(>.p-stage) .p-response>.p-eyebrow{grid-column:1;grid-row:1}
 .p-player[data-feedback]:has(>.p-stage) .p-study>.p-prompt-body{grid-column:1;grid-row:2;max-block-size:none;overflow:visible}
 .p-player[data-feedback]:has(>.p-stage) .p-study>.p-prompt-transport{grid-column:1;grid-row:3}
 .p-player[data-feedback]:has(>.p-stage) .p-response>.p-answers{grid-column:1;grid-row:4;max-block-size:none!important}
 .p-player[data-feedback]:has(>.p-stage) .p-dialogue{display:flex;flex-direction:column;overflow:visible}
 .p-player[data-feedback]:has(>.p-stage) .p-dialogue .p-chat{flex:none;block-size:auto;max-block-size:none;overflow:visible}
}
@media(min-width:1024px){
 .p-player[data-feedback]:has(>.p-stage) .p-study{justify-content:flex-start;min-block-size:0;max-block-size:none;overflow:visible}
 .p-player[data-feedback]:has(>.p-stage) .p-exercise.p-bounded{block-size:auto;grid-template-rows:auto}
 .p-player[data-feedback]:has(>.p-stage) .p-matching :is(.p-study,.p-response){display:flex;flex-direction:column;grid-row:1;min-block-size:0;overflow:visible}
 .p-player[data-feedback]:has(>.p-stage) .p-matching .p-study{grid-column:1}
 .p-player[data-feedback]:has(>.p-stage) .p-matching .p-response{grid-column:2}
 .p-player[data-feedback]:has(>.p-stage) .p-match-cards{grid-template-columns:minmax(0,1fr)}
 .p-player[data-feedback]:has(.p-matching)>.p-actionbar{grid-column:2}
 .p-player[data-feedback]:has(>.p-stage) .p-dialogue>.p-drawer-slot{grid-column:1;grid-row:4}
 .p-player[data-feedback]:has(>.p-stage) .p-dialogue .p-chat{max-block-size:none;block-size:auto}
}

@media(max-width:767px){.p-player[data-feedback]:has(>.p-stage) .p-typing :is(.p-letter-strip,.p-quiet){display:none}}

/* R4-02: the learner's answer and the canonical answer are labelled together. */
.p-feedback .p-answer-review{display:flex;flex-direction:column;gap:var(--s1);min-inline-size:0}
.p-feedback .p-answer-label{font-size:var(--secondary);font-weight:600;line-height:1.3;color:var(--textSecondary);margin:0}
.p-feedback .p-answer-review>.p-bg-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--bg-text);line-height:1.25}
.p-feedback .p-answer-review .p-audio-controls{margin:0;padding:0;border:0}
.p-feedback .p-answer-review .p-audio{inline-size:44px;block-size:44px;min-block-size:44px;min-inline-size:44px}
.p-feedback .p-answer-review [data-play=slow]{display:none}
.p-feedback .p-answer-review.is-fail>.p-answer-text{color:var(--wrong);text-decoration:line-through}
.p-feedback .p-answer-text,.p-feedback .p-answer-meaning{margin:0;font-size:var(--body);line-height:1.35;overflow-wrap:anywhere}

/* R4-05: a separate, labelled mistakes round instead of a frozen lesson count. */
.p-repeat-chip{display:flex;width:fit-content;margin-block-end:var(--s2);align-items:center;align-self:start;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-chip);background:color-mix(in srgb,var(--info) 10%,var(--surface));color:var(--info);font-size:var(--secondary);font-weight:600;grid-column:1/-1;grid-row:1}
.p-round-progress>span{background:var(--action)}
.p-stage[data-step=mistakesIntro] .p-message-picture{display:none}

/* R4-03: authored reasons stay readable, expanded on a wrong answer. */
.p-player:has(>.p-stage) .p-explanation{font-size:var(--body);line-height:1.4}
.p-explanation>p{margin:0}.p-explanation>p+p{margin-block-start:var(--s2)}

/* R4-04: one top anchor, including after Check. The measured prompt height
   protects the answer's position; the dock border appears only under scrolling. */
.p-player:has(>.p-stage)>.p-stage{padding-block-start:var(--s6)}
.p-player:has(>.p-stage) .p-exercise.p-bounded{align-content:start;grid-template-rows:repeat(4,auto)}
.p-player:has(>.p-stage) :is(.p-study,.p-response){justify-content:flex-start}
.p-player:has(>.p-stage) .p-study{min-block-size:0}
.p-player:has(>.p-stage) .p-prompt-body{justify-content:flex-start}
.p-player:has(>.p-stage) .p-prompt-body[hidden],.p-player:has(>.p-stage) .p-prompt-transport[hidden]{display:none}
.p-player:has(>.p-stage) .p-stage>.p-card{margin-block:0;align-content:start}
.p-player:has(>.p-stage) .p-word-picture{inline-size:120px;block-size:120px;min-block-size:120px;flex:none;margin-inline:auto}
.p-player:has(>.p-stage) .p-word-picture img{inline-size:120px;block-size:120px;object-fit:contain}
.p-player:has(>.p-stage) .p-word-picture.p-picture-placeholder{background:transparent;border:0}
.p-player[data-stage-scrolled]:has(>.p-stage)>.p-actionbar{box-shadow:inset 0 1px var(--border)}
.p-player[data-feedback]:has(>.p-stage) .p-tile-line.is-review-line{max-block-size:none;overflow:visible}
@media(min-width:1024px){
 .p-player:has(>.p-stage) .p-exercise.p-bounded{grid-template-rows:minmax(0,1fr)}
 .p-player:has(>.p-stage) .p-response{max-block-size:calc(100dvh - var(--fit-head-height,64px) - var(--s6)*2)}
 .p-player:has(>.p-stage) :is(.p-response,.p-dialogue-response)>.p-actionbar{position:static;block-size:auto;min-block-size:0;padding:0;margin:0;border:0;box-shadow:none;flex:none;overflow:visible}
 .p-player:has(>.p-stage) .p-actionbar:has([data-action][hidden]):not(:has(.p-speaking-ratings)){display:none}
}
@media(min-width:1024px){.p-player:not([data-feedback]):has(>.p-stage) .p-exercise.p-matching{grid-template-rows:auto minmax(0,1fr)}}
.p-player:has(>.p-stage) .p-feedback h2{font-size:calc(var(--bg-text) * 1.1);font-weight:700}
.p-feedback .p-answer-review>.p-bg-group{font-size:calc(var(--bg-text) * 1.1)}

/* R4-09: answered tiles remain readable, with an explicit success marker. */
.p-player:has(>.p-stage) .p-tile-line.is-correct{background:var(--correctSoft);border-color:var(--correct)}
.p-player:has(>.p-stage) .p-tile-line.is-correct .p-tile:disabled{opacity:1;color:var(--textPrimary);background:var(--correctSoft);border-color:var(--correct)}
.p-tile-line.is-correct>svg{inline-size:24px;block-size:24px;flex:none;align-self:center;color:var(--correct)}

/* R4-10: two complete words; substitutions are never overprinted. */
.p-spelling-comparison{display:grid;gap:var(--s3);min-inline-size:0}
.p-spelling-row{display:flex;flex-direction:column;gap:var(--s1);min-inline-size:0}
.p-spelling-text{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:calc(var(--bg-text) * 1.1);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;color:var(--textPrimary)}
.p-spelling-change{border-radius:var(--s1);padding-block:var(--s1);color:var(--textPrimary);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.p-spelling-given .p-spelling-change{background:color-mix(in srgb,var(--wrong) 30%,var(--surface));border-block-end:2px solid var(--wrong)}
.p-spelling-expected .p-spelling-change{background:color-mix(in srgb,var(--correct) 30%,var(--surface));border-block-end:2px solid var(--correct)}
.p-spelling-comparison .p-audio-controls{padding:0;border:0;margin:0}
.p-spelling-comparison .p-audio{inline-size:44px;min-inline-size:44px;block-size:44px;min-block-size:44px}
.p-spelling-comparison [data-play=slow]{display:none}
.p-feedback :is(.p-answer-review,.p-spelling-comparison) .p-audio{border-radius:50%}

/* R4-12: the second normal-speed play points to the existing slow control. */
.p-listen-slower{font-size:var(--secondary);color:var(--textSecondary);margin:0;text-align:center}
.p-audio-controls.has-slower-hint [data-play=slow]{outline:2px solid var(--action);outline-offset:2px}

/* R4-21: keyboard affordances remain discoverable on returning desktop visits.
   The left feedback column and the adjacent answer dock are supplied by R4a. */
@media(min-width:1024px){
 .p-player .p-option>.p-key{display:block;inline-size:24px;min-inline-size:24px;block-size:24px;line-height:22px;flex:none}
 .p-player .p-option{font-size:var(--bg-text)}
}

/* R4-16: a way forward and one audible chip per word, instead of a ledger. */
.p-player:has(>.p-stage) .p-stage>.p-result-summary{inline-size:100%;block-size:auto;align-content:start;align-items:start;overflow:visible;text-align:start;gap:var(--s5)}
.p-player:has(>.p-stage) .p-result-summary :is(.p-result-main,.p-result-detail){inline-size:100%;overflow:visible;max-block-size:none;align-items:stretch;gap:var(--s4);padding:var(--s1)}
.p-result-summary h1,.p-result-summary h2,.p-result-summary p{margin:0}
.p-result-summary .p-result-lesson{font-size:var(--h3)}
.p-result-words{display:flex;flex-wrap:wrap;gap:var(--s2)}
.p-word-chip{display:inline-flex;align-items:center;flex-wrap:nowrap;max-inline-size:100%;gap:var(--s2);min-block-size:44px;padding:var(--s2) var(--s3);font-size:var(--bg-text);background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-tile)}
.p-word-chip>.living-word{flex:1;min-inline-size:0}
.p-result-words .p-word-chip{inline-size:100%}
.p-word-chip>.p-audio-controls{flex:none;margin:0}
/* Large-text review uses the available width before choosing its metric columns. */
.p-focus .p-player[data-action-composition][data-large-text] .p-composition>.pr-result{grid-template-columns:minmax(0,1fr)}
.p-focus .p-player[data-action-composition][data-large-text] .pr-result .p-result-main>.p-result-stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))}
.p-word-chip>.p-bg-group{display:contents}.p-word-chip>svg{inline-size:20px;block-size:20px;flex-shrink:0}
.p-word-chip.is-fixed>svg:last-child{color:var(--correct)}
.p-word-chip:has(.is-speaking){border-color:var(--action);background:var(--surfaceSunken)}
.p-goal-inline{display:flex;align-items:center;gap:var(--s3)}
.p-goal-inline>.martenitsa-cord{margin:0;flex-shrink:0}
.p-player:has(>.p-stage) .p-result-main>.p-actionbar{position:static;block-size:auto;min-block-size:0;padding:0;border:0;box-shadow:none;display:flex;flex-direction:column;align-items:stretch;gap:var(--s3)}
.p-result-summary .p-actionbar .p-primary{white-space:normal;text-align:start;line-height:1.25;min-block-size:52px;block-size:auto;padding-block:var(--s3)}
@media(min-width:900px){.p-player:has(>.p-stage) .p-result-summary>.p-result-detail{padding:var(--s5);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}}
@media(hover:hover){.p-word-chip:is(button,a):hover:not(:disabled){border-color:var(--action);background:var(--surfaceSunken);color:var(--textPrimary)}}

.p-player:has(>.p-stage) .p-result-summary .p-result-stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr))}

@media(max-width:899px){.p-player:has(>.p-stage) .p-result-summary .p-result-stats>div{padding-block:var(--s2)}}
.p-chat-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2);min-inline-size:0}
.p-chat-header>.p-caption{flex:1 1 12ch;min-inline-size:min(100%,12ch);overflow-wrap:anywhere}
.p-chat-header>.p-quiet{max-inline-size:100%}
.p-dialogue-note{display:flex;align-items:start;gap:var(--s2);font-size:var(--body);line-height:1.35;color:var(--wrong);margin:0}
.p-dialogue-note:empty{display:none}.p-dialogue-note>svg{inline-size:20px;block-size:20px;flex-shrink:0}
.p-player .p-chat>.p-bubble{position:relative;display:flex;flex-direction:column;gap:var(--s2);align-items:stretch;text-align:start;min-block-size:44px;white-space:normal;font-size:var(--body);line-height:1.35;padding:var(--s3) var(--s4);padding-inline-end:48px;flex-shrink:0}
.p-bubble-speaker{display:flex;align-items:center;gap:var(--s2);font-size:var(--secondary);font-weight:600}
.p-avatar{display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%;background:var(--surfaceSunken);color:var(--textPrimary);flex-shrink:0}
.p-bubble-translation{font-size:var(--secondary);font-weight:400;color:var(--textSecondary)}
.p-bubble>.living-word{font-size:var(--body);font-weight:500}
.p-bubble-audio{position:absolute;inset-inline-end:var(--s3);inset-block-start:var(--s3);display:grid;place-items:center;inline-size:32px;block-size:32px}
.p-bubble-audio>svg{inline-size:20px;block-size:20px}
.p-bubble.is-playing{border-color:var(--action);background:var(--surfaceSunken)}
@media(hover:hover){.p-chat>.p-bubble:not(:disabled):hover{border-color:var(--action);background:var(--surfaceSunken);transform:none}}
.p-chat>.p-bubble:not(:disabled):active{transform:scale(.98)}
.p-player:has(>.p-stage) .p-dialogue>.p-chat-header{grid-column:1;grid-row:1}
.p-player:has(>.p-stage) .p-dialogue .p-chat{mask-image:none}
@media(min-width:1024px){
 .p-player:has(>.p-stage) .p-dialogue>.p-step-title{display:none}
 .p-player:has(>.p-stage) .p-dialogue .p-chat{grid-row:2/-1}
 .p-player:has(>.p-stage) .p-dialogue>.p-dialogue-response{gap:var(--s3)}
 .p-player:has(>.p-stage) .p-actionbar:has([data-chat-hint]){display:flex}
}
@media(max-width:1023px){
 .p-player:has(>.p-stage) .p-dialogue{grid-template-rows:auto auto minmax(0,1fr) auto auto;row-gap:var(--s2)}
 .p-player:has(>.p-stage) .p-dialogue>.p-chat-header{grid-row:2}
 .p-player:has(>.p-stage) .p-dialogue .p-chat{grid-row:3}
 .p-player:has(>.p-stage) .p-dialogue-response>.p-dialogue-options{grid-row:4}
 .p-player:has(>.p-stage) .p-dialogue-response>.p-dialogue-note{grid-row:5}
}
@media(prefers-reduced-motion:reduce){.p-chat>.p-bubble:active{transform:none}}
.p-actionbar:has([data-mic]){block-size:auto;gap:var(--s2)}
.p-actionbar>[data-mic]{min-block-size:56px;inline-size:100%}
.p-actionbar>[data-speak-aloud]{inline-size:100%}
.p-actionbar>.p-caption{margin:0;text-align:center}
.p-speak-tools>.p-muted{margin:0}
.p-actionbar:has([data-mic]) [data-skip-speaking]{min-block-size:44px}
/* R4-11: one complete word card, on every viewport. */
.p-player:has(>.p-stage) .p-stage>.p-new-word{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s2);inline-size:min(100%,640px);block-size:auto;max-block-size:100%;margin-inline:auto;padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);overflow:auto}
.p-player:has(>.p-stage) .p-new-word>.p-word-picture{inline-size:120px;block-size:120px;min-block-size:120px;margin:0;flex-shrink:0}
.p-player:has(>.p-stage) .p-new-word>.p-picture-placeholder{display:none}
.p-player:has(>.p-stage) .p-new-word>.p-bg-group{display:flex;flex-direction:column;align-items:center;gap:var(--s2);inline-size:100%;flex-shrink:0}
.p-new-word .p-hero-word{font-size:var(--forms-display)}
.p-player:has(>.p-stage) .p-new-word .p-audio{inline-size:52px;block-size:52px;min-inline-size:52px;min-block-size:52px}
.p-player:has(>.p-stage) .p-new-word>.p-meaning{font-size:var(--h2);font-weight:400}
.p-new-word-example{inline-size:100%;padding:var(--s3);border-radius:var(--r-tile);background:var(--surfaceSunken);display:flex;flex-direction:column;gap:var(--s2);text-align:start}
.p-new-word-example>.p-bg-group{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s2);min-inline-size:0}
.p-new-word-example .living-word{font-size:var(--body)}
.p-new-word-example .p-audio-controls{margin:0!important}
.p-new-word-example [data-play=slow]{display:none}
.p-new-word-note{inline-size:100%;text-align:start}
.p-copy .p-bg-group{display:inline;font-size:inherit}.p-copy .living-word{font-size:inherit;line-height:inherit}
.p-word-toast{position:static;inset:auto;inline-size:100%;max-inline-size:none;margin:0;box-shadow:none;padding:var(--s2) var(--s3);font-size:var(--secondary);flex-shrink:0}
.p-actionbar:has(.p-word-toast){block-size:auto;min-block-size:0;gap:var(--s2)}
@media(min-width:1024px){.p-player:has(>.p-stage) .p-new-word>.p-actionbar{position:sticky;inset-block-end:0;inline-size:100%;block-size:auto;min-block-size:0;margin:0;padding:var(--s2) 0 0;border:0;box-shadow:none;flex-shrink:0;background:var(--surface)}}
@media(max-width:1023px){
 .p-player[data-feedback]:has(>.p-stage) .p-stage:has(.p-dialogue){overflow:hidden}
 .p-player[data-feedback]:has(>.p-stage) .p-dialogue{display:grid;grid-template-rows:auto minmax(0,1fr) auto;block-size:100%;min-block-size:0;overflow:hidden}
 .p-player[data-feedback]:has(>.p-stage) .p-dialogue>.p-chat-header{grid-row:1}
 .p-player[data-feedback]:has(>.p-stage) .p-dialogue .p-chat{grid-row:2;block-size:100%;max-block-size:100%;overflow:auto}
 .p-player[data-feedback]:has(>.p-stage) .p-dialogue :is(.p-step-title,.p-dialogue-response>.p-eyebrow,.p-dialogue-options){display:none}
 .p-player[data-feedback]:has(>.p-stage) .p-dialogue>.p-drawer-slot{grid-row:3;min-block-size:0}
}

/* R4-20: hold the selected press for 300 ms before automatic feedback. */
.p-player[data-auto-check] .p-option.is-selected{transform:scale(.98);transition-duration:var(--t-press)}
@media(prefers-reduced-motion:reduce){.p-player[data-auto-check] .p-option.is-selected{transform:none}}

/* R4-15: an actual recap, with the next action and a saved pause. */
.p-part-stat{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;font-size:var(--body)}
.p-part-stat strong{font-size:var(--h2);font-variant-numeric:tabular-nums}
.p-part-words{display:flex;flex-wrap:wrap;gap:var(--s2);align-content:start}
.p-part-word{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r-tile);background:var(--surface)}
.p-part-word>.living-word{font-size:var(--bg-text)}
.p-part-word .p-audio-controls{display:flex;gap:0;margin:0}
.p-part-word .p-audio{inline-size:44px;min-inline-size:44px;block-size:44px;min-block-size:44px}
.p-player:has(>.p-stage) .p-recap-words.p-part-words{display:flex;flex-wrap:wrap;gap:var(--s2)}
.p-player:has(>.p-stage) .p-part-words>.p-part-word{display:inline-flex;flex:0 1 auto;padding:var(--s2) var(--s3)}

/* PLAYER-R5 P1-1: feedback uses natural flow above the separate action dock.
   In particular the host's old invisible letter keyboard must occupy no space. */
@media(max-width:767px){.p-focus .p-player[data-feedback]:has(>.p-stage) .p-typing :is(.p-letter-strip,.p-quiet):not([hidden]){display:none;visibility:hidden}}
.p-player:has(>.p-stage) .p-response>.p-drawer-slot{grid-column:1/-1;grid-row:5;margin-block-start:var(--s4)}
.p-player[data-feedback]:has(>.p-stage) .p-response{overflow:visible;max-block-size:none}
.p-player:has(>.p-stage) .p-feedback{gap:var(--s2);padding:var(--s3) var(--s4);text-align:start}
.p-player:has(>.p-stage) .p-spelling-comparison{gap:var(--s2)}
.p-player:has(>.p-stage) .p-spelling-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s2);align-items:center}
.p-player:has(>.p-stage) .p-spelling-row>.p-answer-label,.p-player:has(>.p-stage) .p-spelling-row>.p-answer-meaning{grid-column:1/-1}
.p-player:has(>.p-stage) .p-spelling-row>.p-audio-controls{grid-column:2;grid-row:2}
.p-player:has(>.p-stage) .p-spelling-text{font-family:var(--font-body);font-size:var(--bg-text);line-height:1.35}
.p-player:has(>.p-stage) .p-feedback :is(.p-answer-label,.p-answer-meaning){font-size:var(--secondary)}
.p-player:has(>.p-stage) .p-feedback .p-audio{inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px}
.p-player:has(>.p-stage) .p-feedback .p-why{padding-block:0}
.p-player:has(>.p-stage)>.p-actionbar{background:var(--bg);padding-block-start:var(--s4);overflow:visible}
.p-player:has(>.p-stage) .p-match-feedback .p-match-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1)}
.p-player:has(>.p-stage) .p-match-feedback .p-match-card{padding:var(--s1) var(--s2)}
.p-match-answer-copy{display:flex;flex-direction:column;gap:var(--s1);min-inline-size:0}
.p-match-answer-copy>.p-caption{font-family:var(--font-body);font-weight:400}
.p-match-comparison+.p-match-comparison{margin-block-start:var(--s3)}

/* P1-2: the stage has the same natural tracks before and after Check. */
.p-player:has(>.p-stage)>.p-stage:has(.p-bounded){overflow:auto}
.p-player:has(>.p-stage) .p-exercise.p-bounded{block-size:auto;max-block-size:none;flex:none}
.p-player:has(>.p-stage) .p-study>.p-prompt-body{max-block-size:none;overflow:visible}
.p-player:has(>.p-stage) .p-response>.p-answers{max-block-size:none;overflow:visible}
.p-player:has(>.p-stage) .p-choice .p-option{flex-shrink:0;min-block-size:56px}
.p-player:has(>.p-stage) .p-choice .p-option[aria-disabled=true]:not(.is-selected,.is-correct){opacity:1;color:var(--textSecondary);border-color:var(--border);background:var(--surface)}
@media(max-width:1023px){
 .p-player:has(>.p-stage) .p-exercise.p-bounded{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,auto);align-content:start;gap:var(--s3)}
 .p-player:has(>.p-stage) :is(.p-study,.p-response){display:contents}
 .p-player:has(>.p-stage) .p-response>.p-answers{padding:var(--s2);gap:var(--s3)}
 .p-player:has(>.p-stage) .p-choice .p-response>.p-answers:not(.p-image-options){display:flex;flex-direction:column}
 .p-player:has(>.p-stage) .p-study>.p-prompt-transport{grid-column:1;grid-row:3}
 .p-player:has(>.p-stage) .p-study>.p-prompt-body{grid-column:1;grid-row:2}
 .p-player:has(>.p-stage) .p-bounded:has(.p-study>.p-prompt-body[hidden]) .p-prompt-transport{grid-row:2/span 2}
}

/* P1-6: completion is the last item in the conversation, never an overlay. */
.p-player:has(>.p-stage) .p-chat>.p-drawer-slot{flex:none;margin-block-start:var(--s4);grid-area:auto}
.p-player[data-feedback]:has(>.p-stage) .p-dialogue{block-size:100%;min-block-size:0;overflow:hidden}
.p-player[data-feedback]:has(>.p-stage) .p-dialogue .p-chat{overflow:auto;min-block-size:0;block-size:100%;max-block-size:100%;padding-block-end:var(--s4)}
.p-player[data-feedback]:has(>.p-stage) .p-dialogue>.p-dialogue-response{display:none}
.p-player:has(>.p-stage) .p-dialogue .p-chat.is-scrolled{mask-image:linear-gradient(to bottom,transparent,#000 var(--s4))}
@media(max-width:1023px){
 .p-player[data-feedback]:has(>.p-stage) .p-dialogue{display:grid;grid-template-rows:auto minmax(0,1fr);block-size:100%;overflow:hidden}
 .p-player[data-feedback]:has(>.p-stage) .p-dialogue .p-chat{grid-row:2}
}
@media(min-width:1024px){
 .p-player[data-feedback]:has(>.p-stage) .p-dialogue .p-chat{grid-row:2/-1}
}

/* P1-7: the rule, examples and article link share the stage's one scroller. */
.p-player:has(>.p-stage) .p-stage:has(.p-grammar-card){overflow:auto}
.p-player:has(>.p-stage) .p-grammar-card{block-size:auto;max-block-size:none;min-block-size:0;overflow:visible;flex:none}
.p-player:has(>.p-stage) .p-grammar-card>:is(.p-card-study,.p-card-detail){block-size:auto;max-block-size:none;min-block-size:0;overflow:visible;flex:none}
.p-grammar-example{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3);border:1px solid var(--border);border-radius:var(--r-tile);background:var(--surface)}
.p-grammar-example>.p-bg-group{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s2)}
.p-grammar-example .p-audio-controls{margin:0;border:0;padding:0}
.p-player:has(>.p-stage) .p-grammar-example .p-audio{inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px}
.p-grammar-example [data-play=slow]{display:none}

/* P2-2: one answer/meaning/audio composition on every review surface. */
.p-player:has(>.p-stage) .p-response>.p-drawer-slot{margin-block-start:0}
.p-player:has(>.p-stage) .p-exercise.p-bounded,.p-player:has(>.p-stage) .p-response{gap:var(--s4)}
.p-player:has(>.p-stage) .p-feedback .p-answer-review>.p-bg-group{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);align-items:center;font-size:var(--bg-text)}
.p-player:has(>.p-stage) .p-feedback .p-answer-review .p-audio-controls{inline-size:auto;margin:0;flex:none}
.p-player:has(>.p-stage) .p-feedback .p-answer-review .living-word{line-height:1.35}
/* P2-3: spelling marks are underlines, not boxes across the letterforms. */
.p-player:has(>.p-stage) .p-spelling-change{border-radius:0;padding:0;background:transparent;box-decoration-break:slice;-webkit-box-decoration-break:slice}
/* P2-7: the spoken Bulgarian, rather than its translation, is the headline. */
.p-player:has(>.p-stage) .p-speaking .p-question{font:900 var(--hero-word)/1.15 var(--font-display)}
.p-player:has(>.p-stage) .p-speaking .p-meaning{font-size:var(--secondary);color:var(--textSecondary);font-weight:400}
.p-player:has(>.p-stage) .p-speaking .p-mic{min-block-size:52px}
.p-player:has(>.p-stage)>.p-actionbar>[data-mic]{min-block-size:52px}
.p-retry-preview{display:flex;flex-direction:column;gap:var(--s2)}
.p-retry-preview-row{padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r-tile);background:var(--surface)}
.p-retry-preview-row>.p-bg-group{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s2);min-block-size:44px}
.p-retry-preview-row .p-audio-controls{margin:0;border:0;padding:0}
.p-player:has(>.p-stage) .p-retry-preview-row .p-audio{inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px}
/* P2-23: hidden shell content must not extend the focus-mode document. */
html:has(body.p-focus){block-size:100%;overflow:hidden;overscroll-behavior:none}
body.p-focus{block-size:100dvh;min-block-size:0;overflow:hidden;overscroll-behavior:none}
body.p-focus>:is(footer,.collection,.topbar){display:none!important}
.p-lesson-label{display:none}
@media(min-width:1024px){.p-lesson-label{display:block;max-inline-size:30%;font-size:var(--caption);color:var(--textSecondary);overflow-wrap:anywhere}}
/* P2-25: part vocabulary flows above a dock with its own layout track. */
.p-player:has(>.p-stage) .p-recap-words.p-part-words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);padding-block-end:var(--s4)}
.p-player:has(>.p-stage) .p-part-words>.p-part-word{min-inline-size:0;inline-size:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);padding:var(--s2) var(--s3)}
.p-player:has(>.p-stage) .p-part-word .p-audio-controls{margin:0}
.p-player:has(>.p-stage) .p-stage:has(.p-part-words){overflow:auto}
.p-player:has(>.p-stage) .p-message-card:has(.p-part-words){block-size:auto;max-block-size:none;overflow:visible}
.p-player:has(>.p-stage) .p-message-card:has(.p-part-words)>:is(.p-card-study,.p-card-detail){block-size:auto;max-block-size:none;overflow:visible}
.p-part-words .p-part-word>.living-word[data-bg]{white-space:normal;overflow-wrap:normal;word-break:normal}

/* W-R5: use the shared audio surface instead of stage-specific pills/sizes. */
:is(.p-player:has(>.p-stage),.e-host,.e-placement-question) .p-audio-controls:has(>.audio-control){display:inline-flex;align-items:center;gap:var(--s1);padding:0;border:0;border-radius:0;background:transparent}
:is(.p-player:has(>.p-stage),.e-host,.e-placement-question) .p-audio-controls>.audio-control.audio-button{inline-size:var(--audio-control);block-size:var(--audio-control);min-inline-size:var(--audio-control);min-block-size:var(--audio-control);padding:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--textPrimary) 70%,transparent);background:transparent;color:var(--textPrimary);font-size:var(--caption);box-shadow:none}
:is(.p-player:has(>.p-stage),.e-host,.e-placement-question) .p-new-word>.p-bg-group>.p-audio-controls>.audio-control{--audio-control:var(--audio-control-hero)}
:is(.p-player:has(>.p-stage),.e-host,.e-placement-question) .p-audio-controls>.audio-control.audio-button>svg:not(.p-voice-ring){inline-size:24px;block-size:24px;animation:none}
:is(.p-player:has(>.p-stage),.e-host,.e-placement-question) .p-audio-controls>.audio-control.audio-button[aria-pressed=true]{background:var(--action);color:var(--onAction);border-color:var(--action)}
@media(hover:hover) and (pointer:fine){:is(.p-player:has(>.p-stage),.e-host,.e-placement-question) .p-audio-controls>.audio-control.audio-button:hover:not(:disabled){background:color-mix(in srgb,var(--action) 8%,var(--surface));color:var(--textPrimary);border-color:var(--action);box-shadow:none;transform:none}}
:is(.p-player:has(>.p-stage),.e-host,.e-placement-question) .p-audio-controls>.audio-control.audio-button:active:not(:disabled){background:color-mix(in srgb,var(--action) 12%,var(--surface));color:var(--textPrimary);transform:scale(.92)}
@media(prefers-reduced-motion:reduce){:is(.p-player:has(>.p-stage),.e-host,.e-placement-question) .p-audio-controls>.audio-control.audio-button:active{transform:none}}

:is(.p-player:has(>.p-stage),.e-host,.e-placement-question) .p-audio-controls>.audio-control.audio-button:disabled{opacity:1;background:var(--surfaceSunken);color:var(--textSecondary);border-color:var(--border);cursor:default}
.p-part-word>.p-audio-controls{flex:none}
.p-player:has([data-step=partBreak])>.p-actionbar{display:grid;grid-template-columns:1fr;gap:var(--s2)}
@media(min-width:1024px){.p-player:has([data-step=partBreak])>.p-actionbar{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.p-player:has([data-step=partBreak])>.p-actionbar>.p-button{inline-size:100%}}

/* PLAYER-R5b P2-42: one counter slot leaves room for both utility controls. */
.p-retry-head>.p-counter{flex:0 1 auto;max-inline-size:40%;font-size:var(--caption);line-height:1.2;overflow-wrap:normal}
.p-retry-head>.p-progress{flex:1 1 0;min-inline-size:var(--s4)}
.p-retry-head>.p-icon,.p-retry-head>[data-shortcuts]{flex-shrink:0}

/* PLAYER-R5b P3-20: keep the reply legend with the options on phones too. */
@media(max-width:1023px){
 .p-player:has(>.p-stage) .p-dialogue{grid-template-rows:auto auto minmax(0,1fr) auto}
 .p-player:has(>.p-stage) .p-dialogue>.p-dialogue-response{display:flex;flex-direction:column;grid-column:1;grid-row:4;gap:var(--s2);min-block-size:0}
 .p-dialogue-response>.p-eyebrow{margin:0;flex:none}
}

/* P-FIX-1: reserve the intro photo and keep the skeleton until text metrics settle.
 * The real heading is measured at its final width with its loaded face. */
.p-player[data-player-preparing]{position:relative}
.p-player[data-player-preparing]>:not(.p-first-paint-cover){visibility:hidden}
.p-player[data-player-preparing]>.p-first-paint-cover{position:absolute;inset:0;inline-size:100%;pointer-events:none}
@media(max-width:899px){
 .p-player:has(>.p-stage) .p-intro-picture{block-size:144px;min-block-size:144px;flex:none;overflow:hidden}
 .p-player:has(>.p-stage) .p-intro-picture picture{display:block;block-size:100%}
 .p-player:has(>.p-stage) .p-intro-picture img{block-size:100%;max-block-size:none;object-fit:cover}
 .p-player:is([data-fit=dense],[data-fit=small]):has(>.p-stage) .p-intro-picture{block-size:96px;min-block-size:96px}
}

/* W-DQA4 P3-18: a complete progress track with minutes, and earned stars. */
.p-goal-dial{position:relative;display:inline-flex;flex:none;inline-size:64px;block-size:64px}
.p-goal-dial .cord-track{stroke-width:12}
.p-goal-minutes{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--eyebrow);font-weight:700;font-variant-numeric:tabular-nums}
.p-earned-stars{display:flex;justify-content:center;gap:var(--s2);color:var(--action)}
.p-earned-stars svg{inline-size:24px;block-size:24px;fill:currentColor}

/* W-DQA4 P3-23: the speaking escape remains a quiet link on every device. */
.p-player .p-actionbar>[data-skip-speaking]{background:transparent;border-color:transparent;box-shadow:none;min-block-size:44px;block-size:auto;justify-self:center;font-size:var(--caption);text-decoration:underline;text-underline-offset:.2em}
@media(hover:hover) and (pointer:fine){.p-player .p-actionbar>[data-skip-speaking]:hover{background:transparent;color:var(--textPrimary);text-decoration-thickness:2px;transform:none}}

/* W-R6 N7: enlarged audio rates grow horizontally; the save action owns a lane. */
:is(.p-player:has(>.p-stage),.e-host,.e-placement-question) .p-audio-controls>.audio-control.audio-button.slow{inline-size:auto;min-inline-size:var(--audio-control);padding-inline:var(--s3);border-radius:var(--r-button);white-space:nowrap;overflow-wrap:normal}
.p-player:has(>.p-stage) .p-new-word>.p-eyebrow{padding-inline:52px;min-block-size:44px;display:flex;align-items:center;justify-content:center}
/* W-R6 N8: the shared audio button has a real trailing grid column. */
.p-player .p-chat>.p-bubble{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:var(--s2) var(--s3);padding:var(--s3)}
.p-player .p-chat>.p-bubble>:not(.p-bubble-audio){grid-column:1}
.p-player .p-chat>.p-bubble>.p-bubble-audio{position:static;grid-column:2;grid-row:1/4;align-self:center;display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px;padding:0}
.p-player .p-chat>.p-bubble>.p-bubble-audio>svg{display:block;inline-size:24px;block-size:24px}

/* P-R6: reward belongs above the result, with three explicit thresholds. */
.p-result-reward{display:grid;gap:var(--s3)}
.p-result-reward .p-earned-stars{justify-content:flex-start;gap:var(--s3)}
.p-result-reward .p-earned-stars svg{inline-size:32px;block-size:32px;flex:none}
.p-earned-stars .is-unearned{fill:transparent;color:var(--textSecondary)}
.p-earned-stars .is-earned{fill:var(--action);color:var(--action);animation:p-reward-in 260ms var(--ease-out) both;animation-delay:calc(var(--star-index) * 100ms)}
@keyframes p-reward-in{from{opacity:0;transform:translateY(8px) scale(.8)}to{opacity:1;transform:none}}
.p-player:has(>.p-stage) .p-result-summary .p-result-stats{display:flex;flex-wrap:wrap;gap:var(--s4)}
.p-result-summary .p-result-stats>div{flex:1 1 max-content;min-inline-size:0;max-inline-size:100%}
.p-result-summary .p-result-stats :is(.p-caption,.p-muted){white-space:normal;hyphens:manual;word-break:normal;overflow-wrap:normal}
.p-result-summary [data-stat-scope=minutes]>.p-muted{white-space:nowrap}
@media(prefers-reduced-motion:reduce){.p-earned-stars .is-earned{animation:none}}
/* One component, including the word hero, listening task and dialogue. */
.p-focus .p-player .p-audio-controls>.audio-control.audio-button{display:inline-flex;align-items:center;justify-content:center}
.p-focus .p-player .p-audio-controls>.audio-control.audio-button.slow{inline-size:auto;min-inline-size:var(--audio-control);padding-inline:var(--s3);border-radius:var(--r-button);white-space:nowrap}
.p-focus .p-player .p-audio-controls.p-audio-featured>.audio-control.audio-button,.p-focus .p-player .p-new-word>.p-bg-group>.p-audio-controls>.audio-control.audio-button{inline-size:var(--audio-control-hero);block-size:var(--audio-control-hero);min-inline-size:var(--audio-control-hero);min-block-size:var(--audio-control-hero)}
.p-focus .p-player .p-audio-controls.p-audio-featured>.audio-control.audio-button.slow,.p-focus .p-player .p-new-word>.p-bg-group>.p-audio-controls>.audio-control.audio-button.slow{inline-size:auto}
/* P-R6: shared dialogue transport has no absolutely positioned legacy box. */
.p-focus .p-player .p-chat>.p-bubble{padding:var(--s3);grid-template-columns:minmax(0,1fr) 44px}
.p-focus .p-player .p-chat>.p-bubble>.p-bubble-audio{position:static;display:inline-flex;align-items:center;justify-content:center;grid-column:2;grid-row:1/4;align-self:center;padding:0;inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px}
.p-completed-blank{color:var(--textPrimary)}
.p-completed-blank .p-blank-answer{color:var(--correct)}

/* P-R6: enlarged result text scrolls inside the stage; onward stays visible. */
.p-focus .p-player:has(>.p-stage[data-step=result])>.p-actionbar{inline-size:100%;max-inline-size:680px;align-self:center}
.p-result-summary .learning-numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:var(--s3)}
.p-result-summary .learning-numbers>p{min-inline-size:0;max-inline-size:100%;overflow-wrap:normal;word-break:normal}

.p-earned-stars[data-settled] .is-earned{animation:none}

.p-result-summary h1{hyphens:manual;word-break:normal;overflow-wrap:normal}
/* Clear the exercise-column inset inherited by the independent result dock. */
.p-focus .p-player:has(>.p-stage[data-step=result])>.p-actionbar{grid-column:1/-1;justify-self:center;margin-inline:0;box-sizing:border-box;padding-inline:var(--s4);min-inline-size:0}

/* Accepted spelling corrections teach the letter without an error verdict. */
.p-feedback.is-almost{background:var(--surfaceSunken);color:var(--textPrimary);border-color:var(--border)}
.p-feedback.is-almost>h2{color:var(--textPrimary)}
.p-primary.is-almost{background:var(--action);color:var(--onAction)}

/* R7: one study scroll surface; both decisions stay in the opaque dock. */
.p-player:has(>.p-stage)>.p-stage:has(>.p-new-word){overflow:auto;align-items:center}
.p-player:has(>.p-stage) .p-stage>.p-new-word{max-block-size:none;overflow:visible;flex:none}
.p-player:has(>.p-stage)>.p-actionbar:has([data-known]){block-size:auto;min-block-size:0;gap:var(--s2)}
.p-actionbar>[data-known]{inline-size:100%;margin:0;min-block-size:44px}

.p-player:has(>.p-stage) .p-result-summary .p-result-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}

.p-player:has(>.p-stage) .p-spelling-given .p-spelling-change{border-block-end:2px solid var(--wrong)}
.p-player:has(>.p-stage) .p-spelling-expected .p-spelling-change{border-block-end:2px solid var(--correct);font-weight:700}
.p-player[data-fit=small]:has(>.p-stage) .p-result-summary .p-result-stats{grid-template-columns:1fr}
.p-player:has(>.p-stage>.p-new-word)>.p-actionbar{grid-column:1/-1;justify-self:center;inline-size:100%;max-inline-size:640px}

.p-option>.p-selection-mark{display:none}
/* P-ACTION: selection is a filled state; focus is an independent outer ring. */
.p-focus .p-player .p-option{border:1px solid var(--border);box-shadow:none}
.p-focus .p-player .p-option>.p-selection-mark{display:block;visibility:hidden;flex:none;color:inherit}
.p-focus .p-player .p-option.is-selected:not([aria-disabled=true]){background:var(--action);color:var(--onAction);border-color:var(--action);padding:var(--s3) var(--s5)}
.p-focus .p-player .p-option.is-selected:not([aria-disabled=true]) .p-key{color:var(--onAction);border-color:color-mix(in srgb,var(--onAction) 45%,transparent)}
.p-focus .p-player .p-option.is-selected:not([aria-disabled=true])>.p-selection-mark{visibility:visible}
.p-focus .p-player .p-option:focus-visible{outline:2px solid var(--action);outline-offset:2px;box-shadow:none}
@media(hover:hover) and (pointer:fine){
 .p-focus .p-player .p-option:not(.is-selected):not([aria-disabled=true]):not(:disabled):hover{background:color-mix(in srgb,var(--action) 6%,var(--surface));border-color:var(--border);transform:none;box-shadow:none}
 .p-focus .p-player .p-option.is-selected:not([aria-disabled=true]):hover{background:var(--action);color:var(--onAction);border-color:var(--action)}
}
/* The single instruction stays at the top on phones as well. The dock has its
   own grid track, so scroll padding supplements its reserved physical space. */
@media(max-width:767px){
 .p-player:has(>.p-stage) .p-study>.p-step-title{display:block;grid-column:1/-1;grid-row:1;font-size:var(--eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--textSecondary);margin:0}
 .p-player:has(>.p-stage)>.p-stage:has(.p-exercise){scroll-padding-block-end:calc(var(--action-h,84px) + var(--s4));padding-block-end:var(--s4)}
}
@media(min-width:768px){
 .p-focus .p-player[data-action-composition]{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);inline-size:min(calc(100% - var(--s6)*2),1240px)}
 .p-focus .p-player[data-action-composition]>.p-stage{grid-column:1/-1;grid-row:2;display:flex;align-items:stretch;overflow:auto;padding:var(--s4) var(--s5);scroll-padding-block:var(--s4)}
 .p-focus .p-player[data-action-composition] .p-composition{display:flex;flex-direction:column;gap:var(--s6);flex:none;min-inline-size:0;margin-block:auto}
 .p-focus .p-player[data-action-composition] .p-composition .p-exercise{min-block-size:var(--composition-height,0px);block-size:auto;max-block-size:none;flex:none;overflow:visible;align-content:start;align-items:start}
 .p-focus .p-player[data-action-composition] .p-composition :is(.p-study,.p-response){min-block-size:0;max-block-size:none;overflow:visible;gap:var(--s4)}
 .p-focus .p-player[data-action-composition] .p-composition .p-answers{margin:0;padding:0;min-block-size:0;max-block-size:none;overflow:visible}
 .p-focus .p-player[data-action-composition] .p-composition .p-prompt-body{max-block-size:none;overflow:visible}
 .p-focus .p-player[data-action-composition] .p-composition>.p-actionbar{position:static;inset:auto;inline-size:min(100%,var(--exercise-action-width,480px));align-self:center;block-size:auto;min-block-size:0;max-block-size:none;display:flex;gap:var(--s3);padding:0;margin:0;border:0;box-shadow:none;background:var(--bg);overflow:visible;z-index:3}
 .p-focus .p-player[data-action-composition] .p-composition>.p-actionbar>.p-primary{block-size:auto;min-block-size:52px;padding-block:var(--s2)}
 .p-focus .p-player[data-action-composition] .p-composition>.p-actionbar>.p-drawer-slot{block-size:auto;max-block-size:min(40dvh,calc(100dvh - var(--fit-head-height,64px) - 140px));overflow:auto;overscroll-behavior:contain}
 .p-focus .p-player[data-action-composition] .p-composition[data-overflow]>.p-actionbar{position:sticky;inset-block-end:0;padding-block:var(--s4) max(var(--s4),env(safe-area-inset-bottom));box-shadow:0 -1px var(--border)}
 .p-focus .p-player[data-action-composition] .p-composition .p-dialogue{grid-template-rows:auto auto auto;block-size:auto;overflow:visible;row-gap:var(--s4)}
 .p-focus .p-player[data-action-composition] .p-composition .p-dialogue>.p-step-title{display:block;grid-column:1/-1;grid-row:1;font-size:var(--secondary);font-weight:600;color:var(--textSecondary)}
 .p-focus .p-player[data-action-composition] .p-composition .p-dialogue>.p-chat-header{grid-column:1;grid-row:2}
 .p-focus .p-player[data-action-composition] .p-composition .p-dialogue .p-chat{grid-column:1;grid-row:3;block-size:auto;max-block-size:40dvh;overflow:auto}
 .p-focus .p-player[data-action-composition] .p-composition .p-dialogue>.p-dialogue-response{display:flex;flex-direction:column;grid-column:2;grid-row:2/span 2;gap:var(--s3)}
}

@media(min-width:900px){
 .p-focus .p-player[data-action-composition] .p-composition .p-response{align-self:end}
 .p-focus .p-player[data-action-composition] .p-composition .p-matching{grid-template-rows:auto auto}
 .p-focus .p-player[data-action-composition] .p-composition .p-matching :is(.p-study,.p-response){display:contents}
 .p-focus .p-player[data-action-composition] .p-composition .p-matching .p-step-title{display:block;grid-row:1;grid-column:1/-1}
 .p-focus .p-player[data-action-composition] .p-composition .p-matching .p-answers{grid-row:2;grid-column:1/-1}
 .p-focus .p-player[data-action-composition] .p-composition .p-dialogue>.p-dialogue-response{align-self:end}
}

.p-focus .p-player .p-option:is(.is-correct,.is-wrong)>.p-selection-mark{display:none}
.p-focus .p-player .p-image-options .p-option>.p-selection-mark{position:absolute;inset-block-start:var(--s3);inset-inline-end:var(--s3)}

@media(min-width:768px){
 .p-focus .p-player[data-action-composition] .p-composition .p-study>.p-step-title{display:block;grid-column:1/-1;grid-row:1;font-size:var(--secondary);font-weight:600;color:var(--textSecondary)}
}
@media(min-width:768px) and (max-width:899px){
 .p-focus .p-player[data-action-composition] .p-composition .p-exercise.p-bounded{grid-template-rows:auto auto auto minmax(0,1fr)}
 .p-focus .p-player[data-action-composition] .p-composition .p-response>.p-answers{align-self:end}
}
@media(min-width:900px){
 .p-focus .p-player[data-action-composition] .p-composition .p-exercise.p-bounded{grid-template-rows:minmax(0,1fr)}
 .p-focus .p-player[data-action-composition] .p-composition :is(.p-study,.p-response){display:flex;grid-row:1}
 .p-focus .p-player[data-action-composition] .p-composition .p-exercise.p-matching{grid-template-rows:auto auto}
 .p-focus .p-player[data-action-composition] .p-composition .p-matching :is(.p-study,.p-response){display:contents}
}

/* R9-3: Check locks editing, never removes the learner's answer. */
.p-typing-review{display:grid;gap:var(--s3);min-inline-size:0}
.p-typing-review>div{display:grid;gap:var(--s2);align-content:start;min-inline-size:0}
.p-typing-review .p-answer-label{margin:0;font-size:var(--secondary);color:var(--textSecondary)}
.p-typing-review .p-input[readonly]{opacity:1;box-shadow:none;cursor:default}
.p-typing-review .p-input.is-correct{border-color:var(--correct);background:var(--correctSoft)}
.p-typing-review .p-input.is-wrong{border-color:var(--wrong);background:var(--wrongSoft)}
.p-typing-expected>.p-bg-group{padding:var(--s3) var(--s4);min-block-size:56px;border:1px solid var(--correct);border-radius:var(--r-button);background:var(--correctSoft);font-size:var(--bg-text);overflow-wrap:anywhere}
@media(min-width:768px){.p-typing-review{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* R9: content and action share one flow, including cards and narrow screens. */
.p-focus .p-player[data-action-composition]{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.p-focus .p-player[data-action-composition]>.p-stage{grid-column:1/-1;grid-row:2;display:flex;align-items:stretch;overflow:auto;padding:var(--s4);scroll-padding-block:var(--s4)}
.p-focus .p-player[data-action-composition] .p-composition{display:flex;flex-direction:column;gap:var(--s6);flex:none;inline-size:100%;min-inline-size:0;block-size:max-content;margin-block:auto}
.p-focus .p-player[data-action-composition] .p-composition>.p-actionbar{position:static;inset:auto;inline-size:min(100%,var(--exercise-action-width,480px));align-self:flex-start;margin:0;margin-inline-start:var(--exercise-action-start,0px);block-size:auto;min-block-size:0;max-block-size:none;display:flex;gap:var(--s3);padding:0;border:0;box-shadow:none;background:var(--bg);overflow:visible;z-index:3}
.p-focus .p-player[data-action-composition] .p-composition>.p-actionbar>.p-primary{block-size:auto;min-block-size:52px;padding-block:var(--s2)}
.p-focus .p-player[data-action-composition] .p-composition>.p-actionbar>.p-drawer-slot{position:static;inset:auto;block-size:auto;max-block-size:30dvh;overflow:auto;overscroll-behavior:contain;justify-content:flex-start;box-shadow:none}
.p-focus .p-player[data-action-composition] .p-composition[data-overflow]>.p-actionbar{position:sticky;inset-block-end:0;padding-block:var(--s3) max(var(--s3),env(safe-area-inset-bottom));box-shadow:0 -1px var(--border)}
.p-focus .p-player[data-action-composition] .p-card-composition>.p-card{flex:none;block-size:auto;max-block-size:none;overflow:visible}
.p-focus .p-player[data-action-composition] .p-card-composition .p-card-study,.p-focus .p-player[data-action-composition] .p-card-composition .p-card-detail{max-block-size:none;overflow:visible}
.p-focus .p-player .p-question.p-instruction-prompt{font-family:var(--font-body);font-size:var(--h3);font-weight:600;line-height:1.3;text-wrap:pretty}
.p-focus .p-player .p-option{font-size:var(--bg-text)}
.p-focus .p-player .p-option .p-bg-group{font-size:inherit}
.p-focus .p-player[data-action-composition] .p-speaking .p-speak-tools{text-align:center}
@media(pointer:coarse),(hover:none){.p-focus .p-player .p-option>.p-key{display:none}}
@media(max-width:767px){
 .p-focus .p-player[data-action-composition] .p-composition{margin-block:0}
 .p-focus .p-player[data-action-composition] .p-composition .p-exercise.p-bounded{display:flex;flex-direction:column;gap:var(--s4);block-size:auto;min-block-size:0;max-block-size:none;overflow:visible}
 .p-focus .p-player[data-action-composition] .p-composition :is(.p-study,.p-response){display:flex;flex-direction:column;gap:var(--s3);min-block-size:0;max-block-size:none;overflow:visible}
 .p-focus .p-player[data-action-composition] .p-composition .p-answers{block-size:auto;max-block-size:none;overflow:visible;padding:0;margin:0;flex:none}
 .p-focus .p-player[data-action-composition] .p-composition .p-prompt-body{min-block-size:0;max-block-size:none;overflow:visible;flex:none}
 .p-focus .p-player[data-action-composition] .p-composition .p-prompt-transport{flex:none}
 .p-focus .p-player[data-action-composition] .p-composition .p-option{min-block-size:56px}
 .p-focus .p-player[data-action-composition] .p-composition .p-study>.p-step-title{margin:0}
}
@media(min-width:768px){
 .p-focus .p-player[data-action-composition] .p-card-composition>.p-card{inline-size:100%;max-inline-size:960px;margin-inline:auto}
 .p-focus .p-player[data-action-composition] .p-card-composition>.p-new-word{max-inline-size:640px}
}

@media(min-width:768px){
 .p-focus .p-player[data-action-composition] .p-card-composition>.p-card:not(.p-new-word){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s7);align-items:start}
 .p-focus .p-player[data-action-composition] .p-card-composition :is(.p-card-study,.p-card-detail){display:flex;flex-direction:column;gap:var(--s4);min-inline-size:0}
 .p-focus .p-player[data-action-composition] .p-card-composition .p-card-study{text-align:center;align-items:center}
}

/* R9 matching: no crossing lines; hints are distinct from solved green pairs. */
.p-focus .p-player .p-match-board{inline-size:100%;max-inline-size:720px;margin-inline:auto}
.p-focus .p-player .p-match.is-hint{border:2px dashed #996000;background:var(--surface);color:var(--textPrimary);transform:none;animation:p-match-hint 800ms var(--ease-out) infinite alternate}
[data-theme=dark] .p-focus .p-player .p-match.is-hint{border-color:#F4C66C}
@keyframes p-match-hint{to{opacity:.65}}
.p-focus .p-player[data-feedback] .p-matching .p-match-board{display:grid}
.p-focus .p-player[data-feedback] .p-match-counter{display:none}
.p-focus .p-player[data-action-composition] .p-matching .p-answers{max-inline-size:720px;inline-size:100%;margin-inline:auto}
@media(prefers-reduced-motion:reduce){.p-focus .p-player .p-match.is-hint{animation:none}}

/* P-R9b: one result grid and one content/action axis, including short screens. */
.p-focus .p-player:has(>.p-stage) .p-result-summary .p-result-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.p-focus .p-player:has(>.p-stage[data-step=result])>.p-actionbar{padding-block-start:var(--s4)}
.p-speaking-status{margin:0;text-align:center;font-size:var(--secondary);line-height:1.4}
.p-focus .p-player .p-prompt-body{text-align:center;align-items:center}
.p-part-word>.p-bg-group{inline-size:100%;justify-content:space-between}
.p-part-word>p{margin:0;font-size:var(--secondary);line-height:1.35}
.p-part-review{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--caption);color:var(--textSecondary)}
.p-part-review>svg{inline-size:16px;block-size:16px;flex:none}
.p-part-word[data-needs-review]{border-style:dashed;border-color:var(--textSecondary)}
.p-player [data-chat-translation]{border-color:transparent;background:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:.2em}
@media(min-width:768px){
 .p-focus .p-player[data-action-composition] .p-composition:has(>.p-dialogue){max-inline-size:680px;margin-inline:auto}
 .p-focus .p-player[data-action-composition] .p-composition .p-dialogue{display:flex;flex-direction:column;gap:var(--s3);inline-size:100%;block-size:auto;overflow:visible}
 .p-focus .p-player[data-action-composition] .p-dialogue>.p-chat-header{inline-size:100%}
 .p-focus .p-player[data-action-composition] .p-dialogue .p-chat{inline-size:100%;block-size:auto;max-block-size:28dvh;overflow:auto}
 .p-focus .p-player[data-action-composition] .p-dialogue>.p-dialogue-response{inline-size:100%;align-self:stretch}
 .p-focus .p-player[data-feedback][data-action-composition] .p-dialogue .p-chat{block-size:auto;max-block-size:40dvh}
}
@media(min-width:768px){
 .p-focus .p-player[data-action-composition] .p-composition .p-dialogue .p-chat{flex:0 0 auto;min-block-size:88px}
 .p-focus .p-player[data-feedback][data-action-composition] .p-composition .p-dialogue>.p-dialogue-response{display:none}
}
.p-stat-total{font-size:var(--h3);font-weight:500;white-space:nowrap}
/* Speaking is a model card followed by listen/record, on one axis. */
.p-focus .p-player[data-action-composition] .p-composition:has(>.p-speaking){max-inline-size:640px;margin-inline:auto}
.p-focus .p-player[data-action-composition] .p-composition>.p-speaking{display:flex;flex-direction:column;gap:var(--s4);inline-size:100%}
.p-focus .p-player[data-action-composition] .p-speaking>.p-study{inline-size:100%;align-self:stretch}
.p-focus .p-player[data-action-composition] .p-speaking>.p-response:has(.p-speak-tools:not(:has(>:not([hidden])))){display:none}
.p-focus .p-player[data-action-composition] .p-composition:has(>.p-result){gap:var(--s4);max-inline-size:960px;margin-inline:auto}
.p-focus .p-player[data-action-composition] .p-composition>.p-result{display:flex;flex-direction:column;inline-size:100%;block-size:auto;max-block-size:none;align-items:stretch;text-align:start;overflow:visible;gap:var(--s5)}
@media(min-width:900px){.p-focus .p-player[data-action-composition] .p-composition>.p-result{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:var(--s6)}}
.p-focus .p-player:has(>.p-stage) .p-speaking .p-question.p-speech-sentence{font-size:var(--h2);line-height:1.25}
.p-focus .p-player[data-action-composition] .p-speaking>.p-study,.p-focus .p-player[data-action-composition] .p-speaking .p-prompt-body{flex:none;block-size:auto;max-block-size:none;overflow:visible}

/* P-R10: long teaching cards scroll ABOVE the opaque action band. The band
   keeps its own row, so neither a grid nor the last preview row is covered. */
.p-focus .p-player[data-action-composition]>.p-stage:has(.p-card-composition[data-overflow]){padding-block-end:0;overflow:hidden}
.p-focus .p-player[data-action-composition] .p-card-composition[data-overflow]{block-size:100%;min-block-size:0;margin-block:0;gap:var(--s6)}
.p-focus .p-player[data-action-composition] .p-card-composition[data-overflow]>.p-card{flex:1 1 auto;min-block-size:0;overflow:auto;overscroll-behavior:contain;scroll-padding-block:var(--s4) var(--action-reserve)}
.p-focus .p-player[data-action-composition] .p-card-composition[data-overflow]>.p-actionbar{flex:none;inset-block-end:0;padding-block:var(--s3) max(var(--s4),env(safe-area-inset-bottom))}
.p-focus .p-player[data-action-composition] .p-card-composition[data-overflow] .p-passage-tools{block-size:auto;max-block-size:none;overflow:visible}

/* P-R10-4: audio owns a column; words and meanings share the other one. */
.p-focus .p-player[data-action-composition] .p-part-words>.p-part-word{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s2);align-items:start}
.p-part-word>:is(.p-bg-group,p,.p-part-review){grid-column:1;min-inline-size:0}
.p-part-word>.p-audio-controls{grid-column:2;grid-row:1/4;align-self:start}
@media(max-width:480px){.p-focus .p-player[data-action-composition] .p-recap-words.p-part-words{grid-template-columns:minmax(0,1fr)}}

/* P-R10: review content has one scroll owner; the Continue row never overlays
   answers. In particular the matching board is not a capped inner scroller. */
.p-review-body{display:flex;flex-direction:column;gap:var(--s4);min-block-size:0;min-inline-size:0;flex:none}
.p-focus .p-player[data-action-composition] .p-composition:has(>.p-review-body)[data-overflow]{block-size:100%;min-block-size:0;margin-block:0}
.p-focus .p-player[data-action-composition]>.p-stage:has(.p-review-body){padding-block-end:0;overflow:hidden}
.p-focus .p-player[data-action-composition] .p-composition[data-overflow]>.p-review-body{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;scroll-padding-block:var(--s4)}
.p-focus .p-player[data-action-composition] .p-composition:has(>.p-review-body)>.p-actionbar{flex:none;padding-block:var(--s3) max(var(--s4),env(safe-area-inset-bottom))}
.p-focus .p-player[data-feedback][data-action-composition] .p-review-body>.p-exercise{flex:none;block-size:auto;min-block-size:0;max-block-size:none;overflow:visible}
.p-focus .p-player[data-feedback][data-action-composition] .p-review-body .p-answers{max-block-size:none;overflow:visible}
.p-focus .p-player[data-action-composition] .p-review-body>.p-drawer-slot{flex:none;max-block-size:none;overflow:visible}
/* R13-1: large-text review starts with the verdict and pronunciation model.
   The learner's previous choice remains available below the correction. */
.p-player[data-large-text] .p-feedback{display:flex;flex-direction:column}
.p-player[data-large-text] .p-feedback .p-answer-review{display:flex;flex-direction:column;align-items:flex-start}
.p-player[data-large-text] .p-answer-review>.p-answer-label{order:-2}
.p-feedback .lookup-word{min-inline-size:44px}

/* R13: matching keeps its instruction outside the board/review scroll owner. */
.p-focus .p-player[data-action-composition]>.p-stage:has(>.p-matching-composition){overflow:hidden}
.p-focus .p-player[data-action-composition]>.p-stage>.p-composition.p-matching-composition{block-size:100%;min-block-size:0;gap:var(--s4)}
.p-focus .p-player[data-action-composition] .p-composition.p-matching-composition .p-matching{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
.p-focus .p-player[data-action-composition] .p-composition.p-matching-composition>.p-matching{flex:1 1 auto;min-block-size:0;overflow:auto;overscroll-behavior:contain}
.p-focus .p-player[data-action-composition] .p-matching-composition>.p-step-title{display:block;flex:none;inline-size:100%;max-inline-size:720px;margin:0;margin-inline:auto;font-size:var(--eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--textSecondary)}
.p-focus .p-player[data-action-composition] .p-matching-composition .p-matching>.p-study{display:none}
.p-focus .p-player[data-action-composition] .p-matching-composition .p-matching>.p-response{display:contents}
/* Every part break has a heading, score and one responsive full-width grid. */
.p-focus .p-player[data-action-composition] .p-card-composition>.p-message-card:has(.p-part-words){display:flex;flex-direction:column;gap:var(--s4);max-inline-size:none}
.p-focus .p-player[data-action-composition] .p-message-card:has(.p-part-words)>.p-card-detail{inline-size:100%}
.p-focus .p-player[data-action-composition] .p-message-card:has(.p-part-words)>.p-card-study{align-items:flex-start;text-align:start}
.p-focus .p-player[data-action-composition] .p-recap-words.p-part-words{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.p-focus .p-player[data-action-composition] .p-part-words>.p-part-word{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--s1) var(--s2);padding:var(--s3)}
.p-focus .p-player[data-action-composition] .p-part-word>.p-bg-group{grid-column:1/-1;grid-row:1;inline-size:100%}
.p-focus .p-player[data-action-composition] .p-part-word>p{grid-column:1/-1;grid-row:2}
.p-focus .p-player[data-action-composition] .p-part-word>.p-audio-controls{grid-column:1;grid-row:3}
.p-focus .p-player[data-action-composition] .p-part-word>.p-part-review{grid-column:2;grid-row:3;align-self:center}
.p-part-more{display:flex;align-items:center;justify-content:center;gap:var(--s1);min-block-size:24px;visibility:hidden}
.p-part-more>svg{inline-size:20px;block-size:20px;transform:rotate(90deg)}

/* P-R10 R9-15/16: the Bulgarian answer is the hero; selection is neutral. */
.p-focus .p-player:has(>.p-stage) .p-exercise .p-question.p-instruction-prompt{font-family:var(--font-body);font-size:var(--body);font-weight:400;line-height:1.4;color:var(--textPrimary);text-wrap:pretty}
@media(min-width:768px){.p-focus .p-player:has(>.p-stage) .p-exercise .p-question.p-instruction-prompt{font-size:var(--bg-text)}}
.p-focus .p-player .p-option>.p-selection-mark{position:relative;inline-size:20px;block-size:20px;border:2px solid currentColor;border-radius:50%}
.p-selection-mark::after{content:"";position:absolute;inset:4px;border-radius:50%;background:currentColor}

/* R10-9: whole labels, one reading gutter, and a thumb inside its track. */
.p-passage-controls>.p-row{display:flex;flex-wrap:wrap;gap:var(--s3)}
.p-passage-controls [data-passage-play]{flex:1 1 max-content;min-inline-size:0;padding-inline:var(--s3);white-space:nowrap;overflow-wrap:normal;word-break:normal}
.p-passage-controls [data-replay]{flex:none;padding-inline:var(--s3);white-space:nowrap;overflow-wrap:normal}
.p-passage-tools>.p-follow{padding-inline:0}
.p-passage-controls .p-scrubber::before,.p-passage-controls .p-scrub-fill{inset-inline:9px}

/* R10-11: one inset and a visible current personal-phrase choice. */
.p-display-options>.p-switch-row{padding-inline:0}
.p-gender-segments{display:flex;gap:var(--s1);padding:var(--s1);border:1px solid var(--border);border-radius:var(--r-button);background:var(--surfaceSunken)}
.p-gender-segments>.p-button{flex:1;min-inline-size:0;min-block-size:52px;padding:var(--s2);border-color:transparent;border-radius:var(--r-chip);font-size:var(--caption);overflow-wrap:normal;word-break:normal}
.p-gender-segments>.p-button[aria-checked=true]{background:var(--action);color:var(--onAction);border-color:var(--action)}

.p-focus .p-player[data-action-composition] .p-card-composition .p-card>.p-reading{flex:none;block-size:auto;max-block-size:none;overflow:visible}

/* R10-12..15: a named undo, a single correct typing answer, a short counter. */
.p-undo-toast .p-bg-group{display:inline;font-size:inherit}
.p-typing-review:not(:has(.p-typing-expected)){grid-template-columns:minmax(0,1fr)}
.p-retry-head>.p-counter{white-space:nowrap;max-inline-size:none}
.p-player:not([data-feedback=wrong]) .p-listen-slower{display:none}
.p-player:not([data-feedback=wrong]) .p-audio-controls.has-slower-hint [data-play=slow]{outline:none}

/* P-R10c P2-49: the option cell owns its text measure. Never silently split
   a localized word; the browser uses the explicit answer language to hyphenate. */
.p-option>:is(span:not(.p-key,.p-selection-mark),.p-bg-group){min-inline-size:0}
@container (inline-size < 170px){
 .p-focus :is(.p-player,.e-host) .p-option>:is(span:not(.p-key,.p-selection-mark),.p-bg-group){font-size:var(--secondary)}
}
/* P3-31: use the free stage height before making the transcript scroll. */
@media(min-width:768px){
 .p-focus .p-player[data-action-composition] .p-composition:has(>.p-dialogue){block-size:100%;min-block-size:0;margin-block:0;justify-content:safe center}
 .p-focus .p-player[data-action-composition] .p-composition>.p-dialogue{flex:0 1 auto;min-block-size:0;max-block-size:100%;overflow:hidden}
 .p-focus .p-player[data-action-composition] .p-composition .p-dialogue .p-chat{flex:0 1 auto;block-size:auto;min-block-size:88px;max-block-size:none}
 .p-focus .p-player[data-action-composition] .p-dialogue>.p-dialogue-response{flex:none}
}

.p-typing-review>.p-spelling-comparison{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.p-typing-review .p-spelling-hint{grid-column:1/-1}
@media(min-width:768px){.p-typing-review>.p-spelling-comparison{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Bulgarian options use the same hyphenation policy as translated answers;
   emergency anywhere wrapping belongs to the separate display-word surface. */
.p-option .living-word[data-bg],
.p-player:has(>.p-stage) .p-option .living-word [data-w],
.e-host .p-option .living-word [data-w]{overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:8 4 3}

/* R11-1: the reward and its actions share the taller column's flow. Overflow
   gets two rows: the entire result scrolls above a full-width opaque band. */
.p-focus .p-player[data-action-composition] .p-composition.p-result-composition{gap:var(--s6)}
.p-focus .p-player[data-action-composition]>.p-stage:has(.p-result-composition[data-overflow]){padding-block-end:0;overflow:hidden}
.p-focus .p-player[data-action-composition] .p-result-composition[data-overflow]{block-size:100%;min-block-size:0;margin-block:0}
.p-focus .p-player[data-action-composition] .p-result-composition[data-overflow]>.p-result{flex:1 1 auto;min-block-size:0;overflow:auto;overscroll-behavior:contain;padding-block-end:var(--action-reserve);scroll-padding-block:var(--s4) var(--action-reserve)}
.p-focus .p-player[data-action-composition] .p-result-composition[data-overflow]>.p-actionbar{flex:none;padding-block:var(--s3) max(var(--s4),env(safe-area-inset-bottom))}
@media(min-width:768px){.p-focus .p-player[data-action-composition] .p-composition>.p-result{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:var(--s6)}}

/* R11-2: the task is primary text; only its instruction is a quiet eyebrow. */
.p-focus .p-player[data-action-composition] .p-composition .p-exercise .p-step-title{font-size:var(--eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--textSecondary)}

/* R11-6/16: a word and its gloss form one RTL-aware block. Audio follows that
   block, rather than inheriting the Bulgarian span's LTR layout direction. */
.p-feedback .p-answer-review{display:grid;grid-template-columns:minmax(0,max-content) auto;justify-content:start;gap:var(--s1) var(--s3)}
.p-answer-review>.p-answer-label{grid-column:1/-1}
.p-answer-copy{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);min-inline-size:0;text-align:start}
.p-answer-review>.p-audio-controls{grid-column:2;grid-row:2;align-self:center;margin:0}
.p-answer-review:not(:has(>.p-answer-label))>.p-audio-controls{grid-row:1}

/* R11-4/17: text zoom grows the Aa control; dialogue columns share one inset. */
.p-focus .p-player .p-head .p-display{inline-size:auto;block-size:auto;min-inline-size:44px;min-block-size:44px;padding:var(--s2);flex:none}
.p-focus .p-player[data-action-composition] .p-dialogue>.p-dialogue-response{padding-inline:0}
.p-focus .p-player[data-action-composition] .p-dialogue-response>.p-dialogue-options{padding-inline:0}

/* P-R11c: pair text owns the full cell; the verdict is a corner annotation.
   Bulgarian has no browser hyphenation dictionary: fit whole words instead. */
.p-focus .p-player .p-match>:is(.p-bg-group,.p-match-meaning){display:block;flex:1;min-inline-size:0}
.p-focus .p-player .p-match>.p-bg-group{font-size:var(--match-font,var(--body))}
.p-focus .p-player .p-match.is-matched>.p-match-mark{inline-size:12px;block-size:12px}
@container (inline-size < 170px){
 .p-focus .p-player .p-match>.p-match-meaning{font-size:var(--secondary)}
 .p-focus .p-player .p-match>.p-bg-group{font-size:var(--match-font,var(--secondary))}
}
/* Review and Continue share the answer column even when the review body scrolls. */
.p-focus .p-player[data-action-composition] .p-composition:has(>.p-review-body){gap:var(--s2)}
@media(min-width:900px){
 .p-focus .p-player[data-action-composition] .p-review-body>.p-drawer-slot{inline-size:min(100%,var(--exercise-action-width,480px));margin-inline-start:var(--exercise-action-start,0px);align-self:start}
}
/* Native-mode definitions may wrap, while each Bulgarian term stays whole. */
.p-focus .p-player:lang(bg) .p-match-board{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s3)}

/* P-R12-1/2: sentences are reading text; review grows down from a stable stage. */
.p-focus .p-player[data-action-composition] .p-composition{margin-block:0}
.p-focus .p-player[data-action-composition] .p-composition:has(>.p-dialogue){justify-content:start}
.p-focus .p-player:has(>.p-stage) .p-exercise .p-question.p-prompt-medium{font-size:calc(var(--h2)*7/6);line-height:1.2}
.p-focus .p-player:has(>.p-stage) .p-exercise .p-question.p-prompt-sentence{font-family:var(--font-body);font-size:calc(var(--h3)*1.1);font-weight:600;line-height:1.3;text-wrap:pretty}
@media(min-width:768px){
 .p-focus .p-player:has(>.p-stage) .p-exercise .p-question.p-prompt-medium{font-size:var(--h1)}
 .p-focus .p-player:has(>.p-stage) .p-exercise .p-question.p-prompt-sentence{font-size:calc(var(--h2)*4/3)}
}

/* P-R12 result: one scroll owner, reward before review and a clear scroll edge. */
.p-focus .p-player[data-action-composition] .p-composition>.p-result{grid-auto-rows:max-content}
.p-focus .p-player[data-action-composition] .p-result-composition[data-overflow]>.p-result{padding-block-end:var(--action-reserve)}
.p-result-explanation{display:flex;align-items:center;justify-content:space-between;gap:var(--s1);font-size:var(--caption);line-height:1.3;text-align:start}
.p-result-explanation>span{min-inline-size:0}
.p-result-explanation>.p-result-explainer{flex:none;min-inline-size:44px}
.p-result-explainer{display:inline-flex;align-items:center;gap:var(--s1);min-block-size:44px;padding:0;border:0;background:transparent;color:var(--textPrimary);font:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:.18em;cursor:pointer}
.p-result-explainer>svg{inline-size:20px;block-size:20px;flex:none}
.p-result-explainer:hover{text-decoration-color:currentColor}
.p-result-explainer:active{opacity:.7}
.p-result-explainer:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.p-scroll-cue{--fade-top:0px;--fade-bottom:0px;mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-top),#000 calc(100% - var(--fade-bottom)),transparent)}
.p-scroll-cue[data-more-above]{--fade-top:24px}
.p-scroll-cue[data-more-below]{--fade-bottom:24px}
@media(prefers-reduced-motion:reduce){.p-result-explainer:active{transform:none}}

/* P-R12-3/9: portrait tablet keeps phrases and the action on one broad axis. */
@media(min-width:768px) and (max-width:899px){
 .p-focus .p-player[data-action-composition] .p-card-composition>.p-message-card:has(.p-part-words){grid-template-columns:minmax(0,1fr)}
 .p-focus .p-player[data-action-composition] .p-composition .p-study>.p-step-title{text-align:center}
}

/* P-R12-4: large text keeps the heading intact and gives examples their own row. */
.p-focus .p-player .p-new-word>.p-eyebrow{flex-shrink:0;block-size:auto;line-height:1.4}
.p-focus .p-player[data-large-text] .p-new-word>.p-eyebrow{padding-inline:0 var(--s8);justify-content:start;text-align:start}
.p-focus .p-player[data-large-text] .p-new-word-example>.p-bg-group{grid-template-columns:minmax(0,1fr)}
.p-focus .p-player .p-audio-controls>.audio-control.audio-button>svg:not(.p-voice-ring){inline-size:1.5em;block-size:1.5em}
.p-focus .p-player[data-action-composition] .p-card-composition[data-overflow]>.p-card{scroll-padding-block-start:var(--fit-head-height,var(--s4))}
/* R13: overflow belongs to the word card, never to a collapsed example box. */
.p-focus .p-player[data-action-composition] .p-card-composition>.p-new-word>*{flex-shrink:0}
.p-focus .p-player .p-audio-controls>.audio-control.audio-button:not(.slow)>svg:not(.p-voice-ring){inline-size:55%;block-size:55%}
@media(min-width:760px){.menu-panel:has(.p-display-options){max-block-size:calc(100dvh - 32px)}}

/* P-R12-5: review content is ink even when the exam stylesheet is also loaded. */
.p-feedback .p-answer-review{color:var(--textPrimary)}
.p-feedback .p-answer-review .p-answer-meaning{color:var(--textSecondary)}

/* P-R12 / R7-19: translation stays the same outlined control in both states. */
.p-focus .p-player [data-chat-translation].p-button[aria-pressed]{border:1.5px solid color-mix(in srgb,var(--textPrimary) 70%,transparent);border-radius:var(--r-button);background:transparent;color:var(--textPrimary);text-decoration:none}
@media(hover:hover) and (pointer:fine){.p-focus .p-player [data-chat-translation].p-button:hover{background:var(--surfaceSunken);border-color:var(--action)}}

/* Keep the learned-word definition above the phone action band at 360 x 640. */
@media(max-width:767px){.p-focus .p-player:has(>.p-stage) .p-result-summary .p-result-main{gap:var(--s3)}}

/* P-R12b: a dialogue keeps one bounded transcript, rather than growing the
   whole stage until the next reply sits below the screen. Check grows its
   verdict below that same transcript; the conversation header stays anchored. */
.p-focus .p-player[data-action-composition] .p-composition:has(.p-dialogue){max-inline-size:680px;margin-inline:auto;block-size:100%;min-block-size:0;max-block-size:100%;margin-block:0;justify-content:start}
.p-focus .p-player[data-action-composition] .p-composition:has(.p-dialogue)>.p-review-body{flex:1 1 auto;min-block-size:0;overflow:hidden}
.p-focus .p-player[data-action-composition] .p-composition .p-dialogue{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0;max-block-size:100%;overflow:hidden}
.p-focus .p-player[data-action-composition] .p-composition .p-dialogue .p-chat{flex:0 1 auto;min-block-size:88px;block-size:auto;max-block-size:none;overflow:auto;overscroll-behavior:contain}
.p-focus .p-player[data-action-composition] .p-dialogue>:is(.p-step-title,.p-chat-header,.p-dialogue-response){flex:none}
.p-focus .p-player[data-action-composition] .p-review-body>.p-exercise.p-dialogue{flex:1 1 auto;min-block-size:0}
@media(max-width:767px) and (max-height:700px){.p-focus .p-player:has(>.p-stage) .p-result-summary .p-result-main{gap:var(--s2)}}

/* Blank and answer occupy the same inline grid cell before and after Check. */
.p-blank-slot{display:inline-grid;vertical-align:baseline;grid-template-areas:"blank"}
.p-blank-slot>span{grid-area:blank}
.p-blank-model,.p-blank-slot.is-revealed>.p-blank-mark{visibility:hidden}
.p-blank-mark{text-align:center}
.p-blank-slot.is-revealed>.p-blank-model{visibility:visible}
/* Selection and verdict share the same label width, even at a wrap boundary. */
.p-focus .p-player .p-choice .p-answers:not(.p-image-options)>.p-option{padding:var(--s3)}
.p-focus .p-player .p-option:is(.is-correct,.is-wrong)>.p-selection-mark{display:block;visibility:hidden}

/* A short phone still shows the current speaker when an authored dialogue
   error explanation appears. Compact reply cards and full-width bubbles
   leave room for the complete question without shrinking the tap targets. */
@media(max-width:767px) and (max-height:700px){
 .p-focus .p-player[data-action-composition] .p-composition .p-dialogue{gap:var(--s2)}
 .p-focus .p-player[data-action-composition] .p-dialogue>.p-dialogue-response{gap:var(--s2)}
 .p-focus .p-player[data-action-composition] .p-dialogue-options>.p-option{padding:var(--s2)}
 .p-focus .p-player[data-action-composition] .p-chat>.p-bubble{max-inline-size:100%;padding:var(--s2)}
 .p-focus .p-player[data-action-composition] .p-dialogue-note{font-size:var(--secondary)}
}

/* Long translated completion/lesson titles must not hide the short learned
   definition on a 360 x 640 phone. Keep the reward first and the text readable. */
@media(max-width:767px) and (max-height:700px){
 .p-focus .p-player:has(>.p-stage) .p-result-summary .p-result-main{gap:var(--s1)}
 .p-focus .p-player .p-result-summary .p-result-lesson{font-size:var(--body)}
 .p-focus .p-player .p-result-reward .p-earned-stars svg{inline-size:var(--s6);block-size:var(--s6)}
 .p-focus .p-player .p-goal-inline>.martenitsa-cord{inline-size:var(--s8);block-size:var(--s8)}
}

/* The same daily-goal component as Today, with a readable value at 64 px. */
.p-goal-inline .cord-label{font-size:var(--goal-svg-label);font-weight:700}

/* R15-1: meaning is the answer; its Bulgarian model follows with one replay. */
.p-feedback .p-meaning-answer>.p-answer-text{grid-column:1/-1}
.p-feedback .p-meaning-answer>.p-audio-controls{grid-row:2}
.p-feedback .p-answer-learner{margin:0;font-size:var(--secondary);line-height:1.35;overflow-wrap:break-word}
.p-feedback .p-answer-learner .p-answer-label{display:inline}

/* R15-6: one centred exam invitation, with its action in the same block. */
.e-host[data-screen=intro] .p-exam-words{display:flex;flex-direction:column;gap:var(--s2)}
.e-host[data-screen=intro] .p-exam-words .p-word-chips{gap:var(--s2)}
.e-host[data-screen=intro] .p-exam-words .p-bg-group{font-size:var(--body);padding:var(--s1) var(--s2)}
@media(min-width:760px){
 body.p-focus .e-host[data-screen=intro]{grid-template-rows:auto minmax(0,1fr)}
 .e-host[data-screen=intro]>.p-exam-intro-stage{display:flex;flex-direction:column;justify-content:safe center;align-items:center}
 .e-host[data-screen=intro] .e-intro{display:flex;flex-direction:column;gap:var(--s4);inline-size:100%;max-inline-size:640px}
 .e-host[data-screen=intro] .e-intro>.e-actions{inline-size:100%;max-inline-size:480px;align-self:center;margin-block-start:var(--s2)}
 .e-host[data-screen=intro] .e-intro>.e-actions>.p-button{min-inline-size:0}
 .e-host[data-screen=intro]>.e-actionbar[hidden]{display:none}
}


.p-feedback-note>.p-bg-group{display:inline;font-size:inherit}

/* W-R15-8: transport glyphs scale with text inside the existing hit circle. */
.p-player .audio-control.p-audio>svg:not(.p-voice-ring){inline-size:min(1.846em,calc(var(--audio-control,44px) - 8px));block-size:min(1.846em,calc(var(--audio-control,44px) - 8px))}

/* Fixed geometry in a 120-unit viewBox; external dimensions reserve layout. */
.martenitsa-cord{display:inline-block;inline-size:var(--cord-size,64px);block-size:var(--cord-size,64px);flex:none;overflow:visible;vertical-align:middle;isolation:isolate;--cord-white:var(--cordWhite,#fff);--cord-edge:var(--cordEdge,#DAD8D3);--cord-track:var(--surfaceSunken,#ECEBE7)}
:root[data-theme=dark] .martenitsa-cord{--cord-white:var(--cordWhite,#E9E7E2)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .martenitsa-cord{--cord-white:var(--cordWhite,#E9E7E2)}}
.cord-red{stroke:var(--cord-red-color,var(--brand,#C8302C))}.cord-white{stroke:var(--cord-white)}.cord-edge{stroke:var(--cord-edge)}.cord-track{stroke:var(--cord-track)}
.cord-red-fill{fill:var(--cord-red-color,var(--brand,#C8302C))}.cord-white-fill{fill:var(--cord-white)}.cord-edge-fill{fill:var(--cord-edge)}
.cord-plane,.cord-moving{transform-box:view-box;transform-origin:60px 60px}.cord-knot{transform-box:view-box}

.cord-label{font:700 var(--caption)/1 var(--font-body);fill:var(--textPrimary)}

/* P-RING: centre SVG text in the circle, never an HTML font line box.
   SVG central baseline works before text-box-trim (including older Safari).
   Percentage coordinates use CSS pixels; cord geometry uses its 120-unit grid. */
.ring-number{position:absolute;inset:0;display:block;inline-size:100%;block-size:100%;overflow:visible;font:inherit;pointer-events:none}
.ring-number>text,.cord-label{text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums;letter-spacing:0;direction:ltr;fill:currentColor}
.cord-label{x:60;y:60;fill:var(--textPrimary)}
:is(.lesson-number,.today-goal-value,.rd7-ring>span){position:relative}
.lesson-number:has(.ring-number){min-inline-size:2em;min-block-size:2em}
.today-goal-value.ring-number{position:absolute;max-inline-size:none}
.profile-goal-value{inset:0;gap:0}
.profile-goal-value strong{position:absolute;inset:0;display:block}
.profile-goal-value>span{position:absolute;inset-inline:0;inset-block-start:calc(50% + var(--numeric) * .6 + var(--s1))}
.large-text .profile-goal-ring{inline-size:180px;block-size:180px}
.large-text .profile-goal-value{position:absolute;inset:0;gap:0}
/* The deck's track rotates; its number does not. */
.rd7-ring>span{display:block;inline-size:100%;block-size:100%}
.rd7-ring .ring-number{transform:none;inline-size:100%;block-size:100%}

/* Enlarged captions sit below the artwork; the number stays at its centre. */
.large-text .profile-goal-ring{margin-block-end:calc(var(--caption) * 1.2 + var(--s2))}
.large-text .profile-goal-value>span{inset-block-start:calc(100% + var(--s2))}

/* Enlarged goal captions wrap within their own card on tablets. */
.large-text .hero-goal-link strong{white-space:normal}

/* L9 standalone feature surfaces. Player controls retain P's shared interaction states. */
.features-ui{max-width:1240px;margin-inline:auto;padding:var(--s6);min-height:100dvh}.features-ui *{min-width:0}
.f-header{display:grid;grid-template-columns:1fr;gap:var(--s6);margin-block-end:var(--s6)}
.f-brand{display:flex;align-items:center;gap:var(--s3);font-weight:700}.f-brand img{border-radius:var(--r-chip)}
.f-title{display:grid;gap:var(--s3)}.f-title>.p-muted{max-width:70ch}.f-title h1{margin:0}
.f-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.f-reader-grid,.f-drill-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.48fr);gap:var(--s6);align-items:start}
.f-reader-main{min-height:560px}.f-saved{position:sticky;inset-block-start:var(--s6)}
.f-text-input{resize:vertical;width:100%;min-height:176px;padding:var(--s4);border:1.5px solid var(--border);border-radius:var(--r-button);background:var(--surfaceSunken);color:var(--textPrimary);font:inherit;font-size:var(--bg-text);line-height:1.5;transition:border-color var(--t-hover),box-shadow var(--t-hover)}
.f-text-input:focus-visible{border-color:var(--action);box-shadow:0 0 0 3px color-mix(in srgb,var(--action) 10%,transparent);outline:2px solid var(--action);outline-offset:2px}
.f-reader-actions{display:flex;gap:var(--s3);flex-wrap:wrap}.f-reader-actions>*{flex:1}
.f-coverage{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border:1px solid var(--border);background:var(--surfaceSunken);border-radius:var(--r-tile);font-variant-numeric:tabular-nums}.f-coverage strong{font-family:var(--font-display);font-size:var(--numeric);line-height:1.2}
.f-passage{white-space:pre-wrap;font-size:var(--bg-text);line-height:2.1;overflow-wrap:anywhere;unicode-bidi:isolate}
.f-token{display:inline;border:0;border-radius:4px;padding:4px 0;background:transparent;color:var(--textPrimary);font:inherit;cursor:pointer;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:var(--textSecondary);text-underline-offset:.28em;transition:background var(--t-hover),color var(--t-hover)}
.f-token[data-state=learning]{text-decoration-style:solid;text-decoration-color:var(--familiar)}.f-token[data-state=familiar]{text-decoration-style:double;text-decoration-color:var(--familiar)}.f-token[data-state=known]{text-decoration-style:solid;text-decoration-color:var(--correct)}
.f-token:hover{background:var(--surfaceSunken);text-decoration-thickness:2px}.f-token:active{background:color-mix(in srgb,var(--action) 14%,var(--surface))}.f-token:disabled{opacity:.4}
.f-text-row{display:flex;gap:var(--s2);align-items:center}.f-text-open{flex:1;text-align:start;justify-content:start}.f-text-open>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.f-forms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);margin:0}.f-forms dd{margin:0;font-size:var(--bg-text)}
.f-senses{display:flex;flex-wrap:wrap;gap:var(--s2)}.f-senses .p-button{display:flex;flex-direction:column}.f-senses [aria-pressed=true]{background:var(--action);color:var(--onAction)}
.f-drill{min-height:min(680px,calc(100dvh - 80px))}.f-stage{display:flex;flex:1;min-height:320px;flex-direction:column;gap:var(--s4)}.f-stage>.p-exercise{flex:1}.f-context{gap:var(--s6)}
.f-actionbar{margin-inline:calc(-1 * var(--s6));margin-block-end:calc(-1 * var(--s6));border-end-start-radius:var(--r-card);border-end-end-radius:var(--r-card);background:var(--surface);padding:var(--s4) var(--s6);overflow:visible;max-height:none;position:sticky;inset-block-end:0;z-index:2}
.f-actionbar .p-feedback{max-height:40dvh;overflow:auto}.f-modes,.f-levels{display:flex;flex-wrap:wrap;gap:var(--s2)}.f-levels{margin-block-end:var(--s6)}.f-modes>.p-button,.f-levels>.p-button{min-height:44px;font-size:var(--secondary);flex:1;padding:var(--s2) var(--s3)}
.f-modes [aria-pressed=true],.f-levels [aria-pressed=true]{background:var(--action);color:var(--onAction);border-color:var(--action)}
.f-stress-word{display:flex;flex-wrap:wrap;align-items:start;justify-content:center;gap:var(--s1);padding-block:var(--s6);font-family:var(--font-display);font-size:var(--hero-word);line-height:1.3;direction:ltr}
.f-stress-word>.p-button{font:inherit;min-width:44px;min-height:64px;padding:var(--s1) var(--s2);display:flex;flex-direction:column;gap:var(--s1)}.f-stress-word .p-key{font-family:var(--font-body);font-size:var(--caption);line-height:1.2;display:block}.f-consonant{padding-block:var(--s1)}
.f-stress-word .is-selected{box-shadow:inset 0 0 0 2px var(--action);border-color:var(--action)}.f-stress-word .is-correct{border-color:var(--correct);color:var(--correct);opacity:1}.f-stress-word .is-wrong{border-color:var(--wrong);color:var(--wrong);opacity:1}
.f-shortcuts{display:flex;flex-wrap:wrap;gap:var(--s3)}.f-shortcuts>span{display:flex;align-items:center;gap:var(--s1)}.features-ui kbd{border:1px solid var(--border);border-radius:4px;padding:var(--s1) var(--s2);font-family:var(--font-body);font-size:var(--caption);font-weight:600}
.f-attribution{display:flex;flex-wrap:wrap;gap:var(--s3);margin-block-start:var(--s6);padding-block:var(--s6);border-block-start:1px solid var(--border)}.f-attribution>p{width:100%}.f-attribution>a{font-size:var(--caption);overflow-wrap:anywhere}.f-source{line-height:1.5;font-size:var(--caption)}
.f-enroll-words{display:flex;flex-wrap:wrap;gap:var(--s3)}.f-enroll-words>.p-bg-group{padding:var(--s3);border:1px solid var(--border);border-radius:var(--r-chip)}.f-enroll,.f-finished{max-width:100%}.f-enroll>.p-primary{align-self:start}
.f-audio-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}.f-audio-credit{max-width:40ch}.f-stress-tip{display:grid;gap:var(--s4)}.f-notice{padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-tile);margin-block:var(--s4)!important}
.f-dev-nav{max-width:1240px;margin-inline:auto;padding:var(--s4) var(--s6);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}.f-dev-nav a,.f-dev-nav button{font-size:var(--caption);min-height:44px;padding:var(--s2) var(--s3)}.f-dev-nav [aria-current=page]{background:var(--action);color:var(--onAction)}
[lang=ar].features-ui,[lang=he].features-ui{font-family:var(--font-system)}.features-ui [lang=bg]{font-family:var(--font-body);font-feature-settings:'locl' 1}
@media(max-width:759px){.features-ui{padding:var(--s5)}.f-header{gap:var(--s4)}.f-reader-grid,.f-drill-grid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}.f-card{padding:var(--s4)}.f-saved{position:static}.f-reader-main{min-height:0}.f-drill{min-height:calc(100dvh - 168px)}.f-stage{min-height:280px}.f-actionbar{margin-inline:calc(-1 * var(--s4));margin-block-end:calc(-1 * var(--s4));padding:var(--s4);padding-block-end:max(var(--s4),env(safe-area-inset-bottom))}.f-context{gap:var(--s4)}.f-dev-nav{padding:var(--s3) var(--s5)}.f-reader-actions>.p-button{flex-basis:100%}.f-passage{line-height:2.4}.f-text-input{min-height:144px}.f-shortcuts{display:none}.f-stress-word{font-size:var(--numeric)}}
@media(prefers-reduced-motion:reduce){.features-ui *{animation:none!important;transition:none!important}.features-ui :is(button,a):hover,.features-ui :is(button,a):active{transform:none!important}}
.f-close{margin-inline-start:auto}.features-ui :is(button,a):focus-visible{outline:2px solid var(--action);outline-offset:2px}
[lang=ar].features-ui :is(h1,h2,h3),[lang=he].features-ui :is(h1,h2,h3){font-family:var(--font-system)}
.f-inline-tip{padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-tile);background:var(--surfaceSunken)}.f-inline-tip>.p-button{align-self:start}
.features-ui .p-hero-word,.features-ui .f-stress-word{font-family:var(--font-display)}
@media(max-width:759px){.f-dev-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.f-dev-nav>*{flex-shrink:0}.f-drill .f-stage{min-height:240px}.f-brand{min-height:44px}}
/* Keep feedback/actions in flow: a bottom-sticky bar can cover tall answer lists. */
.f-actionbar{position:static}.features-ui .p-question{font-size:var(--bg-text);font-family:var(--font-body);font-weight:600}
@media(max-width:759px){.f-drill{min-height:calc(100dvh - 240px)}}
.f-lookup-dialog{display:flex;flex-direction:column}.f-lookup-dialog .p-sheet-head{flex-shrink:0}.f-lookup-dialog .p-sheet-body{flex:1 1 auto;min-height:0;max-height:none}.f-lookup-action{flex-shrink:0;padding:var(--s4);border-block-start:1px solid var(--border)}.f-lookup-action>.p-button{width:100%}
.f-lookup-dialog:lang(ar),.f-lookup-dialog:lang(he),.f-lookup-dialog:lang(ar) :is(h1,h2,h3),.f-lookup-dialog:lang(he) :is(h1,h2,h3){font-family:var(--font-system)}
.f-stress-word{font-weight:900}
.f-coverage{flex-wrap:wrap}.f-coverage strong{flex:0 0 auto}.f-coverage>span{flex:1 1 12ch}.features-ui .living-word [data-w],.f-lookup .living-word [data-w]{max-inline-size:100%;overflow-wrap:anywhere}
.f-levels>.p-button{flex:1 0 3em;white-space:nowrap}
body>.f-notice{position:fixed;inset-inline:var(--s5);inset-block-end:var(--s5);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);max-width:60ch;margin-inline:auto;background:var(--surfaceElevated);box-shadow:var(--lift-2)}
/* A single graphite-tinted surface travels between the mode/level controls. */
.f-selection{position:relative;isolation:isolate}.f-selection-surface{position:absolute;pointer-events:none;z-index:-1;background:color-mix(in srgb,var(--action) 12%,var(--surface));border-radius:var(--r-button)}
.f-selection [aria-pressed=true]{background:color-mix(in srgb,var(--action) 12%,var(--surface));color:var(--textPrimary);border-color:var(--action)}.f-selection.has-surface [aria-pressed=true]{background:transparent}
/* P's focus player now floats its drawer over a reserved action row. These
   standalone cards flow in the document; keep the borrowed drawer in that flow. */
.f-actionbar{block-size:auto;max-height:none;overflow:visible}
.f-actionbar .p-feedback{position:static;inset:auto;max-block-size:40dvh;border-radius:var(--r-option);order:-1}
.f-actionbar .p-feedback{animation:f-feedback-reveal var(--t-enter) var(--ease-out)}
@keyframes f-feedback-reveal{from{opacity:0}to{opacity:1}}

.f-shortcut-list{display:grid;gap:var(--s2);margin:0}.f-shortcut-list>div{display:grid;grid-template-columns:minmax(7em,1fr) 2fr;align-items:center;gap:var(--s4);padding:var(--s3);border-radius:var(--r-chip);background:var(--surfaceSunken)}.f-shortcut-list dt{font:600 var(--caption)/1.5 var(--font-body);direction:ltr}.f-shortcut-list dd{margin:0;font-size:var(--secondary)}.f-keyboard{min-inline-size:44px;min-block-size:44px}.f-keyboard svg{inline-size:24px;block-size:24px}.f-shortcut-demo{padding:var(--s5)}
@media(max-width:759px){.pr-session .f-keyboard{display:none}}
/* Primary links retain their action contrast against P's generic anchor rule. */
.features-ui a.p-primary{color:var(--onAction)}
/* R1-L11: four ordered tiles remain one LTR row even at 320px. */
.f-first-tiles{container-type:inline-size;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.f-first-tiles>.p-button{min-block-size:110px;flex-direction:column;padding:var(--s2);border-radius:var(--r-option);white-space:normal}
.f-first-letter{font:900 min(calc(var(--letter) * 13 / 24),17cqi)/1.1 var(--font-display)}.f-first-latin{font-weight:600}
.f-first-tiles>.is-revealed{border:2px solid var(--correct);background:var(--correctSoft)}.f-first-latin{color:var(--textSecondary)}.is-revealed .f-first-latin{color:var(--correct)}
.f-first-result{display:grid;gap:var(--s4)}.f-first-result:empty{display:none}.f-first-result>.p-bg-group{font-size:var(--hero-word)}
.features-ui :is(.p-button,h1,h2,p){overflow-wrap:anywhere}.features-ui .p-button{white-space:normal}
.f-plan-summary{display:grid;gap:var(--s3);padding:var(--s4);border-radius:var(--r-tile);background:var(--surfaceSunken)}
.f-plan-summary .p-stat{font-size:var(--numeric);font-family:var(--font-display);line-height:1.2}
.f-tracing{display:block;inline-size:100%;max-inline-size:600px;block-size:auto;aspect-ratio:3/2;margin-inline:auto;background:var(--surfaceSunken);border:1px solid var(--border);border-radius:var(--r-card);touch-action:none;cursor:crosshair}
.f-tracing:focus-visible{outline:2px solid var(--action);outline-offset:2px}

.f-trace-result{display:flex;align-items:center;gap:var(--s2)}.f-trace-result svg{inline-size:24px;block-size:24px}.f-trace-result[data-trace-pass=true] svg path{stroke-dasharray:1;animation:f-trace-check 220ms var(--ease-out)}
@keyframes f-trace-check{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.f-trace-result svg path{animation:none!important}}
/* Intrinsic flex-button width must not expand a 200% phone viewport. */
.features-ui .p-button{max-inline-size:100%}
/* At large text sizes the two drill modes stack rather than splitting a word. */
.f-modes>.p-button,.f-native-modes>.p-button{flex:1 1 10em}

/* W's inline hero/settings/letter-detail mounts keep their own shell and H1. */
.features-ui.f-inline{min-block-size:0;min-height:0;padding:0;max-inline-size:none;margin:0}
/* Reduced motion still has a distinct pressed colour, including secondary controls. */
.features-ui .p-button:not(.p-primary):active:not(:disabled){background:color-mix(in srgb,var(--action) 14%,var(--surface));color:var(--textPrimary)}
.features-ui .p-primary:active:not(:disabled){background:var(--actionPressed)}
.features-ui .f-first-tiles>.is-revealed:hover:not(:disabled){background:color-mix(in srgb,var(--correct) 10%,var(--correctSoft))}
.features-ui .f-first-tiles>.is-revealed:active:not(:disabled){background:var(--correctSoft);opacity:.8}
/* Wrap the key/description pair before either column can leave a narrow sheet. */
.f-shortcut-list>div{display:flex;flex-wrap:wrap;align-items:start;gap:var(--s2) var(--s4)}
.f-shortcut-list dt{flex:0 0 auto;max-inline-size:100%;white-space:normal;overflow-wrap:anywhere}
.f-shortcut-list dd{flex:1 1 10em;min-inline-size:0;overflow-wrap:break-word}

/* Physical keyboard legends do not belong on touch-only devices. */
@media(hover:none){.features-ui .f-shortcuts{display:none}}
/* Feature min-width resets must not shrink the shared audio hit target. */
.features-ui .p-audio{min-inline-size:44px}
/* The reader input answers pointer hover as well as keyboard focus. */
.f-text-input:not(:disabled):hover{border-color:var(--action)}

@media(hover:hover) and (pointer:fine){.f-text-input:not(:disabled):hover{background:color-mix(in srgb,var(--action) 6%,var(--surface));border-color:var(--action)}}

/* R3-P2-19: preserve the number and its unit while the label can wrap. */
.f-plan-summary .f-plan-minutes{white-space:nowrap;unicode-bidi:isolate}
.f-plan-summary .p-stat{font-size:var(--plan-required)}