/* Kinnection, bouwstenen: de checklist die meeloopt. Prompt 05.
   Vier stappen die ertoe doen. Ze zegt altijd wat de volgende stap is en brengt je er met één tik naartoe.
   Gsm en tablet: een balk onderaan, bij de duim. Scherm: een kaart rechtsboven. Het gedrag staat in checklist.js.

   Zet de checklist in een <div class="checklist-anker"> meteen na de kop, dan loopt ze mee. Zonder anker staat ze gewoon in de pagina.
   Het vlak is ink, het enige zwevende vlak van de site. De focusrand is hier terracotta.

   Toestanden: rust, lijst open (aria-expanded="true"), een stap afgevinkt (.vol), net afgevinkt (.net), alles klaar (.klaar). */

.checklist{--op-focus:var(--color-focus-on-float);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;border-radius:var(--radius-card);background:var(--color-float);color:var(--color-text-on-moment);box-shadow:var(--shadow-float);font:var(--type-small)}
.checklist-knop{display:flex;align-items:center;gap:var(--gap-inline);min-height:var(--touch-min);padding:var(--gap-inline) var(--gap-inline) var(--gap-inline) var(--gap-tight);border-radius:var(--radius-card) 0 0 var(--radius-card);color:inherit;font:var(--type-button-sm);-webkit-tap-highlight-color:transparent}
.checklist-woord,.checklist-knop .icoon{display:none}
.checklist-knop .icoon{transition:transform var(--duration-fast) var(--ease-calm)}
.checklist-knop[aria-expanded="true"] .icoon{transform:rotate(180deg)}
@media (hover:hover),(min-width:900px){
  .checklist-knop:hover{background:var(--color-rule-on-moment)}
}
.checklist-knop:active{background:var(--color-rule-on-moment)}

.checklist-vakjes{display:flex;gap:var(--gap-hair)}
.checklist-vakjes i{position:relative;width:var(--icon-sm);height:var(--icon-sm);border:var(--stroke-border) solid var(--color-border-on-moment);border-radius:var(--radius-knot);transition:background-color var(--duration-fast) var(--ease-calm),border-color var(--duration-fast) var(--ease-calm),transform var(--duration-spring) var(--ease-spring)}
.checklist-vakjes i::after,.checklist-lijst li::after{content:"";position:absolute;inset:0;background:var(--color-text-on-accent);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)}
.checklist-vakjes i.vol{background:var(--color-accent);border-color:var(--color-accent)}
.checklist-vakjes i.vol::after{transform:scale(1)}
.checklist-vakjes i.net{transform:scale(1.4) rotate(calc(var(--tilt-enter) * -1))}

/* De volgende stap: het lichte vlak in de balk, en het enige waar je echt op moet tikken */
.checklist-volgende{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 var(--gap-inline);min-height:var(--touch-min);margin:var(--gap-inline) var(--gap-inline) var(--gap-inline) 0;padding:var(--gap-inline) var(--gap-tight);border-radius:var(--radius-control);background:var(--color-ground);color:var(--color-heading);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform var(--duration-instant) var(--ease-calm)}
.checklist-volgende span{grid-column:1;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-label)}
.checklist-volgende b{grid-column:1;font:var(--type-button-sm)}
.checklist-volgende .icoon{grid-column:2;grid-row:1 / 3;transition:transform var(--duration-fast) var(--ease-calm)}
@media (hover:hover),(min-width:900px){
  .checklist-volgende:hover .icoon{transform:translateY(var(--gap-hair))}
}
.checklist-volgende:active{transform:scale(0.98)}
.checklist.klaar .checklist-volgende{background:var(--color-accent);color:var(--color-text-on-accent)}
.checklist.klaar .checklist-volgende span{color:var(--color-text-on-accent)}
.checklist.klaar .checklist-volgende .icoon{display:none}

/* De lijst met de vier stappen: klapt open boven de balk */
.checklist-lijst{grid-column:1 / -1;grid-row:1;padding:var(--gap-inline) var(--pad-inset) 0}
.checklist-lijst li{position:relative;padding:var(--gap-tight) 0 var(--gap-tight) calc(var(--icon-sm) + var(--gap-tight));border-bottom:var(--stroke-rule) solid var(--color-rule-on-moment);color:var(--color-text-on-moment-muted);font-weight:var(--weight-bold)}
.checklist-lijst li::before{content:"";position:absolute;left:0;top:var(--gap-tight);width:var(--icon-sm);height:var(--icon-sm);border:var(--stroke-border) solid var(--color-border-on-moment);border-radius:var(--radius-knot)}
.checklist-lijst li::after{inset:var(--gap-tight) auto auto 0;width:var(--icon-sm);height:var(--icon-sm)}
.checklist-lijst li.vol{color:var(--color-text-on-moment)}
.checklist-lijst li.vol::before{background:var(--color-accent);border-color:var(--color-accent)}
.checklist-lijst li.vol::after{transform:scale(1)}

/* Meelopen op gsm en tablet: vast onderaan */
.checklist-anker .checklist{position:fixed;z-index:var(--layer-float);left:var(--gap-tight);right:var(--gap-tight);bottom:var(--gap-tight)}

/* Scherm: een kaart van vaste breedte */
@media (min-width:900px){
  .checklist{display:block;width:var(--size-float)}
  .checklist-knop{width:100%;padding-inline:var(--pad-inset);border-radius:var(--radius-card) var(--radius-card) 0 0}
  .checklist-woord,.checklist-knop .icoon{display:block}
  .checklist-knop b{margin-left:auto}
  .checklist-volgende{margin:0 var(--gap-inline) var(--gap-inline)}
  .checklist-lijst{padding:0 var(--pad-inset) var(--gap-inline)}
  .checklist-lijst li{border-bottom:0;border-top:var(--stroke-rule) solid var(--color-rule-on-moment)}
  .checklist-anker{position:sticky;top:var(--gap-tight);z-index:var(--layer-float);max-width:var(--page-max);height:0;margin-inline:auto}
  .checklist-anker .checklist{position:absolute;left:auto;bottom:auto;right:var(--gap-element);top:0}
}