/* Stijlen per view, in dezelfde volgorde als ze in het portaal voorkomen.
   Wordt na basis.css geladen; de cascade is daarmee gelijk aan de volgorde
   waarin deze regels in het oude, ene bestand stonden. */
/* ---- LANDING ---- */
.hero{background:linear-gradient(180deg,var(--grond),#fff);border-bottom:1px solid var(--lijn)}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:60px 0 66px}
.hero h1{font-size:var(--t-hero);line-height:1.05;color:var(--inkt)}.hero h1 em{font-style:normal;color:var(--inkt)}
.hero .lead{font-size:var(--t-lead);margin-top:18px;max-width:480px}.hero .cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}.hero .note{margin-top:16px;font-size:var(--t-meta);color:var(--inkt-zwak)}
.hero-card{background:#fff;border:1px solid var(--lijn);border-radius:var(--vorm-groot);box-shadow:var(--sch);padding:8px}
.hero-card .inner{border-radius:var(--vorm-klein);background:var(--inkt);color:#fff;padding:26px}
.hero-card .eyebrow{color:var(--lijn)}.hero-card h3{font-size:var(--t-kaart);margin:8px 0 6px}.hero-card p{color:var(--grond);font-size:var(--t-basis)}
.hc-list{margin-top:18px;display:grid;gap:10px}.hc-list div{display:flex;align-items:center;gap:10px;font-size:var(--t-basis);color:var(--grond)}.hc-list .b{width:24px;height:24px;border-radius:var(--hoek-klein);background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.section{padding:60px 0}.section.alt{background:var(--grond);border-block:1px solid var(--lijn)}
.sec-head{max-width:660px;margin-bottom:34px}.sec-head h2{font-size:var(--t-sectie);color:var(--inkt)}.sec-head p{font-size:var(--t-basis);color:var(--inkt-zwak);margin-top:10px}
.pijlers,.stappen,.wie{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pijler,.stap,.persoon{background:#fff;border:1px solid var(--lijn);border-radius:var(--vorm-groot);padding:26px;box-shadow:var(--sch)}
.pijler .n{font-size:var(--t-meta);font-weight:800;color:var(--inkt)}.pijler h3{font-size:var(--t-lead);color:var(--inkt);margin:8px 0}.pijler p{font-size:var(--t-basis);color:var(--inkt-zwak)}
.stap .num{width:40px;height:40px;border-radius:var(--hoek-klein);background:var(--inkt);color:#fff;display:grid;place-items:center;font-weight:800;font-size:var(--t-lead);margin-bottom:14px}.stap h3{font-size:var(--t-lead);color:var(--inkt)}.stap p{font-size:var(--t-basis);color:var(--inkt-zwak);margin-top:6px}
.persoon .role{font-size:var(--t-meta);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--inkt)}.persoon h3{font-size:var(--t-lead);color:var(--inkt);margin:6px 0 8px}.persoon .q{font-size:var(--t-basis);font-style:italic}.persoon p{font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:10px}
.cta-band{background:var(--inkt);border-radius:var(--vorm-groot);color:#fff;padding:46px;text-align:center}.cta-band h2{font-size:var(--t-sectie)}.cta-band p{color:var(--grond);font-size:var(--t-basis);margin:12px auto 24px;max-width:560px}.cta-band .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
@media(max-width:900px){.hero-in,.pijlers,.stappen,.wie{grid-template-columns:1fr}.hero h1{font-size:var(--t-pagina)}}

/* ---- HOME ---- */
/* De foto ís de kaart, met de begroeting eroverheen. Eerst stond hij in een
   zijpaneel van 320px; in een wrap van 1560px werd dat een kaart van 330px
   hoog met een groot leeg wit vlak naast een klein fotootje. De staande foto
   is daarom uitgesneden tot een brede band over de rij gezichten — zie
   docs/media.md — en die vult de kaart wél.

   Het scrim loopt alleen van links naar het midden: daar staat de tekst, de
   gezichten staan rechts. Zo is het een foto met tekst erover en geen blauw
   vlak met een vermoeden erin. */
.welkomkaart{position:relative;isolation:isolate;overflow:hidden;
  box-shadow:var(--sch);margin:26px 0 4px;min-height:360px;display:flex;align-items:center;
  background:var(--inkt)}
.welkomkaart .wfoto{position:absolute;inset:0;z-index:-2}
.welkomkaart .wfoto img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.welkomkaart::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(16,42,78,.93) 0%,rgba(20,52,98,.86) 32%,rgba(20,52,98,.42) 58%,rgba(20,52,98,.05) 82%)}
.welkomkaart .wtekst{padding:34px 38px;max-width:640px}
.welkomkaart .wtekst .eyebrow{color:var(--lijn)}
.welkomkaart .wtekst h1{color:#fff}
.welkomkaart .wtekst p{color:var(--grond)}
@media(max-width:820px){
  /* Gestapeld en niet gelaagd: op 390px breed werd de kaart een donkere doos
     met een vermoeden van een foto, want er is naast de tekst geen ruimte
     voor gezichten. Nu de foto onbedekt bovenaan en de tekst eronder op de
     volle kleur — beide volledig te zien, geen scrim nodig. */
  .welkomkaart{min-height:0;display:block}
  .welkomkaart .wfoto{position:relative;height:180px}
  .welkomkaart .wfoto img{object-position:center 42%}
  .welkomkaart::after{display:none}
  .welkomkaart .wtekst{padding:22px 22px 24px;max-width:none}
}
/* Eigen kaart en niet .login-card.reg meeliften: die staat op max-width 430px
   voor de smalle inlogkolom en heeft geen eigen achtergrond (dat doet
   .auth-main). Op een gewone pagina gaf dat losse velden in een te smalle
   strook zonder kaartrand. */
.accountkaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--vorm-groot);
  box-shadow:var(--sch);padding:28px 30px;max-width:720px;margin:0 0 40px}
.accountkaart .field input,.accountkaart .field select{max-width:420px}
.welkom{padding:34px 0 2px}.welkom .eyebrow{margin-bottom:8px}.welkom h1{font-size:var(--t-sectie);color:var(--inkt)}.welkom p{color:var(--inkt-zwak);font-size:var(--t-basis);margin-top:6px;max-width:640px}
/* Cyclusstrip: waar staan we in het jaar, en wat komt eraan. */
/* Grid en geen flexrij: als flexrij vielen de datums naar een tweede regel,
   met een scheidslijn die in de lucht eindigde en een dood vlak ernaast. */
.cyclus{margin-top:26px;display:grid;grid-template-columns:minmax(210px,250px) 1fr auto;gap:24px;align-items:center;margin-top:20px;padding:16px 20px;background:var(--grond);border:1px solid var(--lijn);border-radius:var(--vorm-groot)}
.cy-nu{display:flex;flex-direction:column;justify-content:center;gap:2px;align-self:stretch;padding-right:24px;border-right:1px solid var(--lijn)}
.cy-lab{font-size:var(--t-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt)}
.cy-nu b{font-size:var(--t-basis);color:var(--inkt)}
.cy-nu>span:last-child{font-size:var(--t-meta);color:var(--inkt-zwak)}
.cy-lijst{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cy-item{display:flex;flex-direction:column;gap:1px}
.cy-item b{font-size:var(--t-meta);color:var(--inkt)}
.cy-item span{font-size:var(--t-meta);color:var(--inkt-zwak)}
.cy-mld{font-size:var(--t-meta);font-weight:700;color:var(--inkt);cursor:pointer;white-space:nowrap}
@media(max-width:900px){.cyclus{grid-template-columns:1fr}
 .cy-nu{border-right:0;padding-right:0;padding-bottom:12px;border-bottom:1px solid var(--lijn)}}
@media(max-width:560px){.cy-lijst{grid-template-columns:1fr}}
/* De belofte boven de wegwijzer. Vervangt de uitgelicht-banner, die 43% van
   het eerste scherm besloeg voor een bericht over het RPO zelf. */
.belofte{margin-top:30px;max-width:660px}
.belofte h2{font-size:var(--t-sectie);color:var(--inkt);line-height:1.15}
.belofte p{font-size:var(--t-basis);color:var(--inkt-zwak);margin-top:10px;line-height:1.55}
.acties{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.actie{background:#fff;border:1px solid var(--lijn);border-radius:var(--vorm-klein);padding:18px;box-shadow:var(--sch);transition:.16s;display:flex;flex-direction:column;gap:8px;cursor:pointer}
.actie:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(20,52,98,.10)}
.actie .ai{width:42px;height:42px;border-radius:var(--hoek-klein);display:grid;place-items:center;color:#fff;background:var(--inkt)}
.actie b{font-size:var(--t-basis);color:var(--inkt)}.actie span{font-size:var(--t-meta);color:var(--inkt-zwak)}
/* De ruimte boven de twee kolommen zat in de bovenmarge van .sub-h, dus alleen
   in de linkerkolom. De rail begon daardoor 34px hoger en plakte tegen de
   actietegels. Nu staat de marge op het grid zelf en starten beide kolommen op
   dezelfde lijn. */
.grid2{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start;margin-top:34px}
.grid2>div>.sub-h:first-child{margin-top:0}
.grid2>div>*:last-child{margin-bottom:0}
.feed .item{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--lijn);align-items:flex-start}.feed .item:last-child{border-bottom:0}
.nico{width:40px;height:40px;border-radius:var(--hoek-klein);display:grid;place-items:center;flex:none;background:var(--grond);color:var(--inkt)}
.feed .meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:4px}
.feed h3{font-size:var(--t-basis);color:var(--inkt);margin:0;line-height:1.35}.feed .src{font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:3px}
.feed .item a.h{cursor:pointer}.feed .item a.h:hover h3{color:var(--inkt)}
.railcard{margin-bottom:18px}.radarmini svg{display:block;width:100%;height:auto}.radarmini .lab{font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:8px}
.nbbtn{background:var(--inkt);color:#fff;border-radius:var(--vorm-groot);padding:18px;box-shadow:var(--sch)}
.nbbtn .k{font-size:var(--t-label);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--lijn)}.nbbtn h3{font-size:var(--t-basis);margin:5px 0 4px}.nbbtn p{font-size:var(--t-meta);color:var(--grond)}
.nbbtn a{display:inline-flex;margin-top:12px;background:#fff;color:var(--inkt);padding:9px 14px;border-radius:var(--hoek-klein);font-weight:700;font-size:var(--t-meta);cursor:pointer}
.nbklein .k{font-size:var(--t-label);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--inkt)}
.nbklein p{font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:5px;line-height:1.5}
.nbklein .btn-link{display:inline-block;margin-top:9px;font-size:var(--t-meta)}
.near{display:flex;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid var(--lijn)}.near:last-child{border-bottom:0}
.near .a{width:34px;height:34px;border-radius:999px;background:var(--grond);color:var(--inkt);display:grid;place-items:center;font-weight:800;font-size:var(--t-meta);flex:none}
.near b{font-size:var(--t-meta);display:block}.near small{font-size:var(--t-label);color:var(--inkt-zwak)}.near .km{margin-left:auto;font-size:var(--t-label);color:var(--inkt);font-weight:700;cursor:pointer}
@media(max-width:1000px){.acties{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* ---- THEMA ---- */
.themaselect{margin-bottom:22px}
.themaselect .lab{font-size:var(--t-meta);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--inkt-zwak);margin-bottom:11px}
.themabar{display:flex;gap:10px;flex-wrap:wrap}
.tchip{border:1.5px solid var(--lijn);background:#fff;border-radius:var(--hoek-klein);padding:11px 16px;font-size:var(--t-basis);font-weight:700;color:var(--inkt);cursor:pointer;display:flex;align-items:center;gap:9px;transition:.15s}
.tchip:hover{border-color:var(--lijn);background:var(--grond)}
/* De vulling stond in de JS, in de kleur van het thema. Die kleur is weg,
   dus hier, anders staat de witte tekst van de actieve chip op wit. */
.tchip.on{background:var(--inkt);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(20,52,98,.18)}
/* Scheidt de vaste thema's van de thema's die voor provincies zijn toegevoegd. */
.groeplab{display:flex;align-items:center;gap:10px;font-size:var(--t-label);font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--inkt-zwak);padding-left:6px;margin-left:4px;border-left:1px solid var(--lijn)}
/* De achtergrond stond in de JS, als gradient tussen twee themakleuren.
   Die kleuren zijn weg en een gradient kent de handleiding niet: een
   kadervlak is donkerblauw of wit. Hier, want zonder achtergrond staat
   de witte tekst op wit. */
.theadcard{position:relative;isolation:isolate;background:var(--inkt);border-radius:var(--vorm-groot);color:#fff;padding:26px 28px;margin-bottom:24px;overflow:hidden}
/* Zes van de tien thema's hebben een foto. Die krijgt een eigen vak rechts in
   de kaart in plaats van een plek eronder: onder de gradient was hij op 14%
   dekking geen foto meer maar een waas. Zo staat de tekst op de volle
   themakleur — leesbaarheid is geen afweging — en is de foto gewoon te zien.
   Bij de vier thema's zonder foto valt dat vak weg en is de kaart precies wat
   hij was, zonder gat. */
.theadcard.metfoto{display:grid;grid-template-columns:1fr 38%;gap:0;padding:0;align-items:stretch}
.theadcard.metfoto .thtekst{padding:26px 28px}
.theadcard .thfotovak{position:relative;min-height:190px}
.theadcard .thfotovak img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
/* De themakop is het kadervlak van deze view (vorm.css, niveau 1). Het vlak
   is donkerblauw zonder transparantie, dus de foto staat er met een harde
   naad naast in plaats van in het blauw weg te lopen. */
@media(max-width:820px){
  .theadcard.metfoto{grid-template-columns:1fr}
  .theadcard.metfoto .thtekst{padding:22px 22px 20px}
  .theadcard .thfotovak{order:-1;min-height:150px}
}
.theadcard .e{font-size:var(--t-meta);font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.theadcard h2{font-size:var(--t-sectie);margin:6px 0 6px}.theadcard p{font-size:var(--t-basis);opacity:.95;max-width:620px}
.tlayout{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.block{margin-bottom:22px}.block h3{font-size:var(--t-lead);color:var(--inkt);margin-bottom:4px}.block .cap{font-size:var(--t-meta);color:var(--inkt-zwak);margin-bottom:12px}
.tfilter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.tf{border:1px solid var(--lijn);background:#fff;border-radius:999px;padding:6px 12px;font-size:var(--t-meta);font-weight:700;color:var(--inkt-zwak);cursor:pointer}.tf.on{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.toolrow{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--lijn)}.toolrow:last-child{border-bottom:0}
.toolrow .ic{width:38px;height:38px;border-radius:var(--hoek-klein);background:var(--grond);display:grid;place-items:center;font-size:var(--t-lead);flex:none}
.toolrow .nm{font-size:var(--t-basis);font-weight:700}.toolrow .at{font-size:var(--t-meta);color:var(--inkt-zwak)}
.artrow{padding:12px 0;border-bottom:1px solid var(--lijn)}.artrow:last-child{border-bottom:0}.artrow .t{font-size:var(--t-basis);font-weight:700;color:var(--inkt)}.artrow .m{font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:3px}
.nws{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--lijn);align-items:flex-start}.nws:last-child{border-bottom:0}.nws .t{font-size:var(--t-basis);font-weight:700;line-height:1.35}.nws .m{font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:3px}
.agitem{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--lijn)}.agitem:last-child{border-bottom:0}.agitem .dt{width:46px;text-align:center;flex:none}.agitem .dt b{display:block;font-size:var(--t-lead);color:var(--inkt);line-height:1}.agitem .dt span{font-size:var(--t-label);color:var(--inkt-zwak);text-transform:uppercase}.agitem .t{font-size:var(--t-meta);font-weight:700}.agitem .ty{font-size:var(--t-meta);color:var(--inkt-zwak)}
.stk{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--lijn);font-size:var(--t-meta)}.stk:last-child{border-bottom:0}.stk .d{font-size:var(--t-basis)}
.exp{display:flex;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid var(--lijn)}.exp:last-child{border-bottom:0}.exp .a{width:38px;height:38px;border-radius:999px;background:var(--inkt);color:#fff;display:grid;place-items:center;font-weight:800;font-size:var(--t-meta);flex:none}.exp b{font-size:var(--t-meta);display:block}.exp small{font-size:var(--t-meta);color:var(--inkt-zwak)}
.seemore{display:inline-block;margin-top:10px;font-size:var(--t-meta);font-weight:700;color:var(--inkt);cursor:pointer}
.leegblok{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 0;font-size:var(--t-meta);color:var(--inkt-zwak);line-height:1.5}
.leegblok b{color:var(--inkt);font-size:var(--t-basis)}
.leegblok a:not(.btn){color:var(--inkt);font-weight:700;cursor:pointer}
.leegblok .btn{margin-top:8px}
/* Kansen naast risico's: nu gaat alles over rode vlaggetjes. */
.kansblok{border:1px solid var(--lijn);border-left:3px solid var(--lijn-accent);border-radius:0 var(--hoek-klein) var(--hoek-klein) 0;background:var(--grond);padding:16px 18px;margin-bottom:24px}
.kb-lab{font-size:var(--t-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt)}
.kb-kop h3{font-size:var(--t-basis);color:var(--inkt);margin-top:2px}
.kb-lijst{display:grid;gap:8px;margin-top:10px}
.kb-lijst div{font-size:var(--t-meta);color:var(--inkt);line-height:1.5;padding-left:16px;position:relative}
.kb-lijst div::before{content:"+";position:absolute;left:0;top:-1px;color:var(--inkt);font-weight:800}
.mld{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--lijn);line-height:1.45;cursor:pointer}
.mld:last-of-type{border-bottom:0}
.mld input{margin-top:3px;flex:none}
.mld b{display:block;color:var(--inkt);font-size:var(--t-meta)}
.mld span span{color:var(--inkt-zwak);font-size:var(--t-meta)}
@media(max-width:900px){.tlayout{grid-template-columns:1fr}}

/* ---- RADAR ---- */
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
.radar-wrap{position:relative}.radar-svg{display:block;width:100%;height:auto}.radar-dot{cursor:pointer}.radar-dot:hover circle{stroke:var(--inkt);stroke-width:2.5}
.radar-tip{position:absolute;pointer-events:none;background:var(--inkt);color:#fff;font-size:var(--t-meta);padding:8px 11px;border-radius:var(--hoek-klein);max-width:210px;line-height:1.4;opacity:0;transition:.12s;z-index:5}.radar-tip b{color:var(--lijn);display:block;font-size:var(--t-label);letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.sig{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--lijn)}.sig:last-child{border-bottom:0}.sig .d{width:11px;height:11px;border-radius:999px;margin-top:5px;flex:none}.sig .t{font-size:var(--t-basis);font-weight:700}.sig .m{font-size:var(--t-meta);color:var(--inkt-zwak)}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px;font-size:var(--t-meta)}.legend a{display:flex;align-items:center;gap:6px;color:var(--inkt-zwak);border:1px solid var(--lijn);padding:5px 10px;border-radius:999px;cursor:pointer}.legend a:hover{color:var(--inkt);border-color:var(--lijn)}.legend i{width:9px;height:9px;border-radius:999px}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ---- VIND HULP ---- */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.fchip{border:1px solid var(--lijn);background:#fff;border-radius:999px;padding:8px 14px;font-size:var(--t-meta);font-weight:600;color:var(--inkt-zwak);cursor:pointer}.fchip.on,.fchip:hover{border-color:var(--lijn-accent);color:var(--inkt);background:var(--grond)}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Eerst één keuze — collega, community of werkgroep — pas daarna filteren. */
.hulplab{font-size:var(--t-meta);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-zwak);margin-bottom:10px}
.hulpmodus{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.hm{font-family:var(--font);text-align:left;width:100%;border:1.5px solid var(--lijn);background:#fff;border-radius:var(--hoek-klein);padding:14px 15px;cursor:pointer;transition:.15s;display:flex;gap:12px;align-items:flex-start}
.hm:hover{border-color:var(--lijn);background:var(--grond)}
.hm.on{border-color:var(--lijn-accent);background:var(--grond);box-shadow:0 6px 18px rgba(20,52,98,.10)}
.hm .hi{width:38px;height:38px;border-radius:var(--hoek-klein);background:var(--grond);color:var(--inkt);display:grid;place-items:center;flex:none;transition:.15s}
.hm.on .hi{background:var(--inkt);color:#fff}
.hm b{display:block;font-size:var(--t-basis);color:var(--inkt);margin-bottom:2px}
.hm span{font-size:var(--t-meta);color:var(--inkt-zwak);line-height:1.4;display:block}
.hulppaneel{display:none}.hulppaneel.on{display:block}
/* Houdt de andere twee ingangen zichtbaar nu er nog maar één blok tegelijk staat. */
.modusnaar{margin-top:18px;padding-top:15px;border-top:1px solid var(--lijn);font-size:var(--t-meta);color:var(--inkt-zwak)}
.modusnaar a{color:var(--inkt);font-weight:700;cursor:pointer}
.wglijst{display:grid;gap:12px}
.wgk{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--lijn);border-radius:var(--vorm-klein);padding:15px 16px;box-shadow:var(--sch)}
.wgk .nm{font-size:var(--t-basis);font-weight:800;color:var(--inkt)}
.wgk .mt{font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:4px}
.wgk .rechts{margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.profielstrip{margin-top:26px}
.profielstrip .bd{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.profielstrip h3{font-size:var(--t-basis);color:var(--inkt);margin-bottom:3px}
.profielstrip p{font-size:var(--t-meta)}
.profielstrip .tags{margin-top:0}
.profielstrip .btn-link{margin-left:auto}
.q{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--lijn)}.q:last-child{border-bottom:0}.q .a{width:38px;height:38px;border-radius:999px;background:var(--grond);color:var(--inkt);display:grid;place-items:center;font-weight:800;font-size:var(--t-meta);flex:none}.q .ttl{font-size:var(--t-basis);font-weight:700}.q .meta{font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wg{display:flex;flex-direction:column;gap:8px;font-size:var(--t-meta);font-weight:600;color:var(--inkt)}
@media(max-width:900px){.mgrid{grid-template-columns:1fr}}
@media(max-width:760px){.hulpmodus{grid-template-columns:1fr}}

/* ---- DELEN ---- */
.deel{border:0;background:transparent;color:var(--inkt-zwak);cursor:pointer;padding:6px;min-width:44px;min-height:44px;border-radius:var(--hoek-klein);display:inline-grid;place-items:center;flex:none;transition:.15s;font-family:var(--font)}
.deel:hover{background:var(--grond);color:var(--inkt)}
/* De inhoud houdt een leesbare breedte, zodat de deel-knop naast de tekst
   blijft staan in plaats van naar de verre rechterrand te drijven. */
.feed .item>div:nth-child(2){flex:1 1 auto;max-width:760px}
.feed .item .deel{margin-left:auto;align-self:center}
/* Het nieuwsblok op de themapagina kreeg dezelfde knop: rechts van de tekst. */
.nws>div:nth-child(2){flex:1 1 auto;min-width:0}
.nws .deel{margin:-8px -6px 0 auto}
.deel[aria-expanded="true"]{background:var(--grond);color:var(--inkt)}
.deel:focus-visible{outline:2px solid var(--inkt);outline-offset:2px}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);background:var(--inkt);color:#fff;font-size:var(--t-meta);line-height:1.45;padding:12px 18px;border-radius:var(--hoek-klein);box-shadow:0 12px 34px rgba(20,52,98,.28);opacity:0;pointer-events:none;transition:.22s;z-index:80;max-width:min(440px,calc(100vw - 32px))}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- BENCHMARK ---- */
.peer{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;align-items:center}.peer .lbl{font-size:var(--t-meta);color:var(--inkt-zwak);font-weight:700;margin-right:4px}.peer .pc{border:1px solid var(--lijn);background:#fff;border-radius:999px;padding:7px 13px;font-size:var(--t-meta);font-weight:700;color:var(--inkt-zwak);cursor:pointer}.peer .pc.on{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.statrow{display:grid;grid-template-columns:230px 1fr 1fr;gap:18px;margin-bottom:20px}
.ring{display:flex;align-items:center;gap:16px}.ring .lab b{font-size:var(--t-basis);color:var(--inkt)}.ring .lab span{font-size:var(--t-meta);color:var(--inkt-zwak);display:block}
.statbox{background:var(--grond);border:1px solid var(--lijn);border-radius:var(--vorm-klein);padding:20px}.statbox .v{font-size:var(--t-sectie);font-weight:800;color:var(--inkt);line-height:1}.statbox .l{font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:6px}.statbox .badge{font-size:var(--t-label);font-weight:800;color:#fff;background:var(--inkt);border-radius:999px;padding:3px 10px;display:inline-block;margin-top:10px}
.chartcard h3{font-size:var(--t-basis);color:var(--inkt)}.chartcard .cap{font-size:var(--t-meta);color:var(--inkt-zwak);margin:2px 0 10px}.chartcard svg{display:block;width:100%;height:auto}
.bullets{display:grid;gap:18px;margin-top:6px}.bul{padding-bottom:18px}.bul .top{display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;font-size:var(--t-meta);margin-bottom:6px}.bul .top b{color:var(--inkt)}.bul .top span{color:var(--inkt-zwak)}
.track{position:relative;height:16px;background:var(--grond);border-radius:999px}/* Het gezonde bereik moet van de baan te onderscheiden zijn: het bijschrift
   noemt het bij naam. Cyaan op 50%, een stap uit de reeks die de handleiding
   voorschrijft.

   Dit haalt geen 3:1 tegen de baan, en dat is geen slordigheid: zelfs volle
   cyaan komt daar niet boven, want de kleur is er te licht voor. WCAG 1.4.11
   knelt hier niet, omdat dezelfde vergelijking rechts van elke balk in tekst
   staat ("jij: 1,4 - mediaan: 1,1"). De zone is een hulpmiddel bij het lezen,
   niet de enige drager. */
.track .good{position:absolute;top:0;bottom:0;background:rgba(0,161,229,.50);border-radius:999px}.track .fill{position:absolute;top:0;bottom:0;left:0;background:var(--inkt);border-radius:999px}.track .med{position:absolute;top:-4px;bottom:-4px;width:3px;background:var(--inkt);border-radius:2px}.track .medlbl{position:absolute;top:20px;transform:translateX(-50%);font-size:var(--t-label);color:var(--inkt);font-weight:700;white-space:nowrap}
.legline{display:flex;gap:18px;font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:10px;flex-wrap:wrap}.legline span{display:flex;align-items:center;gap:6px}/* De kleur stond inline in de markup. Een legenda zonder kleur wijst
   nergens naar; dit is bovendien datavisualisatie, waar de handleiding
   kleur juist wel toestaat. */
.legline i{width:14px;height:3px;border-radius:2px;display:inline-block}
.legline i.eigen{background:var(--inkt)}
.legline i.peer{background:var(--lijn-accent)}
.reciproc{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--inkt);color:#fff;border-radius:var(--vorm-groot);padding:22px;margin-top:22px}.reciproc h3{font-size:var(--t-lead)}.reciproc p{color:var(--grond);font-size:var(--t-basis);margin-top:4px;max-width:560px}.reciproc .btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;margin-left:auto}
@media(max-width:900px){.statrow{grid-template-columns:1fr}}

/* ---- BIBLIOTHEEK ---- */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.fmt{display:flex;gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid var(--lijn)}.fmt:last-child{border-bottom:0}.fmt .ft{width:42px;height:42px;border-radius:var(--hoek-klein);background:var(--grond);border:1px solid var(--lijn);display:grid;place-items:center;font-size:var(--t-lead);flex:none}.fmt .nm{font-size:var(--t-basis);font-weight:700;color:var(--inkt)}.fmt .at{font-size:var(--t-meta);color:var(--inkt-zwak)}.fmt .dl{margin-left:auto;display:flex;gap:6px;align-items:center}
.contrib{background:var(--inkt);border-radius:var(--vorm-groot);color:#fff;padding:26px;margin-top:20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}.contrib h3{font-size:var(--t-lead)}.contrib p{color:var(--grond);font-size:var(--t-basis);margin-top:6px;max-width:520px}.contrib .btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;margin-left:auto}
.keur{display:inline-block;font-size:var(--t-label);font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px;margin-left:9px;vertical-align:2px}
/* De pagina legt dit onderscheid zelf uit ("Twee soorten bijdragen"), dus
   het hoort zichtbaar te zijn. Het keurmerk krijgt een gevuld vlak, de
   bijdrage van een collega blijft een omlijnd label. */
.keur.rpo{background:var(--inkt);color:#fff;border:1px solid var(--inkt)}
.keur.collega{background:transparent;color:var(--inkt-zwak);border:1px solid var(--lijn)}
.keurlegenda{font-size:var(--t-meta);color:var(--inkt-zwak);line-height:1.55;margin-bottom:14px;max-width:720px}
.keurlegenda b{color:var(--inkt)}
.themehint{background:var(--grond);border:1px solid var(--lijn);border-radius:var(--vorm-groot);padding:16px 18px;margin-bottom:18px;font-size:var(--t-basis);color:var(--inkt)}.themehint a{color:var(--inkt);font-weight:700;cursor:pointer}

/* ---- AI ---- */
.chat{max-width:760px}.bubble{border-radius:var(--hoek-klein);padding:15px 18px;margin-bottom:12px;font-size:var(--t-basis);line-height:1.55}.bubble.ai{background:var(--grond);color:var(--inkt)}.bubble.ai .src{display:block;margin-top:9px;font-size:var(--t-meta);color:var(--inkt);font-weight:700}.bubble.me{background:var(--inkt);color:#fff;margin-left:auto;max-width:75%}
/* Elk antwoord eindigt bij een mens, niet bij een bron. */
.doorverwijs{border:1px solid var(--lijn);border-left:3px solid var(--lijn-accent);border-radius:0 var(--hoek-klein) var(--hoek-klein) 0;background:var(--grond);padding:14px 16px;margin:2px 0 16px}
.dv-lab{font-size:var(--t-label);font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--inkt);margin-bottom:9px}
.dv-rij{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dv-rij .a{width:40px;height:40px;border-radius:999px;background:var(--inkt);color:#fff;display:grid;place-items:center;font-weight:800;font-size:var(--t-meta);flex:none}
.dv-rij b{display:block;font-size:var(--t-basis);color:var(--inkt)}
.dv-rij span{display:block;font-size:var(--t-meta);color:var(--inkt-zwak)}
.dv-waarom{margin-top:3px;color:var(--inkt)!important}
.dv-rij .btn{margin-left:auto}.suggest{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}.suggest button{background:#fff;border:1px solid var(--lijn);color:var(--inkt);font-family:var(--font);font-size:var(--t-meta);border-radius:999px;padding:8px 13px;cursor:pointer;font-weight:600}.suggest button:hover{border-color:var(--lijn-accent)}.aibar{display:flex;gap:10px}.aibar input{flex:1;border:1px solid var(--lijn);border-radius:var(--hoek-klein);padding:14px 16px;font-family:var(--font);font-size:var(--t-basis)}

/* ---- NIEUWSBRIEF ---- */
.nbhero{background:var(--inkt);color:#fff;border-radius:var(--vorm-groot);padding:30px;margin-bottom:22px}.nbhero .e{font-size:var(--t-meta);color:var(--lijn);letter-spacing:.06em;text-transform:uppercase;font-weight:800}.nbhero h2{font-size:var(--t-sectie);margin:8px 0 6px}.nbhero p{color:var(--grond);font-size:var(--t-basis);max-width:560px}
.nbwrap{display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:start}
.art{display:flex;gap:13px;padding:18px 0;border-bottom:1px solid var(--lijn);align-items:flex-start}.art:last-child{border-bottom:0}.art .k{font-size:var(--t-label);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--inkt)}.art h3{font-size:var(--t-basis);color:var(--inkt);margin:4px 0 6px}.art p{font-size:var(--t-meta);color:var(--inkt)}.art a{font-size:var(--t-meta);font-weight:700;color:var(--inkt);display:inline-block;margin-top:6px;cursor:pointer}
.why{background:var(--grond);border-radius:var(--hoek-klein);padding:16px;font-size:var(--t-meta);color:var(--inkt)}.why b{display:block;margin-bottom:4px}
.prefs{display:flex;flex-direction:column;gap:8px;margin-top:10px}.pref{display:flex;align-items:center;gap:9px;font-size:var(--t-meta)}.pref .sw{width:34px;height:20px;border-radius:999px;background:var(--lijn-accent);position:relative;flex:none}.pref .sw::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:999px;background:#fff}.pref.off .sw{background:var(--lijn)}.pref.off .sw::after{right:auto;left:2px}
.ed{border:1px solid var(--lijn);border-radius:var(--hoek-klein);padding:13px 16px;font-size:var(--t-meta);margin-top:10px}.ed b{color:var(--inkt)}.ed span{color:var(--inkt-zwak);font-size:var(--t-meta)}
.redactie-link{margin-top:30px;border:1px dashed var(--lijn);border-radius:var(--hoek-klein);padding:14px 16px;font-size:var(--t-meta);color:var(--inkt-zwak);background:var(--grond)}.redactie-link a{color:var(--inkt);font-weight:700;cursor:pointer}
@media(max-width:900px){.nbwrap{grid-template-columns:1fr}}

/* ---- REDACTIE ---- */
.redhdr{background:var(--inkt-diep);color:#fff}.redhdr-in{display:flex;align-items:center;gap:16px;height:64px;max-width:1560px;margin:0 auto;padding:0 24px}.redhdr img{height:26px;filter:brightness(0) invert(1)}.redhdr .tag{font-size:var(--t-meta);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lijn);border-left:1px solid rgba(255,255,255,.25);padding-left:14px}.redhdr .back{margin-left:auto;font-size:var(--t-meta);color:var(--lijn);font-weight:600;cursor:pointer}
.redhead{padding:30px 0 22px}.redhead .e{font-size:var(--t-meta);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt)}.redhead h1{font-size:var(--t-sectie);color:var(--inkt);margin:8px 0 6px}.redhead p{font-size:var(--t-basis);color:var(--inkt-zwak);max-width:640px}
.nbgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:start}
.srcc{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--lijn);border-radius:var(--hoek-klein);padding:13px 15px;background:var(--grond);margin-bottom:10px}.srcc .si{width:30px;height:30px;border-radius:var(--hoek-klein);background:#fff;border:1px solid var(--lijn);display:grid;place-items:center;flex:none}.srcc b{color:var(--inkt);font-size:var(--t-meta);display:block}.srcc span{color:var(--inkt-zwak);font-size:var(--t-meta)}
.prev{border:1px solid var(--lijn);border-radius:var(--vorm-groot);overflow:hidden;min-height:320px;display:flex;flex-direction:column}.prev .mh{background:var(--inkt);color:#fff;padding:16px 18px}.prev .mh .e{font-size:var(--t-label);color:var(--lijn);letter-spacing:.06em;text-transform:uppercase}.prev .mh .t{font-weight:800;font-size:var(--t-lead);margin-top:3px}.prev .mb{padding:16px 18px;flex:1}.prev .empty{display:grid;place-items:center;height:100%;color:var(--inkt-zwak);text-align:center;padding:30px;font-size:var(--t-basis)}.prev .empty .big{font-size:var(--t-pagina);margin-bottom:10px}
.item2{padding:12px 0;border-bottom:1px solid var(--lijn)}.item2:last-child{border-bottom:0}.item2 .k{font-size:var(--t-label);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--inkt)}.item2 .h{font-weight:800;color:var(--inkt);font-size:var(--t-basis);margin:2px 0}.item2 p{font-size:var(--t-meta);color:var(--inkt-zwak)}
.tp{opacity:0;transform:translateY(5px);animation:rise .3s ease forwards}@keyframes rise{to{opacity:1;transform:none}}
.segments{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.seg{border:1px solid var(--lijn);background:#fff;border-radius:999px;padding:7px 12px;font-size:var(--t-meta);font-weight:700;color:var(--inkt-zwak);cursor:pointer}.seg.on{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.drafts{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}.draft{border:1px solid var(--lijn);border-radius:var(--hoek-klein);padding:13px 16px;font-size:var(--t-meta);min-width:160px}.draft b{color:var(--inkt)}.draft span{color:var(--inkt-zwak);font-size:var(--t-meta)}.draft .st{font-size:var(--t-label);font-weight:800;color:var(--inkt)}
@media(max-width:900px){.nbgrid{grid-template-columns:1fr}}

/* Het kadervlak loopt nooit af, zegt de handleiding: er blijft marge rond.
   Drie tegels, dezelfde zijmarge als .wrap, zodat het vlak uitlijnt met de
   header erboven. */
.auth{min-height:calc(100vh - 71px);display:grid;grid-template-columns:1.05fr .95fr;padding:calc(var(--tegel) * 3);gap:calc(var(--tegel) * 3)}
/* De foto zit ónder de bestaande gradient, die daarmee scrim wordt in plaats
   van vlakvulling: de mensen zijn te zien, de tekst blijft leesbaar. Zonder
   die dekking is witte tekst op een lichte kantooromgeving onleesbaar, en dat
   is precies waar "een foto erbij" meestal stukloopt. */
.auth-side{position:relative;isolation:isolate;color:#fff;padding:56px 52px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--inkt)}
.auth-media{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 22%}
/* Richtingsgevoelig en niet één waas over het hele beeld: donker waar de
   tekst staat, oplopend naar open rechtsboven, waar in deze foto de twee
   mensen lopen. Zo is het een foto met tekst erover in plaats van een blauw
   vlak met een vermoeden erin. De tweede laag houdt de onderste regels — de
   voetnoot — leesbaar. */
.auth-side::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(16,42,78,.93) 0%,rgba(20,52,98,.82) 30%,rgba(20,52,98,.42) 58%,rgba(20,52,98,.10) 88%),
             linear-gradient(180deg,rgba(16,42,78,.10),rgba(16,42,78,0) 34%,rgba(16,42,78,.52))}
/* De achtergrondvideo gebruikt de eerste 5 seconden van Mano's bestand:
   congreszaal met publiek, spreker, netwerken met koffie, handen op het
   toetsenbord. Dat is het hele schone venster — vanaf 5,5 s vult een
   stockdashboard met "MacBook Pro" leesbaar in beeld het kader, en vanaf
   8,2 s zit er een ingebakken tekstband in die tegen de voettekst botst.
   Zie docs/media.md; het contactblad waarmee dat is vastgesteld staat daar
   beschreven.

   Op smal en bij een bewegingsvoorkeur blijft het bij de foto — en dan wordt
   de video ook niet gedownload, want de src wordt in JS gezet. */
@media(max-width:900px),(prefers-reduced-motion:reduce){
  video.auth-media{display:none}
}
.auth-side .eyebrow{color:var(--lijn)}
.auth-side h1{font-size:var(--t-pagina);line-height:1.1;margin:14px 0 14px}
.auth-side p{color:var(--grond);font-size:var(--t-basis);max-width:440px}
.auth-side ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:13px}
.auth-side li{display:flex;gap:12px;align-items:center;font-size:var(--t-basis);color:var(--grond)}
.auth-side li .b{width:32px;height:32px;border-radius:var(--hoek-klein);background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.auth-side .vnote{margin-top:32px;font-size:var(--t-meta);color:var(--lijn);border-top:1px solid rgba(255,255,255,.20);padding-top:18px;max-width:420px;line-height:1.5}
/* Bewijs dat er wat gebeurt, in plaats van een lijstje functies. */
.nulive{margin-top:26px;border-top:1px solid rgba(255,255,255,.20);padding-top:20px}
.nl-lab{font-size:var(--t-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lijn);margin-bottom:12px}
.nl-item{display:flex;flex-direction:column;gap:1px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.nl-item:last-child{border-bottom:0}
.nl-item b{font-size:var(--t-basis);color:#fff}
.nl-item span{font-size:var(--t-meta);color:var(--lijn)}
.alaccount{font-size:var(--t-meta);color:var(--inkt-zwak);margin-bottom:18px}
.alaccount a{color:var(--inkt);font-weight:700;cursor:pointer}
.waarvoor{background:var(--grond);border:1px solid var(--lijn);border-radius:var(--hoek-klein);padding:13px 15px;font-size:var(--t-meta);color:var(--inkt-zwak);line-height:1.55;margin-bottom:20px}
.waarvoor b{display:block;color:var(--inkt);font-size:var(--t-meta);margin-bottom:3px}
.overslaan{margin-top:14px;text-align:center;font-size:var(--t-meta)}
.overslaan a{color:var(--inkt-zwak);cursor:pointer;text-decoration:underline}
.overslaan a:hover{color:var(--inkt)}
.astats{display:flex;gap:26px;margin-top:24px}
.astats div{display:flex;flex-direction:column}
.astats b{font-size:var(--t-sectie);font-weight:800;line-height:1;color:#fff}
.astats span{font-size:var(--t-meta);color:var(--grond);margin-top:5px;max-width:150px}
.aover{margin-top:14px;font-size:var(--t-meta);color:var(--grond)}.aover b{color:#fff}
/* align-items:flex-start en niet center: met de schuif wisselt de kaart tussen
   een lang aanmeldformulier en een kort inlogveld, en gecentreerd zakt hij dan
   150px weg onder je handen. Bij een viewport van 900px scheelt flex-start voor
   het aanmeldscherm zelf vier pixels — het verschil is alleen zichtbaar op de
   korte kant, en daar is stilstaan precies wat je wil. */
.auth-main{display:flex;align-items:flex-start;justify-content:center;padding:48px 40px}
.login-card{width:100%;max-width:380px}
.login-card>img{height:30px;margin-bottom:22px}
.login-card h2{font-size:var(--t-sectie);color:var(--inkt)}
.login-card .sub{font-size:var(--t-basis);color:var(--inkt-zwak);margin:6px 0 22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:var(--t-meta);font-weight:700;color:var(--inkt);margin-bottom:6px}
.field input{width:100%;border:1px solid var(--lijn);border-radius:var(--hoek-klein);padding:12px 14px;font-family:var(--font);font-size:var(--t-basis)}
.field input:focus{outline:none;border-color:var(--inkt);box-shadow:0 0 0 2px var(--inkt)}
.login-card .row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 18px;font-size:var(--t-meta)}
.login-card .row label{display:flex;gap:7px;align-items:center;font-weight:600;color:var(--inkt-zwak)}
.login-card .row input{width:auto}
.login-card .row a{color:var(--inkt);font-weight:700;cursor:pointer}
.login-card .full{width:100%;justify-content:center;padding:13px}
.login-card .divider{display:flex;align-items:center;gap:12px;color:var(--inkt-zwak);font-size:var(--t-meta);margin:22px 0}
.login-card .divider::before,.login-card .divider::after{content:"";height:1px;background:var(--lijn);flex:1}
.join{background:var(--grond);border:1px solid var(--lijn);border-radius:var(--hoek-klein);padding:16px;font-size:var(--t-meta);color:var(--inkt);line-height:1.5}
.join b{color:var(--inkt)}
.join a{color:var(--inkt);font-weight:700;cursor:pointer;display:inline-block;margin-top:6px}

/* --- Inschrijfformulier ---------------------------------------------------- */
.login-card.reg{max-width:430px}
/* Aanmelden en inloggen zijn twee kanten van dezelfde deur, dus één kaart met
   een schuif erboven. Stonden eerst als twee losse .login-card's naast elkaar,
   en omdat .auth-main een flexrij is met align-items:center hingen die op eigen
   hoogte naast het formulier. De schuif is hier ook de wegwijzer: beide opties
   staan altijd leesbaar in beeld, dus er is geen verstopte tweede functie. */
.authschuif{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--grond);border:1px solid var(--lijn);border-radius:var(--hoek-klein);padding:4px;margin-bottom:22px}
.authschuif button{position:relative;z-index:1;border:0;background:none;font-family:var(--font);font-size:var(--t-basis);font-weight:700;color:var(--inkt-zwak);padding:10px 8px;border-radius:var(--hoek-klein);cursor:pointer}
.authschuif button[aria-selected="true"]{color:var(--inkt);font-weight:800}
.authschuif button:focus-visible{outline:2px solid var(--inkt);outline-offset:2px}
.schuiver{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);background:var(--vlak);border-radius:var(--hoek-klein);box-shadow:0 1px 2px rgba(20,52,98,.10);transition:transform .22s cubic-bezier(.4,0,.2,1)}
.authschuif[data-op="in"] .schuiver{transform:translateX(100%)}
@media(prefers-reduced-motion:reduce){.schuiver{transition:none}}
.reg-steps{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.reg-steps .s{display:flex;align-items:center;gap:8px;font-size:var(--t-meta);font-weight:700;color:var(--inkt-zwak);white-space:nowrap}
.reg-steps .s .n{width:23px;height:23px;border-radius:999px;display:grid;place-items:center;font-size:var(--t-label);background:var(--grond);color:var(--inkt);flex:none}
.reg-steps .s.on{color:var(--inkt)}
.reg-steps .s.on .n{background:var(--inkt);color:#fff}
.reg-steps .s.done .n{background:var(--inkt);color:#fff}
.reg-steps .bar{flex:1;height:2px;background:var(--lijn);border-radius:2px}
.regstep{display:none}.regstep.on{display:block}
.field select{width:100%;border:1px solid var(--lijn);border-radius:var(--hoek-klein);padding:12px 14px;font-family:var(--font);font-size:var(--t-basis);color:var(--inkt);background:#fff;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%235E7082' stroke-width='2.6'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px}
.field select:focus{outline:none;border-color:var(--inkt);box-shadow:0 0 0 2px var(--inkt)}
/* Basisregel én de geneste: .hint stond alleen binnen .field, dus een hint
   daarbuiten — zoals de beveiligingsuitleg op het wachtscherm — kreeg
   bodytekst en stond daardoor gróter en donkerder dan de instructie erboven.
   Omgekeerde hiërarchie: de bijzaak schreeuwde het hardst. */
.hint{font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:6px;line-height:1.45}
.field .hint{font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:6px;line-height:1.45}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tsel{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.tsel button{border:1px solid var(--lijn);background:#fff;border-radius:999px;padding:9px 14px;font-family:var(--font);font-size:var(--t-meta);font-weight:700;color:var(--inkt-zwak);cursor:pointer;transition:.16s;display:inline-flex;align-items:center;gap:8px}
.tsel button:hover{border-color:var(--lijn)}
/* De vulling kwam uit de JS, in de kleur van het thema. Die kleur is weg,
   dus hier: zonder achtergrond staat de witte tekst van een gekozen chip
   op wit, en dan ziet een lid niet welke thema's het koos. Dat is de stap
   die iemand vindbaar maakt. */
.tsel button.on{background:var(--inkt);color:#fff;border-color:transparent}
.tsel button.meer{border-style:dashed;color:var(--inkt);font-weight:700}
.tsel button.meer:hover{border-color:var(--lijn-accent);background:var(--grond)}
.tsel button[disabled]{opacity:.4;cursor:not-allowed}
.tsel button[disabled]:hover{border-color:var(--lijn)}
.tcount{font-size:var(--t-meta);color:var(--inkt-zwak);margin:11px 0 4px}
/* Twee vragen in stap 2: waar ben je expert in, en waar wil je over bijgepraat
   worden. Ze mogen elkaar overlappen — vandaar de losse hint onder de tweede. */
.vraag{margin-bottom:20px}
.vlab{font-size:var(--t-basis);font-weight:800;color:var(--inkt);margin-bottom:3px}
.vsub{font-size:var(--t-meta);color:var(--inkt-zwak);line-height:1.5;margin-bottom:12px}
.vhint{font-size:var(--t-meta);color:var(--inkt-zwak);font-style:italic;line-height:1.45}
.toggle{display:flex;gap:11px;align-items:flex-start;background:var(--grond);border:1px solid var(--lijn);border-radius:var(--hoek-klein);padding:14px 15px;font-size:var(--t-meta);line-height:1.5;cursor:pointer}
.toggle input{margin-top:3px;flex:none}
.toggle b{color:var(--inkt);display:block}
.toggle span span{color:var(--inkt-zwak);font-size:var(--t-meta)}
.reg-nav{display:flex;gap:10px;margin-top:22px}
.reg-nav .btn{flex:1;justify-content:center;padding:13px}
.reg-nav .btn-ghost{flex:0 0 auto;padding:13px 20px}
.reg-foot{font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:18px}
.reg-foot a{color:var(--inkt);font-weight:700;cursor:pointer}
@media(max-width:860px){.auth{grid-template-columns:1fr;min-height:auto;padding:calc(var(--tegel) * 2)}.auth-side{padding:40px 28px}.auth-main{padding:20px 8px 8px}.login-card.reg{max-width:none}
  /* Op een telefoon stond het formulier pas onder 820px foto en tekst. Wie
     hier landt komt om zich aan te melden of in te loggen; het waarom komt
     daarna. */
  .auth-main{order:-1}
  .auth-side .nulive,.auth-side .vnote{display:none}}
@media(max-width:420px){.frow{grid-template-columns:1fr}}

/* Stond inline in de markup. Hier omdat inline stijl het schrappen van
   'unsafe-inline' uit de CSP blokkeert (zie koppen.py). */
/* display:none hoort hier en niet als hidden-attribuut: toonProfielkaart()
   in portaal.js zet style.display, en een inline style verliest het van
   [hidden] maar wint van een klasse. */
.profielkaart{display:none;background:var(--grond);border:1px solid var(--lijn);
  border-radius:var(--hoek-klein);padding:16px 18px;margin:0 0 18px}
.pk-tekst{font-size:var(--t-basis);color:var(--inkt-zwak);margin-top:4px}
.radarframe{width:100%;border:0;border-radius:var(--vorm-groot);
  min-height:900px;background:var(--vlak)}
/* Oplossingen op een telefoon: de titel kreeg naast het icoon en drie knoppen
   nog 90px, en de knoppen staken buiten de kaart. De acties gaan daar onder de
   tekst, op een eigen rij. */
.fmt>div:nth-child(2){min-width:0;flex:1}
@media(max-width:600px){.fmt{flex-wrap:wrap}.fmt .dl{margin-left:56px;flex-wrap:wrap}.fmt .keur{white-space:nowrap}}

/* Fouten bij het veld zelf en niet in een toast onderaan: wie op "Meld me aan"
   drukt kijkt naar het formulier, niet naar de hoek van het scherm. */
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--vng-rood);box-shadow:0 0 0 1px var(--vng-rood)}
.veldfout{display:flex;gap:8px;align-items:flex-start;margin-top:6px;font-size:var(--t-meta);font-weight:600;color:var(--inkt);line-height:1.45}
.veldfout::before{content:"";flex:none;width:4px;align-self:stretch;border-radius:2px;background:var(--vng-rood)}
.formfout{border-left:4px solid var(--vng-rood);background:var(--grond);border-radius:0 var(--hoek-klein) var(--hoek-klein) 0;padding:10px 14px;margin:0 0 14px;font-size:var(--t-basis);color:var(--inkt)}
.wacht-acties{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
/* De lijniconen die de emoji vervingen: donkerblauw, en de kleine in een
   stukkenlijst iets zachter zodat de titel de rij draagt. */
.fmt .ft,.toolrow .ic,.srcc .si,.empty .big{color:var(--inkt)}
.stk .d{display:inline-grid;place-items:center;color:var(--inkt-zwak);flex:none}
/* 44px is de ondergrens voor iets wat je met een duim raakt; "Bekijk" was 28. */
.km{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
/* Wie en wanneer stonden los naast elkaar, zonder teken ertussen. */
.q .meta span+span::before{content:"·";margin-right:8px}
/* Op een telefoon besloeg de themafilter vijf rijen voor de inhoud begon, en
   "Voor provincies" bungelde los aan het eind van een rij. Eén rij die je
   zijwaarts veegt; de actieve chip schuift in beeld (zie setT). */
@media(max-width:600px){
  .themabar{flex-wrap:nowrap;overflow-x:auto;margin:0 -24px;padding:2px 24px 10px;scroll-padding-inline:24px;scrollbar-width:thin}
  .themabar .tchip,.themabar .groeplab{flex:none;white-space:nowrap}
}
/* Het oordeel uit de radar (sinds 24 september): de soort als chip naast
   Extern, en de zin aan de adviseur onder de kop. Dezelfde vorm als in de
   radar-iframe. */
.xchip.soort{margin-left:6px;background:var(--grond);color:var(--inkt);border-color:var(--grond)}
.waarom{margin:4px 0 2px;padding-left:10px;border-left:3px solid var(--lijn-accent);font-size:var(--t-basis);font-weight:600;color:var(--inkt);line-height:1.45}
.waarom span{font-size:var(--t-label);font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-right:4px}

/* "Zo werkt het": drie stappen onder de kop van Collega's en Oplossingen.
   Antwoord op Johans vraag wat je er kunt verwachten, zonder uitlegpagina. */
.zowerkt{list-style:none;counter-reset:stap;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 26px;padding:0}
.zowerkt li{counter-increment:stap;display:flex;flex-direction:column;gap:4px;padding:16px 18px 16px 52px;position:relative;background:var(--grond);border-radius:var(--vorm-klein);font-size:var(--t-meta);color:var(--inkt-zwak);line-height:1.45}
.zowerkt li::before{content:counter(stap);position:absolute;left:16px;top:14px;width:24px;height:24px;border-radius:999px;background:var(--inkt);color:#fff;font-weight:800;font-size:var(--t-meta);display:grid;place-items:center}
.zowerkt b{font-size:var(--t-basis);color:var(--inkt)}
.zowerkt a{color:var(--inkt);font-weight:700;text-decoration:underline}
@media(max-width:820px){.zowerkt{grid-template-columns:1fr}}

/* ?start=kaal, zie portaal.js. */
.start-kaal #v-start .cyclus,
.start-kaal #v-start .grid2 > div:nth-child(2){display:none}
.start-kaal #v-start .grid2{grid-template-columns:minmax(0,1fr);max-width:980px}
.nb-knop{padding:18px 0 4px}

/* Oplossingen van leden (sinds 25 september). */
.opl-form{margin:20px 0}
.opl-besch{font-size:var(--t-meta);color:var(--inkt);margin-top:6px;max-width:720px;line-height:1.5}
#opl-echt .fmt{align-items:flex-start}
.opl-reactieknop{margin-top:6px}
.opl-reacties{margin-top:10px;padding-left:14px;border-left:2px solid var(--lijn);max-width:720px}

/* Echte oplossingen op de themapagina, met een link op de naam. */
.toolrow a.nm{color:var(--inkt);text-decoration:none}
.toolrow a.nm:hover{text-decoration:underline}
.toolrow .keur{margin-left:8px}
.toolrow.is-voorbeeld .nm{font-weight:600}
/* Het redactiescherm (#/redactie). */
.redrij{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--lijn)}
.redrij:last-child{border-bottom:0}
.redrij > div:first-child{min-width:0;flex:1}
.redrij p{margin-top:6px;color:var(--inkt)}
.redrij.is-verborgen{opacity:.6}
.redrij .keur,.redrij .xchip{margin-left:8px}
.redantw{margin-top:8px;padding-left:12px;border-left:3px solid var(--lijn)}
.redantw .btn-link{margin-left:8px}
.redtabel{width:100%;border-collapse:collapse;font-size:var(--t-meta)}
.redtabel th{text-align:left;color:var(--inkt-zwak);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--lijn)}
.redtabel td{padding:6px 8px;border-bottom:1px solid var(--lijn);color:var(--inkt)}
.redtabel tr.is-dood td{font-weight:700;background:var(--grond)}
#red-bronnen{overflow-x:auto}
@media(max-width:700px){.redrij{flex-direction:column}}
/* De agenda van leden. */
.agenda-form{margin-top:12px;padding-top:12px;border-top:1px solid var(--lijn)}
.agitem a{color:var(--inkt);text-decoration:underline}
.agitem .xchip.soort{margin-left:6px}

/* "Om te lezen" op de themapagina. */
.artrow a.t{display:block;color:var(--inkt);text-decoration:none}
.artrow a.t:hover{text-decoration:underline}
.artrow .xchip.soort{margin-left:0;margin-right:6px}