/* Ailex — werkstuk-kaartje KAART:WERK (26-10-2026, AX-04, Gustavo). Zie werkkaart.js. Kleuren uit kleur.css (--ax-*), dus licht en donker;
   alleen het gemarkeerde deel van de schets heeft een eigen tint (--wk-acc), in beide thema's minstens 4,5:1 op het kaartje. */
/* De markering mengt een vaste tint met de tekstkleur van het thema: op licht wordt hij donker, op een donker oppervlak licht, zonder eigen
   donker-regels (sinds 25-10 is de app alleen licht; kleur.css heeft geen donkere --ax-* meer). color-mix: Chrome/WebView Android 111+;
   oudere WebView houdt de vaste tinten. */
.wk { --wk-acc: #B45309; --wk-acc-zacht: rgba(180, 83, 9, .16); --wk-ok: #15803D; --wk-mis: #B91C1C; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .wk { --wk-acc: color-mix(in srgb, #EA580C 70%, var(--ax-tekst)); --wk-acc-zacht: color-mix(in srgb, var(--wk-acc) 18%, transparent);
        --wk-ok: color-mix(in srgb, #16A34A 65%, var(--ax-tekst)); --wk-mis: color-mix(in srgb, #DC2626 75%, var(--ax-tekst)); }
}
.wk-schets { display: block; width: 100%; height: auto; max-height: 150px; color: var(--ax-tekst); border-radius: 12px; background: var(--ax-oppervlak-2); overflow: hidden; }
.wk-schets text { font: 600 12px/1 var(--ax-letter, system-ui, sans-serif); fill: currentColor; }
.wk-schets text.wk-sterk { font-weight: 800; }
.wk-schets text.wk-zacht { fill: var(--ax-tekst-zacht); }
.wk-schets path, .wk-schets rect, .wk-schets circle, .wk-schets ellipse, .wk-schets polyline { stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wk-schets .wk-vlak { fill: var(--ax-oppervlak); }
.wk-schets .wk-dik { stroke-width: 2.5; }
.wk-schets .wk-dun { stroke-width: 1.2; stroke: var(--ax-tekst-zacht); }
.wk-schets .wk-acc { stroke: var(--wk-acc); }
.wk-schets .wk-acc.wk-vul { fill: var(--wk-acc); }
.wk-schets .wk-acc.wk-zachtvul { fill: var(--wk-acc-zacht); }
.wk-schets .wk-muur { stroke-width: 7; }
.wk-schets .wk-streep { stroke-dasharray: 6 5; }
.wk-schets .wk-straat { stroke: var(--ax-lijn); stroke-width: 10; }
.wk-schets .wk-gat { fill: var(--ax-oppervlak); stroke: none; }
.wk-schets .wk-wit { stroke: var(--ax-oppervlak); stroke-width: 2.5; }
.wk-schets .wk-grens { stroke: var(--wk-mis); stroke-width: 1.8; stroke-dasharray: 5 4; }
.wk-schets .wk-arcering { stroke-dasharray: 2 3; }

/* ---------- KABEL als werkkaart in het vaste candy-ontwerp (27-10-2026, klus "Ailex werkkaarten: kabelkaart", Gustavo) ----------
   Bron: werk2/ailex/werkkaarten-ontwerp.zip vast/candy1.html (kaart KABEL / VERBINDING, --a #4F5FF0, --b #3341B8). Tekstkleuren zijn
   donkerder gezet dan in het plaatje waar dat nodig was voor 4,5:1 (dt #5A5F8C i.p.v. #8A8FBC, B-kant #7C4DE0 i.p.v. #8A5CF0).
   Tikvlakken (route en losse kabels) minstens 48 px. details/summary: Chrome/WebView Android 12+, color-mix: 111+ (alleen voor randen). */
html .vb.wk.wkk { --a: #4F5FF0; --b: #3341B8; --kb: #7C4DE0; --groen: #2BB585; position: relative; margin-top: 12px; background: #fff; border: 0; border-radius: 28px;
  overflow: visible; color: #262A4D; font-family: var(--ax-letter, system-ui, sans-serif); box-shadow: 0 6px 0 var(--b), 0 18px 28px -14px var(--b); }
.wkk-bundels { display: flex; flex-direction: column; gap: 22px; }
.wkk-kop { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 12px 14px; background: var(--a); border-radius: 28px 28px 0 0;
  color: #fff; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .13); }
.wkk-kop::before, .wkk-kop::after { content: ""; position: absolute; top: -9px; width: 34px; height: 18px; border-radius: 18px 18px 0 0; background: var(--a); filter: brightness(1.12); }
.wkk-kop::before { left: 36px; } .wkk-kop::after { right: 36px; }
.wkk-hex { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 20px; background: #fff; font-size: 22px; line-height: 1; }
.wkk-hex i { font-style: normal; font-size: 14px; font-weight: 900; color: #C2185B; }
.wkk-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wkk-tn { align-self: flex-start; max-width: 100%; padding: 3px 10px; border-radius: 14px; background: #fff; color: #262A4D; font-size: 14px; font-weight: 900; overflow-wrap: anywhere; }
.wkk-tb { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
/* level-munt, zeldzaamheid en XP-balk zijn weg (30-10-2026, klus "Ailex punten eruit") */
.wkk-in { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 16px; min-width: 0; }
.wkk-rij { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; min-width: 0; }
.wkk-naam { display: flex; flex-direction: column; min-width: 0; }
.wkk-nr { font-size: 24px; font-weight: 900; color: #262A4D; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.wkk-nr-k { font-size: 18px; }
.wkk-sub { font-size: 14px; font-weight: 600; color: #5A5F8C; overflow-wrap: anywhere; }
.wkk-st { flex: none; max-width: 48%; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.wkk-st small { font-size: 12.5px; font-weight: 700; color: #5A5F8C; }
.wkk-qs { display: inline-block; padding: 4px 10px; border-radius: 14px; font-size: 13px; font-weight: 900; font-style: normal; overflow-wrap: anywhere; }
.wkk-qs.bezig { background: var(--a); color: #fff; box-shadow: 0 3px 0 var(--b); }
.wkk-qs.gepland { background: #FFF0C2; color: #7A4F00; box-shadow: 0 3px 0 #E8C25A; }
.wkk-qs.gereed { background: #DDF7EC; color: #146C4D; box-shadow: 0 3px 0 #8FD9B8; }
.wkk-seg { display: flex; gap: 4px; justify-content: flex-end; }
.wkk-seg i { width: 12px; height: 12px; border-radius: 50%; background: #E4E7F7; box-shadow: inset 0 0 0 1.5px #B9BEDD; }
.wkk-seg i.aan { background: var(--groen); box-shadow: none; }
.wkk-sch { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 20px; background: #F4F5FF; border: 2px dashed #B9C0FA; min-width: 0; }
.wkk-sch svg { flex: none; width: 140px; height: 45px; }
.wkk-sch text { font: 900 15px var(--ax-letter, system-ui, sans-serif); fill: #fff; }
.wkk-sch .wkk-ka { fill: #4F5FF0; } .wkk-sch .wkk-kb { fill: #7C4DE0; }
.wkk-sch .wkk-pa { fill: #fff; stroke: #4F5FF0; stroke-width: 3; } .wkk-sch .wkk-pb { fill: #fff; stroke: #7C4DE0; stroke-width: 3; }
.wkk-schtekst { display: flex; flex-direction: column; min-width: 0; }
.wkk-schtekst small { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; color: #5A5F8C; }
.wkk-schtekst b { font-size: 15px; color: #262A4D; overflow-wrap: anywhere; }
.wkk-kn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.wkk-kt { min-width: 0; padding: 8px 10px; border-radius: 20px; background: #fff; border: 3px solid #B9C0FA; }
.wkk-kt.wkk-kb { border-color: #CDB8F5; }
.wkk-kt > b { display: inline-block; margin-bottom: 4px; padding: 2px 10px; border-radius: 10px; background: var(--a); color: #fff; font-size: 13px; }
.wkk-kt.wkk-kb > b { background: var(--kb); }
.wkk-kt dl { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.wkk-vak + .wkk-vak { border-top: 1px solid #E4E7F7; padding-top: 4px; }
.wkk-vak dt { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #5A5F8C; }
.wkk-vak dd { margin: 0; font-size: 18px; font-weight: 900; color: #262A4D; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.wkk-vak dd.wk-dof { font-size: 14px; font-weight: 600; font-style: italic; color: #5A5F8C; }
.wkk-vak dd.wkk-info { font-size: 12.5px; font-weight: 600; color: #5A5F8C; }
.wkk-leeg { margin: 0; font-size: 14px; color: #5A5F8C; }
.wkk-mt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 20px; font-size: 14px; font-weight: 700; color: #262A4D; }
.wkk-mt small { display: block; font-size: 11px; font-weight: 900; letter-spacing: 1.4px; }
.wkk-mt.ok { background: #DDF7EC; } .wkk-mt.ok small { color: #146C4D; } .wkk-mt.ok .wkk-tk { background: var(--groen); box-shadow: 0 3px 0 #1E8F66; }
.wkk-mt.mis { background: #FFE1E7; } .wkk-mt.mis small { color: #A31C3D; } .wkk-mt.mis .wkk-tk { background: #E8476B; box-shadow: 0 3px 0 #B02A4B; }
.wkk-mt.open { background: #EEF0FE; } .wkk-mt.open small { color: #3341B8; } .wkk-mt.open .wkk-tk { background: var(--a); box-shadow: 0 3px 0 var(--b); }
.wkk-tk { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 900; }
.wkk-af { margin: 0; padding: 8px 12px; list-style: none; border-radius: 16px; background: #FFF1E0; border: 2px solid #F2B035; display: flex; flex-direction: column; gap: 3px; }
.wkk-af li { font-size: 13px; font-weight: 700; color: #8A4B00; overflow-wrap: anywhere; }
.wkk-af li::before { content: "⚠ "; }
.wkk-route > summary, .wkk-los > summary { list-style: none; cursor: pointer; min-height: 48px; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 16px; background: #F4F5FF; font-size: 14px; font-weight: 800; color: #262A4D; box-shadow: 0 3px 0 #D5D9F5; }
.wkk-route > summary::-webkit-details-marker, .wkk-los > summary::-webkit-details-marker { display: none; }
.wkk-route > summary > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wkk-route > summary > i { font-style: normal; transition: transform 160ms ease; }
.wkk-route[open] > summary > i { transform: rotate(180deg); }
.wkk-lijst { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.wkk-los > summary { background: #fff; border: 2px solid #E4E7F7; box-shadow: none; }
.wkk-los > summary > span { flex: 1; min-width: 0; font-weight: 600; color: #5A5F8C; }
.wkk-los > summary .wkk-qs { font-size: 12px; padding: 2px 8px; box-shadow: none; }
.wkk-los > .wkk-in { padding: 10px 2px 4px; }

/* ---------- KAART:WERK: één candy-motor voor 25 kaarttypes (27-10-2026, klus "Ailex werkkaarten: 25 types", Gustavo) ----------
   Zelfde kaart als de kabel hierboven (.wkk-*); per type alleen de kleur. Bron kleuren: werk2/ailex/werkkaarten-ontwerp.zip vast/ax.py (lijst F,
   zelfde volgorde als de 25 types in werkkaart.js TYPES). --kb = de donkere tint (B-kant/eind-label). Wit op --a en --kb: minstens 4,5:1
   (nagerekend in test/werkkaart_types_proef.js). WERKSTUK (geen type herkend) houdt de paarse Ailex-kleur. color-mix: WebView Android 111+;
   oudere WebView houdt de vaste lichte randen. */
html .vb.wk.wkk[data-wkt="werk"] { --a: #7C4DE0; --b: #5530A8; --kb: #5530A8; }
html .vb.wk.wkk[data-wkt="kabel"] { --a: #4F5FF0; --b: #3341B8; --kb: #3341B8; }
html .vb.wk.wkk[data-wkt="stroomkring"] { --a: #C2410C; --b: #9A3412; --kb: #9A3412; }
html .vb.wk.wkk[data-wkt="leiding"] { --a: #0B7A8F; --b: #075B6B; --kb: #075B6B; }
html .vb.wk.wkk[data-wkt="bouwdeel"] { --a: #B45309; --b: #92400E; --kb: #92400E; }
html .vb.wk.wkk[data-wkt="ruimte"] { --a: #0B7F61; --b: #075E48; --kb: #075E48; }
html .vb.wk.wkk[data-wkt="machine"] { --a: #475569; --b: #334155; --kb: #334155; }
html .vb.wk.wkk[data-wkt="productie"] { --a: #7A50D6; --b: #5530A8; --kb: #5530A8; }
html .vb.wk.wkk[data-wkt="zending"] { --a: #1971C2; --b: #1561A6; --kb: #1561A6; }
html .vb.wk.wkk[data-wkt="rit"] { --a: #7A50D6; --b: #5530A8; --kb: #5530A8; }
html .vb.wk.wkk[data-wkt="patient"] { --a: #D6336C; --b: #A21D4C; --kb: #A21D4C; }
html .vb.wk.wkk[data-wkt="klant"] { --a: #C026D3; --b: #86198F; --kb: #86198F; }
html .vb.wk.wkk[data-wkt="bestelling"] { --a: #E03131; --b: #AE2222; --kb: #AE2222; }
html .vb.wk.wkk[data-wkt="winkel"] { --a: #2B7A3B; --b: #1E6B30; --kb: #1E6B30; }
html .vb.wk.wkk[data-wkt="deal"] { --a: #1971C2; --b: #1561A6; --kb: #1561A6; }
html .vb.wk.wkk[data-wkt="les"] { --a: #0B7F61; --b: #075E48; --kb: #075E48; }
html .vb.wk.wkk[data-wkt="dossier"] { --a: #4C5BE8; --b: #2B37A8; --kb: #2B37A8; }
html .vb.wk.wkk[data-wkt="financieel"] { --a: #8A5A00; --b: #6B4500; --kb: #6B4500; }
html .vb.wk.wkk[data-wkt="project"] { --a: #4F5FF0; --b: #3341B8; --kb: #3341B8; }
html .vb.wk.wkk[data-wkt="ticket"] { --a: #0B7A8F; --b: #075B6B; --kb: #075B6B; }
html .vb.wk.wkk[data-wkt="ontwerp"] { --a: #475569; --b: #334155; --kb: #334155; }
html .vb.wk.wkk[data-wkt="meting"] { --a: #0B7F61; --b: #075E48; --kb: #075E48; }
html .vb.wk.wkk[data-wkt="voorstelling"] { --a: #8A43D6; --b: #6A2BB0; --kb: #6A2BB0; }
html .vb.wk.wkk[data-wkt="campagne"] { --a: #E03131; --b: #AE2222; --kb: #AE2222; }
html .vb.wk.wkk[data-wkt="perceel"] { --a: #2B7A3B; --b: #1E6B30; --kb: #1E6B30; }
html .vb.wk.wkk[data-wkt="dienst"] { --a: #C2410C; --b: #9A3412; --kb: #9A3412; }
.wkt .wkk-sch.wkt-sch { flex-direction: column; align-items: stretch; gap: 4px; }
.wkt .wkt-sch .wk-schets { max-height: 150px; background: transparent; color: #262A4D; --ax-tekst-zacht: #5A5F8C; --ax-oppervlak: #fff; --ax-lijn: #DDE1F5; }
html .vb.wk.wkk.wkt { --wk-acc: var(--a); --wk-acc-zacht: rgba(79, 95, 240, .16); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  html .vb.wk.wkk.wkt { --wk-acc-zacht: color-mix(in srgb, var(--a) 18%, transparent); }
  .wkt .wkk-sch { border-color: color-mix(in srgb, var(--a) 35%, #fff); }
  .wkt .wkk-kt { border-color: color-mix(in srgb, var(--a) 40%, #fff); }
  .wkt .wkk-kt.wkk-kb { border-color: color-mix(in srgb, var(--kb) 30%, #fff); }
}
.wkt-stats { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 14px; margin: 0; padding: 10px 14px; border-radius: 20px; background: #F7F8FF; }
.wkt-stats > div { display: contents; }
.wkt-stats dt { align-self: center; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #5A5F8C; overflow-wrap: anywhere; }
.wkt-stats dd { margin: 0; font-size: 16px; font-weight: 800; color: #262A4D; overflow-wrap: anywhere; min-width: 0; }
.wkt-stats dd.wk-dof { font-size: 14px; font-weight: 600; font-style: italic; color: #5A5F8C; }
.wkt-stats dd.wkt-let { justify-self: start; padding: 1px 8px; border-radius: 10px; background: #FFF1E0; color: #8A4B00; box-shadow: inset 0 0 0 2px #F2B035; }