/* ==========================================================================
   Quick scan: de korte vragenlijst in de hero van de voorpagina
   Markup uit inc/quick-scan.php, gedrag in js/quick-scan.js.

   Alles hier staat onder .hero--quickscan (de hero voor uitgelogde bezoekers)
   of heeft de prefix .qs-. De hero van ingelogde leden krijgt die class niet
   en blijft dus ongemoeid. De stylesheet laadt na main.css, components.css en
   wordpress-pages.css (zie ttp_quick_scan_enqueue()).

   Kleuren komen uit de variabelen van main.css. Oranje (--color-primary) is
   er alleen voor de primaire knop, de slider (duim en gevuld spoor), de
   actieve stap, het cijfer naast de slider en de linkerrand van de
   (i)-panelen. De doorschijnende tinten hieronder zijn lokale variabelen,
   omdat main.css geen glas-, fout- of succeskleur kent.
   ========================================================================== */

.hero--quickscan {
    /* Hoogte van de vaste themanavigatie (.nav, position: fixed). */
    --qs-nav-h: 91px;
}

.qs-layout {
    --qs-text: var(--color-white);
    --qs-muted: rgba(255, 255, 255, 0.72);
    --qs-faint: rgba(255, 255, 255, 0.55);
    --qs-glass: rgba(255, 255, 255, 0.07);
    --qs-glass-strong: rgba(255, 255, 255, 0.1);
    --qs-border: rgba(255, 255, 255, 0.13);
    --qs-border-strong: rgba(255, 255, 255, 0.26);
    /* Doorschijnende varianten van --color-dark en --color-primary. De vaste
       waarden zijn de terugval; waar color-mix() bestaat volgen ze de
       variabelen van main.css (zie het @supports-blok hieronder). */
    --qs-field-bg: rgba(26, 27, 35, 0.42);
    --qs-ring: rgba(255, 107, 53, 0.4);
    --qs-danger: #FCA5A5;
    --qs-danger-bg: rgba(239, 68, 68, 0.16);
    --qs-danger-border: rgba(248, 113, 113, 0.55);
    --qs-success: #4ADE80;
    --qs-success-bg: rgba(74, 222, 128, 0.14);
    --qs-success-border: rgba(74, 222, 128, 0.45);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .qs-layout {
        --qs-field-bg: color-mix(in srgb, var(--color-dark) 42%, transparent);
        --qs-ring: color-mix(in srgb, var(--color-primary) 40%, transparent);
    }
}

/* --------------------------------------------------------------------------
   Hero: ruimte onder de vaste navigatie, inhoud boven de oranje vormen
   -------------------------------------------------------------------------- */

/* .hero is een flex-container; zonder vaste breedte krimpt de container naar
   zijn inhoud. De oranje vormen (.hero__shape) hebben z-index 100 en .hero
   maakt geen eigen stacking context, dus 101 zet de inhoud erboven. Dat
   blijft onder de vaste navigatie (1000) en de modals (2000). */
.hero--quickscan .hero__container {
    width: 100%;
    z-index: 101;
    padding-top: calc(var(--qs-nav-h) + clamp(2.5rem, 4.5vw, 4rem));
}

/* De oranje vorm linksboven hangt in main.css tot ongeveer 270px onder de
   bovenrand. Nu de inhoud boven de vormen ligt, zou de kop er half overheen
   staan: witte en oranje letters op oranje. De vorm schuift daarom omhoog tot
   net boven de kop; er blijft een rand van onder de navigatie zichtbaar.
   Tot 1024px is de vorm in main.css kleiner (400 x 300), vandaar twee maten.
   De 20px speling is de uitslag van de zweefanimatie uit animations.js. */
.hero--quickscan .hero__shape--1 {
    top: -230px;
}

@media (min-width: 1025px) {
    .hero--quickscan .hero__shape--1 {
        top: -335px;
    }
}

/* De grote bovenmarge in components.css hield de knoppen onder de absoluut
   gepositioneerde monnik met statkaarten. Die staat hier niet meer. Twee
   classes winnen van .hero-cta-stack, ook binnen de min-width-regel daar. */
.hero--quickscan .hero-cta-stack {
    margin-top: 2.5rem;
}

.qs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 2rem;
    width: 100%;
    color: var(--qs-text);
}

.qs-layout > * {
    min-width: 0;
}

/* Het hidden-attribuut moet altijd winnen van de display-regels van de
   onderdelen hieronder (flex, grid). Daarom hier !important: een toestand of
   paneel dat JS verbergt mag nooit door een latere display-regel terugkomen. */
.qs-layout [hidden] {
    display: none !important;
}

/* main.css geeft elke p 1.1rem, grijs en een ondermarge. Binnen de quick
   scan begint elke alinea neutraal; de classes hieronder zetten de maat.
   :where() houdt de specificiteit op die van een kale p, zodat elke class
   het hiervan wint. */
:where(.qs-intro, .qs-card) p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: inherit;
}

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

/* Honeypot: buiten beeld, niet display:none (dat slaan bots over). */
.qs-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Intro (links)
   -------------------------------------------------------------------------- */

.qs-intro {
    width: 100%;
    max-width: 38rem;
    text-align: center;
}

/* 4vw en niet groter: boven 900px staat de kaart ernaast en moet de eerste
   regel (8,7em breed) in de linkerkolom passen. */
.qs-title {
    margin: 0 0 1.25rem;
    font-size: clamp(2.1rem, 4vw, 3.6rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--qs-text);
    text-wrap: balance;
}

.qs-title__line {
    display: block;
}

/* Zelfde techniek als .hero__title-highlight in main.css. De ondermarge
   voorkomt dat de staart van de j wordt afgesneden door background-clip. */
.qs-title__accent {
    padding-bottom: 0.12em;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary);
}

.qs-intro .qs-intro__sub {
    margin: 0 auto 1.25rem;
    max-width: 34rem;
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}

.qs-intro .qs-intro__micro {
    display: inline-block;
    padding: 0.45rem 0.95rem;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    color: var(--qs-muted);
    background: var(--qs-glass);
    border: 1px solid var(--qs-border);
    border-radius: 999px;
}

/* De monnik staat alleen naast de kaart, boven 900px. */
.qs-intro__monk {
    display: none;
}

.qs-intro__monk-img {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.4));
}

/* --------------------------------------------------------------------------
   Kaart
   -------------------------------------------------------------------------- */

.qs-card {
    position: relative;
    width: 100%;
    max-width: 540px;
    padding: clamp(1.15rem, 2.4vw, 1.85rem);
    text-align: left;
    color: var(--qs-text);
    background: var(--qs-glass);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--qs-border);
    border-radius: 20px;
    box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Stapindicator: twee segmenten. In de resultaat- en de verstuurd-toestand
   is er geen stap meer en verdwijnt hij. */
.qs-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 1.15rem;
}

.qs-steps__seg {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    transition: background-color 0.25s ease;
}

.qs-card[data-qs-current="step1"] .qs-steps__seg:first-child,
.qs-card[data-qs-current="step2"] .qs-steps__seg,
.qs-card[data-qs-current="loading"] .qs-steps__seg {
    background: var(--color-primary);
}

.qs-card[data-qs-current="result"] .qs-steps,
.qs-card[data-qs-current="sent"] .qs-steps {
    display: none;
}

/* Wisselen van toestand: kort invloeien. Pas na het laden (data-qs-ready),
   zodat de eerste weergave van de pagina niet beweegt. Zonder fill-mode: na
   afloop blijft er geen transform op de toestand achter. */
.qs-card[data-qs-ready] .qs-state {
    animation: qs-in 0.22s ease-out;
}

@keyframes qs-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qs-state--center {
    text-align: center;
}

/* Stap 2 is lang, de laadtoestand kort. Een minimumhoogte dempt de sprong
   van de kaart en van alles wat eronder staat. */
.qs-state[data-qs-state="loading"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 24rem;
}

.qs-card .qs-kicker {
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--qs-muted);
}

.qs-heading {
    margin: 0 0 1.1rem;
    font-size: clamp(1.35rem, 2.1vw, 1.6rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--qs-text);
}

/* De koppen krijgen de focus bij een wissel van toestand (tabindex -1). Ze
   zijn niet bedienbaar, dus geen focusrand. */
.qs-heading:focus {
    outline: none;
}

.qs-card .qs-lead {
    margin: -0.4rem 0 1.15rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--qs-muted);
}

/* --------------------------------------------------------------------------
   Velden
   -------------------------------------------------------------------------- */

.qs-field {
    margin-bottom: 1rem;
    min-width: 0;
}

.qs-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1rem;
}

.qs-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--qs-text);
}

.qs-card .qs-hint {
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--qs-muted);
}

.qs-input,
.qs-select {
    display: block;
    width: 100%;
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 0.875rem;
    font-family: var(--font-primary);
    /* 16px: kleiner laat iOS inzoomen bij focus. */
    font-size: 16px;
    font-weight: var(--font-weight-normal);
    line-height: 1.2;
    color: var(--qs-text);
    background-color: var(--qs-field-bg);
    border: 1px solid var(--qs-border-strong);
    border-radius: 12px;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.qs-input::placeholder {
    color: var(--qs-faint);
    opacity: 1;
}

.qs-input:hover,
.qs-select:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

/* Doorzichtige outline in plaats van geen: in de hoog-contrastmodus van
   Windows vervalt de box-shadow en wordt de outline zichtbaar. */
.qs-input:focus,
.qs-select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--qs-ring);
}

.qs-input[aria-invalid="true"],
.qs-select[aria-invalid="true"] {
    border-color: var(--qs-danger-border);
}

/* Automatisch invullen van de browser: geen lichtgele achtergrond met
   donkere tekst op het donkere glas. */
.qs-input:-webkit-autofill,
.qs-input:-webkit-autofill:hover,
.qs-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-white);
    caret-color: var(--color-white);
    box-shadow: 0 0 0 1000px var(--color-navy) inset;
    transition: background-color 600000s 0s, color 600000s 0s;
}

.qs-input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--color-navy) inset, 0 0 0 3px var(--qs-ring);
}

.qs-select {
    padding-right: 2rem;
    text-overflow: ellipsis;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 8px;
}

/* Zolang de lege keuze (Dag, Maand, ...) geselecteerd is: gedempte tekst. */
.qs-select:has(option[value=""]:checked) {
    color: var(--qs-faint);
}

/* De uitklaplijst tekent het besturingssysteem: donkere tekst op wit, anders
   staat er witte tekst op een witte lijst. */
.qs-select option {
    color: var(--color-dark);
    background-color: var(--color-white);
}

.qs-select option:disabled {
    color: var(--color-gray);
}

.qs-dob {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr) minmax(0, 1.05fr);
    gap: 0.5rem;
}

.qs-time {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem;
    max-width: 14rem;
}

.qs-time__sep {
    font-weight: var(--font-weight-semibold);
    color: var(--qs-muted);
}

/* --------------------------------------------------------------------------
   (i)-knoppen en panelen
   -------------------------------------------------------------------------- */

.qs-info-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.8125rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 50%;
}

/* Knop met tekst ("Waarom vraag ik dit?"). */
.qs-info-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.35rem 0;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    color: var(--qs-muted);
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.qs-info-toggle__text {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 3px;
}

.qs-info-toggle:hover,
.qs-info-toggle[aria-expanded="true"] {
    color: var(--qs-text);
}

/* Knop met alleen het icoon, naast het label van een levensgebied. Het
   ::after-vlak maakt het raakvlak 40px zonder de rij hoger te maken. */
.qs-info-btn {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: var(--qs-faint);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.qs-info-btn::after {
    content: '';
    position: absolute;
    inset: -10px;
}

.qs-info-btn:hover,
.qs-info-btn[aria-expanded="true"] {
    color: var(--qs-text);
}

.qs-info-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.16);
}

.qs-info-toggle:focus-visible,
.qs-info-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 6px;
}

.qs-info-btn:focus-visible {
    border-radius: 50%;
}

.qs-info-panel {
    margin-top: 0.6rem;
    padding: 0.8rem 0.95rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    background: var(--qs-glass-strong);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 12px 12px 0;
    animation: qs-in 0.2s ease-out;
}

.qs-card .qs-info-panel p {
    margin: 0 0 0.55rem;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.qs-card .qs-info-panel p:last-child {
    margin-bottom: 0;
}

.qs-info-panel__list {
    margin: 0 0 0.55rem;
    padding: 0 0 0 1.1rem;
}

.qs-info-panel__list:last-child {
    margin-bottom: 0;
}

.qs-info-panel__list li {
    margin: 0 0 0.4rem;
    padding-left: 0.15rem;
}

.qs-info-panel__list li:last-child {
    margin-bottom: 0;
}

.qs-info-panel__list--numbered {
    padding-left: 1.25rem;
}

/* De cijfers 1, 5 en 10 met hun uitleg. */
.qs-scale {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.qs-scale__row {
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: start;
}

.qs-scale__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.35rem;
    margin: 0.05rem 0 0;
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--qs-text);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid var(--qs-border-strong);
    border-radius: 999px;
}

.qs-scale__text {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Levensgebieden: label, (i), cijfer en slider
   -------------------------------------------------------------------------- */

.qs-areas {
    display: grid;
    gap: 0.85rem;
    margin: 0 0 1.25rem;
}

.qs-area {
    min-width: 0;
}

.qs-area__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 28px;
}

.qs-area__emoji {
    flex: 0 0 auto;
    width: 1.4rem;
    font-size: 1.05rem;
    line-height: 1;
    text-align: center;
}

.qs-area__label {
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--qs-text);
    cursor: pointer;
}

.qs-area__value {
    flex: 0 0 auto;
    min-width: 2.15rem;
    margin-left: auto;
    padding: 0.2rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 999px;
}

/* De input zelf is het raakvlak (28px hoog); het spoor van 6px tekenen de
   pseudo-elementen. --qs-fill (0% tot 100%) zet js/quick-scan.js op de input;
   de standaard hoort bij de startwaarde 5. */
.qs-slider {
    --qs-fill: 44.44%;
    --qs-thumb: 22px;
    display: block;
    width: 100%;
    height: 28px;
    margin: 0.1rem 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    touch-action: pan-y;
}

.qs-slider:focus {
    outline: none;
}

.qs-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--color-primary) 0, var(--color-primary) var(--qs-fill), rgba(255, 255, 255, 0.18) var(--qs-fill), rgba(255, 255, 255, 0.18) 100%);
}

.qs-slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.qs-slider::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--color-primary);
}

.qs-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--qs-thumb);
    height: var(--qs-thumb);
    /* Het spoor is 6px: de duim hangt er half boven en half onder. */
    margin-top: calc((6px - var(--qs-thumb)) / 2);
    background: var(--color-primary);
    border: 3px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.qs-slider::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--qs-thumb);
    height: var(--qs-thumb);
    background: var(--color-primary);
    border: 3px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.qs-slider:hover::-webkit-slider-thumb,
.qs-slider:active::-webkit-slider-thumb {
    transform: scale(1.08);
}

.qs-slider:hover::-moz-range-thumb,
.qs-slider:active::-moz-range-thumb {
    transform: scale(1.08);
}

/* Toetsenbordfocus: een ring in de primaire kleur om de duim. */
.qs-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--qs-ring), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.qs-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--qs-ring), 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* De ring om de duim alleen is te zwak (40 procent oranje op het glas, onder
   3:1), dus ook een witte outline om de hele slider. Zelfde specificiteit als
   .qs-slider:focus hierboven en daarom later in het bestand. Alleen bij
   toetsenbordfocus: muis en aanraking geven geen :focus-visible. */
.qs-slider:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
    border-radius: 999px;
}

/* Hoog-contrastmodus: daar vervalt de box-shadow, dus een echte outline.
   Het vinkvak van de toestemming tekent zijn aangevinkte staat met een eigen
   achtergrond en een donker vinkje; die vallen in deze modus weg of worden
   onleesbaar. Daarom tekent de browser het vak hier zelf. De extra class in
   de selector is nodig: .qs-consent__box zet verderop appearance: none en zou
   het bij gelijke specificiteit winnen. De slider houdt zijn eigen uiterlijk. */
@media (forced-colors: active) {
    .qs-slider:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }

    .qs-consent .qs-consent__box {
        -webkit-appearance: auto;
        appearance: auto;
    }
}

/* --------------------------------------------------------------------------
   Toestemming
   -------------------------------------------------------------------------- */

.qs-consent {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--qs-border);
    border-radius: 14px;
}

.qs-consent__label {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.35rem;
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

/* Wit vinkvak met een donker vinkje: oranje blijft voor de knop en de sliders. */
.qs-consent__box {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    background-color: var(--qs-field-bg);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.qs-consent__box:checked {
    background-color: var(--color-white);
    border-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' stroke='%231A1B23' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.qs-consent__box:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--qs-ring);
}

.qs-consent__box[aria-invalid="true"] {
    border-color: var(--qs-danger-border);
}

/* Het optionele vakje in de e-mailpoort: zelfde vinkvak, zonder eigen kader.
   De poort is zelf al een glasvlak met rand; een kader in een kader kost op
   320px een hele tekstregel. De class .qs-consent blijft nodig: daar haakt
   het forced-colors-blok hierboven op aan. Deze regels staan na de basis van
   .qs-consent en .qs-consent__label (gelijke of hogere specificiteit, de
   latere wint). De afstand tot het veld en de knop komt uit de gap van
   .qs-gate__row. */
.qs-consent--gate {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.qs-consent--gate .qs-consent__label {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Meldingen en knoppen
   -------------------------------------------------------------------------- */

.qs-card .qs-error {
    margin: 0 0 0.9rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--qs-danger);
    background: var(--qs-danger-bg);
    border: 1px solid var(--qs-danger-border);
    border-radius: 10px;
}

/* js/quick-scan.js zet de melding onder het veld waar hij over gaat. */
.qs-card .qs-field > .qs-error,
.qs-card .qs-consent > .qs-error {
    margin: 0.6rem 0 0;
}

.qs-card .qs-note {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--qs-muted);
}

.qs-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: 1.1rem;
}

.qs-actions--split {
    grid-template-columns: auto minmax(0, 1fr);
}

/* Eigen knoppen, bewust zonder de class .btn van het thema: die krijgt van
   animations.js een ripple met inline overflow en .btn--primary heeft een
   negatieve bovenmarge. */
.qs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 50px;
    margin: 0;
    padding: 0.75rem 1.35rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.qs-btn--primary {
    width: 100%;
    color: var(--color-white);
    background: var(--color-primary);
    box-shadow: 0 10px 26px -10px var(--qs-ring);
}

.qs-btn--primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.qs-btn--primary:active {
    transform: translateY(0);
}

.qs-btn--ghost {
    color: var(--qs-text);
    background: transparent;
    border-color: var(--qs-border-strong);
}

.qs-btn--ghost:hover {
    background: var(--qs-glass-strong);
    border-color: rgba(255, 255, 255, 0.45);
}

/* Wit en niet oranje: op de oranje knop valt een oranje rand weg. */
.qs-btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

.qs-btn:disabled {
    opacity: 0.65;
    cursor: progress;
    transform: none;
}

.qs-btn.is-busy::after {
    content: '';
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: var(--color-white);
    border-radius: 50%;
    animation: qs-spin 0.7s linear infinite;
}

@keyframes qs-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --------------------------------------------------------------------------
   Laden
   -------------------------------------------------------------------------- */

.qs-loading__monk {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0.5rem auto 1.1rem;
    border-radius: 50%;
    background: var(--qs-glass-strong);
    border: 1px solid var(--qs-border-strong);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28);
    animation: qs-pulse 2.2s ease-out infinite;
    overflow: hidden;
}

.qs-loading__monk-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes qs-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.qs-state--center .qs-heading {
    margin-bottom: 0.5rem;
}

.qs-card .qs-loading__sub {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--qs-muted);
}

.qs-loading__bar {
    position: relative;
    width: min(100%, 15rem);
    height: 4px;
    margin: 1.4rem auto 1rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}

.qs-loading__bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
    border-radius: inherit;
    animation: qs-slide 1.6s ease-in-out infinite;
}

@keyframes qs-slide {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(250%);
    }
}

/* Vaste minimumhoogte: de regels wisselen, de kaart mag daarbij niet springen. */
.qs-card .qs-loading__line {
    min-height: 3em;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.qs-loading__line--swap {
    animation: qs-in 0.3s ease-out;
}

/* --------------------------------------------------------------------------
   Resultaat: de opening, het vervagende stukje en de e-mailpoort
   -------------------------------------------------------------------------- */

.qs-card .qs-result__opening {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    white-space: pre-line;
    overflow-wrap: break-word;
}

/* Niet leesbaar, niet selecteerbaar en voor schermlezers verborgen
   (aria-hidden in de markup): het laat alleen zien dat er meer is. */
.qs-result {
    margin-bottom: 1.1rem;
}

/* Vaste zorgregel onder de opening, alleen zichtbaar bij een erg laag cijfer
   voor mentale of fysieke gezondheid (js/quick-scan.js haalt hidden weg).
   Klein en rustig, in de gedempte tekstkleur, zonder signaalkleur. */
.qs-card .qs-result__care {
    margin-top: 0.8rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--qs-muted);
}

/* De negatieve ondermarge schuift de poort iets over het vervagende stukje.
   Hij zit op het stukje zelf: is er geen (hidden), dan overlapt er niets. */
.qs-card .qs-result__fade {
    max-height: 6.8em;
    margin-top: 0.9rem;
    margin-bottom: -1.6rem;
    overflow: hidden;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    overflow-wrap: break-word;
    filter: blur(1.4px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 96%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 96%);
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

.qs-gate {
    position: relative;
    padding: 1.1rem 1.15rem 1.15rem;
    background: var(--qs-glass-strong);
    border: 1px solid var(--qs-border-strong);
    border-radius: 16px;
}

.qs-gate__title {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--qs-text);
}

.qs-card .qs-gate__text {
    margin-bottom: 0.9rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--qs-muted);
}

/* Invoer en knop altijd onder elkaar. Naast elkaar bleef er boven 900px, waar
   de kaart maar 460 tot 520px breed is, 127 tot 177px over voor het adres en
   werd zelfs de placeholder afgekapt. */
.qs-gate__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.qs-gate__row .qs-btn {
    width: 100%;
    min-height: 48px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    white-space: nowrap;
}

.qs-gate .qs-error {
    margin-bottom: 0.6rem;
}

.qs-gate .qs-note {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Verstuurd
   -------------------------------------------------------------------------- */

.qs-sent__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0.5rem auto 1rem;
    color: var(--qs-success);
    background: var(--qs-success-bg);
    border: 1px solid var(--qs-success-border);
    border-radius: 50%;
}

.qs-card .qs-sent__text {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

/* "Verkeerd adres? Stuur hem opnieuw": een bescheiden tweede knop onder de
   notitie, kleiner dan de primaire knop eronder. .qs-btn heeft zelf geen
   marge, dus hier de afstand tot de notitie. Op een smalle telefoon mag de
   tekst over twee regels lopen. */
.qs-state[data-qs-state="sent"] .qs-btn--ghost {
    max-width: 100%;
    min-height: 44px;
    margin-top: 0.9rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Bevestiging van het opt-in, onder de knop "Verkeerd adres?". Staat standaard
   op hidden; js/quick-scan.js toont hem alleen na een mail met het vinkje aan.
   Iets meer lucht dan een gewone notitie, omdat hij onder een knop staat. */
.qs-card .qs-sent__optin {
    margin-top: 0.8rem;
}

.qs-sent__next {
    margin-top: 1.4rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--qs-border);
}

.qs-card .qs-sent__follow {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

/* --------------------------------------------------------------------------
   Breedtes
   -------------------------------------------------------------------------- */

/* Tijd en plaats naast elkaar zodra de kaart er de ruimte voor heeft. */
@media (min-width: 560px) {
    .qs-field-row {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }
}

/* Boven 900px: intro links, kaart rechts. */
@media (min-width: 901px) {
    .qs-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, clamp(460px, 42vw, 520px));
        justify-items: stretch;
        align-items: start;
        gap: clamp(2rem, 4vw, 4rem);
    }

    .qs-intro {
        max-width: none;
        padding-top: clamp(0.5rem, 2vw, 2rem);
        text-align: left;
    }

    .qs-intro .qs-intro__sub {
        margin-left: 0;
    }

    .qs-intro__monk {
        display: block;
        margin-top: 1.75rem;
    }

    .qs-card {
        max-width: none;
    }
}

/* main.css geeft .hero onder 768px een eigen padding en de container 6rem
   bovenruimte. Hier telt alleen de navigatie plus een korte adem. */
@media (max-width: 768px) {
    .hero.hero--quickscan {
        padding-top: 0;
    }

    .hero--quickscan .hero__container {
        padding-top: calc(var(--qs-nav-h) + 2.5rem);
    }
}

/* Smalle telefoons: knoppen van stap 2 onder elkaar, de primaire bovenaan. */
@media (max-width: 420px) {
    .qs-actions--split {
        grid-template-columns: minmax(0, 1fr);
    }

    .qs-actions--split .qs-btn--primary {
        order: -1;
    }

    /* Drie selects op een rij van ongeveer 275px: minder binnenruimte en een
       verdeling waarin "Dag", "september" en een jaartal net passen. */
    .qs-select {
        padding-left: 0.6rem;
        padding-right: 1.45rem;
        background-position: right 0.45rem center;
    }

    .qs-dob {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 0.4rem;
    }

    /* De microregel onder de intro past zo op een regel. */
    .qs-intro .qs-intro__micro {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Rond 320px passen "september" en een jaartal niet meer naast het pijltje
   en kapt de select ze af. Zonder pijltje en met minder binnenruimte past
   alles weer. Alleen de datum: uur en minuut houden hun pijltje. */
@media (max-width: 350px) {
    .qs-dob .qs-select {
        padding: 0 0.45rem;
        background-image: none;
    }
}

/* Aanraakschermen: een grotere duim. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
    .qs-slider {
        --qs-thumb: 26px;
        height: 32px;
    }
}

/* --------------------------------------------------------------------------
   Minder beweging
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .qs-card[data-qs-ready] .qs-state,
    .qs-info-panel,
    .qs-loading__line--swap,
    .qs-loading__monk,
    .qs-btn.is-busy::after {
        animation: none;
    }

    /* Zonder beweging: een stilstaande, half gevulde balk. */
    .qs-loading__bar-fill {
        width: 100%;
        animation: none;
        opacity: 0.5;
    }

    .qs-btn,
    .qs-input,
    .qs-select,
    .qs-steps__seg {
        transition: none;
    }

    .qs-btn--primary:hover {
        transform: none;
    }

    /* De duim per browser apart: een onbekend pseudo-element maakt een hele
       selectorlijst ongeldig. */
    .qs-slider::-webkit-slider-thumb {
        transition: none;
    }

    .qs-slider::-moz-range-thumb {
        transition: none;
    }

    .qs-slider:hover::-webkit-slider-thumb,
    .qs-slider:active::-webkit-slider-thumb {
        transform: none;
    }

    .qs-slider:hover::-moz-range-thumb,
    .qs-slider:active::-moz-range-thumb {
        transform: none;
    }
}