/* KineCare | Kine-app surface. Tokens conform venture-foundation scales
 * (8px-grid, phi-typografie); kleur-laag = brand v0.1 uit DESIGN_SYSTEM.md.
 * Geen hardcoded hex buiten :root. */
:root {
  /* Light hoofd-palet (founder-beslissing 2026-06-22): de kine/admin-surface
     omgezet van donker (v2.0) naar LICHT voor maximale leesbaarheid. Warm-
     neutrale basis, witte glas-panelen, verdiept teal-accent (contrast op licht)
     + warm goud voor de belangrijkste CTA's. De patient-surface (patient.css) en
     de PDF/mail-tracks houden hun eigen palet. Het oude v2.0-donkerpalet staat
     hieronder bewaard als revert-back (commentaar). */
  --kc-bg: #EEF2F1;
  --kc-surface: #FFFFFF;
  --kc-surface-2: #E3EAE9;
  --kc-ink: #15282E;
  --kc-ink-muted: #4F656A;
  --kc-ink-faint: #7E9499;
  --kc-accent: #0E8C84;
  --kc-accent-strong: #0A645F;
  --kc-accent-soft: rgba(14, 140, 132, 0.12);
  /* Donkere tekst op teal/goud-vulling (knoppen): in v2.0 was dit var(--kc-bg),
     maar op licht moet die tekst donker blijven, dus een eigen token. */
  --kc-on-fill: #0B1A1D;
  /* Warm goud-accent: luxe-signaal voor de belangrijkste CTA's; spaarzaam. */
  --kc-cta: #C2861A;
  --kc-cta-strong: #A6720F;
  --kc-cta-soft: rgba(194, 134, 26, 0.14);
  --kc-line: rgba(18, 34, 39, 0.10);
  --kc-border: rgba(18, 34, 39, 0.16);
  --kc-warn: #8A5A00;
  --kc-warn-bg: rgba(194, 134, 26, 0.12);
  --kc-danger: #BE3A2B;
  --kc-danger-bg: rgba(190, 58, 43, 0.10);
  --kc-success: #1C8A66;
  --kc-success-bg: rgba(28, 138, 102, 0.12);
  /* --- Revert-back: v2.0 dark hoofd-palet (founder 2026-06-14). Vervang het
     lichte blok hierboven door dit (en --kc-on-fill terug naar var(--kc-bg))
     om opnieuw donker te gaan. ---
     --kc-bg: #0C1618;  --kc-surface: #122227;  --kc-surface-2: #16292F;
     --kc-ink: #EAF3F2;  --kc-ink-muted: #9DB3B4;  --kc-ink-faint: #6C8285;
     --kc-accent: #2DD0C0;  --kc-accent-strong: #5FE6D8;  --kc-accent-soft: rgba(45,208,192,0.14);
     --kc-cta: #E6BE6A;  --kc-cta-strong: #F0CE86;  --kc-cta-soft: rgba(230,190,106,0.16);
     --kc-line: rgba(255,255,255,0.08);  --kc-border: rgba(255,255,255,0.15);
     --kc-warn: #E7B45A;  --kc-warn-bg: rgba(231,180,90,0.14);
     --kc-danger: #F47A6B;  --kc-danger-bg: rgba(244,122,107,0.15);
     --kc-success: #43D9A0;  --kc-success-bg: rgba(67,217,160,0.15);
     --kc-shadow: 0 1px 3px rgba(0,0,0,0.4);  --kc-shadow-lg: 0 16px 48px rgba(0,0,0,0.55);
     --kc-glas-glans: rgba(255,255,255,0.06); */

  --kc-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kc-font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --kc-type-xs: 0.618rem;
  --kc-type-sm: 0.79rem;
  --kc-type-base: 1rem;
  --kc-type-lead: 1.272rem;
  --kc-type-h3: 1.618rem;
  --kc-type-h2: 2.058rem;
  --kc-type-h1: 2.618rem;

  --kc-space-half: 0.25rem;
  --kc-space-1: 0.5rem;
  --kc-space-2: 1rem;
  --kc-space-3: 1.5rem;
  --kc-space-4: 2rem;
  --kc-space-5: 3rem;
  --kc-space-6: 4rem;

  --kc-phi-1: 0.5rem;
  --kc-phi-2: 0.75rem;
  --kc-phi-3: 1.25rem;
  --kc-phi-4: 2rem;
  --kc-phi-5: 3.25rem;
  --kc-phi-6: 3.5rem;

  --kc-radius-sm: 6px;
  --kc-radius: 10px;
  --kc-radius-lg: 14px;
  --kc-radius-xl: 24px;
  --kc-radius-2xl: 40px;
  --kc-shadow: 0 1px 3px rgba(18, 34, 39, 0.08);
  --kc-shadow-lg: 0 16px 48px rgba(18, 34, 39, 0.14);
  --kc-glas-glans: rgba(18, 34, 39, 0.04);

  --kc-t-fast: 180ms;
  --kc-t-base: 280ms;
  --kc-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
/* Geen horizontale scroll op welk scherm dan ook. overflow-x: hidden op body
   alleen liet de overflow nog naar de viewport-scroller (html) lekken, waardoor
   de pagina alsnog enkele pixels horizontaal verschoof; clip op html sluit dat
   af zonder een scroll-container te maken (geen regressie op sticky/vertical). */
html { overflow-x: clip; }
body {
  margin: 0; background: var(--kc-bg); color: var(--kc-ink);
  font-family: var(--kc-font); font-size: var(--kc-type-base); line-height: 1.55;
  overflow-x: clip;   /* full-bleed deck (100vw) mag geen horizontale scroll geven; clip i.p.v. hidden zodat de body geen scroll-container wordt en de sticky nav niet wegscrolt */
}
/* Zachte ambient-tint achter alles (blueprint v0.20): geeft glasscards iets om
   doorheen te tonen en de "hyper modern" sfeer; bewust subtiel (lage opacity). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 55vh at 6% -8%, color-mix(in srgb, var(--kc-accent) 16%, transparent), transparent 70%),
    radial-gradient(55vw 45vh at 100% -5%, color-mix(in srgb, var(--kc-accent) 11%, transparent), transparent 72%),
    radial-gradient(52vw 52vh at 100% 100%, color-mix(in srgb, var(--kc-cta) 9%, transparent), transparent 70%);
}
a { color: var(--kc-accent); }

/* Nav */
.kc-nav {
  background: color-mix(in srgb, var(--kc-bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--kc-line);
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--kc-space-2);
  padding: var(--kc-space-3) var(--kc-space-4);
}
.kc-nav__brand { font-weight: 700; font-size: var(--kc-type-lead); color: var(--kc-ink); text-decoration: none; }
.kc-nav__brand span { color: var(--kc-accent); }
.kc-nav a.kc-nav__link {
  color: var(--kc-ink-muted); text-decoration: none; font-size: var(--kc-type-sm);
  padding: var(--kc-space-1) var(--kc-phi-2); border-radius: var(--kc-radius-sm);
  transition: background var(--kc-t-fast) ease-out, color var(--kc-t-fast) ease-out;
}
.kc-nav a.kc-nav__link:hover { background: var(--kc-accent-soft); color: var(--kc-accent-strong); }
.kc-nav a.kc-nav__link.actief { background: var(--kc-accent-soft); color: var(--kc-accent-strong); font-weight: 600; }
.kc-nav__spacer { flex: 1; }

/* Mobiel-eerst nav (foundation 01 sectie 10.23): op desktop verdwijnt de
   .kc-nav__menu-wrapper uit de layout (display: contents) zodat de links exact
   als voorheen als directe flex-kinderen van de nav meelopen (geen regressie).
   De hamburger + overlay zijn enkel op smal scherm zichtbaar. */
.kc-nav__menu { display: contents; }
.kc-nav__burger, .kc-nav__overlay { display: none; }

/* Ingelogd-als indicator rechtsboven (blueprint v0.15). */
.kc-ingelogd { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; text-decoration: none; }
.kc-ingelogd__label { font-size: var(--kc-type-xs); color: var(--kc-ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.kc-ingelogd__naam { font-size: var(--kc-type-sm); font-weight: 600; color: var(--kc-ink); max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.kc-ingelogd:hover .kc-ingelogd__naam { color: var(--kc-accent-strong); }

/* Beheer-shell (blueprint v0.14): zelfde tokens, duidelijk gemarkeerd. */
.kc-nav--admin { border-bottom: 2px solid var(--kc-accent); }
.kc-adminlabel {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  background: var(--kc-accent); color: var(--kc-surface) !important;
  font-size: var(--kc-type-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 999px; padding: 2px 10px;
}

/* Pop-up-regel (foundation 01 sectie 10.11): formulier-invoer opent als
   modal boven de huidige pagina. */
.kc-modal { position: fixed; inset: 0; z-index: 100; }
/* Backdrop dimt de donkere pagina (brand v2.0). Was rgba(22,50,58,..) = het
   oude licht-navy #16323A uit v1.0, wat de pagina net lichtte i.p.v. dimde;
   nu een donkere scrim op --kc-bg, idiom-gelijk aan de drawer-overlay. */
.kc-modal__achtergrond { position: absolute; inset: 0; background: color-mix(in srgb, var(--kc-bg) 72%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: kc-fade 200ms ease-out; }
.kc-modal__venster {
  position: absolute; inset: 4vh 0 4vh 0; margin: 0 auto; width: min(860px, 94vw);
  background: var(--kc-bg); border-radius: var(--kc-radius-lg);
  border: 1px solid var(--kc-border);
  box-shadow: 0 1px 0 var(--kc-glas-glans) inset, 0 40px 120px rgba(18, 34, 39, 0.14);
  overflow: hidden; animation: kc-in 260ms var(--kc-ease);
}
.kc-modal__frame { width: 100%; height: 100%; border: 0; }
.kc-modal__sluit {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--kc-line);
  background: var(--kc-surface); color: var(--kc-ink-muted); font-size: 20px; cursor: pointer;
  transition: all var(--kc-t-fast) ease-out;
}
.kc-modal__sluit:hover { color: var(--kc-ink); transform: scale(1.06); }
/* Pop-up-layout (founder 2026-06-22, BEWUSTE keuze): de hele pop-up is op
   inhoudshoogte en scrollt als geheel; de middenkolom heeft de volledige
   inhoudshoogte. De zij/tools-kolommen worden tijdens het scrollen op hun plek
   gehouden via een scroll-gekoppelde transform (kc-deck.js), zodat ze niet
   verspringen en de inhoud nergens hard afkapt. */
.kc-modalpagina .kc-page { padding-top: var(--kc-space-4); }
/* De aurora binnen de iframe is overbodig (de achterliggende pagina toont al een
   aurora achter de backdrop); uit houdt de pop-up licht. */
.kc-modalpagina .kc-aurora { display: none; }
/* Transparante iframe-body: alleen het midden-paneel en de losse zij/tools-
   kaarten zijn zichtbaar; de ruimte ertussen toont de backdrop. */
body.kc-modalpagina { background: transparent; }
/* body::before ambient-gradient uit in de pop-up (tekende anders een faint
   getinte rechthoek over de volle iframe-breedte). */
body.kc-modalpagina::before { display: none; }
/* De zij/tools-kolommen blijven via JS op hun plek (scroll-gekoppelde transform);
   relative zodat de transform aangrijpt, geen CSS-sticky in de pop-up. */
.kc-modalpagina .kc-werkblad__zij, .kc-modalpagina .kc-werkblad__tools {
  position: relative; align-self: start; top: auto; will-change: transform;
}
@keyframes kc-fade { from { opacity: 0; } to { opacity: 1; } }

/* Activiteitenbel (blueprint v0.10) */
.kc-bel { position: relative; }
.kc-bel__knop {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--kc-line); background: var(--kc-surface); color: var(--kc-ink-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--kc-t-fast) ease-out;
}
.kc-bel__knop:hover { color: var(--kc-accent-strong); border-color: var(--kc-accent); transform: translateY(-1px); }
.kc-bel__badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; text-align: center;
  background: var(--kc-accent); color: var(--kc-surface); border-radius: 999px;
  font-size: var(--kc-type-xs); font-weight: 700; padding: 1px 5px;
}
.kc-bel__paneel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, 92vw); z-index: 60;
  background: var(--kc-surface); border: 1px solid var(--kc-line); border-radius: var(--kc-radius);
  box-shadow: var(--kc-shadow); padding: var(--kc-space-1); animation: kc-in 200ms var(--kc-ease);
}
.kc-bel__kop { font-size: var(--kc-type-xs); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--kc-ink-faint); padding: var(--kc-space-1) var(--kc-space-2); }
.kc-bel__item {
  display: flex; justify-content: space-between; gap: var(--kc-space-2); align-items: baseline;
  padding: var(--kc-space-1) var(--kc-space-2); border-radius: var(--kc-radius-sm);
  text-decoration: none; color: var(--kc-ink); font-size: var(--kc-type-sm);
}
.kc-bel__item:hover { background: var(--kc-accent-soft); }
.kc-bel__item.aandacht .kc-bel__tekst { font-weight: 600; }
.kc-bel__item.aandacht::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kc-accent); flex: 0 0 auto; align-self: center; }
.kc-bel__tekst { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-bel__tijd { color: var(--kc-ink-faint); font-size: var(--kc-type-xs); white-space: nowrap; }
.kc-bel__leeg { padding: var(--kc-space-2); color: var(--kc-ink-muted); font-size: var(--kc-type-sm); text-align: center; }

.kc-navbadge {
  display: inline-block; min-width: 18px; text-align: center;
  background: var(--kc-accent); color: var(--kc-surface);
  border-radius: 999px; font-size: var(--kc-type-xs); font-weight: 700;
  padding: 1px 6px; vertical-align: middle;
}

/* Layout. Royale witruimte is de luxe-standaard (foundation 01 sectie 10). */
.kc-page { max-width: 1180px; margin: 0 auto; padding: var(--kc-space-6) var(--kc-space-5); }
.kc-page-title { font-family: var(--kc-font-display); font-size: var(--kc-type-h2); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--kc-space-2) 0; text-align: center; }
.kc-page-sub { color: var(--kc-ink-muted); margin: 0 0 var(--kc-space-5) 0; }

/* Filter-naar-content ritme (UI_GUIDELINES 7.1) */
.kc-toolbar { display: flex; flex-direction: column; gap: var(--kc-space-1); margin-bottom: var(--kc-space-4); }
.kc-toolbar__row { display: flex; gap: var(--kc-space-1); align-items: center; flex-wrap: wrap; }

/* Cards */
.kc-card {
  background: var(--kc-surface); border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-lg);
  box-shadow: 0 1px 0 var(--kc-glas-glans) inset, var(--kc-shadow-lg);
  padding: var(--kc-phi-4); margin-bottom: var(--kc-space-4);
}
.kc-card__title { font-family: var(--kc-font-display); font-size: var(--kc-type-h3); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--kc-space-3) 0; }
.kc-section-label {
  font-size: var(--kc-type-xs); text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--kc-accent-strong); font-weight: 700; margin-bottom: var(--kc-space-3);
}

/* Tabel-standaard (UI_GUIDELINES sectie 6, 9 regels) */
.kc-table { width: 100%; border-collapse: collapse; }
.kc-table th {
  text-align: left; white-space: nowrap; font-size: var(--kc-type-sm);
  color: var(--kc-ink-muted); font-weight: 600;
  padding: var(--kc-space-1) var(--kc-space-2);
  border-bottom: 1px solid var(--kc-border);
}
.kc-table td {
  height: 4rem; vertical-align: middle;
  padding: 0 var(--kc-space-3);
  border-bottom: 1px solid var(--kc-line);
  font-size: var(--kc-type-sm); color: var(--kc-ink);
}
.kc-table tr:last-child td { border-bottom: 0; }
.kc-table td.kc-table__primary {
  width: 100%; max-width: 1px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-weight: 600; font-size: var(--kc-type-base);
}
.kc-table td a {
  color: var(--kc-accent-strong); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--kc-accent) 40%, transparent);
  transition: text-decoration-color var(--kc-t-fast) ease-out;
}
.kc-table td a:hover { text-decoration-color: var(--kc-accent); }

/* Badges (pakket-lifecycle) */
.kc-badge {
  display: inline-block; padding: 2px var(--kc-space-1); border-radius: 999px;
  font-size: var(--kc-type-xs); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
}
.kc-badge--concept { background: var(--kc-bg); color: var(--kc-ink-muted); border: 1px solid var(--kc-line); }
.kc-badge--gegenereerd { background: var(--kc-accent-soft); color: var(--kc-accent-strong); }
.kc-badge--goedgekeurd { background: var(--kc-success-bg); color: var(--kc-success); }
.kc-badge--verzonden { background: var(--kc-surface); color: var(--kc-ink-muted); border: 1px solid var(--kc-border); }
.kc-badge--geblokkeerd { background: var(--kc-danger-bg); color: var(--kc-danger); }

/* Buttons */
.kc-btn {
  display: inline-flex; align-items: center; gap: var(--kc-space-1);
  font-family: var(--kc-font); font-size: var(--kc-type-sm); font-weight: 600;
  padding: var(--kc-space-1) var(--kc-space-2); border-radius: var(--kc-radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  min-height: 44px; transition: all var(--kc-t-fast) var(--kc-ease);
}
.kc-btn--primary {
  background: var(--kc-accent); color: var(--kc-on-fill);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--kc-accent) 32%, transparent);
}
.kc-btn--primary:hover { background: var(--kc-accent-strong); transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--kc-accent) 35%, transparent); }
.kc-btn--primary:active { transform: translateY(0) scale(0.98); }
.kc-btn--ghost { background: transparent; color: var(--kc-accent-strong); border-color: var(--kc-border); }
.kc-btn--ghost:hover { background: var(--kc-accent-soft); border-color: var(--kc-accent); }
.kc-btn--ghost:active { transform: scale(0.98); }
.kc-btn--danger { background: transparent; color: var(--kc-danger); border-color: var(--kc-danger); }
.kc-btn--danger:hover { background: var(--kc-danger-bg); }
/* Aandacht-CTA-knop (foundation 10.20): de actie die nu aandacht vraagt. Warm
   goud-vulling met donkere tekst (var(--kc-bg)) voor hoog contrast + luxe-
   signaal; spaarzaam, idealiter een per scherm. */
.kc-btn--cta {
  background: var(--kc-cta); color: var(--kc-on-fill); border-color: var(--kc-cta);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--kc-cta) 32%, transparent);
}
.kc-btn--cta:hover { background: var(--kc-cta-strong); border-color: var(--kc-cta-strong);
  transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--kc-cta) 42%, transparent); }
.kc-btn--cta:active { transform: translateY(0) scale(0.98); }
/* Icoon-eerste actieknoppen (foundation 01 sectie 10.15): icoon links van het
   label, nooit krimpen. .kc-btn--icoon is de icoon-only variant (vierkant,
   gecentreerd) voor compacte/herhaalde acties met een toegankelijk label. */
.kc-ico { flex: 0 0 auto; }
.kc-btn--icoon { padding: var(--kc-space-1); min-width: 44px; justify-content: center; }
.kc-filterbalk .kc-btn--icoon, .kc-table .kc-btn--icoon { min-width: 34px; }

/* Icoon-actieknop (blueprint v0.20, foundation 10.16): ENKEL icoon, geen tekst,
   semantisch gekleurd binnen het brand-palet. Verplicht een title + aria-label
   want er is geen zichtbaar tekstlabel; destructieve acties houden hun confirm-
   dialog. Gebruik in tabel-rijen en toolbars i.p.v. tekst-knoppen. */
.kc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border-radius: var(--kc-radius);
  border: 1px solid var(--kc-line); background: var(--kc-surface);
  color: var(--kc-ink-muted); cursor: pointer; text-decoration: none;
  transition: transform var(--kc-t-fast) var(--kc-ease), background var(--kc-t-fast) ease-out, border-color var(--kc-t-fast) ease-out, color var(--kc-t-fast) ease-out;
}
.kc-iconbtn:hover { transform: translateY(-1px); box-shadow: var(--kc-shadow); }
.kc-iconbtn--actie { color: var(--kc-accent-strong); border-color: var(--kc-accent-soft); }
.kc-iconbtn--actie:hover { background: var(--kc-accent-soft); border-color: var(--kc-accent); }
.kc-iconbtn--bevestig { color: var(--kc-success); border-color: color-mix(in srgb, var(--kc-success) 30%, var(--kc-line)); }
.kc-iconbtn--bevestig:hover { background: var(--kc-success-bg); border-color: var(--kc-success); }
.kc-iconbtn--gevaar { color: var(--kc-danger); border-color: color-mix(in srgb, var(--kc-danger) 30%, var(--kc-line)); }
.kc-iconbtn--gevaar:hover { background: var(--kc-danger-bg); border-color: var(--kc-danger); }
.kc-iconbtn--primair { color: var(--kc-surface); background: var(--kc-accent); border-color: var(--kc-accent); }
.kc-iconbtn--primair:hover { background: var(--kc-accent-strong); border-color: var(--kc-accent-strong); }
.kc-iconbtn-rij { display: inline-flex; gap: var(--kc-space-1); align-items: center; }

/* Links duidelijk herkenbaar (blueprint v0.20): accent-kleur + onderlijning. */
.kc-link, .kc-card p a, .kc-field__hint a, .kc-table td.kc-table__primary a {
  color: var(--kc-accent-strong); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--kc-accent) 40%, transparent);
  transition: text-decoration-color var(--kc-t-fast) ease-out;
}
.kc-link:hover, .kc-card p a:hover, .kc-table td.kc-table__primary a:hover {
  text-decoration-color: var(--kc-accent);
}

/* Datum-pil (blueprint v0.20): datums worden altijd als pil getoond. */
.kc-datum {
  display: inline-flex; align-items: center; gap: var(--kc-space-half);
  padding: var(--kc-space-half) var(--kc-space-1); border-radius: 999px;
  background: var(--kc-bg); border: 1px solid var(--kc-line);
  color: var(--kc-ink-muted); font-size: var(--kc-type-xs); font-weight: 600;
  white-space: nowrap; letter-spacing: 0.01em;
}
.kc-datum .kc-ico { color: var(--kc-ink-faint); }

/* Glasscard-standaard (blueprint v0.20, foundation 10.17): kaarten ZONDER
   kleine tekst (KPI-tegels, visuele kaarten) krijgen een frosted-glass-effect;
   kaarten met tabellen/formulieren/kleine tekst blijven solide voor leesbaar-
   heid. Vandaar: .kc-stat en de opt-in .kc-card--glas, niet .kc-card zelf. */
.kc-stat, .kc-card--glas {
  background: color-mix(in srgb, var(--kc-surface) 70%, transparent);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border-color: color-mix(in srgb, var(--kc-surface) 50%, var(--kc-border));
  box-shadow: 0 1px 0 var(--kc-glas-glans) inset, var(--kc-shadow-lg);
}
/* Degradeert netjes naar een solide kaart (foundation 10.17). */
@media (prefers-reduced-transparency: reduce) {
  .kc-stat, .kc-card--glas { background: var(--kc-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Forms: globale base (UI_GUIDELINES 5.2) */
input, select, textarea {
  font-family: var(--kc-font); font-size: var(--kc-type-base); color: var(--kc-ink);
  background: var(--kc-surface); border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius-sm); padding: var(--kc-space-1) var(--kc-space-2);
  width: 100%; transition: border-color var(--kc-t-fast) ease-out, box-shadow var(--kc-t-fast) ease-out;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--kc-accent);
  box-shadow: 0 0 0 3px var(--kc-accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--kc-ink-faint); }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--kc-accent); }
input[type="range"] { accent-color: var(--kc-accent); padding: 0; border: none; background: transparent; box-shadow: none; }
input[type="range"]:focus { box-shadow: none; }
/* Numerieke nulmeting (blueprint v0.23): de live-waarde naast het slider-label. */
.kc-range__waarde {
  display: inline-block; min-width: 1.6em; text-align: center;
  background: var(--kc-accent-soft); color: var(--kc-accent-strong);
  border-radius: var(--kc-radius-sm); padding: 0 var(--kc-space-1); font-weight: 700;
}
textarea { min-height: 5rem; resize: vertical; }
label { font-size: var(--kc-type-sm); font-weight: 600; color: var(--kc-ink); display: block; margin-bottom: var(--kc-space-1); }
.kc-field { margin-bottom: var(--kc-space-3); }
.kc-field__hint { font-size: var(--kc-type-xs); color: var(--kc-ink-muted); margin-top: var(--kc-space-1); }
.kc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kc-space-3); }
/* Vaste-kolom-grids voor formulier-kaarten; collapsen onder 720px naar 1 kolom
   (zie media-query). Gebruik deze classes i.p.v. een inline grid-template-
   override: die omzeilt de responsive collapse en perst kaarten op smal scherm
   (blueprint v0.15 knop-fix). */
.kc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kc-space-3); }
.kc-grid-medewerker { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: var(--kc-space-3); }
.kc-checkrow { display: flex; align-items: center; gap: var(--kc-space-1); font-weight: 400; margin-bottom: var(--kc-space-1); }
.kc-checkrow input { margin: 0; }

/* Bron-koppeling: multi-select van oefeningen (validatie-surface) */
.kc-koppel-oefs {
  display: flex; flex-direction: column;
  max-height: 200px; overflow-y: auto;
  margin-bottom: var(--kc-space-2); padding: var(--kc-space-2);
  border: 1px solid var(--kc-line); border-radius: var(--kc-radius-sm);
  background: var(--kc-surface);
}
.kc-koppel-oefs .kc-koppel-alle {
  border-bottom: 1px solid var(--kc-line);
  padding-bottom: var(--kc-space-1); margin-bottom: var(--kc-space-1);
}

/* Anamnese-stappen */
.kc-steps { display: flex; gap: var(--kc-space-1); margin-bottom: var(--kc-space-3); }
.kc-steps__item {
  flex: 1; text-align: center; font-size: var(--kc-type-sm); font-weight: 600;
  color: var(--kc-ink-faint); padding: var(--kc-space-1);
  border-bottom: 3px solid var(--kc-line); cursor: default;
}
.kc-steps__item.actief { color: var(--kc-accent-strong); border-color: var(--kc-accent); }
.kc-step-pane { display: none; }
.kc-step-pane.actief { display: block; }

/* Red flags blok */
.kc-redflags {
  border: 1px solid var(--kc-danger); border-radius: var(--kc-radius);
  background: var(--kc-danger-bg); padding: var(--kc-phi-3); margin-top: var(--kc-space-3);
}
.kc-redflags .kc-section-label { color: var(--kc-danger); }

/* Alerts */
.kc-alert { border-radius: var(--kc-radius); padding: var(--kc-phi-3); margin-bottom: var(--kc-space-3); }
.kc-alert--danger { background: var(--kc-danger-bg); color: var(--kc-danger); border: 1px solid var(--kc-danger); }
.kc-alert--info { background: var(--kc-accent-soft); color: var(--kc-accent-strong); }
/* Lange, niet-afbreekbare strings (bv. de volledige patiëntpagina-URL in de
   verzonden-melding) mogen op smal scherm geen horizontale overflow geven:
   breek ze af aan de bron i.p.v. te clippen (10.23a). min-width: 0 op een flex-
   kind heft de impliciete min-content-breedte op zodat de tekst echt kan wrappen. */
.kc-alert { overflow-wrap: anywhere; }
.kc-alert > * { min-width: 0; }

/* Review-secties */
.kc-review-sectie { border-top: 1px solid var(--kc-line); padding-top: var(--kc-space-4); margin-top: var(--kc-space-4); }
.kc-oefening { border: 1px solid var(--kc-line); border-radius: var(--kc-radius); padding: var(--kc-phi-3); margin-bottom: var(--kc-space-3); background: var(--kc-bg); }
.kc-oefening__naam { font-weight: 700; }
.kc-oefening__dosering { color: var(--kc-accent-strong); font-size: var(--kc-type-sm); font-weight: 600; }
.kc-oefening__voorzorg { color: var(--kc-warn); font-size: var(--kc-type-sm); background: var(--kc-warn-bg); padding: var(--kc-space-1); border-radius: var(--kc-radius-sm); margin-top: var(--kc-space-1); }
.kc-bron { font-size: var(--kc-type-xs); color: var(--kc-ink-faint); margin-top: var(--kc-space-1); }

/* Herkomst-blok bij een oefening op de review (blueprint v0.14-addendum:
   het "waarom" staat bij de oefening zelf, niet in een aparte tab die
   nooit bekeken wordt). */
.kc-herkomst {
  margin-top: var(--kc-space-1); padding: var(--kc-space-1) var(--kc-space-2);
  background: var(--kc-accent-soft); border-radius: var(--kc-radius-sm);
  font-size: var(--kc-type-sm); color: var(--kc-ink);
}
.kc-herkomst__label {
  display: block; font-size: var(--kc-type-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--kc-accent-strong);
  margin-bottom: 2px;
}

.kc-empty { text-align: center; color: var(--kc-ink-muted); padding: var(--kc-space-5); }

/* Filterbalk (blueprint v0.8/v0.9). Filter-regel (founder): filters zijn
   ALTIJD compact en inline, nooit full width; kleine dropdowns naast
   elkaar, geen aparte filter-rij die het werkblad domineert. */
.kc-filterbalk { display: inline-flex; flex-wrap: wrap; gap: var(--kc-space-1); align-items: center; }
.kc-filterbalk input[type="search"], .kc-filterbalk select {
  font-family: var(--kc-font); font-size: var(--kc-type-sm); color: var(--kc-ink);
  border: 1px solid var(--kc-line); border-radius: var(--kc-radius-sm);
  padding: 4px var(--kc-space-1); background: var(--kc-surface); min-height: 34px;
  width: auto; max-width: 200px;
}
.kc-filterbalk input[type="search"] { min-width: 150px; }
.kc-filterbalk .kc-btn { min-height: 34px; padding: 4px var(--kc-space-2); font-size: var(--kc-type-sm); }

/* Werkblad-layout: 3 kolommen (founder 2026-06-22, BEWUSTE systeem-brede
   structuur voor ELKE werkblad-pagina): links hoofdinfo + acties, midden
   hoofdinhoud (>= 60%), rechts tools. Elke werkblad-pagina hoort een __zij,
   __hoofd en __tools kolom te hebben.
   De zij- en tools-kolommen blijven FIXED staan op hun inhoudshoogte (sticky)
   terwijl het midden scrollt; is een zij-blok hoger dan het scherm, dan scrollt
   enkel dat blok. Het midden is de scrollende hoofdinhoud (founder 2026-06-22). */
/* Werkblad-pagina's krijgen een ruimere breedte (founder 2026-06-22): 3 kolommen
   ademen niet op de standaard 1180px. */
.kc-page:has(.kc-werkblad) { max-width: 1500px; }
/* Alleen de MIDDENkolom is de lichtblauwe achtersectie. De zij- en tools-
   kolommen hebben GEEN sectie-achtergrond: het zijn losse, zwevende pop-up-
   blokken op de pagina-achtergrond (founder 2026-06-22). */
.kc-werkblad { display: grid; grid-template-columns: 1fr 3fr 1fr; gap: var(--kc-space-4); align-items: start; }
.kc-werkblad__zij, .kc-werkblad__tools {
  display: flex; flex-direction: column; gap: var(--kc-space-4);
  position: sticky; top: calc(var(--kc-navh, 66px) + var(--kc-space-2));
  align-self: start;
  /* Geen overflow/max-height: anders klipt de kolom de dropshadow en de hover-
     rand van de kaarten (founder 2026-06-22). De zij-blokken zijn kort genoeg. */
}
/* Zij/tools = losse zwevende pop-up-kaarten met een LICHTE dropshadow per blok
   (geen zware schaduw die tussen de blokken pools). Hover raakt ENKEL de rand
   (accent + zachte rand-gloed), geen lift of opwaartse transitie (founder 2026-06-22). */
.kc-werkblad__zij .kc-card, .kc-werkblad__tools .kc-card {
  margin-bottom: 0;
  box-shadow: 0 4px 14px rgba(18, 34, 39, 0.07);
  outline: 2px solid transparent; outline-offset: 0;
  transition: outline-color var(--kc-t-base) var(--kc-ease), outline-offset var(--kc-t-base) var(--kc-ease);
}
/* Hover-rand groeit aan de BUITENkant (outline + offset). Een outline reserveert
   nooit ruimte in de layout, dus de inhoud blijft exact staan; de border zelf
   blijft ongemoeid (geen "van-binnenuit"-effect) (founder 2026-06-22). */
.kc-werkblad__zij .kc-card:hover, .kc-werkblad__tools .kc-card:hover {
  outline-color: var(--kc-accent);
  outline-offset: 4px;
}
/* Middenkolom = de lichtblauwe achtersectie (hoofdblad). */
.kc-werkblad__hoofd {
  background: color-mix(in srgb, var(--kc-accent) 8%, var(--kc-surface));
  border: 1px solid var(--kc-border); border-radius: var(--kc-radius-xl);
  padding: var(--kc-phi-4); box-shadow: var(--kc-shadow);
}
/* Smal scherm: alle drie de kolommen stapelen tot 1 kolom; geen sticky meer. */
@media (max-width: 1100px) {
  .kc-werkblad { grid-template-columns: 1fr; }
  .kc-werkblad__zij, .kc-werkblad__tools { position: static; max-height: none; overflow: visible; }
}
.kc-infotabel { width: 100%; border-collapse: collapse; }
.kc-infotabel td { padding: 6px 0; font-size: var(--kc-type-sm); border-bottom: 1px solid var(--kc-line); vertical-align: top; }
.kc-infotabel td:first-child { color: var(--kc-ink-muted); width: 40%; }
.kc-infotabel td:last-child { overflow-wrap: anywhere; }
.kc-infotabel tr:last-child td { border-bottom: 0; }

/* Melding-blok in het opvolg-centrum (blueprint v0.8) */
.kc-meldblok { border: 1px solid var(--kc-line); border-radius: var(--kc-radius); padding: var(--kc-space-2); margin-bottom: var(--kc-space-2); }
.kc-meldblok--nieuw { border-color: var(--kc-accent); }
.kc-meldblok__kop { display: flex; align-items: center; gap: var(--kc-space-2); }
.kc-meldblok .kc-toolbar__row { margin-top: var(--kc-space-1); }

/* Verslechtering-radar (blueprint v0.24): aandacht-banner bovenaan het
   opvolg-centrum. Coral = oproep tot terugroep (zelfde aandacht-kleur als de
   patient-CTA, spaarzaam ingezet). */
.kc-radar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--kc-space-2);
  flex-wrap: wrap; padding: var(--kc-space-2) var(--kc-space-3); margin-bottom: var(--kc-space-3);
  border-radius: var(--kc-radius); border: 1px solid var(--kc-cta); background: var(--kc-cta-soft);
}
.kc-radar__kop { display: flex; align-items: center; gap: var(--kc-space-2); min-width: 0; }
.kc-radar__icoon { color: var(--kc-cta-strong); flex: 0 0 auto; }
.kc-radar__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kc-radar__titel { font-weight: 700; color: var(--kc-cta-strong); }
.kc-radar--duidelijk { box-shadow: 0 0 0 3px color-mix(in srgb, var(--kc-cta) 20%, transparent); }

/* Herstel-bewijskaart (blueprint v0.24): pijn-delta t.o.v. de nulmeting. */
.kc-herstel__cijfer { display: flex; align-items: baseline; gap: var(--kc-space-1); font-size: var(--kc-type-lead); font-weight: 700; }
.kc-herstel__delta { font-size: var(--kc-type-sm); font-weight: 700; padding: 0 var(--kc-space-1); border-radius: var(--kc-radius-sm); }
.kc-herstel__delta--verbeterd { background: var(--kc-success-bg); color: var(--kc-success); }
.kc-herstel__delta--verslechterd { background: var(--kc-cta-soft); color: var(--kc-cta-strong); }
.kc-herstel__delta--stabiel, .kc-herstel__delta--onbekend { background: var(--kc-bg); color: var(--kc-ink-muted); }

/* Patient-tijdlijn (blueprint v0.35): verticale tijdlijn met ALLE events van
   EEN patient, nieuwste eerst. Een doorlopende lijn met icoon-stippen; mobiel-
   vriendelijk single column. Aandacht-events lichten coral (de bestaande
   --kc-cta aandacht-kleur, zoals de radar-banner) op. */
.kc-tijdlijn { list-style: none; margin: 0; padding: 0; position: relative; }
.kc-tl {
  position: relative; display: flex; gap: var(--kc-space-2);
  padding: 0 0 var(--kc-space-3) var(--kc-space-1);
}
/* Doorlopende verbindingslijn achter de stippen (loopt niet voorbij het laatste
   event). */
.kc-tl::before {
  content: ""; position: absolute; left: calc(var(--kc-space-1) + 13px); top: 0; bottom: 0;
  width: 1px; background: var(--kc-line);
}
.kc-tl:last-child { padding-bottom: 0; }
.kc-tl:last-child::before { display: none; }
.kc-tl__stip {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kc-accent-soft); color: var(--kc-accent-strong);
  border: 1px solid var(--kc-line);
}
.kc-tl__inhoud { min-width: 0; flex: 1 1 auto; padding-top: var(--kc-space-half); }
.kc-tl__kop { display: flex; align-items: center; gap: var(--kc-space-2); flex-wrap: wrap; }
.kc-tl__titel { font-weight: 600; color: var(--kc-ink); }
.kc-tl__detail {
  margin: var(--kc-space-half) 0 0 0; color: var(--kc-ink-muted);
  font-size: var(--kc-type-sm);
}
.kc-tl--aandacht .kc-tl__stip {
  background: var(--kc-cta-soft); color: var(--kc-cta-strong); border-color: var(--kc-cta);
}
.kc-tl--aandacht .kc-tl__titel { color: var(--kc-cta-strong); }

/* ---- Homescreen (founder-feedback punt 3: altijd mooi, licht geanimeerd) ---- */
.kc-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--kc-accent-soft), var(--kc-surface) 60%);
  border: 1px solid var(--kc-line); border-radius: var(--kc-radius-lg);
  padding: var(--kc-phi-5) var(--kc-phi-4); margin-bottom: var(--kc-space-4);
  box-shadow: var(--kc-shadow-lg);
  animation: kc-in 480ms var(--kc-ease), kc-hero-glow 7s ease-in-out 600ms infinite;
}
.kc-hero::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: var(--kc-accent); opacity: 0.07;
  animation: kc-zweef 9s ease-in-out infinite alternate;
}
.kc-hero__groet { font-family: var(--kc-font-display); font-size: var(--kc-type-h2); font-weight: 600; margin: 0 0 var(--kc-space-half) 0; }
.kc-hero__sub { color: var(--kc-ink-muted); margin: 0; }

/* Geanimeerde sfeer-achtergrond op home (founder v0.11): drie grote,
   sterk vervaagde kleurvlekken die tergend traag drijven achter de hele
   pagina. Lage opacity, geen interactie, volledig uit onder
   prefers-reduced-motion (globale regel onderaan). */
.kc-sfeer { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.kc-sfeer__blob { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.kc-sfeer__blob--1 {
  width: 480px; height: 480px; top: -160px; right: -120px;
  /* Max 0.10: daarboven zakt ink-muted op doorschijnende vlakken onder
     AA-contrast (QA v0.11, L6). */
  background: var(--kc-accent); opacity: 0.10;
  animation: kc-sfeer-a 38s ease-in-out infinite alternate;
}
.kc-sfeer__blob--2 {
  width: 400px; height: 400px; bottom: -150px; left: -110px;
  background: var(--kc-accent-strong); opacity: 0.09;
  animation: kc-sfeer-b 46s ease-in-out infinite alternate;
}
.kc-sfeer__blob--3 {
  width: 300px; height: 300px; top: 42%; left: 56%;
  background: var(--kc-warn); opacity: 0.05;
  animation: kc-sfeer-c 54s ease-in-out infinite alternate;
}
@keyframes kc-sfeer-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-90px, 70px) scale(1.12); } }
@keyframes kc-sfeer-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(110px, -60px) scale(1.08); } }
@keyframes kc-sfeer-c { from { transform: translate(0, 0); } to { transform: translate(-70px, -90px); } }

/* Warm welkom (blueprint v0.10): rijkere hero met datum, dubbele zachte
   deco-cirkels en actie-knoppen; de groet ademt, het scherm leeft licht. */
.kc-hero--warm { padding: var(--kc-phi-6, 56px) var(--kc-phi-5) var(--kc-phi-5); }
.kc-hero--warm::before {
  content: ""; position: absolute; left: -80px; bottom: -110px; width: 260px; height: 260px;
  border-radius: 50%; background: var(--kc-accent); opacity: 0.05;
  animation: kc-zweef 12s ease-in-out infinite alternate-reverse;
}
.kc-hero__datum {
  font-size: var(--kc-type-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--kc-accent-strong); margin-bottom: var(--kc-space-1);
  animation: kc-in 480ms var(--kc-ease) backwards;
}
.kc-hero--warm .kc-hero__groet { font-size: var(--kc-type-h1, 34px); animation: kc-in 480ms var(--kc-ease) 60ms backwards; }
.kc-hero--warm .kc-hero__sub { font-size: var(--kc-type-lead); max-width: 60ch; animation: kc-in 480ms var(--kc-ease) 120ms backwards; }
.kc-hero__acties { display: flex; gap: var(--kc-space-2); margin-top: var(--kc-space-3); animation: kc-in 480ms var(--kc-ease) 180ms backwards; }

/* Activiteiten-feed op home: warm, klikbaar, licht gestaggerd. */
.kc-activiteit { display: flex; flex-direction: column; }
.kc-activiteit__item {
  display: flex; align-items: baseline; gap: var(--kc-space-2);
  padding: var(--kc-space-2) var(--kc-space-1); text-decoration: none; color: var(--kc-ink);
  border-bottom: 1px solid var(--kc-line); border-radius: var(--kc-radius-sm);
  transition: background var(--kc-t-fast) ease-out;
  animation: kc-in 420ms var(--kc-ease) backwards;
}
.kc-activiteit__item:nth-child(2) { animation-delay: 60ms; }
.kc-activiteit__item:nth-child(3) { animation-delay: 120ms; }
.kc-activiteit__item:nth-child(4) { animation-delay: 180ms; }
.kc-activiteit__item:nth-child(5) { animation-delay: 240ms; }
.kc-activiteit__item:nth-child(6) { animation-delay: 300ms; }
.kc-activiteit__item:last-child { border-bottom: 0; }
.kc-activiteit__item:hover { background: var(--kc-accent-soft); }
.kc-activiteit__stip { width: 8px; height: 8px; border-radius: 50%; background: var(--kc-line); flex: 0 0 auto; align-self: center; }
.kc-activiteit__item.aandacht .kc-activiteit__stip { background: var(--kc-accent); }
.kc-activiteit__item.aandacht .kc-activiteit__tekst { font-weight: 600; }
.kc-activiteit__tekst { flex: 1; }
.kc-activiteit__tijd { color: var(--kc-ink-faint); font-size: var(--kc-type-sm); white-space: nowrap; }
@keyframes kc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes kc-zweef { from { transform: translate(0, 0); } to { transform: translate(-14px, 14px); } }

/* Stat-cards volgen de kaart-grammatica (foundation 01 sectie 5: accent-
 * signaal via ::before-topline, icoon-chip, hover-lift). Kerncijfers zijn
 * nooit kale tekst. */
.kc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kc-space-3); margin-bottom: var(--kc-space-5); }
/* Grid-regel (founder): nooit een wees-kaart op een nieuwe rij; het
   kolomaantal volgt het kaart-aantal. */
.kc-stats--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .kc-stats--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .kc-stats, .kc-stats--5 { grid-template-columns: repeat(2, 1fr); }
  /* Oneven kaart-aantal op 2 kolommen: de laatste kaart spant de rij
     (grid-regel: nooit een wees-kaart). */
  .kc-stats--5 > :last-child { grid-column: 1 / -1; }
  /* Tabellen lopen op smalle schermen nooit uit de kaart (UI-pass v0.11). */
  .kc-card, .kc-werkblad__hoofd { overflow-x: auto; }
}
/* Klikbare stat-kaarten (home = puur dashboard, alles klikbaar). */
a.kc-stat { text-decoration: none; color: inherit; cursor: pointer; transition: transform var(--kc-t-fast) ease-out, box-shadow var(--kc-t-fast) ease-out; }
a.kc-stat:hover { transform: translateY(-3px); box-shadow: var(--kc-shadow-lift, var(--kc-shadow)); }
.kc-stat {
  position: relative; overflow: hidden;
  background: var(--kc-surface); border: 1px solid var(--kc-line); border-radius: var(--kc-radius-lg);
  padding: var(--kc-phi-4); box-shadow: var(--kc-shadow);
  display: flex; flex-direction: column; gap: var(--kc-space-2);
  animation: kc-in 480ms var(--kc-ease) backwards;
  transition: transform var(--kc-t-fast) var(--kc-ease), box-shadow var(--kc-t-fast) ease-out,
              border-color var(--kc-t-fast) ease-out;
}
.kc-stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--kc-accent), var(--kc-accent-soft));
  opacity: 0.55; transition: opacity var(--kc-t-fast) ease-out;
}
.kc-stat:hover { transform: translateY(-3px); box-shadow: var(--kc-shadow-lg); border-color: var(--kc-border); }
.kc-stat:hover::before { opacity: 1; }
.kc-stat:nth-child(2) { animation-delay: 70ms; }
.kc-stat:nth-child(3) { animation-delay: 140ms; }
.kc-stat:nth-child(4) { animation-delay: 210ms; }
.kc-stat__icoon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--kc-accent-soft); color: var(--kc-accent-strong);
  display: flex; align-items: center; justify-content: center;
}
.kc-stat__waarde { font-size: var(--kc-type-h1); font-weight: 700; color: var(--kc-ink); line-height: 1.05; letter-spacing: -0.02em; }
.kc-stat__label { font-size: var(--kc-type-sm); color: var(--kc-ink-muted); font-weight: 600; letter-spacing: 0.02em; }
.kc-stat--attentie::before { background: linear-gradient(90deg, var(--kc-warn), var(--kc-warn-bg)); }
.kc-stat--attentie .kc-stat__icoon { background: var(--kc-warn-bg); color: var(--kc-warn); }
.kc-stat--attentie .kc-stat__waarde { color: var(--kc-warn); }

/* Plan-keuze als radio-kaart binnen het profiel-formulier (instellingen,
   blueprint v0.15). BEWUST GEEN .kc-stat: die KPI-display-tegel draagt een
   gestaggerde entry-animatie (kc-in + animation-delay per nth-child + backwards
   fill); op een form-control liet dat de laatste kaart onzichtbaar bij eerste
   paint. Een interactieve control krijgt een eigen, animatieloze kaart-stijl.
   REGEL: hergebruik .kc-stat nooit voor klikbare controls. */
.kc-planoptie {
  position: relative;
  display: flex; flex-direction: column; gap: var(--kc-space-2);
  background: var(--kc-surface);
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-lg);
  padding: var(--kc-phi-4);
  box-shadow: var(--kc-shadow);
  cursor: pointer;
  transition: border-color var(--kc-t-fast) ease-out, box-shadow var(--kc-t-fast) ease-out;
}
.kc-planoptie__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.kc-planoptie__waarde { font-size: var(--kc-type-h1); font-weight: 700; color: var(--kc-ink); line-height: 1.05; letter-spacing: -0.02em; }
.kc-planoptie__naam { font-size: var(--kc-type-sm); color: var(--kc-ink-muted); font-weight: 600; letter-spacing: 0.02em; }
.kc-planoptie:hover { border-color: var(--kc-accent); }
.kc-planoptie:has(.kc-planoptie__radio:checked) {
  border-color: var(--kc-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kc-accent) 30%, transparent);
}
.kc-planoptie:has(.kc-planoptie__radio:focus-visible) { outline: 2px solid var(--kc-accent); outline-offset: 2px; }

/* Lichte staafgrafiek (blueprint v0.18): contactmomenten per week, zonder
   JS-chartbibliotheek; balk-hoogte als percentage van de drukste week. */
.kc-barchart {
  display: flex; align-items: stretch; gap: var(--kc-space-2);
  padding: var(--kc-space-5) 0 var(--kc-space-2);
}
.kc-barchart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--kc-space-1); }
.kc-barchart__track { position: relative; width: 100%; max-width: 56px; height: 150px; display: flex; align-items: flex-end; }
.kc-barchart__bar {
  position: relative; width: 100%; min-height: 3px;
  background: linear-gradient(180deg, var(--kc-accent), var(--kc-accent-strong));
  border-radius: var(--kc-radius-sm) var(--kc-radius-sm) 0 0;
}
.kc-barchart__val {
  position: absolute; top: -20px; left: 0; right: 0; text-align: center;
  font-size: var(--kc-type-xs); font-weight: 700; color: var(--kc-ink-muted);
}
.kc-barchart__lbl { font-size: var(--kc-type-xs); color: var(--kc-ink-muted); }

/* Account-menu rechtsboven (blueprint v0.15): uitloggen + schakelen naar beheer.
   <details>-gebaseerd zodat het zonder JS werkt. */
.kc-usermenu { position: relative; }
.kc-usermenu > summary { list-style: none; cursor: pointer; }
.kc-usermenu > summary::-webkit-details-marker { display: none; }
.kc-usermenu > summary::marker { content: ""; }
.kc-usermenu__paneel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
  min-width: 210px; background: var(--kc-surface);
  border: 1px solid var(--kc-line); border-radius: var(--kc-radius-lg);
  box-shadow: var(--kc-shadow-lg, var(--kc-shadow)); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.kc-usermenu__item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 10px; text-decoration: none;
  color: var(--kc-ink); font-size: var(--kc-type-sm); font-family: var(--kc-font); font-weight: 600;
}
.kc-usermenu__item:hover { background: var(--kc-accent-soft); color: var(--kc-accent-strong); }
.kc-usermenu__item--knop { border: 0; background: none; cursor: pointer; }
.kc-usermenu--beheer > summary .kc-ingelogd__label { color: var(--kc-warn); }

/* Mega-menu (admin, foundation 01 sectie 10.23 + visueel-eerst sectie 10).
   Eén trigger ("Menu") in de balk opent een breed, gecategoriseerd glas-paneel
   met de beheer-secties in kolommen (icoon + label + 1-regel-omschrijving).
   <details>-gebaseerd: werkt zonder JS (CSS-only open/dicht), net als kc-usermenu.
   kc-motion.js voegt Escape + klik-buiten-sluit toe als progressive enhancement.
   Het paneel positioneert vanaf de nav (niet vanaf de trigger) zodat het op
   desktop volle breedte kan nemen zonder de balk-layout te verstoren. */
.kc-mega { position: static; }
.kc-mega__trigger {
  display: inline-flex; align-items: center; gap: var(--kc-space-1);
  list-style: none; cursor: pointer; user-select: none;
}
.kc-mega__trigger::-webkit-details-marker { display: none; }
.kc-mega__trigger::marker { content: ""; }
.kc-mega > summary.actief,
.kc-mega[open] > .kc-mega__trigger { background: var(--kc-accent-soft); color: var(--kc-accent-strong); }
.kc-mega__caret { transition: transform var(--kc-t-fast) var(--kc-ease); flex: 0 0 auto; }
.kc-mega[open] .kc-mega__caret { transform: rotate(180deg); }
.kc-mega__paneel {
  position: absolute; left: var(--kc-space-4); right: var(--kc-space-4);
  top: calc(100% + 8px); z-index: 80;
  background: color-mix(in srgb, var(--kc-surface) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--kc-border); border-radius: var(--kc-radius-lg);
  box-shadow: 0 1px 0 var(--kc-glas-glans) inset, var(--kc-shadow-lg);
  padding: var(--kc-phi-4);
  animation: kc-in var(--kc-t-base) var(--kc-ease);
}
.kc-mega__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--kc-space-3) var(--kc-space-4);
}
.kc-mega__kolom { display: flex; flex-direction: column; gap: var(--kc-space-half); }
.kc-mega__kop {
  margin: 0 0 var(--kc-space-1) 0; padding: 0 var(--kc-phi-2);
  font-size: var(--kc-type-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--kc-ink-faint);
}
.kc-mega__item {
  display: flex; align-items: flex-start; gap: var(--kc-space-2);
  padding: var(--kc-phi-2); border-radius: var(--kc-radius);
  text-decoration: none; color: var(--kc-ink);
  transition: background var(--kc-t-fast) ease-out, transform var(--kc-t-fast) var(--kc-ease);
}
.kc-mega__item .kc-ico {
  flex: 0 0 auto; margin-top: 2px; color: var(--kc-accent);
  width: 20px; height: 20px;
}
.kc-mega__item:hover { background: var(--kc-accent-soft); transform: translateX(2px); }
.kc-mega__item:focus-visible { outline: 2px solid var(--kc-accent); outline-offset: 2px; }
.kc-mega__item.actief { background: var(--kc-accent-soft); }
.kc-mega__item.actief .kc-mega__label { color: var(--kc-accent-strong); }
.kc-mega__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kc-mega__label {
  font-size: var(--kc-type-sm); font-weight: 600; color: var(--kc-ink);
  display: inline-flex; align-items: center; gap: var(--kc-space-1);
}
.kc-mega__item:hover .kc-mega__label { color: var(--kc-accent-strong); }
.kc-mega__sub { font-size: var(--kc-type-xs); color: var(--kc-ink-muted); line-height: 1.35; }

/* Support-modus-balk (blueprint v0.15): zichtbaar zodra een beheerder de
   praktijk-app bekijkt, naar een beproefd klantportaal-model. */
.kc-supportbalk {
  display: flex; align-items: center; gap: var(--kc-space-2); flex-wrap: wrap;
  padding: var(--kc-space-2) var(--kc-space-4);
  background: var(--kc-warn-bg); border-bottom: 1px solid var(--kc-warn);
  color: var(--kc-ink); font-size: var(--kc-type-sm);
}
.kc-supportbalk__badge {
  background: var(--kc-warn); color: var(--kc-surface);
  font-size: var(--kc-type-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; border-radius: 999px; padding: 3px 11px;
}
.kc-supportbalk__tekst { flex: 1 1 auto; }
.kc-supportbalk__terug {
  font-weight: 600; text-decoration: none; color: var(--kc-accent-strong);
  border: 1px solid var(--kc-line); border-radius: 10px; padding: 5px 14px; background: var(--kc-surface);
}
.kc-supportbalk__terug:hover { border-color: var(--kc-accent); }

/* ---- Review-tabs (geen lange scroll-formulieren) ---- */
.kc-paneltabs { display: flex; gap: var(--kc-space-1); flex-wrap: wrap; margin-bottom: var(--kc-space-3); }
.kc-paneltab {
  font-family: var(--kc-font); font-size: var(--kc-type-sm); font-weight: 600;
  color: var(--kc-ink-muted); background: var(--kc-surface); border: 1px solid var(--kc-line);
  border-radius: 999px; padding: var(--kc-space-1) var(--kc-space-2); min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center;
  transition: all var(--kc-t-fast) ease-out;
}
.kc-paneltab.actief { background: var(--kc-accent); border-color: var(--kc-accent); color: var(--kc-surface); }
.kc-paneltab:not(.actief):hover { background: var(--kc-accent-soft); color: var(--kc-accent-strong); }
.kc-panelpane { display: none; }
.kc-panelpane.actief { display: block; animation: kc-in 280ms var(--kc-ease); }

/* Paneel-kop met een actie rechtsboven (pop-up-regel, foundation 10.11): de
   "toevoegen"-knop staat naast de titel, nooit als losse menu-tab. */
.kc-panelkop {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--kc-space-2); flex-wrap: wrap; margin-bottom: var(--kc-space-3);
}

/* Klinische metingen (outcome-tracking): kaart per meettype met baseline ->
   laatste, richting-bewuste delta en een mini-trend. Hergebruikt .kc-herstel__*
   en .kc-barchart. Grid volgt het kaart-aantal (geen wees-kaart, foundation
   10.9): auto-fill met een ruime minimum. */
.kc-meetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--kc-space-3); }
.kc-meetkaart { margin-bottom: 0; }
.kc-meetkaart__kop { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-space-1); margin-bottom: var(--kc-space-1); }
.kc-meetkaart__naam { font-weight: 700; color: var(--kc-ink); min-width: 0; overflow-wrap: anywhere; }
/* Zijde-badge in de meetkaart-kop: maakt links/rechts zichtbaar zodat een
   zijde-relevante maat nooit als een gemengde reeks wordt gelezen (QA MAJOR-1). */
.kc-meetkaart__zijde {
  display: inline-block; font-size: var(--kc-type-xs); font-weight: 700;
  color: var(--kc-accent-strong); background: var(--kc-accent-soft);
  border-radius: var(--kc-radius-sm); padding: 1px var(--kc-space-1); margin-left: var(--kc-space-half);
}
/* Compactere variant van de staafgrafiek in een meetkaart (minder top-padding,
   lagere balken) zodat meerdere kaarten naast elkaar passen. */
.kc-barchart--mini { padding: var(--kc-space-4) 0 var(--kc-space-1); gap: var(--kc-space-1); }
.kc-barchart--mini .kc-barchart__track { height: 88px; max-width: 40px; }

/* Baseline-CTA (eerste bezoek vindbaar maken): zachte aandacht-hint die naar
   de eerste meting leidt. Goud = de actie die nu aandacht vraagt. */
.kc-meet-hint {
  display: flex; gap: var(--kc-space-2); align-items: flex-start;
  padding: var(--kc-space-2) var(--kc-space-3); margin-bottom: var(--kc-space-3);
  border: 1px solid var(--kc-cta); background: var(--kc-cta-soft);
  border-radius: var(--kc-radius); color: var(--kc-ink);
}
.kc-meet-hint > span { color: var(--kc-cta-strong); flex: 0 0 auto; line-height: 1; }

/* Eenheid-pil naast het waarde-label in de meting-modal. */
.kc-meet-eenheid {
  display: inline-block; font-size: var(--kc-type-xs); font-weight: 700;
  color: var(--kc-accent-strong); background: var(--kc-accent-soft);
  border-radius: var(--kc-radius-sm); padding: 1px var(--kc-space-1); margin-left: var(--kc-space-half);
}

/* Tik-keuze (foundation 10.7/10.13: snelle, mobiel-vriendelijke invoer i.p.v.
   sleepbalken of dropdowns). Knoppen van minstens 44px, actieve staat in
   accent. Kolom-stapeling als keuzelijst, --rij voor compacte segmenten. */
.kc-tikkeuze { display: flex; flex-direction: column; gap: var(--kc-space-1); }
.kc-tikkeuze--rij { flex-direction: row; flex-wrap: wrap; }
.kc-tikkeuze__knop {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--kc-space-half);
  min-height: 44px; padding: var(--kc-space-1) var(--kc-space-2); text-align: left;
  font-family: var(--kc-font); font-size: var(--kc-type-sm); font-weight: 600;
  color: var(--kc-ink); background: var(--kc-surface);
  border: 1px solid var(--kc-line); border-radius: var(--kc-radius);
  cursor: pointer; transition: all var(--kc-t-fast) var(--kc-ease); width: 100%;
}
.kc-tikkeuze--rij .kc-tikkeuze__knop { flex-direction: row; align-items: center; width: auto; justify-content: center; }
.kc-tikkeuze__knop:hover { border-color: var(--kc-accent); background: var(--kc-accent-soft); }
.kc-tikkeuze__knop.actief { border-color: var(--kc-accent); background: var(--kc-accent-soft); color: var(--kc-accent-strong); }
.kc-tikkeuze__knop.actief:active { transform: scale(0.98); }
.kc-tikkeuze__naam { display: inline-flex; align-items: center; gap: var(--kc-space-half); font-weight: 700; }
.kc-tikkeuze__meta { font-size: var(--kc-type-xs); font-weight: 500; color: var(--kc-ink-muted); }
.kc-tikkeuze__knop.actief .kc-tikkeuze__meta { color: var(--kc-accent-strong); }

/* Stepper: number-veld met +/- tik-knoppen (44px) voor snelle waarde-invoer. */
.kc-stepper { display: flex; align-items: stretch; gap: var(--kc-space-1); }
.kc-stepper__knop {
  flex: 0 0 auto; width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--kc-accent-strong); background: var(--kc-surface);
  border: 1px solid var(--kc-border); border-radius: var(--kc-radius-sm);
  cursor: pointer; transition: all var(--kc-t-fast) var(--kc-ease);
}
.kc-stepper__knop:hover { border-color: var(--kc-accent); background: var(--kc-accent-soft); }
.kc-stepper__knop:active { transform: scale(0.95); }
.kc-stepper__veld { flex: 1 1 auto; min-height: 44px; text-align: center; font-size: var(--kc-type-lead); font-weight: 700; }

/* Generieke kaart met kaart-grammatica (foundation 5.3) voor bibliotheek e.d. */
.kc-kaartgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--kc-space-3); }
.kc-kaart {
  position: relative; overflow: hidden;
  background: var(--kc-surface); border: 1px solid var(--kc-line); border-radius: var(--kc-radius-lg);
  padding: var(--kc-phi-4); box-shadow: var(--kc-shadow);
  display: flex; flex-direction: column; gap: var(--kc-space-2);
  transition: transform var(--kc-t-fast) var(--kc-ease), box-shadow var(--kc-t-fast) ease-out;
}
.kc-kaart::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--kc-accent), var(--kc-accent-soft));
  opacity: 0.55; transition: opacity var(--kc-t-fast) ease-out;
}
.kc-kaart:hover { transform: translateY(-3px); box-shadow: var(--kc-shadow-lg); }
.kc-kaart:hover::before { opacity: 1; }
.kc-kaart__naam { font-size: var(--kc-type-lead); font-weight: 700; }
.kc-kaart__meta {
  font-size: var(--kc-type-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--kc-accent-strong); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Doel-tekst geklemd op 2 regels: kaarten in een grid blijven gelijk van
   hoogte en lopen nooit over (UI-pass v0.11). */
.kc-kaart__doel {
  font-size: var(--kc-type-sm); color: var(--kc-ink-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kc-chiprij { display: flex; flex-wrap: wrap; gap: var(--kc-space-half); }
.kc-chip {
  font-size: var(--kc-type-xs); font-weight: 600; color: var(--kc-accent-strong);
  background: var(--kc-accent-soft); border-radius: 999px; padding: 2px var(--kc-space-1);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Link-chips (naar evidence/detail) onderscheiden zich van info-chips:
   outline in plaats van vlak, met hover (UI-pass v0.11: twee chip-rijen op
   een kaart mogen niet identiek ogen). */
a.kc-chip--link {
  background: var(--kc-surface); border: 1px solid var(--kc-accent);
  text-decoration: none; transition: all var(--kc-t-fast) ease-out;
}
a.kc-chip--link:hover { background: var(--kc-accent); color: var(--kc-surface); }
/* Volledige doel-tekst op detail-pagina's (geen clamp): de 2-regel-klem is
   voor grid-kaarten, niet voor het werkblad (QA v0.11, M3). */
.kc-kaart__doel--vol { display: block; overflow: visible; -webkit-line-clamp: none; }
/* Mini-cards in 1 kolom (smalle werkblad-zijbalk). */
.kc-statrij--kolom { grid-template-columns: 1fr; }
.kc-sterknop {
  background: none; border: 0; cursor: pointer; padding: var(--kc-space-half);
  min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center;
}
.kc-sterknop svg { fill: var(--kc-line); stroke: var(--kc-ink-faint); stroke-width: 1; transition: all var(--kc-t-fast) ease-out; }
.kc-sterknop:hover svg { transform: scale(1.2); }
.kc-sterknop.actief svg { fill: var(--kc-warn); stroke: var(--kc-warn); }

/* KPI's als mini-cards binnen een kaart (founder v0.11): compacte tegels
   met de waarde voorop en een klein, ingetogen label; geen grote subtekst
   die met de kaart-inhoud concurreert. */
.kc-statrij { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--kc-space-1); margin-top: auto; }
.kc-statrij__item {
  background: var(--kc-bg); border: 1px solid var(--kc-line); border-radius: var(--kc-radius-sm);
  padding: var(--kc-space-1) var(--kc-space-2);
  font-size: var(--kc-type-xs); color: var(--kc-ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kc-statrij__item strong { color: var(--kc-ink); font-size: var(--kc-type-base); display: block; }
/* Drie-koloms variant voor de terugkeer-ROI-strip (blueprint v0.24); collapst
   netjes naar 1 kolom op smal scherm. */
.kc-statrij--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .kc-statrij--3 { grid-template-columns: 1fr; } }

/* ---- Het brein, visualisatie (blueprint v0.25) ----------------------------
   Zintuigen -> nachtelijke reflectie -> core memory -> de mens. Licht-
   geanimeerd; de guardrail (bevroren hefbomen + autonomie-trede) staat er
   letterlijk op, zodat de visual nooit autonomie suggereert die er niet is. */
.kc-brein-viz {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 90% at 62% 12%, color-mix(in srgb, var(--kc-accent) 9%, transparent), transparent 70%),
    var(--kc-surface);
  border: 1px solid var(--kc-line); border-radius: var(--kc-radius);
  padding: var(--kc-space-3); margin-bottom: var(--kc-space-3);
  box-shadow: var(--kc-shadow-lg);
}
.kc-brein-viz__kop { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--kc-space-1); margin-bottom: var(--kc-space-3); }
.kc-brein-viz__titel { font-weight: 700; color: var(--kc-accent-strong); }
.kc-brein-stroom { display: flex; align-items: center; gap: var(--kc-space-1); flex-wrap: wrap; justify-content: center; }
.kc-brein-kolom { display: flex; flex-direction: column; gap: var(--kc-space-1); min-width: 0; }
.kc-brein-kolomlabel { font-size: var(--kc-type-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--kc-ink-faint); text-align: center; margin-bottom: 2px; }

/* Zintuig-knopjes: lichten op zodra ze data dragen */
.kc-brein-node {
  display: flex; align-items: center; gap: var(--kc-space-1);
  background: var(--kc-bg); border: 1px solid var(--kc-line);
  border-radius: 999px; padding: 4px var(--kc-space-2);
  font-size: var(--kc-type-sm); color: var(--kc-ink-muted); white-space: nowrap;
}
.kc-brein-node__telling { margin-left: auto; font-weight: 700; color: var(--kc-ink); font-variant-numeric: tabular-nums; }
.kc-brein-node--actief { color: var(--kc-ink); border-color: color-mix(in srgb, var(--kc-accent) 45%, var(--kc-line)); background: var(--kc-accent-soft); }
.kc-brein-node--stil { opacity: 0.55; }

/* Reflectie-node */
.kc-brein-stap {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  background: var(--kc-surface); border: 1px dashed color-mix(in srgb, var(--kc-accent) 50%, var(--kc-line));
  border-radius: var(--kc-radius); padding: var(--kc-space-2); min-width: 116px;
}
.kc-brein-stap__icoon { color: var(--kc-accent); animation: kc-brein-spin 14s linear infinite; }
.kc-brein-stap__naam { font-weight: 700; font-size: var(--kc-type-sm); }
.kc-brein-stap__sub { font-size: var(--kc-type-xs); color: var(--kc-ink-faint); }

/* De core: het geheugen, met zachte puls */
.kc-brein-core {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--kc-accent) 22%, var(--kc-surface)), var(--kc-surface) 72%);
  border: 2px solid color-mix(in srgb, var(--kc-accent) 55%, var(--kc-line));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--kc-accent) 40%, transparent);
  animation: kc-brein-puls 3.4s ease-in-out infinite;
}
.kc-brein-core__getal { font-size: var(--kc-type-h2); font-weight: 800; color: var(--kc-accent-strong); line-height: 1; font-variant-numeric: tabular-nums; }
.kc-brein-core__label { font-size: var(--kc-type-xs); color: var(--kc-ink-muted); margin-top: 2px; }

/* Uitgang-nodes: informatief (teal, naar de kine) en klinisch (coral, vennoot) */
.kc-brein-uit {
  display: flex; align-items: center; gap: var(--kc-space-1);
  border-radius: var(--kc-radius); padding: var(--kc-space-1) var(--kc-space-2);
  font-size: var(--kc-type-sm); font-weight: 600; min-width: 150px;
}
.kc-brein-uit--kine { background: var(--kc-accent-soft); color: var(--kc-accent-strong); border: 1px solid color-mix(in srgb, var(--kc-accent) 35%, var(--kc-line)); }
.kc-brein-uit--vennoot { background: var(--kc-cta-soft); color: var(--kc-cta-strong); border: 1px solid var(--kc-cta); }
.kc-brein-uit__telling { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Stroom-pijl met vloeiende stippen die naar rechts bewegen */
.kc-brein-pijl { position: relative; flex: 0 0 44px; height: 2px; background: var(--kc-line); align-self: center; }
.kc-brein-pijl::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--kc-accent) 70%, transparent) 0 6px, transparent 6px 14px);
  background-size: 28px 100%; animation: kc-brein-vloei 1.1s linear infinite;
}
.kc-brein-pijl::after {
  content: ""; position: absolute; right: -2px; top: -3px;
  border-left: 7px solid color-mix(in srgb, var(--kc-accent) 70%, transparent);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}

/* Bevroren hefbomen: de machine raakt dit nooit */
.kc-brein-bevroren {
  display: flex; align-items: center; gap: var(--kc-space-2); flex-wrap: wrap;
  margin-top: var(--kc-space-3); padding-top: var(--kc-space-2);
  border-top: 1px dashed var(--kc-line);
}
.kc-brein-slot {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--kc-bg); border: 1px solid var(--kc-line); border-radius: 999px;
  padding: 3px var(--kc-space-2); font-size: var(--kc-type-xs); color: var(--kc-ink-muted);
}
.kc-brein-slot svg { color: var(--kc-ink-faint); }

/* Autonomie-ladder: trede 0 brandt, 1-4 vergrendeld */
.kc-brein-ladder { display: flex; gap: var(--kc-space-1); margin-top: var(--kc-space-2); flex-wrap: wrap; }
.kc-brein-trede {
  flex: 1 1 0; min-width: 92px; text-align: center;
  border: 1px solid var(--kc-line); border-radius: var(--kc-radius-sm);
  padding: var(--kc-space-1); font-size: var(--kc-type-xs); color: var(--kc-ink-faint); background: var(--kc-bg);
}
.kc-brein-trede strong { display: block; font-size: var(--kc-type-sm); color: var(--kc-ink-muted); }
.kc-brein-trede--actief { border-color: var(--kc-accent); background: var(--kc-accent-soft); color: var(--kc-accent-strong); }
.kc-brein-trede--actief strong { color: var(--kc-accent-strong); }

@keyframes kc-brein-puls {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kc-accent) 32%, transparent); }
  50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--kc-accent) 0%, transparent); }
}
@keyframes kc-brein-vloei { to { background-position: 28px 0; } }
@keyframes kc-brein-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kc-brein-core, .kc-brein-stap__icoon, .kc-brein-pijl::before { animation: none; }
}
@media (max-width: 720px) {
  .kc-brein-stroom { flex-direction: column; }
  .kc-brein-pijl { width: 2px; height: 24px; flex-basis: 24px; }
  .kc-brein-pijl::before { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--kc-accent) 70%, transparent) 0 6px, transparent 6px 14px); background-size: 100% 28px; animation: kc-brein-vloei-v 1.1s linear infinite; }
  .kc-brein-pijl::after { right: -3px; top: auto; bottom: -2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid color-mix(in srgb, var(--kc-accent) 70%, transparent); border-bottom: 0; }
}
@keyframes kc-brein-vloei-v { to { background-position: 0 28px; } }

/* ---- Datamodel-overzicht (foundation 7quinquies) ------------------------- */
.kc-dm-ok { display: flex; align-items: center; gap: var(--kc-space-1); color: var(--kc-success);
  border-color: color-mix(in srgb, var(--kc-success) 40%, var(--kc-line)); background: var(--kc-success-bg); font-weight: 600; }
.kc-dm-debt { border-color: color-mix(in srgb, var(--kc-warn) 45%, var(--kc-line)); background: var(--kc-warn-bg); }
.kc-dm-debt .kc-card__title { color: var(--kc-ink); }
.kc-dm-legende { display: flex; flex-wrap: wrap; gap: var(--kc-space-3); font-size: var(--kc-type-sm);
  color: var(--kc-ink-muted); margin-bottom: var(--kc-space-2); }
.kc-dm-legende span { display: inline-flex; align-items: center; gap: 6px; }
.kc-dm-swatch { width: 22px; height: 0; border-top-width: 3px; border-top-style: solid; display: inline-block; }
.kc-dm-swatch--fk { border-top-color: var(--kc-accent); }
.kc-dm-swatch--soft { border-top-style: dashed; border-top-color: var(--kc-ink-faint); }
.kc-dm-swatch--kennis { border-top-style: dashed; border-top-color: var(--kc-warn); }
.kc-dm-svg { display: block; min-width: 720px; }
.kc-dm-lijn--fk { stroke: var(--kc-accent); }
.kc-dm-lijn--soft { stroke: var(--kc-ink-faint); stroke-dasharray: 5 4; }
.kc-dm-lijn--kennis { stroke: var(--kc-warn); stroke-dasharray: 5 4; }
.kc-dm-box { fill: var(--kc-accent-soft); stroke: var(--kc-accent); stroke-width: 1.5; }
.kc-dm-box__t { text-anchor: middle; font-weight: 700; font-size: 14px; fill: var(--kc-accent-strong); }
.kc-dm-box__s { text-anchor: middle; font-size: 11px; fill: var(--kc-ink-muted); }
.kc-dm-kennis { fill: var(--kc-warn-bg); stroke: var(--kc-warn); stroke-width: 1.5; stroke-dasharray: 5 4; }
.kc-dm-kennis__t { text-anchor: middle; font-weight: 700; font-size: 13px; fill: var(--kc-ink); }
.kc-dm-orphan { fill: var(--kc-danger-bg); stroke: var(--kc-danger); stroke-width: 1.5; stroke-dasharray: 4 4; }
.kc-dm-orphan__t { text-anchor: middle; font-weight: 700; font-size: 12px; fill: var(--kc-danger); }
.kc-dm-verbonden { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kc-dm-orphan-rij { background: var(--kc-danger-bg); }
.kc-chip--fk { background: var(--kc-accent-soft); color: var(--kc-accent-strong); }
.kc-chip--soft { background: var(--kc-bg); color: var(--kc-ink-muted); border: 1px dashed var(--kc-border); }
.kc-chip--kennis { background: var(--kc-warn-bg); color: var(--kc-ink); }
.kc-chip--in { background: var(--kc-bg); color: var(--kc-ink-faint); }

.kc-tagrij { display: flex; flex-wrap: wrap; gap: var(--kc-space-1); }
.kc-tag {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--kc-border); border-radius: 999px;
  padding: var(--kc-space-1) var(--kc-space-2); font-size: var(--kc-type-sm); font-weight: 600;
  color: var(--kc-ink-muted); cursor: pointer; transition: all var(--kc-t-fast) ease-out;
}
.kc-tag input { margin: 0; }
.kc-tag:has(input:checked) { background: var(--kc-accent-soft); border-color: var(--kc-accent); color: var(--kc-accent-strong); }

@media (max-width: 720px) {
  .kc-page { padding: var(--kc-space-4) var(--kc-space-2); }
  .kc-grid-2, .kc-grid-3, .kc-grid-medewerker { grid-template-columns: 1fr; }
}

/* ---- Mobiel + tablet nav (foundation 01 sectie 10.23 + 10.23a) --------------
   De nav klapt samen tot een slide-in drawer zodra de (gecomprimeerde) volledige
   rij niet meer past. Eigen compositie, geen verschaalde desktop-rij.

   INVARIANT (founder, 2026-06-17): op ELKE breedte geldt OF (a) de volledige rij
   wordt getoond EN past volledig met nul horizontale overflow (gemeten met de
   clip-backstop UIT), OF (b) de hamburger/drawer wordt getoond. Er bestaat geen
   breedte waar een volledige rij overloopt en items wegclipt.

   Twee collapse-breakpoints, want de twee navs zijn intrinsiek verschillend
   breed (foundation 10.10, hercomponeren i.p.v. clippen). De desktop-rij is
   subtiel gecomprimeerd in de basis (kleinere gap + tightere link-padding, korte
   "Praktijk-app"-label) zodat de breakpoints op nette laptop-breedtes liggen:

   - kine-nav  (6 links + account + hulp + bel + CTA): gemeten fit-breedte van de
     gecomprimeerde rij = KINE_BP px. Collapse <= (KINE_BP - 1)px, full row erboven.
   - admin-nav (6 links + Geavanceerd + account + Praktijk-app + uitloggen):
     intrinsiek breder; gemeten fit-breedte = ADMIN_BP px. Collapse <= (ADMIN_BP - 1)px.

   Structuur die de invariant borgt: kine-nav toont de volledige desktop-rij
   vanaf KINE_BP (1080px), admin-nav vanaf ADMIN_BP (1260px); eronder de drawer.
   Gerealiseerd met twee blocks. (1) Een gedeelde COLLAPSE-block op
   `max-width: 1259px` (= ADMIN_BP - 1) zet BEIDE navs in de drawer-staat; de
   bredere admin-nav dicteert dit buitenste breakpoint. (2) Een kine-RESTORE-block
   op `min-width: 1080px and max-width: 1259px` draait ALLEEN de kine-nav volledig
   terug naar de desktop-rij (elke collapse-property expliciet hersteld), want die
   past al vanaf 1080px. In dat venster staat dus enkel de admin-nav in de drawer.
   Geen breedte met een overlopende rij, geen halve tussenstaat.

   Nul horizontale overflow aan de bron (10.23a): het gesloten paneel staat op
   `display: none` (uit de layout, geen breedte-bijdrage), niet off-screen via
   translateX. `overflow-x: clip` op html blijft enkel een onschuldige backstop;
   de scroll is ook zonder die regel 0 op elke breedte. */

/* Korte vs lange "Praktijk-app"-label (admin): in de desktop-rij het korte
   label, in de drawer het volledige label. Default = desktop (kort). */
.kc-nav__praktijk-lang { display: none; }

/* BREAKPOINTS (empirisch gemeten, clip-backstop UIT, 2026-06-17):
   - kine gecomprimeerde rij past vanaf 1065px  -> KINE_BP = 1080 (veiligheidsmarge).
   - admin gecomprimeerde rij past vanaf 1245px -> ADMIN_BP = 1260 (veiligheidsmarge).
   Realisatie zonder duplicatie en zonder overlopende tussenstaat:
   1. Een COLLAPSE-block op `max-width: 1259px` (= ADMIN_BP - 1) zet BEIDE navs in
      de drawer-staat (de bredere van de twee dicteert het buitenste breakpoint).
   2. Een RESTORE-block op `min-width: 1080px and max-width: 1259px` draait ALLEEN
      de kine-nav volledig terug naar de desktop-rij, want die past al vanaf
      1080px. Elke property die de collapse zette wordt expliciet teruggezet, zodat
      er geen halve tussenstaat is.
   Resultaat: kine = drawer onder 1080px, desktop-rij erboven (fit gemeten 1065);
   admin = drawer onder 1260px, desktop-rij erboven (fit gemeten 1245). Geen
   breedte met een overlopende rij; de invariant geldt op elke breedte. */

/* 1. COLLAPSE (beide navs) tot net onder het admin-breakpoint (1260px). */
@media (max-width: 1259px) {
  .kc-nav__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    order: 9; width: 44px; height: 44px; padding: 11px; cursor: pointer;
    border: 1px solid var(--kc-line); border-radius: var(--kc-radius-sm);
    background: var(--kc-surface); flex: 0 0 auto;
  }
  .kc-nav__burger span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--kc-ink); transition: transform var(--kc-t-fast) var(--kc-ease), opacity var(--kc-t-fast) ease-out;
  }
  /* Gesloten paneel = display:none: uit de layout, dus geen breedte-bijdrage. */
  .kc-nav__menu {
    display: none;
    flex-direction: column; align-items: stretch; gap: var(--kc-space-1);
    position: fixed; top: 0; right: 0; z-index: 90;
    width: min(82vw, 320px); height: 100dvh; overflow-y: auto;
    padding: calc(var(--kc-space-6) + var(--kc-space-2)) var(--kc-space-3) var(--kc-space-4);
    background: var(--kc-surface);
    border-left: 1px solid var(--kc-border);
    box-shadow: var(--kc-shadow-lg);
  }
  .kc-nav__check:checked ~ .kc-nav__menu {
    display: flex;
    animation: kc-nav-in var(--kc-t-base) var(--kc-ease);
  }
  .kc-nav__check:checked ~ .kc-nav__overlay {
    display: block; position: fixed; inset: 0; z-index: 85;
    background: color-mix(in srgb, var(--kc-bg) 60%, transparent);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    animation: kc-fade var(--kc-t-fast) ease-out;
  }
  .kc-nav__check:checked ~ .kc-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .kc-nav__check:checked ~ .kc-nav__burger span:nth-child(2) { opacity: 0; }
  .kc-nav__check:checked ~ .kc-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .kc-nav { gap: var(--kc-space-2); padding: var(--kc-space-2) var(--kc-space-3); }
  .kc-nav__brand { margin-right: auto; }   /* duwt bel + CTA naar rechts */
  /* In het paneel: links worden volwaardige tik-rijen (44px) op een kolom. */
  .kc-nav .kc-nav__menu .kc-nav__link {
    display: flex; align-items: center; width: 100%; min-height: 44px;
    font-size: var(--kc-type-base); padding: var(--kc-space-1) var(--kc-space-2);
  }
  .kc-nav__menu .kc-nav__spacer { display: none; }
  .kc-nav__menu .kc-usermenu { width: 100%; }
  .kc-nav__menu .kc-usermenu > summary,
  .kc-nav__menu .kc-ingelogd { width: 100%; align-items: flex-start; }
  .kc-nav__menu .kc-usermenu__paneel {
    position: static; min-width: 0; width: 100%; box-shadow: none;
    border-color: var(--kc-line); margin-top: var(--kc-space-1);
  }
  .kc-nav--admin .kc-ingelogd { align-items: flex-start; }
  /* Uitloggen + account direct bereikbaar in het open paneel (MINOR-3). */
  .kc-nav__menu .kc-usermenu__paneel { display: block; }
  /* Grootvader-test (UI_GUIDELINES 4.3): elke interactieve rij in het open
     account-paneel (Profiel/Beheer/Observaties/Uitloggen) is een volwaardig
     44px tik-doel; de desktop-styling op regel ~720 (padding:9px 12px) blijft
     onaangeroerd, dit geldt enkel binnen de drawer-scope. */
  .kc-nav__menu .kc-usermenu__item {
    display: flex; align-items: center; min-height: 44px;
    padding: var(--kc-phi-2) var(--kc-space-1);
  }
  .kc-nav__menu .kc-usermenu > summary { pointer-events: none; }
  .kc-nav__menu .kc-usermenu > summary::-webkit-details-marker { display: none; }
  .kc-nav__menu .kc-nav__logout { width: 100%; margin-top: var(--kc-space-1); }
  .kc-nav__menu .kc-nav__logout .kc-btn { width: 100%; justify-content: center; }
  /* In de drawer het volledige "Naar de praktijk-app"-label tonen. */
  .kc-nav__praktijk-kort { display: none; }
  .kc-nav__praktijk-lang { display: inline; }

  /* Mega-menu in de drawer: geen zwevend breed paneel maar een nette accordion
     (foundation 01 sectie 10.23, "vouwt netjes samen"). Het paneel stroomt in de
     drawer-kolom (position: static), de kolommen stapelen tot een enkele kolom,
     geen horizontale scroll. De summary blijft een 44px tik-rij die de accordion
     opent/sluit. */
  .kc-nav__menu .kc-mega { width: 100%; }
  .kc-nav__menu .kc-mega__trigger {
    width: 100%; min-height: 44px; justify-content: flex-start;
    font-size: var(--kc-type-base); padding: var(--kc-space-1) var(--kc-space-2);
  }
  .kc-nav__menu .kc-mega__trigger .kc-mega__caret { margin-left: auto; }
  .kc-nav__menu .kc-mega__paneel {
    position: static; inset: auto; width: 100%;
    padding: var(--kc-space-1) 0 var(--kc-space-1) var(--kc-space-2);
    border: 0; border-left: 1px solid var(--kc-line); border-radius: 0;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    background: none; margin-top: var(--kc-space-1);
  }
  .kc-nav__menu .kc-mega__grid { grid-template-columns: 1fr; gap: var(--kc-space-2); }
  .kc-nav__menu .kc-mega__item { min-height: 44px; padding: var(--kc-phi-2) var(--kc-space-1); }
  .kc-nav__menu .kc-mega__kop { padding-left: var(--kc-space-1); }
}

/* Slide-in entree voor het mobiele/tablet nav-paneel. Speelt bij het tonen
   (display: none -> flex). Het gesloten paneel is display:none, dus dit
   veroorzaakt geen horizontale overflow. */
@keyframes kc-nav-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* 2. RESTORE alleen de kine-nav naar de desktop-rij vanaf het kine-breakpoint.
   De kine-rij past al vanaf 1065px (KINE_BP = 1080); in [1080px, 1259px] draait
   deze block de collapse volledig terug zodat enkel de admin-nav daar nog in de
   drawer staat. Elke property uit het collapse-block wordt expliciet voor de
   kine-nav hersteld, zodat er geen halve tussenstaat ontstaat. */
@media (min-width: 1080px) and (max-width: 1259px) {
  .kc-nav:not(.kc-nav--admin) { gap: var(--kc-space-2); padding: var(--kc-space-3) var(--kc-space-4); }
  .kc-nav:not(.kc-nav--admin) .kc-nav__brand { margin-right: 0; }
  .kc-nav:not(.kc-nav--admin) .kc-nav__burger,
  .kc-nav:not(.kc-nav--admin) .kc-nav__overlay { display: none; }
  .kc-nav:not(.kc-nav--admin) .kc-nav__menu { display: contents; animation: none; }
  .kc-nav:not(.kc-nav--admin) .kc-nav__menu .kc-nav__link {
    display: inline-flex; width: auto; min-height: 0;
    font-size: var(--kc-type-sm); padding: var(--kc-space-1) var(--kc-phi-2);
  }
  .kc-nav:not(.kc-nav--admin) .kc-nav__menu .kc-nav__spacer { display: block; }
  .kc-nav:not(.kc-nav--admin) .kc-nav__menu .kc-usermenu { width: auto; }
  .kc-nav:not(.kc-nav--admin) .kc-nav__menu .kc-usermenu > summary,
  .kc-nav:not(.kc-nav--admin) .kc-nav__menu .kc-ingelogd { width: auto; align-items: flex-end; }
  .kc-nav:not(.kc-nav--admin) .kc-nav__menu .kc-usermenu > summary { pointer-events: auto; }
  .kc-nav:not(.kc-nav--admin) .kc-nav__menu .kc-usermenu__paneel {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px;
    width: auto; box-shadow: var(--kc-shadow-lg, var(--kc-shadow));
    border-color: var(--kc-line); margin-top: 0;
    display: flex;
  }
  /* Account-rijen terug naar desktop-dropdown-styling (regel ~720) in de
     herstelde kine-rij; het 44px-tik-doel geldt enkel in de echte drawer. */
  .kc-nav:not(.kc-nav--admin) .kc-nav__menu .kc-usermenu__item {
    display: block; min-height: 0; padding: 9px 12px;
  }
  .kc-nav:not(.kc-nav--admin) .kc-nav__menu .kc-usermenu:not([open]) .kc-usermenu__paneel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* iteration-count 1 is essentieel: infinite-alternate animaties (sfeer-
     blobs, zweef-deco) zouden met alleen een korte duur eeuwig flikkeren
     in plaats van stil te staan (QA v0.11, M1). */
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
  }
}

/* ============================================================
   Idle / ambient motion (founder 2026-06-15): "alive when idle". Subtiele,
   trage, perpetuele beweging op STILSTAANDE items, niet enkel bij hover of
   scroll. GPU-vriendelijk (transform/opacity/filter), traag en laag-amplitude
   (doordacht, geen afleiding). Volledig uit onder prefers-reduced-motion via
   de globale * !important regel hierboven.
   ============================================================ */

/* 1. De bewegende achtergrond leeft nu in de globale .kc-aurora-laag (onderaan
   dit bestand); body::before blijft enkel een statische basis-tint zodat de
   achtergrond niet dubbel beweegt. */

/* 2. Glas-KPI-tegels: een trage licht-glint sweept periodiek over de tegel,
   gestaggerd zodat de rij golft. Laag-opaak, leesbaarheid blijft intact. */
/* (.kc-stat heeft al position:relative + overflow:hidden in zijn basis-blok;
   die overflow clipt ook deze glint-sweep.) */
.kc-stat::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent, color-mix(in srgb, white 13%, transparent), transparent);
  transform: translateX(-180%);
  animation: kc-sheen 9s ease-in-out infinite;
}
.kc-stat:nth-child(2)::after { animation-delay: 1.6s; }
.kc-stat:nth-child(3)::after { animation-delay: 3.2s; }
.kc-stat:nth-child(4)::after { animation-delay: 4.8s; }
.kc-stat:nth-child(5)::after { animation-delay: 6.4s; }
@keyframes kc-sheen {
  0%, 72% { transform: translateX(-180%); }
  100% { transform: translateX(320%); }
}

/* 3. Accent-iconen in de tegels ademen zacht. */
.kc-stat__icoon { animation: kc-breathe 6s ease-in-out infinite; }
@keyframes kc-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.09); }
}

/* 4. De aandacht-CTA (goud) nodigt uit met een trage gloed-puls. */
.kc-btn--cta { animation: kc-glow-cta 3.8s ease-in-out infinite; }
@keyframes kc-glow-cta {
  0%, 100% { box-shadow: 0 6px 18px color-mix(in srgb, var(--kc-cta) 24%, transparent); }
  50% { box-shadow: 0 10px 28px color-mix(in srgb, var(--kc-cta) 50%, transparent); }
}

/* 5. Aandacht-items pulseren zacht: nav-badges, attentie-tegels, nieuwe
   meldingen. Trekt het oog zonder te schreeuwen. */
.kc-navbadge { animation: kc-pulse-ring 2.6s ease-out infinite; }
@keyframes kc-pulse-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kc-cta) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--kc-cta) 0%, transparent); }
}
.kc-stat--attentie { animation: kc-attentie 3s ease-in-out infinite; }
@keyframes kc-attentie {
  0%, 100% { border-color: var(--kc-line); }
  50% { border-color: color-mix(in srgb, var(--kc-warn) 65%, var(--kc-line)); }
}
.kc-meldblok--nieuw { animation: kc-rand-puls 3.2s ease-in-out infinite; }
@keyframes kc-rand-puls {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--kc-accent) 20%, transparent); }
}

/* 6. Merknaam-shimmer: een trage teal -> goud -> teal sweep over "Care". */
.kc-nav__brand span {
  background: linear-gradient(90deg, var(--kc-accent) 0%, var(--kc-cta) 50%, var(--kc-accent) 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: kc-shimmer 6.5s linear infinite;
}
@keyframes kc-shimmer { to { background-position: 200% center; } }

/* 7. Activiteiten-stip op de home pulseert zacht (levend gevoel). */
.kc-activiteit__stip { animation: kc-stip 2.8s ease-in-out infinite; }
@keyframes kc-stip {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.35); opacity: 1; }
}

/* ============================================================
   Spectaculaire interactie-laag (founder 2026-06-15: "meer animaties").
   kc-motion.js zet body.kc-anim-ready + de tilt/reveal-variabelen; zonder JS
   of onder prefers-reduced-motion blijft alles zichtbaar en stil.
   ============================================================ */

/* Entree-choreografie: kaarten assembleren gestaggerd zodra ze in beeld komen.
   Gebruikt de 'translate'-property (los van 'transform' zodat de tilt niet
   botst). */
.kc-anim-ready .kc-card { opacity: 0; translate: 0 24px; will-change: opacity, translate; }
.kc-anim-ready .kc-card.kc-zichtbaar { opacity: 1; translate: 0 0;
  transition: opacity 640ms var(--kc-ease), translate 640ms var(--kc-ease); }
/* De zij/tools-kaarten schuiven NIET in (geen transitie naar boven): ze staan
   meteen op hun plek; de enige animatie zit op de hover-rand (founder 2026-06-22). */
.kc-anim-ready .kc-werkblad__zij .kc-card,
.kc-anim-ready .kc-werkblad__tools .kc-card { opacity: 1; translate: 0 0; will-change: auto; }

/* Magnetische 3D-tilt op tegels en hero (cursor-gestuurd via JS-variabelen). */
.kc-anim-ready .kc-stat, .kc-anim-ready .kc-hero {
  transform: perspective(900px) rotateX(var(--kc-tilt-x, 0deg)) rotateY(var(--kc-tilt-y, 0deg));
  transition: transform 260ms var(--kc-ease), box-shadow 260ms var(--kc-ease);
}

/* Hover-lift + accent-gloed op kaarten en tegels. */
.kc-card { transition: transform 240ms var(--kc-ease), box-shadow 240ms var(--kc-ease), border-color 240ms var(--kc-ease); }
.kc-card:hover { transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--kc-accent) 45%, var(--kc-line));
  box-shadow: 0 1px 0 var(--kc-glas-glans) inset, 0 26px 64px rgba(18, 34, 39, 0.12),
    0 0 0 1px color-mix(in srgb, var(--kc-accent) 20%, transparent); }
.kc-stat:hover { box-shadow: 0 1px 0 var(--kc-glas-glans) inset, var(--kc-shadow-lg),
  0 0 30px color-mix(in srgb, var(--kc-accent) 30%, transparent); }

/* Knoppen: een shine-sweep veegt over de vulling bij hover. */
.kc-btn--primary, .kc-btn--cta { position: relative; overflow: hidden; }
.kc-btn--primary::after, .kc-btn--cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-240%); pointer-events: none;
}
.kc-btn--primary:hover::after, .kc-btn--cta:hover::after { animation: kc-shine 720ms var(--kc-ease); }
@keyframes kc-shine { to { transform: translateX(360%); } }

/* Ademende accent-gloed rond de hero. */
@keyframes kc-hero-glow {
  0%, 100% { box-shadow: var(--kc-shadow-lg); }
  50% { box-shadow: var(--kc-shadow-lg), 0 0 44px color-mix(in srgb, var(--kc-accent) 24%, transparent); }
}

/* ============================================================
   Voltooiing / "juice" (founder 2026-06-15, foundation 01 sectie 10.22): elke
   handeling voelt af. Succes-bevestigingen veren in met een checkmark die zich
   tekent; keuzes, tabs en vinkjes geven een tactiele pop; knop-druk veert.
   Volledig uit onder prefers-reduced-motion via de globale * regel.
   ============================================================ */

/* Succes-bevestiging (de ?ok-alerts): veert in, de checkmark popt op. */
.kc-alert--info { animation: kc-voltooi 560ms var(--kc-ease); }
.kc-alert--info svg { animation: kc-check-pop 640ms var(--kc-ease) 140ms backwards; transform-origin: center; }
@keyframes kc-voltooi {
  0% { opacity: 0; transform: translateY(-8px) scale(0.97); }
  60% { transform: translateY(0) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kc-check-pop {
  0% { opacity: 0; transform: scale(0.3) rotate(-12deg); }
  55% { opacity: 1; transform: scale(1.25) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Tactiele selectie-pop: een keuze, tab of vinkje dat actief wordt veert even,
   zodat de actie voelbaar registreert. */
.kc-paneltab.actief { animation: kc-pop 360ms var(--kc-ease); }
.kc-tag:has(input:checked) { animation: kc-pop 320ms var(--kc-ease); }
input[type="checkbox"]:checked, input[type="radio"]:checked { animation: kc-pop 320ms var(--kc-ease); }
@keyframes kc-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* Knop-druk: een diepere indruk bezegelt de klik (veert terug via de transition). */
.kc-btn:active { transform: scale(0.95); }

/* Actieve gradient-rand bij hover (founder 2026-06-15): een teal-naar-goud beam
   draait rond de kaartrand. @property animeert de conische hoek vloeiend; zonder
   support toont de rand statisch (graceful). */
@property --kc-hoek { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.kc-card { position: relative; }
.kc-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--kc-hoek), transparent 0deg,
    var(--kc-accent) 50deg, var(--kc-cta) 95deg, transparent 150deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 260ms var(--kc-ease); pointer-events: none;
}
.kc-card:hover::before { opacity: 1; animation: kc-rand-draai 2.8s linear infinite; }
@keyframes kc-rand-draai { to { --kc-hoek: 360deg; } }

/* Glow-puls bij klik (founder 2026-06-15): een ring van accent-gloed barst naar
   buiten op elke klik; kc-motion.js zet de klasse op pointerdown, goud op de CTA. */
.kc-klik-puls { animation: kc-klik-puls 540ms var(--kc-ease); }
.kc-btn--cta.kc-klik-puls { animation: kc-klik-puls-goud 540ms var(--kc-ease); }
@keyframes kc-klik-puls {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kc-accent) 55%, transparent); }
  to { box-shadow: 0 0 0 16px color-mix(in srgb, var(--kc-accent) 0%, transparent); }
}
@keyframes kc-klik-puls-goud {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kc-cta) 60%, transparent); }
  to { box-shadow: 0 0 0 16px color-mix(in srgb, var(--kc-cta) 0%, transparent); }
}

/* ============================================================
   KineCare | Globale bewegende achtergrond  (founder v0.12)
   Hybride: drijvende-blob aurora (winnaar) + leesbaarheids-veil.

   Vier grote, sterk vervaagde teal/goud-vlekken driften en morphen
   traag over de diepe teal-navy basis. mix-blend-mode: screen bouwt
   een zachte gloed op het donker. Een radiale veil dempt het pagina-
   centrum (waar de tekst staat) terug richting --kc-bg, zodat het
   effect vooral in de marges en als frosted-glass-over-aurora achter
   de glas-kaarten leeft. GPU-only (transform/opacity/filter), geen JS.
   Geldt op ELKE pagina (base + admin) via 1 markup-snippet.

   INTEGRATIE (anders stapelen drie accent-lagen op z-index -1):
   - Laat body::before (kc.css 77-83) staan als STATISCHE basis-tint,
     maar verwijder de kc-ambient-animatie (kc.css regel 958) zodat de
     achtergrond niet dubbel beweegt.
   - Verwijder de .kc-sfeer-markup van de home; deze laag vervangt die
     globaal en rijker.

   LEESBAARHEID (QA v0.11 L6): de effectieve helderheid op de read-zone
   blijft op het bewezen 0.10-niveau. De stop-alpha's zijn bewust laag,
   goud is ingetogen, en de veil trekt het centrum terug naar --kc-bg.

   REDUCED MOTION: de globale *,*::before,*::after-regel (kc.css 941-945:
   animation-duration 0.01ms + iteration-count 1) bevriest elke laag op
   haar FROM/0%-keyframe. Die from-staat is hier bewust al een complete,
   gebalanceerde aurora, dus stilstaand toont de laag een nette statische
   versie: geen flikker, geen leeg zwart. Het @media-blok onderaan borgt
   dit expliciet (animation:none + volle zichtbaarheid).
   ============================================================ */

.kc-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;          /* isoleert layout/paint: scrollt nooit mee */
  isolation: isolate;       /* houdt screen-blend binnen de laag */
  /* Diepe basis zodat screen een donkere ondergrond heeft en er nooit
     een leeg gat ontstaat, ook niet tijdens drift. */
  background:
    radial-gradient(120% 90% at 50% -10%,
      color-mix(in srgb, var(--kc-accent) 5%, transparent), transparent 60%),
    var(--kc-bg);
}

.kc-aurora__blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;   /* additieve gloed op het donker */
  filter: blur(80px);       /* smelt blobs tot diffuse aurora */
  will-change: transform;
  transform: translate3d(0, 0, 0);   /* eigen compositing-laag */
  backface-visibility: hidden;
}

/* 1. Grote teal-veeg linksboven, brede trage diagonale drift. */
.kc-aurora__blob--1 {
  width: 60vw; height: 60vw; max-width: 820px; max-height: 820px;
  top: -22vh; left: -12vw;
  background: radial-gradient(circle at 38% 38%,
    color-mix(in srgb, var(--kc-accent-strong) 46%, transparent) 0%,
    color-mix(in srgb, var(--kc-accent) 26%, transparent) 42%,
    transparent 72%);
  opacity: 0.95;
  animation: kc-aurora-1 22s ease-in-out infinite alternate;
}

/* 2. Diepere teal rechtsonder, tegengestelde drift voor evenwicht. */
.kc-aurora__blob--2 {
  width: 66vw; height: 66vw; max-width: 900px; max-height: 900px;
  bottom: -28vh; right: -16vw;
  background: radial-gradient(circle at 60% 55%,
    color-mix(in srgb, var(--kc-accent) 40%, transparent) 0%,
    color-mix(in srgb, var(--kc-accent) 22%, transparent) 46%,
    transparent 74%);
  opacity: 0.9;
  animation: kc-aurora-2 28s ease-in-out infinite alternate;
}

/* 3. Warm goud-accent, klein en spaarzaam rond het midden zodat de
   gloed signaalwaarde houdt en de teal niet overstemt. */
.kc-aurora__blob--3 {
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  top: 40%; left: 52%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--kc-cta-strong) 34%, transparent) 0%,
    color-mix(in srgb, var(--kc-cta) 18%, transparent) 44%,
    transparent 70%);
  opacity: 0.78;             /* goud bewust ingetogen */
  animation: kc-aurora-3 34s ease-in-out infinite alternate;
}

/* 4. Tweede helder-teal kern die traag morpht (scale-pomp): geeft de
   aurora diepte en een subtiele ademende kern. */
.kc-aurora__blob--4 {
  width: 44vw; height: 44vw; max-width: 600px; max-height: 600px;
  top: 8%; right: 16%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--kc-accent-strong) 38%, transparent) 0%,
    transparent 66%);
  opacity: 0.72;
  animation: kc-aurora-4 20s ease-in-out infinite alternate;
}

/* Leesbaarheids-veil (sterkste idee uit Aurora Ribbons): dempt het
   tekst-centrum terug richting --kc-bg zodat de gloed in de marges en
   achter de glas-kaarten leeft. Geen blend-mode: dit dempt bewust.
   Ademt heel traag mee zodat de demping niet statisch oogt. */
.kc-aurora__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(72% 62% at 50% 44%,
      transparent 0%,
      color-mix(in srgb, var(--kc-bg) 34%, transparent) 68%,
      color-mix(in srgb, var(--kc-bg) 58%, transparent) 100%),
    radial-gradient(60vw 40vh at 50% -6%,
      color-mix(in srgb, var(--kc-accent) 8%, transparent), transparent 70%);
  will-change: transform, opacity;
  animation: kc-aurora-veil 24s ease-in-out infinite alternate;
}

/* Fijne statische korrel: breekt kleurbanding bij de zachte gradienten
   op grote schermen en geeft een filmische, niet-digitale textuur. */
.kc-aurora__grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.9) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
}

/* Onafhankelijke drift/morph-paden; ongelijke lengtes (64/78/92/70s)
   vormen nooit een herkenbaar patroon. Elke FROM is de mooie ruststaat
   (zie reduced-motion). */
@keyframes kc-aurora-1 {
  from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  to   { transform: translate3d(26vw, 19vh, 0) scale(1.36) rotate(18deg); }
}
@keyframes kc-aurora-2 {
  from { transform: translate3d(0, 0, 0) scale(1.04) rotate(0deg); }
  to   { transform: translate3d(-28vw, -17vh, 0) scale(1.42) rotate(-16deg); }
}
@keyframes kc-aurora-3 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-24vw, -24vh, 0) scale(1.48); }
}
@keyframes kc-aurora-4 {
  from { transform: translate3d(0, 0, 0) scale(0.9); }
  to   { transform: translate3d(20vw, 22vh, 0) scale(1.38); }
}
@keyframes kc-aurora-veil {
  from { opacity: 0.9; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.06); }
}

/* Mobiel: lichter blur-budget en grotere blobs t.o.v. viewport zodat de
   aurora niet in harde cirkels uiteenvalt; grain valt weg (goedkoper). */
@media (max-width: 720px) {
  .kc-aurora__blob { filter: blur(60px); }
  .kc-aurora__blob--1 { width: 95vw; height: 95vw; }
  .kc-aurora__blob--2 { width: 100vw; height: 100vw; }
  .kc-aurora__blob--3 { width: 70vw; height: 70vw; }
  .kc-aurora__blob--4 { width: 75vw; height: 75vw; }
  .kc-aurora__grain { display: none; }
}

/* Reduced motion: de globale *-regel bevriest de animaties al op de
   FROM-keyframe (een complete, gebalanceerde aurora). Dit blok maakt de
   intentie hard: geen beweging, geen nutteloze GPU-laag in stilstand,
   volledig zichtbare statische aurora, geen flikker, geen zwart. */
@media (prefers-reduced-motion: reduce) {
  .kc-aurora__blob,
  .kc-aurora__veil,
  .kc-aurora__grain {
    animation: none !important;
    will-change: auto;
  }
  .kc-aurora,
  .kc-aurora__veil { opacity: 1; }
}

/* ============================================================
   Browse-surface (founder 2026-06-15): centrale zoekbalk + view-toggle
   (deck / galerij / tabel) + cover-flow deck. "Kaarten in je hand": de
   middenkaart is de keuze, scroll/sleep/pijl verschuift het midden.
   ============================================================ */
.kc-browse { margin-bottom: var(--kc-space-4); }
.kc-browse__kop {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--kc-space-2); margin-bottom: var(--kc-space-3);
}
/* Controls onder de kaarten: zoekbalk + actieknop + filters, gecentreerd. */
.kc-browse__controls {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--kc-space-2); margin-top: var(--kc-space-4);
}
/* Een verborgen view-pane moet echt verborgen zijn: .kc-galerij/.kc-kaartgrid
   zetten display: grid, wat het UA [hidden] anders overschrijft. */
[data-view-pane][hidden] { display: none !important; }
/* Idem voor gefilterde zoek-items: deck-kaarten (display: flex), galerij-kaarten
   en tabelrijen die door het live-zoeken verborgen worden, moeten echt weg. */
[data-zoek][hidden] { display: none !important; }
.kc-browse__zoek { width: 100%; max-width: 540px; }
.kc-browse__zoek input {
  width: 100%; text-align: center; min-height: 48px;
  padding: var(--kc-space-2) var(--kc-space-3); border-radius: 999px;
  font-size: var(--kc-type-base);
}
.kc-browse__toggle {
  display: inline-flex; gap: 2px; background: var(--kc-surface);
  border: 1px solid var(--kc-line); border-radius: 999px; padding: 3px;
}
.kc-browse__toggle button {
  display: inline-flex; align-items: center; gap: var(--kc-space-1);
  border: 0; background: transparent; color: var(--kc-ink-muted);
  font-family: var(--kc-font); font-weight: 600; font-size: var(--kc-type-sm);
  padding: 7px 16px; border-radius: 999px; cursor: pointer; min-height: 38px;
  transition: color var(--kc-t-fast) var(--kc-ease), background var(--kc-t-fast) var(--kc-ease);
}
.kc-browse__toggle button.actief { background: var(--kc-accent); color: var(--kc-on-fill); }
.kc-browse__toggle button:not(.actief):hover { color: var(--kc-ink); }

/* Zoekrij: zoekbalk + primaire actieknop naast elkaar, gecentreerd. */
.kc-browse__zoekrij { display: flex; align-items: center; gap: var(--kc-space-2); justify-content: center; width: 100%; flex-wrap: wrap; }
.kc-browse__zoekrij .kc-browse__zoek { width: auto; flex: 1 1 320px; max-width: 520px; margin: 0; }

/* Morphende sub-bar: de paginatitel klapt bij scrollen samen tot een vaste
   balk onder de nav (kc-deck.js meet de nav-hoogte en zet --kc-navh). */
.kc-subbar {
  position: fixed; top: var(--kc-navh, 66px); left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--kc-space-3);
  padding: var(--kc-space-2) var(--kc-space-5);
  background: color-mix(in srgb, var(--kc-bg) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--kc-line);
  opacity: 0; pointer-events: none;
  transition: opacity 60ms linear;   /* instant aanvoelend, geen trage slide */
}
.kc-subbar.zichtbaar { opacity: 1; pointer-events: auto; }
.kc-subbar__titel { font-family: var(--kc-font-display); font-size: var(--kc-type-lead); font-weight: 600; color: var(--kc-ink); letter-spacing: -0.01em; }

/* Twee-luik (founder 2026-06-16): LINKS de bundel-binder waar je doorheen
   bladert (kaart slaat om + fade), RECHTS het klikbare mannetje om op
   lichaamsregio te filteren. Full-bleed (breekt uit de 1180px-content-kolom),
   φ-verdeling tussen binder en mannetje. */
.kc-deckhouder {
  position: relative; box-sizing: border-box;
  width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
  padding: 0 max(var(--kc-space-4), 2.5vw);
}
/* De deck/bladen vullen de volle breedte; het mannetje ligt er rechts overheen. */
.kc-binder { position: relative; width: 100%; z-index: 0; }   /* stacking-context: bladen blijven achter het mannetje */
/* Geen treffers tijdens live-zoeken: klap de binder in (het mannetje blijft
   staan zodat je de regio kunt aanpassen). */
.kc-binder.kc-leeg { display: none; }
/* Verder in de bundel tonen dossiers geen inhoud (blanco silhouet): schoner en
   sneller; enkel de kaartvorm + klem blijven als wegzakkende mappen zichtbaar. */
.kc-deck__item.kc-stil > * { opacity: 0; transition: opacity 160ms var(--kc-ease); }
.kc-deck {
  position: relative; height: 760px;
  /* overflow: clip met ruime clip-margin zodat de glow/schaduw van de pagina's
     NIET hard wordt afgekapt aan de sectie-rand (founder), maar de inhoud wel
     opgeruimd wordt buiten beeld. */
  overflow: clip; overflow-clip-margin: 260px;
  touch-action: pan-y; outline: none; cursor: grab;
}
.kc-deck:active { cursor: grabbing; }
.kc-deck__track { position: absolute; inset: 0; }
.kc-deck__item {
  position: absolute; top: 50%; left: 50%; width: 45%; min-height: 37.5rem;   /* breedte = 45% (dynamisch), hoogte in rem */
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  /* transform/opacity worden per frame door kc-deck.js gezet (smooth rAF-ease);
     geen CSS-transitie daarop. De losse 'scale'-property is hier vrij voor de
     vergroting-bij-selecteren (hover/focus) en transitiet wel smooth. */
  transition: box-shadow var(--kc-t-base) var(--kc-ease), border-color var(--kc-t-base) var(--kc-ease), scale var(--kc-t-base) var(--kc-ease);
  text-decoration: none; color: inherit; cursor: pointer;
  background: var(--kc-surface); border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-2xl); box-shadow: var(--kc-shadow-lg);
  padding: var(--kc-phi-5) var(--kc-phi-4); display: flex; flex-direction: column;
  backface-visibility: hidden;
}
.kc-deck__item:not(.actief) { filter: saturate(0.82) brightness(0.8); }
/* Klem bovenaan: het dossier hangt aan een klembord. */
.kc-deck__item::before {
  content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 28px; border-radius: 8px; z-index: 3;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--kc-ink) 55%, white),
    color-mix(in srgb, var(--kc-ink-muted) 65%, var(--kc-bg)));
  box-shadow: 0 4px 10px rgba(18, 34, 39, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  border: 1px solid color-mix(in srgb, var(--kc-ink) 25%, var(--kc-bg));
}
.kc-deck__item.actief {
  border-color: color-mix(in srgb, var(--kc-accent) 55%, var(--kc-line));
  box-shadow: 0 1px 0 var(--kc-glas-glans) inset, 0 30px 70px rgba(18, 34, 39, 0.12),
    0 0 0 1px color-mix(in srgb, var(--kc-accent) 30%, transparent),
    0 0 60px color-mix(in srgb, var(--kc-accent) 22%, transparent);
}
/* Hover/focus: niet naar voren poppen, enkel de border laten oplichten. */
.kc-deck__item.actief:hover, .kc-deck__item.actief:focus-visible {
  border-color: var(--kc-accent-strong);
  box-shadow: 0 1px 0 var(--kc-glas-glans) inset, 0 30px 70px rgba(18, 34, 39, 0.12),
    0 0 0 1px color-mix(in srgb, var(--kc-accent-strong) 60%, transparent),
    0 0 70px color-mix(in srgb, var(--kc-accent) 30%, transparent);
}
/* Deck-kaart inhoud (generiek voor patient + oefening) */
/* Deck-kaart toont enkel informatie (geen cover-afbeelding meer); de info staat
   gecentreerd in de brede kaart voor de leesbaarheid. */
.kc-dk__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; width: 100%; max-width: 660px; margin: 0 auto; }
.kc-dk__foto { display: none !important; }   /* afbeelding uit de kaart gehaald */
.kc-dk__top { display: flex; gap: var(--kc-space-1); flex-wrap: wrap; justify-content: center; min-height: 22px; }
.kc-dk__label {
  text-align: center; font-size: var(--kc-type-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--kc-ink-muted);
  margin: var(--kc-space-2) 0 var(--kc-space-3); padding-bottom: var(--kc-space-2);
  border-bottom: 1px solid var(--kc-line);
}
.kc-dk__naam {
  font-family: var(--kc-font-display); font-size: var(--kc-type-h2); font-weight: 600;
  text-align: center; margin: var(--kc-space-2) 0 0; color: var(--kc-ink); letter-spacing: -0.01em;
  line-height: 1.16;
}
.kc-dk__doel {
  text-align: center; color: var(--kc-ink-muted); font-size: var(--kc-type-base); line-height: 1.45;
  margin: var(--kc-space-1) auto var(--kc-space-3); max-width: 52ch;
}
/* KPI-kaders: kerncijfers in omkaderde vakjes (deck-kaart + galerij). */
.kc-dk__kpis { display: flex; gap: var(--kc-space-2); margin: var(--kc-space-3) 0; }
.kc-dk__kpi {
  flex: 1 1 0; min-width: 0; text-align: center; padding: var(--kc-space-2) var(--kc-space-1);
  background: color-mix(in srgb, var(--kc-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--kc-accent) 26%, var(--kc-line));
  border-radius: var(--kc-radius-lg);
}
.kc-dk__kpi b {
  display: block; font-family: var(--kc-font-display); font-size: var(--kc-type-h3);
  font-weight: 600; color: var(--kc-accent-strong); line-height: 1.05;
}
.kc-dk__kpi span {
  display: block; font-size: var(--kc-type-xs); color: var(--kc-ink-muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kc-dk__info {
  text-align: center; color: var(--kc-ink-muted); font-size: var(--kc-type-sm);
  display: flex; flex-direction: column; gap: 3px; margin-top: var(--kc-space-2);
}
.kc-dk__aandoening { color: var(--kc-accent-strong); font-weight: 600; margin-top: var(--kc-space-half); }
/* Dossier-data als rijen (label links, waarde rechts), met fijne scheidingslijn. */
.kc-dk__rijen { margin-top: var(--kc-space-3); display: flex; flex-direction: column; }
.kc-dk__rij {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--kc-space-2);
  padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--kc-line) 55%, transparent);
  font-size: var(--kc-type-base); line-height: 1.35;
}
.kc-dk__rij:last-child { border-bottom: 0; }
.kc-dk__rij > span { color: var(--kc-ink-muted); white-space: nowrap; }
.kc-dk__rij > strong { color: var(--kc-ink); font-weight: 600; text-align: right; }
.kc-dk__rij > strong.kc-dk__klem { color: var(--kc-accent-strong); }
.kc-dk__cta {
  text-align: center; margin-top: auto; padding-top: var(--kc-space-3);
  color: var(--kc-accent-strong); font-weight: 600; font-size: var(--kc-type-sm);
  opacity: 0; transition: opacity var(--kc-t-base) var(--kc-ease);
}
.kc-deck__item.actief .kc-dk__cta, .kc-galkaart .kc-dk__cta { opacity: 1; }

/* Vorige/volgende + teller onder de deck */
.kc-deck__nav { display: flex; align-items: center; justify-content: center; gap: var(--kc-space-3); margin-top: var(--kc-space-2); }
.kc-deck__pijl {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--kc-border);
  background: var(--kc-surface); color: var(--kc-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--kc-t-fast) var(--kc-ease);
}
.kc-deck__pijl:hover { border-color: var(--kc-accent); color: var(--kc-accent-strong); transform: translateY(-1px); }
.kc-deck__teller { font-size: var(--kc-type-sm); color: var(--kc-ink-muted); min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.kc-deck__hint { text-align: center; color: var(--kc-ink-faint); font-size: var(--kc-type-xs); margin-top: var(--kc-space-1); }

/* Mannetje (lichaamsregio-filter): ligt absoluut rechts, bovenop de bladen. */
.kc-lichaam {
  position: absolute; right: max(var(--kc-space-4), 3vw); top: 50%; transform: translateY(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--kc-space-2);
}
.kc-lichaam__kop { display: flex; align-items: center; gap: var(--kc-space-2); flex-wrap: wrap; justify-content: center; min-height: 32px; }
.kc-lichaam__titel { font-family: var(--kc-font-display); font-size: var(--kc-type-lead); font-weight: 600; color: var(--kc-ink); }
.kc-lichaam__actief {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: var(--kc-type-sm); font-weight: 600; color: var(--kc-on-fill);
  background: var(--kc-accent); border-radius: 999px; padding: 3px 10px 3px 12px;
}
.kc-lichaam__actief::after { content: "\00d7"; font-size: 1.15em; line-height: 1; opacity: 0.85; }
.kc-lichaam__actief[hidden] { display: none !important; }   /* echt verbergen (display: inline-flex overschrijft [hidden]) */
/* Uitgesneden anatomie-afbeelding met de klikbare nodes als overlay. */
.kc-lichaam__fig { position: relative; width: 100%; max-width: 416px; }
.kc-lichaam__beeld { display: block; width: 100%; height: auto; }
.kc-lichaam__nodes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kc-lichaam__hint { font-size: var(--kc-type-xs); color: var(--kc-ink-faint); margin: var(--kc-space-1) 0 0; text-align: center; }
/* Futuristische regio-nodes: een dot + een reticle-ring die opent bij hover/actief. */
.kc-zone { cursor: pointer; outline: none; }
.kc-hit { fill: transparent; }
.kc-node {     /* vaste centrale cirkel (beweegt niet) */
  fill: color-mix(in srgb, var(--kc-accent) 85%, var(--kc-bg));
  transition: fill 150ms var(--kc-ease);
}
/* Onderliggende cirkel: een pulserende ping achter de vaste centrale dot. */
.kc-puls {
  fill: var(--kc-accent); opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: kc-puls 2.6s var(--kc-ease) infinite;
}
@keyframes kc-puls {
  0% { transform: scale(0.7); opacity: 0.5; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}
.kc-zone:nth-of-type(2n) .kc-puls { animation-delay: -0.9s; }
.kc-zone:nth-of-type(3n) .kc-puls { animation-delay: -1.7s; }
.kc-ring {
  fill: none; stroke: var(--kc-accent-strong); stroke-width: 4;
  opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.45);
  transition: opacity 160ms var(--kc-ease), transform 160ms var(--kc-ease);
}
.kc-zone:hover .kc-node,
.kc-zone:focus-visible .kc-node,
.kc-zone.actief .kc-node { fill: var(--kc-accent-strong); filter: drop-shadow(0 0 5px var(--kc-accent)); }
.kc-zone:hover .kc-ring,
.kc-zone:focus-visible .kc-ring,
.kc-zone.actief .kc-ring { opacity: 1; transform: scale(1); }
.kc-zone.actief .kc-ring { stroke-width: 1.8; }

/* Deck-modus = full-screen boek, niet-scrollbaar; het boek vult het scherm en de
   pagina's lopen tot onderaan. Galerij/tabel (geen .kc-deckmodus) scrollen gewoon. */
body.kc-deckmodus { overflow: hidden; }
body.kc-deckmodus .kc-page-sub { display: none; }
body.kc-deckmodus .kc-page-title { margin-bottom: var(--kc-space-2); }
body.kc-deckmodus .kc-deckhouder { height: calc(100vh - 12.25rem); }
body.kc-deckmodus .kc-binder { height: 100%; }
body.kc-deckmodus .kc-deck { height: 100%; }
body.kc-deckmodus .kc-deck__item { height: calc(100% - 1.1rem); min-height: 0; }
body.kc-deckmodus .kc-deck__nav, body.kc-deckmodus .kc-deck__hint { display: none; }
body.kc-deckmodus .kc-lichaam__fig { max-width: min(442px, 54vh); }
/* Zoekbalk + filters als een zwevend glass-paneel boven de cards (founder). */
body.kc-deckmodus .kc-browse__controls {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--kc-space-4);
  z-index: 700; margin: 0; width: max-content; max-width: min(880px, 92vw);   /* boven de cards (z tot 600) */
  padding: var(--kc-space-3) var(--kc-space-4);
  background: color-mix(in srgb, var(--kc-surface) 60%, transparent);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--kc-border); border-radius: var(--kc-radius-xl);
  box-shadow: 0 1px 0 var(--kc-glas-glans) inset, 0 20px 56px rgba(18, 34, 39, 0.10);
}

/* Tablet (721-900): de waaier-deck werkt nog, maar de marge naar het mannetje
   wordt krapper; houd de figuur compacter zodat hij de bladen niet raakt. */
@media (max-width: 900px) {
  .kc-lichaam__fig { max-width: 300px; }
}

/* Phone (<=720): de cover-flow-waaier + het absoluut-gepositioneerde mannetje
   botsen op smal scherm (overlap + horizontale overflow). Eigen mobiele
   compositie (foundation 01 sectie 10.23): het mannetje-filter komt BOVEN de
   deck te staan (in de stroom, gecentreerd, compacter), de deck eronder als een
   enkele gecentreerde kaart om doorheen te bladeren. Geen 100vw-uitbraak meer:
   de houder blijft binnen de content-kolom zodat er nul horizontale scroll is. */
@media (max-width: 720px) {
  .kc-deckhouder {
    width: 100%; left: auto; right: auto; margin-left: 0; margin-right: 0;
    padding: 0; display: flex; flex-direction: column; align-items: center;
  }
  .kc-lichaam {
    position: static; transform: none; right: auto; top: auto;
    order: -1; width: 100%; margin-bottom: var(--kc-space-2);
  }
  .kc-lichaam__fig { max-width: 220px; margin: 0 auto; opacity: 1; }
  .kc-binder { width: 100%; }
  /* Deck-hoogte ruim genoeg voor de volledige kaart-inhoud (KPI's + rijen) zodat
     de kaarttitel bovenaan nooit door overflow: hidden wordt afgekapt. */
  .kc-deck { height: 41rem; overflow: hidden; }   /* enkele kaart, geen zij-uitloop */
  .kc-deck__item { width: 88%; min-height: 36rem; padding: var(--kc-space-4) var(--kc-space-3); }
  .kc-dk__naam { font-size: var(--kc-type-h3); margin-top: var(--kc-space-1); }   /* hero-naam niet te groot op smal */
  .kc-dk__label { margin: var(--kc-space-1) 0 var(--kc-space-2); }
  body.kc-deckmodus { overflow: auto; }   /* mobiel: gewoon scrollen, geen full-screen boek */
  body.kc-deckmodus .kc-deckhouder { height: auto; }
  body.kc-deckmodus .kc-deck { height: 41rem; }
  body.kc-deckmodus .kc-deck__item { height: auto; min-height: 36rem; }
  body.kc-deckmodus .kc-deck__hint { display: block; }
  body.kc-deckmodus .kc-browse__controls { position: static; left: auto; transform: none; width: 100%; max-width: 100%; background: none; padding: 0; margin-top: var(--kc-space-4); }
}

/* Morph naar fullscreen bij klik op het dossier (founder 2026-06-15): een kloon
   van de voorkaart groeit vanaf zijn plek naar het volledige scherm, dan volgt
   de navigatie. Onder reduced-motion vervalt de morph (directe navigatie). */
/* Kaart-detail-overlay (founder 2026-06-16): de aangeklikte kaart morpht naar
   het midden, wordt groter en toont de detailpagina in een iframe; de backdrop
   dimt de rest. Klik op de backdrop (of Escape) = terug naar de bibliotheek. */
.kc-kaartmodal-bd {
  position: fixed; inset: 0; z-index: 800; cursor: pointer;
  /* Bewust half-doorzichtig: de onderliggende pagina blijft (geblurd) zichtbaar
     zodat duidelijk is dat naast de kaders klikken terugkeert naar het overzicht
     (founder 2026-06-22). De aurora is uit (.kc-modal-open) dus geen smudge. */
  background: color-mix(in srgb, var(--kc-bg) 58%, transparent);
  backdrop-filter: blur(7px) saturate(1.05); -webkit-backdrop-filter: blur(7px) saturate(1.05);
  opacity: 0; transition: opacity 420ms var(--kc-ease);
}
.kc-kaartmodal-bd.aan { opacity: 1; }
/* De aurora van de achterliggende pagina blijft AAN onder de pop-up (founder
   2026-06-22: zonder voelt het te kaal); de half-doorzichtige backdrop dempt
   hem zacht. De faint rechthoek kwam niet van de aurora maar van body::before
   in de iframe (zie body.kc-modalpagina::before). */
/* Scroll-laag (founder 2026-06-22): de card-detail-overlay scrolt als GEHEEL.
   Geen vaste blok met interne scrollbox meer: de modal is een vel van
   natuurlijke inhoudshoogte (iframe-hoogte = inhoud, JS-gemeten); is het vel
   hoger dan het scherm, dan scrollt de hele blok mee binnen deze laag. */
.kc-kaartmodal-scroll {
  position: fixed; inset: 0; z-index: 801;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  cursor: pointer;   /* klik naast de pop-up sluit */
}
/* De pop-up zelf heeft GEEN achtergrond-kader (founder 2026-06-22): enkel de
   middenkolom houdt zijn lichtblauwe sectie; de zij- en tools-blokken zweven
   erbuiten op de geblurde backdrop. Daarom is het modal-kader en de iframe
   transparant (de iframe-body is transparant via body.kc-modalpagina). */
.kc-kaartmodal {
  position: relative; cursor: default;
  width: min(1500px, 96vw); margin: 4vh auto;
  background: transparent; border: 0; box-shadow: none;
  opacity: 0; transform: translateY(18px) scale(0.99);
  transition: opacity 320ms var(--kc-ease), transform 440ms var(--kc-ease);
}
.kc-kaartmodal.aan { opacity: 1; transform: none; }
/* De iframe is op inhoudshoogte (JS-gemeten); de hele pop-up scrollt als geheel
   in de scroll-laag. */
.kc-kaartmodal__frame { width: 100%; border: 0; display: block; background: transparent; }
/* Detail in de overlay (?modal=1): geen zichtbare scrollbalk, wel scrollbaar. */
html:has(body.kc-modalpagina), body.kc-modalpagina { scrollbar-width: none; -ms-overflow-style: none; }
html:has(body.kc-modalpagina)::-webkit-scrollbar, body.kc-modalpagina::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Galerij-view: dezelfde kaart-inhoud, maar statisch in een grid. */
.kc-galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--kc-space-3); }
.kc-galkaart {
  background: var(--kc-surface); border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-xl); box-shadow: var(--kc-shadow-lg);
  padding: var(--kc-phi-3); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; min-height: 200px;
  transition: transform var(--kc-t-base) var(--kc-ease), box-shadow var(--kc-t-base) var(--kc-ease), border-color var(--kc-t-base) var(--kc-ease);
}
.kc-galkaart:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--kc-accent) 45%, var(--kc-line));
  box-shadow: 0 24px 60px rgba(18, 34, 39, 0.12), 0 0 0 1px color-mix(in srgb, var(--kc-accent) 20%, transparent);
}
.kc-galkaart .kc-dk__cta { opacity: 1; }

/* ---- Clean galerij-kaart (founder 2026-06-18) -----------------------------
   EEN illustratie + de 5 belangrijkste feiten, niets meer. De rijke detail
   (alle stats, chips, evidence, extra rijen) leeft op de detail-pagina en in
   de tabel-weergave; de galerij is puur scan-en-kies. Gedeeld door patient-
   en oefening-galerij zodat beide types consistent ogen. */
.kc-galerij:has(.kc-galkaart--clean) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .kc-galerij:has(.kc-galkaart--clean) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kc-galerij:has(.kc-galkaart--clean) { grid-template-columns: 1fr; } }
.kc-galkaart--clean {
  position: relative; overflow: hidden;
  padding: var(--kc-phi-3); gap: var(--kc-space-2);
}
.kc-galkaart--clean::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--kc-accent), var(--kc-accent-soft));
  opacity: 0.55; transition: opacity var(--kc-t-fast) ease-out;
}
.kc-galkaart--clean:hover::before { opacity: 1; }
/* Illustratie-vlak: gulden rechthoek, silhouet gecentreerd, regio-naam onder. */
.kc-gk__beeld {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--kc-space-1);
  aspect-ratio: 1.618 / 1; width: 100%;
  background: color-mix(in srgb, var(--kc-accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--kc-accent) 18%, var(--kc-line));
  border-radius: var(--kc-radius-lg);
  margin-bottom: var(--kc-space-1);
}
.kc-gk__beeld .kc-dk__fig {
  display: block; width: auto; height: 58%; max-height: 7.5rem;
  color: var(--kc-ink-muted);
}
.kc-gk__beeldnaam {
  font-size: var(--kc-type-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--kc-accent-strong);
  max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}

/* ---- Patient-avatar (founder 2026-06-18) ---------------------------------
   Privacy-veilige stand-in: cirkel met initialen, kleur deterministisch uit de
   naam (zie _avatar.html). Vervangt het silhouet als "foto" op de patient-
   galerijkaart; de oefening-kaart houdt de minifig als hoofd-icoon. Geen
   geslacht-kleurcodering. */
.kc-gk__avatar-wrap { position: relative; display: inline-flex; }
.kc-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 4.25rem; height: 4.25rem; border-radius: 50%;
  font-family: var(--kc-font-display); font-weight: 600;
  font-size: var(--kc-type-h3); line-height: 1; letter-spacing: -0.01em;
  color: var(--kc-ink); text-transform: uppercase; user-select: none;
  border: 1px solid color-mix(in srgb, var(--kc-line) 70%, transparent);
  box-shadow: inset 0 1px 0 var(--kc-glas-glans);
}
.kc-avatar--klein { width: 2.25rem; height: 2.25rem; font-size: var(--kc-type-sm); }
/* Zes deterministische tinten, elk uit bestaande brand-tokens gemengd; geen
   hardcoded hex. Donkere glas-vulling + accentrand houdt het op-merk en chic. */
.kc-avatar[data-tint="0"] { background: color-mix(in srgb, var(--kc-accent) 26%, var(--kc-surface)); border-color: color-mix(in srgb, var(--kc-accent) 45%, transparent); }
.kc-avatar[data-tint="1"] { background: color-mix(in srgb, var(--kc-accent-strong) 26%, var(--kc-surface)); border-color: color-mix(in srgb, var(--kc-accent-strong) 45%, transparent); }
.kc-avatar[data-tint="2"] { background: color-mix(in srgb, var(--kc-cta) 24%, var(--kc-surface)); border-color: color-mix(in srgb, var(--kc-cta) 42%, transparent); }
.kc-avatar[data-tint="3"] { background: color-mix(in srgb, var(--kc-success) 24%, var(--kc-surface)); border-color: color-mix(in srgb, var(--kc-success) 42%, transparent); }
.kc-avatar[data-tint="4"] { background: color-mix(in srgb, var(--kc-warn) 24%, var(--kc-surface)); border-color: color-mix(in srgb, var(--kc-warn) 42%, transparent); }
.kc-avatar[data-tint="5"] { background: color-mix(in srgb, var(--kc-danger) 22%, var(--kc-surface)); border-color: color-mix(in srgb, var(--kc-danger) 40%, transparent); }

/* ---- Lichaamsdeel-icoon (regio-badge) ------------------------------------
   Hergebruikt de minifig met regio-accent, klein gerenderd. Op de patient-kaart
   als hoekbadge op de avatar; als rij (icoon + label) elders herbruikbaar. */
.kc-regio { display: inline-flex; align-items: center; gap: var(--kc-space-1); min-width: 0; }
.kc-regio__fig { display: inline-flex; align-items: center; justify-content: center; }
.kc-regio__fig .kc-dk__fig { color: var(--kc-ink-muted); }
.kc-regio--actief .kc-regio__fig .kc-dk__fig { color: var(--kc-accent-strong); }
.kc-regio__label {
  font-size: var(--kc-type-xs); font-weight: 600; color: var(--kc-ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.kc-regio--rij .kc-dk__fig { height: 1.5rem; width: auto; }
/* Hoekbadge op de avatar: compact rondje met de minifig, rechtsonder. */
.kc-gk__regiobadge {
  position: absolute; right: -2px; bottom: -2px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--kc-surface-2);
  border: 1px solid color-mix(in srgb, var(--kc-accent) 35%, var(--kc-line));
  box-shadow: var(--kc-shadow);
}
.kc-gk__regiobadge .kc-regio--badge .kc-dk__fig { height: 1.1rem; width: auto; }
/* Meldingen-badge als klein alert-element, linksboven op het beeld (telt niet
   als een van de 5 feiten); ligt op de illustratie-hoek. */
.kc-gk__alert {
  position: absolute; z-index: 2;
  top: calc(var(--kc-phi-3) + var(--kc-space-1)); left: calc(var(--kc-phi-3) + var(--kc-space-1));
  font-size: var(--kc-type-xs); font-weight: 700; line-height: 1;
  padding: var(--kc-space-half) var(--kc-space-1); border-radius: 999px;
  background: color-mix(in srgb, var(--kc-warn) 22%, var(--kc-surface));
  color: var(--kc-warn); border: 1px solid color-mix(in srgb, var(--kc-warn) 40%, transparent);
  white-space: nowrap;
}
/* Favoriet-ster rechtsboven op het beeld (oefening-galerij); blijft functioneel
   en haalbaar als 44px touch-target. */
.kc-gk__ster {
  position: absolute; z-index: 2; margin: 0;
  top: calc(var(--kc-phi-3) - var(--kc-space-1)); right: calc(var(--kc-phi-3) - var(--kc-space-1));
}
.kc-gk__ster .kc-sterknop {
  background: color-mix(in srgb, var(--kc-surface) 78%, transparent);
  border-radius: 999px; backdrop-filter: blur(4px);
}
.kc-galkaart--clean .kc-gk__naam {
  font-family: var(--kc-font-display); font-size: var(--kc-type-lead); font-weight: 600;
  color: var(--kc-ink); line-height: 1.2; letter-spacing: -0.01em;
}
.kc-gk__naam--link { text-decoration: none; color: var(--kc-ink); display: block; }
.kc-gk__naam--link:hover { color: var(--kc-accent-strong); }
/* De 5 feiten als compacte label/waarde-rijen met fijne scheidingslijn. */
.kc-gk__feiten { display: flex; flex-direction: column; margin-top: auto; }
.kc-gk__feit {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--kc-space-2);
  padding: var(--kc-space-1) 0; border-bottom: 1px solid color-mix(in srgb, var(--kc-line) 55%, transparent);
  font-size: var(--kc-type-sm); line-height: 1.3; min-width: 0;
}
.kc-gk__feit:last-child { border-bottom: 0; }
.kc-gk__feit > span { color: var(--kc-ink-muted); white-space: nowrap; }
.kc-gk__feit > strong {
  color: var(--kc-ink); font-weight: 600; text-align: right;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kc-gk__feit > strong.kc-gk__klem { color: var(--kc-accent-strong); }
.kc-gk__cta {
  text-align: center; margin-top: var(--kc-space-2); padding-top: var(--kc-space-2);
  color: var(--kc-accent-strong); font-weight: 600; font-size: var(--kc-type-sm);
  text-decoration: none; display: block;
}
.kc-gk__naam--link:focus-visible, .kc-gk__cta:focus-visible { outline: 2px solid var(--kc-accent); outline-offset: 2px; }

/* Regio-accent op het silhouet: het aangedane lichaamsdeel licht op in de
   accent-kleur, met een zachte puls die rust onder prefers-reduced-motion. */
.kc-dk__fig--regio .kc-dk__fig-stip { fill: var(--kc-accent-strong); }
.kc-dk__fig--regio .kc-dk__fig-puls {
  fill: color-mix(in srgb, var(--kc-accent) 45%, transparent);
  transform-box: fill-box; transform-origin: center;
  animation: kc-figpuls 2.6s var(--kc-ease) infinite;
}
@keyframes kc-figpuls {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50% { opacity: 0.12; transform: scale(1.9); }
}
@media (prefers-reduced-motion: reduce) {
  .kc-dk__fig--regio .kc-dk__fig-puls { animation: none; opacity: 0.4; }
}

/* ---- Voortgang-boom (beheer): progressie-boom van het product ------------- */
/* Status-kleuren komen uit de bestaande theme-tokens, geen nieuwe hex:
   te doen = neutraal/muted, bezig = teal-accent, klaar = warm goud. */
.kc-vg { padding: var(--kc-phi-3); }
.kc-vg__kop {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--kc-space-2); margin-bottom: var(--kc-space-2);
}
.kc-vg__legenda { display: flex; flex-wrap: wrap; gap: var(--kc-space-2); }
.kc-vg__leg {
  display: inline-flex; align-items: center; gap: var(--kc-space-1);
  font-size: var(--kc-type-xs); color: var(--kc-ink-muted); font-weight: 600;
}
.kc-vg__leg-stip { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.kc-vg__leg--todo  .kc-vg__leg-stip { background: var(--kc-ink-faint); }
.kc-vg__leg--doing .kc-vg__leg-stip { background: var(--kc-accent); }
.kc-vg__leg--done  .kc-vg__leg-stip { background: var(--kc-cta); }
.kc-vg__knoppen { display: inline-flex; gap: var(--kc-space-1); }

/* Viewport: breedte 100% van de kaart, hoogte in rem (dynamische maatvoering). */
.kc-vg__viewport {
  position: relative; width: 100%; height: 32rem; overflow: hidden;
  border: 1px solid var(--kc-line); border-radius: var(--kc-radius-lg);
  background:
    radial-gradient(60% 60% at 30% 0%, var(--kc-accent-soft), transparent 70%),
    var(--kc-bg);
  cursor: grab; touch-action: none;
}
.kc-vg__viewport:focus-visible { outline: 2px solid var(--kc-accent); outline-offset: 2px; }
.kc-vg__viewport--sleept { cursor: grabbing; }
.kc-vg__laag {
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
  transition: transform var(--kc-t-fast) var(--kc-ease);
}
.kc-vg__viewport--sleept .kc-vg__laag { transition: none; }
.kc-vg__svg { position: absolute; top: 0; left: 0; overflow: visible; }

/* Verbindingslijnen: kleur volgt de status van het kind-item. */
.kc-vg__tak { stroke-width: 2; }
.kc-vg__tak--todo  { stroke: color-mix(in srgb, var(--kc-ink-faint) 70%, transparent); }
.kc-vg__tak--doing { stroke: color-mix(in srgb, var(--kc-accent) 70%, transparent); }
.kc-vg__tak--done  { stroke: color-mix(in srgb, var(--kc-cta) 65%, transparent); }

.kc-vg__knopen { position: absolute; top: 0; left: 0; }
.kc-vg__knoop {
  position: absolute; box-sizing: border-box;
  background: var(--kc-surface); border: 1px solid var(--kc-border);
  border-left: 3px solid var(--kc-ink-faint);
  border-radius: var(--kc-radius); padding: var(--kc-space-1) var(--kc-phi-2);
  box-shadow: var(--kc-shadow);
  transition: transform var(--kc-t-fast) var(--kc-ease), box-shadow var(--kc-t-fast) var(--kc-ease), border-color var(--kc-t-fast) var(--kc-ease);
}
.kc-vg__knoop:hover { box-shadow: var(--kc-shadow-lg); transform: translateY(-2px); }
.kc-vg__knoop--doing { border-left-color: var(--kc-accent); }
.kc-vg__knoop--done  { border-left-color: var(--kc-cta); }
.kc-vg__knoop-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-space-1); margin-bottom: var(--kc-space-half); }
.kc-vg__cat {
  font-size: var(--kc-type-xs); color: var(--kc-ink-faint);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kc-vg__prio {
  font-size: var(--kc-type-xs); font-weight: 700; border-radius: 999px;
  padding: 1px 8px; flex: 0 0 auto;
}
.kc-vg__prio--hoog { color: var(--kc-cta-strong); background: var(--kc-cta-soft); }
.kc-vg__prio--laag { color: var(--kc-ink-faint); background: var(--kc-bg); }
.kc-vg__titel {
  font-weight: 600; color: var(--kc-ink); font-size: var(--kc-type-sm);
  line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kc-vg__detail {
  font-size: var(--kc-type-xs); color: var(--kc-ink-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Status-knop per knoop: klikbaar om de status door te wisselen. */
.kc-vg__status {
  margin-top: var(--kc-space-1); display: inline-flex; align-items: center; gap: var(--kc-space-1);
  min-height: 30px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  font-family: var(--kc-font); font-size: var(--kc-type-xs); font-weight: 700;
  border: 1px solid var(--kc-line); background: var(--kc-bg); color: var(--kc-ink-muted);
  transition: all var(--kc-t-fast) var(--kc-ease);
}
.kc-vg__status:hover { transform: translateY(-1px); }
.kc-vg__status:active { transform: scale(0.97); }
.kc-vg__status-stip { width: 9px; height: 9px; border-radius: 50%; background: var(--kc-ink-faint); flex: 0 0 auto; }
.kc-vg__status--todo  { color: var(--kc-ink-muted); }
.kc-vg__status--todo  .kc-vg__status-stip { background: var(--kc-ink-faint); }
.kc-vg__status--doing { color: var(--kc-accent-strong); border-color: var(--kc-accent-soft); background: var(--kc-accent-soft); }
.kc-vg__status--doing .kc-vg__status-stip { background: var(--kc-accent); }
.kc-vg__status--done  { color: var(--kc-cta-strong); border-color: var(--kc-cta-soft); background: var(--kc-cta-soft); }
.kc-vg__status--done  .kc-vg__status-stip { background: var(--kc-cta); }
.kc-vg__leeg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--kc-space-4); }
.kc-vg__hint { margin-top: var(--kc-space-2); margin-bottom: 0; }

/* Fallback-volscherm zonder Fullscreen-API. */
.kc-vg--fsfallback {
  position: fixed; inset: 0; z-index: 200; margin: 0;
  border-radius: 0; background: var(--kc-bg); overflow: auto;
}
.kc-vg--fsfallback .kc-vg__viewport { height: calc(100vh - 9rem); }
:fullscreen .kc-vg__viewport { height: calc(100vh - 9rem); }

/* Toevoeg-formulier. */
.kc-vg__formrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kc-space-2); }
@media (max-width: 640px) {
  .kc-vg__formrij { grid-template-columns: 1fr; }
  .kc-vg__viewport { height: 24rem; }
}

/* Reduced-motion: geen pan/zoom-transitie, alles blijft bedienbaar en stil. */
@media (prefers-reduced-motion: reduce) {
  .kc-vg__laag, .kc-vg__knoop, .kc-vg__status { transition: none; }
  .kc-vg__knoop:hover { transform: none; }
}

/* === Community-warehouse (fase 1/v1) ===
   Eigen component-set, tokens uit :root. De community-tier-badge gebruikt bewust
   het warn-palet zodat community-content visueel verschilt van de geverifieerde
   kennisbank (niet-wegklikbaar onderscheid). */
.kc-wh-terug { color: var(--kc-ink-muted); text-decoration: none; font-size: var(--kc-type-sm);
  display: inline-flex; align-items: center; gap: var(--kc-space-1); margin-right: var(--kc-space-2); }
.kc-wh-terug:hover { color: var(--kc-accent-strong); }

.kc-wh-filter { display: flex; flex-wrap: wrap; gap: var(--kc-space-2); margin-bottom: var(--kc-space-4); }
.kc-select { background: var(--kc-surface); color: var(--kc-ink); border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius); padding: var(--kc-phi-2) var(--kc-phi-3); font: inherit; min-height: 40px; }
.kc-select:focus { outline: 2px solid var(--kc-accent); outline-offset: 1px; }

.kc-wh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--kc-space-3); margin-bottom: var(--kc-space-5); }
.kc-wh-kaart { position: relative; display: block; text-decoration: none; color: inherit; }
.kc-wh-kaart:hover { border-color: var(--kc-accent); transform: translateY(-2px); }
.kc-wh-kaart__naam { font-family: var(--kc-font-display); font-size: var(--kc-type-lead); font-weight: 600;
  margin: 0 0 var(--kc-space-1) 0; padding-right: 6rem; }
.kc-wh-kaart__meta { color: var(--kc-ink-muted); font-size: var(--kc-type-sm); margin: 0 0 var(--kc-space-2) 0; }
.kc-wh-kaart__voet { display: flex; justify-content: space-between; gap: var(--kc-space-2);
  font-size: var(--kc-type-sm); color: var(--kc-ink-faint); margin: 0; }
.kc-wh-kaart__al { color: var(--kc-accent-strong); display: inline-flex; align-items: center; gap: 4px; }

.kc-wh-badge { display: inline-block; font-size: var(--kc-type-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--kc-warn); background: var(--kc-warn-bg);
  border: 1px solid var(--kc-warn); border-radius: var(--kc-radius-sm); padding: 2px var(--kc-phi-2);
  vertical-align: middle; }
.kc-wh-kaart .kc-wh-badge { position: absolute; top: var(--kc-space-2); right: var(--kc-space-2); }
.kc-wh-badge--ok { color: var(--kc-accent-strong); background: var(--kc-accent-soft); border-color: var(--kc-accent); }
/* Derde herkomst-laag: PEDro-evidence (ter aanvulling). Warm goud, visueel
   onderscheiden van de teal 'geverifieerd'-laag en de amber community-default. */
.kc-wh-badge--pedro { color: var(--kc-cta-strong); background: var(--kc-cta-soft); border-color: var(--kc-cta); }

.kc-wh-sectiekop { font-family: var(--kc-font-display); font-size: var(--kc-type-h3); font-weight: 600;
  letter-spacing: -0.01em; margin: var(--kc-space-5) 0 var(--kc-space-2) 0; }
.kc-card .kc-wh-sectiekop { margin-top: 0; }

.kc-wh-deellijst { display: flex; flex-direction: column; gap: var(--kc-space-1); }
.kc-wh-deelrij { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-space-3);
  padding: var(--kc-phi-3); background: var(--kc-surface); border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius); }
.kc-wh-deelrij__naam { font-weight: 600; }
.kc-wh-deelrij__meta { color: var(--kc-ink-muted); font-size: var(--kc-type-sm); margin-left: var(--kc-space-2); }

.kc-wh-detail { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--kc-space-4); align-items: start; }
.kc-wh-detail__hoofd { display: flex; flex-direction: column; gap: var(--kc-space-3); }
.kc-wh-detail__al { color: var(--kc-accent-strong); display: flex; align-items: center; gap: var(--kc-space-1);
  margin-top: var(--kc-space-2); }
.kc-wh-detail__klein { color: var(--kc-ink-faint); font-size: var(--kc-type-xs); margin: var(--kc-space-2) 0 0 0; }
.kc-wh-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--kc-space-1) var(--kc-space-2); margin: 0; }
.kc-wh-dl dt { color: var(--kc-ink-faint); font-size: var(--kc-type-sm); }
.kc-wh-dl dd { margin: 0; font-size: var(--kc-type-sm); }
.kc-wh-pre { white-space: pre-wrap; }
.kc-wh-fout { color: var(--kc-danger); font-size: var(--kc-type-sm); }
.kc-wh-check { align-items: flex-start; gap: var(--kc-space-2); margin-bottom: var(--kc-space-3); }
.kc-wh-check input { margin-top: 3px; }
.kc-wh-modacties { display: flex; flex-wrap: wrap; gap: var(--kc-space-2); align-items: center;
  margin-top: var(--kc-space-3); }
.kc-wh-modweiger { display: flex; gap: var(--kc-space-1); align-items: center; }
.kc-wh-juridisch { margin: 0; padding-left: var(--kc-space-3); }
.kc-wh-juridisch li { margin-bottom: var(--kc-space-2); }

/* === Catalogus-validatie (validatie-surface) === */
.kc-validatie-rij { text-decoration: none; color: inherit; }
.kc-validatie-rij:hover { border-color: var(--kc-accent); }
.kc-validatie-actie { display: flex; align-items: center; justify-content: space-between;
  gap: var(--kc-space-3); flex-wrap: wrap; }
.kc-validatie-oef { border-left: 4px solid var(--kc-line); }
.kc-validatie-oef--goedgekeurd { border-left-color: var(--kc-accent); }
.kc-validatie-oef--afgekeurd { border-left-color: var(--kc-ink-faint); opacity: 0.6; }
.kc-validatie-oef__kop { display: flex; align-items: center; justify-content: space-between;
  gap: var(--kc-space-2); }
.kc-validatie-contra { color: var(--kc-warn); font-size: var(--kc-type-sm);
  display: flex; gap: var(--kc-space-1); align-items: flex-start; margin: var(--kc-space-2) 0; }

/* PubMed-artikel in de validatie-surface (samenvatting + koppelen). */
.kc-pm-artikel { margin-bottom: var(--kc-space-2); }
.kc-pm-artikel__kop { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--kc-space-2); }
.kc-pm-artikel__titel { font-weight: 600; text-decoration: none; }
.kc-pm-preview { color: var(--kc-ink-muted); font-size: var(--kc-type-sm); margin: var(--kc-space-2) 0; }
.kc-pm-samenvatting { margin-bottom: var(--kc-space-2); }
.kc-pm-samenvatting > summary { cursor: pointer; color: var(--kc-accent-strong);
  font-size: var(--kc-type-sm); }
.kc-pm-samenvatting__tekst { color: var(--kc-ink-muted); font-size: var(--kc-type-sm);
  margin: var(--kc-space-2) 0 0 0; white-space: pre-wrap; }
.kc-pm-koppel { display: flex; gap: var(--kc-space-2); align-items: center; flex-wrap: wrap;
  margin-top: var(--kc-space-2); }
@media (max-width: 720px) { .kc-wh-detail { grid-template-columns: 1fr; } }

/* Werklijst (Sprint 1, Praktijkcontrole): EEN prioritaire attentie-lijst.
   Kaart-grammatica i.p.v. dichte tabel (visueel-eerst): elke patient is een
   rij-kaart met een prioriteit-balk links, naam + context, de sterkste
   aanleiding, en signaal-chips bij meerdere signalen. Tokens-only. */
.kc-werk { display: flex; flex-direction: column; gap: var(--kc-space-2); }
.kc-werk--compact { gap: var(--kc-space-1); }
.kc-werk__rij {
  display: flex; align-items: center; gap: var(--kc-space-2);
  padding: var(--kc-phi-2) var(--kc-space-2);
  background: var(--kc-surface); border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius); text-decoration: none; color: inherit;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.kc-werk__rij:hover {
  transform: translateY(-1px); border-color: color-mix(in srgb, var(--kc-ink) 16%, var(--kc-line));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--kc-ink) 8%, transparent);
}
/* Prioriteit-balk links: traffic-light binnen het merk-palet. */
.kc-werk__prio { flex: 0 0 auto; width: 4px; align-self: stretch;
  min-height: 38px; border-radius: 999px; background: var(--kc-line); }
.kc-werk__rij--hoog .kc-werk__prio { background: var(--kc-danger); }
.kc-werk__rij--midden .kc-werk__prio { background: var(--kc-cta); }
.kc-werk__rij--laag .kc-werk__prio { background: var(--kc-accent); }
.kc-werk__rij--hoog { border-color: color-mix(in srgb, var(--kc-danger) 26%, var(--kc-line)); }
.kc-werk__hoofd { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  gap: 2px; }
.kc-werk__naamrij { display: flex; align-items: baseline; gap: var(--kc-space-2);
  flex-wrap: wrap; }
.kc-werk__naam { font-weight: 600; color: var(--kc-ink); }
.kc-werk__path { font-size: var(--kc-type-sm); color: var(--kc-accent-strong); }
.kc-werk__leeftijd { font-size: var(--kc-type-sm); color: var(--kc-ink-muted); }
.kc-werk__aanleiding { color: var(--kc-ink-muted); font-size: var(--kc-type-sm);
  overflow: hidden; text-overflow: ellipsis; }
.kc-werk__chips { display: flex; gap: var(--kc-space-1); flex-wrap: wrap; margin-top: 2px; }
.kc-werk__chip { font-size: var(--kc-type-xs, 0.7rem); font-weight: 600;
  padding: 1px var(--kc-space-1); border-radius: var(--kc-radius-sm);
  background: var(--kc-bg); color: var(--kc-ink-muted); border: 1px solid var(--kc-line); }
.kc-werk__chip--geblokkeerd { background: var(--kc-danger-bg); color: var(--kc-danger);
  border-color: transparent; }
.kc-werk__chip--radar { background: var(--kc-cta-soft); color: var(--kc-cta-strong);
  border-color: transparent; }
.kc-werk__chip--drop_off { background: var(--kc-cta-soft); color: var(--kc-cta-strong);
  border-color: transparent; }
.kc-werk__chip--meting { background: var(--kc-cta-soft); color: var(--kc-cta-strong);
  border-color: transparent; }
.kc-werk__chip--melding { background: var(--kc-accent-soft); color: var(--kc-accent-strong);
  border-color: transparent; }
/* gemiste_checkin, comm_gefaald en review houden bewust de neutrale basis-chip. */
.kc-werk__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  color: var(--kc-ink-muted); font-size: var(--kc-type-sm); white-space: nowrap; }
.kc-werk__rij:hover .kc-werk__cta { color: var(--kc-accent-strong); }
.kc-werk__teller { display: inline-block; margin-left: var(--kc-space-1);
  min-width: 1.4em; padding: 0 var(--kc-space-1); border-radius: 999px;
  background: var(--kc-cta-soft); color: var(--kc-cta-strong);
  font-size: var(--kc-type-sm); font-weight: 700; text-align: center; }
.kc-werk__meer { float: right; font-size: var(--kc-type-sm); font-weight: 500;
  color: var(--kc-accent-strong); text-decoration: none; display: inline-flex;
  align-items: center; gap: 4px; }
.kc-werk__meer:hover { text-decoration: underline; }
.kc-werk__voet { margin-top: var(--kc-space-2); }
/* Outcome-rij in de herstelkaart (Sprint 2): compacte delta per objectieve maat
   (ROM, kracht, functie, PROM) naast de pijn-nulmeting. Tokens-only. */
.kc-outcomerij { display: flex; flex-direction: column; gap: var(--kc-space-1); }
.kc-outcome { display: flex; align-items: baseline; gap: var(--kc-space-2);
  flex-wrap: wrap; padding: var(--kc-space-1) 0; border-bottom: 1px solid var(--kc-line); }
.kc-outcome:last-child { border-bottom: 0; }
.kc-outcome__naam { font-weight: 600; color: var(--kc-ink); }
.kc-outcome__waarde { color: var(--kc-ink-muted); font-size: var(--kc-type-sm); margin-right: auto; }
/* Kine-wijzigingen op een gegenereerd pakket (Sprint 3, weesdata zichtbaar):
   gegenereerd vs uw versie naast elkaar, als leer-signaal. Tokens-only. */
.kc-wijziging { border: 1px solid var(--kc-line); border-radius: var(--kc-radius);
  padding: var(--kc-space-2); margin-bottom: var(--kc-space-2); }
.kc-wijziging__sectie { font-weight: 600; color: var(--kc-ink); margin-bottom: var(--kc-space-1);
  text-transform: capitalize; }
.kc-wijziging__voor, .kc-wijziging__na { font-size: var(--kc-type-sm); padding: var(--kc-space-1) 0;
  white-space: pre-wrap; }
.kc-wijziging__voor { color: var(--kc-ink-muted); }
.kc-wijziging__na { color: var(--kc-ink); border-top: 1px solid var(--kc-line); }
.kc-wijziging__lbl { display: inline-block; margin-right: var(--kc-space-1);
  font-size: var(--kc-type-xs, 0.7rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--kc-ink-muted); }
.kc-wijziging__na .kc-wijziging__lbl { color: var(--kc-accent-strong); }
.kc-navbadge--cta { background: var(--kc-cta); color: var(--kc-on-fill); }
/* Home-samenvattingsbalk (founder 2026-06-22): home = samenvatting, EEN regel met
   doorverwijzing naar de werklijst, geen tweede werklijst op de home. */
.kc-aandachtbalk { display: flex; align-items: center; justify-content: space-between;
  gap: var(--kc-space-2); padding: var(--kc-phi-2) var(--kc-space-3);
  margin-bottom: var(--kc-space-3); text-decoration: none;
  background: color-mix(in srgb, var(--kc-cta) 8%, var(--kc-surface));
  border: 1px solid color-mix(in srgb, var(--kc-cta) 26%, var(--kc-line));
  border-radius: var(--kc-radius); transition: transform .14s ease, box-shadow .14s ease; }
.kc-aandachtbalk:hover { transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--kc-cta) 18%, transparent); }
.kc-aandachtbalk__tekst { color: var(--kc-ink); }
.kc-aandachtbalk__tekst strong { color: var(--kc-cta-strong); }
.kc-aandachtbalk__cta { display: inline-flex; align-items: center; gap: 4px;
  color: var(--kc-cta-strong); font-weight: 600; font-size: var(--kc-type-sm);
  white-space: nowrap; }
/* Blokkeerreden onder een geblokkeerd pakket (weesdata zichtbaar maken). */
.kc-blokreden { color: var(--kc-danger); font-size: var(--kc-type-sm);
  padding-top: 0; padding-bottom: var(--kc-space-1); }
@media (max-width: 560px) {
  .kc-werk__cta span { display: none; }
}