/* Marktanalyse (module 1, fase B1, 30-09-2026): tabblad Zoekwoorden, tabblad Markt en de kaarten Term in titel /
   Term in campagne in de vorm van ronde 7. Alleen variabelen uit public/css/bouwdoos.css (tests/bouwdoos-waarden). */

.mk { display: grid; gap: var(--a3); font-family: var(--font); color: var(--tekst); min-width: 0; }
/* Een griditem is standaard zo breed als zijn inhoud; dan duwt een brede tabel het kader open. */
.mk > *, .mk-kaart > *, .mk-lijst > * { min-width: 0; }
.mk-klein { font-size: var(--tekst-klein); }
.mk-zacht { color: var(--tekst-zacht); }
.mk-kop { font-size: var(--tekst-titel); margin: var(--a2) 0 0; }
.mk-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mk-meldingen:empty { display: none; }
.mk-meldingen { display: grid; gap: var(--a1); }

.mk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--a3); }

/* Filters en sortering als chips */
.mk-chips { display: flex; flex-wrap: wrap; gap: var(--a1); align-items: center; }
.mk-rechts { margin-left: auto; display: inline-flex; gap: var(--a1); align-items: center; flex-wrap: wrap; }
.mk-chip { font: inherit; font-size: var(--tekst-klein); min-height: var(--klikdoel); padding: 0 var(--a2); border-radius: var(--radius-rond);
  border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst); cursor: pointer; }
.mk-chip.aan { background: var(--accent-licht); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.mk-chip:focus-visible, .mk-rij:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-zoek input { font: inherit; font-size: var(--tekst-tabel); min-height: var(--klikdoel); padding: 0 var(--a2); border: 1px solid var(--lijn);
  border-radius: var(--radius-veld); min-width: 220px; background: var(--vlak); color: var(--tekst); }

/* Tabellen: scrollen binnen hun kader, getallen rechts met vaste cijferbreedte */
.mk-tabelkader { overflow-x: auto; background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); }
.mk-tabel { width: 100%; font-size: var(--tekst-tabel); }
.mk-tabel td, .mk-tabel th { vertical-align: middle; padding: var(--a1); }
.mk-tabel th { white-space: normal; vertical-align: bottom; }
.mk-tabel td { white-space: normal; }
.mk-tabel .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-tabel th.num { white-space: normal; }
/* In een kolomkop alleen het ⚠ van het bouwdoos-icoon: de uitleg staat in title en voor schermlezers (Keuzes). */
.mk-tabel th .bd-datakwaliteit > span[aria-hidden]:last-child { display: none; }
.mk-stapel { display: grid; gap: 4px; justify-items: start; }
.mk-rij { cursor: pointer; }
.mk-rij.aan td { background: var(--accent-licht); }
.mk-acties { display: flex; gap: var(--a1); justify-content: flex-end; flex-wrap: nowrap; }
.mk-concept-rij td { font-size: var(--tekst-klein); background: var(--achtergrond); }

/* Positie jij (●) tegen beste concurrent (○) */
.mk-pos { display: flex; align-items: center; gap: 4px var(--a1); flex-wrap: wrap; }
.mk-pos-tekst { white-space: nowrap; }
.mk-pos-baan { position: relative; width: 90px; height: 6px; border-radius: var(--radius-rond); background: var(--ring-baan); flex: none; }
.mk-pos-top10 { position: absolute; left: 0; top: 0; bottom: 0; width: 18.4%; border-radius: var(--radius-rond); background: var(--accent-licht); }
.mk-pos-jij, .mk-pos-conc { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: var(--radius-rond); transform: translate(-50%, -50%); }
.mk-pos-jij { background: var(--accent); }
.mk-pos-conc { background: var(--vlak); border: 2px solid var(--tekst-zacht); }
.mk-pos-tekst { font-variant-numeric: tabular-nums; }

/* Criteria groen/rood: altijd met ✓/✕ erbij, nooit alleen kleur */
.mk-crit { display: inline-flex; align-items: center; gap: 4px; font-size: var(--tekst-klein); font-weight: 600; border-radius: var(--radius-rond);
  padding: 2px var(--a1); white-space: nowrap; }
.mk-crit--goed { background: var(--goed-vlak); color: var(--goed-tekst); }
.mk-crit--rood { background: var(--fout-vlak); color: var(--fout-tekst); }
.mk-oordeel { font-weight: 600; }
.mk-meer { justify-self: start; margin-top: var(--a2); }

/* Markt: lijst links, rechterkolom ± 300 px */
.mk-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--a4); align-items: start; }
.mk-lijst { display: grid; gap: var(--a2); min-width: 0; }
.mk-kolom { display: grid; gap: var(--a3); }
@media (max-width: 1100px) { .mk-raster { grid-template-columns: 1fr; } }
.mk-paneel { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); padding: var(--a3); display: grid; gap: var(--a2); }
.mk-paneel h3 { font-size: var(--tekst-basis); margin: 0; }
.mk-veld { display: flex; justify-content: space-between; align-items: center; gap: var(--a2); font-size: var(--tekst-klein);
  padding: var(--a1) 0; border-bottom: 1px solid var(--lijn); }
.mk-veld input { width: 84px; min-height: var(--klikdoel); border: 1px solid var(--lijn); border-radius: var(--radius-veld); padding: 0 var(--a1);
  font: inherit; text-align: right; background: var(--vlak); color: var(--tekst); }

/* Detail van een term */
.mk-detail { display: grid; gap: var(--a2); background: var(--vlak); border-radius: var(--radius-kaart); }
.mk-detail-plek:empty { display: none; }
.mk-detail-plek .mk-detail { box-shadow: var(--schaduw); padding: var(--a3); }
.mk-detail-kop { display: flex; justify-content: space-between; align-items: center; gap: var(--a2); }
.mk-detail-kop h3 { font-size: var(--tekst-basis); margin: 0; }
.mk-detail-spark .bd-spark { width: 100%; height: 48px; }
.mk-detail-regel { display: flex; justify-content: space-between; gap: var(--a2); font-size: var(--tekst-klein); padding: 4px 0; border-bottom: 1px solid var(--lijn); }
.mk-detail-regel b { text-align: right; font-weight: 600; }
.mk-detail-artikel { display: flex; gap: var(--a2); align-items: center; }

/* De kaart in de vorm van ronde 7 */
.mk-kaarten { display: grid; gap: var(--a3); padding: var(--a4); border-radius: var(--radius-laag);
  background: linear-gradient(90deg, var(--laag-week-van), var(--laag-week-tot)); }
.mk-kaarten:empty { display: none; }
.mk-kaart { background: var(--laag-vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); padding: var(--a4); display: grid; gap: var(--a2); }
.mk-kaart-kop { display: flex; gap: var(--a3); align-items: flex-start; }
.mk-kaart-naam { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mk-kaart-titel { font-size: var(--tekst-voorstel); font-weight: 600; display: flex; gap: var(--a1); align-items: center; flex-wrap: wrap; }
.mk-kaart-icoon { color: var(--accent); }
.mk-prio { background: var(--accent-licht); color: var(--accent); font-size: var(--tekst-klein); }
.mk-kaart-getal { text-align: right; flex: none; display: grid; }
.mk-kaart-getal b { font-size: var(--tekst-kop); color: var(--accent); font-variant-numeric: tabular-nums; }
.mk-kaart-getal span { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.mk-scope { font-size: var(--tekst-klein); color: var(--tekst-zacht); margin: 0; }
.mk-kaart .mk-tabelkader { box-shadow: none; background: transparent; }
.mk-kaart-onder { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a4); align-items: start; }
@media (max-width: 760px) { .mk-kaart-onder { grid-template-columns: 1fr; } }
.mk-zinnen p { margin: 0 0 var(--a1); font-size: var(--tekst-basis); }
.mk-zinnen .mk-verwachting { font-weight: 600; }
.mk-keuzes { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--tekst-klein); min-width: 240px; }
.mk-keuzes label { display: flex; gap: var(--a1); align-items: center; cursor: pointer; min-height: var(--klikdoel); }
.mk-hoe { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.mk-hoe summary { cursor: pointer; color: var(--accent); }
.mk-knoppen { display: flex; gap: var(--a1); justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) { .mk * { transition: none; } }

/* v2: Markt als eigen scherm, titels naast elkaar, de uitklap per term in de lijst */
.mk-scherm { display: grid; gap: var(--a3); }
.mk-titels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a3); margin: var(--a1) 0; }
@media (max-width: 760px) { .mk-titels { grid-template-columns: 1fr; } }
.mk-titels p { margin: 2px 0 0; font-size: var(--tekst-tabel); }
.mk-nieuw { text-decoration: none; background: var(--goed-vlak); color: var(--goed-tekst); border-radius: var(--radius-veld); padding: 0 4px; }
.mk-blok td { background: var(--achtergrond); }
.mk-blok-inhoud { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a4); align-items: start; padding: var(--a1) 0; }
@media (max-width: 900px) { .mk-blok-inhoud { grid-template-columns: 1fr; } }
.mk-blok-inhoud p { margin: 0 0 var(--a1); font-size: var(--tekst-basis); }
.mk-soort { font-size: var(--tekst-klein); }
.mk-verborgen-teller { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.mk-regel { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; font-size: var(--tekst-tabel); padding: var(--a1) 0; }
.mk-bedrag { display: flex; align-items: center; gap: var(--a1); padding-left: var(--a4); font-size: var(--tekst-klein); }
.mk-bedrag input { width: 84px; min-height: var(--klikdoel); border: 1px solid var(--lijn); border-radius: var(--radius-veld); padding: 0 var(--a1); font: inherit; text-align: right; background: var(--vlak); color: var(--tekst); }
/* v3: criteria als regel met bron, instapkansen bovenaan, keuzelijsten */
.mk-critregel { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a3); padding: var(--a1) 0; }
.mk-critregel > span { display: inline-flex; align-items: center; gap: 4px; }
.mk-instap { display: grid; gap: var(--a2); }
.mk-laagkop { display: flex; align-items: baseline; gap: var(--a2); flex-wrap: wrap; }
.mk-laagkop .mk-kop { margin: 0; }
.mk-keuzeveld { display: inline-flex; align-items: center; gap: var(--a1); font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.mk-keuzeveld select { min-height: var(--klikdoel); border: 1px solid var(--lijn); border-radius: var(--radius-veld); padding: 0 var(--a1); font: inherit; font-size: var(--tekst-klein); background: var(--vlak); color: var(--tekst); }
.mk-crit--onbekend { background: var(--achtergrond); color: var(--tekst-zacht); font-weight: 400; }

/* Lege staat Instapkansen: telling per criterium (nawerk 01-10) */
.mk-telling { margin: 0 0 var(--a1); padding-left: 18px; font-size: var(--tekst-basis); }
.mk-telling li { margin: 2px 0; }

/* Verwijsregel naar de Stuurhut (advertentievoorstellen staan alleen daar, BESLISSINGEN 01-10) */
.mk-stuurhut { margin: 0 0 var(--a2); font-size: var(--tekst-basis); display: flex; gap: var(--a1); align-items: center; flex-wrap: wrap; }

/* Tabbladen Gevolgd · Kansen · Instapkansen · Alles (nawerk 2, punt 3) */
.mk-tabrij { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.mk-tabrij .bd-tabbalk { flex: 1 1 auto; margin: 0; }

/* Assortiment rond je apparaten (nawerk 3, punt 1) */
.mk-zinnen-kort { margin: 0; font-size: var(--tekst-basis); }
.mk-acties { text-align: right; white-space: nowrap; }
.mk-veld--breed { grid-column: 1 / -1; }
.mk-veld--breed input { width: 100%; }

/* Aanbevolen om toe te voegen (nawerk 4, punt 1) */
.mk-aanbevolen { display: grid; gap: var(--a2); padding: var(--a2) var(--a3); border-radius: var(--radius-veld); background: var(--goed-vlak); }
.mk-kop-klein { font-size: var(--tekst-basis); font-weight: 600; margin: 0; color: var(--goed-tekst); }
.mk-aanbevolen-rij { display: flex; gap: var(--a3); justify-content: space-between; align-items: flex-start; }
.mk-critrij { display: flex; gap: var(--a1); flex-wrap: wrap; margin-top: var(--a1); }

/* Bronregel klein: "bijgewerkt <datum>" rechtsboven met ⓘ; herkomst onder "Over de meting" (nawerk 4, punt 2) */
.mk-bijgewerkt { display: flex; justify-content: flex-end; align-items: center; gap: var(--a1); font-size: var(--tekst-tabel); color: var(--tekst-zacht); }
.mk-info { background: none; border: 0; color: var(--tekst-zacht); cursor: pointer; font-size: var(--tekst-basis); min-width: var(--klikdoel); min-height: var(--klikdoel); border-radius: var(--radius-veld); }
.mk-info:hover, .mk-info:focus-visible { color: var(--accent); background: var(--accent-licht); }
.mk-over { font-size: var(--tekst-tabel); }
.mk-over h4 { margin: 0 0 var(--a1); font-size: var(--tekst-basis); }
.mk-over ul { margin: 0 0 var(--a1); padding-left: 18px; }