/* DE: Themen-Stoebern, Sprachverzeichnis-Filter/Wortzahl und das Lehrkraft-Dashboard.
   EN: Themes browse, language-directory filter/word count and the teacher dashboard. */

/* ============================ Themen browse (Stöbern) ============================ */
.themes-layout{display:grid;grid-template-columns:1fr 16rem;gap:var(--sp-xl);align-items:start;margin-block-start:var(--sp-lg)}
@media (max-width:52rem){.themes-layout{grid-template-columns:1fr}}
.themes-main{min-inline-size:0}
.tile--active{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.theme-words{margin-block-start:var(--sp-xl)}
.theme-words__count{color:var(--text-muted);font-weight:400;font-size:var(--step-0)}

/* ============================ Lehrplan browse (NIED syllabus) ============================ */
.curriculum{margin-block-start:var(--sp-lg)}
.curriculum__title{font-size:var(--step-1);margin-block-end:var(--sp-sm)}
.curriculum-grade{margin-block-start:var(--sp-lg)}
.curriculum-grade__label{font-size:var(--step-0);letter-spacing:.04em;
  color:var(--text-muted);margin-block-end:var(--sp-sm)}
.curriculum-words{margin-block-start:var(--sp-xl)}
.curriculum-words__count{color:var(--text-muted);font-weight:400;font-size:var(--step-0)}
.themes-categories{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-md);box-shadow:var(--shadow-sm);position:sticky;inset-block-start:var(--header-offset)}
.themes-categories h2{font-size:var(--step-1);margin-block:0 var(--sp-sm)}
.category-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.1rem}
.category-link{display:flex;justify-content:space-between;gap:.5ch;text-decoration:none;color:var(--text);
  padding:.3rem .5rem;border-radius:var(--radius-sm)}
.category-link:hover{background:var(--surface-2);color:var(--brand-strong)}
.category-link.is-active{background:var(--brand-surface);color:var(--brand-strong);font-weight:700}
.category-link__count{color:var(--text-muted);font-size:var(--step--1);font-variant-numeric:tabular-nums}

/* ============================ language directory: filter + word count ============================ */
.language-filter__input{inline-size:min(100%,28rem);font:inherit;font-size:var(--step-0);
  margin-block:var(--sp-md) var(--sp-sm);padding:.7rem 1rem;border:2px solid var(--border);
  border-radius:var(--radius-pill);background:var(--surface);color:var(--text)}
.language-filter__input:focus-visible{border-color:var(--brand)}
/* Sort toggle (plain GET links): a small inline segmented control; the active option is brand-filled. */
.lang-sort{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4ch var(--sp-xs);margin-block-end:var(--sp-md);font-size:var(--step--1)}
.lang-sort__label{color:var(--text-muted)}
.lang-sort__option{text-decoration:none;color:var(--link);padding:.15rem .6rem;border-radius:var(--radius-pill)}
.lang-sort__option:hover{text-decoration:underline}
.lang-sort__option[aria-current="true"]{background:var(--brand-surface);color:var(--brand-strong);font-weight:600;text-decoration:none}
.language-card__count{margin:0;color:var(--brand-strong);font-weight:700;font-size:var(--step--1);
  font-variant-numeric:tabular-nums}
/* „noch in Vorbereitung" — registrierte, aber leere Sprache (von der Community zu befüllen, HR3) /
   "in preparation" — a registered but empty language, awaiting the community's own words. */
.language-card__pending{margin:0;color:var(--text-muted);font-size:var(--step--1);font-style:italic;
  display:flex;gap:.4ch;align-items:baseline}
.language-profile__count{color:var(--brand-strong);font-weight:700;font-variant-numeric:tabular-nums;margin:0}

/* ============================ teacher dashboard ============================ */
.group-form{max-inline-size:48rem;display:flex;flex-direction:column;gap:var(--sp-lg)}
.group-form fieldset{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-md);margin:0}
.group-form legend{font-weight:700;padding-inline:.4rem}
.group-form__grid{display:grid;gap:var(--sp-md);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.group-form .field select,.group-form .field input[type=text]{font:inherit;inline-size:100%;padding:.5rem .7rem;
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text)}
.badge--internal{background:var(--surface-2);color:var(--text-muted);margin-inline-start:.5ch}
.preset-cards{display:flex;flex-wrap:wrap;gap:var(--sp-xs);margin-block:var(--sp-xs)}
.preset-card{font:inherit;font-weight:700;cursor:pointer;padding:.5rem 1rem;border-radius:var(--radius-md);
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.preset-card:hover{border-color:var(--brand)}
.preset-card--active{border-color:var(--brand);background:var(--brand-surface);color:var(--brand-strong)}
.share-card__qr{inline-size:fit-content;background:#fff;padding:.6rem;border-radius:var(--radius-md);
  border:1px solid var(--border);margin-block:var(--sp-sm)}
.share-card__qr svg{display:block;inline-size:clamp(120px,40vw,160px);block-size:auto}
.share-card__link{display:flex;flex-wrap:wrap;gap:var(--sp-xs);align-items:center;margin-block:var(--sp-sm)}
.share-link{flex:1;min-inline-size:0;overflow-wrap:anywhere;background:var(--surface-2);
  border:1px dashed var(--border);border-radius:var(--radius-sm);padding:.4rem .6rem;
  font-family:ui-monospace,Menlo,monospace;font-size:var(--step--1)}
.group-detail__preset{color:var(--text-muted)}
/* Handoff 45 — the class's content languages, shown as calm chips (or an honest „all languages" line). */
.class-languages__list{list-style:none;margin:var(--sp-sm) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-xs)}
.class-languages__item{padding:.3rem .8rem;border-radius:var(--radius-pill);background:var(--surface-2);
  border:1px solid var(--border);font-family:var(--font-lexical)}
/* K1-4 — a word on the list whose language the class opted out of is hidden from children (variant 2): the
   teacher sees a calm conflict note + a badge, nothing is removed. Status is never colour-only (the text says it). */
.class-word-list__conflict-note{color:var(--accent);font-size:var(--step--1);margin-block:var(--sp-sm)}
.class-word-list__item--hidden{opacity:.7}
.class-word-list__conflict{padding:.1rem .6rem;border-radius:var(--radius-pill);background:var(--accent-surface);
  color:var(--accent);border:1px solid var(--accent,#e0b050);font-size:var(--step--2,.8rem);font-weight:700}
/* O-6 first-steps: the empty class list invites the first create — a calm card with the path preview. */
.first-steps{max-inline-size:var(--measure);background:var(--brand-surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-lg);display:flex;flex-direction:column;gap:var(--sp-sm);
  align-items:flex-start}
.first-steps__title{margin:0;font-size:var(--step-1)}
.first-steps__preview{margin:0;padding-inline-start:var(--sp-lg);display:flex;flex-direction:column;gap:.3rem}
.first-steps__preview li{list-style:decimal}
/* O-6 example lemmas: pill links that prefill the add-word form — plain GET, no JS. */
.word-suggestions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-xs);color:var(--text-muted)}
.word-suggestions__pill{font-family:var(--font-lexical);font-weight:600;text-decoration:none;
  color:var(--brand-strong);background:var(--brand-surface);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:.15rem .7rem}
.word-suggestions__pill:hover{border-color:var(--brand)}
.pupil-preview__frame{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-lg) var(--sp-xl);text-align:center;max-inline-size:32rem;box-shadow:var(--shadow-sm) inset}
.pupil-preview__lemma{font-size:var(--lemma);line-height:1.25;margin-block:var(--sp-sm)}

/* Redaktion · per-language data-field overview (staff-only developer reference). Real tables (not the
   dl-based .data-grid). Logical properties throughout so RTL example values mirror correctly (HR2). */
.language-fields__index,.language-fields__table{inline-size:100%;border-collapse:collapse;margin-block:var(--sp-md)}
.language-fields__index th,.language-fields__index td,
.language-fields__table th,.language-fields__table td{
  text-align:start;padding:var(--sp-xs) var(--sp-sm);border-block-end:1px solid var(--border);vertical-align:top}
.language-fields__index thead th,.language-fields__table thead th{
  color:var(--text-muted);font-size:var(--step--1);font-weight:600}
.language-fields__group{margin-block:var(--sp-xl)}
.language-fields__field{font-weight:600}
.language-fields__key{color:var(--text-muted);font-size:var(--step--1);font-weight:400;margin-inline-start:.35rem}
.language-fields__raw{font-family:ui-monospace,Menlo,monospace;font-size:var(--step--1);overflow-wrap:anywhere}
.language-fields__gap{color:var(--text-muted)}
.language-fields__ai{color:var(--c-berry-700);font-size:var(--step--1);margin-inline-start:var(--sp-xs);white-space:nowrap}
.language-fields__iso{color:var(--text-muted);font-weight:400;font-size:var(--step--1)}
/* Readable tree for structured JSONB locals (variety_selection, §16 structural_findings) — no raw-JSON wall.
   Everything visible; multi-line findings prose preserved verbatim (pre-wrap, owner: „alles sichtbar"). */
.data-tree{margin:0;font-size:var(--step--1)}
.data-tree--map{margin:0}
.data-tree--map > dt{color:var(--text-muted);font-weight:700;font-size:var(--step--2);margin-block-start:.35rem}
.data-tree--map > dd{margin:0;padding-inline-start:.7rem;border-inline-start:1px solid var(--border)}
.data-tree--list{margin:0;padding-inline-start:1.3rem}
.data-tree--list > li{margin-block:.15rem}
.data-tree__text{white-space:pre-wrap;overflow-wrap:anywhere;max-inline-size:70ch}
.data-tree__bool{font-weight:600}
.data-tree .data-tree{margin-block-start:.15rem}

/* Feature-Katalog per value: each grammatical value + the published example word that realises it (paradigmatic
   dims show one lead word across values — der Adler/des Adlers; inherent dims a word per value; gaps stay „—"). */
.catalog-dim{margin-block:var(--sp-md)}
.catalog-dim__label{font-size:var(--step-0);margin:0 0 var(--sp-2xs)}
.catalog-values{display:grid;grid-template-columns:auto 1fr;gap:.25rem var(--sp-md);margin:0;align-items:baseline;max-inline-size:46rem}
.catalog-values__value{color:var(--text-muted);font-weight:600}
.catalog-values__example{margin:0}
.catalog-values__article{color:var(--text-muted)}
/* The plural realisation shown alongside the singular in a German case row („die Blume / die Blumen"); the
   separator + article are muted so the singular reads as the lead and the plural as the quieter companion. */
.catalog-values__plural{margin-inline-start:var(--sp-2xs)}
.catalog-values__sep{color:var(--text-muted)}
/* Handoff 6a · Beamer-Vollbild: Code + QR wandgroß, hoher Kontrast, sonst nichts. */
.beamer { text-align: center; padding-block: var(--sp-xl); }
.beamer__lead { font-size: var(--step-1); color: var(--text-muted); margin-block-end: var(--sp-lg); }
.beamer__qr { inline-size: fit-content; margin-inline: auto; background: #fff; padding: var(--sp-md);
  border-radius: var(--radius-md); border: 1px solid var(--border); }
.beamer__qr svg { display: block; inline-size: min(56vh, 80vw); block-size: auto; }
.beamer__code { font-size: clamp(3rem, 8vw, 6rem); letter-spacing: .12em; font-weight: 700;
  margin-block: var(--sp-lg) 0; border: 3px dashed var(--brand); border-radius: var(--radius-md);
  inline-size: fit-content; margin-inline: auto; padding: .2em .5em; }
.beamer__url { color: var(--text-muted); overflow-wrap: anywhere; }

/* DE: Der Weg zur ARBEIT an dieser Sprache — abgesetzt vom Einleitungstext, weil er etwas anderes ist als
       die Referenztabelle darunter: dort steht, WAS die Sprache hat, hier geht es weiter zu dem, was noch
       zu tun ist. Ohne den Abstand las es sich als dritter Satz der Einleitung.
   EN: The path to WORKING on this language, set off from the intro because it is a different thing from the
       reference table below: that says WHAT the language has, this leads on to what is left to do. Without
       the space it read as a third sentence of the intro. */
.language-fields__sign-work {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-block: var(--sp-md, 1rem) var(--sp-lg, 1.5rem);
}
.language-fields__sign-work h2 { margin: 0 .5rem 0 0; font-size: var(--step-0, 1rem); }