/* Werkplekinspectie.nl — app-stijl (ontleend aan het goedgekeurde ontwerp) */
/* Nunito, zelf gehost (fonts/, SIL Open Font License: fonts/OFL.txt): variabel lettertype, alle diktes 200–1000
   in één bestand (ook 650/750); geen verzoek naar Google Fonts (privacy). */
@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(fonts/nunito-latin-wght-normal.woff2) format("woff2-variations"),url(fonts/nunito-latin-wght-normal.woff2) format("woff2")}
/* "alles groter" op grote schermen: js/kern.js zet --zoom (1 tot 1280px breed, daarboven vloeiend tot 1,7 bij 2560) */
html{zoom:var(--zoom,1)}
:root{
  --ink:#2A2622; --soft:#72665A; --line:#EFE6DA; --dark:#2A2622; --bg:#FAF6EF;
  --accent:#2F5D50; --accent-bg:#DCEBE3; --accent-ink:#2F5D50; --warm:#FFEBDB; --warm-ink:#B93D0A; --warm-vol:#E8590C;
  --shadow:0 1px 0 #EFE6DA,0 6px 20px rgba(120,90,50,.05);
  --green:#1E7A4C; --green-bg:#E6F4EC; --red:#B42318; --red-bg:#FDECEA;
  --amber:#6B5300; --amber-bg:#FFF3BF; --v-vol:#F2C230; --v-op:#3A2B00; --grey:#9AA2AE;
  --sky:#EAF1FA; --butter:#FBF5DE; --sage:#EDF5E4; --lilac:#F1EDFC; --blush:#FBECEA; --mist:#F3F4F6;
  --r:22px;
}
*{box-sizing:border-box;margin:0;font-family:Nunito,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-size:15px;line-height:1.4}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit;text-decoration:none}
.muted{color:var(--soft)}
.hidden{display:none!important}

/* layout */
#app{max-width:1200px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 8px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--dark);color:#fff;display:grid;place-items:center;font-weight:700}
.chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--soft)}
.chip.sage{background:var(--sage);color:var(--green);box-shadow:none}
.view{flex:1;padding:8px 20px 100px}
.kicker{font-size:13px;color:var(--soft);font-weight:600}
h1{font-size:28px;font-weight:700;margin:2px 0 18px}
h2{font-size:18px;font-weight:650;margin:22px 0 12px}

/* tiles / cards */
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:2px}
.tile .n{font-size:34px;font-weight:650;line-height:1.05;margin-top:4px}
.tile .lab{font-size:13px;color:var(--soft);font-weight:600}
.tile .sub{font-size:13px;color:var(--soft)}
.tile.click{cursor:pointer;transition:transform .08s}
.tile.click:hover{transform:translateY(-2px)}
.sky{background:var(--sky)} .butter{background:var(--butter)} .sage{background:var(--sage)}
.lilac{background:var(--lilac)} .blush{background:var(--blush)} .mist{background:var(--mist)}
.card{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:18px 20px}
.card h3,.card h2.kaartkop{font-size:16px;margin-top:0;font-weight:650;margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:600}
.row .s{font-size:13px;color:var(--soft)}
.listcard{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:4px 18px}

/* badges */
.badge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.b-C{background:var(--green-bg);color:var(--green)} .b-A{background:var(--red-bg);color:var(--red)}
.b-V{background:var(--amber-bg);color:var(--amber)} .b-N{background:var(--mist);color:var(--soft)}
.b-done{background:var(--sage);color:var(--green)} .b-todo{background:var(--butter);color:var(--amber)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 20px;border-radius:16px;font-weight:650;font-size:16px;white-space:nowrap;text-align:center}
.btn.primary{background:var(--dark);color:#fff;width:100%}
.btn.ghost{background:#fff;box-shadow:inset 0 0 0 1px #C9CED6;color:var(--ink)}
.btn.sm{height:40px;font-size:14px;border-radius:12px;padding:0 14px}
.seg{display:flex;gap:8px}
.seg button{flex:1;min-height:60px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-weight:600;line-height:1.1;white-space:nowrap;position:relative}
.seg button .l{font-size:19px;font-weight:750}
.seg button .w{font-size:11px;font-weight:600}
.seg .t-C{background:var(--green-bg);color:var(--green)}
.seg .t-A{background:var(--red-bg);color:var(--red)}
.seg .t-V{background:var(--amber-bg);color:var(--amber)}
.seg button.on-C{box-shadow:inset 0 0 0 2.5px var(--green)}
.seg button.on-A{box-shadow:inset 0 0 0 2.5px var(--red)}
.seg button.on-V{box-shadow:inset 0 0 0 2.5px var(--amber)}
/* beoordeelde kaart lost op naar één kleur: niet-gekozen knoppen worden neutraal */
.seg button.dim{background:var(--mist);color:#9AA2AE}
.seg button.dim .l{font-weight:700}
.card.done-C{box-shadow:0 0 0 1px var(--green)}
.card.done-A{box-shadow:0 0 0 1px var(--red)}
.card.done-V{box-shadow:0 0 0 1px var(--amber)}
.seg button.on-C::after,.seg button.on-A::after,.seg button.on-V::after{content:"✓";position:absolute;top:5px;right:9px;font-size:13px;font-weight:800}

/* begeleide inspectie (gesprek) */
.q{background:#fff;border-radius:22px;box-shadow:0 0 0 1px var(--line);padding:18px 18px 16px;margin-top:12px}
.q .qt{font-size:19px;font-weight:700;line-height:1.25}
.q .qs{font-size:14px;color:var(--soft);margin:4px 0 12px;line-height:1.4}
.inbox{position:relative}
.inbox textarea{width:100%;min-height:104px;border:0;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:12px 64px 12px 14px;font:inherit;font-size:16px;line-height:1.4;resize:vertical;background:#fff;color:var(--ink)}
.inbox textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.mic{position:absolute;right:8px;bottom:12px;width:48px;height:48px;border-radius:50%;background:var(--dark);color:#fff;display:grid;place-items:center}
.mic.on{background:var(--red);animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(180,35,24,.45)}70%{box-shadow:0 0 0 12px rgba(180,35,24,0)}100%{box-shadow:0 0 0 0 rgba(180,35,24,0)}}
.partial{font-size:13px;color:var(--soft);min-height:18px;margin-top:6px}
.lbl{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;vertical-align:middle}
.lbl.jij{background:var(--mist);color:var(--ink)}.lbl.vs{background:var(--lilac);color:#5a3ea8}.lbl.std{background:#EEF0F3;color:#4A5565}
.pick{display:block;width:100%;text-align:left;background:var(--lilac);border-radius:16px;padding:12px 14px;margin-top:8px}
.pick .t{font-weight:650}.pick .s{font-size:13px;color:var(--soft);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chipb{min-height:44px;padding:8px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-weight:600;font-size:14px;text-align:left;line-height:1.3}
.chipb.on{background:var(--ink);color:#fff;box-shadow:none}
.btn:disabled{opacity:.4;cursor:default}
.btn.danger{background:#fff;box-shadow:inset 0 0 0 2px var(--red);color:var(--red)}
.toast{background:var(--sage);color:var(--green);border-radius:14px;padding:8px 8px 8px 14px;font-weight:600;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}

/* nav */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;max-width:1200px;margin:0 auto;z-index:20}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0 14px;font-size:11px;font-weight:600;color:var(--soft)}
.tabbar a.on{color:var(--ink)}
.tabbar .ic{width:24px;height:24px}

/* modal */
#ov{position:fixed;inset:0;background:rgba(20,26,34,.38);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
#ov.on{display:flex}
#mod{--mpx:24px;background:#fff;border-radius:22px;max-width:780px;width:100%;max-height:92%;overflow:auto;padding:0 var(--mpx) 22px;box-shadow:0 20px 60px rgba(20,26,34,.28);scroll-padding-top:100px}
body.veld #mod{scroll-padding-top:108px}   /* veldmodus: kopregel 80px hoog (knoppen 56px) + rand/focusring van een tekstvak */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--soft);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line)}

/* charts */
svg{display:block;width:100%}
.legend{display:flex;gap:16px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--soft)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

@media(min-width:720px){
  .view{padding:8px 24px 40px}
  h1{font-size:32px}
}
@media print{
  .topbar,.tabbar,.noprint{display:none!important}
  body{background:#fff}
  .view{padding:0}
  .card,.listcard{box-shadow:0 0 0 1px #E7E9ED;break-inside:avoid}
  h1{font-size:24px}
}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.chip{white-space:nowrap}
.hint{background:var(--butter);color:#5E4500;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.4;font-style:normal}

/* ---- statusbadges acties ---- */
.b-vs{background:var(--lilac);color:#5a3ea8}.b-uitv{background:var(--sky);color:#1d4f8f}
.b-toets{background:#DDE8F7;color:#123d73;box-shadow:inset 0 0 0 1.5px #1d4f8f}
.chipb.laat:not(.on){box-shadow:inset 0 0 0 1.5px var(--red);color:var(--red)}
.minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.mini{border-radius:14px;padding:10px 12px;text-align:left;font-size:13px;font-weight:600;color:var(--soft);display:flex;flex-direction:column;min-height:64px}
.mini b{font-size:24px;color:var(--ink);line-height:1.1}
.fin{width:100%;border:0;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);padding:10px 12px;font:inherit;font-size:15px;background:#fff;color:var(--ink);min-height:44px}
.fin:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.flab{display:block;font-size:12.5px;font-weight:650;color:var(--soft);margin:8px 0 4px}
.fout{color:var(--red);font-weight:650;font-size:14px;min-height:18px;margin-top:8px}
.tijdlijn div{font-size:13px;padding:6px 0;border-bottom:1px solid var(--line);line-height:1.4}
.tijdlijn span{color:#6E6255;font-weight:600;margin-right:4px}

/* ---- Voorstel-component ---- */
.vskop{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pick .waarom,.waarom{font-size:12.5px;color:#5a3ea8;margin-top:4px}
.pick .gebruik{font-size:12.5px;font-weight:700;color:#5a3ea8;margin-top:6px}

/* ---- opslagstatus ---- */
.opslag{font-size:12px;font-weight:650;color:var(--soft);background:var(--mist);border-radius:999px;padding:4px 10px}
.opslag.ok{background:var(--sage);color:var(--green)}
.opslag.fout{background:var(--red-bg);color:var(--red)}

/* ---- push-to-talk microfoon ---- */
.mic{width:54px;height:54px;bottom:10px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.inbox textarea{padding-right:72px}

/* ---- weergave-schakelaars ---- */
.prefrow{width:100%;text-align:left}
.sw{width:50px;height:30px;border-radius:999px;background:#C9CED6;position:relative;flex:none;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.sw.on{background:var(--green)}.sw.on::after{left:23px}


/* ================= Stijl B · zacht en warm ================= */
body{background:var(--bg);color:var(--ink)}
.topbar{padding:16px 20px 4px}
.brand .logo{width:36px;height:36px;border-radius:12px;background:var(--accent);font-weight:800;font-size:16px}
.brand span:not(.logo){font-weight:700;font-size:15px;color:var(--soft)}
.rondknop{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 1px 0 var(--line);display:grid;place-items:center;color:var(--ink);position:relative}
.rondknop.avatar{background:#F0E6D8;color:#7A5A3A;font-weight:800;font-size:15px}
.kicker{font-weight:700;color:var(--soft);font-size:14px}
.hi{font-size:15px;color:var(--soft);font-weight:700;margin-top:10px}
h1{font-size:27px;font-weight:800;letter-spacing:-.005em;margin:2px 0 18px}
h1.groot{font-size:29px;line-height:1.15;margin:2px 0 18px}
h2{font-size:18px;font-weight:800}
/* kaarten: wit, rond, warme schaduw */
.card,.listcard,.q,#mod{box-shadow:var(--shadow)}
.card,.listcard,.q{background:#fff;border-radius:26px}
.listcard{padding:4px 18px}
.row{border-bottom:1px solid #F4EDE3}
.cirkel{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:#F4EDE3;color:var(--soft)}
/* hero (Vandaag) */
.hero{background:var(--accent-bg);border-radius:28px;padding:20px;position:relative;overflow:hidden;margin-bottom:14px}
.hero::after{content:"";position:absolute;right:-34px;top:-34px;width:140px;height:140px;border-radius:50%;background:#C6DFD2}
.hero>*{position:relative;z-index:1}
.hero .k{font-size:13px;font-weight:800;color:#3E6A5B}
.hero .t{font-size:23px;font-weight:800;margin-top:4px}
.hero .s{font-size:14px;color:#4F6E63;margin-top:2px;font-weight:600}
.hero .btn{margin-top:16px;border-radius:18px;font-weight:800}
.hero.paars{background:#EAE4F7}.hero.paars::after{background:#DCD3F2}.hero.paars .k{color:#5B46A0}.hero.paars .s{color:#6A5E8C}
.hero.klein{padding:16px 18px}.hero.klein .t{font-size:19px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.pil{border-radius:22px;padding:14px 16px;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.pil .n{font-size:28px;font-weight:800;line-height:1.1}.pil .l{font-size:13px;font-weight:700;color:var(--soft)}
.pil.warm{background:var(--warm)}.pil.warm .n{color:var(--warm-ink)}
.notitie{width:100%;background:#fff;border-radius:20px;padding:12px 14px;font-size:14px;font-weight:700;color:#8A5A1C;display:flex;gap:10px;align-items:center;text-align:left;box-shadow:var(--shadow);margin-bottom:6px}
.notitie .em{width:32px;height:32px;border-radius:50%;background:var(--warm);display:grid;place-items:center;flex:none}
.linkknop{display:block;width:100%;text-align:center;font-weight:800;color:var(--accent);font-size:15px;padding:16px 0}
/* tegels (dashboard) */
.tile{background:#fff!important;box-shadow:var(--shadow);border-radius:24px}
.tile .lab{display:flex;align-items:center;gap:7px;font-weight:700}
.tile .lab::before{content:"";width:9px;height:9px;border-radius:50%;background:#D8CDBE;flex:none}
.tile.sage .lab::before{background:var(--accent)}.tile.sky .lab::before{background:#6F95C4}
.tile.blush .lab::before{background:var(--red)}.tile.butter .lab::before{background:var(--v-vol);box-shadow:0 0 0 1px #C99A00}   /* A en V: dezelfde kleur als de C/A/V-chips */.tile.lilac .lab::before{background:#9A84D8}
.tile .n{font-size:30px;font-weight:800}
/* knoppen */
.btn{border-radius:18px;font-weight:800}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:#fff;box-shadow:inset 0 0 0 1.5px #E8DDCD}
.btn.sm{border-radius:14px}
.chip{background:#fff;box-shadow:0 1px 0 var(--line);font-weight:700}
.chipb{border-radius:14px;box-shadow:inset 0 0 0 1.5px #E8DDCD;font-weight:700}
.chipb.on{background:var(--accent);color:#fff;box-shadow:none}
/* badges */
.badge{font-weight:700;height:25px;font-size:12.5px}
.b-todo{background:var(--warm);color:var(--warm-ink)}
.b-open{background:#EEF0F3;color:#3E4A5A}   /* actiestatus "Open": neutraal; oranje betekent alleen "inspectie niet gedaan" */
.b-done{background:var(--accent-bg);color:var(--accent-ink)}
/* actiestatus: blauw betekent alleen "binnenkort" (datumchip); daarom In uitvoering neutraal-warm met een halve stip,
   Klaar voor toetsing omlijnd in de hoofdkleur (de volgende stap ligt bij de toetser), Afgerond gevuld */
.b-uitv{background:#F1ECE4;color:#4A4036;gap:6px}.b-uitv::before{content:"";width:9px;height:9px;border-radius:50%;background:linear-gradient(90deg,#4A4036 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px #4A4036;flex:none}
.b-toets{background:#fff;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.b-vs{background:#EAE4F7;color:#5B46A0}
/* gesprek */
.q{padding:18px;border-radius:28px}
.q .qt{font-size:19px;font-weight:800}
.inbox textarea{background:#FCFAF6;box-shadow:inset 0 0 0 1.5px #EADFCF;border-radius:20px}
.inbox textarea:focus{box-shadow:inset 0 0 0 2px var(--accent);background:#fff}
.mic{background:var(--accent)}
.pick{background:#F3EFFA;border-radius:20px}
.lbl.vs{background:#EAE4F7;color:#5B46A0}
.toast{background:var(--accent-bg);color:var(--accent-ink);border-radius:18px}
.hint{background:#F4EFE7;color:#4A4036;border-radius:16px}   /* neutraal: geel = V, oranje = niet gedaan */
.opslag{background:#F4EDE3}.opslag.ok{background:var(--accent-bg);color:var(--accent-ink)}
.fin{background:#FCFAF6;box-shadow:inset 0 0 0 1.5px #EADFCF;border-radius:14px}
.fin:focus{box-shadow:inset 0 0 0 2px var(--accent);background:#fff}
.seg button{border-radius:20px}
/* acties: tabs als pillen, losse kaarten */
.tabs{display:flex;gap:8px;overflow-x:auto;margin:0 -20px 10px;padding:2px 20px 6px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabp{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:var(--shadow);font-weight:800;font-size:14px;color:var(--ink)}
.tabp span{min-width:22px;height:22px;border-radius:999px;background:#F4EDE3;color:var(--soft);font-size:12px;display:grid;place-items:center;padding:0 6px}
.tabp.on{background:var(--accent);color:#fff}.tabp.on span{background:rgba(255,255,255,.22);color:#fff}
.tabp.warm:not(.on) span{background:var(--warm);color:var(--warm-ink)}
.uitleg{margin:2px 2px 12px;font-weight:600}
.akaarten{display:flex;flex-direction:column;gap:12px}
.akaart{display:block;width:100%;text-align:left;background:#fff;border-radius:24px;padding:16px 18px;box-shadow:var(--shadow)}
.akaart .boven{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.akaart .titel{font-size:16.5px;font-weight:800;line-height:1.3;margin:10px 0 10px}
.akaart .onder{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--soft);font-weight:700;flex-wrap:wrap}
.akaart .dot{opacity:.6}
.mini-av{width:24px;height:24px;border-radius:50%;background:#F0E6D8;color:#7A5A3A;display:grid;place-items:center;font-size:11.5px;font-weight:800}
.dchip{display:inline-flex;align-items:center;height:25px;padding:0 10px;border-radius:999px;background:#F4EDE3;color:#6E6255;font-size:12.5px;font-weight:700}
.dchip.warm{background:var(--warm);color:var(--warm-ink)}
.leeg{text-align:center;padding:30px 10px}
.leeg .bol{width:72px;height:72px;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;font-size:30px;margin:0 auto 12px}
.leeg .t{font-weight:800;font-size:17px}.leeg .s{margin-top:4px}
/* tabbalk: wit, rond aan de bovenkant */
.tabbar{border-top:0;border-radius:24px 24px 0 0;box-shadow:0 -1px 0 var(--line),0 -6px 20px rgba(120,90,50,.05)}
.tabbar a{color:#776B5E;font-weight:700}
.tabbar a.on{color:var(--accent)}
/* modal */
#mod{border-radius:28px}
#ov{background:rgba(42,38,34,.32)}

/* ---- Veldmodus: grote tikdoelen voor handschoenen ---- */
body.veld{font-size:16.5px}
body.veld .btn{min-height:62px;font-size:17.5px;border-radius:18px}
body.veld .btn.sm{min-height:50px;height:auto;font-size:15.5px}
/* een knop over de volle breedte mag over twee regels: anders loopt een lange tekst (veldmodus, 390 px) buiten de knop */
.btn[style*="width:100%"]{white-space:normal;text-wrap:balance}
body.veld .seg button{min-height:84px}
body.veld .seg button .l{font-size:24px}body.veld .seg button .w{font-size:12.5px}
body.veld .chipb{min-height:56px;font-size:15.5px;padding:10px 14px}
body.veld .pick{padding:16px}
body.veld .mic{width:68px;height:68px}
body.veld .inbox textarea{font-size:17.5px;min-height:124px;padding-right:86px}
body.veld .q .qt{font-size:21px}
body.veld .tabbar a{padding:12px 0 16px;font-size:12px}

/* ---- Zonmodus: hoog contrast voor fel licht ---- */
body.zon{--bg:#fff;--soft:#1f2630;--line:#5b6472;background:#fff}
body.zon .tile,body.zon .q,body.zon .card,body.zon .listcard,body.zon .pick,body.zon .mini{background:#fff!important;box-shadow:0 0 0 2px #141A22!important}
body.zon .seg .t-C{background:var(--green);color:#fff}body.zon .seg .t-A{background:var(--red);color:#fff}body.zon .seg .t-V{background:#A65A00;color:#fff}
body.zon .seg button.dim{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
body.zon .seg button.on-C,body.zon .seg button.on-A,body.zon .seg button.on-V{box-shadow:inset 0 0 0 4px #141A22}
body.zon .badge,body.zon .lbl{box-shadow:inset 0 0 0 1.5px currentColor}
body.zon .b-C{background:var(--green);color:#fff}body.zon .b-A{background:var(--red);color:#fff}body.zon .b-V{background:#A65A00;color:#fff}
body.zon .lbl.vs,body.zon .b-vs{background:#4b2f99;color:#fff}
body.zon .pick .waarom,body.zon .pick .gebruik,body.zon .waarom{color:#3d2580}
body.zon .chipb{box-shadow:inset 0 0 0 2px #141A22}
body.zon .inbox textarea,body.zon .fin{box-shadow:inset 0 0 0 2px #141A22}
body.zon .btn.ghost{box-shadow:inset 0 0 0 2px #141A22}
body.zon .hint{background:#FFE9A8;color:#141A22;box-shadow:0 0 0 2px #141A22}
body.zon .toast{background:#fff;color:var(--green);box-shadow:0 0 0 2px var(--green)}
body.zon .opslag.ok{background:var(--green);color:#fff}
/* smalle schermen: merknaam inkorten zodat account/zoeken/weergave passen */
@media(max-width:440px){.brand span:not(.logo){display:none}.topbar{padding:14px 16px 6px}}

/* ---- meldingen ---- */
.bel{position:relative}
.belnr{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 4px}
.alertbar{position:sticky;top:0;z-index:15;margin:2px 20px 8px;background:#FFF4E5;color:#7A4A0A;border:1px solid #F5D9AE;border-radius:12px;padding:7px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:550;font-size:13px;cursor:pointer}
.alertbar svg{flex:none;width:16px;height:16px;opacity:.8}.alertbar .al-t{flex:1;min-width:0;text-align:left;line-height:1.35}
.alertbar b{white-space:nowrap}
@media(min-width:720px){.alertbar{margin:4px 24px 10px;font-size:13.5px;padding:8px 14px}}
.alertbar b{font-weight:650}
body.zon .alertbar{background:#fff;color:#141A22;border:2px solid #A65A00}
@media(max-width:440px){.acrol{display:none}}
/* stijl B: laatste woord voor notice en bel-teller */
.alertbar{background:#fff;border:0;color:#8A5A1C;font-weight:700;border-radius:18px;box-shadow:var(--shadow)}
.belnr{background:#E09A3E;top:-3px;right:-3px}
body.zon .alertbar{background:#fff;color:#141A22;border:2px solid #A65A00}
.kpis{gap:12px}.tile{padding:16px}
@media(max-width:440px){.tile .n{font-size:26px}}

/* ================= Computer (webversie): menu links, breed dashboard ================= */
.sidebrand{display:none}
.tablewrap{overflow-x:auto}
.card h3 .btn,.card h2.kaartkop .btn{font-size:13px}
@media(min-width:900px){
  #app{max-width:none;margin:0;padding-left:252px}
  #app.nonav{padding-left:0}
  .tabbar{position:fixed;top:0;bottom:0;left:0;right:auto;width:236px;max-width:none;margin:0;flex-direction:column;justify-content:flex-start;gap:4px;
    padding:22px 14px;border-radius:0 30px 30px 0;box-shadow:1px 0 0 var(--line),8px 0 24px rgba(120,90,50,.05);background:#fff}
  .tabbar a{flex:none;flex-direction:row;gap:12px;padding:12px 14px;border-radius:16px;font-size:15px;justify-content:flex-start}
  .tabbar a:hover{background:#FBF7F1}
  .tabbar a.on{background:var(--accent-bg);color:var(--accent)}
  .tabbar .ic{width:22px;height:22px}
  .sidebrand{display:flex;align-items:center;gap:12px;padding:4px 10px 26px;font-weight:800;font-size:16px;color:var(--ink)}
  .sidebrand small{display:block;font-size:12.5px;color:var(--soft);font-weight:700}
  .sidebrand .logo{width:38px;height:38px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800}
  .topbar .brand{visibility:hidden}
  .topbar{padding:18px 36px 6px}
  .alertbar{margin:4px 36px 10px}
  .view{padding:8px 36px 48px}
  /* alle schermen gebruiken de volle breedte naast het menu (geen lege rechterhelft op een groot scherm);
     alleen de inspectie zelf (zonder menu) blijft één gecentreerde kolom: een gesprek, geen formulier */
  #app.nonav .view,#app.nonav .topbar{max-width:860px;margin-left:auto;margin-right:auto}
  /* Power BI-raster */
  .dashgrid{grid-template-columns:minmax(0,1fr)}
  .dashgrid .card{padding:20px 22px}
  .dashgrid svg{max-height:240px}
  .view[data-page=dashboard] .kpis{grid-template-columns:repeat(5,1fr)}
  .view[data-page=dashboard] .tile .n{font-size:32px}
  .hero .t{font-size:26px}
  #mod{max-width:720px}
}
/* twee gelijke kolommen vanaf 1200px; kaarten in een rij even hoog (stretch), zodat er geen lege gaten vallen:
   rij 1 de trend over de volle breedte, rij 2 de twee staafgrafieken (zelfde opbouw, zelfde hoogte),
   rij 3 de ring (ring en legenda naast elkaar) naast de klassen. Geen derde kolom: dan worden de grafieken
   zo smal dat de maandnamen de kleinste tekst op het scherm zijn. */
@media(min-width:1200px){
  .dashgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dashgrid .grafiek{display:flex;flex-direction:column}
  .dashgrid .grafiek>.legend{margin-top:auto;padding-top:8px}
  .dashgrid .grafiek>.donut{flex:1;align-content:center;justify-content:center;gap:28px}
  .dashgrid .grafiek>.donut .donutleg{flex:0 1 260px}
  .dashgrid .grafiek>.kbars{flex:1;justify-content:space-around;padding-bottom:4px}
}
@media(min-width:900px){
  .dashgrid{align-items:stretch}
  #app.nonav .topbar .brand{visibility:visible}
}
@media(min-width:900px){#app.nonav .view,#app.nonav .topbar{width:100%}}

/* ---- vrolijke grafieken in app-stijl ---- */
.grafiek h3,.grafiek h2.kaartkop{font-size:17px;font-weight:800}
.grafiek h3 .sub,.grafiek h2.kaartkop .sub{font-size:13px;font-weight:700;color:var(--soft);margin-left:6px}
.svgchart{width:100%;height:auto;font-family:Nunito,system-ui,sans-serif;overflow:visible}
.legend{gap:14px;margin-top:8px}
.legend span{font-weight:700;font-size:12.5px}
.legend i{width:11px;height:11px;border-radius:50%}
.donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.svgdonut{width:170px;height:170px;flex:none;font-family:Nunito,system-ui,sans-serif}
.donutleg{flex:1;min-width:160px;display:flex;flex-direction:column;gap:8px}
.donutleg div{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.donutleg i{width:12px;height:12px;border-radius:50%;flex:none}
.donutleg span{flex:1;color:var(--soft)}
.kbars{display:flex;flex-direction:column;gap:10px}
.kbar{display:grid;grid-template-columns:150px 1fr 30px;gap:12px;align-items:center;width:100%;text-align:left}
.kbar .kl{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbar .spoor{display:flex;height:14px;border-radius:999px;background:#F6F0E7;overflow:hidden}
.kbar .spoor span{height:100%}
.kbar b{font-size:14px;text-align:right}
.kbar:hover .kl{color:var(--accent)}
@media(min-width:900px){
  .dashgrid .breed{grid-column:1/-1}
  .dashgrid svg.svgchart{max-height:none}
}

/* ---- acties-tabel (computer) ---- */
.tabelkaart{padding:6px 8px!important}
.atabel{font-size:14px}
.atabel th{font-size:12.5px;font-weight:800;color:var(--soft);padding:12px 12px;border-bottom:1px solid #F4EDE3}
.atabel td{padding:12px;border-bottom:1px solid #F4EDE3;vertical-align:middle}
.atabel tr:last-child td{border-bottom:0}
.atabel tbody tr{cursor:pointer}.atabel tbody tr:hover td{background:#FCF9F4}
.atabel .at{font-weight:800;line-height:1.3}
.pers{display:inline-flex;align-items:center;gap:8px;font-weight:700;white-space:nowrap}
.atabel .pers .ilabel{max-width:220px}
.atabel .atcel{min-width:240px}.atabel .atst{margin-bottom:5px}.atabel td:not(.atcel){white-space:nowrap}
/* Acties, groot scherm (≥ 1500px): lijst links, overzicht rechts (js/acties.js actieZij) */
.avolgend{margin-top:18px}
/* naast het overzicht: alle tabellen dezelfde kolommen, zodat ze onder elkaar netjes uitlijnen */
.ahoofd .atabel{table-layout:fixed;width:100%}
.ahoofd .atabel th:nth-child(2),.ahoofd .atabel th:nth-child(3){width:22%}.ahoofd .atabel th:nth-child(4){width:14%}
.ahoofd .atabel td:not(.atcel){overflow:hidden}.ahoofd .atabel .pers{max-width:100%}.ahoofd .atabel .pers .ilabel{max-width:100%}
.avkop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.avkop .vsectie{margin:4px 4px 8px}
.leeg.kort{padding-top:18px;padding-bottom:18px}
.agrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:24px;align-items:start}
.azij{display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--tb) + 16px)}
.azkaart{padding:18px 20px}
.azkop{font-size:15px;font-weight:800;margin:0 0 10px}
.azstand{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.azstand div{display:flex;flex-direction:column;padding:10px 12px;border-radius:14px;background:#FBF7F1}
.azstand div:last-child:nth-child(odd){grid-column:1/-1}
.azstand b{font-size:22px;font-weight:800;line-height:1.1}
.azstand span{font-size:12.5px;font-weight:700;color:#6E6255}
.azlijst{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.azlijst li{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;border-top:1px solid #F4EDE3}
.azlijst li:first-child{border-top:0}
.aztal{display:inline-flex;align-items:center;gap:8px;flex:none}
.aztal b{min-width:20px;text-align:right;font-size:15px}
.azactie{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 0;text-align:left}
.azactie .azt{flex:1;min-width:0;font-size:13.5px;font-weight:700;line-height:1.3}
.azactie:hover .azt{color:var(--accent)}
body.zon .azstand div{background:#fff;box-shadow:inset 0 0 0 2px #141A22}
body.zon .azstand span{color:#141A22}

/* ---- kwartaalrapportage ---- */
.kwrap{display:flex;flex-direction:column;gap:14px}
.kwkop{display:flex;justify-content:space-between;align-items:flex-start;background:var(--accent-bg);border-radius:28px;padding:22px 24px;position:relative;overflow:hidden}
.kwkop::after{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;background:#C6DFD2}
.kwkop>*{position:relative;z-index:1}
.kwtitel{font-size:28px;font-weight:800;margin:2px 0 4px}
.logo.groot{width:52px;height:52px;border-radius:16px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px}
.kwverhaal p{font-size:16px;line-height:1.6}
.kwkpis .sub{min-height:18px}
.delta{display:inline-block;font-weight:800;font-size:12.5px;margin-left:2px}
.delta.op{color:#2F7A5F}.delta.neer{color:#B4562F}
.kwrij{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F4EDE3;font-weight:700}
.kwrij:last-child{border-bottom:0}
.kwrij .nr{width:26px;height:26px;border-radius:50%;background:var(--warm);color:var(--warm-ink);display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
.bolletje{width:12px;height:12px;border-radius:50%;flex:none}
.kwthema{font-size:14px;font-weight:700;padding:4px 0}
.kwnoot p{line-height:1.6}
.kwteken{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;padding-top:14px;border-top:1px dashed #E8DDCD}
.lijntje{border-bottom:1.5px solid #CFC2B0;height:26px}
@media(min-width:900px){.kwgrid{grid-template-columns:1fr 1fr}}
@media print{
  .tabbar,.topbar,.alertbar,.noprint{display:none!important}
  #app{padding-left:0!important}
  body{background:#fff}
  .kwrap .card,.kwrap .tile,.kwkop{box-shadow:0 0 0 1px #EFE6DA!important;break-inside:avoid}
  .view{max-width:none!important;padding:0!important}
  .dashgrid{grid-template-columns:1fr 1fr!important}.dashgrid .breed{grid-column:1/-1}
  .kpis{grid-template-columns:repeat(4,1fr)!important}
  @page{size:A4;margin:14mm}
}
.kwrij .grow{flex:1;min-width:0}
.tabp{white-space:nowrap}
.btn svg,.tabp svg,.chip svg,.rondknop svg{width:auto;flex:none;display:inline-block}
.dchip{white-space:nowrap}

/* ---- planning ---- */
.btn.plannen{width:100%;margin:0 0 14px;min-height:56px;box-shadow:inset 0 0 0 2px var(--accent-bg);color:var(--accent);background:#fff}
.hero.rustig{background:#fff;box-shadow:var(--shadow)}.hero.rustig::after{background:#F6F0E7}
.hero.rustig .k{color:var(--soft)}.hero.rustig .s{color:var(--soft)}
.pkaarten{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.pkaart{background:#fff;border-radius:24px;padding:16px 18px;box-shadow:var(--shadow)}
.pkaart .boven{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pkaart .titel{font-size:18px;font-weight:800;margin:10px 0 2px}
.pkaart .onder{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:13px;font-weight:700;color:var(--soft)}
.pkaart .wijzig{margin-left:auto;font-size:13px;font-weight:800;color:var(--accent)}
h2.warmkop{color:var(--warm-ink)}
h2 .s{font-size:14px;font-weight:700}
.pkaart .btn.sm{width:auto;min-height:38px;padding:0 18px}
@media(min-width:900px){.view[data-page=planning]>.btn.primary{width:auto;padding:0 28px}}
/* groot scherm: elke geplande inspectie één brede rij (datum · wat en waar · inspecteur · wijzig), zodat een
   rubriek met één of twee inspecties de breedte vult in plaats van een derde van een raster */
@media(min-width:1100px){
  .plijst{grid-template-columns:minmax(0,1fr);gap:10px}
  .plijst>.pkaart{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) minmax(200px,300px);column-gap:24px;align-items:center;position:relative;padding:14px 24px;border-radius:20px;min-height:76px}
  .plijst>.pkaart>.boven{grid-column:1;grid-row:1/span 3}
  .plijst>.pkaart>.titel{grid-column:2;margin:0;font-size:17px}
  .plijst>.pkaart>.s{grid-column:2}
  .plijst>.pkaart>.onder{grid-column:3;grid-row:1/span 3;margin:0}
  .plijst>.pkaart:has(.wijzig){padding-right:118px}
  .plijst>.pkaart .wijzig{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 14px;border-radius:999px}
  .plijst>.pkaart .wijzig:hover{background:var(--accent-bg)}
}

/* ---- inspecties met filter ---- */
.filterbalk{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.filtersel{width:auto;flex:1;min-width:150px;max-width:280px;font-weight:700;background:#fff}
.filtersel.aan{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent)}
.linkje{font-weight:800;color:var(--accent);font-size:14px;padding:8px}
.ikaarten{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.ikaart{background:#fff;border-radius:24px;padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.ikaart .onder{margin-top:auto!important;padding-top:10px}
/* kaarten naast elkaar: datum, titel, nummer, inspecteur en monteurs op dezelfde hoogte (subgrid; anders flex hierboven) */
@supports (grid-template-rows:subgrid){
  @media(min-width:700px){
    .ikaart{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start}
    .ikaart .titel{align-self:start}.ikaart .onder{margin-top:0!important;align-self:end}.ikaart .monteurs{align-self:start}
  }
}
.ikaart .boven{display:flex;gap:8px;align-items:center;justify-content:space-between}
.ikaart .titel{font-size:17px;font-weight:800;margin:10px 0 2px}
.ikaart .onder{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:13px;font-weight:700;color:var(--soft)}
.monteurs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mchip{font-size:12px;font-weight:700;background:#F4EDE3;color:#6E6255;border-radius:999px;padding:3px 9px}
.mchip.aan{background:var(--accent);color:#fff}

/* ================= Vandaag · rustig, één blik, starten in de duimzone ================= */
.vkop .hi{margin-top:6px;color:#6E6255}
.view[data-page=vandaag] h1.groot{font-size:27px;line-height:1.15;margin:2px 0 16px}
.vsectie{font-size:13px;font-weight:800;color:#6E6255;letter-spacing:.04em;text-transform:uppercase;margin:22px 4px 8px}
.vplan .hero{margin-bottom:0}
.vplan svg,#mijnact svg,.vmeer svg,.vdock svg,.vbinnen svg,.vlaatst svg{width:auto;display:inline-block;flex:none}
.hero .meta,.vrij .meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:14.5px;font-weight:700;color:#3F5E54}
.hero .meta span,.vrij .meta>span{display:inline-flex;align-items:center;gap:5px}
.hero .meta svg,.vrij .meta svg{opacity:.75;flex:none}
.hero .t{font-size:26px;line-height:1.15}
.hero .nogte,.vrij .nogte{color:var(--warm-ink)}
.hero.rustig .t{font-size:21px}
.hero.rustig .s{color:#6E6255}
/* lijst-rijen: één doel per rij, groot genoeg voor handschoenen */
.vlijst{padding:2px 14px}
.vrij,.vknop{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:10px 2px;text-align:left;border-bottom:1px solid #F4EDE3}
.vrij:last-child,.vknop:last-child{border-bottom:0}
.vrij .grow,.vknop .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.vrij .k{font-size:12.5px;font-weight:800;color:#6E6255}
.vrij .t,.vknop .t{font-size:16.5px;font-weight:800;color:var(--ink);line-height:1.25}
.vrij .meta{font-size:13.5px;color:#6E6255;margin-top:2px}
.vknop .s{font-size:13.5px;font-weight:700;color:#6E6255;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vknop>svg{color:#9C8F80;flex:none}
.vknop .cirkel{width:44px;height:44px;background:var(--accent-bg);color:var(--accent)}
.vknop .nr{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:19px;font-weight:800;background:var(--accent-bg);color:var(--accent)}
.vknop .nr.nul{background:var(--accent-bg);color:var(--accent)}
.vknop.warm .nr{background:var(--warm);color:var(--warm-ink)}
.vknop.warm .s{color:var(--warm-ink)}
.vknop:active,.vrij:has(.startpil:active){background:#FBF7F1}
.startpil{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:56px;min-width:96px;padding:0 18px;border-radius:18px;background:var(--accent-bg);color:var(--accent);font-weight:800;font-size:16px;justify-content:center}
.startpil svg{fill:currentColor}
/* startbalk: vast boven de tabbalk, in de duimzone */
.vdock{position:fixed;left:0;right:0;bottom:66px;z-index:19;padding:14px 16px 12px;background:linear-gradient(to top,var(--bg) 0,var(--bg) 72%,rgba(250,246,239,0));max-width:1200px;margin:0 auto}
.btn.groot{min-height:68px;justify-content:flex-start;gap:14px;padding:10px 20px 10px 12px;border-radius:22px;box-shadow:0 8px 22px rgba(47,93,80,.28);text-align:left;white-space:normal}
.btn.groot .ic{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.btn.groot .ic svg{fill:currentColor}
.btn.groot .tekst{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.btn.groot b{font-size:18.5px;font-weight:800}
.btn.groot small{font-size:13.5px;font-weight:700;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.view:has(.vdock){padding-bottom:190px}
/* zichtbare reactie op elke tik (lawaai: je hoort de tik niet) */
.btn:active:not(:disabled),.startpil:active{transform:scale(.97);filter:brightness(.92)}
.btn,.startpil,.vknop{transition:transform .08s ease,filter .08s ease,background .12s}
/* productkeuze: grote rijen */
.prodrij{min-height:58px}
.prodrij .t{font-weight:800}
/* computer: startknop direct onder de kaart */
@media(min-width:900px){
  .vdock{position:static;padding:0;background:none;margin:12px 0 0}
  .view:has(.vdock){padding-bottom:48px}
  .vplan>.hero+.vdock{margin-top:12px}
  .vdock .btn.groot{width:auto;min-width:380px;padding-right:32px}
}
/* veldmodus en zonmodus voor dit scherm */
body.veld .btn.groot{min-height:76px}
body.veld .btn.groot b{font-size:20px}
body.veld .startpil{min-height:62px;font-size:17px}
body.veld .vrij,body.veld .vknop{min-height:76px}
body.veld .view:has(.vdock){padding-bottom:210px}
body.zon .vdock{background:#fff}
body.zon .btn.groot{box-shadow:0 0 0 3px #141A22}
body.zon .hero{background:#fff;box-shadow:0 0 0 2px #141A22}body.zon .hero::after{display:none}
body.zon .hero .k,body.zon .hero .meta,body.zon .hero .s,body.zon .vrij .k,body.zon .vrij .meta,body.zon .vknop .s,body.zon .vsectie,body.zon .vkop .hi{color:#141A22}
body.zon .hero .nogte,body.zon .vrij .nogte,body.zon .vknop.warm .s{color:#8A3005}
body.zon .vknop.warm .nr{background:#B93D0A;color:#fff}
body.zon .vknop .nr,body.zon .vknop .cirkel{box-shadow:inset 0 0 0 2px #141A22}
body.zon .startpil{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
@media(min-width:900px){body.zon .vdock{background:none}}
/* de grote kaart ÍS de startknop (geen tweede startbalk met dezelfde tekst): hele kaart tikbaar */
.heroknop{display:block;width:100%;text-align:left;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .08s ease,filter .08s ease}
.heroknop>span{display:block}
.heroknop .meta{display:flex}
.heroknop .hk-balk{display:flex;align-items:center;gap:12px;margin-top:16px;min-height:64px;padding:8px 14px 8px 9px;border-radius:20px;background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(47,93,80,.25)}
.heroknop .hk-balk .ic{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.heroknop .hk-balk .ic svg{fill:currentColor}
.heroknop .hk-balk svg{width:auto;display:inline-block;flex:none}
.heroknop .hk-t{flex:1;min-width:0;font-size:19px;font-weight:800;line-height:1.2}
.heroknop:active{transform:scale(.985);filter:brightness(.97)}
.heroknop:active .hk-balk{filter:brightness(.9)}
.heroknop:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hero.rustig.heroknop .hk-balk{background:var(--accent)}
body.veld .heroknop .hk-balk{min-height:76px}body.veld .heroknop .hk-t{font-size:21px}
body.zon .heroknop .hk-balk{background:#141A22;box-shadow:none}
@media(min-width:900px){.heroknop .hk-balk{display:inline-flex;min-width:380px;padding-right:22px}.heroknop .hk-t{flex:none;margin-right:auto}}

/* ================= Inspectie · kop en "Wat zie je?" (stem/foto, één hand, handschoenen, zon) ================= */
.ih-rij{display:flex;align-items:center;gap:10px}
.ih-rond{width:52px;height:52px;flex:none;border-radius:50%;background:#fff;box-shadow:var(--shadow),inset 0 0 0 1.5px #EADFCF;display:grid;place-items:center;color:var(--ink)}
.ih-rond:active{transform:scale(.95);background:#F4EDE3}
.ih-meta{flex:1;min-width:0;line-height:1.25}
.ih-titel{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ih-sub{font-size:13px;font-weight:700;color:#6B6055}
.inshead .opslag{display:inline-block;margin-top:3px;font-size:12px;padding:2px 9px}
.inshead .kicker{color:#6B6055}
.ih-vraag{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ih-vraag h1{margin:2px 0 4px;min-width:0}
.gevaarknop{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-height:52px;padding:0 14px;border-radius:999px;background:#fff;color:var(--red);font-weight:800;font-size:15px;box-shadow:inset 0 0 0 2px var(--red)}
.gevaarbalk svg{flex:none;width:20px;height:20px}.gevaarbalk span{flex:1;min-width:0}   /* svg niet 100% breed (globale svg-regel): anders duwt het pictogram de tekst uit beeld op 390px */
.gevaarknop:active{background:var(--red-bg);transform:scale(.97)}
.gevaarbalk{display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:10px;margin-top:10px;padding:12px 14px;border-radius:18px;background:var(--red);color:#fff;font-weight:800;font-size:15px}
/* het scherm vult de hoogte; de vang-knoppen staan onderin, binnen bereik van de duim */
.ziewrap{display:flex;flex-direction:column;min-height:calc(100vh - 68px);min-height:calc(100dvh - 68px)}
.view:has(.ziewrap){padding-bottom:0}
.ziekaart{padding:16px;margin-bottom:4px;flex:1;display:flex;flex-direction:column}
.ziehint{font-size:15px;font-weight:700;color:#5E544A;margin:0 2px 10px;line-height:1.35}
.ziebox{display:block;flex:1;width:100%;min-height:132px;border:0;border-radius:20px;padding:14px 16px;font:inherit;font-size:18px;line-height:1.4;resize:none;background:#FCFAF6;color:var(--ink);box-shadow:inset 0 0 0 1.5px #EADFCF}
.ziewrap:has(.micgroot.on) .ziebox{background:#fff;box-shadow:inset 0 0 0 2.5px var(--red)}
.ziebox::placeholder{color:#9A8E80}
.ziebox:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--accent)}
.ziekaart .partial{font-size:15px;font-weight:700;color:var(--accent-ink);min-height:0;margin:0}
.ziekaart .partial:not(:empty){margin-top:10px;padding:10px 14px;border-radius:16px;background:var(--accent-bg)}
.ziekaart .partial .hint{margin:0}
.fotoblok{display:flex;align-items:center;gap:12px;margin-top:12px;padding:8px;border-radius:20px;background:#FCFAF6;box-shadow:inset 0 0 0 1.5px #EADFCF}
.fotoblok img{width:84px;height:84px;object-fit:cover;border-radius:14px;flex:none;background:#F0E6D8}
.fotoblok .grow{flex:1;min-width:0;line-height:1.3}.fotoblok b{font-size:15px}.fotoblok .s{font-size:13px;color:#6B6055;font-weight:600}
.fotoweg{width:52px;height:52px;flex:none;border-radius:50%;background:#fff;color:var(--ink);font-size:26px;line-height:1;box-shadow:inset 0 0 0 1.5px #EADFCF}
.dock{position:sticky;bottom:0;z-index:5;margin-top:auto;padding:22px 0 calc(14px + env(safe-area-inset-bottom));background:linear-gradient(rgba(250,246,239,0),var(--bg) 22px)}
.vangrij{display:flex;gap:10px}
.micgroot{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:80px;padding:10px 16px 10px 12px;border-radius:26px;background:var(--accent);color:#fff;text-align:left;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;box-shadow:0 6px 18px rgba(47,93,80,.25);transition:background .12s,transform .08s}
.micgroot .mg-ic{width:56px;height:56px;flex:none;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.micgroot .mg-t{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.micgroot b{font-size:19px;font-weight:800;white-space:nowrap}.micgroot small{font-size:13.5px;font-weight:700;opacity:.88;margin-top:2px}
.micgroot .m-aan{display:none}
.micgroot.on{background:var(--red);box-shadow:0 6px 18px rgba(180,35,24,.3)}
.micgroot.on .m-aan{display:block}.micgroot.on .m-uit{display:none}
.micgroot.on .mg-ic{background:#fff;color:var(--red);animation:pulse 1.2s infinite}
.micgroot:active{transform:scale(.98)}
.fotogroot{width:92px;flex:none;min-height:80px;border-radius:26px;background:#fff;color:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:800;font-size:15px;box-shadow:var(--shadow),inset 0 0 0 2px var(--accent)}
.fotogroot:active{transform:scale(.97);background:var(--accent-bg)}
.volgknop{min-height:60px;margin-top:10px;font-size:17px}
.dock .linkknop{padding:14px 0 4px;min-height:52px}
@media(min-width:900px){.ziewrap{min-height:0}.ziebox{flex:none;min-height:180px}.dock{position:static;background:none;padding-bottom:24px}}
/* veldmodus: nog groter; zonmodus: hoog contrast */
body.veld .ih-rond,body.veld .gevaarknop,body.veld .fotoweg{min-height:58px;min-width:58px}
body.veld .micgroot,body.veld .fotogroot{min-height:92px}
body.veld .micgroot b{font-size:20px}
body.veld .ziebox{font-size:19px;min-height:140px}
body.veld .volgknop{min-height:66px}
body.zon .ih-rond,body.zon .fotoweg{box-shadow:inset 0 0 0 2px #141A22}
body.zon .ih-sub,body.zon .ziehint,body.zon .fotoblok .s,body.zon .inshead .kicker{color:#141A22}
body.zon .ziebox{background:#fff;box-shadow:inset 0 0 0 2px #141A22}
body.zon .ziebox::placeholder{color:#4a5260}
body.zon .fotoblok{background:#fff;box-shadow:inset 0 0 0 2px #141A22}
body.zon .dock{background:#fff}
body.zon .fotogroot{box-shadow:inset 0 0 0 3px #141A22;color:#141A22}
body.zon .micgroot{box-shadow:0 0 0 3px #141A22}
body.zon .gevaarknop{box-shadow:inset 0 0 0 3px var(--red)}
body.zon .ziekaart .partial:not(:empty){background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
@media(min-width:900px){body.zon .dock{background:none}}
/* ---- Koppel + oordeel: context boven, beslissen onderin (duimzone); Voorstel = lila kader, jouw keuze = groen ---- */
.stapwrap{display:flex;flex-direction:column;min-height:calc(100vh - 68px);min-height:calc(100dvh - 68px)}
.view:has(.stapwrap){padding-bottom:0}
.jijkaart{padding:14px 16px}
.vp-ref{flex:none;align-self:flex-start;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#F4EDE3;color:#6E6255;font-size:12.5px;font-weight:800;white-space:nowrap}
.kdock{position:static;background:none;padding-top:14px}
.vskaart{margin-top:0;padding:14px;box-shadow:var(--shadow),inset 0 0 0 2px #E6DEF6}
.vskaart .vskop .s{font-size:13.5px;font-weight:700;color:#6B6055}
.vpick{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px;padding:14px 14px 12px;background:#F7F4FC;border-radius:18px;transition:transform .08s ease,background .12s}
.vpick .t{font-size:17px;font-weight:800;line-height:1.3;color:var(--ink)}
.vpick .waarom{font-size:13.5px;font-weight:700;margin:0}
.vpick .gebruik{display:flex;align-items:center;justify-content:center;gap:8px;align-self:stretch;min-height:56px;margin-top:6px;border-radius:16px;background:var(--accent);color:#fff;font-size:17px;font-weight:800}
.vpick .gebruik svg{flex:none;width:20px;height:20px;display:inline-block}
.vpick + .vpick .gebruik{min-height:46px;font-size:15.5px;background:#fff;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.vpick .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vpick:active{transform:scale(.98);background:#EFE9FA}
.vpick-leeg{height:132px;margin-top:10px;border-radius:18px;background:linear-gradient(100deg,#F4F0FB 30%,#FBF9FE 50%,#F4F0FB 70%);background-size:300% 100%;animation:vsglans 1.3s linear infinite}
@keyframes vsglans{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.vpick-leeg{animation:none}}
.vs-geen{margin-top:8px;font-size:15px;font-weight:700;color:#5E544A;line-height:1.4}
.zelfkies{margin-top:10px}
.zelfkies summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:56px;padding:0 18px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1.5px #E8DDCD;font-weight:800;font-size:16px;cursor:pointer}
.zelfkies summary::-webkit-details-marker{display:none}
.zelfkies summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.zelfkies[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.zelfkies summary .n{min-width:26px;height:24px;padding:0 8px;border-radius:999px;background:#F4EDE3;color:#6E6255;font-size:12.5px;display:grid;place-items:center}
.zlijst{margin-top:8px;padding:6px;border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.zkop{padding:10px 12px 4px;font-size:13px;font-weight:800;color:#6B6055}
.zpick{display:flex;align-items:flex-start;gap:10px;width:100%;min-height:56px;padding:12px;border-radius:14px;text-align:left;font-weight:700;font-size:15px;line-height:1.35}
.zpick + .zpick{box-shadow:0 -1px 0 #F1EADF}
.zpick:active{background:#F4EDE3}
.zpick .t{flex:1;min-width:0;padding-top:2px}
.kdock .linkknop{min-height:56px;padding:14px 0 6px}
.okaart{padding:16px}
.koppelrij{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:12px 6px 12px 12px;border-radius:16px;background:#FCFAF6;box-shadow:inset 0 0 0 1.5px #EFE6DA}
.koppelrij .t{flex:1;min-width:0;font-weight:700;font-size:15px;line-height:1.35;padding-top:2px}
.wijzig{flex:none;min-height:44px;margin:-9px 0;padding:0 12px;border-radius:12px;color:var(--accent);font-weight:800;font-size:14.5px}
.wijzig:active{background:var(--accent-bg)}
.doorvraag{margin-top:12px;font-size:15px;line-height:1.45}
.okaart .gevaarbalk{margin-top:12px}
.otitel{margin:16px 2px 8px;font-size:15px;font-weight:800;color:var(--ink)}
.otitel span{font-weight:700;color:var(--soft)}
.odock{margin:auto -6px 0;padding:30px 6px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(rgba(250,246,239,0),var(--bg) 26px)}
.odock .otitel{margin-top:0}
.seg.stapel{flex-direction:column;gap:8px}
.seg.stapel button{flex:none;display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;min-height:68px;padding:9px 44px 9px 10px;border-radius:20px;background:#fff;color:var(--ink);text-align:left;white-space:normal;box-shadow:var(--shadow),inset 0 0 0 1.5px #EADFCF;transition:transform .08s ease,background .12s}
.seg.stapel .l{grid-row:1/3;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:23px;font-weight:800;color:#fff}
.seg.stapel .w{align-self:end;font-size:18px;font-weight:800;line-height:1.15}
.seg.stapel .u{align-self:start;font-size:13.5px;font-weight:700;color:#7A6E62;line-height:1.25;margin-top:2px}
.seg.stapel .t-C .l{background:var(--green)}.seg.stapel .t-A .l{background:var(--red)}.seg.stapel .t-V .l{background:var(--v-vol);color:var(--v-op)}
.seg.stapel .t-C:active,.seg.stapel .on-C{background:var(--green-bg)}
.seg.stapel .t-A:active,.seg.stapel .on-A{background:var(--red-bg)}
.seg.stapel .t-V:active,.seg.stapel .on-V{background:var(--amber-bg)}
.seg.stapel button:active{transform:scale(.98)}
.seg.stapel button.on-C{box-shadow:inset 0 0 0 3px var(--green)}.seg.stapel button.on-A{box-shadow:inset 0 0 0 3px var(--red)}.seg.stapel button.on-V{box-shadow:inset 0 0 0 3px var(--amber)}
.seg.stapel button.on-C::after,.seg.stapel button.on-A::after,.seg.stapel button.on-V::after{top:50%;right:18px;transform:translateY(-50%);font-size:20px}
.odock .linkknop.nvt{min-height:56px;padding:14px 0 4px}
@media(min-width:900px){.stapwrap{min-height:0}.kdock,.odock{position:static;background:none;margin:0;padding:18px 0 24px}}
body.veld .vpick .gebruik,body.veld .zelfkies summary,body.veld .zpick,body.veld .kdock .linkknop,body.veld .odock .linkknop.nvt{min-height:64px}
body.veld .vpick .t{font-size:18.5px}
body.veld .seg.stapel button{min-height:80px}
body.veld .seg.stapel .l{width:56px;height:56px;font-size:27px}
body.veld .seg.stapel button{grid-template-columns:56px 1fr}
body.veld .seg.stapel button .w{font-size:20px}body.veld .seg.stapel button .u{font-size:14.5px}
body.veld .wijzig{min-height:52px}
body.zon .vskaart{box-shadow:0 0 0 3px #4b2f99!important}
body.zon .vp-ref,body.zon .zelfkies summary .n{background:#fff;color:#141A22;box-shadow:inset 0 0 0 1.5px #141A22}
body.zon .zelfkies summary,body.zon .koppelrij{background:#fff;box-shadow:inset 0 0 0 2px #141A22}
body.zon .zlijst{box-shadow:0 0 0 2px #141A22}
body.zon .vs-geen,body.zon .zkop,body.zon .otitel span,body.zon .vskaart .vskop .s{color:#141A22}
body.zon .odock{background:#fff}
body.zon .seg.stapel button{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2.5px #141A22}
body.zon .seg.stapel .u{color:#141A22}
body.zon .seg.stapel .t-V .l{background:var(--v-vol);color:var(--v-op);box-shadow:inset 0 0 0 2px #141A22}
body.zon .seg.stapel button.on-C,body.zon .seg.stapel button.on-A,body.zon .seg.stapel button.on-V{box-shadow:inset 0 0 0 5px #141A22}
body.zon .seg.stapel button.on-C{background:var(--green-bg)}body.zon .seg.stapel button.on-A{background:var(--red-bg)}body.zon .seg.stapel button.on-V{background:var(--amber-bg)}

/* ---- Actie: voorstel in de inspectie + actievenster (wat · wie · wanneer · status; toetsregel zichtbaar; hoofdknop in de duimzone) ---- */
.akaart2{padding:16px}
.arij{display:flex;align-items:center;gap:8px;margin:14px 2px 8px;min-height:44px}
.arij .s{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:#6B6055;line-height:1.3}
.arij-t{flex:1;font-size:15px;font-weight:800}
.arij .arij-k{margin:0 -6px 0 auto;max-width:58%;white-space:normal;text-align:right;line-height:1.2}
.arij .arij-k:disabled{color:var(--soft)}
.arij-w{margin:-4px 2px 10px;font-size:13px;font-weight:700}
.kvlakken{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kvlak{min-height:60px;padding:8px 6px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1.5px #E8DDCD;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;transition:transform .08s ease,background .12s}
.kvlak .w{font-size:15px;font-weight:800;line-height:1.15}
.kvlak .u{font-size:12.5px;font-weight:700;color:#7A6E62}
.kvlak.on{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(47,93,80,.22)}
.kvlak.on .u{color:rgba(255,255,255,.88)}
.kvlak:active{transform:scale(.97)}
.kvuitleg{margin:10px 2px 0;font-size:13.5px;font-weight:600;color:#6B6055;line-height:1.4}
.hierna{margin-top:16px;padding:12px 12px 12px;border-radius:18px;background:#FCFAF6;box-shadow:inset 0 0 0 1.5px #EFE6DA}
.hierna-t{font-size:13px;font-weight:800;color:#6E6255;margin:0 2px 10px}
.adock .volgknop{margin-top:0}
.adock .volgknop svg{width:20px;height:20px}
/* statusverloop */
.aw-stap{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr)}
.aw-stap li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.aw-stap li::before{content:"";position:absolute;top:13px;left:-50%;right:50%;height:2.5px;background:#E8DDCD}
.aw-stap li:first-child::before{display:none}
.aw-stap li.klaar::before,.aw-stap li.nu::before{background:var(--accent)}
.aw-stap .bol{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 2px #E2D6C5;font-size:13px;font-weight:800;color:var(--soft)}
.aw-stap li.klaar .bol{background:var(--accent);color:#fff;box-shadow:none}
.aw-stap li.nu .bol{background:var(--accent-bg);color:var(--accent);box-shadow:inset 0 0 0 2.5px var(--accent)}
.aw-stap .bol svg{display:block}
.aw-stap .n{margin-top:5px;font-size:13px;font-weight:800;line-height:1.15}
.aw-stap li:not(.klaar):not(.nu) .n{color:var(--soft)}
.aw-stap .w{font-size:12px;font-weight:700;color:#7A6E62;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-stap li.nu .w{color:var(--accent)}
.aw-regel{margin:10px 2px 0;font-size:13.5px;font-weight:600;color:#5E544A;line-height:1.4}
.aw-regel b{color:var(--ink);font-weight:800}
/* actievenster */
.aw-kop{flex:1;min-width:0}
.aw-kick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#6E6255}
.aw-kick .badge{letter-spacing:0;text-transform:none}
.aw-titel{margin-top:6px;font-size:20px;font-weight:800;line-height:1.25}
.aw-blok{margin:2px 0 14px;padding:14px 12px 4px;border-radius:20px;background:#FCFAF6;box-shadow:inset 0 0 0 1.5px #EFE6DA}
.aw-blok:not(:has(.aw-feiten)){padding-bottom:14px}
.aw-feiten{margin:12px 0 0}
.aw-feiten>div{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:8px;min-height:44px;border-top:1px solid #EFE6DA;padding:4px 2px}
.aw-feiten dt{font-size:13px;font-weight:700;color:#6E6255}
.aw-feiten dd{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;font-weight:700;min-width:0}
.jijtag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--accent-bg);color:var(--accent);font-size:12px;font-weight:800}
.leegw{color:var(--soft);font-weight:600}
.aw-herkomst{margin:-6px 0 14px;font-size:12.5px;color:#6E6255}
#mod.actiemod>.btn{min-height:56px}
#mod.actiemod>details>summary{min-height:48px;display:flex;align-items:center;gap:6px}
.aw-vkop{font-size:14px!important}
#mod.actiemod:has(.aw-dock){padding-bottom:0}
.aw-dock{position:sticky;bottom:0;z-index:2;margin:16px -24px 0;padding:12px 24px calc(16px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -1px 0 #EFE6DA}
.aw-dock .btn{min-height:58px;font-size:17px}
.aw-dock .fout{margin:0 0 8px}.aw-dock .fout:empty{display:none}
@media(max-width:899px){
  #ov.actie{align-items:flex-end;padding:0}
  #ov.actie #mod{--mpx:20px;border-radius:28px 28px 0 0;max-height:92vh;max-height:92dvh;padding:0 20px 22px}
  #ov.actie #mod:has(.aw-dock){padding-bottom:0}
  #ov.actie .aw-dock{margin:16px -20px 0;padding-left:20px;padding-right:20px}
}
body.veld .kvlak{min-height:72px}body.veld .kvlak .w{font-size:16.5px}
body.veld .aw-dock .btn{min-height:64px}
body.veld #mod.actiemod>.btn{min-height:62px}
body.zon .hierna,body.zon .aw-blok{background:#fff;box-shadow:inset 0 0 0 2px #141A22}
body.zon .kvlak{box-shadow:inset 0 0 0 2px #141A22}
body.zon .kvlak.on{box-shadow:inset 0 0 0 3px #141A22}
body.zon .kvlak .u,body.zon .arij .s,body.zon .kvuitleg,body.zon .aw-regel,body.zon .aw-stap .w,body.zon .aw-feiten dt,body.zon .aw-herkomst,body.zon .aw-kick,body.zon .hierna-t,body.zon .leegw,body.zon .aw-stap li:not(.klaar):not(.nu) .n{color:#141A22}
body.zon .kvlak.on .u{color:#fff}
body.zon .aw-stap .bol{box-shadow:inset 0 0 0 2px #141A22;color:#141A22}
body.zon .aw-stap li.klaar .bol{box-shadow:none;color:#fff}
body.zon .aw-stap li::before{background:#141A22}
body.zon .aw-feiten>div{border-top-color:#141A22}
body.zon .aw-dock{box-shadow:0 -2px 0 #141A22}
.akaart2 .partial:empty{min-height:0;margin:0}
.akaart2 .arij .s{flex:1}
#mod.actiemod>.hint{display:none}
#mod.actiemod>details>summary{list-style:none;color:var(--accent);font-weight:800}
#mod.actiemod>details>summary::-webkit-details-marker{display:none}
#mod.actiemod>details>summary::after{content:"";width:8px;height:8px;margin-left:4px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
#mod.actiemod>details[open]>summary::after{transform:rotate(225deg) translateY(-2px)}
body.zon #mod.actiemod>details>summary{color:#141A22}
.akaart2 .arij .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* contrast (WCAG AA) binnen de actieblokken */
.aw-stap li:not(.klaar):not(.nu) .n,.leegw{color:#6E6255}
.aw-kick .b-todo,.aw-feiten .dchip.warm{color:#8A3005}

/* ---- Prioriteit (volgens de inspecteur) op actiekaart en actievenster: oplopende schaal ----
   direct = rood (hoogste), kort = geel/amber, planmatig = neutraal. Groen betekent "in orde/klaar" en
   warm oranje blijft voor "te laat"; daarom geen van beide hier. De punt wordt voller naarmate het dringender is. */
.pchip{display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px #E2D6C5;color:#5E544A;font-size:12.5px;font-weight:800;white-space:nowrap}
.pchip .pbol{width:8px;height:8px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px #A99D8F;flex:none}
.pchip.p-kort{background:#FBF3D2;color:#6B4E00;box-shadow:inset 0 0 0 1.5px #E7CF7A}
.pchip.p-kort .pbol{background:#C99A06;box-shadow:none}
.pchip.p-direct{background:var(--red-bg);color:var(--red);box-shadow:inset 0 0 0 2px var(--red)}
.pchip.p-direct .pbol{width:9px;height:9px;background:var(--red);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--red)}
.aw-feiten .pchip{height:28px;font-size:13.5px}
body.zon .pchip{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
body.zon .pchip .pbol{box-shadow:inset 0 0 0 2px #141A22}
body.zon .pchip.p-kort{background:#FFE58A;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
body.zon .pchip.p-kort .pbol{background:#141A22;box-shadow:none}
body.zon .pchip.p-direct{background:var(--red);color:#fff;box-shadow:none}
body.zon .pchip.p-direct .pbol{background:#fff;box-shadow:none}
/* actievenster: foto's bij de waarneming, "al klaar?"-keuzes voor de actiehouder */
.afotos{display:flex;gap:6px;flex:none;flex-wrap:wrap;max-width:45%;justify-content:flex-end}
.afotos img{width:64px;height:64px;object-fit:cover;border-radius:12px;background:#F0E6D8}
/* "Al klaar?": twee lichte keuzes onder elkaar, volle breedte, één regel tekst; de hoofdknop staat in de dock */
.alklaar{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px;padding:12px;border-radius:18px;background:#FCFAF6;box-shadow:inset 0 0 0 1.5px #EFE6DA}
.alk-t{font-size:13.5px;font-weight:800;color:#6E6255;margin:0 2px 2px}
.alklaar .btn{width:100%;min-height:48px;padding:6px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;font-size:15px;font-weight:700;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px #E2D6C5}
.alklaar .btn svg{flex:none;color:var(--accent)}
body.veld .alklaar .btn{min-height:58px}
body.zon .alklaar{background:#fff;box-shadow:inset 0 0 0 2px #141A22}
body.zon .alk-t{color:#141A22}
body.zon .alklaar .btn{box-shadow:inset 0 0 0 2px #141A22;color:#141A22}
/* zachte overgang boven de vaste knop: wat eronder doorloopt vervaagt in plaats van hard afgesneden te worden */
.aw-dock::before{content:"";position:absolute;left:0;right:0;top:-28px;height:28px;pointer-events:none;background:linear-gradient(rgba(255,255,255,0),#fff)}

/* ---- Koppelen + oordelen op één scherm (stap koppel) en compacte oordeelstap: geen lege middenruimte ---- */
.kstap,.ostap{min-height:0}
.kstap .jijkaart{padding:12px 14px}
.kstap .vskaart{margin-top:10px}
.kstap .vpick{padding:12px 14px;gap:4px}
.kstap .vp-top{display:flex;align-items:center;justify-content:space-between;gap:8px;align-self:stretch;flex-wrap:wrap}
.kstap .vpick .gebruik,.kstap .vpick + .vpick .gebruik{display:inline-flex;align-self:auto;min-height:44px;margin:0;padding:0 14px;border-radius:999px;font-size:14.5px;gap:6px;background:var(--accent);color:#fff;box-shadow:none}
.kstap .vpick.een .gebruik{background:#fff;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.kstap .vpick .gebruik svg{width:16px;height:16px}
.kstap .vpick .t{font-size:16.5px}
.kstap .doorvraag{margin-top:10px}
.odock.vlak{position:static;margin:14px 0 0;padding:2px 0 4px;background:none}
.odock.vlak .otitel{margin:0 2px 8px}
.odock.vlak .otitel span,.okaart .otitel span{color:#6E6255}
.odock.vlak .seg.stapel button{min-height:64px}
.odock.uit .seg.stapel button{background:#F6F1EA;box-shadow:inset 0 0 0 1.5px #EADFCF;cursor:default}
.odock.uit .seg.stapel .l{background:#C9BFB2}
.odock.uit .seg.stapel button:active{transform:none}
.odock.uit .linkknop.nvt{color:var(--soft);cursor:default}
.ostap .okaart{padding:14px 16px}
.kzelf{margin:4px 0 24px}
.kzelf .linkknop{min-height:56px;padding:14px 0 6px}
body.veld .odock.vlak .seg.stapel button{min-height:80px}
body.veld .kstap .vpick .gebruik{min-height:52px}
body.veld .kzelf .linkknop{min-height:64px}
body.zon .odock.vlak{background:none}
body.zon .odock.vlak .otitel span,body.zon .okaart .otitel span{color:#141A22}
body.zon .kstap .vpick .gebruik{background:#141A22;color:#fff}
body.zon .kstap .vpick.een .gebruik{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
body.zon .odock.uit .seg.stapel button{background:#fff;box-shadow:inset 0 0 0 2px #8B7F72;opacity:.7}
@media(min-width:900px){.odock.vlak{padding:4px 0 12px}.kzelf{margin-bottom:28px}}

/* ---- "Wat zie je?": meerdere foto's per waarneming (overzicht + detail), elk met eigen verwijderknop ---- */
.fotoblok.multi{display:block;padding:10px 10px 12px}
.fb-kop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 4px 8px;line-height:1.3}
.fb-kop b{font-size:15px}
.fb-kop .s{font-size:13px;color:#6B6055;font-weight:600}
.fb-rij{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.fb-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.fb-beeld{position:relative;aspect-ratio:1/1;border-radius:14px;background:#F0E6D8;overflow:hidden}
.fb-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.fb-nr{position:absolute;left:6px;top:6px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:rgba(42,38,34,.72);color:#fff;font-size:12.5px;font-weight:800;display:grid;place-items:center}
.fb-leeg{display:grid;place-items:center;height:100%;font-size:13px;color:#6B6055}
/* verwijderknop ónder de foto (niet erop): de foto blijft heel zichtbaar, misgrijpen met handschoenen raakt de foto niet */
.fb-item .fotoweg{position:static;width:100%;height:auto;min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:12px;background:#fff;color:#5E544A;font-size:14px;font-weight:800;box-shadow:inset 0 0 0 1.5px #EADFCF}
.fb-item .fotoweg span{font-size:20px;line-height:1;font-weight:700}
.fb-item .fotoweg:active{background:#F4EDE3}
.fototoast{margin-top:10px}
.fotogroot:disabled{opacity:.45;cursor:default}
/* "Jij"/"Inspecteur" + de woorden + duimpjes: een lange URL of samenstelling breekt af en duwt de foto's niet buiten beeld */
.citaat{display:flex;gap:10px;align-items:flex-start;min-width:0}
.cit-t{flex:1;min-width:0;font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.vastgelegd .row .grow{overflow-wrap:anywhere}
.fduimen{display:inline-flex;gap:4px;flex:none;align-items:center}
.fduimen img{height:var(--fh,52px);width:var(--fh,52px);object-fit:cover;border-radius:10px;background:#F0E6D8}
.fduimen .fmeer{min-width:30px;height:30px;padding:0 6px;border-radius:999px;background:#F4EDE3;color:#5E544A;font-size:12.5px;font-weight:800;display:grid;place-items:center}
body.veld .fb-item .fotoweg{width:100%;height:auto;min-width:0;min-height:52px}
body.zon .fb-kop .s{color:#141A22}
body.zon .fb-item .fotoweg{box-shadow:inset 0 0 0 2px #141A22;color:#141A22}
.vs-alt-kop{margin:12px 2px 2px;font-size:13.5px;font-weight:800;color:#5E544A}
.kstap .vpick.alt{flex-direction:row;align-items:center;gap:10px;margin-top:6px;padding:8px 8px 8px 12px;background:#fff;box-shadow:inset 0 0 0 1.5px #E6DEF6;min-height:56px}
.kstap .vpick.alt .vp-ref{align-self:center}
.kstap .vpick.alt .t{flex:1;min-width:0;font-size:14.5px;font-weight:700;-webkit-line-clamp:2}
.kstap .vpick.alt .gebruik{flex:none;min-height:40px;padding:0 12px;font-size:13.5px;background:#fff;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
body.veld .kstap .vpick.alt{min-height:64px}
body.zon .vs-alt-kop{color:#141A22}
body.zon .kstap .vpick.alt{box-shadow:inset 0 0 0 2px #141A22}
body.zon .kstap .vpick.alt .gebruik{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
.vs-alt{margin-top:8px}
.vs-alt summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 6px;font-size:14.5px;font-weight:800;color:#5B46A0;cursor:pointer}
.vs-alt summary::-webkit-details-marker{display:none}
.vs-alt summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.vs-alt[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.vs-alt summary .n{min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:#EAE4F7;color:#5B46A0;font-size:12.5px;display:grid;place-items:center}
body.veld .vs-alt summary{min-height:58px}
body.zon .vs-alt summary,body.zon .vs-alt summary .n{color:#141A22}

/* ---- Koppelen: Voorstel-kaart met optionele maatregelen; de regelkaart zelf = de hele regel lezen (geen tweede "ja") ---- */
.kstap .vp-meer{font-size:13.5px;font-weight:800;color:#5B46A0;white-space:nowrap}
.vs-mr{margin-top:10px;border-radius:16px;background:#FCFAF6;box-shadow:inset 0 0 0 1.5px #EFE6DA}
.vs-mr summary{list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-height:52px;padding:0 14px;font-size:15px;font-weight:800;cursor:pointer}
.vs-mr summary::-webkit-details-marker{display:none}
.vs-mr summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.vs-mr[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.vs-mr .opt{font-size:13px;font-weight:700;color:#6E6255}
.vs-mr summary:has(.n) .opt{display:none}
.vs-mr .n{height:24px;padding:0 9px;border-radius:999px;background:var(--accent-bg);color:var(--accent-ink);font-size:12.5px;display:inline-grid;place-items:center}
.vs-mr .chips{padding:0 10px 12px}
.zbuiten .vp-ref{min-width:30px;justify-content:center}
body.veld .vs-mr summary{min-height:60px}
body.zon .kstap .vp-meer{color:#141A22}
body.zon .vs-mr{background:#fff;box-shadow:inset 0 0 0 2px #141A22}
body.zon .vs-mr .opt{color:#141A22}
body.zon .vs-mr .n{background:#141A22;color:#fff}
/* oordeelstap: rustige "Hierna"-strook onder de knoppen in plaats van een lege vlakte */
.ohierna{margin:6px 0 24px}
.oh-rij{display:flex;align-items:baseline;gap:10px;padding:6px 2px;font-size:14px;font-weight:600;color:#5E544A;line-height:1.35}
.oh-rij + .oh-rij{border-top:1px solid #EFE6DA}
.oh-l{flex:none;min-width:64px;font-weight:800;color:var(--ink)}
body.zon .oh-rij{color:#141A22}
body.zon .oh-rij + .oh-rij{border-top-color:#141A22}

/* ================= Toegankelijkheid (WCAG 2.2 AA) ================= */
/* landmarks: <header>, <main id="hoofd"> (alertbalk + #view) en <nav> (index.html) */
#hoofd{flex:1;display:flex;flex-direction:column;min-width:0}
button.alertbar{width:auto;text-align:left}
/* alleen voor schermlezers */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* skiplink: pas zichtbaar bij toetsenbordfocus */
.skiplink{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:#fff;font-weight:700;padding:10px 16px;border-radius:12px;transition:top .1s}
.skiplink:focus{top:12px}
/* zichtbare focus voor toetsenbord (muis/aanraken: geen ring) */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.inbox textarea:focus-visible,.fin:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.row[role="button"]:focus-visible,tr[role="button"]:focus-visible{outline-offset:-3px;border-radius:12px}
g[role="button"]:focus-visible{outline:3px solid var(--accent)}
#mod:focus,#view:focus,h1[tabindex="-1"]:focus,[tabindex="-1"]:focus:not(:focus-visible){outline:none}
body.zon :focus-visible{outline:3px solid #141A22;outline-offset:2px}
body.zon #mod:focus,body.zon #view:focus,body.zon h1[tabindex="-1"]:focus{outline:none}   /* programmatische focus op de kop: ook in zonmodus geen kader (de zonregel hierboven heeft dezelfde specificiteit) */
/* opslagstatus: "opnieuw" is een echte knop */
.opnieuwlink{text-decoration:underline;font-weight:700;color:inherit;padding:0 2px;min-height:24px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* focus nooit (helemaal) achter een vaste of plakkende balk (WCAG 2.4.11): de browser scrolt het element
   met toetsenbordfocus dan tot boven de onderste tabbalk, de plakkende knoppenbalk (.dock) of de modalbalk (.aw-dock) */
@media(max-width:899px){
  html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  html:has(body.veld){scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  html:has(#tabbar.hidden .dock:not(.odock)),html:has(.view .dock:not(.odock)){scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom))}
}
/* boven: nooit onder de vaste kopbalk (en de alertbalk eronder) eindigen bij ankers en toetsenbordfocus */
/* +24px: ook de rand, binnenruimte en focusring van een tekstvak (Chrome scrolt naar de cursorregel, niet naar de bovenrand) */
html{scroll-padding-top:calc(var(--tb) + env(safe-area-inset-top) + 24px)}
html:has(.alertbar:not(.hidden)){scroll-padding-top:calc(var(--tb) + env(safe-area-inset-top) + 80px)}
#mod:has(.aw-dock){scroll-padding-bottom:104px}

/* ================= Vaste kopbalk: Demo-label, bel en account altijd in beeld (telefoon en computer) ================= */
:root{--tb:60px}
@media(min-width:900px){:root{--tb:68px}}
.topbar{position:sticky;top:0;z-index:30;background:var(--bg);height:calc(var(--tb) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);padding-bottom:0;transition:box-shadow .15s}
.topbar.schaduw{box-shadow:0 1px 0 var(--line),0 6px 16px rgba(120,90,50,.07)}
body.zon .topbar{background:#fff}body.zon .topbar.schaduw{box-shadow:0 2px 0 #141A22}
/* de alertbalk plakt direct onder de kopbalk (niet eronder verstopt). Een "rok" in de achtergrondkleur (twee
   schaduwen zonder vervaging) dekt de smalle strook erboven en de marges links en rechts af: geen inhoud die
   tussen kopbalk en alertbalk of ernaast doorschemert tijdens het scrollen. */
.alertbar{--ask:20px;top:calc(var(--tb) + env(safe-area-inset-top) + 4px);
  box-shadow:var(--shadow),calc(8px - var(--ask)) 0 0 8px var(--bg),calc(var(--ask) - 8px) 0 0 8px var(--bg)}
@media(min-width:720px){.alertbar{--ask:24px}}
@media(min-width:900px){.alertbar{--ask:36px}}
@media print{.topbar{position:static}}

/* ================= Venster: vaste kopregel "‹ scherm · titel · ×" (blijft staan als de inhoud scrolt) ================= */
.modkop{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;margin:0 calc(-1 * var(--mpx));padding:14px var(--mpx) 10px calc(var(--mpx) - 8px);min-height:72px;background:#fff;transition:box-shadow .15s}
.modkop.schaduw{box-shadow:0 1px 0 var(--line),0 6px 14px rgba(120,90,50,.07)}
.modterug{flex:none;display:inline-flex;align-items:center;gap:2px;min-height:48px;max-width:42%;padding:0 14px 0 8px;border-radius:999px;background:var(--accent-bg);color:var(--accent);font-weight:800;font-size:15px;line-height:1.1}
.modterug[hidden]{display:none}
.modterug .pijl{font-size:26px;line-height:1;margin:-3px 2px 0 0;font-weight:700}
.modterug .tn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modterug:active{filter:brightness(.95);transform:scale(.97)}
#modtitel{flex:1;min-width:0;font-size:20px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.modsluit{flex:none;width:48px;height:48px;border-radius:50%;background:#F3F4F6;font-size:24px;line-height:1;color:#4A5565;display:grid;place-items:center}
.modsluit:active{background:#E7E9ED}
.modsub{font-size:13px;margin:0 0 14px}
.modkop .aw-kop{flex:1;min-width:0}
.modkop .aw-kick{letter-spacing:.03em}
#mod>.aw-titel{margin:2px 0 6px}
@media(max-width:440px){#modtitel{font-size:18px}.modterug{font-size:14px;padding-right:12px}}
body.veld .modterug,body.veld .modsluit{min-height:56px}body.veld .modsluit{width:56px;height:56px}
body.zon .modkop{background:#fff}body.zon .modkop.schaduw{box-shadow:0 2px 0 #141A22}
body.zon .modterug{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
body.zon .modsluit{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
/* computer: de terugknop is daar een rustige tekstlink (geen tweede opvallende knop naast de titel en het ×); op de
   telefoon de grote pil in de duimzone. Doelgebied blijft ≥ 44px. */
@media(min-width:900px){
  .modterug{background:transparent;color:#5E544A;font-size:14px;padding:0 10px 0 4px;min-height:44px}
  .modterug:hover{background:#F6F1EA;color:var(--ink)}
  .modterug .pijl{font-size:22px}
  body.zon .modterug{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
}
/* systeemmelding in het meldingenvenster (bijv. "geblokkeerd"): neutraal grijs met een i, zodat hij niet lijkt op een
   statusblok (rood/oranje/blauw) */
.msys{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--mist);color:#374151;font-size:14px;line-height:1.45;border:1.5px dashed #C9CED6}
.msys-ic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#4A5565;color:#fff;font-weight:800;font-size:13px;font-style:italic;font-family:Georgia,serif}
body.zon .msys{background:#fff;color:#141A22;border:2px solid #141A22}
/* Planning: de ingeplande inspectie waar je vanuit een melding naartoe ging */
.pkaart.uitgelicht{box-shadow:0 0 0 3px #8A4B00,var(--shadow)}
.pkaart.uitgelicht:focus{outline:3px solid #8A4B00;outline-offset:3px}
body.zon .pkaart.uitgelicht{box-shadow:0 0 0 3px #141A22}

/* ================= Vandaag op een groot scherm: twee kolommen (inspecties links, acties en Meer rechts) ================= */
@media(min-width:1100px){
  .vgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0 28px;align-items:start}
  .vrechts>:first-child>.vsectie:first-child,.vrechts>.oef-tipplek+#mijnact>.vsectie:first-child{margin-top:0}
  .vrechts .oef-hint{margin-top:0}
  /* Vandaag: raster met rijen die even hoog zijn (js/vandaag.js), zodat beide kolommen even ver doorlopen */
  .vgrid.vandaaggrid{grid-template-areas:"top act" "binnen laatst" "meer meer";align-items:stretch}
  .vgrid.vandaaggrid.zonderlaatst{grid-template-areas:"top act" "binnen meer"}
  .vandaaggrid>.vlinks,.vandaaggrid>.vrechts{display:contents}
  .vandaaggrid .vtop{grid-area:top;display:flex;flex-direction:column;min-width:0}
  .vandaaggrid .vtop>.vplan{flex:1;display:flex;flex-direction:column}
  .vandaaggrid .vtop>.vplan>.heroknop:only-child,.vandaaggrid .vtop>.heroknop:first-child:nth-last-child(2){flex:1;margin-bottom:0}
  .vandaaggrid .vtop .heroknop{display:flex;flex-direction:column;justify-content:flex-start}
  .vandaaggrid .vtop .heroknop .hk-balk{margin-top:auto;align-self:flex-start}
  .vandaaggrid .vtop .heroknop>span.s,.vandaaggrid .vtop .heroknop>span.meta{margin-bottom:16px}
  .vandaaggrid .vact{grid-area:act;display:flex;flex-direction:column;min-width:0}
  .vandaaggrid .vact>#mijnact{flex:1;display:flex;flex-direction:column}
  .vandaaggrid .vact>#mijnact>.listcard{flex:1}
  .vandaaggrid .vact>#mijnact>.vsectie:first-child,.vandaaggrid .vact>.oef-tipplek+#mijnact>.vsectie:first-child{margin-top:0}
  .vandaaggrid .vbinnen{grid-area:binnen}.vandaaggrid .vlaatst{grid-area:laatst}
  .vandaaggrid .vbinnen,.vandaaggrid .vlaatst{display:flex;flex-direction:column;min-width:0}
  .vandaaggrid .vbinnen>.listcard,.vandaaggrid .vlaatst>.listcard{flex:1;display:flex;flex-direction:column}
  .vandaaggrid .vmeer{grid-area:meer;min-width:0}
  .vgrid.vandaaggrid:not(.zonderlaatst) .vmeer .listcard{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));column-gap:28px}
  .vgrid.vandaaggrid:not(.zonderlaatst) .vmeer .vknop{border-bottom:0}
}
/* voetregel onder "Binnenkort gepland" en "Laatste inspecties" (alleen groot scherm): staat altijd onderaan de kaart */
.vknop.vkvoet{margin-top:auto;min-height:56px;border-top:1px solid #F4EDE3;border-bottom:0}
.vknop.vkvoet .t{font-size:15px;color:var(--accent)}
/* Vandaag, groot scherm: binnenkort gepland en laatste inspecties onder de grote kaart (js/vandaag.js) */
.alleenbreed{display:none}
@media(min-width:1100px){.alleenbreed{display:block}}
.vtel{display:inline-grid;place-items:center;min-width:22px;height:20px;margin-left:4px;padding:0 6px;border-radius:999px;background:#F0E8DC;color:#5E544A;font-size:12px;letter-spacing:0;vertical-align:1px}
.vkbreed .vdat{flex:none;width:44px;height:48px;border-radius:14px;background:var(--accent-bg);color:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.vkbreed .vdat .w{font-size:11.5px;font-weight:800;text-transform:lowercase}
.vkbreed .vdat .d{font-size:19px;font-weight:800;margin-top:2px}
.vkbreed .vkwie{flex:none;max-width:42%;display:flex}
/* smallere computerschermen: de naam onder de titel in plaats van ernaast, zodat hij nooit wordt afgekapt */
@media(min-width:1100px) and (max-width:1699px){
  .vkbreed{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;row-gap:4px}
  .vkbreed>.vdat,.vkbreed>.cirkel{grid-row:1/span 2;align-self:center}
  .vkbreed>.grow{grid-column:2;grid-row:1}
  .vkbreed>.vkwie{grid-column:2;grid-row:2;max-width:100%;justify-self:start}
  .vkbreed>svg{grid-column:3;grid-row:1/span 2;align-self:center}
}
.vkbreed .cirkel{background:#F4EDE3;color:#6E6255}
body.zon .vkbreed .vdat,body.zon .vkbreed .cirkel{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}

/* ================= Persoonslabel: elke persoon een vaste eigen kleur (WPI.inspLabel / WPI.persIni in js/kern.js) =================
   Eén beeldtaal voor mensen (inspecteur, actiehouder, toetser, team). Alleen kleuren die in de app nog niets
   betekenen: geen groen (C, hoofdkleur), geel (V), rood (A, te laat), oranje (niet gedaan), blauw (binnenkort),
   lila (AI-Voorstel) en ook geen petrol/cyaan (lijkt op de hoofdkleur) of framboos/wijnrood (lijkt klein op rood).
   Wat overblijft: indigo, orchidee (paars-roze, ver van rood), leisteen, antraciet en lichtgrijs.
   Teamleden (ik0–ik6) gevuld: vol = witte naam op de kleur (indigo, orchidee, leisteen, antraciet),
   licht = gekleurde naam op een tint met een dunne rand (orchidee, lichtgrijs, indigo).
   Namen zonder profiel (fictieve voorbeelden, oud-collega's; ik7–ik12): rustig en kleurloos, alleen de naam in
   warm grijs met een klein rondje. Nooit te verwarren met een teamlid (dat heeft altijd een gevulde pil).
   Contrast: tekst ≥ 7:1 op de tint, wit op de kleur ≥ 6.5:1 (AA), ook in zonmodus. */
span.ilabel{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:26px;padding:2px 10px 2px 3px;border-radius:999px;font-size:13px;font-weight:800;line-height:1.2;vertical-align:middle;background:var(--ib);color:var(--ic)}
span.ilabel>span.ini,.pini{flex:none;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:11.5px;font-weight:800;line-height:1;background:var(--ic);color:#fff}
span.ilabel>span.nm{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
span.ilabel.leeg{padding:2px 10px;background:transparent;color:#6E6255;box-shadow:inset 0 0 0 1.5px #D9CFC2}
.pini{width:26px;height:26px;font-size:12.5px}
.ik0{--ic:#34368F}                  /* indigo (vol)          */
.ik1{--ic:#86198F;--ib:#F8E6FA}     /* orchidee (licht)      */
.ik2{--ic:#86198F}                  /* orchidee (vol)        */
.ik3{--ic:#2F4256;--ib:#E2E8EE}     /* lichtgrijs            */
.ik4{--ic:#4C5E74}                  /* leisteen (vol)        */
.ik5{--ic:#25292F}                  /* antraciet (vol)       */
.ik6{--ic:#34368F;--ib:#E6E7F5}     /* indigo (licht)        */
.ik7,.ik8,.ik9,.ik10,.ik11,.ik12{--ic:#5E544A}   /* geen profiel: kleurloos */
/* volle vorm: witte naam op de kleur, rondje omgekeerd */
span.ilabel:is(.ik0,.ik2,.ik4,.ik5){background:var(--ic);color:#fff}
span.ilabel:is(.ik0,.ik2,.ik4,.ik5)>span.ini{background:#fff;color:var(--ic)}
/* lichte vorm: tint met een dunne rand in de kleur, zodat licht en vol samen één familie zijn */
span.ilabel:is(.ik1,.ik3,.ik6){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 35%,transparent)}
/* het losse rondje (Beheer: team, Gebruikers) volgt het label van dezelfde persoon: vol = gevuld rondje in de kleur,
   licht = de tint met een gekleurde letter en rand (Femke ook daar lichte orchidee, Bram ook daar vol indigo) */
.pini:is(.ik1,.ik3,.ik6){background:var(--ib);color:var(--ic);box-shadow:inset 0 0 0 1.5px var(--ic)}
/* geen profiel: geen pil, geen kleur; klein grijs rondje met de letter en de naam in warm grijs */
span.ilabel:is(.ik7,.ik8,.ik9,.ik10,.ik11,.ik12){background:transparent;color:var(--ic);padding:2px 4px 2px 0;font-weight:700}
span.ilabel:is(.ik7,.ik8,.ik9,.ik10,.ik11,.ik12)>span.ini,.pini:is(.ik7,.ik8,.ik9,.ik10,.ik11,.ik12){background:#F1ECE4;color:#5E544A;box-shadow:none}
/* zonmodus: lichte vorm krijgt een harde rand */
body.zon span.ilabel:is(.ik1,.ik3,.ik6){box-shadow:inset 0 0 0 2px var(--ic)}
body.zon span.ilabel:is(.ik7,.ik8,.ik9,.ik10,.ik11,.ik12){color:#141A22}
body.zon span.ilabel:is(.ik7,.ik8,.ik9,.ik10,.ik11,.ik12)>span.ini{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
body.zon span.ilabel.leeg{color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
.ikaart .onder .ilabel,.pkaart .onder .ilabel{max-width:100%}
.rapkop{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin-bottom:14px}
@media(min-width:900px){body.veld .tabbar a{font-size:15px;padding:12px 14px}}   /* veldmodus: zijmenu op de computer niet kleiner */

/* ---- pauzeren en definitief afronden (js/inspectie.js, js/vandaag.js) en het rapport als PDF (js/inspecties.js) ---- */
.afr-dock{display:grid;gap:10px;margin-top:18px}
.afr-dock .btn{display:flex;align-items:center;justify-content:center;gap:8px}
.afr-dock .btn.ghost{width:100%}
.afr-uitleg{text-align:center;color:var(--soft);font-size:13px;line-height:1.35}
.afr-keuzes{display:grid;gap:10px}
.afr-keuze{display:flex;align-items:center;gap:12px;width:100%;min-height:76px;padding:12px 14px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);text-align:left;color:var(--ink)}
.afr-keuze .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.afr-keuze .t{font-size:17px;font-weight:800}
.afr-keuze .s{font-size:13.5px;color:var(--soft);line-height:1.35;margin-top:2px}
.afr-keuze .cirkel{width:46px;height:46px;background:#F4EDE3;color:var(--ink)}
.afr-keuze .cirkel.groen{background:var(--accent-bg);color:var(--accent)}
.afr-keuze:active{transform:scale(.985);background:#FBF7F1}
.afr-vast{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-weight:700;line-height:1.4;color:var(--ink)}
.afr-vast svg{flex:none;color:var(--accent);margin-top:1px}
.afr-vg{padding:6px 0 4px;min-height:70px}
.afr-uitkomst{background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:14px 16px;line-height:1.45}
.afr-uitkomst .afr-status{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;padding:4px 10px;border-radius:999px;margin-bottom:8px}
.afr-uitkomst .afr-status:not(.ld-vinkvlak){background:var(--ld-vlak,#F3EEE7)}
.afr-uitkomst .afr-regel{font-size:15px}
.afr-uitkomst .afr-fout{display:block;margin-top:6px}
.ih-menu svg{fill:currentColor;stroke:none}
.afr-keuze svg,.afr-dock svg{flex:none}
.afr-keuze .cirkel svg rect,.afr-dock .afr-pauze svg rect{fill:currentColor;stroke:none}
/* Vandaag: gepauzeerde inspectie (rustig wit, niet de groene "bezig"-kaart) */
.hero.pauze{background:#fff;box-shadow:var(--shadow),inset 0 0 0 1.5px #E6DDCF}.hero.pauze::after{background:#F4EEE5}
.hero.pauze .k{color:#6E6255}
.pauzetoast{margin:0 0 12px}
/* rapport: vast + delen */
.rapvast{display:flex;gap:8px;align-items:flex-start;margin:0 0 14px;padding:10px 12px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;line-height:1.4;color:var(--soft)}
.rapvast b{color:var(--ink)}
.rapvast.niet{background:#FDECEA;box-shadow:inset 6px 0 0 #B42318;color:#7A1A12;font-size:14.5px}
.rapvast.niet b{color:#B42318;font-size:16px;display:block;margin-bottom:2px}
.rapopen{margin:0 0 14px;background:#F4EFE7;box-shadow:inset 4px 0 0 #B9AE9F;line-height:1.45}   /* neutraal (geel = V) */
.rapopen b{color:var(--ink)}.rapopen .s{color:#4A4036;font-weight:600;margin-top:3px}
.rapscore{display:flex;gap:14px;align-items:center;margin:0 0 14px}
.rapscore .pct{font-size:34px;font-weight:800;line-height:1;min-width:84px}
.rapscore .grow{flex:1;min-width:0}.rapscore .t{font-weight:800}
.rapnr{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.rapaanv .row{padding-top:12px;padding-bottom:12px}
.rapknopuitleg{line-height:1.45;text-align:center}
.rapknopuitleg .linkje{font-size:inherit;padding:0}
.rapknoppen{display:grid;gap:10px;margin-top:16px}
.rapknoppen .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.ikaart .pdfknop{margin-left:auto;min-height:40px;padding:0 14px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px #C9CED6;font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
body.zon .afr-keuze,body.zon .afr-vast,body.zon .afr-uitkomst,body.zon .rapvast,body.zon .rapscore,body.zon .hero.pauze{box-shadow:inset 0 0 0 2px #141A22}
body.zon .afr-keuze .s,body.zon .afr-uitleg,body.zon .rapvast,body.zon .hero.pauze .k{color:#141A22}
body.veld .afr-keuze{min-height:84px}
/* Inspecties (staf): de hele kaart opent het rapport via de titelknop (::after over de kaart), de PDF-knop ligt erboven */
.ikaart.ik-staf{position:relative;cursor:pointer}
.ik-open{all:unset;font:inherit;cursor:pointer}
.ik-open::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ik-open:focus-visible{outline:none}.ikaart.ik-staf:has(.ik-open:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.ikaart .pdfknop{position:relative;z-index:2}
.afr-keuze svg,.afr-menu svg,.vpauze svg,.afr-vast svg,.rapvast svg,.ikaart .pdfknop svg,.pauzetoast svg{width:auto;display:inline-block;flex:none}
.rapvast svg{color:var(--accent);margin-top:2px}
.afr-vast.afr-zonder{margin-top:10px;background:#FDECEA;box-shadow:inset 5px 0 0 #B42318;color:#7A1A12;font-weight:600}
.afr-vast.afr-zonder b{color:#B42318}
/* duimrij: Pauze en Weergave ook onderin (duimzone), met eventueel een link ertussen */
.duimrij{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;margin-top:6px}
.duimrij .duimmidden{min-width:0}.duimrij .duimmidden .linkknop{padding:10px 0;min-height:48px;font-size:14px}
.duimknop{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:64px;max-width:96px;line-height:1.15;text-align:center;min-height:52px;padding:4px 8px;border-radius:14px;color:var(--soft);font-weight:800;font-size:12px;background:transparent}
.duimknop svg{width:auto;display:inline-block;flex:none}.duimknop svg rect{fill:currentColor;stroke:none}
.duimknop:active{background:#F4EDE3;transform:scale(.97)}
body.zon .duimknop{color:#141A22}
/* aanvulling met nagekomen foto */
.av-foto{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.av-foto .s{flex:1 1 180px;font-size:13px;line-height:1.35}
.av-foto .btn svg{width:auto;display:inline-block;flex:none}
.av-foto .fb-item{width:96px}
.av-foto-knoppen{display:flex;gap:8px;flex-wrap:wrap}
img.aanvfoto{display:block;max-width:180px;max-height:180px;border-radius:12px;margin-top:6px}
.rapfotona{margin:4px 0 6px 12px;display:inline-flex;align-items:center;gap:6px}
.rapfotona svg{width:auto;display:inline-block;flex:none}
.afr-acties b{font-weight:800}
.rapfotook{margin:2px 0 6px 12px;display:flex;align-items:center;gap:6px;color:var(--accent);font-weight:700}
.rapfotook svg{width:auto;display:inline-block;flex:none}

/* ================= Inspectie op de computer: zijmenu blijft, stap links, overzicht rechts (js/inspectie.js) =================
   Telefoon (< 900 px): ongewijzigd (geen tabbalk, één kolom, duimzone). De labels in de kopknoppen zijn daar alleen
   voor de schermlezer. Computer: kopregel als witte strook met Pauze/afronden en Weergave als knoppen met tekst;
   de dubbele duimknoppen onderin vervallen (de muis hoeft niet naar de duimzone). Vanaf 1100 px twee panelen:
   de stap (het gesprek) links, rechts een rustig overzicht dat meeschuift: waar je bent, de taken uit de TRA,
   wat er al is vastgelegd (C/A/V zoals jij koos), de actievoorstellen en de monteurs. */
.ih-lab{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.inszij{display:none}
/* het oordeel als ronde chip (js/inspectie.js oChip): overzicht, Vastgelegd, algemene onderwerpen, melding na vastleggen.
   De letter komt uit data-o en wordt niet voorgelezen ("/ ''"); de schermlezer hoort het woord in .sr-only. */
.izo{flex:none;width:22px;height:22px;border-radius:7px;display:inline-grid;place-items:center;font-size:12px;font-weight:800;color:#fff;line-height:1;vertical-align:middle}
.izo[data-o]::before{content:attr(data-o);content:attr(data-o) / ""}
.izo-C{background:var(--green)}.izo-A{background:var(--red)}.izo-V{background:var(--v-vol);color:var(--v-op)}
.izo-N{background:var(--mist);color:#4A5565;font-size:10px}
.izo-leeg{background:#fff;box-shadow:inset 0 0 0 2px #D9CFC2}
.iz-ch{display:flex;gap:3px;margin-left:auto;flex:none}
.toast-t .izo{margin:0 2px}.toast-ref{white-space:normal}
.toast:has(> .btn){flex-wrap:wrap}.toast-t{min-width:0;flex:1 1 170px}.toast > .btn{flex:none;margin-left:auto}
.vastgelegd .row>.izo{width:26px;height:26px;font-size:13.5px;border-radius:8px}
body.zon .izo-C,body.zon .izo-A,body.zon .izo-V{box-shadow:0 0 0 1.5px #141A22}
.ih-fase{display:none}
@media(min-width:900px){
  /* kopstrook boven beide panelen; blijft bovenin bij het scrollen (de algemene kopbalk schuift weg: de strook heeft
     zelf terug, opslag, voortgang, Pauze of afronden en Weergave). Hoogte: 10 + 66 + 10 = 86px (--ihb). */
  #app[data-page="inspectie"]{--ihb:86px}
  #app[data-page="inspectie"] .topbar{position:relative}
  .insbalk{position:sticky;top:0;z-index:20;margin:0 -10px;padding:10px 10px;background:var(--bg)}
  body.zon .insbalk{background:#fff}
  .ih-rij{gap:12px;padding:10px 12px;border-radius:22px;background:#fff;box-shadow:var(--shadow)}
  .ih-rij .ih-rond{width:46px;height:46px;box-shadow:inset 0 0 0 1.5px #EADFCF}
  .ih-rij .ih-menu,.ih-rij .ih-weergave{width:auto;display:inline-flex;gap:8px;padding:0 16px 0 13px;border-radius:999px;font-weight:800;font-size:14.5px}
  .ih-rij .ih-menu{background:var(--accent-bg);color:var(--accent);box-shadow:none}
  .ih-rij .ih-menu svg,.ih-rij .ih-weergave svg{width:20px;height:20px}
  .ih-rij .ih-lab{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
  .ih-rij .ih-titel{font-size:16px}
  .ih-rij .ih-sub{display:inline-block;vertical-align:middle;margin-right:8px}
  .ih-rij .opslag{display:inline-block;vertical-align:middle;margin-top:2px;font-size:12px;padding:2px 9px}
  .ih-rij .ih-rond:hover{background:#FBF7F1}.ih-rij .ih-menu:hover{background:#CFE3D9}
  .insstap .inshead .kicker{margin-top:14px!important}
  .duimrij{display:flex;justify-content:center}.duimrij .duimknop{display:none}
  .duimrij .duimmidden:empty{display:none}
  body.zon .ih-rij{box-shadow:0 0 0 2px #141A22}
  body.zon .ih-rij .ih-menu{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
  /* voortgang in de strook: vier onderdelen; alleen het huidige met zijn naam (alle namen vanaf 1500px) */
  .ih-fase{display:flex;align-items:center;gap:4px;list-style:none;margin:0 6px 0 0;padding:0;flex:none}
  .ih-fase li{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:#6B6055}
  .ih-fase li+li::before{content:"";width:16px;height:2px;border-radius:2px;background:#E6DCCD;margin-right:2px}
  .ih-fase li.klaar+li::before{background:var(--accent)}
  .ih-fase .bol{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#F4EDE3;color:#6E6255;font-size:12.5px}
  .ih-fase .bol svg{width:12px;height:12px}
  .ih-fase li.klaar .bol{background:var(--accent-bg);color:var(--accent)}
  .ih-fase li.nu .bol{background:var(--accent);color:#fff}
  .ih-fase li.nu{color:var(--accent)}
  .ih-fase .fk{display:none}.ih-fase li.nu .fk{display:inline}
  body.zon .ih-fase li{color:#141A22}body.zon .ih-fase .bol{box-shadow:inset 0 0 0 1.5px #141A22}
  /* ankers en toetsenbordfocus: niet onder de strook */
  html:has(#app[data-page="inspectie"]){scroll-padding-top:110px}
}
@media(min-width:1100px){.ih-rij .ih-sub{display:none}}   /* tellers staan in het overzicht ernaast */
@media(min-width:2200px){.ih-fase .fk{display:inline}.ih-fase li+li::before{width:12px}}
@media(min-width:1100px){
  .insgrid{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,31%,380px);gap:28px;align-items:start;margin-top:6px}
  .insstap{min-width:0}
  /* het overzicht blijft in beeld onder de strook en is nooit hoger dan het scherm: kop en tellers staan vast,
     de lijsten eronder scrollen binnen het paneel als het scherm te laag is (1366x768). Hoogte zo dat het paneel ook
     vóór het scrollen (kopbalk nog in beeld) helemaal past. vh schaalt mee met zoom, dus delen door --zoom. */
  .inszij{display:block;position:sticky;top:calc(var(--ihb) + 4px);min-width:0}
  .iz-kaart{display:flex;flex-direction:column;max-height:calc(100vh / var(--zoom,1) - var(--tb) - var(--ihb) - 34px);background:#fff;border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--line);padding:16px 20px 0;overflow:hidden}
  .iz-boven{flex:none;padding-bottom:8px;border-bottom:1px solid #F1EADF}
  .iz-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -20px;padding:0 20px 14px}
  .iz-body:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
  .iz-kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .iz-kop h2{margin:0;font-size:18px;font-weight:800}
  .iz-tra{font-size:13px;font-weight:700;color:#6B6055}
  .iz-tel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 2px}
  .iz-tel span{display:flex;flex-direction:column;padding:6px 10px;border-radius:14px;font-size:12px;font-weight:800;line-height:1.2}
  .iz-tel b{font-size:19px;line-height:1.1}
  .iz-tel .t-C{background:var(--green-bg);color:var(--green)}.iz-tel .t-A{background:var(--red-bg);color:var(--red)}.iz-tel .t-V{background:var(--amber-bg);color:var(--amber)}
  .iz-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:10px 0 4px;padding-top:10px;border-top:1px solid #F1EADF;font-size:14.5px;font-weight:800}
  .iz-body>.iz-h:first-child{border-top:0;padding-top:4px}
  .iz-aantal{font-size:12.5px;font-weight:700;color:#6B6055}
  .iz-taken,.iz-lijst{list-style:none;padding:0;margin:0}
  .iz-taken li{display:flex;align-items:center;gap:8px;min-height:28px;padding:2px 8px;margin:0 -8px;border-radius:10px;font-size:13.5px;font-weight:700;color:#6B6055}
  .iz-taken li.klaar{color:var(--ink)}
  .iz-taken li.iz-rest{font-size:12.5px;color:#6B6055}   /* na de taken: alleen de getoetste taken, de rest als één regel */
  .iz-taken li.nu{background:var(--accent-bg);color:var(--accent)}
  .iz-tn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .iz-nu{flex:none;padding:1px 8px;border-radius:999px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:800}
  .iz-lijst li{display:flex;align-items:flex-start;gap:10px;padding:4px 0;font-size:13.5px;line-height:1.35}
  .iz-lijst li .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* één regel per item: het paneel blijft kort */
  .iz-lijst li b{font-weight:800}
  .iz-bezig{color:#5E544A}
  .iz-eerder{font-size:12.5px;font-weight:700;color:#6B6055}
  .iz-prio{flex:none;min-width:72px;text-align:center;padding:2px 8px;border-radius:999px;background:#F4EDE3;color:#5E544A;font-size:12px;font-weight:800}
  .iz-prio.direct{background:var(--red-bg);color:var(--red)}
  .iz-leeg,.iz-voet,.iz-mont{margin:0;font-size:13.5px;line-height:1.4;color:#6B6055}
  .iz-voet{margin-top:4px;font-size:12.5px}
  .iz-mont{color:var(--ink);font-weight:700}
  body.zon .iz-kaart{box-shadow:0 0 0 2px #141A22}
  body.zon .iz-tra,body.zon .iz-aantal,body.zon .iz-taken li,body.zon .iz-leeg,body.zon .iz-voet,body.zon .iz-eerder,body.zon .iz-bezig{color:#141A22}
  body.zon .iz-tel span{box-shadow:inset 0 0 0 2px currentColor}
}

/* ================= "Te laat": overal dezelfde kleurcode (Meldingen, Vandaag, Acties, alertbalk, actievenster) =================
   rood = actie te laat (over de plandatum) · oranje (warm) = inspectie niet gedaan of actie vandaag · blauw = binnenkort */
:root{--laat:#8F1D14;--laat-bg:#FDECEA}
.dchip.laat,.tabp.laat:not(.on) span{background:var(--laat-bg);color:var(--laat)}
.vknop.laat .nr{background:var(--laat-bg);color:var(--laat)}
.vknop.laat .s{color:var(--laat)}
.alertbar.rood{color:var(--laat)}
body.zon .dchip.laat,body.zon .tabp.laat:not(.on) span{background:#fff;color:var(--laat);box-shadow:inset 0 0 0 2px var(--laat)}
body.zon .vknop.laat .nr{background:var(--laat);color:#fff}
body.zon .vknop.laat .s{color:var(--laat)}
body.zon .alertbar.rood{color:var(--laat);border-color:var(--laat)}

/* Vandaag, groot scherm, niets gepland vandaag: knop direct onder de tekst, onderin de kaart je eerstvolgende
   geplande inspectie (js/vandaag.js hk-volgend). Telefoon: niet getekend. */
.heroknop>span.hk-volgend{display:none}
@media(min-width:1100px){
  .vandaaggrid .vtop .hero.rustig .hk-balk{margin-top:2px}
  .vandaaggrid .vtop .heroknop>span.hk-volgend{order:2;display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid #F1EADF;position:relative;z-index:1}
  .vandaaggrid .vtop .heroknop>span.hk-balk{order:1}
  .vandaaggrid .vtop .heroknop>span.k,.vandaaggrid .vtop .heroknop>span.t,.vandaaggrid .vtop .heroknop>span.s{order:0}
  .hk-volgend+.hk-balk,.hero.rustig .hk-volgend{margin-bottom:0}
  .hv-dat{flex:none;width:44px;height:48px;border-radius:14px;background:var(--accent-bg);color:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
  .hv-dat .w{font-size:11.5px;font-weight:800;text-transform:lowercase}.hv-dat .d{font-size:19px;font-weight:800;margin-top:2px}
  .hv-t{display:flex;flex-direction:column;min-width:0}
  .hv-k{font-size:13px;font-weight:800;color:#6B6055}
  .hv-n{font-size:15.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.zon .hv-k{color:#141A22}body.zon .hv-dat{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
}
.vknop.vkbreed:has(+ .vkvoet){border-bottom:0}   /* geen dubbele lijn boven de voetregel */
.dchip.binnen{background:#E3EDF9;color:#1D4F8F}   /* actie vandaag/binnenkort: blauw, zoals in Meldingen */
body.zon .dchip.binnen{background:#fff;color:#1D4F8F;box-shadow:inset 0 0 0 2px #1D4F8F}

/* ================= Ronde 3: kleuren met één betekenis ================= */
/* datumchips: dun lijnpictogram in plaats van een emoji (rustig, op elk toestel gelijk) */
.dchip svg{width:14px;height:14px;flex:none;margin-right:5px;opacity:.8}
/* alertbalk: één zin, elk deel in zijn eigen kleur: acties te laat rood, inspecties niet gedaan oranje */
.alertbar{color:var(--ink)}
.alertbar.rood{color:var(--ink)}
.alertbar.rood svg{color:var(--laat);opacity:1}.alertbar.warm svg{color:var(--warm-ink);opacity:1}
.alertbar .al-laat,.alertbar .al-gemist{display:inline-flex;align-items:center;gap:6px;font-weight:800;white-space:nowrap}
.alertbar .al-laat{color:var(--laat)}.alertbar .al-gemist{color:var(--warm-ink)}
.alertbar .al-laat::before,.alertbar .al-gemist::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.alertbar .al-gemist::before{background:var(--warm-vol)}
.alertbar>b{color:var(--accent)}
body.zon .alertbar,body.zon .alertbar.rood{color:#141A22;border-color:#141A22}
body.zon .alertbar .al-laat{color:var(--laat)}body.zon .alertbar .al-gemist{color:#8A3005}
body.zon .b-open{background:#fff;color:#141A22;box-shadow:inset 0 0 0 1.5px #141A22}
/* acties-tabel: de naam van actiehouder en toetser past (geen "Bram Voorbe…" op een groot scherm); het actiedeel
   krijgt de rest. Wordt het toch te smal, dan loopt de naam door op een tweede regel in plaats van af te breken. */
.ahoofd .atabel th:nth-child(2),.ahoofd .atabel th:nth-child(3){width:172px}.ahoofd .atabel th:nth-child(4){width:116px}
.ahoofd .atabel :is(th,td):nth-child(2),.ahoofd .atabel :is(th,td):nth-child(3){padding-left:8px;padding-right:8px}
.ahoofd .atabel .pers .ilabel{border-radius:14px}
.ahoofd .atabel .pers .ilabel>span.nm{white-space:normal;overflow-wrap:anywhere}
/* focus nooit achter de plakkende knoppenbalk met de duimrij (telefoon, WCAG 2.4.11): die balk is hoger */
@media(max-width:899px){
  html:has(.view .dock:not(.odock) .duimrij){scroll-padding-bottom:calc(184px + env(safe-area-inset-bottom))}
}

/* ================= Ronde 4: Afronden rustig en af ================= */
/* drie tellers altijd op één rij (telefoon: geen losse Verbeterpunt-tegel met een leeg vak ernaast) */
.grid.kpis.afr-tel{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:599px){
  .afr-tel{gap:8px}
  .afr-tel .tile{padding:13px 10px 12px;border-radius:20px}
  .afr-tel .tile .lab{font-size:12px;gap:5px;white-space:nowrap}
  .afr-tel .tile .lab::before{width:8px;height:8px}
  .afr-tel .tile .n{font-size:26px}
  .afr-tel .tile .sub{font-size:12px;line-height:1.25}
}
/* "Nog even nalopen": neutraal wit met een grijs lijstpictogram; geel betekent V, oranje "niet gedaan" */
.nalopen{margin-top:14px;background:#fff;border-radius:22px;padding:14px 18px 14px;box-shadow:var(--shadow)}
#mod .nalopen{margin:0 0 12px;box-shadow:inset 0 0 0 1.5px var(--line)}
.nl-kop{display:flex;align-items:center;gap:10px}
.nl-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#F1ECE4;color:#4A4036;flex:none}
.nl-ic svg{width:16px;height:16px}
.nl-t{margin:0;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.nl-n{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#F1ECE4;color:#4A4036;font-size:12.5px;display:inline-grid;place-items:center}
.nl-uitleg{margin:6px 0 2px 40px;font-size:13.5px;color:var(--soft);line-height:1.4}
.nl-lijst{margin:6px 0 0 40px;padding:0;list-style:none;display:grid;gap:4px}
.nl-lijst li{position:relative;padding-left:14px;font-size:14.5px;font-weight:650;line-height:1.4;color:var(--ink)}
.nl-lijst li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:#9C8F80}
body.zon .nalopen{box-shadow:inset 0 0 0 2px #141A22}body.zon .nl-uitleg{color:#141A22}
/* Getoetst tijdens bezoek: kop als kaartkop, telling als chip, elke taak met zijn oordelen */
.getoetst{margin-top:14px;padding:16px 20px}
.gt-kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.gt-k{margin:0;font-size:16px;font-weight:800}
.gt-n{font-size:12.5px;font-weight:800;color:#4A4036;background:#F1ECE4;border-radius:999px;padding:3px 10px}
.gt-lijst{list-style:none;margin:0;padding:0}
.gt-lijst li{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 0;border-top:1px solid #F4EDE3}
.gt-lijst li:first-child{border-top:0}
.gt-t{flex:1;min-width:0;font-weight:700;line-height:1.3}
.gt-alg .gt-t{color:var(--soft)}
body.zon .gt-n{background:#fff;color:#141A22;box-shadow:inset 0 0 0 1.5px #141A22}
/* geen oordeel: lege chip met een vraagteken (hoort niet voor te komen; de herinnering noemt hem) */
.izo-geen{background:#fff;color:#8A3005;box-shadow:inset 0 0 0 1.5px #8A3005}
.vastgelegd .row>.izo-geen{width:26px;height:26px}
/* V-chip: geel met een donkere letter (geen bruin), in zonmodus met harde rand */
body.zon .izo-V{box-shadow:0 0 0 1.5px #141A22}

/* opslagstatus op de telefoon: één regel (smal scherm zonder de tijd), titel mag over twee regels */
@media(max-width:899px){
  .inshead .opslag{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
  .ih-titel{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2}
  .ih-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:479px){.opslag .op-tijd{display:none}}

/* ================= Ronde 4: inspectie op de computer als werkbalk van rand tot rand =================
   Tijdens de inspectie is de strook dé kopbalk van de app (zoals de kop van een inspectie-app): wit, van het zijmenu
   tot de rechterrand, bovenaan vast. De algemene kopbalk (bel, account) wijkt zolang je inspecteert: geen lege band
   van 100px met alleen een bel erin. Terug, het zijmenu en Pauze of afronden brengen je er weer bij; de bel telt
   gewoon door. Telefoon (< 900px): ongewijzigd. */
@media(min-width:900px){
  #app[data-page="inspectie"]{--tb:0px}
  #app[data-page="inspectie"] .topbar,#app[data-page="inspectie"] .alertbar{display:none!important}
  #app[data-page="inspectie"] .view{padding-top:0}
  #app[data-page="inspectie"] .insbalk{margin:0 -36px 0;padding:0;background:#fff;box-shadow:0 1px 0 var(--line),0 8px 22px rgba(120,90,50,.06)}
  #app[data-page="inspectie"] .ih-rij{border-radius:0;box-shadow:none;background:transparent;padding:12px 36px;min-height:72px;gap:14px}
  #app[data-page="inspectie"] .ih-rij .ih-meta{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
  #app[data-page="inspectie"] .ih-rij .ih-titel{font-size:17px;max-width:100%}
  #app[data-page="inspectie"] .ih-rij .opslag{margin-top:0}
  #app[data-page="inspectie"] .ih-fase{padding:5px 8px;border-radius:999px;background:#FAF6EF;margin:0;gap:3px}
  #app[data-page="inspectie"] .ih-fase li{gap:5px;font-size:13px}
  #app[data-page="inspectie"] .ih-rij .ih-menu,#app[data-page="inspectie"] .ih-rij .ih-weergave{padding:0 14px 0 12px}
  #app[data-page="inspectie"] .insgrid{margin-top:22px}
  #app[data-page="inspectie"] .insstap .inshead .kicker{margin-top:0!important}
  body.zon #app[data-page="inspectie"] .insbalk{box-shadow:0 2px 0 #141A22}
  body.zon #app[data-page="inspectie"] .ih-fase{background:#fff;box-shadow:inset 0 0 0 1.5px #141A22}
}
/* namen van alle vier de onderdelen zodra er plaats is (vanaf 1700px; daaronder alleen het huidige onderdeel) */
@media(min-width:1700px){.ih-fase .fk{display:inline}.ih-fase li+li::before{width:10px}.ih-fase li:not(.nu):not(.klaar) .fk{color:#6B6055}}
@media(min-width:1100px){
  /* het overzicht: onder de werkbalk, nooit hoger dan het scherm (de kopbalk is weg: alleen de werkbalk telt) */
  #app[data-page="inspectie"] .inszij{top:calc(var(--ihb) + 22px)}
  #app[data-page="inspectie"] .iz-kaart{max-height:calc(100vh / var(--zoom,1) - var(--ihb) - 44px)}
}

/* ================= Alleen bekijken (#/bekijk/<id>, js/inspectie.js): een vastgelegde inspectie in de schermen van
   het invullen. Zelfde kaarten, knoppen en maten; alleen lezen: de keuzeknoppen zijn uitgeschakeld, het gekozene staat
   zoals het gekozen was en de rest is gedimd (.bk-uit). Een vaste balk bovenin ("Alleen bekijken · vastgelegd op …")
   vervangt de kopbalk; Vorige/Volgende onderin (duimzone). Computer: zijmenu, stap links, overzicht rechts. ================= */
#app[data-page="bekijk"]{--tb:0px}
#app[data-page="bekijk"] .topbar,#app[data-page="bekijk"] .alertbar{display:none!important}
#app[data-page="bekijk"] .view{padding-top:0;padding-bottom:0}
body:has(#app[data-page="bekijk"]){--ld:var(--soft)}
html:has(#app[data-page="bekijk"]){scroll-padding-top:calc(var(--bkh,120px) + 12px)}
.bkbalk{position:sticky;top:0;z-index:25;margin:0 -20px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:#fff;box-shadow:0 1px 0 var(--line),0 8px 22px rgba(120,90,50,.06)}
.bk-rij{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"terug . rapport" "meta meta meta";gap:8px 10px;align-items:center}
.bk-terug,.bk-rapport{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:0 16px;border-radius:999px;font-weight:800;font-size:15.5px;color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1.5px #EADFCF}
.bk-terug{grid-area:terug;padding-left:12px}.bk-terug .pijl{font-size:26px;line-height:1;margin-top:-3px}
.bk-rapport{grid-area:rapport;background:var(--accent-bg);color:var(--accent);box-shadow:none}
.bk-rapport svg{width:20px;height:20px;flex:none}
.bk-terug:active,.bk-rapport:active{transform:scale(.97)}
.bk-meta{grid-area:meta;min-width:0}
.bk-titel{font-size:15.5px}
.bk-modus{display:flex;align-items:flex-start;gap:7px;margin:4px 0 0;font-size:13.5px;font-weight:700;color:#5E544A;line-height:1.35}
.bk-modus svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--accent)}
.bk-modus b{color:var(--accent);font-weight:800}
.bkstap{display:flex;flex-direction:column;min-height:calc(100vh - var(--bkh,120px));min-height:calc(100dvh - var(--bkh,120px))}
.bkwrap{display:flex;flex-direction:column}
.bkhead .kicker{margin-top:16px}
.bkstap button:disabled{cursor:default}
/* gekozen waarden zijn aria-disabled (wel focus, geen actie): niet klikbaar ogen, geen druk-effect */
.bkstap button[aria-disabled="true"]{cursor:default;pointer-events:none}
.bkstap button[aria-disabled="true"]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bkstap .bk-uit{opacity:.38}
.bkstap .seg.stapel button:disabled:active,.bkstap .kvlak:disabled:active,.bkstap button[aria-disabled="true"]:active{transform:none}
.bk-gekozen{font-weight:800;color:var(--accent-ink,var(--accent))}
.bk-duur{white-space:nowrap}
.bk-mrgezien{margin-top:12px;border-radius:18px;background:#FCFAF6;box-shadow:inset 0 0 0 1.5px #EADFCF}
.bk-mrgezien .bk-mrkop{min-height:48px}
.bk-mrlijst{list-style:none;margin:0;padding:0 14px 12px;font-size:15.5px;line-height:1.4;font-weight:700;color:var(--accent-ink,var(--accent))}
.bk-mrlijst li+li{margin-top:6px}
.bk-mr{margin-top:10px}
.bk-mr summary .opt{margin-left:auto}.bk-mr summary::after{margin-left:10px}
.bkstap .pick.bk-ow.bk-owkeus{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-bg)}
.bk-owtag{flex:none;font-size:13.5px;font-weight:800;color:var(--accent)}
.bk-tekst{flex:none;min-height:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:18px}
.ziewrap-bk .ziekaart{flex:none}
.bk-leeg{color:var(--soft);font-weight:600;font-size:15px}
.bk-veld{margin-top:8px;padding:12px 14px;border-radius:20px;background:#FCFAF6;box-shadow:inset 0 0 0 1.5px #EADFCF;font-size:16px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;min-height:52px}
.bk-vlab{margin:4px 2px 0}
button.fb-beeld.bk-foto{display:block;width:100%;padding:0;border:0;cursor:zoom-in}
button.fb-beeld.bk-foto:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bk-mr{padding-bottom:2px}
.bk-mrkop{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 14px;font-size:15px;font-weight:800}
.bk-mrkop .n,.bk-mrkop .opt{margin-left:auto}
.bkstap span.chipb,.bkstap button.chipb{display:inline-flex;align-items:center}
.bkstap .linkknop.nvt.bk-aan{color:var(--ink);background:#F4EDE3;border-radius:16px;margin-top:8px}
.bk-oordeel .otitel span{color:var(--ink)!important;font-weight:800}
.bkstap .otitel span{font-weight:800}
.bk-owref{width:30px;height:30px;border-radius:8px;background:var(--mist);display:grid;place-items:center;font-weight:700;flex:none}
.bkstap .pick.bk-ow{background:#fff;box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:56px}
.bk-nu .hierna-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bk-feiten{margin-top:12px}
.bk-wrij .t,.bk-wrij .s{display:block;min-width:0;overflow-wrap:anywhere}
.bk-wrij .grow{min-width:0;overflow-wrap:anywhere}
.bk-actoo{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13.5px;font-weight:800}
/* telefoon: korter scrollen. De duimpjes onder de woorden (niet één woord per regel ernaast); wat niet gekozen is
   (andere taken, prioriteiten, ter-plaatse-keuzes, NVT) valt weg: alleen het gekozene staat er, zoals het gekozen was.
   C/A/V blijft als rij van drie (het oordeel, met de rest gedimd). Computer: alles zichtbaar, de rest gedimd. */
@media(max-width:599px){
  .bkstap .citaat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px}
  .bkstap .citaat .fduimen{grid-column:2}
  .bkstap .bk-keuzes .bk-uit,.bkstap .kvlakken .bk-uit,.bkstap .linkknop.nvt.bk-uit{display:none}
  .bkstap .kvlakken,.bkstap .kvlakken.vier{grid-template-columns:1fr}
}
.bk-wrij{width:100%;text-align:left;background:none;color:inherit;font:inherit;min-height:56px;cursor:pointer}
.bk-wrij:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:12px}
.bk-sigvak{height:160px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);background:#fff;display:grid;place-items:center;overflow:hidden}
.bk-sigvak img{max-width:100%;max-height:100%;display:block}
.bk-sigvak.leeg span{font-weight:800;color:var(--soft)}
.bk-sigstat{margin-top:8px}
.bk-vast{margin-top:16px}.bk-vast .afr-status{background:var(--accent-bg);color:var(--accent-ink)}
/* aanvullingen na afronden: herkenbaar als aanvulling (eigen label, warme rand), met datum en wie */
.bk-aanv{margin-top:14px}
.bk-aanv-item{padding:12px 14px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1.5px #E3D3BC,inset 5px 0 0 #B07A2E}
.bk-aanv-item+.bk-aanv-item{margin-top:8px}
.bk-aanv-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;font-weight:800}
.lbl.bk-aanvlbl{background:#F6E7D2;color:#7A4A12}
.bk-aanv-over{margin-top:4px;font-size:13px;font-weight:700;color:#6B6055}
.bk-aanv-tekst{margin-top:4px;font-size:15.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.bk-aanvfoto{display:block;margin-top:8px;padding:0;border:0;border-radius:14px;overflow:hidden;cursor:zoom-in}
.bk-aanvfoto img{display:block;width:120px;height:120px;object-fit:cover}
.bk-aanv-uitleg{margin:8px 4px 0;font-size:12.5px;font-weight:700;color:#6B6055}
.bk-aanvtag{display:inline-block;flex:0 0 auto;white-space:nowrap;margin-left:4px;padding:0 7px;border-radius:999px;background:#F6E7D2;color:#7A4A12;font-size:11.5px;font-weight:800}
/* Vorige / Volgende: plakt onderin (duimzone), groot genoeg voor handschoenen */
#app[data-page="bekijk"] .bkdock{position:sticky;bottom:0;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"teller teller" "vorige volgende";align-items:center;gap:6px 10px;margin-top:auto;padding:22px 0 calc(14px + env(safe-area-inset-bottom));background:linear-gradient(rgba(250,246,239,0),var(--bg) 22px)}
.bkdock .btn{width:100%;min-height:60px;margin:0;font-size:17px}
.bkdock .btn svg{width:20px;height:20px}
.bkdock .bk-vorige{grid-area:vorige}.bkdock .bk-volgende{grid-area:volgende}
.bk-teller{grid-area:teller;display:flex;justify-content:center;align-items:baseline;gap:8px;flex-wrap:wrap;text-align:center;font-size:13.5px;font-weight:800;color:#5E544A;line-height:1.25}
.bk-teller small{font-size:13px;font-weight:700;color:#6B6055}
body.veld .bkdock .btn,body.veld .bk-terug,body.veld .bk-rapport{min-height:66px}
/* foto groot (venster) */
.bk-groot{display:grid;place-items:center;background:#F0E6D8;border-radius:18px;overflow:hidden;min-height:200px}
.bk-groot img{display:block;max-width:100%;max-height:min(70vh,900px);object-fit:contain}
.bk-fotonav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.bk-fotosluit{margin-top:12px}
.bkleeg{padding-top:40px}.bkleeg .leeg .s{max-width:420px;margin:0 auto;line-height:1.45}.bkleeg .bol svg{width:30px;height:30px}
.bkleeg-k{margin-top:20px;max-width:320px}
/* zonmodus */
body.zon .bkbalk{box-shadow:0 2px 0 #141A22}
body.zon .bk-terug,body.zon .bk-rapport{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
body.zon .bk-modus,body.zon .bk-modus b,body.zon .bk-teller,body.zon .bk-teller small,body.zon .bk-aanv-over,body.zon .bk-aanv-uitleg{color:#141A22}
body.zon .bk-veld{background:#fff;box-shadow:inset 0 0 0 2px #141A22}
body.zon .bk-aanv-item{box-shadow:inset 0 0 0 2px #141A22,inset 6px 0 0 #141A22}
body.zon #app[data-page="bekijk"] .bkdock{background:#fff}
@media(min-width:900px){
  .bkbalk{margin:0 -36px;padding:12px 36px}
  .bk-rij{display:flex;align-items:center;gap:14px;min-height:56px}
  .bk-meta{flex:1}
  .bk-titel{font-size:17px}
  .bk-rij .ih-fase{padding:5px 8px;border-radius:999px;background:#FAF6EF;margin:0;gap:3px}
  .bk-rij .ih-fase li{gap:5px;font-size:13px}
  .bk-terug:hover{background:#FBF7F1}.bk-rapport:hover{background:#CFE3D9}
  .bkstap{min-height:0}
  .bkhead .kicker{margin-top:22px}
  #app[data-page="bekijk"] .bkdock{padding:22px 0 24px}
  body.zon .bk-rij .ih-fase{background:#fff;box-shadow:inset 0 0 0 1.5px #141A22}
}
@media(min-width:1100px){
  .bkgrid{margin-top:0}
  .bkgrid .bkhead .kicker{margin-top:22px}
  #app[data-page="bekijk"] .inszij{top:calc(var(--ihb) + 22px);margin-top:22px}
  #app[data-page="bekijk"] .iz-kaart{max-height:calc(100vh / var(--zoom,1) - var(--ihb) - 44px)}
  .bk-lijst li{display:block;padding:0;margin:0;min-height:0}
  .iz-ga{display:flex;align-items:center;gap:10px;width:calc(100% + 16px);margin:0 -8px;padding:6px 8px;min-height:40px;border-radius:10px;text-align:left;font:inherit;font-size:13.5px;line-height:1.35;color:var(--ink);background:none;cursor:pointer}
  .iz-ga .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .iz-ga b{font-weight:800}
  .iz-ga:hover{background:#FBF7F1}
  .iz-ga.nu{background:var(--accent-bg);color:var(--accent)}
  .iz-ga:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
  .iz-taken.bk-lijst .iz-ga{font-weight:700}
  body.zon .iz-ga.nu{background:#fff;box-shadow:inset 0 0 0 2px #141A22;color:#141A22}
}
/* Inspecties: twee grote knoppen onder een eigen (vastgelegde) inspectie; de kaart zelf opent het rapport */
.ikaart.ik-klik{position:relative;cursor:pointer}
.ikaart.ik-klik:has(.ik-open:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.ik-acties{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;margin-top:12px}
.ik-knop{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:52px;padding:0 12px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px #E8DDCD;font-weight:800;font-size:15px;color:var(--ink);cursor:pointer}
.ik-knop svg{width:18px;height:18px;flex:none}
.ik-knop.ik-bekijk{background:var(--accent-bg);color:var(--accent);box-shadow:none}
.ik-knop:active{transform:scale(.97)}
body.veld .ik-knop{min-height:62px}
body.zon .ik-knop,body.zon .ik-knop.ik-bekijk{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
@supports (grid-template-rows:subgrid){@media(min-width:700px){.ikaart{grid-row:span 6}.ikaart .ik-acties{align-self:end}}}
/* rapport: "Invulling bekijken" naast Terug */
.rapnav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rapbekijk{min-height:52px;background:var(--accent-bg)!important;color:var(--accent)!important;box-shadow:none!important}
.rapbekijk svg{width:18px;height:18px}
body.zon .rapbekijk{background:#fff!important;color:#141A22!important;box-shadow:inset 0 0 0 2px #141A22!important}

/* Tweestapsverificatie: stappen voor Microsoft Authenticator */
.mfa-stappen{margin:0 0 12px;padding-left:22px;line-height:1.5}
.mfa-stappen li{margin:2px 0}
.mfa-handmatig{margin:10px 0 12px}
.mfa-handmatig summary{cursor:pointer;list-style:none;white-space:normal;display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;margin:4px 0 10px}
.mfa-handmatig summary::-webkit-details-marker{display:none}
.mfa-handmatig summary::marker{content:""}
.mfa-handmatig[open] summary{margin-bottom:8px}
.mfa-handmatig .s{margin:4px 0 8px;line-height:1.5}
.mfa-sleutel{word-break:break-all;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;margin:0 0 8px}

/* ============ fase 6: oordeel per maatregel (js/inspectie.js) ============ */
/* steekwoorden: rustige geheugensteun boven het tekstvak (geen knoppen: alleen om aan te denken) */
.steekw{margin:0 2px 12px;padding:10px 12px;border-radius:14px;background:var(--accent-bg);color:var(--accent-ink);font-size:14px;line-height:1.5}
.steekw[hidden]{display:none}
.stw-t{display:inline;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-right:6px}
.stw-l{display:inline}
.stw{display:inline-block;max-width:100%;font-weight:700;overflow-wrap:anywhere}
.stw+.stw::before{content:" · ";font-weight:800;opacity:.55}
/* maatregel kiezen */
.mrkaart .vskop{margin-bottom:4px}
.mr-kop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mr-h{font-size:16px;font-weight:800;margin:0;line-height:1.3}
.mr-h .n,.mr-h .opt{font-size:13px;font-weight:700;color:var(--soft);margin-left:4px}
.mrzoek{margin:10px 0 2px;width:100%}
.mrlijst{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.mrkeus{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;min-height:56px;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink)}
.mrkeus.vs{background:var(--lilac);box-shadow:inset 0 0 0 1.5px #DCD3F5}
.mrkeus.on{background:var(--accent-bg);box-shadow:inset 0 0 0 2.5px var(--accent)}
.mrkeus[hidden]{display:none}
.mr-box{flex:none;width:26px;height:26px;border-radius:8px;box-shadow:inset 0 0 0 2px #B9AE9F;display:grid;place-items:center;margin-top:1px;background:#fff;color:#fff}
.mrkeus.on .mr-box{background:var(--accent);box-shadow:none}
.mr-box svg{width:16px;height:16px}
.mr-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.mr-naam{font-weight:750;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.mr-risico,.mr-taak{font-size:13px;color:var(--soft);line-height:1.35}
.mr-ook{color:#8A7E70}
.mrkeus .waarom{font-size:13px;color:#5a3ea8;font-weight:600}
.mrander summary{cursor:pointer;font-weight:800;font-size:15px;line-height:1.35;padding:10px 0;min-height:44px}
.mrander summary .opt{font-weight:600;font-size:13px;color:var(--soft);margin-left:4px}
.mr-groep{margin-top:12px}
.mrdock .linkknop{font-size:14px}
/* oordeel per maatregel */
.mo-uitleg{margin:14px 4px 0;font-size:14px;color:var(--soft);line-height:1.4}
.mokaart{padding:16px}
.mokaart.mo-C{box-shadow:0 0 0 1.5px var(--green)}.mokaart.mo-A{box-shadow:0 0 0 1.5px var(--red)}.mokaart.mo-V{box-shadow:0 0 0 1.5px var(--v-vol)}.mokaart.mo-N{box-shadow:0 0 0 1.5px #C9CED6}
.mo-kop{display:flex;gap:12px;align-items:flex-start}
.mo-nr{flex:none;width:28px;height:28px;border-radius:9px;background:var(--mist);display:grid;place-items:center;font-weight:800;font-size:14px}
.mo-tekst{min-width:0;flex:1}
.mo-naam{font-size:16px;font-weight:800;line-height:1.35;margin:0;overflow-wrap:anywhere}
.mo-risico{font-size:13.5px;color:#5E544A;margin-top:6px;line-height:1.4}
.mo-risico .lbl{height:20px;font-size:11px;margin-right:2px}
.mo-taak{font-size:12.5px;color:var(--soft);margin-top:4px}
.mo-seg{margin-top:12px;gap:6px}
.mo-seg button{min-height:58px;border-radius:14px}
.mo-seg .t-N{background:var(--mist);color:#4A5565}
.mo-seg button.on-N{box-shadow:inset 0 0 0 2.5px #4A5565}
.mo-seg .t-N .l{font-size:15px}
.mo-vlaggen{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.movlag{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:52px;padding:10px 12px;border-radius:14px;background:var(--red-bg);color:var(--red);box-shadow:inset 0 0 0 1.5px #F4C7C2}
.movlag b{display:block;font-size:14.5px;font-weight:800}.movlag small{display:block;font-size:12.5px;color:#8C3A31;font-weight:600}
.movlag.on{box-shadow:inset 0 0 0 2.5px var(--red)}
.mv-box{flex:none;width:24px;height:24px;border-radius:7px;box-shadow:inset 0 0 0 2px var(--red);display:grid;place-items:center;background:#fff;color:#fff}
.movlag.on .mv-box{background:var(--red);box-shadow:none}
.mv-box svg{width:14px;height:14px}
.mokaart .kvuitleg{margin-top:10px}
.egkaart .s{margin:6px 0 10px;line-height:1.4}
.eglijst{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.eglijst li{display:flex;gap:10px;align-items:flex-start;background:var(--mist);border-radius:12px;padding:10px 12px}
.eg-t{flex:1;min-width:0;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.eg-weg{flex:none;width:44px;height:44px;margin:-8px -6px -8px 0;border-radius:12px;font-size:22px;color:var(--soft)}
/* extra gevaar: de regel (risico + weghalen) en daaronder "Direct gevaar · werk stilgelegd" (alleen als de inspecteur het aantikt) */
.eglijst li:has(.eg-rij){flex-direction:column;align-items:stretch;gap:8px}
.eg-rij{display:flex;gap:10px;align-items:flex-start}
.eg-vlag{min-height:44px;background:#fff}
.eglijst .eg-gv{display:inline-block;margin-top:4px;color:var(--red);font-weight:700;font-size:13px}
/* direct gevaar gemeld, maar nog nergens bij aangegeven: rustige kaart, geen alarm */
.dg-plek{background:var(--red-bg);box-shadow:inset 0 0 0 1.5px #F4C7C2}
.dg-plek .mr-h{display:flex;align-items:center;justify-content:flex-start;gap:8px;color:var(--red);text-align:left}
.dg-plek .mr-h svg{flex:0 0 18px;width:18px;height:18px}
.dg-plek .mr-h span{flex:1 1 auto;min-width:0}
.dg-plek .btn{width:auto;margin-top:8px}
.na-vs{margin-top:8px;line-height:1.45;font-size:14px}
.jijkaart .wijzig{margin-top:10px}
/* direct gevaar in de lijsten (Vastgelegd, overzicht) */
.vg-dg{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--red);color:#fff;font-size:12px;font-weight:800;vertical-align:middle}
.vg-dg svg{width:14px;height:14px}
.row.vg-gevaar{box-shadow:inset 4px 0 0 var(--red);padding-left:10px;margin-left:-10px}
.iz-gevaar{display:inline-block;padding:0 7px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:800}
.afr-acthint{margin-top:12px;line-height:1.45}
body.veld .mrkeus,body.veld .movlag{min-height:64px}
body.veld .mo-seg button{min-height:72px}
body.zon .mrkeus{box-shadow:inset 0 0 0 2px #8B7F72}
body.zon .steekw{background:#fff;box-shadow:inset 0 0 0 2px var(--accent)}
/* invulling bekijken (fase 6): tijdstip onder elke foto, de teller is ook de knop naar het overzicht (telefoon) */
.fb-tijd{display:block;margin-top:4px;font-size:12px;font-weight:700;color:#6B6055;text-align:center}
button.bk-teller.bk-sprong{min-height:44px;border-radius:14px;padding:4px 12px;background:none;cursor:pointer}
.bk-sprong-l{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:var(--accent-bg);color:var(--accent-ink);font-size:12.5px;font-weight:800}
.bk-sprong-l svg{width:14px;height:14px}
@media(min-width:1100px){.bk-sprong-l{display:none}}
.bk-sprongvenster .iz-h{font-size:14px;margin:14px 0 6px}
.bk-sprongvenster ul{list-style:none;margin:0;padding:0}
.bk-sprongvenster .iz-ga{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;text-align:left;padding:8px 10px;border-radius:12px;background:var(--mist);margin-bottom:6px;font-size:14px}
.bk-sprongvenster .iz-ga.nu{box-shadow:inset 0 0 0 2px var(--accent)}
.bk-sprongvenster .iz-ga .grow{flex:1;min-width:0}.bk-sprongvenster .iz-ga .iz-ch{flex:none}
.bk-acties ul,ul.bk-acties{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.bk-acties{margin-top:12px}
.bk-actie{display:flex;align-items:center;gap:8px;width:100%;text-align:left;min-height:48px;padding:8px 12px;border-radius:12px;background:var(--mist);font-size:14px;font-weight:650}
.bk-actie .bk-wie,.rapactie .bk-wie{display:block;margin-top:2px;font-size:12.5px;font-weight:500}
.bk-mr{cursor:default}
/* foto groot: over de hele breedte, in- en uitzoomen (knijpen, dubbeltikken, wiel of + en −) */
#ov.fotoov{padding:0}
#ov.fotoov #mod.fotomod{max-width:min(1400px,100vw);max-height:100%;height:100%;border-radius:0;--mpx:12px}
.fotogroot-kader{position:relative;overflow:hidden;background:#1E1B18;border-radius:14px;height:min(72vh,1100px);display:grid;place-items:center;touch-action:none;user-select:none;cursor:zoom-in}
.fotogroot-kader img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;will-change:transform;-webkit-user-drag:none}
.fg-knoppen{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.fg-knoppen .btn.sm{min-width:48px;min-height:44px;font-size:20px}
.fg-tip{flex:1;text-align:right}
@media(min-width:900px){#ov.fotoov{padding:20px}#ov.fotoov #mod.fotomod{border-radius:22px;height:auto}}
/* rapport in de app (fase 6): tabel per maatregel */
.raptab{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:14px}
.raptab th{font-size:12px;padding:6px 8px 6px 0}
.raptab td{padding:8px 8px 8px 0;vertical-align:top;line-height:1.4}
.raptab td:last-child{white-space:nowrap;padding-right:0}
.rapfoto{display:block;padding:0;border-radius:12px;cursor:zoom-in}
.rappauze{margin:10px 2px}
@media(max-width:560px){.raptab thead{display:none}.raptab tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--line)}.raptab td{padding:0;border:0}.raptab td.s{grid-column:1}.raptab td:last-child{grid-row:1;grid-column:2}}
/* Acties (fase 6): herkomst en de rustige wegwijzer "zonder actie" */
.za-kaart{display:flex;align-items:center;gap:14px;width:100%;text-align:left;margin:0 0 12px;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--shadow,none);color:var(--ink)}
.za-kaart .grow{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.za-kaart b{font-size:15.5px}
.za-n{flex:none;min-width:40px;height:40px;padding:0 8px;border-radius:12px;background:var(--butter);color:var(--amber);display:grid;place-items:center;font-weight:800;font-size:18px}
.za-kaart svg{flex:none;color:var(--soft)}
.za-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.za-item{background:var(--mist);border-radius:16px;padding:12px 14px}
.za-kop{display:flex;gap:10px;align-items:flex-start}
.za-t{font-weight:750;line-height:1.35;overflow-wrap:anywhere}
.za-item .s{margin:4px 0 0 32px}
.za-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0 32px}
.za-knoppen .btn{width:auto}
.aherk{margin-top:6px;font-size:12.5px;color:var(--soft);line-height:1.35}
.aherkomst{margin:4px 0 12px;padding:12px 14px;border-radius:16px;background:var(--accent-bg)}
.ah-t{font-size:14px;font-weight:650;line-height:1.45;color:var(--accent-ink)}
.ah-t .lbl{margin-right:4px}
.ah-bekijk{margin-top:10px;display:inline-flex;align-items:center;gap:6px}
.ah-bekijk svg{width:16px;height:16px}
/* oefening (fase 6): oordeel per maatregel */
.oef-mo{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.oef-mo li{line-height:1.4}
.oef-mo-uitleg{margin:14px 4px 0;color:var(--soft)}
.oef-steekw{margin:4px 0 10px}
.mo-seg button.dim{color:#5B6370}   /* niet gekozen naast een gekozen oordeel: rustig, maar leesbaar (contrast ≥ 4,5:1) */
/* invulling bekijken: de maatregel waar een actie vandaan komt (#/bekijk/<id>/w/<waarneming>/<maatregel>) even gemarkeerd */
.mokaart.bk-focus,.eglijst li.bk-focus{outline:3px solid var(--accent);outline-offset:3px;animation:bkFocus 1.6s ease-out 1}
@keyframes bkFocus{0%{outline-color:transparent}20%{outline-color:var(--accent)}100%{outline-color:var(--accent)}}
@media (prefers-reduced-motion:reduce){.mokaart.bk-focus{animation:none}}
/* dashboard fase 6 */
/* dashboard en kwartaalrapportage op echte gegevens, per maatregel-oordeel (js/dashboard.js, js/kwartaal.js) */
.dash-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.dash-kop .btn{width:auto}
.dash-bron{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;font-size:13px;color:var(--soft);font-weight:600}
.dash-bron.offline{padding:12px 14px;border-radius:16px;background:var(--butter);color:var(--amber);font-weight:600;line-height:1.45}
.dash-bron.offline svg{flex:none;width:18px;height:18px}
.dash-bron.offline span{flex:1 1 260px;min-width:0}
.dash-bron .btn{width:auto}
.dash-link{background:none;border:0;padding:4px 2px;font:inherit;font-weight:800;color:var(--accent);cursor:pointer;text-align:left}
.dash-link:hover{text-decoration:underline}
.dash-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.dash-sel{height:38px;border-radius:12px;border:0;box-shadow:inset 0 0 0 1px var(--line);padding:0 10px;font-size:13px;font-weight:600;background:#fff;color:var(--soft);max-width:260px}
.dash-sel.aan{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--accent)}
.dash-leeg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;min-height:150px;padding:18px 12px;border-radius:18px;background:#FBF8F3;color:var(--ink)}
.dash-leeg b{font-size:15px;font-weight:800}
.dash-leeg .s{max-width:340px}
.dash-leeg .dl-bol{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;font-size:20px;margin-bottom:6px}
.dash-leeg-k{padding:6px 0}
.dashgrid .grafiek>.dash-leeg{flex:1}
.topmr{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.topmr-r{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:16px;background:#FBF8F3;color:var(--ink);cursor:pointer}
.topmr-r:hover{background:#F6F0E7}
.topmr-r .nr{flex:none;width:26px;height:26px;border-radius:50%;background:var(--warm);color:var(--warm-ink);display:grid;place-items:center;font-size:13px;font-weight:800}
.topmr-r .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.topmr-r .tm-t{font-weight:750;line-height:1.35;overflow-wrap:anywhere}
.topmr-r .s{font-size:12.5px;line-height:1.35}
.topmr-r .tm-n{flex:none;display:flex;gap:4px}
.topmr-r .tm-z{flex:none;font-size:12.5px;font-weight:700;color:var(--soft);min-width:96px;text-align:right}
.hbars .kbar{grid-template-columns:170px 1fr 46px}
.hbars .hpct{font-size:13.5px}
.dash-tab{width:100%;border-collapse:collapse;font-size:14px}
.dash-tab th{text-align:left;font-size:12.5px;color:var(--soft);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--line)}
.dash-tab td{padding:7px 8px;border-bottom:1px solid #F4EDE3;font-weight:650}
.dash-tab tr:last-child td{border-bottom:0}
.dash-rij{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #F4EDE3;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.dash-rij:hover .grow{color:var(--accent)}
.dash-rij>span[aria-hidden]{color:var(--soft)}
.dash-h3{font-size:14px;font-weight:800;margin:4px 0 8px}
@media(min-width:900px){.view[data-page=dashboard] .kpis.dash-kpis{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1500px){.view[data-page=dashboard] .kpis.dash-kpis{grid-template-columns:repeat(6,1fr)}}
@media(min-width:1500px){.topmr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}}
@media print{.dash-bron{display:none}}
.kwrij.kw-in{padding-left:14px;font-weight:650}
.kwrij.kw-in2{padding-left:28px;font-weight:600;color:var(--soft)}
.kwrij .grow .s{font-weight:600}
/* rapport fase 6 */
.rapw-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.rapw-kop .t{min-width:0}
.rapw-bk{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:6px 8px;margin:-8px -8px 0 0;font-size:13.5px}
.rap-tp{font-size:13px;font-weight:800;margin-top:3px;display:flex;align-items:center;gap:4px}
.rap-tp.ok{color:var(--green)}
.rap-tp.gv{color:var(--red)}
.rap-eg{margin:6px 0 2px;padding:8px 10px;border-radius:12px;background:var(--butter,#F4EFE7);font-size:14px;line-height:1.45}
.rap-eg b{display:block;font-size:12.5px;color:var(--ink)}
.rapactie{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;width:100%;margin-top:6px;padding:6px 8px;min-height:40px;border-radius:10px;background:var(--accent-bg);color:var(--accent-ink);font-size:13px;font-weight:700;text-align:left;white-space:normal}
.rapactie>span:first-of-type{flex:1 1 150px;min-width:0}
.rapactie>.badge,.rapactie>span:last-child{flex:none}
.rapactie>svg,.rap-tp>svg,.rapkop.rappauze>svg,.rapw-bk>svg{flex:none;width:14px;height:14px;min-width:14px}
.rapkop.rappauze{margin:2px 0 10px;display:flex;align-items:center;gap:5px}
@media(min-width:561px){.raptab{table-layout:fixed}.raptab th:nth-child(1){width:54%}.raptab th:nth-child(2){width:26%}.raptab td:last-child{white-space:normal}}
@media print{.rapw-bk{display:none}}

/* acties fase 6 */
/* wegwijzer "zonder actie": tekst vult de kaart, het pijltje blijft klein rechts */
.za-kaart>svg{flex:0 0 18px;width:18px;height:18px}
.za-kaart .grow{flex:1 1 0;min-width:0}
.za-kaart .grow .s{line-height:1.4}
.za-gevaar{color:var(--red);font-weight:700}
/* nieuwe actie: wat de inspecteur bij het gekozen punt vastlegde */
.na-info{margin:8px 0 4px;padding:12px 14px;border-radius:16px;background:var(--accent-bg);display:flex;flex-direction:column;gap:6px;line-height:1.4}
.na-regel{font-weight:700;font-size:14px;color:var(--accent);overflow-wrap:anywhere}
.na-oordeel{display:flex;gap:10px;align-items:flex-start;overflow-wrap:anywhere}
.na-oordeel .izo{margin-top:1px}
.na-vlag{display:flex;flex-wrap:wrap;gap:6px}
.na-woorden{display:flex;gap:10px;align-items:flex-start}
.na-woorden .lbl{flex:none}
.na-al{font-size:13.5px;color:#6B4A00;background:var(--butter);border-radius:12px;padding:8px 10px}
.na-bekijk{align-self:flex-start;width:auto;display:inline-flex;align-items:center;gap:6px;margin-top:2px}
.na-bekijk svg{width:16px;height:16px}
body.zon .na-info{background:#fff;box-shadow:inset 0 0 0 2px #141A22}
body.zon .na-regel{color:#141A22}
/* oud concept van vóór fase 6 omzetten (stap "omzetten"): wat de inspecteur toen koos en schreef, rustig onder elkaar */
.om-lijst{display:flex;flex-direction:column;gap:0;margin-top:12px;border-top:1px solid var(--line)}
.om-rij{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.45}
.om-k{color:var(--soft);font-weight:650}
.om-w{min-width:0;overflow-wrap:anywhere}
.om-w .izo,.om-w .ochip{vertical-align:middle}
.om-gevaar{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:750}
.om-gevaar svg{flex:none;width:16px;height:16px}
.om-keus .btn + .om-uitleg{margin:6px 2px 14px}
.om-uitleg{margin:6px 2px 0;line-height:1.45}
.om-notitie{background:var(--butter);box-shadow:none}
.om-notitie .lbl{background:#fff;color:var(--ink);margin-right:6px}
.om-notitie .s{margin-top:6px}
@media(max-width:420px){.om-rij{grid-template-columns:1fr}}
/* besluit "geen actie nodig" (Vervallen met herkomst.geen_actie) */
.badge.b-geen{background:var(--mist);color:var(--ink)}

/* logo fase 6 */
/* Beeldmerk = de mascotte (icons/mascotte-120.webp, transparant): kopbalk, zijmenu, opstartscherm en kwartaalkop.
   Geen gekleurd vlak meer: de mascotte staat los op de crèmekleurige achtergrond. De oude letter "N" blijft in de HTML
   (aria-hidden) maar is onzichtbaar. .ld-splash .ld-splash-ico is specifieker dan de regel in css/laden.css (die later laadt). */
.brand .logo,.sidebrand .logo,.logo.groot,.ld-splash .ld-splash-ico{background:transparent url(icons/mascotte-120.webp) center/contain no-repeat;color:transparent;font-size:0;border-radius:0;flex:none}
.brand .logo{width:40px;height:40px}
.sidebrand .logo{width:46px;height:46px}
.logo.groot{width:56px;height:56px}
.ld-splash .ld-splash-ico{width:96px;height:96px}
/* inlogscherm: de mascotte groot en gecentreerd boven "Inloggen" (js/auth.js, demo: js/kern.js view_login) */
.login-kop{padding:14px 0 10px;text-align:center}
.login-mascotte{display:block;width:132px;height:132px;margin:0 auto 10px}
.login-kop .kicker{margin-bottom:2px}
@media(min-width:900px){.login-mascotte{width:148px;height:148px}.login-kop{padding-top:22px}}
@media(max-height:640px){.login-mascotte{width:96px;height:96px;margin-bottom:6px}.login-kop{padding-top:6px}}
/* op het inlogscherm staat de grote mascotte al: de kleine in de kopbalk wijkt (geen dubbel beeldmerk) */
#app:has(.login-kop) .topbar .brand{visibility:hidden}