/* Shell chrome (nav, footer, compare tray, AI drawer, consent banner).
   Moved out of an inline <style> in Components/DesignSystem/Shell.razor
   (2026-09-26): inline, these 29 KB went out with EVERY page, about 6 KB
   compressed per response over the home upload; as a fingerprinted file
   the browser and the Cloudflare edge keep it for a year. Linked right
   after app.css in App.razor, so the cascade order against app.css and
   Tokens.css is unchanged. */

/* ──────────────────────────────────────────────────────────────
   Shell, app-level chrome (light-professional, 2026-06)
   WHITE nav with a hairline bottom border + ink text; WHITE footer
   with readable slate links. NO dark surfaces anywhere in the chrome.
   All classes are .ds-shell-* prefixed so they never collide
   with the legacy .chrome / .app-footer rules in app.css.
   ────────────────────────────────────────────────────────────── */

.ds-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ds-page-bg);
}

/* Skip-to-content (a11y), visually hidden until focused. */
.ds-shell-skip {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.ds-shell-skip:focus {
    position: fixed;
    left: 8px;
    top: 8px;
    width: auto;
    height: auto;
    padding: 8px 12px;
    background: var(--ds-accent);
    color: var(--ds-inv);
    z-index: 1000;
    border-radius: var(--ds-r-md);
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-13);
}

/* ── Top nav bar, white, hairline bottom border, ink text ─────
   The BAR is full-bleed (background + border span the viewport) but
   its content is capped to the page content width and centered, so
   on wide screens brand/tabs/search sit in the same optical column
   as the page body instead of being flung to the viewport corners. */
.ds-shell-nav {
    background: var(--ds-surface);
    color: var(--ds-ink);
    border-bottom: 1px solid var(--ds-line);
    position: sticky;
    top: 0;
    z-index: 50;
}
.ds-shell-nav-inner {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: var(--ds-content-max);
    width: 100%;
    margin: 0 auto;
    padding: 0 32px;
    height: 52px;
    /* border-box, like .page: width 100% plus padding on a content-box made
       this bar 384px wide at a 360px viewport (measured 2026-09-03 after the
       .page fix, as the widest element left on /live), hidden by the shell's
       horizontal clip. */
    box-sizing: border-box;
}

.ds-shell-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-14);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ds-ink);
    text-decoration: none;
    padding-right: var(--ds-sp-18);
    margin-right: var(--ds-sp-18);
    border-right: 1px solid var(--ds-line);
    line-height: 1;
}
.ds-shell-mark { flex: 0 0 auto; display: block; }

/* ── The main menu (MainMenu.razor) ─────────────────────────────
   Four sections, each a native details/summary: the summary is the group
   button, the panel under it holds the links. A click, a tap, Enter or Space
   opens it; nothing opens on hover, so a touch screen never has to guess.
   Above 1100px each panel hangs under its own button; from 861px to 1100px
   the panels hang from the header's left edge instead, where the widest one
   (Événements, in French) still fits; at 860px and below the same markup is
   the phone menu's column of fold-outs (the media block at the end). */
.ds-shell-tabs {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-18);
    align-self: stretch;
}

.ds-nav-sec {
    position: relative;
    height: 100%;
}
.ds-nav-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
    padding: 0 2px;
    list-style: none;
    cursor: pointer;
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-13);
    font-weight: 500;
    line-height: 1;
    color: var(--ds-fg-mid);
    white-space: nowrap;
    user-select: none;
    transition: color var(--dur-in) var(--ease-out);
}
.ds-nav-toggle::-webkit-details-marker { display: none; }
.ds-nav-toggle::marker { content: ""; }
.ds-nav-toggle:hover,
.ds-nav-sec[open] > .ds-nav-toggle { color: var(--ds-ink); }
.ds-nav-toggle:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; border-radius: var(--ds-r-sm); }
.ds-nav-chev { flex: 0 0 auto; opacity: .55; transition: transform var(--dur-in) var(--ease-out), opacity var(--dur-in) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
    .ds-nav-chev, .ds-nav-toggle { transition: none; }
}
.ds-nav-sec[open] > .ds-nav-toggle .ds-nav-chev,
.ds-shell-account[open] > .ds-shell-account-toggle .ds-nav-chev { transform: rotate(180deg); opacity: 1; }
/* The section of the page being read: ink and an ink underline riding on the
   nav's hairline. An open panel's button takes the accent line instead, so
   open and current never look alike. */
.ds-nav-sec-on > .ds-nav-toggle { color: var(--ds-ink); font-weight: 600; }
.ds-nav-sec-on > .ds-nav-toggle::after,
.ds-nav-sec[open] > .ds-nav-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--ds-ink);
}
.ds-nav-sec[open] > .ds-nav-toggle::after { background: var(--ds-accent); }
/* The hairline between the three public sections and Mijn Checked. */
.ds-nav-sec-mine { margin-left: var(--ds-sp-4); padding-left: var(--ds-sp-18); }
.ds-nav-sec-mine > .ds-nav-toggle::before {
    content: "";
    position: absolute;
    left: calc(var(--ds-sp-18) * -1);
    top: 17px;
    bottom: 17px;
    border-left: 1px solid var(--ds-line);
}
.ds-nav-sec-mine > .ds-nav-panel { left: calc(var(--ds-sp-18) - var(--ds-sp-12)); }

.ds-nav-panel {
    position: absolute;
    top: 100%;
    left: calc(var(--ds-sp-12) * -1);
    z-index: 60;
    display: grid;
    grid-template-columns: max-content;
    gap: var(--ds-sp-16) var(--ds-sp-32);
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: var(--ds-sp-16) var(--ds-sp-18) var(--ds-sp-18);
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.ds-nav-panel[data-cols="2"] { grid-template-columns: repeat(2, max-content); }
.ds-nav-panel[data-cols="3"] { grid-template-columns: repeat(3, max-content); }
/* Four groups (Tools since the tools wave, 2026-09-25) sit two by two: four
   columns from the third menu entry would run off a laptop screen. */
.ds-nav-panel[data-cols="4"] { grid-template-columns: repeat(2, max-content); }
/* Six groups (Tools since the second tools wave, 2026-09-25: Cijfers
   analyseren and Starten joined) sit three by two; five would leave one hole. */
.ds-nav-panel[data-cols="5"],
.ds-nav-panel[data-cols="6"] { grid-template-columns: repeat(3, max-content); }
.ds-nav-group { min-width: 0; }
/* The section's own overview links (Overzicht, Alle gebeurtenissen) run
   across the top, over a hairline, above the grouped columns. */
.ds-nav-group-top {
    grid-column: 1 / -1;
    padding-bottom: var(--ds-sp-12);
    border-bottom: 1px solid var(--ds-line);
}
.ds-nav-group-top .ds-nav-list { flex-direction: row; flex-wrap: wrap; column-gap: var(--ds-sp-22); }
.ds-nav-group-head {
    margin: 0 0 var(--ds-sp-4);
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-11);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-fg-mute);
}
.ds-nav-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ds-nav-link {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-4);
    margin: 0 -8px;
    padding: 7px 8px;
    border-radius: var(--ds-r-sm);
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-13);
    font-weight: 500;
    line-height: 1.25;
    color: var(--ds-fg-mid);
    text-decoration: none;
    white-space: nowrap;
}
.ds-nav-link:hover { background: var(--ds-page-bg); color: var(--ds-ink); }
.ds-nav-link:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; }
/* Where you are (owner 2026-09-25: the thin bar before the item "echt lelijk"):
   the item sits in a soft green pill in deep green, the site's selected-tab
   language, for the page itself and for its family (a dossier under Bedrijven
   zoeken). No bar, no layout change: padding and weight stay put. */
.ds-nav-link { transition: background-color var(--dur-in) var(--ease-out), color var(--dur-in) var(--ease-out); }
.ds-nav-link-on, .ds-nav-link[aria-current="page"] {
    background: var(--ds-accent-soft);
    color: var(--ds-accent-deep);
    font-weight: 600;
}
.ds-nav-link-on:hover, .ds-nav-link[aria-current="page"]:hover { background: var(--ds-accent-soft); color: var(--ds-accent-deep); }
/* Meldingsregels, the management page under Meldingen. */
.ds-nav-item-sub .ds-nav-link { padding-left: 22px; font-size: var(--ds-fs-12); }

/* Unread-alerts count pill, on Mijn Checked and on Meldingen (semantic "bad"
   accent). */
.ds-shell-tab-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--ds-sp-4);
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    background: var(--ds-bad);
    color: var(--ds-inv);
    font-family: var(--ds-mono);
    font-size: var(--ds-fs-10);
    font-weight: 700;
    line-height: 1;
    border-radius: 99px;
}

.ds-shell-spacer { flex: 1; }

/* ── Search box (a button element that opens the command palette) ── */
.ds-shell-search {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-8);
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-r-md);
    padding: 5px 8px;
    height: 30px;
    min-width: 220px;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--dur-in) var(--ease-out), box-shadow var(--dur-in) var(--ease-out);
}
.ds-shell-search:hover {
    border-color: var(--ds-fg-dim);
}
.ds-shell-search:focus-within,
.ds-shell-search:focus-visible {
    border-color: var(--ds-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 138, 93, 0.10);
}
.ds-shell-search-icon {
    color: var(--ds-fg-mute);
    flex: 0 0 auto;
}
.ds-shell-search-placeholder {
    flex: 1;
    min-width: 0;
    color: var(--ds-fg-mute);
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-12);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-shell-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--ds-ink);
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-12);
    line-height: 1;
    min-width: 0;
}
.ds-shell-search input::placeholder {
    color: var(--ds-fg-mute);
}
.ds-shell-search-kbd {
    font-family: var(--ds-mono);
    font-size: 10px;
    color: var(--ds-fg-mute);
    background: var(--ds-page-bg);
    border: 1px solid var(--ds-line);
    padding: 1px 5px;
    border-radius: var(--ds-r-sm);
    line-height: 1;
    flex: 0 0 auto;
}

/* ── PRO badge, outline pill, amber indicator text/border ───── */
.ds-shell-pro {
    margin-left: var(--ds-sp-12);
    display: inline-flex;
    align-items: center;
    background: var(--ds-surface);
    color: var(--ds-warn);
    border: 1px solid var(--ds-warn-border);
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-11);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 8px;
    border-radius: 99px;
    line-height: 1.4;
}

/* ── Account chrome (right end of nav) ───────────────────────── */
.ds-shell-signin {
    margin-left: var(--ds-sp-12);
    display: inline-flex;
    align-items: center;
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-12);
    font-weight: 600;
    color: var(--ds-ink);
    text-decoration: none;
    line-height: 1;
    padding: 6px 12px;
    border: 1px solid var(--ds-ink);
    border-radius: var(--ds-r-md);
    background: var(--ds-surface);
    transition: border-color var(--dur-in) var(--ease-out), background var(--dur-in) var(--ease-out);
}
.ds-shell-signin:hover {
    background: var(--ds-page-bg);
}
.ds-shell-signin:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
/* The account menu: the name is the button, the four account links hang
   under it, right-aligned to the header's edge. */
.ds-shell-account {
    position: relative;
    margin-left: var(--ds-sp-12);
}
.ds-shell-account-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 2px;
    list-style: none;
    cursor: pointer;
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-12);
    font-weight: 500;
    line-height: 1;
    color: var(--ds-ink);
    user-select: none;
}
.ds-shell-account-toggle::-webkit-details-marker { display: none; }
.ds-shell-account-toggle::marker { content: ""; }
.ds-shell-account-toggle:hover .ds-shell-account-name { color: var(--ds-accent-deep); }
.ds-shell-account-toggle:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: var(--ds-r-sm); }
.ds-shell-account-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-shell-account-menu {
    position: absolute;
    top: calc(100% + 13px);
    right: -8px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 196px;
    margin: 0;
    padding: var(--ds-sp-8) var(--ds-sp-16);
    list-style: none;
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.ds-shell-account-out {
    margin-top: var(--ds-sp-4);
    padding-top: var(--ds-sp-4);
    border-top: 1px solid var(--ds-line);
}

/* The account block at the top of the phone menu (see the markup); the
   wide header has the chrome above, so it only shows in the open menu. */
.ds-shell-navaccount { display: none; }
.ds-shell-navaccount-link {
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-14);
    font-weight: 500;
    color: var(--ds-ink);
    text-decoration: none;
}
.ds-shell-navaccount-link:hover { color: var(--ds-accent-deep); }
.ds-shell-navaccount-main {
    padding: 7px 14px;
    border: 1px solid var(--ds-ink);
    border-radius: var(--ds-r-md);
    font-weight: 600;
}

/* ── Hamburger (mobile only) ─────────────────────────────────── */
.ds-shell-hamburger {
    display: none;
    background: transparent;
    border: 0;
    padding: 6px;
    margin-right: var(--ds-sp-8);
    cursor: pointer;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
}
.ds-shell-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ds-ink);
    border-radius: 1px;
}
.ds-shell-hamburger:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: var(--ds-r-sm); }

/* ── Body container ─────────────────────────────────────────── */
.ds-shell-body {
    flex: 1 0 auto;
    background: var(--ds-page-bg);
    width: 100%;
    min-width: 0;
}

/* ── Footer, white, hairline top border, readable slate links ──
   Same centering contract as the nav: full-bleed surface, content
   capped to the page width so footer columns align with the body. */
.ds-shell-footer {
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-line);
    margin-top: var(--ds-sp-32);
    padding: var(--ds-sp-32) 0;
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-13);
    color: var(--ds-fg-mid);
}
.ds-shell-footer-inner {
    max-width: var(--ds-content-max);
    padding: 0 32px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-sp-32);
    flex-wrap: wrap;
}
.ds-shell-footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-14);
    max-width: 280px;
}
.ds-shell-footer-attrib {
    margin-top: 6px;
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-12);
    line-height: 1.5;
    color: var(--ds-fg-mute);
}
.ds-shell-footer-brand {
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-13);
    line-height: 1.5;
    color: var(--ds-fg-mid);
}
/* 22 between columns, not 32 (2026-09-23). At 32 the Dutch footer fit
   beside the brand column with 3px to spare in the 1116px row, and the
   longer "Bedrijfsgebeurtenissen" (it was "Live") tipped every page's
   footer onto two rows, 121px taller. 22 gives it back room (21px) and
   also brings the English footer onto one row; the French one wraps as
   it did before. */
.ds-shell-footer-cols {
    display: flex;
    gap: var(--ds-sp-22);
    flex-wrap: wrap;
}
.ds-shell-footer-col {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 120px;
}
.ds-shell-footer-head {
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-11);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-ink);
    margin-bottom: var(--ds-sp-4);
}
.ds-shell-footer-col a {
    color: var(--ds-fg-mid);
    text-decoration: none;
    transition: color var(--dur-in) var(--ease-out);
}
.ds-shell-footer-col a:hover { color: var(--ds-ink); }
.ds-shell-footer-lang {
    display: inline-flex;
    gap: var(--ds-sp-8);
    font-family: var(--ds-mono);
    font-size: var(--ds-fs-11);
    letter-spacing: 0.06em;
}
.ds-shell-footer-lang a {
    color: var(--ds-fg-mid);
    text-decoration: none;
}
.ds-shell-footer-lang a:hover { color: var(--ds-ink); }
.ds-shell-lang-on { color: var(--ds-accent-deep) !important; font-weight: 700; }

/* ── A narrower desktop (861 to 1100 px) ─────────────────────────
   The header still holds the four sections, but a panel hung under
   Gebeurtenissen would run past the right edge (the French one is the
   widest), so the panels hang from the header's own left edge instead, and
   the search box keeps its field without the long placeholder room. Mijn
   Checked keeps its small panel under its own button. */
/* ── Application shell motion (redesign phase 1, 2026-09-24) ─────────
   The header stays flat at the top of the page and takes a soft shadow once
   the page has scrolled past 10px (shell.js toggles .is-scrolled). A menu
   panel opens with the one motion pattern (150ms ease-out, opacity plus
   scale .95 to 1, from the corner it hangs from) and closes in 100ms
   ease-in while shell.js holds data-closing, then the details closes. On a
   phone the sections are fold-outs in the menu column and do not scale. */
.ds-shell-nav { transition: box-shadow var(--dur-slow) var(--ease-out); }
.ds-shell-nav.is-scrolled { box-shadow: 0 1px 0 rgba(16, 24, 40, .04), 0 8px 20px -14px rgba(16, 24, 40, .22); }
@media (min-width: 861px) {
    .ds-nav-panel { transform-origin: top left; }
    .ds-shell-account-menu { transform-origin: top right; }
    .ds-nav-sec[open] > .ds-nav-panel,
    .ds-shell-account[open] > .ds-shell-account-menu { animation: ui-pop-in var(--dur-in) var(--ease-out) both; }
    .ds-nav-sec[data-closing] > .ds-nav-panel,
    .ds-shell-account[data-closing] > .ds-shell-account-menu { animation: ui-pop-out var(--dur-out) var(--ease-in) both; }
    .ds-nav-sec[data-closing] > .ds-nav-toggle .ds-nav-chev,
    .ds-shell-account[data-closing] > .ds-shell-account-toggle .ds-nav-chev { transform: none; }
}

@media (min-width: 861px) and (max-width: 1100px) {
    .ds-shell-nav-inner { position: relative; }
    .ds-nav-sec:not(.ds-nav-sec-mine) { position: static; }
    .ds-nav-sec:not(.ds-nav-sec-mine) > .ds-nav-panel { left: var(--ds-sp-12); }
    .ds-shell-search { min-width: 150px; }
    .ds-shell-brand { padding-right: var(--ds-sp-14); margin-right: var(--ds-sp-14); }
    .ds-shell-account-name { max-width: 110px; }
}
/* Below 1024px the four sections, the search and "Aanmelden" did not fit one
   row (measured at 861px: the sign-in button 4px past the edge), so the search
   is the magnifier alone here, as on a phone; the palette it opens has its own
   field and hint. */
@media (min-width: 861px) and (max-width: 1023px) {
    .ds-shell-search {
        flex: none;
        min-width: 0;
        width: 34px;
        height: 32px;
        padding: 0;
        justify-content: center;
    }
    .ds-shell-search-placeholder,
    .ds-shell-search-kbd { display: none; }
}

/* ── Mobile collapse (≤ 860 px) ─────────────────────────────── */
@media (max-width: 860px) {
    .ds-shell-nav-inner {
        padding: 0 var(--ds-sp-12);
        gap: var(--ds-sp-8);
    }
    .ds-shell-brand {
        padding-right: var(--ds-sp-12);
        margin-right: 0;
        border-right: 0;
    }
    .ds-shell-hamburger {
        display: inline-flex;
        order: -1;
    }
    .ds-shell-tabs { display: none; }
    /* The open menu is one column under the bar. It scrolls on its own when a
       section is folded out on a short screen: the bar is sticky, so a column
       taller than the screen could otherwise never show its last links. */
    .ds-shell-nav-open .ds-shell-tabs {
        display: flex;
        position: absolute;
        top: 52px;
        left: 0;
        right: 0;
        background: var(--ds-surface);
        flex-direction: column;
        align-items: stretch;
        padding: var(--ds-sp-12) var(--ds-sp-18) var(--ds-sp-16);
        gap: 0;
        max-height: calc(100vh - 52px);
        max-height: calc(100dvh - 52px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-bottom: 1px solid var(--ds-line);
        box-shadow: 0 12px 24px -16px rgba(16, 24, 40, 0.18);
    }

    /* Each section is a fold-out row: the whole row is the button, the
       chevron turns when it is open, the links sit under it, indented. No
       hover anywhere; a tap opens, a tap closes. */
    .ds-nav-sec {
        position: static;
        height: auto;
        border-bottom: 1px solid var(--ds-line);
    }
    .ds-nav-sec:last-child { border-bottom: 0; }
    .ds-nav-toggle {
        justify-content: space-between;
        height: auto;
        min-height: 46px;
        padding: 0;
        font-size: var(--ds-fs-14);
    }
    .ds-nav-toggle-label { flex: 1; }
    .ds-nav-sec-on > .ds-nav-toggle::after,
    .ds-nav-sec[open] > .ds-nav-toggle::after { display: none; }
    /* The current section keeps a mark on the row: an accent bar at its start. */
    .ds-nav-sec-on > .ds-nav-toggle { box-shadow: inset 3px 0 0 var(--ds-accent); padding-left: var(--ds-sp-12); }
    .ds-nav-sec-mine { margin-left: 0; padding-left: 0; }
    .ds-nav-sec-mine > .ds-nav-toggle::before { display: none; }
    /* Signed out, Mijn Checked holds only Aanmelden and Account aanmaken,
       which the account block at the top of this column already offers. */
    .ds-nav-sec-guest { display: none; }
    .ds-nav-panel,
    .ds-nav-sec-mine > .ds-nav-panel {
        position: static;
        display: flex;
        flex-direction: column;
        gap: var(--ds-sp-14);
        width: auto;
        max-width: none;
        padding: 0 0 var(--ds-sp-16) var(--ds-sp-12);
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .ds-nav-group-top { padding-bottom: var(--ds-sp-8); }
    .ds-nav-group-top .ds-nav-list { flex-direction: column; }
    .ds-nav-link {
        margin: 0;
        padding: 9px 0;
        font-size: var(--ds-fs-14);
        white-space: normal;
    }
    .ds-nav-link:hover { background: none; }
    /* The pill needs room on a phone, where the links sit flush. */
    .ds-nav-link-on, .ds-nav-link[aria-current="page"] { margin: 0 -10px; padding: 9px 10px; }
    .ds-nav-link-on:hover, .ds-nav-link[aria-current="page"]:hover { background: var(--ds-accent-soft); }
    .ds-nav-item-sub .ds-nav-link { padding-left: var(--ds-sp-16); font-size: var(--ds-fs-13); }
    .ds-shell-search {
        min-width: 0;
        flex: 1;
    }
    .ds-shell-search-kbd { display: none; }
    .ds-shell-pro {
        display: none;
    }
    /* The sign-in button stays in the phone header (it was hidden here until
       2026-09-24, which left a phone visitor no way in but the footer); the
       signed-in chrome moves into the menu (.ds-shell-navaccount). */
    .ds-shell-signin {
        margin-left: 0;
        flex: none;
        padding: 7px 10px;
    }
    .ds-shell-account { display: none; }
    /* First in the open menu, where a phone user looks for the account: the
       menu runs to some twenty links, and at its end the block sat below
       the fold. */
    .ds-shell-nav-open .ds-shell-navaccount {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ds-sp-8) var(--ds-sp-18);
        padding: var(--ds-sp-4) 0 var(--ds-sp-12);
        border-bottom: 1px solid var(--ds-line);
    }
    .ds-shell-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ds-sp-22);
    }
    .ds-shell-footer-cols {
        gap: var(--ds-sp-22);
    }
    .ds-shell-footer-col {
        min-width: 140px;
    }
}

/* A phone: the brand, the menu, the search and the sign-in button share
   one row, and with a placeholder the search shrank to a sliver
   ("KBO, naa..."). Here it is the magnifier alone, the search everyone
   recognises; the palette it opens has its own field and hint. */
@media (max-width: 480px) {
    .ds-shell-search {
        flex: none;
        width: 34px;
        height: 32px;
        padding: 0;
        justify-content: center;
    }
    .ds-shell-search-placeholder { display: none; }
    /* The footer's four short columns two by two instead of one long stack. */
    .ds-shell-footer-inner { padding: 0 var(--ds-sp-18); }
    .ds-shell-footer-cols {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ds-sp-26) var(--ds-sp-16);
        width: 100%;
    }
    .ds-shell-footer-col { min-width: 0; }
}