/* ============================================================
   SevenTicker — Scroll-driven sticky rail
   Manages the layered sticky band across the dashboard and FTM.

   CSS variables (set by js/sticky-scroll.js after first render):
     --dash-sticky-h   height of the 3-row dashboard sticky bar
     --ads-rail-h      height of the ad rail (0 when ads is not pinned)
     --ftm-tabs-h      height of the FTM institution tabs bar
   ============================================================ */

/* ── Dashboard title (scrolls, no sticky) ── */
.dash-title {
  padding: 40px clamp(16px, 4vw, 48px) 20px;
  max-width: 1280px;
  margin: 0 auto;
}

.dash-title__inner {
  /* intentionally minimal — only the H1 lives here */
}

/* ── Dash wrapper: establishes the sticky context for the 3-row bar.
      When its bottom edge reaches --nav-height, the bar scrolls away
      and the ad-rail seamlessly takes its place.                    ── */
.dash-wrapper {
  /* no special layout needed; just a block context */
}

/* ── 3-row sticky bar ── */
.dash-sticky-bar {
  position: sticky;
  top: var(--nav-height);
  z-index: 50;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  width: 100%;
}

.dash-sticky-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px clamp(16px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.dash-sticky-bar__left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Compact the sub-text and legend inside the sticky bar */
.dash-sticky-bar .dash-header__sub {
  margin-bottom: 0;
  font-size: 0.8rem;
}

.dash-sticky-bar .dash-header__legend {
  gap: 6px;
}

/* ── Top Signal: featured card (no longer sticky) ── */
.signal-card--featured {
  background: var(--bg-card);
}

/* ── Quantum section header sticky ── */
.signal-group--quantum .signal-group__header {
  position: sticky;
  top: calc(var(--nav-height) + var(--dash-sticky-h, 60px));
  z-index: 28;
  /* pull to edges of the padded quantum card, then re-pad */
  margin: -20px -20px 14px;
  padding: 14px 20px;
  background: var(--bg-primary);
  border-bottom: 1px solid rgba(245, 197, 24, 0.15);
  /* match top border radius of parent card */
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* ── Ad rail: sticky, covers the 3-row bar when scrolled in ── */
.ad-rail {
  position: sticky;
  top: var(--nav-height);
  z-index: 60; /* above dash-sticky-bar (50) */
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  width: 100%;
}

.ad-rail .ad-slot {
  /* reset the margin:auto centering so it fills the rail width */
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px clamp(16px, 4vw, 48px);
}

/* ── FTM institution tabs: stacks below ad-rail when scrolled in ── */
.ftm__tabs {
  position: sticky;
  top: calc(var(--nav-height) + var(--ads-rail-h, 0px));
  z-index: 45;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  /* section.ftm already provides horizontal padding — no extra needed */
  padding: 10px 0;
  margin-bottom: 20px;
}

/* ── FTM table card headers: sticky below ads + institution tabs ── */
.ftm__table-card__header {
  position: sticky;
  top: calc(var(--nav-height) + var(--ads-rail-h, 0px) + var(--ftm-tabs-h, 50px));
  z-index: 20;
  background: var(--bg-card);
}

/* ── FTM inline ad (between tables on mobile, below both on desktop) ── */

/* Default (1-column, ≤768px): natural DOM order → Accumulate, Ad, Exit.
   Visual appearance comes from .ad-unit class (style.css).             */

/* 2-column layout: reorder ad to after both table cards */
@media (min-width: 769px) {
  .ftm__tables .ftm__table-card:first-child { order: 1; }
  .ftm__tables .ftm__table-card:last-child  { order: 2; }
  .ftm__inline-ad                            {
    order: 3;
    grid-column: 1 / -1;
    margin-top: 4px;
  }
}

/* ── Responsive adjustments ── */
@media (max-width: 768px) {
  .dash-sticky-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .dash-sticky-bar .dash-header__status {
    padding-top: 0;
  }

  /* On mobile the stepper row scrolls horizontally if pills overflow */
  .ftm__stepper-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}