/* NIS2-dekkingscheck — opmaak van de interactieve dekkingskaart.

   Alles staat onder .nc: die wrapper houdt de eigen klassenamen (.wrap, .stat,
   .chip, .modal) uit de weg van style.css, en de variabelen staan op .nc in
   plaats van :root zodat ze buiten de check de sitetokens niet overschrijven.

   Zes namen botsten alsnog: hero, accent, btn, cta, active en open bestaan ook
   in style.css. Een wrapper beschermt alleen tegen wat je zelf declareert — de
   min-height en text-align van de sitehero lekten er dwars doorheen en rekten
   de kop uit. Die zes heten hier nc-*, ook in de template en in nis2-check.js. */

.nc{
  --navy:#071940; --navy2:#0d285c; --orange:#d04a02; --ink:#16233d;
  --muted:#5a6a85; --line:#e2e7f0; --bg:#f6f8fc; --card:#ffffff; --white:#fff;
  --sterk:#0f9d8a; --matig:#e0a020; --zwak:#d0552a; --geen:#8894a8;
  --radius:16px; --shadow:0 1px 3px rgba(7,25,64,.06),0 8px 30px rgba(7,25,64,.06);
}
.nc *{box-sizing:border-box;margin:0;padding:0}
.nc{font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
.nc .wrap{max-width:1000px;margin:0 auto;padding:0 20px}
.nc a{color:var(--orange);text-decoration:none}
/* top bar */

/* hero */



.nc .nc-hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%);color:#fff;
  padding:52px 0 130px;position:relative}
.nc .kicker{color:var(--orange);font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  font-size:13px;margin-bottom:16px}
.nc .nc-hero h1{font-size:clamp(28px,5.4vw,46px);line-height:1.08;font-weight:900;letter-spacing:-.02em;max-width:16em}
.nc .nc-hero p.lede{color:#c6d2e8;font-size:clamp(16px,2.4vw,20px);margin-top:18px;max-width:34em}
/* stat tiles overlap */



.nc .stats{margin-top:-92px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  position:relative;z-index:2}
.nc .stat{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 20px;border:1px solid var(--line)}
.nc .stat .n{font-size:clamp(30px,6vw,44px);font-weight:900;color:var(--navy);letter-spacing:-.02em;line-height:1}
.nc .stat .n .u{font-size:.5em;color:var(--muted);font-weight:800}
.nc .stat .l{color:var(--muted);font-size:14px;margin-top:8px;font-weight:600}
.nc .stat.nc-accent .n{color:var(--orange)}
.nc .fwsel{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.nc .fwlbl{font-weight:800;color:var(--navy);font-size:14px;margin-right:4px}
.nc .fw{font:inherit;font-weight:700;font-size:14px;padding:9px 15px;border-radius:99px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.nc .fw.nc-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.nc .fw[disabled]{opacity:.6;cursor:default}
.nc .fw em{font-style:normal;font-weight:700;color:var(--muted);font-size:11px;
  background:#eef1f7;padding:1px 6px;border-radius:99px;margin-left:5px}

.nc section{padding:44px 0}
.nc .sec-h{font-size:clamp(21px,3.4vw,28px);font-weight:900;color:var(--navy);letter-spacing:-.01em}
.nc .sec-sub{color:var(--muted);margin-top:8px;max-width:44em}
/* legend */



.nc .legend{display:flex;flex-wrap:wrap;gap:16px;margin:22px 0 8px}
.nc .legend span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink)}
.nc .dot{width:14px;height:14px;border-radius:4px;display:inline-block}
.nc .d-sterk{background:var(--sterk)} .nc .d-matig{background:var(--matig)}
.nc .d-zwak{background:var(--zwak)} .nc .d-geen{background:var(--geen)}
/* domain groups + control chips */



.nc .domain{margin-top:26px}
.nc .domain h3{font-size:15px;font-weight:800;color:var(--navy);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.nc .domain h3 .cnt{font-size:12px;color:var(--muted);font-weight:700;text-transform:none;letter-spacing:0}
.nc .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.nc .chip{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--geen);
  border-radius:12px;padding:14px 15px;cursor:pointer;transition:transform .12s,box-shadow .12s;
  text-align:left;font:inherit;color:inherit;width:100%}
.nc .chip:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.nc .chip:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.nc .chip.s-Sterk{border-left-color:var(--sterk)} .nc .chip.s-Matig{border-left-color:var(--matig)}
.nc .chip.s-Zwak{border-left-color:var(--zwak)} .nc .chip.s-Geen{border-left-color:var(--geen)}
.nc .chip .cid{font-weight:900;color:var(--navy);font-size:13px}
.nc .chip .cnm{font-size:14px;font-weight:600;margin:3px 0 10px;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.nc .bar{height:7px;border-radius:99px;background:#eef1f7;overflow:hidden}
.nc .bar i{display:block;height:100%;border-radius:99px}
.nc .chip .meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;
  font-size:12px;font-weight:700;color:var(--muted)}
.nc .badge{font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px;color:#fff}
.nc .b-Sterk{background:var(--sterk)} .nc .b-Matig{background:var(--matig)}
.nc .b-Zwak{background:var(--zwak)} .nc .b-Geen{background:var(--geen)}
/* gaps highlight */



.nc .gaps{background:var(--navy);border-radius:22px;padding:34px 26px;color:#fff;margin-top:8px}
.nc .gaps h2{font-size:clamp(20px,3.2vw,26px);font-weight:900}
.nc .gaps .gsub{color:#c6d2e8;margin-top:6px}
.nc .gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:22px}
.nc .gcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:18px}
.nc .gcard .gt{font-weight:800;color:#fff;font-size:16px;display:flex;gap:8px;align-items:baseline}
.nc .gcard .gt .gi{color:var(--orange);font-weight:900}
.nc .gcard p{color:#bccbe4;font-size:14px;margin-top:8px}
/* CTA */



.nc .scopebridge{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--orange);
  border-radius:14px;padding:16px 20px;margin:26px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.nc .scopebridge b{color:var(--navy);font-size:15px}
.nc .scopebridge span{color:var(--muted);font-size:14px;flex:1 1 320px;min-width:0}
.nc .scopebridge a{color:var(--orange);font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap}
.nc .scopebridge a:hover{text-decoration:underline}
.nc .nc-cta{background:var(--card);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow);padding:34px 26px;text-align:center;margin-top:8px}
.nc .nc-cta h2{font-size:clamp(21px,3.4vw,28px);font-weight:900;color:var(--navy);max-width:20em;margin:0 auto}
.nc .nc-cta p{color:var(--muted);margin:12px auto 22px;max-width:34em}
.nc .form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap}
.nc .form input{flex:1;min-width:200px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;
  font:inherit;background:#fff}
.nc .form input:focus{outline:none;border-color:var(--orange)}
.nc .nc-btn{background:var(--orange);color:#fff;border:none;padding:14px 22px;border-radius:12px;
  font:inherit;font-weight:800;cursor:pointer;white-space:nowrap}
.nc .nc-btn:hover{filter:brightness(1.06)}
.nc .nc-cta .fine{font-size:12px;color:var(--muted);margin-top:14px}

.nc .cred{background:#eef2f9;border:1px solid var(--line);border-radius:16px;padding:22px 22px}
.nc .cred h3{font-size:16px;font-weight:900;color:var(--navy);margin-bottom:8px}
.nc .cred p{color:var(--ink);font-size:14px;margin-top:8px}
.nc .cred p.ind{color:var(--muted);font-size:13px}
.nc .nc-src{padding:34px 0 60px;color:var(--muted);font-size:13px;text-align:center;border-top:1px solid var(--line);margin-top:20px}
.nc .nc-src .src{max-width:46em;margin:0 auto}
/* modal */



.nc .ov{position:fixed;inset:0;background:rgba(7,25,64,.55);display:none;align-items:flex-end;
  justify-content:center;z-index:9000;padding:0}
.nc .ov.nc-open{display:flex}
.nc .modal{background:#fff;width:100%;max-width:640px;max-height:90vh;overflow:auto;
  border-radius:22px 22px 0 0;padding:26px 22px 34px;animation:up .22s ease}
@keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.nc .modal .mtop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.nc .modal .mid{font-weight:900;color:var(--orange);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.nc .modal h3{font-size:20px;font-weight:900;color:var(--navy);margin-top:4px;line-height:1.2}
.nc .x{background:#eef1f7;border:none;width:38px;height:38px;border-radius:50%;font-size:20px;
  cursor:pointer;color:var(--muted);flex:0 0 auto}
.nc .modal .eis{color:var(--ink);font-size:14px;margin-top:14px;background:var(--bg);
  border-radius:12px;padding:14px;border:1px solid var(--line)}
.nc .mrow{display:flex;justify-content:space-between;align-items:center;margin:18px 0 10px}
.nc .mrow .cov{font-weight:900;color:var(--navy);font-size:15px}
.nc .iso{border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin-bottom:10px}
.nc .iso .ih{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.nc .iso .icode{font-weight:800;color:var(--navy);font-size:14px}
.nc .iso .delta{color:var(--muted);font-size:13px;margin-top:7px}
.nc .iso .delta b{color:var(--zwak)}
.nc .iso .qgap{color:#3b6fd4;font-size:12.5px;margin-top:6px;line-height:1.35}
.nc .iso .qgap b{color:#3b6fd4}
.nc .none-note{background:#fff5f0;border:1px solid #f3d3c2;border-radius:12px;padding:14px;
  color:var(--zwak);font-weight:600;font-size:14px}
@media(min-width:640px){.nc .ov{align-items:center}.nc .modal{border-radius:22px}
}
@media(max-width:560px){.nc .stats{grid-template-columns:1fr;margin-top:-70px}.nc .grid{grid-template-columns:1fr}
}

/* ── Conclusielaag ─────────────────────────────────────────────────────────
   Server-side gerenderd (server.py, build_nis2_conclusie). Dit is het deel dat
   AI-crawlers en zoekmachines lezen: geen JS, geen verborgen kaders, alle drie
   de vergelijkingen in één tabel. */
.nc .nc-concl{padding:2.5rem 0 1rem}
.nc .nc-concl h2{font-size:1.6rem;margin:0 0 .5rem}
.nc .nc-concl-lede{color:var(--slate,#5a6472);max-width:60ch;margin:0 0 1.5rem}
.nc .nc-concl-tabelwrap{overflow-x:auto;margin-bottom:2rem}
.nc .nc-concl-tabel{border-collapse:collapse;width:100%;min-width:34rem;font-size:.95rem}
.nc .nc-concl-tabel th,.nc .nc-concl-tabel td{padding:.7rem .9rem;text-align:left;
  border-bottom:1px solid var(--line,#e4e8ee)}
.nc .nc-concl-tabel thead th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--slate,#5a6472);font-weight:700;border-bottom-width:2px}
.nc .nc-concl-tabel tbody th{font-weight:700}
.nc .nc-concl-tabel .num{text-align:right;font-variant-numeric:tabular-nums}
.nc .nc-concl-tabel .pctcel{color:var(--accent,#0f6dbf)}
.nc .nc-concl-kader{margin:0 0 1.5rem}
.nc .nc-concl-kader h3{font-size:1.1rem;margin:0 0 .4rem}
.nc .nc-concl-kader p{margin:0 0 .5rem;max-width:66ch}
.nc .nc-concl-kader .gapkop{font-size:.9rem;color:var(--slate,#5a6472);margin-bottom:.2rem}
.nc .nc-concl-gaps{margin:0 0 .5rem;padding-left:1.2rem}
.nc .nc-concl-gaps li{margin-bottom:.25rem;max-width:66ch}
.nc .nc-concl-methode{font-size:.88rem;color:var(--slate,#5a6472);max-width:70ch;
  border-top:1px solid var(--line,#e4e8ee);padding-top:1rem;margin-top:.5rem}
.nc .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:640px){.nc .nc-concl h2{font-size:1.35rem}}

/* Slot in de modal: de restgat-analyse zit achter dezelfde drempel als de Scanner. */
.nc .nc-slot{border:1px dashed var(--line,#d7dde5);border-radius:10px;padding:1rem 1.1rem;
  background:var(--surface-alt,#f7f9fb);margin-top:.75rem}
.nc .nc-slot p{margin:0 0 .7rem;font-size:.92rem;line-height:1.5}
.nc .nc-slotform{display:flex;gap:.5rem;flex-wrap:wrap}
.nc .nc-slotform input{flex:1 1 14rem;padding:.55rem .7rem;border:1px solid var(--line,#d7dde5);
  border-radius:7px;font:inherit;font-size:.92rem}
.nc .nc-slotform button{white-space:nowrap}
.nc .nc-slotmsg{margin:.6rem 0 0;font-size:.88rem;color:var(--sterk,#1a7f5a);font-weight:600}
.nc .nc-fout{padding:1rem;border:1px solid var(--line,#d7dde5);border-radius:8px;
  color:var(--slate,#5a6472)}