/* Methodepaneel (richting D, 2026-09-30). Geladen alleen op artikelen met _fable_methode.
   Tokens: methodepaneel-tokens.css. Reference lock SuperHi Basic Income (Refero 88dceb46):
   vast merkpaneel 30/70 over de volle hoogte, wit inhoudsveld, 1px lijnen in de merkkleur, omlijnde
   secundaire knoppen, gestippeld paneelbeeld, één easing, geen schaduw. Geleend: CTA-geel als enige
   gevulde knop (Sandland Sleep f46e6717), mono-bewijstag (Integrated Biosciences 32add4f9).
   Contrast: wit op paneel 6,75:1 · dim op paneel 4,76:1 · inkt op geel 10,93:1 · geel op paneel 4,67:1. */

/* ---------- Layout: paneel links, artikel rechts (>= 1100px) ---------- */
body.has-methodepaneel #cvmain{display:grid; grid-template-columns:var(--su-panel-w) minmax(0,1fr); align-items:start;}
body.has-methodepaneel #cvmain > .mp{grid-column:1;}
body.has-methodepaneel #cvmain > #cvart{grid-column:2; min-width:0;}
/* Het paneel neemt merk, zoeken en menu over; de gewone kop verdwijnt op het brede scherm. */
body.has-methodepaneel #sustiro-chrome .s-header{display:none;}
/* Eén inhoudsopgave, niet twee (logboek besluit 5): de inline-toc van het artikel gaat uit. */
body.has-methodepaneel #cvart .toc{display:none;}
/* Wit inhoudsveld (besluit 30-09, geen crème). */
body.has-methodepaneel #cvart{background:var(--su-bg);}

/* ---------- Paneel ---------- */
.mp{position:sticky; top:0; height:100vh; height:100dvh; box-sizing:border-box; background-color:var(--su-panel); color:#fff;
    font-family:var(--su-font); display:flex; flex-direction:column;
    /* stippen: het abstracte, gestippelde paneelbeeld van SuperHi, hier als textuur; fase 3 tekent het zenuwstelsel */
    background-image:radial-gradient(rgba(255,255,255,.10) 1.2px, transparent 1.3px); background-size:9px 9px; background-position:0 100%;}
.mp *, .mp *::before, .mp *::after{box-sizing:border-box;}
/* fable-chrome.css zet #sustiro-chrome a op groen met onderstreping en de focusring op navy; op het navy
   paneel is dat onleesbaar. Zelfde specificiteit (id) nodig om het te winnen. */
#sustiro-chrome .mp a, #sustiro-chrome .mp a:hover{color:#fff; text-decoration:none;}
#sustiro-chrome .mp :focus-visible{outline:2px solid #fff; outline-offset:2px; border-radius:4px;}
/* [hidden] moet winnen van display:flex/grid op de rijen die per laag wisselen. */
.mp [hidden]{display:none !important;}
.mp-body{display:flex; flex-direction:column; gap:18px; padding:22px 22px 18px; overflow-y:auto; flex:1 1 auto; min-height:0;}
.mp-sect{display:grid; gap:8px;}
.mp-lbl{font-family:var(--su-mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--su-panel-dim);}

/* 1 · merk, zoeken, menu */
.mp-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
#sustiro-chrome .mp-brand{display:inline-flex; color:#fff; text-decoration:none; font-weight:700; font-size:22px; letter-spacing:-.01em;}
.mp-brand .s-logo{height:28px; width:auto; display:block;}
.mp-brand .s-logo__dot{fill:#fff;} /* de koperen punt uit fable-logo.php is terracotta; op het paneel wit (rolregels) */
.mp-ic{display:flex; gap:6px; position:relative;}
.mp-dd > summary{list-style:none; cursor:pointer; background:transparent; border:1px solid rgba(255,255,255,.55); color:#fff;
    border-radius:var(--su-r-pil); font:500 14px/1 var(--su-font); padding:8px 12px; min-height:32px; display:inline-flex; align-items:center;}
.mp-dd > summary::-webkit-details-marker{display:none;}
.mp-dd > summary:hover, .mp-dd[open] > summary{background:rgba(255,255,255,.12); border-color:#fff;}
.mp-dd__panel{position:absolute; right:0; top:calc(100% + 8px); z-index:5; min-width:220px; max-width:calc(100vw - 32px); background:var(--su-bg); color:var(--su-ink);
    border:1px solid var(--su-panel); border-radius:var(--su-r-card); padding:10px;}
.mp-dd__panel ul{list-style:none; margin:0; padding:0;}
.mp-dd__panel li + li{border-top:1px solid var(--su-line);}
#sustiro-chrome .mp-dd__panel .s-nav__link{display:block; padding:10px 8px; color:var(--su-ink); text-decoration:none; font-size:16px;}
#sustiro-chrome .mp-dd__panel .s-nav__link:hover{color:var(--su-link); text-decoration:underline;}
.mp-dd__panel form{display:flex; gap:6px;}
.mp-dd__panel input[type="search"], .mp-dd__panel input[type="text"]{flex:1 1 auto; min-width:0; font:16px var(--su-font); padding:8px 10px; border:1px solid var(--su-panel); border-radius:8px; color:var(--su-ink); background:var(--su-bg);}
.mp-dd__panel button, .mp-dd__panel input[type="submit"]{font:500 15px var(--su-font); padding:8px 12px; border:1px solid var(--su-panel); background:transparent; color:var(--su-link); border-radius:8px; cursor:pointer;}
#sustiro-chrome .mp-dd__panel :focus-visible{outline-color:var(--su-panel);}
.mp-dd__panel label, .mp-dd__panel .screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* 2 · Methode-meter = inhoudsopgave */
.mp-meter{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; position:relative;}
.mp-meter::before{content:""; position:absolute; left:9px; top:14px; bottom:14px; width:1px; background:rgba(255,255,255,.35);}
#sustiro-chrome .mp-laag__btn{display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:start; width:100%; padding:8px 0; color:var(--su-panel-dim); text-decoration:none;
    transition:color var(--su-t-layer) var(--su-ease);}
.mp-laag__btn--leeg{opacity:.55;}
.mp-dot{width:19px; height:19px; border-radius:50%; border:1.5px solid var(--su-panel-dim); background:var(--su-panel); margin-top:3px; position:relative; z-index:1;
    transition:background-color var(--su-t-layer) var(--su-ease), border-color var(--su-t-layer) var(--su-ease);}
.mp-laag__nm{font-weight:600; font-size:17px; line-height:1.3;}
#sustiro-chrome .mp-laag.is-on .mp-laag__btn{color:#fff;}
.mp-laag.is-on .mp-dot{background:#fff; border-color:#fff;}
.mp-laag.is-done .mp-dot{background:var(--su-panel-dim); border-color:var(--su-panel-dim);}
.mp-toc, .mp-toc ul{list-style:none; margin:0; padding:0;}
.mp-toc{margin:2px 0 6px 32px; display:flex; flex-direction:column; gap:6px; font-size:14px; line-height:1.4;}
.mp-toc ul{margin:4px 0 0 14px; display:flex; flex-direction:column; gap:4px;}
#sustiro-chrome .mp-toc a{color:var(--su-panel-dim); text-decoration:none;}
#sustiro-chrome .mp-toc a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px;}
#sustiro-chrome .mp-toc a.is-cur{color:#fff; text-decoration:underline; text-underline-offset:3px;}
/* Met JavaScript klapt alleen de actieve laag open; zonder staat alles open. */
.mp.js .mp-laag:not(.is-on) .mp-toc{display:none;}
.mp-prog{height:3px; background:rgba(255,255,255,.25); border-radius:2px; margin:4px 0 0 32px; overflow:hidden;}
.mp-prog i{display:block; height:100%; width:0; background:#fff;}
.mp.js .mp-laag:not(.is-on) .mp-prog{display:none;}
.mp:not(.js) .mp-prog{display:none;}

/* 3 · bewijs in deze laag (mono-tag, tint + donkere tekst) */
.mp-ev{border-top:1px solid rgba(255,255,255,.3); padding-top:14px;}
.mp-ev__row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px;}
.mp-tag{font-family:var(--su-mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:var(--su-r-tag); font-weight:500; line-height:1.6;}
.mp-tag--sterk{background:var(--su-ev-sterk-tint); color:var(--su-ev-sterk-txt);}
.mp-tag--redelijk{background:var(--su-ev-redelijk-tint); color:var(--su-ev-redelijk-txt);}
.mp-tag--wisselend{background:var(--su-ev-wisselend-tint); color:var(--su-ev-wisselend-txt);}
.mp-tag--beperkt{background:var(--su-ev-beperkt-tint); color:var(--su-ev-beperkt-txt);}
.mp-tag--geen{background:transparent; border:1px solid var(--su-panel-dim); color:#fff; text-transform:none; letter-spacing:.02em;}

/* 4 · wanneer niet wachten: tekstlink, nooit gevuld (besluit 7) */
#sustiro-chrome .mp-spoed{display:flex; align-items:center; gap:8px; color:#fff; font-weight:600; font-size:15px; text-decoration:underline; text-underline-offset:3px; margin-top:4px;}
.mp-spoed::before{content:""; width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.3); flex:none;}

/* 5 · één volgende stap: de enige gele knop op het scherm (besluit 8) */
.mp-next{margin-top:auto;}
.mp-next__item{display:grid; gap:8px;}
.mp-next small{font-size:14px; color:var(--su-panel-dim); line-height:1.4;}
/* .mp a (regel 27) weegt zwaarder dan .mp-cta en maakte de knoptekst wit op geel; .mp a.mp-cta weegt weer zwaarder. 01-10-2026 */
#sustiro-chrome .mp a.mp-cta{display:block; text-align:center; background:var(--su-cta); color:var(--su-ink); font-weight:600; font-size:16px; border-radius:var(--su-r-btn); padding:13px 16px; text-decoration:none; min-height:44px;
    transition:transform var(--su-t-layer) var(--su-ease);}
#sustiro-chrome .mp a.mp-cta:hover{color:var(--su-ink); transform:translateY(-1px);}
.mp-cta:focus-visible{outline:2px solid #fff; outline-offset:3px;}

/* 6 · byline */
.mp-byl{font-size:13px; color:var(--su-panel-dim); line-height:1.45; border-top:1px solid rgba(255,255,255,.3); padding-top:12px;}
#sustiro-chrome .mp-byl a{color:#fff; text-decoration:underline; text-underline-offset:3px;}

/* ---------- Artikelzijde ---------- */
/* Laag-eyebrow als eigen element vóór de eerste H2 van elke laag (tokenvoorstel §2); geen deel van de koptekst. */
body.has-methodepaneel #cvart .body p.mp-lyr{font-family:var(--su-mono); font-size:13px; line-height:1.4; letter-spacing:.06em; text-transform:uppercase; color:var(--su-panel); font-weight:500; margin:36px 0 0;}
body.has-methodepaneel #cvart .body p.mp-lyr + h2{margin-top:6px;}
body.has-methodepaneel #cvart .body h2, body.has-methodepaneel #cvart .body h3{scroll-margin-top:16px;}
body.has-methodepaneel #cvart .body blockquote.alarmblok{scroll-margin-top:16px; border-color:var(--su-alarm);}
body.has-methodepaneel #cvart .body blockquote.alarmblok:focus{outline:2px solid var(--su-alarm); outline-offset:3px;}

/* ---------- Mobiele balk (< 1100px): laag + voortgang, tik opent het paneel als blad ---------- */
.mp-bar{display:none;}
@media (max-width:1099.98px){
	body.has-methodepaneel #cvmain{display:block;}
	body.has-methodepaneel #sustiro-chrome .s-header{display:block;}
	body.has-methodepaneel #cvart .body h2, body.has-methodepaneel #cvart .body h3, body.has-methodepaneel #cvart .body blockquote.alarmblok{scroll-margin-top:64px;}
	.mp{position:sticky; top:0; z-index:40; height:auto; background-image:none; display:block;}
	.mp-bar{display:flex; align-items:center; gap:10px; width:100%; min-height:48px; background:var(--su-panel); color:#fff; border:0; padding:10px 16px; text-align:left;
	    font:500 15px/1.3 var(--su-font); cursor:pointer;}
	.mp-bar__dot{width:10px; height:10px; border-radius:50%; background:#fff; flex:none;}
	.mp-bar__t{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	.mp-bar__p{width:48px; height:3px; background:rgba(255,255,255,.3); border-radius:2px; overflow:hidden; flex:none;}
	.mp-bar__p i{display:block; height:100%; background:#fff; width:0;}
	.mp-bar__chev{width:9px; height:9px; border-right:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:rotate(45deg); margin:-4px 2px 0; flex:none; transition:transform var(--su-t-layer) var(--su-ease);}
	.mp-bar[aria-expanded="true"] .mp-bar__chev{transform:rotate(225deg); margin-top:4px;}
	.mp-body{display:none;}
	/* Open: het hele paneel wordt het blad, met de balk bovenaan als sluitknop (tik of Escape). */
	.mp.is-open{position:fixed; inset:0; z-index:60; height:100vh; height:100dvh; display:flex; flex-direction:column;
	    background-image:radial-gradient(rgba(255,255,255,.10) 1.2px, transparent 1.3px); background-size:9px 9px;}
	.mp.is-open .mp-bar{flex:none;}
	.mp.is-open .mp-body{display:flex; flex:1 1 auto; min-height:0; overflow-y:auto; padding:20px 16px 24px;}
	.mp-next{margin-top:8px;}
	body.mp-lock{overflow:hidden;}
}
@media (max-width:759.98px){
	.mp.is-open .mp-body{padding:18px 16px 24px;}
}