/* Scoped chart widget chrome for use inside site _Layout (Puppeteer / embed). */

.chart-page-wrap {
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.chart-frame {
  --font-body: 14px;
  --font-label: 12px;
  --font-caption: 11px;
  --font-tertiary: 10px;

  --bg: #080808;
  --surface: #111111;
  --surface-raised: #161616;
  --border: #242424;
  --text: #e4e4e7;
  --text-dim: #6e7681;
  --text-label: #99aacc;
  --green: #33dd55;
  --red: #ff5555;
  --orange: #ffa033;
  --blue: #5599ff;
  --cyan: #22d4f0;
  --magenta: #ff55ff;
  --yellow: #ffe033;
  --label: #99aacc;

  --chart-grid: rgba(255, 255, 255, 0.04);
  --chart-grid-dark: #111;
  --chart-tick: #6e7681;

  width: 100%;
  max-width: 540px;
  min-height: 304px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  font-size: var(--font-body);
  color: var(--text);
}

.chart-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.chart-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  min-height: 40px;
}

.chart-panel-title {
  font-size: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-label);
}

.chart-panel-subtitle {
  font-size: var(--font-caption);
  color: var(--text-dim);
  margin-top: 2px;
}

.chart-frame .badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  white-space: nowrap;
}

.chart-frame .badge-info {
  background: rgba(68, 136, 255, 0.15);
  color: #4488ff;
  border: 1px solid rgba(68, 136, 255, 0.3);
}

.chart-frame .badge-watch {
  background: rgba(255, 140, 0, 0.15);
  color: #ff8c00;
  border: 1px solid rgba(255, 140, 0, 0.3);
}

.chart-frame .badge-warning {
  background: rgba(255, 215, 0, 0.15);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.chart-frame .badge-bullish {
  background: rgba(0, 204, 0, 0.15);
  color: #00cc00;
  border: 1px solid rgba(0, 204, 0, 0.3);
}

.chart-frame .badge-bearish {
  background: rgba(255, 51, 51, 0.15);
  color: #ff3333;
  border: 1px solid rgba(255, 51, 51, 0.3);
}

.chart-frame .badge-neutral {
  background: rgba(153, 170, 204, 0.15);
  color: #99aacc;
  border: 1px solid rgba(153, 170, 204, 0.3);
}

/* Don't use site.css .chart-container (surface-raised); it paints a grey slab over signal-tinted cards. */
.chart-frame .chart-container {
  position: relative;
  width: 100%;
  flex: 1;
  padding: 16px;
  background: transparent;
  border: none;
  border-radius: 0;
}

.chart-frame .chart-container img {
  width: 100%;
  height: auto;
  display: block;
}

.chart-frame .chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.chart-frame .kpi-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  /* Match .chart-panel-header horizontal rhythm so KPIs line up with title row */
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--border);
}

.chart-frame .kpi-tile {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.chart-frame .kpi-label {
  font-size: var(--font-caption);
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
  width: 100%;
  text-align: right;
}

.chart-frame .kpi-value {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text);
  width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.chart-frame .kpi-value.up {
  color: var(--green);
}

.chart-frame .kpi-value.down {
  color: var(--red);
}

.chart-frame .legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 16px 12px;
}

.chart-frame .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-caption);
  color: var(--text-label);
}

.chart-frame .legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* Chart index (full-width inside main) */
.charts-index {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--s-4, 1rem);
}

.charts-index h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--accent, #ffa033);
}

.charts-index h2 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-mute, #6e7681);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.charts-index table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.charts-index th,
.charts-index td {
  text-align: left;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.charts-index th {
  color: var(--text-mid, #99aacc);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

.charts-index a {
  color: var(--accent, #5599ff);
  text-decoration: none;
}

.charts-index a:hover {
  color: var(--accent, #ffa033);
  text-decoration: underline;
}

.charts-index .idx-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
}

.charts-index .idx-badge-scott {
  background: rgba(85, 153, 255, 0.15);
  color: #5599ff;
  border: 1px solid rgba(85, 153, 255, 0.3);
}

.charts-index .idx-badge-chartjs {
  background: rgba(51, 221, 85, 0.15);
  color: #33dd55;
  border: 1px solid rgba(51, 221, 85, 0.3);
}

.charts-index .count {
  font-size: 0.75rem;
  color: var(--text-mute, #6e7681);
}

/* ─── Shared tab chrome ─────────────────────────────────────────────────────
   All CSS-only tab panels share the same structural pattern:
   hidden radios, a bar of labels, and sibling-combinator panel show/hide.
   ────────────────────────────────────────────────────────────────────────── */

/* Base bar + label styles shared by all tab variants */
.vf-bar, .vr-bar, .vol-mbar, .vol-epbar,
.bump-tab-bar, .kr-bar, .quad-tab-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border, #222);
}

.vf-bar label, .vr-bar label, .vol-mbar label, .vol-epbar label,
.bump-tab-bar label, .kr-bar label, .quad-tab-bar label {
  padding: 6px 14px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  color: var(--muted, #888);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
}

.vf-bar label:hover, .vr-bar label:hover, .vol-mbar label:hover, .vol-epbar label:hover,
.bump-tab-bar label:hover, .kr-bar label:hover, .quad-tab-bar label:hover { color: var(--fg, #eee); }

/* Hide all radio inputs */
.vf-tabs input[type="radio"], .vr-tabs input[type="radio"],
.vol-tabs input[type="radio"], .bump-tabs input[type="radio"],
.kr-tabs input[type="radio"], .quad-tabs input[type="radio"] { display: none; }

/* Hide all panels by default */
.vf-panels .vf-panel { display: none; }
.vr-panels .vr-panel { display: none; }
.vol-mp { display: none; }
.vol-ep { display: none; }
.bump-panels .bump-panel { display: none; }
.kr-panels .kr-panel { display: none; }
.quad-panels .quad-panel { display: none; }

/* ── VIX Family tabs ── */
#vf-vix:checked  ~ .vf-bar label[for="vf-vix"],
#vf-vxn:checked  ~ .vf-bar label[for="vf-vxn"],
#vf-vxd:checked  ~ .vf-bar label[for="vf-vxd"],
#vf-vvix:checked ~ .vf-bar label[for="vf-vvix"] { color: var(--fg, #eee); border-bottom-color: var(--accent, #5b8dee); }

#vf-vix:checked  ~ .vf-panels .vf-panel-vix,
#vf-vxn:checked  ~ .vf-panels .vf-panel-vxn,
#vf-vxd:checked  ~ .vf-panels .vf-panel-vxd,
#vf-vvix:checked ~ .vf-panels .vf-panel-vvix { display: block; }

/* ── Vol Ratios tabs ── */
#vr-ivhv:checked ~ .vr-bar label[for="vr-ivhv"],
#vr-skew:checked ~ .vr-bar label[for="vr-skew"],
#vr-disp:checked ~ .vr-bar label[for="vr-disp"] { color: var(--fg, #eee); border-bottom-color: var(--accent, #5b8dee); }

#vr-ivhv:checked ~ .vr-panels .vr-panel-ivhv,
#vr-skew:checked ~ .vr-panels .vr-panel-skew,
#vr-disp:checked ~ .vr-panels .vr-panel-disp { display: block; }

/* ── Options Chain metric tabs ── */
.oc-tabs input[type="radio"] { display: none; }
.oc-mp { display: none; }

#oc-m-oi:checked  ~ .oc-mbar label[for="oc-m-oi"],
#oc-m-gex:checked ~ .oc-mbar label[for="oc-m-gex"],
#oc-m-cex:checked ~ .oc-mbar label[for="oc-m-cex"],
#oc-m-dex:checked ~ .oc-mbar label[for="oc-m-dex"],
#oc-m-vex:checked ~ .oc-mbar label[for="oc-m-vex"],
#oc-m-vol:checked ~ .oc-mbar label[for="oc-m-vol"] {
  color: var(--fg, #eee);
  border-bottom-color: var(--accent, #5b8dee);
}

#oc-m-oi:checked  ~ .oc-panels .oc-mp-oi,
#oc-m-gex:checked ~ .oc-panels .oc-mp-gex,
#oc-m-cex:checked ~ .oc-panels .oc-mp-cex,
#oc-m-dex:checked ~ .oc-panels .oc-mp-dex,
#oc-m-vex:checked ~ .oc-panels .oc-mp-vex,
#oc-m-vol:checked ~ .oc-panels .oc-mp-vol { display: block; }

/* ── Dealer exposure tabs (gamma / vanna / charm) ── */
#de-gamma:checked ~ .oc-mbar label[for="de-gamma"],
#de-vanna:checked ~ .oc-mbar label[for="de-vanna"],
#de-charm:checked ~ .oc-mbar label[for="de-charm"],
#de-combined:checked ~ .oc-mbar label[for="de-combined"] {
  color: var(--fg, #eee);
  border-bottom-color: var(--accent, #5b8dee);
}

#de-gamma:checked ~ .oc-panels .oc-mp-gamma,
#de-vanna:checked ~ .oc-panels .oc-mp-vanna,
#de-charm:checked ~ .oc-panels .oc-mp-charm,
#de-combined:checked ~ .oc-panels .oc-mp-combined { display: block; }

/* ── Dealer flow tabs (gamma / vanna / charm / combined) ── */
#df-gamma:checked ~ .oc-mbar label[for="df-gamma"],
#df-vanna:checked ~ .oc-mbar label[for="df-vanna"],
#df-charm:checked ~ .oc-mbar label[for="df-charm"],
#df-combined:checked ~ .oc-mbar label[for="df-combined"] {
  color: var(--fg, #eee);
  border-bottom-color: var(--accent, #5b8dee);
}

#df-gamma:checked ~ .oc-panels .oc-mp-gamma,
#df-vanna:checked ~ .oc-panels .oc-mp-vanna,
#df-charm:checked ~ .oc-panels .oc-mp-charm,
#df-combined:checked ~ .oc-panels .oc-mp-combined { display: block; }

/* ── Options Levels tabs (metric + expiry) ── */
#vol-m-oi:checked  ~ .vol-mps .vol-mp-oi  { display: block; }
#vol-m-gex:checked ~ .vol-mps .vol-mp-gex { display: block; }
#vol-m-cex:checked ~ .vol-mps .vol-mp-cex { display: block; }
#vol-m-dex:checked ~ .vol-mps .vol-mp-dex { display: block; }

#vol-m-oi:checked  ~ .vol-mbar label[for="vol-m-oi"],
#vol-m-gex:checked ~ .vol-mbar label[for="vol-m-gex"],
#vol-m-cex:checked ~ .vol-mbar label[for="vol-m-cex"],
#vol-m-dex:checked ~ .vol-mbar label[for="vol-m-dex"] { color: var(--fg, #eee); border-bottom-color: var(--accent, #5b8dee); }

#vol-e-oi-d:checked  ~ .vol-eps .vol-ep-d,
#vol-e-gex-d:checked ~ .vol-eps .vol-ep-d,
#vol-e-cex-d:checked ~ .vol-eps .vol-ep-d,
#vol-e-dex-d:checked ~ .vol-eps .vol-ep-d { display: block; }

#vol-e-oi-w:checked  ~ .vol-eps .vol-ep-w,
#vol-e-gex-w:checked ~ .vol-eps .vol-ep-w,
#vol-e-cex-w:checked ~ .vol-eps .vol-ep-w,
#vol-e-dex-w:checked ~ .vol-eps .vol-ep-w { display: block; }

#vol-e-oi-m:checked  ~ .vol-eps .vol-ep-m,
#vol-e-gex-m:checked ~ .vol-eps .vol-ep-m,
#vol-e-cex-m:checked ~ .vol-eps .vol-ep-m,
#vol-e-dex-m:checked ~ .vol-eps .vol-ep-m { display: block; }

#vol-e-oi-d:checked  ~ .vol-epbar label[for="vol-e-oi-d"],
#vol-e-gex-d:checked ~ .vol-epbar label[for="vol-e-gex-d"],
#vol-e-cex-d:checked ~ .vol-epbar label[for="vol-e-cex-d"],
#vol-e-dex-d:checked ~ .vol-epbar label[for="vol-e-dex-d"] { color: var(--fg, #eee); border-bottom-color: var(--accent, #5b8dee); }

#vol-e-oi-w:checked  ~ .vol-epbar label[for="vol-e-oi-w"],
#vol-e-gex-w:checked ~ .vol-epbar label[for="vol-e-gex-w"],
#vol-e-cex-w:checked ~ .vol-epbar label[for="vol-e-cex-w"],
#vol-e-dex-w:checked ~ .vol-epbar label[for="vol-e-dex-w"] { color: var(--fg, #eee); border-bottom-color: var(--accent, #5b8dee); }

#vol-e-oi-m:checked  ~ .vol-epbar label[for="vol-e-oi-m"],
#vol-e-gex-m:checked ~ .vol-epbar label[for="vol-e-gex-m"],
#vol-e-cex-m:checked ~ .vol-epbar label[for="vol-e-cex-m"],
#vol-e-dex-m:checked ~ .vol-epbar label[for="vol-e-dex-m"] { color: var(--fg, #eee); border-bottom-color: var(--accent, #5b8dee); }

/* ── Sector Heatmap tabs ── */
#bt-sectors:checked ~ .bump-tab-bar label[for="bt-sectors"],
#bt-themes:checked  ~ .bump-tab-bar label[for="bt-themes"],
#bt-mag7:checked    ~ .bump-tab-bar label[for="bt-mag7"] { color: var(--fg, #eee); border-bottom-color: var(--accent, #5b8dee); }

#bt-sectors:checked ~ .bump-panels .bump-panel-sectors,
#bt-themes:checked  ~ .bump-panels .bump-panel-themes,
#bt-mag7:checked    ~ .bump-panels .bump-panel-mag7 { display: block; }

/* ── Key Ratios tabs ── */
#kr-rsp:checked ~ .kr-bar label[for="kr-rsp"],
#kr-hyg:checked ~ .kr-bar label[for="kr-hyg"],
#kr-xlk:checked ~ .kr-bar label[for="kr-xlk"],
#kr-spy:checked ~ .kr-bar label[for="kr-spy"] { color: var(--fg, #eee); border-bottom-color: var(--accent, #5b8dee); }

#kr-rsp:checked ~ .kr-panels .kr-panel-rsp,
#kr-hyg:checked ~ .kr-panels .kr-panel-hyg,
#kr-xlk:checked ~ .kr-panels .kr-panel-xlk,
#kr-spy:checked ~ .kr-panels .kr-panel-spy { display: block; }

/* ── Quad Map tabs ── */
#qt-consensus:checked ~ .quad-tab-bar label[for="qt-consensus"],
#qt-nowcast:checked   ~ .quad-tab-bar label[for="qt-nowcast"],
#qt-etf:checked       ~ .quad-tab-bar label[for="qt-etf"],
#qt-yc:checked        ~ .quad-tab-bar label[for="qt-yc"] { color: var(--fg, #eee); border-bottom-color: var(--accent, #5b8dee); }

#qt-consensus:checked ~ .quad-panels .quad-panel-consensus,
#qt-nowcast:checked   ~ .quad-panels .quad-panel-nowcast,
#qt-etf:checked       ~ .quad-panels .quad-panel-etf,
#qt-yc:checked        ~ .quad-panels .quad-panel-yc { display: block; }

/* ── Breadth page tabs (bump + ratio) ── */
.breadth-bump-tabs input[type="radio"],
.breadth-ratio-tabs input[type="radio"] { display: none; }

.breadth-bump-bar,
.breadth-ratio-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border, #222);
}

.breadth-bump-bar label,
.breadth-ratio-bar label {
  padding: 6px 14px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  color: var(--muted, #888);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
}

.breadth-bump-bar label:hover,
.breadth-ratio-bar label:hover { color: var(--fg, #eee); }

.breadth-bump-panels .breadth-bump-panel,
.breadth-ratio-panels .breadth-ratio-panel { display: none; }

#bb-sectors:checked ~ .breadth-bump-bar label[for="bb-sectors"],
#bb-themes:checked  ~ .breadth-bump-bar label[for="bb-themes"],
#bb-mag7:checked    ~ .breadth-bump-bar label[for="bb-mag7"] { color: var(--fg, #eee); border-bottom-color: var(--accent, #5b8dee); }

#bb-sectors:checked ~ .breadth-bump-panels .breadth-bump-panel-sectors,
#bb-themes:checked  ~ .breadth-bump-panels .breadth-bump-panel-themes,
#bb-mag7:checked    ~ .breadth-bump-panels .breadth-bump-panel-mag7 { display: block; }

#brr-rsp:checked ~ .breadth-ratio-bar label[for="brr-rsp"],
#brr-hyg:checked ~ .breadth-ratio-bar label[for="brr-hyg"],
#brr-xlk:checked ~ .breadth-ratio-bar label[for="brr-xlk"],
#brr-spy:checked ~ .breadth-ratio-bar label[for="brr-spy"] { color: var(--fg, #eee); border-bottom-color: var(--accent, #5b8dee); }

#brr-rsp:checked ~ .breadth-ratio-panels .breadth-ratio-panel-rsp,
#brr-hyg:checked ~ .breadth-ratio-panels .breadth-ratio-panel-hyg,
#brr-xlk:checked ~ .breadth-ratio-panels .breadth-ratio-panel-xlk,
#brr-spy:checked ~ .breadth-ratio-panels .breadth-ratio-panel-spy { display: block; }