/* ============================================================
   app.css — letterlijk overgenomen uit de referentie (Delft
   Uitgelicht, editie 6). Alleen onderaan staan aanvullingen
   voor de schil (laad-/foutmelding, oudere-editiebanner,
   archiefpagina); het ontwerp zelf is ongewijzigd.
   ============================================================ */

:root{
  --paper:#F5F5F0;
  --surface:#FFFFFF;
  --hover:#EDEDE5;
  --ink:#15171B;
  --ink2:#565B64;
  --ink3:#8A8F98;
  --line:#DFDFD6;
  --line2:#ECECE4;
  --accent:#2440C8;
  --accent-ink:#2440C8;
  --accent-soft:#E7EAFA;
  --hot:#B81657;
  --hot-soft:#FAE6EE;
  --free:#186647;
  --panel-bg:#2440C8;
  --panel-ink:#F2F3FF;
  --panel-dim:#AFB9F0;
  --panel-line:#4A61D8;
  --panel-hover:#2B49DC;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1013;
    --surface:#161A1F;
    --hover:#171B21;
    --ink:#EDEDE7;
    --ink2:#A2A8B2;
    --ink3:#70767F;
    --line:#282D34;
    --line2:#1F242A;
    --accent:#8FA3FF;
    --accent-ink:#8FA3FF;
    --accent-soft:#1A2140;
    --hot:#FF7CAC;
    --hot-soft:#341826;
    --free:#5AC99D;
    --panel-bg:#1A2A80;
    --panel-ink:#EDEFFF;
    --panel-dim:#9FAEF0;
    --panel-line:#2F449B;
    --panel-hover:#20328F;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1013;
  --surface:#161A1F;
  --hover:#171B21;
  --ink:#EDEDE7;
  --ink2:#A2A8B2;
  --ink3:#70767F;
  --line:#282D34;
  --line2:#1F242A;
  --accent:#8FA3FF;
  --accent-ink:#8FA3FF;
  --accent-soft:#1A2140;
  --hot:#FF7CAC;
  --hot-soft:#341826;
  --free:#5AC99D;
  --panel-bg:#1A2A80;
  --panel-ink:#EDEFFF;
  --panel-dim:#9FAEF0;
  --panel-line:#2F449B;
  --panel-hover:#20328F;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- masthead ---------- */
.masthead{padding:56px 0 28px}
.eyebrow{
  font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);display:flex;gap:14px;flex-wrap:wrap;
}
.eyebrow b{color:var(--accent-ink);font-weight:500}
h1{
  font-size:clamp(46px,9vw,88px);line-height:.94;margin:16px 0 0;
  font-weight:700;letter-spacing:-.035em;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--accent-ink)}
.standfirst{
  font-family:"Newsreader",Georgia,serif;font-size:19px;line-height:1.5;
  color:var(--ink2);max-width:56ch;margin:18px 0 0;
}
.rule{height:2px;background:var(--ink);margin:32px 0 0;opacity:.9}

/* ---------- picks panel ---------- */
.panel{background:var(--panel-bg);color:var(--panel-ink);padding:44px 0 48px}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--panel-line);padding-bottom:14px;margin-bottom:20px}
.panel-head h2{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em}
.panel-head p{margin:0;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--panel-dim)}
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px}
.pick{position:relative;border-top:1px solid var(--panel-line);padding:16px 12px 20px 0;
  margin-right:-12px;transition:background .14s}
.pick:hover{background:var(--panel-hover)}
.pick .pd{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--panel-dim)}
.pick h3{margin:8px 0 6px;font-size:21px;line-height:1.15;font-weight:600;letter-spacing:-.015em}
.pick h3 a{text-decoration:none}
.pick h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.pick p{margin:0 0 10px;font-family:"Newsreader",Georgia,serif;font-size:15.5px;line-height:1.45;
  color:var(--panel-dim)}
.pick .cal{position:relative;z-index:2}
.pick .cal a{color:var(--panel-ink);border-bottom-color:var(--panel-line)}
.pick .cal a:hover{border-bottom-color:var(--panel-ink)}

/* ---------- filters ---------- */
.filterbar{position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--line);padding:14px 0 12px}
.frow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.frow:last-child{margin-bottom:0}
.flabel{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);width:74px;flex:none}
.chip{
  font-family:"DM Mono",monospace;font-size:11.5px;letter-spacing:.03em;
  padding:5px 11px;border:1px solid var(--line);background:transparent;color:var(--ink2);
  border-radius:2px;cursor:pointer;transition:.12s;
}
.chip:hover{border-color:var(--ink3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
#q{
  font-family:"DM Mono",monospace;font-size:12px;padding:6px 11px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);border-radius:2px;width:230px;
}
#q::placeholder{color:var(--ink3)}
.count{font-family:"DM Mono",monospace;font-size:11px;color:var(--ink3);margin-left:auto}
.reset{background:none;border:none;font-family:"DM Mono",monospace;font-size:11px;
  color:var(--accent-ink);cursor:pointer;text-decoration:underline;padding:0}

/* ---------- agenda ---------- */
main{padding:38px 0 0}
.weekhead{display:flex;align-items:baseline;gap:16px;margin:44px 0 4px;
  border-bottom:1px solid var(--ink);padding-bottom:8px}
.weekhead:first-of-type{margin-top:8px}
.weekhead h2{margin:0;font-size:15px;font-weight:600;letter-spacing:.02em}
.weekhead span{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);margin-left:auto}
.ev{position:relative;display:grid;grid-template-columns:96px 1fr;gap:26px;
  padding:20px 14px 20px 12px;margin:0 -14px 0 -12px;
  border-bottom:1px solid var(--line2);transition:background .14s}
.ev:hover{background:var(--hover)}
.ev.hidden{display:none}
.date{font-family:"DM Mono",monospace;font-variant-numeric:tabular-nums;padding-top:2px}
.date .num{display:block;font-size:23px;line-height:1;color:var(--ink);letter-spacing:-.02em}
.date .mo{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);margin-top:5px}
.body h3{margin:0 0 5px;font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.015em;
  text-wrap:balance}
.body h3 a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.ev:hover .body h3 a{border-color:var(--accent);color:var(--accent-ink)}
.body h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.body p{margin:0 0 10px;font-family:"Newsreader",Georgia,serif;font-size:16.5px;line-height:1.45;
  color:var(--ink2);max-width:62ch}
.meta{display:flex;gap:0;flex-wrap:wrap;align-items:center;
  font-family:"DM Mono",monospace;font-size:11.5px;color:var(--ink3)}
.meta > *{white-space:nowrap}
.meta .sep{padding:0 8px;opacity:.5}
.meta .place,.meta .price{color:var(--ink2)}
.meta .price.free{color:var(--free)}
.tag{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border:1px solid var(--line);color:var(--ink3);border-radius:2px;margin-left:10px}
.flag{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;background:var(--hot-soft);color:var(--hot);border-radius:2px;margin-left:10px}
.flag.pick{background:var(--accent-soft);color:var(--accent-ink)}
.cal{position:relative;z-index:2;margin-top:9px;font-family:"DM Mono",monospace;font-size:11px}
.cal a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:1px;white-space:nowrap}
.cal a:hover{border-color:var(--accent)}
.cal svg{width:11px;height:11px;vertical-align:-1px;margin-right:5px}
.note{position:relative;z-index:2;font-family:"DM Mono",monospace;font-size:11px;color:var(--ink3);
  margin-top:9px;padding-left:11px;border-left:2px solid var(--line)}
.empty{padding:60px 0;text-align:center;font-family:"DM Mono",monospace;font-size:13px;color:var(--ink3)}
.empty.hidden{display:none}

/* ---------- secondary blocks ---------- */
.block{margin-top:72px}
.blockhead{border-top:2px solid var(--ink);padding-top:12px;margin-bottom:6px}
.blockhead h2{margin:0 0 4px;font-size:24px;font-weight:600;letter-spacing:-.02em}
.blockhead p{margin:0;font-family:"Newsreader",Georgia,serif;font-size:16px;color:var(--ink2);max-width:62ch}
.tickets{width:100%;border-collapse:collapse;margin-top:18px;min-width:640px}
.tickets th{text-align:left;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);font-weight:400;padding:0 14px 8px 0;
  border-bottom:1px solid var(--line)}
.tickets tbody tr{transition:background .14s}
.tickets tbody tr:hover{background:var(--hover)}
.tickets td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line2);vertical-align:top;font-size:15px;
  position:relative}
.tickets td.w{font-family:"DM Mono",monospace;font-size:12px;color:var(--ink2);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.tickets td.n{font-weight:500;letter-spacing:-.01em}
.tickets td.n small{display:block;font-family:"Newsreader",Georgia,serif;font-weight:400;
  font-size:14.5px;color:var(--ink3);letter-spacing:0;margin-top:2px}
.tickets td.n a{text-decoration:none;border-bottom:1px solid var(--line)}
.tickets tr:hover td.n a{border-color:var(--accent);color:var(--accent-ink)}
.tickets td.n a::after{content:"";position:absolute;inset:0;z-index:1}
.tickets td.c a{position:relative;z-index:2;font-family:"DM Mono",monospace;font-size:11px;
  color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--line);white-space:nowrap}
.tickets td.c a:hover{border-color:var(--accent)}
.risk{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;white-space:nowrap}
.risk.h{background:var(--hot-soft);color:var(--hot)}
.risk.m{background:var(--accent-soft);color:var(--accent-ink)}
.tablescroll{overflow-x:auto}

.expos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 30px;margin-top:8px}
.expo{position:relative;border-top:1px solid var(--line);padding:15px 10px 18px 0;transition:background .14s}
.expo:hover{background:var(--hover)}
.expo .t{font-size:16.5px;font-weight:600;letter-spacing:-.01em;line-height:1.22;margin-bottom:4px}
.expo .t a{text-decoration:none}
.expo .t a::after{content:"";position:absolute;inset:0}
.expo:hover .t a{color:var(--accent-ink)}
.expo .m{font-family:"DM Mono",monospace;font-size:11px;color:var(--ink3);line-height:1.6}

.srcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:26px 30px;margin-top:22px}
.srcs h4{margin:0 0 8px;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);font-weight:400}
.srcs ul{margin:0;padding:0;list-style:none;font-size:14px;line-height:1.75}
.srcs a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line2)}
.srcs a:hover{color:var(--accent-ink);border-color:var(--accent)}

.caveats{margin-top:22px;font-family:"Newsreader",Georgia,serif;font-size:15.5px;line-height:1.6;
  color:var(--ink2);max-width:66ch}
.caveats li{margin-bottom:7px}
.caveats b{font-family:"Familjen Grotesk",sans-serif;font-weight:600;font-size:14.5px;color:var(--ink)}

.scanlog{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px 30px}
.scanlog h4{margin:0 0 8px;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);font-weight:400}
.scanlog p{margin:0;font-family:"DM Mono",monospace;font-size:11.5px;line-height:1.75;color:var(--ink2)}
.scanlog .dim{color:var(--ink3)}

footer{margin-top:80px;border-top:2px solid var(--ink);padding:20px 0 70px;
  font-family:"DM Mono",monospace;font-size:11px;color:var(--ink3);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media (max-width:820px){ .picks{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  .wrap{padding:0 18px}
  .masthead{padding:36px 0 20px}
  .picks{grid-template-columns:1fr}
  .ev{grid-template-columns:1fr;gap:10px}
  .date{display:flex;align-items:baseline;gap:9px}
  .date .num{font-size:17px}
  .date .mo{margin-top:0}
  .flabel{width:100%}
  #q{width:100%}
  .count{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   Aanvullingen voor de schil — niet uit de referentie.
   In dezelfde stijl en met dezelfde variabelen.
   ============================================================ */
:root{color-scheme:light dark}
html{background:var(--paper)}

/* laad- en foutmelding */
.notice{padding:70px 0;text-align:center;font-family:"DM Mono",monospace;
  font-size:13px;color:var(--ink3)}
.notice.error{color:var(--hot)}
.notice a{color:var(--accent-ink)}
.hidden{display:none}

/* banner voor een oudere editie */
.oldnote{background:var(--accent-soft);color:var(--accent-ink);
  font-family:"DM Mono",monospace;font-size:11.5px;letter-spacing:.03em;
  padding:9px 0}
.oldnote a{color:inherit}

/* archiefpagina */
.archive{margin-top:26px}
.archive-item{position:relative;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:18px 14px 18px 12px;margin:0 -14px 0 -12px;
  border-bottom:1px solid var(--line2);transition:background .14s}
.archive-item:hover{background:var(--hover)}
.archive-item .ed{font-family:"DM Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:12px;color:var(--ink2);width:96px;flex:none}
.archive-item h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.015em}
.archive-item h3 a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.archive-item:hover h3 a{border-color:var(--accent);color:var(--accent-ink)}
.archive-item h3 a::after{content:"";position:absolute;inset:0}
.archive-item .n{font-family:"DM Mono",monospace;font-size:11.5px;color:var(--ink3);margin-left:auto}
.archive-item .latest-tag{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 7px;background:var(--accent-soft);color:var(--accent-ink);
  border-radius:2px}

/* kalendericoon in de ticketstabel even klein als in de agenda */
.tickets td.c svg{width:11px;height:11px;vertical-align:-1px;margin-right:5px}

/* ---------- topbar met merk en menu ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding-top:16px;padding-bottom:14px}
.brand{font-size:17px;font-weight:600;letter-spacing:-.02em;text-decoration:none}
.brand b{color:var(--accent-ink);font-weight:700}
.topnav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.topnav a{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);text-decoration:none}
.topnav a:hover{color:var(--accent-ink)}
.topnav a[aria-current="page"]{color:var(--ink)}
@media (max-width:640px){
  .topnav{margin-left:0;gap:14px}
}

/* de filterbalk plakt onder de sticky topbar; --topbar-h zet app.js */
.filterbar{top:var(--topbar-h,0px)}

/* ankers niet onder topbar + sticky filterbalk laten verdwijnen */
main,.block{scroll-margin-top:calc(var(--topbar-h,0px) + var(--filterbar-h,0px) + 16px)}

/* weektitels blijven hangen onder topbar en filterbalk */
.weekhead{position:sticky;top:calc(var(--topbar-h,0px) + var(--filterbar-h,0px));
  background:var(--paper);z-index:20;padding-top:6px}

/* inklapbare filterbalk op mobiel */
.ftoggle{display:none}
.ftoggle-btn{font-family:"DM Mono",monospace;font-size:11.5px;letter-spacing:.03em;
  padding:5px 11px;border:1px solid var(--line);background:transparent;color:var(--ink2);
  border-radius:2px;cursor:pointer}
.ftoggle-btn::after{content:" ▾"}
.filterbar.open .ftoggle-btn::after{content:" ▴"}
.ftoggle .count{margin-left:auto}
@media (max-width:640px){
  .ftoggle{display:flex;margin-bottom:0}
  #filterrows{display:none}
  .filterbar.open #filterrows{display:block;margin-top:12px}
}

/* ook de koppen van "Nu kaarten kopen" en "Doorlopend te zien" blijven hangen */
#tickets-block .blockhead,#expos-block .blockhead{
  position:sticky;top:calc(var(--topbar-h,0px) + var(--filterbar-h,0px));
  background:var(--paper);z-index:20;padding-bottom:6px}