/* app/ui-laag-review.css — UX/UI-review 1.0 (18-10-2026): teksttoken, tikvlakken, feedbackknop/-paneel in de app-schil.
   Apart bestand: de tokenlaag (huisstijl-tokens.css) wordt door tests op zijn structuur bewaakt. */
/* ═══ UX/UI-review 1.0 (18-10-2026) ═══════════════════════════════════════════════════════════ */
/* A2/A3: teksttoken voor links (≥ 4,9:1 op crème) en een leesbare ondergrens voor lopende tekst. */
:root{--brand-txt:#b23a0b}
.dark{--brand-txt:var(--brand)}
.n-link,.th-link,.ss-link,.ul-link{color:var(--brand-txt)}
.n-afgeleid{font-size:13px;color:var(--n-muted,#5c6776);background:transparent}
.n-kop-sub,.n-leeg-txt,.n-voet,.ul-sub{font-size:14px}
.n-helper-ingang summary,.n-kaart-titel[role=button]{min-height:44px;display:flex;align-items:center}
.xbtn{min-width:44px;min-height:44px}
.kj-balk{min-height:44px}

/* A1: het gesloten feedbackpaneel (feedback.js, gedeelde infra: alleen hier overschreven) zit niet in
   de tabvolgorde en niet in de leesvolgorde zolang het dicht is. Bij openen is het direct zichtbaar. */
body .rfb-sheet:not(.rfb-on), body .rfb-scrim:not(.rfb-on){
  visibility:hidden;
  transition:transform .22s cubic-bezier(.32,.72,.22,1), opacity .18s ease, visibility 0s linear .25s}
/* S2: de zwevende feedbackknop mag nooit een primaire actie bedekken. In de flows (snelstart, Thuis,
   Oefenen) verdwijnt hij op de telefoon; melden kan via Meer › Iets melden. */
@media(max-width:700px){
  body[data-schil="normaal"][data-nactief="welkom"] .rfb-fab,
  body[data-schil="normaal"][data-nactief="thuis"] .rfb-fab,
  body[data-schil="normaal"][data-nactief="oefen"] .rfb-fab{display:none}
}

/* UX-review E1 (tweede ronde): op de telefoon staat het eerste antwoord in Oefenen boven de vouw (375×812).
   Kop compacter, Stoppen naast de titel, de rasteruitleg weg en onderwerp + vorm op één rij. */
@media(max-width:700px){
  body[data-schil="normaal"][data-nactief="oefen"] .n-kop{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:10px}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-kop{position:relative;gap:8px}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-kop-tekst{padding-right:96px}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-kop-r{position:absolute;top:0;right:0}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-kop-titel{font-size:22px;line-height:1.2}
  body[data-schil="normaal"][data-nactief="oefen"] .n-uitg-rij{margin-top:2px}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-raster-uitleg{display:none}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-vormen-uitklap{flex:0 0 auto}
  body[data-schil="normaal"][data-nactief="oefen"] .n-oef-vraag-txt.ul-oef-vraag-txt{font-size:19px}
}

/* E1 derde ronde: ook met een handdiagram (biedvraag) en langere talen (PL) blijft het eerste antwoord boven de vouw. */
@media(max-width:700px){
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-scherm{gap:12px}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-scherm>.ul-oef-vormen{order:9}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-grid .ul-kaart,
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-handvlak{padding:10px 12px}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-grid .ul-eyebrow{font-size:13px;line-height:1.2;margin:0}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-handvlak .ul-kaartje{width:30px;height:36px;font-size:17px;border-radius:6px}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-handvlak .ul-hand{gap:4px}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-handvlak .ul-hand-groot .ul-hand-kaarten{gap:4px}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-handvlak .ul-hand-groot .ul-hand-sym{width:24px;font-size:20px}
  body[data-schil="normaal"][data-nactief="oefen"] .ul-oef-grid .ul-cel{height:40px}
}

/* ═══ UX/UI-review 1.0, ronde 2 (18-10-2026) — Start, snelstart, Meer, uitlegpaneel ═══════════════ */
/* S3: een echte schakelaar (baan + knop) met de stand als tekst ernaast. */
.ss-toggle,.ss-toggle.on{display:inline-flex;align-items:center;gap:10px;min-width:0;min-height:52px;padding:0 4px;background:none;border:0;color:var(--n-ink)}
.ss-sw{position:relative;flex:none;width:54px;height:32px;border-radius:999px;background:#8c95a3;transition:background .15s}
.ss-sw-knop{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .15s}
.ss-toggle.on .ss-sw{background:#1f7a46}
.ss-toggle.on .ss-sw-knop{transform:translateX(22px)}
.ss-sw-tekst{min-width:2.4em;font-size:16px;font-weight:700;text-align:left}
/* M4: letters Normaal / Groot in stap 1 */
.ss-letters{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ss-letter{min-height:60px;border:2px solid var(--n-line);border-radius:14px;background:var(--n-panel);color:var(--n-ink);font-family:inherit;font-size:18px;font-weight:600;cursor:pointer}
.ss-letter-groot{font-size:24px}
.ss-letter.on{border-color:var(--n-accent);box-shadow:0 0 0 2px var(--n-accent)}
.ss-letter:focus-visible{outline:3px solid var(--n-accent);outline-offset:2px}
/* S4: de hand compacter, zodat de biedknoppen op 375 px eerder in beeld komen */
.ss-hand{gap:2px}
.ss-hand-rij{font-size:20px;line-height:1.2}
@media(max-width:700px){[data-ss-stap="4"] .ss-kaart{padding:12px}[data-ss-stap="4"] .ss-kop{padding-bottom:4px}[data-ss-stap="4"] .ss-sub{margin-top:4px;font-size:15px}}
/* S6: "Ik weet het niet" is een gewone keuze (witte kaart, stippelrand, vraagteken), geen uitgeschakelde knop */
.ss-weetniet{background:var(--n-panel);border-style:dashed}
.ss-weetniet .ss-kaartnaam::before{content:"? ";font-weight:800;color:var(--brand-txt)}
/* M6: het uitlegpaneel leest als lopende tekst (≥ 15 px), tabs lopen door op een tweede regel, sluitknop 44 px */
#modals .uit-row [style*="font-size:11px"],#modals .uit-row [style*="font-size:12px"],#modals .uit-row [style*="font-size:13px"],#modals .uit-row [style*="font-size:14px"]{font-size:15px!important}
#modals .uit-chk,#modals .uit-chk [style*="font-size:12px"],#modals .uit-chk [style*="font-size:13px"]{font-size:15px!important}
#modals .bt-substrip{flex-wrap:wrap;overflow:visible}
#modals .bt-subtab{min-height:44px;white-space:normal}
#modals .xbtn{width:44px;height:44px}

/* ═══ UX/UI-review 1.0, ronde 2 — Nabespreken ═══════════════════════════════════════════════════ */
/* N2: de bètabanner is wegklikbaar; daarna blijft één compacte regel */
.ub-beta{position:relative}
.ub-beta-sluit{flex:none;width:44px;height:44px;margin-left:auto;border:0;border-radius:50%;background:transparent;color:var(--ch-oranje-tekst,#8a3a00);font-size:26px;line-height:1;cursor:pointer}
.ub-beta-sluit:focus-visible{outline:3px solid var(--ch-oranje,#e8590c);outline-offset:2px}
.ub-beta-klein{padding:6px 10px;gap:8px}
/* N5: "Land" is duidelijk een keuzeknop */
.ub-landkeuze{transition:border-color .12s}
.ub-landkeuze:hover,.ub-landkeuze:focus-within{border-color:var(--ch-oranje,#e8590c)}
.ub-landnaam{gap:8px;list-style:none}
.ub-landnaam::-webkit-details-marker{display:none}
.ub-landnaam .ub-label{margin:0}
.ub-chev{margin-left:auto;font-size:18px;color:var(--ch-oranje-tekst,#8a3a00);transition:transform .15s}
.ub-landkeuze[open] .ub-chev{transform:rotate(180deg)}
/* N3: legenda bij de staven */
.kj-legenda{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 8px;font-size:14px;color:var(--ch-gedempt)}
.kj-leg::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:3px;vertical-align:-1px;background:var(--ch-gedempt)}
.kj-leg.ok::before{background:var(--ch-groen)}
.kj-leg.down::before{background:var(--ch-rood)}
.kj-leg.mix::before{background:var(--ch-goud)}
/* N7: de getaltegels (Slems, Records, vergelijking) blijven op de telefoon naast elkaar */
@media(max-width:600px){
  .ch-tegels.drie{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ch-tegels.drie .ch-tegel{padding:10px 8px}
  .ch-tegels.drie .ch-tegel-getal{font-size:22px}
  .ch-tegels.drie .ch-tegel-lbl,.ch-tegels.drie .ch-tegel-sub{font-size:13px}
}

/* ═══ UX/UI-review 1.0, ronde 2 — Thuis ══════════════════════════════════════════════════════════ */
/* T8 / T10: de uitzonderingen en gastheeracties staan onder een uitklapper met een groot tikvlak */
#view-thuis .th-ul-anders-sum,#view-thuis .th-ul-gastheer-sum{display:flex;align-items:center;gap:8px;min-height:48px;margin-top:6px;font-weight:700;font-size:16px;color:var(--brand-txt);cursor:pointer;list-style:none}
#view-thuis .th-ul-anders-sum::-webkit-details-marker,#view-thuis .th-ul-gastheer-sum::-webkit-details-marker{display:none}
#view-thuis .th-ul-anders-sum::after,#view-thuis .th-ul-gastheer-sum::after{content:"▾";margin-left:auto;font-size:18px;transition:transform .15s}
#view-thuis .th-ul-anders[open]>.th-ul-anders-sum::after,#view-thuis .th-ul-gastheer[open]>.th-ul-gastheer-sum::after{transform:rotate(180deg)}
#view-thuis .th-ul-anders-sum:focus-visible,#view-thuis .th-ul-gastheer-sum:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:8px}
#view-thuis .th-ul-gastheer{margin-top:4px}
#view-thuis .th-ul-gastheer .th-ul-knoprij{margin-top:8px}
/* T9: op de telefoon staan QR en code direct onder de kop, de stoelen eronder (dat hebben de anderen nodig) */
@media(max-width:1023px){
  body #view-thuis .th-ul-hero{display:flex;flex-direction:column;gap:14px}
  body #view-thuis .th-ul-hero-l{display:contents}
  body #view-thuis .th-ul-hero .th-ul-qrkaart{order:1}
  body #view-thuis .th-ul-hero .th-ul-stoelen{order:2}
  body #view-thuis .th-ul-hero .th-ul-knoppen{order:3}
}
/* T6: Hulp is een schakelaar (baan + knop) met de stand als tekst */
.th-hulp-wissel{display:inline-flex;align-items:center;gap:10px}
.th-hw{position:relative;flex:none;width:46px;height:26px;border-radius:999px;background:#8c95a3;transition:background .15s}
.th-hw-knop{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .15s}
.th-hulp-wissel.is-aan .th-hw{background:#1f7a46}
.th-hulp-wissel.is-aan .th-hw-knop{transform:translateX(20px)}
/* T15: de niveauknoppen van de biedbox blijven op 375 px minstens 44 px breed */
#view-thuis .bbxlvls{gap:4px}
#view-thuis .bbxlvl{min-width:44px;min-height:44px}

/* ═══ SR21 A6 (21-10-2026) — de zwevende knoppen "Vraag het" + het Alert-kaartje ═══════════════════════
   feedback.js (gedeelde infra) blijft ongewijzigd; alles gebeurt hier in de app-schil.
   1. Is er een modal, lade, menu of paneel open, dan verdwijnt de knop: hij lag over "Oefen deze opening"
      (Bekijken-modal) en over de schakelaars Geluid/Hulp in de Oefenen-lade. Melden kan daarna weer.
   2. Onderaan de inhoud is ruimte gereserveerd zodat het laatste blok (antwoorden in Leren, de VP-kolom
      van een stand) altijd vrij van de knop te scrollen is.
   3. Op de telefoon is het kaartje kleiner, en midden in een lange pagina (lijst, stand, les) staat hij
      niet over de inhoud: alleen zichtbaar als de pagina niet scrolt of als je onderaan bent
      (modules/ui/zwevend.js zet dan body.rfb-midden). */
body:has(#modals > .scrim, .n-scrim, #qlPickScrim, #drawer:not([hidden]), [aria-modal="true"]:not(.rfb-sheet):not(.drawer-panel):not(.oeflayer)) .rfb-fab,
body[data-nactief="oefen"]:has(.oeflayer) .rfb-fab{display:none}
body[data-schil="normaal"][data-nactief="oefen"] .rfb-fab,
body[data-schil="normaal"][data-nactief="oefenen"] .rfb-fab{display:none}   /* SR22: in de oefening lag hij over "Klopt niet" en "Bekijk in de beslisboom"; hulp zit in "Vraag een clubhelper" */
body[data-schil="normaal"] .n-main{padding-bottom:calc(var(--n-tabbar-h) + env(safe-area-inset-bottom) + 96px)}
@media(min-width:1024px){ body[data-schil="normaal"] .n-main{padding-bottom:112px} }
@media(max-width:700px){
  body.rfb-midden .rfb-fab{opacity:0;visibility:hidden;pointer-events:none}
  body[data-schil="normaal"] .rfb-kaart{width:38px;height:51px;border-radius:6px;font-size:9px}
  body[data-schil="normaal"] .rfb-kaart::before{top:4px;font-size:6px}
}