/*
 * The scan dialog's own rules. The panel, backdrop, close control, body and
 * foot come from the theme's .ee-modal block (assets/css/eenvoud.css), which
 * this dialog carries the classes of; everything below is scoped to .ee-scan
 * and adds the step machine's parts: the head with the kicker and the progress
 * row, one screen at a time, the choice cards, the summary cards and the
 * navigation row.
 *
 * Tokens only: colours, type sizes, spacing and motion come from the theme's
 * presets and custom properties. Boxes are hairlines; no shadows, no rounded
 * corners, no gradients (brand guide 3.1). Small labels follow the one label
 * recipe (4.3): xs, uppercase, 0.08em, text-muted with a sage dash; on pine
 * the dash is zand and the label muted-on-dark. Sage is never a text colour.
 */

/* --- The panel ------------------------------------------------------------ */

/* Wider than a signup form: the systems list runs in two columns and the
   route card wants a reading measure. */
.ee-scan .ee-modal-panel {
    width: min(680px, 100%);
}

/* The last three screens are wider still: the summary lays its cards out in
   two columns, the gate puts its copy beside the fields and the confirmation
   closes with the contact strip in one row. The questions keep the narrower
   panel; the step from one to the other is eased below, so the panel grows
   while the summary fades in rather than jumping. */
.ee-scan[data-screen="summary"] .ee-modal-panel,
.ee-scan[data-screen="gate"] .ee-modal-panel,
.ee-scan[data-screen="confirmation"] .ee-modal-panel {
    width: min(960px, 100%);
}

/* The theme's panel transitions (opacity and transform, for opening) are
   restated here because a shorthand replaces them; width is added on the
   reveal duration (brand 5.5). Under reduced motion the theme sets none
   and this block does not apply. */
@media (prefers-reduced-motion: no-preference) {
    .ee-scan .ee-modal-panel {
        transition:
            opacity var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
            transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
            width var(--wp--custom--motion--duration-reveal) var(--wp--custom--motion--easing);
    }
}

.ee-scan .ee-modal-head {
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 14px;
}

/* The theme caps a contact form at the reading measure of a page column;
   in this panel the form is the panel. */
.ee-scan-form { max-width: none; }

/* The dialog's name as the kicker that anchors every screen (brand 4.4);
   the screen's own heading says what this step asks. It stays an h2 for the
   dialog's accessible name. */
.ee-scan-title {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
    font-family: var(--wp--preset--font-family--instrument-sans);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-muted);
}

.ee-scan-title::before {
    content: "";
    flex: none;
    inline-size: 28px;
    block-size: 1px;
    background: var(--wp--preset--color--accent);
}

/* The cover carries its own heading. Where the config's intro title is the
   scan name word for word (render.php marks that), the kicker would repeat
   it directly above; it keeps its place so the close control stays put. */
.ee-scan[data-intro-kicker="0"][data-screen="intro"] .ee-scan-title {
    visibility: hidden;
}

/* --- Progress --------------------------------------------------------------- */

/* One row under the kicker: the bar takes the width, the step count sits at
   its end in the label recipe. Hidden on the cover, where nothing has
   started yet; full on the confirmation, where everything has. */
.ee-scan-progress-row {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
}

.ee-scan[data-screen="intro"] .ee-scan-progress-row {
    display: none;
}

.ee-scan-progress {
    flex: 1 1 auto;
    height: 2px;
    background: var(--wp--preset--color--border);
}

.ee-scan-progress[hidden] { display: none; }

.ee-scan-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    background: var(--wp--preset--color--deep);
    transition: width var(--wp--custom--motion--duration-reveal) var(--wp--custom--motion--easing);
}

.ee-scan-step {
    flex: none;
    margin: 0;
    font-size: var(--wp--preset--font-size--xs);
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--wp--preset--color--text-muted);
}

.ee-scan-step[hidden] { display: none; }

/* --- Screens ---------------------------------------------------------------- */

/* The stage ends every screen with the same 24px under its last element,
   whatever that element is (a card, the privacy line, the small print), so
   nothing sits on the foot's line. */
.ee-scan-stage {
    position: relative;
    padding-top: 6px;
    padding-bottom: 24px;
}

.ee-scan-screen { display: block; }

.ee-scan-screen[hidden] { display: none; }

/* A screen comes in from the side it is travelling from: 16px, faded, on
   the reveal duration (brand 5.5). */
.ee-scan-screen.is-entering {
    animation: ee-scan-enter var(--wp--custom--motion--duration-reveal) var(--wp--custom--motion--easing) both;
}

.ee-scan-screen.is-entering.from-back {
    animation-name: ee-scan-enter-back;
}

@keyframes ee-scan-enter {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes ee-scan-enter-back {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: none; }
}

@keyframes ee-scan-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* The cards of an entering screen follow their heading one by one. The
   delay is per position (set below), so nothing in the script has to count
   them; a control is in the DOM and clickable from the first frame. In the
   systems list the cards sit in two stacks (below): each stack counts its
   own, so the two columns come in row by row, and the answer apart under
   them comes last. */
.ee-scan-screen.is-entering .ee-scan-option {
    animation: ee-scan-card-in var(--wp--custom--motion--duration-reveal) var(--wp--custom--motion--easing) both;
    animation-delay: calc(60ms + var(--ee-scan-n, 0) * 40ms);
}

:is(.ee-scan-options, .ee-scan-options-stack) > :nth-child(1) { --ee-scan-n: 0; }
:is(.ee-scan-options, .ee-scan-options-stack) > :nth-child(2) { --ee-scan-n: 1; }
:is(.ee-scan-options, .ee-scan-options-stack) > :nth-child(3) { --ee-scan-n: 2; }
:is(.ee-scan-options, .ee-scan-options-stack) > :nth-child(4) { --ee-scan-n: 3; }
:is(.ee-scan-options, .ee-scan-options-stack) > :nth-child(5) { --ee-scan-n: 4; }
:is(.ee-scan-options, .ee-scan-options-stack) > :nth-child(6) { --ee-scan-n: 5; }
:is(.ee-scan-options, .ee-scan-options-stack) > :nth-child(7) { --ee-scan-n: 6; }
:is(.ee-scan-options, .ee-scan-options-stack) > :nth-child(8) { --ee-scan-n: 7; }
:is(.ee-scan-options, .ee-scan-options-stack) > :nth-child(9) { --ee-scan-n: 8; }
:is(.ee-scan-options, .ee-scan-options-stack) > :nth-child(10) { --ee-scan-n: 9; }
:is(.ee-scan-options, .ee-scan-options-stack) > :nth-child(11) { --ee-scan-n: 10; }
:is(.ee-scan-options, .ee-scan-options-stack) > :nth-child(n + 12) { --ee-scan-n: 11; }

/* The answer apart under the stacks follows their last row: render.php
   writes the stack size on the list as --ee-scan-stack. */
.ee-scan-options-stack ~ .ee-scan-option { --ee-scan-n: var(--ee-scan-stack, 5); }

/* Headings: Lora 400, sentence case, tight (brand 4.3). xl for a question,
   xxl for the cover and the closing screen, which are the dialog's two
   moments of arrival. */
.ee-scan-heading {
    margin: 0 0 12px;
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--ink);
    outline: none;
}

.ee-scan-intro .ee-scan-heading,
.ee-scan-confirmation .ee-scan-heading {
    margin-bottom: 16px;
    font-size: var(--wp--preset--font-size--xxl);
    line-height: 1.1;
}

/* A column, so the "choose an answer" line can sit under the heading where
   it is seen, rather than under the eleventh card where it is not; the
   legend renders as a legend regardless. */
.ee-scan-fieldset {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ee-scan-fieldset > .ee-field-error {
    order: -1;
    margin: 0 0 14px;
}

/* Floated, the legend gives up its legend rendering and takes the heading's
   margins as an ordinary child; as a flex item it then needs its place at
   the top said explicitly, ahead of the error line. */
.ee-scan-fieldset > legend {
    float: left;
    order: -2;
    width: 100%;
    padding: 0;
}

.ee-scan-fieldset > legend + * { clear: both; }

.ee-scan-fieldset[hidden] { display: none; }

/* The kicker above the summary heading: the label recipe with its dash. */
.ee-scan-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-muted);
}

.ee-scan-kicker::before {
    content: "";
    flex: none;
    inline-size: 28px;
    block-size: 1px;
    background: var(--wp--preset--color--accent);
}

/* Leads narrower than their proza and a step down in colour (brand 4.3). */
.ee-scan-lead {
    max-width: 52ch;
    margin: 0 0 24px;
    font-size: var(--wp--preset--font-size--lg);
    line-height: 1.55;
    color: var(--wp--preset--color--text-secondary);
}

.ee-scan-summary .ee-scan-lead,
.ee-scan-gate .ee-scan-lead,
.ee-scan-confirmation .ee-scan-lead {
    max-width: none;
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.6;
}

.ee-scan-help {
    max-width: 60ch;
    margin: 0 0 20px;
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.6;
    color: var(--wp--preset--color--text-secondary);
}

/* The facts under the cover lead and under the confirmation: hairline rows
   with the sage dash, the same list the brand draws everywhere. */
.ee-scan-facts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ee-scan-facts li {
    position: relative;
    padding: 12px 0 12px 28px;
    border-top: var(--wp--custom--hairline);
    line-height: 1.55;
}

.ee-scan-facts li:last-child { border-bottom: var(--wp--custom--hairline); }

.ee-scan-facts li::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 0;
    width: 14px;
    height: 1px;
    background: var(--wp--preset--color--accent);
}

.ee-scan-smallprint {
    margin: 20px 0 0;
    font-size: var(--wp--preset--font-size--xs);
    line-height: 1.55;
    color: var(--wp--preset--color--text-muted);
}

/* The title over the confirmation's list. (A second question on a screen
   is not a subheading: it carries the heading above, see
   .ee-scan-fieldset-attached.) */
.ee-scan-subheading {
    margin: 28px 0 8px;
    font-size: var(--wp--preset--font-size--md);
    font-weight: 500;
    line-height: 1.4;
}

/* --- Choice cards ----------------------------------------------------------- */

.ee-scan-options {
    display: grid;
    gap: 8px;
    margin: 0;
}

/* One target: the whole card. Rest is a hairline; hover adds the deep line
   and the surface fill (form, not just colour, brand 5.5); checked adds a
   second deep line inside, which is a border and not a shadow.

   Two columns, not a flex row: the control's column is a fixed 20px, so the
   text starts at the same x on every card of a screen whatever the control
   draws. Written under .ee-scan because the card is a label inside the
   theme's contact form, and the theme's `.ee-contact-form label` (block, sm,
   text-secondary, 8px under) would otherwise win on specificity and stack
   the control above the text. The card sets the type it wants explicitly for
   the same reason.

   The card's measures are custom properties: the variants below (systems,
   the short viewport) change the numbers, and a card that holds a name
   field (.ee-scan-named, below) lays its top row and its field out on the
   same numbers, so the field's edge meets the label's text and its height
   is a single-line card's. */
.ee-scan .ee-scan-option {
    --ee-scan-card-control: 20px;
    --ee-scan-card-gap: 14px;
    --ee-scan-card-pad-y: 14px;
    --ee-scan-card-pad-x: 16px;

    box-sizing: border-box;
    position: relative;
    display: grid;
    grid-template-columns: var(--ee-scan-card-control) minmax(0, 1fr);
    column-gap: var(--ee-scan-card-gap);
    align-items: start;
    min-height: var(--wp--custom--button--target);
    margin: 0;
    padding: var(--ee-scan-card-pad-y) var(--ee-scan-card-pad-x);
    border: 1px solid var(--wp--preset--color--border);
    background: var(--wp--preset--color--base);
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.4;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
    transition:
        border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
        background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
        color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-scan .ee-scan-option:hover {
    border-color: var(--wp--preset--color--deep);
    background: var(--wp--preset--color--surface);
}

/* The platform control stays (its checked mark, its high-contrast behaviour);
   only the colour is ours. It inherits the card's type so that its top margin
   can be written in the card's em: half a line (0.7em at line-height 1.4)
   minus half the control puts its centre on the cap centre of the first line
   of the label, at every type size a variant sets. The rules for the control
   name its type: a named card also holds a text field, which is a field, not
   a control of the card. */
.ee-scan .ee-scan-option input:is([type="checkbox"], [type="radio"]) {
    box-sizing: border-box;
    width: var(--ee-scan-card-control);
    height: var(--ee-scan-card-control);
    margin: calc(0.7em - var(--ee-scan-card-control) / 2) 0 0;
    font: inherit;
    line-height: inherit;
    accent-color: var(--wp--preset--color--deep);
    cursor: pointer;
}

/* The ring goes on the card, since that is what the eye follows: the site's
   own ring (sage line, paper halo), so a keyboard user sees one ring
   everywhere. The control gives up its own, or there would be two. A name
   field keeps the site's field ring: it is a field, and the card around it
   is not what is focused. */
.ee-scan .ee-scan-option:has(input:is([type="checkbox"], [type="radio"]):focus-visible) {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--wp--preset--color--base);
}

.ee-scan .ee-scan-option input:is([type="checkbox"], [type="radio"]):focus-visible {
    outline: none;
    box-shadow: none;
}

.ee-scan .ee-scan-option.is-checked {
    border-color: var(--wp--preset--color--deep);
    background: var(--wp--preset--color--surface);
    box-shadow: inset 0 0 0 1px var(--wp--preset--color--deep); /* a second hairline, not a shadow */
}

.ee-scan .ee-scan-option.is-checked:has(input:is([type="checkbox"], [type="radio"]):focus-visible) {
    box-shadow:
        inset 0 0 0 1px var(--wp--preset--color--deep),
        0 0 0 6px var(--wp--preset--color--base);
}

.ee-scan-option-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ee-scan-option-label {
    font-weight: 500;
    line-height: inherit;
}

.ee-scan-option-help {
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.5;
    color: var(--wp--preset--color--text-secondary);
}

/* "Dat weet ik nog niet" as the last of a multi choice stands a little apart:
   an honest answer, not one of the list. */
.ee-scan .ee-scan-options-multi > .ee-scan-option:has(input[data-exclusive]):last-child {
    margin-top: 8px;
    background: transparent;
}

.ee-scan-options-multi > .ee-scan-option:has(input[data-exclusive]):last-child .ee-scan-option-label {
    font-weight: 400;
    color: var(--wp--preset--color--text-secondary);
}

.ee-scan .ee-scan-options-multi > .ee-scan-option.is-checked:has(input[data-exclusive]):last-child {
    background: var(--wp--preset--color--surface);
}

.ee-scan-options-multi > .ee-scan-option.is-checked:has(input[data-exclusive]):last-child .ee-scan-option-label {
    color: var(--wp--preset--color--ink);
}

/* Bands are segments in a row: the control hides, the card is the answer,
   and the chosen one fills deep with a light label (the filter chip's active
   state, brand 6.3; base on deep 9.2:1). */
.ee-scan-options-band {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.ee-scan .ee-scan-options-band .ee-scan-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    font-size: var(--wp--preset--font-size--sm);
    text-align: center;
}

/* A fifth segment ("Dat weet ik nog niet") takes a row of its own rather
   than wrapping its label in a cell built for a number. */
.ee-scan-options-band > .ee-scan-option:nth-child(n + 5):last-child {
    grid-column: 1 / -1;
}

.ee-scan .ee-scan-options-band .ee-scan-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ee-scan .ee-scan-options-band .ee-scan-option:hover {
    background: var(--wp--preset--color--surface-warm);
}

.ee-scan .ee-scan-options-band .ee-scan-option.is-checked {
    border-color: var(--wp--preset--color--deep);
    background: var(--wp--preset--color--deep);
    color: var(--wp--preset--color--base);
    box-shadow: none;
}

/* The systems list has ten cards and more: compact rows, and two columns
   where the panel is wide enough for them. The columns are two stacks
   (render.php), each its own grid of cards, so a card that opens its name
   field grows on its own: the card beside it neither stretches along nor
   leaves a gap under itself. The answer that does not count ("Dat weet ik
   nog niet") is a direct child after the stacks and spans both. */
.ee-scan .ee-scan-options-systems .ee-scan-option {
    --ee-scan-card-control: 18px;
    --ee-scan-card-gap: 12px;
    --ee-scan-card-pad-y: 10px;
    --ee-scan-card-pad-x: 14px;

    font-size: var(--wp--preset--font-size--sm);
}

.ee-scan-options-systems .ee-scan-option-label {
    font-weight: 400;
}

/* A system's name is short and has no help line under it, so the control
   and the text centre on the card's face rather than on a first line (the
   plain card's rule, above). A named card's face (.ee-scan-option-row,
   below) is laid out as the card is and follows; the control's first-line
   margin goes with it. */
.ee-scan .ee-scan-options-systems :is(.ee-scan-option, .ee-scan-option-row) {
    align-items: center;
}

.ee-scan .ee-scan-options-systems .ee-scan-option input:is([type="checkbox"], [type="radio"]) {
    margin-top: 0;
}

.ee-scan-options-stack {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
}

@media (min-width: 720px) {
    .ee-scan-options-systems {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .ee-scan-options-stack ~ .ee-scan-option {
        grid-column: 1 / -1;
    }

    /* Side by side, a row must read as one row, and two stacks cannot share
       a row's height (owner's feedback 29-09-2026). So every card in a stack
       takes the height of a two-line label, which is what the long names run
       to at the column widths the panel gives (about 300px), and a one-line
       name ("Overig", "Rechtstreeks een database") stands as high as its
       neighbour across the gap, its text centred. The minimum is written in
       the label's own line (lh), so it follows the type and never a pixel
       count. A three-line label, which these widths do not produce, grows
       its own card and moves its own stack down, as an opened name field
       does. The answer apart under the stacks keeps its single line, and in
       one column (under 720px) every card keeps its natural height, as the
       cards of every other list do. 2.8em (two lines at line-height 1.4)
       first, for browsers without lh (iOS before 16.4). */
    .ee-scan-options-stack .ee-scan-option-body {
        justify-content: center;
        min-height: 2.8em;
        min-height: 2lh;
    }
}

/* --- A card with a name field ------------------------------------------------ */

/* A ticked system opens its name field inside its card, under the label
   (render.php, eenvoud_scan_render_option). The card keeps its padding at
   zero and hands the measures to its two rows: the top row is the label
   with the control, laid out as a plain card is; the field under it starts
   where the label's text starts and ends at the card's edge, so it reads as
   part of the answer, not a field of its own. */
.ee-scan .ee-scan-named {
    display: block;
    padding: 0;
}

/* The card's face. Written under .ee-scan for the same reason as the card
   itself: the theme's `.ee-contact-form label` would otherwise size and
   colour it as a field label. */
.ee-scan .ee-scan-option-row {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: var(--ee-scan-card-control) minmax(0, 1fr);
    column-gap: var(--ee-scan-card-gap);
    align-items: start;
    min-height: calc(var(--wp--custom--button--target) - 2px); /* the card's minimum, inside its hairlines */
    margin: 0;
    padding: var(--ee-scan-card-pad-y) var(--ee-scan-card-pad-x);
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    cursor: pointer;
}

/* The field's row: the label's text column, then the card's bottom padding.
   The room around the field belongs to the field, not the card: a press
   there focuses the field (scan.js) and the pointer says so, since the
   card's hand would promise a toggle. It comes in as a card does (brand
   5.5); reduced motion switches that off with the rest, at the end of this
   sheet. */
.ee-scan .ee-scan-name {
    margin: 0;
    padding: 0 var(--ee-scan-card-pad-x) var(--ee-scan-card-pad-y) calc(var(--ee-scan-card-pad-x) + var(--ee-scan-card-control) + var(--ee-scan-card-gap));
    cursor: auto;
    animation: ee-scan-card-in var(--wp--custom--motion--duration-reveal) var(--wp--custom--motion--easing) both;
}

.ee-scan .ee-scan-name[hidden] { display: none; }

/* One measure with a single-line card: the same vertical padding around the
   same line, inside the same hairline, and the same minimum target. */
.ee-scan .ee-scan-name input {
    min-block-size: var(--wp--custom--button--target);
    padding-block: var(--ee-scan-card-pad-y);
    font-size: var(--wp--preset--font-size--sm);
    line-height: inherit;
}

.ee-scan .ee-scan-name .ee-scan-name-label {
    margin: 0 0 6px;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-secondary);
}

.ee-scan .ee-scan-name .ee-field-error {
    margin: 6px 0 0;
}

/* The free text: a taller field and the reminder under it, in the small
   print with the dash. */
.ee-scan .ee-field textarea {
    min-height: 128px;
    resize: vertical;
}

.ee-scan-warning {
    display: flex;
    gap: 10px;
    margin: 10px 0 0;
    font-size: var(--wp--preset--font-size--xs);
    line-height: 1.5;
    color: var(--wp--preset--color--text-muted);
}

.ee-scan-warning::before {
    content: "";
    flex: none;
    inline-size: 14px;
    block-size: 1px;
    margin-top: 0.75em;
    background: var(--wp--preset--color--accent);
}

/* A second question on the same screen, under a hairline. Its legend is the
   same heading as the first question's (one type size per screen, owner's
   feedback 29-09-2026), so it starts under its hairline at the distance the
   first starts under the progress bar (20px), and the cards above keep a
   little more than that to the line, so the title stands off them. */
.ee-scan-fieldset-attached {
    margin-top: 28px;
    padding-top: 20px;
    border-top: var(--wp--custom--hairline);
}

/* The theme paints errors in sage text; the cards echo it on their edge. */
.ee-scan .ee-scan-fieldset.has-error .ee-scan-option { border-color: var(--wp--preset--color--accent); }

.ee-scan .ee-field-error[hidden] { display: none; }

.ee-scan .ee-field-hint {
    margin: 6px 0 0;
    font-size: var(--wp--preset--font-size--xs);
    line-height: 1.5;
    color: var(--wp--preset--color--text-secondary);
}

.ee-scan .ee-field-hint[hidden] { display: none; }

/* --- Summary cards ---------------------------------------------------------- */

/* Positioned: the outcome's drawing fades out over the cards' place when
   it hands over (below). */
.ee-scan-result {
    position: relative;
    margin: 0;
}

/* The live region inside it holds the cards: the route, then the columns. */
.ee-scan-result-live {
    display: grid;
    gap: 12px;
}

/* The contact strip after the result keeps the cards' own distance. */
.ee-scan-result ~ .ee-scan-contact { margin-top: 12px; }

.ee-scan-result.is-loading { min-height: 140px; }

/* While the server evaluates, the contact strip waits behind the loading
   line and comes in with the cards; a preview that fails hides the loading
   line (the script) and leaves the strip in view. While the outcome's
   drawing plays (is-drawing) the strip stays in view under it: the way to
   Rik is open during the wait as well. */
.ee-scan-result.is-loading:not(.is-drawing) ~ .ee-scan-contact { display: none; }

.ee-scan-loading[hidden] { display: none; }

/* While the server evaluates: the dash grows from nothing, over and over. */
.ee-scan-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-muted);
}

.ee-scan-loading::before {
    content: "";
    flex: none;
    inline-size: 28px;
    block-size: 1px;
    background: var(--wp--preset--color--accent);
    transform-origin: left;
    animation: ee-scan-grow 1.1s var(--wp--custom--motion--easing) infinite;
}

@keyframes ee-scan-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* --- The outcome's drawing (design D18) ------------------------------------- */

/* The machine in a hairline box on surface, one card like the ones that
   follow it; the status line under it in the loading line's recipe, the
   counter in mono (what stands, brand 4.1) and the skip as a pijl-link.
   The script builds the drawing as SVG and moves it frame by frame; this
   sheet only gives it its lines. The line colour is a derivative of the ink
   series (brand 3.2), the accent the found column. */
.ee-scan-anim {
    --ee-scan-line: color-mix(in srgb, var(--wp--preset--color--text-muted) 55%, var(--wp--preset--color--base));

    position: relative;
}

.ee-scan-anim[hidden] { display: none; }

/* The cards take the drawing's place while it fades out under them. */
.ee-scan-anim.is-leaving {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 320ms var(--wp--custom--motion--easing);
}

.ee-scan-anim-stage {
    overflow: hidden;
    border: var(--wp--custom--hairline);
    background: var(--wp--preset--color--surface);
}

.ee-scan-anim-stage svg {
    display: block;
    width: 100%;
    height: auto;
}

.ee-scan-anim-frame,
.ee-scan-anim-ring { stroke: var(--wp--preset--color--text-secondary); }

.ee-scan-anim-ring { fill: var(--wp--preset--color--surface); }

.ee-scan-anim-bank,
.ee-scan-anim-rail,
.ee-scan-anim-tick,
.ee-scan-anim-hub { stroke: var(--ee-scan-line); }

.ee-scan-anim-index { stroke: var(--wp--preset--color--ink); }

.ee-scan-anim-found { stroke: var(--wp--preset--color--accent); }

.ee-scan-anim.is-found .is-found-column .ee-scan-anim-ring {
    stroke: var(--wp--preset--color--accent);
    stroke-width: 1.8;
}

.ee-scan-anim-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    min-height: 44px;
    margin-top: 12px;
}

/* Status and counter share a line; on a phone the skip link drops under it. */
.ee-scan-anim-line {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

@media (max-width: 559px) {
    .ee-scan-anim-line { flex-basis: 100%; }
}

.ee-scan-anim-status {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-muted);
}

.ee-scan-anim-status::before {
    content: "";
    flex: none;
    inline-size: 28px;
    block-size: 1px;
    background: var(--wp--preset--color--accent);
}

/* The status swaps its text under a short fade, timed by the script. */
.ee-scan-anim-status span {
    display: inline-block;
    transition: opacity var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-scan-anim-status span.is-out { opacity: 0; }

.ee-scan-anim-counter {
    flex: none;
    margin: 0;
    font-family: var(--wp--preset--font-family--mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--wp--preset--color--text-muted);
}

.ee-scan-anim-counter:empty { display: none; }

/* On a phone the counter would push the status onto two lines; the
   status is the one that says something. */
@media (max-width: 479px) {
    .ee-scan-anim-counter { display: none; }
}

/* The cards arrive in order, 110ms apart (brand 5.5: siblings 80-140ms);
   the script numbers them in --ee-scan-i. */
.ee-scan-card {
    padding: 22px 24px;
    border: var(--wp--custom--hairline);
    animation: ee-scan-card-in var(--wp--custom--motion--duration-reveal) var(--wp--custom--motion--easing) both;
    animation-delay: calc(var(--ee-scan-i, 0) * 110ms);
}

.ee-scan-card-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-muted);
}

.ee-scan-card-kicker::before {
    content: "";
    flex: none;
    inline-size: 28px;
    block-size: 1px;
    background: var(--wp--preset--color--accent);
}

.ee-scan-card-title {
    margin: 0 0 10px;
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: inherit;
}

.ee-scan-card-text {
    margin: 0;
    line-height: 1.6;
}

/* The route: the one pine card, the ground of the outcome. Text on it is the
   dark trio only: base, muted on dark, zand (brand 3.5). */
.ee-scan-card-route {
    padding: 26px 28px;
    border-color: var(--wp--preset--color--pine);
    background: var(--wp--preset--color--pine);
    color: var(--wp--preset--color--base);
}

.ee-scan-card-route .ee-scan-card-kicker { color: var(--wp--preset--color--muted-on-dark); }

.ee-scan-card-route .ee-scan-card-kicker::before { background: var(--wp--preset--color--accent-soft); }

.ee-scan-card-route .ee-scan-card-text { color: var(--wp--preset--color--muted-on-dark); }

/* The band as a stat: small label, Lora value (brand 6.5). The rule above it
   is a derivative of the trio, not a picked hex. */
.ee-scan-band {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--muted-on-dark) 35%, transparent);
}

.ee-scan-band-label {
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted-on-dark);
}

.ee-scan-band-value {
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 400;
    line-height: 1.2;
    color: var(--wp--preset--color--base);
}

/* Numbered lists: the number in Lora, the hairline between items. The items
   follow their card in sequence (design D4). */
.ee-scan-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ee-scan-item;
}

.ee-scan-list-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 4px;
    padding: 14px 0;
    border-top: var(--wp--custom--hairline);
    counter-increment: ee-scan-item;
    animation: ee-scan-card-in var(--wp--custom--motion--duration-reveal) var(--wp--custom--motion--easing) both;
    animation-delay: calc(var(--ee-scan-i, 0) * 110ms + 120ms + var(--ee-scan-n, 0) * 120ms);
}

.ee-scan-list-item:first-child {
    padding-top: 4px;
    border-top: 0;
}

.ee-scan-list-item:last-child { padding-bottom: 2px; }

.ee-scan-list-item:nth-child(1) { --ee-scan-n: 0; }
.ee-scan-list-item:nth-child(2) { --ee-scan-n: 1; }
.ee-scan-list-item:nth-child(3) { --ee-scan-n: 2; }

/* A 24px numeral is large text, where sage passes (4.9:1 on base). */
.ee-scan-list-item::before {
    content: counter(ee-scan-item);
    grid-row: 1 / span 4;
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--xl);
    line-height: 1;
    color: var(--wp--preset--color--accent);
}

.ee-scan-list-title {
    display: block;
    grid-column: 2;
    font-weight: 500;
    line-height: 1.4;
}

.ee-scan-list-text {
    display: block;
    grid-column: 2;
    margin-top: 3px;
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.55;
    color: var(--wp--preset--color--text-secondary);
}

.ee-scan-list-meta {
    display: block;
    grid-column: 2;
    margin-top: 4px;
    font-size: var(--wp--preset--font-size--xs);
    line-height: 1.5;
    color: var(--wp--preset--color--text-muted);
}

.ee-scan-next {
    margin: 20px 0 0;
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.6;
    color: var(--wp--preset--color--text-secondary);
}

/* --- Direct contact --------------------------------------------------------- */

/* The person-CTA in the panel (brand 6.7): portrait, one sentence with a
   bold lead-in, and a phone and a mail button. The buttons are the compact
   outlined fill, since they sit inside a card and neither is the screen's
   primary action (that is the button in the foot); the theme's sweep and
   arrow step come with the button classes, only the rest state is set here.
   The card is .ee-scan-card as well, so it takes the cards' hairline,
   padding and staggered entrance. On both screens it is the strip
   (.ee-scan-contact-strip): after the result's columns on the summary,
   under the promise on the confirmation, outside the result's live region. */
.ee-scan-contact {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px 18px;
    align-items: start;
    background: var(--wp--preset--color--surface);
}

.ee-scan-contact-portrait {
    grid-row: 1 / span 2;
    display: block;
    inline-size: 56px;
    block-size: 56px;
    overflow: hidden;
    border-radius: 50%; /* the site's portrait slot (.ee-person-avatar), not a box */
    border: var(--wp--custom--hairline);
    background: var(--wp--preset--color--surface-warm);
}

.ee-scan-contact-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ee-scan-contact-copy {
    grid-column: 2;
    margin: 0;
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.55;
    color: var(--wp--preset--color--text-secondary);
}

.ee-scan-contact-copy strong {
    font-weight: 500;
    color: var(--wp--preset--color--ink);
}

/* The buttons under portrait and sentence, side by side where the two fit
   and stacked where they do not. */
.ee-scan-contact-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/* Outlined at rest; the theme's hover (accent sweep, light label) is more
   specific and takes over from there. */
.ee-scan-contact .wp-block-button__link {
    background: transparent;
    border-color: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--ink);
}

/* On a phone the card is one column: a smaller portrait on its own row, the
   sentence over the card's full width under it (beside the portrait it ran
   to five short lines), then the buttons, each the full width and still the
   compact height. */
@media (max-width: 479px) {
    .ee-scan-contact {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 12px;
    }

    .ee-scan-contact-portrait {
        grid-row: auto;
        inline-size: 48px;
        block-size: 48px;
    }

    .ee-scan-contact-copy,
    .ee-scan-contact-actions {
        grid-column: 1;
    }

    /* Full width and the standard height: on a phone these two are the
       screen's tap targets, not a row of small controls in a card. */
    .ee-scan-contact-actions .wp-block-button,
    .ee-scan-contact-actions .wp-block-button__link {
        width: 100%;
    }

    /* Outranks the theme's .ee-btn-compact.wp-block-button .wp-block-button__link. */
    .ee-scan .ee-scan-contact .ee-btn-compact .wp-block-button__link {
        min-block-size: var(--wp--custom--button--height);
    }
}

/* --- The wide panel --------------------------------------------------------- */

/* From 720px the route card seats its band beside the text as a stat: the
   text keeps a reading measure, the band gets a rule down its left instead
   of one across its top. */
@media (min-width: 720px) {
    .ee-scan-card-route {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 40px;
    }

    .ee-scan-card-route > :not(.ee-scan-band) { grid-column: 1; }

    .ee-scan-card-route .ee-scan-card-text { max-width: 62ch; }

    .ee-scan-card-route .ee-scan-band {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: start;
        min-inline-size: 150px;
        margin: 0;
        padding: 2px 0 0 32px;
        border-top: 0;
        border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--muted-on-dark) 35%, transparent);
    }

    .ee-scan-card-route .ee-scan-band-value {
        font-size: var(--wp--preset--font-size--xxl);
        line-height: 1.1;
    }
}

/* From 900px the panel is at its full width: the summary's columns sit side
   by side, the gate's copy stands beside its fields, and a contact card that
   has the width to itself becomes the person strip (brand 6.7): portrait,
   sentence, buttons in one row. A lead keeps a reading measure. */
@media (min-width: 900px) {
    .ee-scan-summary .ee-scan-lead { max-width: 64ch; }

    /* A list's three points side by side, a hairline between them (the
       brand's row of three, 6.5), so a card is as tall as its longest point
       and the panel holds the outcome in one view. */
    .ee-scan-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 28px;
    }

    /* An item stretches to the tallest of the three (its hairline runs the
       full height) but keeps its own lines together at the top. */
    .ee-scan-list-item {
        align-content: start;
        padding: 4px 0 2px;
        border-top: 0;
    }

    .ee-scan-list-item + .ee-scan-list-item {
        padding-left: 28px;
        border-left: var(--wp--custom--hairline);
    }

    .ee-scan-contact-strip {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        column-gap: 24px;
        align-items: center;
    }

    .ee-scan-contact-strip .ee-scan-contact-portrait { grid-row: auto; }

    .ee-scan-contact-strip .ee-scan-contact-copy { max-width: 44ch; }

    .ee-scan-contact-strip .ee-scan-contact-actions {
        grid-column: 3;
        grid-row: 1;
        flex-wrap: nowrap;
    }

    .ee-scan-gate {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: 48px;
        align-items: start;
    }

    .ee-scan-gate .ee-scan-lead { margin-bottom: 0; }

    /* In the narrower fields column the phone field takes a row of its own,
       like the channel cards above it. */
    .ee-scan-gate .ee-scan-field-phone { grid-column: 1 / -1; }

    .ee-scan-gate .ee-scan-options-channel { max-width: 360px; }
}

/* --- The lead gate ---------------------------------------------------------- */

/* Two columns where two short answers sit well together; the address has
   the row to itself. Below 600px everything stacks. A row aligns at the top:
   a field may grow a hint and an error under it, and the field beside it
   keeps its height instead of stretching to the hint's. */
.ee-scan-gate .ee-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 2px 16px;
}

.ee-scan-gate .ee-field {
    min-width: 0;
    margin: 0 0 14px;
}

/* The fields take the target height as a value, the same one the channel
   cards beside them have, so the row ends on one line (brand 6.1). */
.ee-scan-gate .ee-field input {
    min-block-size: var(--wp--custom--button--target);
}

.ee-scan-field-full { grid-column: 1 / -1; }

/* The PDF report tick box is a card like the channels, and its control keeps
   the card's own size rather than the fields' target height. */
.ee-scan-gate .ee-scan-report .ee-scan-option input { min-block-size: 0; }

/* The contact-channel fieldset is not a box; its legend is a label, styled
   as the theme styles a field label. It has the row to itself, right above
   the phone field whose required state it decides (render.php). */
.ee-scan-channel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.ee-scan-channel legend {
    float: left;
    width: 100%;
    margin-bottom: 8px;
    padding: 0;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-secondary);
}

.ee-scan-channel legend + * { clear: both; }

/* The two channels as a pair of cards, the height of a field; one line
   each, so control and label centre on the card rather than on a first
   line. */
.ee-scan-options-channel {
    flex: 1 1 auto;
    grid-template-columns: 1fr 1fr;
    margin: 0;
}

.ee-scan .ee-scan-options-channel .ee-scan-option {
    align-items: center;
    min-height: var(--wp--custom--button--target);
    padding: 6px 12px;
    font-size: var(--wp--preset--font-size--sm);
}

.ee-scan .ee-scan-options-channel .ee-scan-option input { margin: 0; }

.ee-scan-options-channel .ee-scan-option-label {
    font-weight: 400;
}

/* The live company lookup (lookup.php, scan.js). The note under the company
   field is the field hint; it carries the lookup's status in place. The
   choices are a row of plain hairline buttons under the name and company,
   one per candidate plus "none of these": not a popup and not cards, so the
   gate stays one form. */
/* Room for three lines, so the usual statuses change text, not height. */
.ee-scan .ee-scan-lookup-note { min-height: 4.5em; }

.ee-scan-gate .ee-scan-lookup { margin-top: -4px; }

.ee-scan-gate .ee-scan-lookup[hidden] { display: none; }

.ee-scan-lookup-prompt {
    margin: 0 0 8px;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-secondary);
}

.ee-scan-lookup-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ee-scan .ee-scan-lookup-choice {
    box-sizing: border-box;
    min-height: var(--wp--custom--button--target);
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 0;
    background: var(--wp--preset--color--base);
    font: inherit;
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.4;
    color: var(--wp--preset--color--ink);
    text-align: left;
    cursor: pointer;
    transition:
        border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
        background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-scan .ee-scan-lookup-choice:hover {
    border-color: var(--wp--preset--color--deep);
    background: var(--wp--preset--color--surface);
}

.ee-scan .ee-scan-lookup-choice:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

.ee-scan .ee-scan-lookup-none { color: var(--wp--preset--color--text-secondary); }

/* The consent line is the gate's last element; the stage's own padding is
   the distance to the foot, the same as on every other screen. */
.ee-scan-gate .ee-form-privacy { margin-bottom: 0; }

@media (max-width: 599px) {
    .ee-scan-gate .ee-form-fields { grid-template-columns: 1fr; }
}

/* --- The navigation row ----------------------------------------------------- */

.ee-scan .ee-modal-foot { padding-top: 14px; }

.ee-scan .ee-form-status:not(:empty) {
    margin: 0 0 12px;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--accent);
}

.ee-scan-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ee-scan-nav .wp-block-buttons { margin: 0 0 0 auto; }

/* Back is the arrow link (brand 6.2), pointing the other way: 14px, ink,
   a sage rule under label and arrow; hover deepens both and the arrow steps
   back 6px with the rule growing to meet it. A button, since it is one. */
/* The back link and the drawing's skip link share the pijl-link recipe
   (brand 6.2): label in ink, a sage line under label and arrow, and on
   hover the line thickens and grows the 6px the arrow steps. */
.ee-scan-back,
.ee-scan-anim-skip {
    position: relative;
    display: inline-block;
    flex: none;
    padding: 10px 0;
    white-space: nowrap;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.4;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
    transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-scan-anim-skip::before {
    content: "";
    position: absolute;
    inset: auto 0 7px;
    block-size: 1px;
    background: var(--wp--preset--color--accent);
    transition:
        block-size var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
        background var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
        right var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-scan-anim-skip:hover,
.ee-scan-anim-skip:focus-visible {
    color: var(--wp--preset--color--deep);
}

/* Out of use while the drawing fades under the cards. */
.ee-scan-anim-skip:disabled { cursor: default; }

.ee-scan-anim-skip:hover::before,
.ee-scan-anim-skip:focus-visible::before {
    right: -6px;
    block-size: 2px;
    background: var(--wp--preset--color--deep);
}

.ee-scan-back::before {
    content: "";
    position: absolute;
    inset: auto 0 7px;
    block-size: 1px;
    background: var(--wp--preset--color--accent);
    transition:
        block-size var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
        background var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
        left var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-scan-back:hover,
.ee-scan-back:focus-visible {
    color: var(--wp--preset--color--deep);
}

.ee-scan-back:hover::before,
.ee-scan-back:focus-visible::before {
    left: -6px;
    block-size: 2px;
    background: var(--wp--preset--color--deep);
}

.ee-scan-back[hidden] { display: none; }

/* The primary button ends on the arrow like every button on the site
   (brand 6.1). The script replaces the label text per screen, so the arrow is
   drawn here rather than carried as an element; the empty alternative text
   keeps it out of the accessible name. The closing screen's "Sluiten" is a
   dismissal, not a step, and goes without. */
.ee-scan-next-button::after {
    content: "\2192" / "";
    display: inline-block;
    margin-left: 0.22em;
    transition: translate var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-scan[data-screen="confirmation"] .ee-scan-next-button::after { content: none; }

.ee-scan-next-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

@media (prefers-reduced-motion: no-preference) {
    .ee-scan-back:hover .ee-arrow,
    .ee-scan-back:focus-visible .ee-arrow,
    .ee-scan-anim-skip:hover .ee-arrow,
    .ee-scan-anim-skip:focus-visible .ee-arrow {
        translate: calc(var(--ee-arrow-dir, 1) * 6px) 0;
    }

    .ee-scan-next-button:hover::after,
    .ee-scan-next-button:focus-visible::after {
        translate: 6px 0;
    }
}

.ee-scan-count { display: none; }

/* On a phone the primary label has the row minus the back link; a narrower
   inline padding keeps "Ontvang het volledige rapport" on one line longer. */
@media (max-width: 479px) {
    .ee-scan-nav .wp-block-button__link { padding-inline: 18px; }
}

/* Under 390px the row is 244px inside the padding and the three long labels
   measure 223 to 238px at md (Instrument Sans, measured 2026-09-28), so they
   broke over two lines. At sm they measure 186 to 201px and stay whole; the
   button keeps the standard height, so the label changes size, not the
   target. From 390px up everything fits at md. */
@media (max-width: 389px) {
    .ee-scan-nav .wp-block-button__link { font-size: var(--wp--preset--font-size--sm); }
}

/* --- Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ee-scan-screen.is-entering,
    .ee-scan-screen.is-entering .ee-scan-option,
    .ee-scan .ee-scan-name,
    .ee-scan-card,
    .ee-scan-list-item,
    .ee-scan-loading::before {
        animation: none;
    }

    .ee-scan-progress-bar,
    .ee-scan .ee-scan-option,
    .ee-scan-back,
    .ee-scan-back::before,
    .ee-scan-anim-skip,
    .ee-scan-anim-skip::before,
    .ee-scan-anim-status span,
    .ee-scan-anim.is-leaving,
    .ee-scan-next-button::after {
        transition: none;
    }

    /* The script plays no drawing under reduced motion; the sheet keeps the
       block out of view as well, so nothing of it can show. */
    .ee-scan-anim { display: none; }
}

/* --- Short viewports -------------------------------------------------------- */

/* The head and the foot are the fixed parts, the stage scrolls (spec:
   contact-form, "operable on a short viewport"); at 640px and under they give
   back what they can. */
@media (max-height: 640px) {
    .ee-scan .ee-modal-head { padding-bottom: 10px; }
    .ee-scan-stage { padding-bottom: 16px; }
    .ee-scan-progress-row { margin-top: 12px; }
    .ee-scan-heading { font-size: var(--wp--preset--font-size--lg); }

    .ee-scan-intro .ee-scan-heading,
    .ee-scan-confirmation .ee-scan-heading { font-size: var(--wp--preset--font-size--xl); }

    .ee-scan-lead { margin-bottom: 16px; }

    .ee-scan .ee-scan-option {
        --ee-scan-card-pad-y: 10px;
        --ee-scan-card-pad-x: 12px;
    }

    .ee-scan .ee-modal-foot {
        padding-top: 10px;
        padding-bottom: 16px;
    }
}

/* --- Narrow screens: the primary action gets the full width ------------------ */

@media (max-width: 480px) {
    .ee-scan-nav {
        flex-wrap: wrap;
    }

    .ee-scan-nav .wp-block-buttons {
        flex: 1 1 100%;
        margin: 0;
    }

    .ee-scan-nav .wp-block-button,
    .ee-scan-nav .wp-block-button__link {
        width: 100%;
    }

    .ee-scan-nav .ee-scan-back {
        order: 2;
        margin-top: 12px;
    }
}