/* ═══════════════════════════════════════════════
   Direction D refinements | Strategies hub + factsheets
   Loaded after rc-design-d.css and after the inline
   <style> the build-strategy-pages.js generator emits,
   so these rules win without anyone having to touch
   the generator. Same tokens (--rcd-*) as elsewhere.
   ═══════════════════════════════════════════════ */

/* ── Hero refinement | softer eyebrow pill, no hard underline border ── */
.rc-strat-hero-v2 {
  border-bottom: none !important;
  padding-bottom: 16px !important;
}
.rc-strat-hero-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  background: var(--rcd-card);
  border: 1px solid var(--rcd-rule);
  border-radius: var(--rcd-r-pill);
  font-family: var(--rcd-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--rcd-text-2) !important;
  box-shadow: var(--rcd-sh-1);
  margin-bottom: 18px !important;
  opacity: 1 !important;
  width: auto;
}
.rc-strat-hero-eyebrow .rc-strat-asof-inline {
  margin-left: 14px !important;
  opacity: 0.65 !important;
  padding-left: 14px;
  border-left: 1px solid var(--rcd-rule);
}
.rc-strat-hero-v2 h1 {
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
}
.rc-strat-hero-lede {
  color: var(--rcd-text-2) !important;
  opacity: 1 !important;
}

/* ── CTAs use Direction D button system ── */
.rc-strat-cta-primary {
  background: var(--rcd-text) !important;
  color: var(--rcd-bg) !important;
  border-radius: var(--rcd-r-md) !important;
  padding: 12px 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  box-shadow: var(--rcd-sh-2) !important;
  border: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.rc-strat-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--rcd-sh-3) !important;
  opacity: 1 !important;
}
.rc-strat-cta-secondary {
  background: var(--rcd-card) !important;
  color: var(--rcd-text) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-md) !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  box-shadow: var(--rcd-sh-1) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.rc-strat-cta-secondary:hover {
  transform: translateY(-1px);
  box-shadow: var(--rcd-sh-2) !important;
  border-color: var(--rcd-rule-strong) !important;
}

/* ── Strategy cards (the lineup grid card flavour) ── */
.strategy-card {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-lg) !important;
  box-shadow: var(--rcd-sh-1) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
  padding: 24px !important;
}
.strategy-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--rcd-sh-3) !important;
  border-color: var(--rcd-rule-strong) !important;
}
html.dark .strategy-card,
html.light .strategy-card {
  background: var(--rcd-card) !important;
  border-color: var(--rcd-rule) !important;
}
.strategy-stats {
  font-family: var(--rcd-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* ── Live NAV chart card ── */
.rc-live-chart {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-lg) !important;
  box-shadow: var(--rcd-sh-1) !important;
  padding: 26px !important;
}
html.dark .rc-live-chart, html.light .rc-live-chart {
  background: var(--rcd-card) !important;
  border-color: var(--rcd-rule) !important;
}
.rc-live-stat-num, .rc-kpi-num, .rc-stat-num {
  font-family: var(--rcd-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em !important;
}

/* ── Lineup KPI strip ── */
.rc-lineup-kpi {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-lg) !important;
  box-shadow: var(--rcd-sh-1) !important;
}
html.dark .rc-lineup-kpi, html.light .rc-lineup-kpi {
  background: var(--rcd-card) !important;
  border-color: var(--rcd-rule) !important;
}

/* ── Pick your starting point | 3-card chooser ── */
.rc-pick-card {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-lg) !important;
  box-shadow: var(--rcd-sh-1) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.rc-pick-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--rcd-sh-3) !important;
  border-color: var(--rcd-rule-strong) !important;
}
html.dark .rc-pick-card, html.light .rc-pick-card {
  background: var(--rcd-card) !important;
  border-color: var(--rcd-rule) !important;
}

/* ── Dense tables (lineup, year-by-year, drawdown, methodology) ── */
/* IMPORTANT: do NOT set overflow:hidden / overflow:clip on the wrap.
   The build-strategy-pages.js generator already sets overflow-x:auto
   for horizontal scroll. Adding any overflow-y constraint here would
   make the wrap a sticky-scope ancestor and break the position:sticky
   thead (rows would render visually overlapping the header). */
.rc-lineup-table-wrap, .rc-yby-wrap, .rc-dd-wrap {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-lg) !important;
  box-shadow: var(--rcd-sh-1) !important;
}
html.dark .rc-lineup-table-wrap, html.dark .rc-yby-wrap, html.dark .rc-dd-wrap,
html.light .rc-lineup-table-wrap, html.light .rc-yby-wrap, html.light .rc-dd-wrap {
  border-color: var(--rcd-rule) !important;
}
.rc-lineup-table, .rc-yby-table, .rc-dd-table {
  font-family: var(--rcd-sans) !important;
  /* CRITICAL: position:sticky on thead breaks under border-collapse:collapse
     in Chrome/Firefox (the merged borders confuse the sticky paint), which
     manifests as the first row visually rendering ABOVE the header. Force
     separate-collapse with zero spacing so sticky lands cleanly. Borders are
     re-applied per-cell via border-bottom in the generator's CSS. */
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.rc-lineup-table td, .rc-yby-table td, .rc-dd-table td {
  font-variant-numeric: tabular-nums;
}
/* Re-establish row separation since separate-collapse loses it.
   TK asked for "shadows small borders to identify each number value
   separately" — so we add per-cell vertical separators + alt-row
   stripe + a clear bottom-border on the thead so it visually anchors
   above row 1. */
.rc-lineup-table tbody tr td,
.rc-lineup-table tbody tr th,
.rc-yby-table tbody tr td,
.rc-dd-table tbody tr td {
  border-bottom: 1px solid var(--rcd-rule) !important;
  border-right: 1px solid var(--rcd-rule) !important;
}
.rc-lineup-table tbody tr td:last-child,
.rc-lineup-table tbody tr th:last-child,
.rc-yby-table tbody tr td:last-child,
.rc-dd-table tbody tr td:last-child {
  border-right: none !important;
}
/* Alt-row stripe so each row's numbers read as a discrete unit. */
.rc-lineup-table tbody tr.lineup-row:nth-child(odd) td,
.rc-lineup-table tbody tr.lineup-row:nth-child(odd) th,
.rc-yby-table tbody tr:nth-child(odd) td,
.rc-dd-table tbody tr:nth-child(odd) td {
  background: var(--rcd-bg-alt) !important;
}
/* Strong thead bottom-border so the header row visually anchors
   above row 1. Combined with opaque bg + z-index 5, the sticky
   thead now reads as a clear divider from data rows. */
.rc-lineup-table thead th,
.rc-yby-table thead th,
.rc-dd-table thead th,
.rc-hm-table thead th {
  border-bottom: 2px solid var(--rcd-text) !important;
  box-shadow: 0 1px 0 var(--rcd-rule) !important;
}

/* CRITICAL FIX (47L): kill position:sticky on these dense-table theads.
   Phase 47D/47H/47K each tried to fix the visual overlap where row 1
   appeared visually ABOVE the column header during scroll. Root cause
   was Chrome paint quirks under sticky+border-collapse+opacity-thead
   stack. Tables have only 16 rows and fit in viewport without sticky.
   Removing sticky entirely eliminates the bug class permanently. */
.rc-lineup-table thead th,
.rc-yby-table thead th,
.rc-dd-table thead th,
.rc-hm-table thead th {
  position: static !important;
  top: auto !important;
}
.rc-hm-table thead th.hm-name-col {
  position: sticky !important;  /* preserve LEFT-only sticky for horizontally-scrollable name col */
  left: 0 !important;
  top: auto !important;
}
.rc-hm-table tbody th.hm-name {
  position: sticky !important;  /* preserve LEFT-only sticky for body name col */
  left: 0 !important;
  top: auto !important;
}
/* Heatmap cells get vertical separators too, but keep their colour
   fills (the colour IS the data). */
.rc-hm-table tbody td.hm-cell,
.rc-hm-table tbody td.hm-ytd {
  border-right: 1px solid rgba(255,255,255,0.18) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
/* Keep the sticky thead opaque so rows scrolling under it never
   bleed through. Generator already sets background, but our card
   colour swap means we need to re-apply with the new token. */
.rc-lineup-table thead th,
.rc-yby-table thead th,
.rc-dd-table thead th,
.rc-hm-table thead th {
  background: var(--rcd-card) !important;
  z-index: 5 !important;
}
.rc-hm-table thead th.hm-name-col {
  background: var(--rcd-card) !important;
  z-index: 6 !important;
}
/* Heatmap wrap | match the rest of the card system */
.rc-hm-wrap {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-lg) !important;
  box-shadow: var(--rcd-sh-1) !important;
}
html.dark .rc-hm-wrap, html.light .rc-hm-wrap {
  border-color: var(--rcd-rule) !important;
}
/* Heatmap left frozen column (per-strategy name in tbody) needs the
   card colour and an explicit z-index so coloured cells don't bleed
   through during horizontal scroll. */
.rc-hm-table tbody th.hm-name {
  background: var(--rcd-card) !important;
  z-index: 1 !important;
}
.rc-hm-table tbody tr:nth-child(even) th.hm-name {
  background: var(--rcd-bg-alt) !important;
}

/* ── Eyebrow pill | applies to every .rc-strat-eyebrow on the hub ── */
.rc-strat-eyebrow {
  font-family: var(--rcd-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
}

/* ── Methodology card ── */
.rc-method {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-lg) !important;
  box-shadow: var(--rcd-sh-1) !important;
  padding: 26px 28px !important;
}
html.dark .rc-method, html.light .rc-method {
  background: var(--rcd-card) !important;
  border-color: var(--rcd-rule) !important;
}

/* ── Tier badge | softer, less hard ── */
.tier-badge {
  font-family: var(--rcd-mono) !important;
  border-radius: var(--rcd-r-sm) !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
}

/* ── Factsheet hero (per-strategy detail page) ── */
.hero {
  border-radius: var(--rcd-r-xl) !important;
  box-shadow: var(--rcd-sh-2) !important;
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
}
.hero-stamp {
  font-family: var(--rcd-mono) !important;
}