/* Werkplekinspectie — css/koppel.css
   Koppelstap (drie regels met volledige risicozin, sterke/zwakke match) en het actievoorstel bij direct gevaar.
   Hoort bij js/koppel.js en de schermen ins_koppel/ins_actie in js/inspectie.js. Stijl B: crème, wit, groen accent. */

/* ---- regelkaarten: volledige risicozin, groot aanraakvlak (handschoenen) ---- */
.kstap .kpick{width:100%;min-height:64px;padding:14px 14px 12px;gap:6px;text-align:left}
.kstap .kpick + .kpick{margin-top:10px}
.kstap .kpick .t,.kstap .kpick + .kpick .t{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible;font-size:16.5px;font-weight:800;line-height:1.35}
.kstap .kpick .vp-top{gap:8px}
.kstap .kpick .ktag{flex:1;min-width:0;font-size:12.5px;font-weight:800;color:#5E544A}
.kstap .kpick.k1{background:#F3EFFB;box-shadow:inset 0 0 0 2px #CFC3EE}
.kstap .kpick:not(.k1){background:#fff;box-shadow:inset 0 0 0 1.5px #EADFCF}
.kstap .kpick:not(.k1):active{background:#F4EDE3}
.kstap .kpick .waarom{font-size:13.5px;font-weight:700;color:#5B46A0}

/* ---- sterk / zwak ---- */
.kmatchrij{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 2px}
.lbl.kmatch.sterk{background:var(--accent-bg);color:var(--accent-ink)}
.lbl.kmatch.zwak{background:#F1ECE4;color:#4A4036}
.kzwak{flex:1 1 100%;font-size:14.5px;font-weight:700;line-height:1.4;color:#5E4500}

/* ---- "Of past een van deze beter?" onder de oordeelknoppen bij een sterke match ---- */
.kook{padding:14px 14px 16px}
.kook-t{font-size:15px;font-weight:800;margin:0 2px 10px;color:var(--ink)}

/* ---- direct gevaar in het actievoorstel ---- */
.kgevaar{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;border-radius:18px;background:var(--red-bg);color:#8A1C12;font-size:15px;font-weight:700;line-height:1.35}
.kgevaar svg{flex:none;width:20px;height:20px}
.kgevaar span{flex:1;min-width:0}
.kgevaar b{font-weight:800}
.kvlakken.vier{grid-template-columns:repeat(2,1fr)}
.kvlakken.vier .kvlak{min-height:64px}
.kv-vs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-2px 2px 8px}
.kv-vs .s{font-size:13.5px;font-weight:700;color:#5E544A;line-height:1.3}

/* ---- veldmodus (grote doelen) en zonmodus (maximaal contrast) ---- */
body.veld .kstap .kpick{min-height:72px}
body.veld .kstap .kpick .t{font-size:18px}
body.veld .kvlakken.vier .kvlak{min-height:76px}
body.zon .kstap .kpick,body.zon .kstap .kpick.k1{background:#fff;box-shadow:inset 0 0 0 2px #141A22}
body.zon .kstap .kpick .ktag,body.zon .kzwak,body.zon .kv-vs .s,body.zon .kook-t{color:#141A22}
body.zon .kstap .kpick .waarom{color:#3d2580}
body.zon .lbl.kmatch{background:#fff;color:#141A22;box-shadow:inset 0 0 0 1.5px #141A22}
body.zon .kgevaar{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2.5px #B42318}

/* ---- oordeel C/A/V naast elkaar (koppel- en oordeelstap): boven de vouw op 390×844, direct onder de regel ----
   Elk vlak ± 110 px breed en ≥ 76 px hoog (handschoenen); de uitleg ("Niet in orde, moet opgelost") blijft voor
   schermlezers in de knopnaam, maar staat niet zichtbaar in het smalle vlak. */
.seg.stapel.orij{flex-direction:row;gap:8px}
.seg.stapel.orij button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;padding:10px 4px;text-align:center}
.seg.stapel.orij .l{width:40px;height:40px;border-radius:13px;font-size:21px}
.seg.stapel.orij .w{align-self:center;font-size:15.5px;line-height:1.1}
.seg.stapel.orij .u{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.seg.stapel.orij button.on-C::after,.seg.stapel.orij button.on-A::after,.seg.stapel.orij button.on-V::after{top:8px;right:10px;transform:none;font-size:16px}
.odock.vlak .seg.stapel.orij button{min-height:76px}
body.veld .odock.vlak .seg.stapel.orij button,body.veld .seg.stapel.orij button{min-height:88px}
body.veld .seg.stapel.orij .l{width:46px;height:46px;font-size:24px}
body.veld .seg.stapel.orij button .w{font-size:16.5px}
/* onder de oordeelknoppen bij een sterke match: doorvraag en maatregelen */
.kna{padding:12px 14px}
.kna .doorvraag{margin-top:0}
.kna .doorvraag + .vs-mr{margin-top:10px}
/* algemeen onderwerp: apart van de drie taakregels */
.kstap .kpick.kalg{margin-top:12px;background:#FCFAF6;box-shadow:inset 0 0 0 1.5px #E2D6C5}
.kstap .kpick.kalg .ktag{color:#6E6255}
body.zon .kstap .kpick.kalg{background:#fff;box-shadow:inset 0 0 0 2px #141A22}
/* direct gevaar: ter-plaatse-vraag niet beantwoord bij vastleggen */
.kvmis{margin-top:10px;padding:12px 14px;border-radius:16px;background:var(--red-bg);color:#8A1C12;font-size:15px;font-weight:800;line-height:1.35}
.kvmis-groep{border-radius:18px;box-shadow:0 0 0 3px var(--red)}
body.zon .kvmis{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2.5px #B42318}
/* sterke match: oordeelknoppen plakken onderin (sticky) zolang hun plek onder de vouw ligt */
.odock.kplak{margin:12px -6px 0;padding:16px 6px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(rgba(250,246,239,0),var(--bg) 16px)}
.odock.kplak .otitel{margin:0 2px 8px}
.odock.kplak .otitel span{color:#6E6255}
.knvt .linkknop.nvt{min-height:56px;padding:12px 0 4px}
body.veld .knvt .linkknop.nvt{min-height:64px}
body.zon .odock.kplak{background:#fff}
body.zon .odock.kplak .otitel span{color:#141A22}
@media(min-width:900px){.odock.kplak{position:static;background:none;margin:14px 0 0;padding:2px 0 4px}}