/**
 * Een complimentje in je inbox.
 *
 * Alleen waarden uit het ontwerpsysteem: de vijf kleuren, de negen ruimtestappen
 * en de drie hoeken. Er staat hier geen enkele losse hex en geen enkele losse
 * pixelmaat voor ruimte.
 *
 * Twee dingen die de vorm bepalen:
 *
 * - Geen kaart om het formulier heen. Het staat op de witte grond van de pagina,
 *   net als de rest; een omlijnd blok zou er een aanmeldbox van maken en dat is
 *   precies de toon die deze pagina niet wil.
 * - Alles wat je aanraakt is minstens 44 pixels hoog, en er staat geen tekst
 *   onder 15 pixels. Ook de kleine regel onder de knop niet, en ook de voet van
 *   de mail niet: wie wil stoppen mag dat kunnen lezen.
 *
 * @package complimentje-bridge
 */

/* ==========================================================================
 * De pagina
 * ========================================================================== */

/* Twee klassen, want .wrap uit style.css zet 1200 en staat later in de rij.
   Met één klasse verliest deze regel en staat het formulier over de volle
   breedte, en dan is één veld met één knop opeens een strook van twaalfhonderd
   pixels. */
.wrap.inbox-wrap{
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}

.inbox-klaar .wrap{ max-width:560px; }

.inbox-uitleg{
  margin:0 0 var(--s4);
  font-size:var(--fs-lead);
  line-height:1.6;
  color:var(--kleur-soft);
}

.inbox-melding{
  margin:var(--s4) auto 0;
  max-width:560px;
  padding:var(--s4);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-vlak);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--kleur-ink);
  background:var(--kleur-grond);
}

.inbox-melding--fout{
  border-color:var(--kleur-rood);
  color:var(--kleur-rood);
}

.inbox-terug{
  margin:var(--s6) 0 0;
  font-size:var(--fs-body);
}

/* ==========================================================================
 * Het voorbeeld van de mail
 *
 * Geen schermafdruk maar hetzelfde kaartje dat de mail toont, met dezelfde
 * tekening en dezelfde serif. Zo kan het voorbeeld nooit uit de pas gaan lopen
 * met wat er werkelijk verstuurd wordt.
 * ========================================================================== */

.inbox-voorbeeld{
  margin:0 0 var(--s7);
}

.inbox-voorbeeld__kaart{
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-vlak);
  background:var(--kleur-grond);
  padding:var(--s6) var(--s5) var(--s7);
  text-align:center;
}

.inbox-voorbeeld__beeld{
  margin:0 auto var(--s4);
  max-width:240px;
}

/* Vast beeldvak, net als in de maker: zo is de kaart even hoog welke tekening
   er ook in staat, en springt de pagina niet bij het laden. */
.inbox-voorbeeld__tekening{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
}

.inbox-voorbeeld__zin{
  margin:0;
  font-family:'CmplStatig',Georgia,'Times New Roman',serif;
  font-size:var(--fs-kop);
  line-height:1.5;
  color:var(--kleur-ink);
}

.inbox-voorbeeld__merk{
  margin:var(--s3) 0 0;
  text-align:center;
  font-size:var(--fs-body);
  color:var(--kleur-soft);
}

/* Het beeldmerk, niet het lijn-hartje uit de iconenset: gevuld en rood. */
.inbox-voorbeeld__hart{ color:var(--kleur-rood); }

/* ==========================================================================
 * Het formulier
 * ========================================================================== */

.inbox-form{ margin:0 0 var(--s7); }

.inbox-form__fout{
  margin:0 0 var(--s4);
  padding:var(--s3) var(--s4);
  border:var(--lijn-dikte) solid var(--kleur-rood);
  border-radius:var(--r-vlak);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--kleur-rood);
}

/*
 * Het veld draagt bewust geen .field-klasse.
 *
 * De site heeft er een, en die zet het label op 12 pixels grijs. De opdracht
 * vraagt 16, en het ontwerpsysteem laat niets onder 15 toe, dus dat label kon
 * zo niet blijven. Er met een zwaardere selector overheen schrijven kon ook,
 * maar dan staan er twee waarheden voor hetzelfde label en wint degene die het
 * laatst is aangepast. Zonder die klasse is er maar één.
 */
.inbox-form__veld{ margin:0 0 var(--s5); }

.inbox-form__veld label{
  display:block;
  margin:0 0 var(--s2);
  font-size:1rem;
  font-weight:600;
  color:var(--kleur-ink);
}

/* Het label staat erboven en niet in het veld: een tekst die verdwijnt zodra je
   begint te typen is geen label. */
.inbox-form__veld input{
  display:block;
  width:100%;
  min-height:44px;
  padding:var(--s3) var(--s4);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-vlak);
  background:var(--kleur-grond);
  color:var(--kleur-ink);
  line-height:1.4;
}
/*
 * De lettermaat van het veld staat er bewust niet bij. systeem.css zet elke
 * invoer op --fs-body, en dat is de maat die het contactformulier en de kassa
 * ook hebben. Hem hier op 16 zetten kan (het zou de zoomsprong van Safari op de
 * telefoon schelen) maar dan is dit als enige veld op de site anders, en dat is
 * een besluit over alle formulieren tegelijk. Zie het verslag.
 */

.inbox-form__veld input:focus-visible{
  outline:2px solid var(--kleur-rood);
  outline-offset:2px;
}

/* ---- De drie pillen -------------------------------------------------------
   Radio's, geen knoppen met aria-pressed. Ze zien eruit als pillen, maar de
   pijltjestoetsen werken, ze worden voorgelezen als "één van drie", en er is
   geen regel JavaScript voor nodig. De radio zelf staat niet op display:none,
   want dan is hij ook voor het toetsenbord weg; hij staat achter zijn label. */

.inbox-form__hoevaak{
  margin:0 0 var(--s5);
  padding:0;
  border:0;
}

.inbox-form__hoevaak legend{
  padding:0;
  margin:0 0 var(--s2);
  font-size:1rem;
  font-weight:600;
  color:var(--kleur-ink);
}

.inbox-pillen{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  position:relative;
}

.inbox-pil__radio{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  pointer-events:none;
}

.inbox-pil{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:var(--s3) var(--s5);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-rond);
  background:var(--kleur-grond);
  color:var(--kleur-ink);
  font-size:var(--fs-body);
  font-weight:500;
  cursor:pointer;
}

.inbox-pil__radio:checked + .inbox-pil{
  border-color:var(--kleur-rood);
  color:var(--kleur-rood);
  font-weight:600;
}

/* De focusring hangt aan het label, want de radio zelf is onzichtbaar. Zonder
   dit is met het toetsenbord niet te zien waar je bent. */
.inbox-pil__radio:focus-visible + .inbox-pil{
  outline:2px solid var(--kleur-rood);
  outline-offset:2px;
}

@media (hover:hover) and (pointer:fine){
  .inbox-pil:hover{ border-color:var(--kleur-rood); }
}

/* Op een telefoon passen de drie naast elkaar zodra de zijkanten wat smaller
   zijn. Onder elkaar zouden ze lezen als drie losse keuzes in plaats van als
   één rij waaruit je er een kiest. */
@media (max-width:430px){
  .inbox-pillen{ gap:var(--s2); }
  .inbox-pil{ padding:var(--s3); }
}

.inbox-form__actie{ margin:0; }

/* Eén volle knop. Op de telefoon over de hele breedte, want daar is een knop
   die de rand haalt makkelijker te raken dan een knop die halverwege stopt. */
.inbox-form__knop{
  min-height:48px;
  width:100%;
}

@media (min-width:600px){
  .inbox-form__knop{ width:auto; }
}

.inbox-form__klein{
  margin:var(--s3) 0 0;
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--kleur-soft);
}

/* ==========================================================================
 * De belofte
 *
 * Vier regels, zonder opsommingstekens: het is geen lijst met voordelen maar
 * vier zinnen die samen één ding zeggen.
 * ========================================================================== */

.inbox-belofte{
  margin:0;
  padding:var(--s5) 0 0;
  border-top:var(--lijn-dikte) solid var(--kleur-lijn);
  list-style:none;
}

.inbox-belofte li{
  margin:0 0 var(--s2);
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--kleur-soft);
}

.inbox-belofte li:last-child{ margin-bottom:0; }

/* ==========================================================================
 * De voorkeurenpagina
 * ========================================================================== */

.inbox-blok{
  margin:var(--s6) 0 0;
  padding:var(--s5) 0 0;
  border-top:var(--lijn-dikte) solid var(--kleur-lijn);
}

.inbox-blok__kop{
  margin:0 0 var(--s2);
  font-size:var(--fs-lead);
}

.inbox-blok__uitleg{
  margin:0 0 var(--s4);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--kleur-soft);
}

.inbox-blok__knoppen{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
}

/* De omlijnde knop. Het systeem heeft er geen, en die van de teams-landing zit
   in een eigen naamruimte; hem daar vandaan lenen zou betekenen dat een
   wijziging aan die pagina deze knop meeneemt. */
.inbox-knop-rand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:var(--s3) var(--s5);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-rond);
  background:var(--kleur-grond);
  color:var(--kleur-ink);
  font-size:var(--fs-body);
  font-weight:600;
  cursor:pointer;
}

@media (hover:hover) and (pointer:fine){
  .inbox-knop-rand:hover{ border-color:var(--kleur-rood); color:var(--kleur-rood); }
}

.inbox-knop-rand:focus-visible{
  outline:2px solid var(--kleur-rood);
  outline-offset:2px;
}

/* Het blok waar de link uit de mail naar wijst. Geen kleurvlak, alleen een lijn
   die iets zwaarder is: genoeg om je oog te vangen, te weinig om te dringen. */
.inbox-blok--aangewezen{ border-top-color:var(--kleur-rood); }

/* ==========================================================================
 * Het blok op het eindscherm
 *
 * Eén regel, één veld, één knop. De deelknop blijft de enige volle knop op dat
 * stuk, dus deze knop krijgt hier een rand in plaats van een vulling.
 * ========================================================================== */


.inbox-klaar__kop{
  margin:0 0 var(--s2);
  font-size:var(--fs-lead);
}

.inbox-klaar__uitleg{
  margin:0 0 var(--s5);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--kleur-soft);
}

.inbox-klaar__gelukt{
  margin:0;
  padding:var(--s4);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-vlak);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--kleur-ink);
}

/* Op het eindscherm staat het veld naast de knop zodra er ruimte is, zodat het
   blok niet meer dan één extra scherm kost. */
.inbox-form--kort{ margin-bottom:0; }
.inbox-form--kort .inbox-form__veld{ margin-bottom:var(--s4); }
.inbox-form--kort .inbox-form__hoevaak{ margin-bottom:var(--s4); }

/* De knop is de gevulde.
 *
 * Hij stond wit met een rand, terwijl hij de enige actie in dit blok is. De
 * regel van het systeem is één gevulde knop per scherm, en in de voettekst is
 * dit die ene: erboven staan alleen links. Een omlijnde knop naast niets zegt
 * "ondergeschikt aan" zonder dat er iets is om ondergeschikt aan te zijn. */
.inbox-form--kort .inbox-form__knop{
  background:var(--kleur-rood);
  border:var(--lijn-dikte) solid transparent;
  color:var(--kleur-grond);
  font-weight:600;
}

@media (hover:hover) and (pointer:fine){
  .inbox-form--kort .inbox-form__knop:hover{
    background:var(--knop-vol-hover,var(--kleur-rood));
    border-color:transparent;
    color:var(--kleur-grond);
  }
}

/* ==========================================================================
 * Twee plekken erbij, 6 september 2026
 *
 * Het formulier stond alleen op de eigen pagina en op het eindscherm. Het
 * eindscherm is het sterkste moment dat er is — iemand heeft net iets moois
 * gemaakt — maar wie er nooit komt, ziet het nooit. Vandaar twee plekken erbij:
 * onder een inspiratie-artikel, en in de voettekst.
 *
 * Allebei mager gehouden. De volle knop blijft van het eindscherm; hier staat
 * de omlijnde variant, en die komt uit .inbox-form--kort hierboven.
 * ========================================================================== */

/* --- in de voettekst, boven de kolommen ---------------------------------- */

.inbox-voet{
  max-width:1120px;
  margin:0 auto;
  padding:var(--s7) var(--s6);
  border-bottom:var(--lijn-dikte) solid var(--kleur-lijn);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,560px);
  gap:var(--s7);
  align-items:center;
}

.inbox-voet__kop{
  /* Een echte kop, geen dikgedrukte regel: dit blok staat op elke pagina en
     is de enige plek waar de site om een adres vraagt. */
  margin:0 0 var(--s2);
  font-size:var(--fs-titel);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--kleur-ink);
}

.inbox-voet__uitleg{
  margin:0;
  max-width:40ch;
  font-size:var(--fs-body);
  color:var(--kleur-soft);
}

/* De frequentiekeuze is hier te veel. Wie in de voettekst inschrijft kiest
   niets; hij krijgt de standaard, en kan dat op de voorkeurenpagina wijzigen.
   De radio's blijven wel in de HTML staan, want zonder een aangevinkte waarde
   zou het formulier een lege frequentie versturen. Buiten de flow, zodat ze
   ook geen plek innemen in het raster hieronder. */
.inbox-voet .inbox-form__hoevaak{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/*
 * Veld en knop op één regel.
 *
 * Ze stonden onder elkaar, met het label er nog boven: vier dingen op een rij
 * naast twee regels tekst, en dan is de rechterkant twee keer zo hoog als de
 * linker. Naast elkaar is het één handeling in plaats van een stapeltje, en de
 * band wordt de helft lager.
 *
 * De verborgen velden tellen niet mee in dit raster: `input type=hidden` staat
 * standaard op display:none en de honeypot en de frequentie staan allebei
 * buiten de flow.
 */
.inbox-voet .inbox-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s3);
  align-items:end;
  margin:0;
}

.inbox-voet .inbox-form__fout{ grid-column:1 / -1; }
.inbox-voet .inbox-form__veld{ grid-column:1; margin:0; }
.inbox-voet .inbox-form__actie{ grid-column:2; margin:0; }
.inbox-voet .inbox-form__klein{ grid-column:1 / -1; margin:0; }

/* Het label staat er sinds 11 september 2026 gewoon.
 *
 * Het was visueel verborgen met de reden "er is geen ruimte voor een regel
 * boven het veld, en het voorbeeld in het veld is er voor het oog". Twee dingen
 * klopten daar niet aan. Een voorbeeld in het veld verdwijnt zodra je begint te
 * typen, dus precies wanneer je nog wilt kunnen nakijken wat er gevraagd werd.
 * En de ruimte was er wel: dit blok staat in de voettekst met een eigen kop
 * ernaast, en die kop moest het werk van het label doen terwijl hij over het
 * blok gaat en niet over het veld.
 *
 * Eén regel van 15 px kost eenentwintig pixels. */
.inbox-voet .inbox-form__veld label{
  display:block;
  margin:0 0 var(--s2);
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--kleur-ink);
}

.inbox-voet .inbox-form__veld input::placeholder{
  color:var(--kleur-soft);
  opacity:1;
}

@media (max-width:780px){
  .inbox-voet{
    grid-template-columns:1fr;
    gap:var(--s5);
    padding:var(--s6) var(--s6);
  }

  /* Op een telefoon past een knop niet naast een veld: samen zouden ze allebei
     te smal worden om te raken. Dan weer onder elkaar, over de volle breedte. */
  .inbox-voet .inbox-form{
    grid-template-columns:1fr;
  }

  .inbox-voet .inbox-form__actie{ grid-column:1; }
}

/* --- onder een artikel ---------------------------------------------------- */

.inbox-artikel{
  margin:var(--s8) 0 0;
  padding:var(--s6);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-vlak);
  background:var(--kleur-grond);
}

.inbox-artikel__kop{
  margin:0 0 var(--s2);
  font-size:var(--fs-lead);
  color:var(--kleur-ink);
}

.inbox-artikel__uitleg{
  margin:0 0 var(--s5);
  font-size:var(--fs-body);
  color:var(--kleur-soft);
}

.inbox-artikel .inbox-form{ margin:0; }

/* De bevestiging in de voettekst: één regel, geen raster van twee kolommen. */
.inbox-voet--gelukt{
  grid-template-columns:1fr;
}

.inbox-voet__gelukt{
  margin:0;
  font-size:var(--fs-body);
  color:var(--kleur-ink);
}

/* --- de frequentie achter "Kies frequentie", 12 september 2026 ---------- */
/* Op de homepage staat het formulier als "Elke week een complimentje": de
   standaard is wekelijks en de keuzes dag, week en maand staan achter een
   regel. Ze blijven in het formulier en gaan gewoon mee; ze staan alleen niet
   open voor wie ze niet zoekt. */
.inbox-form__freq{ margin:0 0 var(--s4); }
.inbox-form__freq-knop{
  display:inline-flex; align-items:center;
  min-height:44px;
  cursor:pointer; list-style:none;
  font-size:var(--fs-label); font-weight:500;
  color:var(--kleur-ink);
  text-decoration:underline; text-underline-offset:3px;
}
.inbox-form__freq-knop::-webkit-details-marker{ display:none; }
.inbox-form__freq-knop:focus-visible{ outline:2px solid var(--kleur-rood); outline-offset:2px; }
.inbox-form__freq[open] .inbox-form__hoevaak{ margin:var(--s2) 0 0; }