/* Demo-portaal: bouwt voort op /style.css */
.demo-tag{font-size:.8rem;font-weight:600;color:#3a2a00;background:var(--warm);border-radius:999px;padding:4px 10px}
.portaal{max-width:68rem;margin:0 auto;padding:24px 16px 120px}
.kop{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-end}
.kop h1{margin:.15em 0 .1em}
.kop .sub{color:var(--muted);margin:0}
.kop .pill{margin:0}
.kop-vera{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow);font-size:.9rem}
.kop-vera img{border-radius:50%}
.kop-vera span{display:block;color:var(--muted);font-size:.82rem}
.tabs{display:flex;gap:4px;margin:24px 0 20px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font:600 .95rem var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}
.raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tegel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.tegel .lab{font-size:.85rem;color:var(--muted)}
.tegel .getal{font:700 1.6rem var(--serif);margin:.15em 0;font-variant-numeric:tabular-nums}
.tegel .klein{font-size:.85rem;color:var(--muted)}
.ok{color:var(--accent)} .let{color:#b45309} .fout{color:#b42318}
@media (prefers-color-scheme:dark){.let{color:#f2b84b}.fout{color:#ff8a7a}}
.twee{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;margin-top:20px}
.kaart{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.kaart h2{font-size:1.15rem;margin:0 0 12px}
.akkoord{border:1px solid var(--line);border-left:4px solid var(--warm);border-radius:10px;padding:12px 14px;margin:10px 0}
.akkoord.klaar{border-left-color:var(--accent);opacity:.75}
.akkoord p{margin:.2em 0}
.akkoord .uitleg{font-size:.88rem;color:var(--muted)}
.akkoord .knoppen{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.akkoord .btn{padding:7px 14px;font-size:.9rem}
.feed{list-style:none;padding:0;margin:0}
.feed li{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.93rem}
.feed li:last-child{border-bottom:0}
.feed time{color:var(--muted);font-size:.8rem;white-space:nowrap;padding-top:2px}
table.lijst{font-size:.93rem}
table.lijst th{font-size:.82rem;color:var(--muted);font-weight:600}
table.lijst td.n,table.lijst th.n{text-align:right}
.label{display:inline-block;font-size:.75rem;font-weight:600;border-radius:999px;padding:2px 8px;background:var(--accent-soft);color:var(--accent)}
.label.let{background:var(--warm-soft);color:#8a5a00}
@media (prefers-color-scheme:dark){.label.let{color:var(--warm)}}
.balk{height:8px;background:var(--bg2);border-radius:999px;overflow:hidden;margin-top:8px}
.balk i{display:block;height:100%;background:var(--accent);border-radius:999px}
.tijdlijn td:last-child{min-width:140px}
.stem{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;margin:12px 0}
.stem .keus{display:flex;gap:6px;flex-wrap:wrap}
.stem .keus button{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:5px 11px;font:500 .85rem var(--sans);cursor:pointer}
.stem .keus button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
@media (prefers-color-scheme:dark){.stem .keus button[aria-pressed=true]{color:#0f1a16}}
.uitslag{font-weight:600;margin-top:8px}
.agenda{padding-left:1.3em}
.agenda li{margin:.25em 0}
.doc{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.doc:last-child{border-bottom:0}
.doc .ico{font-size:1.4rem}
.doc p{margin:.15em 0;font-size:.92rem;color:var(--muted)}
.demo-voet{font-size:.85rem;color:var(--muted);margin-top:32px;border-top:1px solid var(--line);padding-top:14px}
@media (max-width:860px){
  .raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .twee{grid-template-columns:minmax(0,1fr)}
}
.kop-vera .ai-label{display:inline-block;color:#3a2a00;font-size:.7rem}