/* =============================================================================
   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 border reads. No frost/blur: nothing scrolls
     behind the rail, so a backdrop blur would just bleed edge color. */
  background: transparent;
  border-right: 1px solid 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"] { 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 {
  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; }
}