/* =========================================================
   Kamerwacht · stylesheet
   Eén bestand, geen framework. Licht, donker en systeem.
   Thema: zet data-thema="licht" | "donker" op <html>;
   zonder attribuut volgt de site het systeem.
   Vormgeving: Claude Design, "Kamerwacht" (oktober 2026). De regels
   onder "Website" onderaan zijn aanvullingen voor onderdelen die
   alleen in de website bestaan.

   Ontwerpregel: doorgetrokken lijn = bron (letterlijk),
   gestippelde lijn = afgeleid of voorlopig (AI-samenvatting,
   ongecorrigeerd verslag).
   ========================================================= */

/* Lettertypes: zelf gehost in /fonts/ (SIL Open Font License 1.1; licenties staan ernaast).
   Source Serif 4 van Adobe, IBM Plex Sans en Mono van IBM. Geen externe verzoeken. */
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-It.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Tokens: licht ---------- */
:root,
[data-thema="licht"] {
  color-scheme: light;

  --papier: #FFFFFF;
  --papier-2: #F6F5F2;
  --papier-3: #ECEAE4;
  --inkt: #1A1A1A;
  --inkt-2: #4A4A4A;
  --inkt-3: #6B6B6B;
  --lijn: #DEDCD6;
  --lijn-sterk: #1A1A1A;

  --accent: #0B5563;
  --accent-hover: #083F4A;
  --accent-inkt: #FFFFFF;
  --accent-zacht: #DCEDEF;
  --accent-zacht-inkt: #0A4A56;

  --markering: #FFE58A;
  --markering-lijn: #9A7200;
  --markering-inkt: #1A1A1A;

  --waarschuwing: #7A4B00;
  --waarschuwing-zacht: #FFF3D6;
  --fout: #A4262C;
  --fout-zacht: #FDECEC;
  --goed: #1E6B34;
  --goed-zacht: #E6F4EA;

  /* Kop (zijbalk en bovenbalk) en de kleur per documenttype: balk, zachte achtergrond, tekst */
  --kop: #0B3F49;
  --kop-signaal: #FF7A45;
  --debat: #0E8A9B;       --debat-zacht: #D5EEF1;       --debat-inkt: #085A66;
  --motie: #D9542B;       --motie-zacht: #FBE3DA;       --motie-inkt: #8A2E12;
  --vragen: #6A4FC4;      --vragen-zacht: #E8E2FA;      --vragen-inkt: #3E2A8A;
  --brief: #2F6FB5;       --brief-zacht: #DDEAF8;       --brief-inkt: #174A80;

  --focus: #0B5563;
  --schaduw: 0 1px 2px rgba(26, 26, 26, .05), 0 6px 20px rgba(26, 26, 26, .06);

  --serif: "Source Serif 4", "Iowan Old Style", Charter, Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Tekstmaten */
  --t-mini: 0.75rem;     /* 12 px: bovenregels, labels */
  --t-klein: 0.875rem;   /* 14 px: metadata, hulptekst */
  --t-basis: 1rem;       /* 16 px: interface */
  --t-lees: 1.125rem;    /* 18 px: samenvatting, brontekst */
  --t-kop-3: 1.25rem;    /* 20 px: trefferkop */
  --t-kop-2: 1.625rem;   /* 26 px: monitorblok */
  --t-kop-1: 2.5rem;     /* 40 px: paginatitel */

  /* Afstanden (4-punts reeks) */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-6: 32px;
  --r-7: 48px;
  --r-8: 64px;

  --kolom: 46rem;
  --kolom-breed: 64rem;
  --zijbalk: 15rem;
  --rond: 4px;
  --rond-klein: 2px;
}

/* ---------- Tokens: donker ---------- */
[data-thema="donker"] {
  color-scheme: dark;
  --papier: #15171A;
  --papier-2: #1D2024;
  --papier-3: #282C31;
  --inkt: #ECEAE5;
  --inkt-2: #C4C1BA;
  --inkt-3: #9C9890;
  --lijn: #34383E;
  --lijn-sterk: #ECEAE5;
  --accent: #6CC3CF;
  --accent-hover: #93D6DF;
  --accent-inkt: #0B1F23;
  --accent-zacht: #173A40;
  --accent-zacht-inkt: #9ED9E1;
  --markering: #5C4A0A;
  --markering-lijn: #E3B93C;
  --markering-inkt: #FFF6DA;
  --waarschuwing: #F2C46B;
  --waarschuwing-zacht: #392C10;
  --fout: #F2989B;
  --fout-zacht: #3D1C1E;
  --goed: #84CF98;
  --goed-zacht: #17301F;
  --focus: #6CC3CF;
  --kop: #0C3036;
  --debat: #4FC1CF;       --debat-zacht: #133A40;       --debat-inkt: #A6E3EA;
  --motie: #F08A65;       --motie-zacht: #43231A;       --motie-inkt: #F8C3AE;
  --vragen: #A38EEB;      --vragen-zacht: #2C2350;      --vragen-inkt: #D2C7F7;
  --brief: #74A9E6;       --brief-zacht: #1A3150;       --brief-inkt: #BCD6F4;
  --schaduw: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    color-scheme: dark;
    --papier: #15171A; --papier-2: #1D2024; --papier-3: #282C31;
    --inkt: #ECEAE5; --inkt-2: #C4C1BA; --inkt-3: #9C9890;
    --lijn: #34383E; --lijn-sterk: #ECEAE5;
    --accent: #6CC3CF; --accent-hover: #93D6DF; --accent-inkt: #0B1F23;
    --accent-zacht: #173A40; --accent-zacht-inkt: #9ED9E1;
    --markering: #5C4A0A; --markering-lijn: #E3B93C; --markering-inkt: #FFF6DA;
    --waarschuwing: #F2C46B; --waarschuwing-zacht: #392C10;
    --fout: #F2989B; --fout-zacht: #3D1C1E;
    --goed: #84CF98; --goed-zacht: #17301F;
    --focus: #6CC3CF;
    --kop: #0C3036;
    --debat: #4FC1CF;       --debat-zacht: #133A40;       --debat-inkt: #A6E3EA;
    --motie: #F08A65;       --motie-zacht: #43231A;       --motie-inkt: #F8C3AE;
    --vragen: #A38EEB;      --vragen-zacht: #2C2350;      --vragen-inkt: #D2C7F7;
    --brief: #74A9E6;       --brief-zacht: #1A3150;       --brief-inkt: #BCD6F4;
    --schaduw: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
.kw {
  font-family: var(--sans);
  font-size: var(--t-basis);
  line-height: 1.5;
  color: var(--inkt);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.kw h1, .kw h2, .kw h3, .kw p { margin: 0; text-wrap: pretty; }
.kw a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.kw a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.kw :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--rond-klein); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.shell { display: grid; grid-template-columns: var(--zijbalk) minmax(0, 1fr); min-height: 100vh; background: var(--papier); }
.zijbalk { background: var(--papier-2); border-right: 1px solid var(--lijn); padding: var(--r-6) var(--r-4) var(--r-5); display: flex; flex-direction: column; gap: var(--r-6); }
.zijbalk-voet { margin-top: auto; display: grid; gap: var(--r-3); padding-top: var(--r-5); border-top: 1px solid var(--lijn); font-size: var(--t-klein); }
.gebruiker-naam { font-weight: 600; color: var(--inkt); }
.inhoud { padding: var(--r-7) var(--r-6) var(--r-8); min-width: 0; }
.kolom { max-width: var(--kolom); margin: 0 auto; }
.kolom-breed { max-width: var(--kolom-breed); margin: 0 auto; }
.stapel { display: grid; gap: var(--r-5); }
.stapel-groot { display: grid; gap: var(--r-7); }

.bovenbalk { display: none; align-items: center; justify-content: space-between; gap: var(--r-3); padding: var(--r-2) var(--r-4); background: var(--papier-2); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 2; }

/* Telefoon: de zijbalk wordt het uitklapmenu onder de bovenbalk. Een verborgen vinkje schakelt het,
   zodat het ook werkt op pagina's zonder interactieve verbinding (inloggen, mijn account). */
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .zijbalk { display: none; border-right: 0; border-bottom: 1px solid var(--lijn); padding: var(--r-3) var(--r-4) var(--r-5); gap: var(--r-4); }
  .zijbalk > .merk { display: none; }
  #menu-open:checked ~ .zijbalk { display: flex; }
  .bovenbalk { display: flex; }
  .inhoud { padding: var(--r-5) var(--r-4) var(--r-7); }
  :root { --t-kop-1: 2rem; --t-kop-2: 1.375rem; --t-kop-3: 1.125rem; }
}

/* ---------- Merk ---------- */
.merk { display: grid; gap: 2px; text-decoration: none; color: var(--inkt); }
.merk-naam { font-family: var(--serif); font-weight: 700; font-size: 1.375rem; line-height: 1.1; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.merk-naam::before { content: ""; width: 10px; height: 10px; background: var(--accent); border-radius: 1px; flex: none; }
.merk-sub { font-size: var(--t-mini); color: var(--inkt-3); padding-left: 18px; }

/* ---------- Navigatie ---------- */
.nav { display: grid; gap: 2px; }
.nav-kop { font-size: var(--t-mini); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-3); padding: 0 var(--r-3) var(--r-1); }
.nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--r-2); min-height: 40px; padding: var(--r-2) var(--r-3); border-radius: var(--rond); color: var(--inkt-2); text-decoration: none; }
.nav a:hover { background: var(--papier-3); color: var(--inkt); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--papier); color: var(--inkt); font-weight: 600; box-shadow: 0 0 0 1px var(--lijn); }
.nav-sub a { padding-left: var(--r-5); font-size: .9375rem; }
.nav-teller { font-size: var(--t-mini); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--accent); color: var(--accent-inkt); display: inline-flex; align-items: center; justify-content: center; }
.nav-teller.nul { background: transparent; color: var(--inkt-3); font-weight: 500; }

/* ---------- Paginakop ---------- */
.paginakop { display: grid; gap: var(--r-2); padding-bottom: var(--r-5); margin-bottom: var(--r-6); border-bottom: 3px double var(--lijn-sterk); }
.bovenregel { font-size: var(--t-mini); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-3); }
.paginakop h1 { font-family: var(--serif); font-weight: 600; font-size: var(--t-kop-1); line-height: 1.1; letter-spacing: -.015em; }
.onderregel { color: var(--inkt-2); max-width: 60ch; }
.knoppenrij { display: flex; flex-wrap: wrap; gap: var(--r-2); align-items: center; }
.paginakop .knoppenrij { margin-top: var(--r-2); }

.kruimelpad { font-size: var(--t-klein); color: var(--inkt-3); margin-bottom: var(--r-4); }
.kruimelpad ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--r-2); }
.kruimelpad li + li::before { content: "/"; color: var(--lijn); margin-right: var(--r-2); }
.kruimelpad [aria-current] { color: var(--inkt-2); }

/* ---------- Knoppen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: var(--r-2); min-height: 40px; padding: 8px 16px; border: 1px solid var(--accent); border-radius: var(--rond); background: var(--accent); color: var(--accent-inkt); font: 600 .9375rem/1.2 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.kw a.knop { color: var(--accent-inkt); text-decoration: none; }
.knop:hover, .kw a.knop:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-inkt); }
.knop:active { transform: translateY(1px); }
.knop svg { width: 16px; height: 16px; flex: none; }

.knop.tweede, .kw a.knop.tweede { background: var(--papier); color: var(--accent); border-color: var(--accent); }
.knop.tweede:hover, .kw a.knop.tweede:hover { background: var(--accent-zacht); color: var(--accent-hover); }

.knop.stil, .kw a.knop.stil { background: transparent; border-color: transparent; color: var(--accent); padding-inline: 10px; }
.knop.stil:hover, .kw a.knop.stil:hover { background: var(--papier-3); color: var(--accent-hover); }

.knop.gevaar { background: var(--papier); color: var(--fout); border-color: var(--fout); }
.knop.gevaar:hover { background: var(--fout); color: var(--papier); border-color: var(--fout); }

.knop.klein { min-height: 32px; padding: 4px 10px; font-size: .8125rem; }

.knop:disabled, .knop[aria-disabled="true"],
.knop:disabled:hover, .knop[aria-disabled="true"]:hover { background: var(--papier-3); border-color: var(--papier-3); color: var(--inkt-3); cursor: not-allowed; transform: none; }
.knop.stil:disabled { background: transparent; border-color: transparent; }

/* ---------- Labels ---------- */
.doctype, .status-label { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: var(--rond-klein); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.doctype { background: var(--accent-zacht); color: var(--accent-zacht-inkt); }
.status-label { background: var(--waarschuwing-zacht); color: var(--waarschuwing); border: 1px dashed currentColor; }

.stip { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---------- Markering ---------- */
.kw mark { background: var(--markering); color: var(--markering-inkt); padding: 0 .12em; border-radius: var(--rond-klein); box-shadow: inset 0 -2px 0 var(--markering-lijn); }
@media (forced-colors: active) { .kw mark { outline: 1px solid; } }

/* ---------- Trefferkaart ---------- */
.treffers { display: grid; }
.treffer { display: grid; gap: var(--r-2); padding: var(--r-5) 0; border-top: 1px solid var(--lijn); }
.treffer:first-child { border-top: 0; padding-top: var(--r-4); }
.treffer-labels { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2); }
.treffer-titel { font-family: var(--serif); font-weight: 600; font-size: var(--t-kop-3); line-height: 1.3; letter-spacing: -.005em; }
.kw .treffer-titel a { color: var(--inkt); text-decoration: none; }
.kw .treffer-titel a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }
.meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--t-klein); color: var(--inkt-3); }
.treffer .samenvatting { font-family: var(--serif); font-size: var(--t-lees); line-height: 1.6; color: var(--inkt); max-width: 64ch; margin-top: var(--r-1); }
.zonder-samenvatting-label { display: block; font-family: var(--sans); font-size: var(--t-mini); font-style: normal; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--inkt-3); margin-bottom: 2px; }
.treffer.zonder-samenvatting .samenvatting { font-style: italic; color: var(--inkt-2); }
.voetregel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2) var(--r-4); font-size: var(--t-klein); color: var(--inkt-3); margin-top: var(--r-1); }
.voetregel strong { color: var(--inkt); font-weight: 600; }
.voetregel .acties { display: flex; gap: var(--r-1); margin-left: auto; }
.treffer.gelezen .treffer-titel { font-weight: 400; }
.kw .treffer.gelezen .treffer-titel a { color: var(--inkt-2); }
.treffer.gelezen .samenvatting { color: var(--inkt-2); }

/* ---------- Monitorblok ---------- */
.monitorblok { border-top: 2px solid var(--lijn-sterk); padding-top: var(--r-3); }
.monitorblok-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--r-4); padding-bottom: var(--r-2); border-bottom: 1px solid var(--lijn); }
.monitorblok-kop h2 { font-family: var(--serif); font-weight: 600; font-size: var(--t-kop-2); line-height: 1.2; }
.teller { font-size: var(--t-klein); font-weight: 600; color: var(--inkt-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.monitorblok-voet { border-top: 1px solid var(--lijn); padding-top: var(--r-3); font-size: var(--t-klein); }
.monitorblok-voet a { font-weight: 600; }

/* ---------- Trefferdetail: drie blokken ---------- */
.blok-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--r-2) var(--r-4); margin-bottom: var(--r-4); }
.blok-titel { display: flex; align-items: center; gap: var(--r-2); font-size: var(--t-mini); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-2); }
.blok-titel svg { width: 16px; height: 16px; }
.blok-bij { font-size: var(--t-klein); color: var(--inkt-3); }

/* 1. Samenvatting: afgeleid, dus gestippeld en getint */
.samenvattingsblok { background: var(--papier-2); border: 1px dashed var(--inkt-3); border-radius: var(--rond); padding: var(--r-5) var(--r-6); }
.samenvattingsblok p { font-family: var(--serif); font-size: var(--t-lees); line-height: 1.65; max-width: 64ch; }
.samenvattingsblok .blok-voet { margin-top: var(--r-4); font-size: var(--t-klein); color: var(--inkt-3); }
.ai-label { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1px dashed var(--inkt-3); border-radius: var(--rond-klein); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-2); }

/* 2. Bron: letterlijk, dus een vel papier met een vaste lijn */
.bronblok { background: var(--papier); border: 1px solid var(--lijn); border-top: 3px solid var(--lijn-sterk); border-radius: 0 0 var(--rond) var(--rond); box-shadow: var(--schaduw); padding: var(--r-5) var(--r-6) var(--r-6); }
.bron-tekst { display: grid; gap: var(--r-4); font-family: var(--serif); font-size: var(--t-lees); line-height: 1.7; max-width: 64ch; }
.bron-spreker { display: block; font-family: var(--sans); font-size: var(--t-klein); font-weight: 700; color: var(--inkt); margin-bottom: 2px; }
.bron-context { color: var(--inkt-3); }
.bron-context .bron-spreker { color: var(--inkt-3); }
.bron-weglating { font-family: var(--sans); font-size: var(--t-klein); color: var(--inkt-3); letter-spacing: .3em; }
.bron-passage { color: var(--inkt); }

/* 3. Vindplaats: technisch, dus mono */
.vindplaats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-3); padding: var(--r-3) var(--r-3) var(--r-3) var(--r-4); background: var(--papier-2); border: 1px solid var(--lijn); border-radius: var(--rond); }
.vindplaats-tekst { flex: 1 1 22rem; min-width: 0; display: grid; gap: 2px; }
.vindplaats-tekst code { font-family: var(--mono); font-size: .875rem; color: var(--inkt); overflow-wrap: anywhere; }
.vindplaats-tekst span { font-size: var(--t-klein); color: var(--inkt-2); }

/* ---------- Formulieren ---------- */
.kw fieldset { border: 1px solid var(--lijn); border-radius: var(--rond); padding: var(--r-5) var(--r-6) var(--r-2); margin: 0; min-width: 0; }
.kw legend { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; padding: 0 var(--r-2); margin-left: calc(var(--r-2) * -1); }
.veld { display: grid; gap: 6px; margin-bottom: var(--r-5); }
.veld > label, .label { font-weight: 600; color: var(--inkt); }
.hulp { font-size: var(--t-klein); color: var(--inkt-3); max-width: 62ch; }
.invoer { width: 100%; max-width: 32rem; min-height: 44px; padding: 10px 12px; border: 1px solid var(--inkt-3); border-radius: var(--rond); background: var(--papier); color: var(--inkt); font: 400 1rem/1.4 var(--sans); }
textarea.invoer { min-height: 96px; resize: vertical; }
select.invoer { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--inkt-2) 50%), linear-gradient(135deg, var(--inkt-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.invoer:hover { border-color: var(--inkt-2); }
.invoer:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.invoer[aria-invalid="true"] { border-color: var(--fout); border-width: 2px; padding: 9px 11px; }
.invoer:disabled { background: var(--papier-2); color: var(--inkt-3); border-color: var(--lijn); cursor: not-allowed; }
.veldfout { display: flex; align-items: center; gap: 6px; font-size: var(--t-klein); font-weight: 600; color: var(--fout); }
.veldfout svg { width: 16px; height: 16px; flex: none; }

.vink { display: flex; align-items: flex-start; gap: 10px; min-height: 32px; cursor: pointer; }
.vink input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.vinkjes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--r-2) var(--r-5); margin-bottom: var(--r-5); }

.code-invoer { font-family: var(--mono); font-size: 1.75rem; letter-spacing: .45em; text-align: center; padding-left: .45em; max-width: 16rem; }

.formulier-voet { display: flex; flex-wrap: wrap; gap: var(--r-2); align-items: center; padding-top: var(--r-5); border-top: 1px solid var(--lijn); }

/* ---------- Tag-invoer ---------- */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; max-width: 44rem; min-height: 48px; padding: 6px; border: 1px solid var(--inkt-3); border-radius: var(--rond); background: var(--papier); cursor: text; }
.tags:hover { border-color: var(--inkt-2); }
.tags:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.tag { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 2px 0 10px; border-radius: var(--rond-klein); background: var(--accent-zacht); color: var(--accent-zacht-inkt); font-size: .9375rem; font-weight: 500; }
.tag-exact { height: 22px; margin-left: 6px; padding: 0 6px; border: 1px solid var(--accent-zacht-inkt); border-radius: var(--rond-klein); background: transparent; color: var(--accent-zacht-inkt); font: 600 .6875rem/1 var(--sans); letter-spacing: .04em; cursor: pointer; opacity: .75; }
.tag-exact:hover { opacity: 1; }
.tag-exact[aria-pressed="true"] { background: var(--accent-zacht-inkt); color: var(--accent-zacht); opacity: 1; }
.tag-weg { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: var(--rond-klein); background: transparent; color: inherit; cursor: pointer; }
.tag-weg:hover { background: rgba(0, 0, 0, .08); }
.tag-weg svg { width: 12px; height: 12px; }
.tags input { flex: 1 1 10rem; min-width: 8rem; min-height: 32px; border: 0; outline: 0; padding: 0 6px; background: transparent; color: var(--inkt); font: 400 1rem/1.4 var(--sans); }
.tags input::placeholder { color: var(--inkt-3); }
.tags.uitsluit .tag { background: var(--fout-zacht); color: var(--fout); }
.tags.uitsluit .tag-exact { border-color: var(--fout); color: var(--fout); }
.tags.uitsluit .tag-exact[aria-pressed="true"] { background: var(--fout); color: var(--fout-zacht); }
.tags-hint { font-size: var(--t-klein); color: var(--inkt-2); }
.tags-hint kbd { font-family: var(--mono); font-size: .75rem; padding: 1px 5px; border: 1px solid var(--lijn); border-bottom-width: 2px; border-radius: var(--rond-klein); background: var(--papier-2); }

/* ---------- Meldingen ---------- */
.melding { display: flex; gap: var(--r-3); align-items: flex-start; padding: var(--r-3) var(--r-4); border: 1px solid var(--accent); border-radius: var(--rond); background: var(--accent-zacht); color: var(--inkt); font-size: .9375rem; }
.melding > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--accent-zacht-inkt); }
.melding strong { font-weight: 600; }
.melding-tekst { display: grid; gap: 2px; min-width: 0; }
.melding.fout { border-color: var(--fout); background: var(--fout-zacht); }
.melding.fout > svg { color: var(--fout); }
.melding.goed { border-color: var(--goed); background: var(--goed-zacht); }
.melding.goed > svg { color: var(--goed); }
.melding.waarschuwing { border-color: var(--waarschuwing); background: var(--waarschuwing-zacht); }
.melding.waarschuwing > svg { color: var(--waarschuwing); }

/* ---------- Lege staat en laden ---------- */
.lege-staat { padding: var(--r-5) 0 var(--r-4); font-family: var(--serif); font-style: italic; font-size: 1.0625rem; color: var(--inkt-2); }
.laden { display: inline-flex; align-items: center; gap: 10px; color: var(--inkt-2); font-size: .9375rem; }
.laden::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--lijn); border-top-color: var(--accent); border-radius: 50%; animation: kw-draai .8s linear infinite; }
@keyframes kw-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .laden::before { animation-duration: 2.4s; } }

/* ---------- Tabel ---------- */
.tabel-wrap { overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--papier); }
.tabel { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabel th { text-align: left; font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-3); padding: 12px 16px 10px; border-bottom: 2px solid var(--lijn-sterk); white-space: nowrap; }
.tabel td { padding: 12px 16px; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover { background: var(--papier-2); }
.tabel .num { text-align: right; }
.tabel .sub { display: block; font-size: var(--t-klein); color: var(--inkt-3); }
.tabel .acties { display: flex; gap: var(--r-1); justify-content: flex-end; flex-wrap: wrap; }
.tabel .invoer { min-height: 36px; padding: 6px 10px; }
.tabel select.invoer { padding-right: 32px; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-klein); font-weight: 600; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.actief { color: var(--goed); }
.status.uitgenodigd { color: var(--waarschuwing); }
.status.uitgenodigd::before { background: transparent; border: 1.5px dashed currentColor; }
.status.gedeactiveerd { color: var(--inkt-3); }
.status.gedeactiveerd::before { background: transparent; border: 1.5px solid currentColor; }

/* ---------- Kaartschermen (inloggen e.d.) ---------- */
.kaartpagina { min-height: 100vh; display: grid; place-items: center; padding: var(--r-5) var(--r-4); background: var(--papier-2); }
.kaart { width: 100%; max-width: 26rem; background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--rond); box-shadow: var(--schaduw); padding: var(--r-6) var(--r-6) var(--r-5); }
.kaart h1 { font-family: var(--serif); font-weight: 600; font-size: 2rem; line-height: 1.15; margin: var(--r-5) 0 var(--r-2); }
.kaart .intro { color: var(--inkt-2); margin-bottom: var(--r-5); }
.kaart .invoer { max-width: none; }
.kaart .knop { width: 100%; min-height: 44px; }
.kaart-voet { margin-top: var(--r-5); padding-top: var(--r-4); border-top: 1px solid var(--lijn); font-size: var(--t-klein); color: var(--inkt-3); display: grid; gap: var(--r-2); }

/* =========================================================
   Website: aanvullingen op het ontwerp
   ========================================================= */
html { background: var(--papier); }
body.kw { min-height: 100vh; }

/* Het merk is een link naar Vandaag, maar ziet eruit als merk, niet als link. */
.kw a.merk, .kw a.merk:hover { color: var(--inkt); text-decoration: none; }
/* Een vinkje binnen een veld is gewone tekst, geen veldlabel. */
.veld > label.vink { font-weight: 400; }
/* Het codeveld blijft smal en gecentreerd, ook op een kaart (waar invoervelden de volle breedte krijgen). */
.kaart .code-invoer, .code-invoer { max-width: 16rem; }

/* Naar de inhoud springen (eerste Tab op elke pagina) */
.skip { position: absolute; left: -999px; top: var(--r-2); z-index: 10; background: var(--accent); color: var(--accent-inkt); padding: var(--r-2) var(--r-4); border-radius: var(--rond); font-weight: 600; }
.skip:focus { left: var(--r-2); }

/* Menuknop op de telefoon: label bij het verborgen vinkje, met de focus van het vinkje zichtbaar */
.menuknop { cursor: pointer; }
.menuknop svg { width: 16px; height: 16px; }
#menu-open:focus-visible ~ .bovenbalk .menuknop { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Accountinstellingen: tabs als knoppenrij */
.tabs { display: flex; flex-wrap: wrap; gap: var(--r-1); margin-bottom: var(--r-6); }
.kw .tabs a { color: var(--inkt-2); text-decoration: none; padding: 6px 12px; border-radius: var(--rond); border: 1px solid var(--lijn); font-size: .9375rem; }
.kw .tabs a:hover { background: var(--papier-3); color: var(--inkt); }
.kw .tabs a.active, .kw .tabs a[aria-current="page"] { background: var(--papier); color: var(--inkt); font-weight: 600; border-color: var(--lijn-sterk); }
.sectie-titel { font-family: var(--serif); font-weight: 600; font-size: var(--t-kop-2); line-height: 1.2; margin-bottom: var(--r-4) !important; }

/* Tweestapsverificatie: genummerde stappen, QR-code en herstelcodes */
.stappen { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--r-5); }
.stappen > li::marker { font-family: var(--serif); font-weight: 600; }
.qr { display: inline-block; padding: var(--r-2); background: #FFFFFF; border: 1px solid var(--lijn); border-radius: var(--rond); line-height: 0; }
.qr svg { width: 180px; height: 180px; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--r-2); max-width: 32rem; font-family: var(--mono); }
.codes span { padding: 6px 10px; text-align: center; background: var(--papier-2); border: 1px solid var(--lijn); border-radius: var(--rond-klein); }

/* Validatie van Blazor-formulieren in de vorm van .veldfout */
.validation-message { display: flex; align-items: center; gap: 6px; font-size: var(--t-klein); font-weight: 600; color: var(--fout); }
.invoer.invalid { border-color: var(--fout); border-width: 2px; padding: 9px 11px; }

/* Keuzelijsten in tabellen niet smaller dan hun tekst; de tabel scrolt op de telefoon. */
.tabel select.invoer { min-width: 9rem; }

/* Dagrapporten in het monitoroverzicht */
.tabel td a { font-weight: 600; }

/* Foutbalk van Blazor en de herverbindingsmelding */
#blazor-error-ui { display: none; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1000; padding: var(--r-3) var(--r-5); background: var(--fout-zacht); color: var(--inkt); border-top: 1px solid var(--fout); box-shadow: var(--schaduw); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--r-4); top: var(--r-2); font-size: 1.25rem; }

/* Archief: filters in een raster, zoekveld over de volle breedte */
.archief-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: 0 var(--r-4); padding: var(--r-5) var(--r-5) var(--r-2); margin-bottom: var(--r-7); background: var(--papier-2); border: 1px solid var(--lijn); border-radius: var(--rond); }
.archief-filters .invoer { max-width: none; }
.archief-zoek, .archief-acties { grid-column: 1 / -1; }
.archief-acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--r-3); }
.paginering { display: flex; align-items: center; justify-content: space-between; gap: var(--r-4); }
.paginering span { color: var(--inkt-3); }

/* Test op de afgelopen 30 dagen */
.testresultaat { display: grid; gap: var(--r-4); margin-top: var(--r-4); }
.testresultaat .treffer { padding: var(--r-4) 0; }
.testresultaat .samenvatting { font-style: normal; }

/* Platformbeheer */
.kerncijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: var(--r-4); }
.kerncijfer { display: grid; gap: 2px; padding: var(--r-4); border-top: 2px solid var(--lijn-sterk); background: var(--papier-2); }
.kerncijfer-waarde { font-family: var(--serif); font-weight: 600; font-size: var(--t-kop-2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kerncijfer-label { font-size: var(--t-klein); color: var(--inkt-3); }
.status.mislukt { color: var(--fout); }
.balk { display: block; height: 10px; min-width: 2px; background: var(--accent); border-radius: 1px; }
.monitorblok { min-width: 0; }

/* Kleur: donkere kop en een eigen kleur per documenttype.
   De kop zet de tokens binnen zijbalk en bovenbalk om, zodat menu, tellers en knoppen vanzelf meekleuren. */
.zijbalk, .bovenbalk {
  color-scheme: dark;
  --papier: #135461; --papier-2: var(--kop); --papier-3: #114C58;
  --inkt: #FFFFFF; --inkt-2: #D5E8EB; --inkt-3: #A3C7CD;
  --lijn: #24626E; --lijn-sterk: #FFFFFF;
  --accent: #8FD3DC; --accent-hover: #B5E3E9; --accent-inkt: #062A31;
  --focus: #FFB38F;
  background: var(--kop);
  border-color: var(--kop);
}
.merk-naam::before { background: var(--kop-signaal); }
.nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--kop-signaal); }
.nav-teller:not(.nul) { background: var(--kop-signaal); color: #3A1505; }

.treffer { --type: var(--lijn); border-left: 4px solid var(--type); padding-left: var(--r-4); }
.type-debatverslag { --type: var(--debat); --type-zacht: var(--debat-zacht); --type-inkt: var(--debat-inkt); }
.type-motie { --type: var(--motie); --type-zacht: var(--motie-zacht); --type-inkt: var(--motie-inkt); }
.type-kamervragen { --type: var(--vragen); --type-zacht: var(--vragen-zacht); --type-inkt: var(--vragen-inkt); }
.type-kamerbrief { --type: var(--brief); --type-zacht: var(--brief-zacht); --type-inkt: var(--brief-inkt); }
.doctype[class*="type-"] { background: var(--type-zacht); color: var(--type-inkt); }