/* tb-pagina.css — de pagina's van de leeromgeving in de vormtaal van het overzicht (concept B,
   keuze Daan 4-10-2026): oefenexamens, AI-leercoach, verkeersborden, moeilijke vragen, badges,
   account en de CBR-simulatie. Het overzicht zelf staat in tb-dashboard.css.

   Laadt na theoriebriljant-brand.css (partials/_header.blade.php). Eigen klassen (tb-pag-...),
   zodat de glas- en bentoregels van brand.css er niet op grijpen. Kaart, knop, chip, meter,
   lijstrij, veld en schakelaar komen uit tb-componenten.css. Geen kleurwaarden. Eén !important,
   zie bij pagina. */

/* ── pagina ─────────────────────────────────────────────────────────── */
body:has(.tb-pag){background-color:var(--tb-canvas-2)}
/* De enige !important: Infix zet .dashboard_main_wrapper .dashboard_part met !important op een
   vaste lichtgrijze kleur (frontend_style.css), en alleen een !important wint daarvan. Zonder deze
   regel blijft de pagina in de donkere modus licht. Zie ook tb-dashboard.css. */
body:has(.tb-pag) .dashboard_part{background-color:var(--tb-canvas-2) !important}

.tb-pag{
  container:tb-pag / inline-size;
  max-width:1120px;
  padding:var(--tb-s4);
  font-family:var(--tb-font);
  color:var(--tb-ink);
  letter-spacing:-.011em;
}
:where(.tb-pag) :is(h1, h2, h3, p, ul, ol, dl, dd, figure){margin:0}
.tb-pag h1{font-size:30px; line-height:1.15}
.tb-pag h2{font-size:21px; line-height:1.25}
.tb-pag h3{font-size:17px; line-height:1.3}
.tb-pag :is(h1, h2, h3){text-wrap:balance}
.tb-pag p{text-wrap:pretty}

/* ── kop: titel, één zin uitleg, eventueel een paar getallen ───────── */
.tb-pag-kop{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--tb-s3); margin-bottom:var(--tb-s4)}
.tb-pag-kop__tekst{flex:1 1 340px; min-width:0}
.tb-pag .tb-pag-kop__tekst p{margin-top:6px; max-width:62ch; font-size:16px; line-height:1.55; color:var(--tb-ink-2)}
.tb-pag-getallen{display:flex; flex-wrap:wrap; gap:var(--tb-s1) var(--tb-s4)}
.tb-pag-getal{display:grid; gap:2px}
.tb-pag-getal b{font-size:26px; font-weight:800; line-height:1.1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--tb-ink)}
.tb-pag-getal span{font-size:13.5px; color:var(--tb-ink-3)}

/* ── melding na een actie (session tb_flash) ───────────────────────── */
.tb-pag .tb-pag-melding{
  margin-bottom:var(--tb-s3); padding:12px 16px;
  border:1px solid var(--tb-line); border-left:3px solid var(--tb-accent); border-radius:var(--tb-r);
  background:var(--tb-canvas);
  font-size:15px; line-height:1.5; color:var(--tb-ink-2);
}

/* ── uitgelicht: de ene hoofdactie van de pagina ───────────────────── */
.tb-pag-uitgelicht{display:grid; gap:var(--tb-s3); margin-bottom:var(--tb-s3)}
@container tb-pag (min-width:760px){
  .tb-pag-uitgelicht{grid-template-columns:minmax(0, 1fr) auto; align-items:center}
}
.tb-pag .tb-pag-signaal{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tb-accent-ink);
}
.tb-pag-signaal::before{content:""; width:22px; height:2px; background:var(--tb-accent)}
.tb-pag-uitgelicht h2{margin-top:12px}
.tb-pag .tb-pag-uitleg{margin-top:8px; max-width:60ch; font-size:16px; line-height:1.6; color:var(--tb-ink-2)}
.tb-pag-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--tb-s2)}
.tb-pag-groot{min-height:52px; padding:0 26px; font-size:16.5px}

/* ── secties en rasters ─────────────────────────────────────────────── */
.tb-pag-sectie{margin-top:var(--tb-s4)}
.tb-pag-sectie__kop{display:flex; align-items:center; justify-content:space-between; gap:var(--tb-s2); margin-bottom:var(--tb-s2)}
.tb-pag-raster{display:grid; gap:var(--tb-s3)}
@container tb-pag (min-width:620px){
  .tb-pag-raster--2, .tb-pag-raster--3{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@container tb-pag (min-width:880px){
  .tb-pag-raster--3{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
.tb-pag-raster > .tb-kaart{min-width:0}

/* ── tekst in kaarten ──────────────────────────────────────────────── */
.tb-pag .tb-pag-sub{margin-top:8px; font-size:14px; line-height:1.5; color:var(--tb-ink-3)}
.tb-pag .tb-pag-tekst{margin-top:8px; font-size:15px; line-height:1.6; color:var(--tb-ink-2)}
.tb-pag .tb-pag-tekst a{color:var(--tb-accent-ink); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.tb-pag-kaartkop{display:flex; align-items:center; justify-content:space-between; gap:var(--tb-s2); min-height:24px}
.tb-pag-kaart-acties{display:flex; flex-wrap:wrap; gap:var(--tb-s1); margin-top:var(--tb-s2)}
.tb-pag-link{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:14px; font-weight:600; color:var(--tb-accent-ink); text-decoration:none;
}
.tb-pag-link:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}

/* ── lijsten met rijen (tb-rij uit tb-componenten) ─────────────────── */
.tb-pag-rijen{list-style:none; padding:0}
.tb-pag-rijen > li{border-bottom:1px solid var(--tb-line)}
.tb-pag-rijen > li:last-child{border-bottom:0}
.tb-pag a.tb-pag-rij{min-height:60px; padding:10px 0; color:var(--tb-ink); text-decoration:none}
.tb-pag a.tb-pag-rij:hover b{text-decoration:underline; text-underline-offset:3px}
.tb-pag a.tb-pag-rij:focus-visible{outline:2px solid var(--tb-accent); outline-offset:2px; border-radius:var(--tb-r-sm)}

/* ── labels: groen alleen voor gehaald, een lage score is neutraal ──── */
.tb-pag-pil{
  flex:none; display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:999px;
  font-size:12.5px; font-weight:600; line-height:1.4;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tb-pag-pil--gehaald{background:var(--tb-ok-soft); color:var(--tb-ok-ink)}
.tb-pag-pil--bezig{background:var(--tb-warn-soft); color:var(--tb-warn-ink)}
.tb-pag-pil--gemaakt{background:var(--tb-canvas-3); color:var(--tb-ink-2)}
.tb-pag-pil--nieuw{background:var(--tb-canvas-2); color:var(--tb-ink-3); border:1px solid var(--tb-line)}
.tb-pag-pil--slot{background:var(--tb-accent-soft); color:var(--tb-accent-ink)}   /* zit in Basis of Compleet */

/* ── filter: links die als chips ogen, raakvlak 44px ───────────────── */
.tb-pag-filter{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--tb-s3)}
.tb-pag-filter :is(a, button){
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px;
  border:1px solid var(--tb-line-2); border-radius:999px; background:var(--tb-canvas);
  font-family:inherit; font-size:14.5px; font-weight:600; line-height:1; color:var(--tb-ink-2);
  text-decoration:none; cursor:pointer;
}
.tb-pag-filter :is(a, button):hover{border-color:var(--tb-ink); color:var(--tb-ink)}
.tb-pag-filter :is(a, button):focus-visible{outline:2px solid var(--tb-accent); outline-offset:2px}
.tb-pag-filter :is(a[aria-current="page"], button[aria-pressed="true"]){background:var(--tb-ink); border-color:var(--tb-ink); color:var(--tb-canvas)}
.tb-pag-filter__getal{font-weight:500; font-variant-numeric:tabular-nums}

/* ── groot getal met meter in een kaart ────────────────────────────── */
.tb-pag .tb-pag-cijfer{margin-top:var(--tb-s2); display:flex; align-items:baseline; gap:8px}
.tb-pag-cijfer b{font-size:40px; font-weight:800; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--tb-ink)}
.tb-pag-cijfer span{font-size:14.5px; color:var(--tb-ink-3)}
.tb-pag-kaart-meter{margin-top:var(--tb-s2)}

/* ── kleine knoppen en verborgen tekst ─────────────────────────────── */
.tb-pag .tb-knop--sm{min-height:44px}   /* ook op de laptop een raakvlak van 44px */
.tb-pag-verborgen{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── oefenexamens: kaarten met de foto van vraag 1 ─────────────────── */
.tb-pag-examens{list-style:none; padding:0; display:grid; gap:var(--tb-s3)}
@container tb-pag (min-width:620px){
  .tb-pag-examens{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@container tb-pag (min-width:880px){
  .tb-pag-examens{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
.tb-pag-examen{display:flex; flex-direction:column; min-width:0}
.tb-pag-examen__beeld{
  display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover;
  background:var(--tb-canvas-3); border-bottom:1px solid var(--tb-line);
}
.tb-pag-examen__tekst{display:flex; flex-direction:column; flex:1; padding:var(--tb-s2) var(--tb-s3) var(--tb-s3)}
.tb-pag .tb-pag-examen__titel, .tb-pag .tb-pag-badge__titel{font-size:17px; line-height:1.3}
.tb-pag-examen__actie{margin-top:auto; padding-top:var(--tb-s2)}

/* ── leercoach: valkuilen en het leerpad ───────────────────────────── */
.tb-pag-valkuilen{list-style:none; padding:0; margin-top:var(--tb-s1)}
.tb-pag-valkuilen > li{padding:var(--tb-s2) 0; border-bottom:1px solid var(--tb-line)}
.tb-pag-valkuilen > li:last-child{border-bottom:0}
.tb-pag-valkuilen b{font-size:15.5px; font-weight:600; color:var(--tb-ink)}
.tb-pag-stappen{list-style:none; padding:0; counter-reset:stap; display:grid; gap:12px; margin-top:var(--tb-s2)}
.tb-pag-stappen li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--tb-ink-2)}
.tb-pag-stappen li::before{
  counter-increment:stap; content:counter(stap);
  flex:none; width:28px; height:28px; display:grid; place-items:center;
  border:1px solid var(--tb-line); border-radius:var(--tb-r); background:var(--tb-canvas-2);
  font-size:13px; font-weight:700; color:var(--tb-ink-2); font-variant-numeric:tabular-nums;
}

/* ── moeilijke vragen: een rij per vraag ───────────────────────────── */
.tb-pag-vraag{display:flex; align-items:center; gap:var(--tb-s2); padding:var(--tb-s2) 0}
.tb-pag-vraag__beeld{flex:none; width:96px; height:72px; object-fit:cover; border-radius:var(--tb-r-sm); background:var(--tb-canvas-3)}
.tb-pag-vraag__tekst{flex:1; min-width:0}
.tb-pag .tb-pag-vraag__vraag{font-size:15.5px; font-weight:500; line-height:1.45; color:var(--tb-ink)}
.tb-pag-vraag__weg{flex:none}
@container tb-pag (max-width:520px){
  .tb-pag-vraag{flex-wrap:wrap}
  .tb-pag-vraag__beeld{width:72px; height:54px}
  .tb-pag-vraag__tekst{flex-basis:calc(100% - 88px)}
}

/* ── badges ────────────────────────────────────────────────────────── */
.tb-pag-badge__icoon{
  width:48px; height:48px; display:grid; place-items:center;
  border-radius:999px; background:var(--tb-canvas-2); border:1px solid var(--tb-line);
  font-size:24px; line-height:1;
}
.tb-pag-badge--dicht .tb-pag-badge__icoon{filter:grayscale(1); opacity:.6}
.tb-pag .tb-pag-badge__titel{margin-top:var(--tb-s2)}

/* ── account: gegevens en formulieren ──────────────────────────────── */
.tb-pag-gegevens{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:10px var(--tb-s2); margin-top:var(--tb-s2)}
.tb-pag-gegevens dt{font-size:14px; color:var(--tb-ink-3)}
.tb-pag-gegevens dd{font-size:15px; color:var(--tb-ink); overflow-wrap:anywhere}
.tb-pag-gegevens dd .tb-pag-pil{margin-left:6px}
.tb-pag-form{display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--tb-s2); margin-top:var(--tb-s2)}
.tb-pag-form .tb-knop{justify-self:start}
.tb-pag-fouten{margin-top:var(--tb-s2); padding:12px 16px; border:1px solid var(--tb-line); border-left:3px solid var(--tb-fout); border-radius:var(--tb-r); background:var(--tb-canvas)}
.tb-pag .tb-pag-fouten p{font-size:14.5px; color:var(--tb-fout-ink)}

/* ── losse pagina's zonder zijbalk: de resultaten (body.tb-los) ───────
      Die pagina's laden geen Bootstrap, dus de box-sizing-reset staat hier ook. */
.tb-pag *, .tb-pag *::before, .tb-pag *::after{box-sizing:border-box}
.tb-pag--los{margin:0 auto; max-width:920px}
.tb-pag-boven{
  display:flex; align-items:center; justify-content:space-between; gap:var(--tb-s2);
  margin-bottom:var(--tb-s3); padding-bottom:var(--tb-s2); border-bottom:1px solid var(--tb-line);
}
.tb-pag-merk{display:inline-flex; align-items:center; min-height:44px}
.tb-pag-merk img{height:28px; width:auto}
.tb-pag-uitslag{margin-bottom:var(--tb-s3)}
.tb-pag-uitslag h1{margin-top:12px}
.tb-pag-uitslag .tb-pag-kaart-acties{margin-top:var(--tb-s3)}

/* ── word lid (upgrade.blade.php): een smalle kaart met prijs en vinkjes ── */
.tb-pag--smal{max-width:640px}
.tb-pag .tb-pag-prijs{margin-top:var(--tb-s3); font-size:16px; color:var(--tb-ink-2)}
.tb-pag-prijs b{font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--tb-ink); font-variant-numeric:tabular-nums}
.tb-pag-vinkjes{list-style:none; padding:0; display:grid; gap:10px; margin-top:var(--tb-s3)}
.tb-pag-vinkjes li{display:flex; align-items:flex-start; gap:12px; font-size:15.5px; line-height:1.5; color:var(--tb-ink)}
.tb-pag-vinkjes li::before{
  content:""; flex:none; width:6px; height:12px; margin:3px 7px 0 5px;
  border-right:2px solid var(--tb-ok); border-bottom:2px solid var(--tb-ok); transform:rotate(45deg);
}
.tb-pag .tb-knop:disabled{opacity:.55; cursor:not-allowed}
.tb-pag .tb-knop--3{min-height:44px}

/* ── gratis proefexamen (proefexamen/landing en resultaat): getallen en melding in de kaart,
      en de afbeelding om je score te delen ── */
.tb-pag-uitslag .tb-pag-getallen{margin-top:var(--tb-s3)}
.tb-pag-uitslag .tb-pag-melding{margin:var(--tb-s3) 0 0}
.tb-pag-deel__beeld{
  display:block; width:100%; max-width:480px; height:auto; aspect-ratio:1200 / 630;
  border:1px solid var(--tb-line); border-radius:var(--tb-r); background:var(--tb-canvas-2);
}

/* ── uitslag van een oefenexamen of set (runner/resultaat.blade.php) ──
      De score als meter met een streep op de slaaggrens, daaronder per vraag wat je koos. */
.tb-pag-schaal{position:relative; margin-top:var(--tb-s2); padding-bottom:28px}
.tb-pag-schaal .tb-meter{height:10px}
.tb-pag-schaal__grens{position:absolute; top:-5px; left:var(--grens); width:2px; height:20px; margin-left:-1px; border-radius:1px; background:var(--tb-ink)}
/* Het label staat naast de streep, niet erin: anders ligt het in de DOM op de donkere streep. */
.tb-pag-schaal__label{
  position:absolute; top:24px; right:calc(100% - var(--grens) - 1px);
  font-size:12.5px; font-weight:600; line-height:1.3; color:var(--tb-ink-2); white-space:nowrap;
}
.tb-pag-antwoorden{list-style:none; padding:0}
.tb-pag-antwoord{padding:var(--tb-s3) 0; border-bottom:1px solid var(--tb-line)}
.tb-pag-antwoord:first-child{padding-top:0}
.tb-pag-antwoord:last-child{padding-bottom:0; border-bottom:0}
.tb-pag-antwoord[hidden]{display:none}
.tb-pag-antwoord__kop{display:flex; align-items:flex-start; gap:var(--tb-s2)}
.tb-pag-antwoord__beeld{flex:none; width:112px; height:84px; object-fit:cover; border-radius:var(--tb-r-sm); background:var(--tb-canvas-3)}
.tb-pag-antwoord__tekst{flex:1; min-width:0}
.tb-pag .tb-pag-antwoord__meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:13.5px; color:var(--tb-ink-3)}
.tb-pag .tb-pag-antwoord__vraag{margin-top:6px; font-size:15.5px; font-weight:500; line-height:1.45; color:var(--tb-ink)}
.tb-pag-antwoord__keuze{display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:6px var(--tb-s2); margin-top:var(--tb-s2); font-size:14.5px; line-height:1.5}
.tb-pag-antwoord__keuze dt{color:var(--tb-ink-3)}
.tb-pag-antwoord__keuze dd{color:var(--tb-ink); overflow-wrap:anywhere}
.tb-pag-antwoord__uitleg{margin-top:4px}
.tb-pag-antwoord__uitleg summary{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  font-size:14px; font-weight:600; color:var(--tb-accent-ink); cursor:pointer; list-style:none;
}
.tb-pag-antwoord__uitleg summary::-webkit-details-marker{display:none}
.tb-pag-antwoord__uitleg summary::after{
  content:""; width:7px; height:7px; margin-top:-4px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform var(--tb-t);
}
.tb-pag-antwoord__uitleg[open] summary::after{margin-top:3px; transform:rotate(-135deg)}
.tb-pag-antwoord__uitleg summary:focus-visible{outline:2px solid var(--tb-accent); outline-offset:2px; border-radius:var(--tb-r-sm)}
.tb-pag-antwoord__uitlegtekst{max-width:72ch; padding:12px 16px; border-radius:var(--tb-r); background:var(--tb-canvas-2); font-size:15px; line-height:1.6; color:var(--tb-ink-2)}
@container tb-pag (max-width:520px){
  .tb-pag-antwoord__beeld{width:72px; height:54px}
  .tb-pag-antwoord__keuze{grid-template-columns:minmax(0, 1fr); gap:2px}
  .tb-pag-antwoord__keuze dd + dt{margin-top:8px}
}

/* ── telefoon en smalle tablet: de zijbalk is dan een lade onder de vaste kopbalk ── */
@media(max-width:899px){
  .tb-pag{padding:calc(60px + var(--tb-s3)) var(--tb-s2) var(--tb-s4)}
  .tb-pag h1{font-size:26px}
  .tb-pag-kop{margin-bottom:var(--tb-s3)}
  .tb-pag--los{padding:var(--tb-s3) var(--tb-s2) var(--tb-s4)}
}