/* ── 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;
}
/* The dashboard header carries four groups (brand, nav, gebiedsfilter, switch
   button) where the rest of the site carries two, so capping it at the 1140px
   content column crushed everything into the middle. It spans the window
   instead — but the brand must still line up with the logo on every other page,
   so the left edge is padded to where the content column would have started.
   Only the left: the filter and switch button stay out at the right edge.

   calc() mirrors main.css's `margin: 0 auto` on a --content-max box: the gutter
   is half the leftover width, and max() keeps it at the normal page padding
   once the window is narrower than the column. */
body:has(.dash-shell) .site-header__inner {
    max-width: none;
    padding-left: max(var(--sp-5), calc((100vw - var(--content-max)) / 2 + var(--sp-5)));
}
/* Left group (brand + nav) hard left, right group (filter + button) hard right.
   Do NOT put an auto margin on the nav: that margin absorbs any free space and
   drags the logo and nav toward the middle. Exactly one auto margin, on the
   first right-hand item, keeps both groups anchored.

   That item is the filter *wrapper*, not the filter: below 1480px the selects
   collapse into the wrapper's toggle button, but the wrapper itself is in the
   flow at every width, so this one rule holds at all of them. */
body:has(.dash-shell) .site-header__inner .dash-areafilter-wrap {
    margin-left: auto;
}
/* The logo is an inline SVG with a 300x64 viewBox; as a flex item it was being
   shrunk to ~105px, i.e. half its aspect ratio at the 46px height it asks for.
   Pin the intrinsic size and opt out of shrinking. */
.brand__logo {
    flex: none;
    height: 46px;
    width: auto;
}
.site-header__inner .brand {
    flex: none;
}
/* Keep menu labels on one line — "Over ons" was wrapping to two. */
.site-nav__link {
    white-space: nowrap;
}
/* The CTA used to be absolutely positioned at >=1600px, which took it out of the
   flex flow and left the gebiedsfilter with a wide gap before it (the header is
   justify-content:space-between, so the slack landed between the two). It now
   stays in normal flow as the last item, so it still ends up hard right while
   the filter sits directly beside it. */
/* Gebiedsfilter — three linked selects, directly left of the switch button.
   margin-left:auto claims the free space between nav and button: the brand
   carries margin-right:auto, which would otherwise park these next to the nav
   with a wide gap before the button. */
/* Positioning context for the collapsed panel, and the header's right-hand
   anchor (see the margin-left:auto rule above). */
.dash-areafilter-wrap {
    position: relative;
    flex: none;
    margin-right: var(--sp-3);
}
/* Hidden while the selects are inline; shown in their place below 1480px.
   Styled to match .site-nav__toggle in main.css. */
.dash-areafilter__toggle {
    display: none;
    background: none;
    border: none;
    padding: var(--sp-2);
    margin: calc(var(--sp-2) * -1);
    color: var(--green-700);
    cursor: pointer;
    line-height: 0;
    flex: none;
}
.dash-areafilter__toggle:focus-visible {
    outline: none;
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 3px var(--green-100);
}
.dash-areafilter__toggle-icon { display: block; flex: none; }

.dash-areafilter {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
}

.dash-areafilter__select {
    font-family: "Geist", var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.2;
    padding: var(--sp-2) var(--sp-3);
    max-width: 11rem;
    color: var(--grey-900, #1a1a1a);
    background: #fff;
    border: 1px solid var(--grey-300, #d4d4d4);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 120ms ease;
}
.dash-areafilter__select:hover:not(:disabled) {
    border-color: var(--green-500);
}
.dash-areafilter__select:focus-visible {
    outline: none;
    border-color: var(--green-500);
    box-shadow: 0 0 0 3px var(--green-100);
}
/* Wijk/buurt stay disabled until their parent is chosen — make that legible
   rather than looking like an empty dropdown that is merely broken. */
.dash-areafilter__select:disabled {
    color: var(--grey-500, #8a8a8a);
    background: var(--grey-50, #f6f6f6);
    cursor: not-allowed;
}
@media (max-width: 1100px) {
    /* Narrow headers: the three selects matter more than their width. */
    .dash-areafilter__select {
        max-width: 7.5rem;
    }
}
/* The brand, nav, three selects and the switch button need more than one line's
   worth of room below ~1320px: the header overflows and the whole page picks up
   a horizontal scrollbar.

   Measured minimum widths with the selects inline (the left padding that aligns
   the brand with the content column costs room, so these are wider than the
   full-bleed figures were):
     /kerninzichten/ ("Naar kaart")         1380px
     /kaart/         ("Naar kerninzichten") 1480px  <- the binding case
   1480px clears the wider of the two.

   Below it the selects move behind the toggle and open as a card. The card's
   geometry deliberately matches .site-nav__list's mobile dropdown in main.css,
   since the two sit side by side at the top right. */
@media (max-width: 1480px) {
    .dash-areafilter__toggle {
        display: block;
    }
    .dash-areafilter {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: var(--sp-3);
        flex-direction: column;
        align-items: stretch;
        min-width: 220px;
        padding: var(--sp-3);
        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;
    }
    .dash-areafilter.is-open {
        display: flex;
    }
    /* Stacked, so the widths that keep three selects on one line no longer apply. */
    .dash-areafilter__select {
        max-width: none;
        width: 100%;
    }
}
.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;
}
/* Drop to an icon-only pill (the anchor keeps its aria-label) once the labelled
   one stops fitting. Binary-searched, both routes, with the label forced on:
     /kerninzichten/ ("Naar kaart")         756px
     /kaart/         ("Naar kerninzichten") 809px  <- the binding case
   820px clears the wider. This used to be 640px, which left the header
   overflowing across the whole band where the nav has not yet collapsed to the
   hamburger — a pre-existing bug, visible as the switch pill pushed off-screen
   and the hamburger seemingly missing. */
@media (max-width: 820px) {
    .dash-cta {
        padding: var(--sp-2);
    }
    .dash-cta__label {
        display: none;
    }
}
/* The dashboard header carries two items the rest of the site does not (the
   filter icon and the switch pill), so it runs out of room for the full nav
   before the site-wide 640px collapse in main.css does: brand 216 + nav 277 +
   icon 24 + icon-pill 36, plus 48px padding and 72px gaps, needs 661px.
   Collapse to the hamburger at 680px on these routes only — main.css keeps 640px
   everywhere else, where the header is less crowded. */
@media (max-width: 680px) {
    body:has(.dash-shell) .site-nav__toggle {
        display: block;
        margin-left: auto;
    }
    body:has(.dash-shell) .site-nav {
        position: relative;
    }
    body:has(.dash-shell) .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;
    }
    body:has(.dash-shell) .site-nav__list.is-open {
        display: flex;
    }
    body:has(.dash-shell) .site-nav__link {
        display: block;
        padding: var(--sp-3) var(--sp-4);
        border-bottom: none;
    }
}
/* Small phones: brand (216px, fixed) + hamburger + filter icon + pill needs
   ~412px with the default 24px gutters and gaps, so a 375/390px viewport
   overflowed. Tightening the gaps buys back ~40px, which fits from 356px. */
@media (max-width: 480px) {
    body:has(.dash-shell) .site-header__inner {
        gap: var(--sp-3);
        padding-left: var(--sp-4);
        padding-right: var(--sp-4);
    }
    .dash-areafilter-wrap {
        margin-right: var(--sp-2);
    }
}
/* Below that the logo is the only thing left to give: everything else in the bar
   is now a fixed 24px icon or a 36px pill, none of which may shrink (see the
   flex:none notes on the toggles). Measured with the icons at full size:
     216px logo -> header needs 380px, so 375px (iPhone SE) overflowed
     169px logo -> header needs 333px
   Binary-searched narrowest fitting viewport per logo height:
     46px logo (brand 216px) -> 380px
     36px logo (brand 169px) -> 333px
     30px logo (brand 141px) -> 305px
   Each step fires just above where the previous height stops fitting. */
@media (max-width: 400px) {
    .brand__logo {
        height: 36px;
    }
}
@media (max-width: 340px) {
    .brand__logo {
        height: 30px;
    }
}
@media (max-width: 310px) {
    .brand__logo {
        height: 26px;
    }
}

/* ── 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; }
}