/* Indeling van alle pagina's: balk bovenaan, menu links, inhoud rechts (zelfde opzet als de app). Wordt als laatste geladen. */
:root{--bar:#fafafa;--item:#d9edf7;--item-h:#c4e3f3;--item-t:#3a87ad;--cat:#3a87ad;--top-h:48px;--side-w:300px}
html[data-theme="dark"]{--bar:#1c2024;--item:#1f3447;--item-h:#274560;--item-t:#9fd2ff;--cat:#7cc4ff}
.gs-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;height:var(--top-h);padding:0 14px;background:var(--bar);border-bottom:1px solid var(--line)}
.gs-top .logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);flex:none}
.gs-top .logo span{font:700 19px ui-monospace,Menlo,Consolas,"Courier New",monospace;letter-spacing:-.01em}
.gs-top .logo b{color:inherit}
.gs-top .logo svg{width:32px;height:28px}
#ss{flex:1;min-width:0;display:flex;justify-content:center;overflow:hidden}
#ss .status-strip{display:flex;align-items:center;flex-wrap:nowrap;gap:0 10px;white-space:nowrap;padding:0;margin:0;border:0;background:none;font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--muted);text-decoration:none}
#ss .status-strip:hover{color:var(--text)}
#ss .status-strip-dot{width:8px;height:8px;border-radius:50%!important;background:var(--muted);flex:none}
#ss .is-ok .status-strip-dot{background:#3fb950;box-shadow:0 0 0 3px rgba(63,185,80,.18)!important}
#ss .is-warn .status-strip-dot{background:#d29922}
#ss .is-bad .status-strip-dot{background:#f85149}
#ss .status-strip-bar{width:1px;height:12px;background:var(--line);flex:none}
#ss .is-ok .status-strip-stats,#ss .is-ok .status-strip-bar,#ss .is-ok .status-strip-sep,#ss .is-ok .status-strip-more,#ss .is-ok .status-strip-sep+span{display:none}
.gs-top .header-actions{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto}
#ss+.header-actions{margin-left:0}
.gs-search,.gs-top .theme-toggle{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--muted);padding:0;cursor:pointer}
.gs-search:hover,.gs-top .theme-toggle:hover{background:var(--item);color:var(--item-t)}
.gs-search svg,.gs-top .theme-toggle svg{width:17px;height:17px}
.gs-burger{display:none;border:0;background:none;color:var(--link);font-size:20px;line-height:1;padding:0 4px;cursor:pointer}
.gs-app{display:flex;align-items:flex-start}
.gs-side{width:var(--side-w);flex:none;position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h));overflow-y:auto;border-right:1px solid var(--line);background:var(--bg);scrollbar-width:thin}
.gs-col{flex:1;min-width:0}
.gs-col .wrap{max-width:1040px;margin:0 auto}
.gs-menu-home{display:block;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--link);text-decoration:none;font-weight:600}
.gs-menu-home:hover{background:var(--bar)}
.gs-menu-head{padding:8px 12px;background:var(--bar);border-bottom:1px solid var(--line);font:600 11px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gs-fold{border-bottom:1px solid var(--line)}
.gs-fold>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 9px;border-left:3px solid transparent;font-weight:600;color:var(--cat);cursor:pointer;background:var(--bg)}
.gs-fold>summary::-webkit-details-marker{display:none}
.gs-fold>summary::before{content:"";width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .12s;flex:none}
.gs-fold[open]>summary::before{transform:rotate(90deg)}
.gs-fold>summary:hover{background:var(--bar)}
.gs-fold[open]{border-left:3px solid var(--link);background:var(--item)}
.gs-fold[open]>summary{background:var(--bar);border-left:0;padding-left:9px}
.gs-fold ul{list-style:none;margin:0;padding:0}
.gs-fold li a{display:block;padding:7px 12px 7px 29px;color:var(--item-t);text-decoration:none;border-bottom:1px solid var(--bg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-fold li a:hover{background:var(--item-h)}
.gs-fold li a.is-active{background:var(--link);color:#fff}
.gs-sub{padding:6px 12px 2px 29px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.gs-col .site-footer{margin-top:24px}
.tools-shell .reader-main{display:block}
.tool-head{padding-top:20px}
@media (max-width:900px){
	.gs-burger{display:inline-block}
	/* telefoon: alleen het statusbolletje, links van het envelopje */
	#ss{justify-content:flex-end}
	#ss .status-strip>:not(.status-strip-dot){display:none!important}
	#ss .status-strip{padding:10px 8px}
	.gs-top .header-actions{margin-left:auto}
	.gs-top #ss + .header-actions{margin-left:0}
	.gs-side{position:fixed;z-index:35;left:0;top:var(--top-h);bottom:0;height:auto;width:min(320px,88vw);transform:translateX(-100%);visibility:hidden;transition:transform .18s;box-shadow:4px 0 18px rgba(0,0,0,.25)}
	body.gs-menu-open .gs-side{transform:none;visibility:visible}
	body.gs-menu-open::after{content:"";position:fixed;inset:var(--top-h) 0 0 0;background:rgba(0,0,0,.4);z-index:30}
	.gs-top .logo span{font-size:17px}
}
/* in de app (iframe) blijft alleen de inhoud over */
html.gs-in-app .gs-top,html.gs-in-app .gs-side{display:none}
html.gs-in-app .gs-app,html.gs-in-app .gs-col{display:block}
.gs-col .page-head,.gs-col .tool-head,.gs-col .home-head{text-align:left}
.gs-col .tool-head p{margin-left:0}
.gs-col .status-strip{display:none}
/* USB-stick maken: alle downloadknoppen even groot */
.usb .dist-dl{display:flex;flex-wrap:wrap;gap:8px}
.usb .dist-dl .btn,.usb .dist-dl .btn-primary{flex:0 0 360px;width:360px;max-width:100%;height:46px;min-height:46px}
/* contactpagina en mail-icoon */
.gs-mail{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none}
.gs-mail:hover{background:var(--item);color:var(--item-t)}
.gs-mail svg{width:17px;height:17px}
.contact-form{padding:20px;margin:0 0 16px}
.contact-form .field{margin:0 0 14px}
.contact-form label{display:block;margin:0 0 4px;font-weight:600}
.contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{width:100%;padding:8px 10px;font:inherit}
.contact-form textarea{resize:vertical}
.contact-status{margin:12px 0 0;padding:8px 10px;border:1px solid var(--line)}
.contact-status.is-bad{border-color:#f85149;color:#f85149}
.contact-note{margin:12px 0 0;font-size:13px}
.contact-direct{margin:0 0 40px}
/* contactpagina: even breed als het startscherm van de app (720 px) en gecentreerd, ook in de app zelf */
.contact-page,html.gs-in-app .contact-page{max-width:720px!important;margin-left:auto;margin-right:auto;box-sizing:border-box}
html.gs-in-app .contact-page{padding:28px 32px}

/* De pagina scrolt gewoon mee: de oude vaste indeling (body op 100vh met overflow:hidden) hoort niet bij de nieuwe indeling met menu links. */
@media (min-width:901px) and (min-height:560px){
	body.gs-reader-page{height:auto!important;min-height:100vh;overflow:visible!important;display:block!important}
}

/* kennisbank: knoppenrij blijft staan, artikel in het midden */
.kb-chips{padding-top:20px}
.kb-chips .chips{justify-content:center;margin-bottom:0}
.reader-pane .prose,.reader-pane .reader-head,.narrow .prose,html.gs-in-app .prose{margin-left:auto;margin-right:auto}
.reader-pane .reader-head{max-width:720px}
html.gs-in-app .kb-chips{max-width:none!important}
html.gs-in-app article.narrow{padding-top:8px}
/* hele smalle telefoons (320 px): bovenbalk iets compacter zodat alles past */
@media (max-width:360px){.gs-top{gap:6px;padding:0 6px}#ss .status-strip{padding:10px 4px}}