/* charts-explainer.css — Per-EA storyline card that lives above the chart.
 * Reads CFINCharts._lastState and renders a plain-language explanation of
 * what the EA is doing right now (watching / armed / pending / in-position /
 * gated). One file, design-token-driven, no overrides into rail or chart. */

.charts-explainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 12px 6px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  font-family: var(--font-sans);
  color: var(--text-main);
  /* Subtle inner highlight so the card reads as a slightly raised surface
     rather than a flat panel pasted onto the chart background. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Top row: EA family badge + symbol/timeframe + gate pill on the right. */
.cex-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cex-fam {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.08);
  border: 1px solid var(--border-card);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-main);
}

.cex-fam-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  color: var(--bg-main);
}

/* Per-family accent colors via data-fam attribute. */
.cex-fam[data-fam="rb"]   .cex-fam-icon { background: var(--purple, #bf5af2); }
.cex-fam[data-fam="gl"]   .cex-fam-icon { background: var(--yellow, #ffcc00); }
.cex-fam[data-fam="gs"]   .cex-fam-icon { background: var(--accent, #0a84ff); }
.cex-fam[data-fam="nn"]   .cex-fam-icon { background: var(--profit, #52ca74); }
.cex-fam[data-fam="util"] .cex-fam-icon { background: var(--text-dim, #8e8e93); }
.cex-fam[data-fam="x"]    .cex-fam-icon { background: var(--text-dim, #8e8e93); }

.cex-sym {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-sub);
  letter-spacing: 0.02em;
}

.cex-gate {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cex-gate .cex-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.cex-gate.allowed {
  color: var(--profit, #52ca74);
  background: rgba(82, 202, 116, 0.10);
  border: 1px solid rgba(82, 202, 116, 0.30);
}
.cex-gate.allowed .cex-dot { background: var(--profit, #52ca74); }
.cex-gate.blocked {
  color: var(--loss, #ed645f);
  background: rgba(237, 100, 95, 0.10);
  border: 1px solid rgba(237, 100, 95, 0.30);
}
.cex-gate.blocked .cex-dot { background: var(--loss, #ed645f); }
.cex-gate.warming {
  color: var(--yellow, #ffcc00);
  background: rgba(255, 204, 0, 0.10);
  border: 1px solid rgba(255, 204, 0, 0.30);
}
.cex-gate.warming .cex-dot { background: var(--yellow, #ffcc00); }

/* Main story line — single sentence in plain language. */
.cex-story {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-main);
  margin: 0;
}

.cex-story strong {
  color: var(--text-main);
  font-weight: 600;
}

/* Key/value facts grid — sits below the story line, three across at desktop,
   wraps at narrow widths. */
.cex-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px 14px;
  font-size: 12px;
}
.cex-facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cex-facts .k {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cex-facts .v {
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}
.cex-facts .v.up   { color: var(--profit, #52ca74); }
.cex-facts .v.down { color: var(--loss, #ed645f); }

/* Stage progress strip — four dots connected by short lines, with the active
   stage highlighted. Lets the user see at a glance where the EA is in its
   lifecycle without reading the labels. */
.cex-stages {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-sub);
}
.cex-stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 0;
  white-space: nowrap;
}
.cex-stage .cex-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border-card);
  flex-shrink: 0;
}
.cex-stage.done .cex-pip {
  background: var(--text-dim, #8e8e93);
  border-color: var(--text-dim, #8e8e93);
}
.cex-stage.active .cex-pip {
  background: var(--accent, #0a84ff);
  border-color: var(--accent, #0a84ff);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
}
.cex-stage.active { color: var(--text-main); font-weight: 600; }
.cex-stage::after {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--border-card);
  margin-left: 6px;
}
.cex-stage:last-child::after { display: none; }

/* Counters footer — small, dim. */
.cex-counters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 11px;
  color: var(--text-dim);
}
.cex-counters .v { color: var(--text-sub); font-family: var(--font-mono); }

/* ─── Family-specific visual components ──────────────────────────────────
 * Each .cex-visual is ≤80px tall, inline SVG, token-driven palette.
 * Sits between the facts grid and the lifecycle strip. */
.cex-visual {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 2px 2px;
}
.cex-vis-svg {
  width: 100%;
  height: 28px;
  display: block;
  overflow: visible;
}
.cex-vis-label {
  font-size: 11px;
  color: var(--text-sub);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* PG_FX_RB — Range position indicator */
.cex-visual-rb .cex-vis-svg { height: 28px; }
.cex-rb-track {
  fill: var(--border-card);
  opacity: 0.7;
}
.cex-rb-arrow-buy  { fill: var(--profit, #52ca74); }
.cex-rb-arrow-sell { fill: var(--loss, #ed645f); }
.cex-rb-bid {
  stroke: var(--accent, #0a84ff);
  stroke-width: 1.5;
  opacity: 0.85;
}
.cex-rb-bid-dot {
  fill: var(--accent, #0a84ff);
  stroke: var(--bg-card, #1c1c1e);
  stroke-width: 1.5;
}
/* RB width gauge: day range width vs the EA's accepted [min,max] band. */
.cex-rb-ratio {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 9px;
  font-family: var(--font-mono);
}
.cex-rb-ratio-cap { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.cex-rb-ratio-track {
  position: relative;
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--text-dim, #8e8e93) 18%, transparent);
  overflow: hidden;
}
.cex-rb-ratio-band {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in oklab, var(--profit, #34c759) 32%, transparent);
}
.cex-rb-ratio-cursor {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
}
.cex-rb-ratio-cursor.in  { background: var(--profit, #34c759); }
.cex-rb-ratio-cursor.out { background: var(--loss, #ed645f); }
.cex-rb-ratio-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.cex-rb-ratio-val.up   { color: var(--profit, #34c759); }
.cex-rb-ratio-val.down { color: var(--loss, #ed645f); }
:root.light .cex-rb-ratio-track { background: color-mix(in oklab, var(--text-dim, #8e8e93) 26%, transparent); }

/* PG_CFD_GL — Vertical ladder */
.cex-visual-gl .cex-vis-svg { height: 76px; }
.cex-gl-rail {
  stroke: var(--border-card);
  stroke-width: 1;
  opacity: 0.6;
}
.cex-gl-rung-future {
  fill: transparent;
  stroke: var(--text-dim, #8e8e93);
  stroke-width: 1;
  opacity: 0.5;
}
.cex-gl-rung-pending {
  fill: var(--yellow, #ffcc00);
  opacity: 0.55;
  stroke: var(--yellow, #ffcc00);
  stroke-width: 1;
}
.cex-gl-rung-filled {
  fill: var(--yellow, #ffcc00);
  stroke: var(--yellow, #ffcc00);
  stroke-width: 1;
}
.cex-gl-rung-num {
  fill: var(--text-dim, #8e8e93);
  font-family: var(--font-mono);
  font-size: 9px;
}
.cex-gl-base {
  fill: var(--text-sub);
  font-family: var(--font-mono);
  font-size: 9px;
}

/* PG_GS_Scalp — Pattern arsenal chips */
.cex-gs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cex-gs-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  background: transparent;
  font-size: 10px;
  color: var(--text-sub);
  cursor: default;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cex-gs-chip .cex-gs-chip-code {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.cex-gs-chip .cex-gs-chip-name {
  font-size: 10px;
  color: var(--text-dim);
}
.cex-gs-chip.on {
  background: rgba(10, 132, 255, 0.16);
  border-color: var(--accent, #0a84ff);
  color: var(--text-main);
}
.cex-gs-chip.on .cex-gs-chip-name {
  color: var(--text-sub);
}
/* Activity-weighted states (data from armed_patterns fires_24h/vetos_24h). */
.cex-gs-chip-fires {
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--profit, #34c759);
  background: color-mix(in oklab, var(--profit, #34c759) 18%, transparent);
}
.cex-gs-chip.fired { border-color: color-mix(in oklab, var(--profit, #34c759) 45%, var(--border-card)); }
.cex-gs-chip.veto-heavy .cex-gs-chip-fires {
  color: var(--loss, #ed645f);
  background: color-mix(in oklab, var(--loss, #ed645f) 18%, transparent);
}
.cex-gs-chip.recent { box-shadow: 0 0 0 1px color-mix(in oklab, var(--profit, #34c759) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .cex-gs-chip.recent { animation: cexGsRecentPulse 2.4s ease-in-out infinite; }
}
@keyframes cexGsRecentPulse {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in oklab, var(--profit, #34c759) 55%, transparent); }
  50%      { box-shadow: 0 0 0 2px color-mix(in oklab, var(--profit, #34c759) 30%, transparent); }
}
:root.light .cex-gs-chip-fires { color: #1f8a3b; background: rgba(52, 199, 89, 0.16); }
:root.light .cex-gs-chip.veto-heavy .cex-gs-chip-fires { color: #b3261e; background: rgba(237, 100, 95, 0.16); }

/* Colour-coded fact values (e.g. Higher-TF bias): long/short/neutral. */
.cex-facts .v.cex-bias-up      { color: var(--profit, #34c759); font-weight: 700; }
.cex-facts .v.cex-bias-down    { color: var(--loss, #ed645f);   font-weight: 700; }
.cex-facts .v.cex-bias-neutral { color: var(--yellow, #ffcc00); font-weight: 700; }
:root.light .cex-facts .v.cex-bias-neutral { color: #8a6d00; }

/* PG_FX_NN — News countdown strip */
.cex-visual-nn .cex-vis-svg { height: 36px; }
.cex-nn-rail {
  stroke: var(--border-card);
  stroke-width: 1;
}
.cex-nn-hour {
  stroke: var(--text-dim, #8e8e93);
  stroke-width: 1;
  opacity: 0.5;
}
.cex-nn-hour-lbl {
  fill: var(--text-dim, #8e8e93);
  font-family: var(--font-mono);
  font-size: 8px;
}
.cex-nn-tick {
  stroke-width: 2;
}
.cex-nn-tick.tier-H { stroke: var(--loss, #ed645f); }
.cex-nn-tick.tier-M { stroke: var(--yellow, #ffcc00); }
.cex-nn-tick.tier-L { stroke: var(--text-dim, #8e8e93); }
.cex-nn-blackout.tier-H { fill: rgba(237, 100, 95, 0.18); }
.cex-nn-blackout.tier-M { fill: rgba(255, 204, 0, 0.18); }
.cex-nn-blackout.tier-L { fill: rgba(142, 142, 147, 0.12); }

/* Batch 5 polish — per-EA price/time labels inside visuals */
.cex-rb-edge-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-dim);
}
.cex-gl-rung-price {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-sub);
}
.cex-nn-tick-label {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--text-dim);
}

@media (max-width: 768px) {
  .charts-explainer { margin: 6px 8px 4px; padding: 10px 12px; gap: 8px; }
  .cex-story        { font-size: 13px; }
  .cex-gs-chip-name { display: none; }
}
@media (max-width: 480px) {
  .charts-explainer { margin: 4px 6px; padding: 8px 10px; gap: 6px; }
  .cex-stages       { display: none; }
  .cex-facts        { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Light-mode overrides ──────────────────────────────────────────────
 * Tokens (bg-card/border-card/text-*) auto-flip. Only the fixed-alpha
 * decorations below need explicit inversion to stay visible. */
:root.light .charts-explainer {
  /* Inset top highlight from white→dark so the card still reads as raised. */
  box-shadow: inset 0 1px 0 rgba(15, 15, 30, 0.04);
}
:root.light .cex-fam {
  /* Neutral grey wash needs a tiny lift on bright backdrop. */
  background: rgba(15, 15, 30, 0.04);
}
:root.light .cex-gate.allowed { background: rgba(82, 202, 116, 0.14); border-color: rgba(82, 202, 116, 0.40); }
:root.light .cex-gate.blocked { background: rgba(237, 100, 95, 0.14); border-color: rgba(237, 100, 95, 0.40); }
:root.light .cex-gate.warming { background: rgba(255, 204, 0, 0.18); border-color: rgba(204, 153, 0, 0.45); color: #8a6d00; }
:root.light .cex-stage.active .cex-pip {
  /* Accent ring needs more presence against white. */
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.24);
}
:root.light .cex-gs-chip.on { background: rgba(10, 132, 255, 0.12); }
:root.light .cex-nn-blackout.tier-L { fill: rgba(60, 60, 67, 0.14); }
/* The family-visual SVG rails/strokes use var(--border-card) which resolves
   near-white on the light canvas → the GL ladder rails and RB/NN baselines
   disappear. Pin them to a dark, semi-opaque ink in light mode. */
:root.light .cex-gl-rail { stroke: rgba(15, 15, 30, 0.35); opacity: 0.8; }
:root.light .cex-rb-bid  { stroke: rgba(15, 15, 30, 0.35); }
:root.light .cex-nn-rail { stroke: rgba(15, 15, 30, 0.30); opacity: 0.8; }
/* GL ladder tier numbers, base-price label, and empty-rung outlines used
   --text-dim/--text-sub which resolve too light on the white canvas — darken
   them so the ladder reads clearly in light mode. */
:root.light .cex-gl-rung-num    { fill: rgba(15, 15, 30, 0.58); }
:root.light .cex-gl-base        { fill: rgba(15, 15, 30, 0.62); }
:root.light .cex-gl-rung-future { stroke: rgba(15, 15, 30, 0.32); }

/* ════════════════════════════════════════════════════════════════════════
   Charts declutter 2026-06-02 — slim "context line" above the chart.
   The old explainer was a tall multi-row card; it is now a single-line status
   (family badge + plain-language story + gate chip) that shares ONE flex row
   with the market-state glance chips. The deep EA detail lives in the
   right-rail "Live Patterns" section (its single home). This block loads after
   charts-rail.css + charts-polish-v2.css so it wins on cascade order.
   ──────────────────────────────────────────────────────────────────────── */

/* The single context row: explainer (flex:1) left, ms glance chips right. */
.charts-shell .charts-context-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 6px 10px 0;
  min-width: 0;
}
/* Collapse the row to zero footprint when neither child is populated (JS sets
   inline display:none on both until an instance is selected). */
.charts-shell .charts-context-row:not(:has(> :not([style*="display: none"]):not([style*="display:none"]))) {
  margin: 0;
}

/* Slim, single-line explainer. Overrides the tall card above in this file. */
.charts-shell .charts-explainer {
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 11px;
  border-radius: 8px;
  box-shadow: none;
}
.charts-shell .charts-explainer .cex-fam {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: 11px;
}
.charts-shell .charts-explainer .cex-story {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.charts-shell .charts-explainer .cex-gate {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Market-state glance chips sit inline on the right of the context row — no
   bordered band, no collapse toggle taking a column. (A2 trims the seg count.) */
.charts-shell .charts-context-row .charts-ms-strip {
  /* Don't shrink — the story (explainer) ellipsizes instead, so the glance
     chips always render in full. */
  flex: 0 0 auto;
  margin: 0;
  min-height: 0;
  height: auto;
  align-self: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  gap: 4px;
}
.charts-shell .charts-context-row .charts-ms-strip .ms-seg {
  flex: 0 0 auto;          /* don't shrink → value never ellipsis-clips */
  min-width: max-content;
  border-right: 0;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.07);
  white-space: nowrap;
}
.charts-shell .charts-context-row .charts-ms-strip .ms-seg .ms-seg-val {
  font-size: 12px;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}
.charts-shell .charts-context-row .charts-ms-strip .ms-seg .ms-seg-lbl { font-size: 8px; }
:root.light .charts-shell .charts-context-row .charts-ms-strip .ms-seg {
  background: rgba(15, 15, 30, 0.045);
}
/* The ms-strip's own collapse toggle is redundant now that it's inline chips. */
.charts-shell .charts-context-row .charts-ms-strip .ms-strip-toggle { display: none; }

/* ── Overlay icon toolbar — compact, icon-led, single tight row ───────────── */
.charts-shell .charts-overlay-toolbar {
  min-height: 30px;
  padding: 3px 10px;
  margin: 6px 10px 0;
  gap: 4px;
  align-items: center;
}
.charts-shell .charts-overlay-toolbar .ov-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 7px;
}
.charts-shell .charts-overlay-toolbar .ov-group-lbl {
  font: 9px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, var(--text-sub));
  margin-right: 3px;
}
.charts-shell .charts-overlay-toolbar .ov-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  min-width: 0;
  padding: 0 8px;
  font-size: 10px;
}
.charts-shell .charts-overlay-toolbar .ov-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  font-size: 11px;
  line-height: 1;
}
/* News severity = dot size (low→high). Color follows the chip's pressed state. */
.charts-shell .charts-overlay-toolbar .ov-ic-news-l,
.charts-shell .charts-overlay-toolbar .ov-ic-news-m,
.charts-shell .charts-overlay-toolbar .ov-ic-news-h {
  border-radius: 50%;
  background: currentColor;
}
.charts-shell .charts-overlay-toolbar .ov-ic-news-l { width: 5px; height: 5px; opacity: 0.75; }
.charts-shell .charts-overlay-toolbar .ov-ic-news-m { width: 7px; height: 7px; }
.charts-shell .charts-overlay-toolbar .ov-ic-news-h { width: 9px; height: 9px; }

/* Protection icons are LINE-STYLE SWATCHES that mirror how the line is drawn on
   the chart, so the toolbar doubles as a legend: BE = solid, Trail = dashed,
   Levels (SL/TP) = dotted. Color follows the chip's pressed state (currentColor). */
.charts-shell .charts-overlay-toolbar .ov-ic-be,
.charts-shell .charts-overlay-toolbar .ov-ic-trail,
.charts-shell .charts-overlay-toolbar .ov-ic-levels {
  width: 14px;
  height: 0;
  border-top: 2px solid currentColor;
}
.charts-shell .charts-overlay-toolbar .ov-ic-trail  { border-top-style: dashed; }
.charts-shell .charts-overlay-toolbar .ov-ic-levels { border-top-style: dotted; }

.charts-shell .charts-overlay-toolbar .ov-tx { font-size: 10px; line-height: 1; }