/* EEML · Effortless Effect Meta-Law · vormgeving v0.27 */

:root {
  --bg: #f6f5f1;
  --bg-2: #eeece5;
  --surface: #ffffff;
  --ink: #16202d;
  --ink-2: #2e3c4e;
  --muted: #5f6c7c;
  --line: #e2ded4;
  --line-2: #d2ccbf;
  --accent: #cc5712;
  --accent-ink: #a9440a;
  --accent-soft: #fbe9dc;
  --link: #1c5aa3;
  --link-hover: #cc5712;
  --code-bg: #f0ede5;
  --hero-a: rgba(204, 87, 18, 0.10);
  --hero-b: rgba(28, 90, 163, 0.08);
  --shadow: 0 1px 2px rgba(22, 32, 45, 0.05), 0 10px 28px rgba(22, 32, 45, 0.07);
  --shadow-lift: 0 2px 4px rgba(22, 32, 45, 0.06), 0 18px 40px rgba(22, 32, 45, 0.12);
  --radius: 14px;
  --radius-sm: 9px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --header-h: 62px;
  --sidebar-w: 292px;
  --content-w: 760px;
  color-scheme: light;

  --p1-bg: #e7eefa; --p1-fg: #1f4f99;
  --p2-bg: #efe8fb; --p2-fg: #5b3aa6;
  --p3-bg: #fbe7da; --p3-fg: #a4430b;
  --p4-bg: #e1f3ef; --p4-fg: #166a5c;
  --p5-bg: #e4f4e7; --p5-fg: #1e6b36;
  --p6-bg: #eaedf3; --p6-fg: #3a475c;
  --p7-bg: #f4eedd; --p7-fg: #7a5a10;
  --p8-bg: #fbe8ec; --p8-fg: #9c2b41;
}

:root[data-theme="dark"] {
  --bg: #0a111c;
  --bg-2: #0e1827;
  --surface: #111c2d;
  --ink: #e6edf7;
  --ink-2: #c4d0df;
  --muted: #8fa2b8;
  --line: #1c2a3f;
  --line-2: #273851;
  --accent: #ff7d33;
  --accent-ink: #ff9d61;
  --accent-soft: #2b1b10;
  --link: #82b9ff;
  --link-hover: #ffa068;
  --code-bg: #0f1a2b;
  --hero-a: rgba(255, 125, 51, 0.14);
  --hero-b: rgba(130, 185, 255, 0.10);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 44px rgba(0, 0, 0, 0.45);
  color-scheme: dark;

  --p1-bg: #16263f; --p1-fg: #9cc2ff;
  --p2-bg: #241b3d; --p2-fg: #c7b1ff;
  --p3-bg: #2e1c10; --p3-fg: #ffac78;
  --p4-bg: #10302b; --p4-fg: #7fdcc9;
  --p5-bg: #13301b; --p5-fg: #8fdca4;
  --p6-bg: #1b2433; --p6-fg: #b5c3d8;
  --p7-bg: #2d2610; --p7-fg: #e6c46d;
  --p8-bg: #34151d; --p8-fg: #ff9fb2;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 18px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.72;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--link) 45%, transparent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); color: var(--ink); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 12px; }

/* ── Kop ─────────────────────────────────────────────── */
.kop {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 clamp(14px, 3vw, 28px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.merk { display: flex; align-items: baseline; gap: 10px; color: var(--ink); white-space: nowrap; }
.merk:hover { text-decoration: none; color: var(--ink); }
.merk b { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; }
.merk b span { color: var(--accent); }
.merk small { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.kop .ruimte { flex: 1; }
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-width: 36px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--ink-2);
  font: 500 0.86rem var(--font-sans); cursor: pointer;
}
.knop:hover { background: var(--bg-2); color: var(--accent-ink); text-decoration: none; }
.knop svg { width: 18px; height: 18px; }
.menuknop { display: none; }
.taal { display: inline-flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--surface); }
.taal a, .taal span { padding: 0 10px; height: 34px; display: inline-flex; align-items: center; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); }
.taal span { background: var(--ink); color: var(--bg); }
.taal a:hover { color: var(--accent-ink); text-decoration: none; }

/* zoeken */
.zoek { position: relative; width: min(360px, 34vw); }
.zoek input {
  width: 100%; height: 38px; padding: 0 12px 0 36px;
  border: 1px solid var(--line-2); border-radius: 11px;
  background: var(--surface); color: var(--ink);
  font: 400 0.92rem var(--font-sans);
}
.zoek input::placeholder { color: var(--muted); }
.zoek input:focus { outline: none; border-color: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 16%, transparent); }
.zoek > svg { position: absolute; left: 11px; top: 10px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.zoek kbd { position: absolute; right: 9px; top: 9px; font: 500 0.72rem var(--font-mono); color: var(--muted); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 5px; background: var(--bg); }
.zoek.actief kbd { display: none; }
.zoekres {
  position: absolute; top: 46px; right: 0; width: min(560px, 92vw);
  max-height: min(70vh, 620px); overflow: auto;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: var(--shadow-lift); padding: 6px; display: none;
}
.zoek.open .zoekres { display: block; }
.zoekres a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink-2); }
.zoekres a:hover, .zoekres a.sel { background: var(--bg-2); text-decoration: none; }
.zoekres .zt { font-weight: 600; color: var(--ink); font-size: 0.93rem; }
.zoekres .zd { font-size: 0.74rem; color: var(--accent-ink); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 2px; }
.zoekres .zs { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.zoekres mark { background: var(--accent-soft); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.zoekres .leeg { padding: 14px; color: var(--muted); font-size: 0.9rem; }

.voortgang { position: fixed; top: var(--header-h); left: 0; height: 2px; width: 0; background: var(--accent); z-index: 41; transition: width 0.1s linear; }

/* ── Indeling ────────────────────────────────────────── */
.raam { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); max-width: 1320px; margin: 0 auto; }
.zij {
  position: sticky; top: var(--header-h); align-self: start;
  height: calc(100vh - var(--header-h)); overflow-y: auto;
  padding: 26px 18px 40px 22px;
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
}
.hoofd { min-width: 0; padding: 38px clamp(18px, 5vw, 64px) 80px; }
.tekst { max-width: var(--content-w); margin: 0 auto; }

/* zijbalk */
.zij h2 { font: 600 0.72rem var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px 8px; }
.zij ol, .zij ul { list-style: none; margin: 0; padding: 0; }
.delen > li > a {
  display: grid; grid-template-columns: 34px 1fr; align-items: baseline;
  padding: 6px 8px; border-radius: 9px; color: var(--ink-2); font-size: 0.9rem; line-height: 1.35;
}
.delen > li > a:hover { background: var(--bg-2); text-decoration: none; color: var(--ink); }
.delen .rn { font: 600 0.8rem var(--font-serif); font-size: 1rem; color: var(--accent); }
.delen > li.nu > a { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.opp { margin: 6px 0 12px 16px; padding-left: 14px; }
.opp a { display: block; padding: 4px 8px; font-size: 0.82rem; line-height: 1.4; color: var(--muted); border-radius: 7px; position: relative; }
.opp a:hover { color: var(--ink); background: var(--bg-2); text-decoration: none; }
.opp a.actief { color: var(--accent-ink); font-weight: 600; }
.opp > ul { display: block; }
.opp ul ul { display: none; margin: 2px 0 4px 10px; }
.opp li.open > ul { display: block; }
.opp ul ul a { font-size: 0.78rem; padding: 3px 8px; }
.zij .extra { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.zij .extra a { display: block; padding: 5px 8px; font-size: 0.86rem; color: var(--muted); border-radius: 8px; }
.zij .extra a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }

/* ── Paginakop ───────────────────────────────────────── */
.deelkop, .bladeren { max-width: var(--content-w); margin-left: auto; margin-right: auto; }
.deelkop { margin-top: 4px; margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.deelkop .boven { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.deelkop .rnum {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px;
  border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink);
  font: 700 1.35rem var(--font-serif); letter-spacing: 0.02em;
}
.deelkop h1 { font: 600 clamp(2.1rem, 4.2vw, 3rem)/1.08 var(--font-serif); color: var(--ink); margin: 14px 0 12px; letter-spacing: -0.005em; }
.deelkop p { margin: 0; color: var(--muted); font-size: 1.02rem; }
.deelkop .meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.82rem; color: var(--muted); }

/* ── Lopende tekst ───────────────────────────────────── */
.tekst h2 {
  font: 600 1.95rem/1.15 var(--font-serif); color: var(--ink);
  margin: 2.6em 0 0.6em; padding-top: 0.9em; border-top: 1px solid var(--line);
}
.tekst h3 { font: 650 1.16rem/1.35 var(--font-sans); color: var(--ink); margin: 2.1em 0 0.6em; letter-spacing: -0.005em; }
.tekst h4 { font: 650 0.84rem/1.4 var(--font-sans); color: var(--ink-2); margin: 1.9em 0 0.5em; letter-spacing: 0.07em; text-transform: uppercase; }
.tekst h2:first-child, .tekst > .anker:first-child + h2 { margin-top: 0.4em; border-top: 0; padding-top: 0; }
.tekst h2, .tekst h3, .tekst h4 { position: relative; scroll-margin-top: calc(var(--header-h) + 18px); }
.kopanker { position: absolute; left: -1.1em; top: 0; opacity: 0; color: var(--muted); font-weight: 400; padding-right: 0.3em; }
.tekst h2 .kopanker { top: 0.9em; }
.tekst h2:hover .kopanker, .tekst h3:hover .kopanker, .tekst h4:hover .kopanker, .kopanker:focus { opacity: 1; text-decoration: none; }
.kopanker.gekopieerd::after { content: " ✓"; color: var(--accent); }
.tekst p { margin: 0 0 1.05em; }
.tekst strong { color: var(--ink); font-weight: 650; }
.tekst ul, .tekst ol { padding-left: 1.35em; margin: 0 0 1.15em; }
.tekst li { margin: 0.3em 0; }
.tekst li::marker { color: var(--accent); }
.tekst ol > li::marker { font-weight: 600; }
.tekst code { font: 0.86em var(--font-mono); background: var(--code-bg); padding: 0.12em 0.36em; border-radius: 5px; }
.tekst hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.anker { display: block; position: relative; top: calc(-1 * var(--header-h) - 18px); visibility: hidden; height: 0; }
.tekst a.ext::after { content: "↗"; font-size: 0.72em; margin-left: 0.15em; vertical-align: 0.15em; opacity: 0.7; }

blockquote, .kader {
  margin: 1.6em 0; padding: 18px 22px;
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
blockquote p:last-child, .kader p:last-child { margin-bottom: 0; }
.notitie { padding: 14px 18px; background: var(--bg-2); border-radius: var(--radius-sm); border: 1px solid var(--line); }

/* formules */
.math-block { margin: 1.15em 0 1.3em; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.katex { font-size: 1.06em; }
.katex-display { margin: 0.9em 0; overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.katex-display > .katex { white-space: nowrap; }
.math-block .katex-display { margin: 0; padding: 2px 0; }
.tekst .katex .boxpad { color: inherit; }

/* tabellen */
.tabelwrap { margin: 1.4em 0 1.7em; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); }
.tekst table { border-collapse: collapse; width: 100%; font-size: 0.88rem; line-height: 1.55; }
.tekst th { text-align: left; font-weight: 650; color: var(--ink); background: var(--bg-2); padding: 10px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.tekst td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.tekst tr:first-child td { border-top: 0; }
.tekst td:first-child { color: var(--ink); }
.tekst td[style*="right"], .tekst th[style*="right"] { font-variant-numeric: tabular-nums; }

/* statuslabels en lagen */
.pil { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 650; white-space: nowrap; }
.pil.p1 { background: var(--p1-bg); color: var(--p1-fg); }
.pil.p2 { background: var(--p2-bg); color: var(--p2-fg); }
.pil.p3 { background: var(--p3-bg); color: var(--p3-fg); }
.pil.p4 { background: var(--p4-bg); color: var(--p4-fg); }
.pil.p5 { background: var(--p5-bg); color: var(--p5-fg); }
.pil.p6 { background: var(--p6-bg); color: var(--p6-fg); }
.pil.p7 { background: var(--p7-bg); color: var(--p7-fg); }
.pil.p8 { background: var(--p8-bg); color: var(--p8-fg); }

/* vorige / volgende */
.bladeren { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 64px; }
.bladeren a {
  display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bladeren a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); text-decoration: none; }
.bladeren a:hover b { color: var(--accent-ink); }
.bladeren small { display: block; color: var(--muted); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }
.bladeren b { font: 600 1.12rem/1.3 var(--font-serif); }
.bladeren .volgende { text-align: right; grid-column: 2; }

/* ── Startpagina ─────────────────────────────────────── */
.start .hoofd { padding-top: 0; }
.held {
  position: relative; overflow: hidden;
  margin: 0 calc(-1 * clamp(18px, 5vw, 64px)); padding: clamp(40px, 7vw, 86px) clamp(18px, 5vw, 64px) clamp(34px, 5vw, 60px);
  background:
    radial-gradient(1100px 420px at 85% -10%, var(--hero-a), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, var(--hero-b), transparent 60%);
  border-bottom: 1px solid var(--line);
}
.held .binnen { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 40px; align-items: center; }
.held .kicker { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; }
.held h1 { font: 700 clamp(3.6rem, 9vw, 6.4rem)/0.95 var(--font-serif); color: var(--ink); margin: 12px 0 10px; letter-spacing: 0.01em; }
.held h1 span { color: var(--accent); }
.held .slogan { font: italic 500 clamp(1.4rem, 2.6vw, 1.9rem)/1.25 var(--font-serif); color: var(--ink); margin: 0 0 18px; }
.held .lead { font-size: 1.05rem; color: var(--ink-2); max-width: 60ch; margin: 0 0 24px; }
.held .acties { display: flex; flex-wrap: wrap; gap: 10px; }
.cta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; font-weight: 600; font-size: 0.95rem; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.cta:hover { text-decoration: none; background: var(--bg-2); color: var(--accent-ink); }
.cta.hoofdcta { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cta.hoofdcta:hover { background: var(--accent); border-color: transparent; color: #fff; }
.held figure { margin: 0; }
.held figcaption { font-size: 0.8rem; color: var(--muted); text-align: center; margin-top: 8px; }
.stroom path { fill: none; stroke-linecap: round; }

.blok { max-width: 1100px; margin: 0 auto; padding: 56px 0 0; }
.blok > h2 { font: 600 2rem/1.15 var(--font-serif); color: var(--ink); margin: 0 0 6px; }
.blok > .onder { color: var(--muted); margin: 0 0 24px; max-width: 70ch; }
.label { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); font-weight: 650; margin-bottom: 8px; }
.twee { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; }
.kaart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; }
.kaart p:last-child { margin-bottom: 0; }
.kaart p { margin: 0 0 0.9em; }
.kaart strong { color: var(--ink); }

.lagen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.laag { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 20px; box-shadow: var(--shadow); }
.laag .n { font: 700 1.5rem var(--font-serif); color: var(--accent); }
.laag h3 { margin: 4px 0 6px; font: 650 1.02rem var(--font-sans); color: var(--ink); }
.laag p { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
.laag::after { content: "→"; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: var(--line-2); font-size: 1.1rem; }
.laag:last-child::after { display: none; }

.delenrooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 14px; }
.deelkaart {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--ink-2); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.deelkaart:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); text-decoration: none; color: var(--ink-2); }
.deelkaart:hover b { color: var(--accent-ink); }
.deelkaart .rn { font: 700 1.3rem var(--font-serif); color: var(--accent); }
.deelkaart b { font: 600 1.18rem/1.25 var(--font-serif); color: var(--ink); }
.deelkaart span { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.deelkaart i { margin-top: auto; padding-top: 6px; font-style: normal; font-size: 0.78rem; color: var(--muted); }

.snel { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.snel li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font-size: 0.93rem; }
.snel li a { font-weight: 600; }

.herz details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; box-shadow: var(--shadow); }
.herz summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.herz summary::-webkit-details-marker { display: none; }
.herz summary::after { content: "+"; color: var(--accent); font-weight: 700; }
.herz details[open] summary::after { content: "−"; }
.herz details > div { padding: 0 18px 16px; font-size: 0.95rem; }
.herz details > div p { margin: 0; }

.over { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

/* ── Voet ────────────────────────────────────────────── */
.voet { border-top: 1px solid var(--line); margin-top: 80px; padding: 34px clamp(18px, 5vw, 64px) 44px; color: var(--muted); font-size: 0.88rem; background: var(--bg-2); }
.voet .binnen { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.voet h3 { font: 650 0.74rem var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
.voet p { margin: 0 0 8px; }
.voet a { color: var(--ink-2); }
.voet .regel { max-width: 1100px; margin: 26px auto 0; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 0.8rem; }

.naarboven { position: fixed; right: 18px; bottom: 18px; z-index: 30; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.naarboven.zicht { opacity: 1; pointer-events: auto; }

/* archief */
.lijst { list-style: none; padding: 0; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.lijst li { padding: 12px 16px; border-top: 1px solid var(--line); margin: 0; }
.lijst li:first-child { border-top: 0; }
.lijst small { display: block; color: var(--muted); font-size: 0.84rem; }

/* ── Mobiel en smaller ───────────────────────────────── */
.lade-achter { display: none; }
@media (max-width: 1080px) {
  .raam { grid-template-columns: minmax(0, 1fr); }
  .menuknop { display: inline-flex; }
  .zij {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: min(340px, 88vw); height: 100vh;
    background: var(--bg); border-right: 1px solid var(--line-2); box-shadow: var(--shadow-lift);
    transform: translateX(-104%); transition: transform .22s ease; padding-top: 22px;
  }
  body.lade-open .zij { transform: none; }
  body.lade-open .lade-achter { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(8, 14, 24, 0.45); }
  .held .binnen { grid-template-columns: 1fr; }
  .held figure { max-width: 460px; }
  .lagen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .laag::after { display: none; }
  .twee, .over { grid-template-columns: 1fr; }
  .voet .binnen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .merk small { display: none; }
  .kop { gap: 8px; }
  .zoek { flex: 0 0 38px; width: 38px; }
  .zoek input { padding: 0 0 0 34px; cursor: pointer; }
  .zoek input::placeholder { color: transparent; }
  .zoek:focus-within { position: absolute; left: 10px; right: 10px; top: 11px; width: auto; z-index: 60; }
  .zoek:focus-within input { cursor: text; box-shadow: var(--shadow-lift); }
  .zoek:focus-within input::placeholder { color: var(--muted); }
  .zoek kbd { display: none; }
  .zoekres { position: fixed; top: calc(var(--header-h) - 2px); left: 8px; right: 8px; width: auto; }
  .hoofd { padding: 26px 16px 64px; }
  .held { margin: 0 -16px; padding: 34px 16px 30px; }
  .lagen { grid-template-columns: 1fr; }
  .bladeren { grid-template-columns: 1fr; }
  .bladeren .volgende { grid-column: 1; }
  .voet .binnen { grid-template-columns: 1fr; }
  .tekst h2 { font-size: 1.65rem; }
  .kopanker { display: none; }
  .tekst th { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .kop, .zij, .voortgang, .bladeren, .naarboven, .voet, .lade-achter { display: none !important; }
  .raam { display: block; }
  .hoofd { padding: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .tabelwrap, blockquote, .kaart { box-shadow: none; }
  a { color: #000; }
}

/* EEML · plain-language layout, collapsible math and figures v0.28 (appended to eeml.css at build time) */

/* ── In plain words ──────────────────────────────────── */
.plain { max-width: var(--content-w); margin: 0 auto; scroll-margin-top: calc(var(--header-h) + 18px); }
.plain-head { margin: 0 0 12px; }
.plain-tag, .math-tag {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font: 650 0.72rem var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft);
}
.math-tag { color: var(--link); background: color-mix(in srgb, var(--link) 12%, var(--surface)); }
.plain-text { font-size: 1.07rem; line-height: 1.75; color: var(--ink-2); }
.plain-text p { margin: 0 0 1em; }
.plain-text ul { padding-left: 1.25em; margin: 0 0 1.1em; }
.plain-text li { margin: 0.5em 0; }
.plain-text li::marker { color: var(--accent); }
.plain-text strong { color: var(--ink); font-weight: 650; }
.plain-figs { margin-top: 8px; }

/* ── For mathematicians: collapsible sections ─────────── */
.math-head {
  max-width: var(--content-w); margin: 56px auto 6px; padding-top: 30px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px;
  scroll-margin-top: calc(var(--header-h) + 18px);
}
.math-head h2 { font: 600 1.95rem/1.15 var(--font-serif); color: var(--ink); margin: 8px 0 4px; }
.math-head p { margin: 0; color: var(--muted); font-size: 0.95rem; max-width: 60ch; }
.math-head .knop { flex: 0 0 auto; }
.tekst > details.math-sec:first-child, .tekst > p + details.math-sec { margin-top: 6px; }
details.math-sec { border-bottom: 1px solid var(--line); }
details.math-sec > summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative; }
details.math-sec > summary::-webkit-details-marker { display: none; }
details.math-sec > summary::after {
  content: ""; position: absolute; right: 10px; top: 26px; width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform 0.2s ease, top 0.2s ease;
}
details.math-sec[open] > summary::after { transform: rotate(225deg); top: 31px; }
.tekst details.math-sec > summary h2 {
  font: 600 1.38rem/1.25 var(--font-serif); color: var(--ink); margin: 0; padding: 0; border: 0;
}
details.math-sec > summary:hover h2 { color: var(--accent-ink); }
details.math-sec > summary .gist { display: block; margin-top: 5px; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
details.math-sec[open] > summary .gist { color: var(--ink-2); }
.tekst details.math-sec > summary h2 .kopanker { top: 0; }
details.math-sec > .sec-body { padding: 6px 0 26px; }
details.math-sec > .sec-body > h3:first-child { margin-top: 0.8em; }

/* ── Figures ─────────────────────────────────────────── */
.fig {
  margin: 26px 0; padding: 18px 18px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.fig-title { font: 600 1.28rem/1.3 var(--font-serif); color: var(--ink); margin: 0 0 12px; }
.fig figcaption { margin-top: 12px; font-size: 0.86rem; color: var(--muted); line-height: 1.55; }
.fig-body { position: relative; }
.fig-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig-svg text { font-family: var(--font-sans); }
.fig-svg.chart { max-width: 540px; margin: 0 auto; }
.fig-svg.narrow { max-width: 330px; margin: 0 auto; }
.fig-canvas canvas { display: block; width: 100%; height: auto; }

.fig-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 12px; }
.fig-btn {
  height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font: 600 0.87rem var(--font-sans); cursor: pointer;
}
.fig-btn:hover { background: var(--bg-2); color: var(--accent-ink); }
.fig-btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fig-btn.primary:hover { background: var(--accent); color: #fff; border-color: transparent; }
.fig-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--surface); }
.fig-seg .fig-btn { border: 0; border-radius: 0; height: 34px; }
.fig-seg .fig-btn + .fig-btn { box-shadow: inset 1px 0 0 var(--line-2); }
.fig-seg .fig-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.fig-slider { display: flex; align-items: center; gap: 10px; flex: 1 1 300px; font-size: 0.86rem; color: var(--muted); }
.fig-slider input { flex: 1; min-width: 120px; accent-color: var(--accent); }
.fig-slider output { min-width: 3.4em; text-align: right; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }

.fig-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.fig-stat { background: var(--bg-2); border-radius: 10px; padding: 8px 12px; transition: background 0.3s ease; }
.fig-stat-label { display: block; font-size: 0.74rem; color: var(--muted); letter-spacing: 0.02em; line-height: 1.35; }
.fig-stat-value { display: block; font: 650 1.08rem var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.fig-stat.win { background: var(--accent-soft); }
.fig-stat.win .fig-stat-value { color: var(--accent-ink); }

.fig-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 0.84rem; color: var(--muted); }
.fig-legend span::before {
  content: ""; display: inline-block; width: 16px; height: 4px; border-radius: 2px; margin-right: 7px; vertical-align: middle;
  background: var(--accent);
}
.fig-legend .rule::before, .fig-legend .memory::before, .fig-legend .y::before { background: var(--link); }
.fig-legend .strong { color: var(--accent-ink); font-weight: 650; }
.fig-legend .strong::before { display: none; }

.fig-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; margin-top: 6px; }
.fig-sub { display: block; font-weight: 650; color: var(--ink); font-size: 0.9rem; }
.fig-sub2 { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 8px; }
.fig-big { display: block; font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.fig-split b { font-variant-numeric: tabular-nums; }
.fig-split > div > span + b { display: block; font-size: 1.2rem; color: var(--ink); }
.fig-phase { text-align: center; font-weight: 650; color: var(--ink); margin-top: 8px; font-size: 0.92rem; }
.fig-note { margin-top: 8px; font-size: 0.84rem; color: var(--p8-fg); background: var(--p8-bg); padding: 6px 10px; border-radius: 8px; }
.fig-chart { margin-top: 12px; background: var(--bg); border-radius: 10px; padding: 6px 8px; }
.fig-row { display: flex; gap: 18px; align-items: center; }
.fig-row .fig-svg { flex: 1 1 auto; min-width: 0; }

/* drawing primitives */
.f-label { font-size: 15px; font-weight: 600; fill: var(--ink-2); }
.f-label.strong { fill: var(--accent-ink); font-size: 18px; font-weight: 700; }
.f-small { font-size: 12px; fill: var(--muted); }
.f-tick { font-size: 12.5px; fill: var(--muted); }
.f-tick.strong { fill: var(--accent-ink); font-weight: 650; }
.f-ground { fill: var(--bg-2); }
.f-groundline { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.f-dashline { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.7; }
.f-marble { fill: var(--accent); }
.f-contour { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.f-trail { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; opacity: 0.3; }
.f-pipe { fill: none; stroke: var(--line-2); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.f-water { fill: none; stroke: color-mix(in srgb, var(--link) 20%, transparent); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.f-drop { fill: var(--link); }
.f-node { fill: var(--surface); stroke: var(--muted); stroke-width: 3; }
.f-out { stroke: var(--line-2); stroke-width: 12; stroke-linecap: round; }
.f-cyl { fill: var(--bg-2); stroke: var(--muted); stroke-width: 2; }
.f-piston { fill: var(--ink-2); }
.f-rod { stroke: var(--ink-2); stroke-width: 4; stroke-linecap: round; }
.f-force { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.f-valve rect, .f-block-sign rect { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.f-valve path, .f-block-sign path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.f-wire { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linejoin: round; }
.f-wire-hidden { fill: none; stroke: none; }
.f-res, .f-src { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2.5; }
.f-src-arrow { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.f-charge { fill: var(--link); }
.f-heat { fill: var(--accent); opacity: 0; filter: blur(9px); }
.f-rail { stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.f-block { fill: var(--link); opacity: 0.9; }
.f-block.two { fill: var(--accent); }
.f-grid { stroke: var(--line); stroke-width: 1; }
.f-axis { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.f-curve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.3s ease; }
.f-curve.alt, .f-curve.memory { stroke: var(--link); }
.f-curve.memory { stroke-dasharray: 7 5; }
.f-curve.dim { opacity: 0.28; }
.f-dash { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 5; }
.f-pt { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }
.f-marker { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.f-funnel { fill: var(--bg-2); stroke: var(--muted); stroke-width: 2; }
.f-slot { fill: var(--bg-2); }
.f-slotfill { opacity: 0.85; }
.f-slotfill.a, .f-ball.a { fill: var(--accent); }
.f-slotfill.b, .f-ball.b { fill: var(--link); }
.f-track { fill: none; stroke: var(--line-2); stroke-width: 2; }
.f-box { fill: var(--surface); stroke: var(--muted); stroke-width: 2; }
.f-arc { fill: none; stroke: var(--muted); stroke-linecap: round; opacity: 0.75; }
.f-arrowhead { fill: var(--muted); opacity: 0.75; }
.f-token { fill: var(--link); }
.f-token.accent { fill: var(--accent); }
.f-region { fill: var(--accent-soft); transition: opacity 0.3s ease; }
.f-edge { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.f-rule { stroke: var(--link); stroke-width: 2; stroke-dasharray: 4 5; }
.f-cross { stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; }
.f-num { fill: var(--surface); stroke: var(--line-2); stroke-width: 2; transition: fill 0.3s ease, opacity 0.3s ease; }
.f-num.mult { fill: color-mix(in srgb, var(--link) 22%, var(--surface)); }
.f-numtext { font-size: 15px; font-weight: 650; fill: var(--ink); pointer-events: none; }
.f-halo { fill: var(--accent-soft); transition: opacity 0.3s ease; }
.f-link { stroke: var(--muted); stroke-width: 4; stroke-linecap: round; }
.f-carrier { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2.5; }
.f-excite { fill: var(--accent); }
.f-graph { transition: opacity 0.35s ease; }
.f-band { fill: none; stroke: color-mix(in srgb, var(--link) 18%, transparent); stroke-linecap: round; }
.f-phase { fill: var(--bg-2); }
.f-now { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }

/* marble panels */
.fig-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fig-cell { background: var(--bg); border-radius: 10px; padding: 6px 6px 8px; }
.fig-cell-label { text-align: center; line-height: 1.35; }
.fig-cell-label b { display: block; font-size: 0.86rem; color: var(--ink); }
.fig-cell-label span { font-size: 0.8rem; color: var(--muted); }

/* sorting of old components */
.fig-pile { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; padding: 8px; border-radius: 10px; background: var(--bg); }
.fig-trays { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.fig-tray { background: var(--bg); border-radius: 10px; padding: 8px 10px 10px; }
.fig-tray-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; }
.fig-tray-head b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fig-tray-in { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; }
.fig-chip {
  display: inline-flex; flex-direction: column; padding: 5px 10px; border-radius: 9px; background: var(--bg-2);
  font-size: 0.8rem; color: var(--ink); line-height: 1.3; transition: transform 0.5s cubic-bezier(.2, .7, .2, 1), background 0.3s ease;
}
.fig-chip .v { display: none; font-size: 0.7rem; color: var(--accent-ink); }
.fig-chip.placed { background: var(--surface); box-shadow: var(--shadow); }
.fig-chip.placed .v { display: block; }
.fig-chip.old.placed { background: var(--p8-bg); }
.fig-chip.old.placed .v { color: var(--p8-fg); }

/* success attempts */
.fig-tries { margin-top: 12px; }
.fig-tries-label { font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; }
.fig-dots { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 4px; max-width: 440px; }
.fig-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--bg-2); transition: background 0.2s ease; }
.fig-dots i.ok { background: var(--accent); }
.fig-dots i.no { background: var(--line-2); }

/* counting tallies */
.fig-tally { display: grid; gap: 6px; margin-top: 8px; }
.fig-tally-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 56px; align-items: center; gap: 10px; font-size: 0.88rem; }
.fig-tally-row b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.fig-tally-bar { display: block; height: 10px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.fig-tally-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s ease; }
.fig-tally-row.b .fig-tally-bar i { background: var(--link); }

/* occupancy bars under the rings */
.fig-bars { display: flex; gap: 6px; height: 56px; align-items: flex-end; justify-content: center; margin: 4px 0 2px; }
.fig-bar { width: 22px; height: 100%; background: var(--bg-2); border-radius: 5px; display: flex; align-items: flex-end; overflow: hidden; }
.fig-bar i { display: block; width: 100%; background: var(--link); transition: height 0.3s ease; }
.fig-bars.accent .fig-bar i { background: var(--accent); }

/* charges */
.fig-groups { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.fig-group { display: flex; gap: 6px; align-items: center; background: var(--bg); padding: 8px 10px; border-radius: 12px; }
.fig-group-note { font-size: 0.74rem; color: var(--muted); margin-left: 4px; }
.fig-cond {
  font: 600 1rem var(--font-sans); padding: 6px 11px; border-radius: 8px; background: var(--bg-2); color: var(--muted);
  transition: background 0.3s ease, color 0.3s ease;
}
.fig-cond sub { font-size: 0.7em; }
.fig-cond.on { background: var(--accent-soft); color: var(--accent-ink); }
.fig-counter { text-align: center; font-size: 0.84rem; color: var(--muted); margin: 12px 0 6px; }
.fig-result { text-align: center; }
.fig-result-label { display: block; font-size: 0.8rem; color: var(--muted); }
.fig-result-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; }
.fig-val { background: var(--bg-2); border-radius: 8px; padding: 6px 11px; }
.fig-val i { font-style: italic; color: var(--muted); margin-right: 6px; }
.fig-val b { color: var(--ink); }
.fig-lock { font-size: 0.8rem; color: var(--accent-ink); font-weight: 650; }
.fig-lock.pulse { animation: figpulse 0.7s ease; }
@keyframes figpulse { from { opacity: 0.2; } to { opacity: 1; } }

/* D1 dots */
.fig-dotside { flex: 0 0 150px; }
.fig-dotside .fig-legend { justify-content: center; }
.fig-dotgrid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.fig-dotgrid i { aspect-ratio: 1; border-radius: 50%; background: var(--link); opacity: 0.7; transition: background 0.25s ease, opacity 0.25s ease; }
.fig-dotgrid i.x { background: var(--accent); opacity: 1; }

/* checklist and tallies */
.fig-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; counter-reset: fc; }
.fig-check li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--ink-2); }
.fig-check .box {
  flex: 0 0 22px; height: 22px; border-radius: 7px; background: var(--bg-2);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700;
  transition: background 0.3s ease;
}
.fig-check li.done .box { background: var(--accent); }
.fig-check li.done .box::after { content: "✓"; }
.fig-tallies { display: grid; gap: 12px; }
.fig-tally-group { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; align-items: center; }
.fig-tally-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.9rem; color: var(--ink-2); }
.fig-tally-head b { color: var(--ink); }
.fig-tally-group.open .fig-tally-head b { color: var(--muted); font-weight: 500; }
.fig-squares { display: flex; flex-wrap: wrap; gap: 5px; }
.fig-squares i {
  width: 22px; height: 22px; border-radius: 6px; background: var(--bg-2); font-style: normal; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background 0.25s ease;
}
.fig-squares i.done { background: var(--accent); }
.fig-squares i.done::after { content: "✓"; }
.fig-squares i.empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }

/* ── Start page ──────────────────────────────────────── */
.kort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kort .kaart h3, .vraag h3 { margin: 2px 0 8px; font: 650 1.05rem var(--font-sans); color: var(--ink); }
.kort .kaart p, .vraag p { margin: 0; font-size: 0.95rem; line-height: 1.6; }
.voorbeeld-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 26px; align-items: start; }
.voorbeeld-in .fig { margin: 0; }
.vragen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vraag { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px 18px; }
.qicon { display: block; width: 96px; height: 64px; margin: 0 0 6px -4px; overflow: visible; }
.q-wall { stroke: var(--ink-2); stroke-width: 4; stroke-linecap: round; }
.q-dot { fill: var(--link); opacity: 0; }
.q-dot.q-no { fill: var(--muted); }
.q-gate .d1 { animation: qpass 3.2s linear infinite; }
.q-gate .d2 { animation: qpass 3.2s linear 1.6s infinite; }
.q-gate .d3 { animation: qbounce 3.2s ease-in-out 0.8s infinite; }
@keyframes qpass { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(80px); opacity: 0; } }
@keyframes qbounce { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 45% { transform: translateX(32px); } 75% { transform: translateX(6px); opacity: 1; } 100% { transform: translateX(6px); opacity: 0; } }
.q-stand { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.q-beam { transform-box: view-box; transform-origin: 48px 18px; animation: qtilt 4s ease-in-out infinite; }
.q-beam path { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.q-beam .q-pan { fill: var(--bg-2); stroke-width: 2; }
.q-w1 { fill: var(--accent); }
.q-w2 { fill: var(--link); }
.q-pivot { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }
@keyframes qtilt { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.q-slot { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.q-slot.a { stroke: var(--accent); }
.q-slot.b { stroke: var(--link); }
.q-ball { opacity: 0; animation: qdrop 3.6s ease-in infinite; }
.q-ball.a { fill: var(--accent); }
.q-ball.b { fill: var(--link); }
.q-ball.s2 { animation-delay: 1.2s; }
.q-ball.s3 { animation-delay: 2.4s; }
@keyframes qdrop { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateY(44px); opacity: 1; } 85% { transform: translateY(44px); opacity: 1; } 100% { transform: translateY(44px); opacity: 0; } }
.q-route { fill: none; stroke: var(--line-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 7; }
.q-mover { fill: var(--accent); }
.q-clock { fill: none; stroke: var(--ink-2); stroke-width: 2; }
.q-hand { stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; transform-box: view-box; transform-origin: 82px 46px; animation: qspin 4.8s linear infinite; }
@keyframes qspin { to { transform: rotate(360deg); } }

.stand-kaart { max-width: 880px; }
.stand-tekst p { margin: 0 0 0.75em; }
.werkzin, .statusregel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.werkzin .label, .statusregel .label { margin: 0; }
.stand-kaart .werkzin { margin: 20px 0 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.werkzin .zin { font: italic 500 1.4rem/1.35 var(--font-serif); color: var(--accent-ink); }
.stand-kaart .statusregel { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink-2); font-size: 0.97rem; }

.twee-lijsten { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lijst-ok, .lijst-open { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lijst-ok li, .lijst-open li { position: relative; padding-left: 32px; font-size: 0.95rem; line-height: 1.55; }
.lijst-ok li::before, .lijst-open li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff;
}
.lijst-ok li::before { content: "✓"; background: var(--accent); }
.lijst-open li::before { background: transparent; box-shadow: inset 0 0 0 2px var(--line-2); }
.eerlijk.in .lijst-ok li { animation: rijin 0.5s ease both; }
.eerlijk.in .lijst-ok li:nth-child(2) { animation-delay: 0.1s; }
.eerlijk.in .lijst-ok li:nth-child(3) { animation-delay: 0.2s; }
.eerlijk.in .lijst-ok li:nth-child(4) { animation-delay: 0.3s; }
.eerlijk.in .lijst-ok li:nth-child(5) { animation-delay: 0.4s; }
.eerlijk.in .lijst-ok li:nth-child(6) { animation-delay: 0.5s; }
@keyframes rijin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.deelkaart .picon { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deelkaart .picon .fillish { fill: var(--accent-soft); }
.deelkaart .top { display: flex; align-items: center; justify-content: space-between; }

details.start-math { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
details.start-math > summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative; }
details.start-math > summary::-webkit-details-marker { display: none; }
details.start-math > summary::after {
  content: ""; position: absolute; right: 26px; top: 30px; width: 10px; height: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s ease;
}
details.start-math[open] > summary::after { transform: rotate(225deg); top: 35px; }
details.start-math > summary .t { display: block; font: 600 1.55rem/1.2 var(--font-serif); color: var(--ink); }
details.start-math > summary .s { display: block; margin-top: 4px; color: var(--muted); font-size: 0.95rem; }
details.start-math > summary:hover .t { color: var(--accent-ink); }
.start-math-in { padding: 0 24px 26px; }
.start-math-in .blok { padding-top: 34px; }
.start-math-in .blok:first-child { padding-top: 6px; }

.held .voluit { margin: 2px 0 10px; font: 500 1.02rem var(--font-sans); letter-spacing: 0.06em; color: var(--muted); }
.held .voluit b { color: var(--accent-ink); font-weight: 700; }
.naamtegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.naamtegel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px 18px; }
.naamtegel .letter { display: block; font: 700 2.6rem/1 var(--font-serif); color: var(--accent); }
.naamtegel b { display: block; margin: 8px 0 4px; font: 650 1.05rem var(--font-sans); color: var(--ink); }
.naamtegel > span:last-child { display: block; font-size: 0.92rem; line-height: 1.5; color: var(--muted); }
.naam.in .naamtegel { animation: tegelin 0.6s cubic-bezier(.2, .7, .2, 1) both; }
.naam.in .naamtegel:nth-child(2) { animation-delay: 0.12s; }
.naam.in .naamtegel:nth-child(3) { animation-delay: 0.24s; }
.naam.in .naamtegel:nth-child(4) { animation-delay: 0.36s; }
@keyframes tegelin { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.naamtekst { margin-top: 18px; max-width: 75ch; }
.uitgang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.basis { list-style: none; counter-reset: bas; margin: 0; padding: 0; display: grid; gap: 12px; }
.basis li {
  counter-increment: bas; position: relative; padding: 14px 16px 14px 56px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); font-size: 0.95rem; line-height: 1.55;
}
.basis li::before {
  content: counter(bas); position: absolute; left: 16px; top: 13px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink);
  font: 700 0.9rem var(--font-sans);
}
.basis li b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 2px; }
.regels-kaart p { font-size: 0.93rem; color: var(--muted); }
.regels { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.regels li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: 0.93rem; }
.regels li:first-child { border-top: 0; }
.regels .nr { font: 700 0.85rem var(--font-sans); color: var(--accent-ink); }
.regels .regel { color: var(--ink); }
.regels .soort { font-size: 0.74rem; color: var(--muted); background: var(--bg-2); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.regels-kaart .meer { margin: 0; font-size: 0.9rem; }

/* the forms of EEML */
:root { --g0: var(--accent); --g1: var(--link); --g2: var(--p4-fg); --g3: var(--p2-fg); --g4: var(--p5-fg); --g5: var(--p7-fg); }
.g0 { --gc: var(--g0); } .g1 { --gc: var(--g1); } .g2 { --gc: var(--g2); } .g3 { --gc: var(--g3); } .g4 { --gc: var(--g4); } .g5 { --gc: var(--g5); }
.vormen .fig-forms { margin: 10px 0 30px; }
.fig-svg.formsmap text { font-size: 14px; font-weight: 600; fill: var(--ink-2); }
.f-orbit { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 6; }
.f-spoke { stroke: var(--gc); stroke-width: 1.2; opacity: 0.35; }
.f-formnode { cursor: pointer; }
.f-formnode circle { fill: var(--gc); stroke: var(--surface); stroke-width: 3; }
.f-formnode:hover text, .f-formnode:focus text { fill: var(--accent-ink); }
.f-hub { fill: var(--accent-soft); }
.fig-svg.formsmap .f-hubtext { font: 700 20px var(--font-serif); fill: var(--ink); }
.fig-svg.formsmap .f-hubtext.sub { font: 650 16px var(--font-sans); fill: var(--accent-ink); }
.f-pulse { fill: var(--gc); }
.fig-legend.groups span::before { width: 10px; height: 10px; border-radius: 50%; background: var(--gc); }
.vormgroep {
  margin-top: 30px; padding: 24px 26px 26px; border-radius: var(--radius); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--gc) 7%, var(--bg));
}
.vormgroep + .vormgroep { margin-top: 26px; }
.vormgroep-kop { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; align-items: center; }
.vormgroep-kop .fig { margin: 0; }
.groepnr {
  display: inline-flex; width: 38px; height: 38px; border-radius: 50%; align-items: center; justify-content: center;
  font: 700 1.1rem var(--font-sans); color: #fff; background: var(--gc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gc) 16%, transparent);
}
.vormgroep-tekst h3 { font: 600 1.65rem/1.2 var(--font-serif); color: var(--ink); margin: 12px 0 8px; }
.vormgroep-tekst p { margin: 0; color: var(--ink-2); font-size: 0.98rem; line-height: 1.6; }
.vormkaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; align-items: start; }
details.vorm { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); scroll-margin-top: calc(var(--header-h) + 18px); }
details.vorm[open] { box-shadow: var(--shadow-lift); }
details.vorm { transition: background-color 0.4s ease, box-shadow 0.3s ease; }
details.vorm.actief { background: color-mix(in srgb, var(--gc) 13%, var(--surface)); box-shadow: var(--shadow-lift); }
details.vorm.actief .vn { color: var(--gc); }
details.vorm.glow { animation: vormglow 1.8s ease-out; }
@keyframes vormglow {
  0% { background-color: color-mix(in srgb, var(--gc) 40%, var(--surface)); transform: scale(1.03); }
  100% { background-color: color-mix(in srgb, var(--gc) 13%, var(--surface)); transform: none; }
}
.f-formnode circle { transition: transform 0.25s ease; transform-box: fill-box; transform-origin: center; }
.f-formnode.on circle { transform: scale(1.5); }
.fig-svg.formsmap .f-formnode.on text { fill: var(--gc); font-weight: 700; }
details.vorm > summary { list-style: none; cursor: pointer; padding: 14px 40px 14px 16px; position: relative; display: block; }
details.vorm > summary::-webkit-details-marker { display: none; }
details.vorm > summary::after {
  content: ""; position: absolute; right: 16px; top: 20px; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s ease;
}
details.vorm[open] > summary::after { transform: rotate(225deg); top: 24px; }
.vorm .vn { display: block; font-weight: 650; color: var(--ink); font-size: 0.98rem; margin-bottom: 5px; }
.vorm summary:hover .vn { color: var(--accent-ink); }
.vorm .vs { display: inline-block; font-size: 0.72rem; padding: 1px 9px; border-radius: 999px; margin-bottom: 7px; color: var(--ink-2); background: color-mix(in srgb, var(--gc) 15%, var(--surface)); }
.vorm .vz { display: block; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
details.vorm dl { margin: 0; padding: 0 16px; font-size: 0.9rem; }
details.vorm dt { margin-top: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
details.vorm dd { margin: 2px 0 0; color: var(--ink-2); line-height: 1.5; }
details.vorm .meer { display: block; padding: 10px 16px 14px; font-size: 0.88rem; }
.f-hatch { stroke: var(--muted); stroke-width: 1.3; opacity: 0.7; }
.f-flag { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; }
.f-pipe.thin { stroke-width: 12; }
.f-cand { fill: var(--link); opacity: 0.85; transition: opacity 0.4s ease, fill 0.3s ease; }
.f-cand.out { opacity: 0.12; }
.f-cand.win { fill: var(--accent); opacity: 1; }
.f-burst { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.f-walker { fill: var(--accent); }
.f-base { fill: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.f-sig { fill: color-mix(in srgb, var(--p2-fg) 55%, var(--surface)); }
.f-curv { fill: color-mix(in srgb, var(--link) 50%, var(--surface)); }
.fig-legend.k3legend span::before { width: 12px; height: 12px; border-radius: 3px; }
.fig-legend.k3legend .base::before { background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.fig-legend.k3legend .sig::before { background: color-mix(in srgb, var(--p2-fg) 55%, var(--surface)); }
.fig-legend.k3legend .curv::before { background: color-mix(in srgb, var(--link) 50%, var(--surface)); }
.fig-svg .f-small.strongish { fill: var(--accent-ink); font-weight: 650; }
.fig-svg .halo { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.fig-popwrap { display: flex; gap: 20px; align-items: center; }
.fig-pop { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; }
.fig-pop i { aspect-ratio: 1; border-radius: 50%; background: var(--link); opacity: 0.7; transition: background 0.3s ease, opacity 0.3s ease; }
.fig-pop i.x { background: var(--accent); opacity: 1; }
.fig-popside { flex: 0 0 150px; text-align: center; }

/* ── Smaller screens ─────────────────────────────────── */
@media (max-width: 1080px) {
  .vragen, .naamtegels, .vormkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vormgroep-kop { grid-template-columns: 1fr; }
  .uitgang { grid-template-columns: 1fr; }
  .voorbeeld-in { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .kort, .vragen, .twee-lijsten, .vormkaarten { grid-template-columns: 1fr; }
  .vormgroep { padding: 18px 14px 16px; margin-left: -4px; margin-right: -4px; }
  .vormen .fig-forms { display: none; }
  .fig-popwrap { flex-direction: column; align-items: stretch; gap: 12px; }
  .fig-pop { flex: none; width: 100%; }
  .fig-popside { flex: none; }
  .regels li { grid-template-columns: 22px minmax(0, 1fr); }
  .regels .soort { grid-column: 2; justify-self: start; }
  .fig { padding: 14px 12px 12px; margin: 20px 0; }
  .fig-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig-trays { grid-template-columns: 1fr; }
  .fig-check { grid-template-columns: 1fr; }
  .fig-tally-group { grid-template-columns: 1fr; gap: 6px; }
  .fig-row { flex-direction: column; align-items: stretch; }
  .fig-dotside { flex: none; width: 170px; margin: 0 auto; }
  .fig-tally-row { grid-template-columns: 92px minmax(0, 1fr) 48px; }
  .f-label { font-size: 21px; }
  .f-label.strong { font-size: 23px; }
  .f-tick { font-size: 17px; }
  .f-small { font-size: 16px; }
  .math-head h2 { font-size: 1.7rem; }
  .tekst details.math-sec > summary h2 { font-size: 1.22rem; }
  details.start-math > summary { padding: 18px 48px 18px 18px; }
  .start-math-in { padding: 0 16px 22px; }
}

@media print {
  .fig-controls, .fig-btn, .math-head .knop { display: none !important; }
  .fig, .vraag, details.start-math { box-shadow: none; }
  details.math-sec > summary::after, details.start-math > summary::after { display: none; }
}

/* ── Page: new research lines (0.28.11) ──────────────── */
.eerlijk-meer { margin: 18px 0 0; }
.lijnlegenda, .lijngroep, .lijnnoot { max-width: var(--content-w); margin-left: auto; margin-right: auto; }
.lijnlegenda { margin-bottom: 30px; }
.lijnlegenda ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.lijnlegenda li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 0.94rem; color: var(--ink-2); }
.lijngroep { margin-bottom: 36px; }
.lijngroep h2 { font: 600 1.45rem/1.25 var(--font-serif); color: var(--ink); margin: 0 0 14px; scroll-margin-top: calc(var(--header-h) + 18px); }
.lijnen { display: grid; gap: 14px; }
.lijn { scroll-margin-top: calc(var(--header-h) + 18px); }
.lijn h3 { margin: 0 0 8px; font: 650 1.06rem/1.35 var(--font-sans); color: var(--ink); }
.lijn p { margin: 10px 0 0; line-height: 1.6; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 650; letter-spacing: 0.01em; }
.chip.k-open { background: var(--p6-bg); color: var(--p6-fg); }
.chip.k-extern { background: var(--p4-bg); color: var(--p4-fg); }
.chip.k-eeml { background: var(--p3-bg); color: var(--p3-fg); }
.chip.k-unchecked { background: var(--p7-bg); color: var(--p7-fg); }
.lijn .uitkomst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--bg-2); font-size: 0.95rem; }
.lijn .uitkomst .label { margin: 0; }
.lijn .meer { display: inline-block; margin-top: 10px; font-size: 0.93rem; }
.lijnnoot { margin-top: 6px; margin-bottom: 40px; color: var(--muted); font-size: 0.9rem; }