/* DE: Wortseite: Formen/Bedeutungslisten, Register/CEFR/Haeufigkeit, Silbenboegen, generisches Suchformular.
   EN: Word page: forms/meaning lists, register/CEFR/frequency, Silbenboegen, generic search form. */

/* ============================ components (existing markup hooks) ============================ */
/* word page */
article[lang]{display:block}
article > h1{font-family:var(--font-lexical);font-size:var(--lemma);font-weight:600;
  letter-spacing:-.01em;line-height:1.05;margin-block:var(--sp-sm)}
.pos{display:inline-block;font-weight:700;color:var(--accent);background:var(--accent-surface);
  padding:.3rem .8rem;border-radius:var(--radius-pill);font-size:var(--step-0)}
/* POS-Zeile: das Montessori-Wortartensymbol steht neben der Wortart-Pille (Bedeutung im alt-Text, WCAG). */
.pos-line{display:inline-flex;align-items:center;gap:.5ch}
.word-symbol--montessori{inline-size:1.4rem;block-size:1.4rem;flex:none}
/* Genus-Kreis inline neben dem Artikel (der Reset setzt img{display:block} → hier zurück auf inline-block). */
.word-symbol--gender{display:inline-block;inline-size:1.5rem;block-size:1.5rem;vertical-align:middle;margin-inline-end:.35ch}
/* FRESCH-Strategiezeichen: eigene kleine Zeile unter der Wortart; ein oder mehrere Zeichen nebeneinander. */
.word-hero__strategies{display:flex;flex-wrap:wrap;gap:.5ch;align-items:center;margin-block:var(--sp-2xs)}
.word-symbol--fresch{inline-size:1.9rem;block-size:1.9rem;flex:none}
.properties{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2xs);padding:0;margin-block:var(--sp-2xs)}
.property{font-size:var(--step--1);font-weight:600;color:var(--text-muted);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:.2rem .7rem}
.word-card{background:linear-gradient(135deg,var(--brand-surface),
    color-mix(in oklab,var(--accent-surface) 55%,var(--surface)));
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-lg);box-shadow:var(--shadow-sm)}

/* forms + senses lists */
article section ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-sm)}
article section[aria-labelledby="forms-heading"] li{
  font-family:var(--font-lexical);font-size:var(--step-1);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:.5rem .9rem;box-shadow:var(--shadow-sm)}
article section[aria-labelledby="meanings-heading"] ul{flex-direction:column;
  max-inline-size:var(--measure)}
article section[aria-labelledby="meanings-heading"] li{
  background:var(--surface);border-inline-start:.28rem solid var(--brand);
  border-radius:var(--radius-sm);padding:.7rem 1rem}
/* the gloss + its long form are content-language text → lexical font so clicks/tone marks render (HR2) */
.meaning__gloss{font-family:var(--font-lexical)}
.meaning__long{display:block;margin-block-start:.2rem;color:var(--text-muted);font-size:var(--step--1);font-family:var(--font-lexical)}
/* #325 — Register/Gebrauchskennzeichnung neben der Bedeutung (nur markierte). Kleines Pill, gedämpft; die
   derbe/Tabu-Variante nutzt die Aufmerksamkeitsfarbe (wie .pos) + ⚠ — Status nie nur über Farbe (Label trägt ihn). */
.meaning__register{display:inline-block;margin-inline-start:.5ch;font-size:var(--step--2);font-weight:600;
  color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:.05rem .6ch;vertical-align:baseline;white-space:nowrap}
.meaning__register--careful{color:var(--accent);background:var(--accent-surface);border-color:transparent}
.meaning__register-mark{font-weight:700}
/* „Kann anstößig sein"-Marker: nur sichtbar, wenn die Lehrkraft anstößige Bedeutungen eingeblendet hat. Icon +
   Text (nie nur Farbe, WCAG), im Warn-/danger-Ton, als eigene Zeile über der Bedeutung. */
.meaning--offensive{position:relative}
.meaning__offensive-mark{display:inline-block;margin-block-end:.15rem;font-size:var(--step--2);font-weight:700;
  color:var(--danger);background:var(--danger-surface);border-radius:var(--radius-pill);padding:.05rem .7ch}

/* Kindersichere Ausblendung eines komplett anstößigen Worts: ruhige, zentrierte Notiz, kein Lemma. */
.offensive-hidden{max-inline-size:34rem;margin:3rem auto;text-align:center}
.offensive-hidden__icon{font-size:2.4rem;margin:0 0 .5rem}
.offensive-hidden__heading{margin:0 0 .5rem}
.offensive-hidden__note{color:var(--text-muted);margin:0 0 1.5rem}
/* #322 — CEFR-Niveau-Badge an der Bedeutung (A1–C2), nur wenn gesetzt; Marken-Farbe, klar als Niveau lesbar. */
.meaning__cefr{display:inline-block;margin-inline-start:.5ch;font-size:var(--step--2);font-weight:700;
  color:var(--brand-strong);background:var(--brand-surface);border-radius:var(--radius-pill);
  padding:.05rem .55ch;vertical-align:baseline;letter-spacing:.02em}
/* #323 — Häufigkeit „mit Strichen" (1–5): kleine Balken, gefüllt = Marken-Farbe; Wert steht im aria-label. */
.meaning__frequency{display:inline-flex;align-items:center;gap:.13rem;margin-inline-start:.5ch;vertical-align:baseline}
.meaning__frequency-bar{inline-size:.2rem;block-size:.7em;border-radius:.06rem;background:var(--surface-2);border:1px solid var(--border)}
.meaning__frequency-bar.is-on{background:var(--brand);border-color:var(--brand)}
/* No meaning recorded yet — the honest empty-state (same muted, italic treatment as other empty-states). */
.meanings-pending{color:var(--text-muted);font-style:italic;margin:0}

/* Silbenbögen — German school fonts carry width-fitted arc glyphs (^NN); rendered by
   SyllableArcsComponent. Two alternating colours (red/blue, Silbenmethode). Served from
   public/fonts (not fingerprinted), so the @font-face url() stays stable. */
@font-face{font-family:"GS";src:url("/fonts/GS-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"GS";src:url("/fonts/GS-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"SAS";src:url("/fonts/SAS-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"SAS";src:url("/fonts/SAS-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"VA";src:url("/fonts/VA-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"VA";src:url("/fonts/VA-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"DRBuch";src:url("/fonts/DRBuch-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"DRBuch";src:url("/fonts/DRBuch-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"DRHand";src:url("/fonts/DRHand-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"DRHand";src:url("/fonts/DRHand-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"LA";src:url("/fonts/LA-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"LA";src:url("/fonts/LA-Bold.woff") format("woff");font-weight:700;font-display:swap}

/* The school fonts draw each arc as an OpenType ligature on the `^NN` code; enable common AND
   discretionary ligatures explicitly so every font's arcs fire (not just the default-on ones). */
/* Das Silbenhaus (Backtick+9-Ligatur der Schulschrift) sitzt als Präfix vor dem Wort; kleiner Abstand danach. */
.syllable-house{margin-inline-end:.15ch}
.syllables{line-height:1.7;font-variant-ligatures:common-ligatures discretionary-ligatures contextual;
  font-feature-settings:"liga" 1,"dlig" 1,"calt" 1}
.font-GS{font-family:"GS",var(--font-lexical)}
.font-SAS{font-family:"SAS",var(--font-lexical)}
.font-VA{font-family:"VA",var(--font-lexical)}
.font-DRBuch{font-family:"DRBuch",var(--font-lexical)}
.font-DRHand{font-family:"DRHand",var(--font-lexical)}
.font-LA{font-family:"LA",var(--font-lexical)}
.syllable-color1{color:var(--syllable-1)}
.syllable-color2{color:var(--syllable-2)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.surface-tokens .token{display:inline-block}
.surface-tokens .token + .token{margin-inline-start:.35ch}

/* search — the generic stacked-label search form (advanced search etc.). The home hero search is a
   bespoke pill (.home-search) that ALSO carries role="search" for the a11y landmark; without the :not()
   guards these element/attribute selectors (specificity 0,1,1) would beat the component classes (0,1,0)
   and drag the icon to the bottom (align-items:end), wrap the row, and re-border the input. */
form[role="search"]:not(.home-search){display:flex;flex-wrap:wrap;gap:var(--sp-sm);align-items:end;
  margin-block:var(--sp-lg);max-inline-size:42rem}
form[role="search"]:not(.home-search) label{flex-basis:100%;font-weight:600}
input[type="search"]:not(.home-search__input){flex:1;min-inline-size:14rem;font:inherit;
  padding:.7rem .9rem;border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);color:var(--text)}
form[role="search"] input[type="submit"]{font:inherit;font-weight:700;cursor:pointer;
  padding:.7rem 1.2rem;border:1px solid transparent;border-radius:var(--radius-md);
  background:var(--brand);color:var(--text-on-brand)}
form[role="search"] input[type="submit"]:hover{background:var(--brand-strong)}
section[aria-labelledby="search-heading"] > ul{list-style:none;display:flex;
  flex-direction:column;gap:var(--sp-xs);margin-block-start:var(--sp-lg)}
section[aria-labelledby="search-heading"] > ul li{display:flex;align-items:baseline;gap:var(--sp-sm)}
section[aria-labelledby="search-heading"] > ul a{font-family:var(--font-lexical);
  font-size:var(--step-1);text-decoration:none;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-md);padding:.5rem .9rem;color:var(--text)}
section[aria-labelledby="search-heading"] > ul a:hover{border-color:var(--brand)}
.hint{color:var(--text-muted);font-size:var(--step--1);font-style:italic}

/* DE: Morphem-Segmentierung (Prefix·Stamm·Infix·Suffix) — didaktisches Gegenstück zu den Silbenbögen.
       Diakritika-sicher: NIE text-decoration:underline, weil ḓ ṋ ṱ Marken UNTER der Grundlinie tragen, die
       eine Unterstreichung durchschneiden würde (HR2). Betonung stattdessen über Farbe + Gewicht.
   EN: Morpheme segmentation (prefix·stem·infix·suffix) — didactic counterpart to the syllable arcs.
       Diacritic-safe: NEVER text-decoration:underline, because ḓ ṋ ṱ carry below-base marks a rule would
       strike through (HR2). Emphasis via colour + weight instead. */
.morphemes{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.15rem .3rem;margin:0}
.morphemes__sep{align-self:center;color:var(--text-muted);font-weight:400;user-select:none}
.morpheme{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;text-align:center}
.morpheme__surface{font-family:var(--font-lexical);font-size:var(--step-0)}
/* affixes carry the meaning — tint them in the noun's class colour (--class-hue, set by an nc-class-<key> class on the
   .morphemes container) when given, else the brand accent; the stem stays neutral so the affixes stand out. No
   underline anywhere (see above). */
.morpheme--prefix .morpheme__surface,
.morpheme--infix .morpheme__surface,
.morpheme--suffix .morpheme__surface{color:var(--class-hue,var(--brand-strong));font-weight:700}
.morpheme--stem .morpheme__surface{color:var(--text);font-weight:600}
.morpheme__gloss{margin-block-start:.15rem;color:var(--text-muted);font-size:var(--step--2);font-style:normal}


/* Articulation strip (ADR 0069): under the IPA, one <details> per sound — unfolds a mouth/tongue diagram +
   plain-language description + audio. Native <details> = keyboard-operable, works without JS. The disclosure
   state is native; colour is never the only cue (the summary chip has a border + the ▸/▾ marker). */
.artic-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-block:.35rem 0}
.artic-strip__cue{font-size:var(--step--2,.8rem);color:var(--text-muted)}
.artic{flex:none}
.artic[open]{flex-basis:100%} /* an opened sound drops its panel onto its own row — no overlap with neighbours */
.artic__symbol{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.25rem;
  font-family:var(--font-lexical);font-size:var(--step--1,.9rem);
  padding:.1rem .5rem;border:1px solid var(--border,#ddd);border-radius:999px;background:var(--surface,#fff)}
.artic__symbol::-webkit-details-marker{display:none}
.artic__symbol::after{content:"\25B8";color:var(--text-muted);font-size:.8em} /* ▸ collapsed */
.artic[open] .artic__symbol::after{content:"\25BE"} /* ▾ open */
.artic__symbol:hover{border-color:var(--brand,#2f7a4d)}
.artic__symbol:focus-visible{outline:2px solid var(--focus,#2684ff);outline-offset:2px}
.artic__panel{margin-block-start:.4rem;padding:.6rem .75rem;max-inline-size:22rem;
  border:1px solid var(--border,#ddd);border-radius:var(--radius-sm);background:var(--surface,#fff)}
.artic__diagram{display:block;max-inline-size:9rem;block-size:auto;margin-block-end:.4rem}
.artic__pending{margin:0 0 .4rem;color:var(--text-muted);font-size:var(--step--2,.8rem);font-style:italic}
.artic__desc{margin:0;color:var(--text);font-size:var(--step--1,.9rem)}
.artic__audio{display:inline-flex;align-items:center;gap:.3rem;margin-block-start:.5rem;
  color:var(--brand-strong,#2f7a4d);font-size:var(--step--1,.9rem);font-weight:600;text-decoration:none}
.artic__audio:hover{text-decoration:underline}
.artic__audio:focus-visible{outline:2px solid var(--focus,#2684ff);outline-offset:2px;border-radius:2px}

/* „Merken"-Knopf auf der Wortseite (B2, Slice 1): sammelt das Wort in die gerätelokale „Meine Wörter"-Liste.
   Progressive Enhancement — der Knopf startet [hidden], der student-list-Controller blendet ihn ein. */
.word-memory{margin-block:var(--sp-sm) var(--sp-md)}
.word-memory [hidden]{display:none}
.word-memory__toggle{display:inline-flex;align-items:center;gap:.5ch}
.word-memory__toggle[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--text-on-brand)}
.word-memory__icon{font-size:1.05em;line-height:1}

/* --- Wie die Gebärde gemacht wird (Words::SignParametersComponent, ADR 0105) -------------------------------
   DE: Eine Beschreibungsliste, keine Kacheln: Parameter und Wert gehören paarweise zusammen. Leere Parameter
       erscheinen gar nicht — eine Zeile „noch zu erfassen" würde etwas über die Sprache behaupten, das
       niemand behauptet hat (HR3). Die Notation steht abgesetzt und nennt immer ihr System.
   EN: A description list, not tiles: parameter and value belong in pairs. Empty parameters do not appear at
       all — a „to be recorded" row would claim something about the language nobody claimed. */
.sign-formation { margin-block: var(--sp-lg, 2rem); }
.sign-formation__list { margin: 0; display: grid; gap: .1rem; }
.sign-formation__row {
  display: grid; grid-template-columns: 1fr; gap: 0 1rem;
  padding-block: .5rem; border-block-end: 1px solid var(--border);
}
@media (min-width: 34rem) { .sign-formation__row { grid-template-columns: 11rem 1fr; } }
.sign-formation__row:last-child { border-block-end: 0; }
/* DE: Der farbige Streifen je Gruppe (Rückmeldung aus dem NSL-Prüfkreis: sehr visuell orientiert). Fünf
       gleich aussehende Zeilen bekommen einen Ankerpunkt, den man nicht lesen muss. Ohne gesetzte Gruppe
       bleibt er unsichtbar statt grau — ein grauer Streifen an einer Zeile ohne Gruppe sähe aus wie eine
       sechste Farbe. Farbe trägt nie allein: der Gruppenname steht daneben (WCAG 1.4.1).
   EN: The coloured edge per group: five identical-looking rows gain an anchor nobody has to read. Without a
       group set it stays invisible rather than grey, or it would read as a sixth colour. Colour never carries
       alone — the group's name stands beside it. */
.sign-formation__row {
  border-inline-start: 4px solid var(--sign-param-hue, transparent);
  padding-inline-start: var(--sp-sm, .75rem); margin-inline-start: -.75rem;
}
.sign-formation__term { font-weight: 600; color: var(--text-muted, #555); margin: 0; }
/* DE: Zeichnung NEBEN dem Text, nicht darüber: gelesen wird das Paar „so sieht es aus — so heißt es", und
       untereinander zerfällt es in zwei Angaben. Weißer Grund in jedem Thema, weil die Strichzeichnungen
       schwarz auf transparent sind und auf dunklem Grund verschwänden — ein Lesbarkeits-, kein Geschmacksfall
       (dieselbe Begründung wie auf der Übernahmefläche).
   EN: The drawing BESIDE the text rather than above: what is read is the pair „this is what it looks like —
       this is what it is called", and stacked it falls apart into two facts. White ground in every theme,
       because the line drawings are black on transparency and would vanish on a dark one. */
.sign-formation__value { margin: 0; display: flex; align-items: center; gap: .6rem; }
/* DE: Wo es Zeichnungen gibt, bekommt die Bildspalte eine feste Breite — sonst begänne der Text mal hier und
       mal dort, je nachdem ob die Zeile ein Bild hat. Die leere Zelle zeigt NICHTS: ein Rahmen ohne Bild sähe
       aus wie eine fehlende Datei, und eine Gebärde ohne Zeichnung ist ein vollständiger Datensatz (HR3).
   EN: Where drawings exist the picture column gets a fixed width, or the text would start in a different place
       depending on whether a row has one. The empty cell shows NOTHING: a frame without a picture would look
       like a missing file, and a sign without a drawing is a complete record. */
.sign-formation__list--illustrated .sign-formation__value { display: grid; grid-template-columns: 4.4rem 1fr; }
/* Der Text belegt die zweite Spalte FEST — sonst rutscht er ohne Bild in die erste und die Ausrichtung ist
   wieder dahin, was der ganze Zweck der reservierten Spalte war.
   EN: The text takes column two explicitly, or without a picture it slides into the first and the alignment
   the reserved column exists for is gone again. */
.sign-formation__list--illustrated .sign-formation__text { grid-column: 2; }
.sign-formation__text { display: flex; flex-direction: column; gap: .1rem; }
/* DE: Der Verweis um die Zeichnung — er nimmt keinen eigenen Platz, aber einen sichtbaren Fokusrahmen, denn
       er ist ein Tastaturziel (WCAG 2.4.7). `display: block`, sonst setzt die Zeilenhöhe des Inline-Kastens
       ein paar Pixel unter das Bild.
   EN: The link around the drawing takes no room of its own but a visible focus ring, being a keyboard target;
       `display: block` or the inline box's line-height adds a few pixels under the picture. */
.sign-formation__picture-link { display: block; flex: 0 0 auto; border-radius: var(--radius-sm, .6rem); }
.sign-formation__picture {
  inline-size: 4rem; block-size: 4rem; object-fit: contain; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm, .6rem); padding: .15rem;
}
.sign-formation__label { font-weight: 600; }
.sign-formation__desc { font-size: var(--step--1, .9rem); color: var(--text-muted, #555); }

.sign-formation__notation {
  margin-block-start: .9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
}
.sign-formation__system { font-size: var(--step--1, .9rem); color: var(--text-muted, #555); }
.sign-formation__code { font-family: var(--font-mono); font-size: 1.15rem; }