/* denovo-kit / layout-desktop.css
   Stage 2 — desktop & iPad-landscape layout (≥1024px).
   Rail sidebar + top-tabs + dense content. Matches spheric's look. */

@media (min-width: 1024px) {

    /* ── Header (sticky, centered to 1000px like spheric) ── */
    header {
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    .header-inner {
        max-width: 1000px;
        margin: 0 auto;
        padding: 24px 24px 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 24px;
    }
    .header-brand { display: flex; flex-direction: column; }
    .subtitle {
        font-family: var(--font-serif);
        font-size: 20px;
        font-weight: 500;
        color: var(--ink);
        margin-bottom: 2px;
    }
    .logo {
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 700;
        color: var(--ink-faint);
        letter-spacing: 1.5px;
    }
    .header-nav {
        display: flex;
        gap: 20px;
        align-items: center;
    }
    .header-nav a {
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-soft);
        border-bottom: none;
        letter-spacing: 0.2px;
    }
    .header-nav a:hover { color: var(--accent-text); }
    .header-nav a.active {
        color: var(--accent-text);
    }

    /* ── Main (centered, scrolls, pinned header/footer) ──
       padding-bottom is intentionally 0 — we use a real pseudo-element
       spacer (main::after) instead, because Chrome/Safari clip padding-bottom
       when a `display: flex; overflow-y: auto` container is scrolled to the
       end. A flex-item spacer is always rendered. */
    main {
        max-width: 1000px;
        margin: 0 auto;
        padding: 24px 24px 0;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    /* Guaranteed trailing space inside <main>. Replaces padding-bottom.
       This is a flex item at the end of the column, so it's always
       rendered regardless of scroll state. */
    main::after {
        content: '';
        flex-shrink: 0;
        display: block;
        height: var(--space-2xl);
    }

    /* ── Fixed-top / scroll-area split ── */
    .page-fixed-top {
        flex-shrink: 0;
        min-height: 46px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .page-scroll-area {
        flex: 1;
        position: relative;
        scrollbar-gutter: stable;
    }

    /* ── Rail layout (two-column: main + 280px right rail) ──
       Do NOT use flex-fill here (no `flex: 1` or `min-height: 0`). When the
       layout is flex-fill, inner content taller than the flex allocation
       overflows visibly past the container's bottom and lands on top of
       later siblings (e.g. main::after). Instead: let the layout be
       content-sized so main's overflow-y:auto scrolls the whole layout
       cleanly, with the ::after spacer sitting cleanly below. */
    .page-rail-layout {
        display: flex;
        align-items: flex-start;   /* don't stretch rail to match content height */
        gap: 0;
    }
    .page-rail-content {
        flex: 1;
        min-width: 0;
        padding-right: 12px;
    }
    .page-rail {
        width: 280px;
        flex-shrink: 0;
        border-left: 1px solid var(--border);
        padding: 16px 16px 12px 20px;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        background: var(--bg);
    }
    .rail-section {
        margin-bottom: var(--space-lg);
        min-width: 0;
        flex-shrink: 0;
    }
    .rail-section--fill {
        flex: 1 1 0%;
        display: flex;
        flex-direction: column;
        min-height: 80px;
        overflow: hidden;
        margin-bottom: var(--space-md);
    }
    .rail-heading {
        font-size: 11px;
        font-weight: 700;
        color: var(--ink-faint);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    /* ── Footer ── */
    footer {
        max-width: 1000px;
        margin: 0 auto;
        padding: 8px 24px;
        border-top: 1px solid var(--border);
        font-size: 10px;
        color: var(--ink-faint);
        text-align: center;
        letter-spacing: 0.5px;
        flex-shrink: 0;
        width: 100%;
    }

    /* ── Hide the mobile bottom nav on desktop ── */
    .mobile-bottom-nav { display: none !important; }
    .mobile-header     { display: none !important; }

    /* Visibility helper: matches .desktop-only in layout-mobile.css */
    .mobile-only       { display: none !important; }
}