/* ============================================================
   Studiewebsite Kennistoets HCD — eigen laag bovenop tokens.css
   Erft het Tanja CMD HAN design system: Inter, Tekhelet primair,
   Poppy spaarzaam, flat (geen schaduwen), 8px grid, focus #0066FF.
   ============================================================ */

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--fg-2);
  -webkit-font-smoothing: antialiased;
}

/* LWG accentkleuren — afgeleid in oklch, zelfde lichtheid/chroma als de paarse familie,
   alleen hue verschilt. Rustig en academisch, geen felle kleuren. */
:root {
  --lwg-ur: oklch(0.52 0.11 285);  /* paars — User Research */
  --lwg-pr: oklch(0.52 0.11 230);  /* blauw — Prototyping */
  --lwg-ut: oklch(0.52 0.11 175);  /* groen-cyaan — Usability Testing */
  --lwg-wd: oklch(0.52 0.11 320);  /* magenta-paars — Web Design */
  --app-max: 1100px;
  --sidebar-w: 256px;
}

a { color: var(--brand); }

/* ---------- Layout shell ---------- */
.app {
  min-height: 100%;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
}
.app.nav-top { grid-template-columns: 1fr; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  border-right: var(--bw-1) solid var(--border-subtle);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-4);
  gap: var(--s-2);
  overflow-y: auto;
}
.brand {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2); margin-bottom: var(--s-4);
  border: none; background: none; width: 100%; text-align: left;
  font-family: inherit; cursor: pointer; border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out);
}
.brand:hover { background: var(--bg-muted); }
.brand:focus-visible { outline: var(--bw-2) solid var(--brand); outline-offset: 2px; }
.brand .mark {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  background: var(--brand); color: var(--brand-fg);
  display: grid; place-items: center; font-weight: var(--fw-bold);
  font-size: var(--fs-16); flex: none; letter-spacing: -0.02em;
}
.brand .mark span { transform: translateY(-0.5px); }
.brand-text { min-width: 0; }
.brand .title { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--fg-2); line-height: 1.2; white-space: nowrap; }
.brand .sub { font-size: var(--fs-12); color: var(--fg-muted); white-space: nowrap; }

/* Vast versie-label: zichtbaar op elke pagina, in elke layout en op mobiel. */
.app-version {
  position: fixed; bottom: var(--s-4); right: var(--s-4); z-index: 50;
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide);
  color: var(--fg-muted); background: var(--bg-canvas);
  border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-full);
  padding: 4px 10px; text-decoration: none; cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.app-version:hover { color: var(--fg-2); border-color: var(--border-strong); }
.app-version:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.nav-section-label {
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--fg-muted); padding: var(--s-4) var(--s-2) var(--s-2);
}
.nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  border-radius: var(--radius-md);
  color: var(--fg-2); text-decoration: none;
  font-size: var(--fs-14); font-weight: var(--fw-medium);
  border: none; background: none; width: 100%; text-align: left;
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out);
  font-family: inherit;
}
.nav-item i { width: 20px; text-align: center; color: var(--fg-muted); font-size: 15px; }
.nav-item:hover { background: var(--bg-muted); }
.nav-item.active { background: var(--brand); color: var(--brand-fg); }
.nav-item.active i { color: var(--brand-fg); }
.nav-item .count {
  margin-left: auto; font-size: var(--fs-12); color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.nav-item.active .count { color: var(--fg-on-inverse-muted); }

.sidebar-foot { margin-top: auto; padding-top: var(--s-5); }
.sidebar-foot .meta { font-size: var(--fs-12); color: var(--fg-muted); line-height: 1.5; }

/* ---------- Topbar (alternatieve navigatie) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-6); height: 64px;
  border-bottom: var(--bw-1) solid var(--border-subtle);
  background: var(--bg-canvas);
}
.topbar .brand { width: auto; margin-bottom: 0; flex: none; }
.topnav { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.topnav .nav-item { width: auto; padding: var(--s-2) var(--s-4); }

/* ---------- Main content ---------- */
.main { min-width: 0; }
.content {
  max-width: var(--app-max);
  margin: 0 auto;
  padding: var(--s-8) var(--s-6) var(--s-11);
}
.page-head { margin-bottom: var(--s-7); }
.page-head .eyebrow { margin-bottom: var(--s-2); }
.page-head h1 { font-size: var(--fs-40); margin: 0 0 var(--s-3); }
.page-head .lead { color: var(--fg-muted); max-width: 60ch; }

/* Kop-rij met compact zoekveld naast de titel */
.page-head.ph-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; }
.ph-main { flex: 1 1 440px; min-width: 0; }
.ph-aside { flex: 0 0 auto; width: 360px; max-width: 100%; margin-top: var(--s-7); }
/* Variant zonder eyebrow: zoekveld lijnt uit met de titel */
.ph-aside-top { margin-top: 6px; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-canvas);
  border: var(--bw-1) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}
.card.subtle { background: var(--bg-subtle); }
.card.pad-lg { padding: var(--s-6); }
.card-grid { display: grid; gap: var(--s-4); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: inherit; font-size: var(--fs-14); font-weight: var(--fw-semibold);
  padding: var(--s-3) var(--s-5); border-radius: var(--radius-md);
  border: var(--bw-1) solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  text-decoration: none; line-height: 1.2;
}
.btn:active { filter: brightness(0.97); }
.btn-primary { background: var(--brand); color: var(--brand-fg); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-secondary { background: var(--bg-canvas); color: var(--fg-2); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--bg-muted); border-color: var(--border-strong); }
.btn-ghost { background: none; color: var(--fg-2); }
.btn-ghost:hover { background: var(--bg-muted); }
.btn-accent { background: var(--accent); color: var(--accent-fg); }
.btn-accent:hover { background: var(--accent-hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: var(--s-2) var(--s-3); font-size: var(--fs-12); }
.btn-lg { padding: var(--s-4) var(--s-6); font-size: var(--fs-16); }
.btn-block { width: 100%; }

/* ---------- Toetsenbord-hint (Enter = volgende) ---------- */
.kbd-hint { display: inline-flex; align-items: center; }
.kbd-hint kbd {
  font-family: inherit; font-size: var(--fs-12); font-weight: var(--fw-semibold);
  line-height: 1; color: var(--fg-muted);
  padding: 4px 7px; border-radius: 6px;
  background: var(--bg-muted); border: var(--bw-1) solid var(--border-default);
  box-shadow: 0 1px 0 var(--border-default);
}
.kbd-hint kbd::before { content: "\21B5 "; opacity: 0.7; }
/* Binnen een gevulde knop: meelopen met de knoptekst, subtieler kader. */
.btn .kbd-hint kbd {
  color: currentColor; background: color-mix(in srgb, currentColor 16%, transparent);
  border-color: color-mix(in srgb, currentColor 28%, transparent); box-shadow: none;
  opacity: 0.85;
}

/* ---------- Tags / badges ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12); font-weight: var(--fw-medium);
  padding: 3px 10px; border-radius: var(--radius-full);
  background: var(--bg-muted); color: var(--fg-3);
  white-space: nowrap;
}
.tag .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.tag.lwg-ur { color: var(--lwg-ur); background: color-mix(in oklab, var(--lwg-ur) 12%, white); }
.tag.lwg-pr { color: var(--lwg-pr); background: color-mix(in oklab, var(--lwg-pr) 12%, white); }
.tag.lwg-ut { color: var(--lwg-ut); background: color-mix(in oklab, var(--lwg-ut) 12%, white); }
.tag.lwg-wd { color: var(--lwg-wd); background: color-mix(in oklab, var(--lwg-wd) 12%, white); }
.tag-type { background: var(--bg-muted); color: var(--fg-muted); }
.tag-open { background: var(--status-info-bg); color: var(--status-info-fg); }

/* ---------- Progress bar ---------- */
.progress { height: 8px; border-radius: var(--radius-full); background: var(--bg-muted); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: inherit; transition: width var(--dur-slow) var(--ease-out); }
.progress.accent > span { background: var(--accent); }

/* ---------- Stat ---------- */
.stat .num { font-size: var(--fs-40); font-weight: var(--fw-bold); color: var(--fg-1); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .label { font-size: var(--fs-14); color: var(--fg-muted); margin-top: var(--s-2); }

/* ---------- Filter bar ---------- */
.filterbar { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-5); }
.chip {
  font-family: inherit; font-size: var(--fs-12); font-weight: var(--fw-medium);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-full);
  border: var(--bw-1) solid var(--border-default); background: var(--bg-canvas);
  color: var(--fg-2); cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
  display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { border-color: var(--border-strong); }
.chip.on { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.chip.leeg { opacity: 0.38; cursor: not-allowed; }
.chip.leeg:hover { border-color: var(--border-default); }

/* ---------- List rows (leermodus / oefenen) ---------- */
.row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: var(--bw-1) solid var(--border-subtle);
  border-radius: var(--radius-lg); background: var(--bg-canvas);
  cursor: pointer; text-align: left; width: 100%; font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.row:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.row .row-main { min-width: 0; flex: 1; }
.row .row-title { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--fg-2); margin: 0 0 4px; }
.row .row-sub { font-size: var(--fs-14); color: var(--fg-muted); margin: 0; }
.row .row-aside { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex: none; }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }

/* ---------- Leerstof / prose ---------- */

/* Video-banner (leermodus-overzicht) + video-link (lesdetail) */
.video-banner {
  display: flex; align-items: center; gap: var(--s-4);
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: var(--s-5);
  margin: 0 0 var(--s-6);
  background: linear-gradient(110deg, color-mix(in oklab, var(--accent) 9%, var(--bg-canvas)), var(--bg-canvas) 62%);
  border: var(--bw-1) solid color-mix(in oklab, var(--accent) 28%, var(--border-subtle));
  border-radius: var(--radius-lg); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.video-banner:hover { border-color: var(--accent); box-shadow: 0 2px 14px color-mix(in oklab, var(--accent) 14%, transparent); }
.vb-icon { flex: none; width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 18px; }
.vb-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.vb-title { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--fg-1); line-height: 1.25; }
.vb-sub { font-size: var(--fs-13); color: var(--fg-muted); line-height: 1.4; }
.vb-cta { flex: none; display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--accent); white-space: nowrap; }

.video-link {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6);
  background: var(--bg-subtle); border: var(--bw-1) solid var(--border-subtle);
  border-radius: var(--radius-lg); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.video-link:hover { border-color: var(--accent); background: var(--bg-canvas); }
.vl-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-full); display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 14px; padding-left: 2px; }
.vl-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vl-title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--fg-1); line-height: 1.3; }
.vl-sub { font-size: var(--fs-12); color: var(--fg-muted); }
.vl-ext { flex: none; color: var(--border-strong); font-size: 13px; }
.video-link:hover .vl-ext { color: var(--accent); }
@media (max-width: 560px) {
  .vb-cta { font-size: 0; }
  .vb-cta i { font-size: 15px; }
}

/* ---------- Kijklijst (in-app video-overzicht) ---------- */
.kl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-7); }
.kl-stat { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4);
  background: var(--bg-canvas); border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-full);
  font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--fg-3); }
.kl-stat i { color: var(--accent); font-size: 12px; }
.kl-stat b { color: var(--fg-1); font-variant-numeric: tabular-nums; }
.kl-reset { margin-left: auto; background: none; border: none; font-family: inherit; font-size: var(--fs-13);
  font-weight: var(--fw-medium); color: var(--fg-muted); cursor: pointer; display: inline-flex; align-items: center;
  gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--radius-full); }
.kl-reset:hover { color: var(--fg-2); background: var(--bg-muted); }

.kl-les { margin-bottom: var(--s-7); }
.kl-les:last-of-type { margin-bottom: 0; }
.kl-les-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); flex-wrap: wrap; }
.kl-les-nr { font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: #fff; background: var(--bg-inverse); padding: 3px 10px; border-radius: var(--radius-full); }
.kl-les-titel { font-size: var(--fs-18); font-weight: var(--fw-semibold); color: var(--fg-1); }
.kl-les-count { font-size: var(--fs-13); color: var(--fg-muted); }

.kl-rows { display: flex; flex-direction: column; gap: var(--s-2); }
.kl-row { display: flex; align-items: stretch; gap: 0; }
.kl-check { flex: none; align-self: center; width: 26px; height: 26px; margin-right: var(--s-3); border-radius: var(--radius-full);
  border: 2px solid var(--border-strong); display: grid; place-items: center; color: transparent; cursor: pointer;
  background: var(--bg-canvas); transition: all var(--dur-fast) var(--ease-out); }
.kl-check:hover { border-color: var(--accent); }
.kl-check i { font-size: 12px; }
.kl-row.done .kl-check { background: var(--status-success-fg); border-color: var(--status-success-fg); color: #fff; }

.kl-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); background: var(--bg-canvas); border: var(--bw-1) solid var(--border-subtle);
  border-radius: var(--radius-lg); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.kl-link:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.kl-play { flex: none; width: 38px; height: 38px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); font-size: 13px; padding-left: 2px; }
.kl-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.kl-row-title { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--fg-1); line-height: 1.3; }
.kl-row.done .kl-row-title { color: var(--fg-muted); text-decoration: line-through; }
.kl-row-sub { font-size: var(--fs-13); color: var(--fg-muted); }
.kl-dur { flex: none; font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--fg-muted);
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: var(--s-2); }
.kl-ext { flex: none; color: var(--border-strong); font-size: 13px; }
.kl-link:hover .kl-ext { color: var(--accent); }
.kl-foot { margin-top: var(--s-8); padding-top: var(--s-5); border-top: var(--bw-1) solid var(--border-subtle);
  font-size: var(--fs-13); color: var(--fg-muted); line-height: 1.6; max-width: 70ch; }
@media (max-width: 560px) {
  .kl-play { display: none; }
  .kl-link { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
}
.prose { max-width: 70ch; }
.prose h3 { font-size: var(--fs-24); margin: var(--s-7) 0 var(--s-3); color: var(--fg-2); }
.prose h3:first-child { margin-top: 0; }
.prose p { font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--fg-2); }
.quote {
  border-left: 3px solid var(--border-strong);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin: var(--s-5) 0; color: var(--fg-3); font-style: italic;
}
.quote .src { display: block; font-style: normal; font-size: var(--fs-12); color: var(--fg-muted); margin-top: var(--s-2); }
.bron-note {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-12); color: var(--fg-muted);
  background: var(--bg-subtle); border: var(--bw-1) solid var(--border-subtle);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm);
}

/* ---------- Begrippen (definitielijst) ---------- */
.begrip { padding: var(--s-4) 0; border-top: var(--bw-1) solid var(--border-subtle); }
.begrip:first-child { border-top: none; }
.begrip dt { font-weight: var(--fw-semibold); color: var(--fg-2); margin-bottom: 4px; }
.begrip dd { margin: 0; color: var(--fg-muted); font-size: var(--fs-14); line-height: var(--lh-normal); }

/* ---------- Flashcard ---------- */
.flash-stage { perspective: 1600px; }
.flashcard {
  position: relative; width: 100%; min-height: 320px;
  transform-style: preserve-3d; transition: transform var(--dur-slow) var(--ease-in-out);
  cursor: pointer;
}
.flashcard.flipped { transform: rotateY(180deg); }
.flash-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-xl);
  background: var(--bg-canvas); padding: var(--s-8);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.flash-face.back { transform: rotateY(180deg); background: var(--bg-subtle); }
.flash-face .face-label { position: absolute; top: var(--s-5); left: var(--s-5); }
.flash-term { font-size: var(--fs-32); font-weight: var(--fw-bold); color: var(--fg-1); letter-spacing: -0.01em; }
.flash-def { font-size: var(--fs-20); line-height: var(--lh-normal); color: var(--fg-2); max-width: 50ch; }
.flash-hint { position: absolute; bottom: var(--s-5); font-size: var(--fs-12); color: var(--fg-muted); }

/* ---------- Quiz / proeftoets ---------- */
.option {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border: var(--bw-1) solid var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-canvas);
  cursor: pointer; width: 100%; text-align: left; font-family: inherit;
  font-size: var(--fs-16); color: var(--fg-2); line-height: var(--lh-normal);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.option:hover:not(:disabled) { border-color: var(--border-strong); }
.option .marker {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: var(--bw-2) solid var(--border-strong); display: grid; place-items: center;
  font-size: 13px; color: var(--fg-muted); margin-top: 1px;
}
.option.selected { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 5%, white); }
.option.selected .marker { border-color: var(--brand); background: var(--brand); color: var(--brand-fg); }
.option.correct { border-color: var(--status-success-fg); background: var(--status-success-bg); }
.option.correct .marker { border-color: var(--status-success-fg); background: var(--status-success-fg); color: #fff; }
.option.wrong { border-color: var(--status-error-fg); background: var(--status-error-bg); }
.option.wrong .marker { border-color: var(--status-error-fg); background: var(--status-error-fg); color: #fff; }
.option:disabled { cursor: default; }

.feedback {
  margin-top: var(--s-4); padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-md); border: var(--bw-1) solid var(--border-subtle);
  background: var(--bg-subtle); font-size: var(--fs-14); line-height: var(--lh-normal);
}
.feedback.good { background: var(--status-success-bg); border-color: color-mix(in oklab, var(--status-success-fg) 30%, white); }
.feedback.bad { background: var(--status-error-bg); border-color: var(--status-error-border); }
.feedback .fb-head { font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.feedback.good .fb-head { color: var(--status-success-fg); }
.feedback.bad .fb-head { color: var(--status-error-fg); }

.qmeta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.qprogress { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.qprogress .progress { flex: 1; }
.qprogress .qcount { font-size: var(--fs-14); color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.qstem { font-size: var(--fs-20); font-weight: var(--fw-semibold); color: var(--fg-1); line-height: var(--lh-normal); margin: 0 0 var(--s-5); }

/* ---------- Open vraag (proeftoets) ---------- */
.deelvraag { padding: var(--s-4) 0; border-top: var(--bw-1) solid var(--border-subtle); }
.deelvraag:first-of-type { border-top: none; }
.deelvraag .dv-head { display: flex; gap: var(--s-3); align-items: baseline; }
.deelvraag .dv-label { font-weight: var(--fw-bold); color: var(--brand); }
.deelvraag .dv-punten { margin-left: auto; font-size: var(--fs-12); color: var(--fg-muted); white-space: nowrap; }
textarea.antwoord {
  width: 100%; margin-top: var(--s-3); min-height: 110px; resize: vertical;
  font-family: inherit; font-size: var(--fs-16); line-height: var(--lh-normal);
  padding: var(--s-3) var(--s-4); border: var(--bw-1) solid var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-canvas); color: var(--fg-2);
}
textarea.antwoord:focus-visible { border-color: var(--border-strong); }
.model {
  margin-top: var(--s-4); padding: var(--s-4) var(--s-5);
  background: var(--bg-subtle); border: var(--bw-1) solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.model h5 { margin: 0 0 var(--s-2); font-size: var(--fs-14); color: var(--fg-3); }
.model p { font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-2); margin: 0 0 var(--s-3); white-space: pre-line; }
.model p:last-child { margin-bottom: 0; }

/* Antwoordtekst — losse alinea's per (deel)antwoord, leesbaar gespatieerd. */
.ant-tekst { display: flex; flex-direction: column; gap: var(--s-3); }
.ant-tekst .ant-p { margin: 0; font-size: 15px; line-height: var(--lh-relaxed); color: var(--fg-2); }
.ant-p .ant-label { color: var(--brand); font-weight: var(--fw-bold); margin-right: 2px; }
.nakijk { list-style: none; padding: 0; margin: var(--s-2) 0 0; }
.nakijk li { display: flex; gap: var(--s-2); font-size: var(--fs-14); color: var(--fg-2); padding: 4px 0; }
.nakijk li i { color: var(--fg-muted); margin-top: 3px; }
.score-input { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; }
.score-input .pts { display: flex; gap: 6px; }
.pts button {
  width: 36px; height: 36px; border-radius: var(--radius-sm); border: var(--bw-1) solid var(--border-default);
  background: var(--bg-canvas); cursor: pointer; font-family: inherit; font-weight: var(--fw-semibold); color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.pts button.on { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }

/* ---------- Result screen ---------- */
.result-hero { text-align: center; padding: var(--s-8) var(--s-5); }
.result-score { font-size: var(--fs-80); font-weight: var(--fw-bold); color: var(--brand); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ring { display: grid; place-items: center; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: var(--s-10) var(--s-5); color: var(--fg-muted); }
.empty i { font-size: 32px; color: var(--border-strong); margin-bottom: var(--s-4); }

/* ---------- Misc ---------- */
.muted { color: var(--fg-muted); }
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.wrap { flex-wrap: wrap; }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); } .mb-7 { margin-bottom: var(--s-7); } .mb-8 { margin-bottom: var(--s-8); }
.hide { display: none !important; }

/* Sectiekop: een eyebrow die een nieuwe sectie inleidt na voorgaande inhoud.
   Ruime, voorspelbare bovenmarge (48px) die wint van eventuele margin-collapse. */
.section-label {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin: var(--s-8) 0 var(--s-4);
}

/* ---------- Mobiele navigatie ---------- */
.mobile-bar { display: none; }

@media (max-width: 860px) {
  .app, .app.nav-top { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .content { padding: var(--s-6) var(--s-4) calc(72px + var(--s-6)); }
  .page-head h1 { font-size: var(--fs-32); }
  .page-head.ph-row { flex-direction: column; gap: var(--s-4); }
  .ph-aside { width: 100%; margin-top: 0; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .cols-4.keep-mobile { grid-template-columns: repeat(2, 1fr); }
  .topbar { padding: 0 var(--s-4); overflow-x: auto; }
  .mobile-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--bg-canvas); border-top: var(--bw-1) solid var(--border-subtle);
    padding: 6px 4px env(safe-area-inset-bottom, 4px);
  }
  .mobile-bar button {
    flex: 1; background: none; border: none; font-family: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; color: var(--fg-muted); font-size: 10px; font-weight: var(--fw-medium);
    border-radius: var(--radius-sm);
  }
  .mobile-bar button i { font-size: 17px; }
  .mobile-bar button.active { color: var(--brand); }
  .app-version { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + var(--s-2)); right: var(--s-3); }
}

@media (max-width: 520px) {
  .flash-term { font-size: var(--fs-24); }
  .flash-def { font-size: var(--fs-16); }
  .result-score { font-size: var(--fs-56); }
}

@media (prefers-reduced-motion: reduce) {
  .flashcard { transition: none; }
  .progress > span { transition: none; }
}

/* ============================================================
   SLIMME TOETSING — examenklaarheid, AI-advies, beheersing, slim oefenen
   ============================================================ */

/* Examenklaarheid-kaart */
.readiness-card { border-color: var(--border-default); }
.readiness-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--s-6); align-items: center; }
.readiness-meter { display: grid; place-items: center; min-width: 118px; }
.readiness-body { min-width: 0; }
.exam-count {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-12); font-weight: var(--fw-medium);
  color: var(--brand); background: color-mix(in oklab, var(--brand) 9%, white);
  padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap;
}
@media (max-width: 640px) {
  .readiness-grid { grid-template-columns: 1fr; gap: var(--s-4); justify-items: start; }
  .readiness-meter { justify-self: center; }
}
.readiness-empty { display: flex; align-items: flex-start; gap: var(--s-4); }
.re-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md); flex: none;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--brand) 10%, white); color: var(--brand); font-size: 20px;
}

/* AI-advies (subtiel blok) */
.ai-advies {
  background: var(--bg-subtle); border: var(--bw-1) solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--s-4);
  font-size: var(--fs-14); color: var(--fg-2);
}
.ai-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted);
}
.ai-chip i { color: var(--brand); }
.ai-refresh {
  border: none; background: none; cursor: pointer; color: var(--fg-muted);
  padding: 4px; border-radius: var(--radius-sm); line-height: 1;
}
.ai-refresh:hover { background: var(--bg-muted); color: var(--fg-2); }
.ai-refresh:disabled { opacity: 0.5; cursor: default; }
.ai-spin i { color: var(--brand); margin-right: 6px; }
.ai-verdict { margin: 0; line-height: var(--lh-normal); color: var(--fg-1); font-weight: var(--fw-medium); }
.ai-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.ai-list li { display: block; line-height: 1.55; }
.ai-list li + li { margin-top: var(--s-2); }
.ai-list li i { color: var(--brand); font-size: 11px; margin-right: 8px; }
.ai-methode {
  display: block;
  margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--bw-1) solid var(--border-subtle);
  font-size: var(--fs-13, 13px); color: var(--fg-3); line-height: 1.55;
}
.ai-methode i { color: var(--brand); margin-right: 8px; }

/* Beheersingskaart */
.mastery-rows { display: flex; flex-direction: column; gap: var(--s-3); }
.mastery-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 44px; gap: var(--s-4); align-items: center; }
.mastery-name { font-size: var(--fs-14); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mastery-bar { height: 8px; }
.mastery-val { font-size: var(--fs-12); color: var(--fg-muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .mastery-row { grid-template-columns: minmax(0, 1fr) 64px 40px; gap: var(--s-3); }
}

/* Reden-pill (subtiele hint waarom een vraag gekozen is) */
.reason-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12); font-weight: var(--fw-medium);
  padding: 4px 10px; border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--brand) 8%, white);
  color: var(--brand); white-space: nowrap;
}
.reason-pill i { font-size: 11px; }

/* Slim oefenen — setup-voorvertoning + run-reden */
.smart-mix { display: flex; flex-direction: column; gap: var(--s-3); }
.smart-mix-label { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); }
.mix-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.slim-reason { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }

/* ============================================================
   OEFENEN OP VERZOEK — zoekveld + type-ahead suggesties
   ============================================================ */
.zoek-wrap { position: relative; }
.zoek-field {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border: var(--bw-1) solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-canvas); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.zoek-field.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 14%, transparent); }
.zoek-ic { color: var(--fg-muted); font-size: 15px; flex: none; }
.zoek-input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: inherit; font-size: var(--fs-16); color: var(--fg-2); padding: var(--s-2) 0;
}
.zoek-input::placeholder { color: var(--fg-muted); }
.zoek-clear {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-full);
  border: none; background: none; color: var(--fg-muted); cursor: pointer; font-size: 14px;
}
.zoek-clear:hover { background: var(--bg-muted); color: var(--fg-2); }
.zoek-go { flex: none; }

/* Compacte variant (paginakop) */
.zoek-field.compact { padding: 5px 5px 5px 14px; gap: var(--s-2); }
.zoek-field.compact .zoek-ic { font-size: 14px; }
.zoek-field.compact .zoek-input { font-size: var(--fs-15, 15px); padding: 6px 0; }
.zoek-field.compact .zoek-go { padding: 8px 14px; font-size: var(--fs-14); }
.zoek-field.compact .zoek-clear { width: 26px; height: 26px; }

.zoek-suggs {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--bg-canvas); border: var(--bw-1) solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--s-2);
  box-shadow: 0 16px 40px rgba(20, 18, 29, 0.16); max-height: 320px; overflow-y: auto;
}
.zoek-sugg {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-3) var(--s-3); border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-14); color: var(--fg-2); text-align: left;
  border-radius: var(--radius-sm, 8px);
}
.zoek-sugg:hover, .zoek-sugg.hi { background: var(--bg-muted); }
.zoek-sugg-head {
  font-size: 11px; font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--fg-muted);
  padding: var(--s-3) var(--s-3) 4px;
}
.zoek-sugg-head:not(:first-child) { margin-top: 2px; border-top: var(--bw-1) solid var(--border-subtle); padding-top: var(--s-3); }
.zoek-sugg-ic { color: var(--fg-muted); font-size: 13px; flex: none; width: 16px; text-align: center; }
.zoek-sugg-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoek-sugg-lwg {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12); color: var(--fg-muted);
}
.zoek-sugg-lwg .dot { width: 8px; height: 8px; border-radius: 50%; }

/* Actieve zoekterm-chip in Gericht oefenen */
.zoek-actief {
  display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap;
  padding: 5px 6px 5px 12px; border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--brand) 9%, white); color: var(--brand);
  font-size: var(--fs-13, 13px); font-weight: var(--fw-semibold);
}
.zoek-actief button {
  width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer;
  background: color-mix(in oklab, var(--brand) 16%, white); color: var(--brand); font-size: 11px;
}
.zoek-actief button:hover { background: var(--brand); color: var(--brand-fg); }

@media (max-width: 860px) {
  .zoek-go { padding-left: var(--s-3); padding-right: var(--s-3); }
}

/* Inklapbaar 'Verfijnen'-blok */
.verfijn-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; border: none; background: none; cursor: pointer; font-family: inherit;
  padding: var(--s-2) 0; color: var(--fg-2);
}
.verfijn-title { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-15, 15px); font-weight: var(--fw-semibold); }
.verfijn-title > i { color: var(--fg-muted); font-size: 14px; }
.verfijn-opt { color: var(--fg-muted); font-weight: var(--fw-regular, 400); font-size: var(--fs-13, 13px); }
.verfijn-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-full); background: var(--brand); color: var(--brand-fg);
  font-size: 11px; font-weight: var(--fw-bold);
}
.verfijn-right { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--fg-muted); }
.verfijn-right > i { font-size: 13px; }
.verfijn-clear { font-size: var(--fs-13, 13px); font-weight: var(--fw-semibold); color: var(--brand); }
.verfijn-clear:hover { text-decoration: underline; }
.verfijn-body { margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--bw-1) solid var(--border-subtle); }

/* Resultatenbalk boven de vragen */
.oefen-resultaten {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  flex-wrap: wrap; margin-bottom: var(--s-4);
}
.oefen-res-meta { display: inline-flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; min-width: 0; }
.oefen-count { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--fg-2); white-space: nowrap; }
.oefen-pos { font-size: var(--fs-14); color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Theorie-kaart in de zoekresultaten */
.theorie-titel { font-size: var(--fs-18); font-weight: var(--fw-semibold); color: var(--fg-1); margin: 0 0 4px; line-height: 1.3; }
.theorie-bron { font-size: var(--fs-12); color: var(--fg-muted); margin: 0 0 var(--s-3); }
.theorie-snip { font-size: var(--fs-14); color: var(--fg-2); line-height: var(--lh-relaxed, 1.6); margin: 0; }
.theorie-begrippen { margin: var(--s-4) 0 0; display: grid; gap: var(--s-2); }
.theorie-begrip {
  background: var(--bg-subtle); border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4); display: grid; gap: 2px;
}
.theorie-begrip dt { font-size: var(--fs-13, 13px); font-weight: var(--fw-semibold); color: var(--brand); margin: 0; }
.theorie-begrip dd { font-size: var(--fs-13, 13px); color: var(--fg-2); line-height: var(--lh-normal); margin: 0; }

/* ============================================================
   FEEDBACK — drijvende knop + dialoog met emoji-waardering
   ============================================================ */

/* Drijvende knop — alleen op mobiel (op desktop staat hij in de zijbalk) */
.fab-feedback {
  display: none;
  position: fixed; right: var(--s-4); bottom: 52px; z-index: 60;
  align-items: center; gap: var(--s-2);
  padding: 11px 16px 11px 14px; border-radius: var(--radius-full);
  background: var(--brand); color: var(--brand-fg);
  border: none; cursor: pointer; font-family: inherit;
  font-size: var(--fs-14); font-weight: var(--fw-semibold);
  box-shadow: 0 4px 14px rgba(43, 28, 96, 0.22), 0 1px 3px rgba(43, 28, 96, 0.18);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.fab-feedback:hover { background: var(--brand-hover); transform: translateY(-1px); }
.fab-feedback:active { transform: translateY(0); }
.fab-feedback i { font-size: 15px; }

/* Zijbalk-knop (desktop) — onder de meta-tekst in de footer */
.sidebar-feedback {
  margin-top: var(--s-4);
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%; padding: var(--s-3);
  border: var(--bw-1) solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-canvas); color: var(--fg-2);
  font-family: inherit; font-size: var(--fs-13, 13px); font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sidebar-feedback:hover { background: var(--bg-muted); border-color: var(--border-strong); }
.sidebar-feedback i { color: var(--brand); font-size: 14px; }

@media (max-width: 860px) {
  .fab-feedback {
    display: inline-flex;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 50px);
    right: var(--s-3); padding: 10px; gap: 0;
    width: 46px; height: 46px; justify-content: center;
  }
  .fab-feedback .fab-label { display: none; }
  .fab-feedback i { font-size: 17px; }
}

/* Overlay + dialoog */
.fb-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: color-mix(in oklab, var(--c-obsidian, #14121d) 48%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: var(--s-5);
  animation: fb-fade var(--dur-fast) var(--ease-out);
}
@keyframes fb-fade { from { opacity: 0; } to { opacity: 1; } }
.fb-dialog {
  width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--bg-canvas); border: var(--bw-1) solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: var(--s-6);
  box-shadow: 0 24px 64px rgba(20, 18, 29, 0.28);
  animation: fb-pop var(--dur-base, 200ms) var(--ease-out);
}
@keyframes fb-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.fb-head { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-5); }
.fb-head h2 { font-size: var(--fs-20); margin: 0 0 4px; color: var(--fg-1); line-height: 1.25; }
.fb-head p { font-size: var(--fs-13, 13px); color: var(--fg-muted); margin: 0; line-height: 1.45; }
.fb-close {
  margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: var(--radius-md);
  border: none; background: none; color: var(--fg-muted); cursor: pointer; font-size: 15px;
}
.fb-close:hover { background: var(--bg-muted); color: var(--fg-2); }

/* Emoji-schaal */
.fb-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); margin-bottom: var(--s-2); }
.fb-face {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--s-3) 2px; border: var(--bw-1) solid var(--border-subtle);
  border-radius: var(--radius-md); background: var(--bg-canvas); cursor: pointer;
  font-family: inherit; transition: border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.fb-face .emo {
  font-size: 28px; line-height: 1; filter: grayscale(0.55); opacity: 0.7;
  transition: filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.fb-face .lbl { font-size: 11px; color: var(--fg-muted); font-weight: var(--fw-medium); }
.fb-face:hover { border-color: var(--border-strong); }
.fb-face:hover .emo { filter: grayscale(0); opacity: 1; }
.fb-face.on { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 6%, white); }
.fb-face.on .emo { filter: grayscale(0); opacity: 1; transform: scale(1.16); }
.fb-face.on .lbl { color: var(--brand); font-weight: var(--fw-semibold); }

.fb-field { margin-top: var(--s-5); }
.fb-field label { display: block; font-size: var(--fs-13, 13px); font-weight: var(--fw-semibold); color: var(--fg-2); margin-bottom: 6px; }
.fb-field .opt { color: var(--fg-muted); font-weight: var(--fw-regular, 400); }
.fb-input, .fb-textarea {
  width: 100%; font-family: inherit; font-size: var(--fs-14); color: var(--fg-2);
  padding: var(--s-3) var(--s-4); border: var(--bw-1) solid var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-canvas);
}
.fb-textarea { min-height: 92px; resize: vertical; line-height: var(--lh-normal); }
.fb-input:focus-visible, .fb-textarea:focus-visible { outline: none; border-color: var(--brand); }

.fb-anon { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.fb-anon input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.fb-anon label { font-size: var(--fs-13, 13px); color: var(--fg-muted); cursor: pointer; margin: 0; }

.fb-actions { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.fb-note { font-size: var(--fs-12); color: var(--fg-muted); margin: var(--s-4) 0 0; line-height: 1.45; }

/* Honeypot — onbereikbaar/onzichtbaar voor mensen, wel voor bots */
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* Snelheidslimiet-melding */
.fb-limiet {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md); font-size: var(--fs-13, 13px); line-height: 1.45;
  background: color-mix(in oklab, var(--status-warning-fg, #b06a00) 10%, white);
  color: var(--status-warning-fg, #8a5200);
}
.fb-limiet i { margin-top: 2px; }

/* Bedankt-staat */
.fb-thanks { text-align: center; padding: var(--s-5) var(--s-3) var(--s-3); }
.fb-thanks .big { font-size: 44px; line-height: 1; margin-bottom: var(--s-4); }
.fb-thanks h2 { font-size: var(--fs-20); margin: 0 0 var(--s-2); color: var(--fg-1); }
.fb-thanks p { font-size: var(--fs-14); color: var(--fg-muted); margin: 0 auto; max-width: 34ch; line-height: var(--lh-normal); }