/* ===========================================================
   De openbare invulpagina. Bouwt op app.css (.klant, .kaart,
   .janee, .bsn, .vraag) en voegt toe wat een echte pagina nodig
   heeft en het prototype niet: radioknoppen als ja/nee, een
   voortgangsbalk zonder inline stijl en de bezig-ring.
   De klantkleur komt uit /<slug>-<code>/stijl.css.
   =========================================================== */

/* De klantachtergrond vult het hele scherm; het prototype hield ruimte voor zijn balk. */
.klant {
    min-height: 100vh;
    min-height: 100dvh;
}

.klant__kolom {
    max-width: 480px;
}

.klant__kop .logo {
    height: 28px;
}

.klantlogo__img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    flex: none;
    background: var(--color-neutral-white);
    border-radius: var(--radius-sm);
    padding: 4px;
}

.klant--eigen .klantlogo__beeld {
    color: var(--klant-tegel-tekst, var(--klant-bg-diep));
}

.klantlogo__naam strong {
    overflow-wrap: anywhere;
}

a.lsr-btn {
    text-decoration: none;
}

.knoppen .lsr-btn--secondary {
    flex: 0 1 auto;
}

.lsr-field--krap {
    margin-bottom: 0;
}

.invul-badge {
    align-self: flex-start;
}

/* Ja en nee zijn radioknoppen in een label: zo werken ze zonder JavaScript en met het
   toetsenbord, en geeft de browser zelf aan dat een keuze ontbreekt. */
.janee__knop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.janee__knop input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.janee__knop:has(input:checked) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

.janee__knop:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.vraag .lsr-field__hint {
    margin: 0;
}

.vraag legend + .lsr-field__hint {
    margin-top: calc(-1 * var(--space-2));
}

.invul-datum {
    max-width: 220px;
}

/* Het gewone veld voor het kenmerk, als JavaScript ontbreekt. */
.kenmerk-los {
    max-width: 200px;
    font-family: var(--font-kop);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    font-variant-numeric: tabular-nums;
}

/* Een native voortgangsbalk: een breedte per stap zou een inline stijl vragen, en die blokkeert
   de CSP. */
.voortgang__balk {
    appearance: none;
    display: block;
    width: 100%;
    height: 10px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-tint);
    overflow: hidden;
}

.voortgang__balk::-webkit-progress-bar {
    background: var(--color-tint);
    border-radius: var(--radius-pill);
}

.voortgang__balk::-webkit-progress-value {
    background: var(--color-primary);
    border-radius: var(--radius-pill);
}

.voortgang__balk::-moz-progress-bar {
    background: var(--color-primary);
    border-radius: var(--radius-pill);
}

/* De honeypot staat buiten beeld in plaats van display: none, want sommige bots slaan
   onzichtbare velden over. */
.honing {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.niet-jij {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}

/* Een POST-knop laat zien dat hij bezig is, zonder uitgeschakeld te worden: dan valt zijn naam
   en waarde weg uit het formulier. */
.lsr-btn--bezig {
    cursor: progress;
    opacity: 0.6;
}

.lsr-btn--bezig::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--space-2);
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: invul-draai 0.8s linear infinite;
}

@keyframes invul-draai {
    to { transform: rotate(360deg); }
}

@media print {
    .klant {
        background: none;
    }

    .klant__voet,
    .niet-jij,
    .knoppen {
        display: none;
    }
}