/* 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;
    /* A touch more top room so the brand + nav icons don't hug the top edge
       (maintainer Jun 6). */
    padding: 30px 8px 18px;
    /* Transparent so the rail shows the shared page background, matching the
       My Day (Home) rail. No vertical border: the Home rail is borderless and
       is the reference (maintainer Jun 7: "match everything according to the
       home page" — supersedes the earlier hairline-border-right note). */
    background: transparent;
  }
}
/* 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: SVG mark stacked over a small wordmark ───────────────────
   The rail is ~88px wide, too narrow for the full horizontal wordmark, so the
   brand block stacks the inline SVG mark (from the campusync_wordmark macro —
   one source of truth for the mark) ABOVE a small "Syncc" text wordmark,
   centered. The mark's colors live in the inline SVG; the tag's accent `em`
   defers to the palette via --rs-accent (never a hardcoded brand hex). */
.hpq-rail .md-brand-w {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0 22px;
}
/* The macro's mark is an <a> wrapping a square SVG — center it, ~30px. */
.hpq-rail .md-brand-w .brand-wordmark { display: inline-flex; }
.hpq-rail .md-brand-w .brand-wordmark svg { width: 30px; height: 30px; }
.hpq-rail .md-brand-tag {
  font: 700 13.5px/1 var(--brand-font-body, system-ui);
  letter-spacing: -0.025em; color: var(--rs-ink1);
}
.hpq-rail .md-brand-tag 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: 44px; height: 44px; border-radius: 50%; margin: 2px auto 16px;
  /* position:relative anchors the unread dot; NO overflow:hidden (it would clip
     the dot) — the <img> stays round via border-radius:inherit below. */
  display: grid; place-items: center; cursor: pointer; position: relative;
  background: var(--rs-accent-soft); color: var(--rs-accent-dark);
  /* Palette accent ring (maintainer Jun 6: "rail profile picture does not have
     accent ring … add accent ring", + matched size 40→44). The ring is a
     box-shadow OUTSIDE the box, so overflow:hidden (keeping the photo round)
     doesn't clip it. */
  border: 1.5px solid color-mix(in srgb, var(--rs-accent) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-accent) 16%, transparent);
  padding: 0;
  font: 600 15px/1 var(--brand-font-body, system-ui);
}
.hpq-rail .md-rail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Unread notification dot — desktop rail avatar (maintainer Jun 7: "there is
   no dot even though there are notifications"). Mirrors the mobile
   .rs-mtop-avatar dot; gated on .has-notif (added when notif_unread). The ring
   matches the page background so the dot reads as punched through the avatar. */
.hpq-rail .md-rail-avatar.has-notif::after {
  content: ""; position: absolute; top: 1px; right: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #ef4444; border: 2px solid var(--brand-paper-2, #F1F5F9);
  pointer-events: none;
}
html.dark .hpq-rail .md-rail-avatar.has-notif::after {
  border-color: var(--brand-page-deep, #060B17);
}

/* ── 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 top navbar + reveal-zone are hidden on rail pages at EVERY width —
   on phones too (maintainer Jun 6: "mobile navbar changes to old one except
   my-schedule"). Rail pages now match the My Day surface on mobile: the
   page's own hero is the top, the bottom-tabs are the primary nav, and the
   Messages tab badges unread. mac-dock + footer + the flush-<main> reset stay
   laptop-only (the rail owns the gutter there; below 1024px <main> keeps its
   phone padding). The maintenance / incident / session banners are
   deliberately NOT hidden — they're critical system state. */
body.rail-body .navbar,
body.rail-body .navbar-reveal-zone { display: none; }
@media (min-width: 1024px) {
  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); }
/* …but <body> is height:100% (one viewport), so on pages taller than the
   fold — e.g. the full-year calendar — the body fill stops at the bottom of
   the first screen and the lighter <html> canvas shows through below. Paint
   the shell wrapper too: it's min-height:100vh AND grows with content, so the
   page background covers the entire scroll height (the rail stays transparent
   over it). */
.hpq-app { background: var(--brand-paper-2, #F1F5F9); }
html.dark .hpq-app { 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; }
}

/* ── Mobile profile + theme toggle (≤1023px) ──────────────────────────
   On phones/tablets the rail is hidden and so is the top navbar
   (body.rail-body), so rail pages lose the avatar + light/dark toggle the
   My Day hero carries. This bar restores both on every rail page (maintainer
   Jun 6). Hidden ≥1024px — the rail owns those controls there. Apple-HIG:
   transparent, hairline-free, right-aligned; ≥44px tap target. The light/dark
   toggle is not here — it lives in the profile slider only. */
.rs-mtop { display: none; }
@media (max-width: 1023px) {
  .rs-mtop {
    display: flex; align-items: center; justify-content: flex-end;
    /* Sit clear of the iOS status bar / notch, flush to the page gutter. */
    padding: max(env(safe-area-inset-top, 0px), 8px) 4px 4px;
  }
  /* Avatar — accent ring (palette via --rs-accent), opens the profile slider.
     Matches the Home hero avatar: 48px + an unread red dot (maintainer Jun 6:
     "first page has a red dot but the others don't"). No overflow:hidden so the
     dot isn't clipped — the <img> stays round via border-radius:inherit. */
  .rs-mtop-avatar {
    box-sizing: border-box; padding: 0; margin: 0; cursor: pointer;
    position: relative;
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--rs-accent-dark);
    font: 600 15px/1 var(--brand-font-body, system-ui);
    background: var(--rs-accent-soft);
    border: 1.5px solid color-mix(in srgb, var(--rs-accent) 72%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-accent) 18%, transparent);
    transition: transform 0.15s;
  }
  .rs-mtop-avatar:active { transform: scale(0.94); }
  .rs-mtop-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
  .rs-mtop-avatar.has-notif::after {
    content: ""; position: absolute; top: 0; right: 0;
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444; border: 1px solid var(--brand-page-deep, #060B17);
    pointer-events: none;
  }
}

/* Persist the left rail across cross-document navigation (no white flash):
   a stable name makes the browser morph it old→new. See global-brand.css. */
.hpq-rail { view-transition-name: app-rail; }