/* ============================================
   Data-Driven Components — Light Theme Overrides
   components-dd-light.css ?v=1.0

   When dd-components appear inside light-themed
   containers (topic pages, progress page), swap
   the dark tokens for light equivalents.
   ============================================ */

/* ── Scoped light overrides ───────────────────────────────── */
.tp-card .dd-module,
.tp-card .dd-flowchart,
.tp-card .dd-gauge,
.tp-card .dd-pathway,
.tp-card .dd-video-telem,
.rp-prog-card .dd-pathway,
.rp-readiness .dd-pathway {
  --dd-bg:            #16213e;
  --dd-bg-alt:        rgba(0,0,0,0.25);
  --dd-surface:       #16213e;
  --dd-surface-alt:   #0f3460;
  --dd-border:        rgba(255,255,255,0.10);
  --dd-border-light:  rgba(255,255,255,0.18);
  --dd-text:          #ffffff;
  --dd-text-mid:      rgba(255,255,255,0.70);
  --dd-text-muted:    rgba(255,255,255,0.50);
  --dd-text-dim:      rgba(255,255,255,0.35);

  /* Shadows deepen for dark theme */
  --dd-shadow:        0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
  --dd-shadow-lg:     0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}

/* Flowchart nodes on dark bg */
.tp-card .dd-flow__node {
  background: rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.10);
}
.tp-card .dd-flow__node:hover {
  border-color: rgba(255,255,255,0.18);
}
.tp-card .dd-flow__connector {
  color: rgba(255,255,255,0.35);
}
.tp-card .dd-flow__connector.is-active {
  color: var(--dd-cyan);
}
.tp-card .dd-flow__var-select {
  background: rgba(0,0,0,0.3);
  border-color: rgba(255,215,0,0.25);
  color: #fff;
}
.tp-card .dd-flow__var-select:focus {
  border-color: var(--rp-gold);
  box-shadow: 0 0 0 3px var(--rp-gold-soft);
}

/* Gauge on dark bg */
.tp-card .dd-gauge__slider {
  background: linear-gradient(90deg,
    #10B981 0%, #10B981 33%,
    #F59E0B 50%,
    #EF4444 75%, #EF4444 100%);
}
.tp-card .dd-gauge__slider::-webkit-slider-thumb {
  background: #fff;
  border-color: #16213e;
}
.tp-card .dd-gauge__slider::-moz-range-thumb {
  background: #fff;
  border-color: #16213e;
}

/* Gauge SVG text on dark bg */
.tp-card .dd-gauge__zone-label {
  fill: rgba(255,255,255,0.35);
}
.tp-card .dd-gauge__value {
  color: #ffffff;
}
.tp-card .dd-gauge__unit {
  color: rgba(255,255,255,0.35);
}

/* Zone chips on dark bg */
.tp-card .dd-gauge__zone-chip {
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.35);
}

/* Protocol / training cards on dark bg */
.tp-card .dd-protocol {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.40);
}
.tp-card .dd-training-step {
  background: rgba(16,185,129,0.10);
  border-color: rgba(16,185,129,0.40);
}

/* Pathway on dark bg — track background */
.rp-prog-card .dd-pathway__track,
.tp-card .dd-pathway__track {
  background: rgba(255,255,255,0.10);
}
.rp-prog-card .dd-pathway__node,
.tp-card .dd-pathway__node {
  background: rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.10);
}

/* Gauge needle on dark bg */
.tp-card .dd-gauge__needle {
  stroke: #fff;
}
.tp-card circle[fill="#F9FAFB"] {
  fill: #fff;
}