/* Het Exact-oordeel, de uitleg-ballonnen, de trends en de gegroepeerde kerncijfers van de productpagina.
   Kleur is nooit de enige drager: elk oordeel en elke trend heeft ook een icoon en een tekst. */

/* ---------- uitleg-ballon (popover) ---------- */
.uitleg-wrap { display: inline-block; vertical-align: middle; margin-left: 2px; text-transform: none; letter-spacing: 0; font-weight: 400; font-stretch: 100%; white-space: normal; }
.uitleg-knop { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -4px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--inkt-3); cursor: help; vertical-align: middle; }
.uitleg-knop .ic { width: 15px; height: 15px; stroke-width: 1.9; }
.uitleg-knop:hover, .uitleg-knop[aria-expanded="true"] { color: var(--inkt); background: var(--lijn-zacht); }
.uitleg-ballon {
  /* de ballon is een popover: bovenste laag, dus nooit afgeknipt door een tabel of paneel */
  margin: 0; inset: auto; width: max-content; max-width: min(21rem, calc(100vw - 24px));
  padding: 10px 12px; border: 0; border-radius: var(--straal); background: var(--inkt); color: #fff;
  font: 400 13px/1.45 var(--letter); letter-spacing: 0; text-transform: none; text-align: left; font-stretch: 100%; white-space: normal;
  box-shadow: 0 8px 24px rgb(15 18 23 / 0.28); overflow-wrap: break-word;
}
.uitleg-ballon:not(:popover-open) { display: none; }
@supports (position-area: bottom) {
  /* onder het icoon, beginnend bij de linkerrand van het icoon; past de plek niet, dan klapt de ballon om */
  .uitleg-ballon { position-area: bottom span-right; margin-top: 6px; position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; }
}

/* ---------- trend ---------- */
.trend { display: inline-flex; align-items: center; gap: 4px; font-weight: 620; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trend .ic { width: 14px; height: 14px; stroke-width: 2.3; }
.trend-slecht { color: var(--rood); }
.trend-goed { color: var(--groen); }
.trend-neutraal { color: var(--inkt-3); }
.trend-toel { display: block; font-weight: 400; color: var(--inkt-3); font-size: var(--t-klein); line-height: 1.4; margin-top: 1px; }
.strook .onder-trend { display: block; margin-top: var(--r-2); font-size: var(--t-klein); }
.tabel .sub .trend { font-size: 12px; }

/* ---------- oordeel-icoon en badge in lijsten ---------- */
.oordeel-ic { display: inline-flex; vertical-align: middle; }
.oordeel-ic .ic { width: 20px; height: 20px; stroke-width: 1.9; }
.oordeel-ic-goed { color: var(--groen-merk); }
.oordeel-ic-aandacht { color: var(--geel-merk); }
.oordeel-ic-slecht { color: var(--rood); }
.oordeel-ic-neutraal { color: var(--inkt-3); }
.tabel td .badge { cursor: default; }

/* ---------- het oordeelblok ---------- */
.oordeel { --o-merk: var(--inkt-3); --o-vlak: var(--paneel-2); --o-tekst: var(--inkt-2); border-left: 4px solid var(--o-merk); overflow: hidden; }
.oordeel-goed { --o-merk: var(--groen-merk); --o-vlak: var(--groen-vlak); --o-tekst: var(--groen); }
.oordeel-aandacht { --o-merk: var(--geel-merk); --o-vlak: var(--geel-vlak); --o-tekst: var(--geel); }
.oordeel-slecht { --o-merk: var(--rood); --o-vlak: var(--rood-vlak); --o-tekst: var(--rood); }
.paneel > :is(.oordeel-kop, .checklist) { margin-inline: 0; margin-top: 0; }
.paneel > .checklist:last-child { margin-bottom: 0; }
.oordeel-kop { display: flex; align-items: center; gap: var(--r-4); padding: var(--r-5) var(--r-6); background: var(--o-vlak); border-bottom: 1px solid var(--lijn-zacht); }
.oordeel-teken { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--o-merk); color: #fff; }
.oordeel-teken .ic { width: 26px; height: 26px; stroke-width: 2.2; }
.oordeel-label { font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--inkt-3); font-stretch: var(--breed-label); }
.oordeel-kop h2 { font-size: 24px; line-height: 1.15; font-weight: 650; font-stretch: 106%; letter-spacing: -0.01em; color: var(--o-tekst); }
.oordeel-sub { margin-top: 2px; font-size: 13.5px; color: var(--inkt-2); }
.checklist { display: grid; }
.check { display: grid; grid-template-columns: 22px minmax(13rem, 15rem) minmax(0, 1fr) auto; gap: 2px var(--r-4); align-items: start; padding: 11px var(--r-6); border-bottom: 1px solid var(--lijn-zacht); font-size: 13.5px; }
.check:last-child { border-bottom: 0; }
.check-ic .ic { width: 20px; height: 20px; stroke-width: 1.9; margin-top: 0; }
.check-goed .check-ic { color: var(--groen-merk); }
.check-aandacht .check-ic { color: var(--geel-merk); }
.check-slecht .check-ic { color: var(--rood); }
.check-neutraal .check-ic { color: var(--inkt-3); }
.check-titel { font-weight: 620; }
.check-uitkomst { color: var(--inkt-2); overflow-wrap: anywhere; }
.check-slecht .check-uitkomst { color: var(--rood); }
.check-aandacht .check-uitkomst { color: var(--geel); }
.check-neutraal .check-titel, .check-neutraal .check-uitkomst { color: var(--inkt-3); font-weight: 450; }
.check-actie a { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 580; text-decoration: none; color: var(--inkt); border-bottom: 1px solid var(--lijn-sterk); }
.check-actie a:hover { border-bottom-color: currentColor; }

/* ---------- samenvatting en filter op de lijst ---------- */
.oordeel-samenvatting { padding: var(--r-3) var(--r-5); }
.oordeel-samenvatting > .oordeel-filter { margin: 0; }
.oordeel-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2); }
.oordeel-filter-label { font-weight: 620; font-size: 13.5px; margin-right: var(--r-2); }
.oordeel-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--r-3); border: 1px solid var(--lijn); border-radius: 16px; background: var(--paneel); color: var(--inkt); font-size: 13px; text-decoration: none; }
.oordeel-chip:hover { border-color: var(--lijn-sterk); }
.oordeel-chip strong { font-weight: 650; font-variant-numeric: tabular-nums; }
.oordeel-chip .ic { width: 18px; height: 18px; stroke-width: 1.9; }
.oordeel-chip-goed .ic { color: var(--groen-merk); }
.oordeel-chip-aandacht .ic { color: var(--geel-merk); }
.oordeel-chip-niet_in_orde .ic { color: var(--rood); }
.oordeel-chip.actief { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.oordeel-chip.actief .ic { color: #fff; }
.oordeel-wis { font-size: 13px; margin-left: var(--r-2); color: var(--inkt-2); }

/* ---------- het blok op het Overzicht ---------- */
.oordeel-tellers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r-3); }
.paneel > .oordeel-tellers { margin-top: var(--r-4); }
.oordeel-teller { position: relative; }
.oordeel-teller > a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic getal" "ic label"; column-gap: var(--r-3); align-items: center; padding: var(--r-3) var(--r-5) var(--r-3) var(--r-4); border: 1px solid var(--lijn); border-left: 4px solid var(--teller-merk, var(--lijn)); border-radius: var(--straal); text-decoration: none; color: var(--inkt); background: var(--paneel); }
.oordeel-teller > a:hover { border-color: var(--lijn-sterk); border-left-color: var(--teller-merk, var(--lijn-sterk)); background: var(--paneel-2); }
.oordeel-teller-goed { --teller-merk: var(--groen-merk); }
.oordeel-teller-aandacht { --teller-merk: var(--geel-merk); }
.oordeel-teller-niet_in_orde { --teller-merk: var(--rood); }
.ot-ic { grid-area: ic; color: var(--teller-merk); }
.ot-ic .ic { width: 30px; height: 30px; stroke-width: 1.8; }
.ot-getal { grid-area: getal; font-size: 34px; line-height: 1.05; font-weight: 540; font-stretch: var(--breed-cijfer); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ot-label { grid-area: label; font-size: 13px; color: var(--inkt-2); font-weight: 560; }
.oordeel-teller > .uitleg-wrap { position: absolute; top: 6px; right: 6px; margin: 0; }
.paneel > .oordeel-balk { display: block; width: calc(100% - 2 * var(--r-5)); height: 10px; margin-top: var(--r-4); border-radius: 5px; overflow: hidden; }
.oordeel-balk rect { stroke: var(--paneel); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.ob-goed { fill: var(--groen-merk); }
.ob-aandacht { fill: var(--geel-merk); }
.ob-slecht { fill: var(--rood); }

/* ---------- kerncijfers in groepen (productpagina) ---------- */
.paneel > .kerngroepen { margin-inline: 0; margin-top: 0; }
.kerngroepen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kerngroep { min-width: 0; padding: var(--r-5) 0 var(--r-3); border-left: 1px solid var(--lijn-zacht); }
.kerngroep:first-child { border-left: 0; }
.kerngroep-kop { padding: 0 var(--r-5); font-size: 16px; line-height: 1.2; font-weight: 650; font-stretch: 104%; letter-spacing: -0.005em; color: var(--inkt); }
.kerngroep-sub { padding: 2px var(--r-5) 0; font-size: var(--t-klein); color: var(--inkt-3); }
.strook-kern { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--r-2); }
.strook-kern > div { padding: var(--r-3) var(--r-5) var(--r-4); border-left: 0; border-top: 0; }
.strook-kern > .breed { grid-column: 1 / -1; }
.opbouw .opbouw-balk { border-top: 1px solid var(--lijn-zacht); }

@media (max-width: 1180px) {
  .kerngroepen { grid-template-columns: minmax(0, 1fr); }
  .kerngroep { border-left: 0; border-top: 1px solid var(--lijn-zacht); }
  .kerngroep:first-child { border-top: 0; }
  .strook-kern { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
  .strook-kern > .breed { grid-column: auto; }
  .strook-kern > div, .strook-kern > div:nth-child(n) { border-left: 0; border-top: 0; }
}
@media (max-width: 760px) {
  .oordeel-tellers { grid-template-columns: minmax(0, 1fr); }
  .check { grid-template-columns: 22px minmax(0, 1fr); padding-inline: var(--r-4); }
  .check-uitkomst, .check-actie { grid-column: 2; }
  .oordeel-kop { padding: var(--r-4); gap: var(--r-3); }
  .oordeel-kop h2 { font-size: 20px; }
  .oordeel-teken { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
  .kerngroep-kop, .kerngroep-sub { padding-inline: var(--r-4); }
  .strook-kern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strook-kern > div, .strook-kern > div:nth-child(n) { padding: var(--r-3) var(--r-4); border-left: 0; border-top: 0; }
  .strook-kern > div:nth-child(even) { border-left: 1px solid var(--lijn-zacht); }
  .strook-kern > .breed { grid-column: 1 / -1; border-left: 0 !important; }
  .oordeel-samenvatting { padding-inline: var(--r-4); }
  .paneel > .oordeel-balk { width: calc(100% - 2 * var(--r-4)); }
  .oordeel { border-left-width: 3px; }
}

.exact-cel { display: flex; align-items: flex-start; gap: var(--r-2); }
.exact-cel > .oordeel-ic { margin-top: 1px; }
.kol-oordeel { white-space: nowrap; }
.kol-trend { white-space: nowrap; }
.strook-kern dt { letter-spacing: 0.06em; font-size: 10.5px; }
.strook-kern > div { padding-inline: var(--r-4); }
.kerngroep-kop, .kerngroep-sub { padding-inline: var(--r-4); }
.strook-kern dt .uitleg-wrap { white-space: nowrap; }
.tabel-wrap { position: relative; }