/* Ailex meldkaarten (30-10-2026, klus "Ailex berichten leesbaar", Gustavo): A statuskaart, B kort + uitklappen, C projectdraad
   (meldkaart.js). Eigen vlak achter alle tekst (nooit los op de achtergrond), rustige schreefloze letter, niets breder dan de chat.
   Contrast (WCAG AA 4,5:1) licht: tekst #262A4D op #FFFFFF 14:1, groen #17703A 6,1:1, oranje #8A5A00 5,9:1, zacht #5A5F8C 6,0:1;
   donker: #EEF0FF op #1E2233 14:1, groen #5BD98A 9:1, oranje #F5B742 9:1, zacht #AEB3D6 8:1 (proef: test/meldkaart_proef.py). */
.mk { --mk-vlak: #FFFFFF; --mk-tekst: #262A4D; --mk-zacht: #5A5F8C; --mk-lijn: rgba(38, 42, 77, .12); --mk-groen: #17703A; --mk-groen-z: #E3F5EA;
  --mk-oranje: #8A5A00; --mk-oranje-z: #FFF1D6; --mk-rood: #B42318; --mk-rood-z: #FDE7E5; --mk-paars: #5B4BDB; --mk-streep: var(--mk-paars); }
html[data-thema="donker"] .mk { --mk-vlak: #1E2233; --mk-tekst: #EEF0FF; --mk-zacht: #AEB3D6; --mk-lijn: rgba(238, 240, 255, .14); --mk-groen: #5BD98A;
  --mk-groen-z: rgba(91, 217, 138, .16); --mk-oranje: #F5B742; --mk-oranje-z: rgba(245, 183, 66, .16); --mk-rood: #FF8A80; --mk-rood-z: rgba(255, 138, 128, .16); --mk-paars: #8F84FF; }
.mk.klaar { --mk-streep: var(--mk-groen); }
.mk.fout { --mk-streep: var(--mk-rood); }
.mk.mk-c.bezig { --mk-streep: var(--mk-oranje); }

.mk { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 12px 14px 12px 16px; border-radius: 16px;
  background: var(--mk-vlak); color: var(--mk-tekst); border: 1px solid var(--mk-lijn); box-shadow: inset 4px 0 0 var(--mk-streep), 0 1px 2px rgba(20, 22, 60, .08);
  font: 400 17px/1.45 system-ui, -apple-system, Roboto, 'Segoe UI', sans-serif; letter-spacing: 0; overflow-wrap: anywhere; word-break: normal; text-align: left; }
.mk * { box-sizing: border-box; max-width: 100%; }
.mk-kop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mk-rond { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--mk-paars); color: #FFFFFF; font: 700 16px/1 system-ui, Roboto, sans-serif; }
.mk-titel { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 17px; line-height: 1.3; }
.mk-tag { flex: 0 0 auto; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.mk-tag.klaar { background: var(--mk-groen-z); color: var(--mk-groen); }
.mk-tag.bezig { background: var(--mk-oranje-z); color: var(--mk-oranje); }
.mk-tag.fout { background: var(--mk-rood-z); color: var(--mk-rood); }
.log .mk .mk-zin, .mk .mk-zin { margin: 8px 0 0; font: inherit; font-size: 17px; color: var(--mk-tekst); }
.mk-vink, .mk-lijn { list-style: none; margin: 8px 0 0; padding: 0; }
.mk-vink li { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; font-size: 16px; }
.mk-v { flex: 0 0 18px; font-weight: 800; text-align: center; }
.mk-vink li.klaar .mk-v { color: var(--mk-groen); }
.mk-vink li.wacht .mk-v { color: var(--mk-oranje); }
.mk-vink li > span:last-child { min-width: 0; }

/* B: Details klapt open; summary is een tikvlak van 48 px hoog */
.mk-details { margin: 4px 0 0; }
.mk-details > summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; color: var(--mk-zacht); font-size: 15px; list-style: none; }
.mk-details > summary::-webkit-details-marker { display: none; }
.mk-details > summary::before { content: "▸"; margin-right: 6px; transition: transform 120ms ease; }
.mk-details[open] > summary::before { transform: rotate(90deg); }
.log .mk .mk-meer p, .mk-meer p { margin: 0 0 6px; font: inherit; font-size: 16px; color: var(--mk-tekst); }
.mk-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mk-knop { min-height: 48px; min-width: 48px; padding: 0 18px; border: 1px solid var(--mk-lijn); border-radius: 14px; background: transparent; color: var(--mk-tekst);
  font: 700 16px system-ui, Roboto, sans-serif; max-width: 100%; overflow-wrap: anywhere; }
.mk-knop.eerste { background: var(--mk-paars); color: #FFFFFF; border-color: transparent; }
html[data-thema="donker"] .mk-knop.eerste { background: #5B4BDB; }
.mk-knop:active { transform: scale(.97); }

/* C: tijdlijn met een lijntje langs de bolletjes */
.mk-lijn { position: relative; padding-left: 4px; }
.mk-lijn::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: var(--mk-lijn); }
.mk-lijn li { position: relative; display: flex; gap: 8px; align-items: baseline; padding: 4px 0 4px 22px; font-size: 16px; min-width: 0; }
.mk-lijn li > i { position: absolute; left: 0; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--mk-oranje); box-shadow: 0 0 0 3px var(--mk-vlak); }
.mk-lijn li.klaar > i { background: var(--mk-groen); }
.mk-lijn time { flex: 0 0 auto; color: var(--mk-zacht); font-size: 14px; font-variant-numeric: tabular-nums; }
.mk-lijn li > span { min-width: 0; }

/* in de chat: de kaart is zelf het vlak, geen tweede ballon eromheen */
html[data-vorm="plat"] .msg.melding .body, .msg.melding .body { background: none; box-shadow: none; border: 0; padding: 0; min-width: 0; }
.msg.melding .body > .meta { display: none; }
.msg .body { min-width: 0; }
@media (prefers-reduced-motion: reduce) { .mk-details > summary::before, .mk-knop:active { transition: none; transform: none; } }
/* ook het tijdje onder het rondje staat niet meer los op de achtergrond (K4): een klein eigen vlakje */
.log .msg .av-col time { display: inline-block; margin-top: 2px; padding: 0 4px; border-radius: 6px; background: var(--ax-oppervlak, #FFFFFF); color: var(--ax-tekst-zacht, #5A5F8C); }
/* twee puntjes van Lucía (k105495, 30-10-2026): een mislukte stap in de tijdlijn is rood (bolletje + "niet gelukt", niet alleen kleur);
   een gekozen knop blijft zichtbaar gekozen (paars met ✓), de andere gaan dicht maar blijven leesbaar (zelfde tekstkleur, stippelrand) */
.mk-lijn li.fout > i { background: var(--mk-rood); }
.mk-lijn .mk-x { color: var(--mk-rood); font-weight: 700; }
.mk-knop.gekozen, html[data-thema="donker"] .mk-knop.gekozen { background: var(--mk-paars); color: #FFFFFF; border-color: transparent; box-shadow: 0 0 0 3px var(--mk-vlak), 0 0 0 5px var(--mk-paars); }
html[data-thema="donker"] .mk-knop.gekozen { background: #5B4BDB; }
.mk-knop.niet { border-style: dashed; color: var(--mk-tekst); }
.mk-knop:disabled { cursor: default; transform: none; }