/*
 * HCN Management — Registration V2, the form system.
 *
 * ONE place for how a form field looks and breathes on every V2 step: the label row, the state
 * chip, the control, the hint and the error under it, the section title above it, the chips and the
 * segmented pair, the enhanced picker, the confirmation row and the primary action. A new step
 * writes the markup below and gets all of it; it adds no rule of its own for any of these.
 *
 * Loaded LAST — after tokens, R1's registration.css and registration-v2.css — so it is the final
 * word on these primitives. Every selector is scoped to `.hcn-reg--v2`: R1 is untouched.
 *
 * The shapes this file styles:
 *
 *   <p class="hcn-field [hcn-field--half]" [data-v2-state="READ|MISSING|AMBIGUOUS|PROVISIONAL"]>
 *       <span class="hcn-field__head">
 *           <label for="…">Label *</label>
 *           <span class="hcn-fieldstate hcn-fieldstate--read|--missing|--attention">…</span>   optional
 *       </span>
 *       <input class="hcn-input"> | <select class="hcn-select" [data-v2-flagselect="country|phone|agency|plain"]>
 *       <span class="hcn-field__hint">…</span>                                                  optional
 *       <span class="hcn-field__error">…</span>                                                 when refused
 *   </p>
 *
 *   <fieldset class="hcn-field"> <legend><span class="hcn-field__head"><span>Legend *</span>…</span></legend> … </fieldset>
 *   <div class="hcn-reg__grid"> two .hcn-field--half </div>          a paired row
 *   <span class="hcn-chips"> <label class="hcn-chip [hcn-chip--radio]"><input …><span class="hcn-chip__label">…</span></label> … </span>
 *   <span class="hcn-seg"> <label class="hcn-seg__opt"><input type="radio"><span class="hcn-seg__label">…</span></label> … </span>
 *   <div class="hcn-stale"> a file the chosen route does not ask about, with a way to remove it </div>
 *   <fieldset class="hcn-pickcards"> <legend>…</legend> <div class="hcn-pickcards__row">
 *       <label class="hcn-pickcard"><input type="radio"><span class="hcn-pickcard__icon">…</span>
 *           <span class="hcn-pickcard__body"><span class="hcn-pickcard__title">…</span><span class="hcn-pickcard__note">…</span></span>
 *       </label> … </fieldset>                                    one question, two explained paths
 *   <h3 class="hcn-reg__sub">Section</h3>
 *   <p class="hcn-field hcn-reg__confirm"> the tick box </p>  <p class="hcn-reg__actions"> the button </p>
 *
 * No `!important` except where the theme's own `button`/`input` rules are the opponent, and each of
 * those says so. No coloured left borders anywhere.
 */

/* ------------------------------------------------------------------ 1. rhythm

   The one number most of this file is built on: 32px between fields. A paired row is one field for
   this purpose — its two halves sit on one baseline, 32px apart, and the row keeps the 32px below it.
   Sections get more (48px) and a rule; the first section none.

   Opened up on 2026-10-10 (owner: the form looked cramped and should feel more generous) from 28px
   fields, 36px sections, 24px columns and an 8px label gap. On a phone the field gap steps back to
   24px: the extra air is for a desktop reading width, not for a 390px column.

   The column gap is the one number that cannot simply grow. Step 3's paired rows put a label and a
   "Uit uw paspoort gelezen" chip on ONE line, and "Land van afgifte *" plus its chip needs 375px.
   If one half of a pair wraps its chip and the other does not, the two controls stop lining up. So
   the column gap went up only as far as the wider card (§ gutter, below) pays for: each half stays
   at 376px, one pixel more than before this change. */
.hcn-reg--v2 {
    --hcn-form-gap: 32px;
    --hcn-form-gap-section: 48px;
    --hcn-form-col-gap: 28px;
    --hcn-form-head-gap: 10px;
    --hcn-form-note-gap: 10px;
}
@media (max-width: 600px) {
    .hcn-reg--v2 { --hcn-form-gap: 24px; --hcn-form-gap-section: 36px; }
}
.hcn-reg--v2 .hcn-reg__form > .hcn-field,
.hcn-reg--v2 .hcn-reg__form > fieldset.hcn-field { margin: 0 0 var(--hcn-form-gap); }
.hcn-reg--v2 .hcn-reg__form .hcn-reg__grid {
    row-gap: 0;
    column-gap: var(--hcn-form-col-gap, 32px);
    margin: 0 0 var(--hcn-form-gap);
}
.hcn-reg--v2 .hcn-reg__form .hcn-reg__grid > .hcn-field { margin-bottom: 0; }
/* A grid inside a fieldset (the emergency contact) is the fieldset's content, so it adds no gap of
   its own; the fieldset carries the 28px. */
.hcn-reg--v2 .hcn-reg__form fieldset.hcn-field > .hcn-reg__grid--inner { margin-bottom: 0; }
@media (max-width: 600px) {
    .hcn-reg--v2 .hcn-reg__form .hcn-reg__grid { row-gap: var(--hcn-form-gap); }
}

/* Step 1 groups its fields in section fieldsets ("Contactgegevens", "HCN-service") instead of placing
   them directly in the form, so the rule above never reached them and they sat 12px apart — the
   theme's paragraph margin — while every later step breathed at the form rhythm. Same rhythm here:
   the field gap between fields, the section's own title 24px above its first field, and 40px either
   side of the hairline that closes a section (the last field's gap plus 8px of section padding). */
.hcn-reg--v2 .hcn-reg__form fieldset.hcn-reg__section {
    margin: 0 0 40px;
    padding: 0 0 8px;
}
.hcn-reg--v2 .hcn-reg__form fieldset.hcn-reg__section:last-of-type { margin-bottom: var(--hcn-form-gap); padding-bottom: 0; }
.hcn-reg--v2 .hcn-reg__form fieldset.hcn-reg__section > legend { margin-bottom: 24px; }
.hcn-reg--v2 .hcn-reg__form .hcn-reg__section > .hcn-field,
.hcn-reg--v2 .hcn-reg__form .hcn-reg__subsection > .hcn-field { margin: 0 0 var(--hcn-form-gap); }
.hcn-reg--v2 .hcn-reg__form .hcn-reg__subsection > .hcn-field:last-child { margin-bottom: 0; }
.hcn-reg--v2 .hcn-reg__form .hcn-reg__subsection {
    margin-top: var(--hcn-form-gap);
    padding-top: var(--hcn-form-gap);
}
/* The mobile number and its country code: two boxes, a little more apart than before. */
.hcn-reg--v2 .hcn-field__phone { gap: 12px; }

/* § gutter. The side gutter of the content column is 40px on a desktop — 39px of padding inside the card's
   1px border — so the owner's 1,080px card holds exactly a 1,000px step (0.72.1-dev; it was 48px). The
   tablet (32px) and phone (16px) gutters are untouched, which is why this sits behind a min-width query.

   The card's WIDTH is not set here: it is the shell rule in registration-v2.css (at most 1,080px,
   fluid below that). */
@media (min-width: 1025px) {
    .hcn-reg--v2 { --hcn-reg-v2-pad: 39px; }
}
@media (max-width: 600px) {
    .hcn-reg--v2 .hcn-reg__form fieldset.hcn-reg__section { margin-bottom: 32px; }
    .hcn-reg--v2 .hcn-reg__form fieldset.hcn-reg__section > legend { margin-bottom: 20px; }
}

/* ------------------------------------------------------------------ 2. section titles

   A section title is a different voice from a label and says so with weight, size and colour rather
   than with a different face — the flow reads in one sans throughout. Inter first, then Roboto, then
   the platform's own UI sans: nothing is fetched, so a machine without either falls back cleanly and
   no request leaves the page to load a font.

   The colour is `--hcn-color-success` (#1E7A4D), which is the flow's green — the same one the
   "Hulp?" pill and a saved document's confirmation use. It is 5.32:1 on white. Under it a short rule
   in the same green, which is the only decoration. The first section opens the form and carries no
   rule above it. */
.hcn-reg--v2 .hcn-reg__sub {
    display: block;
    margin: var(--hcn-form-gap-section) 0 var(--hcn-space-5, 20px);
    padding: var(--hcn-space-5, 20px) 0 0;
    border-top: 1px solid var(--hcn-color-border-faint, #f0f1f3);
    font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: -.005em;
    text-transform: none;
    color: var(--hcn-color-success, #1E7A4D);
}
.hcn-reg--v2 .hcn-reg__sub::before { content: none; }
.hcn-reg--v2 .hcn-reg__sub::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    margin-top: 8px;
    border-radius: 2px;
    background: var(--hcn-color-success, #1E7A4D);
}
.hcn-reg--v2 .hcn-reg__form > .hcn-reg__sub:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ------------------------------------------------------------------ 3. the field head

   Label on the left, state chip on the right, on ONE row. Labels and legends read at one size:
   before this, `<label>` inherited the 18px body while `<legend>` was 13px, and the two sat side by
   side at two sizes. A legend cannot be wrapped, so inside a fieldset the head goes inside the legend. */
.hcn-reg--v2 .hcn-field__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px var(--hcn-space-3, 12px);
    min-width: 0;
    margin: 0 0 var(--hcn-form-head-gap);
}
.hcn-reg--v2 .hcn-field__head > label,
.hcn-reg--v2 .hcn-field__head > span:first-child {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: .86em;
    font-weight: 700;
    line-height: 1.35;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-reg__form fieldset.hcn-field {
    min-width: 0;
    padding: 0;
    border: 0;
}
.hcn-reg--v2 .hcn-reg__form fieldset.hcn-field > legend {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: inherit;
}
/* A legend's head is the fieldset's title row; it gets a touch more room than a plain label, and
   the labels of the fields INSIDE that fieldset step down one level — muted and semibold — so
   "Noodcontact" reads as the question and "Naam" / "Telefoonnummer" as its two parts. */
.hcn-reg--v2 .hcn-reg__form fieldset.hcn-field > legend > .hcn-field__head { margin-bottom: var(--hcn-form-note-gap); }
.hcn-reg--v2 .hcn-reg__grid--inner .hcn-field__head > label {
    font-size: .8em;
    font-weight: 600;
    color: var(--hcn-color-muted, #5A5F66);
}
/* "Meerdere keuzes mogelijk" beside a legend: quiet, and it says the one thing the chips cannot. */
.hcn-reg--v2 .hcn-field__head-note {
    flex: 0 0 auto;
    font-size: .72em;
    font-weight: 500;
    color: var(--hcn-color-muted, #5A5F66);
}

/* ------------------------------------------------------------------ 4. the state chip

   The provenance of a value is a status, and it reads at status size beside the label — never as a
   second label above the control. Colour is never alone: the icon and the wording carry it. */
.hcn-reg--v2 .hcn-fieldstate {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 2px 9px 2px 7px;
    border-radius: var(--hcn-radius-pill, 999px);
    font-size: .68em;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--hcn-color-heading, #1C1C1D);
    background: var(--hcn-color-subtle-bg, #f6f7f7);
}
.hcn-reg--v2 .hcn-fieldstate svg { width: 14px; height: 14px; flex: 0 0 auto; color: currentColor; }
.hcn-reg--v2 .hcn-fieldstate--read {
    color: var(--hcn-color-success, #1E7A4D);
    background: var(--hcn-color-success-bg, #e6f4ea);
    background: color-mix(in srgb, var(--hcn-color-success, #1E7A4D) 10%, transparent);
}
.hcn-reg--v2 .hcn-fieldstate--missing {
    color: var(--hcn-color-error, #B42318);
    background: var(--hcn-color-error-bg, #fdeceb);
    background: color-mix(in srgb, var(--hcn-color-error, #B42318) 9%, transparent);
}
.hcn-reg--v2 .hcn-fieldstate--attention {
    color: var(--hcn-color-warning, #8a6100);
    background: var(--hcn-color-warning-bg, #fff4d6);
    background: color-mix(in srgb, var(--hcn-color-warning, #8a6100) 12%, transparent);
}
.hcn-reg--v2 .hcn-fieldstate__note {
    flex-basis: 100%;
    display: block;
    margin: 0;
    font-size: .78em;
    font-weight: 400;
    line-height: 1.45;
    color: var(--hcn-color-text, #2D2E2F);
}
/* Answered: the "missing" chip turns into a done chip, live. */
.hcn-reg--v2 .hcn-field.is-filled .hcn-fieldstate--missing {
    color: var(--hcn-color-success, #1E7A4D);
    background: var(--hcn-color-success-bg, #e6f4ea);
    background: color-mix(in srgb, var(--hcn-color-success, #1E7A4D) 10%, transparent);
}

/* A field that needs attention is tinted so it can be found on a long screen — at a light touch,
   not a card's worth of padding. READ and CONFIRMED are not tinted: they are the normal case. */
.hcn-reg--v2 .hcn-field[data-v2-state] { border: 1.5px solid transparent; border-radius: var(--hcn-radius-md, 10px); }
.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"],
.hcn-reg--v2 .hcn-field[data-v2-state="AMBIGUOUS"],
.hcn-reg--v2 .hcn-field[data-v2-state="PROVISIONAL"] { padding: 10px 12px 12px; }
.hcn-reg--v2 .hcn-field[data-v2-state="MISSING"] {
    border-color: var(--hcn-color-error, #B42318);
    background: var(--hcn-color-error-bg, #fdeceb);
    background: color-mix(in srgb, var(--hcn-color-error, #B42318) 5%, transparent);
}
.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);
    background: color-mix(in srgb, var(--hcn-color-warning, #8a6100) 7%, transparent);
}
.hcn-reg--v2 .hcn-field[data-v2-state="MISSING"].is-filled {
    border-color: var(--hcn-color-border, #d0d3d6);
    background: var(--hcn-color-surface, #fff);
}

/* ------------------------------------------------------------------ 5. hint and error

   Both sit UNDER the control with the same clearance, so a field with a hint and a field with an
   error are the same height apart from their neighbours. The error carries a mark as well as red,
   and the control it belongs to shows the same red on its own edge. */
.hcn-reg--v2 .hcn-field__hint {
    display: block;
    margin: var(--hcn-form-note-gap) 0 0;
    font-size: .8em;
    line-height: 1.5;
    color: var(--hcn-color-muted, #5a5f66);
}
.hcn-reg--v2 .hcn-field__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: var(--hcn-form-note-gap) 0 0;
    font-size: .82em;
    font-weight: 600;
    line-height: 1.45;
    color: var(--hcn-color-error, #B42318);
}
.hcn-reg--v2 .hcn-field__error::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.6v5.2'/%3E%3Cpath d='M12 16.3h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The refused control itself: a red edge and a soft red halo. `aria-invalid` is set by the field
   script after a refused submission; the :has() form covers server-rendered errors before it runs. */
.hcn-reg--v2 .hcn-input[aria-invalid="true"],
.hcn-reg--v2 .hcn-select[aria-invalid="true"],
.hcn-reg--v2 .hcn-field:has(> .hcn-field__error) > .hcn-input,
.hcn-reg--v2 .hcn-field:has(> .hcn-field__error) > .hcn-select,
.hcn-reg--v2 .hcn-field:has(> .hcn-field__error) > .hcn-flagsel > .hcn-flagsel__btn {
    border-color: var(--hcn-color-error, #B42318) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hcn-color-error, #B42318) 12%, transparent) !important;
}

/* ------------------------------------------------------------------ 6. chips

   One chip vocabulary for every "pick from a short list" control. A chip is a real checkbox or
   radio underneath — keyboard, screen reader and no-JavaScript all keep working — and what is
   drawn on top is the state. The mark says the rule: a SQUARE for pick-several, a CIRCLE for
   pick-one. Chosen is fill + edge + mark, never colour alone. */
.hcn-reg--v2 .hcn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hcn-space-2, 8px);
}
.hcn-reg--v2 .hcn-chip {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 4px 14px 4px 10px;
    background: var(--hcn-color-surface, #fff);
    border: 1px solid var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-pill, 999px);
    font-size: .86em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hcn-color-heading, #1C1C1D);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;
}
.hcn-reg--v2 .hcn-chip 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-chip::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--hcn-color-border, #d0d3d6);
    border-radius: 5px;
    background: var(--hcn-color-surface, #fff);
    transition: border-color .15s ease-out, background-color .15s ease-out;
}
.hcn-reg--v2 .hcn-chip--radio::before { border-radius: 50%; }
.hcn-reg--v2 .hcn-chip:hover { border-color: var(--hcn-color-brand, #B38F64); transform: translateY(-1px); }
.hcn-reg--v2 .hcn-chip: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-reg--v2 .hcn-chip:has(input:checked)::before {
    border-color: var(--hcn-color-brand-strong, #8F6E46);
    background: var(--hcn-color-brand-strong, #8F6E46) no-repeat center / 12px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.8l4.2 4.2L19 7.4'/%3E%3C/svg%3E");
}
.hcn-reg--v2 .hcn-chip--radio:has(input:checked)::before {
    background: var(--hcn-color-brand-strong, #8F6E46);
    box-shadow: inset 0 0 0 3px var(--hcn-color-surface, #fff);
}
.hcn-reg--v2 .hcn-chip:has(input:focus-visible) {
    outline: 2px solid var(--hcn-focus-border, #B38F64);
    outline-offset: 2px;
}
.hcn-reg--v2 .hcn-chip__label { min-width: 0; }
.hcn-reg--v2 .hcn-chip__note {
    font-size: .8em;
    font-weight: 500;
    color: var(--hcn-color-muted, #5A5F66);
}

/* ------------------------------------------------------------------ 6b. the pick cards

   One question, two paths, and each path needs a sentence of its own to be choosable. A chip cannot
   carry that sentence, so this is the same idea one size up: a real radio underneath — keyboard,
   screen reader and no-JavaScript unchanged — drawn as a card with an icon, a title and a note.

   It is in the GLOBAL form file rather than beside the residence markup because "pick one of two
   routes, each needing an explanation" is not a residence question. The next screen that asks one
   writes the markup and gets this.

   Chosen is fill + edge + the radio's own mark, never colour alone. The mark is drawn by ::before on
   the card, which is why the markup carries no decorative span for it. */
.hcn-reg--v2 .hcn-pickcards {
    margin: 0 0 var(--hcn-form-gap);
    padding: 0;
    border: 0;
}
.hcn-reg--v2 .hcn-pickcards > legend {
    width: 100%;
    margin: 0 0 var(--hcn-space-3, 12px);
    padding: 0;
    font-size: .86em;
    font-weight: 700;
    color: var(--hcn-color-heading, #1C1C1D);
}
/* The grid sits on this row, not on the fieldset: a <legend> inside a grid container is laid out
   inconsistently across engines, and a control whose layout depends on the browser is not a control. */
.hcn-reg--v2 .hcn-pickcards__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--hcn-space-3, 12px);
}
.hcn-reg--v2 .hcn-pickcards > .hcn-field__hint { margin: 10px 0 0; }
.hcn-reg--v2 .hcn-pickcard {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 12px;
    margin: 0;
    padding: 14px 16px 14px 14px;
    background: var(--hcn-color-surface, #fff);
    border: 1px solid var(--hcn-color-border, #d0d3d6);
    border-radius: var(--hcn-radius-md, 10px);
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;
}
.hcn-reg--v2 .hcn-pickcard 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-pickcard__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--hcn-radius-md, 10px);
    background: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8F6E46);
}
.hcn-reg--v2 .hcn-pickcard__icon svg { width: 22px; height: 22px; }
.hcn-reg--v2 .hcn-pickcard__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.hcn-reg--v2 .hcn-pickcard__title {
    /* Room on the right for the mark, so a two-line title never runs under it. */
    padding-right: 28px;
    font-size: .95em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-pickcard__note {
    font-size: .82em;
    font-weight: 500;
    line-height: 1.45;
    color: var(--hcn-color-muted, #5A5F66);
}
.hcn-reg--v2 .hcn-pickcard::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 14px;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--hcn-color-border, #d0d3d6);
    border-radius: 50%;
    background: var(--hcn-color-surface, #fff);
    transition: border-color .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}
.hcn-reg--v2 .hcn-pickcard:hover {
    border-color: var(--hcn-color-brand, #B38F64);
    transform: translateY(-1px);
}
.hcn-reg--v2 .hcn-pickcard: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-reg--v2 .hcn-pickcard:has(input:checked)::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-pickcard:has(input:checked) .hcn-pickcard__icon {
    background: var(--hcn-color-brand-strong, #8F6E46);
    color: #fff;
}
.hcn-reg--v2 .hcn-pickcard:has(input:focus-visible) {
    outline: 2px solid var(--hcn-focus-border, #B38F64);
    outline-offset: 2px;
}
/* While the answer is being saved the whole question is inert — the reload that follows is what
   redraws the screen, and a second answer chosen mid-flight would be answering a question twice. */
.hcn-reg--v2 .hcn-pickcard:has(input:disabled) {
    cursor: progress;
    opacity: .72;
}
.hcn-reg--v2 .hcn-pickcard:has(input:disabled):hover {
    border-color: var(--hcn-color-border, #d0d3d6);
    transform: none;
}

/* A document HCN still holds that the chosen route does not ask about. Quiet, not alarming: nothing
   is wrong, the pilgrim simply changed their mind and the old file is still on file. */
.hcn-reg--v2 .hcn-stale {
    margin: var(--hcn-space-4, 16px) 0 0;
    padding: 12px 14px;
    background: var(--hcn-color-surface-muted, #F7F7F8);
    border: 1px solid var(--hcn-color-border-faint, #f0f1f3);
    border-radius: var(--hcn-radius-md, 10px);
}
.hcn-reg--v2 .hcn-stale__lead {
    margin: 0 0 10px;
    font-size: .82em;
    font-weight: 500;
    line-height: 1.45;
    color: var(--hcn-color-muted, #5A5F66);
}
.hcn-reg--v2 .hcn-stale__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hcn-space-2, 8px);
    margin: 0;
}
.hcn-reg--v2 .hcn-stale__row + .hcn-stale__row { margin-top: var(--hcn-space-2, 8px); }
.hcn-reg--v2 .hcn-stale__name {
    min-width: 0;
    font-size: .86em;
    font-weight: 600;
    color: var(--hcn-color-heading, #1C1C1D);
}

/* ------------------------------------------------------------------ 7. the picker, in its modes

   `registration-v2-flagselect.js` dresses a native <select> as a button and a list. Two modes have
   no flag: `agency` shows a logo where the flag would be, `plain` shows nothing there. The button
   reads as a field — same height, border and radius as an input — and the chosen row carries the
   tick the country list already draws. */
.hcn-reg--v2 .hcn-flagsel[data-mode="agency"] .hcn-flagsel__btn,
.hcn-reg--v2 .hcn-flagsel[data-mode="plain"] .hcn-flagsel__btn { justify-content: flex-start; gap: 12px; }
.hcn-reg--v2 .hcn-flagsel[data-mode="agency"] .hcn-flagsel__btn.is-placeholder .hcn-flagsel__value,
.hcn-reg--v2 .hcn-flagsel[data-mode="plain"] .hcn-flagsel__btn.is-placeholder .hcn-flagsel__value { color: var(--hcn-color-muted, #5A5F66); font-weight: 500; }
.hcn-reg--v2 .hcn-flagsel[data-mode="agency"] .hcn-flagsel__value,
.hcn-reg--v2 .hcn-flagsel[data-mode="plain"] .hcn-flagsel__value { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.hcn-reg--v2 .hcn-flagsel__logo {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--hcn-color-border-faint, #f0f1f3);
    border-radius: var(--hcn-radius-sm, 6px);
    object-fit: contain;
    background: var(--hcn-color-surface, #fff);
}
.hcn-reg--v2 .hcn-flagsel__logo--none {
    padding: 4px;
    background: var(--hcn-color-subtle-bg, #f6f7f7);
    color: var(--hcn-color-muted, #5A5F66);
}
.hcn-reg--v2 .hcn-flagsel[data-mode="agency"] .hcn-flagsel__option,
.hcn-reg--v2 .hcn-flagsel[data-mode="plain"] .hcn-flagsel__option { gap: 12px; min-height: 48px; padding: 8px 14px; font-weight: 600; }
.hcn-reg--v2 .hcn-flagsel .hcn-flagsel__search[hidden] { display: none !important; }
.hcn-reg--v2 .hcn-flagsel[data-mode="agency"] .hcn-flagsel__panel,
.hcn-reg--v2 .hcn-flagsel[data-mode="plain"] .hcn-flagsel__panel { padding-top: 6px; }

/* ------------------------------------------------------------------ 8. the confirmation and the action

   The tick box is its own row with room above and below, and the primary action keeps the same
   clearance from whatever is above it on every step. The form ends with air, not with the button's
   shadow against the edge. */
.hcn-reg--v2 .hcn-reg__confirm {
    margin: var(--hcn-form-gap-section) 0 0 !important;
    padding: var(--hcn-space-5, 20px) 0 0;
    border-top: 1px solid var(--hcn-color-border-faint, #f0f1f3);
}
.hcn-reg--v2 .hcn-reg__confirm .hcn-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    font-weight: 600;
    line-height: 1.45;
}
.hcn-reg--v2 .hcn-reg__confirm .hcn-choice input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--hcn-color-brand-strong, #8F6E46);
}
.hcn-reg--v2 .hcn-reg__form > .hcn-reg__actions { margin-top: var(--hcn-form-gap); }
.hcn-reg--v2 .hcn-reg__form > .hcn-reg__actions + .hcn-field__hint { margin: 10px 0 0; text-align: right; }
.hcn-reg--v2 .hcn-reg__section > .hcn-reg__form { padding-bottom: var(--hcn-space-4, 16px); }

/* ------------------------------------------------------------------ 9. small screens and motion */
@media (max-width: 600px) {
    .hcn-reg--v2 .hcn-field__head { gap: 4px 8px; }
    .hcn-reg--v2 .hcn-fieldstate { font-size: .66em; }
    .hcn-reg--v2 .hcn-reg__sub { font-size: 1.12em; }
    .hcn-reg--v2 .hcn-reg__form > .hcn-reg__actions + .hcn-field__hint { text-align: left; }
    /* One column, and the icon shrinks: at 360px two 260px cards would not fit side by side, and a
       card whose note wraps to five lines is harder to compare than one under the other. */
    .hcn-reg--v2 .hcn-pickcards__row { grid-template-columns: 1fr; }
    .hcn-reg--v2 .hcn-pickcard { padding: 12px 14px; }
    .hcn-reg--v2 .hcn-pickcard__icon { width: 34px; height: 34px; }
    .hcn-reg--v2 .hcn-pickcard__icon svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .hcn-reg--v2 .hcn-chip,
    .hcn-reg--v2 .hcn-chip::before,
    .hcn-reg--v2 .hcn-pickcard,
    .hcn-reg--v2 .hcn-pickcard::before { transition: none; }
    .hcn-reg--v2 .hcn-chip:hover,
    .hcn-reg--v2 .hcn-pickcard:hover { transform: none; }
}