/* =============================================================================
   Site rail — the global left section selector (Artemis-style).
   Shown on public pages via body.has-rail; the active item is set by
   body.rail-<section>. A fixed full-height column pinned to the left edge with
   a divider on its right edge; the global-nav logo sits in the cell above it.
   All in-flow content (plus the footer and the global ticker) clears it via the
   body padding-left, so nothing slides under the rail.
   ============================================================================= */

:root { --rail-w: 76px; --site-nav-h: 57px; }

/* Shift all in-flow content right of the rail. Fixed elements (nav, ticker,
   rail, ambient canvas) are viewport-anchored and ignore this padding. */
body.has-rail { padding-left: var(--rail-w); }

.site-rail {
  display: none;            /* shown only on body.has-rail */
  position: fixed; top: 0; bottom: 0; left: 0;
  width: var(--rail-w);
  z-index: 850;
  /* flex-start overrides Pico's nav{justify-content:space-between}, which
     otherwise spreads the buttons down the full column height. */
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 0;
  /* Clear the logo cell, then a small gap before the first button. */
  padding-top: calc(var(--site-nav-h) + 12px);
  /* Transparent — only the right divider reads. No frost/blur: nothing scrolls
     behind the rail, so a backdrop blur would just bleed edge color. */
  background: transparent;
}
/* Right divider drawn as a pseudo-element starting at the nav's bottom, so the
   line separates the rail from the page content but does NOT run up into the
   sticky bar (between the logo and the brand wordmark). */
.site-rail::after {
  content: '';
  position: absolute;
  top: var(--site-nav-h); right: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}
body.has-rail .site-rail { display: flex; }

.site-rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em;
  transition: color 0.15s;
}
/* The icon sits in a fixed box so the stack keeps an even rhythm whether or not
   a button is active; only the active/hover box reveals an outline card. */
.site-rail-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.site-rail-btn svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.site-rail-btn:hover { color: rgba(255, 255, 255, 0.92); }
.site-rail-btn:hover .site-rail-ico { background: rgba(255, 255, 255, 0.04); }

/* Active = outlined card around the icon (no accent fill). Driven by
   body.rail-<section> so the rail markup stays static across pages. */
body.rail-explore  .site-rail-btn[data-rail="explore"],
body.rail-ranks    .site-rail-btn[data-rail="ranks"],
body.rail-stats    .site-rail-btn[data-rail="stats"],
body.rail-news     .site-rail-btn[data-rail="news"],
body.rail-articles .site-rail-btn[data-rail="articles"],
body.rail-about    .site-rail-btn[data-rail="about"] { color: #fff; }
body.rail-explore  .site-rail-btn[data-rail="explore"] .site-rail-ico,
body.rail-ranks    .site-rail-btn[data-rail="ranks"] .site-rail-ico,
body.rail-stats    .site-rail-btn[data-rail="stats"] .site-rail-ico,
body.rail-news     .site-rail-btn[data-rail="news"] .site-rail-ico,
body.rail-articles .site-rail-btn[data-rail="articles"] .site-rail-ico,
body.rail-about    .site-rail-btn[data-rail="about"] .site-rail-ico {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}

/* Global ticker (#siteTicker) on rail pages: start it at the divider and drop
   its MOVERS label, matching /explore's ticker treatment. */
body.has-rail .tk-ticker { left: var(--rail-w); }
body.has-rail .tk-label { display: none; }

/* Topic profile pages (athlete/team) are full-bleed: .topic-custom-page breaks
   out to 100vw (margin-left: calc(-50vw + 50%)), which ignores the body offset
   and would slide under the rail. Make its container full-width and neutralize
   the breakout so the page fills the content area (right of the rail) instead.
   The footer + inline ticker still ride the body padding-left. */
body.page-topic-custom.has-rail main.container {
  max-width: 100%; width: 100%; padding-left: 0; padding-right: 0;
}
body.page-topic-custom.has-rail .topic-custom-page {
  width: auto; margin-left: 0;
}
/* The global nav is position:relative on topic pages (it scrolls away), so the
   body padding would shove it — and the logo — right of the rail. Pull it back
   across the rail so the logo still sits in the rail's top cell. */
body.page-topic-custom.has-rail .top-nav-bar {
  margin-left: calc(-1 * var(--rail-w));
  width: calc(100% + var(--rail-w));
}

/* Below the rail breakpoint: collapse the rail and reclaim the full width.
   Zeroing --rail-w also resets the body padding + ticker offset. */
@media (max-width: 1024px) {
  :root { --rail-w: 0px; }
  .site-rail { display: none !important; }
}