:root{
  --paper:#FAF8F4; --panel:#F2EEE6; --card:#FFFFFF;
  --ink:#14201E; --ink-soft:#3B4845; --muted:#6E7C78;
  --line:#E5DED2; --line-2:#D8CFBF;
  --teal:#0E7C66; --teal-ink:#0A4E40; --teal-wash:#E4F0EB;
  --amber:#C97E18; --rose:#B64A36;
  --radius:14px; --shadow:0 1px 2px rgba(20,32,30,.04), 0 8px 28px rgba(20,32,30,.06);
  --maxw:1080px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,sans-serif; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:"Bricolage Grotesque","Inter",sans-serif; font-weight:700; letter-spacing:-.02em; margin:0}
a{color:var(--teal-ink); text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}

/* ── wordmark ─────────────────────────────────────────────────────────────*/
.brand{display:inline-flex; align-items:center; gap:.55rem; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; letter-spacing:-.02em; color:var(--ink)}
.brand .pivot{position:relative; width:26px; height:26px; flex:0 0 auto}
.brand .pivot svg{display:block}
.brand small{font-family:"Inter",sans-serif; font-weight:500; letter-spacing:.02em; color:var(--muted); font-size:.72rem; text-transform:uppercase}

/* ── topbar ───────────────────────────────────────────────────────────────*/
.topbar{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--paper) 86%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.topbar .wrap{max-width:var(--maxw); margin:0 auto; padding:.85rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.topbar nav{display:flex; align-items:center; gap:.4rem}
.who{color:var(--muted); font-size:.82rem}

.wrap{max-width:var(--maxw); margin:0 auto; padding:1.25rem}

/* ── buttons ──────────────────────────────────────────────────────────────*/
.btn{display:inline-flex; align-items:center; gap:.45rem; font:inherit; font-weight:600; cursor:pointer;
  border:1px solid var(--line-2); background:var(--card); color:var(--ink);
  padding:.5rem .85rem; border-radius:10px; transition:border-color .15s, background .15s, transform .05s}
.btn:hover{border-color:var(--teal); color:var(--teal-ink)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--teal); border-color:var(--teal); color:#fff}
.btn.primary:hover{background:var(--teal-ink); border-color:var(--teal-ink); color:#fff}
.btn.ghost{border-color:transparent; background:transparent}
.btn:focus-visible, a:focus-visible, input:focus-visible{outline:2px solid var(--teal); outline-offset:2px}

/* ── login ────────────────────────────────────────────────────────────────*/
.center{min-height:100dvh; display:grid; place-items:center; padding:1.5rem}
.login{width:100%; max-width:380px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.9rem}
.login h1{font-size:1.5rem; margin-bottom:.25rem}
.login p.sub{color:var(--muted); margin:.1rem 0 1.4rem; font-size:.9rem}
.field{display:block; margin-bottom:.8rem}
.field label{display:block; font-size:.78rem; font-weight:600; color:var(--ink-soft); margin-bottom:.3rem}
.field input{width:100%; padding:.62rem .7rem; border:1px solid var(--line-2); border-radius:10px; font:inherit; background:#fff; color:var(--ink)}
.field input:focus{border-color:var(--teal)}
.msg{font-size:.82rem; margin-top:.7rem; min-height:1.1em}
.msg.err{color:var(--rose)}

/* ── hub cards ────────────────────────────────────────────────────────────*/
.hub-head{padding:2.4rem 0 1.2rem}
.hub-head .eyebrow{font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--teal-ink); font-weight:600}
.hub-head h1{font-size:2.1rem; margin:.35rem 0 .3rem}
.hub-head p{color:var(--muted); max-width:46ch; margin:0}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; margin-top:1.5rem}
.dcard{display:flex; flex-direction:column; gap:.5rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow); transition:transform .12s, border-color .12s}
.dcard.live:hover{transform:translateY(-3px); border-color:var(--teal)}
.dcard .num{font-family:"Bricolage Grotesque"; font-size:.8rem; color:var(--muted)}
.dcard h3{font-size:1.15rem}
.dcard p{color:var(--muted); font-size:.86rem; margin:0; flex:1}
.dcard .go{font-weight:600; color:var(--teal-ink); font-size:.86rem}
.dcard.soon{opacity:.6}
.dcard.soon .go{color:var(--muted)}
.tag-soon{align-self:flex-start; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--amber); border:1px solid color-mix(in srgb,var(--amber) 40%,transparent); padding:.1rem .4rem; border-radius:6px}

/* ── summary strip ────────────────────────────────────────────────────────*/
.strip{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:1.2rem 0 1.4rem}
.strip .cell{background:var(--card); padding:1rem 1.2rem}
.strip .k{color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em}
.strip .v{font-family:"Bricolage Grotesque"; font-size:1.7rem; margin-top:.15rem}

/* ── toolbar ──────────────────────────────────────────────────────────────*/
.toolbar{display:flex; gap:.6rem; align-items:center; margin-bottom:.9rem; flex-wrap:wrap}
.search{flex:1; min-width:200px; display:flex; align-items:center; gap:.5rem; background:var(--card); border:1px solid var(--line-2); border-radius:10px; padding:.5rem .7rem}
.search input{border:0; outline:0; font:inherit; width:100%; background:transparent; color:var(--ink)}
.search svg{flex:0 0 auto; color:var(--muted)}

/* ── event list ───────────────────────────────────────────────────────────*/
.elist{display:flex; flex-direction:column; gap:.5rem}
.ev{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.ev>button.row{all:unset; cursor:pointer; display:grid; grid-template-columns:88px 1fr auto; gap:1rem; align-items:center; padding:.85rem 1rem; width:100%; box-sizing:border-box}
.ev>button.row:hover{background:var(--panel)}
.ev .date{font-family:"Bricolage Grotesque"; line-height:1.1}
.ev .date .d{font-size:1.15rem}
.ev .date .y{font-size:.74rem; color:var(--muted)}
.ev .title{min-width:0}
.ev .title .t{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ev .title .s{font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.ev .metrics{display:flex; align-items:center; gap:1.1rem}
.ev .count{text-align:right}
.ev .count .n{font-family:"Bricolage Grotesque"; font-size:1.05rem}
.ev .count .l{font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}

/* signature: opkomst-balans (turnout bar with a fulcrum) */
.turn{--pct:0; width:128px}
.turn .bar{position:relative; height:7px; border-radius:99px; background:var(--line); overflow:hidden}
.turn .bar i{position:absolute; inset:0 auto 0 0; width:calc(var(--pct)*1%); background:linear-gradient(90deg,var(--teal),#1AA585); border-radius:99px}
.turn .lab{display:flex; justify-content:space-between; margin-top:.3rem; font-size:.66rem; color:var(--muted)}
.turn .lab b{color:var(--teal-ink); font-weight:700}

/* participant panel */
.panel{border-top:1px solid var(--line); padding:.4rem .6rem .8rem; display:none}
.ev.open .panel{display:block}
.ptable{width:100%; border-collapse:collapse; font-size:.86rem}
.ptable th{text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; padding:.45rem .6rem; border-bottom:1px solid var(--line)}
.ptable td{padding:.45rem .6rem; border-bottom:1px solid var(--panel)}
.ptable tr:last-child td{border-bottom:0}
.pill{display:inline-block; font-size:.7rem; font-weight:600; padding:.08rem .5rem; border-radius:99px}
.pill.ja{background:var(--teal-wash); color:var(--teal-ink)}
.pill.nee{background:#F6E4DF; color:var(--rose)}
.pill.onb{background:var(--panel); color:var(--muted)}
.loading,.empty{color:var(--muted); padding:1.2rem; text-align:center; font-size:.9rem}

.foot{color:var(--muted); font-size:.76rem; text-align:center; padding:2rem 1rem 1rem}

@media (max-width:640px){
  .strip{grid-template-columns:1fr 1fr}
  .ev>button.row{grid-template-columns:64px 1fr; }
  .ev .metrics{grid-column:1/-1; justify-content:space-between; padding-top:.2rem}
  .turn{width:96px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}