:root {
  --ink: #17212b;
  --muted: #5f6b76;
  --line: #d8dee4;
  --paper: #ffffff;
  --surface: #f5f7f9;
  --teal: #0f766e;
  --teal-dark: #115e59;
  --wine: #8b1e3f;
  --amber: #7a4a08;
  --amber-fill: var(--soft-amber);
  --amber-mid-fill: #eadfbd;
  --gray-dark-fill: #65717b;
  --gray-pale-fill: #c3cbd1;
  --amber-line: #e5c77d;
  --blue: #2563eb;
  --good: #166534;
  --bad: #b91c1c;
  --soft-teal: #e8f5f3;
  --soft-wine: #f9e9ee;
  --soft-amber: #fff5df;
  --shadow: 0 14px 30px rgba(23, 33, 43, 0.08);

  /* Semantic control palette. Components consume these roles instead of
     choosing colors locally, which keeps a later component migration simple.
     neutral  = ordinary action; primary = commit/evaluate; selected = open or
     chosen; smart = externally generated/intelligent; disabled = unavailable. */
  --bar-bg: #fbfcfd;
  --bar-line: var(--line);
  --bar-pad-x: max(24px, calc((100% - 1360px) / 2));
  --bar-min-h: 54px;
  --control-h: 36px;
  /* Shape language: every interactive control (button, select, toggle,
     Erklärbär trigger, icon-only button) is a `--control-radius` box.
     Only non-interactive status/count/label chips and switch tracks are pills. */
  --control-radius: 7px;
  /* Two type sizes across all three bars: "text" for anything interactive
     (buttons, select, toggle labels, triggers), "meta" for pills, the
     version switch label, the progress label and status/notifications. */
  --bar-text: 13px;
  --bar-meta: 11px;
  --smart-ink: #1d4ed8;
  --smart-line: #b7ccf3;
  --smart-bg: #eef3fe;
  --disabled-ink: #9aa4ad;
  --disabled-bg: #f2f4f6;
  --disabled-line: #e3e7ea;
  --action-neutral-ink: var(--ink);
  --action-neutral-bg: #ffffff;
  --action-neutral-line: var(--line);
  --action-primary-ink: #ffffff;
  --action-primary-bg: var(--teal);
  --action-primary-hover: var(--teal-dark);
  --action-selected-ink: var(--amber);
  --action-selected-bg: var(--soft-amber);
  --action-selected-line: var(--amber-line);
  --action-smart-ink: var(--smart-ink);
  --action-smart-bg: #ffffff;
  --action-smart-hover: var(--smart-bg);
  --action-smart-line: var(--smart-line);
  --toggle-off-bg: #d8dee3;
  --toggle-off-line: #bdc7cf;
  --toggle-on-bg: var(--teal);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* Reserve the vertical scrollbar's width permanently, whether or not the
   current tab's content is tall enough to need one. Without this, the whole
   header (and its right-docked nav icons) jumps ~15px sideways every time a
   shorter/taller tab toggles the scrollbar on/off. */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
}

/* Prevent a partially assembled exercise view from flashing between script loads. */
html.app-booting .learning-context,
html.app-booting .workspace {
  visibility: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  color: var(--disabled-ink);
  background: var(--disabled-bg);
  border-color: var(--disabled-line);
  box-shadow: none;
  opacity: 1;
}

/*
 * DARK APP HEADER
 * --------------------------------------------------------------------------
 * Three responsive identity levels, never a two-line bar:
 *   >1280px  : current page title and short description
 *   <=1280px : current page title
 *   <=1050px : highlighted current-page icon and hamburger navigation
 * The header is NOT sticky (the compact lesson bar under it is instead);
 * z-index 20 keeps its dropdown/tooltips above that bar (z-index 6).
 */
.app-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand identity tabs";
  gap: 16px;
  align-items: center;
  padding: 10px 32px;
  color: #ffffff;
  background: #17212b;
  border-bottom: 3px solid var(--teal);
}

.brand-block {
  grid-area: brand;
  min-width: 0;
}

.page-identity {
  grid-area: identity;
  position: relative;
  z-index: 22;
  min-width: 0;
  max-width: 560px;
  justify-self: center;
  color: #ffffff;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.page-identity-copy {
  display: block;
  min-width: 0;
  text-align: center;
}
.page-identity strong,
.page-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-identity strong { font-size: 14px; font-weight: 760; }
.page-identity small { margin-top: 2px; color: #cdd6dd; font-size: 10px; }
body.bear-obscures-header .page-identity { opacity: 0; }

/* ======================================================================
 * Erklärbär mascot — three separate layers:
 *   .bear-scene   the JS-positioned box (dark-bar gap when roomy, else fixed
 *                 at the viewport bottom). Does NOT clip — words hang off it.
 *   .bear-stage   clip window inside the scene.
 *   .bear-mascot  SVG: head + toga + torso  (no paws, no words).
 *   .bear-paws    SVG: the two paws  (own layer → own clipping at the edge).
 *   .bear-word    real text, one each side.
 * ONE pose only: the bear always half-peeks over the line — the dark bar at
 * the top, or the viewport bottom once the bar scrolls away. It never rises
 * further. The two motto words flank it for 5s (body.bear-show-words, set by
 * JS) whenever it peeks at the dark bar; no words at the page bottom / edges.
 * ==================================================================== */
.bear-scene {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 96px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 21;                 /* above the header, below its dropdown menu */
}
.bear-stage { position: absolute; inset: 0; overflow: hidden; }

.bear-mascot,
.bear-paws { position: absolute; left: 0; right: 0; }
.bear-mascot {
  top: 0;
  height: 76px;
  transform: translateY(120%);         /* hidden below the bar */
  transition: transform 640ms cubic-bezier(0.33, 1, 0.68, 1);  /* smooth settle, no bounce */
}
.bear-paws {
  bottom: 0;
  height: 24px;
  transform: translateY(150%);         /* hidden below the bar */
  transition: transform 560ms cubic-bezier(0.33, 1, 0.68, 1), opacity 260ms ease;
}
.bear-mascot svg,
.bear-paws svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* ^ overflow:visible so the ear outlines (which sit right at the viewBox top
   edge) aren't shaved by the SVG's own box — .bear-stage still does the clip. */
.bear-mascot .acc-toga { display: block; }

.bear-word {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font: 800 13px/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.5px;
  color: #ffffff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 220ms ease;
}
.bear-word-l { right: 100%; margin-right: 9px; }
.bear-word-r { left: 100%; margin-left: 9px; }

/* --- the only pose: head + paws each show ~their top half over the edge -- */
body.bear-active .bear-mascot { transform: translateY(50%); }
body.bear-active .bear-paws  { transform: translateY(48%); opacity: 1; }

/* the bottom docks cut lower than the dark bar — lift the bear ~12px there so
   the eyes clear the edge (`:not(.bear-dock-hidden)` keeps the sink-out intact) */
body.bear-active.bear-dock-bottom .bear-mascot:not(.bear-dock-hidden),
body.bear-mode-edge.bear-peek-bottom.bear-active .bear-mascot { transform: translateY(35%); }
body.bear-active.bear-dock-bottom .bear-paws,
body.bear-mode-edge.bear-peek-bottom.bear-active .bear-paws { transform: translateY(34%); }

/* --- motto words: 5s flash while the bear peeks at the dark bar ---------- */
body.bear-mode-full.bear-active:not(.bear-dock-bottom).bear-show-words .bear-word {
  opacity: 1;
}

/* transient "sink out" while swapping between the bar and the page bottom */
body.bear-active .bear-mascot.bear-dock-hidden { transform: translateY(130%); }
body.bear-active .bear-mascot.bear-dock-hidden ~ .bear-paws { transform: translateY(160%); opacity: 0; }

/* --- page-bottom dock: the SAME peek pose, scene fixed at the viewport bottom */
body.bear-mode-full.bear-active.bear-dock-bottom .bear-scene {
  position: fixed;
  left: 50%; right: auto; top: auto; bottom: 0;
  width: 96px; height: 60px;
  transform: translateX(-50%);
}
body.bear-dock-bottom .bear-word { display: none; }

/* --- small view: scene fixed at the screen bottom (bottom only, never a side) */
body.bear-mode-edge .bear-word { display: none; }

body.bear-mode-edge.bear-peek-bottom .bear-scene {
  position: fixed;
  left: 50%; right: auto; top: auto; bottom: 0;
  width: 104px; height: 62px;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .page-identity,
  .bear-mascot,
  .bear-paws,
  .bear-word { transition: none; }
}

.brand-block h1,
.panel-heading h2 {
  margin: 0;
  letter-spacing: 0;
}

.brand-block h1 {
  font-size: 22px;
  font-weight: 760;
}

.brand-home-button {
  display: block;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
}
.brand-home-button:hover { color: #ffffff; }
.brand-home-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 6px;
  border-radius: 4px;
}

/* The wordmark and its eyebrow never wrap — the header stays one line and the
   768px breakpoint guarantees there is room for the full text. */
.brand-block h1,
.brand-block .eyebrow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eyebrow {
  margin: 0 0 3px;
  color: inherit;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 0.72;
}

/*
 * Icon nav sizing follows an 8-point grid with 44px hit targets:
 *  - 44x44 button  = Apple HIG minimum tappable size / WCAG 2.5.5 (AAA)
 *  - 8px gap       = Material 8dp spacing grid; keeps adjacent icons from
 *                    reading as one segmented control (WCAG 2.5.8 clearance)
 *  - 18px glyph inside a 44px container ≈ Material icon-button ratio
 */
.tabbar {
  grid-area: tabs;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Landing page: the cards ARE the navigation and the wordmark returns here,
   so the duplicate header nav is dropped. */
body[data-active-tab="home"] .tabbar { display: none; }

.tab-list {
  display: flex;
  gap: 8px;
}

.tab-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #cdd6dd;
  background: transparent;
  border: 0;
  border-radius: 10px;
  transition: background-color 0.13s ease, color 0.13s ease;
}

.tab-button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.tab-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

.tab-button.is-active {
  color: #ffd98a;
  background: rgba(229, 199, 125, 0.16);
  box-shadow: inset 0 0 0 1px rgba(229, 199, 125, 0.34);
}

@media (max-width: 1280px) {
  .page-identity small { display: none; }
}

@media (max-width: 1050px) {
  .page-identity { display: none; }
  .page-identity-text-icon { font-size: 14px; font-weight: 760; }
}

.tab-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab-text-icon {
  display: inline-flex;
  width: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  color: currentColor;
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
}

.tab-instructor-icon { width: 20px; height: 20px; flex-basis: 20px; }
.tab-icon .tab-icon-dot { fill: currentColor; stroke: none; }

/* Icon-only tab bar: the label is exposed via aria-label + data-help/title, not inline text */
.tab-button > span:not(.tab-text-icon) {
  display: none;
}

/* Settings is just another icon button in the row (no divider, equal 8px gap). */
.header-settings-button {
  flex: 0 0 auto;
}

/* Hamburger: shown only in the collapsed state (see @media max-width: 1050px). */
.nav-menu-toggle {
  display: none;
}

/*
 * COLLAPSED NAV (<= 1050px)
 * The wordmark + 8-icon row (~408px) + padding no longer fit on one line, so
 * the row folds behind the hamburger. The menu opens as an absolutely
 * positioned dropdown (it never adds to the header's height) and brings the
 * text labels back because a vertical list has room and text aids recognition.
 */
@media (max-width: 1050px) {
  .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand tabs";
    padding: 10px 16px;
  }

  .tabbar {
    position: relative;
  }

  .nav-menu-toggle {
    display: inline-flex;
    position: relative;
    width: 44px;
    height: 44px;
    gap: 0;
    padding: 0;
    overflow: visible;
  }
  /* One menu action; the non-interactive corner badge identifies the active page. */
  .tab-button > .nav-current-page-icon:not([hidden]) {
    display: inline-flex;
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--amber-line);
    border-radius: 50%;
    color: #ffd98a;
    background: var(--ink);
    pointer-events: none;
  }
  .nav-current-page-icon .ui-icon { width: 12px; height: 12px; }
  .nav-current-page-icon .page-identity-text-icon { font-size: 10px; line-height: 1; }
  .nav-menu-toggle > .tab-icon { flex: none; width: 26px; height: 26px; padding: 0; color: #fff; stroke: #fff; }
  .nav-menu-toggle > .tab-icon path { stroke: #fff; }

  .tab-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 236px;
    max-width: min(88vw, 320px);
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 6px;
    background: #1c2731;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  }

  .tabbar:not(.nav-open) .tab-list {
    display: none;
  }

  .tab-list .tab-button {
    width: 100%;
    height: auto;
    min-height: 44px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
    border-radius: 8px;
  }

  .tab-list .tab-button > span:not(.tab-text-icon) {
    display: inline;
    font-size: 14px;
    font-weight: 620;
  }
}

/* ======================================================================
 * CONTROL STRIP
 * ----------------------------------------------------------------------
 * One sticky row in #learningContext: a wrapping "main" region (lesson
 * <select>, version switch, exercise position/counter, status) + a fixed
 * action region on the right (Erklärbär button, ✎ Aktionen, ⚙ Optionen).
 * Panels: inline expanding bar >1100px, overlay dropdown below (end of
 * workspace-layout.css). .action-strip is an empty leftover container.
 * ==================================================================== */
.action-strip { display: none; }

.learning-context {
  box-sizing: border-box;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--bar-line);
}

/* Keep the strip blank (but space reserved) until workspace-layout.js has
   assembled it, so nothing visibly reshuffles after the first paint. */
.learning-context:not(.is-ready) { visibility: hidden; }
.learning-context:not(.is-ready)::after { content: ""; display: block; min-height: 46px; }

.bar-strip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 46px;
  padding: 7px var(--bar-pad-x);
}

/* left region — everything status-like, wraps as one block */
.bar-strip-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;   /* row 1 pinned to the top, level with .bar-actions */
  gap: 6px 10px;
  min-height: 40px;
}
.bar-strip-main > .learning-context-inner { display: contents; }

.bar-strip-main .field-label { min-height: 0; }
.bar-strip-main .field-label > span { display: none; }
.bar-strip-main .variant-controls,
.bar-strip-main #vocabRoundStatus { flex: 0 0 auto; }
.bar-strip-main .exercise-progress { flex: 0 0 auto; min-width: 0; margin: 0; padding: 0; border: 0; }
.bar-strip-main .workflow-status {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  max-width: 100%;
  justify-content: flex-start;
  overflow: hidden;
}

/* right region — never joins the wrap; aligns to strip row 1 */
.bar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
}

/* Erklärbär trigger — styled exactly like every other Aktionen button
   (it carries the `.action-button` class); only the glyph is its own. */
.explain-bear-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.explain-bear-trigger .bear-glyph {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.bar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--muted);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  font-size: 15px;
  line-height: 1;
  transition: color 130ms ease, background-color 130ms ease, border-color 130ms ease;
}
.bar-icon-btn .ui-icon { width: 20px; height: 20px; }
.bar-icon-btn:hover { color: var(--ink); border-color: #aab5c0; }
.bar-icon-btn:focus-visible { outline: 2px solid var(--amber-line); outline-offset: 2px; }
.bar-icon-btn[aria-expanded="true"] {
  color: var(--action-selected-ink);
  background: var(--action-selected-bg);
  border-color: var(--action-selected-line);
}

.ui-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.button-icon .ui-icon,
.button-icon.ui-icon {
  width: 18px;
  height: 18px;
}

/* Panel wrapper — grid-template-rows 0fr -> 1fr animates the auto height
   with no magic numbers; .bar-panel-inner clips during the transition. Below
   1100px (workspace-layout.css) this becomes an absolutely positioned
   dropdown instead, with its own opacity/transform animation -- the grid
   trick doesn't hold up once width is also content-driven (width:max-content),
   so it's neutralized there (grid-template-rows: none) rather than reused. */
.bar-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 220ms ease, opacity 150ms ease;
}
.bar-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.bar-panel-inner {
  min-height: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .bar-panel { transition: none; }
}

/* Panel content = one horizontal bar (the expanded look). Overridden to a
   vertical dropdown below 1100px (end of workspace-layout.css). */
.bar-panel-inner > .command-group,
.bar-panel-inner > .workspace-options-panel {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: var(--bar-min-h);
  padding: 8px var(--bar-pad-x);
  border-top: 1px solid var(--bar-line);
  background: var(--bar-bg);
}
.bar-panel-inner > .workspace-options-panel .option-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  width: 100%;
}

.llm-panel {
  padding: 14px 32px;
  background: #f8fbfb;
  border-bottom: 1px solid var(--line);
}

.llm-panel-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 220px) auto auto;
  gap: 10px;
  align-items: end;
}

.field-label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.field-label input,
.field-label select {
  min-height: 40px;
  padding: 0 11px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.llm-panel .source-note {
  margin: 8px 0 0;
}

.token-usage {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.compute-details {
  margin-top: 10px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.compute-details summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 8px 11px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.compute-details summary::-webkit-details-marker {
  display: none;
}

.compute-details summary::after {
  content: "+";
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.compute-details[open] summary::after {
  content: "−";
}

.compute-details summary > span {
  font-weight: 760;
}

.compute-details summary strong {
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.compute-details .token-usage {
  margin: 0;
  padding: 0 10px 10px;
}

/* Per-call activity log: the totals say how much, this says what for and by which model. */
.usage-log {
  grid-column: 1 / -1;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.usage-log > summary {
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 650;
  color: var(--muted);
}

.usage-log-scroll {
  overflow-x: auto;
  padding: 0 12px 12px;
}

.usage-log table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.usage-log th, .usage-log td {
  padding: 6px 10px 6px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.usage-log th {
  color: var(--muted);
  font-weight: 650;
  white-space: nowrap;
}

.usage-log td small { color: var(--muted); }

.usage-log .is-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.usage-log tr.is-failed td { color: var(--muted); }

.usage-log tbody tr:last-child td { border-bottom: 0; }

.token-chip {
  min-height: 48px;
  padding: 8px 10px;
  color: var(--muted);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.token-chip strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.audio-status.is-working {
  color: var(--amber);
  background: var(--soft-amber);
  border-color: var(--amber-line);
}

.audio-status.is-ready {
  color: var(--teal-dark);
  background: var(--soft-teal);
  border-color: #b8ded9;
}

.audio-status.is-error {
  color: var(--bad);
  background: #fff1f2;
  border-color: #fecdd3;
}

/* Rows inside the bars align their controls on one baseline. */
.workflow-status,
.option-group,
.command-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.workflow-status {
  min-height: var(--control-h);
}

/* Transparent passthrough — its .bar-panel children lay out directly in
   #learningContext, below the strip. */
.workflow-controls {
  display: contents;
}

.workflow-controls[hidden],
.workflow-controls[hidden] > * {
  display: none;
}

.command-group {
  width: 100%;
  justify-content: flex-start;
}

.option-group {
  width: 100%;
  gap: 8px 18px;
}

.option-group .switch {
  min-height: var(--control-h);
  gap: 8px;
  padding: 0;
  font-size: var(--bar-text);
  font-weight: 700;
}

/* Every button in the Aktionen bar: one size, one radius, one weight. */
.command-group .action-button,
.command-group .handwriting-upload-button,
.command-group .workspace-selection-button,
.command-group .primary-button,
.command-group .secondary-button,
.command-group .generation-action,
.command-group > [data-command-tab],
.command-group .option-generation > button {
  min-height: var(--control-h);
  padding: 0 13px;
  border-radius: var(--control-radius);
  font-size: var(--bar-text);
  font-weight: 700;
  white-space: nowrap;
}

.command-group .workspace-selection-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* --- Aktionen bar: three button roles ---------------------------------- */
/* standard action — neutral */
.command-group .action-button,
.command-group .handwriting-upload-button,
.command-group .workspace-selection-button,
.command-group > [data-command-tab].secondary-button {
  color: var(--action-neutral-ink);
  background: var(--action-neutral-bg);
  border: 1px solid var(--action-neutral-line);
}

.command-group .action-button:hover,
.command-group .handwriting-upload-button:hover,
.command-group .workspace-selection-button:hover,
.command-group > [data-command-tab].secondary-button:hover {
  border-color: #aab5c0;
  background: #ffffff;
}

/* primary CTA — the one "auswerten / bestätigen" per context, teal-filled */
.command-group .primary-button {
  color: var(--action-primary-ink);
  background: var(--action-primary-bg);
  border: 1px solid var(--action-primary-bg);
}

.command-group .primary-button:hover {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
}

/* intelligent function — blue accent, never amber */
.command-group .generation-action,
.command-group .is-smart {
  color: var(--action-smart-ink);
  background: var(--action-smart-bg);
  border: 1px solid var(--action-smart-line);
}

.command-group .generation-action:hover,
.command-group .is-smart:hover {
  background: var(--action-smart-hover);
  border-color: var(--action-smart-ink);
}

.command-group .generation-action .button-icon,
.command-group .is-smart .button-icon {
  color: var(--smart-ink);
}

.command-group .demo-fill-status {
  flex: 1 0 100%;
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.command-group .demo-fill-status[hidden] { display: none; }

/* state: selected / panel-open — amber, wins over role */
.command-group .action-button.is-active,
.command-group .workspace-selection-button.is-active {
  color: var(--action-selected-ink);
  background: var(--action-selected-bg);
  border-color: var(--action-selected-line);
}

/* disabled: one treatment, wins over everything */
.command-group button:disabled,
.command-group .handwriting-upload-button.is-disabled {
  color: var(--disabled-ink);
  background: var(--disabled-bg);
  border-color: var(--disabled-line);
  cursor: not-allowed;
  opacity: 1;
}

.command-group button:disabled .button-icon,
.command-group .handwriting-upload-button.is-disabled .button-icon {
  color: inherit;
}

.control-help {
  display: inline-flex;
  align-items: stretch;
}

.control-help[hidden] {
  display: none;
}

.pdf-document-icon {
  font-size: 15px;
  line-height: 1;
}

.status-pill,
.variant-pill,
.tag,
.audio-status,
.completion-status,
.activity-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 13px;   /* keep text clear of the pill's rounded ends */
  color: #31515b;
  background: #edf5f7;
  border: 1px solid #c7dce1;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}

.completion-status.is-incomplete {
  color: var(--amber);
  background: var(--soft-amber);
  border-color: var(--amber-line);
}

.completion-status.is-complete {
  color: #17653a;
  background: #effaf1;
  border-color: #a8d8b4;
}

.completion-status[hidden] {
  display: none;
}

.status-pill {
  color: #ffffff;
  background: #31414d;
  border-color: #31414d;
}

.activity-status {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.activity-status.is-working {
  color: var(--amber);
}

.activity-status.is-ready {
  color: var(--teal-dark);
}

/* A short state fits the pill; an error is a sentence and must not be clipped by the bar. */
.activity-status.is-error {
  color: var(--bad);
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: min(100%, 66ch);
  border-radius: var(--control-radius);
  line-height: 1.35;
  padding: 6px 12px;
}

.activity-status[hidden] {
  display: none !important;
}

.variant-pill {
  color: var(--teal-dark);
  background: var(--soft-teal);
  border: 1px solid #b8ded9;
}

.variant-controls {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  align-items: center;
}

.variant-switch {
  display: inline-flex;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #c7dce1;
  border-radius: 7px;
}

.variant-number,
.variant-next {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  color: #31515b;
  background: #ffffff;
  border: 0;
  font-size: 13px;
  font-weight: 760;
}

.variant-number + .variant-number {
  border-left: 1px solid #c7dce1;
}

.variant-number:hover,
.variant-next:hover {
  background: #edf5f7;
}

.variant-number.is-active {
  color: var(--amber);
  background: var(--soft-amber);
  box-shadow: inset 0 0 0 1px var(--amber-line);
}

.tag {
  color: var(--teal-dark);
  background: var(--soft-teal);
  border: 1px solid #b8ded9;
}

.switch {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-size: 14px;
  font-weight: 680;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.switch:hover {
  color: var(--ink);
  background: transparent;
}

.switch:has(input:disabled) {
  color: var(--disabled-ink);
  cursor: not-allowed;
}

.switch input {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 18px;
  margin: 0;
  appearance: none;
  background: var(--toggle-off-bg);
  border: 1px solid var(--toggle-off-line);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.switch input::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  content: "";
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(23, 33, 43, 0.2);
  transition: transform 140ms ease;
}

.switch input:checked {
  background: var(--toggle-on-bg);
  border-color: var(--toggle-on-bg);
}

.switch input:checked::after {
  transform: translateX(12px);
}

.switch input:disabled {
  background: var(--disabled-bg);
  border-color: var(--disabled-line);
  cursor: not-allowed;
}

.switch input:disabled::after {
  background: #f8f9fa;
  box-shadow: none;
}

.switch input:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 0.22);
  outline-offset: 2px;
}

/* intelligent-function toggles read blue, matching the ✦ smart buttons */
.switch.is-smart { color: var(--smart-ink); }
.switch.is-smart:hover { color: var(--smart-ink); }
.switch.is-smart input:checked {
  background: var(--action-smart-ink);
  border-color: var(--action-smart-ink);
}
.switch.is-smart input:focus-visible {
  outline-color: rgba(29, 78, 216, 0.25);
}

.primary-button,
.secondary-button,
.ghost-button,
.generation-action,
.audio-button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 7px;
  border: 1px solid transparent;
  font-weight: 760;
}

.primary-button {
  color: var(--action-primary-ink);
  background: var(--action-primary-bg);
}

.primary-button:hover {
  background: var(--action-primary-hover);
}

.secondary-button {
  color: var(--action-neutral-ink);
  background: var(--action-neutral-bg);
  border-color: var(--action-neutral-line);
}

.secondary-button:hover {
  border-color: #aab5c0;
}

.ghost-button {
  color: var(--teal-dark);
  background: transparent;
  border-color: #a9d7d2;
}

/* Intelligent functions read blue everywhere — distinct from amber "selected". */
.generation-action {
  color: var(--action-smart-ink);
  background: var(--action-smart-bg);
  border-color: var(--action-smart-line);
  box-shadow: none;
}

.generation-action:hover {
  background: var(--action-smart-hover);
  border-color: var(--action-smart-ink);
}

.generation-action:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.22);
  outline-offset: 2px;
}

/* Disabled wins over every semantic role, including primary and smart. */
.primary-button:disabled,
.secondary-button:disabled,
.ghost-button:disabled,
.generation-action:disabled,
.audio-button:disabled {
  color: var(--disabled-ink);
  background: var(--disabled-bg);
  border-color: var(--disabled-line);
  box-shadow: none;
  opacity: 1;
}

.ui-tooltip {
  position: fixed;
  z-index: 1000;
  width: max-content;
  max-width: min(260px, calc(100vw - 24px));
  padding: 7px 9px;
  color: #ffffff;
  background: #26343e;
  border: 1px solid #3c4b56;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(23, 33, 43, 0.18);
  font-size: 12px;
  font-weight: 580;
  line-height: 1.35;
  pointer-events: none;
}

.ui-tooltip[hidden] {
  display: none;
}

.audio-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  color: #23434b;
  background: #edf5f7;
  border-color: #c7dce1;
  font-size: 13px;
}

.audio-button:hover {
  border-color: #92bbc5;
}

.inline-audio-controls {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  margin-left: 6px;
  vertical-align: middle;
  background: #edf5f7;
  border: 1px solid #c7dce1;
  border-radius: 7px;
}

.inline-audio-controls .audio-button {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.inline-audio-controls .llm-audio-button {
  color: var(--action-smart-ink);
  background: var(--action-smart-hover);
}

.inline-audio-controls .audio-pause-button,
.inline-audio-controls .audio-stop-button {
  display: none;
}

.inline-audio-controls.is-active-audio {
  border-color: #92bbc5;
  box-shadow: 0 0 0 2px rgba(146, 187, 197, 0.16);
}

.inline-audio-controls.is-paused-audio {
  border-color: var(--amber-line);
  box-shadow: 0 0 0 2px rgba(215, 180, 106, 0.18);
}

.inline-audio-controls.is-active-audio .audio-pause-button,
.inline-audio-controls.is-active-audio .audio-stop-button {
  display: inline-flex;
}

.inline-audio-controls .audio-button + .audio-button {
  border-left: 1px solid #c7dce1;
}

.inline-audio-controls .audio-button:hover {
  background: #dff0f2;
}

.inline-audio-controls .audio-button:disabled {
  background: transparent;
  opacity: 0.42;
}

.dictation-button {
  min-height: 34px;
  padding: 7px 10px;
}

.dictation-button.is-listening {
  color: #7a1f2a;
  border-color: #e0a2aa;
  background: #fff1f2;
}

.dictation-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

/* Amber ground, as in the baseline before the intelligent-learning rebuild. The blue
   "intelligent function" accent stays on the buttons that trigger the call, not on its result. */
.llm-evaluation-box {
  margin-top: 14px;
  padding: 14px;
  background: var(--soft-amber);
  border: 1px solid var(--amber-line);
  border-radius: 8px;
}

.llm-box-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.llm-box-head h4,
.llm-evaluation-box h5 {
  margin: 0;
}

.llm-evaluation-box > p {
  margin: 8px 0 12px;
}

.llm-continuation-row .source-note {
  margin: 0;
}

.llm-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0;
}

.llm-correction-list {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
  padding-left: 18px;
}

.llm-correction-list p {
  margin: 4px 0;
}

.workspace {
  width: min(1360px, calc(100% - 48px));
  margin: 18px auto 48px;
}

.action-button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
}

.button-row,
.selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.button-row > button,
.selection-actions > button,
.scope-toolbar > button {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.command-group button {
  min-width: 0;
  max-width: 100%;
}

#pdfDownloadButton {
  font-size: 12px;
  white-space: nowrap;
}

.action-modal {
  width: min(520px, calc(100% - 28px));
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.action-modal::backdrop {
  background: rgba(23, 33, 43, 0.46);
}

.modal-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(23, 33, 43, 0.24);
}

.modal-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  color: #ffffff;
  background: var(--teal);
  border-radius: 8px;
  font-weight: 820;
}

.modal-copy h2 {
  margin: 2px 0 8px;
  font-size: 20px;
}

.modal-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.modal-list {
  display: grid;
  gap: 5px;
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.modal-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.button-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-weight: 900;
  line-height: 1;
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

.home-page {
  width: min(880px, 100%);
  margin: 0 auto;
  /* sit close under the dark bar so the cards don't drift down the screen */
  padding: clamp(10px, 2vh, 22px) 0 24px;
}

.home-intro {
  max-width: 680px;
  margin: 0 auto clamp(16px, 3vh, 26px);
  text-align: center;
}
.home-intro .eyebrow { color: var(--teal-dark); }
.home-intro h2 {
  margin: 6px 0 10px;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: 0;
}
.home-intro > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.home-destinations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.home-destinations button {
  display: flex;
  aspect-ratio: 1.2 / 1;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 7px;
  text-align: center;
  transition: border-color 130ms ease, background-color 130ms ease, transform 130ms ease;
}
.home-destinations button:hover {
  border-color: #9db0b8;
  background: #fbfdfd;
  transform: translateY(-1px);
}
.home-destinations button:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.2); outline-offset: 2px; }
.home-destination-icon,
.home-destination-text-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  margin: 0 auto 2px;      /* centred above the label */
  align-items: center;
  justify-content: center;
  color: var(--teal-dark);
}
.home-destination-icon .ui-icon { width: 30px; height: 30px; }
.home-destination-text-icon { font-size: 22px; font-weight: 760; }
.home-destinations strong { font-size: 16px; line-height: 1.25; }
.home-destinations small { color: var(--muted); font-size: 12px; line-height: 1.4; }

@media (max-width: 820px) {
  .home-intro h2 { font-size: 30px; }
  .home-destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-destinations button { aspect-ratio: auto; min-height: 148px; padding: 16px; }
}

@media (max-width: 380px) {
  .home-destinations { gap: 8px; }
  .home-destinations button { min-height: 138px; padding: 13px; }
  .home-destinations strong { font-size: 14px; }
  .home-destinations small { font-size: 11px; }
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}

.panel-heading h2 {
  font-size: 24px;
}

.exercise-stack,
.dialogue-grid,
.profile-grid {
  display: grid;
  gap: 14px;
}

.exercise-block,
.scenario-band,
.feedback-panel,
.profile-block,
.dialogue-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.exercise-block {
  overflow: hidden;
}

.exercise-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.exercise-head h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}

.exercise-body {
  padding: 16px;
}

.latin-passage {
  margin: 0;
  padding: 14px 16px;
  color: #111827;
  background: #f7fafb;
  border-left: 4px solid var(--teal);
  line-height: 1.65;
}

.exercise-table {
  width: 100%;
  border-collapse: collapse;
}

.exercise-table th,
.exercise-table td {
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.exercise-table th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.exercise-table input,
.exercise-table select,
.dialogue-input,
.scenario-band textarea {
  width: 100%;
  border: 1px solid #bcc6d0;
  border-radius: 6px;
  color: var(--ink);
  background: #ffffff;
}

.exercise-table input,
.exercise-table select {
  min-height: 38px;
  padding: 8px 10px;
}

.exercise-table input.is-correct,
.dialogue-input.is-correct {
  border-color: var(--good);
  background: #effaf1;
}

.exercise-table input.is-wrong,
.dialogue-input.is-wrong {
  border-color: var(--bad);
  background: #fff1f1;
}

.choice-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choice-list label {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

.choice-list label.is-correct {
  border-color: #8bcf9c;
  background: #effaf1;
}

.choice-list label.is-wrong {
  border-color: #f0a6a6;
  background: #fff1f1;
}

.feedback-panel {
  display: none;
  margin-top: 14px;
  padding: 16px;
  border-left: 4px solid var(--wine);
}

.feedback-panel.is-visible {
  display: block;
}

.feedback-panel h3,
.feedback-panel h4,
.profile-block h3,
.dialogue-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.feedback-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

/* One exercise set is a sequence of sub-tasks: it spans the grid and keeps its own reading order. */
.adaptive-exercise-set {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  padding: 0 12px 12px;
}

.adaptive-exercise-set > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 8px 0;
  color: var(--ink);
  font-weight: 760;
  cursor: pointer;
  list-style: none;
}

.adaptive-exercise-set > summary::-webkit-details-marker {
  display: none;
}

.adaptive-exercise-set > summary::after {
  content: "+";
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.adaptive-exercise-set[open] > summary::after {
  content: "−";
}

.adaptive-exercise-set > .mini-task + .mini-task {
  margin-top: 10px;
}

.adaptive-exercise-set > .mini-task {
  background: #fff;
}

.mini-task {
  padding: 12px;
  background: #f7fafb;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.mini-task p {
  margin: 0 0 10px;
  line-height: 1.45;
}

.mini-task input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #bcc6d0;
  border-radius: 6px;
  color: var(--ink);
  background: #ffffff;
}

.mini-task input.is-correct {
  border-color: var(--good);
  background: #effaf1;
}

.mini-task input.is-wrong {
  border-color: var(--bad);
  background: #fff1f1;
}

.mini-reason {
  margin: 8px 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.llm-task-result,
.followup-result {
  margin-top: 12px;
  padding: 11px 12px;
  background: var(--soft-amber);
  border: 1px solid var(--amber-line);
  border-radius: 7px;
}

.llm-task-result p,
.followup-result p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.diagnostic-box {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.4fr);
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  background: #f7fafb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.diagnostic-box h4 {
  margin: 0 0 8px;
  font-size: 16px;
}

.diagnostic-box p {
  margin: 0;
  color: #24323d;
  line-height: 1.5;
}

.diagnostic-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.diagnostic-list div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.diagnostic-list div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.diagnostic-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.diagnostic-list dd {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.scenario-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 14px 16px;
}

.scenario-band label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.scenario-band textarea,
.dialogue-input {
  min-height: 76px;
  padding: 10px 12px;
  resize: vertical;
}

.scenario-band textarea {
  min-height: 96px;
}

.translation-source,
.translation-label {
  display: block;
}

.translation-source {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.55;
}

.translation-label {
  margin-top: 7px;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
}

.translation-focus {
  padding: 1px 3px;
  color: #9f2635;
  background: #fff0f1;
  border-radius: 3px;
  font-weight: 700;
}

.dialogue-grid {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.dialogue-card {
  padding: 16px;
}

.bubble {
  max-width: 88%;
  padding: 11px 13px;
  border-radius: 8px;
  line-height: 1.5;
}

.bubble.teacher {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-self: start;
  color: #ffffff;
  background: var(--teal-dark);
}

.bubble.user {
  justify-self: end;
  background: var(--soft-wine);
  border: 1px solid #edb8c8;
}

.dialogue-side {
  display: grid;
  gap: 10px;
}

.dialogue-round-list {
  display: grid;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.dialogue-round-item {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.dialogue-question-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
}

.dialogue-question-row p {
  margin: 0;
  line-height: 1.5;
}

.dialogue-question-index {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  color: #ffffff;
  background: var(--teal);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 760;
}

.audio-practice {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  background: #f7fafb;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.audio-practice label,
.dialogue-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.structure-line {
  margin: 0;
  padding: 10px;
  color: #24323d;
  background: var(--soft-teal);
  border: 1px solid #b8ded9;
  border-radius: 7px;
  line-height: 1.45;
}

.hint-list,
.profile-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hint-list li,
.profile-list li {
  padding: 9px 10px;
  background: #f7fafb;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.profile-grid {
  grid-template-columns: 1.2fr 0.8fr;
}

.profile-block {
  padding: 16px;
}

.profile-wide {
  grid-column: 1 / -1;
}

.profile-overview {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.profile-overview p {
  margin: 6px 0 0;
  color: var(--muted);
}

.profile-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.accuracy-badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 12px;
  color: var(--teal-dark);
  background: var(--soft-teal);
  border: 1px solid #b8ded9;
  border-radius: 999px;
  font-size: 18px;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.stat-strip div {
  min-width: 0;
  padding: 12px 12px 4px 0;
}

.stat-strip div + div {
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.stat-strip strong {
  display: block;
  font-size: 24px;
  line-height: 1;
}

.stat-strip span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.profile-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin: 0 0 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.profile-filter {
  display: grid;
  gap: 5px;
  min-width: 180px;
}

.profile-filter span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.profile-filter select {
  min-height: 38px;
  padding: 7px 34px 7px 10px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #bcc6d0;
  border-radius: 6px;
}

.smiley-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
}

.smiley {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  color: #ffffff;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 760;
  line-height: 1;
}

.lesson-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lesson-status-group {
  min-width: 0;
  padding: 12px;
  background: #f7fafb;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.lesson-status-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: var(--teal-dark);
}

.lesson-status-group ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lesson-status-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  align-items: start;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.lesson-status-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.lesson-status-row strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

.lesson-status-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.weakness-list,
.recommendation-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.weakness-list {
  list-style: none;
}

.weakness-list li {
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--line);
}

.weakness-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.weakness-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.weakness-title span {
  flex: 0 0 auto;
  color: var(--wine);
  font-size: 12px;
  font-weight: 760;
}

.weakness-list p,
.recommendation-list p {
  margin: 7px 0 0;
  color: #24323d;
  line-height: 1.45;
}

.recommendation-list {
  list-style: none;
  counter-reset: none;
}

.recommendation-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--line);
}

.recommendation-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.recommendation-index {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  color: #ffffff;
  background: var(--teal);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 760;
}

.profile-history {
  display: grid;
  gap: 10px;
}

.profile-history-item {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr minmax(180px, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.profile-history-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.profile-history-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.meter {
  height: 12px;
  overflow: hidden;
  background: #e5e7eb;
  border-radius: 999px;
}

.meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}

.source-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.scope-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.scope-toolbar .field-label,
.scope-toolbar select {
  min-width: 0;
}

.scope-toolbar select {
  width: 100%;
}

.compact-scope-toolbar {
  margin-top: 14px;
}

.scope-summary,
.selection-summary {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.scope-summary strong,
.selection-summary strong {
  color: var(--ink);
}

/* Zeigt an, dass die Steuerelemente von der aktiven Auswahl abweichen. Ohne diesen
   Hinweis blieb der Unterschied unsichtbar -- die Zusammenfassung nennt die
   angewendete Auswahl, nicht die eingestellte. */
.selection-summary .selection-pending {
  color: var(--amber);
  font-weight: 600;
}

#curriculumMockupButton.is-pending {
  border-color: var(--amber-line);
  box-shadow: inset 0 0 0 1px var(--amber-line);
}

.selection-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.control-section {
  min-width: 0;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.control-section h3 {
  margin: 0 0 14px;
  font-size: 16px;
}

.control-section .field-label + .field-label,
.control-section .segmented-control + .field-label,
.control-section .segmented-control + .segmented-control {
  margin-top: 12px;
}

/* "Anpassung" stapelt mehrere, voneinander unabhaengige Entscheidungen
   (Fehlerberuecksichtigung, Textgrundlage, Aufgabenquelle) -- ohne eigene
   Ueberschrift sahen zwei gleich gestaltete Segmented-Controls wie Werte
   derselben Frage aus. Jede Untergruppe bekommt jetzt eine eigene, kleine
   Ueberschrift und einen Trennstrich zur vorigen. */
.control-subgroup + .control-subgroup {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px dashed var(--line);
}

.control-subgroup h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Eigenstaendiges Panel statt eines control-subgroup-Kindes (siehe index.html):
   steht jetzt neben .personal-plan-callout, ausserhalb von .curriculum-selection-
   panel, damit es bei "Aus Fehlern" UND bei "Lern- und Fehlerfokus" sichtbar bleibt. */
.composition-shares-panel {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.composition-shares-panel h4 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: help;
}

/* Eine gemeinsame Grid-Spaltenbreite fuer alle vier Zeilen statt vier eigener
   Mini-Grids (die je nach Beschriftungslaenge unterschiedlich breite erste
   Spalten bekamen, siehe Vorgaengerversion). Erst mit display:contents gebaut,
   aber das nimmt .composition-share-row seine eigene Layoutbox -- data-help
   (fuer den Mouseover-Text) fand dann keine Position mehr und der Tooltip
   erschien links oben im Viewport. subgrid loest dieselbe Ausrichtung, ohne
   dass die Zeile ihre eigene, hoverbare Box verliert. */
.composition-shares {
  display: grid;
  grid-template-columns: auto 1fr auto;
  row-gap: 10px;
}

.composition-share-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  column-gap: 12px;
}

.composition-share-row span {
  color: var(--ink);
  font-size: 13px;
}

.composition-share-row output {
  min-width: 3em;
  text-align: right;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.composition-shares-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* Grau/Amber statt der Browser-Standardfarbe (meist Blau). --amber selbst ist im
   Rest der Seite nur Textfarbe auf hellem Grund (--action-selected-ink) -- als
   grosse Flaeche wirkt es dunkelbraun statt golden. Fuer eine Flaeche dieser
   Groesse steht --amber-line (das helle Gold der Rahmen/Umrandungen); --amber
   bleibt als duenner Kontrastring am Griff erhalten. --fill (0%-100%, per JS auf
   jeder Eingabe gesetzt) haelt den WebKit-Verlauf synchron zum Reglerwert;
   Firefox uebernimmt das nativ ueber ::-moz-range-progress. */
.composition-share-row input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(to right, var(--amber-line) 0%, var(--amber-line) var(--fill, 35%), var(--line) var(--fill, 35%), var(--line) 100%);
  cursor: pointer;
}
.composition-share-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--amber-line);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1.5px var(--amber);
  cursor: pointer;
}
.composition-share-row input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  border: none;
}
.composition-share-row input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--amber-line);
}
.composition-share-row input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--amber-line);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1.5px var(--amber);
  cursor: pointer;
}
.composition-share-row input[type="range"]:focus-visible {
  outline: 2px solid var(--amber-line);
  outline-offset: 2px;
}

#resetCompositionShares {
  margin-top: 12px;
}

/* Persoenlich auswaehlen geht in die andere Richtung als die drei Bloecke oben:
   nicht "Stoff waehlen, dann anpassen", sondern "vom Lernstand ausgehen, gar
   nichts vorher waehlen". Ein Knopf neben "Auswahl anwenden" sah wie eine
   dritte, gleichrangige Option aus statt wie ein eigener Einstieg. */
.personal-plan-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--soft-amber);
  border: 1px solid var(--amber-line);
  border-radius: 8px;
}

.personal-plan-callout p {
  margin: 0;
  max-width: 46ch;
  font-size: 13px;
  color: var(--muted);
}

.personal-plan-callout strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  color: var(--ink);
}

.entry-mode-toggle {
  margin-bottom: 14px;
}

/* Der Schalter blendet die nicht gewaehlte Richtung nicht aus, sondern daempft
   sie nur -- beide Wege bleiben bedienbar, aber nur einer sieht gerade "aktiv" aus. */
.personal-plan-callout.is-dimmed,
.curriculum-selection-panel.is-dimmed {
  opacity: 0.5;
  filter: grayscale(0.4);
}

/* Hidden conditional fields may sit between the two visible groups. */
.control-section > .segmented-control ~ .segmented-control {
  margin-top: 12px;
}

.segmented-control {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  background: #f4f7f8;
  border: 1px solid #c7dce1;
  border-radius: 7px;
}

.segmented-control label {
  min-width: 0;
  cursor: pointer;
}

.segmented-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-control label > span {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 10px;
  color: var(--muted);
  border-right: 1px solid #c7dce1;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.segmented-control label:last-child > span {
  border-right: 0;
}

/* direction toggle: full label by default, short label swapped in on narrow
   screens (see the @media (max-width: 820px) block). */
.segmented-control .dir-short { display: none; }

.segmented-control input:checked + span {
  color: var(--amber);
  background: var(--soft-amber);
}

.segmented-control input:focus-visible + span,
.lesson-check-grid input:focus-visible + span,
.assessment-choices input:focus-visible + span {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--amber-line);
  outline-offset: -2px;
}

.lesson-check-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(34px, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.lesson-check-grid label {
  cursor: pointer;
}

.lesson-check-grid input {
  position: absolute;
  opacity: 0;
}

.lesson-check-grid span {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  color: var(--muted);
  background: #f5f7f9;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 750;
}

.lesson-check-grid input:checked + span {
  color: #ffffff;
  background: var(--teal);
  border-color: var(--teal);
}

.topic-check-list {
  max-height: 310px;
  margin-top: 12px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.topic-check-list label {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  padding: 9px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.topic-check-list label:last-child {
  border-bottom: 0;
}

.topic-check-list span {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.topic-check-list strong {
  color: var(--ink);
}

.selection-summary {
  margin: 14px 0 0;
  padding: 13px 16px;
  background: #eef5f6;
  border-left: 3px solid var(--teal);
}

.selection-actions {
  margin: 12px 0 16px;
}

.vocabulary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vocabulary-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.vocab-number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  color: #ffffff;
  background: var(--teal);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 760;
}

.vocab-content,
.vocab-prompt {
  min-width: 0;
}

.vocab-prompt {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-height: 30px;
  margin-bottom: 8px;
}
.vocab-prompt > small { flex: 0 0 auto; color: var(--muted); font-weight: 700; }
.vocab-prompt > strong { flex: 1 1 auto; min-width: 0; }
.vocab-prompt > .inline-audio-controls { flex: 0 0 auto; margin-left: auto; }

.vocab-content > input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #bdc7d0;
  border-radius: 6px;
}

/* Wortschatz "Hörsätze" drill — the audio-drill sub-section. */
.vocabulary-audio-drill { margin-top: 20px; }
#vocabularyAudioRoot { grid-template-columns: minmax(0, 1fr); }
/* prompt: muted label on its own line, then the question with its play button
   flowing INLINE right after it (exactly like .dialogue-question-row) — the
   button rides the text's middle line, no separate pinned column. */
.vocabulary-audio-item .vocab-prompt {
  display: block;
  margin-bottom: 8px;
}
.vocabulary-audio-item .vocab-prompt > small {
  display: block;
  color: var(--muted);
  font-weight: 700;
}
.vocabulary-audio-item .vocab-prompt > strong { margin-right: 6px; }
.vocabulary-audio-item .vocab-prompt > .inline-audio-controls {
  margin: 0;
  vertical-align: middle;
}

.vocabulary-audio-item .vocab-answer-entry { margin-bottom: 8px; }

.response-exercise-list {
  display: grid;
  gap: 12px;
}

/* Shared compact exercise layout. */
.compact-exercises {
  container-type: inline-size;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.compact-exercises > *,
.compact-exercises .exercise-head > * { min-width: 0; }
.compact-exercises .tag {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  align-items: flex-start;
  padding: 6px 14px;
  border-radius: 14px;   /* a pill radius looks wrong once the text wraps */
  line-height: 1.4;
}

.compact-exercises > .exercise-block,
.compact-exercises .context-application {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.compact-exercises > .exercise-block + .exercise-block,
.compact-exercises > .context-application-wrap + .exercise-block {
  border-top: 1px solid #cbd3da;
}

.compact-exercises .exercise-head {
  padding: 22px 0 12px;
  border: 0;
}

.compact-exercises .exercise-body {
  padding: 0 0 20px;
}

.compact-exercises .latin-passage {
  padding: 14px 16px;
  border: 1px solid #b8ded9;
  border-left: 3px solid var(--teal);
  border-radius: 5px;
  background: #f3f9f8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.65;
}

.compact-exercises .response-exercise-list {
  gap: 0;
}

.compact-exercises .response-exercise-item {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 18px;
  align-items: start;
  padding: 14px 0;
}

.compact-exercises .response-exercise-item > *,
.compact-exercises .context-form-field {
  min-width: 0;
}

.compact-exercises .response-exercise-item > p:first-child {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.compact-exercises .translation-source,
.compact-exercises .translation-label {
  display: inline;
}

.compact-exercises .translation-label {
  margin-left: 8px;
  font-size: 12px;
  color: var(--muted);
}

.compact-exercises .response-exercise-item > .source-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
}

.compact-exercises .sample-row {
  margin: 0;
  gap: 4px 10px;
  align-content: start;
}

.compact-exercises .sample-copy {
  border: 0;
  border-radius: 3px;
  padding: 2px 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
}

.compact-exercises .sample-copy:hover,
.compact-exercises .sample-copy:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

.compact-exercises .sample-copy.is-wrong-sample {
  color: var(--muted);
  background: transparent;
  border: 0;
}

.compact-exercises textarea {
  width: 100%;
  min-height: 44px;
  height: 62px;
  padding: 8px 10px;
  border: 1px solid #bcc6d0;
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

.compact-exercises .context-application {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 18px;
  margin: 0 0 20px;
  padding: 14px 0 0 16px;
  border-left: 2px solid var(--line);
}

.compact-exercises .context-application-head,
.compact-exercises .context-application > p:not(.context-prompt),
.compact-exercises .context-application > .small-row {
  grid-column: 1 / -1;
  margin: 0;
}

.compact-exercises .context-application > p:not(.context-prompt) {
  color: var(--muted);
  font-size: 12px;
}

.compact-exercises .context-application .context-result:empty {
  display: none;
}

.compact-exercises .context-prompt { margin: 0; }
.compact-exercises .context-application h4 { font-size: 15px; }

.context-form-item { padding: 16px 0; border-top: 1px solid var(--line); }
.context-form-item:first-child { border-top: 0; padding-top: 0; }
.context-form-source { margin: 0 0 12px; line-height: 1.5; }
.context-form-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.context-form-field label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
.context-form-phrase { font-weight: 400; }
.context-form-field textarea { display: block; margin-bottom: 6px; }
.context-form-item > .source-note { margin: 8px 0 0; font-size: 12px; }

:where(.samples-hidden) .compact-exercises .response-exercise-item,
:where(.samples-hidden) .compact-exercises .context-application {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr);
}

@container (max-width: 1000px) {
  .compact-exercises .response-exercise-item,
  .compact-exercises .context-application { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .compact-exercises .response-exercise-item > .sample-row,
  .compact-exercises .context-application > .sample-row { grid-column: 2; }
  .context-form-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .context-form-field:last-child { grid-column: 1 / -1; }
}

@container (max-width: 620px) {
  .compact-exercises .response-exercise-item,
  .compact-exercises .context-application,
  .context-form-fields { grid-template-columns: minmax(0, 1fr); }
  .compact-exercises .response-exercise-item > .sample-row,
  .compact-exercises .context-application > .sample-row { grid-column: 1; }
}

.explain-topic-detailed,
.explain-topic-detailed .explain-topic-body,
.explain-guide-table-scroll { min-width: 0; }

.explain-topic-detailed .explain-topic-body {
  grid-template-columns: minmax(0, 1fr);
}

.explain-topic-detailed .explain-topic-body > * { min-width: 0; }

.response-exercise-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.response-exercise-item:first-child {
  padding-top: 0;
}

.response-exercise-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.response-exercise-item p {
  margin: 0 0 8px;
}

.response-exercise-item input,
.response-exercise-item textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #bdc7d0;
  border-radius: 6px;
  resize: vertical;
}

.context-application-wrap {
  margin: -2px 0 2px;
}

.context-application {
  padding: 16px;
  border: 1px solid #d9cfa7;
  border-radius: 8px;
  background: #fffdf6;
}

.context-application-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.context-kicker {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.context-application h4 {
  margin: 0;
  font-size: 16px;
}

.context-application > p {
  margin: 10px 0;
  color: var(--muted);
}

.context-prompt {
  color: var(--ink) !important;
}

.context-application textarea {
  width: 100%;
  min-height: 62px;
  padding: 9px 10px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #bdc7d0;
  border-radius: 6px;
  resize: vertical;
}

.context-application textarea.is-correct {
  border-color: var(--good);
  background: #effaf1;
}

.context-application textarea.is-wrong {
  border-color: var(--bad);
  background: #fff1f1;
}

.context-result {
  margin: 10px 0 0 !important;
  font-size: 14px;
  line-height: 1.5;
}

.context-result.is-correct { color: var(--good); }
.context-result.is-wrong { color: #8b4e57; }

.samples-hidden .sample-row {
  display: none !important;
}

.hints-hidden .hint-content {
  display: none !important;
}

.muted {
  color: var(--muted);
}

.sample-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.sample-copy {
  max-width: 100%;
  min-height: 26px;
  padding: 3px 7px;
  color: #66717c;
  background: #f2f4f6;
  border: 1px solid #d7dde3;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
}

.sample-copy:hover {
  color: var(--ink);
  border-color: #aeb8c2;
}

.sample-copy.is-wrong-sample {
  color: #7a6670;
  background: #f6f1f3;
  border-color: #dfd1d7;
}

.dialogue-samples {
  margin-bottom: 12px;
}

.choice-field {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.choice-field legend {
  margin-bottom: 8px;
}

.small-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.explain-bear-panel {
  background: #eef5f4;
  border-bottom: 1px solid #c7dcd9;
}

.explain-bear-inner {
  width: min(100% - 64px, 1360px);
  margin: 0 auto;
  padding: 18px 0 22px;
}

.explain-bear-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #c7dcd9;
}

/* Only the × and the Grundbegriffe toggle travel with the scroll — the two
   controls hover on their own (each keeps its own white box), no wrapper
   chrome. The title block scrolls away normally. */
.explain-bear-inner { position: relative; }
.explain-bear-inner > .explain-bear-controls {
  position: sticky;
  top: calc(var(--learning-context-height, 0px) + 10px);
  z-index: 5;
  float: right;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 0 6px 20px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.explain-bear-inner > .explain-bear-controls > .explain-basics-switch,
.explain-bear-inner > .explain-bear-controls > .icon-only-button {
  box-shadow: 0 6px 16px -6px rgba(23, 33, 43, 0.35);
}

.explain-bear-header .eyebrow {
  color: var(--teal-dark);
  opacity: 1;
}

.explain-bear-header h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.explain-bear-context {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.explain-introduction {
  padding: 22px 0 18px;
  border-bottom: 1px solid #c7dcd9;
}

.explain-stage-label,
.explain-phase span {
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.explain-introduction h3 {
  margin: 5px 0 10px;
  font-size: 21px;
}

.explain-introduction p {
  max-width: 94ch;
  margin: 8px 0;
  color: #35434d;
  font-size: 14px;
  line-height: 1.65;
}

.explain-introduction .explain-lead {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}

.explain-learning-goals {
  max-width: 94ch;
  margin: 14px 0;
  padding: 12px 14px;
  background: #ffffff;
  border-left: 3px solid var(--teal);
}

.explain-learning-goals > strong {
  color: var(--ink);
  font-size: 13px;
}

.explain-learning-goals ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 20px;
  color: #35434d;
  font-size: 13px;
  line-height: 1.5;
}

.explain-first-example {
  max-width: 1000px;
  margin-top: 16px;
  padding: 14px 16px;
  background: #f8fbfa;
  border: 1px solid #c7dcd9;
  border-radius: 7px;
}

.explain-example-label {
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 780;
  text-transform: uppercase;
}

.explain-first-example .explain-example-intro {
  margin: 5px 0 9px;
  font-size: 12px;
}

.explain-example-sentence {
  margin: 6px 0 9px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.55;
}

.explain-form-mark {
  padding: 1px 2px;
  color: #862e37;
  background: #f8e6e8;
  border-radius: 2px;
}

.explain-analysis-row,
.explain-note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 10px 0 0;
  overflow: hidden;
  background: #cfdddc;
  border: 1px solid #cfdddc;
  border-radius: 6px;
}

.explain-analysis-row > div,
.explain-note-grid > div {
  min-width: 0;
  padding: 9px 10px;
  background: #ffffff;
}

.explain-analysis-row dt,
.explain-note-grid span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.explain-analysis-row dd,
.explain-note-grid strong {
  display: block;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

.explain-learning-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.explain-learning-sequence li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-content: start;
  min-width: 0;
  padding: 11px;
  color: #35434d;
  background: #ffffff;
  border: 1px solid #cfdddc;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
}

.explain-learning-sequence .explain-step-number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  color: #ffffff;
  background: var(--teal);
  border-radius: 50%;
  font-weight: 780;
}

/* Nur die Schrittueberschrift steht als Block; hervorgehobene Woerter im Text des Schritts
   (`guideText` setzt Latein in <strong>) bleiben in der Zeile. */
.explain-learning-sequence li > div > strong {
  display: block;
  margin: 2px 0 5px;
  color: var(--ink);
  font-size: 12px;
}

.explain-learning-sequence p {
  margin: 0;
}

.explain-phase {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid #c7dcd9;
}

.explain-phase strong {
  color: var(--ink);
  font-size: 13px;
}

.explain-study-guide {
  margin: 14px 0;
  border-top: 1px solid #c7dcd9;
}

.explain-study-stage {
  border-bottom: 1px solid #c7dcd9;
}

.explain-study-stage > summary {
  display: grid;
  grid-template-columns: minmax(170px, 0.35fr) 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 48px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.explain-study-stage > summary::-webkit-details-marker { display: none; }

.explain-study-stage > summary::after {
  content: "+";
  color: var(--muted);
  font-size: 18px;
}

.explain-study-stage[open] > summary::after { content: "−"; }

.explain-study-stage > summary span {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.explain-study-stage > summary strong {
  font-size: 14px;
}

.explain-study-body {
  max-width: 1000px;
  padding: 0 0 18px;
  color: #35434d;
  font-size: 13px;
  line-height: 1.6;
}

.explain-study-body p {
  margin: 7px 0;
}

.explain-study-body ol {
  margin: 10px 0;
  padding-left: 22px;
}

.explain-guided-comparison {
  margin: 14px 0;
  padding: 13px 14px;
  background: #f8fbfa;
  border-left: 3px solid var(--teal);
}

.explain-guided-comparison h4 {
  margin: 4px 0 5px;
  color: var(--ink);
  font-size: 14px;
}

.explain-guided-comparison > p {
  margin: 5px 0 10px;
}

.explain-comparison-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: #cfdddc;
  border: 1px solid #cfdddc;
  border-radius: 6px;
}

.explain-comparison-pair article {
  padding: 10px 12px;
  background: #ffffff;
}

.explain-comparison-pair span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.explain-comparison-pair p {
  margin: 5px 0 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.45;
}

.explain-comparison-answer {
  margin-top: 9px;
  border-top: 1px solid #d8e3e2;
}

.explain-comparison-answer summary,
.explain-more-examples > summary {
  padding: 9px 0 2px;
  color: var(--teal-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 740;
}

.explain-comparison-answer > summary {
  display: flex;
  align-items: center;
  list-style: none;
}

.explain-comparison-answer > summary::-webkit-details-marker {
  display: none;
}

.explain-comparison-answer > summary::after {
  content: "+";
  margin-left: auto;
  color: var(--muted);
}

.explain-comparison-answer[open] > summary::after {
  content: "−";
}

.explain-comparison-answer > div {
  padding: 4px 0 1px;
}

.explain-note-example {
  margin: 12px 0;
  padding: 12px 13px;
  background: #f8fbfa;
  border: 1px solid #d5e2e0;
  border-radius: 6px;
}

.explain-note-example > p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.explain-attention {
  display: grid;
  grid-template-columns: minmax(160px, auto) 1fr;
  gap: 10px;
  margin: 12px 0;
  padding: 11px 12px;
  background: var(--soft-amber);
  border-left: 3px solid var(--amber-line);
}

.explain-review-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 12px 0;
  overflow: hidden;
  background: #d7e2e1;
  border: 1px solid #d7e2e1;
  border-radius: 6px;
}

.explain-review-timeline article {
  padding: 10px 11px;
  background: #ffffff;
}

/* Nur Kennzeichen und Text des Schritts stehen als Block, nicht die Hervorhebungen darin. */
.explain-review-timeline article > span,
.explain-review-timeline article > strong {
  display: block;
}

.explain-review-timeline span {
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.explain-review-timeline article > strong {
  margin-top: 4px;
  color: #35434d;
  font-size: 12px;
  line-height: 1.45;
}

.explain-reference-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.explain-reference-buttons .text-button {
  min-height: 30px;
  padding: 4px 8px;
  color: var(--teal-dark);
  background: #ffffff;
  border: 1px solid #c7dcd9;
  border-radius: 6px;
  font-size: 12px;
}

.explain-bear-controls,
.explain-bear-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.explain-basics-switch {
  min-height: 36px;
  padding: 0 10px;
  background: #ffffff;
  border-color: #c7dcd9;
  border-radius: var(--control-radius);
}
/* it floats over content — keep it solidly white in every state (the generic
   .switch:hover turns the background transparent). */
.explain-basics-switch:hover,
.explain-basics-switch:focus-within,
.explain-basics-switch:active {
  background: #ffffff;
  border-color: #c7dcd9;
}

.icon-only-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--muted);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  font-size: 22px;
  line-height: 1;
}

.icon-only-button:hover {
  color: var(--ink);
  border-color: #aab5c0;
}

.explain-bear-content {
  display: grid;
  gap: 12px;
  padding-top: 14px;
}

.explain-focus {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  padding: 10px 12px;
  color: #31515b;
  background: #ffffff;
  border-left: 3px solid var(--teal);
}

.explain-focus span {
  color: var(--muted);
}

.explain-topic-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.explain-topic {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #cddad9;
  border-radius: 7px;
}

.explain-topic > summary {
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 12px 38px 12px 14px;
  cursor: pointer;
  list-style: none;
  background: #f9fbfb;
  border-bottom: 1px solid transparent;
}

.explain-topic[open] > summary {
  border-bottom-color: #dce6e5;
}

.explain-topic > summary::-webkit-details-marker {
  display: none;
}

.explain-topic > summary::after {
  position: absolute;
  content: "+";
}

.explain-topic > summary {
  position: relative;
}

.explain-topic > summary::after {
  top: 16px;
  right: 15px;
  color: var(--teal-dark);
  font-size: 20px;
  font-weight: 500;
}

.explain-topic[open] > summary::after {
  content: "−";
}

.explain-topic > summary span {
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.explain-topic > summary strong {
  font-size: 14px;
  line-height: 1.35;
}

.explain-topic-body {
  display: grid;
  gap: 16px;
  padding: 14px;
}

.explain-topic-detailed {
  grid-column: 1 / -1;
}

.explain-guide-introduction {
  max-width: 1060px;
  padding-bottom: 16px;
  border-bottom: 1px solid #dce6e5;
}

.explain-guide-introduction h4,
.explain-guide-section h4,
.explain-guide-section h5,
.explain-guide-list h5,
.explain-guide-examples h5,
.explain-guide-table h5 {
  margin: 0;
  letter-spacing: 0;
}

.explain-guide-introduction h4 {
  font-size: 17px;
}

.explain-guide-introduction > p,
.explain-guide-section > p {
  max-width: 94ch;
  margin: 8px 0;
  color: #35434d;
  font-size: 14px;
  line-height: 1.65;
}

.explain-guide-section {
  padding: 4px 0 20px;
  border-bottom: 1px solid #dce6e5;
}

.explain-guide-section:last-of-type {
  padding-bottom: 4px;
}

.explain-guide-section > h4 {
  margin-top: 5px;
  font-size: 18px;
}

.explain-guide-section > .explain-guide-lead {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}

.explain-guide-list {
  max-width: 1000px;
  margin: 14px 0;
  padding: 11px 14px;
  background: #f7faf9;
  border-left: 3px solid #b8d4d1;
}

.explain-guide-list h5,
.explain-guide-examples h5,
.explain-guide-table h5 {
  color: #35434d;
  font-size: 13px;
}

.explain-guide-list ul,
.explain-guide-list ol,
.explain-guide-examples ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 21px;
  color: #35434d;
  font-size: 13px;
  line-height: 1.5;
}

.explain-guide-table {
  margin: 16px 0;
}

.explain-guide-table > p {
  margin: 5px 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.explain-guide-table-scroll {
  overflow-x: auto;
  border: 1px solid #d6e0df;
  border-radius: 6px;
}

.explain-guide-table table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: #ffffff;
  font-size: 13px;
}

.explain-guide-table th,
.explain-guide-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-right: 1px solid #e2e8e7;
  border-bottom: 1px solid #e2e8e7;
}

.explain-guide-table tr:last-child > * {
  border-bottom: 0;
}

/* Tabellen nach Numerus (explain-bear.js, tabelleNachNumerusHtml): je Wort eine Gruppe aus Singular und
   Plural; die Wortkoepfe stehen ueber ihrer Gruppe, mit einer staerkeren Linie davor. */
.explain-numerus-table thead th[scope="colgroup"] {
  text-align: center;
  text-transform: none;
  font-size: 12px;
}

.explain-numerus-table th[scope="colgroup"],
.explain-numerus-table .is-singular {
  border-left: 2px solid #d6e0df;
}

.explain-guide-table tr > *:last-child {
  border-right: 0;
}

.explain-guide-table thead th {
  color: #45535d;
  background: #f3f7f6;
  font-size: 11px;
  text-transform: uppercase;
}

.explain-guide-table tbody th {
  color: var(--ink);
  font-weight: 760;
}

.explain-guide-examples {
  max-width: 1000px;
  margin: 16px 0;
}

.explain-guide-examples article {
  padding: 11px 0;
  border-top: 1px solid #e1e8e8;
}

.explain-guide-examples article:last-child {
  border-bottom: 1px solid #e1e8e8;
}

.explain-guide-worked {
  margin-top: 12px;
  padding: 13px;
  background: #f5f9f8;
  border-left: 3px solid var(--teal);
}

.explain-guide-answer {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  color: #45535d;
  font-size: 12px;
  font-weight: 700;
}

.explain-guide-answer textarea {
  width: 100%;
  min-height: 62px;
  padding: 8px 9px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #cbd7df;
  border-radius: 5px;
  resize: vertical;
}

.explain-guide-answer textarea:focus {
  border-color: var(--teal);
  outline: 2px solid rgba(16, 125, 116, 0.14);
  outline-offset: 0;
}

.explain-concepts {
  display: grid;
  gap: 14px;
}

.explain-concept {
  padding-bottom: 12px;
  border-bottom: 1px solid #e5eaee;
}

.explain-concept:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.explain-concept h4,
.explain-basics h5,
.explain-examples h4,
.explain-error-box h3,
.explain-error-box h4 {
  margin: 0;
  letter-spacing: 0;
}

.explain-concept h4,
.explain-basics h5,
.explain-examples h4,
.explain-error-box h4 {
  font-size: 14px;
}

.explain-basics h5 {
  color: #45535d;
}

.explain-concept p {
  margin: 6px 0 0;
  color: #35434d;
  font-size: 13px;
  line-height: 1.5;
}

.explain-inline-example {
  margin-top: 11px;
  padding: 10px 11px;
  background: #f6faf9;
  border-left: 3px solid #b8d4d1;
}

.explain-inline-example .explain-example-sentence {
  margin-bottom: 5px;
  font-size: 14px;
}

.explain-example-translation {
  margin: 4px 0 8px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}

.explain-question-example {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
}

.explain-question-example > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.3fr) minmax(0, 1fr);
  gap: 8px;
}

.explain-question-example dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 730;
}

.explain-question-example dd {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
}

.explain-basics {
  padding: 11px 12px;
  background: #f5f8f8;
  border-left: 3px solid #b8d4d1;
}

.explain-basics dl,
.explain-error-box dl {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
}

.explain-basics dl > div,
.explain-error-box dl > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.35fr) minmax(0, 1fr);
  gap: 10px;
}

.explain-basics dt,
.explain-error-box dt {
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.explain-basics dd,
.explain-error-box dd {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.explain-guided-analysis {
  overflow: hidden;
  background: #fbfcfc;
  border: 1px solid #d7e2e1;
  border-radius: 6px;
}

.explain-guided-analysis > summary {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 11px 36px 11px 12px;
  cursor: pointer;
  list-style: none;
}

.explain-guided-analysis > summary::-webkit-details-marker {
  display: none;
}

.explain-guided-analysis > summary::after {
  position: absolute;
  top: 14px;
  right: 13px;
  content: "+";
  color: var(--teal-dark);
  font-size: 18px;
}

.explain-guided-analysis[open] > summary::after {
  content: "−";
}

.explain-guided-analysis > summary span {
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.explain-guided-analysis > summary strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.explain-guided-analysis-body {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
  border-top: 1px solid #e3e9e9;
}

.explain-worked-example {
  padding: 12px;
  background: #f5f9f8;
  border-left: 3px solid var(--teal);
}

.explain-walkthrough-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 10px 0 0;
  overflow: hidden;
  background: #d7e2e1;
  border: 1px solid #d7e2e1;
  border-radius: 5px;
}

.explain-walkthrough-grid > div {
  padding: 8px 9px;
  background: #ffffff;
}

.explain-walkthrough-grid dt,
.explain-walkthrough-grid dd {
  margin: 0;
}

.explain-walkthrough-grid dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.explain-walkthrough-grid dd {
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

.explain-self-tests h5 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
}

.explain-self-tests > p {
  margin: 4px 0 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.explain-self-test {
  padding: 10px 0;
  border-top: 1px solid #e1e8e8;
}

.explain-self-test-number {
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.explain-self-test-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.explain-self-test-fields label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.explain-self-test-fields input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 6px 8px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #cbd7df;
  border-radius: 5px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
}

.explain-self-test-fields input:focus {
  border-color: var(--teal);
  outline: 2px solid rgba(16, 125, 116, 0.14);
  outline-offset: 0;
}

.explain-mental-model {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--accent, #2f6f5e);
  background: var(--surface-muted, rgba(47, 111, 94, 0.06));
  border-radius: 0 6px 6px 0;
}
.explain-mental-model h4 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.explain-mental-model p { margin: 0; }

.explain-typical-error {
  border-top: 1px solid #e1e8e8;
}

.explain-typical-error > summary {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  color: #6c5861;
  cursor: pointer;
  list-style: none;
}

.explain-typical-error > summary::-webkit-details-marker {
  display: none;
}

.explain-typical-error > summary::after {
  content: "+";
  margin-left: auto;
  color: #8b747d;
}

.explain-typical-error[open] > summary::after {
  content: "−";
}

.explain-typical-error > summary span {
  padding: 2px 5px;
  background: #f6f1f3;
  border: 1px solid #dfd1d7;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 760;
  text-transform: uppercase;
}

.explain-typical-error > summary strong {
  font-size: 12px;
}

.explain-typical-error-body {
  padding-top: 10px;
  color: #45535d;
  font-size: 12px;
  line-height: 1.5;
}

.explain-typical-error-body > p {
  margin: 0 0 9px;
}

.explain-correct-pattern,
.explain-wrong-pattern {
  display: grid;
  grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr);
  gap: 10px;
  padding: 9px 10px;
  border-left: 3px solid #83aaa5;
  background: #f4f9f8;
}

.explain-wrong-pattern {
  margin-top: 6px;
  color: #725f67;
  background: #f8f3f5;
  border-left-color: #c9adb7;
}

.explain-correct-pattern span,
.explain-wrong-pattern span {
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.explain-correct-pattern strong,
.explain-wrong-pattern s {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  text-decoration-thickness: 1px;
}

.explain-wrong-pattern s {
  color: #725f67;
}

.explain-repair-step {
  margin-top: 10px;
  padding: 10px 11px;
  background: var(--soft-amber);
  border-left: 3px solid var(--amber-line);
}

.explain-repair-step > strong {
  color: var(--ink);
  font-size: 11px;
  text-transform: uppercase;
}

.explain-repair-step p {
  margin: 4px 0 0;
}

.explain-error-box {
  padding: 14px;
  background: var(--soft-amber);
  border: 1px solid var(--amber-line);
  border-radius: 7px;
}

.explain-error-box.is-neutral {
  background: #ffffff;
  border-color: var(--line);
}

.explain-error-box.is-secure {
  background: #eff8f1;
  border-color: #b9d8c0;
}

.explain-error-box h3 {
  font-size: 16px;
}

.explain-error-box > p,
.explain-error-box > ul {
  margin: 7px 0 0;
  color: #35434d;
  font-size: 13px;
  line-height: 1.5;
}

.explain-error-box article {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--amber-line);
}

.explain-bear-actions {
  padding-top: 2px;
}

.explain-bear-actions button {
  min-height: 36px;
}

.explain-source {
  margin: 0;
  color: #6b7680;
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 820px) {
  .llm-panel-grid,
  .token-usage,
  .dialogue-grid,
  .profile-grid,
  .scenario-band {
    grid-template-columns: 1fr;
  }

  .scope-toolbar,
  .selection-layout,
  .vocabulary-list,
  .explain-topic-list {
    grid-template-columns: 1fr;
  }

  .explain-bear-inner {
    width: calc(100% - 32px);
  }

  .explain-bear-header {
    flex-direction: column;
    gap: 12px;
  }

  .explain-bear-inner > .explain-bear-controls {
    margin-left: 12px;
    gap: 5px;
    padding: 4px;
  }
  .explain-bear-inner > .explain-bear-controls .icon-only-button { flex: 0 0 32px; }

  .explain-basics dl > div,
  .explain-error-box dl > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .explain-learning-sequence,
  .explain-study-stage > summary,
  .explain-attention,
  .explain-analysis-row,
  .explain-note-grid,
  .explain-comparison-pair,
  .explain-review-timeline,
  .explain-correct-pattern,
  .explain-wrong-pattern,
  .explain-question-example > div {
    grid-template-columns: 1fr;
  }

  .explain-walkthrough-grid,
  .explain-self-test-fields {
    grid-template-columns: 1fr;
  }

  .explain-study-stage > summary {
    gap: 3px;
    padding: 9px 0;
  }

  .explain-study-stage > summary::after {
    display: none;
  }

  .segmented-control {
    width: 100%;
  }

  .segmented-control label {
    flex: 1;
  }

  /* "Latein → Deutsch" → "Lat → Deu" so both options fit side by side */
  .segmented-control .dir-long { display: none; }
  .segmented-control .dir-short { display: inline; white-space: nowrap; }

  .lesson-check-grid {
    grid-template-columns: repeat(4, minmax(34px, 1fr));
  }

  .selection-actions > button {
    flex: 1 1 150px;
  }

  .llm-panel {
    padding: 12px 16px;
  }

  .workspace {
    width: min(100% - 20px, 1180px);
    margin-top: 16px;
  }

  .panel-heading,
  .exercise-head,
  .source-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .feedback-grid {
    grid-template-columns: 1fr;
  }

  .diagnostic-box,
  .llm-columns,
  .diagnostic-list div {
    grid-template-columns: 1fr;
  }

  .profile-overview,
  .profile-section-head {
    flex-direction: column;
  }

  .stat-strip,
  .lesson-status-grid,
  .profile-history-item {
    grid-template-columns: 1fr;
  }

  .profile-filter,
  .profile-filter select {
    width: 100%;
  }

  .smiley-legend {
    width: 100%;
    margin-left: 0;
  }

  .stat-strip div + div {
    padding-left: 0;
    border-left: 0;
  }

  .exercise-table {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .context-application-head {
    flex-direction: column;
  }

  .workspace {
    width: min(100% - 20px, 1360px);
  }
}

@media print {
  .app-header,
  .action-strip,
  .llm-panel {
    display: none;
  }

  body {
    background: #ffffff;
  }

  .workspace {
    width: 100%;
    margin: 0;
  }

  .exercise-block,
  .scenario-band,
  .feedback-panel,
  .profile-block,
  .dialogue-card {
    box-shadow: none;
  }
}

/* Begriffskasten und Begriffsverzeichnis des Erklärbären. Die Art eines Ausdrucks — Fachwort,
   Wort dieses Lehrgangs, Alltagswort in enger Bedeutung — steht als Marke neben dem Begriff,
   damit sichtbar bleibt, was in jeder Grammatik so heißt und was nur hier. */
.explain-terms {
  margin: 12px 0 0;
  background: #f5f8f8;
  border-left: 3px solid #b8d4d1;
}

.explain-terms > summary {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  cursor: pointer;
}

.explain-terms > summary > span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.explain-terms > summary > strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.explain-terms-body {
  padding: 0 12px 12px;
}

.explain-terms dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.explain-term {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.explain-term > dt {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.explain-term > dd {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.explain-term-art {
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 620;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.explain-term-art.is-fachwort {
  color: #2a4f5e;
  background: #dcebf1;
}

.explain-term-art.is-hauswort {
  color: #5a4520;
  background: #f0e6d2;
}

.explain-term-art.is-alltagswort {
  color: #46503f;
  background: #e4ebdd;
}

.explain-term-new,
.explain-term-since {
  font-size: 10px;
  font-weight: 620;
  white-space: nowrap;
}

.explain-term-new {
  padding: 1px 6px;
  color: #6a3324;
  background: #f4ddd5;
  border-radius: 9px;
}

.explain-term-since {
  color: #8a9698;
  font-weight: 500;
}

.explain-term-depth {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid #dce6e5;
}

.explain-term-depth p {
  margin: 0 0 3px;
  color: #45535d;
  font-size: 11.5px;
  line-height: 1.45;
}

.explain-term-depth p > span {
  margin-right: 6px;
  color: #8a9698;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.explain-term-links {
  font-style: italic;
}

.explain-term-group {
  margin: 0 0 14px;
}

.explain-term-group:last-child {
  margin-bottom: 0;
}

.explain-term-group h5 {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.explain-term-group-note {
  margin: 2px 0 8px;
  color: var(--muted);
  font-size: 11.5px;
}

@media (max-width: 720px) {
  .explain-term {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}

/* Fundstellen bei Rubenbauer-Hofmann: Paragraph, Ueberschrift, Seite. Kein Wortlaut. */
.explain-referenz-thema {
  border-top: 1px solid var(--line, #d9d4c9);
  padding: 0.35rem 0;
}
.explain-referenz-thema > summary {
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;
}
.explain-referenz-thema > summary > strong {
  font-weight: 500;
  font-size: 0.85em;
  opacity: 0.7;
  white-space: nowrap;
}
.explain-referenz-liste {
  list-style: none;
  margin: 0.4rem 0 0.2rem;
  padding: 0;
}
.explain-referenz-liste li {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.15rem 0;
}
.explain-referenz-par { font-variant-numeric: tabular-nums; font-weight: 600; }
.explain-referenz-seite { font-variant-numeric: tabular-nums; opacity: 0.7; white-space: nowrap; }
.explain-referenz-geerbt {
  margin-left: 0.4rem;
  padding: 0 0.3rem;
  border-radius: 0.2rem;
  font-size: 0.72em;
  letter-spacing: 0.02em;
  background: rgba(0, 0, 0, 0.06);
  opacity: 0.75;
}
.explain-referenz-pfad {
  display: block;
  font-size: 0.78em;
  opacity: 0.6;
  line-height: 1.3;
}
.explain-referenz-warum {
  margin: 0.3rem 0 0;
  font-size: 0.85em;
  opacity: 0.8;
}
.explain-referenz-quelle { margin-top: 0.6rem; font-size: 0.8em; opacity: 0.65; }

@media (max-width: 640px) {
  .explain-referenz-liste li { grid-template-columns: 3.6rem 1fr; }
  .explain-referenz-seite { grid-column: 2; }
}

/* Lehrbuch- und Beiheftverweise: dieselbe Gestalt wie die Rubenbauer-Box, nur ohne Paragraphen. */
.explain-referenz-liste-kasten li { grid-template-columns: 4.5rem 1fr; }
.explain-referenz-lehrbuch > summary > span,
.explain-referenz-beiheft > summary > span { font-variant: normal; }
@media (max-width: 640px) {
  .explain-referenz-liste-kasten li { grid-template-columns: 3.6rem 1fr; }
}

/* Nachschlagewerke: eine Klappbox mit vier Unterboxen in zwei Gruppen. */
.explain-referenz-gruppe { margin: 0.5rem 0 0.9rem; }
.explain-referenz-gruppe > h5 {
  margin: 0 0 0.35rem;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
}
.explain-referenz-werk {
  border: 1px solid var(--line, #d9d4c9);
  border-radius: var(--control-radius, 6px);
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.4rem;
}
.explain-referenz-werk > summary {
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 600;
}
.explain-referenz-werk > summary > strong {
  font-weight: 500;
  font-size: 0.85em;
  opacity: 0.7;
  white-space: nowrap;
}

/* Nach oben. Gleiche Maße und Farben wie die übrigen runden Schaltflächen. */
.scroll-top-button {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--muted);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  cursor: pointer;
}
.scroll-top-button:hover { color: var(--ink); border-color: #aab5c0; }
.scroll-top-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.scroll-top-button .ui-icon { width: 18px; height: 18px; }
.scroll-top-button[hidden] { display: none; }
@media (max-width: 640px) {
  .scroll-top-button { right: 12px; bottom: 12px; }
}