/* Same Polish Review design tokens; fluid course layouts. */
/* Content and footer share one controlled frame. Only an editing case follows
   Safari's keyboard pan; closed PWA layout does not inherit a stale viewport. */
html.mobile-frame,html.mobile-frame body{height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
.mobile-frame body.new-ui .app-shell{position:absolute;top:0;left:0;right:0;height:var(--app-viewport-height,100dvh);min-height:0;padding-top:max(env(safe-area-inset-top),var(--app-safe-top,0px));overflow:hidden}
.mobile-frame body.new-ui.case-viewport .app-shell{top:var(--app-viewport-top,0px);height:var(--app-viewport-height,100dvh)}
.mobile-frame .new-ui .workspace{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.mobile-frame .new-ui #main-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;overflow-anchor:none;scroll-behavior:auto;-webkit-overflow-scrolling:touch}
.mobile-frame .new-ui .topbar{flex:none;height:75px;padding-top:0}
.mobile-frame .new-ui .mobile-nav{position:relative;bottom:auto;left:auto;right:auto;flex:none}
/* The footer now reserves its own space; do not reserve its height twice. */
.mobile-frame .new-ui:not(.case-viewport) #main-content{padding-bottom:24px}
.mobile-frame .new-ui.case-viewport #case-header{position:static}
.mobile-frame .new-ui.case-viewport .session-controls{padding-top:max(0px,calc(12px - max(env(safe-area-inset-top),var(--app-safe-top,0px))))}
@media(max-width:600px){.mobile-frame .new-ui .topbar{height:58px}}
/* Desktop retains its anchored row. Mobile controls scroll with the case. */
.new-ui.case-viewport #case-header{flex:none;position:sticky;top:0;z-index:25;width:min(100%,940px);margin-inline:auto;padding:30px clamp(22px,4vw,56px) 0;background:var(--bg)}
.new-ui.case-viewport #case-header .session-controls{position:static;max-width:760px;margin-inline:auto;background:var(--bg)}
.new-ui.case-viewport #main-content{padding-top:0}
/* On mobile the header is relocated inside #main-content (the case scroller), so
   it scrolls away with the content instead of staying pinned. It then sits in the
   scroller's own 26px side padding, so the side padding moves off the header; the
   bottom spacing matches Version 22 (12px main plus 28px timeline). */
@media(max-width:900px){
 .new-ui.case-viewport #case-header{position:static;width:auto;max-width:none;margin:0;padding:28px 0 0;background:transparent}
 .new-ui.case-viewport #main-content{padding-bottom:12px}
}
@media(max-width:600px){.new-ui.case-viewport #case-header{padding:17px 0 0}}
@media(max-width:600px) and (max-height:700px){.new-ui.case-viewport #case-header{padding-top:14px}}
.new-ui.case-viewport #back-to-setup,.new-ui.case-viewport #case-home-button{position:static;flex:0 0 44px;width:44px;height:44px}
.new-ui.case-viewport #main-content{scroll-behavior:auto;overflow-anchor:none}
/* Loading and level-transition messages must not push the case frame around. */
.new-ui.case-viewport #app-notice{position:fixed;left:var(--case-notice-left,19px);width:var(--case-notice-width,calc(100% - 38px));bottom:max(var(--case-notice-bottom,100px),calc(12px + env(safe-area-inset-bottom)));pointer-events:none}
.new-ui .feedback-actions:has(>button:nth-child(2)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.new-ui .feedback-actions:has(>button:nth-child(2))>button{width:100%;height:100%;min-height:48px;margin:0;padding:12px 10px;line-height:1.35}
@media(max-width:900px){
 .new-ui :is(#focus-select-menu,#next-focus-menu) .choice-option{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px;min-height:44px;padding:6px 10px}
 .new-ui :is(#focus-select-menu,#next-focus-menu) .choice-name{white-space:nowrap}
 .new-ui :is(#focus-select-menu,#next-focus-menu) .choice-badge{grid-column:1/-1;justify-self:start;align-self:start;margin-top:0;padding:3px 6px}
}
/* Desktop case content and the fixed composer share the same centered column.
   Mobile keeps its existing full-width dock and case layout. */
@media(min-width:901px){
 .new-ui #session-panel{max-width:760px;margin-inline:auto}
 body.new-ui.case-viewport #main-content{padding-bottom:calc(var(--desktop-dock-height,100px) + 40px)}
 .new-ui .answer-dock{left:var(--case-column-left);width:var(--case-column-width);transform:none;padding:0;background:transparent}
 .new-ui .answer-dock .record-status,.new-ui .answer-dock .audio-review{margin-inline:0}
}
@media(max-width:600px){body.new-ui.setup-viewport #main-content{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain}}
.new-ui .skill-reason{margin:6px 0 0;color:var(--muted);font-size:12px;font-weight:400;line-height:1.45;overflow-wrap:anywhere}
.new-ui .level-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.new-ui .level-cell{min-width:0;flex-wrap:wrap}
.new-ui .level-cell>.skill-reason,.new-ui .level-cell>.delivery-scorecard,.new-ui .level-cell>.delivery-info{flex-basis:100%;width:100%}
.new-ui .delivery-cell{grid-column:1/-1}
.new-ui .delivery-scorecard{display:flex;gap:8px 16px;flex-wrap:wrap;margin-top:8px;font-size:12px;line-height:1.5}
.new-ui .delivery-measure{max-width:100%;overflow-wrap:anywhere}
.new-ui .delivery-info{flex-basis:100%;color:var(--muted)}
/* A2: the inline measures collapse into a small "See details" control. The
   card keeps the skill name and level only. */
.new-ui .delivery-details-trigger{position:absolute;right:12px;bottom:8px;margin:0;padding:2px 0;font-size:12px;font-weight:400;min-height:24px}
.new-ui .delivery-cell{position:relative;display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:2px 12px;padding:9px 12px 34px;text-align:left;font-size:13px}
.new-ui .delivery-cell>.level-value{margin-top:0;text-align:left;white-space:nowrap}
@media(max-width:600px){
 .new-ui .feedback-body .level-row{grid-template-columns:minmax(0,1fr) max-content;column-gap:12px}
 .new-ui .level-cell{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;gap:2px 12px;font-size:13px}
 .new-ui .level-cell>.level-value{margin-top:0;text-align:left;white-space:nowrap}
}
.delivery-details-overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;background:rgba(4,12,8,.5)}
.delivery-details-sheet{width:min(100%,520px);max-height:80vh;overflow-y:auto;padding:18px 20px calc(20px + env(safe-area-inset-bottom));border:1px solid var(--line);border-radius:18px 18px 0 0;background:var(--surface);color:var(--text);box-shadow:0 -14px 40px var(--shade)}
.delivery-details-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.delivery-details-title{margin:0;font-size:17px;font-weight:700}
.delivery-details-close{flex:none;width:44px;height:44px;min-width:44px;border:1px solid var(--line);border-radius:50%;background:var(--surface-2);color:var(--text);font-size:22px;line-height:1}
.delivery-details-close:hover{border-color:var(--accent)}
.delivery-details-list{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;margin:0;padding:14px 0 2px;border-top:1px solid var(--line)}
.delivery-details-list dt{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.delivery-details-list dd{margin:0;text-align:right;font-size:13px;font-weight:650;line-height:1.5;font-variant-numeric:tabular-nums}
.delivery-details-empty{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
@media(min-width:601px){.delivery-details-overlay{align-items:center}.delivery-details-sheet{border-radius:18px}}
body.delivery-details-open{overflow:hidden}
/* Desktop feedback stays compact; the details dialog follows the case column. */
@media(min-width:901px){
 .new-ui .feedback-body .level-row:has(.delivery-cell){grid-template-columns:repeat(4,minmax(0,1fr))}
 .new-ui .feedback-body .level-cell{display:grid;grid-column:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:34px auto;align-items:start;justify-items:center;gap:4px;padding:9px 10px 34px;text-align:center;font-size:13px}
 .new-ui .feedback-body .level-label{line-height:1.3}
 .new-ui .feedback-body .level-value{margin:0;text-align:center;white-space:nowrap}
 .new-ui .delivery-details-sheet{position:fixed;left:calc(var(--case-column-left) + var(--case-column-width)/2);top:50%;transform:translate(-50%,-50%);width:min(520px,calc(var(--case-column-width) - 32px))}
}
@media(max-width:600px){.new-ui .level-row{grid-template-columns:1fr}.new-ui .delivery-scorecard{gap:6px 12px}.new-ui .skill-reason{font-size:12px}}
.new-ui .setup-panel{max-width:660px;padding-top:0}.new-ui .setup-heading h1{line-height:1.12}.new-ui .setup-heading h1 span{display:block;white-space:nowrap;font-size:clamp(1.65rem,8vw,3.6rem)}
.new-ui .recommended-button{white-space:nowrap;overflow:hidden;font-size:clamp(13px,3.7vw,19px);gap:8px}.new-ui .recommended-label{min-width:0;text-overflow:ellipsis;overflow:hidden}
.new-ui .recommendation-focus{display:block;margin:12px 0 22px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.new-ui .level-up-description{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--accent-text);font-weight:650;overflow-wrap:break-word}
.new-ui .level-up-logo{display:block;flex:none;width:100px;height:28px}
.new-ui .level-up-word{fill:#242424}
:root[data-theme="dark"] .new-ui .level-up-word{fill:var(--text)}
.new-ui .surprise-button{min-height:44px;border-color:var(--accent);color:var(--accent-text);background:transparent;margin:0 0 24px;padding:10px 22px;border-radius:999px}
.new-ui .setup-fields{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:24px}.new-ui #availability-note{display:none}
.course-map{display:grid;gap:12px;margin-top:8px}.course-topic{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;min-width:0}
.course-topic-heading{padding:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;min-height:70px;cursor:pointer;list-style:none}.course-topic-heading::-webkit-details-marker,.course-difficulty-heading::-webkit-details-marker{display:none}
.course-topic-name{font-weight:650;font-size:15px;line-height:1.45;overflow-wrap:anywhere}.course-topic-meta{display:flex;flex-direction:column;gap:5px;text-align:right;align-self:center;max-width:120px}
.course-level{font-size:12px;font-weight:650;line-height:1.35;color:var(--accent-text);white-space:nowrap}.course-level[data-level=strong]{font-weight:750}.course-level[data-level=client-ready]{font-weight:800}
.course-level[data-level]{color:var(--level-color,var(--accent-text))}
.course-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.course-topic-heading .coverage-track{grid-column:1/-1;width:100%;display:block;height:4px;margin:0}.course-topic-heading .coverage-fill{height:100%;display:block}
.course-soon{opacity:.65}.course-soon .persona-badge{align-self:center}.course-difficulty{margin:0 12px 12px;background:var(--surface-2);border-radius:12px;overflow:hidden}.course-difficulty-heading{display:flex;gap:10px;align-items:center;min-height:48px;padding:12px;cursor:pointer;font-weight:650;font-size:14px;list-style:none}.course-difficulty-heading>span:first-child{margin-right:auto}.course-complete{font-size:11px;color:var(--accent-text);white-space:nowrap}
.course-question{display:grid;grid-template-columns:18px minmax(0,1fr) 88px 74px;gap:8px;align-items:center;margin:0 12px;padding:10px 0;border-top:1px solid var(--line)}
.course-check{color:var(--accent-text)}.course-question-title{background:none;border:0;color:var(--text);font-size:13px;font-weight:550;text-align:left;line-height:1.45;padding:4px 0;min-height:44px;overflow-wrap:anywhere;min-width:0}
.course-question-action{min-height:44px;min-width:0;white-space:nowrap;border-radius:999px;font-size:12px;padding:8px;border-color:var(--accent);color:var(--accent-text);background:transparent}.course-question>.course-level{font-size:11px;white-space:normal}.course-question>.course-level[data-level=not-assessed]{visibility:hidden}
.course-history{margin-top:24px}.course-history>summary{cursor:pointer;min-height:44px;line-height:44px}.course-history .history-list{margin-top:12px}.history-group-label{font-size:13px;line-height:1.5;color:var(--accent-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-row{min-height:64px;width:100%;text-align:left}.history-heading{display:flex;justify-content:space-between;gap:12px;margin-top:8px}.weak-answer-row{display:grid;grid-template-columns:minmax(0,1fr) 88px 74px;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding:10px 0}.weak-answer-row>.course-level{white-space:normal;font-size:11px}.weakest-area{margin-top:22px;font-size:14px;line-height:1.5}.weakest-area button{min-height:44px}
.case-skip{display:block;margin-left:auto;min-height:44px;padding:8px 0;font-size:14px}.new-ui .session-summary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.new-ui #filters-button{display:none}.new-ui .case-home-button{display:inline-grid}.new-ui .feedback-actions{display:flex;flex-wrap:wrap;gap:12px}.new-ui .feedback-actions button{min-height:44px}.new-ui .feedback-card>button{margin:16px 8px 0 0;min-height:44px}.new-ui .busy-status{color:var(--accent-text)}.busy-status:before{content:'';display:inline-block;width:10px;height:10px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;margin-right:8px;animation:busy-turn 1s linear infinite}.record-wave{display:flex;gap:3px;align-items:center;justify-content:center;height:28px;margin:8px 0;color:var(--accent-text)}.wave-bar{height:24px;width:2px;background:currentColor;border-radius:99px;transform-origin:center;transition:transform 80ms linear}.record-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:record-pulse 1s ease-in-out infinite}
@keyframes busy-turn{to{transform:rotate(360deg)}}@keyframes record-pulse{50%{opacity:.3}}
@media(max-width:600px){.new-ui .course-question{grid-template-columns:16px minmax(0,1fr) 76px 61px;gap:6px;margin:0 10px}.new-ui .course-question-action{font-size:11px;padding:8px 5px}.new-ui .course-topic-heading{padding:14px;gap:10px}.new-ui .course-topic-name{font-size:14px}.new-ui .course-topic-meta{max-width:105px}.new-ui .setup-heading{margin-bottom:26px}.new-ui .setup-panel{padding-top:4px}.new-ui .level-row{grid-template-columns:1fr}.new-ui .weak-answer-row{grid-template-columns:minmax(0,1fr) 76px 61px;gap:6px}.new-ui .topbar .icon-button,.new-ui .topbar .back-button{width:44px;height:44px;flex:none}.new-ui .topbar{gap:10px}.new-ui .wordmark{flex:1;font-size:clamp(11px,3vw,13px)}.new-ui .session-controls .session-persona-picker{flex:1;max-width:none}.new-ui .session-persona-picker .persona-trigger{max-width:none;width:100%}.new-ui .session-controls{gap:8px}.new-ui .end-actions button{white-space:nowrap;font-size:13px}}
@media(prefers-reduced-motion:reduce){.wave-bar{transition:none}.record-dot,.busy-status:before{animation:none}}

.course-topic[open]>.course-difficulty,.course-difficulty[open]>.course-question,.course-history[open]>.history-list{animation:course-reveal 150ms ease-out}@keyframes course-reveal{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.course-topic[open]>.course-difficulty,.course-difficulty[open]>.course-question,.course-history[open]>.history-list{animation:none}}

/* Founder refinements: shared type, compact actions and earned progress. */
.new-ui .setup-heading h1 span{white-space:normal;font-size:clamp(1.65rem,6.9vw,3rem)}
.new-ui .recommendation-focus{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.5;margin:12px 0 18px}
.new-ui .surprise-button{width:100%;min-height:53px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:13px;font-size:clamp(13px,3.7vw,19px);margin-bottom:0}
.new-ui .recommended-button,.new-ui .surprise-button{height:53px;min-height:53px}
.new-ui .setup-fields .persona-trigger,.new-ui .setup-fields .choice-trigger{height:56px;min-height:56px;padding-top:0;padding-bottom:0;font-size:14px;line-height:1.3}
.new-ui .choose-case-heading{color:var(--accent-text);font-size:18px;margin:26px 0 14px;font-weight:700}
.course-topic-heading{grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:8px}
.course-chevron{width:18px;height:18px;color:var(--accent-text);flex:none;transition:transform .15s ease}
details[open]>.course-topic-heading>.course-chevron,details[open]>.course-difficulty-heading>.course-chevron{transform:rotate(180deg)}
.course-status{font-size:12px;font-weight:600;white-space:nowrap;color:var(--muted)}
.course-topic-heading>.course-topic-meta{width:clamp(118px,35vw,150px);max-width:none;min-width:0;align-items:flex-end}
.course-topic-heading>.course-topic-name{min-width:0;overflow-wrap:break-word}
.course-level-hint{font-size:12px;font-weight:600;line-height:1.35;color:var(--muted)}
.course-topic-meta>.course-level{font-size:12px;font-weight:700;white-space:normal}
.new-ui .course-question{grid-template-columns:14px minmax(0,1fr) 74px;gap:8px}
.course-question-controls{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0}
.new-ui .course-question-action{padding:5px 9px;min-height:32px;width:74px;font-size:11px;border-radius:999px}
.course-check{align-self:start;line-height:1.45;padding-top:12px;font-size:15px}
.course-level,.course-level[data-level=strong],.course-level[data-level=client-ready],.new-ui .level-value,.new-ui .level-indicator{font-family:inherit;font-weight:700;font-style:normal}
.new-ui .main-case-skip{margin:8px 0 4px auto;min-height:32px;padding:5px 0}
.new-ui .main-case-skip+.cover-points{margin-top:0}
.new-ui .busy-status{font-weight:700}
.new-ui .record-status.answer-notice{color:#b45309;border-color:#c26516}
.answer-notice-hint{display:block;margin-top:5px;font-size:inherit;font-weight:600}
:root[data-theme="dark"] .new-ui .record-status.answer-notice{color:#e8913f;border-color:#cd7727}
.new-ui .brand-mark{width:30px;height:30px;flex:none}
/* D1: the moon/sun toggle uses a rendered icon box the same size as the
   brand mark so it never shifts the topbar; the button keeps a 44px target. */
.new-ui .theme-toggle{width:44px;height:44px;min-width:44px}
.new-ui .theme-toggle>svg{width:30px;height:30px;display:block}
:root[data-theme="dark"] .new-ui .theme-toggle{background:#1b3427;border-color:#476154;color:#9dc4b0}
:root[data-theme="dark"] .new-ui .theme-toggle>svg{width:20px;height:20px;stroke-width:1.35}
.new-ui .sidebar-theme-glyph{display:block}
.new-ui .sidebar-theme-glyph svg{width:18px;height:18px;display:block}
.new-ui .wordmark{font-size:19px}
.new-ui .side-brand{font-size:19px}
.skill-group>.section-heading{margin:22px 0 5px;font-size:16px}
.skill-group .skill-subtitle{margin:0 0 12px}
.skill-building{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.skill-label{min-width:0;flex:none;white-space:nowrap}
.new-ui .dimension-row{gap:8px;min-width:0;align-items:center}
.new-ui .dimension-row>.course-level{font-size:12px}
.knowledge-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:9px 0 0}
.history-group-label{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:14px 16px;margin:0;white-space:normal;overflow-wrap:break-word;cursor:pointer;list-style:none}
.history-group-label::-webkit-details-marker{display:none}
.history-topic-name{min-width:0}
.history-topic[open]>.history-group-label>.course-chevron{transform:rotate(180deg)}
.history-topic+.history-topic{border-top:1px solid var(--line)}
/* History agent hook: the hint shows only while the outer History details is
   closed, and hides once it is open. Nested topic chevrons are owned there. */
.history-expand-hint{display:inline-block;margin-top:2px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;font-size:12px;color:var(--muted)}
.course-history[open]+.history-expand-hint{display:none}
.new-ui :is(#progress-view,#learn-view,#profile-view) .view-heading{margin:0 0 28px;padding:0}
.new-ui :is(#progress-view,#learn-view,#profile-view) .view-heading h1{margin:0 0 10px;padding:0;text-align:left;text-indent:0}
.new-ui :is(#progress-view,#learn-view,#profile-view) .view-heading p{margin:0;padding:0;text-align:left;text-indent:0}
.learn-topics{display:grid;gap:12px}
.learn-topic{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);min-width:0}
.learn-topic-name{min-width:0;font-size:15px;font-weight:650;line-height:1.45;overflow-wrap:anywhere}
.learn-soon{flex:none;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.learn-read{flex:none;min-height:44px;font-size:13px;font-weight:700;white-space:nowrap}
.learn-topic-actions{display:flex;gap:8px;flex:none}
.learn-topic-actions .learn-read{width:68px;min-width:68px;height:44px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);text-align:center}
.learn-topic:has(.learn-listen){gap:10px;padding:14px}
.listen-screen{display:grid;gap:16px;min-width:0;max-width:700px}
.listen-title{margin:0;font-size:20px;line-height:1.4;overflow-wrap:anywhere}
.listen-center{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 0}
.listen-circle{display:grid;place-items:center;width:144px;height:144px;flex:none;border:6px solid var(--accent);border-radius:50%;background:var(--surface);color:var(--accent-text);font-size:42px;font-weight:700;cursor:pointer}
.listen-circle.is-downloading{border:0;background:radial-gradient(closest-side,var(--surface) 88%,transparent 89%),conic-gradient(var(--accent) var(--download-progress,0%),var(--line) 0);font-size:28px;opacity:1;cursor:default}
.listen-message{margin:0;text-align:center;font-size:14px;line-height:1.5;max-width:320px}
.listen-controls{display:grid;gap:12px;min-width:0}
.listen-controls[hidden]{display:none}
.listen-scrubber{width:100%;margin:0;accent-color:var(--accent);min-height:32px;cursor:pointer}
.listen-time{text-align:center;font-variant-numeric:tabular-nums;margin:0;color:var(--muted);font-size:14px}
.listen-actions{display:flex;justify-content:center;gap:10px}
.listen-actions .secondary-button{min-height:44px;min-width:68px;margin:0;padding:8px 12px}
.listen-resume{margin:8px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.listen-start{justify-self:center}
.listen-storage-note:empty{display:none}
.learn-contents,.learn-reader{display:grid;gap:18px;min-width:0;max-width:700px}
.learn-back{display:none;justify-self:start}
@media(min-width:901px){.learn-back{display:block}}
.learn-title{margin:0;font-size:clamp(1.5rem,4vw,2rem);line-height:1.3;overflow-wrap:anywhere}
.learn-subtitle,.learn-part-count,.learn-note{margin:0;color:var(--muted);line-height:1.55}
.learn-part-count{font-size:14px}
.learn-parts{display:grid;gap:12px}
.learn-part-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);text-align:left;font:inherit;cursor:pointer}
.learn-part-title{min-width:0;font-size:16px;line-height:1.45;overflow-wrap:anywhere}
.learn-part-meta{display:flex;gap:10px;align-items:center;flex-shrink:0;color:var(--muted);font-size:14px;white-space:nowrap}
.learn-opened{color:var(--accent-text)}
.learn-part-body{min-width:0}
.learn-part-body .lesson-table-scroll :is(th,td){min-width:8rem}
.learn-reader-actions{display:flex;justify-content:space-between;gap:16px;margin:8px 0 18px}
.learn-next{margin-left:auto}
.new-ui .answer-composer.is-recording{gap:9px}
.new-ui .answer-composer .record-wave{flex:1;min-width:0;height:44px;margin:0;justify-content:stretch;overflow:hidden;gap:3px}
.new-ui .answer-composer .wave-bar{flex:1;max-width:5px;min-width:2px;height:28px}
.record-cancel{width:32px;height:44px;flex:none;border:0;background:none;color:var(--accent-text);font-size:28px;padding:0}
.new-ui .answer-composer.is-recording .composer-controls{gap:6px}
.new-ui .answer-composer.is-recording .record-timer{font-size:10px}
.new-ui .persona-badge{font-family:inherit;font-size:11px;line-height:1.3;padding:3px 8px;border-radius:999px;background:var(--badge-bg);color:var(--badge-text);white-space:nowrap}
@media(max-width:600px){
 .new-ui .wordmark{font-size:clamp(13px,3.8vw,15px);letter-spacing:.10em}
 .new-ui .topbar{gap:8px}
 .new-ui .brand-mark{width:29px;height:29px}
 .new-ui .theme-toggle>svg{width:29px;height:29px}
 .new-ui .course-topic-meta{max-width:115px}
 .new-ui .dimension-list{padding-left:12px;padding-right:12px}
 .new-ui .skill-label{font-size:13px}
 .new-ui .dimension-row>.course-level{font-size:12px}
 .new-ui .skill-building{font-size:11px}
}

/* Learn this concept: the entry inside feedback shows only when the private
   lesson exists. The reading screen fetches its text on demand; nothing here
   is bundled, stored, or precached. */
.new-ui .lesson-entry{margin-top:18px;display:grid;gap:8px}
.new-ui .lesson-open-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:53px;padding:13px 18px;border:1px solid var(--accent);border-radius:13px;background:var(--surface-2);color:var(--accent-text);font-size:15px;font-weight:700;line-height:1.35;text-align:left}
.new-ui .lesson-open-button:hover:not(:disabled){border-color:var(--accent-hover)}
.new-ui .lesson-open-label{min-width:0;overflow-wrap:anywhere}
.new-ui .lesson-open-arrow{flex:none;font-size:17px;line-height:1}
.new-ui .lesson-entry-note{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.new-ui .lesson-entry-error{color:var(--accent-text)}
/* A4: the strong-answer reveal keeps its existing open-on-demand rule, with a
   tinted card and a rotating arrow. The revealed answer matches the "Your
   answer" text size. */
.new-ui .strong-answer-card{margin-top:18px;padding:0;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;background:var(--surface-2);overflow:hidden}
.new-ui .strong-answer-card>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:12px 14px;cursor:pointer;list-style:none}
.new-ui .strong-answer-card>summary::-webkit-details-marker{display:none}
.new-ui .strong-answer-card>summary::after{content:none}
.new-ui .strong-answer-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.new-ui .strong-answer-label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.new-ui .strong-answer-note{font-size:12px;font-weight:400;color:var(--muted)}
.new-ui .strong-answer-arrow{margin-left:auto;flex:none;font-size:16px;line-height:1;color:var(--accent-text);transition:transform .15s ease}
.new-ui .strong-answer-card[open] .strong-answer-arrow{transform:rotate(90deg)}
/* The revealed answer matches the "Your answer" text size exactly. */
.new-ui .strong-answer-body{margin:0;padding:0 14px 14px;color:var(--text);font:inherit;font-size:inherit;line-height:1.58;white-space:pre-wrap}
@media(prefers-reduced-motion:reduce){.new-ui .strong-answer-arrow{transition:none}}

/* A5: the terminal surface is inline feedback, not a separate completion
   screen. Next case is the primary action. */
.new-ui .end-actions{flex-wrap:wrap}
.new-ui .end-actions .primary-button,.new-ui .end-actions .secondary-button{min-height:44px}

.lesson-screen{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--bg);color:var(--text)}
.lesson-topbar{flex:none;display:flex;align-items:center;gap:12px;padding:calc(9px + env(safe-area-inset-top)) clamp(16px,4vw,30px) 9px;border-bottom:1px solid var(--line);background:var(--surface)}
.lesson-chapter{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.lesson-scroll{flex:1;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.lesson-article{width:min(100%,700px);margin:0 auto;padding:26px clamp(18px,5vw,34px) 34px}
.lesson-title{margin:0 0 20px;font-size:clamp(1.5rem,5.2vw,2.1rem);line-height:1.2;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.lesson-body{font-size:17px;line-height:1.72;overflow-wrap:anywhere}
.lesson-body p{margin:0 0 18px}
.lesson-body h1,.lesson-body h2,.lesson-body h3,.lesson-body h4,.lesson-body h5,.lesson-body h6{margin:28px 0 10px;line-height:1.28;font-weight:700;letter-spacing:-.01em}
.lesson-body h1,.lesson-body h2{font-size:1.3rem}
.lesson-body h3{font-size:1.15rem}
.lesson-body h4,.lesson-body h5,.lesson-body h6{font-size:1.02rem}
.lesson-body ul,.lesson-body ol{margin:0 0 18px;padding-left:24px}
.lesson-body li{margin:0 0 9px}
.lesson-body li::marker{color:var(--accent-text)}
.lesson-body code{padding:1px 5px;border-radius:6px;background:var(--surface-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.lesson-deep{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.lesson-deep-summary{display:flex;align-items:center;min-height:44px;cursor:pointer;color:var(--accent-text);font-size:15px;font-weight:700}
.lesson-deep-body{margin-top:14px}
.lesson-actions{flex:none;display:flex;justify-content:center;padding:11px clamp(16px,5vw,34px) calc(11px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface)}
.lesson-retry{width:100%;max-width:420px}
body.lesson-open{overflow:hidden}

/* Wide lesson tables scroll inside their own frame so the page never does. */
.lesson-table-scroll{max-width:100%;margin:0 0 18px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.lesson-table-scroll table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.5}
.lesson-table-scroll th,.lesson-table-scroll td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.lesson-table-scroll th{background:var(--surface-2);font-weight:700;white-space:nowrap}
.lesson-table-scroll tr:last-child td{border-bottom:0}
@media(max-width:600px){
 .lesson-article{padding:22px 18px 30px}
 .lesson-body{font-size:17px;line-height:1.7}
 .lesson-table-scroll table{min-width:460px;font-size:14px}
 .lesson-table-scroll th,.lesson-table-scroll td{padding:9px 10px}
}