/* ============================================================
   Contentdemo — onderdelenlaag
   Bovenop page.css, naast visuals.css (dat gaat alleen over de
   vlakken zelf). Alleen tokens, geen losse kleurwaarden: het palet
   is de meetlat (scripts/controleer.mjs let erop). De drie
   merkkleuren zijn de enige uitzondering en staan uitsluitend als
   custom property op een omhullend element.
   ============================================================ */

/* --- 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; }


/* ============================================================
   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).
   ============================================================ */

/* 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 16px;
  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: 12px 24px; gap: 12px; }
  .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: 8px 16px; 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; }


/* ============================================================
   Het merkpaneel
   ============================================================ */

.planlaag { padding: 48px 0 64px; }
.planlaag__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; }
.planlaag__zij { position: sticky; top: 96px; display: grid; gap: 24px; }

.merkpaneel {
  padding: 24px; background: var(--surface-card);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
}
.merkpaneel__kop {
  margin: 0 0 16px; font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--text-strong);
}

.merkchips { display: grid; gap: 8px; }
.merkchip {
  display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto;
  gap: 2px 12px; align-items: center;
  min-height: 52px; padding: 12px 12px; text-align: left; cursor: pointer;
  /* Een button erft de letter niet: zonder dit staat er Arial in de chips. */
  font-family: inherit;
  background: var(--surface-card); border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text-body);
}
.merkchip:hover { border-color: var(--text-muted); }
.merkchip.is-actief { border-color: var(--accent); background: var(--accent-quiet); }
.merkchip__staal { grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--border-strong); }
.merkchip__naam { font-size: var(--text-sm); font-weight: 700; color: var(--text-strong); }
.merkchip__sector { font-size: 12px; color: var(--text-muted); }

.merkeigen { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-hairline); display: grid; gap: 12px; }
.kleurvelden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kleurveld, .naamveld { display: grid; gap: 4px; }
.kleurveld__label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.kleurveld input[type="color"] {
  width: 100%; min-height: 44px; padding: 3px; cursor: pointer; font-family: inherit;
  background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.naamveld input[type="text"] {
  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);
}

/* --- Teller + scenarioknoppen --- */

.zijblok {
  padding: 24px 22px; background: var(--surface-card);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
}
.teller { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-strong); }
.teller__bij { margin: 8px 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-body); }
/* 26px haalt de ondergrens wel, maar is op een telefoon krap. 44px kost hier
   niets en is met een duim te raken. */
.zijknoppen { display: grid; gap: 8px; margin-top: 16px; }
.zijknoppen .btn { min-height: 44px; }
.merkeigen .btn--link { min-height: 44px; }

/* ============================================================
   De maand
   ============================================================ */

.weekblok + .weekblok { margin-top: 48px; }
.weekblok__kop {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-strong);
}
.weekblok__bereik { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--text-muted); }

/* Geen align-items: start. Kaarten in één rij horen op dezelfde onderrand te
   eindigen; met verschillende tekstlengtes liep dat 42px uit elkaar. De kaart is
   een kolom met het vinkje op margin-top: auto, dus dat vinkje zakt mee. */
.kaartrij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.kaart {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
}
.kaart.is-goed { border-color: var(--accent-300); }
.kaart__beeld { border-bottom: 1px solid var(--border-hairline); }
.kaart__tekst { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 16px 12px; }
.kaart__meta { margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-muted); }
.kaart__kop { margin: 0 0 8px; font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--text-strong); }
.kaart__sub { margin: 0 0 12px; font-size: var(--text-sm); line-height: 1.5; color: var(--text-body); }
.kaart__pijler { margin: 0 0 16px; font-size: 12px; color: var(--text-muted); }
.kaart__pijlerlabel { font-weight: 500; color: var(--text-body); }

/* Het vinkje. Een echt label om een echte checkbox: aanklikbaar over de hele
   breedte, en de staat komt uit het element zelf en niet uit een klasse. */
.keur {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-hairline);
  cursor: pointer; font-size: var(--text-sm); color: var(--text-body);
}
/* 24px is de ondergrens uit WCAG 2.2. Het label eromheen is 44px hoog en
   schakelt mee, dus het echte doel is groter — maar het vinkje zelf moet die
   grens ook alleen halen. */
.keur input { width: 24px; height: 24px; flex: none; accent-color: var(--accent); cursor: pointer; }
.keur__tekst { font-weight: 500; }
.kaart.is-goed .keur__tekst { color: var(--accent-800); }

/* ============================================================
   De sjablonenwand
   ============================================================ */

.wand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wandvak { margin: 0; }
.wandvak__beeld { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.wandvak__naam { margin: 12px 0 0; font-size: var(--text-sm); font-weight: 500; color: var(--text-body); }

/* ============================================================
   Focus — zichtbaar op alles wat je kunt bedienen
   ============================================================ */

.merkchip:focus-visible,
.keur input:focus-visible,
.kleurveld input:focus-visible,
.naamveld input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ============================================================
   Responsief
   ============================================================ */

@media (max-width: 1080px) {
  .kaartrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* Het paneel gaat boven de posts staan en scrollt mee: een kolom naast een
     kolom werkt niet op een telefoon. */
  .planlaag__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .planlaag__zij { position: static; top: auto; }
  .uitleg-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .kaartrij, .wand { grid-template-columns: minmax(0, 1fr); }
  .mp-kop .container { padding: 32px 24px 24px; }
  .planlaag { padding: 24px 0 48px; }
}

/* --- Schrijfpagina --------------------------------------------------
   Het formulier waarmee je één opdracht geeft, en het concept dat eruit
   komt. Het concept staat bewust in een eigen kader met een band erboven:
   je moet in één blik zien dat dit nog niet in het plan staat. */

.schrijfvak {
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
}
/* Zelfde vorm als de velden in het merkpaneel: dezelfde hoogte, dezelfde rand,
   dezelfde radius. Twee soorten invoervelden op één pagina leest als twee
   verschillende schermen. */
.schrijfvak .label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  color: var(--text-muted);
}
.schrijfvak .input {
  width: 100%; min-height: 44px; padding: 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);
}
.schrijfvak .input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.soortrij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 620px) { .soortrij { grid-template-columns: 1fr; } }

.soortknop {
  display: block; width: 100%; text-align: left;
  padding: 12px 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.soortknop:hover { border-color: var(--border-strong); }
.soortknop.is-actief { border-color: var(--accent); background: var(--accent-100); }
.soortknop__label {
  display: block;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700;
  color: var(--text-strong);
}
.soortknop__voorbeeld {
  display: block; margin-top: 2px;
  font-size: 12px; color: var(--text-muted);
}

.concept {
  margin-top: 24px;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.concept__band {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--accent-100);
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  color: var(--accent-800);
}
.concept__stip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.concept__body {
  display: grid; grid-template-columns: 240px 1fr; gap: 20px;
  padding: 20px 16px;
}
@media (max-width: 760px) { .concept__body { grid-template-columns: 1fr; } }
.concept__label {
  margin: 0 0 6px;
  font-size: 12px; color: var(--text-muted);
}
.concept__titel {
  margin: 0;
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 700;
  color: var(--text-strong);
}
.concept__sub { margin: 6px 0 0; font-size: var(--text-sm); color: var(--text-body); }
.concept__bij {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--border-hairline);
  font-size: 13.5px; line-height: 1.6; color: var(--text-body);
}
.concept__acties {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 0 16px 16px;
}
.concept__melding {
  margin: 0; padding: 0 16px 16px;
  font-size: 13.5px; color: var(--text-body);
}
.concept__melding:empty { padding: 0; }