/* LIVE LOG - "Blackbox": rack-panelen, LED-blokjes, Archivo Expanded voor koppen
   en getallen, Share Tech Mono voor labels en data. Twee thema's via
   [data-theme] op <html>: Carbon (standaard) en Techwear. Alle kleuren lopen via
   de variabelen hieronder; nergens een losse hexcode in een component. */
:root,
[data-theme="carbon"] {
  --bg: #0B0B0C;
  --panel: #141416;
  --panel2: #18181B;
  --deco: #1C1C1F;
  --rowline: #1C1C1F;
  --track: #1E1E21;
  --track2: #232326;
  --line: #26262A;
  --meteroff: #2A2A2E;
  --line2: #34343A;
  --line3: #48484E;
  --dangerline: #4A1D20;
  --mute: #8C8984;
  --text2: #C4C0B8;
  --text: #F2F0EB;
  --hi: #FF5A52;
  --live: #E5202E;
  --peak: #E5202E;
  --fill: #E5202E;
  --onfill: #FFFFFF;
  --tagbg: rgba(229, 32, 46, 0.14);
  --dot: rgba(229, 32, 46, 0.8);
  --scrim: rgba(11, 11, 12, 0.82);
  --receiptsub: #6B6862;
  --logo: #E5202E;
  /* Donkere kaart: dezelfde OpenStreetMap-tegels als altijd, door een filter. */
  --map-filter: grayscale(1) invert(1) brightness(0.92) contrast(0.92);
}
[data-theme="techwear"] {
  --bg: #000000;
  --panel: #0C0C0C;
  --panel2: #101010;
  --deco: #161616;
  --rowline: #1A1A1A;
  --track: #1C1C1C;
  --track2: #222222;
  --line: #2A2A2A;
  --meteroff: #2A2A2A;
  --line2: #3A3A3A;
  --line3: #555555;
  --dangerline: #5C1A1A;
  --mute: #8E8E8E;
  --text2: #C8C8C8;
  --text: #FFFFFF;
  --hi: #FFFFFF;
  --live: #FF2B2B;
  --peak: #FF2B2B;
  --fill: #FFFFFF;
  --onfill: #000000;
  --tagbg: rgba(255, 255, 255, 0.08);
  --dot: rgba(255, 255, 255, 0.88);
  --scrim: rgba(0, 0, 0, 0.82);
  --receiptsub: #555555;
  --logo: #FF2B2B;
  --map-filter: grayscale(1) invert(1) brightness(0.85) contrast(0.95);
}
:root {
  /* Volle schermbreedte; alleen op een extreem breed scherm stopt het ergens. */
  --maxw: 2560px;
  --gutter: clamp(16px, 2.4vw, 56px);
  --font-main: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Share Tech Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--text); }
a:hover { color: var(--hi); }
button, input, select, textarea { font: inherit; color: inherit; }
select, input { color-scheme: dark; }
:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; }
input[type="range"], input[type="checkbox"] { accent-color: var(--hi); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); width: 100%; }
.mono { font-family: var(--font-mono); }
.label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--mute); text-transform: uppercase; }
.x { font-weight: 900; font-stretch: 125%; }
.loading { color: var(--mute); font-family: var(--font-mono); padding: 40px 0; }

/* ------------------------------------------------------------------ kop */

.hud { background: var(--bg); border-bottom: 1px solid var(--line); }
.hud-strip { border-bottom: 1px solid var(--deco); }
.hud-strip-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
  padding-block: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mute);
}
.hud-tag { text-transform: uppercase; }
.hud-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rec { display: inline-flex; align-items: center; gap: 7px; text-transform: uppercase; }
.led { display: inline-block; width: 7px; height: 7px; background: var(--line2); flex: none; }
.led.live, .led.on { background: var(--live); }
.rec .led { border-radius: 50%; }
.chipbtn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute); background: none; border: 1px solid var(--line); padding: 4px 9px; cursor: pointer;
}
.chipbtn:hover { color: var(--text); border-color: var(--line3); }
.chipbtn.on { color: var(--text); border-color: var(--text); }
.seg { display: inline-flex; border: 1px solid var(--line2); }
.seg button {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mute);
  background: none; border: 0; padding: 4px 10px; cursor: pointer;
}
.seg button.on { background: var(--text); color: var(--bg); }

.hud-main { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 36px; padding-top: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); padding-bottom: 16px; }
.brand:hover { color: var(--text); }
.mark { width: 30px; height: 30px; }
.mark-red { stroke: var(--logo); }
.mark-white { stroke: var(--text); }
.wordmark { font-size: 26px; font-weight: 900; font-stretch: 125%; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.wordmark i { font-style: normal; color: var(--logo); }

.tabs { display: flex; flex-wrap: wrap; gap: 2px; flex: 999 1 520px; }
.tabs button {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px 14px;
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--mute); cursor: pointer;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em;
}
.tabs button::before { content: ""; width: 7px; height: 7px; background: var(--line2); }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text); border-bottom-color: var(--hi); }
.tabs button.on::before { background: var(--live); }
.tabs .count { font-size: 11px; border: 1px solid var(--line2); padding: 0 5px; letter-spacing: 0.04em; color: var(--text); }
.tabs button.on .count { background: var(--text); color: var(--bg); border-color: var(--text); }

.search {
  position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex: 1 1 240px; max-width: 420px;
  border: 1px solid var(--line); background: var(--panel); padding: 0 10px; min-height: 40px;
}
.search svg { width: 15px; height: 15px; fill: none; stroke: var(--mute); stroke-width: 2; flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font-size: 14px; padding: 8px 0; }
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--line3); }
.search kbd { font-family: var(--font-mono); font-size: 11px; color: var(--mute); border: 1px solid var(--line2); padding: 1px 6px; }
.search-results {
  position: absolute; top: calc(100% + 6px); left: -1px; right: -1px; z-index: 40; max-height: 420px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line2);
}
.search-results button {
  display: grid; grid-template-columns: 74px 1fr; gap: 10px; width: 100%; text-align: left; padding: 9px 12px;
  background: none; border: 0; border-bottom: 1px solid var(--rowline); cursor: pointer; color: var(--text);
}
.search-results button:hover, .search-results button.on { background: var(--panel2); }
.search-results .kind { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--mute); padding-top: 3px; }
.search-results .sub { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
.search-results .none { padding: 12px; color: var(--mute); font-size: 13px; }
.menu-open { display: none; }

/* --------------------------------------------------------------- pagina */

main { padding-block: 30px 64px; }
footer {
  border-top: 1px solid var(--line); padding-block: 18px; color: var(--mute);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-align: center;
}
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; margin-bottom: 22px; }
.page-title { margin: 0; font-size: clamp(48px, 7.4vw, 104px); font-weight: 900; font-stretch: 125%; line-height: 1; letter-spacing: -0.03em; margin-bottom: -0.08em; overflow-wrap: anywhere; }
.page-meta { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; color: var(--mute); padding-bottom: 6px; text-transform: uppercase; }
.page-intro { margin: 0; max-width: 560px; color: var(--text2); padding-bottom: 6px; }
.page-head .push { margin-left: auto; }

.subtabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.subtabs button {
  min-height: 44px; padding: 0 18px; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  color: var(--mute); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
}
.subtabs button:hover { color: var(--text); }
.subtabs button.on { color: var(--text); border-bottom-color: var(--hi); }

.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; border-top: 1px solid var(--line); padding-top: 14px; margin: 44px 0 18px; }
.sec-head:first-child { margin-top: 0; }
.sec-head .ch { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--hi); }
.sec-head h2 { margin: 0; font-size: 22px; font-weight: 800; font-stretch: 125%; text-transform: uppercase; }
.sec-head .sec-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--mute); text-transform: uppercase; }
.sec-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--mute); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; text-transform: uppercase; }
.sec-head .sec-link { margin-left: auto; }
.sec-link:hover { color: var(--hi); }
.hint { color: var(--mute); font-size: 13px; margin: -6px 0 16px; max-width: 72ch; line-height: 1.55; }
.small-head { margin: 0 0 12px; font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.16em; color: var(--mute); text-transform: uppercase; }

.panel { background: var(--panel); border: 1px solid var(--line); }
.corner { position: relative; }
.corner::before { content: ""; position: absolute; top: -1px; left: -1px; width: 18px; height: 18px; border-top: 2px solid var(--hi); border-left: 2px solid var(--hi); pointer-events: none; }

/* knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px;
  background: none; border: 1px solid var(--line2); color: var(--text2); cursor: pointer; text-decoration: none;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.btn:hover { color: var(--text); border-color: var(--line3); }
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.primary:hover { color: var(--bg); opacity: 0.88; }
.btn.fill { background: var(--fill); color: var(--onfill); border-color: var(--fill); }
.btn.fill:hover { color: var(--onfill); opacity: 0.9; }
.btn.small { min-height: 32px; padding: 0 10px; font-size: 11px; }
.btn.danger { color: var(--hi); border-color: var(--dangerline); }

/* meters */
.meter { display: inline-flex; gap: 2px; flex: none; }
.meter i { width: 5px; height: 16px; background: var(--meteroff); }
.meter i.on { background: var(--hi); }
.meter.big { display: flex; flex: 1; gap: 3px; }
.meter.big i { flex: 1; height: 30px; }
.meter.mid i { width: 7px; height: 13px; }
.scoretxt { font-size: 22px; font-weight: 800; font-stretch: 112%; min-width: 48px; text-align: right; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; font-size: 12px; padding: 2px 9px; border: 1px solid var(--line3); border-radius: 12px; color: var(--text); }
.solo-mark { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; padding: 2px 7px; background: var(--text); color: var(--bg); }
.tagchip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; padding: 2px 7px;
  color: var(--hi); background: var(--tagbg); cursor: pointer; text-transform: lowercase;
}
.tagchip::before { content: "#"; }
.tagchip:hover { outline: 1px solid var(--hi); }
.tagx { cursor: pointer; color: inherit; font-size: 13px; line-height: 1; opacity: 0.7; }
.tagx:hover { opacity: 1; }
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--line2); color: var(--text2);
}
.badge.solid { background: var(--text); color: var(--bg); border-color: var(--text); }
.badge.watch { border-style: dashed; border-color: var(--line3); }
.badge.skipped { text-decoration: line-through; color: var(--mute); }
.mctag {
  margin-left: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0 4px; border: 1px solid var(--line2); color: var(--mute); cursor: pointer; opacity: 0; vertical-align: 2px;
}
.mctag.on { opacity: 1; }
.mcmark { margin-left: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; padding: 0 4px; border: 1px solid var(--line2); color: var(--mute); vertical-align: 2px; }
*:hover > .mctag, .mctag:focus-visible { opacity: 1; }
.fav { cursor: pointer; color: var(--line3); user-select: none; font-size: 15px; line-height: 1; }
.fav:hover { color: var(--hi); }
.fav.on { color: var(--hi); }
.rated { font-family: var(--font-mono); font-size: 12px; color: var(--hi); margin-left: 8px; }

/* formulieren en filters */
.filterbar { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 32px; }
.fb-field { flex: 1 1 150px; display: flex; flex-direction: column; gap: 4px; background: var(--panel); padding: 10px 14px; min-width: 0; }
.fb-field.wide { flex: 3 1 260px; }
.fb-field > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--mute); text-transform: uppercase; }
.fb-field input, .fb-field select { background: none; border: 0; color: var(--text); font-size: 15px; padding: 2px 0; min-width: 0; width: 100%; }
.fb-field input:focus, .fb-field select:focus { outline: none; }
.fb-field select option { background: var(--panel); color: var(--text); }
.fb-check { flex-direction: row; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.fb-views { flex: 1 1 240px; display: flex; gap: 4px; background: var(--panel); padding: 8px; }
.fb-views button { flex: 1; min-height: 40px; background: none; color: var(--mute); border: 1px solid var(--line2); cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; }
.fb-views button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.count-line { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--mute); margin: -20px 0 22px; text-transform: uppercase; }

/* ----------------------------------------------------------- overzicht */

.band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; background: var(--fill); color: var(--onfill);
  padding: 14px 20px; margin-bottom: 40px; cursor: pointer;
}
.band .label { color: inherit; display: inline-flex; align-items: center; gap: 8px; }
.band .label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.band-name { font-size: 20px; font-weight: 800; font-stretch: 112%; text-transform: uppercase; }
.band-meta { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.band-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.band .btn { color: var(--onfill); border-color: var(--onfill); }
.band .btn.primary { background: var(--onfill); color: var(--fill); }

/* Tonight's night on every tab, the way into its timetable. */
.now-strip {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 24px; padding: 12px 16px;
  background: var(--fill); color: var(--onfill); text-decoration: none; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.now-strip .led { background: var(--onfill); }
.now-strip .nm { font-family: inherit; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.now-strip .nx { margin-left: auto; opacity: 0.85; }

/* --------------------------------------------------------------- timetable */

.tt { margin-bottom: 36px; }
.tt .legend .warn { color: var(--live); }
.tt-day { margin: 20px 0 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--mute); font-weight: 400; }
.tt-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); background: var(--panel); }
.tt-grid { position: relative; display: grid; grid-template-columns: 46px repeat(var(--cols), minmax(150px, 1fr)); min-width: calc(46px + var(--cols) * 150px); }
.tt-axis { position: relative; border-right: 1px solid var(--line); }
.tt-axis span { position: absolute; left: 6px; transform: translateY(-50%); font-family: var(--font-mono); font-size: 10px; color: var(--mute); }
.tt-col { border-right: 1px solid var(--line); min-width: 0; }
.tt-col:last-child { border-right: 0; }
.tt-area {
  height: 34px; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tt-body { position: relative; background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 69px); }
.tt-slot {
  position: absolute; left: 4px; right: 4px; display: flex; flex-direction: column; gap: 2px; padding: 5px 8px; overflow: hidden;
  background: var(--panel2); border: 1px solid var(--line2); color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.tt-slot:disabled { cursor: default; }
.tt-slot .tt-time { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--mute); }
.tt-slot .tt-name { font-size: 13px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.tt-slot.on { background: var(--fill); border-color: var(--fill); color: var(--onfill); }
.tt-slot.on .tt-time { color: var(--onfill); opacity: 0.8; }
.tt-slot.part { border-color: var(--fill); box-shadow: inset 4px 0 0 var(--fill); }
.tt-slot.clash { outline: 2px dashed var(--live); outline-offset: -2px; }
.tt-slot.live { box-shadow: inset 3px 0 0 var(--live); }
.tt-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--live); z-index: 2; pointer-events: none; }
.tt-now span { position: absolute; right: 4px; top: -16px; font-family: var(--font-mono); font-size: 10px; color: var(--live); letter-spacing: 0.1em; }
.tt-mine { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--line); }
.tt-mine li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.tt-mine li:last-child { border-bottom: 0; }
.tt-mine .t { font-family: var(--font-mono); font-size: 12px; color: var(--mute); }
.tt-mine .nm { font-weight: 700; overflow-wrap: anywhere; }
.tt-mine .ar { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--mute); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.tt-mine .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--live); }
.tt-mine li.live { background: var(--panel2); box-shadow: inset 3px 0 0 var(--live); }
.tt-mine li.done { opacity: 0.45; }
.tt-mine li.clash .nm { text-decoration: underline dashed var(--live); }

.hero { display: flex; flex-wrap: wrap; gap: 24px; }
.hero-main { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero-num { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 28px; }
.hero-num b { font-size: clamp(110px, 15vw, 210px); font-weight: 900; font-stretch: 125%; line-height: 1; letter-spacing: -0.04em; margin-bottom: -0.1em; }
.hero-num span { font-size: clamp(26px, 3.2vw, 44px); font-weight: 800; font-stretch: 125%; line-height: 1; text-transform: uppercase; padding-bottom: 8px; }
.hero-num span em { font-style: normal; color: var(--mute); display: block; }
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.counter { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 16px 16px; background: var(--panel); }
.counter .label { display: flex; justify-content: space-between; gap: 8px; }
.counter b { display: block; font-size: 38px; font-weight: 800; font-stretch: 125%; line-height: 1.1; margin-top: 8px; white-space: nowrap; }

.next { flex: 1 1 400px; min-width: 0; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.next-top { display: flex; justify-content: space-between; gap: 10px; }
.next-top .t { color: var(--hi); }
.next-name { font-size: 30px; font-weight: 800; font-stretch: 112%; line-height: 1.05; text-transform: uppercase; margin: 0; cursor: pointer; }
.next-when { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.next-list { border-top: 1px solid var(--line); }
.next-item { display: flex; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.next-item img, .next-item .noposter { width: 44px; height: 58px; object-fit: cover; border: 1px solid var(--line2); flex: none; }
.next-item .nm { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-item .wh { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mute); text-transform: uppercase; }
.next-item .left { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--mute); white-space: nowrap; }
.next-watch { display: flex; flex-direction: column; gap: 8px; }
.next-watch .event { display: flex; gap: 12px; align-items: baseline; cursor: pointer; }
.next-watch .d { font-family: var(--font-mono); font-size: 12px; color: var(--mute); width: 58px; flex: none; text-transform: uppercase; }
.next-watch .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px dashed var(--line2); padding-bottom: 2px; }

.noposter { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line2); color: var(--line3); font-weight: 900; font-stretch: 125%; overflow: hidden; }

.cards4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.rcard { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.rcard:hover { border-color: var(--line3); }
.rcard-img { position: relative; aspect-ratio: 16 / 10; background: var(--panel2); overflow: hidden; }
.rcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rcard-img .noposter { width: 100%; height: 100%; font-size: 54px; }
.rcard-date { position: absolute; left: 0; bottom: 0; background: var(--bg); padding: 6px 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.rcard-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.rcard-name { font-size: 17px; font-weight: 700; line-height: 1.2; }
.rcard-where { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mute); text-transform: uppercase; }
.rcard-score { display: flex; align-items: center; gap: 10px; }
.rcard-score b { font-size: 18px; font-weight: 800; font-stretch: 112%; }
.rcard-score .with { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--mute); text-transform: uppercase; text-align: right; }

.vu-box { padding: 22px 18px 14px; overflow-x: auto; }
.vu { display: flex; gap: 6px; align-items: flex-end; min-width: 600px; }
.vu-col { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.vu-col .vu-n { text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.vu-col i { height: 7px; background: var(--track); }
.vu-col i.on { background: var(--text); }
.vu-col i.peak { background: var(--peak); }
.vu-col .vu-year { text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--mute); margin-top: 6px; }

.ranks3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.ranks3 .sec-head { margin-top: 44px; }
.rank-list { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); }
.rank-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 90px 44px; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--rowline); }
.rank-list li:last-child { border-bottom: 0; }
.rank-list li.clickable { cursor: pointer; }
.rank-list li.clickable:hover { background: var(--panel2); }
.rank-list .i { font-family: var(--font-mono); font-size: 12px; color: var(--mute); }
.rank-list .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-list .bar { height: 6px; background: var(--track); position: relative; }
.rank-list .bar span { position: absolute; inset: 0 auto 0 0; background: var(--text); }
.rank-list .n { text-align: right; font-family: var(--font-mono); font-size: 13px; }

.topscores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tscore { background: var(--panel); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 150px; cursor: pointer; }
.tscore:hover { background: var(--panel2); }
.tscore b { font-size: 44px; font-weight: 900; font-stretch: 125%; line-height: 1; color: var(--hi); }
.tscore .nm { font-weight: 700; line-height: 1.25; }
.tscore .wh { margin-top: auto; font-family: var(--font-mono); font-size: 12px; color: var(--mute); letter-spacing: 0.06em; text-transform: uppercase; }

/* --------------------------------------------------------------- events */

.tickets-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 44px; }
.tcard { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line2); background: var(--panel); cursor: pointer; }
.tcard:hover { border-color: var(--line3); }
.daybox { display: flex; flex-direction: column; align-items: center; width: 56px; flex: none; border-right: 1px solid var(--line); padding-right: 14px; }
.daybox b { font-size: 30px; font-weight: 900; font-stretch: 125%; line-height: 1; }
.daybox span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--mute); text-transform: uppercase; white-space: nowrap; }
.tcard .nm { display: block; font-weight: 700; line-height: 1.2; }
.tcard .wh { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--mute); margin-top: 4px; text-transform: uppercase; }
.tcard .left { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--hi); white-space: nowrap; }
.ledhead { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.ledhead h2 { margin: 0; font-size: 20px; font-weight: 800; font-stretch: 125%; text-transform: uppercase; }

.year-block { display: flex; flex-wrap: wrap; gap: 0 32px; border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 40px; }
.year-side { flex: 1 1 180px; max-width: 240px; }
.year-outline { margin: 0; font-size: 64px; font-weight: 900; font-stretch: 125%; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--text); letter-spacing: -0.02em; }
.year-side .label { display: block; margin-top: 10px; }
.ev-list { list-style: none; margin: 0; padding: 0; flex: 999 1 600px; min-width: 0; }
.ev-row {
  display: grid; grid-template-columns: 64px 96px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 14px 4px; border-bottom: 1px solid var(--rowline); cursor: pointer;
}
.ev-row:hover { background: var(--panel); }
.ev-row .dd { display: flex; flex-direction: column; }
.ev-row .dd b { font-size: 26px; font-weight: 900; font-stretch: 125%; line-height: 1; }
.ev-row .dd span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--mute); text-transform: uppercase; }
/* A night you only roughly remember: a "?" for the day, then what is known. */
.ev-row .dd.est b { color: var(--mute); }
.est-mark { font-style: normal; color: var(--mute); margin-left: 2px; }
.est-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--mute); }
.estimate { margin-top: 6px; }
.estimate summary { cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--mute); text-transform: uppercase; }
.estimate .estimate-form { margin-top: 8px; }
.watch-form [hidden] { display: none; }
.ev-row .thumb, .ev-row .noposter { width: 96px; height: 60px; object-fit: cover; border: 1px solid var(--line2); font-size: 22px; }
.ev-row .body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ev-row .nm { font-size: 17px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ev-row .wh { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--mute); text-transform: uppercase; }
.ev-row .scorecol { display: flex; align-items: center; gap: 10px; justify-self: end; }
.ev-row.skipped { opacity: 0.45; }
.ev-row.skipped:hover { opacity: 0.75; }
.ev-row.watch .thumb, .ev-row.watch .noposter { border-style: dashed; }

/* compacte eventregel in uitklaplijsten (zalen, b2b, watchlist) */
.event.ev-card {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 6px; cursor: pointer;
}
.event.ev-card:hover { border-color: var(--line3); }
.ev-card .d { font-family: var(--font-mono); font-size: 12px; color: var(--mute); text-transform: uppercase; }
.ev-card .nm { font-weight: 700; }
.ev-card .wh { font-family: var(--font-mono); font-size: 11px; color: var(--mute); text-transform: uppercase; margin-top: 2px; }
.ev-card .side { font-family: var(--font-mono); font-size: 12px; color: var(--mute); white-space: nowrap; display: flex; gap: 10px; align-items: center; }
.ev-card.skipped { opacity: 0.45; }
.ev-card.watch { border-style: dashed; }
.ev-card .chips { margin-top: 6px; }

/* posterwand */
.feature { position: relative; display: flex; align-items: flex-end; min-height: 460px; margin-bottom: 36px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; }
.feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 0%, var(--scrim) 34%, transparent 72%); }
.feature-body { position: relative; z-index: 1; width: 100%; padding: 0 28px 28px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 36px; }
.feature-text { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.feature-title { font-size: clamp(40px, 5.4vw, 76px); font-weight: 900; font-stretch: 125%; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; }
.stamp {
  flex: none; width: 132px; height: 132px; border: 3px solid var(--hi); border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; transform: rotate(-8deg); background: var(--scrim); color: var(--hi);
}
.stamp b { font-size: 42px; font-weight: 900; font-stretch: 125%; line-height: 1; }
.stamp span { font-family: var(--font-mono); font-size: 10px; line-height: 1; letter-spacing: 0.16em; }
.wall { columns: 270px; column-gap: 14px; }
.wall-item { display: block; break-inside: avoid; margin-bottom: 14px; position: relative; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.wall-item:hover { border-color: var(--line3); }
.wall-item img { display: block; width: 100%; height: auto; }
.wall-item .flag { position: absolute; top: 10px; left: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; padding: 4px 8px; background: var(--fill); color: var(--onfill); }
.wall-item .cap { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px 12px; }
.wall-item .cap .t { flex: 1; min-width: 0; }
.wall-item .nm { display: block; font-weight: 700; line-height: 1.2; }
.wall-item .wh { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--mute); margin-top: 4px; text-transform: uppercase; }
.wall-item .sc { font-size: 22px; font-weight: 900; font-stretch: 125%; line-height: 1; color: var(--hi); }

/* ----------------------------------------------------------- eventpagina */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--mute); margin-bottom: 22px; text-transform: uppercase; }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--hi); }
.crumbs .here { color: var(--text); }
.crumbs .nav { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs .nav a { border: 1px solid var(--line); padding: 6px 10px; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; }
.day-tab { border: 1px solid var(--line2); background: var(--panel); color: var(--mute); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 12px; cursor: pointer; }
.day-tab:hover { color: var(--text); }
.day-tab.on { color: var(--bg); background: var(--text); border-color: var(--text); }

.ed-hero { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 40px; }
.ed-media { flex: 999 1 560px; min-width: 0; }
.ed-info { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ed-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ed-title { margin: 0; font-size: clamp(30px, 3.2vw, 48px); font-weight: 900; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; overflow-wrap: break-word; }
.ed-title .fav { font-size: 0.5em; vertical-align: middle; margin-right: 8px; }
.ed-facts { margin: 0; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 8px 14px; }
.ed-facts dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--mute); padding-top: 2px; text-transform: uppercase; }
.ed-facts dd { margin: 0; }
.ed-score { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ed-score-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ed-score-row { display: flex; align-items: center; gap: 18px; }
.ed-score-num { font-size: 64px; font-weight: 900; font-stretch: 125%; line-height: 1; color: var(--hi); min-width: 140px; }
.ed-score-num.empty { color: var(--line3); }

/* affiche */
.poster-wrap { position: relative; border: 1px solid var(--line); background: var(--panel); }
.poster { display: block; width: 100%; max-height: 760px; object-fit: contain; background: var(--panel2); }
.poster-hint { color: var(--mute); font-size: 12px; margin: 0; padding: 8px 14px 0; }
.poster-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--line); }
.poster-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; }
.poster-btn:hover { color: var(--hi); }
.poster-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 280px;
  border: 1px dashed var(--line3); background: var(--panel); color: var(--mute); cursor: pointer; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding: 20px;
}
.poster-drop:hover { color: var(--text); border-color: var(--text); }
.poster-find { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }

.ed-trio { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 44px; }
.ed-trio > div { flex: 1 1 320px; min-width: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.links a, .links button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line2); background: none;
  text-decoration: none; color: var(--text); cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.links a::after { content: "↗"; color: var(--mute); }
.links a:hover, .links button:hover { border-color: var(--line3); color: var(--hi); }
.watch-toggle.on { border-style: dashed; }
.event-cost { font-family: var(--font-mono); font-size: 12px; color: var(--mute); letter-spacing: 0.06em; }
.event-note { color: var(--text2); font-size: 14px; line-height: 1.55; border-left: 2px solid var(--line3); padding: 4px 0 4px 12px; margin: 0 0 28px; max-width: 80ch; white-space: pre-line; }

/* met wie, tags, cijfer (invoer) */
.companybox, .tagbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.personchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border: 1px solid var(--line3); border-radius: 16px; cursor: pointer; }
.personchip:hover { border-color: var(--text); }
.personx { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--line); cursor: pointer; font-size: 13px; line-height: 1; }
.personx:hover { background: var(--fill); color: var(--onfill); }
.personadd, .tagadd {
  width: 120px; background: none; border: 1px dashed var(--line3); color: var(--text); padding: 7px 12px; font-size: 14px;
}
.personadd { border-radius: 16px; }
.tagadd { font-family: var(--font-mono); font-size: 13px; }
.personadd:focus, .tagadd:focus { outline: none; border-color: var(--text); }
.solo-toggle { min-height: 34px; padding: 0 12px; background: none; border: 1px solid var(--line2); color: var(--mute); cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.solo-toggle:hover { color: var(--text); }
.solo-toggle.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.tagbox .tagchip { padding: 5px 8px 5px 10px; font-size: 13px; }
.scorebox { display: inline-flex; align-items: center; gap: 10px; }
.score {
  width: 64px; text-align: center; font-family: var(--font-mono); font-size: 13px; background: none; color: var(--mute);
  border: 1px dashed var(--line2); padding: 6px 4px;
}
.score.hi, .score.mid, .score.lo { color: var(--hi); border-style: solid; border-color: var(--line2); }
.score::placeholder { color: var(--mute); }
.score:focus { outline: none; border-color: var(--text); color: var(--text); }
.scorebox.big { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
.scorebox.big .score { width: 96px; font-size: 18px; align-self: flex-start; border-style: solid; }
.score-range { width: 100%; }

/* line-up */
.lineup-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 20px; }
.lineup-head .ch { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--hi); }
.lineup-head h2 { margin: 0; font-size: 22px; font-weight: 800; font-stretch: 125%; text-transform: uppercase; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text2); text-transform: uppercase; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sq { display: inline-block; width: 10px; height: 10px; background: var(--text); }
.sq.open { background: none; border: 1px solid var(--text); width: 9px; height: 9px; }
.sq.dash { height: 2px; background: var(--mute); }
.tier { margin-top: 22px; }
.tier:first-child { margin-top: 0; }
.tier-title { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.16em; color: var(--mute); margin: 0 0 10px; text-transform: uppercase; }
.lineup { display: flex; flex-wrap: wrap; gap: 8px; }
.act {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; background: var(--panel);
  border: 1px solid var(--line2); cursor: pointer; user-select: none; font-size: 15px;
}
.act:hover { border-color: var(--line3); }
.act .tick { width: 9px; height: 9px; flex: none; font-size: 0; background: var(--text); }
.act[data-seen="unknown"] .tick { background: none; border: 1px solid var(--text); }
.act[data-seen="no"] { color: var(--mute); border-color: var(--line); background: none; text-decoration: line-through; text-decoration-color: var(--line3); }
.act[data-seen="no"] .tick { height: 2px; background: var(--mute); }
.act.dragging { opacity: 0.4; }
.act.drop-target { border-color: var(--hi); outline: 1px solid var(--hi); }
.tier-3 .act { font-size: 20px; font-weight: 800; font-stretch: 112%; min-height: 56px; padding: 0 16px; }
.tier-2 .act { font-size: 17px; font-weight: 700; min-height: 48px; }
.settype, .rolechip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; font-stretch: 100%;
  padding: 2px 7px; border: 1px solid var(--line2); color: var(--mute); cursor: pointer;
}
.settype:not(.on), .rolechip:not(.on) { opacity: 0; }
.act:hover .settype, .act:hover .rolechip { opacity: 1; border-style: dashed; }
.settype.on, .rolechip.on { opacity: 1; color: var(--hi); border-color: var(--hi); border-style: solid; }
.b2b { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px; border: 1px dashed var(--line2); }
.b2b-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; color: var(--mute); }
.b2b-tag.on { color: var(--hi); }
.ungroup { cursor: pointer; color: var(--mute); padding: 0 4px; opacity: 0; font-size: 13px; }
.b2b:hover .ungroup { opacity: 1; }
.ungroup:hover { color: var(--hi); }
.missed { border-top: 1px dashed var(--line2); padding-top: 14px; margin-top: 24px; }
.missed summary { cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--mute); margin-bottom: 12px; text-transform: uppercase; }
.missed .act { min-height: 34px; font-size: 14px; }

.ed-bottom { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 44px; }
.ed-bottom > div { flex: 1 1 380px; min-width: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.map-box { height: 280px; border: 1px solid var(--line); background: var(--panel); }
.map-box.big { height: clamp(480px, 74vh, 980px); }
.leaflet-container { background: var(--panel2); font-family: var(--font-main); }
.leaflet-tile-pane { filter: var(--map-filter); }
.leaflet-control-attribution { background: var(--scrim) !important; color: var(--mute) !important; font-family: var(--font-mono); font-size: 10px; }
.leaflet-control-attribution a { color: var(--mute) !important; }
.leaflet-bar a { background: var(--panel) !important; color: var(--text) !important; border-color: var(--line2) !important; }
.kaart-tooltip { background: var(--panel); border: 1px solid var(--line2); color: var(--text); font-family: var(--font-main); font-size: 12px; line-height: 1.6; max-width: 300px; padding: 8px 10px; box-shadow: none; }
.kaart-tooltip::before { display: none; }
.map-dot {
  display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--dot); border: 1.5px solid var(--hi);
  color: var(--onfill); font-family: var(--font-mono); font-size: 11px; box-sizing: border-box;
}
.map-ring { border-radius: 50%; border: 2px dashed var(--text); box-sizing: border-box; }
.cal-list { display: flex; flex-direction: column; }
.cal-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rowline); font-size: 14px; }
.cal-row.on { color: var(--hi); }
.cal-when { font-family: var(--font-mono); font-size: 12px; color: var(--mute); }
.steps-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--rowline); }
.steps-row span:first-child { font-family: var(--font-mono); font-size: 12px; color: var(--mute); text-transform: uppercase; }
.ed-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--mute); }
.ed-foot .push { margin-left: auto; }

/* ------------------------------------------------------------ artiesten */

.split { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.split-aside { flex: 1 1 250px; max-width: 300px; display: flex; flex-direction: column; gap: 20px; }
.split-main { flex: 999 1 640px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--mute); text-transform: uppercase; }
.field input, .field select { min-height: 42px; background: var(--panel); border: 1px solid var(--line2); color: var(--text); padding: 0 12px; font-size: 15px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--text); }
.check { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; }
.check input { width: 16px; height: 16px; }
.table-box { overflow-x: auto; border: 1px solid var(--line); background: var(--panel); }
.atable { width: 100%; min-width: 820px; border-collapse: collapse; }
.atable th { padding: 12px 14px; font-weight: 400; text-align: left; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mute); }
.atable td { padding: 10px 14px; border-bottom: 1px solid var(--rowline); vertical-align: middle; }
.atable tr.clickable { cursor: pointer; }
.atable tr.clickable:hover td { background: var(--panel2); }
.atable .i { font-family: var(--font-mono); font-size: 12px; color: var(--mute); width: 40px; }
.atable .nm { font-weight: 700; font-size: 16px; }
.atable .sub { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--mute); margin-top: 2px; }
.atable .sub .tagchip { margin: 2px 4px 0 0; }
.dots { display: flex; align-items: center; gap: 10px; }
.dots span { display: flex; gap: 2px; }
.dots i { width: 5px; height: 14px; background: var(--track2); }
.dots i.on { background: var(--text); }
.dots b { font-family: var(--font-mono); font-weight: 400; font-size: 14px; }
.range { display: block; position: relative; height: 10px; background: repeating-linear-gradient(90deg, var(--track2) 0 1px, transparent 1px 6.25%); min-width: 180px; }
.range span { position: absolute; top: 2px; height: 6px; background: var(--hi); }
.range + .label { display: block; margin-top: 4px; letter-spacing: 0.06em; }
.more-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }

.ad-hero { display: flex; flex-direction: column; gap: 26px; border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 32px; }
.ad-name { margin: 0; font-size: clamp(52px, 8.4vw, 124px); font-weight: 900; font-stretch: 125%; line-height: 0.95; letter-spacing: -0.035em; overflow-wrap: anywhere; text-transform: uppercase; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stat-grid > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 16px; background: var(--panel); }
.stat-grid b { display: block; font-size: 34px; font-weight: 800; font-stretch: 125%; line-height: 1.1; margin-top: 6px; }
.stat-grid small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--mute); margin-top: 2px; text-transform: uppercase; }
.timeline-box { padding: 28px 22px 14px; overflow-x: auto; margin-bottom: 40px; }
.timeline { position: relative; min-width: 760px; height: 92px; }
.timeline .tick-y { position: absolute; top: 26px; bottom: 20px; border-left: 1px solid var(--line); }
.timeline .tick-l { position: absolute; bottom: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
.timeline .axis { position: absolute; left: 0; right: 0; top: 44px; height: 2px; background: var(--line2); }
.timeline .pt { position: absolute; top: 39px; width: 12px; height: 12px; margin-left: -6px; background: var(--text); cursor: pointer; border: 0; padding: 0; }
.timeline .pt.live { top: 37px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--live); }
.timeline .sc { position: absolute; width: 36px; margin-left: -18px; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--text2); }
.timeline-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 8px; }
.timeline-legend span { display: inline-flex; align-items: center; gap: 8px; }
.timeline-legend .lv { width: 12px; height: 12px; border-radius: 50%; background: var(--live); display: inline-block; }
.nights { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.nights li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--rowline); }
.nights .d { font-family: var(--font-mono); font-size: 12px; color: var(--mute); text-transform: uppercase; }
.nights .ev { cursor: pointer; min-width: 0; }
.nights .ev b { display: block; font-weight: 700; }
.nights .ev span { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--mute); text-transform: uppercase; margin-top: 2px; }
.nights .r { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.side-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.side-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rowline); }
.side-list li span:last-child { font-family: var(--font-mono); color: var(--text2); }
.side-block { display: flex; flex-direction: column; gap: 24px; }
.side-score { padding: 16px 18px; }

/* B2B */
.b2b-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 40px; }
.b2b-card { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.b2b-card .top { display: flex; justify-content: space-between; align-items: baseline; }
.b2b-card .top b { font-size: 44px; font-weight: 900; font-stretch: 125%; line-height: 1; color: var(--hi); }
.chain { display: flex; flex-direction: column; }
.chain .link { display: flex; align-items: center; gap: 12px; }
.chain .node { width: 10px; display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.chain .node i { width: 2px; flex: 1; background: var(--hi); }
.chain .node i.none { background: transparent; }
.chain .node b { width: 10px; height: 10px; border: 2px solid var(--hi); flex: none; }
.chain .nm { font-size: 20px; font-weight: 800; font-stretch: 112%; padding: 5px 0; }
.b2b-card .billing { font-family: var(--font-mono); font-size: 12px; color: var(--mute); border-top: 1px solid var(--line); padding-top: 10px; text-transform: uppercase; }
.b2b-card .group, .once-list .group { margin-top: 4px; }
.once-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); columns: 2 420px; column-gap: 32px; }
.once-list li { break-inside: avoid; padding: 12px 2px; border-bottom: 1px solid var(--rowline); }
.once-list .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; cursor: pointer; }
.once-list .joint { width: 18px; height: 2px; background: var(--hi); }
.once-list .nm { font-weight: 700; }
.once-list .x2 { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--mute); text-transform: uppercase; }

/* live */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 36px; }
.stat-strip > * { background: var(--panel); padding: 18px; }
.stat-strip b { display: block; font-size: 56px; font-weight: 900; font-stretch: 125%; line-height: 1; margin-top: 8px; }
.stat-strip .word { display: block; font-size: 26px; font-weight: 800; font-stretch: 125%; line-height: 1.1; margin-top: 12px; color: var(--hi); }
.stat-strip .word.open { color: var(--mute); }
.live-year { display: flex; flex-wrap: wrap; gap: 0 32px; border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 26px; }
.live-year h2 { flex: 0 0 150px; margin: 0; font-size: 44px; font-weight: 900; font-stretch: 125%; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--text); }
.live-year ol { list-style: none; margin: 0; padding: 0; flex: 999 1 600px; min-width: 0; }
.live-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rowline); cursor: pointer; }
.live-row .d { font-family: var(--font-mono); font-size: 12px; color: var(--mute); text-transform: uppercase; }
.live-row .t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.live-row .act-name { font-size: 26px; font-weight: 800; font-stretch: 112%; line-height: 1.1; }
.live-row .where { font-family: var(--font-mono); font-size: 12px; color: var(--mute); text-transform: uppercase; }

/* zalen en organisatoren */
.podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.podium-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 230px; padding: 20px; background: var(--panel); border: 1px solid var(--line2); overflow: hidden; cursor: pointer; }
.podium-card:hover { border-color: var(--line3); }
.podium-card .rk { position: absolute; right: -10px; bottom: -34px; font-size: 190px; font-weight: 900; font-stretch: 125%; line-height: 1; color: var(--deco); pointer-events: none; }
.podium-card > *:not(.rk) { position: relative; }
.podium-card .label { color: var(--hi); }
.podium-card .cnt { font-size: 72px; font-weight: 900; font-stretch: 125%; line-height: 1; }
.podium-card .cnt small { font-size: 26px; color: var(--mute); }
.podium-card .nm { font-size: 26px; font-weight: 800; font-stretch: 112%; line-height: 1.1; margin-top: auto; }
.podium-card .fav { position: absolute; top: 18px; right: 18px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tile { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.tile:hover { border-color: var(--line3); }
.tile .cnt { font-size: 30px; font-weight: 900; font-stretch: 125%; width: 48px; line-height: 1; flex: none; }
.tile .t { min-width: 0; flex: 1; }
.tile .nm { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .label { display: block; letter-spacing: 0.06em; }
.expand { margin: 0 0 18px; padding: 12px 0 4px 16px; border-left: 1px solid var(--line2); }
.expand-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--mute); margin-bottom: 8px; text-transform: uppercase; }
.citybar { display: flex; height: 64px; gap: 2px; margin-bottom: 10px; }
.citybar span { min-width: 0; display: flex; align-items: flex-end; padding: 6px 8px; font-family: var(--font-mono); font-size: 12px; overflow: hidden; white-space: nowrap; }
.citylegend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text2); text-transform: uppercase; }

.lanes { border: 1px solid var(--line); background: var(--panel); overflow-x: auto; }
.lanes-in { min-width: 980px; }
.lane { display: grid; grid-template-columns: 250px minmax(0, 1fr) 70px 280px; gap: 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--rowline); cursor: pointer; }
.lane:hover { background: var(--panel2); }
.lane.head { cursor: default; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mute); border-bottom: 1px solid var(--line); }
.lane.head:hover { background: none; }
.lane.head .years { display: flex; justify-content: space-between; }
.lane .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lane .who .i { font-family: var(--font-mono); font-size: 12px; color: var(--mute); width: 22px; }
.lane .who .nm { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crown { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; padding: 1px 5px; background: var(--fill); color: var(--onfill); white-space: nowrap; }
.lane .track { position: relative; height: 18px; background: repeating-linear-gradient(90deg, var(--track2) 0 1px, transparent 1px 6.25%); }
.lane .track span { position: absolute; top: 5px; height: 8px; background: var(--text); }
.lane .track span.top { background: var(--hi); }
.lane .cnt { text-align: right; font-size: 24px; font-weight: 900; font-stretch: 125%; }
.lane .nxt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.lane .nxt.none { color: var(--line3); }
.lane-expand { padding: 10px 18px 10px 58px; border-bottom: 1px solid var(--rowline); }

/* kaart */
.map-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.map-main { flex: 999 1 560px; min-width: 0; }
.map-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text2); text-transform: uppercase; }
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.map-legend .d1 { width: 14px; height: 14px; border-radius: 50%; background: var(--dot); border: 1.5px solid var(--hi); }
.map-legend .d2 { width: 14px; height: 14px; border-radius: 50%; border: 2px dashed var(--text); }
.range-field { display: flex; flex-direction: column; gap: 8px; }
.range-field .label { display: flex; justify-content: space-between; }
.range-field .label b { color: var(--text); font-weight: 400; }
.outside { border: 1px solid var(--line); padding: 12px 14px; font-size: 14px; color: var(--text2); }

/* kosten */
.cost-hero { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 36px; }
.cost-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.bignum { padding: 22px 24px; }
.bignum b { display: block; font-size: clamp(72px, 9.6vw, 136px); font-weight: 900; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.03em; margin-top: 10px; white-space: nowrap; }
.bignum b em { font-style: normal; color: var(--mute); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.kpis > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 16px; background: var(--panel); }
.kpis b { display: block; font-size: 30px; font-weight: 800; font-stretch: 125%; margin-top: 6px; white-space: nowrap; }
.coverage { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 18px; border: 1px dashed var(--line3); }
.coverage b { font-size: 44px; font-weight: 900; font-stretch: 125%; line-height: 1; }
.coverage p { flex: 1 1 260px; margin: 0; color: var(--text2); }
.receipt { flex: 1 1 360px; min-width: 0; background: var(--text); color: var(--bg); padding: 22px 22px 26px; font-family: var(--font-mono); font-size: 13px; }
.receipt h2 { margin: 0 0 4px; font-family: var(--font-main); font-size: 22px; font-weight: 900; font-stretch: 125%; }
.receipt .sub { letter-spacing: 0.1em; color: var(--receiptsub); margin-bottom: 14px; }
.receipt .lines { border-top: 1px dashed var(--bg); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.receipt .ln { display: flex; gap: 8px; align-items: baseline; }
.receipt .ln span:first-child { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.receipt .ln .dt { color: var(--receiptsub); }
.receipt .ln b { width: 54px; text-align: right; }
.receipt .total { border-top: 1px dashed var(--bg); margin-top: 12px; padding-top: 10px; display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; }
.barcode { display: flex; gap: 3px; height: 34px; margin-top: 16px; }
.barcode i { background: var(--bg); }
.money-vu .vu-col i { height: 9px; }

/* badges */
.progress { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; padding: 20px 22px; margin-bottom: 30px; }
.progress > b { font-size: 64px; font-weight: 900; font-stretch: 125%; line-height: 1; }
.progress > b em { font-style: normal; color: var(--mute); }
.progress .bar-wrap { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
.progress .segs { display: flex; gap: 3px; }
.progress .segs i { flex: 1; height: 14px; background: var(--hi); }
.progress .segs i.off { background: none; border: 1px dashed var(--line3); }
.patches { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.patch { clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); background: var(--fill); padding: 2px; }
.patch-in { clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); background: var(--panel2); padding: 16px 16px 18px; min-height: 196px; height: 100%; display: flex; flex-direction: column; gap: 8px; }
.patch .top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; }
.patch .top span:first-child { color: var(--hi); }
.patch .top span:last-child { color: var(--mute); }
.patch .spec { font-size: 40px; font-weight: 900; font-stretch: 125%; line-height: 1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.patch .specsub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--text2); text-transform: uppercase; }
.patch h3 { margin: auto 0 0; font-size: 17px; font-weight: 800; font-stretch: 112%; letter-spacing: 0.02em; }
.patch p { margin: 0; font-size: 13px; color: var(--mute); line-height: 1.35; }
.patch.open { clip-path: none; background: none; border: 1px dashed var(--line3); padding: 0; }
.patch.open .patch-in { clip-path: none; background: none; }
.patch.open .top span:first-child, .patch.open .spec { color: var(--line3); }
.patch.open h3 { color: var(--text2); }

/* watchlist */
.wl-timeline { padding: 18px 20px 14px; margin-bottom: 36px; overflow-x: auto; }
.wl-track { position: relative; min-width: 860px; height: 150px; }
.wl-track .month { position: absolute; top: 0; bottom: 22px; border-left: 1px solid var(--line); }
.wl-track .mlabel { position: absolute; bottom: 0; padding-left: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mute); }
.wl-track .axis { position: absolute; left: 0; right: 0; top: 74px; height: 1px; background: var(--line2); }
.wl-track .now { position: absolute; top: 60px; height: 28px; width: 2px; background: var(--live); }
.wl-track .nowl { position: absolute; top: 108px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--live); }
.wl-track .mk { position: absolute; padding: 0; border: 0; cursor: pointer; }
.wl-track .mk.watch { top: 67px; width: 10px; height: 10px; margin-left: -6px; border: 2px solid var(--text); background: var(--bg); transform: rotate(45deg); }
.wl-track .mk.ticket { top: 68px; width: 12px; height: 12px; margin-left: -6px; background: var(--hi); }
.wl-track .ml { position: absolute; font-family: var(--font-mono); font-size: 11px; color: var(--text2); white-space: nowrap; transform: translateX(-6px); }
.wl-track .ml.ticket { color: var(--hi); }
.wl-legend { display: flex; gap: 20px; margin-top: 10px; }
.wl-legend span { display: inline-flex; align-items: center; gap: 8px; }
.wl-legend .w { width: 9px; height: 9px; border: 2px solid var(--text); transform: rotate(45deg); }
.wl-legend .t { width: 10px; height: 10px; background: var(--hi); }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin-bottom: 44px; }
.wl-card { background: var(--panel); border: 1px dashed var(--line3); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.wl-card .top { display: flex; align-items: flex-start; gap: 18px; cursor: pointer; }
.wl-card .cd { flex: none; min-width: 112px; display: flex; flex-direction: column; gap: 4px; }
.wl-card .cd b { font-size: 30px; font-weight: 900; font-stretch: 125%; line-height: 1; white-space: nowrap; }
.wl-card .cd .tonight { font-size: 13px; font-weight: 900; font-stretch: 125%; letter-spacing: 0.04em; background: var(--fill); color: var(--onfill); padding: 6px 8px; text-align: center; white-space: nowrap; }
.wl-card h2 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.2; }
.wl-card .sugg { display: inline-block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--hi); border: 1px solid var(--hi); padding: 2px 6px; }
.wl-card .wh { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--text2); margin-top: 6px; text-transform: uppercase; }
.wl-card .wh2 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--mute); margin-top: 2px; text-transform: uppercase; }
.wl-card .acts span { font-size: 13px; padding: 3px 9px; border: 1px solid var(--line2); }
.wl-card .acts .more { border: 0; font-family: var(--font-mono); color: var(--mute); }
.wl-card .note { margin: 0; font-size: 13px; color: var(--text2); border-left: 2px solid var(--line2); padding-left: 10px; }
.wl-card .nolineup { font-family: var(--font-mono); font-size: 12px; color: var(--mute); }
.watch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.wl-past { display: flex; flex-direction: column; gap: 8px; margin-bottom: 44px; }
.wl-past .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 18px; border: 1px solid var(--line); color: var(--mute); }
.wl-past .row .nm { color: var(--text2); font-weight: 700; cursor: pointer; }
.wl-past .row .watch-actions { margin: 0 0 0 auto; padding: 0; }
.watch-form-box { padding: 22px; }
.watch-form-box h2 { margin: 0 0 18px; font-size: 22px; font-weight: 800; font-stretch: 125%; text-transform: uppercase; }
.watch-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: end; }
.watch-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--mute); text-transform: uppercase; }
.watch-form input { min-height: 42px; background: var(--bg); border: 1px solid var(--line2); color: var(--text); padding: 0 12px; font-family: var(--font-main); font-size: 15px; letter-spacing: 0; text-transform: none; }
.watch-form input:focus { outline: none; border-color: var(--text); }
.watch-form button[type="submit"] { min-height: 42px; }
.watch-error { color: var(--hi); font-size: 13px; grid-column: 1 / -1; }

/* zoeken in een lijst zonder resultaat */
.empty { color: var(--mute); padding: 18px 0; }

/* ------------------------------------------------------- alleen-lezen */

.readonly .event-delete,
.readonly .poster-actions,
.readonly .poster-drop,
.readonly .appic-add,
.readonly .ticket-add,
.readonly .watch-toggle,
.readonly .watch-actions button,
.readonly .watch-form-box,
.readonly .add-watch,
.readonly .ungroup { display: none !important; }
.readonly .rolechip, .readonly .settype, .readonly .mctag, .readonly .fav, .readonly .act { cursor: default; }
.readonly .scorebox, .readonly .tagadd, .readonly .tagx, .readonly .solo-toggle, .readonly .personx { pointer-events: none; }
.readonly .tagadd, .readonly .personadd { display: none; }
.readonly footer::after { content: "alleen-lezen weergave · bewerken kan op de lokale versie"; display: block; margin-top: 6px; }

/* Public view (no login): scores, money and achievements are not in the data;
   hide what would otherwise show up empty, and make stars and ticks inert. */
.public [data-view="kosten"], .public [data-view="badges"],
.public .scorebox, .public .ed-score, .public .scorecol { display: none !important; }
.public .fav, .public .act { pointer-events: none; }
/* The footer counts the database and names your Agendainfo list: not for visitors. */
.public footer { display: none; }

/* ------------------------------------------------------------ telefoon */

.bottombar, .menu-sheet { display: none; }
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .hud-strip { display: none; }
  .hud-main { padding-block: 12px; gap: 10px; flex-wrap: nowrap; }
  .brand { padding-bottom: 0; margin-right: auto; }
  .wordmark { font-size: 21px; }
  .mark { width: 26px; height: 26px; }
  .tabs { display: none; }
  .search { margin: 0; flex: 0 1 44px; min-width: 44px; padding: 0; justify-content: center; border-color: var(--line); }
  .search input, .search kbd { display: none; }
  .search.open { position: fixed; inset: 0 0 auto 0; z-index: 60; max-width: none; flex: none; padding: 0 12px; min-height: 60px; justify-content: flex-start; background: var(--panel); }
  .search.open input { display: block; }
  .search.open .search-results { top: 100%; left: 0; right: 0; max-height: 70vh; }
  .menu-open { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid var(--line); cursor: pointer; flex: none; }
  .menu-open svg { width: 18px; height: 18px; fill: none; stroke: var(--text); stroke-width: 2; }
  main { padding-block: 22px 96px; }
  footer { padding-bottom: 84px; }
  .bottombar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--panel); border-top: 1px solid var(--line2); padding-bottom: env(safe-area-inset-bottom);
  }
  .bottombar button {
    min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: none; border: 0; color: var(--mute); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; cursor: pointer;
  }
  .bottombar button::before { content: ""; width: 7px; height: 7px; background: var(--line2); }
  .bottombar button.on { color: var(--text); }
  .bottombar button.on::before { background: var(--live); }
  .menu-sheet:not([hidden]) { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 70; background: var(--bg); overflow-y: auto; }
  .menu-sheet-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .menu-close { width: 44px; height: 44px; background: none; border: 1px solid var(--line2); color: var(--text); font-size: 22px; cursor: pointer; }
  .menu-groups { flex: 1; padding: 8px 16px; }
  .menu-group { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .menu-group > button { display: flex; align-items: baseline; gap: 12px; width: 100%; min-height: 44px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text); text-align: left; }
  .menu-group > button .ch { font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
  .menu-group > button .nm { font-size: 32px; font-weight: 900; font-stretch: 125%; line-height: 1.1; }
  .menu-group > button .ct { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--mute); }
  .menu-group > button.on .ch, .menu-group > button.on .nm { color: var(--hi); }
  .menu-subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 0 30px; }
  .menu-subs button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line2); background: none; color: var(--text2); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; cursor: pointer; }
  .menu-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px 16px 18px; border-top: 1px solid var(--line); }
  .menu-controls .seg { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .menu-controls .seg button, .menu-controls .chipbtn { min-height: 44px; }
  .menu-controls .wide { grid-column: 1 / -1; }

  .page-title { font-size: clamp(44px, 13vw, 64px); }
  .sec-head h2 { font-size: 18px; }
  .hero-num { gap: 4px 14px; flex-wrap: nowrap; }
  .hero-num b { font-size: 92px; margin-bottom: 0; }
  .hero-num span { font-size: 22px; padding-bottom: 6px; }
  .band { margin-bottom: 26px; }
  .band-actions { margin-left: 0; }
  .ev-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; }
  .ev-row .thumb, .ev-row .noposter { display: none; }
  .ev-row .meter { display: none; }
  .year-outline { font-size: 44px; }
  .year-side { max-width: none; }
  .wl-grid { grid-template-columns: 1fr; }
  .wl-card .cd { min-width: 84px; }
  .feature { min-height: 340px; }
  .stamp { width: 96px; height: 96px; gap: 8px; }
  .stamp b { font-size: 30px; }
  .lineup-head .legend { margin-left: 0; }
  .ed-facts { grid-template-columns: 96px minmax(0, 1fr); }
  .event.ev-card { grid-template-columns: 1fr; gap: 4px; }
  .nights li { grid-template-columns: 1fr; gap: 6px; }
  .nights .r { justify-content: flex-start; }
  .split-aside { max-width: none; }
  .cal-row { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}