/*
 * Het eventscherm (referentie `schermen/Event.html`).
 *
 * Geen nieuwe kleuren en geen nieuwe maten: alles komt uit de tokens van §3 en
 * §4. §6.9 zegt dat een scherm dat iets nodig heeft wat daar niet staat een
 * ontwerpvraag is en geen implementatiedetail - dus staat hier alleen plaatsing.
 *
 * WAT HIER BEWUST NIET STAAT. De actiepunten gebruiken `.groep`, `.task`,
 * `.box`, `.task-text`, `.task-meta` en `.who` uit `components.css`, en de
 * blokken `.blk`/`.kv`. Die stonden er al. Een eigen `.vak` en een eigen
 * `.item-af` ernaast bouwen zou twee regels voor één ding maken, en dan wint
 * over een half jaar de verkeerde.
 */

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

/*
 * Geen kaart met een rand: de tekening zet de kop rechtstreeks op de pagina,
 * met het wapen erachter. De naam van het event staat in de balk erboven en
 * hier dus niet nog een keer.
 */
.ev-kop {
  position: relative;
  overflow: hidden;
  padding: 14px 20px 16px;
}

/* Nooit over tekst heen (§5): rechtsboven, half buiten beeld, en heel licht. */
.ev-wapen {
  position: absolute;
  right: -30px;
  top: -52px;
  width: 124px;
  opacity: 0.11;
  mix-blend-mode: screen;
  pointer-events: none;
}

.ev-pillen {
  gap: 7px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.ev-balk {
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

/*
 * Voortgang links, de interne deadline rechts. Uit elkaar, want het zijn twee
 * verschillende dingen: hoe ver we zijn, en waartegen dat afgezet moet worden.
 */
.ev-voet {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  font-size: var(--fs-meta);
  color: var(--muted);
  position: relative;
  z-index: 1;
}
.ev-voet b { color: var(--ink); font-weight: 600; }

/* ---- De poort ----------------------------------------------------------- */

/*
 * Een gestippeld kader in de kleur van *let op* (§6.3). Gestippeld en niet
 * doorgetrokken omdat het geen gegeven is maar een afspraak: iets wat wij
 * onszelf hebben opgelegd, met een datum eraan.
 */
.poort {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 13px 14px;
  border: 1px dashed var(--warn-a40);
  border-radius: var(--r-banner);
  background: var(--warn-a07);
}

.poort-teken { margin-top: 1px; }

.poort-kop {
  font-size: var(--fs-support-sm);
  font-weight: 600;
  color: var(--warn-text);
}

.poort-tekst {
  margin-top: 3px;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--muted);
}

/* ---- Knoppen onder een blok --------------------------------------------- */

/* Lager dan een hoofdknop: het is een aanbod, niet de bedoeling van het scherm. */
.btn-taak {
  height: 46px;
  font-size: var(--fs-body);
  width: 100%;
}

/* ---- De live tellers ---------------------------------------------------- */

/*
 * Buiten het event staat dit blok er wel, maar gedempt: "je ziet wat er komt
 * zonder dat het lijkt te werken" (§6.3). De waarde 0.55 komt daar letterlijk
 * vandaan.
 */
.blk-straks {
  opacity: 0.55;
}

.tellers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
  text-align: center;
}

.teller-getal {
  font-size: var(--fs-num-sum);
  line-height: 1.1;
}

.teller-naam {
  margin-top: 3px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  color: var(--muted-2);
}

/* ---- Het eventoverzicht (blok B punt 11) -------------------------------- */

.events-vorm[hidden] { display: none; }
.events-punt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: var(--fs-support);
  cursor: pointer;
}
.events-punt input { margin-top: 3px; accent-color: var(--gold); }
.events-fout[hidden] { display: none; }

/* ---- Genodigden (BOUWOPDRACHT-8 par. 5.3) ------------------------------- */

.gen-rij { align-items: center; gap: 8px; }
.gen-naam {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
button.gen-naam:hover { color: var(--gold); }
.gen-rechts { gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.gen-rechts .pill { cursor: pointer; text-decoration: none; }
/* De naam is de inhoud van de rij, geen label - dus niet gedempt zoals .kv. */
.gen-rij > span:first-child { color: inherit; }

/* Eventpagina: vaste onderdelen, één overzicht en dezelfde acties op ieder scherm. */
.bureau-kolom:has(.ev-pagina){width:100%;max-width:none}
.ev-pagina{width:100%;max-width:1160px;box-sizing:border-box;margin:0 auto;padding:24px 24px calc(var(--h-fab) + 36px)}
.ev-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:4px 0 28px}
.ev-intro>div:first-child{min-width:0}
.ev-intro h1{font:600 clamp(26px,3vw,38px)/1.16 var(--font-sans);letter-spacing:-.025em;margin:8px 0 12px;overflow-wrap:anywhere}
.ev-fase{color:var(--muted);font-size:12px}
.ev-meta{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.ev-aftelling{color:var(--gold);border:1px solid var(--gold-a30);border-radius:12px;padding:14px 18px;white-space:nowrap;font-size:18px;font-weight:600}
.ev-bevestigen{margin-bottom:18px}
.ev-navigatie{display:flex;gap:24px;overflow-x:auto;max-width:100%;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;background:var(--bg);margin-bottom:24px;scrollbar-width:thin}
.ev-navigatie button{display:flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0;font:inherit;font-size:14px;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;padding:14px 0;cursor:pointer}
.ev-navigatie button[aria-selected="true"]{color:var(--gold);border-bottom-color:var(--gold)}
.ev-tab-aantal{background:#bd303b;color:#fff;min-width:20px;height:20px;box-sizing:border-box;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;font-size:11px}
.ev-paneel[hidden]{display:none}
.ev-overzicht-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
.ev-details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.ev-kaart{min-width:0;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:20px}
.ev-details-grid>.ev-kaart{margin:0}
.ev-kaart-kop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.ev-kaart h2{font-size:17px;line-height:1.3;font-weight:600;margin:0}
.ev-kaart .pad,.ev-deadline .pad{padding:0}
.ev-kaart .task{padding:14px 0;gap:12px}
.ev-kaart .task+.task{border-top:1px solid var(--gold-a10)}
.ev-kaart .task .groei{min-width:0}
.ev-kaart .task-text{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.ev-kaart .task-meta{display:block;font-size:12px;line-height:1.5;margin-top:4px}
.ev-kaart .who{flex-shrink:0}
.ev-kaart .groep:first-child{margin-top:0}
.ev-kaart .kv{align-items:start;gap:16px;min-width:0}
.ev-kaart .kv>span{min-width:0;overflow-wrap:anywhere}
.ev-kaart .kv>span:last-child{text-align:right}
.ev-kaart .relatie-veld{width:100%}
.ev-voortgang{margin-bottom:12px;color:var(--muted);font-size:12px}
.ev-voortgang .pbar{margin-top:10px}
.ev-tekstknop{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 0;color:var(--gold);font:inherit;font-size:12px;cursor:pointer;flex-shrink:0}
.ev-tekstknop .i{width:14px;height:14px}
.ev-feit{padding:12px 0;border-bottom:1px solid var(--gold-a10);font-size:13px;display:flex;flex-direction:column;gap:5px;overflow-wrap:anywhere}
.ev-feit:first-of-type{padding-top:0}
.ev-feit:last-child{border-bottom:0;padding-bottom:0}
.ev-feit>span{color:var(--muted);font-size:12px}
.ev-feit strong{font-weight:500}
.ev-leeg,.ev-bijschrift{font-size:13px;color:var(--muted);line-height:1.6;margin:0}
.ev-snel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:4px}
.ev-snelknop{display:flex;gap:14px;align-items:center;min-width:0;padding:18px;border:1px solid var(--line);border-radius:12px;background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.ev-snelknop>span{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.ev-snelknop strong{font-size:14px}
.ev-snelknop span>span{font-size:13px;color:var(--muted)}
.ev-snelknop small{font-size:11px;color:var(--muted)}
.ev-snelknop>.i{width:18px;flex-shrink:0;color:var(--gold)}
.ev-paneel>.pad{padding:0}
.ev-paneel>.pad .blk{border-radius:14px}
.ev-afronden{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.ev-paneel .event-uitklap{min-width:0}
.ev-paneel .gen-rechts{min-width:0}
.ev-pagina button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
body:has(.ev-pagina):has(.naamvraag) .hag-hoofdactie{display:none}
@media(max-width:700px){
 .ev-pagina{padding:18px 20px calc(var(--h-fab) + 32px)}
 .ev-intro{align-items:flex-start;flex-direction:column;gap:14px;padding-bottom:20px}
 .ev-intro h1{font-size:28px}
 .ev-aftelling{font-size:14px;padding:9px 12px}
 .ev-meta{font-size:13px;gap:6px 14px}
 .ev-navigatie{gap:22px;margin-bottom:20px}
 .ev-overzicht-grid,.ev-details-grid{grid-template-columns:minmax(0,1fr);gap:0}
 .ev-details-grid>.ev-kaart{margin-bottom:16px}
 .ev-kaart{padding:16px;margin-bottom:16px}
 .ev-kaart-kop{gap:10px}
 .ev-kaart h2{font-size:16px}
 .ev-kaart .kv{flex-wrap:wrap;gap:6px}
 .ev-kaart .kv>span:last-child{text-align:left;flex-basis:100%}
 .ev-snel{grid-template-columns:minmax(0,1fr);gap:10px}
 .ev-snelknop{padding:15px}
 .ev-deadline{margin-bottom:16px}
}

@media(min-width:1024px){.bureau-hoofd .fab.hag-hoofdactie:is([data-taak-toevoegen],[data-event-punt]){display:flex;right:24px;bottom:24px}body:has(.naamvraag) .bureau-hoofd .fab:is([data-taak-toevoegen],[data-event-punt]){display:none}}

.ev-lijstregel{display:flex;align-items:center;flex-wrap:wrap}
/* Documenten: elke regel is een knop die de voorvertoning opent. */
.ev-documenten{display:flex;flex-direction:column}
.ev-document{width:100%;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-height:44px}
.ev-document:hover strong{color:var(--gold)}
.ev-document-acties{margin:10px 0 0}
.ev-wie-rij{flex-basis:100%;padding:0 0 8px 44px;box-sizing:border-box}
.ev-afvink{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:none;border:0;padding:0;color:var(--ink);cursor:pointer}
.ev-lijst-open{border:0;background:none;color:var(--ink);font:inherit;text-align:left;min-height:44px;padding:0;cursor:pointer;min-width:0}
.ev-lijst-open .task-text{display:block}
.ev-lijst-open:hover{color:var(--gold)}

.ev-reis-form{display:grid;gap:14px;min-width:0}
.ev-reis-form label{display:grid;gap:7px;font-size:13px}
.ev-reis-form input{box-sizing:border-box;width:100%;min-width:0;max-width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;color-scheme:dark}
.ev-reis-form [type=submit]{justify-self:start}
.ev-reistijd{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:13px}
.ev-reistijd p{line-height:1.5;overflow-wrap:anywhere}

.ev-afvink[aria-pressed="true"] .box{background:var(--gold);border-color:var(--gold)}