/* ──────────────────────────────────────────────────────────────
   intelligence-detail.css - Narrative breakdown page
   ──────────────────────────────────────────────────────────────
   Inherits intel-empty + narr-dir-chip from intelligence.css
   (the detail page links both stylesheets). Iter 19.44 redesign:
   prominent asset hero, plain-conviction composite (no formula),
   vertical timeline, interactive price chart with crosshair +
   marker popups, compact mini-member cards (one per detector).
   The legacy member-card / evidence-chart / addrs-table blocks
   below are no longer rendered by the page; kept so any external
   consumer of these class names doesn't regress.
   ────────────────────────────────────────────────────────────── */

/* Alias the design-system token here too in case this stylesheet ever
   loads on a page that doesn't pull intelligence.css. */
:root { --text-mid: var(--text-md); }

.intel-detail-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.back-link {
  align-self: flex-start;
  color: var(--text-mid);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 0;
}
.back-link:hover { color: var(--text-hi); }

/* ── Header ─────────────────────────────────────────────────── */
.detail-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detail-head-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.detail-title {
  margin: 0;
  font-size: 26px;
  letter-spacing: -.01em;
  color: var(--text-hi);
}
.detail-head-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.meta-pill {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--text-mid);
}
.meta-pill.chain { opacity: .85; }
.meta-pill.rule  { color: var(--text-hi); }

.pruned-notice {
  background: color-mix(in srgb, #f5c400 16%, transparent);
  border: 1px solid color-mix(in srgb, #f5c400 40%, transparent);
  color: #d6ae00;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
}

/* ── Section cards ──────────────────────────────────────────── */
.intel-card-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* `display:flex` above outranks the UA's [hidden]{display:none}, so every
   section the page hides (scenario with no catalog copy, timeline with no
   members, chart for a stablecoin, chain with no predecessor) still painted
   as an empty titled card with a gap around it. */
.intel-card-section[hidden] { display: none; }
.intel-card-section h2 {
  margin: 0;
  font-size: 15px;
  color: var(--text-hi);
  letter-spacing: -.005em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.intel-card-section h2 .section-count {
  color: var(--text-mid);
  font-size: 12px;
  font-weight: 400;
}

/* ── Narrative explainer (intro paragraph) ──────────────────── */
.narrative-explainer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 6px;
}
.narrative-explainer.bull { border-left-color: var(--flow-in); }
.narrative-explainer.bear { border-left-color: var(--flow-out); }
.explainer-icon {
  font-size: 22px;
  line-height: 1;
  padding-top: 2px;
  opacity: .85;
}
.explainer-h {
  margin: 0 0 4px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-mid);
  font-weight: 500;
}
.narrative-explainer p {
  margin: 0;
  color: var(--text-hi);
  font-size: 14px;
  line-height: 1.55;
}

/* ── Composite hero (score + confidence) ────────────────────── */
.composite-hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.composite-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.composite-hero.bull::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--flow-in) 10%, transparent) 0%, transparent 60%);
}
.composite-hero.bear::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--flow-out) 10%, transparent) 0%, transparent 60%);
}

.hero-score-block,
.hero-confidence-block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-confidence-block {
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

/* Grade chip - EXTREME / HIGH / MODERATE / LOW */
.hero-grade {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
  background: var(--bg-card);
  color: var(--text-mid);
  border: 1px solid var(--border);
}
.composite-hero.bull .hero-grade.grade-extreme  { background: color-mix(in srgb, var(--flow-in) 22%, transparent); color: var(--flow-in); border-color: color-mix(in srgb, var(--flow-in) 40%, transparent); }
.composite-hero.bull .hero-grade.grade-high     { background: color-mix(in srgb, var(--flow-in) 14%, transparent); color: var(--flow-in); }
.composite-hero.bear .hero-grade.grade-extreme  { background: color-mix(in srgb, var(--flow-out) 22%, transparent); color: var(--flow-out); border-color: color-mix(in srgb, var(--flow-out) 40%, transparent); }
.composite-hero.bear .hero-grade.grade-high     { background: color-mix(in srgb, var(--flow-out) 14%, transparent); color: var(--flow-out); }

.hero-score-num {
  font-size: 64px;
  font-weight: 700;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.02em;
}
.hero-score-denom {
  font-size: 22px;
  color: var(--text-mid);
  font-weight: 500;
  margin-left: 4px;
}
.hero-score-bar {
  height: 8px;
  background: var(--bg-card);
  border-radius: 4px;
  overflow: hidden;
}
.hero-score-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--text-mid), var(--text-hi));
  transition: width .35s ease;
}
.composite-hero.bull .hero-score-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-in) 55%, transparent), var(--flow-in)); }
.composite-hero.bear .hero-score-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-out) 55%, transparent), var(--flow-out)); }

.hero-direction {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mid);
  font-weight: 600;
}

/* Confidence sub-block */
.hero-conf-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-mid);
  font-weight: 600;
}
.hero-conf-num {
  font-size: 38px;
  font-weight: 700;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-conf-pct {
  font-size: 18px;
  color: var(--text-mid);
  margin-left: 2px;
}
.hero-conf-bar {
  height: 5px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
}
.hero-conf-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--text-mid), var(--text-hi));
}
.hero-conf-meta {
  font-size: 11px;
  color: var(--text-mid);
  font-style: italic;
}

/* ── Member contributions ───────────────────────────────────── */
.contributions-block {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contributions-h {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-mid);
  font-weight: 500;
}
.contrib-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contrib-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contrib-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.contrib-detector {
  font-size: 13px;
  color: var(--text-hi);
  font-weight: 600;
}
/* Iter 19.7: math `${score} × ${boost} ÷ ${n}` removed from the row.
   The remaining `.contrib-val` shows only the resulting contribution. */
.contrib-val {
  font-size: 13px;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.contrib-bar {
  height: 8px;
  background: var(--bg-card);
  border-radius: 4px;
  overflow: hidden;
}
.contrib-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--text-mid), var(--text-hi));
  transition: width .35s ease;
}
.contrib-row.bull .contrib-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-in) 55%, transparent), var(--flow-in)); }
.contrib-row.bear .contrib-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-out) 55%, transparent), var(--flow-out)); }
/* Iter 19.7: .contrib-summary + .contrib-summary-final removed alongside
   the math walk-through. The hero score number is the final result; the
   intermediate Sum → rounded → capped sentence was math the user didn't
   want surfaced. */

/* ── Rule meta pills row ────────────────────────────────────── */
.composite-rule-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rule-pill {
  display: inline-flex;
  align-items: stretch;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  font-size: 11px;
}
.rule-pill-k {
  background: var(--bg-card);
  color: var(--text-mid);
  padding: 4px 8px;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-weight: 500;
  border-right: 1px solid var(--border);
}
.rule-pill-v {
  padding: 4px 10px;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}

/* Iter 19.7: .formula-details + .formula-steps + .formula-step + variants
   removed - the step-by-step math walk-through was hidden behind a
   <details> collapsible and is no longer rendered. The composite hero +
   contribution stack + per-member bars together explain the score visually;
   the formal math is not surfaced. If we ever need a debug view, expose it
   on the admin Intelligence tab, not on the user-facing detail page. */

/* ── Member cards grid ──────────────────────────────────────── */
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
}

.member-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.member-card.bull { border-left-color: var(--flow-in); }
.member-card.bear { border-left-color: var(--flow-out); }
.member-card.accent-purple { box-shadow: inset 3px 0 0 transparent; }
.member-card.accent-blue   { box-shadow: inset 3px 0 0 transparent; }
.member-card.accent-green  { box-shadow: inset 3px 0 0 transparent; }
.member-card.accent-orange { box-shadow: inset 3px 0 0 transparent; }

/* ── Stacked contribution bar (Iter 19.6) ────────────────────────
   Single horizontal bar split into one segment per member. Width per
   segment = (member.contribution / sum-of-all-contributions). Colours pull
   from the same accent palette as member-cards so an operator can
   visually link "this segment = this card below" without reading. */
.contrib-stack-block {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contrib-stack-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.contrib-stack-label {
  font-size: 11px;
  color: var(--text-mid);
  letter-spacing: .4px;
  text-transform: uppercase;
}
.contrib-stack-total {
  font-size: 11px;
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}
.contrib-stack-bar {
  display: flex;
  height: 14px;
  background: var(--bg-card);
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.stack-seg {
  height: 100%;
  display: block;
  transition: opacity .15s, transform .12s;
  cursor: help;
}
.stack-seg:hover {
  opacity: .85;
  transform: scaleY(1.05);
}
.stack-seg + .stack-seg { border-left: 1px solid var(--bg-card); }
/* Accent palette - matches member-card / detector accents. We mute them
   slightly with color-mix so the stack reads as one composite, not 4
   independent screams of colour. */
.stack-seg.accent-purple { background: color-mix(in srgb, #a78bfa 70%, transparent); }
.stack-seg.accent-blue   { background: color-mix(in srgb, #60a5fa 70%, transparent); }
.stack-seg.accent-green  { background: color-mix(in srgb, var(--flow-in) 65%, transparent); }
.stack-seg.accent-orange { background: color-mix(in srgb, #fb923c 70%, transparent); }
/* Direction tinting: bearish segments shift to the red side regardless of
   the detector accent - makes "the bearish member" instantly readable. */
.stack-seg.bear {
  background: color-mix(in srgb, var(--flow-out) 60%, transparent) !important;
}

.contrib-stack-legend {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.stack-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-mid);
}
.stack-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.stack-legend-swatch.accent-purple { background: color-mix(in srgb, #a78bfa 70%, transparent); }
.stack-legend-swatch.accent-blue   { background: color-mix(in srgb, #60a5fa 70%, transparent); }
.stack-legend-swatch.accent-green  { background: color-mix(in srgb, var(--flow-in) 65%, transparent); }
.stack-legend-swatch.accent-orange { background: color-mix(in srgb, #fb923c 70%, transparent); }
.stack-legend-name {
  color: var(--text-hi);
  font-weight: 500;
}
.stack-legend-val {
  font-variant-numeric: tabular-nums;
  color: var(--text-hi);
}
.stack-legend-pct {
  opacity: .65;
  font-variant-numeric: tabular-nums;
}

.member-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}
.member-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.member-detector {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-hi);
}

.member-score-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  min-width: 100px;
}
.member-score-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.member-score-bar {
  width: 100px;
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  overflow: hidden;
}
.member-score-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--text-mid), var(--text-hi));
}
.member-card.bull .member-score-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-in) 50%, transparent), var(--flow-in)); }
.member-card.bear .member-score-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-out) 50%, transparent), var(--flow-out)); }
.member-score-meta {
  font-size: 10px;
  color: var(--text-mid);
}

.member-sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.member-sub h4 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-mid);
  font-weight: 500;
}
.member-sub p {
  margin: 0;
  color: var(--text-hi);
  font-size: 12px;
  line-height: 1.5;
}
.member-why {
  font-style: italic;
  color: var(--text-mid);
}

/* Iter 19.7: .member-influence section removed from member cards (was
   showing the `score × boost ÷ n` math walk per member). The contribution
   stack + per-member bar in the composite block convey the same intent
   without surfacing the formula. */

/* ── Numbers table inside member card ───────────────────────── */
.numbers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.numbers-table th,
.numbers-table td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px dashed var(--border);
  vertical-align: top;
}
.numbers-table th {
  color: var(--text-mid);
  font-weight: 400;
  width: 42%;
}
.numbers-table td {
  color: var(--text-hi);
}
.numbers-table td.tnum {
  font-variant-numeric: tabular-nums;
  font-family: "JetBrains Mono", monospace;
}
.numbers-table tr:last-child th,
.numbers-table tr:last-child td { border-bottom: 0; }

/* ── Chip rows (tx/addr inside member card) ─────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  background: var(--bg-card);
  color: var(--text-hi);
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
}
.chip:hover { border-color: var(--text-mid); }

/* ── Underlying transactions table ──────────────────────────── */
.txs-loading {
  color: var(--text-mid);
  font-size: 12px;
  padding: 12px 0;
}
.txs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.txs-table thead th {
  text-align: left;
  background: var(--bg-input);
  color: var(--text-mid);
  font-weight: 500;
  letter-spacing: .3px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
}
.txs-table th.num { text-align: right; }
.txs-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-hi);
  vertical-align: middle;
}
.tx-time { color: var(--text-mid); font-size: 12px; white-space: nowrap; }
.tx-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--border2, var(--border));
  border-radius: 7px;
  color: var(--text-hi);
  background: var(--bg-card);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.tx-detail-link:hover { color: var(--accent-2); border-color: var(--accent-border); background: var(--accent-dim); }
.tx-detail-link .material-symbols-outlined { font-size: 14px; }
.tx-arrow { color: var(--text-mid); padding: 0 4px; }
.tx-value { text-align: right; }
.tnum    { font-variant-numeric: tabular-nums; }
.txs-mobile { display: none; }

.tx-row.locked .locked-cell {
  color: var(--text-mid);
  font-style: italic;
  text-align: center;
}

/* ── Addresses table ────────────────────────────────────────── */
.addrs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.addrs-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.addrs-table code {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-hi);
}
.addr-label {
  display: inline-block;
  background: var(--bg-input);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-hi);
}
.addr-label.muted { color: var(--text-mid); font-style: italic; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .intel-detail-main { padding: 14px; gap: 18px; }
  .detail-title { font-size: 22px; }

  .composite-hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-confidence-block {
    padding-left: 0;
    border-left: 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .hero-score-num { font-size: 52px; }
  .hero-conf-num  { font-size: 32px; }

  .narrative-explainer { grid-template-columns: 1fr; gap: 8px; }
  .explainer-icon { font-size: 20px; }

  .members-grid { grid-template-columns: 1fr; }

  /* Iter 19.7: .formula-step mobile rules dropped along with the formula block. */

  .rule-pill { font-size: 10px; }

  .txs-table thead { display: none; }
  .txs-table, .txs-table tbody, .txs-table tr, .txs-table td {
    display: block;
    width: 100%;
  }
  .txs-table tr {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px;
    margin-bottom: 8px;
  }
  .txs-table td { border-bottom: 0; padding: 4px 8px; }
  .tx-arrow { display: none; }
}

/* ── Timeline strip (Iter 19.6) ──────────────────────────────────
   Horizontal axis = the rule's time window. Markers absolutely-positioned
   by left:%; vertical lines + label chips above. Pure CSS - no SVG. */
#timeline-block h2 .section-sub {
  font-size: 11px;
  color: var(--text-mid);
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: .2px;
}
.timeline-axis {
  position: relative;
  height: 80px;
  margin: 12px 0 6px;
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(90deg, var(--bg-input) 0, transparent 8%, transparent 92%, var(--bg-input) 100%);
}
.timeline-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--border) 90%, var(--text-mid));
}
.timeline-tick-label {
  position: absolute;
  top: -16px;
  left: 4px;
  font-size: 10px;
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.timeline-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: help;
  outline: none;
}
.timeline-marker:focus { z-index: 10; }
.timeline-marker:hover .timeline-marker-label { color: var(--text-hi); }
.timeline-marker-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--border);
  background: var(--text-mid);
}
.timeline-marker.accent-purple .timeline-marker-dot { background: #a78bfa; }
.timeline-marker.accent-blue   .timeline-marker-dot { background: #60a5fa; }
.timeline-marker.accent-green  .timeline-marker-dot { background: var(--flow-in); }
.timeline-marker.accent-orange .timeline-marker-dot { background: #fb923c; }
.timeline-marker.bear .timeline-marker-dot {
  /* bearish direction overrides accent - same convention as the contribution stack */
  background: var(--flow-out);
}
.timeline-marker-label {
  font-size: 10px;
  color: var(--text-mid);
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: color .15s;
}
.timeline-legend {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: .3px;
  color: var(--text-mid);
  text-transform: uppercase;
}
.timeline-legend .muted { opacity: .85; }

@media (max-width: 720px) {
  .timeline-axis { height: 90px; }
  .timeline-marker-label { font-size: 9px; padding: 1px 4px; }
}

/* ── Evidence charts (Iter 19.6) ──────────────────────────────────
   Per-detector bar visuals rendered above the numbers table in member
   cards. Threshold marker is a red vertical line drawn via .ev-thresh
   absolute-positioned by left:%. */
.ev-chart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.ev-chart-h {
  font-size: 10px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: 2px;
}
.ev-chart-h .muted {
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
  opacity: .75;
}

/* z-score rows */
.ev-zrow {
  display: grid;
  grid-template-columns: 36px 1fr 60px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.ev-zrow.ev-zrow-composite {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.ev-zwin {
  color: var(--text-mid);
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-variant-numeric: tabular-nums;
}
.ev-zbar {
  position: relative;
  height: 8px;
  background: var(--bg-input);
  border-radius: 4px;
  overflow: hidden;
}
.ev-zbar i {
  display: block;
  height: 100%;
  border-radius: 4px;
}
.ev-zbar i.bull { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-in) 55%, transparent), var(--flow-in)); }
.ev-zbar i.bear { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-out) 55%, transparent), var(--flow-out)); }
.ev-thresh {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 0;
  border-left: 1px dashed var(--flow-out);
  opacity: .55;
}
.ev-zval {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono, "JetBrains Mono", monospace);
  color: var(--text-hi);
}
.ev-zval.bear { color: var(--flow-out); }
.ev-zval.bull { color: var(--flow-in); }

/* generic horizontal stack rows - used by stablecoin / cluster / dormant */
.ev-stack-row {
  display: grid;
  grid-template-columns: 130px 1fr 78px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.ev-stack-l {
  color: var(--text-mid);
}
.ev-stack-bar {
  position: relative;
  height: 8px;
  background: var(--bg-input);
  border-radius: 4px;
  overflow: hidden;
}
.ev-stack-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
}
.ev-stack-bar i.bull   { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-in) 55%, transparent), var(--flow-in)); }
.ev-stack-bar i.bear   { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-out) 55%, transparent), var(--flow-out)); }
.ev-stack-bar i.muted  { background: linear-gradient(90deg, color-mix(in srgb, var(--text-mid)  35%, transparent), var(--text-mid)); }
.ev-stack-v {
  text-align: right;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
  font-family: var(--mono, "JetBrains Mono", monospace);
}
.ev-ratio {
  font-size: 11px;
  color: var(--text-mid);
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}
.ev-ratio b { color: var(--text-hi); }

@media (max-width: 600px) {
  .ev-stack-row,
  .ev-zrow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label value"
      "bar bar";
    gap: 6px 10px;
    font-size: 10.5px;
  }
  .ev-stack-l,
  .ev-zwin { grid-area: label; min-width: 0; }
  .ev-stack-v,
  .ev-zval { grid-area: value; justify-self: end; }
  .ev-stack-bar,
  .ev-zbar { grid-area: bar; width: 100%; }
}

/* ── Price chart with signal markers (Iter 19.6) ────────────────── */
#price-chart-block h2 .section-sub {
  font-size: 11px;
  color: var(--text-mid);
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.price-chart-svg {
  width: 100%;
  height: 220px;
  display: block;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--mono, "JetBrains Mono", monospace);
}
.price-grid {
  stroke: var(--border);
  stroke-width: 0.5;
  stroke-dasharray: 2 4;
  opacity: .55;
}
.price-tick-x,
.price-tick-y {
  fill: var(--text-mid);
  font-size: 10px;
  font-family: inherit;
}
.price-line {
  stroke-width: 1.5;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, currentColor 25%, transparent));
}
.price-anchor {
  stroke: var(--text-hi);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: .55;
}
.price-anchor-l {
  fill: var(--text-mid);
  font-size: 10px;
  font-family: inherit;
}
.price-marker {
  cursor: help;
  outline: none;
}
.price-marker:focus .price-marker-dot { stroke-width: 3; }
.price-marker:hover .price-marker-line { stroke-opacity: .9; }
.price-marker-line {
  stroke: var(--text-mid);
  stroke-width: 1;
  stroke-opacity: .35;
  stroke-dasharray: 2 2;
}
.price-marker-dot {
  fill: var(--text-mid);
  stroke: var(--bg-card);
  stroke-width: 2;
}
.price-marker.accent-purple .price-marker-line,
.price-marker.accent-purple .price-marker-dot { stroke-opacity: .55; }
.price-marker.accent-purple .price-marker-dot { fill: #a78bfa; }
.price-marker.accent-blue   .price-marker-dot { fill: #60a5fa; }
.price-marker.accent-green  .price-marker-dot { fill: var(--flow-in); }
.price-marker.accent-orange .price-marker-dot { fill: #fb923c; }
.price-marker.bear .price-marker-dot { fill: var(--flow-out); }
.price-marker.bear .price-marker-line { stroke: var(--flow-out); stroke-opacity: .35; }
.price-marker.bull .price-marker-line { stroke: var(--flow-in); stroke-opacity: .35; }

@media (max-width: 720px) {
  .price-chart-svg { height: 200px; }
}

/* ── Iter 19.15 - Conviction hero breakdown ──────────────────────
   Replaces the old "Confidence" sub-block. Shows score × confidence =
   conviction explicitly so the operator sees how the primary number
   is derived. */
.hero-conv-breakdown {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-conv-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1 1 60px;
  min-width: 0;
}
.hero-conv-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-conv-num.hero-conv-final {
  font-size: 26px;
  color: var(--text-hi);
}
.composite-hero.bull .hero-conv-num.hero-conv-final { color: var(--flow-in); }
.composite-hero.bear .hero-conv-num.hero-conv-final { color: var(--flow-out); }
.hero-conv-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-mid);
  text-align: center;
}
.hero-conv-mul {
  align-self: center;
  font-size: 18px;
  color: var(--text-mid);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   Iter 19.44 - Detail page redesign
   ══════════════════════════════════════════════════════════════
   The blocks above this comment power the LEGACY layout
   (renderMemberCard with charts + numbers tables + addrs table).
   The page no longer renders those, but the styles stay because
   the IntelExplain.renderMemberCard / renderEvidence helpers are
   public on window.IntelExplain and other surfaces could use them.
   New page styles live below. ══════════════════════════════════════════════════════════════ */

/* ── Asset hero header ───────────────────────────────────────
   The user asked for the asset to be EXPLICIT - this is the first
   thing on the page now: big coin icon + symbol + chain, then the
   narrative title beside it. Direction stripe on the left as the
   primary visual cue (bull/bear). */
.detail-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.detail-hero.bull { border-left-color: var(--flow-in); }
.detail-hero.bear { border-left-color: var(--flow-out); }
.detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
}
.detail-hero.bull::before { background: linear-gradient(135deg, color-mix(in srgb, var(--flow-in) 8%, transparent), transparent 50%); }
.detail-hero.bear::before { background: linear-gradient(135deg, color-mix(in srgb, var(--flow-out) 8%, transparent), transparent 50%); }

.detail-hero-asset {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.detail-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 56px;
}
.detail-hero-icon img,
.detail-hero-icon .asset-icon,
.detail-hero-icon .asset-icon-badge {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50%;
}
.detail-hero-asset-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-hero-sym {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-hi);
  letter-spacing: -.02em;
  line-height: 1;
}
.detail-hero-chain {
  font-size: 12px;
  color: var(--text-md);
  letter-spacing: .2px;
}

.detail-hero-narr {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid var(--border);
  padding-left: 22px;
}
.detail-hero-narr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.detail-hero-narr .detail-title {
  margin: 0;
  font-size: 22px;
  color: var(--text-hi);
  font-weight: 600;
  letter-spacing: -.01em;
}
.detail-hero-meta {
  font-size: 12px;
  color: var(--text-md);
}
.detail-conf-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-hi);
  background: var(--bg-input);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* ── Composite block (new simple form) ────────────────────── */
/* Overrides the legacy two-column hero above. The hero-score-block /
   hero-confidence-block split is gone - replaced by a single conv block
   + a plain-English summary paragraph beside it. */
.composite-hero {
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 22px;
  padding: 16px 20px;
}
.hero-conv-block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-conv-num {
  font-size: 58px;
  font-weight: 700;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.02em;
}
.composite-hero.bull .hero-conv-num { color: var(--flow-in); }
.composite-hero.bear .hero-conv-num { color: var(--flow-out); }
.hero-conv-bar {
  height: 6px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
}
.hero-conv-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--text-md), var(--text-hi));
  transition: width .35s ease;
}
.composite-hero.bull .hero-conv-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-in) 55%, transparent), var(--flow-in)); }
.composite-hero.bear .hero-conv-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-out) 55%, transparent), var(--flow-out)); }
.hero-summary {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-hi);
  align-self: center;
  border-left: 1px solid var(--border);
  padding-left: 22px;
}

/* ── Timeline (vertical list) ────────────────────────────── */
/* Replaces the horizontal absolute-positioned axis. One row per
   event, top = most recent. Three columns: time | detector pill |
   short detail (wraps freely). */
.tl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tl-row {
  display: grid;
  grid-template-columns: 64px 170px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
}
.tl-row.bull { border-left-color: var(--flow-in); }
.tl-row.bear { border-left-color: var(--flow-out); }
.tl-time {
  color: var(--text-md);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.tl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-hi);
  font-weight: 500;
  width: fit-content;
}
.tl-pill-icon {
  font-size: 14px !important;
  color: var(--text-md);
}
.tl-row.bull .tl-pill-icon { color: var(--flow-in); }
.tl-row.bear .tl-pill-icon { color: var(--flow-out); }
.tl-pill-arrow {
  font-size: 11px;
  color: var(--text-md);
  font-variant-numeric: tabular-nums;
}
.tl-row.bull .tl-pill-arrow { color: var(--flow-in); }
.tl-row.bear .tl-pill-arrow { color: var(--flow-out); }
.tl-detail {
  color: var(--text-hi);
  line-height: 1.45;
}

/* ── Price chart - interactive ───────────────────────────── */
/* Overrides for: brighter tick labels on dark theme (the --text-md
   alias upstairs already fixes the old --text-mid fall-through, but
   we set fill explicitly for clarity), larger plot, hit areas on
   markers, and the wrap that hosts the absolute-positioned tooltip
   + marker popup. */
.price-chart-wrap {
  position: relative;
  width: 100%;
}
.price-chart-svg {
  width: 100%;
  height: 260px;
  display: block;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.price-tick-x,
.price-tick-y {
  fill: var(--text-md);
  font-size: 11px;
  font-family: var(--mono, "JetBrains Mono", monospace);
}
.price-anchor {
  stroke: var(--text-md);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: .55;
}
.price-anchor-l {
  fill: var(--text-md);
  font-size: 10px;
  font-family: var(--mono, "JetBrains Mono", monospace);
}
.price-line {
  stroke-width: 1.8;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.price-grid {
  stroke: var(--border);
  stroke-width: 0.6;
  stroke-dasharray: 2 4;
  opacity: .55;
}

/* Marker: visible dot + invisible hit-circle for easier taps. */
.price-marker { cursor: pointer; outline: none; }
.price-marker-line {
  stroke: var(--text-md);
  stroke-width: 1;
  stroke-opacity: .35;
  stroke-dasharray: 2 2;
}
.price-marker-dot {
  stroke: var(--bg-card);
  stroke-width: 2;
  fill: var(--text-md);
}
.price-marker-hit {
  fill: transparent;
  cursor: pointer;
}
.price-marker.bull .price-marker-dot  { fill: var(--flow-in); }
.price-marker.bull .price-marker-line { stroke: var(--flow-in); stroke-opacity: .4; }
.price-marker.bear .price-marker-dot  { fill: var(--flow-out); }
.price-marker.bear .price-marker-line { stroke: var(--flow-out); stroke-opacity: .4; }
.price-marker:hover .price-marker-dot,
.price-marker:focus .price-marker-dot { stroke: var(--text-hi); stroke-width: 3; }

/* Crosshair group - vertical line + dot snapped to the polyline. */
.price-crosshair line {
  stroke: var(--text-hi);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: .55;
  pointer-events: none;
}
.price-crosshair circle {
  fill: var(--text-hi);
  stroke: var(--bg-input);
  stroke-width: 1.5;
  pointer-events: none;
}

/* Tooltip floating beside the crosshair - HTML positioned absolutely
   over the chart wrap. */
.price-tooltip {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border3, var(--border));
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  pointer-events: none;
  z-index: 5;
  font-family: var(--mono, "JetBrains Mono", monospace);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  white-space: nowrap;
}
.price-tooltip[hidden] { display: none; }
.price-tooltip-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}
.price-tooltip-time {
  font-size: 11px;
  color: var(--text-md);
  margin-top: 2px;
}

/* Marker popup - shown on marker hover / click. */
.price-marker-pop {
  position: absolute;
  z-index: 6;
  background: var(--bg-card);
  border: 1px solid var(--border3, var(--border));
  border-left: 3px solid var(--text-md);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  min-width: 220px;
  max-width: 320px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.price-marker-pop[hidden] { display: none; }
.price-marker-pop.bull { border-left-color: var(--flow-in); }
.price-marker-pop.bear { border-left-color: var(--flow-out); }
.pmp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.pmp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--text-hi);
}
.pmp-icon { font-size: 14px !important; color: var(--text-md); }
.price-marker-pop.bull .pmp-icon,
.price-marker-pop.bull .pmp-arrow { color: var(--flow-in); }
.price-marker-pop.bear .pmp-icon,
.price-marker-pop.bear .pmp-arrow { color: var(--flow-out); }
.pmp-arrow { font-size: 12px; }
.pmp-score {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}
.pmp-time {
  font-size: 11px;
  color: var(--text-md);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.pmp-detail {
  font-size: 12px;
  color: var(--text-hi);
  line-height: 1.45;
}

/* ── Mini member cards (one per detector) ────────────────── */
/* Replaces the legacy 420px+ wide member-card with its evidence
   chart + numbers table + chip rows. Goal: at a glance, what fired
   + how strong + plain-English why. */
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.mini-member {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mini-member.bull { border-left-color: var(--flow-in); }
.mini-member.bear { border-left-color: var(--flow-out); }
.mini-member-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.mini-member-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
}
.mini-member-icon { font-size: 16px !important; color: var(--text-md); }
.mini-member.bull .mini-member-icon { color: var(--flow-in); }
.mini-member.bear .mini-member-icon { color: var(--flow-out); }
.mini-member-score-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.mini-member-score-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mini-member-score-bar {
  height: 5px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
}
.mini-member-score-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--text-md), var(--text-hi));
}
.mini-member.bull .mini-member-score-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-in) 50%, transparent), var(--flow-in)); }
.mini-member.bear .mini-member-score-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--flow-out) 50%, transparent), var(--flow-out)); }
.mini-member-conf {
  font-size: 11px;
  color: var(--text-md);
  font-variant-numeric: tabular-nums;
}
.mini-member-detail {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-hi);
}
.mini-member-explain {
  font-size: 11px;
}
.mini-member-explain summary {
  cursor: pointer;
  color: var(--text-md);
  font-size: 11px;
  letter-spacing: .2px;
  padding: 2px 0;
  list-style: none;
}
.mini-member-explain summary::marker { display: none; }
.mini-member-explain summary:hover { color: var(--text-hi); }
.mini-member-explain[open] summary { color: var(--text-hi); }
.mini-member-explain p {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--text-md);
  line-height: 1.5;
}
.mini-member-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  font-size: 11px;
  color: var(--text-md);
}
.mini-member-time { font-variant-numeric: tabular-nums; }
.mini-member-txlink {
  color: var(--text-hi);
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 4px;
}
.mini-member-txlink:hover { border-color: var(--text-md); }

/* ── Tx table - "show all / show first N" toggle ─────────── */
.txs-toggle {
  display: block;
  margin: 10px auto 0;
  padding: 6px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-md);
  font-size: 12px;
  cursor: pointer;
}
.txs-toggle:hover { color: var(--text-hi); border-color: var(--text-md); }

/* ── Mobile (extends the earlier @media) ─────────────────── */
@media (max-width: 860px) {
  .detail-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 16px;
  }
  .detail-hero-narr {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 14px;
  }
  .detail-hero-sym { font-size: 22px; }
  .detail-hero-icon { width: 44px; height: 44px; flex-basis: 44px; }
  .detail-hero-icon img,
  .detail-hero-icon .asset-icon,
  .detail-hero-icon .asset-icon-badge { width: 44px !important; height: 44px !important; }

  .composite-hero {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .hero-summary {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 14px;
  }
  .hero-conv-num { font-size: 44px; }

  .tl-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "pill time"
      "detail detail";
    gap: 7px 10px;
  }
  .tl-row .tl-time {
    grid-area: time;
    min-width: 0;
    align-self: center;
    justify-self: end;
    white-space: nowrap;
  }
  .tl-row .tl-pill {
    grid-area: pill;
    max-width: 100%;
    min-width: 0;
  }
  .tl-row .tl-pill-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tl-row .tl-detail {
    grid-area: detail;
    min-width: 0;
    font-size: 12px;
  }

  .price-chart-svg { height: 220px; }
  .price-marker-pop { max-width: calc(100vw - 32px); }

  .members-grid { grid-template-columns: 1fr; }
}

/* ── Iter 19.45 - Scenario block ─────────────────────────── */
/* Two short paragraphs: what the engine sees + what likely follows.
   Each row is icon + heading + paragraph. Direction-tinted left edge
   to match the rest of the page chrome. */
.scenario-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 6px;
}
.scenario-card.bull { border-left-color: var(--flow-in); }
.scenario-card.bear { border-left-color: var(--flow-out); }
.scenario-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
.scenario-icon {
  font-size: 18px !important;
  color: var(--text-md);
  padding-top: 2px;
}
.scenario-card.bull .scenario-icon { color: var(--flow-in); }
.scenario-card.bear .scenario-icon { color: var(--flow-out); }
.scenario-h {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-md);
  font-weight: 600;
  margin-bottom: 4px;
}
.scenario-row p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-hi);
}

/* ── Iter 19.45 - "What this detector tracks" inline block ──
   Was a <details> collapsible; now always-shown so the operator sees
   what each detector watches without an extra click. Quiet styling
   so it doesn't fight the score row above. */
.mini-member-watches {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 10px;
}
.mini-member-watches-h {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-md);
  font-weight: 600;
  margin-bottom: 4px;
}
.mini-member-watches p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-md);
}

/* ── Iter 19.47 - Section stagger on page load ─────────────── */
/* Each top-level section starts faded + lifted; the `.is-loaded` class
   gets added on the next animation frame after all sync renders finish,
   triggering the cascade. transition-delay per section creates the
   stagger. Cheap, no JS timer required. */
.intel-detail-main > * {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   .35s ease-out,
    transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.intel-detail-main.is-loaded > * {
  opacity: 1;
  transform: translateY(0);
}
/* The back-link is element 1; we want it to land first, then the rest
   cascade. nth-child indexing skips hidden sections (display:none won't
   skip in nth, only :hidden via attribute does - but the staggered delay
   is harmless on hidden sections, they just animate while invisible). */
.intel-detail-main > *:nth-child(1) { transition-delay:  20ms; }
.intel-detail-main > *:nth-child(2) { transition-delay:  90ms; }
.intel-detail-main > *:nth-child(3) { transition-delay: 160ms; }
.intel-detail-main > *:nth-child(4) { transition-delay: 230ms; }
.intel-detail-main > *:nth-child(5) { transition-delay: 300ms; }
.intel-detail-main > *:nth-child(6) { transition-delay: 370ms; }
.intel-detail-main > *:nth-child(7) { transition-delay: 440ms; }
.intel-detail-main > *:nth-child(8) { transition-delay: 510ms; }

/* Conviction bar fills in over time - the JS just sets the target width
   on first paint after the keyframes; the transition does the rest. */
.hero-conv-bar i {
  transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1) 100ms;
}

@media (prefers-reduced-motion: reduce) {
  .intel-detail-main > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-conv-bar i       { transition: none !important; }
}

/* ── Iter 19.49 - Polish pass on detail page ──────────────── */
/* Timeline row hover - same idea as the signal-row hover from Iter 19.48
   but scoped to the detail page's vertical timeline. */
.tl-row {
  transition: background .15s, border-left-width .15s;
}
.tl-row:hover {
  background: color-mix(in srgb, var(--text-hi) 5%, var(--bg-input));
  border-left-width: 4px;
}

/* Mini-member card hover - lift + accent shadow, matching the feed cards
   on the main intel page. */
.mini-member {
  transition:
    transform   .18s cubic-bezier(0.16, 1, 0.3, 1),
    border-color .18s ease,
    box-shadow  .18s ease;
}
.mini-member:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--text-hi) 25%, var(--border));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* Price chart marker pulse - draw attention on first paint. The CSS
   animation runs once on each marker (no JS hook needed) with a brief
   ripple. Caps to a single play to avoid noise on long sessions. */
@keyframes price-marker-pulse {
  0%   { r: 6;  opacity: 1; }
  50%  { r: 12; opacity: 0.35; }
  100% { r: 6;  opacity: 1; }
}
@keyframes price-marker-ripple {
  0%   { r: 6;  opacity: 0.7; }
  100% { r: 16; opacity: 0; }
}
.price-marker-dot {
  animation: price-marker-pulse 1.2s ease-out 1;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .tl-row, .mini-member { transition: none; }
  .price-marker-dot     { animation: none; }
}

/* ── Iter 19.88 - chain history (W12) ─────────────────────────────
   Capped walk of prev_narrative_id predecessors. Each row is a clickable
   link to the predecessor's own detail page. Compact list, indented from
   the section header. Direction stripe matches the rest of the page. */
#chain-block #chain-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chain-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-mid);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-hi);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.chain-row:hover {
  background: color-mix(in srgb, var(--text-hi) 6%, var(--bg-input));
  border-color: var(--border2);
}
.chain-row.bull { border-left-color: color-mix(in srgb, var(--flow-in) 55%, transparent); }
.chain-row.bear { border-left-color: color-mix(in srgb, var(--flow-out) 55%, transparent); }
.chain-row.neutral { border-left-color: var(--text-mid); }

.chain-row .chain-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
  min-width: 60px;
}
.chain-row .chain-score {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  min-width: 36px;
  text-align: right;
}
.chain-row.bull .chain-score { color: var(--flow-in); }
.chain-row.bear .chain-score { color: var(--flow-out); }
.chain-row .chain-cc {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .3px;
  background: color-mix(in srgb, var(--text-hi) 8%, var(--bg-card));
  color: var(--text-mid);
  border: 1px solid var(--border);
}
.chain-row .chain-detail {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chain-row .chain-go {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--text-mid);
  opacity: .7;
}
.chain-row:hover .chain-go { opacity: 1; color: var(--text-hi); }

#chain-block h2 .section-sub {
  font-size: 12px;
  color: var(--text-mid);
  font-weight: 400;
  margin-left: 6px;
}
.chain-truncated {
  margin-top: 6px;
  font-size: 11.5px;
  text-align: center;
  padding: 6px;
}

@media (max-width: 760px) {
  .chain-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "score confirmation time arrow"
      "detail detail detail detail";
    gap: 7px 9px;
    padding: 11px 12px;
  }
  .chain-row .chain-score {
    grid-area: score;
    min-width: 0;
    text-align: left;
  }
  .chain-row .chain-cc { grid-area: confirmation; }
  .chain-row .chain-time {
    grid-area: time;
    min-width: 0;
    justify-self: end;
    white-space: nowrap;
  }
  .chain-row .chain-detail {
    display: block;
    grid-area: detail;
    white-space: normal;
    line-height: 1.4;
  }
  .chain-row .chain-go { grid-area: arrow; }
}

/* ── Locked state: sample report ──────────────────────────────────
   Free/guest deep links render a real, already-resolved narrative instead of
   a blank paywall. The chrome here has one job: make it impossible to read a
   sample figure as live data about the narrative that was actually opened.
     • the whole report is inert - no hovering a tx row into a wallet page,
       no scrubbing the chart, no text selection to paste as evidence
     • the unlock bars sit outside that inert region, so they stay clickable */
.intel-detail-main.is-sample .detail-head,
.intel-detail-main.is-sample .intel-card-section {
  pointer-events: none;
  user-select: none;
}
.intel-detail-main.is-sample .txs-toggle { display: none; }

/* A notice at the top of a long page is gone after one scroll, and the report
   itself looks exactly like the real thing (it IS a real past narrative). So
   the marking repeats: sticky banner, watermark across the whole report, a chip
   on every section heading, a closing line. */
.intel-detail-main.is-sample { position: relative; }
.intel-detail-main.is-sample::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='190'%3E%3Ctext x='10' y='140' transform='rotate(-24 10 140)' font-family='monospace' font-size='30' font-weight='700' letter-spacing='6' fill='%237b5cff' fill-opacity='0.13'%3ESAMPLE%3C/text%3E%3C/svg%3E");
}
/* The conversion bars must never sit under the watermark. */
.sample-banner, .sample-unlock, .sample-foot-note { position: relative; z-index: 4; }

.sample-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 13%, var(--bg-card));
  /* Sticks so the "this is an example" line is on screen for the whole read. */
  position: sticky;
  top: 0;
  z-index: 9;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--bg-page) 55%, transparent);
}
.sample-foot-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 10px;
  color: var(--text-mid);
  font-size: 12px;
  line-height: 1.45;
}
.sample-foot-note .material-symbols-outlined { font-size: 16px; color: var(--accent-2); }
.sample-chip.sm { font-size: 8.5px; padding: 1px 6px; vertical-align: middle; margin-left: 6px; }

/* A member that fired on a chain-mate rather than on this narrative's asset.
   sameAssetOrChain rules accept one; the page used to list it unmarked, which
   reads as the wrong coin on the wrong report. */
.cross-asset-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border2, var(--border));
  background: color-mix(in srgb, var(--text-hi) 6%, transparent);
  color: var(--text-mid);
  font: 700 9.5px var(--mono);
  letter-spacing: .3px;
  white-space: nowrap;
}
.cross-asset-chip .material-symbols-outlined { font-size: 12px; }
.sample-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font: 800 10px var(--mono);
  letter-spacing: .7px;
  color: var(--accent-2);
}
.sample-tag .material-symbols-outlined { font-size: 15px; }
.sample-copy {
  flex: 1 1 260px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-mid);
}
.sample-copy b { display: block; color: var(--text-hi); font-size: 12.5px; }
.sample-outcome {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font: 700 11.5px var(--mono);
  font-variant-numeric: tabular-nums;
}
.sample-outcome .material-symbols-outlined { font-size: 15px; }
.sample-outcome.up   { color: var(--flow-in);  background: color-mix(in srgb, var(--flow-in) 10%, transparent); }
.sample-outcome.down { color: var(--flow-out); background: color-mix(in srgb, var(--flow-out) 10%, transparent); }
.sample-outcome.flat { color: var(--text-mid); background: color-mix(in srgb, var(--text-hi) 7%, transparent); }

.sample-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  color: var(--accent-2);
  font: 800 9px var(--mono);
  letter-spacing: .6px;
}

.sample-unlock { pointer-events: auto; user-select: auto; }

@media (max-width: 600px) {
  .sample-banner { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* ── Forming report ────────────────────────────────────────────────
   A setup that has not composed yet: readiness instead of conviction, and the
   detectors it is still waiting on rendered as ghost cards in the same grid. */
.forming-chip, .missing-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px dashed var(--accent-border);
  background: var(--accent-dim);
  color: var(--accent-2);
  font: 800 9px var(--mono);
  letter-spacing: .6px;
}
.hero-grade.grade-forming {
  color: var(--accent-2);
  background: var(--accent-dim);
  border: 1px dashed var(--accent-border);
}
.composite-hero.is-forming .hero-conv-num { color: var(--accent-2); }
.composite-hero.is-forming .hero-conv-bar i { background: var(--accent); }
.forming-of { font-size: .5em; color: var(--text-mid); font-weight: 600; }
.forming-note {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-mid);
}
.forming-rules {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-mid);
}
.forming-rule {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-hi);
  font-size: 11px;
}
.mini-member.is-missing {
  border-style: dashed;
  opacity: .72;
  background: transparent;
}
.mini-member.is-missing .mini-member-detail { color: var(--text-mid); }

/* Report visual refresh: one verdict-first system for completed, forming,
   and sample reports. This layer intentionally overrides the older iterations
   above without changing their data or loading behavior. */
.intel-detail-main {
  max-width: 1160px;
  gap: 22px;
  padding: 24px 24px 64px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-weight: 600;
}

.detail-hero {
  min-height: 118px;
  padding: 24px 28px;
  border-radius: 16px;
  border-left-width: 1px;
  background:
    radial-gradient(circle at 10% 30%, color-mix(in srgb, var(--text-hi) 5%, transparent), transparent 36%),
    var(--bg-card);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .16);
}
.detail-hero.bull {
  border-color: color-mix(in srgb, var(--flow-in) 34%, var(--border));
  box-shadow: 0 18px 48px color-mix(in srgb, var(--flow-in) 8%, transparent);
}
.detail-hero.bear {
  border-color: color-mix(in srgb, var(--flow-out) 34%, var(--border));
  box-shadow: 0 18px 48px color-mix(in srgb, var(--flow-out) 8%, transparent);
}
.detail-hero::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -90px;
  top: -120px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--text-hi) 8%, transparent);
  pointer-events: none;
}
.detail-hero-icon {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
  padding: 4px;
  background: color-mix(in srgb, var(--text-hi) 6%, var(--bg-input));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--bg-card) 72%, transparent);
}
.detail-hero-icon img,
.detail-hero-icon .asset-icon,
.detail-hero-icon .asset-icon-badge {
  width: 54px !important;
  height: 54px !important;
}
.detail-hero-sym { font-size: 34px; }
.detail-hero-narr .detail-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 720;
  letter-spacing: -.025em;
}
.detail-hero-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; font: 600 11px var(--mono); letter-spacing: .02em; }
.detail-hero-meta span { display: inline-flex; gap: 5px; color: var(--text-md); }
.detail-hero-meta b { color: var(--text-hi); font-weight: 700; text-transform: uppercase; }

.intel-card-section {
  gap: 16px;
  padding: 22px 24px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-card) 94%, var(--text-hi) 2%);
}
.intel-card-section > h2 {
  align-items: center;
  font: 750 11px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.intel-card-section > h2::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: .8;
}

#composite-block {
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
#composite-block > h2 { display: none; }
.composite-hero {
  grid-template-columns: minmax(170px, 230px) 1fr;
  gap: 30px;
  min-height: 220px;
  padding: 30px;
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--text-hi) 12%, var(--border));
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--text-hi) 5%, transparent), transparent 48%),
    var(--bg-card);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .2);
}
.composite-hero.bull {
  border-color: color-mix(in srgb, var(--flow-in) 30%, var(--border));
  background: linear-gradient(120deg, color-mix(in srgb, var(--flow-in) 15%, transparent), transparent 56%), var(--bg-card);
}
.composite-hero.bear {
  border-color: color-mix(in srgb, var(--flow-out) 30%, var(--border));
  background: linear-gradient(120deg, color-mix(in srgb, var(--flow-out) 15%, transparent), transparent 56%), var(--bg-card);
}
.composite-hero.is-forming {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 56%), var(--bg-card);
}
.hero-conv-block {
  justify-content: center;
  gap: 10px;
  padding-right: 28px;
  border-right: 1px solid color-mix(in srgb, var(--text-hi) 10%, var(--border));
}
.hero-metric-label,
.report-verdict-kicker {
  font: 750 10px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-md);
}
.hero-grade { order: 2; width: fit-content; }
.hero-conv-num {
  order: 1;
  display: flex;
  align-items: baseline;
  font-size: clamp(64px, 7vw, 82px);
  font-weight: 780;
  letter-spacing: -.055em;
}
.hero-conv-denom,
.forming-of {
  margin-left: 7px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--text-md);
}
.hero-conv-bar {
  order: 3;
  height: 7px;
  background: color-mix(in srgb, var(--text-hi) 7%, var(--bg-input));
}
.report-verdict {
  position: relative;
  z-index: 1;
  align-self: center;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  align-items: start;
}
.report-verdict-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  font-size: 27px !important;
  color: var(--text-hi);
  border: 1px solid color-mix(in srgb, var(--text-hi) 12%, var(--border));
  background: color-mix(in srgb, var(--text-hi) 6%, var(--bg-input));
}
.composite-hero.bull .report-verdict-icon { color: var(--flow-in); background: color-mix(in srgb, var(--flow-in) 12%, var(--bg-input)); }
.composite-hero.bear .report-verdict-icon { color: var(--flow-out); background: color-mix(in srgb, var(--flow-out) 12%, var(--bg-input)); }
.composite-hero.is-forming .report-verdict-icon { color: var(--accent-2); background: color-mix(in srgb, var(--accent) 13%, var(--bg-input)); }
.report-verdict-copy h3 {
  margin: 7px 0 9px;
  max-width: 19ch;
  font-size: clamp(22px, 3.1vw, 36px);
  line-height: 1.03;
  letter-spacing: -.035em;
  color: var(--text-hi);
}
.report-verdict-copy p {
  max-width: 58ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-md);
}

.scenario-card {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}
.scenario-row {
  min-height: 132px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-input);
}
.scenario-row-primary { background: color-mix(in srgb, var(--text-hi) 4%, var(--bg-input)); }
.scenario-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--text-hi) 6%, transparent);
}
.scenario-row p { font-size: 14px; line-height: 1.65; }

.price-chart-wrap {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg-input);
}
.price-chart-summary {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 82px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--text-hi) 3%, var(--bg-input));
}
.price-chart-stat { display: flex; flex-direction: column; gap: 4px; }
.price-chart-stat > span {
  font: 700 9.5px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-md);
}
.price-chart-stat strong {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 760 23px var(--mono);
  color: var(--text-hi);
}
.price-chart-stat strong .material-symbols-outlined { font-size: 20px; }
.price-chart-move.up strong { color: var(--flow-in); }
.price-chart-move.down strong { color: var(--flow-out); }
.price-chart-move.flat strong { color: var(--text-md); }
.price-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  color: var(--text-md);
  font-size: 10.5px;
}
.price-chart-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.price-chart-legend i { display: inline-block; flex: 0 0 auto; }
.legend-line { width: 18px; height: 2px; background: var(--text-hi); border-radius: 2px; }
.legend-marker { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.price-chart-svg {
  height: 320px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--text-hi) 2%, var(--bg-input)), var(--bg-input));
}
.price-line { stroke-width: 3; filter: drop-shadow(0 4px 7px color-mix(in srgb, currentColor 24%, transparent)); }
.price-area { pointer-events: none; }
.price-end-dot { stroke: var(--bg-input); stroke-width: 3; filter: drop-shadow(0 0 5px currentColor); }
.price-grid { stroke-dasharray: 0; opacity: .45; }
.price-tick-x,
.price-tick-y { font-size: 10.5px; }

.members-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fade-explainer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--text-hi) 4%, var(--bg-input));
}
.fade-explainer > .material-symbols-outlined { color: var(--accent-2); }
.fade-explainer > div { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.fade-explainer strong { color: var(--text-hi); font-size: 12.5px; }
.fade-explainer span:not(.material-symbols-outlined) { color: var(--text-md); font-size: 12px; line-height: 1.45; }
.fade-explainer.bear { border-color: color-mix(in srgb, var(--flow-out) 28%, var(--border)); }
.fade-explainer.bull { border-color: color-mix(in srgb, var(--flow-in) 28%, var(--border)); }
.mini-member {
  min-height: 218px;
  padding: 17px 18px;
  gap: 13px;
  border-left-width: 1px;
  border-radius: 11px;
}
.mini-member.bull { border-color: color-mix(in srgb, var(--flow-in) 28%, var(--border)); }
.mini-member.bear { border-color: color-mix(in srgb, var(--flow-out) 28%, var(--border)); }
.mini-member-score-num { font-size: 28px; }
.mini-member-score-bar { height: 6px; }
.mini-member-detail { min-height: 38px; font-size: 13px; }
.mini-member-explain {
  margin-top: auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.mini-member-explain summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 0;
  font-weight: 650;
}
.mini-member-explain summary .material-symbols-outlined { font-size: 15px; }
.mini-member-explain summary .explain-chevron { margin-left: auto; transition: transform .16s ease; }
.mini-member-explain[open] summary .explain-chevron { transform: rotate(180deg); }
.mini-member-explain p { margin: 0; padding: 0 0 11px 22px; font-size: 12px; }
.mini-member-foot { border-top: 0; padding-top: 0; }
.mini-member.is-missing { opacity: .62; min-height: 190px; }
.member-confirmation-chip,
.tl-confirmations {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  color: var(--accent-2);
  font: 700 9.5px var(--mono);
  letter-spacing: .03em;
}
.member-confirmation-chip { padding: 3px 8px; }
.tl-confirmations { padding: 1px 6px; }

.tl-row {
  min-height: 52px;
  padding: 10px 13px;
  border-left-width: 1px;
  border-radius: 9px;
}
.tl-row.bull { border-color: color-mix(in srgb, var(--flow-in) 24%, var(--border)); }
.tl-row.bear { border-color: color-mix(in srgb, var(--flow-out) 24%, var(--border)); }

.intel-detail-main.is-sample::before { opacity: .77; }
.sample-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  backdrop-filter: blur(12px);
}
.sample-copy { flex: none; font-size: 12.5px; }
.sample-copy b { margin-bottom: 2px; font-size: 13px; }
.sample-outcome { max-width: 320px; white-space: normal; line-height: 1.35; }

@media (max-width: 860px) {
  .intel-detail-main { gap: 16px; padding: 16px 14px 48px; }
  .detail-hero { min-height: 0; padding: 18px; border-radius: 13px; }
  .detail-hero-icon { width: 52px; height: 52px; flex-basis: 52px; }
  .detail-hero-icon img,
  .detail-hero-icon .asset-icon,
  .detail-hero-icon .asset-icon-badge { width: 44px !important; height: 44px !important; }
  .detail-hero-sym { font-size: 26px; }
  .detail-hero-narr .detail-title { font-size: 23px; }
  .detail-hero { gap: 10px; }
  .detail-hero-narr { gap: 8px; padding-top: 0; border-top: 0; }
  .detail-hero-narr-row { gap: 8px; }
  .detail-hero-meta { gap: 5px 10px; font-size: 10px; line-height: 1.45; }

  .txs-table { display: none; }
  .txs-mobile { display: grid; gap: 10px; }
  .txm-card {
    display: grid;
    gap: 9px;
    min-height: 44px;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-hi);
    text-decoration: none;
  }
  .txm-card.locked { color: var(--text-md); font-size: 12px; }
  .txm-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .txm-top strong { font-size: 19px; line-height: 1.1; letter-spacing: -.02em; }
  .txm-top b { color: var(--accent-2); font-size: 12px; }
  .txm-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 7px; color: var(--text-md); font-size: 11.5px; }
  .txm-route > span:not(.material-symbols-outlined) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .txm-route > span:last-child { text-align: right; }
  .txm-route .material-symbols-outlined { color: var(--text-md); font-size: 15px; }
  .txm-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text-md); font-size: 10.5px; }
  .txm-meta > span:last-child { display: inline-flex; align-items: center; gap: 4px; color: var(--text-hi); font-weight: 700; }
  .txm-meta .material-symbols-outlined { font-size: 13px; }

  .intel-card-section { padding: 18px 16px; border-radius: 12px; }
  .composite-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: 0;
    padding: 24px 20px;
  }
  .hero-conv-block { padding: 0 0 21px; border-right: 0; border-bottom: 1px solid var(--border); }
  .hero-conv-num { font-size: 68px; }
  .report-verdict { grid-template-columns: 46px 1fr; gap: 14px; }
  .report-verdict-icon { width: 46px; height: 46px; border-radius: 12px; font-size: 23px !important; }
  .report-verdict-copy h3 { max-width: none; margin-top: 5px; font-size: 26px; }

  .composite-hero.is-forming { gap: 12px; padding: 14px; }
  .composite-hero.is-forming .hero-conv-block {
    display: grid;
    grid-template-columns: auto auto minmax(56px, 1fr) auto;
    grid-template-areas: "label number bar grade";
    align-items: center;
    gap: 8px;
    padding: 0 0 12px;
  }
  .composite-hero.is-forming .hero-metric-label { grid-area: label; }
  .composite-hero.is-forming .hero-grade { grid-area: grade; }
  .composite-hero.is-forming .hero-conv-num { grid-area: number; font-size: 32px; }
  .composite-hero.is-forming .forming-of { margin-left: 3px; font-size: 13px; }
  .composite-hero.is-forming .hero-conv-bar { grid-area: bar; width: 100%; height: 5px; }
  .composite-hero.is-forming .report-verdict { grid-template-columns: 38px 1fr; gap: 11px; }
  .composite-hero.is-forming .report-verdict-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 20px !important; }
  .composite-hero.is-forming .report-verdict-copy h3 { margin: 3px 0 6px; font-size: 20px; line-height: 1.08; }
  .composite-hero.is-forming .report-verdict-copy p { font-size: 11.5px; line-height: 1.45; }

  .scenario-card { grid-template-columns: 1fr; }
  .scenario-row { min-height: 0; padding: 17px 15px; }

  .price-chart-summary { flex-wrap: wrap; gap: 14px 26px; min-height: 0; padding: 14px; }
  .price-chart-stat strong { font-size: 19px; }
  .price-chart-legend { width: 100%; margin-left: 0; padding-top: 10px; border-top: 1px solid var(--border); }
  .price-chart-svg { height: 260px; }

  .members-grid { grid-template-columns: 1fr; }
  .mini-member { min-height: 0; padding: 16px; }
  .mini-member-detail { min-height: 0; }
  .mini-member:hover { transform: none; }

  .tl-row { padding: 12px; }
  .tl-row .tl-time { font-size: 11px; }
  .tl-row .tl-detail { font-size: 12.5px; line-height: 1.45; }
}

@media (max-width: 600px) {
  .sample-banner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 9px;
    padding: 13px 14px;
  }
  .sample-copy { flex-basis: auto; width: 100%; }
  .sample-outcome { width: 100%; max-width: none; justify-content: flex-start; }
  .price-chart-legend { gap: 12px; overflow-x: auto; scrollbar-width: none; }
  .price-chart-svg { height: 245px; }
  .mini-member-score-row { grid-template-columns: auto minmax(52px, 1fr) auto; gap: 8px; }
}