/* ============================================================
   Keuzehulp v3 — stijlen voor de uitslag met echte kaart en
   data-signalen (afmaakronde na agent-handoff).
   ============================================================ */

/* ---------- druppel-pins op de echte kaart ---------- */
.khu3-druppel {
  width: 30px; height: 30px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-kop); font-weight: 800; font-size: 13px; color: #fffdf6;
  border: 2px solid #fffdf6; box-shadow: 0 2px 8px rgba(43, 33, 28, .35);
}
.khu3-druppel.khu3-p1 { background: var(--baksteen); width: 36px; height: 36px; font-size: 15px; }
.khu3-druppel.khu3-p2 { background: var(--oker); }
.khu3-druppel.khu3-p3 { background: var(--glasgroen); }
.khu3-druppel.khu3-p45 { background: var(--muted); }

.khu3-popknop {
  font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
  background: var(--baksteen); color: #f5eedd; border: 0; border-radius: 7px;
  padding: .3rem .7rem; margin-top: .3rem;
}

/* ---------- mini-adviesbalk (3 segmenten) ---------- */
.khu3-balk {
  display: inline-flex; width: 100%; max-width: 220px; height: 9px;
  border-radius: 5px; overflow: hidden; vertical-align: middle;
}
.khu3-balk.mini { max-width: 60px; height: 7px; flex: none; }
.khu3-balk i { display: block; height: 100%; }
.khu3-balk .vmbo { background: var(--adv-vmbo); }
.khu3-balk .havo { background: var(--adv-havo); }
.khu3-balk .vwo { background: var(--adv-vwo); }
.khu3-balk .dicht {
  flex: 6; background: repeating-linear-gradient(45deg, var(--lijn) 0 4px, var(--creme-licht) 4px 8px);
}

/* legenda-regel (vmbo/havo/vwo) */
.khu3-legenda { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.khu3-legenda i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-left: .5rem; }
.khu3-legenda i:first-child { margin-left: 0; }
.khu3-legenda i.vmbo { background: var(--adv-vmbo); }
.khu3-legenda i.havo { background: var(--adv-havo); }
.khu3-legenda i.vwo { background: var(--adv-vwo); }

/* ---------- wegingschaal 20-40 ---------- */
.khu3-wegingschaal {
  display: inline-flex; align-items: center; gap: .35rem;
  width: 100%; max-width: 150px; vertical-align: middle;
}
.khu3-wegingschaal .eind { font-size: .64rem; color: var(--muted); flex: none; }
.khu3-wegingschaal .spoor {
  position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--lijn);
}
.khu3-wegingschaal .spoor i {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--oker); border: 2px solid var(--kaart); display: block;
}

/* ---------- context-chip (boven/onder/vergelijkbaar) ---------- */
.khu3-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 11px;
  margin-left: .35rem; white-space: nowrap; vertical-align: 2px;
}
.khu3-chip.boven { color: var(--glasgroen); background: var(--glasgroen-licht); }
.khu3-chip.onder { color: #8a4434; background: #f0e3de; }
.khu3-chip.gelijk { color: var(--tekst-zacht); background: var(--creme-licht); }

/* ---------- hero-signalen (uitslag #1) ---------- */
.khu3-herosig {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem;
  border-top: 1px dashed var(--lijn); margin-top: .7rem; padding-top: .7rem;
}
.khu3-sig { min-width: 0; }
.khu3-sig .lab {
  display: block; font-size: .64rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .2rem;
}
.khu3-sig .wrd, .khu3-sig .getal {
  font-family: var(--font-kop); font-weight: 800; font-size: .98rem; color: var(--inkt);
}

/* ---------- compacte signaalregel in lijstrijen #2-5 ---------- */
.khu3-rijsig {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; color: var(--muted); margin-top: .15rem; max-width: 100%;
}
.khu3-rijsig .wgt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- detail: signalenraster "Cijfers in het kort" ---------- */
.khu3-signalen {
  display: grid; grid-template-columns: 1fr 1fr; gap: .8rem .9rem;
  background: var(--creme-licht); border: 1px solid var(--lijn);
  border-radius: var(--radius-klein); padding: .85rem 1rem;
}
.khu3-sigblok { min-width: 0; }
.khu3-sigblok.breed { grid-column: 1 / -1; }
.khu3-sigblok .lab {
  display: block; font-size: .66rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .25rem;
}
.khu3-sigblok .getal {
  font-family: var(--font-kop); font-weight: 800; font-size: 1.25rem;
  color: var(--inkt); line-height: 1.05; font-variant-numeric: tabular-nums;
}
.khu3-sigblok .sub { display: block; font-size: .7rem; color: var(--muted); margin-top: .25rem; }

/* ℹ-uitleg per signaal */
.khu3-info { margin-top: .3rem; font-size: .74rem; }
.khu3-info summary {
  cursor: pointer; color: var(--tekst-zacht); list-style: none;
  font-weight: 600; min-height: 24px;
}
.khu3-info summary::-webkit-details-marker { display: none; }
.khu3-info p { margin-top: .25rem; color: var(--tekst-zacht); line-height: 1.45; }
.khu3-info a { color: var(--baksteen); }

/* ---------- mobiele-overflow-vangnet (detailweergave) ----------
   De eigenaar zag het scherm breder worden bij openen van een school:
   horizontale overflow door brede stroken/tabellen. Hard vangnet + de
   bekende boosdoeners expliciet begrensd. */
.kieshulp-main { overflow-x: clip; }
.khu-detail, .khu-hero, .khu-rij { max-width: 100%; }
.khu-detail { overflow-x: clip; }
.khu-mini-strip { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.khu-mini-strip > * { flex: none; }
.khu-detail table { display: block; max-width: 100%; overflow-x: auto; }
.khu-gegevens { overflow-wrap: anywhere; }
/* ECHTE fix (i.p.v. alleen clippen): grid-items mogen krimpen tot 0. Zonder dit
   blaast brede inhoud — vooral de mini-strip met 5 scholen — de hele detailkaart
   op tot ~2× schermbreedte, waarna 'overflow:clip' de rechterhelft afkapte.
   Met min-width:0 past de kaart netjes en scrollt alleen de strip zelf. */
.khu-detail > *, .khu-detail .kh-kaart > * { min-width: 0; }
.khu-detail-kaart, .khu-kaartvlak { max-width: 100%; }

/* echte kaart-containers (Leaflet) */
.khu-kaartvlak.echte-kaart, #khu-kaart-echt, .khu-detail-kaart {
  height: 230px; border-radius: var(--radius-klein); border: 1px solid var(--lijn-sterk);
  overflow: hidden; z-index: 1;
}
@media (min-width: 680px) {
  .khu-kaartvlak.echte-kaart, #khu-kaart-echt { height: 280px; }
}