/* Huisstijl van het projectenportaal. De tokens hieronder zijn de bron voor
   licht en donker. Donker staat er TWEE keer: één keer voor de systeemvoorkeur
   (tenzij de gebruiker expliciet licht koos) en één keer voor een expliciete
   keuze via data-theme="dark". */
:root{
  --paper:#F3F4F5; --surface:#FFFFFF; --line:#DDE0E3; --ink:#1B2A41;
  --ink-soft:#4A5866; --ink-faint:#77838F; --inset:#EDEFF1;
  --accent:#A8515E; --amber:#8A6318; --green:#3F6B4A;
  --shadow:0 1px 2px rgba(27,42,65,.06);
  --scrim:rgba(27,42,65,.45);
  --top:48px; --side:264px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#12171D; --surface:#1A212A; --line:#2C3540; --ink:#E8EBEE;
  --ink-soft:#B2BCC6; --ink-faint:#7E8A96; --inset:#212A34;
  --accent:#D98A94; --amber:#D2A64B; --green:#7FB08C;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --scrim:rgba(0,0,0,.6);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#12171D; --surface:#1A212A; --line:#2C3540; --ink:#E8EBEE;
  --ink-soft:#B2BCC6; --ink-faint:#7E8A96; --inset:#212A34;
  --accent:#D98A94; --amber:#D2A64B; --green:#7FB08C;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --scrim:rgba(0,0,0,.6);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.55}
body.noscroll{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
/* Toetsenbordfocus altijd zichtbaar, muisfocus niet. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.lbl,.card label,.dlg label,.navhead,.topstatus{font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- aanmelden ---------- */
#login{display:none;place-items:center;min-height:100vh;padding:24px}
#login.on{display:grid}
.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  padding:34px 32px;width:100%;max-width:400px}
.card h1{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:29px;margin:0 0 6px;letter-spacing:-.012em}
.card p{margin:0 0 22px;color:var(--ink-soft);font-size:14.5px}
.card label{display:block;margin:0 0 5px}
.card input{width:100%;padding:10px 12px;border:1px solid var(--line);background:var(--paper);margin-bottom:16px}
.card button{width:100%;padding:11px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer}
.card button:hover{opacity:.9}
.err{color:var(--accent);font-size:14px;margin:0 0 14px;min-height:20px}

/* ---------- raamwerk: bovenbalk, zijbalk, hoofdvlak ---------- */
#app{display:none;flex-direction:column;min-height:100vh}
#app.on{display:flex}
.topbar{position:sticky;top:0;z-index:30;height:var(--top);display:flex;align-items:center;gap:10px;
  padding:0 10px;background:var(--surface);border-bottom:1px solid var(--line)}
.wordmark{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.topstatus{margin-left:auto;font-size:10.5px;letter-spacing:.1em;white-space:nowrap}
.iconbtn{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid transparent;
  background:transparent;cursor:pointer;border-radius:4px;color:var(--ink-soft);font-size:20px;line-height:1;padding:0}
.iconbtn:hover{background:var(--inset);color:var(--ink)}
.burger{display:grid;gap:4px;width:16px}
.burger i{display:block;height:2px;background:currentColor}
/* Bovenbalk in COMPACTE stand: een strook van 28 px met alleen de hamburger,
   een klein woordmerk en de vouwknop. De klasse staat op BODY en niet op #app,
   want --top wordt ook gelezen door de lade (#hist) en die hangt buiten #app.
   Omdat #frame, #side en .drawer allemaal met var(--top) rekenen, groeit het
   ontwerpframe vanzelf mee met de vrijgekomen 20 px. */
body.tb-compact{--top:28px}
.topfold{flex:0 0 auto}
.topfold svg{display:block;transition:transform .15s}
.topfold[aria-expanded="false"] svg{transform:rotate(180deg)}
body.tb-compact .topbar{padding:0 4px;gap:6px}
.topnaam{display:none}
body.tb-compact .wordmark{display:none}
body.tb-compact .topnaam{display:block;font-family:Newsreader,Georgia,serif;font-weight:600;
  font-size:14px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.tb-compact .topstatus{display:none}
/* Melding "er is een nieuwere versie". Staat rechts in de balk, met de
   accentkleur, en blijft OOK in de compacte balk staan: het is het enige wat
   de eigenaar vertelt dat hij naar verouderde inhoud kijkt. */
.nieuwv{display:flex;align-items:center;gap:8px;margin-left:auto;
  padding:3px 4px 3px 10px;border:1px solid var(--accent);border-radius:4px;
  background:var(--inset);white-space:nowrap}
.topstatus + .nieuwv{margin-left:10px}
.nieuwv-t{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent)}
.nieuwv button{font:inherit;font-size:12px;padding:3px 10px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:var(--surface);border-radius:3px}
.nieuwv button:hover{filter:brightness(1.08)}
.nieuwv button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
body.tb-compact .nieuwv{padding:1px 3px 1px 7px;gap:6px}
body.tb-compact .nieuwv-t{font-size:9.5px;letter-spacing:.05em}
body.tb-compact .nieuwv button{font-size:11px;padding:1px 7px}
@media (max-width:640px){.nieuwv-t{display:none}.nieuwv{padding:3px}}
body.tb-compact .topfold{margin-left:auto}
/* Delen en verversen blijven staan in de compacte balk: op een telefoon is de
   deelknop juist dan het handigst, en verversen wil je altijd kunnen. */
#sharebtn svg,#reloadbtn svg{display:block}
#reloadbtn[disabled]{opacity:.5;cursor:default}
body.tb-compact .topbar .iconbtn{width:24px;height:24px}
body.tb-compact .burger{gap:3px;width:14px}
/* De kop van het project of rapport vouwt MEE met de bovenbalk (eigenaarswens
   2026-09-07). Alleen de balk inklappen liet de samenvatting en de regel
   "Updated ... by ..." staan, en dan wint het scherm nauwelijks ruimte. In
   compacte stand blijft de TITEL staan, want zonder titel weet je niet meer
   waar je bent, en verdwijnt de rest. */
/* EIGENAARSCORRECTIE 2026-09-07 (tweede ronde): inklappen moet ALLES boven de
   inhoud weghalen, niet alleen de samenvatting. Op een telefoon vulde de kop
   met titel, ontwerpbanner en knoppen nog steeds het halve scherm, en dan is
   inklappen zinloos. Dus in compacte stand verdwijnt de hele kop, inclusief de
   titel, de banner en de knoppen. Waar je bent staat gewoon in de bovenbalk en
   in de zijbalk, en een tik op de chevron brengt de kop terug. */
body.tb-compact .phead{display:none}
/* Zijbalk VOUWT naar links: het paneel schuift weg met een transform en de
   rasterkolom krimpt in dezelfde .2 s, zodat het hoofdvlak vloeiend breder
   wordt. Geen display:none, want dat springt. */
.body{display:grid;grid-template-columns:var(--side) minmax(0,1fr);flex:1;min-height:0;position:relative;
  transition:grid-template-columns .2s}
#app.sb-hidden .body{grid-template-columns:0px minmax(0,1fr)}
#side{width:var(--side);background:var(--surface);border-right:1px solid var(--line);z-index:1;
  display:flex;flex-direction:column;position:sticky;top:var(--top);height:calc(100vh - var(--top));overflow-y:auto;
  transform:none;visibility:visible;transition:transform .2s,visibility 0s}
#app.sb-hidden #side{transform:translateX(-100%);visibility:hidden;transition:transform .2s,visibility 0s .2s}
.backdrop{display:none}
.brand{padding:14px 12px 12px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.brand>div{min-width:0}
#sidehide{width:30px;height:30px;flex:0 0 30px;margin-top:-2px}
.brand b{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:19px;display:block;letter-spacing:-.01em}
.brand span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.navhead{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 2px 20px;font-size:10.5px}
.plus{width:28px;height:28px;border-color:var(--line);font-size:20px}
.plus:hover{border-color:var(--ink-faint)}
/* De twee lijsten (projecten, rapporten) scrollen samen binnen .navscroll, zodat
   Settings en Sign out in de voet altijd bereikbaar blijven, ook op een telefoon. */
.navscroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
nav{padding:4px 0 10px}
#reports{flex:1}
.navhead-r{margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.navempty{padding:8px 20px;color:var(--ink-faint);font-size:13.5px;margin:0}
.prow{display:flex;align-items:stretch}
.prow:hover,.prow.menu-open{background:var(--inset)}
.prow.sel{background:var(--inset)}
.prow .pl{flex:1;min-width:0;text-align:left;padding:7px 6px 8px 18px;border:0;border-left:2px solid transparent;
  background:transparent;color:var(--ink-soft);font-size:14.5px;line-height:1.35;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow.sel .pl{border-left-color:var(--accent);color:var(--ink);font-weight:500}
/* Twee regels per rij: de titel en "Updated <relatief>". Beide knippen af met een ellips. */
.pl .pt,.pl .upd{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl .upd{font-size:11.5px;color:var(--ink-faint);margin-top:1px;font-weight:400}
.prow .more{border:0;background:transparent;color:var(--ink-faint);cursor:pointer;padding:0 12px 0 6px;
  font-size:18px;line-height:1;opacity:0;transition:opacity .12s}
.prow:hover .more,.prow.sel .more,.prow.menu-open .more,.prow .more:focus-visible{opacity:1}
.prow .more:hover{color:var(--ink)}
@media (hover:none){.prow .more{opacity:1}}
/* De ster (eigenaarswens 2026-09-15). Uit staat hij alleen bij aanwijzen, aan
   staat hij altijd: dat is het punt van een favoriet, je moet hem zien zonder
   te zoeken. Amber en niet de accentkleur, want de accentkleur betekent in
   deze zijbalk al "dit staat open". */
.prow .fav{display:flex;align-items:center;border:0;background:transparent;color:var(--ink-faint);
  cursor:pointer;padding:0 2px 0 6px;opacity:0;transition:opacity .12s,color .12s}
.prow:hover .fav,.prow.sel .fav,.prow.menu-open .fav,.prow .fav:focus-visible{opacity:1}
.prow .fav.on{opacity:1;color:var(--amber)}
.prow .fav.on svg path{fill:currentColor}
.prow .fav:hover{color:var(--amber)}
.prow .fav:last-child{padding-right:12px}   /* een releaseregel heeft geen driepuntjesmenu ernaast */
@media (hover:none){.prow .fav{opacity:1}}
/* Rapporten: een onderwerp is een invouwbare kop (knop met chevron), de rijen eronder springen in. */
.topic+.topic{margin-top:2px}
.ttog{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:4px 14px 4px 16px;border:0;
  background:transparent;color:var(--ink-soft);font-size:13px;font-weight:500;cursor:pointer;text-align:left}
.ttog:hover{background:var(--inset);color:var(--ink)}
.ttog .chev{flex:0 0 auto;transition:transform .15s}
.ttog[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.ttog .ttitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttog .tcount{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;color:var(--ink-faint)}
.tbody .prow .pl{padding-left:34px}
.navempty a{color:var(--ink-soft)}
/* Datumfilter boven de rapportenlijst: twee smalle keuzelijsten naast elkaar,
   zodat ze in de zijbalk passen. Daaronder de regel met wat er verborgen is. */
.rfilter{display:flex;gap:6px;padding:6px 12px 4px 20px}
.rfilter select{flex:1;min-width:0;padding:4px 6px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-size:12.5px;cursor:pointer}
.rfilter select:hover{border-color:var(--ink-faint)}
.rhidden{margin:0;padding:2px 12px 10px 20px;color:var(--ink-faint);font-size:12.5px;line-height:1.5}
.rhidden button{border:0;background:transparent;padding:0;color:var(--ink-soft);font-size:12.5px;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.rhidden button:hover{color:var(--ink)}
/* Groependialoog: per groep een titelveld met Save, daaronder de rapporten met
   een keuzelijst om ze te verplaatsen. */
.tgroup{padding:14px 0;border-bottom:1px solid var(--line)}
.tgroup:first-child{padding-top:0}
.tgroup:last-of-type{border-bottom:0}
.tglist{list-style:none;margin:10px 0 0;padding:0}
.tglist li{display:flex;gap:8px;align-items:center;padding:5px 0;font-size:14px}
.tglist .tgname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tglist select{flex:0 1 190px;min-width:120px;padding:5px 6px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-size:13px;cursor:pointer}
.tgempty{margin:10px 0 0;color:var(--ink-faint);font-size:13.5px}
.tgnew{padding-top:14px;border-top:1px solid var(--line)}
/* De voet is smal: de lijst erboven heeft de ruimte harder nodig dan twee
   volle knoppen (eigenaarswens 2026-09-09). Wie er is staat links, de knoppen
   rechts in de hoek. */
.sidefoot{border-top:1px solid var(--line);padding:8px 12px 8px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.voetknoppen{display:flex;gap:6px;flex:0 0 auto}
.sidefoot button{padding:4px 9px;border:1px solid var(--line);background:var(--paper);
  cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.sidefoot button:hover{border-color:var(--ink-faint);color:var(--ink)}
.sidefoot button.sel{border-color:var(--accent);color:var(--accent)}
.sidefoot button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Wie er is, op EEN regel. Onder elkaar groeide de voet met elk extra tabblad
   mee, en juist die ruimte hoort bij de lijst erboven. */
.who{font-size:11.5px;color:var(--ink-faint);line-height:1.4;min-width:0;
  display:flex;flex-wrap:nowrap;gap:10px;overflow:hidden}
.who div{display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px}

/* ---------- hoofdvlak ---------- */
main{flex:1;min-width:0;display:flex;flex-direction:column}
.pad{padding:34px 40px 90px;max-width:1120px;width:100%}
h2.ptitle{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:32px;margin:0 0 4px;letter-spacing:-.015em}
.psum{color:var(--ink-soft);margin:0 0 26px;max-width:70ch}

/* Projectkop: smal, met bewerkbare titel en samenvatting. Het ontwerp zelf
   staat in het iframe eronder en vult de rest van het scherm. */
#view-project{display:flex;flex-direction:column;flex:1}
.phead{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:flex-start;justify-content:space-between;
  padding:12px 22px 10px;background:var(--surface);border-bottom:1px solid var(--line)}
.ptext{flex:1 1 320px;min-width:0}
.ph-title{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:24px;margin:0;letter-spacing:-.012em;line-height:1.2}
.ph-sum{margin:2px 0 0;color:var(--ink-soft);font-size:14px;max-width:80ch}
.ph-title,.ph-sum{border-radius:2px;padding:0 4px;margin-left:-4px}
[contenteditable]:empty::before{content:attr(data-ph);color:var(--ink-faint)}
[contenteditable]:hover{background:var(--inset)}
[contenteditable]:focus{outline:2px solid var(--accent);outline-offset:2px;background:var(--surface)}
.pactions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.pactions>button,.vbanner button{padding:6px 12px;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:13.5px}
.pactions>button:hover,.vbanner button:hover{border-color:var(--ink-faint)}
.pactions>button[aria-expanded="true"]{border-color:var(--accent)}
.vbanner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:5px 10px;font-size:13.5px;
  border:1px solid var(--line);border-left:3px solid var(--amber);background:var(--inset)}
.vbanner .sep{color:var(--ink-faint)}
.vbanner button{padding:3px 9px;font-size:13px;background:var(--surface)}
.vbanner button:disabled{opacity:.5;cursor:default}
/* Rapportkop: zelfde maat als de projectkop, maar niets is bewerkbaar. */
.rtopic{margin:0 0 2px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.rmeta{margin:4px 0 0;font-size:13px;color:var(--ink-faint)}
.rversion{font-size:13.5px;color:var(--ink-soft);white-space:nowrap}
.pactions>a{font-size:13.5px;padding:6px 4px;white-space:nowrap}
.pactions>button:disabled{opacity:.5;cursor:default}
#frame{display:block;width:100%;border:0;flex:1;min-height:calc(100vh - var(--top));background:var(--paper)}
@supports (height:100dvh){#frame{min-height:calc(100dvh - var(--top))}}

/* ---------- instellingen (blokken, tabellen) ---------- */
section.block{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  padding:20px 22px;margin-bottom:20px}
section.block h3{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:20px;margin:0 0 12px}
.field{width:100%;padding:8px 10px;border:1px solid var(--line);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:400;padding:8px 10px;
  border-bottom:1px solid var(--ink);background:var(--inset);white-space:nowrap}
td{border-bottom:1px solid var(--line);padding:9px 10px;vertical-align:top}
.rowdel{border:0;background:transparent;color:var(--ink-faint);cursor:pointer;padding:6px 8px}
.rowdel:hover{color:var(--accent)}
tr.revoked td{color:var(--ink-faint)}
.faint{color:var(--ink-faint)}
/* Nieuwe API-sleutel: één keer zichtbaar, in een kader dat opvalt. */
.aknew{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--green);background:var(--inset)}
.aknew p{margin:0 0 8px;font-size:14px}
.aknew .tools{margin-top:0}
.aknew input{flex:1;min-width:240px;width:auto;background:var(--surface)}
/* Sleutelcel in de tabel: gemaskeerd, of na Show de echte sleutel in een
   leesveld met een kopieerknop ernaast. */
.akcel{min-width:250px}
.akveld{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.akveld input{flex:1;min-width:150px;width:auto;background:var(--inset);font-size:12.5px;padding:5px 8px;border:1px solid var(--line)}
.akmask{letter-spacing:.06em;margin-right:6px}
.aknote{color:var(--ink-faint);font-size:13px;white-space:normal}
.tools{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tools button{padding:6px 12px;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:13.5px}
.tools button:hover{border-color:var(--ink-faint)}
.toast{position:fixed;right:18px;bottom:18px;z-index:60;background:var(--ink);color:var(--paper);
  padding:10px 16px;font-size:14px;box-shadow:var(--shadow);opacity:0;transition:opacity .2s;pointer-events:none;max-width:min(420px,calc(100vw - 36px))}
.toast.on{opacity:1}

/* ---------- geschiedenislade (rechts) ---------- */
.drawer{position:fixed;top:var(--top);right:0;bottom:0;width:min(420px,100vw);z-index:40;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.08);
  display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .2s,visibility .2s}
.drawer.on{transform:none;visibility:visible}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 12px 20px;border-bottom:1px solid var(--line)}
.dhead h2{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:20px;margin:0;letter-spacing:-.01em}
.hlist{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.hlist li{padding:10px 20px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.hlist time{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px}
.hby{font-weight:500}
.hkey{font-family:"IBM Plex Mono",monospace;font-size:12.5px}
.hval{font-family:"IBM Plex Mono",monospace;font-size:12.5px;background:var(--inset);padding:1px 5px}
.hempty{color:var(--ink-faint)}

/* ---------- driepuntjesmenu ---------- */
.menu{position:fixed;z-index:50;min-width:230px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.14);padding:4px 0}
.menu [role="menuitem"]{display:block;width:100%;text-align:left;padding:9px 14px;border:0;background:transparent;
  cursor:pointer;color:var(--ink);text-decoration:none;font-size:14px}
.menu [role="menuitem"]:hover,.menu [role="menuitem"]:focus-visible{background:var(--inset);outline:none}
.menu .danger{color:var(--accent)}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}

/* ---------- dialogen ---------- */
dialog.dlg{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0;
  width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);box-shadow:0 16px 48px rgba(0,0,0,.22);
  display:none;flex-direction:column}
dialog.dlg[open]{display:flex}
dialog.dlg::backdrop{background:var(--scrim)}
dialog.dlg .dbody{padding:16px 20px;overflow-y:auto}
.dsec{padding:16px 20px;border-bottom:1px solid var(--line)}
.dsec:last-of-type{border-bottom:0}
.dsec h3{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:17px;margin:0 0 8px}
.dlg label{display:block;margin:0 0 5px}
.dlg input[type="text"]{width:100%;padding:9px 12px;border:1px solid var(--line);background:var(--paper)}
.dlg input[type="file"]{flex:1;min-width:0;font-size:13.5px;padding:6px 0}
.dlg .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dlg .row input[type="text"]{flex:1;min-width:180px;width:auto}
.dlg button:not(.iconbtn){padding:8px 14px;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:14px;white-space:nowrap}
.dlg button:not(.iconbtn):hover{border-color:var(--ink-faint)}
.dlg button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dlg button.danger{background:var(--accent);color:#fff;border-color:var(--accent)}
.dlg button:disabled{opacity:.5;cursor:default}
.dfoot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
.dsec-alt{background:var(--inset)}
.dlg button.linkbtn{border:0;background:transparent;padding:0;color:var(--ink-soft);font-size:13.5px;text-decoration:underline;text-underline-offset:2px}
.dlg button.linkbtn:hover{color:var(--ink);border:0}
.dlg button.linkbtn[aria-expanded="true"]{color:var(--ink);text-decoration:none;font-weight:500}
.hint{color:var(--ink-soft);font-size:13.5px;margin:0 0 10px}
.note{margin:0;padding:0 20px 14px;color:var(--ink-soft);font-size:13.5px}
.dlg .err.note{min-height:0;padding-top:0}
.dlg .err.note:empty{display:none}
dl.report{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:10px 18px;font-size:14px}
dl.report dt{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding-top:3px}
dl.report dd{margin:0}
dl.report ul,.errlist{margin:0;padding-left:18px}
dl.report li,.errlist li{margin:0 0 6px}
.none{color:var(--ink-faint)}
.errid{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.06em}
.warnh{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin:14px 0 6px}

/* Filter over de hele zijbalk. Staat bovenaan, boven Projects, want hij geldt
   voor alle drie de lijsten en niet voor een ervan. */
.zoekbalk{display:flex;align-items:center;gap:4px;padding:12px 12px 4px 20px}
.zoekbalk input{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font:inherit;font-size:13px}
.zoekbalk input:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.zoekbalk input::-webkit-search-cancel-button{display:none}
.zoekbalk .iconbtn{width:28px;height:28px;flex:0 0 28px;font-size:17px}
.zoekmeld{margin:0;padding:2px 12px 6px 20px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.06em;color:var(--ink-faint)}
.zoekmeld.leeg{color:var(--accent)}

/* Releasenotities. De zijbalkregel toont de bouw en de datum, het leesvlak is
   gewoon een tekstpagina: dit wordt gelezen, niet bediend. */
.prow .pl .sub{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.08em;color:var(--ink-faint);margin-top:2px}
.release{max-width:74ch}
.reyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px}
.release h1{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:30px;
  line-height:1.15;margin:0 0 8px;letter-spacing:-.015em;text-wrap:balance}
.rsource{font-size:13px;color:var(--ink-soft);margin:0 0 22px;padding-left:10px;
  border-left:2px solid var(--line)}
.rbody h2{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:21px;margin:26px 0 8px}
.rbody h3{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin:22px 0 6px}
.rbody h4,.rbody h5{font-size:15px;margin:18px 0 6px}
.rbody p{margin:0 0 12px;line-height:1.6}
.rbody ul{margin:0 0 14px;padding-left:20px}
.rbody li{margin:0 0 6px;line-height:1.55}
.rbody code{font-family:"IBM Plex Mono",monospace;font-size:12.5px;background:var(--inset);padding:1px 4px}
.rbody pre{background:var(--inset);border:1px solid var(--line);padding:12px 14px;overflow-x:auto;margin:0 0 14px}
.rbody pre code{background:none;padding:0}
.rbody hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.rbody a{color:var(--accent)}
.rfoot{margin:28px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;color:var(--ink-faint)}

/* Het archief onderaan de zijbalk: alles wat is weggezet, van beide soorten,
   met een knop om het terug te halen. Rustiger dan de gewone lijst, want het
   is de plek waar je normaal niet kijkt. */
.archief{border-top:1px solid var(--line);margin-top:6px;padding-top:2px}
.archief .ttitle{color:var(--ink-faint)}
.arow .az{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1;padding:7px 6px 7px 20px;
  color:var(--ink-soft);font-size:13.5px}
.arow .az .pt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asoort{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);flex:0 0 auto}
.arow .terug{background:none;border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 8px;margin-right:10px;flex:0 0 auto}
.arow .terug:hover{border-color:var(--accent);color:var(--accent)}
.arow .terug:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.navhead .plus + .plus{margin-left:2px}

/* ---------- klein scherm: zijbalk wordt een uitschuiflade ---------- */
@media (max-width:820px){
  .body,#app.sb-hidden .body{grid-template-columns:minmax(0,1fr);transition:none}
  #side,#app.sb-hidden #side{position:fixed;top:0;left:0;height:100vh;z-index:45;transform:translateX(-100%);visibility:hidden;
    transition:transform .2s,visibility 0s .2s;box-shadow:8px 0 24px rgba(0,0,0,.12)}
  @supports (height:100dvh){#side,#app.sb-hidden #side{height:100dvh}}
  #app.sb-open #side{transform:none;visibility:visible;transition:transform .2s,visibility 0s}
  .backdrop{position:fixed;inset:0;background:var(--scrim);z-index:44}
  #app.sb-open .backdrop{display:block}
  .pad{padding:22px 18px 80px}
  .phead{padding:10px 14px 8px;gap:6px 12px}
  .ph-title{font-size:20px}
  .ph-sum{font-size:13.5px}
  .pactions{width:100%;justify-content:flex-start}
  .vbanner{width:100%}
  .ttog{min-height:44px}
  /* Op een telefoon blijft de strook 28 px, maar de knoppen erin vullen hem
     helemaal, anders is de hamburger nauwelijks te raken. */
  body.tb-compact .topbar .iconbtn{width:28px;height:28px}
  /* Vinger in plaats van muis: filters en verplaatskeuzes 44 px hoog. */
  .rfilter select,.tglist select{min-height:44px}
  .rhidden button{display:inline-block;min-height:44px;padding:0 2px}
  .navhead-r .plus{width:36px;height:36px}
  .rmeta{font-size:12.5px}
  .vbanner .sep{display:none}
  .drawer{top:0;width:100vw}
  dialog.dlg{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
  dialog.dlg .row{flex-direction:column;align-items:stretch}
  dialog.dlg .row input[type="text"]{min-width:0}
  dl.report{grid-template-columns:1fr;gap:4px}
  dl.report dd{margin:0 0 8px}
}

/* Wie minder beweging wil, krijgt geen schuifanimaties. */
@media (prefers-reduced-motion: reduce){
  .body,#side,#app.sb-hidden #side,#app.sb-open #side,.drawer,.toast,.prow .more,.ttog .chev,
  .topfold svg{transition:none}
}