/* MacroPulse — Bloomberg-terminal density, dark. */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0a0a14; --bg2: #000; --panel: #0d1020; --panel-hd: #0f1a2e;
  --fg: #e0e0e0; --fg2: #a0a0a0; --fg3: #6a6a7a;
  --accent: #00d4ff; --green: #00ff88; --red: #ff4444; --amber: #ffaa00;
  --finviz-amber: #F3C736; --border: #2a2a4a;
  --font: 'Consolas', 'Monaco', 'Courier New', monospace;
}
html, body { background: var(--bg); color: var(--fg); font-family: var(--font);
  font-size: 12px; line-height: 1.4; }
body { min-width: 1280px; }
canvas { display: block; }

/* ---------------------------------------------------------------- header */
#composite-spark { width: 150px; height: 26px; flex: none; }
#topbar { display: flex; align-items: center; gap: 10px; padding: 4px 10px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50; height: 34px; }
.brand { font-size: 14px; font-weight: bold; letter-spacing: 1px; white-space: nowrap; }
.brand span { color: var(--accent); }
.regime-chip { font-size: 12px; font-weight: bold; padding: 2px 10px; border-radius: 2px;
  color: #fff; background: #414554; white-space: nowrap; letter-spacing: 0.5px; }
.diffusion-mini { width: 110px; height: 8px; border: 1px solid var(--border);
  display: flex; overflow: hidden; }
.diffusion-mini div { height: 100%; }
#tabnav { display: flex; gap: 3px; margin-left: 12px; }
/* Nav reads as buttons: every tab sits on a raised chip with a visible border,
   text at full --fg (not the dimmer --fg2) so an inactive tab still looks
   clickable. Bold is reserved for the ACTIVE tab — if every label is bold, the
   active state has nothing left to signal with. Same treatment as .range-pill,
   which is the established "this is a control" language on the dashboard. */
.tabbtn { background: #1b2138; border: 1px solid #3d4468; color: var(--fg);
  font-family: var(--font); font-size: 10px; letter-spacing: 1px; padding: 3px 10px;
  cursor: pointer; text-transform: uppercase; border-radius: 2px; }
.tabbtn:hover { color: var(--accent); border-color: var(--accent); background: #232c4a; }
.tabbtn.active { color: #0a0a14; border-color: var(--accent); background: var(--accent);
  font-weight: bold; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.asof { color: var(--fg2); font-size: 10px; white-space: nowrap; }
.warn-chip { color: var(--amber); font-size: 10px; cursor: help; }
#refresh-btn { background: none; border: 1px solid var(--border); color: var(--fg2);
  font-size: 12px; cursor: pointer; padding: 1px 7px; }
#refresh-btn:hover { color: var(--accent); border-color: var(--accent); }
#refresh-btn.spinning { color: var(--amber); }

/* ---------------------------------------------------------------- layout */
main { padding: 6px; }
.tab { display: none; }
.tab.active { display: block; }
.panel { background: var(--panel); border: 1px solid var(--border); }
.panel-hd { font-size: 10px; letter-spacing: 1px; color: var(--fg2);
  background: var(--panel-hd); padding: 2px 6px; text-transform: uppercase;
  border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
.hd-note { color: var(--fg3); letter-spacing: 0; text-transform: none; float: right;
  margin-left: 14px; } /* gap when a narrow panel forces the note against the title */
.loading { color: var(--fg3); padding: 20px; }

.anchor-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.anchor-panel { background: var(--panel); border: 1px solid var(--border); }
.anchor-hd { display: flex; align-items: baseline; gap: 8px; padding: 2px 6px;
  border-bottom: 1px solid var(--border); }
.anchor-hd .code { font-size: 11px; font-weight: bold; color: var(--accent); }
.anchor-hd .last { font-size: 14px; font-weight: bold; font-variant-numeric: tabular-nums; }
.anchor-hd .chg { font-size: 11px; font-variant-numeric: tabular-nums; }
.anchor-hd .src { margin-left: auto; font-size: 9px; color: var(--fg3); }
.anchor-panel canvas { width: 100%; height: 92px; }

.strip-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: stretch; }
.strip { background: var(--panel); border: 1px solid var(--border); padding: 3px 8px;
  display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.strip .lbl { font-size: 9px; color: var(--fg2); letter-spacing: 1px; }
.strip .val { font-size: 11px; font-weight: bold; font-variant-numeric: tabular-nums; }
.split-bar { width: 150px; height: 7px; display: flex; border: 1px solid var(--border); overflow: hidden; }
.split-bar div { height: 100%; }
.pillar-strip { display: flex; gap: 1px; flex: 1; }
.pillar-cell { flex: 1; text-align: center; font-size: 9px; font-weight: bold;
  color: #fff; padding: 3px 2px; letter-spacing: 0.5px; cursor: default;
  overflow: hidden; text-overflow: ellipsis; }

.main-row { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 6px; margin-bottom: 6px; }
.treemap-panel canvas { width: 100%; height: 470px; cursor: pointer; }
.side-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* movers: DOM signed bars from center */
#movers { padding: 3px 6px; }
.mover-row { display: grid; grid-template-columns: 62px 1fr 52px; gap: 6px;
  align-items: center; height: 17px; cursor: pointer; }
.mover-row:hover { background: var(--panel-hd); }
.mover-row .code { font-size: 10px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
.mover-track { position: relative; height: 9px; }
.mover-track::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px;
  width: 1px; background: var(--border); }
.mover-bar { position: absolute; top: 0; height: 100%; }
.mover-row .mval { font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }

#divergences { padding: 3px 6px; }
.div-row { display: flex; gap: 6px; align-items: baseline; padding: 1px 0; cursor: help; }
.div-dots { font-size: 10px; letter-spacing: 1px; width: 26px; }
.div-name { font-size: 11px; }
.div-since { margin-left: auto; font-size: 9px; color: var(--fg3); font-variant-numeric: tabular-nums; }
.div-none { color: var(--fg3); font-size: 10px; padding: 2px 0; }
.div-detail { font-size: 9px; color: var(--fg2); padding: 0 0 2px 32px; }

.bottom-row { display: grid; grid-template-columns: auto auto 1fr; gap: 6px; align-items: start; }

/* ---------------------------------------------------------------- tables */
table { border-collapse: collapse; width: auto; }
th, td { padding: 2px 6px; white-space: nowrap; font-size: 11px; text-align: left; }
th { font-size: 10px; color: var(--fg2); text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--panel-hd); cursor: pointer; }
.pos { color: var(--green); } .neg { color: var(--red); } .flat { color: var(--fg2); }
.stale-mark { color: var(--amber); cursor: help; }
.z-chip { display: inline-block; min-width: 44px; text-align: right; padding: 0 4px;
  color: #fff; font-variant-numeric: tabular-nums; border-radius: 1px; }

#flips { padding: 4px 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.flip-chip { font-size: 10px; padding: 1px 6px; border: 1px solid var(--border);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.flip-chip .code { font-weight: bold; }

/* ---------------------------------------------------------------- drill modal */
#drill-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 100;
  display: flex; align-items: center; justify-content: center; }
#drill-modal { background: var(--panel); border: 1px solid var(--accent); width: 1060px;
  max-width: 95vw; max-height: 92vh; overflow: auto; padding: 8px; }
#drill-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 6px; }
#drill-head .code { font-size: 16px; font-weight: bold; color: var(--accent); }
#drill-head .name { color: var(--fg2); }
#drill-head .last { font-size: 16px; font-weight: bold; font-variant-numeric: tabular-nums; }
#drill-head .close { margin-left: auto; cursor: pointer; color: var(--fg2); font-size: 14px;
  border: 1px solid var(--border); padding: 0 8px; }
#drill-head .close:hover { color: var(--red); }
#drill-chart { width: 100%; height: 380px; }
#drill-stats { display: flex; gap: 24px; padding: 8px 2px; flex-wrap: wrap; }
#drill-stats table td:first-child { color: var(--fg2); font-size: 10px; }
#drill-prov { color: var(--fg3); font-size: 9px; padding: 4px 2px; border-top: 1px solid var(--border); }

/* ---------------------------------------------------------------- tooltip */
#tooltip { position: fixed; z-index: 90; background: #000; border: 1px solid var(--accent);
  padding: 6px 8px; pointer-events: none; max-width: 320px; }
#tooltip .tt-hd { font-size: 11px; font-weight: bold; color: var(--accent); }
#tooltip .tt-body { font-size: 10px; color: var(--fg); font-variant-numeric: tabular-nums; }
#tooltip .tt-note { font-size: 9px; color: var(--fg2); }
#tooltip canvas { margin-top: 3px; }

/* ---------------------------------------------------------------- tab bodies */
.tab-body { padding: 2px 0; }
.tab-grid { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
input, select { background: var(--bg2); color: var(--fg); border: 1px solid var(--border);
  font-family: var(--font); font-size: 11px; padding: 2px 5px; }
input:focus, select:focus { border-color: var(--accent); outline: none; }

/* ---------------------------------------------------------------- drill controls */
#drill-controls { display: flex; gap: 16px; font-size: 10px; color: var(--fg2);
  padding: 0 2px 5px; align-items: center; }
#drill-controls label { cursor: pointer; user-select: none; }
#drill-controls label.disabled { color: var(--fg3); cursor: not-allowed; }
#drill-controls input[type=checkbox] { accent-color: var(--accent); vertical-align: -1px; }

/* ---------------------------------------------------------------- news ticker */
#news-ticker { position: fixed; bottom: 0; left: 0; right: 0; height: 22px;
  background: var(--bg2); border-top: 1px solid var(--border); overflow: hidden; z-index: 60; }
.ticker-track { display: inline-flex; gap: 42px; white-space: nowrap; align-items: center;
  height: 100%; will-change: transform; }
.ticker-item { font-size: 10px; color: var(--fg2); }
.ticker-item a { color: var(--fg); text-decoration: none; }
.ticker-item a:hover { color: var(--accent); }
.ticker-src { color: var(--accent); font-size: 9px; letter-spacing: 0.5px; }
.ticker-age { color: var(--fg3); font-size: 9px; }
body.has-ticker main { padding-bottom: 28px; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.range-pills { display: inline-flex; gap: 2px; margin-right: 10px; }
.range-pill { background: #1b2138; border: 1px solid #3d4468; color: var(--fg);
  font-family: var(--font); font-size: 9px; padding: 1px 7px; cursor: pointer;
  letter-spacing: 0.5px; border-radius: 2px; }
.range-pill:hover { color: var(--accent); border-color: var(--accent); }
.range-pill.active { color: #0a0a14; border-color: var(--accent); background: var(--accent);
  font-weight: bold; }

/* ---------------------------------------------------------------- two-tier nav */
#subnav { position: sticky; top: 34px; z-index: 49; background: var(--bg2);
  border-bottom: 1px solid var(--border); padding: 2px 10px; display: flex; gap: 3px; }
/* Subtabs use the same language one step down in scale, so the two rows read as
   a hierarchy rather than two competing button bars. */
#subnav .tabbtn { font-size: 9px; padding: 2px 9px; letter-spacing: 0.8px; }
#subnav .tabbtn.active { background: var(--accent); color: #0a0a14; }

/* ---------------------------------------------------------------- chart kit */
/* Shared big-chart controls row (Charts.mount) — same pill/checkbox look as the drill
   modal; when the kit mounts INTO #drill-controls the id rules above win on padding. */
.chart-kit-controls { display: flex; gap: 16px; font-size: 10px; color: var(--fg2);
  padding: 3px 6px 5px; align-items: center; }
.chart-kit-controls label { cursor: pointer; user-select: none; }
.chart-kit-controls label.disabled { color: var(--fg3); cursor: not-allowed; }
.chart-kit-controls input[type=checkbox] { accent-color: var(--accent); vertical-align: -1px; }
.chart-kit-label { padding: 2px 6px; font-size: 9px; color: var(--fg3); }
/* smoothing dropdown sits with the range pills; DAILY = raw, nMA = trailing avg */
.ck-smooth select { font-size: 9px; padding: 0 2px; height: 15px; vertical-align: -1px;
  letter-spacing: 0.5px; }
/* VALUE / %CHG reuses the range-pill language — same control family, one step along */
.ck-mode { margin-right: 0; }
/* Inert pill styling. The normalisation pill no longer uses it — it relabels itself
   (%CHG / ΔBP / Δσ) instead of greying out, because a control that is dead on nine
   charts out of ten reads as broken however well it explains itself. Kept for genuine
   dead ends (log scale on non-positive data). */
.range-pill:disabled, .range-pill.disabled, .range-pill.blocked {
  background: #14172a; border-color: #23263c; color: #4a4a5a;
  cursor: not-allowed; font-weight: normal; opacity: 0.55; }
.range-pill:disabled:hover, .range-pill.disabled:hover, .range-pill.blocked:hover {
  color: #4a4a5a; border-color: #23263c; background: #14172a; }
/* the pill carries a unit label (ΔBP, Δσ, Δ/%) so its width must not jump per chart */
.ck-mode .range-pill[data-mode="norm"] { min-width: 46px; }

/* ---------- compare kit: + ADD SERIES picker (cfg.compare) ---------- */
.ck-add-wrap { position: relative; margin-left: auto; }
.ck-add { background: #1b2138; border: 1px solid #3d4468; color: var(--fg);
  font-family: var(--font); font-size: 9px; letter-spacing: 0.5px; padding: 1px 7px;
  cursor: pointer; border-radius: 2px; white-space: nowrap; }
.ck-add:hover { color: var(--accent); border-color: var(--accent); }
/* 353 catalog entries: the filter is the primary control, the list owns its own scroll */
.ck-picker { position: absolute; top: 100%; right: 0; z-index: 120; width: 430px;
  background: var(--bg2); border: 1px solid var(--accent); padding: 3px; }
.ck-pick-filter { width: 100%; font-size: 11px; padding: 2px 4px; }
.ck-pick-list { max-height: 320px; overflow-y: auto; margin-top: 3px; }
.ck-pick-grp { font-size: 9px; font-weight: bold; letter-spacing: 1px; color: var(--accent);
  background: var(--panel-hd); padding: 1px 4px; position: sticky; top: 0; }
.ck-pick-tier { font-size: 9px; color: var(--fg3); padding: 1px 4px 0 8px; letter-spacing: 0.5px; }
.ck-pick-row { display: flex; gap: 6px; align-items: baseline; padding: 0 4px 0 8px;
  cursor: pointer; white-space: nowrap; }
.ck-pick-row:hover { background: var(--panel-hd); }
.ck-pick-code { font-size: 10px; font-weight: bold; color: var(--fg); min-width: 62px;
  overflow: hidden; text-overflow: ellipsis; }
.ck-pick-name { font-size: 10px; color: var(--fg2); overflow: hidden; text-overflow: ellipsis; }
.ck-pick-freq { margin-left: auto; font-size: 9px; color: var(--fg3); }
.ck-pick-empty { font-size: 10px; color: var(--fg3); padding: 3px 4px; }

/* ---------- compare kit: per-series rows under the chart ---------- */
.ck-rows { position: relative; padding: 2px 2px 0; }
.ck-row { display: flex; align-items: center; gap: 6px; height: 16px; white-space: nowrap; }
.ck-row:hover { background: var(--panel-hd); }
.ck-sw { width: 10px; height: 10px; border: 1px solid var(--border); padding: 0;
  cursor: pointer; flex: none; }
.ck-row .ck-code { font-size: 10px; font-weight: bold; color: var(--fg); min-width: 58px; }
.ck-row .ck-nm { font-size: 10px; color: var(--fg2); overflow: hidden;
  text-overflow: ellipsis; max-width: 420px; }
/* four-way axis selector: L1 outer-left, L2 inboard-left, R1 outer-right, R2 inboard */
.ck-ax { display: inline-flex; gap: 1px; margin-left: auto; flex: none; }
.ck-ax button { background: #1b2138; border: 1px solid #3d4468; color: var(--fg2);
  font-family: var(--font); font-size: 9px; line-height: 1; padding: 1px 4px; cursor: pointer;
  min-width: 20px; }
.ck-ax button:hover { color: var(--accent); border-color: var(--accent); }
.ck-ax button.on { background: var(--accent); border-color: var(--accent); color: #0a0a14;
  font-weight: bold; }
/* %CHG: one shared % scale, so the selector is inert — greyed but still readable, with
   the stored pick dimly marked so the user sees what returns in VALUE mode */
.ck-ax.locked { cursor: help; }
.ck-ax.locked button { background: #14172a; border-color: #23263c; color: #4a4a5a;
  cursor: help; }
.ck-ax.locked button:hover { color: #4a4a5a; border-color: #23263c; }
.ck-ax.locked button.on { background: #2a3a4a; border-color: #3a4a5e; color: #7a8a9a; }
/* a series that is not on the chart (loading / failed / cannot be indexed) reads dim */
.ck-row.ck-off .ck-code, .ck-row.ck-off .ck-nm { color: var(--fg3); }
.ck-row .ck-v { font-size: 10px; font-variant-numeric: tabular-nums; text-align: right;
  min-width: 92px; flex: none; }   /* fits "-1,234,567.89" at 10px */
.ck-row .ck-d { font-size: 9px; color: var(--fg3); font-variant-numeric: tabular-nums;
  min-width: 66px; flex: none; }   /* fits "2026-08-14" */
.ck-row .ck-dim { color: var(--fg3); }
/* why a series is not on the chart (server pct_reason / no base / no data): never let a
   long reason push the row apart — clamp it and keep the full text on hover */
.ck-why { font-size: 10px; text-align: right; flex: 0 1 auto; min-width: 0; max-width: 360px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
/* negative %CHG base: the reading is real but its sign inverts — never show it bare */
.ck-warn { color: var(--amber); font-size: 10px; cursor: help; flex: none; }
.ck-row .ck-err, .ck-pick-empty.ck-err { color: var(--red); }
.ck-rm { background: none; border: none; color: var(--fg3); font-family: var(--font);
  font-size: 10px; cursor: pointer; padding: 0 2px; width: 16px; text-align: center; flex: none; }
button.ck-rm:hover { color: var(--red); }
.ck-pal { position: absolute; z-index: 120; background: var(--bg2);
  border: 1px solid var(--accent); padding: 2px; display: flex; gap: 2px; }
.ck-pal-c { width: 12px; height: 12px; border: 1px solid var(--border); padding: 0; cursor: pointer; }
.ck-pal-c:hover { border-color: #fff; }

/* ------------------------------------------- markets stock hover card (append-only) */
/* finviz-style rich hover for STOCKS treemap tiles — built by static/js/tabs/markets.js.
   z-index 95: above #tooltip (90) and panels, below the drill modal (100). */
#mkt-stockcard { position: fixed; z-index: 95; display: none; pointer-events: none;
  background: #000; border: 1px solid var(--accent); min-width: 252px;
  font-variant-numeric: tabular-nums; }
#mkt-stockcard .sc-sector { background: var(--panel-hd); color: var(--accent);
  font-size: 10px; font-weight: bold; letter-spacing: 1px; padding: 2px 8px; }
/* hero band: background = tile heat (inline), all text white by spec */
#mkt-stockcard .sc-hero { padding: 4px 8px 3px; color: #fff; }
#mkt-stockcard .sc-hero-row { display: flex; align-items: center; gap: 8px;
  white-space: nowrap; }
#mkt-stockcard .sc-tkr { font-size: 15px; font-weight: bold; }
#mkt-stockcard .sc-spark-hero { width: 90px; height: 26px; flex: 0 0 90px; }
#mkt-stockcard .sc-px { margin-left: auto; font-size: 12px; font-weight: bold; }
#mkt-stockcard .sc-chg { font-size: 12px; font-weight: bold; }
#mkt-stockcard .sc-name { font-size: 9px; color: rgba(255,255,255,0.78); padding-top: 1px;
  max-width: 236px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* peer rows: ticker | 70x20 spark | price | %chg (sign classes color the chg) */
#mkt-stockcard .sc-peers { width: auto; border-collapse: collapse; margin: 2px 4px; }
#mkt-stockcard .sc-peers td { padding: 1px 4px; font-size: 10px; white-space: nowrap; }
#mkt-stockcard .sc-spark-peer { width: 70px; height: 20px; display: block; }
#mkt-stockcard .sc-peer-px { min-width: 62px; }  /* fits "9,999.99" */
#mkt-stockcard .sc-peer-chg { min-width: 52px; } /* fits "-99.99%" */
#mkt-stockcard .sc-foot { font-size: 9px; color: var(--fg3); padding: 3px 8px;
  border-top: 1px solid var(--border); max-width: 252px; white-space: normal; }

/* ---------- NEWS tab (static/js/tabs/news.js) ---------- */
.news-row td { white-space: nowrap; padding: 1px 6px; }
.news-row a { color: var(--fg); text-decoration: none; }
.news-row a:hover { color: var(--accent); text-decoration: underline; }
.news-hl { max-width: 640px; overflow: hidden; text-overflow: ellipsis; } /* cap long headlines; full title in tooltip */
.news-time { color: var(--fg2); font-variant-numeric: tabular-nums; }
.news-dom { color: var(--fg3); }
.news-tag { font-size: 9px; font-weight: bold; letter-spacing: .5px; padding: 0 4px; border: 1px solid; border-radius: 2px; }
.news-day { color: var(--fg3); font-size: 9px; letter-spacing: 1px; padding: 6px 6px 2px; }