/* denovo-kit / layout-mobile.css
   Stage 2 — phone & iPad-portrait layout (<1024px).
   Single column, stacked cards, bottom tab bar. Soma-style structure,
   but keeps the spheric palette + fonts from tokens.css. */

@media (max-width: 1023px) {

    /* ── Hide the desktop header, show a compact mobile header ── */
    header > .header-inner { display: none; }

    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        padding-top: calc(14px + env(safe-area-inset-top));
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 1000;
        flex-shrink: 0;
    }
    .mobile-header .subtitle {
        font-family: var(--font-serif);
        font-size: 18px;
        font-weight: 500;
        color: var(--ink);
    }
    .mobile-header .logo {
        font-family: var(--font-sans);
        font-size: 10px;
        font-weight: 700;
        color: var(--ink-faint);
        letter-spacing: 1.5px;
    }

    /* ── Main: single column, scrolls, padded ──
       Bottom spacing is handled by a main::after pseudo-element spacer, not
       padding-bottom, because Chrome/Safari clip padding-bottom on
       `display: flex; overflow-y: auto` containers when scrolled to end. */
    main {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        width: 100%;
        padding: var(--space-lg) var(--space-lg) 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }
    /* Guaranteed trailing space inside <main>. Tall enough to clear the
       fixed bottom nav plus the iPhone home indicator, with a comfortable
       extra gap on top. */
    main::after {
        content: '';
        flex-shrink: 0;
        display: block;
        height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + var(--space-xl));
    }

    /* ── Rail collapses away on mobile ──
       Page-specific rail content should be duplicated inside the main body
       (hidden on desktop via `.mobile-only`, hidden on mobile naturally). */
    .page-rail-layout { display: flex; flex-direction: column; }
    .page-rail        { display: none; }
    .page-rail-content {
        flex: 1;
        min-width: 0;
        padding-right: 0;
    }

    /* ── Tab row: horizontal scroll on mobile ── */
    .tab-row {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-bottom: var(--space-md);
        /* Let the row bleed to the screen edges while the cards stay padded */
        margin-left: calc(-1 * var(--space-lg));
        margin-right: calc(-1 * var(--space-lg));
        padding: 0 var(--space-lg);
    }
    .tab-row::-webkit-scrollbar { display: none; }
    .tab-btn {
        flex-shrink: 0;
        padding: 10px 16px;
    }

    /* ── Visibility helpers ──
       .mobile-only shows below 1024px (implicit — it's not hidden here, but
       the corresponding rule in layout-desktop.css hides it on big screens).
       .desktop-only is hidden on mobile (rule here). */
    .desktop-only { display: none !important; }

    /* ── Cards: full-width, touch-friendly ── */
    .card {
        width: 100%;
        padding: var(--space-lg);
        min-height: 60px;
    }

    /* ── Bottom navigation (4 tabs) ── */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        background: var(--bg-raised);
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 999;
        height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    }
    .mobile-bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 8px 4px;
        color: var(--ink-faint);
        font-family: var(--font-sans);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        border-bottom: none;
        /* iOS needs explicit min-height for the touch target */
        min-height: 44px;
    }
    .mobile-bottom-nav a:hover { border-bottom: none; }
    .mobile-bottom-nav a.active {
        color: var(--accent-text);
    }
    .mobile-bottom-nav .icon {
        font-size: 22px;
        line-height: 1;
    }

    /* ── Buttons grow on mobile for tap targets ── */
    .btn {
        padding: 14px 24px;
        min-height: 44px;
        font-size: 15px;
    }

    /* ── Inputs: 16px font-size to prevent iOS zoom on focus ── */
    input, textarea, select {
        font-size: 16px;
        padding: 14px 14px;
    }

    /* ── Footer: compact on mobile, sits above the bottom nav ── */
    footer { display: none; }

    /* ── Hide desktop-only header nav on mobile ── */
    .header-nav { display: none; }

    /* ── Headings slightly smaller ── */
    h1 { font-size: 24px; }
    h2 { font-size: 19px; }
    h3 { font-size: 16px; }
}