/* Hallmark · genre: editorial · macrostructure: Index-First · theme: Almanac (werkboek) · enrichment: none · nav: N6 masthead · footer: Ft2 inline
 * tone: utilitarian-editorial · anchor hue: 85 paper / 28 accent (correctiepen)
 * pre-emit critique: P4 H4 E4 S5 R5 V4
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-color: var(--color-rule-strong); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--color-accent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--color-highlight); color: var(--color-ink); }

/* ---------- Masthead (N6) ---------- */
.masthead {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--masthead-h);
  display: flex; align-items: center; gap: var(--space-md);
  padding: 0 var(--space-md);
  background: var(--color-paper);
  border-bottom: var(--rule-mast) double var(--color-rule-strong);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  font-variation-settings: "opsz" 72;
}
.wordmark:hover { color: var(--color-accent); }
.mast-nav { display: flex; gap: var(--space-md); }
.mast-nav a {
  font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--color-muted); padding: var(--space-3xs) 0; border-bottom: 2px solid transparent;
}
.mast-nav a:hover { color: var(--color-ink); }
.mast-nav a.active { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.search-wrap { position: relative; margin-left: auto; flex: 0 1 260px; min-width: 0; }
#search {
  width: 100%; padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  background: var(--color-paper-2); color: var(--color-ink);
  font: inherit; font-size: var(--text-sm);
}
#search::placeholder { color: var(--color-muted); }
#search:focus-visible { outline-offset: 0; }
.search-results {
  position: absolute; right: 0; top: calc(100% + var(--space-2xs)); width: min(420px, 92vw);
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-md); max-height: 60vh; overflow: auto;
}
.search-results a { display: block; padding: var(--space-xs) var(--space-sm); text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule); }
.search-results a:last-child { border-bottom: 0; }
.search-results a:hover, .search-results a.sel { background: var(--color-paper-2); }
.search-results b { font-weight: 600; }
.search-results small { display: block; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.45; }
.search-results mark { background: var(--color-highlight); color: inherit; }
.text-btn {
  border: 0; background: none; padding: var(--space-2xs) 0; cursor: pointer;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); white-space: nowrap;
}
.text-btn:hover { color: var(--color-ink); }

/* ---------- Layout ---------- */
.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - var(--masthead-h)); }
.sidebar {
  position: sticky; top: var(--masthead-h); height: calc(100vh - var(--masthead-h));
  overflow: auto; border-right: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-md) var(--space-sm) var(--space-xl);
  background: var(--color-paper);
}
.sidebar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: var(--color-muted); padding-bottom: var(--space-xs); margin-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.tree-folder { margin: var(--space-xs) 0 var(--space-2xs); }
.tree-folder > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  padding: var(--space-3xs) 0;
}
.tree-folder > summary::-webkit-details-marker { display: none; }
.tree-folder > summary::after { content: " +"; color: var(--color-muted); font-family: var(--font-body); font-weight: 400; }
.tree-folder[open] > summary::after { content: " −"; }
.tree-file {
  display: block; padding: 3px 0 3px var(--space-xs); font-size: var(--text-sm); text-decoration: none;
  color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: var(--rule-hair) solid var(--color-rule);
}
.tree-file:hover { color: var(--color-ink); }
.tree-file.active { color: var(--color-ink); font-weight: 600; border-left: 2px solid var(--color-accent); padding-left: calc(var(--space-xs) - 1px); }
.tree-file.root { border-left: 0; padding-left: 0; }
.scrim { display: none; }

.content { min-width: 0; display: flex; flex-direction: column; }
main { padding: var(--space-xl) var(--space-xl) var(--space-2xl); max-width: 920px; width: 100%; outline: none; flex: 1; }
.colophon {
  margin: 0 var(--space-xl) var(--space-lg); padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule); max-width: calc(920px - 2 * var(--space-xl));
  font-size: var(--text-sm); color: var(--color-muted);
}

/* ---------- Tekst (Markdown) ---------- */
.md { max-width: 72ch; }
.md h1, .page-title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-display);
  line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 var(--space-md);
  overflow-wrap: anywhere; min-width: 0; font-variation-settings: "opsz" 144;
}
.md h2 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.2;
  letter-spacing: -0.015em; margin: var(--space-xl) 0 var(--space-xs);
  padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule);
  scroll-margin-top: calc(var(--masthead-h) + var(--space-sm));
}
.md h3 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
  margin: var(--space-lg) 0 var(--space-2xs); scroll-margin-top: calc(var(--masthead-h) + var(--space-sm));
}
.md p, .md ul, .md ol { margin: var(--space-xs) 0; }
.md li { margin: var(--space-3xs) 0; }
.md hr { border: 0; border-top: var(--rule-mast) double var(--color-rule); margin: var(--space-xl) 0; }
.md strong { font-weight: 600; }
.md a { text-decoration-line: underline; }
.md code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--color-paper-2); padding: 0.05em 0.3em; border-radius: var(--radius-sm);
}
.md pre {
  position: relative; background: var(--color-code-bg);
  border-top: var(--rule-hair) solid var(--color-rule-strong); border-bottom: var(--rule-hair) solid var(--color-rule-strong);
  padding: var(--space-sm) var(--space-sm); overflow-x: auto; margin: var(--space-sm) 0;
}
.md pre code { background: none; padding: 0; font-size: var(--text-sm); line-height: 1.6; }
.copy-btn {
  position: absolute; top: var(--space-2xs); right: var(--space-2xs);
  border: 0; background: var(--color-code-bg); cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted);
  padding: 2px var(--space-2xs); text-decoration: underline; text-underline-offset: 0.2em;
}
.copy-btn:hover { color: var(--color-ink); }

/* Syntax (highlight.js-klassen, op eigen tokens) */
.hljs-keyword, .hljs-built_in, .hljs-type, .hljs-literal { color: var(--color-code-kw); font-weight: 700; }
.hljs-string { color: var(--color-code-str); }
.hljs-number { color: var(--color-code-num); }
.hljs-comment { color: var(--color-code-com); font-style: italic; }
.hljs-operator, .hljs-punctuation { color: var(--color-ink); }

.table-wrap { overflow-x: auto; margin: var(--space-sm) 0; }
.md table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.md thead th {
  text-align: left; font-weight: 600; padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0;
  border-bottom: var(--rule-hair) solid var(--color-ink); white-space: nowrap;
}
.md td { padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.md img { max-width: 100%; height: auto; border: var(--rule-hair) solid var(--color-rule); }
.md .mermaid { border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm) 0; overflow-x: auto; }
.wikilink { text-decoration-color: var(--color-accent); }
.wikilink.missing { color: var(--color-muted); text-decoration: line-through; }

/* Callouts — kader + kopje in kleine kapitalen, geen iconen */
.callout {
  border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-sm);
  margin: var(--space-sm) 0; padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper);
}
.callout-label {
  display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-muted);
}
.callout > :nth-child(2) { margin-top: var(--space-2xs); }
.callout > :last-child { margin-bottom: 0; }
.callout-warning, .callout-important { border-color: var(--color-accent); }
.callout-warning .callout-label, .callout-important .callout-label { color: var(--color-accent); }
.callout-info { background: var(--color-paper-2); border-color: var(--color-paper-3); }
details.callout > summary { list-style: none; cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
details.callout > summary::-webkit-details-marker { display: none; }
details.callout > summary::after { content: "tonen +"; font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
details.callout[open] > summary::after { content: "verbergen −"; }
details.callout > summary .callout-label { color: var(--color-ink); }
details.callout-tip { border-style: dashed; }
details.callout-tip[open] { border-style: solid; background: var(--color-paper-2); }
details.callout-tip pre { background: var(--color-paper); }

/* ---------- Pagina-onderdelen ---------- */
.crumbs { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-sm); overflow-wrap: anywhere; }
.crumbs a { color: inherit; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); align-items: center; margin: 0 0 var(--space-lg); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-sm);
  border: var(--rule-hair) solid var(--color-ink); background: var(--color-ink); color: var(--color-paper);
  font-weight: 600; font-size: var(--text-sm); line-height: 1.3; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn.ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-strong); }
.btn.ghost:hover { border-color: var(--color-ink); background: var(--color-paper-2); color: var(--color-ink); }
.link {
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--color-rule-strong); text-underline-offset: 0.2em;
}
.link:hover { text-decoration-color: var(--color-accent); }
.link:active { color: var(--color-accent); }

/* ---------- Index (overzicht) ---------- */
.intro { max-width: 60ch; margin-bottom: var(--space-xl); }
.intro .lede { font-size: var(--text-md); line-height: 1.5; margin: 0 0 var(--space-sm); }
.intro .tally { margin: 0; color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.intro .tally b { color: var(--color-ink); }
.index-head {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
  margin: var(--space-xl) 0 0; padding-bottom: var(--space-2xs); border-bottom: var(--rule-mast) double var(--color-rule-strong);
}
.index { list-style: none; margin: 0; padding: 0; }
.index-row {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: var(--space-3xs) var(--space-sm);
  align-items: baseline; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule);
}
.index-num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.index-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.25; text-decoration: none; }
.index-title:hover { color: var(--color-accent); }
.index-topics { display: block; font-size: var(--text-sm); color: var(--color-muted); margin-top: 2px; }
.index-meta { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.index-meta b { color: var(--color-ink); font-weight: 600; }
.index-meta .done { color: var(--color-good); }
.index-links { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-md); margin-top: var(--space-2xs); }
.bar { grid-column: 2 / -1; height: 2px; background: var(--color-rule); margin-top: var(--space-2xs); }
.bar > i { display: block; height: 100%; background: var(--color-good); }

/* ---------- Opdracht afvinken ---------- */
.done-toggle { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); cursor: pointer; user-select: none; }
.done-toggle input { width: 1rem; height: 1rem; accent-color: var(--color-good); margin: 0; }
.md h2.is-done::after { content: "gedaan"; margin-left: var(--space-xs); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-good); vertical-align: middle; }
.pager { display: flex; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-xl); padding-top: var(--space-sm); border-top: var(--rule-mast) double var(--color-rule); flex-wrap: wrap; }
.pager a { font-family: var(--font-display); font-weight: 700; text-decoration: none; max-width: 100%; }
.pager a small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.pager a:hover { color: var(--color-accent); }
.pager .next { text-align: right; margin-left: auto; }

/* ---------- Quiz ---------- */
.sheet { max-width: 680px; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-sm); font-variant-numeric: tabular-nums; }
.ticks { display: flex; gap: 3px; flex-wrap: wrap; }
.ticks i { width: 14px; height: 4px; background: var(--color-rule); }
.ticks i.cur { background: var(--color-ink); }
.ticks i.good { background: var(--color-good); }
.ticks i.bad { background: var(--color-accent); }
.quiz-q { font-size: var(--text-md); font-weight: 600; line-height: 1.45; margin: 0 0 var(--space-md); max-width: none; }
.quiz-q p { margin: 0 0 var(--space-xs); }
.quiz-q pre { font-weight: 400; }
.options { display: grid; gap: var(--space-2xs); }
.option {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-xs); align-items: baseline; text-align: left;
  padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-sm);
  background: var(--color-paper); cursor: pointer; font-size: var(--text-base); line-height: 1.45;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.option:hover:not(:disabled) { border-color: var(--color-ink); background: var(--color-paper-2); }
.option:active:not(:disabled) { transform: translateY(1px); }
.option .letter { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1; color: var(--color-muted); }
.option code { font-family: var(--font-mono); font-size: 0.86em; background: var(--color-paper-2); padding: 0 0.3em; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.option:disabled { cursor: default; }
.option.correct { border-color: var(--color-good); background: var(--color-good-wash); }
.option.correct .letter { color: var(--color-good); }
.option.wrong { border-color: var(--color-accent); background: var(--color-accent-wash); }
.option.wrong .letter { color: var(--color-accent); }
.option.correct::after, .option.wrong::after { grid-column: 2; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.option.correct::after { content: "goed antwoord"; color: var(--color-good); }
.option.wrong::after { content: "jouw keuze"; color: var(--color-accent); }
.verdict { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.verdict-head { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); margin: 0 0 var(--space-3xs); }
.verdict.good .verdict-head { color: var(--color-good); }
.verdict.bad .verdict-head { color: var(--color-accent); }
.verdict .md p { margin: var(--space-2xs) 0; }
.sheet-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); flex-wrap: wrap; }
.switch { display: inline-flex; gap: var(--space-2xs); align-items: center; font-size: var(--text-sm); color: var(--color-muted); cursor: pointer; }
.switch input { accent-color: var(--color-ink); margin: 0; }
.hint { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-md); }
.kbd { font-family: var(--font-mono); font-size: var(--text-xs); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-sm); padding: 0 4px; }
.score { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: var(--space-2xs) 0 var(--space-sm); }
.score small { font-size: 0.45em; color: var(--color-muted); letter-spacing: 0; }
.review { margin-top: var(--space-xl); }
.review h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); margin: 0; padding-bottom: var(--space-2xs); border-bottom: var(--rule-mast) double var(--color-rule-strong); }
.review-item { border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm) 0; font-size: var(--text-base); }
.review-item .answer { font-size: var(--text-sm); margin: var(--space-2xs) 0; }
.review-item .answer b { color: var(--color-good); font-weight: 600; }

/* ---------- Dit of dat (swipen) ---------- */
.swipe { max-width: 520px; margin: 0 auto; }
.swipe-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.swipe-head select:first-child { flex: 1 1 12rem; }
.swipe-head select {
  font: inherit; font-size: var(--text-sm); padding: var(--space-3xs) var(--space-xs); max-width: 100%;
  border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink);
}
.tally-line { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tally-line b { font-weight: 600; }
.tally-line .g { color: var(--color-good); }
.tally-line .b { color: var(--color-accent); }
.deck { position: relative; height: min(56vh, 460px); margin: var(--space-2xs) 0 var(--space-sm); }
.card {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  user-select: none; touch-action: pan-y; will-change: transform; overflow: hidden; cursor: grab;
}
.card:active { cursor: grabbing; }
.card.behind { transform: translateY(8px) scale(0.97); background: var(--color-paper-2); pointer-events: none; }
.card.behind > * { visibility: hidden; }
/* systeemkaart: één rode lijn onder de kop */
.card-tag {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted);
  padding-bottom: var(--space-2xs); border-bottom: 2px solid var(--color-accent); margin-bottom: var(--space-sm);
}
.card-q { font-weight: 600; font-size: var(--text-md); line-height: 1.4; overflow: auto; flex: 1 1 auto; min-height: 0; }
.card-q p { margin: 0 0 var(--space-2xs); }
.card-q pre { font-weight: 400; font-size: var(--text-xs); padding: var(--space-2xs); margin: var(--space-2xs) 0; background: var(--color-code-bg); overflow-x: auto; }
.card-q code { font-family: var(--font-mono); font-size: 0.86em; }
.card-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); flex: none; margin-top: var(--space-sm); }
.card-opt {
  border-top: var(--rule-hair) solid var(--color-rule-strong); padding-top: var(--space-2xs);
  font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; min-height: 4.5rem;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.card-opt .dir { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-3xs); }
.card-opt.right { text-align: right; }
.card-opt code { font-family: var(--font-mono); font-size: 0.88em; background: var(--color-paper-2); padding: 0 0.25em; }
.card.lean-left .card-opt.left, .card.lean-right .card-opt.right { border-top: 2px solid var(--color-ink); }
.card.lean-left .card-opt.left .dir, .card.lean-right .card-opt.right .dir { color: var(--color-ink); font-weight: 700; }
.card.res-good { border-color: var(--color-good); }
.card.res-bad { border-color: var(--color-accent); }
.card.flying { transition: transform var(--dur-med) var(--ease-in), opacity var(--dur-med) var(--ease-in); }
.card.settle { transition: transform var(--dur-med) var(--ease-out); }
.card-tag { display: flex; justify-content: space-between; gap: var(--space-xs); flex-wrap: wrap; }
.card-status { color: var(--color-ink); }
.learn-meter { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-xs); }
.learn-meter .bar { height: 3px; margin: 0; }
.why-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin: var(--space-sm) 0 var(--space-3xs); }
.why-label code { text-transform: none; letter-spacing: 0; }
.verdict .why-label:first-of-type { margin-top: var(--space-2xs); }
.swipe-done-btns { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-sm); }
.how { margin-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); font-size: var(--text-sm); }
.how summary { cursor: pointer; font-weight: 600; }
.how summary:hover { color: var(--color-accent); }
.how ul { padding-left: var(--space-md); color: var(--color-muted); }
.how b { color: var(--color-ink); }
.swipe-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); }
.swipe-btns .btn { padding: var(--space-xs); }
.swipe-note { margin-top: var(--space-md); min-height: 4rem; }
.swipe-done { justify-content: center; text-align: left; cursor: default; }
.swipe-done h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); margin: 0 0 var(--space-2xs); }

.empty { color: var(--color-muted); padding: var(--space-xl) 0; }

/* ---------- Mobiel ---------- */
.only-mobile { display: none !important; }
.tabbar { display: none; }
@media (max-width: 860px) {
  .only-desktop { display: none !important; }
  .only-mobile { display: inline-flex !important; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; width: min(300px, 86vw); z-index: var(--z-drawer);
    transform: translateX(-100%); transition: transform var(--dur-med) var(--ease-out);
    border-right: var(--rule-hair) solid var(--color-rule-strong);
  }
  .sidebar.open { transform: translateX(0); }
  .scrim { display: block; position: fixed; inset: 0; background: var(--color-scrim); z-index: var(--z-overlay); }
  .scrim[hidden] { display: none; }
  .masthead { padding: 0 var(--space-sm); gap: var(--space-sm); }
  .masthead .text-btn#themeBtn { margin-left: auto; }
  .sidebar .search-wrap { margin: 0 0 var(--space-sm); }
  .sidebar .search-results { position: static; width: 100%; margin-top: var(--space-2xs); max-height: none; }
  main { padding: var(--space-md) var(--space-sm) calc(var(--space-2xl) + 56px); }
  .colophon { display: none; }
  .md h2 { font-size: var(--text-md); }
  .index-row { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .index-meta { grid-column: 2; text-align: left; }
  .index-num { font-size: var(--text-md); }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky);
    background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule-strong);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    text-align: center; padding: var(--space-xs) 0; font-size: var(--text-sm); font-weight: 600; text-decoration: none;
    color: var(--color-muted); white-space: nowrap; border-top: 2px solid transparent; margin-top: -1px;
  }
  .tabbar a.active { color: var(--color-ink); border-top-color: var(--color-accent); }
  .card { padding: var(--space-sm); }
  .deck { height: min(46vh, 400px); }
  .swipe .page-title { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
}
@media (max-width: 360px) {
  .wordmark { font-size: var(--text-base); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .card.flying { transition: opacity 120ms linear !important; }
}

/* Gekozen / goede antwoord in de uitleg */
.choice { margin: 0 0 var(--space-2xs); padding-left: var(--space-xs); border-left: var(--rule-hair) solid var(--color-rule-strong); font-weight: 600; }
.choice.good { border-left-color: var(--color-good); }
.choice.bad { border-left-color: var(--color-accent); }
.choice code { font-family: var(--font-mono); font-size: 0.88em; background: var(--color-paper-2); padding: 0 0.25em; }

/* Code in de swipe-kaart: laten afbreken zodat hij altijd past; tik = vergroten */
.card-q pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; cursor: zoom-in; }
.card-q pre code { white-space: inherit; }
.md img.zoomable { cursor: zoom-in; }

/* Vergroting (native dialog) */
.zoom {
  padding: 0; border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-md);
  background: var(--color-paper); color: var(--color-ink);
  width: min(96vw, 1000px); max-width: 96vw; max-height: 90dvh;
}
.zoom::backdrop { background: var(--color-scrim); }
.zoom-inner { padding: var(--space-sm); max-height: 90dvh; overflow: auto; }
.zoom-bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm);
  position: sticky; top: calc(-1 * var(--space-sm)); background: var(--color-paper);
  padding: var(--space-2xs) 0; margin-bottom: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted);
}
.zoom-bar .btn { text-transform: none; letter-spacing: 0; }
.zoom-body { max-width: none; }
.zoom-body pre { margin: 0; font-size: var(--text-base); white-space: pre; overflow-x: auto; cursor: auto; }
.zoom-body pre code { font-size: inherit; white-space: pre; }
.zoom-body img { display: block; width: 100%; height: auto; border: 0; cursor: auto; }
@media (max-width: 860px) {
  .zoom-body pre { font-size: var(--text-sm); }
}

/* Beantwoorde kaart blijft liggen tot je verder gaat */
.btn[hidden] { display: none; }
.swipe-btns #swNext { grid-column: 1 / -1; }
.card.answered { cursor: default; }
.card.answered .card-opt { opacity: 0.55; }
.card.answered .card-opt.is-good, .card.answered .card-opt.is-bad { opacity: 1; }
.card-opt.is-good { border-top: 2px solid var(--color-good); }
.card-opt.is-good .dir { color: var(--color-good); font-weight: 700; }
.card-opt.is-good .dir::after { content: " · goed"; }
.card-opt.is-bad { border-top: 2px solid var(--color-accent); }
.card-opt.is-bad .dir { color: var(--color-accent); font-weight: 700; }
.card-opt.is-bad .dir::after { content: " · jouw keuze"; }
.card-opt.right.is-good .dir::after, .card-opt.right.is-bad .dir::after { content: none; }
.card-opt.right.is-good .dir::before { content: "goed · "; }
.card-opt.right.is-bad .dir::before { content: "jouw keuze · "; }
.card-status.is-good { color: var(--color-good); }
.card-status.is-bad { color: var(--color-accent); }
#swNext2 { margin-top: var(--space-md); width: 100%; }

/* ---------- Rondleiding ---------- */
.tour { position: fixed; inset: 0; z-index: var(--z-tour); }
.tour-hole {
  position: fixed; border-radius: var(--radius-md); pointer-events: none;
  outline: 2px solid var(--color-accent); outline-offset: 0;
  box-shadow: 0 0 0 200vmax var(--color-scrim);
  transition: top var(--dur-med) var(--ease-out), left var(--dur-med) var(--ease-out), width var(--dur-med) var(--ease-out), height var(--dur-med) var(--ease-out);
}
.tour.no-target .tour-hole { inset: 50% auto auto 50%; width: 0; height: 0; outline: 0; }
.tour-pop {
  position: fixed; width: min(340px, calc(100vw - 2 * var(--space-sm)));
  background: var(--color-paper); color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md) var(--space-sm);
  animation: tour-in var(--dur-med) var(--ease-out);
}
.tour.no-target .tour-pop { top: 50%; left: 50%; transform: translate(-50%, -50%); animation: none; }
.tour-count { margin: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; color: var(--color-muted); font-variant-numeric: tabular-nums; padding-bottom: var(--space-2xs); border-bottom: 2px solid var(--color-accent); }
.tour-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.25; margin: var(--space-xs) 0 var(--space-2xs); }
.tour-text { margin: 0 0 var(--space-sm); font-size: var(--text-sm); line-height: 1.55; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.tour-actions .link { color: var(--color-muted); }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .tour:not(.no-target) .tour-pop { left: var(--space-sm) !important; right: var(--space-sm); top: auto !important; bottom: calc(64px + env(safe-area-inset-bottom)); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-pop { animation: none; }
}