/* Standalone L8. Host loads tokens.css + player.css before this file. */
.pr-hub,.pr-independent,.pr-listen{box-sizing:border-box;color:var(--textPrimary);font:var(--body)/1.45 var(--font-body);max-inline-size:1200px;margin-inline:auto;padding:var(--s6);min-inline-size:0}
:lang(ar) .pr-hub,:lang(ar) .pr-independent,:lang(ar) .pr-listen,:lang(he) .pr-hub{font-family:var(--font-system)}
.pr-hub *,.pr-independent *,.pr-listen *{box-sizing:border-box;min-inline-size:0}
.pr-hub h1,.pr-independent h1,.pr-listen h1{font:900 var(--h1)/1.12 var(--font-display);text-wrap:balance;margin:0}
.pr-hub h2,.pr-independent h2{font-size:var(--h2);margin:0;text-wrap:balance}.pr-hub h3{font-size:var(--secondary);margin:0}.pr-hub p,.pr-independent p,.pr-listen p{margin:0;text-wrap:pretty}
.pr-hub-head{margin-block-end:var(--s6)}.pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--s3)}
.pr-tile{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);min-block-size:144px;inline-size:100%;height:auto;border:1px solid var(--border);border-radius:var(--r-tile);background:var(--surface);text-align:start;box-shadow:none;white-space:normal;transition:transform var(--t-hover) var(--ease-out),box-shadow var(--t-hover),border-color var(--t-hover),background var(--t-hover)}
.pr-tile>svg{inline-size:24px;block-size:24px;flex:none}.pr-tile>svg:last-child{inline-size:16px;transition:transform var(--t-hover)}:dir(rtl) .pr-tile>svg:last-child{rotate:180deg}
.pr-tile-text{display:grid;gap:var(--s2);flex:1}.pr-tile-text strong{font-size:var(--card-title)}.pr-tile-text .p-muted{font-size:var(--caption);font-weight:400;line-height:1.4}
.pr-badge{border-radius:var(--r-chip);padding:var(--s1) var(--s2);font-size:var(--caption);font-variant-numeric:tabular-nums;background:var(--surfaceSunken)}.pr-badge.is-due{background:var(--action);color:var(--onAction)}
.pr-panel{padding:var(--s6);border:1px solid var(--border);border-radius:var(--r-tile);background:var(--surface);display:grid;gap:var(--s4);margin-block-start:var(--s6)}
.pr-quiz,.pr-listen-card{max-inline-size:100%}.pr-segment{position:relative;isolation:isolate;display:flex;flex-wrap:wrap;gap:0;padding:var(--s1);background:var(--surfaceSunken);border-radius:var(--r-tile);inline-size:100%;border:1px solid var(--border)}
.pr-segment-indicator{position:absolute;inset:0 auto auto 0;background:var(--action);border-radius:var(--r-chip);z-index:-1;pointer-events:none;transition:transform 220ms var(--spring,var(--ease-out))}
.pr-segment-option.p-button{flex:1 1 auto;border:0;background:transparent;box-shadow:none;min-block-size:44px;height:auto;max-inline-size:100%;padding:var(--s2) var(--s3);white-space:normal;font-size:var(--secondary);border-radius:var(--r-chip);color:var(--textPrimary);text-align:center;transform:none}
.pr-segment-option[aria-checked=true]{color:var(--onAction)}.pr-segment-option.p-button:hover{background:color-mix(in srgb,var(--action) 8%,transparent)}.pr-segment-option[aria-checked=true]:hover{background:color-mix(in srgb,var(--onAction) 10%,transparent)}
.pr-resumes{display:grid;gap:var(--s3);margin-block-end:var(--s3)}.pr-view-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-block-end:var(--s6)}.pr-view-head>.p-icon{flex:none}
.pr-task-list{display:grid;gap:var(--s3);margin-block-start:var(--s6)}.pr-task.p-button{display:grid;gap:var(--s2);text-align:start;block-size:auto;min-block-size:72px;white-space:normal;padding:var(--s4);background:var(--surface);border:1px solid var(--border)}
.pr-task-prompt{font-size:var(--h3);margin-block:var(--s4)!important}.pr-draft{inline-size:100%;min-block-size:180px;resize:vertical;padding:var(--s3);font:var(--bg-text)/1.5 var(--font-body);color:var(--textPrimary);background:var(--surfaceSunken);border:1.5px solid var(--border);border-radius:var(--r-tile)}.pr-draft:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.pr-check.p-button{text-align:start;white-space:normal;block-size:auto;min-block-size:52px;justify-content:start}.pr-check[aria-checked=false]>svg{opacity:.25}.pr-check[aria-checked=true]{background:var(--surfaceSunken);border-color:var(--action)}.pr-model{display:grid;gap:var(--s4)}.pr-model[hidden]{display:none}
.pr-listen{display:flex;flex-direction:column;block-size:100dvh;max-inline-size:960px}.pr-listen h1{font-size:var(--h2)}.pr-playlist{overflow:auto;flex:1;min-block-size:80px;overscroll-behavior:contain;scroll-padding:var(--s4)}
.pr-phrase.p-button{display:flex;gap:var(--s4);padding:var(--s4);min-block-size:72px;height:auto;inline-size:100%;text-align:start;white-space:normal;border:1px solid var(--border);background:var(--surface);margin-block-end:var(--s2);align-items:start;box-shadow:none}.pr-phrase[aria-current=true]{border-color:var(--action);background:var(--surfaceSunken)}.pr-track-number{font-size:var(--caption);color:var(--textSecondary);min-inline-size:24px;flex:none}.pr-phrase-text{display:grid;gap:var(--s2)}.pr-phrase-text>.living-word{font-size:var(--bg-text)}.pr-phrase-text>.p-muted{font-size:var(--secondary);font-weight:300}
.pr-listen-controls{display:grid;gap:var(--s2);padding-block-start:var(--s3);border-block-start:1px solid var(--border);flex:none;background:var(--bg)}.pr-listen-controls>.pr-segment{max-inline-size:360px;justify-self:center}.pr-listen-controls>.p-caption{text-align:center}.pr-transport{display:grid;grid-template-columns:44px 52px 44px;justify-content:center;align-items:center;gap:var(--s6)}.pr-transport .p-button{inline-size:44px;min-inline-size:44px;block-size:44px;min-block-size:44px;padding:var(--s2);border-radius:50%;border:1.5px solid color-mix(in srgb,var(--textPrimary) 70%,transparent)}.pr-transport .pr-play{inline-size:52px;block-size:52px;min-block-size:52px;min-inline-size:52px}.pr-previous svg{rotate:180deg}
.pr-scrubber{min-block-size:44px;display:flex;align-items:center;cursor:pointer;touch-action:none;padding-inline:var(--s3);border-radius:var(--r-chip)}.pr-scrub-track{display:block;position:relative;block-size:4px;inline-size:100%;background:var(--border);border-radius:var(--r-chip)}.pr-scrub-fill{display:block;block-size:100%;background:var(--action);transform-origin:left;border-radius:inherit}.pr-scrub-thumb{position:absolute;inline-size:18px;block-size:18px;inset-block-start:50%;transform:translate(-50%,-50%);background:var(--action);border:2px solid var(--bg);border-radius:50%;transition:transform 160ms}.pr-scrubber:hover .pr-scrub-thumb,.pr-scrubber:active .pr-scrub-thumb{transform:translate(-50%,-50%) scale(1.22222)}.pr-time-tooltip{position:absolute;inset-block-end:var(--s4);transform:translateX(-50%);background:var(--action);color:var(--onAction);font-size:var(--caption);padding:var(--s1) var(--s2);border-radius:var(--r-chip);pointer-events:none}.pr-times{display:flex;justify-content:space-between;font-size:var(--caption);font-variant-numeric:tabular-nums}
.pr-session .p-counter{max-inline-size:220px;white-space:normal;font-size:var(--caption)}.pr-result>.p-cord{inline-size:160px;block-size:160px;align-self:center}.pr-result .p-result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}.pr-result .p-result-stats>div{display:grid;gap:var(--s2);text-align:center}.pr-result .p-stat{font-size:var(--stat-fluid)}.pr-mistake{border:1px solid var(--border);padding:var(--s4);border-radius:var(--r-tile)}
.pr-hub .p-button:focus-visible,.pr-independent .p-button:focus-visible,.pr-listen .p-button:focus-visible,.pr-scrubber:focus-visible{outline:2px solid var(--action);outline-offset:2px}.pr-tile:active{transform:scale(.985);background:var(--surfaceSunken)}
@media(hover:hover) and (pointer:fine){.pr-tile:hover{transform:translateY(-3px);box-shadow:var(--lift-2);border-color:color-mix(in srgb,var(--action) 35%,var(--border))}.pr-tile:hover>svg:last-child{transform:translateX(3px)}.pr-task.p-button:hover,.pr-phrase.p-button:hover{border-color:var(--action);background:var(--surfaceSunken)}}
@media(max-width:759px){.pr-hub,.pr-independent,.pr-listen{padding:var(--s4)}.pr-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:var(--s2)}.pr-tile{min-block-size:72px;padding:var(--s3)}.pr-tile-text{gap:var(--s1)}.pr-panel{padding:var(--s4)}.pr-segment-option.p-button{padding:var(--s2);font-size:var(--caption)}.pr-listen{block-size:100dvh;min-block-size:0;overflow:auto}.pr-playlist{flex:1;max-block-size:none}.pr-listen-controls{position:sticky;inset-block-end:0;padding-block-end:var(--s2)}.pr-result .p-result-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.pr-hub *,.pr-independent *,.pr-listen *{transition:none!important;animation:none!important}.pr-tile:hover,.pr-tile:active{transform:none}.pr-tile:hover>svg:last-child{transform:none}}
.pr-dev-fixture{margin:var(--s4);padding:var(--s4);border:1px dashed var(--border);font:var(--caption)/1.4 var(--font-body);color:var(--textSecondary)}.pr-dev-fixture p{margin:0 0 var(--s3)}
.pr-dev-body{display:flow-root;min-block-size:100dvh;margin:0;background:var(--bg);color:var(--textPrimary)}.pr-dev-body [hidden]{display:none!important}.pr-result .p-result-stats .p-caption{line-height:1.4}
.pr-summary-ring{position:relative;align-self:center;inline-size:160px;block-size:160px}.pr-summary-ring>.p-cord{inline-size:100%;block-size:100%}.pr-ring-count{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--numeric);font-family:var(--font-display);font-variant-numeric:tabular-nums}.pr-hub:lang(ar) :is(h1,h2,h3),.pr-independent:lang(ar) :is(h1,h2,h3),.pr-listen:lang(ar) h1{font-family:var(--font-system)}
[data-independent-back] svg{rotate:180deg}:dir(rtl) [data-independent-back] svg{rotate:0deg}
.pr-listen .pr-view-head{position:sticky;inset-block-start:0;z-index:2;background:var(--bg)}
.pr-model .p-button[aria-expanded=true]>svg{transform:rotate(90deg)}
:where(.pr-listen,.pr-independent) .sv{position:relative}:where(.pr-listen,.pr-independent) .sv::after{content:"";position:absolute;inline-size:2px;block-size:.32em;inset-block-start:-.1em;inset-inline-start:50%;background:var(--brand);transform:rotate(18deg);transform-origin:center}:where(.pr-listen,.pr-independent).p-no-stress .sv::after{display:none}
@media(prefers-reduced-motion:reduce){:is(.pr-hub,.pr-independent,.pr-listen) *::before,:is(.pr-hub,.pr-independent,.pr-listen) *::after{animation:none!important;transition:none!important}}
:is(.pr-hub,.pr-independent,.pr-listen) :is(h1,h2,h3){overflow-wrap:anywhere}
:is(.pr-listen,.pr-independent,.pr-hub) a{color:var(--textPrimary);text-underline-offset:.18em;text-decoration-color:color-mix(in srgb,var(--action) 35%,transparent)}:is(.pr-listen,.pr-independent,.pr-hub) a:hover{text-decoration-color:var(--action);background:var(--surfaceSunken)}:is(.pr-listen,.pr-independent,.pr-hub) a:active{opacity:.7}:is(.pr-listen,.pr-independent,.pr-hub) a:focus-visible{outline:2px solid var(--action);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.pr-play:hover>svg,.pr-tile[data-mode=speaking]:hover>svg:first-child,[data-independent-record]:hover>svg{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){:is(.pr-hub,.pr-independent,.pr-listen) .p-button:hover,:is(.pr-hub,.pr-independent,.pr-listen) .p-button:active,:is(.pr-hub,.pr-independent,.pr-listen) .p-button:hover>svg{transform:none!important}}
:is(.pr-hub,.pr-independent,.pr-listen) :is(button,a,input,textarea,[role=slider]){-webkit-tap-highlight-color:transparent}
.pr-session:lang(ar) :is(h1,h2,h3),.pr-session:lang(he) :is(h1,h2,h3){font-family:var(--font-system)}
:is(.pr-hub,.pr-independent,.pr-listen) :is(button,input,textarea){font-family:inherit}:is(.pr-listen,.pr-independent) .living-word,.pr-independent textarea{font-family:var(--font-body);font-feature-settings:"locl" 1}
:is(.pr-hub,.pr-independent,.pr-listen):lang(he),:is(.pr-hub,.pr-independent,.pr-listen):lang(he) :is(h1,h2,h3){font-family:var(--font-system)}
:is(.pr-hub,.pr-independent,.pr-listen) [hidden]{display:none!important}

/* R1-L hub: full-card links, aligned actions and a flush final row. */
.pr-tile{display:grid;grid-template-columns:24px minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;align-items:start;min-block-size:200px;padding:var(--s5);text-decoration:none}
.pr-tile>svg{grid-column:1;grid-row:1}.pr-tile-text{grid-column:2/-1;grid-row:1/3}.pr-tile .pr-badge{grid-column:3;grid-row:3;align-self:center}.pr-tile-action{grid-column:1/3;grid-row:3;justify-self:start;display:flex;align-items:center;min-block-size:44px;padding-inline:var(--s4);border:1.5px solid color-mix(in srgb,var(--textPrimary) 70%,transparent);border-radius:var(--r-button);font-size:var(--secondary);font-weight:600}
.pr-tile:is([data-mode=independent],[href$="/practice/session/#independent"]){grid-column:span 2;grid-template-columns:24px minmax(0,1fr) auto;align-items:center}.pr-tile:is([data-mode=independent],[href$="/practice/session/#independent"]) .pr-tile-text{grid-column:2;grid-row:1/-1}.pr-tile:is([data-mode=independent],[href$="/practice/session/#independent"]) .pr-tile-action{grid-column:3;grid-row:1/-1}
@media(max-width:759px){.pr-tile{display:flex;min-block-size:72px;padding:var(--s3);align-items:center}.pr-tile-action{display:none}.pr-tile:is([data-mode=independent],[href$="/practice/session/#independent"]){grid-column:auto}.pr-tile-text .p-muted{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pr-tile-text strong{font-size:var(--secondary)}}
/* Compact phone list: stable single-line supporting copy, 72px at normal text.
   Rows grow naturally with text zoom; full descriptions remain accessible. */
@media(max-width:759px){.pr-tile-text strong,.pr-tile-text .p-muted{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset}.pr-tile-text{min-inline-size:0}}

/* R2a-L: retry is a caption; the session name never changes. */
.pr-retry-label{display:block;max-inline-size:24ch;white-space:normal}
.pr-ring-count{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1)}
.pr-ring-count>.p-caption{font-family:var(--font-body)}
.pr-session .p-counter{max-inline-size:50%;white-space:normal}
/* The availability caption shares the stage; it must not add a full-height
   exercise below itself and force otherwise unnecessary phone scrolling. */
.pr-session .p-stage:has([data-quiz-available])>.p-exercise{min-height:0;flex:1}
.pr-session [data-quiz-available]{flex-shrink:0;margin-block-end:var(--s3)}

/* DQA1-L P1-5: bare-text links have no icon cell. Keep intrinsic word widths
   in the grid calculation rather than breaking a label into the 24px column. */
.pr-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.pr-hub[data-mount=practice-hub]{padding:0;max-inline-size:100%}
.pr-tile{grid-template-columns:24px minmax(min-content,1fr) auto;overflow-wrap:break-word;word-break:normal;hyphens:manual}
.pr-tile-text{min-inline-size:min-content;overflow-wrap:break-word;align-content:start}
/* SSR uses the shell classes; hydration must keep the same text metrics. */
.pr-tile-text :is(.p-muted,.muted){font-size:var(--caption);font-weight:400;line-height:1.4}
.pr-hub-head>.eyebrow{color:var(--textSecondary);line-height:1.45}
.pr-tile:not(:has(.pr-tile-text)){grid-template-columns:minmax(min-content,1fr);grid-template-rows:auto;min-block-size:88px;align-content:center;justify-items:start;font-size:var(--card-title)}
.pr-hub>.pr-grid:not(:has(.pr-tile-text)){margin-block-start:var(--s6)}
.pr-tile:is([data-mode=independent],[href$="/practice/session/#independent"]){grid-template-columns:24px minmax(min-content,1fr) auto;align-items:start}
.pr-tile:is([data-mode=independent],[href$="/practice/session/#independent"]) .pr-tile-text{grid-column:2/-1;grid-row:1/3}
.pr-tile:is([data-mode=independent],[href$="/practice/session/#independent"]) .pr-tile-action{grid-column:1/3;grid-row:3}
/* P2-4: the panel supplies the container; its action follows the label. */
.pr-listen-card>[data-listen-all],.pr-quiz>[data-quiz-start]{justify-self:start;inline-size:fit-content;min-inline-size:min(100%,200px);max-inline-size:100%}
@media(max-width:759px){
 .pr-tile-text{flex:1 1 auto;min-inline-size:min-content}
 .pr-tile-text strong,.pr-tile-text .p-muted{white-space:normal;overflow:visible;text-overflow:clip}
 .pr-tile:not(:has(.pr-tile-text)){display:grid;font-size:var(--secondary);align-content:center}
}

/* DQA2-L: one responsive contract for SSR, hydrated and text-only tiles.
   The min() fallback preserves the 280px floor whenever the container permits. */
.pr-hub>.pr-grid{grid-template-columns:repeat(3,minmax(min(100%,280px),1fr))}
.pr-tile:is([data-mode=independent],[href$="/practice/session/#independent"]){grid-column:auto}
.pr-tile .pr-badge{white-space:nowrap;flex:none;min-inline-size:max-content;justify-self:end}
@media(max-width:1023px){.pr-hub>.pr-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}}
@media(max-width:559px){.pr-hub>.pr-grid{grid-template-columns:minmax(0,1fr)}}
.pr-empty .p-head{justify-content:start;gap:var(--s3)}
.pr-empty .p-head h1{font-size:var(--secondary);margin:0}
.pr-empty .p-stage{display:grid;place-items:center;min-block-size:0;overflow:auto}
.pr-empty-card{inline-size:min(100%,560px);text-align:center;align-items:center;gap:var(--s4)}
.pr-empty-card>svg{inline-size:56px;block-size:56px;color:var(--textSecondary);flex:none}
.pr-empty-card h2{font-size:var(--h2);margin:0}
.pr-empty .p-actionbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.pr-empty .p-actionbar>.p-primary{grid-column:1/-1}
.pr-empty .p-actionbar .p-button{white-space:normal;block-size:auto;min-block-size:52px;padding:var(--s3);text-align:center;line-height:1.3}
/* Empty states keep a single centred composition and a dock for all actions. */
.p-player.pr-empty:has(>.p-stage)>.p-actionbar{grid-column:1/-1;block-size:auto;inline-size:min(100%,560px);justify-self:center}
.p-player.pr-empty:has(>.p-stage) .p-stage>.pr-empty-card{display:flex;flex-direction:column;text-align:center;align-items:center;gap:var(--s4)}
.pr-empty .p-actionbar>a.p-primary,.pr-session .p-actionbar>a.p-primary{color:var(--onAction)}
.pr-empty-card{padding:var(--s5);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}

/* RD-4: the recommendation and tools have distinct weights. This critical
   block is mirrored in player-host.css for router entries before CSS arrives. */
.pr-redesign.pr-hub{padding:0;max-inline-size:100%;font:var(--body)/1.45 var(--font-body);color:var(--textPrimary)}
.pr-redesign *{box-sizing:border-box;min-inline-size:0}
.pr-redesign [hidden]{display:none!important}
.pr-redesign .pr-hub-head{margin-block-end:var(--s6)}
.pr-redesign .pr-hub-head h1{margin:0;font:900 var(--h1)/1.12 var(--font-display)}
.pr-redesign .pr-hub-head :is(.p-eyebrow,.eyebrow){margin:0;color:var(--textSecondary)}
.pr-redesign .pr-resumes:empty{display:none}
.pr-hero{display:grid;grid-template-columns:2fr 1fr;gap:var(--s6);margin-block-end:var(--s7)}
.pr-hero-card{display:flex;flex-direction:column;align-items:start;gap:var(--s4);padding:var(--s6);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.pr-daily{background:var(--surfaceSunken)}
.pr-hero-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);inline-size:100%}
.pr-hero-top>svg,.pr-panel-title>svg{inline-size:32px;block-size:32px;flex:none}
.pr-duration,.pr-redesign .pr-badge{display:inline-flex;align-items:center;white-space:nowrap;flex:none;min-inline-size:max-content;padding:var(--s1) var(--s2);border-radius:var(--r-chip);background:var(--surface);color:var(--textPrimary);font:600 var(--caption)/1.4 var(--font-body)}
.pr-hero-copy{display:grid;gap:var(--s2);max-inline-size:48ch}
.pr-hero-copy :is(h2,p){margin:0}
.pr-hero-copy h2{font:900 var(--stat-small)/1.15 var(--font-display);text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:manual}
.pr-redesign .p-eyebrow{font:700 var(--eyebrow)/1.45 var(--font-body);text-transform:uppercase;letter-spacing:.12em;color:var(--textSecondary)}
.pr-redesign .p-muted{color:var(--textSecondary);font:400 var(--secondary)/1.45 var(--font-body);text-wrap:pretty}
.pr-redesign .pr-hero-action{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);inline-size:fit-content;max-inline-size:100%;min-block-size:52px;block-size:auto;min-inline-size:min(100%,200px);padding:var(--s3) var(--s5);margin-block-start:auto;border:1.5px solid color-mix(in srgb,var(--textPrimary) 70%,transparent);border-radius:var(--r-button);background:transparent;color:var(--textPrimary);font:600 var(--secondary)/1.3 var(--font-body);text-align:center;text-decoration:none;white-space:normal;transition:background var(--t-hover),transform var(--t-press),box-shadow var(--t-hover)}
.pr-redesign .pr-hero-action.p-primary{background:var(--action);color:var(--onAction);border-color:var(--action);box-shadow:var(--lift-1)}
.pr-hero-action>svg{inline-size:20px;block-size:20px;flex:none}
.pr-review-count{font:900 var(--h1)/1 var(--font-display);font-variant-numeric:tabular-nums}
.pr-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s6);align-items:start}
.pr-redesign .pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));grid-auto-rows:1fr;gap:var(--s4);margin:0}
.pr-redesign .pr-tile{display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-rows:32px 1fr;align-items:start;align-content:start;gap:var(--s3);inline-size:100%;min-block-size:192px;block-size:auto;padding:var(--s5);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);color:var(--textPrimary);text-align:start;text-decoration:none;white-space:normal;box-shadow:none;transition:background var(--t-hover),border-color var(--t-hover),transform var(--t-press),box-shadow var(--t-hover)}
.pr-redesign .pr-tile>svg:first-child{grid-column:1;grid-row:1;inline-size:32px;block-size:32px}
.pr-redesign .pr-tile>svg:last-child{grid-column:3;grid-row:1;inline-size:20px;block-size:32px;align-self:center;rotate:none;transition:transform var(--t-hover)}
:dir(rtl) .pr-redesign .pr-tile>svg:last-child{rotate:180deg}
.pr-redesign .pr-tile .pr-tile-text{display:grid;grid-column:1/-1;grid-row:2;gap:var(--s2);align-content:start;min-inline-size:12ch;overflow-wrap:normal;word-break:normal;hyphens:manual}
.pr-redesign .pr-tile-text strong{font:700 var(--card-title)/1.25 var(--font-body);text-wrap:balance;white-space:normal;overflow:visible}
.pr-redesign .pr-tile-text :is(.p-muted,.muted){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:400 var(--secondary)/1.4 var(--font-body);color:var(--textSecondary)}
.pr-redesign .pr-tile .pr-badge{grid-column:2;grid-row:1;justify-self:start;align-self:center;background:var(--surfaceSunken)}
.pr-tools{display:grid;gap:var(--s6)}
.pr-redesign .pr-panel{margin:0;padding:var(--s5);gap:var(--s4);border-radius:var(--r-card)}
.pr-panel-title{display:flex;align-items:center;gap:var(--s3)}
.pr-panel-title h2{font:900 var(--h2)/1.2 var(--font-display);margin:0}
.pr-redesign .pr-panel h3{font:600 var(--secondary)/1.4 var(--font-body);margin:0}
.pr-redesign .pr-segment-option.p-button{padding:var(--s2);font-size:var(--secondary)}
.pr-redesign .pr-quiz .pr-segment:has([data-value=vocabulary]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pr-redesign .pr-listen-card .pr-segment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.pr-redesign .pr-panel>[data-listen-all],.pr-redesign .pr-panel>[data-quiz-start]{min-inline-size:min(100%,200px);inline-size:fit-content;max-inline-size:100%;min-block-size:52px;block-size:auto;white-space:normal;text-align:center}
.pr-redesign .pr-panel>[data-listen-all]:disabled{opacity:1;color:var(--textSecondary);background:var(--surfaceSunken);border-color:var(--border);cursor:default;transform:none;box-shadow:none}
.pr-notice{margin:var(--s6) 0 0!important;color:var(--textSecondary)}
.pr-redesign .pr-tile:focus-visible,.pr-redesign .pr-hero-action:focus-visible{outline:2px solid var(--action);outline-offset:2px}

.pr-redesign .pr-hero-action.p-primary:active{background:var(--actionPressed);color:var(--onAction)}
@media(hover:hover) and (pointer:fine){
 .pr-redesign .pr-tile:hover{background:var(--surfaceSunken);border-color:color-mix(in srgb,var(--action) 40%,var(--border));transform:translateY(-3px);box-shadow:var(--lift-2)}
 .pr-redesign .pr-tile:hover>svg:last-child{transform:translateX(3px)}
 .pr-redesign .pr-hero-action:hover{background:var(--surfaceSunken);transform:translateY(-1px);box-shadow:var(--lift-1)}
 .pr-redesign .pr-hero-action.p-primary:hover{background:var(--actionPressed);color:var(--onAction);box-shadow:var(--lift-2)}
}
.pr-redesign .pr-tile:active,.pr-redesign .pr-hero-action:active{transform:scale(.98);background:var(--surfaceSunken)}
@media(max-width:1099px){.pr-body{grid-template-columns:minmax(0,1fr)}.pr-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:759px){
 .pr-hero{grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-block-end:var(--s6)}
 .pr-hero-card{padding:var(--s5);gap:var(--s3)}
 .pr-review{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
 .pr-review .pr-hero-top{grid-column:1/-1}
 .pr-review .pr-hero-copy{grid-column:1/-1}
 .pr-review .pr-hero-action{grid-column:1/-1;margin-block-start:var(--s1)}
 .pr-redesign .pr-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));grid-auto-rows:auto;gap:var(--s3)}
 .pr-redesign .pr-tile{grid-template-columns:32px minmax(0,1fr) var(--s8);grid-template-rows:auto auto;min-block-size:112px;padding:var(--s4);gap:var(--s2) var(--s3)}
 .pr-redesign .pr-tile .pr-tile-text{grid-column:2;grid-row:1/3;min-inline-size:12ch}
 .pr-redesign .pr-tile>svg:first-child{grid-row:1/3}
 .pr-redesign .pr-tile>svg:last-child{grid-row:1;align-self:start}
 .pr-redesign .pr-tile .pr-badge{grid-column:3;grid-row:2;justify-self:end}
 .pr-tools{grid-template-columns:minmax(0,1fr)}
 .pr-body{gap:var(--s6)}
}
.pr-redesign:lang(ar),.pr-redesign:lang(he),.pr-redesign:lang(ar) :is(h1,h2,h3),.pr-redesign:lang(he) :is(h1,h2,h3){font-family:var(--font-system)}
@media(prefers-reduced-motion:reduce){.pr-redesign .pr-tile:is(:hover,:active),.pr-redesign .pr-hero-action:is(:hover,:active),.pr-redesign .pr-tile:hover>svg:last-child{transform:none!important}}
/* These small control primitives are also critical on a routed SSR entry. */
.pr-redesign .pr-panel{display:grid;border:1px solid var(--border);background:var(--surface)}
.pr-redesign .pr-panel>.p-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s3) var(--s4);border:1.5px solid color-mix(in srgb,var(--textPrimary) 70%,transparent);border-radius:var(--r-button);font:600 var(--secondary)/1.3 var(--font-body);color:var(--textPrimary);background:var(--surface);text-decoration:none}
.pr-redesign .pr-panel>.p-button>svg{inline-size:20px;block-size:20px;flex:none}
.pr-redesign .pr-panel>.p-primary{background:var(--action);color:var(--onAction);border-color:var(--action)}
.pr-redesign .pr-segment{display:flex;position:relative;isolation:isolate;flex-wrap:wrap;gap:0;padding:var(--s1);inline-size:100%;border:1px solid var(--border);border-radius:var(--r-tile);background:var(--surfaceSunken)}
.pr-redesign .pr-segment-option.p-button{display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;min-block-size:44px;block-size:auto;max-inline-size:100%;border:0;border-radius:var(--r-chip);background:transparent;box-shadow:none;white-space:normal;color:var(--textPrimary);font:600 var(--secondary)/1.4 var(--font-body);text-align:center}
.pr-redesign .pr-segment-option[aria-checked=true]{background:var(--action);color:var(--onAction)}
.pr-redesign .pr-panel>.p-button:hover{background:var(--surfaceSunken);color:var(--textPrimary)}
.pr-redesign .pr-panel>.p-primary:hover{background:var(--actionPressed);color:var(--onAction)}
.pr-redesign .pr-panel>.p-button:disabled{opacity:1;color:var(--textSecondary);background:var(--surfaceSunken);border-color:var(--border);cursor:default;transform:none;box-shadow:none}
.pr-redesign .pr-panel>.p-button:focus-visible,.pr-redesign .pr-segment-option:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.pr-redesign .pr-panel>.p-button:active{transform:scale(.98)}
.pr-redesign .pr-segment-option[aria-checked=false]:hover{background:color-mix(in srgb,var(--action) 8%,transparent)}
.pr-redesign .pr-segment-option[aria-checked=true]:hover{background:var(--actionPressed);color:var(--onAction)}
.pr-redesign .pr-segment-option:active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){.pr-redesign .pr-panel>.p-button:active,.pr-redesign .pr-segment-option:active{transform:none}}

.pr-redesign:is(:lang(ar),:lang(he)) :is(.p-muted,.p-eyebrow,.pr-tile-text strong,.pr-duration,.pr-badge,.pr-hero-action,.pr-segment-option,.pr-panel>.p-button){font-family:var(--font-system)}
/* Press keeps the foreground/background pair opaque in both themes. */
.pr-redesign a.p-button:active{opacity:1}
.pr-redesign .pr-segment-option.p-button:hover:not(:active){transform:none}

/* BUG-17: this is a scrolling task catalogue, not the player's three-row stage.
   Each child owns its row; a long task list cannot collapse the intro track. */
.p-focus .p-player.pr-independent{display:flex;flex-direction:column;gap:var(--s4);width:min(100%,1200px);padding:var(--s5);overflow-y:auto}
.pr-independent>*{flex-shrink:0}
.pr-independent>.pr-view-head,.pr-independent>.pr-task-list{margin-block:0}
@media(min-width:900px){.pr-independent>.pr-task-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Large text: use the full row before a real word can meet the chevron.
   The em threshold follows the card's font size, not device pixels. */
@media(max-width:759px){
 .pr-redesign .pr-tile{container-type:inline-size}
 @container (max-width:14em){
  .pr-redesign .pr-tile .pr-tile-text{grid-column:1/-1;grid-row:2;min-inline-size:0}
  .pr-redesign .pr-tile>svg:first-child,.pr-redesign .pr-tile>svg:last-child{grid-row:1}
  .pr-redesign .pr-tile .pr-badge{grid-column:2;grid-row:1;justify-self:start}
 }
}

.pr-redesign .pr-daily{background:var(--surface);box-shadow:var(--lift-1)}
.pr-empty-review{align-self:start;justify-self:start;text-align:start;grid-column:1/-1}

/* LOGIC-L3: the store-first empty/loading action keeps its compact SVG. */
.pr-empty-review{display:inline-flex;align-items:center;gap:var(--s2);min-block-size:44px;max-inline-size:100%}
.pr-empty-review>svg{inline-size:20px;block-size:20px;flex:none}
/* The transport remains a pinned dock at tablet/desktop widths too. */
.pr-listen-controls{position:sticky;inset-block-end:0}

/* R4-23: one recommendation, secondary tools, no bare speculative counts. */
.pr-r4 .pr-now{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:var(--s5);margin-block-end:var(--s6);min-block-size:180px;background:var(--surfaceSunken)}
.pr-now-icon>svg{inline-size:32px;block-size:32px}
.pr-r4 .pr-now .pr-hero-action{margin:0}
.pr-r4-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:var(--s6)}
.pr-group{display:grid;gap:var(--s4)}
.pr-r4 .pr-group>h2{font:700 var(--h3)/1.3 var(--font-body);text-wrap:balance}
.pr-r4 .pr-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:var(--s3)}
.pr-r4 .pr-tile{display:grid;grid-template-columns:24px minmax(0,1fr) 20px;grid-template-rows:auto;align-items:center;gap:var(--s3);min-block-size:64px;padding:var(--s3) var(--s4)}
.pr-r4 .pr-tile>svg:first-child{grid-column:1;grid-row:1;inline-size:24px;block-size:24px}
.pr-r4 .pr-tile>svg:last-child{grid-column:3;grid-row:1}
.pr-r4 .pr-tile .pr-tile-text{grid-column:2;grid-row:1;min-inline-size:0;gap:var(--s1)}
.pr-r4 .pr-tile .pr-tile-text strong{font-size:var(--secondary);text-align:start}
.pr-r4 .pr-tile-text :is(.p-muted,.muted){white-space:normal;overflow:visible;text-overflow:clip;font-size:var(--caption);text-align:start}
.pr-settings{margin:0;padding:var(--s3);border:0;background:transparent}
.pr-settings>h3{font-size:var(--secondary);margin:0}
@media(max-width:1099px){.pr-r4-groups{grid-template-columns:minmax(0,1fr)}.pr-r4 .pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){.pr-r4 .pr-now{grid-template-columns:32px minmax(0,1fr);gap:var(--s4);padding:var(--s5)}.pr-r4 .pr-now .pr-hero-action{grid-column:1/-1;inline-size:100%}.pr-r4 .pr-grid{grid-template-columns:minmax(0,1fr)}.pr-r4 .pr-now .pr-hero-copy h2{font-size:var(--h2)}}


.pr-r4 .pr-tile{grid-column:auto}

/* R4-25: lesson summary hierarchy, three stats and a bounded set of words. */
.p-player:has(>.p-stage) .p-stage>.pr-r4-result{align-content:start;align-items:start;block-size:auto;overflow:visible;text-align:start}
.p-player:has(>.p-stage) .pr-r4-result :is(.p-result-main,.p-result-detail){overflow:visible;align-items:stretch;gap:var(--s4)}
.pr-r4-result .p-result-stats>div{padding:var(--s3)}
.pr-r4-result h1{font-size:var(--h1)}
.pr-r4-result h2{font-size:var(--h3)}
.pr-strengthen{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pr-word-chip{display:inline-flex;max-inline-size:100%;padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r-chip);background:var(--surfaceSunken);font-size:var(--bg-text)}
.pr-r4-result .p-result-detail>.p-button{align-self:start;max-inline-size:100%;white-space:normal}

.pr-word-chip{min-inline-size:44px;min-block-size:44px;align-items:center;gap:var(--s2)}.pr-word-chip>svg{inline-size:20px;block-size:20px;flex:none}

.p-player.pr-session .pr-r4-result .p-result-main>.p-result-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.pr-session.p-player:has(>.p-stage) .p-study .p-question{line-height:1.2}

/* NEXT-R5: empty mistakes are status, not a route. */
.pr-tile.is-empty{opacity:.65;cursor:default;transform:none;box-shadow:none}
.pr-tile.is-empty>svg:last-child{visibility:hidden}

/* PLAYER-R5b P2-25: the invitation and its actions form one natural card. */
.p-player.pr-empty:has(>.p-stage){grid-template-rows:auto minmax(0,1fr)}
.p-player.pr-empty:has(>.p-stage) .p-stage>.pr-empty-card{align-self:center;min-block-size:0;block-size:auto;flex:none}
.pr-empty-card>.p-actionbar{position:static;inline-size:100%;block-size:auto;max-block-size:none;flex:none;padding:0;background:transparent;border:0;box-shadow:none;grid-template-columns:1fr}

/* Settings actions have a 52px button; their description belongs to the card. */
.pr-settings-card{display:grid;gap:var(--s2);align-content:start;padding:var(--s3) var(--s4);border:1px solid var(--border);border-radius:var(--r-tile);background:var(--surface)}
.pr-settings-card>.p-button.pr-settings-action{display:flex;align-items:center;gap:var(--s3);inline-size:100%;block-size:52px;min-block-size:52px;padding:0 var(--s3);font-size:var(--secondary);border:1.5px solid var(--textSecondary);border-radius:var(--r-button)}
.pr-settings-action>strong{flex:1;text-align:start}
.pr-settings-card>.p-muted{font-size:var(--caption);line-height:1.4}
@media(hover:hover) and (pointer:fine){.pr-settings-card>.p-button:hover{background:var(--surfaceSunken);border-color:var(--action)}}

/* W-R6 P2-5: the result action and stats match the lesson summary. */
.pr-r4-result .p-result-detail>.p-button{align-self:stretch;inline-size:100%;min-block-size:52px}
.p-player.pr-session .pr-r4-result .p-result-main>.p-result-stats>div{text-align:start;align-items:start}

/* W-R9c: recommendation icon belongs to its eyebrow, alongside the copy. */
.pr-now.pr-hero-card{grid-template-columns:minmax(0,1fr) auto}.pr-hero-copy>.p-eyebrow{display:flex;align-items:center;gap:var(--s2)}.pr-hero-copy .pr-now-icon{display:inline-flex;inline-size:24px;block-size:24px;flex:none}.pr-hero-copy .pr-now-icon>svg{inline-size:24px;block-size:24px}
@media(max-width:759px){.pr-now.pr-hero-card{grid-template-columns:minmax(0,1fr)}.pr-now.pr-hero-card>.pr-hero-action{grid-column:1}}