/* DE: Suche: die Filter-Leiste und die erweiterte Suche (Handoff-Redesign).
   EN: Search: the filter rail and the advanced search (handoff redesign). */

/* ============================ search filter rail ============================ */
@media (max-width:52rem){
 /* results before filters on mobile */
}
.active-filters{display:flex;flex-wrap:wrap;gap:var(--sp-2xs);align-items:center}
.chip--removable{display:inline-flex;align-items:center;gap:.4ch;background:var(--brand);
  color:var(--text-on-brand);border-color:transparent}
.chip--removable .chip__x{font-size:1.15em;line-height:1;opacity:.85}
/* Solid-brand "active filter" pills (per the handoff): hover darkens to brand-strong like the primary
   button, a clear "click to remove" affordance. `a.` matches a.chip:hover's specificity so this wins. */
a.chip--removable:hover{background:var(--brand-strong);color:var(--text-on-brand);border-color:transparent}
a.chip--removable:hover .chip__x{opacity:1}
.active-filters__clear{font-size:var(--step--1);font-weight:600;margin-inline-start:auto}
.filter-group{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2)}
.filter-group > summary{cursor:pointer;padding:.5rem .7rem;font-weight:700;font-size:var(--step--1);list-style-position:inside}
/* inset focus ring so the rail's overflow:hidden can't clip the topmost group's indicator (WCAG 2.4.7) */
.filter-group > summary:focus-visible{outline:var(--ring);outline-offset:-2px}
.filter-group__body{display:flex;flex-direction:column;gap:var(--sp-sm);padding:.7rem;border-block-start:1px solid var(--border)}
.filter-group .field{display:flex;flex-direction:column;gap:.25rem}
.filter-group .field label{font-size:var(--step--1);color:var(--text-muted);font-weight:600}
.filter-group .field input,.filter-group .field select{font:inherit;padding:.4rem .6rem;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);inline-size:100%}
.search-main{min-inline-size:0}

/* ===================== advanced search (handoff redesign) ===================== */
.search-hero{max-inline-size:46rem;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--sp-sm)}
.search-hero__lang{align-self:center;display:inline-flex;align-items:center;gap:.5ch}
.search-hero__lang-label{font-size:var(--step--1);font-weight:700;color:var(--text-muted)}
.search-hero__lang select{font:inherit;padding:.4rem .8rem;border:1px solid var(--border);
  border-radius:var(--radius-pill);background:var(--surface);color:var(--text)}
.search-pill{display:flex;align-items:center;gap:var(--sp-xs);background:var(--surface);border:2px solid var(--border);
  border-radius:var(--radius-pill);padding:.35rem .35rem .35rem .9rem;box-shadow:var(--shadow-sm)}
.search-pill:focus-within{border-color:var(--brand);box-shadow:var(--shadow-sm),0 0 0 2px var(--focus)}
.search-pill__icon{font-size:1.2rem;line-height:1;flex:none}
.search-pill__input{flex:1;min-inline-size:0;border:0;background:transparent;color:var(--text);font-size:var(--step-1);padding:.4rem .2rem}
.search-pill__input:focus{outline:none}
.search-pill__submit{flex:none;border-radius:var(--radius-pill)}
.search-didyoumean{color:var(--text-muted);min-block-size:1.5em;margin:0}
.search-didyoumean__link{font-weight:800;color:var(--brand-strong);text-decoration:underline;text-underline-offset:2px;margin-inline:.3ch}

/* „Wurzel-Treffer" — root-family results for an Abjad language (Arabic). */
.search-roots{max-inline-size:var(--measure,42rem);margin:var(--sp-md) auto 0;padding:var(--sp-md);
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.search-roots__head{margin:0 0 .2em;font-size:1.05rem}
.search-roots__hint{margin:0 0 var(--sp-sm);color:var(--text-muted);font-size:.9rem}
.search-roots__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-xs)}
.search-roots__item{display:inline-flex;align-items:baseline;gap:.4ch;padding:.3rem .7rem;
  border:1px solid var(--border);border-radius:999px;background:var(--bg)}
.search-roots__link{font-weight:800;font-size:1.2rem;color:var(--brand-strong);text-decoration:none}
.search-roots__link:hover,.search-roots__link:focus-visible{text-decoration:underline;text-underline-offset:2px}
.search-roots__root{color:var(--text-muted);font-size:.85rem;letter-spacing:.04em}

/* Auth pages (sign-in, magic-link, registration, password reset) — a centred card with styled fields.
   The views already use .auth / .auth-form / .field / .auth__alt; only the card + inputs need styling
   (labels are styled globally by `.field > label`; .btn is styled globally). */
.auth{max-inline-size:26rem;margin-inline:auto;margin-block-end:var(--sp-2xl);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-lg);box-shadow:var(--shadow-sm)}
.auth h1{font-size:var(--step-1);margin-block-end:var(--sp-sm)}
.auth > p,.auth__intro{color:var(--text-muted);max-inline-size:none}
.auth-form{display:flex;flex-direction:column;gap:var(--sp-md);margin-block-start:var(--sp-md)}
.auth-form input:not([type=submit]):not([type=checkbox]),.auth-form select{font:inherit;inline-size:100%;
  padding:.55rem .8rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
.auth-form .field--check{flex-direction:row;align-items:center;gap:.5ch}
.auth-form .btn{inline-size:100%;justify-content:center;margin-block-start:var(--sp-xs)}
.auth__alt{color:var(--text-muted);font-size:var(--step--1);margin-block-start:var(--sp-sm)}
.auth__alt a{color:var(--brand-strong);font-weight:600}

.pos-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-xs);margin-block:var(--sp-lg) var(--sp-md)}
.pos-pill{display:inline-flex;align-items:center;gap:.5ch;text-decoration:none;color:var(--text);font-weight:700;
  font-size:var(--step--1);padding:.45rem .9rem;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface)}
.pos-pill:hover{border-color:var(--brand);color:var(--brand-strong)}
.pos-pill--active{background:var(--brand);color:var(--text-on-brand);border-color:transparent;font-weight:800}
/* keep the active (green) pill's label legible on hover — otherwise it goes green-on-green */
.pos-pill--active:hover{background:var(--brand-strong);color:var(--text-on-brand);border-color:transparent}
.pos-pill__count{opacity:.75;font-variant-numeric:tabular-nums}
/* full opacity on the active pill so the count keeps AA contrast on the brand fill (WCAG 1.4.3) */
.pos-pill--active .pos-pill__count{opacity:1}
/* --focus (blue) and --brand (green) have near-equal luminance, so a focus ring drawn on the brand fill is
   invisible. For brand-coloured controls add a surface-colour ring hugging the element, so the global offset
   ring stays clearly separated from the brand (WCAG 2.4.13 Focus Appearance). */
.pos-pill--active:focus-visible,.chip--removable:focus-visible,.search-pill__submit:focus-visible{box-shadow:0 0 0 2px var(--surface)}

.search-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--sp-xl);align-items:start;margin-block-start:var(--sp-sm)}
@media (max-width:52rem){
  .search-grid{grid-template-columns:1fr}
  /* U-4: full-width ABOVE the results (DOM order — the rail is first): the filters were buried under
     60 result cards. The groups collapse by default, so the rail costs only a few summary lines. */
  .search-rail{position:static;max-block-size:none}
}
/* The filter rail sticks beside the results on desktop. It must cap its height to the viewport and scroll its
   body INTERNALLY — otherwise a rail taller than the window sticks at the top with its lower sections clipped
   (overflow:hidden) and unreachable. The head stays pinned; only the body scrolls. On mobile it flows normally. */
.search-rail{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);position:sticky;inset-block-start:var(--header-offset);
  max-block-size:calc(100dvh - 6rem);overflow:hidden;display:flex;flex-direction:column}
.search-rail__head{display:flex;align-items:center;gap:.5ch;margin:0;padding:.6rem .8rem;font-weight:800;
  background:var(--surface-2);border-block-end:1px solid var(--border);flex:none}
.search-rail__body{display:flex;flex-direction:column;gap:var(--sp-sm);padding:var(--sp-sm);
  overflow-y:auto;min-block-size:0}
.search-rail__apply{inline-size:100%;justify-content:center;margin-block-start:.2rem}

.topic-search{font:inherit;inline-size:100%;padding:.4rem .6rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text)}
.topic-empty{color:var(--text-muted);font-size:var(--step--1);margin:.2rem 0 0}
/* „Wo im Wort?" segmented control: pick one position; :has(:checked) fills it natively (works no-JS) */
.segmented{display:flex;border:1px solid var(--border);border-radius:var(--radius-pill);overflow:hidden;margin:0;padding:0;min-inline-size:0}
.seg{flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;text-align:center;min-block-size:2.75rem;
  font-size:var(--step--1);font-weight:600;padding:.4rem .4rem;color:var(--text-muted);background:var(--surface);white-space:nowrap}
.seg + .seg{border-inline-start:1px solid var(--border)}
.seg:hover{color:var(--brand-strong)}
.seg:has(:checked){background:var(--brand);color:var(--text-on-brand)}
/* The segment fill is brand; --focus is invisible on it, and .segmented clips with overflow:hidden so the ring
   must be inset. A surface+text double inset ring stays visible on both the brand (checked) and surface fills
   (WCAG 2.4.13). A transparent outline keeps a ring in forced-colors mode. */
.seg:has(:focus-visible){outline:2px solid transparent;outline-offset:-2px;box-shadow:inset 0 0 0 2px var(--surface),inset 0 0 0 4px var(--text)}
.chip-choice-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2xs);padding:0;margin:.4rem 0 0;max-block-size:13rem;overflow:auto}
.chip-choice{display:inline-flex;align-items:center;gap:.3ch;cursor:pointer;font-size:var(--step--1);font-weight:600;min-block-size:1.5rem;
  padding:.35rem .7rem;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--text)}
.chip-choice:hover{border-color:var(--brand)}
.chip-choice:has(:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.chip-choice--on{background:var(--brand-surface);border-color:var(--brand);color:var(--brand-strong)}
.chip-choice__count{opacity:.7;font-variant-numeric:tabular-nums}

/* Lehrplan (NIED) filter — grade subheadings + topic chips as single-select links */
.curriculum-filter__grade{margin:.4rem 0 .2rem;font-size:var(--step--1);
  letter-spacing:.04em;color:var(--text-muted);font-weight:700}
.curriculum-filter__themes{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2xs);padding:0;margin:0 0 .3rem}
.curriculum-filter__theme{display:inline-flex;align-items:center;gap:.3ch;font-size:var(--step--1);font-weight:600;
  min-block-size:1.5rem;padding:.35rem .7rem;border:1px solid var(--border);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--text);text-decoration:none}
.curriculum-filter__theme:hover{border-color:var(--brand)}
.curriculum-filter__theme:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.curriculum-filter__theme.is-active{background:var(--brand-surface);border-color:var(--brand);color:var(--brand-strong)}
.curriculum-filter__count{opacity:.7;font-variant-numeric:tabular-nums}
.curriculum-filter__clear{align-self:flex-start;font-size:var(--step--1);font-weight:600}
/* full opacity once selected: brand-strong on brand-surface keeps AA only without the dimming (WCAG 1.4.3) */
.chip-choice--on .chip-choice__count{opacity:1}
/* Kategorien-Baum: hierarchische Themen wie auf wort.schule — Kinder eingerückt mit linker Leitlinie */
.category-tree{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2xs);max-block-size:18rem;overflow:auto}
.category-tree__node{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2xs)}
.category-tree__children{list-style:none;margin:0;padding-inline-start:.8rem;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2xs);border-inline-start:2px solid var(--border)}

/* Phonem-Palette (ADR 0059) — die auswählbare Laut-Tafel, eigene Underhill-Anordnung (Vokale grau, Konsonanten
   gelblich, wie das Chart). Ein Radio je Phonem; die Auswahl submittet (no-JS: über „Anwenden"). */
.phoneme-palette{margin:.7rem 0 0;padding:0;border:0;min-inline-size:0}
.phoneme-palette__label{font-size:var(--step--1);font-weight:700;padding:0}
.phoneme-palette__hint{font-size:var(--step--2);color:var(--text-muted);margin:.2rem 0 .5rem}
.phoneme-palette__group{margin-block-end:.5rem}
/* sentence case, never ALL CAPS (handoff hard rule / project i18n) */
.phoneme-palette__group-label{display:block;font-size:var(--step--2);font-weight:700;letter-spacing:.02em;color:var(--text-muted);margin-block-end:.25rem}

/* Sound match mode (any/all/only) — three radio cards; selected carries „✓" (never colour alone, WCAG 1.4.1). */
.sound-mode{display:flex;flex-direction:column;gap:var(--sp-2xs);border:0;margin:0 0 .5rem;padding:0}
.sound-mode__legend{font-size:var(--step--1);font-weight:700;padding:0;margin-block-end:.2rem}
.sound-mode__card{display:grid;gap:.05rem;cursor:pointer;padding:.4rem .6rem;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--surface)}
.sound-mode__card:has(:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.sound-mode__card--on{background:var(--brand-surface);border-color:var(--brand)}
.sound-mode__input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.sound-mode__label{font-weight:700;font-size:var(--step--1)}
.sound-mode__card--on .sound-mode__label::before{content:"✓ "}
.sound-mode__expl{font-size:var(--step--2);color:var(--text-muted)}
.sound-mode__card--on .sound-mode__expl{color:var(--brand-strong)}
.phoneme-palette__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(3rem,1fr));gap:var(--sp-2xs)}
.phoneme-chip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;
  cursor:pointer;padding:.3rem .35rem;border:1px solid var(--border);border-radius:var(--radius-md,.5rem);
  background:var(--surface);color:var(--text);line-height:1.05;text-align:center}
.phoneme-palette__group--monophthong .phoneme-chip,.phoneme-palette__group--diphthong .phoneme-chip{background:color-mix(in oklch,var(--surface),var(--text) 5%)}
.phoneme-palette__group--consonant .phoneme-chip{background:color-mix(in oklch,var(--surface),#f2d64b 22%)}
.phoneme-chip:hover{border-color:var(--brand)}
.phoneme-chip:has(:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.phoneme-chip--on{background:var(--brand-surface);border-color:var(--brand);color:var(--brand-strong);font-weight:700}
.phoneme-chip__input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.phoneme-chip__symbol{font-size:var(--step-0);font-weight:700}
.phoneme-chip__example{font-size:var(--step--2);color:var(--text-muted)}
.phoneme-chip--on .phoneme-chip__example{color:var(--brand-strong)}
.phoneme-palette__clear{display:inline-block;margin-block-start:.3rem;font-size:var(--step--2)}

.search-results__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-sm);margin-block-end:var(--sp-md)}
.search-results__count{font-size:var(--step-2);margin:0}
.search-results__lang{color:var(--text-muted);margin:0}
.result-cards{list-style:none;display:flex;flex-direction:column;gap:var(--sp-sm);padding:0;margin:0}
.result-card{display:flex;align-items:center;gap:var(--sp-md);text-decoration:none;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-sm) var(--sp-md);box-shadow:var(--shadow-sm);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.result-card:hover{border-color:var(--brand);transform:translateY(-1px)}
.result-card__text{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:.15rem}
.result-card__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5ch}
/* Charis SIL (--font-lexical, HR2: renders clicks/IPA/tone/RTL that Nunito can't) — Bold for prominence in the
   result list (handoff „the lemma must stand out"; we keep the lexical serif, not Nunito, to preserve HR2). */
.result-card__lemma{font-family:var(--font-lexical);font-weight:700;font-size:var(--step-1)}
.result-card__pos{font-size:var(--step--2);font-weight:700;color:var(--text-muted);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:.05rem .5rem}
.result-card__gloss{color:var(--text-muted);font-size:var(--step--1);overflow-wrap:anywhere}
/* „Form von <Lemma>" — the query matched an inflected form; name the lemma it belongs to (the card still
   links to the lemma page). Quiet metadata line, distinct from the gloss. */
.result-card__form-of{color:var(--text-muted);font-size:var(--step--2);font-style:italic;overflow-wrap:anywhere}
/* picture to the RIGHT — not every word has one, so the lemmas stay left-aligned and consistent */
.result-card__thumb{flex:none;inline-size:3.5rem;block-size:3.5rem;border-radius:var(--radius-md);overflow:hidden;
  background:var(--brand-surface);display:grid;place-items:center}
.result-card__thumb img,.result-card__thumb video{inline-size:100%;block-size:100%;object-fit:cover}

.search-empty{text-align:center;color:var(--text-muted);border:2px dashed var(--border);border-radius:var(--radius-lg);padding:var(--sp-2xl) var(--sp-md)}
.search-empty__icon{font-size:2rem;margin:0}
.search-empty__title{font-weight:700;margin-block:.4rem 0}


/* Handoff 5a · Filter-Blatt: Desktop sieht die Schiene unverändert im Grid (display:contents,
   Summary versteckt); auf Telefonen wird der Summary zum Pill-Knopf und die offene Schiene zum
   Bottom-Sheet. Ohne JS bleibt das details offen — die Schiene steht dann als Block über den Treffern. */
.filter-sheet { display: contents; }
.filter-sheet__summary { display: none; }
@media (max-width: 40rem) {
  .filter-sheet { display: block; }
  .filter-sheet__summary {
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    padding: .55rem 1rem; border-radius: var(--radius-pill);
    background: var(--brand); color: var(--text-on-brand); font-weight: 800; font-size: var(--step--1);
    list-style: none; min-block-size: 44px;
  }
  .filter-sheet__summary::-webkit-details-marker { display: none; }
  .filter-sheet[open] .filter-sheet__summary { position: fixed; inset-block-end: calc(76px + env(safe-area-inset-bottom)); inset-inline-start: 50%; transform: translateX(-50%); z-index: 60; box-shadow: var(--shadow-md); }
  .filter-sheet[open] .search-rail {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
    max-block-size: 72dvh; overflow: auto;
    background: var(--surface); border: 1px solid var(--border); border-block-end: none;
    border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgb(0 0 0 / 16%);
    padding: var(--sp-md) var(--sp-lg) calc(var(--sp-xl) + env(safe-area-inset-bottom));
  }
  .active-filters { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .4rem; padding-block-end: .3rem; }
  .active-filters .chip { white-space: nowrap; }
}

/* „Weiter eingrenzen mit Stichwort" (B10): häufigste mit-vorkommende Stichwörter als Auswahl-Chips (kein
   Freitext). Erscheint nur, wenn schon ein Stichwort gewählt ist. */
.refine-keywords{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem;margin-block:var(--sp-sm) var(--sp-md)}
.refine-keywords__label{color:var(--text-muted);font-size:var(--step--1)}
.refine-keywords .chip--keyword{display:inline-flex;align-items:baseline;gap:.35ch}
.refine-keywords__count{color:var(--text-muted);font-size:var(--step--1);font-variant-numeric:tabular-nums}