/* DE: Sprachen-Verzeichnis (Karten, Pin, Trait-Badges, RTL) und die oeffentliche Sprachprofil-Seite.
   EN: Languages directory (cards, pin, trait badges, RTL) and the public language-profile page. */

/* ============================ languages directory ============================ */
.language-grid{list-style:none;display:grid;gap:var(--sp-md);margin-block-start:var(--sp-xl);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.language-card{display:flex;flex-direction:column;gap:var(--sp-2xs);position:relative;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-md);box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.language-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand)}
.language-card__link{text-decoration:none;color:var(--text)}
/* Whole-card click target: the autonym stays the single semantic link, but its hit-area stretches over the
   entire card (accessible "stretched link" — one link per card for screen readers). The pin button is raised
   above it (z-index) so it stays independently clickable. */
.language-card__link::after{content:"";position:absolute;inset:0}
.language-card__autonym{display:block;font-family:var(--font-lexical);font-size:var(--step-1);
  font-weight:600;line-height:1.15;color:var(--brand-strong);padding-inline-end:2.1rem;
  text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
/* Pin toggle: FAINT at rest (discoverable, never fully hidden), and full on hover / keyboard focus /
   once pinned. The pin/pin-slash icons (SidekickIcons) swap on aria-pressed. It is a JS-only affordance:
   the `hidden` attribute MUST win over our display below until the Stimulus controller reveals it
   (progressive enhancement) — a class selector would otherwise override the UA `[hidden]`, restored here. */
.language-card__pin[hidden]{display:none}
.language-card__pin{position:absolute;z-index:1;inset-block-start:var(--sp-xs);inset-inline-end:var(--sp-xs);
  display:inline-flex;align-items:center;justify-content:center;inline-size:1.75rem;block-size:1.75rem;padding:0;
  border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);
  color:var(--text-muted);cursor:pointer;opacity:.7;
  transition:opacity var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
/* DE: Unter dem Finger wächst der Pin auf `--touch-target` (base.css) — und die Eigenbezeichnung daneben
   muss denselben Platz freihalten, sonst läuft sie darunter. Genau das war der Fall: der Pin belegte 44 px
   plus 8 px Einzug, abzüglich der 16 px Kartenpolsterung also 36 px, reserviert waren 33,6 (2,1rem).
   Gemessen zwei Pixel Überlappung — wenig, aber ein Name, der die Breite ausnutzt, verschwindet dort.

   Die Reservierung ist deshalb GERECHNET, nicht geraten: dieselben drei Werte, aus denen der Platzbedarf
   entsteht. Wächst das Touch-Ziel, wächst sie mit. Der Fehler war nicht die falsche Zahl, sondern dass es
   überhaupt eine zweite gab. `padding-inline-end` ist logisch, gilt also im RTL-Fall spiegelbildlich — die
   Karten mit arabischer und Urdu-Eigenbezeichnung liegen genau hier.
   EN: Under a finger the pin grows to `--touch-target` (base.css) — and the autonym beside it must keep the
   same room free or it runs underneath. Which it did: the pin takes 44px plus 8px inset, less the card's 16px
   padding, so 36px, while 33.6px (2.1rem) was reserved. Measured: two pixels of overlap — little, but a name
   using the full width disappears there. The reservation is therefore COMPUTED, not guessed: the same three
   values the requirement is made of, so it grows with the target. The defect was not the wrong number but
   that a second number existed at all. `padding-inline-end` is logical, so it mirrors under RTL — the cards
   with Arabic and Urdu autonyms sit exactly here. */
@media (pointer: coarse) {
  .language-card__autonym {
    padding-inline-end: calc(var(--touch-target) + var(--sp-xs) - var(--sp-md));
  }
}
.language-card__pin-svg{inline-size:0.95rem;block-size:0.95rem;display:block}
.language-card__pin .icon-unpin{display:none}
/* Pinned = a filled GREEN pin. The slashed „unpin" icon appears ONLY on hover / keyboard focus, so the
   strike-through reads as the remove affordance — the resting state stays a clean green pin (owner request). */
.language-card__pin[aria-pressed="true"] .icon-pin{fill:currentColor}
.language-card__pin[aria-pressed="true"]:hover .icon-pin,
.language-card__pin[aria-pressed="true"]:focus-visible .icon-pin{display:none}
.language-card__pin[aria-pressed="true"]:hover .icon-unpin,
.language-card__pin[aria-pressed="true"]:focus-visible .icon-unpin{display:block}
.language-card:hover .language-card__pin,
.language-card__pin:focus-visible,
.language-card__pin[aria-pressed="true"]{opacity:1}
.language-card__pin:hover,.language-card__pin:focus-visible{color:var(--brand);border-color:var(--brand);background:var(--surface-2)}
.language-card__pin[aria-pressed="true"]{color:var(--brand-strong);border-color:var(--brand)}
/* RTL languages (arb, fas, urd, prs, pus): the autonym is right-aligned, so it BEGINS at the card's right
   edge — exactly where the pin sits. Move the pin to the inline-start (left); the autonym's
   padding-inline-end (which resolves to the left in RTL) already reserves the room, so they never overlap. */
.language-card--rtl .language-card__pin{inset-inline-start:var(--sp-xs);inset-inline-end:auto}
.language-card__link:hover .language-card__autonym{text-decoration:underline;text-decoration-thickness:.06em}
.language-card__exonym{color:var(--text-muted);font-size:var(--step--1)}
.language-card__meta{margin-block-start:auto;color:var(--text-muted);font-size:var(--step--1);
  display:flex;gap:.5ch;align-items:baseline}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}

/* trait badges — glyph + text, never colour alone */
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2xs);padding:0;margin-block:var(--sp-2xs)}
.badge{display:inline-flex;align-items:center;gap:.35em;font-size:var(--step--1);font-weight:600;
  padding:.2rem .65rem;border-radius:var(--radius-pill);border:1px solid var(--border);
  background:var(--surface-2);color:var(--text)}
/* the glyph can be a click letter (ǀ) standing for „this language has clicks" — lexical font so it renders */
.badge__glyph{font-size:1.05em;line-height:1;font-family:var(--font-lexical)}
.badge--rtl{background:var(--c-sky-700);color:#fff;border-color:transparent}
.badge--sign{background:var(--c-berry-700);color:#fff;border-color:transparent}
.badge--disjunctive{background:var(--accent-surface);color:var(--accent);border-color:transparent}
.badge--clicks{background:var(--brand-surface);color:var(--brand-strong);border-color:transparent}
/* Trust marker for textbook lists (ADR 0041): never colour alone — the text label carries the meaning,
   the title attribute the hover hint. Muted for „unauthorized", brand for „official". */
.auth-badge{display:inline-block;font-size:var(--step--2);font-weight:600;padding:.1rem .55rem;
  border-radius:var(--radius-pill);border:1px solid var(--border);vertical-align:middle;margin-inline-start:.5ch}
.auth-badge--unauthorized{background:var(--surface-2);color:var(--text-muted)}
.auth-badge--official{background:var(--brand-surface);color:var(--brand-strong);border-color:transparent}
/* ADR 0041 ph2: the pupil word list grouped into sections (class list + assigned textbook units) and the
   teacher's assignment list. Plain, like the rest of the classroom area. */
.pwl-section{margin-block-end:var(--sp-lg)}
.pwl-section__title{display:flex;align-items:center;gap:.5ch;flex-wrap:wrap;font-size:var(--step-1)}
.assigned-units{margin-block-start:var(--sp-xl)}
.assigned-units__list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.4rem}
.assigned-units__item{display:flex;align-items:center;gap:.6ch;flex-wrap:wrap}
/* ADR 0041 ph3: the pupil's first-language (L1) switch + the L1 match shown beside each word (— for an
   honest gap, HR3). Plain, like the rest of the classroom area. */
/* Word-list lemmata are content-language text → lexical font so clicks (ǀǁǂǃ), tone marks and RTL render
   (HR2), exactly like the public word page. Without this they inherit the UI font, which has no click glyphs. */
.pupil-word-list__item > a,.class-word-list__item > a{font-family:var(--font-lexical)}
.pwl-l1-switch{display:flex;align-items:center;gap:.5ch;flex-wrap:wrap;margin-block-end:var(--sp-md)}
.pwl-l1{color:var(--text-muted);margin-inline-start:.5ch;font-family:var(--font-lexical)}
.pwl-l1::before{content:"→ ";color:var(--text-muted)}
.pwl-l1--gap{color:var(--text-muted);font-style:italic}
/* ADR 0041 ph4: on the class word list, the „keep" toggle mirrors the „practice" toggle; a kept word gets a
   quiet filled state (never colour alone — aria-pressed carries the meaning) and a link to the child's „My
   words" page. That page's own styles (rich cards, the „practice" panel, print) live in student-list.css. */
.student-list__toggle[aria-pressed="true"]{background:var(--brand-surface);color:var(--brand-strong);border-color:transparent}
.pupil-word-list__item.is-kept{box-shadow:inset 2px 0 0 var(--brand)}
.pupil-word-list__my-words-link{margin-block-start:var(--sp-sm)}

/* language profile (show) */
.language-profile__head{display:flex;flex-direction:column;gap:var(--sp-sm)}
.language-profile h1{font-family:var(--font-lexical);font-size:var(--lemma);font-weight:600;line-height:1.05;margin-block:0}
.language-profile__exonym{color:var(--text-muted);font-size:var(--step-1)}
.data-grid{display:grid;gap:var(--sp-sm) var(--sp-lg);margin:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr))}
.data-grid > div{display:flex;flex-direction:column;gap:.1rem}
.data-grid dt{color:var(--text-muted);font-size:var(--step--1)}
.data-grid dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.language-profile__actions{display:flex;flex-wrap:wrap;gap:var(--sp-md);margin-block-start:var(--sp-xl)}

/* Public language profile (SP-2): „shared vs. specific", layperson-friendly, with real examples. Logical
   properties throughout so RTL languages (arb …) mirror correctly; example words use --font-lexical so
   non-Latin scripts render in a fitting face. The whole core is JS-free (only the native <details> ⓘ). */
/* A profile section's H2 sits inside a .section-head <div>, so it misses the global `main section > h2`
   bottom margin — give it one here so every heading has air below it. The lead then starts at 0 (no more
   negative pull, which used to jam it against the heading). */
.language-profile__section .section-head{margin-block-end:var(--sp-sm)}
.language-profile__intro{color:var(--text-muted);max-inline-size:var(--measure);margin-block:0 var(--sp-md)}
.language-profile__items{display:grid;gap:var(--sp-sm);padding:0;margin:0}
.language-profile__item{display:flex;flex-direction:column;gap:.3rem;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-sm) var(--sp-md)}
.language-profile__section--specific .language-profile__item{border-inline-start:.28rem solid var(--accent)}
.language-profile__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5ch var(--sp-sm)}
/* The ⓘ explanation is a full-width disclosure: when open it wraps to its own line so the body aligns with
   the card's left edge, instead of floating indented under the icon (the inline-block default did that). */
.language-profile__row .info-hint[open]{flex-basis:100%;margin-block-start:.3rem}
.language-profile__row .info-hint__body{margin-inline:0}
.language-profile__term{font-weight:700;font-size:var(--step-0)}
.language-profile__inventory{font-size:var(--step--1);font-weight:700;color:var(--accent);
  background:var(--accent-surface);border-radius:var(--radius-pill);padding:.05rem .6rem}
.language-profile__example{margin:0;color:var(--text-muted);font-size:var(--step--1);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5ch}
.language-profile__example-lead{font-style:italic}
.language-profile__example-link{font-family:var(--font-lexical);font-weight:600;text-decoration:none;
  color:var(--link)}
.language-profile__example-link:hover{text-decoration:underline}
.language-profile__example-value{color:var(--text-muted)}
.language-profile__ai{font-size:var(--step--2);font-weight:700;color:var(--accent);
  background:var(--accent-surface);border-radius:var(--radius-pill);padding:.05rem .5rem;white-space:nowrap}
.language-profile__gap{color:var(--text-muted);background:var(--surface);border:1px dashed var(--border);
  border-radius:var(--radius-md);padding:var(--sp-sm) var(--sp-md);max-inline-size:var(--measure)}
.language-profile__contribute-wrap{margin-block-start:var(--sp-md)}
.language-profile__contribute{font-weight:600}
.language-profile__section--contribute{background:var(--brand-surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-lg)}
.language-profile__section--contribute .section-head{margin-block-start:0}
.language-profile__meta{margin-block-start:var(--sp-2xl)}
.language-profile__meta dt{text-transform:none}
/* DE: Wer an einer Sprache mitgearbeitet hat — eigene Box, damit die Nennung nicht als Randnotiz gelesen
   wird. Je Person eine ZEILE: nebeneinander gesetzt liefen die Namen zusammen („Erdmute Beispiel (Institut)
   Talea Muster (…)"), und wo eine Aufzählung von Menschen wie ein Fließtext aussieht, verliert jeder
   einzelne Name seine Kontur. `list-style:none` statt Punkte — die Namen sind keine Aufzählungspunkte,
   sondern Nennungen; die Listenstruktur bleibt für Screenreader trotzdem erhalten.
   EN: Who worked on a language — its own box so the credit is not read as a footnote, and one person per
   LINE: set side by side the names ran together, and a run-on list of people robs each name of its shape.
   No bullets — these are credits, not list items; the list semantics stay for screen readers. */
.language-contributors{background:var(--brand-surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-lg);margin-block-end:var(--sp-lg)}
.language-contributors .section-head{margin-block-start:0}
.language-contributors__intro{color:var(--text-muted);max-inline-size:var(--measure);margin-block:0 var(--sp-md)}
.language-contributors__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.language-contributors__person{max-inline-size:var(--measure)}
/* Reviewer-pool prose (SP-3): readable editorial paragraphs/lists, measure-capped. */
.language-profile__prose-item{margin-block-end:var(--sp-md)}
.language-profile__prose-title{font-size:var(--step-0);margin-block:var(--sp-sm) .2rem}
.language-profile__prose-item p{margin-block:.4rem;max-inline-size:var(--measure)}
.language-profile__prose-item ul{margin-block:.4rem;padding-inline-start:var(--sp-lg)}
.language-profile__prose-item li{list-style:disc}
/* Didactic block (Feature B): same prose styling, a subtle accent + start-rule so it reads as its own section. */
.language-profile__didactic{border-inline-start:.28rem solid var(--accent);padding-inline-start:var(--sp-md)}
.language-profile__didactic .language-profile__prose-title{color:var(--accent)}


/* Handoff 3a · Klassenwörter mobil: eine Karte pro Wort — Thumb, gestapeltes Lemma+L1, zwei
   Daumen-Aktionen (>=44px). Die Aktions-Knöpfe sind JS-enthüllt (progressive enhancement). */
.pupil-word-list__items { display: grid; gap: .5rem; padding: 0; }
.pupil-word-list__item {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: .7rem .85rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; list-style: none;
}
.pupil-word-list__thumb {
  inline-size: 44px; block-size: 44px; object-fit: cover; flex-shrink: 0;
  border-radius: 11px; background: var(--brand-surface);
}
.pupil-word-list__word { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: .1rem; }
.pupil-word-list__word > a { font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.pupil-word-list__word > a:hover, .pupil-word-list__word > a:focus-visible { text-decoration: underline; }
.pupil-word-list__word .pwl-l1 { font-family: var(--font-lexical); font-size: var(--step--1); color: var(--text-muted); }
.word-practice__toggle, .student-list__toggle {
  min-inline-size: 44px; min-block-size: 44px; padding-inline: .8rem;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-weight: 700; font-size: var(--step--1); cursor: pointer; flex-shrink: 0;
}
.word-practice__toggle[aria-pressed="true"], .student-list__toggle[aria-pressed="true"] {
  border-color: var(--brand); background: var(--brand-surface); color: var(--brand-strong);
}

/* Handoff 3c · ohne Klasse: einladender Code-Einstieg statt bloßem Hinweis. */
.pwl-enter {
  max-inline-size: 26rem; background: var(--brand-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-lg);
  display: flex; flex-direction: column; gap: var(--sp-sm);
}
.pwl-enter__lead { margin: 0; }
.pwl-enter__label { font-weight: 700; font-size: var(--step--1); }
.pwl-enter__row { display: flex; gap: var(--sp-xs); }
.pwl-enter__input {
  flex: 1; min-inline-size: 0; font-size: 1.15rem; letter-spacing: .06em;
  padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); text-transform: uppercase;
}
.pwl-enter .hint { margin: 0; }