/* Calctool — openbare pagina's (home + login).
   Kleuren en typografie volgen het Claude-design: donker blauwgrijs met
   cyaan accent, Space Grotesk voor koppen, IBM Plex Sans voor tekst. */

:root {
    --bg: oklch(0.14 0.02 240);
    --panel: oklch(0.18 0.02 240);
    --panel-2: oklch(0.2 0.02 240);
    --card: oklch(0.99 0.004 240);
    --line: oklch(0.3 0.02 240);
    --line-strong: oklch(0.4 0.02 240);
    --line-soft: oklch(0.26 0.02 240);
    --text: oklch(0.97 0.005 240);
    --text-soft: oklch(0.94 0.005 240);
    --muted: oklch(0.6 0.02 240);
    --muted-2: oklch(0.7 0.02 240);
    --faint: oklch(0.5 0.02 240);
    --accent: oklch(0.75 0.14 205);
    --accent-h: oklch(0.82 0.14 205);
    --on-accent: oklch(0.14 0.02 240);
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;
    /* Vaste plek van het logo: home en login gebruiken exact dezelfde
       inspringing, zodat het logo niet verspringt als je van de ene pagina
       naar de andere gaat. */
    --logo-links: 56px;
    --logo-boven: clamp(18px, 3.4vh, 36px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh;
}

a { color: var(--accent); }
a:hover { color: var(--accent-h); }

/* Het interactieve grid-effect (gridfx.js) tekent op dit canvas. */
#gridfx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Zelfde marge als het inlogscherm (56px), zodat de pagina's dezelfde
   uitlijning hebben. De max-width is er alleen om op zeer brede schermen
   niet oneindig uit te rekken. */
.public-shell {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--logo-links) 60px;
}

/* --- Eerste scherm ---------------------------------------------------------
   Alles boven de vouw (header, hero, voordelen, twee knoppen) past samen op
   één schermhoogte, ook op een 16:9-laptop. De marges krimpen mee met de
   viewport-hoogte (vh in clamp), zodat er niets buiten beeld valt. */

.fold {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* Klein pijltje onderin: "er zit hieronder meer". De dekking wordt door
   home.js bepaald (weg zodra de uitleg-kop in beeld komt). */
.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: clamp(6px, 1.4vh, 16px);
    color: var(--accent);
    pointer-events: none;
    transition: opacity .12s linear;
    animation: hintWip 2.4s ease-in-out infinite;
}
.scroll-hint svg { display: block; }
@keyframes hintWip {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 4px); }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-hint { animation: none; transform: translateX(-50%); }
}
.fold-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(20px, 4.6vh, 68px);
    padding-bottom: clamp(12px, 3vh, 44px);
}

/* --- Header --------------------------------------------------------------- */

.public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--logo-boven) 0;
}

/* Logo is precies zo hoog als de Inloggen-knop (42px), zodat de header
   optisch in balans is. Home en login gebruiken hetzelfde formaat. */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: 42px;
    text-decoration: none;
}
.logo-mark { position: relative; width: 28px; height: 28px; flex: none; }
.logo-mark::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--accent);
    border-radius: 5px;
}
.logo-mark::after {
    content: "";
    position: absolute;
    inset: 7.5px;
    background: var(--accent);
    border-radius: 2px;
}
.logo-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 33px;
    line-height: 1;
    letter-spacing: .01em;
    color: var(--text);
}

/* --- Knoppen ---------------------------------------------------------------- */

.btn-outline {
    text-decoration: none;
    height: 42px;
    padding: 0 22px;
    border-radius: 8px;
    border: 1.5px solid var(--line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-soft);
    transition: border-color .15s, background .15s;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
.btn-outline:hover { border-color: var(--accent); background: var(--panel-2); color: var(--text-soft); }

.btn-solid {
    text-decoration: none;
    height: 46px;
    padding: 0 26px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: filter .15s;
}
.btn-solid:hover { filter: brightness(1.08); color: var(--on-accent); }

/* --- Hero ------------------------------------------------------------------- */

.hero { max-width: 740px; }
.hero h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(31px, 3.6vw + .4rem, 52px);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--text);
    margin: 0 0 clamp(12px, 2.2vh, 22px);
}
.hero p {
    font-size: clamp(15px, .5vw + .75rem, 17px);
    line-height: 1.6;
    color: var(--muted-2);
    max-width: 560px;
    margin: 0;
}
.hero p strong { color: var(--text-soft); font-weight: 600; }

/* --- Voordelen ---------------------------------------------------------------- */

.benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.benefit {
    display: flex;
    flex-direction: column;
    gap: clamp(9px, 1.6vh, 16px);
    opacity: .72;
    filter: saturate(.7);
    cursor: default;
    transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
.benefit:hover {
    opacity: 1;
    transform: scale(1.1);
    filter: saturate(1.3) brightness(1.05);
}
.benefit-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}
.benefit-icon.groen  { background: linear-gradient(135deg, oklch(0.72 0.19 150), oklch(0.6 0.17 155)); box-shadow: 0 6px 16px oklch(0.65 0.19 150 / 0.3); }
.benefit-icon.geel   { background: linear-gradient(135deg, oklch(0.85 0.17 90), oklch(0.72 0.16 65)); box-shadow: 0 6px 16px oklch(0.8 0.17 85 / 0.35); }
.benefit-icon.blad   { background: linear-gradient(135deg, oklch(0.75 0.15 155), oklch(0.55 0.13 165)); box-shadow: 0 6px 16px oklch(0.65 0.15 160 / 0.3); }
.benefit-icon.cyaan  { background: linear-gradient(135deg, oklch(0.8 0.14 205), oklch(0.6 0.16 235)); box-shadow: 0 6px 16px oklch(0.7 0.14 210 / 0.35); }
.benefit h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--text);
    margin: 0;
}
.benefit p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* --- CTA + prijzen -------------------------------------------------------------- */

.midcta { text-align: center; }
.midcta h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(19px, 1.2vw + .7rem, 24px);
    color: var(--text);
    margin: 0 0 clamp(12px, 2.2vh, 22px);
}
.midcta-knoppen { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.midcta-knoppen .btn-solid, .midcta-knoppen .btn-outline { width: 220px; height: 46px; }

/* --- Uitleg (hoe het werkt) ------------------------------------------------- */

.uitleg { padding: clamp(56px, 9vh, 110px) 0 0; }
.uitleg > h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 2vw + .6rem, 32px);
    color: var(--text);
    margin: 0 0 40px;
    text-align: center;
}
.uitleg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.uitleg-stap {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 24px;
    /* Zelfde hover-taal als de prijskaarten: iets groter, cyaan omranding. */
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.uitleg-stap:hover {
    transform: scale(1.04);
    border-color: var(--accent);
    box-shadow: 0 12px 30px -18px oklch(0.75 0.14 205 / 0.5);
}
.uitleg-stap .stap-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: oklch(0.75 0.14 205 / 0.16);
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 14px;
}
.uitleg-stap h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--text);
    margin: 0 0 8px;
}
.uitleg-stap p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.uitleg-slot {
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    max-width: 720px;
    margin: 34px auto 0;
}
.uitleg-slot em { color: var(--muted-2); font-style: normal; }

.pricing-kop {
    text-align: center;
    margin: clamp(64px, 10vh, 120px) 0 64px;
    /* Bij het springen naar #plannen stopt de scroll een stuk eerder, zodat de
       kop niet strak tegen de bovenrand plakt. */
    scroll-margin-top: clamp(48px, 8vh, 96px);
}
.pricing-kop h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 34px;
    color: var(--text);
    margin: 0 0 12px;
}
.pricing-kop p { font-size: 16px; color: var(--muted); margin: 0; }

.plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.plan {
    position: relative;
    background: var(--panel);
    border: 1.5px solid var(--line);
    border-radius: 18px;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, border-color .2s ease;
}
.plan:hover { transform: scale(1.04); border-color: var(--accent); }
.plan-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 100px;
    letter-spacing: .02em;
    white-space: nowrap;
}
.plan h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    color: var(--text);
    margin: 0 0 6px;
}
.plan .plan-sub { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.plan-prijs { display: flex; align-items: baseline; gap: 6px; margin-bottom: 28px; }
.plan-prijs .bedrag {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 40px;
    color: var(--text);
}
.plan-prijs .periode { font-size: 14px; color: var(--muted); }
.plan-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; flex: 1; }
.plan-feature { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted-2); }
.plan-feature .check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: oklch(0.75 0.14 205 / 0.16);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex: none;
}
.plan-knop {
    text-decoration: none;
    height: 48px;
    border-radius: 8px;
    background: var(--line);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    transition: filter .15s;
}
.plan-knop:hover { filter: brightness(1.15); color: var(--text); }

/* Uitgelicht plan: lichte kaart die eruit springt. */
.plan.is-featured {
    background: var(--card);
    border-color: oklch(0.85 0.005 240);
    box-shadow: 0 20px 50px oklch(0.1 0.02 240 / 0.45);
}
.plan.is-featured h3, .plan.is-featured .plan-prijs .bedrag { color: oklch(0.2 0.02 240); }
.plan.is-featured .plan-sub, .plan.is-featured .plan-prijs .periode { color: oklch(0.5 0.02 240); }
.plan.is-featured .plan-feature { color: oklch(0.35 0.02 240); }
.plan.is-featured .plan-feature .check { background: var(--accent); color: var(--on-accent); }
.plan.is-featured .plan-knop { background: var(--accent); color: var(--on-accent); }
.plan.is-featured .plan-knop:hover { filter: brightness(1.06); }

/* --- Footer --------------------------------------------------------------------- */

.public-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 28px 0 24px;
    border-top: 1px solid var(--line-soft);
    margin-top: 80px;
    gap: 24px;
    font-size: 13px;
    color: var(--faint);
}
.public-footer a { color: var(--faint); text-decoration: none; }
.public-footer a:hover { color: var(--accent); }

/* --- Login ------------------------------------------------------------------------ */

.login-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
}
.login-left {
    flex: 1.1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Boven- en linkermarge gelijk aan de home-header: het logo staat op beide
       pagina's op precies dezelfde plek. */
    padding: var(--logo-boven) var(--logo-links) 56px;
}
/* Geen achtergrondvlak meer: het raster ligt alleen nog rond de inlogtegel,
   dus de tekst hier heeft geen leesbaarheidsvlak nodig. */
.login-tagline { max-width: 560px; }
.login-tagline h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 34px;
    line-height: 1.25;
    color: var(--text);
    margin: 0 0 16px;
}
.login-tagline p { font-size: 16px; line-height: 1.6; color: var(--muted-2); margin: 0; }

.login-right {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--card);
    border-radius: 16px;
    padding: 36px;
    box-shadow: 0 20px 60px oklch(0.1 0.02 240 / 0.35);
    color: oklch(0.2 0.02 240);
}
.login-card h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    color: oklch(0.2 0.02 240);
    margin: 0 0 8px;
}
.login-card .login-sub { font-size: 15px; color: oklch(0.45 0.02 240); margin-bottom: 32px; }

.login-form { display: flex; flex-direction: column; gap: 18px; }
.veld { display: flex; flex-direction: column; gap: 6px; }
.veld label { font-size: 13px; font-weight: 600; color: oklch(0.35 0.02 240); }
.veld input[type="email"], .veld input[type="password"], .veld input[type="text"] {
    height: 44px;
    border-radius: 8px;
    border: 1.5px solid oklch(0.88 0.005 240);
    padding: 0 14px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    color: oklch(0.2 0.02 240);
    width: 100%;
    background: #fff;
}
.veld input:focus { border-color: var(--accent); }

.wachtwoord-wrap { position: relative; }
.wachtwoord-wrap input { padding-right: 64px; }
.toon-knop {
    position: absolute;
    right: 6px;
    top: 6px;
    height: 32px;
    padding: 0 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: oklch(0.5 0.02 240);
}
.toon-knop:hover { background: oklch(0.94 0.005 240); }

.login-opties { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.login-opties label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: oklch(0.4 0.02 240);
    cursor: pointer;
}
.login-opties input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.login-opties a { font-size: 14px; color: var(--accent); text-decoration: none; font-weight: 500; }

/* Bewust zwart in plaats van cyaan: rustiger op de lichte kaart. */
.login-knop {
    height: 46px;
    border: none;
    border-radius: 8px;
    background: oklch(0.18 0.02 240);
    color: oklch(0.99 0.004 240);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    margin-top: 6px;
    transition: background .15s;
}
.login-knop:hover { background: oklch(0.28 0.02 240); }
.login-knop:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(0.75 0.14 205 / 0.35);
}

.login-hulp { margin-top: 28px; font-size: 13.5px; color: oklch(0.55 0.02 240); text-align: center; }

.login-fouten {
    background: oklch(0.95 0.03 25);
    border: 1px solid oklch(0.85 0.08 25);
    color: oklch(0.45 0.15 25);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13.5px;
}
.login-fouten p { margin: 0; }

/* --- Responsief -------------------------------------------------------------------- */

@media (max-width: 980px) {
    .public-shell { padding: 0 32px 50px; }
    .benefits { grid-template-columns: repeat(2, 1fr); }
    .uitleg-grid { grid-template-columns: 1fr; }
    .plans { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .login-shell { flex-direction: column; }
    .login-left { padding: 32px; gap: 48px; }
}
@media (max-width: 560px) {
    .public-shell { padding: 0 20px 40px; }
    .benefits { grid-template-columns: 1fr; }
    /* Op een smal scherm mag het eerste blok gewoon meegroeien i.p.v. persen. */
    .fold { min-height: 0; }
    .fold-body { padding: 24px 0 40px; }
}

/* --- Sessie beëindigd --------------------------------------------------------------- */

/* Je bent hier net uitgelogd, dus dit is een publieke pagina: donker, met het
   logo op dezelfde plek als op home en login. De melding is een dialoogvenster
   midden op het scherm — er valt niets anders te doen dan opnieuw inloggen. */
.sessie-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: var(--logo-boven) var(--logo-links) 56px;
}
.sessie-dialoog {
    width: 100%;
    max-width: 460px;
    margin: auto;
    background: var(--card);
    border-radius: 16px;
    padding: 40px 36px 34px;
    text-align: center;
    color: oklch(0.2 0.02 240);
    box-shadow: 0 20px 60px oklch(0.1 0.02 240 / 0.45);
    animation: sessieIn .3s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sessieIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sessie-dialoog { animation: none; } }

/* Het uitroepteken: geel, want dit is een waarschuwing en geen fout van jou. */
.sessie-teken {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: oklch(0.83 0.16 90 / .18);
    border: 2px solid oklch(0.72 0.15 80);
    color: oklch(0.55 0.14 70);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
}
.sessie-dialoog h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 23px;
    margin: 0 0 12px;
    color: oklch(0.2 0.02 240);
}
.sessie-dialoog p { font-size: 15px; line-height: 1.6; color: oklch(0.45 0.02 240); margin: 0 0 14px; }
.sessie-klein { font-size: 13.5px !important; }
.sessie-dialoog a { color: oklch(0.45 0.14 240); }
/* Knop, geen link: dus de tekstkleur van .login-knop terugzetten. */
.sessie-dialoog a.sessie-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    color: oklch(0.99 0.004 240);
    text-decoration: none;
}

/* --- Losse tegel midden op een publieke pagina ---------------------------------------- */

/* Eén gecentreerde tegel in plaats van de twee kolommen van het inlogscherm:
   voor pagina's die geen wervende kant hebben maar één handeling — inloggen op
   /beheer/, wachtwoord vergeten, een nieuw wachtwoord kiezen. Zet hem naast
   `.login-card`, dan houden de velden hun opmaak en ligt de gloed van
   gridglow.js er vanzelf omheen (die zoekt op `.login-card`). */
.los-card { margin: auto; max-width: 400px; }

/* Wat langer, want hier staan twee velden plus de checklist onder elkaar. */
.los-card:has(.ww-eisen) { max-width: 430px; }

/* --- Inloggen op /beheer/ ----------------------------------------------------------- */

/* Klein label boven de titel: je moet in één blik zien dat dit niet de app is. */
.beheer-pil {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 11px;
    border-radius: 999px;
    background: oklch(0.75 0.14 205 / 0.16);
    color: oklch(0.42 0.11 205);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Zelfde correctie als bij .sessie-knop: een <a> die als knop dienstdoet. */
.beheer-card a.beheer-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    color: oklch(0.99 0.004 240);
    text-decoration: none;
}
/* Dieper cyaan dan `--accent`: dat is gemaakt voor de donkere achtergrond en
   heeft op de bijna-witte tegel te weinig contrast. Zelfde afweging als het
   lichte thema in app.css. */
.beheer-card .login-sub a, .beheer-card .login-hulp a {
    color: oklch(0.52 0.12 205);
    font-weight: 500;
    text-decoration: none;
}
.beheer-card .login-sub a:hover, .beheer-card .login-hulp a:hover { text-decoration: underline; }

/* --- Wachtwoordeisen op een publieke tegel -------------------------------------------- */

/* Dezelfde checklist als bij Instellingen → Wachtwoord veranderen, maar die
   stijl staat in app.css en die laadt hier niet. Overgezet naar de kleuren van
   de tegel: die is bijna wit, dus donkere tekst — niet de variabelen van
   app.css, die zijn voor het donkere thema van de app. */
.ww-eisen {
    list-style: none;
    margin: 4px 0 0;
    padding: 12px 14px;
    display: grid;
    gap: 7px;
    border: 1px solid oklch(0.88 0.008 240);
    border-radius: 12px;
    background: oklch(0.97 0.004 240);
    font-size: 13px;
    color: oklch(0.5 0.02 240);
}
.ww-eisen.is-compleet { border-color: oklch(0.62 0.15 150); }
.ww-eisen li { display: flex; align-items: center; gap: 9px; }
/* De regel "de twee wachtwoorden zijn gelijk" staat verborgen tot je in het
   herhaalveld typt. `display` wint van het hidden-attribuut, dus dit moet er
   expliciet bij. */
.ww-eisen li[hidden] { display: none; }
.ww-eisen li.is-goed { color: oklch(0.28 0.02 240); }
.ww-eisen .ww-teken { flex: none; display: flex; color: oklch(0.7 0.02 240); }
.ww-eisen li.is-goed .ww-teken { color: oklch(0.55 0.15 150); }
.ww-eisen .ww-goed { display: none; }
.ww-eisen li.is-goed .ww-open { display: none; }
.ww-eisen li.is-goed .ww-goed { display: block; }

/* Het ronde teken in een dialoog is standaard geel (een waarschuwing). Twee
   varianten voor het herstelproces: neutraal cyaan bij "kijk in je mail" — dat
   is geen waarschuwing maar een mededeling — en groen als het gelukt is. */
.sessie-teken.is-post {
    background: oklch(0.75 0.14 205 / .16);
    border-color: oklch(0.6 0.12 205);
    color: oklch(0.45 0.11 205);
}
.sessie-teken.is-goed {
    background: oklch(0.72 0.17 150 / .16);
    border-color: oklch(0.6 0.15 150);
    color: oklch(0.45 0.14 150);
}