/* ==========================================================================
   Clarifolio product shell — shared by Clarifolio.App and Clarifolio.Admin
   (Landing has its own marketing nav). The rail, mobile top bar, off-canvas
   behavior, user menu, avatar and the signed-out auth pages. Load it after
   _ClarifolioHead (it builds on components.css). Tokens only.

   Markup: .app-shell > .app-rail (+ .rail-brand, .rail-nav > .nav-pill.rail-link,
   .rail-section-label, .rail-footer) + .app-main; .mobile-topbar with
   #railToggle; #railBackdrop. Admin adds body.density-compact.
   ========================================================================== */

.app-shell { display: flex; min-height: 100vh; }

.app-main {
    flex: 1;
    min-width: 0;
    padding: var(--space-7) clamp(var(--space-5), 4vw, var(--space-8)) var(--space-8);
}
.density-compact .app-main { padding: var(--space-6) var(--space-6) var(--space-7); }

/* ---- Rail ---------------------------------------------------------------- */
.app-rail {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: var(--rail-width);
    height: 100vh;
    padding: var(--space-5) var(--space-3) var(--space-4);
    overflow-y: auto;
    background: var(--surface);
    border-right: var(--border);
}

.rail-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: 0 var(--space-2) var(--space-5);
    margin-bottom: var(--space-4);
    border-bottom: var(--border-subtle);
    text-decoration: none;
    color: var(--fg);
}

.rail-nav { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }

.rail-link { width: 100%; justify-content: flex-start; }
.rail-link svg { width: 18px; height: 18px; }

.rail-section-label {
    margin: var(--space-4) var(--space-3) var(--space-1);
    font: 700 .66rem/1.2 var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.rail-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }

.rail-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-1) 0;
    border-top: var(--border-subtle);
}
.rail-footer-note { margin: 0 var(--space-2); font-size: .72rem; color: var(--fg-muted); word-break: break-word; }

/* ---- User menu + avatar --------------------------------------------------- */
.rail-user-menu { min-width: 0; }
.rail-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    padding: var(--space-2);
    text-align: left;
    color: var(--fg);
    background: transparent;
    border: var(--border-width-subtle) solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.rail-user:hover, .rail-user[aria-expanded="true"] { border-color: var(--border-color); }
.rail-user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rail-user-name, .rail-user-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-user-name { font-size: .85rem; font-weight: 700; }
.rail-user-sub { font-size: .72rem; color: var(--fg-muted); }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    font: 700 .78rem/1 var(--font-mono);
    color: var(--accent-ink);
    background: var(--accent);
    border: var(--border-subtle);
    border-radius: var(--radius-pill);
}
.avatar-lg { width: 4rem; height: 4rem; font-size: 1.3rem; border-width: var(--border-width); box-shadow: var(--shadow-small); }

/* ---- Mobile: off-canvas rail + top bar ----------------------------------- */
.mobile-topbar, .rail-backdrop { display: none; }

@media (max-width: 900px) {
    .mobile-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        height: var(--topbar-height, 64px);
        padding: 0 var(--space-4);
        background: var(--surface);
        border-bottom: var(--border);
        text-decoration: none;
    }
    .mobile-topbar a { text-decoration: none; }

    .app-rail {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        transform: translateX(-105%);
        transition: transform .22s var(--press-ease);
        box-shadow: var(--shadow);
    }
    .app-rail.show { transform: translateX(0); }

    .rail-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: var(--overlay);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }
    .rail-backdrop.show { opacity: 1; visibility: visible; transition: opacity .2s ease; }

    .app-main { padding: calc(var(--topbar-height, 64px) + var(--space-5)) var(--space-4) var(--space-7); }
    .density-compact .app-main { padding: calc(var(--topbar-height, 64px) + var(--space-4)) var(--space-4) var(--space-6); }
}

/* ---- Signed-out (auth) pages --------------------------------------------- */
.auth-page { display: flex; flex-direction: column; min-height: 100vh; }
.auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-7));
    border-bottom: var(--border);
    background: var(--surface);
}
.auth-topbar a { text-decoration: none; }
.auth-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-7) var(--space-4); }
.auth-container { width: 100%; max-width: 440px; }
.auth-card { padding: clamp(var(--space-5), 5vw, var(--space-6)); }
.auth-card h1, .auth-card h2 { font-size: clamp(1.7rem, 5vw, 2.1rem); margin-bottom: var(--space-2); }
.auth-footnote { margin-top: var(--space-5); text-align: center; font-size: .82rem; color: var(--fg-muted); }