/* Knopkleur komt uit /theme.css (--btn-bg/--btn-ink/--btn-hover, AA-gecontroleerd); --accent blijft het merkaccent. */
/* Huisstijl van de MCP Support-site (tokens: tokens.canonical.json + mcp-support/public/index.html).
   Accent komt uit /theme.css (--accent, --accent-ink, --accent-hover); zonder tenantkleur is dat --primary.
   Lettertype lokaal uit /static/fonts (de CSP laat alleen 'self' toe). Geen externe fonts of CDN. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/dm-sans-400.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/dm-sans-500.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/dm-sans-700.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/dm-sans-800.woff2) format('woff2'); }

:root {
  --primary: #f86011;
  --primary-hover: #d94f06;
  --text: #333333;
  --text-light: #666666;
  /* #999 haalt geen AA voor tekst: alleen voor niet-tekst (randen, uitgeschakeld). Kleine tekst: --muted-small. */
  --text-muted: #999999;
  --muted-small: #666666;
  --bg: #f5f7fa;
  --card-bg: #ffffff;
  --border: #e0e0e0;
  --accent-deep: #1a1a2e;
  --accent-yellow: #f8cc23;
  --deep2: #2d2d5e;
  --accent-tekst: #c2410a;
  --orange-soft: rgba(248, 96, 17, 0.10);
  --info-bg: #e3f2fd;
  --info-fg: #1565c0;
  --warn-bg: #fff8e1;
  --warn-fg: #b84d00;
  --ok-bg: #e8f5e9;
  --ok-fg: #2e7d32;
  --up: #2e7d32;
  --down: #b42318;
  --down-bg: #fde8e8;
  --flat-bg: #f4f4f6;
  --hero-up: #7ee8ad;
  --hero-down: #ffb4ad;
  /* Bronkleuren: altijd samen met icoon en naam; de kleur is nooit de enige drager. Vast, volgt de tenantkleur niet. */
  --bron-ga4: #c2410a;
  --bron-ga4-bg: #fff0e6;
  --bron-gsc: #1565c0;
  --bron-gsc-bg: #e3f2fd;
  --bron-ads: #8a5a00;
  --bron-ads-bg: #fff3cc;
  --bron-bq: #5b3a99;
  --bron-bq-bg: #efe9fa;
  --bron-gtm: #0b6b63;
  --bron-gtm-bg: #e0f5f2;
  --grad: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
  --gloed: radial-gradient(circle, rgba(248, 204, 35, .15), transparent 70%);
  --nav-ink: #e8e9f0;
  --nav-muted: #b4b7c8;
  --shadow-kaart: 0 4px 16px rgba(26, 26, 46, 0.06);
  --shadow-hoog: 0 10px 28px rgba(26, 26, 46, 0.12);
  --radius-kaart: 16px;
  --accent-soft: var(--orange-soft);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@supports (background: color-mix(in srgb, red 50%, black)) {
  :root {
    --btn-hover: color-mix(in srgb, var(--btn-bg) 85%, black);
    --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  }
}
* { box-sizing: border-box; }
input, select, textarea, button { max-width: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
main { width: 100%; max-width: 1100px; min-width: 0; margin: 0 auto; padding: 24px; }
h1, h2, h3 { color: var(--accent-deep); line-height: 1.25; }
h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
h2 { font-weight: 700; letter-spacing: -.01em; }
h3 { font-weight: 700; }
.centered { max-width: 440px; margin: 12vh auto 0; padding: 32px 28px; text-align: center;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-kaart); box-shadow: var(--shadow-kaart); }
.login .identity { justify-content: center; margin-bottom: 24px; }
.note { color: var(--muted-small); font-size: .875rem; }
.identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo { max-height: 40px; max-width: 160px; }
.brand { color: var(--muted-small); }
.names { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
/* "Support" in het woordmerk in merkoranje. Een woordmerk valt buiten de contrasteis (WCAG 1.4.3, logotypes). */
.merk-accent { color: var(--primary); }
.tenant-naam { font-size: .8125rem; font-weight: 500; color: var(--muted-small); }
.zijbalk .tenant-naam { color: var(--nav-muted); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em; color: var(--accent-deep); }
/* Het beeldmerk (gekleurde balkjes, transparant): het merk van MCP Support en Server-Side Support. */
.wordmark-merk { display: block; flex: none; width: 36px; height: auto; }
.zijbalk .wordmark { color: #ffffff; }
.zijbalk .brand { color: var(--nav-muted); }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 10px 22px; border: 1px solid var(--btn-bg); border-radius: 8px;
  background: var(--btn-bg); color: var(--btn-ink); font: inherit; font-size: .9375rem; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.button:hover:not(:disabled) { background: var(--btn-hover); border-color: var(--btn-hover); }
.button.secondary { background: var(--card-bg); color: var(--accent-deep); border-color: var(--border); }
.button.secondary:hover:not(:disabled) { background: var(--card-bg); border-color: var(--accent); }
.user { color: var(--muted-small); font-size: .875rem; overflow-wrap: anywhere; }
#inhoud { max-width: none; padding: 0; }
#inhoud > .sectie { width: calc(100% - 48px); max-width: 1100px; margin: 24px auto 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-kaart); box-shadow: var(--shadow-kaart); padding: 24px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--card-bg); padding: 8px; z-index: 1; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, .skip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Overzicht: de sectie zelf is geen kaart. Bovenaan een hero-band; het eerste blok (takenlijst, intake of periodebalk) zweeft erover (negatieve marge). */
#inhoud > #overzicht.sectie { width: auto; max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.hero { position: relative; overflow: hidden; padding: 28px 32px 76px; background: var(--grad); color: #ffffff; }
.hero::before { content: ""; position: absolute; top: -220px; right: -120px; width: 60%; max-width: 520px; aspect-ratio: 1; background: var(--gloed); pointer-events: none; }
.hero > * { position: relative; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; overflow-wrap: anywhere; color: var(--accent-yellow); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hero-eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-yellow); }
.hero-titel { margin: 6px 0 4px; color: #ffffff; font-size: 1.875rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.hero-accent { color: var(--accent-yellow); }
.hero-tekst { margin: 0; color: rgba(255, 255, 255, .85); overflow-wrap: anywhere; }
.sectie-inhoud { position: relative; max-width: 1148px; margin: -52px auto 0; padding: 0 24px 40px; }
.sectie-inhoud > * + * { margin-top: 16px; }
#period-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-kaart); box-shadow: var(--shadow-hoog); }
#period-controls .presets, #period-controls .eigen, #period-controls .vergelijk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#period-controls label { color: var(--muted-small); font-size: .875rem; }
#period-controls input, #period-controls select {
  min-height: 44px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text); font: inherit; font-size: .84375rem;
}
.button.preset { border-radius: 999px; padding: 8px 18px; font-size: .875rem; }
.button.preset[aria-pressed="true"], .button.preset[aria-pressed="true"]:hover:not(:disabled) { background: var(--accent-deep); color: #ffffff; border-color: var(--accent-deep); }
.button:disabled { opacity: .5; cursor: not-allowed; }
.periode-fout { flex-basis: 100%; margin: 0; color: var(--down); font-size: .875rem; }
.periode-fout:empty { display: none; }

#scorecards .kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
#scorecards .bijgewerkt { margin: 0; color: var(--muted-small); font-size: .875rem; }
#scorecards .kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-flow: dense; gap: 16px; }
@media (max-width: 480px) { #scorecards .kaarten { grid-template-columns: 1fr; } }
#scorecards .leeg, #scorecards .laden { margin: 0; color: var(--muted-small); }
#scorecards .fout { margin: 0 0 12px; color: var(--down); }

/* Bronkleur per tegel en grafiek: vast (geen tenantkleur). Zonder bekende bron blijft het navy. */
[data-bron] { --bronkleur: var(--accent-deep); --bronkleur-bg: var(--bg); }
[data-bron="ga4"] { --bronkleur: var(--bron-ga4); --bronkleur-bg: var(--bron-ga4-bg); }
[data-bron="gsc"] { --bronkleur: var(--bron-gsc); --bronkleur-bg: var(--bron-gsc-bg); }
[data-bron="ads"] { --bronkleur: var(--bron-ads); --bronkleur-bg: var(--bron-ads-bg); }
[data-bron="bq"] { --bronkleur: var(--bron-bq); --bronkleur-bg: var(--bron-bq-bg); }
[data-bron="gtm"] { --bronkleur: var(--bron-gtm); --bronkleur-bg: var(--bron-gtm-bg); }

.kaart { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 18px 18px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-kaart); background: var(--card-bg); box-shadow: var(--shadow-kaart);
  transition: box-shadow .15s, transform .15s; }
.kaart[data-bron]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--bronkleur); }
.kaart-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-width: 0; }
.kaart-icoon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--bronkleur-bg, var(--bg)); color: var(--bronkleur, var(--accent-deep)); }
.kaart-kop { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.kaart-bron { color: var(--bronkleur, var(--muted-small)); font-size: .75rem; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; }
.kaart .titel { margin: 0; font-size: .875rem; font-weight: 600; color: var(--muted-small); overflow-wrap: anywhere; }
.kaart .waarde { margin: 0 0 6px; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--accent-deep); overflow-wrap: anywhere; }
.kaart .aandeel, .kaart .label { margin: 0 0 8px; color: var(--muted-small); font-size: .8125rem; }
/* Delta als pil: pijl en teken blijven tekst, de kleur is een extra. */
.verandering { align-self: flex-start; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; max-width: 100%; margin: 0 0 10px; padding: 2px 9px;
  border-radius: 14px; background: var(--flat-bg); font-size: .8125rem; font-weight: 700; overflow-wrap: anywhere; }
.verandering-tov { font-size: .75rem; font-weight: 500; }
.verandering.op { background: var(--ok-bg); color: var(--up); }
.verandering.neer { background: var(--down-bg); color: var(--down); }
.verandering.vlak { color: var(--muted-small); }
.sparkline { display: block; margin: 0 0 12px; width: 100%; height: 32px; color: var(--accent); overflow: visible; }
.kaart .sparkline { color: var(--bronkleur, var(--accent)); }
.valuta-regel { margin-bottom: 8px; }
.valuta-regels { margin-bottom: 4px; }
.valuta-regel .waarde { display: block; }
.kaart-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 8px; margin-top: auto; padding-top: 4px; border-top: 1px solid var(--border); }
.uitklap {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0; padding: 6px 0; border: 0; background: none; color: var(--accent-deep); font: inherit; font-size: .8125rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.uitklap::after { content: "\203A" / ""; font-size: 1.125rem; line-height: 1; transition: transform .15s; }
.uitklap[aria-expanded="true"]::after { transform: rotate(90deg); }
.delen { margin: 8px 0 0; padding: 0; list-style: none; font-size: .875rem; }
.delen li { display: flex; flex-wrap: wrap; gap: 0 8px; padding: 4px 0; border-top: 1px solid var(--border); }
.delen .deel-naam { flex: 1 1 100%; overflow-wrap: anywhere; }
.delen .deel-vorig { color: var(--muted-small); }

/* Chat vult de viewport; alleen de berichtenlijst scrolt, kop bovenaan en vraagbalk onderaan blijven in beeld.
   Eerst vh als terugval, dan dvh (volgt het schermtoetsenbord op mobiel). De sectie is hier geen kaart: de kop loopt tot de rand. */
#chat.sectie { display: flex; flex-direction: column; width: auto; max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  height: calc(100vh); height: calc(100dvh); min-height: 360px; }
#chat-inhoud { --chat-pad: max(32px, calc((100% - 940px) / 2)); display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.chat-kop { position: relative; overflow: hidden; flex: none; background: var(--grad); color: #ffffff; }
.chat-kop::before { content: ""; position: absolute; top: -200px; right: -80px; width: 60%; max-width: 420px; aspect-ratio: 1; background: var(--gloed); pointer-events: none; }
.chat-kop:empty { display: none; }
.chat-kop-inhoud { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 18px 32px; }
.chat-kop-avatar::before, .chat-antwoord::before, .chat-bezig::before { content: "M"; content: "M" / ""; display: flex; flex: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent-yellow)); color: var(--accent-deep); font-size: .875rem; font-weight: 800; }
.chat-kop-avatar::before { width: 44px; height: 44px; font-size: 1.0625rem; box-shadow: 0 0 0 3px rgba(248, 204, 35, .25); }
.chat-kop-avatar { display: inline-flex; flex: none; }
.chat-kop-tekst { min-width: 0; line-height: 1.25; }
.chat-titel { margin: 0; color: #ffffff; font-size: 1.25rem; font-weight: 800; overflow-wrap: anywhere; }
.chat-kop-bronnen { margin: 2px 0 0; color: rgba(255, 255, 255, .8); font-size: .875rem; overflow-wrap: anywhere; }
.chat-kop-bronnen[hidden] { display: none; }
.chat-voorbeelden { padding: 36px var(--chat-pad) 8px; }
.chat-welkom { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.chat-welkom-accent { color: var(--accent-tekst); }
.chat-welkom-tekst { margin: 6px 0 20px; color: var(--muted-small); overflow-wrap: anywhere; }
.chat-voorbeeld-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.chat-voorbeeld { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-kaart);
  background: var(--card-bg); box-shadow: var(--shadow-kaart); color: var(--accent-deep); font: inherit; text-align: left; cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s; }
.chat-voorbeeld:hover { border-color: var(--bronkleur, var(--accent)); box-shadow: var(--shadow-hoog); }
.voorbeeld-icoon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bronkleur-bg, var(--bg)); color: var(--bronkleur, var(--accent-deep)); }
.voorbeeld-tekst { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.chat-voorbeeld-vraag { display: block; font-size: 1rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.voorbeeld-bron { display: block; color: var(--muted-small); font-size: .8125rem; font-weight: 500; overflow-wrap: anywhere; }
.voorbeeld-pijl { display: inline-flex; flex: none; color: var(--muted-small); transition: transform .15s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .chat-voorbeeld:hover { transform: translateY(-2px); } .chat-voorbeeld:hover .voorbeeld-pijl { transform: translateX(3px); } }
@media (max-width: 800px) { .chat-voorbeeld-raster { grid-template-columns: 1fr; } .chat-voorbeelden { padding-top: 24px; } .chat-welkom { font-size: 1.5rem; } }
.chat-log { display: flex; flex: 1 1 auto; flex-direction: column; gap: 20px; min-height: 0; padding: 24px var(--chat-pad) 12px; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.chat-log:empty { display: none; }
.chat-bericht { max-width: 78%; padding: 14px 18px; border: 1px solid var(--border); border-radius: 18px; overflow-wrap: anywhere; }
.chat-vraag { align-self: flex-end; background: var(--grad); border-color: transparent; border-bottom-right-radius: 6px; color: #ffffff; font-weight: 500; box-shadow: 0 6px 18px rgba(26, 26, 46, .18); }
.chat-antwoord, .chat-bezig { position: relative; align-self: flex-start; margin-left: 46px; background: var(--card-bg); border-top-left-radius: 6px; box-shadow: var(--shadow-kaart); }
.chat-antwoord::before, .chat-bezig::before { position: absolute; left: -46px; top: 0; }
.chat-antwoord .chat-tekst { color: var(--accent-deep); font-size: 1.125rem; line-height: 1.5; }
.chat-alinea { margin: 0 0 8px; white-space: pre-line; }
.chat-lijst { margin: 0 0 8px; padding-left: 24px; }
.chat-bericht > :last-child { margin-bottom: 0; }
.chat-bron { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; color: var(--muted-small); font-size: .8125rem; font-weight: 600; }
.bron-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; background: var(--bronkleur-bg, var(--bg)); color: var(--bronkleur, var(--accent-deep)); font-size: .8125rem; font-weight: 700; overflow-wrap: anywhere; }
.chat-ingekort { display: inline-block; margin: 10px 0 0; padding: 3px 12px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-fg); font-size: .8125rem; font-weight: 600; overflow-wrap: anywhere; }
.bron-chip-icoon { display: inline-flex; flex: none; }
.chat-bezig { display: flex; align-items: center; gap: 10px; margin-top: 0; margin-bottom: 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: 18px; border-top-left-radius: 6px; color: var(--muted-small); overflow-wrap: anywhere; }
.chat-dots { display: inline-flex; flex: none; gap: 5px; align-items: center; }
.chat-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); opacity: .9; }
.chat-dots span:nth-child(2) { opacity: .6; }
.chat-dots span:nth-child(3) { opacity: .3; }
@media (prefers-reduced-motion: no-preference) {
  .chat-dots span { animation: chat-puls 1.2s ease-in-out infinite; }
  .chat-dots span:nth-child(2) { animation-delay: .2s; }
  .chat-dots span:nth-child(3) { animation-delay: .4s; }
}
@keyframes chat-puls { 0%, 80%, 100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } }
.chat-fout { margin: 0 0 8px; padding: 0 var(--chat-pad); color: var(--down); }
.chat-fout:empty { display: none; }
.chat-waarschuwing { margin: 0 0 8px; padding: 0 var(--chat-pad); color: var(--muted, inherit); }
.chat-waarschuwing:empty { display: none; }
.chat-antwoord-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.chat-feedback, .chat-kaart { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chat-feedback { gap: 8px; }
.chat-duim { gap: 6px; border-radius: 999px; min-width: 44px; min-height: 44px; padding: 0 14px; font-size: .875rem; font-weight: 600; }
.chat-duim[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.chat-kaart .button { gap: 6px; border-radius: 999px; padding: 0 16px; font-size: .875rem; background: var(--card-bg); color: var(--btn-bg); border-color: var(--btn-bg); }
.chat-kaart .button:hover:not(:disabled) { background: var(--card-bg); border-color: var(--btn-hover); color: var(--btn-hover); }
.chat-feedback-status, .chat-kaart-status { margin: 0; color: var(--muted-small); font-size: .8125rem; }
.chat-tip { margin: 0; margin-left: auto; font-size: .875rem; }
.chat-tip a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #ffffff; font-weight: 600; text-decoration: none; }
.chat-tip a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-yellow); }
.chat-tip a:hover { background: rgba(255, 255, 255, .18); }
.chat-tip a:focus-visible { outline-color: #ffffff; }
.chat-formulier { display: flex; flex: none; flex-direction: column; gap: 8px; margin-top: auto; padding: 6px var(--chat-pad) 22px; }
.site-chips { display: flex; flex-direction: column; gap: 4px; }
.site-chips[hidden] { display: none; }
.site-chips-label { color: var(--muted-small); font-size: .875rem; font-weight: 600; }
.site-chips-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.site-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px 0 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep); font-size: .875rem; font-weight: 600; }
.site-chip-naam { overflow-wrap: anywhere; }
.site-chip-x { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--accent-deep); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.site-chip-x:hover:not(:disabled) { background: var(--border); }
.site-chip-x:disabled { color: var(--text-muted); cursor: not-allowed; }
.site-chip-plus { min-height: 44px; padding: 8px 12px; border: 1px dashed var(--text-muted); border-radius: 999px; background: var(--card-bg); color: var(--accent-deep);
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.sa-adres, .gebruikers-formulier input, .gebruikers-formulier select, .context-formulier input, .context-formulier textarea {
  border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text); font: inherit; font-size: .84375rem;
  transition: border-color .15s, box-shadow .15s;
}
.sa-adres:focus, .gebruikers-formulier input:focus, .gebruikers-formulier select:focus,
.context-formulier input:focus, .context-formulier textarea:focus, #period-controls input:focus, #period-controls select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.chat-invoer::placeholder, .sa-adres::placeholder, .context-formulier ::placeholder { color: #757575; }
.chat-invoer { width: 100%; min-height: 56px; max-height: 9.5rem; padding: 6px 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.0625rem; line-height: 1.5; resize: none; overflow-y: auto; }
/* De focusring staat op de hele balk (:focus-within); het veld zelf heeft geen eigen ring. */
.chat-invoer:focus-visible { outline: none; border-color: transparent; }
.chat-balk { padding: 12px 12px 10px 18px; background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 22px; box-shadow: 0 10px 30px rgba(26, 26, 46, .10); transition: border-color .15s, box-shadow .15s; }
.chat-balk:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 10px 30px rgba(26, 26, 46, .10); }
.chat-balk .site-chips { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.chat-balk-onder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; }
.button.chat-nieuw { gap: 6px; padding: 0 12px; border-color: transparent; border-radius: 999px; background: transparent; color: var(--muted-small); font-size: .875rem; }
.button.chat-nieuw:hover:not(:disabled) { background: var(--bg); border-color: var(--border); }
.chat-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0; color: var(--muted-small); font-size: .8125rem; overflow-wrap: anywhere; }
.chat-hint kbd { padding: 1px 7px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; background: #fafafa; color: var(--accent-deep); font: 600 .75rem var(--font); }
.chat-verstuur { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; min-height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: 50%;
  background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 6px 16px rgba(194, 65, 10, .35); cursor: pointer; transition: background .15s; }
.chat-verstuur:hover:not(:disabled):not([data-leeg="true"]) { background: var(--btn-hover); }
.chat-verstuur[data-leeg="true"] { background: var(--border); color: var(--muted-small); box-shadow: none; }
.chat-verstuur:disabled { cursor: progress; }
.chat-verstuur[aria-busy="true"] svg { display: none; }
.chat-verstuur[aria-busy="true"]::after { content: ""; width: 22px; height: 22px; border: 3px solid rgba(255, 255, 255, .35); border-top-color: var(--btn-ink); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .chat-verstuur[aria-busy="true"]::after { animation: chat-draai .8s linear infinite; } }
@keyframes chat-draai { to { transform: rotate(360deg); } }
.chat-disclaimer { margin: 0; color: var(--muted-small); font-size: .75rem; text-align: center; overflow-wrap: anywhere; }
@media (hover: none), (max-width: 800px) { .chat-hint { display: none; } }
@media (max-width: 800px) { .chat-balk { padding: 10px 10px 8px 14px; } .chat-formulier { padding-bottom: 12px; } }
.bronnen-titel, #checklist h2, #users h2 { margin: 0 0 8px; font-size: 1.125rem; }
#sources-status:empty { display: none; }
.bronnen-kijker { margin: 0; color: var(--muted-small); font-size: .875rem; }
.bronnen-lijst, .gebruikers-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bron-regel { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.bron-support summary { display: list-item; min-height: 44px; padding: 10px 0; cursor: pointer; }
.bron-support span { overflow-wrap: anywhere; }
.bron-state { padding: 1px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-fg); font-size: .75rem; font-weight: 700; }
.state-ok .bron-state { background: var(--ok-bg); color: var(--ok-fg); }
.bron-laatst, .melding { color: var(--muted-small); font-size: .8125rem; }
.melding { overflow-wrap: anywhere; }
.bron-actie { flex-basis: 100%; }
.melding { margin: 4px 0 0; }
.melding:empty, .gebruikers-limiet-vol:empty { display: none; }
.sa-blok label, .gebruikers-formulier label { display: block; font-size: .8125rem; font-weight: 600; color: var(--accent-deep); }
.sa-rij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sa-adres, .gebruikers-formulier input, .gebruikers-formulier select { min-height: 44px; padding: 9px 11px; }
.sa-adres { flex: 1 1 280px; min-width: 0; }
.sa-adres:focus-visible, .gebruikers-formulier input:focus-visible, .gebruikers-formulier select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.checklist-bron { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.checklist-bron h3 { margin: 0 0 4px; font-size: .9375rem; }
.checklist-bron ol { margin: 0 0 8px; padding-left: 24px; }
.let-op { overflow-wrap: anywhere; margin: 0 0 8px; color: var(--muted-small); font-size: .875rem; }
.koppel-blok { margin: 24px 0; }
.koppel-blok:empty { display: none; }
.koppel-status { margin: 0 0 12px; font-weight: 600; overflow-wrap: anywhere; }
.koppel-lijst { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.koppel-regel { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.koppel-via { padding: 1px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-fg); font-size: .75rem; font-weight: 700; }
.koppel-via[data-via="sa"] { background: var(--info-bg); color: var(--info-fg); }
.koppel-via[data-via="geen"], .koppel-via[data-via="niet-beschikbaar"], .koppel-via[data-via="ontbreekt"], .koppel-via[data-via="verlopen"], .koppel-via[data-via="mislukt"] { background: var(--warn-bg); color: var(--warn-fg); }
.koppel-nodig { margin: 12px 0; padding: 10px 14px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-fg); overflow-wrap: anywhere; }
.koppel-nodig p { margin: 0 0 8px; }
.koppel-nodig .button { margin-top: 2px; }
.koppel-bevestig { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow-wrap: anywhere; }
.koppel-bevestig p { margin: 0 0 8px; }
.koppel-bevestig a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.koppel-bevestig .acties { display: flex; flex-wrap: wrap; gap: 8px; }
.koppel-knop { padding: 8px 16px; }
.koppel-blok .fout { color: var(--warn-fg); margin: 0 0 8px; }
.gebruikers-formulier { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 12px 0 4px; }
.gebruikers-formulier .veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gebruikers-lijst li { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); }
.gebruiker-email { overflow-wrap: anywhere; }
.gebruiker-rol { color: var(--muted-small); font-size: .875rem; }
[hidden] { display: none !important; }

/* Beheerlijst (templates/admin.html): losse pagina, tabel scrolt horizontaal binnen de viewport. */
.admin main { max-width: 100%; padding: 16px; }
.admin-tabel { overflow-x: auto; }
.admin-tabel table { border-collapse: collapse; font-size: 14px; }
.admin-tabel th, .admin-tabel td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.admin-let { font-weight: 700; }
.admin-label { font-weight: 700; font-size: .8em; }

/* Zijmenu: donkere kolom links op desktop (zoals de hero van de marketingsite); op smalle schermen een balk met een knop die het menu in- en uitklapt. */
.app-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; min-height: 100vh; }
.zijbalk { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; padding: 20px 12px;
  background: var(--accent-deep); color: var(--nav-ink);
  background-image: radial-gradient(circle at 0 100%, rgba(248, 204, 35, .13), transparent 55%); }
.zijbalk-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; padding: 0 6px; min-width: 0; }
.menu-toggle { display: none; min-height: 44px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; background: transparent; color: #ffffff; font: inherit; font-weight: 700; cursor: pointer; }
.site-switch { display: flex; flex-direction: column; gap: 4px; margin: 0 6px 16px; }
.site-switch[hidden] { display: none; }
/* Op de chatpagina kiest de gebruiker sites met de bolletjes in de vraagbalk; die beginnen bij de schakelaar-site. */
.app-shell:has(#chat.sectie:not([hidden])) .site-switch { display: none; }
.site-label { color: var(--nav-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.site-keuze { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: #ffffff; font: inherit; font-weight: 600; }
.site-keuze option { background: #ffffff; color: #1a1a1a; }
.zijbalk-menu { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 0; }
.zijbalk-voet { display: flex; flex-direction: column; gap: 12px; }
.nav-lijst, .menu-bronnen { list-style: none; margin: 0; padding: 0; }
.nav-lijst > li + li { margin-top: 2px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: var(--nav-ink); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
a.nav-item:hover { background: rgba(255, 255, 255, .08); }
.nav-item[aria-current="page"] { background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent-yellow); }
.nav-uit { color: var(--nav-muted); cursor: not-allowed; }
.nav-label { margin-left: auto; padding: 1px 8px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; font-size: .75rem; }
.nav-icoon { display: inline-flex; flex: none; width: 20px; height: 20px; }
.icoon { display: block; }
.menu-bronnen { margin: 2px 0 4px 34px; }
.menu-bron { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: .875rem; }
.menu-bron-tekst { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.menu-bron-ids { color: var(--nav-muted); font-size: .75rem; overflow-wrap: anywhere; }
.bron-dot { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--nav-muted); }
.dot-ok { background: #3bc77b; }
.dot-waarschuwing { background: var(--accent-yellow); }
.dot-fout { background: #ff6b60; }
.zijbalk .account { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .15); }
.zijbalk .account .user { color: var(--nav-muted); }
.zijbalk .button.secondary { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, .35); }
.zijbalk .button.secondary:hover:not(:disabled) { background: rgba(255, 255, 255, .08); border-color: #ffffff; }
.zijbalk a:focus-visible, .zijbalk button:focus-visible { outline-color: #ffffff; }
@media (max-width: 800px) {
  .app-shell { display: block; }
  .zijbalk { position: static; display: block; height: auto; }
  .zijbalk-kop { margin-bottom: 0; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .zijbalk-menu { display: none; margin-top: 12px; }
  .zijbalk[data-open="true"] .zijbalk-menu { display: flex; }
  #inhoud > .sectie { width: calc(100% - 32px); margin: 16px auto 16px; }
  .hero { padding: 20px 16px 56px; }
  .hero-titel { font-size: 1.5rem; }
  .sectie-inhoud { margin-top: -36px; padding: 0 16px 24px; }
  #inhoud > #chat.sectie { width: auto; margin: 0; }
  /* Chatpagina: kop + chat vullen samen precies het scherm. Geen vaste kophoogte aftrekken: die hangt af van de
     klantnaam (één of twee regels) en liep zo 16 tot 59 px uit, waardoor de hele pagina ging scrollen.
     Met het menu open niet: dan moet de zijbalk zijn volle hoogte houden (Help, Contact, Uitloggen). */
  .app-shell:has(#chat.sectie:not([hidden])):not(:has(.zijbalk[data-open="true"])) { display: flex; flex-direction: column; align-items: stretch; height: 100vh; height: 100dvh; min-height: 0; }
  .app-shell:has(#chat.sectie:not([hidden])):not(:has(.zijbalk[data-open="true"])) #inhoud { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  #chat.sectie { flex: 1 1 auto; min-height: 0; }
  .chat-voorbeelden { min-height: 0; overflow-y: auto; }
  #chat-inhoud { --chat-pad: 16px; }
  .chat-kop-inhoud { padding: 12px 16px; }
  .chat-kop-bronnen { display: none; }
  .chat-titel { font-size: 1.0625rem; }
  .chat-kop-avatar::before { width: 36px; height: 36px; }
  .chat-bericht { max-width: 90%; padding: 12px 14px; }
  .chat-antwoord .chat-tekst { font-size: 1rem; }
  /* Op een telefoon is de hoogte het knelpunt: met het toetsenbord open bleef er voor het gesprek
     nog geen 100 px over. Kop en Business Context-balk weg (context staat op een eigen pagina),
     invoer start op één regel, en tijdens het typen wijkt de disclaimer. Zonder
     `interactive-widget=resizes-content` (base.html) schuift Chrome op Android de pagina bij het
     toetsenbord op en blijft er na sluiten een lege strook onderaan. */
  .chat-kop { display: none; }
  .chat-invoer { min-height: 28px; }
  .chat-invoer::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-balk { padding: 8px 8px 6px 14px; border-radius: 18px; }
  .context-balk, .chat-formulier:focus-within .chat-disclaimer { display: none; }
  .button.chat-nieuw { padding: 0 10px; min-height: 36px; }
  /* Meerdere sites: sitekiezer in de kop op één regel, sitekeuze in de vraagbalk op één regel
     (scrollt horizontaal bij veel sites). "+ site" werd anders zo breed als de langste sitenaam
     en duwde alles naar drie regels. */
  .site-switch { flex-direction: row; align-items: center; gap: 10px; margin: 10px 6px 0; }
  .site-label { flex: none; }
  .site-keuze { min-height: 38px; padding: 6px 10px; }
  .chat-balk .site-chips-label { display: none; }
  .chat-balk .site-chips-rij { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .chat-balk .site-chip, .chat-balk .site-chip-plus { flex: none; min-height: 36px; }
  .chat-balk .site-chip { padding-left: 12px; }
  .chat-balk .site-chip-x { min-width: 36px; min-height: 36px; }
  .chat-balk .site-chip-plus { max-width: 7.5rem; padding: 6px 10px; }
  /* Het avatar kostte elk antwoord 46 px breedte; lange campagnenamen braken over vier regels. */
  .chat-antwoord, .chat-bezig { margin-left: 0; max-width: 100%; }
  .chat-antwoord::before, .chat-bezig::before { display: none; }
  /* Tikvlak minstens 40 px hoog zonder dat de opmaak verschuift: padding plus even grote negatieve marge. */
  .contact-gegevens dd a { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .kaart-bron, .verandering-tov, .bron-state, .chat-disclaimer { font-size: .8125rem; }
}

/* Business Context */
.context-uitleg, .context-voet { color: var(--muted-small); font-size: .875rem; }
.context-formulier { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 640px; }
.context-formulier label { color: var(--accent-deep); font-size: .8125rem; font-weight: 600; }
.context-formulier input, .context-formulier textarea { width: 100%; min-height: 44px; padding: 9px 11px; }
.context-formulier textarea { min-height: 120px; line-height: 1.45; resize: vertical; }
.context-titel { margin: 0 0 8px; font-size: 1.125rem; }
/* Leesweergave: kop met sitechip, daaronder per gevuld veld een rij-kaart (label links, waarde rechts). */
.context-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.context-kop .context-titel { margin: 0; }
.context-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card-bg); color: var(--accent-deep); font-size: .8125rem; font-weight: 600; overflow-wrap: anywhere; }
.context-rijen { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; max-width: 880px; }
.context-rij { display: flex; gap: 8px 24px; padding: 16px 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-kaart); box-shadow: var(--shadow-kaart); }
.context-rij dt { flex: 0 0 240px; margin: 0; color: var(--accent-deep); font-weight: 600; overflow-wrap: anywhere; }
.context-rij dd { flex: 1 1 0; min-width: 0; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.context-site-regel + .context-site-regel { margin-top: 10px; }
.context-site-naam { display: block; color: var(--muted-small); font-size: .8125rem; font-weight: 600; }
.context-acties { display: flex; flex-wrap: wrap; gap: 8px; }
.context-bewerken { margin: 0 0 16px; }
@media (max-width: 640px) {
  .context-rij { flex-direction: column; padding: 14px 16px; }
  .context-rij dt { flex: none; }
}
/* Vraag per veld; bij twee of meer sites een vinkje "Geldt voor alle sites" en, zonder vinkje, een tekstveld per site. */
.context-velden { display: flex; flex-direction: column; align-items: stretch; gap: 20px; width: 100%; }
.context-veld { display: flex; flex-direction: column; gap: 8px; }
.context-groep { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.context-groep legend { padding: 0; margin-bottom: 4px; color: var(--accent-deep); font-size: .8125rem; font-weight: 600; }
.intake .context-groep legend { font-size: 1rem; font-weight: 700; }
.context-voor-site { color: var(--muted-small); font-size: .8125rem; font-weight: 600; }
.context-alle { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.context-alle label { font-size: .875rem; font-weight: 500; }
.context-formulier .context-alle input[type="checkbox"], .context-alle input[type="checkbox"] { flex: none; width: 20px; min-height: 20px; height: 20px; padding: 0; accent-color: var(--accent); }
.context-site { margin: 0 0 8px; color: var(--accent-deep); font-size: .875rem; font-weight: 600; }

/* Contextkaart (Overzicht) en inklapbare contextbalk (boven de chat). */
.context-kaart { padding: 20px 24px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-kaart); box-shadow: var(--shadow-kaart); }
.context-kaart:empty, .context-balk:empty { display: none; }
.context-kaart-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.context-kaart-kop h2 { margin: 0; font-size: 1.125rem; }
.context-waarden { display: grid; gap: 10px; margin: 0; }
.context-waarden dt { color: var(--accent-deep); font-size: .8125rem; font-weight: 600; }
.context-waarden dd { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.context-leeg { margin: 0 0 8px; color: var(--muted-small); }
.context-balk { width: calc(100% - 64px); max-width: 940px; margin: 16px auto 0; background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; }
@media (max-width: 800px) { .context-balk { width: calc(100% - 32px); } }
.context-balk-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 2px 12px 2px 4px; }
.context-balk-knop { display: flex; flex: 1 1 200px; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 6px 8px; border: 0; background: none; color: var(--text); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.context-balk-titel { flex: none; color: var(--accent-deep); font-weight: 700; }
.context-balk-samen { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-small); }
.context-balk-pijl { flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep); transform: rotate(45deg); transition: transform .15s; }
.context-balk-knop[aria-expanded="true"] .context-balk-pijl { transform: rotate(-135deg); }
.context-balk-paneel { padding: 0 16px 12px; font-size: .875rem; }
.context-balk-paneel .context-waarden { margin-top: 4px; }

/* Vraaglink op een scorecard: knop die eruitziet als een link. */
.vraag-link { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 6px 0; border: 0; background: none; color: var(--accent-deep); font: inherit; font-size: .8125rem; font-weight: 600;
  text-align: left; cursor: pointer; white-space: nowrap; }
.trend .vraag-link { margin-top: 8px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.vraag-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* Bronnen-item met uitklapknop: de link blijft naar de pagina gaan, het pijltje klapt alleen de lijst. */
.nav-rij { display: flex; align-items: center; gap: 2px; }
.nav-rij .nav-item { flex: 1 1 auto; min-width: 0; }
.nav-uitklap { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--nav-ink); cursor: pointer; }
.nav-uitklap:hover { background: rgba(255, 255, 255, .08); }
.nav-uitklap-pijl { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.nav-uitklap[aria-expanded="true"] .nav-uitklap-pijl { transform: rotate(45deg); }

/* Intake: kaart bovenaan het Overzicht, één vraag per stap. */
.intake { padding: 24px; background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 0 var(--radius-kaart) var(--radius-kaart) 0; box-shadow: var(--shadow-kaart); }
.intake:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.intake-titel { margin: 0 0 4px; font-size: 1.25rem; }
.intake-uitleg { margin: 0 0 12px; color: var(--muted-small); font-size: .875rem; }
.intake-voortgang { margin: 0 0 6px; color: var(--accent-deep); font-size: .8125rem; font-weight: 700; overflow-wrap: anywhere; }
.intake-balk { display: block; width: 100%; height: 6px; margin: 0 0 16px; border: 0; border-radius: 3px; background: var(--border); accent-color: var(--accent); overflow: hidden; }
.intake-balk::-webkit-progress-bar { background: var(--border); }
.intake-balk::-webkit-progress-value { background: var(--accent); }
.intake-balk::-moz-progress-bar { background: var(--accent); }
.intake-formulier { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.intake-veldbox { display: flex; flex-direction: column; gap: 8px; }
.intake-label { color: var(--accent-deep); font-size: 1rem; font-weight: 700; }
.intake-veld { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text); font: inherit; font-size: .9375rem; resize: vertical; transition: border-color .15s, box-shadow .15s; }
.intake-veld:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.intake-veld::placeholder { color: #757575; }
.intake-acties { display: flex; flex-wrap: wrap; gap: 8px; }
.intake-later { margin-left: auto; }
.intake-status { overflow-wrap: anywhere; }
.intake-start { margin: 0 0 12px; }
.context-kaart .intake-start { margin: 8px 0 0; }
@media (max-width: 800px) { .intake { padding: 16px; } .intake-later { margin-left: 0; } }

/* Op een telefoon is de contextbalk boven de chat één regel (titel + pijl); de samenvatting en de bewerkknop verschijnen pas bij uitklappen. */
@media (max-width: 767px) {
  .context-balk-samen { display: none; }
  .context-balk-knop[aria-expanded="false"] + .button { display: none; }
}

/* Aan de slag: compact takenblok bovenaan het Overzicht. */
.aan-de-slag { padding: 16px 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-kaart); box-shadow: var(--shadow-kaart); }
.aandeslag-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.aandeslag-titel { margin: 0; font-size: 1.125rem; }
.aandeslag-weg { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -8px -10px -8px 0; border: 0; border-radius: 8px; background: none; color: var(--accent-deep); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.aandeslag-weg:hover { background: var(--bg); }
.taken { list-style: none; margin: 0; padding: 0; }
.taak { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.taak-vink { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border: 2px solid var(--border); border-radius: 50%; color: var(--ok-fg); font-size: .875rem; font-weight: 800; }
.taak-klaar .taak-vink { border-color: var(--ok-fg); background: var(--ok-bg); }
.taak-tekst { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.taak-klaar .taak-tekst { color: var(--muted-small); text-decoration: line-through; }
.taak .button { min-height: 44px; }

/* Help en Contact */
.help, .contact { max-width: 760px; }
.help-deel { margin-top: 28px; }
.help h3 { margin: 0 0 8px; font-size: 1.125rem; }
.help h4 { margin: 20px 0 6px; font-size: 1rem; }
.help-bron, .help-extra-bron { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.help-bron h4, .help-extra-bron h4 { margin-top: 0; }
.help-extra-bron h5 { margin: 14px 0 4px; color: var(--accent-deep); }
.help-extra-bron p { overflow-wrap: anywhere; }
.help-extra { margin: 0 0 8px; overflow-wrap: anywhere; }
.help-meldingen { margin: 0; }
.help-meldingen dt { margin-top: 14px; font-weight: 700; color: var(--accent-deep); }
.help-meldingen dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.contact-gegevens dt { margin-top: 12px; color: var(--muted-small); font-size: .875rem; font-weight: 600; }
.contact-gegevens dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.contact-regelen { color: var(--muted-small); font-size: .875rem; }

/* Trendgrafiek onder de cijfertegels. De gekozen tegel krijgt een oranje rand (aria-pressed op de titelknop). */
.kaart[data-kiesbaar="true"] { cursor: pointer; }
/* De gekozen tegel (die ook in de grafiek staat) is de hero-tegel: breed, donker, met gele lijn. */
.kaart[data-gekozen="true"] { grid-column: span 2; background: var(--grad); border-color: transparent; color: #ffffff; box-shadow: 0 0 0 2px var(--accent, var(--primary)), var(--shadow-hoog);
  --bronkleur: var(--accent-yellow); --bronkleur-bg: rgba(248, 204, 35, .16); }
.kaart[data-gekozen="true"]::before { background: var(--accent-yellow); }
.kaart[data-gekozen="true"]::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; background: var(--gloed); pointer-events: none; }
.kaart[data-gekozen="true"] > * { position: relative; z-index: 1; }
.kaart[data-gekozen="true"] .titel, .kaart[data-gekozen="true"] .aandeel, .kaart[data-gekozen="true"] .label { color: rgba(255, 255, 255, .85); }
.kaart[data-gekozen="true"] .waarde { color: #ffffff; font-size: 2.75rem; }
.kaart[data-gekozen="true"] .sparkline { height: 64px; }
.kaart[data-gekozen="true"] .verandering { background: rgba(255, 255, 255, .12); color: var(--nav-ink); }
.kaart[data-gekozen="true"] .verandering.op { background: rgba(59, 199, 123, .18); color: var(--hero-up); }
.kaart[data-gekozen="true"] .verandering.neer { background: rgba(255, 107, 96, .2); color: var(--hero-down); }
.kaart[data-gekozen="true"] .kaart-voet { border-color: rgba(255, 255, 255, .18); }
.kaart[data-gekozen="true"] .vraag-link, .kaart[data-gekozen="true"] .uitklap { color: #ffffff; }
.kaart[data-gekozen="true"] .delen li { border-color: rgba(255, 255, 255, .18); }
.kaart[data-gekozen="true"] .delen .deel-vorig { color: rgba(255, 255, 255, .8); }
.kaart[data-gekozen="true"] a:focus-visible, .kaart[data-gekozen="true"] button:focus-visible { outline-color: #ffffff; }
@media (hover: hover) { .kaart[data-kiesbaar="true"]:not([data-gekozen="true"]):hover { box-shadow: var(--shadow-hoog); transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .kaart { transition: none; } .kaart[data-kiesbaar="true"]:hover { transform: none !important; } }
@media (max-width: 800px) { .kaart[data-gekozen="true"] { grid-column: auto; } .kaart[data-gekozen="true"] .waarde { font-size: 2rem; } }
.kaart-kies { display: inline; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.kaart-kies:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px; }
/* Mobiel: tikvlak minstens 40 px hoog, zelfde truc als de contactlinks (padding + negatieve marge). */
@media (max-width: 800px) { .kaart-kies { display: inline-block; padding: 11px 0; margin: -11px 0; } }
.trend { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-kaart); background: var(--card-bg); box-shadow: var(--shadow-kaart); min-width: 0; }
.trend[hidden] { display: none; }
.trend-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.trend-titel { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.125rem; font-weight: 800; overflow-wrap: anywhere; }
.trend-icoon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--bronkleur-bg, var(--accent-soft)); color: var(--bronkleur, var(--accent-deep)); }
.trend-legenda { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; }
.trend-legenda li { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; background: var(--flat-bg); color: var(--muted-small); font-weight: 500; }
.trend-sleutel { display: inline-block; width: 18px; height: 0; margin-right: 6px; border-top: 3px solid var(--bronkleur, var(--accent, var(--primary))); vertical-align: middle; }
.trend-sleutel.vorig { border-top: 2px dashed var(--muted-small); }
.trend-svg { display: block; width: 100%; height: auto; touch-action: pan-y; color: var(--bronkleur, var(--accent, var(--primary))); }
.trend-svg:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; border-radius: 6px; }
.trend-gridlijn { stroke: var(--border); stroke-width: 1; }
.trend-as { fill: var(--muted-small); font: 400 11px var(--font); }
.trend-lijn, .trend-lijn-vorig { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.trend-lijn { stroke: var(--bronkleur, var(--accent, var(--primary))); stroke-width: 2.5; }
.trend-lijn-vorig { stroke: var(--muted-small); stroke-width: 2; }
.trend-punt { fill: var(--bronkleur, var(--accent, var(--primary))); }
.trend-punt-vorig { fill: var(--muted-small); }
.trend-cursor-lijn { stroke: var(--text-muted); stroke-width: 1; }
.trend-cursor-punt { stroke: var(--card-bg); stroke-width: 2; }
.trend-tip-vlak { fill: var(--accent-deep); stroke: none; }
.trend-tip-tekst { fill: #ffffff; font: 400 12px var(--font); }
.trend-tip-tekst.trend-tip-datum { fill: var(--accent-yellow); font-weight: 700; }
.trend-leeg { margin: 0; padding: 24px 0; color: var(--muted-small); }
@media (max-width: 480px) { .trend { padding: 14px; } .trend-as { font-size: 10px; } }

/* Bestanden (CSV/TSV) */
.bestand-titel { margin: 0 0 8px; font-size: 1.125rem; }
.bestand-uitleg, .bestand-hint, .bestand-meta, .bestand-leeg { color: var(--muted-small); font-size: .875rem; overflow-wrap: anywhere; }
.bestand-kiezen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0; }
.bestand-kies { min-height: 44px; }
.bestand-kies-invoer { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.bestand-kiezen:focus-within .bestand-kies { outline: 3px solid var(--accent); outline-offset: 2px; }
.bestand-voorbeeld { margin: 16px 0; padding: 16px 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-kaart); box-shadow: var(--shadow-kaart); }
.bestand-voorbeeld-titel { margin: 0 0 4px; font-size: 1rem; }
.bestand-scroll { max-width: 100%; overflow-x: auto; margin: 12px 0; }
.bestand-tabel { border-collapse: collapse; font-size: .875rem; }
.bestand-tabel th, .bestand-tabel td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; white-space: nowrap; }
.bestand-tabel th { min-width: 140px; white-space: normal; }
.bestand-kolomnaam { display: block; color: var(--accent-deep); font-weight: 700; overflow-wrap: anywhere; }
.bestand-type { display: block; color: var(--muted-small); font-size: .8125rem; font-weight: 500; }
.bestand-vink { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: .875rem; font-weight: 500; }
.bestand-vink input, .bestand-alle input[type="checkbox"] { flex: none; width: 20px; height: 20px; min-height: 20px; margin: 0; accent-color: var(--accent); }
.bestand-pii-tekst { display: block; padding: 4px 8px; border-radius: 6px; background: var(--warn-bg); color: var(--warn-fg); font-size: .8125rem; font-weight: 600; }
.bestand-pii .bestand-kolomnaam { color: var(--muted-small); }
.bestand-pii-waarschuwing { margin: 12px 0 8px; padding: 10px 14px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-fg); font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.bestand-waarschuwingen { margin: 8px 0; padding: 8px 12px 8px 28px; border-radius: 8px; background: var(--info-bg); color: var(--info-fg); font-size: .875rem; }
.bestand-alle { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.bestand-alle label { font-size: .875rem; font-weight: 500; }
.bestand-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bestand-lijst { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; padding: 0; list-style: none; max-width: 880px; }
.bestand-rij { padding: 16px 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-kaart); box-shadow: var(--shadow-kaart); }
.bestand-rij p { margin: 4px 0; }
.bestand-rij-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.bestand-naam { color: var(--accent-deep); overflow-wrap: anywhere; }
.bestand-label { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--accent-deep); font-size: .8125rem; font-weight: 600; }
.bestand-label.gedeeld { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-fg); }
.bestand-alias code { padding: 1px 6px; border-radius: 4px; background: var(--flat-bg); overflow-wrap: anywhere; }
.bestand-alias-bewerk { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bestand-alias-veld { flex: 1 1 200px; min-height: 44px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.bestand-status:empty { display: none; }
/* Eén kaart per aanbieder (Google, Microsoft, Matomo, Piwik PRO) op Bronnen. */
.koppel-aanbieder { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); overflow-wrap: anywhere; }
.koppel-aanbieder .bronnen-titel { margin: 0 0 4px; font-size: 1rem; }
.koppel-aanbieder .acties { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.koppel-aanbieder .koppel-lijst { margin-top: 8px; }
.geheim-bron.koppel-aanbieder { border-top: 1px solid var(--border); padding: 16px 18px; }
/* Het koppeladres als alternatief voor inloggen: ingeklapt onder de kaarten. */
.sa-uitklap { margin-top: 24px; padding: 4px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.sa-uitklap summary { min-height: 44px; display: list-item; padding: 10px 0; font-weight: 600; cursor: pointer; }
.sa-uitklap[open] summary { margin-bottom: 4px; }
.checklist-extern { margin-top: 24px; }

.geheim-bron { padding: 14px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.geheim-bron .bronnen-titel { font-size: 1rem; }
.geheim-status { margin: 0 0 8px; font-weight: 600; }
.geheim-status p { margin: 0 0 4px; }
.geheim-form { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; max-width: 520px; }
.geheim-rij { display: flex; flex-direction: column; gap: 4px; }
.geheim-rij .let-op { margin: 0; }
.geheim-veld { width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card-bg); color: var(--text); font: inherit; font-size: .84375rem; transition: border-color .15s, box-shadow .15s; }
.geheim-veld:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.geheim-veld::placeholder { color: #757575; }
.geheim-bron .acties { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.help-knoppen { margin: 0; padding-left: 20px; }
.help-knoppen li { margin-top: 6px; }
.help-adres { margin-top: 28px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; }
.help-adres > summary { cursor: pointer; font-weight: 700; color: var(--accent-deep); }

/* Loginhost: inloggen en aanmelden. Server-gerenderd, geen inline stijl (CSP). */
.login-pagina, .aanmeld-pagina { max-width: 960px; margin: 6vh auto 0; padding: 0 16px 32px; }
.login-pagina .identity, .aanmeld-pagina .identity { justify-content: center; margin-bottom: 24px; }
.login-paden { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.pad-kaart { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--radius-kaart); box-shadow: var(--shadow-kaart); }
.pad-kaart h1, .pad-kaart h2, .pad-kaart p { margin: 0; }
.pad-kaart h1, .pad-kaart h2 { font-size: 1.375rem; }
.pad-kaart > .button { margin-top: auto; }
.pad-trial { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.pad-oogje { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-tekst); }
.vinklijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vinklijst li { display: flex; align-items: flex-start; gap: 10px; }
.vinklijst .vinkje { flex: none; margin-top: 3px; color: var(--ok-fg); }
.button .google-g { flex: none; margin-right: 8px; vertical-align: -3px; background: #fff; border-radius: 50%; padding: 2px; box-sizing: content-box; }
.aanmeld-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.aanmeld-intro h1 { margin: 0 0 8px; font-size: 2rem; }
.aanmeld-lead { margin: 0 0 20px; color: var(--text-light); font-size: 1.0625rem; }
.vinklijst.groot { gap: 16px; }
.vinklijst.groot strong { display: block; color: var(--accent-deep); }
.aanmelden { text-align: left; padding: 28px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-kaart); box-shadow: var(--shadow-hoog); }
.aanmelden h2 { margin: 0 0 4px; font-size: 1.25rem; }
.aanmelden .formulier { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.aanmelden .veld { display: flex; flex-direction: column; gap: 6px; }
.aanmelden .veld label { font-weight: 700; font-size: .9375rem; }
.aanmelden input[type="text"] { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.aanmelden .vink { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; line-height: 1.4; }
.aanmelden .vink input { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.aanmelden .fout { color: #b42318; font-weight: 700; margin: 8px 0 0; }
.aanmelden .honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aanmelden .button { align-self: stretch; }
@media (max-width: 800px) {
  .login-pagina, .aanmeld-pagina { margin-top: 24px; }
  .login-paden, .aanmeld-kolommen { grid-template-columns: 1fr; gap: 20px; }
  .aanmeld-intro h1 { font-size: 1.625rem; }
  .pad-kaart, .aanmelden { padding: 20px; }
}

/* Trial/Business: teller, upsell-kaart, Abonnement en bronkeuze. Kaarten blokkeren de cijfers nooit. */
.plan:empty { display: none; }
.plan { margin: 0 0 16px; }
.plan-regel { display: inline-block; margin: 0 0 10px; padding: 4px 14px; font-size: .875rem; font-weight: 700; color: var(--accent-deep); background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px; }
.plan-kaart { padding: 16px 20px; background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-kaart); box-shadow: var(--shadow-kaart); }
.plan-kaart-titel { margin: 0 0 6px; font-size: 1.0625rem; }
.plan-kaart-tekst { margin: 0 0 12px; max-width: 62ch; }
.plan-kaart-acties { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.abonnement-inhoud { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 16px 0; max-width: 560px; }
.abonnement-status { margin: 0; font-weight: 700; }
.abonnement-formulier { flex-direction: column; align-items: stretch; width: 100%; }
.abonnement-formulier .veld { width: 100%; }
.abonnement-formulier input { width: 100%; }
.veld-waarde { margin: 0; }
.bronkeuze-lijst { display: flex; flex-direction: column; gap: 16px; margin: 12px 0; }
.bronkeuze-groep { border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px 12px; margin: 0; min-width: 0; }
.bronkeuze-groep legend { font-weight: 700; padding: 0 6px; }
.bronkeuze-rij { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; min-height: 44px; overflow-wrap: anywhere; }
.bronkeuze-rij input { flex: none; width: 20px; height: 20px; margin-top: 3px; }
.bronkeuze-lijst > .button { align-self: flex-start; }
#plan-chat:not(:empty) { padding: 12px 16px 0; }
.aanmelden .note a { color: var(--accent-deep); }

/* Weinig historie: geen percentage maar uitleg (historie.mjs). Rustig: grijze tekst met een klein i-teken. */
.eerlijk { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 10px; font-size: .8125rem; line-height: 1.4; color: var(--muted-small); }
.eerlijk-i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-top: 1px;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: .625rem; font-weight: 800; font-style: normal; }
.kaart[data-gekozen="true"] .eerlijk { color: var(--nav-ink); }
.trend-noot { margin: 6px 0 0; font-size: .8125rem; color: var(--muted-small); }

/* Aanbiederkaart met bronkeuze (mockup variant B, rustig): neutrale regels, één accentknop voor de eerstvolgende actie. */
.koppel-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.koppel-kop-tekst { flex: 1 1 auto; min-width: 0; }
.koppel-kop .bronnen-titel { margin: 0; }
.koppel-kop .koppel-status { margin: 0; font-weight: 400; font-size: .8125rem; color: var(--muted-small); }
.aanbieder-ico, .bron-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--flat-bg); color: var(--accent-deep); font-size: .75rem; font-weight: 800; }
.koppel-pil { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--flat-bg); color: var(--muted-small); font-size: .75rem; font-weight: 700; }
.stap-melding { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--flat-bg);
  color: var(--accent-deep); font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.stap-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-deep); color: #ffffff; font-size: .75rem; font-weight: 800; }
.koppel-blok > .stap-melding.business { margin: 12px 0 0; }
.koppel-aanbieder .koppel-regel { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; justify-content: stretch; }
.bron-midden { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-width: 0; }
.bron-midden .bron-naam { flex-basis: 100%; color: var(--accent-deep); font-size: .9375rem; }
.bron-keuze { color: var(--muted-small); font-size: .8125rem; }
.bron-keuze.gekozen { color: var(--ok-fg); font-weight: 500; }
.bron-kies { min-height: 40px; padding: 0 14px; white-space: nowrap; }
.bron-gekozen { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 6px; }
.bron-gekozen .chip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 6px 10px; border-radius: 10px; background: var(--flat-bg);
  color: var(--accent-deep); font-size: .875rem; font-weight: 500; overflow-wrap: anywhere; }
.bron-gekozen .chip small { color: var(--muted-small); font-size: .75rem; font-weight: 400; }
.koppel-tip { margin: 10px 0 0; color: var(--muted-small); font-size: .8125rem; line-height: 1.45; }
@media (max-width: 480px) {
  .koppel-aanbieder .koppel-regel { grid-template-columns: 36px minmax(0, 1fr); }
  .koppel-aanbieder .koppel-regel > .bron-kies { grid-column: 2; justify-self: start; order: 2; }
  .koppel-aanbieder .koppel-regel > .bron-gekozen { order: 1; }
}

/* Keuzevenster: midden in beeld op breed scherm, venster van onderen op mobiel. */
.keuze-host[hidden] { display: none; }
.keuze-scherm { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(26, 26, 46, .55); }
.keuze-venster { display: flex; flex-direction: column; width: min(520px, 100%); max-height: min(640px, calc(100vh - 32px)); border-radius: 16px;
  background: var(--card-bg); box-shadow: var(--shadow-hoog); overflow: hidden; }
.keuze-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 4px 16px; }
.keuze-titel { margin: 0; font-size: 1rem; color: var(--accent-deep); }
.keuze-sluit { min-width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: none; color: var(--accent-deep); font: inherit; font-size: 1.5rem; cursor: pointer; }
.keuze-sluit:hover { background: var(--bg); }
.keuze-zoekrij { padding: 4px 16px 8px; }
.keuze-zoek { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: .9375rem; }
.keuze-zoek:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.keuze-info { margin: 0; padding: 0 16px 6px; color: var(--muted-small); font-size: .8125rem; }
.keuze-opties { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none; overflow: auto; border-top: 1px solid var(--border); }
.keuze-optie label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid #efefef; cursor: pointer; }
.keuze-optie input { flex: none; width: 20px; height: 20px; accent-color: var(--accent-deep); }
.keuze-optie.aan label { background: var(--flat-bg); }
.keuze-optie.uit label { opacity: .5; cursor: default; }
.keuze-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.keuze-naam { color: var(--accent-deep); font-size: .9rem; font-weight: 500; overflow-wrap: anywhere; }
.keuze-tekst small { color: var(--muted-small); font-size: .75rem; overflow-wrap: anywhere; }
.keuze-leeg { padding: 16px; color: var(--muted-small); }
.keuze-hint, .keuze-melding { margin: 0; padding: 8px 16px 0; font-size: .8125rem; color: var(--muted-small); }
.keuze-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); background: #fbfbfd; }
.keuze-teller { color: var(--muted-small); font-size: .8125rem; }
.keuze-voet .acties { display: flex; gap: 8px; }
@media (max-width: 600px) {
  .keuze-scherm { align-items: flex-end; padding: 0; }
  .keuze-venster { width: 100%; max-height: 85vh; border-radius: 16px 16px 0 0; }
}

/* Aan de slag als stappenkaart: de open stap klapt uit (intake inline), afgeronde stappen een vinkje en een korte samenvatting. */
.aandeslag-kop .aandeslag-titel { flex: 1 1 auto; }
.aandeslag-teller { color: var(--muted-small); font-size: .8125rem; white-space: nowrap; }
.stappen { list-style: none; margin: 0; padding: 0; }
.stap { padding: 12px 0; border-top: 1px solid var(--border); }
.stap[hidden] { display: none; }
.stap-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.stap-vink { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border: 2px solid var(--border);
  border-radius: 50%; color: var(--muted-small); font-size: .8125rem; font-weight: 800; }
.stap-open .stap-vink { border-color: var(--accent-deep); background: var(--accent-deep); color: #ffffff; }
.stap-klaar .stap-vink { border-color: var(--ok-fg); background: var(--ok-bg); color: var(--ok-fg); }
.stap-tekst { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.stap-titel { color: var(--accent-deep); font-size: .9375rem; }
.stap-klaar .stap-titel { color: var(--muted-small); font-weight: 600; }
.stap-regel { color: var(--muted-small); font-size: .8125rem; }
.stap-kop .button { min-height: 44px; }
.stap-body { margin: 10px 0 0 38px; }
.stap-body[hidden] { display: none; }
.stap-uitleg { margin: 0 0 10px; color: var(--text); font-size: .9rem; }
.stap-body .acties { display: flex; flex-wrap: wrap; gap: 8px; }
.intake.stap-intake { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 480px) { .stap-body { margin-left: 0; } }
/* In de aanbiederkaarten is "niet gekoppeld" geen alarm: neutraal grijs, kleine uitleg. Verlopen en mislukt houden hun waarschuwing. */
.koppel-aanbieder .koppel-via[data-via="geen"], .koppel-aanbieder .koppel-via[data-via="ontbreekt"] { background: var(--flat-bg); color: var(--muted-small); }
.koppel-aanbieder .bron-actie { color: var(--muted-small); font-size: .8125rem; }
.context-kaart[hidden] { display: none; }