/* DE: Vokabeltrainer (ADR 0045) — die ruhige, fokussierte Übungs-UI: eine zentrierte Karte, ein großer Prompt,
       ein Textfeld, und ein Verdict, das NIE nur über Farbe spricht (Symbol + Text, WCAG 1.4.1). Kein
       Reizüberflutungs-Gamification (die .docx-Empfehlung: ruhige UX).
   EN: Vocabulary trainer (ADR 0045) — the calm, focused practice UI: a centred card, a big prompt, a text
       field, and a verdict that is NEVER conveyed by colour alone (icon + text, WCAG 1.4.1). No overstimulating
       gamification (the .docx recommendation: a calm UX). */

.trainer {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

/* The trainer toggles elements via the `hidden` attribute (Stimulus, 1d/1d+): the „X heute dran" / „alles
   geschafft" banners and the „weiter" vs. „geschafft" action blocks. A class like `.btn` sets `display` and
   would otherwise OVERRIDE the UA `[hidden] { display: none }` on specificity (a hidden button stays visible).
   This scoped rule restores it for every hidden descendant of the trainer (matches the languages.css pattern). */
.trainer [hidden] {
  display: none;
}

/* Handoff 1a (Fokus-Karte): dünne Fortschrittslinie + Zähler-Zeile (links Karte x/y, rechts Klassen-Code).
   Die Linie ist aria-hidden — der Text trägt die Information (WCAG). */
/* A native <progress> — the fill follows value/max, no inline style (CSP `style-src :self` drops those).
   Reset the UA appearance, then paint the track + value across engines (WebKit/Blink split the pseudo-elements;
   Firefox uses ::-moz-progress-bar). Purely decorative (aria-hidden); the „n / total" text carries the info. */
.trainer__bar {
  appearance: none;
  -webkit-appearance: none;
  inline-size: 100%;
  block-size: 6px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
  margin-block-start: .4rem;
  display: block;
}
.trainer__bar::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--radius-pill); }
.trainer__bar::-webkit-progress-value { background: var(--brand); border-radius: var(--radius-pill); }
.trainer__bar::-moz-progress-bar { background: var(--brand); border-radius: var(--radius-pill); }
.trainer__progress {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-sm);
  color: var(--text-muted);
  font-size: var(--step--1);
  margin-block: .5rem 1.25rem;
}
.trainer__class { color: var(--text-faint); }

.trainer__prompt {
  margin-block: 1.5rem 2rem;
}

/* The meaning to recall — the largest thing on the card. Content-language text (lexical font, bdi). */
.trainer__gloss {
  font-family: var(--font-lexical, serif);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.7rem);
  line-height: 1.4;
  max-inline-size: 28ch;
  margin-inline: auto;
  margin-block: 0 1rem;
}

.trainer__image {
  max-width: 14rem;
  max-height: 14rem;
  height: auto;
  border-radius: 0.75rem;
}

.trainer__dictation {
  color: var(--text-muted);
  margin-block: 0 0.75rem;
}

.trainer__audio {
  margin-block: 0.75rem;
  width: min(100%, 20rem);
}

/* The productive answer field — big and central; the child types the target word here. */
.trainer__form .field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-block: 0 1.25rem;
}

.trainer__answer {
  font-size: 1.4rem;
  padding: 0.6rem 0.9rem;
  width: min(100%, 22rem);
  text-align: center;
  border: 2px solid var(--border, #ccd);
  border-radius: 0.6rem;
  background: var(--surface, #fff);
  color: var(--text, #112);
}

.trainer__answer:focus-visible {
  outline: 3px solid var(--brand, #2a7);
  outline-offset: 2px;
}

/* Verdict — icon + text, colour is only a REINFORCEMENT (never the sole signal, WCAG 1.4.1). */
.trainer__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  margin-block: 1rem 1.5rem;
}

/* The Smart-Grading hint (why it is off): a full-width line below the verdict, quieter than the bold verdict. */
.trainer__verdict-hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-muted);
}

.trainer__verdict-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.trainer__verdict--correct { color: var(--ok); }
.trainer__verdict--near { color: var(--warn, #9a6a00); }
.trainer__verdict--incorrect { color: var(--text, #112); }

.trainer__solution {
  font-size: 1.15rem;
  margin-block: 0 0.5rem;
}

.trainer__solution-word {
  font-family: var(--font-lexical, serif);
  font-weight: 700;
  margin-inline-start: 0.35rem;
}

.trainer__solution-gloss {
  color: var(--text-muted);
  margin-block: 0 1rem;
}

.trainer__done {
  font-size: 1.15rem;
  font-weight: 700;
  margin-block: 1.5rem 1rem;
}

.trainer__hint,
.trainer__empty {
  color: var(--text-muted);
  margin-block: 1rem 1.5rem;
}

/* Handoff 1a: das Bild als ruhige, gerahmte Bühne über der Bedeutung. */
.trainer__image {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-sm);
  box-shadow: var(--shadow-sm);
}

/* Handoff 1a: die Antwort-Pille — Feld und Prüfen-Knopf in EINEM Rahmen, daumenfreundlich (>44px). */
.trainer__answer-label {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: .02em;
  margin-block-end: .5rem;
}
.trainer__pill {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 4px;
  padding-inline-start: var(--sp-md);
  background: var(--surface);
  border: 2px solid var(--brand);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  max-inline-size: 30rem;
  margin-inline: auto;
}
.trainer__pill .trainer__answer {
  flex: 1;
  min-inline-size: 0;
  border: none;
  background: none;
  font-family: var(--font-lexical);
  font-size: 1.35rem;
  color: var(--text);
  padding-block: .7rem;
}
.trainer__pill .trainer__answer:focus-visible { outline: none; } /* die Pille selbst zeigt den Fokus */
.trainer__pill:focus-within { outline: var(--ring); outline-offset: 2px; }
.trainer__pill .trainer__check {
  flex-shrink: 0;
  min-block-size: 48px;
  border-radius: 16px;
  margin: 0;
}

/* Handoff 1a Feedback: Verdict gestapelt (Kreis-Symbol über Text), Lösung GROSS, Weiter als Daumen-Zeile. */
.trainer--result .trainer__verdict { flex-direction: column; }
.trainer--result .trainer__verdict-icon {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  background: var(--brand-surface);
  font-size: 2.2rem;
}
.trainer--result .trainer__verdict--incorrect .trainer__verdict-icon { background: var(--danger-surface); }
.trainer--result .trainer__solution-word {
  display: block;
  font-family: var(--font-lexical);
  font-size: clamp(2.6rem, 2rem + 3vw, 3.5rem);
  line-height: 1.15;
  margin-block-start: .3rem;
}
.trainer--result .trainer__actions .trainer__next,
.trainer--result .trainer__actions .trainer__again {
  display: block;
  inline-size: min(100%, 30rem);
  margin-inline: auto;
  padding-block: .95rem;
  border-radius: 18px;
  font-size: var(--step-0);
}

/* Beim Üben zählt nur die Karte: auf kleinen Screens weicht das Klassen-Banner — der Klassen-Code steht
   in der Zähler-Zeile der Karte selbst; auf jeder anderen Seite bleibt das Banner unverändert. */
@media (max-width: 40rem) {
  main:has(.trainer) > .classroom-banner { display: none; }
}