/* Vertelmijeens: de lade, en de kleine bewegingen die bij ajax horen.

   De lade schuift rechts over de pagina heen: een formulier of een detail
   openen hoeft geen paginawissel te zijn. Alles hieronder gebruikt de
   rol-tokens uit tokens.css, dus de lade voelt in de mentormodule licht en
   op een leerlingscherm donker, zonder een eigen kleur mee te brengen.

   Zonder JavaScript bestaat de lade niet: de knoppen die hem openen zijn
   gewone links naar een gewone pagina. Daarom staat hij standaard uit. */

/* ==================================================================
   1. De lade
   ================================================================== */

.lade {
  position: fixed;
  inset: 0;
  z-index: var(--vme-z-overlay);
  /* Uit: vangt geen klik en staat niet in de leesvolgorde. */
  visibility: hidden;
  pointer-events: none;
}

.lade--open {
  visibility: visible;
  pointer-events: auto;
}

/* Het scherm erachter. Dempt de pagina zonder hem te verbergen, zodat
   duidelijk blijft waar je vandaan komt. Geen blur, geen gloed. */
.lade__scherm {
  position: absolute;
  inset: 0;
  background: rgba(7, 13, 23, 0.44);
  opacity: 0;
  transition: opacity var(--vme-t-base) var(--vme-ease);
}

.lade--open .lade__scherm {
  opacity: 1;
}

.lade__paneel {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(34rem, 100%);
  max-width: 100%;
  background: var(--vme-surface);
  color: var(--vme-text);
  box-shadow: var(--vme-shadow-xl);
  transform: translateX(100%);
  transition: transform var(--vme-t-base) var(--vme-ease-uit);
}

.lade--open .lade__paneel {
  transform: translateX(0);
}

/* Op een breed scherm ligt de lade als een blad tegen de rand aan; de
   linkerhoeken rond, de rechter tegen het venster. Mobiel vult hij alles,
   en dan hoort er geen hoek meer bij. */
@media (min-width: 40rem) {
  .lade__paneel {
    border-radius: var(--vme-radius-lg) 0 0 var(--vme-radius-lg);
  }
}

/* De lade is een kolom van drie: een kop die blijft staan, een lijf dat
   scrollt, en onderin de knoppen. Kop en knoppen krimpen nooit, alleen het
   lijf geeft mee. Daardoor past de inhoud altijd, hoe lang een vraag ook is,
   en staan de knoppen altijd in beeld. */
.lade__kop {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--vme-space-3);
  padding: var(--vme-space-5) var(--vme-space-5) var(--vme-space-4);
  border-bottom: var(--vme-border-width) solid var(--vme-border);
}

.lade__titel {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--vme-text-xl);
  font-weight: var(--vme-weight-semibold);
  line-height: var(--vme-leading-snug);
  letter-spacing: var(--vme-tracking-tight);
}

.lade__sluit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vme-tap-target);
  height: var(--vme-tap-target);
  margin: calc(var(--vme-space-2) * -1) calc(var(--vme-space-2) * -1) 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--vme-radius-sm);
  background: transparent;
  color: var(--vme-text-muted);
  cursor: pointer;
  transition: background var(--vme-t-fast) var(--vme-ease),
    color var(--vme-t-fast) var(--vme-ease);
}

.lade__sluit:hover {
  background: var(--vme-surface-sunken);
  color: var(--vme-text);
}

.lade__lijf {
  flex: 1 1 auto;
  /* Zonder min-height weigert een flex-item te krimpen onder zijn inhoud, en
     dan groeit het paneel het venster uit in plaats van te scrollen. Dit is
     de regel die "de inhoud past altijd" waarmaakt. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: var(--vme-space-5);
  /* Geen ruimte onderaan: daar komt de knoppenbalk, die zijn eigen ruimte
     meebrengt en tegen de onderrand aan moet sluiten. */
  padding-bottom: 0;
}

.lade__inhoud {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Het opgehaalde fragment is zelf de kolom die meegroeit, zodat de
   knoppenbalk erin naar onderen geduwd kan worden. */
.lade__inhoud > form,
.lade__inhoud > .stack {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* De knoppenbalk, en dit is de kern van het probleem dat hij oplost.

   Twee dingen tegelijk: bij weinig inhoud duwt margin-top:auto hem naar de
   onderrand, zodat hij niet halverwege het paneel blijft zweven, en bij veel
   inhoud houdt position:sticky hem in beeld terwijl de rest eronderdoor
   scrollt. De negatieve zijmarges trekken hem tot tegen de randen, anders
   schuift er tekst zichtbaar langs hem heen door de padding van het lijf. */
.lade__lijf .form-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: auto;
  margin-inline: calc(var(--vme-space-5) * -1);
  padding: var(--vme-space-4) var(--vme-space-5);
  border-top: var(--vme-border-width) solid var(--vme-border);
  background: var(--vme-surface);
}

/* De lade heeft zijn eigen kaart niet nodig: het paneel ís de kaart. Een
   formulier dat ook als losse pagina bestaat brengt zijn .card wel mee, en
   die mag hier zijn rand en schaduw kwijt.

   Let op het kind: de opgehaalde inhoud komt in .lade__inhoud terecht, niet
   rechtstreeks in .lade__lijf. Met > .lade__lijf matchte deze regel dus
   nooit, hield het vraagformulier zijn eigen padding bovenop die van het
   lijf, en stak de sticky knoppenbalk met zijn negatieve zijmarges door de
   kaartrand heen. */
.lade__inhoud > .card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Terwijl de inhoud onderweg is. Drie stippen, nooit een tolletje. */
.lade__wachten {
  display: flex;
  align-items: center;
  gap: var(--vme-space-3);
  color: var(--vme-text-muted);
  font-size: var(--vme-text-sm);
}

/* Het lichaam van de pagina staat stil zolang de lade openstaat, anders
   scrollt de achtergrond mee onder je vinger door. */
body.heeft-lade {
  overflow: hidden;
}

/* ==================================================================
   2. Wat er gebeurt als ajax iets verandert

   Een rij die verschijnt of van status wisselt licht even op. Kort en
   klein: het wijst je aan waar je moet kijken, meer niet.
   ================================================================== */

@keyframes vme-oplicht {
  0% {
    background-color: var(--vme-accent-soft);
  }
  100% {
    background-color: transparent;
  }
}

.u-oplicht {
  animation: vme-oplicht 1.2s var(--vme-ease-uit) both;
}

@keyframes vme-invoegen {
  0% {
    opacity: 0;
    transform: translateY(-0.4rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.u-invoegen {
  animation: vme-invoegen var(--vme-t-slow) var(--vme-ease-uit) both;
}

/* Verdwijnen doet een rij zelf, vlak voordat hij uit de DOM gaat. */
.u-weg {
  opacity: 0;
  transform: translateY(-0.3rem);
  transition: opacity var(--vme-t-base) var(--vme-ease-in),
    transform var(--vme-t-base) var(--vme-ease-in);
}

/* Een knop die onderweg is. De knop die je indrukte is de plek waar je het
   ziet, dus daar en nergens anders. */
[data-bezig] {
  opacity: 0.6;
  pointer-events: none;
}

/* ==================================================================
   3. Het bevestigingsmoment op het leerlingscherm

   Een antwoord versturen zonder paginawissel mag niet stilletjes gebeuren:
   er moet iets terugkomen dat zegt "hij is binnen". Een vinkje dat opkomt
   in de accentkleur, en de kaart die één keer meeveert.
   ================================================================== */

.bevestiging {
  display: flex;
  align-items: center;
  gap: var(--vme-space-3);
  padding: var(--vme-space-4);
  border-radius: var(--vme-card-radius);
  background: var(--vme-accent-soft);
  color: var(--vme-text);
  font-weight: var(--vme-weight-medium);
  animation: vme-invoegen var(--vme-t-base) var(--vme-ease-uit) both;
}

.bevestiging__vink {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--vme-radius-pill);
  background: var(--vme-accent);
  color: var(--vme-accent-contrast);
  animation: vme-pop var(--vme-t-pop) var(--vme-ease-bounce) both;
  animation-delay: 60ms;
}

.bevestiging__vink svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* De kaart waarin het antwoord zat veert één keer mee. */
@keyframes vme-veer {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.015);
  }
  100% {
    transform: scale(1);
  }
}

.u-veer {
  animation: vme-veer var(--vme-t-pop) var(--vme-ease-veer) both;
}

/* ==================================================================
   4. Wie minder beweging wil, krijgt minder beweging.

   Alles wat sfeer maakt gaat uit; alles wat iets uitlegt blijft staan. De
   lade schuift niet meer maar staat er gewoon, en het vinkje verschijnt
   zonder te poppen.
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .lade__scherm,
  .lade__paneel,
  .u-weg {
    transition: none;
  }

  .u-oplicht,
  .u-invoegen,
  .u-veer,
  .bevestiging,
  .bevestiging__vink {
    animation: none;
  }

  .lade__paneel {
    transform: translateX(0);
  }

  .lade:not(.lade--open) .lade__paneel {
    transform: translateX(100%);
  }
}