/* rail-shell.css — Syncc global persistent left-rail shell
 * ──────────────────────────────────────────────────────────────────────
 * The persistent narrow left rail is the GLOBAL nav shell for every
 * authenticated non-admin (staff / teacher / student) page (see
 * inject_globals' `rail_shell_auto`). Admins keep the av2 admin shell;
 * /my-schedule keeps its own rail. This sheet is the single source of
 * truth for the rail-shell chrome — the same `.hpq-*` / `.md-rail`
 * markup used by base.html's auto-wrap AND by the Hall Pass
 * `_rail_shell.html` pages (teacher queue / station board) renders
 * identically from these rules. (The duplicated `.hpq-*` block +
 * `body.rail-body` navbar-hide that used to live in hall-pass.css were
 * removed when this sheet landed.)
 *
 * Layout: `[88px rail | 1fr content]` grid at >=1024px; below that the
 * rail is hidden and the global top navbar + bottom-tabs carry primary
 * nav (the rail is laptop/iPad/Chromebook-first). The rail is the only
 * chrome at laptop width, so base.html hides the top navbar + footer
 * there (`body.rail-body`, mirroring the av2 / myday shells).
 *
 * Tokens are local (`--rs-*`) so the rail never depends on a module
 * sheet being loaded. Accent defers to the brand palette (`--brand-teal*`,
 * injected per-user appearance) so a palette swap re-tints the rail with
 * no edit here. Neutral slate in light, navy in dark via `html.dark`.
 * Page background for rail pages = `--brand-page-deep` (the deep navy the
 * My Day shell uses), so every shell page shares one background.
 * ──────────────────────────────────────────────────────────────────── */

:root {
  --rs-card: #ffffff;
  --rs-ink1: #0F172A;
  --rs-ink2: #334155;
  --rs-ink3: #64748B;
  --rs-hair: #CBD5E1;
  --rs-hover: rgba(2, 6, 23, 0.035);
  /* Accent follows the user's chosen appearance palette (--brand-teal*);
     teal fallbacks keep parity if the palette layer is absent. */
  --rs-accent:      var(--brand-teal, #00B0B1);
  --rs-accent-dark: var(--brand-teal-dark, #008687);
  --rs-accent-soft: var(--brand-teal-soft, rgba(0, 176, 177, 0.10));
}
html.dark {
  --rs-card: #0E1D33;
  --rs-ink1: #E2E8F0;
  --rs-ink2: #CBD5E1;
  --rs-ink3: #94A3B8;
  --rs-hair: rgba(255, 255, 255, 0.08);
  --rs-hover: rgba(255, 255, 255, 0.04);
  --rs-accent-soft: color-mix(in srgb, var(--rs-accent) 18%, transparent);
}

/* ── Shell scaffold ──────────────────────────────────────────────────── */
.hpq-app { min-height: 100vh; }
.hpq-shell-main { min-width: 0; }
/* Breadcrumb strip in the rail content — match the page gutter. */
.hpq-crumb { padding: 12px clamp(16px, 3vw, 40px) 0; }

@media (min-width: 1024px) {
  .hpq-shell {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: 100vh;
  }
  .hpq-rail.md-rail {
    position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
    padding: 18px 8px;
    /* Transparent so the rail shows the shared page background
       (--brand-page-deep), matching the mockups + the My Day rail — not
       a distinct card colour. Only the hairline border separates it. */
    background: transparent;
    border-right: 1px solid var(--rs-hair);
  }
}
/* Below the laptop tier the rail is hidden — the global top navbar +
   bottom-tabs carry primary nav (they're only hidden >=1024px below). */
@media (max-width: 1023px) {
  .hpq-app .hpq-rail { display: none; }
}

/* ── Rail brand wordmark ─────────────────────────────────────────────── */
.hpq-rail .md-brand-w {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 0 22px;
  font: 700 20px/1 var(--brand-font-body, system-ui);
  letter-spacing: -0.025em; color: var(--rs-ink1);
}
.hpq-rail .md-brand-w em {
  color: var(--rs-accent);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400; font-size: 1.1em;
}

/* ── Profile-slider trigger (opens sign-out / push / account) ────────── */
.hpq-rail .md-rail-avatar {
  width: 40px; height: 40px; border-radius: 50%; margin: 2px auto 14px;
  display: grid; place-items: center; cursor: pointer; overflow: hidden;
  background: var(--rs-accent-soft); color: var(--rs-accent-dark);
  border: 1px solid var(--rs-hair); padding: 0;
  font: 600 14px/1 var(--brand-font-body, system-ui);
}
.hpq-rail .md-rail-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Rail nav items (icon over label) ────────────────────────────────── */
.hpq-rail .md-rail-nav { display: flex; flex-direction: column; gap: 4px; }
.hpq-rail .md-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 4px 10px; border-radius: 14px;
  color: var(--rs-ink3); font: 600 10.5px/1.1 var(--brand-font-body, system-ui);
  text-align: center; text-decoration: none; min-height: 64px;
  transition: background 0.15s, color 0.15s;
}
.hpq-rail .md-nav-item svg { width: 22px; height: 22px; stroke-width: 1.8; }
.hpq-rail .md-nav-item:hover { background: var(--rs-hover); color: var(--rs-ink2); }
.hpq-rail .md-nav-item.is-active { color: var(--rs-ink1); background: var(--rs-accent-soft); }
.hpq-rail .md-nav-item.is-active svg { color: var(--rs-accent); }
.hpq-rail .md-rail-spacer { flex: 1; }

/* ── Shell chrome hide ───────────────────────────────────────────────
   The rail is primary nav at laptop+; hide the global top navbar +
   reveal-zone + mac-dock + footer there (mirrors the av2 / myday
   shells) and zero the base <main> padding so the rail sits flush.
   Phone keeps the navbar + bottom-tabs since the rail is hidden below
   1024px. The maintenance / incident / session banners are deliberately
   NOT hidden — they're critical system state. */
@media (min-width: 1024px) {
  body.rail-body .navbar,
  body.rail-body .navbar-reveal-zone,
  body.rail-body .mac-dock,
  body.rail-body footer { display: none; }
  body.rail-body main:not(.hpq-shell-main) { padding: 0; margin: 0; }
}

/* ── Page background ─────────────────────────────────────────────────
   Every rail-shell page shares one background: the deep navy in dark
   (matches the My Day shell) and a quiet paper tone in light. */
body.rail-body { background: var(--brand-paper-2, #F1F5F9); }
html.dark body.rail-body { background: var(--brand-page-deep, #060B17); }

/* Content column gutter beside the rail — full-bleed (no max-width cap),
   just a gutter that grows a touch on large displays. Scoped to the
   AUTO-wrapped content (`.hpq-shell-main--auto`, added by base.html's
   rail_shell_auto branch) so it never double-pads the Hall Pass
   `_rail_shell.html` pages, which carry their own `.hp-wrap` inset
   inside `.hpq-shell-main`. The auto-wrap content has no inner wrapper,
   so it needs the gutter applied here — but ONLY at >=1024px, where
   the chrome-hide rule above zeros the base <main> padding. Below
   1024px the rail is hidden, the navbar shows, and base.html's <main>
   (`px-4 ... pb-24 md:pb-8`) supplies the phone gutter, so adding
   padding here too would double it. */
@media (min-width: 1024px) {
  .hpq-shell-main--auto { padding: 22px 24px 40px; }
}
@media (min-width: 1920px) {
  .hpq-shell-main--auto { padding: 28px 40px 48px; }
}