/* Progress Form Component (scoped)
   - Self-contained: does not rely on page/body styles.
   - Scoped under .progress-form-shell to avoid leaking styles into the host app. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

.progress-form-shell {
    /* Theme tokens (scoped) */
    --light-blue-500: 202, 83%, 41%;
    --light-blue-900: 204, 96%, 27%;

    --blue-100: 210, 22%, 49%;
    --blue-900: 209, 61%, 16%;

    --gray-100: 210, 36%, 96%;
    --gray-300: 212, 33%, 89%;
    --gray-500: 210, 31%, 80%;

    --white: 0, 0%, 100%;

    --font-family-sans-serif: "Montserrat", sans-serif;
    --space-multiplier: 0.8;
    --grid-spacer-width: 1.5rem;

    /* Form tokens */
    --form-accent-color: var(--light-blue-500);
    --form-error-color: 356, 75%, 53%;

    --field-background-color: hsl(var(--white));
    --field-border-width: 1px;
    --field-border-style: solid;
    --field-border-color: hsl(var(--gray-500));
    --field-border: var(--field-border-width) var(--field-border-style) var(--field-border-color);
    --field-border-radius: 3px;
    --field-height: 4.2rem;
    --field-padding: 0 calc(var(--space-multiplier) * 2rem);
    --field-text-color: hsl(var(--blue-900));
    --field-text-font-family: var(--font-family-sans-serif);
    --field-text-font-size: 1.4rem;
    --field-text-font-weight: 500;
    --field-text-letter-spacing: 0.05em;

    --label-text-color: hsl(var(--blue-900));
    --label-text-font-family: var(--font-family-sans-serif);
    --label-text-font-size: 1.4rem;
    --label-text-font-weight: 600;
    --label-text-letter-spacing: 0.05em;

    --error-text-color: hsl(var(--form-error-color));
    --error-text-font-family: var(--font-family-sans-serif);
    --error-text-font-size: 1.2rem;
    --error-text-font-weight: 500;
    --error-text-letter-spacing: 0.05em;

    /* Button tokens */
    --button-background-color: hsl(var(--blue-900));
    --button-border-width: 1px;
    --button-border-style: solid;
    --button-border-color: transparent;
    --button-border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
    --button-border-radius: 4px;
    --button-height: 4.2rem;
    --button-padding: 0 calc(var(--space-multiplier) * 2rem);
    --button-text-align: center;
    --button-text-color: hsl(var(--white));
    --button-text-decoration: none;
    --button-text-font-family: var(--font-family-sans-serif);
    --button-text-font-size: 1.6rem;
    --button-text-font-weight: 600;
    --button-text-letter-spacing: 0.05em;
    --button-text-shadow: 0 1px hsla(0, 0%, 20%, 0.2);

    font-family: var(--font-family-sans-serif);
    color: hsl(var(--blue-900));
    letter-spacing: 0.025em;
    line-height: 1.8;
    font-size: 1.6rem;

    background: hsl(var(--gray-100));
    padding: 3rem;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .progress-form-shell {
        --field-height: 4.6rem;
        --button-height: 4.6rem;
        --button-padding: 0 calc(var(--space-multiplier) * 3rem);
    }
}

/* Box sizing reset (scoped) */
.progress-form-shell *,
.progress-form-shell *::before,
.progress-form-shell *::after {
    box-sizing: inherit;
}

.progress-form-shell {
    box-sizing: border-box;
}

/* Focus style */
.progress-form-shell :focus-visible {
    outline: hsl(var(--light-blue-900)) auto 1px;
    outline-offset: 0;
}

/* Utilities (ONLY those used by the component) */
.progress-form-shell .d-flex {
    display: flex;
    column-gap: calc(var(--grid-spacer-width) * 2);
}

.progress-form-shell .d-block {
    display: block;
}

.progress-form-shell .d-grid {
    display: grid;
    column-gap: calc(var(--grid-spacer-width) * 2);
}

.progress-form-shell .flex-1 {
    flex: 1 1 0%;
}

.progress-form-shell .flex-row {
    flex-direction: row;
}

.progress-form-shell .flex-column-reverse {
    flex-direction: column-reverse;
}

.progress-form-shell .align-items-start {
    align-items: start;
}

.progress-form-shell .align-items-center {
    align-items: center;
}

.progress-form-shell .justify-center {
    justify-content: center;
}

.progress-form-shell .justify-end {
    justify-content: end;
}

.progress-form-shell .mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.progress-form-shell .container {
    max-width: 80rem;
    width: 100%;
}

.progress-form-shell .px-0 {
    padding-left: 0;
    padding-right: 0;
}

.progress-form-shell .pt-2 {
    padding-top: calc(var(--space-multiplier) * 2rem);
}

.progress-form-shell .p-4 {
    padding: calc(var(--space-multiplier) * 4rem);
}

.progress-form-shell .mb-3 {
    margin-bottom: calc(var(--space-multiplier) * 3rem);
}

.progress-form-shell .mt-1 {
    margin-top: calc(var(--space-multiplier) * 1rem);
}

.progress-form-shell .mt-3 {
    margin-top: calc(var(--space-multiplier) * 3rem);
}

.progress-form-shell .mt-4 {
    margin-top: calc(var(--space-multiplier) * 4rem);
}

.progress-form-shell .mt-5 {
    margin-top: calc(var(--space-multiplier) * 5rem);
}

/* Responsive utilities used */
@media (min-width: 640px) {
    .progress-form-shell .sm\:d-none {
        display: none;
    }

    .progress-form-shell .sm\:d-grid {
        display: grid;
        column-gap: calc(var(--grid-spacer-width) * 2);
    }

    .progress-form-shell .sm\:grid-col-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .progress-form-shell .sm\:mt-0 {
        margin-top: 0;
    }

    .progress-form-shell .sm\:mt-3 {
        margin-top: calc(var(--space-multiplier) * 3rem);
    }

    .progress-form-shell .sm\:mt-5 {
        margin-top: calc(var(--space-multiplier) * 5rem);
    }

    .progress-form-shell .sm\:mb-5 {
        margin-bottom: calc(var(--space-multiplier) * 5rem);
    }

    .progress-form-shell .sm\:justify-end {
        justify-content: end;
    }

    .progress-form-shell .sm\:flex-row {
        flex-direction: row;
    }
}

/* Accessibility */
.progress-form-shell .visually-hidden {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    white-space: nowrap;
    width: 1px;
}

.progress-form-shell .muted {
    color: hsl(var(--blue-100));
}

/* Component: Progress Form */
.progress-form-shell .progress-form {
    background-color: hsl(var(--white));
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
}

/* Tabs */
.progress-form-shell .progress-form__tabs {
    column-gap: 0;
}

@media (min-width: 640px) {
    .progress-form-shell .progress-form__tabs {
        column-gap: 0.2rem;
    }
}

.progress-form-shell button:active {
    transform: translateY(1px);
}

.progress-form-shell button:hover,
.progress-form-shell button:focus {
    background-color: hsl(var(--light-blue-900));
    color: hsl(var(--white));
}

.progress-form-shell button:focus-visible {
    outline-offset: 4px;
}

@media (min-width: 640px) {
    .progress-form-shell button {
        display: inline-block;
        vertical-align: top;
        width: auto;
    }
}

.progress-form-shell .button--simple,
.progress-form-shell .button--simple:active,
.progress-form-shell .button--simple:visited {
    background-color: transparent;
    color: hsl(var(--blue-900));
    text-shadow: none;
}

.progress-form-shell .button--simple:hover,
.progress-form-shell .button--simple:focus {
    background-color: transparent;
    color: hsl(var(--light-blue-900));
}

/* Tab buttons */
.progress-form-shell .progress-form__tabs-item {
    --button-background-color: transparent;
    --button-border-width: 5px;
    --button-border-style: solid;
    --button-border-color: hsl(var(--gray-300));
    --button-border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
    --button-border-radius: 0;
    --button-height: 1.4;
    --button-text-align: left;
    --button-text-color: hsl(var(--blue-900));
    --button-text-font-size: 1.4rem;
    --button-text-letter-spacing: 0.025em;
    --button-text-shadow: none;

    background-color: var(--button-background-color);
    border: 0;
    border-top: var(--button-border);
    border-radius: var(--button-border-radius);
    color: var(--button-text-color);
    display: none;
    letter-spacing: var(--button-text-letter-spacing);
    line-height: var(--button-height);
    position: relative;
    text-align: var(--button-text-align);
    text-shadow: var(--button-text-shadow);
    transition: color .2s ease-in-out;
    white-space: normal;
}

.progress-form-shell .progress-form__tabs-item:active {
    transform: none;
}

.progress-form-shell .progress-form__tabs-item:hover,
.progress-form-shell .progress-form__tabs-item:focus {
    background-color: inherit;
    color: inherit;
}

.progress-form-shell .progress-form__tabs-item::before {
    background-color: hsl(var(--light-blue-500));
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    top: -5px;
    transition: width .2s ease-in-out;
    width: 0;
}

.progress-form-shell .progress-form__tabs-item>.step {
    color: hsl(var(--blue-100));
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    transition: color .2s ease-in-out;
}

@media (min-width: 640px) {
    .progress-form-shell .progress-form__tabs-item {
        display: block;
    }
}

/* Current step */
.progress-form-shell .progress-form__tabs-item[aria-selected="true"] {
    display: block;
}

.progress-form-shell .progress-form__tabs-item[aria-selected="true"]::before {
    width: 50%;
}

.progress-form-shell .progress-form__tabs-item[aria-selected="true"]>.step {
    color: hsl(var(--light-blue-500));
}

/* Disabled step */
@media (min-width: 640px) {
    .progress-form-shell .progress-form__tabs-item[aria-disabled="true"] {
        --button-text-color: hsl(var(--blue-100));
        color: var(--button-text-color);
    }
}

/* Completed step */
.progress-form-shell .progress-form__tabs-item[data-complete="true"]::before {
    width: 100%;
}

.progress-form-shell .progress-form__tabs-item[data-complete="true"]>.step {
    color: hsl(var(--light-blue-500));
}

/* Forms */
.progress-form-shell fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.progress-form-shell label,
.progress-form-shell legend {
    color: var(--label-text-color);
    font-family: var(--label-text-font-family);
    font-size: var(--label-text-font-size);
    font-weight: var(--label-text-font-weight);
    display: block;
    letter-spacing: var(--label-text-letter-spacing);
    line-height: 1.6;
    padding-bottom: calc(var(--space-multiplier) * 1rem);
    position: relative;
}

.progress-form-shell label>[data-required="true"]::after,
.progress-form-shell legend>[data-required="true"]::after {
    color: hsl(var(--form-error-color));
    content: "*";
    padding-left: .25em;
    position: absolute;
}

.progress-form-shell input[type="date"],
.progress-form-shell input[type="text"],
.progress-form-shell select,
.progress-form-shell textarea {
    appearance: none;
    background: none;
    background-color: var(--field-background-color);
    border: var(--field-border);
    border-radius: var(--field-border-radius);
    color: var(--field-text-color);
    display: block;
    letter-spacing: var(--field-text-letter-spacing);
    width: 100% !important;
}

.progress-form-shell input[type="date"],
.progress-form-shell input[type="text"],
.progress-form-shell select {
    line-height: var(--field-height);
    padding: var(--field-padding);
}

.progress-form-shell select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='hsl(0, 0%, 13%)' d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2rem center;
    background-size: 0.7em auto;
    padding-right: 5rem;
}

/* Choice (checkbox) */
.progress-form-shell .form__choice-wrapper {
    --label-text-font-weight: 500;
    column-gap: 1.5rem;
    display: grid;
    grid-template-columns: min-content 1fr;
    padding: 0;
}

.progress-form-shell input[type="checkbox"] {
    appearance: none;
    background: none;
    background-color: var(--field-background-color);
    border: var(--field-border);
    height: 2rem !important;
    width: 2rem !important;
    margin: 0;
    border-radius: 3px;
}

.progress-form-shell input[type="checkbox"]:focus-visible {
    outline-offset: 4px;
}

.progress-form-shell input[type="checkbox"]:checked {
    --field-border-color: transparent;
    --field-border: var(--field-border-width) var(--field-border-style) var(--field-border-color);
    background-color: hsl(var(--form-accent-color));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em auto;
}

/* Errors */
.progress-form-shell input[aria-invalid="true"],
.progress-form-shell select[aria-invalid="true"],
.progress-form-shell textarea[aria-invalid="true"] {
    --field-border-color: hsl(var(--form-error-color));
    --field-border: var(--field-border-width) var(--field-border-style) var(--field-border-color);
    --field-text-color: var(--error-text-color);
    box-shadow: 0 0 0 1px hsl(var(--form-error-color));
}

.progress-form-shell select[aria-invalid="true"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='hsl(356, 75%, 53%)' d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E");
}

.progress-form-shell .form__error-text {
    color: var(--error-text-color);
    font-family: var(--error-text-font-family);
    font-size: var(--error-text-font-size);
    font-weight: var(--error-text-font-weight);
    letter-spacing: var(--error-text-letter-spacing);
    line-height: 1.6;
    margin-top: calc(var(--space-multiplier) * 1rem);
}

/* =========================================================
   NetWorth app sizing alignment overrides (load last)
   ========================================================= */
.progress-form-shell {
    /* bring the component down to match the rest of your UI */
    --form-font-size: 1rem;

    --tabs-text-font-size: 1.1rem;
    --tabs-font-weight: 600;

    --step-text-font-size: 0.75rem;
    --step-font-weight: 600;

    --label-text-font-size: 0.9rem;
    --label-font-weight: 600;

    --field-text-font-size: 1rem;
    --field-font-weight: 500;

    --error-text-font-size: 0.85rem;

    --field-height: 2.75rem;
    /* smaller inputs */
    --field-border-radius: 3px;
    /* closer to your cards */

    --button-text-font-size: 1rem;
    --button-font-weight: 600;
    --button-border-radius: 3px;
    --button-border: 1px solid var(--button-border-color);
    --button-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* The big one: your component sets huge button sizing globally */
.progress-form-shell button {
        font-size: var(--button-text-font-size) !important;
            padding: 10px 24px !important;
            background-color: #102a42;
            color: #fff;
            border-radius: 4px;
            font-weight: 600;
}

/* Step labels were still visually heavy */
.progress-form-shell .progress-form__tabs-item {
    font-size: var(--tabs-text-font-size) !important;
    font-weight: var(--tabs-font-weight) !important;
}

.progress-form-shell .progress-form__tabs-item>.step {
    font-size: var(--step-text-font-size) !important;
    font-weight: var(--step-font-weight) !important;
    letter-spacing: 0.02em;
}

/* Don’t rely on sm:flex-row utilities; make action rows deterministic */
.progress-form-shell .pf-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* On narrow screens, stack (matches most app patterns) */
@media (max-width: 640px) {
    .progress-form-shell .pf-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .progress-form-shell .pf-actions>button {
        width: 100%;
    }
}