:root { font-family: var(--k-font-sans); color: var(--k-ink); background: var(--k-paper); font-synthesis: none; }
* { box-sizing: border-box; }
.page-recap[hidden] { display: none; }
.reopening-notice { display: flex; flex-wrap: wrap; align-items: start; gap: 16px; margin: 20px 0; padding: 22px; border: 1px solid var(--k-rule); border-radius: var(--k-radius); background: var(--k-hint-bg); color: var(--k-ink); }
.reopening-notice > div { flex: 1 1 320px; min-width: 0; }
.reopening-notice h2 { font-size: 1.15rem; margin-bottom: 10px; }
.reopening-notice p { line-height: 1.6; }
.reopening-notice p:last-child { margin-bottom: 0; }
.reopening-notice button { flex: 0 0 auto; }
.learning-disclosure { min-width: 0; border: 1px solid var(--k-rule); border-radius: var(--k-radius); padding: 16px; background: var(--k-sheet); }
.learning-disclosure > summary { cursor: pointer; color: var(--k-action); font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.learning-disclosure > summary:focus-visible { outline: 3px solid var(--k-action); outline-offset: 4px; }
.learning-disclosure[open] > summary { margin-bottom: 20px; }
.lesson-reference[open] { display: block; }
.lesson-reference > section, .lesson-reference > .insight-grid { margin-top: 24px; }
.communication-workshop { min-width: 0; margin-top: 28px; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--k-rule); border-radius: var(--k-radius); background: var(--k-sheet); overflow-wrap: anywhere; }
.communication-workshop h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
.communication-workshop h3 { margin: 22px 0 12px; }
.communication-model, .communication-checks { padding-left: 24px; }
.communication-model li, .communication-checks li { padding-left: 6px; margin-bottom: 16px; line-height: 1.6; }
.communication-model p { margin: 8px 0; }
.communication-model [lang="de"], .communication-final-model { white-space: pre-line; color: var(--k-action); font-weight: 650; }
.communication-workshop form { margin: 24px 0; }
.communication-workshop label { display: block; font-weight: 600; margin-bottom: 10px; }
.communication-workshop textarea { display: block; width: 100%; max-width: 100%; min-width: 0; resize: vertical; min-height: 150px; padding: 14px; color: var(--k-ink); background: var(--k-paper); border: 1px solid var(--k-rule); border-radius: var(--k-radius); font: inherit; line-height: 1.6; }
.communication-workshop [role="status"], .communication-workshop .subtle { font-size: .875rem; margin: 12px 0; }
.communication-workshop > aside, .practice-scope { padding: 18px; margin-top: 20px; border-radius: 0; color: var(--k-ink); background: var(--k-tint); }
.communication-workshop > aside p, .practice-scope p { margin-bottom: 0; }
.written-exchange__history { padding: 0; list-style: none; display: grid; gap: 12px; margin: 20px 0; }
.written-exchange__line { padding: 16px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-paper); }
.written-exchange__line--learner { margin-left: min(8%, 44px); background: var(--k-tint); }
.written-exchange__line p { margin: 6px 0 0; white-space: pre-wrap; }
.written-exchange__constraints { padding-left: 24px; line-height: 1.7; }
.written-exchange__form .button, .written-exchange > .button { margin: 12px 10px 0 0; min-height: 48px; white-space: normal; max-width: 100%; }
.written-exchange__status { white-space: pre-wrap; }
.practice-scope h3 { margin: 0 0 8px; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--k-paper); transition: color .2s, background .2s; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.035em; }
h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.06; }
h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.14; }
p { line-height: 1.58; }
.center-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; color: var(--k-muted); }
.loader { width: 38px; height: 38px; border: 3px solid var(--k-tint); border-top-color: var(--k-action); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; }
.kicker { margin: 0 0 10px; color: var(--k-action); font-size: var(--k-text-sm); line-height: 1.2; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.kicker--light { color: var(--k-muted); }
.subtle { color: var(--k-muted); }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: var(--k-radius); padding: 10px 17px; font-weight: 650; transition: transform .15s, background .15s, border-color .15s; }
.button:not(:disabled):hover { transform: translateY(-1px); }
.button:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 3px solid var(--k-action); outline-offset: 2px; }
.button--primary { color: var(--k-on-action); background: var(--k-action); }
.button--primary:not(:disabled):hover { color: var(--k-on-action); background: var(--k-action); text-decoration: underline; text-underline-offset: 3px; }
.scenario-teaser .button--light { color: var(--k-on-action); background: var(--k-action); border-color: var(--k-action); }
.button--light { color: var(--k-action); background: var(--k-sheet); border: 1px solid var(--k-control); }
.button--quiet { color: var(--k-action); background: transparent; border: 1px solid var(--k-control); }
.button--wide { width: 100%; }
.button svg, .text-button svg { width: 16px; }
.text-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; color: var(--k-action); background: transparent; font-weight: 650; }
.back-link { border: 0; background: transparent; color: var(--k-action); padding: 0; margin-bottom: 24px; font-weight: 600; }
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 1.05fr) minmax(430px, .95fr); }
.login-story { position: relative; overflow: hidden; min-height: 100vh; padding: clamp(32px, 5vw, 68px); display: flex; flex-direction: column; color: var(--k-ink); background: var(--k-rail); }
.login-story .brand { position: relative; z-index: 1; }
.login-story__copy { position: relative; z-index: 1; max-width: 650px; margin: auto 0; }
.login-story__copy h1 { max-width: 690px; font-size: clamp(2.7rem, 5vw, 5.1rem); margin-bottom: 24px; }
.login-story__copy > p:last-child { max-width: 560px; color: var(--k-muted); font-size: 18px; }
.story-situation { position: relative; z-index: 1; max-width: 430px; padding: 18px 20px; display: grid; gap: 5px; border: 0; border-top: 3px solid var(--k-tab); background: transparent; }
.story-situation span, .story-situation small { color: var(--k-muted); font-size: var(--k-text-xs); }
.login-panel { min-height: 100vh; padding: 40px; display: grid; place-items: center; background: var(--k-sheet); }
.login-card { width: min(440px, 100%); }
.mobile-brand { display: none; margin-bottom: 42px; }
.login-card h2 { font-size: 32px; margin-bottom: 10px; }
.form-stack { display: grid; gap: 17px; margin-top: 28px; }
.form-stack--roomy { gap: 22px; }
.form-stack label, .admin-create label { display: grid; gap: 8px; color: var(--k-ink); font-size: var(--k-text-sm); font-weight: 600; }
input, select { width: 100%; min-height: 48px; border: 1px solid var(--k-control); border-radius: var(--k-radius); padding: 10px 12px; color: var(--k-ink); background: var(--k-sheet); }
input:hover, select:hover { border-color: var(--k-action); }
.inline-error { padding: 11px 13px; color: var(--k-bad); background: var(--k-bad-bg); border-radius: 0; font-size: var(--k-text-sm); }
.demo-hint { margin: 24px 0 0; color: var(--k-muted); font-size: var(--k-text-xs); text-align: center; }
.onboarding-page { min-height: 100vh; padding: 34px 20px; display: grid; place-items: center; background: var(--k-paper); }
.onboarding-card { width: min(650px, 100%); padding: clamp(25px, 5vw, 48px); border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.onboarding-card--wide { width: min(760px, 100%); }
.onboarding-card > .brand { margin-bottom: 36px; }
.onboarding-card h1 { margin-bottom: 12px; }
.steps { display: flex; gap: 7px; margin-bottom: 30px; }
.steps span { width: 42px; height: 5px; border-radius: 0; background: var(--k-rule); }
.steps .is-active, .steps .is-done { background: var(--k-action); }
.segmented { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.segmented label { display: block; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { min-height: 44px; display: grid; place-items: center; border: 1px solid var(--k-control); border-radius: var(--k-radius); background: var(--k-sheet); color: var(--k-ink); }
.segmented input:checked + span { border-color: var(--k-action); color: var(--k-action); background: var(--k-tint); box-shadow: inset 0 0 0 1px var(--k-action); }
.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 27px 0 30px; }
.goal-choice { min-height: 58px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--k-control); border-radius: var(--k-radius); padding: 12px 15px; color: var(--k-ink); background: var(--k-sheet); text-align: left; }
.goal-choice svg { opacity: 0; color: var(--k-action); }
.goal-choice.is-selected { border-color: var(--k-action); background: var(--k-tint); box-shadow: inset 0 0 0 1px var(--k-action); }
.goal-choice.is-selected svg { opacity: 1; }
.form-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 28px; }
.placement-top { display: grid; gap: 14px; margin-bottom: 38px; }
.placement-top > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.placement-top .kicker { margin: 0; }
.progress-track { height: 7px; overflow: hidden; border-radius: 0; background: var(--k-rule); }
.progress-track > span, .progress-track > i { display: block; height: 100%; border-radius: inherit; background: var(--k-action); }
.question-block h1 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); margin: 10px 0 25px; }
.question-type { color: var(--k-muted); font-size: var(--k-text-sm); font-weight: 650; text-transform: uppercase; letter-spacing: .1em; }
.answer-list { display: grid; gap: 10px; }
.answer-option { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid var(--k-control); border-radius: var(--k-radius); padding: 12px 15px; color: var(--k-ink); background: var(--k-sheet); text-align: left; transition: border-color .15s, background .15s; }
.answer-option:hover:not(:disabled) { border-color: var(--k-action); }
.answer-option i { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--k-control); border-radius: 50%; color: transparent; }
.answer-option i svg { width: 14px; }
.answer-option.is-selected { border-color: var(--k-action); background: var(--k-tint); box-shadow: inset 0 0 0 1px var(--k-action); }
.answer-option.is-selected i { border-color: var(--k-action); color: var(--k-on-action); background: var(--k-action); }
.answer-option.is-correct i { border-color: var(--k-good); color: var(--k-on-good); background: var(--k-good); }
.answer-option.is-wrong i { border-color: var(--k-bad); color: var(--k-on-bad); background: var(--k-bad); }
.answer-option.is-correct { color: var(--k-good); border-color: var(--k-good); background: var(--k-good-bg); }
.answer-option.is-wrong { border-color: var(--k-bad); background: var(--k-bad-bg); }
.result-badge { width: fit-content; margin: 0 auto 25px; display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 0; color: var(--k-action); background: var(--k-tint); font-size: var(--k-text-xs); font-weight: 650; }
.level-result { text-align: center; }
.level-result > span { color: var(--k-muted); font-size: var(--k-text-sm); }
.level-result > strong { display: block; margin: 8px 0 2px; color: var(--k-action); font-size: 76px; line-height: 1; letter-spacing: -.08em; }
.level-result p { color: var(--k-muted); }
.skill-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0; }
.skill-results > div { display: grid; grid-template-columns: 1fr auto; gap: 8px 15px; padding: 14px; border: 1px solid var(--k-rule); border-radius: 0; }
.skill-results span { color: var(--k-muted); font-size: var(--k-text-xs); }
.skill-results strong { color: var(--k-action); }
.mini-progress { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 0; background: var(--k-rule); }
.mini-progress i { display: block; height: 100%; background: var(--k-action); }
.recommendation { margin-bottom: 25px; padding: 18px; border-radius: 0; background: var(--k-hint-bg); }
.recommendation span { color: var(--k-ink); font-size: var(--k-text-sm); font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.recommendation strong { display: block; margin: 6px 0 3px; }
.recommendation p { margin: 0; color: var(--k-muted); font-size: var(--k-text-sm); }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 29px 18px 20px; display: flex; flex-direction: column; color: var(--k-ink); background: var(--k-rail); border-right: 1px solid var(--k-rule); }
.sidebar > .brand { padding: 0 10px 32px; }
.primary-nav { display: grid; gap: 5px; }
.nav-item { min-height: 45px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: var(--k-radius); padding: 10px 12px; color: var(--k-ink); background: transparent; text-align: left; }
.nav-item svg { width: 19px; height: 19px; }
.nav-item:hover, .nav-item.is-active { color: var(--k-action); background: var(--k-tint); }
.nav-item.is-active { box-shadow: inset 3px 0 0 var(--k-action); }
.sidebar-user { margin-top: auto; padding: 17px 8px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; border-top: 1px solid var(--k-rule); }
.sidebar-user > div { min-width: 0; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--k-rule); border-radius: 50%; color: var(--k-ink); background: var(--k-note); font-size: 16px; font-weight: 650; }
/* F22: name and level wrap instead of being cut off. */
.sidebar-user strong, .sidebar-user span { display: block; min-width: 0; overflow-wrap: anywhere; }
.sidebar-user strong { font-size: var(--k-text-xs); }
.sidebar-user span { margin-top: 3px; color: var(--k-muted); font-size: var(--k-text-xs); }
.sidebar-user > button { border: 0; color: var(--k-ink); background: transparent; }
.sidebar-footer { margin-top: auto; }
.theme-toggle { width: 100%; min-height: 40px; margin-bottom: 11px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--k-control); border-radius: var(--k-radius); padding: 8px 11px; color: var(--k-ink); background: transparent; text-align: left; }
.theme-toggle:hover { color: var(--k-ink); background: var(--k-tint); }
.theme-toggle svg { width: 17px; }
.theme-toggle--icon { width: 38px; height: 38px; min-height: 38px; margin: 0; justify-content: center; padding: 0; color: var(--k-ink); border-color: var(--k-rule); background: var(--k-sheet); }
.mobile-header__actions { display: flex; align-items: center; gap: 9px; }
.nav-item:disabled { cursor: not-allowed; opacity: .38; }
.nav-item:disabled:hover { color: var(--k-ink); background: transparent; }
.workspace { min-width: 0; }
.page { width: min(1120px, 100%); margin: 0 auto; padding: 54px 42px 80px; }
.page-heading { margin-bottom: 31px; }
.page-heading > p:last-child { max-width: 700px; margin-bottom: 0; color: var(--k-muted); }
.page-heading--row { display: flex; justify-content: space-between; gap: 25px; align-items: flex-end; }
.page-heading--row h1 { margin-bottom: 10px; }
.mobile-header, .mobile-nav { display: none; }
.today-label { margin-bottom: 18px; padding: 6px 10px; border: 1px solid var(--k-rule); border-radius: 0; color: var(--k-muted); font-size: var(--k-text-sm); font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.today-fact { margin-top: 27px; text-align: center; }
.today-fact strong { display: block; font-size: 24px; }
.today-fact span { color: var(--k-muted); font-size: var(--k-text-xs); }
.section-block { margin-top: 45px; }
.section-title { margin-bottom: 17px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.section-title h2, .section-title .kicker { margin-bottom: 0; }
.section-counter, .section-title > span { color: var(--k-muted); font-size: var(--k-text-xs); }
.lesson-page { width: min(980px, 100%); }
.lesson-hero { margin-bottom: 35px; padding: 30px; display: grid; grid-template-columns: 1fr auto; gap: 25px; border-radius: 0; color: var(--k-ink); background: transparent; }
.lesson-hero h1 { margin-bottom: 10px; }
.lesson-about > p { color: var(--k-muted); }
.lesson-outcome { max-width: 680px; margin: 19px 0 17px; padding: 0 0 0 14px; border: 0; border-left: 3px solid var(--k-tab); background: transparent; }
.lesson-outcome span, .lesson-outcome strong { display: block; }
.lesson-outcome span { margin-bottom: 5px; color: var(--k-muted); font-size: var(--k-text-xs); font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }
.lesson-outcome strong { font-size: var(--k-text-sm); line-height: 1.5; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--k-muted); font-size: var(--k-text-sm); }
.lesson-meta span { display: flex; align-items: center; gap: 5px; }
.lesson-meta svg { width: 13px; }
.lesson-progress { min-width: 105px; display: grid; place-content: center; text-align: center; border-left: 1px solid var(--k-rule); }
.lesson-progress strong { font-size: 28px; }
.lesson-progress span { color: var(--k-muted); font-size: var(--k-text-sm); }
.lesson-roadmap { margin-bottom: 42px; padding: 24px; display: grid; grid-template-columns: 240px 1fr; gap: 30px; align-items: start; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.lesson-roadmap h2 { margin: 0; font-size: 21px; }
.lesson-roadmap ol { margin: 0; padding: 0; display: grid; gap: 10px; list-style: none; counter-reset: lesson-goal; }
.lesson-roadmap li { min-height: 44px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; color: var(--k-ink); font-size: var(--k-text-xs); line-height: 1.45; }
.lesson-roadmap li svg { width: 25px; height: 25px; padding: 5px; border-radius: 50%; color: var(--k-action); background: var(--k-tint); }
.lesson-story-overview { margin: -19px 0 42px; padding: 22px 24px; display: grid; grid-template-columns: auto 1fr; gap: 17px; align-items: start; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.lesson-story-overview > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--k-radius); color: var(--k-on-action); background: var(--k-action); }
.lesson-story-overview > span svg { width: 21px; }
.lesson-story-overview h2 { margin-bottom: 7px; font-size: 19px; }
.lesson-story-overview p:not(.kicker) { margin-bottom: 8px; color: var(--k-ink); font-size: var(--k-text-sm); }
.lesson-story-overview small { color: var(--k-muted); font-size: var(--k-text-sm); }
.lesson-section { margin-top: 45px; }
.phrase-groups { display: grid; gap: 27px; }
.phrase-groups > div > h3 { margin-bottom: 12px; color: var(--k-muted); font-size: var(--k-text-sm); letter-spacing: .09em; text-transform: uppercase; }
.vocabulary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.vocabulary-grid article { padding: 14px 16px; border: 1px solid var(--k-rule); border-radius: var(--k-radius); background: var(--k-sheet); }
.vocabulary-grid strong, .vocabulary-grid span { display: block; }
.vocabulary-grid strong { font-size: 16px; }
.vocabulary-grid span { margin-top: 4px; color: var(--k-muted); font-size: var(--k-text-xs); }
.language-note { margin: 35px 0; padding: 24px; display: grid; grid-template-columns: auto 1fr; gap: 17px; border-radius: 0; background: var(--k-hint-bg); }
.language-note > div:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--k-radius); color: var(--k-hint); background: var(--k-sheet); }
.language-note h2 { margin-bottom: 8px; font-size: 19px; }
.language-note p:last-child { margin: 0; color: var(--k-ink); }
.insight-grid { margin: 35px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.insight-grid .language-note { height: 100%; margin: 0; }
.culture-note { padding: 24px; display: grid; grid-template-columns: auto 1fr; gap: 17px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.culture-note > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--k-radius); color: var(--k-on-action); background: var(--k-action); font-size: var(--k-text-xs); font-weight: 650; }
.culture-note h2 { margin-bottom: 8px; font-size: 19px; }
.culture-note p:last-child { margin: 0; color: var(--k-ink); font-size: var(--k-text-sm); }
.dialogue-section { scroll-margin-top: 20px; }
.dialogue-card { overflow: hidden; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.dialogue-card article { min-height: 82px; padding: 17px 20px; display: grid; grid-template-columns: 120px 1fr; gap: 18px; border-bottom: 1px solid var(--k-rule); }
.dialogue-card article:last-child { border-bottom: 0; }
.dialogue-card article:nth-child(even) { background: var(--k-paper); }
.dialogue-card article > span { color: var(--k-action); font-size: var(--k-text-sm); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.dialogue-card strong, .dialogue-card p { display: block; }
.dialogue-card strong { margin-bottom: 5px; font-size: 15px; line-height: 1.4; }
.dialogue-card p { margin: 0; color: var(--k-muted); font-size: var(--k-text-xs); }
.speaking-mission { margin-top: 12px; padding: 20px; display: grid; grid-template-columns: auto 1fr; gap: 15px; border-radius: 0; color: var(--k-ink); background: var(--k-note); }
.speaking-mission > div:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--k-radius); color: var(--k-action); background: var(--k-sheet); }
.speaking-mission .kicker { color: var(--k-muted); }
.speaking-mission strong, .speaking-mission span { display: block; }
.speaking-mission strong { margin-bottom: 7px; line-height: 1.45; }
.speaking-mission span { color: var(--k-ink); font-size: 14px; line-height: 1.5; }
.practice-pages { scroll-margin-top: 18px; }
.lesson-page-tabs { margin-bottom: 15px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.lesson-page-tab { min-height: 77px; padding: 10px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 3px 8px; border: 1px solid var(--k-control); border-radius: var(--k-radius); color: var(--k-ink); background: var(--k-sheet); text-align: left; }
.lesson-page-tab > span { grid-row: 1 / 3; align-self: center; color: var(--k-muted); font-size: 18px; font-weight: 650; letter-spacing: -.04em; }
.lesson-page-tab strong { overflow: hidden; font-size: var(--k-text-sm); line-height: 1.25; }
.lesson-page-tab em { color: var(--k-muted); font-size: var(--k-text-sm); font-style: normal; }
.lesson-page-tab:hover { border-color: var(--k-action); }
.lesson-page-tab.is-active { border-color: var(--k-action); color: var(--k-on-action); background: var(--k-action); }
.lesson-page-tab.is-active > span, .lesson-page-tab.is-active em { color: var(--k-on-action); }
.lesson-page-tab.is-complete:not(.is-active) { border-color: var(--k-good); background: var(--k-good-bg); }
.lesson-page-tab.is-complete:not(.is-active) em { color: var(--k-action); font-weight: 650; }
.practice-page-intro { margin-bottom: 14px; overflow: hidden; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.practice-page-intro > header { padding: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; border-bottom: 1px solid var(--k-rule); background: var(--k-sheet); }
.practice-page-intro > header h2 { margin: 6px 0 7px; font-size: 24px; }
.practice-page-intro > header p:last-child { max-width: 630px; margin: 0; color: var(--k-muted); font-size: var(--k-text-xs); }
.practice-page-score { min-width: 113px; padding: 13px 15px; display: flex; align-items: center; gap: 9px; border-radius: var(--k-radius); color: var(--k-action); background: var(--k-tint); }
.practice-page-score strong { font-size: 29px; line-height: 1; }
.practice-page-score span { color: var(--k-action); font-size: var(--k-text-sm); line-height: 1.25; }
.practice-page-info { padding: 22px 24px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 28px; }
.practice-page-info > div > p:not(.kicker) { margin: 8px 0; color: var(--k-ink); font-size: var(--k-text-xs); }
.practice-page-info > div > strong { display: block; margin-top: 13px; padding-left: 12px; border-left: 3px solid var(--k-tab); font-size: var(--k-text-xs); line-height: 1.5; }
.practice-page-info aside { padding: 17px; border-radius: 0; background: var(--k-tint); }
.practice-page-info aside strong, .practice-page-info aside span { display: block; }
.practice-page-info aside strong { margin: 8px 0 6px; font-size: 14px; line-height: 1.45; }
.practice-page-info aside span { color: var(--k-muted); font-size: var(--k-text-sm); }
.story-step { padding: 20px 24px; display: grid; grid-template-columns: auto 1fr; gap: 16px; border-bottom: 1px solid var(--k-rule); background: linear-gradient(135deg, var(--k-tint), var(--k-sheet)); }
.story-step > span { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--k-rule); border-radius: 50%; color: var(--k-action); background: var(--k-sheet); font-size: var(--k-text-sm); font-weight: 650; }
.story-step p:not(.kicker) { margin: 0 0 6px; color: var(--k-ink); font-size: var(--k-text-xs); }
.story-step strong { font-size: var(--k-text-xs); line-height: 1.5; }
.practice-hint { padding: 15px 24px; display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; color: var(--k-hint); border-top: 1px solid var(--k-rule); background: var(--k-hint-bg); }
.practice-hint > svg { width: 23px; }
.practice-hint strong { display: block; margin-top: 3px; font-size: var(--k-text-sm); line-height: 1.5; }
.exercise-stack { display: grid; gap: 13px; }
.exercise-card { padding: 22px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.exercise-card.is-locked { border-color: var(--k-rule); }
.exercise-card > header { display: flex; align-items: center; gap: 9px; }
.exercise-card > header > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--k-action); background: var(--k-tint); font-size: var(--k-text-sm); font-weight: 650; }
.exercise-card > header p { margin: 0; color: var(--k-muted); font-size: var(--k-text-sm); font-weight: 650; text-transform: uppercase; letter-spacing: .09em; }
.exercise-card > header em { margin-left: auto; color: var(--k-action); font-size: var(--k-text-sm); font-style: normal; }
.exercise-card h3 { margin: 17px 0; font-size: 17px; letter-spacing: -.015em; }
.contrast-teaching { margin: 16px 0; padding: 24px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 25px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-hint-bg); }
.contrast-teaching h2 { margin-bottom: 8px; font-size: 20px; }
.contrast-teaching > div:first-child > p:last-child { margin: 0; color: var(--k-ink); font-size: var(--k-text-xs); }
.contrast-items { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.contrast-items article { padding: 15px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.contrast-items strong, .contrast-items span { display: block; }
.contrast-items strong { color: var(--k-action); font-size: 15px; }
.contrast-items span { margin: 4px 0 8px; color: var(--k-muted); font-size: var(--k-text-sm); }
.contrast-items p { margin: 0; color: var(--k-ink); font-size: var(--k-text-sm); line-height: 1.5; }
.exercise-hint-ladder { margin: -4px 0 16px; padding: 13px 15px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-hint-bg); }
.exercise-hint-ladder ol { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.exercise-hint-ladder li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; color: var(--k-ink); font-size: var(--k-text-sm); line-height: 1.5; }
.exercise-hint-ladder li strong { color: var(--k-hint); }
.exercise-hint-ladder li span { min-width: 0; }
.exercise-hint-ladder .text-button { padding-bottom: 0; color: var(--k-hint); font-size: var(--k-text-sm); }
.exercise-hint-ladder .text-button:disabled { opacity: .65; }
.hint-usage { margin: -5px 0 13px; color: var(--k-muted); font-size: var(--k-text-sm); }
.typed-answer { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: end; }
.typed-answer label { display: grid; gap: 6px; color: var(--k-ink); font-size: var(--k-text-sm); font-weight: 650; }
.typed-answer textarea { resize: vertical; line-height: 1.6; font: inherit; }
.typed-answer input, .typed-answer textarea { min-height: 44px; width: 100%; padding: 10px 12px; border: 1px solid var(--k-control); border-radius: var(--k-radius); color: var(--k-ink); background: var(--k-sheet); }
.typed-answer small { grid-column: 1 / -1; color: var(--k-muted); font-size: var(--k-text-sm); line-height: 1.45; }
.answer-list--compact { grid-template-columns: repeat(3, 1fr); }
.order-answer { min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; border: 1px dashed var(--k-control); border-radius: var(--k-radius); padding: 10px; background: var(--k-paper); }
.order-answer span { color: var(--k-muted); font-size: var(--k-text-xs); }
.order-answer button, .word-bank button { border: 1px solid var(--k-control); border-radius: var(--k-radius); padding: 8px 11px; color: var(--k-ink); background: var(--k-sheet); }
.word-bank { margin: 12px 0; display: flex; flex-wrap: wrap; gap: 7px; }
.word-bank button:disabled { opacity: .3; }
.exercise-actions { display: flex; justify-content: flex-end; gap: 8px; }
.locked-answer { padding: 13px 15px; display: grid; gap: 4px; border: 1px solid var(--k-rule); border-radius: var(--k-radius); background: var(--k-paper); }
.locked-answer span { color: var(--k-muted); font-size: var(--k-text-sm); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.locked-answer strong { font-size: 14px; }
.exercise-feedback { margin-top: 16px; overflow: hidden; border: 1px solid var(--k-good); border-radius: var(--k-radius); background: var(--k-good-bg); }
.exercise-feedback.is-wrong { border-color: var(--k-bad); background: var(--k-bad-bg); }
.exercise-feedback > header { padding: 13px 15px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--k-rule); }
.exercise-feedback.is-wrong > header { border-color: var(--k-rule); }
.exercise-feedback > header > span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--k-on-good); background: var(--k-good); font-weight: 650; }
.exercise-feedback.is-wrong > header > span { background: var(--k-bad); }
.exercise-feedback > header svg { width: 15px; }
.exercise-feedback > header strong, .exercise-feedback > header p { display: block; margin: 0; }
.exercise-feedback > header strong { color: var(--k-action); font-size: var(--k-text-sm); }
.exercise-feedback.is-wrong > header strong { color: var(--k-bad); }
.exercise-feedback > header p { margin-top: 2px; font-size: var(--k-text-sm); }
.exercise-feedback > header em { display: block; margin-top: 4px; color: var(--k-muted); font-size: var(--k-text-sm); font-style: normal; }
.exercise-feedback > section { padding: 14px 15px; }
.exercise-feedback .selected-answer-feedback { border-bottom: 1px solid var(--k-rule); background: var(--k-bad-bg); }
.exercise-feedback .selected-answer-feedback .kicker { color: var(--k-bad); }
.exercise-feedback > section > p:last-child, .exercise-feedback__details p:last-child { margin: 5px 0 0; color: var(--k-ink); font-size: var(--k-text-xs); line-height: 1.55; }
.exercise-feedback__details { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--k-rule); background: var(--k-sheet); }
.exercise-feedback__details > div { padding: 13px 15px; }
.exercise-feedback__details > div + div { border-left: 1px solid var(--k-rule); }
.page-recap { margin-top: 16px; overflow: hidden; border: 1px solid var(--k-rule); border-radius: var(--k-radius); background: var(--k-sheet); }
.page-recap > header { padding: 22px 24px; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; border-bottom: 1px solid var(--k-rule); background: var(--k-tint); }
.page-recap h2 { margin-bottom: 6px; font-size: 20px; }
.page-recap header p:last-child { margin: 0; color: var(--k-ink); font-size: var(--k-text-xs); }
.recap-score { display: grid; grid-template-columns: repeat(4, minmax(76px, 1fr)); gap: 6px; }
.recap-score span { padding: 10px; border-radius: var(--k-radius); color: var(--k-muted); background: var(--k-sheet); font-size: var(--k-text-sm); text-align: center; }
.recap-score strong { display: block; margin-bottom: 2px; color: var(--k-action); font-size: 20px; }
.recap-phrases { padding: 17px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Pages 3 and 9 recap three taught phrases; page 6 recaps its four-line dialogue,
   which would leave a lone card on a second row of three. */
.recap-phrases[data-recap-count="4"] { grid-template-columns: repeat(2, 1fr); }
.recap-phrases > span { padding: 11px 12px; border: 1px solid var(--k-rule); border-radius: var(--k-radius); }
.recap-phrases strong, .recap-phrases small { display: block; }
.recap-phrases strong { margin-bottom: 3px; font-size: var(--k-text-xs); }
.recap-phrases small { color: var(--k-muted); font-size: var(--k-text-sm); }
.page-recap > aside { padding: 16px 24px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; color: var(--k-hint); border-top: 1px solid var(--k-rule); background: var(--k-hint-bg); }
.page-recap > aside > svg { width: 23px; }
.page-recap > aside strong { font-size: var(--k-text-sm); line-height: 1.5; }
.practice-page-controls { margin-top: 15px; padding: 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.practice-page-controls > button:last-child { justify-self: end; }
.practice-page-controls > div { text-align: center; }
.practice-page-controls > div strong, .practice-page-controls > div span { display: block; }
.practice-page-controls > div strong { font-size: 16px; }
.practice-page-controls > div span { color: var(--k-muted); font-size: var(--k-text-sm); }
.practice-page-controls .button:disabled { opacity: .35; }
.feedback { margin-top: 14px; padding: 13px 15px; border-radius: 0; }
.feedback strong { display: block; margin-bottom: 3px; }
.feedback p { margin: 0; font-size: var(--k-text-sm); }
/* The review, daily-practice and vocabulary-typing rounds each place their
   next-step button straight after the feedback. Matching the feedback’s own
   top margin keeps the two apart wherever that pair appears. */
.feedback + .button { margin-top: 14px; }
.feedback--correct { color: var(--k-good); background: var(--k-good-bg); }
.feedback--wrong { color: var(--k-bad); background: var(--k-bad-bg); }
.scenario-teaser { margin-top: 46px; padding: 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; border-left: 3px solid var(--k-tab); border-radius: var(--k-radius); color: var(--k-ink); background: var(--k-note); }
.scenario-teaser p { max-width: 590px; color: var(--k-ink); }
.scenario-teaser span { color: var(--k-muted); font-size: 14px; }
.complete-strip { margin-top: 18px; padding: 23px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border: 1px solid var(--k-rule); border-radius: var(--k-radius); background: var(--k-sheet); }
.complete-strip h2 { margin-bottom: 5px; font-size: 19px; }
.complete-strip [data-lesson-completion-copy] { margin: 0; color: var(--k-muted); font-size: var(--k-text-xs); }
.complete-strip > div { flex: 1; }
.complete-strip .button:disabled { opacity: .42; box-shadow: none; }
.completion-progress { width: min(360px, 100%); height: 6px; margin-top: 12px; overflow: hidden; border-radius: 0; background: var(--k-rule); }
.completion-progress i { height: 100%; display: block; border-radius: inherit; background: var(--k-action); transition: width .25s ease; }
.scenario-total { min-width: 145px; padding: 16px 19px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.scenario-total strong { font-size: 32px; letter-spacing: -.06em; }
.scenario-total span { color: var(--k-muted); font-size: var(--k-text-sm); line-height: 1.25; }
.scenario-guide { margin-bottom: 23px; padding: 17px 19px; display: flex; align-items: center; gap: 14px; border-radius: 0; color: var(--k-hint); background: var(--k-hint-bg); }
.scenario-guide > div:first-child { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--k-radius); background: var(--k-sheet); }
.scenario-guide strong { display: block; margin-bottom: 3px; }
.scenario-guide p { margin: 0; color: var(--k-muted); font-size: 14px; }
.scenario-filters { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.scenario-filters button { min-height: 38px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--k-rule); border-radius: var(--k-radius); color: var(--k-ink); background: var(--k-sheet); font-size: var(--k-text-sm); font-weight: 650; }
.scenario-filters button span { min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--k-radius); color: inherit; background: transparent; font-size: var(--k-text-sm); }
.scenario-filters button.is-active { border-color: var(--k-action); color: var(--k-on-action); background: var(--k-action); }
.scenario-filters button.is-active span { color: inherit; background: transparent; }
.scenario-library { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.scenario-card { min-height: 320px; padding: 23px; display: flex; flex-direction: column; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.scenario-card.is-complete { border-color: var(--k-rule); background: linear-gradient(145deg, var(--k-sheet), var(--k-tint)); }
.scenario-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.scenario-domain { color: var(--k-action); font-size: var(--k-text-sm); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.scenario-status { display: flex; align-items: center; gap: 4px; color: var(--k-muted); font-size: var(--k-text-sm); font-weight: 650; }
.scenario-status svg { width: 14px; color: var(--k-action); }
.scenario-card h2 { margin: 24px 0 8px; font-size: 23px; }
.scenario-card > p { margin-bottom: 18px; color: var(--k-muted); font-size: var(--k-text-sm); }
.scenario-objective { margin-bottom: 20px; padding: 12px 14px; border-left: 3px solid var(--k-tab); background: transparent; }
.scenario-objective span, .scenario-objective strong { display: block; }
.scenario-objective span { margin-bottom: 3px; color: var(--k-muted); font-size: var(--k-text-sm); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.scenario-objective strong { font-size: var(--k-text-xs); line-height: 1.4; }
.scenario-card footer { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 13px; border-top: 1px solid var(--k-rule); }
.scenario-card footer > span { color: var(--k-muted); font-size: var(--k-text-sm); }
.scenario-card footer .button { flex: 0 0 auto; }
.scenario-page { width: min(1000px, 100%); }
.scenario-briefing { overflow: hidden; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.scenario-briefing > header { padding: clamp(25px, 5vw, 46px); display: flex; align-items: flex-start; justify-content: space-between; gap: 35px; border-bottom: 1px solid var(--k-rule); background: transparent; }
.scenario-briefing > header h1 { max-width: 700px; margin-bottom: 12px; }
.scenario-briefing > header p:last-child { max-width: 660px; margin: 0; color: var(--k-muted); }
.scenario-duration { min-width: 112px; padding: 15px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 7px; border: 1px solid var(--k-rule); border-radius: 0; color: var(--k-action); background: var(--k-tint); }
.scenario-duration strong { font-size: 31px; line-height: 1; letter-spacing: -.05em; }
.scenario-duration span { font-size: var(--k-text-sm); font-weight: 650; }
.scenario-duration small { grid-column: 1 / -1; margin-top: 6px; color: var(--k-action); font-size: var(--k-text-sm); }
.scenario-briefing__goal { margin: 25px clamp(25px, 5vw, 46px) 0; padding: 21px 23px; display: grid; grid-template-columns: auto 1fr; gap: 18px; border-left: 3px solid var(--k-tab); border-radius: 0; color: var(--k-ink); background: transparent; }
.scenario-briefing__goal > span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: var(--k-radius); color: var(--k-action); background: var(--k-tint); }
.scenario-briefing__goal svg { width: 23px; }
.scenario-briefing__goal .kicker { color: var(--k-muted); }
.scenario-briefing__goal h2 { margin: 5px 0 0; font-size: 20px; line-height: 1.45; }
.scenario-briefing__grid { padding: 28px clamp(25px, 5vw, 46px); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 54px); }
.scenario-briefing__grid h2 { margin: 7px 0 18px; font-size: 19px; }
.preparation-list, .scenario-phrases { margin: 0; padding: 0; list-style: none; }
.preparation-list { display: grid; gap: 13px; }
.preparation-list li { display: grid; grid-template-columns: 29px 1fr; align-items: start; gap: 11px; }
.preparation-list li > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: var(--k-action); background: var(--k-tint); font-size: var(--k-text-sm); font-weight: 650; }
.preparation-list p { margin: 4px 0 0; color: var(--k-ink); font-size: var(--k-text-xs); }
.scenario-phrases { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-rule); }
.scenario-phrases li { padding: 11px 13px; display: grid; gap: 3px; background: var(--k-sheet); }
.scenario-phrases strong { font-size: var(--k-text-sm); }
.scenario-phrases span { color: var(--k-muted); font-size: var(--k-text-sm); }
.scenario-briefing > footer { padding: 19px clamp(25px, 5vw, 46px); display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid var(--k-rule); background: var(--k-paper); }
.scenario-briefing > footer p { max-width: 560px; margin: 0; color: var(--k-muted); font-size: var(--k-text-sm); }
.scenario-shell { min-height: 520px; display: grid; grid-template-columns: 300px 1fr; overflow: hidden; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.scenario-shell > aside { padding: 30px; color: var(--k-ink); background: var(--k-paper); }
.scenario-shell aside h1 { font-size: 30px; }
.scenario-shell aside > p:last-of-type { color: var(--k-muted); }
.scenario-shell aside > small { display: block; margin-top: 17px; color: var(--k-muted); font-size: 14px; }
.scenario-steps { margin-top: 35px; display: flex; flex-wrap: wrap; gap: 7px; }
.scenario-steps span { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--k-rule); border-radius: var(--k-radius); color: var(--k-muted); background: var(--k-sheet); font-size: var(--k-text-sm); }
.scenario-steps span.is-active { color: var(--k-on-action); border-color: var(--k-action); background: var(--k-action); }
.scenario-steps span.is-done { color: var(--k-good); border-color: var(--k-good); background: var(--k-good-bg); }
.scenario-steps svg { width: 14px; }
.scenario-shell > section { padding: clamp(25px, 5vw, 48px); }
.scene-label { color: var(--k-muted); font-size: var(--k-text-sm); font-weight: 650; text-transform: uppercase; letter-spacing: .09em; }
.scenario-shell section h2 { margin: 14px 0 25px; }
.scenario-shell section > .button { margin-top: 16px; }
.scenario-coaching { margin-top: 18px; overflow: hidden; border: 1px solid var(--k-good); border-radius: 0; color: var(--k-good); background: var(--k-good-bg); }
.scenario-coaching.is-wrong { border-color: var(--k-bad); color: var(--k-bad); background: var(--k-bad-bg); }
.scenario-coaching > header { padding: 14px 16px; display: flex; align-items: center; gap: 11px; color: var(--k-good); border-bottom: 1px solid var(--k-rule); }
.scenario-coaching.is-wrong > header { color: var(--k-bad); border-color: var(--k-rule); }
.scenario-coaching > header > span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--k-on-good); background: var(--k-good); font-weight: 650; }
.scenario-coaching.is-wrong > header > span { background: var(--k-bad); }
.scenario-coaching > header svg { width: 15px; }
.scenario-coaching > header strong, .scenario-coaching > header p { display: block; margin: 0; }
.scenario-coaching > header p { margin-top: 3px; color: var(--k-ink); font-size: var(--k-text-xs); }
.scenario-coaching__explanation { padding: 15px 16px; }
.scenario-coaching__explanation > p:last-child, .scenario-coaching__details p:last-child { margin: 5px 0 0; color: var(--k-ink); font-size: var(--k-text-xs); }
.scenario-coaching__details { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--k-rule); background: var(--k-sheet); }
.scenario-coaching.is-wrong .scenario-coaching__details { border-color: var(--k-rule); }
.scenario-coaching__details > div { padding: 14px 16px; }
.scenario-coaching__details > div + div { border-left: 1px solid var(--k-rule); }
.scenario-complete { max-width: 720px; min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.scenario-complete > p { max-width: 580px; color: var(--k-muted); }
.scenario-recap { width: 100%; margin: 22px 0 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; text-align: left; }
.scenario-recap > *, .scenario-recap aside > div { min-width: 0; }
.scenario-recap > div { padding: 18px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.scenario-recap > div > .kicker { margin-bottom: 11px; }
.scenario-recap aside { padding: 18px; display: flex; align-items: flex-start; gap: 12px; border-radius: 0; color: var(--k-hint); background: var(--k-hint-bg); }
.scenario-recap aside > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--k-radius); color: var(--k-hint); background: var(--k-sheet); }
.scenario-recap aside .kicker { color: inherit; }
.scenario-recap aside svg { width: 18px; }
.scenario-recap aside strong { display: block; margin-top: 5px; font-size: var(--k-text-xs); line-height: 1.5; }
.celebration { width: 72px; height: 72px; margin-bottom: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--k-on-good); background: var(--k-good); box-shadow: 0 0 0 13px var(--k-good-bg); }
.celebration svg { width: 34px; height: 34px; }
.result-stats { width: 100%; margin: 28px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.result-stats > div { min-width: 0; padding: 18px 12px; border-right: 1px solid var(--k-rule); overflow-wrap: anywhere; }
.result-stats > div:last-child { border-right: 0; }
.result-stats strong, .result-stats span { display: block; }
.result-stats strong { font-size: 27px; white-space: nowrap; }
.result-stats span { color: var(--k-muted); font-size: var(--k-text-sm); }
.result-actions { display: flex; gap: 9px; }
.empty-page { min-height: 75vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-page > p:not(.kicker) { max-width: 580px; color: var(--k-muted); }
.empty-illustration { width: 70px; height: 70px; margin-bottom: 22px; display: grid; place-items: center; border-radius: 0; color: var(--k-action); background: var(--k-tint); font-size: 28px; font-weight: 650; }
.empty-illustration svg { width: 34px; height: 34px; }
.review-page { width: min(760px, 100%); }
.review-page > header { display: flex; justify-content: space-between; align-items: flex-end; }
.review-page > header h1 { margin-bottom: 0; }
.review-page > header > strong { color: var(--k-muted); }
.review-page > .progress-track { margin: 18px 0 30px; }
.review-card { padding: clamp(24px, 5vw, 42px); border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.review-label { color: var(--k-muted); font-size: var(--k-text-sm); font-weight: 650; text-transform: uppercase; letter-spacing: .1em; }
.review-card h2 { margin: 10px 0 5px; font-size: 31px; }
.review-card > p { color: var(--k-muted); }
.progress-overview, .admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.progress-overview--six { grid-template-columns: repeat(6, 1fr); }
.progress-overview > div, .admin-stats > div { min-height: 115px; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; border-right: 1px solid var(--k-rule); }
.progress-overview > div:last-child, .admin-stats > div:last-child { border-right: 0; }
.progress-overview .big-stat { flex-direction: row; align-items: flex-end; gap: 11px; background: var(--k-tint); }
.progress-overview strong, .admin-stats strong { font-size: 31px; letter-spacing: -.05em; }
.progress-overview span, .admin-stats span { color: var(--k-muted); font-size: var(--k-text-sm); }
.progress-list { padding: 22px; display: grid; gap: 18px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.progress-list > div { display: grid; grid-template-columns: 180px 1fr 45px; gap: 14px; align-items: center; }
.progress-list span { font-size: var(--k-text-sm); }
.progress-list strong { text-align: right; font-size: var(--k-text-xs); }
.recent-card { padding: 22px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.recent-list { display: grid; }
.recent-list button { min-height: 62px; padding: 9px 0; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid var(--k-rule); color: var(--k-ink); background: transparent; text-align: left; }
.recent-list button:last-child { border-bottom: 0; }
.recent-list button > svg { width: 15px; color: var(--k-muted); }
.recent-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 0; color: var(--k-action); background: var(--k-tint); }
.recent-icon svg { width: 17px; }
.recent-list strong, .recent-list small { display: block; }
.recent-list strong { margin-bottom: 3px; font-size: var(--k-text-xs); }
.recent-list small { color: var(--k-muted); font-size: var(--k-text-sm); }
.empty-copy { margin: 20px 0 0; color: var(--k-muted); font-size: var(--k-text-xs); }
.placement-summary { margin-top: 20px; padding: 22px; display: flex; justify-content: space-between; align-items: center; gap: 30px; border-radius: 0; background: var(--k-hint-bg); }
.placement-summary span, .placement-summary strong { display: block; }
.placement-summary span { color: var(--k-ink); font-size: var(--k-text-sm); }
.placement-summary strong { font-size: 31px; }
.placement-summary p { margin: 0; color: var(--k-ink); }
.profile-card { overflow: hidden; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.profile-row { min-height: 64px; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--k-rule); }
.profile-row > span { color: var(--k-muted); font-size: var(--k-text-xs); }
.privacy-note { margin: 20px; padding: 16px; border-radius: 0; background: var(--k-tint); }
.privacy-note p { margin: 4px 0 0; color: var(--k-muted); font-size: var(--k-text-xs); }
.profile-card > .button { margin: 0 20px 20px; }
.subscription-card { margin-bottom: 20px; padding: 22px; display: grid; grid-template-columns: auto 1fr auto; gap: 17px; align-items: center; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.subscription-card.is-expired { border-color: var(--k-bad); background: var(--k-bad-bg); }
.subscription-card__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--k-radius); color: var(--k-on-action); background: var(--k-action); font-weight: 650; }
.subscription-card.is-expired .subscription-card__icon { background: var(--k-bad); }
.subscription-card .kicker { margin-bottom: 5px; }
.subscription-card h2 { margin-bottom: 5px; font-size: 22px; }
.subscription-card p { margin: 0; color: var(--k-ink); font-size: var(--k-text-xs); }
.subscription-card > strong { min-width: 92px; color: var(--k-action); font-size: 18px; text-align: right; }
.subscription-card.is-expired > strong { color: var(--k-bad); }
.profile-settings-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .75fr); gap: 20px; align-items: start; }
.settings-card { padding: 23px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.settings-card > header { margin-bottom: 25px; }
.settings-card h2 { margin-bottom: 7px; font-size: 23px; }
.settings-card header > p:last-child, .appearance-card > p { margin-bottom: 0; color: var(--k-muted); font-size: var(--k-text-xs); }
.settings-fields { display: grid; gap: 22px; }
.settings-fields > label { display: grid; gap: 8px; color: var(--k-ink); font-size: var(--k-text-sm); font-weight: 600; }
.settings-fields fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.settings-fields legend { margin-bottom: 10px; color: var(--k-ink); font-size: var(--k-text-sm); font-weight: 600; }
.settings-card > .button { margin-top: 24px; }
.assigned-level-note { padding: 14px 15px; display: grid; grid-template-columns: 1fr auto; gap: 3px 15px; align-items: center; border-radius: 0; background: var(--k-tint); }
.assigned-level-note span { color: var(--k-muted); font-size: var(--k-text-sm); }
.assigned-level-note strong { grid-row: 1 / 3; grid-column: 2; color: var(--k-action); font-size: 29px; }
.assigned-level-note .text-button { width: fit-content; padding: 2px 0; font-size: var(--k-text-sm); }
.settings-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.settings-goals label { display: block; }
.settings-goals input { position: absolute; opacity: 0; pointer-events: none; }
.settings-goals span { min-height: 46px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--k-control); border-radius: var(--k-radius); color: var(--k-ink); background: var(--k-sheet); font-size: 14px; }
.settings-goals svg { width: 15px; opacity: 0; color: var(--k-action); }
.settings-goals input:checked + span { color: var(--k-action); border-color: var(--k-action); background: var(--k-tint); box-shadow: inset 0 0 0 1px var(--k-action); }
.settings-goals input:checked + span svg { opacity: 1; }
.profile-side { display: grid; gap: 20px; }
.appearance-card > .button { margin-top: 19px; }
.admin-stats { margin-bottom: 25px; }
.admin-stats--six { grid-template-columns: repeat(6, 1fr); }
.admin-create { margin-bottom: 25px; padding: 22px; display: grid; grid-template-columns: 240px 1fr; gap: 25px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.admin-create h2 { margin-bottom: 5px; }
.admin-create p { margin: 0; color: var(--k-muted); font-size: 14px; }
.admin-create form { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 9px; align-items: end; }
.admin-table-card { padding: 22px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.admin-table { overflow-x: auto; }
.admin-table__head, .admin-table__row { min-width: 1080px; display: grid; grid-template-columns: 1.1fr 1fr .8fr .7fr .72fr 1fr; gap: 15px; align-items: center; }
.admin-table__head { padding: 10px 8px; color: var(--k-muted); font-size: var(--k-text-sm); font-weight: 650; text-transform: uppercase; letter-spacing: .09em; }
.admin-table__row { min-height: 67px; padding: 10px 8px; border-top: 1px solid var(--k-rule); color: var(--k-ink); font-size: var(--k-text-sm); }
.user-cell { display: flex; align-items: center; gap: 10px; border: 0; padding: 0; color: var(--k-ink); background: transparent; text-align: left; }
.user-cell .avatar { width: 34px; height: 34px; }
.user-cell strong, .user-cell small { display: block; }
.user-cell small { color: var(--k-muted); }
.status-dot { width: 7px; height: 7px; margin-right: 5px; display: inline-block; border-radius: 50%; background: var(--k-control); }
.status-dot.is-active { background: var(--k-good); }
.table-action { border: 0; padding: 6px 8px; color: var(--k-action); background: transparent; font-size: var(--k-text-sm); font-weight: 650; }
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.table-action--subscription { border-radius: var(--k-radius); color: var(--k-action); background: var(--k-tint); }
.subscription-cell strong, .subscription-cell small { display: block; }
.subscription-cell small { margin-top: 3px; color: var(--k-muted); }
.subscription-status { color: var(--k-action); }
.subscription-status.is-expired { color: var(--k-bad); }
.admin-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.admin-toolbar { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-toolbar--end { justify-content: flex-end; }
.admin-toolbar .back-link { margin-bottom: 0; }
.admin-language { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--k-rule); border-radius: var(--k-radius); background: var(--k-sheet); }
.admin-language__option { min-width: 48px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--k-radius); color: var(--k-muted); background: transparent; font-size: var(--k-text-xs); font-weight: 650; letter-spacing: .04em; }
.admin-language__option.is-active { color: var(--k-action); background: var(--k-tint); }
.admin-subscription { margin-bottom: 22px; padding: 21px 23px; display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.admin-subscription.is-expired { border-color: var(--k-bad); background: var(--k-bad-bg); }
.admin-subscription .kicker { margin-bottom: 5px; }
.admin-subscription h2 { margin-bottom: 4px; font-size: 23px; }
.admin-subscription p { margin: 0; color: var(--k-muted); font-size: var(--k-text-xs); }
.admin-subscription__summary { flex: 1 1 260px; }
.admin-subscription__controls { width: min(590px, 62%); display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: end; }
.admin-subscription__controls > .button { align-self: end; }
.admin-subscription__controls form { display: grid; grid-template-columns: minmax(170px, 1fr) auto auto; gap: 8px; align-items: end; }
.admin-subscription__controls label { display: grid; gap: 6px; color: var(--k-ink); font-size: var(--k-text-sm); font-weight: 650; }
.admin-subscription__controls input { min-height: 44px; }
.text-button--danger { align-self: center; color: var(--k-bad); }
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 8px; }
.toast { max-width: 370px; padding: 13px 16px; border-radius: var(--k-radius); color: var(--k-on-action); background: var(--k-action); box-shadow: var(--k-shadow); opacity: 0; transform: translateY(8px); transition: .2s; font-size: var(--k-text-sm); }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast--error { color: var(--k-on-bad); background: var(--k-bad); }
.toast--success { background: var(--k-action); }
.today-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 9px; }
.recommendation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.recommendation-grid article { min-width: 0; padding: 21px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.recommendation-grid article > span { width: 39px; height: 39px; margin-bottom: 17px; display: grid; place-items: center; border-radius: var(--k-radius); color: var(--k-action); background: var(--k-tint); }
.recommendation-grid article > span svg { width: 20px; }
.recommendation-grid h3 { margin-bottom: 8px; font-size: 18px; }
.recommendation-grid article > p:not(.kicker) { min-height: 57px; margin-bottom: 4px; color: var(--k-muted); font-size: var(--k-text-sm); }
.save-status { color: var(--k-muted); }
.save-status svg { width: 13px; }
.daily-practice-page { width: min(760px, 100%); }
.daily-practice-page > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.daily-practice-page > header h1 { margin-bottom: 7px; }
.daily-practice-page > header p:last-child { margin-bottom: 0; color: var(--k-muted); }
.daily-practice-page > header > strong { color: var(--k-action); font-size: 22px; }
.daily-practice-page > .progress-track { margin: 18px 0 30px; }
.daily-practice-page .review-card h2 { font-size: 25px; }
.feedback small { display: block; margin-top: 5px; color: var(--k-ink); line-height: 1.45; }
.practice-reassurance { margin: 16px 0 0; color: var(--k-muted); font-size: var(--k-text-sm); text-align: center; }
/* Summaries and feedback share one reading column. A back link must never
   become a sidebar or change the placement of the result and feedback cards. */
.completion-page { width: min(960px, 100%); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.completion-page > * { min-width: 0; max-width: 100%; }
.completion-page > .back-link { justify-self: start; margin: 0; }
.completion-page > .completion-summary, .completion-page > .scenario-complete { width: 100%; max-width: none; }
.completion-page h1 { font-size: clamp(2rem, 3.5vw, 2.75rem); overflow-wrap: anywhere; }
.completion-page .learning-feedback { position: static; }
.completion-summary, .learning-feedback { padding: clamp(24px, 4vw, 38px); border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.completion-summary { display: flex; flex-direction: column; align-items: center; text-align: center; }
.completion-summary > p:not(.kicker) { max-width: 580px; color: var(--k-muted); }
.can-do-result { width: 100%; margin-top: 17px; padding: 17px; border-radius: 0; background: var(--k-tint); text-align: left; }
.can-do-result span, .can-do-result strong { display: block; }
.can-do-result span { margin-bottom: 5px; color: var(--k-action); font-size: var(--k-text-sm); font-weight: 650; text-transform: uppercase; letter-spacing: .09em; }
.can-do-result strong { font-size: var(--k-text-sm); line-height: 1.5; }
.result-stats--five { grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); }
.assessment-note { color: var(--k-muted); font-size: 14px; line-height: 1.6; }
.mastered-phrase { width: 100%; padding: 18px; border: 1px solid var(--k-rule); border-radius: 0; text-align: left; }
.mastered-phrase strong, .mastered-phrase span { display: block; }
.mastered-phrase strong { font-size: 19px; }
.mastered-phrase strong, .scenario-phrases strong { overflow-wrap: anywhere; hyphens: auto; }
.mastered-phrase span { margin-top: 4px; color: var(--k-muted); font-size: var(--k-text-xs); }
.next-step-card { width: 100%; margin-top: 12px; padding: 15px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; border-radius: 0; background: var(--k-hint-bg); text-align: left; }
.next-step-card .button { grid-column: 2; justify-self: start; }
.next-step-card > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: var(--k-radius); color: var(--k-hint); background: var(--k-sheet); }
.next-step-card strong, .next-step-card small { display: block; }
.next-step-card small { margin-top: 3px; color: var(--k-muted); font-size: var(--k-text-sm); }
.completion-summary .result-actions { margin-top: 22px; }
.learning-feedback { position: sticky; top: 24px; }
.learning-feedback header h2 { margin-bottom: 6px; font-size: 23px; }
.learning-feedback header > p:last-child { color: var(--k-muted); font-size: var(--k-text-sm); }
.learning-feedback fieldset { min-width: 0; margin: 22px 0 0; padding: 0; border: 0; }
.learning-feedback legend, .feedback-comment > span { margin-bottom: 9px; color: var(--k-ink); font-size: var(--k-text-xs); font-weight: 650; }
.learning-feedback fieldset small { display: block; margin-top: 7px; color: var(--k-muted); font-size: var(--k-text-sm); }
.rating-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rating-row input, .difficulty-row input { position: absolute; opacity: 0; pointer-events: none; }
.rating-row span, .difficulty-row span { min-height: 42px; display: grid; place-items: center; border: 1px solid var(--k-control); border-radius: var(--k-radius); background: var(--k-sheet); font-size: var(--k-text-sm); }
.rating-row input:checked + span, .difficulty-row input:checked + span { border-color: var(--k-action); color: var(--k-action); background: var(--k-tint); box-shadow: inset 0 0 0 1px var(--k-action); }
.difficulty-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rating-row label, .difficulty-row label { min-width: 0; }
.rating-row input:focus-visible + span, .difficulty-row input:focus-visible + span { outline: 3px solid var(--k-action); outline-offset: 3px; }
.difficulty-row span { padding: 5px; text-align: center; }
/* Keep native controls available to keyboard/assistive technology without
   inheriting the full-width text-input box and overflowing the viewport. */
.segmented label, .settings-goals label, .rating-row label, .difficulty-row label { position: relative; min-width: 0; }
.segmented input, .settings-goals input, .rating-row input, .difficulty-row input {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 0;
  padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%);
}
.segmented input:focus-visible + span, .settings-goals input:focus-visible + span { outline: 3px solid var(--k-action); outline-offset: 3px; }
.feedback-comment { margin-top: 22px; display: grid; }
textarea { width: 100%; resize: vertical; border: 1px solid var(--k-control); border-radius: var(--k-radius); padding: 11px 12px; color: var(--k-ink); background: var(--k-sheet); font: inherit; }
.learning-feedback > .button { width: 100%; margin-top: 14px; }
.feedback-thanks { padding: 25px; display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--k-good); border-radius: 0; background: var(--k-good-bg); }
.feedback-thanks > svg { width: 24px; color: var(--k-action); }
.feedback-thanks p { margin: 4px 0 0; color: var(--k-muted); font-size: var(--k-text-sm); }
.completion-page .scenario-complete { min-height: auto; padding: clamp(24px, 4vw, 38px); border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.progress-retention { margin: 18px 0 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; }
.progress-retention article { padding: 21px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.progress-retention article > p:last-child { margin-bottom: 0; color: var(--k-muted); font-size: var(--k-text-sm); }
.streak-summary { display: flex; align-items: flex-end; gap: 9px; }
.streak-summary strong { color: var(--k-action); font-size: 45px; line-height: 1; }
.streak-summary span { max-width: 120px; color: var(--k-muted); font-size: var(--k-text-sm); }
.admin-retention-grid { margin: 18px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.admin-retention-grid article { padding: 19px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.admin-retention-grid strong, .admin-retention-grid span { display: block; }
.admin-retention-grid strong { margin-bottom: 7px; font-size: 29px; }
.admin-retention-grid span { color: var(--k-muted); font-size: var(--k-text-sm); line-height: 1.45; }
.feedback-admin { margin: 25px 0; padding: 24px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.feedback-admin > header h2 { margin-bottom: 5px; }
.feedback-admin > header p:last-child { color: var(--k-muted); font-size: var(--k-text-sm); }
.feedback-admin__columns { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.feedback-admin__columns h3 { font-size: 15px; }
.feedback-source-list { display: grid; }
.feedback-source-list > div { padding: 10px 0; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--k-rule); }
.feedback-source-list strong, .feedback-source-list small { display: block; }
.feedback-source-list strong { font-size: var(--k-text-sm); }
.feedback-source-list small { margin-top: 3px; color: var(--k-muted); font-size: var(--k-text-sm); }
.feedback-source-list b { color: var(--k-action); font-size: var(--k-text-xs); }
.feedback-comment-list { display: grid; gap: 8px; }
.feedback-comment-list blockquote { margin: 0; padding: 12px; border-radius: var(--k-radius); background: var(--k-tint); }
.feedback-comment-list p { margin-bottom: 5px; font-size: var(--k-text-sm); }
.feedback-comment-list footer { color: var(--k-muted); font-size: var(--k-text-sm); }
.learner-retention-card { margin-top: 16px; padding: 18px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.learner-retention-card strong { font-size: var(--k-text-sm); }
/* Vocabulary practice */
/* The pooled practice leads the page, so it borrows the home hero's weight. */
.pool-card { margin-bottom: 26px; min-height: 250px; display: grid; grid-template-columns: 1fr 250px; overflow: hidden; border: 1px solid var(--k-rule); border-radius: 0; color: var(--k-ink); background: var(--k-sheet); }
.pool-card__main { padding: clamp(24px, 3.6vw, 40px); display: flex; flex-direction: column; align-items: flex-start; }
.pool-card h2 { max-width: 620px; margin-bottom: 10px; font-size: clamp(1.6rem, 2.7vw, 2.4rem); }
.pool-card p { max-width: 620px; color: var(--k-muted); }
.pool-card .today-actions { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 11px; }
.pool-card__note { margin-top: 14px; color: var(--k-muted); font-size: 14px; }
.pool-card__aside { padding: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--k-paper); }
.pool-ring { width: 118px; height: 118px; display: grid; place-content: center; justify-items: center; border: 1px solid var(--k-rule); border-radius: 50%; }
.pool-ring span { font-size: 30px; font-weight: 650; letter-spacing: -.04em; }
.pool-ring small { color: var(--k-muted); font-size: var(--k-text-sm); }
.pool-card__aside .today-fact { margin-top: 0; text-align: center; }
.pool-card__aside .today-fact strong { font-size: 19px; }
/* The shared .today-fact caption colour is too dim over the lighter dark-mode
   card; the pooled card states its own value rather than restyling the home hero. */
.pool-card__aside .today-fact span { color: var(--k-muted); }
.pool-card--empty { grid-template-columns: 1fr; min-height: 0; }
.vocabulary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 17px; }
.vocabulary-card { display: flex; flex-direction: column; gap: 11px; padding: 22px; border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.vocabulary-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vocabulary-card h3 { margin: 0; font-size: 1.05rem; }
.vocabulary-card p { margin: 0; color: var(--k-ink); font-size: var(--k-text-sm); }
.vocabulary-card footer { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.vocabulary-card footer .button { flex: 1 1 auto; justify-content: center; }
.vocabulary-card.is-locked { background: transparent; border-style: dashed; }
.vocabulary-card.is-locked h3, .vocabulary-card.is-locked p { color: var(--k-muted); }
.vocabulary-count, .vocabulary-lock { flex: 0 0 auto; padding: 4px 9px; border-radius: 0; font-size: var(--k-text-sm); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.vocabulary-count { color: var(--k-action); background: var(--k-tint); }
.vocabulary-lock { color: var(--k-hint); background: var(--k-hint-bg); }
.vocabulary-requirement { font-size: var(--k-text-xs); }
.vocabulary-stat { margin: 0; color: var(--k-muted); font-size: var(--k-text-xs); }
.empty-inline { margin-top: 30px; padding: 30px; display: grid; gap: 15px; justify-items: start; border: 1px dashed var(--k-rule); border-radius: 0; }
.empty-inline p { margin: 0; color: var(--k-ink); }
.vocabulary-actions { margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }
.vocabulary-actions p { flex: 1 1 260px; margin: 0; color: var(--k-muted); font-size: var(--k-text-xs); line-height: 1.5; }
.article-notes { padding: 20px 22px; border-radius: 0; background: var(--k-tint); border: 1px solid var(--k-tint); }
.article-notes h2 { margin: 0 0 10px; font-size: 1rem; }
.article-notes ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.article-notes li { color: var(--k-ink); font-size: var(--k-text-sm); line-height: 1.55; }
.word-group { margin-top: 22px; }
.word-group h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: .95rem; }
.article-chip { width: 38px; padding: 3px 0; border-radius: var(--k-radius); font-size: var(--k-text-sm); font-style: normal; font-weight: 650; text-align: center; }
.article-chip--der { color: var(--k-action); background: var(--k-tint); }
.article-chip--die { color: var(--k-bad); background: var(--k-bad-bg); }
.article-chip--das { color: var(--k-hint); background: var(--k-hint-bg); }
.article-chip--none { color: var(--k-muted); background: var(--k-tint); }
.word-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; border: 1px solid var(--k-rule); border-radius: 0; overflow: hidden; background: var(--k-rule); }
.word-list li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 24px; gap: 14px; align-items: center; padding: 10px 14px; background: var(--k-sheet); }
.word-list li > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-width: 0; }
.word-list strong { font-weight: 600; overflow-wrap: anywhere; }
.word-list small { color: var(--k-muted); font-size: var(--k-text-sm); }
.word-list li > span:nth-child(2) { color: var(--k-ink); font-size: var(--k-text-sm); overflow-wrap: anywhere; }
.word-list i { display: grid; place-items: center; color: var(--k-action); font-style: normal; }
.word-list i svg { width: 15px; height: 15px; }
.word-list li.is-written { background: var(--k-good-bg); }
.word-list li.is-recognized { background: var(--k-tint); }
/* The grid and its feedback share one frame so that the standing tip can sit
   below the frame and stay there. Before, the feedback and the tip were
   alternatives in the same slot, so judging a pair replaced the tip — the
   typing round avoids that by keeping its feedback inside the card. */
.match-panel { margin-top: 20px; padding: clamp(14px, 3vw, 26px); border: 1px solid var(--k-rule); border-radius: 0; background: var(--k-sheet); }
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; align-items: start; }
.match-column { display: grid; gap: 9px; align-content: start; }
.match-column h2 { margin: 0 0 3px; color: var(--k-muted); font-size: var(--k-text-sm); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.match-tile { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 11px 13px; border: 1px solid var(--k-rule); border-radius: var(--k-radius); color: var(--k-ink); background: var(--k-sheet); text-align: left; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; transition: border-color .15s, background .15s; }
.match-tile:hover:not(:disabled) { border-color: var(--k-action); }
.match-tile.is-selected { border-color: var(--k-action); background: var(--k-tint); box-shadow: inset 0 0 0 1px var(--k-action); }
.match-tile.is-matched { color: var(--k-good); border-color: var(--k-good); background: var(--k-good-bg); }
.match-tile.is-matched i { display: grid; place-items: center; }
.match-tile.is-matched i svg { width: 15px; height: 15px; }
.match-tile.is-wrong { border-color: var(--k-bad); background: var(--k-bad-bg); }
.feedback--partial { color: var(--k-hint); background: var(--k-hint-bg); }
.feedback small { display: block; margin-top: 5px; font-size: var(--k-text-xs); line-height: 1.5; opacity: .92; }
.vocabulary-missed { margin: 22px 0; display: grid; gap: 11px; justify-items: stretch; }
.vocabulary-missed h2 { margin: 0; font-size: 1rem; }
/* The round’s top row: the back link keeps its place, the autoplay toggle sits
   at the far right. The link carried the row’s bottom margin on its own before,
   so the row takes it over and the link gives it up. */
.round-toolbar { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.round-toolbar .back-link { margin-bottom: 0; }
.autoplay-toggle { min-height: 38px; flex: 0 0 auto; padding: 7px 13px; gap: 8px; font-size: var(--k-text-xs); }
.autoplay-toggle i { font-style: normal; font-size: var(--k-text-sm); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; opacity: .78; }
.autoplay-toggle.is-on { color: var(--k-action); border-color: var(--k-action); background: var(--k-tint); }
.vocabulary-round-page header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 13px; }
.vocabulary-round-page header p { max-width: 60ch; color: var(--k-ink); font-size: var(--k-text-sm); }
.vocabulary-round-page--typed .review-card { margin-top: 20px; }
.vocabulary-round-page--typed .typed-answer { margin-top: 16px; }
@media (max-width: 980px) {
  .recommendation-grid { grid-template-columns: 1fr 1fr; }
  .admin-retention-grid { grid-template-columns: 1fr 1fr; }
  .progress-overview--six { grid-template-columns: repeat(3, 1fr); }
  .progress-overview--six > div:nth-child(3) { border-right: 0; }
  .progress-overview--six > div:nth-child(-n+3) { border-bottom: 1px solid var(--k-rule); }
  .admin-stats--six { grid-template-columns: repeat(3, 1fr); }
  .admin-stats--six > div:nth-child(3n) { border-right: 0; }
  .admin-stats--six > div:nth-child(-n+3) { border-bottom: 1px solid var(--k-rule); }
  .profile-settings-grid { grid-template-columns: 1fr; }
  .profile-side { grid-template-columns: 1fr 1fr; }
  .admin-subscription { flex-direction: column; }
  .admin-subscription__controls { width: 100%; }
  .answer-list--compact { grid-template-columns: 1fr; }
  .lesson-roadmap { grid-template-columns: 1fr; gap: 16px; }
  .insight-grid { grid-template-columns: 1fr; }
  .admin-create { grid-template-columns: 1fr; }
  .admin-create form { grid-template-columns: 1fr 1fr; }
}
/* Between the phone breakpoint and a comfortable desktop the sidebar is still
   on screen, so the workspace is narrow while these blocks keep their wide
   layout. The statistics strip overflowed here because a 1fr track floors at
   min-content, and the pooled card was squeezed to an unreadable text column. */
@media (max-width: 1080px) {
  .pool-card { grid-template-columns: 1fr; }
  .pool-card__aside { flex-direction: row; justify-content: space-around; gap: 12px; }
  .pool-ring { width: 96px; height: 96px; }
}
@media (max-width: 780px) {
  .login-page { display: block; }
  .login-story { display: none; }
  .login-panel { padding: 26px 20px; }
  .mobile-brand { display: block; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .mobile-header { height: 62px; padding: 0 17px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--k-rule); background: var(--k-sheet); }
  .mobile-nav { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; min-height: 65px; display: flex; justify-content: space-around; border-top: 1px solid var(--k-rule); background: var(--k-sheet); }
  .mobile-nav .nav-item { min-width: 50px; min-height: 62px; padding: 7px 5px; flex-direction: column; justify-content: center; gap: 3px; color: var(--k-muted); font-size: var(--k-text-sm); }
  .mobile-nav .nav-item.is-active { color: var(--k-action); background: transparent; box-shadow: inset 0 -3px 0 var(--k-action); }
  .mobile-nav .nav-item svg { width: 19px; }
  .page { padding: 34px 18px 92px; }
  .page-heading--row { display: block; }
  .page-heading--row > .button { margin-top: 18px; }
  .pool-card { grid-template-columns: 1fr; }
  .pool-card__aside { flex-direction: row; justify-content: space-around; gap: 12px; }
  .pool-ring { width: 92px; height: 92px; }
  .recommendation-grid, .progress-retention, .completion-page, .feedback-admin__columns { grid-template-columns: 1fr; }
  .learning-feedback { position: static; }
  .learner-retention-card { grid-template-columns: 1fr; }
  .scenario-library { grid-template-columns: 1fr; }
  .lesson-page-tabs { display: flex; margin-right: -18px; padding-right: 18px; overflow-x: auto; }
  .lesson-page-tab { min-width: 165px; flex: 0 0 auto; }
  .practice-page-info { grid-template-columns: 1fr; }
  .contrast-teaching { grid-template-columns: 1fr; }
  .scenario-briefing__grid, .scenario-recap { grid-template-columns: 1fr; }
  .scenario-shell { grid-template-columns: 1fr; }
  .scenario-shell > aside { min-height: auto; }
  .progress-overview, .admin-stats { grid-template-columns: 1fr 1fr; }
  .progress-overview--six > div:nth-child(odd) { border-right: 1px solid var(--k-rule); }
  .progress-overview > div:nth-child(even), .admin-stats > div:nth-child(even) { border-right: 0; }
  .progress-overview > div:nth-child(-n+4), .admin-stats > div:nth-child(-n+4) { border-bottom: 1px solid var(--k-rule); }
  .admin-stats--six { grid-template-columns: 1fr 1fr; }
  .admin-stats--six > div:nth-child(3n) { border-right: 1px solid var(--k-rule); }
  .admin-stats--six > div:nth-child(even) { border-right: 0; }
  .admin-stats--six > div:nth-child(-n+4) { border-bottom: 1px solid var(--k-rule); }
  .admin-heading-actions { margin-top: 18px; justify-content: flex-start; }
  .progress-list > div { grid-template-columns: 120px 1fr 40px; }
}
@media (max-width: 540px) {
  /* Two rows on a phone: German over Ukrainian, mark alongside. Every cell is
     placed explicitly — auto-placement put the German column in the mark slot. */
  .word-list li { grid-template-columns: minmax(0, 1fr) 20px; row-gap: 3px; }
  .word-list li > span:first-child { grid-column: 1; grid-row: 1; }
  .word-list li > span:nth-child(2) { grid-column: 1; grid-row: 2; }
  .word-list li > i { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .match-grid { gap: 8px; }
  .match-tile { min-height: 46px; padding: 9px 10px; font-size: var(--k-text-sm); }
  .vocabulary-actions .button { width: 100%; justify-content: center; }
  .pool-card .today-actions .button { width: 100%; justify-content: center; }
  .pool-card__aside { flex-wrap: wrap; }
  h1 { font-size: 2rem; }
  .onboarding-page { padding: 0; display: block; background: var(--k-sheet); }
  .onboarding-card { min-height: 100vh; padding: 25px 18px; border: 0; border-radius: 0; box-shadow: none; }
  .goal-grid, .skill-results, .segmented { grid-template-columns: 1fr; }
  .segmented { grid-template-columns: 1fr 1fr; }
  .form-actions .button { flex: 1; }
  .today-actions { width: 100%; flex-direction: column; }
  .today-actions .button { width: 100%; }
  .admin-retention-grid { grid-template-columns: 1fr; }
  .difficulty-row { grid-template-columns: 1fr; }
  .next-step-card { grid-template-columns: auto 1fr; }
  .next-step-card .button { grid-column: 1 / -1; }
  .scenario-guide { align-items: flex-start; }
  .scenario-filters { flex-wrap: nowrap; margin-right: -18px; padding-right: 18px; overflow-x: auto; }
  .scenario-filters button { flex: 0 0 auto; }
  .scenario-card { min-height: 0; padding: 19px; }
  .scenario-card footer { align-items: stretch; flex-direction: column; }
  .scenario-card footer .button { width: 100%; }
  .scenario-briefing > header, .scenario-briefing > footer { align-items: stretch; flex-direction: column; }
  .scenario-duration { width: fit-content; }
  .scenario-briefing__goal { grid-template-columns: 1fr; }
  .scenario-briefing__grid { padding-top: 23px; }
  .scenario-coaching__details { grid-template-columns: 1fr; }
  .scenario-coaching__details > div + div { border-left: 0; border-top: 1px solid var(--k-rule); }
  .lesson-hero { grid-template-columns: 1fr; padding: 24px 20px; }
  .lesson-progress { display: none; }
  .lesson-roadmap { padding: 20px; }
  .lesson-section > .section-title { align-items: flex-start; flex-direction: column; gap: 8px; }
  .practice-page-intro > header { flex-direction: column; }
  .practice-page-score { width: fit-content; }
  .practice-page-info { padding: 19px; gap: 16px; }
  .story-step { padding: 18px 19px; grid-template-columns: 1fr; }
  .contrast-teaching { padding: 19px; }
  .contrast-items { grid-template-columns: 1fr; }
  .practice-hint { padding: 15px 19px; align-items: flex-start; }
  .typed-answer { grid-template-columns: 1fr; }
  .typed-answer small { grid-column: auto; }
  .page-recap > header { grid-template-columns: 1fr; padding: 19px; }
  .recap-score { grid-template-columns: repeat(2, 1fr); }
  /* The attribute selector above outranks a bare class, so the narrow layout has
     to match it to win here. */
  .recap-phrases, .recap-phrases[data-recap-count="4"] { grid-template-columns: 1fr; padding: 15px 19px; }
  .page-recap > aside { padding: 15px 19px; }
  .exercise-hint-ladder li { grid-template-columns: 1fr; gap: 2px; }
  .exercise-feedback__details { grid-template-columns: 1fr; }
  .exercise-feedback__details > div + div { border-left: 0; border-top: 1px solid var(--k-rule); }
  .practice-page-controls { grid-template-columns: 1fr 1fr; }
  .practice-page-controls > div { grid-column: 1 / -1; grid-row: 1; }
  .practice-page-controls > button { grid-row: 2; }
  .vocabulary-grid { grid-template-columns: 1fr; }
  .language-note { grid-template-columns: 1fr; }
  .culture-note { grid-template-columns: 1fr; }
  .dialogue-card article { grid-template-columns: 1fr; gap: 6px; }
  .speaking-mission { grid-template-columns: 1fr; }
  .lesson-story-overview { grid-template-columns: 1fr; }
  .scenario-teaser, .complete-strip { align-items: stretch; flex-direction: column; }
  .answer-list--compact { grid-template-columns: 1fr; }
  .result-stats { grid-template-columns: 1fr; }
  .result-stats > div { border-right: 0; border-bottom: 1px solid var(--k-rule); }
  .result-stats > div:last-child { border-bottom: 0; }
  .result-actions { width: 100%; flex-direction: column; }
  .placement-summary { align-items: flex-start; flex-direction: column; }
  .profile-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .subscription-card { grid-template-columns: auto 1fr; }
  .subscription-card > strong { grid-column: 2; text-align: left; }
  .profile-side { grid-template-columns: 1fr; }
  .settings-goals { grid-template-columns: 1fr; }
  .admin-subscription { align-items: stretch; flex-direction: column; }
  .admin-subscription__controls { grid-template-columns: 1fr; }
  .admin-subscription__controls form { grid-template-columns: 1fr; }
  .admin-subscription__controls .button { width: 100%; }
  .admin-heading-actions { width: 100%; flex-direction: column; }
  .admin-heading-actions .button { width: 100%; }
  .admin-create form { grid-template-columns: 1fr; }
  .progress-list > div { grid-template-columns: 1fr auto; }
  .progress-list .progress-track { grid-row: 2; grid-column: 1 / -1; }
}
.transfer-reading, .transfer-evidence { padding: 24px; margin: 20px 0; border: 1px solid var(--k-rule); border-radius: 0; text-align: left; }
.transfer-reading p[lang="de"] { font-size: 1.2rem; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
.exercise-feedback.is-unrecognized { border-color: var(--k-hint); background: var(--k-hint-bg); color: var(--k-ink); }
.exercise-feedback.is-unrecognized header strong { color: inherit; }
.exercise-feedback.is-unrecognized .selected-answer-feedback { background: transparent; }
.exercise-feedback.is-unrecognized .selected-answer-feedback .kicker { color: var(--k-hint); }
.exercise-feedback.is-unrecognized header > span { background: var(--k-hint); color: var(--k-on-good); }
.exercise-hint-ladder .text-button, .exercise-hint-ladder li { font-size: var(--k-text-sm); }
/* P2-10 (owner, 26 September): the no-certificate statement is legal small print at the
   bottom of the Profile page, beside the legal links; never a header or hero line. */
.profile-legal { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--k-rule); color: var(--k-muted); font-size: 14px; line-height: 1.5; }
.profile-legal .legal-links { margin-top: 0; font-size: 14px; }
.profile-legal p { margin: 4px 0 0; }
/* P2-04: content self-check under an uncredited multi-sentence answer. */
.content-self-check { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--k-rule); text-align: left; }
.content-self-check ul { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.content-self-check label { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--k-rule); border-radius: var(--k-radius); cursor: pointer; line-height: 1.5; overflow-wrap: anywhere; }
.content-self-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--k-action); }
.content-self-check label:has(input:checked) { border-color: var(--k-action); }
/* Pronunciation control. Rendered only where the server sent a clip, which is
   never the typing round before its answer is locked. */
.audio-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; margin-inline-start: 0.4rem; padding: 0;
  vertical-align: middle; border: 1px solid var(--k-control); border-radius: 0;
  background: transparent; color: var(--k-muted); cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.audio-button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.audio-button:hover { color: var(--k-action); border-color: var(--k-action); }
/* No :focus-visible rule here on purpose. The shared button rule near the top
   of this file already draws the 3px ring every other control uses; an
   override here is what silently removed the ring by naming an undefined
   token, which no fallback made visible. */
@media (max-width: 640px) {
  .audio-button { width: 2.25rem; height: 2.25rem; }
}
/* Historical verdict reporting keeps numeric columns together on small screens. */
.verdict-table-scroll { overflow-x: auto; margin-block: 20px; }
.verdict-table { width: 100%; min-width: 650px; border-collapse: collapse; }
.verdict-table caption { text-align: left; font-weight: 600; padding-block: 12px; }
.verdict-table th, .verdict-table td { padding: 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid currentColor; }
.verdict-table th:first-child { text-align: left; }
.verdict-report summary { cursor: pointer; font-weight: 600; padding-block: 12px; }

/* Placeholders carry instructions, so they meet text contrast (F33). */
::placeholder { color: var(--k-muted); opacity: 1; }
/* German text hyphenates at line ends instead of breaking mid-word (F31). */
:lang(de) { hyphens: auto; -webkit-hyphens: auto; }
/* Reduced motion: no smooth scrolling, slides, spins or hover lifts (F29). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .button:not(:disabled):hover { transform: none; }
  .toast { transform: none; }
}