/* TSN Groen — merk-tokens.
   Bron: TSN Groen – Look & Feel (september 2026). De variabelenamen volgen dat document
   letterlijk; voeg hier nooit zelfbedachte kleuren toe. */

:root {
  /* --- Hoofdkleuren --- */
  --tsn-green: #2c903e;       /* primair: acties, highlights, duurzame accenten */
  --tsn-green-dark: #237532;  /* hover/actief groen; achtergrond voor kleine witte tekst */
  --tsn-blue: #064d80;        /* secundair: navigatie, koppen, structuur */
  --tsn-blue-dark: #043b63;   /* hover/actief blauw */
  --tsn-white: #ffffff;

  /* --- Ondersteunende kleuren --- */
  --tsn-green-light: #eaf5ec; /* mintgroen: subtiel accentvlak */
  --tsn-blue-light: #e8f1f6;  /* ijsblauw: zakelijk informatieblok */
  --tsn-off-white: #f7f9f8;   /* gebroken wit: pagina-achtergrond */
  --tsn-text: #263238;        /* donkergrijs, nooit volledig zwart */
  --tsn-text-muted: #66737a;  /* middengrijs: metadata, toelichting */
  --tsn-border: #dce3e0;      /* lichtgrijs: randen en scheidingslijnen */

  /* --- Signaalkleuren: alleen functioneel, nooit decoratief --- */
  --tsn-warning: #e8a33d;
  --tsn-alert: #c0392b;
  --tsn-warning-light: #fdf4e6;
  --tsn-alert-light: #fbeceb;

  /* --- Randen bij de signaal- en accentvlakken ---
     LET OP: deze zes staan NIET in het Look & Feel-document. Ze stonden tot
     24 september 2026 hardgecodeerd in huisstijl.css, bij de statuspillen, de labels,
     de attentiemelding en de hover van een invoerveld. Daarmee overtrad de bibliotheek
     haar eigen regel dat alles uit tokens komt, en trok elke pagina die de huisstijl
     insluit een melding van de deploycheck.
     Ze zijn hier benoemd en niet gewijzigd, zodat er niets verandert aan hoe iets
     eruitziet. Wat nog moet: laten bevestigen en opnemen in het Look & Feel-document,
     of vervangen door een afgeleide van de kleuren die er wel in staan. */
  --tsn-green-border: #c5e3cc;    /* rand om een mintgroen vlak */
  --tsn-blue-border: #c8dcea;     /* rand om een ijsblauw vlak */
  --tsn-warning-border: #f2ddb8;  /* rand bij attentie */
  --tsn-alert-border: #f0c6c2;    /* rand bij alert */
  --tsn-warning-dark: #8a5d12;    /* tekst op een attentievlak; leesbaar op warning-light */
  --tsn-border-hover: #c3ccc8;    /* rand van een invoerveld onder de muis */

  /* --- Grafiekreeksen: blauw is de basisreeks, groen de gewenste beweging --- */
  --tsn-serie-1: var(--tsn-blue);
  --tsn-serie-2: var(--tsn-green);
  --tsn-serie-3: var(--tsn-text-muted);
  --tsn-serie-4: var(--tsn-border);

  /* --- Typografie --- */
  --tsn-font-kop: "Montserrat", "Calibri", system-ui, sans-serif;
  --tsn-font-tekst: "Open Sans", "Calibri", system-ui, sans-serif;

  /* --- Maatvoering --- */
  --tsn-radius: 6px;
  --tsn-schaduw: 0 1px 3px rgba(38, 50, 56, 0.1);
  --tsn-schaduw-hoog: 0 4px 12px rgba(38, 50, 56, 0.12);

  --tsn-ruimte-xs: 0.25rem;
  --tsn-ruimte-sm: 0.5rem;
  --tsn-ruimte-md: 1rem;
  --tsn-ruimte-lg: 1.5rem;
  --tsn-ruimte-xl: 2.5rem;
}


/* TSN Groen — componentstijlen.
   Verdeling 70/20/10: wit en gebroken wit dragen de pagina, blauw de structuur,
   groen alleen de actie en de highlight. */


.tsn-root {
  font-family: var(--tsn-font-tekst);
  color: var(--tsn-text);
  background: var(--tsn-off-white);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
.tsn-root *,
.tsn-root *::before,
.tsn-root *::after { box-sizing: border-box; }

/* Een component met het hidden-attribuut hoort weg te zijn. Zonder deze regel wint
   de display uit de componentklasse van de browserregel [hidden] { display: none },
   en blijft bijvoorbeeld een foutmelding zichtbaar die de pagina wel degelijk
   verborgen had. Twee attributen verslaan één klasse, dus !important is niet nodig. */
[class*="tsn-"][hidden] { display: none; }

/* ---------- Typografie ---------- */

.tsn-pagina-titel {
  font-family: var(--tsn-font-kop);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--tsn-blue);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 var(--tsn-ruimte-md);
  padding-bottom: 0.4rem;
  border-bottom: 3px solid var(--tsn-green);
  line-height: 1.2;
}
.tsn-pagina-titel__sub {
  display: block;
  font-family: var(--tsn-font-tekst);
  font-weight: 400;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tsn-text-muted);
  margin-top: 0.45rem;
}

.tsn-sectie-titel {
  font-family: var(--tsn-font-kop);
  font-weight: 700;
  color: var(--tsn-blue);
  margin: 0 0 var(--tsn-ruimte-sm);
  line-height: 1.25;
}
.tsn-sectie-titel--h2 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; }
.tsn-sectie-titel--h3 { font-size: 1.05rem; font-weight: 600; text-transform: none; }
.tsn-sectie-titel--h4 { font-size: 0.95rem; font-weight: 600; text-transform: none; color: var(--tsn-text); }
.tsn-sectie-titel__toelichting {
  display: block;
  font-family: var(--tsn-font-tekst);
  font-weight: 400;
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tsn-text-muted);
  margin-top: 0.3rem;
}

.tsn-sectie { margin: 0 0 var(--tsn-ruimte-xl); }
.tsn-sectie--vlak { background: var(--tsn-white); border-top: 1px solid var(--tsn-border); border-bottom: 1px solid var(--tsn-border); padding: var(--tsn-ruimte-lg) 0; }

/* ---------- Logo ---------- */

.tsn-logo { display: inline-flex; align-items: center; }
.tsn-logo__beeld { display: block; height: 40px; width: auto; max-width: 100%; }
/* Op blauw of groen krijgt het logo een wit kader: er is nog geen witte variant. */
.tsn-logo--kader {
  background: var(--tsn-white);
  border-radius: var(--tsn-radius);
  padding: 0.5rem 0.75rem;
}

/* ---------- Knop ---------- */

.tsn-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--tsn-font-kop);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--tsn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.tsn-knop--md { padding: 0.7rem 1.4rem; font-size: 0.95rem; }
.tsn-knop--sm { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.tsn-knop--lg { padding: 0.9rem 1.8rem; font-size: 1.05rem; }
.tsn-knop--vol { width: 100%; }

/* Primair: één groene actie per scherm of sectie. */
.tsn-knop--primair { background: var(--tsn-green); color: var(--tsn-white); }
.tsn-knop--primair:hover:not(:disabled) { background: var(--tsn-green-dark); }
.tsn-knop--primair:active:not(:disabled) { background: var(--tsn-green-dark); }

.tsn-knop--secundair { background: var(--tsn-white); color: var(--tsn-blue); border-color: var(--tsn-blue); }
.tsn-knop--secundair:hover:not(:disabled) { background: var(--tsn-blue-light); color: var(--tsn-blue-dark); border-color: var(--tsn-blue-dark); }

.tsn-knop--tekst { background: transparent; color: var(--tsn-blue); padding-left: 0.4rem; padding-right: 0.4rem; }
.tsn-knop--tekst:hover:not(:disabled) { color: var(--tsn-blue-dark); text-decoration: underline; }

/* Destructief: alleen voor echt onomkeerbare acties. */
.tsn-knop--alert { background: var(--tsn-white); color: var(--tsn-alert); border-color: var(--tsn-alert); }
.tsn-knop--alert:hover:not(:disabled) { background: var(--tsn-alert-light); }

.tsn-knop:disabled { opacity: 0.45; cursor: not-allowed; }
.tsn-knop:focus-visible { outline: 2px solid var(--tsn-blue); outline-offset: 2px; }

.tsn-knoprij { display: flex; flex-wrap: wrap; gap: var(--tsn-ruimte-sm); align-items: center; }

/* ---------- Kaart ---------- */

.tsn-kaart {
  background: var(--tsn-white);
  border: 1px solid var(--tsn-border);
  border-radius: var(--tsn-radius);
  box-shadow: var(--tsn-schaduw);
}
.tsn-kaart__kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tsn-ruimte-md);
  padding: var(--tsn-ruimte-md) var(--tsn-ruimte-lg);
  border-bottom: 1px solid var(--tsn-border);
}
.tsn-kaart__titel {
  font-family: var(--tsn-font-kop);
  font-weight: 600;
  font-size: 1rem;
  color: var(--tsn-blue);
  margin: 0;
}
.tsn-kaart__toelichting { font-size: 0.85rem; color: var(--tsn-text-muted); margin: 0.2rem 0 0; }
.tsn-kaart__body { padding: var(--tsn-ruimte-lg); }
.tsn-kaart__body--strak { padding: 0; }
.tsn-kaart__voet {
  padding: var(--tsn-ruimte-md) var(--tsn-ruimte-lg);
  border-top: 1px solid var(--tsn-border);
  background: var(--tsn-off-white);
  border-radius: 0 0 var(--tsn-radius) var(--tsn-radius);
}

/* ---------- Infovlak ---------- */

.tsn-vlak {
  border-radius: var(--tsn-radius);
  padding: 0.9rem 1.1rem;
  border-left: 4px solid transparent;
  font-size: 0.925rem;
}
.tsn-vlak__titel { font-family: var(--tsn-font-kop); font-weight: 600; margin: 0 0 0.3rem; font-size: 0.95rem; }
.tsn-vlak__inhoud > :first-child { margin-top: 0; }
.tsn-vlak__inhoud > :last-child { margin-bottom: 0; }
.tsn-vlak--groen { background: var(--tsn-green-light); border-left-color: var(--tsn-green); }
.tsn-vlak--groen .tsn-vlak__titel { color: var(--tsn-green-dark); }
.tsn-vlak--blauw { background: var(--tsn-blue-light); border-left-color: var(--tsn-blue); }
.tsn-vlak--blauw .tsn-vlak__titel { color: var(--tsn-blue); }

/* ---------- Melding ---------- */

.tsn-melding {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border-radius: var(--tsn-radius);
  padding: 0.85rem 1.05rem;
  border: 1px solid transparent;
  border-left-width: 4px;
  font-size: 0.925rem;
}
.tsn-melding__icoon { flex: none; font-weight: 700; line-height: 1.5; }
.tsn-melding__titel { font-family: var(--tsn-font-kop); font-weight: 600; margin: 0 0 0.2rem; }
.tsn-melding__inhoud { margin: 0; }
.tsn-melding--info { background: var(--tsn-blue-light); border-color: var(--tsn-border); border-left-color: var(--tsn-blue); }
.tsn-melding--info .tsn-melding__icoon, .tsn-melding--info .tsn-melding__titel { color: var(--tsn-blue); }
.tsn-melding--goed { background: var(--tsn-green-light); border-color: var(--tsn-border); border-left-color: var(--tsn-green); }
.tsn-melding--goed .tsn-melding__icoon, .tsn-melding--goed .tsn-melding__titel { color: var(--tsn-green-dark); }
.tsn-melding--attentie { background: var(--tsn-warning-light); border-color: var(--tsn-border); border-left-color: var(--tsn-warning); }
.tsn-melding--attentie .tsn-melding__icoon, .tsn-melding--attentie .tsn-melding__titel { color: var(--tsn-warning-dark); }
.tsn-melding--alert { background: var(--tsn-alert-light); border-color: var(--tsn-border); border-left-color: var(--tsn-alert); }
.tsn-melding--alert .tsn-melding__icoon, .tsn-melding--alert .tsn-melding__titel { color: var(--tsn-alert); }

/* ---------- Kengetal ---------- */

.tsn-kengetal {
  background: var(--tsn-white);
  border: 1px solid var(--tsn-border);
  border-radius: var(--tsn-radius);
  box-shadow: var(--tsn-schaduw);
  padding: var(--tsn-ruimte-md) var(--tsn-ruimte-lg);
  min-width: 0;
}
.tsn-kengetal__label {
  font-size: 0.8rem;
  color: var(--tsn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin: 0 0 0.35rem;
}
.tsn-kengetal__waarde {
  font-family: var(--tsn-font-kop);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.05;
  color: var(--tsn-blue);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
/* Eén kerncijfer per pagina mag groen zijn — meer niet. */
.tsn-kengetal--highlight .tsn-kengetal__waarde { color: var(--tsn-green); }
.tsn-kengetal__eenheid { font-size: 1.1rem; font-weight: 600; color: var(--tsn-text-muted); }
.tsn-kengetal__duiding { font-size: 0.85rem; color: var(--tsn-text-muted); margin: 0.4rem 0 0; }
.tsn-kengetal__verschil { font-weight: 600; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.tsn-kengetal__verschil--goed { color: var(--tsn-green); }
.tsn-kengetal__verschil--attentie { color: var(--tsn-warning); }
.tsn-kengetal__verschil--alert { color: var(--tsn-alert); }
.tsn-kengetal__verschil--neutraal { color: var(--tsn-text-muted); }

.tsn-kengetalrij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--tsn-ruimte-md);
}

/* ---------- Statuslabel en label ---------- */

.tsn-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--tsn-font-kop);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tsn-status__stip { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: none; }
.tsn-status--goed { background: var(--tsn-green-light); color: var(--tsn-green-dark); border-color: var(--tsn-green-border); }
.tsn-status--attentie { background: var(--tsn-warning-light); color: var(--tsn-warning-dark); border-color: var(--tsn-warning-border); }
.tsn-status--alert { background: var(--tsn-alert-light); color: var(--tsn-alert); border-color: var(--tsn-alert-border); }
.tsn-status--neutraal { background: var(--tsn-off-white); color: var(--tsn-text-muted); border-color: var(--tsn-border); }
.tsn-status--info { background: var(--tsn-blue-light); color: var(--tsn-blue); border-color: var(--tsn-blue-border); }

.tsn-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: var(--tsn-radius);
  background: var(--tsn-off-white);
  border: 1px solid var(--tsn-border);
  color: var(--tsn-text);
}
.tsn-label--blauw { background: var(--tsn-blue-light); border-color: var(--tsn-blue-border); color: var(--tsn-blue); }
.tsn-label--groen { background: var(--tsn-green-light); border-color: var(--tsn-green-border); color: var(--tsn-green-dark); }
.tsn-label__verwijder { background: none; border: 0; cursor: pointer; color: inherit; font-size: 1rem; line-height: 1; padding: 0; opacity: 0.7; }
.tsn-label__verwijder:hover { opacity: 1; }

/* ---------- Tabel ---------- */

.tsn-tabel-omhulsel { width: 100%; overflow-x: auto; }
.tsn-tabel { border-collapse: collapse; width: 100%; font-size: 0.925rem; }
.tsn-tabel caption {
  caption-side: top;
  text-align: left;
  font-family: var(--tsn-font-kop);
  font-weight: 600;
  color: var(--tsn-blue);
  padding: 0 0 var(--tsn-ruimte-sm);
}
.tsn-tabel thead th {
  background: var(--tsn-blue);
  color: var(--tsn-white);
  font-family: var(--tsn-font-kop);
  font-weight: 600;
  font-size: 0.85rem;
  text-align: left;
  padding: 0.65rem 0.85rem;
  white-space: nowrap;
}
.tsn-tabel thead th:first-child { border-top-left-radius: var(--tsn-radius); }
.tsn-tabel thead th:last-child { border-top-right-radius: var(--tsn-radius); }
.tsn-tabel td,
.tsn-tabel tbody th { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--tsn-border); vertical-align: top; }
.tsn-tabel tbody th { text-align: left; font-weight: 600; }
.tsn-tabel--gestreept tbody tr:nth-child(even) { background: var(--tsn-off-white); }
/* Een getalkolom lijnt rechts uit, kop en waarde allebei. Eén regel is genoeg omdat
   .tsn-tabel .tsn-tabel__num zwaarder weegt dan .tsn-tabel thead th; stond de kopopmaak
   nog op .tsn-tabel th, dan was er een aparte regel voor de kop nodig. */
.tsn-tabel .tsn-tabel__num { text-align: right; font-variant-numeric: tabular-nums; }
.tsn-tabel tfoot td { font-weight: 700; background: var(--tsn-off-white); border-top: 2px solid var(--tsn-border); border-bottom: 0; }

/* ---------- Tabbladen ---------- */

.tsn-tabbladen { display: block; }

.tsn-tabbladen__lijst { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--tsn-border); overflow-x: auto; }
.tsn-tabblad {
  font-family: var(--tsn-font-kop);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tsn-text-muted);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 0.65rem 0.95rem;
  cursor: pointer;
  white-space: nowrap;
}
.tsn-tabblad:hover { color: var(--tsn-blue); }
.tsn-tabblad[aria-selected="true"] { color: var(--tsn-blue); border-bottom-color: var(--tsn-blue); }
.tsn-tabblad:focus-visible { outline: 2px solid var(--tsn-blue); outline-offset: -2px; }
.tsn-tabbladen__paneel { padding-top: var(--tsn-ruimte-md); }

/* ---------- Voortgangsbalk ---------- */

.tsn-voortgang { display: block; }

.tsn-voortgang__kop { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tsn-ruimte-sm); margin-bottom: 0.35rem; }
.tsn-voortgang__label { font-size: 0.875rem; color: var(--tsn-text); font-weight: 600; }
.tsn-voortgang__waarde { font-size: 0.875rem; color: var(--tsn-text-muted); font-variant-numeric: tabular-nums; }
.tsn-voortgang__baan { height: 0.6rem; background: var(--tsn-border); border-radius: 999px; overflow: hidden; }
.tsn-voortgang__vulling { height: 100%; border-radius: 999px; background: var(--tsn-blue); transition: width 0.3s ease; }
.tsn-voortgang--goed .tsn-voortgang__vulling { background: var(--tsn-green); }
.tsn-voortgang--attentie .tsn-voortgang__vulling { background: var(--tsn-warning); }
.tsn-voortgang--alert .tsn-voortgang__vulling { background: var(--tsn-alert); }

/* ---------- Lege staat ---------- */

.tsn-lege-staat {
  text-align: center;
  padding: var(--tsn-ruimte-xl) var(--tsn-ruimte-lg);
  background: var(--tsn-white);
  border: 1px dashed var(--tsn-border);
  border-radius: var(--tsn-radius);
}
.tsn-lege-staat__icoon { font-size: 2rem; color: var(--tsn-border); margin-bottom: var(--tsn-ruimte-sm); }
.tsn-lege-staat__titel { font-family: var(--tsn-font-kop); font-weight: 600; color: var(--tsn-blue); margin: 0 0 0.35rem; font-size: 1.05rem; }
.tsn-lege-staat__tekst { color: var(--tsn-text-muted); margin: 0 auto var(--tsn-ruimte-md); max-width: 42ch; font-size: 0.925rem; }

/* ---------- Definitielijst ---------- */

.tsn-definitielijst { margin: 0; display: grid; gap: 0.1rem 1.25rem; }
.tsn-definitielijst--twee { grid-template-columns: max-content 1fr; }
.tsn-definitielijst--gestapeld { grid-template-columns: 1fr; }
.tsn-definitielijst dt { color: var(--tsn-text-muted); font-size: 0.85rem; padding: 0.4rem 0; }
.tsn-definitielijst dd { margin: 0; padding: 0.4rem 0; font-weight: 600; }
.tsn-definitielijst--gestreept dt, .tsn-definitielijst--gestreept dd { border-bottom: 1px solid var(--tsn-border); }

/* ---------- Formulieren ---------- */

.tsn-veld { display: block; margin-bottom: var(--tsn-ruimte-md); }
.tsn-veld__label { display: block; font-weight: 600; font-size: 0.875rem; color: var(--tsn-text); margin-bottom: 0.3rem; }
.tsn-veld__verplicht { color: var(--tsn-alert); margin-left: 0.15rem; }
.tsn-veld__hint { font-size: 0.8rem; color: var(--tsn-text-muted); margin: 0.3rem 0 0; }
.tsn-veld__fout { font-size: 0.8rem; color: var(--tsn-alert); margin: 0.3rem 0 0; font-weight: 600; }

.tsn-invoer {
  width: 100%;
  font-family: var(--tsn-font-tekst);
  font-size: 0.95rem;
  color: var(--tsn-text);
  background: var(--tsn-white);
  border: 1px solid var(--tsn-border);
  border-radius: var(--tsn-radius);
  padding: 0.6rem 0.75rem;
  line-height: 1.4;
}
.tsn-invoer::placeholder { color: var(--tsn-text-muted); opacity: 0.8; }
.tsn-invoer:hover:not(:disabled) { border-color: var(--tsn-border-hover); }
.tsn-invoer:focus { outline: 2px solid var(--tsn-blue); outline-offset: -1px; border-color: var(--tsn-blue); }
.tsn-invoer:disabled { background: var(--tsn-off-white); color: var(--tsn-text-muted); cursor: not-allowed; }
.tsn-invoer--fout { border-color: var(--tsn-alert); }
.tsn-invoer--fout:focus { outline-color: var(--tsn-alert); border-color: var(--tsn-alert); }
textarea.tsn-invoer { resize: vertical; min-height: 5rem; }
select.tsn-invoer { appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--tsn-blue) 50%), linear-gradient(135deg, var(--tsn-blue) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 1.15rem, calc(100% - 0.75rem) 1.15rem; background-size: 0.35rem 0.35rem, 0.35rem 0.35rem; background-repeat: no-repeat; }

.tsn-keuze { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; padding: 0.25rem 0; }
.tsn-keuze__vak { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--tsn-green); cursor: pointer; }
.tsn-keuze__tekst { font-size: 0.925rem; }
.tsn-keuze__toelichting { display: block; font-size: 0.8rem; color: var(--tsn-text-muted); margin-top: 0.1rem; }
.tsn-keuze--uit { cursor: not-allowed; opacity: 0.55; }

/* Keuzekaart: een aanklikbare kaart waarmee iemand een richting kiest voordat de rest
   van een formulier verschijnt - welk formulier, welke route, welk soort aanvraag.
   Waar `tsn-keuze` een regel met een vakje is, is dit een vlak met een eigen titel en
   ruimte voor uitleg, groot genoeg om op een telefoon te raken.

   Markeer de keuze op een van twee manieren, niet allebei:
   - een `<button type="button">` met `aria-pressed`, in een `role="group"` met een
     `aria-label` die de vraag stelt;
   - een `<input type="radio">` met een `<label>` eromheen en `tsn-keuzekaart--gekozen`.

   Gebruik dit tot een stuk of vier opties; daarboven wordt een `tsn-keuzelijst`
   rustiger. */
.tsn-keuzekaart-groep {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--tsn-ruimte-md);
  margin: 0 0 var(--tsn-ruimte-lg);
}
.tsn-keuzekaart {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--tsn-white);
  border: 1px solid var(--tsn-border);
  border-radius: var(--tsn-radius);
  padding: var(--tsn-ruimte-md);
  font-family: var(--tsn-font-tekst);
  font-size: 0.925rem;
  color: var(--tsn-text);
  box-shadow: var(--tsn-schaduw);
}
.tsn-keuzekaart:hover:not(:disabled) { border-color: var(--tsn-green); }
.tsn-keuzekaart:focus-visible { outline: 2px solid var(--tsn-blue); outline-offset: 2px; }
/* De tweede rand komt van een inset-schaduw en niet van een dikkere border: die zou de
   kaart bij het kiezen een pixel laten verspringen. */
.tsn-keuzekaart[aria-pressed="true"],
.tsn-keuzekaart--gekozen {
  border-color: var(--tsn-green);
  background: var(--tsn-green-light);
  box-shadow: var(--tsn-schaduw), inset 0 0 0 1px var(--tsn-green);
}
.tsn-keuzekaart--uit { cursor: not-allowed; opacity: 0.55; }
.tsn-keuzekaart__titel {
  display: block;
  font-family: var(--tsn-font-kop);
  font-weight: 600;
  color: var(--tsn-blue);
  margin-bottom: var(--tsn-ruimte-xs);
}
.tsn-keuzekaart__toelichting { display: block; color: var(--tsn-text-muted); }

.tsn-veldgroep { border: 1px solid var(--tsn-border); border-radius: var(--tsn-radius); padding: var(--tsn-ruimte-md) var(--tsn-ruimte-lg) var(--tsn-ruimte-sm); margin: 0 0 var(--tsn-ruimte-md); background: var(--tsn-white); }
.tsn-veldgroep__titel { font-family: var(--tsn-font-kop); font-weight: 600; color: var(--tsn-blue); padding: 0 0.4rem; font-size: 0.95rem; }
.tsn-veldgroep__toelichting { font-size: 0.85rem; color: var(--tsn-text-muted); margin: 0 0 var(--tsn-ruimte-md); }

/* ---------- Navigatie ---------- */

.tsn-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Breekt af op smalle schermen: zonder wrap loopt de balk buiten het scherm
     en scrollt de hele pagina horizontaal. */
  flex-wrap: wrap;
  gap: var(--tsn-ruimte-sm) var(--tsn-ruimte-lg);
  background: var(--tsn-blue);
  color: var(--tsn-white);
  padding: 0.75rem var(--tsn-ruimte-lg);
}
.tsn-kop__merk { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.tsn-kop__titel { font-family: var(--tsn-font-kop); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.95rem; margin: 0; }
.tsn-kop__nav { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.tsn-kop__link {
  color: var(--tsn-white);
  text-decoration: none;
  font-family: var(--tsn-font-kop);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--tsn-radius);
  opacity: 0.85;
}
.tsn-kop__link:hover { background: var(--tsn-blue-dark); opacity: 1; color: var(--tsn-white); }
.tsn-kop__link--actief { background: var(--tsn-blue-dark); opacity: 1; }
.tsn-kop__acties { display: flex; align-items: center; gap: var(--tsn-ruimte-sm); }

.tsn-zijnav { background: var(--tsn-white); border: 1px solid var(--tsn-border); border-radius: var(--tsn-radius); padding: var(--tsn-ruimte-sm); min-width: 200px; }
.tsn-zijnav__groep { margin-bottom: var(--tsn-ruimte-sm); }
.tsn-zijnav__groep-titel { font-family: var(--tsn-font-kop); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tsn-text-muted); padding: 0.5rem 0.7rem 0.3rem; margin: 0; }
.tsn-zijnav__lijst { list-style: none; margin: 0; padding: 0; }
.tsn-zijnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tsn-ruimte-sm);
  padding: 0.5rem 0.7rem;
  border-radius: var(--tsn-radius);
  color: var(--tsn-text);
  text-decoration: none;
  font-size: 0.9rem;
  border-left: 3px solid transparent;
}
.tsn-zijnav__link:hover { background: var(--tsn-off-white); color: var(--tsn-blue); }
.tsn-zijnav__link--actief { background: var(--tsn-blue-light); color: var(--tsn-blue); font-weight: 600; border-left-color: var(--tsn-blue); }
.tsn-zijnav__telling { font-size: 0.75rem; color: var(--tsn-text-muted); font-variant-numeric: tabular-nums; }

.tsn-kruimelpad { font-size: 0.85rem; color: var(--tsn-text-muted); }
.tsn-kruimelpad__lijst { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; padding: 0; }
.tsn-kruimelpad__link { color: var(--tsn-blue); text-decoration: none; }
.tsn-kruimelpad__link:hover { text-decoration: underline; color: var(--tsn-blue-dark); }
.tsn-kruimelpad__scheiding { color: var(--tsn-border); }
.tsn-kruimelpad__huidig { color: var(--tsn-text); font-weight: 600; }

.tsn-paginering { display: flex; align-items: center; justify-content: space-between; gap: var(--tsn-ruimte-md); flex-wrap: wrap; }
.tsn-paginering__toelichting { font-size: 0.85rem; color: var(--tsn-text-muted); font-variant-numeric: tabular-nums; }
.tsn-paginering__knoppen { display: flex; gap: 0.25rem; align-items: center; }
.tsn-paginering__knop {
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.5rem;
  font-family: var(--tsn-font-kop);
  font-weight: 600;
  font-size: 0.85rem;
  background: var(--tsn-white);
  color: var(--tsn-blue);
  border: 1px solid var(--tsn-border);
  border-radius: var(--tsn-radius);
  cursor: pointer;
}
.tsn-paginering__knop:hover:not(:disabled) { background: var(--tsn-blue-light); border-color: var(--tsn-blue); }
.tsn-paginering__knop--actief { background: var(--tsn-blue); color: var(--tsn-white); border-color: var(--tsn-blue); }
.tsn-paginering__knop:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Grafiek ---------- */

.tsn-grafiek { display: block; }

.tsn-grafiek__titel { font-family: var(--tsn-font-kop); font-weight: 600; color: var(--tsn-blue); font-size: 1rem; margin: 0 0 var(--tsn-ruimte-md); }
.tsn-grafiek__vlak { display: flex; align-items: flex-end; gap: 0.75rem; height: 180px; padding-bottom: 1.6rem; position: relative; }
.tsn-grafiek__raster { position: absolute; left: 0; right: 0; top: 0; bottom: 1.6rem; pointer-events: none; }
.tsn-grafiek__rasterlijn { position: absolute; left: 0; right: 0; border-top: 1px solid var(--tsn-border); }
.tsn-grafiek__staafgroep { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; min-width: 0; }
.tsn-grafiek__staaf { width: 100%; max-width: 46px; border-radius: 3px 3px 0 0; background: var(--tsn-serie-1); position: relative; }
.tsn-grafiek__staaf--serie-2 { background: var(--tsn-serie-2); }
.tsn-grafiek__staaf--serie-3 { background: var(--tsn-serie-3); }
.tsn-grafiek__staaf--serie-4 { background: var(--tsn-serie-4); }

/* Een staaf kan ook een oordeel dragen in plaats van een reeks, net als
   .tsn-voortgang. Gebruik dit alleen als de kleur iets betekent dat de hoogte niet
   al zegt, bijvoorbeeld de richting van een verandering; niet om een reeks op te
   fleuren. Reeks en oordeel sluiten elkaar uit: kies er een. */
.tsn-grafiek__staaf--goed { background: var(--tsn-green); }
.tsn-grafiek__staaf--attentie { background: var(--tsn-warning); }
.tsn-grafiek__staaf--alert { background: var(--tsn-alert); }
.tsn-grafiek__waarde { font-size: 0.78rem; font-weight: 700; color: var(--tsn-text); font-variant-numeric: tabular-nums; margin-bottom: 0.25rem; }
.tsn-grafiek__aslabel { position: absolute; bottom: -1.4rem; font-size: 0.75rem; color: var(--tsn-text-muted); white-space: nowrap; }
.tsn-grafiek__legenda { display: flex; flex-wrap: wrap; gap: var(--tsn-ruimte-md); margin-top: var(--tsn-ruimte-md); font-size: 0.82rem; color: var(--tsn-text-muted); }
.tsn-grafiek__legenda-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.tsn-grafiek__legenda-vlak { width: 0.75rem; height: 0.75rem; border-radius: 2px; flex: none; }

/* ---------- Tijdlijn ---------- */

/* Een reeks fasen op een doorlopende lijn: een plan of traject dat over maanden of
   kwartalen loopt. Bedoeld voor een notitie, een plan of een dashboard waar iemand in
   één blik moet zien waar we staan en wat eraan komt. Niet voor een activiteitenlog of
   een geschiedenis - daar is een gewone lijst duidelijker en korter.

   Markeer precies één fase met `--nu`. Wat achter ons ligt krijgt `--klaar`, de rest
   blijft neutraal. Zet de stand er altijd ook in tekst bij (de periode zelf, of een
   `tsn-label`), want kleur alleen is voor een deel van de lezers geen informatie.

   Het is een `<ol>`: de volgorde is de inhoud, niet de opmaak. Onder 640 px kantelt de
   tijdlijn naar verticaal, want drie of vier kolommen naast elkaar zijn op een telefoon
   onleesbaar. */
.tsn-tijdlijn {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--tsn-ruimte-md);
}

/* De doorlopende lijn loopt achter de stippen door, op de hoogte van hun midden. */
.tsn-tijdlijn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.34rem;
  height: 2px;
  background: var(--tsn-border);
}

.tsn-tijdlijn__fase {
  position: relative;
  padding-top: 1.35rem;
}

.tsn-tijdlijn__stip {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--tsn-white);
  border: 2px solid var(--tsn-border);
}

.tsn-tijdlijn__periode {
  margin: 0 0 var(--tsn-ruimte-xs);
  font-family: var(--tsn-font-kop);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--tsn-text-muted);
}

.tsn-tijdlijn__lijst {
  margin: 0;
  padding-left: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tsn-text);
}

.tsn-tijdlijn__lijst li { margin-bottom: 0.1rem; }

/* Wat af is: blauw, de kleur van structuur. */
.tsn-tijdlijn__fase--klaar .tsn-tijdlijn__stip { background: var(--tsn-blue); border-color: var(--tsn-blue); }
.tsn-tijdlijn__fase--klaar .tsn-tijdlijn__periode { color: var(--tsn-blue); }

/* Waar we nu zijn: groen, het accent. Eén per tijdlijn. */
.tsn-tijdlijn__fase--nu .tsn-tijdlijn__stip { background: var(--tsn-green); border-color: var(--tsn-green); }
.tsn-tijdlijn__fase--nu .tsn-tijdlijn__periode { color: var(--tsn-green-dark); }

/* Wat nog komt houdt de open stip en de grijze periode: het is er nog niet. */

@media (max-width: 640px) {
  .tsn-tijdlijn {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: var(--tsn-ruimte-sm);
  }
  .tsn-tijdlijn::before {
    left: 0.34rem;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
  }
  .tsn-tijdlijn__fase {
    padding-top: 0;
    padding-left: 1.5rem;
    padding-bottom: var(--tsn-ruimte-xs);
  }
  .tsn-tijdlijn__fase:last-child { padding-bottom: 0; }
}

/* ---------- Voettekst ---------- */

.tsn-voettekst {
  color: var(--tsn-text-muted);
  font-size: 0.8rem;
  border-top: 1px solid var(--tsn-border);
  padding-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tsn-ruimte-sm) var(--tsn-ruimte-lg);
  justify-content: space-between;
  align-items: center;
}
.tsn-voettekst__gegevens { margin: 0; }
.tsn-voettekst__meta { margin: 0; font-variant-numeric: tabular-nums; }