/* Sidebar rail — Trending / Your watchlist.
 *
 * The first shared stylesheet on the site. Every other template still carries
 * its own copy-pasted :root block; this file deliberately does NOT redeclare
 * those tokens, it consumes them. New shared components belong here (or beside
 * here) rather than inside a template, which is how daily.html and
 * duck_symbol.html drifted apart in the first place.
 *
 * Consumers must set --colw (the page column width) before including the rail;
 * _topbar.html reads the same variable so the header column stays aligned with
 * the content column.
 */

/* ---- page grid -------------------------------------------------------- */
/* Rail LEFT: this reads as a desktop app more than an article with a margin
   note, which is what a persistent nav rail should feel like. */
.pagegrid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* Below the seam the rail can't hold its width without starving the main
   column, so it stacks UNDER the content — present, just last. Deliberately
   not `display:none`: hiding content on small screens hides it from the people
   most likely to be scanning quickly. */
@media (max-width: 1023px) {
  .pagegrid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the grid's own 28px gap already separates the rail — the desktop
     margin would double it up. */
  .pagegrid .rail { order: 99; position: static; margin-top: 0; }
}

/* ---- the rail --------------------------------------------------------- */
.rail {
  position: sticky;
  /* Pin BELOW the sticky chrome, not the viewport top: --topbarh is published
     by _topbar.html, --bandh by daily.html's sticky band (absent elsewhere →
     0px). Without these the rail's header slides under the sticky bars. */
  top: calc(var(--topbarh, 0px) + var(--bandh, 0px) + 16px);
  /* Both consumer pages give their MAIN column its top offset inside .pagemain
     (daily: section.tab padding-top 22px; symbol: .symhero padding) — the rail
     is the other grid column, so without its own margin it sits flush against
     whatever is above the grid (the sticky band / the topbar). 22px matches
     daily's tab padding so the railcard tops align. */
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* The tape can be far taller than the rail; sticky alone would let a long
     rail run past the viewport with no way to reach its end. */
  max-height: calc(100vh - var(--topbarh, 0px) - var(--bandh, 0px) - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.railcard {
  border: 1px solid var(--hair);
  border-radius: 13px;
  background: var(--panel);
  overflow: hidden;
}

.railtabs { display: flex; border-bottom: 1px solid var(--hair); background: var(--paper); }
.railtabs button {
  flex: 1;
  font: 700 12px var(--body);
  color: var(--dim);
  background: none;
  border: 0;
  padding: 11px 8px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.railtabs button.on { color: var(--ink); border-bottom-color: var(--duck); }
.railtabs button:hover:not(.on) { color: var(--ink); background: var(--soft); }
.railtabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ---- rows ------------------------------------------------------------- */
/* No sector column by design: at 260px it renders ~8 characters, and the
   trending set is routinely two-thirds one sector — every row would read
   "Informati…". Ticker, stance and movement are what a glance surface owes. */
.rrow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--soft);
  background: var(--paper);
}
.rrow:first-of-type { border-top: 0; }
.rrow:hover { background: var(--soft); }
.rrow:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.rrow .sym { font: 700 13px var(--mono); letter-spacing: 0.2px; min-width: 52px; }
.rrow .spacer { flex: 1; }
.rrow .mv { font: 700 10.5px var(--mono); min-width: 30px; text-align: right; }
.rrow .mv.up { color: var(--duck-deep); }
.rrow .mv.dn { color: var(--cuck-deep); }
.rrow .mv.fl { color: var(--faint); }

.rchip {
  font: 700 9.5px var(--body);
  letter-spacing: 0.3px;
  border-radius: 5px;
  padding: 2px 6px;
  text-transform: uppercase;
  flex: none;
}
.rchip.c-bull { background: var(--duck-bg); color: var(--duck-deep); }
.rchip.c-bear { background: var(--cuck-bg); color: var(--cuck-deep); }
.rchip.c-neut { background: var(--sit-bg); color: var(--dim); }
/* No fresh rating from any leg — an explicit "we don't know", not a gap. */
.rchip.c-none { background: transparent; color: var(--faint); border: 1px dashed var(--hair); }

.railfoot {
  padding: 9px 14px;
  font-size: 11px;
  color: var(--faint);
  background: var(--paper);
  border-top: 1px solid var(--soft);
}

/* These scrapers have a documented silent-failure history, so an empty rail is
   an expected state that has to say something, not a blank box. */
.railempty {
  padding: 22px 14px;
  text-align: center;
  color: var(--dim);
  font-size: 12.5px;
  background: var(--paper);
  line-height: 1.6;
}
.railempty a { color: var(--duck-deep); font-weight: 600; }

/* ---- related symbols (in-page on /duck/<sym>) ------------------------- */
.related { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.related a {
  font: 700 12px var(--mono);
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--paper);
}
.related a:hover { border-color: var(--duck); color: var(--duck-deep); }
.related a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rrow, .railtabs button { transition: none; }
}