/* WP5 account & portaal (Aether #411) — alleen tokens uit tokens.css. */
*,*::before,*::after{box-sizing:border-box}
/* ── kop: inloggen-knop en accountmenu ── */
.kop-inloggen{padding:7px 14px;font-size:.85rem}
.account-houder{position:relative}
.account-knop{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--accent);background:var(--accent-dim);cursor:pointer}
.account-cirkel{font:600 13px var(--f-display);color:var(--tx-1);letter-spacing:.02em}
.account-menu{position:absolute;right:0;top:calc(100% + 8px);width:260px;padding:6px;display:flex;flex-direction:column;gap:2px;z-index:60}
/* display:flex hierboven overschrijft de UA-regel voor [hidden]; zonder deze
   regel staat het accountmenu op publieke pagina's permanent open (WP10-verify). */
.account-menu[hidden]{display:none}
.account-menu-id{display:flex;flex-direction:column;margin:6px 8px 8px;gap:1px}
.account-menu-id b{font:600 .9rem var(--f-display);color:var(--tx-1)}
.account-menu-id span{font-size:12px;color:var(--tx-3);overflow-wrap:anywhere}
.account-menu > a,.account-menu .uit,.account-menu form button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;font:500 .88rem var(--f-display);color:var(--tx-2);background:transparent;border:0;border-radius:var(--r-s);padding:8px 10px;cursor:pointer}
.account-menu > a:hover,.account-menu form button:hover{color:var(--tx-1);background:var(--accent-dim)}
.account-menu .uit{cursor:default;color:var(--tx-4)}
.account-menu-weergave{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);margin:4px 0}
.account-menu-label{font:600 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-4)}
.account-menu-knoppen{display:flex;gap:6px}
.account-menu-knoppen button{flex:1;font:500 .8rem var(--f-display);color:var(--tx-2);background:var(--bg-2);border:1px solid var(--lijn-2);border-radius:999px;padding:5px 6px;cursor:pointer}
.account-menu-knoppen button:hover{border-color:var(--accent);color:var(--tx-1)}
.account-menu-knoppen button.actief{background:var(--accent-dim);border-color:var(--accent);color:var(--tx-1)}
/* ── auth-pagina's ── */
.auth-hero{margin:24px 0 8px}
.auth-paneel{max-width:460px;padding:26px 26px 22px;margin:18px 0}
.auth-form{display:flex;flex-direction:column;gap:6px}
.auth-form label{font:600 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tx-4);margin-top:10px}
.auth-form label small{text-transform:none;letter-spacing:0;font-weight:500}
.auth-form .knop{margin-top:16px;align-self:flex-start}
.auth-wissel{margin:14px 0 0;color:var(--tx-3);font-size:.9rem}
.veldhint{margin:2px 0 0;font-size:12.5px;color:var(--tx-4)}
.akkoord{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:.9rem;color:var(--tx-2)}
.akkoord input{margin-top:4px}
.melding{border:1px solid var(--lijn-2);border-radius:var(--r-s);padding:10px 14px;margin:0 0 14px;font-size:.92rem}
.melding.rood{color:var(--rood);border-color:var(--rood);background:var(--rood-dim)}
.melding.groen{color:var(--groen);border-color:var(--groen);background:var(--groen-dim)}
/* ── accountpagina ── */
.account-sectie{padding:22px 24px;margin:16px 0}
.account-sectie h2{margin:0 0 12px}
.account-form{display:flex;flex-direction:column;gap:6px;max-width:460px}
.account-form label{font:600 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tx-4);margin-top:10px}
.account-form label small{text-transform:none;letter-spacing:0;font-weight:500}
.account-form .knop{margin-top:14px;align-self:flex-start}
.weergave-keuzes{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.weergave-keuze{display:flex;gap:8px;align-items:flex-start;color:var(--tx-2);font-size:.92rem}
.weergave-keuze small{color:var(--tx-4)}
.weergave-keuze input{margin-top:4px}
.privacy-tekst{max-width:60ch;color:var(--tx-2)}
.verwijder-details{margin-top:8px}
.verwijder-details summary{cursor:pointer;color:var(--rood);font:600 .9rem var(--f-display)}
.verwijder-details[open] summary{margin-bottom:10px}
.knop.gevaar{background:var(--rood);color:#fff}
.knop.gevaar:hover{background:var(--rood);filter:brightness(1.08);color:#fff}
/* ── beheer ── */
.beheer-paneel{padding:8px 18px;margin:16px 0;overflow-x:auto}
.beheer-tabel{width:100%;border-collapse:collapse;font-size:.9rem}
.beheer-tabel th{font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-4);text-align:left;padding:10px;border-bottom:1px solid var(--lijn-2)}
.beheer-tabel td{padding:9px 10px;border-bottom:1px solid var(--lijn);color:var(--tx-2)}
/* ── portaal-schil ── */
body.portaal{background:var(--bg-1)}
/* iconen in de zijbalk: het portaal laadt site.css niet, dus hier de basisstijl
   (WP7-gerichte fix; vóór WP7 renderden deze svg's zonder maat of stroke) */
.p-nav .icoon,.p-zijbalk-voet .icoon,.p-merk .icoon{width:18px;height:18px;flex:none;
  stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.p-schil{display:flex;min-height:100vh}
.p-zijbalk{width:240px;flex:none;display:flex;flex-direction:column;gap:18px;padding:20px 14px;background:var(--bg-2);border-right:1px solid var(--lijn)}
.p-merk{display:flex;align-items:center;gap:10px;color:var(--tx-1);padding:4px 8px}
.p-merk img{width:28px;height:28px}
.p-merk b{font:800 .9rem var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.p-nav{display:flex;flex-direction:column;gap:2px}
.p-nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-s);color:var(--tx-3);font:500 .9rem var(--f-display)}
.p-nav a:hover{color:var(--tx-1);background:var(--accent-dim)}
.p-nav a[aria-current="page"]{color:var(--tx-1);background:var(--accent-dim);box-shadow:inset 0 -2px 0 var(--accent)}
.p-zijbalk-voet{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.p-zijbalk-voet a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-s);color:var(--tx-4);font-size:.85rem}
.p-zijbalk-voet a:hover{color:var(--tx-1);background:var(--accent-dim)}
.p-uitloggen{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;border-radius:var(--r-s);color:var(--tx-4);font:inherit;font-size:.85rem;cursor:pointer;text-align:left}
.p-uitloggen:hover{color:var(--tx-1);background:var(--accent-dim)}
.p-hoofd{flex:1;min-width:0;padding:34px 38px 60px;max-width:980px}
.p-begroeting{margin:0 0 22px;overflow-wrap:anywhere}
.p-stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 18px}
.p-stap{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 20px}
.p-stap-icoon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--accent-dim);color:var(--accent)}
.p-stap-icoon .icoon{width:20px;height:20px}
.p-stap h2{margin:2px 0 0;font-size:17px}
.p-stap p{margin:0;color:var(--tx-3);font-size:.9rem}
.p-stap .chip{margin-top:auto}
.p-leeg{padding:22px 24px;margin:0 0 14px}
.p-leeg h2{margin:0 0 6px}
.p-leeg p{margin:0;color:var(--tx-3)}
.p-bewaar{color:var(--tx-4);font-size:12.5px;max-width:64ch}
@media (max-width:760px){
  .p-schil{flex-direction:column}
  .p-zijbalk{width:100%;flex-direction:row;align-items:center;gap:8px;padding:10px;border-right:0;border-top:1px solid var(--lijn);order:2}
  .p-merk b{display:none}
  .p-nav{flex-direction:row;flex:1;overflow-x:auto}
  .p-nav a span{display:none}
  .p-nav a{padding:8px}
  .p-zijbalk-voet{margin:0;flex-direction:row}
  .p-zijbalk-voet a span,.p-uitloggen span{display:none}
  .p-hoofd{padding:22px 16px 40px}
  .account-menu{position:fixed;right:10px;top:64px}
}

/* WP5: op smalle schermen krimpen de navigaties in plaats van de pagina (geen zijscroll) */
@media (max-width:760px){
  .menu{min-width:0;overflow-x:auto;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .p-nav{min-width:0}
}

/* WP30 (Aether #466) — V4: geen eigen buitenmarges op het eerste/laatste kind
   van het gesprekkenpaneel op /portaal/vraag. De sectie heeft op het portaal
   geen kaartstijl; de witruimte verhuist daarom naar padding, zodat het beeld
   vrijwel gelijk blijft. */
section.paneel[aria-label="Eerdere gesprekken"]{padding-top:20px;padding-bottom:16px}
section.paneel[aria-label="Eerdere gesprekken"] > h2:first-child{margin-top:0}
section.paneel[aria-label="Eerdere gesprekken"] > p:last-child{margin-bottom:0}

/* WP30 (Aether #466) — V7: raakvlak van klikdoelen ≥ 32px op smalle schermen.
   Portaal- en kantoorpagina's laden site.css niet; daarom hier dezelfde regel
   als in site.css (inline links: verticale padding; knoppen/chips: min-height). */
@media (max-width:400px){
  a:not(.knop):not(.merk){padding-top:10px;padding-bottom:10px}
  a.knop, button, .chip, summary{min-height:32px}
}

/* WP40a (Aether #489) — verkeersboete-wizard: gele controlebalk, beslisboom-
   antwoorden als grote knoppen (één vraag per scherm), trail-samengeving. */
.melding.geel{color:var(--oranje);border-color:var(--oranje);background:var(--oranje-dim);font-weight:600}
.verkeer-antwoorden{display:flex;flex-direction:column;gap:12px;max-width:420px}
.verkeer-antwoorden .verkeer-knop{display:block;text-align:center;padding:14px 18px;font-size:1.02rem}
.verkeer-terug{margin-top:18px}
ul.verkeer-trail{list-style:none;padding:0}
ul.verkeer-trail li{margin:6px 0}

/* WP40a navering (CDP-doorloop): de basis-.knop staat in site.css, dat het
   portaal niet laadt — de beslisboom-antwoorden krijgen hier hun volledige
   knopstijl (groot, een per regel, accentkleur). */
.verkeer-antwoorden .verkeer-knop{border-radius:999px;background:var(--accent);color:var(--accent-tx);font:600 1.02rem var(--f-display,inherit);text-decoration:none;cursor:pointer}
.verkeer-antwoorden .verkeer-knop:hover{filter:brightness(1.08)}