nyc-wizard,
.nyc-wizard {
    --_nyc-wizard--gap: var(--nyc-sys-space-base, 1rem);
    display: flex;
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 0 .5rem 1px rgba(0, 0, 0, 0.15);
    background: var(--nyc-sys-color-surface-base, #FFF);
    margin-block: var(--nyc-sys-space-2xl, 2rem);
}

nyc-wizard:focus,
nyc-wizard:focus-visible,
.nyc-wizard:focus,
.nyc-wizard:focus-visible {
    outline: 2px solid var(--nyc-sys-color-focus, #000);
    outline-offset: -2px;
}

nyc-wizard .nyc-wizard--container,
.nyc-wizard .nyc-wizard--container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--nyc-sys-space-fluid-base-lg, 1.5rem) var(--nyc-sys-space-fluid-lg-xl, 2rem);
    padding-bottom: var(--nyc-sys-space-fluid-base-lg, 1.5rem);
    container: nyc-wizard-container / inline-size;
}

nyc-wizard .nyc-wizard--content,
.nyc-wizard .nyc-wizard--content {
    padding-block: var(--nyc-sys-space-base, 1rem);
}

nyc-wizard .nyc-wizard--actions,
.nyc-wizard .nyc-wizard--actions {
    padding-top: var(--nyc-sys-space-base, 1rem);
    display: flex;
    flex-wrap: wrap;
    gap: var(--_nyc-wizard--gap);
    container: nyc-wizard-actions / inline-size;
}

nyc-wizard .nyc-wizard--action-button,
.nyc-wizard .nyc-wizard--action-button {
    width: calc( 50% - calc( var(--_nyc-wizard--gap) / 2 ) );
}

nyc-wizard .nyc-wizard--title,
.nyc-wizard .nyc-wizard--title {
    margin-inline: calc( -1 * var(--nyc-sys-space-fluid-lg-xl, 2rem) );
    padding-inline: var(--nyc-sys-space-fluid-lg-xl, 2rem);
    padding-bottom: var(--nyc-sys-space-base, 1rem);
    border-bottom: 1px solid var(--nyc-sys-color-border-base, #DDD);
}

nyc-wizard .nyc-wizard--frame-label,
.nyc-wizard .nyc-wizard--frame-label {
    font-size: var(--nyc-sys-size-text-fluid-lg-xl, 1.5rem);
    color: var(--nyc-ref-color-gray-40, #CCC);
    margin-bottom: 2rem;
}

nyc-wizard .nyc-wizard--frame-label:has(.sr-only),
.nyc-wizard .nyc-wizard--frame-label:has(.sr-only) {
    pointer-events: none;
    margin: 0;
    padding: 0;
    height: 0;
}

.nyc-wizard--content .nyc-wizard--control-group,
nyc-wizard .field-group.banner-error,
.nyc-wizard .field-group.banner-error {
    margin-inline: calc( -1 * var(--nyc-sys-space-fluid-sm-base, 1rem) );
    padding-inline: var(--nyc-sys-space-fluid-sm-base, 1rem);
    margin-block: var(--nyc-sys-space-fluid-sm-base, 1rem);
    border-radius: .5rem;
}

nyc-wizard .nyc-wizard--subtext,
.nyc-wizard .nyc-wizard--subtext {
    margin-top: .75rem
}

nyc-wizard h4.nyc-wizard--subtext,
.nyc-wizard h4.nyc-wizard--subtext {
    margin-block: var(--nyc-sys-space-fluid-sm-base, 1rem);
}

.nyc-wizard--content .nyc-wizard--control-group:last-child {
    margin-bottom: 0;
}

.nyc-wizard--content .nyc-wizard--control-group input::placeholder {
    color: var(--nyc-sys-color-text-type-ahead);
}

.nyc-wizard--content .nyc-wizard--control-group .nyc-wizard--control.field-text label,
.nyc-wizard--content .nyc-wizard--control-group .nyc-wizard--control.field-select label,
.nyc-wizard--content .nyc-wizard--control-group fieldset legend {
    font-family: var(--nyc-sys-font-family-heading);
    font-size: var(--nyc-cmp-heading-h4-size);
    margin-bottom: var(--nyc-sys-space-fluid-xs-sm, .75rem);
    padding: 7px 0;
}

.nyc-wizard--content .nyc-wizard--control-group fieldset legend, 
.nyc-wizard--content .nyc-wizard--control-group fieldset legend + .nyc-wizard--control-group {
    margin-block: 0;
}

.nyc-wizard--content .nyc-wizard--control-group .nyc-wizard--control {
    font-size: var(--nyc-sys-size-text-fluid-lg-xl, 1.5rem);
}

.nyc-wizard--content .nyc-wizard--control-group .nyc-wizard--control label span i,
.nyc-wizard--content .nyc-wizard--control-group fieldset legend i {
    display: block;
    width: 100%;
    font-style: normal;
    margin-bottom: var(--nyc-sys-space-fluid-base-lg, 1.5rem);
}

.nyc-wizard--content .nyc-wizard--control-group .nyc-wizard--control label span i.subhead,
.nyc-wizard--content .nyc-wizard--control-group fieldset legend i.subhead {
    font-family: "Noto Sans", Helvetica, Arial, sans-serif;
    font-size: var(--nyc-sys-size-text-base);
    color: var(--nyc-sys-color-text-base, #000);
    margin-bottom: 0;
}

.nyc-wizard--content .nyc-wizard--control-group .nyc-wizard--control label span i.subhead.small,
.nyc-wizard--content .nyc-wizard--control-group fieldset legend i.subhead.small {
    color: var(--nyc-sys-color-text-secondary, #555);
    font-size: var(--nyc-sys-size-text-sm);
}

nyc-wizard .nyc-wizard--control-group:has([data-error]),
.nyc-wizard .nyc-wizard--control-group:has([data-error]) {
    background-color: var(--nyc-sys-color-surface-error, #fdd);
}

nyc-wizard .nyc-wizard--control-group:has([data-error]) .icon,
.nyc-wizard .nyc-wizard--control-group:has([data-error]) .icon {
    --_nyc-wizard--icon-error: calc(var(--_size-icon) * .8);
    width: var(--_nyc-wizard--icon-error);
    height: var(--_nyc-wizard--icon-error);
}

nyc-wizard [data-error-count],
.nyc-wizard [data-error-count] {
    font-weight: 700; 
    font-size: 1rem; 
    padding-block: var(--nyc-sys-space-fluid-sm-base, 1rem);
    background-color: var(--nyc-sys-color-surface-error, #fdd);

}

nyc-wizard .nyc-wizard--control-group:has([data-error]) .nyc-wizard--control label span i:last-child {
    margin-bottom: 0;
}


@container nyc-wizard-container (width <= 480px) {
    nyc-wizard .nyc-wizard--actions:has(> :first-child[data-variant="secondary"]),
    .nyc-wizard .nyc-wizard--actions:has(> :first-child[data-variant="secondary"]) {
        flex-direction: column-reverse;
    }
}

@container nyc-wizard-actions (width <= 480px) {
    nyc-wizard .nyc-wizard--action-button,
    .nyc-wizard .nyc-wizard--action-button {
        width: 100%;
    }
}

@media screen and (max-width: 570px) {
    nyc-wizard .nyc-wizard--actions:has(> :first-child[data-variant="secondary"]),
    .nyc-wizard .nyc-wizard--actions:has(> :first-child[data-variant="secondary"]) {
        flex-direction: column-reverse;
    }

    nyc-wizard .nyc-wizard--action-button,
    .nyc-wizard .nyc-wizard--action-button {
        width: 100%;
    }
}