/* Aanvullingen voor het live meedoen. Dezelfde tokens als app.css — geen
   nieuwe kleuren, geen nieuwe lettertypen, alleen onderdelen die er nog niet
   waren: de stemverdeling op het scherm en de telefoonweergave. */

/* ---------- Stemverdeling op het presentatiescherm ---------- */
.dist { display: grid; gap: .3em; margin-top: .5em }
.dist .drow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6em }
.dist .dbar {
  position: relative; height: 1.9em; border-radius: var(--r-sm);
  background: var(--panel); overflow: hidden; display: flex; align-items: center;
}
.dist .dfill {
  position: absolute; inset: 0 auto 0 0; background: var(--accent-soft);
  border-right: 2px solid var(--accent); transition: width .35s ease;
}
.dist .drow.right .dfill { background: var(--ok-soft); border-right-color: var(--ok) }
.dist .dlab { position: relative; padding: 0 .6em; font-size: .82em; white-space: nowrap }
.dist .dn { font-variant-numeric: tabular-nums; font-size: .82em; color: var(--muted); min-width: 2.4em; text-align: right }
.dist .drow.right .dlab::after { content: " ✓"; color: var(--ok-ink); font-weight: 600 }

/* Teller ‘7 van 12 gestemd’ */
.votecount { display: inline-flex; align-items: center; gap: .4em; font-size: .8em; color: var(--muted) }
.votecount b { color: var(--fg); font-variant-numeric: tabular-nums }
.votecount .pulse {
  width: .55em; height: .55em; border-radius: 50%; background: var(--ok);
  animation: vpulse 1.6s ease-in-out infinite;
}
@keyframes vpulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .votecount .pulse { animation: none } .dist .dfill { transition: none } }

/* Knoppenbalk om een activiteit te openen, te onthullen of te wissen */
.livectl { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; margin: .5em 0 }
.livectl .lv-on { background: var(--ok-soft); border-color: var(--ok); color: var(--ok-ink) }
.livectl .lv-wait { color: var(--muted); font-size: .8em }

/* Warmte-overlay bij het koppelen: hoe donkerder, hoe meer stemmen */
.vote-heat { position: relative }
.vote-heat::after {
  content: attr(data-stemmen); position: absolute; top: .25em; right: .3em;
  background: var(--accent); color: #fff; border-radius: var(--r-pill);
  font-size: .62em; min-width: 1.5em; height: 1.5em; padding: 0 .4em;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.vote-heat[data-stemmen="0"]::after { display: none }

/* De zaal: wie doet er mee */
.roster { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .4em }
.roster .who {
  background: var(--panel); border-radius: var(--r-pill); padding: .15em .6em; font-size: .72em;
}

/* ---------- Telefoon ---------- */
body.speler { font-size: 16px }
.ph {
  min-height: 100dvh; display: flex; flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) var(--gut) max(12px, env(safe-area-inset-bottom)) var(--gut-r);
  gap: .8em;
}
.ph-top {
  display: flex; justify-content: space-between; align-items: center; gap: .6em;
  border-bottom: 1px solid var(--line); padding-bottom: .5em;
}
.ph-top .me { font-size: .8em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ph-top .conn { font-size: .7em; color: var(--muted); display: inline-flex; align-items: center; gap: .3em }
.ph-top .conn i { width: .5em; height: .5em; border-radius: 50%; background: var(--faint) }
.ph-top .conn.on i { background: var(--ok) }
.ph-body { flex: 1; display: flex; flex-direction: column; gap: .7em }
.ph-foot { display: flex; gap: .4em; padding-top: .5em; border-top: 1px solid var(--line) }

.ph h1 { font-family: var(--font-display); font-size: clamp(22px, 6vw, 30px); letter-spacing: -.03em; line-height: 1.05 }
.ph .kaart {
  border: 1.5px solid var(--fg); border-radius: var(--r-lg); padding: .9em;
  background: var(--panel); font-size: 1.05em;
}

/* Grote, goed raakbare keuzeknoppen */
.ph-opts { display: grid; gap: .5em }
.ph-opts.two { grid-template-columns: 1fr 1fr }
.ph-opt {
  min-height: 64px; border: 2px solid var(--fg); border-radius: var(--r-md);
  background: var(--bg); color: var(--fg); font-size: 1.05em; padding: .6em .8em;
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: transform .08s ease;
}
.ph-opt:active { transform: scale(.97) }
.ph-opt[aria-pressed="true"] { background: var(--fg); color: var(--bg) }
.ph-opt.lvl-impact { border-color: var(--toc-impact); background: var(--toc-impact); color: var(--toc-ink) }
.ph-opt.lvl-uitkomst { border-color: var(--toc-uitkomst); background: var(--toc-uitkomst); color: #fff }
.ph-opt.lvl-output { border-color: var(--toc-output); background: var(--toc-output); color: var(--toc-ink) }
.ph-opt.lvl-strategie { border-color: var(--fg); background: var(--toc-strategie); color: var(--toc-ink) }
.ph-opt.lvl-bib { border-color: var(--fg); background: var(--panel-2); color: var(--fg) }
.ph-opt[aria-pressed="true"]::after { content: " ✓"; margin-left: .4em; font-weight: 600 }

/* Lijst met vakken, stap 2 van de vakkiezer */
/* De lijsten vullen de hoogte die over is en scrollen daarbinnen. */
.ph-list { display: grid; gap: .35em; flex: 1 1 auto; min-height: 8em; overflow: auto; -webkit-overflow-scrolling: touch; align-content: start }
.ph-row {
  display: grid; grid-template-columns: 3.2em 1fr; align-items: center; gap: .6em;
  min-height: 54px; border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--bg); color: var(--fg); padding: .5em .7em; text-align: left; font-size: .95em;
}
.ph-row .vk {
  font-variant-numeric: tabular-nums; font-size: .8em; font-weight: 600;
  background: var(--panel); border-radius: var(--r-sm); padding: .2em .35em; text-align: center;
}
.ph-row[aria-pressed="true"] { border-color: var(--fg); background: var(--accent-soft) }
.ph-row[aria-pressed="true"] .vk { background: var(--accent); color: #fff }

/* Stippen */
.ph-stip { display: grid; gap: .4em; flex: 1 1 auto; min-height: 8em; overflow: auto; align-content: start; -webkit-overflow-scrolling: touch }
.ph-stiprow {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: .4em;
  border-bottom: 1px solid var(--line); padding: .45em 0;
}
.ph-stiprow .nm { font-size: .9em; line-height: 1.25 }
.ph-stiprow .nm small { display: block; color: var(--muted); font-size: .8em }
.ph-stiprow button {
  width: 44px; height: 44px; border: 1.5px solid var(--fg); border-radius: var(--r-md);
  font-size: 1.2em; display: grid; place-items: center; background: var(--bg);
}
.ph-stiprow button:disabled { opacity: .3 }
.ph-stiprow .cnt { min-width: 1.6em; text-align: center; font-variant-numeric: tabular-nums; font-size: 1.1em }
.budget {
  position: sticky; top: 0; z-index: 2; background: var(--bg);
  display: flex; justify-content: space-between; align-items: center;
  padding: .5em 0; border-bottom: 1.5px solid var(--fg); font-size: .9em;
}
.budget .dots { display: flex; gap: .25em }
.budget .dots i { width: .8em; height: .8em; border-radius: 50%; background: var(--line) }
.budget .dots i.on { background: var(--accent) }

/* Matrixvlak om een punt te slepen */
/* Het vlak is vierkant plus een strook eronder voor de as-teksten. De
   lettergroottes staan in gebruikerseenheden van de viewBox, niet in px:
   binnen een viewBox van 100 breed zou 9px ruim 30 schermpixels worden. */
.ph-matrix { position: relative; width: 100%; touch-action: none; margin: .2em 0 }
.ph-matrix svg { width: 100%; height: auto; display: block; overflow: visible }
.ph-matrix .axl { font-size: 3.4px; fill: var(--muted) }
.ph-matrix .axt { font-size: 4px; fill: var(--fg); font-weight: 600 }

/* Meldingen op de telefoon */
.ph-note { font-size: .85em; color: var(--muted) }
.ph-ok { background: var(--ok-soft); color: var(--ok-ink); border-radius: var(--r-md); padding: .6em .8em; font-size: .9em }
.ph-err { background: var(--attn-soft); color: var(--attn-ink); border-radius: var(--r-md); padding: .6em .8em; font-size: .9em }
.ph-wait { display: grid; place-items: center; gap: .6em; flex: 1; text-align: center; color: var(--muted) }
.ph-wait .big { font-family: var(--font-display); font-size: clamp(26px, 8vw, 40px); color: var(--fg); letter-spacing: -.03em }

.ph-in {
  width: 100%; min-height: 52px; border: 1.5px solid var(--fg); border-radius: var(--r-md);
  padding: .6em .7em; background: var(--bg); font-size: 1em;
}
textarea.ph-in { min-height: 100px; resize: vertical }
.ph-btn {
  min-height: 52px; border: 2px solid var(--fg); border-radius: var(--r-md);
  background: var(--fg); color: var(--bg); padding: .7em 1em; font-size: 1em;
  width: 100%; flex: 0 0 auto;
}
/* In de voetbalk staan de knoppen naast elkaar en mogen ze wél delen. */
.ph-foot .ph-btn { flex: 1 1 auto; width: auto }
.ph-btn.ghost { background: var(--bg); color: var(--fg) }
.ph-btn:disabled { opacity: .4 }

/* ---------- Landingspagina ---------- */
.land { min-height: 100dvh; display: grid; place-items: center; padding: var(--gut) }
.land .box { max-width: 30em; display: grid; gap: 1em; text-align: center }
.land .qr { background: #fff; padding: .8em; border-radius: var(--r-lg); display: inline-block }
.land .qr svg { width: 180px; height: 180px; display: block }
.land .code {
  font-family: var(--font-display); font-size: clamp(40px, 14vw, 72px); letter-spacing: .06em;
}

/* Posities die de zaal instuurde: licht, achter de echte pin */
.matrix .ghostpin {
  position: absolute; width: .8em; height: .8em; padding: 0; min-width: 0;
  border-radius: 50%; background: var(--accent); opacity: .3; border: 0;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 1;
}

/* Voorstellen uit de zaal, naast een meetplanveld */
.sugrail { display: grid; gap: .25em; margin-top: .35em }
.sugbtn {
  text-align: left; font-size: .8em; line-height: 1.35;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); background: var(--panel); padding: .35em .5em; color: var(--fg);
}
.sugbtn:hover { background: var(--accent-soft); border-color: var(--accent) }
.sugask { float: right; margin-left: .5em; font-size: .72em }

/* Ronde 1 op de telefoon: de eigen lijst met kaarten */
.ph-row.kaartrij { grid-template-columns: 3.6em 1fr }
.ph-row.kaartrij small { display: block; color: var(--muted); font-size: .78em; font-weight: 400 }
.ph-row.kaartrij.gedaan { background: var(--ok-soft); border-color: var(--ok) }
.ph-row.kaartrij.gedaan .vk { background: var(--ok); color: var(--ok-ink) }
.budget .klaar { color: var(--ok-ink); font-weight: 600 }