/* =====================================================================
   Linkpoort — styles.css
   Visueel systeem: richting C, "Westpoort Combinatie".

   Eén stylesheet voor de hele app: de voordeur én de losse pagina's
   (maatwerk, beoordelen, status, dagrapport). De selectors zijn de
   klassen die de HTML en de JS al gebruiken; er is geen buildstap.

   De kleur zit in de codering van het sóórt item, niet in versiering:
   Westpoort-tools zijn zwarte cellen met een geel icoon, formulieren
   hebben een gele zijmarker, dagrapporten een zwarte, en Binnenkort is
   grijs zonder marker. Onder elke tegel staat het soort ook in woorden,
   zodat kleur nooit de enige drager is.

   Fonts worden lokaal geladen; er is bewust geen webfont-CDN, dus valt
   de tekst terug op de systeemschreefloze als Archivo/Barlow niet op de
   werkplek staan.
   ===================================================================== */

:root {
  --ink: #141413;
  --ink-hover: #2A2A28;
  --geel: #FFC700;
  --geel-hover: #F7A800;
  --pagina: #F7F7F5;
  --cel: #FFFFFF;
  --cel-hover: #FCFCFB;
  --hairline: #E3E3E0;
  --invoerrand: #CFCFCA;
  --donker-lijn: #3A3A37;

  /* Leestekst: --tekst-2 haalt 4,9:1 op wit. --tekst-3 is uitsluitend
     decoratief (iconen, scheidingstekens) en nooit leestekst. */
  --tekst-1: #4A4A47;
  --tekst-2: #6E6E6A;
  --tekst-3: #9A9A96;
  --tekst-op-zwart-2: #C0C0BC;

  --ok: #2E9E5B;        --ok-vlak: #E7F5EC;   --ok-tekst: #1F6B2D;
  --let-op: var(--geel); --let-vlak: #FFF6D6;  --let-tekst: #7A5A00;
  --fout: #E23B2E;      --fout-vlak: #FFF8F7; --fout-tekst: #B3261E;
  --fout-rand: #E5B4AF;
  --verplicht: #B0860B;

  --font-display: Archivo, "Arial Narrow", system-ui, sans-serif;
  --font-body: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --breed: 1216px;
  /* Een formulier leest slechter over de volle breedte dan een raster
     tegels. De invulweergaves houden daarom hun eigen, smallere kolom. */
  --breed-vorm: 980px;
  --zijmarge: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* app.js, maatwerk.js, status.js en de dagrapporten verbergen conditionele
   velden en panelen met het hidden-attribuut. Zonder deze regel wint een
   klasse als .veld { display: flex } van de browserstandaard
   [hidden] { display: none } en blijft zo'n veld zichtbaar. Deze regel is
   dus geen opmaak maar gedrag: niet verwijderen. */
[hidden] { display: none !important; }

body {
  background: var(--pagina);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }
a:hover { color: var(--ink-hover); }
a, button { text-decoration: none; }
h1, h2, h3, h4 { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.enkel-schermlezer {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--geel); color: var(--ink);
  font-family: var(--font-display); font-weight: 700;
  padding: 11px 18px;
}
.skiplink:focus { left: 12px; top: 12px; }

/* ---- Kop ------------------------------------------------------------
   Wit met een hairline eronder. Er staat bewust geen naam of initialen
   in de kop: Linkpoort kent de gebruiker niet. De sessie levert alleen
   ja/nee-bevoegdheden, geen naam en geen e-mailadres, en een verzonnen
   accountblok is erger dan geen accountblok. */
.kop { background: var(--cel); border-bottom: 1px solid var(--hairline); }
.kop__binnen {
  max-width: var(--breed); margin: 0 auto; padding: 0 var(--zijmarge);
  height: 64px; display: flex; align-items: center; gap: 28px;
}
.merk {
  display: flex; align-items: center; gap: 12px;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ink); text-align: left;
}
.merk__logo { flex: none; width: 28px; height: 28px; display: block; }
.merk__logo svg { width: 100%; height: 100%; display: block; }
.merk__naam {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 18px; line-height: 1; letter-spacing: -0.01em;
}
/* Het woordmerk staat als Link<b>poort</b> in de markup. Op de zwarte kop
   van vroeger was die <b> geel; op wit zou geel onleesbaar zijn, dus het
   hele woord is nu gewoon zwart. */
.merk__naam b { color: inherit; font-weight: inherit; }
.merk__sub { display: block; font-size: 12px; line-height: 1; color: var(--tekst-2); margin-top: 4px; }
.merk:hover .merk__sub { color: var(--tekst-1); }

/* Aanmelden in de kop (12-10-2026). Rechts staat een knop Aanmelden, en na
   het aanmelden het woord Aangemeld met een knop Afmelden. Ook dit is geen
   accountblok: de sessie zegt alleen óf iemand is aangemeld, dus er staat
   geen naam en geen initialen. De hoofdletters komen uit CSS, zodat een
   schermlezer "Aanmelden" als woord leest en niet letter voor letter. */
.aanmelding { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.aanmelding__status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ok-tekst); white-space: nowrap;
}
/* Een stip naast het woord; de tekst draagt de betekenis, niet de kleur. */
.aanmelding__status::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
}
.kop .aanmelding__knop { text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }
.kop .aanmelding__knop[aria-disabled="true"] { opacity: .6; cursor: progress; transform: none; }

/* ---- Pagina ---------------------------------------------------------- */
.hoofd { display: block; }
.hoofd:focus { outline: none; }
.weergave { max-width: var(--breed); margin: 0 auto; padding: 44px var(--zijmarge) 72px; }
#weergave-formulier, #weergave-resultaat { max-width: var(--breed-vorm); }

/* Ruimte onder de introductie, zodat een foutsamenvatting of melding niet
   tegen de leadtekst aan komt te staan. Naast een rubriek valt de marge
   samen met de grotere marge daarboven, dus de voordeur merkt er niets van. */
.intro { margin-bottom: 24px; }
.intro h1 {
  font-family: var(--font-display); font-weight: 800; font-size: 40px;
  line-height: 1.05; letter-spacing: -0.02em; margin: 0;
}
#weergave-formulier .intro h1, #weergave-resultaat .intro h1 { font-size: 34px; }
.intro__lead { font-size: 16px; color: var(--tekst-1); margin: 10px 0 0; max-width: 62ch; }
.intro__privacy {
  display: inline-flex; align-items: flex-start; gap: 10px;
  margin: 22px 0 0; padding: 11px 14px;
  background: var(--cel); border: 1px solid var(--hairline);
  border-left: 3px solid var(--geel);
  font-size: 13px; line-height: 1.5; color: var(--tekst-1); max-width: 74ch;
}
.intro__slot { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--ink); }
.intro__slot svg { width: 100%; height: 100%; display: block; }

/* ---- Rubriek --------------------------------------------------------
   Klein geel blokje, kapitale titel, dunne zwarte lijn over de volle
   breedte. De teller wordt door de JS in de kop gezet en is aria-hidden,
   zodat de toegankelijke naam van de sectie de titel blijft. */
.rubriek-blok { margin-top: 44px; }
.rubriek {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--ink);
}
.rubriek::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--geel); }
.rubriek__teller {
  margin-left: auto; font-family: var(--font-body); font-weight: 500;
  font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--tekst-2);
}
.rubriek__uitleg { font-size: 12.5px; color: var(--tekst-2); margin: 10px 0 14px; }

/* ---- Tegels: hairline-raster, vaste hoogte --------------------------
   Het raster is één vlak in de hairline-kleur waar de cellen 1px uit
   elkaar op liggen. Daarom vult de JS de laatste rij aan met lege witte
   cellen: anders zou daar een grijs blok overblijven. */
.tegels {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); border-top: 0;
}
.tegels--smal { grid-template-columns: repeat(4, 1fr); }

.tegel {
  position: relative; display: grid;
  grid-template-columns: 22px 1fr; grid-template-rows: auto 1fr auto;
  column-gap: 14px; align-items: start;
  /* 98px is het ritme van het raster, geen harde grens: een titel die
     over twee regels loopt mag de rij hoger maken in plaats van de
     omschrijving of het soortlabel af te knippen. Cellen in dezelfde rij
     groeien mee, dus het raster blijft gesloten. */
  min-height: 98px; padding: 14px 18px 12px 23px; overflow: hidden;
  background: var(--cel); color: var(--ink); text-align: left;
  cursor: pointer; font: inherit; border: 0;
}
/* Gele zijmarker: het standaardgeval is een formulier. */
.tegel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--geel); }
.tegel:hover { background: var(--cel-hover); color: var(--ink); }
.tegel:active { transform: translateY(1px); }
.tegel__icoon { grid-row: 1 / 4; width: 22px; height: 22px; margin-top: 1px; display: block; color: var(--ink); }
.tegel__icoon svg { width: 22px; height: 22px; display: block; }
.tegel__icoon svg [stroke] { stroke: currentColor; stroke-width: 1.5; }
.tegel__icoon img { width: 22px; height: 22px; display: block; }
/* De tekstwikkel mag geen eigen vak maken: naam, uitleg en label zijn
   zelf de rasteritems in kolom 2. */
.tegel__tekst { display: contents; }
.tegel__naam { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.25; }
.tegel__uitleg {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 12.5px; line-height: 1.4; color: var(--tekst-2); margin-top: 2px;
}
.tegel__label {
  grid-column: 2; align-self: end; display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-2); white-space: nowrap;
}
/* Reviewermelding op een tegel. Staat in de rasterstroom en niet absoluut
   in een hoek: hij mag nooit over de titel heen vallen, ook niet als het
   aantal tweecijferig wordt of de tegel op een smal scherm een rij wordt.
   Geel op zwart is het accent van dit systeem, geen alarmkleur. */
.tegel__badge {
  grid-column: 2; align-self: end; justify-self: start;
  margin-top: 8px; padding: 2px 7px;
  background: var(--geel); color: var(--ink);
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.tegel__extern { position: absolute; top: 12px; right: 12px; width: 13px; height: 13px; color: var(--tekst-3); }
.tegel__extern svg { width: 100%; height: 100%; display: block; }
.tegel:hover .tegel__extern { color: var(--ink); }

/* Opvulcel: houdt de laatste rij van het raster gesloten. */
.tegel--leeg { pointer-events: none; cursor: default; }
.tegel--leeg::before { display: none; }

/* Westpoort-tool: zwarte cel met geel icoon. */
.tegel--link { background: var(--ink); color: #fff; }
.tegel--link::before { display: none; }
.tegel--link:hover { background: var(--ink-hover); color: #fff; }
.tegel--link .tegel__icoon { color: var(--geel); }
.tegel--link .tegel__uitleg { color: var(--tekst-op-zwart-2); }
.tegel--link .tegel__label { color: var(--geel); }
.tegel--link .tegel__extern { color: var(--tekst-op-zwart-2); }
.tegel--link:hover .tegel__extern { color: var(--geel); }
.tegel--link:focus-visible { outline-color: var(--geel); outline-offset: -3px; }

/* Dagrapport: witte cel met zwarte zijmarker. */
.tegel--rapport::before { background: var(--ink); }

/* Binnenkort: grijs, geen marker, niet klikbaar. */
.tegel--uit { background: var(--pagina); color: var(--tekst-2); cursor: not-allowed; }
.tegel--uit::before { display: none; }
.tegel--uit:hover { background: var(--pagina); color: var(--tekst-2); }
.tegel--uit .tegel__icoon { color: var(--tekst-op-zwart-2); }
.tegel--uit .tegel__naam { color: var(--tekst-2); }

/* ---- Snel naar: rijen in plaats van tegels --------------------------- */
.links { border: 1px solid var(--hairline); border-top: 0; background: var(--cel); }
.link {
  display: flex; align-items: center; gap: 16px; padding: 16px 22px;
  border-top: 1px solid var(--hairline); color: var(--ink); min-height: 44px;
}
.link:first-child { border-top: 0; }
.link:hover { background: var(--cel-hover); }
.link__icoon {
  flex: none; width: 32px; height: 32px; background: var(--ink); color: var(--geel);
  display: grid; place-items: center;
}
.link__icoon svg { width: 18px; height: 18px; display: block; }
.link__icoon svg [stroke] { stroke: currentColor; stroke-width: 1.5; }
.link__icoon img { width: 18px; height: 18px; display: block; }
.link__tekst { min-width: 0; }
.link__naam { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.link__uitleg { display: block; font-size: 13px; color: var(--tekst-2); }
.link__url {
  margin-left: auto; font-size: 12.5px; color: var(--tekst-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch;
}
.link__extern { flex: none; width: 14px; height: 14px; color: var(--tekst-3); }
.link__extern svg { width: 100%; height: 100%; display: block; }
.link:hover .link__extern { color: var(--ink); }

/* ---- Terugknop ------------------------------------------------------- */
.terugknop {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 4px 2px; margin: 0 0 16px;
  font: inherit; font-size: 12.5px; color: var(--tekst-2); cursor: pointer;
}
.terugknop:hover { color: var(--ink); }
.terugknop svg { width: 13px; height: 13px; color: var(--tekst-3); }

/* ---- Secties en velden ----------------------------------------------- */
.sectie { background: var(--cel); border: 1px solid var(--hairline); margin-top: 20px; }
.sectie__kop {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 24px; border-bottom: 1px solid var(--hairline);
}
.sectie__nummer {
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.06em; background: var(--geel); color: var(--ink); padding: 5px 7px;
}
.sectie__titel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sectie__titel h2, .sectie__titel h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0; }
.sectie__merk {
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 9px;
}
.sectie__merk--extern { background: var(--geel); color: var(--ink); }
.sectie__merk--intern { background: var(--ink); color: #fff; }
.sectie__uitleg { margin: 0 0 0 auto; font-size: 12px; color: var(--tekst-2); }
/* De voorstap van Certificaat opvragen: een genummerde lijst met de
   zoekstappen, en daaronder de knop die het formulier opent. */
.voorstap__stappen {
  margin: 0; padding: 20px 24px 20px 46px;
  display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--ink);
}

.raster { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; padding: 24px; }
/* Sales taken: één kolom, want elke rij is een taak of een teamlid. */
.raster--een { grid-template-columns: 1fr; }
.veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; }
.veld--vol { grid-column: 1 / -1; }
.veld__label { font-size: 13px; font-weight: 600; color: var(--ink); padding: 0; }
.ster { color: var(--verplicht); margin-left: 3px; }
.veld__hint { font-size: 12.5px; color: var(--tekst-2); margin: 0; }
/* Een uitleg per keuze (de prioriteit van een defect): dezelfde toon als de
   hint, met de naam van de keuze vet ervoor. */
.veld__hulp {
  font-size: 12.5px; color: var(--tekst-2); margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.veld__hulp strong { color: var(--ink); font-weight: 600; }

.invoer {
  width: 100%; min-height: 44px; padding: 9px 14px;
  border: 1px solid var(--invoerrand); border-radius: 0;
  background: var(--cel); font: inherit; font-size: 15px; color: var(--ink);
}
textarea.invoer { min-height: 112px; resize: vertical; }
/* De gele binnenrand is de versiering; de zwarte outline is de eigenlijke
   focusaanduiding. Geel op wit haalt 1,5:1 en zou als enige markering
   onzichtbaar zijn, en een box-shadow verdwijnt bovendien in de
   hoogcontrastmodus van Windows. De outline blijft daarom staan. */
.invoer:focus-visible {
  border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--geel);
}
.invoer[aria-invalid="true"], .veld--fout .invoer { border-color: var(--fout); background: var(--fout-vlak); }

.veld__teller { font-size: 12px; color: var(--tekst-2); margin: 0; }
.veld__waarschuwing { font-size: 12.5px; font-weight: 600; color: var(--let-tekst); margin: 0; }
.veld__waarschuwing::before { content: "! "; font-family: var(--font-display); font-weight: 800; }
.veld__fout { font-size: 12.5px; font-weight: 600; color: var(--fout-tekst); margin: 0; }
.veld__fout:empty { display: none; }
/* De spatie achter een hex-escape hoort bij de escape zelf en verdwijnt,
   dus komt de ruimte tussen teken en tekst uit de opmaak. */
.veld__fout::before { content: "\2715"; margin-right: 5px; }

/* Radio- en aankruisgroep: het label is de knop, het invoerveld zelf is
   visueel verborgen maar blijft bedienbaar met het toetsenbord. Beide
   typen moeten hier staan; valt het aankruisvakje eruit, dan verschijnt
   het als losse bolletjes naast zijn eigen label. */
.keuze { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze input[type="radio"],
.keuze input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze--vink label { font-weight: 500; }
.keuze label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--invoerrand); background: var(--cel);
  font-size: 14.5px; font-weight: 600; color: var(--tekst-1); cursor: pointer;
}
.keuze label:hover { border-color: var(--tekst-2); color: var(--ink); }
.keuze input:checked + label { background: var(--ink); border-color: var(--ink); color: #fff; }
.keuze input:checked + label::before { content: "\2713"; color: var(--geel); font-weight: 800; margin-right: 7px; }
.keuze input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- Knoppen --------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border: 1px solid var(--geel); border-radius: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; cursor: pointer;
  background: var(--geel); color: var(--ink); white-space: nowrap;
}
.knop:hover { background: var(--geel-hover); border-color: var(--geel-hover); }
.knop:active { transform: translateY(1px); }
.knop svg { width: 15px; height: 15px; }
.knop--primair { background: var(--geel); color: var(--ink); border-color: var(--geel); }
.knop--primair:hover { background: var(--geel-hover); border-color: var(--geel-hover); }
.knop--rand { background: var(--cel); color: var(--ink); border-color: var(--ink); }
.knop--rand:hover { background: var(--pagina); border-color: var(--ink); }
.knop--stil {
  background: none; border-color: transparent; color: var(--tekst-1);
  text-decoration: underline; text-underline-offset: 3px; padding: 10px 8px;
}
.knop--stil:hover { background: none; border-color: transparent; color: var(--ink); }
/* Afkeuren is onomkeerbaar: rood van rand en tekst, nooit een rood vlak
   dat op een primaire knop lijkt. */
.knop--afkeuren { background: var(--cel); color: var(--fout-tekst); border-color: var(--fout-rand); }
.knop--afkeuren:hover { background: var(--fout-vlak); border-color: var(--fout-tekst); }
.knop--klein { min-height: 36px; padding: 7px 14px; font-size: 13.5px; }
.knop--breed { width: 100%; }
.knop[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- Actiebalken ----------------------------------------------------- */
.acties {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--cel); border: 1px solid var(--hairline); border-top: 2px solid var(--ink);
  padding: 18px 24px; margin-top: 20px;
}
.sectie .acties { border-left: 0; border-right: 0; border-bottom: 0; margin-top: 0; }
.acties--sticky { position: sticky; bottom: 0; z-index: 6; box-shadow: 0 -3px 12px rgba(20, 20, 19, .06); }
.acties__hint { margin-left: auto; font-size: 12.5px; color: var(--tekst-2); }
.acties--resultaat { margin: 0 0 18px; border-top: 1px solid var(--hairline); }
.acties--afsluiten { margin-top: 18px; }

/* ---- Meldingen ------------------------------------------------------
   De JS bouwt overal dezelfde vorm: <div class="melding melding--x">
   met een <strong> en een <span> of <p> erin. Het tekenvlak links is
   daarom een ::before op de melding zelf; zo hoeft geen enkele pagina
   extra markup mee te geven. */
.melding, .foutsamenvatting {
  display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: start;
  padding: 16px 18px; border: 1px solid var(--hairline);
  border-left: 4px solid var(--tekst-3); background: var(--cel);
  font-size: 13px; line-height: 1.5; margin-bottom: 14px; color: var(--tekst-1);
}
.melding > *, .foutsamenvatting > * { grid-column: 2; min-width: 0; }
.melding::before, .foutsamenvatting::before {
  grid-column: 1; grid-row: 1;
  width: 36px; height: 36px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  background: var(--pagina); color: var(--ink);
}
/* De titel volgt de kleur van de melding zelf: op een foutmelding is dat
   het donkerrood, elders het gewone zwart. Daarom inherit en geen vaste
   kleur — die zou hieronder toch worden overschreven. */
.melding strong, .foutsamenvatting h2 {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 15px; color: inherit; margin: 0;
}
.melding--info strong, .melding--ok strong, .melding--waarschuwing strong,
.melding--let strong { color: var(--ink); }
.melding p, .foutsamenvatting p { margin: 3px 0 0; }
.melding span { display: block; margin-top: 3px; }
.melding ul, .foutsamenvatting ul { margin: 7px 0 0; padding-left: 19px; }
.melding li, .foutsamenvatting li { margin-top: 3px; }
.melding a, .foutsamenvatting a { color: inherit; font-weight: 600; }
.melding strong, .foutsamenvatting strong { color: inherit; }

.melding--info::before { content: "i"; }
.melding--ok { border-left-color: var(--ok); }
.melding--ok::before { content: "\2713"; background: var(--ok-vlak); color: var(--ok-tekst); }
.melding--waarschuwing, .melding--let { border-left-color: var(--geel); }
.melding--waarschuwing::before, .melding--let::before { content: "!"; background: var(--let-vlak); color: var(--let-tekst); }
/* border-color moet vóór border-left-color staan: de verkorte schrijfwijze
   zet alle vier de zijden en zou de accentrand anders overschrijven. */
.melding--fout { background: var(--fout-vlak); border-color: var(--fout-rand); border-left-color: var(--fout); color: #7A1F17; }
.melding--fout::before { content: "\2715"; background: #FCEBE9; color: #8F1F16; }
.foutsamenvatting { border-color: var(--fout-rand); border-left-color: var(--fout); background: var(--fout-vlak); color: #7A1F17; }
.foutsamenvatting::before { content: "\2715"; background: #FCEBE9; color: #8F1F16; }

/* Meerdere regels binnen één melding (ontvangers, adressen, mailtekst). */
.melding__regels { white-space: pre-line; }
/* Een knop in een melding (bijvoorbeeld "Open conceptmail opnieuw"). */
.melding p .knop { margin-top: 6px; }

.notitie {
  background: var(--cel); border: 1px solid var(--hairline); border-left: 4px solid var(--geel);
  padding: 12px 16px; margin-top: 16px; font-size: 13px; color: var(--tekst-1);
}

/* ---- Statuschip -----------------------------------------------------
   De stip is nooit de enige drager: de status staat er als woord naast. */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--hairline); background: var(--cel);
  padding: 7px 10px; color: var(--ink); white-space: nowrap;
}
.chip::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--geel); }
.chip--ok::before { background: var(--ok); }
.chip--afgekeurd::before { background: var(--fout); }
.chip--concept::before { background: var(--tekst-op-zwart-2); }

/* ---- Beoordeling: dossierkop, gegevens, besluit ---------------------- */
.dossier {
  background: var(--ink); color: #fff;
  padding: 26px var(--zijmarge); border-bottom: 3px solid var(--geel);
}
/* De zijmarge zit al in de padding van .dossier, dus telt hier de netto
   inhoudsbreedte. Met --breed zou de kop 48px uit het lood staan met de
   kolom eronder. */
.dossier__binnen {
  max-width: calc(var(--breed) - var(--zijmarge) * 2); margin: 0 auto; padding: 0;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
}
.dossier__links { min-width: 0; }
.dossier__kruimel { margin: 0; font-size: 12.5px; color: var(--tekst-3); }
/* Links erven standaard de zwarte tekstkleur; op de zwarte dossierkop
   zouden ze daarmee onzichtbaar zijn. */
.dossier__kruimel a { color: var(--tekst-op-zwart-2); text-decoration: underline; text-underline-offset: 3px; }
.dossier__kruimel a:hover { color: #fff; }
.dossier h1 {
  font-family: var(--font-display); font-weight: 800; font-size: 34px;
  line-height: 1.05; letter-spacing: -0.02em; margin: 10px 0 0; color: #fff;
  overflow-wrap: anywhere;
}
.dossier__sub { margin: 8px 0 0; font-size: 14px; color: var(--tekst-op-zwart-2); }
.dossier__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: none; }
.dossier .chip { background: transparent; border-color: var(--geel); color: var(--geel); }
.dossier__bedrag {
  font-family: var(--font-display); font-weight: 800; font-size: 44px;
  line-height: 1; color: var(--geel); letter-spacing: -0.02em; white-space: nowrap;
}
.dossier :focus-visible { outline-color: var(--geel); }
.dossier + .weergave { padding-top: 30px; }

.beoordeling { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.beoordeling__paneel { min-width: 0; }
.beoordeling__paneel .sectie { margin-top: 0; }
.beoordeling__paneel .acties { margin-top: 0; }
.beoordeling__paneel .acties .knop { width: 100%; }
.beoordeling__paneel .raster { grid-template-columns: 1fr; }

/* Gegevenslijst op de beoordeel-, status- en maatwerkpagina. */
.gegevens {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr;
  background: var(--cel); border: 1px solid var(--hairline); margin: 0; padding: 0;
}
.gegevens dt {
  margin: 0; padding: 14px 24px; font-size: 12.5px; color: var(--tekst-2);
  border-top: 1px solid var(--hairline);
}
.gegevens dd {
  margin: 0; padding: 14px 24px 14px 0; font-size: 15px;
  border-top: 1px solid var(--hairline);
  white-space: pre-wrap; word-break: break-word;
}
.gegevens dt:first-of-type, .gegevens dd:first-of-type { border-top: 0; }
.gegevens__bedrag {
  display: inline-block; font-family: var(--font-display); font-weight: 800;
  font-size: 30px; line-height: 1; letter-spacing: -0.02em;
  border-bottom: 4px solid var(--geel); padding-bottom: 3px;
}
.gegevens dd q {
  quotes: none; display: block; padding: 12px 16px;
  background: var(--pagina); border-left: 2px solid var(--ink);
  font-size: 14px; line-height: 1.55;
}

/* ---- Dagrapporten Sales ---------------------------------------------
   Elk hoofdstuk is een witte kaart, zodat een rapport van negen
   hoofdstukken te scannen blijft. Alleen binnen het rapportformulier:
   op de voordeur blijft een rubriek een kop met een lijn. */
#rapport-inhoud .rubriek-blok {
  background: var(--cel); border: 1px solid var(--hairline);
  padding: 18px 24px 22px; margin-top: 20px;
}
#rapport-inhoud .rubriek-blok .rubriek { border-bottom-color: var(--hairline); }

/* Rapportdatum boven het formulier. */
.statusbalk {
  display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: flex-end;
  background: var(--cel); border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink);
  padding: 16px 20px; margin-bottom: 20px;
}
.statusbalk__deel { display: flex; flex-direction: column; gap: 5px; }
.statusbalk__label {
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-2);
}
.invoer--klein { max-width: 190px; }
.statusbalk__waarde { font-size: 13.5px; color: var(--tekst-1); min-height: 20px; }

/* ---- De rijen van het FO Dagverslag ---------------------------------- */
/* Een item met zes of zeven velden past niet leesbaar in een tabelrij: de
   kolommen worden dan zo smal dat een naam niet meer te lezen is, en op een
   telefoon helemaal niet. Elk item krijgt daarom een eigen kaartje met de
   labels bij de velden. De tabelweergave van de Sales-dagrapporten blijft
   ongemoeid; die hebben één of twee velden per rij en werken daar prima. */
.rapportrij {
  background: var(--cel); border: 1px solid var(--hairline);
  border-left: 3px solid var(--geel);
  padding: 14px 18px 4px; margin-bottom: 14px;
}
.rapportrij__kop {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  align-items: center; justify-content: space-between; margin-bottom: 4px;
}
.rapportrij__naam {
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-2);
}
.rapportrij .raster--rij { padding: 12px 0 14px; gap: 14px 22px; }
.rapportrijen__acties { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.melding__acties { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }

/* De tabellen in het rapport. table-layout: fixed houdt ze binnen de
   breedte van de pagina, ook met tien kolommen invoervelden. */
.rapporttabel { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 6px 0 14px; }
.rapporttabel th, .rapporttabel td {
  text-align: left; padding: 7px 9px; vertical-align: middle;
  border-bottom: 1px solid var(--hairline);
}
.rapporttabel th {
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-2);
  border-bottom: 1px solid var(--ink);
}
.rapporttabel .invoer { width: 100%; }
.rapporttabel__naam { font-weight: 600; }
.rapporttabel__totaal { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Een ja/nee-keuze binnen een tabelcel mag geen eigen marge en kop hebben. */
.veld--inline { margin: 0; padding: 0; border: 0; }
.veld--inline .veld__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.veld--inline .keuze { gap: 5px; }
/* Compacter dan een gewoon keuzelabel, maar het raakvlak blijft de 40px
   die .keuze label vaststelt. */
.veld--inline .keuze label { padding: 5px 11px; font-size: 13px; }

/* Berekende totalen. Nooit invoervelden: deze volgen uit de rijen. */
.totalen {
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  background: var(--pagina); border: 1px solid var(--hairline);
  padding: 12px 15px; margin-top: 10px;
}
.totalen__deel { display: flex; flex-direction: column; gap: 3px; }
.totalen__label {
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-2);
}
.totalen__waarde { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Een hoofdstuk dat er wel staat maar nog geen inhoud heeft. */
.rubriek-blok--uit { opacity: 0.62; }
.rubriek-blok--uit .rubriek { border-bottom-style: dashed; }

/* ---- Blokjes (gegenereerde tekst) ------------------------------------ */
.blok { background: var(--cel); border: 1px solid var(--hairline); margin-top: 16px; }
.blok__kop {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--hairline);
}
.blok__titel { display: flex; align-items: center; gap: 12px; }
.blok__titel h2, .blok__titel h3 { font-family: var(--font-display); font-weight: 800; font-size: 15.5px; margin: 0; }
.blok__kop .knop { margin-left: auto; }
.blok__uitleg { flex: 1 1 100%; font-size: 12.5px; color: var(--tekst-2); margin: 8px 0 0; }
.blok pre, .blok textarea {
  margin: 0; padding: 16px 18px; border: 0; width: 100%;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  color: var(--ink); background: #FAFAF9;
}
/* Intern is zwart, extern is geel — dezelfde codering als de badges. */
.blok:has(.sectie__merk--intern) .blok__kop { background: var(--ink); }
.blok:has(.sectie__merk--intern) .blok__titel h2,
.blok:has(.sectie__merk--intern) .blok__titel h3 { color: #fff; }
.blok:has(.sectie__merk--intern) .sectie__merk--intern { background: #fff; color: var(--ink); }
.blok:has(.sectie__merk--extern) .blok__kop { background: var(--geel); }
/* De toelichting staat op een zwart of geel vlak; de grijstint die op wit
   ruim genoeg is, haalt daar het contrast niet. */
.blok:has(.sectie__merk--intern) .blok__uitleg { color: var(--tekst-op-zwart-2); }
.blok:has(.sectie__merk--extern) .blok__uitleg { color: var(--ink); }

/* ---- Voet en toast --------------------------------------------------- */
.voet { border-top: 1px solid var(--hairline); background: var(--pagina); }
.voet p {
  max-width: var(--breed); margin: 0 auto; padding: 18px var(--zijmarge);
  font-size: 12px; color: var(--tekst-2);
}
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; padding: 11px 16px; font-size: 13px;
  border-left: 4px solid var(--geel); box-shadow: 0 6px 22px rgba(20, 20, 19, .28);
}

/* ---- Responsive -----------------------------------------------------
   Onder de 1000px worden tegels rijen. Dat is bewust vroeg: vier kolommen
   van minder dan 250px knippen de omschrijving af, en een halfvolle rij
   kolommen zou het hairline-raster openbreken. */
@media (max-width: 1100px) {
  .beoordeling { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  .tegels { display: block; background: none; border: 0; }
  .tegel {
    display: flex; align-items: center; gap: 14px;
    height: auto; min-height: 60px; padding: 14px 0 14px 14px;
    border-bottom: 1px solid var(--hairline); background: transparent;
  }
  .tegel::before { top: 14px; bottom: 14px; }
  .tegel:hover { background: transparent; }
  .tegel__icoon { grid-row: auto; width: 20px; height: 20px; margin: 0; }
  .tegel__tekst { display: block; flex: 1 1 auto; min-width: 0; }
  /* Een rij heeft geen vaste hoogte, dus hoeft de omschrijving hier niet
     te worden afgekapt. Op smalle schermen zou één regel bij de langere
     omschrijvingen de helft van de zin wegnemen. */
  .tegel__uitleg { display: block; overflow: visible; }
  .tegel__label { display: none; }
  .tegel__extern { position: static; margin-left: auto; width: 16px; height: 16px; }
  .tegel--uit { background: transparent; }
  .tegel--leeg { display: none; }
  /* .tegel en .tegel--link wegen even zwaar, dus zonder deze herhaling
     zou de regel hierboven de zwarte cel wit maken. */
  .tegel--link, .tegel--link:hover { background: var(--ink); border-bottom-color: var(--donker-lijn); }
}

@media (max-width: 820px) {
  :root { --zijmarge: 18px; }
  .kop__binnen { height: 56px; gap: 12px; }
  .weergave { padding: 22px var(--zijmarge) 80px; }
  .intro h1, #weergave-formulier .intro h1, #weergave-resultaat .intro h1 { font-size: 28px; }
  .raster { grid-template-columns: 1fr; padding: 18px; }
  .acties { padding: 14px 18px; }
  .acties__hint { display: none; }
  .acties .knop { flex: 1; }
  .sectie__kop { padding: 14px 18px; }
  /* Westpoort-tools lopen als zwarte rijen door tot de schermrand. */
  .tegel--link { margin: 0 calc(var(--zijmarge) * -1); padding: 14px var(--zijmarge); border-bottom-color: var(--donker-lijn); }
  .link { padding: 14px 16px; gap: 12px; }
  .link__url { display: none; }
  .dossier { padding: 22px var(--zijmarge); }
  .dossier__binnen { flex-direction: column; align-items: flex-start; }
  .dossier h1 { font-size: 26px; }
  /* Chip en bedrag staan naast elkaar zolang dat past. Een bedrag van zes
     cijfers past niet meer naast de chip en zou anders voorbij de marge
     steken, dus mag de rij afbreken. */
  .dossier__rechts { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 100%; }
  .dossier__bedrag { font-size: 32px; }
  .gegevens { grid-template-columns: 1fr; }
  .gegevens dt { padding: 14px 20px 0; border-top: 1px solid var(--hairline); }
  .gegevens dd { padding: 4px 20px 14px; border-top: 0; }
  .gegevens dt:first-of-type { border-top: 0; }
  .gegevens dd:first-of-type { border-top: 0; }
  #rapport-inhoud .rubriek-blok { padding: 16px 18px 18px; }
}

/* De kop met aanmelden op een telefoon (12-10-2026). Met Aangemeld en
   Afmelden erbij is de kop smal. Daarom gaat eerst de ondertitel van het
   merk weg en onder de 360px ook de naam: het logo blijft, en de pagina
   heet er direct onder Linkpoort. Alleen op de voordeur (kop--aanmelding);
   de andere pagina's houden hun kop zoals die was. */
@media (max-width: 480px) {
  .kop--aanmelding .merk__sub { display: none; }
  .aanmelding { gap: 10px; }
  .aanmelding__status { font-size: 12px; gap: 6px; }
  .kop .aanmelding__knop { padding: 7px 10px; font-size: 12px; letter-spacing: .04em; }
}
@media (max-width: 359px) {
  .kop--aanmelding .merk__tekst { display: none; }
}

@media (max-width: 620px) {
  /* Tabellen worden op een telefoon losse blokjes met het kolomlabel
     ervoor. Zo hoeft er nooit horizontaal gescrold te worden. */
  .rapporttabel, .rapporttabel tbody, .rapporttabel tr, .rapporttabel td {
    display: block; width: 100%;
  }
  .rapporttabel thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .rapporttabel tr { border: 1px solid var(--hairline); padding: 10px 12px; margin-bottom: 10px; }
  .rapporttabel td { border-bottom: 0; padding: 6px 0; }
  .rapporttabel td::before {
    content: attr(data-kolom); display: block; margin-bottom: 4px;
    font-family: var(--font-display); font-weight: 800; font-size: 10px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-2);
  }
  .rapporttabel td[data-kolom=""]::before { content: none; }
  .statusbalk { gap: 12px 18px; }
  .invoer--klein { max-width: none; }
  /* Onder 820px is .raster al eenkoloms, dus de velden van een item staan
     hier vanzelf onder elkaar. Dit haalt alleen de binnenmarge nog wat
     terug, zodat een kaartje op een telefoon niet half uit marge bestaat. */
  .rapportrij { padding: 12px 14px 2px; }
  .rapportrij .raster--rij { padding: 10px 0 12px; }
  .melding, .foutsamenvatting { grid-template-columns: 28px 1fr; column-gap: 10px; padding: 14px 15px; }
  .melding::before, .foutsamenvatting::before { width: 28px; height: 28px; font-size: 13px; }
}

/* ---- Print ----------------------------------------------------------- */
@media print {
  .kop, .voet, .toast, .terugknop, .acties, .tegels, .links, .rubriek-blok { display: none !important; }
  body { background: #fff; }
  .weergave { padding: 0; max-width: none; }
  .dossier { background: #fff; color: #000; border-bottom-color: #999; padding: 0 0 12px; }
  .dossier h1, .dossier__bedrag { color: #000; }
  .blok { break-inside: avoid; border-color: #999; }
  .blok__kop { background: #fff !important; }
  .blok__titel h2, .blok__titel h3 { color: #000 !important; }
}