/* layout-shell.css — app shell (spec §2.1). Owner: lead (Phase 4b).
   Mobile-first: <768 top bar + bottom tab bar · 768–1023 icon rail · ≥1024 full sidebar.
   body[data-view="study"] = focus mode (shell hidden). Never use backdrop-filter/transform on .app-shell:
   it would become the containing block of the position:fixed tab bar. */

/* ---------- Skip link (first focusable element) ---------- */
.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    color: var(--text-brand);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-2);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transform: translateY(calc(-100% - var(--space-4)));
}

.skip-link:focus { transform: none; }

/* ---------- Shell: top bar (base / mobile) ---------- */
.app-shell {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--topbar-h);
    padding: 0 var(--space-3);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-ui);
}

.shell-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--text-1);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.shell-brand-mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--gradient-brand);
    color: var(--text-on-brand);
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: var(--fs-md);
    letter-spacing: -0.5px;
}

.shell-brand-text { display: none; min-width: 0; flex-direction: column; line-height: var(--lh-tight); }

.shell-brand-name {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: var(--fs-xl);
    letter-spacing: -0.5px;
    background: var(--gradient-brand-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.shell-brand-sub { display: none; font-size: var(--fs-xs); color: var(--text-3); }

.shell-icon, .shell-icon-btn svg, .user-menu-item svg { width: 22px; height: 22px; flex-shrink: 0; }

/* Text nodes in the shell never wrap or push layout (UI-1). */
.shell-label, .shell-brand-name, .user-menu-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nav: bottom tab bar on mobile */
.shell-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-sticky);
    background: var(--surface-1);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.shell-nav ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; }

.shell-nav a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    height: var(--tabbar-h);
    padding: 0 var(--space-1);
    color: var(--text-2);
    text-decoration: none;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-sm);
}

.shell-nav a .shell-label { max-width: 100%; }
.shell-nav a:focus-visible { outline-offset: -2px; }
.shell-nav a:hover { color: var(--text-1); background: var(--surface-2); }

.shell-nav a[aria-current="page"] { color: var(--text-brand); font-weight: var(--fw-semibold); }

.shell-nav a[aria-current="page"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 28px;
    height: 3px;
    margin-left: -14px;
    border-radius: 0 0 var(--radius-full) var(--radius-full);
    background: var(--gradient-brand);
}

/* Signed-in tools: sync dot · theme · ? · avatar (labels visually hidden on mobile) */
.shell-footer { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.shell-tools { display: flex; align-items: center; gap: var(--space-1); }

.shell-icon-btn, .user-menu-trigger, .sync-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    color: var(--text-2);
    font: inherit;
}

.sync-status { min-width: 32px; }
.shell-icon-btn, .user-menu-trigger { border: 0; background: none; cursor: pointer; }
.shell-icon-btn:hover, .user-menu-trigger:hover { background: var(--surface-2); color: var(--text-brand); }
.shell-icon-btn svg { transition: transform var(--dur-fast) var(--ease-out); }
.theme-toggle:hover svg { transform: rotate(30deg); }

/* Theme toggle shows the icon of the theme you would switch TO (spec §3.14). */
[data-theme="dark"] .theme-toggle .theme-icon-moon,
:root:not([data-theme="dark"]) .theme-toggle .theme-icon-sun { display: none; }

/* Sync status: dot + text (text sr-only in compact modes, still announced via role=status) */
.status-indicator { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: var(--warn); }
.status-indicator.online { background: var(--success); }
.status-indicator.syncing { background: var(--text-brand); animation: pulseSync 1s infinite alternate; }
.status-text { font-size: var(--fs-sm); }

@keyframes pulseSync { from { opacity: 0.35; } to { opacity: 1; } }

/* User menu */
.user-menu { position: relative; min-width: 0; }

.user-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--text-brand);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    text-transform: uppercase;
}

.username-display { flex: 1; color: var(--text-1); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.user-menu-chevron { display: none; width: 16px; height: 16px; flex-shrink: 0; margin-left: auto; color: var(--text-3); }

.user-menu-panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    width: max-content;
    min-width: 200px;
    max-width: min(280px, calc(100vw - var(--space-6)));
    padding: var(--space-2);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
}

.user-menu-name { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--text-2); }
.user-menu-name strong { color: var(--text-1); }

.user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-1);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-align: left;
    cursor: pointer;
}

.user-menu-item:hover { background: var(--surface-2); }
.user-menu-item.is-danger { color: var(--danger); }
.user-menu-item.is-danger:hover { background: var(--danger-soft); }

/* Visually hidden labels in compact modes (kept as accessible names). */
.shell-footer .shell-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ---------- Main ---------- */
.app-main {
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) calc(var(--tabbar-h) + var(--space-6) + env(safe-area-inset-bottom, 0px));
}

.app-main:focus { outline: none; }

/* Keep the toast above the tab bar on mobile (shell concern; toast styles live in components-overlays.css). */
body:not([data-view="study"]) .toast { bottom: calc(var(--tabbar-h) + var(--space-4) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 360px) {
    .shell-brand-text { display: flex; }
}

/* ---------- ≥768: icon rail ---------- */
@media (min-width: 768px) {
    body { flex-direction: row; }

    .app-shell {
        flex-direction: column;
        align-items: stretch;
        align-self: flex-start;
        flex-shrink: 0;
        gap: var(--space-4);
        width: var(--rail-w);
        height: 100vh;
        height: 100dvh;
        padding: var(--space-4) var(--space-2);
        border-bottom: 0;
        border-right: 1px solid var(--border);
    }

    .shell-brand { justify-content: center; }
    .shell-brand-text { display: none; }

    .shell-nav { position: static; flex: 1; min-height: 0; overflow-y: auto; padding: 0; border: 0; background: none; }
    .shell-nav ul { display: flex; flex-direction: column; gap: var(--space-1); }
    .shell-nav a { flex-direction: row; justify-content: center; gap: var(--space-3); height: 48px; padding: 0 var(--space-3); font-size: var(--fs-sm); }
    .shell-nav a[aria-current="page"] { background: var(--brand-soft); }

    .shell-nav a[aria-current="page"]::before {
        top: var(--space-2);
        bottom: var(--space-2);
        left: 0;
        width: 3px;
        height: auto;
        margin-left: 0;
        border-radius: var(--radius-full);
    }

    .shell-nav .shell-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .shell-footer { flex-direction: column; align-items: center; margin-left: 0; padding-top: var(--space-3); border-top: 1px solid var(--border); }
    .shell-tools { flex-direction: column; }
    .user-menu-panel { top: auto; right: auto; bottom: 0; left: calc(100% + var(--space-2)); }

    .app-main { padding: var(--space-6); }
    body:not([data-view="study"]) .toast { bottom: var(--space-6); }
}

/* ---------- ≥1024: full sidebar ---------- */
@media (min-width: 1024px) {
    .app-shell { width: var(--sidebar-w); padding: var(--space-5) var(--space-3); }

    .shell-brand { justify-content: flex-start; padding: 0 var(--space-2); }
    .shell-brand-text, .shell-brand-sub { display: flex; }

    .shell-nav a { justify-content: flex-start; height: 44px; font-size: 0.9375rem; }
    .shell-nav .shell-label, .shell-footer .shell-label { position: static; width: auto; height: auto; clip: auto; }

    .shell-footer { align-items: stretch; gap: var(--space-2); }
    .sync-status { justify-content: flex-start; padding: 0 var(--space-3); background: var(--surface-2); }
    .shell-tools { flex-direction: row; padding: 0 var(--space-1); }

    .user-menu-trigger { justify-content: flex-start; width: 100%; padding: 0 var(--space-2); border-radius: var(--radius-sm); text-align: left; }
    .user-menu-trigger:hover { color: var(--text-1); }
    .user-menu-chevron { display: block; }
    .user-menu-panel { left: 0; right: 0; bottom: calc(100% + var(--space-2)); width: auto; min-width: 0; }

    .app-main { padding: var(--space-8); }
}

/* ---------- Study focus mode: no shell, no tab-bar padding ---------- */
body[data-view="study"] .app-shell { display: none; }
body[data-view="study"] .app-main { padding-bottom: var(--space-6); }