/* ══════════════════════════════════════════════════════════════════
   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 shares the flat transparent card shell defined alongside
       .c-card in app-c-ui.css (@layer components) — single source so the two
       can't drift. Only the wizard-specific head/title/subtitle rules follow. */

    .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 {
        font-size: var(--fs-ui-sm);
        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;
    }

    /* ─── Selectable options, config block, step panel & split footer ────
       Layered on the shared .c-wizard primitives for multi-step *create*
       flows (e.g. the promotion wizard): a per-step card panel, selectable
       option cards (the card reads as chosen when it holds a checked
       control), a muted config sub-block, an inline numeric unit, and a
       Back / primary split footer. Brand accent drives the selected state. */

    .c-wizard__panel {
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-lg);
        padding: var(--space-6);
    }

    .c-wizard__panel-title {
        font-size: var(--fs-heading);
        font-weight: 500;
        margin: 0;
    }

    .c-wizard__options {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .c-wizard__options--2col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .c-wizard__option {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--space-3);
        align-items: start;
        padding: var(--space-4);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        cursor: pointer;
    }

    .c-wizard__option:hover {
        border-color: var(--color-ink-faint);
    }

    /* Chosen: the card holds a checked radio/checkbox. Thicken to a 2px
       accent border but shrink padding 1px so the card doesn't reflow. */
    .c-wizard__option:has(:checked) {
        border: 2px solid var(--color-accent);
        background: var(--color-accent-soft);
        padding: calc(var(--space-4) - 1px);
    }

    .c-wizard__option-body {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-width: 0;
    }

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

    .c-wizard__option-desc {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-soft);
        margin: 0;
    }

    .c-wizard__option:has(:checked) .c-wizard__option-title,
    .c-wizard__option:has(:checked) .c-wizard__option-desc {
        color: var(--color-accent-deep);
    }

    /* Muted configuration sub-block (sits under a chosen option). */
    .c-wizard__config {
        background: var(--color-surface-alt);
        border-radius: var(--radius-md);
        padding: var(--space-4) var(--space-5);
    }

    .c-wizard__config-label {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-soft);
        margin: 0 0 var(--space-3);
    }

    /* Inline unit beside a numeric input ("percent off", "days"). */
    .c-wizard__suffix {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
    }

    .c-wizard__suffix-unit {
        color: var(--color-ink-soft);
        white-space: nowrap;
    }

    /* Small status pill for the review summary header (e.g. "Draft"). */
    .c-wizard__badge {
        display: inline-flex;
        align-items: center;
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-pill);
        font-size: var(--fs-ui-sm);
        font-weight: 500;
        background: var(--color-accent-soft);
        color: var(--color-accent-deep);
    }

    /* Split footer: Back on the left, primary action(s) on the right,
       divided from the step body by a hairline. */
    .c-wizard__footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
        padding-top: var(--space-5);
        border-top: 1px solid var(--color-line);
        margin-top: var(--space-6);
    }

    .c-wizard__footer-group {
        display: flex;
        gap: var(--space-2);
    }

    /* ─── 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;
        }

        .c-wizard__options--2col {
            grid-template-columns: 1fr;
        }

        .c-wizard__footer {
            flex-direction: column-reverse;
            align-items: stretch;
        }

        .c-wizard__footer-group {
            flex-direction: column-reverse;
        }
    }
}