/* Accepted lesson workbook and destination design. Tokens: design-tokens.css. */
.brand__wordmark { display: grid; line-height: 1.05; }
.brand__wordmark::before { content: ""; width: 28px; height: 4px; margin-bottom: 10px; background: var(--k-tab); }
.brand__wordmark > strong { font: bold 34px/1 var(--k-font-serif); letter-spacing: -.04em; }
.brand__wordmark > span { margin-top: 4px; font: 600 17px/1.2 var(--k-font-sans); }
.brand__wordmark > small { margin-top: 12px; font: 12px/1.4 var(--k-font-sans); }
.app-shell { grid-template-columns: 220px minmax(0, 1fr); font-family: var(--k-font-sans); }
.app-shell .sidebar { overflow-y: auto; }
.app-shell .nav-item { color: var(--k-ink); border-radius: var(--k-radius); font-size: 16px; line-height: 1.4; min-height: 48px; }
.app-shell .nav-item:hover, .app-shell .nav-item.is-active { color: var(--k-action); background: var(--k-tint); }
.app-shell .nav-item.is-active { box-shadow: inset 3px 0 0 var(--k-action); font-weight: 650; }
.app-shell .sidebar-footer > .nav-item { width: 100%; margin: 18px 0 6px; }
.app-shell .theme-toggle { color: var(--k-ink); border-color: var(--k-control); background: transparent; min-height: 44px; }
.app-shell .theme-toggle:hover { background: var(--k-tint); }
.app-shell .sidebar-user { border-color: var(--k-rule); }
.app-shell .sidebar-user strong { font-size: 14px; }
.app-shell .sidebar-user span { color: var(--k-muted); font-size: 12px; }
.app-shell .sidebar-user > button { color: var(--k-ink); min-width: 36px; min-height: 44px; }
.app-shell .mobile-header { color: var(--k-ink); background: var(--k-paper); border-color: var(--k-rule); }
.app-shell .mobile-nav { background: var(--k-sheet); border-color: var(--k-rule); backdrop-filter: none; }
.app-shell .lesson-page {
  width: 100%; max-width: 1420px; padding: 30px clamp(18px, 3vw, 42px) 72px;
  color: var(--k-ink); background: var(--k-paper); font-size: 16px; line-height: 1.55;
  overflow-wrap: anywhere;
}
.workspace:has(.lesson-page) { background: var(--k-paper); }
.app-shell .lesson-page h1, .app-shell .lesson-page h2 { font-family: var(--k-font-serif); letter-spacing: -.025em; font-weight: 400; line-height: 1.2; }
.app-shell .lesson-page h1 { font-size: 32px; }
.app-shell .lesson-page h2 { font-size: 26px; }
.app-shell .lesson-page h3 { letter-spacing: 0; line-height: 1.45; }
.app-shell .lesson-page .kicker { font-size: 12px; font-weight: 600; letter-spacing: .045em; color: var(--k-muted); }
.app-shell .lesson-page .button { min-height: 48px; border-radius: var(--k-radius); box-shadow: none; font-weight: 600; transform: none; }
.app-shell .lesson-page .button--primary, .app-shell .lesson-page .button--primary:hover { background: var(--k-action); color: var(--k-on-action); }
.app-shell .lesson-page .button--quiet { border-color: var(--k-control); color: var(--k-action); }
.app-shell .lesson-page .button:disabled { opacity: .5; }
.app-shell .lesson-page .text-button { min-height: 44px; font-size: 14px; font-weight: 600; }
.app-shell .lesson-page :focus-visible,
.app-shell .nav-item:focus-visible,
.app-shell .theme-toggle:focus-visible { outline: 3px solid var(--k-action); outline-offset: 3px; }
.lesson-breadcrumb { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; }
.lesson-breadcrumb .back-link { margin: 0; min-height: 44px; }
.app-shell .lesson-page .lesson-hero { padding: 0 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--k-rule); }
.app-shell .lesson-page .lesson-about > p { color: var(--k-muted); max-width: 72ch; }
/* U7: description, outcome and meta sit in «Про урок». Wide screens keep them open
   beside the percentage with no summary; phones show a closed disclosure below it. */
.lesson-hero { row-gap: 0; }
.lesson-hero > div:first-child { grid-column: 1; grid-row: 1; }
.lesson-hero > .lesson-progress { grid-column: 2; grid-row: 1 / span 2; }
.lesson-hero > .lesson-about { grid-column: 1; grid-row: 2; min-width: 0; }
.lesson-about > summary { display: none; }
@media (max-width: 780px) {
  .lesson-hero > div:first-child, .lesson-hero > .lesson-progress, .lesson-hero > .lesson-about { grid-column: 1; grid-row: auto; }
  .lesson-about > summary { display: flex; align-items: center; min-height: 44px; color: var(--k-action); font-weight: 600; cursor: pointer; }
  .lesson-about > summary::-webkit-details-marker { display: none; }
  .lesson-about > summary::after { content: "+"; margin-left: 8px; font-weight: 400; }
  .lesson-about[open] > summary::after { content: "−"; }
  .practice-page-intro { scroll-margin-top: 12px; }
}
.app-shell .lesson-page .lesson-outcome { border-radius: 0; }
.app-shell .lesson-page .lesson-outcome span { color: var(--k-muted); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.app-shell .lesson-page .lesson-outcome strong { font-size: 16px; font-weight: 600; }
.app-shell .lesson-page .lesson-meta, .app-shell .lesson-page .lesson-progress span { color: var(--k-muted); font-size: 13px; }
.app-shell .lesson-page .lesson-progress { border-color: var(--k-rule); padding-left: 24px; }
.app-shell .lesson-page .lesson-progress strong { font-size: 26px; font-weight: 500; }
.app-shell .lesson-page .practice-pages { margin-top: 24px; }
.app-shell .lesson-page .section-title h2 { font-size: 24px; }
.app-shell .lesson-page .section-counter { background: transparent; color: var(--k-muted); font-size: 13px; }
.app-shell .lesson-page .lesson-page-tabs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; overflow: visible; margin: 0 0 24px; padding: 0; }
.app-shell .lesson-page .lesson-page-tab { min-width: 0; min-height: 62px; padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-color: var(--k-control); box-shadow: none; }
.app-shell .lesson-page .lesson-page-tab > strong { display: none; }
.app-shell .lesson-page .lesson-page-tab > span { color: inherit; font-size: 18px; font-weight: 600; }
.app-shell .lesson-page .lesson-page-tab > em { color: var(--k-muted); font-size: 12px; }
.app-shell .lesson-page .lesson-page-tab.is-active { color: var(--k-on-action); background: var(--k-action); border-color: var(--k-action); }
.app-shell .lesson-page .lesson-page-tab.is-active > em { color: var(--k-on-action); }
.app-shell .lesson-page .lesson-page-tab.is-complete:not(.is-active) { border-color: var(--k-good); background: var(--k-good-bg); }
.app-shell .lesson-page .lesson-page-tab.is-complete:not(.is-active) > em { color: var(--k-good); }
.workbook-spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border: 1px solid var(--k-rule); background: var(--k-sheet); }
.workbook-source, .workbook-practice { min-width: 0; padding: clamp(18px, 2.3vw, 32px); }
.workbook-source { border-right: 1px solid var(--k-rule); }
.workbook-practice { background: var(--k-sheet); }
.app-shell .lesson-page .practice-page-intro { margin: 0; border: 0; overflow: visible; background: transparent; }
.app-shell .lesson-page .practice-page-intro > header { padding: 0 0 20px; background: transparent; gap: 12px; }
.app-shell .lesson-page .practice-page-intro > header h2 { font-size: 28px; }
.app-shell .lesson-page .practice-page-intro > header p:last-child { font-size: 16px; color: var(--k-muted); }
.app-shell .lesson-page .practice-page-score { min-width: 78px; padding: 0; flex-direction: column; gap: 5px; background: transparent; text-align: center; }
.app-shell .lesson-page .practice-page-score strong { font-size: 24px; font-weight: 500; }
.app-shell .lesson-page .practice-page-score span { font-size: 12px; color: var(--k-muted); }
.app-shell .lesson-page .story-step { padding: 20px 0; display: block; background: transparent; }
.app-shell .lesson-page .story-step > span { display: none; }
.app-shell .lesson-page .story-step p:not(.kicker), .app-shell .lesson-page .story-step strong { font-size: 16px; }
.app-shell .lesson-page .practice-page-info { padding: 20px 0; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.app-shell .lesson-page .practice-page-info > div > p:not(.kicker),
.app-shell .lesson-page .practice-page-info > div > strong { font-size: 16px; }
.app-shell .lesson-page .practice-page-info aside { padding: 18px; border-radius: 0; background: var(--k-note); }
.app-shell .lesson-page .practice-page-info aside strong { font: 400 22px/1.6 var(--k-font-serif); }
.app-shell .lesson-page .practice-page-info aside span { font-size: 16px; color: var(--k-muted); }
.app-shell .lesson-page .practice-hint { padding: 18px 0; border-color: var(--k-rule); background: transparent; }
.app-shell .lesson-page .practice-hint strong { font-size: 15px; font-weight: 500; }
.app-shell .lesson-page .transfer-reading { padding: 22px 0 0; margin: 20px 0 0; border: 0; border-top: 2px solid var(--k-tab); border-radius: 0; background: transparent; }
.app-shell .lesson-page .transfer-reading h2 { font-size: 23px; }
.app-shell .lesson-page .transfer-reading [lang="de"] { font: 400 21px/1.7 var(--k-font-serif); color: var(--k-ink); white-space: pre-line; }
.app-shell .lesson-page .contrast-teaching { display: block; padding: 20px 0; border: 0; background: transparent; }
.app-shell .lesson-page .contrast-items { grid-template-columns: minmax(0, 1fr); }
.app-shell .lesson-page .contrast-items article { background: var(--k-note); border-color: var(--k-rule); border-radius: 0; }
.app-shell .lesson-page .contrast-items strong { font: 400 21px/1.5 var(--k-font-serif); }
.app-shell .lesson-page .contrast-items span, .app-shell .lesson-page .contrast-items p { font-size: 15px; }
.exercise-navigation { margin-bottom: 24px; }
.exercise-navigation__buttons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.exercise-navigation button { position: relative; min-height: 48px; padding: 8px 2px; border: 1px solid var(--k-control); border-radius: var(--k-radius); background: transparent; color: var(--k-ink); font-size: 17px; }
.exercise-navigation button[aria-pressed="true"] { color: var(--k-on-action); background: var(--k-action); border-color: var(--k-action); }
.exercise-navigation button span { position: absolute; right: 3px; top: 2px; font-size: 11px; }
.exercise-navigation button span[data-mark="correct"] { color: var(--k-good); }
.exercise-navigation button span[data-mark="wrong"] { color: var(--k-bad); }
.exercise-navigation button span[data-mark="pending"] { color: var(--k-hint); }
.exercise-navigation button[aria-pressed="true"] span { color: inherit; }
.one-tap-note { margin: 0 0 10px; color: var(--k-muted); font-size: 15px; }
.field-error { display: block; margin-top: 6px; }
/* Short answers do not stretch across a wide desktop column. */
:is(.lesson-page, .practice-page) .answer-list { max-width: 34rem; }
input[aria-invalid="true"] { border-color: var(--k-bad); }
.app-shell .lesson-page [data-exercise-panel][hidden] { display: none; }
.app-shell .lesson-page .exercise-card { padding: 0; border: 0; background: transparent; }
.app-shell .lesson-page .exercise-card > header { flex-wrap: wrap; }
.app-shell .lesson-page .exercise-card > header > span { display: none; }
.app-shell .lesson-page .exercise-card > header p, .app-shell .lesson-page .exercise-card > header em { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.app-shell .lesson-page .exercise-card > header em { margin: 0; }
.app-shell .lesson-page .exercise-card h3 { font-size: 21px; line-height: 1.5; font-weight: 600; }
.app-shell .lesson-page .answer-list--compact { grid-template-columns: minmax(0, 1fr); }
.app-shell .lesson-page .answer-option { min-height: 56px; padding: 14px 16px; border-radius: var(--k-radius); border-color: var(--k-control); color: var(--k-ink); background: transparent; font-size: 18px; }
.app-shell .lesson-page .answer-option:hover:not(:disabled) { background: var(--k-tint); border-color: var(--k-action); transform: none; }
.app-shell .lesson-page .answer-option.is-correct { color: var(--k-good); background: var(--k-good-bg); border-color: var(--k-good); }
.app-shell .lesson-page .answer-option.is-wrong { color: var(--k-bad); background: var(--k-bad-bg); border-color: var(--k-bad); }
.app-shell .lesson-page .exercise-hint-ladder { padding: 0 0 16px; border: 0; background: transparent; }
.app-shell .lesson-page .exercise-hint-ladder li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px; background: var(--k-hint-bg); font-size: 15px; }
.app-shell .lesson-page .exercise-hint-ladder li strong,
.app-shell .lesson-page .exercise-hint-ladder .text-button { color: var(--k-hint); }
.app-shell .lesson-page .exercise-hint-ladder .text-button { font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.app-shell .lesson-page .typed-answer { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.app-shell .lesson-page .typed-answer label { font-size: 16px; }
.app-shell .lesson-page .typed-answer input, .app-shell .lesson-page .typed-answer textarea { font: 18px/1.6 var(--k-font-sans); padding: 14px; min-height: 56px; border-radius: var(--k-radius); border-color: var(--k-rule); }
.app-shell .lesson-page .typed-answer small, .app-shell .lesson-page .hint-usage { font-size: 13px; }
.app-shell .lesson-page .order-answer, .app-shell .lesson-page .locked-answer { color: var(--k-ink); border-color: var(--k-rule); }
.app-shell .lesson-page .order-answer { border-color: var(--k-control); }
.app-shell .lesson-page .order-answer span { font-size: 16px; }
.app-shell .lesson-page .word-bank button, .app-shell .lesson-page .order-answer button { font-size: 18px; min-height: 48px; color: var(--k-ink); background: var(--k-sheet); border-color: var(--k-control); border-radius: var(--k-radius); }
.app-shell .lesson-page .locked-answer strong { font: 400 21px/1.6 var(--k-font-serif); }
.app-shell .lesson-page .locked-answer span { font-size: 12px; }
.app-shell .lesson-page .exercise-feedback { border-color: var(--k-good); background: var(--k-good-bg); }
.app-shell .lesson-page .exercise-feedback.is-wrong { border-color: var(--k-bad); background: var(--k-bad-bg); }
.app-shell .lesson-page .exercise-feedback.is-unrecognized { border-color: var(--k-hint); background: var(--k-hint-bg); }
.app-shell .lesson-page .exercise-feedback > header { border-color: var(--k-rule); align-items: start; }
.app-shell .lesson-page .exercise-feedback > header > span { background: var(--k-good); color: var(--k-sheet); }
.app-shell .lesson-page .exercise-feedback.is-wrong > header > span { background: var(--k-bad); }
.app-shell .lesson-page .exercise-feedback.is-unrecognized > header > span { background: var(--k-hint); }
.app-shell .lesson-page .exercise-feedback > header strong { color: var(--k-good); font-size: 15px; }
.app-shell .lesson-page .exercise-feedback.is-wrong > header strong { color: var(--k-bad); }
.app-shell .lesson-page .exercise-feedback.is-unrecognized > header strong { color: var(--k-hint); }
.app-shell .lesson-page .exercise-feedback > header p { font-size: 18px; }
.exercise-feedback__label { display: block; margin-top: 6px; color: var(--k-muted); font-size: 13px; }
.app-shell .lesson-page .exercise-feedback > header em { font-size: 13px; }
.app-shell .lesson-page .exercise-feedback > section > p:last-child,
.app-shell .lesson-page .exercise-feedback__details p:last-child { color: var(--k-ink); font-size: 16px; }
.app-shell .lesson-page .exercise-feedback__details { grid-template-columns: minmax(0, 1fr); border-color: var(--k-rule); }
.app-shell .lesson-page .exercise-feedback__details > div + div { border-left: 0; border-top: 1px solid var(--k-rule); }
.app-shell .lesson-page .selected-answer-feedback { background: transparent; border-color: var(--k-rule); }
.exercise-switcher { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--k-rule); }
.exercise-switcher > span { color: var(--k-muted); font-size: 13px; text-align: center; }
.app-shell .lesson-page .practice-scope { margin: 0 0 20px; padding: 16px; border-radius: 0; background: var(--k-note); }
.app-shell .lesson-page .practice-scope h3 { font-size: 16px; }
.app-shell .lesson-page .practice-scope p { font-size: 15px; }
.app-shell .lesson-page .practice-page-controls { border-color: var(--k-rule); }
.app-shell .lesson-page .practice-page-controls > div strong { font-size: 20px; }
.app-shell .lesson-page .practice-page-controls > div span { font-size: 13px; }
.app-shell .lesson-page .learning-disclosure { border-color: var(--k-rule); }
.app-shell .lesson-page .learning-disclosure > summary { font-size: 16px; min-height: 32px; }
.app-shell .lesson-page .lesson-reference { margin-top: 36px; scroll-margin-top: 24px; }
.app-shell .lesson-page .communication-workshop,
.app-shell .lesson-page .page-recap,
.app-shell .lesson-page .complete-strip,
.app-shell .lesson-page .reopening-notice { border-color: var(--k-rule); }
.app-shell .lesson-page .communication-workshop textarea { border-radius: var(--k-radius); font-size: 18px; }
.app-shell .lesson-page .communication-workshop [lang="de"] { font: 400 21px/1.6 var(--k-font-serif); }
.app-shell .lesson-page .lesson-reference :is(.lesson-roadmap, .lesson-story-overview, .culture-note, .dialogue-card, .vocabulary-grid article) { border-radius: var(--k-radius); border-color: var(--k-rule); background: var(--k-sheet); }
.app-shell .lesson-page .lesson-reference :is(.language-note, .speaking-mission) { border-radius: var(--k-radius); background: var(--k-note); color: var(--k-ink); }
.app-shell .lesson-page .lesson-reference :is(.language-note p, .speaking-mission span, .speaking-mission .kicker) { color: var(--k-ink); }
.app-shell .lesson-page .lesson-reference :is(.lesson-roadmap li, .lesson-story-overview p:not(.kicker), .culture-note p:last-child, .dialogue-card p, .vocabulary-grid span) { font-size: 16px; }
.app-shell .lesson-page .lesson-reference :is(.dialogue-card strong, .vocabulary-grid strong) { font: 400 21px/1.5 var(--k-font-serif); }
.app-shell .lesson-page .dialogue-card article:nth-child(even) { background: var(--k-paper); }
@media (min-width: 781px) and (max-width: 1100px) {
  .app-shell { grid-template-columns: 190px minmax(0, 1fr); }
  .workbook-spread { grid-template-columns: minmax(0, 1fr); }
  .workbook-source { border-right: 0; border-bottom: 1px solid var(--k-rule); }
}
@media (max-width: 780px) {
  .app-shell { display: block; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .app-shell .mobile-header { min-height: 76px; padding: 12px 18px; }
  .brand--compact .brand__wordmark { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; max-width: 180px; }
  .brand--compact .brand__wordmark::before { display: none; }
  .brand--compact .brand__wordmark > strong { font-size: 26px; }
  .brand--compact .brand__wordmark > span { font-size: 16px; }
  .brand--compact .brand__wordmark > small { flex-basis: 100%; margin: 0; font-size: 12px; }
  .app-shell .mobile-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 76px; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .app-shell .mobile-nav .nav-item { min-width: 0; min-height: 64px; padding: 8px 0; gap: 5px; font-size: clamp(14px, 4.1vw, 16px); font-weight: 600; line-height: 1.3; text-align: center; border-radius: 0; }
  .app-shell .mobile-nav .nav-item svg { width: 22px; height: 22px; }
  .app-shell .mobile-nav .nav-item.is-active { box-shadow: inset 0 3px 0 var(--k-action); }
  .app-shell .lesson-page { padding: 22px 18px 36px; }
  .app-shell .lesson-page h1 { font-size: 29px; }
  .app-shell .lesson-page .lesson-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .app-shell .lesson-page .lesson-progress { display: flex; gap: 8px; justify-content: flex-start; align-items: baseline; padding: 0; border: 0; }
  .app-shell .lesson-page .lesson-progress strong { font-size: 18px; }
  .app-shell .lesson-page .lesson-page-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .app-shell .lesson-page .lesson-page-tab { min-height: 56px; }
  .workbook-spread { grid-template-columns: minmax(0, 1fr); }
  .workbook-source { border-right: 0; border-bottom: 1px solid var(--k-rule); }
  .workbook-source, .workbook-practice { padding: 20px 16px; }
  .app-shell .lesson-page .section-title { align-items: start; }
  .app-shell .lesson-page .practice-page-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .app-shell .lesson-page .practice-page-controls > div { grid-column: 1 / -1; grid-row: 1; }
  .app-shell .lesson-page .practice-page-controls .button { font-size: 15px; padding: 10px; }
  .app-shell .lesson-page .lesson-reference .insight-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .app-shell .mobile-header { padding-inline: 12px; }
  .app-shell .mobile-header__actions { gap: 5px; }
  .app-shell .mobile-nav .nav-item { font-size: 14px; }
  .app-shell .lesson-page { padding-inline: 12px; }
  .workbook-source, .workbook-practice { padding-inline: 14px; }
  .exercise-switcher { gap: 6px; }
  .exercise-switcher .button { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .app-shell .lesson-page *, .app-shell .nav-item { transition: none; }
}
:root .app-shell .mobile-nav { background: var(--k-sheet); }
.app-shell .lesson-page .exercise-feedback .selected-answer-feedback { background: transparent; }
body:has(.app-shell) { min-width: 0; }
/* Today and course browsing share the accepted paper-and-ink foundation. */
.workspace:has(.discovery-page) { background: var(--k-paper); }
.app-shell .discovery-page {
  width: min(1180px, 100%); padding: 44px clamp(20px, 4vw, 58px) 64px;
  color: var(--k-ink); font: 16px/1.55 var(--k-font-sans);
  overflow-wrap: anywhere;
}
.app-shell .discovery-page h1, .app-shell .discovery-page h2 { font-family: var(--k-font-serif); font-weight: 400; letter-spacing: -.025em; line-height: 1.25; }
.app-shell .discovery-page h1 { margin: 0 0 12px; font-size: 36px; }
.app-shell .discovery-page h2 { margin: 0 0 12px; font-size: 27px; }
.app-shell .discovery-page .kicker { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--k-muted); }
.discovery-heading { padding-bottom: 26px; margin-bottom: 32px; border-bottom: 1px solid var(--k-rule); }
.discovery-heading > p:last-child { margin-bottom: 0; }
.app-shell .discovery-page .button { min-height: 48px; border-radius: var(--k-radius); box-shadow: none; font-weight: 600; transform: none; }
.app-shell .discovery-page .button--primary, .app-shell .discovery-page .button--primary:hover { background: var(--k-action); color: var(--k-on-action); }
.app-shell .discovery-page .button--quiet { background: transparent; color: var(--k-action); border-color: var(--k-control); }
.app-shell .discovery-page .button--quiet:hover { background: var(--k-tint); }
.app-shell .discovery-page .text-button { min-height: 44px; color: var(--k-action); font-size: 16px; font-weight: 600; text-align: left; }
.app-shell .discovery-page :focus-visible { outline: 3px solid var(--k-action); outline-offset: 4px; }
.today-next { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 40px; padding: 4px 0 36px; }
.today-next > div { min-width: 0; }
.today-next > div > p:not(.kicker) { max-width: 58ch; margin-bottom: 24px; }
.today-next:not(:has(.today-excerpt)) { grid-template-columns: minmax(0, 1fr); }
.action-note { display: block; margin-top: 10px; color: var(--k-muted); font-size: 14px; }
.today-excerpt { position: relative; padding: 26px; border: 1px solid var(--k-rule); background: var(--k-sheet); }
.today-excerpt::before { content: ""; position: absolute; top: -1px; left: 26px; width: 32px; height: 4px; background: var(--k-tab); }
.today-excerpt blockquote { margin: 16px 0; font: 400 24px/1.55 var(--k-font-serif); }
.today-excerpt > p:not(.kicker) { margin-bottom: 16px; }
.today-excerpt > span { color: var(--k-muted); font-size: 13px; }
.today-practice-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--k-rule); }
.today-practice { padding: 28px 28px 28px 0; }
.today-practice + .today-practice { border-left: 1px solid var(--k-rule); padding: 28px 0 28px 28px; }
.app-shell .today-practice h2 { font-size: 24px; }
.today-practice p:not(.kicker) { color: var(--k-muted); }
.app-shell .today-situation { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; margin: 0; border-bottom: 1px solid var(--k-rule); }
.today-situation > div { min-width: 0; }
.today-situation p:last-child { color: var(--k-muted); margin-bottom: 0; }
.today-situation > button { flex-shrink: 0; }
.today-topics { padding: 32px 0; }
.today-topics > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.today-topics > header h2 { margin: 0; }
.topic-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.topic-links button { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 62px; border: 0; border-bottom: 1px solid var(--k-rule); padding: 12px 0; color: var(--k-ink); background: transparent; text-align: left; }
.topic-links button:hover { color: var(--k-action); background: var(--k-tint); }
.topic-links button > span { font-weight: 600; }
.topic-links button > small { color: var(--k-muted); font-size: 13px; }
.topic-links svg { width: 18px; }
.today-activity { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px; background: var(--k-note); }
.today-activity p { margin-bottom: 8px; }
.today-activity p:last-child { margin-bottom: 0; color: var(--k-muted); font-size: 14px; }
.today-activity > button { flex-shrink: 0; }
.course-position { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; padding: 22px 24px; border-left: 3px solid var(--k-tab); background: var(--k-sheet); }
.course-position p:last-child { margin: 0; font-size: 14px; color: var(--k-muted); }
.course-position > button { flex-shrink: 0; }
.course-level-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.course-level-tabs button { min-height: 66px; display: grid; gap: 4px; border: 1px solid var(--k-control); border-radius: var(--k-radius); padding: 12px; background: transparent; color: var(--k-ink); font-size: 16px; font-weight: 600; }
.course-level-tabs button > span { font-size: 13px; font-weight: 400; color: var(--k-muted); }
.course-level-tabs button.is-active { background: var(--k-action); color: var(--k-on-action); border-color: var(--k-action); }
.course-level-tabs button.is-active > span { color: var(--k-on-action); }
.course-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin: 22px 0; color: var(--k-muted); font-size: 14px; }
.course-summary p { margin: 0; max-width: 55ch; }
.course-summary > span { flex-shrink: 0; }
.course-modules { border-top: 1px solid var(--k-rule); }
.course-module { border-bottom: 1px solid var(--k-rule); scroll-margin-top: 24px; }
.course-module > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: 20px; min-height: 94px; padding: 20px 4px; cursor: pointer; }
.course-module > summary::-webkit-details-marker { display: none; }
.course-module > summary:hover { background: var(--k-tint); }
.module-label { display: grid; gap: 5px; }
.module-label > strong { font: 400 25px/1.3 var(--k-font-serif); }
.module-label > small { color: var(--k-muted); font-size: 13px; font-family: var(--k-font-sans); }
.module-count { font-size: 17px; text-align: right; }
.module-count small { display: block; color: var(--k-muted); font-size: 12px; }
.module-chevron { color: var(--k-action); text-align: center; font-size: 28px; font-weight: 400; }
.course-module[open] > summary .module-chevron { font-size: 0; }
.course-module[open] > summary .module-chevron::after { content: "−"; font-size: 28px; }
.course-lessons { border: 1px solid var(--k-rule); border-bottom: 0; margin-bottom: 20px; background: var(--k-sheet); }
.course-lesson { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 18px; width: 100%; padding: 22px; border: 0; border-bottom: 1px solid var(--k-rule); background: transparent; color: var(--k-ink); text-align: left; }
.course-lesson:hover { background: var(--k-tint); }
.course-lesson.is-current { box-shadow: inset 3px 0 0 var(--k-action); }
.course-lesson-number { align-self: start; color: var(--k-muted); font-size: 18px; }
.course-lesson-number svg { color: var(--k-good); }
.course-lesson-copy { display: grid; gap: 7px; }
.course-lesson-copy strong { font-size: 18px; font-weight: 600; }
.course-lesson-copy > span { font-size: 16px; }
.course-lesson-copy small { color: var(--k-muted); font-size: 13px; }
.course-lesson-action { display: flex; align-items: center; gap: 8px; color: var(--k-action); font-weight: 600; font-size: 15px; }
.course-related { margin: -6px 0 18px 24px; }
.course-word-note { display: flex; align-items: center; gap: 26px; justify-content: space-between; padding: 26px; margin-top: 32px; background: var(--k-note); }
.course-word-note p { margin-bottom: 0; max-width: 60ch; }
.course-word-note > button { flex-shrink: 0; }
@media (max-width: 1100px) {
  .today-next { gap: 24px; }
  .course-lesson { grid-template-columns: 28px minmax(0, 1fr); }
  .course-lesson-action { grid-column: 2; }
  .topic-links { grid-template-columns: minmax(0, 1fr); }
  .app-shell .today-situation { align-items: start; flex-direction: column; gap: 10px; }
}
@media (max-width: 780px) {
  .app-shell .discovery-page { padding: 24px 18px 36px; }
  .app-shell .discovery-page h1 { font-size: 30px; }
  .discovery-heading { margin-bottom: 24px; padding-bottom: 20px; }
  .today-next, .today-practice-options { grid-template-columns: minmax(0, 1fr); }
  .today-next { gap: 24px; padding-bottom: 28px; }
  .today-excerpt { padding: 22px; }
  .today-practice, .today-practice + .today-practice { padding: 24px 0; border-left: 0; }
  .today-practice + .today-practice { border-top: 1px solid var(--k-rule); }
  .today-activity, .course-position, .course-word-note { flex-direction: column; align-items: start; gap: 16px; padding: 20px; }
  .course-level-tabs { gap: 6px; }
  .course-level-tabs button { font-size: 15px; padding: 10px 5px; }
  .course-summary { flex-direction: column; gap: 8px; }
  .course-module > summary { grid-template-columns: minmax(0, 1fr) auto 16px; gap: 12px; }
  .module-label > strong { font-size: 23px; }
  .module-count small { max-width: 66px; }
  .course-lesson { padding: 18px 14px; gap: 10px; }
  .course-lesson-action { min-height: 32px; }
  .course-related { margin-left: 0; }
}
/* Step 7: practice modes share the paper, type and feedback of the workbook. */
.workspace:has(.practice-page) { background: var(--k-paper); }
.app-shell .practice-page {
  width: 100%; max-width: 1360px; padding: 36px clamp(18px, 4vw, 64px) 80px;
  color: var(--k-ink); background: var(--k-paper); font-size: 16px; line-height: 1.6;
  overflow-wrap: anywhere;
}
.app-shell .practice-page h1, .app-shell .practice-page h2 { font-family: var(--k-font-serif); font-weight: 400; letter-spacing: -.025em; line-height: 1.25; }
.app-shell .practice-page h1 { font-size: clamp(28px, 3vw, 36px); }
.app-shell .practice-page h2 { font-size: 26px; }
.app-shell .practice-page h3 { font-size: 20px; letter-spacing: 0; }
.app-shell .practice-page .kicker, .app-shell .practice-page .review-label { color: var(--k-muted); font-size: 12px; letter-spacing: .045em; font-weight: 600; }
.app-shell .practice-page .page-heading { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--k-rule); }
.app-shell .practice-page .page-heading p { max-width: 68ch; }
.app-shell .practice-page .button,
.app-shell .practice-page .text-button,
.app-shell .practice-page .back-link { min-height: 48px; border-radius: var(--k-radius); font-size: 16px; font-weight: 600; box-shadow: none; transform: none; }
.app-shell .practice-page .button--primary { color: var(--k-on-action); background: var(--k-action); }
.app-shell .practice-page .button--quiet, .app-shell .practice-page .button--light { color: var(--k-action); background: transparent; }
.app-shell .practice-page :focus-visible { outline: 3px solid var(--k-action); outline-offset: 3px; }
.app-shell .practice-page .button:disabled { opacity: .55; }
.app-shell .practice-page .back-link { display: inline-flex; align-items: center; }
.app-shell .practice-page .progress-track { height: 4px; border-radius: 0; background: var(--k-rule); }
.app-shell .practice-page .progress-track > span { background: var(--k-action); }
.app-shell .practice-page .answer-list { gap: 12px; margin-top: 20px; }
.app-shell .practice-page .answer-option { min-height: 60px; padding: 16px 18px; color: var(--k-ink); border-radius: var(--k-radius); background: var(--k-sheet); font-size: 18px; line-height: 1.55; }
.app-shell .practice-page .answer-option:hover:not(:disabled) { border-color: var(--k-action); background: var(--k-tint); }
.app-shell .practice-page .answer-option.is-correct { background: var(--k-good-bg); border-color: var(--k-good); color: var(--k-good); }
.app-shell .practice-page .answer-option.is-wrong { background: var(--k-bad-bg); border-color: var(--k-bad); color: var(--k-bad); }
.app-shell .practice-page .answer-option.is-correct i { background: var(--k-good); color: var(--k-sheet); }
.app-shell .practice-page .feedback, .app-shell .practice-page .scenario-coaching { box-shadow: none; }
.app-shell .practice-page .feedback--correct, .app-shell .practice-page .scenario-coaching.is-correct { background: var(--k-good-bg); color: var(--k-good); border-color: var(--k-good); }
.app-shell .practice-page .feedback--wrong, .app-shell .practice-page .scenario-coaching.is-wrong { background: var(--k-bad-bg); color: var(--k-bad); border-color: var(--k-bad); }
.app-shell .practice-page .feedback--partial { border-color: var(--k-hint); }
.app-shell .practice-page .feedback p, .app-shell .practice-page .feedback small { color: inherit; font-size: 16px; line-height: 1.6; }
.app-shell .practice-page .practice-reassurance { font-size: 15px; line-height: 1.6; }
.app-shell .practice-page .practice-help { margin-top: 20px; padding: 0; border: 0; border-top: 1px solid var(--k-rule); border-bottom: 1px solid var(--k-rule); border-radius: 0; color: var(--k-ink); background: transparent; }
.app-shell .practice-page .practice-help > summary { padding: 14px 0; min-height: 48px; cursor: pointer; font-size: 16px; font-weight: 600; }
.app-shell .practice-page .practice-help > ul { margin: 0 0 20px; padding-left: 24px; }
/* Situations: a compact topic library, a preparation spread and a conversation. */
.app-shell .practice-page .scenario-guide { margin-bottom: 22px; padding: 0 0 22px; border: 0; border-bottom: 1px solid var(--k-rule); background: transparent; }
.app-shell .practice-page .scenario-guide > div:first-child { display: none; }
.app-shell .practice-page .scenario-guide p { font-size: 16px; }
.app-shell .practice-page .scenario-total { background: transparent; color: var(--k-ink); }
.app-shell .practice-page .scenario-total span { color: var(--k-muted); font-size: 14px; }
.app-shell .practice-page .scenario-filters { margin: 20px 0 28px; }
.app-shell .practice-page .scenario-filters button { min-height: 48px; border-radius: var(--k-radius); font-size: 16px; border-color: var(--k-control); }
.app-shell .practice-page .scenario-filters button.is-active { background: var(--k-action); color: var(--k-on-action); border-color: var(--k-action); }
.app-shell .practice-page .scenario-filters button span { background: transparent; color: inherit; font-size: 14px; }
.app-shell .practice-page .scenario-library { grid-template-columns: minmax(0, 1fr); gap: 0; }
.app-shell .practice-page .scenario-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .42fr); column-gap: 32px; min-height: 0; padding: 26px 0; border: 0; border-top: 1px solid var(--k-rule); background: transparent; box-shadow: none; }
.app-shell .practice-page .scenario-card__top { grid-column: 1 / -1; justify-content: flex-start; margin-bottom: 8px; }
.app-shell .practice-page .scenario-card h2 { grid-column: 1; margin: 4px 0 12px; }
.app-shell .practice-page .scenario-card > p { grid-column: 1; font-size: 16px; margin: 0 0 12px; }
.app-shell .practice-page .scenario-objective { grid-column: 1; margin: 0; padding: 0; border: 0; }
.app-shell .practice-page .scenario-objective span { color: var(--k-muted); font-size: 14px; }
.app-shell .practice-page .scenario-objective strong { font-size: 16px; font-weight: 500; }
.app-shell .practice-page .scenario-card footer { grid-column: 2; grid-row: 2 / 5; flex-direction: column; align-items: flex-start; justify-content: center; margin: 0; padding: 0 0 0 24px; border: 0; border-left: 1px solid var(--k-rule); }
.app-shell .practice-page .scenario-card footer > span { color: var(--k-muted); font-size: 14px; }
.app-shell .practice-page .scenario-domain, .app-shell .practice-page .scenario-status { color: var(--k-muted); border-radius: 0; background: transparent; font-size: 13px; }
.app-shell .practice-page .scenario-briefing, .app-shell .practice-page .scenario-shell { box-shadow: none; }
.app-shell .practice-page .scenario-briefing > header { padding: 28px; background: transparent; }
.app-shell .practice-page .scenario-duration { color: var(--k-ink); background: var(--k-note); }
.app-shell .practice-page .scenario-duration span, .app-shell .practice-page .scenario-duration small { color: var(--k-muted); font-size: 14px; }
.app-shell .practice-page .scenario-briefing__goal { display: block; margin: 24px 28px 0; padding: 0 0 0 18px; }
.app-shell .practice-page .scenario-briefing__goal > span { display: none; }
.app-shell .practice-page .scenario-briefing__goal h2 { font-size: 24px; }
.app-shell .practice-page .scenario-briefing__grid { padding: 28px; gap: 32px; }
.app-shell .practice-page .scenario-briefing__grid h2 { font-size: 24px; }
.app-shell .practice-page .preparation-list p, .app-shell .practice-page .scenario-phrases span { font-size: 16px; }
.app-shell .practice-page .scenario-phrases strong { font: 400 21px/1.55 var(--k-font-serif); }
.app-shell .practice-page .scenario-phrases li { border-color: var(--k-rule); }
.app-shell .practice-page .scenario-briefing > footer { padding: 24px 28px; background: var(--k-paper); }
.app-shell .practice-page .scenario-briefing > footer p { font-size: 15px; }
.app-shell .practice-page .scenario-shell { grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr); }
.app-shell .practice-page .scenario-shell > aside { color: var(--k-ink); background: var(--k-paper); padding: 28px; border-right: 1px solid var(--k-rule); }
.app-shell .practice-page .scenario-shell aside > p:last-of-type,
.app-shell .practice-page .scenario-shell aside > small { color: var(--k-muted); font-size: 15px; }
.app-shell .practice-page .scenario-shell > section { padding: 28px; min-width: 0; }
.app-shell .practice-page .scenario-steps span { border-radius: var(--k-radius); background: var(--k-sheet); color: var(--k-muted); border: 1px solid var(--k-rule); }
.app-shell .practice-page .scenario-steps span.is-active { background: var(--k-action); color: var(--k-on-action); border-color: var(--k-action); }
.app-shell .practice-page .scenario-steps span.is-done { background: var(--k-good-bg); }
.app-shell .practice-page .scene-label { font-size: 14px; }
.conversation-prompt { margin-top: 20px; padding: 20px; border-left: 3px solid var(--k-tab); background: var(--k-note); }
.app-shell .practice-page .conversation-prompt h2 { margin: 0; font-size: 25px; }
.answer-role { margin: 24px 0 0; color: var(--k-muted); font-size: 15px; }
.app-shell .practice-page .scenario-coaching > header { padding: 18px; }
.app-shell .practice-page .scenario-coaching > header > span { color: inherit; background: transparent; }
.app-shell .practice-page .scenario-coaching__explanation,
.app-shell .practice-page .scenario-coaching__details { padding: 18px; background: transparent; }
.app-shell .practice-page .scenario-coaching p, .app-shell .practice-page .scenario-coaching strong { color: inherit; font-size: 16px; }
.app-shell .practice-page .scenario-coaching .practice-help { margin: 0 18px; }
.app-shell .practice-page .scenario-coaching__details { display: block; padding: 0 0 16px; }
/* Single-question practice and completion use a quiet sheet. */
.app-shell .practice-page:is(.review-page, .daily-practice-page, .vocabulary-round-page--typed) { max-width: 1040px; }
.app-shell .practice-page .review-card,
.app-shell .practice-page .completion-summary,
.app-shell .practice-page .scenario-complete { border-radius: 0; box-shadow: none; border-color: var(--k-rule); background: var(--k-sheet); }
.app-shell .practice-page .review-card { margin-top: 22px; padding: 28px; }
.app-shell .practice-page .review-card h2 { font-size: 30px; }
.app-shell .practice-page .celebration { display: none; }
.app-shell .practice-page .result-stats { background: var(--k-paper); border-color: var(--k-rule); }
.app-shell .practice-page .result-stats strong { color: var(--k-ink); font-size: 30px; }
.app-shell .practice-page .result-stats span { font-size: 14px; color: var(--k-muted); }
.app-shell .practice-page .scenario-recap aside { border-radius: 0; background: var(--k-note); color: var(--k-ink); }
.app-shell .practice-page .scenario-recap aside > span { display: none; }
.app-shell .practice-page .scenario-recap aside strong { color: var(--k-ink); font-size: 16px; }
.app-shell .practice-page .learning-feedback { border-radius: 0; box-shadow: none; border-color: var(--k-rule); }
/* Vocabulary: mixed practice first, then topic rows and a readable word list. */
.app-shell .practice-page .pool-card { min-height: 0; margin-bottom: 28px; grid-template-columns: minmax(0, 1fr) 200px; box-shadow: none; }
.app-shell .practice-page .pool-card--empty { grid-template-columns: minmax(0, 1fr); }
.app-shell .practice-page .pool-card__main { padding: 28px; }
.app-shell .practice-page .pool-card p,
.app-shell .practice-page .pool-card__note,
.app-shell .practice-page .today-label { color: var(--k-muted); font-size: 16px; }
.app-shell .practice-page .pool-card__aside { padding: 24px; border-left: 1px solid var(--k-rule); }
.app-shell .practice-page .pool-ring { width: auto; height: auto; border: 0; box-shadow: none; padding: 0; }
.app-shell .practice-page .pool-ring span { color: var(--k-ink); font: 400 34px var(--k-font-sans); }
.app-shell .practice-page .pool-ring small, .app-shell .practice-page .pool-card__aside .today-fact span { color: var(--k-muted); font-size: 14px; }
.app-shell .practice-page .vocabulary-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.app-shell .practice-page .vocabulary-card { border-radius: 0; padding: 24px 0; border: 0; border-top: 1px solid var(--k-rule); box-shadow: none; background: transparent; }
.app-shell .practice-page .vocabulary-card > p { font-size: 16px; }
.app-shell .practice-page .vocabulary-card.is-locked { opacity: 1; background: transparent; }
.app-shell .practice-page .vocabulary-lock, .app-shell .practice-page .vocabulary-count { border-radius: 0; color: var(--k-muted); background: transparent; font-size: 14px; }
.app-shell .practice-page .vocabulary-stat, .app-shell .practice-page .vocabulary-requirement { color: var(--k-muted); font-size: 15px; }
.app-shell .practice-page .vocabulary-actions { background: transparent; padding: 0 0 24px; border: 0; border-radius: 0; }
.app-shell .practice-page .vocabulary-actions p { color: var(--k-muted); font-size: 16px; }
.app-shell .practice-page .article-notes li { font-size: 16px; }
.app-shell .practice-page .word-list li { padding: 16px; }
.app-shell .practice-page .word-list strong { font: 400 21px/1.5 var(--k-font-serif); }
.app-shell .practice-page .word-list small { font-size: 15px; }
.app-shell .practice-page .word-list li > span:nth-child(2) { font-size: 16px; }
.app-shell .practice-page .audio-button { min-width: 44px; min-height: 44px; color: var(--k-action); background: var(--k-paper); border: 1px solid var(--k-control); border-radius: var(--k-radius); }
/* Lesson phrases, dialogue lines, examples and model answers with a committed clip. */
.app-shell .lesson-page .audio-button { flex: none; min-width: 44px; min-height: 44px; color: var(--k-action); background: var(--k-paper); border: 1px solid var(--k-control); border-radius: var(--k-radius); }
.app-shell .lesson-page .phrase-audio { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: inherit; font-size: inherit; }
.app-shell .lesson-page .phrase-audio > strong { min-width: 0; margin: 0; }
.app-shell .lesson-page .exercise-feedback p .audio-button { margin-inline-start: 10px; }
.app-shell .practice-page .round-toolbar { flex-wrap: wrap; gap: 12px; }
.app-shell .practice-page .vocabulary-round-page header p, .app-shell .practice-page > header p { font-size: 16px; }
.app-shell .practice-page .autoplay-toggle { min-height: 48px; }
.app-shell .practice-page .autoplay-toggle i { font-size: 14px; color: inherit; }
.app-shell .practice-page .match-panel { padding: 22px; box-shadow: none; border-color: var(--k-rule); }
.app-shell .practice-page .match-column h2 { font: 600 16px var(--k-font-sans); }
.app-shell .practice-page .match-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.app-shell .practice-page .match-tile { min-height: 60px; font-size: 17px; line-height: 1.5; color: var(--k-ink); background: var(--k-sheet); border-color: var(--k-control); }
.app-shell .practice-page .match-tile.is-selected { background: var(--k-tint); border-color: var(--k-action); box-shadow: inset 3px 0 var(--k-action); }
.app-shell .practice-page .match-tile.is-matched { background: var(--k-good-bg); color: var(--k-good); border-color: var(--k-good); opacity: 1; }
.app-shell .practice-page .match-tile.is-wrong { background: var(--k-bad-bg); color: var(--k-bad); border-color: var(--k-bad); }
.match-reminder { position: sticky; top: 0; z-index: 5; padding: 12px 18px; margin: 18px 0 0; border: 1px solid var(--k-rule); background: var(--k-note); color: var(--k-ink); font-size: 16px; }
.match-reminder span { display: block; font-size: 14px; color: var(--k-muted); }
.app-shell .practice-page .typed-answer input { font-size: 20px; min-height: 54px; border-radius: var(--k-radius); background: var(--k-sheet); border-color: var(--k-rule); color: var(--k-ink); }
.app-shell .practice-page .typed-answer label > span { font-size: 16px; color: var(--k-muted); }
@media (max-width: 1100px) {
  .app-shell .practice-page .scenario-shell { grid-template-columns: minmax(0, 1fr); }
  .app-shell .practice-page .scenario-shell > aside { border-right: 0; border-bottom: 1px solid var(--k-rule); }
}
@media (max-width: 780px) {
  .app-shell .practice-page { padding: 24px 18px 112px; }
  .app-shell .practice-page .scenario-card { grid-template-columns: minmax(0, 1fr); }
  .app-shell .practice-page .scenario-card footer { grid-column: 1; grid-row: auto; padding: 18px 0 0; border: 0; align-items: stretch; }
  .app-shell .practice-page .scenario-briefing > header,
    .app-shell .practice-page .scenario-briefing__grid,
    .app-shell .practice-page .scenario-briefing > footer { padding: 20px; }
  .app-shell .practice-page .scenario-briefing__goal { margin: 20px 20px 0; }
  .app-shell .practice-page .scenario-shell > aside, .app-shell .practice-page .scenario-shell > section { padding: 20px; }
  .app-shell .practice-page .scenario-briefing__grid { grid-template-columns: minmax(0, 1fr); }
  .app-shell .practice-page .scenario-shell aside h1 { font-size: 26px; }
  .app-shell .practice-page .review-card { padding: 20px; }
  .app-shell .practice-page .review-card h2 { font-size: 26px; }
  .app-shell .practice-page .pool-card { grid-template-columns: minmax(0, 1fr); }
  .app-shell .practice-page .pool-card__main { padding: 20px; }
  .app-shell .practice-page .pool-card__aside { border-left: 0; border-top: 1px solid var(--k-rule); }
  /* Scripted scrolls (answer feedback, headings) must stop above the fixed
     bottom navigation, and feedback keeps its "next" button in view. */
  html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .practice-page [data-practice-feedback]:has(+ .button) { scroll-margin-bottom: 64px; }
  /* Word pairs on a phone: ten rows per column must fit between the sticky
     reminder and the bottom navigation with as little scrolling as possible. */
  .app-shell .practice-page.vocabulary-round-page { padding-top: 14px; }
  .app-shell .practice-page.vocabulary-round-page .round-toolbar { margin-bottom: 12px; }
  .app-shell .practice-page.vocabulary-round-page .round-toolbar .back-link { white-space: nowrap; }
  .app-shell .practice-page.vocabulary-round-page .autoplay-toggle { min-height: 44px; padding: 6px 10px; }
  .app-shell .practice-page.vocabulary-round-page > header { margin-bottom: 8px; }
  .app-shell .practice-page.vocabulary-round-page > header h1 { margin-bottom: 4px; font-size: 24px; }
  .app-shell .practice-page.vocabulary-round-page > header p:not(.kicker) { font-size: 15px; line-height: 1.4; }
  .app-shell .practice-page .match-reminder { margin-top: 10px; padding: 8px 12px; font-size: 15px; }
  .app-shell .practice-page .match-reminder .feedback { padding: 8px 12px; }
  .app-shell .practice-page .match-panel { margin-top: 10px; padding: 8px; }
  .app-shell .practice-page .match-grid { gap: 8px; }
  .app-shell .practice-page .match-column { gap: 6px; }
  .app-shell .practice-page .match-column h2 { margin: 0; font-size: 14px; }
  .app-shell .practice-page .match-tile { min-height: 48px; padding: 7px 8px; font-size: 16px; line-height: 1.3; }
  .match-reminder { top: 0; }
  /* U12: the task starts on the first screen. The sticky reminder («Оберіть слово
     або переклад.») carries the instruction; the paragraph is for wider screens. */
  .app-shell .practice-page.vocabulary-round-page .round-toolbar { margin-bottom: 4px; flex-wrap: nowrap; gap: 8px; }
  .app-shell .practice-page.vocabulary-round-page .autoplay-toggle { gap: 6px; padding: 6px 8px; font-size: 15px; }
  .app-shell .practice-page.vocabulary-round-page > header .kicker { margin-bottom: 4px; }
  .app-shell .practice-page.vocabulary-round-page > header h1 { margin-bottom: 0; font-size: 22px; }
  .app-shell .practice-page.vocabulary-round-page .round-instruction { display: none; }
}
.app-shell .practice-page > header > strong { white-space: nowrap; flex-shrink: 0; }
.app-shell .practice-page.vocabulary-round-page > header p:not(.kicker) { font-size: 16px; }
.app-shell .practice-page .today-label { padding: 0; border: 0; background: transparent; font-size: 12px; }
.app-shell .practice-page .scenario-phrases { background: var(--k-sheet); border-color: var(--k-rule); }
.app-shell .practice-page .scenario-phrases li { background: var(--k-sheet); }
.app-shell .practice-page .scenario-goal-note { margin: 12px 0; }
.app-shell .practice-page .scenario-goal-note p { margin: 0 0 16px; font-size: 16px; }
.app-shell .practice-page .match-reminder .feedback { margin: 0; padding: 12px; }
.app-shell .practice-page .match-reminder:has(.feedback) { padding: 0; }
.app-shell .practice-page .scenario-guide p { color: var(--k-muted); }
.app-shell .practice-page .scenario-coaching > header { color: inherit; background: transparent; }
/* Step 8: account, setup, progress and supporting screens. */
.workspace:has(.support-screen) { background: var(--k-paper); }
:root .support-screen { color: var(--k-ink); background: var(--k-paper); font: 16px/1.6 var(--k-font-sans); overflow-wrap: anywhere; }
:root .support-screen.page { width: 100%; max-width: 1380px; padding: 36px clamp(18px, 4vw, 64px) 80px; }
:root .support-screen h1, :root .support-screen h2 { font-family: var(--k-font-serif); font-weight: 400; letter-spacing: -.025em; line-height: 1.25; }
:root .support-screen h1 { font-size: clamp(28px, 3vw, 38px); }
:root .support-screen h2 { font-size: 26px; }
:root .support-screen h3 { font-size: 20px; letter-spacing: 0; }
:root .support-screen .kicker { color: var(--k-muted); font-size: 12px; font-weight: 600; letter-spacing: .045em; }
:root .support-screen .page-heading { padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--k-rule); }
:root .support-screen .page-heading p { max-width: 72ch; }
:root .support-screen .button, :root .support-screen .text-button, :root .support-screen .back-link { min-height: 48px; border-radius: var(--k-radius); font-size: 16px; font-weight: 600; box-shadow: none; transform: none; }
:root .support-screen .button--primary { background: var(--k-action); color: var(--k-on-action); }
:root .support-screen .button--quiet { background: transparent; color: var(--k-action); border-color: var(--k-control); }
:root .support-screen :focus-visible { outline: 3px solid var(--k-action); outline-offset: 3px; }
:root .support-screen button:disabled { opacity: .5; }
:root .support-screen input:not([type='radio']):not([type='checkbox']),
:root .support-screen select,
:root .support-screen textarea { min-height: 52px; padding: 12px; border: 1px solid var(--k-rule); border-radius: var(--k-radius); background: var(--k-sheet); color: var(--k-ink); font-size: 18px; }
:root .support-screen fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
:root .support-screen legend,
:root .support-screen .form-stack label,
:root .support-screen .settings-fields > label { margin-bottom: 8px; font-size: 16px; color: var(--k-ink); font-weight: 600; }
:root .support-screen .initial-level-choices > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
:root .support-screen .initial-level-choices label { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px; min-height: 54px; border: 1px solid var(--k-control); border-radius: var(--k-radius); font-size: 16px; font-weight: 400; cursor: pointer; background: var(--k-sheet); }
:root .support-screen .initial-level-choices input { position: static; opacity: 1; width: 20px; height: 20px; min-height: 20px; padding: 0; margin: 0; flex-shrink: 0; accent-color: var(--k-action); }
:root .support-screen .initial-level-choices label:has(input:checked) { border-color: var(--k-action); background: var(--k-tint); box-shadow: inset 0 0 0 1px var(--k-action); font-weight: 600; }
:root .support-screen .segmented input, :root .support-screen .settings-goals input { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
:root .support-screen .segmented span, :root .support-screen .settings-goals span { min-height: 52px; border-radius: var(--k-radius); font-size: 16px; background: var(--k-sheet); color: var(--k-ink); border-color: var(--k-control); }
:root .support-screen .segmented input:checked + span,
:root .support-screen .settings-goals input:checked + span { background: var(--k-tint); color: var(--k-action); border-color: var(--k-action); box-shadow: inset 0 0 0 1px var(--k-action); font-weight: 600; }
/* Selected states read at a glance: a 2 px action border, a check mark, 600 weight. */
:root .support-screen .segmented span, :root .support-screen .settings-goals span { font-weight: 400; }
:root .support-screen .segmented span { display: flex; justify-content: center; align-items: center; gap: 6px; }
:root .support-screen .segmented input:checked + span { font-weight: 600; }
:root .support-screen .segmented input:checked + span::before { content: "✓"; }
:root .support-screen .segmented input:focus-visible + span,
:root .support-screen .settings-goals input:focus-visible + span { outline: 3px solid var(--k-action); outline-offset: 3px; }
:root .support-screen .inline-error { font-size: 16px; }
/* Entry pages. */
.login-mobile-note { display: none; }
:root .support-screen.login-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:root .support-screen .login-story { border-right: 1px solid var(--k-rule); padding: clamp(28px, 5vw, 72px); }
:root .support-screen .login-story__copy { padding: 60px 0; }
:root .support-screen .login-story__headline { font-size: clamp(36px, 4.5vw, 62px); }
:root .support-screen .login-card h1 { font-size: 28px; margin-bottom: 10px; }
:root .support-screen .login-story__copy > p:last-child { color: var(--k-muted); font-size: 18px; }
:root .support-screen .story-situation { padding: 18px 0 0; border-radius: 0; backdrop-filter: none; }
:root .support-screen .story-situation strong { font: 400 26px/1.4 var(--k-font-serif); }
:root .support-screen .story-situation span, :root .support-screen .story-situation small { color: var(--k-muted); font-size: 15px; }
:root .support-screen .login-panel { background: var(--k-paper); padding: clamp(24px, 5vw, 64px); }
:root .support-screen .login-card { width: min(460px, 100%); }
:root .support-screen .demo-hint { font-size: 15px; text-align: left; }
:root .support-screen.onboarding-page { background: var(--k-paper); padding: 32px 20px; }
:root .support-screen .onboarding-card { width: min(760px, 100%); border: 1px solid var(--k-rule); border-radius: 0; box-shadow: none; padding: clamp(22px, 4vw, 44px); }
:root .support-screen .steps span,
:root .support-screen .progress-track,
:root .support-screen .mini-progress { border-radius: 0; background: var(--k-rule); }
:root .support-screen .steps .is-active,
:root .support-screen .steps .is-done,
:root .support-screen .mini-progress i { background: var(--k-action); }
:root .support-screen .goal-choice, :root .support-screen .answer-option { min-height: 58px; border-radius: var(--k-radius); background: var(--k-sheet); border-color: var(--k-control); font-size: 18px; }
:root .support-screen .goal-choice.is-selected, :root .support-screen .answer-option.is-selected { color: var(--k-ink); background: var(--k-tint); border-color: var(--k-action); box-shadow: inset 0 0 0 1px var(--k-action); font-weight: 600; }
:root .support-screen .answer-option.is-selected i { color: var(--k-on-action); background: var(--k-action); }
:root .support-screen .result-badge { padding: 0; color: var(--k-muted); background: transparent; }
:root .support-screen .level-result { margin: 24px 0; }
:root .support-screen .level-result strong { color: var(--k-ink); font: 400 54px var(--k-font-sans); }
:root .support-screen .skill-results > div { border-radius: 0; background: var(--k-paper); border-color: var(--k-rule); }
:root .support-screen .skill-results span, :root .support-screen .recommendation p { color: var(--k-muted); font-size: 16px; }
:root .support-screen .recommendation { background: var(--k-note); color: var(--k-ink); border-color: var(--k-rule); }
:root .support-screen .recommendation span, :root .support-screen .recommendation strong { color: var(--k-ink); }
/* Profile and clear access states. */
:root .support-screen .settings-card, :root .support-screen .profile-card { box-shadow: none; border-color: var(--k-rule); }
:root .support-screen .settings-card header > p:last-child,
:root .support-screen .appearance-card > p,
:root .support-screen .profile-row > span,
:root .support-screen .privacy-note p { color: var(--k-muted); font-size: 16px; }
:root .support-screen .assigned-level-note, :root .support-screen .privacy-note { color: var(--k-ink); background: var(--k-note); }
:root .support-screen .assigned-level-note span { font-size: 15px; color: var(--k-muted); }
:root .support-screen .assigned-level-note .text-button { font-size: 15px; }
:root .support-screen .subscription-card { grid-template-columns: minmax(0, 1fr) auto; padding: 24px; color: var(--k-ink); background: var(--k-sheet); border-color: var(--k-rule); border-left: 3px solid var(--k-good); }
:root .support-screen .subscription-card.is-expired { border-left-color: var(--k-bad); background: var(--k-bad-bg); }
:root .support-screen .subscription-card__icon { display: none; }
:root .support-screen .subscription-card p { font-size: 16px; color: var(--k-muted); }
:root .support-screen .subscription-card.is-expired p { color: var(--k-bad); }
:root .support-screen .subscription-card > strong { font-size: 18px; color: var(--k-ink); }
/* Progress begins with work done, followed by topics and optional statistics. */
.progress-week { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 4px 0 32px; margin-bottom: 32px; border-bottom: 1px solid var(--k-rule); }
.practice-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; gap: 0; }
.practice-totals > div { padding: 14px 20px; border-left: 1px solid var(--k-rule); }
.practice-totals dt { color: var(--k-muted); font-size: 15px; }
.practice-totals dd { margin: 4px 0 0; font: 400 32px/1.3 var(--k-font-sans); }
:root .support-screen .recent-card { padding: 0 0 28px; border: 0; border-bottom: 1px solid var(--k-rule); background: transparent; }
:root .support-screen .recent-list button { min-height: 72px; }
:root .support-screen .recent-list strong { font-size: 18px; }
:root .support-screen .recent-list small { font-size: 15px; }
:root .support-screen .progress-list { border: 0; padding: 0; background: transparent; }
:root .support-screen .progress-list > div { grid-template-columns: minmax(140px, .7fr) minmax(0, 1fr) 65px; padding: 14px 0; border-bottom: 1px solid var(--k-rule); }
:root .support-screen .progress-list span, :root .support-screen .progress-list strong { font-size: 16px; }
:root .support-screen .assessment-note, :root .support-screen .empty-copy { font-size: 16px; line-height: 1.6; }
:root .support-screen .progress-words .practice-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.progress-details { border-top: 1px solid var(--k-rule); border-bottom: 1px solid var(--k-rule); }
.progress-details > summary { min-height: 56px; padding: 18px 0; color: var(--k-action); cursor: pointer; font-weight: 600; }
:root .support-screen .progress-overview, :root .support-screen .admin-stats { border-radius: 0; background: var(--k-sheet); border-color: var(--k-rule); grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root .support-screen .progress-overview .big-stat { display: flex; flex-direction: column; align-items: flex-start; background: var(--k-sheet); }
:root .support-screen .progress-overview span, :root .support-screen .admin-stats span { font-size: 15px; color: var(--k-muted); }
:root .support-screen .progress-retention { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
:root .support-screen .progress-retention article { border-radius: 0; background: var(--k-sheet); border-color: var(--k-rule); }
:root .support-screen .progress-retention p, :root .support-screen .streak-summary span { color: var(--k-muted); font-size: 16px; }
:root .support-screen .streak-summary strong { color: var(--k-ink); }
.visit-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 16px 0; }
.visit-days > div { padding: 8px 2px; display: grid; justify-items: center; border: 1px solid var(--k-rule); }
.visit-days > div.is-active { background: var(--k-tint); }
.visit-days small { font-size: 12px; }
:root .support-screen .placement-summary { display: block; background: var(--k-note); }
:root .support-screen .placement-summary p, :root .support-screen .placement-summary span { color: var(--k-ink); font-size: 16px; }
/* Administration retains its existing actions and table structure. */
:root .support-screen :is(.admin-retention-grid article, .feedback-admin, .admin-create, .admin-table-card, .admin-subscription, .learner-retention-card) { border-radius: 0; box-shadow: none; background: var(--k-sheet); border-color: var(--k-rule); color: var(--k-ink); }
:root .support-screen :is(.feedback-comment-list blockquote, .admin-subscription__summary) { border-radius: 0; background: var(--k-paper); color: var(--k-ink); }
:root .support-screen .admin-subscription p, :root .support-screen .admin-subscription label { font-size: 16px; }
:root .support-screen :is(.admin-retention-grid span, .admin-create label, .feedback-admin p, .feedback-admin small, .user-cell small, .admin-table__row, .admin-table__head, .subscription-cell small) { font-size: 15px; color: var(--k-muted); }
:root .support-screen :is(.admin-table__row strong, .feedback-source-list strong, .table-action) { font-size: 16px; }
:root .support-screen .table-action { min-height: 44px; border-radius: var(--k-radius); background: var(--k-tint); }
:root .support-screen .subscription-status.is-active { background: var(--k-good-bg); color: var(--k-good); }
:root .support-screen .subscription-status.is-expired { background: var(--k-bad-bg); color: var(--k-bad); }
@media (max-width: 1100px) {
  :root .support-screen .profile-settings-grid { grid-template-columns: minmax(0, 1fr); }
  :root .support-screen .admin-subscription__summary { flex-basis: auto; }
  :root .support-screen .admin-subscription__controls, :root .support-screen .admin-subscription__controls form { grid-template-columns: minmax(0, 1fr); width: 100%; }
}
/* Input boundaries remain distinct from decorative workbook rules. */
:root :is(.support-screen, .lesson-page, .practice-page) :is(input:not([type='radio']):not([type='checkbox']), textarea, select) { border-color: var(--k-control); }
@media (max-width: 780px) {
  :root .support-screen.page { padding: 24px 18px 112px; }
  :root .support-screen.login-page { display: block; }
  :root .support-screen .login-story { display: none; }
  :root .support-screen .login-panel { padding: 28px 22px; }
  :root .support-screen .mobile-brand { display: block; margin-bottom: 32px; }
  :root .support-screen .login-mobile-note { display: block; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--k-rule); color: var(--k-muted); }
  :root .support-screen .initial-level-choices > div { grid-template-columns: minmax(0, 1fr); }
  :root .support-screen .goal-grid, :root .support-screen .settings-goals { grid-template-columns: minmax(0, 1fr); }
  :root .support-screen .subscription-card { grid-template-columns: minmax(0, 1fr); }
  :root .support-screen .subscription-card > strong { display: none; }
  .progress-week { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  :root .support-screen .progress-list > div { grid-template-columns: minmax(0, 1fr) 65px; }
  :root .support-screen .progress-list .progress-track { grid-row: 2; grid-column: 1 / -1; }
  :root .support-screen .progress-list strong { grid-column: 2; grid-row: 1; }
  :root .support-screen .progress-words .practice-totals { grid-template-columns: minmax(0, 1fr); }
  :root .support-screen .progress-overview, :root .support-screen .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .support-screen .progress-retention { grid-template-columns: minmax(0, 1fr); }
  :root .support-screen .settings-card { padding: 20px; }
  :root .support-screen #goals-form .form-actions { flex-direction: column-reverse; }
  :root .support-screen #goals-form .form-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  :root .support-screen .loader { animation: none; }
}
.grammar-links { display: grid; gap: 4px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--k-rule); }
.grammar-links > span { font-size: 14px; color: var(--k-muted); }
.grammar-links .text-button, .grammar-practice-links .text-button { min-height: 44px; text-align: left; white-space: normal; }
.grammar-references { margin: 28px 0; }
.grammar-references > header { margin-bottom: 16px; }
.grammar-card { border-top: 1px solid var(--k-rule); scroll-margin-top: 24px; }
.grammar-card:last-child { border-bottom: 1px solid var(--k-rule); }
.grammar-card > summary { padding: 16px 8px; min-height: 48px; color: var(--k-action); font-weight: 700; cursor: pointer; }
.grammar-card > summary:focus-visible { outline: 2px solid var(--k-action); outline-offset: 2px; }
.grammar-card-body { padding: 0 8px 20px; max-width: 760px; overflow-wrap: anywhere; }
.grammar-examples { display: grid; gap: 12px; list-style: none; padding: 0; }
.grammar-examples li { display: grid; gap: 4px; padding: 12px 16px; background: var(--k-note); border-left: 3px solid var(--k-tab); }
.grammar-examples strong { font: 400 21px/1.5 var(--k-font-serif); }
.grammar-contrast { padding: 12px 0; }
.grammar-practice-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.grammar-practice-links .button { white-space: normal; text-align: left; }
/* Source-bound work stays in one reading-order spread and is submitted as a group. */
.source-group-page-layout { display: grid; gap: 24px; }
.source-group-page-intro { border: 1px solid var(--k-rule); background: var(--k-sheet); }
.source-group-prerequisites { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--k-rule); }
.source-group-prerequisites > span { color: var(--k-muted); font-size: 14px; }
.source-group-prerequisites .text-button { min-height: 44px; color: var(--k-action); text-align: left; }
.course-source-groups { border: 1px solid var(--k-rule); background: var(--k-sheet); }
.course-source-groups__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; border-bottom: 1px solid var(--k-rule); }
.course-source-groups__toolbar h2, .source-group-shell__header h3, .source-group-open-card h3 { margin: 0; }
.source-group-run-progress { margin: 0; color: var(--k-muted); font-size: 14px; }
.source-group-eyebrow { margin: 0 0 8px; color: var(--k-muted); font-size: 12px; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; }
.source-group-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--k-rule); }
.source-group-tab { min-height: 56px; padding: 12px 16px; border: 0; border-right: 1px solid var(--k-rule); background: transparent; color: var(--k-ink); text-align: left; font: inherit; font-weight: 600; }
.source-group-tab:last-child { border-right: 0; }
.source-group-tab:hover { background: var(--k-tint); }
.source-group-tab[aria-pressed='true'] { color: var(--k-on-action); background: var(--k-action); }
.source-group-tab.is-complete:not([aria-pressed='true']) { color: var(--k-good); background: var(--k-good-bg); }
.source-group-tabs:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.source-group-tab.is-locked { color: var(--k-muted); }
.source-group-tab.is-locked::after { content: ' · закрито'; font-size: 12px; font-weight: 400; }
.source-group-shell__header { padding: 24px; border-bottom: 1px solid var(--k-rule); }
.source-group-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.source-group-labels .status-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border: 1px solid var(--k-rule); color: var(--k-action); background: var(--k-tint); font-size: 12px; }
.source-group-labels .status-chip.secondary { color: var(--k-muted); background: transparent; }
.source-group-spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
.source-group-panel { min-width: 0; padding: 26px; }
.source-group-panel--source { border-right: 1px solid var(--k-rule); background: var(--k-paper); }
.source-group-panel > section + section { margin-top: 22px; }
.source-group-panel h4 { margin: 0 0 10px; }
.source-group-teaching, .source-group-audio, .source-group-source-text, .source-group-form-source { padding: 18px; border: 1px solid var(--k-rule); background: var(--k-sheet); }
.source-group-teaching { border-left: 3px solid var(--k-tab); background: var(--k-note); }
.source-group-quoted { margin: 0; color: var(--k-ink); font: 400 20px/1.65 var(--k-font-serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.source-group-teaching .source-group-quoted { font-size: 18px; }
.source-group-map { min-width: 0; margin: 18px 0 0; padding: 16px; border: 1px solid var(--k-rule); background: var(--k-paper); }
.source-group-map > h4 { margin-bottom: 6px; }
.source-group-map__orientation, .source-group-map__description { margin: 4px 0; color: var(--k-muted); font-size: 14px; overflow-wrap: anywhere; }
.source-group-map__canvas { width: 100%; margin-top: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; border: 1px solid var(--k-rule); background: var(--k-sheet); }
.source-group-map__canvas:focus-visible { outline: 2px solid var(--k-action); outline-offset: 2px; }
.source-group-map svg { display: block; width: 100%; min-width: 400px; height: auto; color: var(--k-ink); stroke: none; }
.source-group-map__north line, .source-group-map__north path { stroke: var(--k-action); stroke-width: 2; fill: var(--k-action); vector-effect: non-scaling-stroke; }
.source-group-map__north text { fill: var(--k-action); font-size: 13px; font-weight: 650; }
.source-group-map__edge line { stroke: var(--k-muted); stroke-width: 3; vector-effect: non-scaling-stroke; }
.source-group-map__edge.is-blocked > line:first-child { stroke: var(--k-bad); stroke-dasharray: 7 5; }
.source-group-map__edge .source-group-map__block { stroke: var(--k-bad); stroke-width: 4; }
.source-group-map__edge-label { fill: var(--k-ink); stroke: var(--k-sheet); stroke-width: 5; paint-order: stroke; font-size: 13px; font-weight: 650; }
.source-group-map__node rect { fill: var(--k-sheet); stroke: var(--k-action); stroke-width: 2; vector-effect: non-scaling-stroke; }
.source-group-map__node text { fill: var(--k-ink); font: 650 14px/1 var(--k-font-sans); }
.source-group-map__node.is-start rect { fill: var(--k-tint); stroke-width: 3; }
.source-group-map__node .source-group-map__start { fill: var(--k-action); font-size: 11px; font-weight: 650; letter-spacing: .08em; }
.source-group-map__scroll-note { margin: 8px 0 0; color: var(--k-muted); font-size: 13px; }
.source-group-map__text { margin-top: 10px; border-top: 1px solid var(--k-rule); }
.source-group-map__text summary { display: flex; align-items: center; min-height: 44px; color: var(--k-action); font-weight: 650; cursor: pointer; }
.source-group-map__text summary:focus-visible { outline: 2px solid var(--k-action); outline-offset: 2px; }
.source-group-map__facts { padding-bottom: 6px; }
.source-group-map__facts p { margin: 0 0 8px; overflow-wrap: anywhere; }
.source-group-map__facts ul { display: grid; gap: 5px; margin: 0; padding-left: 20px; }
.source-group-teaching .source-group-map { background: var(--k-sheet); }
.source-group-audio audio, .source-group-teaching audio { display: block; width: 100%; min-height: 44px; margin-top: 12px; }
[data-course-source-groups][aria-busy='true'] audio { pointer-events: none; opacity: .55; }
.source-group-audio__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.source-group-play-count { color: var(--k-muted); font-size: 13px; }
.source-group-audio-button { min-width: 190px; }
.source-group-teaching-rows, .source-group-form-rows { display: grid; grid-template-columns: minmax(110px, .45fr) minmax(0, 1fr); margin: 14px 0 0; border-top: 1px solid var(--k-rule); }
.source-group-teaching-rows dt,
.source-group-teaching-rows dd,
.source-group-form-rows dt,
.source-group-form-rows dd { margin: 0; padding: 10px 8px; border-bottom: 1px solid var(--k-rule); }
.source-group-teaching-rows dt, .source-group-form-rows dt { color: var(--k-muted); font-size: 14px; }
.source-group-teaching-rows dd { display: grid; gap: 3px; }
.source-group-teaching-rows dd > span { font-size: 13px; }
.source-group-question-form { display: grid; gap: 18px; }
.source-group-question-form__title { margin: 0; }
.source-group-question-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
.source-group-question-section { min-width: 0; padding: 16px; border: 1px solid var(--k-rule); background: var(--k-paper); }
.source-group-question-section__title { margin: 0 0 16px; color: var(--k-ink); font-size: 17px; }
.source-group-question-section .source-group-field:last-child { padding-bottom: 0; border-bottom: 0; }
.source-group-field { min-width: 0; margin: 0; padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--k-rule); }
.source-group-field legend { display: flex; align-items: flex-start; gap: 10px; width: 100%; margin-bottom: 12px; color: var(--k-ink); font-size: 17px; font-weight: 650; }
.source-group-field legend::before { content: attr(data-question-number); display: inline-grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; color: var(--k-on-action); background: var(--k-action); font-size: 13px; }
.source-group-options { display: grid; gap: 8px; }
.source-group-option { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 50px; padding: 10px 12px; border: 1px solid var(--k-control); cursor: pointer; }
.source-group-option:hover { border-color: var(--k-action); background: var(--k-tint); }
.source-group-option:has(input:checked) { border-color: var(--k-action); background: var(--k-tint); }
.source-group-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--k-action); }
.source-group-field > input, .source-group-field > textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--k-control); border-radius: var(--k-radius); color: var(--k-ink); background: var(--k-sheet); font: 18px/1.5 var(--k-font-sans); }
.source-group-field > textarea { min-height: 116px; resize: vertical; }
.source-group-text-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.source-group-field--error { padding: 14px; border: 1px solid var(--k-bad); background: var(--k-bad-bg); }
.source-group-field .field-error { margin: 8px 0 0; color: var(--k-bad); font-size: 14px; }
.source-group-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.source-group-gate-note, .source-group-draft-note, .source-group-status { margin: 0; color: var(--k-muted); font-size: 13px; }
.source-group-status { min-height: 24px; padding: 8px 0 0; font-size: 14px; }
.source-group-status[data-tone='error'] { color: var(--k-bad); }
.source-group-status[data-tone='success'] { color: var(--k-good); }
.source-group-outcome, .source-group-models, .source-group-rehearsal { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--k-rule); }
.source-group-outcome__score { color: var(--k-muted); }
.source-group-outcome__evidence { margin-top: -4px; color: var(--k-muted); font-size: 13px; }
.source-group-result-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.source-group-result { display: grid; grid-template-columns: minmax(115px, .4fr) minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-left: 3px solid var(--k-hint); background: var(--k-hint-bg); }
.source-group-result__feedback { grid-column: 1 / -1; }
.source-group-result--correct { border-color: var(--k-good); background: var(--k-good-bg); }
.source-group-result--incorrect, .source-group-result--wrong { border-color: var(--k-bad); background: var(--k-bad-bg); }
.source-group-result span { overflow-wrap: anywhere; }
.source-group-models { display: grid; gap: 10px; }
.source-group-model { padding: 12px; border-left: 3px solid var(--k-tab); background: var(--k-note); }
.source-group-model p { margin: 0; }
.source-group-model p + p { margin-top: 5px; }
.source-group-model__answer { font: 400 18px/1.5 var(--k-font-serif); }
.source-group-rehearsal { padding: 22px 16px 16px; border: 1px solid var(--k-rule); border-left: 3px solid var(--k-tab); background: var(--k-note); }
.source-group-rehearsal > h4 { margin-bottom: 10px; }
.source-group-rehearsal__part { padding: 16px; border: 1px solid var(--k-rule); background: var(--k-sheet); }
.source-group-rehearsal__part + .source-group-rehearsal__part { margin-top: 16px; }
.source-group-rehearsal__part > label { display: block; margin-bottom: 8px; color: var(--k-ink); font-size: 17px; font-weight: 700; }
.source-group-rehearsal__checklist { display: grid; gap: 8px; padding-left: 22px; }
.source-group-rehearsal__model { border-top: 1px solid var(--k-rule); }
.source-group-rehearsal__model summary { display: flex; align-items: center; min-height: 48px; color: var(--k-action); font-weight: 700; cursor: pointer; }
.source-group-rehearsal__model summary:focus-visible { outline: 2px solid var(--k-action); outline-offset: 2px; }
.source-group-rehearsal__model p { margin: 0 0 12px; font: 400 18px/1.5 var(--k-font-serif); white-space: pre-line; }
.source-group-open-card { padding: 32px 26px; }
.source-group-open-card > p:not(.source-group-eyebrow) { max-width: 64ch; }
.source-group-retry-notice { margin: 20px 24px; padding: 18px; border: 1px solid var(--k-bad); background: var(--k-bad-bg); }
.source-group-retry-notice p { margin-top: 0; }
.source-group-completion-note { padding: 14px 16px; border-left: 3px solid var(--k-tab); background: var(--k-note); text-align: left; }
@media (max-width: 980px) {
  .source-group-spread { grid-template-columns: minmax(0, 1fr); }
  .source-group-panel--source { border-right: 0; border-bottom: 1px solid var(--k-rule); }
}
@media (max-width: 780px) {
  .course-source-groups__toolbar { align-items: flex-start; flex-direction: column; padding: 20px 18px; }
  .source-group-tabs { grid-template-columns: minmax(0, 1fr); }
  .source-group-tab { border-right: 0; border-bottom: 1px solid var(--k-rule); }
  .source-group-tab:last-child { border-bottom: 0; }
  .source-group-shell__header, .source-group-panel, .source-group-open-card { padding: 20px 18px; }
  .source-group-actions { flex-direction: column-reverse; }
  .source-group-actions .button,
    .source-group-audio-button,
    .source-group-open-card .button,
    .source-group-retry-notice .button { width: 100%; }
  .source-group-teaching-rows, .source-group-form-rows { grid-template-columns: minmax(0, 1fr); }
  .source-group-teaching-rows dt, .source-group-form-rows dt { padding-bottom: 0; border-bottom: 0; }
  .source-group-question-sections { grid-template-columns: minmax(0, 1fr); }
  .source-group-result { grid-template-columns: minmax(0, 1fr); }
  .source-group-map { padding: 14px 12px; }
}
/* Closed tester phase: course notice, task reports, mobile header targets. */
.course-notice { margin: 18px 0; padding: 14px 16px; border-left: 4px solid var(--k-tab); background: var(--k-note); color: var(--k-ink); }
.course-notice strong { display: block; font-size: 15px; }
.course-notice p { margin: 4px 0 0; color: var(--k-muted); font-size: 14px; line-height: 1.5; }
.course-notice--card { margin: 0 0 18px; }
.task-report { margin: 18px 0 0; border: 1px solid var(--k-rule); background: var(--k-sheet); color: var(--k-ink); }
.task-report > summary { display: flex; align-items: center; min-height: 44px; padding: 0 16px; cursor: pointer; color: var(--k-muted); font-size: 15px; }
.task-report > summary:focus-visible { outline: 3px solid var(--k-action); outline-offset: 2px; }
.task-report[open] > summary { color: var(--k-action); border-bottom: 1px solid var(--k-rule); }
.task-report__form { display: grid; gap: 14px; padding: 16px; }
.task-report__form > label, .task-report__form fieldset { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; font-size: 15px; }
.task-report__form legend { margin-bottom: 6px; padding: 0; }
.task-report__form small { color: var(--k-muted); }
.task-report__form textarea { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--k-control); border-radius: var(--k-radius); color: var(--k-ink); background: var(--k-paper); font: inherit; }
.task-report__targets { display: flex; flex-wrap: wrap; gap: 6px; }
.task-report__targets label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--k-control); cursor: pointer; }
.task-report__targets label:has(input:checked) { border-color: var(--k-action); background: var(--k-tint); }
.task-report__targets input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--k-action); }
.task-report__reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; }
.task-report__reasons label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--k-control); cursor: pointer; }
.task-report__reasons input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--k-action); }
.task-report__reasons label:has(input:checked) { border-color: var(--k-action); background: var(--k-tint); }
.task-report__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.task-report__actions p { margin: 0; color: var(--k-muted); font-size: 14px; }
.task-report-admin > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.task-report-list { display: grid; gap: 10px; margin-top: 16px; }
.task-report-list article { padding: 12px 14px; border: 1px solid var(--k-rule); background: var(--k-paper); color: var(--k-ink); overflow-wrap: anywhere; }
.task-report-list header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.task-report-list header span, .task-report-list small { color: var(--k-muted); font-size: 13px; }
.task-report-list p { margin: 6px 0 0; }
.task-report-list__prompt { color: var(--k-muted); }
.task-report-list blockquote { margin: 8px 0; padding-left: 10px; border-left: 3px solid var(--k-tab); }
.app-shell .mobile-header .avatar, .app-shell .mobile-header .theme-toggle--icon { width: 44px; height: 44px; min-height: 44px; }
/* Impressum and privacy notice links: login card, desktop sidebar and profile. */
.legal-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 14px; font-size: 15px; }
.legal-links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--k-muted); text-underline-offset: 3px; }
.legal-links a:hover { color: var(--k-action); }
.app-shell .sidebar-footer .legal-links { margin-top: 6px; gap: 0 16px; font-size: 14px; }
.app-shell .sidebar-footer .legal-links a { min-height: 32px; }
.privacy-note a { color: var(--k-action); }
/* W1 accessibility support. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 200; padding: 12px 16px; color: var(--k-on-action); background: var(--k-action); font-weight: 650; text-decoration: none; }
.skip-link:focus { top: 12px; outline: 3px solid var(--k-tab); outline-offset: 2px; }
.workspace:focus { outline: none; }
/* Programmatic focus (headings, feedback, answer areas) shows a ring only when
   the learner navigates by keyboard, and never a tight box. */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
:is(h1, h2, h3, [data-exercise-feedback], [data-practice-feedback])[tabindex="-1"]:focus-visible { outline: 3px solid var(--k-action); outline-offset: 6px; }
.login-story__headline { margin: 0 0 24px; font: 400 clamp(36px, 4.5vw, 62px)/1.1 var(--k-font-serif); letter-spacing: -.025em; }
.course-module .module-label { margin: 0; font: inherit; letter-spacing: 0; }
/* A chosen wrong option shows a cross and a correct one a check, not colour alone. */
:root :is(.lesson-page, .practice-page) .answer-option.is-correct i { border-color: var(--k-good); color: var(--k-sheet); background: var(--k-good); }
:root :is(.lesson-page, .practice-page) .answer-option.is-wrong i { border-color: var(--k-bad); color: var(--k-sheet); background: var(--k-bad); }
.order-answer:focus-visible { outline: 3px solid var(--k-action); outline-offset: 3px; }
/* W2 navigation and robustness support. */
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px 12px 16px; }
.toast p { margin: 0; flex: 1; line-height: 1.45; }
.toast__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -6px -10px 0; padding: 0; border: 0; border-radius: var(--k-radius); color: inherit; background: transparent; }
.toast__close:hover { box-shadow: inset 0 0 0 1px currentColor; }
.toast__close svg { width: 16px; height: 16px; }
.jump-link { display: none; }
.answer-option.is-pending, [data-order-check].is-pending, .typed-answer .button.is-pending { position: relative; border-color: var(--k-action); box-shadow: inset 0 0 0 1px var(--k-action); }
.answer-option.is-pending i { border-color: var(--k-action); border-top-color: transparent; animation: spin .8s linear infinite; }
.exercise-error { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--k-bad); color: var(--k-bad); background: var(--k-bad-bg); font-size: 15px; }
.page-loading { min-height: 50vh; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--k-muted); }
@media (max-width: 780px) {
  .toast-region { left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
  .jump-link { display: inline-flex; min-height: 44px; color: var(--k-action); font-weight: 600; }
  .practice-page-intro .jump-link { margin: 0 0 8px; }
  .workbook-practice .jump-link { margin: -6px 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; transform: none; }
  .answer-option.is-pending i { animation: none; }
}

/* Lesson completion and learning feedback share the practice sheet (F11). */
.app-shell .practice-page :is(.can-do-result, .mastered-phrase, .next-step-card, .transfer-evidence) { border-radius: 0; }
.app-shell .practice-page .can-do-result strong, .app-shell .practice-page .next-step-card strong { font-size: 16px; }
.app-shell .practice-page :is(.mastered-phrase span, .next-step-card small, .can-do-result span) { font-size: 14px; }
.app-shell .practice-page .mastered-phrase strong { font: 400 22px/1.5 var(--k-font-serif); }
.app-shell .practice-page :is(.rating-row span, .difficulty-row span) { border-radius: var(--k-radius); font-size: 15px; }
.app-shell .practice-page :is(.learning-feedback legend, .feedback-comment > span) { font-size: 15px; }
.app-shell .practice-page :is(.learning-feedback header > p:last-child, .learning-feedback fieldset small, .feedback-thanks p) { font-size: 14px; }

/* W4 learner polish. */
.muted { color: var(--k-muted); }
.empty-state { margin: 0; padding: 24px; color: var(--k-muted); }
.umlaut-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.umlaut-row button { min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--k-control); border-radius: var(--k-radius); color: var(--k-ink); background: var(--k-sheet); font: 600 18px/1 var(--k-font-sans); }
.umlaut-row button:hover { border-color: var(--k-action); background: var(--k-tint); }
.typed-answer .umlaut-row { grid-column: 1 / -1; margin: 0; }
.blank-gap { display: inline-block; width: 4.5em; height: 1em; margin: 0 .15em; vertical-align: -.15em; border-bottom: 2px solid var(--k-ink); }
.answer-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-top: 6px; }
.answer-compare > div { min-width: 0; }
.answer-compare span { display: block; color: var(--k-muted); font-size: 13px; font-weight: 600; }
.exercise-feedback__more { border-top: 1px solid var(--k-rule); }
.exercise-feedback__more > summary { min-height: 44px; display: flex; align-items: center; padding: 0 15px; color: var(--k-action); font-weight: 650; cursor: pointer; }
.exercise-feedback__more > section { padding: 0 15px 14px; }
.exercise-feedback__more > section > p:last-child { margin: 5px 0 0; font-size: 16px; line-height: 1.55; }
.app-shell .sidebar-user > .logout-button { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--k-rule); border-radius: var(--k-radius); color: var(--k-ink); background: transparent; font-size: 15px; }
.app-shell .sidebar-user > .logout-button:hover { background: var(--k-tint); }
.logout-button svg, .theme-toggle--icon svg { width: 18px; height: 18px; }
@media (max-width: 540px) { .answer-compare { grid-template-columns: minmax(0, 1fr); } }

/* W5: correct-answer sound switch in Profile, next to the colour theme. */
.appearance-card h3 { margin: 24px 0 6px; font-size: 18px; }
.appearance-card > p { margin: 0; }
.sound-toggle { margin-top: 14px; justify-content: flex-start; gap: 10px; }
.sound-toggle i { margin-left: auto; font-style: normal; font-size: 14px; color: var(--k-muted); }
.sound-toggle.is-on { color: var(--k-action); border-color: var(--k-action); background: var(--k-tint); }
/* F25: the placement result reads as one centred column. */
.placement-result > h1 { text-align: center; }
/* U6: numbers are set in the sans with equal-width figures. Georgia's old-style
   figures made a large «0» read as the letter «o». */
:is(.practice-totals dd, .pool-ring span, .level-result strong, .lesson-progress strong, .scenario-total strong, .result-stats strong, .recap-score strong, .progress-overview strong, .streak-summary strong, .practice-page-score strong, .today-fact strong, .module-count, .placement-top strong, .skill-results strong, .admin-stats strong, .section-counter, .lesson-page-tab, .exercise-navigation button) { font-variant-numeric: tabular-nums; }
.app-shell .lesson-page .complete-strip h2 { font-family: var(--k-font-sans); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Guided retry: an open retry names the learner's own answers, an auto-opened
   hint and the tries left; the key waits for the final result. */
.exercise-retry { margin: 0 0 14px; padding: 12px 14px; display: grid; gap: 4px; border: 1px solid var(--k-hint); border-radius: var(--k-radius); color: var(--k-ink); background: var(--k-hint-bg); }
.exercise-retry strong { color: var(--k-hint); }
.exercise-retry span { font-size: var(--k-text-sm); }
.retry-previous { margin: 0 0 12px; padding: 10px 14px; display: grid; gap: 4px; border: 1px solid var(--k-rule); border-radius: var(--k-radius); background: var(--k-paper); }
.retry-previous > span { color: var(--k-muted); font-size: var(--k-text-xs); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.retry-previous ol { margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.retry-previous li { overflow-wrap: anywhere; white-space: pre-line; }
.exercise-retry__actions { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.exercise-actions { flex-wrap: wrap; }
.retry-return { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.retry-return p { margin: 0; color: var(--k-hint); font-size: var(--k-text-sm); font-weight: 600; }
.retry-summary { margin: -12px 0 24px; color: var(--k-muted); font-size: var(--k-text-sm); font-variant-numeric: tabular-nums; }
/* The daily plan and entry check share the workbook's paper and ink tokens. */
.today-plan { padding: 28px; border: 1px solid var(--k-rule); border-top: 4px solid var(--k-action); background: var(--k-sheet); }
.today-plan > header, .plan-steps > li, .lesson-plan-return { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.today-plan h2 { margin: 6px 0 10px; }
.today-plan p, .lesson-plan-return p { margin: 6px 0; line-height: 1.6; }
.plan-duration { flex-shrink: 0; color: var(--k-muted); }
.plan-steps { list-style: none; margin: 24px 0; padding: 0; }
.plan-steps > li { padding: 20px 0; border-top: 1px solid var(--k-rule); }
.plan-steps > li > div { flex: 1; min-width: 0; }
.plan-steps small, .today-plan footer p, .placement-v2 small { color: var(--k-muted); }
.plan-step-number { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border: 1px solid var(--k-rule); border-radius: 50%; }
.plan-step-number svg { width: 18px; height: 18px; }
.plan-steps .is-next .plan-step-number { background: var(--k-action); color: var(--k-on-action); border-color: var(--k-action); }
.plan-steps .is-done .plan-step-number { background: var(--k-good-bg); color: var(--k-good); }
.today-plan footer { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; border-top: 1px solid var(--k-rule); padding-top: 16px; }
.today-plan footer p { flex-basis: 100%; }
.lesson-plan-return { border: 1px solid var(--k-rule); background: var(--k-note); padding: 20px; margin: 16px 0; }
.lesson-plan-return .button { flex-shrink: 0; }
.lesson-plan-return[hidden] { display: none; }
.placement-v2 { text-align: left; }
.placement-v2 > p, .placement-v2 li, .placement-v2 .subtle { line-height: 1.65; }
.placement-v2 h1 { overflow-wrap: anywhere; }
.placement-v2 textarea { display: block; width: 100%; margin-top: 10px; padding: 14px; font: inherit; line-height: 1.6; color: var(--k-ink); background: var(--k-sheet); border: 1px solid var(--k-control); resize: vertical; }
.placement-v2 .skill-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.placement-v2 .skill-results > div { display: flex; flex-direction: column; gap: 8px; }
.placement-audio { margin: 24px 0; display: grid; gap: 10px; }
.placement-audio audio { width: 100%; }
.placement-note, .placement-recommendations, .placement-writing { border-top: 1px solid var(--k-rule); margin-top: 24px; padding-top: 20px; }
.placement-recommendations ul, .placement-note ul { padding-left: 22px; }
.placement-recommendations li + li { margin-top: 16px; }
.placement-writing article { padding: 18px 0; border-top: 1px solid var(--k-rule); }
.placement-writing blockquote { margin: 12px 0; border-left: 3px solid var(--k-rule); padding-left: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.placement-route-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.placement-pause { border-top: 1px solid var(--k-rule); margin-top: 24px; padding-top: 20px; }
.placement-error { border: 1px solid var(--k-bad); color: var(--k-bad); background: var(--k-bad-bg); margin-top: 20px; padding: 16px; }
@media (max-width: 620px) {
  .today-plan { padding: 20px 16px; }
  .today-plan > header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .plan-steps > li { gap: 12px; flex-wrap: wrap; align-items: flex-start; }
  .plan-steps > li .button { margin-left: 46px; width: calc(100% - 46px); }
  .lesson-plan-return { align-items: flex-start; flex-direction: column; }
  .placement-route-actions { flex-direction: column; }
  .placement-v2 .skill-results { grid-template-columns: 1fr; }
  .placement-v2 .placement-top > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .placement-v2 .form-actions { flex-wrap: wrap; gap: 12px; }
  .placement-v2 .form-actions .button { flex: 1; }
}

/* Pilot track (docs/ai/briefs/b1-tester-track.md): a separate section after the A1–A2 course. */
.course-level-tabs--with-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.course-track { margin-top: 40px; }
.course-track-heading { display: grid; gap: 6px; padding: 22px 26px; margin-bottom: 18px; background: var(--k-note); border-left: 3px solid var(--k-action); }
.course-track-heading h2 { margin: 0; font: 400 27px/1.25 var(--k-font-serif); }
.course-track-heading p { margin: 0; max-width: 62ch; }
.course-track-heading > span { color: var(--k-muted); font-size: 14px; }
.course-level-tabs + .course-track { margin-top: 22px; }
.track-notice { margin: 14px 0 0; max-width: 62ch; font-size: 15px; padding: 12px 14px; background: var(--k-note); border-left: 3px solid var(--k-action); }
.placement-track-offer { border-top: 1px solid var(--k-rule); margin-top: 24px; padding-top: 20px; }
@media (max-width: 620px) {
  .course-level-tabs--with-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-track-heading { padding: 18px 16px; }
  .course-track-heading h2 { font-size: 24px; }
  .placement-track-offer .button { width: 100%; }
}