/* ──────────────────────────────────────────────────────
   TOP BAR (FA-26V5.5) — the global site-area nav.
   Persistent on every page: MDS wordmark (course home) +
   the area tabs (Content / Schedule / Projects / PSets /
   Prep For). The left rail handles depth *inside* Content;
   this bar handles breadth *across* the site.
   Injected by shared/top-bar.js; call renderTopBar().
   ────────────────────────────────────────────────────── */
:root { --top-bar-h: 48px; }

body.has-top-bar { padding-top: var(--top-bar-h); }

.top-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--top-bar-h);
    display: flex; align-items: center; gap: 1.1rem;
    padding: 0 1rem;
    background: var(--v5-surface, #fff);
    border-bottom: 1px solid var(--v5-hairline, #E5E7EB);
}
.top-bar .tb-wm { display: flex; align-items: center; gap: 0.45rem; text-decoration: none; flex: 0 0 auto; }
.top-bar .tb-wm img { display: block; }
.top-bar .tb-wm span {
    font-family: var(--v5-serif, Georgia, serif); font-weight: 500;
    font-size: 0.95rem; letter-spacing: -0.01em; color: var(--v5-ink, #0E0E10);
    white-space: nowrap;
}
.top-bar .tb-tabs { display: flex; gap: 0.15rem; min-width: 0; overflow-x: auto; }
.top-bar .tb-tabs::-webkit-scrollbar { height: 0; }
.top-bar .tb-tab {
    position: relative; flex: 0 0 auto;
    font-family: var(--v5-sans); font-size: 0.84rem; font-weight: 500;
    color: var(--v5-muted, #6B7280); text-decoration: none;
    padding: 0.85rem 0.7rem; white-space: nowrap;
    transition: color 0.12s;
}
.top-bar .tb-tab:hover { color: var(--v5-ink, #0E0E10); }
.top-bar .tb-tab.active { color: var(--v5-ink, #0E0E10); }
.top-bar .tb-tab.active::after {
    content: ''; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0;
    height: 2px; background: var(--v5-ink, #0E0E10); border-radius: 2px;
}

/* ──────────────────────────────────────────────────────
   AREA SPINE (FA-26V5.6) — the second chrome bar, course
   areas (SQL / Systems / nanoDB / Transactions / …). Sits
   directly under the top bar on Content pages; the left
   rail then shows depth INSIDE the lit area. Server-rendered
   as body.has-area-spine's first child (top-bar.js inserts
   the top bar before it).
   ────────────────────────────────────────────────────── */
:root { --area-spine-h: 42px; }

body.has-area-spine.has-top-bar { padding-top: calc(var(--top-bar-h) + var(--area-spine-h)); }

.area-spine {
    position: fixed; top: var(--top-bar-h); left: 0; right: 0; z-index: 99;
    height: var(--area-spine-h);
    background: var(--v5-bg, #F7F8FA);
    border-bottom: 1px solid var(--v5-hairline, #E5E7EB);
}
.area-spine .as-inner {
    position: relative; display: flex; align-items: center; gap: 0.3rem;
    height: 100%; padding: 0 1rem; overflow-x: auto;
}
.area-spine .as-inner::-webkit-scrollbar { height: 0; }
.area-spine .as-inner::before {
    content: ''; position: absolute; left: 1rem; right: 1rem; top: 50%;
    height: 2px; background: var(--v5-hairline-2, #D4D7DC); z-index: 0;
}
.area-spine .as-pill {
    position: relative; z-index: 1; flex: 0 0 auto; white-space: nowrap;
    font-family: var(--v5-sans); font-size: 0.78rem; font-weight: 500;
    color: var(--v5-muted, #6B7280); text-decoration: none;
    padding: 4px 12px; border-radius: 20px;
    background: var(--v5-surface, #fff);
    border: 1px solid var(--v5-hairline, #E5E7EB);
    transition: color 0.12s, border-color 0.12s;
}
.area-spine .as-pill:hover { color: var(--v5-ink, #0E0E10); border-color: var(--v5-hairline-2, #D4D7DC); }
.area-spine .as-pill.active {
    color: #fff;
    background: var(--area-accent, #334155);
    border-color: var(--area-accent, #334155);
}