:root {
  --bg:          #0a0f1c;
  --bg-card:     #0f172a;
  --bg-card-2:   #131c30;
  --bg-inset:    #060a14;
  --border:      #1e293b;
  --border-2:    #334155;
  --text:        #f1f5f9;
  --text-2:      #cbd5e1;
  --muted:       #94a3b8;
  --muted-2:     #64748b;
  --accent:      #8EA2FF;
  --accent-soft: rgba(142,162,255,0.10);
  --pos:         #4ade80;
  --neg:         #f87171;
  --warn:        #fbbf24;
  --thesis:      #a5b4fc;
  --short:       #fb923c;

  --b-energy:      #fbbf24;
  --b-metals:      #cbd5e1;
  --b-agriculture: #84cc16;
  --b-equities:    #60a5fa;
  --b-crypto:      #c084fc;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  --fs-9:  9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-28: 28px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--fs-13);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

a { color: var(--accent); text-decoration: none; }

.container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 20px 24px 56px;
}

/* ─── Sticky stack wrapper (Curve & Term Structure pattern) ───
   Pins topbar + masthead + tabs as ONE block at the top while users
   scroll. Children become position:static inside the wrapper so we
   get one paint, one composite, no inter-tier gaps. */
.sticky-stack { position:sticky; top:0; z-index:100;
  background:var(--bg-page,#0a0e15); isolation:isolate; }
.sticky-stack > .topbar,
.sticky-stack > .masthead,
.sticky-stack > .status-strip,
.sticky-stack > .tabs {
  position:static !important;
  top:auto !important;
  z-index:auto !important;
}
/* Status-strip lives inside .sticky-stack — kill its prior body
   margin so it sits flush between masthead and tabs. */
.sticky-stack > .status-strip { margin: 6px 0 10px; }

/* ─── Top bar / brand / masthead / status-strip ───
   Adapted from M&F v3 (_build_macro_futures_v3.py:205-289). */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 10px;
}
.brand { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.brand .edge { color: var(--accent); }
.timestamp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 0.06em;
}
.bundle-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.bpill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--bg-card-2);
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 150ms;
  user-select: none;
}
.bpill.on, .bpill:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(34, 211, 238, 0.4);
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

/* ─── Masthead (M&F v3 verbatim) ─── */
.masthead { padding: 28px 0 12px; }
.masthead-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.masthead-eyebrow {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.masthead-italic {
  margin-top: 6px;
  font-style: italic;
  font-size: 14px;
  color: var(--text-2, var(--muted));
}
/* Non-italic stats line that sits below the italic question (mirrors
   Curve & Term's masthead pattern — italic question identifies the
   view's purpose, stats line gives slot-specific counts). */
.masthead-stats {
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
@media(max-width: 768px) {
  .masthead { padding: 16px 0 8px; }
  .masthead-title { font-size: 22px; }
}

/* ─── Status strip (M&F v3 verbatim) ─── */
.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.status-strip .num { color: var(--accent); font-weight: 600; }
.status-strip .sep { color: var(--muted-2); padding: 0 4px; }

/* ─── Tabs ─── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 24px;
}
.tab {
  padding: 12px 22px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--text-2); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(34, 211, 238, 0.10);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  vertical-align: 1px;
}
.tab.active .tab-count { background: rgba(34, 211, 238, 0.22); color: var(--accent); }

/* ─── Hero ─── */
.hero {
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 22px;
}
.hero-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-10);
  letter-spacing: 2px;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
}
.hero-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-10);
  letter-spacing: 1.5px;
  color: var(--muted-2);
  text-transform: uppercase;
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.kpi {
  padding: 14px 16px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.kpi-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-9);
  letter-spacing: 2px;
  color: var(--muted-2);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kpi-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-28);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.kpi-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-10);
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.5px;
}
.kpi-value .sep { color: var(--muted-2); margin: 0 4px; font-weight: 400; }
.kpi-value .pos { color: var(--pos); }
.kpi-value .neg { color: var(--neg); }
.kpi-value .warn { color: var(--warn); }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* ─── Filter chips ─── */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.filter-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.filter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-9);
  letter-spacing: 2px;
  color: var(--muted-2);
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 4px;
}
.chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-10);
  letter-spacing: 1.2px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 14px;
  border: 1px solid var(--border-2);
  background: var(--bg-card-2);
  color: var(--muted);
  cursor: pointer;
  transition: all .12s;
  text-transform: uppercase;
  user-select: none;
}
.chip:hover { color: var(--text-2); border-color: var(--muted-2); }
.chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.chip .count {
  font-weight: 500;
  color: var(--muted-2);
  margin-left: 4px;
}
.chip.active .count { color: var(--accent); }

/* ─── Section header ─── */
.sec-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.sec-title {
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text);
}
.sec-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-10);
  letter-spacing: 1.5px;
  color: var(--muted-2);
  text-transform: uppercase;
}

/* ─── Unified section block — used by Picks / Watchlist / each P&L
   sub-section. Same visual rhythm as the MACRO CONTEXT header strip:
   small mono uppercase eyebrow + sentence-case Inter subtitle + chevron.
   <details open> wrapper makes each section foldable; default open. ─── */
.section-block {
  margin: 22px 0 16px;
  border: none;
  background: transparent;
}
.section-block > .section-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px;
  background: #0f1419;
  border: 1px solid #1f2937;
  border-radius: 8px 8px 0 0;
}
.section-block > .section-summary::-webkit-details-marker { display: none; }
.section-block .section-summary-l {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.section-block .section-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #64748b;
  text-transform: uppercase;
}
.section-block .section-eyebrow .count {
  color: #94a3b8;
}
.section-block .section-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #e5e7eb;
}
.section-block .section-chev {
  color: #94a3b8;
  font-size: 18px;
  transform: rotate(0deg);
  transition: transform .15s;
}
.section-block[open] > .section-summary > .section-chev { transform: rotate(180deg); }
.section-block .section-body {
  background: #0c1117;
  border: 1px solid #1f2937;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 18px;
}

/* ───────────────────────────────────────────────────────────────────────
   PRODUCTION CLASSES — verbatim from static/css/supply_chain.css:328-356
   Used by both pick cards (Trade tab analogue) and watchlist open-book cards.
   Sketch overrides only fonts (Inter instead of Urbanist) to honor the
   sketch's locked typography; structure / colors / sizes match production.
   ─────────────────────────────────────────────────────────────────────── */
.desk-persona {
  margin-bottom: 12px;
  border: 1px solid #334155;
  border-radius: 8px;
  overflow: hidden;
  background: #0f172a;
}
.desk-persona-hdr {
  padding: 14px 16px;
  background: #1e293b;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.desk-persona-hdr:hover { background: #273449; }
.desk-persona-title {
  font-size: 15px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 2px;
}
.desk-persona-sub {
  font-size: 10px;
  color: #818cf8;
  letter-spacing: 2px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.desk-urgency {
  font-size: 9px;
  padding: 3px 10px;
  border-radius: 3px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 1px;
  float: right;
  margin-top: 2px;
}
.desk-urgency-CRITICAL { background: #dc262630; color: #f87171; border: 1px solid #f8717150; }
.desk-urgency-HIGH     { background: #d9770630; color: #fbbf24; border: 1px solid #fbbf2450; }
.desk-urgency-MODERATE { background: #2563eb20; color: #60a5fa; border: 1px solid #60a5fa40; }
.desk-urgency-LOW      { background: #16a34a20; color: #4ade80; border: 1px solid #4ade8040; }

/* Phase 25a — per-trade catalyst badge (sourced from thesis_updates /
   trade_at_risk). Mirrors the .desk-urgency chip language. */
.desk-catalyst-badge {
  display: inline-block;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.5px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
}
.desk-catalyst-red    { background: #dc262630; color: #f87171; border: 1px solid #f8717150; }
.desk-catalyst-yellow { background: #d9770630; color: #fbbf24; border: 1px solid #fbbf2450; }
.desk-catalyst-green  { background: #16a34a20; color: #4ade80; border: 1px solid #4ade8040; }
.desk-catalyst-gray   { background: #ffffff10; color: #9ca3af; border: 1px solid #9ca3af30; }
.desk-body { display: none; padding: 14px 16px; }
.desk-persona.desk-open .desk-body { display: block; }
.desk-persona.desk-open .desk-persona-hdr { border-bottom-color: #334155; }
.desk-read {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.7;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #1e293b;
}
.desk-actions { margin-bottom: 14px; }
.desk-action {
  background: #141c2b;
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  transition: border-color .15s;
}
.desk-action:hover { border-color: #334155; }
.desk-action-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.desk-action-dir {
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .5px;
  white-space: nowrap;
}
.desk-dir-LONG,  .desk-dir-ACCUMULATE      { background: #16a34a22; color: #4ade80; border: 1px solid #4ade8040; }
.desk-dir-SHORT, .desk-dir-REDUCE_EXPOSURE { background: #dc262622; color: #f87171; border: 1px solid #f8717140; }
.desk-dir-HEDGE, .desk-dir-EXTEND_COVERAGE { background: #2563eb20; color: #60a5fa; border: 1px solid #60a5fa40; }
.desk-dir-SWITCH, .desk-dir-HOLD           { background: #d9770620; color: #fbbf24; border: 1px solid #fbbf2440; }
.desk-action-title {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  font-family: 'Inter', system-ui, sans-serif;
}
.desk-action-detail { font-size: 12px; color: #94a3b8; line-height: 1.6; margin-bottom: 6px; }
.desk-action-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.desk-action-tag {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 3px;
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.desk-action-evidence { font-size: 10px; color: #64748b; font-style: italic; margin-top: 4px; }

/* Section-tag color variants — matches production inline-style colors
   used at agentixpulse.html:1618 / 1621 / 1633 / 1637 / 1643. */
.tag-thesis { background: #4f46e515; color: #a5b4fc; border-color: #a5b4fc40; }
.tag-trade  { background: #8EA2FF15; color: #8EA2FF; border-color: #8EA2FF40; }
.tag-why    { background: #d9770615; color: #fbbf24; border-color: #fbbf2440; }
.tag-watch  { background: #dc262615; color: #f87171; border-color: #f8717140; }
.tag-setup  { background: #33415540; color: #cbd5e1; border-color: #33415590; }

/* Watch list inside pick / open-book bodies (the WATCH FOR bullets) */
.desk-body .watch-list {
  margin: 6px 0 0 18px;
  padding: 0;
  list-style: disc;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.7;
}

/* Pick header layout — production puts ticker/name in title and chips
   floated right; we keep that pattern but ensure rank + watch-eye + chevron
   align properly without rewriting any production class. */
.desk-persona-hdr .pick-rank {
  font-family: 'JetBrains Mono', monospace;
  color: #64748b;
  font-weight: 700;
  margin-right: 8px;
}
.desk-persona-hdr .chevron {
  width: 12px;
  height: 12px;
  position: absolute;
  right: 14px;
  bottom: 14px;
  color: #64748b;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform .15s;
}
.desk-persona.desk-open .desk-persona-hdr .chevron { transform: rotate(180deg); }

/* Bundle chip — sketch addition (no production analogue; needed for filter
   AND-filtering and for the bundle-color border-left visual identity).
   Same shape as .desk-action-tag so it sits naturally next to the others. */
.bundle-chip {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 1px;
  border: 1px solid;
  display: inline-block;
}
.bundle-chip[data-bundle="energy"]      { color: var(--b-energy);      border-color: rgba(251,191,36,0.4);  background: rgba(251,191,36,0.10); }
.bundle-chip[data-bundle="metals"]      { color: var(--b-metals);      border-color: rgba(203,213,225,0.4); background: rgba(203,213,225,0.07); }
.bundle-chip[data-bundle="agriculture"] { color: var(--b-agriculture); border-color: rgba(132,204,22,0.4);  background: rgba(132,204,22,0.10); }
.bundle-chip[data-bundle="equities"]    { color: var(--b-equities);    border-color: rgba(96,165,250,0.4);  background: rgba(96,165,250,0.10); }
.bundle-chip[data-bundle="crypto"]      { color: var(--b-crypto);      border-color: rgba(192,132,252,0.4); background: rgba(192,132,252,0.10); }

/* "ALSO IN <BUNDLE>" pill — same shape as .bundle-chip but muted/dashed
   so it reads as secondary metadata. Rendered server-side on pick cards
   and client-side on watchlist cards via BUNDLES_BY_TICKER lookup. */
.also-in-pill {
  font-size: 8.5px;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.8px;
  border: 1px dashed;
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.75;
}
.also-in-pill[data-bundle="energy"]      { color: var(--b-energy);      border-color: rgba(251,191,36,0.4);  }
.also-in-pill[data-bundle="metals"]      { color: var(--b-metals);      border-color: rgba(203,213,225,0.4); }
.also-in-pill[data-bundle="agriculture"] { color: var(--b-agriculture); border-color: rgba(132,204,22,0.4);  }
.also-in-pill[data-bundle="equities"]    { color: var(--b-equities);    border-color: rgba(96,165,250,0.4);  }
.also-in-pill[data-bundle="crypto"]      { color: var(--b-crypto);      border-color: rgba(192,132,252,0.4); }

/* Eye watch button — sketch button that simulates POST /api/v2/watchlist/add
   on click. Production analogue: .tk-cb at agentixpulse.html:23-27.
   We keep the eye-icon variant the previous round used; behavior parity:
   click → adds to localStorage; outline → filled logo blue. */
.watch-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid #475569;
  background: #0f172a;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: right;
  margin: 1px 4px 0 0;
  transition: color .15s, background .15s, border-color .15s;
}
.watch-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.watch-btn:hover {
  color: #8EA2FF;
  border-color: #8EA2FF;
  background: #8EA2FF10;
}
.watch-btn.watched {
  color: #8EA2FF;
  border-color: rgba(142,162,255,0.55);
  background: rgba(142,162,255,0.18);
  cursor: default;
}
.watch-btn.watched svg { fill: currentColor; }
.watch-btn.watched svg circle {
  fill: #0f172a;
  stroke: #0f172a;
}

/* Hide a card when filtered out */
.desk-persona.hidden { display: none; }

/* ─── Soft empty states ─── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 20px;
  color: var(--muted);
}
.empty-icon {
  width: 56px;
  height: 56px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--muted-2);
}
.empty-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.empty-text {
  font-size: var(--fs-12);
  color: var(--muted);
  letter-spacing: 0.4px;
  line-height: 1.55;
  max-width: 360px;
}

/* ───────────────────────────────────────────────────────────────────────
   PRODUCTION CLASSES — .wl-* verbatim from agentixpulse.html:23-50
   ─────────────────────────────────────────────────────────────────────── */
.wl-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.wl-banner-col {
  padding: 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
}
.wl-banner-col-h {
  font-size: 9px;
  letter-spacing: 2px;
  color: #8EA2FF;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #334155;
}
.wl-banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: 8px;
}
.wl-banner-empty {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
  padding: 8px 0;
  text-align: center;
}
.wl-stat { text-align: center; }
.wl-stat-v {
  font-size: 15px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #f1f5f9;
  line-height: 1.2;
}
.wl-stat-l {
  font-size: 8.5px;
  letter-spacing: 1.5px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
@media(max-width: 768px) { .wl-banner { grid-template-columns: 1fr; } }
.wl-section-h {
  font-size: 10px;
  letter-spacing: 2.2px;
  color: #8EA2FF;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin: 14px 0 8px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #334155;
}
.wl-pnl-pos { color: #4ade80; font-weight: 700; }
.wl-pnl-neg { color: #f87171; font-weight: 700; }
.wl-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.wl-actions-chart { margin-top: 10px; }
.wl-actions-bottom { margin-top: 14px; padding-top: 14px;
  border-top: 1px solid #1e293b; }
.wl-btn {
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #334155;
  background: #1e293b;
  color: #cbd5e1;
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 1px;
  font-weight: 700;
}
.wl-btn:hover { border-color: #8EA2FF; color: #8EA2FF; }
.wl-btn-danger:hover { border-color: #f87171; color: #f87171; }
.wl-btn.disabled, .wl-btn:disabled {
  cursor: not-allowed; opacity: 0.5;
  border-color: #1e293b; color: #475569;
}
.wl-btn.disabled:hover, .wl-btn:disabled:hover {
  border-color: #1e293b; color: #475569; background: transparent;
}

/* ─── RISK ENGINE section (Phase 5a watchlist card sub-section) ───
   Inserted at the bottom of every expanded watchlist card body.
   Reads pick.risk_profile (written by RecomputeWatchlistRiskProfilesAction
   in the AgentixIntel pipeline). Phase 1 ships 3 active factors; the
   remaining 7 light up in Phases 2-6 per the rollout schedule. */
.re-section{margin-top:18px;background:#11192b;border:1px solid #2d3a5c;
border-radius:8px;padding:16px}
.re-head{display:flex;justify-content:space-between;align-items:flex-start;
margin-bottom:14px;cursor:pointer;user-select:none}
.re-eb{color:#8EA2FF;font-size:11px;font-weight:700;letter-spacing:1.5px;
font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.re-sub{color:#cbd5e1;font-size:13px;margin-top:3px}
.re-chevron{color:#94a3b8;font-size:11px;transition:transform 0.15s ease;
display:inline-block}
.re-section.collapsed .re-body{display:none}
.re-section.collapsed .re-head{margin-bottom:0}
.re-section.collapsed .re-chevron{transform:rotate(-90deg)}
.gauge-row{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0}
.gauge-trade-health{position:relative;width:100%;max-width:240px;
  margin:0 auto;flex-shrink:0;text-align:center}
.gauge-info{flex:1}
.gauge-info-title{font-size:11px;color:#64748b;letter-spacing:1.2px;
font-weight:700;font-family:'JetBrains Mono',monospace}
.gauge-info-meta{font-size:11px;color:#94a3b8;margin-top:6px;
font-family:'JetBrains Mono',monospace;line-height:1.6}
.gauge-info-meta b{color:#34d399;font-weight:700}
.re-divider{height:1px;background:#1e293b;margin:14px 0}
.lineage-title{display:flex;justify-content:space-between;align-items:baseline}
.lin-eb{color:#64748b;font-size:11px;font-weight:700;letter-spacing:1.2px;
font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.lin-meta{color:#94a3b8;font-size:11px;font-family:'JetBrains Mono',monospace}
.dials-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
margin-top:14px}
.dial-card{background:#0a0e1a;border:1px solid #1e293b;border-radius:6px;
padding:12px}
.dial-name{font-size:11px;color:#cbd5e1;font-weight:600;text-align:center;
margin-bottom:8px}
.tier-bar{display:flex;flex-direction:column;gap:3px;margin:0 auto 10px;
  width:100%;max-width:100px}
.tier-seg{height:18px;border-radius:3px;background:#1e293b;display:flex;
  align-items:center;justify-content:center;font-size:9px;
  font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:0.8px;
  color:#475569;transition:all 0.2s}
.tier-seg.active-blue{background:#8EA2FF;color:#111827}
.tier-seg.active-green{background:#34d399;color:#022c22}
.tier-seg.active-amber{background:#f59e0b;color:#451a03}
.tier-seg.active-red{background:#ef4444;color:#450a0a}
.bipolar-wrap{margin:0 auto 10px;width:100%;max-width:140px}
.bipolar-track{position:relative;height:8px;background:#1e293b;
  border-radius:4px}
.bipolar-center{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;
  background:#475569;transform:translateX(-50%)}
.bipolar-fill{height:100%;border-radius:4px;position:absolute;top:0}
.bipolar-marker{position:absolute;top:-3px;width:6px;height:14px;
  border-radius:2px;transform:translateX(-50%)}
.bipolar-labels{display:flex;justify-content:space-between;font-size:9px;
  color:#64748b;margin-top:5px;font-family:'JetBrains Mono',monospace;
  letter-spacing:0.5px}
.dial-state{margin-top:6px;font-size:10px;font-weight:700;letter-spacing:1px;
font-family:'JetBrains Mono',monospace;text-align:center}
.dial-impact{margin-top:6px;font-size:10px;color:#94a3b8;text-align:center;
font-family:'JetBrains Mono',monospace;line-height:1.4}
.dial-impact .neg{color:#f87171}
.dial-impact .pos{color:#34d399}
.tc-block{margin-top:14px;padding:12px;background:#0a0e1a;
border:1px dashed #334155;border-radius:6px;text-align:center;
font-size:11px;color:#64748b;font-family:'JetBrains Mono',monospace}
.inactive-row{margin-top:14px;padding-top:12px;border-top:1px solid #1e293b;
font-size:10px;color:#475569;font-family:'JetBrains Mono',monospace;
line-height:1.5}
.re-pending{padding:12px;text-align:center;font-size:11px;color:#64748b;
font-family:'JetBrains Mono',monospace}
.wl-chart {
  margin-top: 10px;
  background: #0a0f1c;
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 8px;
}
.wl-closed-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.wl-closed-tbl th {
  text-align: left;
  padding: 5px 6px;
  color: #64748b;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
  border-bottom: 1px solid #334155;
}
.wl-closed-tbl td { padding: 6px; border-bottom: 1px solid #1e293b; color: #cbd5e1; }
.wl-closed-tbl td.tkr { color: #f1f5f9; font-weight: 700; }
.wl-closed-tbl td.reason { color: #64748b; font-size: 10px; }

/* ─── Right-side timeline TOC ───
   Mirrors production Macro & Futures v3
   (_build_macro_futures_v3.py:235-265 for grid + sticky + dot styles).
   The TOC lives in the right column of a 2-col page-grid; sticky at
   top:24px so it scrolls with the page until it reaches viewport top
   then sticks flush with the masthead horizontal line. Hidden below
   980px (grid collapses to single column). No "On this page" label —
   timeline starts with the first <li>, matching M&F. */
.page-grid {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 32px;
}
.page-grid > main { min-width: 0; }
/* Anchor scroll-margin clears the .sticky-stack wrapper height.
   Stack now: topbar(~50) + masthead(~95, no stats line) +
   status-strip(~30) + tabs(~40) ≈ 215 + 15 breathing → 240. */
.toc-target { scroll-margin-top: 240px; }
.section    { scroll-margin-top: 240px; }
.desk-toc { display: none; }
@media (min-width: 980px) {
  .desk-toc {
    display: block;
    position: sticky;
    top: 240px;
    max-height: calc(100vh - 240px - 24px);
    overflow-y: auto;
    align-self: start;
    padding: 8px 0;
  }
  .desk-toc-list {
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0;
  }
  .desk-toc-list::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    width: 1.5px;
    background: var(--border-2);
    border-radius: 1px;
    z-index: 0;
  }
  .desk-toc-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
  }
  .toc-circle {
    width: 12px;
    height: 12px;
    min-width: 12px;
    border-radius: 50%;
    border: 1.5px solid var(--muted-2);
    background: var(--bg);
    flex-shrink: 0;
    transition: background .15s, border-color .15s, box-shadow .15s;
  }
  .toc-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-10);
    letter-spacing: 0.5px;
    color: var(--muted);
    line-height: 1.3;
    text-transform: uppercase;
    transition: color .15s, font-weight .15s;
  }
  .desk-toc-list li:hover .toc-circle { border-color: var(--accent); }
  .desk-toc-list li:hover .toc-label  { color: var(--text-2); }
  .desk-toc-list li.active .toc-circle {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
  }
  .desk-toc-list li.active .toc-label {
    color: var(--text);
    font-weight: 700;
  }
}
@media (max-width: 980px) {
  .page-grid { grid-template-columns: 1fr; }
}

.equity-curve-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.bundle-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 980px) { .bundle-cards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .bundle-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .bundle-cards-grid { grid-template-columns: 1fr; } }

.bundle-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-2);
  border-radius: var(--radius);
  padding: 14px;
  transition: opacity .15s, border-color .15s;
}
.bundle-card[data-bundle="energy"]      { border-left-color: var(--b-energy); }
.bundle-card[data-bundle="metals"]      { border-left-color: var(--b-metals); }
.bundle-card[data-bundle="agriculture"] { border-left-color: var(--b-agriculture); }
.bundle-card[data-bundle="equities"]    { border-left-color: var(--b-equities); }
.bundle-card[data-bundle="crypto"]      { border-left-color: var(--b-crypto); }
.bundle-card.dim { opacity: 0.32; }

.bundle-card-hdr { margin-bottom: 12px; }
.bundle-card-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 8px;
}
.bundle-stat-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.bundle-stat-v.muted { color: var(--muted-2); }
.bundle-stat-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.5px;
  color: var(--muted-2);
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 3px;
}

/* Open-book card chart — area chart with gradient + ref pills + glow dot */
.wl-chart { background: #050811; }
.wl-chart svg.sketch-chart { display: block; width: 100%; height: 220px; }
.wl-chart svg.sketch-chart .axis      { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.wl-chart svg.sketch-chart .grid      { stroke: rgba(255,255,255,0.04); stroke-width: 1; }
.wl-chart svg.sketch-chart .ref-stop  { stroke: #f87171; stroke-width: 1.5; stroke-dasharray: 6 3; }
.wl-chart svg.sketch-chart .ref-entry { stroke: #e5e7eb; stroke-width: 1.5; stroke-dasharray: 6 3; }
.wl-chart svg.sketch-chart .ref-t1    { stroke: #4ade80; stroke-width: 1.5; stroke-dasharray: 6 3; opacity: .85; }
.wl-chart svg.sketch-chart .ref-t2    { stroke: #4ade80; stroke-width: 1.5; stroke-dasharray: 6 3; }
.wl-chart svg.sketch-chart .price     { stroke: #8EA2FF; stroke-width: 2; fill: none;
                                        stroke-linejoin: round; stroke-linecap: round; }
.wl-chart svg.sketch-chart .price-area { stroke: none; }
.wl-chart svg.sketch-chart .pill-bg   { fill: rgba(8,12,22,0.92); stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.wl-chart svg.sketch-chart .pill-text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.wl-chart svg.sketch-chart .axis-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  fill: var(--text-faint, #475569);
  letter-spacing: 0.04em;
}
.wl-chart svg.sketch-chart .dot-outer { fill: rgba(142,162,255,0.2); }
.wl-chart svg.sketch-chart .dot-inner { fill: #8EA2FF; }
.wl-chart svg.sketch-chart .entry-marker {
  stroke: rgba(142,162,255,0.55); stroke-width: 1.2; stroke-dasharray: 3 3;
}
.wl-chart svg.sketch-chart .entry-marker-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; fill: #8EA2FF; letter-spacing: 0.5px;
}
.wl-chart svg.sketch-chart .label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
}
.wl-chart .chart-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: #64748b;
  letter-spacing: 1px;
  margin-top: 4px;
  text-align: right;
}
/* Empty state shown when yfinance fetch returned no history for the
   ticker (rate-limited / unreachable / cache miss). Renders inside the
   .wl-chart div in place of the SVG — no fake data, no synthetic wave. */
.wl-chart .chart-empty {
  padding: 40px 24px; text-align: center;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 6px; background: rgba(255,255,255,0.015);
}
.wl-chart .chart-empty-title {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  color: #94a3b8; margin-bottom: 6px;
}
.wl-chart .chart-empty-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: #64748b; line-height: 1.5;
}

/* ─── Macro context strip (top of page) + per-card enhancements ──────── */
.macro-strip {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 40px;
  background: var(--bg-elev, #0a0f1c);
  border-bottom: 1px solid var(--border, #1e293b);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em;
}
.mc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 4px;
  border: 1px solid var(--border, #1e293b);
  background: var(--bg, #050811);
  color: var(--text-muted, #94a3b8);
}
.mc-chip.green { color: var(--pos, #4ade80);  border-color: rgba(74,222,128,0.30); }
.mc-chip.amber { color: var(--warn, #fbbf24); border-color: rgba(251,191,36,0.30); }
.mc-chip.red   { color: var(--neg, #f87171);  border-color: rgba(248,113,113,0.30); }
.mc-chip.muted { color: var(--text-faint, #475569); }
.mc-chip-empty {
  color: var(--text-faint, #475569);
  font-style: italic; opacity: 0.8;
}

.warn-chip {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.06em; font-weight: 700;
  padding: 2px 6px; margin-left: 6px;
  border-radius: 3px;
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.3);
}
.crowd-chip {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.06em; font-weight: 700;
  padding: 2px 6px; margin-left: 6px;
  border-radius: 3px;
  background: rgba(248,113,113,0.12);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.3);
}
/* ── Phase 18.3 — distressed-recovery pick variant ────────────────── */
.dr-badge {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.06em; font-weight: 700;
  padding: 2px 7px; margin-left: 6px;
  border-radius: 3px;
  background: rgba(52,211,153,0.12);
  color: #34d399;
  border: 1px solid rgba(52,211,153,0.35);
}
/* left-edge accent so DR cards read as different at a glance */
.desk-persona[data-pick-type="distressed_recovery"] {
  border-left: 3px solid #34d399;
}
.dr-thesis {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(52,211,153,0.25);
  border-radius: 6px;
  background: rgba(52,211,153,0.05);
}
.dr-thesis-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #34d399; margin-bottom: 6px;
}
.dr-thesis-summary {
  font-size: 13px; line-height: 1.5; color: #cbd5e1; margin-bottom: 8px;
}
.dr-sub { margin-top: 8px; }
.dr-sub-h {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  color: #94a3b8; margin-bottom: 3px;
}
.dr-sub--stressor_signals .dr-sub-h { color: #f87171; }
.dr-sub--recovery_signals .dr-sub-h { color: #34d399; }
.dr-sub--risk_factors     .dr-sub-h { color: #fbbf24; }
.dr-sub-list {
  margin: 0; padding-left: 16px;
  font-size: 12px; line-height: 1.5; color: #cbd5e1;
}
.stop-rationale {
  font-size: 11px; font-style: italic;
  color: var(--text-faint, #64748b);
  margin: 2px 0 6px 0;
}
.macro-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin: 8px 0;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.04);
}
.macro-col h6 {
  margin: 0 0 4px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.1em; font-weight: 700;
  color: var(--text-faint, #64748b);
}
.macro-col ul {
  margin: 0; padding: 0; list-style: none;
  font-size: 11px; line-height: 1.5;
}
.macro-col.tail li { color: #4ade80; }
.macro-col.head li { color: #f87171; }
.regime-dep {
  font-size: 11px; font-style: italic;
  color: var(--text-muted, #94a3b8);
  margin: 6px 0;
  padding: 4px 8px;
  background: rgba(142,162,255,0.04);
  border-left: 2px solid rgba(142,162,255,0.4);
}

/* ─── MACRO CONTEXT panel — gating-conditions readout for the trade book.
   2×2 card grid (collapses to 1-col under 900px). Outer <details> wrapper
   so the whole panel can be folded; per-card chevron is decorative only.
   Built from db['macro_context_cache'] — dxy/vix/credit_z/real_rates +
   market_reads (LLM narrative). ─── */
.macro-context-section {
  margin: 16px 0 22px;
  border: none;
  background: transparent;
}
.macro-context-section .mc-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px;
  background: #0f1419;
  border: 1px solid #1f2937;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.macro-context-section[open] .mc-summary { border-bottom: none; }
.macro-context-section .mc-summary::-webkit-details-marker { display: none; }
.macro-context-section .mc-summary-l {
  display: flex; align-items: baseline; gap: 14px;
}
.macro-context-section .mc-summary-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  color: #64748b;
}
.macro-context-section .mc-summary-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 500; color: #e5e7eb;
}
.macro-context-section .mc-summary-chev {
  color: #94a3b8; font-size: 18px;
  transform: rotate(0deg); transition: transform .15s;
}
.macro-context-section[open] .mc-summary-chev { transform: rotate(180deg); }

.macro-context-section .mc-body {
  background: #0c1117;
  border: 1px solid #1f2937;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 18px;
}

.mc-legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid #1f2937;
  border-radius: 6px;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: #94a3b8;
  margin-bottom: 16px;
}
.mc-legend-chip { display: inline-flex; align-items: center; gap: 8px; }
.mc-legend-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.mc-dot-green  { background: #22c55e; }
.mc-dot-yellow { background: #fbbf24; }
.mc-dot-red    { background: #f87171; }

.mc-login-required {
  background: #141923;
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 22px 24px;
  color: #e5e7eb;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
.mc-login-required a {
  color: #8EA2FF;
  text-decoration: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 10px;
}
.mc-login-required a:hover { color: #99F6E4; }

.mc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px) {
  .mc-grid { grid-template-columns: 1fr; }
}

.mc-card {
  background: #141923;
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 14px 16px;
}
.mc-card-hdr {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #1f2937;
  margin-bottom: 12px;
}
.mc-card-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; color: #64748b; letter-spacing: 1.5px;
}
.mc-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px; color: #e5e7eb; font-weight: 500;
  margin-top: 2px;
}
.mc-card-chev {
  color: #94a3b8; font-size: 14px;
}

.mc-num-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  margin-bottom: 12px;
}
.mc-num-cell { display: flex; flex-direction: column; gap: 2px; }
.mc-num-l { text-align: left; }
.mc-num-r { text-align: right; }
.mc-num-label { color: #64748b; letter-spacing: 0.5px; }
.mc-num-val   { color: #94a3b8; font-size: 13px; }
.mc-num-val-sm { color: #94a3b8; font-size: 13px; }

.mc-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.mc-pill-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.mc-pill-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
}
.mc-pill-flat {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.25);
  color: #4ade80;
}
.mc-pill-flat .mc-pill-dot { background: #22c55e; }
.mc-pill-caution {
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.25);
  color: #fbbf24;
}
.mc-pill-caution .mc-pill-dot { background: #fbbf24; }
.mc-pill-filtering {
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.25);
  color: #f87171;
}
.mc-pill-filtering .mc-pill-dot { background: #f87171; }

.mc-rules {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: #94a3b8; line-height: 1.6;
  margin-bottom: 12px;
}
.mc-rule-key {
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 6px;
}

.mc-read {
  border-top: 1px solid #1f2937;
  padding-top: 10px;
}
.mc-read-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; color: #64748b; letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.mc-read-body {
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: #cbd5e1; line-height: 1.55;
}

/* Trade flags panel (above AVAILABLE TRADES) */
.flags-panel {
  margin: 16px 40px;
  padding: 12px 16px;
  background: var(--bg-elev, #0a0f1c);
  border-radius: 6px;
  border: 1px solid var(--border, #1e293b);
}
.flags-panel-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.1em; font-weight: 700;
  color: #fbbf24;
  margin-bottom: 8px;
}
.flag-card {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.2);
  font-size: 12px;
}
.flag-card.exit   { border-left: 3px solid #f87171;
                    background: rgba(248,113,113,0.06); }
.flag-card.reduce { border-left: 3px solid #fbbf24;
                    background: rgba(251,191,36,0.06); }
.flag-card.caution{ border-left: 3px solid #94a3b8;
                    background: rgba(148,163,184,0.04); }
.flag-card .flag-ticker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700; font-size: 13px;
  min-width: 60px;
}
.flag-card .flag-action {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
}
.flag-card.exit .flag-action   { color: #f87171; background: rgba(248,113,113,0.12); }
.flag-card.reduce .flag-action { color: #fbbf24; background: rgba(251,191,36,0.12); }
.flag-card.caution .flag-action{ color: #94a3b8; background: rgba(148,163,184,0.12); }
.flag-card .flag-reason { color: var(--text-muted, #94a3b8); flex: 1; }

/* Invalidation footer on watchlist cards */
.inv-footer {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.06);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--text-faint, #64748b);
}
.inv-footer .inv-status { font-weight: 700; }
.inv-footer .inv-status.intact     { color: #4ade80; }
.inv-footer .inv-status.warning    { color: #fbbf24; }
.inv-footer .inv-status.triggered  { color: #f87171; }

/* ─── Eye-click feedback: pulse on watch button + toast at top-right ─── */
.watch-btn.pulse {
  animation: watch-pulse 600ms ease-out;
}
@keyframes watch-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}

.toast {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--accent);
  color: var(--text);
  padding: 10px 14px 10px 12px;
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-11);
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity .18s ease-out, transform .18s ease-out;
  max-width: 320px;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast .accent { color: var(--accent); font-weight: 700; }

/* ─── Watchlist tab grid (Tab 2 only) ───
   2 cards per row on desktop, 1 per row on mobile. Empty-state spans
   both columns so it doesn't render as a sad half-width card. */
.watchlist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.watchlist-grid > .empty-state { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .watchlist-grid { grid-template-columns: 1fr; }
}

/* ─── Watchlist card: explicit EXPAND/COLLAPSE button ───
   Header is inert (cursor:default, no hover-bg shift); only the
   .wl-toggle-btn changes state. Caret rotates 180° when card .desk-open. */
.desk-persona[data-card-type="watchlist"] .desk-persona-hdr {
  cursor: default;
}
.desk-persona[data-card-type="watchlist"] .desk-persona-hdr:hover {
  background: #1e293b;  /* freeze hover state — no visual cue that header is clickable */
}
.wl-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 9px;
  margin-top: 8px;
  border-radius: 4px;
  border: 1px solid #334155;
  background: #131c30;
  color: #94a3b8;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.wl-toggle-btn:hover {
  color: #8EA2FF;
  border-color: #8EA2FF;
  background: rgba(34, 211, 238, 0.10);
}
.wl-toggle-btn .caret {
  display: inline-block;
  transition: transform .15s;
  font-size: 11px;
  line-height: 1;
}
.desk-persona.desk-open .wl-toggle-btn .caret { transform: rotate(180deg); }

/* ─── Phase 5a watchlist + post-AWS UI cleanup ───
   Rules below were inlined in views/trading_desk.py during Phase 5a
   ship + the 2026-05 UI cleanup pass (needle gauge, Risk Engine
   collapsible legend, equity-curve SVG, factor-impact semantic
   prefix). Migrated here so they actually reach the browser — the
   in-file CSS constant was being silently dropped by .format()
   because the PAGE template no longer carries a {css} placeholder.
*/

/* Risk Engine "How it works" legend (one per watchlist section).
   Centered card with explicit max-width so the body doesn't sprawl
   to the page edge; 2-column grid for factor definitions inside. */
.re-legend{background:var(--bg-card-2);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  max-width:960px;margin:0 auto 16px auto;padding:20px 24px}
.re-legend-head{display:flex;align-items:center;gap:16px;
  cursor:pointer;user-select:none;list-style:none}
.re-legend-head::-webkit-details-marker{display:none}
.re-legend-head-text{flex:1;display:flex;flex-direction:column;gap:2px}
.re-legend-eb{color:var(--muted-2);font-size:var(--fs-11);font-weight:700;
  letter-spacing:0.08em;font-family:'JetBrains Mono',monospace;
  text-transform:uppercase}
.re-legend-title{color:var(--text);font-size:var(--fs-14);font-weight:500}
.re-legend-chev{color:var(--muted);font-size:var(--fs-12);
  transition:transform 0.15s ease;display:inline-block}
.re-legend[open] .re-legend-chev{transform:rotate(180deg)}
.re-legend-body{margin-top:16px;padding-top:16px;
  border-top:1px solid var(--border)}
.re-legend-lede{color:var(--text-2);font-size:var(--fs-13);line-height:1.65;
  margin-bottom:16px}
.re-legend-section-h{font-family:'JetBrains Mono',monospace;font-size:var(--fs-10);
  letter-spacing:0.12em;color:var(--muted-2);font-weight:700;
  text-transform:uppercase;margin-top:8px;margin-bottom:12px;
  padding-bottom:6px;border-bottom:1px solid var(--border)}
.re-legend-factors{display:grid;grid-template-columns:200px 1fr;
  gap:8px 20px;margin-bottom:16px}
.re-legend-factors dt{color:var(--accent);font-weight:500;font-size:var(--fs-13)}
.re-legend-factors dd{color:var(--text-2);font-size:12.5px;line-height:1.55;
  margin:0}
@media (max-width:640px){
  .re-legend-factors{grid-template-columns:1fr;gap:2px 0}
  .re-legend-factors dd{margin-bottom:10px}
}

/* Trade Health needle gauge (semicircular meter, 220x140).
   Value text and labels sit BELOW the SVG as DOM siblings, not inside
   the SVG — prevents overlap with the needle at any % position. */
.needle-gauge{display:block;margin:0 auto;width:220px;max-width:100%;
  height:auto}
.needle-gauge-value{font-family:'JetBrains Mono',monospace;font-size:22px;
  font-weight:700;text-align:center;line-height:1;margin-top:2px}
.needle-gauge-sub{font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:1.5px;color:var(--muted-2);margin-top:6px;
  text-align:center}
.needle-gauge-meta{font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--muted-2);margin-top:4px;text-align:center}

/* Equity curve line chart (responsive SVG) */
.equity-curve-svg{width:100%;height:auto;max-height:240px;display:block}

/* Factor-impact semantic prefix (renderFactorImpact in trading_desk.py).
   JS picks ONE prefix class per call; tail span uses --tail. */
.factor-prefix          {font-weight:700}
.factor-prefix-baseline {color:var(--muted)}
.factor-prefix-tailwind {color:var(--pos)}
.factor-prefix-headwind {color:var(--neg)}
.factor-prefix-neutral  {color:var(--muted)}
.factor-impact-tail     {color:var(--muted-2)}

/* Utility text colors — used by inline color spans on pick + watchlist
   cards (price stop / target rows, muted parenthetical context, etc.).
   Reuse rather than re-inlining color hexes in HTML attributes. */
.text-muted   {color:var(--muted)}
.text-muted-2 {color:var(--muted-2)}
.price-stop   {color:var(--neg)}
.price-target {color:var(--pos)}

/* Persona-card text variants */
.persona-name-sub    {color:var(--muted);font-weight:500}
.persona-added-stamp {font-size:9.5px;color:var(--muted-2);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  margin-top:4px;letter-spacing:.5px}

/* Stats block inside desk-action cards (entry / stop / targets table) */
.desk-action-stats{font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px;line-height:1.7}

/* desk-action-meta spacing variants — extracted from style="margin:..." */
.desk-action-meta--spaced       {margin:10px 0 6px 0}
.desk-action-meta--spaced-tight {margin:10px 0 4px 0}
.desk-action-meta--tight        {margin-bottom:6px}

/* desk-action-dir floated to the card's top-right corner */
.desk-action-dir--corner{float:right;margin-right:6px;margin-top:2px}

/* Bundle chip inline nudge inside persona title */
.bundle-chip--inline{margin-left:8px;vertical-align:middle}

/* Macro context panel — large stat number */
.mc-stat-num{color:var(--text);font-size:var(--fs-20);font-weight:600}

/* Title row used by macro context section header */
.title-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}

/* Empty list-item placeholder ("—") */
.empty-li{color:var(--muted-2)}

/* Inline CLOSE TRADE exit-price prompt (replaces the button on click).
   Sits inline next to where the button was, with a numeric input
   prefilled to current_price + Confirm/Cancel buttons. */
.close-prompt{display:inline-flex;align-items:center;gap:6px}
.close-prompt-lab{font-size:11px;color:var(--muted-2);margin-right:2px}
.close-price-input{width:90px;padding:3px 6px;font-size:11px;
  background:var(--bg);color:var(--text);
  border:1px solid var(--border);border-radius:3px;
  font-family:'JetBrains Mono',ui-monospace,monospace}
.close-price-input:focus{outline:none;border-color:var(--accent)}

/* ─────────────────────────────────────────────────────────────────────────
   Performance section: Returns / R:R toggle + hero title + methodology note
   ─────────────────────────────────────────────────────────────────────── */
.chart-mode-row {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.chart-mode-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.chart-mode-btn:hover {
  color: var(--text-2);
  border-color: var(--muted);
}
.chart-mode-btn.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 700;
}

.chart-hero {
  margin-bottom: 10px;
}
.chart-hero-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.3px;
}
.chart-hero-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.method-note {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.method-note > .method-summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  list-style: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.9px;
  color: var(--muted);
  text-transform: uppercase;
}
.method-note > .method-summary::-webkit-details-marker { display: none; }
.method-summary-l { display: inline-flex; align-items: center; }
.method-icon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: none;
}
.method-caret {
  font-size: 12px;
  color: var(--muted);
  transition: transform 150ms ease;
}
.method-note[open] .method-caret { transform: rotate(180deg); }
.method-body {
  padding-top: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.method-body p { margin: 0 0 10px 0; }
.method-body ul { margin: 6px 0 0 0; padding-left: 18px; }
.method-body li { margin-bottom: 6px; }
.method-body strong { color: var(--text-2); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────
   Per-conviction win-rate breakdown — below the Closed Trades banner grid.
   Tight 3-row inline list, mono numerics, c.muted labels, c.text values.
   ─────────────────────────────────────────────────────────────────────── */
.wl-conv-breakdown {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.wl-conv-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--muted);
  margin-bottom: 6px;
}
.wl-conv-rows {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.wl-conv-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.wl-conv-tier {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--muted);
}
.wl-conv-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.wl-conv-count {
  font-weight: 400;
  color: var(--muted-2);
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────────────────────────────
   Advanced Search panel — sector / region / market_cap / sub_sector.
   Collapsable <details>; matches existing .chip / .filter-row look
   (JetBrains Mono labels, Inter body) so the new affordance reads
   as part of the same filter system, not a foreign component.
   ───────────────────────────────────────────────────────────────── */
.adv-search {
  margin: 8px 0 12px 0;
}
.adv-search-trigger {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
}
.adv-search-trigger::-webkit-details-marker { display: none; }
.adv-search-trigger:hover { color: var(--text-2); }
.adv-search-trigger.adv-active { color: var(--text); }
.adv-search-trigger .adv-trigger-count { color: var(--accent); }
.adv-search-trigger .adv-caret {
  display: inline-block;
  transition: transform 0.18s ease;
}
.adv-search[open] > .adv-search-trigger .adv-caret { transform: rotate(180deg); }

.adv-search-panel {
  margin-top: 6px;
  padding: 12px 14px 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-top: 2px solid var(--accent-soft);
}

.adv-chip-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.adv-chip-group--empty .adv-empty {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 12px;
  color: var(--muted-2);
  letter-spacing: 0;
  line-height: 18px;
}
/* Divider between the "what asset" group (BUNDLE/SECTOR/REGION/MARKET CAP)
   and the "what kind of trade" group (CONVICTION/DIRECTION). */
.adv-group-divider {
  height: 1px;
  background: var(--border-2);
  margin: 16px 0;
}
.adv-chip-group .adv-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--muted);
  text-transform: uppercase;
  min-width: 78px;
}
.adv-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.adv-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border: 1px solid var(--border-2);
  background: var(--bg-card-2);
  color: var(--muted);
  cursor: pointer;
  border-radius: 2px;
  text-transform: uppercase;
}
.adv-chip:hover { color: var(--text-2); border-color: var(--muted-2); }
.adv-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.adv-sub-toggle {
  margin: 2px 0 8px 0;
}
.adv-sub-toggle > .adv-sub-summary {
  list-style: none;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.adv-sub-toggle > .adv-sub-summary::-webkit-details-marker { display: none; }
.adv-sub-toggle > .adv-sub-summary:hover { color: var(--text-2); }
.adv-sub-toggle[open] > .adv-sub-summary .adv-caret { transform: rotate(180deg); }
.adv-sub-toggle .adv-caret { display: inline-block; transition: transform 0.16s ease; }
.adv-sub-body { padding-top: 6px; }

.adv-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-2);
  min-height: 18px;
}
.adv-showing {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--muted-2);
}
.adv-clear {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-2);
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 2px;
}
.adv-clear:hover { border-color: var(--accent); color: var(--accent); }