/* ═══════════════════════════════════════════════════════════════════════════
   Sidura AI — demo-omgeving

   Opgezet als de rm-agents: een donkere balk met merkteken, daaronder een hero
   met robot en een KPI-strook, en in de inhoud tabbladen met kaarten.

   Het palet is dat van de huisstijl: marmer, inkt, terracotta, met zeeblauw als
   steunkleur. De verdeling is de hele regel — terracotta draagt alles wat je
   aanklikt, zeeblauw alles wat je alleen maar hoeft te zien. Zodra blauw een
   knop wordt is de regel gebroken. Zie huisstijl/palet.md.

   De donkere grond is bruinzwart en niet zwart: zwart geeft een scherm geen
   ruimte maar een gat, en het haalt de kleur uit de terracotta ernaast. De
   lichte stand is wit en geen marmer — op drukwerk is marmer de grond, op een
   softwarepagina werd het zand.

   Twee thema's via tokens. Donker is standaard: de schakelaar stampt data-theme
   op <html> en wint van de voorkeur van het besturingssysteem. Elke kleur staat
   in alle drie de blokken (bare :root, prefers-color-scheme, [data-theme]) —
   een kleur die alleen in een mediablok bestaat, verdwijnt zodra iemand de
   schakelaar aanraakt.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Licht ────────────────────────────────────────────────────────────────
   De zijbalk en de hero stonden hier ook in de lichte stand op inkt, overgenomen
   van de rm-agents. Daardoor was 'licht' in de praktijk bruin, zwart en wit: de
   helft van het scherm bleef donker en alleen het werkvlak werd wit. Nu is licht
   echt licht — de balken zijn warm zand, het werkvlak wit.

   Dat kon niet door alleen de drie balkkleuren om te zetten. Overal waar iets
   óp een balk staat, stond `#fff` of `rgba(255,255,255,…)` hard in de regel: de
   menuteksten, de scheidingslijnen, de hoverachtergronden, de KPI's in de hero.
   Op een lichte balk is dat onzichtbaar. Daarom staan ze nu in `--op-bar*`-
   variabelen, die per stand hun eigen waarde krijgen. Harde witwaarden horen
   vanaf nu alleen nog op een gekleurde knop — daar is de grond in beide standen
   hetzelfde. */
:root {
  color-scheme: light;
  --bar:        #faf8f4;
  --bar-diep:   #f1ede5;
  --bar-zacht:  #ffffff;
  /* Wat er óp een balk staat. */
  --op-bar:      #1d1a15;
  --op-bar-2:    #4a4539;
  --op-bar-3:    #7a7465;
  --op-bar-lijn: rgba(29,26,21,.13);
  --op-bar-vlak: rgba(29,26,21,.05);
  --op-bar-vlak-2: rgba(29,26,21,.09);
  --op-bar-zee:  #2c5f73;
  --op-bar-goed: #3f6b4a;
  --op-bar-slecht: #a3263c;
  --canvas:     #ffffff;
  --surface:    #ffffff;
  --surface-2:  #f4f1ec;
  --ink:        #3d3931;
  --kop:        #1d1a15;
  --muted:      #6d6759;
  --hair:       #e5dfd4;
  --accent:     #a33f22;
  --accent-diep:#8f3a22;
  --op-accent:  #f6f2e9;
  --zee:        #2c5f73;
  --terracotta: #b0472a;
  --terracotta-fel: #a33f22;
  --goed:       #4a6b3a;
  --goed-tint:  #eaeee5;
  --oker:       #8a6114;
  --oker-tint:  #f6efdf;
  --slecht:     #96253a;
  --slecht-tint:#f8e9ec;
  --paars:      #7d3f63;
  --chip:       rgba(29,26,21,.06);
  --schaduw:    0 1px 2px rgba(29,26,21,.05), 0 8px 24px rgba(29,26,21,.07);
  --maxw:       1320px;
  /* Vaste ruimte tussen de donkere kop en de eerste inhoud, op elk scherm.
     Eén plek, zodat hij niet per pagina uiteen kan lopen. */
  --ruimte-kop: 34px;
  /* Archivo draagt de lopende tekst, Sora de koppen en het woordmerk. Archivo
     is korter van vorm en houdt zich beter op 15 pixel in een lange alinea;
     Sora is breed en geometrisch en doet het juist goed in kapitalen.
     Zie huisstijl/typografie.md. */
  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --kopfont: 'Sora', var(--font);
  --zij-breed:  252px;
  --zij-smal:   66px;
}

/* ── Donker ────────────────────────────────────────────────────────────────
   Terracotta staat hier op #da7a57 en niet op het merkhue #b0472a: dat haalt
   op deze grond maar 3,2:1 en dat is te weinig voor een link. Opgelicht is het
   5,4:1, en op een paneel nog 4,8:1. Het zegel houdt wél de volle merkkleur —
   een schijf van tien pixel hoeft geen leescontrast te halen, een link wel. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --op-bar:      #ffffff;
    --op-bar-2:    rgba(255,255,255,.74);
    --op-bar-3:    rgba(255,255,255,.5);
    --op-bar-lijn: rgba(255,255,255,.12);
    --op-bar-vlak: rgba(255,255,255,.07);
    --op-bar-vlak-2: rgba(255,255,255,.12);
    --op-bar-zee:  #9fc3e0;
    --op-bar-goed: #8fe3b0;
    --op-bar-slecht: #ffa8b8;
    color-scheme: dark;
    --bar:        #1a1611;
    --bar-diep:   #12100c;
    --bar-zacht:  #2e2820;
    --canvas:     #241f19;
    --surface:    #2e2820;
    --surface-2:  #382f26;
    --ink:        #d9d1c1;
    --kop:        #f6f2e9;
    --muted:      #a89e8d;
    --hair:       #443a2e;
    --accent:     #da7a57;
    --accent-diep:#e08a68;
    --zee:        #7bb0c4;
    --terracotta: #da7a57;
    --terracotta-fel: #e08a68;
    --goed:       #88a878;
    --goed-tint:  #26301f;
    --oker:       #d9a24e;
    --oker-tint:  #352b13;
    --slecht:     #ee8fa2;
    --slecht-tint:#3a1c22;
    --paars:      #b07f9c;
    --chip:       rgba(246,242,233,.07);
    --schaduw:    0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --op-bar:      #ffffff;
  --op-bar-2:    rgba(255,255,255,.74);
  --op-bar-3:    rgba(255,255,255,.5);
  --op-bar-lijn: rgba(255,255,255,.12);
  --op-bar-vlak: rgba(255,255,255,.07);
  --op-bar-vlak-2: rgba(255,255,255,.12);
  --op-bar-zee:  #9fc3e0;
  --op-bar-goed: #8fe3b0;
  --op-bar-slecht: #ffa8b8;
  color-scheme: dark;
  --bar:        #1a1611;
  --bar-diep:   #12100c;
  --bar-zacht:  #2e2820;
  --canvas:     #241f19;
  --surface:    #2e2820;
  --surface-2:  #382f26;
  --ink:        #d9d1c1;
  --kop:        #f6f2e9;
  --muted:      #a89e8d;
  --hair:       #443a2e;
  --accent:     #da7a57;
  --accent-diep:#e08a68;
  --zee:        #7bb0c4;
  --terracotta: #da7a57;
  --terracotta-fel: #e08a68;
  --goed:       #88a878;
  --goed-tint:  #26301f;
  --oker:       #d9a24e;
  --oker-tint:  #352b13;
  --slecht:     #ee8fa2;
  --slecht-tint:#3a1c22;
  --paars:      #b07f9c;
  --chip:       rgba(246,242,233,.07);
  --schaduw:    0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font); background: var(--canvas); color: var(--ink);
  font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { color: var(--kop); font-family: var(--kopfont); font-weight: 600;
                 letter-spacing: -.015em; line-height: 1.2; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 3vw, 34px); }
.tabulair { font-variant-numeric: tabular-nums; }

/* ── Zijbalk ──────────────────────────────────────────────────────────────
   Uitgeklapt 252 pixels, ingeklapt 66. In de smalle stand blijven de
   pictogrammen staan en verdwijnen alleen de teksten; een balk met louter een
   streep erin dwingt je hem elke keer weer open te klikken. */
html.zij-in { --zij-breed: var(--zij-smal); }

.schil { display: flex; align-items: stretch; min-height: 100vh; }
.zij {
  width: var(--zij-breed); flex: none; background: var(--bar-diep);
  border-right: 1px solid var(--op-bar-lijn);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  transition: width .18s ease;
}
.zij-kop { display: flex; align-items: center; gap: 8px; padding: 16px 14px 14px; }
.zij-knop {
  margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 7px;
  background: var(--op-bar-vlak); border: 1px solid var(--op-bar-lijn);
  color: var(--op-bar-2); cursor: pointer; display: grid; place-items: center;
  transition: background .15s ease, color .15s ease;
}
.zij-knop:hover { background: var(--op-bar-vlak-2); color: var(--op-bar); }
.zij-knop svg { width: 17px; height: 17px; transition: transform .18s ease; }
html.zij-in .zij-knop svg { transform: rotate(180deg); }

.zij-nav { padding: 4px 10px 14px; display: flex; flex-direction: column; gap: 1px; }
.zij-groep {
  font-size: 10px; font-weight: 650; letter-spacing: .15em; text-transform: uppercase;
  color: var(--op-bar-3); padding: 15px 10px 6px; white-space: nowrap;
}
.zij-nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px;
  color: var(--op-bar-2); font-size: 14px; font-weight: 450; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.zij-nav a:hover { background: var(--op-bar-vlak); color: var(--op-bar); }
.zij-nav a.actief { background: var(--op-bar-vlak-2); color: var(--op-bar); font-weight: 600; }
.zij-nav .ico { flex: none; width: 20px; height: 20px; display: grid; place-items: center;
                color: var(--kleur, var(--op-bar-3)); }
.zij-nav a:hover .ico, .zij-nav a.actief .ico { color: var(--kleur, var(--op-bar)); }
.zij-nav .ico svg { width: 19px; height: 19px; }

/* De collega in opleiding. Gedimd, met haar stand eronder in het klein — en
   het portret in grijs, want dat is het eerste wat je ziet en het laatste wat
   je leest. Ze is aan te klikken: de pagina erachter legt uit waar ze op
   wacht. Alleen dimmen zonder die pagina zou een dode link zijn.

   De regel wordt twee hoog en moet dus van de vaste regelhoogte af; zonder
   `line-height: 1.2` staat de stand bijna tegen de naam aan. */
.zij-nav a.leert { opacity: .62; }
.zij-nav a.leert:hover, .zij-nav a.leert.actief { opacity: 1; }
.zij-nav a.leert .collega-ico { filter: grayscale(1); }
.zij-nav a.leert:hover .collega-ico,
.zij-nav a.leert.actief .collega-ico { filter: none; }
.zij-nav a.leert .tekst { display: flex; flex-direction: column; line-height: 1.2; }
.zij-nav a.leert .tekst small { font-size: 10.5px; letter-spacing: .04em;
                                color: var(--op-bar-3); margin-top: 1px; }

/* ── Weekkiezer ───────────────────────────────────────────────────────────
   Eén punt voor de weekkeuze, in plaats van een strook per scherm. Uitgeklapt
   toont de knop "Week 33" met de periode eronder in de lijst; ingeklapt blijft
   alleen het nummer over — dat is nog steeds af te lezen en past in 66 pixels.

   De lijst schuift in de balk mee omlaag in plaats van eroverheen te zweven:
   de zijbalk heeft overflow-x verborgen, dus een uitklap naar rechts wordt
   afgekapt. Meeschuiven scrolt gewoon mee. */
.weekkies { padding: 0 0 2px; }
.weekknop {
  font: inherit; width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 8px; border: 1px solid var(--op-bar-lijn);
  background: var(--op-bar-vlak); color: var(--op-bar); font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.weekknop:hover { background: var(--op-bar-vlak-2); border-color: var(--op-bar-lijn); }
.weekknop .ico { flex: none; width: 20px; height: 20px; display: grid; place-items: center;
                 color: var(--terracotta-fel); }
.weekknop .ico svg { width: 18px; height: 18px; }
.weekknop .huidig { flex: 1 1 auto; }
.weekknop .pijl { flex: none; display: grid; place-items: center; opacity: .7; }
.weekknop .pijl svg { width: 16px; height: 16px; transition: transform .18s ease; }
.weekknop[aria-expanded="true"] .pijl svg { transform: rotate(180deg); }
.weekknop .smal-cijfer { display: none; font-variant-numeric: tabular-nums; }

.weeklijst { display: flex; flex-direction: column; gap: 1px; margin-top: 5px; }
/* Een eigen display-regel wint van het hidden-attribuut, dat via het
   browserstijlblad display:none zet. Zonder deze regel staat de lijst
   altijd open. */
.weeklijst[hidden] { display: none; }
.weeklijst a {
  display: flex; align-items: baseline; gap: 9px; padding: 7px 10px; border-radius: 7px;
  color: var(--op-bar-2); font-size: 13.5px; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.weeklijst a:hover { background: var(--op-bar-vlak); color: var(--op-bar); }
.weeklijst a.actief { background: var(--terracotta); color: #fff; font-weight: 650; }
:root[data-theme="dark"] .weeklijst a.actief { background: var(--terracotta); color: #08151f; }
.weeklijst .nr { min-width: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.weeklijst .datums { font-size: 12px; opacity: .72; font-variant-numeric: tabular-nums; }

/* Ingeklapt: alleen cijfers, gecentreerd. */
html.zij-in .weekknop { justify-content: center; padding-inline: 0; gap: 0; }
html.zij-in .weekknop .ico, html.zij-in .weekknop .huidig { display: none; }
html.zij-in .weekknop .smal-cijfer { display: block; font-size: 13.5px; }
html.zij-in .weeklijst a { justify-content: center; padding-inline: 0; }
html.zij-in .weeklijst .nr { min-width: 0; }

.zij-voet {
  margin-top: auto; padding: 14px; border-top: 1px solid var(--op-bar-lijn);
  color: var(--op-bar-3); font-size: 12.5px; white-space: nowrap;
}
.zij-versie { margin-top: 6px; font-size: 11.5px; color: var(--op-bar-3); }

html.zij-in .zij-nav a { justify-content: center; padding-inline: 0; }
html.zij-in .merk-naam,
html.zij-in .zij-nav .tekst,
html.zij-in .zij-voet .tekst { display: none; }
html.zij-in .zij-kop { flex-direction: column; gap: 10px; padding-inline: 8px; }
html.zij-in .zij-knop { margin-left: 0; }
html.zij-in .zij-nav { padding-inline: 8px; }
html.zij-in .zij-groep {
  height: 1px; padding: 0; margin: 11px 10px; overflow: hidden;
  background: var(--op-bar-lijn); text-indent: -999px;
}
html.zij-in .zij-nav > .zij-groep:first-child { display: none; }
html.zij-in .zij-voet { display: flex; justify-content: center; padding-inline: 6px; }

.romp { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.romp main { flex: 1 0 auto; }

.verborgen-tekst {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Demomelding ──────────────────────────────────────────────────────────
   Geen sierstrook maar een mededeling die ertoe doet: alles hieronder is
   verzonnen. Staat boven én onder elke pagina. */
.demoband { background: #b0472a; color: #f6f2e9; font-size: 12.5px; font-weight: 500; }
:root[data-theme="dark"] .demoband { background: #a13f24; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .demoband { background: #a13f24; }
}
.demoband .wrap { display: flex; align-items: center; gap: 10px; padding-block: 8px; }
.demoband strong { font-weight: 650; }
.demoband .stip { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none; }

/* ── Topbalk ──────────────────────────────────────────────────────────────
   Zelfde opzet als bij de rm-agents: merkteken met naam en subtitel links, de
   datum en de themaschakelaar rechts. */
.topbar { background: var(--bar); color: var(--op-bar); }
.topbar-in { display: flex; align-items: center; justify-content: space-between;
             padding: 14px 0; gap: 16px; }
.merk { display: flex; align-items: center; gap: 11px; color: var(--op-bar); min-width: 0;
        font-family: var(--kopfont); font-weight: 600; font-size: 14.7px;
        letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.merk svg { width: 30px; height: 30px; flex: none; }

/* De naam van het scherm, links in de topbalk waar eerst het tweede zegel
   stond. Hij schreeuwt niet: wie hier kijkt weet waar hij is en gebruikt dit
   als bevestiging, niet als kop. */
.topbar-titel { font-size: 13px; color: var(--op-bar-2); letter-spacing: .02em;
                min-width: 0; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
.topbar-rechts { display: flex; align-items: center; gap: 16px; }
.topbar .datum { font-size: 12px; color: var(--op-bar-zee); }
.wissel {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--op-bar-lijn);
  background: var(--op-bar-vlak); color: var(--op-bar); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.wissel:hover { background: var(--op-bar-vlak-2); border-color: var(--terracotta-fel); }
.wissel svg { width: 17px; height: 17px; }

/* Wie er is ingelogd, rechtsboven. Dezelfde plek en vorm als in het beheer:
   naam als link naar het profiel, daarnaast uitloggen. In de kleuren van de
   balk zelf, want die is in beide thema's anders dan de pagina. */
.wie-balk { display: flex; align-items: center; gap: 8px; margin: 0; }
.wie-naam {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
  border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--op-bar-2); text-decoration: none;
}
.wie-naam svg { width: 16px; height: 16px; flex: none; }
.wie-naam:hover { color: var(--op-bar); background: var(--op-bar-vlak); }
.wie-balk button, .wie-inlog {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px;
  border-radius: 8px; border: 1px solid var(--op-bar-lijn); white-space: nowrap;
  background: transparent; color: var(--op-bar-2); cursor: pointer; text-decoration: none;
}
.wie-balk button:hover, .wie-inlog:hover { color: var(--op-bar); background: var(--op-bar-vlak-2); }
@media (max-width: 640px) {
  .wie-naam .naam, .topbar .datum { display: none; }
}
.icoon-zon { display: none; } .icoon-maan { display: block; }
:root[data-theme="dark"] .icoon-zon { display: block; }
:root[data-theme="dark"] .icoon-maan { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icoon-zon { display: block; }
  :root:not([data-theme="light"]) .icoon-maan { display: none; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────
   Tekst links, robot rechts. Onder de 980 pixels valt de robot weg: hij is
   sfeer, en sfeer mag wijken voor leesbaarheid. */
/* Een aangeleverd logo. Begrensd in hoogte en niet in breedte: een liggend
   woordmerk en een vierkant beeldmerk zijn allebei normaal, en op breedte
   begrenzen maakt het eerste onleesbaar klein. */
/* Een aangeleverd logo, op een lichte plaat.
   Onze balk is donker en een klantlogo is bijna altijd voor een witte
   achtergrond getekend — donkere letters verdwijnen er dan gewoon in. Vragen om
   een tweede versie voor donkere grond is een eis die de onboarding ophoudt om
   iets dat wij hier kunnen oplossen. De plaat is wat een merkhandboek zelf ook
   voorschrijft als een logo op een gekleurde grond moet staan.

   Begrensd in hoogte en niet in breedte: een liggend woordmerk en een vierkant
   beeldmerk zijn allebei normaal, en op breedte begrenzen maakt het eerste
   onleesbaar klein. */
.merk-logo { height: 24px; width: auto; max-width: 168px; object-fit: contain;
             display: block; flex: 0 0 auto;
             background: #fbf9f5; border-radius: 6px; padding: 5px 9px;
             box-sizing: content-box; }
.zij-kop .merk-logo { height: 21px; max-width: 132px; }

.hero { background: var(--bar); color: var(--op-bar); padding: 26px 0 30px; }
.hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-beeld { display: none; } }
.hero .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .13em;
                 text-transform: uppercase; color: var(--zee); margin-bottom: 11px; }
.hero h1 { color: var(--kop); font-size: clamp(24px, 3.3vw, 35px); line-height: 1.14; max-width: 22ch; }
.hero p.intro { color: var(--op-bar-2); font-size: 14.5px; max-width: 62ch; margin-top: 12px; }
.hero-beeld { display: flex; justify-content: center; align-items: center; }
.hero-beeld svg { width: 100%; max-width: 220px; height: auto; }

/* Het gezicht van de collega wiens scherm dit is. Een ring in zijn eigen
   kleur eromheen — dezelfde kleur die zijn kaart op het overzicht heeft en
   die in de grafieken terugkomt, zodat het verband zich vanzelf legt. */
.hero-wie { margin: 0; display: grid; justify-items: center; gap: 9px; }
.hero-gezicht {
  width: 100%; max-width: 142px; height: auto; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--op-bar-lijn), 0 10px 30px rgba(0,0,0,.18);
}
.hero-wie figcaption { font-size: 11px; font-weight: 700; letter-spacing: .13em;
                       text-transform: uppercase; color: var(--zee); }

/* ── Wat de collega te melden heeft ──────────────────────────────────────
   Een ballon links van zijn gezicht, met het puntje naar hem toe. Niet de
   kernboodschap — die staat al als onderkop en is een conclusie over de
   cijfers. Dit is het andere stuk: wat hij deed en wat er voor jou klaarligt,
   en dat stond verspreid over het scherm.

   Alleen met `met-ballon` verandert de indeling. Zonder bericht blijft het
   portret gewoon gecentreerd staan zoals het stond; een lege kolom naast een
   gezicht leest als een plaatje dat niet geladen is. */
.hero-wie.met-ballon {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center; gap: 6px 18px;
}
.hero-wie.met-ballon .hero-ballon { grid-row: 1 / 3; grid-column: 1; }
.hero-wie.met-ballon .hero-gezicht { grid-row: 1; grid-column: 2; }
.hero-wie.met-ballon figcaption { grid-row: 2; grid-column: 2; }

.hero-ballon {
  position: relative; margin: 0; text-align: left;
  padding: 13px 16px; border-radius: 14px;
  background: var(--op-bar-vlak); border: 1px solid var(--op-bar-lijn);
  color: var(--op-bar-2); font-size: 13.5px; line-height: 1.55;
  max-width: 44ch; text-wrap: pretty;
}
/* Het puntje: twee driehoeken over elkaar, zodat de rand doorloopt. Met één
   driehoek krijgt de ballon een gat in zijn omlijning precies op de plek waar
   het oog hem volgt. */
.hero-ballon::before, .hero-ballon::after {
  content: ""; position: absolute; top: 50%; left: 100%;
  width: 0; height: 0; border: 9px solid transparent; border-left-color: currentColor;
  margin-top: -9px;
}
.hero-ballon::before { color: var(--op-bar-lijn); }
.hero-ballon::after { color: var(--op-bar-vlak); margin-left: -1.5px; }

/* Onder deze breedte is er naast het portret geen ruimte voor een leesbare
   ballon. Dan valt de hele indeling terug op het gecentreerde portret — alleen
   de ballon verbergen zou een lege kolom overhouden. */
@media (max-width: 1180px) {
  .hero-ballon { display: none; }
  .hero-wie.met-ballon { grid-template-columns: auto; grid-template-rows: auto auto; }
  .hero-wie.met-ballon .hero-gezicht,
  .hero-wie.met-ballon figcaption { grid-column: 1; }
}

/* Het team als groep: overlappende portretten in plaats van een nette rij.
   Vier losse portretten naast elkaar lezen als vier producten; vier die
   elkaar raken lezen als een team. Dezelfde volgorde als in het menu, zodat
   het rijtje hierboven en de kaarten eronder niet uiteenlopen.

   De negatieve marge doet de overlap. `--i` loopt mee met de lus zodat de
   stapelvolgorde klopt zonder dat er per portret een regel bij hoeft. */
.teamgroep { display: flex; align-items: center; }
.teamgroep img {
  width: clamp(58px, 6.4vw, 84px); height: auto; border-radius: 50%; flex: none;
  position: relative; z-index: calc(var(--i));
  border: 3px solid var(--bar);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.teamgroep img + img { margin-left: -18px; }

/* Zweven, af en toe knipperen, en een radarpuls uit de antenne. Alles binnen
   prefers-reduced-motion: dit is versiering, geen informatie. */
@media (prefers-reduced-motion: no-preference) {
  .hero-beeld .robot { animation: r-zweef 4s ease-in-out infinite; }
  .hero-beeld .r-oog  { transform-box: fill-box; transform-origin: center;
                        animation: r-knipper 5.5s ease-in-out infinite; }
  .hero-beeld .r-ring { transform-box: fill-box; transform-origin: center;
                        animation: r-radar 2.8s ease-out infinite; }
  .hero-beeld .r-stip { transform-box: fill-box; transform-origin: center;
                        animation: r-puls 2.8s ease-in-out infinite; }
}
@keyframes r-zweef   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes r-knipper { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@keyframes r-radar   { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(2.1); opacity: 0; } }
@keyframes r-puls    { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ── KPI-strook ───────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
        margin-top: 26px; border-top: 1px solid var(--op-bar-lijn); }
.kpi { padding: 17px 22px 6px; border-right: 1px solid var(--op-bar-lijn); }
.kpi:last-child { border-right: none; }
.kpi .num { font-size: 29px; font-weight: 700; letter-spacing: -.02em;
            font-variant-numeric: tabular-nums; color: var(--kop); line-height: 1.1; }
.kpi .lab { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
            color: var(--op-bar-zee); margin-top: 4px; }
.kpi .sub { font-size: 12px; margin-top: 3px; color: var(--op-bar-2); }
.kpi .sub.op   { color: var(--op-bar-goed); }
.kpi .sub.neer { color: var(--op-bar-slecht); }

/* ── Tabbalk ──────────────────────────────────────────────────────────── */
/* De ruimte tussen de hero en de inhoud hoort hier te staan en nergens
   anders. Stond die op het eerste element, dan kreeg elk scherm een andere
   afstand: wie met een tabbalk begon had 22px, wie met een kaart begon nul en
   plakte tegen de donkere kop aan. */
main { padding: var(--ruimte-kop) 0 50px; }
.tabbalk { display: flex; gap: 4px; border-bottom: 1px solid var(--hair);
           margin: 0 0 26px; flex-wrap: wrap; }
.tab {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 11px 15px; background: none; border: none; color: var(--muted);
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--ink); }
.tab.actief { color: var(--accent); border-bottom-color: var(--accent); }
.tab .stip { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* De kanalen op de koppelingenpagina: echte links, met de stand als stip. */
a.tab { text-decoration: none; }
.koppelnav .stip.goed   { background: var(--goed); }
.koppelnav .stip.slecht { background: var(--slecht); }
.koppelnav .stip.let-op { background: var(--oker); }
.koppelnav .stip.rustig { background: var(--hair); }
.tab .tel { background: var(--chip); border-radius: 10px; padding: 1px 7px;
            font-size: 11.5px; font-weight: 700; }
.tab.wacht .tel { background: var(--terracotta); color: #fff; }
:root[data-theme="dark"] .tab.wacht .tel { color: #08151f; }
.tabinhoud { display: none; } .tabinhoud.actief { display: block; }
.tab-intro { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 88ch;
             margin-bottom: 26px; }

/* ── Kaarten ──────────────────────────────────────────────────────────── */
.kaart { background: var(--surface); border: 1px solid var(--hair); border-radius: 12px;
         box-shadow: var(--schaduw); padding: 20px 22px; }
/* Alleen voor kaarten die in de gewone stroom onder elkaar staan. In een
   raster duwt deze marge elke kaart behálve de eerste omlaag: hij wordt dan
   16px korter dan zijn rij en lijnt onderaan uit in plaats van te vullen.
   Dat is wat de kaarten in elk raster deed verspringen — de eerste stak er
   steeds bovenuit. Een raster regelt zijn afstand met gap. */
.kaart + .kaart { margin-top: 16px; }
:is(.rooster, .kolomraster, .treffers, .kolommen, .r2, .r3, .r4) > .kaart + .kaart {
  margin-top: 0;
}
.kaart-titel { font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
               text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.kaart-sub { font-size: 13px; color: var(--muted); margin-top: -9px; margin-bottom: 14px; }
.rooster { display: grid; gap: 18px; }
.r2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.r3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.r4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kolommen { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
            gap: 16px; align-items: start; }
@media (max-width: 960px) { .kolommen { grid-template-columns: 1fr; } }
.blok { margin-bottom: 40px; }
.blok > h2 { font-size: 19px; margin-bottom: 6px; }
.blok > .uitleg { color: var(--muted); font-size: 14px; margin-bottom: 20px;
                  max-width: 88ch; line-height: 1.7; }

/* ── Kernboodschap ────────────────────────────────────────────────────── */
.kern {
  background: var(--surface); border: 1px solid var(--hair);
  border-left: 3px solid var(--terracotta); border-radius: 11px;
  padding: 18px 22px; box-shadow: var(--schaduw); margin-bottom: 20px;
}
.kern .label { font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
               text-transform: uppercase; color: var(--terracotta); }
.kern p { margin-top: 7px; font-size: 16.5px; color: var(--ink); font-weight: 500;
          line-height: 1.5; text-wrap: pretty; }
.kern p + p { margin-top: 9px; font-size: 14.5px; font-weight: 400; color: var(--muted); }
.watnu { display: block; margin-top: 10px; font-size: 14px; color: var(--ink);
         padding-left: 13px; border-left: 2px solid var(--accent); }
.watnu b { color: var(--accent); }

/* ── Conclusieblokken ─────────────────────────────────────────────────── */
.conclusie { padding: 14px 0; border-top: 1px solid var(--hair); }
.conclusie:first-child { border-top: none; padding-top: 0; }
.conclusie h3 { font-size: 14.5px; margin-bottom: 5px; }
.conclusie p { font-size: 14px; color: var(--muted); text-wrap: pretty; }

/* ── Tabellen ─────────────────────────────────────────────────────────── */
.tabelhoes { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
           text-transform: uppercase; color: var(--muted); padding: 8px 10px 8px 0;
           border-bottom: 1px solid var(--hair); white-space: nowrap; }
tbody td { padding: 9px 10px 9px 0; border-top: 1px solid var(--hair); vertical-align: top;
           font-variant-numeric: tabular-nums; }
tbody tr:first-child td { border-top: none; }
/* Een paar pixels lucht links in de eerste kolom. Die stond op nul, en dat
   werkt zolang er links niets is — maar staat de tabel in een kaart of een
   uitklap, dan valt de eerste letter precies op de rand. Vier pixels is genoeg
   om dat te zien zonder dat de tabel zichtbaar inspringt ten opzichte van de
   tekst erboven. */
thead th:first-child, tbody td:first-child, tfoot td:first-child { padding-left: 4px; }
td.getal, th.getal { text-align: right; white-space: nowrap;
                     padding-right: 16px; padding-left: 16px; }
/* Rechts uitlijnen werkt alleen als er lucht achter het getal staat. Zonder
   deze twee regels plakte 'Uitgevoerd' tegen 'Wat er gedaan is' aan: één woord
   'UITGEVOERDWAT ER GEDAAN IS'. De laatste kolom houdt wél de rechterrand aan,
   anders staat de hele tabel scheef in zijn kaart. */
td.getal:last-child, th.getal:last-child { padding-right: 0; }
td.naam { font-weight: 600; color: var(--ink); }
tr.gedimd td { color: var(--muted); }
tr.gedimd td.naam { font-weight: 450; text-decoration: line-through;
                    text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }
tfoot td { border-top: 2px solid var(--hair); font-weight: 650; }

/* ── Merkjes ──────────────────────────────────────────────────────────── */
/* Twee regels die er niet in stonden en waardoor een merkje in een flexrij uit
   zijn vorm liep. `flex: none` omdat een flexitem anders krimpt tot onder zijn
   inhoud. En `align-self: center` omdat een flexrij zijn kinderen standaard
   uitrékt: naast een titel van twee regels werd het merkje veertig pixels hoog,
   en met een radius van twintig is dat geen pil meer maar een cirkel. Zo
   stonden 'SEO' en 'Content' in de stapel 'Uit te werken'. */
.merkje { display: inline-block; flex: none; align-self: center;
          padding: 2px 8px; border-radius: 20px;
          font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.merkje.nieuw  { background: color-mix(in srgb, var(--terracotta) 14%, transparent); color: var(--terracotta); }
.merkje.goed   { background: var(--goed-tint);   color: var(--goed); }
.merkje.let-op { background: var(--oker-tint);   color: var(--oker); }
.merkje.slecht { background: var(--slecht-tint); color: var(--slecht); }
.merkje.rustig { background: var(--chip);        color: var(--muted); }
.merkje.blauw  { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.op { color: var(--goed); font-weight: 600; }
.neer { color: var(--slecht); font-weight: 600; }
.stil { color: var(--muted); }
.klein { font-size: 12.5px; }
.mt { margin-top: 15px; }
.leeg { padding: 26px 4px; text-align: center; color: var(--muted); font-size: 14px; }

/* ── Status ───────────────────────────────────────────────────────────── */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
          font-weight: 550; color: var(--muted); }
.status .stip { width: 7px; height: 7px; border-radius: 50%; background: var(--goed); flex: none; }
.status.wacht .stip { background: var(--oker); }
.status.uit .stip   { background: var(--muted); }
.zij .status { color: var(--op-bar-3); }
.zij .status .stip { background: #88a878; }

/* ── Balken en meters ─────────────────────────────────────────────────── */
.balkbak { height: 7px; border-radius: 4px; background: var(--chip); overflow: hidden;
           margin-top: 6px; }
.balkbak > i { display: block; height: 100%; border-radius: 4px; }
.staaf-rij { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2.2fr) auto;
             gap: 12px; align-items: center; padding: 7px 0; }
.staaf-naam { display: flex; align-items: center; gap: 8px; font-size: 13.5px;
              font-weight: 550; min-width: 0; }
.staaf-naam > span:last-child { overflow-wrap: anywhere; }
.staaf-bak { height: 9px; border-radius: 5px; background: var(--chip); overflow: hidden; }
.staaf-vul { height: 100%; border-radius: 5px; }
.staaf-getal { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
               text-align: right; }
.staaf-sub { font-size: 11.5px; color: var(--muted); text-align: right;
             font-variant-numeric: tabular-nums; }
.kanaalstip { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.meter .spoor { height: 9px; border-radius: 5px; background: var(--chip);
                overflow: hidden; position: relative; }
.meter .spoor > i { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.meter .spoor > i.gehaald { background: var(--goed); }
.meter .doellijn { position: absolute; top: -3px; bottom: -3px; width: 2px;
                   background: var(--ink); opacity: .5; }
.meter .bij { display: flex; justify-content: space-between; font-size: 12.5px;
              color: var(--muted); margin-top: 6px; }

.kanaalrij { padding: 15px 0; border-bottom: 1px solid var(--hair); }
.kanaalrij:last-child { border-bottom: none; padding-bottom: 0; }
.kanaalkop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.kanaalnaam { font-size: 14.5px; font-weight: 700; }
.kanaalcijfer { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums;
                color: var(--muted); }
.kanaalcijfer b { font-size: 16px; color: var(--ink); }
.kanaalvoet { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 12px;
              color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Grafieken ────────────────────────────────────────────────────────── */
.grafiek { width: 100%; height: auto; display: block; }
.grafiek-kop { display: flex; justify-content: space-between; align-items: flex-start;
               gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.hero-cijfer { font-size: 28px; font-weight: 700; letter-spacing: -.02em;
               font-variant-numeric: tabular-nums; line-height: 1.1; }
.hero-cijfer-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.legenda { display: flex; gap: 15px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }

/* ── Aanbeveling met beoordelingsknoppen ──────────────────────────────── */
.aanbev { border: 1px solid var(--hair); border-radius: 11px; padding: 16px 18px;
          background: var(--surface); }
.aanbev + .aanbev { margin-top: 12px; }
.aanbev.hoog { border-left: 3px solid var(--terracotta); }
.aanbev .top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
               margin-bottom: 6px; }
.aanbev .titel { font-size: 15px; font-weight: 650; flex: 1 1 300px; color: var(--ink); }
.aanbev p { font-size: 14px; color: var(--ink); text-wrap: pretty; line-height: 1.65; }
/* 'Waarom hoog' stond acht pixels onder het advies en las daardoor als de
   volgende zin ervan. Het is een ander soort tekst — niet wat er moet gebeuren
   maar waarom het zwaar weegt — en dat verschil hoort in de ruimte te zitten,
   niet alleen in de kleur.

   Twee keer dezelfde regel, want sinds de adviezen één ingeklapte lijst zijn
   staat dezelfde `.waarom` ook buiten een `.aanbev`. Een losse klasse zonder
   ouder zou het in één regel doen, maar dan verliest hij de uitzondering die
   hieronder nog kan komen voor de kaartvorm. */
.aanbev .waarom,
.uitklap.advies .waarom {
  font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.6;
}
.aanbev .herkomst,
.uitklap.advies .herkomst {
  font-size: 12.5px; color: var(--muted); margin-top: 12px;
}
/* En het advies zelf krijgt lucht onder de samenvattingsregel. */
.uitklap.advies .uitklap-in > p:first-child { margin-top: 0; }
.uitklap.advies .uitklap-in .besluitvorm { margin-top: 16px; }
.tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
       padding: 2px 8px; border-radius: 20px; }
.tag.hoog   { background: color-mix(in srgb, var(--terracotta) 14%, transparent); color: var(--terracotta); }
.tag.midden { background: var(--oker-tint); color: var(--oker); }
.tag.laag   { background: var(--chip); color: var(--muted); }

.oordeel { display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
           margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--hair); }
.oordeel .label { font-size: 11.5px; color: var(--muted); margin-right: 3px; }
.oordeel-knop, .gedaan-knop, .weg-knop {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 5px 11px; border-radius: 7px; background: none;
  border: 1px solid var(--hair); color: var(--muted);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.oordeel-knop:hover, .gedaan-knop:hover, .weg-knop:hover { color: var(--ink); border-color: var(--muted); }
.oordeel-knop[aria-pressed="true"] { border-color: transparent; }
.oordeel-knop.goed[aria-pressed="true"]      { background: var(--goed); color: #fff; }
.oordeel-knop.gemiddeld[aria-pressed="true"] { background: var(--oker); color: #fff; }
.oordeel-knop.slecht[aria-pressed="true"]    { background: var(--slecht); color: #fff; }
.gedaan-knop { margin-left: auto; }
.gedaan-knop:hover { color: var(--goed); border-color: var(--goed); }
.gedaan-knop[aria-pressed="true"] { background: var(--goed); border-color: var(--goed); color: #fff; }
.weg-knop[aria-pressed="true"] { background: var(--muted); border-color: var(--muted); color: #fff; }
.aanbev:has(.weg-knop[aria-pressed="true"]) { opacity: .5; }
:root[data-theme="dark"] .oordeel-knop[aria-pressed="true"],
:root[data-theme="dark"] .gedaan-knop[aria-pressed="true"] { color: #08151f; }

.oordeel-stand { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted);
                 flex-wrap: wrap; }
.oordeel-stand b { color: var(--ink); }
.graad { margin: 14px 0 18px; }
.graad-kop { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.graad-kop b { font-size: 16px; }
.graad-balk { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.graad-balk > div { height: 100%; background: var(--accent); border-radius: 4px; }
.graad-bij { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ── Voorstel met knoppen ─────────────────────────────────────────────── */
.voorstel { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden;
            background: var(--surface); }
.voorstel + .voorstel { margin-top: 13px; }
.voorstel.open { border-color: color-mix(in srgb, var(--terracotta) 45%, transparent);
                 box-shadow: 0 0 0 3px color-mix(in srgb, var(--terracotta) 8%, transparent); }
.voorstel .kop { padding: 15px 18px 11px; display: flex; gap: 10px; align-items: baseline;
                 flex-wrap: wrap; }
.voorstel .kop h4 { font-size: 15px; flex: 1 1 300px; }
.voorstel .lijf { padding: 0 18px 14px; }
.voorstel .lijf p { font-size: 14px; text-wrap: pretty; }
.voorstel .lijf .effect { margin-top: 8px; font-size: 13px; color: var(--muted); }
.voorstel .voet { padding: 11px 18px; background: var(--surface-2);
                  border-top: 1px solid var(--hair); display: flex; gap: 10px;
                  align-items: center; flex-wrap: wrap; }
.knop { font: inherit; font-size: 13px; font-weight: 650; padding: 7px 15px;
        border-radius: 8px; border: 1px solid transparent; cursor: pointer;
        transition: filter .15s ease; }
.knop:hover { filter: brightness(1.07); }
.knop.ja  { background: var(--goed); color: #fff; }
/* De gewone actieknop. Terracotta draagt alles wat je aanklikt; groen is
   voorbehouden aan een oordeel (goedkeuren, geslaagd) en zou hier zeggen dat er
   iets is goedgekeurd. */
/* De tekstkleur komt uit een variabele omdat een klant zijn eigen
   accentkleur mag zetten. Op een licht merk moet dit label zwart
   worden; vast op #f6f2e9 is het dan onleesbaar. */
.knop.doe { background: var(--accent-diep); color: var(--op-accent, #f6f2e9); }
:root[data-theme="dark"] .knop.doe { background: #b0472a; color: #f6f2e9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .knop.doe { background: #b0472a; color: #f6f2e9; }
}
.knop.nee { background: transparent; color: var(--slecht);
            border-color: color-mix(in srgb, var(--slecht) 40%, transparent); }
:root[data-theme="dark"] .knop.ja { color: #1a1611; }
.uitslag { font-size: 13px; color: var(--muted); }

/* ── Actie in het logboek ─────────────────────────────────────────────── */
.actie { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.actie:last-child { border-bottom: none; padding-bottom: 0; }
.actie .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
               font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.actie .meta .chip { background: var(--chip); border-radius: 5px; padding: 1px 7px;
                     font-weight: 600; }
.actie p { font-size: 14px; text-wrap: pretty; }
.effect-uitleg { font-size: 13px; color: var(--muted); margin-top: 7px; }
.effect { font-weight: 650; }
.effect.duidelijk { color: var(--goed); }
.effect.tevroeg   { color: var(--oker); }
.effect.onbekend  { color: var(--muted); }

/* ── Bronstatus ───────────────────────────────────────────────────────── */
.statusrij { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0;
             border-top: 1px solid var(--hair); font-size: 13.5px; flex-wrap: wrap; }
.statusrij:first-child { border-top: none; }
.statusrij .detail,
/* Ook in tabelcellen: daar stond de toelichting tot v1.6.0 achter de naam
   geplakt op dezelfde regel, wat 'online-marketeer' en 'claude-opus-5' tot één
   woord maakte. */
td .detail { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ── Mailvoorbeeld ────────────────────────────────────────────────────── */
.mailhoes { max-width: 720px; margin: 0 auto; }
.mailkop { background: var(--surface); border: 1px solid var(--hair);
           border-radius: 12px 12px 0 0; padding: 16px 22px; font-size: 13.5px; }
/* De labelkolom is zo breed als het langste label — "Antwoord aan" brak
   anders over twee regels en zette de hele kop scheef. */
.mailkop dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.mailkop dt { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.mailbody { background: var(--surface); border: 1px solid var(--hair); border-top: none;
            border-radius: 0 0 12px 12px; padding-bottom: 24px; box-shadow: var(--schaduw); }
.mailband { background: var(--bar); color: var(--op-bar); padding: 20px 24px; }
.mailband h2 { color: var(--kop); font-size: 19px; }
.mailband .sub { color: var(--op-bar-2); font-size: 13.5px; margin-top: 4px; }
.mailinhoud { padding: 20px 24px 0; }
.mailinhoud h3 { font-size: 15px; margin: 19px 0 8px; }
.mailinhoud p { font-size: 14px; text-wrap: pretty; }
.mailinhoud p + p { margin-top: 11px; }
.mailcijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
               gap: 10px; margin: 15px 0; }
.mailcijfer { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 9px;
              padding: 11px 13px; }
.mailcijfer .naam { font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
                    text-transform: uppercase; color: var(--muted); }
.mailcijfer .waarde { font-size: 20px; font-weight: 700; color: var(--ink);
                      letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ── Keten ────────────────────────────────────────────────────────────── */
.keten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.ketenstap { position: relative; padding: 15px 20px 15px 0; }
.ketenstap:not(:last-child)::after {
  content: ""; position: absolute; right: 9px; top: 25px; width: 9px; height: 9px;
  border-top: 1.6px solid var(--accent); border-right: 1.6px solid var(--accent);
  transform: rotate(45deg);
}
.ketenstap .agent { font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
                    text-transform: uppercase; color: var(--accent); }
.ketenstap .wk { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ketenstap p { font-size: 13.5px; margin-top: 8px; text-wrap: pretty; }
@media (max-width: 900px) {
  .keten { grid-template-columns: 1fr; }
  .ketenstap { padding: 13px 0 13px 20px;
               border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); }
  .ketenstap:not(:last-child)::after { top: auto; bottom: -5px; left: -6px; right: auto;
                                       transform: rotate(135deg); }
}
.schakel { border: 1px solid var(--hair); border-radius: 12px; background: var(--surface);
           box-shadow: var(--schaduw); }
.schakel + .schakel { margin-top: 16px; }
.schakel > .kop { padding: 16px 22px 13px; border-bottom: 1px solid var(--hair);
                  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.schakel > .kop h3 { font-size: 16.5px; flex: 1 1 320px; }
.schakel > .body { padding: 4px 22px 16px; }

/* ── Ruimere zetting ──────────────────────────────────────────────────────
   Alleen op de samenwerkingspagina. Die bestaat uit lopende uitleg met
   afbeeldingen ertussen en leest van boven naar beneden; de dashboards zijn
   scanwerk en willen juist dicht op elkaar staan. Eén maat voor allebei laat
   altijd een van de twee verkeerd ademen. */
.ruim > .blok { margin-bottom: 66px; }
.ruim > .blok:last-child { margin-bottom: 0; }
.ruim .blok > h2 { margin-bottom: 7px; }
.ruim .blok > .uitleg { margin-bottom: 24px; line-height: 1.75; }
.ruim .schakel + .schakel { margin-top: 26px; }
.ruim .schakel > .body { padding-block: 8px 20px; }
.ruim .ketenstap { padding-block: 18px; }
.ruim .ketenstap p { margin-top: 10px; line-height: 1.65; }
.ruim .kaart > .tab-intro:last-child { margin: 26px 0 0; line-height: 1.75; }
.ruim .rooster .kaart p { line-height: 1.65; }

/* ── Agentkaart op het overzicht ──────────────────────────────────────── */
.agentkaart { display: block; background: var(--surface); border: 1px solid var(--hair);
              border-radius: 12px; padding: 18px 20px; box-shadow: var(--schaduw);
              border-top: 3px solid var(--zee);
              transition: transform .16s ease; }
.agentkaart:hover { transform: translateY(-2px); }
.agentkaart .rol { font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
                   text-transform: uppercase; color: var(--muted); }
.agentkaart h3 { font-size: 17px; margin: 4px 0 7px; }
.agentkaart .wat { font-size: 13.5px; color: var(--muted); }
.agentkaart .hoogtepunt { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair);
                          font-size: 14px; color: var(--ink); line-height: 1.5; text-wrap: pretty; }
.agentkaart .voet { margin-top: 12px; }

/* ── Voet ─────────────────────────────────────────────────────────────── */
footer { background: var(--bar-diep); color: var(--op-bar-3); padding: 24px 0;
         font-size: 13px; }
footer .in { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap;
             align-items: center; }
footer a { color: var(--zee); }

/* ── Smal scherm ──────────────────────────────────────────────────────────
   De schil gaat van flex naar block en de balk wordt vast gepositioneerd: als
   flex-item hield de romp zijn eigen inhoudsbreedte aan. */
@media (max-width: 900px) {
  :root { --zij-breed: var(--zij-smal); }
  .schil { display: block; }
  .zij { position: fixed; top: 0; bottom: 0; left: 0; height: 100%;
         width: var(--zij-smal); z-index: 60; }
  .romp { margin-left: var(--zij-smal); }
  html:not(.zij-in) .zij { width: 252px; box-shadow: 0 0 0 100vmax rgba(5,13,22,.55); }
  html:not(.zij-in) .merk-naam,
  html:not(.zij-in) .zij-nav .tekst,
  html:not(.zij-in) .zij-voet .tekst { display: revert; }
  html:not(.zij-in) .zij-groep { display: block; height: auto; background: none;
                                 text-indent: 0; margin: 0; padding: 15px 10px 6px; }
  html:not(.zij-in) .zij-nav a { justify-content: flex-start; padding-inline: 10px; }
  html:not(.zij-in) .zij-kop { flex-direction: row; padding-inline: 14px; }
  html:not(.zij-in) .zij-knop { margin-left: auto; }
  html:not(.zij-in) .zij-voet { display: block; padding-inline: 14px; }
  html:not(.zij-in) .weekknop { justify-content: flex-start; padding-inline: 10px; gap: 11px; }
  html:not(.zij-in) .weekknop .ico,
  html:not(.zij-in) .weekknop .huidig { display: revert; }
  html:not(.zij-in) .weekknop .smal-cijfer { display: none; }
  html:not(.zij-in) .weeklijst a { justify-content: flex-start; padding-inline: 10px; }
  body > .demoband:first-child .wrap { padding-left: calc(var(--zij-smal) + 18px); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .agentkaart:hover { transform: none; }
}

/* De weg terug naar het beheer, onderin de zijbalk. Staat er alleen als er meer
   dan één klant draait — bij één klant is het dashboard de hele omgeving en
   zou deze link tijdens een verkoopgesprek alleen maar vragen oproepen. */
.zij-beheer {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 8px 0 4px;
  border-radius: 8px; text-decoration: none;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.zij-beheer:hover { color: var(--op-bar); background: var(--op-bar-vlak); }
.zij-beheer svg { width: 16px; height: 16px; flex: none; }
.zij-in .zij-beheer { justify-content: center; padding: 8px 0; }

/* ── Het zegel ─────────────────────────────────────────────────────────────
   De kleuren staan hier en niet in de SVG, zodat het merkteken meeschakelt met
   het thema en de merkkleur op één plek staat.

   De ring en de sleutels volgen de kleur die op een balk hoort: kalk op inkt,
   inkt op zand. Het hart houdt in beide standen de volle merkkleur #b0472a —
   een schijf van tien pixel hoeft geen leescontrast te halen, een link wel.
   Zie huisstijl/palet.md. */
.zegel .zegel-ring,
.zegel .zegel-sleutel { stroke: var(--op-bar); fill: none; stroke-linejoin: miter; }
.zegel .zegel-hart { fill: #b0472a; }

/* De beoordelingsknoppen. Het redenveld staat ertussen en niet erachter: bij
   afwijzen is een reden verplicht, en een veld dat je pas ziet nadat je op
   afwijzen hebt geklikt, levert een foutmelding in plaats van een besluit. */
.besluitvorm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.besluitvorm .reden {
  font: inherit; font-size: 13px; padding: 6px 10px; min-width: 210px; flex: 1;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--hair); border-radius: 8px;
}
.besluitvorm .reden:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Support ──────────────────────────────────────────────────────────────
   De kennisbank, het vraagveld en de gesprekken. Alles bouwt op de bestaande
   bouwstenen (.kaart, .merkje, .knop); wat hier staat zijn de vormen die er
   nog niet waren. */

/* Het vraagveld. Breed en bovenaan: het is de eerste handeling op deze pagina
   en straks de plek waar de chat komt. */
.zoekbalk { display: flex; gap: 10px; }
.zoekbalk input[type="text"] {
  flex: 1; font: inherit; font-size: 15px; padding: 12px 16px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 9px;
}
.zoekbalk input[type="text"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.zoekbalk .knop { padding-inline: 20px; }
.zoekuitleg { margin-top: 10px; margin-bottom: 0; }

/* Treffers en kennisbankkaarten. Beide zijn een link die als kaart leest;
   display:grid zodat de drie regels niet aan elkaar plakken. */
.treffers { display: grid; gap: 12px; }
.kolomraster { display: grid; gap: 14px; }
.treffer, .kb-kaart {
  display: grid; gap: 4px; text-decoration: none; color: inherit;
  padding: 15px 18px;
  transition: border-color .14s ease, transform .14s ease;
}
/* Eigen klassen en niet .kaart-titel: die is een bovenschrift in kapitalen,
   bedoeld voor een label van twee woorden. Een sectietitel is een zin, en die
   gaat in kapitalen schreeuwen. */
.treffer .hier, .kb-kaart .hier {
  font-size: 15px; font-weight: 600; color: var(--kop); line-height: 1.35;
}
.treffer .bron {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.treffer .klein, .kb-kaart .klein { line-height: 1.55; }
.treffer:hover, .kb-kaart:hover {
  border-color: var(--accent); transform: translateY(-1px);
}
.treffer:focus-visible, .kb-kaart:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.kb-groep {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin: 26px 0 12px;
}
.kb-groep:first-of-type { margin-top: 0; }

/* Een artikel. Smalle maat: dit is lopende tekst en geen dashboard. */
.artikel { max-width: 70ch; }
.artikel p { margin: 0 0 14px; line-height: 1.68; }
.artikel h3 {
  font-family: var(--kopfont); font-size: 17px; margin: 30px 0 12px;
  color: var(--kop); scroll-margin-top: 20px;
}
.artikel h4 {
  font-family: var(--kopfont); font-size: 15px; margin: 24px 0 10px;
  color: var(--kop); scroll-margin-top: 20px;
}
.artikel > h3:first-child { margin-top: 0; }
.artikel > :first-child { margin-top: 0; }
.artikel ul, .artikel ol { margin: 0 0 16px; padding-left: 22px; line-height: 1.68; }
.artikel li { margin-bottom: 7px; }
.artikel code {
  background: var(--chip); padding: 1px 6px; border-radius: 4px; font-size: .92em;
}
/* Het let-op-blok. Eén streep links en geen gekleurd vlak: dit is een zijsprong
   in de tekst, geen waarschuwing waar iemand van hoort te schrikken. */
.artikel .let-op {
  border-left: 3px solid var(--accent); padding: 2px 0 2px 16px;
  margin: 0 0 16px; color: var(--muted);
}
.artikel .let-op p:last-child { margin-bottom: 0; }

.inhoudsopgave { list-style: none; margin: 10px 0 0; padding: 0; }
.inhoudsopgave li { margin-bottom: 8px; font-size: 14px; }
.inhoudsopgave a { color: var(--ink); text-decoration: none; }
.inhoudsopgave a:hover { color: var(--accent); text-decoration: underline; }
.vervolg { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vervolg p { margin: 0 auto 0 0; }

/* Het vraagformulier. */
.vraagformulier { display: grid; gap: 7px; }
.vraagformulier label { font-size: 13px; font-weight: 650; color: var(--kop); }
.vraagformulier label + input, .vraagformulier label + textarea { margin-bottom: 12px; }
.vraagformulier input[type="text"], .vraagformulier textarea {
  font: inherit; font-size: 14px; padding: 10px 13px; width: 100%;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 8px;
}
.vraagformulier textarea { resize: vertical; line-height: 1.6; }
.vraagformulier input:focus-visible, .vraagformulier textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.soortkeuze { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.soort {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 14px; border: 1px solid var(--hair); border-radius: 8px;
  font-size: 13px; font-weight: 500; background: var(--surface-2);
}
.soort:has(input:checked) { border-color: var(--accent); color: var(--kop); }
.soort:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.aanvink { display: flex; align-items: center; gap: 9px; cursor: pointer;
           font-weight: 500; margin: 4px 0 16px; }
.knoprij { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tips { margin: 10px 0 0; padding-left: 20px; font-size: 14px;
        color: var(--muted); line-height: 1.6; }
.tips li { margin-bottom: 7px; }

/* Het gesprek. Beide kanten links uitgelijnd en niet tegenover elkaar: dit is
   een dossier dat teruggelezen wordt, geen chatvenster. De kant blijkt uit de
   streep en de naam, en dat leest rustiger dan berichten die heen en weer
   springen. */
.gesprek { display: grid; gap: 14px; }
.bericht {
  background: var(--surface); border: 1px solid var(--hair);
  border-left: 3px solid var(--hair); border-radius: 10px; padding: 14px 18px;
}
.bericht.sidura { border-left-color: var(--accent); }
.bericht.klant { border-left-color: var(--zee); }
.bericht.chat { border-left-color: var(--muted); background: var(--surface-2); }
.bericht-kop {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  margin-bottom: 8px;
}
.bericht-kop .wie { font-size: 13px; font-weight: 650; color: var(--kop); }
.bericht-kop .stil { margin-left: auto; }
/* Witregels van de schrijver blijven staan; hij heeft ze ergens voor gezet. */
.bericht-tekst { white-space: pre-wrap; line-height: 1.65; font-size: 14.5px; }
.chat-let-op { margin: -2px 0 8px; font-style: italic; }
.standrij { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.antwoordvak { display: grid; gap: 8px; }
.antwoordvak label { font-size: 13px; font-weight: 650; color: var(--kop); }
.antwoordvak textarea {
  font: inherit; font-size: 14px; padding: 11px 14px; width: 100%;
  background: var(--surface-2); color: var(--ink); line-height: 1.6;
  border: 1px solid var(--hair); border-radius: 8px; resize: vertical;
  margin-bottom: 6px;
}
.antwoordvak textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Het getal naast een menu-item. */
.teller {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 5px;
  background: var(--accent-diep); color: var(--op-accent, #f6f2e9);
  border-radius: 20px; font-size: 11px; font-weight: 700; text-align: center;
}
tr.blokkeert td { background: var(--slecht-tint); }

@media (max-width: 760px) {
  .zoekbalk { flex-wrap: wrap; }
  .zoekbalk input[type="text"] { flex-basis: 100%; }
}

/* ── Werk: wie doet wat ───────────────────────────────────────────────────
   Per persoon een kaart in plaats van een rij in een tabel. Een tabel nodigt
   uit tot vergelijken van regel tot regel, en dat is precies wat hier niet de
   bedoeling is: het werk van een operator en dat van een klantbeheerder zijn
   niet dezelfde eenheid. */
.periodes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.persoon { display: grid; gap: 10px; }
.persoon-kop { display: flex; align-items: baseline; gap: 12px; }
.persoon .hier { font-size: 16px; font-weight: 600; color: var(--kop); }
.persoon .totaal {
  margin-left: auto; font-size: 22px; font-weight: 700; color: var(--accent);
  line-height: 1;
}
/* De wachttijd staat boven de telling en niet eronder: het is het getal dat de
   klant merkt, en het hoort gelezen te worden vóór het aantal. */
.wachtregel {
  margin: 0; padding: 8px 12px; border-radius: 7px;
  background: var(--surface-2); font-size: 13.5px; color: var(--muted);
}
.wachtregel strong { color: var(--kop); }
.soortlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.soortlijst li { display: flex; gap: 10px; font-size: 14px; align-items: baseline; }
.soortlijst .aantal {
  min-width: 2.2em; text-align: right; font-weight: 650; color: var(--kop);
}
.soortlijst .wat { color: var(--muted); }
.persoon-voet { margin: 2px 0 0; }

/* De filters boven de supportlijst. */
.filterrij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filterrij + .filterrij { margin-top: 10px; }
.filterlabel {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-right: 2px;
}
/* Het aantal in de knop. Niet in de kleur van het accent zoals .teller: daar
   is hij een waarschuwing, hier alleen een maat. */
.filterrij .telling {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 20px;
  background: var(--chip); color: var(--muted);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.knop.doe .telling { background: rgba(0, 0, 0, .18); color: inherit; }
/* De tijd onder de datum: de kolom blijft smal en de datums blijven onder
   elkaar leesbaar. */
td .detail.tabulair { display: block; font-size: 11.5px; color: var(--muted); }

/* ── Een keuzelijst die uitklapt ──────────────────────────────────────────
   Zonder JavaScript staat het paneel open en zijn het gewone links; het script
   klapt hem dicht. De opmaak gaat daar niet van uit — `position: absolute` zou
   zonder script een lijst over de tabel heen leggen, dus het paneel schuift
   alleen op als het echt een dropdown is (`[hidden]` is dan gezet). */
.kiezer { position: relative; display: inline-flex; align-items: center; gap: 9px; }
.kiezer-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.kiezer-knop {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 170px; padding: 8px 12px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 8px; text-align: left;
}
.kiezer-knop:hover { border-color: var(--lijn-fel, var(--hair)); }
.kiezer-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kiezer-nu { flex: 1; }
.kiezer-pijl { width: 16px; height: 16px; flex: none; color: var(--muted); }
.kiezer-knop[aria-expanded="true"] .kiezer-pijl { transform: rotate(180deg); }

.kiezer-paneel {
  min-width: 240px; max-width: 320px;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 10px; box-shadow: var(--schaduw); overflow: hidden;
}
/* Pas een dropdown zodra het script heeft gedraaid. Het paneel staat in de
   HTML open, en zou zonder die voorwaarde als overlay over de tabel liggen bij
   iemand wiens JavaScript het niet doet — dan is er geen knop om hem mee weg
   te klikken. Zonder script is het een rij links in de pagina. */
.kiezer[data-klaar] .kiezer-paneel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
}
.kiezer:not([data-klaar]) .kiezer-knop { display: none; }
.kiezer:not([data-klaar]) .kiezer-paneel { box-shadow: none; }

.kiezer-zoek { padding: 10px 10px 8px; border-bottom: 1px solid var(--hair); }
.kiezer-zoek input {
  font: inherit; font-size: 13.5px; width: 100%; padding: 8px 11px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 7px;
}
.kiezer-zoek input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.kiezer-lijst { max-height: 290px; overflow-y: auto; padding: 6px; }
.kiezer-lijst a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: 7px;
  font-size: 13.5px; color: var(--ink); text-decoration: none;
}
.kiezer-lijst a:hover { background: var(--surface-2); }
.kiezer-lijst a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kiezer-lijst a.actief { background: var(--chip); font-weight: 600; }
.kiezer-lijst .naam { flex: 1; }
.kiezer-lijst .telling {
  padding: 0 7px; border-radius: 20px; background: var(--chip);
  color: var(--muted); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kiezer-lijst a.actief .telling { background: var(--surface); }
.kiezer-niets { margin: 6px 11px 8px; font-size: 13px; color: var(--muted); }

.filteruitkomst {
  margin-left: auto; font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .kiezer { width: 100%; }
  .kiezer-knop { flex: 1; }
  .filteruitkomst { margin-left: 0; }
}

/* ── De vier collega's ────────────────────────────────────────────────────
   Gezicht boven de naam. De functienaam staat groter dan de roepnaam: een
   klant die hulp zoekt bij zijn cijfers zoekt op "Weekrapportage" en niet op
   "Atlas". De roepnaam staat eronder, als van een collega. */
.collega { display: grid; gap: 4px; justify-items: center; text-align: center; }
.collega-gezicht {
  width: 96px; height: 96px; border-radius: 50%; display: block;
  margin-bottom: 8px; background: var(--surface-2);
}
.collega-naam { font-size: 15px; font-weight: 600; color: var(--kop); }
/* Zeeblauw en niet terracotta: terracotta draagt alles wat je aanklikt, en een
   roepnaam lees je alleen. Zie huisstijl/palet.md. */
.collega-roep {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--zee);
}
.collega-wat {
  margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted);
  max-width: 28ch;
}

/* ── De teamrij op het overzicht ──────────────────────────────────────────
   Dezelfde agentkaart, met een gezicht erboven. De kernboodschap van die week
   staat waar eerst de functieomschrijving stond: wat hij deze week vond is
   waarvoor je kijkt, wat hij altijd doet staat op zijn eigen pagina. */
.teamkaart { display: grid; gap: 2px; align-content: start; }
.teamgezicht {
  width: 56px; height: 56px; border-radius: 50%; display: block;
  margin-bottom: 10px; background: var(--surface-2);
}
.teamroep {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--zee); margin-bottom: 8px;
}
.teamkaart .hoogtepunt { margin-top: 4px; }

/* Het klantblok zoals de agents het lezen: als tekst en niet als formulier.
   Wie ziet wat zijn invoer oplevert, vult meer in dan het verplichte deel. */
.klantblok pre {
  margin: 0; font: inherit; font-size: 14px; line-height: 1.7;
  white-space: pre-wrap; color: var(--ink);
}
dl.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; }
dl.gegevens dt { font-size: 13px; color: var(--muted); }
dl.gegevens dd { margin: 0; font-size: 14px; color: var(--ink); }
dl.gegevens dd .detail { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.vraagformulier .hulp { font-size: 12.5px; color: var(--muted); margin: -8px 0 12px; }
form[inert] { opacity: .6; }

/* Het gezicht van een collega in de navigatie, op de plek van zijn pictogram.
   Rond en gevuld, dus ook herkenbaar in de ingeklapte zijbalk waar alleen de
   pictogrammen overblijven — een portret van 22 pixel leest daar beter dan een
   lijntekening. */
.zij-nav .collega-ico {
  width: 22px; height: 22px; border-radius: 50%; display: block;
  opacity: .82; transition: opacity .14s ease;
}
.zij-nav a:hover .collega-ico,
.zij-nav a.actief .collega-ico { opacity: 1; }
/* De span om het portret is 20px breed; het portret mag er net buiten vallen. */
.zij-nav .ico:has(.collega-ico) { width: 22px; height: 22px; }
/* Ingeklapt valt de tekst weg en is het portret het enige onderscheid. Daar
   mag hij groter: er is 66 pixel breedte en niets anders om te tonen. */
.zij-in .zij-nav .collega-ico,
.zij-in .zij-nav .ico:has(.collega-ico) { width: 26px; height: 26px; }

/* ── De collega in opleiding ──────────────────────────────────────────────
   Haar pagina heeft geen cijfers en dus geen KPI-strook. Wat er in de plaats
   komt is zijzelf: portret, naam, stand. Dat is eerlijker dan een lege
   grafiek, en het is meteen het antwoord op de vraag waarmee iemand hier
   binnenkomt — wie is dit en waarom staat ze in mijn menu. */
.opleiding-kop { display: flex; gap: 20px; align-items: flex-start;
                 margin-bottom: 26px; }
.opleiding-portret { width: 96px; height: 96px; border-radius: 50%; flex: none;
                     background: var(--vlak-zacht, rgba(127,127,127,.08)); }
.opleiding-kop h2 { margin: 0; font-size: 20px; }
.opleiding-kop p { margin: .5rem 0 0; max-width: 62ch; }
.opleiding-stand {
  display: inline-block; margin: .45rem 0 0 !important; padding: 2px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink); background: rgba(138,122,94,.18);
  border: 1px solid rgba(138,122,94,.42);
}
@media (max-width: 560px) {
  .opleiding-kop { flex-direction: column; gap: 14px; }
  .opleiding-portret { width: 72px; height: 72px; }
}

/* ── Uitklapbare onderbouwing ─────────────────────────────────────────────
   De schermen openden met alles tegelijk: de weekrapportage telde elf blokken
   op het eerste tabblad, en wie hem opensloeg kreeg veertien kantjes voordat
   hij de conclusie had gelezen. De klacht was letterlijk 'veel te veel
   informatie'.

   De conclusie staat nu boven en de onderbouwing eronder, dichtgeklapt. Niets
   is weggegooid: wie het getal achter de zin wil zien, klikt één keer. Dat is
   ook precies de verhouding die klopt — de meeste weken wil je weten wát er
   gebeurde, en alleen in de week dat het tegenvalt wil je weten waarom.

   `<details>` en geen eigen script: dan werkt het ook als er geen JavaScript
   draait, en zoekt de browser er zelf in met ctrl-F. */
.uitklap { border: 1px solid var(--hair); border-radius: 12px;
           background: var(--surface); margin-top: 14px; }
.uitklap + .uitklap { margin-top: 10px; }
.uitklap > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 16px; list-style: none;
  font-size: 14.5px; font-weight: 600; color: var(--kop);
}
.uitklap > summary::-webkit-details-marker { display: none; }
/* Het pijltje draait mee. Een driehoek en geen plus: een plus belooft dat er
   iets bij komt, een pijl dat er iets opengaat. */
.uitklap > summary::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.uitklap[open] > summary::before { transform: rotate(45deg); }
.uitklap > summary:hover { color: var(--accent); }
.uitklap > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;
                                   border-radius: 12px; }
.uitklap > summary .bij { margin-left: auto; font-weight: 450; font-size: 12.5px;
                          color: var(--muted); }
.uitklap-in { padding: 0 16px 16px; border-top: 1px solid var(--hair); padding-top: 16px; }
/* Een kaart binnen een uitklap heeft geen eigen rand nodig: die zit er al om. */
.uitklap-in > .kaart { border: 0; padding: 0; background: none; }
.uitklap-in > .kaart + .kaart { margin-top: 22px; }
@media (prefers-reduced-motion: reduce) {
  .uitklap > summary::before { transition: none; }
}

/* Een korte opsomming met een prioriteitslabel ervoor. Voor punten die geen
   besluit vragen maar een gesprek — de afstemming met sales is er zo een. De
   knoppen eronder suggereerden dat je ze hier kon goedkeuren, en dat kan niet:
   het ligt bij twee afdelingen tegelijk. */
ul.punten { list-style: none; margin: 4px 0 0; padding: 0; }
ul.punten li { display: flex; gap: 10px; align-items: baseline;
               padding: 10px 0; border-top: 1px solid var(--hair);
               font-size: 13.5px; line-height: 1.6; color: var(--muted); }
ul.punten li:first-child { border-top: none; padding-top: 4px; }
ul.punten li b { color: var(--ink); font-weight: 600; }
ul.punten .tag { flex: none; }

/* ── Eén advies in de lijst ───────────────────────────────────────────────
   De samenvattingsregel moet in één oogopslag vier dingen zeggen: het hoeveelste
   advies, waar het over gaat, welk kanaal, en hoe zwaar. De titel krijgt de
   ruimte die overblijft; het kanaal en de prioriteit houden hun maat, want die
   twee scan je verticaal langs de lijst. */
.uitklap.advies > summary { gap: 12px; align-items: baseline; }
.uitklap.advies > summary::before { align-self: center; }
.uitklap.advies .nr { flex: none; min-width: 1.4em; color: var(--muted);
                      font-variant-numeric: tabular-nums; font-weight: 450; }
.uitklap.advies .wat { flex: 1; min-width: 0; text-wrap: pretty; }
.uitklap.advies .tag { flex: none; }
/* De prioriteit zit ook in de linkerrand: wie langs de lijst scant leest geen
   woordjes, die ziet een kleur. */
.uitklap.advies { border-left: 3px solid var(--hair); }
.uitklap.advies.hoog   { border-left-color: var(--slecht); }
.uitklap.advies.midden { border-left-color: var(--oker); }
.uitklap.advies.laag   { border-left-color: var(--hair); }

/* Het kanaal als merkje, in de kleur die dat kanaal overal heeft. Zonder
   kleur — bij een overkoepelend advies — blijft het grijs. */
.kanaalmerk {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.kanaalmerk::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--kleur, var(--hair));
}

/* De knop onder de lijst. Geen kaart eromheen: het is een voortzetting van de
   lijst en geen nieuw onderwerp. */
.uitklap.meer { border: 0; background: none; margin-top: 4px; }
.uitklap.meer > summary { color: var(--accent); padding-left: 2px; }
.uitklap.meer > summary::before { border-color: var(--accent); }
.uitklap.meer > .uitklap-in { border-top: 0; padding: 0; }

@media (max-width: 720px) {
  .uitklap.advies > summary { flex-wrap: wrap; }
  .uitklap.advies .wat { flex: 1 0 100%; order: 3; }
}

/* ── Een bevinding van de monitor ─────────────────────────────────────────
   Deze had helemaal geen opmaak, en de globale reset zet elke marge op nul.
   Gevolg: kop, label, samenvatting en bron plakten aan elkaar, en de volgende
   bevinding begon direct onder de bron van de vorige. Drie bevindingen onder
   elkaar lazen daardoor als één lap tekst waarin je de koppen moest zoeken.

   Wat er nu staat is een ritme: de kop krijgt lucht boven zich, de bron valt
   terug, en tussen twee bevindingen ligt een haarlijn. Die lijn doet het werk
   dat witruimte alleen niet kan — bij vier bevindingen weet je anders nog
   steeds niet waar de een ophoudt. */
.bevinding + .bevinding {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hair);
}
.bevinding .rij { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bevinding h4 { font-size: 15px; line-height: 1.35; }
.bevinding p { margin-top: 8px; font-size: 14px; line-height: 1.65;
               color: var(--ink); text-wrap: pretty; }
.bevinding .bron { margin-top: 8px; font-size: 12px; color: var(--muted); }
/* Een bevinding die nieuw is, krijgt een streep in de kleur van 'let op'. Niet
   een hele gekleurde kaart: dan schreeuwen er bij een drukke week vier. */
.bevinding.opvallend { border-left: 3px solid var(--oker); padding-left: 14px; }
.bevinding.opvallend + .bevinding { border-top-color: var(--hair); }

/* Een telling in een kop: 'Te beoordelen (2)'. Lichter dan de kop zelf, want
   de kop zegt wát er ligt en het getal alleen hoeveel. Zelfde cijferbreedte
   als de rest, zodat twee stapels onder elkaar niet gaan dansen. */
h2 .aantal, h3 .aantal {
  font-weight: 450; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* De titel onder een labeltje in een kernblok. Gewone grootte en gewone
   kapitalisatie: het labeltje zegt wélke soort het is, de titel waarover het
   gaat. Die twee in dezelfde opmaak persen maakt van allebei ruis. */
.kern .kernkop {
  margin-top: 4px; font-family: var(--kopfont); font-size: 15px; font-weight: 600;
  color: var(--kop); line-height: 1.35; text-wrap: pretty;
}
.kern .kernkop + p { margin-top: 7px; }

/* ── Sparren met de adviseur ──────────────────────────────────────────────
   Een gesprek over het advies van deze week. De vorm leunt op wat er al is:
   dezelfde kaart, dezelfde ballonnen als in de gesprekken op de website, en
   het gezicht van de collega erbij — want dat is het verschil met een chatbot.
   Je praat met Noor, niet met 'de assistent'. */
.sparhoes {
  border: 1px solid var(--hair); border-radius: 14px; background: var(--surface);
  padding: 18px 20px 20px; max-width: 860px;
}
.sparkop { display: flex; align-items: center; gap: 12px;
           padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.sparkop img { border-radius: 50%; flex: none; }
.sparkop > div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sparkop b { font-family: var(--kopfont); font-size: 15px; color: var(--kop); }
.sparkop span { font-size: 12.5px; color: var(--muted); }
.sparwis { margin-left: auto; }
.sparuitleg { margin-top: 14px; font-size: 14px; color: var(--muted);
              line-height: 1.65; max-width: 62ch; }

.sparbeurt { display: flex; gap: 10px; margin-top: 16px; align-items: flex-start; }
.sparbeurt.van-u { justify-content: flex-end; }
.sparkop-klein { border-radius: 50%; flex: none; margin-top: 2px; }
.sparbel { max-width: 82%; padding: 11px 15px; border-radius: 14px;
           font-size: 14.5px; line-height: 1.65; }
.sparbel p + p { margin-top: .7rem; }
/* Uw vraag in de kleur die hier 'u doet iets' betekent, het antwoord neutraal.
   Andersom zou het antwoord om aandacht vragen terwijl de vraag de aanleiding
   is — en bij het teruglezen zoek je altijd je eigen vraag. */
.van-u .sparbel {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-bottom-right-radius: 5px; color: var(--ink);
}
.van-hem .sparbel {
  background: var(--surface-2); border: 1px solid var(--hair);
  border-bottom-left-radius: 5px; color: var(--ink);
}

.sparvorm { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.sparveld {
  flex: 1 1 320px; min-width: 0; font: inherit; font-size: 14px;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--hair); background: var(--surface-2); color: var(--ink);
}
.sparveld:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sparuit { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

/* Wat een collega van je vraagt, onder zijn conclusie op de overzichtskaart.
   Klein en opsommend: de conclusie is wat hij vond, dit is wat er op je ligt
   te wachten — twee verschillende dingen en dus niet in dezelfde opmaak. */
.wachtregels { list-style: none; margin: 10px 0 0; padding: 0;
               border-top: 1px solid var(--hair); padding-top: 9px; }
.wachtregels li { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.wachtregels li + li { margin-top: 2px; }
.wachtregels li::before { content: "·"; margin-right: 6px; color: var(--muted); }

/* De doelmeter die zijn doel níet haalt. 'gehaald' is groen, dit is de
   tegenhanger: bij kosten en budget wil je onder de lijn blijven, en een
   balk die daar overheen gaat hoort niet dezelfde kleur te hebben als een
   die zijn doel haalt. */
.meter .spoor > i.mis { background: var(--slecht); }


/* ── De datumkiezer ──────────────────────────────────────────────────────
   Eén knop op één regel. Wat je zelden verandert — de vergelijkingsperiode,
   de vaste bereiken — zit achter de uitklap; wat je altijd wilt zien, de
   gekozen periode, staat erop.

   Een <details> en geen eigen dropdown: dat werkt zonder JavaScript, met het
   toetsenbord en op een telefoon. Het paneel mag daarom wél absoluut staan —
   anders dan bij `.kiezer`, die zonder script openklapt en dus niet over de
   inhoud heen mag liggen. */
.periodebalk { display: flex; align-items: center; justify-content: flex-end;
               gap: 10px; margin: 0 0 18px; }

.datumkiezer { position: relative; }
.datumkiezer > summary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 12px; border: 1px solid var(--hair); border-radius: 9px;
  background: var(--surface-2); color: var(--ink); list-style: none; }
.datumkiezer > summary::-webkit-details-marker { display: none; }
.datumkiezer > summary:hover { border-color: var(--muted); }
.datumkiezer > summary:focus-visible { outline: 2px solid var(--accent);
                                       outline-offset: 1px; }
.dk-label { font-size: 11px; font-weight: 700; letter-spacing: .07em;
            text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.dk-nu { font-size: 13.5px; font-weight: 600; white-space: nowrap;
         font-variant-numeric: tabular-nums; }
/* De vergelijkingsperiode staat achter de gekozen periode op dezelfde regel.
   Hij is lichter: je kiest hem zelden, maar je wilt wel kunnen zien waartegen
   de percentages hieronder zijn afgezet. */
.dk-tov { margin-left: 8px; font-weight: 450; color: var(--muted);
          font-size: 12.5px; }
.dk-pijl { width: 15px; height: 15px; flex: none; color: var(--muted);
           transition: transform .15s ease; }
.datumkiezer[open] .dk-pijl { transform: rotate(180deg); }

.dk-paneel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  width: 330px; padding: 4px 0 0;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 11px; box-shadow: var(--schaduw); }
.dk-blok { padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.dk-kop { font-size: 11px; font-weight: 700; letter-spacing: .06em;
          text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.dk-hint { font-weight: 450; letter-spacing: 0; text-transform: none;
           font-size: 11.5px; color: var(--muted); }
.dk-kop .dk-hint { display: block; margin-top: 3px; }

.dk-snel { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-snel a { font-size: 12.5px; padding: 5px 10px; border-radius: 20px;
             background: var(--chip); color: var(--ink); text-decoration: none; }
.dk-snel a:hover { background: var(--surface-2); color: var(--accent); }
.dk-snel a.actief { background: var(--accent); color: var(--op-accent);
                    font-weight: 600; }

.dk-datums { display: flex; align-items: center; gap: 7px; }
.dk-datums span { font-size: 12.5px; color: var(--muted); }
.dk-paneel input[type="date"] {
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
  flex: 1; min-width: 0; padding: 7px 9px;
  border: 1px solid var(--hair); border-radius: 8px;
  background: var(--surface-2); color: var(--ink); }
.dk-paneel input[type="date"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

.dk-voet { display: flex; align-items: center; justify-content: space-between;
           gap: 10px; padding: 12px 14px; }

/* Op een smal scherm past een paneel van 330 pixels naast de knop niet meer
   binnen het scherm. Dan maar over de volle breedte eronder. */
@media (max-width: 620px) {
  .periodebalk { justify-content: stretch; flex-wrap: wrap; }
  .datumkiezer { flex: 1; }
  .datumkiezer > summary { width: 100%; }
  .dk-paneel { width: 100%; }
  .dk-nu { white-space: normal; }
}

/* Zes kerncijfers naast elkaar, met het vorige getal eronder. Het verschil
   zonder het oude getal is een percentage waarvan je de basis niet kent — dan
   is '+42%' op drie aanvragen niet van '+42%' op driehonderd te onderscheiden. */
.kerncijfers { display: grid; gap: 1px; background: var(--hair);
               border: 1px solid var(--hair); border-radius: 14px;
               overflow: hidden;
               grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kerncijfer { background: var(--surface); padding: 16px 18px; }
.kerncijfer .label { font-size: 11.5px; font-weight: 600; color: var(--muted);
                     letter-spacing: .04em; text-transform: uppercase; }
.kerncijfer .groot { font-family: var(--kopfont); font-size: 26px;
                     font-weight: 600; color: var(--kop); letter-spacing: -.02em;
                     font-variant-numeric: tabular-nums; margin-top: 8px;
                     line-height: 1.1; }
.kerncijfer .erbij { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
                     margin-top: 6px; font-size: 12.5px; }
.kerncijfer .toen { color: var(--muted); font-variant-numeric: tabular-nums; }
/* Geen vergelijking is geen nul en geen daling: van niets naar iets valt geen
   percentage te berekenen, en een streepje zegt dat eerlijker dan '+100%'. */
/* Even zwaar als .op en .neer, zodat de kolom niet rafelt, maar zonder kleur:
   het is een verschil zonder oordeel. --op-bar-3 zou hier fout zijn — dat is de
   kleur voor tekst op een balk, en dit staat op een kaart. */
.vlak { color: var(--muted); font-weight: 600; }

/* De weekduiding in het periodescherm. De samenvatting is twee regels: de week
   met het aantal conclusies erachter, en daaronder de kernboodschap over de
   volle breedte. Daarvoor moet de summary wrappen — standaard is hij één rij. */
.uitklap.weekduiding > summary { flex-wrap: wrap; align-items: baseline; }
.uitklap.weekduiding .boodschap {
  flex-basis: 100%; margin-left: 26px; margin-top: 4px;
  font-weight: 450; font-size: 13px; color: var(--muted); line-height: 1.55; }
.uitklap.weekduiding[open] .boodschap { color: var(--ink); }

/* ── De teamkaart: dicht tenzij je het vraagt ────────────────────────────
   Vier kaarten met elk een alinea maakte het overzicht een muur tekst, terwijl
   de uitkomst eronder staat: wat er is doorgevoerd en wat er nog ligt. De
   naam blijft de doorklik naar het scherm van de collega; de uitklap laat
   zien waar hij zijn conclusie op baseerde. */
.teamheen { display: block; color: inherit; text-decoration: none; }
.teamheen:hover h3 { color: var(--accent); }
.teamuitklap { margin-top: 10px; border-top: 1px solid var(--hair); padding-top: 9px; }
.teamuitklap > summary {
  cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600;
  color: var(--muted); display: flex; align-items: center; gap: 7px; }
.teamuitklap > summary::-webkit-details-marker { display: none; }
.teamuitklap > summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease; }
.teamuitklap[open] > summary::before { transform: rotate(45deg); }
.teamuitklap > summary:hover { color: var(--accent); }
.teamuitklap > summary:focus-visible { outline: 2px solid var(--accent);
                                       outline-offset: 2px; border-radius: 4px; }
.teamkaart .teamuitklap .hoogtepunt { margin-top: 9px; padding-top: 0; border-top: 0; }

/* ── Wat er nog ligt ─────────────────────────────────────────────────────
   Twee kaarten naast elkaar: beslissen links, uitvoeren rechts. De telling
   staat in de titel zodat je zonder lezen ziet of het druk is. */
.todokaart .kaart-titel { display: flex; align-items: center; gap: 9px; }
.todokaart .kaart-titel .telling {
  padding: 1px 8px; border-radius: 20px; background: var(--chip);
  color: var(--muted); font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.todolijst { list-style: none; margin: 12px 0 0; padding: 0; }
.todolijst li + li { margin-top: 11px; padding-top: 11px;
                     border-top: 1px solid var(--hair); }
.todolijst a { display: block; font-size: 13.5px; font-weight: 600;
               color: var(--ink); text-decoration: none; line-height: 1.45; }
.todolijst a:hover { color: var(--accent); }
.todolijst .detail { display: block; margin-top: 3px; font-size: 12px;
                     color: var(--muted); }
.todomeer { display: inline-block; margin-top: 13px; font-size: 12.5px;
            font-weight: 600; color: var(--accent); text-decoration: none; }
.todomeer:hover { text-decoration: underline; }

/* ── Het detailscherm van een uitgewerkt stuk ────────────────────────────
   Dit scherm bestond niet: je keurde een concept goed dat je nergens had
   kunnen lezen. Links het stuk, rechts het overleg erover — allebei tegelijk
   in beeld, want feedback geven op iets wat je niet ziet werkt niet. */
.opdrachtkolommen { display: grid; gap: 20px; align-items: start;
                    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .opdrachtkolommen { grid-template-columns: 1fr; } }
.opdrachtzij { position: sticky; top: 16px; }
@media (max-width: 1100px) { .opdrachtzij { position: static; } }

.kruimels { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            margin-bottom: 14px; font-size: 12.5px; color: var(--muted); }
.kruimels a { color: var(--muted); text-decoration: none; }
.kruimels a:hover { color: var(--accent); }
.kruimels .nu { color: var(--ink); font-weight: 600; }

/* Waar het uit voortkomt. Een opdracht die uit de lucht komt vallen is een
   taak; met zijn advies erboven is het een gevolg — en dat verschil is het
   hele punt van deze keten. */
/* Een citaat en geen verwijzing: haar woorden vertellen waaróm het stuk er
   ligt, waar een adviestitel alleen vertelt dát het er ligt. `align-items` op
   start, want een citaat van twee regels hoort met zijn eerste regel naast het
   gezicht te beginnen en niet op zijn midden. */
.noorzegt { display: block; quotes: "\201C" "\201D"; font-size: 13.5px;
            line-height: 1.55; color: var(--ink); max-width: 72ch; }
.herkomstbalk .waarover .label { margin-top: 4px; }

.herkomstbalk { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
                padding: 11px 14px; margin-bottom: 16px; border-radius: 10px;
                background: var(--surface-2); border: 1px solid var(--hair);
                border-left: 3px solid var(--accent); font-size: 13px; }
/* Het gezicht van de collega die het aanbeval, op de maat van een avatar in
   een gesprek: groot genoeg om te herkennen, klein genoeg om niet de balk over
   te nemen. Dezelfde ring als op de teamkaarten, zodat het dezelfde persoon
   blijft en niet een plaatje dat erop lijkt. */
.herkomstgezicht { flex: none; width: 38px; height: 38px; border-radius: 50%;
                   background: var(--surface);
                   box-shadow: 0 0 0 1px var(--hair); }
.herkomstbalk .waarover { display: flex; flex-direction: column; gap: 1px;
                          min-width: 0; }
.herkomstbalk .label { font-size: 11px; font-weight: 700; letter-spacing: .06em;
                       text-transform: uppercase; color: var(--muted); }
.herkomstbalk a { color: var(--ink); font-weight: 600; text-decoration: none;
                  line-height: 1.4; }
.herkomstbalk a:hover { color: var(--accent); }
.herkomstbalk .wie { margin-left: auto; color: var(--muted); font-size: 12px;
                     flex: none; padding-top: 2px; }
.herkomstgezicht { margin-top: 1px; }

/* Het concept zelf leest als een document en niet als een dashboard: ruimere
   regelafstand, een smallere regel, koppen die lucht krijgen. */
.concept { font-size: 14.5px; line-height: 1.7; }
.concept h3 { font-size: 13px; font-weight: 700; letter-spacing: .05em;
              text-transform: uppercase; color: var(--muted);
              margin: 26px 0 8px; }
.concept > h3:first-child { margin-top: 0; }
/* Een tussenkop in de tekst zelf. Anders dan de labelkop erboven: die zegt wat
   voor soort blok eronder staat, deze staat straks zo op de site. Zonder dat
   verschil leest een concept als een formulier in plaats van als een stuk. */
/* De titel van het stuk. Groter dan een tussenkop en met een streep eronder:
   dit is waar het stuk begint, en alles erboven is toelichting bij het werk. */
.concepttitel { font-family: var(--kopfont); font-size: 25px; font-weight: 600;
                line-height: 1.22; letter-spacing: -.02em; color: var(--kop);
                margin: 28px 0 4px; padding-bottom: 14px; max-width: 30ch;
                border-bottom: 1px solid var(--hair); }
.concept > .concepttitel:first-child { margin-top: 0; }
.concepttitel + p { margin-top: 14px; }

.conceptkop { font-size: 19px; font-weight: 600; line-height: 1.3;
              color: var(--kop); margin: 26px 0 10px; letter-spacing: -.01em;
              max-width: 44ch; }
.concept > .conceptkop:first-child { margin-top: 0; }
.concept p { margin: 0 0 12px; max-width: 68ch; }
.concept p:last-child { margin-bottom: 0; }
.conceptlijst, .conceptstappen { margin: 0 0 12px; padding-left: 20px;
                                 max-width: 68ch; }
.conceptlijst li, .conceptstappen li { margin-bottom: 6px; }
.conceptlijst { list-style: disc; }
.conceptstappen { list-style: decimal; }
/* Een tabel in een concept kan breder zijn dan de kolom. Hij schuift dan in
   zichzelf; de pagina mag niet mee. */
.tabelbak { overflow-x: auto; margin: 0 0 14px; }
.tabelbak table { width: 100%; min-width: 440px; }

.oordeelbalk { display: flex; align-items: center; justify-content: space-between;
               gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.oordeelbalk form { display: flex; gap: 8px; flex: none; }
.oordeelbalk .detail { display: block; margin-top: 4px; font-size: 12.5px;
                       color: var(--muted); max-width: 58ch; }

.versierij { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
             padding: 9px 0; border-top: 1px solid var(--hair); }
.versierij:first-child { border-top: 0; padding-top: 0; }
.versierij .detail { flex: 1; color: var(--muted); font-size: 13px; }
.versierij .wanneer { color: var(--muted); font-size: 12px; }

/* Het overleg staat in een smalle kolom in plaats van over de volle breedte,
   dus de beurten mogen dichter op elkaar. */
.overleghoes .sparbel { font-size: 13.5px; }
.overleghoes .sparuitleg { font-size: 13px; }

/* ── De werkvoorraad in twee kolommen ────────────────────────────────────
   Dit scherm was één lange kolom met per stapel een grote kop, een alinea
   uitleg en dan pas de regels: drie schermhoogtes voordat je bij de laatste
   stapel was, terwijl de stapels zelf kort zijn. Ze passen naast elkaar.

   `align-items: start` zodat een korte stapel niet uitrekt tot de hoogte van
   zijn buur — anders staat er onder 'Uit te werken' een halve kaart lucht. */
.werkkolommen { display: grid; gap: 16px; align-items: start;
                grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.werkstapel { background: var(--surface); border: 1px solid var(--hair);
              border-radius: 14px; overflow: hidden; }
.werkstapel.leeg { background: none; }
.werkstapel-kop { padding: 14px 16px 12px; }
.werkstapel-kop h3 { display: flex; align-items: center; gap: 9px;
                     font-size: 15px; margin: 0; }
/* De telling als pil naast de naam. In een kop las '(3)' als een los getal dat
   net zo goed bij de zin eronder had kunnen horen; in een pil is het een
   telling. */
.werkstapel-kop .aantal { padding: 1px 8px; border-radius: 20px;
                          background: var(--chip); color: var(--muted);
                          font-size: 11.5px; font-weight: 700;
                          font-variant-numeric: tabular-nums; }
.werkstapel-kop p { margin: 5px 0 0; font-size: 12.5px; color: var(--muted);
                    line-height: 1.5; max-width: 52ch; }
.werkstapel .leeg { margin: 0; padding: 0 16px 16px; font-size: 13px; }
.werkstapel-lijst { border-top: 1px solid var(--hair); }

/* Een werkrij is een link naar het stuk zelf. De hele rij en niet alleen de
   titel: een klikdoel van twee woorden midden in een brede rij is een klikdoel
   dat je mist. Rijen zonder inhoud erachter blijven een div — dan is er ook
   niets om heen te gaan. */
.werkrij { display: flex; align-items: center; justify-content: space-between;
           gap: 12px; padding: 11px 16px; text-decoration: none; color: inherit; }
.werkrij + .werkrij { border-top: 1px solid var(--hair); }
.werkrij b { font-size: 13.5px; font-weight: 600; line-height: 1.4;
             display: block; }
.werkrij .detail { display: block; margin-top: 2px; font-size: 12px;
                   color: var(--muted); }
.werkrij-tekst { min-width: 0; }
a.werkrij:hover { background: var(--surface-2); }
a.werkrij:hover b { color: var(--accent); }
a.werkrij:hover .pijl { color: var(--accent); transform: translateX(2px); }
.werkrij .rijmerk { display: flex; align-items: center; gap: 7px; flex: none; }
.werkrij .pijl { color: var(--muted); font-size: 16px; line-height: 1;
                 transition: transform .12s ease; }

/* De kanaaltabbladen tonen dezelfde kaarten als het overzicht, maar onder
   elkaar in plaats van naast elkaar: er zijn er drie en ze horen in volgorde
   gelezen te worden — uitgewerkt, te plaatsen, geplaatst. */
.kanaalgroep + .kanaalgroep { margin-top: 16px; }
.kanaalrij .werkrij-tekst a { color: inherit; text-decoration: none; }
.kanaalrij .werkrij-tekst a:hover b { color: var(--accent); }
.kanaalrij .detail { max-width: 86ch; }
/* De meldknop is klein: hij staat in een rij en niet onder een formulier. */
.meldvorm { display: inline-flex; margin: 0; }
.meldvorm .knop { padding: 5px 11px; font-size: 12.5px; }
a.pijl { text-decoration: none; }

/* Het kanaal in een werkregel draagt dezelfde stip als in de tabbalk. Niet als
   versiering: diezelfde kleur staat in de staven op het overzicht en in de
   grafieken van de rapporteur, en zonder stip moet je het verband elke keer
   opnieuw leggen. `baseline` en geen `center`, zodat de stip op de regel staat
   en niet op de helft van de regelhoogte. */
.kanaalmerkje { display: inline-flex; align-items: baseline; gap: 5px;
                white-space: nowrap; }
.kanaalmerkje .stip { width: 7px; height: 7px; border-radius: 50%;
                      flex: none; transform: translateY(-1px); }

/* ── Filteren op stand, zonder JavaScript ────────────────────────────────
   Radioknoppen met de tabel als buur. De knoppen zelf staan buiten beeld maar
   niet op `display:none` — dat zou ze ook voor het toetsenbord en voor een
   schermlezer weghalen, en dan is het filter alleen met de muis te bedienen. */
.standfilter { margin-bottom: 18px; }
.standfilter > input { position: absolute; opacity: 0; pointer-events: none;
                       width: 1px; height: 1px; }
.standfilter > label {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  margin: 0 7px 7px 0; padding: 6px 12px; border-radius: 20px;
  border: 1px solid var(--hair); background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--ink); }
.standfilter > label span { font-size: 11px; font-weight: 700; color: var(--muted);
                            font-variant-numeric: tabular-nums; }
.standfilter > label:hover { border-color: var(--muted); }
.standfilter > input:checked + label { background: var(--accent); color: var(--op-accent);
                                       border-color: var(--accent); }
.standfilter > input:checked + label span { color: inherit; opacity: .75; }
.standfilter > input:focus-visible + label { outline: 2px solid var(--accent);
                                             outline-offset: 2px; }
/* Een stand zonder uitwerkingen is geen keuze maar een doodlopende klik. */
.standfilter > label.uit { opacity: .4; cursor: default; }

/* Wat niet bij de keuze past, gaat weg. `~` en niet `+`, want de tabel staat
   een paar elementen verderop in dezelfde ouder. */
#sf-concept:checked ~ .kaart tr[data-stand]:not([data-stand="concept"]),
#sf-goedgekeurd:checked ~ .kaart tr[data-stand]:not([data-stand="goedgekeurd"]),
#sf-geplaatst:checked ~ .kaart tr[data-stand]:not([data-stand="geplaatst"]),
#sf-afgewezen:checked ~ .kaart tr[data-stand]:not([data-stand="afgewezen"]) {
  display: none;
}
.geenstand { display: none; margin: 10px 0 0; font-size: 13px; color: var(--muted); }

/* ── Zelf werk aanvragen ─────────────────────────────────────────────────
   Dichtgeklapt, want je gebruikt hem af en toe. Open neemt hij de breedte van
   het overzicht, zodat de briefing ruimte heeft — in drie regels krijg je geen
   bruikbaar stuk beschreven. */
.aanvraaghoes { margin-bottom: 16px; border: 1px dashed var(--hair);
                border-radius: 14px; background: var(--surface); }
.aanvraaghoes > summary { display: flex; align-items: center; gap: 9px;
                          cursor: pointer; list-style: none; padding: 13px 16px;
                          font-size: 14px; font-weight: 600; }
.aanvraaghoes > summary::-webkit-details-marker { display: none; }
.aanvraaghoes > summary:hover { color: var(--accent); }
.aanvraaghoes > summary:focus-visible { outline: 2px solid var(--accent);
                                        outline-offset: -2px; border-radius: 14px; }
.aanvraaghoes .plus { display: inline-flex; align-items: center;
                      justify-content: center; width: 20px; height: 20px;
                      border-radius: 50%; background: var(--accent);
                      color: var(--op-accent); font-size: 14px; line-height: 1;
                      flex: none; }
.aanvraaghoes[open] .plus { transform: rotate(45deg); }
.aanvraaghoes > summary .bij { margin-left: auto; font-weight: 450;
                              font-size: 12.5px; color: var(--muted); }

.aanvraagvorm { padding: 4px 16px 16px; border-top: 1px solid var(--hair);
                margin-top: -1px; }
.av-rij { display: grid; gap: 12px; margin-top: 14px;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.aanvraagvorm label { display: block; }
.aanvraagvorm label > span { display: block; margin-bottom: 5px; font-size: 12px;
                             font-weight: 700; letter-spacing: .04em;
                             text-transform: uppercase; color: var(--muted); }
.av-breed { margin-top: 12px; }
.aanvraagvorm input, .aanvraagvorm select, .aanvraagvorm textarea {
  font: inherit; font-size: 13.5px; width: 100%; padding: 9px 11px;
  border: 1px solid var(--hair); border-radius: 9px;
  background: var(--surface-2); color: var(--ink); }
.aanvraagvorm textarea { resize: vertical; line-height: 1.55; }
.aanvraagvorm :focus-visible { outline: 2px solid var(--accent);
                               outline-offset: -1px; border-color: var(--accent); }
.av-voet { display: flex; align-items: center; justify-content: space-between;
           gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.av-hint { font-size: 12.5px; color: var(--muted); max-width: 58ch; }
.melding-fout { margin-bottom: 14px; border-left: 3px solid var(--slecht);
                padding: 12px 14px; font-size: 13.5px; }

/* ── Terwijl hij schrijft ────────────────────────────────────────────────
   Een stip die pulseert en verder niets. Een voortgangsbalk zou een voortgang
   suggereren die niemand kan meten: het model levert in één keer of niet. */
.wachtkaart .kaart-titel { display: flex; align-items: center; gap: 9px; }
/* Links uitlijnen. `.leeg` is gecentreerd — dat klopt voor 'niets op deze
   stapel' midden in een lege kaart, maar niet voor een uitleg onder een kop
   die links begint. */
.wachtkaart .leeg { text-align: left; margin-top: 8px; max-width: 72ch; }
.schrijfstip { width: 9px; height: 9px; border-radius: 50%; flex: none;
               background: var(--accent); animation: schrijfpuls 1.4s ease-in-out infinite; }
@keyframes schrijfpuls { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .schrijfstip { animation: none; opacity: .8; } }
.briefingterug { margin-top: 14px; padding-top: 14px; font-size: 13px;
                 color: var(--muted); border-top: 1px solid var(--hair);
                 line-height: 1.6; max-width: 72ch; }
.mislukreden { margin-top: 10px; font-family: ui-monospace, Menlo, monospace;
               font-size: 12px; color: var(--muted); word-break: break-word; }
.wachtkaart form { margin-top: 14px; }
.eigenbriefing { display: block; margin-top: 3px; font-size: 13px;
                 line-height: 1.55; color: var(--ink); max-width: 72ch; }

/* ── Terwijl de marketeer herschrijft ────────────────────────────────────
   Een beurt in het gesprek en geen balk erboven: het antwoord komt straks op
   precies deze plek, dus daar hoort het wachten ook te staan. */
.sparbeurt.bezig .sparbel { opacity: .85; }
.aanhetwerk { display: flex; align-items: center; gap: 8px; margin: 0;
              font-weight: 600; }
.aanhetwerk .schrijfstip { width: 8px; height: 8px; }
/* Drie puntjes die om beurten oplichten. Geen balk: die suggereert een
   voortgang die niemand kan meten — het model levert in één keer of niet. */
.puntjes { display: inline-flex; gap: 3px; }
.puntjes i { width: 4px; height: 4px; border-radius: 50%; background: currentColor;
             opacity: .3; animation: puntje 1.2s ease-in-out infinite; }
.puntjes i:nth-child(2) { animation-delay: .2s; }
.puntjes i:nth-child(3) { animation-delay: .4s; }
@keyframes puntje { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .puntjes i { animation: none; opacity: .6; }
}
.sparbeurt.bezig .klein { margin-top: 6px; font-size: 12px; color: var(--muted); }
/* Wie het zei. Het gesprek hoort bij het stuk en niet bij één persoon, dus
   zonder naam weet je morgen niet meer wie wat vroeg. */
.spargewie { display: block; font-size: 11px; font-weight: 700;
             letter-spacing: .04em; text-transform: uppercase;
             color: var(--muted); margin-bottom: 4px; }


/* ── Archief van de adviseur ───────────────────────────────────────────────
   Naar het rm-ai-team: transparant en met een gestippelde rand, want wat hier
   staat is afgehandeld en hoort niet dezelfde aandacht te trekken als de open
   adviezen erboven. Dicht is het één regel. */
.archief { margin-top: 18px; border: 1px dashed var(--hair); border-radius: 12px; background: transparent; }
.archief > summary { list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 16px; border-radius: 11px; }
.archief > summary::-webkit-details-marker { display: none; }
.archief > summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s ease;
}
.archief[open] > summary::after { transform: rotate(-135deg); }
.archief > summary:hover { background: var(--chip); }
.archief[open] > summary { border-bottom: 1px dashed var(--hair); border-radius: 11px 11px 0 0; }
.archief .naam { font-size: 14.5px; font-weight: 700; color: var(--kop); }
.archief .uitleg { font-size: 13px; color: var(--muted); }
.archieffilters { display: flex; gap: 6px; flex-wrap: wrap; padding: 13px 16px 4px; }
.archieffilters .chip {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 20px;
  border: 1px solid var(--hair); background: transparent; color: var(--muted); cursor: pointer;
}
.archieffilters .chip[aria-pressed="true"] { background: var(--chip); color: var(--ink); border-color: transparent; }
.weekkop { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 6px; }
.weekkop[hidden] { display: none; }
.weekkop h3 { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin: 0; }
.weekkop .rail { flex: 1; height: 1px; background: var(--hair); }
.afhandeling { border-top: 1px dashed var(--hair); }
.afhandeling[hidden] { display: none; }
.afhandeling > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 6px 12px; flex-wrap: wrap; padding: 11px 16px; }
.afhandeling > summary::-webkit-details-marker { display: none; }
.afhandeling > summary:hover { background: var(--chip); }
.afhandeling .wat { flex: 1 1 260px; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.afhandeling .datum { font-size: 12.5px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.afhandeling .stand { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.afhandeling .stand.goedgekeurd { background: var(--goed-tint); color: var(--goed); }
.afhandeling .stand.afgewezen { background: var(--chip); color: var(--muted); }
.afhandeling .inhoud { padding: 2px 16px 14px; }
.afhandeling .inhoud p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.afhandeling .inhoud b { color: var(--ink); font-weight: 600; }
.afhandeling .inhoud a { color: var(--accent); font-weight: 600; }
.afhandeling form { margin-top: 12px; }
.terug-knop {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--hair); background: transparent; color: var(--muted); cursor: pointer;
}
.terug-knop:hover { color: var(--ink); background: var(--chip); }
.archiefleeg { padding: 14px 16px; margin: 0; font-size: 13.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .archief > summary::after { transition: none; } }

/* Feedback rechtsonder, op elk scherm. Rond en klein, met het woord erbij
   zodra er ruimte is; op een telefoon alleen het icoon. */
.feedbackknop {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px 0 13px; border-radius: 22px;
  background: var(--accent-diep); color: var(--op-accent, #f6f2e9);
  box-shadow: var(--schaduw); font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.feedbackknop svg { width: 18px; height: 18px; flex: none; }
.feedbackknop:hover { transform: translateY(-1px); }
.feedbackknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:root[data-theme="dark"] .feedbackknop { background: #b0472a; color: #f6f2e9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .feedbackknop { background: #b0472a; color: #f6f2e9; }
}
@media (max-width: 640px) {
  .feedbackknop { width: 44px; padding: 0; justify-content: center; right: 14px; bottom: 14px; }
  .feedbackknop .tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) { .feedbackknop { transition: none; } }
@media print { .feedbackknop { display: none; } }
/* Ruimte onder de footer, zodat de knop de link naar sidura.ai niet afdekt. */
body:has(.feedbackknop) footer { padding-bottom: 64px; }