/* DE: Die „Meine Wörter"-Seite (ADR 0041 Phase 4) — gerätelokale Wortsammlung eines Kindes: reiche Karten
       (Bild + Bedeutung + „Vorlesen"), das „Üben"-Panel (produktives Tipp-Abrufen, clientseitig + offline) und
       die Druckregeln, damit ein Kind seine Wörter für sich mit nach Hause nehmen kann (HR9, kein Server).
       Herausgelöst aus languages.css (Datei-Größen-Ratchet); die Reihenfolge folgt direkt auf „languages",
       damit die Kaskade unverändert bleibt. Der „Merken"-Toggle auf der Klassenliste bleibt in languages.css.
   EN: The „My words" page (ADR 0041 phase 4) — a child's device-local word collection: rich cards (picture +
       meaning + „read aloud"), the „practice" panel (device-local typed recall, client-side + offline), and the
       print rules so a child can take its own words home, for itself (HR9, no server). Split out of
       languages.css (file-size ratchet); loaded right after „languages" so the cascade is unchanged. The „keep"
       toggle on the class list stays in languages.css. */

/* Head: the title with the live count as a chip beside it (design handoff 42). The chip is JS-filled from
   localStorage; :empty hides it with no JS so no bare pill shows — the empty-state card carries the message. */
.student-list__head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.student-list__count{padding:.15rem .7rem;border-radius:var(--radius-pill);background:var(--surface-2);
  border:1px solid var(--border);color:var(--text-muted);font-size:var(--step--1);font-weight:700;line-height:1.6}
.student-list__count:empty{display:none}

/* Empty state as a friendly card (design handoff 42): a big bookmark glyph, a heading, the hint and a „discover
   words" way forward — server-rendered, so a no-JS child still gets a route to collect words (HR3/HR9). */
.student-list__empty{display:grid;justify-items:center;text-align:center;gap:var(--sp-md);
  max-inline-size:34rem;margin-inline:auto;margin-block:var(--sp-md);
  padding:clamp(1.75rem,6vw,3.5rem);border:1px dashed var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.student-list__empty-icon{inline-size:5rem;block-size:5rem;border-radius:var(--radius-lg);background:var(--brand-surface);
  display:grid;place-items:center;font-size:2.5rem;color:var(--brand-strong)}
.student-list__empty-title{font-weight:800;font-size:var(--step-1);margin:0}
.student-list__empty-hint{color:var(--text-muted);margin:0;max-inline-size:42ch}
.student-list__items{list-style:none;padding:0;display:flex;flex-direction:column;gap:.4rem;margin-block:var(--sp-md)}
.student-list__item{display:flex;align-items:center;gap:.6ch;flex-wrap:wrap}
.student-list__item bdi{font-family:var(--font-lexical)}
.student-list__remove{font-size:var(--step--1);color:var(--text-muted)}
.student-list__actions{display:flex;gap:var(--sp-sm);flex-wrap:wrap;margin-block:var(--sp-md)}
/* [hidden] must beat the display-setting rules above (the same cascade trap as .practice [hidden]): the JS sets
   `hidden` on the actions when the list is empty, and on the empty-state card once words exist — without this the
   display:flex/grid would keep showing them. So an empty list shows only the CTA card, a filled list only the
   actions. EN: scoped [hidden] winners for this section (author [hidden] beats an author display rule). */
.student-list__actions[hidden],
.student-list__empty[hidden]{display:none}
.student-list__back{margin-block-start:var(--sp-lg)}

/* „Üben" (ADR 0041 ph4): produktives Tipp-Abrufen der eigenen Wörter, gerätelokal + offline. Während des Übens
   (.is-practising) tritt die Liste zurück und das Übungs-Panel nach vorn. EN: „practice" — device-local typed
   recall; while practising the list steps back and the practice panel takes over. */
.practice{display:none}
/* [hidden] muss die display-Regel von .btn schlagen (Kaskaden-Falle, wie .result-cards [hidden]): sonst zeigt sich
   „Weiter" schon auf einer frischen Karte. EN: [hidden] must beat .btn's display, or „Next" shows on a fresh card. */
.practice [hidden]{display:none}
.student-list.is-practising .student-list__count,
.student-list.is-practising .student-list__items,
.student-list.is-practising .student-list__empty,
.student-list.is-practising .student-list__actions,
.student-list.is-practising > .hint{display:none}
.student-list.is-practising .practice{display:block}

.practice__card{max-inline-size:34rem;margin-block:var(--sp-md);padding:var(--sp-lg);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.practice__progress{color:var(--text-muted);font-size:var(--step--1);margin-block:0 var(--sp-md)}
.practice__prompt{display:flex;flex-direction:column;align-items:center;gap:var(--sp-sm);text-align:center;margin-block-end:var(--sp-md)}
.practice__thumb{inline-size:8rem;block-size:8rem;border-radius:var(--radius-sm);overflow:hidden;background:var(--brand-surface);display:grid;place-items:center}
.practice__thumb img{inline-size:100%;block-size:100%;object-fit:cover}
.practice__gloss{font-size:var(--step-1);margin:0}
.practice__gloss bdi{font-family:var(--font-lexical)}
.practice__play{inline-size:2.5rem;block-size:2.5rem;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);cursor:pointer;font-size:1.1rem}
.practice__play:hover{background:var(--brand-surface);border-color:var(--brand)}
.practice__play:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.practice__form{display:flex;flex-wrap:wrap;gap:var(--sp-sm);align-items:center}
.practice__input{flex:1;min-inline-size:8rem;font-family:var(--font-lexical);font-size:var(--step-1);
  padding:.5rem .75rem;border:2px solid var(--border);border-radius:var(--radius-sm)}
.practice__input:focus{outline:none;border-color:var(--brand)}
.practice__feedback{min-block-size:1.6em;margin-block:var(--sp-md) 0;font-size:var(--step-1);font-weight:700}
.practice__feedback--correct{color:var(--brand-strong)}
.practice__feedback--near{color:var(--accent)}
.practice__feedback--wrong{color:var(--danger,#c0392b)}
.practice__feedback .practice__solution{font-family:var(--font-lexical)}
.practice__stop{margin-block-start:var(--sp-md);color:var(--text-muted)}
.practice__summary{max-inline-size:34rem;margin-block:var(--sp-md);padding:var(--sp-lg);text-align:center;
  background:var(--brand-surface);border-radius:var(--radius-lg)}
.practice__score{font-size:var(--step-2);font-weight:800;margin-block:0 var(--sp-md)}
.practice__summary-actions{display:flex;gap:var(--sp-sm);justify-content:center;flex-wrap:wrap}

/* „Meine Wörter" rich cards (ADR 0041 ph4): each kept word as a card with its picture, first meaning and a
   „read aloud" button, grouped by language — the child sees, hears and (elsewhere) practises its own words.
   The data is fetched per word from the public delivery API; the card starts plain and upgrades in place. */
.student-list__group{margin-block-end:var(--sp-lg)}
.student-list__group-heading{font-size:var(--step-0);margin-block:0 var(--sp-sm);color:var(--text-muted);font-weight:700}
.student-list__cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-sm);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.student-card{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.student-card__link{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit;flex:1;min-inline-size:0}
.student-card__link:hover .student-card__lemma{text-decoration:underline}
.student-card__thumb{flex:none;inline-size:3.25rem;block-size:3.25rem;border-radius:var(--radius-sm,.5rem);
  overflow:hidden;background:var(--brand-surface);display:grid;place-items:center}
.student-card__thumb img{inline-size:100%;block-size:100%;object-fit:cover}
.student-card__text{display:flex;flex-direction:column;gap:.1rem;min-inline-size:0}
.student-card__lemma{font-family:var(--font-lexical);font-weight:600;font-size:var(--step-1)}
.student-card__gloss{color:var(--text-muted);font-size:var(--step--1);overflow-wrap:anywhere}
.student-card__play{flex:none;inline-size:2.25rem;block-size:2.25rem;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);
  cursor:pointer;font-size:1rem;line-height:1}
.student-card__play:hover{background:var(--brand-surface);border-color:var(--brand)}
.student-card__play:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.student-card .student-list__remove{flex:none}

/* Print: a clean word list to take home — drop the on-screen controls (HR9: print/file is the only export,
   for oneself). Cards stay, without the interactive play/remove buttons.
   DE: Das App-Chrome (nav/header/footer/Klassenbanner) stand FRÜHER hier — mit `!important` und ohne
   Kindschafts-Grenze. Diese Datei liegt auf jeder Seite, also versteckte die Regel beim Drucken jeden
   `<header>` und jede `<nav>` IM INHALT gleich mit, auf allen Flächen. Sie steht jetzt einmal und eng gefasst
   in base.css; hier bleibt nur, was wirklich der Schülerliste gehört.
   EN: The app chrome used to be listed here, `!important` and unscoped — and this file loads on every page, so
   it also hid content-owned <header>/<nav> when printing anywhere. It now lives once, scoped, in base.css. */
@media print{
  .student-list__actions,.student-list__device-hint,.student-list__back,
  .student-list__remove,.student-card__play{display:none !important}
  .student-list__item,.student-card{break-inside:avoid}
  .student-list__cards{grid-template-columns:1fr 1fr}
}