/* -------------------------------
   Progress Form → NetWorth skin
   Scope: ONLY inside .progress-form-shell
-------------------------------- */

.progress-form-shell {
    font-size: 1rem;
    line-height: 1.45;

    /* sizing */
    --field-height: 2.375rem;
    /* ~38px (closer to typical app inputs) */
    --field-text-font-size: 0.875rem;
    --label-text-font-size: 0.8125rem;
    /* 13px label */
    --error-text-font-size: 0.75rem;

    /* spacing */
    --space-multiplier: 0.55;
    --grid-spacer-width: 0.875rem;

    /* shape */
    --border-radius: 3px;
    /* match your card rounding */

    /* colors (keep the component’s vars, but tone them to your UI) */
    --color-border: rgba(15, 23, 42, .14);
    --color-border-active: rgba(15, 23, 42, .28);
    --color-text: #0f172a;
    --color-text-secondary: rgba(15, 23, 42, .62);
    --color-background: #ffffff;
    --color-background-field: #ffffff;

    /* focus */
    --focus-ring-color: rgba(37, 99, 235, .18);

    /* button */
    --button-height: 2.375rem;
    --button-text-font-size: 0.875rem;
    --button-padding: 0 1rem;
}

.progress-form-shell,
.progress-form-shell * {
    font-family: inherit;
}

/* Remove the “component demo” look */
.progress-form-shell .progress-form {
    box-shadow: none;
    border: 1px solid rgba(15, 23, 42, .10);
}

/* Typography closer to your app */
.progress-form-shell label,
.progress-form-shell .step,
.progress-form-shell small,
.progress-form-shell input,
.progress-form-shell select,
.progress-form-shell button {
    letter-spacing: normal;
}

/* Inputs/selects match your app styling */
.progress-form-shell input,
.progress-form-shell select {
    border-radius: 3px;
    border-color: rgba(15, 23, 42, .14);
    box-shadow: none;
}

.progress-form-shell input:focus,
.progress-form-shell select:focus {
    outline: none;
    border-color: rgba(15, 23, 42, .28);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

/* Button closer to your existing primary buttons */
.progress-form-shell button[type="submit"],
.progress-form-shell button[data-action="next"] {
    border-radius: 3px;
    box-shadow: none;
}

/* Back button: make it look like your ghost/outline */
.progress-form-shell .button--simple {
    background: transparent;
    border: 1px solid transparent;
    color: #0f172a;
}

/* Tabs: reduce “marketing demo” spacing */
.progress-form-shell .progress-form__tabs {
    margin-bottom: 1rem !important;
}

.progress-form-shell .progress-form__tabs-item {
    padding-top: .5rem !important;
}

/* Keep actions inline on desktop (if any stacking remains) */
@media (min-width: 640px) {
    .progress-form-shell .flex-column-reverse {
        flex-direction: row !important;
    }

    .progress-form-shell .flex-column-reverse>* {
        margin-top: 0 !important;
    }
}