/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

/* ---------- Header ---------- */
.site-header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.site-header__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    align-items: center;
    /* flex-start, not space-between: the nav sits next to the brand on every
       page. With space-between it was flung to the far right on pages with only
       two groups (a ~510px gap on the landing page) while sitting beside the
       brand on the dashboard, so the menu jumped when navigating between them.
       Anything that belongs at the right edge claims it with margin-left:auto. */
    justify-content: flex-start;
    gap: var(--sp-5);
}
.brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.brand__mark { flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name {
    font-weight: 600;
    color: var(--green-700);
    font-size: 1.0625rem;
}
.brand__subtitle {
    font-size: 0.78rem;
    color: var(--text-soft);
    margin-top: 2px;
}

/* ---------- Nav ---------- */
.site-nav__toggle {
    display: none; /* shown only on small screens */
    background: none;
    border: none;
    padding: var(--sp-2);
    margin: calc(var(--sp-2) * -1);
    color: var(--green-700);
    cursor: pointer;
    line-height: 0;
    /* As a flex child of the header this button absorbed every pixel of shortfall
       on a narrow viewport — the icon was measured at 3px wide on a 375px phone
       and 0px at 320px. The brand next to it is a fixed-width SVG that cannot
       give, so the shrinking has to be switched off here. */
    flex: none;
}
.site-nav__toggle-icon { display: block; flex: none; }
.site-nav__list {
    display: flex;
    gap: var(--sp-6);
}
.site-nav__link {
    font-size: 0.95rem;
    color: var(--text);
    padding: var(--sp-2) 0;
    border-bottom: 2px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
}
.site-nav__link:hover {
    color: var(--green-700);
    border-bottom-color: var(--green-500);
}
/* Current page: same green + underline as hover, but persistent. */
.site-nav__link--active {
    color: var(--green-700);
    font-weight: 600;
    border-bottom-color: var(--green-500);
}

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(180deg, var(--green-50) 0%, var(--bg) 100%);
    padding: var(--sp-8) var(--sp-5) var(--sp-7);
}
.hero__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-7);
    align-items: center;
}
.hero__eyebrow {
    color: var(--green-700);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-bottom: var(--sp-4);
}
.hero__title {
    font-size: var(--fs-h1);
    line-height: 1.1;
    color: var(--grey-900);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-5);
}
.hero__lead {
    font-size: var(--fs-lead);
    color: var(--text-soft);
    max-width: 52ch;
    margin-bottom: var(--sp-6);
}

/* Region pills */
.region-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.region-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-pill);
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--grey-800);
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.region-pill:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.region-pill__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--grey-400);
}
.region-pill--noord    { border-color: var(--region-noord); }
.region-pill--noord    .region-pill__dot    { background: var(--region-noord); }
.region-pill--roermond { border-color: var(--region-roermond); }
.region-pill--roermond .region-pill__dot { background: var(--region-roermond); }
.region-pill--zuid     { border-color: var(--region-zuid); }
.region-pill--zuid     .region-pill__dot     { background: var(--region-zuid); }

/* Hero image */
.hero__media {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero__image {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* ---------- Features ---------- */
.features {
    padding: var(--sp-7) var(--sp-5) var(--sp-8);
}
.features__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
}
.feature-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--green-200);
}
.feature-card__icon {
    color: var(--green-600);
    width: 48px;
    height: 48px;
    background: var(--green-50);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature-card__title {
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--grey-900);
}
.feature-card__body {
    color: var(--text-soft);
    font-size: 0.95rem;
    flex: 1;
}
.feature-card__cta {
    color: var(--green-700);
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.feature-card__arrow {
    transition: transform 160ms ease;
}
.feature-card__cta:hover .feature-card__arrow {
    transform: translateX(3px);
}

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--grey-50);
}
.site-footer__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    color: var(--text-soft);
    font-size: 0.875rem;
}
.site-footer__nav {
    display: flex;
    gap: var(--sp-5);
}
.site-footer__nav a:hover { color: var(--green-700); }

/* ---------- Post list (fallback) ---------- */
.list { padding: var(--sp-7) var(--sp-5); }
.list__inner { max-width: 720px; margin: 0 auto; }
.list__title { font-size: 1.75rem; margin-bottom: var(--sp-5); }
.post-list__item { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.post-list__title { font-size: 1.125rem; color: var(--grey-900); }
.post-list__excerpt { color: var(--text-soft); font-size: 0.95rem; margin-top: var(--sp-2); }

/* ---------- Single post (fallback) ---------- */
.site-main--post { padding: var(--sp-7) var(--sp-5); }
.post { max-width: 720px; margin: 0 auto; padding: var(--sp-7) var(--sp-5); }
.post__title { font-size: 2rem; margin-bottom: var(--sp-5); color: var(--grey-900); }
.post__body { font-size: 1.0625rem; color: var(--text); }
.post__body p + p { margin-top: var(--sp-4); }

/* ---------- 404 ---------- */
.error { padding: var(--sp-8) var(--sp-5); }
.error__inner {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}
.error__code {
    font-size: 5rem;
    font-weight: 700;
    color: var(--green-600);
    line-height: 1;
    margin-bottom: var(--sp-3);
}
.error__title {
    font-size: 1.75rem;
    color: var(--grey-900);
    margin-bottom: var(--sp-3);
}
.error__lead {
    color: var(--text-soft);
    margin-bottom: var(--sp-5);
}
.error__home {
    display: inline-block;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius-pill);
    background: var(--green-600);
    color: #fff;
    font-weight: 500;
    transition: background 120ms ease;
}
.error__home:hover { background: var(--green-700); }

/* ---------- Focus ---------- */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--green-600);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .hero { padding: var(--sp-7) var(--sp-5) var(--sp-6); }
    .hero__inner {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
    .hero__media { order: -1; margin: 0 auto; }
    .hero__image { max-width: 500px; }
    .hero__title { font-size: 2rem; }
    .features__inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .brand__subtitle { display: none; }

    /* Collapse the nav into a single hamburger icon */
    .site-nav__toggle { display: block; }
    /* The toggle is a sibling of .site-nav, not a child, and .site-nav collapses
       to zero width here — so the button is what has to claim the right edge.
       It used to get there via space-between, which no longer applies. */
    .site-nav__toggle {
        margin-left: auto;
    }
    .site-nav {
        position: relative;
    }
    .site-nav__list {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: var(--sp-3);
        flex-direction: column;
        gap: 0;
        min-width: 180px;
        padding: var(--sp-2) 0;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius, 8px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        z-index: 50;
    }
    .site-nav__list.is-open { display: flex; }
    .site-nav__item { width: 100%; }
    .site-nav__link {
        display: block;
        padding: var(--sp-3) var(--sp-4);
        border-bottom: none;
    }
    .site-nav__link:hover {
        border-bottom-color: transparent;
        background: var(--green-50);
    }
    /* Stacked menu has no underline — mark the current page with a left bar. */
    .site-nav__link--active {
        border-bottom: none;
        border-left: 3px solid var(--green-500);
        padding-left: calc(var(--sp-4) - 3px);
        background: var(--green-50);
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================================================
   Factsheet page
   ======================================================================== */

/* ── Page header ───────────────────────────────────────────────────────── */
.factsheet-header {
    background: linear-gradient(180deg, var(--green-50) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-7) var(--sp-5) var(--sp-6);
}
.factsheet-header__inner {
    max-width: var(--content-max);
    margin: 0 auto;
}
.factsheet-header__title {
    font-size: var(--fs-h1);
    font-weight: 700;
    color: var(--grey-900);
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-4);
}
.factsheet-header__lead {
    font-size: var(--fs-lead);
    color: var(--text-soft);
    max-width: 68ch;
    margin-bottom: var(--sp-5);
}
.factsheet-header__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.info-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    color: var(--text-soft);
}
.info-chip svg { flex: none; color: var(--green-600); }

/* ── Body grid ─────────────────────────────────────────────────────────── */
.factsheet-body {
    padding: var(--sp-7) var(--sp-5);
}
.factsheet-body__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--sp-6);
    align-items: start;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.factsheet-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

/* Search */
.factsheet-search__title,
.factsheet-map-hint__title {
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--grey-900);
    margin-bottom: var(--sp-3);
}
.factsheet-search__field {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
}
.factsheet-search__input {
    flex: 1;
    min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text);
    background: var(--bg);
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.factsheet-search__input:focus {
    border-color: var(--green-500);
    box-shadow: 0 0 0 3px rgba(76, 175, 106, 0.15);
}
.factsheet-search__download {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--green-600);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 120ms ease, transform 120ms ease;
}
.factsheet-search__download:hover {
    background: var(--green-700);
    transform: translateY(-1px);
}
.factsheet-search__download[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.6;
}
.factsheet-search__download[hidden] { display: none; }
.factsheet-search__hint {
    margin-top: var(--sp-2);
    font-size: 0.82rem;
    color: var(--text-soft);
}

/* Map hint */
.factsheet-map-hint__body {
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.5;
}

/* ── Map container ─────────────────────────────────────────────────────── */
.factsheet-map-container {
    position: relative;
    height: 540px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
#leaflet-map {
    width: 100%;
    height: 100%;
}

/* Back button overlay */
.map-back-btn {
    position: absolute;
    top: var(--sp-3);
    left: 50px; /* clear Leaflet zoom controls */
    z-index: 1000;
    padding: var(--sp-2) var(--sp-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--grey-800);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 120ms ease, border-color 120ms ease;
}
.map-back-btn:hover {
    background: var(--green-50);
    border-color: var(--green-500);
    color: var(--green-700);
}
.map-back-btn[hidden] { display: none; }

/* Leaflet tooltip override */
.map-tooltip.leaflet-tooltip {
    background: var(--grey-900);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    padding: var(--sp-1) var(--sp-3);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
}
.map-tooltip.leaflet-tooltip::before { display: none; }

/* ── Hoe werkt het ─────────────────────────────────────────────────────── */
.how-it-works {
    background: var(--green-50);
    padding: var(--sp-7) var(--sp-5);
    border-top: 1px solid var(--border);
}
.how-it-works__inner {
    max-width: var(--content-max);
    margin: 0 auto;
}
.how-it-works__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--grey-900);
    margin-bottom: var(--sp-6);
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
}
.step-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    position: relative;
}
.step-card__icon {
    width: 44px;
    height: 44px;
    background: var(--green-100);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-700);
    flex: none;
}
.step-card__num {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--green-100);
    line-height: 1;
}
.step-card__title {
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--grey-900);
}
.step-card__body {
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.55;
}

/* ── Footnote ──────────────────────────────────────────────────────────── */
.factsheet-footnote {
    border-top: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg);
}
.factsheet-footnote__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.factsheet-footnote__text {
    font-size: 0.875rem;
    color: var(--text-soft);
}
.factsheet-footnote__link {
    font-size: 0.875rem;
    color: var(--green-700);
    font-weight: 500;
    white-space: nowrap;
}
.factsheet-footnote__link:hover { text-decoration: underline; }

/* ========================================================================
   Dashboard page
   ======================================================================== */
.dashboard-header {
    background: linear-gradient(180deg, var(--green-50) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-7) var(--sp-5) var(--sp-6);
}
.dashboard-header__inner {
    max-width: var(--content-max);
    margin: 0 auto;
}
.dashboard-header__title {
    font-size: var(--fs-h1);
    font-weight: 700;
    color: var(--grey-900);
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-4);
}
.dashboard-header__lead {
    font-size: var(--fs-lead);
    color: var(--text-soft);
    max-width: 64ch;
}

.dashboard-body {
    padding: var(--sp-8) var(--sp-5);
    display: flex;
    justify-content: center;
}
.dashboard-card {
    width: 100%;
    max-width: 560px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--sp-7) var(--sp-6);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
}
.dashboard-card__icon {
    width: 110px;
    height: 110px;
    background: var(--green-50);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-600);
    margin-bottom: var(--sp-2);
}
.dashboard-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--grey-900);
}
.dashboard-card__body {
    color: var(--text-soft);
    max-width: 44ch;
    margin: 0 auto;
}
.dashboard-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    background: var(--green-600);
    color: #fff;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    margin-top: var(--sp-3);
    transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.dashboard-card__cta:hover {
    background: var(--green-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.dashboard-card__note {
    font-size: 0.82rem;
    color: var(--text-soft);
    font-style: italic;
    margin-top: var(--sp-3);
}

@media (max-width: 640px) {
    .dashboard-header { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
    .dashboard-header__title { font-size: 2rem; }
    .dashboard-body { padding: var(--sp-6) var(--sp-4); }
    .dashboard-card { padding: var(--sp-5) var(--sp-4); }
}

/* ========================================================================
   Kaart page
   ======================================================================== */
/* Kaart layout: header + map fill the viewport exactly, no page scrollbar. */
.site--kaart {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.site--kaart .site-header { flex: none; }
.site--kaart .site-main {
    flex: 1;
    min-height: 0;
}
.kaart-page {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    height: 100%;
    background: var(--bg);
}
/* Sidebar/treeview toggled off — map iframe fills the full width. */
.kaart-page--no-sidebar {
    grid-template-columns: 1fr;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.kaart-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--bg);
    overflow: hidden;
    min-height: 0;
}
.kaart-sidebar__header {
    padding: var(--sp-5) var(--sp-5) var(--sp-3);
    border-bottom: 1px solid var(--border);
}
.kaart-sidebar__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--grey-900);
    margin-bottom: var(--sp-2);
}
.kaart-sidebar__lead {
    font-size: 0.85rem;
    color: var(--text-soft);
    line-height: 1.45;
}

/* ── Search ────────────────────────────────────────────────────────────── */
.kaart-search {
    position: relative;
    padding: var(--sp-4) var(--sp-5) var(--sp-3);
}
.kaart-search__icon {
    position: absolute;
    left: calc(var(--sp-5) + var(--sp-3));
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-soft);
    pointer-events: none;
}
.kaart-search__input {
    width: 100%;
    padding: var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 22px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--text);
    background: var(--bg);
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.kaart-search__input:focus {
    border-color: var(--green-500);
    box-shadow: 0 0 0 3px rgba(76, 175, 106, 0.15);
}

/* ── Tree ──────────────────────────────────────────────────────────────── */
.kaart-tree {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--sp-3) var(--sp-3);
    min-height: 0;
}
.kaart-tree__head {
    display: grid;
    grid-template-columns: 1fr 22px 22px;
    column-gap: var(--sp-2);
    align-items: center;
    padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 1;
}
.kaart-tree__head-col {
    font-size: 0.7rem;
    text-align: center;
    color: var(--text-soft);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.kaart-tree__head-col:first-child { grid-column: 2; }

.kaart-tree__group {
    margin-top: var(--sp-2);
}
.kaart-tree__category {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    padding-left: calc(var(--sp-3) + var(--depth, 0) * 14px);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--grey-900);
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease;
}
.kaart-tree__category:hover { background: var(--green-50); }
.kaart-tree__chevron {
    color: var(--text-soft);
    transition: transform 160ms ease;
    flex: none;
}
.kaart-tree__group.is-open .kaart-tree__chevron {
    transform: rotate(90deg);
}
.kaart-tree__category-label { flex: 1; }

.kaart-tree__layers {
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms ease;
}
.kaart-tree__group.is-open .kaart-tree__layers {
    max-height: 1000px;
}

.kaart-tree__row {
    display: grid;
    grid-template-columns: 1fr 22px 22px;
    column-gap: var(--sp-2);
    align-items: center;
    padding-left: calc(var(--sp-3) + 20px + var(--depth, 0) * 14px);
    padding-right: var(--sp-3);
    border-radius: var(--radius-sm);
    transition: background 120ms ease;
}
.kaart-tree__row:hover { background: var(--grey-50); }
.kaart-tree__row.is-selected { background: var(--green-50); }

.kaart-tree__layer {
    padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
    background: transparent;
    border: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kaart-tree__layer:hover { color: var(--green-700); }
.kaart-tree__row.is-selected .kaart-tree__layer {
    color: var(--green-700);
    font-weight: 600;
}

/* Checkbox cells */
.kaart-tree__check {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: var(--sp-2) 0;
}
.kaart-tree__check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.kaart-tree__check-box {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--grey-400);
    border-radius: 3px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, border-color 120ms ease;
}
.kaart-tree__check:hover .kaart-tree__check-box {
    border-color: var(--green-500);
}
.kaart-tree__check input:focus-visible + .kaart-tree__check-box {
    outline: 2px solid var(--green-600);
    outline-offset: 2px;
}
.kaart-tree__check--a input:checked + .kaart-tree__check-box {
    background: var(--region-zuid);
    border-color: var(--region-zuid);
}
.kaart-tree__check--b input:checked + .kaart-tree__check-box {
    background: var(--green-600);
    border-color: var(--green-600);
}
.kaart-tree__check input:checked + .kaart-tree__check-box::after {
    content: '';
    width: 8px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

/* ── Info panel ────────────────────────────────────────────────────────── */
.kaart-info {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border);
    background: var(--grey-50);
    min-height: 80px;
    max-height: 180px;
    overflow-y: auto;
}
.kaart-info__empty {
    font-size: 0.85rem;
    color: var(--text-soft);
    font-style: italic;
}
.kaart-info__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--grey-900);
    margin-bottom: var(--sp-2);
}
.kaart-info__body {
    font-size: 0.85rem;
    color: var(--text-soft);
    line-height: 1.5;
}
.kaart-info__body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    padding: 1px 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
}

/* ── Legend ────────────────────────────────────────────────────────────── */
.kaart-legend {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
    background: var(--bg);
    font-size: 0.8rem;
    color: var(--text-soft);
}
.kaart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}
.kaart-legend__swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}
.kaart-legend__swatch--a { background: var(--region-zuid); }
.kaart-legend__swatch--b { background: var(--green-600); }

/* ── Canvas (single map iframe + optional diff slider) ─────────────────── */
.kaart-canvas {
    position: relative;
    background: var(--grey-50);
    min-height: 0;
    overflow: hidden;
}
.kaart-canvas__iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── Kerninzichten (full-bleed Power BI embed) ─────────────────────────── */
/* Reuses the .site--kaart full-height body chain (see baseof.html). */
.kerninzichten-page {
    height: 100%;
    background: var(--bg);
}
.kerninzichten-canvas {
    position: relative;
    height: 100%;
    background: var(--grey-50);
    min-height: 0;
    overflow: hidden;
}
/* powerbi.embed() injects its own <iframe> into this container. The explicit
   height matters: without it that iframe collapses to zero and the pane renders
   blank with no console error. */
/* Power BI draws a "free trial version" banner across the top of the iframe.
   It is inside a cross-origin frame, so it cannot be selected or hidden — the
   iframe is instead grown by the banner's height and pulled up by the same
   amount, leaving the banner outside the clipped box.

   40px is measured from the rendered page, not a value Microsoft guarantees:
   if the banner ever changes height the report will be cropped by the wrong
   amount. Delete these three declarations (and the matching ones in @media
   print) once a Fabric F-SKU/A-SKU is assigned — the banner then disappears at
   source and this crop would eat 40px of real report. */
.kerninzichten-canvas__embed {
    --pbi-trial-offset: 40px;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    /* The frame is taller than this box, so the box is technically scrollable
       even with overflow:hidden — a stray wheel or focus jump would slide the
       banner back into view. Anchoring the frame instead of the box keeps the
       crop fixed. */
    position: relative;
}
.kerninzichten-canvas__embed > iframe {
    width: 100%;
    /* !important because powerbi.embed() writes height:100% inline; without it
       the frame stays container-height and the bottom 40px of the report is
       clipped along with the banner. */
    height: calc(100% + var(--pbi-trial-offset)) !important;
    position: absolute;
    left: 0;
    top: calc(-1 * var(--pbi-trial-offset));
    border: 0;
    display: block;
}
/* Shown in place of the report when the embed token cannot be fetched, so a
   backend outage is visible rather than a silent blank pane. */
.kerninzichten-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--sp-5);
    text-align: center;
    color: var(--text-soft);
    font-size: 0.95rem;
}
.kerninzichten-download {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    z-index: 5;
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--green-600);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background 120ms ease, transform 120ms ease;
}
.kerninzichten-download:hover {
    background: var(--green-700);
    transform: translateY(-1px);
}

/* Print: show only the report, hide site chrome and the button itself.
   All three dashboard panes live in one document, so every rule here must be
   scoped to the visible pane — otherwise printing any dashboard route would also
   lay out the hidden Power BI pane. */
@media print {
    .site-header,
    .dash-cta,
    .kerninzichten-download { display: none !important; }
    .dash-pane.is-hidden { display: none !important; }
    body.site--kaart,
    .site-main,
    .dash-shell,
    .dash-pane,
    .kerninzichten-page,
    .kerninzichten-canvas {
        height: auto !important;
        overflow: visible !important;
    }
    /* The ancestors above are forced to overflow:visible, so the embed keeps its
       own clip here — without it the trial banner reappears on the printout. */
    .kerninzichten-canvas__embed {
        width: 100%;
        height: 100vh;
        overflow: hidden !important;
    }
    .kerninzichten-canvas__embed > iframe {
        width: 100%;
        height: calc(100vh + var(--pbi-trial-offset)) !important;
    }
    @page { size: landscape; margin: 0; }
}
/* ── Kaart responsive ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .kaart-page:not(.kaart-page--no-sidebar) { grid-template-columns: 280px 1fr; }
}
@media (max-width: 900px) {
    /* Stack sidebar above the map; the map fills the remaining height. */
    .kaart-page {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    /* No sidebar: the map alone fills the whole area. */
    .kaart-page--no-sidebar {
        grid-template-rows: 1fr;
    }
    .kaart-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        max-height: 50%;
    }
    .kaart-canvas {
        min-height: 0;
    }
}

/* ── Factsheet responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .factsheet-header__title { font-size: 2rem; }
    .factsheet-body__inner {
        grid-template-columns: 1fr;
    }
    .factsheet-map-container { height: 420px; }
    .steps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .factsheet-header { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
    .factsheet-body { padding: var(--sp-5) var(--sp-4); }
    .factsheet-map-container { height: 360px; }
    .factsheet-header__chips { flex-direction: column; }
    .factsheet-footnote__inner { flex-direction: column; align-items: flex-start; }
}