/* ================================================================
   4xForecaster — Stacked Banners Framework
   --------------------------------------------------------------
   Generalizes the CROSS-ASSET / regime-bar collapsible pattern to
   all five transmission-chain sections:
     01 VOLATILITY REGIME  →  existing regime-bar (kept)
     02 US RATE STRUCTURE  →  .rates-bar         (new)
        CROSS-ASSET        →  existing cross-asset-bar (kept)
     03 DOLLAR BIAS        →  .dxy-bar           (new)
     04 PAIR BIAS          →  .pairs-bar         (new, with
                              transmission arrows into each cohort)

   All five banners are collapsed on load; click anywhere on a
   banner to expand/collapse its content.

   Transmission-arrow color rule is factored into a single block
   below (search: "TRANSMISSION ARROWS") so it can be swapped out
   wholesale without touching HTML/JS.
   ================================================================ */

/* ----------------------------------------------------------------
   LEFT SPINE — continuous dark-grey vertical connector chaining
   all five banners. Implemented as an absolutely-positioned
   pseudo-element on the existing <main.transmission> wrapper so
   there is no structural HTML addition.
   ---------------------------------------------------------------- */
main.transmission {
  position: relative;
  padding-left: 28px;
}
main.transmission::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 6px;
  bottom: 22px;
  width: 4px;
  border-radius: 2px;
  background: #2d313c;
  pointer-events: none;
}
main.transmission::after {
  content: '';
  position: absolute;
  left: 4px;
  bottom: 6px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #2d313c;
  pointer-events: none;
}

/* Small arrowhead marker at each banner junction — reinforces
   the "chained" framework without adding HTML. */
main.transmission .node--banner > .stack-bar::before,
main.transmission .node--banner > .regime-bar::before,
main.transmission > .cross-asset-bar::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #3a3f4e;
  transform: translateY(-50%);
  pointer-events: none;
}
main.transmission .node--banner > .stack-bar,
main.transmission .node--banner > .regime-bar,
main.transmission > .cross-asset-bar {
  position: relative;
}

/* Hide the per-section chain-link stubs — the unified spine
   replaces their function. */
main.transmission .chain-link { display: none !important; }

/* ----------------------------------------------------------------
   STACK BAR — shared banner header style. Mirrors .regime-bar and
   .cross-asset-bar exactly so all five banners read as one family.
   ---------------------------------------------------------------- */
.stack-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--bg-card-alt);
  border: 1px solid var(--border-dim);
  cursor: pointer;
  font-family: var(--font-data);
  font-size: 0.64rem;
  letter-spacing: 0.5px;
  user-select: none;
  margin-bottom: 4px;
  transition: border-color .15s;
}
.stack-bar:hover { border-color: var(--border); }
.stack-bar:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.stack-bar.open .stack-bar-toggle { transform: rotate(180deg); }

.stack-bar-num {
  color: var(--regime-accent);
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 1px;
}
.stack-bar-title {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.58rem;
  font-weight: 600;
  margin: 0;
}
.stack-bar-dash { color: var(--border-dim); }
.stack-bar-state {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--slate);
}
.stack-bar-toggle {
  color: var(--text-muted);
  margin-left: auto;
  transition: transform .2s;
  font-size: 0.75rem;
}

/* ----------------------------------------------------------------
   RIGHT-JUSTIFY STATUS on all five collapsed banners.
   The status span gets margin-left:auto, which pushes it (and the
   chevron after it) to the right end of the bar. The decorative
   dash that previously sat between status and chevron is hidden —
   it was a spacer for the centered-status layout.
   Applies to the new .stack-bar family AND the two pre-existing
   bars (.regime-bar, .cross-asset-bar) so all five read identically.
   ---------------------------------------------------------------- */
.stack-bar-state,
.regime-bar-state,
.cross-asset-state {
  margin-left: auto;
}
.stack-bar-state + .stack-bar-dash,
.regime-bar-state + .regime-bar-dash,
.cross-asset-state + .cross-asset-dash {
  display: none;
}
/* The existing toggle styling also used margin-left:auto, which made
   the flex container split free space between state and toggle (state
   landed mid-bar). Force the toggle to pack tight against the state so
   only the state consumes the auto-space. */
.stack-bar-state ~ .stack-bar-toggle,
.regime-bar-state ~ .regime-bar-toggle,
.cross-asset-state ~ .cross-asset-toggle {
  margin-left: 8px;
}

/* Per-banner status color modifiers.
   Positive / negative / neutral / unknown palette reused across
   all banners for visual consistency. */
.rates-state--easing,
.rates-state--tightening,
.dxy-state--BEARISH,
.dxy-state--BULLISH,
.pairs-state--bearish,
.pairs-state--bullish { color: var(--green); }

.rates-state--stable,
.pairs-state--sideways { color: var(--amber); }

.pairs-state--mixed { color: var(--amber); }

.rates-state--pending,
.dxy-state--pending,
.dxy-state--PENDING,
.dxy-state--SIDEWAYS,
.pairs-state--pending { color: var(--slate); opacity: 0.65; }

/* Note: rates "EASING" and "TIGHTENING" are both shown in green
   because either is a clean, directional signal — the DOLLAR BIAS
   banner downstream interprets the sign. Override downstream if
   you want rate-direction-specific color. */

/* Detail panel (content the bar reveals when expanded) */
.stack-bar-detail {
  padding: 12px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border-dim);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom: 10px;
}
.stack-bar-detail > :first-child { margin-top: 0; }
.stack-bar-detail > :last-child  { margin-bottom: 0; }

/* ----------------------------------------------------------------
   PAIR BIAS — vertical cohort stack with transmission arrows.
   Each cohort gets a 44px left gutter where an L-hook arrow is
   drawn. The hook visually reads as "comes down from the DOLLAR
   BIAS banner above, turns right into this cohort."
   ---------------------------------------------------------------- */
.pairs-bar-detail .pair-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pairs-bar-detail .pair-section {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 10px;
  align-items: start;
  position: relative;
}
.pairs-bar-detail .pair-section-header {
  grid-column: 2;
}
.pairs-bar-detail .pair-section-cards {
  grid-column: 2;
}

/* Transmission arrow container — injected as grid-column 1 */
.pair-transmission {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
  min-height: 40px;
}
.pair-transmission svg {
  width: 40px;
  height: 100%;
  min-height: 40px;
  display: block;
  overflow: visible;
}

/* ================================================================
   TRANSMISSION ARROWS — color rule block
   --------------------------------------------------------------
   Centralized so the styling can be swapped without touching
   the arrow anchor/path geometry or the JS classification logic.
   Classes applied by app.js per cohort:
     .t-arrow--green   → transmission favors this cohort
     .t-arrow--red     → transmission does NOT favor
     .t-arrow--orange  → partial / incomplete condition
     .t-arrow--grey    → uncertain / insufficient data
   ================================================================ */
.pair-transmission .t-arrow-path {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s ease;
}
.pair-transmission .t-arrow-head {
  transition: fill .25s ease;
}
.t-arrow--green  .t-arrow-path { stroke: var(--green); }
.t-arrow--green  .t-arrow-head { fill:   var(--green); }
.t-arrow--red    .t-arrow-path { stroke: var(--red); }
.t-arrow--red    .t-arrow-head { fill:   var(--red); }
.t-arrow--orange .t-arrow-path { stroke: var(--amber); }
.t-arrow--orange .t-arrow-head { fill:   var(--amber); }
.t-arrow--grey   .t-arrow-path { stroke: var(--slate); opacity: 0.55; }
.t-arrow--grey   .t-arrow-head { fill:   var(--slate); opacity: 0.55; }
/* ================================================================
   /TRANSMISSION ARROWS
   ================================================================ */

/* Anchor point on the DXY banner where transmission arrows
   visually originate (a tiny dot on the bottom edge of the
   DOLLAR BIAS banner). Purely cosmetic, reinforces the
   "origin" of the four arrows even when DXY is collapsed. */
.dxy-transmission-anchor {
  position: absolute;
  left: 22px;
  bottom: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a3f4e;
  box-shadow: 0 0 0 3px var(--bg);
  pointer-events: none;
  z-index: 1;
}
#node-dxy { position: relative; }

/* ----------------------------------------------------------------
   MOBILE — tighten spine and arrows at small widths so the
   framework stays legible down to 320px.
   ---------------------------------------------------------------- */
@media (max-width: 520px) {
  main.transmission {
    padding-left: 20px;
  }
  main.transmission::before {
    left: 6px;
    width: 3px;
  }
  main.transmission::after {
    left: 1px;
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-width: 9px;
  }
  main.transmission .node--banner > .stack-bar::before,
  main.transmission .node--banner > .regime-bar::before,
  main.transmission > .cross-asset-bar::before {
    left: -16px;
    border-left-width: 5px;
    border-top-width: 4px;
    border-bottom-width: 4px;
  }
  .pairs-bar-detail .pair-section {
    grid-template-columns: 28px 1fr;
    column-gap: 6px;
  }
  .pair-transmission svg {
    width: 26px;
  }
  .dxy-transmission-anchor {
    left: 14px;
    width: 8px;
    height: 8px;
  }
}

@media (max-width: 380px) {
  main.transmission {
    padding-left: 16px;
  }
  main.transmission::before {
    left: 4px;
    width: 3px;
  }
  .pairs-bar-detail .pair-section {
    grid-template-columns: 22px 1fr;
    column-gap: 4px;
  }
  .pair-transmission svg { width: 20px; }
}