/* ============================================================
   Password Protection Overlay — Schoolinformatie Vakmanstad
   ============================================================
   Uses design tokens from tokens.css. Dit is het eerste scherm dat
   elke gebruiker ziet — de kaart, koppen en knop volgen dezelfde
   merkregels als de rest van de app: Quicksand voor koppen/UI-
   controls, Yrsa (serif) voor lopende tekst, één accentkleur,
   pill-knop, zichtbare focus-ring.
   ============================================================ */

/* De inlogpoort is een donker merkmoment (--vms-black), zoals het
   loginprototype: wit woordmerk, de hero-dark-ruitencyclus, witte kaart.
   Verticaal centreren gaat via de auto-marges op het eerste/laatste kind
   (niet justify-content): past de kolom niet (laag scherm), dan vallen de
   auto-marges weg en blijft de bovenkant bereikbaar via scrollen. */
.pw-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--vms-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  padding: 1.5rem;
  overflow-y: auto;
  transition: opacity 0.3s ease;
}

html.pw-auth-pending body > *:not(.pw-overlay) {
  display: none !important;
}

.pw-overlay.is-exiting {
  opacity: 0;
}

/* De gedeelde kaart. LET OP: brief.html, confirm.html en login-link.html
   lenen deze klassen voor hun eigen kaart en zetten er tekst in die tegen de
   PAGINAkleur is gekalibreerd (--text-muted en co). Wijzig hier dus niets aan
   de achtergrond: de donkere 7a-behandeling van de inlogpoort hangt onderaan
   dit bestand aan `.pw-overlay--gate`. */
.pw-card {
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  /* Zwaarder dan --shadow-md: op het zwarte vlak leest een lichte
     schaduw niet — de kaart moet er echt op liggen. */
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.35);
  padding: 2.5rem 2rem 2rem;
  max-width: 380px;
  width: 90%;
  text-align: center;
  flex: none;
  margin-bottom: auto;
}

.pw-logo {
  display: block;
  height: 40px;
  flex: none;
  opacity: 0.95;
  margin-top: auto;
}

/* Merk-animatie boven de kaart: "Nachbild / L'Écart"
   (js/nachbild-ecart.js, viewBox 1000×300 — incl. uitloopruimte voor de
   splitsing, dus de host krijgt exact die verhouding). */
.pw-ruiten {
  display: block;
  flex: none;
  /* 100% = binnen de overlay-padding; vw zou de padding negeren en een
     horizontale scrollbalk veroorzaken. */
  width: min(620px, 100%);
  aspect-ratio: 1000 / 300;
}

/* Compacter op lagere schermen (kleine telefoon), zodat de hele kolom
   zonder scrollen past; op écht lage schermen (liggende telefoon) wint
   het formulier van de animatie. */
@media (max-height: 700px) {
  .pw-overlay {
    gap: 1rem;
  }

  .pw-logo {
    height: 32px;
  }

  .pw-ruiten {
    width: min(300px, 100%);
  }

  .pw-card {
    padding-top: 2rem;
  }
}

@media (max-height: 620px) {
  .pw-ruiten {
    display: none;
  }
}

.pw-title {
  font-size: 1.5rem;
  color: var(--text);
  margin: 0 0 0.4rem;
}

.pw-subtitle {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}

.pw-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.pw-input:focus {
  border-color: var(--vms-ink-900);
  box-shadow: var(--ring-accent);
}

/* Stacked login fields (email + password): gap between the two inputs */
.pw-input + .pw-input {
  margin-top: 0.6rem;
}

.pw-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem;
  margin-top: 0.75rem;
  font-size: 0.95rem;
  font-weight: var(--fw-subhead);
  color: var(--vms-white);
  background: var(--vms-ink-900);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-soft);
}

.pw-btn:hover {
  background: var(--vms-ink-700);
  transform: translateY(var(--hover-lift));
}

.pw-btn:active {
  transform: scale(var(--press-scale));
}

.pw-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-accent);
}

.pw-btn:disabled {
  color: var(--vms-ink-700);
  background: var(--vms-ink-100);
  border-color: var(--vms-ink-200);
  cursor: not-allowed;
  transform: none;
}

.pw-error {
  display: none;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--danger);
}

.pw-error.is-visible {
  display: block;
}

/* Magic-link / wachtwoord wisselweergaven. Sinds DEC-041 zijn dit echte
   <form>-elementen (Enter + wachtwoordmanagers), dus de UA-ondermarge weg. */
.pw-view {
  display: none;
  margin: 0;
}

.pw-view.is-visible {
  display: block;
}

/* Bevestiging na het aanvragen van een inloglink */
.pw-note {
  display: none;
  margin-top: 0.75rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.86rem;
  color: var(--success);
  background: var(--success-light);
  border-radius: var(--radius-sm);
  text-align: left;
}

.pw-note.is-visible {
  display: block;
}

.pw-hidden {
  display: none !important;
}

/* "Inloggen met wachtwoord" / "Inloggen met e-maillink" schakelaars */
.pw-alt {
  margin-top: 1.1rem;
  font-size: 0.85rem;
}

.pw-altlink {
  padding: 0;
  background: none;
  border: none;
  font-size: 0.85rem;
  font-weight: var(--fw-subhead);
  color: var(--vms-ink-900);
  cursor: pointer;
  text-decoration: none;
}

.pw-altlink:hover {
  text-decoration: underline;
}

.pw-footer {
  margin-top: 1.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Shake animation on wrong password */
@keyframes pw-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-6px);
  }
  80% {
    transform: translateX(6px);
  }
}

.pw-shake {
  animation: pw-shake 0.4s ease;
}

/* Ingelogde app-chrome --------------------------------------------------- */

/* ============================================================
   Accountmenu — de avatar met je initialen (rechtsboven)
   ============================================================
   Vervangt de twee zwevende knoppen "Wachtwoord" en "Uitloggen".
   Vormtaal: radius 0, afschuining linksboven/rechtsonder via
   clip-path, rand als box-shadow inset (een border zou door de
   clip-path worden weggesneden). Print-verborgen. */

/* Vast rechtsboven, niet in de balk: de avatar komt uit de inloggate en
   staat óók op Start, waar geen app-balk is. Hij wordt wél in die balk
   gecentreerd — `app-nav.css` houdt er rechts `--app-bar-slot` voor vrij,
   en de tokens staan in `tokens.css`. Raak je die hoogte aan, dan hoort
   deze centrering mee. */
.vms-account-wrap {
  position: fixed;
  top: calc((var(--app-bar-h, 71.6px) - var(--app-bar-avatar, 44px)) / 2);
  right: var(--space-5, 1.5rem);
  z-index: 400;
}

#vms-avatar {
  display: grid;
  place-items: center;
  width: var(--app-bar-avatar, 44px);
  height: var(--app-bar-avatar, 44px);
  padding: 0;
  color: var(--vms-white, #fff);
  font: 700 0.8rem/1 var(--font-heading, Quicksand, sans-serif);
  letter-spacing: 0.02em;
  cursor: pointer;
  background: var(--vms-black, #1d1d1b);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 1.5px var(--vms-black, #1d1d1b);
  clip-path: polygon(
    var(--vt-schuin-s, 9px) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s, 9px)),
    calc(100% - var(--vt-schuin-s, 9px)) 100%,
    0 100%,
    0 var(--vt-schuin-s, 9px)
  );
}

/* Start heeft een zwarte kop; daar zou een zwarte ruit-avatar oplossen in
   de achtergrond en alleen de initialen laten staan. Eén witte haarlijn
   binnen de vorm maakt hem weer een knop. `clip-path` snijdt een schaduw
   búiten het element weg, dus die lijn moet inset zijn. */
.index-page #vms-avatar {
  box-shadow: inset 0 0 0 1.5px var(--vms-white, #fff);
}

#vms-avatar:hover {
  background: var(--vms-ink-700, #3c3c3a);
}

#vms-avatar:focus-visible {
  outline: 2px solid var(--vms-black, #1d1d1b);
  outline-offset: 2px;
}

.vms-account-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 208px;
  padding: 6px;
  background: var(--vms-white, #fff);
  box-shadow: inset 0 0 0 1.5px var(--vms-black, #1d1d1b);
  clip-path: polygon(
    var(--vt-schuin-m, 11px) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-m, 11px)),
    calc(100% - var(--vt-schuin-m, 11px)) 100%,
    0 100%,
    0 var(--vt-schuin-m, 11px)
  );
}

.vms-account-menu[hidden] {
  display: none;
}

.vms-account-mail {
  padding: 8px 10px 6px;
  overflow: hidden;
  color: var(--vms-ink-500, #6e6e6b);
  font: 400 0.72rem/1.3 var(--font-label, Oswald, sans-serif);
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.vms-account-item {
  padding: 11px 10px;
  color: var(--vms-black, #1d1d1b);
  font: 600 0.85rem/1 var(--font-heading, Quicksand, sans-serif);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 0;
}

.vms-account-item:hover {
  color: var(--vms-white, #fff);
  background: var(--vms-black, #1d1d1b);
}

.vms-account-item:focus-visible {
  outline: 2px solid var(--vms-black, #1d1d1b);
  outline-offset: -2px;
}

.pwm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.18s;
  backdrop-filter: blur(4px);
}

.pwm-overlay.show {
  opacity: 1;
}

.pwm-card {
  width: 100%;
  max-width: 400px;
  padding: 1.5rem;
  background: var(--card, #fff);
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-lg, 0);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.25));
}

.pwm-title {
  margin: 0 0 1rem;
  color: var(--text, #222);
  font: 600 1.2rem/1.2 var(--font-heading, Quicksand, sans-serif);
}

.pwm-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  margin: 0 0 0.7rem;
  color: var(--text, #222);
  font: 400 0.95rem var(--font-body, inherit);
  background: var(--input-bg, #fff);
  border: 1.5px solid var(--border, #ddd);
  /* was var(--radius-md, 0) — dat token bestaat nergens, dus deze regel
     viel als enige van de overlay terug op de hardcoded 10px. */
  border-radius: var(--radius-sm, 0);
}

.pwm-input:focus {
  border-color: var(--vms-ink-900, #59f);
  outline: none;
  box-shadow: var(--ring-accent, 0 0 0 3px rgba(90, 150, 255, 0.25));
}

.pwm-error {
  min-height: 1em;
  margin: 0.1rem 0 0.5rem;
  color: var(--danger, #c0392b);
  font-size: 0.82rem;
}

.pwm-note {
  margin: 0.1rem 0 1rem;
  color: var(--text-muted, #666);
  font-size: 0.78rem;
  line-height: 1.4;
}

.pwm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}

/* De inlogknop draagt de afschuining van de vormtaal (handoff §4.6). Twee
   gevolgen van clip-path, allebei hier opgevangen: een `border` wordt
   weggesneden — vandaar de inset box-shadow — en de outline van
   :focus-visible ook, vandaar de focusring met negatieve outline-offset. */
.pwm-btn {
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  color: var(--text, #222);
  font: 600 0.88rem var(--font-heading, Quicksand, sans-serif);
  cursor: pointer;
  background: var(--card, #fff);
  border: none;
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) var(--border, #ddd);
  border-radius: 0;
  clip-path: polygon(
    var(--vt-schuin-s, var(--vt-schuin-s, 9px)) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s, var(--vt-schuin-s, 9px))),
    calc(100% - var(--vt-schuin-s, var(--vt-schuin-s, 9px))) 100%,
    0 100%,
    0 var(--vt-schuin-s, var(--vt-schuin-s, 9px))
  );
}

.pwm-btn:focus-visible {
  outline: var(--vt-lijn-dik, 2.5px) solid
    var(--pwm-btn-focus, var(--vms-ink-900, #1d1d1b));
  outline-offset: -5px;
}

.pwm-btn.pwm-primary {
  color: var(--vms-white, #fff);
  background: var(--vms-ink-900);
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) var(--vms-ink-900);
  --pwm-btn-focus: var(--vms-white, #fff);
}

.pwm-btn:disabled {
  cursor: default;
  color: var(--vms-ink-700);
  background: var(--vms-ink-100, #ececec);
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) var(--vms-ink-200, #dcdcdc);
}

/* In-app hulp ------------------------------------------------------------ */

.vh-overlay {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.3rem;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.18s;
  backdrop-filter: blur(4px);
}

.vh-overlay.show {
  opacity: 1;
}

.vh-panel {
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  padding: 1.4rem 1.5rem 1.3rem;
  overflow: auto;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e2dd);
  border-radius: var(--radius, 0);
  box-shadow: var(--shadow-lg, 0 8px 40px rgba(0, 0, 0, 0.1));
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s;
}

.vh-overlay.show .vh-panel {
  transform: none;
}

.vh-head {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.vh-title {
  margin: 0;
  color: var(--text, #2c2c2c);
  font-family: var(--font-heading, 'Quicksand', sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
}

.vh-close {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-muted, #596066);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 0);
  transition:
    color var(--dur-fast, 120ms) var(--ease-soft, ease),
    background var(--dur-fast, 120ms) var(--ease-soft, ease);
}

.vh-close:hover {
  color: var(--text, #2c2c2c);
  background: var(--input-bg, #f8f8f5);
}

.vh-intro {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 1.05rem;
}

.vh-intro img {
  flex: none;
  width: 92px;
  height: 66px;
  object-fit: cover;
  border-radius: var(--radius-sm, 0);
}

.vh-intro p {
  margin: 0;
  color: var(--text-muted, #6e6e6b);
  font-family: var(--font-body, Georgia, serif);
  font-size: 0.92rem;
  line-height: 1.5;
}

.vh-steps {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.vh-step {
  display: flex;
  gap: 0.6rem;
  color: var(--text, #2c2c2c);
  font-size: 0.9rem;
  line-height: 1.5;
}

.vh-step .vh-num {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--vms-ink-900);
  font-family: var(--font-heading, 'Quicksand', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--vms-ink-100, #e4f2ff);
  border-radius: 0;
}

.vh-contact {
  padding-top: 1rem;
  margin-top: 1.2rem;
  border-top: 1px solid var(--border, #e2e2dd);
}

.vh-contact-lbl {
  margin-bottom: 0.5rem;
  color: var(--text-muted, #596066);
  font-size: 0.8rem;
}

.vh-contact-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vh-cbtn {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  color: var(--text, #2c2c2c);
  font-family: var(--font-heading, 'Quicksand', sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: var(--card, #fff);
  border: 1.5px solid var(--border, #e2e2dd);
  border-radius: var(--radius-pill, 0);
  transition:
    border-color var(--dur-fast, 120ms) var(--ease-soft, ease),
    color var(--dur-fast, 120ms) var(--ease-soft, ease);
}

.vh-cbtn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.vh-cbtn:hover {
  color: var(--vms-ink-900);
  border-color: var(--vms-ink-900, #1e96fc);
}

.vh-coach {
  position: fixed;
  inset: 0;
  z-index: 9300;
  background: rgba(0, 0, 0, 0.45);
  --vh-ring-left: 0;
  --vh-ring-top: 0;
  --vh-ring-width: 0;
  --vh-ring-height: 0;
  --vh-bubble-left: 12px;
  --vh-bubble-top: 12px;
}

.vh-ring {
  position: absolute;
  left: var(--vh-ring-left);
  top: var(--vh-ring-top);
  width: var(--vh-ring-width);
  height: var(--vh-ring-height);
  pointer-events: none;
  border: 3px solid var(--vms-ink-900, #1e96fc);
  border-radius: 0;
  box-shadow: var(--ring-accent, 0 0 0 4px rgba(30, 150, 252, 0.35));
  transition:
    left var(--dur-base, 200ms) var(--ease-soft, ease),
    top var(--dur-base, 200ms) var(--ease-soft, ease),
    width var(--dur-base, 200ms) var(--ease-soft, ease),
    height var(--dur-base, 200ms) var(--ease-soft, ease);
}

.vh-ring.is-hidden {
  display: none;
}

.vh-bubble {
  position: absolute;
  left: var(--vh-bubble-left);
  top: var(--vh-bubble-top);
  width: 280px;
  max-width: calc(100vw - 24px);
  padding: 1rem 1.1rem;
  background: var(--card, #fff);
  border-radius: var(--radius, 0);
  box-shadow: var(--shadow-lg, 0 8px 40px rgba(0, 0, 0, 0.1));
}

.vh-coach--centered .vh-bubble {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.vh-bubble h4 {
  margin: 0 0 0.3rem;
  color: var(--text, #2c2c2c);
  font-family: var(--font-heading, 'Quicksand', sans-serif);
  font-size: 1.02rem;
  font-weight: 700;
}

.vh-bubble p {
  margin: 0 0 0.9rem;
  color: var(--text-muted, #596066);
  font-size: 0.86rem;
  line-height: 1.5;
}

.vh-bubble-foot {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.vh-dots {
  color: var(--text-muted, #596066);
  font-family: var(--font-heading, 'Quicksand', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
}

.vh-bubble-actions {
  display: flex;
  gap: 0.4rem;
}

.vh-bbtn {
  min-height: 44px;
  padding: 0.45rem 0.9rem;
  color: var(--text, #2c2c2c);
  font-family: var(--font-heading, 'Quicksand', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--card, #fff);
  border: 1.5px solid var(--border, #e2e2dd);
  border-radius: var(--radius-pill, 0);
  transition:
    background var(--dur-fast, 120ms) var(--ease-soft, ease),
    border-color var(--dur-fast, 120ms) var(--ease-soft, ease);
}

.vh-bbtn.primary {
  color: var(--vms-white, #fff);
  background: var(--vms-ink-900);
  border-color: var(--vms-ink-900, #1e96fc);
}

.vh-bbtn.primary:hover {
  background: var(--vms-ink-700);
  border-color: var(--vms-ink-900);
}

.vh-bbtn.link {
  color: var(--text-muted, #596066);
  background: transparent;
  border-color: transparent;
}

/* Gedeelde dialogen/toasts ------------------------------------------------ */

.uid-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.18s;
  backdrop-filter: blur(4px);
}

.uid-overlay.show {
  opacity: 1;
}

.uid-modal {
  width: 100%;
  max-width: 440px;
  padding: 1.4rem 1.5rem 1.3rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s;
}

.uid-overlay.show .uid-modal {
  transform: none;
}

.uid-title {
  margin: 0 0 0.5rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: var(--fw-heading);
}

.uid-body {
  margin: 0 0 1.2rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.uid-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  margin: 0 0 1.2rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--input-bg, var(--card));
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}

.uid-input:focus {
  border-color: var(--vms-ink-900);
  outline: none;
  box-shadow: var(--ring-accent);
}

.uid-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}

.uid-btn {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  transition:
    background var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft);
}

.uid-btn:active {
  transform: scale(var(--press-scale));
}

.uid-btn:hover {
  color: var(--vms-ink-900);
  border-color: var(--vms-ink-900);
}

.uid-btn.uid-primary {
  color: var(--vms-white);
  background: var(--vms-ink-900);
  border-color: var(--vms-ink-900);
}

.uid-btn.uid-primary:hover {
  color: var(--vms-white);
  background: var(--vms-ink-700);
  border-color: var(--vms-ink-900);
}

.uid-btn.uid-danger {
  color: var(--vms-white);
  background: var(--danger);
  border-color: var(--danger);
}

.uid-btn.uid-danger:hover {
  color: var(--vms-white);
  background: #a5281b;
}

.uid-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  z-index: 9100;
  max-width: 90vw;
  padding: 0.8rem 1.5rem;
  color: var(--vms-white);
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 500;
  text-align: center;
  background: var(--vms-ink-900);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateX(-50%) translateY(100px);
  transition:
    opacity var(--dur-slow) var(--ease-soft),
    transform var(--dur-slow) var(--ease-out);
}

.uid-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.uid-toast.uid-danger {
  background: var(--danger);
}

@media print {
  .vms-account-wrap,
  vms-nachbild,
  .pwm-overlay,
  .vh-overlay,
  .vh-coach,
  .uid-overlay,
  .uid-toast {
    display: none !important;
  }
}

/* ============================================================
   De inlogpoort zelf — ontwerp 7a
   ============================================================
   Alles hierboven is gedeeld: brief.html, confirm.html en login-link.html
   lenen dezelfde `.pw-*`-klassen voor hún kaart en zetten er tekst in die
   tegen de paginakleur is gekalibreerd (`--text-muted` en co). Die pagina's
   houden dus de lichte kaart.

   Alleen de echte inlogpoort — `password-protect.js` zet er
   `pw-overlay--gate` op — krijgt de donkere behandeling uit ontwerp 7a:
   geen kaart, velden direct op het zwart, witte knop. Alle tekst hierbinnen
   is wit op #1d1d1b (17,4:1). Zet hier nooit `--text` of `--text-muted`:
   die zijn tegen de paginakleur gekalibreerd en halen op zwart geen AA.
   ============================================================ */

.pw-overlay--gate .pw-card {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 340px;
  width: 100%;
}

.pw-overlay--gate .pw-title {
  color: var(--vms-white);
}

.pw-overlay--gate .pw-subtitle,
.pw-overlay--gate .pw-alt {
  /* Wit op 76% = 12,1:1 op #1d1d1b. */
  color: rgb(255 255 255 / 0.76);
}

/* 52px en afgeschuind linksboven/rechtsonder. De rand is een inset
   box-shadow en geen border: de clip-path zou een border wegsnijden. */
.pw-overlay--gate .pw-input {
  min-height: 52px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) rgb(255 255 255 / 0.3);
  clip-path: polygon(
    var(--vt-schuin-m, var(--vt-schuin-m, 11px)) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-m, var(--vt-schuin-m, 11px))),
    calc(100% - var(--vt-schuin-m, var(--vt-schuin-m, 11px))) 100%,
    0 100%,
    0 var(--vt-schuin-m, var(--vt-schuin-m, 11px))
  );
  color: var(--vms-white);
  transition: box-shadow 0.2s;
}

.pw-overlay--gate .pw-input::placeholder {
  color: rgb(255 255 255 / 0.55);
}

.pw-overlay--gate .pw-input:focus {
  box-shadow: inset 0 0 0 var(--vt-lijn-dik, 2.5px) var(--vms-white);
}

/* Witte knop: op dit donkere vlak is wit de enige kleur die als primaire
   actie leest. */
.pw-overlay--gate .pw-btn {
  min-height: 52px;
  color: var(--vms-ink-900);
  background: var(--vms-white);
  border-radius: 0;
  clip-path: polygon(
    var(--vt-schuin-m, var(--vt-schuin-m, 11px)) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-m, var(--vt-schuin-m, 11px))),
    calc(100% - var(--vt-schuin-m, var(--vt-schuin-m, 11px))) 100%,
    0 100%,
    0 var(--vt-schuin-m, var(--vt-schuin-m, 11px))
  );
}

.pw-overlay--gate .pw-btn:hover {
  background: rgb(255 255 255 / 0.88);
}

/* --danger (#c0392b) haalt op #1d1d1b maar 3,08:1 en is dus geen tekstkleur
   op dit vlak. De melding leest wit; de statuskleur zit in de linkerrand,
   zodat "fout" zichtbaar blijft zonder AA te breken. */
.pw-overlay--gate .pw-error {
  color: var(--vms-white);
  padding-left: 0.7rem;
  border-left: var(--vt-lijn-dik, 2.5px) solid var(--danger);
  text-align: left;
}

/* Idem voor de groene bevestiging: --success/--success-light zijn tegen wit
   gekalibreerd. */
.pw-overlay--gate .pw-note {
  color: var(--vms-white);
  background: none;
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) rgb(255 255 255 / 0.3);
  border-radius: 0;
}

.pw-overlay--gate .pw-altlink {
  color: rgb(255 255 255 / 0.82);
  text-decoration: underline;
}

.pw-overlay--gate .pw-altlink:hover {
  color: var(--vms-white);
}

/* De voetregel stond hier op `--text-muted` (#6e6e6b): op #1d1d1b is dat
   3,3:1 en dus geen AA — precies wat de waarschuwing bovenaan dit blok
   verbiedt. Wit op 62% haalt 7,0:1 en blijft even stil. */
.pw-overlay--gate .pw-footer {
  color: rgb(255 255 255 / 0.62);
}

/* De verplichte wachtwoordkeuze (DEC-041): dezelfde deur, andere vraag. Het
   e-mailadres staat er alleen-lezen bij — het zegt vóór welk account je kiest,
   en een wachtwoordmanager heeft een gebruikersnaam nodig om het nieuwe
   wachtwoord aan te koppelen. Het is geen invoerveld, dus het dimt mee met de
   subtitel in plaats van als actief veld te lezen. */
.pw-overlay--gate .pw-kies-mail {
  color: rgb(255 255 255 / 0.76);
  cursor: default;
}

/* De uitleg over gelekte wachtwoorden staat onder de knop, niet ertussen. */
.pw-overlay--gate .pw-kies-note {
  margin-top: 0.9rem;
}