:root {
  --accent: #4f46e5;
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --ok: #047857;
  --warn: #b45309;
  --error: #b91c1c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
.container { max-width: 1080px; margin: 0 auto; padding: 1.5rem; }
.topnav {
  display: flex; gap: 1rem; align-items: center;
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 0.7rem 1.5rem;
}
.topnav a { color: var(--text); text-decoration: none; padding: 0.2rem 0.5rem; border-radius: 6px; }
.topnav a.active, .topnav a:hover { background: var(--bg); }
.topnav .brand { font-weight: 700; color: var(--accent); }
.topnav .spacer { flex: 1; }
.topnav.bare { justify-content: flex-end; background: transparent; border-bottom: 0; }

.muted { color: var(--muted); font-size: 0.9rem; }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.2rem 1.4rem; margin-bottom: 1.2rem;
}
h1 { font-size: 1.5rem; margin: 0.4rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.8rem; }
h3 { font-size: 1rem; margin: 0.8rem 0 0.4rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="url"], textarea, select {
  width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--border);
  border-radius: 7px; font: inherit; background: #fff;
}
textarea { min-height: 90px; resize: vertical; }
label { display: block; font-weight: 600; font-size: 0.88rem; margin: 0.7rem 0 0.25rem; }
label .hint { font-weight: 400; color: var(--muted); }
button, .btn {
  display: inline-block; background: var(--accent); border: none; color: #fff;
  padding: 0.5rem 1rem; border-radius: 7px; font: inherit; cursor: pointer;
  text-decoration: none;
}
button.secondary, .btn.secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); }
button.danger { background: var(--error); }
button.linklike { background: none; color: var(--muted); padding: 0; border: none; text-decoration: underline; cursor: pointer; }
form.inline { display: inline; }
/*
 * The confirmation sticks to the top of the viewport.
 *
 * Actions on a long page (deleting a source, publishing questions) return you
 * to the section you were working in, which is what you want — but the message
 * saying what happened lives at the top of the document, so you would land at
 * your section and never see it. Sticky keeps both: your place, and the answer.
 */
.flash {
  padding: 0.7rem 1rem; border-radius: 8px; margin-bottom: 1rem;
  position: sticky; top: 0.75rem; z-index: 20;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}
/* Anchored sections start below the sticky bar rather than under it. */
[id="bronnen"], [id="vragen"] { scroll-margin-top: 4.5rem; }
.flash.ok { background: #ecfdf5; color: var(--ok); border: 1px solid #a7f3d0; }
.flash.error { background: #fef2f2; color: var(--error); border: 1px solid #fecaca; }
.badge {
  display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.5rem;
  border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
}
.badge.published { background: #ecfdf5; color: var(--ok); border-color: #a7f3d0; }
.badge.proposed { background: #fffbeb; color: var(--warn); border-color: #fde68a; }
.badge.draft { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge.rejected, .badge.archived { background: #f8fafc; }
.badge.ai { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 260px; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
.actions .hint { align-self: center; }
/* Spelled-out consequence of a destructive action, shown while it is pending. */
.warn {
  background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12;
  padding: 0.6rem 0.8rem; border-radius: 8px; margin-top: 0.8rem;
}
/* Review buttons inside the intervention table: compact, and never wider than
   the question text they belong to. */
td.row-actions { white-space: nowrap; }
td.row-actions button { padding: 0.25rem 0.55rem; font-size: 0.82rem; margin-right: 0.3rem; }
.timeline {
  position: relative; height: 64px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; margin: 0.8rem 0;
}
.timeline .track { position: absolute; top: 30px; left: 12px; right: 12px; height: 4px; background: var(--border); border-radius: 2px; }
.timeline .marker {
  position: absolute; top: 18px; width: 26px; height: 26px; margin-left: -13px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.timeline .marker.proposed { background: var(--warn); }
.timeline .marker.draft { background: #1d4ed8; }
.timeline .tick { position: absolute; top: 46px; font-size: 0.7rem; color: var(--muted); transform: translateX(-50%); }
.login-box { max-width: 380px; margin: 8vh auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 1rem; }
.kpi .value { font-size: 1.6rem; font-weight: 700; }
.kpi .label { color: var(--muted); font-size: 0.8rem; }
details { margin: 0.4rem 0; }
summary { cursor: pointer; }
code, pre { background: #f1f5f9; border-radius: 6px; padding: 0.1rem 0.35rem; font-size: 0.88em; }
pre { padding: 0.8rem; overflow-x: auto; }
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- mobile --
 * Trainers check a course from a phone as readily as learners answer from
 * one. Two rules carry most of it: wide tables scroll inside their own card
 * instead of pushing the page sideways, and the top bar sheds what it can.
 */
@media (max-width: 640px) {
  .container { padding: 1rem 0.85rem 2.5rem; }
  .card { padding: 0.9rem 0.95rem; border-radius: 8px; }
  h1 { font-size: 1.25rem; }
  h2 { font-size: 1.05rem; }

  .topnav {
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
  /* The signed-in address is the first thing to go — it is not navigation. */
  .topnav .muted { display: none; }
  .topnav a { padding: 0.2rem 0.4rem; }

  /* A table with six columns cannot fit; let it scroll where it lives.
   * Rows stay one line high — a wrapped 90-character prompt in a narrow
   * column turns every row into a paragraph and the table into a wall. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table td, table th {
    white-space: nowrap;
    max-width: 62vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Stacked, full-width form fields — no 260px minimum on a 390px screen. */
  .row > * { min-width: 100%; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn, .actions button { width: 100%; text-align: center; }
  .actions form { display: contents; }

  /* Touch targets: 44px is the smallest comfortable tap area. */
  button, .btn { min-height: 44px; }
  input, select, textarea { min-height: 44px; font-size: 16px; } /* 16px stops iOS zooming on focus */
  textarea { min-height: 7rem; }

  .timeline { height: 76px; }
}

/* Count field sits inline with its generate button. */
.inline-count { display: flex; align-items: center; gap: 0.5rem; }
.inline-count label { margin: 0; white-space: nowrap; }
.inline-count input[type="number"] { width: 5rem; margin: 0; }
@media (max-width: 640px) {
  .inline-count { flex-wrap: wrap; }
  .inline-count input[type="number"] { width: 100%; }
}
/* Checkbox with its label on one line, for opt-in settings. */
.checkline { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.checkline input[type="checkbox"] { width: auto; margin: 0; }

/* Reference material that should not compete with the content it explains. */
.legend { margin: 0 0 1rem; }
.legend > summary { cursor: pointer; color: var(--muted, #64748b); font-size: .9rem; }
.legend table { margin-top: .5rem; }
.legend code { white-space: nowrap; }

/* Transcript review: timestamps readable at a glance, text easy to scan. */
table.meta td:first-child { color: var(--muted, #64748b); width: 12rem; }
table.transcript td.ts { white-space: nowrap; vertical-align: top; width: 11rem;
  font-variant-numeric: tabular-nums; font-size: .9rem; }
table.transcript td { padding: .35rem .6rem; }

/* An info marker next to a heading.
   Closed it is one character; open it floats above the content. It used to sit
   in a column header, where a details block inherits the column width and
   turned an explanation into a column of single words — and where it also kept
   the table from being put in its own scroll container (20 aug 2026). */
.legend.inline-info { display: inline-block; position: relative; margin: 0; }
.legend.inline-info > summary { display: inline; list-style: none; cursor: help;
  font-weight: normal; font-size: 0.95rem; color: var(--muted, #64748b); }
.legend.inline-info > summary::-webkit-details-marker { display: none; }
.legend.inline-info > *:not(summary) { }
.legend.inline-info[open] > strong,
.legend.inline-info[open] > p,
.legend.inline-info[open] > table { position: static; }
.legend.inline-info[open]::after { content: ""; }
.legend.inline-info[open] > strong { display: block; }
/* The popover itself: everything after the summary, lifted out of the cell. */
.legend.inline-info[open] > :not(summary) { position: relative; z-index: 30; }
.legend.inline-info[open] { z-index: 30; }
.legend.inline-info[open] > strong { margin-top: .25rem; }
.legend-pop { position: absolute; left: 0; top: 1.4rem; z-index: 30;
  width: min(46rem, 80vw); max-height: 60vh; overflow-y: auto;
  /* Staat naast een kop, dus de eigen tekstmaat vastzetten in plaats van
     die van de kop erven. */
  font-size: 0.92rem; line-height: 1.5;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,.12); padding: .9rem 1rem;
  font-weight: normal; white-space: normal; }
.legend-pop table td { padding: .3rem .5rem; vertical-align: top; }
.legend-pop table td:first-child { white-space: nowrap; width: 13rem; }

/* Job progress: present when something is happening, gone when it is not. */
.jobpanel { padding: .7rem .9rem; border-radius: 8px; margin-bottom: 1rem;
  background: #f1f5f9; border: 1px solid #e2e8f0; }
.jobpanel.running, .jobpanel.queued { background: #eff6ff; border-color: #bfdbfe; }
.jobpanel.failed { background: #fef2f2; border-color: #fecaca; }

/* Generation options: hidden until wanted, floating so the toolbar keeps its shape. */
.genopts { position: relative; display: inline-block; margin: 0 .4rem; }
.genopts > summary { cursor: pointer; color: var(--muted, #64748b); font-size: .9rem; list-style: none; }
.genopts > summary::-webkit-details-marker { display: none; }

/* Click-away, without a line of JavaScript.
   When the panel is open the summary also renders a transparent sheet over the
   whole viewport. A click anywhere lands on the summary, which toggles the
   panel shut — the same behaviour a menu has everywhere else, and it survives
   the strict Content-Security-Policy because there is no script to sign. */
.genopts[open] > summary::before,
.legend.inline-info[open] > summary::before {
  content: ""; position: fixed; inset: 0; z-index: 25; display: block;
}

.genopts-pop { position: absolute; left: 0; top: 1.6rem; z-index: 30; width: min(32rem, 85vw);
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,.12); padding: .9rem 1rem; text-align: left; }

/* One row per type: a small count box, then the name. Grid keeps the two
   columns aligned however long a type name is. */
.typegrid { display: grid; grid-template-columns: repeat(2, auto 1fr); gap: .3rem .5rem;
  align-items: center; margin-bottom: .8rem; }
.typegrid input[type="number"] { width: 3.4rem; margin: 0; padding: .2rem .3rem;
  font-size: .85rem; text-align: center; }
.typegrid label { font-size: .82rem; font-weight: normal; margin: 0; white-space: nowrap; }

/* "van [ ] tot [ ]" — each label is its own flex row, so the word cannot end up
   on top of the neighbouring field however narrow the panel gets. */
.rangerow { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.rangerow label { display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: normal; margin: 0; }
.rangerow input { width: 6rem; margin: 0; padding: .25rem .4rem; }

/* Concepts split by lifecycle: approved reads as settled, review reads as work. */
.ont-heading { font-size: .95rem; margin: 1rem 0 .3rem; }
.ont-list { list-style: none; padding: 0; }
.ont-list > li { padding: .45rem 0; border-bottom: 1px solid #f1f5f9; }
.ont-actions { margin-top: .3rem; }
.ont-actions button { font-size: .8rem; padding: .2rem .6rem; margin-right: .3rem; }

/* Transcription form: present but not competing with the source list. */
form.transcribe { border: 1px dashed #e2e8f0; border-radius: 8px; padding: .8rem 1rem; margin: .8rem 0; }
form.transcribe input[type="file"] { margin: .3rem 0; }

/* Popovers on a phone.
   Both panels are positioned relative to their trigger, which is fine on a
   desktop and wrong in a table cell on a 375px screen: the panel ends up wider
   than the viewport and half of it is unreachable. Below the tablet breakpoint
   they anchor to the screen instead of to the cell. */
@media (max-width: 640px) {
  .legend-pop,
  .genopts-pop {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    top: auto;
    width: auto;
    max-height: 70vh;
  }
}

/* Course list header: how many, and how they are ordered. Both answers belong
   above the table, where you look before you start scanning rows. */
.list-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem;
}
.sort-links { font-size: 0.85rem; color: var(--muted); }
.sort-links a { color: var(--accent); }
.sort-links strong { color: var(--text); font-weight: 600; }

/* Leerdoelen op de cursuspagina. Ontworpen om te scannen: nummer, korte naam
   als chip, de leerdoelzin, en rechts stille meta + acties als tekstlinks.
   Voorstellen krijgen een zachte gele was + één primaire knop (Goedkeuren),
   zodat het verschil tussen "van de AI, jij beslist" en "van jou" zichtbaar is
   zonder dat iemand een handleiding nodig heeft. */
.objlist { list-style: none; margin: 0 0 1rem; padding: 0; }
.objrow {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.55rem 0.25rem; border-bottom: 1px solid var(--border);
}
.objrow:last-child { border-bottom: 0; }
.objnum { color: var(--muted); font-size: 0.8rem; min-width: 1.2rem; text-align: right; }
.objmain { flex: 1 1 18rem; min-width: 0; }
.objchip {
  display: inline-block; font-size: 0.75rem; font-weight: 600;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.05rem 0.55rem; margin-right: 0.45rem; white-space: nowrap;
}
.objtitle { overflow-wrap: anywhere; }
.objdesc { display: block; font-size: 0.85rem; margin-top: 0.15rem; }
.objactions {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin-left: auto; white-space: nowrap;
}
.objactions .linklike { font-size: 0.85rem; }
.objmeta { color: var(--muted); font-size: 0.82rem; }
.objrow.muted .objtitle { color: var(--muted); }

.objinbox {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: 0.6rem 0.9rem; margin-bottom: 1rem;
}
.objinbox h3 { margin-top: 0; }
.objinbox .objrow { border-color: #fde68a; }
.objinbox button[type="submit"]:not(.linklike) { padding: 0.3rem 0.8rem; font-size: 0.85rem; }

/* Leerdoel bewerken: volwaardige velden onder elkaar. Een leerdoelzin van
   veertig woorden hoort in een ruime textarea, niet in een smal éénregelig
   vakje (klacht 20 aug 2026). */
.objrow.editing { display: block; background: var(--bg); border-radius: 8px; padding: 0.8rem 1rem; }
.objedit label { margin-top: 0.5rem; }
.objedit .objedit-label, .objadd .objadd-label { max-width: 18rem; }
.objedit textarea, .objadd textarea { min-height: 4.5rem; }

/* De leerdoel-koppelaar in de vragentabel: compact, geen formulierlook. */
.objlink { display: flex; gap: 0.3rem; align-items: center; }
.objlink select { font-size: 0.82rem; padding: 0.25rem 0.4rem; max-width: 13rem; }
.objlink button { padding: 0.25rem 0.55rem; font-size: 0.82rem; }

@media (max-width: 640px) {
  .objrow { flex-wrap: wrap; }
  .objactions { margin-left: 1.9rem; }
}

/* Vastgezette lesinstellingen: leesbaar als waarde, niet als invoerveld. */
.lockedfield { margin: 0.25rem 0 0.1rem; padding: 0.45rem 0; }
.lockedfield code { font-size: 0.95em; }

/* ---------------------------------------------------- vragentabellen --
 * Een vraag van driehonderd tekens maakt van elke rij een alinea, en van de
 * tabel een muur (Bekir, 20 aug: "te veel, moet compacter"). De tabel is er om
 * te scannen: type, de eerste zinnen van de vraag, leerdoel, status, actie.
 * De volledige tekst blijft één hover of één klik weg — nooit verborgen, wel
 * ingetoomd. Desktop first: deze maten gelden vanaf tablet en breder.
 */
/* De brede vragentabellen scrollen in hun eigen vlak in plaats van de hele
   pagina zijwaarts te duwen. Op een breed scherm merk je er niets van; op een
   smal laptopvenster scrolt de tabel en blijft de pagina staan. */
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablescroll table { min-width: 46rem; }

td.qcell { max-width: 38rem; min-width: 14rem; }
td.qcell a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
/* Twee woorden mogen afbreken; erop staan dat "Casus / toepassing" op één
   regel past kost meer breedte dan de kolom waard is. */
td.typecell { min-width: 6rem; }
/* Het tijdstip blijft op één regel; de bronpassage zit in de tooltip. */
td.atcell { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Leerdoel-kolom in de vragentabel: suggesties zijn klikbaar maar bescheiden. */
td.objcell { max-width: 10rem; font-size: 0.88rem; }
/* Eén regel met een staartje: de volle titel staat in de tooltip. */
td.objcell > span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------- toevoegen --
 * Formulieren die je niet elke keer nodig hebt (les, leerdoel, eigen vraag,
 * nieuwe koppeling) staan ingeklapt achter één duidelijke knop: de pagina
 * toont eerst het overzicht, het formulier pas als je erom vraagt
 * (Bekirs UX-eis, 20 aug 2026). */
.addbox { margin: 1rem 0 0.4rem; }
.addbox > summary {
  display: inline-block; list-style: none; cursor: pointer;
  background: var(--card); color: var(--accent); font-weight: 600;
  border: 1px dashed var(--accent); border-radius: 8px;
  padding: 0.45rem 0.9rem;
}
.addbox > summary::-webkit-details-marker { display: none; }
.addbox > summary:hover { background: var(--bg); }
.addbox[open] > summary { border-style: solid; border-radius: 8px 8px 0 0; margin-bottom: 0; }
.addbox[open] > *:not(summary) { margin-left: 0; }
.addbox[open] {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 0 1rem 0.8rem;
}
.addbox[open] > summary { border: none; padding-left: 0; background: transparent; }

/* ------------------------------------------------------ instellingen: tabs -- */
.subnav {
  display: flex; gap: 0.25rem; border-bottom: 2px solid var(--border);
  margin: 0.2rem 0 1.2rem;
}
.subnav a {
  padding: 0.45rem 0.9rem; text-decoration: none; color: var(--muted);
  font-weight: 600; border-radius: 8px 8px 0 0; margin-bottom: -2px;
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--text); background: var(--card); }
.subnav a.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--card); }

/* -------------------------------------------------- instellingen: koppeling -- */
.intcard-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
}
.intcard-title { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.intcard-title h3 { margin: 0; font-size: 1.1rem; }
.connline { display: flex; align-items: center; gap: 0.45rem; margin: 0.5rem 0 0.15rem; font-weight: 600; }
.intmeta { margin-top: 0.15rem; }
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border); display: inline-block; flex: none;
}
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px #ecfdf5; }

/* De live-schakelaar: een echte schakelaar om naar te kijken, een gewone
   submit-knop onder water — geen JavaScript, dus niets dat onder de strikte
   CSP kan sneuvelen. */
button.switch {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--card); color: var(--muted); font-weight: 700;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.3rem 0.9rem 0.3rem 0.35rem; cursor: pointer;
}
button.switch .knob {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--border); transition: background 0.15s;
  position: relative;
}
/* Aan = knop rechts, uit = knop links — zoals elke schakelaar die je kent. */
button.switch.on { color: var(--ok); border-color: #a7f3d0; background: #ecfdf5;
  flex-direction: row-reverse; padding: 0.3rem 0.35rem 0.3rem 0.9rem; }
button.switch.on .knob { background: var(--ok); }

/* Stappenplan bij een koppeling: genummerd, één handeling per stap. */
.steps { margin-top: 0.8rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.steps > summary {
  cursor: pointer; font-weight: 600; color: var(--accent); list-style: none;
}
.steps > summary::-webkit-details-marker { display: none; }
.steps > summary::before { content: "▸ "; }
.steps[open] > summary::before { content: "▾ "; }
.steplist { counter-reset: step; list-style: none; margin: 0.8rem 0 0; padding: 0; }
.steplist > li {
  counter-increment: step; position: relative;
  padding: 0 0 1rem 2.6rem; margin: 0;
}
.steplist > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.steplist > li:not(:last-child)::after {
  content: ""; position: absolute; left: 0.85rem; top: 2rem; bottom: 0.2rem;
  width: 2px; background: var(--border);
}
.steplist .btn { margin-top: 0.4rem; }
table.kv { width: auto; margin-top: 0.5rem; }
table.kv td:first-child { color: var(--muted); padding-right: 1rem; white-space: nowrap; }

/* Keuzekaarten: twee grote aanklikbare opties in plaats van een dropdown. */
.lead-question { font-weight: 600; margin: 0.6rem 0 0.4rem; }
.choice-cards { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
label.choice {
  flex: 1 1 16rem; display: flex; gap: 0.6rem; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 0.8rem 0.9rem; margin: 0; cursor: pointer; font-weight: 400;
}
label.choice:hover { border-color: var(--accent); }
label.choice:has(input:checked) { border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 1px var(--accent); }
label.choice input[type="radio"] { width: auto; margin-top: 0.2rem; }
.choice-body { display: block; }
.choice-body strong { display: block; margin-bottom: 0.15rem; }
.secretbox code { display: inline-block; margin: 0.3rem 0; word-break: break-all; }
.danger-link { color: var(--error); }

/* ------------------------------------------------------------- rapporten -- */
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.report-lead {
  background: var(--card); border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0; padding: 0.8rem 1.1rem; margin-bottom: 1.2rem;
}
.report-lead p { margin: 0.25rem 0; }
.report-section { margin-top: 1.4rem; }
.gain { display: inline-block; font-size: 0.78rem; font-weight: 700; border-radius: 999px; padding: 0.05rem 0.5rem; margin-right: 0.25rem; white-space: nowrap; }
.gain.up { background: #ecfdf5; color: var(--ok); }
.gain.flat { background: var(--bg); color: var(--muted); }
.gain.down { background: #fef2f2; color: var(--error); }
.learner-report h3 { margin-top: 0; }
.report-analysis { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.report-analysis li { margin: 0.2rem 0; }
.badge.nulmeting { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }

/* Afdrukken: het rapport is de PDF. Navigatie en knoppen doen niet mee. */
@media print {
  .topnav, .no-print, .flash { display: none !important; }
  body { background: #fff; }
  .card, .report-lead { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
  .container { max-width: none; padding: 0; }
}

/* Activatiestand per site × les: drie standen, de actieve krijgt kleur.
 * Gewone submit-knoppen onder water — geen JavaScript, geen CSP-zorgen. */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; white-space: nowrap; }
.seg form { display: contents; }
.segbtn {
  background: var(--card); color: var(--muted); border: none; border-radius: 0;
  padding: 0.3rem 0.85rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.seg form + form .segbtn { border-left: 1px solid var(--border); }
.segbtn:hover { background: var(--bg); }
.segbtn.active { cursor: default; }
.segbtn.active.live { background: #ecfdf5; color: var(--ok); }
.segbtn.active.test { background: #fffbeb; color: var(--warn); }
.segbtn.active.niet_live { background: var(--bg); color: var(--text); }

/* Mobiel: de tabel scrolt al zijwaarts, dus de kolommen krijgen daar de maat
   van het scherm in plaats van de ruimere desktopmaat hierboven. */
@media (max-width: 640px) {
  td.qcell { max-width: 62vw; min-width: 0; }
  td.objcell { max-width: 40vw; }
}
/* Status en herkomst in één kolom: "voorgesteld · AI" leest als één feit over
   de vraag, en scheelt een kolom in een tabel die het al krap had. */
td.statuscell { white-space: nowrap; }

/* Team: rolkeuze als verticale lijst — drie rollen met een regel uitleg lezen
   beter onder elkaar dan als brede kaarten naast elkaar. */
.choice-cards.choice-stack { flex-direction: column; }
.choice-cards.choice-stack label.choice { flex: none; }
[id="team"] { scroll-margin-top: 4.5rem; }

/* --------------------------------------------- "Waar zien cursisten deze les?"
   De samenvatting beantwoordt de titelvraag meteen; de betekenisregel onder de
   knoppen zegt wat een stand in de praktijk doet, zodat het gevolg zichtbaar is
   vóór je klikt in plaats van pas in de bevestiging na het opslaan. */
.wherestate {
  margin: 0 0 1rem; padding: 0.6rem 0.8rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); font-size: 0.95rem;
}
.wherestate.live { background: #ecfdf5; color: var(--ok); border-color: #a7f3d0; font-weight: 600; }
.wherestate.test { background: #fffbeb; color: var(--warn); border-color: #fde68a; }
.wherestate.none { color: var(--muted); }
.wheretable td { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.wheretable th:last-child { width: 55%; }
.meaning { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.85rem; max-width: 34rem; }
.meaning code { white-space: normal; overflow-wrap: anywhere; }
/* Een gepauzeerde site blijft bedienbaar — je stelt hem alvast in — maar mag
   niet lezen alsof hij meedoet. */
.wheretable tr.siteoff td { opacity: 0.65; }