/* Ontwerpschermen Raadzoeker, naar de huisstijl van gemeente Rotterdam (onzestijl.rotterdam.nl):
   groen en wit voeren de boventoon, tekst altijd zwart, contrastgrijs als ondergrond met witte vlakken,
   geen kapitalen, links onderstreept, citaten met enkele aanhalingstekens. Bolder als dat op de pc staat, anders Arial.
   Typografie (UX-review): alleen gewicht 400 en 700; hiërarchie via grootte en ruimte. 8px-raster. */
:root{
  --groen:#00811F;--groen-d:#004C31;--groen-zacht:#E1EFE2;--groen-mid:#4EB051;
  --grijs:#EFF4F6;--grijs2:#DBE7EA;--lijn:#CAD6DA;--wit:#FFFFFF;--zwart:#000000;--sub:#3E4B50;
  --open:#EDB500;--laat:#E56E02;--blauw:#00548F;--water:#CFE3EF;
  --font:"Bolder",Arial,Helvetica,sans-serif;--r:8px;
}
/* Donker thema: volgt de systeeminstelling. Kleuren als tokens, zodat alle pagina's meegaan. */
:root{color-scheme:light dark}
@media (prefers-color-scheme: dark){
  :root{--groen:#1E8F3C;--groen-d:#8FE0A0;--groen-zacht:#173A25;--groen-mid:#4EB051;
    --grijs:#0F181C;--grijs2:#22343B;--lijn:#33454C;--wit:#16232A;--zwart:#E6EDEF;--sub:#A3B3B9;
    --open:#F2C230;--laat:#F08A3A;--blauw:#7DB9EA;--water:#1C3644}
  .knop:hover{background:#176E2F}
  img,video{filter:none}
}
*{box-sizing:border-box}
html{background:var(--grijs)}
body{margin:0;background:var(--grijs);color:var(--zwart);font:400 16px/1.5 var(--font)}
a{color:var(--zwart);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{font-family:var(--font);font-weight:700;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:40px;line-height:1.1}h2{font-size:24px}h3{font-size:18px}
p{margin:0}
:focus-visible{outline:3px solid var(--zwart);box-shadow:0 0 0 6px var(--wit);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.sub{color:var(--sub);font-size:14px}

/* kop: logo = home, hoofdmenu links, Lab en Over rechts */
.balk{background:var(--groen);color:var(--wit)}
.balk .in{max-width:1180px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.merk{display:flex;align-items:center;gap:10px;color:var(--wit);text-decoration:none}
.merk:hover{text-decoration:none;opacity:.92}
.merk svg{width:34px;height:20px;flex:none}
.merk img{height:34px;width:auto;flex:none}
.merk b{font-weight:700;font-size:20px;letter-spacing:-.01em}
.merk small{font-size:14px;border-left:1px solid rgba(255,255,255,.6);padding-left:10px}
.balk nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.balk nav a{color:var(--wit);text-decoration:none;padding:10px 12px;border-radius:999px;font-size:16px;min-height:44px;display:inline-flex;align-items:center}
.balk nav a:hover{text-decoration:underline}
.balk nav a.on{background:var(--wit);color:var(--zwart)}
.balk nav.rechts{margin-left:auto}
.balk nav.rechts a{font-size:15px}
.balk .bijgewerkt{font-size:13px;opacity:.9;margin-left:8px;white-space:nowrap;color:#fff;text-decoration:underline dotted}
.tag{display:inline-block;font-size:12px;border:1px solid currentColor;border-radius:4px;padding:1px 5px;margin-left:6px}
.pagina{max-width:1180px;margin:0 auto;padding:40px 24px 64px}
.sectie{margin-top:64px}
.sectie>h2,.koptekst{margin-bottom:16px}

/* vlakken: wit op grijs */
.vlak{background:var(--wit);border-radius:var(--r);padding:24px}
.vlak>h2{margin-bottom:16px}
.accent{border-top:4px solid var(--groen)}
.knop{display:inline-flex;align-items:center;gap:8px;background:var(--groen);color:var(--wit);border:0;border-radius:999px;padding:12px 20px;min-height:44px;font:700 16px/1 var(--font);text-decoration:none;cursor:pointer}
.knop:hover{background:var(--groen-d);text-decoration:none}
.knop.wit{background:var(--wit);color:var(--zwart);border:2px solid var(--zwart)}
.knop.wit:hover{background:var(--grijs)}
.ai{display:inline-block;font-size:13px;font-weight:400;background:var(--grijs);border-radius:4px;padding:2px 8px;vertical-align:middle}
.stip{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:baseline;flex:none}
.stip.open{background:var(--open);box-shadow:0 0 0 1px #6b5200}
.stip.laat{background:var(--laat)}
.stip.af{background:var(--groen)}
.stip.neutraal{background:var(--lijn)}
.cit{display:block;font-size:14px;color:var(--sub);margin-top:4px}
mark{background:var(--groen-zacht);color:inherit;padding:0 2px;border-radius:2px}
.groot{font-size:40px;font-weight:400;line-height:1}
.leeg{color:var(--sub)}
.voet{margin-top:64px;font-size:14px;color:var(--sub);max-width:80ch}

/* zoekveld met keuzelijst (combobox) */
.zoekveld{position:relative}
.zoekveld label{display:block;margin-bottom:8px}
.zoekveld input{width:100%;font:18px var(--font);padding:14px 16px;border:2px solid var(--zwart);border-radius:var(--r);background:var(--wit);min-height:52px}
.keuze{position:absolute;z-index:10;left:0;right:0;top:100%;background:var(--wit);border:2px solid var(--zwart);border-top:0;border-radius:0 0 var(--r) var(--r);max-height:340px;overflow:auto;display:none;margin:0;padding:0;list-style:none}
.keuze.on{display:block}
.keuze li{padding:10px 16px;cursor:pointer}
.keuze li[aria-selected="true"],.keuze li:hover{background:var(--groen-zacht)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips a,.chips button{border:1px solid var(--lijn);border-radius:999px;padding:8px 14px;font:15px var(--font);text-decoration:none;background:var(--wit);cursor:pointer;color:var(--zwart);min-height:40px;display:inline-flex;align-items:center}
.chips a:hover,.chips button:hover{border-color:var(--zwart)}
.chips .on{background:var(--zwart);color:var(--wit);border-color:var(--zwart)}

/* rijen met uitklapbare context */
.lijst{display:grid}
.item{border-top:1px solid var(--grijs2);padding:7px 0}
.item:first-child{border-top:0;padding-top:0}
/* compact: regel 1 datum, status en indiener (klein), regel 2 de titel */
.item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 12px;align-items:baseline;line-height:1.35}
.item summary::-webkit-details-marker{display:none}
.item summary .meta{grid-column:1;font-size:13px;color:var(--sub);display:flex;flex-wrap:nowrap;gap:0 12px;align-items:baseline;min-width:0;white-space:nowrap;overflow:hidden}
.item summary .meta .wie{overflow:hidden;text-overflow:ellipsis;min-width:0}
.item summary .t{grid-column:1}
.item summary .pijl{grid-column:2;grid-row:1/span 2;align-self:center;font-size:14px;color:var(--sub)}
.item[open] summary .pijl{transform:rotate(90deg)}
.item .ctx{margin:8px 0 0;background:var(--grijs);border-radius:6px;padding:10px 14px;font-size:15px;display:grid;gap:6px;max-width:75ch}
.item .ctx b{font-weight:700}
@media (max-width:700px){
  h1{font-size:30px}.pagina{padding:24px 16px 40px}.sectie{margin-top:40px}
  .balk .in{padding:8px 16px;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.balk .in::-webkit-scrollbar{display:none}.merk small{display:none}.balk nav{flex-wrap:nowrap}.balk nav a{white-space:nowrap;padding:8px 10px;font-size:15px}.balk nav.rechts{margin-left:0}.tag{display:none}
  .item summary .meta .wie{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.balk{display:none}}
/* horizontale balken (dossier, gebied) */
.balken{display:grid;gap:8px}
.balk2{display:grid;grid-template-columns:minmax(0,12em) 1fr 3.2em;gap:8px;align-items:center;font-size:14px}
.balk2 i{display:block;height:10px;border-radius:2px;background:var(--groen-d)}
.balk2 .v{text-align:right}
@media (max-width:700px){.balk .bijgewerkt{display:none}.balk nav.rechts{margin-left:0}}
[hidden]{display:none!important}

/* AI-samenvatting: zinnen met citaat-ballon, uitklapblokken (dossier en gebied) */
.stand{border-left:4px solid var(--groen);background:var(--groen-zacht);border-radius:0 var(--r) var(--r) 0;padding:16px 20px}
.stand .t{font-size:13px;color:var(--groen-d);font-weight:700;margin-bottom:4px}
.stand p{margin:0;line-height:1.5}
.stand.m{display:none;margin-top:16px}
section.deel h2{margin:0 0 12px}
.intro{margin:0;max-width:72ch;line-height:1.6}
.meerknop{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;margin-top:16px;padding:12px;border:1px solid var(--lijn);border-radius:6px;background:var(--grijs);font:15px var(--font);color:var(--zwart);cursor:pointer;min-height:48px}
.meerknop:hover{border-color:var(--zwart)}
.meerknop .pijl{transition:transform .15s}
.meerknop[aria-expanded="true"] .pijl{transform:rotate(180deg)}
.inh{margin-top:8px;border-top:1px solid var(--grijs2)}
.inh[hidden]{display:none}
.verd p{margin:16px 0 0;max-width:72ch;line-height:1.65}
.pt{border-bottom:1px solid var(--grijs2);padding:12px 0;line-height:1.5}
.pt:last-child{border-bottom:0}
.tlr{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:0 16px}
.tlr .d{color:var(--sub);font-size:14px;padding-top:13px;border-bottom:1px solid var(--grijs2)}
.tlr>:nth-last-child(-n+2){border-bottom:0}
.bron{font-size:13px;color:var(--sub)}
.bron a{color:var(--sub)}
.st{display:inline-block;font-size:13px;background:var(--grijs);border-radius:4px;padding:1px 8px;margin-left:4px}
.z{cursor:help;border-radius:2px;outline:none}
.z:hover,.z:focus-visible,.z.aan{background:var(--groen-zacht);text-decoration:underline dotted var(--groen);text-underline-offset:3px}
.cl{display:inline-block;margin-left:6px;padding:0 8px;border:1px solid var(--lijn);border-radius:999px;background:var(--wit);font:12px/20px var(--font);color:var(--sub);cursor:help;vertical-align:1px}
.cl:hover,.cl:focus-visible,.cl.aan{border-color:var(--groen);color:var(--groen)}
#bub{position:absolute;z-index:40;width:min(420px,calc(100vw - 32px));background:var(--zwart);color:var(--wit);padding:12px 14px;border-radius:6px;font:14px/1.45 var(--font);box-shadow:0 6px 20px rgba(0,0,0,.25)}
#bub a{color:var(--wit)}#bub .b{display:block;margin-top:6px;font-size:13px;opacity:.85}#bub[hidden]{display:none}
@media (max-width:900px){#bub{position:fixed;left:16px!important;right:16px;bottom:16px;top:auto!important;width:auto}}
.balk nav a.bijgewerkt{padding:4px 6px;min-height:0;font-size:13px;border-radius:4px}