/*
 * HCN Management — Registration V2 presentation layer.
 *
 * V2's templates were written for correctness first and carry their own semantic class names
 * (`hcn-reg--v2`, `hcn-reg__section`, `hcn-field`, …). None of those had a rule anywhere, so every V2
 * screen rendered as unstyled HTML on top of whatever the theme happened to provide. This file is that
 * missing layer, and nothing else: no markup contract changes, no behaviour, no new workflow.
 *
 * It deliberately does NOT restyle R1. `registration.css` keeps serving the live flow untouched; this
 * file only declares rules for V2's own class names and is enqueued after it.
 *
 * Everything colour, spacing, radius, focus and control-height related comes from `tokens.css`. No raw
 * brand hex value appears here. Two house rules the rest of HCN follows apply here too: no coloured
 * left borders anywhere (a status is a badge or a background, never a stripe down the side), and every
 * interactive control is at least 44px on its smallest side.
 */

/* ------------------------------------------------------------------ shell */

/*
 * ONE SURFACE PER LEVEL.
 *
 * The page holds a single registration card; inside it the current step; inside the step, quiet
 * sections and rows. Nothing below the card carries a background, a border, a radius and a shadow at
 * once — hierarchy is spacing and type first.
 *
 * The card is the shell element itself, so no template had to grow a wrapper. Since 0.72.1-dev (owner
 * correction "Final Premium Layout & Vertical Stepper") its dimensions are fixed by the owner: the card
 * (the "chrome") is at most 1,080px and the step inside it at most 1,000px. The five-step navigator is
 * NOT part of the card: on a wide desktop it stands to the LEFT of it as a quiet panel of its own (see
 * "step navigator" below); everywhere else the card carries a one-line "Stap N van 5" status instead.
 * The grid has one named column, `chrome`, no row gap, and spaces with margins.
 */
.hcn-reg--v2 {
    /* One text face on every HCN screen (owner decision 2026-10-23), whatever the theme sets. */
    font-family: var(--hcn-font);
    /* The card's own width: at most 1,080px, the step inside it 1,000px (40px gutters). */
    --hcn-reg-v2-chrome: 1080px;
    --hcn-reg-v2-width: var(--hcn-reg-v2-chrome);
    /* The page edge kept clear when the card is wider than the theme's content column (see the
       breakout rule under "shell width" below). */
    --hcn-reg-v2-edge: 24px;
    --hcn-reg-v2-pad: 40px;
    /* The step navigator (0.72.1-dev). Inter, the HCN greens, a soft green-tinted surface. */
    --hcn-reg-step-font: "HCN Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --hcn-reg-step-surface: #f7f9f6;
    --hcn-reg-step-edge: #e2eae4;
    --hcn-reg-step-green: #085438;
    --hcn-reg-step-ink: #182f26;
    --hcn-reg-step-text: #4f5d55;
    --hcn-reg-step-muted: #5d6b63;
    --hcn-reg-step-line: #d3ddd6;
    --hcn-reg-step-ahead: #e6ede8;
    --hcn-reg-step-dot: calc(28px * var(--hcn-reg-scale, 1));
    --hcn-reg-step-w: 0px;
    --hcn-reg-step-gap: 0px;
    /* Both are read by the shared `.hcn-btn` rules, which resolve to nothing without them. */
    --hcn-reg-scale: 1;
    --hcn-reg-control: 54px;
    --hcn-reg-v2-gap: var(--hcn-space-6, 24px);

    box-sizing: border-box;
    position: relative;
    display: grid;
    grid-template-columns: [chrome-start] minmax(0, 1fr) [chrome-end];
    gap: 0;
    align-content: start;
    max-width: var(--hcn-reg-v2-width);
    width: 100%;
    margin: 40px auto 80px;
    padding: 0;
    background: var(--hcn-color-surface, #fff);
    border: 1px solid var(--hcn-color-border-soft, #e4e6e9);
    border-radius: 14px;
    box-shadow:
        0 2px 4px rgba(28, 28, 29, .04),
        0 8px 24px rgba(28, 28, 29, .08),
        0 20px 48px rgba(28, 28, 29, .05);
    font-size: calc(18px * var(--hcn-reg-scale));
    line-height: 1.6;
    color: var(--hcn-color-text, #2D2E2F);
}

/* Everything spans the card's columns (`1 / -1`, so a screen that redefines the grid — the checkout, the
   confirmation, Step 2's two columns — still has a full-width row for the chrome). The two chrome rows
   run edge to edge; everything that is not chrome is the step and keeps the card's gutters. */
.hcn-reg--v2 > * { grid-column: 1 / -1; }
.hcn-reg--v2 > *:not(.hcn-note):not(.hcn-reg__topbar):not(.hcn-reg__rail) {
    padding-inline: var(--hcn-reg-v2-pad);
}
.hcn-reg--v2 > .hcn-reg__rail + * { padding-top: 28px; }


.hcn-reg--v2 *,
.hcn-reg--v2 *::before,
.hcn-reg--v2 *::after { box-sizing: border-box; }

/* Assistive-technology-only text. WordPress defines this class in wp-admin and most themes define it
   on the front end, but V2 must not depend on the theme for it: without a rule the words render inside
   the step numbers, which is exactly what the acceptance walkthrough showed. */
.hcn-reg--v2 .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* One visible focus treatment for the whole flow, on top of whatever the theme does. */
.hcn-reg--v2 *:focus-visible {
    outline: var(--hcn-focus-ring, 3px solid rgba(179, 143, 100, .55));
    outline-offset: 2px;
    border-radius: var(--hcn-radius-sm, 6px);
}

.hcn-reg--v2 h2,
.hcn-reg--v2 h3,
.hcn-reg--v2 legend {
    color: var(--hcn-color-heading, #1C1C1D);
    font-weight: 700;
    line-height: 1.3;
}
.hcn-reg--v2 h2 { font-size: 1.5em; margin: 0 0 var(--hcn-space-3, 12px); }
.hcn-reg--v2 h3 { font-size: 1.15em; margin: var(--hcn-space-6, 24px) 0 var(--hcn-space-2, 8px); }
.hcn-reg--v2 p { margin: 0 0 var(--hcn-space-3, 12px); }
.hcn-reg--v2 p:last-child { margin-bottom: 0; }

/* The step's own explanatory line under a heading. */
.hcn-reg--v2 .description {
    margin: 0 0 var(--hcn-space-4, 16px);
    color: var(--hcn-color-muted, #5a5f66);
}

/* ------------------------------------------------------------------ chrome: season bar + a11y tools */

/* The season bar reads as the card's own header row, not as a floating strip above it. */
.hcn-reg__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hcn-space-4, 16px);
    /* NOT `wrap`. Below ~430px the season block and the readability tools no longer fit side by
       side; wrapping dropped the tools onto a second line where, as the only item on that line,
       `space-between` left them hard against the LEFT edge under the season. The season shrinks and
       stacks internally instead, and the tools keep the right edge at every width. */
    flex-wrap: nowrap;
    margin: 0;
    padding: 18px var(--hcn-reg-v2-pad);
    border-bottom: 1px solid var(--hcn-color-border-faint, #f0f1f3);
}

.hcn-reg__season {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
    gap: var(--hcn-space-2, 8px);
    min-height: 44px;
}
.hcn-reg__season-label {
    font-weight: 700;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg__season-phase {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 var(--hcn-space-3, 12px);
    border-radius: var(--hcn-radius-pill, 999px);
    background: var(--hcn-color-brand-soft, #F4EEE5);
    /* `--hcn-color-brand-strong` is the palette's gold for text ON WHITE (tokens.css says so). On the
       soft-gold pill it measures 4.06:1, under the 4.5:1 this size needs, so the pill keeps the gold
       fill and the wording takes the heading colour. */
    color: var(--hcn-color-heading, #1C1C1D);
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Text size and contrast. Same markup contract as R1's tools (`[data-a11y]`), same storage key, so a
   pilgrim's setting carries between the two flows. */
.hcn-reg__a11y {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
    gap: var(--hcn-space-2, 8px);
}
/* Themes style bare <button> heavily, so every visual property here is forced: these are chrome, not
   page buttons, and they must look the same on any theme HCN runs. 44px exactly — big enough to hit,
   small enough not to compete with the step's own primary action. */
.hcn-reg__a11y-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    background: var(--hcn-color-surface, #fff) !important;
    border: 1px solid var(--hcn-color-border, #d0d3d6) !important;
    border-radius: var(--hcn-radius-sm, 6px) !important;
    color: var(--hcn-color-heading, #1C1C1D) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: border-color .15s, background .15s;
}
.hcn-reg__a11y-btn:hover { border-color: var(--hcn-color-brand, #B38F64) !important; }
.hcn-reg__a11y-btn:disabled { opacity: .4 !important; cursor: default !important; }
.hcn-reg__a11y-btn[aria-pressed="true"] {
    background: var(--hcn-color-heading, #1C1C1D) !important;
    border-color: var(--hcn-color-heading, #1C1C1D) !important;
    color: var(--hcn-color-on-dark, #fff) !important;
}
.hcn-reg__a11y-glyph { display: inline-flex; align-items: baseline; }
.hcn-reg__a11y-glyph--small { font-size: .8em; }
.hcn-reg__a11y-sign { font-size: .7em; margin-left: 1px; font-weight: 800; }

/* On a phone the three tools become circles: round reads as chrome rather than as three more form
   buttons competing with the step's own controls. `!important` only because every declaration in
   the base rule above carries it — themes style bare <button> heavily — and a plain declaration
   here would lose to the theme, not to us. */
@media (max-width: 600px) {
    .hcn-reg__a11y { gap: 8px; }
    .hcn-reg__a11y-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 50% !important;
    }
}

/* ------------------------------------------------------------------ step navigator (five items, not clickable)

   Presentation only, and the same markup as ever (`registration-v2-chrome.php`): an ordered list of the
   five steps of `RegistrationV2Flow::STEPS`, the current one carrying `aria-current="step"`, a finished
   one a tick, each with a status word for a screen reader. Every item is a list item, never a link or a
   button, so no gate can be jumped from here; going back stays with each step's own Back button.

   0.72.1-dev (owner correction "Final Premium Layout & Vertical Stepper"): the horizontal five-circle
   strip is gone. Two presentations of the one list:

   - on a wide desktop (>= 1180px) a vertical navigator to the LEFT of the card, outside it: numbered
     circles joined by a thin line, a tick for a finished step, the current step bold in HCN green with a
     ring, the steps ahead quiet. It sits in a zero-width track at the card's left edge and is pulled out
     beside the card, so the card keeps its 1,080 / 1,000px, and it stays in view while the step scrolls
     (sticky, 0.72.2-dev);
   - everywhere else one compact line at the top of the card: "Stap 2 van 5 — Paspoort, pasfoto &
     documenten". No circles, no bar.

   The base rules below are the compact line; the media query turns the same elements into the
   navigator. */
.hcn-reg__rail {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0;
    padding: 12px var(--hcn-reg-v2-pad);
    background: var(--hcn-reg-step-surface);
    border-bottom: 1px solid var(--hcn-reg-step-edge);
    font-family: var(--hcn-reg-step-font);
    color: var(--hcn-reg-step-ink);
}
.hcn-reg__rail-eyebrow {
    margin: 0;
    color: var(--hcn-reg-step-green);
    font-size: .68em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
/* The eyebrow belongs to the navigator; the compact line starts with the count. */
.hcn-reg__rail-eyebrow { display: none; }
.hcn-reg__rail-count {
    margin: 0;
    color: var(--hcn-reg-step-green);
    font-size: .88em;
    font-weight: 700;
    line-height: 1.4;
}

.hcn-reg__progress {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hcn-reg__progress-item {
    position: relative;
    display: none;
    margin: 0;
    padding: 0;
    color: var(--hcn-reg-step-text);
    font-size: .88em;
    line-height: 1.4;
}
/* The compact line names only the step the pilgrim is on. */
.hcn-reg__progress-item.is-current { display: block; }
.hcn-reg__progress-item.is-current .hcn-reg__progress-number,
.hcn-reg__progress-item.is-current .hcn-reg__progress-hint { display: none; }
.hcn-reg__progress-text { display: block; min-width: 0; }
.hcn-reg__progress-label { display: block; font-weight: 600; color: var(--hcn-reg-step-ink); overflow-wrap: break-word; }
/* The dash is decoration: the empty alternative text keeps it out of what a screen reader says. */
.hcn-reg__progress-item.is-current .hcn-reg__progress-label::before { content: "\2014\00a0" / ""; color: var(--hcn-reg-step-muted); }
.hcn-reg__progress-hint { display: block; margin-top: 1px; color: var(--hcn-reg-step-muted); font-size: .88em; font-weight: 400; }

.hcn-reg__progress-number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--hcn-reg-step-dot);
    height: var(--hcn-reg-step-dot);
    border-radius: 50%;
    /* A step ahead: a pale filled circle and a muted number, no outline — the reference's quiet state. */
    background: var(--hcn-reg-step-ahead);
    border: 0;
    color: var(--hcn-reg-step-muted);
    font-size: .92em;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.hcn-reg__progress-tick { display: none; width: 15px; height: 15px; }
/* A finished step is never carried by colour alone: the numeral gives way to a tick. */
.hcn-reg__progress-item.is-done .hcn-reg__progress-number {
    background: var(--hcn-reg-step-green);
    border-color: var(--hcn-reg-step-green);
    color: #fff;
}
.hcn-reg__progress-item.is-done .hcn-reg__progress-digit { display: none; }
.hcn-reg__progress-item.is-done .hcn-reg__progress-tick { display: block; }
/* The current step: a filled green circle with its number, a soft ring and a bold title — told apart from
   a finished step by the number and the ring instead of the tick, and from a step ahead by a dark circle
   against a pale one and by the weight of its title, never by hue alone. */
.hcn-reg__progress-item.is-current .hcn-reg__progress-number {
    background: var(--hcn-reg-step-green);
    border-color: var(--hcn-reg-step-green);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(8, 84, 56, .16);
}

/* ---- the navigator, beside the card on a wide desktop ----

   0.72.2-dev (owner amendment "UI Corrections"): the navigator follows the page while a long step
   scrolls. It is still the same list, still outside the card. A sticky box needs a containing block as
   tall as the step it accompanies, so the navigator is now a grid item of the card: the card gains a
   zero-width `nav` track at its left edge, the navigator spans every row of it (`1 / span 400`; the card
   has no row gap, and empty rows are 0px tall whenever the step is taller than the navigator — on a
   step shorter than it the card grows to hold it, below the content), and a negative left margin of its
   own width + the gap + the card's 1px border places it beside the card. `position: sticky` then keeps
   it 24px below the top of the window (below the WordPress toolbar for staff) and lets it go no further
   than the card's bottom edge — never a fixed overlay. The step keeps its 1,000px: the nav track is 0px.

   The grid placement depends on `:has()`. A browser without it (Safari before 15.4, Firefox before 121)
   drops every rule that names it and keeps the 0.72.1 placement below: absolutely placed beside the
   card, not sticky, but never over the form. */
@media (min-width: 1180px) {
    .hcn-reg--v2 > .hcn-reg__rail {
        position: absolute;
        top: 0;
        /* Measured from the card's padding edge, so its 1px border is added to the gap. */
        right: calc(100% + var(--hcn-reg-step-gap) + 1px);
        display: block;
        width: var(--hcn-reg-step-w);
        padding: 22px 12px 24px;
        border: 1px solid var(--hcn-reg-step-edge);
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(24, 47, 38, .04);
        /* The card's own size scale, at a navigator's measure. */
        font-size: calc(17px * var(--hcn-reg-scale, 1));
    }
    .hcn-reg--v2:has(> .hcn-reg__rail) {
        grid-template-columns: [nav-start] 0px [nav-end chrome-start] minmax(0, 1fr) [chrome-end];
    }
    .hcn-reg--v2:has(> .hcn-reg__rail) > * { grid-column: chrome-start / chrome-end; }
    .hcn-reg--v2:has(> .hcn-reg__rail) > .hcn-reg__rail {
        grid-column: nav-start / nav-end;
        grid-row: 1 / span 400;
        align-self: start;
        position: relative;
        top: auto;
        right: auto;
        /* Out of the zero-width track to the left; the 1px is the card's border. */
        margin-left: calc(-1 * (var(--hcn-reg-step-w) + var(--hcn-reg-step-gap) + 1px));
    }
    /* No eyebrow above the list: the panel's own label ("Voortgang registratie") names it for a screen
       reader, and the count says where the pilgrim is. */
    .hcn-reg__rail-count { margin: 0 0 18px; color: var(--hcn-reg-step-ink); font-size: .94em; }

    .hcn-reg__progress-item,
    .hcn-reg__progress-item.is-current {
        display: grid;
        grid-template-columns: var(--hcn-reg-step-dot) minmax(0, 1fr);
        column-gap: 8px;
        align-items: start;
        /* The space between two steps belongs to the step above, so its thread can run through it. */
        padding: 0 0 24px;
        font-size: .88em;
        line-height: 1.35;
    }
    /* A long Dutch compound ("Persoonsgegevens") hyphenates at a syllable where the browser knows Dutch;
       where it does not, the word still breaks rather than running out of the panel (largest text). */
    .hcn-reg__progress-label { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
    /* Title and description at one size, as in the reference: the description is lighter, not smaller. */
    .hcn-reg__progress-hint { font-size: 1em; margin-top: 2px; }
    .hcn-reg__progress-item:last-child { padding-bottom: 0; }
    .hcn-reg__progress-item.is-current .hcn-reg__progress-number,
    .hcn-reg__progress-item.is-current .hcn-reg__progress-hint { display: inline-flex; }
    .hcn-reg__progress-item.is-current .hcn-reg__progress-hint { display: block; }
    .hcn-reg__progress-item.is-current .hcn-reg__progress-label::before { content: none; }
    /* The thread: from the bottom of this circle to the top of the next one, centred under both. Its
       own element, never a border on the item. */
    .hcn-reg__progress-item::before {
        content: "";
        position: absolute;
        top: var(--hcn-reg-step-dot);
        bottom: 0;
        left: calc(var(--hcn-reg-step-dot) / 2 - 1px);
        width: 2px;
        background: var(--hcn-reg-step-line);
    }
    .hcn-reg__progress-item:last-child::before { display: none; }
    .hcn-reg__progress-item.is-done::before { background: var(--hcn-reg-step-green); }
    /* The title lines up with the middle of its circle. */
    .hcn-reg__progress-text { padding-top: calc((var(--hcn-reg-step-dot) - 1.35em) / 2); }
    .hcn-reg__progress-label { color: var(--hcn-reg-step-text); font-weight: 600; }
    .hcn-reg__progress-item.is-done .hcn-reg__progress-label { color: var(--hcn-reg-step-green); }
    .hcn-reg__progress-item.is-current .hcn-reg__progress-label { color: var(--hcn-reg-step-green); font-weight: 700; }
}
/* Sticky only where the window can hold the whole panel at the default text size (about 510px + 24px above
   and below): on a shorter window it stays at the top of the card and scrolls away with it, so a step is
   never cut off by the window. On a laptop-height window (under 760px, e.g. 1366 x 768 with the browser's
   toolbars) the panel tightens its vertical spacing, so it still fits with the larger text sizes. The
   height cap is the last fallback (largest text on a window just tall enough): the panel then scrolls
   inside itself rather than hide its last steps below the window's edge. */
@media (min-width: 1180px) and (max-height: 759px) {
    .hcn-reg--v2 > .hcn-reg__rail { padding-block: 16px; }
    .hcn-reg__rail-count { margin-bottom: 12px; }
    .hcn-reg__progress-item,
    .hcn-reg__progress-item.is-current { padding-bottom: 14px; }
    .hcn-reg__progress-item:last-child { padding-bottom: 0; }
}
@media (min-width: 1180px) and (min-height: 560px) {
    .hcn-reg--v2:has(> .hcn-reg__rail) > .hcn-reg__rail {
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px);
        max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 48px);
        overflow-y: auto;
    }
}

/* ------------------------------------------------------------------ sections and cards */

/* A section is a quiet grouping inside the one card: spacing, a title, and a hairline to the next.
   It carries no surface of its own — that is what made every V2 screen read as a stack of boxes. */
.hcn-reg__section {
    margin: 0 0 30px;
    padding: 0 0 30px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hcn-color-border-faint, #f0f1f3);
    border-radius: 0;
    box-shadow: none;
}
.hcn-reg__section:last-of-type,
.hcn-reg--v2 .hcn-reg__section:last-child { border-bottom: 0; padding-bottom: 0; }

/*
 * The end-of-page gap, stated once, for every screen in the flow.
 *
 * Two rules were fighting over it and the pilgrim lost both times. The shared one ended the card on
 * `--hcn-reg-v2-pad` — the SIDE gutter, 16px on a phone — and the rule directly above, which exists so
 * a section does not add its own 30px before whatever follows it, zeroed that out entirely whenever
 * the last thing on the page was a section. Net result: "Verder met dit familielid" sat flat on the
 * card's bottom edge.
 *
 * So this is its own number, answering its own question, and it carries the weight to settle the
 * argument: 50px on a desktop, 35px on a phone, under whatever the last element happens to be. It
 * applies ONLY to the final child of the flow — a section in the middle of a page is untouched.
 */
.hcn-reg.hcn-reg--v2 > *:last-child { padding-bottom: 50px; }

@media (max-width: 767px) {
    .hcn-reg.hcn-reg--v2 > *:last-child { padding-bottom: 35px; }
}
/* A fieldset carrying the section look needs its own reset. */
fieldset.hcn-reg__section { min-width: 0; }
fieldset.hcn-reg__section > legend,
.hcn-reg__section > h2:first-child {
    padding: 0;
    margin: 0 0 var(--hcn-space-4, 16px);
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: -.005em;
}
/* The gold dot that opens a section title in R1. Decorative, so it is drawn, not written. */
fieldset.hcn-reg__section > legend::before,
.hcn-reg__section > h2:first-child::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--hcn-color-brand, #B38F64);
    vertical-align: middle;
}
.hcn-reg__section > .description { margin-top: -8px; }

/* ------------------------------------------------------------------ column system

   Two deliberate rhythms, as R1 has: an even pair for related fields of equal weight, and a 40/60
   pair where one field is a short code and the other is the value it belongs to. Everything folds to
   one column on a phone. */

.hcn-reg__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--hcn-space-5, 20px);
}
.hcn-reg__grid--4060 { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
.hcn-field--full { grid-column: 1 / -1; }
.hcn-field--half { grid-column: span 1; }
.hcn-field--w40 { grid-column: 1 / 2; }
.hcn-field--w60 { grid-column: 2 / 3; }

.hcn-reg__subsection {
    margin-top: var(--hcn-space-5, 20px);
    padding-top: var(--hcn-space-5, 20px);
    border-top: 1px solid var(--hcn-color-border-faint, #f0f1f3);
}
.hcn-reg__subsection[hidden] { display: none !important; }

.hcn-reg__cards {
    display: grid;
    gap: var(--hcn-space-4, 16px);
    margin: 0 0 var(--hcn-space-4, 16px);
    padding: 0;
    list-style: none;
}
/* A listed item inside the card is a row with a hairline, not a card of its own. */
.hcn-reg__card {
    padding: var(--hcn-space-4, 16px) 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hcn-color-border-faint, #f0f1f3);
    border-radius: 0;
}
.hcn-reg__card:last-child { border-bottom: 0; padding-bottom: 0; }
.hcn-reg__card-title {
    margin: 0 0 var(--hcn-space-1, 4px);
    font-size: 1.05em;
    font-weight: 700;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg__card-meta {
    margin: 0 0 var(--hcn-space-3, 12px);
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .9em;
}

.hcn-reg__hints {
    margin: var(--hcn-space-2, 8px) 0 0;
    padding-left: var(--hcn-space-5, 20px);
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .9em;
}
.hcn-reg__hints li { margin-bottom: var(--hcn-space-1, 4px); }

/* ------------------------------------------------------------------ read-only value tables */

/* Replaces the wp-admin `widefat striped` classes the V2 templates started with: those are admin-only
   and have no styling at all on the public site, which is why every review table rendered bare. */
.hcn-reg__table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--hcn-space-4, 16px);
    font-size: .95em;
}
.hcn-reg__table th,
.hcn-reg__table td {
    padding: var(--hcn-space-3, 12px) var(--hcn-space-3, 12px);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--hcn-color-border-faint, #f0f1f3);
}
.hcn-reg__table tr:last-child th,
.hcn-reg__table tr:last-child td { border-bottom: 0; }
.hcn-reg__table th[scope="row"] {
    width: 38%;
    font-weight: 600;
    color: var(--hcn-color-muted, #5a5f66);
}
.hcn-reg__table td { color: var(--hcn-color-heading, #1C1C1D); font-weight: 600; }
/* No zebra striping. A row of facts is read down the labels, and the alternating grey was the single
   strongest reason the review screens read as a wp-admin list rather than as HCN. The staff panel
   below keeps its own treatment, because there it IS a diagnostic table. */
.hcn-reg--v2 .hcn-reg__table tbody tr:nth-child(odd),
.hcn-reg--v2 .hcn-reg__table tbody tr:nth-child(even) { background: none; }
[data-v2-staff] .hcn-reg__table tbody tr:nth-child(odd) { background: var(--hcn-color-subtle-bg, #f6f7f7); }

/* ------------------------------------------------------------------ fields */

.hcn-field {
    display: block;
    margin: 0 0 var(--hcn-space-4, 16px);
}
.hcn-field[hidden] { display: none !important; }
.hcn-field:last-child { margin-bottom: 0; }

.hcn-field > label {
    display: block;
    margin-bottom: var(--hcn-space-2, 8px);
    font-weight: 700;
    color: var(--hcn-color-heading, #1C1C1D);
}

.hcn-reg--v2 input[type="text"],
.hcn-reg--v2 input[type="email"],
.hcn-reg--v2 input[type="tel"],
.hcn-reg--v2 input[type="date"],
.hcn-reg--v2 input[type="number"],
.hcn-reg--v2 select,
.hcn-reg--v2 textarea {
    width: 100%;
    /* R1's control rhythm: one height, one radius, one border for every control in the flow. The
       token stays the floor; the flow's own control height is what a pilgrim actually sees. */
    min-height: var(--hcn-reg-control, var(--hcn-input-min-h, 48px));
    padding: 14px 18px;
    background: var(--hcn-color-surface, #fff);
    border: 1px solid var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-md, 8px);
    color: var(--hcn-color-text, #2D2E2F);
    font: inherit;
    line-height: 1.4;
}
.hcn-reg--v2 input:focus,
.hcn-reg--v2 select:focus,
.hcn-reg--v2 textarea:focus { border-color: var(--hcn-color-brand, #B38F64); }
.hcn-reg--v2 textarea { min-height: 96px; resize: vertical; }
.hcn-reg--v2 input[aria-invalid="true"],
.hcn-reg--v2 select[aria-invalid="true"],
.hcn-reg--v2 textarea[aria-invalid="true"] {
    border-color: var(--hcn-color-error, #B42318);
    border-width: 2px;
}

/* The file pickers are the main interaction of the document step, and a bare `Choose File` is the one
   control the browser will not style for us. The input keeps its own markup, hooks and accept list —
   only the button the browser draws inside it is dressed, so nothing about the upload changes. */
.hcn-reg--v2 input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: var(--hcn-space-3, 12px);
    background: var(--hcn-color-surface, #fff);
    border: 1px dashed var(--hcn-color-border-strong, #9aa0a6);
    border-radius: var(--hcn-radius-md, 8px);
    color: var(--hcn-color-muted, #5a5f66);
    font: inherit;
    font-size: .92em;
    cursor: pointer;
}
.hcn-reg--v2 input[type="file"]:hover { border-color: var(--hcn-color-brand, #B38F64); }
.hcn-reg--v2 input[type="file"]::file-selector-button {
    min-height: 44px;
    margin-right: var(--hcn-space-3, 12px);
    padding: 0 var(--hcn-space-5, 20px);
    background: var(--hcn-color-brand-soft, #F4EEE5);
    border: 1px solid var(--hcn-color-brand, #B38F64);
    border-radius: var(--hcn-radius-sm, 6px);
    color: var(--hcn-color-brand-strong, #8F6E46);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.hcn-reg--v2 input[type="file"]::file-selector-button:hover {
    background: var(--hcn-color-brand, #B38F64);
    color: var(--hcn-color-brand-text, #1C1C1D);
}

/* A checkbox or radio and its wording read as one 44px target. */
.hcn-field > label > input[type="checkbox"],
.hcn-field > label > input[type="radio"] {
    width: 22px;
    height: 22px;
    margin-right: var(--hcn-space-2, 8px);
    vertical-align: middle;
    accent-color: var(--hcn-color-brand, #B38F64);
}
/* A plain consent checkbox is a row, not a card. Only a CHOICE between alternatives — where the
   options compete for the same answer — earns an outline. */
.hcn-field > label:has(> input[type="checkbox"]),
.hcn-field > label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: var(--hcn-space-3, 12px);
    min-height: 44px;
    padding: 0;
    border: 0;
    font-weight: 500;
    cursor: pointer;
}
.hcn-field--choice > label {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: var(--hcn-space-4, 16px);
    border: 1px solid var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-md, 8px);
    transition: border-color .15s, background .15s;
}
.hcn-field--choice > label > strong { color: var(--hcn-color-heading, #1C1C1D); }
.hcn-field--choice > label:hover { border-color: var(--hcn-color-brand, #B38F64); }
.hcn-field--choice > label > input { flex-shrink: 0; margin-top: 2px; }
.hcn-field--choice > label > .hcn-field__hint { flex-basis: 100%; margin-left: 34px; }
/* Chosen: the soft-gold surface with heading-dark wording (11.6:1), a gold edge, and the radio dot
   itself — shape as well as colour. `#8F6E46` on `#F4EEE5` is 4.06:1 and is never used for wording. */
.hcn-field--choice > label:has(> input:checked) {
    background: var(--hcn-color-brand-soft, #F4EEE5);
    border-color: var(--hcn-color-brand, #B38F64);
    box-shadow: 0 0 0 1px var(--hcn-color-brand, #B38F64);
}
.hcn-field--choice > label:has(> input:checked) > strong { color: var(--hcn-color-heading, #1C1C1D); }
.hcn-field--choice > label:has(> input:checked) > .hcn-field__hint { color: var(--hcn-color-text, #2D2E2F); }

/* ------------------------------------------------------------------ country selector

   One component for every country field: phone, WhatsApp, emergency contact, nationality, passport
   country of issue. They stay distinct fields — this is only how one is operated. The native select
   is still in the DOM and still the control that submits; it is taken out of the visual flow, not
   removed, so the field works unchanged when this enhancement does not run. */

.hcn-flagsel { position: relative; }
/* Taken out of the visual flow, never out of the DOM: it is still the control that submits, and
   every property is forced because `.hcn-select` and the theme both style selects with !important. */
.hcn-flagsel__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0 !important;
    opacity: 0;
}
/* Themes style bare <button> with !important padding and height, so a control that must line up with
   the inputs beside it has to state every box property itself. 54px exactly, like every other
   control in the flow. */
.hcn-flagsel__btn {
    display: flex !important;
    align-items: center;
    gap: var(--hcn-space-2, 8px);
    width: 100%;
    height: var(--hcn-reg-control, 54px) !important;
    min-height: var(--hcn-reg-control, 54px) !important;
    padding: 0 var(--hcn-space-4, 16px) !important;
    background: var(--hcn-color-surface, #fff) !important;
    border: 1px solid var(--hcn-color-border, #d0d3d6) !important;
    border-radius: var(--hcn-radius-md, 8px) !important;
    color: var(--hcn-color-text, #2D2E2F) !important;
    font: inherit !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: left;
    box-shadow: none !important;
    cursor: pointer;
}
.hcn-flagsel__btn:hover { border-color: var(--hcn-color-brand, #B38F64) !important; }
.hcn-flagsel__btn.is-placeholder { color: var(--hcn-color-muted, #5a5f66); font-weight: 500; }
.hcn-flagsel__flag { flex: 0 0 auto; border-radius: 2px; }
/* The world globe stands in where there is no flag (nothing chosen, "Anders / niet in lijst", or a
   country with no drawn mark). Brand-strong ink, at least 4.5:1 on white — an icon beside a text label, so
   the 3:1 non-text floor is what applies. */
.hcn-flagsel__globe { border-radius: 0; color: var(--hcn-color-brand-strong, #8F6E46); }
.hcn-flagsel__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcn-flagsel__chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--hcn-color-muted, #5a5f66); }

.hcn-flagsel__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    width: max(100%, 280px);
    max-width: calc(100vw - 32px);
    padding: var(--hcn-space-2, 8px);
    background: var(--hcn-color-surface, #fff);
    border: 1px solid var(--hcn-color-border-soft, #e4e6e9);
    border-radius: var(--hcn-radius-md, 8px);
    box-shadow: 0 16px 36px rgba(28, 28, 29, .14);
}
.hcn-flagsel__panel[hidden] { display: none !important; }
/* Flipped above when the list would otherwise run off the bottom of a phone screen. */
.hcn-flagsel__panel.is-above { top: auto; bottom: calc(100% + 4px); }
.hcn-flagsel__search {
    width: 100%;
    min-height: 44px !important;
    margin-bottom: var(--hcn-space-2, 8px);
    padding: var(--hcn-space-2, 8px) var(--hcn-space-3, 12px) !important;
    border-radius: var(--hcn-radius-sm, 6px) !important;
}
.hcn-flagsel__list {
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hcn-flagsel__option {
    display: flex !important;
    align-items: center;
    gap: var(--hcn-space-3, 12px);
    width: 100%;
    min-height: 44px !important;
    padding: var(--hcn-space-2, 8px) var(--hcn-space-3, 12px) !important;
    background: none !important;
    border: 0 !important;
    border-radius: var(--hcn-radius-sm, 6px) !important;
    color: var(--hcn-color-text, #2D2E2F) !important;
    font: inherit !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: left;
    box-shadow: none !important;
    cursor: pointer;
}
.hcn-flagsel__option:hover { background: var(--hcn-color-subtle-bg, #f6f7f7) !important; }
.hcn-flagsel__name { flex: 1 1 auto; min-width: 0; }
.hcn-flagsel__dial { flex: 0 0 auto; color: var(--hcn-color-muted, #5a5f66); font-variant-numeric: tabular-nums; }
.hcn-flagsel__tick { display: none; flex: 0 0 auto; width: 18px; height: 18px; color: var(--hcn-color-brand-strong, #8F6E46); }
/* Chosen: the soft-gold surface with heading-dark wording (11.6:1) plus a gold tick — shape as well
   as colour, and never white text on gold. `#8F6E46` on `#F4EEE5` is 4.06:1 and carries no wording. */
.hcn-flagsel__option.is-selected {
    background: var(--hcn-color-brand-soft, #F4EEE5) !important;
    box-shadow: 0 0 0 1px var(--hcn-color-brand, #B38F64) !important;
    color: var(--hcn-color-heading, #1C1C1D) !important;
}
.hcn-flagsel__option.is-selected .hcn-flagsel__tick { display: block; }
.hcn-flagsel__empty {
    padding: var(--hcn-space-3, 12px);
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .92em;
}

/* ------------------------------------------------------------------ phone

   TWO separate controls on one row: country and dial code on the left, the number on the right,
   each with its own border and its own radius, separated by the standard field gap.

   This replaces the earlier welded treatment (one shared border, one radius, a -1px overlap that
   fused the two 1px borders into a single divider). The weld was sound in the abstract but read
   badly in practice: inside one continuous box the divider looked like a stray line rather than a
   boundary, and the country half looked like empty space belonging to the number field. Two boxes
   say plainly that these are two things to fill in.

   The server's E.164 normalisation is untouched — this is presentation only, the same two fields
   posting the same two values. */
.hcn-field__phone {
    display: flex;
    gap: var(--hcn-space-2, 8px);
    align-items: stretch;
}
.hcn-field__phone select { flex: 0 0 auto; width: auto; min-width: var(--hcn-phone-country-w, 118px); }
.hcn-field__phone input { flex: 1 1 auto; min-width: 0; }

.hcn-field__phone .hcn-flagsel { flex: 0 0 auto; }
/* ONE owner for this width. It used to be declared four times — 118px on the native select, 104px
   here, 112px in a later "welded phone" block and 92px/100px in two different mobile queries — so
   which number applied depended on source order rather than on intent. It is now one custom
   property, set once per breakpoint, and every declaration reads it. */
.hcn-field__phone .hcn-flagsel__btn {
    width: auto;
    min-width: var(--hcn-phone-country-w, 118px);
    justify-content: space-between;
    padding-left: var(--hcn-space-3, 12px);
    padding-right: 10px;
    gap: 8px;
}
/* Both halves keep the field radius on all four corners, and neither borrows the other's edge.
   Stated explicitly rather than left to the base rule, because the welded version zeroed these and
   a half-reverted rule would leave one square corner facing the gap. */
.hcn-field__phone .hcn-flagsel__btn,
.hcn-field__phone .hcn-flagsel + input,
.hcn-field__phone .hcn-flagsel ~ input {
    border-radius: var(--hcn-radius-md, 8px);
    margin-left: 0;
}

.hcn-field__hint {
    display: block;
    margin-top: var(--hcn-space-1, 4px);
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .88em;
    line-height: 1.5;
}
.hcn-field__error {
    display: block;
    margin: var(--hcn-space-2, 8px) 0 0;
    color: var(--hcn-color-error, #B42318);
    font-size: .9em;
    font-weight: 600;
}

/* `.hcn-choice` means two different things in the two stylesheets that load before this one: in
   portal.css it is a bordered option row (input + wording), in registration.css it is R1's segmented
   control, whose divider colour is painted as the element's own background and shows through here as a
   grey slab behind the wording — it also drags a hint on it down to 4.43:1. V2 states what it means,
   scoped to its own root so neither of the other two flows changes. */
.hcn-reg--v2 .hcn-choice {
    background: var(--hcn-color-surface, #fff);
    border: 1px solid var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-md, 10px);
}

/* ------------------------------------------------------------------ notices */

/* One notice vocabulary for the whole flow. Status is carried by background and icon-free wording —
   never by a coloured bar down the left edge. */
.hcn-note,
.hcn-alert {
    margin: 0 0 var(--hcn-space-4, 16px);
    padding: var(--hcn-space-3, 12px) var(--hcn-space-4, 16px);
    border: 1px solid var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-md, 8px);
    background: var(--hcn-color-subtle-bg, #f6f7f7);
    color: var(--hcn-color-text, #2D2E2F);
    font-size: .92em;
}
.hcn-alert p { margin: 0; }
.hcn-alert--success {
    background: var(--hcn-color-success-bg, #e6f4ea);
    border-color: var(--hcn-color-success, #1E7A4D);
    color: var(--hcn-color-heading, #1C1C1D);
}

/* A verdict's tone, set identically by the template and by the browser through `data-v2-tone`, so a
   stored verdict and a fresh one are coloured the same. A failure must not read as a neutral status
   line; a pass must not read as a warning. Tone is carried by text weight and colour plus a tinted
   background — never by a stripe down the left edge. */
.hcn-reg--v2 [data-v2-tone] { font-weight: 600; }
.hcn-reg--v2 [data-v2-tone=""] { font-weight: inherit; }
.hcn-reg--v2 [data-v2-tone]:not([data-v2-tone=""]) {
    padding: var(--hcn-space-2, 8px) var(--hcn-space-3, 12px);
    border-radius: var(--hcn-radius-sm, 6px);
}
/* Each tinted surface is declared twice: a solid token first, then the same hue at low opacity for
   browsers that have color-mix. A translucent tint sits on whatever is behind it instead of
   punching a flat rectangle into the page, and a browser without color-mix simply keeps the solid
   one — both are legible, so nothing is lost by the fallback. */
.hcn-reg--v2 [data-v2-tone="success"] {
    background: var(--hcn-color-success-bg, #e6f4ea);
    background: color-mix(in srgb, var(--hcn-color-success, #1E7A4D) 10%, transparent);
    color: var(--hcn-color-success, #1E7A4D);
}
.hcn-reg--v2 [data-v2-tone="warning"] {
    background: var(--hcn-color-warning-bg, #fff4d6);
    background: color-mix(in srgb, var(--hcn-color-warning, #8a6100) 12%, transparent);
    color: var(--hcn-color-warning, #8a6100);
}
.hcn-reg--v2 [data-v2-tone="info"] {
    background: var(--hcn-color-info-bg, #e8f0fe);
    background: color-mix(in srgb, var(--hcn-color-info, #1D4ED8) 9%, transparent);
    color: var(--hcn-color-info, #1D4ED8);
}
.hcn-reg--v2 [data-v2-tone="error"] {
    background: var(--hcn-color-error-bg, #fdeceb);
    background: color-mix(in srgb, var(--hcn-color-error, #B42318) 9%, transparent);
    color: var(--hcn-color-error, #B42318);
}
/* The reason lines belong to the verdict above them, so a failure's reasons read as part of it. */
.hcn-reg--v2 [data-v2-tone="error"] + .hcn-reg__hints,
.hcn-reg--v2 [data-v2-tone="warning"] + .hcn-reg__hints { color: var(--hcn-color-text, #2D2E2F); }

/* A STORED document's own line is a confirmation before it is anything else: the file reached HCN
   and is not going to be asked for again. It reads green for that reason, with a tick, even when
   the analysis attached notes to it — the notes are the list underneath, which keeps the attention
   colour so they are not quietly turned into good news. A REJECTED card is untouched by this: its
   tone is `error`, its file cannot be used, and it stays red. */
.hcn-reg--v2 .hcn-doccard[data-state="SAVED"] > .hcn-doccard__result[data-v2-tone="warning"],
.hcn-reg--v2 .hcn-doccard[data-state="WARNING"] > .hcn-doccard__result[data-v2-tone="warning"] {
    background: var(--hcn-color-success-bg, #e6f4ea);
    background: color-mix(in srgb, var(--hcn-color-success, #1E7A4D) 10%, transparent);
    color: var(--hcn-color-success, #1E7A4D);
}
.hcn-reg--v2 .hcn-doccard[data-state="SAVED"] > .hcn-doccard__result[data-v2-tone="warning"]::before,
.hcn-reg--v2 .hcn-doccard[data-state="WARNING"] > .hcn-doccard__result[data-v2-tone="warning"]::before {
    content: "";
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin-right: .5em;
    vertical-align: -.2em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7A4D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hcn-reg--v2 .hcn-doccard[data-state="SAVED"] > .hcn-doccard__result[data-v2-tone="warning"] + .hcn-doccard__reasons,
.hcn-reg--v2 .hcn-doccard[data-state="WARNING"] > .hcn-doccard__result[data-v2-tone="warning"] + .hcn-doccard__reasons {
    color: var(--hcn-color-warning, #8a6100);
}

/* The staff-only "work in progress" line. Quiet on purpose: it is diagnostics, not a pilgrim message.
   It is the card's first row, so it takes the card's top corners rather than sitting as a loose box
   inside them. */
.hcn-reg--v2 > .hcn-note:first-child {
    margin: 0;
    padding: 12px var(--hcn-reg-v2-pad);
    background: var(--hcn-color-neutral-bg, #f0f0f1);
    border: 0;
    border-bottom: 1px solid var(--hcn-color-border-faint, #f0f1f3);
    border-radius: 13px 13px 0 0;
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .82em;
}

/* ------------------------------------------------------------------ actions */

.hcn-reg__form { margin: 0; }

.hcn-reg__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hcn-space-3, 12px);
    align-items: center;
    margin: var(--hcn-space-5, 20px) 0 0;
}
/* A section's own trailing action row needs no extra gap above it. */
.hcn-reg__section > .hcn-reg__form:last-child > .hcn-reg__actions { margin-bottom: 0; }

/* Every button in V2 clears 44px even where the shared control height is unset. */
.hcn-reg--v2 .hcn-btn { min-height: 48px; }

/* The step's own "Verder" is the one dominant action: tall, gold, white wording, and it sits at the
   RIGHT of its row — the edge a reader's eye finishes on, and the opposite edge from "Terug" below,
   so forward and back are never the same gesture. It used to be full width as well, which on a
   774px column made a slab out of a one-word action — dominance is height, weight and colour, not
   span. It keeps a generous minimum so it never shrinks to the width of its label, and the mobile
   rule further down still stretches it, because on a phone a primary action that does not fill the
   column reads as optional.

   The gold is `--hcn-color-brand-strong` (#8F6E46), not `--hcn-color-brand` (#B38F64). White on the
   lighter gold measures 2.99:1, which fails AA for normal text and misses even the 3:1 large-text
   floor; on the deeper gold it is 4.67:1 and passes. So "white wording" and "brand gold" are only
   compatible at this shade — dropping back to #B38F64 here silently breaks contrast. */
.hcn-reg--v2 .hcn-reg__actions:has(> .hcn-btn--primary:only-child) { justify-content: flex-end; }
.hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--hcn-space-3, 12px);
    width: auto;
    min-width: 240px;
    padding-inline: 40px !important;
    min-height: 56px !important;
    border-radius: var(--hcn-radius-lg, 10px) !important;
    background: var(--hcn-color-brand-strong, #8F6E46) !important;
    border-color: var(--hcn-color-brand-strong, #8F6E46) !important;
    color: var(--hcn-color-on-dark, #fff) !important;
    font-size: 1.04em !important;
    box-shadow: 0 6px 18px rgba(143, 110, 70, .26) !important;
    transition: background-color .2s ease-out, box-shadow .24s ease-out, transform .2s ease-out;
}
/* The arrow is a background image on ::after, never generated text: CSS `content` with a character
   in it is announced by some screen readers, and "Verder →" read aloud as "Verder right arrow" is
   noise. The button already says where it goes. */
.hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child::after {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='m12.2 5.4 6.6 6.6-6.6 6.6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    transition: transform .24s cubic-bezier(.2, .7, .3, 1);
}
.hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child:hover,
.hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child:focus-visible {
    background: var(--hcn-color-brand-deep, #7D603C) !important;
    box-shadow: 0 10px 26px rgba(143, 110, 70, .34) !important;
    transform: translateY(-2px);
}
.hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child:hover::after,
.hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child:focus-visible::after {
    transform: translateX(4px);
}
/* Pressed: the lift collapses under the finger rather than the colour changing again. */
.hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(143, 110, 70, .28) !important;
}
.hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child:focus-visible {
    outline: 2px solid var(--hcn-focus-border, #B38F64) !important;
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child,
    .hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child::after { transition: none !important; }
    .hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child:hover,
    .hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child:focus-visible { transform: none; }
    .hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child:hover::after,
    .hcn-reg--v2 .hcn-reg__actions > .hcn-btn--primary:only-child:focus-visible::after { transform: none; }
}

/* A secondary action reads as a button, not as bold text. The shared `.hcn-btn` base sets a
   TRANSPARENT border with !important — fine in R1, where every button that uses it is either primary
   or ghost — so the override has to carry !important too or a plain `.hcn-btn` renders invisible. */
.hcn-reg--v2 .hcn-btn:not(.hcn-btn--primary) {
    background: var(--hcn-color-surface, #fff) !important;
    border: 1px solid var(--hcn-color-border, #d0d3d6) !important;
    border-radius: var(--hcn-radius-md, 8px) !important;
    color: var(--hcn-color-heading, #1C1C1D) !important;
    padding: 0 var(--hcn-space-5, 20px) !important;
    font-weight: 700 !important;
}
.hcn-reg--v2 .hcn-btn:not(.hcn-btn--primary):hover {
    border-color: var(--hcn-color-brand, #B38F64) !important;
}

/* Destructive is red wording on a neutral surface everywhere EXCEPT the confirmation itself, which
   is the only filled red button in the flow. */
.hcn-reg--v2 .hcn-btn--danger {
    color: var(--hcn-color-danger, #B42318) !important;
    border-color: var(--hcn-color-danger, #B42318) !important;
}
.hcn-reg--v2 .hcn-btn--danger-filled {
    background: var(--hcn-color-danger, #B42318) !important;
    border-color: var(--hcn-color-danger, #B42318) !important;
    color: var(--hcn-color-danger-text, #fff) !important;
}
/* An action that is really a link keeps link semantics: blue, underlined, no button chrome. */
.hcn-reg--v2 .hcn-btn--link {
    background: none !important;
    border: 0 !important;
    padding: 0 var(--hcn-space-2, 8px) !important;
    color: var(--hcn-color-link, #1D4ED8) !important;
    text-decoration: underline !important;
}
.hcn-reg--v2 .hcn-btn--link:hover { color: var(--hcn-color-link-hover, #1E40AF) !important; }

/* ------------------------------------------------------------------ staff diagnostics */

/* Capability-gated in the templates; styled to look like an internal panel so nobody mistakes it for
   something the pilgrim is meant to read. */
/* A contained panel rather than a full-bleed band: the shared rule pads every step child inwards,
   and a panel with its own background has to hold that inset as margin instead. */
.hcn-reg--v2 > [data-v2-staff] {
    padding: var(--hcn-space-5, 20px);
    margin-inline: var(--hcn-reg-v2-pad);
    background: var(--hcn-color-neutral-bg, #f0f0f1);
    border: 1px solid var(--hcn-color-border-strong, #9aa0a6);
    border-radius: var(--hcn-radius-md, 8px);
}
/* The internal panel keeps its own outer margin; the end-of-page floor above is what sets the
   space under it, so it is not restated here at a specificity that would undercut it. */
.hcn-reg--v2 > [data-v2-staff]:last-child { margin-bottom: var(--hcn-reg-v2-pad); }
[data-v2-staff] { background: var(--hcn-color-neutral-bg, #f0f0f1); }
[data-v2-staff] h2 { font-size: 1.05em; }
[data-v2-staff] .hcn-reg__table { font-size: .82em; font-family: var(--hcn-font-mono, monospace); }
[data-v2-staff] .hcn-reg__table th[scope="row"] { font-family: inherit; }

/* ------------------------------------------------------------------ high contrast */

.hcn-reg--v2.is-contrast {
    --hcn-color-muted: var(--hcn-color-heading, #1C1C1D);
    --hcn-color-border: var(--hcn-color-heading, #1C1C1D);
    --hcn-color-border-soft: var(--hcn-color-heading, #1C1C1D);
    --hcn-color-border-faint: var(--hcn-color-border-strong, #9aa0a6);
}
.hcn-reg--v2.is-contrast .hcn-field__hint,
.hcn-reg--v2.is-contrast .description,
.hcn-reg--v2.is-contrast .hcn-reg__card-meta,
.hcn-reg--v2.is-contrast .hcn-reg__table th[scope="row"] { color: var(--hcn-color-heading, #1C1C1D); }
.hcn-reg--v2.is-contrast .hcn-reg__section,
.hcn-reg--v2.is-contrast .hcn-reg__card { border-bottom-width: 2px; }
.hcn-reg--v2.is-contrast .hcn-reg__rail { border-width: 2px; border-color: var(--hcn-color-heading, #1C1C1D); }
.hcn-reg--v2.is-contrast .hcn-reg__progress-hint,
.hcn-reg--v2.is-contrast .hcn-reg__progress-label { color: var(--hcn-color-heading, #1C1C1D); }
.hcn-reg--v2.is-contrast .hcn-reg__progress-number { border: 2px solid var(--hcn-color-heading, #1C1C1D); background: var(--hcn-color-surface, #fff); color: var(--hcn-color-heading, #1C1C1D); }
.hcn-reg--v2.is-contrast .hcn-reg__progress-item.is-done .hcn-reg__progress-number,
.hcn-reg--v2.is-contrast .hcn-reg__progress-item.is-current .hcn-reg__progress-number { background: var(--hcn-reg-step-green); color: #fff; }

/* ------------------------------------------------------------------ tablet */

@media (max-width: 1024px) {
    .hcn-reg--v2 { --hcn-reg-v2-pad: 32px; }
    .hcn-reg--v2 { margin-block: 24px 48px; }
}

/* ------------------------------------------------------------------ shell width (0.72.1-dev)

   The owner's dimensions: the card at most 1,080px, the step inside it at most 1,000px (40px gutters),
   and on a wide desktop the step navigator beside it — 208px with a 24px gap from 1360px, 208px with a
   16px gap from 1180px — so the whole composition is about 1,312px while the form keeps its 1,000px.

   The theme's content column is 1140px wide (800px at a 1024px window), so above a phone the card sets
   its own width and centres itself — together with the navigator, when there is one — on that column
   with equal negative margins. Fluid, never a minimum width: the card is `min(1080px, window - edges -
   navigator)`, so at 1180px it is 908px, at 1024px 976px, at 768px 720px. `100vw` counts a classic
   scrollbar, so the edge also absorbs that; the theme's `body` clips horizontal overflow, and the edge
   keeps the composition inside the window anyway.

   Below 1180px there is no navigator column — the form keeps the full width and the card carries the
   compact "Stap N van 5" line. On a phone (<= 600px) the card is full bleed (the mobile block below). */
@media (min-width: 601px) {
    .hcn-reg--v2 {
        --hcn-reg-v2-width: min(var(--hcn-reg-v2-chrome), calc(100vw - 2 * var(--hcn-reg-v2-edge) - var(--hcn-reg-step-w) - var(--hcn-reg-step-gap)));
        width: var(--hcn-reg-v2-width);
        max-width: none;
        margin-inline:
            calc((100% - var(--hcn-reg-v2-width) - var(--hcn-reg-step-w) - var(--hcn-reg-step-gap)) / 2 + var(--hcn-reg-step-w) + var(--hcn-reg-step-gap))
            calc((100% - var(--hcn-reg-v2-width) - var(--hcn-reg-step-w) - var(--hcn-reg-step-gap)) / 2);
    }
}
@media (min-width: 1180px) {
    /* The navigator's width follows the text-size tool (A- 0.9 to A+ 1.3), so its titles keep their lines
       at the largest text instead of breaking mid-word; the card gives up the difference.
       0.72.2-dev: 208px at every navigator width (it was 200px below 1360px) and 12px of padding. The
       longest word, "Persoonsgegevens", measures 140.8px in the current step's bold; at 200px (136px of
       text) and at 208px with 14px padding (140px) it broke as "Persoonsgegeven-s". Now 146px (12px
       padding, set with the navigator above, and an 8px gap between circle and title). */
    .hcn-reg--v2 { --hcn-reg-step-w: calc(208px * var(--hcn-reg-scale, 1)); --hcn-reg-step-gap: 16px; }
    /* A screen without the navigator (the checkout, the confirmation, the activation, Welkom terug)
       reserves no room for it: its card is centred on its own. */
    .hcn-reg--v2:not(:has(> .hcn-reg__rail)) { --hcn-reg-step-w: 0px; --hcn-reg-step-gap: 0px; }
}
@media (min-width: 1360px) {
    .hcn-reg--v2 { --hcn-reg-step-w: calc(208px * var(--hcn-reg-scale, 1)); --hcn-reg-step-gap: 24px; }
    .hcn-reg--v2:not(:has(> .hcn-reg__rail)) { --hcn-reg-step-w: 0px; --hcn-reg-step-gap: 0px; }
}

/* Step 2 at the full width — RETIRED 2026-10-20 (owner): the 248px context column beside the documents
   held "Wat is een goede foto?". The guide is back at the top of the step, on the left of the help row
   (see "the help row, Step 2" below), so the documents take the card's full width again, as on every
   other step. */

/* ------------------------------------------------------------------ mobile */

@media (max-width: 600px) {
    /* The card goes full bleed on a phone, exactly as R1 does: no outer radius, no border, no shadow
       and no page gutter — the screen IS the card. The controls stay full size. */
    .hcn-reg--v2 {
        --hcn-reg-v2-pad: 16px;
        margin: 0;
        max-width: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: calc(17px * var(--hcn-reg-scale));
    }
    .hcn-reg--v2 > *:last-child { padding-bottom: 28px; }
    .hcn-reg__section { margin-bottom: 24px; padding-bottom: 24px; }
    fieldset.hcn-reg__section > legend,
    .hcn-reg__section > h2:first-child,
    .hcn-reg--v2 h2 { font-size: 1.05em; }

    /* The compact line on a phone: the count, and the step's title on its own line under it — no dash
       left dangling at the start of a wrapped line. (The numbers-only strip that lived here went with
       the strip in 0.72.1-dev.) */
    .hcn-reg__rail { display: block; }
    .hcn-reg__progress-item.is-current .hcn-reg__progress-label::before { content: none; }

    .hcn-reg__topbar { gap: var(--hcn-space-2, 8px); }
    .hcn-reg__actions { flex-direction: column; align-items: stretch; }
    .hcn-reg--v2 .hcn-btn { width: 100%; }

    /* Every deliberate pairing folds to one column. */
    .hcn-reg__grid,
    .hcn-reg__grid--4060 { grid-template-columns: minmax(0, 1fr); }
    .hcn-field--half,
    .hcn-field--w40,
    .hcn-field--w60 { grid-column: 1 / -1; }

    /* A label/value table becomes two stacked lines per row. */
    .hcn-reg__table th[scope="row"],
    .hcn-reg__table td { display: block; width: auto; }
    .hcn-reg__table th[scope="row"] { padding-bottom: 0; border-bottom: 0; }
    .hcn-reg__table td { padding-top: var(--hcn-space-1, 4px); }

    /* The phone row stays welded on a phone screen: the country column narrows, the number keeps the
       rest. Wrapping it would put the dial code on a line of its own, which is exactly the layout the
       welded control exists to avoid — so the native-select fallback below is the ONLY case allowed
       to wrap, and only because an unenhanced <select> cannot be welded to anything. */
    .hcn-field__phone { --hcn-phone-country-w: 106px; }
    .hcn-field__phone:not(:has(.hcn-flagsel)) { flex-wrap: wrap; }
    .hcn-field__phone:not(:has(.hcn-flagsel)) select { width: 100%; }
    /* A dropdown must never be wider than the screen it opens on. */
    .hcn-flagsel__panel { width: calc(100vw - 32px); max-width: calc(100vw - 32px); }
}

/* ------------------------------------------------------- the document card
 *
 * One component, four slots (paspoort, pasfoto, verblijfsdocument voor- en achterkant), one state
 * attribute. `data-state` on `.hcn-doccard` is the single switch: every child shows or hides from it,
 * so the card can never contradict itself — there is no path where a stored document sits under a
 * "choose a file" control, which is the defect this replaces.
 *
 * States: EMPTY · UPLOADING · PROCESSING · SAVED · WARNING · FAILED · READ_FAILED · DELETING
 * PREVIEW and DELETE_CONFIRMATION are dialogs, not card states, because both must survive the card
 * re-rendering underneath them.
 *
 * Deliberately NOT reusing R1's `.hcn-doc` from registration.css: that component carries
 * `[data-screen="documents"]` scoping and a row of `!important` overrides written against the live
 * theme's own h2 rules. Inheriting those into V2 would couple the two flows' styling, and a change
 * here would then be a change to the live registration — which this pass may not make. Same
 * thinking, V2's own vocabulary, scoped so neither can reach the other.
 */

/* THE GROUP IS THE CARD; A DOCUMENT IS A ROW.
 *
 * The earlier version gave every document its own bordered, state-tinted card, so a screen with two
 * documents to check read as two large coloured alerts. R1 solves it the other way round: the panel
 * that holds a document TYPE is the surface, each document inside it is a quiet row separated by a
 * hairline, and the state is carried by a small pill and one short note. A warning is a remark about
 * a document, not a colour wash over it. */
/* No box. The group used to be a bordered white card sitting on a white page, which drew a rectangle
   around content that was already inside the form's own card — a border inside a border, and the
   24px inset it forced made the uploads hang indented from every other field on the step. It is a
   section now, not a container: one hairline under its heading, generous rhythm, and its content
   aligned with the rest of the form. */
.hcn-reg--v2 .hcn-doccard-group {
    margin: 0 0 var(--hcn-space-8, 32px);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
.hcn-reg--v2 .hcn-doccard-group__head {
    display: flex;
    align-items: center;
    gap: var(--hcn-space-5, 20px);
    padding: 0 0 var(--hcn-space-5, 20px);
    border-bottom: 1px solid var(--hcn-color-border-faint, #f0f1f3);
    cursor: pointer;
    list-style: none;
}
.hcn-reg--v2 .hcn-doccard-group__head::-webkit-details-marker { display: none; }
/* The head's icon pair and its wording are gone from the page. Both were restating what is already
   on screen: "Documenten" heads the step, the lead sentence under it says what to upload, and the
   two rows inside the group are titled "Paspoort" and "Recente pasfoto" with their own icons. What
   is left is the part that is NOT said anywhere else — how many are saved — and the chevron.

   The icons and the description leave entirely. The title does not: this is a `<summary>`, and its
   text is the disclosure's accessible name. Delete it and a screen reader announces the control as
   "0 van 2 opgeslagen, samenvatting", which says nothing about what it opens. So the title stays in
   the accessibility tree and leaves the layout — clipped, not `display: none`, because a hidden box
   is removed from that tree as well. */
.hcn-reg--v2 .hcn-doccard-group__icons,
.hcn-reg--v2 .hcn-doccard-group__sub { display: none; }
.hcn-reg--v2 .hcn-doccard-group__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.hcn-reg--v2 .hcn-doccard-group__chevron {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--hcn-color-muted, #5a5f66);
    transition: transform .18s ease-out;
}
.hcn-reg--v2 .hcn-doccard-group[open] > .hcn-doccard-group__head .hcn-doccard-group__chevron { transform: rotate(180deg); }

/* The saved counter never wraps: "0 van 2 opgeslagen" broken over two lines reads as two facts.
   With the title out of the flow it is the only visible thing on the left, and the chevron takes
   the right edge itself rather than sitting one gap away from the count. */
.hcn-reg--v2 .hcn-doccard-group__count { flex: 0 0 auto; white-space: nowrap; }
.hcn-reg--v2 .hcn-doccard-group__chevron { margin-left: auto; }

/* The phone layout was a two-row grid built around the title and its description. Neither is on the
   page any more, so the row is the same single line it is on a desktop, just tighter. */
@media (max-width: 600px) {
    .hcn-reg--v2 .hcn-doccard-group__head { padding: 0 0 var(--hcn-space-4, 16px); }
    .hcn-reg--v2 .hcn-doccard { padding: var(--hcn-space-5, 20px) 0; }
}
.hcn-reg--v2 .hcn-doccard-group__body { padding: 0; }
.hcn-reg--v2 .hcn-doccard-group__intro {
    margin: 0 0 var(--hcn-space-4, 16px);
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .88em;
    max-width: 62ch;
}

/* 28px above and below each document, so a hairline never sits against the title under it. The
   first card measured 0px from the heading above it and the second 21px from its own rule — close
   enough to read as crowding on a screen this wide. */
.hcn-reg--v2 .hcn-doccard {
    position: relative;
    padding: var(--hcn-space-7, 28px) 0;
    border: 0;
    border-top: 1px solid var(--hcn-color-border-faint, #f0f1f3);
    border-radius: 0;
    background: none;
    margin: 0;
}
/* The first document follows the heading's own rule, so it needs no second one — but it keeps its
   top padding: that gap IS the separation between the section heading and its contents. */
.hcn-reg--v2 .hcn-doccard-group__body > .hcn-doccard:first-child,
.hcn-reg--v2 .hcn-doccard-group__intro + .hcn-doccard { border-top: 0; }
.hcn-reg--v2 .hcn-doccard:last-child { padding-bottom: 0; }

/* Only a genuinely unusable file earns a surface of its own, and even that stays a tinted panel on
   one row rather than a coloured card. Saved, warned and unread documents keep a neutral surface —
   their state is the pill and the note. */
.hcn-reg--v2 .hcn-doccard[data-state="FAILED"] .hcn-doccard__saved {
    padding: var(--hcn-space-3, 12px);
    background: var(--hcn-color-error-bg, #fdeceb);
    border-radius: var(--hcn-radius-md, 8px);
}

/* head: icon, name, badge */
.hcn-reg--v2 .hcn-doccard__head {
    display: flex;
    align-items: flex-start;
    gap: var(--hcn-space-3, 12px);
    margin-bottom: var(--hcn-space-3, 12px);
}
/* A plain gold line icon, as R1 draws them: no tinted tile behind it, because a tile inside a row
   inside a card is the box-in-a-box this pass exists to remove. */
.hcn-reg--v2 .hcn-doccard__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    margin-top: 2px;
    background: none;
    color: var(--hcn-color-brand-strong, #8F6E46);
}
.hcn-reg--v2 .hcn-doccard__icon svg { width: 24px; height: 24px; }
.hcn-reg--v2 .hcn-doccard[data-state="SAVED"] .hcn-doccard__icon { color: var(--hcn-color-success, #1E7A4D); }
.hcn-reg--v2 .hcn-doccard[data-state="WARNING"] .hcn-doccard__icon,
.hcn-reg--v2 .hcn-doccard[data-state="READ_FAILED"] .hcn-doccard__icon { color: var(--hcn-color-warning, #8a6100); }
.hcn-reg--v2 .hcn-doccard[data-state="FAILED"] .hcn-doccard__icon,
.hcn-reg--v2 .hcn-doccard[data-state="REJECTED"] .hcn-doccard__icon,
.hcn-reg--v2 .hcn-doccard[data-state="STALLED"] .hcn-doccard__icon { color: var(--hcn-color-error, #B42318); }
/* On a phone the icon repeats what the row's own heading already says and costs a line of vertical
   space per document, so it goes. The state it carries (gold / green / amber / red) is not the only
   signal: `.hcn-doccard__result` states the same outcome in words, with role="status".
   Immediately after the rule it excepts, and at the same specificity — placed earlier in the file
   it would lose to `display: grid` on source order alone. */
@media (max-width: 600px) {
    .hcn-reg--v2 .hcn-doccard__icon { display: none; }
}

.hcn-reg--v2 .hcn-doccard__heading { flex: 1 1 auto; min-width: 0; }
/* A row inside the panel never outweighs the panel's own name. */
.hcn-reg--v2 .hcn-doccard__title {
    margin: 0;
    font-size: .98em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-doccard__guidance {
    margin: var(--hcn-space-1, 4px) 0 0;
    font-size: .95em;
    line-height: 1.5;
    color: var(--hcn-color-muted, #5a5f66);
    max-width: 58ch;
}
.hcn-reg--v2 .hcn-doccard__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--hcn-space-1, 4px);
    padding: 4px 10px;
    border-radius: var(--hcn-radius-pill, 999px);
    font-size: .8em;
    font-weight: 700;
    background: var(--hcn-color-neutral-bg, #f0f0f1);
    color: var(--hcn-color-neutral, #5a5f66);
}
.hcn-reg--v2 .hcn-doccard__badge[hidden] { display: none !important; }
/* The pill now carries the state on its own, so it takes the tint the card used to wash over
   everything. Small surface, same information. */
.hcn-reg--v2 .hcn-doccard[data-state="SAVED"] .hcn-doccard__badge { background: var(--hcn-color-success-bg, #e6f4ea); color: var(--hcn-color-success, #1E7A4D); }
.hcn-reg--v2 .hcn-doccard[data-state="WARNING"] .hcn-doccard__badge,
.hcn-reg--v2 .hcn-doccard[data-state="READ_FAILED"] .hcn-doccard__badge { background: var(--hcn-color-warning-bg, #fff4d6); color: var(--hcn-color-warning, #8a6100); }
.hcn-reg--v2 .hcn-doccard[data-state="FAILED"] .hcn-doccard__badge,
.hcn-reg--v2 .hcn-doccard[data-state="REJECTED"] .hcn-doccard__badge,
.hcn-reg--v2 .hcn-doccard[data-state="STALLED"] .hcn-doccard__badge { background: var(--hcn-color-error-bg, #fdeceb); color: var(--hcn-color-error, #B42318); }

/* body regions: exactly one is visible per state, driven from the card's own attribute */
.hcn-reg--v2 .hcn-doccard__empty,
.hcn-reg--v2 .hcn-doccard__busy,
.hcn-reg--v2 .hcn-doccard__saved { display: none; }
.hcn-reg--v2 .hcn-doccard[data-state="EMPTY"] .hcn-doccard__empty,
.hcn-reg--v2 .hcn-doccard[data-state="STALLED"] .hcn-doccard__empty,
.hcn-reg--v2 .hcn-doccard[data-state="FAILED"] .hcn-doccard__empty { display: block; }
.hcn-reg--v2 .hcn-doccard[data-state="UPLOADING"] .hcn-doccard__busy,
.hcn-reg--v2 .hcn-doccard[data-state="PROCESSING"] .hcn-doccard__busy,
.hcn-reg--v2 .hcn-doccard[data-state="DELETING"] .hcn-doccard__busy { display: block; }
.hcn-reg--v2 .hcn-doccard[data-state="SAVED"] .hcn-doccard__saved,
.hcn-reg--v2 .hcn-doccard[data-state="WARNING"] .hcn-doccard__saved,
/* REJECTED is stored-but-unusable. It was missing from this list, so such a card rendered with no
   region at all: no chooser, no saved row, nothing but a red sentence — and the file it is talking
   about could not be looked at, replaced or deleted. */
.hcn-reg--v2 .hcn-doccard[data-state="REJECTED"] .hcn-doccard__saved,
.hcn-reg--v2 .hcn-doccard[data-state="READ_FAILED"] .hcn-doccard__saved { display: flex; }

/* EMPTY: the whole area is the control. The native input is visually hidden and driven by this. */
.hcn-reg--v2 .hcn-doccard__choose {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--hcn-space-2, 8px);
    width: 100%;
    min-height: 72px;
    padding: var(--hcn-space-4, 16px) var(--hcn-space-5, 20px);
    border: 1.5px dashed var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-md, 8px);
    background: var(--hcn-color-surface, #fff);
    color: var(--hcn-color-heading, #1C1C1D);
    font: inherit;
    font-size: 1.02em;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}
.hcn-reg--v2 .hcn-doccard__choose:hover {
    border-color: var(--hcn-color-brand, #B38F64);
    background: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8F6E46);
}
.hcn-reg--v2 .hcn-doccard__choose svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--hcn-color-brand-strong, #8F6E46); }
.hcn-reg--v2 .hcn-doccard__file {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* The hidden input still owns the focus ring: the label is its visible surface. */
.hcn-reg--v2 .hcn-doccard__file:focus-visible + .hcn-doccard__choose,
.hcn-reg--v2 .hcn-doccard__file:focus + .hcn-doccard__choose {
    outline: var(--hcn-focus-ring, 3px solid rgba(179, 143, 100, .55));
    outline-offset: 2px;
    border-color: var(--hcn-color-brand, #B38F64);
}

/* UPLOADING / PROCESSING: one line of state, a determinate bar when bytes are known. */
.hcn-reg--v2 .hcn-doccard__busy-row {
    display: flex;
    align-items: center;
    gap: var(--hcn-space-3, 12px);
    margin-bottom: var(--hcn-space-3, 12px);
}
.hcn-reg--v2 .hcn-doccard__busy-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-weight: 600;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-doccard__busy-file {
    display: block;
    font-weight: 400;
    font-size: .9em;
    color: var(--hcn-color-muted, #5a5f66);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hcn-reg--v2 .hcn-doccard__pct { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--hcn-color-brand-strong, #8F6E46); }
.hcn-reg--v2 .hcn-doccard__pct[hidden] { display: none !important; }

.hcn-reg--v2 .hcn-doccard__bar {
    height: 8px;
    border-radius: var(--hcn-radius-pill, 999px);
    background: rgba(28, 28, 29, .10);
    overflow: hidden;
}
.hcn-reg--v2 .hcn-doccard__bar[hidden] { display: none !important; }
.hcn-reg--v2 .hcn-doccard__bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--hcn-color-brand, #B38F64);
    transition: width .2s ease-out;
}

/* PROCESSING: an arc, not a spinner — one slow revolution reads as "being examined", where a fast
 * spinner reads as "stuck". The stroke is drawn once; only the rotation animates. */
.hcn-reg--v2 .hcn-doccard__arc { flex: 0 0 auto; width: 28px; height: 28px; color: var(--hcn-color-brand-strong, #8F6E46); }
.hcn-reg--v2 .hcn-doccard__arc[hidden] { display: none !important; }
.hcn-reg--v2 .hcn-doccard__arc svg { display: block; width: 100%; height: 100%; animation: hcn-doccard-arc 1.4s linear infinite; }
.hcn-reg--v2 .hcn-doccard__arc circle { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: .18; }
.hcn-reg--v2 .hcn-doccard__arc path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
@keyframes hcn-doccard-arc { to { transform: rotate(360deg); } }

/* The slow second line, for a check that runs past a few seconds. */
.hcn-reg--v2 .hcn-doccard__patience { margin: var(--hcn-space-2, 8px) 0 0; font-size: .92em; color: var(--hcn-color-muted, #5a5f66); }
.hcn-reg--v2 .hcn-doccard__patience[hidden] { display: none !important; }

/* SAVED / WARNING: thumbnail, name, actions. The choose control is gone, not disabled. */
.hcn-reg--v2 .hcn-doccard__saved {
    align-items: center;
    gap: var(--hcn-space-4, 16px);
    flex-wrap: wrap;
}
.hcn-reg--v2 .hcn-doccard__saved-body { flex: 1 1 200px; min-width: 0; }
.hcn-reg--v2 .hcn-doccard__saved-note { margin: 0; font-size: .95em; line-height: 1.5; color: var(--hcn-color-text, #2D2E2F); }
.hcn-reg--v2 .hcn-doccard__saved-note[hidden] { display: none !important; }
.hcn-reg--v2 .hcn-doccard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hcn-space-2, 8px);
    margin-top: var(--hcn-space-3, 12px);
}
/* 44px floor on every action, including the quiet one: a delete that is hard to hit is not safer.
   Every colour here carries `!important`, and not by habit: these are <button> elements, and the
   theme's own button rules were painting two of the three solid gold — which is why Bekijken and
   Verwijderen turned up as filled slabs with the label barely readable on them. The card's actions
   are quiet controls on a white surface; the one gold thing on the step is "Verder". */
.hcn-reg--v2 .hcn-doccard__action {
    display: inline-flex;
    align-items: center;
    gap: var(--hcn-space-2, 8px);
    min-height: 44px;
    padding: 0 var(--hcn-space-4, 16px) !important;
    border: 1px solid var(--hcn-color-border, #d0d3d6) !important;
    border-radius: var(--hcn-radius-md, 8px) !important;
    background: var(--hcn-color-surface, #fff) !important;
    font: inherit;
    font-size: .95em !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--hcn-color-heading, #1C1C1D) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color .16s ease-out, color .16s ease-out, background-color .16s ease-out,
                box-shadow .2s ease-out, transform .16s ease-out;
}
/* The icon is the quiet half of the label: brand gold at rest, and it follows the wording into
   whatever colour the state gives it, so a button never ends up two-toned. */
.hcn-reg--v2 .hcn-doccard__action svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--hcn-color-brand-strong, #8F6E46);
    transition: color .16s ease-out, transform .18s cubic-bezier(.2, .7, .3, 1);
}
.hcn-reg--v2 .hcn-doccard__action:hover,
.hcn-reg--v2 .hcn-doccard__action:focus-visible {
    border-color: var(--hcn-color-brand, #B38F64) !important;
    color: var(--hcn-color-brand-strong, #8F6E46) !important;
    box-shadow: 0 4px 12px rgba(28, 28, 29, .08) !important;
    transform: translateY(-1px);
}
.hcn-reg--v2 .hcn-doccard__action:hover svg,
.hcn-reg--v2 .hcn-doccard__action:focus-visible svg { transform: scale(1.06); }
.hcn-reg--v2 .hcn-doccard__action:active { transform: translateY(0); box-shadow: none !important; }
.hcn-reg--v2 .hcn-doccard__action:focus-visible {
    outline: 2px solid var(--hcn-focus-border, #B38F64) !important;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- the one destructive style

   Every control in V2 that deletes something wears this, so "red outline" means the same thing on
   every step and filling with red means the same thing everywhere too: you are about to remove
   something. Rest is an outline — a delete should never look like the obvious thing to press —
   and the fill arrives only under a pointer or a focus ring, where the intent is already there.
   `!important` throughout for the same reason as above: the theme owns `button` otherwise. */
.hcn-reg--v2 .hcn-doccard__action--danger,
.hcn-reg--v2 .hcn-btn--danger {
    background: var(--hcn-color-surface, #fff) !important;
    border-color: var(--hcn-color-error, #B42318) !important;
    color: var(--hcn-color-error, #B42318) !important;
}
.hcn-reg--v2 .hcn-doccard__action--danger svg { color: currentColor; }
.hcn-reg--v2 .hcn-doccard__action--danger:hover,
.hcn-reg--v2 .hcn-doccard__action--danger:focus-visible,
.hcn-reg--v2 .hcn-btn--danger:hover,
.hcn-reg--v2 .hcn-btn--danger:focus-visible {
    background: var(--hcn-color-error, #B42318) !important;
    border-color: var(--hcn-color-error, #B42318) !important;
    color: var(--hcn-color-danger-text, #fff) !important;
    box-shadow: 0 4px 12px rgba(180, 35, 24, .24) !important;
}
.hcn-reg--v2 .hcn-doccard__action--danger:focus-visible,
.hcn-reg--v2 .hcn-btn--danger:focus-visible {
    outline: 2px solid var(--hcn-color-error, #B42318) !important;
    outline-offset: 2px;
}
.hcn-reg--v2 .hcn-doccard__action[hidden] { display: none !important; }
.hcn-reg--v2 .hcn-doccard__action:disabled { opacity: .45; cursor: default; }
.hcn-reg--v2 .hcn-doccard__action:disabled:hover { transform: none; box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
    .hcn-reg--v2 .hcn-doccard__action,
    .hcn-reg--v2 .hcn-doccard__action svg { transition: none !important; }
    .hcn-reg--v2 .hcn-doccard__action:hover,
    .hcn-reg--v2 .hcn-doccard__action:focus-visible { transform: none; }
    .hcn-reg--v2 .hcn-doccard__action:hover svg,
    .hcn-reg--v2 .hcn-doccard__action:focus-visible svg { transform: none; }
}

/* The way out of a failed upload.
   Shown only where nothing was stored and the card has stopped working: FAILED, which has a reason
   on the line above it, and STALLED, which is the card's own deadline expiring with no answer from
   anyone. It repeats no error text — that is already on screen — and gives the two things a pilgrim
   can actually do next. A card that says what went wrong and then offers nothing is the dead end
   this block exists to remove. */
.hcn-reg--v2 .hcn-doccard__recover { display: none; }
.hcn-reg--v2 .hcn-doccard[data-state="FAILED"] .hcn-doccard__recover,
.hcn-reg--v2 .hcn-doccard[data-state="STALLED"] .hcn-doccard__recover { display: block; }
.hcn-reg--v2 .hcn-doccard__recover-lead,
.hcn-reg--v2 .hcn-doccard__recover-manual {
    margin: var(--hcn-space-2, 8px) 0 0;
    font-size: .92em;
    line-height: 1.55;
    color: var(--hcn-color-muted, #5a5f66);
    max-width: 62ch;
}
/* The alternative route carries a little more weight than the retry advice: for a passport it is
   the sentence that tells someone they are not stuck. */
.hcn-reg--v2 .hcn-doccard__recover-manual {
    padding: var(--hcn-space-2, 8px) var(--hcn-space-3, 12px);
    border-radius: var(--hcn-radius-sm, 6px);
    background: var(--hcn-color-brand-soft, #F4EEE5);
    background: color-mix(in srgb, var(--hcn-color-brand, #B38F64) 12%, transparent);
    color: var(--hcn-color-brand-strong, #8F6E46);
    font-weight: 600;
}

/* The card's own message line and its reason list. Shares the tone vocabulary already in use. */
.hcn-reg--v2 .hcn-doccard__result { margin: var(--hcn-space-3, 12px) 0 0; line-height: 1.5; }
.hcn-reg--v2 .hcn-doccard__result:empty { display: none; }
.hcn-reg--v2 .hcn-doccard__reasons { margin: var(--hcn-space-2, 8px) 0 0; }
.hcn-reg--v2 .hcn-doccard__reasons:empty { display: none; }

.hcn-reg--v2 .hcn-doccard-group .hcn-reg__actions { margin-top: var(--hcn-space-3, 12px); }

/* The stored document, shown. R1's inline confirmation: a pilgrim should be able to see that the
   right page went in without opening anything. The image arrives through the SAME owner-authorised
   preview call the dialog uses — a POST that returns the bytes — so there is no public URL, nothing
   in the address, and nothing kept once the card leaves its saved state. */
.hcn-reg--v2 .hcn-doccard__thumb {
    flex: 0 0 auto;
    width: 132px;
    height: 88px;
    border-radius: var(--hcn-radius-md, 8px);
    border: 1px solid var(--hcn-color-border-soft, #e4e6e9);
    background: var(--hcn-color-subtle-bg, #f6f7f7);
    object-fit: contain;
}
.hcn-reg--v2 .hcn-doccard__thumb[hidden] { display: none !important; }

/* --------------------------------------------------------- preview dialog */

.hcn-reg--v2 .hcn-docview[hidden] { display: none !important; }
.hcn-docview {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: grid;
    place-items: center;
    padding: var(--hcn-space-4, 16px);
}
.hcn-docview__backdrop { position: absolute; inset: 0; background: rgba(28, 28, 29, .55); }
.hcn-docview__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: calc(100vh - 32px);
    padding: var(--hcn-space-5, 20px);
    border-radius: var(--hcn-radius-lg, 12px);
    background: var(--hcn-color-surface, #fff);
    box-shadow: 0 18px 48px rgba(28, 28, 29, .28);
}
/* The dialog arrives rather than appears: the backdrop fades and the panel settles in from
   slightly small and slightly low. 180 ms — long enough to read as motion, short enough never to
   be waited for. Off entirely under reduced motion. */
.hcn-docview__backdrop { animation: hcn-docview-fade .18s ease-out both; }
.hcn-docview__panel { animation: hcn-docview-rise .2s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes hcn-docview-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hcn-docview-rise { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

.hcn-docview__head { display: flex; align-items: center; gap: var(--hcn-space-3, 12px); margin-bottom: var(--hcn-space-4, 16px); }
.hcn-reg--v2 .hcn-docview__title,
.hcn-docview__title { margin: 0; flex: 1 1 auto; font-size: 1.2em; font-weight: 700; color: var(--hcn-color-heading, #1C1C1D); }

/* The close control. It is a <button>, so without `!important` the theme's own button rule paints
   it — which is how it turned up as an 80x44 dark slab with a gold cross. It is a 40px circle, quiet
   on a white surface: the one thing in the dialog that must never compete with the document. Under
   a pointer the ring turns gold and the cross turns a quarter; pressed, it gives slightly. */
.hcn-reg--v2 .hcn-docview__close {
    flex: 0 0 auto;
    display: grid !important;
    place-items: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--hcn-color-border, #d0d3d6) !important;
    border-radius: 50% !important;
    background: var(--hcn-color-surface, #fff) !important;
    color: var(--hcn-color-heading, #1C1C1D) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color .16s ease-out, color .16s ease-out, background-color .16s ease-out,
                transform .16s ease-out, box-shadow .2s ease-out;
}
.hcn-reg--v2 .hcn-docview__close svg {
    width: 18px;
    height: 18px;
    display: block;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}
.hcn-reg--v2 .hcn-docview__close:hover,
.hcn-reg--v2 .hcn-docview__close:focus-visible {
    border-color: var(--hcn-color-brand, #B38F64) !important;
    color: var(--hcn-color-brand-strong, #8F6E46) !important;
    background: var(--hcn-color-brand-soft, #F4EEE5) !important;
    box-shadow: 0 4px 12px rgba(28, 28, 29, .10) !important;
}
.hcn-reg--v2 .hcn-docview__close:hover svg,
.hcn-reg--v2 .hcn-docview__close:focus-visible svg { transform: rotate(90deg); }
.hcn-reg--v2 .hcn-docview__close:active { transform: scale(.94); box-shadow: none !important; }
.hcn-reg--v2 .hcn-docview__close:focus-visible {
    outline: 2px solid var(--hcn-focus-border, #B38F64) !important;
    outline-offset: 3px;
}

.hcn-docview__stage {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: var(--hcn-space-3, 12px);
    background: var(--hcn-color-subtle-bg, #f6f7f7);
    border-radius: var(--hcn-radius-md, 8px);
    overflow: auto;
}
.hcn-docview__image {
    display: block;
    max-width: 100%;
    max-height: 62vh;
    object-fit: contain;
    border-radius: 4px;
    animation: hcn-docview-fade .18s ease-out both;
}
.hcn-docview__image[hidden] { display: none !important; }
/* While the picture is on its way the stage says so with motion as well as words: a slow sheen
   crossing a placeholder the shape of a document, so a wait of a second reads as loading, not as a
   dialog that opened empty. When the card already holds the picture this state is never seen. */
.hcn-docview__loading {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 440px);
    min-height: 200px;
    margin: 0;
    padding: var(--hcn-space-6, 24px) 0;
    border-radius: var(--hcn-radius-md, 8px);
    background: linear-gradient(100deg, rgba(28, 28, 29, .04) 30%, rgba(28, 28, 29, .09) 50%, rgba(28, 28, 29, .04) 70%);
    background-size: 220% 100%;
    animation: hcn-docview-sheen 1.4s ease-in-out infinite;
    font-weight: 600;
    color: var(--hcn-color-muted, #5a5f66);
}
@keyframes hcn-docview-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.hcn-docview__loading[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .hcn-docview__backdrop,
    .hcn-docview__panel,
    .hcn-docview__image,
    .hcn-docview__loading { animation: none !important; }
    .hcn-reg--v2 .hcn-docview__close,
    .hcn-reg--v2 .hcn-docview__close svg { transition: none !important; }
    .hcn-reg--v2 .hcn-docview__close:hover svg,
    .hcn-reg--v2 .hcn-docview__close:focus-visible svg { transform: none; }
    .hcn-reg--v2 .hcn-docview__close:active { transform: none; }
}
.hcn-docview__note { margin: var(--hcn-space-3, 12px) 0 0; font-size: .92em; color: var(--hcn-color-muted, #5a5f66); }

/* ------------------------------------- Step 3: passport-derived field state
 *
 * Four presentation states over the eight passport fields, driven by `data-v2-state` written by the
 * server from the `sources` map — never guessed in the browser. The tint carries the state, the
 * label carries the instruction, and the label text stays dark on the tint: coloured text at label
 * size is the first thing to go grey on an older screen.
 */

.hcn-reg--v2 .hcn-field[data-v2-state] {
    padding: var(--hcn-space-3, 12px) var(--hcn-space-4, 16px);
    border: 1.5px solid transparent;
    border-radius: var(--hcn-radius-md, 8px);
}
.hcn-reg--v2 .hcn-field[data-v2-state="READ"],
.hcn-reg--v2 .hcn-field[data-v2-state="CONFIRMED"] { padding: 0; border: 0; }
.hcn-reg--v2 .hcn-field[data-v2-state="MISSING"] { border-color: var(--hcn-color-error, #B42318); background: var(--hcn-color-error-bg, #fdeceb); }
.hcn-reg--v2 .hcn-field[data-v2-state="AMBIGUOUS"],
.hcn-reg--v2 .hcn-field[data-v2-state="PROVISIONAL"] { border-color: var(--hcn-color-warning, #8a6100); background: var(--hcn-color-warning-bg, #fff4d6); }

/* The state line above the control: icon plus text, never colour alone. */
.hcn-reg--v2 .hcn-fieldstate {
    display: flex;
    align-items: center;
    gap: var(--hcn-space-2, 8px);
    margin: 0 0 var(--hcn-space-1, 4px);
    font-size: var(--hcn-fs-field-label, 13px);
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-fieldstate svg { width: 17px; height: 17px; flex: 0 0 auto; }
.hcn-reg--v2 .hcn-fieldstate--read { color: var(--hcn-color-success, #1E7A4D); font-weight: 600; }
.hcn-reg--v2 .hcn-fieldstate--missing svg { color: var(--hcn-color-error, #B42318); }
.hcn-reg--v2 .hcn-fieldstate--attention svg { color: var(--hcn-color-warning, #8a6100); }
.hcn-reg--v2 .hcn-fieldstate__note { display: block; margin: 2px 0 0; font-size: .95em; font-weight: 400; color: var(--hcn-color-text, #2D2E2F); }

/* Cleared live, the moment a value is entered: a to-do marker with a visible end. */
.hcn-reg--v2 .hcn-field[data-v2-state="MISSING"].is-filled { border-color: var(--hcn-color-border, #d0d3d6); background: var(--hcn-color-surface, #fff); }
.hcn-reg--v2 .hcn-field.is-filled .hcn-fieldstate--missing { color: var(--hcn-color-success, #1E7A4D); }
.hcn-reg--v2 .hcn-field.is-filled .hcn-fieldstate--missing svg { color: var(--hcn-color-success, #1E7A4D); }

/* --------------------------------------------------------------- responsive */

@media (max-width: 782px) {
    .hcn-reg--v2 .hcn-doccard { padding: var(--hcn-space-4, 16px); }
    .hcn-reg--v2 .hcn-doccard__guidance { max-width: none; }
    .hcn-reg--v2 .hcn-doccard__actions { display: grid; grid-template-columns: 1fr 1fr; }
    .hcn-reg--v2 .hcn-doccard__action { justify-content: center; padding: 0 var(--hcn-space-3, 12px); }
    .hcn-reg--v2 .hcn-doccard__action--danger { grid-column: 1 / -1; }
    .hcn-docview__panel { padding: var(--hcn-space-4, 16px); }
    .hcn-docview__image { max-height: 52vh; }
}

@media (max-width: 480px) {
    .hcn-reg--v2 .hcn-doccard__head { flex-wrap: wrap; }
    .hcn-reg--v2 .hcn-doccard__badge { order: 3; }
    .hcn-reg--v2 .hcn-doccard__saved { gap: var(--hcn-space-3, 12px); }
}

/* Contrast mode: the tints stay, the borders thicken, nothing relies on hue alone. */
.hcn-reg--v2.is-contrast .hcn-doccard,
.hcn-reg--v2.is-contrast .hcn-field[data-v2-state="MISSING"],
.hcn-reg--v2.is-contrast .hcn-field[data-v2-state="AMBIGUOUS"],
.hcn-reg--v2.is-contrast .hcn-field[data-v2-state="PROVISIONAL"] { border-width: 2px; }
.hcn-reg--v2.is-contrast .hcn-doccard__guidance,
.hcn-reg--v2.is-contrast .hcn-doccard__busy-file,
.hcn-reg--v2.is-contrast .hcn-doccard__patience,
.hcn-reg--v2.is-contrast .hcn-docview__note { color: var(--hcn-color-heading, #1C1C1D); }

@media (prefers-reduced-motion: reduce) {
    .hcn-reg--v2 * { transition: none !important; animation: none !important; }
    /* The arc stops turning; the state is still carried by the text and the badge. */
    .hcn-reg--v2 .hcn-doccard__arc svg { animation: none !important; }
    .hcn-reg--v2 .hcn-doccard__bar-fill { transition: none !important; }
}

/* ================================================================ service picker

   The approved service row, operated as a picker. The trigger is the 54px control every other field
   on this screen uses; the panel below it holds one row per configured service — icon, name, short
   description, price. Nothing here knows a service: what the script draws comes from the catalog
   columns the template copied onto the options.

   The native <select> keeps its name, its options and its value and is still what submits. Without
   the script the `--native` class is never added and it renders as an ordinary select, which is why
   the form works with JavaScript off.

   SPECIFICITY, deliberately. The theme's kit carries `.elementor-kit-NN button { background-color:
   var(--e-global-color-secondary) }` — (0,1,1) — which paints every bare <button> on the page. A
   plain `.hcn-serviceselect__btn` is (0,1,0) and loses to it, which is how the picker rendered dark.
   Every rule below that a theme would otherwise win is scoped with `.hcn-reg--v2` to make it (0,2,0).
   That beats the kit on its own terms: no `!important`, and nothing about the site's real buttons
   changes. */

.hcn-serviceselect__wrap { position: relative; }

.hcn-serviceselect__native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    clip-path: inset(50%);
    pointer-events: none;
}

.hcn-reg--v2 .hcn-serviceselect__btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: var(--hcn-reg-control, 54px);
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--hcn-color-border-strong, #7F858E);
    border-radius: var(--hcn-radius-md, 8px);
    background: var(--hcn-color-surface, #fff);
    color: var(--hcn-color-text, #2D2E2F);
    font: inherit;
    font-size: 1em;
    font-weight: 600;
    text-align: left;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.hcn-reg--v2 .hcn-serviceselect__btn:hover { border-color: var(--hcn-color-muted, #5A5F66); }
.hcn-reg--v2 .hcn-serviceselect__btn[aria-expanded="true"] { border-color: var(--hcn-color-muted, #5A5F66); }
.hcn-reg--v2 .hcn-serviceselect__btn.is-placeholder { color: #767C85; font-weight: 500; }

/* A made choice stays a white control, like every other dropdown on the platform (owner, 2026-10-10:
   the dark filled trigger did not suit the design). The chosen service is carried by its name, icon
   and price; the trigger only darkens its border a step so it reads as answered. */
.hcn-reg--v2 .hcn-serviceselect__btn.has-value {
    background: var(--hcn-color-surface, #fff);
    border-color: var(--hcn-color-border-strong, #7F858E);
    color: var(--hcn-color-heading, #1C1C1D);
}

.hcn-serviceselect__mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8B6440);
}
.hcn-serviceselect__mark:empty { display: none; }
.hcn-serviceselect__mark svg { width: 20px; height: 20px; display: block; }

.hcn-serviceselect__value { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.hcn-serviceselect__chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--hcn-color-muted, #5A5F66); }

/* price: one tier when the two configured prices are equal, two when they differ */
.hcn-serviceselect__price { flex-shrink: 0; text-align: right; white-space: nowrap; }
.hcn-serviceselect__tier { display: block; }
.hcn-serviceselect__tier + .hcn-serviceselect__tier {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(28, 28, 29, .12);
}
.hcn-serviceselect__amount {
    display: block;
    font-size: .95em;
    font-weight: 700;
    color: var(--hcn-color-heading, #1C1C1D);
    font-variant-numeric: tabular-nums;
}
.hcn-serviceselect__per {
    display: block;
    font-size: .76em;
    font-weight: 600;
    color: var(--hcn-color-muted, #5A5F66);
}

/* The panel scrolls rather than growing: a catalog with six services must not push the button that
   submits the step off the bottom of the screen.

   `--hcn-ss-maxh` is the room actually left beside the trigger, measured by the script when the
   panel opens. CSS cannot know that number, so without it a viewport-relative cap can still hang
   half the list past the bottom edge of a phone. The cap below stays in force; the variable only
   ever makes the panel shorter, and its fallback is the cap itself, so with the script absent
   nothing changes. */
.hcn-serviceselect__panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    padding: 8px;
    border: 1px solid rgba(28, 28, 29, .12);
    border-radius: 10px;
    background: var(--hcn-color-surface, #fff);
    box-shadow: 0 12px 32px rgba(28, 28, 29, .16);
    max-height: min(300px, var(--hcn-ss-maxh, 48vh));
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Opened upwards when the space under the trigger is too small to be worth using. */
.hcn-serviceselect__panel.is-up {
    top: auto;
    bottom: calc(100% + 6px);
    box-shadow: 0 -12px 32px rgba(28, 28, 29, .16);
}
.hcn-serviceselect__panel[hidden] { display: none; }
.hcn-serviceselect__panel::-webkit-scrollbar { width: 10px; }
.hcn-serviceselect__panel::-webkit-scrollbar-thumb {
    background: rgba(28, 28, 29, .22);
    border: 3px solid var(--hcn-color-surface, #fff);
    border-radius: 999px;
}

.hcn-reg--v2 .hcn-serviceselect__option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--hcn-color-text, #2D2E2F);
    font: inherit;
    text-align: left;
    box-shadow: none;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.hcn-reg--v2 .hcn-serviceselect__option + .hcn-serviceselect__option { margin-top: 4px; }
/* The theme's kit sets `white-space: nowrap` on every <button>, so a service description never
   wrapped: it ran on under the price column and the two overlapped. Wording wraps here; only the
   price keeps its one-line rule (`.hcn-serviceselect__price`). */
.hcn-reg--v2 .hcn-serviceselect__option,
.hcn-reg--v2 .hcn-serviceselect__btn { white-space: normal; }
.hcn-reg--v2 .hcn-serviceselect__price { white-space: nowrap; }
.hcn-reg--v2 .hcn-serviceselect__option:hover,
.hcn-reg--v2 .hcn-serviceselect__option.is-active { background: #F8F5F1; }

/* Selected: the platform's chosen-option look, the same as the country, phone and HCN-partner
   pickers — the soft-gold surface, a 1px gold ring and heading-dark wording (never white on gold).
   The icon badge turns white so it does not dissolve into a surface of its own colour. */
.hcn-reg--v2 .hcn-serviceselect__option.is-selected {
    background: var(--hcn-color-brand-soft, #F4EEE5);
    border-color: var(--hcn-color-brand, #B38F64);
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-serviceselect__option.is-selected .hcn-serviceselect__mark { background: var(--hcn-color-surface, #fff); }

.hcn-serviceselect__option .hcn-serviceselect__mark { margin-top: 1px; }
.hcn-serviceselect__option .hcn-serviceselect__price { padding-top: 2px; }
.hcn-serviceselect__body { flex: 1 1 auto; min-width: 0; }
.hcn-serviceselect__name {
    display: block;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-serviceselect__desc {
    display: block;
    margin-top: 3px;
    font-size: .88em;
    font-weight: 500;
    line-height: 1.45;
    color: var(--hcn-color-muted, #5A5F66);
    max-width: 52ch;
}

@media (max-width: 600px) {
    .hcn-reg--v2 .hcn-serviceselect__btn { flex-wrap: wrap; padding: 12px 14px; row-gap: 10px; }
    /* Zero basis, so a long service name wraps BESIDE its icon and the chevron instead of taking a
       row of its own and pushing the chevron onto a third. The prices take the second row. */
    .hcn-serviceselect__value { flex: 1 1 0; min-width: 0; }
    .hcn-serviceselect__chevron { order: 3; }
    .hcn-serviceselect__btn > .hcn-serviceselect__price { order: 4; flex-basis: 100%; text-align: left; }
    .hcn-serviceselect__btn > .hcn-serviceselect__price .hcn-serviceselect__tier { display: inline-block; margin-right: 16px; }
    .hcn-serviceselect__btn > .hcn-serviceselect__price .hcn-serviceselect__tier + .hcn-serviceselect__tier {
        margin-top: 0; padding-top: 0; border-top: 0;
    }
    .hcn-reg--v2 .hcn-serviceselect__option { flex-wrap: wrap; }
    .hcn-serviceselect__option .hcn-serviceselect__price { flex-basis: 100%; text-align: right; padding-top: 6px; }
    .hcn-serviceselect__panel { max-height: min(60vh, var(--hcn-ss-maxh, 60vh)); }
}

/* ---------------------------------------------------------------- help row

   "Hulp nodig bij registreren?" sits at the top of the content column, not in the top bar: the bar
   is chrome about the page, asking for help is about the step. */
.hcn-reg__helprow {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding-top: 18px;
}
.hcn-reg--v2 > .hcn-reg__helprow + * { padding-top: 14px; }
/* The help row, Step 2: "Wat is een goede foto?" on the left, "Hulp nodig bij registreren?" on the right,
   one line above the step title (owner, 2026-10-20). When the two do not fit side by side the row wraps
   in reverse, so the help pill keeps the top right and the photo guide takes the line under it. */
.hcn-reg--v2 .hcn-reg__helprow--lead {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap-reverse;
    gap: 12px 16px;
}
.hcn-reg--v2 .hcn-reg__helprow--lead > .hcn-reg__helplead { margin: 0; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.hcn-reg--v2 .hcn-reg__helprow--lead > .hcn-help-pill { margin-left: auto; }
/* R1's pill is `min-height: 34px !important`; 34px is not a touch target. V2 claims the height for
   its own screens without touching R1's rule. */
.hcn-reg--v2 .hcn-help-pill { min-height: 44px !important; }
@media (max-width: 600px) {
    /* Right, not stretched. A full-width bar reads as the step's primary action, which help is not;
       `justify-content: stretch` is not a main-axis value in flexbox anyway, so it resolved to
       flex-start and left the pill sitting under the step wording. */
    .hcn-reg__helprow { justify-content: flex-end; padding-top: 14px; }
    .hcn-reg--v2 .hcn-help-pill { flex: 0 0 auto; }
}

/* ================================================================== Step 3 — compact premium pass

   Step 3 was correct and far too tall: 1910px of identity section at 1440, because only the two
   halves of a name shared a row and everything else took a full-width one of its own. Nothing is
   removed here — every field a pilgrim has to answer is still on the screen — the height is bought
   back by pairing, by one heading level instead of four, and by taking the agencies' marketing
   paragraphs out of a choice between three names.
   ================================================================== */

/* Row rhythm. The grid only owned the column gap; the rows came from `.hcn-field`'s own bottom
   margin, which made a paired row and a lone row sit at different distances from the next one. */
.hcn-reg--v2 .hcn-reg__form .hcn-reg__grid {
    row-gap: 0;
    column-gap: var(--hcn-space-5, 20px);
    margin: 0 0 var(--hcn-space-6, 24px);
}
.hcn-reg--v2 .hcn-reg__form .hcn-reg__grid > .hcn-field { margin-bottom: 0; }
@media (max-width: 600px) {
    /* Stacked, the two halves need their own separation back. */
    .hcn-reg--v2 .hcn-reg__form .hcn-reg__grid { row-gap: var(--hcn-space-5, 20px); }
}

/* Section heading. One level, the flow's own gold marker, and enough air above it to read as a
   division without a card or a rule. */
.hcn-reg--v2 .hcn-reg__sub {
    display: flex;
    align-items: center;
    gap: var(--hcn-space-2, 8px);
    margin: var(--hcn-space-8, 32px) 0 var(--hcn-space-5, 20px);
    padding-top: var(--hcn-space-5, 20px);
    border-top: 1px solid var(--hcn-color-border-faint, #f0f1f3);
    font-size: var(--hcn-fs-section, 0.95em);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hcn-color-muted, #5A5F66);
}
.hcn-reg--v2 .hcn-reg__sub::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hcn-color-brand, #B38F64);
}
/* The first section opens the form; it needs no rule and no gap above it. */
.hcn-reg--v2 .hcn-reg__form > .hcn-reg__sub:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* A fieldset used as a half-width field has to behave like one: browsers give it their own margin,
   padding and border, and a min-width that refuses to shrink inside a grid column. */
.hcn-reg--v2 .hcn-reg__form fieldset.hcn-field {
    min-width: 0;
    margin: 0 0 var(--hcn-space-4, 16px);
    padding: 0;
    border: 0;
}
.hcn-reg--v2 .hcn-reg__form fieldset.hcn-field > legend {
    display: block;
    float: none;
    width: auto;
    padding: 0;
    margin: 0 0 var(--hcn-space-2, 8px);
    font-size: var(--hcn-fs-field-label, 13px);
    font-weight: 700;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-reg__form fieldset.hcn-field[data-v2-state] {
    padding: var(--hcn-space-3, 12px) var(--hcn-space-4, 16px);
    border: 1.5px solid transparent;
}
.hcn-reg--v2 .hcn-reg__form fieldset.hcn-field[data-v2-state="READ"],
.hcn-reg--v2 .hcn-reg__form fieldset.hcn-field[data-v2-state="CONFIRMED"] { padding: 0; border: 0; }

/* ------------------------------------------------------------------ Geslacht — segmented

   Two options, both always visible. A two-option <select> costs a tap and hides the answer; a pair of
   radios shows it, works without JavaScript and gives the keyboard arrow navigation for free. */
.hcn-reg--v2 .hcn-seg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hcn-space-2, 8px);
}
.hcn-reg--v2 .hcn-seg__opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hcn-space-2, 8px);
    min-height: 48px;
    padding: 6px var(--hcn-space-3, 12px);
    background: var(--hcn-color-surface, #fff);
    border: 1px solid var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-md, 10px);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.hcn-reg--v2 .hcn-seg__opt:hover { border-color: var(--hcn-color-brand, #B38F64); }
/* The radio stays a real radio for the keyboard and for assistive technology; it is the tick to its
   left that carries the state visually, so the choice reads as a choice and not as a form control. */
.hcn-reg--v2 .hcn-seg__opt input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.hcn-reg--v2 .hcn-seg__label::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: var(--hcn-space-2, 8px);
    vertical-align: -3px;
    border: 1.5px solid var(--hcn-color-border, #d0d3d6);
    border-radius: 50%;
    background: var(--hcn-color-surface, #fff);
}
.hcn-reg--v2 .hcn-seg__opt:has(input:checked) {
    background: var(--hcn-color-brand-soft, #F4EEE5);
    border-color: var(--hcn-color-brand, #B38F64);
    box-shadow: 0 0 0 1px var(--hcn-color-brand, #B38F64);
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-seg__opt:has(input:checked) .hcn-seg__label::before {
    border-color: var(--hcn-color-brand-strong, #8F6E46);
    background: var(--hcn-color-brand-strong, #8F6E46);
    box-shadow: inset 0 0 0 3px var(--hcn-color-surface, #fff);
}
.hcn-reg--v2 .hcn-seg__opt:has(input:focus-visible) {
    outline: 2px solid var(--hcn-focus-border, #B38F64);
    outline-offset: 2px;
}

/* The ambiguity radios inside a half-width date field: rows, not a full-width stack. */
.hcn-reg--v2 .hcn-reg__form fieldset.hcn-field--half .hcn-choice {
    display: flex;
    align-items: center;
    gap: var(--hcn-space-2, 8px);
    min-height: 44px;
    margin: 0 0 var(--hcn-space-2, 8px);
    padding: 4px var(--hcn-space-3, 12px);
}

@media (prefers-reduced-motion: reduce) {
    .hcn-reg--v2 .hcn-seg__opt { transition: none; }
}


/* ------------------------------------------------------------------ ← Terug

   The control had no rule of its own, so the theme kit's global `button` style painted it as a
   40px-padded charcoal slab under every V2 step. It is a way back, not a call to action: quiet,
   left-aligned, and unmistakably pressable. Nothing about the POST behind it changes. */
/* A real control, not a text link: the soft-gold surface gives it a shape to aim at and enough
   weight to be found under a long form, without competing with the step's own primary button — that
   one is filled brand gold, this one is the tint of it. Shared by every step through one rule. */
.hcn-reg--v2 .hcn-reg__backform { margin: var(--hcn-space-6, 24px) 0 var(--hcn-space-8, 32px); }
.hcn-reg--v2 .hcn-reg__back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px 0 18px;
    background: var(--hcn-color-brand-soft, #F4EEE5);
    border: 1px solid transparent;
    border-radius: var(--hcn-radius-pill, 999px);
    color: var(--hcn-color-brand-strong, #8F6E46);
    font-size: inherit;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .18s ease-out, background .18s ease-out;
}
/* The arrow leads: it steps back on hover, which is the direction the control goes. */
.hcn-reg--v2 .hcn-reg__back > [aria-hidden="true"] {
    display: inline-block;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}
.hcn-reg--v2 .hcn-reg__back:hover,
.hcn-reg--v2 .hcn-reg__back:focus-visible {
    background: var(--hcn-color-brand-soft, #F4EEE5);
    border-color: var(--hcn-color-brand, #B38F64);
    color: var(--hcn-color-brand-strong, #8F6E46);
}
.hcn-reg--v2 .hcn-reg__back:hover > [aria-hidden="true"] { transform: translateX(-3px); }
.hcn-reg--v2 .hcn-reg__back:focus-visible {
    outline: 2px solid var(--hcn-focus-border, #B38F64);
    outline-offset: 2px;
}

/* D27 (0.68.0-dev): the blood group takes its own row in Step 3 and in a companion's identity substep, so the
   unanswered placeholder and "Onbekend — ik weet mijn bloedgroep niet" are never clipped in the narrow two-pane
   layout (1024 px); the control itself stays short. */
.hcn-reg--v2 .hcn-field[data-v2-blood] { grid-column: 1 / -1; }
.hcn-reg--v2 .hcn-field[data-v2-blood] > .hcn-select,
.hcn-reg--v2 .hcn-field[data-v2-blood] > .hcn-flagsel { max-width: 24rem; }

/* 0.72.2-dev (owner amendment "UI Corrections", A2): in Step 3's "Aanvullende gegevens" the blood group and
   "Via welke HCN-partner registreert u zich?" stand side by side, each a complete field group — label,
   control, then its own explanation and its own error under its own control. The D27 own-row rule above
   still holds on the companion screen, where the blood group has no partner field beside it.

   The pair is recognised by what it holds (both fields in one grid), so the template is unchanged. From
   900px the two halves share one subgrid: row 1 the two labels, row 2 the two controls, rows 3 and 4 what
   belongs under each — so a label that wraps never pushes its control below the other one. The columns
   are the form's own pair columns (same gap as every paired row above), and the blood group's control
   fills its column. Below 900px a half is too narrow for the longest answer and the partner question
   together, so the two groups stack, full width, in the same order.

   Under each control its error comes first, then the explanation: in the markup the blood group's
   explanation precedes its error, so each field is a one-column grid that places the error in row 3 and
   the explanation in row 4. Side by side, the two errors then share a line, directly under their own
   controls. (A screen reader reads the field in markup order; the error is also announced on its own,
   `role="alert"`.) */
.hcn-reg--v2 .hcn-reg__grid:has(> [data-v2-blood]):has(> [data-v2-agency]) > .hcn-field[data-v2-blood] { grid-column: auto; }
.hcn-reg--v2 .hcn-reg__grid:has(> [data-v2-blood]):has(> [data-v2-agency]) > .hcn-field[data-v2-blood] > .hcn-select,
.hcn-reg--v2 .hcn-reg__grid:has(> [data-v2-blood]):has(> [data-v2-agency]) > .hcn-field[data-v2-blood] > .hcn-flagsel { max-width: none; }
@media (max-width: 899px) {
    .hcn-reg--v2 .hcn-reg__form .hcn-reg__grid:has(> [data-v2-blood]):has(> [data-v2-agency]) {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--hcn-form-gap, 32px);
    }
    .hcn-reg--v2 .hcn-reg__grid:has(> [data-v2-blood]):has(> [data-v2-agency]) > .hcn-field { grid-column: 1 / -1; }
}
.hcn-reg--v2 .hcn-reg__grid:has(> [data-v2-blood]):has(> [data-v2-agency]) > .hcn-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}
.hcn-reg--v2 .hcn-reg__grid:has(> [data-v2-blood]):has(> [data-v2-agency]) > .hcn-field > .hcn-field__error { grid-row: 3; }
.hcn-reg--v2 .hcn-reg__grid:has(> [data-v2-blood]):has(> [data-v2-agency]) > .hcn-field > .hcn-field__hint { grid-row: 4; }
/* The partner field shows a hint only when no partner is available, in place of its control. */
.hcn-reg--v2 .hcn-reg__grid:has(> [data-v2-blood]):has(> [data-v2-agency]) > .hcn-field[data-v2-agency] > .hcn-field__hint { grid-row: 2; }
@supports (grid-template-rows: subgrid) {
    @media (min-width: 900px) {
        .hcn-reg--v2 .hcn-reg__grid:has(> [data-v2-blood]):has(> [data-v2-agency]) > .hcn-field {
            grid-row: span 4;
            grid-template-rows: subgrid;
            row-gap: 0;
        }
        /* A label that wraps (the partner question at the largest text) keeps both labels on their
           controls: the shorter one sits at the bottom of the shared label row, not above a blank line. */
        .hcn-reg--v2 .hcn-reg__grid:has(> [data-v2-blood]):has(> [data-v2-agency]) > .hcn-field > .hcn-field__head { align-self: end; }
    }
}
/* The longest answer, "Onbekend — ik weet mijn bloedgroep niet", needs about 360px of text. It used to be
   cut off with an ellipsis in the 384px control (measured at 0.72.1-dev, every width), which is what D27
   set out to prevent. The chosen answer now wraps inside its own control, which grows from 54px; in the
   pair both controls share their row, so they stay the same height. */
.hcn-reg--v2 .hcn-field[data-v2-blood] .hcn-flagsel__btn,
.hcn-reg--v2 .hcn-reg__grid:has(> [data-v2-blood]) > .hcn-field[data-v2-agency] .hcn-flagsel__btn {
    height: 100% !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
/* The unanswered blood group ("— Kies een bloedgroep —") reads as a prompt, like the partner field's "Kies
   uw HCN-partner" beside it. The picker script still treats an empty value in its plain mode as an answer,
   which it was before D27 gave "Onbekend" its own value (UNK); the selected empty option decides here. */
.hcn-reg--v2 .hcn-field[data-v2-blood]:has(option[value=""]:checked) .hcn-flagsel__btn {
    color: var(--hcn-color-muted, #5a5f66) !important;
    font-weight: 500 !important;
}
.hcn-reg--v2 .hcn-field[data-v2-blood] .hcn-flagsel__value,
.hcn-reg--v2 .hcn-reg__grid:has(> [data-v2-blood]) > .hcn-field[data-v2-agency] .hcn-flagsel__value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}


/* ================================================================== "Hulp?" — the brand button

   R1's `.hcn-help-pill` is a white outlined chip, and every declaration in it carries `!important`
   because the theme styles bare <button> heavily. V2 wants the brand's green instead, on every
   screen and at every width, so the override matches that weight — it is competing with R1's
   `!important`, not with an ordinary rule. Scoped to `.hcn-reg--v2`, so R1's own pill is untouched.
   ================================================================== */
.hcn-reg--v2 .hcn-help-pill {
    min-height: 44px !important;
    padding: 0 18px !important;
    background: var(--hcn-color-success, #1E7A4D) !important;
    border-color: var(--hcn-color-success, #1E7A4D) !important;
    color: var(--hcn-color-on-dark, #fff) !important;
    font-weight: 700 !important;
}
.hcn-reg--v2 .hcn-help-pill svg { color: currentColor !important; }
.hcn-reg--v2 .hcn-help-pill:hover,
.hcn-reg--v2 .hcn-help-pill:focus-visible {
    background: var(--hcn-color-success-base, #25935F) !important;
    border-color: var(--hcn-color-success-base, #25935F) !important;
}
.hcn-reg--v2 .hcn-help-pill:focus-visible {
    outline: 2px solid var(--hcn-focus-border, #B38F64) !important;
    outline-offset: 2px;
}

/* ================================================================== "Wat is een goede foto?"

   The dialog's markup and its open/close handler both exist and both work; what was missing is that
   this stylesheet never claimed `.hcn-dochelp` at all. With no rules the panel rendered as ordinary
   flow content at the very bottom of the page — title, close button and both comparisons all
   present, just not a modal. Same failure as `.hcn-reg__back` and the help pill: the V2 chrome
   refactor shipped components whose styles never followed them.
   ================================================================== */
.hcn-reg--v2 ~ .hcn-dochelp,
.hcn-dochelp {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: var(--hcn-space-4, 16px);
}
.hcn-dochelp[hidden] { display: none !important; }
.hcn-dochelp__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 28, 29, .55);
}
.hcn-dochelp__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: min(86vh, 900px);
    background: var(--hcn-color-surface, #fff);
    border-radius: var(--hcn-radius-lg, 16px);
    box-shadow: 0 24px 64px rgba(28, 28, 29, .28);
    overflow: hidden;
}
.hcn-dochelp__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hcn-space-3, 12px);
    padding: var(--hcn-space-5, 20px) var(--hcn-space-6, 24px);
    border-bottom: 1px solid var(--hcn-color-border-faint, #f0f1f3);
}
.hcn-dochelp__title {
    margin: 0;
    font-size: 1.15em;
    font-weight: 700;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-dochelp__title:focus-visible { outline: 2px solid var(--hcn-focus-border, #B38F64); outline-offset: 3px; }
/* The close control is a bare <button>, so the theme paints it a charcoal slab unless every visual
   property is stated. */
.hcn-dochelp__close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid var(--hcn-color-border, #d0d3d6) !important;
    border-radius: 50% !important;
    color: var(--hcn-color-heading, #1C1C1D) !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.hcn-dochelp__close svg { width: 18px; height: 18px; }
.hcn-dochelp__close:hover { border-color: var(--hcn-color-brand, #B38F64) !important; }
.hcn-dochelp__body {
    padding: var(--hcn-space-5, 20px) var(--hcn-space-6, 24px) var(--hcn-space-6, 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.hcn-dochelp__doc + .hcn-dochelp__doc {
    margin-top: var(--hcn-space-6, 24px);
    padding-top: var(--hcn-space-6, 24px);
    border-top: 1px solid var(--hcn-color-border-faint, #f0f1f3);
}
.hcn-dochelp__doc-title {
    margin: 0 0 var(--hcn-space-1, 4px);
    font-size: 1.02em;
    font-weight: 700;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-dochelp__doc-lead {
    margin: 0 0 var(--hcn-space-4, 16px);
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .92em;
    line-height: 1.55;
}
/* Good beside not-good: the pair is the explanation, so they stay side by side wherever two fit. */
.hcn-dochelp__examples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hcn-space-4, 16px);
}
.hcn-dochelp__example { margin: 0; min-width: 0; }
.hcn-dochelp__art {
    display: grid;
    place-items: center;
    padding: var(--hcn-space-3, 12px);
    background: var(--hcn-color-subtle-bg, #f6f7f7);
    border: 1px solid var(--hcn-color-border-faint, #f0f1f3);
    border-radius: var(--hcn-radius-md, 10px);
}
.hcn-dochelp__art svg { width: 100%; height: auto; display: block; }
.hcn-dochelp__verdict {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--hcn-space-2, 8px);
    font-size: .88em;
    font-weight: 700;
}
.hcn-dochelp__verdict svg { width: 15px; height: 15px; flex: 0 0 auto; }
.hcn-dochelp__verdict--good { color: var(--hcn-color-success, #1E7A4D); }
.hcn-dochelp__verdict--bad { color: var(--hcn-color-error, #B42318); }
.hcn-dochelp__why {
    display: block;
    margin-top: var(--hcn-space-1, 4px);
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .85em;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .hcn-dochelp { padding: 0; place-items: end stretch; }
    .hcn-dochelp__panel {
        width: 100%;
        max-height: 92vh;
        border-radius: var(--hcn-radius-lg, 16px) var(--hcn-radius-lg, 16px) 0 0;
    }
    .hcn-dochelp__head,
    .hcn-dochelp__body { padding-inline: var(--hcn-space-4, 16px); }
    /* Two illustrations at 390px would be 150px each — the point is what the picture shows, so they
       stack rather than shrink. */
    .hcn-dochelp__examples { grid-template-columns: minmax(0, 1fr); }
}

/* What is still missing, at the top of the step.

   It used to be a `.hcn-field__error` sentence wedged above the Verder button — the one place a
   pilgrim reaches only after scrolling past everything it refers to. As the first thing under the
   step's lead it has to carry its own weight, so it is a notice rather than a line of red text:
   a red hairline, a tinted surface, a mark, and wording that points DOWN the page. */
/* The notice sits INSIDE the shell's gutter, not across it.

   `.hcn-reg--v2 > *` gives every direct child `padding-inline: var(--hcn-reg-v2-pad)` — that is the
   shell's gutter, and for a heading or a card it is invisible because nothing there paints a box.
   This notice paints a border and a background, so as a direct child its frame spanned the full
   column while the words beside it started 40px further in. The wrapper takes the gutter; the notice
   paints within it and owns its own padding again. */
.hcn-reg--v2 .hcn-doc-alert-wrap { margin: var(--hcn-space-5, 20px) 0 0; }
.hcn-reg--v2 .hcn-doc-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--hcn-space-3, 12px);
    margin: 0;
    padding: var(--hcn-space-4, 16px) var(--hcn-space-4, 16px);
    border: 1px solid var(--hcn-color-error, #B42318);
    border-radius: var(--hcn-radius-md, 8px);
    background: var(--hcn-color-error-bg, #fdeceb);
    background: color-mix(in srgb, var(--hcn-color-error, #B42318) 8%, transparent);
    color: var(--hcn-color-error, #B42318);
    font-weight: 600;
    line-height: 1.5;
}
.hcn-reg--v2 .hcn-doc-alert__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
}
.hcn-reg--v2 .hcn-doc-alert__icon svg { width: 22px; height: 22px; display: block; }
.hcn-reg--v2 .hcn-doc-alert__text { min-width: 0; }

/* "Wat is een goede foto?" — a card that SHOWS what it opens

   Two earlier attempts failed for the same reason: they styled the WORDS. An underlined sentence
   was invisible; a tinted pill was visible but read as another navigation control, wearing the same
   #F4EEE5 shape as "Terug" while doing a completely different job. What makes someone open this is
   seeing that there is something to see — so the trigger carries two miniature examples, one
   accepted and one refused, and says what is inside. It is a white surface with a hairline: quieter
   than the gold primary, and unmistakably not the back button. */
/* The card sat 0px under the lead sentence and 24px above the group, so it read as part of the
   paragraph rather than as its own thing. Equal, generous space on both sides makes it a separate
   object between two blocks. */
.hcn-reg--v2 .hcn-doc-help { margin: var(--hcn-space-7, 28px) 0 var(--hcn-space-8, 32px); }
.hcn-reg--v2 .hcn-dochelp-teaser {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--hcn-space-4, 16px) !important;
    max-width: 100%;
    min-height: 64px !important;
    padding: 10px 18px 10px 14px !important;
    background: var(--hcn-color-surface, #fff) !important;
    border: 1px solid var(--hcn-color-border-soft, #e4e6e9) !important;
    border-radius: var(--hcn-radius-lg, 14px) !important;
    color: var(--hcn-color-heading, #1C1C1D) !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    /* A <button> does not wrap its text by default. Nothing in this stylesheet or the theme sets it
       — the computed `nowrap` comes from the element type itself — so at 390px the subtitle kept
       painting a single 255px line across a 161px column and straight over the arrow. The text
       column already shrinks correctly (`flex: 1 1 0`); it simply had no permission to wrap. */
    white-space: normal !important;
    box-shadow: 0 1px 2px rgba(28, 28, 29, .04) !important;
    cursor: pointer !important;
    transition: border-color .18s ease-out, box-shadow .2s ease-out, transform .2s ease-out;
}

/* The two examples, stacked like a pair of photographs laid down and fanned apart. */
.hcn-reg--v2 .hcn-dochelp-teaser__art {
    position: relative;
    flex: 0 0 auto;
    /* Wide enough that the pair reads as TWO documents. At 64px the accepted card covered 28px of
       the refused one, including its mark, and the picture said "a photo, approved" while the
       subtitle promised a comparison. 80px leaves a 12px overlap: still a fanned pair, both
       visible. */
    width: 80px;
    height: 44px;
}
.hcn-reg--v2 .hcn-dochelp-teaser__thumb {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 34px;
    border-radius: 7px;
    background: var(--hcn-color-subtle-bg, #f6f7f7);
    border: 1px solid var(--hcn-color-border-faint, #f0f1f3);
    transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.hcn-reg--v2 .hcn-dochelp-teaser__thumb svg { width: 30px; height: 22px; display: block; }
.hcn-reg--v2 .hcn-dochelp-teaser__thumb--bad {
    left: 0;
    top: 1px;
    color: var(--hcn-color-muted, #9aa0a6);
    transform: rotate(-9deg);
}
.hcn-reg--v2 .hcn-dochelp-teaser__thumb--good {
    right: 0;
    top: 5px;
    z-index: 1;
    color: var(--hcn-color-brand-strong, #8F6E46);
    background: var(--hcn-color-brand-soft, #F4EEE5);
    border-color: rgba(179, 143, 100, .35);
    transform: rotate(3deg);
}
/* The verdict is a mark, never colour on its own. */
.hcn-reg--v2 .hcn-dochelp-teaser__badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px solid var(--hcn-color-surface, #fff);
    color: #fff;
}
.hcn-reg--v2 .hcn-dochelp-teaser__badge svg { width: 9px; height: 9px; display: block; }
.hcn-reg--v2 .hcn-dochelp-teaser__badge--good { background: var(--hcn-color-success, #1E7A4D); }
/* The refused card lies UNDER the accepted one, so its mark goes on the far edge rather than the
   shared one — otherwise the only verdict on the card is the green tick. */
.hcn-reg--v2 .hcn-dochelp-teaser__badge--bad {
    right: auto;
    left: -5px;
    background: var(--hcn-color-error, #B42318);
}

/* flex: 1 1 0, not the flex-basis: auto default. With auto the two text lines keep their content
   width and, at 390px, run straight under the arrow. Claiming the leftover space instead makes
   them wrap, which is what a narrow card should do. */
.hcn-reg--v2 .hcn-dochelp-teaser__text { display: block; flex: 1 1 0; min-width: 0; }
.hcn-reg--v2 .hcn-dochelp-teaser__title {
    display: block;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-dochelp-teaser__go {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: var(--hcn-space-2, 8px);
    color: var(--hcn-color-brand-strong, #8F6E46);
    opacity: .6;
    transition: transform .24s cubic-bezier(.2, .7, .3, 1), opacity .18s ease-out;
}
.hcn-reg--v2 .hcn-dochelp-teaser__go svg { width: 17px; height: 17px; display: block; }

/* Under a pointer the pair fans open and the arrow leads — the card behaves like the drawer it is. */
.hcn-reg--v2 .hcn-dochelp-teaser:hover,
.hcn-reg--v2 .hcn-dochelp-teaser:focus-visible {
    border-color: var(--hcn-color-brand, #B38F64) !important;
    box-shadow: 0 6px 18px rgba(28, 28, 29, .08) !important;
    transform: translateY(-1px);
}
.hcn-reg--v2 .hcn-dochelp-teaser:hover .hcn-dochelp-teaser__thumb--bad,
.hcn-reg--v2 .hcn-dochelp-teaser:focus-visible .hcn-dochelp-teaser__thumb--bad { transform: rotate(-13deg) translateX(-3px); }
.hcn-reg--v2 .hcn-dochelp-teaser:hover .hcn-dochelp-teaser__thumb--good,
.hcn-reg--v2 .hcn-dochelp-teaser:focus-visible .hcn-dochelp-teaser__thumb--good { transform: rotate(5deg) translateX(3px) scale(1.04); }
.hcn-reg--v2 .hcn-dochelp-teaser:hover .hcn-dochelp-teaser__go,
.hcn-reg--v2 .hcn-dochelp-teaser:focus-visible .hcn-dochelp-teaser__go { transform: translateX(3px); opacity: 1; }
.hcn-reg--v2 .hcn-dochelp-teaser:active { transform: translateY(0); }
.hcn-reg--v2 .hcn-dochelp-teaser:focus-visible {
    outline: 2px solid var(--hcn-focus-border, #B38F64) !important;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .hcn-reg--v2 .hcn-dochelp-teaser { display: flex !important; width: 100%; gap: var(--hcn-space-3, 12px) !important; }
    /* A narrower fan buys the two text lines roughly a word each — worth more here than the extra
       12px of overlap the examples give up. */
    .hcn-reg--v2 .hcn-dochelp-teaser__art { width: 68px; }
    .hcn-reg--v2 .hcn-dochelp-teaser__thumb { width: 42px; height: 31px; }
    .hcn-reg--v2 .hcn-dochelp-teaser__thumb svg { width: 27px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .hcn-reg--v2 .hcn-dochelp-teaser,
    .hcn-reg--v2 .hcn-dochelp-teaser__thumb,
    .hcn-reg--v2 .hcn-dochelp-teaser__go { transition: none !important; }
    .hcn-reg--v2 .hcn-dochelp-teaser:hover { transform: none; }
}


/* ==========================================================================================
   Step 4A — Familieleden. People, not records.
   ------------------------------------------------------------------------------------------
   One person wears one card: an avatar, a name, one line of who they are, a pill saying where
   they stand, and one quiet control. The primary pilgrim and every companion use the SAME card,
   because on this screen they are the same kind of thing — someone who is travelling.

   Additive and V2-owned: every selector is new, scoped under `.hcn-reg--v2`, and nothing here
   restyles a shared element, a `.hcn-btn`, a table or anything R1 renders. Colour arrives from
   tokens.css; the hex after each `var()` is that token's own value, never a new brand colour.
   No left borders and no inset shadows — the house rules hold here too.
   ========================================================================================== */

.hcn-reg--v2 .hcn-v2-family { display: block; }

.hcn-reg--v2 .hcn-reg__section h2.hcn-v2-family__title {
    margin: 0 0 var(--hcn-space-2, 8px);
    font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2rem);
    line-height: 1.2;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-v2-family__lead {
    margin: 0 0 var(--hcn-space-6, 24px);
    max-width: 58ch;
    color: var(--hcn-color-muted, #5a5f66);
    line-height: 1.65;
}
.hcn-reg--v2 .hcn-reg__section h3.hcn-v2-family__subtitle {
    margin: var(--hcn-space-7, 28px) 0 var(--hcn-space-3, 12px);
    font-size: 1.05rem;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-v2-family__note {
    margin: var(--hcn-space-4, 16px) 0 0;
    max-width: 58ch;
    color: var(--hcn-color-muted, #5a5f66);
    line-height: 1.6;
}
.hcn-reg--v2 .hcn-v2-family__warning {
    margin: 0 0 var(--hcn-space-3, 12px);
    color: var(--hcn-color-danger, #B42318);
    line-height: 1.55;
}

/* ── the person card: a compact identity header, and what it discloses ─────────────────────

   The card is an ordinary <article>, not a <details>. It carries TWO controls on the right — one to
   look at what is saved, one to choose what to change — and a <summary> cannot host two independent
   buttons. So the row is a plain header, both controls are real buttons with aria-expanded and
   aria-controls, and the panels are siblings that the script shows and hides.

   Keep the collapsed card SHALLOW: a portrait, a name, one meta line, one pill. Everything else is
   behind the chevron. ------------------------------------------------------------------------- */
.hcn-reg--v2 .hcn-v2-person {
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-lg, 12px);
    background-color: var(--hcn-color-surface, #fff);
    overflow: hidden;
}
.hcn-reg--v2 .hcn-v2-person--primary {
    background-color: var(--hcn-color-subtle-bg, #f6f7f7);
    border-color: var(--hcn-color-border-soft, #e4e6e9);
}

/* The controls sit at the TOP right, not centred against the row: the row grows when a name wraps to
   two lines, and a vertically centred control cluster would then drift down away from the name it
   belongs to. `align-items: start` keeps them anchored where the reference puts them. */
.hcn-reg--v2 .hcn-v2-person__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--hcn-space-4, 16px);
    padding: var(--hcn-space-4, 16px);
}

/* ── the portrait: one size, one crop, whatever the original image was ───────────────────── */

/* A fixed square with `object-fit: cover`, so a tall passport photo and a wide one produce the same
   card height. The image is appended by the script over the initials, which stay underneath as the
   fallback — nothing is fetched from anywhere but HCN's own authorised preview call. */
.hcn-reg--v2 .hcn-v2-person__avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: var(--hcn-radius-md, 8px);
    background-color: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8F6E46);
    overflow: hidden;
    flex: none;
}
.hcn-reg--v2 .hcn-v2-person__avatar > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.hcn-reg--v2 .hcn-v2-person__initials { font-weight: 700; font-size: 1.15rem; letter-spacing: .5px; }
.hcn-reg--v2 .hcn-v2-person__glyph { width: 30px; height: 30px; }

/* Name, who they are, and where they stand — stacked, one reading column, like the reference. */
.hcn-reg--v2 .hcn-v2-person__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}
.hcn-reg--v2 .hcn-v2-person__name {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.3;
    color: var(--hcn-color-heading, #1C1C1D);
    overflow-wrap: anywhere;
}
.hcn-reg--v2 .hcn-v2-person__meta {
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .92rem;
    line-height: 1.45;
    font-weight: 400;
}
.hcn-reg--v2 .hcn-v2-person__sep { margin: 0 .35em; }

/* ── status pills: the colour only repeats what the words already say ────────────────────── */

.hcn-reg--v2 .hcn-v2-pill {
    display: inline-block;
    margin-top: 3px;
    padding: 4px 11px;
    border-radius: var(--hcn-radius-pill, 999px);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
}
.hcn-reg--v2 .hcn-v2-pill--role,
.hcn-reg--v2 .hcn-v2-pill--done {
    background-color: var(--hcn-color-success-bg, #e6f4ea);
    color: var(--hcn-color-success, #1E7A4D);
}
.hcn-reg--v2 .hcn-v2-pill--waiting {
    background-color: var(--hcn-color-warning-bg, #fff4d6);
    color: var(--hcn-color-warning, #8a6100);
}
.hcn-reg--v2 .hcn-v2-pill--open {
    background-color: var(--hcn-color-surface, #fff);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border, #d0d3d6);
    color: var(--hcn-color-muted, #5a5f66);
}

/* ── holding the controls against the theme ──────────────────────────────────────────────────
   Two separate things went wrong here, both caught by a live run rather than by any assertion.

   1. STATE. The active theme ships `.elementor-kit-92 button:hover, …:focus { background: <brand> }`
      at specificity 0,2,1, which beats a plain `.hcn-reg--v2 .hcn-v2-action` (0,2,0) — so the moment
      one of these buttons took focus the theme painted it solid and this flow's focus ring vanished
      underneath it. Every control therefore states its own hover and focus at 0,3,0.

   2. SHORTHAND. The theme sets `background-color`, a LONGHAND. Writing `background: var(--token, #hex)`
      here is a shorthand carrying a `var()`, which the engine cannot resolve until computed-value time;
      in this cascade the theme's longhand won it, and the add button rendered in the theme's dark
      instead of the brand green while the gold `Verder` beside it happened to survive. Every colour
      declaration in this block is therefore a LONGHAND — `background-color`, `border-color` — so the
      comparison is like for like and specificity decides it.

   Nothing global is touched and no `!important` is used: these are this flow's own controls, saying
   what they do in every state, in the same kind of declaration the theme used. ----------------- */
.hcn-reg--v2 .hcn-v2-iconbtn:hover,
.hcn-reg--v2 .hcn-v2-iconbtn:focus,
.hcn-reg--v2 .hcn-v2-choice:hover,
.hcn-reg--v2 .hcn-v2-choice:focus {
    background-color: var(--hcn-color-brand-soft, #F4EEE5);
    border-color: var(--hcn-color-brand, #B38F64);
    color: var(--hcn-color-heading, #1C1C1D);
}
/* The companion's two acts answer the same theme rule at 0,3,0, each in its own colour. */
.hcn-reg--v2 .hcn-v2-action--edit:hover,
.hcn-reg--v2 .hcn-v2-action--edit:focus {
    background-color: var(--hcn-color-success-base, #25935F);
    border-color: var(--hcn-color-success-base, #25935F);
    color: var(--hcn-color-on-dark, #ffffff);
}
.hcn-reg--v2 .hcn-v2-action--delete:hover,
.hcn-reg--v2 .hcn-v2-action--delete:focus {
    background-color: var(--hcn-color-error, #B42318);
    border-color: var(--hcn-color-error, #B42318);
    color: var(--hcn-color-danger-text, #ffffff);
}
/* The two real buttons keep their own fills in every state too. */
.hcn-reg--v2 .hcn-v2-btn--secondary:hover,
.hcn-reg--v2 .hcn-v2-btn--secondary:focus {
    background-color: var(--hcn-color-brand-soft, #F4EEE5);
    border-color: var(--hcn-color-brand, #B38F64);
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-v2-btn--primary:hover,
.hcn-reg--v2 .hcn-v2-btn--primary:focus {
    background-color: var(--hcn-color-heading, #1C1C1D);
    border-color: var(--hcn-color-heading, #1C1C1D);
    color: var(--hcn-white, #ffffff);
}

/* ── the two controls, and the panels they open ──────────────────────────────────────────── */

/* Side by side, 44px each so a thumb can hit either one, and far enough apart that nobody opens the
   edit chooser while reaching for the chevron. */
.hcn-reg--v2 .hcn-v2-person__controls {
    display: flex;
    align-items: center;
    gap: var(--hcn-space-2, 8px);
    flex: none;
}

.hcn-reg--v2 .hcn-v2-iconbtn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-md, 8px);
    background-color: var(--hcn-color-surface, #fff);
    color: var(--hcn-color-heading, #1C1C1D);
    font: inherit;
    cursor: pointer;
    flex: none;
    transition: border-color .16s ease, background-color .16s ease;
}
.hcn-reg--v2 .hcn-v2-iconbtn:focus-visible {
    outline: var(--hcn-focus-ring, 3px solid #B38F64);
    outline-offset: 2px;
}
.hcn-reg--v2 .hcn-v2-iconbtn > svg { width: 20px; height: 20px; transition: transform .16s ease; }
/* The chevron points down when the card is shut and up when it is open. The state lives on the CARD,
   set by the script beside `aria-expanded`, so one attribute drives both the icon and the panel. */
.hcn-reg--v2 .hcn-v2-person[data-v2-open="1"] .hcn-v2-iconbtn--chevron {
    border-color: var(--hcn-color-brand, #B38F64);
}
.hcn-reg--v2 .hcn-v2-person[data-v2-open="1"] .hcn-v2-iconbtn--chevron > svg { transform: rotate(180deg); }

/* The disclosed panel and the action menu are the card's own second block, divided from the header by
   a rule rather than by a gap — the reference reads as one card with two parts, not two cards. */
.hcn-reg--v2 .hcn-v2-person__panel,
.hcn-reg--v2 .hcn-v2-person__menu {
    margin: 0 var(--hcn-space-4, 16px) var(--hcn-space-4, 16px);
    padding-top: var(--hcn-space-4, 16px);
    border-top: 1px solid var(--hcn-color-border-soft, #e4e6e9);
}
.hcn-reg--v2 .hcn-v2-person__panel[hidden],
.hcn-reg--v2 .hcn-v2-person__menu[hidden] { display: none; }

/* ── the saved details: a grid of labelled values, never a table ──────────────────────────── */

/* TWO columns on desktop and tablet, one on a phone — §9's grid, exactly.
   `auto-fit` was tried first and is wrong here: the card is ~740px wide inside the shell, so it fitted
   THREE columns of 231px and broke "B — HCN maakt en beheert mijn Nusuk-account" over two lines. A
   fixed pair gives each value ~360px, which is what the reference reads like. */
.hcn-reg--v2 .hcn-v2-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hcn-space-4, 16px) var(--hcn-space-6, 24px);
}
/* The fold to one column is the phone breakpoint at the end of this block. No container query: this
   card only ever sits in the registration shell, and a @container rule with no `container-type`
   declared anywhere would never match — dead CSS pretending to be a safeguard. */
.hcn-reg--v2 .hcn-v2-details__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.hcn-reg--v2 .hcn-v2-details__label {
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .84rem;
    line-height: 1.35;
}
.hcn-reg--v2 .hcn-v2-details__value {
    color: var(--hcn-color-heading, #1C1C1D);
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.hcn-reg--v2 .hcn-v2-details__empty {
    margin: 0;
    color: var(--hcn-color-muted, #5a5f66);
    line-height: 1.6;
}

/* ── document chips: three things, drawn as three things ──────────────────────────────────────
   The document state used to be one sentence — "Paspoort: opgeslagen · Pasfoto: opgeslagen ·
   Verblijfsdocument: opgeslagen" — which is a line of text doing an object's job: three separate
   documents, each with its own state, run together into a string the reader has to parse. Each slot
   is its own chip now, and a STORED one is a button that opens the image HCN holds.

   The row spans both columns: three chips cannot sit in half a card without wrapping into a column
   of their own. ------------------------------------------------------------------------------- */
.hcn-reg--v2 .hcn-v2-details__item--docs { grid-column: 1 / -1; }

.hcn-reg--v2 .hcn-v2-doclist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hcn-space-2, 8px);
    margin-top: 2px;
}

.hcn-reg--v2 .hcn-v2-docchip {
    display: inline-flex;
    align-items: center;
    gap: var(--hcn-space-2, 8px);
    min-height: 40px;
    padding: 0 var(--hcn-space-3, 12px);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-pill, 999px);
    background-color: var(--hcn-color-surface, #fff);
    color: var(--hcn-color-heading, #1C1C1D);
    font: inherit;
    font-size: .92rem;
    line-height: 1.3;
}
.hcn-reg--v2 .hcn-v2-docchip__icon { width: 18px; height: 18px; flex: none; }
.hcn-reg--v2 .hcn-v2-docchip__label { font-weight: 600; }
.hcn-reg--v2 .hcn-v2-docchip__state { color: var(--hcn-color-muted, #5a5f66); font-weight: 400; }

/* Stored and openable: a button, and it says so with the eye rather than with a colour. */
.hcn-reg--v2 .hcn-v2-docchip--saved {
    cursor: pointer;
    border-color: var(--hcn-color-brand, #B38F64);
    color: var(--hcn-color-brand-strong, #8F6E46);
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.hcn-reg--v2 .hcn-v2-docchip--saved:hover,
.hcn-reg--v2 .hcn-v2-docchip--saved:focus {
    background-color: var(--hcn-color-brand-soft, #F4EEE5);
    border-color: var(--hcn-color-brand-strong, #8F6E46);
    color: var(--hcn-color-brand-strong, #8F6E46);
}
.hcn-reg--v2 .hcn-v2-docchip--saved:focus-visible {
    outline: var(--hcn-focus-ring, 3px solid #B38F64);
    outline-offset: 2px;
}
.hcn-reg--v2 .hcn-v2-docchip__eye { display: grid; place-items: center; flex: none; opacity: .75; }
.hcn-reg--v2 .hcn-v2-docchip__eye > svg { width: 17px; height: 17px; }
.hcn-reg--v2 .hcn-v2-docchip--saved:hover .hcn-v2-docchip__eye { opacity: 1; }

/* Stored, but not openable from this screen — a companion's, which the preview endpoint refuses by
   design. It states the slot and its state and offers nothing it cannot do. */
.hcn-reg--v2 .hcn-v2-docchip--stored { border-color: var(--hcn-color-border-soft, #e4e6e9); }
/* Still needed: quieter than the others, because it is an absence, not a warning. */
.hcn-reg--v2 .hcn-v2-docchip--missing {
    border-style: dashed;
    border-color: var(--hcn-color-border, #d0d3d6);
    color: var(--hcn-color-muted, #5a5f66);
}
.hcn-reg--v2 .hcn-v2-docchip--missing .hcn-v2-docchip__label { font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
    .hcn-reg--v2 .hcn-v2-docchip--saved { transition: none; }
}

/* The inline edit list inside the panel: the script-off route to the same four destinations. With the
   script running it is `hidden`, because the screen has ONE edit affordance and it is the pencil; the
   template's <noscript> block unhides it when there is no script to open the chooser with. */
.hcn-reg--v2 .hcn-v2-person__inlineedit[hidden] { display: none; }
.hcn-reg--v2 .hcn-v2-person__inlineedit {
    margin: var(--hcn-space-5, 20px) 0 0;
    padding-top: var(--hcn-space-4, 16px);
    border-top: 1px solid var(--hcn-color-border-soft, #e4e6e9);
}

/* ── the companion's two acts ─────────────────────────────────────────────────────────────────
   Two buttons side by side, each one word and one icon — not two stacked rows of title-and-note,
   which read as a settings list rather than as a choice between two acts.

   The colours are the ones V2 already assigns to these KINDS of act, not a new pair invented here:
   the green of the Hulp? button for the ordinary act, and the one destructive style every V2 delete
   wears — a red outline at rest that fills only under a pointer or a focus ring, so a delete never
   looks like the obvious thing to press. ----------------------------------------------------- */

.hcn-reg--v2 .hcn-v2-person__menu .hcn-reg__form { margin: 0; }

.hcn-reg--v2 .hcn-v2-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hcn-space-3, 12px);
}

.hcn-reg--v2 .hcn-v2-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hcn-space-2, 8px);
    width: 100%;
    min-height: var(--hcn-input-min-h, 48px);
    padding: 0 var(--hcn-space-4, 16px);
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-radius: var(--hcn-radius-md, 8px);
    font: inherit;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.hcn-reg--v2 .hcn-v2-action__icon { width: 19px; height: 19px; flex: none; }
.hcn-reg--v2 .hcn-v2-action__label { min-width: 0; }

/* Edit: the brand's green, filled — the same green and the same hover as the Hulp? button. */
.hcn-reg--v2 .hcn-v2-action--edit {
    background-color: var(--hcn-color-success, #1E7A4D);
    border-color: var(--hcn-color-success, #1E7A4D);
    color: var(--hcn-color-on-dark, #ffffff);
}
.hcn-reg--v2 .hcn-v2-action--edit:hover,
.hcn-reg--v2 .hcn-v2-action--edit:focus {
    background-color: var(--hcn-color-success-base, #25935F);
    border-color: var(--hcn-color-success-base, #25935F);
    color: var(--hcn-color-on-dark, #ffffff);
}
.hcn-reg--v2 .hcn-v2-action--edit:focus-visible {
    outline: 2px solid var(--hcn-focus-border, #B38F64);
    outline-offset: 2px;
}

/* Delete: V2's one destructive style, unchanged — outline at rest, fill on intent. */
.hcn-reg--v2 .hcn-v2-action--delete {
    background-color: var(--hcn-color-surface, #fff);
    border-color: var(--hcn-color-error, #B42318);
    color: var(--hcn-color-error, #B42318);
}
.hcn-reg--v2 .hcn-v2-action--delete:hover,
.hcn-reg--v2 .hcn-v2-action--delete:focus {
    background-color: var(--hcn-color-error, #B42318);
    border-color: var(--hcn-color-error, #B42318);
    color: var(--hcn-color-danger-text, #ffffff);
}
.hcn-reg--v2 .hcn-v2-action--delete:focus-visible {
    outline: 2px solid var(--hcn-color-error, #B42318);
    outline-offset: 2px;
}

/* ── the edit chooser: "Wat wilt u wijzigen?" ─────────────────────────────────────────────── */

/* The shell is the shared `.hcn-confirm` primitive — position, backdrop, centring and the [hidden]
   contract all come from it, unchanged. Only the list of destinations is new. */
.hcn-reg--v2 .hcn-v2-editchooser__panel {
    width: min(520px, 100%);
    text-align: left;
}
.hcn-reg--v2 .hcn-v2-editchooser__list {
    margin: var(--hcn-space-4, 16px) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--hcn-space-2, 8px);
}
.hcn-reg--v2 .hcn-v2-editchooser__actions { margin-top: var(--hcn-space-5, 20px); }

/* Title and description stack in the first column; the chevron sits beside BOTH of them.
   Named areas rather than two columns and three children — a live run put the chevron on a line of
   its own under the title, because the third child simply wrapped to the next implicit row. */
.hcn-reg--v2 .hcn-v2-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title go"
        "note  go";
    align-items: center;
    gap: 2px var(--hcn-space-3, 12px);
    width: 100%;
    min-height: var(--hcn-input-min-h, 48px);
    padding: var(--hcn-space-3, 12px) var(--hcn-space-4, 16px);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-md, 8px);
    background-color: var(--hcn-color-surface, #fff);
    color: var(--hcn-color-heading, #1C1C1D);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}
.hcn-reg--v2 .hcn-v2-choice:focus-visible {
    outline: var(--hcn-focus-ring, 3px solid #B38F64);
    outline-offset: 2px;
}
.hcn-reg--v2 .hcn-v2-choice__title { grid-area: title; font-weight: 700; line-height: 1.35; }
.hcn-reg--v2 .hcn-v2-choice__note {
    grid-area: note;
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .88rem;
    line-height: 1.4;
}
.hcn-reg--v2 .hcn-v2-choice__go {
    grid-area: go;
    display: grid;
    place-items: center;
    color: var(--hcn-color-muted, #5a5f66);
}
.hcn-reg--v2 .hcn-v2-choice__go > svg { width: 18px; height: 18px; }

.hcn-reg--v2 .hcn-v2-person__edithint {
    margin: 0 0 var(--hcn-space-3, 12px);
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .92rem;
    line-height: 1.55;
}
.hcn-reg--v2 .hcn-v2-person__editlist {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap;
    gap: var(--hcn-space-2, 8px);
}
.hcn-reg--v2 .hcn-v2-person__panel .hcn-reg__form { margin: 0; }

/* A destination inside a disclosure is a link in weight, a button in mechanism. */
.hcn-reg--v2 .hcn-v2-link {
    display: inline-flex; align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--hcn-color-brand-strong, #8F6E46);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.hcn-reg--v2 .hcn-v2-link:hover { color: var(--hcn-color-heading, #1C1C1D); }
.hcn-reg--v2 .hcn-v2-link:focus-visible {
    outline: var(--hcn-focus-ring, 3px solid #B38F64);
    outline-offset: 3px;
    border-radius: var(--hcn-radius-sm, 6px);
}
.hcn-reg--v2 .hcn-v2-link--quiet { color: var(--hcn-color-muted, #5a5f66); font-weight: 600; }
.hcn-reg--v2 .hcn-v2-link--quiet:hover { color: var(--hcn-color-danger, #B42318); }

@media (prefers-reduced-motion: reduce) {
    .hcn-reg--v2 .hcn-v2-iconbtn,
    .hcn-reg--v2 .hcn-v2-iconbtn > svg,
    .hcn-reg--v2 .hcn-v2-action,
    .hcn-reg--v2 .hcn-v2-btn--add,
    .hcn-reg--v2 .hcn-v2-choice { transition: none; }
}

/* ── the list of companions ──────────────────────────────────────────────────────────────── */

.hcn-reg--v2 .hcn-v2-people {
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: var(--hcn-space-3, 12px);
}
.hcn-reg--v2 .hcn-v2-people__item { margin: 0; }

/* ── add: secondary, with the limit beside it ────────────────────────────────────────────── */

/* It now follows the people it adds to, so its space belongs above it. */
.hcn-reg--v2 .hcn-v2-family__add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hcn-space-3, 12px) var(--hcn-space-4, 16px);
    margin-top: var(--hcn-space-5, 20px);
}
.hcn-reg--v2 .hcn-v2-family__add .hcn-reg__form { margin: 0; }
.hcn-reg--v2 .hcn-v2-family__count {
    margin: 0;
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .92rem;
}

/* ── buttons: one primary, one secondary, and they do not look alike ─────────────────────── */

.hcn-reg--v2 .hcn-v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hcn-space-2, 8px);
    min-height: var(--hcn-input-min-h, 48px);
    padding: 0 var(--hcn-space-6, 24px);
    border-radius: var(--hcn-radius-md, 8px);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.hcn-reg--v2 .hcn-v2-btn:focus-visible {
    outline: var(--hcn-focus-ring, 3px solid #B38F64);
    outline-offset: 3px;
}
.hcn-reg--v2 .hcn-v2-btn--secondary {
    background-color: var(--hcn-color-surface, #fff);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border, #d0d3d6);
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-v2-btn__plus { font-size: 1.15em; line-height: 1; }

/* Add a family member: the brand's green, filled. Still SECONDARY to `Verder` — that one is gold and
   spans the whole column, this one is green and only as wide as its words — so the page keeps one
   dominant action while the act of adding reads as an act rather than as an outline. */
.hcn-reg--v2 .hcn-v2-btn--add {
    background-color: var(--hcn-color-success-base, #25935F);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-success-base, #25935F);
    color: var(--hcn-color-on-dark, #ffffff);
}
.hcn-reg--v2 .hcn-v2-btn--add:hover,
.hcn-reg--v2 .hcn-v2-btn--add:focus {
    background-color: var(--hcn-color-success, #1E7A4D);
    border-color: var(--hcn-color-success, #1E7A4D);
    color: var(--hcn-color-on-dark, #ffffff);
}
.hcn-reg--v2 .hcn-v2-btn--add:focus-visible {
    outline: 2px solid var(--hcn-focus-border, #B38F64);
    outline-offset: 2px;
}
/* The script-off edit list wears the secondary button, one size down: four of them sit in a row
   inside the card, where a full-height button each would read as four calls to action. */
.hcn-reg--v2 .hcn-v2-btn--compact {
    min-height: 40px;
    padding: 0 var(--hcn-space-4, 16px);
    font-size: .94rem;
}

.hcn-reg--v2 .hcn-v2-btn--primary {
    width: 100%;
    background-color: var(--hcn-color-brand-strong, #8F6E46);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-brand-strong, #8F6E46);
    color: var(--hcn-white, #ffffff);
    font-size: 1.02rem;
}
.hcn-reg--v2 .hcn-v2-advance { margin: var(--hcn-space-7, 28px) 0 0; }
/* ── Familieleden: the submission at the foot of the step (2026-10-20) ───────────────────────────── */
.hcn-reg--v2 .hcn-v2-submit .hcn-v2-checkout__total { margin-top: 0; padding-left: 0; padding-right: 0; border-top-width: 0; }
.hcn-reg--v2 .hcn-v2-submit .hcn-v2-checkout__tick { margin-top: var(--hcn-space-4, 16px); }
/* The terms link: the gold TEXT token (4.68:1 on white), underlined — measured, it rendered the UA blue. */
.hcn-reg--v2 .hcn-v2-submit .hcn-v2-checkout__tick a { color: var(--hcn-color-brand-strong, #8F6E46); text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hcn-reg--v2 .hcn-v2-submit .hcn-v2-checkout__tick a:hover { color: var(--hcn-color-heading, #1C1C1D); }
.hcn-reg--v2 .hcn-v2-submit__issuelist { margin: var(--hcn-space-2, 8px) 0 0; padding: 0; list-style: none; }
.hcn-reg--v2 .hcn-v2-submit__issue { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hcn-space-2, 8px) var(--hcn-space-3, 12px); padding: var(--hcn-space-2, 8px) 0; }
.hcn-reg--v2 .hcn-v2-submit__issue + .hcn-v2-submit__issue { border-top: 1px solid var(--hcn-color-brand-soft, #F4EEE5); }
.hcn-reg--v2 .hcn-v2-submit__fix { margin: 0; }


@media (prefers-reduced-motion: reduce) {
    .hcn-reg--v2 .hcn-v2-btn { transition: none; }
}

/* ── the quiet reassurance under the primary action, and nothing to click ────────────────── */

.hcn-reg--v2 .hcn-v2-later {
    margin: var(--hcn-space-4, 16px) 0 0;
    text-align: center;
    line-height: 1.5;
}
.hcn-reg--v2 .hcn-v2-later__title {
    display: block;
    font-weight: 700;
    color: var(--hcn-color-brand-strong, #8F6E46);
}
.hcn-reg--v2 .hcn-v2-later__note {
    display: block;
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .92rem;
}

/* ── HCN's own diagnostics, outside the pilgrim's card and marked as such ────────────────── */

.hcn-v2-staff {
    max-width: var(--hcn-registration-max-width, 1120px);
    margin: var(--hcn-space-6, 24px) auto 0;
    padding: var(--hcn-space-4, 16px);
    border: 1px dashed var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-lg, 12px);
    background-color: var(--hcn-color-subtle-bg, #f6f7f7);
}
.hcn-v2-staff > .hcn-reg__section { margin: 0; }

/* ── narrow: the card folds, the primary action stays whole ──────────────────────────────── */

@media (max-width: 640px) {
    .hcn-reg--v2 .hcn-v2-person__row {
        gap: var(--hcn-space-3, 12px);
        padding: var(--hcn-space-3, 12px);
    }
    /* Still a real portrait, still the same crop — just small enough that the name keeps its width at
       390px, where the two controls and the avatar are already 150px of the row. */
    .hcn-reg--v2 .hcn-v2-person__avatar { width: 58px; height: 58px; }
    .hcn-reg--v2 .hcn-v2-person__initials { font-size: 1.02rem; }
    .hcn-reg--v2 .hcn-v2-person__glyph { width: 26px; height: 26px; }
    .hcn-reg--v2 .hcn-v2-person__controls { gap: 6px; }
    .hcn-reg--v2 .hcn-v2-iconbtn { width: 40px; height: 40px; }
    .hcn-reg--v2 .hcn-v2-person__panel,
    .hcn-reg--v2 .hcn-v2-person__menu { margin: 0 var(--hcn-space-3, 12px) var(--hcn-space-3, 12px); }
    /* One column, and the labels stay above their values: a two-column grid at this width turns every
       value into a two-word column. */
    .hcn-reg--v2 .hcn-v2-details { grid-template-columns: minmax(0, 1fr); gap: var(--hcn-space-3, 12px); }
    .hcn-reg--v2 .hcn-v2-family__add { align-items: stretch; flex-direction: column; }
    .hcn-reg--v2 .hcn-v2-family__add .hcn-v2-btn--add { width: 100%; }
    .hcn-reg--v2 .hcn-v2-person__editlist { flex-direction: column; gap: var(--hcn-space-2, 8px); }
    .hcn-reg--v2 .hcn-v2-person__editlist .hcn-v2-btn--compact { width: 100%; }
    .hcn-reg--v2 .hcn-v2-actions { grid-template-columns: minmax(0, 1fr); gap: var(--hcn-space-2, 8px); }
    .hcn-reg--v2 .hcn-v2-doclist { gap: 6px; }
    .hcn-reg--v2 .hcn-v2-docchip { font-size: .88rem; padding: 0 10px; }
    .hcn-reg--v2 .hcn-v2-editchooser__actions .hcn-v2-btn--secondary { width: 100%; }
}

/* ── "Nog niet compleet": what Verder says when it cannot go forward ───────────────────────────
   The button no longer disappears while a family member is unfinished — a control that vanishes
   teaches nobody what to do — so it opens this instead. One row per unfinished person: who they
   are, where they stand, and the two acts that resolve it, which are their own card's own posts.
   The shell is the shared `.hcn-confirm` primitive, like the edit chooser. ------------------- */

.hcn-reg--v2 .hcn-v2-incomplete__panel {
    width: min(620px, 100%);
    text-align: left;
}
.hcn-reg--v2 .hcn-v2-incomplete__list {
    margin: var(--hcn-space-4, 16px) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--hcn-space-3, 12px);
}
.hcn-reg--v2 .hcn-v2-incomplete__item {
    display: grid;
    gap: var(--hcn-space-3, 12px);
    padding: var(--hcn-space-4, 16px);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-md, 8px);
    background-color: var(--hcn-color-subtle-bg, #f6f7f7);
}
.hcn-reg--v2 .hcn-v2-incomplete__who { display: block; min-width: 0; }
.hcn-reg--v2 .hcn-v2-incomplete__name {
    display: block;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hcn-color-heading, #1C1C1D);
    overflow-wrap: anywhere;
}
.hcn-reg--v2 .hcn-v2-incomplete__meta {
    display: block;
    margin-top: 2px;
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .9rem;
    line-height: 1.4;
}
/* What is actually missing, in that person's own terms — the sentence that makes the dialog useful
   rather than just a list of names. */
.hcn-reg--v2 .hcn-v2-incomplete__next {
    display: block;
    margin-top: var(--hcn-space-2, 8px);
    color: var(--hcn-color-heading, #1C1C1D);
    font-size: .92rem;
    line-height: 1.45;
}
.hcn-reg--v2 .hcn-v2-incomplete__acts { display: grid; }
.hcn-reg--v2 .hcn-v2-incomplete__actions { margin-top: var(--hcn-space-5, 20px); }

@media (max-width: 640px) {
    .hcn-reg--v2 .hcn-v2-incomplete__panel { width: 100%; }
    .hcn-reg--v2 .hcn-v2-incomplete__actions .hcn-v2-btn--secondary { width: 100%; }
}

/* ── who this screen is about ─────────────────────────────────────────────────────────────────
   A companion screen has to say whose data it is showing. That used to be a third grey paragraph
   under the lead, where it read as more instructions; it is a chip now, so the relationship is an
   attribute of the screen rather than another sentence to wade through. ---------------------- */
.hcn-reg--v2 .hcn-v2-whochip {
    display: inline-flex;
    align-items: center;
    margin: 0 0 var(--hcn-space-5, 20px);
    padding: 5px 13px;
    border-radius: var(--hcn-radius-pill, 999px);
    background-color: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8F6E46);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
}
/* The review's edit row: three destinations, as a wrapping row of compact secondary buttons rather
   than three full-weight ones stacked down the page. */
.hcn-reg--v2 .hcn-v2-editrow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hcn-space-2, 8px);
}
@media (max-width: 640px) {
    .hcn-reg--v2 .hcn-v2-editrow { flex-direction: column; }
    .hcn-reg--v2 .hcn-v2-editrow .hcn-v2-btn--compact { width: 100%; }
}
/* What a removal from the dialog will cost, beside the button that does it — so the confirmation the
   server requires is read in the same place it is given. */
.hcn-reg--v2 .hcn-v2-incomplete__warn {
    display: block;
    color: var(--hcn-color-error, #B42318);
    font-size: .88rem;
    line-height: 1.45;
}


/* ==========================================================================================
   Step 5 — the CHECKOUT.
   ------------------------------------------------------------------------------------------
   This screen is not a step in a form, so it does not wear the form's furniture. `.hcn-reg--checkout`
   collapses the two-column shell to one, which is what lets the checkout use the 264px the progress
   rail held — and it is a MODIFIER on the Step 5 wrapper, so Steps 1-4 keep their rail untouched.

   The screen this replaces was four equal cards with four equal "Wijzigen" buttons and a 24px total:
   nothing led, and the one number a person is about to act on was the same size as a label. Here the
   total is the largest thing on the page and the button under it is the only filled control.

   Every colour is a LONGHAND. The theme sets `background-color`, a longhand, and a `background:`
   shorthand carrying a `var()` loses to it whatever the specificity — the bug that once rendered this
   flow's green button in the theme's near-black. Charcoals are the house tokens, not new hex.
   ========================================================================================== */

/* --- the shell, without its rail --- */

.hcn-reg--v2.hcn-reg--checkout,
.hcn-reg--v2.hcn-reg--confirmation { grid-template-columns: minmax(0, 1fr); }

.hcn-reg--v2.hcn-reg--checkout > *:not(.hcn-note):not(.hcn-reg__topbar),
.hcn-reg--v2.hcn-reg--confirmation > *:not(.hcn-note):not(.hcn-reg__topbar) {
    grid-column: 1;
    padding-inline: var(--hcn-reg-v2-pad);
}

/* One section gap under the topbar. The help row that used to sit here is not rendered at all, so
   nothing is being collapsed or pulled up — the band simply is not generated. */
.hcn-reg--v2.hcn-reg--checkout > .hcn-reg__topbar + *,
.hcn-reg--v2.hcn-reg--confirmation > .hcn-reg__topbar + * { padding-top: var(--hcn-space-5, 20px); }



/* --- the payment-stage header --- */

.hcn-reg--v2 .hcn-v2-checkout__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--hcn-space-3, 12px);
    margin-bottom: var(--hcn-space-5, 20px);
}

.hcn-reg--v2 .hcn-v2-checkout__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--hcn-radius-pill, 999px);
    background-color: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8F6E46);
}

.hcn-reg--v2 .hcn-v2-checkout__mark svg { width: 19px; height: 19px; }

.hcn-reg--v2 .hcn-v2-checkout__headtext { min-width: 0; }

.hcn-reg--v2 .hcn-v2-checkout__title {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--hcn-color-heading, #1C1C1D);
}

.hcn-reg--v2 .hcn-v2-checkout__season {
    margin: 4px 0 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--hcn-color-brand-strong, #8F6E46);
}

.hcn-reg--v2 .hcn-v2-checkout__lead {
    margin: 6px 0 0;
    font-size: .98rem;
    line-height: 1.5;
    color: var(--hcn-color-muted, #5a5f66);
}

/* --- the blocked state --- */

.hcn-reg--v2 .hcn-v2-checkout__blocked {
    margin-bottom: var(--hcn-space-5, 20px);
    padding: var(--hcn-space-4, 16px) var(--hcn-space-5, 20px);
    border-radius: var(--hcn-radius-lg, 14px);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-error, #B42318);
    background-color: var(--hcn-color-error-bg, #fdeceb);
    color: var(--hcn-color-error, #B42318);
}

.hcn-reg--v2 .hcn-v2-checkout__blockedtitle {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.hcn-reg--v2 .hcn-v2-checkout__issues {
    list-style: none;
    margin: var(--hcn-space-2, 8px) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--hcn-color-error, #B42318);
}

.hcn-reg--v2 .hcn-v2-checkout__blockedactions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hcn-space-2, 8px);
    margin-top: var(--hcn-space-2, 8px);
}

/* --- the two columns --- */

.hcn-reg--v2 .hcn-v2-checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
    gap: var(--hcn-space-6, 24px);
    align-items: start;
}

.hcn-reg--v2 .hcn-v2-checkout__main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.hcn-reg--v2 .hcn-v2-checkout__block {
    padding: 18px var(--hcn-space-5, 20px);
    border-radius: var(--hcn-radius-lg, 14px);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border-soft, #e4e6e9);
    background-color: var(--hcn-white, #fff);
}

/* The WhatsApp line is context, not a commitment, so it does not wear a full card's weight. */
.hcn-reg--v2 .hcn-v2-checkout__block--quiet {
    border-color: transparent;
    background-color: var(--hcn-color-subtle-bg, #f6f7f7);
}

.hcn-reg--v2 .hcn-v2-checkout__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hcn-space-3, 12px);
    /* The pencil is taller than the heading, so the row centres on it rather than on a baseline. */
    align-items: center;
    min-height: 38px;
    margin-bottom: var(--hcn-space-2, 8px);
}

.hcn-reg--v2 .hcn-v2-checkout__blocktitle {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hcn-color-heading, #1C1C1D);
}

.hcn-reg--v2 .hcn-v2-checkout__block--quiet .hcn-v2-checkout__blocktitle { margin-bottom: var(--hcn-space-2, 8px); }

/* "Wijzigen" is a link in weight and a button in substance: the destination is the server's. */
.hcn-reg--v2 .hcn-v2-checkout__editform { margin: 0; }

/*
 * A pencil, square and quiet. Three underlined "Wijzigen" links down the left column were the loudest
 * thing on a page whose only real action is the payment; an edit affordance on a summary has to be
 * findable, not announced. The whole of its meaning is in `aria-label`.
 */
.hcn-reg--v2 .hcn-v2-checkout__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border-soft, #e4e6e9);
    border-radius: var(--hcn-radius-md, 10px);
    background-color: transparent;
    color: var(--hcn-color-brand-strong, #8F6E46);
    cursor: pointer;
}

.hcn-reg--v2 .hcn-v2-checkout__edit svg { width: 17px; height: 17px; }

.hcn-reg--v2 .hcn-v2-checkout__edit:hover,
.hcn-reg--v2 .hcn-v2-checkout__edit:focus-visible {
    background-color: var(--hcn-color-brand-soft, #F4EEE5);
    border-color: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8F6E46);
}

.hcn-reg--v2 .hcn-v2-checkout__edit:focus-visible {
    outline: 2px solid var(--hcn-focus-border, #8F6E46);
    outline-offset: 2px;
}

/* --- the people --- */

.hcn-reg--v2 .hcn-v2-checkout__count {
    margin: 0 0 var(--hcn-space-3, 12px);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--hcn-color-heading, #1C1C1D);
}

.hcn-reg--v2 .hcn-v2-checkout__people {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*
 * The `hidden` attribute is only a UA `display: none`, and the `display: flex` above outranks it — so
 * the collapsed panel rendered anyway and a party of four showed four people AND a "Bekijk nog 1
 * pelgrim" button. This restores what `hidden` is supposed to mean. The `<noscript>` block reverses it
 * with `!important`, so a scriptless visitor still sees everyone.
 */
.hcn-reg--v2 .hcn-v2-checkout__people[hidden] { display: none; }

.hcn-reg--v2 .hcn-v2-checkout__person {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--hcn-space-3, 12px);
}

/*
 * One cropped square, whatever the stored image was, so a row never changes height when a photo
 * arrives. The initials sit underneath and the image covers them; if the fetch answers with nothing,
 * the initials are simply what stays.
 */
.hcn-reg--v2 .hcn-v2-checkout__portrait {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 11px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border-soft, #e4e6e9);
    background-color: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8F6E46);
}

/*
 * `center top`, not `center`: an identity portrait frames the head in the upper half, so a centre crop
 * of one takes chin and shoulders. A soft square keeps it reading as a document photo — the circle a
 * social avatar would use is wrong for a passport portrait, and so is a drop shadow.
 */
.hcn-reg--v2 .hcn-v2-checkout__portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.hcn-reg--v2 .hcn-v2-checkout__initials {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.hcn-reg--v2 .hcn-v2-checkout__glyph { width: 26px; height: 26px; }

.hcn-reg--v2 .hcn-v2-checkout__persontext { min-width: 0; }

.hcn-reg--v2 .hcn-v2-checkout__personname {
    display: block;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hcn-color-heading, #1C1C1D);
    overflow-wrap: anywhere;
}

.hcn-reg--v2 .hcn-v2-checkout__personrole {
    display: block;
    margin-top: 2px;
    font-size: .88rem;
    line-height: 1.35;
    color: var(--hcn-color-muted, #5a5f66);
    overflow-wrap: anywhere;
}

/* --- the disclosure for a party larger than three --- */

.hcn-reg--v2 .hcn-v2-checkout__people--extra { margin-top: 10px; }

/*
 * A mark, not a button with a caption.
 *
 * Captioned, this control was a filled slab the width of a name and the eye read it as a fifth person
 * in the list. Icon-only it reads as what it is — the end of the list, with more behind it. The words
 * are not lost: they are the button's accessible name, swapped by the script when it opens. Round,
 * 40px, centred under the rows, so it is a target rather than a glyph.
 */
.hcn-reg--v2 .hcn-v2-checkout__more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: var(--hcn-space-3, 12px) auto 0;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border-soft, #e4e6e9);
    border-radius: var(--hcn-radius-pill, 999px);
    background-color: #fff;
    color: var(--hcn-color-brand-strong, #8F6E46);
    line-height: 1;
    cursor: pointer;
}

.hcn-reg--v2 .hcn-v2-checkout__more:hover,
.hcn-reg--v2 .hcn-v2-checkout__more:focus-visible {
    background-color: var(--hcn-color-brand-soft, #F4EEE5);
    border-color: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8F6E46);
}

.hcn-reg--v2 .hcn-v2-checkout__more svg { width: 18px; height: 18px; transition: transform .18s ease-out; }

.hcn-reg--v2 .hcn-v2-checkout__more[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .hcn-reg--v2 .hcn-v2-checkout__more svg { transition: none; }
}

/* --- the service, as a code and a sentence --- */

.hcn-reg--v2 .hcn-v2-checkout__service {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--hcn-space-3, 12px);
}

/* The catalog's own code, set as a mark rather than glued to the front of the sentence. */
.hcn-reg--v2 .hcn-v2-checkout__servicecode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--hcn-radius-md, 10px);
    background-color: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8F6E46);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.hcn-reg--v2 .hcn-v2-checkout__servicebody { min-width: 0; }

.hcn-reg--v2 .hcn-v2-checkout__servicename {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-wrap: balance;
    color: var(--hcn-color-heading, #1C1C1D);
}

.hcn-reg--v2 .hcn-v2-checkout__servicepartner {
    margin: var(--hcn-space-2, 8px) 0 0;
    font-weight: 600;
    line-height: 1.4;
    color: var(--hcn-color-text, #2D2E2F);
}

.hcn-reg--v2 .hcn-v2-checkout__servicepartner .hcn-v2-checkout__factlabel { font-weight: 400; }

/* --- labelled facts --- */

.hcn-reg--v2 .hcn-v2-checkout__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--hcn-space-3, 12px) var(--hcn-space-4, 16px);
}

.hcn-reg--v2 .hcn-v2-checkout__fact { min-width: 0; }

/* An e-mail address and a service name have no break points of their own; they get the whole row. */
.hcn-reg--v2 .hcn-v2-checkout__fact--wide { grid-column: 1 / -1; }

.hcn-reg--v2 .hcn-v2-checkout__factlabel {
    display: block;
    font-size: .8rem;
    color: var(--hcn-color-muted, #5a5f66);
}

.hcn-reg--v2 .hcn-v2-checkout__factvalue {
    display: block;
    font-weight: 600;
    color: var(--hcn-color-text, #2D2E2F);
    overflow-wrap: anywhere;
}

.hcn-reg--v2 .hcn-v2-checkout__note {
    margin: var(--hcn-space-3, 12px) 0 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--hcn-color-muted, #5a5f66);
}

/* --- the order summary --- */

.hcn-reg--v2 .hcn-v2-checkout__aside { min-width: 0; }

@media (min-width: 1200px) {
    .hcn-reg--v2 .hcn-v2-checkout__aside {
        position: sticky;
        top: var(--hcn-space-5, 20px);
    }
}

/*
 * The order panel carries the only colour on this screen, and it is the house brand, not a new one.
 *
 * Flat #f6f7f7 made the panel read as a disabled area next to a brand-coloured CTA sitting inside it.
 * The surface now warms from the brand tint at the top into white, and the two order lines sit on
 * white tiles so the figures separate from the field they are printed on instead of floating in it.
 *
 * No capping rule across the top: it read as a seam, and the tint alone already says "this panel is
 * the brand's". The colour is the wash, nothing else.
 */
.hcn-reg--v2 .hcn-v2-checkout__summary {
    position: relative;
    overflow: hidden;
    padding: var(--hcn-space-5, 20px);
    border-radius: var(--hcn-radius-lg, 14px);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-brand-soft, #F4EEE5);
    background-color: #fff;
    background-image: linear-gradient(180deg, var(--hcn-color-brand-soft, #F4EEE5) 0, rgba(255, 255, 255, 0) 150px);
}

.hcn-reg--v2 .hcn-v2-checkout__summary .hcn-v2-checkout__blocktitle {
    color: var(--hcn-color-brand-strong, #8F6E46);
    letter-spacing: .01em;
}

.hcn-reg--v2 .hcn-v2-checkout__order {
    margin: var(--hcn-space-4, 16px) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--hcn-space-2, 8px);
}

.hcn-reg--v2 .hcn-v2-checkout__orderrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hcn-space-3, 12px);
    padding: 10px 12px;
    border-radius: var(--hcn-radius-md, 10px);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border-soft, #e4e6e9);
    background-color: #fff;
}

.hcn-reg--v2 .hcn-v2-checkout__orderrow dt {
    margin: 0;
    /* The label keeps its line; the VALUE takes what is left and wraps. Measured: without this the
       panel squeezed "HCN-service" into two lines at 1440 and again at 390, which reads as a defect
       rather than as a label. */
    flex: none;
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hcn-color-muted, #5a5f66);
}

.hcn-reg--v2 .hcn-v2-checkout__orderrow dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    color: var(--hcn-color-heading, #1C1C1D);
    overflow-wrap: anywhere;
}

/*
 * A row whose value is a sentence stacks. Right-aligned in a 340px column the service name broke after
 * "HCN-" and read as two fragments; label over value, set left, it reads as what it is.
 */
.hcn-reg--v2 .hcn-v2-checkout__orderrow--stack {
    display: block;
}

.hcn-reg--v2 .hcn-v2-checkout__orderrow--stack dd {
    margin-top: 4px;
    text-align: left;
    line-height: 1.4;
    text-wrap: balance;
}

/* A count is a figure, not a sentence: it is set as one chip so the eye finds it without reading. */
.hcn-reg--v2 .hcn-v2-checkout__orderrow dd[data-v2-step5-pilgrims] {
    flex: none;
    min-width: 32px;
    padding: 3px 11px;
    border-radius: var(--hcn-radius-pill, 999px);
    text-align: center;
    font-variant-numeric: tabular-nums;
    background-color: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8F6E46);
}

/* The one number the pilgrim is about to act on, and the largest thing on the page. */
.hcn-reg--v2 .hcn-v2-checkout__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hcn-space-3, 12px);
    margin: var(--hcn-space-4, 16px) 0 0;
    padding: var(--hcn-space-4, 16px) 12px 0;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--hcn-color-brand-soft, #F4EEE5);
}

.hcn-reg--v2 .hcn-v2-checkout__totallabel {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--hcn-color-heading, #1C1C1D);
}

.hcn-reg--v2 .hcn-v2-checkout__totalvalue {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-align: right;
    /* Measured 5.1:1 on white — AA at any size, and it ties the amount to the button that charges it. */
    color: var(--hcn-color-brand-strong, #8F6E46);
    overflow-wrap: anywhere;
}

.hcn-reg--v2 .hcn-v2-checkout__submit { margin: var(--hcn-space-5, 20px) 0 0; }

/* The box hangs in the margin and the sentence is ONE inline flow — not a grid, which would make the
   link its own item and break the sentence into stacked fragments. */
.hcn-reg--v2 .hcn-v2-checkout__tick { margin: 0 0 var(--hcn-space-4, 16px); }

.hcn-reg--v2 .hcn-v2-checkout__tick label {
    display: block;
    position: relative;
    /* Padding rather than a min-height: the box has to stay on the FIRST line when the sentence wraps,
       and centring a 44px row would drop it to the middle of two. One line measures 46px this way. */
    padding: 12px 0 12px 30px;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--hcn-color-text, #2D2E2F);
    cursor: pointer;
}

.hcn-reg--v2 .hcn-v2-checkout__tick input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 13px;
    width: 20px;
    height: 20px;
    margin: 0;
}

/* The only filled control on the screen. Longhands, and its own hover and focus at 0,3,0 so the
   theme's `.elementor-kit-NN button:hover` (0,2,1) cannot take it. */
.hcn-reg--v2 .hcn-v2-checkout__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--hcn-input-min-h, 48px);
    padding: 12px 20px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-brand-strong, #8F6E46);
    border-radius: var(--hcn-radius-md, 10px);
    background-color: var(--hcn-color-brand-strong, #8F6E46);
    color: var(--hcn-color-on-dark, #fff);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}

.hcn-reg--v2 .hcn-v2-checkout__cta:hover,
.hcn-reg--v2 .hcn-v2-checkout__cta:focus-visible {
    background-color: #7d6039;
    border-color: #7d6039;
    color: var(--hcn-color-on-dark, #fff);
}

.hcn-reg--v2 .hcn-v2-checkout__cta:focus-visible {
    outline: 2px solid var(--hcn-color-heading, #1C1C1D);
    outline-offset: 2px;
}

.hcn-reg--v2 .hcn-v2-checkout__assurance {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 6px;
    margin: var(--hcn-space-3, 12px) 0 0;
    font-size: .85rem;
    line-height: 1.45;
    text-align: center;
    color: var(--hcn-color-muted, #5a5f66);
}

.hcn-reg--v2 .hcn-v2-checkout__assurance svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* --- navigation and diagnostics, both deliberately quiet --- */

/* Back is navigation, not an action. It does not compete with the one filled control on the page. */
.hcn-reg--v2.hcn-reg--checkout .hcn-reg__backform { margin-top: var(--hcn-space-5, 20px); }

.hcn-reg--v2.hcn-reg--checkout .hcn-reg__back {
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--hcn-radius-md, 10px);
    background-color: transparent;
    color: var(--hcn-color-muted, #5a5f66);
    font-weight: 600;
}

.hcn-reg--v2.hcn-reg--checkout .hcn-reg__back:hover,
.hcn-reg--v2.hcn-reg--checkout .hcn-reg__back:focus-visible {
    background-color: var(--hcn-color-subtle-bg, #f6f7f7);
    color: var(--hcn-color-heading, #1C1C1D);
}

/* The internal panel folds away. Same data, same gate; it just stops owning half the screen. */
.hcn-reg--v2 .hcn-v2-checkout__diag > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    font-weight: 700;
    color: var(--hcn-color-heading, #1C1C1D);
    cursor: pointer;
}

.hcn-reg--v2 .hcn-v2-checkout__diag > summary:focus-visible {
    outline: 2px solid var(--hcn-focus-border, #8F6E46);
    outline-offset: 2px;
}

.hcn-reg--v2 .hcn-v2-checkout__diag[open] > summary { margin-bottom: var(--hcn-space-3, 12px); }

/* --- narrower --- */

@media (max-width: 1199px) {
    .hcn-reg--v2 .hcn-v2-checkout__grid { grid-template-columns: minmax(0, 1fr); }
}

/*
 * On a phone each block folds under its own heading.
 *
 * Stacked in one column, the party, the contact details and the service all scroll past before the
 * total and the button come into view — so at this width the heading becomes the control that opens
 * its block, and the screen opens on the four things it is for: who, how to reach them, which
 * service, and what it costs. The script builds the button only here; above this width the heading
 * is a heading again, with no button and no tab stop that does nothing.
 */
@media (max-width: 767px) {
    .hcn-reg--v2 .hcn-v2-checkout__blocktitle[data-v2-folded] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .hcn-reg--v2 .hcn-v2-checkout__blocktoggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--hcn-space-3, 12px);
        width: 100%;
        /* The whole heading row is the target, not the chevron alone. */
        min-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: var(--hcn-radius-sm, 6px);
        background-color: transparent;
        font: inherit;
        color: inherit;
        text-align: left;
        cursor: pointer;
    }

    .hcn-reg--v2 .hcn-v2-checkout__blockchevron {
        flex: none;
        width: 19px;
        height: 19px;
        color: var(--hcn-color-brand-strong, #8F6E46);
        transition: transform .18s ease-out;
    }

    .hcn-reg--v2 .hcn-v2-checkout__blocktoggle[aria-expanded="true"] .hcn-v2-checkout__blockchevron {
        transform: rotate(180deg);
    }

    /* Closed, the block is its heading row and nothing else — no empty band under it. */
    .hcn-reg--v2 .hcn-v2-checkout__head:has(> .hcn-v2-checkout__blocktitle[data-v2-folded]) {
        margin-bottom: 0;
    }

    .hcn-reg--v2 .hcn-v2-checkout__body:not([hidden]) { margin-top: var(--hcn-space-3, 12px); }
}

@media (prefers-reduced-motion: reduce) {
    .hcn-reg--v2 .hcn-v2-checkout__blockchevron { transition: none; }
}

@media (max-width: 640px) {
    .hcn-reg--v2 .hcn-v2-checkout__header { gap: var(--hcn-space-3, 12px); }
    .hcn-reg--v2 .hcn-v2-checkout__mark { width: 38px; height: 38px; }
    .hcn-reg--v2 .hcn-v2-checkout__mark svg { width: 19px; height: 19px; }
    .hcn-reg--v2 .hcn-v2-checkout__title { font-size: 1.55rem; }
    .hcn-reg--v2 .hcn-v2-checkout__block,
    .hcn-reg--v2 .hcn-v2-checkout__summary { padding: var(--hcn-space-4, 16px); }
    .hcn-reg--v2 .hcn-v2-checkout__facts { grid-template-columns: minmax(0, 1fr); }
    .hcn-reg--v2 .hcn-v2-checkout__portrait { width: 52px; height: 52px; }
    .hcn-reg--v2 .hcn-v2-checkout__servicecode { width: 30px; height: 30px; font-size: .92rem; }
    .hcn-reg--v2 .hcn-v2-checkout__count { font-size: 1.15rem; }
    .hcn-reg--v2 .hcn-v2-checkout__totalvalue { font-size: 1.7rem; }
}

/* ---------------------------------------------- the payment and group panels on the confirmation */

.hcn-reg--v2 .hcn-v2-pay {
    margin-top: var(--hcn-space-5, 20px);
    padding: var(--hcn-space-5, 20px);
    border-radius: var(--hcn-radius-lg, 14px);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border-soft, #e4e6e9);
    background-color: var(--hcn-color-subtle-bg, #f6f7f7);
}

.hcn-reg--v2 .hcn-v2-pay__title {
    margin: 0 0 var(--hcn-space-3, 12px);
    font-size: 1rem;
    font-weight: 700;
    color: var(--hcn-color-heading, #1C1C1D);
}

.hcn-reg--v2 .hcn-v2-pay__rows {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--hcn-space-2, 8px);
}

.hcn-reg--v2 .hcn-v2-pay__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hcn-space-3, 12px);
}

.hcn-reg--v2 .hcn-v2-pay__row dt {
    margin: 0;
    font-size: .88rem;
    color: var(--hcn-color-muted, #5a5f66);
}

.hcn-reg--v2 .hcn-v2-pay__row dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    color: var(--hcn-color-text, #2D2E2F);
}

.hcn-reg--v2 .hcn-v2-pay__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hcn-space-3, 12px);
    margin: var(--hcn-space-4, 16px) 0 0;
    padding-top: var(--hcn-space-3, 12px);
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--hcn-color-border, #d0d3d6);
}

.hcn-reg--v2 .hcn-v2-pay__totallabel { font-weight: 700; color: var(--hcn-color-heading, #1C1C1D); }

.hcn-reg--v2 .hcn-v2-pay__totalvalue {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--hcn-color-heading, #1C1C1D);
}

.hcn-reg--v2 .hcn-v2-pay__note {
    margin: var(--hcn-space-3, 12px) 0 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--hcn-color-muted, #5a5f66);
}

/* ==========================================================================================
   The flash — what the flow says to the pilgrim between two screens.
   ------------------------------------------------------------------------------------------
   "Bedankt. Uw gegevens zijn opgeslagen." and every message like it were `<p class="hcn-field__hint">`
   — the class a FIELD uses for the small grey line under its input. Used at page level it inherited a
   field's type size, a field's grey and a field's zero top margin, so a page-wide announcement arrived
   as an unstyled sentence pressed against the heading below it. It read as leftover text.

   This is the component those messages should always have had: one surface, an icon that carries the
   state, and air on both sides so nothing is ever flush with a title. Three variants, each from the
   house tokens — confirmation, caution, refusal. No coloured bar down the side: the tint, the icon and
   the hairline carry the state, and this flow has no left borders anywhere.
   ========================================================================================== */

.hcn-reg--v2 .hcn-v2-flash {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--hcn-space-3, 12px);
    /*
     * The box is the size of the SENTENCE, not the size of the page.
     *
     * Stretched edge to edge, "De persoonsgegevens van dit familielid zijn opgeslagen." sat in a band
     * of green with 600px of nothing after it — the surface announced far more than the message did.
     * It shrinks to its text now and stops at a readable measure, so a short confirmation is a small
     * confirmation and a long one still wraps inside the column instead of running its full width.
     */
    width: fit-content;
    max-width: min(100%, 60ch);
    margin: var(--hcn-space-4, 16px) 0 var(--hcn-space-5, 20px);
    padding: 12px 16px;
    /* Declared last so the shell's `padding-inline` on a direct child cannot reach past it. */
    border-radius: var(--hcn-radius-lg, 14px);
    border-width: 1px;
    border-style: solid;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.55;
    text-wrap: pretty;
    color: var(--hcn-color-text, #2D2E2F);
}

/*
 * The icon is a mask, not a picture: the glyph is geometry and the COLOUR comes from the variant's
 * `color`, so a state can never drift from its token into a second hard-coded hex.
 */
.hcn-reg--v2 .hcn-v2-flash::before {
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    /* Optically centred on the first line of text, not on the box. */
    margin-top: 2px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 21px 21px;
    mask-size: 21px 21px;
}

/*
 * The sentence stays at the flow's text colour; only the EDGE, the fill and the mark carry the state.
 * A whole paragraph set in green reads as a slogan — a green mark beside a black sentence reads as a
 * status, which is what this is.
 */
.hcn-reg--v2 .hcn-v2-flash--ok {
    border-color: var(--hcn-color-success, #1E7A4D);
    background-color: var(--hcn-color-success-bg, #e6f4ea);
}

.hcn-reg--v2 .hcn-v2-flash--warn {
    border-color: var(--hcn-color-warning, #8a6100);
    background-color: var(--hcn-color-warning-bg, #fff4d6);
}

.hcn-reg--v2 .hcn-v2-flash--error {
    border-color: var(--hcn-color-error, #B42318);
    background-color: var(--hcn-color-error-bg, #fdeceb);
}

.hcn-reg--v2 .hcn-v2-flash--ok::before { color: var(--hcn-color-success, #1E7A4D); }
.hcn-reg--v2 .hcn-v2-flash--warn::before { color: var(--hcn-color-warning, #8a6100); }
.hcn-reg--v2 .hcn-v2-flash--error::before { color: var(--hcn-color-error, #B42318); }

/* A circled check, a circled !, a circled x — one family, one stroke weight, drawn not downloaded. */
.hcn-reg--v2 .hcn-v2-flash--ok::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 12.4l2.7 2.7L16.2 9.6"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 12.4l2.7 2.7L16.2 9.6"/></svg>');
}

.hcn-reg--v2 .hcn-v2-flash--warn::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.8v5"/><path d="M12 16.1h.01"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.8v5"/><path d="M12 16.1h.01"/></svg>');
}

.hcn-reg--v2 .hcn-v2-flash--error::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9.2 9.2l5.6 5.6"/><path d="M14.8 9.2l-5.6 5.6"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9.2 9.2l5.6 5.6"/><path d="M14.8 9.2l-5.6 5.6"/></svg>');
}

.hcn-reg--v2 .hcn-v2-flash > * { margin: 0; }

/*
 * The gutter, given back.
 *
 * Every direct child of the flow takes `padding-inline: var(--hcn-reg-v2-pad)` from the shell — but
 * this component sets its own `padding`, which wipes that, so the box alone sat flush against the left
 * edge of the card while every heading beside it was inset. Its own padding has to stay (it is the
 * space INSIDE the surface), so the page gutter comes back as a MARGIN, and only for a flash that is a
 * direct child: one inside a section already sits in that section's gutter.
 */
.hcn-reg--v2 > .hcn-v2-flash {
    margin-inline: var(--hcn-reg-v2-pad);
    max-width: min(calc(100% - 2 * var(--hcn-reg-v2-pad)), 60ch);
}

/* Contrast mode thickens the edge rather than shouting the fill, as every other V2 state does. */
.hcn-reg--v2.is-contrast .hcn-v2-flash { border-width: 2px; }

@media (max-width: 767px) {
    .hcn-reg--v2 .hcn-v2-flash {
        gap: 10px;
        padding: 12px 14px;
    }
}

/* The receipt and the activation notice moved to registration-v2-received.css (owner-approved Luxury V1,
   0.80.0-dev). Their earlier `.hcn-v2-done__*` / `.hcn-v2-activate__*` rules were removed with the markup
   that used them, so no dead rule suggests that the old layout still renders. */

/* Step 2: the platform upload policy line (owner, 2026-10-24) on a line of its own under the lead. */
.hcn-reg--v2 .hcn-reg__policy { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; }

/* ==========================================================================================
   "Welkom terug" — the screen a returning pilgrim lands on.
   ------------------------------------------------------------------------------------------
   This block did not exist. `templates/portal/registration-v2-welcome.php` was written in a
   `.hcn-welcome__*` vocabulary that no stylesheet in the plugin ever defined, which is the single
   cause of both faults the screen showed: an unbounded mark, because nothing constrained the SVG,
   and a bare "1. 2. 3. 4. 5.", because the progress track was an <ol> of empty <li> and the browser
   numbered them. The template no longer uses a list for the track at all, and every class it does
   use is answered here.

   Additive and V2-owned: `.hcn-welcome` is on the same element as `.hcn-reg--v2`, so every selector
   below is scoped to this one screen and nothing R1 renders is touched. Colour arrives from
   tokens.css; the hex after each var() is that token's own value. No left borders, no inset shadows.
   ========================================================================================== */

.hcn-reg--v2.hcn-welcome { display: block; }

.hcn-reg--v2.hcn-welcome .hcn-welcome__card {
    position: relative;
    overflow: hidden;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--hcn-space-6, 24px);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border-soft, #e4e6e9);
    border-radius: var(--hcn-radius-lg, 12px);
    background-color: var(--hcn-color-surface, #fff);
    text-align: center;
}

/* Light, not a line: a soft gold wash behind the mark. Behind the content and non-interactive, so it
   can never catch a click or cover a control. */
.hcn-reg--v2.hcn-welcome .hcn-welcome__aura {
    position: absolute;
    top: -120px;
    left: 50%;
    width: 420px;
    height: 300px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, var(--hcn-color-brand-soft, #F4EEE5), rgba(244, 238, 229, 0));
    pointer-events: none;
    z-index: 0;
}

/* Everything the pilgrim reads sits above the wash. */
.hcn-reg--v2.hcn-welcome .hcn-welcome__card > *:not(.hcn-welcome__aura) {
    position: relative;
    z-index: 1;
}

/* ── the mark: bounded, and bounded in both directions ───────────────────────────────────── */

/* The cap is on the SVG itself as well as on its box. An SVG with a viewBox and no intrinsic size
   fills whatever it is given, so constraining only the wrapper is what let this render hundreds of
   pixels tall; `max-width`/`max-height` on the drawing is the actual guard. */
.hcn-reg--v2.hcn-welcome .hcn-welcome__icon {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin: 0 auto var(--hcn-space-4, 16px);
    color: var(--hcn-color-brand-strong, #8F6E46);
}
.hcn-reg--v2.hcn-welcome .hcn-welcome__icon > svg {
    display: block;
    width: 80px;
    height: 80px;
    max-width: 96px;
    max-height: 96px;
}
/* Every part of the mark is answered here, including the parts that only want the inherited stroke.
   A class in the markup with no rule anywhere is exactly what went wrong on this screen, so none of
   them is left to chance. */
.hcn-reg--v2.hcn-welcome .hcn-welcome__ring { opacity: .5; }
.hcn-reg--v2.hcn-welcome .hcn-welcome__arc,
.hcn-reg--v2.hcn-welcome .hcn-welcome__tip,
.hcn-reg--v2.hcn-welcome .hcn-welcome__page { stroke: currentColor; }
.hcn-reg--v2.hcn-welcome .hcn-welcome__lines { opacity: .35; }
.hcn-reg--v2.hcn-welcome .hcn-welcome__check { color: var(--hcn-color-success, #1E7A4D); stroke: currentColor; }

/* ── the state chip ──────────────────────────────────────────────────────────────────────── */

.hcn-reg--v2.hcn-welcome .hcn-welcome__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--hcn-space-2, 8px);
    margin: 0 0 var(--hcn-space-3, 12px);
    padding: 4px 12px;
    border-radius: var(--hcn-radius-pill, 999px);
    background-color: var(--hcn-color-success-bg, #e6f4ea);
    color: var(--hcn-color-success, #1E7A4D);
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.35;
}
.hcn-reg--v2.hcn-welcome .hcn-welcome__chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* ── heading and lead ────────────────────────────────────────────────────────────────────── */

.hcn-reg--v2.hcn-welcome h1.hcn-welcome__title {
    margin: 0 0 var(--hcn-space-2, 8px);
    font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.1rem);
    line-height: 1.2;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2.hcn-welcome .hcn-welcome__lead {
    margin: 0 0 var(--hcn-space-5, 20px);
    color: var(--hcn-color-muted, #5a5f66);
    line-height: 1.6;
}

/* ── the three facts: what this registration is ──────────────────────────────────────────── */

/* Left-aligned inside a centred card, because a label above its value reads as a pair and centred
   pairs do not. A <dl> of <div> groups, so each label stays tied to its own value. */
.hcn-reg--v2.hcn-welcome .hcn-welcome__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--hcn-space-4, 16px);
    margin: 0 0 var(--hcn-space-5, 20px);
    padding: var(--hcn-space-4, 16px);
    border-width: 1px;
    border-style: solid;
    border-color: var(--hcn-color-border-soft, #e4e6e9);
    border-radius: var(--hcn-radius-md, 8px);
    background-color: var(--hcn-color-subtle-bg, #f6f7f7);
    text-align: left;
}
.hcn-reg--v2.hcn-welcome .hcn-welcome__summary:empty { display: none; }
.hcn-reg--v2.hcn-welcome .hcn-welcome__fact { min-width: 0; }
.hcn-reg--v2.hcn-welcome .hcn-welcome__fact dt {
    margin: 0 0 2px;
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.35;
}
.hcn-reg--v2.hcn-welcome .hcn-welcome__fact dd {
    margin: 0;
    color: var(--hcn-color-heading, #1C1C1D);
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* ── the progress track: five positions, no list ─────────────────────────────────────────── */

.hcn-reg--v2.hcn-welcome .hcn-welcome__track {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 0 var(--hcn-space-6, 24px);
}
.hcn-reg--v2.hcn-welcome .hcn-welcome__tick {
    width: 22px;
    height: 5px;
    border-radius: var(--hcn-radius-pill, 999px);
    background-color: var(--hcn-color-border, #d0d3d6);
}
.hcn-reg--v2.hcn-welcome .hcn-welcome__tick.is-done { background-color: var(--hcn-color-brand-soft, #F4EEE5); }
/* Where they are now: wider and in the strong gold, so the position reads at a glance without
   needing the colour alone to carry it — the words above say the same thing. */
.hcn-reg--v2.hcn-welcome .hcn-welcome__tick.is-current {
    width: 34px;
    background-color: var(--hcn-color-brand-strong, #8F6E46);
}

/* ── the two actions: one dominant, one plain ────────────────────────────────────────────── */

.hcn-reg--v2.hcn-welcome .hcn-welcome__actions {
    display: grid;
    gap: var(--hcn-space-3, 12px);
    margin: 0 0 var(--hcn-space-4, 16px);
}
.hcn-reg--v2.hcn-welcome .hcn-welcome__form { margin: 0; }
/* Both wear the V2 button; these two rules only make them fill the card and carry the arrow. */
.hcn-reg--v2.hcn-welcome .hcn-welcome__primary,
.hcn-reg--v2.hcn-welcome .hcn-welcome__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hcn-space-2, 8px);
    width: 100%;
    min-height: var(--hcn-input-min-h, 48px);
}
.hcn-reg--v2.hcn-welcome .hcn-welcome__primary > svg { flex: none; }

/* ── the closing reassurance ─────────────────────────────────────────────────────────────── */

.hcn-reg--v2.hcn-welcome .hcn-welcome__note {
    margin: 0;
    color: var(--hcn-color-muted, #5a5f66);
    font-size: .88rem;
    line-height: 1.55;
}

/* ── narrow: the card keeps its shape, the mark gets smaller ─────────────────────────────── */

@media (max-width: 640px) {
    .hcn-reg--v2.hcn-welcome .hcn-welcome__card { padding: var(--hcn-space-5, 20px) var(--hcn-space-4, 16px); }
    .hcn-reg--v2.hcn-welcome .hcn-welcome__icon { width: 76px; height: 76px; }
    .hcn-reg--v2.hcn-welcome .hcn-welcome__icon > svg { width: 64px; height: 64px; }
    .hcn-reg--v2.hcn-welcome .hcn-welcome__aura { top: -100px; width: 300px; height: 220px; }
    .hcn-reg--v2.hcn-welcome .hcn-welcome__summary { grid-template-columns: minmax(0, 1fr); gap: var(--hcn-space-3, 12px); }
}