/* ═══════════════════════════════════════════════════════════════════════════
   Biedtrainer — huisstijl "Clubavond" (nachtblauw & terracotta) als TOKEN-LAAG
   Fase 0 van de normale-view/club-overdracht (17-09-2026), besluit README §10c
   (16-09, avond) + §13 "Correcties en besluiten" (17-09, avond).

   Doel: de hele app in één huisstijl zonder HTML- of gedragswijziging in de
   expert-schil. Dit bestand wordt ná de inline <style> van app/index.html
   geladen, zodat het de :root/.light- en .dark-tokens daar overschrijft;
   bestaande selectors rusten al op var(--…) en volgen dus vanzelf.

   Scope fase 0: tokens, typografie, topbar/zijmenu, radius, actieve sub-tab.
   Bewust NIET hier: de klassen van de normale schil (.n-kop, .n-tabbar, …) —
   die horen bij fase 1, wanneer die schil daadwerkelijk gebouwd wordt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Kleurtokens (licht) ─────────────────────────────────────────────── */
:root, .light{
  --bg:#f6f3ec;            /* was #faf9f7 — crème iets warmer */
  --panel:#ffffff;
  --panel2:#eceff3;        /* was #f7f7f8 — koele lichte tint uit het palet */
  --soft:#eceff3;          /* was #f0f1f2 */
  --line:#e3e6ea;          /* was #ececec */
  --line2:#eef0f3;         /* was #f3f3f4 */
  --txt:#1c2230;           /* was #23272b — inkt met blauwzweem; ook de schoppenkleur */
  --txt2:#5b6472;          /* was #565c62 */
  /* De ontwerpset kent twee grijstinten (--n-muted / --n-hint), de codebase drie
     (--txt2 / --muted / --hint). --txt2 krijgt --n-muted, --hint krijgt --n-hint, en
     --muted zit daartussen op een waarde die als kleine tekst 4,5:1 haalt tegen alle
     drie de achtergronden waarop hij voorkomt (--panel #ffffff, --bg #f6f3ec,
     --panel2/--soft #eceff3): 5,40 / 4,87 / 4,68. */
  --muted:#616b7a;         /* was #9198a0 (2,77:1 — onvoldoende als tekst) */
  /* --hint was #9aa3b0 (2,30 / 2,55 / 2,21 op --bg / --panel / --panel2) en werd in de
     praktijk wél als tekst gebruikt. Besluit Dafydd 19-09: contrasttokens naar AA.
     Nu 4,71 / 5,22 / 4,53 — nog steeds een grijs, nog steeds lichter dan --muted
     (4,87 / 5,40 / 4,68), maar leesbaar. Gemeten met tools/contrast-meting.mjs. */
  --hint:#646d7c;
  --brand:#c9430f;         /* ongewijzigd — enige actiekleur */
  /* De ontwerpset kent één accenttint (--n-accent-tint:#fbf2ee); de codebase twee.
     --brand-soft is die tint, één stap lichter gezet zodat brand-tekst erop 4,50:1
     haalt in plaats van 4,43:1 (o.a. de systeem-pill in het zijmenu). */
  --brand-soft:#fcf4f0;
  --brand-tint:#fdf7f4;
  --good:#1a7f37;--good-soft:#e7f4ea;
  --warn:#b47400;--warn-soft:rgba(180,116,0,.10);
  --bad:#d63b2a;--bad-soft:#fbe9ea;
  --teal:#0f8a86;--blue:#1d4ed8;--blue-soft:#e8effd;--purple:#6b4ef0;
  --partner:#0f8a86;
  /* ♥/♦ in de tweekleuren-stand. Was #d63b2a (gelijk aan --bad), maar dat haalt op
     --panel2/--soft maar 4,03:1. Nu #c83322: 4,79 / 5,31 / 4,61 op --bg/--panel/--panel2.
     Bewust losgekoppeld van --bad, dat een statuskleur is en geen kaartsymbool. */
  --suit-red:#c83322;

  /* kop/schil: topbar, zijmenukop, donkere kaarten */
  --kop:#1c2e4a;
  --kop-txt:#f6f3ec;
  --kop-acc:#f0b08a;                 /* zalm-accent op donker: XP-ring, actieve onderstreping */
  --kop-soft:rgba(246,243,236,.14);
  --kop-line:rgba(246,243,236,.25);
  --good-on-dark:#8fd1a8;--bad-on-dark:#ffb3ab;

  /* Merkvlak: bewust los van --brand. Op het terracotta vlak haalt crème 4,41:1 en
     wit 4,89:1; in donker zou --brand (#e8632f) zelfs met wit op 3,36:1 blijven steken.
     Daarom één vaste vlakkleur en wit teken, in beide standen. */
  --merkvlak:#c9430f;--merkvlak-txt:#ffffff;

  --shadow:0 6px 24px rgba(28,46,74,.10);
  --shadow2:0 1px 2px rgba(28,46,74,.06);

  /* actieve sub-tab: nachtblauw i.p.v. zwart (README §10c punt 5). In donker
     blijft de bestaande omgekeerde stand staan — nachtblauw op een donkere
     achtergrond zou de actieve tab juist onzichtbaar maken. */
  --subtab-on:var(--kop);--subtab-on-txt:var(--kop-txt);
}

/* ── 2. Donker (volgt de bestaande .dark-klasse) ────────────────────────── */
.dark{
  --bg:#12161d;--panel:#1a2029;--panel2:#242b36;--soft:#242b36;--line:#2a323d;--line2:#222933;
  --txt:#e8ebef;--txt2:#aab3bf;
  /* zelfde redenering als in licht: 7,02 / 6,34 / 5,52 tegen --bg #12161d,
     --panel #1a2029 en --panel2/--soft #242b36 */
  /* --hint was #6f7987 (4,11 / 3,71 / 3,23) — zelfde AA-besluit als in licht.
     Nu 5,90 / 5,33 / 4,64 tegen --bg / --panel / --panel2. */
  --muted:#98a2b0;--hint:#8a94a2;
  --brand:#e8632f;--brand-soft:#2a1a12;--brand-tint:#1e1712;
  --good:#1a7f37;--good-soft:#16281b;--bad:#d63b2a;--bad-soft:#2b1616;
  --suit-red:#ff6b5e;
  --merkvlak:#c9430f;--merkvlak-txt:#ffffff;
  --kop:#0f1a2c;--kop-txt:#e8ebef;--kop-acc:#f0b08a;
  --kop-soft:rgba(232,235,239,.10);--kop-line:rgba(232,235,239,.18);
  /* donker houdt de bestaande omgekeerde actieve sub-tab (licht vlak, donkere
     tekst); nachtblauw op een donkere achtergrond zou hem onzichtbaar maken */
  --subtab-on:var(--txt);--subtab-on-txt:var(--bg);
  --shadow:0 10px 30px rgba(0,0,0,.4);--shadow2:0 2px 8px rgba(0,0,0,.3);
}

/* Eén inkt-/schoppenkleur voor de hele app: #1c2230 (licht) en #e8ebef (donker).
   In de tweekleuren-stand volgt ♠/♣ automatisch --txt; de vierkleuren-toggle
   (.fourcolor) staat in app/index.html en gebruikt dezelfde twee waarden. */

/* ── 3. Typografie ──────────────────────────────────────────────────────── */
html{font-size:112.5%}
:root{
  --bt-tekst:1rem;--bt-bediening:1rem;--bt-klein:.875rem;
  --bt-regelhoogte:1.5;--bt-tikdoel:2.75rem;--bt-hoofdactie:3rem;
  --bt-werkruimte:84rem;--bt-leesbreedte:68ch;--bt-ruimte:clamp(12px,2vw,32px);
}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--bt-tekst);line-height:var(--bt-regelhoogte)}
/* .fh is de bestaande kop-/cijferklasse (was Space Grotesk) — wordt serif. */
.fh, .tb-h1, .tb-h2, .tb-kpival, .qlhead h1, .ql-cell,
header.top .apptitle, header.top .kr-hoofd .kr-lbl, .drawer .apptitle{
  font-family:'DM Serif Display',Georgia,serif;font-weight:400;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* Kleine cijfers en chips (<14px) blijven DM Sans voor leesbaarheid. */
.qlgames .fh, .tb-chip .fh, .sumchip .fh, .tb-chip .n, .tb-tabcount{
  font-family:'DM Sans',sans-serif;font-weight:700}
/* Eyebrow-labels minder schreeuwerig (was .13em / .12em uppercase). */
.eyebrow, .hdrlbl{letter-spacing:.09em;color:var(--muted)}

/* ── 4. Topbar & zijmenukop in nachtblauw ───────────────────────────────── */
header.top{background:var(--kop);border-bottom-color:var(--kop);color:var(--kop-txt)}
header.top .burger{color:var(--kop-txt)}
header.top .burger:hover{background:var(--kop-soft)}
header.top .apptitle, header.top .topttl, header.top .kr-seg{color:var(--kop-txt)}
header.top .kr-seg:not([disabled]):hover{background:var(--kop-soft);color:var(--kop-txt)}
header.top .kr-sub .kr-lbl, header.top .kr-sep{color:rgba(246,243,236,.55)}
header.top .kr-sub:not([disabled]):hover .kr-lbl{color:var(--kop-txt)}
header.top .syspill{background:var(--kop-soft);color:var(--kop-txt)}
header.top .omgpill, header.top .iconbtn{background:transparent;border-color:var(--kop-line);color:var(--kop-txt)}
header.top .omgpill:hover, header.top .iconbtn:hover{background:var(--kop-soft);border-color:var(--kop-line);color:var(--kop-txt)}
/* De XP-ring krijgt zijn conic-gradient inline mee (app.js) uit --brand/--soft;
   die twee worden hier lokaal omgezet naar de kop-kleuren i.p.v. overschreven. */
header.top .xpdisc{--brand:var(--kop-acc);--soft:var(--kop-soft)}
header.top .xpdisc>span{background:var(--kop);color:var(--kop-acc)}
/* Merkvlak: ♠ wordt het ?-vak (README §13); het terracotta vlak blijft.
   Het ♠-teken is een tekstknoop en kan niet rechtstreeks worden vervangen; het wordt
   doorzichtig gezet en het ?-vak komt er als ::before overheen. Bewust GEEN font-size:0
   op het element zelf: modules/tafel-club-wl.js zet daar inline font-size:18px op de
   38px-tegels, wat een font-size:0 uit een stylesheet overrulet — dan zou je "?♠" zien.
   Met `font-size:1em` op de ::before schaalt het teken juist wél met die tegels mee. */
.brandtile{position:relative;background:var(--merkvlak);color:transparent;border-radius:8px}
.brandtile::before{content:"?";position:absolute;inset:0;display:grid;place-items:center;
  color:var(--merkvlak-txt);font-family:'DM Serif Display',Georgia,serif;font-size:1em;line-height:1}

.drawer .drawer-head{background:var(--kop);color:var(--kop-txt);border-bottom:0}
.drawer .drawer-head .apptitle, .drawer .drawer-close{color:var(--kop-txt)}
.drawer .drawer-close:hover{background:var(--kop-soft)}
/* De actieve zijmenu-knop houdt bewust --brand-tint (zoals in app/index.html): daar
   haalt brand-tekst 4,61:1, tegen 4,50:1 op --brand-soft. */
.drawer .tabbtn.on{background:var(--brand-tint);color:var(--brand)}
.drawer .tabbtn.on::before{background:var(--brand)}

/* ── 5. Radius & kaarten (ronder, geen schaduw behalve de hero-kaart) ───── */
.qlcard, .tb-card, .tb-fpanel, .instcard{border-radius:16px;box-shadow:none}
.tb-fpanel{background:var(--panel2);border-color:var(--line2)}
.btn-acc, .btn-ghost, .btn-good, .chipbtn{border-radius:10px}
.kr-seg{border-radius:11px}

/* ── 6. Actieve sub-tab ─────────────────────────────────────────────────
   De actieve beslisboom-sub-tab krijgt zijn kleur via een inline style in
   modules/tab-naslag.js; een inline style is vanuit CSS niet te overschrijven.
   Daarom loopt hij nu over --subtab-on/--subtab-on-txt: hierboven in licht
   nachtblauw gezet, in donker onveranderd (zie app/index.html :root/.dark).
   ────────────────────────────────────────────────────────────────────── */

/* ── 7. Manifest/meta staan buiten CSS ──────────────────────────────────
   app/index.html   : <meta name="theme-color" content="#1c2e4a"> (licht),
                      "#0f1a2c" (donker)
   manifest.webmanifest: "theme_color":"#1c2e4a","background_color":"#f6f3ec"
   Merkiconen (icon-180/192/512) zijn nog niet vervangen — zie het
   implementatierapport van fase 0.
   ────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   7b. CLUB — IMP-schaal en de twee clubschermen
   modules/n-club.js (normaal, M9-reeks + M10) en modules/tab-club-v2.js
   (expert, T1–T8). Alleen bestaande maatvoering en bestaande tokens; de enige
   nieuwe tokens zijn de vijf stappen van de IMP-kleurschaal uit
   club-implementatie.md §1.3, zodat kleur uitsluitend uit impKleur() komt en
   nergens een losse groen/rood-ternary in de code hoeft te staan.
   Donker volgt dezelfde .dark-klasse als de rest van de tokenlaag.
   ══════════════════════════════════════════════════════════════════════════ */
html{
  --imp-zeerslecht:#8f1d1d; --imp-slecht:#e0603f; --imp-neutraal:#9aa3b0;
  --imp-goed:#5cb85c; --imp-zeergoed:#166534;
}
html.dark, .dark html{
  --imp-zeerslecht:#ff8a80; --imp-slecht:#f7b58e; --imp-neutraal:#9aa3b0;
  --imp-goed:#a6e3a1; --imp-zeergoed:#4ade80;
}
.imp-zeerslecht{color:var(--imp-zeerslecht)}
.imp-slecht{color:var(--imp-slecht)}
.imp-neutraal{color:var(--imp-neutraal)}
.imp-goed{color:var(--imp-goed)}
.imp-zeergoed{color:var(--imp-zeergoed)}

/* ── 7b.1 Normale weergave ──────────────────────────────────────────────── */
.n-club-sub,.n-club-noot{margin:2px 0 0;font-size:13px;color:var(--n-muted)}
.n-club-datum{margin:0 0 8px;font-size:14px;color:var(--n-muted)}
.n-club-cijfers{display:flex;flex-wrap:wrap;gap:16px;margin:4px 0 10px}
.n-club-cijfer{min-width:88px}
.n-club-getal{display:block;font-size:26px;line-height:1.1;color:var(--n-ink)}
.n-club-lbl{display:block;font-size:13px;color:var(--n-muted)}
.n-club-spel{margin:0 0 8px;font-size:14px;color:var(--n-ink)}
.n-club-lijst{list-style:none;margin:0;padding:0}
.n-terug{display:inline-block;margin:0 0 10px;padding:6px 10px;border:0;border-radius:10px;
  background:var(--n-soft);color:var(--n-ink);font-family:inherit;font-size:13px;cursor:pointer}
.n-club-tabel{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.n-club-tabel th,.n-club-tabel td{padding:6px 4px;text-align:left;
  border-bottom:1px solid var(--n-line);overflow:hidden;text-overflow:ellipsis}
.n-club-tabel th{font-size:13px;font-weight:600;color:var(--n-muted)}
.n-club-tabel td:nth-child(n+3){text-align:right;white-space:nowrap}
.n-club-lijn{font-size:13px;color:var(--n-hint)}
.n-club-borden{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.n-club-bord{width:100%;padding:10px 4px;border:1px solid var(--n-line);border-radius:12px;
  background:var(--n-panel);color:var(--n-ink);font-family:inherit;cursor:pointer}
.n-club-bord-nr{display:block;font-size:18px}
.n-club-bord-n{display:block;font-size:13px;color:var(--n-muted)}
.n-club-handen{display:grid;grid-template-columns:1fr;gap:4px;margin:8px 0}
.n-club-hand{display:flex;gap:8px;font-size:13px}
.n-club-hand-lbl{width:14px;color:var(--n-muted)}
.n-club-hand-krt{min-width:0;overflow-wrap:anywhere}
.n-club-bied{margin:0;padding-left:18px;font-size:13px}
/* M9 "Per avond": één staafje per zitting, om de nullijn (het clubgemiddelde van die avond).
   Geen grafiekbibliotheek en geen canvas — losse spans met een hoogte in procenten, zodat het in
   donker en op 390 px hetzelfde blijft doen. */
.n-staven{display:flex;align-items:stretch;gap:3px;height:56px;margin:8px 0 6px;
  border-top:0;background:linear-gradient(var(--n-line),var(--n-line)) 0 50%/100% 1px no-repeat}
.n-staafvak{flex:1 1 0;min-width:4px;display:flex;flex-direction:column;justify-content:center;
  align-items:center}
.n-staaf{display:block;width:100%;max-width:18px;border-radius:2px;background:currentColor;
  height:var(--h,4%)}
.n-staaf.op{align-self:flex-end;margin-bottom:50%}
.n-staaf.neer{align-self:flex-start;margin-top:50%}
.n-staaf.leeg{height:2px;background:var(--n-line);color:var(--n-line);margin:auto 0}
/* M9 "Waar wij scoren": per contractklasse een balkje dat vanaf het midden naar links (onder het
   clubgemiddelde) of naar rechts (erboven) loopt. */
.n-klasserij{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--n-line)}
.n-klassenaam{flex:1 1 auto;min-width:0;font-size:14px;color:var(--n-ink)}
.n-klassewaarde{flex:0 0 auto;font-size:14px;font-weight:600;min-width:52px;text-align:right}
.n-klassebalk{flex:0 0 96px;position:relative;height:10px;border-radius:999px;background:var(--n-soft)}
.n-klassebalk::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--n-line)}
.n-klassevul{position:absolute;top:0;bottom:0;background:currentColor;border-radius:999px}
.n-klassevul.rechts{left:50%;width:var(--b,3%)}
.n-klassevul.links{right:50%;width:var(--b,3%)}
/* Een rij die er staat maar (nog) niet aanklikbaar is: gedempt, mét reden in de ondertitel. */
.n-rij.dof{opacity:.55}
/* Een standrij is een knop: de hele rij is de trefzone. Op mobiel minstens 44 px hoog — dat is
   de maat uit de toegankelijkheidsregel van de normale weergave, niet een nieuwe token. */
.n-paarrij{cursor:pointer}
.n-club-tabel tr.n-paarrij td{padding-top:14px;padding-bottom:14px}
.n-paarrij.on td{background:var(--n-soft)}
.n-paarrij:focus-visible{outline:2px solid var(--n-ink);outline-offset:-2px}
@media(hover:hover){.n-paarrij:hover td{background:var(--n-soft)}}

/* ── 7b.2 Expert-weergave: dezelfde tb-*-bouwstenen als Paaranalyse ─────── */
.tb-tabel{width:100%;border-collapse:collapse;font-size:13px}
.tb-tabel th,.tb-tabel td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--n-line)}
.tb-tabel th{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.tb-tabel td:nth-child(n+3){text-align:right;white-space:nowrap}
/* De kop hoort boven zijn eigen kolom te staan: een links uitgelijnde kop boven een rechts
   uitgelijnd getal leest als een andere kolom (gezien op T6, 20-09-2026). */
.tb-tabel th:nth-child(n+3){text-align:right}
/* Kaarttabellen zetten álle getalkolommen rechts, dus ook de tweede — daar begint bij T6 al
   het eerste getal (Manche). */
.tb-kaarttabel td:nth-child(n+2),.tb-kaarttabel th:nth-child(n+2){text-align:right;white-space:nowrap}
.tb-bord{padding:10px 6px;border:1px solid var(--n-line);border-radius:10px;
  background:transparent;color:inherit;font-family:inherit;cursor:pointer}
.tb-bord.on{border-color:currentColor}
.tb-bordnr{display:block;font-size:16px}
.tb-bordn{display:block;font-size:13px;opacity:.7}
.tb-handen{display:grid;gap:3px;margin:6px 0 10px;font-size:13px}
.tb-hand{overflow-wrap:anywhere}
.tb-bied{margin:0;padding-left:18px;font-size:13px}
.tb-paarrij{cursor:pointer}
.tb-tabel tr.tb-paarrij td{padding-top:14px;padding-bottom:14px}
.tb-paarrij.on td{background:var(--n-soft)}
.tb-paarrij:focus-visible{outline:2px solid var(--n-ink);outline-offset:-2px}
@media(hover:hover){.tb-paarrij:hover td{background:var(--n-soft)}}
/* De kleurlegenda onder een stand: dezelfde vijf traps als impKleur(), zodat de kleur in de
   tabel een maat is en geen sfeertje (club-implementatie.md §1.3). */
.tb-kleurlegenda{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tb-kleurvak{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.tb-kleurvak::before{content:"";width:10px;height:10px;border-radius:3px;background:currentColor}

/* Een cel waarvan de bron de waarde (nog) niet levert: neutraal gedempt, nooit gekleurd en nooit
   met een geraden getal. De legenda onder de tabel zegt waaróm hij leeg is. */
.tb-leegcel{color:var(--n-hint)}

/* ── 7b.2b T2 · kruistabel paar × zitting en het verloopblok ───────────────
   De kruistabel is het enige clubonderdeel dat bewust een eigen zijscroller krijgt: twaalf
   zittingkolommen passen op geen enkele telefoon, en hem in kaarten opbreken vernietigt juist
   het patroon dat deze tabel laat zien (ontwerp T2). De paarkolom blijft staan, zodat je nooit
   kwijt bent naar wiens rij je kijkt. Alleen bestaande tokens. */
.tb-kruis{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 8px}
.tb-kruis:focus-visible{outline:2px solid var(--n-ink);outline-offset:2px;border-radius:10px}
.tb-kruistabel{width:auto;min-width:100%;font-size:13px}
.tb-kruistabel th,.tb-kruistabel td{padding:6px;text-align:right;white-space:nowrap}
.tb-kruistabel th.tb-kruispaar{position:sticky;left:0;z-index:1;text-align:left;
  background:var(--n-panel);max-width:150px;overflow:hidden;text-overflow:ellipsis}
.tb-kruistabel tbody th.tb-kruispaar{font-weight:600;text-transform:none;letter-spacing:0;font-size:13px}

/* Verloop: plek per zitting als staafjes. Geen grafiekbibliotheek — losse spans met een hoogte
   in procenten, zodat het in donker en op 390 px hetzelfde blijft doen. */
.tb-verloop{list-style:none;margin:0;padding:0}
.tb-verlooprij{display:flex;align-items:flex-end;gap:8px;padding:6px 0;
  border-bottom:1px solid var(--n-line)}
.tb-verloopnaam{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;color:var(--n-ink)}
.tb-verloopnu{flex:0 0 auto;font-size:13px;color:var(--n-muted)}
.tb-staven{flex:0 0 auto;display:flex;align-items:flex-end;gap:2px;height:28px}
.tb-staaf{display:block;width:6px;height:var(--h,10%);min-height:3px;border-radius:2px;
  background:var(--imp-goed)}
.tb-staaf.leeg{height:3px;background:var(--n-line)}

/* ── 7b.2c T3 · filterrij en frequentietabel ───────────────────────────────
   Drie groepen filterchips boven de frequentietabel (contractklasse · leider · resultaat), in
   dezelfde chipvorm als de paar- en competitiekiezer. Op 390 px wikkelen ze; er wordt niets
   afgekapt en er is geen zijscroll. */
.tb-filters{display:flex;flex-wrap:wrap;gap:4px 18px;margin:6px 0 4px}
.tb-filtergroep{min-width:0}
.tb-filtergroep .tb-chiprij{margin:4px 0 6px}
/* De paren die dit contract zo speelden: een tweede regel onder het contract, gedempt. */
.tb-freqparen{display:block;margin-top:2px;font-size:13px;color:var(--n-hint);font-weight:400;
  overflow-wrap:anywhere}

/* ── 7b.2a Brede tabellen worden kaarten op de telefoon ────────────────────
   Bevinding Dafydd 20-09-2026 (expert, mobiel, tab Paren): een tabel met acht/negen kolommen
   past niet op 390 px — de laatste kolommen liepen tegen de rand en de tabel zei niets meer.
   `.tb-kaarttabel` houdt op desktop een gewone tabel en wordt op telefoonbreedte een lijst
   kaarten: de kop verdwijnt naar de schermlezer en elke cel krijgt zijn kolomnaam uit
   `data-lbl` ernaast. `data-hoofd` markeert de cel die de kaartkop is (de paarnaam). */
@media (max-width:640px){
  /* De kop verdwijnt helemaal: in kaartvorm is dit geen tabel meer (elke cel draagt zijn eigen
     kolomnaam uit data-lbl), en een "visueel verborgen" kop houdt zijn breedte en zou de meting
     van tools/club-mobiel-proef.mjs terecht laten struikelen. */
  .tb-kaarttabel thead{display:none}
  .tb-kaarttabel,.tb-kaarttabel tbody,.tb-kaarttabel tr,.tb-kaarttabel td{display:block;width:auto}
  .tb-kaarttabel tr{border:1px solid var(--n-line);border-radius:14px;padding:10px 12px;
    margin-bottom:10px;background:var(--n-panel)}
  .tb-kaarttabel tr.tb-paarrij.on{border-color:var(--n-ink)}
  .tb-kaarttabel td:nth-child(n+1),.tb-kaarttabel tr.tb-paarrij td{display:flex;align-items:baseline;
    justify-content:space-between;gap:12px;border:0;padding:3px 0;text-align:right;white-space:normal}
  .tb-kaarttabel td::before{content:attr(data-lbl);flex:0 0 auto;text-align:left;
    font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--n-muted)}
  .tb-kaarttabel td[data-hoofd]{display:block;text-align:left;font-size:15px;font-weight:700;
    padding:0 0 6px;border-bottom:1px solid var(--n-line);margin-bottom:6px}
  .tb-kaarttabel td[data-hoofd]::before{content:none}
}

/* Het ×'je op de paar-chip in de selectiebalk: de enige selectie die je zelf weer kwijt wilt. */
.tb-chipx{border:0;background:transparent;color:inherit;font-family:inherit;font-size:15px;
  line-height:1;padding:2px 4px;margin-left:2px;cursor:pointer;border-radius:6px}
.tb-chipx:focus-visible{outline:2px solid currentColor;outline-offset:1px}
/* ── 7b.3 De paarkiezer (chip in de selectiebalk + dezelfde lijst inline) ──
   Bevinding Dafydd 20-09-2026: op mobiel toonde Onderling alleen "Kies eerst een paar." zonder
   enige ingang. De chip is daarom altijd zichtbaar en zelf de knop; de lijst eronder is dezelfde
   chiprij die de competitiekiezer al gebruikte. */
.tb-chipknop{display:inline-flex;align-items:center;gap:6px;min-height:28px;border:0;
  background:transparent;color:inherit;font-family:inherit;font-size:inherit;padding:0;cursor:pointer}
.tb-chipknop:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:999px}
.tb-sumchip.klik{cursor:pointer;font-family:inherit;font-size:13px;text-align:left}
.tb-sumchip.klik.on{border-color:var(--n-ink)}
.tb-chiprij{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 10px}
.tb-chiprij .tb-sumchip{min-height:44px}
.tb-kiezerkop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tb-paarzoek{width:100%;box-sizing:border-box;margin:2px 0 8px;padding:10px 12px;font-family:inherit;
  font-size:15px;color:var(--n-ink);background:var(--n-panel);border:1px solid var(--n-line);border-radius:10px}
/* Normale weergave: dezelfde chip, in de tokens van M9. */
.n-club-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.n-club-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;
  border:1px solid var(--n-line);border-radius:999px;background:var(--n-panel);color:var(--n-muted);
  font-family:inherit;font-size:13px;cursor:pointer}
.n-club-chip b{color:var(--n-ink);font-weight:600}
.n-club-chip.on{border-color:var(--n-ink)}
.n-club-chip:focus-visible{outline:2px solid var(--n-ink);outline-offset:2px}
.n-club-chipx{min-width:44px;min-height:44px;border:0;border-radius:999px;background:var(--n-soft);
  color:var(--n-ink);font-family:inherit;font-size:18px;line-height:1;cursor:pointer}
.n-club-chipx:focus-visible{outline:2px solid var(--n-ink);outline-offset:2px}
.n-club-zoek{width:100%;box-sizing:border-box;margin:4px 0 8px;padding:12px 14px;font-family:inherit;
  font-size:16px;color:var(--n-ink);background:var(--n-panel);border:1px solid var(--n-line);border-radius:12px}

/* ═══════════════════════════════════════════════════════════════════════════
   8. DE NORMALE WEERGAVE — schil (fase 1)
   Overdracht README §3 (informatiearchitectuur), §6 (gedrag), §8 (tokens),
   §9 (wat niet te doen), §12 (expert op telefoon). Fase 0 §6.4 kondigde dit
   blok hier aan: de klassen van de normale schil horen bij fase 1.

   Alleen de SCHIL: kop, kolom, kaart, lijstrij, primaire knop, skeleton en de
   vaste tabbalk onderin. De schermen M1–M14 komen in latere fases.

   Mobile first, letterlijk: ontworpen op 390–402 px. Op een breder scherm
   blijft het dezelfde ene kolom, gecentreerd op max 560 px — géén aparte
   desktoplayout (§0.4).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 8.1 Tokens van de normale schil (README §8) ───────────────────────────
   Bewust een eigen set op body[data-schil="normaal"] en géén overschrijving
   van :root — de expert-schil moet volledig ongemoeid blijven. */
body[data-schil="normaal"]{
  --n-kop:#1c2e4a; --n-kop-txt:#f6f3ec; --n-kop-acc:#f0b08a;
  --n-kop-line:rgba(246,243,236,.4); --n-kop-soft:rgba(255,255,255,.12);
  --n-bg:#f6f3ec; --n-panel:#ffffff; --n-soft:#eceff3;
  --n-ink:#1c2230; --n-muted:#5b6472; --n-hint:#646d7c;   /* AA, zie --hint */
  --n-line:#e3e6ea; --n-line2:#cfd4dc;
  --n-accent:#c9430f; --n-accent-tint:#fbf2ee;
  --n-good:#1a7f37; --n-bad:#d63b2a;
  --n-shadow:0 6px 24px rgba(28,46,74,.10);
  --n-tabbar-h:56px;
}
/* Donker volgt de bestaande .dark-klasse én prefers-color-scheme (README §8). */
body[data-schil="normaal"].dark, .dark body[data-schil="normaal"]{
  --n-bg:#12161d; --n-panel:#1a2029; --n-soft:#242b36;
  --n-ink:#e8ebef; --n-muted:#aab3bf; --n-hint:#8a94a2;   /* AA, zie --hint */
  --n-line:#2a323d; --n-line2:#394251; --n-kop:#0f1a2c;
  --n-accent-tint:#241610;

}

/* ── 8.2 Kolom: één breedte voor de hele schil ──────────────────────────── */
.n-schil{display:none;flex-direction:column;min-height:100dvh;background:var(--n-bg);color:var(--n-ink)}
.n-in{width:100%;max-width:560px;margin:0 auto;padding:0 16px;box-sizing:border-box}

/* ── 8.3 Kop ────────────────────────────────────────────────────────────── */
.n-kop{flex:none;background:var(--n-kop);color:var(--n-kop-txt);
  padding:calc(18px + env(safe-area-inset-top)) 0 18px}
.n-kop-titel{margin:0;font-size:30px;line-height:1.15;letter-spacing:-.01em;color:var(--n-kop-txt)}
.n-kop-sub{margin:6px 0 0;font-size:14px;line-height:1.4;color:rgba(246,243,236,.72)}

/* ── 8.4 Inhoud ─────────────────────────────────────────────────────────── */
.n-main{flex:1 1 auto;padding:16px 0
  calc(var(--n-tabbar-h) + env(safe-area-inset-bottom) + 20px)}
.n-kaart{background:var(--n-panel);border:1px solid var(--n-line);border-radius:18px;
  padding:18px 16px;margin:0 0 12px}
.n-kaart-kop{margin:0 0 6px;font-size:20px;line-height:1.25;color:var(--n-ink)}
.n-leeg-txt{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--n-muted)}
.n-primary{display:block;width:100%;min-height:54px;border:0;border-radius:999px;
  background:var(--n-accent);color:#fff;font-family:inherit;font-size:17px;font-weight:600;cursor:pointer}
.n-primary:hover{filter:brightness(1.06)}

/* Lijstrij: raakvlak ≥ 50 px, chevron als tekst, geen kaart-in-kaart (§9). */
.n-rij{display:flex;width:100%;align-items:center;gap:12px;min-height:56px;
  padding:8px 4px;background:none;border:0;border-radius:12px;
  color:var(--n-ink);font-family:inherit;text-align:left;cursor:pointer}
.n-rij+.n-rij{border-top:1px solid var(--n-line)}
.n-rij:hover{background:var(--n-soft)}
.n-rij-tekst{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.n-rij-titel{font-size:16px;font-weight:600}
.n-rij-sub{font-size:13px;color:var(--n-muted)}
.n-chev{flex:none;font-size:20px;line-height:1;color:var(--n-hint)}
/* Gedempte rij: blijft aantikbaar (aria-disabled, geen `disabled`), maar de titel zakt naar de
   secundaire kleur en de ondertitel zegt waarom er niets achter zit. Geen opacity — die zou het
   contrast onder AA drukken. */
.n-rij.dof .n-rij-titel{color:var(--n-muted);font-weight:500}
.n-rij.dof .n-rij-sub{font-style:italic}
/* dezelfde rij in het zijmenu van de EXPERT-schil — daar gelden de expert-tokens */
.n-rij-drawer{color:var(--txt)}
.n-rij-drawer .n-rij-sub{color:var(--muted)}
.n-rij-drawer:hover{background:var(--soft)}

/* ── 8.5 Skeleton — de laadtoestand van de normale schil (README §6) ─────── */
.n-skel{display:flex;flex-direction:column;gap:10px}
.n-skel-rij{height:52px;border-radius:10px;background:var(--n-soft);animation:n-puls 1.2s ease-in-out infinite}
@keyframes n-puls{0%,100%{opacity:1}50%{opacity:.55}}

/* ── 8.6 Vaste tabbalk onderin ───────────────────────────────────────────
   Altijd zichtbaar, 56 px hoog plus de veilige ondermarge van het toestel.
   Vijf lijniconen van 24 px, geen emoji (§8 "Iconen"). */
.n-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--n-panel);border-top:1px solid var(--n-line);
  padding-bottom:env(safe-area-inset-bottom)}
.n-tabbar-in{display:flex;padding:0}
.n-tab{flex:1 1 0;min-width:0;height:var(--n-tabbar-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:none;border:0;border-top:2px solid transparent;margin-top:-1px;
  color:var(--n-muted);font-family:inherit;cursor:pointer}
.n-tab .n-ic{width:24px;height:24px;flex:none}
.n-tab-lbl{font-size:13px;line-height:1;font-weight:600;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-tab.on{color:var(--n-accent);border-top-color:var(--n-accent)}

/* De zwevende feedbackknop staat vast rechtsonder (feedback.js, gedeelde infra — bewust
   niet aangeraakt) en viel in de normale weergave over deze tabbalk heen. Hier alleen
   opgetild, boven de balk plus de veilige ondermarge. De selector is zwaarder dan de
   `.rfb-fab`-regel die feedback.js zelf in de kop injecteert, dus zonder !important. */
body[data-schil="normaal"] .rfb-fab{
  bottom:calc(var(--n-tabbar-h) + env(safe-area-inset-bottom) + 12px)}

/* ── 8.7 De schakelaar in de EXPERT-schil ────────────────────────────────
   Topbarsegment (≥768 px) en de rij in het zijmenu. Op de telefoon is de
   topbar al vol (§12 E1), dus daar doet alleen het zijmenu het werk. */
.schil-seg{display:none;flex:none;gap:2px;padding:2px;border-radius:11px;
  background:var(--kop-soft);border:1px solid var(--kop-line)}
.schil-seg-btn{background:none;border:0;border-radius:9px;padding:4px 10px;
  color:var(--kop-txt);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.schil-seg-btn:hover{background:var(--kop-soft)}
.schil-seg-btn.on{background:var(--kop-txt);color:var(--kop)}
@media(min-width:768px){ .schil-seg{display:flex} }

/* Eenmalige introbanner (alleen expert, alleen de eerste keer). */
.schil-intro{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 14px;background:var(--brand-tint);color:var(--txt);font-size:13px}
.schil-intro-btns{display:flex;gap:6px;flex:none}

/* ── 8.8 Bewegingsvoorkeur (README §6 "Toegankelijkheid") ───────────────── */
@media(prefers-reduced-motion:reduce){ .n-skel-rij{animation:none} }

/* ═══════════════════════════════════════════════════════════════════════════
   9. OPZOEKEN IN DE NORMALE WEERGAVE — M1, M2, M3, M3b/M3c (fase 2)

   Zelfde opbouw als §8: klassen met het voorvoegsel .n-, die alleen binnen #nschil voorkomen,
   en kleuren uitsluitend uit de --n-*-tokens van body[data-schil="normaal"]. `:root` wordt hier
   niet aangeraakt en er is bewust géén prefers-color-scheme-mediaquery — donker loopt over
   dezelfde .dark-klasse als de rest van de app, anders breekt de handmatige themakeuze (§8).
   Mobile first: ontworpen op 390–402 px, kolom maximaal 560 px (.n-in).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Serif voor koppen, bodchips en roostercellen — dezelfde stack als §8 van de huisstijl.
   (.fh doet dat al voor de koppen; deze elementen dragen geen .fh.) */
.n-cel,.n-bodchip,.n-rr-rij,.n-merk{font-family:'DM Serif Display',Georgia,serif;font-weight:400}
.n-cel-pas,.n-cel-askopp,.n-bodchip-pas,.n-rr-opp{font-family:inherit}

/* ── 9.1 Kop: merk, terug en het rooster in de nachtblauwe kop ───────────── */
.n-merk{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  color:var(--n-kop-txt);margin-bottom:18px}
.n-merk-txt{flex:none;font-family:'DM Serif Display',Georgia,serif;font-size:20px;line-height:1}
/* Rechts in de merkregel: met wie je speelt en welk systeem je leest (ontwerp M1, 13 px/.85).
   Hij wijkt als eerste als de naam lang is — het merk zelf mag nooit afbreken. */
.n-merk-meta{flex:1 1 auto;min-width:0;text-align:right;font-size:13px;line-height:1.3;
  color:rgba(246,243,236,.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-merk-s{color:var(--n-kop-acc)}
.n-terug{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px 0 0;
  background:none;border:0;color:var(--n-kop-txt);opacity:.85;
  font-family:inherit;font-size:15px;cursor:pointer}
.n-terug:hover{opacity:1}

/* Eerdere rondes, compact: één ronde per regel, nooit door elkaar (M3b). */
.n-rondes{display:block;width:100%;position:relative;text-align:left;cursor:pointer;
  background:var(--n-kop-soft);border:0;border-radius:12px;padding:8px 26px 8px 12px;
  margin:0 0 10px;color:var(--n-kop-txt);font-family:inherit}
.n-rondes .n-chev{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:rgba(246,243,236,.6)}
.n-rr-meer{display:block;font-size:13px;opacity:.7;margin-bottom:4px}
.n-rr-kop,.n-rr-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;align-items:baseline}
.n-rr-kop{font-size:13px;font-weight:700;letter-spacing:.06em;opacity:.75;margin-bottom:2px}
.n-rr-rij{font-family:'DM Serif Display',Georgia,serif;font-size:16px;line-height:1.5}
.n-rr-cel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-rr-opp{font-family:inherit;font-size:13px;opacity:.6}

/* ── 9.2 Biedrooster: maximaal vier cellen per rij, één ronde per rij ────── */
.n-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 8px}
.n-grid-kop{gap:8px;margin-bottom:6px}
.n-hc{font-size:13px;font-weight:600;color:var(--n-hint);text-align:center}
.n-hc.us{color:var(--n-accent)}
.n-grid-donker .n-hc{color:rgba(246,243,236,.6)}
.n-grid-donker .n-hc.us{color:var(--n-kop-acc)}

.n-cel{display:flex;align-items:center;justify-content:center;min-width:0;height:64px;
  border-radius:14px;border:0;background:var(--n-soft);color:var(--n-ink);
  font-family:'DM Serif Display',Georgia,serif;font-size:30px;line-height:1;padding:0}
.n-cel-kl{height:52px;font-size:24px;border-radius:12px}
.n-cel-leeg{background:transparent;border:1.5px dashed var(--n-line2)}
.n-cel-pas{font-family:inherit;font-size:14px;color:var(--n-muted)}
.n-cel-bod{background:var(--n-panel);border:1.5px solid var(--n-ink);cursor:pointer}
.n-cel-bod>span{display:block;white-space:nowrap}
.n-cel-ask{background:var(--n-accent);color:#fff;cursor:pointer}
.n-cel-askopp{font-family:inherit;font-size:14px;color:var(--n-muted);cursor:pointer}
.n-cel-ask:hover,.n-cel-askopp:hover,.n-cel-bod:hover{filter:brightness(.97)}
/* in de donkere kop keren de vlakken om, maar de accentcel en de vierkleuren blijven gelijk */
.n-kop .n-cel{background:var(--n-kop-soft);color:var(--n-kop-txt)}
.n-kop .n-cel-bod{background:var(--n-panel);color:var(--n-ink);border-color:var(--n-ink)}
.n-kop .n-cel-pas,.n-kop .n-cel-askopp{color:rgba(246,243,236,.75)}
.n-kop .n-cel-leeg{background:transparent;border:1.5px dashed rgba(246,243,236,.35)}
.n-kop .n-cel-ask{background:var(--n-accent);color:#fff}

/* ── 9.3 M1: de kaart die de kop overlapt, segment en hint ───────────────── */
.n-hero{margin-top:-26px;box-shadow:var(--n-shadow)}
.n-hint{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--n-muted)}
.n-seg{display:flex;gap:0;padding:3px;margin:0 0 14px;border-radius:999px;background:var(--n-soft)}
.n-seg-knop{flex:1 1 0;min-height:44px;border:0;border-radius:999px;background:none;
  color:var(--n-muted);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.n-seg-knop.on{background:var(--n-kop);color:var(--n-kop-txt)}

/* ── 9.4 Sectiekop + lijsten ─────────────────────────────────────────────── */
.n-sectie{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:20px 4px 6px}
.n-sectie-kop{margin:0;font-size:20px;line-height:1.2;color:var(--n-ink)}
.n-sectie-meta{flex:none;font-size:13px;color:var(--n-hint)}
.n-lijst{padding:2px 12px}
.n-rij-bod{min-height:56px}
/* De waarde rechts op een lijstrij. Hij mag nooit meer dan de helft van de rij opeisen: een
   lange systeemnaam duwde "Ons systeem lezen" anders over drie regels (live gemeten 21-09). */
.n-rij-punten{flex:0 1 auto;max-width:52%;font-size:13px;color:var(--n-hint);
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:right}
.n-bodchip{flex:none;display:flex;align-items:center;justify-content:center;
  min-width:52px;height:38px;padding:0 6px;border-radius:10px;background:var(--n-soft);
  font-family:'DM Serif Display',Georgia,serif;font-size:19px;line-height:1;color:var(--n-ink)}
.n-bodchip-kl{min-width:44px;height:32px;font-size:16px}
.n-bodchip-dbl{color:var(--n-bad)}
.n-bodchip-rdbl{color:var(--suit-diamond)}
.n-bodchip-pas{font-family:inherit;font-size:14px;font-weight:600;color:var(--n-muted)}
.n-meer{display:block;width:100%;min-height:44px;background:none;border:0;border-top:1px solid var(--n-line);
  color:var(--n-accent);font-family:inherit;font-size:14px;font-weight:600;text-align:left;
  padding:0 4px;cursor:pointer}
.n-groep{display:flex;align-items:center;gap:10px;padding:10px 4px 2px}
.n-groep-n{font-size:13px;color:var(--n-muted)}

/* ── 9.5 M3: betekeniskaart ──────────────────────────────────────────────── */
.n-bet-label{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--n-muted)}
.n-bet-zin{margin:0 0 4px;font-size:21px;line-height:1.25;color:var(--n-ink)}
.n-def{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-top:1px solid var(--n-line);font-size:15px}
.n-def-l{flex:none;font-weight:600;color:var(--n-muted)}
.n-def-w{flex:1;min-width:0;text-align:right;color:var(--n-ink);font-variant-numeric:tabular-nums}
/* afgeleide puntenrange: klein en secundair, nooit verwisselbaar met een vastgelegde afspraak.
   Kleur is --n-muted en niet --n-hint: --n-muted haalt op --n-panel 5,98:1 (licht) en 7,73:1
   (donker) tegen 5,22:1 en 5,33:1 voor --n-hint — 11px-tekst vraagt 4,5:1 (WCAG AA), beide
   halen dat sinds 19-09, maar het label blijft het secundaire van de twee. */
.n-afgeleid{display:inline-block;margin-left:6px;font-size:13px;font-weight:600;line-height:1.3;
  color:var(--n-muted);font-variant-numeric:normal;white-space:nowrap}
.n-rij-punten .n-afgeleid,.n-rij-sub .n-afgeleid{margin-left:5px;font-weight:500}
/* M3b: één inklapbare regel */
.n-bet-kl{padding:0}
.n-bet-tik{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 16px;
  background:none;border:0;color:var(--n-ink);font-family:inherit;text-align:left;cursor:pointer}
.n-bet-kort{flex:1;min-width:0;font-size:15px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-bet-caret{flex:none;color:var(--n-hint)}
.n-bet-uit{padding:0 16px 14px;border-top:1px solid var(--n-line)}

/* ── 9.6 Blad, voetregel en melden ───────────────────────────────────────── */
.n-blad-kop{margin:0 0 6px;font-size:18px;line-height:1.3;color:var(--n-ink)}
.n-blad-txt{margin:0;font-size:15px;line-height:1.5;color:var(--n-muted)}
.n-voet{margin:6px 4px 0;font-size:13px;line-height:1.5;color:var(--n-hint)}
.n-voet-ok{color:var(--n-good)}
/* Een tekstknop in een voetregel blijft visueel een link, maar is een tikdoel van 44 px:
   de eis uit de overdracht §6 ("raakvlakken ≥ 44 px"). De hoogte komt uit min-height en niet
   uit padding, zodat de regel eromheen niet uit elkaar gedrukt wordt. */
.n-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px;
  justify-content:center;background:none;border:0;padding:0 2px;margin:-10px 0;
  font:inherit;font-weight:600;color:var(--n-accent);text-decoration:underline;cursor:pointer}

/* ── 9.7 M2/M3c: bottom sheet ────────────────────────────────────────────── */
.n-scrim{position:fixed;inset:0;z-index:50;background:rgba(28,46,74,.55)}
.n-sheet{position:fixed;left:0;right:0;bottom:0;top:190px;z-index:51;
  display:flex;flex-direction:column;background:var(--n-bg);color:var(--n-ink);
  border-radius:28px 28px 0 0;padding:0 0 env(safe-area-inset-bottom);
  animation:n-sheet-op .22s cubic-bezier(.2,.8,.2,1)}
@keyframes n-sheet-op{from{transform:translateY(100%)}to{transform:translateY(0)}}
.n-grip{flex:none;width:40px;height:5px;border-radius:999px;background:var(--n-line2);margin:8px auto 4px}
.n-sheet-kop{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 16px 10px}
.n-sheet-kop h2{margin:0;font-size:22px;line-height:1.2}
.n-sheet-sluit{flex:none;min-height:44px;background:none;border:0;
  color:var(--n-kop);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
.n-chips{flex:none;display:flex;gap:8px;overflow-x:auto;padding:0 16px 10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.n-chips::-webkit-scrollbar{display:none}
.n-chip{flex:none;min-height:44px;display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;
  background:var(--n-panel);border:1px solid var(--n-line);color:var(--n-muted);
  font-family:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.n-chip.on{background:var(--n-kop);border-color:var(--n-kop);color:var(--n-kop-txt)}
.n-sheet-lijst{flex:1 1 auto;overflow-y:auto;margin:0 16px 16px;padding:2px 12px;
  background:var(--n-panel);border:1px solid var(--n-line);border-radius:18px}
.n-sheet-lijst .n-rij{min-height:60px}
.n-sheet-rooster{flex:1 1 auto;overflow-y:auto;padding:4px 16px 16px}
.n-sheet-form{flex:1 1 auto;overflow-y:auto;padding:0 16px 16px}
.n-label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--n-muted)}
.n-textarea{display:block;width:100%;box-sizing:border-box;margin:0 0 12px;padding:12px;
  border:1px solid var(--n-line);border-radius:12px;background:var(--n-panel);color:var(--n-ink);
  font-family:inherit;font-size:15px;line-height:1.45;resize:vertical}
.n-fout{margin:0 0 10px;padding:10px 12px;border-radius:10px;
  background:rgba(214,59,42,.12);color:var(--n-bad);font-size:14px}
/* In een flow verdwijnt de tabbalk (§3). */
.n-schil.n-sheet-open .n-tabbar{display:none}

/* ── 9.8 Bewegingsvoorkeur ───────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){ .n-sheet{animation:none} }
/* Nulmeting 28-09 (bevinding 10): op tablet en desktop is een schermbrede sheet te breed.
   Vanaf 768 px wordt hij een gecentreerd paneel met vaste breedte en ronde hoeken rondom. */
@media(min-width:768px){
  .n-sheet{width:min(560px,calc(100vw - 48px));margin:0 auto;top:max(72px,8vh);bottom:max(24px,6vh);
    border-radius:24px;box-shadow:0 24px 64px rgba(28,46,74,.28);padding-bottom:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   9A. DE NORMALE WEERGAVE — OEFENEN (O1, M4, M5, M6)

   Alleen de componenten die Opzoeken nog niet had. Alles wat er al was — .n-in,
   .n-kaart, .n-rij, .n-bodchip, .n-sheet, .n-primary, .n-link, .n-chev — wordt
   hergebruikt, zodat de twee bestemmingen niet uit elkaar kunnen lopen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 9A.1 De kop tijdens een sessie: teller, dagdoel en voortgangsbalk ───── */
.n-oef-kopregel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:10px 0 8px;font-size:14px;color:var(--n-kop-txt)}
.n-oef-doel{opacity:.8;font-variant-numeric:tabular-nums}
/* Terug links, het huidige onderwerp rechts: O1 blijft bereikbaar nu de sessie vanzelf start (21-09). */
.n-oef-kopnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
.n-oef-onderwerp{display:inline-flex;align-items:center;gap:4px;min-height:44px;max-width:60%;padding:0;
  background:none;border:0;color:var(--n-kop-txt);opacity:.85;font-family:inherit;font-size:14px;cursor:pointer}
.n-oef-onderwerp:hover{opacity:1}
.n-oef-onderwerp-naam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "Nog een keer": een fout beantwoorde vraag die terugkomt, naast de teller. */
.n-oef-opnieuw{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
  background:var(--n-kop-soft);color:var(--n-kop-acc);font-size:13px;font-weight:600;vertical-align:1px}
.n-oef-balk{height:5px;border-radius:999px;background:var(--n-kop-soft);overflow:hidden}
.n-oef-balk-vul{display:block;height:100%;border-radius:999px;background:var(--n-kop-acc);
  transition:width .25s ease-out}

/* ── 9A.2 M4: de vraag ───────────────────────────────────────────────────── */
.n-oef-thema{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--n-muted)}
/* Het rooster staat in de donkere kop (ontwerp M4/M5): vier kolommen per rij, één biedronde per
   rij, zodat "wij" en "zij" over alle rondes onder elkaar blijven staan. Op een telefoon brak de
   oude platte chip-rij af op een tweede regel en was niet meer te lezen wie wat bood. */
.n-oef-verloop-lbl{margin:14px 0 6px;font-size:13px;line-height:1.3;color:rgba(246,243,236,.75)}
.n-oef-verloop{display:flex;flex-direction:column;gap:6px;margin:0}
.n-oef-vrij{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.n-oef-cel{display:flex;align-items:center;justify-content:center;gap:1px;white-space:nowrap;
  min-width:0;min-height:44px;padding:0 6px;
  border-radius:12px;background:var(--n-kop-soft);color:var(--n-kop-txt);
  font-family:'DM Serif Display',Georgia,serif;font-size:19px;line-height:1}
.n-oef-cel-leeg{background:none}
.n-oef-cel-opp{background:transparent;border:1px solid var(--n-kop-line);color:rgba(246,243,236,.7);
  font-family:inherit;font-size:13px;font-weight:600}
.n-oef-cel-vraag{background:var(--n-accent);color:#fff;font-size:22px}
.n-oef-cel-goed{background:var(--n-good);color:#fff}
.n-oef-cel-fout{background:var(--n-bad);color:#fff}
/* Het rooster in de kop staat op nachtblauw: ♠ wordt crème, de rest houdt zijn kleur (§8). */
.n-oef-verloop .n-oef-cel .su-s{color:var(--n-kop-txt)}
.n-oef-cel-goed .su-h,.n-oef-cel-goed .su-d,.n-oef-cel-fout .su-h,.n-oef-cel-fout .su-d,
.n-oef-cel-vraag .su-h,.n-oef-cel-vraag .su-d{color:var(--n-bad-on-dark)}
.n-oef-cel-goed .su-s,.n-oef-cel-fout .su-s,.n-oef-cel-vraag .su-s{color:var(--n-kop-txt)}
.n-oef-vraag-txt{margin:0;font-size:22px;line-height:1.3;color:var(--n-ink)}

/* ── 9A.3 De hand bij de vraag ───────────────────────────────────────────── */
.n-oef-hand-lbl{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--n-muted)}
.n-oef-kaarten{display:flex;flex-direction:column;gap:4px;font-size:16px;line-height:1.35}
.n-oef-rij{display:flex;align-items:baseline;gap:10px}
.n-oef-kleur{flex:none;width:18px;text-align:center}
.n-oef-krt{flex:1;min-width:0;letter-spacing:.06em;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}
.n-oef-hand-meta{margin:10px 0 0;font-size:13px;color:var(--n-muted)}

/* ── 9A.4 De vier keuzeknoppen (2×2 vanaf 360 px, anders onder elkaar) ───── */
.n-oef-opties{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin:12px 0 0}
.n-oef-optie{display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 14px;
  border-radius:16px;background:var(--n-panel);border:1.5px solid var(--n-line);
  color:var(--n-ink);font-family:inherit;text-align:left;cursor:pointer}
.n-oef-optie:hover:not([disabled]){border-color:var(--n-ink)}
.n-oef-letter{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:999px;
  background:var(--n-soft);color:var(--n-muted);font-size:13px;font-weight:700}
.n-oef-optie-bod{display:inline-flex;align-items:center;gap:1px;white-space:nowrap;
  font-family:'DM Serif Display',Georgia,serif;font-size:24px;line-height:1}
.n-oef-optie-txt{flex:1;min-width:0;font-size:15px;line-height:1.4}
.n-oef-optie.goed{border-color:var(--n-good);background:var(--n-good-soft)}
.n-oef-optie.fout{border-color:var(--n-bad);background:var(--n-bad-soft)}
.n-oef-optie.dim{opacity:.55}

/* ── 9A.5 M5: uitslag, waarom-kaart en dagdoel ───────────────────────────── */
.n-oef-uitslag{display:flex;align-items:center;gap:14px}
.n-oef-teken{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;
  color:#fff;font-size:22px;line-height:1}
.n-oef-uitslag.goed .n-oef-teken{background:var(--n-good)}
.n-oef-uitslag.fout .n-oef-teken{background:var(--n-bad)}
.n-oef-uitslag-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.n-oef-uitslag-kop{font-size:24px;line-height:1.15;color:var(--n-ink)}
.n-oef-uitslag-sub{font-size:14px;color:var(--n-muted)}
.n-oef-waarom-lbl{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--n-muted)}
.n-oef-waarom-txt{margin:0;font-size:16px;line-height:1.5;color:var(--n-ink)}
.n-oef-ref{margin:8px 0 0;font-size:13px;color:var(--n-hint)}
.n-oef-acties{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0 0}
.n-oef-dagdoel{display:flex;align-items:center;justify-content:space-between;gap:12px}
.n-oef-dagdoel-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.n-oef-dagdoel-lbl{font-size:13px;font-weight:600;color:var(--n-muted)}
.n-oef-dagdoel-sub{font-size:15px;font-weight:600;color:var(--n-ink)}
.n-oef-bollen{display:flex;flex:none;gap:5px}
.n-oef-bol{display:block;width:14px;height:14px;border-radius:999px;background:var(--n-line)}
.n-oef-bol.vol{background:var(--n-good)}

/* ── 9A.6 De vaste knop onderin (M5/M6) ──────────────────────────────────── */
.n-oef-voet{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:16px 0 8px}
.n-oef-klaar{align-self:center;min-height:44px}
/* M4: "Twijfel? Kijk in het systeem" links, "Sla over" rechts (ontwerp M4). */
.n-oef-voetrij{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.n-oef-sla{color:var(--n-hint)}
.n-oef-acties{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:12px 0 0}
.n-oef-klopt{color:var(--n-muted)}
.n-oef-meld-bod{margin:0 0 12px;font-family:'DM Serif Display',Georgia,serif;font-size:24px;
  line-height:1;color:var(--n-ink)}

/* ── 9A.7 M6: sessie klaar ───────────────────────────────────────────────────
   De score, de dagdoelregel en de weekrij staan in de donkere kop (ontwerp M6: "volledig donkere
   kop tot ~40%"); het crèmevlak eronder begint met "Nog eens bekijken". */
.n-oef-klaar-lbl{margin:14px 0 2px;font-size:15px;color:rgba(246,243,236,.75)}
.n-oef-klaar-score{display:flex;align-items:baseline;gap:4px;margin:0}
.n-oef-klaar-n{font-size:72px;line-height:1;color:var(--n-kop-txt)}
.n-oef-klaar-tot{font-size:30px;line-height:1;color:rgba(246,243,236,.6)}
.n-oef-klaar-regel{margin:6px 0 14px;font-size:17px;line-height:1.4;color:var(--n-kop-txt)}
.n-week-kop .n-week-dag{border-color:var(--n-kop-line);color:rgba(246,243,236,.75)}
.n-week-kop .n-week-dag.on{background:var(--n-kop-acc);border-color:var(--n-kop-acc);color:var(--n-kop)}
.n-oef-chip-fout{background:var(--n-bad-soft);color:var(--n-bad)}
.n-oef-rangrij{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:14px 4px 0}
.n-oef-rang{font-size:14px;color:var(--n-muted)}

/* ═══════════════════════════════════════════════════════════════════════════
   9B. DE NORMALE WEERGAVE — ZITTING (M7, M8)

   Weer alleen wat er nog niet was; de hand van M8 leent de .n-oef-hand-rijen
   uit §9A, zodat een hand er in Oefenen en in Zitting hetzelfde uitziet.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 9B.1 M7: datumnavigatie en het totaal ───────────────────────────────── */
.n-zit-datumnav{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:10px 0 12px;color:var(--n-kop-txt)}
.n-zit-nav{min-height:44px;padding:0 4px;background:none;border:0;color:var(--n-kop-txt);
  font-family:inherit;font-size:14px;opacity:.75;cursor:pointer;white-space:nowrap}
.n-zit-nav.leeg{min-width:44px}
.n-zit-datum{flex:1;text-align:center;font-size:20px;line-height:1.2}
.n-zit-hero{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.n-zit-groot{font-size:56px;line-height:1;color:var(--n-kop-txt);font-variant-numeric:tabular-nums}
.n-zit-eenheid{font-size:15px;color:var(--n-kop-txt);opacity:.8}

/* ── 9B.1b De IMP-schaal op de nachtblauwe kop ───────────────────────────────
   De schaal zelf (.imp-zeerslecht … .imp-zeergoed) staat al in §1 en wordt door Club én Zitting
   gebruikt — één helper, één set klassen (overdracht §6b). Op de donkere kop gelden alleen de
   on-dark-varianten uit de overdracht, anders zakt het contrast onder AA. */
.n-kop .imp-zeerslecht,.n-kop .imp-slecht{color:var(--n-bad-on-dark)}
.n-kop .imp-goed,.n-kop .imp-zeergoed{color:var(--n-good-on-dark)}
.n-kop .imp-neutraal{color:rgba(246,243,236,.6)}

/* ── 9B.2 M7: de twee tegels, de sorteerknop en de spellenlijst ──────────── */
.n-zit-tegels{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 4px}
.n-zit-tegel{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  min-height:44px;padding:14px;border-radius:16px;
  background:var(--n-panel);border:1px solid var(--n-line);border-top:4px solid var(--n-line);
  color:var(--n-ink);font-family:inherit;text-align:left;cursor:pointer}
.n-zit-tegel.goed{border-top-color:var(--n-good)}
.n-zit-tegel.fout{border-top-color:var(--n-bad)}
.n-zit-tegel-l{font-size:13px;color:var(--n-muted)}
.n-zit-tegel-w{font-size:20px;line-height:1.1}
.n-zit-tegel-s{font-size:15px;font-variant-numeric:tabular-nums}
.n-zit-sorteer{flex:none;font-size:13px;font-weight:600;color:var(--n-muted);text-decoration:none}
.n-zit-sorteer:hover{text-decoration:underline}
/* Rij-indeling uit het ontwerp: spelnummer · contract + leider · resultaat · score. */
.n-zit-rij{display:grid;grid-template-columns:32px 1fr 44px 58px;align-items:center;gap:8px}
.n-zit-nr{font-size:18px;line-height:1;color:var(--n-muted);font-variant-numeric:tabular-nums}
.n-zit-res{font-size:15px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.n-zit-uit{font-size:18px;text-align:right;font-variant-numeric:tabular-nums}

/* ── 9B.3 M8: de kop van één spel ────────────────────────────────────────── */
.n-zit-spelnav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.n-zit-spelpijlen{display:flex;align-items:center;gap:4px}
.n-zit-pijl{min-width:44px;min-height:44px;padding:0 6px;background:none;border:0;
  color:var(--n-kop-txt);opacity:.8;font-family:inherit;font-size:15px;
  font-variant-numeric:tabular-nums;cursor:pointer}
.n-zit-pijl.leeg{opacity:0;pointer-events:none}
.n-zit-spelmeta{margin:8px 0 0;font-size:13px;line-height:1.35;color:rgba(246,243,236,.8)}
.n-zit-spelkop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:4px}
.n-zit-spelnr{flex:1 0 100%;font-size:15px;color:var(--n-kop-txt);opacity:.8}
.n-zit-contract{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:34px;line-height:1.1;color:var(--n-kop-txt)}
.n-zit-door{font-family:'DM Sans',sans-serif;font-size:18px;color:rgba(246,243,236,.8)}
.n-zit-score{margin-left:auto;font-size:40px;line-height:1.1;color:var(--n-kop-txt);
  font-variant-numeric:tabular-nums}

/* ── 9B.4 M8: jullie biedverloop ─────────────────────────────────────────── */
.n-zit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}
.n-zit-grid-kop{margin-bottom:8px}
.n-zit-hc{font-size:13px;font-weight:600;color:var(--n-hint);text-align:center}
.n-zit-hc.us{color:var(--n-accent)}
.n-zit-cel{display:flex;align-items:center;justify-content:center;gap:1px;white-space:nowrap;
  min-height:40px;border-radius:10px;
  background:transparent;color:var(--n-ink);
  font-family:'DM Serif Display',Georgia,serif;font-size:18px;line-height:1}
.n-zit-cel.pas{background:var(--n-soft);color:var(--n-muted);font-family:inherit;font-size:13px}
.n-zit-cel.ons{background:var(--n-panel);border:1px solid var(--n-line2)}
.n-zit-cel.afwijk{background:var(--n-bad-soft);border:1.5px solid var(--n-bad)}
.n-zit-cel.leeg{background:transparent}

/* ── 9B.4b M8: de twee knoppen onderaan en de handen in een sheet ────────── */
.n-zit-knoppen{display:flex;gap:10px;margin:16px 0 8px}
.n-zit-knoppen .n-primary,.n-zit-knoppen .n-ghost{flex:1 1 0}
.n-ghost{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;
  border-radius:999px;background:none;border:1.5px solid var(--n-kop);color:var(--n-kop);
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
.n-ghost:hover{background:var(--n-soft)}
.dark .n-ghost,body[data-schil="normaal"].dark .n-ghost{border-color:var(--n-line2);color:var(--n-ink)}
.n-zit-handen{display:flex;flex-direction:column;gap:0;background:none;border:0;padding:0}
.n-zit-handen .n-kaart{margin-bottom:10px}

/* ── 9B.5 M8: wat het systeem zegt ───────────────────────────────────────── */
.n-zit-sys-kop{margin:0 0 10px;font-size:15px;font-weight:600;color:var(--n-muted)}
.n-zit-sys-kop.afwijk{color:var(--n-bad)}
.n-zit-sysrij{display:flex;align-items:flex-start;gap:10px;padding:8px 0;
  border-top:1px solid var(--n-line)}
.n-zit-sysrij.afwijk .n-rij-titel{color:var(--n-bad)}
.n-zit-sysrij .n-rij-titel{font-size:14px}

/* ── 9B.6 M8: wat het veld deed ──────────────────────────────────────────── */
.n-zit-veld .n-def{border-top:1px solid var(--n-line)}
.n-zit-veld .n-def:first-child{border-top:0}

/* ═══════════════════════════════════════════════════════════════════════════
   9C. DE NORMALE WEERGAVE — MEER (M11), VOORTGANG (M12), NOTITIES (M13) EN
       INSTELLINGEN (M14)
   Alleen de componenten die er nog niet waren. Alles wat er al stond — .n-in,
   .n-kaart, .n-rij, .n-chip, .n-sheet, .n-primary — wordt hergebruikt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── M11: de kop met avatar (ontwerp: avatar 52, naam DM Serif 24) ────────── */
.n-meer-kop{display:flex;align-items:center;gap:14px}
.n-avatar{flex:none;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--n-kop-acc);color:var(--n-kop);
  font-family:'DM Serif Display',Georgia,serif;font-size:22px;line-height:1}
.n-meer-wie{display:flex;flex-direction:column;gap:2px;min-width:0}
.n-meer-wie .n-kop-titel{font-size:24px}
.n-meer-wie .n-kop-sub{margin:0}

/* ── M11: de nachtblauwe expert-kaart met schakelaar ──────────────────────── */
.n-meer-expert{display:flex;align-items:center;gap:14px;
  background:var(--n-kop);border-color:var(--n-kop);color:var(--n-kop-txt)}
.n-meer-expert-txt{flex:1;min-width:0}
.n-meer-expert-kop{margin:0 0 4px;font-size:18px;line-height:1.25;color:var(--n-kop-txt)}
.n-meer-expert-sub{margin:0;font-size:13px;line-height:1.5;color:rgba(246,243,236,.8)}
.n-meer-voet{margin:4px 4px 0;font-size:13px;line-height:1.5;color:var(--n-hint)}

/* ── Schakelaar 50×30 (M11/M14) ───────────────────────────────────────────── */
/* De schakelaar is 50×30 zoals het ontwerp hem tekent, maar het tikdoel is 50×44 (§6).
   Daarom is de knop zelf de 44 px hoge trefzone en zit de baan als kind in het midden. */
.n-tog{flex:none;display:flex;align-items:center;justify-content:center;
  width:50px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.n-tog-baan{position:relative;display:block;width:50px;height:30px;border-radius:999px;
  background:var(--n-line2);transition:background .15s ease}
.n-tog.on .n-tog-baan{background:var(--n-good)}
.n-meer-expert .n-tog-baan{background:rgba(255,255,255,.2)}
.n-meer-expert .n-tog.on .n-tog-baan{background:var(--n-accent)}
.n-tog-knop{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;transition:transform .15s ease}
.n-tog.on .n-tog-knop{transform:translateX(20px)}
@media(prefers-reduced-motion:reduce){ .n-tog-baan,.n-tog-knop{transition:none} }
/* Een rij met een schakelaar is geen knop: de schakelaar zelf is het tikdoel. */
.n-rij-tog{cursor:default}
.n-rij-tog:hover{background:none}
.n-vink{color:var(--n-good);font-weight:700}

/* ── M12: XP-ring, tegels, weekrij en staafjes ────────────────────────────── */
.n-vg-hero{display:flex;align-items:center;gap:14px;margin-top:14px}
.n-xpring{flex:none;position:relative;width:64px;height:64px;border-radius:50%;
  background:conic-gradient(var(--n-kop-acc) var(--n-xp,0%), rgba(255,255,255,.18) 0);
  display:flex;align-items:center;justify-content:center}
.n-xpring-in{display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:50%;background:var(--n-kop);
  color:var(--n-kop-txt);font-size:17px}
.n-vg-hero-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.n-vg-rang{font-size:17px;font-weight:600;color:var(--n-kop-txt)}
.n-vg-hero-txt .n-kop-sub{margin:0}

.n-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 12px}
.n-tegel{display:flex;flex-direction:column;gap:2px;padding:14px 12px;
  background:var(--n-panel);border:1px solid var(--n-line);border-radius:16px}
.n-tegel-n{font-size:28px;line-height:1.1;color:var(--n-ink);font-variant-numeric:tabular-nums}
.n-tegel.goed .n-tegel-n{color:var(--n-good)}
.n-tegel.fout .n-tegel-n{color:var(--n-bad)}
.n-tegel-l{font-size:13px;line-height:1.35;color:var(--n-muted)}

.n-week-lbl{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--n-muted)}
.n-week-rij{display:flex;gap:8px;justify-content:space-between}
.n-week-dag{flex:1 1 0;min-width:0;height:34px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--n-line2);color:var(--n-muted);font-size:13px;font-weight:600}
.n-week-dag.on{background:var(--n-kop-acc);border-color:var(--n-kop-acc);color:var(--n-kop)}

.n-staafjes{flex:none;display:flex;gap:4px;align-items:flex-end}
.n-staaf{width:8px;height:22px;border-radius:3px;background:var(--n-soft)}
.n-staaf.goed{background:var(--n-good)}
.n-staaf.fout{background:var(--n-bad)}

/* ── M13: notitiekaarten ──────────────────────────────────────────────────── */
.n-kop-rij{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.n-kop-meta{flex:none;font-size:13px;color:rgba(246,243,236,.72)}
.n-chips-in{margin:0 -16px 12px;padding:0 16px 4px}
.n-not{padding:14px 16px}
.n-not-kop{display:flex;align-items:center;gap:4px;margin:0 0 8px;font-size:13px;color:var(--n-hint)}
.n-not-auteur{font-weight:600;color:var(--n-partner)}
.n-not-auteur.ik{color:var(--n-accent)}
.n-not-status{margin-left:auto;font-weight:600;color:var(--n-good)}
.n-not-status.open{color:var(--n-accent)}
.n-not-txt{margin:0;font-size:15.5px;line-height:1.45;white-space:pre-wrap;color:var(--n-ink)}
.n-not-ctx{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--n-kop)}
.dark .n-not-ctx,body[data-schil="normaal"].dark .n-not-ctx{color:var(--n-kop-acc)}

/* ── M14: grotere letters (voorkeur per apparaat) ─────────────────────────── */
html.n-groot{font-size:112.5%}

/* ═══════════════════════════════════════════════════════════════════════════
   10. DE NORMALE WEERGAVE — DESKTOPVARIANT VAN DEZELFDE SCHIL

   De normale weergave is een mobiel ontwerp: één kolom van 560 px met een
   tabbalk onderin. Op een desktopscherm is een tabbalk onderin ongebruikelijk
   en staat de rest van het scherm leeg. Hier staat de desktopvariant van
   diezelfde schil — geen tweede schil: dezelfde HTML, dezelfde bestemmingen,
   dezelfde state, alleen een andere indeling.

     < 768 px   telefoon   — kolom 560 px, tabbalk onderin  (§8, ongewijzigd)
     768–1023   tablet     — kolom 720 px, tabbalk onderin
     ≥ 1024 px  desktop    — vaste zijbalk 240 px links, kolom 960 px,
                             tabbalk display:none, schakelaar rechts in de kop

   Uitsluitend bestaande tokens (--n-*, --kop-*, --merkvlak); geen enkele
   nieuwe kleurwaarde. Contrast van de tekst in de zijbalk (gemeten, WCAG AA
   vraagt 4,5:1 voor tekst):
     rust      --n-muted op --n-panel      licht 5,98:1   donker 7,73:1
     actief    --n-kop-txt op --n-kop      licht 12,31:1  donker 15,73:1
     merknaam  --n-ink op --n-panel        licht 15,90:1  donker 13,69:1
     merkvlak  --merkvlak-txt op --merkvlak            4,89:1 (beide standen)
   Alle vier zijn in de browser nagemeten op dist/ (getComputedStyle, 1440x900 en
   1920x1080, licht en donker) — zie outputs/n-desktop/scrollmeting.json.
   De actieve rij gebruikt bewust het nachtblauwe vlak (net als .n-seg-knop.on
   en .n-chip.on) en niet --n-accent als tekstkleur: --n-accent blijft in donker
   #c9430f en haalt daar op --n-panel 3,35:1. Het accent blijft zichtbaar in het
   icoon van de actieve rij (--n-kop-acc, 7,33:1 op --n-kop in licht, 9,37:1 in donker — ruim boven de 3:1 die een
   grafisch element vraagt).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 10.1 Tablet: dezelfde opzet, meer lucht ─────────────────────────────── */
@media(min-width:768px) and (max-width:1023.98px){
  body[data-schil="normaal"] .n-in{max-width:720px}
}

/* ── 10.2 De zijbalk zelf (staat altijd in de DOM, toont alleen ≥1024 px) ── */
.n-zijbalk{display:none}
.n-zb-in{display:flex;flex-direction:column;width:100%;box-sizing:border-box;
  padding:calc(16px + env(safe-area-inset-top)) 12px 16px}
.n-zb-merk{display:flex;align-items:center;gap:10px;padding:6px 10px 20px;
  font-family:'DM Serif Display',Georgia,serif;font-size:20px;line-height:1;color:var(--n-ink)}
.n-zb-vlak{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;
  background:var(--merkvlak);color:var(--merkvlak-txt);font-size:17px;line-height:1}
.n-zb-nav{display:flex;flex-direction:column;gap:2px}
.n-zb-tab{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 12px;
  background:none;border:0;border-radius:12px;color:var(--n-muted);
  font-family:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer}
.n-zb-tab .n-ic{flex:none;width:24px;height:24px}
.n-zb-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-zb-tab:hover{background:var(--n-soft);color:var(--n-ink)}
.n-zb-tab.on{background:var(--n-kop);color:var(--n-kop-txt)}
.n-zb-tab.on .n-ic{color:var(--n-kop-acc)}

/* ── 10.3 De weergaveschakelaar rechtsboven (alleen ≥1024 px) ─────────────
   Zelfde segmentvorm als .schil-seg in de expert-schil, maar op de --n-kop-
   tokens van deze schil. Hij ligt absoluut in de kop en lijnt rechts uit met
   de inhoudkolom, ook als die smaller is dan het scherm. */
.n-top-acties{display:none}

/* ── 10.4 Desktop ────────────────────────────────────────────────────────── */
@media(min-width:1024px){
  body[data-schil="normaal"]{--n-zb-b:240px;--n-kolom:960px}

  /* de kolom schuift op naast de vaste zijbalk */
  .n-schil{padding-left:var(--n-zb-b)}
  .n-zijbalk{display:block;position:fixed;left:0;top:0;bottom:0;width:var(--n-zb-b);z-index:41;
    overflow-y:auto;background:var(--n-panel);border-right:1px solid var(--n-line)}

  /* de tabbalk verdwijnt; de onderruimte die hij vroeg is niet meer nodig */
  .n-tabbar{display:none}
  .n-main{max-width:var(--n-kolom);width:100%;margin:0 auto;padding:24px 0 40px}
  body[data-schil="normaal"] .rfb-fab{bottom:24px}

  /* kop én inhoud delen dezelfde kolom, dus de titel lijnt uit met de inhoud */
  .n-in{max-width:var(--n-kolom)}
  .n-kop{position:relative}
  .n-top-acties{display:block;position:absolute;z-index:1;
    top:calc(18px + env(safe-area-inset-top));
    right:calc(max(0px, (100% - var(--n-kolom))/2) + 16px)}
  .n-top-seg{display:flex;gap:2px;padding:2px;border-radius:11px;
    background:var(--n-kop-soft);border:1px solid var(--n-kop-line)}
  .n-top-seg-btn{display:inline-flex;align-items:center;min-height:44px;
    background:none;border:0;border-radius:9px;padding:6px 12px;
    color:var(--n-kop-txt);font-family:inherit;font-size:13px;font-weight:600;
    white-space:nowrap;cursor:pointer}
  .n-top-seg-btn:hover{background:var(--n-kop-soft)}
  .n-top-seg-btn.on{background:var(--n-kop-txt);color:var(--n-kop)}
  /* Oefenen: de kopregel (Stoppen · onderwerp) houdt rechts plaats vrij voor de schakelaar hierboven */
  .n-oef-kopnav{padding-right:0}

  /* Thuis (#n/thuis/…) levert een volledig eigen scherm in .n-main en heeft zijn
     eigen maatvoering (modules/thuis/thuis.css: .th-scherm max-width 560 px via een
     container query). Dat mag de bredere kolom niet oprekken: #view-thuis blijft
     binnen .n-main en houdt zijn eigen breedte. */
  #view-thuis{max-width:100%}
}

/* ── Club · Biedtafels (T9 / #n/club/biedtafels) — modules/club/biedtafels.js ─────────────────
   Eén opmaak voor beide schillen; alleen bestaande tokens. Mobiel eerst: alles wrapt, niets is
   breder dan de kolom (poort:clubmobiel meet #clubanalyse/biedtafels en #n/club/biedtafels). */
.bt-rij{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.bt-rij .tb-inp{flex:1 1 160px;min-width:0;width:auto;min-height:44px}
.bt-rij .bt-nr{flex:0 0 88px}
.bt-rij .tb-btn,.bt-rij .n-ghost,.bt-rij .n-primary{min-height:44px;width:auto;flex:0 0 auto;text-decoration:none}
.bt-label{font-size:13px;color:var(--muted)}
.bt-vink{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:13px}
.bt-melding{margin:8px 0;padding:10px 12px;border-radius:9px;border:1px solid var(--line);font-size:13px}
.bt-melding.ok{border-color:var(--good)}
.bt-melding.fout{border-color:var(--bad)}
.bt-tafels{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.bt-tafel{border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}
.bt-tafel.dicht{opacity:.75}
.bt-tafelkop{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.bt-tafelcode{font-size:20px;letter-spacing:.12em}
.bt-qr{width:112px;max-width:40%;margin:8px 0}
.bt-qr svg{display:block;width:100%;height:auto}
.bt-stoelen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:". n ." "w . o" ". z .";gap:4px 10px;margin:6px 0;font-size:13px}
/* SR20-T1: windrichtingen als kompas (N boven, W links, O rechts, Z onder), nooit als 2×2-raster. */
.bt-stoel-N{grid-area:n;text-align:center} .bt-stoel-W{grid-area:w} .bt-stoel-O{grid-area:o;text-align:right} .bt-stoel-Z{grid-area:z;text-align:center}
.bt-stoel{min-width:0;overflow-wrap:anywhere;color:var(--muted)}
.bt-stoel.bezet{color:var(--txt)}

/* ── Uitgebreide weergave (18-10-2026) ──────────────────────────────────────────────────────────
   Eén omgeving: per scherm een rustige schakelaar "Uitgebreide weergave" in de kop (standaard uit), en
   de uitgebreide views (#view-…) wonen in .n-main > .n-uitg. Alleen bestaande tokens. */
.n-uitg-rij{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.n-uitg-knop{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;
  border-radius:999px;border:1px solid var(--n-kop-line);background:var(--n-kop-soft);color:var(--n-kop-txt);
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.n-uitg-knop:hover{filter:brightness(1.12)}
.n-uitg-knop.on{background:var(--n-kop-txt);color:var(--n-kop)}
.n-uitg-knop:focus-visible{outline:3px solid var(--n-kop-txt);outline-offset:2px}
.n-uitg-ic{flex:none}
.n-uitg-rij .th-hulp-wissel{margin:0;min-height:44px;padding:6px 14px;font-size:13.5px;color:var(--n-kop-txt);border-color:var(--n-kop-line)}
.n-uitg-rij .th-hulp-wissel.is-aan{background:var(--n-kop-soft);color:var(--n-kop-txt);border-color:var(--n-kop-txt)}
.n-uitg{padding:0 12px;box-sizing:border-box}
@media(min-width:768px){.n-uitg{padding:0 20px}}