/* DE: Nominalklassen-System-Panel (B / language-her). Ein ruhiges Klassen-Raster; jede Klasse eine Karte mit
       Paar, typischer Bedeutung und Konkordanz. Lücken („noch zu erfassen") sind leise, nicht alarmierend —
       eine Einladung, kein Fehler. Server-gerendert, ohne JS.
   EN: Noun-class system panel. A calm grid of classes; each class a card with its pair, typical meaning and
       concord. Gaps („not yet recorded") are quiet, not alarming — an invitation, not an error. No JS. */
.noun-class-system { margin-block: var(--sp-lg, 1.5rem); }
.noun-class-system__intro { color: var(--text-muted, #555); max-inline-size: 60ch; margin-block-end: .5rem; }

/* Tier 1 — Understand: one concrete example, a calm highlighted line (built only from authored data). */
.noun-class-system__example {
  margin: 0 0 var(--sp-md, 1rem); padding: .5rem .75rem; max-inline-size: 60ch;
  background: var(--surface-2, #f3f3f3); border-radius: var(--radius-sm); color: var(--text);
}
.noun-class-system__example bdi { font-family: var(--font-lexical); font-weight: 700; }

/* Tier 2 — the „How the classes work" sub-heading over the grid. */
.noun-class-system__tier { margin: 0 0 .6rem; font-size: var(--step-0, 1rem); color: var(--text); }

.noun-class-system__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.noun-class {
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm);
  /* the class colour (Lexicon::NounClassColor) as a quiet left accent — a recognition cue; the class number
     stays the meaning. --class-hue is set per card in the partial; without it the accent is a neutral border. */
  border-inline-start: 4px solid var(--class-hue, var(--border, #ddd));
  background: var(--surface, #fff); padding: .75rem .7rem .75rem .9rem;
}
.noun-class__number { font-weight: 700; margin: 0 0 .3rem; }

/* Reusable noun-class badge (word page + panel): count dots in the class hue + the class number as text.
   The number carries the meaning (never colour-only, WCAG); the label stays in --text for full contrast,
   the hue lives in the dots + border + a faint fill. The DOT COUNT is the colour-independent sg/pl cue
   (● singular, ●● plural, locative none). Neutral fallback when no --class-hue is set. */
.class-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .05rem .5rem .05rem .4rem; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--class-hue, var(--text-muted)) 45%, transparent);
  background: color-mix(in oklab, var(--class-hue, var(--text-muted)) 8%, var(--surface, #fff));
  color: var(--text); font-size: var(--step--1, .9rem); line-height: 1.5;
}
.class-badge__dots { display: inline-flex; align-items: center; gap: .15rem; flex: none; }
.class-badge__dot {
  inline-size: .55rem; block-size: .55rem; border-radius: 50%; flex: none;
  background: var(--class-hue, var(--text-muted));
}
/* Composite plurals (6+15a, 6+19): the second dot carries the partner class's colour (--class-hue-2). */
.class-badge__dot--alt { background: var(--class-hue-2, var(--class-hue, var(--text-muted))); }
.class-badge__label { font-weight: 600; }

/* CSP-safe class colours: the resolver (Lexicon::NounClassColor) emits an `nc-class-<key>` class; this sets the
   local --class-hue that the card accent, the badge dots and the morpheme prefix all read. Applied via a
   stylesheet rule (not an inline style) because the child platform's CSP is `style-src :self` — inline styles
   would be blocked. ONE HUE PER SG/PL PAIR (class 1 & 2 share hue 255, singular light / plural dark), so a pair
   reads as belonging together; locatives (16–18) are neutral grey; composite plurals (6+15a, 6+19) also set
   --class-hue-2 for their second badge dot. Hues + recipes: db/curriculum/otjiherero_class_colors.json
   (Orthography 4 attested; colour = design proposal). Generated — keep in sync with that source of truth. */
.nc-class-1 { --class-hue: oklch(0.58 0.13 255); }
.nc-class-2 { --class-hue: oklch(0.42 0.13 255); }
.nc-class-1a { --class-hue: oklch(0.58 0.13 225); }
.nc-class-2b { --class-hue: oklch(0.42 0.13 225); }
.nc-class-3 { --class-hue: oklch(0.58 0.13 320); }
.nc-class-4 { --class-hue: oklch(0.42 0.13 320); }
.nc-class-5 { --class-hue: oklch(0.58 0.13 20); }
.nc-class-6 { --class-hue: oklch(0.42 0.13 20); }
.nc-class-7 { --class-hue: oklch(0.58 0.13 195); }
.nc-class-8 { --class-hue: oklch(0.42 0.13 195); }
.nc-class-9 { --class-hue: oklch(0.58 0.13 60); }
.nc-class-10 { --class-hue: oklch(0.42 0.13 60); }
.nc-class-11 { --class-hue: oklch(0.58 0.13 110); }
.nc-class-12 { --class-hue: oklch(0.42 0.13 110); }
.nc-class-13 { --class-hue: oklch(0.58 0.13 355); }
.nc-class-14 { --class-hue: oklch(0.42 0.13 355); }
.nc-class-15 { --class-hue: oklch(0.48 0.13 300); }
.nc-class-15a { --class-hue: oklch(0.45 0.09 85); }
.nc-class-19 { --class-hue: oklch(0.45 0.09 170); }
.nc-class-16, .nc-class-17, .nc-class-18 { --class-hue: oklch(0.5 0.012 152); }
.nc-class-6-15a { --class-hue: oklch(0.42 0.13 20); --class-hue-2: oklch(0.58 0.13 85); }
.nc-class-6-19 { --class-hue: oklch(0.42 0.13 20); --class-hue-2: oklch(0.58 0.13 170); }

/* Dark theme: same hue per pair, lifted lightness for contrast on dark surfaces. */
:root[data-theme="dark"] {
  .nc-class-1 { --class-hue: oklch(0.75 0.11 255); }
  .nc-class-2 { --class-hue: oklch(0.62 0.11 255); }
  .nc-class-1a { --class-hue: oklch(0.75 0.11 225); }
  .nc-class-2b { --class-hue: oklch(0.62 0.11 225); }
  .nc-class-3 { --class-hue: oklch(0.75 0.11 320); }
  .nc-class-4 { --class-hue: oklch(0.62 0.11 320); }
  .nc-class-5 { --class-hue: oklch(0.75 0.11 20); }
  .nc-class-6 { --class-hue: oklch(0.62 0.11 20); }
  .nc-class-7 { --class-hue: oklch(0.75 0.11 195); }
  .nc-class-8 { --class-hue: oklch(0.62 0.11 195); }
  .nc-class-9 { --class-hue: oklch(0.75 0.11 60); }
  .nc-class-10 { --class-hue: oklch(0.62 0.11 60); }
  .nc-class-11 { --class-hue: oklch(0.75 0.11 110); }
  .nc-class-12 { --class-hue: oklch(0.62 0.11 110); }
  .nc-class-13 { --class-hue: oklch(0.75 0.11 355); }
  .nc-class-14 { --class-hue: oklch(0.62 0.11 355); }
  .nc-class-15 { --class-hue: oklch(0.72 0.11 300); }
  .nc-class-15a { --class-hue: oklch(0.72 0.11 85); }
  .nc-class-19 { --class-hue: oklch(0.72 0.11 170); }
  .nc-class-16, .nc-class-17, .nc-class-18 { --class-hue: oklch(0.7 0.01 152); }
  .nc-class-6-15a { --class-hue: oklch(0.62 0.11 20); --class-hue-2: oklch(0.75 0.11 85); }
  .nc-class-6-19 { --class-hue: oklch(0.62 0.11 20); --class-hue-2: oklch(0.75 0.11 170); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    .nc-class-1 { --class-hue: oklch(0.75 0.11 255); }
    .nc-class-2 { --class-hue: oklch(0.62 0.11 255); }
    .nc-class-1a { --class-hue: oklch(0.75 0.11 225); }
    .nc-class-2b { --class-hue: oklch(0.62 0.11 225); }
    .nc-class-3 { --class-hue: oklch(0.75 0.11 320); }
    .nc-class-4 { --class-hue: oklch(0.62 0.11 320); }
    .nc-class-5 { --class-hue: oklch(0.75 0.11 20); }
    .nc-class-6 { --class-hue: oklch(0.62 0.11 20); }
    .nc-class-7 { --class-hue: oklch(0.75 0.11 195); }
    .nc-class-8 { --class-hue: oklch(0.62 0.11 195); }
    .nc-class-9 { --class-hue: oklch(0.75 0.11 60); }
    .nc-class-10 { --class-hue: oklch(0.62 0.11 60); }
    .nc-class-11 { --class-hue: oklch(0.75 0.11 110); }
    .nc-class-12 { --class-hue: oklch(0.62 0.11 110); }
    .nc-class-13 { --class-hue: oklch(0.75 0.11 355); }
    .nc-class-14 { --class-hue: oklch(0.62 0.11 355); }
    .nc-class-15 { --class-hue: oklch(0.72 0.11 300); }
    .nc-class-15a { --class-hue: oklch(0.72 0.11 85); }
    .nc-class-19 { --class-hue: oklch(0.72 0.11 170); }
    .nc-class-16, .nc-class-17, .nc-class-18 { --class-hue: oklch(0.7 0.01 152); }
    .nc-class-6-15a { --class-hue: oklch(0.62 0.11 20); --class-hue-2: oklch(0.75 0.11 85); }
    .nc-class-6-19 { --class-hue: oklch(0.62 0.11 20); --class-hue-2: oklch(0.75 0.11 170); }
  }
}
.noun-class__pairing { color: var(--brand-strong, #2f7a4d); font-size: var(--step--1, .9rem); margin: 0 0 .2rem; }
.noun-class__anchor { font-size: var(--step--1, .9rem); margin: 0 0 .4rem; }
.noun-class__anchor-label { color: var(--text-muted, #777); }

/* The prefix is the class's recognition cue — shown up front, tinted in the class colour (--class-hue,
   inherited from the nc-class-<key> card; contrast-checked as text). Value verbatim in <bdi> (HR2). */
.noun-class__prefix { font-size: var(--step--1, .9rem); margin: 0 0 .2rem; }
.noun-class__prefix-label { color: var(--text-muted, #777); }
.noun-class__prefix-value { font-family: var(--font-lexical); font-weight: 700; color: var(--class-hue, var(--text)); }

/* Tier 3 — Discover: the remaining concord, opt-in via a native <details> (no JS, WCAG). The disclosure state
   is conveyed by the native summary; the ▸/▾ is decorative. */
.noun-class__discover { margin: .4rem 0 0; }
.noun-class__discover > summary {
  cursor: pointer; list-style: none;
  color: var(--brand-strong, #2f7a4d); font-size: var(--step--1, .9rem); font-weight: 600;
}
.noun-class__discover > summary::-webkit-details-marker { display: none; }
.noun-class__discover > summary::before { content: "\25B8\00a0"; } /* ▸ collapsed */
.noun-class__discover[open] > summary::before { content: "\25BE\00a0"; } /* ▾ open */
.noun-class__discover > summary:focus-visible { outline: 2px solid var(--focus, #2684ff); outline-offset: 2px; border-radius: 2px; }
.noun-class__discover .noun-class__concord { margin-top: .35rem; }

.noun-class__concord { margin: .2rem 0 0; display: grid; gap: .15rem .6rem; grid-template-columns: auto 1fr; }
.noun-class__concord-cell { display: contents; }
.noun-class__concord dt { color: var(--text-muted, #777); font-size: var(--step--2, .8rem); }
.noun-class__concord dd { margin: 0; font-size: var(--step--1, .9rem); }

.noun-class__gap { color: var(--text-muted, #999); font-size: var(--step--1, .9rem); font-style: italic; margin: .2rem 0 0; }