:root {
  --serif: 'Literata', Georgia, serif;
  --serif-display: 'Cormorant Garamond', 'Literata', Georgia, serif;
  --mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
  --paper: #fdfbf6;
  --paper-tinted: #f5f1e8;
  --ink: #1a1613;
  --ink-2: #555048;
  --ink-3: #8a837a;
  --rule: #e3ddd0;
  --rule-strong: #b8ae9c;
  --accent: #8a2b1f;
  --accent-2: #6b5420;
  --highlight: #fdf2b8;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper-tinted); color: var(--ink); font-family: var(--serif); }
.page { max-width: 820px; margin: 0 auto; padding: 32px 28px 80px; background: var(--paper); min-height: 100vh; box-shadow: 0 0 30px rgba(0,0,0,0.05); }
.topnav { border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 28px; }
.topnav .back { font-family: var(--mono); font-size: 11px; color: var(--ink-2); text-decoration: none; letter-spacing: .4px; }
.topnav .back:hover { color: var(--accent); }

.pt-in { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.polytabs { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 28px; border-bottom: 1px solid var(--rule-strong); }
.polytab { cursor: pointer; padding: 10px 16px; border: 1px solid var(--rule); border-bottom: none; background: transparent; color: var(--ink-3); font-family: var(--serif); font-size: 15px; margin-right: -1px; user-select: none; border-top: 3px solid transparent; display: flex; flex-direction: column; gap: 2px; max-width: 260px; min-width: 0; flex: 0 1 auto; }
.pt-hwrow { display: flex; align-items: baseline; gap: 6px; }
.pt-disambig { font-family: var(--serif-display); font-style: italic; font-size: 16px; }
.pt-hw { font-family: var(--serif-display); font-size: 19px; font-weight: 500; }
.pt-sub { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Narrow screens: polytabs share the row equally instead of wrapping into
   an awkward grid; head-top meta row falls onto a second line if needed. */
@media (max-width: 640px) {
  /* Tighten whole-page chrome + all sf-box-style bordered containers
     so narrow viewports get more horizontal room for table cells and
     card grids. */
  .page { padding: 20px 14px 60px; }
  .sf-box { padding: 16px 14px 12px !important; }
  /* Stammformen / Komparation — stack cells vertically on narrow
     screens so long forms ("durchgesetzt", "interessanter") aren't
     truncated. Arrows rotate 90° to read as "step-down". Noun boxes
     (`.sf-noun`, 2 cells only) keep their side-by-side layout. */
  .sf-box:not(.sf-noun) .sf-cells { flex-direction: column; align-items: stretch; gap: 12px; }
  .sf-box:not(.sf-noun) .sf-cell { text-align: left; }

  .polytabs { flex-wrap: nowrap; }
  .polytab { flex: 1 1 0; max-width: none; padding: 8px 10px; }
  .pt-hw { font-size: 17px; }
  .pt-disambig { font-size: 14px; }
  .pt-sub { font-size: 11px; }
  .head-top { white-space: normal; }
  .head-rule { display: none; }
}
.pt-panel { display: none; }

.gc { border: 1px dashed var(--rule-strong); padding: 22px 22px 18px; background: var(--paper-tinted); margin-bottom: 24px; position: relative; }
.gc-label { position: absolute; top: -9px; left: 18px; background: var(--paper); padding: 0 10px; font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; font-weight: 500; }

.gc-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.gc-row:first-of-type { margin-top: 6px; }
.gc-row.disabled { opacity: .55; }

.gc-k { min-width: 140px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.gc-k > span:first-child { font-family: var(--mono); font-size: 10px; color: var(--ink-2); letter-spacing: .7px; text-transform: uppercase; font-weight: 600; }
.gc-k-hint { font-family: var(--mono); font-size: 9px; color: var(--ink-3); letter-spacing: .3px; font-style: italic; text-transform: none; }

.gc-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Segmented prefix buttons */
.gc-segment { display: inline-flex; border: 1px solid var(--rule-strong); }
.gc-seg-btn { padding: 7px 14px; background: transparent; color: var(--ink-2); border: none; border-left: 1px solid var(--rule-strong); font-family: var(--mono); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; font-weight: 500; }
.gc-seg-btn:first-child { border-left: none; }
.gc-seg-btn.active.gc-seg-separable { background: #dc2626; color: #fff; }
.gc-seg-btn.active.gc-seg-inseparable { background: #16a34a; color: #fff; }

.gc-arrow { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-2); }
.gc-arrow i { font-style: italic; }

/* Reflexive + Rektion chips — one shared visual language. */
.gc-check, .gc-rekchip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; background: transparent; border: 1px solid var(--rule-strong); cursor: pointer; color: var(--ink-2); font-family: inherit; }
.gc-check .gc-box { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1.5px solid var(--ink-3); box-sizing: border-box; line-height: 1; }
.gc-check .gc-check-label i { font-family: var(--serif); font-style: italic; }
.gc-rekchip .gc-prep { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink); }

.gc-check.active, .gc-rekchip.active {
  background: rgba(138, 43, 31, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.gc-check.active .gc-box { background: var(--accent); border-color: var(--accent); }
.gc-check.active .gc-box::after { content: '✓'; color: #fff; font-size: 10px; line-height: 1; font-family: var(--mono); font-weight: 700; }
.gc-rekchip.active .gc-prep { color: var(--accent); font-weight: 500; }

.gc-check.disabled { cursor: not-allowed; opacity: .45; color: var(--ink-3); border-color: var(--rule); }
.gc-check.disabled .gc-box { border-color: var(--ink-3); }

.gc-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.gc-note { margin-top: 16px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); font-style: italic; letter-spacing: .3px; }

/* State-driven show/hide for sections tagged with data-gc-show */
.gc-hidden { display: none !important; }

.head { margin-bottom: 34px; }

/* Top meta row: tags · rule ──── freq · CEFR */
.head-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; white-space: nowrap; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .5px; text-transform: uppercase; }
.head-tags { flex-shrink: 0; }
.head-rule { flex: 1; min-width: 12px; height: 1px; background: var(--rule); }

/* Headword */
.head-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.genus { font-family: var(--serif-display); font-size: 36px; font-style: italic; font-weight: 400; }
.headword { font-family: var(--serif-display); font-size: 72px; font-weight: 400; line-height: 1; margin: 0; letter-spacing: -1.5px; color: var(--ink); }
.headword > span { display: inline; }
.syl { font-family: var(--serif-display); color: var(--ink-3); margin: 0 0.04em; font-size: 1.1em; vertical-align: 0.08em; line-height: 0; }
.syl.sep { color: #b91c1c; }

/* IPA row (below headword) */
.head-ipa { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ipa { font-family: var(--mono); font-size: 15px; color: var(--ink-2); }
.audio-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.audio-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Syllabification row (under IPA). Hidden for now — data stays in DOM
   in case we decide to re-expose it later. */
.head-syll { display: none; align-items: baseline; gap: 14px; margin-top: 8px; }
.head-syll-k { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .5px; text-transform: uppercase; min-width: 80px; flex-shrink: 0; }
.head-syll-v { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.head-syll-sep { color: var(--ink-3); margin: 0 0.3em; }
.head-syll-sep.sep { color: #b91c1c; font-weight: 500; }

.cefr { flex-shrink: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; padding: 3px 8px; border: 1px solid var(--accent); color: var(--accent); text-transform: uppercase; }

.freq { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.freq-k { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .5px; text-transform: uppercase; }
.freq-bars { display: inline-flex; gap: 2px; margin: 0 2px; }
.freq-bar { width: 4px; height: 10px; background: var(--rule); display: inline-block; }
.freq-bar.on { background: var(--accent); }
.freq-rank { font-family: var(--mono); font-size: 10px; color: var(--ink-2); letter-spacing: .3px; text-transform: lowercase; }

section { margin-bottom: 28px; }
.sec-label { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.sec-label.inline { margin-bottom: 0; }

/* Flat section header: `§ TITLE`. Both the § glyph and the title share
   one accent-red small-caps style. No numbering, no trailing counts. */
.sec-head { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; margin: 32px 0 14px; border-bottom: 1px solid var(--rule-strong); font-family: var(--mono); font-size: 10px; letter-spacing: .8px; text-transform: uppercase; flex-wrap: wrap; }
.sec-head .sec-num { color: var(--accent); font-weight: 600; flex-shrink: 0; }
.sec-head .sec-title { color: var(--accent); font-weight: 600; }
/* Editorial paragraph that sits between a § header and the section body
   (particle answer-system, stress list). Regular serif prose, not the
   mono/caps styling of the section head. */
.section-intro { font-family: var(--serif); font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: -4px 0 14px; max-width: 72ch; }

/* Editorial closing note (etymology panel etc.) — dashed outer border,
   mono label top-left, serif body paragraph. Lightweight companion to
   full Callout when you just need "a single boxed paragraph". */
.editorial-note { border: 1px dashed var(--rule-strong); padding: 12px 16px; margin: 18px 0 0; background: var(--paper); }
.editorial-note-label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .6px; color: var(--ink-3); text-transform: uppercase; margin-bottom: 6px; }
.editorial-note-body { font-family: var(--serif); font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 0; }

.kv { border-collapse: collapse; width: auto; }
.kv th { text-align: left; font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .6px; text-transform: uppercase; padding: 4px 14px 4px 0; font-weight: 500; vertical-align: top; }
.kv td { font-family: var(--serif); font-size: 15px; color: var(--ink); padding: 4px 0; }

.dim { color: var(--ink-3); }

/* Stammformen box — bordered panel with top mini-label and 3 columns. */
.sf-box { border: 1px solid var(--rule-strong); padding: 18px 20px; margin: 6px 0 16px; background: var(--paper-tinted); position: relative; }
.sf-top { position: absolute; top: -8px; left: 16px; background: var(--paper); padding: 0 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .5px; color: var(--ink-3); text-transform: uppercase; }
.sf-cells { display: flex; align-items: baseline; gap: 36px; }
.sf-cell { flex: 1; min-width: 0; }
.sf-k { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px; }
.sf-v { font-family: var(--serif-display); font-size: 26px; color: var(--ink); font-style: italic; font-weight: 400; line-height: 1.1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sf-pp .sf-pp-val { color: var(--ink); }
.sf-adj-sup { color: var(--accent); }
.sf-v .sf-prefix { color: var(--accent); }
.sf-aux { font-family: var(--serif-display); font-size: 26px; font-style: italic; font-weight: 400; color: var(--ink); letter-spacing: 0; text-transform: none; }

/* ═════════════════════ Pronoun pages (ich / sich) ═════════════════════ */

/* Deklination box: 4 rows, each with case col + chip + form/gloss + example */
.pr-decl { padding: 22px 24px 18px; }
.pr-decl-tbl { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.pr-decl-tbl td { vertical-align: top; padding: 4px 12px 4px 0; }
.pr-case-col { width: 110px; }
.pr-case-name { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; }
.pr-case-n { color: var(--ink-2); }
.pr-case-a { color: #b91c1c; }
.pr-case-d { color: #1d4ed8; }
.pr-case-g { color: #7c3aed; }
.pr-case-q { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.pr-chip-col { width: 48px; }
.pr-form-col { width: 140px; }
.pr-form { font-family: var(--serif-display); font-style: italic; font-size: 24px; line-height: 1.1; color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pr-gloss { font-family: var(--serif); font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.pr-tag { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .5px; color: var(--ink-3); text-transform: uppercase; }
.pr-ex-col { padding-left: 6px !important; }
.pr-ex-de { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.4; }
.pr-ex-loc { font-family: var(--serif); font-size: 13px; color: var(--ink-2); margin-top: 2px; font-style: italic; }

/* Editorial prose */
.pr-prose { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink); margin: 6px 0 18px; max-width: 680px; }
.pr-prose em { font-style: italic; color: var(--ink); }

/* Possessivpronomen sub-panel */
.pr-poss { padding: 22px 22px 18px; margin-top: 14px; background: rgba(138, 43, 31, 0.03); }
.pr-poss .sf-top { font-family: var(--mono); font-size: 10px; letter-spacing: .6px; color: var(--accent); text-transform: uppercase; }
.pr-poss-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pr-poss-form { font-family: var(--serif-display); font-style: italic; font-size: 26px; color: var(--accent); }
.pr-poss-desc { font-family: var(--serif); font-size: 14px; color: var(--ink-2); line-height: 1.45; flex: 1 1 260px; }
.pr-poss-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pr-poss-card { background: var(--paper-tinted); padding: 10px 12px; }
.pr-poss-de { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.pr-poss-loc { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-3); margin-top: 2px; }

/* Vergleich table (9 persons × 4 cases) */
/* Pronoun comparison table now renders via the unified DeclensionTable
   renderer — see `.decl-tbl-*` below. */

/* Usage block-list (Tonkosti) */
.pr-usage-block { margin: 14px 0 18px; }
.pr-usage-title { font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.pr-usage-body { font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 680px; }

/* ── Reflexive pronoun (sich) ─────────────────────────────────────── */

/* Intro blurb — reusable two-line preamble (localized headline +
   German sub-line). Used by reflexive pronoun, conjunctions, any page
   that needs a framed introductory gloss above a structured box. */
.intro-blurb { margin: 6px 0 16px; padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.intro-blurb-loc { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.5; }
.intro-blurb-de { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-3); line-height: 1.5; margin-top: 4px; }

/* All-forms table (7 persons × Subjekt / Akk / Dat) */
/* Reflexive all-forms table now renders via the unified DeclensionTable
   renderer — see `.decl-tbl-*` below. */

/* Funktionen list */
.pr-refl-fns { margin-top: 8px; }
.pr-fn { border-left: 2px solid var(--rule-strong); padding: 2px 0 14px 18px; margin: 14px 0; }
.pr-fn-head { display: flex; align-items: baseline; gap: 12px; }
.pr-fn-n { font-family: var(--serif-display); font-style: italic; font-size: 22px; color: var(--accent); line-height: 1; flex-shrink: 0; }
.pr-fn-title { font-family: var(--serif); font-weight: 500; font-size: 15px; color: var(--ink); line-height: 1.4; }
.pr-fn-sub { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-3); margin: 2px 0 0 30px; }
.pr-fn-note { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin: 6px 0 0 30px; }
.pr-fn-examples { list-style: none; padding: 0; margin: 10px 0 0 30px; }
.pr-fn-examples li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px dotted var(--rule); }
.pr-fn-examples li:last-child { border-bottom: none; }
.pr-fn-case { flex-shrink: 0; min-width: 28px; }
.pr-fn-body { flex: 1; min-width: 0; }
.pr-fn-de { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.4; }
.pr-fn-loc { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* Position-im-Satz analysis */
.pr-pos-intro { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 6px 0 14px; max-width: 720px; }
.pr-pos-tbl { width: 100%; border-collapse: collapse; }
.pr-pos-tbl th, .pr-pos-tbl td { padding: 10px 12px; vertical-align: baseline; border-bottom: 1px solid var(--rule); }
.pr-pos-label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .6px; color: var(--ink-3); text-transform: uppercase; text-align: left; white-space: nowrap; padding-right: 18px !important; }
.pr-pos-sentence { font-family: var(--serif-display); font-style: italic; font-size: 16px; color: var(--ink); }
.pr-pos-part { display: inline-block; padding: 0 10px; border-left: 1px solid var(--rule); }
.pr-pos-part:first-child { border-left: none; padding-left: 0; }
.pr-pos-sich { background: rgba(220, 38, 38, 0.08); color: var(--accent); }
.pr-pos-formula { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .3px; text-align: right; white-space: nowrap; }

/* Typical reflexive verbs — two color-coded chip panels */
.pr-verb-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .6px; color: var(--ink-3); text-transform: uppercase; text-align: right; margin: -8px 0 8px; }
.pr-verb-intro { font-family: var(--serif); font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-bottom: 14px; max-width: 720px; }
.pr-verb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pr-verb-panel { border: 1px solid; padding: 12px 14px; }
.pr-verb-akk { border-color: rgba(220, 38, 38, 0.45); background: rgba(220, 38, 38, 0.04); }
.pr-verb-dat { border-color: rgba(37, 99, 235, 0.45); background: rgba(37, 99, 235, 0.04); }
.pr-verb-panel-head { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 10px; }
.pr-verb-akk .pr-verb-panel-head { color: #b91c1c; }
.pr-verb-dat .pr-verb-panel-head { color: #1d4ed8; }
.pr-verb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-verb-chip { font-family: var(--serif); font-size: 13px; color: var(--ink); padding: 3px 8px; background: var(--paper); border: 1px solid var(--rule); }

/* ── Conjunction pages (weil / denn / als / wenn / …) ─────────────── */

/* Wortstellung box — side-by-side word-order patterns with role-colored
   cells (plain, verb-V2, Konjunktion, verb-at-end). Reusable for every
   subordinating conjunction. */
.ws-box { padding: 22px 24px 16px; }
.ws-pattern { margin: 14px 0; }
.ws-pattern:first-of-type { margin-top: 6px; }
.ws-sublabel { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .7px; color: var(--ink-3); text-transform: uppercase; margin-bottom: 10px; }
.ws-grid { display: inline-grid; gap: 4px 10px; align-items: baseline; }
.ws-tag { font-family: var(--mono); font-size: 9px; color: var(--ink-3); letter-spacing: .4px; text-transform: uppercase; text-align: center; padding: 0 8px; }
.ws-part { font-family: var(--serif-display); font-style: italic; font-size: 20px; color: var(--ink); padding: 6px 12px; text-align: center; }
.ws-part-v { background: var(--paper-tinted); border: 1px solid var(--rule-strong); }
.ws-part-konj { background: var(--accent); color: var(--paper); font-style: italic; }
.ws-part-vEnd { background: #5b1e18; color: var(--paper); font-style: italic; }
.ws-note { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 14px; max-width: 720px; }

/* Sibling-comparison grid (weil · denn · da — в чём разница) */
/* Horizontal-scroll wrapper — lets wide SiblingComparison tables (e.g.
   hallo's 10×4 Register grid) fit any viewport without stretching the
   page. No effect when the table already fits. */
.conj-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px 0 14px; }
.conj-cmp { width: 100%; border-collapse: collapse; font-family: var(--serif); }
.conj-cmp th, .conj-cmp td { padding: 10px 14px; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--rule); font-size: 14px; white-space: nowrap; }
.conj-cmp thead th { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .6px; color: var(--ink-3); text-transform: uppercase; border-bottom: 1px solid var(--rule-strong); background: var(--paper-tinted); }
.conj-cmp-name { font-family: var(--serif-display); font-style: italic; font-size: 16px; color: var(--ink); }
.conj-cmp-cur { background: rgba(138, 43, 31, 0.05); }
.conj-cmp-cur .conj-cmp-name { color: var(--accent); font-weight: 500; }

/* Editorial callout panels — reusable for Q&A notes, usage warnings,
   register tips, false-friend alerts, etc. Shape: mono sub-label on top,
   optional Q&A rows / prose / labeled example rows / footer note. */
.conj-callout { border: 1px solid var(--rule-strong); padding: 14px 18px; margin: 16px 0; background: rgba(0, 0, 0, 0.02); }
.conj-callout-label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .6px; color: var(--accent-2); text-transform: uppercase; margin-bottom: 10px; }
.conj-callout-warning .conj-callout-label { color: var(--accent); }

.conj-callout-qa { display: flex; flex-direction: column; gap: 4px; }
.conj-qa-row { display: flex; gap: 12px; align-items: baseline; padding: 4px 0; }
.conj-qa-marker { font-family: var(--serif-display); font-size: 18px; color: var(--accent); width: 20px; text-align: center; flex-shrink: 0; }
.conj-qa-text { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.4; }

.conj-callout-body { font-family: var(--serif); font-size: 14px; color: var(--ink-2); line-height: 1.55; max-width: 720px; margin: 4px 0 10px; }

.conj-callout-labeled { display: flex; flex-direction: column; gap: 6px; }
.conj-labeled-row { display: flex; gap: 14px; align-items: baseline; padding: 4px 0; }
.conj-labeled-tag { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border: 1px solid; flex-shrink: 0; }
.conj-lt-warn { border-color: var(--accent); color: var(--accent); }
.conj-lt-ok { border-color: var(--ink-2); color: var(--ink-2); }
.conj-lt-neutral { border-color: var(--ink-3); color: var(--ink-3); }
.conj-labeled-text { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.4; }

.conj-callout-note { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-3); margin-top: 10px; line-height: 1.5; }

/* ── Adverb / Gradpartikel (sehr, ziemlich, äußerst …) ─────────────── */

/* ContrastBox — two-column "can / cannot" teaching panel */
.cbox { padding: 22px 24px 18px; }
.cbox-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 4px; }
.cbox-col { }
.cbox-col-head { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.cbox-col-glyph { font-size: 13px; }
.cbox-accept .cbox-col-head { color: #15803d; }
.cbox-accept .cbox-col-glyph { color: #15803d; }
.cbox-reject .cbox-col-head { color: var(--accent); }
.cbox-reject .cbox-col-glyph { color: var(--accent); }

.cbox-row { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 8px 0; align-items: baseline; }
.cbox-reject .cbox-row { grid-template-columns: 1fr; background: rgba(0, 0, 0, 0.02); padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--rule); gap: 6px; }
.cbox-cat { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .5px; color: var(--ink-3); text-transform: uppercase; }
.cbox-body { display: flex; flex-direction: column; gap: 2px; }
.cbox-ex { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.4; }
.cbox-ex-check { color: #15803d; }
.cbox-ex-cross { color: var(--accent); }
.cbox-ex-glyph { font-weight: 600; margin-right: 2px; }
.cbox-tail { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* ScaleAxis — 3-row horizontal gradient: German above the line, dots on
   the line, localized gloss below. All three rows are flex grids with
   matching column widths so the columns stay aligned. */
/* ScaleAxis — each `.scale-pt` holds its DE form, dot, and gloss
   together. Desktop: axis is a horizontal flex row, points become
   vertical columns (DE on top, dot middle, gloss bottom) with a
   single horizontal rule running behind the dots. Narrow screens
   transpose each point into a horizontal row. */
.scale-axis { display: flex; align-items: stretch; gap: 4px; margin: 8px 0 22px; position: relative; }
/* Middle rule — positioned so the dots sit on it. 10px DE padding +
   ~7.5px half-dot ≈ 17.5px, plus the DE line height. */
.scale-axis::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule-strong); transform: translateY(-0.5px); pointer-events: none; }

.scale-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.scale-de { font-family: var(--serif-display); font-style: italic; font-size: 15px; color: var(--ink-2); line-height: 1.2; padding-bottom: 10px; }
.scale-de > span { display: inline-block; }
.scale-de-current > span { color: var(--accent); padding: 2px 10px; border: 1px solid var(--accent); }

.scale-dot-cell { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; height: 14px; }
.scale-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); box-shadow: 0 0 0 4px var(--paper); }
.scale-dot-current { background: var(--accent); width: 11px; height: 11px; }

.scale-gloss { font-family: var(--serif); font-size: 12px; color: var(--ink-3); padding-top: 10px; }
.scale-gloss-current { color: var(--accent); font-weight: 500; }

/* MistakeTable — correct / wrong / why */
.mistake-tbl { width: 100%; border-collapse: collapse; font-family: var(--serif); margin: 4px 0 14px; }
.mistake-tbl th, .mistake-tbl td { padding: 12px 14px; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--rule); font-size: 15px; }
.mistake-tbl thead th { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .6px; color: var(--ink-3); text-transform: uppercase; background: var(--paper-tinted); border-bottom: 1px solid var(--rule-strong); }
.mistake-ok { color: var(--ink); }
.mistake-wrong { color: var(--accent); }
.mistake-reason { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); }

/* PositionExampleList — example + explanation rows */
.pos-ex-tbl { width: 100%; border-collapse: collapse; margin: 4px 0 18px; }
.pos-ex-tbl td { padding: 12px 14px; vertical-align: baseline; border-bottom: 1px solid var(--rule); background: var(--paper-tinted); }
.pos-ex-tbl tr:nth-child(even) td { background: var(--paper); }
.pos-ex-de { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.4; width: 46%; }
.pos-ex-expl { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); line-height: 1.4; }

/* Narrow screens */
@media (max-width: 640px) {
  .cbox-cols { grid-template-columns: 1fr; }
  .cbox-row { grid-template-columns: 1fr; gap: 4px; }
  /* ScaleAxis on narrow: axis becomes a vertical list, each point is
     a horizontal row — dot · DE · gloss. The background rule is
     hidden since there's no continuous horizontal axis any more. */
  .scale-axis { flex-direction: column; gap: 6px; }
  .scale-axis::before { display: none; }
  .scale-pt { flex-direction: row; align-items: center; text-align: left; gap: 12px; }
  .scale-dot-cell { padding: 0; height: auto; flex: 0 0 auto; }
  .scale-de { padding: 0; min-width: 100px; flex: 0 0 auto; }
  .scale-de > span { display: inline-block; }
  .scale-de-current > span { padding: 1px 8px; }
  .scale-gloss { padding: 0; flex: 1; text-align: right; }
  .mistake-tbl th, .mistake-tbl td { padding: 8px 10px; font-size: 13px; }
  .pos-ex-de { width: auto; display: block; }
  .pos-ex-expl { display: block; padding-top: 4px; }
  .pos-ex-tbl td { display: block; }
}

/* ── Preposition / Wechsel (auf, an, in, über, unter, vor, hinter, …) ── */

/* CaseContrastBox — two parallel columns, one per case. Each column is
   a light-tinted panel with its own case-colored left border. */
.case-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 14px; }
.case-split-col { padding: 14px 16px; border-left: 3px solid; }
.case-split-a { background: rgba(220, 38, 38, 0.04); border-left-color: #dc2626; }
.case-split-d { background: rgba(37, 99, 235, 0.04); border-left-color: #2563eb; }
.case-split-n { background: rgba(138, 131, 122, 0.05); border-left-color: var(--ink-3); }
.case-split-g { background: rgba(124, 58, 237, 0.04); border-left-color: #7c3aed; }

/* Fixed-case preposition card — single-column variant of `.case-split`.
   Same inner `.case-split-col` markup + accent left border as one
   Wechsel column; only the grid collapses. */
.case-split-solo { grid-template-columns: 1fr; max-width: 640px; }

.case-split-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.case-split-q { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.case-split-a .case-split-q { color: #dc2626; }
.case-split-d .case-split-q { color: #2563eb; }
.case-split-n .case-split-q { color: var(--ink-3); }
.case-split-g .case-split-q { color: #7c3aed; }
.case-split-case { font-family: var(--serif-display); font-style: italic; font-size: 20px; color: var(--ink); }
.case-split-a .case-split-case { color: #dc2626; }
.case-split-d .case-split-case { color: #2563eb; }
.case-split-n .case-split-case { color: var(--ink-3); }
.case-split-g .case-split-case { color: #7c3aed; }

.case-split-verbs { margin-bottom: 12px; }
.case-split-verbs-label { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .5px; color: var(--ink-3); text-transform: uppercase; margin-bottom: 6px; }
.case-split-verbs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.case-split-verb { font-family: var(--serif); font-size: 13px; color: var(--ink); padding: 2px 8px; background: var(--paper); border: 1px solid var(--rule); }

.case-split-examples { list-style: none; padding: 0; margin: 0; }
.case-split-examples li { padding: 8px 0; border-bottom: 1px dotted var(--rule); }
.case-split-examples li:last-child { border-bottom: none; }
.case-split-ex-de { font-family: var(--serif); font-size: 14px; color: var(--ink); line-height: 1.4; }
.case-split-ex-loc { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.case-split-ex-hint { font-family: var(--mono); font-size: 10px; letter-spacing: .4px; color: var(--ink-3); margin-top: 4px; }
.case-split-a .case-split-ex-hint { color: #b91c1c; }
.case-split-d .case-split-ex-hint { color: #1d4ed8; }

/* CollocationGrid — N-column grid of verb-phrase cards. Each card has
   a red-accent left border, italic phrase title, German example, and
   localized translation. */
.colloc-intro { font-family: var(--serif); font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0 0 14px; max-width: 720px; font-style: italic; }
.colloc-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 12px; margin-bottom: 16px; }
.colloc-card { padding: 10px 14px; border-left: 2px solid var(--accent); background: var(--paper-tinted); }
.colloc-phrase { font-family: var(--serif-display); font-style: italic; font-size: 15px; color: var(--accent); margin-bottom: 6px; }
.colloc-de { font-family: var(--serif); font-size: 14px; color: var(--ink); line-height: 1.4; }
.colloc-loc { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-2); margin-top: 2px; }

/* Narrow screens */
@media (max-width: 640px) {
  .case-split { grid-template-columns: 1fr; }
  .colloc-grid { grid-template-columns: 1fr !important; }
}

/* ── Article pages (der, die, das, ein, kein) ─────────────────────── */

/* DeclensionTable — full case × gender paradigm inside an sf-box */
.decl-tbl-box { padding: 18px 20px 14px; }
/* Overflow-x lives on the inner wrapper — NOT on `.decl-tbl-box` —
   because the absolute-positioned `.sf-top` (sitting above the box
   top border) would be clipped by an overflow-x scroll context on
   its parent. */
.decl-tbl-scroll { overflow-x: auto; }
.decl-tbl { width: 100%; border-collapse: collapse; font-family: var(--serif); margin: 4px 0 0; }
.decl-tbl th, .decl-tbl td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--rule); }
.decl-tbl thead th { background: transparent; border-bottom: 1px solid var(--rule-strong); }
.decl-tbl-h { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .6px; color: var(--ink-3); text-transform: uppercase; }
/* Column-header colors by colorKey */
.decl-tbl-h-der { color: #2563eb; }
.decl-tbl-h-die { color: #dc2626; }
.decl-tbl-h-das { color: #16a34a; }
.decl-tbl-h-pl  { color: var(--ink-3); }
.decl-tbl-h-n   { color: var(--ink-3); }
.decl-tbl-h-a   { color: #b91c1c; }
.decl-tbl-h-d   { color: #1d4ed8; }
.decl-tbl-h-g   { color: #7c3aed; }

/* Row header (first column in tbody) — mono small-caps label + optional
   sublabel below for disambiguation (M/F/N under 3. Sg.). */
.decl-tbl-row { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .3px; color: var(--ink-2); white-space: nowrap; width: 100px; vertical-align: baseline; }
.decl-tbl-row-label { display: inline-block; }
.decl-tbl-row-sublabel { display: inline-block; margin-left: 4px; color: var(--ink-3); font-size: 10px; }

/* Optional lead column between row-header and data — used when the
   table carries a per-row translation or subject form. */
.decl-tbl-lead { font-family: var(--serif); font-size: 14px; color: var(--ink-2); font-style: normal; white-space: nowrap; }

/* Data cells */
.decl-tbl-cell { font-family: var(--serif-display); font-style: italic; font-size: 18px; color: var(--ink); }
.decl-tbl-text { }
.decl-tbl-hint { font-family: var(--mono); font-style: normal; font-size: 10px; color: var(--ink-3); letter-spacing: 0; }

/* Row-level current highlight (personal pronoun's headword row; sich's
   reflexive rows). Combines with cell-level current without conflict. */
.decl-tbl-row-current { background: rgba(185, 28, 28, 0.06); }
.decl-tbl-row-current .decl-tbl-row { color: var(--accent); }
.decl-tbl-row-current .decl-tbl-row-sublabel { color: var(--accent); }
.decl-tbl-row-current .decl-tbl-cell { color: var(--accent); font-weight: 500; }

/* Cell-level current highlight (article der — specific cells) */
.decl-tbl-cell-current { background: rgba(185, 28, 28, 0.08); color: var(--accent); font-weight: 500; }
.decl-tbl-cell-current .decl-tbl-hint { color: var(--accent); }

.decl-tbl-footer { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); margin-top: 12px; line-height: 1.5; }

/* SimilarWordsGrid — compact grid of related-word cards */
/* `auto-fit` + `minmax(140px, 1fr)` — cards have a readable minimum
   width (~2× the cramped 10-col layout); grid wraps cards to new
   rows automatically when the viewport can't fit all of them in one.
   The fixture's `columns` hint is no longer consumed by CSS — it's
   kept in the model as advisory metadata for future responsive tuning. */
.similar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 4px 0 14px; }
/* Long German words (neunzehn / Milliarde) wrap onto multiple lines
   inside their card rather than overflowing the column. */
.similar-grid .lemma-card { min-width: 0; overflow-wrap: anywhere; }

/* RoleList — tag + subTag + note | (optional pivot) | example + translation */
.role-list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 14px; }
.role-row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: baseline; padding: 12px 14px; background: var(--paper-tinted); border: 1px solid var(--rule); margin-bottom: 6px; }
.role-list-pivot .role-row { grid-template-columns: 220px 60px 1fr; }
.role-meta { display: flex; flex-direction: column; gap: 2px; }
.role-tag { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .5px; color: var(--ink-2); text-transform: uppercase; line-height: 1.25; }
.role-subtag { font-family: var(--mono); font-size: 9px; letter-spacing: .3px; color: var(--ink-3); text-transform: uppercase; }
.role-note { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.role-pivot { font-family: var(--serif-display); font-style: italic; font-size: 26px; color: var(--ink); text-align: center; }
.role-pivot-accent { color: var(--accent); }
.role-body { }
.role-de { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.4; }
.role-loc { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* Marker column — activated by `.role-list-markers` on the parent.
   Each row gets a left-margin dot: hollow ring when the row has no
   accent, filled accent-red disc when `.role-row-accent` is set.
   Used for doch's BETONT vs. UNBETONT stress list. */
.role-list-markers .role-row { grid-template-columns: 18px 200px 1fr; }
.role-list-markers.role-list-pivot .role-row { grid-template-columns: 18px 200px 60px 1fr; }
.role-marker { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: transparent; align-self: center; }
.role-marker-accent { background: var(--accent); border-color: var(--accent); }
.role-row-accent { border-left: 3px solid var(--accent); padding-left: 11px; }

/* Narrow screens */
@media (max-width: 640px) {
  .decl-tbl th, .decl-tbl td { padding: 6px 8px; font-size: 14px; }
  .decl-tbl-h { font-size: 9px; }
  .similar-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .role-row, .role-list-pivot .role-row { grid-template-columns: 1fr; gap: 8px; }
  /* With markers: keep marker+meta on one top row, body flows full-width
     below (otherwise body lands in the 18px marker column). */
  .role-list-markers .role-row,
  .role-list-markers.role-list-pivot .role-row { grid-template-columns: 18px 1fr; gap: 6px 10px; }
  .role-list-markers .role-body { grid-column: 1 / -1; }
  .role-pivot { text-align: left; font-size: 20px; }
}

/* ── Numeral / Kardinalzahl (eins, zwei, drei, …) ──────────────────── */

/* forms-table box reuses RoleList rows but without per-row individual
   borders — they sit inside one shared bordered sf-box with dividers. */
.forms-table-box { padding: 18px 20px 12px; }
.forms-table-rows .role-row { background: transparent; border: none; margin: 0; padding: 14px 0; border-top: 1px solid var(--rule); }
.forms-table-rows .role-row:first-child { border-top: none; }

/* LabeledGrid (counting strip). Small square-ish cards; one highlighted
   as a filled accent-red tile. */
/* .count-* deprecated — counting strips now use `.lemma-card` via
   SimilarWordsGrid. See `.lemma-card-current` below for the dark
   headword-highlight variant. */

/* ScenarioGroupList (everyday usage). Groups arrange as a responsive
   grid: `--sg-cols` (default 1) sets the desktop column count. Each
   group is a bordered card with accent left border, mono tag on top,
   and `de | loc` example rows. */
.scenario-groups { display: grid; grid-template-columns: repeat(var(--sg-cols, 1), 1fr); gap: 12px; margin: 0 0 10px; }
.scenario-group { border: 1px solid var(--rule); border-left: 3px solid var(--accent); padding: 12px 16px; background: var(--paper-tinted); }
.scenario-tag { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .6px; color: var(--accent-2); text-transform: uppercase; margin-bottom: 8px; }
.scenario-examples { display: flex; flex-direction: column; gap: 6px; }
.scenario-row { display: grid; grid-template-columns: minmax(200px, 1fr) 1fr; gap: 18px; align-items: baseline; padding: 4px 0; }
.scenario-de { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.4; }
.scenario-loc { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
/* Third-line editorial note (e.g. hallo's "■ с именем — уместно и на
   работе"). Spans both grid columns, sits below the DE/loc row. */
.scenario-note { grid-column: 1 / -1; font-family: var(--serif); font-size: 12px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.scenario-note::before { content: '▪ '; color: var(--accent); font-weight: 700; }

/* Narrow screens */
@media (max-width: 640px) {
  .scenario-groups { grid-template-columns: 1fr; }
  .scenario-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Narrow screens: declension table stacks, possessive grid becomes 2-col */
@media (max-width: 640px) {
  /* ich Deklination box on narrow screens — reorganise the 4-cell row
     into a 2-column grid so the chip sits next to the case name:
       [N] NOMINATIV · wer?
       ich — I
       Ich lerne Deutsch.
       — I'm learning German.
     Without this, the default `display: block` fallback pushes every
     cell to its own line (chip floats alone, form alone, etc). */
  .pr-decl-tbl, .pr-decl-tbl tbody { display: block; }
  .pr-decl-tbl tr { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding: 12px 0; border-bottom: 1px dotted var(--rule); }
  .pr-decl-tbl td { display: block; padding: 0 !important; width: auto !important; }
  .pr-chip-col { grid-column: 1; grid-row: 1; align-self: baseline; }
  .pr-case-col { grid-column: 2; grid-row: 1; display: flex !important; align-items: baseline; gap: 10px; min-width: 0; }
  .pr-form-col { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
  .pr-form { font-size: 22px; }
  .pr-ex-col { grid-column: 1 / -1; grid-row: 3; padding-left: 0 !important; margin-top: 4px; }
  .pr-poss-grid { grid-template-columns: repeat(2, 1fr); }
  .decl-tbl th, .decl-tbl td { padding: 6px 8px; font-size: 12px; }
  .decl-tbl-row { width: auto; font-size: 10px; }
  .decl-tbl-cell { font-size: 14px; }
  .decl-tbl-lead { font-size: 12px; }
  .pr-verb-grid { grid-template-columns: 1fr; }
  .pr-pos-formula { display: none; }
  .conj-cmp th, .conj-cmp td { padding: 8px 10px; font-size: 12px; }
  .ws-grid { grid-template-columns: repeat(2, auto) !important; }
}

/* Noun grammar box — same shape as Stammformen, tinted by grammatical gender. */
.sf-noun .sf-top { font-family: var(--serif-display); font-style: italic; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.sf-noun .sf-cells { gap: 32px; }
.sf-noun-der { background: rgba(37, 99, 235, 0.07); border-color: rgba(37, 99, 235, 0.35); }
.sf-noun-der .sf-top { color: #1d4ed8; }
.sf-noun-die { background: rgba(220, 38, 38, 0.07); border-color: rgba(220, 38, 38, 0.35); }
.sf-noun-die .sf-top { color: #b91c1c; }
.sf-noun-das { background: rgba(22, 163, 74, 0.07); border-color: rgba(22, 163, 74, 0.35); }
.sf-noun-das .sf-top { color: #15803d; }

/* Generic key/value row used by the grammar block (syllabification etc.) */
.gr-row { display: flex; gap: 14px; align-items: baseline; margin: 6px 0; }
.gr-k { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .6px; text-transform: uppercase; min-width: 160px; flex-shrink: 0; }
.gr-v { font-family: var(--serif); font-size: 16px; color: var(--ink); }

.syl-line .syl-dot { color: var(--ink-3); margin: 0 0.15em; font-family: var(--serif-display); }
.syl-line .syl-dot.sep { color: #b91c1c; }

.decl { border-collapse: collapse; font-family: var(--serif); font-size: 14px; margin-top: 4px; }
.decl th, .decl td { padding: 4px 12px 4px 0; text-align: left; }
.decl th { font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .6px; font-weight: 500; }
.decl .casename { font-style: italic; font-family: var(--serif); color: var(--accent); }

/* Meaning numbers come from a CSS counter — hidden meanings (filtered by
   Grammar Constructor) are skipped, so visible ones are always 1, 2, 3…
   regardless of original `n`. */
.meanings { counter-reset: mnum; }
.meaning { display: flex; gap: 10px; margin-bottom: 28px; align-items: flex-start; }
.meaning:not(.gc-hidden) { counter-increment: mnum; }
.m-num { font-family: var(--serif-display); font-size: 26px; font-style: italic; color: var(--accent); line-height: 1.1; flex-shrink: 0; }
.m-num::before { content: counter(mnum); }

/* Auto-hide sections that filter every child away. Modern CSS :has()
   (Chrome 105+, Safari 15.4+, Firefox 121+). */
section.rektion:not(:has(.rek-list > .rek-card:not(.gc-hidden))) { display: none; }
section.idioms-section:not(:has(ul.idioms > li:not(.gc-hidden))) { display: none; }
/* All meaning content (gloss, defs, tags, examples, synonyms) lives in
   m-body. A subtle left border groups them visually as one unit tied to
   the meaning number on the left. */
.m-body { flex: 1; min-width: 0; padding-left: 10px; border-left: 2px solid var(--rule); }
.gloss { font-family: var(--serif); font-size: 18px; color: var(--ink); font-weight: 500; line-height: 1.35; }
.def-de { font-family: var(--serif); font-size: 13px; color: var(--ink-2); font-style: italic; margin-top: 4px; line-height: 1.45; }
.def-loc { font-family: var(--serif); font-size: 14px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }
.note { margin-top: 8px; padding: 6px 10px; background: var(--paper-tinted); font-family: var(--mono); font-size: 11px; color: var(--ink-2); }

.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tag { font-family: var(--mono); font-size: 9px; padding: 2px 7px; border: 1px solid var(--rule-strong); color: var(--ink-2); letter-spacing: .3px; text-transform: uppercase; }
.tag.reg { border-color: var(--accent-2); color: var(--accent-2); }
.tag.region { border-color: var(--accent); color: var(--accent); cursor: help; }

/* Any chip with a tooltip — instant CSS tooltip on desktop hover; on touch
   devices tips.js strips data-tip behaviour and opens a bottom sheet. */
[data-tip] { cursor: help; position: relative; }
@media (hover: hover) {
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--serif);
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.3;
    padding: 5px 9px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .08s ease;
    z-index: 20;
  }
  [data-tip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--ink);
    pointer-events: none;
    opacity: 0;
    transition: opacity .08s ease;
    z-index: 20;
  }
  [data-tip]:hover::after,
  [data-tip]:hover::before { opacity: 1; }
}

/* Bottom-sheet used on touch devices to surface `data-tip` text. Hidden
   until `.open` is toggled by tips.js. */
.tip-sheet { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.tip-sheet.open { pointer-events: auto; }
.tip-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background .18s ease; }
.tip-sheet.open .tip-sheet-backdrop { background: rgba(0, 0, 0, 0.32); }
.tip-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 1px solid var(--rule-strong); padding: 22px 24px calc(22px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .22s ease; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12); }
.tip-sheet.open .tip-sheet-panel { transform: translateY(0); }
.tip-sheet-text { font-family: var(--serif); font-size: 16px; color: var(--ink); line-height: 1.4; text-align: center; }

.examples { list-style: none; padding: 0; margin: 12px 0 0 0; }
.examples li { padding: 10px 0; border-bottom: 1px dotted var(--rule); }
.examples li:last-child { border-bottom: none; }
.ex-de { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.45; }
.ex-de mark { background: var(--highlight); color: var(--ink); padding: 0 2px; font-weight: 500; }
.ex-ru { font-family: var(--serif); font-size: 13px; color: var(--ink-2); font-style: italic; margin-top: 3px; }
.id-de mark { background: var(--highlight); color: var(--ink); padding: 0 2px; font-weight: 500; }
.rek-ex mark { background: var(--highlight); color: var(--ink); padding: 0 2px; font-weight: 500; }

/* 3-column layout under each meaning: KOLLOKATIONEN · SYNONYME · ANTONYME */
.lex-relations { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-top: 14px; padding-top: 12px; border-top: 1px dotted var(--rule); }
.lex-col { min-width: 0; }
.lex-col-head { font-family: var(--mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.lex-col-items { font-family: var(--serif); font-size: 13px; color: var(--ink); line-height: 1.55; }
.lex-col-items a { color: var(--accent); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; font-style: italic; }
.lex-col-items a:hover { text-decoration-style: solid; }
.lex-col-items .lex-plain { font-style: italic; color: var(--ink); }
.lex-col-items .sep { color: var(--ink-3); margin: 0 4px; }

/* Rektion cards — red left accent, formula + case chip + translation
   on top, example in quotes below. Matches the design prototype. */
.rek-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.rek-card { border-left: 3px solid var(--accent); padding: 8px 14px; background: var(--paper); }
.rek-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rek-formula { font-family: var(--serif); font-style: italic; font-size: 16px; font-weight: 500; color: var(--ink); }
.rek-tx { font-family: var(--serif); font-size: 13px; color: var(--ink-3); font-style: italic; }
.rek-example { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.rek-ex mark, .rek-example mark { background: var(--highlight); color: var(--ink); padding: 0 2px; font-weight: 500; }

.case-chip { display: inline-block; min-width: 16px; text-align: center; font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 1px 5px; border: 1px solid; margin: 0 2px; letter-spacing: 0; }

details { margin: 0; }
summary { list-style: none; cursor: pointer; padding: 10px 14px; background: transparent; border: 1px solid var(--rule-strong); display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap; line-height: 1.2; }
summary .dim { font-family: var(--mono); font-size: 10px; letter-spacing: .6px; color: var(--ink-3); text-transform: none; font-style: normal; }
summary::-webkit-details-marker { display: none; }
summary::before { content: '▸'; font-family: var(--mono); color: var(--ink-3); transition: transform 0.15s; }
details[open] summary::before { transform: rotate(90deg); }
details[open] summary { background: var(--paper-tinted); }
details > :not(summary) { padding: 16px 18px; border: 1px solid var(--rule-strong); border-top: none; }

.conj-group-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; padding-bottom: 6px; border-bottom: 1px dotted var(--rule); }

.conj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 24px; }

/* Partizip + Infinitiv share a single grid cell (one column like any
   other tense). Infinitiv sits directly below Partizip; both tables only
   need 2 rows, so the stacked pair still fits in the same vertical budget
   as the surrounding 6-row tense tables. */
.conj-pair { display: flex; flex-direction: column; gap: 18px; }

.conj-table-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.conj-title { font-family: var(--serif-display); font-style: italic; font-size: 18px; font-weight: 400; color: var(--ink); }
.conj-title-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .6px; color: var(--ink-3); text-transform: uppercase; }

.conj-table table { width: 100%; border-collapse: collapse; font-family: var(--serif); font-size: 14px; }
.conj-table td { padding: 3px 10px 3px 0; vertical-align: baseline; white-space: nowrap; }
.conj-person { color: var(--ink-3); font-style: normal; }
.conj-form { color: var(--ink); font-weight: 600; font-style: italic; }
.conj-prefix { color: var(--accent); font-style: italic; font-weight: 500; }
.conj-dash { color: var(--ink-3); }
.conj-pp-tense { color: var(--accent); font-style: italic; font-weight: 500; }

/* Idioms — flat list, no borders */
.idioms { list-style: none; padding: 0; margin: 0; }
.idioms li { padding: 10px 0; border-bottom: 1px dotted var(--rule); }
.idioms li:last-child { border-bottom: none; }
.id-de { font-family: var(--serif); font-size: 15px; color: var(--ink); font-style: italic; }
.id-de mark { font-style: normal; }
.id-tx { font-family: var(--serif); font-size: 13px; color: var(--ink-2); margin-top: 3px; }

/* Komposita — cards grid (German headword + Russian gloss under it) */
/* Unified clickable lemma card — reused by every "word + gloss tile"
   surface: ein-wörter/der-wörter grids, Formen der Zahl 1 (with
   category), Komposita, Wortfamilie. Always rendered as `<a>` with
   accent left-border; hover thickens the border and tints the phrase. */
.lemma-card { display: block; padding: 10px 14px; background: var(--paper-tinted); border-left: 2px solid var(--accent); text-decoration: none; color: inherit; transition: background .15s, padding-left .15s, border-left-width .15s; }
.lemma-card:hover { background: #f1e7d1; border-left-width: 4px; padding-left: 12px; }
.lemma-card:hover .lemma-phrase { color: #b91c1c; }
/* Headword-highlight variant — dark accent fill with paper-colored
   text. Used by counting strips to mark the current numeral. */
.lemma-card-current { background: #5b1e18; border-left-color: #5b1e18; }
.lemma-card-current:hover { background: #4a1915; border-left-color: #4a1915; }
.lemma-card-current .lemma-cat { color: rgba(253, 251, 246, 0.65); }
.lemma-card-current .lemma-phrase { color: var(--paper); }
.lemma-card-current:hover .lemma-phrase { color: var(--paper); }
.lemma-card-current .lemma-gloss { color: rgba(253, 251, 246, 0.8); }
.lemma-cat { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .5px; color: var(--ink-3); text-transform: uppercase; margin-bottom: 4px; }
.lemma-phrase { font-family: var(--serif-display); font-style: italic; font-size: 16px; color: var(--accent); line-height: 1.25; transition: color .15s; }
.lemma-gloss { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); line-height: 1.4; margin-top: 4px; }

.komposita-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 4px; }
/* The card IS the link — grid `stretch` gives equal heights per row;
   hover fills the full card area. */
/* .komposita-card — deprecated, use .lemma-card. Widgets now emit
   .lemma-card directly for compounds and wortfamilie. */

/* Verwandte — inline hyperlinks separated by · */
.verwandte-inline { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.8; margin-top: 6px; }
.verwandte-inline a { color: var(--accent); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.verwandte-inline a:hover { text-decoration-style: solid; }
.verwandte-inline .sep { color: var(--ink-3); margin: 0 6px; }
.verwandte-inline .plain { color: var(--ink); font-style: italic; }

/* Wortfamilie — same card grid as komposita */
.wfam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 4px; }

@media (max-width: 640px) {
  .page { padding: 16px 14px 60px; }
  .headword { font-size: 40px; }
  .syl { font-size: 28px; }
  .conj-grid { grid-template-columns: 1fr; }
  .rek-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}