/* Gezinshuis Kwaliteitsmanagementsysteem - de kwaliteitsschermen
   ───────────────────────────────────────────────────────────
   Huisstijl: De Gezinshuis Architect (MERK-01, Bob 2026-10-22), dezelfde merkstijl als
   degezinshuisarchitect.nl. Kleuren, lettertypes en vormen staan op EEN plek: de tokens in
   :root van suite/suite.css (dag en nacht). Dit blad definieert zelf geen merkkleur meer; tot
   MERK-01 stond hier een tweede :root met de kleuren van de vorige huisstijl, die in de
   suite toch al door suite.css overschreven werd.

   Wat hier wel eigen is: statusvlaggen, de risicomatrix en de vormen van de kwaliteitsschermen.

   Sinds 0.44.0 draait het kwaliteitssysteem BINNEN de suite-schil, dus staat dit blad
   naast suite.css in dezelfde pagina. Daarom is elke selector hier gescoped onder .kws,
   de wikkel om de kwaliteitsschermen: zonder die scope zouden twee bladen tegelijk
   table, h2, button en .kaart bepalen en wint stilzwijgend de laatste. Wat alleen bij
   de OUDE paginaschil hoorde - bovenbalk, zijmenu, main en voettekst - is eruit; die
   levert de suite nu. Gescoped en gesnoeid met een wegwerpscript en niet met de
   hand: 194 blokken en 666 declaraties geteld voor en na het scopen, beide gelijk,
   en daarna alleen de schilregels geschrapt. Wie het overdoet, telt opnieuw. */


* { box-sizing: border-box; }

/* De wikkel om de kwaliteitsschermen. Was body toen dit een eigen pagina was;
   de maatvoering blijft, de paginadingen (achtergrond, 100vh) horen nu bij de suite. */
.kws {
  font-family: var(--tekst);
  font-size: 15px;
  line-height: 1.5;
  color: var(--inkt);
  -webkit-font-smoothing: antialiased;
}

.kws .verborgen { display: none !important; }

/* ── koppen en tekst ───────────────────────────────────────────────────────── */

.kws h2 {
  font-family: var(--kop);
  font-size: 23px;
  font-weight: 700;
  color: var(--groen);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.kws h3.vakkop { font-family: var(--tekst); }
.kws .vakkop {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--inkt-zacht); margin: 26px 0 9px;
}
.kws .kolommen .vakkop { margin-top: 0; }
.kws .toelichting {
  font-size: 14px; margin: -4px 0 18px; max-width: 74ch; color: var(--inkt-zacht);
}
.kws .kop-met-knop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kws .kop-met-knop h2 { margin: 0; }

/* ── knoppen: de ronde vorm van de website ─────────────────────────────────── */

.kws button {
  font-family: var(--tekst);
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 16px;
  border: 1px solid var(--groen);
  border-radius: var(--rond-knop, 10px);     /* rij 224: dezelfde knopvorm als de rest van de suite (was een pil) */
  background: var(--vlak);
  color: var(--groen);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.kws button:hover { background: var(--groen-vlak); }
.kws button.primair { background: var(--groen-knop); border-color: var(--groen-knop); color: #fff; }
.kws button.primair:hover { background: var(--groen-diep); }
.kws button.klein { padding: 3px 11px; font-size: 12.5px; }

/* ── tellers ───────────────────────────────────────────────────────────────── */

.kws .tellers { display: flex; gap: 11px; margin-bottom: 22px; flex-wrap: wrap; }
.kws .teller {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  padding: 13px 18px;
  min-width: 116px;
}
.kws .teller .getal { font-family: var(--kop); font-size: 27px; line-height: 1.05; }
.kws .teller .naam {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--inkt-zacht); font-weight: 700; margin-top: 2px;
}
.kws .teller.verlopen .getal,
.kws .teller.ontbreekt .getal,
.kws .teller.nietbewaakt .getal { color: var(--rood); }
.kws .teller.binnenkort .getal { color: var(--terra); }
.kws .teller.inorde .getal { color: var(--groen); }
.kws .teller.gepland .getal { color: var(--inkt-zacht); }

/* ── tabellen ──────────────────────────────────────────────────────────────── */

/* Rij 236 (ontwerpsysteem): een tabelvorm voor de hele suite - die van table.lijst in suite.css. Kwaliteit had een
   eigen omkaderde tabel (rand, ronding, schaduw, gekleurde kop, ruimere cellen); die is hier weg, zodat een tabel in
   Kwaliteit er net zo uitziet als elders. Bijzondere tabellen (jpemaanden, matrix) houden hun eigen aanvulling. */
.kws table { width: 100%; border-collapse: collapse; font-size: var(--tabel-tekst, 14.5px); }
.kws th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kolomkop); padding: var(--tabel-kop, 0 8px 10px); border-bottom: 1px solid var(--lijn);
}
.kws td { padding: var(--tabel-cel, 13px 8px); vertical-align: top; border-top: 1px solid var(--lijn-zacht); }

.kws .vlag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.kws .vlag.verlopen,
.kws .vlag.ontbreekt { background: var(--rood-vlak);   color: var(--rood); }
.kws .vlag.binnenkort              { background: var(--terra-vlak);  color: var(--warm-tekst); }
.kws .vlag.inorde                  { background: var(--groen-vlak);  color: var(--groen); }
.kws .vlag.gepland                 { background: var(--vlak-warm);   color: var(--inkt-zacht); }
.kws .vlag.telaatgedaan            { background: var(--terra-vlak); color: var(--warm-tekst); }  /* A-LEER-05 */
.kws .vlag.nietbewaakt             { background: var(--rood-vlak);   color: var(--rood); border: 1px dashed var(--rood); }
.kws .vlag.geengegevens            { background: var(--zand);        color: var(--zand-tekst, #6A5B3C); }
.kws .vlag.controleren             { background: var(--vlak-warm); color: var(--blauw); border: 1px solid var(--lijn); }
.kws .teller.controleren .getal { color: var(--blauw); }
.kws .vlag.buiten                  { background: var(--vlak);        color: var(--inkt-zacht); border: 1px solid var(--lijn); }

.kws .eis { font-size: 12.5px; margin-top: 4px; color: var(--inkt-zacht); }
.kws .eis .bron { display: block; font-size: 11.5px; margin-top: 2px; }
.kws .eiscode { font-size: 11.5px; font-family: ui-monospace, Menlo, monospace; white-space: nowrap; color: var(--inkt-zacht); }
.kws .bewaker { font-size: 11.5px; color: var(--inkt-zacht); display: block; }
.kws .regelcode { font-size: 11.5px; color: var(--inkt-zacht); font-family: ui-monospace, Menlo, monospace; }

.kws details.waarom { margin-top: 4px; }
.kws details.waarom summary {
  font-size: 11.5px; cursor: pointer; list-style: none; color: var(--terra); font-weight: 600;
}
.kws details.waarom summary::-webkit-details-marker { display: none; }
.kws details.waarom summary::before { content: "▸ "; }
.kws details.waarom[open] summary::before { content: "▾ "; }

/* ── lege staat en meldingen ───────────────────────────────────────────────── */

.kws .leeg {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--zand);
  border-radius: var(--rond-klein);
  padding: 22px 24px;
  font-size: 14px;
  color: var(--inkt-zacht);
}
.kws .leeg strong { display: block; margin-bottom: 6px; font-size: 16px; color: var(--inkt); font-family: var(--kop); }

.kws .melding {
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--rood);
  background: var(--rood-vlak);
  border-radius: var(--rond-klein);
  padding: 14px 17px;
  margin-bottom: 16px;
  font-size: 14px;
}
.kws .melding.goed { border-left-color: var(--groen); background: var(--groen-vlak); }
.kws .melding strong { display: block; margin-bottom: 3px; font-weight: 700; }

/* ── kaarten en hoofdstukpagina ────────────────────────────────────────────── */

.kws .hoofdstukkop { border-bottom: 2px solid var(--zand); padding-bottom: 11px; margin-bottom: 18px; }
.kws .hoofdstukkop h2 { margin: 0; }
.kws .hoofdstukkop .code {
  font-size: 12px; color: var(--terra); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
}
/* Rij 236: de kaart in Kwaliteit krijgt zijn vorm van .kaart in suite.css (ronding, binnenruimte, rand, schaduw). */
.kws .kaart h3 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--inkt-zacht);
}
.kws .kaart p { margin: 0; font-size: 14px; }

/* ── beleidscyclus ─────────────────────────────────────────────────────────── */

.kws .ketenstap {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-left: 5px solid var(--zand);
  border-radius: var(--rond-klein);
  padding: 13px 17px;
  margin-bottom: 5px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.kws .ketenstap.centraal { border-left-color: var(--groen); background: var(--groen-vlak); }
.kws .ketenstap .kern { flex: 1; min-width: 0; }
.kws .ketenstap h3 { margin: 0 0 3px; font-family: var(--kop); font-size: 16px; font-weight: 700; color: var(--groen); }
.kws .ketenstap p { margin: 0; font-size: 13px; color: var(--inkt-zacht); }
.kws .ketenstap .wie {
  font-size: 11px; font-weight: 700; color: var(--terra); text-transform: uppercase;
  letter-spacing: 0.07em; margin-top: 6px; display: block;
}
.kws .ketenpijl { text-align: center; font-size: 15px; color: var(--zand); margin: 1px 0 5px; }
.kws .ketenstuk {
  font-size: 11.5px; font-family: ui-monospace, Menlo, monospace;
  border: 1px solid var(--lijn); padding: 2px 9px; border-radius: 99px;
  background: var(--vlak); color: var(--inkt-zacht); cursor: pointer; font-weight: 700;
}
.kws .ketenstuk:hover { background: var(--groen-vlak); color: var(--groen); }
.kws .ketenterug {
  border: 1px dashed var(--zand); border-radius: var(--rond-klein); padding: 13px 17px; margin-top: 9px;
  font-size: 13px; background: var(--vlak-warm); color: var(--inkt-zacht);
}

/* ── dashboard ─────────────────────────────────────────────────────────────── */

.kws .kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .kws .kolommen { grid-template-columns: 1fr; } }

.kws .aftelrij { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.kws .aftel {
  flex: 1; min-width: 215px;
  background: var(--groen-knop); color: #fff;
  border-radius: var(--rond-klein);
  padding: 15px 20px;
}
.kws .aftel.dichtbij { background: var(--terra-vol); }   /* O-043 stap 4: wit op terra 3,3:1 */
.kws .aftel .dagen { font-family: var(--kop); font-size: 30px; line-height: 1.05; }
.kws .aftel .wat { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.9; font-weight: 700; }
.kws .aftel .datum { font-size: 12px; opacity: 0.85; margin-top: 3px; }

.kws .puntje {
  background: var(--vlak); border: 1px solid var(--lijn);
  border-left: 4px solid var(--rood); border-radius: var(--rond-klein);
  padding: 10px 13px; margin-bottom: 6px; font-size: 13.5px;
}
.kws .puntje.binnenkort { border-left-color: var(--terra); }
.kws .puntje .bij { display: block; font-size: 12px; color: var(--inkt-zacht); margin-top: 3px; }

.kws .balk { display: flex; height: 18px; border-radius: 99px; overflow: hidden; background: var(--vlak-warm); }
.kws .balk div { height: 100%; }
.kws .balkrij { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 13px; }
.kws .balkrij .naam { flex: 0 0 140px; font-weight: 700; }
.kws .balkrij .balkvak { flex: 1; }
.kws .balkrij .getallen { flex: 0 0 130px; text-align: right; font-size: 12px; color: var(--inkt-zacht); }

.kws h3.kwartaal {
  font-family: var(--kop); font-size: 17px; font-weight: 700; color: var(--groen);
  margin: 24px 0 9px; padding-bottom: 5px; border-bottom: 2px solid var(--zand);
}
.kws h3.kwartaal:first-child { margin-top: 0; }
.kws h3.kwartaal .periode { font-family: var(--tekst); font-size: 13px; font-weight: 400; color: var(--inkt-zacht); margin-left: 9px; }

/* ── invoervenster ─────────────────────────────────────────────────────────── */

.kws .scherm {
  /* Boven de bovenbalk van de suite: die staat sticky op z-index 40, en zonder
     eigen laag zou hij dwars door het venster heen prikken. Zelfde hoogte als
     .vensterlaag van de suite, want het is dezelfde soort laag. */
  position: fixed; inset: 0; z-index: 60;
  background: var(--sluier);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px; overflow: auto;
}
.kws .venster {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-top: 4px solid var(--groen);
  border-radius: var(--rond-klein);
  padding: 25px 26px;
  width: 100%;
  max-width: 545px;
  box-shadow: var(--schaduw-hoog);
}
.kws .venster h2 { margin-bottom: 18px; font-size: 20px; }
.kws .veld { margin-bottom: 15px; }
.kws .veld label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.kws .veld input,
.kws .veld select,
.kws .veld textarea {
  width: 100%;
  font-family: var(--tekst);
  font-size: 14px;
  padding: 8px 11px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  background: var(--vlak);
  color: var(--inkt);
}
.kws .veld input:focus,
.kws .veld select:focus {
  outline: none; border-color: var(--groen); box-shadow: 0 0 0 3px var(--groen-vlak);
}
.kws .veld .hint { font-size: 12px; margin-top: 4px; color: var(--inkt-zacht); }
.kws .venster-knoppen { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; }
/* ── schuiven ──────────────────────────────────────────────────────────────── */

.kws #takenlijst,
.kws #medewerkerslijst,
.kws #documentenlijst,
.kws #jaarcycluslijst,
.kws #registerlijst,
.kws #dekkinglijst { overflow-x: auto; }
.kws #takenlijst table,
.kws #medewerkerslijst table,
.kws #documentenlijst table,
.kws #jaarcycluslijst table,
.kws #registerlijst table,
.kws #dekkinglijst table { min-width: 700px; }
.kws #registerkeuze select {
  font-family: var(--tekst); font-size: 13.5px; padding: 6px 11px;
  border: 1px solid var(--lijn); border-radius: 99px; background: var(--vlak); color: var(--inkt);
}

/* ── het bestand uit Drive op de documentpagina ────────────────────────────── */
.kws .kaartkop { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.kws .kaartkop h3 { margin: 0; flex: 1; }
.kws .jaarkeuze {
  font-family: var(--tekst); font-size: 12.5px; padding: 4px 10px;
  border: 1px solid var(--lijn); border-radius: 99px; background: var(--vlak); color: var(--inkt);
}
.kws .drivevenster {
  width: 100%; height: 560px; border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  background: var(--vlak-warm); display: block;
}
.kws .kaart a { color: var(--groen); text-decoration: underline; text-underline-offset: 2px; }
.kws .kaart a:hover { color: var(--terra); }

/* --- JPE-checklist --- */
.kws .jpecel {
  width: 44px; text-align: center; cursor: pointer; user-select: none;
  font-weight: 700; font-size: 15px;
}
.kws .jpecel.v { color: var(--groen); }
.kws .jpecel.x { color: var(--rood); }
.kws .jpecel.n { color: var(--inkt-zacht); }
.kws .jpecel.leeg { color: var(--lijn); }
.kws .jpecel:hover { background: var(--groen-vlak); border-radius: var(--rond-knop); }
/* A-JPE-01: maandraster met kwartaalkoppen; de lopende maand licht op */
.kws .jpekwartalen { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 16px; }
.kws table.jpemaanden th.jpeq { text-align: center; font-weight: 600; border-bottom: 1px solid var(--lijn); }
.kws table.jpemaanden th.jpeq.inorde { color: var(--groen); }
.kws table.jpemaanden th.jpeq.verlopen { color: var(--rood); }
.kws table.jpemaanden th.jpem { text-align: center; font-weight: 400; color: var(--inkt-zacht); }
.kws table.jpemaanden th.jpem.huidig, .kws table.jpemaanden td.jpecel.huidig { background: var(--groen-vlak); }

/* Risicomatrix. Niet van de site: een werkscherm heeft hem nodig, een website niet.
   De kleuren zijn dezelfde statuskleuren als de vlaggen, zodat een cel en een vlag
   met dezelfde ernst er ook hetzelfde uitzien. */
.kws table.matrix { width: auto; margin: 10px 0; border-collapse: collapse; }
.kws table.matrix th { font-size: 12px; color: var(--inkt-zacht); font-weight: 600;
                  padding: 4px 8px; background: none; border: 0; text-align: center; }
.kws td.matrixcel { width: 52px; height: 40px; text-align: center; vertical-align: middle;
               border: 1px solid var(--lijn); padding: 2px; }
/* Vier banden, vier tinten. De vlagkleuren kennen er maar drie, en dan zouden
   mitigeren en kritiek dezelfde cel opleveren - precies het onderscheid waarvoor
   je een matrix ophangt. */
.kws td.matrixcel.band-acceptabel { background: var(--groen-vlak); }
.kws td.matrixcel.band-monitoren  { background: #F7E6CC; }
.kws td.matrixcel.band-mitigeren  { background: #EFC7AE; }
.kws td.matrixcel.band-kritiek    { background: #DF9E82; }
.kws td.matrixcel.band-kritiek .matrixscore,
.kws td.matrixcel.band-mitigeren .matrixscore { color: #5E3218; }
.kws .matrixscore  { font-size: 11px; color: var(--inkt-zacht); }
.kws .matrixaantal { font-size: 15px; font-weight: 700; color: var(--inkt); }

/* Herkomst en gevolg van een registerregel: de keten waar een auditor naar vraagt.
   Bewust smal en grijs - het is context bij de regel, niet de regel zelf. */
.kws .herkomst { font-size: 12px; color: var(--inkt-zacht); margin-top: 4px; }
.kws button.schakel { min-height: 24px; background: none; border: 0; padding: 0 4px 0 0; font: inherit;   /* WCAG 2.5.8 */
                 color: var(--groen-diep); text-decoration: underline; cursor: pointer; }
.kws button.schakel:hover { color: var(--terra); }

/* De stukkenkaart: deadline en verbindingen bij een stuk. Elke verbindingsregel is
   een zin met knoppen erin, geen tabel - het gaat om het verband, niet om de kolom. */
.kws .deadlineregel { margin: 6px 0 12px; }
.kws .verbinding { margin: 6px 0; font-size: 14px; }
.kws .verbinding .hint { margin-left: 0; }
.kws td.telaat { color: var(--terra); font-weight: 700; }
.kws label.aanvink { font-size: 13px; color: var(--inkt-zacht); margin-right: 12px; }
/* De eis waar je vanaf een stuk naartoe sprong, zodat je hem in de lijst terugvindt. */
.kws tr.geaccentueerd > td { background: var(--groen-vlak); }
.kws .vlag.jaarcyclus { background: var(--vlak-warm); color: var(--inkt-zacht); }
.kws .vlag.formulier  { background: var(--vlak);      color: var(--inkt-zacht);
                   border: 1px solid var(--lijn); }

/* Interne auditchecklist. Niet van de site: een auditvraag heeft een eigen vorm nodig -
   de vraag groot, het bewijs en de eis klein eronder, en de keuze als knoppen in plaats
   van als vinkje, zodat er geen twijfel is welk oordeel er staat. */
.kws .auditvraag {
  background: var(--vlak); border: 1px solid var(--lijn); border-left: 4px solid var(--lijn);
  border-radius: var(--rond-klein); padding: 12px 14px; margin: 10px 0;
}
.kws .auditvraag.bevinding    { border-left-color: var(--rood); background: var(--rood-vlak); }
.kws .auditvraag.verbeterpunt { border-left-color: var(--terra); background: var(--terra-vlak); }
.kws .auditclausule {
  font-size: 12px; font-weight: 700; color: var(--groen); letter-spacing: 0.04em;
  margin: 0 0 2px;
}
.kws .audittekst  { margin: 0 0 6px; font-size: 15px; }
.kws .auditbewijs { margin: 0 0 2px; font-size: 13px; color: var(--inkt-zacht); }
.kws .auditbron   { margin: 0 0 8px; font-size: 12px; color: var(--inkt-zacht); }
.kws .auditknoppen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kws .auditknop {
  border: 1px solid var(--lijn); background: var(--vlak-warm); color: var(--inkt);
  border-radius: var(--rond-pil, 999px); padding: 4px 12px; font-size: 13px; cursor: pointer;
}
.kws .auditknop:hover { background: var(--groen-vlak); }
.kws .auditknop.aan   { background: var(--groen-knop); border-color: var(--groen-knop); color: #fff; }
.kws .audittoelichting {
  width: 100%; min-height: 44px; border: 1px solid var(--lijn); border-radius: var(--rond-knop);
  padding: 6px 8px; font: inherit; font-size: 13px; background: var(--vlak);
}
.kws table.clausuletabel { width: auto; margin: 6px 0 14px; }
.kws table.clausuletabel tr.onaf td { color: var(--inkt-zacht); }

/* --- Wettenboek ------------------------------------------------------------
   Wettekst leest anders dan een werklijst: langere regels, meer wit, en het
   verschil tussen oud en nieuw moet je in een oogopslag zien. Niet van de site
   overgenomen - dit zijn eigen keuzes voor leesbaarheid van lange tekst. */

.kws .wetartikel {
  border-left: 3px solid var(--lijn);
  padding: 6px 0 6px 12px;
  margin: 6px 0;
}
.kws .wetartikel.geraakt { border-left-color: var(--terra); }
.kws .wetartikel > summary { cursor: pointer; line-height: 1.7; }
.kws .wettekst {
  max-width: 62em;
  line-height: 1.65;
  margin: 8px 0 4px;
}
.kws .zoekveld {
  width: 100%;
  max-width: 32em;
  padding: 8px 10px;
  margin: 14px 0 6px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-knop);
  font: inherit;
}
.kws .verschil {
  font-size: 0.95em;
  line-height: 1.55;
  max-height: 46vh;
  overflow-y: auto;
  margin-top: 10px;
}
.kws .verschilregel {
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 3px;
  white-space: pre-wrap;
}
.kws .verschilregel.gelijk { color: var(--inkt-zacht); }
.kws .verschilregel.bij { background: var(--groen-vlak); }
.kws .verschilregel.weg { background: var(--rood-vlak); text-decoration: line-through; }
.kws .filterbalk { margin: 8px 0 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.kws tr.afgehandeld { opacity: 0.55; }
.kws a.wetlink { color: var(--groen); text-decoration: underline; cursor: pointer; }
.kws .waarschuwing { color: var(--terra); font-weight: 600; margin-top: 4px; }
.kws .wetartikel > summary .bewaker { display: inline-block; margin-left: 6px; }
.kws .lidnr {
  display: inline-block;
  min-width: 2.1em;
  font-weight: 600;
  color: var(--inkt-zacht);
}
.kws .wettekst + .wettekst { margin-top: 6px; }
.kws .wetgroep {
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--lijn);
  border-radius: var(--rond-klein);
  padding: 10px 14px;
  margin-bottom: 10px;
  background: var(--vlak);
}
.kws .wetgroep.geraakt { border-left-color: var(--terra); }
.kws .wetgroep.afgehandeld { opacity: 0.6; }
.kws .wetgroep > summary { cursor: pointer; line-height: 1.9; }
.kws .wetgroep > summary .vlag { margin-left: 8px; }
.kws .wetgroep table { margin-top: 10px; }
.kws .kaart.aandacht { border-left: 4px solid var(--terra); }

/* ── Verfijning (0.79.0) ─────────────────────────────────────────────────────
   Dezelfde afwerking als de laag onderaan suite.css, zodat de kwaliteitsschermen
   niet vlakker ogen dan de rest van de suite: ronder, zachte diepte, meer lucht
   in de tabelcellen. Geen nieuwe kleuren. */
.kws td { line-height: 1.5; font-variant-numeric: tabular-nums; }
.kws tbody tr, .kws tr { transition: background .12s; }
.kws tr:hover td { background: var(--rij-hover); }
.kws .teller {
  border-color: var(--lijn-rand); border-radius: var(--rond-klein); padding: 15px 20px;
  box-shadow: none;
}
.kws .teller .getal { font-size: 31px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kws h2 { font-size: 25px; line-height: 1.2; text-wrap: balance; }
.kws .toelichting { line-height: 1.6; }
.kws button { transition: background .15s, color .15s, box-shadow .15s, transform .15s; }
.kws button:hover { box-shadow: none; border-color: var(--inkt); }
.kws button.primair {
  background: var(--groen-knop);
  box-shadow: none;
}
.kws button.primair:hover { background: var(--groen-knop-hover); transform: none; }
/* Op een telefoon schuift een brede tabel binnen zichzelf in plaats van de hele
   pagina mee te nemen (Signalen 194px, Jaarplanning 57px, Audit 41px op 375 breed). */
@media (max-width: 760px) {
  .kws table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Vaste eigenaar per soort taak boven de actielijst (A-PAGINA-01, 0.119.0). Eigen vorm. */
.kws .eigenaarvak { border: 1px solid var(--lijn); border-radius: var(--rond-klein); padding: 10px 14px; margin: 0 0 16px; background: var(--vlak); }
.kws .eigenaarvak > summary { cursor: pointer; font-weight: 600; }
.kws .eigenaarvak input { width: 100%; max-width: 260px; }
.kws td.eigenaar { min-width: 140px; }
.kws td.eigenaar input { min-width: 120px; }
/* Op een telefoon de filters onder de kop: ernaast werd het "Ac-tielijst". */
@media (max-width: 600px) {
  .kws .kop-met-knop { flex-wrap: wrap; }
  .kws .kop-met-knop > h2 { flex: 1 0 100%; }
  .kws #wiefilter { display: flex; flex-wrap: wrap; gap: 6px; }
}
/* De taken achter een stap van de beleidscyclus (A-PAGINA-01, 0.120.0). Eigen vorm. */
.kws .cyclustaken { margin-top: 8px; }
.kws .cyclustaken > summary { cursor: pointer; font-size: 13px; color: var(--terra); }
.kws .cyclustaken table { margin-top: 6px; font-size: 13px; }
/* Op een telefoon: stand en stuk op de eerste regel, de tekst en de taken eronder
   over de volle breedte. In drie kolommen kreeg de takenlijst een derde van 390px. */
@media (max-width: 600px) {
  .kws .ketenstap { flex-wrap: wrap; }
  .kws .ketenstap > div:first-child { display: flex; gap: 8px; align-items: center; flex: 1 1 auto; }
  .kws .ketenstap .ketenstuk { order: 1; }
  .kws .ketenstap .kern { order: 2; flex: 1 0 100%; }
}

/* #130 C3: de melding na Bewaren. Eigen vorm. */
.kmelding { position: fixed; right: 16px; bottom: 16px; z-index: 50; background: var(--band); color: var(--band-tekst);
  padding: 8px 14px; border-radius: var(--rond-klein); font-size: 14px; }

/* ══ nachtversie (zie suite.css, zelfde stand data-thema op <html>) ═════════
   Alleen de kleur die hierboven geen token van de suite is, plus de
   risicomatrix: pastel met donkere tekst is op donker een lichtbak. */
:root[data-thema="nacht"] {
  --zand-tekst: #D9CCB0;
}
:root[data-thema="nacht"] .kws td.matrixcel.band-monitoren { background: #3F3421; }
:root[data-thema="nacht"] .kws td.matrixcel.band-mitigeren { background: #573826; }
:root[data-thema="nacht"] .kws td.matrixcel.band-kritiek   { background: #6E3A2A; }
:root[data-thema="nacht"] .kws td.matrixcel.band-mitigeren .matrixscore { color: #F3D2B8; }

/* het logo op het blad Organisatie (A-LOGO-01); niet van de site */
.kws .orglogo { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.kws .orglogo img { width: 72px; height: 72px; object-fit: contain; flex: none; padding: 6px;
                    border-radius: var(--rond-klein); background: var(--vlak); border: 1px solid var(--lijn); }
.kws .orglogo-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ── Organisatie: profiel en pagina's als nette kaarten (Bob, 2026-10-21; niet van de site) ──
   Tekstvakken in een raster van twee kolommen, de vertrouwenspersoon als eigen groep,
   de pagina's per domein in een kaart. Alles gescoped op het blad Organisatie. */
.kws #blad-organisatie .profielvak {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  padding: 22px 26px 24px; margin-top: 22px;
}
.kws #blad-organisatie .profielvak > h3 {
  font-family: var(--kop); font-size: 20px; color: var(--groen); margin: 0 0 4px; font-weight: 700;
}
.kws #blad-organisatie .profielvak > .hint { font-size: 13.5px; color: var(--inkt-zacht); margin: 0 0 18px; max-width: 74ch; }
.kws #blad-organisatie .profielraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.kws #blad-organisatie .profielraster-vp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kws #blad-organisatie .profielveld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kws #blad-organisatie .profielveld > span { font-size: 12.5px; font-weight: 700; color: var(--inkt); }
.kws #blad-organisatie .profielveld input,
.kws #blad-organisatie .profielveld textarea {
  width: 100%; box-sizing: border-box; font-family: var(--tekst); font-size: 14px; line-height: 1.5;
  padding: 9px 12px; border: 1px solid var(--lijn); border-radius: var(--rond-klein); background: var(--creme);
  color: var(--inkt); transition: border-color .15s, box-shadow .15s, background .15s;
}
.kws #blad-organisatie .profielveld textarea { resize: vertical; min-height: 112px; }
.kws #blad-organisatie .profielveld input:hover,
.kws #blad-organisatie .profielveld textarea:hover { border-color: var(--rand-hover, var(--groen)); }
.kws #blad-organisatie .profielveld input:focus,
.kws #blad-organisatie .profielveld textarea:focus {
  outline: none; background: var(--vlak); border-color: var(--groen); box-shadow: 0 0 0 3px var(--groen-vlak);
}
.kws #blad-organisatie .profielgroep {
  margin-top: 22px; padding: 16px 18px 18px; border-radius: var(--rond-klein); background: var(--groen-vlak);
}
.kws #blad-organisatie .profielgroep h4 { font-size: 13.5px; margin: 0 0 2px; color: var(--groen-diep, var(--groen)); }
.kws #blad-organisatie .profielgroep .hint { font-size: 12.5px; color: var(--inkt-zacht); margin: 0 0 12px; max-width: 74ch; }
.kws #blad-organisatie .profielgroep input { background: var(--vlak); }
.kws #blad-organisatie .profielvak .orglogo-knoppen { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--lijn); }
.kws #blad-organisatie .profielfoto { display: block; margin-top: 16px; border-radius: var(--rond-klein); border: 1px solid var(--lijn); }

/* pagina's aan en uit: een kaart per domein, de vinkjes netjes onder elkaar */
.kws #blad-organisatie .voorinstellingen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.kws #blad-organisatie .paginaraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kws #blad-organisatie .paginagroep { border: 1px solid var(--lijn); border-radius: var(--rond-klein); padding: 12px 14px 10px; background: var(--creme); }
.kws #blad-organisatie .paginagroep h4 {
  font-family: var(--tekst); font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--inkt-zacht); margin: 0 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--lijn);
}
.kws #blad-organisatie .paginagroep label {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 3px 0; font-size: 14px; cursor: pointer;
}
.kws #blad-organisatie .paginagroep label:first-of-type { font-weight: 600; }
.kws #blad-organisatie .paginagroep label.inspring { margin-left: 26px; font-size: 13px; color: var(--inkt-zacht); font-weight: 400; }
.kws #blad-organisatie .paginagroep input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--groen); margin: 0; flex: none; }
.kws #blad-organisatie .paginagroep .hint { font-size: 11.5px; }
.kws #blad-organisatie .knop-vol {
  background: var(--groen-knop); border-color: var(--groen-knop); color: #fff;
}
.kws #blad-organisatie .knop-vol:hover { background: var(--groen-diep); }
.kws #blad-organisatie .knop-vol:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 760px) {
  .kws #blad-organisatie .profielvak { padding: 18px 16px 20px; }
  .kws #blad-organisatie .profielraster,
  .kws #blad-organisatie .profielraster-vp { grid-template-columns: minmax(0, 1fr); }
}
.kws #blad-organisatie .paginagroep label > .hint { flex: 1 0 100%; margin: 0 0 4px 24px; line-height: 1.4; font-weight: 400; }
.kws #blad-organisatie .paginagroep label.inspring > .hint { margin-left: 24px; }

.kws #blad-organisatie .orglogo {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond-klein); padding: 16px 20px; margin-bottom: 16px;
}
.kws #blad-organisatie .orglogo .hint { font-size: 13px; color: var(--inkt-zacht); margin: 2px 0 6px; }