/* MaxximParis-OS · intel.css (fase 3, 03/04-10-2026). Visual intelligence voor Home, My workday, Attention needed, Product quality,
   Recommendations en Suppliers, plus de support-blokken bij Order en Customer. Bouwt op de tokens en componenten van index.html
   (kaart, tegel, lbl, badge, btn, reveal). Principe: één dominante boodschap per gebied, details achter "Why?" en uitklappen.
   Geen nieuwe kleuren: goud als merk, rood/amber/groen alleen als betekenis, grijs voor onzekerheid. */

.il-live{display:grid;gap:22px}
.il-live h2{font-family:var(--titel);font-weight:400;font-size:22px;line-height:1.3;color:var(--inkt-donker);margin:0;letter-spacing:.005em}
.il-live h3{font-family:var(--titel);font-weight:400;font-size:16px;color:var(--inkt-donker);margin:0}
.il-live p{margin:0}
.il-live .lbl{display:block;margin-bottom:6px}
.il-laden{padding:34px 20px;text-align:center;color:var(--inkt-licht);font-size:13px}
.il-fout{border-left:2px solid var(--rood)}

/* niveau-labels (datavertrouwen) en levels (urgentie) */
/* v0.15: één rustige vorm op alle pagina's: grijze tekst, alleen de stip draagt de kleur */
.il-nv{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht);white-space:nowrap}
.il-nv::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--inkt-zacht);flex:none}
.il-nv.verified::before{background:var(--groen)}
.il-nv.likely::before{background:var(--amber)}
.il-nv.inferred::before,.il-nv.possible::before{background:transparent;border:1px dotted var(--inkt-zacht)}
.il-nv.unknown::before{background:transparent;border:1px solid var(--inkt-zacht)}
.il-lv{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--inkt-licht);white-space:nowrap}
.il-lv::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--inkt-zacht)}
.il-lv.act{color:var(--rood)}.il-lv.act::before{background:var(--rood)}
.il-lv.watch{color:var(--amber)}.il-lv.watch::before{background:var(--amber)}
.il-lv.opportunity{color:var(--groen)}.il-lv.opportunity::before{background:var(--groen)}
.il-lv.ok{color:var(--groen)}.il-lv.ok::before{background:transparent;border:1px solid var(--groen)}

/* trend en verschil */
.il-d{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--inkt-licht);white-space:nowrap}
.il-d .ico{width:12px;height:12px}
.il-d.op{color:var(--groen)}.il-d.neer{color:var(--rood)}.il-d.vlak{color:var(--inkt-zacht)}
.il-d.op.slecht{color:var(--rood)}.il-d.neer.slecht{color:var(--groen)}

/* ring (percentage of zekerheid) */
.il-ring{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:conic-gradient(var(--ring-k,var(--data-goud)) calc(var(--p,0)*1%),var(--grond-dim) 0)}
.il-ring::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--vlak)}
.il-ring b{position:relative;z-index:1;font-family:var(--titel);font-weight:400;font-size:11.5px;color:var(--inkt-donker)}
.il-ring.l{width:64px;height:64px}.il-ring.l b{font-size:15px}
.il-ring.rood{--ring-k:var(--rood)}.il-ring.amber{--ring-k:var(--amber)}.il-ring.groen{--ring-k:var(--groen)}.il-ring.grijs{--ring-k:var(--inkt-zacht)}

/* sparkline en minibalken */
.il-spark{display:block;width:100%;height:34px}
.il-spark path{fill:none;stroke:var(--data-goud);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.il-spark path.vlak{fill:var(--goud-licht);stroke:none;opacity:.7}
.il-spark circle{fill:var(--data-goud)}
.il-bars{display:grid;gap:7px}
.il-bars .r{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,2fr) auto;gap:10px;align-items:center;font-size:12.5px}
.il-bars .r>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--inkt)}
.il-bars .m{height:6px;background:var(--grond-dim);border-radius:3px;position:relative;overflow:hidden}
.il-bars .m i{position:absolute;left:0;top:0;bottom:0;background:var(--data-goud);border-radius:3px;width:0;transition:width .9s var(--ease)}
.il-bars .m i.vorig{background:var(--goud-zacht);opacity:.6}
.il-bars .m i.rood{background:var(--rood)}.il-bars .m i.amber{background:var(--amber)}
.il-bars .n{font-family:var(--titel);font-size:13px;color:var(--inkt-donker);white-space:nowrap}
.il-bars .n small{font-family:var(--tekst);color:var(--inkt-zacht);font-size:11px;margin-left:4px}
.il-cols{display:flex;align-items:flex-end;gap:3px;height:40px}
.il-cols i{flex:1;background:var(--goud-zacht);border-radius:2px 2px 0 0;min-height:2px;transition:height .8s var(--ease)}
.il-cols i.nu{background:var(--data-goud)}
.il-cols i.hoog{background:var(--amber)}

/* relatieketen */
.il-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-size:11.5px;color:var(--inkt)}
.il-chain span{border:1px solid var(--lijn);border-radius:999px;padding:3px 10px;background:var(--vlak);white-space:nowrap}
.il-chain span.aan{border-color:var(--goud);background:var(--goud-licht);color:var(--inkt-donker)}
.il-chain i{width:18px;height:1px;background:var(--lijn-sterk);position:relative;flex:none}
.il-chain i::after{content:'';position:absolute;right:-1px;top:-3px;border:3.5px solid transparent;border-left-color:var(--lijn-sterk)}

/* hero: één boodschap */
.il-hero{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius-k);box-shadow:var(--schaduw);padding:26px 28px 22px;display:grid;gap:18px}
.il-hero .kop{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap}
.il-hero .kop>div:first-child{max-width:720px}
.il-hero h2{font-size:24px}
.il-hero .sub{font-size:13.5px;color:var(--inkt-licht);margin-top:6px;line-height:1.55}
.il-getallen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 24px}
.il-getallen>div{min-width:0;display:grid;gap:3px;align-content:start}
.il-getallen small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--inkt-zacht)}
.il-getallen b{font-family:var(--titel);font-weight:400;font-size:28px;line-height:1.1;color:var(--inkt-donker)}
.il-getallen b.k{font-size:20px}
.il-getallen .u{font-size:12px;color:var(--inkt-licht)}
.il-getallen>div.rood b{color:var(--rood)}
.il-getallen>div.amber b{color:var(--amber)}

/* inzichten: drie regels, niet vijftien tegels */
.il-inz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.il-inz>div{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius-k);padding:16px 18px;display:grid;gap:8px;align-content:start;box-shadow:var(--schaduw)}
.il-inz .t{font-size:14.5px;color:var(--inkt-donker);line-height:1.45}
.il-inz .w{font-size:12.5px;color:var(--inkt-licht);line-height:1.5}
.il-inz .f{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:2px}

/* movers: wat veranderde */
.il-movers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--radius-k);overflow:hidden}
.il-movers>a,.il-movers>div{background:var(--vlak);padding:14px 16px;display:grid;gap:3px;min-width:0;text-decoration:none;color:inherit;transition:background .2s}
.il-movers>a:hover{background:var(--creme)}
.il-movers small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--inkt-zacht)}
.il-movers b{font-family:var(--titel);font-weight:400;font-size:22px;color:var(--inkt-donker);line-height:1.1}
.il-movers .il-d{font-size:11.5px}
.il-movers .il-nv{margin-top:3px}

/* signalen (Attention, Home) */
.il-sigs{display:grid;gap:10px}
.il-sig{display:grid;grid-template-columns:3px minmax(0,1fr);background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius-k);overflow:hidden;box-shadow:var(--schaduw)}
.il-sig>i{background:var(--inkt-zacht)}
.il-sig.act>i{background:var(--rood)}.il-sig.watch>i{background:var(--amber)}.il-sig.opportunity>i{background:var(--groen)}
.il-sig .b{padding:14px 18px 14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:start}
.il-sig .b.foto{grid-template-columns:44px minmax(0,1fr) auto}
.il-sig img{width:44px;height:44px;border-radius:6px;object-fit:cover;border:1px solid var(--lijn)}
.il-sig .t{font-size:14.5px;color:var(--inkt-donker);line-height:1.4}
.il-sig .w{font-size:12.5px;color:var(--inkt-licht);line-height:1.5;grid-column:1/-1}
.il-sig .b.foto .w{grid-column:2/-1}
.il-sig .meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:11px;color:var(--inkt-zacht);grid-column:1/-1}
.il-sig .b.foto .meta{grid-column:2/-1}
.il-sig .r{display:grid;gap:8px;justify-items:end;align-content:start}
.il-sig .btn.klein{padding:7px 11px;font-size:9.5px;letter-spacing:.14em}
.il-sig details{grid-column:1/-1;font-size:12.5px}
.il-sig .b.foto details{grid-column:2/-1}
.il-sig .lijstje{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.il-sig .lijstje li{padding-left:12px;position:relative;color:var(--inkt);font-size:12.5px}
.il-sig .lijstje li::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--goud)}
.il-live details>summary{list-style:none;cursor:pointer;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--goud-donker);display:inline-flex;align-items:center;gap:6px;user-select:none}
.il-live details>summary::-webkit-details-marker{display:none}
.il-live details>summary::before{content:'';width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.il-live details[open]>summary::before{transform:rotate(45deg)}
.il-live details>summary:hover{color:var(--inkt-donker)}
.il-live details .binnen{margin-top:10px;padding-top:10px;border-top:1px solid var(--lijn)}

/* groepkop */
.il-groep{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:-8px}
.il-groep .lbl{margin:0}
.il-groep small{font-size:12px;color:var(--inkt-licht)}
.il-groep .segment{margin-left:0}

/* twee kolommen */
.il-2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.il-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.il-kaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius-k);box-shadow:var(--schaduw);padding:18px 20px;display:grid;gap:12px;align-content:start}
.il-kaart .kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.il-kaart .kop small{font-size:12px;color:var(--inkt-licht)}
.il-leeg{font-size:13px;color:var(--inkt-licht);padding:10px 0}

/* productlijst (Product quality) */
.il-prods{display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--radius-k);overflow:hidden}
.il-prod{background:var(--vlak);display:grid;grid-template-columns:52px minmax(0,2fr) minmax(0,1.1fr) 120px minmax(0,1fr) 44px;gap:14px;align-items:center;padding:12px 18px;cursor:pointer;transition:background .2s}
.il-prod:hover{background:var(--creme)}
.il-prod.aan{background:var(--creme)}
.il-prod img,.il-prod .noimg{width:52px;height:52px;border-radius:8px;object-fit:cover;border:1px solid var(--lijn);background:var(--grond-dim)}
.il-prod .naam{display:grid;gap:3px;min-width:0}
.il-prod .naam b{font-family:var(--titel);font-weight:400;font-size:15px;color:var(--inkt-donker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.il-prod .naam small{font-size:11.5px;color:var(--inkt-licht);display:flex;gap:10px;flex-wrap:wrap}
.il-prod .cijfer{display:grid;gap:2px;min-width:0}
.il-prod .cijfer b{font-family:var(--titel);font-weight:400;font-size:18px;color:var(--inkt-donker);line-height:1.1}
.il-prod .cijfer small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht)}
.il-prod .cijfer .il-d{font-size:11.5px}
.il-prod .ringcel{display:flex;align-items:center;gap:10px}
.il-prod .ringcel small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht);line-height:1.5}
.il-prod .pijl{width:16px;height:16px;color:var(--inkt-zacht);transition:transform .25s;justify-self:end}
.il-prod.aan .pijl{transform:rotate(90deg)}
.il-prod-kop{background:var(--grond-warm);display:grid;grid-template-columns:52px minmax(0,2fr) minmax(0,1.1fr) 120px minmax(0,1fr) 44px;gap:14px;padding:8px 18px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht)}
.il-prod-detail{background:var(--creme);padding:18px 22px 20px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:22px}
.il-prod-detail h4{font-family:var(--titel);font-weight:400;font-size:13.5px;margin:0 0 8px;color:var(--inkt-donker)}
.il-prod-detail .thr{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12.5px}
.il-prod-detail .thr li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline}
.il-prod-detail .thr small{color:var(--inkt-zacht);font-size:11px;white-space:nowrap}
.il-prod-detail .thr a{color:var(--goud-donker);text-decoration:none;font-size:11px;white-space:nowrap}
.il-prod-detail .thr a:hover{text-decoration:underline}
.il-prod-detail .thr .o{color:var(--inkt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.il-prod-detail .feit{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12.5px}
.il-prod-detail .feit dt{color:var(--inkt-zacht)}
.il-prod-detail .feit dd{margin:0;color:var(--inkt-donker)}
.il-rev{border-left:2px solid var(--lijn);padding:4px 10px;font-size:12.5px;color:var(--inkt);display:grid;gap:3px}
.il-rev.neg{border-left-color:var(--rood)}
.il-rev small{color:var(--inkt-zacht);font-size:11px;display:flex;gap:10px}
.il-rev a{color:var(--goud-donker);text-decoration:none}
.il-ster{color:var(--data-goud);letter-spacing:.08em;font-size:11px}

/* aanbevelingen */
.il-aanb{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius-k);box-shadow:var(--schaduw);display:grid;grid-template-columns:minmax(0,1fr) 260px;overflow:hidden}
.il-aanb .l{padding:20px 24px;display:grid;gap:12px;align-content:start}
.il-aanb .r{background:var(--creme);border-left:1px solid var(--lijn);padding:20px 22px;display:grid;gap:14px;align-content:start}
.il-aanb .soort{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.il-aanb .bev{font-size:13.5px;color:var(--inkt);line-height:1.55}
.il-aanb .bev b{font-weight:500;color:var(--inkt-donker)}
.il-aanb .blok small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--inkt-zacht);margin-bottom:4px}
.il-aanb .blok p{font-size:12.5px;color:var(--inkt);line-height:1.5}
.il-aanb ol{margin:0;padding-left:18px;font-size:12.5px;color:var(--inkt);display:grid;gap:4px}
.il-aanb ol li::marker{color:var(--goud)}
.il-aanb .zeker{display:flex;align-items:center;gap:12px}
.il-aanb .zeker small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--inkt-zacht);line-height:1.6}
.il-aanb .acties{display:flex;gap:8px;flex-wrap:wrap}

/* werkdag */
.il-wd{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--radius-k);overflow:hidden}
.il-wd>button{background:var(--vlak);padding:14px 16px;display:grid;gap:2px;text-align:left;border:0;font:inherit;cursor:pointer;min-width:0;color:inherit;transition:background .2s}
.il-wd>button:hover,.il-wd>button[aria-pressed="true"]{background:var(--creme)}
.il-wd small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--inkt-zacht)}
.il-wd b{font-family:var(--titel);font-weight:400;font-size:24px;color:var(--inkt-donker)}
.il-wd b.rood{color:var(--rood)}
.il-wd span{font-size:11.5px;color:var(--inkt-licht)}
.il-rijen{display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--radius-k);overflow:hidden}
.il-rij{background:var(--vlak);display:grid;grid-template-columns:8px minmax(0,1.4fr) minmax(0,2fr) auto auto;gap:14px;align-items:center;padding:11px 16px;cursor:pointer;text-decoration:none;color:inherit;transition:background .2s;font-size:13px}
.il-rij:hover{background:var(--creme)}
.il-rij i{width:8px;height:8px;border-radius:50%;background:var(--inkt-zacht)}
.il-rij i.rood{background:var(--rood)}.il-rij i.amber{background:var(--amber)}.il-rij i.normaal{background:var(--goud-zacht)}.il-rij i.laag{background:var(--grond-dim);border:1px solid var(--lijn-sterk)}
.il-rij b{font-weight:500;color:var(--inkt-donker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.il-rij .o{color:var(--inkt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.il-rij small{color:var(--inkt-zacht);font-size:11px;white-space:nowrap}
.il-rij .mood{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--inkt-licht);white-space:nowrap}
.il-rij .mood .ico{width:14px;height:14px}

/* leveranciers */
.il-lev{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius-k);box-shadow:var(--schaduw);padding:20px 22px;display:grid;gap:14px}
.il-lev .kop{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.il-lev .kop h3{font-size:19px}
.il-lev .cij{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px 18px}
.il-lev .cij small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht)}
.il-lev .cij b{font-family:var(--titel);font-weight:400;font-size:20px;color:var(--inkt-donker)}
.il-lev .cij .u{font-size:11.5px;color:var(--inkt-licht)}
.il-lev .plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.il-lev .plist a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--lijn);border-radius:var(--radius-k);padding:7px 10px;text-decoration:none;color:inherit;font-size:12.5px;transition:background .2s}
.il-lev .plist a:hover{background:var(--creme)}
.il-lev .plist img{width:36px;height:36px;border-radius:6px;object-fit:cover;border:1px solid var(--lijn)}
.il-lev .plist b{font-weight:500;color:var(--inkt-donker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.il-lev .plist small{display:block;color:var(--inkt-zacht);font-size:11px}
.il-ontbreekt{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12.5px;color:var(--inkt)}
.il-ontbreekt li{display:grid;grid-template-columns:14px 1fr;gap:8px;align-items:start}
.il-ontbreekt li::before{content:'';width:8px;height:8px;border:1px dashed var(--inkt-zacht);border-radius:50%;margin-top:5px}

/* support-blok bij Order en Customer (live-shopify) */
.il-sup{margin-top:16px;border-top:1px solid var(--lijn);padding-top:14px;display:grid;gap:12px}
.il-sup .kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.il-mom{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.il-mom li{display:grid;grid-template-columns:70px 14px minmax(0,1fr);gap:10px;align-items:start;font-size:12.5px;padding:5px 0}
.il-mom li small{color:var(--inkt-zacht);font-size:11px;white-space:nowrap}
.il-mom li i{width:8px;height:8px;border-radius:50%;background:var(--goud-zacht);margin-top:5px;position:relative}
.il-mom li i::after{content:'';position:absolute;left:3.5px;top:10px;width:1px;height:18px;background:var(--lijn)}
.il-mom li:last-child i::after{display:none}
.il-mom li i.support{background:var(--amber)}.il-mom li i.replacement{background:var(--rood)}.il-mom li i.refund{background:var(--rood)}.il-mom li i.review{background:var(--inkt-licht)}.il-mom li i.order{background:var(--data-goud)}
.il-mom li span{color:var(--inkt)}
.il-mom li a{color:var(--goud-donker);text-decoration:none;font-size:11px;margin-left:6px}
.il-chips{display:flex;flex-wrap:wrap;gap:6px}

/* mobiel: stapelen, belangrijkste eerst */
@media (max-width:1100px){
  .il-inz,.il-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .il-movers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .il-2{grid-template-columns:1fr}
  .il-prod,.il-prod-kop{grid-template-columns:44px minmax(0,2fr) minmax(0,1fr) 100px 44px}
  .il-prod .spark,.il-prod-kop .spark{display:none}
  .il-prod-detail{grid-template-columns:1fr 1fr}
  .il-aanb{grid-template-columns:1fr}.il-aanb .r{border-left:0;border-top:1px solid var(--lijn)}
  .il-wd{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .il-live{gap:16px}
  .il-hero{padding:18px 16px}.il-hero h2{font-size:19px}
  .il-getallen{grid-template-columns:repeat(2,minmax(0,1fr))}.il-getallen b{font-size:22px}
  .il-inz,.il-3{grid-template-columns:1fr}
  .il-movers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .il-sig .b{grid-template-columns:1fr}.il-sig .r{justify-items:start;grid-row:auto}
  .il-sig .b.foto{grid-template-columns:36px minmax(0,1fr)}.il-sig img{width:36px;height:36px}
  .il-prod,.il-prod-kop{grid-template-columns:40px minmax(0,1fr) 90px 30px;gap:10px;padding:10px 12px}
  .il-prod .issues,.il-prod-kop .issues{display:none}
  .il-prod-detail{grid-template-columns:1fr;padding:14px}
  .il-wd{grid-template-columns:repeat(2,minmax(0,1fr))}
  .il-rij{grid-template-columns:8px minmax(0,1fr) auto}.il-rij .o,.il-rij .mood{display:none}
  .il-lev .cij{grid-template-columns:repeat(2,minmax(0,1fr))}
  .il-mom li{grid-template-columns:56px 14px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.il-bars .m i,.il-cols i{transition:none}}

/* ========== HOME v0.15 (04-10-2026): executive cockpit in drie lagen ==========
   Laag 1: vijf grote getallen plus één waarschuwing. Laag 2: kleine context (delta-pil, confidence-stip, "vs").
   Laag 3: achter een klik. Kleur alleen met betekenis: rood = act now, amber = watch, groen = gezond, grijs = context,
   goud = merk en interface. Kleine signalen (sparkline, twee balkjes, stapelbalk, wachttijdbalk) in plaats van grafieken. */
.hm{display:grid;gap:36px}
.hm a:focus-visible,.hm details summary:focus-visible{outline:2px solid var(--goud);outline-offset:3px;border-radius:var(--radius-k)}
.hm .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--inkt-zacht);flex:none}
.hm .dot.rood{background:var(--rood)}.hm .dot.amber{background:var(--amber)}.hm .dot.groen{background:var(--groen)}.hm .dot.goud{background:var(--data-goud)}.hm .dot.grijs{background:var(--inkt-zacht)}
.hm b,.hm strong{font-weight:400}
.hm-open{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--goud-donker);text-decoration:none;white-space:nowrap}
.hm-open .ico{width:12px;height:12px;transition:transform .2s var(--ease)}
.hm-open:hover .ico,a:hover>.voet .hm-open .ico{transform:translateX(3px)}

/* laag-2 bouwstenen */
.hm-d{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:500;letter-spacing:.02em;padding:2px 8px 2px 6px;border-radius:999px;background:var(--grond-dim);color:var(--inkt);white-space:nowrap;font-variant-numeric:tabular-nums}
.hm-d .ico{width:11px;height:11px;stroke-width:2}
.hm-d.goed{background:var(--groen-licht);color:var(--groen)}
.hm-d.slecht{background:var(--rood-licht);color:var(--rood)}
.hm-d.vlak{color:var(--inkt-licht)}
.hm-vs{font-size:11px;color:var(--inkt-zacht);margin-left:7px;white-space:nowrap}
.hm-bars2{display:grid;gap:3px;width:100%}
.hm-bars2 i{display:block;height:5px;border-radius:3px;background:var(--grond-dim);position:relative;overflow:hidden}
.hm-bars2 i::after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--w,0);border-radius:3px;background:var(--data-goud);animation:hm-groei .9s var(--ease) both}
.hm-bars2 i.vorig::after{background:var(--goud-zacht);opacity:.65}
.hm-bars2.rood i:first-child::after{background:var(--rood)}
.hm-bars2.amber i:first-child::after{background:var(--amber)}
.hm-bars2.groen i:first-child::after{background:var(--groen)}
.hm-stapel{display:flex;gap:2px;height:7px;width:100%}
.hm-stapel i{display:block;width:var(--w);background:var(--data-goud);opacity:var(--o,1);border-radius:2px;animation:hm-groei .9s var(--ease) both}
.hm-stapel i.rest{background:var(--grond-dim);opacity:1;flex:1;animation:none}
@keyframes hm-groei{from{width:0}}

/* zone A: hero met vijf getallen en één waarschuwing */
.hm-hero{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:20px;align-items:stretch}
.hm-hero-l{display:grid;gap:14px;align-content:start;min-width:0}
.hm-hero h2{font-size:26px;line-height:1.25;max-width:46ch;text-wrap:balance}
.hm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:6px}
.hm-kpi{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius-k);box-shadow:var(--schaduw);padding:18px 18px 16px;display:grid;gap:0;align-content:start;min-width:0;text-decoration:none;color:inherit;transition:background .2s,border-color .2s,transform .25s var(--ease)}
.hm-kpi:hover{background:var(--creme);border-color:var(--lijn-sterk);transform:translateY(-1px)}
.hm-kpi b{font-family:var(--titel);font-size:34px;line-height:1;color:var(--inkt-donker);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-kpi.rood b{color:var(--rood)}
.hm-kpi .l{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-licht);margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-kpi .s{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--inkt-licht);margin-top:7px;min-height:18px;flex-wrap:wrap;line-height:1.35}
.hm-kpi .vis{display:block;margin-top:10px}
.hm-kpi .il-spark{height:26px}
.hm-eerst{background:var(--creme);border:1px solid var(--lijn);border-radius:var(--radius-k);box-shadow:var(--schaduw);padding:20px 22px 18px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:background .2s,border-color .2s}
.hm-eerst:hover{background:var(--goud-licht);border-color:var(--goud-zacht)}
.hm-eerst h3{display:flex;align-items:center;gap:9px;font-family:var(--tekst);font-weight:500;font-size:14px;color:var(--inkt-donker)}
.hm-eerst b{font-family:var(--titel);font-size:40px;line-height:1;color:var(--inkt-donker);letter-spacing:-.01em;margin-top:4px}
.hm-eerst.act b{color:var(--rood)}
.hm-eerst.watch b{color:var(--amber)}
.hm-eerst.opportunity b{color:var(--groen)}
.hm-eerst .vs{font-size:12.5px;color:var(--inkt-licht);line-height:1.5}
.hm-eerst .hm-bars2{margin-top:2px}
.hm-eerst .voet{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:10px}

/* zonekop */
.hm-zone>header{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.hm-zone>header h3{font-family:var(--titel);font-size:17px;color:var(--inkt-donker);letter-spacing:.005em}
.hm-zone>header small{font-size:12px;color:var(--inkt-licht)}
.hm-zone>header small a{color:var(--goud-donker);text-decoration:none}
.hm-zone>header small a:hover{text-decoration:underline;text-underline-offset:3px}

/* zone B: wat veranderde */
.hm-movers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.hm-mover{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius-k);box-shadow:var(--schaduw);padding:16px 18px 14px;display:grid;gap:0;align-content:start;min-width:0;text-decoration:none;color:inherit;transition:background .2s,border-color .2s}
a.hm-mover:hover{background:var(--creme);border-color:var(--lijn-sterk)}
.hm-mover b{font-family:var(--titel);font-size:26px;line-height:1;color:var(--inkt-donker);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-mover .l{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-licht);margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-mover .d{display:flex;align-items:center;margin-top:9px;min-height:20px}
.hm-mover .hm-bars2{margin-top:10px}
.hm-mover .f{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;flex-wrap:nowrap;min-width:0}
.hm-mover .f small{font-size:10px;color:var(--inkt-zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* zone C: drie inzichten */
.hm-inzs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hm-inz{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius-k);box-shadow:var(--schaduw);padding:18px 20px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.hm-inz h3{display:flex;align-items:center;gap:9px;font-family:var(--tekst);font-weight:500;font-size:14px;color:var(--inkt-donker)}
.hm-inz .cijfer{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hm-inz .cijfer b{font-family:var(--titel);font-size:30px;line-height:1;color:var(--inkt-donker);letter-spacing:-.01em;white-space:nowrap}
.hm-inz .cijfer span{font-size:12px;color:var(--inkt-licht)}
.hm-inz .vs{font-size:12.5px;color:var(--inkt-licht);line-height:1.5}
.hm-inz .hm-bars2,.hm-inz .hm-stapel{margin:2px 0}
.hm-inz .chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}
.hm-inz .chips small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht);margin-right:2px}
.hm-inz .chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:500;letter-spacing:.03em;padding:3px 10px 3px 3px;border-radius:999px;border:1px solid var(--lijn);background:var(--vlak);color:var(--inkt-donker);text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s}
.hm-inz .chip:hover{background:var(--creme);border-color:var(--goud-zacht)}
.hm-inz .chip img{width:26px;height:26px;border-radius:6px;object-fit:cover;border:1px solid var(--lijn)}
.hm-inz .chip:not(:has(img)){padding-left:10px}
.hm-inz .chip em{font-style:normal;font-weight:400;color:var(--inkt-licht)}
.hm-inz .voet{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--lijn)}

/* zones D en E: lijsten */
.hm-2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start}
.hm-lijst{display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--radius-k);overflow:hidden;box-shadow:var(--schaduw)}
.hm-leeg{background:var(--vlak);padding:18px;font-size:13px;color:var(--inkt-licht)}
.hm-rij,.hm-rec{background:var(--vlak);display:grid;gap:14px;align-items:center;padding:13px 16px 13px 18px;text-decoration:none;color:inherit;font-size:13.5px;min-width:0;transition:background .2s}
.hm-rij{grid-template-columns:7px minmax(0,1fr) auto 14px}
.hm-rij.foto{grid-template-columns:7px 36px minmax(0,1fr) auto 14px}
.hm-rij:hover,.hm-rec:hover{background:var(--creme)}
.hm-rij img{width:36px;height:36px;border-radius:6px;object-fit:cover;border:1px solid var(--lijn)}
.hm-rij .t,.hm-rec .t{display:grid;gap:3px;min-width:0}
.hm-rij .t b{font-weight:500;color:var(--inkt-donker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-rij .t span{font-size:12.5px;color:var(--inkt-licht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-rij .m{display:grid;gap:5px;justify-items:end;font-size:11px;color:var(--inkt-zacht);white-space:nowrap}
.hm-rij .tl{width:64px;height:3px;background:var(--grond-dim);border-radius:2px;overflow:hidden}
.hm-rij .tl i{display:block;height:100%;width:var(--w,0);background:var(--amber);border-radius:2px}
.hm-rij .tl i.rood{background:var(--rood)}
.hm-rij .pijl{width:14px;height:14px;color:var(--inkt-zacht);transition:transform .2s var(--ease)}
.hm-rij:hover .pijl{transform:translateX(3px);color:var(--goud-donker)}
.hm-rec{grid-template-columns:40px minmax(0,1fr) auto}
.hm-rec .il-ring{width:40px;height:40px}
.hm-rec .il-ring b{font-size:10.5px}
.hm-rec .t b{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--inkt-donker);line-height:1.35}
.hm-rec .t span{font-size:12.5px;color:var(--inkt-licht);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-rec .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht);align-self:start}

/* laag 3: hoe de getallen gemaakt zijn */
.hm-hoe{font-size:12.5px;color:var(--inkt-licht)}
.hm-hoe dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:12px 0 0;max-width:80ch}
.hm-hoe dt{color:var(--inkt-donker);font-weight:500}
.hm-hoe dd{margin:0}

@media (max-width:1180px){
  .hm-hero{grid-template-columns:1fr}
  .hm-eerst{grid-template-columns:1fr}
  .hm-movers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hm-inzs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-2{grid-template-columns:1fr}
}
@media (max-width:700px){
  .hm{gap:28px}
  .hm-hero h2{font-size:22px}
  .hm-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hm-kpi{padding:14px 14px 12px}.hm-kpi b{font-size:28px}
  .hm-kpi:nth-child(5):last-child{grid-column:1/-1}
  .hm-eerst b{font-size:34px}
  .hm-movers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hm-mover{padding:14px 14px 12px}.hm-mover b{font-size:22px}
  .hm-inzs{grid-template-columns:1fr}
  .hm-rij{grid-template-columns:7px minmax(0,1fr) 14px;align-items:start}.hm-rij.foto{grid-template-columns:7px 36px minmax(0,1fr) 14px}
  .hm-rij .dot{margin-top:6px}.hm-rij .tl{display:none}.hm-rij .m{grid-column:2;justify-items:start;margin-top:-6px}.hm-rij.foto .m{grid-column:3}
  .hm-rij .t span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .hm-rec{grid-template-columns:40px minmax(0,1fr)}.hm-rec .k{display:none}
  .hm-hoe dl{grid-template-columns:1fr;gap:2px 0}.hm-hoe dd{margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){.hm-bars2 i::after,.hm-stapel i{animation:none}.hm-kpi,.hm-open .ico,.hm-rij .pijl{transition:none}}

/* ========== MY WORKDAY v0.16 (04-10-2026): wachtrij in het hm-ritme, tabel met iconen per kolom ==========
   Bouwt op de hm-laag (tegels, eerst-kaart, zones). Nieuw: tegel als tab, filterbalk, kolomkoppen met sorteerpijl,
   icoon-in-cirkel voor kanaal en stemming, urgentie als stip met woord, wachttijdbalk, orderchip, uitklapbare case-kern.
   Kleur alleen als betekenis; de rest inkt en goud. */
.wd .hm-kpi.wd-tab{cursor:pointer;position:relative}
.wd .hm-kpi.wd-tab::after{content:'';position:absolute;left:18px;right:18px;bottom:-1px;height:2px;background:var(--goud);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.wd .hm-kpi.wd-tab[aria-pressed="true"]{background:var(--creme);border-color:var(--goud-zacht)}
.wd .hm-kpi.wd-tab[aria-pressed="true"]::after{transform:scaleX(1)}
.wd .hm-hero{align-items:start;grid-template-columns:minmax(0,1fr) 272px}
.wd .hm-eerst{padding:18px 20px 16px;gap:9px;min-width:0}
.wd .hm-eerst b.naam{font-size:22px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0}
.wd .hm-eerst .vs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-mix{display:flex;gap:2px;height:4px;width:100%;opacity:.9}
.wd-mix i{display:block;width:var(--w);border-radius:2px;background:var(--inkt-zacht);min-width:3px}
.wd-mix i.rood{background:var(--rood)}.wd-mix i.amber{background:var(--amber)}.wd-mix i.goud{background:var(--data-goud)}.wd-mix i.grijs{background:var(--lijn-sterk)}
.wd-eerst-m{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wd-eerst-w{display:grid;gap:5px;font-size:12px;color:var(--inkt-licht)}
.wd-eerst-w .tl,.wd-r .tl{width:100%;max-width:120px;height:3px;background:var(--grond-dim);border-radius:2px;overflow:hidden;display:block}
.wd-eerst-w .tl i,.wd-r .tl i{display:block;height:100%;width:var(--w,0);background:var(--amber);border-radius:2px}
.wd-eerst-w .tl i.rood,.wd-r .tl i.rood{background:var(--rood)}
.wd-eerst-w em{font-style:normal}

/* icoon in cirkel (Klaviyo-les: type herkenbaar zonder te lezen) */
.wd-ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--lijn);background:var(--vlak);color:var(--inkt);flex:none}
.wd-ic .ico{width:14px;height:14px}
.wd-ic.leeg{border-style:dotted;color:var(--inkt-zacht)}
.wd-ic.spam{border-color:var(--lijn-sterk);background:var(--grond-dim)}
.wd-ic.rood{color:var(--rood);background:var(--rood-licht);border-color:transparent}
.wd-ic.amber{color:var(--amber);background:var(--amber-licht);border-color:transparent}
.wd-ic.groen{color:var(--groen);background:var(--groen-licht);border-color:transparent}

/* filterbalk */
.wd-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.wd-zoek{display:flex;align-items:center;gap:8px;flex:1 1 240px;max-width:360px;height:36px;padding:0 12px;border:1px solid var(--lijn);border-radius:var(--radius);background:var(--vlak);color:var(--inkt-licht);transition:border-color .2s}
.wd-zoek:focus-within{border-color:var(--goud)}
.wd-zoek .ico{width:15px;height:15px;flex:none}
.wd-zoek input{border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--inkt-donker);width:100%;min-width:0}
.wd-zoek input::placeholder{color:var(--inkt-zacht)}
.wd-filters select{height:36px;padding:0 30px 0 12px;border:1px solid var(--lijn);border-radius:var(--radius);background:var(--vlak) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346484a' stroke-width='1.6' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center/13px;appearance:none;-webkit-appearance:none;font:inherit;font-size:12.5px;color:var(--inkt-donker);cursor:pointer;transition:border-color .2s}
.wd-filters select:hover,.wd-filters select:focus{border-color:var(--goud);outline:0}
.wd-n{margin-left:auto;font-size:12px;color:var(--inkt-licht);white-space:nowrap}
.wd-n b{font-weight:500;color:var(--inkt-donker)}

/* tabel: kolomkop en rijen delen hetzelfde raster */
.wd-tabel{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius-k);box-shadow:var(--schaduw);overflow:hidden}
.wd-kop,.wd-r{display:grid;grid-template-columns:7px minmax(0,1fr) 84px 136px 100px 112px 108px 36px 14px;gap:14px;align-items:center;padding:0 16px 0 18px}
.wd-kop{min-height:38px;border-bottom:1px solid var(--lijn);background:var(--grond-warm)}
.wd-kop>*{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-licht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-kop button{display:inline-flex;align-items:center;gap:4px;border:0;background:none;font:inherit;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-licht);cursor:pointer;padding:0;transition:color .2s}
.wd-kop button .ico{width:11px;height:11px;opacity:.45;transition:opacity .2s}
.wd-kop button:hover,.wd-kop button.aan{color:var(--inkt-donker)}
.wd-kop button.aan .ico{opacity:1;color:var(--goud-donker)}
.wd-rijen{display:grid}
.wd-rij{border-bottom:1px solid var(--lijn)}
.wd-rij:last-child{border-bottom:0}
.wd-r{min-height:60px;padding-top:11px;padding-bottom:11px;text-decoration:none;color:inherit;font-size:13.5px;min-width:0;transition:background .2s;position:relative}
.wd-r:hover{background:var(--creme)}
.wd-rij.open>.wd-r{background:var(--creme)}
.wd-rij.open>.wd-r::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--goud)}
.wd-r .t{display:grid;gap:3px;min-width:0}
.wd-r .t b{font-weight:500;color:var(--inkt-donker);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-r .t span{font-size:12.5px;color:var(--inkt-licht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-r .kan,.wd-r .mood{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--inkt)}
.wd-r .kan em,.wd-r .mood em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
.wd-r .kan em{text-transform:none;color:var(--inkt-licht)}
.wd-r .mood.rood em{color:var(--rood);font-weight:500}
.wd-r .mood.amber em{color:var(--amber);font-weight:500}
.wd-r .mood.groen em{color:var(--groen)}
.wd-r .mood:not(.rood):not(.amber):not(.groen) em{color:var(--inkt-licht)}
.wd-r .urg{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.06em;color:var(--inkt-licht);white-space:nowrap}
.wd-r .urg i{width:7px;height:7px;border-radius:50%;background:var(--inkt-zacht);flex:none}
.wd-r .urg.act{color:var(--rood);font-weight:500}.wd-r .urg.act i{background:var(--rood)}
.wd-r .urg.watch{color:var(--amber);font-weight:500}.wd-r .urg.watch i{background:var(--amber)}
.wd-r .urg.normal i{background:var(--data-goud)}
.wd-r .urg.low i{background:transparent;border:1px solid var(--lijn-sterk)}
.wd-r .urg.ok i{background:var(--groen)}
.wd-r .wacht{display:grid;gap:5px;font-size:12px;color:var(--inkt);min-width:0;font-variant-numeric:tabular-nums}
.wd-r .wacht em{font-style:normal;white-space:nowrap}
.wd-r .wacht em.klaar{display:inline-flex;align-items:center;gap:5px;color:var(--groen)}
.wd-r .wacht em.klaar .ico{width:12px;height:12px}
.wd-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;letter-spacing:.02em;padding:3px 9px;border-radius:999px;border:1px solid var(--lijn);background:var(--vlak);color:var(--inkt-donker);white-space:nowrap;text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.wd-chip .ico{width:12px;height:12px;color:var(--inkt-licht);flex:none}
.wd-chip.leeg{color:var(--inkt-zacht);font-weight:400;border-style:dotted;background:transparent}
.wd-r .taal{font-size:11px;letter-spacing:.12em;color:var(--inkt-licht);text-align:center}
.wd-r .chev{width:14px;height:14px;color:var(--inkt-zacht);transition:transform .25s var(--ease),color .2s;justify-self:end}
.wd-r:hover .chev{color:var(--goud-donker)}
.wd-rij.open>.wd-r .chev{transform:rotate(180deg);color:var(--goud-donker)}
.wd-r .ster{font-size:13px;letter-spacing:.1em;white-space:nowrap}
.wd-r .ster .il-ster{font-size:13px}
.wd-r .ster.rood .il-ster{color:var(--rood)}
.wd-r .ster.amber .il-ster{color:var(--amber)}
.wd-r .men{display:flex;gap:6px;min-width:0;overflow:hidden}
.wd-r .dat{font-size:12px;color:var(--inkt-licht);white-space:nowrap;font-variant-numeric:tabular-nums}
.wd-kop.rev,.wd-r.rev{grid-template-columns:7px minmax(0,1fr) 96px minmax(0,230px) 72px 74px}
.wd-r.rev .t span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.45}
.wd-kop.act,.wd-r.act{grid-template-columns:7px minmax(0,1fr) 150px 96px 14px}
.hm-leeg.kaart{border:1px solid var(--lijn);border-radius:var(--radius-k)}

/* laag 3: de case-kern onder de rij */
.wd-kern{background:var(--creme);border-top:1px solid var(--lijn);animation:wd-open .3s var(--ease) both}
@keyframes wd-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.wd-k{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.2fr);gap:24px;padding:18px 22px 20px 39px}
.wd-k.laden,.wd-k.leeg{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--inkt-licht);padding:16px 22px 16px 39px}
.wd-k .kol{display:flex;flex-direction:column;gap:9px;min-width:0}
.wd-k small{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht)}
.wd-k small .ico{width:12px;height:12px}
.wd-k .prod{display:flex;align-items:center;gap:10px;min-width:0}
.wd-k .prod img{width:40px;height:40px;border-radius:6px;object-fit:cover;border:1px solid var(--lijn);background:var(--vlak);flex:none}
.wd-k .prod div{display:grid;gap:2px;min-width:0}
.wd-k .prod b{font-weight:500;color:var(--inkt-donker);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-k .prod span{font-size:12px;color:var(--inkt-licht)}
.wd-k dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;margin:0;font-size:12.5px}
.wd-k dt{color:var(--inkt-zacht)}
.wd-k dd{margin:0;color:var(--inkt-donker)}
.wd-k .msg{font-size:13px;line-height:1.55;color:var(--inkt);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.wd-k .leeg{font-size:12.5px;color:var(--inkt-licht);line-height:1.5}
.wd-k .meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--inkt-zacht);margin-top:auto}
.wd-k .meta .rood{color:var(--rood)}
.wd-k .meta .il-ring{width:32px;height:32px}
.wd-k .meta .il-ring b{font-size:9px}
.wd-k .bron{margin-top:auto;padding-top:6px}
.wd-k .acties{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

@media (max-width:1180px){
  .wd .hm-hero{grid-template-columns:minmax(0,1fr)}
  .wd-kop,.wd-r{grid-template-columns:7px minmax(0,1fr) 72px 120px 96px 104px 14px}
  .wd-kop>:nth-child(7),.wd-kop>:nth-child(8),.wd-r>.wd-chip,.wd-r>.taal{display:none}
  .wd-kop.rev,.wd-r.rev{grid-template-columns:7px minmax(0,1fr) 96px 72px 74px}
  .wd-kop.rev>:nth-child(4),.wd-r.rev>.men{display:none}
  .wd-k{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .wd .hm-eerst b.naam{font-size:22px}
  .wd-filters{gap:8px}.wd-zoek{flex-basis:100%;max-width:none}
  .wd-filters select{flex:1 1 40%;min-width:0;font-size:12px}
  .wd-n{flex-basis:100%;margin-left:0}
  .wd-kop{display:none}
  .wd-r{grid-template-columns:7px minmax(0,1fr) 26px 14px;gap:10px;padding:12px 14px 12px 14px;align-items:start}
  .wd-r>.dot{margin-top:7px}
  .wd-r .t b{white-space:normal;font-size:13.5px}
  .wd-r .t span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .wd-r .kan,.wd-r .taal,.wd-r>.wd-chip{display:none}
  .wd-r .mood em{display:none}
  .wd-r .urg{grid-column:2;font-size:10.5px}
  .wd-r .wacht{grid-column:2;grid-template-columns:72px auto;align-items:center}
  .wd-r .wacht .tl{max-width:72px}
  .wd-r .chev{grid-row:1;grid-column:4;margin-top:6px}
  .wd-r .mood{grid-row:1;grid-column:3}
  .wd-r.rev{grid-template-columns:7px minmax(0,1fr) auto;row-gap:8px}
  .wd-r.rev .btn{grid-row:1;grid-column:3;align-self:start}.wd-r.rev .ster{grid-row:2;grid-column:2}.wd-r.rev .dat{grid-row:2;grid-column:3;justify-self:end}.wd-r.rev .men{display:none}
  .wd-r.act{grid-template-columns:7px minmax(0,1fr) 14px}
  .wd-r.act .kan,.wd-r.act .dat,.wd-r.act .urg{grid-column:2}
  .wd-k{grid-template-columns:1fr;padding:14px 14px 16px 21px;gap:18px}
  .wd-k.laden,.wd-k.leeg{padding-left:21px}
}
@media (prefers-reduced-motion:reduce){.wd-kern{animation:none}.wd-r .chev,.wd .hm-kpi.wd-tab::after{transition:none}}

/* ========== PRODUCT QUALITY v0.17 (04-10-2026): zelfde tabel-taal als My workday ==========
   Hergebruikt hm-kpi, hm-eerst, hm-inz, wd-filters, wd-tabel, wd-kop, wd-r, wd-chip, wd-mix, il-ring, il-cols. Eigen: kolomraster
   .pq, productcel met foto 36 px, cijfercellen, detailpaneel in de wd-kern. */
.pq .hm-kpi b.txt{font-size:30px}
.pq .hm-eerst{padding:18px 20px 16px;gap:9px;min-width:0}
.pq .hm-eerst b.naam{font-size:22px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0}
.pq .hm-eerst .vs{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pq .hm-eerst .wd-chip img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1px solid var(--lijn)}
.pq .hm-inzs.pq-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pq .hm-inz .il-bars{margin:2px 0}
.pq .hm-inz .hm-hoe{font-size:12px}
.pq .hm-inz .hm-hoe summary{cursor:pointer;color:var(--inkt-licht)}
.pq .hm-kpi{cursor:pointer}
.wd-kop.pq,.wd-r.pq{grid-template-columns:7px minmax(0,1fr) 96px 118px 150px 112px 128px 84px 14px}
.wd-r.pq{min-height:64px}
.wd-r.pq .prod{display:flex;align-items:center;gap:12px;min-width:0}
.wd-r.pq .prod img,.wd-r.pq .prod .noimg{width:36px;height:36px;border-radius:6px;object-fit:cover;border:1px solid var(--lijn);background:var(--grond-dim);flex:none;display:block}
.wd-r.pq .prod .t{display:grid;gap:3px;min-width:0}
.wd-r.pq .prod .t b{font-weight:500;color:var(--inkt-donker);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-r.pq .prod .t span{font-size:12.5px;color:var(--inkt-licht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-r.pq .num{display:grid;gap:4px;min-width:0;justify-items:start;align-content:center}
.wd-r.pq .num b{font-family:var(--titel);font-weight:400;font-size:18px;line-height:1;color:var(--inkt-donker);font-variant-numeric:tabular-nums;white-space:nowrap}
.wd-r.pq .num em,.wd-r.pq .coh em,.wd-r.pq .units em{font-style:normal;font-size:11px;color:var(--inkt-zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-r.pq .num .hm-d{font-size:11px;padding:1px 7px 1px 5px}
.wd-r.pq .coh{display:flex;align-items:center;gap:9px;min-width:0}
.wd-r.pq .coh .il-ring{width:34px;height:34px}
.wd-r.pq .coh .il-ring b{font-size:9.5px}
.wd-r.pq .units{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;min-width:0}
.wd-r.pq .units b{font-family:var(--titel);font-weight:400;font-size:15px;color:var(--inkt-donker);font-variant-numeric:tabular-nums;white-space:nowrap}
.wd-r.pq .units .il-cols{height:22px;min-width:0}
.wd-r.pq>.il-nv{justify-self:start;min-width:0}
.pq-detail{background:transparent;padding:18px 22px 20px 39px;box-shadow:none;border:0}
@media (max-width:1180px){
  .pq .hm-inzs.pq-2{grid-template-columns:1fr}
  .wd-kop.pq,.wd-r.pq{grid-template-columns:7px minmax(0,1fr) 96px 110px 140px 100px 14px}
  .wd-kop.pq>:nth-child(7),.wd-kop.pq>:nth-child(8),.wd-r.pq>.units,.wd-r.pq>.il-nv{display:none}
}
@media (max-width:700px){
  .pq .hm-eerst b.naam{font-size:20px}
  .wd-r.pq{grid-template-columns:7px minmax(0,1fr) 14px;row-gap:8px}
  .wd-r.pq .prod .t b,.wd-r.pq .prod .t span{white-space:normal}
  .wd-r.pq .chev{grid-row:1;grid-column:3}
  .wd-r.pq .urg{grid-row:2;grid-column:2}
  .wd-r.pq .num:not(.kosten){grid-row:3;grid-column:2;grid-template-columns:auto auto;align-items:center}
  .wd-r.pq .coh{grid-row:3;grid-column:3;justify-self:end;margin-right:-6px}
  .wd-r.pq .coh em{display:none}
  .wd-r.pq .kosten,.wd-r.pq .units,.wd-r.pq>.il-nv{display:none}
  .pq-detail{padding:14px 14px 16px 21px;grid-template-columns:1fr}
}

/* ========== RECOMMENDATIONS v0.19 (04-10-2026, sessie dev-f3): tabel-ritme met uitklapbaar bewijs ==========
   Bouwt op hm (tegels, eerst-kaart, zones) en wd (tabel, rij, kern). Nieuw: bron-iconen, bewijs-telling, zekerheidsring
   in de rij, merkstrips met logo's (gedeeld met Market). Kleur alleen als betekenis. */
.rc .hm-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.rc .hm-kpi.wd-tab{cursor:pointer;position:relative;text-align:left;font:inherit;color:inherit}
.rc .hm-kpi.wd-tab::after{content:'';position:absolute;left:18px;right:18px;bottom:-1px;height:2px;background:var(--goud);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.rc .hm-kpi.wd-tab[aria-pressed="true"]{background:var(--creme);border-color:var(--goud-zacht)}
.rc .hm-kpi.wd-tab[aria-pressed="true"]::after{transform:scaleX(1)}
.rc .hm-eerst b.naam{font-family:var(--tekst);font-weight:500;font-size:16px;line-height:1.35;color:var(--inkt-donker);margin-top:0}
.rc .hm-eerst.act b.naam{color:var(--inkt-donker)}
.rc .hm-eerst .il-ring b{font-family:var(--titel);font-size:11.5px;margin:0;color:var(--inkt-donker)}
.rc .hm-eerst .wd-eerst-m{margin-top:4px}
.rc .hm-eerst .vs{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wd-kop.rc,.wd-r.rc{grid-template-columns:7px minmax(0,1fr) 92px 140px 126px 76px 140px 14px}
.wd-r.rc .t b{white-space:normal;line-height:1.3}
.wd-r.rc .t span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4}
.wd-r.rc{min-height:66px}
.rc-bron{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:11px;color:var(--inkt-licht)}
.rc-bron em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-ic.goud{color:var(--goud-donker);background:var(--goud-licht);border-color:transparent}
.wd-ic.s{width:22px;height:22px}.wd-ic.s .ico{width:12px;height:12px}
.rc-ev{display:inline-flex;align-items:center;gap:3px;min-width:0;font-size:11px;color:var(--inkt-licht)}
.rc-ev em{font-style:normal;margin-left:4px;white-space:nowrap}
.rc-zeker .il-ring{width:38px;height:38px}.rc-zeker .il-ring b{font-size:10.5px}
.rc-imp{display:grid;gap:3px;min-width:0;font-size:12px;color:var(--inkt)}
.rc-imp b{font-family:var(--titel);font-size:16px;color:var(--inkt-donker);white-space:normal;line-height:1.2;font-variant-numeric:tabular-nums}
.rc-imp em{font-style:normal;color:var(--inkt-licht);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.wd-r .chev{width:14px;height:14px;color:var(--inkt-zacht);transition:transform .25s var(--ease)}
.wd-rij.open>.wd-r .chev{transform:rotate(90deg);color:var(--goud-donker)}
.rc-kern{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.9fr);gap:28px;padding:18px 22px 20px}
.hm.rc,.hm.mk{grid-template-columns:minmax(0,1fr)}
.rc-k{display:grid;gap:10px;align-content:start;min-width:0}
.rc-k>small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--inkt-zacht)}
.rc-k>p{font-size:13.5px;line-height:1.55;color:var(--inkt)}
.rc-impact{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.rc-impact small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht);margin-bottom:4px}
.rc-impact p{font-size:12.5px;line-height:1.5;color:var(--inkt)}
.rc-bewijs{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.rc-bewijs li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--inkt)}
.rc-bewijs .wd-ic{margin-top:-1px}
.rc-revs{display:grid;gap:6px}
.rc-stappen{margin:0;padding:0 0 0 20px;display:grid;gap:7px;font-size:13px;line-height:1.5;color:var(--inkt)}
.rc-stappen li::marker{color:var(--goud-donker);font-weight:500}
.rc-acties{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.rc-acties .il-nv{margin-left:auto}
.rc-2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:start}
.rc-noot{font-size:11.5px;color:var(--inkt-licht);line-height:1.5}
.rc-negs{display:grid;gap:10px}
.rc-neg{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--lijn);border-left:2px solid var(--rood);border-radius:var(--radius-k);font-size:12.5px;color:var(--inkt)}
.rc-neg .k{display:flex;justify-content:space-between;gap:10px;align-items:center}
.rc-neg .k small{font-size:10.5px;color:var(--inkt-zacht);white-space:nowrap}
.rc-neg b{font-weight:500;color:var(--inkt-donker)}
.rc-neg>span:not(.k):not(.st){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--inkt-licht);line-height:1.45}
.rc-neg .st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;letter-spacing:.04em;margin-top:3px}
.rc-neg .st.rood{color:var(--rood)}.rc-neg .st.ok{color:var(--groen)}
.rc-neg .st .ico{width:12px;height:12px}

/* merkstrip: logo + waarde per merk (Recommendations en Market) */
.mk-logo{display:block;height:16px;width:auto;max-width:110px;object-fit:contain;object-position:left center}
.mk-logo.s{height:11px;max-width:90px}
.hm-rij img.mk-logo,.hm-rij img.mk-logo.s,.mk-strip img.mk-logo{width:auto;height:11px;max-width:90px;border-radius:0;border:0;object-fit:contain;object-position:left center;flex:none}
.mk-logo.tekst{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--inkt-donker);height:auto}
.mk-strip{display:grid;gap:6px;margin-top:8px}
.mk-strip small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht)}
.mk-strip .r{display:flex;flex-wrap:wrap;gap:6px}
.mk-strip .m{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--lijn);border-radius:999px;background:var(--vlak);font-size:12px;white-space:nowrap}
.mk-strip .m b{font-weight:500;color:var(--inkt-donker);font-variant-numeric:tabular-nums}
.mk-strip .m.wij{background:var(--goud-licht);border-color:var(--goud-zacht)}
.mk-strip.in-kern{margin-top:12px;padding-top:12px;border-top:1px solid var(--lijn)}

/* sterrenverdeling als stapelbalk en sterren met vulling */
.mk-verd{display:flex;gap:2px;height:7px;width:100%;overflow:hidden;border-radius:2px}
.mk-verd i,.mk-legenda i{display:block;width:var(--w);min-width:0;background:var(--grond-dim)}
.mk-verd i.s5,.mk-legenda i.s5,.mk-mnd .kol i.s5{background:var(--data-goud)}
.mk-verd i.s4,.mk-legenda i.s4,.mk-mnd .kol i.s4{background:var(--goud-zacht)}
.mk-verd i.s3,.mk-legenda i.s3,.mk-mnd .kol i.s3{background:var(--lijn-sterk)}
.mk-verd i.s2,.mk-legenda i.s2,.mk-mnd .kol i.s2{background:var(--amber)}
.mk-verd i.s1,.mk-legenda i.s1,.mk-mnd .kol i.s1{background:var(--rood)}
.mk-sterren{position:relative;display:inline-block;font-size:13px;letter-spacing:.1em;color:var(--lijn-sterk);line-height:1;white-space:nowrap}
.mk-sterren::before{content:'★★★★★';position:absolute;left:0;top:0;width:var(--f,0);overflow:hidden;color:var(--data-goud);white-space:nowrap}
.mk-legenda{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:10.5px;color:var(--inkt-licht);margin-top:10px}
.mk-legenda span{display:inline-flex;align-items:center;gap:5px}
.mk-legenda i{width:10px;height:7px;border-radius:2px}
.mk-legenda .dim{color:var(--inkt-zacht)}

/* sterren per maand: gestapelde kolommen, gemiddelde erboven, reactiegraad eronder */
.mk-maanden{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;align-items:end;height:190px;padding-top:4px}
.mk-mnd{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:5px;height:100%;min-width:0;text-align:center}
.mk-mnd b{font-family:var(--titel);font-size:13px;color:var(--inkt-donker);font-variant-numeric:tabular-nums}
.mk-mnd .kol{display:flex;flex-direction:column-reverse;gap:1px;align-self:end;height:var(--h,0);min-height:4px;width:100%;max-width:44px;margin:0 auto;border-radius:3px 3px 0 0;overflow:hidden;animation:mk-groei .9s var(--ease) both}
.mk-mnd .kol i{display:block;height:var(--w);min-height:0;width:100%}
.mk-mnd small{font-size:10.5px;color:var(--inkt-licht)}
.mk-mnd em{font-style:normal;font-size:9.5px;color:var(--inkt-zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-mnd em.rood{color:var(--rood);font-weight:500}
.mk-mnd.deel{opacity:.6}
@keyframes mk-groei{from{height:0}}

/* ========== MARKET v0.19 (04-10-2026, sessie dev-f3) ========== */
.mk .hm-hero{grid-template-columns:minmax(0,1fr) 272px;align-items:start}
.mk-merken{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:6px}
.mk-merk{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius-k);box-shadow:var(--schaduw);padding:16px 18px 14px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start;min-width:0}
.mk-merk.wij{background:var(--creme);border-color:var(--goud-zacht)}
.mk-merk .kop{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-height:34px;align-content:start;min-width:0}
.mk-merk .kop small{font-size:10.5px;color:var(--inkt-zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-merk .score{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mk-merk .score b{font-family:var(--titel);font-size:34px;line-height:1;color:var(--inkt-donker);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.mk-merk .cij{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--inkt-licht)}
.mk-merk .cij b{font-weight:500;color:var(--inkt-donker);font-variant-numeric:tabular-nums}
.mk-merk .rij{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--inkt-licht);flex-wrap:wrap}
.mk-merk .rij .rood{color:var(--rood);font-weight:500}
.mk-merk .rij.reply{justify-content:flex-start;align-items:center;gap:8px;color:var(--inkt);padding-top:6px;border-top:1px solid var(--lijn)}
.mk-merk .rij.reply b{font-weight:500;color:var(--inkt-donker)}
.mk-merk .recent{display:grid;gap:3px;font-size:12px;color:var(--inkt)}
.mk-merk .recent small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-zacht)}
.mk-merk .recent b{font-weight:500;color:var(--inkt-donker)}
.mk-merk .voet-m{display:flex;justify-content:space-between;align-items:center;margin-top:2px;padding-top:8px;border-top:1px solid var(--lijn)}
.mk-merk .voet-m small{font-size:10px;color:var(--inkt-zacht)}
.mk .hm-eerst b{font-size:40px}

/* scorecard en service promises: één raster voor kop en rijen */
.mk-score{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius-k);box-shadow:var(--schaduw);overflow:hidden;min-width:0;max-width:100%}
.mk-score .k,.mk-score .r{display:grid;grid-template-columns:26px minmax(0,1.5fr) repeat(4,minmax(0,1fr)) 150px;gap:14px;align-items:center;padding:0 18px}
.mk-score .k{min-height:40px;border-bottom:1px solid var(--lijn);background:var(--grond-warm)}
.mk-score .k>span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-licht);display:flex;align-items:center;min-width:0}
.mk-score .k>span.wij{padding:3px 8px;background:var(--goud-licht);border-radius:999px;width:max-content}
.mk-score .r{min-height:54px;padding-top:9px;padding-bottom:9px;border-bottom:1px solid var(--lijn);transition:background .2s}
.mk-score .r:last-child{border-bottom:0}
.mk-score .r:hover{background:var(--creme)}
.mk-score .t{display:grid;gap:2px;min-width:0}
.mk-score .t b{font-weight:500;font-size:13.5px;color:var(--inkt-donker)}
.mk-score .t small{font-size:10.5px;color:var(--inkt-zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-score .v{font-family:var(--titel);font-size:17px;color:var(--inkt);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mk-score .v.wij{color:var(--inkt-donker)}
.mk-score .v.best{color:var(--data-goud);position:relative}
.mk-score .v.best::after{content:'';position:absolute;left:0;bottom:-3px;width:22px;height:2px;background:var(--data-goud)}
.mk-score .v.vp{font-family:var(--tekst);font-size:12px;white-space:normal;line-height:1.35}
.mk-score .v.vp a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--lijn-sterk)}
.mk-score .v.vp a:hover{color:var(--goud-donker);border-color:var(--goud)}
.mk-score .st{display:grid;gap:3px;justify-items:start}
.mk-score .st small{font-size:10.5px;color:var(--inkt-zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mk-score .urg{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.06em;color:var(--inkt-licht);white-space:nowrap}
.mk-score .urg i{width:7px;height:7px;border-radius:50%;background:var(--inkt-zacht);flex:none}
.mk-score .urg.act{color:var(--rood);font-weight:500}.mk-score .urg.act i{background:var(--rood)}
.mk-score .urg.ok{color:var(--groen);font-weight:500}.mk-score .urg.ok i{background:var(--groen)}
.mk-score .urg.normal i{background:var(--data-goud)}
.mk-score .urg.low i{background:transparent;border:1px solid var(--lijn-sterk)}

.mk-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;align-items:start}
.mk-2.kl{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.mk-tabs{display:flex;gap:4px;flex-wrap:wrap}
.mk-tabs button{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:1px solid var(--lijn);border-radius:999px;background:var(--vlak);cursor:pointer;transition:background .2s,border-color .2s}
.mk-tabs button:hover{background:var(--creme)}
.mk-tabs button.aan{background:var(--goud-licht);border-color:var(--goud-zacht)}
.mk-venster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mk-venster>div{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--lijn);border-radius:var(--radius-k);min-width:0}
.mk-venster>div.wij{background:var(--creme);border-color:var(--goud-zacht)}
.mk-venster b{font-family:var(--titel);font-size:20px;color:var(--inkt-donker)}
.mk-venster small{font-size:11px;color:var(--inkt-licht)}
.mk-venster small.dim{color:var(--inkt-zacht);font-size:10px}

/* klachtenmix: per klachttype vier balkjes */
.mk-kl{display:grid;gap:1px}
.mk-kl .k,.mk-kl .r{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:12px;align-items:center}
.mk-kl .k{padding-bottom:8px;border-bottom:1px solid var(--lijn);margin-bottom:4px}
.mk-kl .k span{display:flex;align-items:center;min-width:0}
.mk-kl .k span.wij{padding:3px 8px;background:var(--goud-licht);border-radius:999px;width:max-content;max-width:100%}
.mk-kl .r{min-height:34px;padding:4px 0}
.mk-kl .t{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--inkt-donker);min-width:0}
.mk-kl .t .dot{width:7px;height:7px;border-radius:50%;background:var(--rood);flex:none}
.mk-kl .b{display:flex;align-items:center;gap:8px;min-width:0}
.mk-kl .b i{display:block;height:8px;width:var(--w,0);max-width:calc(100% - 36px);background:var(--lijn-sterk);border-radius:2px;transition:width .8s var(--ease)}
.mk-kl .b.wij i{background:var(--data-goud)}
.mk-kl .r.behind .b.wij i{background:var(--rood)}
.mk-kl .b em{font-style:normal;font-size:11.5px;color:var(--inkt-licht);font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-kl .b.wij em{color:var(--inkt-donker);font-weight:500}
.mk-pos{display:grid;gap:12px}
.mk-pos>div{display:grid;gap:7px;padding:10px 12px;border:1px solid var(--lijn);border-radius:var(--radius-k)}
.mk-pos>div.wij{background:var(--creme);border-color:var(--goud-zacht)}
.mk-pos .chips{display:flex;flex-wrap:wrap;gap:5px}
.mk-pos .wd-chip em{font-style:normal;color:var(--inkt-licht);font-weight:400}
.mk-pos .wd-chip.top{background:var(--goud-licht);border-color:var(--goud-zacht)}
.mk-pos small{font-size:11px;color:var(--inkt-licht)}

/* patronen per merk */
.mk-patronen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mk-patronen .il-kaart.wij{background:var(--creme);border-color:var(--goud-zacht)}
.mk-patronen .kop{display:grid;gap:4px;align-items:start}
.mk-patronen .kop small{font-size:10.5px;color:var(--inkt-zacht)}
.mk-pat{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:p}
.mk-pat li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 8px;counter-increment:p}
.mk-pat li>b{grid-column:2}.mk-pat li>span{grid-column:2}
.mk-pat li::before{content:counter(p);width:22px;height:22px;border-radius:50%;border:1px solid var(--goud-zacht);color:var(--goud-donker);font-size:11px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.mk-pat b{display:block;font-weight:500;font-size:13px;line-height:1.35;color:var(--inkt-donker)}
.mk-pat span{display:block;font-size:12px;line-height:1.45;color:var(--inkt-licht);margin-top:3px}

/* kansen, risico's en sterktes als rijen met merkstrip */
.mk-kr{grid-template-columns:26px minmax(0,1fr) auto !important;align-items:start !important;padding-top:14px !important;padding-bottom:14px !important}
.mk-kr .t b{white-space:normal;line-height:1.35}
.mk-kr .t span{white-space:normal;line-height:1.45}
.mk-kr .m{align-self:start;gap:8px}
.mk-kr .m .hm-open{justify-self:end}
.mk-kr .mk-strip .m{font-size:11.5px;padding:3px 9px}

@media (max-width:1180px){
  .mk .hm-hero,.rc .hm-hero{grid-template-columns:minmax(0,1fr)}
  .mk-merken{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-patronen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wd-kop.rc,.wd-r.rc{grid-template-columns:7px minmax(0,1fr) 96px 56px 14px}
  .wd-kop.rc>span:nth-child(4),.wd-kop.rc>span:nth-child(5),.wd-kop.rc>span:nth-child(7),.wd-r.rc .rc-bron,.wd-r.rc .rc-ev,.wd-r.rc .rc-imp{display:none}
  .rc-kern{grid-template-columns:1fr 1fr}
  .mk-score .k,.mk-score .r{grid-template-columns:26px minmax(0,1.2fr) repeat(4,minmax(0,1fr)) 110px}
}
@media (max-width:700px){
  .mk .hm-hero,.rc .hm-hero{grid-template-columns:minmax(0,1fr)}
  .mk .hm-hero-l,.rc .hm-hero-l{grid-template-columns:minmax(0,1fr)}
  .rc .hm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wd-kop.rc{display:none}
  .wd-r.rc{grid-template-columns:7px minmax(0,1fr) 38px 14px;gap:10px}
  .wd-r.rc .urg{grid-column:2;justify-self:start}
  .rc-kern{grid-template-columns:1fr;gap:18px;padding:16px 16px 18px}
  .rc-impact{grid-template-columns:1fr}
  .rc-2,.mk-2,.mk-2.kl{grid-template-columns:minmax(0,1fr)}
  .mk-merken,.mk-patronen,.mk-venster{grid-template-columns:minmax(0,1fr)}
  .mk-2>.il-kaart,.mk-kl{min-width:0}
  .mk-maanden{height:160px;gap:4px}
  .mk-mnd em{display:none}
  .mk-score{overflow-x:auto}
  .mk-score .k,.mk-score .r{grid-template-columns:22px 140px repeat(4,120px) 110px;gap:10px;padding:8px 12px;min-width:max-content}
  .mk-kl .k,.mk-kl .r{grid-template-columns:minmax(0,1fr) repeat(4,minmax(0,1fr));gap:6px}
  .mk-kl .t{grid-column:1/-1;font-size:12px}
  .mk-kl .k span{font-size:9px}
  .mk-kl .b em{font-size:10.5px}
  .mk-kr{grid-template-columns:22px minmax(0,1fr) !important}
  .mk-kr .m{grid-column:2;display:flex;justify-content:space-between;width:100%}
  .mk-kr .t b,.mk-kr .t span{white-space:normal;overflow:visible;text-overflow:clip;display:block}
  .mk-kr .t .mk-strip{display:grid}
  .mk-kr .t .mk-strip .r{display:flex;flex-wrap:wrap;gap:6px}
  .mk-kr .t .mk-strip .m{display:inline-flex;width:auto;white-space:nowrap}
  .mk-kr .t .mk-strip .m b{display:inline;white-space:nowrap}
  .mk-kl .k .mk-logo{height:9px;max-width:100%}
  .mk .hm-eerst b{font-size:32px}
}
@media (prefers-reduced-motion:reduce){.mk-mnd .kol{animation:none}.mk-kl .b i{transition:none}}