/* =============================================================
 * pandOS — layouts/session
 *
 * DESIGNPLAN §5.1: een vol --surface-veld, een middenkolom van max-w-sm,
 * ruit + woordmerk + één regel tagline, het formulier op
 * --surface-container-lowest met een 1px --outline-variant, een primaire
 * knop over de volle breedte en de OAuth-knoppen als secundair.
 *
 * DEELS TIJDELIJK, EN DAT STAAT HIER MET REDEN.
 * §6 legt .pa-btn--primary / --secondary en .pa-field in components.css, en
 * components.css is PR 3. Tot die er is, staan de ontbrekende definities
 * hier — en die zijn gescoped onder .pa-sessie, zodat dit bestand nooit een
 * regel elders in de app kan overrulen.
 *
 * DIT BESTAND GAAT NIET IN ZIJN GEHEEL WEG ALS PR 3 LANDT. Een eerdere
 * versie van deze kop zei dat wel, en dat zou het inlogscherm slopen.
 * Geteld tegen de kop van #2464 (688dabc66) op 2026-08-20: van de 24
 * pa-klassen hier kent PR 3 er 7, en staan er 17 ALLEEN hier.
 *
 *   Vervalt bij PR 3 (7)  .pa-btn, .pa-btn--primary, .pa-btn--secondary,
 *                         .pa-field__control, .pa-field__label, .pa-h1,
 *                         .pa-panel
 *   Blijft nodig (17)     .pa-sessie, .pa-sessie__veld, __skiplink, __ruit,
 *                         __woordmerk, __tagline, __of, __link, __voet,
 *                         __melding, __melding--notitie, .pa-lees,
 *                         .pa-btn--block, .pa-cookiebalk, __knop,
 *                         __knop--primair, __knop--secundair
 *
 * Oftewel: bij het landen van PR 3 vervalt de middenmoot van dit bestand
 * (veld, knopvarianten, paneelrand, h1), en blijven de sessie-eigen vorm,
 * de leesbreedte en de cookiebalk staan. De klassenamen in de views
 * blijven hoe dan ook zoals ze zijn.
 *
 * LET OP bij het schrappen van .pa-field__control: de rand hier is
 * --outline en in PR 3 --outline-variant, en dat laatste haalt de 3:1 van
 * §2 niet (1,53:1 licht / 1,24:1 donker). Zie de toelichting bij die regel
 * hieronder en W-ontwerp-004. Schrap hem pas als #2464 op --outline staat,
 * anders verliest het inlogscherm stil een leesbare veldrand.
 *
 * EN LET OP DE SPECIFICITEIT, want die val is niet te zien aan de regel
 * zelf (W-ontwerp-005). Sinds #2464 geland is, regelt components.css de
 * aanraakdoelen met een media-query:
 *
 *     @media (pointer: coarse) { .pa-field__control { min-height: 2.75rem } }
 *
 * Die weegt (0,1,0); `.pa-sessie .pa-field__control` hieronder weegt
 * (0,2,0) en wint er dus van. Vandaag valt dat niet op, want beide staan
 * op 2.75rem. Maar wie de scoped regel naar de plan-waarde van §6.2
 * ("40px, 44 op touch") VERLAAGT naar 2.5rem, zet het inlogscherm daarmee
 * ook op touch op 40px -- de media-query komt er niet meer overheen. Dat
 * is een WCAG 2.5.5-regressie die je op een desktop-screenshot niet ziet.
 * Veilige volgorde: `min-height` hier WEGHALEN in plaats van verlagen,
 * zodat components.css beide gevallen bestuurt.
 *
 * Wat wel zonder gevolg weg kan, geteld op `f66f3e5d1` door beide
 * bestanden property voor property te vergelijken: .pa-btn,
 * .pa-btn--primary en .pa-btn--secondary zijn identiek aan components.css
 * (0 verschillen op de overlappende properties).
 *
 * Geen hex. Geen gradient. Geen glass. Geen hover-lift. Alles via tokens.
 * =============================================================
 */

/* ---------- Veld en kolom ---------------------------------------- */
/* `safe center` en niet gewoon `center`: de privacyverklaring is langer dan
   het scherm, en een gecentreerd flex-item dat niet past laat zijn bovenkant
   buiten de scroll vallen. Browsers zonder `safe` houden de regel erboven. */
.pa-sessie__veld {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: safe center;
}

.pa-sessie {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.4667;
}

/* De focus-ring van de app hangt nog aan Tailwinds purple-500
   (app/assets/tailwind/application.css). Op de sessie-pagina's is het accent
   grachtengroen; die regel gaat app-breed om in PR 4/9. */
.pa-sessie :focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.pa-sessie__skiplink:focus {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-md);
}

/* ---------- Merk -------------------------------------------------- */
.pa-sessie__ruit {
  color: var(--primary);
}
.pa-sessie__woordmerk {
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.75rem;
  letter-spacing: -0.03em;
  color: var(--on-surface);
}
.pa-sessie__tagline {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--on-surface-variant);
}

/* ---------- Kaart ------------------------------------------------- */
/* §6.3: elevatie is een lijn, geen schaduw. .pa-panel draagt in
   components.css nog de no-line-regel; PR 3 zet de border daar. */
.pa-sessie .pa-panel {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* §4: 22/28, geen clamp(2.5rem). PR 3 doet dat voor de hele app. */
.pa-sessie .pa-h1 {
  font-size: 1.375rem;
  line-height: 1.75rem;
  letter-spacing: -0.02em;
}

/* ---------- Melding ----------------------------------------------- */
/* §3.3: een 1px-balk in de statuskleur plus tekst in inkt, geen vlak. */
.pa-sessie__melding {
  border-left: 3px solid var(--error);
  background: color-mix(in oklab, var(--error) 8%, var(--surface-container-lowest));
  color: var(--on-surface);
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: var(--radius-sm);
}
.pa-sessie__melding--notitie {
  border-left-color: var(--success);
  background: color-mix(in oklab, var(--success) 8%, var(--surface-container-lowest));
}

/* ---------- Veld (§6.2) ------------------------------------------- */
.pa-sessie .pa-field__label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--on-surface-variant);
}
.pa-sessie .pa-field__control {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--on-surface);
  background: var(--surface-container-lowest);
  /* AFWIJKING OP DESIGNPLAN §6.2, met reden — zelfde vorm als de afwijking
     die tokens.css al draagt op §3.1 ("de eis wint van de hex").
     §6.2 schrijft een 1px --outline-variant voor, en §6.3 zet de kaart op
     --surface-container-lowest. Het veld staat daar dus op DEZELFDE kleur als
     zijn kaart, waardoor die ene lijn het enige is dat een invoerveld als
     invoerveld aanwijst. Gemeten 2026-08-20: --outline-variant op
     --surface-container-lowest haalt 1,53:1 licht en 1,24:1 donker, en de eis
     in §2 is 3:1 voor UI (WCAG 2.2 1.4.11). --outline haalt 3,65:1 licht en
     3,20:1 donker en is in §3.1 al beschreven als "sterke lijn (focus/input
     hover)". De kaartrand blijft --outline-variant: een paneelrand is geen
     bedieningselement en valt niet onder 1.4.11. */
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-fast) var(--easing-standard);
}
.pa-sessie .pa-field__control::placeholder {
  color: var(--on-surface-muted);
}
.pa-sessie .pa-field__control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

/* ---------- Knoppen (§6.1) ---------------------------------------- */
/* .pa-btn zelf staat in components.css. Alleen de varianten ontbreken. */
.pa-sessie .pa-btn {
  min-height: 2.75rem;
  font-size: 0.9375rem;
  transition: background-color var(--motion-fast) var(--easing-standard),
              border-color     var(--motion-fast) var(--easing-standard);
}
.pa-sessie .pa-btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  border: 1px solid var(--primary);
}
.pa-sessie .pa-btn--primary:hover {
  background: color-mix(in oklab, var(--primary) 88%, var(--on-surface));
}
.pa-sessie .pa-btn--secondary {
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--outline);
  font-weight: 500;
}
.pa-sessie .pa-btn--secondary:hover {
  background: var(--surface-container);
}
.pa-sessie .pa-btn--block {
  width: 100%;
}

/* ---------- Scheiding "of" ---------------------------------------- */
.pa-sessie__of {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--on-surface-muted);
}
.pa-sessie__of::before,
.pa-sessie__of::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--outline-variant);
}

/* ---------- Links en voet ----------------------------------------- */
.pa-sessie__link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pa-sessie__voet {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--on-surface-muted);
}

/* ---------- Leestekst (§4: 40rem) --------------------------------- */
.pa-lees {
  max-width: 40rem;
  color: var(--on-surface);
}
.pa-lees h2 {
  font-size: 1rem;
  line-height: 1.375rem;
  font-weight: 600;
  color: var(--on-surface);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.pa-lees p,
.pa-lees ul,
.pa-lees ol,
.pa-lees table {
  margin-bottom: 1rem;
}
.pa-lees ul,
.pa-lees ol {
  padding-left: 1.25rem;
  list-style: disc;
}
.pa-lees li {
  margin-bottom: 0.25rem;
}
.pa-lees a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pa-lees table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.pa-lees th,
.pa-lees td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--outline-variant);
}
.pa-lees th {
  background: var(--surface-container-low);
  font-weight: 600;
  color: var(--on-surface-variant);
}

/* ---------- Cookiebalk -------------------------------------------- */
/* Eigen naam, geen .pa-*-component uit §6: PR 3 raakt dit niet, dus deze
   regels blijven ook na PR 3 geldig en botsen met niets. */
.pa-cookiebalk {
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  border-top: 1px solid var(--outline-variant);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.pa-cookiebalk a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pa-cookiebalk__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--easing-standard);
}
.pa-cookiebalk__knop--secundair {
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--outline);
}
.pa-cookiebalk__knop--secundair:hover {
  background: var(--surface-container);
}
.pa-cookiebalk__knop--primair {
  background: var(--primary);
  color: var(--on-primary);
  border: 1px solid var(--primary);
}
.pa-cookiebalk__knop--primair:hover {
  background: color-mix(in oklab, var(--primary) 88%, var(--on-surface));
}

@media (prefers-reduced-motion: reduce) {
  .pa-sessie .pa-btn,
  .pa-sessie .pa-field__control,
  .pa-cookiebalk__knop {
    transition: none;
  }
}