/* tb-componenten.css — de bouwstenen, gebouwd op tb-tokens.css.
   Laadt altijd NA tb-tokens.css. Geen enkele kleurwaarde in dit bestand:
   alles verwijst naar een variabele, zodat een stijlwijziging één plek heeft.
   Geen !important: dit is nieuwe code en hoeft niets te overschrijven.

   Herkomst: workspaces/theoriebriljant/redesign/schetsen/1-examenbureau.html
   en 4-dashboard.html (keuze Daan, 3-10-2026). */

/* ── knop ──────────────────────────────────────────────────────── */
.tb-knop{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 22px;
  border:1px solid transparent; border-radius:var(--tb-r);
  font-family:var(--tb-font); font-size:16px; font-weight:600; line-height:1;
  letter-spacing:-.01em; text-decoration:none; cursor:pointer;
  transition:transform calc(var(--tb-t) * .8), background var(--tb-t), border-color var(--tb-t);
}
.tb-knop:active{transform:translateY(1px)}
.tb-knop:focus-visible{outline:2px solid var(--tb-accent); outline-offset:2px}

.tb-knop--1{background:var(--tb-ink); color:var(--tb-canvas)}
.tb-knop--1:hover{background:var(--tb-ink-2)}

.tb-knop--2{background:transparent; color:var(--tb-ink); border-color:var(--tb-line-2)}
.tb-knop--2:hover{border-color:var(--tb-ink)}

.tb-knop--3{background:transparent; color:var(--tb-accent-ink); padding:0 4px; min-height:40px}
.tb-knop--3:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}

.tb-knop--sm{min-height:40px; padding:0 16px; font-size:15px}
.tb-knop--blok{width:100%}

/* ── kaart ─────────────────────────────────────────────────────── */
.tb-kaart{
  background:var(--tb-canvas);
  border:1px solid var(--tb-line);
  border-radius:var(--tb-r);
  padding:var(--tb-s3);
}
.tb-kaart--vlak{padding:0; overflow:hidden}
.tb-kaart__kop{
  display:flex; align-items:center; justify-content:space-between; gap:var(--tb-s2);
  padding:14px var(--tb-s3);
  border-bottom:1px solid var(--tb-line);
  background:var(--tb-canvas-2);
  font-size:13px; font-weight:600; color:var(--tb-ink-2);
}
.tb-kaart__titel{
  font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--tb-ink-3); margin:0;
}

/* ── chip ──────────────────────────────────────────────────────── */
.tb-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:999px;
  border:1px solid var(--tb-line); background:var(--tb-canvas-2);
  font-size:13.5px; font-weight:500; color:var(--tb-ink-2);
}
.tb-chip b{color:var(--tb-ink); font-weight:700}

/* ── badge ─────────────────────────────────────────────────────── */
.tb-badge{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:999px;
  font-size:12.5px; font-weight:600; white-space:nowrap;
}
.tb-badge--ok{background:var(--tb-ok-soft); color:var(--tb-ok)}
.tb-badge--warn{background:var(--tb-warn-soft); color:var(--tb-warn)}
.tb-badge--neutraal{background:var(--tb-canvas-2); color:var(--tb-ink-3); border:1px solid var(--tb-line)}

/* ── lijstrij ──────────────────────────────────────────────────── */
.tb-rij{
  display:flex; align-items:center; gap:var(--tb-s2);
  padding:13px 0; border-bottom:1px solid var(--tb-line);
}
.tb-rij:last-child{border-bottom:0}
.tb-rij__nr{
  flex:none; width:34px; height:34px; border-radius:var(--tb-r);
  background:var(--tb-canvas-2); border:1px solid var(--tb-line);
  display:grid; place-items:center;
  font-size:14px; font-weight:700; color:var(--tb-ink-2);
  font-variant-numeric:tabular-nums;
}
.tb-rij__tekst{flex:1; min-width:0}
.tb-rij__tekst b{display:block; font-size:15.5px; font-weight:600}
.tb-rij__tekst span{display:block; margin-top:2px; font-size:13.5px; color:var(--tb-ink-3)}

/* ── voortgangsbalk ────────────────────────────────────────────── */
.tb-meter{
  height:6px; border-radius:999px;
  background:var(--tb-canvas-3); overflow:hidden;
}
.tb-meter > i{
  display:block; height:100%; border-radius:999px;
  background:var(--tb-accent);
  transition:width var(--tb-t) ease-out;
}
.tb-meter--ok > i{background:var(--tb-ok)}
.tb-meter--dun{height:3px}

/* ── formulierveld ─────────────────────────────────────────────── */
.tb-veld{display:grid; grid-template-columns:minmax(0, 1fr); gap:6px}
.tb-veld label{font-size:14.5px; font-weight:600; color:var(--tb-ink-2)}
.tb-veld input,
.tb-veld select,
.tb-veld textarea{
  min-height:48px; padding:12px 14px;
  border:1px solid var(--tb-line-2); border-radius:var(--tb-r);
  background:var(--tb-canvas); color:var(--tb-ink);
  font-family:var(--tb-font); font-size:16px;  /* 16px voorkomt inzoomen op iOS */
  transition:border-color var(--tb-t);
}
.tb-veld textarea{min-height:120px; line-height:1.55}
.tb-veld input:focus,
.tb-veld select:focus,
.tb-veld textarea:focus{outline:2px solid var(--tb-accent); outline-offset:1px; border-color:var(--tb-ink)}
.tb-veld__hulp{font-size:13.5px; color:var(--tb-ink-3)}
.tb-veld__fout{font-size:13.5px; color:var(--tb-warn); font-weight:500}

/* ── uitklapper ────────────────────────────────────────────────── */
.tb-uitklap{border-bottom:1px solid var(--tb-line)}
.tb-uitklap summary{
  cursor:pointer; padding:var(--tb-s3) 0;
  font-size:17px; font-weight:600; letter-spacing:-.02em;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
  gap:var(--tb-s3);
}
.tb-uitklap summary::-webkit-details-marker{display:none}
.tb-uitklap summary::after{
  content:""; flex:none; width:11px; height:11px; margin-top:-4px;
  border-right:2px solid var(--tb-ink-3); border-bottom:2px solid var(--tb-ink-3);
  transform:rotate(45deg); transition:transform var(--tb-t);
}
.tb-uitklap[open] summary::after{transform:rotate(225deg); margin-top:4px}
.tb-uitklap p{
  padding:0 0 var(--tb-s3); margin:0;
  font-size:16px; color:var(--tb-ink-2); max-width:62ch; line-height:1.6;
}

/* ── raakvlakken: 44px is een eis, geen smaak.
      Tot 900px, want een tablet is ook touch. ─────────────────── */
@media(max-width:900px){
  .tb-knop,
  .tb-knop--sm,
  .tb-knop--3{min-height:44px}
  .tb-uitklap summary{min-height:44px}
}

/* ── logo per modus en de modusschakelaar ─────────────────────────
      Hoort bij de blade-wijzigingen van 4-10-2026 (schakelaar-blade.md). */

/* Het woordmerk bestaat in wit en in zwart, op elke plek staan ze allebei. Hier wordt
   alleen VERBORGEN, nooit een display opgelegd: de zichtbare variant houdt de display van
   zijn plek (in de mobiele kop is dat block). Met html ervoor is dit (0,2,1) en wint het
   zonder !important van .tb-mobile-header__logo img (0,1,1). */
html:not([data-tb-mode="donker"]) .tb-merk__wit,
html[data-tb-mode="donker"] .tb-merk__zwart{display:none}

/* De modusschakelaar is een echte switch: role="switch" met aria-checked. De bestaande
   toggle in brand.css tekent zijn aan-stand alleen op aria-pressed. background-color en
   niet background: die shorthand zet background-clip terug. */
.tb-toggle__switch[aria-checked="true"]{background-color:var(--tb-accent)}
.tb-toggle__switch[aria-checked="true"]::before{transform:translateX(20px)}

/* Beide schakelaars zijn 24px hoog getekend, het raakvlak hoort 44px te zijn. Padding maakt
   de knop 44px, background-clip houdt de tekening op 24px. De [aria-…]-varianten staan erbij
   omdat de aan-regel in brand.css de background-shorthand gebruikt, en die zet de clip terug;
   met (0,3,0) wint deze. Het bolletje schuift de padding mee omlaag. Niet krimpen: op 390
   perste de rij de knop tot 38px, en dan stak het bolletje in de aan-stand 4px uit. */
.tb-toggle .tb-toggle__switch,
.tb-toggle .tb-toggle__switch[aria-pressed],
.tb-toggle .tb-toggle__switch[aria-checked]{box-sizing:content-box; padding:10px 0; background-clip:content-box; flex-shrink:0}
.tb-toggle .tb-toggle__switch::before{top:12px}

/* ── basis voor de examenrunner en de resultaatpagina's ───────────────
      Die pagina's laden geen Bootstrap en geen publieke basis-css, en dus geen box-sizing-reset.
      Zonder reset is een element met width:100% plus padding breder dan zijn ouder: tot 5-10-2026
      viel de runnerkaart daardoor 67px buiten beeld op 1280 (Markeer en Volgende afgesneden) en
      was de resultaatpagina op de telefoon 437 in plaats van 390 breed. */
body.tb-runner *, body.tb-runner *::before, body.tb-runner *::after,
body.tb-result-page *, body.tb-result-page *::before, body.tb-result-page *::after{box-sizing:border-box}