/* ============================================================
   Planningsdemo — onderdelenlaag
   Bovenop page.css. Alleen tokens, geen losse kleurwaarden: het
   palet is de meetlat (scripts/controleer.mjs let erop).
   ============================================================ */

/* --- Paginakop --- */
.mp-kop { background: var(--surface-card); border-bottom: 1px solid var(--border-hairline); }
.mp-kop .container { padding: 48px 32px 48px; }
.mp-kop h1 {
  margin: 12px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.03em;
  color: var(--text-strong);
}
.mp-kop p.intro { margin: 16px 0 0; max-width: 66ch; font-size: var(--text-md); line-height: 1.6; color: var(--text-body); }

/* --- Uitleg op de homepage --- */
.uitleg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.uitleg-grid .card h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text-strong); }
.uitleg-grid .card p { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--text-body); }

/* --- Velden --- */
.veld {
  width: 100%; min-height: 44px; padding: 12px 12px;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-strong);
  background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.veld--kies { width: auto; min-width: 210px; }

/* --- De weekpagina --- */
.wk { padding: 32px 0 80px; }
.wk__balk {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--border-hairline);
}
.wk__nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wk__titel {
  margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--text-strong); letter-spacing: -0.01em; min-width: 15ch;
}
.wk__kiezerlabel {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.teller {
  margin: 0; padding: 8px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  background: var(--surface-sunken); border: 1px solid var(--border-soft); color: var(--text-body);
}
.wk__acties { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; }
.wk__melding {
  margin: 16px 0 0; padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--accent-quiet); border: 1px solid var(--accent-300);
  font-size: var(--text-sm); color: var(--accent-800);
}

/* --- Meldingenpaneel: het waarom, in volle zinnen --- */
.paneel { margin: 16px 0 0; padding: 16px 20px; border-radius: var(--radius-md); border: 1px solid var(--border-soft); background: var(--surface-card); }
.paneel--conflict { background: var(--status-danger-bg); border-color: var(--status-danger); }
.paneel--rustig { background: var(--accent-quiet); border-color: var(--accent-300); }
.paneel__kop {
  margin: 0 0 4px; font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.paneel--conflict .paneel__kop { color: var(--status-danger); }
.paneel--rustig .paneel__kop { color: var(--accent-800); }
.paneel__tekst { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--text-body); }
.meldingen { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.melding {
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--surface-card); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--status-danger);
}
.melding--letop { border-left-color: var(--status-reserved); }
.melding__tekst { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--text-strong); }
.melding__voet { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; }
.melding__week {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}

/* --- Het raster --- */
.raster-omhulsel { margin: 16px 0 0; overflow-x: auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--surface-card); }
.raster { width: 100%; min-width: 940px; border-collapse: separate; border-spacing: 0; }
.raster caption {
  text-align: left; padding: 16px 16px; font-family: var(--font-sans);
  font-size: var(--text-sm); color: var(--text-body); border-bottom: 1px solid var(--border-hairline);
}
.raster th, .raster td { border-bottom: 1px solid var(--border-hairline); border-right: 1px solid var(--border-hairline); vertical-align: top; }
.raster th:last-child, .raster td:last-child { border-right: 0; }
.raster tbody tr:last-child th, .raster tbody tr:last-child td { border-bottom: 1px solid var(--border-strong); }
/* Bewust niet plakkend: de kopbalk van de site plakt al bovenaan, en twee
   plakkende lagen schuiven over elkaar heen. Het raster is acht rijen hoog. */
.raster thead th {
  padding: 12px 12px; text-align: left; background: var(--surface-sunken);
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--text-strong);
}
.raster__dag { text-transform: uppercase; letter-spacing: 0.1em; }
.raster__datum { font-weight: 400; color: var(--text-muted); }
.raster__hoek { min-width: 240px; }
.raster__rijkop {
  padding: 12px 12px; text-align: left; background: var(--surface-card);
  position: sticky; left: 0; z-index: 1; min-width: 240px; max-width: 240px;
  border-right: 1px solid var(--border-strong);
}
.raster__project { display: block; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--text-strong); line-height: 1.25; }
.raster__meta { display: block; margin-top: 3px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 400; color: var(--text-muted); }
.raster__cel { padding: 4px; }
.raster thead th:first-child { background: var(--surface-sunken); }

/* --- Eén cel --- */
.cel {
  display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 62px;
  padding: 8px 8px; text-align: left; cursor: pointer;
  background: var(--surface-page); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  font-family: var(--font-sans); color: var(--text-body);
}
.cel:hover { border-color: var(--text-muted); background: var(--surface-card); }
.cel--leeg {
  align-items: center; justify-content: center; background: transparent;
  border-style: dashed; border-color: var(--border-strong); color: var(--text-faint);
}
.cel--leeg:hover { border-style: solid; color: var(--text-body); }
.cel__plus { font-size: 20px; line-height: 1; font-weight: 400; }
.cel--conflict { background: var(--status-danger-bg); border-color: var(--status-danger); }
.cel--reeks { border-left: 3px solid var(--accent); }
.cel--afgeweken { border-left: 3px dashed var(--accent); }
.cel__conflict {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--status-danger);
}
.cel__uitroep {
  display: inline-grid; place-content: center; width: 15px; height: 15px; flex: none;
  border-radius: 50%; background: var(--status-danger); color: var(--text-inverse);
  font-size: 10px; font-weight: 700;
}
.cel__ploeg { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); border: 1px solid var(--border-soft);
  font-size: 11.5px; color: var(--text-body); white-space: nowrap;
}
.chip--meer { background: transparent; border-style: dashed; color: var(--text-muted); }
.cel__voet { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.cel__bus { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); }
.cel__bus--geen { font-weight: 400; font-style: italic; letter-spacing: 0; }
.cel__vlag {
  padding: 1px 8px; border-radius: var(--radius-sm);
  background: var(--accent-quiet); color: var(--accent-800);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.cel__notitie { font-size: 11.5px; font-style: italic; color: var(--text-muted); }

/* --- Capaciteit in koppen: het getal en het woord dragen de betekenis,
       de kleur bevestigt alleen. --- */
.raster tfoot th, .raster tfoot td { background: var(--surface-sunken); border-bottom: 0; }
.raster__rijkop--voet { background: var(--surface-sunken); }
.raster__cap { padding: 12px 12px; }
.cap__cijfers { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-strong); }
.cap__woord { display: block; margin-top: 1px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.cap__balk { display: block; height: 5px; margin-top: 8px; border-radius: var(--radius-pill); background: var(--stone-300); overflow: hidden; }
.cap__vul { display: block; height: 100%; background: var(--accent); }
.raster__cap--vol .cap__woord { color: var(--status-reserved); }
.raster__cap--vol .cap__vul { background: var(--status-reserved); }
.raster__cap--tekort .cap__woord { color: var(--status-danger); }
.raster__cap--tekort .cap__vul { background: var(--status-danger); }

/* --- Celbewerker --- */
.dialoog {
  padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-card); color: var(--text-body);
  width: min(880px, calc(100vw - 32px)); max-height: min(86vh, 760px);
}
.dialoog::backdrop { background: rgba(28, 28, 26, 0.45); }
.bewerker { display: flex; flex-direction: column; max-height: min(86vh, 760px); }
.bewerker__kop { padding: 24px 24px 16px; border-bottom: 1px solid var(--border-hairline); }
.bewerker__eyebrow {
  margin: 0; font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-accent);
}
.bewerker__kop h2 { margin: 8px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.02em; }
.bewerker__meta { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); }
.bewerker__body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; padding: 24px 24px; overflow-y: auto; }
.bewerker__kolom { display: grid; gap: 16px; align-content: start; }
.bewerker__label {
  display: block; margin: 0 0 8px; font-family: var(--font-sans); font-size: 11px;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.groep { margin: 0; padding: 0; border: 0; }
.groep legend {
  padding: 0 0 8px; font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.keuzes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.keuze__label {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm);
}
.keuze__label:hover { background: var(--surface-sunken); }
.keuze__naam { color: var(--text-strong); }
.keuze__hint {
  margin-left: auto; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.keuze--let .keuze__hint { background: var(--status-reserved-bg); color: var(--status-reserved); }
.keuze--blok .keuze__hint { background: var(--status-danger-bg); color: var(--status-danger); }
.bewerker__voet {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 24px; border-top: 1px solid var(--border-hairline); background: var(--surface-page);
}
.bewerker__voet .btn--link { margin-left: auto; }

/* --- Responsief --- */
@media (max-width: 1000px) {
  .bewerker__body { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .mp-kop .container { padding: 32px 20px 30px; }
  .uitleg-grid { grid-template-columns: 1fr; }
  .wk__balk { flex-direction: column; align-items: flex-start; }
  .wk__nav { width: 100%; }
  .veld--kies { width: 100%; min-width: 0; }
  .raster__hoek, .raster__rijkop { min-width: 170px; max-width: 170px; }
  .raster { min-width: 820px; }
}


/* ============================================================
   Uitleglaag — tekstbolletjes + wegwijzer
   Voor iemand die dit voor het eerst ziet. Staat standaard aan;
   de knop in de kopbalk zet hem uit (voor een schone opname).
   Alles staat in de pagina, niet zwevend: geen overlap, geen
   positioneringsrekenwerk, werkt op elke breedte.
   ============================================================ */

/* Uit-stand: alleen verbergen, de opmaak eronder blijft gelijk. */
.uitleg-uit .bolletje,
.uitleg-uit [data-wegwijzer] { display: none !important; }

/* --- Het bolletje zelf --- */
.bolletje {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 16px 0;
  padding: 12px 15px;
  border-radius: var(--radius-md);
  background: var(--accent-100);
  border: 1px solid var(--accent-300);
  /* Klein driehoekje linksboven, zodat het als toelichting leest en niet
     als nog een blok inhoud. */
  position: relative;
}
.bolletje::before {
  content: "";
  position: absolute; top: -6px; left: 24px;
  width: 10px; height: 10px;
  background: var(--accent-100);
  border-left: 1px solid var(--accent-300);
  border-top: 1px solid var(--accent-300);
  transform: rotate(45deg);
}
.bolletje__num {
  display: inline-grid; place-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #FFFFFF;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  margin-top: 1px;
}
.bolletje p {
  margin: 0;
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  color: var(--accent-800);
}
.bolletje p b { font-weight: 700; }

/* Variant zonder nummer, voor een losse opmerking. */
.bolletje--los .bolletje__num { display: none; }

/* Bolletje dat direct onder een kop hangt: dan hoeft de marge erboven weg. */
.bolletje--aansluitend { margin-top: 8px; }

/* --- De wegwijzer bovenaan --- */
[data-wegwijzer] {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 16px 24px;
  border-bottom: 1px solid var(--accent-300);
  background: var(--accent-100);
}
.wegwijzer__stippen { display: flex; align-items: center; gap: 8px; flex: none; }
.wegwijzer__stip {
  display: inline-grid; place-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-card); color: var(--text-muted);
  border: 1.5px solid var(--border-strong);
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
}
.wegwijzer__stip.is-nu { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
.wegwijzer__stip.is-gedaan { background: var(--accent-300); color: var(--accent-800); border-color: var(--accent-300); }
.wegwijzer__tekst { flex: 1 1 260px; min-width: 0; }
.wegwijzer__titel {
  margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--accent-800); letter-spacing: -0.01em;
}
.wegwijzer__uitleg {
  margin: 3px 0 0; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5;
  color: var(--accent-800);
}
[data-wegwijzer] .btn { flex: none; }

/* --- Schakelaar in de kopbalk: Uitleg aan / uit ---
   Bewust twee zichtbare standen met de actieve opgelicht, geen enkele knop
   die van tekst wisselt. Bij zo'n knop kun je namelijk niet zien of het
   label de huidige stand is of wat er gebeurt als je klikt. */
.schakel {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none;
  /* Ruimte plus een haarlijn, zodat de schakelaar niet als zesde navigatielink
     leest maar als een aparte bediening. */
  margin-left: 12px; padding-left: 24px;
  border-left: 1px solid var(--border-hairline);
}
.schakel__label {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
  color: var(--text-muted); white-space: nowrap;
}
.schakel__knop {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
  min-height: 44px; min-width: 48px; padding: 8px 16px;
  cursor: pointer;
  background: var(--surface-card); color: var(--text-muted);
  border: 1.5px solid var(--border-strong);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
/* De twee knoppen zitten tegen elkaar aan als één schakelaar. */
.schakel__knop:first-of-type { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.schakel__knop:last-of-type { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-left: -1.5px; }
.schakel__knop:hover { color: var(--text-strong); border-color: var(--text-muted); z-index: 1; }

/* De actieve stand: gevuld, dus in één oogopslag te zien. */
.schakel__knop.is-actief {
  background: var(--accent); color: #FFFFFF; border-color: var(--accent);
  z-index: 2;
}
.schakel__knop.is-actief:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; }

@media (max-width: 820px) {
  [data-wegwijzer] { padding: 16px 20px; gap: 16px; }
  .wegwijzer__tekst { flex-basis: 100%; }
  [data-wegwijzer] .btn { width: 100%; }
  /* Eigen regel op mobiel: met flex:none stak deze regel 0,9px buiten de
     pagina en gaf dat een horizontale schuifbalk. */
  .wegwijzer__hier { flex: 1 1 100%; }
  .bolletje { padding: 12px 16px; }
  .bolletje p { font-size: 14.5px; }
  /* In het uitklapmenu staat de schakelaar op een eigen regel. */
  .schakel { margin-top: 12px; width: 100%; margin-left: 0; padding-left: 0; border-left: 0; }
  /* min-width: 0 erbij, anders houdt de min-width van 48px de knoppen te breed
     en duwt het uitklapmenu de pagina 8px naar rechts. */
  .schakel__knop { flex: 1 1 0; min-width: 0; }
}

/* "Je bent hier" in plaats van een knop naar de pagina waar je al staat. */
.wegwijzer__hier {
  margin: 0; flex: 0 1 auto; min-width: 0;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  color: var(--accent-800);
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-card); border: 1.5px solid var(--accent-300);
}

/* Alleen voor voorleessoftware. Vervangt de oude left:-9999px-truc: die geeft
   een element een echte plek buiten het beeld, wat de paginabreedte kan
   beïnvloeden en bij focus naar links wegspringt. */
.enkel-voorlezen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Het `hidden`-attribuut moet het winnen van de display-regel hierboven —
   anders staat er een lege balk op elke pagina waar de wegwijzer nog niet
   gevuld is. (Zelfde val als een gewone [hidden] onder een display-regel.) */
[data-wegwijzer][hidden] { display: none; }

/* --- Terugkerende regel --- */
.reeks { padding: 32px 0 80px; }
.reeks__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 32px; align-items: start; margin-top: 8px; }
.reeks__zij { position: sticky; top: 96px; display: grid; gap: 12px; }
.reeksform {
  display: grid; gap: 24px; padding: 24px;
  background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
}
.reeksform__rij { display: block; }
.reeksform__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reeksform__ploegen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.reeksform__voet { padding-top: 4px; }
.dagknoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.dagknop {
  min-width: 52px; min-height: 44px; padding: 8px 12px; cursor: pointer;
  background: var(--surface-page); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--text-body);
}
.dagknop:hover { border-color: var(--text-muted); color: var(--text-strong); }
.dagknop.is-aan { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.dagknop.is-aan:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-inverse); }

.voorbeeld {
  padding: 24px 22px; background: var(--surface-card);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
}
.voorbeeld--leeg { border-style: dashed; }
.voorbeeld__aantal { margin: 8px 0 0; font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-body); }
.voorbeeld__aantal strong { font-size: var(--text-2xl); font-weight: 700; color: var(--text-strong); letter-spacing: -0.03em; }
.voorbeeld__periode { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.voorbeeld__datums { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.voorbeeld__datums span {
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); border: 1px solid var(--border-soft);
  font-family: var(--font-sans); font-size: 12px; color: var(--text-body); white-space: nowrap;
}
.voorbeeld__datums .voorbeeld__rest { background: transparent; border-style: dashed; color: var(--text-muted); }
.voorbeeld__vrij {
  margin: 16px 0 0; padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--accent-quiet); border: 1px solid var(--accent-300);
  font-size: var(--text-sm); line-height: 1.55; color: var(--accent-800);
}
.voorbeeld__let {
  margin: 16px 0 0; padding: 16px 16px; border-radius: var(--radius-sm);
  background: var(--status-danger-bg); border: 1px solid var(--status-danger);
}
.voorbeeld__letkop {
  margin: 0 0 8px; font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--status-danger);
}
.voorbeeld__lettekst { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-strong); }
.voorbeeld__letlijst { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.voorbeeld__letlijst li { font-size: var(--text-sm); line-height: 1.5; color: var(--text-strong); }

.reekslijst { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.reeksrij {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; background: var(--surface-card);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  border-left: 2px solid var(--accent);
}
.reeksrij__naam { margin: 0; font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.01em; }
.reeksrij__meta { margin: 3px 0 0; font-family: var(--font-sans); font-size: 12.5px; color: var(--text-muted); }

.wk__melding[data-soort="let"] { background: var(--status-reserved-bg); border-color: var(--status-reserved); color: var(--status-reserved); }

@media (max-width: 1000px) {
  .reeks__grid { grid-template-columns: 1fr; }
  .reeks__zij { position: static; }
  .reeksform__ploegen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .reeksform__ploegen { grid-template-columns: 1fr; }
  .reeksform__paar { grid-template-columns: 1fr; }
}

/* De standaardkleur van een aangevinkt hokje is de systeemkleur (blauw of
   oranje) en valt dus buiten het palet. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }

/* Alleen voor schermlezers: een label dat visueel niet nodig is omdat de rij
   ernaast de context al geeft. */
.u-vk {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Capaciteit --- */
.kop { padding: 32px 0 80px; }
.kop-tabel { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.kop-tabel caption { text-align: left; padding: 16px 16px; font-size: var(--text-sm); line-height: 1.55; color: var(--text-body); border-bottom: 1px solid var(--border-hairline); }
.kop-tabel th, .kop-tabel td { border-bottom: 1px solid var(--border-hairline); border-right: 1px solid var(--border-hairline); padding: 12px 12px; text-align: left; vertical-align: top; }
.kop-tabel th:last-child, .kop-tabel td:last-child { border-right: 0; }
.kop-tabel tbody tr:last-child th, .kop-tabel tbody tr:last-child td { border-bottom: 0; }
.kop-tabel thead th { background: var(--surface-sunken); font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.1em; }
.kop-week { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--text-strong); min-width: 130px; }
.kop-cel__cijfers { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-strong); }
.kop-cel__woord { display: block; margin-top: 2px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.kop-cel--vol .kop-cel__woord { color: var(--status-reserved); }
.kop-cel--tekort { background: var(--status-danger-bg); }
.kop-cel--tekort .kop-cel__woord { color: var(--status-danger); }

.verlofgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; }
.verlofweek { padding: 16px 16px; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); }
.verlofweek__kop { margin: 0 0 8px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.verlofweek__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.verlofweek__lijst li { font-size: var(--text-sm); line-height: 1.5; color: var(--text-body); }
.verlofweek__lijst strong { color: var(--text-strong); }

/* --- Projecten --- */
.pro { padding: 32px 0 80px; }
.projectlijst { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.projectrij {
  display: grid; grid-template-columns: 1fr auto 220px; gap: 16px; align-items: center;
  padding: 16px 18px; background: var(--surface-card);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  border-left: 3px solid var(--border-strong);
}
.projectrij--ingepland, .projectrij--in_uitvoering { border-left-color: var(--accent); }
.projectrij--planbaar { border-left-color: var(--status-reserved); }
.projectrij--afgerond { background: var(--surface-sunken); }
.projectrij__naam { margin: 0; font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.01em; }
.projectrij__meta { margin: 3px 0 0; font-family: var(--font-sans); font-size: 12.5px; color: var(--text-muted); }
.projectrij__dagen { margin: 0; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; color: var(--text-body); white-space: nowrap; }

.werklijst { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.werkitem { padding: 16px 16px; background: var(--surface-accent-tint); border: 1px solid var(--accent-300); border-radius: var(--radius-md); }
.werkitem__naam { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--accent-800); letter-spacing: -0.01em; }
.werkitem__meta { margin: 3px 0 0; font-size: 12.5px; color: var(--accent-700); }

@media (max-width: 1000px) {
  .verlofgrid, .werklijst { grid-template-columns: 1fr 1fr; }
  .projectrij { grid-template-columns: 1fr auto; }
  .projectrij__status { grid-column: 1 / -1; }
  .projectrij__status .veld--kies { width: 100%; }
}
@media (max-width: 820px) {
  .verlofgrid, .werklijst { grid-template-columns: 1fr; }
  .kop-tabel { display: block; overflow-x: auto; }
}

.s-head--los { margin-top: 48px; }

/* --- Mobiel: de week als vijf dagen --- */
.dagen { display: none; margin: 16px 0 0; }
.dagkiezer { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.dagblok { padding: 16px 16px; margin-bottom: 12px; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); }
.dagblok__kop { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.01em; }
.dagblok__cap { margin: 4px 0 0; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.dagblok__cap--vol { color: var(--status-reserved); }
.dagblok__cap--tekort { color: var(--status-danger); }
.dagkaarten, .daglegen { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.dagkaart__naam { margin: 0 0 8px; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--text-strong); }
.dagkaart--niets { font-size: var(--text-sm); color: var(--text-muted); }
.dagrest { margin-top: 16px; }
.dagrest summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--text-accent); }
.dagleeg { display: grid; grid-template-columns: 1fr 72px; gap: 12px; align-items: center; }
.dagleeg__naam { font-size: 13px; color: var(--text-body); }
.dagleeg .cel { min-height: 44px; }

/* Onder 900px doen we de matrix niet na: vijf dagen onder elkaar met dezelfde
   knoppen. Een raster van acht rijen bij vijf kolommen op 390px levert cellen
   van zestig pixels op, en dat is slechter dan het niet nadoen. */
@media (max-width: 900px) {
  .raster-omhulsel { display: none; }
  .dagen { display: block; }
}

/* Tikdoelen: een tekstknop en een voetlink kwamen op 24 en 31 pixels uit, en
   dat is te klein voor een duim. De vorm blijft (het lijkt een link), de
   aanraakoppervlakte wordt 44. */
.btn--link.btn--sm, .btn--link { min-height: 44px; padding: 12px 4px; }
.foot-link { padding: 12px 0; margin-bottom: 0; }
.foot-link--inline { padding: 0; min-height: 0; }

/* In de afsluitende band staan kaarten; die lezen links uitgelijnd. */
.cta .uitleg-grid { text-align: left; }
.cta .uitleg-grid .card p:last-child { margin-top: 12px; }

/* De hero heeft hier geen beeld naast de tekst: geen foto's in deze demo, en een
   nagemaakt schermpje naast het echte scherm is dubbelop. Dus één kolom met een
   leesbare regellengte, in plaats van een halve kolom die leeg blijft. */
.hero .container { grid-template-columns: 1fr; }
.hero h1 { max-width: 22ch; }
.hero p.lead { max-width: 62ch; }

/* De tweede helft van de kop op een eigen regel: anders bleef "op" aan het
   einde van de eerste regel hangen. */
.hero h1 .accent { display: block; }

/* Op 320 schoof /terugkerend.html 16 px zijwaarts (27-09, WCAG 1.4.10): de kaart met het
   formulier werd zo breed als zijn breedste onderdeel, de keuzelijst met "Onderhoudsronde
   Bedrijvenpark Noord" en de knop op één regel. Onder 340 breed volgt de kaart het scherm,
   krimpt de keuzelijst mee en mag de knop over twee regels; daarboven past alles al. */
@media (max-width: 339px) {
  .reeks__grid, .reeksform { grid-template-columns: minmax(0, 1fr); }
  .reeksform .btn { white-space: normal; }
}