/* ============================================================
   Sets · first-run.css
   De laag over de app heen waarin de eerste set gelogd wordt. Zie
   js/first-run.js.

   Alle kleuren komen uit de tokens van styles/polish.css; die laag is echt
   themagevoelig (`html:not(.dark)` herdefinieert dezelfde namen), dus er
   staat hier geen enkele hardgecodeerde hex. De paar regels met een
   `html:not(.dark)`-variant hieronder zijn transparante lagen: die kunnen
   niet uit een token komen omdat ze over de achtergrond heen liggen.

   Glas alleen op een tijdelijke laag (G5): dit blad verdwijnt weer, dus mag
   het blur hebben. De kaarten eronder blijven mat.
   ============================================================ */

/* De tokenlaag in styles/polish.css heeft geen foutkleur — rood staat overal
   in de repo hardgecodeerd (`styles.css:6174 .profile-completion-error`), en
   nergens met een lichte variant. Hier staat hij daarom één keer als lokale
   token mét beide thema's, zodat er verderop in dit bestand geen losse hex
   meer voorkomt. Komt er ooit een `--sets-danger` in polish.css, dan is dit
   de enige regel die weg mag. */
.first-run-overlay {
    --first-run-danger: #f87171;
}

html:not(.dark) .first-run-overlay {
    --first-run-danger: #b91c1c;
}

.first-run-overlay {
    position: fixed;
    inset: 0;
    /* Onder de celebratielaag (1500) en boven de gewone modals (1300):
       hij mag nooit over een PR-overlay heen komen te staan. */
    z-index: 1350;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(4, 5, 7, 0.66);
    opacity: 0;
    transition: opacity 220ms var(--sets-ease-out);
    padding: 0 12px calc(12px + env(safe-area-inset-bottom));
}

.first-run-overlay.active {
    opacity: 1;
}

/* Tussen "sluiten" en "weg" ligt nu de uitgaande transitie. Zolang die loopt
   is het blad onzichtbaar maar nog wél een laag over de hele app heen — zonder
   deze regel zou het de eerste tik na het sluiten opvangen. */
.first-run-overlay[data-closing] {
    pointer-events: none;
}

html:not(.dark) .first-run-overlay {
    background: rgba(24, 28, 36, 0.42);
}

.first-run-sheet {
    position: relative;
    width: 100%;
    max-width: 460px;
    border-radius: 24px;
    border: 1px solid var(--sets-border-strong);
    background: var(--sets-surface-1);
    box-shadow: var(--sets-shadow-raised);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 22px 20px 20px;
    transform: translateY(16px);
    transition: transform 260ms var(--sets-ease-spring);
}

.first-run-overlay.active .first-run-sheet {
    transform: translateY(0);
}

.first-run-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--sets-text-3);
    font-size: 24px;
    line-height: 1;
    border-radius: 10px;
    cursor: pointer;
    transition: color 150ms var(--sets-ease-out);
}

.first-run-close:active {
    color: var(--sets-text);
}

.first-run-stage {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* De stap krijgt bij elke stapwissel de focus zodat de trap en de schermlezer
   meeverhuizen. Dat is geen tabstop, dus de standaard-outline van de browser
   zou hier alleen maar een rand om een half scherm trekken; met het toetsenbord
   erheen navigeren kan niet. Bij `:focus-visible` — een browser die er tóch
   reden toe ziet — blijft hij wél zichtbaar. */
.first-run-stage:focus {
    outline: none;
}

.first-run-stage:focus-visible {
    outline: 2px solid var(--sets-accent);
    outline-offset: 4px;
}

.first-run-head {
    padding-right: 28px;
}

.first-run-title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--sets-text);
}

.first-run-sub {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sets-text-2);
}

.first-run-note {
    font-size: 12px;
    line-height: 1.5;
    color: var(--sets-text-3);
}

.first-run-error {
    min-height: 16px;
    font-size: 12px;
    line-height: 1.35;
    /* De accentkleur is hier bewust niet gebruikt: lime betekent in deze app
       voortgang, geen fout. */
    color: var(--first-run-danger);
}

/* ── Acties ──────────────────────────────────────────────────── */

.first-run-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.first-run-primary {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--sets-button-from), var(--sets-button-to));
    color: var(--sets-accent-ink);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 150ms var(--sets-ease-out), opacity 150ms var(--sets-ease-out);
}

.first-run-primary:disabled {
    opacity: 0.6;
    cursor: default;
}

.first-run-quiet {
    width: 100%;
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--sets-border);
    background: transparent;
    color: var(--sets-text-2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 150ms var(--sets-ease-out), color 150ms var(--sets-ease-out);
}

.first-run-primary:active:not(:disabled),
.first-run-quiet:active,
.first-run-choice:active {
    transform: scale(0.98);
}

/* ── Oefeningkeuze ───────────────────────────────────────────── */

.first-run-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.first-run-choice {
    min-height: 52px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid var(--sets-border);
    background: var(--sets-surface-2);
    color: var(--sets-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms var(--sets-ease-out), transform 150ms var(--sets-ease-out);
}

.first-run-choice:active {
    border-color: var(--sets-accent);
}

.first-run-custom {
    display: flex;
    gap: 8px;
    align-items: center;
}

.first-run-custom .first-run-quiet {
    width: auto;
    flex: 0 0 auto;
    padding: 0 16px;
}

/* ── Invoer ──────────────────────────────────────────────────── */

.first-run-fields {
    display: flex;
    gap: 10px;
}

.first-run-field {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.first-run-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sets-text-3);
}

/* Dubbel gekwalificeerd met opzet: styles.css zet `input[type="number"]` op
   `border-radius: 0`, en dat selector-gewicht (0,1,1) wint van een losse
   klasse — ook al laadt deze file later. */
.first-run-sheet .first-run-input {
    width: 100%;
    min-width: 0;
    height: 52px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--sets-border);
    background: var(--sets-surface-2);
    color: var(--sets-text);
    /* 16px voorkomt dat iOS bij focus inzoomt — precies wat je in deze
       minuut niet wilt. De spinners haalt styles.css al weg. */
    font-size: 16px;
    outline: none;
    transition: border-color 150ms var(--sets-ease-out);
}

.first-run-sheet .first-run-input:focus {
    border-color: var(--sets-focus);
}

/* Het getal is hier het belangrijkste op de kaart (G2): groot, mono en met
   vaste cijferbreedte, zodat 102.5 niet verspringt tijdens het typen. */
.first-run-sheet .first-run-number {
    height: 60px;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ── Afronding ───────────────────────────────────────────────── */

.first-run-stage-done {
    align-items: center;
    text-align: center;
}

.first-run-stage-done .first-run-head {
    padding-right: 0;
}

.first-run-check {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sets-accent-ink);
    background: var(--sets-accent);
}

@media (max-width: 360px) {
    .first-run-sheet {
        padding: 20px 14px 16px;
    }

    .first-run-grid {
        gap: 6px;
    }

    .first-run-choice {
        min-height: 48px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .first-run-overlay,
    .first-run-sheet {
        transition: none;
    }

    .first-run-sheet {
        transform: none;
    }

    .first-run-primary:active:not(:disabled),
    .first-run-quiet:active,
    .first-run-choice:active {
        transform: none;
    }
}