/* Het kantoorscherm (AOP design v5.5). Eén bestand voor de preview en voor Core: alles staat onder .kd, zodat het
   niets buiten het kantoor raakt. De schil van de preview staat in schil.css. */
@font-face { font-family: Geist; src: url(../fonts/geist.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(../fonts/geist-mono.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

.kd {
  --bg: #f7f5f4; --kaart: #ffffff; --vlak: #ebe8e4; --vlak-licht: #efece8; --vlak-zacht: #f3f1ef;
  --lijn: #e9e6e2; --lijn-sterk: #d6d1cb; --lijn-veld: #8f8983;
  --inkt: #1e1e1e; --inkt-2: #4a4642; --grijs: #6b6661; --grijs-groot: #8a8580;
  --ring: 0 0 0 1px rgba(30,30,30,.06);
  --schaduw-chip: 0 2px 10px rgba(0,0,0,.08);
  --schaduw-kaart: var(--ring), 0 4px 61px rgba(0,0,0,.03);
  --schaduw-hover: 0 0 0 1px rgba(30,30,30,.08), 0 2px 10px rgba(0,0,0,.08), 0 4px 61px rgba(0,0,0,.06);
  --schaduw-zwevend: 0 0 0 1px rgba(30,30,30,.06), 0 18px 48px -14px rgba(30,30,30,.22);
  --accent: #ad4d2c; --op-accent: #ffffff;
  --verloop-knop: linear-gradient(180deg, #ad4d2c 0%, #f2a075 100%) top / 100% 800% no-repeat;
  --verloop-zacht: linear-gradient(180deg, #f6e4dc 0%, #fbeee4 100%);
  --schaduw-knop-primair: 0 1px 2px rgba(173,77,44,.25);
  --ok: #2f7a55; --fout: #b3261e; --let: #9a6410;
  --terminal: #161718; --terminal-tekst: #e8e4df; --terminal-zacht: #9b958f;
  --r-kaart: 20px; --r-tegel: 14px; --r-pill: 100px; --r-veld: 12px;
  --font: Geist, system-ui, "Segoe UI", Arial, sans-serif; --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --uit: cubic-bezier(.23,1,.32,1);
  --zijbalk: 228px; --topbalk: 64px; --goot: 16px; --paneel: 372px;
  color-scheme: light;
}
.kd[data-thema="donker"] {
  --bg: #0f0f0f; --kaart: #1e1e1e; --vlak: #2c2926; --vlak-licht: #282523; --vlak-zacht: #181818;
  --lijn: #2e2b29; --lijn-sterk: #45413e; --lijn-veld: #7a746e;
  --inkt: #f7f5f4; --inkt-2: #d6d2cd; --grijs: #aaa59f; --grijs-groot: #8f8a84;
  --ring: 0 0 0 1px rgba(255,255,255,.08);
  --schaduw-chip: 0 0 0 1px rgba(255,255,255,.1), 0 4px 14px rgba(0,0,0,.4);
  --schaduw-kaart: var(--ring);
  --schaduw-hover: 0 0 0 1px rgba(255,255,255,.16);
  --schaduw-zwevend: 0 0 0 1px rgba(255,255,255,.1), 0 20px 50px -12px rgba(0,0,0,.7);
  --accent: #f2a075;
  --verloop-zacht: linear-gradient(180deg, #3a2219 0%, #33271d 100%);
  --ok: #6cc79a; --fout: #ef7a66; --let: #e3b062;
  --terminal: #0b0b0c;
  color-scheme: dark;
}

.kd, .kd * { box-sizing: border-box; min-width: 0; }
.kd { -webkit-text-size-adjust: 100%; }
.kd { margin: 0; background: var(--bg); color: var(--inkt); font: 15px/1.5 var(--font); letter-spacing: -.02em; -webkit-font-smoothing: antialiased; }
.kd button, .kd input, .kd textarea { font: inherit; color: inherit; letter-spacing: inherit; }
.kd button { cursor: pointer; }
.kd :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kd .verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kd [hidden] { display: none !important; }
.kd, .kd * { scrollbar-width: none; }
.kd::-webkit-scrollbar, .kd *::-webkit-scrollbar { display: none; }

/* ---------- schil ---------- */
.kd[data-thema="donker"] .logo-licht, .kd:not([data-thema="donker"]) .logo-donker { display: none !important; }
/* Uitleg onder de naam: dezelfde knop wordt groter, als één vlak, en schuift niets opzij. */
/* Ingeklapt: alleen pictogrammen. Bij aanwijzen schuift de knop zelf uit met zijn naam. */
.kd .zoek { margin-left: auto; display: flex; align-items: center; gap: 10px; width: min(300px, 26vw); height: 42px; padding: 0 16px; flex: none;
  border-radius: var(--r-pill); background: var(--kaart); box-shadow: var(--schaduw-chip); color: var(--grijs); }
.kd .zoek svg { width: 17px; height: 17px; flex: none; }
.kd .zoek input { border: 0; outline: 0; background: none; width: 100%; font-size: 14px; color: var(--inkt); }
.kd .zoek input::placeholder { color: var(--grijs); }
.kd .zoek:focus-within { box-shadow: var(--schaduw-chip), 0 0 0 2px var(--accent); }
.kd .rond { position: relative; width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: var(--kaart); box-shadow: var(--schaduw-chip);
  display: grid; place-items: center; color: var(--inkt); transition: transform .15s var(--uit), box-shadow .15s, scale .15s var(--uit); }
.kd .rond:hover { box-shadow: var(--schaduw-hover); }

.kd .rond svg { width: 19px; height: 19px; }
.kd .rond .bol, .kd .sup-knop .bol { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--inkt); color: var(--bg);
  font-size: 12px; font-weight: 650; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
/* Op de brede knop staat het getal naast de naam, niet op de laatste letter. */
.kd .sup-knop .bol { right: -8px; }

/* ---------- pagina: het kantoor krijgt de ruimte ---------- */
.kd .pagina { width: 100%; margin: 0 auto; padding: 16px 20px 40px; }
.kd .werkvlak { display: grid; grid-template-columns: minmax(0, 1fr) var(--paneel); gap: var(--goot);
  height: clamp(620px, calc(100dvh - var(--topbalk) - 32px), 1300px); }
.kd .podium { position: relative; border-radius: var(--r-kaart); background: var(--kaart); box-shadow: var(--schaduw-kaart); overflow: hidden; isolation: isolate; container-type: inline-size; }
/* Een smal kantoorvlak (smal venster) krijgt een compacte omzetwidget en kleinere logo's, zodat het kantoor de ruimte houdt. */
@container (max-width: 860px) {
  .kd .podium .widgets { width: 252px; }
  .kd .podium .widget { padding-inline: 14px; }
  .kd .podium .mo-vak, .kd .podium .mo-as { display: none; }
  .kd .podium .mo-bedrag { font-size: 26px; }
  .kd .podium .koppelingen { max-width: calc(100% - 290px); gap: 2px; }
  .kd .podium .koppeling { width: 30px; height: 30px; } .kd .podium .koppeling img { width: 19px; height: 19px; }
}
.kd .scene-host { position: absolute; inset: 0; touch-action: none; }
.kd .scene-host canvas { display: block; width: 100%; height: 100%; outline: none; }
.kd .lijnen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.kd .lijnen path { fill: none; stroke: var(--lk); stroke-width: 1.2; stroke-dasharray: 1.5 5; stroke-linecap: round; opacity: .2; transition: opacity .2s; }
.kd[data-thema="donker"] .lijnen path { opacity: .26; }
.kd .lijnen.gekozen path { opacity: .06; }
.kd .lijnen path.bundel { stroke-dasharray: none; stroke-width: 1; opacity: .13; }
.kd[data-thema="donker"] .lijnen path.bundel { opacity: .2; }
.kd .lijnen path.let, .kd .lijnen path.storing { stroke-width: 1.4; stroke-dasharray: 2 4; opacity: .55; }
.kd .lijnen.gekozen path.bundel { opacity: .04; }
.kd .lijnen path.aan, .kd .lijnen.gekozen path.aan { stroke-width: 2; stroke-dasharray: 3 4; opacity: 1; }
.kd .laag { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; transition: opacity .5s var(--uit); }
.kd .lijnen { transition: opacity .6s var(--uit); }
.kd .podium.intro .laag, .kd .podium.intro .lijnen { opacity: 0; }
.kd .laag button { pointer-events: auto; }
.kd .podium-staat { position: absolute; left: 24px; top: 84px; margin: 0; font-size: 13px; color: var(--grijs); z-index: 3; }
.kd .podium-staat:empty { display: none; }

/* linksboven: widgets. Elke widget heeft dezelfde opbouw (kop, kerncijfer, vergelijking, beeld, drie cijfers),
   zodat ze even hoog zijn en een stapel niet verspringt als je bladert. */
.kd .widgets { position: absolute; z-index: 4; left: 16px; top: 16px; width: 272px; display: grid; gap: 12px; align-content: start; }
.kd .widget { padding: 13px 16px 11px; border-radius: 18px; background: var(--kaart); box-shadow: var(--schaduw-zwevend); }
.kd .w-inhoud { display: grid; gap: 2px; }
.kd .widget.stapel .w-inhoud { animation: kd-zacht .25s var(--uit); }
.kd .w-voet { justify-self: start; display: flex; align-items: center; gap: 4px; margin-top: -4px; padding: 3px 4px 3px 6px; border-radius: var(--r-pill); background: var(--kaart); box-shadow: var(--schaduw-chip); }
.kd .w-stippen { display: flex; }
.kd .w-stippen button { position: relative; width: 26px; height: 30px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.kd .w-stippen button::before { content: ''; width: 6px; height: 6px; border-radius: 3px; background: var(--grijs-groot); transition: width .2s var(--uit), background .2s; }
.kd .w-stippen button:hover::before { background: var(--inkt-2); }
.kd .w-stippen button[aria-pressed="true"]::before { width: 16px; background: var(--accent); }
.kd .w-stippen button::after { content: ''; position: absolute; inset: -6px 0; }
.kd .w-aanpassen { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--grijs); font: inherit; font-size: 12.5px; font-weight: 560; cursor: pointer; }
.kd .w-aanpassen:hover, .kd .w-aanpassen[aria-expanded="true"] { color: var(--inkt); background: var(--vlak-zacht); }
.kd .w-aanpassen::after { content: ''; position: absolute; inset: -6px 0; }
/* kanaalwidgets: terug naar je eigen widgets, en het logo van het kanaal in de kop */
.kd .w-terug { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; border: 0; border-radius: var(--r-pill);
  background: var(--kaart); box-shadow: var(--schaduw-chip); font: inherit; font-size: 13px; font-weight: 600; color: var(--inkt); cursor: pointer; position: relative; }
.kd .w-terug:hover { box-shadow: var(--schaduw-hover); }
.kd .w-terug::after { content: ''; position: absolute; inset: -5px 0; }
.kd .mo-kanaal { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--inkt); }
.kd .mo-kanaal .kop-logo { width: 18px; height: 18px; }
.kd .mo-kanaal .kop-logo img { width: 16px; height: 16px; }
.kd .mo-vergelijk.probleem { color: var(--fout); }
/* ingeklapt: één regel per widget */
.kd .w-minis { display: grid; padding: 6px; border-radius: 18px; background: var(--kaart); box-shadow: var(--schaduw-zwevend); }
.kd .w-mini { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 12px;
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.kd .w-mini + .w-mini::before { content: ''; position: absolute; left: 10px; right: 10px; top: 0; border-top: 1px solid var(--lijn); }
.kd .w-mini:hover { background: var(--vlak-zacht); }
.kd .w-mini:hover::before, .kd .w-mini:hover + .w-mini::before { opacity: 0; }
.kd .w-mini span { font-size: 12.5px; font-weight: 500; color: var(--grijs); white-space: nowrap; }
.kd .w-mini b { font-size: 15px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd .widgets.in { width: 220px; }
.kd .w-inklap { padding: 0 8px; }
.kd .mo-eenheid { margin-left: 7px; font-size: 14px; font-weight: 560; letter-spacing: -.01em; color: var(--grijs); }
.kd .mo-stijging.neutraal { background: var(--vlak-zacht); color: var(--inkt-2); }
.kd .mo-stijging.wacht { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.kd .mo-staven { display: flex; align-items: flex-end; gap: 3px; height: 54px; }
.kd .mo-staven i { position: relative; flex: 1; min-height: 3px; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--inkt) 13%, transparent); transition: height .4s var(--uit); }
.kd .mo-staven i::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 0; height: 54px; }
.kd .mo-staven i:hover { background: color-mix(in srgb, var(--inkt) 28%, transparent); }
.kd .mo-staven i.nu:hover { background: color-mix(in srgb, var(--accent) 80%, var(--inkt)); }
.kd .mo-staven i.nu { background: var(--accent); }
.kd .mo-rijen { list-style: none; margin: 0; padding: 0; height: 54px; display: grid; grid-template-rows: repeat(3, 1fr); align-items: center; }
.kd .mo-rijen li { display: flex; }
.kd .mo-rij { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 62px 40px; gap: 8px; align-items: center; padding: 0; border: 0; background: none;
  font: inherit; font-size: 12px; line-height: 1.2; color: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
.kd .mo-rij::after { content: ''; position: absolute; inset: -3px -6px; border-radius: 8px; }
.kd .mo-rij:hover::after { background: color-mix(in srgb, var(--inkt) 5%, transparent); }
.kd .mo-naam { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--inkt-2); }
.kd .mo-naam span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd .mo-naam i { width: 6px; height: 6px; border-radius: 50%; background: var(--afd); flex: none; }
.kd .mo-balk { position: relative; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--inkt) 9%, transparent); }
.kd .mo-balk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: color-mix(in srgb, var(--inkt) 42%, transparent); transition: width .4s var(--uit); }
.kd .mo-balk i.let { background: var(--let); }
.kd .mo-balk i.krap { background: var(--fout); }
.kd .mo-balk em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--inkt-2); }
.kd .mo-rijen b { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd .mo-kop { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 560; color: var(--grijs); }
.kd .mo-kop > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
/* De titel van een widget is een link naar waar het over gaat: rustig, pas bij aanwijzen duidelijk. */
.kd .mo-titel { position: relative; display: inline-flex; align-items: center; gap: 7px; margin: -4px 0 -4px -8px; padding: 4px 6px 4px 8px; border: 0; border-radius: var(--r-pill);
  background: none; font: inherit; color: inherit; cursor: pointer; }
.kd .mo-titel svg { opacity: 0; margin-left: -2px; transition: opacity .15s, transform .15s var(--uit); }
.kd .mo-titel:hover, .kd .mo-titel:focus-visible { background: var(--vlak-zacht); color: var(--inkt); }
.kd .mo-titel:hover svg, .kd .mo-titel:focus-visible svg { opacity: 1; transform: translateX(2px); }
.kd .mo-titel::after { content: ''; position: absolute; inset: -8px 0; }
.kd button.mo-stijging { border: 0; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.kd button.mo-stijging:hover { filter: brightness(.96); box-shadow: inset 0 0 0 1px currentColor; }
.kd .mo-kop i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--w, var(--ok)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--w, var(--ok)) 20%, transparent); }
.kd .mo-stijging { height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok);
  font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.kd .mo-stijging.daalt { background: color-mix(in srgb, var(--fout) 14%, transparent); color: var(--fout); }
.kd .mo-bedrag { margin-top: 6px; font-size: 30px; line-height: 1.05; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
/* Twee regels ruimte voor datums, vergelijking en voorlopig: niets wordt afgekapt en elke widget is even hoog. */
.kd .mo-vergelijk { min-height: 32px; font-size: 12px; line-height: 16px; color: var(--grijs); text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.kd .mo-vak { position: relative; height: 54px; margin-top: 6px; }
/* Geen gegevens: een rustige regel op de plek van het beeld, even hoog, zodat de widget niet verspringt. */
.kd .mo-vak.mo-leeg { display: grid; place-items: center; border-radius: 12px; background: var(--vlak-zacht); font-size: 12.5px; color: var(--grijs); }
.kd .mo-vak.mo-leeg .mo-rijen { display: none; }
.kd .mo-vak.mo-koppel { background: none; box-shadow: inset 0 0 0 1px var(--lijn); }
.kd .mo-vergelijk.mo-koppeltekst { margin-top: 8px; font-size: 13px; line-height: 17px; min-height: 34px; color: var(--inkt-2); }
.kd .mo-grafiek { display: block; width: 100%; height: 54px; overflow: visible; }
.kd .mo-nu { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  pointer-events: none; }
.kd .mo-as { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; color: var(--grijs); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd .mo-as span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kd .mo-cijfers { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lijn); }
.kd .mo-cijfers > * { display: grid; gap: 1px; padding: 0 0 0 10px; border-left: 1px solid var(--lijn); }
.kd .mo-cijfers > :first-child { padding-left: 0; border-left: 0; }
.kd .mo-cijfers button { position: relative; border-top: 0; border-right: 0; border-bottom: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.kd .mo-cijfers button::after { content: ''; position: absolute; inset: -8px -4px; border-radius: 10px; }
.kd .mo-cijfers button:hover b { color: var(--accent); }
.kd .mo-cijfers small { font-size: 12px; color: var(--grijs); white-space: nowrap; }
.kd .mo-cijfers b { font-size: 15px; font-weight: 680; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* het merk van het platform, bijna doorzichtig rechtsonder in het kantoor */
.kd .podium-merk { position: absolute; z-index: 3; right: 22px; bottom: 78px; width: 92px; pointer-events: none; opacity: .2; }
.kd .podium-merk img { display: block; width: 100%; }
.kd .podium-merk .logo-donker { display: none; }
.kd[data-thema="donker"] .podium-merk { opacity: .24; }
.kd[data-thema="donker"] .podium-merk .logo-licht { display: none; }
.kd[data-thema="donker"] .podium-merk .logo-donker { display: block; }

/* bovenaan: alle koppelingen, met lijntjes naar de afdelingen die ze gebruiken */
.kd .koppelingen { position: absolute; z-index: 4; top: 16px; right: 16px; display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 14px;
  border-radius: var(--r-pill); background: var(--kaart); box-shadow: var(--schaduw-zwevend); max-width: calc(100% - 320px); overflow: hidden; }
.kd .koppelingen > span { flex: none; font-size: 12.5px; font-weight: 560; color: var(--grijs); margin-right: 6px; white-space: nowrap; }
/* Merklogo's altijd uitgesneden: geen vlak of cirkel erachter, met een eigen versie voor donker. */
.kd .koppeling { position: relative; width: 36px; height: 36px; flex: none; border: 0; border-radius: 10px; background: none; display: grid; place-items: center;
  transition: transform .15s var(--uit), background .15s, scale .15s var(--uit); }
.kd .koppeling:hover { background: var(--vlak-zacht); transform: translateY(-1px); }
.kd .koppeling .logo-d { display: none; }
.kd[data-thema="donker"] .koppeling .logo-l { display: none; }
.kd[data-thema="donker"] .koppeling .logo-d { display: block; }
.kd .koppeling::after { content: ''; position: absolute; inset: -5px -2px; }
.kd .koppeling img { width: 22px; height: 22px; object-fit: contain; }
.kd .koppeling[aria-pressed="true"] { background: var(--vlak-zacht); box-shadow: inset 0 0 0 1.5px var(--accent); }
.kd .koppeling i { position: absolute; right: 2px; bottom: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--kaart); }
.kd .koppeling[data-koppeling][data-status="ok"] i { display: none; }
.kd .koppeling[data-status="let"] i { background: var(--let); }
.kd .koppeling[data-status="onbekend"] i { background: var(--kaart); box-shadow: 0 0 0 2px var(--kaart), inset 0 0 0 1.5px var(--grijs-groot); }
.kd .koppeling[data-status="storing"] i { width: 9px; height: 9px; background: var(--fout); }
/* Per soort een dun streepje: verkoop, klantcontact, logistiek, marketing, financiën. */
.kd .koppeling.scheiding { margin-left: 9px; }
.kd .koppeling.scheiding::before { content: ''; position: absolute; left: -7px; top: 10px; bottom: 10px; width: 1px; background: var(--lijn-sterk); }
.kd .koppeling.meer { width: 40px; margin-left: 2px; border-radius: var(--r-pill); color: var(--grijs); font: inherit; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer; }
.kd .koppeling.meer span { display: inline-flex; }
.kd .koppeling.meer.telt { background: var(--vlak-zacht); color: var(--inkt); }
.kd .koppeling.meer[aria-expanded="true"], .kd .koppeling.meer.gekozen { background: var(--vlak-zacht); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--inkt); }
.kd .logo-d { display: none; }
.kd[data-thema="donker"] .kop-logo .logo-l { display: none; }
.kd[data-thema="donker"] .kop-logo .logo-d { display: block; }

/* alle koppelingen: status per soort; wat aandacht vraagt staat bovenaan */
.kd .kop-paneel { position: absolute; z-index: 6; right: 16px; top: 72px; width: min(380px, calc(100% - 32px)); max-height: calc(100% - 150px); display: flex; flex-direction: column;
  border-radius: 20px; background: var(--kaart); box-shadow: var(--schaduw-zwevend); animation: kd-popIn .18s var(--uit); }
.kd .kp-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 14px 10px 20px; }
.kd .kp-kop h2 { margin: 0; font-size: 17px; font-weight: 680; letter-spacing: -.03em; }
.kd .kp-kop p { margin: 2px 0 0; font-size: 12.5px; color: var(--grijs); }
.kd .kp-kop .rond { width: 40px; height: 40px; box-shadow: none; background: var(--vlak-zacht); }
.kd .kop-paneel .kp-zoek { width: auto; margin: 0 16px 6px; height: 40px; flex: none; }
.kd .kp-lijst { overflow-y: auto; padding: 0 8px 12px; scrollbar-width: none; overscroll-behavior: contain; }
.kd .kp-lijst::-webkit-scrollbar { display: none; }
.kd .kp-groep h3 { display: flex; align-items: center; gap: 6px; margin: 12px 12px 4px; font-size: 12.5px; font-weight: 600; color: var(--grijs); }
.kd .kp-groep h3 span { font-weight: 500; }
.kd .kp-groep.aandacht h3 { color: var(--inkt); }
.kd .kp-groep ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kd .kop-rij { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px 8px 8px;
  border: 0; border-radius: 14px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.kd .kop-rij:hover { background: var(--vlak-zacht); }
.kd .kop-rij[aria-pressed="true"] { background: var(--vlak-zacht); box-shadow: inset 0 0 0 1.5px var(--accent); }
.kd .kp-groep.aandacht .kop-rij { align-items: start; }
.kd .kp-groep.aandacht .kop-rij .chip { margin-top: 2px; }
.kd .kop-logo { display: grid; place-items: center; width: 28px; height: 28px; }
.kd .kop-logo img { width: 22px; height: 22px; object-fit: contain; }
.kd .kop-tekst { display: grid; gap: 1px; min-width: 0; }
.kd .kop-tekst strong { font-size: 14px; font-weight: 600; }
.kd .kop-tekst small { font-size: 12px; line-height: 1.4; color: var(--grijs); }
.kd .kp-groep:not(.aandacht) .kop-tekst small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd .kp-leeg { margin: 6px 12px 12px; font-size: 13.5px; color: var(--grijs); }

/* onderaan: weergave, live stroom en camera */
.kd .podium-onder { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.kd .podium-onder > * { pointer-events: auto; }
/* De beeldknoppen staan altijd rechts, ook als de stroom er niet is (smal kantoor, tv). */
.kd .podium-onder .camera-knoppen { margin-left: auto; }
.kd .stroom { flex: 1; min-width: 0; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0;
  border-radius: var(--r-pill); background: var(--kaart); box-shadow: var(--schaduw-chip); font-size: 13px; color: var(--inkt-2); text-align: left; }
.kd .stroom:empty { visibility: hidden; }
.kd .stroom i { width: 7px; height: 7px; border-radius: 50%; background: var(--afd); flex: none; }
.kd .stroom b { font-weight: 620; color: var(--inkt); white-space: nowrap; flex: none; }
.kd .stroom span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd .stroom time { flex: none; margin-left: auto; color: var(--grijs); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kd .stroom.nieuw span, .kd .stroom.nieuw b { animation: kd-opkomen .35s var(--uit); }
@keyframes kd-opkomen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kd .camera-knoppen { display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--kaart); box-shadow: var(--schaduw-chip); flex: none; }
.kd .camera-knoppen .rond { width: 40px; height: 40px; box-shadow: none; background: none; }
.kd .camera-knoppen .rond:hover { background: var(--vlak-zacht); }

/* Overzicht: altijd zichtbaar; licht op zodra je bent weggedraaid of ingezoomd. */
.kd .overzicht { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--inkt-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s, scale .15s var(--uit); }
.kd .overzicht svg { width: 17px; height: 17px; }
.kd .overzicht:hover { background: var(--vlak-zacht); color: var(--inkt); }
.kd .overzicht.aan { background: var(--inkt); color: var(--bg); }
.kd .camera-knoppen .draaimodus[aria-pressed="true"] { background: var(--vlak-licht); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
@container (max-width: 860px) { .kd .podium .stroom { display: none; } }

/* Rechtermuisknop: een eigen menu op de plek van de klik. */
.kd .contextmenu { position: absolute; z-index: 12; min-width: 236px; max-width: 300px; padding: 6px; border-radius: 16px; background: var(--kaart); box-shadow: var(--schaduw-zwevend);
  display: grid; gap: 1px; animation: kd-popIn .14s var(--uit); }
.kd .contextmenu .cm-kop { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px 8px; font-size: 13.5px; font-weight: 650; }
.kd .contextmenu .cm-kop i { width: 9px; height: 9px; border-radius: 50%; background: var(--afd); flex: none; }
.kd .contextmenu .cm-kop small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--grijs); }
.kd .contextmenu > button { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font-size: 14px; text-align: left; color: var(--inkt); }
.kd .contextmenu > button:hover, .kd .contextmenu > button:focus-visible { background: var(--vlak-zacht); outline: none; }
.kd .contextmenu .cm-vink { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 10px; border-radius: 6px; flex: none;
  box-shadow: inset 0 0 0 1.5px var(--lijn-veld); color: transparent; }
.kd .contextmenu [aria-checked="true"] .cm-vink { background: var(--inkt); box-shadow: none; color: var(--bg); }
.kd .contextmenu hr { border: 0; border-top: 1px solid var(--lijn); margin: 4px 6px; }
.kd .cm-form { display: grid; gap: 10px; padding: 2px 6px 6px; }
.kd .cm-form label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 560; color: var(--inkt-2); }
.kd .cm-form input[type="text"], .kd .cm-form input:not([type]) { height: 40px; padding: 0 12px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-veld); background: var(--kaart); font-size: 14px; outline: 0; }
.kd .cm-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.kd .cm-form fieldset { border: 0; margin: 0; padding: 0; }
.kd .cm-form legend { font-size: 12.5px; font-weight: 560; color: var(--inkt-2); margin-bottom: 6px; }
.kd .cm-kleuren { display: flex; gap: 6px; flex-wrap: wrap; }
.kd .cm-kleur { position: relative; width: 28px; height: 28px; cursor: pointer; }
.kd .cm-kleur input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.kd .cm-kleur i { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--k); }
.kd .cm-kleur input:checked + i { box-shadow: 0 0 0 2px var(--kaart), 0 0 0 4px var(--k); }
.kd .cm-kleur input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 4px; }
.kd .cm-rij { display: flex; justify-content: flex-end; gap: 6px; }

/* afdelingskaart: zweeft boven, onder of naast het eiland, nooit eroverheen */
.kd .afd-kaart { position: absolute; z-index: 2; left: 0; top: 0; width: 188px; padding: 10px 12px 10px; border: 0; border-radius: 14px; text-align: left;
  background: var(--kaart); box-shadow: var(--schaduw-zwevend); color: var(--inkt); display: grid; gap: 6px; will-change: transform; transition: box-shadow .15s, translate .15s var(--uit), scale .15s var(--uit); }
.kd .afd-kaart:hover, .kd .afd-kaart.aangewezen { box-shadow: var(--schaduw-zwevend), 0 0 0 1.5px color-mix(in srgb, var(--afd) 60%, transparent); }
.kd .afd-kaart[aria-pressed="true"] { box-shadow: var(--schaduw-zwevend), 0 0 0 2px var(--afd); }
.kd .afd-kaart .kort { display: none; }
.kd .afd-kaart.compact { width: auto; padding: 0 14px 0 12px; height: 36px; border-radius: var(--r-pill); display: flex; align-items: center; }
.kd .afd-kaart.compact > :not(.kort) { display: none; }
.kd .afd-kaart.compact .kort { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.kd .kort i { width: 8px; height: 8px; border-radius: 50%; background: var(--afd); flex: none; }
.kd .kort b { font-weight: 680; font-variant-numeric: tabular-nums; margin-left: 2px; }
.kd .kort .kort-label { font-weight: 500; color: var(--grijs); font-size: 12px; }
.kd .kort em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--accent); }
.kd .afd-kop { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 620; letter-spacing: -.02em; }
.kd .afd-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd .afd-kop i { width: 9px; height: 9px; border-radius: 50%; background: var(--afd); flex: none; }
.kd .afd-kop .afd-team { margin-left: auto; font-weight: 500; color: var(--grijs); font-size: 12px; white-space: nowrap; flex: none; }
.kd .afd-kop .afd-team em { font-style: normal; font-weight: 600; color: var(--accent); }
.kd .afd-cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: space-between; column-gap: 12px; }
.kd .afd-cijfer { display: grid; gap: 0; }
.kd .afd-cijfer span { font-size: 12px; line-height: 1.3; color: var(--grijs); text-wrap: balance; overflow-wrap: break-word; }
.kd .afd-cijfer b { font-size: 17px; line-height: 1.15; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd .druk { display: flex; height: 4px; border-radius: 4px; overflow: hidden; background: var(--vlak); }
.kd .druk i { display: block; height: 100%; }
.kd .druk .w { background: var(--ok); } .kd .druk .a { background: var(--accent); } .kd .druk .f { background: var(--fout); }
.kd .afd-voet { display: flex; gap: 9px; font-size: 12px; color: var(--grijs); white-space: nowrap; }
.kd .afd-voet > span { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.kd .afd-voet b { color: var(--inkt); font-weight: 600; font-variant-numeric: tabular-nums; }
.kd .afd-voet .wacht b { color: var(--accent); }
.kd .afd-voet .klaar { margin-left: auto; }

/* namen in de scène: klein en rustig */
.kd .anker { position: absolute; z-index: 3; left: 0; top: 0; will-change: transform; }
.kd .anker-brein { z-index: 2; }
.kd .chip-scene { position: relative; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 6px; border: 0;
  border-radius: var(--r-pill); background: var(--kaart); box-shadow: var(--schaduw-chip); font-size: 12px; font-weight: 560; white-space: nowrap; color: var(--inkt);
  animation: kd-zacht .2s var(--uit); }
.kd .chip-scene::after { content: ''; position: absolute; inset: -11px 0; }
.kd .chip-scene i { width: 6px; height: 6px; border-radius: 50%; background: var(--afd, var(--grijs)); flex: none; }
.kd .chip-scene em { font-style: normal; font-weight: 500; color: var(--grijs); }
.kd .chip-scene[data-staat="wacht"] { box-shadow: var(--schaduw-chip), 0 0 0 1.5px var(--accent); }
.kd .chip-scene[data-staat="wacht"] em { color: var(--accent); }
.kd .chip-scene[data-staat="mislukt"] em { color: var(--fout); }
.kd .chip-scene.hulp { background: var(--vlak-zacht); font-weight: 500; }
/* Wie op jou wacht of mislukt is maar geen naam in beeld heeft: alleen een stip boven het hoofd. Aanwijzen toont de naam. */
.kd .chip-scene.stip[data-staat] { width: 10px; height: 10px; padding: 0; gap: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--kaart), var(--schaduw-chip); }
.kd .chip-scene.stip[data-staat="mislukt"] { background: var(--fout); }
.kd .chip-scene.stip::after { inset: -9px; border-radius: 50%; }
.kd .brein-chip { position: relative; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 10px; border: 0;
  border-radius: var(--r-pill); background: var(--kaart); box-shadow: var(--schaduw-zwevend); font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--inkt); }
.kd .brein-chip::after { content: ''; position: absolute; inset: -6px 0; }
.kd .brein-chip svg { width: 17px; height: 17px; color: var(--accent); }
.kd .brein-chip span { font-weight: 450; color: var(--grijs); font-variant-numeric: tabular-nums; }
.kd .flits { position: absolute; z-index: 1; left: 0; top: 0; pointer-events: none; }
.kd .flits span { display: inline-block; transform: translate(-50%, 0); padding: 4px 10px; border-radius: var(--r-pill); background: var(--kaart);
  box-shadow: var(--schaduw-chip), inset 3px 0 0 var(--afd); font: 500 12px/1.4 var(--mono); letter-spacing: 0; color: var(--inkt-2); white-space: nowrap;
  animation: kd-flits 2.6s var(--uit) forwards; }
@keyframes kd-flits { 0% { opacity: 0; transform: translate(-50%, 10px); } 15% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -46px); } }
@keyframes kd-zacht { from { opacity: 0; } to { opacity: 1; } }

/* ---------- knoppen ---------- */
.kd .knop { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 560; white-space: nowrap; transition: transform .15s var(--uit), box-shadow .15s, background-position .3s, scale .15s var(--uit); }

.kd .knop-primair { background: var(--verloop-knop); color: var(--op-accent); box-shadow: var(--schaduw-knop-primair); }
.kd .knop-primair:hover { background-position: 0 22%; }
.kd .knop-primair:disabled { background: var(--vlak-licht); color: var(--grijs); box-shadow: none; cursor: default; transform: none; }
.kd .knop-wit { background: var(--kaart); color: var(--inkt); box-shadow: var(--schaduw-chip); }
.kd .knop-wit:hover { box-shadow: var(--schaduw-hover); }
.kd .knop-vlak { background: none; color: var(--inkt-2); padding: 0 12px; }
.kd .knop-vlak:hover { color: var(--inkt); background: color-mix(in srgb, var(--inkt) 6%, transparent); }
.kd .knop-vlak.weg { color: var(--fout); }
.kd .knop-klein { height: 36px; padding: 0 14px; font-size: 13px; }
/* Kleine bediening houdt een klikvlak van minstens 44 px hoog, zonder groter te ogen. */
.kd .knop-klein::after, .kd .segment button::after, .kd .kies-knop::after, .kd .focus-chip::after { content: ''; position: absolute; inset: -4px 0; }
.kd .segment button, .kd .kies-knop, .kd .focus-chip { position: relative; }

.kd .segment { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--kaart); box-shadow: var(--schaduw-chip); flex: none; }
.kd .segment button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: none;
  color: var(--grijs); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s, scale .15s var(--uit); }
.kd .segment button:hover { color: var(--inkt); }
.kd .segment button[aria-pressed="true"] { background: var(--vlak-licht); color: var(--inkt); font-weight: 600; }
.kd .segment button[aria-pressed="true"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.kd .segment .aantal { color: var(--grijs); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- rechterpaneel ---------- */
.kd .paneel { position: relative; display: flex; flex-direction: column; gap: var(--goot); min-height: 0; }
.kd .blok { border-radius: var(--r-kaart); background: var(--kaart); box-shadow: var(--schaduw-kaart); }
.kd .opdracht { padding: 16px 16px 14px; display: grid; gap: 10px; position: relative; z-index: 4; }
.kd .opdracht-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kd .opdracht .titel, .kd .blok-kop h2 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.03em; }
.kd textarea { width: 100%; resize: none; padding: 12px 14px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-veld); background: var(--kaart);
  font-size: 14.5px; line-height: 1.45; outline: 0; transition: border-color .15s, box-shadow .15s; caret-color: var(--accent); display: block; }
.kd textarea::placeholder { color: var(--grijs); }
.kd textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
/* Een tekstveld toont focus met zijn rand en ring; geen tweede omlijning eromheen. */
.kd textarea:focus-visible { outline: none; }
.kd .opdracht textarea { min-height: 58px; }
.kd .opdracht-acties { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kd .kies { position: relative; }
.kd .kies-knop { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
  background: var(--vlak-zacht); font-size: 13.5px; font-weight: 560; white-space: nowrap; }
.kd .kies-knop:hover { background: var(--vlak-licht); }
.kd .kies-knop i { width: 8px; height: 8px; border-radius: 50%; background: var(--afd); }
.kd .kies-knop svg { width: 14px; height: 14px; color: var(--grijs); transition: transform .15s; }
.kd .kies-knop[aria-expanded="true"] svg { transform: rotate(180deg); }
.kd .kies-lijst { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: 252px; max-height: 360px; overflow: auto; margin: 0; padding: 6px; list-style: none; border-radius: 16px;
  background: var(--kaart); box-shadow: var(--schaduw-zwevend); animation: kd-popIn .15s var(--uit); }
.kd .kies-lijst li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.kd .kies-lijst li i { width: 8px; height: 8px; border-radius: 50%; background: var(--afd); flex: none; }
.kd .kies-lijst li span { margin-left: auto; color: var(--grijs); font-size: 12.5px; white-space: nowrap; }
.kd .kies-lijst li[aria-selected="true"] { font-weight: 600; }
.kd .kies-lijst li.actief, .kd .kies-lijst li:hover { background: var(--vlak-zacht); }
@keyframes kd-popIn { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
.kd .schakel { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--inkt-2); cursor: pointer; user-select: none; min-height: 44px; }
.kd .schakel input { appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 20px; background: var(--lijn-sterk); position: relative; cursor: pointer; transition: background .15s; flex: none; }
.kd .schakel input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .18s var(--uit); }
.kd .schakel input:checked { background: var(--accent); }
.kd .schakel input:checked::after { transform: translateX(14px); }

.kd .blok-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; }
.kd .tel { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--vlak-zacht); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd .tel i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.kd .tel.leeg i { background: none; box-shadow: inset 0 0 0 1.5px var(--grijs-groot); }
.kd .wacht-blok { flex: none; }
.kd .besluiten { list-style: none; margin: 0; padding: 0 10px 10px; display: grid; gap: 6px; max-height: 420px; overflow: auto; }
.kd .besluit { padding: 11px 10px 10px 14px; border-radius: var(--r-tegel); background: var(--verloop-zacht); display: grid; gap: 4px; }
.kd .besluit.flits-blok { animation: kd-flitsBlok 1.2s var(--uit); }
@keyframes kd-flitsBlok { 0%, 40% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.kd .besluit strong { font-size: 14px; font-weight: 600; line-height: 1.35; }
.kd .besluit .meta { font-size: 12.5px; color: var(--inkt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd .besluit .meta i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--afd); }
.kd .besluit .acties { display: flex; gap: 4px; margin: 4px 0 0 -2px; }
.kd .besluiten-meer { margin: -2px 0 0; }
.kd .leeg-melding { list-style: none; margin: 0; padding: 2px 18px 16px; font-size: 13.5px; color: var(--grijs); }
.kd .taken-blok { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kd .taken-blok .segment { box-shadow: none; background: var(--vlak-zacht); padding: 3px; }
.kd .taken-blok .segment button { height: 34px; padding: 0 12px; font-size: 13px; }
.kd .taken-blok .segment button[aria-pressed="true"] { background: var(--kaart); box-shadow: var(--schaduw-chip); }
.kd .focus-plek { display: flex; gap: 6px; }
.kd .focus-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 12px; border: 0; border-radius: var(--r-pill); background: var(--vlak-zacht);
  font-size: 13px; font-weight: 560; white-space: nowrap; }
.kd .focus-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--afd); }
.kd .focus-chip svg { width: 14px; height: 14px; color: var(--grijs); }
.kd .filters { padding: 0 18px 10px; }
.kd .taken { list-style: none; margin: 0; padding: 0 10px 12px; overflow: auto; flex: 1; min-height: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.kd .taak { width: 100%; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 62px; padding: 9px 10px; border: 0;
  border-radius: 12px; background: none; text-align: left; transition: background .12s, scale .15s var(--uit); }
.kd .taak:hover { background: var(--vlak-zacht); }
.kd .taak > i { width: 8px; height: 8px; border-radius: 50%; background: var(--afd); }
.kd .taak strong { display: block; font-size: 14px; font-weight: 560; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd .taak .meta { display: block; font-size: 12.5px; color: var(--grijs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.kd .taak .rechts { display: grid; justify-items: end; gap: 4px; }
.kd .taak time { font-size: 12px; color: var(--grijs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd .taak.flits-blok, .kd .taken-blok.flits-blok { animation: kd-flitsBlok 1.2s var(--uit); }
.kd .chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--vlak-zacht);
  font-size: 12px; font-weight: 560; white-space: nowrap; }
.kd .chip i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.kd .chip[data-staat="loopt"] i, .kd .chip[data-staat="werkt"] i { background: var(--ok); }
.kd .chip[data-staat="wacht"] i { background: var(--accent); }
.kd .chip[data-staat="gepland"] i, .kd .chip[data-staat="vrij"] i, .kd .chip[data-staat="afgewezen"] i { background: none; box-shadow: inset 0 0 0 1.5px var(--grijs-groot); }
.kd .chip[data-staat="klaar"] i { background: var(--grijs-groot); }
.kd .chip[data-staat="mislukt"] { color: var(--fout); }
.kd .chip[data-staat="mislukt"] i { background: var(--fout); }
.kd .chip[data-staat="let"] { color: var(--let); }
.kd .chip[data-staat="let"] i { background: var(--let); }

/* ---------- de Supervisor rechtsboven ---------- */
.kd .sup-knop { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px 0 5px; flex: none; border: 0; border-radius: var(--r-pill);
  background: var(--kaart); box-shadow: var(--schaduw-chip); color: var(--inkt); font: inherit; font-size: 14px; font-weight: 560; cursor: pointer; transition: box-shadow .15s, scale .15s var(--uit); }
.kd .sup-knop:hover { box-shadow: var(--schaduw-hover); }
.kd .sup-knop[aria-expanded="true"] { box-shadow: var(--schaduw-chip), inset 0 0 0 1.5px var(--accent); }
.kd .sup-av { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #7d6b5d; color: #fff; font-size: 13px; font-weight: 650; }
.kd .sup-av.groot { width: 40px; height: 40px; font-size: 15px; }
.kd .sup-chat { position: fixed; z-index: 35; top: calc(var(--topbalk) + 6px); right: 20px; width: 404px; height: min(660px, calc(100dvh - var(--topbalk) - 26px));
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; border-radius: 22px; background: var(--kaart); box-shadow: var(--schaduw-zwevend), 0 0 0 1px var(--lijn);
  animation: kd-chatIn .22s var(--uit); }
.kd .sup-kop { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--lijn); }
.kd .sup-kop > div { flex: 1; min-width: 0; }
.kd .sup-kop h2 { margin: 0; font-size: 16px; font-weight: 680; letter-spacing: -.02em; }
.kd .sup-kop p { margin: 1px 0 0; font-size: 12.5px; color: var(--grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd .sup-kop .rond { width: 40px; height: 40px; box-shadow: none; background: var(--vlak-zacht); }
.kd .sup-inhoud { overflow-y: auto; padding: 16px; scrollbar-width: none; overscroll-behavior: contain; }
.kd .sup-inhoud::-webkit-scrollbar { display: none; }
.kd .sup-chat .sup-tips { margin: 0; padding: 4px 16px 10px; }
.kd .voorstel { max-width: 94%; display: grid; gap: 5px; padding: 12px 14px 10px; border-radius: 16px 16px 16px 6px; background: var(--verloop-zacht); }
.kd .voorstel small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 560; color: var(--inkt-2); }
.kd .voorstel small i { width: 7px; height: 7px; border-radius: 50%; background: var(--afd); flex: none; }
.kd .voorstel strong { font-size: 14.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
.kd .voorstel p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--inkt-2); }
.kd .voorstel .acties { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0 -2px; }
.kd .voorstel .chip { justify-self: start; margin-top: 2px; background: color-mix(in srgb, var(--kaart) 70%, transparent); }

/* ---------- lade per assistent: chat, scherm en vaardigheden ---------- */
.kd .lade { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; border-radius: var(--r-kaart); background: var(--kaart);
  box-shadow: var(--schaduw-zwevend); overflow: hidden; animation: kd-ladeIn .28s var(--uit); }
@keyframes kd-ladeIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.kd .lade-kop { display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px 18px; }
.kd .lade-stip { width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--afd); display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 700; }
.kd .lade-titel h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.03em; line-height: 1.2; }
.kd .lade-titel p { margin: 2px 0 0; font-size: 13px; color: var(--grijs); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kd .lade-kop .sluit { margin-left: auto; width: 40px; height: 40px; box-shadow: none; background: var(--vlak-zacht); }
.kd .lade-kop .sluit svg { width: 16px; height: 16px; }
.kd .lade-keuzes { display: grid; gap: 8px; padding: 0 16px 10px; }
.kd .lade-keuzes .segment { box-shadow: none; background: var(--vlak-zacht); padding: 3px; justify-self: start; max-width: 100%; }
.kd .lade-keuzes .segment button { height: 34px; padding: 0 12px; font-size: 13px; }
.kd .lade-keuzes .segment button[aria-pressed="true"] { background: var(--kaart); box-shadow: var(--schaduw-chip); }
/* Met wie je praat is een kleinere keuze dan het onderdeel: geen stip, lichter. */
.kd .lade-keuzes [data-lade-doel] { background: none; padding: 0; gap: 4px; }
.kd .lade-keuzes [data-lade-doel] button { height: 30px; font-size: 12.5px; background: var(--vlak-zacht); }
.kd .lade-keuzes [data-lade-doel] button[aria-pressed="true"]::before { display: none; }
.kd .lade-keuzes [data-lade-doel] button[aria-pressed="true"] { background: var(--inkt); color: var(--bg); box-shadow: none; }
.kd .aan-tal { font-size: 12.5px; font-weight: 500; color: var(--grijs); }
.kd .lade-nu { margin: 0 16px 8px; padding: 10px 12px; border-radius: 12px; background: var(--vlak-zacht); font-size: 13px; color: var(--inkt-2); }
.kd .lade-nu:empty { display: none; }
.kd .lade-nu b { color: var(--inkt); font-weight: 600; }
.kd .lade-nu .balk { height: 4px; margin-top: 7px; border-radius: 4px; background: var(--vlak); overflow: hidden; }
.kd .lade-nu .balk i { display: block; height: 100%; background: var(--afd); border-radius: 4px; transition: width .4s var(--uit); }
.kd .lade-inhoud { flex: 1; min-height: 0; overflow: auto; padding: 4px 16px 12px; }
.kd .lade-invoer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; border-top: 1px solid var(--lijn); }
.kd .lade-invoer textarea { min-height: 44px; max-height: 120px; padding: 11px 14px; border-radius: 22px; }
.kd .lade-invoer textarea:focus { border-color: color-mix(in srgb, var(--accent) 70%, var(--lijn-sterk)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.kd .lade-invoer .knop { height: 44px; }
/* De Supervisor-chat: bijlagen boven het tekstvak, een balk eronder met paperclip, model en Stuur. */
.kd .sup-invoer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: stretch; }
.kd .sup-invoer textarea { width: 100%; }
.kd .sup-balk { display: flex; align-items: center; gap: 8px; }
.kd .sup-balk .sup-clip { width: 38px; height: 38px; box-shadow: none; background: var(--vlak-zacht); color: var(--inkt-2); }
.kd .sup-balk .sup-clip:hover { background: var(--vlak); }
.kd .sup-balk .knop { height: 38px; margin-left: auto; }
.kd .sup-model { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; min-width: 0; padding: 0 12px; border: 0; border-radius: var(--r-pill);
  background: var(--vlak-zacht); color: var(--inkt-2); font: inherit; font-size: 12.5px; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.kd .sup-model::after { content: ''; position: absolute; inset: -6px 0; }
.kd .sup-model:hover, .kd .sup-model[aria-expanded="true"] { background: var(--vlak); color: var(--inkt); }
.kd .sup-model span { overflow: hidden; text-overflow: ellipsis; }
.kd .sup-modelmenu { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: calc(100% - 4px); max-height: 480px; overflow: auto; padding: 6px; border-radius: 16px;
  background: var(--kaart); box-shadow: var(--schaduw-zwevend); animation: kd-popIn .15s var(--uit); }
.kd .mm-groep { display: grid; gap: 1px; padding: 4px 0; }
.kd .mm-groep + .mm-groep { border-top: 1px solid var(--lijn); }
.kd .mm-groep > small { padding: 6px 10px 4px; font-size: 12px; font-weight: 600; color: var(--grijs); }
.kd .mm-groep button { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font-size: 13.5px; text-align: left; cursor: pointer; }
.kd .mm-groep button:hover:not(:disabled), .kd .mm-groep button:focus-visible { background: var(--vlak-zacht); }
.kd .mm-groep button:disabled { color: var(--grijs-groot); cursor: default; }
.kd .mm-groep button[aria-checked="true"] { font-weight: 640; }
.kd .mm-groep button[aria-checked="true"]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.kd .mm-inspanning { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 4px; }
.kd .mm-inspanning button { min-height: 32px; padding: 0 9px; border-radius: var(--r-pill); background: var(--vlak-zacht); font-size: 12.5px; }
.kd .mm-inspanning button[aria-checked="true"] { background: var(--inkt); color: var(--bg); }
.kd .mm-inspanning button[aria-checked="true"]::before { display: none; }
.kd .mm-noot { margin: 6px 10px 2px; font-size: 12px; color: var(--grijs); }
.kd .sup-bijlagen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kd .sup-bijlagen li { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 30px; padding: 0 4px 0 10px; border-radius: var(--r-pill); background: var(--vlak-zacht); font-size: 12.5px; }
.kd .sup-bijlagen .b-naam { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
.kd .sup-bijlagen small { color: var(--grijs); font-size: 12px; }
.kd .sup-bijlagen button { position: relative; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--grijs); font-size: 16px; line-height: 1; cursor: pointer; }
.kd .sup-bijlagen button::after { content: ''; position: absolute; inset: -6px; }
.kd .sup-bijlagen button:hover { background: var(--vlak); color: var(--inkt); }
.kd .sup-chat.sleept { box-shadow: var(--schaduw-zwevend), 0 0 0 2px var(--accent); }
.kd .bestanden { display: flex; flex-wrap: wrap; gap: 6px; }
.kd .bericht.jij .bestanden { justify-content: flex-end; }
.kd .bestand { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 32px; padding: 0 12px 0 10px; border: 0; border-radius: var(--r-pill);
  background: var(--kaart); box-shadow: inset 0 0 0 1px var(--lijn-sterk); color: var(--inkt); font: inherit; font-size: 12.5px; font-weight: 560; cursor: pointer; }
.kd .bestand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd .bestand svg { color: var(--accent); flex: none; }
.kd .bestand:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.kd .bericht p { white-space: pre-wrap; overflow-wrap: anywhere; }
.kd .berichten { display: grid; gap: 10px; }
.kd .bericht { max-width: 86%; display: grid; gap: 3px; }
.kd .bericht small { font-size: 12px; color: var(--grijs); font-weight: 560; }
.kd .bericht p { margin: 0; padding: 10px 13px; border-radius: 16px 16px 16px 6px; background: var(--vlak-zacht); font-size: 14px; line-height: 1.45; }
.kd .bericht.jij { justify-self: end; }
.kd .bericht.jij p { border-radius: 16px 16px 6px 16px; background: var(--inkt); color: var(--bg); }
.kd .bericht.typt p { display: inline-flex; gap: 4px; padding: 13px 14px; }
.kd .bericht.typt p i { width: 6px; height: 6px; border-radius: 50%; background: var(--grijs-groot); animation: kd-typt 1s infinite; }
.kd .bericht.typt p i:nth-child(2) { animation-delay: .15s; } .kd .bericht.typt p i:nth-child(3) { animation-delay: .3s; }
@keyframes kd-typt { 50% { opacity: .3; transform: translateY(-2px); } }
.kd .chat-leeg { padding: 8px 2px 4px; font-size: 13.5px; color: var(--grijs); }
.kd .suggesties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kd .suggesties .knop { height: 34px; font-size: 13px; padding: 0 12px; }

.kd .terminal { border-radius: 14px; background: var(--terminal); color: var(--terminal-tekst); font: 12.5px/1.6 var(--mono); letter-spacing: 0; overflow: hidden; }
.kd .terminal header { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--font); font-size: 12.5px; color: var(--terminal-zacht); }
.kd .terminal header b { color: var(--terminal-tekst); font-weight: 600; }
.kd .terminal header i { width: 7px; height: 7px; border-radius: 50%; background: #6cc79a; margin-left: auto; animation: kd-zacht 1.2s ease-in-out infinite alternate; }
.kd .terminal ol { list-style: none; margin: 0; padding: 10px 12px 12px; display: grid; gap: 2px; }
.kd .terminal li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
.kd .terminal time { color: #6f6a65; }
.kd .terminal .r1 { color: var(--terminal-tekst); overflow-wrap: anywhere; }
.kd .terminal .r1 b { color: var(--k, #e8e4df); font-weight: 600; }
.kd .terminal .r1::before { content: '● '; color: var(--k, #9b958f); }
.kd .terminal .r2 { grid-column: 2; color: var(--terminal-zacht); }
.kd .terminal .r2::before { content: '⎿  '; color: #6f6a65; }
.kd .terminal .wie { color: #c9c3bd; }
.kd .terminal .cursor { display: inline-block; width: 8px; height: 14px; background: var(--terminal-tekst); vertical-align: -2px; animation: kd-zacht .8s steps(2) infinite; }

.kd .vaardigheden h3 { margin: 12px 0 8px; font-size: 14px; font-weight: 650; letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: center; }
.kd .vaardigheden h3:first-child { margin-top: 2px; }
.kd .vaardigheden p.uitleg-tekst { margin: -4px 0 10px; font-size: 12.5px; color: var(--grijs); }
.kd .vlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kd .vrij { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 12px; border-radius: 12px; background: var(--vlak-zacht); }
.kd .vrij div { flex: 1; min-width: 0; }
.kd .vrij strong { display: block; font-size: 13.5px; font-weight: 600; }
.kd .vrij span { display: block; font-size: 12.5px; color: var(--grijs); overflow: hidden; text-overflow: ellipsis; }
.kd .vrij .antwoord-tekst { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kd .vrij .schakel { min-height: 40px; }
.kd .vrij-acties { display: flex; gap: 2px; flex: none; }
.kd .antwoord-form { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--vlak-zacht); margin-top: 8px; }
.kd .antwoord-form input { width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--lijn-sterk); border-radius: var(--r-veld); background: var(--kaart); font-size: 14px; outline: 0; }
.kd .antwoord-form input:focus { border-color: var(--accent); }
.kd .antwoord-form .rij { display: flex; justify-content: flex-end; gap: 6px; }

/* De Claude-terminal van een assistent, zoals op zijn bureauscherm. */
.kd .claude { border-radius: 14px; background: #1b1a19; color: #ece8e3; font: 12.5px/1.65 var(--mono); letter-spacing: 0; padding: 12px; display: grid; gap: 8px; }
.kd .claude-welkom { border: 1.5px solid #d97757; border-radius: 10px; padding: 8px 12px; display: grid; gap: 2px; }
.kd .claude-welkom b { font-weight: 600; } .kd .claude-welkom b span { color: #d97757; }
.kd .claude-welkom small { color: #9d978f; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd .claude ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.kd .claude li { overflow-wrap: anywhere; }
.kd .claude .prompt { color: #ece8e3; margin-top: 6px; } .kd .claude .prompt span { color: #9d978f; }
.kd .claude .tool { display: block; padding-left: 16px; text-indent: -16px; }
.kd .claude .tool .bol { color: #6cc79a; margin-right: 6px; } .kd .claude .tool b { font-weight: 650; }
.kd .claude .tool.bezig .bol { color: #d97757; animation: kd-zacht .6s ease-in-out infinite alternate; }
.kd .claude .tool.fout .bol, .kd .claude .uit.fout { color: #ef7a66; }
.kd .claude .tool time { float: right; color: #6f6a65; font-size: 11.5px; text-indent: 0; margin-left: 8px; }
.kd .claude .uit { color: #9d978f; padding-left: 16px; } .kd .claude .uit span { color: #6f6a65; margin-right: 8px; }
.kd .claude .wie { color: #b9a6e0; }
.kd .claude-status { margin: 4px 0 0; color: #d97757; font-weight: 600; } .kd .claude-status small { color: #6f6a65; font-weight: 500; font-size: 12px; }
.kd .claude-status .spin { display: inline-block; animation: kd-draai 1.6s linear infinite; }
@keyframes kd-draai { to { transform: rotate(360deg); } }
.kd .claude-akkoord { border: 1.5px solid #d97757; border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.kd .claude-akkoord b { color: #d97757; } .kd .claude-akkoord p { margin: 0 0 4px; }
.kd .claude-akkoord button { justify-self: start; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #ece8e3; font: inherit; text-align: left; }
.kd .claude-akkoord button:first-of-type { color: #d97757; } .kd .claude-akkoord button:hover { background: rgba(255,255,255,.06); }
.kd .claude-invoer { border: 1px solid #4a4642; border-radius: 8px; padding: 6px 12px; color: #9d978f; display: flex; align-items: center; gap: 8px; min-height: 36px; }
.kd .claude-invoer .cursor { display: inline-block; width: 8px; height: 15px; background: #ece8e3; animation: kd-zacht .8s steps(2) infinite; }

/* ---------- kennisgraaf: de opbouw van het team en hun kennis ---------- */
.kd .werkvlak { position: relative; }
.kd .graaf { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; border-radius: var(--r-kaart); background: var(--kaart);
  box-shadow: var(--schaduw-zwevend); overflow: hidden; animation: kd-popIn .22s var(--uit); }
.kd .graaf[hidden] { display: none !important; }
.kd .graaf:fullscreen { border-radius: 0; }
.kd .kg-kop { display: flex; align-items: center; gap: 16px; padding: 18px 18px 14px 26px; }
.kd .kg-titel { flex: 1; min-width: 0; }
.kd .kg-kop h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.045em; }
.kd .kg-kop p { margin: 3px 0 0; font-size: 13px; color: var(--grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd .kg-kop .rond { width: 40px; height: 40px; box-shadow: none; background: var(--vlak-zacht); }
.kd .kg-lijf { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 12px; padding: 0 12px 12px; }
.kd .kg-doek { position: relative; min-height: 0; border-radius: 18px; overflow: hidden; background-color: var(--vlak-zacht);
  background-image: radial-gradient(color-mix(in srgb, var(--inkt) 14%, transparent) 1px, transparent 1.3px); background-size: 22px 22px; }
.kd .kg-svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; }
.kd .kg-svg:active { cursor: grabbing; }
.kd .kg-volledig { position: absolute; z-index: 2; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 7px; }
.kd .kg-zoom { position: absolute; z-index: 2; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-pill);
  background: var(--kaart); box-shadow: var(--schaduw-zwevend); }
.kd .kg-zoom button { position: relative; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: var(--inkt-2); cursor: pointer; }
.kd .kg-zoom button:hover { background: var(--vlak-zacht); color: var(--inkt); }
.kd .kg-zoom span { min-width: 50px; text-align: center; font-size: 13px; font-weight: 560; font-variant-numeric: tabular-nums; }
/* lijnen: de structuur iets sterker dan de verwijzingen; wat je aanwijst kleurt op */
.kd .kg-rand, .kd .kg-verw, .kd .kg-lees { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity .2s; pointer-events: none; }
.kd .kg-rand { stroke: color-mix(in srgb, var(--inkt) 24%, transparent); }
.kd .kg-rand.naar-kennis { stroke: color-mix(in srgb, var(--inkt) 13%, transparent); }
.kd .kg-verw { stroke: color-mix(in srgb, var(--inkt) 7%, transparent); }
.kd .kg-rand.aan, .kd .kg-verw.aan { stroke: var(--accent); stroke-width: 1.6; opacity: 1; }
.kd .kg-rand.dof, .kd .kg-verw.dof { opacity: .2; }
.kd .kg-rand.weg, .kd .kg-verw.weg, .kd .kg-knoop.weg { display: none; }
/* knopen: zwarte ringen zoals in een notitieboek, kennis als open rondjes */
.kd .kg-knoop { cursor: pointer; outline: none; transition: opacity .2s; }
.kd .kg-knoop.dof { opacity: .2; }
.kd .kg-raak { fill: transparent; }
.kd .kg-schijf { fill: var(--kaart); stroke: var(--inkt); stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: fill .3s, stroke .2s; }
.kd .kg-halo { fill: none; stroke: color-mix(in srgb, var(--inkt) 20%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kd .kg-kern .kg-schijf { stroke-width: 3; }
.kd .kg-kern .logo-d { display: none; }
.kd[data-thema="donker"] .kg-kern .logo-l { display: none; }
.kd[data-thema="donker"] .kg-kern .logo-d { display: inline; }
.kd .kg-afdeling .kg-schijf { stroke-width: 1.8; }
.kd .kg-stip { fill: var(--k); stroke: var(--vlak-zacht); stroke-width: 2; vector-effect: non-scaling-stroke; }
.kd .kg-icoon { color: var(--inkt); pointer-events: none; }
.kd .kg-assistent .kg-schijf { stroke: color-mix(in srgb, var(--inkt) 62%, transparent); stroke-width: 1.2; }
.kd .kg-assistent.leider .kg-schijf { stroke: var(--inkt); stroke-width: 1.7; }
.kd .kg-letter { font-size: 9px; font-weight: 650; fill: var(--inkt-2); pointer-events: none; }
.kd .kg-kennis .kg-schijf { stroke: color-mix(in srgb, var(--inkt) 42%, transparent); stroke-width: 1.2; }
.kd .kg-kennis.hoofd .kg-schijf { stroke: var(--k); stroke-width: 1.8; }
.kd .kg-kennis.gelezen .kg-schijf { fill: color-mix(in srgb, var(--k, var(--accent)) 30%, var(--kaart)); stroke: var(--k); }
.kd .kg-knoop.gekozen .kg-schijf, .kd .kg-knoop.treffer .kg-schijf, .kd .kg-knoop:focus-visible .kg-schijf { stroke: var(--accent); stroke-width: 2.4; }
/* namen: op elk zoomniveau even groot, met een rand in de achtergrondkleur zodat ze los van de lijnen te lezen zijn */
.kd .kg-label { font-size: calc(11.5px / var(--zoom, 1)); font-weight: 500; fill: var(--inkt-2); paint-order: stroke; stroke: var(--vlak-zacht);
  stroke-width: calc(4px / var(--zoom, 1)); stroke-linejoin: round; pointer-events: none; }
.kd .kg-kern .kg-label { font-size: calc(14px / var(--zoom, 1)); font-weight: 700; fill: var(--inkt); }
.kd .kg-afdeling .kg-label { font-size: calc(13px / var(--zoom, 1)); font-weight: 650; fill: var(--inkt); }
.kd .kg-assistent .kg-label, .kd .kg-kennis .kg-label { display: none; }
.kd .kg-svg.dichtbij .kg-assistent .kg-label, .kd .kg-svg.dichtbij .kg-kennis .kg-label { display: inline; }
.kd .kg-svg.krap .kg-afdeling .kg-label, .kd .kg-svg.krap .kg-kern .kg-label { display: none; }
.kd .kg-knoop.aan .kg-label, .kd .kg-knoop.treffer .kg-label, .kd .kg-knoop.gekozen .kg-label { display: inline; fill: var(--inkt); font-weight: 600; }
.kd .kg-leeslijn { fill: none; stroke: var(--k); stroke-width: 2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; animation: kd-leesStroom .6s linear infinite; }
@keyframes kd-leesStroom { to { stroke-dashoffset: -18; } }
.kd .kg-leesring { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: kd-leesRing 1.3s var(--uit) 2; }
@keyframes kd-leesRing { from { transform: scale(1); opacity: 1; } to { transform: scale(4); opacity: 0; } }
/* zijpaneel: zoeken, omvang, legenda en wat je hebt gekozen */
.kd .kg-zij { min-height: 0; overflow-y: auto; scrollbar-width: none; display: grid; align-content: start; gap: 10px; padding: 0 2px 4px; }
.kd .kg-zij::-webkit-scrollbar { display: none; }
.kd .kg-zij .kg-zoek { position: sticky; top: 0; z-index: 2; width: auto; height: 44px; margin: 0; flex: none; background: var(--kaart); box-shadow: inset 0 0 0 1px var(--lijn-sterk), 0 -4px 0 var(--kaart); }
.kd .kg-telling { margin: -2px 6px 0; font-size: 12.5px; color: var(--grijs); }
.kd .kg-blok { padding: 12px 10px 10px; border-radius: 16px; background: var(--vlak-zacht); }
.kd .kg-blok h3 { margin: 0 6px 8px; font-size: 13px; font-weight: 600; color: var(--grijs); }
.kd .kg-blok .segment { display: flex; width: 100%; }
.kd .kg-blok .segment button { flex: auto; }
.kd .kg-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kd .kg-legenda button { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px;
  background: var(--kaart); box-shadow: var(--schaduw-chip); font: inherit; font-size: 13.5px; font-weight: 560; color: var(--inkt); text-align: left; cursor: pointer; }
.kd .kg-legenda button b { margin-left: auto; font-weight: 600; color: var(--inkt-2); font-variant-numeric: tabular-nums; }
.kd .kg-legenda button[aria-pressed="false"] { background: none; box-shadow: none; color: var(--grijs); }
.kd .kg-legenda button[aria-pressed="false"] .kg-mark { opacity: .4; }
.kd .kg-mark { width: 12px; height: 12px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--inkt); }
.kd .kg-mark.afd { box-shadow: inset 0 0 0 2px var(--inkt), 0 0 0 2px var(--kaart), 0 0 0 3px color-mix(in srgb, var(--inkt) 25%, transparent); }
.kd .kg-mark.ass { width: 10px; height: 10px; margin-inline: 1px; box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--inkt) 62%, transparent); }
.kd .kg-mark.ken { width: 8px; height: 8px; margin-inline: 2px; box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--inkt) 42%, transparent); }
.kd .kg-mark.verw { width: 12px; height: 2px; border-radius: 1px; box-shadow: none; background: color-mix(in srgb, var(--inkt) 30%, transparent); }
.kd .kg-mark.map { width: 9px; height: 9px; margin-inline: 1.5px; box-shadow: none; background: var(--k); }
.kd .kg-detail { position: relative; padding: 16px 16px 14px; border-radius: 16px; background: var(--kaart); box-shadow: var(--schaduw-chip), inset 0 0 0 1.5px color-mix(in srgb, var(--k) 45%, transparent); }
.kd .kg-detail small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 560; color: var(--grijs); }
.kd .kg-detail small i { width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.kd .kg-detail h3 { margin: 6px 40px 6px 0; font-size: 17px; font-weight: 680; letter-spacing: -.03em; }
.kd .kg-detail p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--inkt-2); }
.kd .kg-detail .rond { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; box-shadow: none; background: var(--vlak-zacht); }
.kd .kg-detail .suggesties { margin: 0 0 8px; }
.kd .kg-acties { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* ---------- onder het kantoor ---------- */
.kd .vandaag { margin-top: var(--goot); padding: 24px 26px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
.kd .vandaag h2 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.04em; }
.kd .vandaag .sub { margin: 4px 0 12px; font-size: 13px; color: var(--grijs); }
.kd .regels { list-style: none; margin: 0; padding: 0; display: grid; }
.kd .regels li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-top: 1px solid var(--lijn); font-size: 14.5px; }
.kd .regels li:first-child { border-top: 0; }
.kd .regels li span { display: inline-flex; align-items: center; gap: 8px; color: var(--grijs); font-size: 13.5px; }
.kd .regels li span i { width: 8px; height: 8px; border-radius: 50%; background: var(--afd); }
.kd .regels b { font-weight: 650; font-variant-numeric: tabular-nums; }
.kd .volgende { padding: 20px 22px; border-radius: var(--r-tegel); background: var(--vlak-zacht); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; align-self: start; }
.kd .volgende small { font-size: 13px; color: var(--grijs); }
.kd .volgende p { margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -.03em; line-height: 1.3; }

/* ---------- lijstweergave ---------- */
.kd .lijstweergave { position: absolute; inset: 0; z-index: 3; overflow: auto; padding: 20px 20px 84px; column-width: 270px; column-gap: var(--goot); background: var(--kaart); }
.kd .lijst-afd { border-radius: var(--r-tegel); background: var(--vlak-zacht); padding: 14px; break-inside: avoid; margin-bottom: var(--goot); }
.kd .lijst-afd h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; }
.kd .lijst-afd h3 i { width: 9px; height: 9px; border-radius: 50%; background: var(--afd); }
.kd .lijst-afd h3 span { margin-left: auto; font-size: 12.5px; color: var(--grijs); font-weight: 500; }
.kd .vakjes { display: grid; gap: 6px; }
.kd .vakje { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--kaart); box-shadow: var(--ring); border: 0; text-align: left; width: 100%; }
.kd .vakje strong { font-size: 13.5px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.kd .vakje > span { font-size: 12.5px; color: var(--grijs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- uitleg en melding ---------- */
.kd .uitleg { position: fixed; z-index: 60; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: var(--inkt); color: var(--bg); font-size: 12.5px;
  line-height: 1.4; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.18); animation: kd-popIn .14s var(--uit); }
.kd .melding { position: fixed; left: 50%; bottom: 92px; z-index: 45; transform: translateX(-50%); padding: 12px 18px; border-radius: 18px; width: max-content; max-width: calc(100vw - 32px); background: var(--inkt);
  color: var(--bg); font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--uit); width: max-content; max-width: calc(100vw - 32px); }
.kd .melding.zichtbaar { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.kd .inkomen { animation: kd-inkomen .45s var(--uit) both; }
@keyframes kd-inkomen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kd .afd-rij, .kd .wacht-strook { display: none; }

/* ---------- smaller ---------- */

/* ---------- periode per widget: knop in de kop, cijfer met verandering, en het eigen menu met kalender ---------- */
.kd .mo-periode { position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; margin: -4px 0 -4px 8px; padding: 0 8px 0 10px; border: 0;
  border-radius: var(--r-pill); background: var(--vlak-zacht); color: var(--inkt-2); font: inherit; font-size: 12.5px; font-weight: 560; white-space: nowrap; cursor: pointer; }
.kd .mo-periode::after { content: ''; position: absolute; inset: -9px -4px; }
.kd .mo-periode svg { flex: none; width: 14px; height: 14px; color: var(--grijs); transition: transform .15s; }
.kd .mo-periode:hover { background: var(--vlak); color: var(--inkt); }
.kd .mo-periode[aria-expanded="true"] svg { transform: rotate(180deg); }
.kd .mo-kop > :first-child { min-width: 0; }
.kd .mo-titel { max-width: 100%; white-space: nowrap; }
.kd .mo-titel svg { flex: none; }
/* Elke kop even hoog, met of zonder periodeknop of label: een stapel verspringt niet als je bladert. */
.kd .mo-kop { min-height: 22px; }
.kd .mo-bedragrij { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-width: 0; }
.kd .mo-bedragrij .mo-stijging { flex: none; }
.kd .mo-bedragrij .mo-bedrag { min-width: 0; white-space: nowrap; }
.kd .mo-bedragrij .mo-bedrag { margin-top: 0; }
.kd .mo-bedrag.lang { font-size: 25px; }
.kd .mo-staven.dicht { gap: 1px; }
.kd .mo-staven.dicht i { border-radius: 2px 2px 0 0; }
.kd .periode-menu { position: fixed; z-index: 70; width: 284px; max-width: calc(100vw - 24px); overflow: auto; overscroll-behavior: contain; padding: 6px; border-radius: 16px; background: var(--kaart); box-shadow: var(--schaduw-zwevend); animation: kd-popIn .15s var(--uit); }
.kd .pm-lijst { display: grid; gap: 1px; }
.kd .pm-lijst button { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font-size: 14px; text-align: left; cursor: pointer; }
.kd .pm-lijst button small { margin-left: auto; font-size: 12px; color: var(--grijs); white-space: nowrap; }
.kd .pm-lijst button:hover, .kd .pm-lijst button:focus-visible { background: var(--vlak-zacht); }
.kd .pm-lijst button[aria-checked="true"] { font-weight: 620; }
.kd .pm-lijst button[aria-checked="true"]::before { content: ''; width: 7px; height: 7px; margin-left: -2px; border-radius: 50%; background: var(--accent); flex: none; }
.kd .pm-kal { margin-top: 6px; padding: 10px 6px 4px; border-top: 1px solid var(--lijn); }
.kd .pm-kop { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 8px; }
.kd .pm-kop strong { font-size: 14px; font-weight: 620; }
.kd .pm-kop .rond { width: 32px; height: 32px; box-shadow: none; background: var(--vlak-zacht); }
.kd .pm-kop .rond:disabled { opacity: .35; cursor: default; }
/* Toepassen blijft in beeld als de kalender in het menu moet scrollen (telefoon). */
.kd .pm-kal .pm-voet { position: sticky; bottom: -6px; margin-bottom: -6px; padding-bottom: 8px; background: var(--kaart); }
/* Een beeldknop die nu niets kan (verder uitzoomen dan het overzicht) oogt ook zo. */
.kd .camera-knoppen .rond:disabled { opacity: .4; cursor: default; box-shadow: none; }
.kd .pm-kop .rond svg { width: 16px; height: 16px; }
.kd .pm-dagen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kd .pm-dagen small { display: grid; place-items: center; height: 24px; font-size: 12px; color: var(--grijs); }
.kd .pm-dagen button { height: 34px; border: 0; border-radius: 10px; background: none; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.kd .pm-dagen button:hover:not(:disabled) { background: var(--vlak-zacht); }
.kd .pm-dagen button:disabled { color: var(--lijn-sterk); cursor: default; }
.kd .pm-dagen button.kal-vandaag { box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.kd .pm-dagen button.kal-in { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 0; }
.kd .pm-dagen button.kal-rand, .kd .pm-dagen button.kal-rand:hover { background: var(--accent); color: var(--op-accent); border-radius: 10px; font-weight: 650; }
.kd .pm-voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 4px 2px; border-top: 1px solid var(--lijn); }
.kd .pm-voet span { font-size: 12.5px; color: var(--inkt-2); }
@media (pointer: coarse) {
  .kd .pm-lijst button { min-height: 44px; }
  .kd .pm-dagen button { height: 44px; }
  .kd .pm-kop .rond { width: 44px; height: 44px; }
}


/* ---------- compacte maat: een laptop of een kleiner venster (data-maat="compact", zie maatVoor in kantoor-dashboard.js) ----------
   Wat groot is wordt kleiner, zodat het kantoor zelf de ruimte krijgt. Tekst blijft minstens 12 px. */
.kd[data-maat="compact"] { --paneel: 340px; --goot: 12px; --topbalk: 56px; font-size: 14px; }
.kd[data-maat="compact"] .pagina { padding: 12px 16px 28px; }
.kd[data-maat="compact"] .widgets { left: 12px; top: 12px; width: 240px; gap: 10px; }
.kd[data-maat="compact"] .widget { padding: 9px 13px 8px; border-radius: 16px; }
/* Iets lager, zodat op een laptop drie widgets onder elkaar passen; de opbouw blijft gelijk, dus ze blijven even hoog. */
.kd[data-maat="compact"] .w-inhoud { gap: 1px; }
.kd[data-maat="compact"] .mo-kop { min-height: 20px; }
/* Een label in de kop ("Advies wacht op jou") is even laag als de periodeknop: elke kop is 20 px, de stapel verspringt niet. */
.kd[data-maat="compact"] .mo-kop .mo-stijging { height: 20px; }
.kd[data-maat="compact"] .mo-bedragrij { margin-top: 4px; }
.kd[data-maat="compact"] .mo-vergelijk { min-height: 30px; line-height: 15px; }
.kd[data-maat="compact"] .mo-vak { margin-top: 4px; }
.kd[data-maat="compact"] :is(.mo-vak, .mo-grafiek, .mo-staven, .mo-rijen) { height: 48px; }
.kd[data-maat="compact"] .mo-as { margin-top: 0; }
/* Productnamen in een widget krijgen meer ruimte: de balk is smaller (de volle naam staat in de uitleg). */
.kd[data-maat="compact"] .mo-rij { grid-template-columns: minmax(0, 1fr) 44px 34px; gap: 6px; }
.kd[data-maat="compact"] .mo-kop { font-size: 12px; }
.kd[data-maat="compact"] .mo-bedrag { font-size: 23px; }
.kd[data-maat="compact"] .mo-bedrag.lang { font-size: 20px; }
.kd[data-maat="compact"] .mo-eenheid { font-size: 13px; }
.kd[data-maat="compact"] .mo-cijfers { margin-top: 5px; padding-top: 5px; }
.kd[data-maat="compact"] .mo-cijfers b { font-size: 14px; }
.kd[data-maat="compact"] .koppelingen { top: 12px; right: 12px; padding: 4px 5px 4px 12px; }
.kd[data-maat="compact"] .koppeling { width: 32px; height: 32px; }
.kd[data-maat="compact"] .koppeling img { width: 19px; height: 19px; }
.kd[data-maat="compact"] .podium-onder { left: 12px; right: 12px; bottom: 12px; gap: 10px; }
.kd[data-maat="compact"] .rond { width: 36px; height: 36px; }
.kd[data-maat="compact"] .rond svg { width: 17px; height: 17px; }
.kd[data-maat="compact"] .sup-knop { height: 36px; }
.kd[data-maat="compact"] :is(.overzicht, .stroom) { height: 36px; }
.kd[data-maat="compact"] .segment button { height: 32px; padding: 0 13px; }
.kd[data-maat="compact"] .afd-kaart:not(.compact) { width: 180px; padding: 8px 10px; gap: 4px; border-radius: 12px; }
.kd[data-maat="compact"] .afd-kaart.compact { height: 32px; padding: 0 12px 0 10px; }
.kd[data-maat="compact"] .afd-kop { font-size: 13px; }
.kd[data-maat="compact"] .brein-chip { height: 28px; padding: 0 11px 0 9px; }
.kd[data-maat="compact"] .blok-kop { padding: 12px 14px 8px; }
.kd[data-maat="compact"] .opdracht { padding: 12px 14px; gap: 8px; }
.kd[data-maat="compact"] .opdracht textarea { min-height: 46px; }
.kd[data-maat="compact"] .knop { height: 36px; padding: 0 15px; }
.kd[data-maat="compact"] .kies-knop { height: 32px; }
.kd[data-maat="compact"] .besluit { padding: 9px 10px 9px 12px; }
.kd[data-maat="compact"] :is(.besluit, .taak) strong { font-size: 13.5px; }
.kd[data-maat="compact"] .taak { min-height: 52px; padding: 6px 10px; gap: 10px; }
.kd[data-maat="compact"] .taken-blok .segment button { height: 30px; font-size: 12.5px; }
.kd[data-maat="compact"] .filters { padding: 0 14px 8px; }
.kd[data-maat="compact"] .lade-kop { padding: 12px 12px 8px 14px; }
.kd[data-maat="compact"] .lade-kop .sluit { width: 36px; height: 36px; }
.kd[data-maat="compact"] .vandaag { padding: 18px 20px; gap: 18px; grid-template-columns: minmax(0, 1fr) 300px; }
.kd[data-maat="compact"] .vandaag h2 { font-size: 18px; }
.kd[data-maat="compact"] .regels li { padding: 9px 0; font-size: 13.5px; grid-template-columns: 136px minmax(0, 1fr); }

@media (max-width: 1280px) { .kd { --paneel: 340px; } }
@media (max-width: 1700px) { .kd .koppelingen > span { display: none; } .kd .koppelingen { padding-left: 6px; gap: 3px; } }
@media (max-width: 1080px) {
  .kd .werkvlak { grid-template-columns: 1fr; height: auto; }
  .kd .podium { height: 72vh; min-height: 520px; }
  .kd .paneel { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .kd .taken-blok { grid-column: 1 / -1; max-height: 560px; }
  .kd .lade { position: fixed; inset: auto 0 0 0; height: min(82dvh, 720px); border-radius: 20px 20px 0 0; z-index: 48; }
  .kd .vandaag { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .kd .status-chip, .kd .zoek { display: none; }
  .kd .pagina { padding: 12px 16px 132px; }
  .kd .podium { height: 380px; min-height: 0; }
  .kd .koppelingen, .kd .lijnen, .kd .stroom { display: none !important; }
  .kd .widgets { left: 10px; top: 10px; width: 176px; }
  .kd .widget { padding: 10px 12px; }
  .kd .widget:not(:first-child) { display: none; }
  .kd .mo-bedrag { font-size: 21px; margin-top: 4px; }
  .kd .mo-eenheid { font-size: 12.5px; margin-left: 5px; }
  .kd .mo-vak, .kd .mo-as, .kd .mo-cijfers { display: none; }
  .kd .sup-knop { width: 42px; padding: 0; justify-content: center; }
  .kd .sup-knop .bol { right: -3px; }
  .kd .sup-naam { display: none; }
  .kd .sup-chat { left: 0; right: 0; bottom: 0; width: auto; z-index: 45; top: calc(var(--topbalk) + 4px); height: auto; border-radius: 22px 22px 0 0; }
  .kd .camera-knoppen [data-actie="draai-links"], .kd .camera-knoppen [data-actie="draai-rechts"], .kd .camera-knoppen [data-actie="volledig"], .kd .camera-knoppen [data-actie="tv"], .kd .podium-merk { display: none; }
  .kd .overzicht .ov-tekst { display: none; }
  .kd .widgets { width: 196px; }
  .kd .w-voet { display: flex !important; margin-top: -6px; }
  .kd .w-aanpassen span { display: none; }
  .kd .brein-chip span { display: none; }
  /* Klein kantoor: Bedrijfskennis is hier een rond knopje met het brein, zodat de naam niet over de afdelingen valt. */
  .kd .brein-chip { width: 32px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  .kd .melding { bottom: 96px; }
  .kd .afd-kaart.in-scene { display: none; }
  .kd .podium-onder { left: 10px; right: 10px; bottom: 10px; }
  .kd .podium-onder .segment button { height: 36px; padding: 0 12px; }
  .kd .afd-rij { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 12px -16px 0; padding: 4px 16px 8px; }
  .kd .afd-rij .afd-kaart { position: relative; flex: none; width: 236px; scroll-snap-align: start; box-shadow: var(--schaduw-kaart); transform: none !important; }
  /* Onder elkaar en even breed: zonder stretch werd Wacht op jou smaller dan Werk van vandaag. */
  .kd .paneel { display: flex; margin-top: 12px; align-items: stretch; }
  .kd .taken-blok { grid-column: auto; max-height: none; }
  .kd .opdracht { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); gap: 10px;
    border-radius: 18px 18px 0 0; box-shadow: 0 -1px 0 var(--lijn), 0 -12px 32px -18px rgba(0,0,0,.25); }
  .kd .opdracht textarea { min-height: 44px; height: 44px; padding: 11px 12px; }
  .kd .opdracht:focus-within textarea { height: 76px; }
  .kd .opdracht:not(:focus-within) .opdracht-kop, .kd .opdracht:not(:focus-within) .schakel { display: none; }
  .kd .opdracht:not(:focus-within) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .kd .knop-klein, .kd .segment button, .kd .kies-knop { min-height: 44px; }
  .kd .wacht-strook { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0 0 12px; padding: 0 16px; border: 0; border-radius: var(--r-tegel);
    background: var(--verloop-zacht); color: var(--inkt); font-size: 14.5px; font-weight: 600; text-align: left; }
  .kd .wacht-strook i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
  .kd .wacht-strook svg { margin-left: auto; color: var(--grijs); }
  .kd .taken { mask-image: none; -webkit-mask-image: none; overflow: visible; }
  .kd .vandaag { padding: 20px 18px; }
  .kd .regels li { grid-template-columns: 1fr; gap: 2px; }
  .kd .lade { height: 78dvh; }
  .kd .graaf { position: fixed; inset: 0; z-index: 60; border-radius: 0; }
  .kd .kg-kop { padding: 12px 12px 10px 16px; gap: 10px; flex-wrap: wrap; }
  .kd .kg-kop h2 { font-size: 20px; }
  .kd .kg-lijf { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 0 8px 8px; }
  .kd .kg-zij { max-height: 36dvh; }
  .kd .kg-kop p { white-space: normal; }
  /* Titel en sluitknop op de eerste rij, de keuze Radiaal/Neuraal eronder: anders werd de titelregel een smal kolommetje
     van zes regels naast de knoppen. */
  .kd .kg-titel { flex: 1 1 calc(100% - 50px); }
  .kd .kg-kop [data-kg-sluit] { order: 1; }
  .kd .kg-kop .kg-weergave { order: 2; }
  .kd .kg-volledig { display: none; }
}
/* Smalle telefoons: de onderbalk (Kantoor/Lijst en de beeldknoppen) past binnen het kantoor. Op 375 en 360 breed vielen de
   beeldknoppen er rechts buiten, op 320 schoof de hele pagina opzij. */
@media (max-width: 400px) {
  .kd .podium-onder { left: 8px; right: 8px; bottom: 8px; gap: 6px; }
  .kd .podium-onder .segment { padding: 3px; }
  .kd .podium-onder .segment button { padding: 0 9px; }
  .kd .camera-knoppen { padding: 3px; gap: 0; }
  .kd .camera-knoppen .rond, .kd .camera-knoppen .overzicht { width: 38px; padding: 0; justify-content: center; }
}
@media (max-width: 340px) {
  .kd .podium-onder .segment button { padding: 0 8px; }
  .kd .podium-onder .segment button::before { display: none; }
  .kd .camera-knoppen .rond, .kd .camera-knoppen .overzicht { width: 36px; }
}
/* ---------- beweging: alles wat je aanklikt reageert (Juriaan, 20-10: "alles wat je aanklikt echt beweegt … dat up popt") ----------
   Dezelfde set als Core (css/stijl-redactie-beweging.css): expo-uit, kort, alleen opacity en transform; sluiten sneller dan
   openen. De druk gebruikt `scale`, zodat hij samengaat met de plaatsing van kaarten en labels (die staan via transform).
   Wat nieuw is na jouw handeling (rijen, berichten, de gekozen tab) beweegt via js/kantoor/beweging.js. */
.kd :where(button, a[href], [role="button"], summary) { transition: scale .15s var(--uit), background-color .15s, color .15s, box-shadow .15s; }
.kd :where(button, a[href], [role="button"], summary):not(:disabled, [aria-disabled="true"]):active { scale: .96; }
/* Brede rijen en menuregels drukken minder diep in. */
.kd :where(.taak, .mo-rij, .w-mini, .pm-lijst button, .mm-groep button, .cm-lijst button, .besluit, .regels button, .afd-kaart):not(:disabled):active { scale: .985; }
/* Wat je aanwijst komt een fractie naar je toe. */
@media (hover: hover) and (pointer: fine) {
  .kd .afd-kaart:hover { translate: 0 -2px; }
  .kd :is(.knop-wit, .w-terug, .sup-knop, .koppeling.meer):hover:not(:disabled) { translate: 0 -1px; }
  .kd :is(.knop-wit, .w-terug, .sup-knop) { transition: translate .15s var(--uit), scale .15s var(--uit), box-shadow .15s, background .15s; }
}
/* De gekozen keuze in een balk schuift naar de nieuwe plek (js/kantoor/beweging.js: schuif). */
.kd .segment { position: relative; }
.kd .segment > button { z-index: 1; }
.kd .kd-schuifpil { position: absolute; z-index: 0; pointer-events: none; transform-origin: left center; }
.kd .segment > button.kd-schuift { background: transparent !important; box-shadow: none !important; }
/* Bladeren door de widgetstapel: de nieuwe widget schuift in vanaf de kant waar je heen bladerde. */
@keyframes kd-uitRechts { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes kd-uitLinks { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.kd .widget.stapel[data-richting="r"] .w-inhoud { animation: kd-uitRechts .24s var(--uit); }
.kd .widget.stapel[data-richting="l"] .w-inhoud { animation: kd-uitLinks .24s var(--uit); }
/* Een andere periode: het cijfer en wat erbij hoort komen opnieuw op. */
.kd .widget.vers :is(.mo-bedragrij, .mo-vergelijk, .mo-vak, .mo-as, .mo-cijfers) { animation: kd-opkomen .26s var(--uit) both; }
.kd .widget.vers .mo-vergelijk { animation-delay: .03s; } .kd .widget.vers :is(.mo-vak, .mo-as) { animation-delay: .06s; } .kd .widget.vers .mo-cijfers { animation-delay: .09s; }
/* Een bijlage die je toevoegt springt erbij. */
.kd .sup-bijlagen li { animation: kd-popIn .16s var(--uit); }
/* Het zijpaneel van de chat schuift van rechts in. */
@keyframes kd-chatIn { from { opacity: 0; transform: translateX(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes kd-velIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .kd .sup-chat { animation-name: kd-velIn; } }

/* ---------- de Supervisor-chat op de compacte maat (Juriaan, 20-10: "zijkant chat op 100% is erg groot") ---------- */
.kd[data-maat="compact"] .sup-kop { gap: 8px; padding: 10px 10px 9px 12px; }
.kd[data-maat="compact"] .sup-av.groot { width: 32px; height: 32px; font-size: 13px; }
.kd[data-maat="compact"] .sup-kop h2 { font-size: 14.5px; }
.kd[data-maat="compact"] .sup-kop p { font-size: 12px; }
.kd[data-maat="compact"] .sup-kop .rond { width: 32px; height: 32px; }
.kd[data-maat="compact"] .sup-kop .rond svg { width: 15px; height: 15px; }
.kd[data-maat="compact"] .sup-inhoud { padding: 12px; }
.kd[data-maat="compact"] .sup-chat .sup-tips { padding: 2px 12px 8px; }
.kd[data-maat="compact"] .bericht p { padding: 8px 11px; font-size: 13px; line-height: 1.42; }
.kd[data-maat="compact"] .bericht small { font-size: 12px; }
.kd[data-maat="compact"] .suggesties { gap: 5px; margin-top: 8px; }
.kd[data-maat="compact"] .suggesties .knop { height: 30px; padding: 0 10px; font-size: 12.5px; }
.kd[data-maat="compact"] .sup-invoer { gap: 6px; padding: 8px 10px 10px; }
.kd[data-maat="compact"] .sup-invoer textarea { min-height: 38px; padding: 9px 12px; border-radius: 19px; font-size: 13.5px; }
.kd[data-maat="compact"] .sup-balk { gap: 6px; }
.kd[data-maat="compact"] .sup-balk .sup-clip { width: 32px; height: 32px; }
.kd[data-maat="compact"] .sup-balk .knop { height: 32px; padding: 0 14px; font-size: 13px; }
.kd[data-maat="compact"] .sup-model { height: 28px; padding: 0 10px; font-size: 12px; }
.kd[data-maat="compact"] .sup-bijlagen li { height: 28px; }
/* ---------- het kantoor in een eigen venster, bijvoorbeeld op een tv (data-scherm="tv") ---------- */
.kd .tv-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; height: 60px; padding: 0 6px 12px; }
.kd .tv-merk { display: flex; align-items: center; gap: 14px; min-width: 0; font-size: 17px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.kd .tv-merk img { height: 24px; width: auto; }
.kd .tv-merk span { overflow: hidden; text-overflow: ellipsis; color: var(--inkt-2); }
.kd .tv-merk .logo-donker, .kd[data-thema="donker"] .tv-merk .logo-licht { display: none; }
.kd[data-thema="donker"] .tv-merk .logo-donker { display: block; }
.kd .tv-stand { margin: 0; font-size: 16px; color: var(--grijs); white-space: nowrap; }
.kd .tv-stand b { color: var(--inkt); font-weight: 650; font-variant-numeric: tabular-nums; }
.kd .tv-tijd { justify-self: end; display: grid; justify-items: end; line-height: 1.15; }
.kd .tv-tijd b { font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kd .tv-tijd span { font-size: 13px; color: var(--grijs); }
.kd[data-scherm="tv"] .pagina { padding: 14px 18px 18px; }
.kd[data-scherm="tv"] .werkvlak { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 60px - 32px); }
.kd[data-scherm="tv"] :is(.paneel, .vandaag, .wacht-strook, .podium-onder .segment, [data-actie="tv"]) { display: none !important; }
/* Zonder muis: de muis en de knoppen verdwijnen, het kantoor blijft. */
.kd[data-scherm="tv"] .podium-onder .stroom { margin: 0; }
.kd[data-scherm="tv"] .camera-knoppen { transition: opacity .3s var(--uit); }
.kd[data-scherm="tv"].stil .camera-knoppen { opacity: 0; pointer-events: none; }
.kd[data-scherm="tv"].stil, .kd[data-scherm="tv"].stil * { cursor: none !important; }
@media (max-width: 1080px) { .kd .tv-stand { display: none; } .kd .tv-kop { grid-template-columns: minmax(0, 1fr) auto; } }

/* Beweging uit in Core (body[data-motion="uit"]): net als bij minder beweging staat alles direct in zijn eindstand. */
.kd:where([data-motion="uit"] *), .kd:where([data-motion="uit"] *) *, .kd:where([data-motion="uit"] *) *::before, .kd:where([data-motion="uit"] *) *::after { animation: none !important; transition: none !important; }
.kd:where([data-motion="uit"] *) :is(:active, :hover) { scale: none !important; translate: none !important; }
@media (prefers-reduced-motion: reduce) {
  .kd, .kd *, .kd *::before, .kd *::after { animation: none !important; transition: none !important; }
  .kd :active, .kd *:hover { scale: none !important; translate: none !important; }
}