/* Shared phone gutters and iOS safe areas. Desktop layout is unchanged. */
@media (max-width: 750px) {
    .app {
        --mobile-safe-top: env(safe-area-inset-top, 0px);
        --mobile-safe-right: env(safe-area-inset-right, 0px);
        --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
        --mobile-safe-left: env(safe-area-inset-left, 0px);
        --mobile-left: max(16px, var(--mobile-safe-left));
        --mobile-right: max(16px, var(--mobile-safe-right));
        --mobile-header-height: calc(62px + var(--mobile-safe-top));
    }

    .app,
    .app.sidebar-closed {
        padding-top: var(--mobile-header-height);
    }

    .app > .sidebar,
    .app.sidebar-closed > .sidebar {
        height: var(--mobile-header-height) !important;
        padding-top: var(--mobile-safe-top) !important;
        padding-right: var(--mobile-right) !important;
        padding-bottom: 0 !important;
        padding-left: var(--mobile-left) !important;
    }

    .app > .sidebar .nav,
    .app.sidebar-closed > .sidebar .nav {
        top: var(--mobile-header-height);
        padding-left: var(--mobile-left) !important;
        padding-bottom: max(28px, var(--mobile-safe-bottom)) !important;
    }

    .app .mobile-nav-backdrop {
        top: var(--mobile-header-height);
    }

    .app > .main,
    .app.sidebar-closed > .main {
        padding-bottom: max(24px, var(--mobile-safe-bottom)) !important;
    }

    .app > .main > .topbar,
    .app > .main > :not(.topbar) {
        padding-left: var(--mobile-left) !important;
        padding-right: var(--mobile-right) !important;
    }

    /* The workspace has no background on phones: inset the entire block,
       keeping the search panel and each ticket aligned with the heading. */
    .app > .main.tickets-main > .ticket-workspace {
        width: calc(100% - var(--mobile-left) - var(--mobile-right));
        max-width: none;
        margin-left: var(--mobile-left) !important;
        margin-right: var(--mobile-right) !important;
        padding: 0 !important;
    }

    .app > .main.tickets-main .tickets-table-modern tbody tr {
        grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    }

    .app > .main.tickets-main .ticket-list-updated {
        overflow-wrap: anywhere;
    }

    /* 16px prevents Safari from zooming the page when focusing a field. */
    .app > .main input:not([type="checkbox"]):not([type="radio"]),
    .app > .main select,
    .app > .main textarea {
        font-size: max(16px, 1em);
    }
}