/* Inlogschermen en accountscherm (zelfde stijl en kleurtokens als app.css) */
body:not([data-gate="app"]) main.app{ display:none; }
body[data-gate="app"] .gate{ display:none; }

.gate{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 16px; }
.gate-card{ width:100%; max-width:420px; background:var(--surface); border-radius:30px; box-shadow:0 4px 0 var(--line); padding:22px 20px 18px; }
.gate-brand{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.gate-brand h1{ margin:0; font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:1.7rem; font-weight:800; line-height:1; }
.gate-step h2{ margin:14px 0 4px; font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:1.35rem; font-weight:800; }
.gate-sub{ margin:6px 0 0; font-weight:600; color:var(--muted); }
.gate-sub b{ color:var(--ink); overflow-wrap:anywhere; }
.gate-note{ margin:12px 2px 0; font-size:.85rem; font-weight:600; color:var(--muted); }
.gate-step a, .ac-txt a{ color:var(--ink); font-weight:800; }
.gate-step .btn-primary{ display:block; width:100%; margin-top:18px; }
.gate-step .btn-primary:disabled{ opacity:.6; }
.gate-err{ margin:12px 2px 0; color:var(--late); font-weight:700; font-size:.92rem; }
.gate-ok{ margin:12px 2px 0; padding:10px 12px; border-radius:14px; background:var(--mint-soft); font-weight:700; font-size:.92rem; }
.gate-links{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; margin:14px 0 0; }
.gate-link{ border:0; background:none; padding:6px 0; font-weight:800; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.gate-link:disabled{ opacity:.6; }
.gate-foot{ margin:16px 0 0; font-size:.85rem; font-weight:700; }
.gate-foot a{ color:var(--muted); }
.gate-legal{ margin:8px 0 0; font-size:.75rem; font-weight:600; color:var(--muted); text-align:center; }
.gate-legal a{ color:inherit; }
.gate .flbl{ margin-top:16px; }
.gate-rol, .gate-hoe{ grid-template-columns:1fr 1fr; }
.gate-rol button[data-rol="mama"][aria-pressed="true"]{ background:var(--pink); color:var(--on-pastel); }
.gate-rol button[data-rol="papa"][aria-pressed="true"]{ background:var(--mint); color:var(--on-pastel); }
.gate-hoe button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 2px 0 var(--line); }
.gate input[name="code"]{ font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:1.3rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.gate-check{ display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; margin-top:14px; font-size:.92rem; font-weight:600; line-height:1.4; cursor:pointer; }
.gate-check input{ width:20px; height:20px; margin:1px 0 0; accent-color:var(--lilac-deep); }
.gate-optioneel{ margin-top:18px; padding-top:14px; border-top:1px dashed var(--line, rgba(0,0,0,.12)); font-weight:500; }
#acVerbeteren .gate-check{ margin-top:6px; font-weight:500; }
#acVerbeterenTxt{ margin-top:8px; }

/* accountknop in de kop; op telefoonbreedte alleen iconen zodat de titel ruimte houdt */
.acc-btn{ margin-left:8px; }
@media (max-width:430px){
  .ou-btn .lbl{ display:none; }
  .ou-btn{ padding:0 10px; }
  .brand{ gap:10px; }
  .brand .mode-btn{ width:40px; height:40px; }
}

/* accountscherm */
.ac-me{ display:flex; align-items:center; gap:10px; margin:0 2px 4px; font-weight:700; line-height:1.35; }
.ac-me .wd{ width:14px; height:14px; }
.ac-mail{ font-weight:600; color:var(--muted); font-size:.9rem; overflow-wrap:anywhere; }
.ac-sec{ margin-top:20px; padding-top:16px; border-top:2px dashed var(--line); }
.ac-sec .flbl{ margin-bottom:8px; }
.ac-txt{ margin:0; font-size:.92rem; font-weight:600; color:var(--muted); }
.ac-txt b{ color:var(--ink); }
.ac-code{ margin:12px 0 0; padding:12px; border-radius:18px; background:var(--lilac-soft); text-align:center; font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size:2rem; font-weight:800; letter-spacing:.14em; user-select:all; }
.ac-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.ac-btn{ border:2px solid var(--line); background:var(--bg); border-radius:16px; padding:11px 8px; font-weight:800; }
.ac-btn:active{ transform:translateY(2px); }
.ac-list{ display:grid; gap:8px; }
.ac-item{ display:block; width:100%; text-align:left; border:2px solid var(--line); background:var(--bg); border-radius:18px; padding:11px 14px; font-weight:800; color:var(--ink); text-decoration:none; font-size:1rem; }
.ac-item small{ display:block; margin-top:2px; font-size:.82rem; font-weight:600; color:var(--muted); }
.ac-item:active{ transform:translateY(2px); }
.ac-item:disabled{ opacity:.6; }
.ac-danger .flbl{ color:var(--late); }
.ac-choice .gate-check:first-child{ margin-top:0; }
.ac-del{ display:block; width:100%; margin-top:14px; }
.ac-del:not(:disabled){ background:var(--late); color:#fff; border-color:var(--late); }
.ac-del:disabled{ opacity:.55; cursor:default; }
#acMeldingen .gate-check{ margin-top:6px; font-weight:500; }
.ac-tijd{ margin-top:10px; max-width:180px; }
#acMeldTxt{ margin-top:8px; }

/* accountscherm in drie stappen: Account → Gegevens → Account verwijderen */
.ac-kop{ display:flex; align-items:center; gap:10px; min-width:0; }
.ac-back{ display:grid; place-items:center; flex:none; }
.ac-back svg{ width:20px; height:20px; transform:rotate(90deg); }
.ac-sec.ac-eerste{ margin-top:4px; padding-top:0; border-top:0; }
.ac-nav{ position:relative; padding-right:44px; }
.ac-nav svg{ position:absolute; right:14px; top:50%; width:20px; height:20px; margin-top:-10px; transform:rotate(-90deg); color:var(--muted); }
.ac-item-danger{ color:var(--late); }
.ac-let-op{ margin-bottom:14px; }
#acDelAlleen{ margin-bottom:4px; }