/* Loaded @ media (max-width:768px). Canonical desktop boundary: 769px. */

/* @media (max-width:768px) */
@media (max-width: 768px) {
    .app-sidebar { display:none; }
    .app-main    { margin-left:0; }
    .bottom-tabs { display:flex; }
    .app-content { padding-bottom: calc(56px + env(safe-area-inset-bottom) + var(--space-2));
                   padding-left: var(--space-2); padding-right: var(--space-2); }
    body.wiki-page .app-content { padding-bottom: calc(56px + env(safe-area-inset-bottom) + var(--space-2)); }
    .status-bar-inner { display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .status-item { min-width: 0; }
    .status-empire-dropdown { flex: 0 0 30%; width: 30%; }
    .status-dp { flex: 0 0 20%; width: 20%; }
    .status-resources-dropdown { flex: 0 0 30%; width: 30%; }
    .status-players { flex: 0 0 20%; width: 20%; }
    .status-empire-dropdown,
    .status-dp,
    .status-resources-dropdown,
    .status-players {
        transition: flex-basis var(--transition-fast), width var(--transition-fast);
    }
    .status-bar-inner:has(.status-empire-tab[aria-expanded="true"]) .status-dp,
    .status-bar-inner:has(.status-empire-tab[aria-expanded="true"]) .status-resources-dropdown,
    .status-bar-inner:has(.status-empire-tab[aria-expanded="true"]) .status-players,
    .status-bar-inner:has(.status-resources-tab[aria-expanded="true"]) .status-empire-dropdown,
    .status-bar-inner:has(.status-resources-tab[aria-expanded="true"]) .status-dp,
    .status-bar-inner:has(.status-resources-tab[aria-expanded="true"]) .status-players {
        display: none;
    }
    .status-bar-inner:has(.status-empire-tab[aria-expanded="true"]) .status-empire-dropdown {
        flex-basis: 100%;
        width: 100%;
    }
    .status-bar-inner:has(.status-resources-tab[aria-expanded="true"]) .status-resources-dropdown {
        flex-basis: 100%;
        width: 100%;
    }
    .status-empire-level,
    .status-empire-pr,
    .status-turns,
    .status-credits,
    .status-food,
    .status-settings {
        display: none;
    }
    .status-resources-tab {
        min-width: 0;
        justify-content: center;
        gap: var(--space-1);
    }
    .status-menu,
    .status-empire-menu {
        position: fixed;
        top: var(--resource-bar-height);
        left: 0;
        right: 0;
        width: auto;
        max-height: min(70vh, 32rem);
        overflow-y: auto;
    }
    .status-menu-mobile-primary {
        display: grid;
    }

    .system-economy-overview,
    .system-factor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .system-economy-overview > div:nth-child(2n) {
        border-right: 0;
    }

    .system-economy-overview > div:nth-child(n + 3) {
        border-top: 1px solid var(--color-border-subtle);
    }

    .system-factor-grid {
        gap: var(--space-0-5);
    }
}

/* === Bottom tabs (mobile) ============================================ */
/* Hidden-by-default lives in base.css (always loaded); this file only
   positions/styles the bar and the @media block above flips it to flex. */
.bottom-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 56px;
    height: calc(56px + env(safe-area-inset-bottom));
    background: var(--color-bg-panel);
    border-top: 1px solid var(--color-border-subtle);
    z-index: 100;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-0-5) var(--space-1);
    color: var(--color-text-muted);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    min-height: 44px;
    min-width: 56px;
    justify-content: center;
}

.bottom-tab-diamond {
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid var(--color-text-muted);
    transform: rotate(45deg);
}

.bottom-tab-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bottom-tab.active {
    color: var(--color-accent);
}

.bottom-tab.active .bottom-tab-diamond {
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.more-overlay {
    position: absolute;
    bottom: calc(56px + env(safe-area-inset-bottom));
    left: var(--space-1);
    right: var(--space-1);
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border-subtle);
    border-bottom: 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
    max-height: min(68vh, 500px);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: var(--space-2);
}

.more-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1);
}

.more-section {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
    padding: var(--space-1);
    background: var(--color-bg-panel-raised);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-control);
}

.more-heading {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.more-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0.45rem 0.5rem;
    color: var(--color-text-primary);
    font-size: 0.875rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-control);
}

.more-link:hover {
    color: var(--color-text-primary);
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: var(--color-accent);
    text-decoration: none;
}

button.more-link {
    cursor: pointer;
    font-family: inherit;
    width: 100%;
}

/* === Table -> card (mobile) === */
@media (max-width: 768px) {
    .mobile-card-table thead { display:none; }
    .mobile-card-table tbody tr { display:block; margin-bottom:var(--space-2);
      border:1px solid var(--color-border-subtle); border-radius:var(--radius-panel);
      background:var(--color-bg-panel-raised); padding:var(--space-1) var(--space-2); }
    .mobile-card-table tbody td { display:flex; justify-content:space-between; gap:var(--space-2);
      border:0; padding:var(--space-0-5) 0; overflow-wrap:anywhere; }
    .mobile-card-table tbody td::before { content:attr(data-label); color:var(--color-text-muted);
      font-family:var(--font-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; }

    /* T3.1 — 44px tap target for action buttons inside card tables */
    .mobile-card-table td .btn-sm { min-height: 44px; }

    /* T3.2 — 44px touch targets + 16px font-size (prevents iOS focus-zoom) */
    input, select, textarea, .input, .input-sm { min-height: 44px; font-size: 16px; }

    /* T4 — admin multi-column grid utilities stack to one column on mobile.
       Scoped to .admin-shell: only admin templates use these raw grid-*
       utilities, so player-facing mobile output is unchanged. */
    .admin-shell .grid-2,
    .admin-shell .grid-3,
    .admin-shell .grid-4,
    .admin-shell .grid-cols-2,
    .admin-shell .grid-cols-3,
    .admin-shell .grid-cols-4,
    .admin-shell .grid-cols-5 { grid-template-columns: 1fr; }
}