/*
 * Designsysteem voor de functiedashboards.
 * Port van claude-hulp/code/src/styles.css naar gewone CSS.
 *
 * Alles staat onder .wa-dash zodat het thema en Elementor er niet mee botsen.
 * Donker en vast: dit ontwerp kiest bewust voor een donkere achtergrond en
 * heeft geen lichte variant.
 *
 * Contrast is op drie plekken opgehoogd ten opzichte van het ontwerp. Zie de
 * opmerking bij --wa-fg-subtle.
 */

.wa-dash {
  /* --- Fonts --------------------------------------------------------
   * Bebas Kai en Karla zijn de echte merkfonts uit het thema. Anton en
   * Bebas Neue stonden in het Lovable-ontwerp als benadering en blijven
   * hier als terugval staan. Pas deze drie regels aan zodra duidelijk is
   * hoe Bebas Kai op de site geladen wordt.
   */
  --wa-font-display: "Bebas Kai", "Anton", "Bebas Neue", Impact, sans-serif;
  --wa-font-kicker: "Bebas Kai", "Bebas Neue", Impact, sans-serif;
  --wa-font-sans: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Kleur --------------------------------------------------------- */
  --wa-bg: #0b0b0b;
  --wa-primary: #fb273c;
  --wa-primary-fg: #ffffff;
  --wa-offwhite: #faf8f4;
  --wa-salmon: #f6978e;
  --wa-gray: #545454;

  /* Tekstniveaus. De contrastwaardes gelden op --wa-bg.
   *
   * Het ontwerp gebruikt onder subtle nog opacity 0.40, 0.35 en 0.25 voor
   * bronvermeldingen, placeholders en labels. Die halen 3,8:1 en lager en
   * zakken daarmee onder WCAG AA voor normale tekst. Ze zijn hier
   * samengevoegd tot een enkele --wa-fg-subtle op 0.50, wat 5,1:1 geeft.
   * Gebruik nooit een lagere opacity voor tekst dan deze variabele.
   */
  --wa-fg: #faf8f4; /* 18,3:1 */
  --wa-fg-muted: rgba(250, 248, 244, 0.62); /*  7,4:1 */
  --wa-fg-subtle: rgba(250, 248, 244, 0.5); /*  5,1:1 */

  /* Vlakken en lijnen. Niet-tekst, dus 3:1 volstaat. */
  --wa-surface: rgba(250, 248, 244, 0.035);
  --wa-surface-hover: rgba(250, 248, 244, 0.075);
  --wa-muted: rgba(250, 248, 244, 0.08);
  --wa-border: rgba(250, 248, 244, 0.22);

  /* Grafiekreeksen, in de volgorde die het ontwerp aanhoudt. */
  --wa-series-1: var(--wa-primary);
  --wa-series-2: var(--wa-gray);
  --wa-series-3: var(--wa-offwhite);
  --wa-series-4: var(--wa-salmon);

  --wa-skew: -8deg;

  /* Bewust geen achtergrond hier. Die staat op de body, anders krijg je
   * strepen van de themakleur tussen de Elementor-secties door. Zie
   * .wa-dashboard-page onderaan dit blok. */
  color: var(--wa-fg);
  font-family: var(--wa-font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  /* hidden als terugval: clip kent Safari pas vanaf versie 16. Beide staan
   * er, de browser pakt wat hij begrijpt. Dit mag hier omdat .wa-dash binnen
   * de sticky kolommen staat en er dus geen sticky-element in verstopt zit. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* De donkere pagina. Wordt gezet door wa_dashboard_body_class() op een
 * functiedashboard, of door de kop-widget op een gewone testpagina. */
body.wa-dashboard-page {
  background: #0b0b0b;
  color: #faf8f4;
}

/* Elementor en het thema zetten hun eigen achtergrond op de containers.
 * Op een dashboardpagina moeten die doorzichtig zijn, anders zie je alsnog
 * banden tussen de secties. */
body.wa-dashboard-page .elementor-section,
body.wa-dashboard-page .e-con,
body.wa-dashboard-page .e-con-inner,
body.wa-dashboard-page .elementor-widget-wrap {
  background-color: transparent;
}

/* Beperkte reset binnen de scope. Elementor en het thema laten we met rust. */
.wa-dash *,
.wa-dash *::before,
.wa-dash *::after {
  box-sizing: border-box;
}

.wa-dash p,
.wa-dash ul,
.wa-dash ol,
.wa-dash figure {
  margin: 0;
}

.wa-dash ul,
.wa-dash ol {
  padding: 0;
  list-style: none;
}

/* ----------------------------------------------------------------------
 * Toegankelijkheid
 * -------------------------------------------------------------------- */

/* Zichtbare focus, 2px en ruim contrast tegen de donkere achtergrond. */
.wa-dash :focus-visible {
  outline: 2px solid var(--wa-offwhite);
  outline-offset: 2px;
}

/* Alleen voor schermlezers. Voor tabelbijschriften en toelichtingen die
 * visueel overbodig zijn maar wel voorgelezen moeten worden. */
.wa-dash .wa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-link naar de hoofdinhoud. Wordt zichtbaar zodra hij focus krijgt. */
.wa-dash .wa-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 50;
  background: var(--wa-primary);
  color: var(--wa-primary-fg);
  padding: 10px 16px;
  font-weight: 700;
  transition: top 0.15s ease;
}

.wa-dash .wa-skip:focus {
  top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .wa-dash *,
  .wa-dash *::before,
  .wa-dash *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------
 * Grain
 * Nooit vlak zwart. Als data-URI, dus geen extra bestand nodig.
 * -------------------------------------------------------------------- */

.wa-dash .wa-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Geen mix-blend-mode meer. Een schermvullende vaste laag met een
   * blendmodus is op iOS Safari een bekende manier om de hele pagina
   * onzichtbaar te maken: de laag wordt daar niet gemengd maar er gewoon
   * overheen getekend. Op een bijna zwarte achtergrond scheelt het weglaten
   * visueel vrijwel niets, en het scheelt een hele klasse aan bugs. */
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}

/* Op een telefoon verdwijnt de textuur. Hij is decoratie, en een
 * viewportgrote SVG-ruis die bij elke scrollstap opnieuw getekend wordt kost
 * daar alleen maar batterij en beeldopbouw. */
@media (max-width: 782px) {
  .wa-dash .wa-grain {
    display: none;
  }
}

/* Alles behalve de grain staat erboven. */
.wa-dash > *:not(.wa-grain) {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------------------
 * Typografie
 * -------------------------------------------------------------------- */

/* Zware geskewde display-kop. */
.wa-dash .wa-display {
  font-family: var(--wa-font-display);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0.01em;
  transform: skewX(var(--wa-skew));
  transform-origin: left bottom;
  /* text-shadow in plaats van filter: drop-shadow. Een filter op een element
   * dat ook getransformeerd is, laat op iOS Safari soms de hele tekst
   * verdwijnen. Voor tekst doet text-shadow hetzelfde zonder die bijwerking. */
  text-shadow: 0 11px 16px rgb(0 0 0 / 48%);
  margin: 0;
  color: #ffffff !important;
}

/* Sectiekop: extra rotatie bovenop de skew. */
.wa-dash .wa-display--tilt {
  transform: skewX(var(--wa-skew)) rotate(-4deg);
}

/* Rechte Bebas-kop, zonder skew. */
.wa-dash .wa-display-straight {
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.015em;
  /* text-shadow in plaats van filter: drop-shadow. Een filter op een element
   * dat ook getransformeerd is, laat op iOS Safari soms de hele tekst
   * verdwijnen. Voor tekst doet text-shadow hetzelfde zonder die bijwerking. */
  text-shadow: 0 11px 16px rgb(0 0 0 / 48%);
}

/* Outlined cijfer, voor sectienummers. */
.wa-dash .wa-outline {
  font-family: var(--wa-font-kicker);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--wa-fg);
  paint-order: stroke fill;
}

/* Klein bovenschrift in kapitalen. */
.wa-dash .wa-kicker {
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.9375rem;
  line-height: 1.1;
  color: var(--wa-fg-subtle);
}

.wa-dash .wa-kicker--primary {
  color: var(--wa-primary);
}

/* Rood vierkant als universele bullet. */
.wa-dash .wa-bullet {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--wa-primary);
  flex: none;
}

.wa-dash .wa-hairline {
  border-bottom: 1.5px solid rgba(251, 39, 60, 0.75);
}

/* ----------------------------------------------------------------------
 * Layout
 * -------------------------------------------------------------------- */

.wa-dash .wa-wrap {
  max-width: 1580px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 56px);
}

.wa-dash .wa-section {
  padding-block: clamp(36px, 5vw, 72px);
  scroll-margin-top: 100px;
}

.wa-dash .wa-section__head {
  padding-bottom: 24px;
}

/* Titel en bijschrift staan naast elkaar; de inleidende alinea eronder over
 * de volle breedte. */
.wa-dash .wa-section__titelregel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px clamp(12px, 2vw, 30px);
}

.wa-dash .wa-section__lead {
  max-width: 68ch;
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid var(--wa-primary);
  font-size: 15px;
  line-height: 1.6;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-section__title {
  font-size: clamp(30px, 3.8vw, 44px);
}

/* De rode punt achter elke sectiekop. */
.wa-dash .wa-dot {
  color: var(--wa-primary);
}

/* Panelenraster. Panelen kunnen twee kolommen pakken met --span. */
.wa-dash .wa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.wa-dash .wa-grid > .wa-span-2 {
  grid-column: span 2;
}

@media (max-width: 720px) {
  .wa-dash .wa-grid > .wa-span-2 {
    grid-column: span 1;
  }
}

/* ----------------------------------------------------------------------
 * Paneel
 * -------------------------------------------------------------------- */

.wa-dash .wa-panel {
  background: var(--wa-surface);
  border-top: 2px solid var(--wa-primary);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 14px;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.wa-dash .wa-panel:hover,
.wa-dash .wa-panel:focus-within {
  background: var(--wa-surface-hover);
}

.wa-dash .wa-panel__title {
  font-family: var(--wa-font-kicker);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wa-fg);
  border-bottom: 1.5px solid rgba(251, 39, 60, 0.75);
  padding-bottom: 6px;
  margin: 0;
}

.wa-dash .wa-panel__hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-panel__body {
  flex: 1;
  margin-top: 16px;
}

/* Bronvermelding onderaan een paneel. Was 10px op opacity 0.40 in het
 * ontwerp; nu 11px op --wa-fg-subtle, zodat het AA haalt. */
.wa-dash .wa-source {
  display: flex;
  align-items: center;
  gap: 4px 8px;
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--wa-border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-fg-subtle);
}

/* Betrouwbaarheid als drie blokjes. De aria-label in de HTML draagt de
 * betekenis; kleur alleen is niet genoeg. */
.wa-dash .wa-source__dots {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.wa-dash .wa-source__dot {
  width: 6px;
  height: 6px;
  background: rgba(250, 248, 244, 0.25);
}

.wa-dash .wa-source__dot--on {
  background: var(--wa-primary);
}

/* ----------------------------------------------------------------------
 * Duiding
 * De geschreven inzichten. Dit is de tekst die Google en AI-modellen
 * oppikken, dus bewust ruim gezet en met normale alineamarkup.
 * -------------------------------------------------------------------- */

.wa-dash .wa-duiding {
  border-left: 2px solid var(--wa-primary);
  padding: 4px 0 4px 16px;
  margin-top: 20px;
  max-width: 68ch;
}

.wa-dash .wa-duiding + .wa-duiding {
  margin-top: 14px;
}

.wa-dash .wa-duiding__title {
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: var(--wa-primary);
  margin: 0 0 4px;
}

.wa-dash .wa-duiding__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--wa-fg-muted);
}

/* ----------------------------------------------------------------------
 * Kerncijfer
 * -------------------------------------------------------------------- */

.wa-dash .wa-kpi {
  background: var(--wa-surface);
  border-top: 2px solid var(--wa-primary);
  padding: 16px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.wa-dash .wa-kpi:hover {
  background: var(--wa-surface-hover);
  transform: translateY(-3px);
}

.wa-dash .wa-kpi__value {
  font-family: var(--wa-font-display);
  text-transform: uppercase;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 0.94;
  transform: skewX(var(--wa-skew));
  transform-origin: left bottom;
  display: inline-block;
}

.wa-dash .wa-kpi__sub {
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-primary);
  font-size: clamp(13px, 1.1vw, 17px);
}

.wa-dash .wa-kpi__trend {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--wa-fg-muted);
}

/* ----------------------------------------------------------------------
 * Datatabel bij elke grafiek
 *
 * Staat altijd in de HTML, standaard ingeklapt. Drie doelen tegelijk: het
 * tekstalternatief voor de SVG, de vorm die taalmodellen het betrouwbaarst
 * uitlezen, en leesbare cijfers voor wie geen grafiek kan zien.
 * -------------------------------------------------------------------- */

.wa-dash .wa-data {
  margin-top: 14px;
  border-top: 1px solid var(--wa-border);
}

.wa-dash .wa-data__toggle {
  cursor: pointer;
  padding: 8px 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--wa-fg-subtle);
  list-style: none;
}

.wa-dash .wa-data__toggle::-webkit-details-marker {
  display: none;
}

.wa-dash .wa-data__toggle:hover {
  color: var(--wa-fg);
}

/* Driehoekje dat meedraait bij openen. */
.wa-dash .wa-data__toggle::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid var(--wa-primary);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}

.wa-dash .wa-data[open] .wa-data__toggle::before {
  transform: rotate(90deg);
}

.wa-dash .wa-data__scroll {
  overflow-x: auto;
  padding-bottom: 8px;
}

.wa-dash .wa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.wa-dash .wa-table caption {
  text-align: left;
  padding-bottom: 8px;
  font-size: 12px;
  color: var(--wa-fg-subtle);
}

.wa-dash .wa-table th,
.wa-dash .wa-table td {
  padding: 7px 12px 7px 0;
  border-bottom: 1px solid var(--wa-border);
  text-align: left;
  vertical-align: top;
}

.wa-dash .wa-table thead th {
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  color: var(--wa-fg-subtle);
  font-weight: 400;
}

.wa-dash .wa-table td:last-child,
.wa-dash .wa-table th:last-child {
  padding-right: 0;
  text-align: right;
}

/* ----------------------------------------------------------------------
 * Knoppen en filters
 * -------------------------------------------------------------------- */

/* Parallellogram: de vorm schuin, het label recht. */
.wa-dash .wa-skew-btn {
  transform: skewX(var(--wa-skew));
  display: inline-block;
  border: 1px solid var(--wa-border);
  background: transparent;
  color: var(--wa-fg);
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  /* WCAG 2.2 criterium 2.5.8 vraagt minimaal 24x24 CSS-pixels. */
  min-height: 34px;
  padding: 6px 16px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.wa-dash .wa-skew-btn__label {
  display: inline-block;
  transform: skewX(calc(var(--wa-skew) * -1));
}

.wa-dash .wa-skew-btn:hover {
  border-color: var(--wa-primary);
  font-family: var(--wa-font-kicker) !important;
}

.wa-dash .wa-skew-btn[aria-pressed="true"] {
  background: var(--wa-primary);
  border-color: var(--wa-primary);
  color: var(--wa-primary-fg);
}

.wa-dash .wa-input {
  width: 100%;
  border: 1px solid var(--wa-border);
  background: transparent;
  color: var(--wa-fg);
  padding: 12px 16px;
  font-size: 16px;
  font-family: inherit;
}

.wa-dash .wa-input::placeholder {
  color: var(--wa-fg-subtle);
}

.wa-dash .wa-input:focus {
  border-color: var(--wa-primary);
}

/* ----------------------------------------------------------------------
 * Kaarten en staten
 * -------------------------------------------------------------------- */

/* Lichte kaart voor advies en quotes. */
.wa-dash .wa-light-card {
  background: var(--wa-offwhite);
  color: #131313;
  border-top: 2px solid var(--wa-primary);
  padding: 20px;
}

/* Getoond als een sectie wel bestaat maar een enkel paneel leeg is. Hele
 * secties zonder data renderen niets en gebruiken dit dus niet. */
.wa-dash .wa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--wa-border);
  color: var(--wa-fg-subtle);
}

/* Onder de 30 waarnemingen tonen we geen uitsplitsing. */
.wa-dash .wa-insufficient {
  border: 1px solid rgba(251, 39, 60, 0.5);
  background: rgba(251, 39, 60, 0.06);
  padding: 24px;
  text-align: center;
}

/* ----------------------------------------------------------------------
 * Print
 * De pagina's vervangen een PDF, dus afdrukken moet fatsoenlijk werken.
 * -------------------------------------------------------------------- */

@media print {
  .wa-dash {
    background: #fff;
    color: #000;
  }

  .wa-dash .wa-grain,
  .wa-dash .wa-skip {
    display: none;
  }

  /* Ingeklapte tabellen open, anders drukt de helft van de cijfers niet af. */
  .wa-dash .wa-data {
    display: block;
  }

  .wa-dash .wa-data > *:not(.wa-data__toggle) {
    display: block !important;
  }
}

/* ======================================================================
 * Grafieken
 * Toegevoegd in fase 4. Alles hierboven is het designsysteem, alles
 * hieronder hoort bij een specifieke visualisatie.
 * ==================================================================== */

/* ----------------------------------------------------------------------
 * Horizontale balken
 * -------------------------------------------------------------------- */

.wa-dash .wa-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wa-dash .wa-bar__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 5px;
}

.wa-dash .wa-bar__rank {
  font-family: var(--wa-font-display);
  color: var(--wa-primary);
  min-width: 1.1em;
}

.wa-dash .wa-bar__label {
  font-size: 14px;
  min-width: 0;
}

/* Het cijfer duwt zichzelf naar rechts en blijft altijd volledig leesbaar. */
.wa-dash .wa-bar__value {
  margin-left: auto;
  flex: none;
  font-family: var(--wa-font-display);
  font-size: 22px;
  line-height: 1;
  transition: color 0.2s ease;
}

.wa-dash .wa-bar:hover .wa-bar__value,
.wa-dash .wa-bar:focus-within .wa-bar__value {
  color: var(--wa-primary);
}

.wa-dash .wa-bar__track {
  display: block;
  height: 14px;
  width: 100%;
  background: var(--wa-muted);
}

.wa-dash .wa-bar__fill {
  display: block;
  height: 100%;
  transition:
    width 0.3s ease,
    opacity 0.2s ease;
}

.wa-dash .wa-bar:hover .wa-bar__fill {
  opacity: 0.82;
}

/* De toelichting staat altijd in beeld, niet alleen bij hover. Zo is hij
 * bruikbaar op touch, met toetsenbord, en leesbaar voor zoekmachines. */
.wa-dash .wa-bar__note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--wa-fg-muted);
}

/* ----------------------------------------------------------------------
 * Donut
 * -------------------------------------------------------------------- */

.wa-dash .wa-donut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.wa-dash .wa-donut__svg {
  width: 160px;
  height: 160px;
  flex: none;
}

.wa-dash .wa-donut__seg {
  transition: opacity 0.2s ease;
}

/* Bij hover over een legenda-item dimt de rest. Wordt gezet door
 * dashboard-widget.js; zonder JavaScript blijft alles gewoon zichtbaar. */
.wa-dash .wa-donut.is-focus .wa-donut__seg {
  opacity: 0.45;
}

.wa-dash .wa-donut.is-focus .wa-donut__seg.is-active {
  opacity: 1;
}

.wa-dash .wa-donut__side {
  flex: 1 1 180px;
  min-width: 0;
}

.wa-dash .wa-donut__value {
  font-family: var(--wa-font-display);
  font-size: 30px;
  line-height: 1;
}

.wa-dash .wa-donut__label {
  margin-top: 2px;
  font-size: 13px;
  color: var(--wa-fg-muted);
}

/* ----------------------------------------------------------------------
 * Gauge
 * -------------------------------------------------------------------- */

.wa-dash .wa-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wa-dash .wa-gauge__svg {
  width: 100%;
  max-width: 380px;
  overflow: visible;
}

.wa-dash .wa-gauge__scale {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 380px;
  margin-top: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wa-fg-muted);
}

/* ----------------------------------------------------------------------
 * Salarisbalk
 * -------------------------------------------------------------------- */

.wa-dash .wa-salary__value {
  font-size: clamp(38px, 5vw, 56px);
  margin-top: 8px;
}

.wa-dash .wa-salary__unit {
  margin-top: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-salary__track {
  position: relative;
  height: 16px;
  width: 100%;
  margin-top: 36px;
  background: var(--wa-muted);
}

.wa-dash .wa-salary__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(251, 39, 60, 0.3);
}

.wa-dash .wa-salary__marker {
  position: absolute;
  top: -6px;
  height: 24px;
  width: 4px;
  background: var(--wa-primary);
}

.wa-dash .wa-salary__legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.wa-dash .wa-salary__legend > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wa-dash .wa-salary__legend > span:nth-child(2) {
  text-align: center;
}

.wa-dash .wa-salary__legend > span:last-child {
  text-align: right;
}

.wa-dash .wa-salary__num {
  font-family: var(--wa-font-display);
  font-size: 22px;
  line-height: 1;
}

/* ----------------------------------------------------------------------
 * Schaalprofiel
 * -------------------------------------------------------------------- */

.wa-dash .wa-scales {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.wa-dash .wa-scale__ends {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-scale__track {
  position: relative;
  display: block;
  height: 1px;
  width: 100%;
  background: var(--wa-border);
}

.wa-dash .wa-scale__track::before,
.wa-dash .wa-scale__track::after {
  content: "";
  position: absolute;
  top: -4px;
  height: 9px;
  width: 1px;
  background: var(--wa-border);
}

.wa-dash .wa-scale__track::before {
  left: 0;
}
.wa-dash .wa-scale__track::after {
  right: 0;
}

.wa-dash .wa-scale__marker {
  position: absolute;
  top: -7px;
  height: 15px;
  width: 15px;
  transform: translateX(-50%);
  background: var(--wa-primary);
  transition: transform 0.2s ease;
}

.wa-dash .wa-scale:hover .wa-scale__marker {
  transform: translateX(-50%) scale(1.4);
}

/* ----------------------------------------------------------------------
 * Heatmap
 * -------------------------------------------------------------------- */

.wa-dash .wa-heatmap td {
  padding: 5px 0 5px 8px;
}

.wa-dash .wa-heatmap__cel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  height: 46px;
  width: 92px;
  font-family: var(--wa-font-display);
  font-size: 20px;
  color: var(--wa-offwhite);
  transition: transform 0.2s ease;
}

.wa-dash .wa-heatmap tr:hover .wa-heatmap__cel {
  transform: scale(1.05);
}

/* ----------------------------------------------------------------------
 * Kaart van Nederland
 * -------------------------------------------------------------------- */

.wa-dash .wa-map {
  display: grid;
  gap: 32px;
  align-items: center;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
}

@media (max-width: 860px) {
  .wa-dash .wa-map {
    grid-template-columns: 1fr;
  }
}

.wa-dash .wa-map__figure {
  max-width: 620px;
  margin-inline: auto;
  width: 100%;
}

.wa-dash .wa-map__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.wa-dash .wa-map__province {
  transition:
    fill 0.2s ease,
    opacity 0.2s ease;
}

/* Actieve provincie kleurt rood, de rest dimt. Alleen als er iets actief is,
 * zodat de kaart zonder JavaScript volledig zichtbaar blijft. */
.wa-dash .wa-map.is-focus .wa-map__province {
  opacity: 0.62;
}

.wa-dash .wa-map.is-focus .wa-map__province.is-active {
  opacity: 1;
  fill: var(--wa-primary);
}

.wa-dash .wa-map.is-focus .wa-map__tag {
  opacity: 0.35;
}

.wa-dash .wa-map.is-focus .wa-map__tag.is-active {
  opacity: 1;
}

.wa-dash .wa-map__list {
  border-top: 1px solid var(--wa-border);
}

.wa-dash .wa-map__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--wa-border);
  transition: color 0.2s ease;
}

.wa-dash .wa-map__row:hover,
.wa-dash .wa-map__row:focus-within {
  color: var(--wa-primary);
}

.wa-dash .wa-map__naam {
  font-weight: 700;
  line-height: 1.2;
}

.wa-dash .wa-map__cijfers {
  flex: none;
  text-align: right;
}

.wa-dash .wa-map__pct {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--wa-primary);
}

.wa-dash .wa-map__abs {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wa-fg-muted);
}

/* ----------------------------------------------------------------------
 * Opsomming
 * Gebruikt voor rangordes: zowel lijsten zonder cijfers (Jobboards) als
 * expliciete top vijfs (workdrivers, karaktereigenschappen). Een rangorde
 * is bewust geen balkdiagram, want dan krijgt positie 5 de langste balk.
 * -------------------------------------------------------------------- */

.wa-dash .wa-list__item {
  display: flex;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--wa-border);
}

.wa-dash .wa-list__item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.wa-dash .wa-list__rank {
  flex: none;
  min-width: 1.4em;
  font-family: var(--wa-font-display);
  font-size: 20px;
  line-height: 1.2;
  color: var(--wa-primary);
}

.wa-dash .wa-list__bullet {
  margin-top: 8px;
}

.wa-dash .wa-list__body {
  min-width: 0;
}

.wa-dash .wa-list__label {
  display: block;
  font-weight: 700;
}

.wa-dash .wa-list__detail {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wa-fg-muted);
}

/* ======================================================================
 * Blokken
 * Toegevoegd in fase 5: kop, kandidatenreis, persona's, triggers,
 * businesscase, campagne en de sectienavigatie.
 * ==================================================================== */

/* ----------------------------------------------------------------------
 * Dashboardkop
 * -------------------------------------------------------------------- */

.wa-dash .wa-head {
  padding-block: clamp(24px, 4vw, 56px) clamp(20px, 3vw, 36px);
}

.wa-dash .wa-head__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(20px, 3vw, 40px);
}

.wa-dash .wa-head__title {
  font-size: clamp(38px, 6.5vw, 88px);
}

.wa-dash .wa-head__aliassen {
  margin-top: clamp(18px, 2.5vw, 30px);
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(12px, 1.3vw, 16px);
  color: var(--wa-fg-muted);
}

/* De samenvatting is de enige lopende tekst boven de vouw. Dit is wat een
 * AI-model als antwoord citeert, dus ruim en leesbaar gezet. */
.wa-dash .wa-head__lead {
  margin-top: 24px;
  max-width: 62ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--wa-border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wa-fg-subtle);
}

/* ----------------------------------------------------------------------
 * Sectienavigatie
 * -------------------------------------------------------------------- */

.wa-dash .wa-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.wa-dash .wa-nav__kop {
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wa-border);
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--wa-fg-subtle);
}

.wa-dash .wa-nav__link {
  display: flex;
  flex: 1 1 150px;
  align-items: baseline;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  border-left: 2px solid var(--wa-border);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--wa-fg);
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
  font-family: var(--wa-font-sans) !important;
}

.wa-dash .wa-nav__link:hover {
  border-left-color: var(--wa-primary);
  background: rgba(250, 248, 244, 0.06);
}

/* aria-current draagt de betekenis; kleur is de zichtbare bevestiging. */
.wa-dash .wa-nav__link[aria-current="true"] {
  border-left-color: var(--wa-primary);
  background: rgba(251, 39, 60, 0.14);
  color: var(--wa-primary);
}

.wa-nav__link:hover .wa-dash .wa-nav__nr {
  font-family: var(--wa-font-kicker);
}

.wa-dash .wa-nav__nr {
  font-family: var(--wa-font-kicker);
  font-size: 12px;
  color: var(--wa-fg-subtle);
}

.wa-dash .wa-nav__link[aria-current="true"] .wa-nav__nr {
  color: var(--wa-primary);
}

.wa-dash .wa-nav__text {
  font-family: var(--wa-font-sans) !important;
}

/* ----------------------------------------------------------------------
 * Sleutel-waardeparen
 * -------------------------------------------------------------------- */

.wa-dash .wa-pairs {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(140px, 0.6fr) minmax(0, 1.4fr);
  gap: 0;
}

@media (max-width: 560px) {
  .wa-dash .wa-pairs {
    grid-template-columns: 1fr;
  }
}

.wa-dash .wa-pairs__key {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--wa-border);
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--wa-fg-subtle);
}

.wa-dash .wa-pairs__val {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--wa-border);
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .wa-dash .wa-pairs__key {
    padding-bottom: 2px;
    border-bottom: 0;
  }
}

.wa-dash .wa-pairs--compact .wa-pairs__key,
.wa-dash .wa-pairs--compact .wa-pairs__val {
  padding-block: 7px;
  font-size: 13.5px;
}

/* ----------------------------------------------------------------------
 * Quote
 * -------------------------------------------------------------------- */

.wa-dash .wa-quote {
  margin: 16px 0 0;
  padding: 16px 18px;
  background: var(--wa-offwhite);
  color: #131313;
  border-top: 2px solid var(--wa-primary);
}

.wa-dash .wa-quote__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
}

.wa-dash .wa-quote__text::before {
  content: "\201C";
}
.wa-dash .wa-quote__text::after {
  content: "\201D";
}

.wa-dash .wa-quote__bron {
  margin-top: 10px;
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  /* Donkere tekst op offwhite: ruim voldoende contrast. */
  color: #5a5a5a;
}

/* ----------------------------------------------------------------------
 * Kandidatenreis
 * -------------------------------------------------------------------- */

.wa-dash .wa-reis {
  min-width: 760px;
}

.wa-dash .wa-reis th,
.wa-dash .wa-reis td {
  padding: 12px 16px 12px 0;
  font-size: 14px;
  line-height: 1.45;
  vertical-align: top;
}

.wa-dash .wa-reis__stap {
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  color: var(--wa-primary);
  white-space: nowrap;
}

.wa-dash .wa-reis__afhaak {
  color: var(--wa-fg-muted);
}

/* ----------------------------------------------------------------------
 * Persona's
 * -------------------------------------------------------------------- */

.wa-dash .wa-personas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.wa-dash .wa-persona {
  background: var(--wa-surface);
  border-top: 2px solid var(--wa-primary);
  padding: 18px 20px 20px;
  transition: background 0.18s ease;
}

.wa-dash .wa-persona:hover {
  background: var(--wa-surface-hover);
}

.wa-dash .wa-persona__head {
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1.5px solid rgba(251, 39, 60, 0.75);
}

.wa-dash .wa-persona__naam {
  margin: 0;
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 21px;
  line-height: 1.05;
}

/* ----------------------------------------------------------------------
 * Vertrektriggers
 * -------------------------------------------------------------------- */

.wa-dash .wa-triggers {
  min-width: 520px;
}

.wa-dash .wa-triggers__urgentie {
  min-width: 160px;
}

.wa-dash .wa-triggers__cijfer {
  display: block;
  margin-bottom: 5px;
  font-family: var(--wa-font-display);
  font-size: 18px;
  line-height: 1;
  text-align: right;
}

/* ----------------------------------------------------------------------
 * Businesscase
 * -------------------------------------------------------------------- */

.wa-dash .wa-kosten {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.wa-dash .wa-kosten__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 6px;
}

.wa-dash .wa-kosten__label {
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 16px;
}

.wa-dash .wa-kosten__bedrag {
  font-family: var(--wa-font-display);
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

/* De balk bestaat uit twee delen naast elkaar: de basiskosten en het rode
 * stuk dat het alternatief extra kost. */
.wa-dash .wa-kosten .wa-bar__track {
  display: flex;
}

.wa-dash .wa-kosten__basis {
  display: block;
  height: 100%;
  background: var(--wa-offwhite);
}

.wa-dash .wa-kosten__extra {
  display: block;
  height: 100%;
  background: var(--wa-primary);
}

.wa-dash .wa-kosten__note {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-besparing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.wa-dash .wa-besparing__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--wa-surface);
  border-top: 2px solid var(--wa-primary);
}

.wa-dash .wa-besparing__bedrag {
  font-family: var(--wa-font-display);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1;
  color: var(--wa-primary);
}

.wa-dash .wa-besparing__range {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wa-fg-subtle);
}

.wa-dash .wa-aannames {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.wa-dash .wa-aannames__item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wa-fg-muted);
}

/* ----------------------------------------------------------------------
 * Conclusie en voetnoot
 * -------------------------------------------------------------------- */

.wa-dash .wa-conclusie {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--wa-offwhite);
  color: #131313;
  border-top: 2px solid var(--wa-primary);
  font-size: 16px;
  line-height: 1.55;
  max-width: 72ch;
}

.wa-dash .wa-voetnoot {
  margin-top: 14px;
  font-size: 12px;
  color: var(--wa-fg-subtle);
}

/* ======================================================================
 * Indeling gelijkgetrokken met het Lovable-ontwerp
 * Toegevoegd in fase 6. Waar deze regels eerdere overschrijven staat dat
 * erbij; ze staan bewust onderaan zodat ze winnen zonder !important.
 * ==================================================================== */

/* Sectieafstand volgt het ontwerp: ruimte bóven een sectie, niet eronder.
 * Elke widget is een eigen Elementor-element, dus dubbele marges zouden
 * anders optellen. */
.wa-dash .wa-section {
  padding-block: clamp(52px, 6vw, 88px) 0;
  scroll-margin-top: 104px;
}

.wa-dash .wa-section__regel {
  display: block;
}

.wa-dash .wa-section__intro {
  max-width: 42ch;
  padding-bottom: 4px;
  font-size: 13px;
  letter-spacing: 0.1em;
}

/* Paneel over de volle breedte van het raster. */
.wa-dash .wa-grid > .wa-span-full {
  grid-column: 1 / -1;
}

/* Kerncijfers staan dichter op elkaar dan de gewone panelen. */
.wa-dash .wa-grid--kpi {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* ----------------------------------------------------------------------
 * Dashboardkop
 * -------------------------------------------------------------------- */

.wa-dash .wa-head__title {
  /* Groter dan de sectiekoppen en zonder de extra kanteling: de h1 is het
   * anker van de pagina. */
  font-size: clamp(46px, 8.2vw, 116px);
}

.wa-dash .wa-head__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px clamp(28px, 3.4vw, 56px);
  margin: clamp(24px, 3vw, 38px) 0 0;
}

.wa-dash .wa-head__fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.wa-dash .wa-head__square {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background: var(--wa-primary);
}

.wa-dash .wa-head__fact-key {
  font-size: 13px;
  line-height: 1;
}

.wa-dash .wa-head__fact-val {
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

/* ----------------------------------------------------------------------
 * Compacte balken
 * Label, balk en cijfer op een regel. Op smalle schermen valt het label
 * boven de balk, anders wordt de balk onleesbaar kort.
 * -------------------------------------------------------------------- */

.wa-dash .wa-bars--inline {
  gap: 0;
}

.wa-dash .wa-bar--inline {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) minmax(0, 2.4fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wa-border);
}

.wa-dash .wa-bar--inline:last-child {
  border-bottom: 0;
}

.wa-dash .wa-bar--inline .wa-bar__label {
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
}

.wa-dash .wa-bar--inline .wa-bar__value {
  min-width: 54px;
  text-align: right;
}

@media (max-width: 480px) {
  .wa-dash .wa-bar--inline {
    grid-template-columns: 1fr auto;
  }
  .wa-dash .wa-bar--inline .wa-bar__track {
    grid-column: 1 / -1;
  }
}

/* ----------------------------------------------------------------------
 * Groot kerngetal in een paneel
 * -------------------------------------------------------------------- */

.wa-dash .wa-groot {
  font-size: clamp(40px, 5vw, 60px);
}

.wa-dash .wa-groot__sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-groot__extra {
  margin-top: 24px;
}

/* ----------------------------------------------------------------------
 * Grote percentages met rode streep
 * -------------------------------------------------------------------- */

.wa-dash .wa-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.wa-dash .wa-stat {
  border-left: 2px solid var(--wa-primary);
  padding-left: 16px;
}

.wa-dash .wa-stat__value {
  font-size: clamp(30px, 3.4vw, 40px);
  transition: transform 0.2s ease;
}

.wa-dash .wa-stat:hover .wa-stat__value {
  transform: skewX(var(--wa-skew)) translateX(4px);
}

.wa-dash .wa-stat__label {
  margin-top: 6px;
  font-size: 14px;
  color: var(--wa-fg-muted);
}

/* ----------------------------------------------------------------------
 * Genummerde lijst met percentage
 * -------------------------------------------------------------------- */

.wa-dash .wa-ranked__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wa-border);
}

.wa-dash .wa-ranked__item:last-child {
  border-bottom: 0;
}

.wa-dash .wa-ranked__nr {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--wa-primary);
  color: var(--wa-primary-fg);
  font-family: var(--wa-font-kicker);
  font-size: 14px;
}

.wa-dash .wa-ranked__label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
}

.wa-dash .wa-ranked__val {
  flex: none;
  font-family: var(--wa-font-kicker);
  font-size: 20px;
}

/* ----------------------------------------------------------------------
 * Adviesblok
 * -------------------------------------------------------------------- */

.wa-dash .wa-advies {
  margin-top: 32px;
  padding: clamp(20px, 3vw, 32px);
  background: rgba(251, 39, 60, 0.06);
  border-left: 4px solid var(--wa-primary);
}

.wa-dash .wa-advies__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.wa-dash .wa-advies__tekst {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  max-width: 46ch;
}

/* ----------------------------------------------------------------------
 * Kaartraster: kandidatenreis, persona's en campagneadvies
 * -------------------------------------------------------------------- */

.wa-dash .wa-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.wa-dash .wa-cards--smal {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 0;
}

.wa-dash .wa-card {
  display: flex;
  flex-direction: column;
  background: var(--wa-surface);
  border-top: 2px solid var(--wa-primary);
  padding: 20px;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.wa-dash .wa-card:hover {
  background: var(--wa-surface-hover);
  transform: translateY(-4px);
}

.wa-dash .wa-card__lead {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.wa-dash .wa-card__nr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wa-font-display);
  font-size: 13px;
  color: var(--wa-primary);
}

.wa-dash .wa-card__titel {
  margin: 12px 0 0;
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 21px;
  line-height: 1.05;
  color: var(--wa-offwhite) !important;
}

.wa-dash .wa-card__sub {
  margin-top: 6px;
}

.wa-dash .wa-card__dl {
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}

.wa-dash .wa-card__dd {
  margin: 2px 0 0;
  color: rgba(250, 248, 244, 0.85);
  line-height: 1.45;
}

.wa-dash .wa-card__dd--sterk {
  font-weight: 700;
  color: var(--wa-fg);
}

.wa-dash .wa-card__afhaak {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--wa-border);
}

/* Persona's: label links, waarde rechts, met een lijn per rij. */
.wa-dash .wa-card__dl--rijen {
  gap: 0;
}

.wa-dash .wa-card__rij {
  display: flex;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--wa-border);
}

.wa-dash .wa-card__rij:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.wa-dash .wa-card__rij-key {
  flex: none;
  width: 150px;
  padding-top: 2px;
  font-size: 12.5px;
}

@media (max-width: 420px) {
  .wa-dash .wa-card__rij {
    flex-direction: column;
    gap: 2px;
  }
  .wa-dash .wa-card__rij-key {
    width: auto;
  }
}

.wa-dash .wa-card__quote {
  margin: 20px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--wa-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.wa-dash .wa-card__quote::before {
  content: "\201C";
}
.wa-dash .wa-card__quote::after {
  content: "\201D";
}

/* ----------------------------------------------------------------------
 * Vertrektriggers: balk en cijfer naast elkaar
 * Vervangt het gestapelde blok uit fase 5.
 * -------------------------------------------------------------------- */

.wa-dash .wa-triggers__termijn {
  color: var(--wa-fg-muted);
  white-space: nowrap;
}

.wa-dash .wa-triggers__meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  width: 140px;
}

.wa-dash .wa-triggers__track {
  flex: 1;
  height: 8px;
  background: var(--wa-muted);
}

.wa-dash .wa-triggers__fill {
  display: block;
  height: 100%;
  background: var(--wa-primary);
  transition: height 0.2s ease;
}

.wa-dash .wa-triggers__cijfer {
  flex: none;
  width: 34px;
  text-align: right;
  font-family: var(--wa-font-display);
  font-size: 19px;
  line-height: 1;
}

/* ======================================================================
 * Correcties na de eerste visuele controle
 * Staat onderaan zodat deze regels winnen zonder !important.
 * ==================================================================== */

/* ----------------------------------------------------------------------
 * Duiding als rood vlak
 * Was drie losse alinea's onder elkaar en verdween daarmee in de pagina.
 * Nu dezelfde vorm als het "wat dit betekent"-blok uit het ontwerp.
 * -------------------------------------------------------------------- */

.wa-dash .wa-advies--duiding {
  margin-top: 28px;
}

.wa-dash .wa-advies__kolom .wa-kicker {
  margin-bottom: 6px;
}

/* Drie of meer inzichten passen prettiger in smallere kolommen. */
.wa-dash .wa-advies--duiding .wa-advies__grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px 28px;
}

.wa-dash .wa-advies--duiding .wa-advies__tekst {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(250, 248, 244, 0.88);
}

/* De oude losse variant blijft bestaan maar wordt nergens meer gebruikt. */
.wa-dash .wa-duiding {
  border-left: 2px solid var(--wa-primary);
  padding-left: 16px;
}

/* ----------------------------------------------------------------------
 * Balken
 * De rij is een knop zodra er een toelichting bij hoort, zodat die ook met
 * het toetsenbord te bereiken is.
 * -------------------------------------------------------------------- */

.wa-dash .wa-bar__rij {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.wa-dash button.wa-bar__rij {
  cursor: pointer;
}

/* De toelichting blijft in de HTML staan - schermlezers en zoekmachines
 * lezen hem dus - maar is dichtgeklapt tot je de rij aanwijst of erop
 * focust. Geen display:none, want dan zou hij ook uit de toegankelijkheids-
 * boom verdwijnen. */
.wa-dash .wa-bar__note {
  display: block;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--wa-fg-muted);
  transition:
    max-height 0.2s ease,
    opacity 0.2s ease,
    margin-top 0.2s ease;
}

.wa-dash .wa-bar__rij:hover .wa-bar__note,
.wa-dash .wa-bar__rij:focus-visible .wa-bar__note,
.wa-dash .wa-bar:focus-within .wa-bar__note {
  max-height: 8em;
  margin-top: 8px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .wa-dash .wa-bar__note {
    transition: none;
  }
}

/* Zonder cijfer naast de balk mag het label de vrijgekomen ruimte pakken. */
.wa-dash .wa-bar__head {
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------------
 * Quote
 * Rode kantlijn met vette tekst, in plaats van een lichte kaart.
 * -------------------------------------------------------------------- */

.wa-dash .wa-quote {
  margin: 0;
  padding: 0 0 0 16px;
  background: none;
  border: 0;
  border-left: 2px solid var(--wa-primary);
  color: inherit;
}

.wa-dash .wa-quote__text {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.35;
  color: var(--wa-fg);
}

.wa-dash .wa-quote__bron {
  margin-top: 12px;
  color: var(--wa-fg-subtle);
}

/* ----------------------------------------------------------------------
 * Besparing
 * Lijst binnen het paneel, niet een raster van tegels.
 * -------------------------------------------------------------------- */

.wa-dash .wa-besparing {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.wa-dash .wa-besparing__item {
  display: block;
  padding: 0;
  background: none;
  border: 0;
}

.wa-dash .wa-besparing__bedrag {
  display: block;
  margin-top: 6px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
  color: var(--wa-primary);
  transition: transform 0.2s ease;
}

.wa-dash .wa-besparing__item:hover .wa-besparing__bedrag {
  transform: skewX(var(--wa-skew)) translateX(5px);
}

/* ----------------------------------------------------------------------
 * Persona-carrousel
 * -------------------------------------------------------------------- */

.wa-dash .wa-carousel__bediening {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.wa-dash .wa-carousel__bediening[hidden] {
  display: none;
}

.wa-dash .wa-carousel__status {
  margin-left: 8px;
  font-size: 12px;
  color: var(--wa-fg-subtle);
}

/* Verborgen kaarten: het hidden-attribuut doet het werk, maar Elementor en
 * sommige thema's zetten display op grid-kinderen. Daarom expliciet. */
.wa-dash .wa-carousel__spoor > [hidden] {
  display: none;
}

/* ======================================================================
 * WeAchieve-duidingblok
 *
 * Een eigen paneel onder elke sectie, niet een alinea met een kantlijn.
 * Rode kaderlijn boven, donkerrode ondergrond, kop in displayfont, de
 * inzichten in kolommen, daaronder de onderbouwing en de bronregel.
 * ==================================================================== */

.wa-dash .wa-duidingblok {
  margin-top: clamp(32px, 4vw, 52px);
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 36px);
  /* Roodgetint over de donkere pagina; de grain van de pagina valt eroverheen. */
  /* background: rgba(251, 39, 60, 0.075); */
  background-image: linear-gradient(
    to bottom right,
    color-mix(in srgb, var(--wa-primary) 10%, transparent),
    color-mix(in srgb, var(--wa-primary) 5%, transparent),
    transparent
  );
  border-top: 2px solid var(--wa-primary);
  border-left: 2px solid var(--wa-primary);
}

.wa-dash .wa-duidingblok__titel {
  margin: 8px 0 0;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1;
  color: var(--wa-fg);
}

/* Kolommen met de inzichten. Bij twee of drie blokken naast elkaar, op
 * smallere schermen onder elkaar. */
.wa-dash .wa-duidingblok__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px clamp(24px, 3vw, 44px);
  margin-top: clamp(20px, 2.5vw, 30px);
}

.wa-dash .wa-duidingblok__label {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--wa-fg-subtle);
}

/* De laatste kolom is de aanbeveling: die krijgt het accent. */
.wa-dash .wa-duidingblok__kolom:last-child .wa-duidingblok__label {
  color: var(--wa-primary);
}

.wa-dash .wa-duidingblok__tekst {
  margin-top: 10px;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(250, 248, 244, 0.9);
}

/* Onderbouwing: gescheiden door een lijn, over de volle breedte. */
.wa-dash .wa-duidingblok__onderbouwing {
  margin-top: clamp(22px, 3vw, 32px);
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid rgba(250, 248, 244, 0.16);
}

.wa-dash .wa-duidingblok__onderbouwing .wa-duidingblok__tekst {
  max-width: 92ch;
  font-size: 14.5px;
  color: var(--wa-fg-muted);
}

/* Bronregel: label-waardeparen naast elkaar. */
.wa-dash .wa-duidingblok__bron {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-top: clamp(18px, 2.4vw, 26px);
}

.wa-dash .wa-duidingblok__bron .wa-duidingblok__label {
  font-size: 11.5px;
}

/* Ruimte vóór het tweede label, zodat bron en zekerheid uit elkaar staan. */
.wa-dash .wa-duidingblok__bron .wa-duidingblok__label ~ .wa-duidingblok__label {
  margin-left: clamp(8px, 2vw, 28px);
}

.wa-dash .wa-duidingblok__bronwaarde {
  font-size: 13px;
  color: var(--wa-fg-muted);
}

/* Het oude losse blok wordt nergens meer gebruikt, maar de klasse blijft
 * bestaan voor wie hem in een eigen template heeft staan. */
.wa-dash .wa-advies--duiding {
  display: none;
}

/* ======================================================================
 * Benchmark-CTA en het definitieve duidingblok
 * ==================================================================== */

/* ====================================================================
 * Verkoopkaart in de zijkolom
 *
 * Vervangt de benchmarkkaart. Verdwijnt zodra iemand het rapport heeft:
 * blijven verkopen aan wie al gekocht heeft kost alleen ruimte.
 * ================================================================== */

.wa-dash .wa-verkoop {
  padding: clamp(20px, 2.5vw, 28px);
  background: var(--wa-surface);
  border-top: 2px solid var(--wa-primary);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Zonder verkoopdeel blijft alleen de downloadlijst over; dan hoeft er ook
 * geen rode streep bovenop. */
.wa-dash .wa-verkoop--kaal {
  border-top: 1px solid var(--wa-border);
  gap: 0;
}

.wa-dash .wa-verkoop__kicker {
  margin: 0;
}

.wa-dash .wa-verkoop__kop {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.05;
  color: var(--wa-fg);
}

.wa-dash .wa-verkoop__punten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wa-dash .wa-verkoop__punten li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--wa-fg);
}

.wa-dash .wa-verkoop__punten .wa-bullet {
  margin-top: 0.35em;
  width: 0.75rem;
  height: 0.75rem;
}

.wa-dash .wa-verkoop__knop {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border-color: var(--wa-primary);
  background: var(--wa-primary);
  color: var(--wa-primary-fg);
  font-size: 15px;
  min-height: 48px;
  padding: 12px 18px;
  text-decoration: none;
}

.wa-dash .wa-verkoop__knop:hover,
.wa-dash .wa-verkoop__knop:focus-visible {
  background: transparent;
  color: var(--wa-primary);
}

/* De aanbetalingsregel. Niet als voetnoot weggemoffeld: het is een argument,
 * geen kleine lettertjes. */
.wa-dash .wa-verkoop__aanbetaling {
  margin: 0;
  padding: 12px 14px;
  border-left: 2px solid var(--wa-primary);
  background: rgb(251 39 60 / 10%);
  font-size: 13px;
  line-height: 1.5;
  color: var(--wa-fg);
}

/* --- De twee downloads --- */

.wa-dash .wa-verkoop__downloads {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wa-dash .wa-verkoop__download {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--wa-border);
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
}

.wa-dash .wa-verkoop__downloadnaam {
  color: var(--wa-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--wa-border);
}

a.wa-dash .wa-verkoop__downloadnaam:hover,
.wa-dash a.wa-verkoop__downloadnaam:hover,
.wa-dash a.wa-verkoop__downloadnaam:focus-visible {
  color: var(--wa-primary);
  border-bottom-color: var(--wa-primary);
}

.wa-dash .wa-verkoop__downloadnaam.is-slot,
.wa-dash .wa-verkoop__downloadnaam.is-leeg {
  color: var(--wa-fg-subtle);
  border-bottom: none;
}

.wa-dash .wa-verkoop__binnenkort {
  margin-left: auto;
  font-size: 11px;
  color: var(--wa-fg-subtle);
}

/* Hangslotje, in dezelfde vorm als in de navigatie. */
.wa-dash .wa-verkoop__slotje {
  margin-left: auto;
  width: 12px;
  height: 14px;
  flex: none;
  background: var(--wa-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 016 0V5M1.5 5h7v6h-7z' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 016 0V5M1.5 5h7v6h-7z' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* ----------------------------------------------------------------------
 * Duidingblok, definitieve vorm
 * Rode lijn boven en links, met een verloop dat naar rechts uitdooft.
 * -------------------------------------------------------------------- */

.wa-dash .wa-duidingblok {
  margin-top: clamp(20px, 2.4vw, 34px);
  padding: clamp(18px, 2.2vw, 32px);
  border-top: 2px solid var(--wa-primary);
  border-left: 2px solid var(--wa-primary);
  background: linear-gradient(
    to bottom right,
    rgba(251, 39, 60, 0.1),
    rgba(251, 39, 60, 0.05) 45%,
    transparent
  );
}

.wa-dash .wa-duidingblok__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px clamp(18px, 2vw, 34px);
  margin-top: 24px;
}

/* Drie kolommen zodra er ruimte is. Bewust een vaste driedeling en geen
 * auto-fit: de koppen horen bij elkaar te blijven staan. */
@media (min-width: 768px) {
  .wa-dash .wa-duidingblok__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wa-dash .wa-duidingblok__kolom {
  min-width: 0;
}

.wa-dash .wa-duidingblok__tekst {
  margin-top: 8px;
  overflow-wrap: break-word;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(250, 248, 244, 0.9);
}

.wa-dash .wa-duidingblok__voet {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(250, 248, 244, 0.16);
}

.wa-dash .wa-duidingblok__bewijs {
  margin-top: 8px;
  overflow-wrap: break-word;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-duidingblok__bron {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(20px, 3vw, 32px);
  margin: 16px 0 0;
}

.wa-dash .wa-duidingblok__bronpaar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.wa-dash .wa-duidingblok__bronpaar dt {
  font-size: 11px;
}

.wa-dash .wa-duidingblok__bronwaarde {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
  font-size: 12px;
  color: var(--wa-fg-muted);
}

/* ======================================================================
 * Dashboardbibliotheek: het overzicht van alle functiedashboards
 * ==================================================================== */

.wa-dash.wa-bibliotheek {
  padding-bottom: clamp(48px, 6vw, 96px);
}

.wa-dash .wa-bibliotheek__kop {
  max-width: 48rem;
  padding-top: clamp(26px, 3.4vw, 52px);
}

.wa-dash .wa-bibliotheek__teller {
  margin-bottom: clamp(20px, 3vw, 40px);
}

.wa-dash .wa-bibliotheek__titel {
  font-size: clamp(38px, 6vw, 82px);
}

.wa-dash .wa-bibliotheek__intro {
  margin-top: 24px;
  max-width: 36rem;
  font-size: 15px;
  line-height: 1.7;
  color: var(--wa-fg-muted);
}

/* ----------------------------------------------------------------------
 * Zoeken en filteren
 * -------------------------------------------------------------------- */

.wa-dash .wa-bibliotheek__filter {
  margin-top: 40px;
  padding: 16px;
  background: var(--wa-surface);
  border-top: 2px solid var(--wa-primary);
}

.wa-dash .wa-bibliotheek__label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
}

.wa-dash .wa-bibliotheek__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.wa-dash .wa-bibliotheek__knop {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  /* WCAG 2.2 vraagt minimaal 24x24 CSS-pixels; 34 geeft wat lucht. */
  min-height: 34px;
  padding: 6px 14px;
}

.wa-dash .wa-bibliotheek__resultaat {
  margin-top: 20px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wa-fg-subtle);
}

/* ----------------------------------------------------------------------
 * Het kaartraster
 * -------------------------------------------------------------------- */

.wa-dash .wa-bibliotheek__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.wa-dash .wa-bibliotheek__raster > [hidden] {
  display: none;
}

.wa-dash .wa-bibliotheek__leeg {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  border: 1px dashed var(--wa-border);
}

.wa-dash .wa-bibliotheek__leeg p + p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--wa-fg-muted);
}

/* ----------------------------------------------------------------------
 * De kaart
 * -------------------------------------------------------------------- */

.wa-dash .wa-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wa-surface);
  border-top: 2px solid var(--wa-primary);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.wa-dash .wa-kaart:hover,
.wa-dash .wa-kaart:focus-within {
  background: var(--wa-surface-hover);
  transform: translateY(-3px);
}

.wa-dash .wa-kaart__beeld {
  position: relative;
  height: 132px;
  overflow: hidden;
  background: rgba(250, 248, 244, 0.05);
}

/* Grijstinten tot je de kaart aanwijst; dat houdt het raster rustig bij
 * honderd verschillende foto's. */
.wa-dash .wa-kaart__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.3s ease;
}

.wa-dash .wa-kaart:hover .wa-kaart__img,
.wa-dash .wa-kaart:focus-within .wa-kaart__img {
  filter: grayscale(0);
}

.wa-dash .wa-kaart__leeg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  color: var(--wa-fg-subtle);
}

.wa-dash .wa-kaart__status {
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px 8px;
  background: rgba(11, 11, 11, 0.85);
  color: var(--wa-fg-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wa-dash .wa-kaart__status--live {
  background: var(--wa-primary);
  color: var(--wa-primary-fg);
}

.wa-dash .wa-kaart__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 16px 12px;
}

.wa-dash .wa-kaart__titel {
  margin: 0;
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 22px;
  line-height: 1;
  color: var(--wa-fg);
}

.wa-dash .wa-kaart__link {
  color: inherit;
  text-decoration: none;
}

/* De hele kaart klikbaar, met maar één link in de tabvolgorde. */
.wa-dash .wa-kaart__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.wa-dash .wa-kaart__meta {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-kaart__voet {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--wa-border);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-fg-subtle);
}

.wa-dash .wa-kaart__actie {
  margin-left: auto;
  font-weight: 700;
  color: var(--wa-primary);
}

/* De focusring hoort om de hele kaart te vallen, niet om de linktekst. */
.wa-dash .wa-kaart__link:focus-visible {
  outline: none;
}

.wa-dash .wa-kaart:has(.wa-kaart__link:focus-visible) {
  outline: 2px solid var(--wa-offwhite);
  outline-offset: 2px;
}

/* ======================================================================
 * Bovenbalk: merk links, teller rechts
 * ==================================================================== */

.wa-dash .wa-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: clamp(20px, 3vw, 52px);
}

.wa-dash .wa-topbar__merk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1;
  color: var(--wa-fg);
}

.wa-dash .wa-topbar__logo {
  height: clamp(18px, 2vw, 26px);
  width: auto;
}

.wa-dash .wa-topbar__punt {
  color: var(--wa-primary);
}

/* De teller staat rechts en zakt op smalle schermen onder het merk door. */
.wa-dash .wa-topbar__teller {
  margin-left: auto;
  flex: none;
  padding-top: 3px;
}

@media (max-width: 560px) {
  .wa-dash .wa-topbar__teller {
    margin-left: 0;
    width: 100%;
  }
}

/* De kop volgt direct op de balk, dus daar geen tweede bovenmarge. */
.wa-dash .wa-topbar + .wa-bibliotheek__kop {
  padding-top: clamp(28px, 4vw, 64px);
}

/* ----------------------------------------------------------------------
 * Responsive bijstellingen
 * -------------------------------------------------------------------- */

/* min() voorkomt dat een kaart breder wordt dan het scherm zodra de
 * container weinig padding heeft. Zonder dit schuift de pagina op een
 * telefoon van 320px horizontaal weg. */
.wa-dash .wa-bibliotheek__raster {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

@media (max-width: 480px) {
  .wa-dash .wa-bibliotheek__filter {
    padding: 12px;
  }

  .wa-dash .wa-bibliotheek__leeg {
    padding: 24px 16px;
  }

  /* Iets lager beeld op een telefoon, anders vult één kaart het scherm. */
  .wa-dash .wa-kaart__beeld {
    height: 108px;
  }
}

/* ======================================================================
 * Vergrendelde hoofdstukken
 *
 * Het skelet bevat geen enkele echte waarde; het is nagemaakte vorm. De
 * waas is dus decoratie en geen beveiliging - de cijfers staan simpelweg
 * niet in de HTML. Zie inc/dashboard/render/lock.php.
 *
 * Er is één koopoproep voor het hele rapport, niet één per hoofdstuk.
 * ==================================================================== */

/* ----------------------------------------------------------------------
 * De korte toelichting in de sectie zelf
 * -------------------------------------------------------------------- */

.wa-dash .wa-slot__note {
  margin-bottom: 20px;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-slot__note .wa-kicker {
  display: inline-block;
  margin-right: 6px;
  font-size: 13px;
}

/* ----------------------------------------------------------------------
 * Het wazige skelet
 * -------------------------------------------------------------------- */

.wa-dash .wa-slot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
  filter: blur(6px);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

.wa-dash .wa-slot__paneel {
  background: var(--wa-surface);
  border-top: 2px solid rgba(251, 39, 60, 0.4);
  padding: 18px 20px 22px;
  min-height: 200px;
}

.wa-dash .wa-slot__balk {
  display: block;
  height: 12px;
  background: rgba(250, 248, 244, 0.14);
}

.wa-dash .wa-slot__balk--kop {
  height: 16px;
  width: 62%;
  margin-bottom: 22px;
  background: rgba(250, 248, 244, 0.22);
}

.wa-dash .wa-slot__regel {
  display: block;
  margin-bottom: 14px;
}

.wa-dash .wa-slot__regel:nth-child(2) .wa-slot__balk {
  width: 92%;
}
.wa-dash .wa-slot__regel:nth-child(3) .wa-slot__balk {
  width: 74%;
}
.wa-dash .wa-slot__regel:nth-child(4) .wa-slot__balk {
  width: 83%;
}
.wa-dash .wa-slot__regel:nth-child(5) .wa-slot__balk {
  width: 58%;
}

/* ----------------------------------------------------------------------
 * De koopoproep
 *
 * Zonder JavaScript staat hij gewoon in het eerste vergrendelde hoofdstuk.
 * Met JavaScript krijgt hij --zwevend en volgt hij de lezer zolang er
 * vergrendelde inhoud in beeld is.
 * -------------------------------------------------------------------- */

.wa-dash.wa-slotcta[hidden] {
  display: none;
}

/* Staat in de voettekst, buiten elke Elementor-container, want alleen daar
 * is er geen stapelcontext meer boven en blijft hij echt bovenop. Net onder
 * de melding, zodat die er weer overheen kan. */
.wa-dash.wa-slotcta {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 4vh, 48px);
  z-index: 2147482000;
  width: min(560px, calc(100vw - 32px));
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s;
}

.wa-dash.wa-slotcta.is-zichtbaar {
  transform: translateX(-50%);
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .wa-dash.wa-slotcta {
    transition: none;
  }
}

/* Volledig dekkend: hij komt over de inhoud heen te liggen en moet daar
 * leesbaar overheen staan, niet doorschijnen. */
.wa-dash .wa-slotcta__kaart {
  padding: clamp(22px, 3vw, 34px);
  background: #131313;
  border-top: 2px solid var(--wa-primary);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.85);
  text-align: center;
}

.wa-dash .wa-slotcta__titel {
  margin: 8px 0 0;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.05;
  color: var(--wa-fg);
}

.wa-dash .wa-slotcta__tekst {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-slotcta__knop,
.wa-dash a.wa-slotcta__knop {
  display: inline-block;
  margin-top: 22px;
  padding: 14px 26px;
  border: 2px solid var(--wa-primary);
  background: var(--wa-primary);
  color: var(--wa-primary-fg);
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transform: skewX(var(--wa-skew));
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.wa-dash .wa-slotcta__knop:hover,
.wa-dash .wa-slotcta__knop:focus-visible {
  background: transparent;
  color: var(--wa-primary);
  font-family: var(--wa-font-kicker) !important;
}

/* ----------------------------------------------------------------------
 * Slotje in de sectienavigatie
 * -------------------------------------------------------------------- */

.wa-dash .wa-nav__link--slot {
  color: var(--wa-fg-subtle);
}

.wa-dash .wa-nav__slot {
  margin-left: auto;
  width: 9px;
  height: 11px;
  flex: none;
  align-self: center;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M4 9V6a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 17 10.5v9A1.5 1.5 0 0 1 15.5 21h-13A1.5 1.5 0 0 1 1 19.5v-9A1.5 1.5 0 0 1 2.5 9H4Zm2 0h6V6a3 3 0 1 0-6 0v3Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M4 9V6a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 17 10.5v9A1.5 1.5 0 0 1 15.5 21h-13A1.5 1.5 0 0 1 1 19.5v-9A1.5 1.5 0 0 1 2.5 9H4Zm2 0h6V6a3 3 0 1 0-6 0v3Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* ----------------------------------------------------------------------
 * De melding
 *
 * Staat in de voettekst, buiten elke Elementor-container. Een vaste
 * positie werkt namelijk alleen als er geen stapelcontext boven zit, en
 * elke container maakt er een - vandaar dat het venster daar belandt en
 * niet in de widget zelf.
 * -------------------------------------------------------------------- */

.wa-dash.wa-slotmelding[hidden] {
  display: none;
}

.wa-dash.wa-slotmelding {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.wa-dash .wa-slotmelding__achter {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.wa-dash .wa-slotmelding__venster {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  padding: clamp(24px, 3vw, 36px);
  background: #131313;
  border-top: 2px solid var(--wa-primary);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.wa-dash .wa-slotmelding__uitleg {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wa-fg-subtle);
}

.wa-dash .wa-slotmelding__sluit {
  margin-top: 24px;
  padding: 12px 22px;
  border: 2px solid var(--wa-border);
  background: transparent;
  color: var(--wa-fg);
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.wa-dash .wa-slotmelding__sluit:hover,
.wa-dash .wa-slotmelding__sluit:focus-visible {
  border-color: var(--wa-primary);
  color: var(--wa-primary);
}

/* Bij afdrukken heeft een slot geen betekenis. */
@media print {
  .wa-dash .wa-slot,
  .wa-dash.wa-slotmelding,
  .wa-dash .wa-slotcta--zwevend {
    display: none;
  }
}

/* ======================================================================
 * Caseblok
 * ==================================================================== */

.wa-dash .wa-case {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  margin-top: clamp(48px, 6vw, 96px);
  overflow: hidden;
  border-top: 2px solid var(--wa-primary);
  background-color: #0b0b0b !important;
}

@media (max-width: 860px) {
  .wa-dash .wa-case {
    grid-template-columns: 1fr;
  }
}

.wa-dash .wa-case--geenbeeld {
  grid-template-columns: 1fr;
}

.wa-dash .wa-case__tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 88px) clamp(24px, 4vw, 64px);
}

.wa-dash .wa-case__titel {
  max-width: 18ch;
  font-size: clamp(32px, 3.9vw, 58px);
  color: var(--wa-fg);
}

.wa-dash .wa-case__intro {
  margin-top: clamp(20px, 2vw, 30px);
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-case__knop {
  align-self: flex-start;
  margin-top: clamp(24px, 2.6vw, 36px);
  padding: 14px 28px;
  border: 2px solid var(--wa-fg);
  color: var(--wa-fg);
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.wa-dash .wa-case__knop:hover,
.wa-dash .wa-case__knop:focus-visible {
  border-color: var(--wa-primary);
  background: var(--wa-primary);
  color: var(--wa-primary-fg);
}

.wa-dash .wa-case__beeld {
  position: relative;
  min-height: 280px;
}

@media (min-width: 861px) {
  .wa-dash .wa-case__beeld {
    min-height: 420px;
  }

  /* De schuine snede uit het ontwerp. */
  .wa-dash .wa-case__beeld img {
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  }
}

.wa-dash .wa-case__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ======================================================================
 * Verwante functies
 *
 * Puur interne links. Bij honderd dashboards is dit wat Google gebruikt om
 * de set te ontdekken en autoriteit te verdelen; zonder deze links staat
 * elk rapport op zichzelf.
 * ==================================================================== */

.wa-dash .wa-verwant {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(20px, 2.5vw, 30px);
  border-top: 2px solid var(--wa-primary);
}

.wa-dash .wa-verwant__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px clamp(12px, 2vw, 30px);
  margin-bottom: 20px;
}

.wa-dash .wa-verwant__titel {
  font-size: clamp(26px, 3.2vw, 40px);
}

.wa-dash .wa-verwant__intro {
  padding-bottom: 4px;
  font-size: 13px;
}

.wa-dash .wa-verwant__kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}

/* De knop trekt hier bewust harder aan dan elders: dit is de enige uitweg
 * naar de rest van de reeks en staat helemaal onderaan de pagina. */
.wa-dash .wa-verwant__alles {
  margin-top: 20px;
  border-color: var(--wa-primary);
  background: rgb(251 39 60 / 15%);
  color: var(--wa-primary);
  text-decoration: none;
}

.wa-dash .wa-verwant__alles:hover,
.wa-dash .wa-verwant__alles:focus-visible {
  background: var(--wa-primary);
  color: var(--wa-primary-fg);
}

/* ======================================================================
 * Fase A — livegang
 * ==================================================================== */

/* ----------------------------------------------------------------------
 * Bronlabels
 *
 * De bron was grijze voetnoottekst en verdween daardoor. Nu een label per
 * bron: publieke bronnen neutraal, eigen onderzoek in het accent. De
 * volledige vermelding zit in het title-attribuut en in wa-sr-only, dus
 * er gaat niets verloren voor schermlezers of zoekmachines.
 * -------------------------------------------------------------------- */

.wa-dash .wa-source {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.wa-dash .wa-bronlabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-left: 2px solid rgba(250, 248, 244, 0.3);
  background: rgba(250, 248, 244, 0.08);
  font-family: var(--wa-font-kicker);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  /* Volle tekstkleur: dit is nu een label en geen voetnoot meer. */
  color: var(--wa-fg);
}

.wa-dash .wa-bronlabel__stip {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.wa-dash .wa-bronlabel--eigen {
  border-left-color: var(--wa-primary);
  background: rgba(251, 39, 60, 0.15);
  color: var(--wa-primary);
}

/* De betrouwbaarheidsblokjes schuiven naar rechts, los van de labels. */
.wa-dash .wa-source__dots {
  margin-left: auto;
}

/* ----------------------------------------------------------------------
 * Kop
 * -------------------------------------------------------------------- */

.wa-dash .wa-head__terug {
  margin-bottom: clamp(18px, 2.5vw, 32px);
}

.wa-dash .wa-head__terugknop {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--wa-border);
  color: var(--wa-fg-muted);
  font-size: 12px;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.wa-dash .wa-head__terugknop:hover,
.wa-dash .wa-head__terugknop:focus-visible {
  border-color: var(--wa-primary);
  color: var(--wa-fg);
}

/* De functienaam houdt het accent; de toevoeging staat kleiner en rustiger
 * zodat de kop informatief wordt zonder zijn kracht te verliezen. */
.wa-dash .wa-head__functie {
  display: block;
}

.wa-dash .wa-head__suffix {
  display: block;
  font-size: 0.42em;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--wa-fg-muted);
}

/* De punt staat binnen de suffix, dus hij staat achter "2026" in plaats van
 * op een eigen regel eronder. */
.wa-dash .wa-head__suffix .wa-dot {
  font-size: 1em;
}

/* ----------------------------------------------------------------------
 * Mobiel
 *
 * De pagina liep horizontaal weg. Drie oorzaken: brede tabellen met een
 * min-width, rasters met een vaste minimumkolom, en de kaart. Alles wat
 * breed moet blijven scrollt nu binnen zijn eigen kader in plaats van de
 * hele pagina mee te trekken.
 * -------------------------------------------------------------------- */

.wa-dash {
  max-width: 100%;
  /* hidden als terugval: clip kent Safari pas vanaf versie 16. Beide staan
   * er, de browser pakt wat hij begrijpt. Dit mag hier omdat .wa-dash binnen
   * de sticky kolommen staat en er dus geen sticky-element in verstopt zit. */
  overflow-x: hidden;
  overflow-x: clip;
}

.wa-dash .wa-data__scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 720px) {
  /* Rasters met een minimumkolom van 280 of 300px passen niet op een
   * telefoon van 320px zodra de container ook nog padding heeft. */
  .wa-dash .wa-grid,
  .wa-dash .wa-cards,
  .wa-dash .wa-personas,
  .wa-dash .wa-slot,
  .wa-dash .wa-verwant__kaarten,
  .wa-dash .wa-bibliotheek__raster {
    grid-template-columns: 1fr;
  }

  .wa-dash .wa-grid > .wa-span-2,
  .wa-dash .wa-grid > .wa-span-full {
    grid-column: 1 / -1;
  }

  /* De kaart en de lijst ernaast onder elkaar. */
  .wa-dash .wa-map {
    grid-template-columns: 1fr;
  }

  /* Panelen minder ruim, anders blijft er weinig over voor de inhoud. */
  .wa-dash .wa-panel {
    padding-inline: 14px;
  }

  /* De salarislegenda met drie kolommen wordt te krap. */
  .wa-dash .wa-salary__legend {
    flex-wrap: wrap;
    gap: 16px;
  }

  .wa-dash .wa-salary__legend > span,
  .wa-dash .wa-salary__legend > span:nth-child(2),
  .wa-dash .wa-salary__legend > span:last-child {
    text-align: left;
  }

  /* Compacte balken: label boven de balk in plaats van ernaast. */
  .wa-dash .wa-bar--inline {
    grid-template-columns: 1fr auto;
  }

  .wa-dash .wa-bar--inline .wa-bar__track {
    grid-column: 1 / -1;
  }

  /* Definitielijsten in één kolom. */
  .wa-dash .wa-pairs {
    grid-template-columns: 1fr;
  }

  .wa-dash .wa-pairs__key {
    padding-bottom: 2px;
    border-bottom: 0;
  }

  /* De zwevende koopoproep mag niet het halve scherm vullen. */
  .wa-dash.wa-slotcta {
    width: calc(100vw - 24px);
  }

  .wa-dash .wa-slotcta__kaart {
    padding: 18px 16px;
  }
}

@media (max-width: 420px) {
  /* Heatmapcellen van 92px maal drie kolommen plus het thema past niet;
   * binnen de eigen scroller houden is beter dan verkleinen tot onleesbaar. */
  .wa-dash .wa-heatmap__cel {
    width: 68px;
    height: 40px;
    font-size: 17px;
  }

  .wa-dash .wa-kaart__titel {
    font-size: 19px;
  }
}

/* ====================================================================
 * Campagnepotentieel
 *
 * Drie stappen die naar één getal toe werken. De hele sectie is een
 * rekenmodel, dus de nadruk ligt op de uitkomst onderaan; alles daarboven
 * is bediening.
 * ================================================================== */

.wa-dash .wa-pot {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* --- Stapkop --- */

.wa-dash .wa-pot__stap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wa-dash .wa-pot__stapkop {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.wa-dash .wa-pot__stapnr {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--wa-primary);
  color: var(--wa-primary-fg);
  font-family: var(--wa-font-kicker);
  font-size: 1.0625rem;
  line-height: 1;
  transform: skewX(var(--wa-skew));
}

.wa-dash .wa-pot__staptitel {
  display: block;
  margin: 0;
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.375rem;
  line-height: 1.05;
  color: var(--wa-fg);
}

.wa-dash .wa-pot__staplead {
  display: block;
  margin: 4px 0 0;
  max-width: 62ch;
  font-size: 0.9375rem;
  color: var(--wa-fg-muted);
}

/* --- Stap 1: werkgebied --- */

.wa-dash .wa-pot__regios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wa-dash .wa-pot__regio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  background: var(--wa-surface);
  border: 1px solid var(--wa-border);
  color: var(--wa-fg-muted);
  font-family: var(--wa-font-sans);
  font-size: 0.875rem;
  line-height: 1.2;
  cursor: pointer;
  transform: skewX(var(--wa-skew));
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.wa-dash .wa-pot__regio > * {
  transform: skewX(calc(var(--wa-skew) * -1));
}

.wa-dash .wa-pot__regio:hover {
  background: var(--wa-surface-hover);
  color: var(--wa-fg);
}

.wa-dash .wa-pot__regio[aria-pressed="true"] {
  background: rgb(251 39 60 / 20%);
  border-color: var(--wa-primary);
  color: var(--wa-primary);
  box-shadow: 0 0 0 1px var(--wa-primary);
}

/* Het vinkje is decoratie naast aria-pressed, geen eigen betekenis. */
.wa-dash .wa-pot__vink {
  flex: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid currentColor;
  position: relative;
}

.wa-dash .wa-pot__regio[aria-pressed="true"] .wa-pot__vink::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: currentColor;
}

/* --- Stap 2: kaarten --- */

.wa-dash .wa-pot__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}

.wa-dash .wa-pot__kpi {
  padding: 16px 18px;
  background: var(--wa-surface);
  border: 1px solid var(--wa-border);
}

.wa-dash .wa-pot__kpi--accent {
  background: rgb(251 39 60 / 10%);
  border-color: var(--wa-primary);
}

.wa-dash .wa-pot__kpilabel {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}

.wa-dash .wa-pot__kpi--accent .wa-pot__kpilabel {
  color: var(--wa-primary);
}

.wa-dash .wa-pot__kpiwaarde {
  margin: 8px 0 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.wa-dash .wa-pot__kpiwaarde .wa-display {
  font-size: clamp(1.75rem, 4.4vw, 2.5rem);
}

.wa-dash .wa-pot__kpisub {
  font-family: var(--wa-font-kicker);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--wa-fg-subtle);
  white-space: nowrap;
}

.wa-dash .wa-pot__kpi--accent .wa-pot__kpisub {
  color: var(--wa-primary);
}

/* --- Wisseltermijn --- */

.wa-dash .wa-pot__termijnkop {
  margin: 4px 0 0;
}

.wa-dash .wa-pot__termijnen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wa-dash .wa-pot__termijnknop {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(9rem, 1fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--wa-fg-muted);
  font-family: var(--wa-font-sans);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.wa-dash .wa-pot__termijnknop {
  border-color: rgb(250 248 244 / 12%);
  background: rgb(250 248 244 / 3%);
}

.wa-dash .wa-pot__termijnknop:hover {
  border-color: rgb(251 39 60 / 40%);
  background: rgb(251 39 60 / 10%);
}

.wa-dash .wa-pot__termijnknop.is-gekozen {
  background: rgb(251 39 60 / 11%);
  border-color: var(--wa-primary);
  color: var(--wa-fg);
}

.wa-dash .wa-pot__radio {
  flex: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--wa-border);
  border-radius: 50%;
  position: relative;
}

.wa-dash .wa-pot__termijnknop.is-gekozen .wa-pot__radio {
  border-color: var(--wa-primary);
}

.wa-dash .wa-pot__termijnknop.is-gekozen .wa-pot__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--wa-primary);
}

.wa-dash .wa-pot__termijnlabel {
  white-space: nowrap;
}

.wa-dash .wa-pot__balk {
  display: block;
  height: 9px;
  background: var(--wa-muted);
}

.wa-dash .wa-pot__balkvul {
  display: block;
  height: 100%;
  background: rgb(250 248 244 / 35%);
  transition: width 0.25s ease;
}

/* Wie binnen een jaar beweegt is het deel waar een campagne op mikt; dat
 * krijgt het accent, de langere termijnen blijven neutraal. */
.wa-dash .wa-pot__balkvul--jaar {
  background: var(--wa-primary);
}

.wa-dash .wa-pot__termijncijfer {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wa-dash .wa-pot__termijnpct {
  font-family: var(--wa-font-kicker);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--wa-fg-subtle);
}

/* --- Stap 3: trechter --- */

.wa-dash .wa-pot__trechter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 12px;
}

.wa-dash .wa-pot__stapvak {
  padding: 16px 18px;
  background: var(--wa-surface);
  border: 1px solid var(--wa-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.wa-dash .wa-pot__stapwaarde {
  font-size: clamp(1.625rem, 4vw, 2.25rem);
}

.wa-dash .wa-pot__staplabel {
  font-size: 0.8125rem;
}

/* --- De uitkomst --- */

.wa-dash .wa-pot__resultaat {
  margin-top: 16px;
  padding: clamp(20px, 3vw, 26px);
  border: 1px solid rgb(251 39 60 / 40%);
  background: rgb(251 39 60 / 8%);
  text-align: center;
}

.wa-dash .wa-pot__resultaat .wa-kicker--primary {
  color: var(--wa-primary);
}

.wa-dash .wa-pot__uitkomst {
  margin: 12px 0 0;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  color: var(--wa-primary) !important;
  transform: none;
  filter: none;
}

.wa-dash .wa-pot__uitkomstlabel {
  margin: 12px 0 0;
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(15px, 2vw, 19px);
  color: var(--wa-primary);
}

.wa-dash .wa-pot__samenvatting {
  margin: 16px auto 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.45;
  color: rgb(250 248 244 / 85%);
}

.wa-dash .wa-pot__rekenwijze {
  margin: 16px auto 0;
  padding-top: 12px;
  border-top: 1px solid rgb(251 39 60 / 20%);
  max-width: 68ch;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--wa-fg-subtle);
}

/* ====================================================================
 * De gratis variant
 *
 * Het echte doelgroepcijfer - dat is openbaar - plus een preview waarin
 * geen enkel getal staat. De vormen zijn leeg; er valt niets af te lezen.
 * ================================================================== */

.wa-dash .wa-pot__haak {
  padding: clamp(16px, 2.5vw, 20px);
  background: rgb(251 39 60 / 10%);
  border-left: 2px solid var(--wa-primary);
}

.wa-dash .wa-pot__haakcijfer {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}

.wa-dash .wa-pot__haakcijfer .wa-display {
  font-size: clamp(2.75rem, 9vw, 4.5rem);
}

.wa-dash .wa-pot__haaklabel {
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--wa-primary);
}

.wa-dash .wa-pot__haaktekst {
  margin: 8px 0 0;
  font-size: 14px;
  color: rgb(250 248 244 / 80%);
}

.wa-dash .wa-pot__belofte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wa-dash .wa-pot__interactief strong,
.wa-dash .wa-pot__beloftregel strong {
  color: var(--wa-fg);
  font-weight: 700;
}

.wa-dash .wa-pot__beloftregel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-left: 2px solid var(--wa-border);
  background: rgb(250 248 244 / 5%);
  font-size: 14px;
  line-height: 1.35;
  color: var(--wa-fg);
}

.wa-dash .wa-pot__beloftnr {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(250 248 244 / 25%);
  color: rgb(250 248 244 / 70%);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.wa-dash .wa-pot__interactief {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-pot__interactief strong {
  color: var(--wa-fg);
}

/* --- De preview --- */

.wa-dash .wa-pot__preview {
  position: relative;
  padding: clamp(18px, 2.5vw, 24px);
  background: rgb(251 39 60 / 5%);
  border: 1px solid rgb(251 39 60 / 30%);
}

.wa-dash .wa-pot__previewkop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.wa-dash .wa-pot__previewkop .wa-kicker {
  display: block;
}

.wa-dash .wa-pot__previewsub {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--wa-fg-subtle);
}

.wa-dash .wa-pot__badge {
  flex: none;
  padding: 5px 11px;
  background: var(--wa-muted);
  border: 1px solid var(--wa-border);
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  color: var(--wa-fg-muted);
}

/* Hieronder staat alleen vorm. De waas is dus geen slot maar een signaal:
 * het echte rekenmodel is server-side nooit gerenderd. */
.wa-dash .wa-pot__previewvorm {
  display: flex;
  flex-direction: column;
  gap: 18px;
  filter: blur(3px);
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
}

.wa-dash .wa-pot__previewbalken {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wa-dash .wa-pot__previewbalken li {
  display: grid;
  grid-template-columns: minmax(90px, 120px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid rgb(250 248 244 / 12%);
  background: rgb(250 248 244 / 3%);
}

.wa-dash .wa-pot__previewlabel,
.wa-dash .wa-pot__previewgetal {
  width: 2.5rem;
  height: 11px;
  background: rgb(250 248 244 / 20%);
}

.wa-dash .wa-pot__previewbalk {
  display: block;
  height: 16px;
  background: rgb(250 248 244 / 7%);
}

.wa-dash .wa-pot__previewbalk > span {
  display: block;
  height: 100%;
  background: var(--wa-primary);
  opacity: 0.7;
}

.wa-dash .wa-pot__previewtrechter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
  gap: 12px;
}

.wa-dash .wa-pot__previewtrechter > div {
  padding: 14px 12px;
  background: var(--wa-surface);
  border: 1px solid var(--wa-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.wa-dash .wa-pot__previewcijfer {
  height: 30px;
  width: 60%;
  background: rgb(250 248 244 / 16%);
}

.wa-dash .wa-pot__previewuitkomst {
  padding: 18px;
  border: 1px solid rgb(251 39 60 / 30%);
  background: rgb(251 39 60 / 6%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.wa-dash .wa-pot__previewuitkomst .wa-kicker {
  color: var(--wa-primary);
}

.wa-dash .wa-pot__previewgroot {
  height: 52px;
  width: 40%;
  background: rgb(251 39 60 / 45%);
}

/* --- Smal scherm --- */

@media (max-width: 720px) {
  .wa-dash .wa-pot__kpis,
  .wa-dash .wa-pot__trechter,
  .wa-dash .wa-pot__previewtrechter {
    grid-template-columns: 1fr;
  }

  /* Label, balk en cijfer passen niet naast elkaar op een regel; de balk
   * gaat eronder over de volle breedte. */
  .wa-dash .wa-pot__termijnknop {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 8px;
  }

  .wa-dash .wa-pot__balk {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Op 320px past "Binnen 6 maanden" niet altijd op een regel. */
  .wa-dash .wa-pot__termijnlabel {
    white-space: normal;
  }

  .wa-dash .wa-pot__resultaat {
    padding: 22px 18px;
  }

  .wa-dash .wa-pot__haak {
    padding: 20px 18px;
  }

  .wa-dash .wa-pot__previewbalken li {
    grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-dash .wa-pot__balkvul {
    transition: none;
  }
}

/* ====================================================================
 * Vergrendeld kerncijfer
 *
 * Dezelfde kaartvorm als een gewoon kerncijfer, met een wazig cijfer waar
 * de waarde hoort te staan. Er staat letterlijk "0.000" in de HTML: het
 * echte getal komt de server niet af. De waas is dus een signaal, geen
 * slot - zie inc/dashboard/render/lock.php.
 * ================================================================== */

.wa-dash .wa-kpi--slot {
  position: relative;
  overflow: hidden;
}

.wa-dash .wa-kpi__slotkop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.wa-dash .wa-kpi__slotkop .wa-kicker {
  color: var(--wa-fg-muted);
}

.wa-dash .wa-kpi__slotbadge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid rgb(251 39 60 / 50%);
  background: rgb(251 39 60 / 15%);
  color: var(--wa-primary);
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  line-height: 1;
}

.wa-dash .wa-kpi__slotcijfer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  user-select: none;
}

.wa-dash .wa-kpi__slotcijfer .wa-kpi__value {
  filter: blur(9px);
}

.wa-dash .wa-kpi__slotcijfer .wa-kpi__sub {
  filter: blur(6px);
}

.wa-dash .wa-kpi__teaser {
  margin-top: auto;
  padding-top: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-kpi__slotvoet {
  padding-top: 10px;
  border-top: 1px solid var(--wa-border);
}

.wa-dash .wa-kpi__slotknop {
  border-color: var(--wa-primary);
  background: rgb(251 39 60 / 15%);
  color: var(--wa-primary);
  font-size: 11px;
  min-height: 30px;
  padding: 5px 12px;
  text-decoration: none;
}

.wa-dash .wa-kpi__slotknop:hover,
.wa-dash .wa-kpi__slotknop:focus-visible {
  background: var(--wa-primary);
  color: var(--wa-primary-fg);
}

/* Een waas is geen vervanging voor betekenis. Wie beweging of filters
 * uitzet krijgt een egaal vlak in plaats van een leesbaar ogende maar
 * onleesbare cijferreeks. */
@media (prefers-reduced-transparency: reduce) {
  .wa-dash .wa-kpi__slotcijfer .wa-kpi__value,
  .wa-dash .wa-kpi__slotcijfer .wa-kpi__sub {
    filter: none;
    color: transparent;
    background: var(--wa-muted);
  }
}

/* Meerkosten: klein en rood, op dezelfde regel links van het totaal. Zo
 * lees je bij het scannen meteen wat een keuze extra kost, zonder het van
 * het totaal te hoeven aftrekken. */
.wa-dash .wa-kosten__cijfers {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: none;
}

.wa-dash .wa-kosten__meer {
  font-family: var(--wa-font-display);
  font-size: 14px;
  line-height: 1;
  color: var(--wa-primary);
  white-space: nowrap;
}

/* Functiefamilie en branche leiden naar het overzicht met dat filter aan.
 * Onderstreept, want een link die er niet als link uitziet vindt niemand. */
.wa-dash .wa-head__fact-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--wa-primary);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.wa-dash .wa-head__fact-link:hover,
.wa-dash .wa-head__fact-link:focus-visible {
  color: var(--wa-primary);
}

/* ====================================================================
 * Voettekst: eigendom en gebruiksvoorwaarden
 *
 * Klein en rustig, maar wel leesbaar. Bewust niet op --wa-fg-subtle of
 * lager: dit is de tekst die uitlegt wat een koper met het rapport mag,
 * en die moet je kunnen lezen.
 * ================================================================== */

.wa-dash .wa-voet {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--wa-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wa-dash .wa-voet__merk {
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  color: var(--wa-fg);
}

.wa-dash .wa-voet__tekst {
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-voet__links {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.wa-dash .wa-voet__links a {
  font-size: 12.5px;
  color: var(--wa-fg-muted);
  text-decoration: underline;
  text-decoration-color: var(--wa-border);
  text-underline-offset: 3px;
}

.wa-dash .wa-voet__links a:hover,
.wa-dash .wa-voet__links a:focus-visible {
  color: var(--wa-primary);
  text-decoration-color: var(--wa-primary);
}

.wa-dash .wa-voet__slot {
  margin-top: 6px;
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--wa-fg-subtle);
}

/* ====================================================================
 * Verkoopblok voor de kwantitatieve dashboards
 *
 * Het enige rode vlak in de inhoudskolom, want het is ook het enige punt
 * waarop de pagina iets van de bezoeker vraagt.
 * ================================================================== */

.wa-dash .wa-upgrade {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 40px);
  background: var(--wa-primary);
  color: var(--wa-primary-fg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wa-dash .wa-upgrade .wa-kicker--primary {
  color: rgb(255 255 255 / 85%);
}

.wa-dash .wa-upgrade__titel {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--wa-primary-fg);
}

.wa-dash .wa-upgrade__tekst {
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgb(255 255 255 / 92%);
}

.wa-dash .wa-upgrade__punten {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px 28px;
}

.wa-dash .wa-upgrade__punten li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: rgb(255 255 255 / 92%);
}

/* Het rode blokje is elders het accent; op een rood vlak moet het wit. */
.wa-dash .wa-upgrade__punten .wa-bullet {
  margin-top: 0.5em;
  background: var(--wa-primary-fg);
}

.wa-dash .wa-upgrade__actie {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / 28%);
}

.wa-dash .wa-upgrade__knop {
  border-color: var(--wa-primary-fg);
  background: var(--wa-primary-fg);
  color: var(--wa-primary);
  font-size: 15px;
  min-height: 44px;
  padding: 10px 22px;
  text-decoration: none;
}

.wa-dash .wa-upgrade__knop:hover,
.wa-dash .wa-upgrade__knop:focus-visible {
  background: transparent;
  color: var(--wa-primary-fg);
}

.wa-dash .wa-upgrade__voetnoot {
  margin-top: 10px;
  max-width: 52ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgb(255 255 255 / 82%);
}

/* ====================================================================
 * Vormgetrouwe preview van een vergrendeld hoofdstuk
 *
 * De echte blokvormen met verzonnen cijfers. De waas is een signaal, geen
 * slot: er staat niets in deze HTML dat uit de payload komt. Zie
 * inc/dashboard/render/slot-preview.php.
 * ================================================================== */

.wa-dash .wa-slotpreview {
  position: relative;
}

.wa-dash .wa-slotpreview__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.wa-dash .wa-slotpreview__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgb(251 39 60 / 50%);
  background: rgb(251 39 60 / 15%);
  color: var(--wa-primary);
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  line-height: 1.2;
}

.wa-dash .wa-slotpreview__uitleg {
  font-size: 13px;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-slotpreview__vorm {
  filter: blur(5px);
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}

/* Niets in de preview mag bereikbaar zijn met de tab-toets: het zijn
 * verzonnen cijfers achter een waas, en een focusring die daar landt is
 * puur verwarrend. pointer-events dekt de muis, dit de rest. */
.wa-dash .wa-slotpreview__vorm a,
.wa-dash .wa-slotpreview__vorm button,
.wa-dash .wa-slotpreview__vorm input {
  pointer-events: none;
}

/* Wie beweging of doorzichtigheid uitzet krijgt egale vlakken in plaats
 * van een waas die op een vieze bril lijkt. */
@media (prefers-reduced-transparency: reduce) {
  .wa-dash .wa-slotpreview__vorm {
    filter: none;
    opacity: 1;
    visibility: hidden;
    position: relative;
  }
}

/* Zelfbediening voor wie zijn eenmalige link kwijt is. Klein, maar hij moet
 * er staan: zonder deze uitweg is een verbruikte link een doodlopende weg. */
.wa-dash .wa-slotcta__hulp {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  color: rgba(250, 248, 244, 0.62);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wa-dash .wa-slotcta__hulp:hover,
.wa-dash .wa-slotcta__hulp:focus-visible {
  color: var(--wa-primary);
  font-family: var(--wa-font-sans) !important;
  font-size: 12.5px !important;
}

/* Melding die alleen een beheerder ziet, binnen een vergrendelde sectie. */
.wa-dash .wa-slot__beheer {
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--wa-primary);
  background: rgb(251 39 60 / 10%);
  font-size: 13px;
  line-height: 1.5;
  color: var(--wa-fg-muted);
}

.wa-dash .wa-slot__beheer strong {
  color: var(--wa-primary);
}

/* Tussenkop binnen een sectie, onder de h2 van de sectiekop. Gebruikt waar
 * een hoofdstuk uit twee onderdelen bestaat - zoals campagneadvies, dat
 * eerst het rekenmodel toont en daarna de aandachtspunten. */
.wa-dash .wa-subkop {
  margin: clamp(28px, 3.5vw, 44px) 0 14px;
  font-family: var(--wa-font-kicker);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.1;
  color: var(--wa-fg);
}

/* De verkoopregel boven het gratis campagnepotentieel. */
.wa-dash .wa-pot__pitch {
  margin: 0;
  font-family: var(--wa-font-display);
  text-transform: uppercase;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--wa-fg);
}

/* Melding die alleen een beheerder ziet, bij de verkoopkaart. */
.wa-dash .wa-verkoop__beheer {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--wa-primary);
  background: rgb(251 39 60 / 10%);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wa-fg-muted);
}

/* De peildatum achter de bronlabels. Neutraal, geen stip: het is geen bron
 * maar het moment waarop die bron gemeten is. */
.wa-dash .wa-bronlabel--periode {
  border-left-color: rgb(250 248 244 / 18%);
  background: transparent;
  color: var(--wa-fg-subtle);
}