/* ===== Phones: a page's sections become tabs (PhoneTabs); from tablet width up every section shows ===== */
.phone-tabs {
    display: none;
}

@media (max-width: 767.98px) {
    .phone-tabs {
        display: flex;
        position: sticky;
        top: var(--phone-tabs-top, 0);
        z-index: 3;
        gap: 0.25rem;
        margin: 0.75rem -0.5rem 0;
        padding: 0.5rem 0.5rem;
        overflow-x: auto;
        background-color: var(--surface);
        border-bottom: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.15));
    }

    .phone-tab {
        flex: 0 0 auto;
        padding: 0.4rem 0.9rem;
        color: inherit;
        white-space: nowrap;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 999px;
    }

    .phone-tab.is-selected {
        background-color: var(--bs-primary, #0d6efd);
        color: #fff;
    }

    .phone-tab:focus-visible {
        outline: 2px solid var(--bs-primary, #0d6efd);
        outline-offset: 2px;
    }

    .phone-tab-panel:not(.is-selected) {
        display: none;
    }
}