/* Kinnection, bouwstenen: formulier en keuze. Prompt 05.
   Tekstveld en e-mailveld, keuzevak, schakelaar en keuzebalk, elk met hulptekst en foutmelding.
   Een veld ligt niet op tafel zoals een knop: het heeft een rand maar geen schaduw, want je typt erin, je drukt er niet op.

   Een fout toon je nooit enkel met kleur: de rand wordt dikker, er komt een teken bij en een zin die zegt hoe het wel moet.
   Terracotta is de rand en het teken, de zin zelf staat in ink.
   formulier.js kijkt een veld na wanneer je het verlaat en wanneer je verstuurt.

   Toestanden: rust, aanwijzen, focus, ingevuld, fout (aria-invalid="true"), uitgeschakeld (disabled), gekozen (checked). */

.veld{display:grid;gap:var(--gap-inline);max-width:var(--measure-text)}
.veld-label{font:var(--type-button);color:var(--op-heading)}
.veld-label small{font:var(--type-small);color:var(--op-text-muted)}
.veld-hulp{font:var(--type-small);color:var(--op-text-muted)}
.veld-invoer{width:100%;min-height:var(--control-md);padding:var(--gap-inline) var(--pad-inset);border:var(--stroke-border) solid var(--op-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text);font:var(--type-body);appearance:none;transition:background-color var(--duration-fast) var(--ease-calm),box-shadow var(--duration-fast) var(--ease-calm)}
textarea.veld-invoer{min-height:calc(var(--control-md) * 2.5);resize:vertical}
.veld-invoer::placeholder{color:var(--color-text-label);opacity:1}
@media (hover:hover),(min-width:900px){
  .veld-invoer:hover:not(:disabled){box-shadow:inset 0 0 0 var(--stroke-border) var(--color-rule)}
}
.veld-invoer.toestand-aanwijzen{box-shadow:inset 0 0 0 var(--stroke-border) var(--color-rule)}
.veld-invoer:disabled{background:var(--op-tint);border-color:var(--color-border-quiet);color:var(--op-label);cursor:not-allowed}
.op-moment .veld-invoer:disabled{border-color:var(--op-border)}
.veld-invoer[aria-invalid="true"]{border-color:var(--color-error);box-shadow:inset 0 0 0 var(--stroke-border) var(--color-error)}

/* De foutzin: verborgen tot het veld fout is */
.veld-fout{display:none;grid-template-columns:auto minmax(0,1fr);gap:var(--gap-inline);align-items:start;font:var(--type-small);font-weight:var(--weight-bold);color:var(--op-text)}
.veld-fout::before{content:"!";display:flex;align-items:center;justify-content:center;width:var(--icon-sm);height:var(--icon-sm);border-radius:var(--radius-knot);background:var(--color-error);color:var(--color-text-on-accent);font:var(--type-button-sm)}
.veld:has([aria-invalid="true"]) .veld-fout,.keuze-groep[aria-invalid="true"] .veld-fout{display:grid}
.veld:has([aria-invalid="true"]) .veld-hulp{display:none}

/* ===== Keuzevak en schakelaar =====
   De hele rij is aantikbaar en minstens een duim hoog. Het vakje is hetzelfde vakje als in de week van Joke. */
.keuzevak,.schakelaar{position:relative;display:inline-flex;align-items:center;gap:var(--gap-tight);min-height:var(--touch-min);padding-block:var(--gap-hair);cursor:pointer;color:var(--op-text);-webkit-tap-highlight-color:transparent}
.keuzevak input,.schakelaar input{flex:none;appearance:none;margin:0;cursor:pointer;border:var(--stroke-border) solid var(--op-border);background:var(--color-surface);transition:background-color var(--duration-fast) var(--ease-calm),border-color var(--duration-fast) var(--ease-calm),transform var(--duration-spring) var(--ease-spring)}
.keuzevak input{position:relative;width:var(--check-size);height:var(--check-size);border-radius:var(--radius-check)}
.keuzevak input::after{content:"";position:absolute;inset:0;background:var(--color-text-on-moment);clip-path:polygon(16% 52%,28% 40%,42% 54%,72% 22%,84% 34%,42% 78%);transform:scale(0);transition:transform var(--duration-spring) var(--ease-spring)}
.keuzevak input:checked{background:var(--color-moment);border-color:var(--color-moment)}
.op-moment .keuzevak input:checked{background:var(--color-accent);border-color:var(--color-accent)}
.op-moment .keuzevak input::after{background:var(--color-text-on-accent)}
.keuzevak input:checked::after{transform:scale(1)}
.keuzevak input:active,.keuzevak input.toestand-ingedrukt{transform:scale(0.9)}
@media (hover:hover),(min-width:900px){
  .keuzevak:hover input:not(:disabled):not(:checked),.schakelaar:hover input:not(:disabled):not(:checked){background:var(--color-ground)}
}
.keuzevak input.toestand-aanwijzen{background:var(--color-ground)}
.keuzevak input[aria-invalid="true"]{border-color:var(--color-error);box-shadow:0 0 0 var(--stroke-border) var(--color-error)}

/* Schakelaar: aan of uit, werkt meteen. Geen pilvorm: een hoekig spoor met een hoekig blokje. */
.schakelaar input{position:relative;width:calc(var(--check-size) * 2);height:calc(var(--check-size) + var(--gap-hair));border-radius:var(--radius-check)}
.schakelaar input::after{content:"";position:absolute;top:50%;left:var(--gap-hair);width:calc(var(--check-size) - var(--gap-inline));height:calc(var(--check-size) - var(--gap-inline));border-radius:var(--radius-knot);background:var(--color-moment);translate:0 -50%;transition:translate var(--duration-spring) var(--ease-spring),background-color var(--duration-fast) var(--ease-calm)}
.schakelaar input:checked{background:var(--color-moment);border-color:var(--color-moment)}
.op-moment .schakelaar input:checked{border-color:var(--op-border)}
.schakelaar input:checked::after{translate:calc(var(--check-size) - var(--gap-hair)) -50%;background:var(--color-accent)}

.keuzevak:has(input:disabled),.schakelaar:has(input:disabled){cursor:not-allowed;color:var(--op-label)}
.keuzevak input:disabled,.schakelaar input:disabled{cursor:not-allowed;background:var(--op-tint);border-color:var(--color-border-quiet)}
.op-moment .keuzevak input:disabled,.op-moment .schakelaar input:disabled{border-color:var(--op-border)}
.keuzevak input:disabled::after{background:var(--color-text-label)}
.schakelaar input:disabled::after{background:var(--color-border-quiet)}

.keuze-groep{display:grid;gap:var(--gap-hair);border:0;min-width:0}
.keuze-groep legend{margin-bottom:var(--gap-inline);font:var(--type-button);color:var(--op-heading)}
.keuze-groep .veld-fout,.keuze-groep .veld-hulp{margin-top:var(--gap-inline)}

/* ===== Keuzebalk: twee tot vier opties waarvan er altijd één gekozen is =====
   Echte keuzerondjes onder de motorkap: pijltjes wisselen, Tab gaat erin en eruit. */
.keuzebalk{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--gap-hair);padding:var(--gap-hair);border:var(--stroke-border) solid var(--op-border);border-radius:var(--radius-control);background:var(--op-quiet);min-width:0}
.keuzebalk legend{float:left;width:100%}
.keuzebalk label{position:relative;display:flex;cursor:pointer;-webkit-tap-highlight-color:transparent}
.keuzebalk input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.keuzebalk span{display:flex;flex:1;align-items:center;justify-content:center;gap:var(--gap-inline);min-height:var(--touch-min);padding-inline:var(--pad-control-sm);border-radius:var(--radius-check);color:var(--op-quiet-text);font:var(--type-button-sm);text-align:center;transition:background-color var(--duration-fast) var(--ease-calm),color var(--duration-fast) var(--ease-calm),transform var(--duration-instant) var(--ease-calm)}
@media (hover:hover),(min-width:900px){
  .keuzebalk label:hover input:not(:checked):not(:disabled) + span{background:var(--op-tint)}
}
.keuzebalk span.toestand-aanwijzen{background:var(--op-tint)}
.keuzebalk input:active + span{transform:scale(0.96)}
.keuzebalk input:checked + span{background:var(--op-action);color:var(--op-action-text)}
.keuzebalk input:focus-visible + span{outline:var(--stroke-focus) solid var(--op-focus);outline-offset:var(--stroke-focus)}
.keuzebalk input:disabled{cursor:not-allowed}
.keuzebalk input:disabled + span{color:var(--op-label)}
.keuzebalk input:disabled:checked + span{background:var(--op-tint);color:var(--op-label)}
.keuzebalk-breed{display:grid;width:100%}

/* De gekozen optie is een blokje dat naar zijn plek schuift en daar even doorveert, in plaats van een kleur die verspringt.
   Werkt met twee tot vier opties. Een browser die :has() niet kent, toont gewoon de gekleurde optie hierboven. */
@supports selector(:has(*)){
  .keuzebalk{--i:0;--n:2;position:relative}
  .keuzebalk:has(label:nth-of-type(3)){--n:3}
  .keuzebalk:has(label:nth-of-type(4)){--n:4}
  .keuzebalk:has(label:nth-of-type(2) input:checked){--i:1}
  .keuzebalk:has(label:nth-of-type(3) input:checked){--i:2}
  .keuzebalk:has(label:nth-of-type(4) input:checked){--i:3}
  .keuzebalk::before{content:"";position:absolute;top:var(--gap-hair);bottom:var(--gap-hair);left:var(--gap-hair);width:calc((100% - var(--gap-hair) * (var(--n) + 1)) / var(--n));border-radius:var(--radius-check);background:var(--op-action);translate:calc((100% + var(--gap-hair)) * var(--i)) 0;transition:translate var(--duration-spring) var(--ease-spring),scale var(--duration-instant) var(--ease-calm)}
  .keuzebalk:has(input:active)::before{scale:0.94 0.88}
  .keuzebalk:has(input:checked:disabled)::before{background:var(--op-tint)}
  .keuzebalk input:checked + span,.keuzebalk input:disabled:checked + span{background:transparent}
  .keuzebalk span{scale:0.96;transition:color var(--duration-fast) var(--ease-calm),scale var(--duration-spring) var(--ease-spring),background-color var(--duration-fast) var(--ease-calm)}
  .keuzebalk input:checked + span{scale:1}
}