/* =====================================================
   Eén contentbreedte voor de hele pagina.
   De secties hadden er drie — 1200 voor de tekstblokken, 1560 voor de radar en
   1760 voor het pijlerbord — waardoor de linkerrand tijdens het scrollen twee
   keer versprong. Gelijkgetrokken op 1560px, dezelfde breedte als het portaal
   eromheen, zodat de iframe ook met de pagina eronder uitlijnt.
   ===================================================== */
.wrap { max-width: min(1560px, 100%); }

/* =====================================================
   RPO Radar — VNG huisstijl, editorial layout
   Bovenop rpo.css (gebruikt --navy, --azure, --orange,
   --ink, --paper-2, --line, --sans, --shadow-*).
   ===================================================== */

:root {
  /* Thema-accenten uit de twaalf officiele accentkleuren. De radar is een
     datavisualisatie en daar staat de handleiding die uitdrukkelijk toe.
     Gespreid over de kleurencirkel en niet in de volgorde van de thema's:
     stippen die naast elkaar vallen moeten te scheiden zijn. */
  --p-fin: #0078bc;       /* VNG Blauw */
  --p-soc: #f7ad00;       /* VNG Geel */
  --p-cyb: #83589e;       /* VNG Paars */
  --p-fra: #e63b44;       /* VNG Rood */
  --p-vas: #00aeae;       /* VNG Turkoois */
  --p-irm: #ae4b96;       /* VNG Paarsroze */
  --p-ver: #ec5e00;       /* VNG Oranje */
  --p-mob: #7cb817;       /* VNG Grasgroen */
  --p-gro: #e12988;       /* VNG Roze */
  --p-dee: #00a253;       /* VNG Hard groen */

  /* De typografische schaal uit de handleiding: kleine terts, ratio 1.2.
     Dezelfde namen en waarden als portaal/css/basis.css, zodat de iframe en
     het portaal eromheen dezelfde stappen zetten. Er stonden hier zo'n
     vijfentwintig losse maten in rem en clamp; elke font-size in dit bestand
     wijst nu naar een van deze stappen. Niets onder de 11px. */
  --t-label: 11px;
  --t-meta: 13px;
  --t-basis: 15px;
  --t-lead: 18px;
  --t-kaart: 22px;
  --t-sectie: 26px;
  --t-pagina: 37px;
  --t-hero: 54px;
  --t-reus: 93px;         /* alleen het woordmerk buiten de iframe */

  /* Voor het deelmenu (portaal/css/deelmenu.css), dat hier zonder basis.css
     draait. Dezelfde namen en waarden als portaal/css/basis.css;
     tests/test_huisstijl.py bewaakt dat. */
  --inkt: #143462;
  --inkt-zwak: #4A5F80;
  --lijn: #d0d6e0;
  --grond: #e8ebef;
  --vlak: #ffffff;
  --hoek-klein: 8px;
  --vorm-klein: calc(var(--hoek-klein) * 2) 0 calc(var(--hoek-klein) * 2) 0;
  --font: "Figtree", Arial, Helvetica, sans-serif;
  --sch: 0 1px 2px rgba(20,52,98,.05), 0 10px 30px rgba(20,52,98,.06);
}

/* rpo.css zet de body op 17px en de eyebrow op 0.72rem: allebei buiten de
   schaal, en de ondertitel in de navigatie zat er zelfs onder. rpo.css wordt
   ook door de andere conceptpagina's gebruikt, dus de correctie staat hier en
   geldt alleen voor de radar. */
body { font-size: var(--t-basis); }
.eyebrow { font-size: var(--t-meta); }
.brand .sub { font-size: var(--t-label); }      /* stond op 0.6rem, 9.6px */

/* -----------------------------
   Masthead — boven de fold
   ----------------------------- */
.rpo-masthead {
  background:
    var(--paper);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 2px solid var(--navy);
  position: relative;
}
.rpo-masthead .wrap {
  /* Erft de paginabreedte; een eigen --maxw liet deze sectie 360px smaller staan
     dan de rest, waardoor de linkerrand versprong. */
  max-width: min(1560px, 100%);
}
.rpo-wordmark {
  font-family: var(--sans);
  font-size: clamp(var(--t-hero), 11vw, var(--t-reus));
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--navy);
  margin: 1.4rem 0 1.6rem;
}
.rpo-sub {
  font-family: var(--sans);
  font-size: clamp(var(--t-lead), 2vw, var(--t-kaart));
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  max-width: 52ch;
  margin-bottom: 2.2rem;
}
.rpo-sub .serif-it {
  color: var(--ink);
  font-weight: 700;
}
.rpo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #fff;
  border: 1px solid var(--line);
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.meta-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(0, 161, 229, 0.25);
  animation: rpo-pulse 2s ease-in-out infinite;
}
@keyframes rpo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.78); }
}

/* RPO logo — overschrijft de eerdere placeholder-svg-stijl uit rpo.css */
.brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}
.masthead-logo {
  display: block;
  width: clamp(80px, 11vw, 140px);
  height: auto;
  margin: 0 0 1rem;
}

/* -----------------------------
   Radar hero (live visualisatie)
   ----------------------------- */
.radar-hero {
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.radar-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    none;
  pointer-events: none;
}
/* Even breed als het pijlerbord eronder, anders staat de radar onnodig klein
   in het midden van een breed scherm. */
.radar-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
}
.radar-stage {
  margin: 0;
  position: relative;
}
.radar-svg {
  width: 100%;
  max-width: 780px;
  /* Breder dan hoog: de labels links en rechts ("GRONDEXPL.", "MOBILITEIT")
     staan buiten de schijf en vielen buiten het vlak. Om dezelfde reden geen
     border-radius meer; die knipte alles buiten de cirkel weg. */
  aspect-ratio: 680 / 584;
  display: block;
  margin: 0 auto;
  /* Geen schaduw: het kadervlak in de huisstijl is vlak. */
  background: transparent;
}
.radar-caption {
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  /* Linkslijnend, zoals alle tekst in de huisstijl. */
  text-align: left;
  margin-top: 1.4rem;
  /* Onder een radar van bijna 800px stond een kolommetje van 36ch verloren. */
  max-width: 62ch;
  line-height: 1.4;
}
.radar-spokes line {
  stroke: #fff;
  stroke-opacity: 0.12;
  stroke-width: 0.6;
}
.radar-labels text {
  font-family: var(--sans);
  /* De labels stonden half op de donkere schijf en half op de lichte pagina, en
     moesten daarom licht, klein en met een halo. Nu ze er volledig buiten staan
     kunnen ze gewoon donker, groot en zwaar — leesbaar zonder trucs. */
  /* In SVG-eenheden, dus dit schaalt met de tekening mee. Op 780px breed is
     15 ruim 17px op het scherm. */
  font-size: var(--t-basis);
  font-weight: 800;
  letter-spacing: 0.09em;
  fill: var(--navy);
}
/* Op een telefoon is de tekening zo'n 350px breed, ruwweg de helft van het
   vlak, en werd 15 daarmee 7px. 22 eenheden komt uit rond de 11px. Het vlak
   groeit in prikbord.js mee zodat de bredere labels in beeld blijven. */
@media (max-width: 600px) {
  .radar-labels text { font-size: var(--t-kaart); letter-spacing: 0.03em; }
}
/* sweep gets a native SMIL <animateTransform rotate "0 0 0" → "360 0 0"> in
   the SVG — rotates around viewBox origin (0,0), which is the radar centre.
   CSS-only rotation on an SVG <g> uses the bounding-box origin and ends up
   off-centre, so we avoid it here. */
@media (prefers-reduced-motion: reduce) {
  .radar-sweep animateTransform { display: none; }
  .radar-sweep { opacity: 0.5; }
}

.radar-dot {
  cursor: pointer;
  transition: r 0.18s ease, opacity 0.18s ease;
}
.radar-dot:hover { r: 8; }
.radar-dot.p-fin { fill: var(--p-fin); }
.radar-dot.p-soc { fill: var(--p-soc); }
.radar-dot.p-cyb { fill: var(--p-cyb); }
.radar-dot.p-fra { fill: var(--p-fra); }
.radar-dot.p-vas { fill: var(--p-vas); }
.radar-dot.p-gro { fill: var(--p-gro); }
.radar-dot.p-irm { fill: var(--p-irm); }
.radar-dot.p-ver { fill: var(--p-ver); }
.radar-dot.p-mob { fill: var(--p-mob); }
.radar-dot.p-dee { fill: var(--p-dee); }

/* Scherpe stippen: de wazige, pulserende gloed hoorde bij de oude, bijna
   zwarte radar. "Onderdeel van een trend" is nu een witte rand om de stip,
   dezelfde betekenis zonder blur. De accentkleuren blijven, want dit is de
   datavisualisatie waar de handleiding ze uitdrukkelijk toestaat. */
.radar-dot.is-trending {
  stroke: #fff;
  stroke-width: 1.6;
}

/* legend-hover highlight */
.radar-svg.hl-fin .radar-dot:not(.p-fin) { opacity: 0.18; }
.radar-svg.hl-soc .radar-dot:not(.p-soc) { opacity: 0.18; }
.radar-svg.hl-cyb .radar-dot:not(.p-cyb) { opacity: 0.18; }
.radar-svg.hl-fra .radar-dot:not(.p-fra) { opacity: 0.18; }
.radar-svg.hl-vas .radar-dot:not(.p-vas) { opacity: 0.18; }
.radar-svg.hl-irm .radar-dot:not(.p-irm) { opacity: 0.18; }
.radar-svg.hl-ver .radar-dot:not(.p-ver) { opacity: 0.18; }
.radar-svg.hl-mob .radar-dot:not(.p-mob) { opacity: 0.18; }
.radar-svg.hl-gro .radar-dot:not(.p-gro) { opacity: 0.18; }
.radar-svg.hl-dee .radar-dot:not(.p-dee) { opacity: 0.18; }
.radar-svg.hl-trending          .radar-dot:not(.is-trending)         { opacity: 0.18; }

.radar-meta { padding: 0.5rem 0; }
.radar-title {
  font-family: var(--sans);
  font-size: clamp(var(--t-sectie), 3.4vw, var(--t-pagina));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0.75rem 0 1rem;
  line-height: 1.05;
}
.radar-blurb {
  font-family: var(--sans);
  font-size: var(--t-basis);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 1.8rem;
  max-width: 40ch;
}
.radar-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.55rem 1rem;
  font-family: var(--sans);
  font-size: var(--t-meta);
  color: var(--ink);
}
.radar-legend li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: default;
  user-select: none;
  transition: opacity 0.15s ease;
}
.radar-legend li:not(.legend-rule):hover { opacity: 0.6; }
.legend-rule {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--line);
  margin: 0.4rem 0 0;
}
.legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-dot[data-p="fin"] { background: var(--p-fin); }
.legend-dot[data-p="soc"] { background: var(--p-soc); }
.legend-dot[data-p="cyb"] { background: var(--p-cyb); }
.legend-dot[data-p="fra"] { background: var(--p-fra); }
.legend-dot[data-p="vas"] { background: var(--p-vas); }
.legend-dot[data-p="irm"] { background: var(--p-irm); }
.legend-dot[data-p="ver"] { background: var(--p-ver); }
.legend-dot[data-p="mob"] { background: var(--p-mob); }
.legend-dot[data-p="gro"] { background: var(--p-gro); }
.legend-dot[data-p="dee"] { background: var(--p-dee); }
/* Zoals de stip op de schijf: donkerblauw met een witte rand, en daaromheen
   een donkerblauwe lijn zodat de witte rand op de lichte pagina te zien is. */
.legend-dot.is-trending {
  background: var(--navy);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--navy);
  /* De rand valt buiten het bolletje; zonder marge stak hij links uit. */
  margin: 0 3px;
}

@media (max-width: 900px) {
  .radar-hero-grid { grid-template-columns: 1fr; }
  .radar-stage { order: -1; }
  /* Onder de radar bleef de tekst gecentreerd, met labels die midden op de
     regel afbraken. De huisstijl lijnt alles links uit. */
}

/* -----------------------------
   Het overzicht onder de radar
   ----------------------------- */
/* Eén lijst in plaats van tien kaarten. Tekst alleen in donkerblauw of wit;
   verschil zit in gewicht en maat, niet in een grijstint. Accentkleuren
   alleen als het bolletje dat naar de legenda verwijst. */
.overzicht {
  background: var(--vlak);
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2.5rem, 5vw, 4rem);
}
.ov-kop { margin-bottom: 1.25rem; max-width: 72ch; }
.ov-titel {
  font-family: var(--sans);
  font-size: clamp(var(--t-kaart), 2.6vw, var(--t-sectie));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 0.35rem;
}
.ov-stand {
  font-family: var(--sans);
  font-size: var(--t-basis);
  line-height: 1.5;
  color: var(--navy);
  margin: 0;
}
.ov-stand button,
.rf-stand button {
  font: inherit;
  font-weight: 700;
  background: none;
  border: 0;
  padding: 0 0.25rem;
  margin-left: 0.25rem;
  min-height: 44px;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--azure);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* De thema-index: tien tegels, vijf naast elkaar op een breed scherm. Een tegel
   is een knop die de lijst, de trends én de radar op dat thema zet. */
.tegels {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: 0.6rem;
}
.tegels li { display: flex; min-width: 0; }
.tegel {
  width: 100%;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.9rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 16px 0 16px 0;
  background: var(--vlak);
  color: var(--navy);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tegel:hover { border-color: var(--azure); }
.tegel:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.tegel.on { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Een leeg thema: gedempt vlak, geen knop om op te drukken. */
.tegel.is-leeg { background: var(--grond); border-style: dashed; }
.tegel:disabled { cursor: default; }
.tegel:disabled:hover { border-color: var(--line); }
.tegel-kop { display: flex; align-items: center; gap: 0.5rem; width: 100%; }
.tegel-naam {
  flex: 1;
  min-width: 0;
  font-size: var(--t-meta);
  font-weight: 700;
  line-height: 1.25;
}
.tegel-n {
  font-size: var(--t-kaart);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tegel.is-leeg .tegel-n { font-weight: 600; }
.tegel-trend {
  font-size: var(--t-meta);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tegel.on .legend-dot { box-shadow: 0 0 0 2px #fff; }

.ov-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* De lijst. Een rij is één signaal; de hele rij is klikbaar via de titel, de
   deelknop ligt erboven. */
.rijen {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--navy);
}
.rij {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 1rem;
  padding: 0.95rem 0 1rem;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.rij-tekst { min-width: 0; }
.rij-titel {
  font-family: var(--sans);
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 0.3rem;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.rij-titel a { color: var(--navy); text-decoration: none; }
.rij-titel a::after { content: ""; position: absolute; inset: 0; }
.rij:hover .rij-titel a,
.rij-titel a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--azure);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.rij-titel a:focus-visible { outline: none; }
.rij:has(.rij-titel a:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }
.rij-soort {
  display: inline-block;
  vertical-align: 2px;
  margin-right: 0.5rem;
  padding: 3px 8px;
  font-size: var(--t-label);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--navy);
  background: var(--grond);
  border-radius: 8px 0 8px 0;
}
.rij-waarom {
  font-family: var(--sans);
  font-size: var(--t-basis);
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 0.4rem;
  max-width: 78ch;
}
.rij-waarom b { font-weight: 800; margin-right: 0.35rem; }
.rij-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.5rem;
  font-family: var(--sans);
  font-size: var(--t-meta);
  color: var(--navy);
  margin: 0;
}
.rij-meta > span + span::before { content: "·"; margin-right: 0.5rem; }
.rij-thema { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.rij-thema .legend-dot,
.tegel .legend-dot,
.trend-open .legend-dot { width: 9px; height: 9px; }
.rij > .deel { position: relative; z-index: 1; margin: -8px -10px 0 0; }
.rij-leeg {
  padding: 1.25rem 0;
  font-family: var(--sans);
  font-size: var(--t-basis);
  color: var(--navy);
}
.meer {
  margin-top: 1.25rem;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--navy);
  border-radius: 16px 0 16px 0;
  background: var(--vlak);
  color: var(--navy);
  font-family: var(--sans);
  font-size: var(--t-basis);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.meer:hover { background: var(--navy); color: #fff; }
.meer:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* De trends: een vlak in de VNG-vorm naast de lijst, elke trend een regel die
   openklapt naar zijn samenvatting en signalen. */
.ov-trends {
  background: var(--grond);
  border-radius: 32px 0 32px 0;
  padding: 1.25rem 1.25rem 1.4rem;
  min-width: 0;
}
.ov-sub {
  font-family: var(--sans);
  font-size: var(--t-lead);
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.2rem;
}
.ov-uitleg {
  font-family: var(--sans);
  font-size: var(--t-meta);
  line-height: 1.45;
  color: var(--navy);
  margin: 0 0 0.6rem;
}
.trends { list-style: none; margin: 0; padding: 0; }
.trend { border-top: 1px solid var(--line); }
.trend-kop { display: flex; align-items: flex-start; }
.trend-open {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0;
  background: none;
  border: 0;
  font-family: var(--sans);
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.trend-open .legend-dot { margin-top: 0.4rem; }
.trend-open::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0.45rem 0.35rem 0 auto;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.trend-open[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 0.7rem; }
.trend-open:hover .trend-label { text-decoration: underline; text-underline-offset: 3px; }
.trend-open:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.trend-tekst { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.trend-label { font-size: var(--t-basis); font-weight: 700; line-height: 1.3; }
.trend-meta { font-size: var(--t-meta); line-height: 1.35; }
.trend-kop .deel { margin-right: -8px; }
.trend-inhoud { padding: 0 0 0.9rem 1.2rem; }
.trend-summary {
  font-family: var(--sans);
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
/* De lijn is lijnvoering, dus VNG Cyaan. */
.trend-signalen {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.75rem;
  border-left: 2px solid var(--azure);
}
.trend-signalen a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 0.35rem 0;
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
  text-decoration: none;
}
.trend-signalen a:hover { text-decoration: underline; text-underline-offset: 3px; }
.trend-bron { font-weight: 400; }

@media (max-width: 960px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .tegel { padding: 0.6rem 0.7rem 0.7rem; }
  .tegel-n { font-size: var(--t-lead); }
  .ov-trends { padding: 1rem 1rem 1.2rem; }
}

/* Wat buiten de thema's valt, en de patronen daarin, is een instrument voor
   de redactie om blinde vlekken in de indeling te zien. In het portaal is het
   ruis voor een lid; op /prikbord zelf blijft het staan. */
html.embed #unsorted-section { display: none !important; }

/* -----------------------------
   Buiten de pijlers (emergent themes + unsorted items)
   ----------------------------- */
.offpillar {
  background: linear-gradient(180deg, var(--tint) 0%, var(--paper-2) 100%);
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}
.offpillar-head { max-width: 56ch; margin-bottom: 2.5rem; }
.offpillar-title {
  font-family: var(--sans);
  font-size: clamp(var(--t-sectie), 3vw, var(--t-pagina));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--navy);
  margin: 0.75rem 0 1rem;
}
.offpillar-blurb {
  font-family: var(--sans);
  font-size: var(--t-basis);
  line-height: 1.55;
  color: var(--ink);
}
.offpillar-blurb em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

.emergent-title {
  font-family: var(--sans);
  font-size: var(--t-lead);
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.4rem;
  letter-spacing: -0.005em;
}
.emergent-icon { font-size: var(--t-lead); }
.emergent-count {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.emergent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.3rem;
  margin-bottom: 2.5rem;
}
.emergent-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: var(--r);
  padding: 1.5rem 1.6rem 1.3rem;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.emergent-card::before {
  content: "potentieel";
  position: absolute;
  top: -10px;
  left: 1.4rem;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Zwart op cyaan (7.23:1), niet wit (2.90:1). */
  color: #000;
  background: var(--orange);
  padding: 0.25rem 0.55rem;
  border-radius: 3px;
}
.emergent-label {
  font-family: var(--sans);
  font-size: var(--t-lead);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0.5rem 0 0.55rem;
  text-wrap: balance;
}
.emergent-summary {
  font-family: var(--sans);
  font-size: var(--t-basis);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 0.9rem;
}
.emergent-items {
  margin: 0.5rem 0 0;
  border-top: 1px dashed var(--line);
  padding-top: 0.7rem;
}
.emergent-items > summary {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.emergent-items > summary::-webkit-details-marker { display: none; }
.emergent-items > summary::after {
  content: "↓";
  font-size: var(--t-basis);
  color: var(--navy);
  margin-left: auto;
  transition: transform 0.2s ease;
}
.emergent-items[open] > summary::after { transform: rotate(180deg); }
.emergent-items ul {
  list-style: none;
  padding: 0.6rem 0 0;
  margin: 0;
  font-size: var(--t-meta);
}
.emergent-items li {
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--line);
}
.emergent-items li:last-child { border-bottom: none; }
.emergent-items a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
.emergent-items a:hover { color: var(--ink); text-decoration: underline; }
.emergent-items .src {
  color: var(--ink-soft);
  font-size: var(--t-label);
  font-weight: 500;
  margin-left: 0.4rem;
}

.unsorted-details {
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0;
  overflow: hidden;
}
.unsorted-details > summary {
  cursor: pointer;
  padding: 0.95rem 1.2rem;
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  transition: background 0.15s ease;
}
.unsorted-details > summary::-webkit-details-marker { display: none; }
.unsorted-details > summary:hover { background: rgba(20, 52, 98, 0.04); }
.unsorted-details > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--navy);
  border-radius: 50%;
  font-weight: 700;
  transition: transform 0.2s ease;
}
.unsorted-details[open] > summary::before { content: "−"; }
.unsorted-summary-label { flex: 1; }
.unsorted-details .unsorted-count {
  margin-left: auto;
  font-family: var(--sans);
  font-size: var(--t-meta);
  color: var(--ink-soft);
  font-weight: 600;
}

/* -----------------------------
   Unsorted (deprecated legacy)
   ----------------------------- */
.unsorted {
  background: var(--tint);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}
.unsorted-title {
  font-family: var(--sans);
  font-size: var(--t-kaart);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 0.55rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.unsorted-mark {
  font-size: var(--t-lead);
  color: var(--ink);
}
.unsorted-count {
  font-family: var(--sans);
  font-size: var(--t-basis);
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.unsorted-blurb {
  font-family: var(--sans);
  font-size: var(--t-basis);
  color: var(--ink);
  margin-bottom: 1.4rem;
  max-width: 56ch;
}
.unsorted-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-basis);
  color: var(--ink);
  columns: 2;
  column-gap: 3rem;
}
@media (max-width: 720px) { .unsorted-list { columns: 1; } }
.unsorted-list li {
  break-inside: avoid;
  padding: 0.5rem 0;
  border-bottom: 1px dotted rgba(20, 52, 98, 0.18);
}
.unsorted-list a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
.unsorted-list a:hover { color: var(--ink); text-decoration: underline; }

/* De masthead komt één keer binnen. De lead en de themakaarten deden dat ook,
   elk met een eigen vertraging; die zijn er niet meer. */
@media (prefers-reduced-motion: no-preference) {
  .rpo-masthead, .unsorted {
    animation: rpo-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .unsorted { animation-delay: 0.46s; }
}
@keyframes rpo-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

::selection {
  background: var(--orange);
  color: #000;
}

/* --- Radarfilter -------------------------------------------------------------
   Thema plus periode, zodat het lijstje kort wordt. Michel wilde "de laatste
   vijf van de afgelopen maand over financiële risico's in het sociaal domein";
   veertig ongefilterde signalen leest niemand.                               */
.radar-filter {
  margin: 1rem 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.rf-groep { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.55rem; flex-wrap: wrap; }
.rf-groep:last-of-type { margin-bottom: 0; }
.rf-lab {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: 0 0 4.2rem;
}
.rf-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rf-chip {
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1;
  padding: 0.38rem 0.65rem;
  border-radius: 999px;
  /* De tekst stond op 72% dekking: donkerblauw dat daardoor grijs werd. Nu
     vol donkerblauw, en de gekozen chip als donkerblauw vlak met wit. */
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  transition: 0.15s;
}
.rf-chip:hover { border-color: var(--azure); }
.rf-chip.on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.rf-stand {
  margin: 0.75rem 0 0;
  font-family: var(--sans);
  font-size: var(--t-meta);
  color: var(--ink-soft);
}
/* Op een telefoon moeten de chips een duim halen: 44px hoog. */
@media (max-width: 600px) {
  .rf-chip { min-height: 44px; padding: 0.5rem 0.8rem; }
  .wegwijzer-in a:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- Dit valt op -------------------------------------------------------------
   De grootste trends, direct onder de kop van de radar. Mano wilde rechts van
   de radar zien wát er opvalt, niet alleen hoeveel er is.                     */
.valtop {
  margin: 0 0 1.6rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 0 12px 12px 0;
  background: #fff;
}
.vo-lab {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.vo-item {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.vo-item:first-of-type { border-top: 0; padding-top: 0; }
.vo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--navy);
  flex: none;
  margin-top: 0.42rem;
}
.vo-item[data-pillar="fin"] .vo-dot { background: var(--p-fin); }
.vo-item[data-pillar="soc"] .vo-dot { background: var(--p-soc); }
.vo-item[data-pillar="cyb"] .vo-dot { background: var(--p-cyb); }
.vo-item[data-pillar="fra"] .vo-dot { background: var(--p-fra); }
.vo-item[data-pillar="vas"] .vo-dot { background: var(--p-vas); }
.vo-item[data-pillar="irm"] .vo-dot { background: var(--p-irm); }
.vo-item[data-pillar="ver"] .vo-dot { background: var(--p-ver); }
.vo-item[data-pillar="mob"] .vo-dot { background: var(--p-mob); }
.vo-item[data-pillar="gro"] .vo-dot { background: var(--p-gro); }
.vo-item[data-pillar="dee"] .vo-dot { background: var(--p-dee); }
.vo-tekst { display: block; }
.vo-tekst b {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-basis);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.vo-item:hover .vo-tekst b { text-decoration: underline; }
.vo-meta {
  font-family: var(--sans);
  font-size: var(--t-meta);
  color: var(--ink-soft);
}

/* --- Wegwijzer ---------------------------------------------------------------
   De secties onder de radar kwamen onaangekondigd in beeld.                   */
.wegwijzer {
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.wegwijzer-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.4rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.wz-lab {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wegwijzer-in a {
  font-family: var(--sans);
  font-size: var(--t-basis);
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.wegwijzer-in a:hover { text-decoration: underline; }
.wegwijzer-in a::after { content: " ↓"; opacity: 0.55; }

/* ---- Ingesloten weergave -----------------------------------------------
   Stond als <style> in prikbord.html. Daar kon het niet blijven: het portaal
   toont deze pagina in een iframe en style-src 'self' laat een inline blok
   niet meer toe. De klasse wordt bovenin prikbord.js gezet. */
html.embed .topbar,
html.embed header.nav,
html.embed footer.footer { display: none !important; }
html.embed .rpo-masthead .eyebrow,
html.embed .rpo-masthead .masthead-logo,
html.embed .rpo-masthead .rpo-wordmark,
html.embed .rpo-masthead .rpo-sub { display: none !important; }
html.embed .rpo-masthead { padding: 1.75rem 0 0 !important; text-align: left; }
/* Het portaal zet boven de iframe al "Risicoradar". De "Op de radar"-regel en
   de kop "41 signalen, 11 trends" daaronder zeiden het nog een keer, en het
   aantal staat ook al in de metapillen. Alleen de melding van een leeg filter
   blijft staan, want die vertelt iets wat nergens anders staat. */
html.embed .radar-meta > .eyebrow,
html.embed .radar-title:not(.is-leeg) { display: none !important; }

/* De lijst met ongeplaatste items. Stond als style-attribuut in prikbord.js;
   een inline stijl vraagt 'unsafe-inline' en die staat niet meer toe. */
.ongeplaatst-item { padding: 0.55rem 1.2rem; border-bottom: 1px dotted var(--line); }
.ongeplaatst-link { color: var(--navy); font-weight: 600; text-decoration: none; }
.ongeplaatst-bron { color: var(--ink-soft); font-size: var(--t-meta); font-weight: 600;
  margin-left: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ongeplaatst-sub { color: var(--ink-soft); display: block; font-size: var(--t-meta);
  margin-top: 0.2rem; }

/* -----------------------------
   Delen: dezelfde knop als in het portaal (portaal/css/views.css), het menu
   zelf komt uit portaal/css/deelmenu.css.
   ----------------------------- */
.deel {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  border-radius: var(--hoek-klein);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: none;
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease;
}
.deel:hover,
.deel[aria-expanded="true"] { background: var(--paper-2); color: var(--navy); }
.deel:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* --- De ronde van 28 september: rustiger --------------------------------------
   "Het voelt een beetje te druk, het is een hoop tekst." Het thema stond vier
   keer op het eerste scherm; nu kies je het op één plek, de tegels, en die
   zijn ook de legenda. Naast de schijf alleen wat opvalt en één knop naar de
   lijst. In de rij staat de titel vrij; de soort schuift naar de metaregel. */
.radar-blurb { margin-bottom: 1rem; font-size: var(--t-meta); color: var(--ink-soft); }
.radar-naar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.1rem;
  background: var(--navy);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-basis);
  text-decoration: none;
  border-radius: var(--vorm-klein);
}
.radar-naar::after { content: "\2193"; }
.radar-naar:hover, .radar-naar:focus-visible { text-decoration: underline; }
.ov-kop { max-width: none; }
.ov-kop-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; }
.ov-kop-rij .rf-groep { margin: 0; }
.ov-kop-rij .rf-lab { flex: none; }
.ov-kop-rij .rf-chip { min-height: 36px; }
.rij-meta .rij-soort {
  padding: 0;
  margin: 0;
  background: none;
  border-radius: 0;
  font-size: var(--t-meta);
  letter-spacing: 0;
  vertical-align: baseline;
}
.rij-waarom {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html.embed .radar-hero { padding-block: 1rem 1.5rem; }
.radar-caption { margin-top: 0.25rem; }
/* Op een telefoon volgt de lijst direct onder "Dit valt op"; het bijschrift,
   de klikuitleg en de knop ernaartoe zijn daar alleen afstand. */
@media (max-width: 600px) {
  .radar-caption, .radar-blurb, .radar-naar { display: none; }
  html.embed .radar-hero { padding-block: 0.5rem 1rem; }
  .radar-hero-grid { gap: 0.75rem; }
}

/* === De overhaul van 28 september ===========================================
   Eén kop (het portaal), de schijf met wat opvalt en de trends ernaast, één
   filterbalk, en een lijst met alleen titels. Dit blok wint van alles
   hierboven; wat hier staat vervangt de tegels, de trendkolom en de rijen. */
html.embed .rpo-masthead { display: none !important; }
html.embed .radar-caption { display: none; }
html.embed .radar-hero { padding-block: 0.5rem 1.25rem; border-bottom: 0; background: none; }
.radar-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 4vw, 3.5rem); }
.radar-svg { max-width: 560px; }
.radar-meta { padding: 0; }
.valtop { margin: 0; }
.radar-blurb { margin: 0.75rem 0 0; font-size: var(--t-meta); color: var(--ink-soft); }

/* Alle trends: dicht, onder "Dit valt op". */
.alle-trends { margin-top: 0.75rem; border-top: 1px solid var(--line); padding-top: 0.5rem; }
.alle-trends > summary {
  cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-weight: 700; font-size: var(--t-basis); color: var(--navy);
}
.alle-trends > summary::-webkit-details-marker { display: none; }
.alle-trends > summary::before { content: "\25B8"; transition: transform .15s; }
.alle-trends[open] > summary::before { transform: rotate(90deg); }
.alle-trends .trends { margin: 0.25rem 0 0; max-height: 26rem; overflow: auto; }

/* De filterbalk: chips met aantal, en rechts de periode. Blijft bovenaan staan
   tijdens het scrollen, zodat je het filter altijd kunt wisselen. */
.filterbalk {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  padding: 0.75rem 0; margin: 0 0 0.5rem;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.filterbalk .tegels { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; grid-template-columns: none; }
.filterbalk .tegels li { display: block; }
.filterbalk .tegel {
  display: inline-flex; align-items: center; gap: 0.4rem; width: auto; min-height: 40px;
  padding: 0 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-family: var(--sans); font-size: var(--t-meta); font-weight: 700; color: var(--navy); cursor: pointer;
}
.filterbalk .tegel.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.filterbalk .tegel.is-leeg { opacity: .55; border-style: solid; background: #fff; }
.filterbalk .tegel-n { font-size: var(--t-label); font-weight: 600; opacity: .8; }
.filterbalk .tegel-trend, .filterbalk .tegel-kop { display: none; }
.periode { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-size: var(--t-meta); font-weight: 700; color: var(--navy); }
.periode select { min-height: 40px; padding: 0 0.6rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 600; color: var(--navy); background: #fff; }
.ov-stand { margin: 0.25rem 0 0.5rem; font-size: var(--t-meta); }

/* De lijst: één regel titel, één regel meta. Klik = uitleg en bronlink. */
.overzicht { padding-block: 0 2rem; background: none; }
.rijen { list-style: none; margin: 0; padding: 0; border-top: 0; max-width: 980px; }
.rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 0.5rem; padding: 0; border-bottom: 1px solid var(--line); }
.rij-open {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 0.85rem 0; font: inherit; color: var(--navy);
}
.rij-open .rij-titel { display: block; font-family: var(--sans); font-size: var(--t-basis); font-weight: 700; line-height: 1.35; margin: 0; color: var(--navy); }
.rij-open:hover .rij-titel, .rij-open:focus-visible .rij-titel { text-decoration: underline; text-decoration-color: var(--azure); text-underline-offset: 3px; }
.rij-open[aria-expanded="true"] .rij-titel::after { content: ""; }
.rij-open .rij-meta { display: flex; flex-wrap: wrap; gap: 0.1rem 0.5rem; margin-top: 0.2rem; font-size: var(--t-meta); color: var(--ink-soft); }
.rij-open .rij-meta > span + span::before { content: "·"; margin-right: 0.5rem; }
.rij-open .rij-soort { font-weight: 700; color: var(--navy); }
.rij > .deel { margin: 0.6rem 0 0; }
.rij-meer { grid-column: 1 / -1; padding: 0 0 1rem; }
.rij-meer .rij-waarom { display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0 0 0.5rem; max-width: 72ch; }
.rij-bron { font-family: var(--sans); font-weight: 700; font-size: var(--t-meta); color: var(--navy); text-decoration: underline; text-decoration-color: var(--azure); text-underline-offset: 3px; }
.rij-bron::after { content: " \2197"; }

@media (max-width: 800px) {
  .radar-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .radar-svg { max-width: 360px; }
  .periode { margin-left: 0; }
  .filterbalk { position: static; }
}
.filterbalk .tegel { flex-direction: row; white-space: nowrap; }
/* In de iframe staat de radar al in de marge van het portaal; een eigen
   binnenmarge liet hem 64px inspringen ten opzichte van de kop erboven. */
html.embed .wrap { padding-inline: 0; max-width: none; }
html.embed .radar-hero-grid { align-items: center; }
.filterbalk .tegel { padding: 0 0.65rem; gap: 0.35rem; }
.filterbalk { flex-wrap: nowrap; align-items: flex-start; }
.filterbalk .tegels { flex: 1 1 auto; }
.periode { flex: none; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.radar-svg { max-width: 520px; }
@media (max-width: 800px) { .filterbalk { flex-wrap: wrap; } }
/* Op een telefoon één rij chips om opzij te vegen, in plaats van vijf regels. */
@media (max-width: 800px) {
  .filterbalk { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .filterbalk .tegels { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .filterbalk .tegels::-webkit-scrollbar { display: none; }
  .filterbalk .tegels li { flex: none; }
  .periode select { width: 100%; }
}

/* === Ontwerp vanaf nul (28 september, tweede keer) ============================
   Zelfde taal als het portaal (portaal/css/ontwerp.css): secties met een dunne
   lijn en een korte cyaan streep, koppen in Figtree ExtraBold, rijen zonder
   kaarten, titels op 18px. */
html.embed .radar-hero { padding-block: 0 8px; }
.radar-hero-grid { align-items: start; gap: 56px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.radar-svg { max-width: 440px; margin: 0; }
.valtop, .sectiekop {
  border: 0; border-radius: 0; padding: 24px 0 0; background: none; box-shadow: none;
  border-top: 1px solid var(--line);
  background-image: linear-gradient(var(--azure), var(--azure));
  background-repeat: no-repeat; background-size: 56px 4px; background-position: 0 0;
}
.valtop { border-left: 0; }
.vo-lab, .sectiekop h2 {
  font-family: var(--sans); font-size: var(--t-kaart); font-weight: 800; letter-spacing: -0.015em;
  text-transform: none; color: var(--navy); margin: 0 0 8px;
}
.vo-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.vo-item b { font-size: var(--t-lead); }
.alle-trends { border-top: 0; margin-top: 4px; }
.sectiekop { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; }
.sectiekop .periode { margin: 0; }
.filterbalk { border-bottom: 0; padding: 4px 0 12px; position: static; }
.filterbalk .tegels { flex-wrap: wrap; }
.rijen { max-width: none; border-top: 1px solid var(--line); }
.rij-open .rij-titel { font-size: var(--t-lead); }
.rij-open { padding: 16px 0; }
.radar-blurb { display: none; }
@media (max-width: 800px) { .radar-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .radar-svg { margin: 0 auto; } }
@media (max-width: 800px) { .filterbalk .tegels { flex-wrap: nowrap; overflow-x: auto; } .sectiekop { margin-top: 32px; } }