/* ══════════════════════════════════════════════════════════════════
   Wizard — multi-step focused-task flow.

   Used by guided sequences where the *shape* is one decision or
   one upload per screen, with confirm-after-each. Examples: identity
   onboarding, KYC intake, account setup, document submission.

   Designed to render inside a clean container (no app shell). Hosts
   typically pair it with their marketing/minimal layout, but it has
   no host dependencies — only semantic tokens.

   Sections:
     1. Container + heading
     2. Progress strip
     3. Form fields (with flagged-state for low-confidence)
     4. Warning callout (cross-checks, please-confirm)
     5. Card readout (confirm summary sections)
     6. Choice grid (binary decisions)
     7. Action row
     8. Mobile breakpoint
   ══════════════════════════════════════════════════════════════════ */

@layer components {

    /* ─── 1. Container + heading ─────────────────────────────────────── */

    .c-wizard {
        max-width: 44rem;
        margin: 0 auto;
        padding-block: var(--space-8) var(--space-9);
        padding-inline: var(--space-5);
    }

    .c-wizard--centered {
        text-align: center;
    }

    .c-wizard__title {
        font-size: var(--fs-display-s);
        font-family: var(--font-display);
        line-height: var(--lh-tight);
        margin-bottom: var(--space-3);
    }

    .c-wizard__sub {
        font-size: var(--fs-body-lg);
        color: var(--color-ink-soft);
        margin-bottom: var(--space-7);
    }

    /* ─── 2. Progress strip ──────────────────────────────────────────── */

    .c-wizard__progress {
        margin-bottom: var(--space-7);
    }

    .c-wizard__progress-label {
        display: block;
        font-size: var(--fs-ui-sm);
        font-weight: 600;
        color: var(--color-ink-mute);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: var(--space-2);
    }

    .c-wizard__progress-strip {
        display: flex;
        gap: var(--space-1);
    }

    .c-wizard__progress-segment {
        flex: 1;
        height: 4px;
        background: var(--color-line);
        border-radius: var(--radius-pill);
        transition: background var(--dur-fast) var(--ease-out);
    }

    .c-wizard__progress-segment--complete,
    .c-wizard__progress-segment--current {
        background: var(--color-accent);
    }

    /* ─── 3. Form fields ─────────────────────────────────────────────── */

    .c-wizard__form {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    .c-wizard__field {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .c-wizard__field-label {
        font-size: var(--fs-ui);
        font-weight: 500;
    }

    .c-wizard__field-hint {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    .c-wizard__field input[type="text"],
    .c-wizard__field input[type="date"],
    .c-wizard__field select {
        width: 100%;
        padding: var(--space-3);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        font: inherit;
        background: var(--color-surface);
    }

    .c-wizard__field input[type="file"] {
        padding: var(--space-3);
        border: 1px dashed var(--color-line);
        border-radius: var(--radius-sm);
        background: var(--color-surface-alt);
        width: 100%;
    }

    .c-wizard__field--flagged input,
    .c-wizard__field--flagged select {
        border-color: var(--color-warn);
        box-shadow: 0 0 0 3px var(--color-warn-glow);
    }

    .c-wizard__field--flagged .c-wizard__field-flag {
        font-size: var(--fs-ui-sm);
        color: var(--color-warn-deep);
        font-weight: 500;
    }

    .c-wizard__field-row {
        display: flex;
        gap: var(--space-3);
    }

    .c-wizard__field-row > .c-wizard__field {
        flex: 1;
    }

    /* ─── 4. Warning callout ─────────────────────────────────────────── */

    .c-wizard__warning {
        padding: var(--space-4);
        border-left: 4px solid var(--color-warn);
        background: var(--color-warn-soft);
        border-radius: var(--radius-sm);
        margin-bottom: var(--space-6);
    }

    .c-wizard__warning-title {
        display: block;
        font-weight: 600;
        margin-bottom: var(--space-1);
        color: var(--color-warn-deep);
    }

    /* ─── 5. Card readout ────────────────────────────────────────────── */

    .c-wizard__card {
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        padding: var(--space-5);
        margin-bottom: var(--space-5);
        background: var(--color-surface);
    }

    .c-wizard__card-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-4);
    }

    .c-wizard__card-title {
        font-size: var(--fs-heading);
        font-weight: 600;
    }

    .c-wizard__readout {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .c-wizard__readout-row {
        display: flex;
        gap: var(--space-3);
    }

    .c-wizard__readout-label {
        color: var(--color-ink-mute);
        min-width: 12rem;
        flex-shrink: 0;
    }

    /* ─── 6. Choice grid ─────────────────────────────────────────────── */

    .c-wizard__choice-grid {
        display: flex;
        gap: var(--space-4);
        margin-bottom: var(--space-6);
        flex-wrap: wrap;
    }

    .c-wizard__choice {
        flex: 1;
        min-width: 16rem;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    /* ─── 7. Action row ──────────────────────────────────────────────── */

    .c-wizard__actions {
        display: flex;
        gap: var(--space-3);
        justify-content: flex-end;
        margin-top: var(--space-6);
    }

    .c-wizard__actions--start {
        justify-content: flex-start;
    }

    .c-wizard__actions--center {
        justify-content: center;
    }

    /* ─── 8. Upload progress ─────────────────────────────────────────────
       Shown during a document upload's in-flight state. The native
       <progress> element drives both phases:
         - determinate (max=100, value=N) for real bytes-uploaded %
         - indeterminate (no value attribute) once bytes are sent and the
           server is processing — animated stripe gives a sense of activity. */

    .c-wizard__upload-progress {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding-block: var(--space-7);
        align-items: stretch;
        text-align: center;
    }

    .c-wizard__upload-progress progress {
        width: 100%;
        height: 0.5rem;
        border: none;
        border-radius: var(--radius-pill);
        background: var(--color-line);
        overflow: hidden;
        appearance: none;
    }

    /* Determinate fill (WebKit / Blink) */
    .c-wizard__upload-progress progress::-webkit-progress-bar {
        background: var(--color-line);
        border-radius: var(--radius-pill);
    }
    .c-wizard__upload-progress progress::-webkit-progress-value {
        background: var(--color-accent);
        border-radius: var(--radius-pill);
        transition: width var(--dur-fast) var(--ease-out);
    }

    /* Determinate fill (Firefox) */
    .c-wizard__upload-progress progress::-moz-progress-bar {
        background: var(--color-accent);
        border-radius: var(--radius-pill);
    }

    /* Indeterminate state — overrides the determinate fill with a
       sliding stripe so the bar feels alive while the server processes. */
    .c-wizard__upload-progress progress:indeterminate {
        background: linear-gradient(
            90deg,
            var(--color-line) 0%,
            var(--color-accent) 50%,
            var(--color-line) 100%
        );
        background-size: 200% 100%;
        animation: c-wizard-progress-indeterminate 1.5s linear infinite;
    }
    .c-wizard__upload-progress progress:indeterminate::-webkit-progress-bar {
        background: transparent;
    }
    .c-wizard__upload-progress progress:indeterminate::-webkit-progress-value {
        background: transparent;
    }
    .c-wizard__upload-progress progress:indeterminate::-moz-progress-bar {
        background: transparent;
    }

    @keyframes c-wizard-progress-indeterminate {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .c-wizard__upload-progress-label {
        font-size: var(--fs-ui);
        color: var(--color-ink-soft);
        margin: 0;
    }

    /* ─── 9. Mobile ──────────────────────────────────────────────────── */

    @media (max-width: 48rem) {
        .c-wizard__readout-row {
            flex-direction: column;
            gap: var(--space-1);
        }

        .c-wizard__readout-label {
            min-width: 0;
        }

        .c-wizard__field-row {
            flex-direction: column;
        }

        .c-wizard__actions {
            flex-direction: column-reverse;
        }

        .c-wizard__actions .c-button {
            width: 100%;
            text-align: center;
            justify-content: center;
        }

        .c-wizard__choice {
            min-width: 0;
        }
    }
}