/* ================================================================
   4xForecaster — /crypto page deltas
   --------------------------------------------------------------
   Layered ON TOP of /css/banners.css. This file holds only the
   crypto-only additions:

     1. Status colors for crypto banner words that the FX page
        doesn't use (DELEVERAGING, RISK-OFF, EASING, etc.).
     2. Cohort row styling inside CAPITAL ROTATION (Banner 05) —
        a lighter list layout vs the FX pair-card grid.
     3. PLACEHOLDER DATA tag (subtle bottom-right marker on each
        expanded banner).
     4. Read more affordance under banners 04 and 05.

   Spine geometry, transmission arrows, anchor dot, and bar collapse
   styling all reuse the FX framework unchanged.
   ================================================================ */

/* ----------------------------------------------------------------
   STATUS WORDS — collapsed banner state colors.
   Maps:
     crypto-pos     → green   (EXPANDING / RISK-ON / EASING / BULLISH)
     crypto-neg     → red     (DELEVERAGING / RISK-OFF / TIGHTENING / BEARISH)
     crypto-neutral → amber   (STABLE / MIXED / SIDEWAYS)
     crypto-pending → slate   (PENDING)
   ---------------------------------------------------------------- */
.crypto-state.crypto-pos     { color: var(--green); }
.crypto-state.crypto-neg     { color: var(--red); }
.crypto-state.crypto-neutral { color: var(--amber); }
.crypto-state.crypto-pending { color: var(--slate); opacity: 0.65; }

/* The crypto bar reuses .stack-bar exactly; no overrides needed. */

/* ----------------------------------------------------------------
   PLACEHOLDER DATA TAG — subtle pre-launch marker.
   Sits flush bottom-right inside any expanded banner detail panel.
   ---------------------------------------------------------------- */
.crypto-placeholder-tag {
  margin-top: 14px;
  text-align: right;
  font-family: var(--font-data);
  font-size: 0.55rem;
  letter-spacing: 1.2px;
  color: var(--slate);
  opacity: 0.55;
  text-transform: uppercase;
  border-top: 1px dashed var(--border-dim);
  padding-top: 6px;
  user-select: none;
}

.crypto-placeholder-tag--stale {
  color: #c0392b;
  opacity: 0.9;
  border-top-color: #c0392b;
  font-weight: 600;
}

/* ----------------------------------------------------------------
   SOURCE HEALTH STRIP — shows each data file's freshness under the
   hero. Phase 2 data-ops transparency.
   ---------------------------------------------------------------- */
.source-health {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 auto 18px;
  padding: 10px 14px;
  max-width: 900px;
  font-family: var(--font-data);
  font-size: 0.65rem;
  letter-spacing: 0.8px;
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  background: var(--panel-bg, rgba(255,255,255,0.02));
}

.source-health-label {
  text-transform: uppercase;
  color: var(--slate);
  margin-right: 6px;
  opacity: 0.75;
}

.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid currentColor;
  text-transform: lowercase;
}

.source-chip-name {
  font-weight: 600;
}

.source-chip-age {
  opacity: 0.7;
}

.source-chip--fresh { color: #2ecc71; }
.source-chip--aging { color: #e67e22; }
.source-chip--stale { color: #c0392b; }

/* ----------------------------------------------------------------
   READ-MORE AFFORDANCE — appears inside banners 04 and 05.
   Points at the future /crypto/articles route.
   ---------------------------------------------------------------- */
.crypto-readmore-row {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-dim);
  text-align: right;
}
.crypto-readmore-link {
  font-family: var(--font-data);
  font-size: 0.62rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.crypto-readmore-link:hover {
  border-bottom-color: var(--cyan);
}

/* ----------------------------------------------------------------
   BITCOIN DIRECTIONAL BIAS HERO — re-skin of the dxy-hero block
   so the value reads "BTC 62,400" instead of a DXY index value.
   The structural CSS lives in style.css; we only adjust the value
   font weight here so the symbol+price reads as a single unit.
   ---------------------------------------------------------------- */
.crypto-bias-hero .dxy-index-value {
  font-feature-settings: "tnum" on;
}

/* ----------------------------------------------------------------
   CAPITAL ROTATION — cohort sections.
   Reuses .pair-section grid (44px gutter for transmission arrow +
   1fr content column). Inside the content column we render a
   header row (cohort label + status chip) and a small list of
   asset rows — lighter than the full pair-card grid the FX page
   uses, since Phase 1 has placeholder data only.
   ---------------------------------------------------------------- */
.crypto-cohort-grid {
  /* inherits .pair-grid (column flex with 18px gap) */
}

.crypto-cohort-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 8px;
}
.crypto-cohort-label {
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 1.4px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
}
.crypto-cohort-status {
  font-family: var(--font-data);
  font-size: 0.55rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.crypto-cohort-status--green  { color: var(--green);  background: rgba(34,197,94,.06); }
.crypto-cohort-status--red    { color: var(--red);    background: rgba(239,68,68,.06); }
.crypto-cohort-status--orange { color: var(--amber);  background: rgba(245,158,11,.06); }
.crypto-cohort-status--grey   { color: var(--slate);  background: rgba(100,116,139,.06); opacity: 0.85; }

.crypto-cohort-cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crypto-cohort-summary {
  font-family: var(--font-data);
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: var(--bg-card-alt);
  border-radius: var(--radius);
  border-left: 2px solid var(--border-dim);
}

/* Asset rows — tabular, monospace, four columns. */
.crypto-cohort-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px 1fr;
  gap: 8px;
  padding: 5px 8px;
  font-family: var(--font-data);
  font-size: 0.62rem;
  align-items: center;
  border-bottom: 1px dotted var(--border-dim);
}
.crypto-cohort-row:last-child {
  border-bottom: none;
}
.crypto-cohort-row-name {
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.crypto-cohort-row-bias {
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  font-size: 0.58rem;
}
.crypto-cohort-row-bias.BULLISH  { color: var(--green); }
.crypto-cohort-row-bias.BEARISH  { color: var(--red); }
.crypto-cohort-row-bias.SIDEWAYS { color: var(--amber); }
.crypto-cohort-row-bias.MIXED    { color: var(--amber); }
.crypto-cohort-row-bias.PENDING  { color: var(--slate); opacity: 0.7; }

.crypto-cohort-row-conv {
  letter-spacing: 1.5px;
  text-align: center;
  font-size: 0.6rem;
  color: var(--text-muted);
}
.crypto-cohort-row-conv.BULLISH  { color: var(--green); }
.crypto-cohort-row-conv.BEARISH  { color: var(--red); }
.crypto-cohort-row-conv.SIDEWAYS { color: var(--amber); }
.crypto-cohort-row-conv.PENDING  { color: var(--slate); opacity: 0.7; }

.crypto-cohort-row-tag {
  color: var(--text-muted);
  font-size: 0.58rem;
  letter-spacing: 0.6px;
  text-align: right;
  text-transform: lowercase;
  opacity: 0.85;
}

/* ----------------------------------------------------------------
   CRYPTO TRANSMISSION ANCHOR — same dot as DXY but explicitly
   identified for the BTC bias banner (selector is independent so
   the FX page stays untouched).
   ---------------------------------------------------------------- */
.crypto-transmission-anchor {
  /* Already styled by .dxy-transmission-anchor in banners.css.
     This class only exists to make the anchor's purpose explicit
     in the crypto markup; geometry is inherited. */
}
#node-btc-bias { position: relative; }

/* ----------------------------------------------------------------
   MOBILE — tighten the cohort row grid.
   ---------------------------------------------------------------- */
@media (max-width: 520px) {
  .crypto-cohort-row {
    grid-template-columns: 1fr 64px 64px;
    gap: 6px;
    font-size: 0.58rem;
  }
  .crypto-cohort-row-tag {
    display: none;
  }
  .crypto-cohort-header {
    gap: 8px;
  }
  .crypto-cohort-label {
    font-size: 0.62rem;
  }
  .crypto-cohort-status {
    font-size: 0.5rem;
  }
}

@media (max-width: 380px) {
  .crypto-cohort-row {
    grid-template-columns: 1fr 56px;
    font-size: 0.55rem;
  }
  .crypto-cohort-row-conv {
    display: none;
  }
}

/* ----------------------------------------------------------------
   PHASE 3 — Per-asset rows inside each cohort (symbol / spot / 1d / 7d)
   Replaces the abstract BULLISH/NEUTRAL labels with live price data.
   ---------------------------------------------------------------- */
.crypto-asset-row {
  display: grid;
  grid-template-columns: 1fr 100px 70px 70px;
  gap: 10px;
  padding: 5px 8px;
  font-family: var(--font-data);
  font-size: 0.64rem;
  align-items: center;
  border-bottom: 1px dotted var(--border-dim);
}
.crypto-asset-row:last-child { border-bottom: none; }
.crypto-asset-row--head {
  color: var(--text-muted);
  font-size: 0.54rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-dim);
  opacity: 0.8;
}
.crypto-asset-row--empty {
  color: var(--slate);
  opacity: 0.5;
}
.crypto-asset-sym {
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.crypto-asset-spot {
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.crypto-asset-d1,
.crypto-asset-d7 {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.62rem;
}
.crypto-asset-d1--pos, .crypto-asset-d7--pos { color: var(--green); }
.crypto-asset-d1--neg, .crypto-asset-d7--neg { color: var(--red); }
.crypto-asset-d1--neu, .crypto-asset-d7--neu { color: var(--text-muted); }

@media (max-width: 520px) {
  .crypto-asset-row {
    grid-template-columns: 1fr 80px 56px 56px;
    gap: 6px;
    font-size: 0.58rem;
    padding: 4px 6px;
  }
  .crypto-asset-row--head { font-size: 0.5rem; }
}
@media (max-width: 380px) {
  .crypto-asset-row {
    grid-template-columns: 1fr 70px 50px;
    font-size: 0.55rem;
  }
  /* Drop 7d column on very narrow screens — 1d is the primary signal. */
  .crypto-asset-d7,
  .crypto-asset-row--head .crypto-asset-d7 { display: none; }
}

/* ----------------------------------------------------------------
   PHASE 3 — Hero meta line emphasis.
   State words sit inline; signal word picks up its bias color.
   ---------------------------------------------------------------- */
.hero-meta-state {
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.4px;
}
.hero-meta-signal {
  font-weight: 700;
  letter-spacing: 0.6px;
}
.hero-meta-signal.BULLISH  { color: var(--green); }
.hero-meta-signal.BEARISH  { color: var(--red); }
.hero-meta-signal.SIDEWAYS { color: var(--amber); }
.hero-meta-signal.PENDING  { color: var(--slate); opacity: 0.8; }