*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#F7F5F0;--bg2:#EDEAE3;--bg3:#fff;
--text:#2A2824;--text2:#5C5A54;--text3:#8A877F;
--accent:#3ea635;--accent2:#2d6a23;--accent-light:#e8f2e5;
--blue:#1d3176;--blue-light:#e5e9f3;
--red:#B5442E;--red-light:#FAEAE7;
--amber:#C49A1E;--amber-light:#FDF3D0;
--coral:#D85A30;
--font-display:'Playfair Display',Georgia,serif;
--font-heading:'Roboto',-apple-system,sans-serif;
--font-body:'Roboto',-apple-system,sans-serif;
--font-mono:'JetBrains Mono',monospace;
--radius:8px;--radius-lg:12px;
}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-light);color:var(--accent2)}

/* Layout */
.wrapper{display:flex;min-height:100vh}
nav{position:sticky;top:0;height:100vh;width:280px;min-width:280px;background:var(--bg2);border-right:1px solid rgba(0,0,0,.06);overflow-y:auto;padding:2rem 0;z-index:10}
nav::-webkit-scrollbar{width:4px}
nav::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:2px}
main{flex:1;max-width:820px;margin:0 auto;padding:3rem 3rem 6rem}

/* Nav styles */
.vic-logo{padding:0 1.25rem 1.25rem;margin-bottom:.5rem;border-bottom:1px solid rgba(0,0,0,.06)}
.vic-logo img{display:block;width:100%;max-width:200px;height:auto}
.vic-wordmark{font-family:var(--font-heading);font-weight:700;font-size:9.5px;letter-spacing:.04em;line-height:1.3}
.vic-wm-green{color:#3ea635}
.vic-wm-blue{color:#1d3176}
.nav-header{padding:0 1.5rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.06);margin-bottom:1rem}
.nav-header h2{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text);line-height:1.3}
.nav-header .tag{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;background:var(--accent);color:#fff;padding:2px 8px;border-radius:3px;margin-top:8px;font-weight:500}
.nav-section{padding:0 1rem;margin-bottom:.25rem}
.nav-section-title{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);padding:.75rem .5rem .25rem;font-weight:600}
.nav-link{display:block;padding:6px 12px;font-size:13px;color:var(--text2);text-decoration:none;border-radius:6px;transition:all .15s;cursor:pointer;line-height:1.4}
.nav-link:hover{background:rgba(0,0,0,.04);color:var(--text)}
.nav-link.active{background:var(--accent-light);color:var(--accent2);font-weight:500}
.nav-link.sub{padding-left:24px;font-size:12.5px}

/* Typography */
h1{font-family:var(--font-display);font-size:42px;font-weight:700;line-height:1.15;letter-spacing:-.02em;margin-bottom:.5rem}
h1 span{color:var(--accent)}
.subtitle{font-size:17px;color:var(--text2);margin-bottom:2.5rem;max-width:580px;line-height:1.6}
h2{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1.25;margin:3.5rem 0 1rem;padding-top:2rem;border-top:1px solid rgba(0,0,0,.06)}
h2:first-of-type{border-top:none;padding-top:0}
h3{font-family:var(--font-heading);font-size:19px;font-weight:700;margin:2rem 0 .75rem;color:var(--text);letter-spacing:-.005em}
h4{font-size:15px;font-weight:600;margin:1.5rem 0 .5rem;color:var(--text)}
p{margin-bottom:1rem}
strong{font-weight:600;color:var(--text)}
em{font-style:italic;color:var(--text2)}

/* Sections */
section{scroll-margin-top:2rem}

/* Huisstijl-additieven: hoekdriehoek bij sectie-openers */
.vic-corner{position:absolute;bottom:0;right:0;width:0;height:0;border-style:solid;border-width:0 0 18px 18px;border-color:transparent transparent #3ea635 transparent;opacity:.55;pointer-events:none}

/* Sluitblok met VIC-tagline */
.vic-closing{background:#1d3176;color:#fff;border-radius:var(--radius-lg);padding:2.5rem 2.25rem;margin:4rem 0 0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.vic-closing .vic-tagline{font-family:var(--font-heading);font-weight:700;font-size:22px;line-height:1.25;letter-spacing:.01em;color:#fff;max-width:380px}
.vic-closing .vic-tagline .url{display:block;font-size:13px;font-weight:400;letter-spacing:.02em;margin-top:.75rem;color:rgba(255,255,255,.7)}
.vic-closing .vic-logo-card{flex-shrink:0}
.vic-closing .vic-logo-card img{display:block;width:180px;height:auto;filter:brightness(0) invert(1)}

/* Decision table */
.decision-grid{display:grid;gap:12px;margin:1.5rem 0 2rem}
.decision-card{background:var(--bg3);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-lg);padding:1rem 1.25rem;transition:box-shadow .2s}
.decision-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.05)}
.decision-card .label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:4px;font-weight:500}
.decision-card .title{font-weight:600;font-size:14px;margin-bottom:4px}
.decision-card .why{font-size:13px;color:var(--text2);line-height:1.5}

/* Akte cards */
.akte{background:var(--bg3);border-radius:var(--radius-lg);border:1px solid rgba(0,0,0,.06);padding:1.75rem 2rem;margin:1.5rem 0 2rem;position:relative;overflow:hidden}
.akte::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%}
.akte.akte-1::before{background:var(--red)}
.akte.akte-2::before{background:var(--amber)}
.akte.akte-3::before{background:var(--accent)}
.akte-number{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;font-weight:400}
.akte.akte-1 .akte-number{color:var(--red)}
.akte.akte-2 .akte-number{color:var(--amber)}
.akte.akte-3 .akte-number{color:var(--accent)}
.akte h3{margin-top:0;font-size:22px}

/* Dimension meters */
.dim-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:1rem 0 1.5rem}
.dim-item{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 10px;border-radius:6px;background:var(--bg)}
.dim-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dim-item .dot.red{background:var(--red)}
.dim-item .dot.green{background:var(--accent)}
.dim-item .dot.amber{background:var(--amber)}
.dim-item .name{font-weight:500;min-width:90px}
.dim-item .desc{color:var(--text2);font-size:12px}

/* Context cards */
.context-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.5rem 0}
.context-card{background:var(--bg3);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-lg);padding:1.25rem;transition:all .2s;cursor:default}
.context-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.context-card .icon{font-size:28px;margin-bottom:.75rem}
.context-card h4{margin:0 0 .5rem;font-size:15px}
.context-card ul{list-style:none;padding:0}
.context-card li{font-size:12.5px;color:var(--text2);padding:3px 0;padding-left:14px;position:relative;line-height:1.4}
.context-card li::before{content:'→';position:absolute;left:0;color:var(--text3);font-size:11px}

/* Bouwsteen tables */
.bouwsteen-table{width:100%;border-collapse:collapse;margin:1rem 0 2rem;font-size:13px}
.bouwsteen-table th{text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);padding:8px 10px;border-bottom:2px solid rgba(0,0,0,.08)}
.bouwsteen-table td{padding:10px;border-bottom:1px solid rgba(0,0,0,.04);vertical-align:top;line-height:1.5}
.bouwsteen-table tr:hover td{background:rgba(0,0,0,.015)}
.bouwsteen-table .tag-up{display:inline-block;font-size:10px;background:var(--accent-light);color:var(--accent2);padding:1px 6px;border-radius:3px;margin:1px;font-weight:500}
.bouwsteen-table .tag-conflict{display:inline-block;font-size:10px;background:var(--red-light);color:var(--red);padding:1px 6px;border-radius:3px;margin:1px;font-weight:500}
.bouwsteen-table .tag-synergy{display:inline-block;font-size:10px;background:var(--blue-light);color:var(--blue);padding:1px 6px;border-radius:3px;margin:1px;font-weight:500}
.bouwsteen-table .euro{display:inline-block;font-size:10px;background:var(--amber-light);color:var(--amber);padding:1px 6px;border-radius:3px;margin-left:4px;font-weight:500}

/* Pijlers */
.vangrail-list{display:grid;gap:8px;margin:1rem 0 2rem}
.vangrail-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--bg3);border:1px solid rgba(0,0,0,.05);border-radius:var(--radius);transition:all .15s}
.vangrail-item:hover{border-color:rgba(0,0,0,.1)}
.vangrail-toggle{width:36px;height:20px;background:var(--bg2);border-radius:10px;flex-shrink:0;position:relative;cursor:pointer;transition:background .2s;border:1px solid rgba(0,0,0,.08)}
.vangrail-toggle.on{background:var(--accent)}
.vangrail-toggle::after{content:'';position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.vangrail-toggle.on::after{transform:translateX(16px)}
.vangrail-info .name{font-weight:600;font-size:14px;margin-bottom:2px}
.vangrail-info .desc{font-size:12.5px;color:var(--text2);line-height:1.5}
.vangrail-info .activates{font-size:11px;color:var(--text3);margin-top:4px}

/* Score / Dimension detail */
.dim-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.5rem 0}
.dim-detail{background:var(--bg3);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-lg);padding:1.25rem}
.dim-detail h4{margin:0 0 .25rem;font-size:14px}
.dim-detail .question{font-size:12.5px;color:var(--text2);font-style:italic;margin-bottom:.5rem}
.dim-detail .measure{font-size:12px;color:var(--text3)}

/* Conflict / synergy */
.relation-card{padding:12px 14px;border-radius:var(--radius);margin:6px 0;font-size:13px;line-height:1.5}
.relation-card.conflict{background:var(--red-light);border-left:3px solid var(--red)}
.relation-card.synergy{background:var(--accent-light);border-left:3px solid var(--accent)}
.relation-card .combo{font-weight:600;margin-bottom:2px}
.relation-card .effect{color:var(--text2)}

/* Scherm layout ASCII */
.schema-block{background:#1a1a1a;color:#c8c8c4;font-family:var(--font-mono);font-size:11.5px;line-height:1.6;padding:1.5rem;border-radius:var(--radius-lg);overflow-x:auto;margin:1.5rem 0;white-space:pre}

/* Info layers table */
.layer-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:13px}
.layer-table th{text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);padding:8px 10px;border-bottom:2px solid rgba(0,0,0,.08)}
.layer-table td{padding:8px 10px;border-bottom:1px solid rgba(0,0,0,.04);vertical-align:top}
/* De scenario-omschrijving in 6.1, 7.1 en 8.1 is het dragende stuk van dat
   hoofdstuk. Gezet als lead: iets groter, ruimer geregeld, met één dunne lijn in
   de accentkleur ernaast. Geen achtergrond en geen kader, want besluit 19-8 houdt
   het accentkader voorbehouden aan de openingssectie, en de tekst mag niets over
   zijn eigen gewicht zeggen (Tim, 20-8). */
.scenario-lead{font-size:16.5px;line-height:1.75;border-left:3px solid var(--accent);
  padding-left:1.1rem;margin:1.25rem 0 1.75rem;color:var(--text)}
.scenario-lead p{margin-bottom:.85rem}
.scenario-lead p:last-child{margin-bottom:0}

/* De scenariotabel staat boven alle drie de hoofdstukken en is één partial.
   Welke rij "u bent hier" is, bepaalt de CSS op het id van de sectie, zodat er
   geen drie bijna gelijke kopieën van de tabel hoeven te bestaan. */
[id$="scenario-1"] .scenario-verschil tr.s1 > td,
[id$="scenario-2"] .scenario-verschil tr.s2 > td,
[id$="scenario-3"] .scenario-verschil tr.s3 > td{background:var(--accent-light);font-weight:600}
[id$="scenario-1"] .scenario-verschil tr.s1 > td:first-child::after,
[id$="scenario-2"] .scenario-verschil tr.s2 > td:first-child::after,
[id$="scenario-3"] .scenario-verschil tr.s3 > td:first-child::after{content:" \2190 dit hoofdstuk";font-weight:400;font-size:11px;color:var(--accent2);white-space:nowrap}


/* Meta badge */
.meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2rem}
.meta-badge{font-size:11px;padding:4px 10px;border-radius:4px;background:var(--bg2);color:var(--text2);font-weight:500}

/* Open questions */
.question-list{display:grid;gap:8px;margin:1rem 0}
.question-item{padding:12px 14px;background:var(--bg3);border:1px solid rgba(0,0,0,.05);border-radius:var(--radius);font-size:13px}
.question-item .q{font-weight:600;margin-bottom:2px}
.question-item .ctx{color:var(--text2);font-size:12.5px}

/* Notes / changelog */
.changelog{border-left:2px solid var(--bg2);padding-left:1.5rem;margin:1.5rem 0}
.changelog-entry{margin-bottom:1.5rem}
.changelog-entry .date{font-family:var(--font-mono);font-size:12px;color:var(--accent);font-weight:400;margin-bottom:.25rem}
.changelog-entry p{font-size:13.5px;color:var(--text2);line-height:1.6}

/* Responsive */
@media(max-width:960px){
  nav{display:none}
  main{padding:2rem 1.5rem}
  .dim-list,.dim-detail-grid{grid-template-columns:1fr}
  .context-grid{grid-template-columns:1fr}
}

/* Smooth scroll */
html{scroll-behavior:smooth}

/* Fade-in */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
section{animation:fadeUp .4s ease both}

/* Bron-fiches — kleine info-icoontjes met popover */
.fiche-wrap{position:relative;display:inline-block;line-height:1;font-weight:400;font-style:normal}
.fiche-btn{background:none;border:none;cursor:pointer;font-size:.85em;color:var(--accent);vertical-align:super;padding:0 1px 0 3px;line-height:1;font-family:var(--font-body);transition:color .15s}
.fiche-btn:hover{color:var(--accent2)}
.fiche-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:50%}
.fiche-popup{display:none;position:absolute;left:0;top:calc(100% + 6px);width:300px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:var(--radius);padding:12px 14px;box-shadow:0 6px 20px rgba(0,0,0,.1);z-index:50;font-size:12.5px;line-height:1.55;color:var(--text2);text-align:left;font-weight:400;font-style:normal}
.fiche-wrap.open .fiche-popup{display:block}
.fiche-popup .fiche-label{display:block;font-size:10.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.fiche-popup .fiche-source{color:var(--text);font-weight:500}
.fiche-popup .fiche-note{display:block;margin-top:6px;font-size:11.5px;color:var(--text3);font-style:italic}
@media (max-width:600px){
  .fiche-popup{position:fixed;left:1rem;right:1rem;top:auto;bottom:1rem;width:auto;max-width:none}
}


/* ===== extra regels uit toolbox-document ===== */

*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#F7F5F0;--bg2:#EDEAE3;--bg3:#fff;
--text:#2A2824;--text2:#5C5A54;--text3:#8A877F;
--accent:#3ea635;--accent2:#2d6a23;--accent-light:#e8f2e5;
--blue:#1d3176;--blue-light:#e5e9f3;
--red:#B5442E;--red-light:#FAEAE7;
--amber:#C49A1E;--amber-light:#FDF3D0;
--coral:#D85A30;
--font-display:'Playfair Display',Georgia,serif;
--font-heading:'Roboto',-apple-system,sans-serif;
--font-body:'Roboto',-apple-system,sans-serif;
--font-mono:'JetBrains Mono',monospace;
--radius:8px;--radius-lg:12px;
}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-light);color:var(--accent2)}

/* Layout */
.wrapper{display:flex;min-height:100vh}
nav{position:sticky;top:0;height:100vh;width:280px;min-width:280px;background:var(--bg2);border-right:1px solid rgba(0,0,0,.06);overflow-y:auto;padding:2rem 0;z-index:10}
nav::-webkit-scrollbar{width:4px}
nav::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:2px}
main{flex:1;max-width:820px;margin:0 auto;padding:3rem 3rem 6rem}

/* Nav styles */
.vic-logo{padding:0 1.25rem 1.25rem;margin-bottom:.5rem;border-bottom:1px solid rgba(0,0,0,.06)}
.vic-logo img{display:block;width:100%;max-width:200px;height:auto}
.vic-wordmark{font-family:var(--font-heading);font-weight:700;font-size:9.5px;letter-spacing:.04em;line-height:1.3}
.vic-wm-green{color:#3ea635}
.vic-wm-blue{color:#1d3176}
.nav-header{padding:0 1.5rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.06);margin-bottom:1rem}
.nav-header h2{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text);line-height:1.3}
.nav-header .tag{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;background:var(--accent);color:#fff;padding:2px 8px;border-radius:3px;margin-top:8px;font-weight:500}
.nav-section{padding:0 1rem;margin-bottom:.25rem}
.nav-section-title{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);padding:.75rem .5rem .25rem;font-weight:600}
.nav-link{display:block;padding:6px 12px;font-size:13px;color:var(--text2);text-decoration:none;border-radius:6px;transition:all .15s;cursor:pointer;line-height:1.4}
.nav-link:hover{background:rgba(0,0,0,.04);color:var(--text)}
.nav-link.active{background:var(--accent-light);color:var(--accent2);font-weight:500}
.nav-link.sub{padding-left:24px;font-size:12.5px}

/* Typography */
h1{font-family:var(--font-display);font-size:42px;font-weight:700;line-height:1.15;letter-spacing:-.02em;margin-bottom:.5rem}
h1 span{color:var(--accent)}
.subtitle{font-size:17px;color:var(--text2);margin-bottom:2.5rem;max-width:580px;line-height:1.6}
h2{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1.25;margin:3.5rem 0 1rem;padding-top:2rem;border-top:1px solid rgba(0,0,0,.06)}
h2:first-of-type{border-top:none;padding-top:0}
h3{font-family:var(--font-heading);font-size:19px;font-weight:700;margin:2rem 0 .75rem;color:var(--text);letter-spacing:-.005em}
h4{font-size:15px;font-weight:600;margin:1.5rem 0 .5rem;color:var(--text)}
p{margin-bottom:1rem}
strong{font-weight:600;color:var(--text)}
em{font-style:italic;color:var(--text2)}

/* Sections */
section{scroll-margin-top:2rem}

/* Huisstijl-additieven: hoekdriehoek bij sectie-openers */
.vic-corner{position:absolute;bottom:0;right:0;width:0;height:0;border-style:solid;border-width:0 0 18px 18px;border-color:transparent transparent #3ea635 transparent;opacity:.55;pointer-events:none}

/* Sluitblok met VIC-tagline */
.vic-closing{background:#1d3176;color:#fff;border-radius:var(--radius-lg);padding:2.5rem 2.25rem;margin:4rem 0 0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.vic-closing .vic-tagline{font-family:var(--font-heading);font-weight:700;font-size:22px;line-height:1.25;letter-spacing:.01em;color:#fff;max-width:380px}
.vic-closing .vic-tagline .url{display:block;font-size:13px;font-weight:400;letter-spacing:.02em;margin-top:.75rem;color:rgba(255,255,255,.7)}
.vic-closing .vic-logo-card{flex-shrink:0}
.vic-closing .vic-logo-card img{display:block;width:180px;height:auto;filter:brightness(0) invert(1)}

/* Decision table */
.decision-grid{display:grid;gap:12px;margin:1.5rem 0 2rem}
.decision-card{background:var(--bg3);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-lg);padding:1rem 1.25rem;transition:box-shadow .2s}
.decision-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.05)}
.decision-card .label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:4px;font-weight:500}
.decision-card .title{font-weight:600;font-size:14px;margin-bottom:4px}
.decision-card .why{font-size:13px;color:var(--text2);line-height:1.5}

/* Akte cards */
.akte{background:var(--bg3);border-radius:var(--radius-lg);border:1px solid rgba(0,0,0,.06);padding:1.75rem 2rem;margin:1.5rem 0 2rem;position:relative;overflow:hidden}
.akte::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%}
.akte.akte-1::before{background:var(--red)}
.akte.akte-2::before{background:var(--amber)}
.akte.akte-3::before{background:var(--accent)}
.akte-number{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;font-weight:400}
.akte.akte-1 .akte-number{color:var(--red)}
.akte.akte-2 .akte-number{color:var(--amber)}
.akte.akte-3 .akte-number{color:var(--accent)}
.akte h3{margin-top:0;font-size:22px}

/* Dimension meters */
.dim-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:1rem 0 1.5rem}
.dim-item{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 10px;border-radius:6px;background:var(--bg)}
.dim-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dim-item .dot.red{background:var(--red)}
.dim-item .dot.green{background:var(--accent)}
.dim-item .dot.amber{background:var(--amber)}
.dim-item .name{font-weight:500;min-width:90px}
.dim-item .desc{color:var(--text2);font-size:12px}

/* Context cards */
.context-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.5rem 0}
.context-card{background:var(--bg3);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-lg);padding:1.25rem;transition:all .2s;cursor:default}
.context-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.context-card .icon{font-size:28px;margin-bottom:.75rem}
.context-card h4{margin:0 0 .5rem;font-size:15px}
.context-card ul{list-style:none;padding:0}
.context-card li{font-size:12.5px;color:var(--text2);padding:3px 0;padding-left:14px;position:relative;line-height:1.4}
.context-card li::before{content:'→';position:absolute;left:0;color:var(--text3);font-size:11px}

/* Bouwsteen tables */
.bouwsteen-table{width:100%;border-collapse:collapse;margin:1rem 0 2rem;font-size:13px}
.bouwsteen-table th{text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);padding:8px 10px;border-bottom:2px solid rgba(0,0,0,.08)}
.bouwsteen-table td{padding:10px;border-bottom:1px solid rgba(0,0,0,.04);vertical-align:top;line-height:1.5}
.bouwsteen-table tr:hover td{background:rgba(0,0,0,.015)}
.bouwsteen-table .tag-up{display:inline-block;font-size:10px;background:var(--accent-light);color:var(--accent2);padding:1px 6px;border-radius:3px;margin:1px;font-weight:500}
.bouwsteen-table .tag-conflict{display:inline-block;font-size:10px;background:var(--red-light);color:var(--red);padding:1px 6px;border-radius:3px;margin:1px;font-weight:500}
.bouwsteen-table .tag-synergy{display:inline-block;font-size:10px;background:var(--blue-light);color:var(--blue);padding:1px 6px;border-radius:3px;margin:1px;font-weight:500}
.bouwsteen-table .euro{display:inline-block;font-size:10px;background:var(--amber-light);color:var(--amber);padding:1px 6px;border-radius:3px;margin-left:4px;font-weight:500}

/* Pijlers */
.vangrail-list{display:grid;gap:8px;margin:1rem 0 2rem}
.vangrail-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--bg3);border:1px solid rgba(0,0,0,.05);border-radius:var(--radius);transition:all .15s}
.vangrail-item:hover{border-color:rgba(0,0,0,.1)}
.vangrail-toggle{width:36px;height:20px;background:var(--bg2);border-radius:10px;flex-shrink:0;position:relative;cursor:pointer;transition:background .2s;border:1px solid rgba(0,0,0,.08)}
.vangrail-toggle.on{background:var(--accent)}
.vangrail-toggle::after{content:'';position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.vangrail-toggle.on::after{transform:translateX(16px)}
.vangrail-info .name{font-weight:600;font-size:14px;margin-bottom:2px}
.vangrail-info .desc{font-size:12.5px;color:var(--text2);line-height:1.5}
.vangrail-info .activates{font-size:11px;color:var(--text3);margin-top:4px}

/* Score / Dimension detail */
.dim-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.5rem 0}
.dim-detail{background:var(--bg3);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-lg);padding:1.25rem}
.dim-detail h4{margin:0 0 .25rem;font-size:14px}
.dim-detail .question{font-size:12.5px;color:var(--text2);font-style:italic;margin-bottom:.5rem}
.dim-detail .measure{font-size:12px;color:var(--text3)}

/* Conflict / synergy */
.relation-card{padding:12px 14px;border-radius:var(--radius);margin:6px 0;font-size:13px;line-height:1.5}
.relation-card.conflict{background:var(--red-light);border-left:3px solid var(--red)}
.relation-card.synergy{background:var(--accent-light);border-left:3px solid var(--accent)}
.relation-card .combo{font-weight:600;margin-bottom:2px}
.relation-card .effect{color:var(--text2)}

/* Scherm layout ASCII */
.schema-block{background:#1a1a1a;color:#c8c8c4;font-family:var(--font-mono);font-size:11.5px;line-height:1.6;padding:1.5rem;border-radius:var(--radius-lg);overflow-x:auto;margin:1.5rem 0;white-space:pre}

/* Info layers table */
.layer-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:13px}
.layer-table th{text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);padding:8px 10px;border-bottom:2px solid rgba(0,0,0,.08)}
.layer-table td{padding:8px 10px;border-bottom:1px solid rgba(0,0,0,.04);vertical-align:top}
/* De scenario-omschrijving in 6.1, 7.1 en 8.1 is het dragende stuk van dat
   hoofdstuk. Gezet als lead: iets groter, ruimer geregeld, met één dunne lijn in
   de accentkleur ernaast. Geen achtergrond en geen kader, want besluit 19-8 houdt
   het accentkader voorbehouden aan de openingssectie, en de tekst mag niets over
   zijn eigen gewicht zeggen (Tim, 20-8). */
.scenario-lead{font-size:16.5px;line-height:1.75;border-left:3px solid var(--accent);
  padding-left:1.1rem;margin:1.25rem 0 1.75rem;color:var(--text)}
.scenario-lead p{margin-bottom:.85rem}
.scenario-lead p:last-child{margin-bottom:0}

/* De scenariotabel staat boven alle drie de hoofdstukken en is één partial.
   Welke rij "u bent hier" is, bepaalt de CSS op het id van de sectie, zodat er
   geen drie bijna gelijke kopieën van de tabel hoeven te bestaan. */
[id$="scenario-1"] .scenario-verschil tr.s1 > td,
[id$="scenario-2"] .scenario-verschil tr.s2 > td,
[id$="scenario-3"] .scenario-verschil tr.s3 > td{background:var(--accent-light);font-weight:600}
[id$="scenario-1"] .scenario-verschil tr.s1 > td:first-child::after,
[id$="scenario-2"] .scenario-verschil tr.s2 > td:first-child::after,
[id$="scenario-3"] .scenario-verschil tr.s3 > td:first-child::after{content:" \2190 dit hoofdstuk";font-weight:400;font-size:11px;color:var(--accent2);white-space:nowrap}


/* Meta badge */
.meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2rem}
.meta-badge{font-size:11px;padding:4px 10px;border-radius:4px;background:var(--bg2);color:var(--text2);font-weight:500}

/* Open questions */
.question-list{display:grid;gap:8px;margin:1rem 0}
.question-item{padding:12px 14px;background:var(--bg3);border:1px solid rgba(0,0,0,.05);border-radius:var(--radius);font-size:13px}
.question-item .q{font-weight:600;margin-bottom:2px}
.question-item .ctx{color:var(--text2);font-size:12.5px}

/* Notes / changelog */
.changelog{border-left:2px solid var(--bg2);padding-left:1.5rem;margin:1.5rem 0}
.changelog-entry{margin-bottom:1.5rem}
.changelog-entry .date{font-family:var(--font-mono);font-size:12px;color:var(--accent);font-weight:400;margin-bottom:.25rem}
.changelog-entry p{font-size:13.5px;color:var(--text2);line-height:1.6}

/* Responsive */
@media(max-width:960px){
  nav{display:none}
  main{padding:2rem 1.5rem}
  .dim-list,.dim-detail-grid{grid-template-columns:1fr}
  .context-grid{grid-template-columns:1fr}
}

/* Smooth scroll */
html{scroll-behavior:smooth}

/* Fade-in */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
section{animation:fadeUp .4s ease both}

/* Bron-fiches — kleine info-icoontjes met popover */
.fiche-wrap{position:relative;display:inline-block;line-height:1;font-weight:400;font-style:normal}
.fiche-btn{background:none;border:none;cursor:pointer;font-size:.85em;color:var(--accent);vertical-align:super;padding:0 1px 0 3px;line-height:1;font-family:var(--font-body);transition:color .15s}
.fiche-btn:hover{color:var(--accent2)}
.fiche-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:50%}
.fiche-popup{display:none;position:absolute;left:0;top:calc(100% + 6px);width:300px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:var(--radius);padding:12px 14px;box-shadow:0 6px 20px rgba(0,0,0,.1);z-index:50;font-size:12.5px;line-height:1.55;color:var(--text2);text-align:left;font-weight:400;font-style:normal}
.fiche-wrap.open .fiche-popup{display:block}
.fiche-popup .fiche-label{display:block;font-size:10.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.fiche-popup .fiche-source{color:var(--text);font-weight:500}
.fiche-popup .fiche-note{display:block;margin-top:6px;font-size:11.5px;color:var(--text3);font-style:italic}
@media (max-width:600px){
  .fiche-popup{position:fixed;left:1rem;right:1rem;top:auto;bottom:1rem;width:auto;max-width:none}
}

/* toolbox-uiting */
.ts{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--accent);margin:1.4rem 0 .4rem}
section table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.55;margin:1rem 0}
section table th{text-align:left;border-bottom:2px solid rgba(0,0,0,.15);padding:.4rem .6rem .4rem 0}
section table td{border-bottom:1px solid rgba(0,0,0,.07);padding:.4rem .6rem .4rem 0;vertical-align:top;color:var(--text2)}
section h3{scroll-margin-top:80px}