/* ============================================================
   SIGNALS.CSS — Signal cards, severity badges, detail panel
   ============================================================ */

/* --- Event cards --- */
.event-card {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(212, 137, 10, 0.06);
  cursor: pointer;
  position: relative;
}
.event-card:hover {
  background: rgba(212, 137, 10, 0.04);
}
.event-card.active {
  background: rgba(212, 137, 10, 0.08);
}

/* Escalation dot */
.ev-escalation {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

/* --- Severity badges --- */
.ev-severity {
  display: inline-block;
  font-family: var(--font-military);
  font-weight: 700;
  font-size: 9px;
  padding: 1px 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sev-critical {
  background: var(--critical);
  color: var(--white-critical);
  text-shadow: 0 0 4px rgba(255, 51, 102, 0.4);
}
.sev-high {
  background: var(--warning);
  color: var(--white-critical);
}
.sev-med {
  background: var(--acid-dim);
  color: var(--black);
}
.sev-low {
  background: var(--amber-ghost);
  color: var(--amber);
}

/* --- Event card text hierarchy --- */
.ev-headline {
  font-family: var(--font-military);
  font-size: 11px;
  font-weight: 600;
  color: var(--amber-bright);
  line-height: 1.3;
  margin-top: 3px;
}
.ev-ticker {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--amber);
  font-weight: 500;
}
.ev-time {
  font-family: var(--font-data);
  font-size: 8px;
  color: var(--amber-dim);
  display: block;
  margin-top: 2px;
}

/* --- Diff badges --- */
.diff-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-family: var(--font-military);
  font-size: 7px;
  padding: 1px 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.diff-new {
  background: var(--acid);
  color: var(--black);
}
.diff-escalated {
  background: var(--blood-bright);
  color: var(--white-critical);
}
.diff-deescalated {
  background: var(--slate);
  color: var(--white-critical);
}

/* --- Signal detail panel --- */
#signal-detail {
  padding: 10px 12px 30px;
  overflow-y: auto;
}

/* --- Key-value metrics --- */
.metric-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid rgba(212, 137, 10, 0.06);
}
.metric-row .mr-label {
  font-size: 8px;
  text-transform: uppercase;
  color: var(--amber-dim);
}
.metric-row .mr-value {
  font-size: 11px;
  color: var(--amber);
  font-weight: 500;
}

.metric-block { margin-bottom: 8px; }
.intel-context { margin: 10px 0; }

/* ── Signal drawer section headers ── */
.sig-section-header {
  font-family: var(--font-military);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  margin-top: 16px;
  color: var(--warning);
}

/* Gradient line extending right */
.sig-section-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(255,107,53,0.4), transparent);
}

/* Default / warning — orange */
.sig-section-header.warning {
  color: var(--warning);
}
.sig-section-header.warning::after {
  background: linear-gradient(to right, rgba(255,107,53,0.4), transparent);
}

/* Critical — red */
.sig-section-header.critical {
  color: var(--critical);
}
.sig-section-header.critical::after {
  background: linear-gradient(to right, rgba(255,51,102,0.4), transparent);
}

/* Amber */
.sig-section-header.amber {
  color: var(--amber-bright);
}
.sig-section-header.amber::after {
  background: linear-gradient(to right, rgba(232,160,32,0.4), transparent);
}

/* Signal headline — biggest text in panel */
.signal-headline {
  font-family: var(--font-military);
  font-size: 22px;
  font-weight: 700;
  color: var(--amber-bright);
  line-height: 1.2;
  margin-bottom: 4px;
}

.signal-domain-line {
  font-family: var(--font-military);
  font-size: 10px;
  font-weight: 400;
  color: var(--text-faint);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

/* ── Metrics row — three-column grid (threat | gauge | time) ── */
.signal-metrics-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 4px;
}

.metric-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

/* Scoped stroke-width for the smaller metrics-row gauge */
.signal-metrics-row .gauge-track,
.signal-metrics-row .gauge-fill {
  stroke-width: 6;
}

/* Scoped font-size — SVG presentation attributes lose to CSS class rules */
.signal-metrics-row .gauge-value {
  font-size: 18px;
}

/* ── Circular gauge (legacy wrapper kept for non-drawer contexts) ── */
.signal-gauge-wrapper {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  align-items: center;
}

.gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gauge-label-text {
  font-family: var(--font-military);
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber-dim);
  margin-top: 4px;
  display: block;
  text-align: center;
}

svg.signal-gauge {
  display: block;
  overflow: visible;
}

.gauge-track {
  fill: none;
  stroke: rgba(212, 137, 10, 0.12);
  stroke-width: 8;
}

.gauge-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.8s ease, stroke 0.4s ease;
}

.gauge-value {
  fill: var(--amber-bright);
  font-family: var(--font-data);
  font-size: 22px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Threat score box */
.threat-score-box {
  text-align: center;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  min-width: 60px;
}

.threat-score-value {
  font-family: var(--font-data);
  font-size: 28px;
  font-weight: 600;
  color: var(--amber-bright);
  display: block;
  line-height: 1;
}

.threat-score-denom {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--amber-dim);
}

.threat-score-label {
  font-family: var(--font-military);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--amber-dim);
  margin-top: 4px;
  display: block;
}

/* Time to pricing box */
.time-box {
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  text-align: center;
  flex: 1;
}

.time-box-value {
  font-family: var(--font-data);
  font-size: 16px;
  font-weight: 600;
  color: var(--amber-bright);
  display: block;
}

.time-box-label {
  font-family: var(--font-military);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--amber-dim);
  margin-top: 2px;
  display: block;
}

/* Alpha decay bar */
.alpha-decay-bar-container {
  margin: 10px 0;
}

.alpha-decay-label {
  font-family: var(--font-military);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--amber-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}

.alpha-decay-track {
  height: 3px;
  background: rgba(212, 137, 10, 0.12);
  position: relative;
}

.alpha-decay-fill {
  height: 100%;
  background: linear-gradient(to right, var(--amber-dim), var(--amber));
  transition: width 0.4s ease;
}

/* ── Action buttons — prominent ── */
.action-btn-primary {
  flex: 1;
  background: rgba(212, 137, 10, 0.08);
  border: 1px solid var(--border-active);
  color: var(--amber-bright);
  font-family: var(--font-military);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 9px 6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.action-btn-primary:hover {
  background: rgba(212, 137, 10, 0.18);
  border-color: var(--amber);
  box-shadow: 0 0 10px rgba(212, 137, 10, 0.15);
}

.action-btn-primary:active {
  background: rgba(212, 137, 10, 0.25);
}

.action-btn-primary:disabled,
.action-btn-primary.tier-locked {
  color: var(--amber-dim);
  border-color: var(--border);
  background: transparent;
  cursor: not-allowed;
  box-shadow: none;
}

.action-btn-row {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Beneficiary grid ── */
.beneficiary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 6px;
}

.beneficiary-card {
  padding: 7px 9px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  align-items: baseline;
  gap: 0 4px;
}

/* non-obvious badge spans both columns, appears first */
.ben-non-obvious {
  grid-column: 1 / -1;
  font-family: var(--font-military);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--caution);
  border: 1px solid rgba(232, 212, 77, 0.3);
  padding: 1px 4px;
  border-radius: 2px;
  display: inline-block;
  align-self: start;
  margin-bottom: 3px;
  text-transform: uppercase;
}

/* ticker: col 1 of the row1 pair */
.ben-ticker {
  font-family: var(--font-military);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--amber-bright);
  grid-column: 1;
  line-height: 1.1;
}

.beneficiary-card.direction-long .ben-ticker {
  color: #4caf6e;
}

.beneficiary-card.direction-short .ben-ticker {
  color: var(--critical);
}

/* direction badge: col 2 of the row1 pair, aligned right */
.ben-direction {
  grid-column: 2;
  font-family: var(--font-military);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 1px 4px;
  border-radius: 2px;
  align-self: center;
  white-space: nowrap;
}

.direction-long .ben-direction {
  background: rgba(76, 175, 110, 0.15);
  color: #4caf6e;
  border: 1px solid rgba(76, 175, 110, 0.35);
}

.direction-short .ben-direction {
  background: rgba(255, 51, 102, 0.15);
  color: var(--critical);
  border: 1px solid rgba(255, 51, 102, 0.35);
}

/* company name: spans both columns, below ticker/direction row */
.ben-company {
  grid-column: 1 / -1;
  font-family: var(--font-data);
  font-size: 9px;
  color: rgba(232, 220, 195, 0.22);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Cascade tree ── */
.cascade-tree {
  margin-top: 6px;
}

.cascade-level {
  padding: 5px 0 5px 12px;
  border-left: 1px solid var(--border);
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--amber-mid);
  margin-bottom: 4px;
  position: relative;
}

.cascade-level::before {
  content: '├ ';
  color: var(--amber-dim);
}

.cascade-tag {
  font-family: var(--font-military);
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber-dim);
  margin-right: 6px;
}

/* ── Cascade Tree ── */
.cascade-chain {
  margin-bottom: 20px;
  border-left: 2px solid rgba(212,137,10,0.2);
  padding-left: 14px;
}

.cascade-chain-header {
  font-family: var(--font-military);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--warning);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cascade-chain-header::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
}

.cascade-depth-badge {
  font-family: var(--font-military);
  font-size: 8px;
  letter-spacing: 1px;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: auto;
  background: rgba(255, 107, 53, 0.1);
  color: var(--warning);
  border: 1px solid rgba(255, 107, 53, 0.3);
}

.cascade-node {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
  margin-bottom: 2px;
  --node-color: var(--amber-dim);
  --depth-indent: 12px;
}

.cascade-node::before {
  content: '';
  position: absolute;
  left: calc(var(--depth-indent) - 9px);
  top: 0; bottom: -2px;
  width: 1px;
  background: var(--node-color);
  opacity: 0.3;
}
.cascade-node:last-child::before { display: none; }

.cascade-node-indent {
  flex-shrink: 0;
  width: var(--depth-indent);
  position: relative;
}

.cascade-node-indent::after {
  content: '└';
  position: absolute;
  right: 2px;
  color: var(--node-color);
  opacity: 0.5;
  font-size: 10px;
  line-height: 1.4;
}
.cascade-node[data-depth="1"] .cascade-node-indent::after { display: none; }

.cascade-node-label {
  font-family: var(--font-data);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--node-color);
  flex-shrink: 0;
  padding: 2px 5px;
  border: 1px solid var(--node-color);
  border-radius: 2px;
  opacity: 0.9;
  margin-right: 8px;
  margin-top: 1px;
}

.cascade-node-text {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.5;
  flex: 1;
}

/* Evidence basis label beneath cascade node — source citation or PROJECTED */
.cascade-node-evidence {
  display: block;
  font-size: 9px;
  color: var(--text-faint);
  margin-top: 3px;
  padding-left: 2px;
  letter-spacing: 0.04em;
  font-family: var(--font-data);
  opacity: 0.7;
  font-style: italic;
}

/* Time horizon label inline after description */
.cascade-node-time {
  font-size: 9px;
  color: var(--text-faint);
  margin-left: 8px;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

/* PROJECTED nodes — dashed border signals forward inference, not observed data */
.cascade-node--projected .cascade-node-label {
  opacity: 0.4;
  border-style: dashed;
}
.cascade-node--projected .cascade-node-text {
  color: var(--text-faint);
}
.cascade-node--projected .cascade-node-evidence {
  opacity: 0.5;
}

.cascade-arrow {
  font-size: 9px;
  color: var(--node-color);
  opacity: 0.6;
  margin: 0 4px;
  flex-shrink: 0;
}

/* Depth color system */
.cascade-node[data-depth="1"] { --node-color: #ff3366; --depth-indent: 12px; }
.cascade-node[data-depth="2"] { --node-color: #ff6b35; --depth-indent: 16px; }
.cascade-node[data-depth="3"] { --node-color: #e8d44d; --depth-indent: 32px; }
.cascade-node[data-depth="4"] { --node-color: var(--amber-dim); --depth-indent: 48px; }
.cascade-node[data-depth="5"] { --node-color: var(--text-faint); --depth-indent: 64px; }
.cascade-node[data-depth="6"] { --node-color: var(--text-faint); --depth-indent: 80px; }
.cascade-node[data-depth="7"] { --node-color: var(--text-faint); --depth-indent: 96px; }
.cascade-node[data-depth="8"] { --node-color: var(--text-faint); --depth-indent: 112px; }
.cascade-node[data-depth="9"] { --node-color: var(--text-faint); --depth-indent: 128px; }
.cascade-node[data-depth="10"] { --node-color: var(--text-faint); --depth-indent: 144px; }

.cascade-analog {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-faint);
  line-height: 1.55;
  border-left: 2px solid rgba(212,137,10,0.15);
  padding-left: 10px;
  margin-top: 10px;
  font-style: italic;
}

.cascade-analog-label {
  font-style: normal;
  color: var(--amber-dim);
  letter-spacing: 1px;
  font-size: 8px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

/* ── Exit triggers ── */
.exit-trigger-item {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  padding: 3px 0;
  line-height: 1.55;
}

.exit-trigger-item::before {
  content: '→ ';
  color: var(--blood-bright);
}

/* ── Tier locked ── */
.tier-locked {
  text-align: center;
  padding: 20px 16px;
  margin: 12px 0;
  border: 1px dashed rgba(212, 137, 10, 0.25);
  color: rgba(212, 137, 10, 0.35);
  font-family: var(--font-military);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.8;
}

/* ── Feed source badge ── */
.feed-source-badge {
  font-family: var(--font-military);
  font-size: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--slate);
  border: 1px solid rgba(61, 90, 122, 0.3);
  padding: 1px 4px;
  margin-left: 6px;
}

/* ── Context rows (WHY/HOW/WHEN) ── */
.context-row {
  margin-bottom: 10px;
}

.ctx-label {
  font-family: var(--font-military);
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber-dim);
  display: block;
  margin-bottom: 2px;
}

.ctx-value {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Historical analog */
.analog-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 10px;
  margin: 8px 0;
}

.analog-title {
  font-family: var(--font-stamp);
  font-style: italic;
  font-size: 10px;
  color: var(--amber-dim);
  margin-bottom: 6px;
}

.analog-text {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* --- Legacy: conviction gauge (kept for backward compat) --- */
.conviction-gauge {
  height: 24px;
  background: rgba(212, 137, 10, 0.05);
  border: 1px solid rgba(212, 137, 10, 0.15);
  position: relative;
  overflow: hidden;
}
.conviction-gauge .gauge-fill {
  height: 100%;
  background: linear-gradient(to right, var(--amber-dim), var(--amber));
  transition: width 400ms ease;
}
.conviction-gauge .gauge-label {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
}

/* --- Legacy: decay timer --- */
.decay-timer-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.decay-timer-row .decay-value {
  font-size: 16px;
  color: var(--amber);
  font-family: var(--font-data);
}
.decay-timer-row .decay-bar {
  flex: 1;
  height: 3px;
  background: rgba(212, 137, 10, 0.1);
  position: relative;
}
.decay-timer-row .decay-bar-fill {
  height: 100%;
  background: var(--amber);
  transition: width 1s linear;
}

/* --- Legacy: exit triggers --- */
.exit-triggers {
  margin-top: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(212, 137, 10, 0.08);
}
.exit-label {
  font-family: var(--font-military);
  font-weight: 600;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--amber-dim);
  display: block;
  margin-bottom: 4px;
}
.exit-placeholder {
  font-size: 9px;
  color: rgba(212, 137, 10, 0.3);
}

/* --- Legacy: deep dive button --- */
.deep-dive-btn {
  display: block;
  width: 100%;
  background: var(--black-panel);
  border: 1px solid rgba(212, 137, 10, 0.3);
  color: var(--amber);
  font-family: var(--font-military);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  transition: box-shadow 200ms;
}
.deep-dive-btn:hover {
  box-shadow: 0 0 12px var(--amber-glow);
}

/* ── Domain Color System ── */
:root {
  --domain-geopolitical:     rgba(255, 80,  80,  0.75);
  --domain-military:         rgba(255, 60,  60,  0.85);
  --domain-financial:        rgba(80,  160, 255, 0.75);
  --domain-supply-chain:     rgba(60,  200, 180, 0.75);
  --domain-energy:           rgba(255, 140, 40,  0.75);
  --domain-tech:             rgba(160, 100, 255, 0.75);
  --domain-sanctions:        rgba(255, 200, 60,  0.75);
  --domain-diplomacy:        rgba(100, 200, 120, 0.75);
  --domain-default:          rgba(212, 137, 10,  0.6);
}

/* Signal card left border — domain color */
/* .event-card is the actual rendered class; .signal-card is an alias for future use */
.event-card,
.signal-card {
  border-left: 3px solid var(--domain-color, var(--domain-default));
}

/* Domain-specific card colors via CSS custom property */
.event-card[data-domain="geopolitical"],
.signal-card[data-domain="geopolitical"]        { --domain-color: var(--domain-geopolitical); }

.event-card[data-domain="military"],
.signal-card[data-domain="military"]            { --domain-color: var(--domain-military); }

.event-card[data-domain="financial"],
.signal-card[data-domain="financial"]           { --domain-color: var(--domain-financial); }

.event-card[data-domain="supply_chain"],
.signal-card[data-domain="supply_chain"]        { --domain-color: var(--domain-supply-chain); }

.event-card[data-domain="energy"],
.signal-card[data-domain="energy"]              { --domain-color: var(--domain-energy); }

.event-card[data-domain="tech_infrastructure"],
.signal-card[data-domain="tech_infrastructure"] { --domain-color: var(--domain-tech); }

.event-card[data-domain="sanctions"],
.signal-card[data-domain="sanctions"]           { --domain-color: var(--domain-sanctions); }

.event-card[data-domain="diplomacy"],
.signal-card[data-domain="diplomacy"]           { --domain-color: var(--domain-diplomacy); }

/* Domain badge — .ev-domain inherits --domain-color from parent card */
/* Also supports explicit .domain-badge class for future refactors */
.ev-domain,
.domain-badge {
  font-family: var(--font-military);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid var(--domain-color, var(--domain-default));
  color: var(--domain-color, var(--domain-default));
  background: transparent;
  flex-shrink: 0;
}

/* Domain pills in metrics card — colored per domain, not uniform amber.
   Scoped to :not(.has-data) so the red "has signals but filtered off" UX
   state defined in preytorian.css is never overridden by domain color. */
.domain-pill:not(.has-data)[data-domain="geopolitical"]        { --domain-color: var(--domain-geopolitical); border-color: var(--domain-geopolitical); color: var(--domain-geopolitical); }
.domain-pill:not(.has-data)[data-domain="military"]            { --domain-color: var(--domain-military);     border-color: var(--domain-military);     color: var(--domain-military); }
.domain-pill:not(.has-data)[data-domain="financial"]           { --domain-color: var(--domain-financial);    border-color: var(--domain-financial);    color: var(--domain-financial); }
.domain-pill:not(.has-data)[data-domain="supply_chain"]        { --domain-color: var(--domain-supply-chain); border-color: var(--domain-supply-chain); color: var(--domain-supply-chain); }
.domain-pill:not(.has-data)[data-domain="energy"]              { --domain-color: var(--domain-energy);       border-color: var(--domain-energy);       color: var(--domain-energy); }
.domain-pill:not(.has-data)[data-domain="tech_infrastructure"] { --domain-color: var(--domain-tech);         border-color: var(--domain-tech);         color: var(--domain-tech); }
.domain-pill:not(.has-data)[data-domain="sanctions"]           { --domain-color: var(--domain-sanctions);    border-color: var(--domain-sanctions);    color: var(--domain-sanctions); }
.domain-pill:not(.has-data)[data-domain="diplomacy"]           { --domain-color: var(--domain-diplomacy);    border-color: var(--domain-diplomacy);    color: var(--domain-diplomacy); }

/* Active domain pill — filled with domain color */
.domain-pill.active[data-domain] {
  background: rgba(212, 137, 10, 0.08);  /* fallback for browsers without color-mix() */
  background: color-mix(in srgb, var(--domain-color, var(--domain-default)) 15%, transparent);
}

/* Active card — preserve domain border color (overrides the amber fallback in .event-card.active) */
.event-card.active,
.signal-card.active {
  border-left: 3px solid var(--domain-color, var(--domain-default));
}

/* ── Phase 8 — Event card improvements ── */

.ev-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.ev-time {
  margin-left: auto;
  font-family: var(--font-data);
  font-size: 8px;
  color: var(--amber-dim);
}

.ev-source-link {
  font-family: var(--font-data);
  font-size: 8px;
  color: var(--slate);
  text-decoration: none;
  display: block;
  margin-top: 3px;
}
.ev-source-link:hover {
  color: var(--amber-dim);
  text-decoration: underline;
}

.ev-source {
  font-family: var(--font-data);
  font-size: 8px;
  color: var(--amber-dim);
  display: block;
  margin-top: 3px;
}

.feed-source-badge {
  font-family: var(--font-military);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 1px 4px;
  background: rgba(61, 90, 122, 0.3);
  color: rgba(61, 90, 122, 0.8);
  text-transform: uppercase;
}

/* ── Source attribution in signal detail ── */

.signal-source-attr {
  margin-bottom: 10px;
}

.signal-source-link {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--slate);
  text-decoration: none;
  letter-spacing: 0.5px;
}
.signal-source-link:hover {
  color: var(--amber-dim);
  text-decoration: underline;
}

.signal-source-text {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--text-faint);
}

/* --- Signal detail slide-out drawer --- */
.signal-drawer {
  position: fixed;
  top: 18px;
  right: 0;
  width: 480px;
  max-width: 90vw;
  height: calc(100vh - 18px);
  background: var(--bg-panel);
  border-left: 1px solid var(--border-active);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.6);
}

.signal-drawer.open {
  transform: translateX(0);
}

.signal-drawer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-elevated);
}

.signal-drawer-title {
  font-family: var(--font-military);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--amber);
  text-transform: uppercase;
  flex: 1;
}

.signal-drawer-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--amber-dim);
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.1s, color 0.1s;
}

.signal-drawer-close:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.signal-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 20px;
}

.signal-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.signal-drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* === AI Signal Card Enhancements === */

.ai-confidence-badge {
  font-family: var(--font-data);
  font-size: 8px;
  font-weight: 600;
  color: var(--amber);
  background: rgba(212, 137, 10, 0.12);
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 4px;
}

.ai-cascade-badge {
  font-size: 10px;
  color: var(--acid);
  margin-left: 4px;
  cursor: help;
}

.ai-detail-toggle {
  font-family: var(--font-military);
  font-size: 8px;
  color: var(--amber-dim);
  letter-spacing: 1px;
  cursor: pointer;
  padding: 4px 0 2px 0;
  user-select: none;
}

.ai-detail-toggle:hover {
  color: var(--amber);
}

.ai-detail-expandable {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.ai-detail-expandable.expanded {
  max-height: 200px;
}

.ai-detail-row {
  font-family: var(--font-data);
  font-size: 8px;
  color: var(--amber-mid);
  line-height: 1.5;
  padding: 2px 0;
}

.ai-detail-label {
  font-family: var(--font-military);
  font-weight: 600;
  color: var(--amber);
  margin-right: 6px;
  letter-spacing: 1px;
}

.ai-market-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.ai-market-tag {
  font-family: var(--font-data);
  font-size: 7px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}

.ai-market-long {
  background: rgba(58, 122, 61, 0.25);
  color: var(--nominal);
  border: 1px solid rgba(58, 122, 61, 0.4);
}

.ai-market-short {
  background: rgba(192, 57, 43, 0.2);
  color: var(--short-red);
  border: 1px solid rgba(192, 57, 43, 0.35);
}

/* Brief summary card in AI SIGNALS context rail */
.ai-brief-summary-body {
  padding: 8px 10px;
}

.ai-brief-summary-body .metric-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}

.ai-brief-summary-body .metric-label {
  font-family: var(--font-military);
  font-size: 8px;
  color: var(--amber-dim);
  letter-spacing: 1px;
}

.ai-brief-summary-body .metric-value {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--amber);
}

/* ═══════════════════════════════════════════════
   MARKETS VIEW
═══════════════════════════════════════════════ */

.markets-symbol-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.market-pill {
  font-family: var(--font-military);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--border);
  color: var(--amber-dim);
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s ease;
}

.market-pill:hover {
  border-color: var(--amber-mid);
  color: var(--amber);
}

.market-pill.active {
  border-color: var(--amber);
  color: var(--amber-bright);
  background: var(--amber-glow);
  border-bottom: 2px solid var(--amber-bright);
  padding-bottom: 3px; /* compensate: base is 4px pad + 1px border = 5px; active is 3px pad + 2px border = 5px */
}

.markets-symbol-header {
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border);
  min-height: 48px;
}

.markets-no-selection {
  font-family: var(--font-military);
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(212, 137, 10, 0.25);
}

.markets-symbol-name {
  font-family: var(--font-military);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--amber-bright);
}

.markets-price {
  font-family: var(--font-data);
  font-size: 14px;
  font-weight: 500;
  color: var(--amber);
  margin-left: 12px;
}

.markets-change {
  font-family: var(--font-data);
  font-size: 11px;
  margin-left: 8px;
}

.markets-change.up   { color: #3a9d5c; font-weight: 700; }
.markets-change.down { color: #e05252; font-weight: 700; }

.markets-detail {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.markets-section {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.markets-section-header {
  font-family: var(--font-military);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--warning);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.markets-section-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border-active), transparent);
}

.markets-stat-line {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--amber);
  padding: 6px 0;
}

.market-history-grid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.market-history-chart {
  flex-shrink: 0;
}

.market-history-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.mh-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-data);
  font-size: 9px;
  line-height: 1.4;
}

.mh-stat-label {
  color: var(--text-faint);
  letter-spacing: 0.8px;
  font-family: var(--font-military);
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}

.mh-stat-value {
  color: var(--amber-bright);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Percentile color-coding — position within 90-day range */
.mh-stat-value.percentile-high { color: #e05252; }  /* top 20% — elevated */
.mh-stat-value.percentile-mid  { color: var(--amber); }
.mh-stat-value.percentile-low  { color: #3a9d5c; }  /* bottom 20% — suppressed */

.markets-sparkline {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 4px 0;
  overflow: visible;
}

.sparkline-path {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5;
}

.sparkline-area {
  /* fill set by fill="url(#sparkGrad-{sym})" attribute in _renderMarketSparkline — do not add fill: here */
}

.sparkline-current-dot {
  fill: var(--amber-bright);
}

.known-relationships {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}

.known-rel-label {
  font-family: var(--font-military);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--amber-bright);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.known-rel-group {
  margin-bottom: 8px;
}

.known-rel-direction {
  font-family: var(--font-military);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--amber-bright);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.known-rel-item {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--amber-bright);
  padding: 2px 0;
}

.markets-context {
  padding: 10px 12px;
}

.markets-context-count {
  font-family: var(--font-data);
  font-size: 20px;
  font-weight: 600;
  color: var(--amber-bright);
  margin-bottom: 2px;
}

.markets-context-label {
  font-family: var(--font-military);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--amber-bright);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.markets-context-domains {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--amber-bright);
  line-height: 1.8;
}

.markets-context-freshness {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--amber-mid);
  margin-top: 8px;
}

/* ── Dense Signal Card ── */
.signal-card-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.signal-card-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-top: 1px;
}

.signal-card-headline {
  font-family: var(--font-military);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1.35;
  display: block;
  width: 100%;
}

.signal-card-summary {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.45;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.signal-card-l1 {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 5px;
}

.signal-card-l1-label {
  font-family: var(--font-military);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #ff3366;
  border: 1px solid rgba(255,51,102,0.4);
  padding: 1px 4px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 1px;
}

.signal-card-l1-text {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.signal-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.signal-card-confidence { font-family: var(--font-data); font-size: 9px; font-weight: 600; }
.signal-card-confidence.conf-high { color: var(--nominal); }
.signal-card-confidence.conf-mid  { color: var(--amber); }
.signal-card-confidence.conf-low  { color: var(--text-faint); }

.signal-card-location {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.signal-card-location::before { content: '⌖ '; opacity: 0.6; }

.signal-card-time {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--text-faint);
  margin-left: auto;
  white-space: nowrap;
}

/* ── Source Attribution ── */
.sources-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.sources-header {
  font-family: var(--font-military);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-faint);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sources-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border), transparent);
}

.source-count-badge {
  font-family: var(--font-data);
  font-size: 8px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 2px;
}

.source-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.source-item:last-child { border-bottom: none; }

.source-item-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-publisher {
  font-family: var(--font-military);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--text-dim);
  text-transform: uppercase;
  flex-shrink: 0;
}

.source-type-badge {
  font-family: var(--font-military);
  font-size: 7px;
  letter-spacing: 0.8px;
  padding: 1px 4px;
  border: 1px solid var(--border);
  color: var(--text-faint);
  border-radius: 2px;
  flex-shrink: 0;
}

.source-type-badge.rss      { border-color: rgba(80,155,255,0.3);  color: rgba(80,155,255,0.7); }
.source-type-badge.gdelt    { border-color: rgba(212,137,10,0.3);  color: var(--amber-dim); }
.source-type-badge.usgs     { border-color: rgba(55,195,175,0.3);  color: rgba(55,195,175,0.7); }
.source-type-badge.noaa     { border-color: rgba(55,195,175,0.3);  color: rgba(55,195,175,0.7); }
.source-type-badge.eia      { border-color: rgba(255,140,35,0.3);  color: rgba(255,140,35,0.7); }
.source-type-badge.fred     { border-color: rgba(155,95,255,0.3);  color: rgba(155,95,255,0.7); }
.source-type-badge.aircraft { border-color: rgba(255,51,102,0.3);  color: rgba(255,51,102,0.7); }
.source-type-badge.ais      { border-color: rgba(255,51,102,0.3);  color: rgba(255,51,102,0.7); }

.source-time {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--text-faint);
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

.source-headline {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.source-read-link {
  font-family: var(--font-military);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 0.15s;
  align-self: flex-start;
}

.source-read-link:hover { color: var(--amber); }
.source-read-link::after { content: ' ↗'; font-size: 9px; }

.source-provenance-warn {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--caution);
  padding: 6px 8px;
  border: 1px solid rgba(232,212,77,0.2);
  background: rgba(232,212,77,0.04);
  margin-top: 8px;
  line-height: 1.5;
}

/* ── Signal Drawer v2 Layout ── */

.drawer-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.drawer-headline {
  font-family: var(--font-military);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1.25;
  margin-bottom: 8px;
}

.drawer-meta-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.drawer-confidence {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 600;
}
.drawer-confidence.conf-high { color: var(--nominal); }
.drawer-confidence.conf-mid  { color: var(--amber); }
.drawer-confidence.conf-low  { color: var(--text-faint); }

.drawer-confidence-label {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-faint);
}

.drawer-location {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-faint);
}
.drawer-location::before { content: '⌖ '; opacity: 0.6; }

.drawer-time {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-faint);
  margin-left: auto;
}

.drawer-section-hdr {
  font-family: var(--font-military);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--warning);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  margin-top: 18px;
}

.drawer-section-hdr::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(255,107,53,0.35), transparent);
}

.drawer-section-hdr.critical {
  color: var(--critical);
}
.drawer-section-hdr.critical::after {
  background: linear-gradient(to right, rgba(255,51,102,0.35), transparent);
}

.drawer-section-hdr.amber {
  color: var(--amber-bright);
}
.drawer-section-hdr.amber::after {
  background: linear-gradient(to right, rgba(232,160,32,0.35), transparent);
}


.drawer-summary-text {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 4px;
}

.drawer-exit-item {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.6;
  padding: 2px 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.drawer-exit-arrow {
  color: var(--critical);
  flex-shrink: 0;
  font-size: 10px;
  margin-top: 1px;
}

.drawer-precedent-text {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.65;
}

.drawer-exposure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.drawer-exposure-item {
  padding: 7px 9px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.drawer-exposure-row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2px;
}

.drawer-exp-ticker {
  font-family: var(--font-military);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-bright);
}

.drawer-exp-dir {
  font-family: var(--font-military);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.drawer-exp-dir.long  { color: #4caf6e; }
.drawer-exp-dir.short { color: var(--critical); }
.drawer-exp-dir.watch { color: var(--caution); }

.drawer-exp-name {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-actions {
  display: flex;
  gap: 6px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.drawer-action-btn {
  flex: 1;
  font-family: var(--font-military);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 9px 4px;
  border: 1px solid var(--border-active);
  background: rgba(212,137,10,0.07);
  color: var(--amber-bright);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.drawer-action-btn:hover {
  background: rgba(212,137,10,0.16);
  border-color: var(--amber);
  box-shadow: 0 0 8px rgba(212,137,10,0.12);
}

.drawer-action-btn:disabled {
  color: var(--amber-dim);
  border-color: var(--border);
  background: transparent;
  cursor: not-allowed;
  box-shadow: none;
}

.drawer-empty-section {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--text-faint);
  font-style: italic;
  padding: 4px 0;
}

.drawer-body-text {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.65;
}

.drawer-classification {
  font-family: var(--font-data);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 6px;
}

.drawer-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-bottom: 4px;
}

.drawer-metric-box {
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-metric-val {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 600;
  color: var(--amber-bright);
  line-height: 1.2;
}

.drawer-metric-lbl {
  font-family: var(--font-military);
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--text-faint);
  text-transform: uppercase;
}

.drawer-decay-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
}

.drawer-decay-label {
  font-family: var(--font-military);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.drawer-decay-bar-wrap {
  flex: 1;
  height: 3px;
  background: rgba(212,137,10,0.12);
  border-radius: 2px;
  overflow: hidden;
}

.drawer-decay-bar-fill {
  height: 100%;
  background: var(--amber);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.drawer-decay-time {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--amber);
  flex-shrink: 0;
  white-space: nowrap;
}

.drawer-exp-nonobvious {
  font-family: var(--font-military);
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--caution);
  border: 1px solid rgba(232,212,77,0.3);
  padding: 1px 4px;
  border-radius: 2px;
  display: inline-block;
  margin-top: 2px;
}

.drawer-analog-box {
  border-left: 2px solid rgba(212,137,10,0.2);
  padding: 6px 10px;
  margin-top: 8px;
}

.drawer-analog-label {
  font-family: var(--font-military);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--amber-dim);
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.drawer-analog-text {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.6;
  font-style: italic;
}

.cascade-node.cn-1,
.cascade-node[data-depth="1"] { --node-color: #ff3366; }
.cascade-node.cn-2,
.cascade-node[data-depth="2"] { --node-color: #ff6b35; }
.cascade-node.cn-3,
.cascade-node[data-depth="3"] { --node-color: #e8d44d; }
.cascade-node.cn-4,
.cascade-node[data-depth="4"] { --node-color: var(--amber-dim); }
.cascade-node.cn-5,
.cascade-node[data-depth="5"] { --node-color: var(--text-faint); }

.cascade-node .cascade-node-label {
  color: var(--node-color);
  border-color: color-mix(in srgb, var(--node-color) 40%, transparent);
}

.cascade-node .cascade-node-text { color: var(--text-dim); }
.cascade-node.cn-1 .cascade-node-text,
.cascade-node[data-depth="1"] .cascade-node-text {
  color: rgba(232,220,195,0.7);
}

/* ============================================================
   ACCORDION FEED RAIL — cascade chain cards + watch list items
   ============================================================ */

/* Cascade chain cards */
.cascade-card { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.cascade-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cascade-type { font-size: 8px; letter-spacing: 0.14em; color: var(--amber); text-transform: uppercase; }
.cascade-score { font-size: 9px; font-weight: 500; }
.cascade-root { font-size: 9px; color: var(--text-dim); margin-bottom: 4px; line-height: 1.4; }
.cascade-steps { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin: 4px 0; }
.cascade-step { font-size: 8px; color: var(--text); background: rgba(212,137,10,0.08); padding: 1px 4px; border-radius: 2px; }
.cascade-arrow { font-size: 8px; color: var(--amber-dim); padding: 0 1px; }
.cascade-impact { font-size: 9px; color: var(--text-dim); margin-top: 3px; font-style: italic; }
.cascade-meta { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.cascade-time { font-size: 8px; color: var(--amber-dim); letter-spacing: 0.08em; }
.cascade-domains { display: flex; gap: 3px; flex-wrap: wrap; }
.cascade-domain { font-size: 7px; letter-spacing: 0.1em; color: var(--text-faint); text-transform: uppercase; background: rgba(255,255,255,0.04); padding: 1px 3px; border-radius: 2px; }

/* Tier-upgrade hint shown to Terminal users at the bottom of the cascade list */
.cascade-upgrade-hint {
  display: block;
  padding: 6px 10px;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  background: linear-gradient(180deg, transparent, rgba(212,137,10,0.06));
  border-top: 1px dashed var(--border);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cascade-upgrade-hint:hover {
  color: var(--amber-bright);
  background: rgba(212,137,10,0.12);
}

/* Watch list items */
.watchlist-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 9px; color: var(--text); line-height: 1.5; }
.watchlist-bullet { color: var(--amber); flex-shrink: 0; font-size: 7px; padding-top: 2px; }

/* ── Drawer section header: dim variant (algorithmic, not AI) ── */
.drawer-section-hdr.dim {
  color: var(--amber-dim);
}
.drawer-section-hdr.dim::after {
  background: linear-gradient(to right, rgba(212,137,10,0.2), transparent);
}

/* ── Algorithmic cascade context in center panel ── */
.algo-cascade-list {
  padding: 0 0 6px 0;
}
.algo-cascade-item {
  margin-bottom: 10px;
}
.algo-cascade-label {
  font-family: var(--font-military);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 4px;
}
.algo-chain-steps {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--amber-dim);
  line-height: 1.6;
}
.algo-cascade-note {
  font-family: var(--font-data);
  font-size: 8px;
  color: var(--text-faint);
  font-style: italic;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

/* ── Confidence tier label row and badges ── */
.algo-cascade-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.algo-conf-badge {
  font-family: var(--font-military);
  font-size: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.algo-conf-primary   { color: var(--amber-bright); }
.algo-conf-secondary { color: var(--amber-dim); }
/* label text is "POSSIBLE" in the UI — class name follows server confidence enum */
.algo-conf-tertiary  { color: var(--text-faint); font-style: italic; }

/* ── Algorithmic cascade hint badges ── */
.cascade-hints-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.cascade-hint-badge {
  font-family: var(--font-military);
  font-size: 7px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--amber-dim);
  border: 1px solid var(--amber-ghost);
  padding: 1px 4px;
}
.algo-threat-dot {
  font-size: 8px;
  margin-left: auto;
}
.algo-dot-high   { color: var(--warning); }
.algo-dot-med    { color: var(--amber-bright); }
.algo-dot-low    { color: var(--amber-dim); }

/* ─── GAP-002 disclaimer (market exposure) — Plan 0 v2 Task 6 ─── */
.gap-002-disclaimer {
  margin-top: 8px;
  padding: 6px 10px;
  border-left: 2px solid var(--warning, #ff8c00);
  background: rgba(255, 140, 0, 0.06);
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-dim);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ─── Threat baseline rows (threat card) — Plan 0 v2 Task 5 ─── */
.threat-baseline-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 8px 0 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.threat-baseline-row {
  display: grid;
  grid-template-columns: 70px 64px 32px 1fr auto auto;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-family: var(--font-data, 'IBM Plex Mono', monospace);
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.threat-baseline-stream {
  color: var(--text-faint);
  font-weight: 500;
}
.threat-baseline-level.threat-green   { color: #4caf50; }
.threat-baseline-level.threat-yellow  { color: var(--amber-bright); }
.threat-baseline-level.threat-orange  { color: #ff8c00; }
.threat-baseline-level.threat-red     { color: var(--critical); }
.threat-baseline-level.threat-unknown { color: var(--text-faint); }
.threat-baseline-score    { color: var(--text); }
.threat-baseline-velocity { color: var(--text-faint); }
.threat-baseline-cycles   { color: var(--text-faint); }
.threat-baseline-lowconf  {
  color: var(--text-faint);
  margin-left: 3px;
  cursor: help;
}
.threat-baseline-surge {
  color: var(--critical);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.18em;
  border: 1px solid var(--critical);
  padding: 0 4px;
  border-radius: 2px;
  animation: threat-baseline-surge-pulse 1.6s ease-in-out infinite;
}
@keyframes threat-baseline-surge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ─── Scenario bar placeholder (threat card) — Plan 0 v2 patch 2026-05-07 ─── */
.scenario-bar-placeholder {
  font-size: 10px;
  font-style: italic;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  padding: 6px 0;
  text-align: center;
}