/*
 * Mijn HCN — the signed-in screens (D-94C2A), built to the owner-approved V18 design.
 *
 * Loaded after tokens.css and portal.css on a page that renders [hcn_portal]. Every rule is scoped to
 * `.hcn-mijn` (the signed-in shell) or to `body.hcn-mijn-screen`, which PortalController adds to <body>
 * only when a pilgrim is signed in — the signed-out screens (portal-auth.css) and every other page of
 * the site are untouched.
 *
 * Structure, in the order the page renders: the full-bleed staff band, the sticky charcoal header and
 * its phone drawer, the welcome band, the ten-stage journey, the service + payment pair, and the
 * documents + help pair. Content sits in a 1290px column (`.hcn-mijn-band`); the two dark bands reach
 * the viewport edges from inside the theme's narrower column.
 *
 * Brand values (gold, charcoal, the V18 green, the staff orange, the hover cream, the sand gradient)
 * come from tokens.css. The greys below are local to this screen and declared once, at the top. A few
 * sit a shade darker than the prototype so that every piece of text clears 4.5:1 — the ratios are
 * recorded beside them.
 */

.hcn-portal.hcn-mijn {
    /* Measures and neutrals, declared once. */
    --mijn-width: 1290px;
    --mijn-gutter: clamp(16px, 3vw, 36px);
    --mijn-ink: var(--hcn-color-text);
    --mijn-heading: #272829;
    --mijn-quiet: #67615b;                       /* 6.11:1 on white */
    --mijn-quieter: #6d6964;                     /* 5.45:1 on white */
    --mijn-caption: #766d66;                     /* 5.06:1 on white (V18 #81786e measured 4.33:1) */
    --mijn-line: #e9e5df;
    --mijn-line-warm: #e8ddcf;
    --mijn-panel: #f8f9f9;
    --mijn-panel-line: #ebe9e6;
    --mijn-track: #d6d9dc;
    --mijn-future: #6b7276;                      /* 4.64:1 on the panel (V18 #8c9397 measured 2.96:1) */
    --mijn-green: var(--hcn-color-mijn-green);
    --mijn-green-deep: var(--hcn-color-mijn-green-deep);
    --mijn-green-soft: #e8f5ec;
    --mijn-green-ink: #176039;
    --mijn-amber: #835d15;                       /* 5.37:1 on #fff3d2 */
    --mijn-amber-soft: #fff3d2;
    --mijn-amber-page: #fff8e8;
    --mijn-red: #aa3432;                         /* 5.64:1 on #ffebe9 */
    --mijn-red-soft: #ffebe9;
    --mijn-red-page: #fff1ef;
    --mijn-cream: var(--hcn-color-mijn-hover-cream);
    --mijn-gold: var(--hcn-color-brand);
    --mijn-gold-deep: var(--hcn-color-brand-strong);
    --mijn-charcoal: var(--hcn-color-surface-charcoal);
    --mijn-radius: 18px;
    --mijn-radius-sm: 12px;
    --mijn-radius-control: 10px;
    --mijn-gap: 22px;
    --mijn-section: 50px;
    --mijn-ring: 3px solid var(--hcn-color-brand);
    --mijn-ring-on-dark: 3px solid var(--hcn-color-brand);
    --mijn-sticky-top: var(--wp-admin--admin-bar--height, 0px);

    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 56px;
    font-family: var(--hcn-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--mijn-ink);
}
.hcn-mijn *,
.hcn-mijn *::before,
.hcn-mijn *::after { box-sizing: border-box; }

.hcn-mijn ul,
.hcn-mijn ol,
.hcn-mijn dl { margin: 0; padding: 0; list-style: none; }
.hcn-mijn p { margin: 0; }
.hcn-mijn h1,
.hcn-mijn h2,
.hcn-mijn h3 { margin: 0; font-family: inherit; color: var(--mijn-heading); }
/*
 * Hello Elementor's theme.css carries `.page-content a { text-decoration: underline }` — the same
 * specificity as a plain `.hcn-mijn a`, and it is enqueued after this file, so load order decided it and
 * every link on the page came out underlined: the navigation, the brand, the green buttons, all of it.
 * Two classes on the portal root settle it by specificity instead of by order. The two welcome links that
 * V18 does underline carry their own two-class rule and are unaffected.
 */
/*
 * These two want different weights. `text-decoration` has to outrank the host theme (two classes), but
 * `color` must stay beatable by the components, or a one-class rule like the green family button loses its
 * white text to `inherit` — which is exactly what happened when they were written as one rule.
 */
.hcn-mijn a { color: inherit; }
.hcn-portal.hcn-mijn a { text-decoration: none; }
/*
 * The same story as the link reset above, and a worse one. The Elementor kit carries
 * `.elementor-kit-92 button { padding: 20px 40px }`, so every button here that did not declare its own
 * padding came out at 82x42: the notifications bell as a wide oval, the copy control beside the
 * registration number, the drawer's close button, and — because that padding is not symmetric — the
 * percentage inside the progress ring sat 14px right of its centre. Two classes on the root outrank the
 * kit; the handful of buttons that want real padding carry the same two classes below, so they still win.
 */
.hcn-portal.hcn-mijn button,
.hcn-mijn-steps button {
    padding: 0;
    min-height: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
    background-image: none;
    border-radius: 0;
    cursor: pointer;
}
.hcn-mijn img { max-width: 100%; }
.hcn-mijn .hcn-ico { flex: none; display: block; }
.hcn-mijn :focus-visible { outline: var(--mijn-ring); outline-offset: 3px; }

/* The content column. The page itself sits inside the theme's narrower container, so each band pulls
   itself out to the full viewport and re-centres its own content. */
.hcn-mijn .hcn-mijn-band {
    width: 100%;
    max-width: var(--mijn-width);
    margin-inline: auto;
    padding-inline: var(--mijn-gutter);
}
/*
 * The two bands reach the viewport edges. `100vw` plus a negative margin is the usual way to do that, and
 * it is wrong here: `100vw` counts the vertical scrollbar's gutter, so on a page tall enough to scroll the
 * bands ended 8px past each edge and the whole page scrolled sideways. The portal's own column is already
 * the full client width — `body.hcn-mijn-screen main.site-main` below takes the theme's max-width and
 * padding off — so plain `width: 100%` is exact, scrollbar or not. If a future theme re-constrains that
 * column the bands simply stop being full-bleed, which is a far better failure than a sideways scroll.
 */
.hcn-mijn .hcn-mijn-adminbar,
.hcn-mijn .hcn-mijn-top {
    width: 100%;
    margin-inline: 0;
}

.hcn-mijn .hcn-mijn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hcn-mijn .hcn-mijn-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 14px 20px;
    font-weight: 700;
    color: var(--hcn-color-on-dark);
    background: var(--mijn-charcoal);
    border-radius: var(--mijn-radius-control);
}
.hcn-mijn .hcn-mijn-skip:focus,
.hcn-mijn .hcn-mijn-skip:focus-visible {
    position: fixed;
    left: 16px;
    top: calc(var(--mijn-sticky-top) + 12px);
    color: var(--hcn-color-on-dark);
    outline: var(--mijn-ring-on-dark);
}

/* ------------------------------------------------------------------ 1. staff band */

.hcn-mijn .hcn-mijn-adminbar {
    background: var(--hcn-color-mijn-staff);
    color: var(--hcn-color-on-dark);
    font-size: 14px;
    line-height: 1.45;
}
.hcn-mijn .hcn-mijn-adminbar .hcn-mijn-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 22px;
    min-height: 60px;
    padding-block: 10px;
}
.hcn-mijn .hcn-mijn-adminbar__text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    text-align: center;
    color: var(--hcn-color-on-dark);
}
.hcn-mijn .hcn-mijn-adminbar__label,
.hcn-mijn .hcn-mijn-adminbar__who { font-weight: 750; }
.hcn-mijn .hcn-mijn-adminbar__sep { display: none; }
.hcn-mijn .hcn-mijn-adminbar__form { margin: 0; }
/* Part A: the account reference beside the name, and the notice a stale staff tab shows. */
.hcn-mijn .hcn-mijn-adminbar__ref {
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    white-space: nowrap;
}
.hcn-mijn .hcn-mijn-adminbar__stale {
    flex-basis: 100%;
    margin: 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fff4d6;
    color: #4a3410;
    font-size: 13px;
    font-weight: 650;
    text-align: center;
    white-space: normal;
}
.hcn-mijn .hcn-mijn-adminbar__stale[hidden] { display: none; }
.hcn-portal.hcn-mijn .hcn-mijn-adminbar__back {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 40px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 740;
    white-space: nowrap;
    color: var(--hcn-color-on-dark);
    background: #181818;
    border: 1px solid #181818;
    border-radius: 7px;
    transition: background-color .2s ease, border-color .2s ease;
}
.hcn-mijn .hcn-mijn-adminbar__back::before { content: ""; position: absolute; inset: -5px; }
.hcn-mijn .hcn-mijn-adminbar__back:hover { background: #333; border-color: #333; }
.hcn-mijn .hcn-mijn-adminbar__back:focus-visible { outline: 3px solid var(--hcn-color-on-dark); outline-offset: 3px; }

/* ------------------------------------------------------------------ 2. sticky header */

.hcn-mijn .hcn-mijn-top {
    position: sticky;
    top: var(--mijn-sticky-top);
    z-index: 100;
    color: var(--hcn-color-on-dark);
    background: color-mix(in srgb, var(--mijn-charcoal) 96%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--hcn-color-on-dark) 12%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: background-color .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.hcn-mijn .hcn-mijn-top.is-scrolled {
    background: color-mix(in srgb, var(--mijn-charcoal) 86%, transparent);
    box-shadow: 0 9px 34px rgba(19, 20, 20, .11);
    border-bottom-color: color-mix(in srgb, var(--mijn-gold) 33%, transparent);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}
.hcn-mijn .hcn-mijn-top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 98px;
    transition: min-height .3s cubic-bezier(.2, .8, .2, 1);
}
.hcn-mijn .hcn-mijn-top.is-scrolled .hcn-mijn-top__inner { min-height: 67px; }
.hcn-mijn .hcn-mijn-brand { display: flex; align-items: center; flex: none; min-width: 0; }
.hcn-mijn .hcn-mijn-brand__logo {
    display: block;
    width: auto;
    height: 52px;
    max-width: 250px;
    overflow: hidden;
    object-fit: contain;
    transition: height .3s cubic-bezier(.2, .8, .2, 1);
}
.hcn-mijn .hcn-mijn-top.is-scrolled .hcn-mijn-brand__logo { height: 35px; }

.hcn-mijn .hcn-mijn-nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: clamp(3px, 1.1vw, 15px); min-width: 0; }
.hcn-mijn .hcn-mijn-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 13px;
    font-size: 14px;
    font-weight: 520;
    white-space: nowrap;
    color: color-mix(in srgb, var(--hcn-color-on-dark) 90%, transparent);
    border-radius: 9px;
    transition: background-color .18s ease, transform .18s ease;
}
/* Hover alone reveals the cream; the current page is weight and `aria-current`, never a filled pill. */
.hcn-mijn .hcn-mijn-nav__link:hover { color: var(--hcn-color-on-dark); background: color-mix(in srgb, var(--mijn-cream) 23%, transparent); transform: scale(1.045); }
.hcn-mijn .hcn-mijn-nav__link.is-active { color: var(--hcn-color-on-dark); font-weight: 620; background: transparent; box-shadow: none; }
.hcn-mijn .hcn-mijn-nav__link:focus-visible { outline: var(--mijn-ring-on-dark); outline-offset: 2px; }

.hcn-mijn .hcn-mijn-top__end { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex: none; }
.hcn-portal.hcn-mijn .hcn-mijn-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    padding: 0;
    color: var(--hcn-color-on-dark);
    background: transparent;
    border: 0;
    border-radius: 8px;
    position: relative;
    transition: background-color .2s ease;
}
.hcn-mijn .hcn-mijn-burger::before { content: ""; position: absolute; inset: -5px; }
.hcn-mijn .hcn-mijn-burger:hover { background: color-mix(in srgb, var(--mijn-cream) 23%, transparent); }

.hcn-portal.hcn-mijn .hcn-mijn-iconbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color: var(--hcn-color-on-dark);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--hcn-color-on-dark) 17%, transparent);
    border-radius: 50%;
    transition: background-color .18s ease, transform .18s ease;
}
.hcn-mijn .hcn-mijn-iconbtn::before { content: ""; position: absolute; inset: -5px; }
.hcn-mijn .hcn-mijn-iconbtn:hover { color: var(--hcn-color-on-dark); background: color-mix(in srgb, var(--mijn-cream) 19%, transparent); transform: scale(1.07); }

.hcn-mijn .hcn-mijn-account { position: relative; }
.hcn-mijn .hcn-mijn-account > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 13px;
    list-style: none;
    color: var(--hcn-color-on-dark);
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}
.hcn-mijn .hcn-mijn-account > summary::-webkit-details-marker { display: none; }
.hcn-mijn .hcn-mijn-account > summary::marker { content: ""; }
.hcn-mijn .hcn-mijn-account > summary:hover { background: color-mix(in srgb, var(--mijn-cream) 19%, transparent); transform: scale(1.025); }
.hcn-mijn .hcn-mijn-account__name {
    display: block;
    max-width: 150px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 610;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hcn-mijn .hcn-mijn-account__chevron { opacity: .82; transition: transform .2s ease; }
.hcn-mijn .hcn-mijn-account[open] .hcn-mijn-account__chevron { transform: rotate(180deg); }
.hcn-mijn .hcn-mijn-account__panel {
    position: absolute;
    top: calc(100% + 11px);
    right: 0;
    z-index: 110;
    /* The panel grows with its longest entry, from a 210px floor up to the old 300px as a ceiling. */
    width: max-content;
    min-width: 210px;
    max-width: min(300px, calc(100vw - 32px));
    padding: 12px 14px;
    color: var(--mijn-ink);
    background: var(--hcn-color-surface);
    border: 1px solid #e8dacb;
    border-radius: 13px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    animation: hcn-mijn-menu .24s cubic-bezier(.2, .8, .2, 1) both;
}
.hcn-mijn .hcn-mijn-account__panel::before {
    content: "";
    position: absolute;
    right: 26px;
    top: -6px;
    width: 10px;
    height: 10px;
    background: var(--hcn-color-surface);
    border-top: 1px solid var(--mijn-line);
    border-right: 1px solid var(--mijn-line);
    transform: rotate(-45deg);
}
.hcn-mijn .hcn-mijn-account__title {
    padding: 9px 12px 12px;
    font-size: 11px;
    font-weight: 720;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #857a6d;
}
.hcn-mijn .hcn-mijn-account__panel a,
.hcn-portal.hcn-mijn .hcn-mijn-account__logout button {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 48px;
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 550;
    text-align: left;
    color: var(--mijn-ink);
    background: transparent;
    border: 0;
    border-radius: 9px;
    transition: background-color .18s ease, transform .18s ease;
}
.hcn-mijn .hcn-mijn-account__panel a:hover,
.hcn-mijn .hcn-mijn-account__logout button:hover { background: var(--mijn-cream); transform: scale(1.018); }
.hcn-mijn .hcn-mijn-account__panel a .hcn-ico,
.hcn-mijn .hcn-mijn-account__logout .hcn-ico { color: var(--mijn-gold-deep); }
.hcn-mijn .hcn-mijn-account__note { margin-left: auto; font-size: 11px; font-weight: 430; color: #7d7268; }
.hcn-mijn .hcn-mijn-account__panel hr { margin: 7px; border: 0; border-top: 1px solid var(--mijn-line); }
.hcn-mijn .hcn-mijn-account__logout { margin: 0; }
.hcn-mijn .hcn-mijn-account__logout button,
.hcn-mijn .hcn-mijn-account__logout .hcn-ico { color: #A33C39; }

.hcn-mijn .hcn-mijn-bell { position: relative; }
.hcn-mijn .hcn-mijn-bell__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(274px, calc(100vw - 32px));
    padding: 17px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mijn-ink);
    background: var(--hcn-color-surface);
    border: 1px solid var(--mijn-line);
    border-radius: var(--mijn-radius-sm);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
}
.hcn-mijn .hcn-mijn-bell__panel[hidden] { display: none; }
.hcn-mijn .hcn-mijn-bell__panel strong { font-size: 15px; }
.hcn-mijn .hcn-mijn-bell__panel span { color: var(--mijn-quiet); }

/* The phone drawer: off-canvas from the left, never a dropdown. */
.hcn-mijn .hcn-mijn-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 180;
    background: rgba(17, 18, 19, .53);
    opacity: 0;
    transition: opacity .3s ease;
}
.hcn-mijn .hcn-mijn-drawer-backdrop[hidden] { display: none; }
body.admin-bar .hcn-mijn .hcn-mijn-drawer { top: var(--wp-admin--admin-bar--height, 0px); }
.hcn-mijn .hcn-mijn-drawer-backdrop.is-open { opacity: 1; }
/*
 * The sticky header already clears WordPress's admin bar, because WordPress offsets a sticky `top: 0`
 * itself. A fixed element gets no such help, so the drawer's own title and close button sat under the bar
 * for every signed-in staff member — which is exactly who uses this, through "View as pilgrim". The
 * variable is WordPress's own and carries the right height at each breakpoint (32px / 46px); the fallback
 * is 0 so a pilgrim, who has no admin bar, sees the drawer reach the top as V18 draws it.
 */
.hcn-mijn .hcn-mijn-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 190;
    display: flex;
    flex-direction: column;
    width: min(310px, 86vw);
    height: 100vh;
    height: 100dvh;
    color: var(--hcn-color-on-dark);
    background: color-mix(in srgb, var(--mijn-charcoal) 99%, transparent);
    box-shadow: 18px 0 50px rgba(0, 0, 0, .23);
    transform: translateX(-105%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform .34s cubic-bezier(.22, .77, .25, 1), visibility .34s ease;
}
.hcn-mijn .hcn-mijn-drawer.is-open { transform: translateX(0); visibility: visible; }
.hcn-mijn .hcn-mijn-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 21px 20px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--hcn-color-on-dark) 11%, transparent);
}
.hcn-mijn .hcn-mijn-drawer__title { font-size: 13px; font-weight: 720; letter-spacing: .11em; text-transform: uppercase; color: color-mix(in srgb, var(--hcn-color-on-dark) 78%, transparent); }
.hcn-portal.hcn-mijn .hcn-mijn-drawer__close {
    position: relative;
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    color: var(--hcn-color-on-dark);
    background: color-mix(in srgb, var(--hcn-color-on-dark) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--hcn-color-on-dark) 16%, transparent);
    border-radius: 8px;
    transition: background-color .2s ease;
}
.hcn-mijn .hcn-mijn-drawer__close::before { content: ""; position: absolute; inset: -5px; }
.hcn-mijn .hcn-mijn-drawer__close:hover { background: color-mix(in srgb, var(--mijn-cream) 23%, transparent); }
.hcn-mijn .hcn-mijn-drawer__links { display: flex; flex-direction: column; gap: 7px; padding: 22px 13px 24px; }
.hcn-mijn .hcn-mijn-drawer__link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 13px 17px;
    font-size: 15px;
    font-weight: 530;
    color: color-mix(in srgb, var(--hcn-color-on-dark) 88%, transparent);
    border-radius: 9px;
    transition: background-color .18s ease, transform .18s ease;
}
.hcn-mijn .hcn-mijn-drawer__link:hover { color: var(--hcn-color-on-dark); background: color-mix(in srgb, var(--mijn-cream) 23%, transparent); transform: scale(1.025); }
.hcn-mijn .hcn-mijn-drawer__link.is-active { color: var(--hcn-color-on-dark); font-weight: 630; background: transparent; }
.hcn-mijn .hcn-mijn-drawer__link:focus-visible,
.hcn-mijn .hcn-mijn-drawer__close:focus-visible { outline: var(--mijn-ring-on-dark); outline-offset: 2px; }
body.hcn-mijn-drawer-open { overflow: hidden; }

/* ------------------------------------------------------------------ 3. welcome */

.hcn-mijn .hcn-mijn-main { display: block; }
.hcn-mijn .hcn-mijn-main:focus { outline: none; }

.hcn-mijn .hcn-mijn-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(315px, .8fr);
    align-items: center;
    /*
     * The band gives every section a 36px gutter, and the cards inside it start after that. This card IS
     * the band, so its gutter was acting as its own padding and it stood 36px proud on each side of the
     * service, journey and document cards below it. Capping it at the inner column width puts every card
     * on the same two edges, which is how the approved design reads.
     */
    width: calc(100% - 2 * var(--mijn-gutter));
    max-width: calc(var(--mijn-width) - 2 * var(--mijn-gutter));
    margin-top: var(--mijn-section);
    margin-inline: auto;
    min-height: 180px;
    padding: 18px clamp(15px, 2.2vw, 30px);
    border: 1px solid var(--mijn-line-warm);
    border-radius: 14px;
    overflow: hidden;
    background-image:
        linear-gradient(95deg, rgba(255, 255, 255, .83), rgba(255, 255, 255, .95) 65%, rgba(255, 255, 255, .97)),
        url("../images/mijn-hcn-mosaic.webp");
    background-position: center, left top;
    background-size: auto, 330px auto;
    background-repeat: no-repeat, repeat;
    box-shadow: 0 6px 18px rgba(53, 46, 35, .035);
}
.hcn-mijn .hcn-mijn-welcome__main { min-width: 0; padding: 4px 24px 4px 0; }
.hcn-mijn .hcn-mijn-welcome__title {
    margin-bottom: 5px;
    font-size: clamp(22px, 2.1vw, 29px);
    font-weight: 620;
    line-height: 1.12;
    letter-spacing: -.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.hcn-mijn .hcn-mijn-welcome__sub { margin-bottom: 12px; font-size: 13px; line-height: 1.45; color: var(--mijn-quiet); }
.hcn-mijn .hcn-mijn-welcome__details { display: flex; align-items: end; gap: 12px 20px; flex-wrap: wrap; }
.hcn-mijn .hcn-mijn-ref { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 18px; border-right: 1px solid #dcd4c9; }
.hcn-mijn .hcn-mijn-ref__label { font-size: 11px; font-weight: 540; color: #6f665c; }
.hcn-mijn .hcn-mijn-ref__row { display: flex; align-items: center; gap: 6px; }
.hcn-mijn .hcn-mijn-ref__value {
    font-size: clamp(16px, 1.6vw, 21px);
    font-weight: 730;
    line-height: 1.3;
    letter-spacing: -.025em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #242526;
}
.hcn-portal.hcn-mijn .hcn-mijn-copy {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    color: var(--mijn-gold-deep);
    background: transparent;
    border: 1px solid var(--mijn-line-warm);
    border-radius: 9px;
    transition: background-color .18s ease, border-color .18s ease;
}
.hcn-mijn .hcn-mijn-copy::before { content: ""; position: absolute; inset: -7px; }
.hcn-mijn .hcn-mijn-copy:hover { background: var(--hcn-color-mijn-sand-top); border-color: #e3d4bf; }
.hcn-mijn .hcn-mijn-copy.is-done { color: var(--mijn-green); background: var(--mijn-green-soft); border-color: #cae3d5; }

.hcn-mijn .hcn-mijn-facts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 1px 0 3px; }
.hcn-mijn .hcn-mijn-fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 550;
    line-height: 1.3;
    white-space: nowrap;
    background: rgba(255, 255, 255, .8);
    border: 1px solid #e3d9cd;
    border-radius: 7px;
}
.hcn-mijn .hcn-mijn-fact .hcn-ico { color: var(--mijn-gold-deep); }
.hcn-mijn .hcn-mijn-fact--success { color: var(--mijn-green-ink); background: #eef7f1; border-color: #cee3d6; }
.hcn-mijn .hcn-mijn-fact--warning { color: var(--mijn-amber); background: var(--mijn-amber-page); border-color: #ecdcb4; }
.hcn-mijn .hcn-mijn-fact--neutral { color: var(--mijn-quieter); }
.hcn-mijn .hcn-mijn-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }

.hcn-mijn .hcn-mijn-progress,
.hcn-mijn .hcn-mijn-done {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 8px 0 8px clamp(15px, 2vw, 27px);
}
/*
 * The ring draws its arc from `--pct`, and nothing ever set it: the template writes the real figure to
 * `data-pct`, the gradient read `--pct`, and no rule connected the two — so every ring drew `green 0%`
 * and came out entirely grey while the number beside it said 20%. Inline styles are not allowed here, and
 * there are only ever six values (five milestones, 0 to 5 satisfied), so the six states are written out.
 * Both the number and the arc now come from the same server figure.
 */
@property --pct {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
.hcn-portal.hcn-mijn .hcn-mijn-ring {
    --pct: 0;
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 91px;
    height: 91px;
    color: var(--mijn-green);
    background: conic-gradient(var(--mijn-green) calc(var(--pct) * 1%), #dedfdd 0);
    border: 0;
    border-radius: 50%;
    isolation: isolate;
    /* `--pct` is a registered number, so the arc can sweep up from nothing on first paint. */
    transition: box-shadow .18s ease, --pct .9s cubic-bezier(.22, .77, .25, 1);
}
.hcn-portal.hcn-mijn .hcn-mijn-ring[data-pct="0"] { --pct: 0; }
.hcn-portal.hcn-mijn .hcn-mijn-ring[data-pct="20"] { --pct: 20; }
.hcn-portal.hcn-mijn .hcn-mijn-ring[data-pct="40"] { --pct: 40; }
.hcn-portal.hcn-mijn .hcn-mijn-ring[data-pct="60"] { --pct: 60; }
.hcn-portal.hcn-mijn .hcn-mijn-ring[data-pct="80"] { --pct: 80; }
.hcn-portal.hcn-mijn .hcn-mijn-ring[data-pct="100"] { --pct: 100; }
.hcn-mijn .hcn-mijn-ring::before { content: ""; position: absolute; inset: 9px; background: var(--hcn-color-surface); border-radius: 50%; z-index: -1; }
.hcn-mijn .hcn-mijn-ring:hover { box-shadow: 0 0 0 5px rgba(32, 123, 78, .10); }
.hcn-mijn .hcn-mijn-ring:focus-visible { outline: 3px solid var(--mijn-gold-deep); outline-offset: 4px; }
.hcn-mijn .hcn-mijn-ring__number { font-size: 21px; font-weight: 750; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.hcn-mijn .hcn-mijn-progress__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 260px; }
.hcn-mijn .hcn-mijn-progress__label { font-size: 11px; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; color: #736a61; }
.hcn-mijn .hcn-mijn-progress__remaining { font-size: 16px; font-weight: 710; line-height: 1.25; color: var(--mijn-ink); }
.hcn-mijn .hcn-mijn-progress__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 3px; }
/* A control the family can see and hit, rather than a line of underlined text. */
.hcn-portal.hcn-mijn .hcn-mijn-progress__all {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 13px;
    font-size: 11px;
    font-weight: 620;
    color: #6b625a;
    background: var(--hcn-color-surface);
    border: 1px solid var(--mijn-line-warm);
    border-radius: 9px;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.hcn-portal.hcn-mijn .hcn-mijn-progress__all::before { content: ""; position: absolute; inset: -7px; }
.hcn-portal.hcn-mijn .hcn-mijn-progress__all:hover { color: var(--mijn-ink); background: var(--hcn-color-mijn-hover-cream); border-color: #e7d3b8; }
.hcn-mijn .hcn-mijn-progress__all { position: relative; }
.hcn-mijn .hcn-mijn-progress__all::before { content: ""; position: absolute; inset: -7px; }
.hcn-mijn .hcn-mijn-progress__all:hover { color: var(--mijn-ink); }

/*
 * UX Step 1 (0.69.0-dev): the next action. One filled green button, labelled with the task, in the welcome
 * column where the eye lands after the greeting — it replaces the 12px "Stap afronden" link. Older pilgrims
 * on a phone: at least 52px tall, 17px text, the whole width of the card under 720px. When HCN is checking
 * something, the same place carries a calm message instead (no button, no box: the welcome card is the box).
 * Homepage corrections (0.69.2-dev): with nothing open and nothing being checked the place stays empty, so the
 * contact link that message carried is gone.
 */
.hcn-mijn .hcn-mijn-next { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 4px 0 18px; }

/*
 * Premium Action Card (0.70.0-dev, owner-approved direction). The one thing the family should do now, in the
 * welcome column: a quiet ivory panel with a warm-gold hairline, the step's own icon from the portal set, a
 * status line, a heading that says what is needed, one short explanation and the green button. No red fill,
 * no side border, no blue: urgency is carried by the words and the amber status line, not by alarm colours.
 * Measured on the ivory: status 5.6:1 (a routine step 8.2:1), heading 14.0:1, text 12.2:1, reason 8.2:1, "more" 5.8:1,
 * button 5.2:1, focus ring 4.4:1. It sits inside the welcome card, so it takes no shadow of its own and a smaller
 * radius than the card around it: one surface on another, not a second floating card.
 */
.hcn-mijn .hcn-mijn-action {
    margin: 6px 0 20px;
    padding: 22px 24px 24px;
    background: color-mix(in srgb, var(--hcn-color-mijn-sand-top) 40%, var(--hcn-color-surface));
    border: 1px solid color-mix(in srgb, var(--mijn-gold) 45%, var(--hcn-color-surface));
    border-radius: 12px;
}
.hcn-mijn .hcn-mijn-action__head { display: flex; align-items: center; gap: 16px; }
.hcn-mijn .hcn-mijn-action__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: none;
    color: var(--mijn-gold-deep);
    background: var(--hcn-color-surface);
    border: 1px solid color-mix(in srgb, var(--mijn-gold) 32%, var(--hcn-color-surface));
    border-radius: 14px;
}
.hcn-mijn .hcn-mijn-action__heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hcn-mijn .hcn-mijn-action__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mijn-amber);
}
.hcn-mijn .hcn-mijn-action__dot { width: 8px; height: 8px; flex: none; background: currentColor; border-radius: 50%; }
/* A routine step (confirming the details) is asked for in a calmer voice than a document HCN wants replaced. */
.hcn-mijn .hcn-mijn-action__status--neutral { color: var(--hcn-color-mijn-ink-soft); }
.hcn-mijn .hcn-mijn-action__status--neutral .hcn-mijn-action__dot { background: var(--mijn-gold-deep); }
.hcn-mijn .hcn-mijn-action__title {
    margin: 0;
    font-size: clamp(20px, 1.75vw, 23px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--mijn-heading);
    text-wrap: balance;
    overflow-wrap: anywhere;
}
/* The explanation sits under the heading, not under the icon: one left edge for everything the family reads. */
.hcn-mijn .hcn-mijn-action__body { margin: 14px 0 0 70px; overflow-wrap: anywhere; }
.hcn-mijn .hcn-mijn-action__text { max-width: 60ch; margin: 0; font-size: 16px; line-height: 1.5; color: #34312f; }
.hcn-mijn .hcn-mijn-action__reason { max-width: 60ch; margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--hcn-color-mijn-ink-soft); }
.hcn-mijn .hcn-mijn-action__reason strong { font-weight: 680; color: #34312f; }
.hcn-mijn .hcn-mijn-action__more { max-width: 60ch; margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--mijn-quiet); }
.hcn-mijn .hcn-mijn-action .hcn-mijn-next__cta { margin-top: 18px; }
/* Three classes: the portal's link reset (`.hcn-portal.hcn-mijn a`) must not take the colour or the weight. */
.hcn-portal.hcn-mijn .hcn-mijn-next__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 14px 26px;
    font-size: 17px;
    font-weight: 680;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-align: center;
    color: var(--hcn-color-on-dark);
    background: var(--mijn-green);
    border: 1px solid var(--mijn-green-deep);
    border-radius: var(--mijn-radius-control);
    box-shadow: 0 3px 10px rgba(23, 96, 57, .16);
    transition: background-color .18s ease, transform .18s cubic-bezier(.22, .77, .25, 1), box-shadow .18s ease;
}
.hcn-portal.hcn-mijn .hcn-mijn-next__cta:hover { color: var(--hcn-color-on-dark); background: var(--mijn-green-deep); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(23, 96, 57, .2); }
.hcn-portal.hcn-mijn .hcn-mijn-next__cta:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(23, 96, 57, .16); }
/* The deep gold of the progress ring's focus: the brand gold measures under 3:1 on the ivory card. */
.hcn-portal.hcn-mijn .hcn-mijn-next__cta:focus-visible { outline: 3px solid var(--mijn-gold-deep); outline-offset: 3px; }
.hcn-portal.hcn-mijn .hcn-mijn-next__cta .hcn-ico { flex: none; color: var(--hcn-color-on-dark); }
.hcn-mijn .hcn-mijn-next--calm { flex-direction: row; gap: 14px; }
.hcn-mijn .hcn-mijn-next__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    color: var(--mijn-green-ink);
    background: var(--mijn-green-soft);
    border-radius: 50%;
}
.hcn-mijn .hcn-mijn-next__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 62ch; }
.hcn-mijn .hcn-mijn-next__title { margin: 0 0 2px; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--mijn-heading); }
.hcn-mijn .hcn-mijn-next__line { margin: 0; font-size: 16px; line-height: 1.45; color: #34312f; }

.hcn-mijn .hcn-mijn-done__icon { display: grid; place-items: center; width: 49px; height: 49px; flex: none; color: var(--hcn-color-on-dark); background: var(--mijn-green); border-radius: 50%; }
.hcn-mijn .hcn-mijn-done__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hcn-mijn .hcn-mijn-done__eyebrow { font-size: 12px; font-weight: 670; letter-spacing: .075em; text-transform: uppercase; color: #4e6b55; }
.hcn-mijn .hcn-mijn-done__title { font-size: 17px; font-weight: 730; line-height: 1.2; color: var(--mijn-green-ink); }
.hcn-mijn .hcn-mijn-done__service { font-size: 12px; line-height: 1.45; color: #3f403d; overflow-wrap: anywhere; }
/* UX Step 1: the completion message is read, not glanced at — 15px, the body colour. */
.hcn-mijn .hcn-mijn-done__next { font-size: 15px; line-height: 1.45; color: #34312f; }

/* ------------------------------------------------------------------ 4. the Hadj journey */

.hcn-mijn .hcn-mijn-journey { margin-top: var(--mijn-section); }
.hcn-mijn .hcn-mijn-journey__head { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.hcn-mijn .hcn-mijn-journey__head h2 { margin-bottom: 3px; font-size: 19px; font-weight: 675; line-height: 1.25; letter-spacing: -.035em; }
.hcn-mijn .hcn-mijn-journey__head p { font-size: 12px; line-height: 1.5; color: var(--mijn-quiet); }
.hcn-mijn .hcn-mijn-journey__panel {
    position: relative;
    min-width: 0;
    padding: 20px 20px 14px;
    background: var(--mijn-panel);
    border: 1px solid var(--mijn-panel-line);
    border-radius: 16px;
    overflow: hidden;
}
.hcn-mijn .hcn-mijn-journey__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.hcn-mijn .hcn-mijn-journey__identity { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 650; color: #43443f; }
.hcn-mijn .hcn-mijn-journey__identity .hcn-ico { color: var(--mijn-gold-deep); }
.hcn-mijn .hcn-mijn-journey__count { font-size: 11px; color: #5f6663; text-align: right; }
.hcn-mijn .hcn-mijn-journey__count strong { color: var(--mijn-green); font-weight: 750; }
.hcn-mijn .hcn-mijn-journey__scroller {
    padding: 11px 2px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 106, 108, .4) rgba(115, 121, 122, .08);
    scroll-behavior: smooth;
    outline-offset: -4px;
}
.hcn-mijn .hcn-mijn-journey__scroller::-webkit-scrollbar { height: 4px; }
.hcn-mijn .hcn-mijn-journey__scroller::-webkit-scrollbar-track { background: rgba(115, 121, 122, .08); border-radius: 99px; }
.hcn-mijn .hcn-mijn-journey__scroller::-webkit-scrollbar-thumb { background: rgba(100, 106, 108, .42); border-radius: 99px; }
.hcn-mijn .hcn-mijn-journey__list { display: flex; min-width: 1030px; width: 100%; }
.hcn-mijn .hcn-mijn-stage { position: relative; flex: 1 0 0; min-width: 0; padding-inline: 3px; text-align: center; }
.hcn-mijn .hcn-mijn-stage:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 16px;
    left: calc(50% + 17px);
    width: calc(100% - 34px);
    height: 2px;
    background: var(--mijn-track);
}
.hcn-mijn .hcn-mijn-stage--done:not(:last-child)::after { background: var(--mijn-green); }
.hcn-mijn .hcn-mijn-stage__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 auto 10px;
    color: #8d9699;
    background: #f9fafa;
    border: 1.5px solid #cfd4d6;
    border-radius: 50%;
    transition: transform .24s ease, background-color .24s ease, border-color .24s ease;
}
.hcn-mijn .hcn-mijn-stage__dot .hcn-ico { stroke-width: 1.9; }
.hcn-mijn .hcn-mijn-stage--done .hcn-mijn-stage__dot { color: var(--hcn-color-on-dark); background: var(--mijn-green); border-color: var(--mijn-green); }
.hcn-mijn .hcn-mijn-stage--waiting .hcn-mijn-stage__dot { color: var(--mijn-amber); background: var(--mijn-amber-soft); border-color: #e4cf9b; }
.hcn-mijn .hcn-mijn-stage__label { display: block; max-width: 99px; margin: 0 auto; font-size: 12px; font-weight: 580; line-height: 1.4; color: #41443f; text-wrap: balance; }
.hcn-mijn .hcn-mijn-stage--open .hcn-mijn-stage__label,
.hcn-mijn .hcn-mijn-stage--untracked .hcn-mijn-stage__label { color: var(--mijn-future); }
.hcn-mijn .hcn-mijn-stage--untracked .hcn-mijn-stage__dot { border-style: dashed; }
.hcn-mijn .hcn-mijn-stage.is-current .hcn-mijn-stage__dot {
    color: var(--mijn-green);
    background: var(--hcn-color-surface);
    border: 2px solid var(--mijn-green);
    box-shadow: 0 0 0 5px rgba(32, 123, 78, .08);
    animation: hcn-mijn-heartbeat 2.45s ease-in-out infinite;
}
.hcn-mijn .hcn-mijn-stage.is-current .hcn-mijn-stage__dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1.5px solid rgba(32, 123, 78, .55);
    border-radius: 50%;
    animation: hcn-mijn-halo 2.45s ease-in-out infinite;
    pointer-events: none;
}
.hcn-mijn .hcn-mijn-stage.is-current .hcn-mijn-stage__label { color: var(--mijn-green); font-weight: 745; }
.hcn-mijn .hcn-mijn-journey__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 1px 0; font-size: 11px; line-height: 1.45; color: #6b6e6b; }
.hcn-mijn .hcn-mijn-journey__hint { display: flex; align-items: center; gap: 5px; white-space: nowrap; }

@keyframes hcn-mijn-heartbeat { 0%, 18%, 38%, 100% { transform: scale(1); } 23% { transform: scale(1.16); } 30% { transform: scale(1.045); } 34% { transform: scale(1.12); } }
@keyframes hcn-mijn-halo { 0%, 17%, 42%, 100% { transform: scale(1); opacity: .17; } 27% { transform: scale(1.16); opacity: .75; } 36% { transform: scale(1.09); opacity: .35; } }
@keyframes hcn-mijn-menu { from { opacity: 0; transform: translateY(-7px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ------------------------------------------------------------------ 5. service and payment */

.hcn-mijn .hcn-mijn-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--mijn-gap);
    align-items: stretch;
    margin-top: var(--mijn-section);
}
.hcn-mijn .hcn-mijn-pair.is-paid { grid-template-columns: minmax(0, 7fr) minmax(245px, 3fr); }
.hcn-mijn .hcn-mijn-service,
.hcn-mijn .hcn-mijn-pay,
.hcn-mijn .hcn-mijn-countdown { min-width: 0; min-height: 288px; border-radius: var(--mijn-radius); overflow: hidden; }

.hcn-mijn .hcn-mijn-service {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 44px 50px;
    color: var(--mijn-ink);
    background: linear-gradient(180deg, var(--hcn-color-mijn-sand-top) 0%, var(--hcn-color-mijn-sand-mid) 43%, var(--hcn-color-surface) 100%);
    border: 1px solid #e9e0d4;
}
.hcn-mijn .hcn-mijn-service__intro { display: flex; align-items: center; gap: 22px; min-width: 0; }
.hcn-mijn .hcn-mijn-portrait {
    position: relative;
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    flex: 0 0 108px;
    overflow: hidden;
    background: #ece0d1;
    border: 1px solid #d9c6b0;
    border-radius: 14px;
}
/* A passport-style portrait has the face high in the frame, so a tight crop takes from the bottom. */
.hcn-mijn .hcn-mijn-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hcn-mijn .hcn-mijn-portrait .hcn-ico { width: 64px; height: 64px; color: #96714a; stroke-width: 1.3; }
.hcn-mijn .hcn-mijn-service__copy { flex: 1; min-width: 0; }
.hcn-mijn .hcn-mijn-service__eyebrow { display: block; margin-bottom: 11px; font-size: 11px; font-weight: 740; letter-spacing: .13em; text-transform: uppercase; color: #7b5e3d; }
.hcn-mijn .hcn-mijn-service__title { max-width: 490px; font-size: clamp(18px, 2.2vw, 25px); font-weight: 650; line-height: 1.28; letter-spacing: -.035em; text-wrap: balance; }
.hcn-mijn .hcn-mijn-service__text { max-width: 520px; margin-top: 7px; font-size: 13px; line-height: 1.55; color: #5c574f; }
.hcn-mijn .hcn-mijn-service__details {
    display: grid;
    gap: 9px;
    padding: 14px 17px;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(155, 126, 88, .18);
    border-radius: var(--mijn-radius-sm);
}
.hcn-mijn .hcn-mijn-service__details-title { font-size: 12px; font-weight: 750; letter-spacing: .035em; color: #6b5236; }
.hcn-mijn .hcn-mijn-service__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.hcn-mijn .hcn-mijn-service__points li { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: #353937; }
.hcn-mijn .hcn-mijn-service__points .hcn-ico { margin-top: 1px; color: #7d5f3f; }
.hcn-mijn .hcn-mijn-service__advisory { font-size: 11px; line-height: 1.5; color: #65605a; }
.hcn-mijn .hcn-mijn-service__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 18px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(85, 68, 51, .19);
}
.hcn-mijn .hcn-mijn-service__docs { display: flex; align-items: center; gap: 14px 19px; flex-wrap: wrap; min-width: 0; }
.hcn-mijn .hcn-mijn-service__doc { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 560; white-space: nowrap; color: #3c3a37; }
.hcn-mijn .hcn-mijn-service__doc > .hcn-ico { color: #7a5f40; }
.hcn-mijn .hcn-mijn-service__mark { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: var(--hcn-color-on-dark); background: var(--mijn-green); }
.hcn-mijn .hcn-mijn-service__mark .hcn-ico { stroke-width: 2.7; }
.hcn-mijn .hcn-mijn-service__mark--review,
.hcn-mijn .hcn-mijn-service__mark--optional { color: var(--mijn-amber); background: #f9e9c0; }
.hcn-mijn .hcn-mijn-service__mark--rejected,
.hcn-mijn .hcn-mijn-service__mark--missing { color: var(--hcn-color-on-dark); background: #a43835; }
.hcn-mijn .hcn-mijn-family-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 17px;
    font-size: 12px;
    font-weight: 670;
    white-space: nowrap;
    color: var(--hcn-color-on-dark);
    background: var(--mijn-green);
    border: 1px solid var(--mijn-green);
    border-radius: var(--mijn-radius-control);
    transition: background-color .22s ease, border-color .22s ease;
}
.hcn-mijn .hcn-mijn-family-link:hover { color: var(--hcn-color-on-dark); background: var(--mijn-green-deep); border-color: var(--mijn-green-deep); }
.hcn-mijn .hcn-mijn-family-link .hcn-ico { color: var(--hcn-color-on-dark); }

.hcn-mijn .hcn-mijn-pay {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 44px 50px;
    background: var(--hcn-color-surface);
    border: 1px solid #e7e4df;
    scroll-margin-top: calc(var(--mijn-sticky-top) + 110px);
}
.hcn-mijn .hcn-mijn-pay:focus { outline: none; }
.hcn-mijn .hcn-mijn-pay:focus-visible { outline: var(--mijn-ring); }
.hcn-mijn .hcn-mijn-pay__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hcn-mijn .hcn-mijn-pay__head h2 { font-size: 21px; font-weight: 670; letter-spacing: -.035em; }
.hcn-mijn .hcn-mijn-pay__amount { margin: 2px 0; font-size: clamp(31px, 3.2vw, 43px); font-weight: 740; line-height: 1.18; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: #262829; }
.hcn-mijn .hcn-mijn-pay__summary { font-size: 13px; line-height: 1.5; color: #67675f; }
.hcn-mijn .hcn-mijn-pay__explain { margin: 2px 0 8px; font-size: 13px; line-height: 1.5; color: #454647; }
.hcn-mijn .hcn-mijn-pay__soon {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: auto;
    padding: 14px 16px;
    font-size: 12px;
    line-height: 1.5;
    color: #4d4b47;
    background: var(--hcn-color-subtle-bg);
    border-radius: var(--mijn-radius-control);
}
.hcn-mijn .hcn-mijn-pay__soon .hcn-ico { margin-top: 1px; color: var(--mijn-quieter); }
/* D-94C2B: the homepage card's way to the payment screen. It starts nothing; it is a link. */
.hcn-portal.hcn-mijn .hcn-mijn-pay__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    min-height: 50px;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 660;
    letter-spacing: -.01em;
    color: var(--hcn-color-on-dark);
    background: var(--mijn-green);
    border: 1px solid var(--mijn-green-deep);
    border-radius: var(--mijn-radius-control);
    transition: background-color .18s ease, transform .18s ease;
}
.hcn-portal.hcn-mijn .hcn-mijn-pay__cta:hover { background: var(--mijn-green-deep); transform: translateY(-1px); }
.hcn-portal.hcn-mijn .hcn-mijn-pay__cta .hcn-ico { flex: none; }

/* ─────────────────────────────── D-94C2B · Mijn HCN → Betaling ─────────────────────────────── */

.hcn-mijn .hcn-mijn-betaal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 18px;
    padding: 22px;
    background: var(--hcn-color-surface);
    border: 1px solid var(--mijn-line);
    border-radius: var(--mijn-radius);
}
.hcn-mijn .hcn-mijn-betaal__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hcn-mijn .hcn-mijn-betaal__amount {
    font-size: clamp(32px, 3.4vw, 44px);
    font-weight: 740;
    line-height: 1.16;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
    color: #262829;
}
.hcn-mijn .hcn-mijn-betaal__caption { margin: 0; font-size: 14px; line-height: 1.5; color: #67675f; }
.hcn-mijn .hcn-mijn-betaal__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 2px 20px;
    margin: 8px 0 2px;
    padding: 16px 0 4px;
    border-top: 1px solid var(--mijn-line);
}
.hcn-mijn .hcn-mijn-betaal__facts > div { padding: 6px 0; }
.hcn-mijn .hcn-mijn-betaal__facts dt { font-size: 13px; font-weight: 500; color: #6f6a63; }
.hcn-mijn .hcn-mijn-betaal__facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 620; color: var(--mijn-ink); }
.hcn-mijn .hcn-mijn-betaal__explain { margin: 6px 0 2px; font-size: 15px; line-height: 1.6; color: #454647; }
.hcn-mijn .hcn-mijn-betaal__action { margin: 6px 0 0; }
.hcn-portal.hcn-mijn .hcn-mijn-betaal__pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    min-height: 56px;
    padding: 15px 26px;
    font-size: 17px;
    font-weight: 680;
    letter-spacing: -.01em;
    color: var(--hcn-color-on-dark);
    background: var(--mijn-green);
    border: 1px solid var(--mijn-green-deep);
    border-radius: var(--mijn-radius-control);
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}
.hcn-portal.hcn-mijn .hcn-mijn-betaal__pay:hover { background: var(--mijn-green-deep); transform: translateY(-1px); }
.hcn-portal.hcn-mijn .hcn-mijn-betaal__pay .hcn-ico { flex: none; }
.hcn-mijn .hcn-mijn-betaal__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 10px 0 0;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.55;
    color: #4d4b47;
    background: var(--hcn-color-subtle-bg);
    border-radius: var(--mijn-radius-control);
}
.hcn-mijn .hcn-mijn-betaal__note .hcn-ico { margin-top: 1px; flex: none; color: var(--mijn-quieter); }
.hcn-mijn .hcn-mijn-betaal__back { margin: 18px 0 0; }
.hcn-mijn .hcn-mijn-betaal__back a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--mijn-gold-deep); }
.hcn-mijn .hcn-mijn-betaal__back a:hover { color: var(--mijn-green-deep); }
@media (max-width: 560px) {
    .hcn-mijn .hcn-mijn-betaal { padding: 18px 16px; }
    .hcn-portal.hcn-mijn .hcn-mijn-betaal__pay { max-width: none; }
}

.hcn-mijn .hcn-mijn-countdown {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 25px 15px;
    text-align: center;
    background: #fdf9f2;
    border: 1px solid #eadfce;
    scroll-margin-top: calc(var(--mijn-sticky-top) + 110px);
}
.hcn-mijn .hcn-mijn-countdown::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("../images/mijn-hcn-mosaic.webp");
    background-size: 170px auto;
    opacity: .26;
}
.hcn-mijn .hcn-mijn-countdown::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 252, 247, .76); }
.hcn-mijn .hcn-mijn-countdown:focus { outline: none; }
.hcn-mijn .hcn-mijn-countdown:focus-visible { outline: var(--mijn-ring); }
.hcn-mijn .hcn-mijn-countdown__kicker { font-size: 12px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; color: #74614a; }
.hcn-mijn .hcn-mijn-countdown__value { font-size: clamp(43px, 5vw, 64px); font-weight: 750; line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; color: var(--mijn-green); }
.hcn-mijn .hcn-mijn-countdown__caption { font-size: 14px; font-weight: 650; color: #292d2d; }
.hcn-mijn .hcn-mijn-countdown__season { font-size: 17px; font-weight: 700; color: #2f3331; }
.hcn-mijn .hcn-mijn-countdown__year { font-size: 12px; color: #6d6459; }
.hcn-mijn .hcn-mijn-countdown__text { max-width: 24em; font-size: 12px; line-height: 1.5; color: #5f5a52; }
.hcn-mijn .hcn-mijn-countdown__note { margin-top: 2px; font-size: 10px; line-height: 1.4; color: #776d62; }
.hcn-mijn .hcn-mijn-countdown__paid { margin-top: 6px; font-size: 11px; font-weight: 650; color: var(--mijn-green-ink); }

/* ------------------------------------------------------------------ 6. badges */

.hcn-mijn .hcn-mijn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 680;
    line-height: 1.25;
    white-space: nowrap;
    border: 1px solid transparent;              /* drawn in forced-colours mode */
    border-radius: 99px;
}
.hcn-mijn .hcn-mijn-badge .hcn-ico { stroke-width: 2.4; }
.hcn-mijn .hcn-mijn-badge--approved,
.hcn-mijn .hcn-mijn-badge--success { color: var(--mijn-green); background: var(--mijn-green-soft); }
.hcn-mijn .hcn-mijn-badge--review,
.hcn-mijn .hcn-mijn-badge--warning,
.hcn-mijn .hcn-mijn-badge--optional { color: var(--mijn-amber); background: var(--mijn-amber-soft); }
.hcn-mijn .hcn-mijn-badge--rejected,
.hcn-mijn .hcn-mijn-badge--missing,
.hcn-mijn .hcn-mijn-badge--error { color: var(--mijn-red); background: var(--mijn-red-soft); }
/* Held by HCN, nothing asked of the family: calm, and deliberately not the green of an approval
   nor the amber of something in review. */
.hcn-mijn .hcn-mijn-badge--received,
.hcn-mijn .hcn-mijn-badge--awaited,
.hcn-mijn .hcn-mijn-badge--neutral { color: #4a4c4d; background: var(--hcn-color-neutral-bg); }

/* ------------------------------------------------------------------ 7. documents and help */

.hcn-mijn .hcn-mijn-docshelp {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mijn-gap);
    align-items: stretch;
    margin-top: var(--mijn-section);
}
.hcn-mijn .hcn-mijn-docs,
.hcn-mijn .hcn-mijn-help {
    min-width: 0;
    height: 100%;
    padding: 26px 28px;
    background: var(--hcn-color-surface);
    border: 1px solid var(--mijn-line);
    border-radius: var(--mijn-radius);
}
.hcn-mijn .hcn-mijn-docs { display: flex; flex-direction: column; gap: 14px; align-content: start; }
/* The per-traveller counts, carried on the alert line instead of a sentence of their own. */
.hcn-mijn .hcn-mijn-docs__counts { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; opacity: .85; }
.hcn-mijn .hcn-mijn-docs__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 15px; }
.hcn-mijn .hcn-mijn-docs__head h2,
.hcn-mijn .hcn-mijn-help h2 { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.035em; }
.hcn-mijn .hcn-mijn-docs__intro { max-width: 490px; margin-top: 5px; font-size: 14px; line-height: 1.55; color: #63605b; }
.hcn-mijn .hcn-mijn-docs__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 680;
    white-space: nowrap;
    color: var(--mijn-ink);
    background: var(--hcn-color-surface);
    border: 1px solid #5e5851;
    border-radius: var(--mijn-radius-control);
    transition: background-color .2s ease, border-color .2s ease;
}
.hcn-mijn .hcn-mijn-docs__link:hover { background: var(--hcn-color-mijn-sand-top); border-color: var(--mijn-gold); }
.hcn-mijn .hcn-mijn-docs__link.is-primary { color: var(--hcn-color-on-dark); background: var(--mijn-green); border-color: var(--mijn-green); }
.hcn-mijn .hcn-mijn-docs__link.is-primary:hover { background: var(--mijn-green-deep); border-color: var(--mijn-green-deep); }
.hcn-mijn .hcn-mijn-docs__alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #4d4b47;
    background: var(--hcn-color-subtle-bg);
    border-radius: 11px;
}
.hcn-mijn .hcn-mijn-docs__alert .hcn-ico { margin-top: 1px; stroke-width: 2; }
.hcn-mijn .hcn-mijn-docs__alert[data-level="neutral"] { background: var(--hcn-color-subtle-bg); color: #4d4b47; }
.hcn-mijn .hcn-mijn-docs__alert[data-level="warning"] { background: var(--mijn-amber-page); color: #63501c; }
.hcn-mijn .hcn-mijn-docs__alert[data-level="error"] { background: var(--mijn-red-page); color: #7d3a33; }
.hcn-mijn .hcn-mijn-docs__alert[data-level="success"] { background: #eff7f2; color: var(--mijn-green); }
.hcn-mijn .hcn-mijn-docs__summary { margin-top: -7px; font-size: 12px; line-height: 1.45; color: #74706a; }
.hcn-mijn .hcn-mijn-docs__people { display: grid; gap: 7px; min-width: 0; }
.hcn-mijn .hcn-mijn-docs__family {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 620;
    color: var(--mijn-green-ink);
    background: var(--mijn-green-soft);
    border: 1px solid #cce0d4;
    border-radius: var(--mijn-radius-sm);
    transition: background-color .18s ease, border-color .18s ease;
}
.hcn-mijn .hcn-mijn-docs__family small { margin-left: auto; font-size: 12px; font-weight: 500; color: #5d6f64; }
.hcn-mijn .hcn-mijn-docs__family .hcn-ico:last-child { flex: none; }
.hcn-mijn .hcn-mijn-docs__family:hover { background: #dcebe2; border-color: #b7d6c3; }

.hcn-mijn .hcn-mijn-person { background: var(--hcn-color-surface); border: 1px solid #e7e5e1; border-radius: var(--mijn-radius-sm); overflow: hidden; }
.hcn-mijn .hcn-mijn-docs__people:not(.is-family) .hcn-mijn-person { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 14px 16px; }
.hcn-mijn .hcn-mijn-person__who { display: block; min-width: 0; }
.hcn-mijn .hcn-mijn-person__name { display: block; font-size: 13px; font-weight: 700; line-height: 1.45; color: #292b2d; overflow-wrap: anywhere; }
.hcn-mijn .hcn-mijn-person__role { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: #7c756c; }
.hcn-mijn .hcn-mijn-person__docs { display: grid; gap: 9px; min-width: 0; }
.hcn-mijn .hcn-mijn-docs__people:not(.is-family) .hcn-mijn-person__docs { width: min(100%, 305px); }
.hcn-mijn .hcn-mijn-person--row > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding: 8px 14px;
    cursor: pointer;
    list-style: none;
    transition: background-color .2s ease;
}
.hcn-mijn .hcn-mijn-person--row > summary::-webkit-details-marker { display: none; }
.hcn-mijn .hcn-mijn-person--row > summary::marker { content: ""; }
.hcn-mijn .hcn-mijn-person--row > summary:hover { background: #faf6f0; }
.hcn-mijn .hcn-mijn-person--row > summary:focus-visible { outline: var(--mijn-ring); outline-offset: -3px; }
.hcn-mijn .hcn-mijn-person--row .hcn-mijn-person__name { flex: 1; font-weight: 680; }
.hcn-mijn .hcn-mijn-person__mini { max-width: 46%; font-size: 11px; line-height: 1.4; text-align: right; color: var(--mijn-quieter); }
.hcn-mijn .hcn-mijn-person__chevron { flex: none; color: #7b6650; transition: transform .22s ease; }
.hcn-mijn .hcn-mijn-person--row[open] .hcn-mijn-person__chevron { transform: rotate(180deg); }
.hcn-mijn .hcn-mijn-person--row .hcn-mijn-person__docs { padding: 15px; border-top: 1px solid #eae8e5; gap: 12px; }
.hcn-mijn .hcn-mijn-docline { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 440px; font-size: 13px; color: #393b3c; }
.hcn-mijn .hcn-mijn-docline__label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hcn-mijn .hcn-mijn-docline__label .hcn-ico { color: #97856f; }

/*
 * The pair stretches both cards to the same height. The documents card fills that height with rows; the
 * help card has a short, fixed group, so it centres that group rather than leaving all the air below it.
 * Only the group moves — every line inside it stays left-aligned.
 */
.hcn-mijn .hcn-mijn-help { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.hcn-mijn .hcn-mijn-help:focus { outline: none; }
.hcn-mijn .hcn-mijn-help:focus-visible { outline: var(--mijn-ring); }
.hcn-mijn .hcn-mijn-help__heading { display: flex; align-items: center; gap: 14px; }
.hcn-mijn .hcn-mijn-help__icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; color: #6b5134; background: var(--hcn-color-mijn-sand-top); border-radius: 50%; }
.hcn-mijn .hcn-mijn-help__body { display: flex; flex-direction: column; gap: 14px; margin-left: 60px; }
.hcn-mijn .hcn-mijn-help__copy { font-size: 14px; line-height: 1.55; color: #484a4b; }
.hcn-mijn .hcn-mijn-help__hours { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.4; color: #6f685f; }
.hcn-mijn .hcn-mijn-help__actions { display: flex; gap: 9px; flex-wrap: wrap; }
.hcn-mijn .hcn-mijn-help__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: #343332;
    background: var(--hcn-color-surface);
    border: 1px solid #5f5b56;
    border-radius: var(--mijn-radius-control);
    transition: background-color .2s ease;
}
.hcn-mijn .hcn-mijn-help__button:hover { background: var(--hcn-color-mijn-sand-top); }
.hcn-mijn .hcn-mijn-help__button.is-primary { color: var(--hcn-color-on-dark); background: var(--mijn-charcoal); border-color: var(--mijn-charcoal); }
.hcn-mijn .hcn-mijn-help__button.is-primary:hover { color: var(--hcn-color-on-dark); background: #4a4b4c; }
/* Milestone 2 Step 3: the owner-approved communication notice, inside the help card — a divider, not a box. */
.hcn-mijn .hcn-mijn-help__notice { padding-top: 14px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--mijn-line); }
.hcn-mijn .hcn-mijn-help__noticetitle { font-size: 15px; font-weight: 700; line-height: 1.35; color: #2f3030; }
.hcn-mijn .hcn-mijn-help__notice p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: #484a4b; }

/* ------------------------------------------------------------------ 8. the five steps dialog */

.hcn-mijn-steps {
    width: min(490px, calc(100% - 22px));
    max-height: min(80dvh, 740px);
    padding: 23px;
    color: var(--hcn-color-text);
    background: var(--hcn-color-surface);
    border: 1px solid #ddd2c4;
    border-radius: 16px;
    box-shadow: 0 25px 90px rgba(23, 23, 23, .33);
    font-family: var(--hcn-font);
    overflow: auto;
}
.hcn-mijn-steps::backdrop { background: rgba(20, 20, 20, .52); }
.hcn-mijn-steps ol { margin: 0; padding: 0; list-style: none; }
.hcn-mijn-steps p { margin: 0; }
.hcn-mijn-steps h2 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.025em; }
.hcn-mijn-steps__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.hcn-mijn-steps__kicker { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8c6a47; }
.hcn-mijn-steps .hcn-mijn-steps__close {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex: none;
    color: var(--hcn-color-text);
    background: var(--hcn-color-surface);
    border: 1px solid #e4dcd0;
    border-radius: 8px;
    cursor: pointer;
}
.hcn-mijn-steps .hcn-mijn-steps__close:hover { background: #f6f2eb; }
.hcn-mijn-steps .hcn-mijn-steps__close:focus-visible { outline: 3px solid var(--hcn-color-brand); outline-offset: 2px; }
.hcn-mijn-steps__hint { margin: 13px 0 16px !important; font-size: 12px; line-height: 1.55; color: #67625d; }
.hcn-mijn-steps__list { display: grid; gap: 7px; }
.hcn-mijn-steps__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 9px;
    color: var(--hcn-color-text);
    background: var(--hcn-color-surface);
    border: 1px solid #ede7df;
    border-radius: var(--hcn-radius-md);
    text-decoration: none;
}
a.hcn-mijn-steps__item:hover { border-color: #bfa789; background: #fcfaf7; }
a.hcn-mijn-steps__item:focus-visible { outline: 3px solid var(--hcn-color-brand); outline-offset: 2px; }
.hcn-mijn-steps__index { display: grid; place-items: center; width: 32px; height: 32px; color: #6c716d; background: #eceeed; border-radius: 50%; }
.hcn-mijn-steps__item--done .hcn-mijn-steps__index { color: #fff; background: var(--hcn-color-mijn-green); }
.hcn-mijn-steps__item--action { border-color: var(--hcn-color-brand); background: #fdfaf6; }
.hcn-mijn-steps__item--action .hcn-mijn-steps__index { color: #fff; background: var(--hcn-color-brand-strong); }
.hcn-mijn-steps__item--waiting .hcn-mijn-steps__index { color: #835d15; background: #fff3d2; }
.hcn-mijn-steps__name { display: block; font-size: 14px; font-weight: 690; line-height: 1.2; }
.hcn-mijn-steps__caption { display: block; margin-top: 3px; font-size: 11px; line-height: 1.3; color: #766d66; overflow-wrap: anywhere; }
.hcn-mijn-steps__state { font-size: 11px; font-weight: 650; white-space: nowrap; color: #226344; }
.hcn-mijn-steps__item--not_needed .hcn-mijn-steps__state,
.hcn-mijn-steps__item--neutral .hcn-mijn-steps__state { color: #6d6964; }
.hcn-mijn-steps__item--action .hcn-mijn-steps__state { color: #835d15; }

/* ------------------------------------------------------------------ 9. the other sections */

/* Mijn profiel, Mijn gezin, Mijn documenten, Gegevens bevestigen and Beveiliging keep their own markup
   and routes; the shell only gives them the panel and lets them breathe. */
.hcn-mijn .hcn-mijn-page {
    margin-top: var(--mijn-section);
    padding: 26px 28px;
    background: var(--hcn-color-surface);
    border: 1px solid var(--mijn-line);
    border-radius: var(--mijn-radius);
}
.hcn-mijn .hcn-mijn-page > h2:first-child { margin-top: 0; }
.hcn-mijn .hcn-mijn-page h2 { margin: 0 0 12px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.035em; }
.hcn-mijn .hcn-mijn-page h3 { margin: 24px 0 8px; font-size: 17px; font-weight: 680; }
.hcn-mijn .hcn-mijn-page p { margin: 0 0 12px; }
.hcn-mijn .hcn-mijn-page ul:not(.hcn-mijn-nav) { margin: 0 0 16px; }

/* ------------------------------------------------------------------ 10. widths */

@media (max-width: 1150px) {
    .hcn-mijn .hcn-mijn-nav { display: none; }
    .hcn-mijn .hcn-mijn-burger { display: flex; order: -1; }
    .hcn-mijn .hcn-mijn-top__inner { gap: 10px; }
    .hcn-mijn .hcn-mijn-top__end { margin-left: auto; }
}
@media (max-width: 1080px) {
    .hcn-mijn .hcn-mijn-docshelp { gap: 14px; }
    .hcn-mijn .hcn-mijn-docs,
    .hcn-mijn .hcn-mijn-help { padding: 23px 21px; }
    .hcn-mijn .hcn-mijn-help__body { margin-left: 0; }
}
@media (max-width: 1050px) {
    .hcn-mijn .hcn-mijn-pair { gap: 14px; }
    .hcn-mijn .hcn-mijn-service,
    .hcn-mijn .hcn-mijn-pay { padding: 26px; }
    .hcn-mijn .hcn-mijn-service__intro { gap: 13px; }
    .hcn-mijn .hcn-mijn-portrait { width: 82px; height: 82px; flex-basis: 82px; }
    .hcn-mijn .hcn-mijn-portrait .hcn-ico { width: 52px; height: 52px; }
    .hcn-mijn .hcn-mijn-pair.is-paid { grid-template-columns: minmax(0, 6.7fr) minmax(220px, 3.3fr); }
}
@media (max-width: 1000px) {
    .hcn-mijn .hcn-mijn-welcome { grid-template-columns: minmax(0, 1.25fr) minmax(250px, .9fr); padding-inline: 20px; }
    .hcn-mijn .hcn-mijn-ref { padding-right: 0; border-right: 0; }
    .hcn-mijn .hcn-mijn-progress,
    .hcn-mijn .hcn-mijn-done { gap: 10px; padding-left: 16px; }
    .hcn-mijn .hcn-mijn-ring { width: 75px; height: 75px; }
    .hcn-mijn .hcn-mijn-ring::before { inset: 8px; }
    .hcn-mijn .hcn-mijn-ring__number { font-size: 18px; }
    .hcn-mijn .hcn-mijn-progress__remaining { font-size: 14px; }
    .hcn-mijn .hcn-mijn-action { padding: 20px 20px 22px; }
    .hcn-mijn .hcn-mijn-action__body { margin-left: 0; }
}
@media (max-width: 800px) {
    .hcn-portal.hcn-mijn { --mijn-section: 34px; }
    .hcn-mijn .hcn-mijn-docshelp { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .hcn-mijn .hcn-mijn-docs,
    /* Stacked, the card is already its content's height, so there is nothing to centre against. */
    .hcn-mijn .hcn-mijn-help { height: auto; justify-content: flex-start; padding: 19px 18px; border-radius: 14px; }
    .hcn-mijn .hcn-mijn-docs__head h2,
    .hcn-mijn .hcn-mijn-help h2 { font-size: 20px; }
    .hcn-mijn .hcn-mijn-journey__head h2 { font-size: 18px; }
    .hcn-mijn .hcn-mijn-journey__panel { padding: 15px 12px 10px; border-radius: 13px; }
    .hcn-mijn .hcn-mijn-journey__list { min-width: 1100px; }
    .hcn-mijn .hcn-mijn-stage { flex: 0 0 110px; }
}
@media (max-width: 720px) {
    .hcn-mijn .hcn-mijn-welcome { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; border-radius: 12px; }
    .hcn-mijn .hcn-mijn-welcome__main { padding: 0; }
    .hcn-mijn .hcn-mijn-welcome__title { font-size: 23px; }
    .hcn-mijn .hcn-mijn-ref { border-right: 0; }
    .hcn-mijn .hcn-mijn-next { align-items: stretch; margin-bottom: 14px; }
    .hcn-portal.hcn-mijn .hcn-mijn-next__cta { width: 100%; min-height: 56px; padding-inline: 18px; }
    .hcn-mijn .hcn-mijn-action { margin: 4px 0 14px; padding: 18px 16px 18px; border-radius: 10px; }
    .hcn-mijn .hcn-mijn-action__head { align-items: flex-start; gap: 12px; }
    .hcn-mijn .hcn-mijn-action__icon { width: 46px; height: 46px; border-radius: 12px; }
    .hcn-mijn .hcn-mijn-action__title { font-size: 20px; }
    .hcn-mijn .hcn-mijn-action__body { margin-top: 12px; }
    .hcn-mijn .hcn-mijn-next__icon { width: 38px; height: 38px; }
    .hcn-mijn .hcn-mijn-progress,
    .hcn-mijn .hcn-mijn-done { padding: 10px 0 0; border-top: 1px solid #e2d9cf; }
    .hcn-mijn .hcn-mijn-ring { width: 66px; height: 66px; }
    .hcn-mijn .hcn-mijn-ring::before { inset: 7px; }
    .hcn-mijn .hcn-mijn-ring__number { font-size: 17px; }
    .hcn-mijn .hcn-mijn-pair,
    .hcn-mijn .hcn-mijn-pair.is-paid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .hcn-mijn .hcn-mijn-service,
    .hcn-mijn .hcn-mijn-pay,
    .hcn-mijn .hcn-mijn-countdown { min-height: 0; border-radius: 14px; }
    .hcn-mijn .hcn-mijn-service { padding: 22px 19px; gap: 16px; }
    .hcn-mijn .hcn-mijn-service__title { font-size: 18px; }
    .hcn-mijn .hcn-mijn-service__points { grid-template-columns: minmax(0, 1fr); gap: 7px; }
    .hcn-mijn .hcn-mijn-pay { padding: 22px 19px; }
    .hcn-mijn .hcn-mijn-pay__amount { font-size: 35px; }
    .hcn-mijn .hcn-mijn-countdown { padding: 18px 20px; }
}
@media (max-width: 700px) {
    .hcn-mijn .hcn-mijn-top__inner { min-height: 83px; gap: 7px; }
    .hcn-mijn .hcn-mijn-top.is-scrolled .hcn-mijn-top__inner { min-height: 60px; }
    .hcn-mijn .hcn-mijn-brand__logo { height: 45px; max-width: 138px; }
    .hcn-mijn .hcn-mijn-top__end { gap: 5px; }
    .hcn-mijn .hcn-mijn-account > summary { gap: 6px; padding: 6px 5px; min-height: 44px; }
    .hcn-mijn .hcn-mijn-account__name { font-size: 12px; max-width: 110px; }
}
@media (max-width: 650px) {
    .hcn-mijn .hcn-mijn-journey__head { align-items: start; gap: 6px; }
    .hcn-mijn .hcn-mijn-journey__head p { font-size: 11px; }
    .hcn-mijn .hcn-mijn-journey__top { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 3px; }
    .hcn-mijn .hcn-mijn-journey__count { text-align: left; }
    .hcn-mijn .hcn-mijn-journey__scroller { padding: 9px 0; scroll-snap-type: x proximity; }
    .hcn-mijn .hcn-mijn-journey__list { min-width: 1050px; }
    .hcn-mijn .hcn-mijn-stage { flex: 0 0 105px; scroll-snap-align: center; }
    .hcn-mijn .hcn-mijn-journey__foot { align-items: flex-start; flex-direction: column; gap: 6px; }
}
@media (max-width: 560px) {
    /*
     * The account panel is 300px wide and hangs from the right edge of the name chip, which on a phone
     * leaves part of it off the left of the screen. Making the header band the containing block anchors
     * it to the band's right edge instead — always inside the gutter — and the little arrow, which would
     * then point at the wrong control, steps aside.
     */
    .hcn-mijn .hcn-mijn-top__inner { position: relative; }
    .hcn-mijn .hcn-mijn-account { position: static; }
    .hcn-mijn .hcn-mijn-account__panel { right: 0; max-width: min(300px, 100%); }
    .hcn-mijn .hcn-mijn-account__panel::before { display: none; }
    .hcn-mijn .hcn-mijn-adminbar { font-size: 12px; line-height: 1.25; }
    .hcn-mijn .hcn-mijn-adminbar .hcn-mijn-band { flex-wrap: nowrap; gap: 9px; min-height: 52px; padding: 6px 12px; }
    .hcn-mijn .hcn-mijn-adminbar__text { flex-wrap: nowrap; gap: 6px; max-width: calc(100% - 53px); overflow: hidden; white-space: nowrap; }
    .hcn-mijn .hcn-mijn-adminbar__ref { flex: none; padding: 1px 6px; font-size: 11px; }
    /* Part A: on a phone the band takes two lines, so neither the family's name nor its reference is lost. */
    .hcn-mijn .hcn-mijn-adminbar__text { flex-wrap: wrap; justify-content: flex-start; row-gap: 3px; }
    .hcn-mijn .hcn-mijn-adminbar__label { flex-basis: 100%; text-align: left; }
    .hcn-mijn .hcn-mijn-adminbar .hcn-mijn-adminbar__label + span,
    .hcn-mijn .hcn-mijn-adminbar .hcn-mijn-adminbar__sep { display: none; }
    .hcn-mijn .hcn-mijn-adminbar__who { flex: 0 1 auto; }
    .hcn-mijn .hcn-mijn-adminbar .hcn-mijn-band:has(.hcn-mijn-adminbar__stale:not([hidden])) { flex-wrap: wrap; }
    .hcn-mijn .hcn-mijn-adminbar__lead { display: none; }
    .hcn-mijn .hcn-mijn-adminbar__sep { display: inline; opacity: .78; }
    .hcn-mijn .hcn-mijn-adminbar__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .hcn-mijn .hcn-mijn-adminbar__back { width: 35px; min-height: 35px; height: 35px; padding: 0; gap: 0; border-radius: 8px; }
    .hcn-mijn .hcn-mijn-adminbar__back-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 430px) {
    .hcn-portal.hcn-mijn { --mijn-gutter: 14px; }
    .hcn-mijn .hcn-mijn-brand__logo { height: 40px; max-width: 112px; }
    .hcn-mijn .hcn-mijn-account__name { max-width: 82px; font-size: 11px; }
    .hcn-mijn .hcn-mijn-top__end { gap: 3px; }
    .hcn-mijn .hcn-mijn-docs__head { grid-template-columns: 1fr; }
    .hcn-mijn .hcn-mijn-docs__link { justify-self: start; }
    .hcn-mijn .hcn-mijn-docs__people:not(.is-family) .hcn-mijn-person { flex-direction: column; align-items: stretch; gap: 12px; }
    .hcn-mijn .hcn-mijn-docs__people:not(.is-family) .hcn-mijn-person__docs { width: 100%; }
    .hcn-mijn .hcn-mijn-person--row > summary { padding: 10px 12px; }
    .hcn-mijn .hcn-mijn-person__mini { max-width: 43%; font-size: 10px; }
    .hcn-mijn .hcn-mijn-help__actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .hcn-mijn .hcn-mijn-help__button { width: 100%; }
    .hcn-mijn .hcn-mijn-service,
    .hcn-mijn .hcn-mijn-pay { padding: 18px 15px; }
    .hcn-mijn .hcn-mijn-portrait { width: 68px; height: 68px; flex-basis: 68px; }
    .hcn-mijn .hcn-mijn-portrait .hcn-ico { width: 44px; height: 44px; }
}
@media (max-width: 360px) {
    .hcn-portal.hcn-mijn { --mijn-gutter: 11px; }
    .hcn-mijn .hcn-mijn-brand__logo { max-width: 96px; }
    .hcn-mijn .hcn-mijn-account__name { max-width: 60px; }
    .hcn-mijn .hcn-mijn-welcome__title { font-size: 21px; }
    .hcn-portal.hcn-mijn .hcn-mijn-next__cta { font-size: 16px; gap: 8px; padding-inline: 14px; }
    .hcn-mijn .hcn-mijn-next--calm { gap: 10px; }
    .hcn-mijn .hcn-mijn-action { padding: 16px 14px; }
    /* The icon is decoration; on the narrowest phones its width goes to the words, so the status stays on one line. */
    .hcn-mijn .hcn-mijn-action__icon { display: none; }
    .hcn-mijn .hcn-mijn-action__status { letter-spacing: .05em; }
    .hcn-mijn .hcn-mijn-action__title { font-size: 19px; }
}

/* The narrowest phones still in use. The header's five controls no longer fit at their usual rhythm, so
   the gutter and the gaps give way first and the name gives way second; nothing is allowed past the edge. */
@media (max-width: 340px) {
    .hcn-portal.hcn-mijn { --mijn-gutter: 8px; }
    .hcn-mijn .hcn-mijn-top__inner { gap: 6px; }
    .hcn-mijn .hcn-mijn-top__end { gap: 2px; }
    .hcn-mijn .hcn-mijn-brand__logo { max-width: 78px; }
    .hcn-mijn .hcn-mijn-account__name { max-width: 44px; }
}

/* Touch devices get the colour change without the scale, which reads as a stuck hover. */
@media (hover: none) {
    .hcn-mijn .hcn-mijn-nav__link:hover,
    .hcn-mijn .hcn-mijn-drawer__link:hover,
    .hcn-mijn .hcn-mijn-account > summary:hover,
    .hcn-mijn .hcn-mijn-iconbtn:hover { transform: none; background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .hcn-mijn *,
    .hcn-mijn *::before,
    .hcn-mijn *::after,
    .hcn-mijn-steps { animation: none !important; transition: none !important; }
    .hcn-mijn .hcn-mijn-journey__scroller { scroll-behavior: auto; }
}

@media (forced-colors: active) {
    .hcn-mijn .hcn-mijn-welcome,
    .hcn-mijn .hcn-mijn-service,
    .hcn-mijn .hcn-mijn-pay,
    .hcn-mijn .hcn-mijn-countdown,
    .hcn-mijn .hcn-mijn-docs,
    .hcn-mijn .hcn-mijn-help,
    .hcn-mijn .hcn-mijn-journey__panel { border: 1px solid CanvasText; }
    .hcn-mijn .hcn-mijn-welcome { background-image: none; }
    .hcn-mijn .hcn-mijn-badge { border-color: CanvasText; }
    .hcn-portal.hcn-mijn .hcn-mijn-next__cta { border: 2px solid ButtonText; }
    .hcn-mijn .hcn-mijn-action,
    .hcn-mijn .hcn-mijn-action__icon { border: 1px solid CanvasText; }
}

/* ------------------------------------------------------------------ the page around the shell */

/* Only on a signed-in Mijn HCN screen: the shell brings its own header and logo. */
body.hcn-mijn-screen #site-header,
body.hcn-mijn-screen .page-header,
body.hcn-mijn-screen #site-footer .site-branding { display: none; }

/* The theme centres page content in a narrower column and pads it; the bands above need the full
   width, and the shell supplies its own gutters. */
body.hcn-mijn-screen main.site-main { max-width: none; padding-inline: 0; }

/*
 * The site-wide floating WhatsApp button (fixed bottom-right) lands on top of the cards wherever the
 * content reaches the right edge. The homepage carries the same help itself ("Hulp" in the header and
 * "Hulp nodig?" at the end), so there, and only at those widths, the floating button steps aside.
 */
@media (max-width: 1279px) {
    body.hcn-mijn-screen:has([data-hcn-mijn-support]) .e-contact-buttons { display: none; }
}

/* D-95 — Beveiliging → Wachtwoord wijzigen: the Luxury V1 page (2026-10-24) has its own stylesheet,
   assets/styles/mijn-beveiliging.css, loaded on that section only. */

/* ------------------------------------------------------------------ 12. service-upgrade request (phase 5)

   Scoped to `.hcn-mijn`, tokens only, no coloured left borders, and no blue anywhere: the one primary
   action is the HCN gold the rest of the portal uses, and "intrekken" is deliberately quiet, because
   taking a request back should never look like the thing the screen is asking you to do. */
.hcn-mijn .hcn-svc,
.hcn-mijn .hcn-svc-summary,
.hcn-mijn .hcn-svc-history {
    margin: var(--hcn-space-5) 0 0;
    padding: var(--hcn-space-5);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border);
    border-radius: var(--hcn-radius-lg);
    background-color: var(--hcn-color-surface);
}
.hcn-mijn .hcn-svc h3,
.hcn-mijn .hcn-svc-summary h3,
.hcn-mijn .hcn-svc-history h3 {
    display: flex;
    align-items: center;
    gap: var(--hcn-space-2);
    margin: 0 0 var(--hcn-space-3);
    color: var(--hcn-color-heading);
    font-size: 1.05em;
    font-weight: 700;
}
.hcn-mijn .hcn-svc__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--hcn-space-2) var(--hcn-space-4);
    margin: 0 0 var(--hcn-space-4);
}
.hcn-mijn .hcn-svc__facts dt { color: var(--hcn-color-muted); }
.hcn-mijn .hcn-svc__facts dd { margin: 0; font-weight: 650; color: var(--hcn-color-heading); }
.hcn-mijn .hcn-svc__note { margin: 0; color: var(--hcn-color-text); }
.hcn-mijn .hcn-svc__withdraw { margin: var(--hcn-space-4) 0 0; }
/* Taking a request back is the quiet option, not the one the screen pushes: the neutral surface, a
   44px hit area, and never the gold reserved for the primary action. */
.hcn-mijn .hcn-svc__withdrawbtn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background-color: var(--hcn-color-neutral-bg);
    color: var(--hcn-color-heading);
    border-color: var(--hcn-color-border);
}

.hcn-mijn .hcn-svc-choices { margin: var(--hcn-space-5) 0 0; padding: 0; border: 0; }
.hcn-mijn .hcn-svc-choices legend {
    padding: 0;
    margin: 0 0 var(--hcn-space-3);
    color: var(--hcn-color-heading);
    font-size: 1.05em;
    font-weight: 700;
}
.hcn-mijn .hcn-svc-choice { position: relative; margin: 0 0 var(--hcn-space-3); }
.hcn-mijn .hcn-svc-choice input {
    position: absolute;
    top: var(--hcn-space-4);
    left: var(--hcn-space-4);
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--hcn-color-brand-strong);
}
.hcn-mijn .hcn-svc-choice label {
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: var(--hcn-space-1) var(--hcn-space-4);
    min-height: 44px;
    padding: var(--hcn-space-4) var(--hcn-space-4) var(--hcn-space-4) calc(var(--hcn-space-4) * 2 + 22px);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border);
    border-radius: var(--hcn-radius-md);
    background-color: var(--hcn-color-surface);
    cursor: pointer;
}
.hcn-mijn .hcn-svc-choice input:checked + label { border-color: var(--hcn-color-brand-strong); }
.hcn-mijn .hcn-svc-choice input:focus-visible + label { outline: var(--hcn-focus-ring); outline-offset: 2px; }
.hcn-mijn .hcn-svc-choice__name { color: var(--hcn-color-heading); font-weight: 700; }
.hcn-mijn .hcn-svc-choice__price {
    grid-column: 2;
    grid-row: 1;
    color: var(--hcn-color-heading);
    font-size: 1.15em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hcn-mijn .hcn-svc-choice__desc,
.hcn-mijn .hcn-svc-choice__tier { grid-column: 1 / -1; color: var(--hcn-color-muted); }

.hcn-mijn .hcn-svc-issue { margin: var(--hcn-space-5) 0 0; max-width: 34rem; }
.hcn-mijn .hcn-svc-issue__label {
    display: block;
    margin: var(--hcn-space-4) 0 var(--hcn-space-2);
    color: var(--hcn-color-heading);
    font-weight: 700;
}
.hcn-mijn .hcn-svc-issue select,
.hcn-mijn .hcn-svc-issue textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--hcn-space-2) var(--hcn-space-3);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border);
    border-radius: var(--hcn-radius-md);
    background-color: var(--hcn-color-surface);
    color: var(--hcn-color-text);
    font: inherit;
}
.hcn-mijn .hcn-svc-issue select:focus-visible,
.hcn-mijn .hcn-svc-issue textarea:focus-visible { outline: var(--hcn-focus-ring); outline-offset: 1px; }

.hcn-mijn .hcn-svc-steps { margin: 0 0 var(--hcn-space-4); padding-left: 1.4em; }
.hcn-mijn .hcn-svc-steps li { margin: 0 0 var(--hcn-space-2); }
.hcn-mijn .hcn-svc-submit { width: 100%; min-height: 48px; margin: var(--hcn-space-5) 0 0; justify-content: center; }

.hcn-mijn .hcn-svc-history__list { margin: 0; padding: 0; list-style: none; }
.hcn-mijn .hcn-svc-history__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hcn-space-2) var(--hcn-space-3);
    padding: var(--hcn-space-3) 0;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--hcn-color-border);
}
.hcn-mijn .hcn-svc-history__list li:first-child { border-top: 0; padding-top: 0; }
.hcn-mijn .hcn-svc-history__what { color: var(--hcn-color-heading); font-weight: 650; }
.hcn-mijn .hcn-svc-history__when,
.hcn-mijn .hcn-svc-history__reason { color: var(--hcn-color-muted); }
.hcn-mijn .hcn-svc-history__reason { flex-basis: 100%; }

@media (min-width: 600px) {
    .hcn-mijn .hcn-svc-submit { width: auto; min-width: 16rem; }
}

/* The one place on this screen where something needs the family's attention: the amount they agreed to
   is no longer the amount that applies. A tinted panel and a weight change, no coloured left border. */
.hcn-mijn .hcn-svc__note--attention {
    margin-top: var(--hcn-space-4);
    padding: var(--hcn-space-4);
    border-width: 1px;
    border-style: solid;
    border-color: var(--mijn-amber);
    border-radius: var(--hcn-radius-md);
    background-color: var(--mijn-amber-soft);
    color: var(--hcn-color-heading);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────────
 * 13. Mijn HCN rebuild (0.65.0-dev) — Gegevens hub, member editor, review, Mijn gezin.
 *     A′ (0.66.0-dev): the hub carries every value read-only and the confirmation; the editor became two
 *     small task screens (Corrigeren, Aanvullen); the review page is gone.
 *
 * Written for the people who use it: older pilgrims, often on a phone, often managing a whole family.
 * 17px running text and 18px input text (never below 16px, where iOS zooms on focus), labels above
 * their fields, 52px fields, 48px secondary and 56px primary actions, the error directly above the
 * field that earned it. V18's own palette and radii; the one filled action per screen is V18's green
 * (Opslaan, Gegevens controleren, bevestigen) and nothing is blue. Status is always a word and an icon
 * as well as a colour. No coloured left borders anywhere: a state is a tinted panel or a whole border.
 * Buttons carry three classes so they outrank the portal's button reset (section 1) and the theme kit.
 * ───────────────────────────────────────────────────────────────────────────────────────────────── */

.hcn-mijn .hcn-mijn-gd {
    --gd-field-line: var(--hcn-color-mijn-field-line);
    --gd-ink-soft: var(--hcn-color-mijn-ink-soft);
    --gd-success-line: var(--hcn-color-mijn-success-line);
    --gd-error-line: var(--hcn-color-mijn-error-line);
    --gd-amber-line: var(--hcn-color-mijn-amber-line);
    font-size: 17px;
    line-height: 1.55;
    color: var(--mijn-ink);
}
.hcn-mijn .hcn-mijn-gd h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 720;
    line-height: 1.2;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}
.hcn-mijn .hcn-mijn-gd h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.hcn-mijn .hcn-mijn-gd p { margin: 0; }
.hcn-mijn .hcn-mijn-gd ul,
.hcn-mijn .hcn-mijn-gd ol,
.hcn-mijn .hcn-mijn-page .hcn-mijn-gd ul { margin: 0; padding: 0; list-style: none; }
.hcn-mijn .hcn-mijn-gd a:not(.hcn-mijn-act) { color: var(--mijn-gold-deep); font-weight: 620; text-decoration: underline; text-underline-offset: 3px; }
.hcn-mijn .hcn-mijn-gd a:not(.hcn-mijn-act):hover { color: var(--mijn-green-deep); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-pic { flex: none; display: block; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-badge { padding: 6px 12px; font-size: 14px; white-space: normal; text-align: left; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-lead { max-width: 64ch; color: var(--gd-ink-soft); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-head { margin: 0 0 22px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-head .hcn-mijn-gd-lead { margin-top: 2px; }

/* Where the family stands: a sentence first, then one segment per traveller. */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-count { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 17px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-count strong { font-weight: 720; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-count__bar { display: inline-flex; gap: 4px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-count__bar span { width: 30px; height: 8px; border-radius: 4px; background: var(--mijn-track); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-count__bar span.is-done { background: var(--mijn-green); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-count__sep { margin: 0 4px; color: var(--mijn-quieter); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-count__state { font-weight: 620; color: var(--gd-ink-soft); }

/* ── actions ── */
.hcn-portal.hcn-mijn .hcn-mijn-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.005em;
    text-align: center;
    text-decoration: none;
    color: var(--mijn-ink);
    background: var(--hcn-color-surface);
    border-width: 1px; border-style: solid; border-color: var(--gd-field-line);
    border-radius: var(--mijn-radius-control);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.hcn-portal.hcn-mijn .hcn-mijn-act .hcn-ico { flex: none; }
.hcn-portal.hcn-mijn .hcn-mijn-act:hover { background: var(--hcn-color-mijn-hover-cream); }
.hcn-portal.hcn-mijn .hcn-mijn-act--todo { background: var(--hcn-color-brand-soft); border-color: var(--mijn-gold); }
.hcn-portal.hcn-mijn .hcn-mijn-act--primary {
    min-height: 56px;
    padding: 15px 28px;
    font-size: 18px;
    font-weight: 680;
    color: var(--hcn-color-on-dark);
    background: var(--mijn-green);
    border-color: var(--mijn-green-deep);
}
.hcn-portal.hcn-mijn .hcn-mijn-act--primary:hover { color: var(--hcn-color-on-dark); background: var(--mijn-green-deep); }
.hcn-portal.hcn-mijn .hcn-mijn-act--quiet {
    padding: 12px 10px;
    color: var(--mijn-gold-deep);
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hcn-portal.hcn-mijn .hcn-mijn-act--quiet:hover { color: var(--mijn-green-deep); background: transparent; }

/* ── notices ── */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 22px;
    padding: 16px 18px;
    border-width: 1px; border-style: solid; border-color: transparent;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 600;
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-notice .hcn-ico { flex: none; margin-top: 1px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-notice--success { color: var(--mijn-green-ink); background: var(--mijn-green-soft); border-color: var(--gd-success-line); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-notice--error { color: var(--mijn-red); background: var(--mijn-red-page); border-color: var(--gd-error-line); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-notice:focus { outline: var(--mijn-ring); outline-offset: 3px; }

/* ── the hub: one card per traveller ── */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    gap: 18px;
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    background: var(--hcn-color-surface);
    border-width: 1px; border-style: solid; border-color: var(--mijn-line);
    border-radius: var(--mijn-radius);
    scroll-margin-top: calc(var(--mijn-sticky-top) + 96px);
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card:target { border-color: var(--mijn-gold); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__who { flex: 1 1 10rem; min-width: 0; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__name { font-size: 19px; overflow-wrap: anywhere; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__role { margin-top: 1px; font-size: 15px; color: var(--mijn-quiet); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 620;
    color: var(--mijn-green-ink);
    background: var(--mijn-green-soft);
    border-radius: var(--mijn-radius-control);
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__notice .hcn-ico { flex: none; margin-top: 2px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__notice:focus { outline: var(--mijn-ring); outline-offset: 3px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__todo { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__todo li { display: flex; align-items: flex-start; gap: 10px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__todo .hcn-ico { flex: none; margin-top: 3px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__todo .is-family .hcn-ico { color: var(--mijn-amber); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__todo .is-hcn .hcn-ico { color: var(--mijn-quieter); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__todo .is-done .hcn-ico { color: var(--mijn-green); }

/* A′: the hub is one column — each card now carries the traveller's whole record. */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-people--hub { grid-template-columns: minmax(0, 1fr); max-width: 920px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__todo li > div { min-width: 0; }

/* Every stored value, read-only, in a native disclosure: closed for a traveller who needs nothing. */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sumbox {
    background: var(--mijn-panel);
    border-width: 1px; border-style: solid; border-color: var(--mijn-panel-line);
    border-radius: var(--mijn-radius-control);
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sumbox__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 16px;
    font-size: 17px;
    font-weight: 680;
    color: var(--mijn-heading);
    list-style: none;
    cursor: pointer;
    border-radius: var(--mijn-radius-control);
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sumbox__summary::-webkit-details-marker { display: none; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sumbox__summary:hover { background: var(--hcn-color-mijn-hover-cream); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sumbox__summary:focus-visible { outline: var(--mijn-ring); outline-offset: 3px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sumbox__chev { margin-left: auto; flex: none; transition: transform .18s ease; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sumbox[open] .hcn-mijn-gd-sumbox__chev { transform: rotate(180deg); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sumbox__body { padding: 0 16px 8px; background: var(--hcn-color-surface); border-radius: 0 0 var(--mijn-radius-control) var(--mijn-radius-control); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sumgroup { padding: 14px 0 6px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sumgroup + .hcn-mijn-gd-sumgroup { border-top-width: 1px; border-top-style: solid; border-top-color: var(--mijn-line); }
/* The group name wraps on a narrow phone; Corrigeren stays at the right of its own group, never on a line of its own. */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sumgroup__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 2px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sumgroup__head h4 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; font-weight: 720; line-height: 1.3; color: var(--mijn-gold-deep); }
.hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-fix { flex: none; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sum__none { font-weight: 500; color: var(--mijn-quiet); }

/* The closing step of the hub: where the family stands, and the one confirmation. */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-close {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 26px;
    padding: 22px;
    background: var(--mijn-panel);
    border-width: 1px; border-style: solid; border-color: var(--mijn-panel-line);
    border-radius: var(--mijn-radius);
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-close { max-width: 920px; scroll-margin-top: calc(var(--mijn-sticky-top) + 96px); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-close.is-ready { background: var(--hcn-color-mijn-sand-mid); border-color: var(--mijn-line-warm); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-close.is-confirmed { background: var(--mijn-green-soft); border-color: var(--gd-success-line); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-close__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 66ch; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-close__body h3 { font-size: 20px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-confirm__form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; max-width: 100%; margin-top: 6px; }
/* The theme kit keeps button text on one line; at 320px "Bevestigen namens de familie" is wider than the panel, so
   an action here may wrap rather than push the page sideways. */
.hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-act { max-width: 100%; white-space: normal; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-confirm__form .hcn-mijn-gd-errors { margin: 0; }
/* The acknowledgement: the whole row is the target, the box itself large. */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-ack {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    background: var(--hcn-color-surface);
    border-width: 1px; border-style: solid; border-color: var(--gd-field-line);
    border-radius: var(--mijn-radius-control);
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-ack input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--mijn-green); cursor: pointer; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-ack label { font-size: 17px; font-weight: 620; line-height: 1.45; color: var(--mijn-ink); cursor: pointer; }
/* The label's hit area covers the whole row, so a tap anywhere on it ticks the box. */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-ack label::after { content: ""; position: absolute; inset: 0; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-ack:has(input:checked) { background: var(--mijn-green-soft); border-color: var(--mijn-green); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-ack:has(input:focus-visible) { outline: var(--mijn-ring); outline-offset: 3px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-ack.is-invalid { border-width: 2px; border-color: var(--mijn-red); padding: 13px 15px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-confirm__form .hcn-mijn-gd-field__error { margin: -4px 0 0; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-staffnote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--gd-ink-soft);
    background: var(--hcn-color-surface);
    border-width: 1px; border-style: solid; border-color: var(--mijn-line-warm);
    border-radius: var(--mijn-radius-control);
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-staffnote .hcn-ico { flex: none; margin-top: 2px; color: var(--hcn-color-mijn-staff); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-aside { display: flex; align-items: flex-start; gap: 10px; max-width: 72ch; margin-top: 22px; font-size: 16px; line-height: 1.6; color: var(--gd-ink-soft); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-aside .hcn-ico { flex: none; margin-top: 4px; color: var(--mijn-quieter); }

/* ── editor ── */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-back { margin: 0 0 14px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 16px;
    font-weight: 650;
    text-decoration: none;
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-back a span { text-decoration: underline; text-underline-offset: 3px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-person { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-person__text { min-width: 0; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-person h2 { display: block; margin: 0 0 6px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-person__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 16px; color: var(--mijn-quiet); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-person__who { color: var(--gd-ink-soft); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-person__who strong { font-weight: 700; color: var(--mijn-ink); overflow-wrap: anywhere; }
.hcn-mijn .hcn-mijn-gd--task .hcn-mijn-gd-person { max-width: 920px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-done { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; font-size: 17px; font-weight: 620; color: var(--mijn-green-ink); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-done .hcn-ico { flex: none; margin-top: 1px; }

.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-errors {
    margin: 0 0 22px;
    padding: 18px 20px;
    color: var(--mijn-red);
    background: var(--mijn-red-page);
    border-width: 2px; border-style: solid; border-color: var(--mijn-red);
    border-radius: 14px;
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-errors:focus { outline: var(--mijn-ring); outline-offset: 3px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-errors h3 { display: flex; align-items: flex-start; gap: 10px; font-size: 18px; color: var(--mijn-red); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-errors h3 .hcn-ico { flex: none; margin-top: 2px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-errors p { margin-top: 8px; color: var(--hcn-color-mijn-error-ink); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-errors ul { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-errors a { color: var(--hcn-color-mijn-error-link); font-weight: 500; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-errors a strong { font-weight: 700; }

.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-needed {
    margin: 0 0 22px;
    padding: 18px 20px;
    background: var(--mijn-amber-page);
    border-width: 1px; border-style: solid; border-color: var(--gd-amber-line);
    border-radius: 14px;
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-needed h3 { margin: 0 0 8px; font-size: 18px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-needed ul { display: flex; flex-direction: column; gap: 8px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-needed__item { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-needed__item .hcn-ico { flex: none; margin-top: 3px; color: var(--mijn-amber); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-needed__item--hcn .hcn-ico { color: var(--mijn-quieter); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-needed--line { display: flex; align-items: flex-start; gap: 10px; max-width: 920px; font-size: 16px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-needed--line .hcn-ico { flex: none; margin-top: 3px; color: var(--mijn-amber); }
.hcn-mijn .hcn-mijn-gd > .hcn-mijn-gd-lead { margin: 0 0 18px; }

.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-form { max-width: 920px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-group {
    min-width: 0;
    margin: 0 0 18px;
    padding: 22px;
    background: var(--hcn-color-surface);
    border-width: 1px; border-style: solid; border-color: var(--mijn-line);
    border-radius: var(--mijn-radius);
}
/* A floated legend sits inside its fieldset like a heading, instead of cutting a notch in the border. */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-group__legend {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    font-size: 20px;
    font-weight: 720;
    line-height: 1.25;
    color: var(--mijn-heading);
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-group__grid { clear: both; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 24px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-field { min-width: 0; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-field__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0 0 6px;
    padding: 0;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--mijn-heading);
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-field__optional { font-size: 15px; font-weight: 500; color: var(--mijn-quiet); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-todo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 14px;
    font-weight: 650;
    color: var(--mijn-amber);
    background: var(--mijn-amber-soft);
    border-radius: 99px;
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-field__hint { margin: 0 0 8px; font-size: 15px; line-height: 1.45; color: var(--mijn-quiet); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-field__stored { margin: 0 0 6px; font-size: 16px; color: var(--gd-ink-soft); }
/* Gate 0 (0.65.1): the main applicant's sign-in address, shown and never an input. A long address wraps
   anywhere rather than pushing the column wider than a 320px phone. */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-field__value { margin: 0 0 6px; font-size: 18px; font-weight: 650; line-height: 1.4; color: var(--mijn-ink); overflow-wrap: anywhere; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-mask { font-weight: 680; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--mijn-ink); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-field__error { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 8px; font-size: 16px; font-weight: 650; line-height: 1.4; color: var(--mijn-red); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-field__error .hcn-ico { flex: none; margin-top: 2px; }
.hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 14px;
    font: inherit;
    font-size: 18px;
    line-height: 1.3;
    color: var(--mijn-ink);
    background-color: var(--hcn-color-surface);
    border-width: 1px; border-style: solid; border-color: var(--gd-field-line);
    border-radius: var(--mijn-radius-control);
    box-shadow: none;
}
.hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-input::placeholder { color: var(--hcn-color-mijn-placeholder); opacity: 1; }
.hcn-portal.hcn-mijn select.hcn-mijn-gd-input { padding-right: 40px; }
.hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-input--date { max-width: 13rem; letter-spacing: .02em; }
.hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-input--short { max-width: 12rem; }
/* D27: wide enough for "Onbekend — ik weet mijn bloedgroep niet" without clipping. */
.hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-input--blood { max-width: 24rem; }
.hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-input--phone { max-width: 22rem; }
.hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-input--passport { max-width: 22rem; letter-spacing: .04em; }
.hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-input:focus { outline: var(--mijn-ring); outline-offset: 2px; border-color: var(--mijn-gold-deep); }
.hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-field.is-invalid .hcn-mijn-gd-input { border-width: 2px; border-style: solid; border-color: var(--mijn-red); padding: 11px 13px; }

/* Choices as large, tappable chips: a native radio or checkbox inside a label the size of a button. */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-choice > legend { float: left; width: 100%; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-choice > legend:focus { outline: none; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-choice > legend ~ * { clear: both; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 18px 10px 14px;
    font-size: 17px;
    font-weight: 560;
    color: var(--mijn-ink);
    background: var(--hcn-color-surface);
    border-width: 1px; border-style: solid; border-color: var(--gd-field-line);
    border-radius: 99px;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-chip input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--mijn-green); cursor: pointer; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-chip:hover { background: var(--hcn-color-mijn-hover-cream); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-chip:has(input:checked) { font-weight: 650; background: var(--mijn-green-soft); border-color: var(--mijn-green); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-chip:has(input:focus-visible) { outline: var(--mijn-ring); outline-offset: 3px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-field.is-invalid .hcn-mijn-gd-chip { border-color: var(--mijn-red); }

.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 6px 0 0;
    padding: 20px 0 0;
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-help { display: flex; align-items: flex-start; gap: 8px; margin-top: 26px; font-size: 16px; color: var(--gd-ink-soft); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-help .hcn-ico { flex: none; margin-top: 3px; color: var(--mijn-quieter); }

/* ── the read-only values on the hub (the review page they came from is gone since A′) ── */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sum__list { margin: 0; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sum__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; padding: 10px 0; border-top-width: 1px; border-top-style: solid; border-top-color: var(--mijn-line); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sum__row dt { font-size: 15px; color: var(--mijn-quiet); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sum__row dd { margin: 0; font-size: 17px; font-weight: 620; overflow-wrap: anywhere; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sum__empty { font-weight: 600; color: var(--mijn-amber); }

/* ── Mijn gezin ── */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-subhead { margin: 26px 0 12px; font-size: 18px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-family { display: flex; flex-direction: column; gap: 10px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-family__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 14px 16px;
    background: var(--hcn-color-surface);
    border-width: 1px; border-style: solid; border-color: var(--mijn-line);
    border-radius: 14px;
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-family__who { display: flex; flex-direction: column; flex: 1 1 12rem; min-width: 0; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-family__name { font-size: 18px; font-weight: 680; overflow-wrap: anywhere; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-family__role { font-size: 15px; color: var(--mijn-quiet); }
.hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-family__row > .hcn-mijn-act { margin-left: auto; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-family--removed .hcn-mijn-gd-family__row { background: var(--mijn-panel); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-family--removed .hcn-mijn-gd-family__name { color: var(--hcn-color-mijn-ink-muted); }

.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-add {
    margin-top: 26px;
    background: var(--hcn-color-mijn-sand-mid);
    border-width: 1px; border-style: solid; border-color: var(--mijn-line-warm);
    border-radius: var(--mijn-radius);
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-add__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 14px 18px;
    font-size: 18px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    border-radius: var(--mijn-radius);
}
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-add__summary::-webkit-details-marker { display: none; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-add__summary:hover { background: var(--hcn-color-mijn-sand-top); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-add__summary:focus-visible { outline: var(--mijn-ring); outline-offset: 3px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-add__chev { margin-left: auto; transition: transform .18s ease; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-add[open] .hcn-mijn-gd-add__chev { transform: rotate(180deg); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-add__body { padding: 0 18px 20px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-add__body > .hcn-mijn-gd-lead { margin: 0 0 10px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-add__note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 18px; font-size: 15px; color: var(--gd-ink-soft); }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-add__note .hcn-ico { flex: none; margin-top: 2px; color: var(--mijn-quieter); }

@media (min-width: 900px) {
    .hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-field--wide { grid-column: 1 / -1; }
    .hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sum__row { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); align-items: baseline; }
}
@media (max-width: 600px) {
    .hcn-mijn .hcn-mijn-page:has(> .hcn-mijn-gd) { padding: 22px 16px; }
    .hcn-mijn .hcn-mijn-gd h2 { font-size: 23px; }
    .hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card,
    .hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-group,
    .hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-close { padding: 18px 16px; }
    .hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-close { flex-direction: column; }
    .hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-sumbox__body { padding: 0 12px 6px; }
    .hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-card__fill .hcn-mijn-act,
    .hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-family__row > .hcn-mijn-act,
    .hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-actions .hcn-mijn-act--primary,
    .hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-confirm__form .hcn-mijn-act--primary,
    .hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-close .hcn-mijn-act--primary { width: 100%; align-self: stretch; margin-left: 0; }
    .hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-actions { justify-content: center; }
    .hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-add__body { padding: 0 12px 16px; }
}

/* Every link a finger has to hit is a 44px target, not a 22px line of text. */
/* Inside a sentence: a 44px-tall hit area whose negative margins keep the line height of the text. */
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-tap { display: inline-block; padding: 10px 2px; margin: -10px -2px; }
.hcn-portal.hcn-mijn .hcn-mijn-gd .hcn-mijn-act--small { min-height: 44px; padding: 9px 14px; font-size: 16px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-docgo { margin-top: 8px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-needed,
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-errors { max-width: 920px; }
.hcn-mijn .hcn-mijn-gd .hcn-mijn-badge,
.hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-todo { font-size: 15px; }

/* The site's floating WhatsApp button covers form fields on a phone and a tablet. Every one of these
   screens carries its own way to HCN's help, so there — and only at those widths — the button steps aside,
   exactly as it already does on the homepage. */
@media (max-width: 1279px) {
    body.hcn-mijn-screen:has([data-hcn-mijn-form]) .e-contact-buttons { display: none; }
}
@media (forced-colors: active) {
    .hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-chip:has(input:checked) { outline: 2px solid CanvasText; }
    .hcn-mijn .hcn-mijn-gd .hcn-mijn-gd-count__bar span.is-done { background: CanvasText; }
}

/* 14. Mijn HCN › Documenten: since 0.82.0-dev (the approved Luxury V5) in its own stylesheet, mijn-documenten.css. */

/* ADM-11 (0.94.0-dev): the extra payment after a family merge, a second card below the service payment, and a
   homepage line pointing to it. Tokens only, longhand borders, no coloured left border. */
.hcn-mijn .hcn-mijn-betaal--extra { margin-top: 18px; }
.hcn-mijn .hcn-mijn-betaal__extra-title { margin: 6px 0 2px; color: var(--mijn-heading); font-size: 17px; font-weight: 700; line-height: 1.35; }
.hcn-mijn .hcn-mijn-extra-banner {
    display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between;
    margin: 0 0 18px; padding: 14px 16px;
    border-width: 1px; border-style: solid; border-color: var(--mijn-line-warm);
    border-radius: var(--mijn-radius); background-color: var(--mijn-amber-page); color: var(--mijn-ink);
    font-size: 15px; line-height: 1.5;
}
.hcn-mijn .hcn-mijn-extra-banner a {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px;
    border-radius: 999px; background-color: var(--mijn-green); color: var(--hcn-color-surface); font-weight: 650; text-decoration: none;
}
.hcn-mijn .hcn-mijn-extra-banner a:hover,
.hcn-mijn .hcn-mijn-extra-banner a:focus-visible { background-color: var(--mijn-green-deep); color: var(--hcn-color-surface); }