/* SignalVeritas UI redesign (2026-07-16): shared design system.
   Light theme only (explicit user preference -- no dark-mode block). */

:root {
  --bg: #F5F6FA;
  --surface: #FFFFFF;
  --surface-2: #FBFBFE;
  --border: #E2E4EC;
  --ink: #171B26;
  --ink-muted: #656E82;
  --ink-faint: #9198A9;
  --accent: #A8752E;
  --accent-tint: #F3E7D2;
  --accent-ink: #7A5620;
  --win: #2E9563;
  --win-tint: #E3F3EA;
  --loss: #C8524F;
  --loss-tint: #FBEAE9;
  --warn: #B9852A;
  --warn-tint: #F6EAD4;
  --chip: #EEF0F5;
  --display: "Avenir Next", "Century Gothic", Futura, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 2px rgba(23,27,38,0.04), 0 4px 16px rgba(23,27,38,0.05);
  /* 1800px comfortably fits research.php's widest Breakdowns table (measured
     against real production data) without its own horizontal scrollbar.
     Single source of truth so the header and page body always match widths
     instead of drifting out of sync. */
  --page-max-width: 1800px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sv-wrap { max-width: var(--page-max-width); margin: 0 auto; padding: 0 28px 60px; }
.sv-wrap-wide { max-width: var(--page-max-width); }

/* ---- Shared nav ---- */
.nav { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 0; margin-bottom: 26px; }
.nav-top { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; width: 100%; max-width: var(--page-max-width); margin: 0 auto; padding: 0 28px; }
.wordmark { font-family: var(--display); font-size: 18.5px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); }
.nav-groups { display: flex; gap: 26px; flex-wrap: wrap; }
.nav-group .gl { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.nav-group .links { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-group a { font-size: 13.5px; color: var(--ink-muted); text-decoration: none; padding: 4px 8px; border-radius: 6px; }
.nav-group a:hover { background: var(--surface-2); color: var(--ink); }
.nav-group a.active { background: var(--accent-tint); color: var(--accent-ink); font-weight: 600; }

/* ---- Page header ---- */
.page-head { margin-bottom: 22px; }
.page-head h1 { font-family: var(--display); font-size: 27px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 6px; text-wrap: balance; }
.page-head p { margin: 0; color: var(--ink-muted); font-size: 14.5px; max-width: 74ch; }
.page-head .meta { margin-top: 8px; font-size: 12.5px; color: var(--ink-faint); }

/* ---- Section shell (every content block on every report page uses this) ---- */
.section { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 18px; }
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sec-head h2 { font-family: var(--display); font-size: 17.5px; font-weight: 700; letter-spacing: -0.005em; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.sec-head .why { font-size: 13.5px; color: var(--ink-muted); max-width: 68ch; }
.scope-badge { flex-shrink: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.scope-all { background: var(--chip); color: var(--ink-faint); }
.scope-filtered { background: var(--accent-tint); color: var(--accent-ink); }

/* ---- Cards / badges / pills, general purpose ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.pill { font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; font-family: var(--sans); display: inline-block; }
.pill-blocked, .pill-loss { background: var(--loss-tint); color: var(--loss); }
.pill-win { background: var(--win-tint); color: var(--win); }
.pill-warn { background: var(--warn-tint); color: var(--warn); }
.pill-neutral { background: var(--chip); color: var(--ink-faint); }

/* ---- Glossary tooltip hook (see glossary.js) ---- */
[data-term] { border-bottom: 1px dotted var(--ink-faint); cursor: help; }
.sv-glossary-tip {
  position: absolute; z-index: 50; max-width: 280px; background: var(--ink); color: #fff;
  font-size: 12.5px; line-height: 1.45; padding: 8px 10px; border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2); pointer-events: none;
}

/* ---- Funnel (Gate Analysis) ---- */
.funnel-row { display: flex; align-items: center; gap: 14px; padding: 7px 0; }
.funnel-label { width: 210px; font-size: 13.5px; color: var(--ink-muted); flex-shrink: 0; }
.funnel-track { flex: 1; background: var(--chip); border-radius: 5px; height: 22px; position: relative; overflow: hidden; }
.funnel-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-ink)); border-radius: 5px; display: flex; align-items: center; }
.funnel-fill.win { background: linear-gradient(90deg, var(--win), #1F7A4E); }
.funnel-nums { width: 190px; flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; text-align: right; color: var(--ink-muted); }
.funnel-nums b { color: var(--ink); }
.fail-tag { color: var(--loss); }

/* ---- Lift / before-after bars ---- */
.lift-grid { display: grid; grid-template-columns: 200px 1fr 1fr 90px; gap: 8px 16px; align-items: center; font-size: 13.5px; }
.lift-grid .hd { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.lift-name { color: var(--ink-muted); }
.lift-bar-wrap { display: flex; align-items: center; gap: 8px; }
.lift-bar { flex: 1; height: 10px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.lift-bar b { display: block; height: 100%; border-radius: 3px; }
.lift-pct { font-variant-numeric: tabular-nums; font-weight: 600; width: 46px; text-align: right; }
.lift-delta { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.pos { color: var(--win); } .neg { color: var(--loss); } .flat { color: var(--ink-faint); }

/* ---- Verdict callout ---- */
.verdict-card { display: flex; align-items: center; gap: 18px; padding: 6px 4px; }
.verdict-badge { flex-shrink: 0; width: 84px; height: 84px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.verdict-badge.good { background: var(--win-tint); color: var(--win); }
.verdict-badge.bad { background: var(--loss-tint); color: var(--loss); }
.verdict-badge.unknown { background: var(--chip); color: var(--ink-faint); }
.verdict-text .headline { font-size: 17.5px; font-weight: 600; margin-bottom: 4px; }
.verdict-text .sub { font-size: 13.5px; color: var(--ink-muted); }
.verdict-stats { display: flex; gap: 26px; margin-top: 10px; flex-wrap: wrap; }
.vstat b { display: block; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18.5px; }
.vstat span { font-size: 12px; color: var(--ink-faint); }

/* ---- Comparison cards (universe comparison, exit profile comparison, etc.) ---- */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.compare-card { border: 1px solid var(--border); border-radius: 10px; padding: 13px; }
.compare-card.primary { border-color: var(--accent); background: var(--accent-tint); }
.compare-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.compare-desc { font-size: 12.5px; color: var(--ink-muted); margin-bottom: 10px; min-height: 32px; }
.compare-metric { display: flex; justify-content: space-between; font-size: 13.5px; padding: 4px 0; border-top: 1px solid var(--border); }
.compare-metric b { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- Tabs (replaces stacked raw breakdown tables everywhere) ---- */
.tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tab { font-size: 13.5px; padding: 8px 14px; color: var(--ink-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-left: none; border-right: none; border-top: none; font-family: var(--sans); }
.tab.active { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- Bar-row breakdowns (symbol/pool/session/currency comparisons) ---- */
.bd-row { display: grid; grid-template-columns: 130px 1fr 60px 60px; align-items: center; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.bd-row .name { color: var(--ink-muted); }
.bd-bars { display: flex; gap: 3px; height: 12px; border-radius: 3px; overflow: hidden; }
.bd-bars .a { background: var(--loss); opacity: 0.75; }
.bd-bars .b { background: var(--win); opacity: 0.75; }
.bd-n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-faint); text-align: right; }
.bd-wr { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-muted); margin-bottom: 10px; flex-wrap: wrap; }
.legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; }

/* ---- Single-row mini-bar (win-rate/PF comparisons inline in a table cell) ---- */
.mini-bar { height: 5px; border-radius: 3px; background: var(--chip); overflow: hidden; min-width: 48px; }
.mini-bar b { display: block; height: 100%; background: var(--win); border-radius: 3px; }
.mini-bar.loss b { background: var(--loss); }
.mini-bar.accent b { background: var(--accent); }

/* ---- Trend chart shell (lightweight-charts mounts into this) ---- */
.trend-chart { height: 160px; position: relative; }
.trend-legend { display: flex; gap: 18px; font-size: 12.5px; color: var(--ink-muted); margin-bottom: 8px; flex-wrap: wrap; }

/* ---- Clean table (for genuinely raw/detail lists -- Recent Blocked Trades etc.) ---- */
table.clean { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.clean th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); padding: 6px 10px; border-bottom: 1px solid var(--border); }
table.clean td { padding: 7px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
table.clean tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

/* ================================================================
   Homepage-specific components (index.php)
   ================================================================ */
.topbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
select.ctl, button.ctl {
  font-family: var(--sans); font-size: 14px; padding: 7px 10px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer;
}
button.ctl { display: inline-flex; align-items: center; gap: 6px; }
button.ctl:hover { border-color: var(--accent); }
.live-pill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--win); background: var(--win-tint);
  border-radius: 999px; padding: 6px 12px 6px 10px;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--win); box-shadow: 0 0 0 3px var(--win-tint); animation: sv-pulse 2s infinite; }
@keyframes sv-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

.source-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.source-row .label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.source-chip { font-size: 13px; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 5px; }
.source-chip .sd { width: 5px; height: 5px; border-radius: 50%; background: var(--win); }
.source-chip .sd.bad { background: var(--loss); }
.source-chip .sd.warn { background: var(--warn); }

.ticker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tick { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: 13.5px; display: flex; align-items: baseline; gap: 7px; }
.tick .sym { font-weight: 600; color: var(--ink-muted); }
.tick .px { font-variant-numeric: tabular-nums; font-weight: 700; }
.tick .chg { font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; }
.up { color: var(--win); } .down { color: var(--loss); }

.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 14px; margin-bottom: 20px; }
.toolbar { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tbtn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
.tbtn.active { background: var(--accent-tint); color: var(--accent-ink); border-color: var(--accent); }
.tb-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
.tb-hint { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); }

.pool-line { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--accent); opacity: 0.55; }
.pool-label { position: absolute; left: 10px; font-size: 11px; color: var(--accent-ink); background: var(--accent-tint); padding: 1px 6px; border-radius: 3px; transform: translateY(-100%); font-weight: 600; }

.section-label { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 10px; }
.section-label h2 { font-family: var(--display); font-size: 16.5px; font-weight: 700; letter-spacing: -0.005em; margin: 0; }
.section-label span { font-size: 13px; color: var(--ink-faint); }

.chip-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; align-items: start; }
@media (max-width: 1100px) { .chip-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .chip-row { grid-template-columns: repeat(2, 1fr); } }

.chip {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip .k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.chip .v { font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.chip .ctx { font-size: 12.5px; color: var(--ink-muted); }
.chip .go { font-size: 12px; color: var(--accent-ink); font-weight: 600; margin-top: auto; padding-top: 4px; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 20px; }
.spark i { flex: 1; background: var(--accent); opacity: 0.55; border-radius: 1px; }
.barfill { height: 5px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.barfill b { display: block; height: 100%; background: var(--win); border-radius: 3px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 5px; }

/* Expandable chip: collapsed by default, full data on click -- nothing is deleted, just tucked away */
details.chip { padding: 0; }
details.chip summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; }
details.chip summary::-webkit-details-marker { display: none; }
details.chip summary::marker { content: ""; }
.expand-hint { display: inline-flex; align-items: center; gap: 4px; }
.expand-hint .arrow { display: inline-block; transition: transform .15s; font-size: 9px; }
details.chip[open] .expand-hint .arrow { transform: rotate(180deg); }
details.chip[open] .expand-hint .txt::after { content: "hide"; }
details.chip:not([open]) .expand-hint .txt::after { content: "show full breakdown"; }
.chip-expand-panel { padding: 0 14px 14px; margin-top: -2px; }
.chip-expand-panel .erow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.chip-expand-panel .erow:first-child { border-top: 1px solid var(--border); margin-top: 4px; }
.chip-expand-panel .erow .elabel { color: var(--ink-muted); }
.chip-expand-panel .erow .eval { font-variant-numeric: tabular-nums; font-weight: 600; flex-shrink: 0; }
.chip-expand-panel .erow .ebar { flex: 1; height: 4px; border-radius: 2px; background: var(--chip); overflow: hidden; margin: 0 8px; }
.chip-expand-panel .erow .ebar b { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

.foot-note { font-size: 13px; color: var(--ink-faint); margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--border); }
.foot-note b { color: var(--ink-muted); }

/* Feed-down banner (2026-07-24): an explicit, hard-to-miss overlay ON the
   chart itself -- not just a small toolbar badge -- for exactly the
   failure mode that went undetected for 4.5 days in production before
   (no cron -> stale candles, but the old feed badge just kept showing the
   last-known source forever). #chartWrap is position:relative (see
   index.php's inline style), so this anchors directly over the chart. */
#feedDownBanner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 20; display: flex; align-items: center; gap: 8px;
  background: var(--loss-tint); color: var(--loss); border: 1px solid var(--loss);
  border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow); pointer-events: none;
}
#feedDownBanner::before { content: "\26A0"; font-size: 15px; }