/* Kaartenmaker (hulpmiddel 1). Bovenop basis.css: formulier, kaartvoorbeeld en printopmaak.
   Mobiel eerst (390 breed zonder horizontaal schuiven); vanaf 760 formulier en voorbeeld naast elkaar.
   Twee standen voor de kaart:
   - .km-feest (Feestelijk, standaard): rand, achtergrond en kop in de kleuren van het thema, versiering als inline
     SVG uit kaartenmaker.js, patronen als CSS-verlopen (geen plaatjes, dus geen img-src nodig onder de CSP).
   - .km-zw (Zwart-wit, bespaart inkt): alles wit, alleen zwarte lijnen en tekst.
   In beide standen blijven de vakjes wit met zwarte cijfers en lijnen, en heeft het vrije vak een ster, zodat de
   kaart ook grijs geprint leesbaar is. Alleen regels onder .km-feest geven kleur (toets.mjs kijkt dat na). */

/* ---------- printwaarden per thema (keten/src/gen/themas.js, thema.print) en kleuren voor Feestelijk ---------- */
.km-kaart,.km-roeplijst{--km-letter:"Bricolage Grotesque",Arial,Helvetica,sans-serif;--km-vrij:#ffd23f;
  --km-rand:#1D0B30;--km-kop:#ffd23f;--km-kop-tekst:#1D0B30;--km-th:#1D0B30;--km-th-tekst:#fff;
  --km-achter:#FFF4E8;--km-patroon:radial-gradient(circle,#FF3D8B 0 .5mm,transparent .6mm),radial-gradient(circle,#5B2EE6 0 .5mm,transparent .6mm);
  --km-patroon-maat:8mm 8mm,8mm 8mm;--km-patroon-plek:0 0,4mm 4mm}
[data-km-thema="bachelorette"]{--km-letter:"Unbounded",Arial,Helvetica,sans-serif;--km-vrij:#f3eaff;
  --km-rand:#7B2FF7;--km-kop:linear-gradient(135deg,#7B2FF7,#D6268F);--km-kop-tekst:#fff;--km-th:#1C0636;--km-th-tekst:#fff;
  --km-achter:#f3eaff;--km-patroon:radial-gradient(circle,#FF4FB0 0 .9mm,transparent 1mm),radial-gradient(circle,#7B2FF7 0 .7mm,transparent .8mm),radial-gradient(circle,#FFC83D 0 .6mm,transparent .7mm),radial-gradient(circle,#C9A8FF 0 .8mm,transparent .9mm);
  --km-patroon-maat:11mm 13mm,9mm 8mm,13mm 10mm,7mm 11mm;--km-patroon-plek:0 0,4mm 3mm,7mm 6mm,2mm 7mm}
[data-km-thema="shower"]{--km-letter:"Fredoka",Arial,Helvetica,sans-serif;--km-vrij:#fbe3ec;
  --km-rand:#E83E8C;--km-kop:#fff;--km-kop-tekst:#6B1E45;--km-th:#E83E8C;--km-th-tekst:#fff;
  --km-achter:#fbe3ec;--km-patroon:radial-gradient(circle,#fff 0 1.1mm,transparent 1.2mm),radial-gradient(circle,#F59BC0 0 .6mm,transparent .7mm);
  --km-patroon-maat:7mm 7mm,7mm 7mm;--km-patroon-plek:0 0,3.5mm 3.5mm}
[data-km-thema="kids"]{--km-letter:"Bagel Fat One",Arial,Helvetica,sans-serif;--km-vrij:#e9f9b8;
  --km-rand:#16091F;--km-kop:#FF2E93;--km-kop-tekst:#16091F;--km-th:#7B2CFF;--km-th-tekst:#fff;
  --km-achter:#e9f9b8;--km-patroon:radial-gradient(circle,#FF2E93 0 .9mm,transparent 1mm),radial-gradient(circle,#7B2CFF 0 .8mm,transparent .9mm),radial-gradient(circle,#FF8A1F 0 .7mm,transparent .8mm);
  --km-patroon-maat:10mm 12mm,12mm 9mm,8mm 10mm;--km-patroon-plek:0 0,5mm 4mm,2mm 7mm}
[data-km-thema="bachelor"]{--km-letter:"Bebas Neue",Arial,Helvetica,sans-serif;--km-vrij:#f3e8d2;
  --km-rand:#0F0B0A;--km-kop:repeating-linear-gradient(176deg,#7a4a2a 0 1.4mm,#6b3e22 1.4mm 2.2mm,#82522f 2.2mm 3.6mm,#5e361e 3.6mm 4mm);--km-kop-tekst:#F3E8D2;--km-th:#E2333F;--km-th-tekst:#F3E8D2;
  --km-achter:#4a2a1a;--km-patroon:repeating-linear-gradient(2deg,#5a3320 0 2.2mm,#4a2a1a 2.2mm 3mm,#633a24 3mm 5.5mm,#3B2016 5.5mm 6mm);
  --km-patroon-maat:auto;--km-patroon-plek:0 0}

/* ---------- formulier ---------- */
.km-rij{display:grid;gap:32px;min-width:0}
.km-vorm{display:grid;gap:22px;min-width:0}
.km-vorm[hidden],.km-voorbeeld[hidden],.km-na[hidden]{display:none}
.km .veld{max-width:520px;min-width:0}
.km .veld select,.km .veld textarea{font:inherit;font-size:18px;font-weight:700;padding:10px 16px;border:var(--randdikte) solid var(--rand);border-radius:14px;background:var(--white);color:var(--ink);width:100%;max-width:100%}
.km .veld select{min-height:52px}
.km .veld textarea{min-height:150px;resize:vertical;line-height:1.4}
.km .veld select:focus-visible,.km .veld textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.km .veld input[type="number"]{max-width:160px}
.km-keuze{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.km-keuze legend{font-weight:800;padding:0;margin-bottom:8px;width:100%}
.km-keuze label,.km-vink label{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;cursor:pointer}
.km .km-keuze input,.km .km-vink input{width:22px;height:22px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--violet)}
.km .km-keuze input:focus-visible,.km .km-vink input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.km-vink label{align-items:flex-start;font-weight:600}
.km-vink input{margin-top:3px!important}
/* grapstand (blok "stand": "grap"): zonder die stand haalt het script deze velden weg */
.km-grap-deel[hidden]{display:none}
.km-grap-namenlijst{display:flex;flex-wrap:wrap;gap:4px 22px;width:100%}
.km-grap-namenlijst label{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;cursor:pointer;overflow-wrap:anywhere}
.km .km-grap-namenlijst input{width:22px;height:22px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--violet)}
.km .km-grap-namenlijst input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.km-grap-uitleg p{margin:0 0 8px}
.km-print{display:grid;gap:12px;justify-items:start}
.km-print .knop{max-width:100%;white-space:normal}
.km-na{font-weight:700}
.km-na a{color:var(--link)}
.km-geen-js{font-weight:700;padding:16px 18px;border:var(--randdikte) solid var(--rand);border-radius:var(--rond-klein);background:var(--vlak);color:var(--vlak-tekst);max-width:620px}

/* ---------- voorbeeld op het scherm ---------- */
.km-voorbeeld{margin:0;display:grid;gap:10px;min-width:0}
.km-voorbeeld .label{margin:0}
.km-voorbeeld .km-kaart{max-width:420px;width:100%;box-shadow:var(--schaduw-maat) var(--schaduw-maat) 0 var(--accent)}
.km-voorbeeld .km-kaart.km-zw{border:var(--randdikte) solid var(--rand);border-radius:var(--rond-klein);padding:16px 14px 10px}
.km-voorbeeld .km-kaart.km-feest{border-radius:var(--rond-klein);padding:12px}
.km-voorbeeld .km-kaart-titel{font-size:clamp(20px,6vw,28px)}
.km-voorbeeld .km-kaart-naam{font-size:18px}
.km-voorbeeld .km-raster{width:100%;table-layout:fixed}
.km-voorbeeld .km-raster th{font-size:clamp(22px,7vw,30px);padding-bottom:4px}
.km-voorbeeld .km-raster td{height:clamp(46px,14vw,70px);font-size:clamp(18px,5.4vw,24px)}
.km-voorbeeld .km-kaart-voet{font-size:12px}
@media (min-width:760px){
  .km-rij{grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:56px;align-items:start}
  .km-voorbeeld{position:sticky;top:24px}
}

/* ---------- kaart (scherm en papier), basis = zwart-wit ---------- */
.km-kaart{text-align:center;color:#000;background:#fff;font-family:Arial,Helvetica,sans-serif}
.km-kaart-titel{font-family:var(--km-letter);font-weight:700;font-synthesis:none;line-height:1.1;overflow-wrap:anywhere;color:#000}
.km-kaart-naam{font-weight:700;line-height:1.2;margin:2px 0 6px;overflow-wrap:anywhere;color:#000}
.km-raster{border-collapse:collapse;margin:0 auto}
.km-raster th{font-family:var(--km-letter);font-weight:700;font-synthesis:none;color:#000;border-bottom:1.2mm solid #000;line-height:1.1}
.km-raster td{border:.6mm solid #000;font-weight:700;color:#000;text-align:center;vertical-align:middle;padding:0;background:#fff}
.km-kaart-voet{color:#000;margin-top:4px}

/* ---------- Feestelijk ---------- */
.km-feest,.km-feest *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.km-kaart.km-feest{position:relative;overflow:hidden;border:1.4mm solid var(--km-rand);border-radius:4mm;padding:3mm;
  background-color:var(--km-achter);background-image:var(--km-patroon);background-size:var(--km-patroon-maat);background-position:var(--km-patroon-plek)}
.km-feest .km-kaart-kop{position:relative;background:var(--km-kop);color:var(--km-kop-tekst);border:.6mm solid var(--km-rand);border-radius:3mm;padding:1.4mm 14%;margin:0 0 2mm}
.km-feest .km-kaart-titel,.km-feest .km-kaart-naam{color:inherit}
.km-feest .km-kaart-naam{margin:.5mm 0 0}
.km-feest .km-deco{position:absolute;top:50%;height:112%;width:auto;max-width:13%;transform:translateY(-50%);overflow:visible}
.km-feest .km-deco-l{left:.8%}
.km-feest .km-deco-r{right:.8%}
.km-feest .km-raster{background:#fff}
.km-feest .km-raster th{background:var(--km-th);color:var(--km-th-tekst);border:.6mm solid #000;border-bottom-width:1.2mm}
.km-feest .km-raster td.vrij{background:var(--km-vrij)}
.km-kaart.km-feest .km-kaart-voet{display:inline-block;background:#fff;color:#000;border-radius:99px;padding:0 2.5mm;margin-top:2mm}
/* Bachelor: de kop is een houten bar-bordje met twee spijkers */
.km-feest[data-km-thema="bachelor"] .km-kaart-kop{border-color:#1e0f08;box-shadow:inset 0 0 0 .4mm #a8703f}
.km-feest[data-km-thema="bachelor"] .km-kaart-kop::before,.km-feest[data-km-thema="bachelor"] .km-kaart-kop::after{content:"";position:absolute;top:1.1mm;width:1.8mm;height:1.8mm;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f1ece2,#8d877e 70%,#4b463f)}
.km-feest[data-km-thema="bachelor"] .km-kaart-kop::before{left:1.4mm}
.km-feest[data-km-thema="bachelor"] .km-kaart-kop::after{right:1.4mm}
/* Roeplijst feestelijk: alleen de kop en de letters in kleur, de vakjes wit */
.km-roeplijst.km-feest .km-kaart-kop{width:170mm;max-width:100%;margin-top:1mm} /* 1mm: de ballonnen van kids staken bij een lange titel 0,35 mm boven het vel uit */
.km-feest .km-roep th{background:var(--km-th);color:var(--km-th-tekst);border:.5mm solid #000;border-bottom-width:1.2mm}
.km-roep td{background:#fff}
.km-feest .km-roep-nr{color:var(--km-th)}

/* ---------- printvak: alleen bij printen zichtbaar (basis.css: #printvak, html.printmodus) ---------- */
@page{margin:10mm}
@media print{
  html.printmodus,html.printmodus body{background:#fff!important;margin:0;padding:0}
  .km-printvak .km-vel{display:grid;width:100%;height:252mm;break-after:page;page-break-after:always;break-inside:avoid;overflow:hidden}
  .km-printvak.km-a4 .km-vel{height:270mm}
  .km-printvak .km-vel:last-child{break-after:auto;page-break-after:auto}
  .km-printvak .km-kaart{break-inside:avoid;page-break-inside:avoid;align-self:center;justify-self:center}
  /* 1 per vel */
  .km-per-1{place-items:center}
  .km-per-1 .km-kaart-titel{font-size:26pt}
  .km-per-1 .km-kaart-naam{font-size:18pt;min-height:22pt}
  .km-per-1 .km-kaart.km-feest{padding:5mm}
  .km-per-1 .km-raster th{font-size:30pt;height:16mm}
  .km-per-1 .km-raster td{width:30mm;height:30mm;font-size:30pt}
  .km-per-1 .km-kaart-voet{font-size:10pt}
  /* 2 per vel, onder elkaar */
  .km-per-2{grid-template-rows:1fr 1fr}
  .km-per-2 .km-kaart-titel{font-size:14pt}
  .km-per-2 .km-kaart-naam{font-size:12pt;min-height:14pt}
  .km-per-2 .km-raster th{font-size:16pt;height:7.5mm}
  .km-per-2 .km-raster td{width:15mm;height:15mm;font-size:17pt}
  .km-per-2 .km-kaart-voet{font-size:8pt}
  /* 4 per vel, twee bij twee */
  .km-per-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;column-gap:6mm}
  .km-per-4 .km-kaart{max-width:92mm}
  .km-per-4 .km-kaart-titel{font-size:12pt}
  .km-per-4 .km-kaart-naam{font-size:11pt;min-height:13pt}
  .km-per-4 .km-raster th{font-size:14pt;height:7mm}
  .km-per-4 .km-raster td{width:14.5mm;height:14.5mm;font-size:16pt}
  .km-per-4 .km-kaart-voet{font-size:7pt}
  /* roeplijst: eigen vel, 15 rijen onder B I N G O */
  .km-roeplijst{align-content:start;justify-items:center;text-align:center;color:#000;font-family:Arial,Helvetica,sans-serif}
  .km-roeplijst .km-kaart-titel{font-size:20pt}
  .km-roeplijst .km-kaart-kop{margin-bottom:5mm}
  .km-roep{border-collapse:collapse}
  .km-roep th{font-family:var(--km-letter);font-weight:700;font-synthesis:none;font-size:20pt;height:12mm;border-bottom:1.2mm solid #000;color:#000}
  .km-roep td{width:34mm;height:13.5mm;border:.5mm solid #000;font-size:15pt;font-weight:700;color:#000;text-align:center}
  .km-roeplijst .km-kaart-voet{font-size:8pt;margin-top:3mm}
  /* roeplijst willekeurig: 3 kolommen van 25 (nummer, vakje om af te vinken, letter en getal), van boven naar beneden */
  .km-roep-wl{display:grid;grid-template-columns:repeat(3,56mm);column-gap:4mm;text-align:left}
  .km-roep-kol{list-style:none;margin:0;padding:0;border-top:.5mm solid #000}
  .km-roep-item{display:grid;grid-template-columns:9mm 6mm 1fr;align-items:center;column-gap:2mm;height:7.8mm;border-bottom:.3mm solid #000;break-inside:avoid}
  .km-roep-nr{font-size:10pt;font-weight:700;text-align:right;color:#000}
  .km-roep-vak{width:4.6mm;height:4.6mm;border:.4mm solid #000;border-radius:.6mm;background:#fff}
  .km-roep-getal{font-size:15pt;font-weight:700;color:#000;white-space:nowrap}
}