/* app/ui-laag.css — gedeelde bouwstenen van de nieuwe UI-laag (modules/ui/laag.js).
   Bron: Design-canvas "Biedtrainer · UI-laag voorbeelden" (25-09-2026) en de overdracht "UI-laag
   Biedtrainer implementeren (alle modules)", §3 Vaste regels. Tokens staan op :root zodat Normaal
   én Expert dezelfde bouwstenen delen; de Club-hub (modules/club/hub.css, --ch-*) gebruikt dezelfde
   waarden. Contrast AA: de primaire knop is #b8501f (wit 4,9:1) i.p.v. #d9622b, zoals in hub.css. */
:root, .light{
  --ul-navy:#1f2a44; --ul-navy2:#2b3858; --ul-creme:#f6f3ec;
  --ul-kaart:#ffffff; --ul-rand:#e6e2d8; --ul-rand2:#efece5; --ul-rand-knop:#c9c4b8;
  --ul-oranje:#d9622b; --ul-oranje-knop:#b8501f; --ul-oranje-tint:#fff7f2; --ul-oranje-rand:#f3cdb7; --ul-oranje-tekst:#a8451a;
  --ul-groen:#1f7a4d; --ul-groen-tint:#eaf5ee; --ul-rood:#b83227; --ul-blauw:#2f5fd0;
  --ul-goud:#d9a413; --ul-zilver:#8d94a3; --ul-brons:#b7794a;
  --ul-tekst:#1b1f2a; --ul-gedempt:#5b6170; --ul-grijs:#8d94a3; --ul-licht:#c9d0e0; --ul-chip:#e8ebf2;
  --ul-groen-op:#7fd6a0; --ul-oranje-op:#f3b27a;
  --ul-kopfont:'Playfair Display','DM Serif Display',Georgia,serif;
  /* Vaste regel "Kleuren en kaarten": ♣ groen, ♦ blauw, ♥ rood, ♠ zwart. */
  --ul-su-c:#1f7a4d; --ul-su-d:#2f5fd0; --ul-su-h:#b83227; --ul-su-s:#1b1f2a;
}
.dark{
  --ul-kaart:#1a2029; --ul-rand:#2a323d; --ul-rand2:#2a323d; --ul-rand-knop:#3a4452; --ul-creme:#12161d;
  --ul-oranje-tint:#2a1a12; --ul-oranje-rand:#5a3420; --ul-oranje-tekst:#f3b27a;
  --ul-groen:#6fcf97; --ul-groen-tint:#16281b; --ul-rood:#ff8a80; --ul-blauw:#8fb1ff;
  --ul-tekst:#e8ebef; --ul-gedempt:#aab3bf; --ul-grijs:#8a94a2; --ul-chip:#242b36;
  --ul-navy:#0f1a2c; --ul-navy2:#1f2a44;
  --ul-su-c:#4ade80; --ul-su-d:#8fb1ff; --ul-su-h:#ff6b5e; --ul-su-s:#e8ebef;
}
/* De app-brede vierkleurenstand volgt dezelfde waarden (was #15803d/#1d4ed8/#c83322). */
.fourcolor{--suit-club:var(--ul-su-c);--suit-diamond:var(--ul-su-d);--suit-heart:var(--ul-su-h);--suit-spade:var(--ul-su-s)}

.ul-su-c{color:var(--ul-su-c)} .ul-su-d{color:var(--ul-su-d)} .ul-su-h{color:var(--ul-su-h)} .ul-su-s{color:var(--ul-su-s)}
.ul-ic{flex:none}

/* ── typografie ── */
.ul-h1{margin:0;font-family:var(--ul-kopfont);font-weight:700;font-size:26px;line-height:1.15}
.ul-h2{margin:0;font-family:var(--ul-kopfont);font-weight:700;font-size:22px;line-height:1.2}
.ul-h3{margin:0;font-family:var(--ul-kopfont);font-weight:700;font-size:20px;line-height:1.25}
@media(min-width:1024px){ .ul-h1{font-size:30px} .ul-h2{font-size:24px} }
.ul-eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ul-gedempt);font-weight:600}
.ul-kopsub{margin:4px 0 0;font-size:14px;color:var(--ul-licht)}
.ul-sub{margin:0;font-size:14px;color:var(--ul-gedempt);line-height:1.45}
.ul-kop2{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.ul-kop2-r{font-size:14px;color:var(--ul-gedempt)}

/* ── navy paginakop met sub-tabs ── */
.ul-paginakop{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;color:#fff}
.ul-paginakop .ul-eyebrow{color:var(--ul-licht)}
.ul-paginakop-tekst{min-width:0;display:flex;flex-direction:column;gap:4px}
.ul-subtabs{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.ul-subtab{min-height:44px;padding:8px 14px;border:0;border-radius:10px;background:transparent;color:var(--ul-licht);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ul-subtab:hover{color:#fff;background:var(--ul-navy2)}
.ul-subtab.on{background:#fff;color:var(--ul-navy)}

/* ── kaart en hero ── */
.ul-kaart{background:var(--ul-kaart);border:1px solid var(--ul-rand);border-radius:16px;padding:20px;
  display:flex;flex-direction:column;gap:14px;min-width:0;box-sizing:border-box;color:var(--ul-tekst)}
@media(min-width:1024px){ .ul-kaart{padding:24px 28px} }
.ul-kaart-oranje{background:var(--ul-oranje-tint);border-color:var(--ul-oranje-rand)}
.ul-hero{background:var(--ul-navy);color:#fff;border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:10px;min-width:0;box-sizing:border-box}
.ul-hero .ul-eyebrow{color:var(--ul-licht)}
.ul-hero-titel{margin:0;font-family:var(--ul-kopfont);font-weight:700;font-size:26px;line-height:1.15}
.ul-hero-sub{margin:0;font-size:14px;color:var(--ul-licht)}

/* ── stat-tegels en meters ── */
.ul-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:1024px){ .ul-stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ul-stat{background:var(--ul-kaart);border:1px solid var(--ul-rand);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.ul-stat-lbl{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ul-gedempt);font-weight:600}
.ul-stat-num{font-family:var(--ul-kopfont);font-size:30px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ul-tekst)}
.ul-stat-sub{font-size:13px;color:var(--ul-gedempt);line-height:1.4}
.ul-meters{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ul-meter{display:flex;flex-direction:column;gap:6px;min-width:0}
.ul-meter-kop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px}
.ul-meter-lbl{font-weight:600;color:var(--ul-tekst)}
.ul-meter-pct{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ul-tekst)}
.ul-meter-baan{position:relative;height:10px;border-radius:999px;background:var(--ul-chip);overflow:visible}
.ul-meter-vul{display:block;height:100%;border-radius:999px;background:var(--ul-groen)}
.ul-meter-zwak .ul-meter-vul{background:var(--ul-oranje)}
.ul-meter-ref{position:absolute;top:-3px;width:2px;height:16px;background:var(--ul-navy);border-radius:1px}
.ul-meter-sub{font-size:13px;color:var(--ul-gedempt)}

/* ── chips, knoppen ── */
.ul-chip{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;font-size:13px;font-weight:700;
  background:var(--ul-creme);color:var(--ul-gedempt);white-space:nowrap}
.ul-chip-navy{background:var(--ul-chip);color:var(--ul-navy)}
.dark .ul-chip-navy{color:var(--ul-tekst)}
.ul-chip-vol{background:var(--ul-oranje-knop);color:#fff}
.ul-chip-oranje{background:var(--ul-oranje-tint);color:var(--ul-oranje-tekst);border:1px solid var(--ul-oranje-rand)}
.ul-knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:10px;
  border:1px solid var(--ul-rand-knop);background:var(--ul-kaart);color:var(--ul-navy);font-family:inherit;font-size:14px;font-weight:600;
  cursor:pointer;text-decoration:none;box-sizing:border-box}
.dark .ul-knop{color:var(--ul-tekst)}
.ul-knop-primair{background:var(--ul-oranje-knop);border-color:var(--ul-oranje-knop);color:#fff}
.ul-knop-primair:hover{filter:brightness(1.08)}
.ul-knop:focus-visible,.ul-seg-btn:focus-visible,.ul-bodkaart:focus-visible,.ul-optie:focus-visible,.ul-subtab:focus-visible,.ul-veld-stap:focus-visible,.ul-chip-knop:focus-visible{
  outline:3px solid var(--ul-oranje);outline-offset:2px}

/* ── segmentkeuze ── */
.ul-segwrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ul-seglbl{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ul-gedempt);font-weight:600}
.ul-seg{display:flex;flex-wrap:wrap;background:var(--ul-creme);border-radius:10px;padding:4px;gap:2px}
.ul-seg-btn{border:0;background:transparent;color:var(--ul-navy);font-family:inherit;font-size:14px;font-weight:600;border-radius:8px;
  padding:10px 14px;min-height:44px;min-width:44px;cursor:pointer}
.dark .ul-seg-btn{color:var(--ul-tekst)}
.ul-seg-btn.on{background:var(--ul-navy);color:#fff}
.dark .ul-seg-btn.on{background:var(--ul-tekst);color:var(--ul-creme)}
.ul-seg-kop .ul-seg{background:var(--ul-navy2)}
.ul-seg-kop .ul-seg-btn{color:#fff}
.ul-seg-kop .ul-seg-btn.on{background:#fff;color:var(--ul-navy)}

/* ── biedraster: vier vaste kolommen, één rij per ronde ── */
.ul-raster{display:flex;flex-direction:column;gap:6px;min-width:0}
.ul-raster-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ul-raster-kopcel{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ul-gedempt);text-align:center;font-weight:600}
.ul-cel{height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;
  box-sizing:border-box;font-variant-numeric:tabular-nums;white-space:nowrap}
.ul-cel-wij{background:var(--ul-kaart);border:1px solid var(--ul-rand);color:var(--ul-tekst)}
.ul-cel-tp{background:transparent;border:1px solid transparent;color:var(--ul-grijs);font-weight:500}
.ul-cel-tp .ul-su{filter:saturate(.35);opacity:.8}
.ul-cel-pas.ul-cel-wij{color:var(--ul-grijs);font-weight:500}
.ul-cel-focus{background:var(--ul-oranje-tint);border:1px solid var(--ul-oranje);color:var(--ul-tekst)}
.ul-cel-twijfel{background:var(--ul-oranje-tint);border:1px dashed var(--ul-oranje)}
.ul-cel-anders{background:var(--ul-groen-tint);border:1px solid var(--ul-groen)}
.ul-cel-leeg{background:transparent}
.ul-raster-klein .ul-cel{height:32px;font-size:14px}

/* ── hand per kleur ── */
.ul-hand{display:flex;flex-direction:column;gap:4px;font-variant-numeric:tabular-nums}
.ul-hand-rij{display:flex;align-items:center;gap:10px;min-height:28px}
.ul-hand-sym{width:22px;text-align:center;font-size:20px;font-weight:700;line-height:1}
.ul-hand-kaarten{font-size:17px;font-weight:700;letter-spacing:.04em}
.ul-hand-renonce{color:var(--ul-grijs);font-weight:500}
.ul-hand-groot .ul-hand-rij{gap:8px;align-items:center}
.ul-hand-groot .ul-hand-sym{width:30px;font-size:26px}
.ul-hand-groot .ul-hand-kaarten{display:flex;flex-wrap:wrap;gap:6px;letter-spacing:0}
.ul-kaartje{width:44px;height:56px;border-radius:8px;background:#fff;border:1px solid var(--ul-rand-knop);display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;box-sizing:border-box}
.dark .ul-kaartje{background:var(--ul-kaart)}

/* ── grote biedvak-kaart en optiekaart ── */
.ul-bodkaarten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ul-bodkaart{border:1px solid var(--ul-rand);background:var(--ul-kaart);border-radius:14px;padding:14px 16px;min-height:96px;display:flex;flex-direction:column;
  align-items:flex-start;gap:6px;font-family:inherit;text-align:left;color:var(--ul-tekst);cursor:pointer;min-width:0}
.ul-bodkaart-wie{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ul-gedempt);font-weight:700}
.ul-bodkaart-bod{font-family:var(--ul-kopfont);font-size:34px;font-weight:700;line-height:1}
.ul-bodkaart-sub{font-size:13px;color:var(--ul-gedempt)}
.ul-bodkaart-gekozen{border:2px solid var(--ul-oranje);background:var(--ul-oranje-tint)}
.ul-bodkaart-gekozen .ul-bodkaart-wie{color:var(--ul-oranje-tekst)}
.ul-bodkaart-volgende{border:2px solid var(--ul-navy)}
.ul-bodkaart-volgende .ul-bodkaart-wie,.ul-bodkaart-volgende .ul-bodkaart-bod{color:var(--ul-navy)}
.dark .ul-bodkaart-volgende{border-color:var(--ul-tekst)}
.dark .ul-bodkaart-volgende .ul-bodkaart-wie,.dark .ul-bodkaart-volgende .ul-bodkaart-bod{color:var(--ul-tekst)}
.ul-bodkaart-tp .ul-bodkaart-bod{color:var(--ul-grijs)}
.ul-bodkaart-leeg{border:1px dashed var(--ul-rand-knop);cursor:default}
.ul-bodkaart-leeg .ul-bodkaart-wie,.ul-bodkaart-leeg .ul-bodkaart-sub{color:var(--ul-grijs)}
.ul-bodkaart-leeg .ul-bodkaart-bod{color:var(--ul-rand-knop)}
@media(max-width:600px){ .ul-bodkaart{padding:10px;min-height:80px} .ul-bodkaart-bod{font-size:26px} .ul-bodkaart-wie{font-size:13px} }

.ul-opties{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.ul-optie{background:var(--ul-kaart);border:1px solid var(--ul-rand);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;
  color:var(--ul-tekst);min-height:44px;font-family:inherit;text-align:left;text-decoration:none;cursor:pointer;min-width:0;box-sizing:border-box}
.ul-optie:hover{border-color:var(--ul-rand-knop)}
.ul-optie-kop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ul-optie-bod{font-family:var(--ul-kopfont);font-size:26px;font-weight:700;line-height:1.05}
.ul-optie-tekst{font-size:14px;color:var(--ul-gedempt);line-height:1.4}
.ul-optie-uit{background:var(--ul-oranje-tint);border-color:var(--ul-oranje-rand)}
.ul-optie-on{background:var(--ul-oranje-tint);border:2px solid var(--ul-oranje)}

/* ── veld vergroten: vier stappen ── */
.ul-veld{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:var(--ul-creme);border-radius:12px;padding:4px}
.ul-veld-stap{min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--ul-navy);font-family:inherit;font-size:13px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;cursor:pointer}
.dark .ul-veld-stap{color:var(--ul-tekst)}
.ul-veld-stap.aan{background:var(--ul-chip)}
.ul-veld-stap.on{background:var(--ul-navy);color:#fff}
.ul-veld-stap[disabled]{color:var(--ul-grijs);cursor:not-allowed}
.ul-veld-sub{font-size:13px;font-weight:500;opacity:.85}

/* ── chip-regel en zijlade ── */
.ul-chipregel{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ul-chipregel .ul-chip{font-size:13px;padding:6px 12px;background:var(--ul-kaart);border:1px solid var(--ul-rand);color:var(--ul-tekst);font-weight:600}
.ul-chip-knop{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--ul-rand-knop);
  background:transparent;color:var(--ul-navy);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.dark .ul-chip-knop{color:var(--ul-tekst)}
.ul-lade{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);z-index:60;background:var(--ul-kaart);border-left:1px solid var(--ul-rand);
  box-shadow:-12px 0 32px rgba(28,46,74,.14);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s ease}
.ul-lade.open{transform:none}
.ul-lade[hidden]{display:none}
.ul-lade-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:20px 20px 12px;border-bottom:1px solid var(--ul-rand2)}
.ul-lade-dicht{width:44px;height:44px;border:0;border-radius:10px;background:var(--ul-creme);color:var(--ul-tekst);display:grid;place-items:center;cursor:pointer}
.ul-lade-in{padding:16px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
@media(prefers-reduced-motion:reduce){ .ul-lade{transition:none} }

/* ── tooltip op grafieken (ulTip/ulTipInstalleer): exacte waarde bij hover, focus en tik ── */
.ul-tip{position:fixed;z-index:10000;max-width:min(280px,calc(100vw - 16px));padding:7px 10px;border-radius:8px;
  background:#1f2a44;color:#fff;font-size:13px;line-height:1.4;white-space:pre-line;pointer-events:auto;overflow-wrap:anywhere;max-height:calc(100vh - 16px);overflow:auto;
  box-shadow:0 6px 18px rgba(15,26,44,.25);font-variant-numeric:tabular-nums}
.ul-tip[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){
  .ul-tip:not([hidden]){animation:ul-tip-verschijn .14s ease-out}
}
@keyframes ul-tip-verschijn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
[data-ul-tip],[data-ch-tip],[data-tip]{cursor:help}
button[data-ul-tip],button[data-ch-tip],[role="button"][data-ul-tip],a[data-ul-tip]{cursor:pointer}
[data-ul-tip]:focus-visible{outline:3px solid var(--ul-oranje);outline-offset:2px}

/* ── rasters voor schermindeling ── */
.ul-stapel{display:flex;flex-direction:column;gap:20px;min-width:0}
.ul-twee{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@media(min-width:1024px){ .ul-twee{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} }

/* ── zijbalk van de normale schil volgens het canvas (240 px, wit, navy actief) ──
   De opbouw komt uit modules/n-schil.js (nZijbalkHtml); hier alleen de maten van het ontwerp. */
@media(min-width:1024px){
  body[data-schil="normaal"] .n-zijbalk{background:var(--ul-kaart);border-right-color:var(--ul-rand)}
  body[data-schil="normaal"] .n-zb-in{padding:calc(24px + env(safe-area-inset-top)) 12px 24px;gap:0}
  body[data-schil="normaal"] .n-zb-merk{gap:12px;padding:0 12px 20px;font-family:var(--ul-kopfont);font-weight:700;font-size:22px;color:var(--ul-tekst)}
  body[data-schil="normaal"] .n-zb-vlak{width:36px;height:36px;border-radius:10px;background:var(--ul-oranje-knop);color:#fff}
  body[data-schil="normaal"] .n-zb-nav{gap:8px}
  body[data-schil="normaal"] .n-zb-tab{min-height:48px;padding:12px 14px;border-radius:10px;font-size:16px;font-weight:500;color:var(--ul-tekst)}
  body[data-schil="normaal"] .n-zb-tab .n-ic{width:20px;height:20px;color:var(--ul-navy)}
  .dark body[data-schil="normaal"] .n-zb-tab .n-ic, body[data-schil="normaal"].dark .n-zb-tab .n-ic{color:var(--ul-tekst)}
  body[data-schil="normaal"] .n-zb-tab:hover{background:var(--ul-creme)}
  body[data-schil="normaal"] .n-zb-tab.on{background:var(--ul-navy);color:#fff;font-weight:600}
  body[data-schil="normaal"] .n-zb-tab.on .n-ic{color:#fff}
}
/* De telefoon-tabbalk draagt sinds Leren zeven tegels (±55 px op 390 px). Iets smallere letters
   zodat "Opzoeken" en "Oefenen" niet afgekapt worden; tikdoel blijft 56 px hoog en ≥ 53 px breed. */
@media(max-width:1023.98px){
  body[data-schil="normaal"] .n-tab-lbl{font-size:13px;letter-spacing:-.03em}
}