/* DE: Lernenden-Startseite und die Wortseite v2 (das ueberarbeitete Wortseiten-Layout).
   EN: Learner home and word page v2 (the reworked word-page layout). */

/* ============================ learner home ============================ */
.home-hero{max-inline-size:46rem;margin-inline:auto;text-align:center;padding-block:var(--sp-lg) 0}
.home-hero__title{font-size:var(--step-4);line-height:1.08;margin:0}
.home-hero__intro{color:var(--text-muted);font-size:var(--step-1);margin:var(--sp-sm) auto 0;max-inline-size:36rem}
.home-search{position:relative;display:flex;align-items:center;gap:var(--sp-xs);max-inline-size:40rem;
  margin:var(--sp-lg) auto 0;background:var(--surface);border:2px solid var(--border);
  border-radius:var(--radius-pill);padding:.4rem .4rem .4rem 1rem;box-shadow:var(--shadow-sm);
  transition:border-color var(--dur) var(--ease)}
.home-search:focus-within{border-color:var(--brand);box-shadow:var(--shadow-sm),0 0 0 3px var(--focus)}
.home-search__icon{font-size:1.2rem;line-height:1;flex:none}
.home-search__input{flex:1;min-inline-size:0;border:0;background:transparent;color:var(--text);
  font:inherit;font-size:var(--step-1);padding-block:.5rem}
.home-search__input:focus{outline:none}
.home-search__submit{flex:none;border-radius:var(--radius-pill)}
.home-hero__advanced{text-align:center;margin-block-start:var(--sp-sm)}

/* live suggestions (progressive enhancement; hidden until the controller fills it). It owns its own
   display:block on purpose: the per-language home nests it as `article.language-profile section … ul`, so the
   broad `article section ul{display:flex;flex-wrap:wrap}` rule (for language-profile content lists) would
   otherwise leak in and lay the suggestions out as wrapping columns instead of one lemma per line. */
.suggestions{position:absolute;inset-inline:0;inset-block-start:calc(100% + var(--sp-2xs));z-index:20;display:block;
  list-style:none;margin:0;padding:var(--sp-2xs);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);text-align:start}
.suggestions[hidden]{display:none}
.suggestion{border-radius:var(--radius-sm)}
.suggestion > a{display:flex;align-items:center;gap:var(--sp-xs);padding:.5rem .7rem;min-block-size:44px;
  text-decoration:none;color:var(--text);border-radius:var(--radius-sm)}
.suggestion[aria-selected=true] > a,.suggestion > a:hover{background:var(--brand-surface);color:var(--brand-strong)}
/* a gate-safe published thumbnail on the leading side; honest absence (no <img>) when the word has none (HR3) */
.suggestion__thumb{flex:0 0 auto;inline-size:40px;block-size:40px;object-fit:cover;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface-2)}
.suggestion__text{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-xs);min-inline-size:0}
.suggestion__lemma{font-weight:600}
/* the typed search string, highlighted inside each suggestion (not the browser's default yellow mark) */
.suggestion__match{background:var(--brand-surface);color:var(--brand-strong);border-radius:2px;
  padding-inline:1px;font-weight:800}
.suggestion[aria-selected=true] .suggestion__match{background:var(--surface);color:var(--brand-strong)}
/* an inflected form routes to its lemma (besser → gut); a fault-tolerant hit is tagged „klanglich ähnlich" */
.suggestion__base{color:var(--text-muted);font-size:var(--step--1);font-weight:400;margin-inline-start:.35ch}
.suggestion__sounds{color:var(--brand-strong);font-size:var(--step--2);font-weight:600;
  background:var(--brand-surface);border-radius:999px;padding:.05em .6ch;margin-inline-start:.35ch;white-space:nowrap}
.suggestion[aria-selected=true] .suggestion__base{color:inherit}
.suggestion[aria-selected=true] .suggestion__sounds{background:var(--surface)}
.suggestion__gloss{color:var(--text-muted);font-size:var(--step--1)}
.suggestion[aria-selected=true] .suggestion__gloss{color:inherit}

.wotd{max-inline-size:46rem;margin-inline:auto;position:relative}
/* dismiss (×, JS-only) sits in the card's top-inline-end corner; restore replaces the card when hidden */
.wotd__dismiss{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;z-index:1;
  inline-size:2.5rem;block-size:2.5rem;border-radius:var(--radius-pill);border:1px solid var(--border);
  background:var(--surface);color:var(--text-muted);font-size:1.3rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.wotd__dismiss:hover{border-color:var(--brand);color:var(--brand-strong)}
.wotd__restore{display:inline-flex;align-items:center;gap:var(--sp-2xs);font:inherit;cursor:pointer;
  color:var(--text-muted);background:var(--surface);border:1px dashed var(--border);
  border-radius:var(--radius-pill);padding:.55rem 1.1rem}
.wotd__restore:hover{border-color:var(--brand);color:var(--brand-strong)}
/* honour the hidden attribute — the display rules above would otherwise override the UA default */
.wotd__dismiss[hidden],.wotd__restore[hidden]{display:none}
.wotd-card{background:linear-gradient(135deg,var(--brand-surface),var(--surface));
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-lg) var(--sp-xl);box-shadow:var(--shadow-sm);text-align:center}
.wotd-card__badge{color:var(--brand-strong);font-weight:700;font-size:var(--step--1);letter-spacing:.04em;margin:0}
.wotd-card__lemma-link{text-decoration:none}
.wotd-card__lemma{display:inline-block;font-family:var(--font-lexical);font-size:var(--step-4);
  font-weight:600;color:var(--text);margin-block:.2rem}
/* The computed article (der/die/das · la) leads the lemma, smaller and muted (mirrors the word hero). */
.wotd-card__article{color:var(--text-muted);font-weight:400;font-size:.5em}
.wotd-card__lemma-link:hover .wotd-card__lemma{text-decoration:underline;text-decoration-thickness:.06em}
.wotd-card__gloss{color:var(--text-muted);margin:.2rem auto 0;max-inline-size:30rem}
/* With a picture the card is a COMPACT ROW: a small thumbnail beside the text, not a tall centred stack. */
.wotd-card:has(.wotd-card__thumb){display:flex;align-items:center;gap:var(--sp-lg);text-align:start}
.wotd-card__body{min-inline-size:0}
.wotd-card:has(.wotd-card__thumb) .wotd-card__gloss{margin-inline:0}
/* The word-of-the-day picture (when it has one) — a compact, gently rounded thumbnail beside the text. */
.wotd-card__thumb{flex:none;display:block;object-fit:cover;inline-size:clamp(5.5rem,22vw,8rem);block-size:auto;max-block-size:9rem;
  object-fit:contain;border-radius:var(--radius-md);border:1px solid var(--border)}
.wotd-card__more{display:inline-block;margin-block-start:var(--sp-sm);font-weight:700}

.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-md);flex-wrap:wrap}
.section-head__link{font-weight:700;text-decoration:none;white-space:nowrap}
.section-head__link:hover{text-decoration:underline}

.tile-grid{list-style:none;display:grid;gap:var(--sp-sm);padding:0;margin-block-start:var(--sp-md);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr))}
.tile{display:flex;align-items:center;gap:var(--sp-sm);text-decoration:none;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:.7rem .9rem;box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.tile:hover{transform:translateY(-2px);border-color:var(--brand)}
.tile__icon{font-size:1.6rem;line-height:1;flex:none}
.tile__label{font-weight:700;flex:1}
.tile__count{color:var(--text-muted);font-size:var(--step--1);font-variant-numeric:tabular-nums}

.letter-grid{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-xs);padding:0;margin-block-start:var(--sp-md)}
.letter-tile{display:inline-grid;place-items:center;inline-size:2.8rem;block-size:2.8rem;text-decoration:none;
  color:var(--text);font-weight:700;font-size:var(--step-0);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-md);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.letter-tile:hover{transform:translateY(-2px);border-color:var(--brand);background:var(--brand-surface)}

.home-shield{margin-block-start:var(--sp-2xl);text-align:center;color:var(--text-muted);font-size:var(--step--1)}
.home-shield p{max-inline-size:none;margin:0}

/* Handoff 4a: die Such-Pille bleibt auch mobil EINE Zeile (Feld + Knopf nebeneinander). */
@media (max-width:40rem){
  .home-search{flex-wrap:nowrap}
  .home-search__submit{flex-shrink:0;min-block-size:48px}
}

/* ============================ word page v2 ============================ */
.breadcrumb{display:flex;flex-wrap:wrap;gap:.5ch;align-items:center;color:var(--text-muted);
  font-size:var(--step--1);margin-block-end:var(--sp-md)}
.breadcrumb a{color:var(--text-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--brand);text-decoration:underline}
.breadcrumb__current{color:var(--text);font-weight:600}

/* Directional glyphs mirror under RTL so „next" points the reading way: the nav arrows (`dir_arrow` helper →
   ← in links) and the breadcrumb chevrons (the aria-hidden › separators). Glyph-only — the flex containers
   already reorder via `dir`. `display:inline-block` so the transform applies to the inline span. */
[dir="rtl"] .dir-arrow,
[dir="rtl"] .breadcrumb > [aria-hidden="true"]{display:inline-block;transform:scaleX(-1)}

.word-hero{display:flex;flex-wrap:wrap;gap:var(--sp-lg);align-items:flex-start;justify-content:space-between;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-lg) var(--sp-xl);box-shadow:var(--shadow-sm)}
.word-hero__body{flex:1 1 16rem;min-inline-size:0}
.word-hero__body .pos{margin-block-end:var(--sp-sm)}
.word-hero__lemma{font-size:var(--lemma);font-weight:600;
  line-height:1.05;letter-spacing:-.01em;margin:0 0 var(--sp-sm);overflow-wrap:break-word;min-inline-size:0}
/* Default: the lexical serif (Charis SIL). ONLY when NO Schulschrift class is on the headword line — so an
   active `.font-DRBuch`/`.font-GS`/… wins over it (same specificity would otherwise let this later-loaded
   rule beat word-page.css). Then BOTH the lemma and the inheriting article render in the Schulschrift, one
   family + baseline (Schaf-Review); without it both stay the lexical serif and are already consistent. */
.word-hero__lemma:not([class*=" font-"]){font-family:var(--font-lexical)}
/* the German article (das Kind) leads the lemma, muted + smaller — a helper word, not the headword itself */
/* The article shares the lemma's font family (the h1 carries the active Schulschrift, the article
   inherits it) and baseline — only quieter and smaller. font-family:inherit makes the intent explicit. */
.word-hero__article{color:var(--text-muted);font-weight:400;font-size:.5em;font-family:inherit;vertical-align:baseline}
/* IPA transcription under the lemma — the phonics baseline. Quiet, with a per-variety chip when there's more
   than one. The transcription itself stays at full contrast so the symbols (æ ŋ ˈ) read clearly. */
.word-hero__ipa{margin:calc(-1 * var(--sp-xs)) 0 var(--sp-sm);display:flex;flex-wrap:wrap;gap:.25rem 1rem;font-size:var(--step-0)}
.word-hero__ipa-variety{color:var(--text-muted);font-size:var(--step--2);font-weight:700;letter-spacing:.03em;margin-inline-end:.25rem}
/* English indefinite article a/an — by sound, not letter (the ⓘ explains why). A quiet didactic line. */
.word-hero__indef{display:flex;align-items:center;gap:.5ch;flex-wrap:wrap;margin:0 0 var(--sp-sm);
  color:var(--text-muted);font-family:var(--font-lexical);font-size:var(--step-0)}
.word-hero__indef strong{color:var(--text);font-weight:700}
/* #324 — Aussprache-Respelling (SKWIRR-əl): leserfreundlich, gedämpftes Label + lesbarer Wert. */
.word-hero__respelling{margin:calc(-1 * var(--sp-2xs)) 0 var(--sp-sm);font-size:var(--step-0);color:var(--text)}
.word-hero__respelling-label{color:var(--text-muted);font-size:var(--step--2);font-weight:700;letter-spacing:.03em;margin-inline-end:.25rem}
/* #328 — L1-Übersetzung im „Übersetzung"-Modus: echtes Lemma der UI-Sprache, gedämpftes Label + Marken-Link. */
.word-hero__translation{margin:calc(-1 * var(--sp-2xs)) 0 var(--sp-sm);font-size:var(--step-1);color:var(--text)}
.word-hero__translation-label{color:var(--text-muted);font-size:var(--step--2);font-weight:700;letter-spacing:.03em;margin-inline-end:.25rem}
.word-hero__translation-link{font-family:var(--font-lexical);font-weight:600;color:var(--brand-strong);text-decoration:none}
.word-hero__translation-link:hover{text-decoration:underline}
/* Per-form IPA in the Formen section (number table + plain list): muted, after the surface, LTR-isolated so
   the transcription reads left-to-right even next to an RTL surface. Variety chip (RP/GA) only when >1. */
.form-ipa{margin-inline-start:.5rem;color:var(--text-muted);font-size:var(--step--1);unicode-bidi:isolate}
.form-ipa__item{margin-inline-end:.5rem}
.form-ipa__variety{font-size:var(--step--2);font-weight:700;letter-spacing:.03em;margin-inline-end:.2rem}

/* Lineatur — a handwriting aid behind the lemma (Schreiblinien / Karo). Display only; the lemma text is
   untouched (Hard Rule 2). CSS-drawn (the prototype's approach) until real Schreiblinien assets ship. */
.lineatur--lines,.lineatur--grid{
  display:inline-block;padding:.28em .4em;border-radius:var(--radius-sm);
  background-color:var(--surface-2);background-repeat:no-repeat}
.lineatur--lines{
  --rule:color-mix(in oklab,var(--brand) 55%,transparent);
  --rule-soft:color-mix(in oklab,var(--brand) 30%,transparent);
  background-image:linear-gradient(var(--rule),var(--rule)),
    repeating-linear-gradient(90deg,var(--rule-soft) 0 7px,transparent 7px 14px),
    linear-gradient(var(--rule),var(--rule));
  background-size:100% 2px,100% 1px,100% 2px;
  background-position:0 .28em,0 50%,0 calc(100% - .28em)}
.lineatur--grid{
  --rule:color-mix(in oklab,var(--brand) 28%,transparent);
  background-image:repeating-linear-gradient(0deg,var(--rule) 0 1px,transparent 1px .92em),
    repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px .92em)}
/* The image column is constrained to the picture's display width — never the image's larger INTRINSIC
   width, which `flex:0 0 auto` (basis auto) used to adopt, starving the lemma column so a long word like
   „Eichhörnchen" overflowed under the picture. The picture stays inline-end (right on LTR pages) and
   stacks below on narrow screens (see the @media block). */
.word-hero__media{flex:0 0 auto;inline-size:min(220px,40%)}
.word-image{max-inline-size:min(100%,220px);height:auto;display:block;
  border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff}
.word-image__ai{margin:.35rem 0 0;display:inline-flex;align-items:center;gap:.35ch;font-size:var(--step--2);
  font-weight:700;color:var(--text-muted)}
.word-image--pending{display:grid;place-items:center;gap:.75rem;inline-size:clamp(150px,28vw,210px);aspect-ratio:1;
  background:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 10px,transparent 10px,transparent 20px);
  border:2px dashed var(--border);color:var(--text-muted);font-size:var(--step--1);text-align:center;padding:1rem}

/* content sections as cards — but NOT the reused home blocks (search hero, word-of-the-day, discover
   tiles). On /languages/:iso those sit as article > section and would otherwise get a card around them,
   boxing the search pill / the green WoTD card / the tiles (a box-in-box) — unlike the home page, where
   the same blocks sit card-less on the page background. Excluding them makes both pages render them the
   same. (The article > section > h2 rules below still apply to them on purpose: they suppress the
   decorative underline on the centred search heading.) */
/* DE: `.reserved-circle` reiht sich in die Ausnahmeliste ein, weil dieser Kasten sich ABSICHTLICH vom Rest
       abheben soll — er meldet eine Zuständigkeit, keine gewöhnliche Sektion. Über Spezifität dagegen
       anzukämpfen (drei `:not()` schlagen eine einzelne Klasse) hieße, den Konflikt zu verstecken statt ihn
       zu benennen. Dass diese Liste wächst, ist ein Hinweis: die generische Regel greift zu weit — siehe die
       offene Aufgabe zum Designsystem.
   EN: `.reserved-circle` joins the exclusion list because that box is MEANT to stand apart — it reports a
       matter of authority, not an ordinary section. Fighting this with specificity (three `:not()` beat a
       single class) would hide the conflict instead of naming it. That this list keeps growing is a signal:
       the generic rule reaches too far — see the open design-system task. */
article > section:not(.home-hero):not(.wotd):not(.home-discover):not(.reserved-circle){
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-lg) var(--sp-xl);box-shadow:var(--shadow-sm)}
/* Abstand getrennt von der Optik: (0,0,2) statt (0,4,2). Warum: sign_video_css_test.rb */
article > section:where(:not(.home-hero):not(.wotd):not(.home-discover):not(.reserved-circle)){margin-block-start:var(--sp-lg)}
article > section > h2{margin-block-start:0}
article > section > h2::after{display:none}

/* chips (themes / categories / keywords) */
.chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-xs);padding:0;margin:0}
.chip{display:inline-block;padding:.3rem .8rem;border-radius:var(--radius-pill);font-weight:600;
  font-size:var(--step--1);background:var(--surface-2);border:1px solid var(--border);color:var(--text);text-decoration:none}
a.chip:hover{border-color:var(--brand);color:var(--brand-strong)}
.chip--theme{background:var(--brand-surface);color:var(--brand-strong);border-color:transparent}
.chip--category{background:var(--accent-surface);color:var(--accent);border-color:transparent}
.chip--keyword{background:var(--surface-2);color:var(--text-muted)}
.chip__count{margin-inline-start:.4em;font-size:var(--step--2);opacity:.7;font-variant-numeric:tabular-nums}
.keyword-cloud{gap:var(--sp-sm);margin-block-start:var(--sp-md)}
.browse-crosslinks{display:flex;flex-wrap:wrap;gap:var(--sp-md)}
.hierarchy-tree,.hierarchy-children{list-style:none;margin:0;padding-inline-start:0}
.hierarchy-children{padding-inline-start:var(--sp-md);border-inline-start:1px solid var(--border)}
.hierarchy-item{margin-block:.2rem}
.hierarchy-node{display:inline-flex;align-items:center;gap:.4em;text-decoration:none}
.hierarchy-node:hover .hierarchy-node__label{text-decoration:underline}
.belongs__group{margin-block:.5rem}
.belongs__group h3{font-size:var(--step--1);color:var(--text-muted);margin-block:.4rem .3rem}

@media (max-width:40rem){
  .word-hero{flex-direction:column}.word-hero__body{flex-basis:auto} /* Basis wäre eine Höhe */
  .word-hero__media{align-self:center;inline-size:min(220px,100%)}  /* gestapelt ohne die 40-%-Deckelung — die gilt nur NEBEN dem Text */
}

/* Handoff 4a · Mobil: A–Z als horizontal scrollende Daumen-Reihe (statt 29-Kachel-Wand) und
   Themen-Kacheln zweispaltig. Steht NACH den Basisdefinitionen — die Kaskade entscheidet hier. */
@media (max-width:40rem){
  .letter-grid{flex-wrap:nowrap;overflow-x:auto;padding-block-end:.4rem;-webkit-overflow-scrolling:touch}
  .letter-grid li{flex-shrink:0}
  .letter-tile{inline-size:46px;block-size:46px}
  .tile-grid{grid-template-columns:1fr 1fr}
}