/* Kinnection, bouwstenen: knoppen. Prompt 05.
   Hoofdknop, primair, omlijnd, klein, icoonknop en tekstlink. Een knop ligt op tafel: rand, harde schaduw, en hij zakt in wanneer je drukt.
   Er is bewust geen terracotta knop: principe 5 kiest tegen terracotta als knop.

   Toestanden: rust, aanwijzen (:hover), focus, ingedrukt (:active), gekozen (aria-pressed="true"),
   uitgeschakeld (disabled of aria-disabled="true"), laden (aria-busy="true").
   De klassen .toestand-... tonen een toestand zonder muis. Ze dienen enkel voor de stijlgids. */

.knop{
  --knop-vlak:var(--op-action);--knop-tekst:var(--op-action-text);--knop-rand:var(--op-action);--knop-schaduw:var(--op-action-shadow);--knop-zak:var(--press-control);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-inline);
  min-height:var(--control-md);padding:var(--gap-inline) var(--pad-control);
  border:var(--stroke-border) solid var(--knop-rand);border-radius:var(--radius-control);
  background:var(--knop-vlak);color:var(--knop-tekst);box-shadow:var(--knop-schaduw);
  font:var(--type-button);letter-spacing:var(--tracking-normal);text-align:center;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none;
  transition:transform var(--duration-instant) var(--ease-calm),box-shadow var(--duration-instant) var(--ease-calm),background-color var(--duration-fast) var(--ease-calm);
}
.knop-omlijnd{--knop-vlak:var(--op-quiet);--knop-tekst:var(--op-quiet-text);--knop-rand:var(--op-border);--knop-schaduw:var(--op-quiet-shadow)}
.knop-klein{--knop-schaduw:var(--op-action-shadow-sm);--knop-zak:var(--press-control-sm);min-height:var(--control-sm);padding-inline:var(--pad-control-sm);font:var(--type-button-sm)}
.knop-klein.knop-omlijnd{--knop-schaduw:var(--op-quiet-shadow-sm)}
.knop-breed{display:flex;width:100%}

/* De hoofdknop: de ene actie waar de pagina naartoe leidt, de kennismaking. Hooguit één keer per scherm.
   Hij heeft een eigen vorm: links ligt een groot leeg vakje scheef op de knop, half over de rand, zoals de vakjes van de week van Joke.
   De kennismaking is het laatste vakje van de pagina, en dat moet nog afgevinkt worden.
   Opbouw: <a class="knop knop-hoofd"><i class="knop-vakje" aria-hidden="true"></i>Plan een kennismaking</a>

   Vier bewegingen:
   - hij komt in beeld (hoofdknop.js): het vakje valt op de knop en blijft scheef liggen.
   - uit zichzelf, tot iemand klikt: om de paar tellen wipt het vakje even op en toont het een bleek vinkje. Dezelfde uitnodiging
     als bij de dagen van Joke. Chalo koos hier op 20-09-2026 bewust voor: het is de enige bouwsteen die blijft uitnodigen.
   - je wijst hem aan of komt erop met het toetsenbord: het vakje legt zich recht, kleurt terracotta en het vinkje tekent zich.
   - je drukt: de knop zakt in en het vakje blijft afgevinkt (hoofdknop.js zet .gedaan). */
.knop-hoofd{--knop-schaduw:var(--shadow-control-accent);--uitsteek:var(--gap-tight);min-height:var(--control-lg);gap:var(--gap-tight);margin-left:var(--uitsteek);padding-left:0}
.knop-vakje{position:relative;flex:none;width:var(--control-sm);height:var(--control-sm);margin-left:calc(var(--uitsteek) * -1);border:var(--stroke-border) solid var(--color-border);border-radius:var(--radius-check);background:var(--color-surface);box-shadow:var(--op-action-shadow-sm);rotate:calc(var(--tilt-enter) * -1);transition:rotate var(--duration-spring) var(--ease-spring),scale var(--duration-spring) var(--ease-spring),translate var(--duration-enter) var(--ease-spring),opacity var(--duration-fast) var(--ease-calm),background-color var(--duration-fast) var(--ease-calm),border-color var(--duration-fast) var(--ease-calm)}
.knop-vakje::before,.knop-vakje::after{content:"";position:absolute;inset:0;clip-path:polygon(16% 52%,28% 40%,42% 54%,72% 22%,84% 34%,42% 78%)}
.knop-vakje::before{background:var(--color-border-quiet);opacity:0}
.knop-vakje::after{background:var(--color-text-on-accent);transform:scale(0);transition:transform var(--duration-spring) var(--ease-spring)}

/* Uit zichzelf, tot de eerste klik */
.knop-hoofd:not(.gedaan):not(.wacht):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([class*="toestand-"]) .knop-vakje{animation:hoofd-wip calc(var(--duration-invite) * 1.5) var(--ease-spring) infinite}
.knop-hoofd:not(.gedaan):not(.wacht):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([class*="toestand-"]) .knop-vakje::before{animation:hoofd-bleek calc(var(--duration-invite) * 1.5) var(--ease-calm) infinite}
@keyframes hoofd-wip{0%,62%,100%{translate:0 0;scale:1}72%{translate:0 calc(var(--gap-inline) * -1);scale:1.1}82%{translate:0 0;scale:0.97}90%{scale:1}}
@keyframes hoofd-bleek{0%,60%,100%{opacity:0}72%,88%{opacity:1}}

/* Aanwijzen, focus, gedaan: het vakje ligt recht en is afgevinkt */
@media (hover:hover),(min-width:900px){
  .knop-hoofd:hover .knop-vakje{animation:none;rotate:0deg;scale:1.12;background:var(--color-accent);border-color:var(--color-accent)}
  .knop-hoofd:hover .knop-vakje::before{animation:none;opacity:0}
  .knop-hoofd:hover .knop-vakje::after{transform:scale(1)}
}
.knop-hoofd:focus-visible .knop-vakje,.knop-hoofd.toestand-aanwijzen .knop-vakje,.knop-hoofd.toestand-focus .knop-vakje,.knop-hoofd.toestand-ingedrukt .knop-vakje,.knop-hoofd.gedaan .knop-vakje,.knop-hoofd:active .knop-vakje{animation:none;rotate:0deg;scale:1.12;background:var(--color-accent);border-color:var(--color-accent)}
.knop-hoofd:focus-visible .knop-vakje::before,.knop-hoofd:active .knop-vakje::before{animation:none;opacity:0}
.knop-hoofd:focus-visible .knop-vakje::after,.knop-hoofd.toestand-aanwijzen .knop-vakje::after,.knop-hoofd.toestand-focus .knop-vakje::after,.knop-hoofd.toestand-ingedrukt .knop-vakje::after,.knop-hoofd.gedaan .knop-vakje::after,.knop-hoofd:active .knop-vakje::after{transform:scale(1)}
.knop-hoofd.gedaan .knop-vakje{scale:1}
/* Ingedrukt: alles zakt samen, het vakje verliest zijn eigen schaduw en ligt plat op de knop */
.knop-hoofd:active .knop-vakje,.knop-hoofd.toestand-ingedrukt .knop-vakje{scale:1;box-shadow:none}
/* Nog niet in beeld: het vakje hangt nog boven de knop */
.knop-hoofd.wacht .knop-vakje{translate:0 -200%;rotate:-40deg;opacity:0}
.knop-hoofd:disabled .knop-vakje,.knop-hoofd[aria-disabled="true"] .knop-vakje{background:var(--op-tint);border-color:var(--color-border-quiet);box-shadow:none}
.knop.knop-hoofd::after{left:calc((var(--stroke-focus) * 2 + var(--stroke-border) + var(--uitsteek)) * -1)}

/* Focus: de rand loopt rond de knop en zijn schaduw samen, zodat het één ding blijft.
   De gewone outline blijft doorzichtig staan voor wie met hoog contrast werkt. */
.knop::after,.icoonknop::after,.dagknop::after{content:"";position:absolute;inset:calc((var(--stroke-focus) * 2 + var(--stroke-border)) * -1);bottom:calc((var(--stroke-focus) * 2 + var(--stroke-border) + var(--knop-zak)) * -1);border:var(--stroke-focus) solid var(--op-focus);border-radius:calc(var(--radius-control) + var(--stroke-focus) * 2);opacity:0;pointer-events:none}
.knop:focus-visible,.icoonknop:focus-visible,.dagknop:focus-visible,.knop.toestand-focus,.icoonknop.toestand-focus,.dagknop.toestand-focus{outline-color:transparent}
.knop:focus-visible::after,.icoonknop:focus-visible::after,.dagknop:focus-visible::after,.knop.toestand-focus::after,.icoonknop.toestand-focus::after,.dagknop.toestand-focus::after{opacity:1}
.knop:active::after,.knop[aria-pressed="true"]::after,.icoonknop:active::after,.icoonknop[aria-pressed="true"]::after,.dagknop:active::after,.icoonknop-stil::after{bottom:calc((var(--stroke-focus) * 2 + var(--stroke-border)) * -1)}

@media (hover:hover),(min-width:900px){
  .knop:hover{transform:translateY(calc(var(--lift-hover) * -1))}
}
.knop.toestand-aanwijzen{transform:translateY(calc(var(--lift-hover) * -1))}
.knop:active,.knop.toestand-ingedrukt,.knop[aria-pressed="true"]{transform:translateY(var(--knop-zak));box-shadow:none}

/* Uitgeschakeld: geen schaduw, dus niet indrukbaar. De tekst blijft leesbaar. */
.knop:disabled,.knop[aria-disabled="true"]{--knop-vlak:var(--op-tint);--knop-tekst:var(--op-label);--knop-rand:var(--color-border-quiet);box-shadow:none;transform:none;cursor:not-allowed}
.op-moment .knop:disabled,.op-moment .knop[aria-disabled="true"]{--knop-rand:var(--op-border)}

/* Laden: de knop blijft staan waar hij stond, drie knopen wippen om de beurt. Zet ook aria-busy="true". */
.knop[aria-busy="true"]{pointer-events:none;transform:translateY(var(--knop-zak));box-shadow:none}
.knop-laadt{display:none;gap:var(--gap-hair)}
.knop[aria-busy="true"] .knop-laadt{display:inline-flex}
.knop-laadt i{width:0.4em;height:0.4em;border-radius:var(--radius-knot);background:currentColor;transform:rotate(var(--knot-turn));animation:knop-wip var(--duration-story) var(--ease-spring) infinite;animation-delay:calc(var(--stagger) * var(--n,0))}
.knop-laadt i:nth-child(2){--n:2}
.knop-laadt i:nth-child(3){--n:4}
@keyframes knop-wip{0%,55%,100%{translate:0 0}25%{translate:0 -0.4em}}

/* Icoonknop: enkel een teken. Geef hem altijd een aria-label. Precies zo groot als de kleinste aanraakzone. */
.icoonknop{
  --knop-zak:var(--press-control-sm);
  position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--touch-min);height:var(--touch-min);
  border:var(--stroke-border) solid var(--op-border);border-radius:var(--radius-control);background:var(--op-quiet);color:var(--op-quiet-text);box-shadow:var(--op-quiet-shadow-sm);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--duration-instant) var(--ease-calm),box-shadow var(--duration-instant) var(--ease-calm);
}
@media (hover:hover),(min-width:900px){
  .icoonknop:hover{transform:translateY(calc(var(--lift-hover) * -1))}
}
.icoonknop.toestand-aanwijzen{transform:translateY(calc(var(--lift-hover) * -1))}
.icoonknop:active,.icoonknop.toestand-ingedrukt,.icoonknop[aria-pressed="true"]{transform:translateY(var(--knop-zak));box-shadow:none}
.icoonknop[aria-pressed="true"]{background:var(--op-action);color:var(--op-action-text);border-color:var(--op-action)}
.icoonknop:disabled,.icoonknop[aria-disabled="true"]{background:var(--op-tint);color:var(--op-label);border-color:var(--color-border-quiet);box-shadow:none;transform:none;cursor:not-allowed}
.op-moment .icoonknop:disabled{border-color:var(--op-border)}
/* Stil: zonder rand en schaduw, voor in een melding of een balk */
.icoonknop-stil{border-color:transparent;background:transparent;box-shadow:none;color:inherit}
@media (hover:hover),(min-width:900px){
  .icoonknop-stil:hover{transform:none;background:var(--op-tint)}
}
.icoonknop-stil:active{transform:none;background:var(--op-rule)}

/* Tekstlink: voor een stap die minder weegt dan een knop. Los van een zin is hij een duim hoog. */
.tekstlink{display:inline-flex;align-items:center;gap:var(--gap-inline);min-height:var(--touch-min);color:var(--op-heading);font:var(--type-button);text-decoration:underline;text-decoration-thickness:var(--stroke-rule);text-underline-offset:var(--gap-hair);text-decoration-color:var(--op-border);cursor:pointer;transition:text-underline-offset var(--duration-fast) var(--ease-calm)}
.tekstlink .icoon{transition:transform var(--duration-fast) var(--ease-calm)}
@media (hover:hover),(min-width:900px){
  .tekstlink:hover{text-decoration-thickness:var(--stroke-check);text-underline-offset:var(--gap-inline)}
  .tekstlink:hover .icoon{transform:translateX(var(--gap-hair))}
}
.tekstlink.toestand-aanwijzen{text-decoration-thickness:var(--stroke-check);text-underline-offset:var(--gap-inline)}
.tekstlink.toestand-aanwijzen .icoon{transform:translateX(var(--gap-hair))}
.tekstlink:active,.tekstlink.toestand-ingedrukt{text-underline-offset:var(--stroke-rule)}
.tekstlink[aria-disabled="true"]{color:var(--op-label);text-decoration-color:var(--op-rule);cursor:not-allowed;pointer-events:none}
/* In een lopende zin: geen eigen hoogte, enkel de streep */
p .tekstlink,li .tekstlink{display:inline;min-height:0;font:inherit;font-weight:var(--weight-bold)}

/* Twee knoppen naast elkaar */
.knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-tight) var(--gap-element)}