/* Keep all step labels readable and the primary action in the mobile viewport. */
@media (max-width: 760px) {
    .setup-body {
        --setup-mobile-actions-space: 180px;
        scroll-padding-bottom: calc(var(--setup-mobile-actions-space) + env(safe-area-inset-bottom, 0px));
    }

    .setup-main {
        padding-bottom: calc(var(--setup-mobile-actions-space) + env(safe-area-inset-bottom, 0px));
    }

    .setup-top {
        display: flex;
        gap: 12px;
        padding: 12px 14px;
    }

    .setup-brand-icon,
    .setup-brand-logo {
        width: 120px;
        height: 50px;
        flex-basis: 120px;
    }

    .setup-top .setup-step-summary {
        width: auto;
        padding: 8px;
        flex-shrink: 0;
    }

    .setup-step-summary strong {
        display: none;
    }

    .setup-stepper .setup-step-item {
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
        padding: 12px 6px;
    }

    .setup-stepper .setup-step-item:not(.is-current):not(.is-complete) {
        color: var(--setup-muted);
    }

    .setup-stepper .setup-step-name,
    .setup-stepper .is-current .setup-step-name {
        display: block;
        max-width: none;
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
        text-overflow: clip;
        text-align: center;
        font-size: 12px;
        line-height: 1.4;
    }

    /* Transforms and backdrop filters would anchor fixed actions to the form. */
    .setup-stage {
        animation: none;
        transform: none;
    }

    .setup-stage .setup-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .setup-stage .setup-actions {
        position: fixed;
        z-index: 30;
        left: 12px;
        right: 12px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        width: auto;
        margin: 0;
        background: #fff;
    }

    .setup-stage .setup-actions .btn {
        min-height: 48px;
        white-space: normal;
        text-align: center;
    }

    [data-setup-draft-kind="workspace"] .setup-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .setup-stage input,
    .setup-stage select,
    .setup-stage button {
        scroll-margin-bottom: calc(var(--setup-mobile-actions-space) + env(safe-area-inset-bottom, 0px));
    }
}

/* A vertical list avoids splitting long translated labels on narrow phones. */
@media (max-width: 360px) {
    .setup-stepper {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .setup-stepper .setup-step-item {
        flex-direction: row;
        align-items: center;
        padding: 8px 12px;
    }

    .setup-stepper .setup-step-name,
    .setup-stepper .is-current .setup-step-name {
        text-align: left;
    }
}