/* Mobile-friendly layout + PWA app-bar. Loaded last so it can override base. */

/* Tables scroll horizontally instead of breaking the page on narrow screens. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 720px) {
    /* Comfortable thumb targets for forms. */
    .form input,
    .form select,
    .form textarea,
    .form button[type="submit"] { min-height: 44px; }
    .form .row2 { grid-template-columns: 1fr; }

    header { padding: .75rem 1rem; }

    /* Top nav becomes a fixed bottom tab bar (scrolls if it overflows). */
    nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        gap: 0;
        justify-content: flex-start;
        overflow-x: auto;
        background: var(--card);
        border-top: 1px solid var(--border);
        padding: .25rem .5rem;
        padding-bottom: calc(.25rem + env(safe-area-inset-bottom));
    }
    nav a,
    nav .link-btn {
        flex: 1 0 auto;
        min-width: 4rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: .5rem .4rem;
        font-size: .72rem;
    }
    nav .who { display: none; }

    /* Keep page content clear of the fixed bar. */
    main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}