/* CyberChef-achtige stijl: vlak, vierkant, compact, systeemfont. Wordt na style.css geladen. */
:root{--cc-blue:#1976d2}
html[data-theme="light"]{--bg:#fff;--bg2:#fafafa;--card:#fff;--line:#ddd;--line2:#ccc;--line3:#999;--line4:#1976d2;--line5:#ccc;--hair:#ddd;--soft:#f5f5f5;--btn:#eee;--btn-h:#e2e2e2;--ph:#f0f0f0;--text:#333;--muted:#666;--muted2:#424242;--muted3:#888;--muted4:#888;--accent:#1976d2;--blue:#1976d2;--link:#1976d2;--link-h:#0d47a1}
html[data-theme="light"] .btn-primary,html[data-theme="light"] .chip.is-active,html[data-theme="light"] .num,html[data-theme="light"] .pagination .current{color:#fff}
body{font:14px/1.45 -apple-system,"system-ui","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.disp{font-family:inherit}
/* alles vlak en vierkant */
.card,.btn,.btn-sm,.chip,.tile,.tool,.cta,.note,.search,.form,.media,.product,.hero-card,.mini .media,.shop-item .ph,.gallery a,.setup-main .hero-media,.article-media,.prose img,.prose code,.prose pre,input,select,textarea,button,.settings-panel{border-radius:0!important;box-shadow:none!important}
.chip{height:28px;padding:0 10px;font-size:13px}
.chip.is-active{font-weight:400}
.btn{height:32px;padding:0 14px;font-weight:400}
.header-actions .btn{height:32px;padding:0 12px}
.btn-sm{height:28px}
/* balk bovenaan, zoals de CyberChef-navigatie */
.site-header{background:var(--bg2);border-bottom:1px solid var(--line)}
.site-header .wrap{padding-top:6px;padding-bottom:6px;gap:8px 24px}
.logo{gap:8px}.logo svg{width:26px;height:26px}.logo span{font-size:18px;font-weight:600}
.nav ul{gap:0 4px}
.nav a{padding:8px 10px;font-size:14px}
.nav a:hover,.nav .current-menu-item a{background:#d9edf7;color:#3a87ad}
/* kaarten als panelen met vlakke rand */
.card{background:var(--card)}
a.card:hover,.tool.is-live{border-color:var(--cc-blue)}
.tool,.tile{padding:12px 14px;gap:4px}
.tool strong,.tile strong{font-size:15px;font-weight:600}
.tool .sub,.tile span{font-size:13px}
.grid,.tools{gap:10px}
.tools{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.tiles{gap:10px}
/* compacte koppen en ruimte */
.section{padding:28px 0}
.hero{padding-top:28px;padding-bottom:24px;gap:24px}
.hero h1{font-size:clamp(26px,4vw,34px);letter-spacing:0;font-weight:600}
.hero p{font-size:15px}
.section-head{margin-bottom:14px}
.section-head h1,.section-head h2{font-size:22px;font-weight:600}
.page-head{padding:20px 0 14px}
.page-head h1{font-size:clamp(24px,4vw,30px);letter-spacing:0;font-weight:600}
.kicker,.mono{font-size:11px}
.prose{font-size:15px;line-height:1.6}
.site-footer{margin-top:12px;background:var(--bg2)}
.site-footer .wrap{padding-top:20px;padding-bottom:20px;font-size:13px}
.wrap{padding:0 16px}
input,select,textarea{border:1px solid var(--line2)}
/* titel en zoekbalk */
.page-head h1,.hero h1,.home-head h1{color:var(--text)}
.home-head{text-align:center}
.hs-label{font-family:inherit;font-size:15px;font-weight:600;margin:0 0 8px}
.home-search{max-width:720px;margin:4px auto 16px}
.hs-box{height:36px;padding:0 10px;gap:8px;border:1px solid var(--line2);border-radius:0!important}
.hs-box svg{width:16px;height:16px}
.hs-box input{font-size:14px}
.hs-box:focus-within{border-color:var(--cc-blue);box-shadow:none}
.hs-key{border-radius:0;font-size:12px;padding:0 6px}
.hs-sugg{gap:6px;margin-top:8px}
.hs-results{border-radius:0!important;box-shadow:0 2px 6px rgba(0,0,0,.15)!important;padding:0}
.hs-item{border-radius:0!important;padding:8px 10px}
.hs-item strong{font-size:14px}
.hs-item.is-active,.hs-item:hover{background:#d9edf7}
.hs-tag{border-radius:0}
html[data-theme="light"] .hs-item.is-active,html[data-theme="light"] .hs-item:hover{color:#3a87ad}
/* tool- en kennisbankpagina's */
*{border-radius:0!important}
.num,.theme-toggle,.lang-dot{border-radius:50%!important}
body.gs-reader-page .page-head h1,body.gs-reader-page .tool-pane .page-head h1{color:var(--text);font-size:clamp(22px,3vw,28px);letter-spacing:0;font-weight:600}
.reader-nav a{font-size:14px;padding:5px 10px}
.reader-nav .nav-group{color:var(--muted)}
.reader-nav a.is-active,html[data-theme="light"] .reader-nav a.is-active{background:#d9edf7;color:#3a87ad}
.reader-nav a.is-active .nav-count{color:#3a87ad}
.reader-nav a:hover{background:var(--soft)}
.prose h1,.prose h2,.prose h3,.prose h4{font-family:inherit;font-weight:600}
.prose h2{font-size:20px}.prose h3{font-size:16px}
.reader-head h2,body.gs-reader-page .reader-head h2{font-family:inherit;font-size:clamp(20px,2.4vw,24px);font-weight:600;line-height:1.25;letter-spacing:0;margin:0 0 8px}
/* donker: blauw accent in plaats van oranje */
html:not([data-theme="light"]){--accent:#4da3ff;--link:#7cc4ff;--link-h:#b5dcff;--cc-blue:#4da3ff}
html:not([data-theme="light"]) .btn-primary,html:not([data-theme="light"]) .chip.is-active,html:not([data-theme="light"]) .num{color:#06121f}
/* logo: donker blok met gs */
.logo svg{width:36px;height:36px}
.logo .disp,.logo span{font-family:ui-monospace,Menlo,Consolas,"Courier New",monospace;font-weight:700;font-size:20px;letter-spacing:-.01em}
/* Linuxdistributies vergeleken: kaarten in een rij delen hun rijen (kop, feiten, sterk/zwak, downloads staan op één lijn), alle knoppen krijgen dezelfde vorm */
@supports (grid-template-rows:subgrid){
  .dist-grid{row-gap:0}
  .dist-grid>.dist{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:12px;margin-bottom:18px;align-content:start}
}
.dist-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-self:start;margin:0;padding-top:0}
.dist-dl .btn{width:100%;height:auto;min-height:34px;padding:5px 10px;text-align:center;white-space:normal;line-height:1.25;font-size:14px;font-weight:400}
.dist-dl .btn-primary{grid-column:1/-1}
.dist-dl:has(.btn-primary) .btn-sm:last-child:nth-child(even){grid-column:1/-1}
.dist-dl:not(:has(.btn-primary)) .btn-sm:last-child:nth-child(odd){grid-column:1/-1}
.dist-dl > :not(.btn){grid-column:1/-1}
.dist-dl .btn{gap:.35em}
/* een kleine hoofdknop (.btn-sm.btn-primary): .btn-sm overschreef de achtergrond van .btn-primary */
.btn.btn-sm.btn-primary{background:var(--accent);color:#fff}
.btn.btn-sm.btn-primary:hover{background:var(--accent);color:#fff;filter:brightness(1.08)}
html:not([data-theme="light"]) .btn.btn-sm.btn-primary,html:not([data-theme="light"]) .btn.btn-sm.btn-primary:hover{color:#06121f}

/* galerij met screenshots op de distributiepagina */
dialog.shots{width:min(96vw,1100px);max-height:96vh;padding:0;border:1px solid var(--line2);background:var(--bg);color:var(--text)}
dialog.shots::backdrop{background:rgba(0,0,0,.65)}
.shots-bar{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--bg2)}
.shots-title{font-size:15px}.shots-count{margin-left:auto;font-size:13px}
.shots-x{height:28px;padding:0 10px}
.shots-stage{position:relative;display:flex;align-items:center;justify-content:center;background:#111}
.shots-stage img{display:block;max-width:100%;max-height:calc(96vh - 52px);width:auto;height:auto;cursor:pointer}
.shots-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;padding:0;font-size:30px;line-height:1;opacity:.9}
.shots-prev{left:8px}.shots-next{right:8px}
@media (max-width:760px){dialog.shots{width:100vw;max-width:100vw;max-height:100dvh;height:auto}.shots-nav{width:40px;height:56px}.shots-stage img{max-height:calc(100dvh - 52px)}}