/* ── Dashboard shell: two panes, one visible ────────────────────────────── */
/* Both the kerninzichten-alt and kaart panes stay in the DOM so their map
   iframes and the Perspective worker survive navigation between them. */
.dash-shell {
    height: 100%;
    min-height: 0;
    position: relative;
}
.dash-pane {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* Deliberately NOT `display: none`: a display:none subtree has zero geometry,
   which would break the alt pane's A+B height measurement and make the map
   iframes relayout. Keep it laid out, just out of sight and out of the tab
   order (visibility:hidden removes descendants from focus). */
.dash-pane.is-hidden {
    position: absolute;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Cross-pane switch buttons in the site header ───────────────────────── */
/* Rendered by partials/header.html on the two dashboard routes only (this
   stylesheet is not loaded anywhere else). Which one shows follows the visible
   pane, toggled by assets/js/dashboard-shell.js — the pane can change without a
   page load, so the server-rendered `hidden` is only the starting state.

   Both buttons trail the nav, so the brand + nav bar itself is untouched. Once
   the viewport is wide enough for a gutter beside the centred 1140px header row
   (1600px leaves ~230px), the button leaves the flow and hugs the right edge of
   the screen; below that it rides along at the right end of the row. */
.site-header {
    position: relative;
}
/* Keeps brand and nav at opposite ends once the buttons join the row. */
.site-header__inner .brand {
    margin-right: auto;
}
@media (min-width: 1600px) {
    .dash-cta {
        position: absolute;
        top: 50%;
        right: var(--sp-5);
        transform: translateY(-50%);
    }
}
.dash-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
    padding: var(--sp-2) var(--sp-4);
    font-family: "Geist", var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    background: var(--green-500);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: background-color 120ms ease;
}
/* `hidden` must beat the display above. */
.dash-cta[hidden] {
    display: none;
}
.dash-cta:hover {
    background: var(--green-600);
}
.dash-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--green-100);
}
/* Icon font: size via font-size, not width/height. */
.dash-cta__icon {
    font-size: 20px;
}
/* Below the header's own collapse breakpoint (main.css: 640px) the bar is
   brand + button + hamburger — drop to an icon-only pill (the anchor keeps its
   aria-label). */
@media (max-width: 640px) {
    .dash-cta {
        padding: var(--sp-2);
    }
    .dash-cta__label {
        display: none;
    }
}

/* ── Kerninzichten (alternatief): client-side "house" infographic ───────── */
/* Full-bleed layout reuses the .site--kaart body chain (see baseof.html).
   Perspective is the data engine; the report below is custom SVG/HTML.
   Two columns: the A/B infographic + gebiedsfilter on the left, a circular
   preview of the Woonzorg map on the right (driven by postMessage). */

/* Self-hosted Geist (sans, variable) — no external font dependency. */
@font-face {
    font-family: "Geist";
    src: url("/fonts/geist/Geist-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Self-hosted subset carrying only info / elderly_woman / groups_2. */
@font-face {
    font-family: "Material Symbols Outlined";
    src: url("/fonts/material-symbols/MaterialSymbolsOutlined-subset.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

.kerninzichten-alt-page {
    --kia-font: "Geist", var(--font-sans);

    /* Tile colours (match the original report). */
    --kia-green:   var(--green-500);
    --kia-blue:    var(--region-zuid);
    --kia-red:     #e0473f;
    --kia-grey:    var(--grey-400);
    --kia-magenta: #ec4899;
    --kia-amber:   #f6c445;
    --kia-orange:  #e8964a;

    /* Chrome accent: active topic tab.
       #4CAF6A — the brand green already defined as --green-500. */
    --kia-accent: var(--green-500);
    --kia-accent-hover: var(--green-600);

    /* Widest the dashboard grows before it centres in the viewport. */
    --kia-page-max: 1600px;

    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--grey-50);
    font-family: var(--kia-font);
}

/* ── Topic tabs ─────────────────────────────────────────────────────────── */
.kia-topics {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-4) var(--sp-5);
}
.kia-topic {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    font-family: var(--kia-font);
    font-size: 0.95rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}
.kia-topic:hover:not(.is-active) {
    border-color: var(--green-400);
}
.kia-topic:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--green-100);
}
.kia-topic.is-active {
    color: #fff;
    background: var(--kia-accent);
    border-color: var(--kia-accent);
}
/* Icon font: size via font-size, not width/height. */
.kia-topic__icon {
    flex: 0 0 auto;
    font-size: 22px;
}
/* Shown in place of the figures when the data cannot be fetched. */
.kia-error {
    margin: 0;
    padding: var(--sp-4);
    font-size: 0.95rem;
    color: var(--kia-red);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* ── Two-column dashboard ───────────────────────────────────────────────── */
.kia-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: grid;
    /* The right column sizes to the square map (as tall as sections A + B), the
       left takes the rest — a fixed 1fr/1fr split would clamp the square's width
       below its height whenever A + B is taller than the column is wide. Below
       the stacking breakpoint there is no room for both side by side. */
    grid-template-columns: minmax(0, 1fr) auto;
    /* Columns size to their own content; the map panel is squared off below. */
    align-items: start;
    gap: var(--sp-5);
    padding: 0 var(--sp-5) var(--sp-5);
}
/* Keep the dashboard from sprawling across very wide screens. */
.kia-topics,
.kia-layout {
    width: 100%;
    max-width: var(--kia-page-max);
    margin-inline: auto;
}
.kia-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    min-width: 0;
}

/* Shared white card. */
.kia-panel {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* ── Section (A / B) ────────────────────────────────────────────────────── */
.kia-section__band {
    padding: var(--sp-4) var(--sp-4) var(--sp-2);
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--grey-800);
}

/* 4 data columns + a leading row-label column. The data columns are capped so
   the tiles stay grouped instead of drifting apart on a wide card. */
.kia-grid {
    display: grid;
    grid-template-columns: minmax(96px, 1.2fr) repeat(4, minmax(0, 140px));
    justify-content: start;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-4);
}
.kia-colhead {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-soft);
    hyphens: auto;
}
.kia-grid__rowlabel {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.2;
}
.kia-num {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.kia-num--total {
    font-weight: 600;
}
/* Separator under the tile row, as in the report. */
.kia-grid--a .kia-tile-cell,
.kia-grid--b .kia-tile-cell {
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
}

/* ── Gebiedsfilter card ─────────────────────────────────────────────────── */
.kia-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 260px));
    justify-content: start;
    gap: var(--sp-4);
    padding: var(--sp-4);
}
.kia-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}
.kia-field__label {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.kia-select {
    width: 100%;
    height: 44px;
    padding: 0 var(--sp-3);
    font-family: var(--kia-font);
    font-size: 0.95rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.kia-select:hover:not(:disabled) {
    border-color: var(--green-400);
}
.kia-select:focus-visible {
    outline: none;
    border-color: var(--green-500);
    box-shadow: 0 0 0 3px var(--green-100);
}
.kia-select:disabled {
    color: var(--grey-400);
    background: var(--grey-50);
    cursor: not-allowed;
}

/* Off-screen but still announced by screen readers. */
.kia-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Map panel ──────────────────────────────────────────────────────────── */
/* Height is set from JS to match sections A + B exactly (--kia-map-size); the
   frame inside is square, so it drives the width too. Falls back to a square
   sized by the column width before that measurement lands. */
.kia-mappanel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: var(--kia-map-size, auto);
}
/* The open-circular view already renders its own circular map, so this frame is
   a plain square viewport — clipping it again cropped the circle's top/bottom.
   Square keeps the circle centred with no dead space left or right. */
.kia-mapframe {
    position: relative;
    /* Square: the side is the panel height, capped by the available width so a
       narrow column shrinks the map rather than overflowing. */
    height: 100%;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    overflow: hidden;
    background: var(--bg);
}
.kia-mapframe iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── House / arrow tile ─────────────────────────────────────────────────── */
.kia-tile-cell {
    display: flex;
    justify-content: center;
}
.kia-tile {
    width: 100%;
    max-width: 92px;
    height: auto;
    display: block;
}
.kia-tile__shape {
    fill: var(--tile-color);
}
.kia-tile__value {
    fill: #fff;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.kia-tile__pct {
    fill: #fff;
    font-size: 15px;
    font-weight: 600;
}
/* The three A tiles double as map-layer switches. */
.kia-tile-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease;
}
.kia-tile-btn:hover {
    transform: translateY(-2px);
}
.kia-tile-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--green-100);
}
.kia-tile-btn.is-active {
    filter: drop-shadow(0 3px 6px rgba(20, 30, 40, 0.28));
}

/* ── Placeholder for topics without content ─────────────────────────────── */
.kia-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-7) var(--sp-5);
}
.kia-empty[hidden] {
    display: none;
}
.kia-empty__text {
    margin: 0;
    font-size: var(--fs-lead);
    color: var(--text-soft);
}
.kia-layout[hidden] {
    display: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .kia-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Stacked: matching A+B is meaningless — just fit the column width.
       The JS stops publishing --kia-map-size below this breakpoint. */
    .kia-mapframe {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 720px) {
    .kia-topics {
        gap: var(--sp-2);
        padding: var(--sp-3) var(--sp-4);
    }
    .kia-topic {
        padding: var(--sp-2) var(--sp-3);
        font-size: 0.88rem;
    }
    .kia-layout {
        padding: 0 var(--sp-4) var(--sp-4);
        gap: var(--sp-4);
    }
    .kia-col {
        gap: var(--sp-4);
    }
    .kia-grid {
        grid-template-columns: minmax(70px, 1fr) repeat(4, 1fr);
        gap: var(--sp-1) var(--sp-2);
        padding: var(--sp-3);
    }
    .kia-filters {
        grid-template-columns: minmax(0, 1fr);
    }
    .kia-tile__value { font-size: 15px; }
    .kia-tile__pct { font-size: 12px; }
}