:root {
  --bg: #0f1419;
  --card: #1a2332;
  --border: #2d3a4f;
  --text: #e7ecf3;
  --muted: #8b9bb4;
  --green: #3dd68c;
  --red: #f07178;
  --yellow: #ffd580;
  --cyan: #5ccfe6;
  --blue: #82aaff;
  --sig-bg: rgba(92, 207, 230, 0.12);
  --high-bg: rgba(255, 213, 128, 0.14);
  --dim-bg: rgba(241, 113, 120, 0.10);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Noto Sans TC", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  padding: 24px;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1100px; margin: 0 auto; }
h1 { font-size: 1.5rem; margin: 0 0 4px; font-weight: 650; }
h2 {
  font-size: 1.15rem;
  color: var(--cyan);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-top: 28px;
  font-weight: 600;
}
h3 { font-size: 1rem; color: var(--yellow); margin: 16px 0 8px; font-weight: 600; }
.sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 20px; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.card .label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.card .val { font-size: 1.1rem; font-weight: 600; margin-top: 4px; }
.green { color: var(--green); }
.red { color: var(--red); }
.yellow { color: var(--yellow); }
.cyan { color: var(--cyan); }
.pos { color: var(--green); }
.neg { color: var(--red); }
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0;
  font-family: Consolas, ui-monospace, monospace;
  font-size: 0.85rem;
  word-break: normal;
  overflow-wrap: anywhere;
}
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  background: #243044;
  margin-left: 4px;
  color: var(--muted);
  vertical-align: middle;
}
.badge-structure {
  background: rgba(92, 207, 230, 0.15);
  color: var(--cyan);
  margin-left: 0;
}
.badge-review {
  background: rgba(255, 213, 128, 0.15);
  color: var(--yellow);
  margin-left: 0;
}
.tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 20px;
  flex-wrap: wrap;
}
.tab {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 0.9rem;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(92, 207, 230, 0.1);
}
.sep { color: var(--muted); margin: 0 6px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: var(--card);
}
th {
  background: #243044;
  padding: 8px 10px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--muted);
  font-weight: 600;
}
td {
  text-align: center;
}
th.s, td.s { text-align: center; color: var(--yellow); font-weight: 600; }
th.c, td.c { text-align: right; color: var(--green); }
th.p, td.p { text-align: right; color: var(--red); }
th.n, td.n { text-align: right; }
th.note, td.note { text-align: left; color: var(--cyan); font-size: 0.8rem; }
td { padding: 6px 10px; border-top: 1px solid var(--border); }

tr.hl { background: rgba(92, 207, 230, 0.08); }
tr.sig { background: var(--sig-bg); }
tr.sig.hl { background: rgba(92, 207, 230, 0.16); }
tr.high { background: var(--high-bg); }
tr.dim {
  background: var(--dim-bg);
  color: var(--muted);
  border-left: 3px solid rgba(241, 113, 120, 0.45);
}
tr.dim td.s { color: #9aa8c0; }
tr.dim td.c { color: #6fad8a; }
tr.dim td.p { color: #c08086; }
tr.dim td.n { color: var(--muted); }
tr.dim td.note { color: #7a879c; }

/* default: hide low-OI rows; toggle adds .show-all on table */
table#oiChain:not(.show-all) tbody tr.dim {
  display: none !important;
}
table#oiChain.show-all tbody tr.dim {
  display: table-row !important;
}

.chain-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 10px 0 12px;
  font-size: 0.88rem;
  color: var(--muted);
}
.chain-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
}
.chain-toolbar label:hover { border-color: var(--cyan); }
.chain-toolbar input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--cyan);
  cursor: pointer;
}
.chain-legend { font-size: 0.8rem; color: var(--muted); }
.chain-legend span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin: 0 4px 0 10px;
  vertical-align: middle;
  border: 1px solid var(--border);
}
.chain-legend .lg-sig { background: var(--sig-bg); }
.chain-legend .lg-high { background: var(--high-bg); }
.chain-legend .lg-dim { background: var(--dim-bg); }

.list-table th { text-align: left; color: var(--text); }
.list-table td { text-align: left; }
.nav { margin-bottom: 16px; }
.nav-deck .nav-g {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 8px 0 12px;
}
.nav-deck .nav-g:first-child { margin-left: 0; }
.error {
  background: #3a1d1d;
  border: 1px solid var(--red);
  color: var(--red);
  padding: 12px 16px;
  border-radius: 10px;
}
footer { margin-top: 32px; color: var(--muted); font-size: 0.8rem; }
.chain-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
code {
  background: #243044;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}


/* —— Part 1 Addition: Options OI matrix —— */
.oi-matrix-wrap {
  border: 2px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 8px auto 0;
  background: var(--card);
  max-width: 100%;
  width: 100%;
}
/* OI spatial matrix stays visually compact on desktop */
.oi-matrix-wrap.oi-matrix-compact {
  max-width: 560px;
}
table.oi-matrix {
  width: 100%;
  max-width: 560px;
  border-collapse: collapse;
  font-size: 0.72rem;
  table-layout: fixed;
  margin: 0 auto;
  border: 1px solid #3d4f6a;
}
table.oi-matrix caption {
  caption-side: top;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 8px 6px 6px;
  color: var(--text);
  letter-spacing: 0.02em;
}
table.oi-matrix th,
table.oi-matrix td {
  border: 1px solid #2a3548;
  padding: 3px 2px;
  text-align: center;
  vertical-align: middle;
}
table.oi-matrix thead th {
  background: #243044;
  color: var(--muted);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.oi-matrix th.k-col {
  width: 28px;
  color: var(--yellow);
  border-right: 2px solid #5a6d8c;
}
table.oi-matrix th.group {
  font-size: 0.8rem;
  color: var(--text);
  border-left: 2px solid #5a6d8c;
  border-right: 2px solid #5a6d8c;
}
table.oi-matrix th.sub {
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 500;
  padding: 2px 1px;
}
table.oi-matrix th.sub.call {
  color: var(--green);
  border-left: 2px solid #5a6d8c;
}
table.oi-matrix th.sub.put {
  color: var(--red);
  border-right: 2px solid #5a6d8c;
}
table.oi-matrix td.k-label {
  background: #243044;
  color: var(--yellow);
  font-weight: 600;
  width: 28px;
  border-right: 2px solid #5a6d8c;
}
table.oi-matrix td.grp-start { border-left: 2px solid #5a6d8c; }
table.oi-matrix td.grp-end { border-right: 2px solid #5a6d8c; }
table.oi-matrix td.grp-alt:not(.mx-pos):not(.mx-neg):not(.mx-high) {
  background: rgba(255, 255, 255, 0.03);
}
table.oi-matrix tbody tr:nth-child(even) td:not(.k-label):not(.mx-pos):not(.mx-neg):not(.mx-high) {
  background: rgba(255, 255, 255, 0.02);
}
table.oi-matrix td.cell-c,
table.oi-matrix td.cell-p {
  font-variant-numeric: tabular-nums;
}
/* Net sign colors BOTH C and P of the strike */
table.oi-matrix td.net-pos {
  color: var(--green) !important;
}
table.oi-matrix td.net-neg {
  color: var(--red) !important;
}
table.oi-matrix td.net-zero {
  color: var(--muted) !important;
}

/*
 * Ranked strike (Call/Put ①②③): mark WHOLE strike (C+P).
 * Net OI > 0 → green pair; Net OI < 0 → red pair.
 * ★★ → yellow pair (overrides net color slightly stronger border).
 * Base column cells: NO extra mark.
 */
table.oi-matrix td.mx-pos {
  background: rgba(61, 214, 140, 0.18) !important;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(61, 214, 140, 0.45);
}
table.oi-matrix td.mx-neg {
  background: rgba(240, 113, 120, 0.18) !important;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(240, 113, 120, 0.45);
}
table.oi-matrix td.mx-high {
  background: rgba(255, 213, 128, 0.20) !important;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 213, 128, 0.55);
}
/* zero-net ranked (rare): neutral cyan */
table.oi-matrix td.mx-hl {
  background: rgba(92, 207, 230, 0.14) !important;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(92, 207, 230, 0.35);
}

table.oi-matrix:not(.show-all) td.mx-dim {
  opacity: 0.40;
  font-weight: 400;
  box-shadow: none;
}


/* OI cluster band — bold numbers (hint only) */
/* OI Net Matrix (C−P) — volume-like heat by |net| */
.oi-net-title {
  font-size: 1rem;
  margin: 18px 0 6px;
  font-weight: 600;
}
table.oi-net-matrix td.oi-net-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 2.6em;
}
table.oi-net-matrix td.oi-net-zero {
  color: var(--muted);
  opacity: 0.55;
}
table.oi-net-matrix td.oi-net-pos-1 {
  color: var(--text);
  background: rgba(61, 214, 140, 0.08);
}
table.oi-net-matrix td.oi-net-pos-2 {
  color: var(--text);
  background: rgba(61, 214, 140, 0.14);
}
table.oi-net-matrix td.oi-net-pos-3 {
  color: #86efac;
  font-weight: 600;
  background: rgba(61, 214, 140, 0.22);
}
table.oi-net-matrix td.oi-net-pos-4 {
  color: #bbf7d0;
  font-weight: 700;
  background: rgba(61, 214, 140, 0.32);
}
table.oi-net-matrix td.oi-net-pos-5 {
  color: #ecfdf5;
  font-weight: 700;
  background: rgba(61, 214, 140, 0.42);
}
table.oi-net-matrix td.oi-net-neg-1 {
  color: var(--text);
  background: rgba(240, 113, 120, 0.08);
}
table.oi-net-matrix td.oi-net-neg-2 {
  color: var(--text);
  background: rgba(240, 113, 120, 0.14);
}
table.oi-net-matrix td.oi-net-neg-3 {
  color: #fca5a5;
  font-weight: 600;
  background: rgba(240, 113, 120, 0.22);
}
table.oi-net-matrix td.oi-net-neg-4 {
  color: #fecaca;
  font-weight: 700;
  background: rgba(240, 113, 120, 0.32);
}
table.oi-net-matrix td.oi-net-neg-5 {
  color: #fff1f2;
  font-weight: 700;
  background: rgba(240, 113, 120, 0.42);
}
table.oi-net-matrix td.oi-net-wall {
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.55);
}

/* OI Total Matrix (C+P) — amber heat like volume */
table.oi-tot-matrix td.oi-tot-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 2.6em;
}
table.oi-tot-matrix td.oi-tot-zero {
  color: var(--muted);
  opacity: 0.55;
}
table.oi-tot-matrix td.oi-tot-1 {
  color: var(--text);
  background: rgba(255, 213, 128, 0.08);
}
table.oi-tot-matrix td.oi-tot-2 {
  color: var(--text);
  background: rgba(255, 213, 128, 0.14);
}
table.oi-tot-matrix td.oi-tot-3 {
  color: #fde68a;
  font-weight: 600;
  background: rgba(255, 213, 128, 0.22);
}
table.oi-tot-matrix td.oi-tot-4 {
  color: var(--yellow);
  font-weight: 700;
  background: rgba(255, 213, 128, 0.32);
}
table.oi-tot-matrix td.oi-tot-5 {
  color: #fef3c7;
  font-weight: 700;
  background: rgba(255, 213, 128, 0.42);
}

table.oi-matrix td.mx-band {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* Volume Rolling — constrained width, fixed layout, compact type */
table.vol-rolling {
  width: 100%;
  max-width: 900px;
  table-layout: fixed;
  font-size: 0.65rem;
  border-collapse: collapse;
  margin: 0 auto;
}
table.vol-rolling th.sub {
  min-width: 0;
  padding: 3px 1px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
table.vol-rolling td {
  padding: 2px 1px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.vol-rolling th.k-col,
table.vol-rolling td.k-label {
  min-width: 1.5rem;
  max-width: 2.2rem;
  padding: 2px 3px;
  font-weight: 600;
}
/* Whole-hundred strike labels (7700→77, 7800→78…) — green + bold for quick visual scan */
table.vol-rolling td.k-label.k-whole {
  color: var(--green);
  font-weight: 700;
}
table.vol-rolling td.vol-empty { color: var(--muted); opacity: 0.45; }
/* Missing = past fetch gate + grace, no data (not the same as pending) */
table.vol-rolling th.sub.vol-slot-miss {
  color: var(--yellow);
  box-shadow: inset 0 -2px 0 var(--yellow);
}
table.vol-rolling td.vol-miss {
  color: var(--yellow);
  opacity: 0.85;
  background: rgba(255, 213, 128, 0.08);
}
.vol-miss-banner {
  border-color: rgba(255, 213, 128, 0.45) !important;
  background: rgba(255, 213, 128, 0.08);
}
/* Absolute K heat (amber) — 0 / <1 / 1–3 / 3–8 / 8–15 / ≥15 */
table.vol-rolling td.vol-zero { color: var(--muted); }
table.vol-rolling td.vol-h1 {
  color: var(--text);
  background: rgba(255, 213, 128, 0.06);
}
table.vol-rolling td.vol-h2 {
  color: var(--text);
  background: rgba(255, 213, 128, 0.11);
}
table.vol-rolling td.vol-h3 {
  color: #fde68a;
  font-weight: 600;
  background: rgba(255, 213, 128, 0.18);
}
table.vol-rolling td.vol-h4 {
  color: var(--yellow);
  font-weight: 700;
  background: rgba(255, 213, 128, 0.26);
}
table.vol-rolling td.vol-h5 {
  color: #fef3c7;
  font-weight: 700;
  background: rgba(255, 213, 128, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255, 213, 128, 0.40);
}
/* Column max (ties included) — blue bottom bar, distinct from amber heat */
table.vol-rolling td.vol-col-max {
  box-shadow: inset 0 -2px 0 0 #60a5fa;
}
table.vol-rolling td.vol-h5.vol-col-max {
  box-shadow:
    inset 0 0 0 1px rgba(255, 213, 128, 0.45),
    inset 0 -2px 0 0 #60a5fa;
}
/* legacy aliases (harmless if old HTML cached) */
table.vol-rolling td.vol-hit { color: var(--text); }
table.vol-rolling td.vol-hot {
  color: var(--yellow);
  font-weight: 700;
  background: rgba(255, 213, 128, 0.12);
}
table.vol-rolling td.k-label[title] { cursor: help; }

/*
 * Volume Rolling freeze panes (Excel-like):
 * - Full table height (page scroll only — no inner vertical scrollbar)
 * - Desktop: overflow visible so thead sticky uses the *viewport* (page scroll).
 *   Note: overflow-x:auto forces overflow-y to compute as auto (CSS), which
 *   makes the wrap the sticky containing block; with full height that kills
 *   thead stick on desktop. Keep overflow visible on desktop.
 * - Mobile: overflow-x auto for horizontal pan; sticky left k-col still works.
 * - corner th.k-col sticky top+left (highest z-index)
 */
.oi-matrix-wrap.vol-rolling-wrap {
  overflow: visible;
  max-height: none;
}
table.vol-rolling {
  border-collapse: separate;
  border-spacing: 0;
}
table.vol-rolling thead th {
  position: sticky;
  /* below matrix-sticky-chrome (nav+Ammo); JS sets --vol-thead-top */
  top: var(--vol-thead-top, 0px);
  z-index: 2;
  background: var(--card);
  box-shadow: 0 1px 0 0 var(--border);
}
table.vol-rolling th.k-col,
table.vol-rolling td.k-label {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card);
  box-shadow: 1px 0 0 0 var(--border);
}
table.vol-rolling thead th.k-col {
  position: sticky;
  top: var(--vol-thead-top, 0px);
  left: 0;
  z-index: 5;
  background: var(--card);
  box-shadow: 1px 1px 0 0 var(--border);
}
/* Meta rows (SPX/VIX/ATM/IV) keep sticky first cell */
table.vol-rolling tr.vol-spx-row td.k-label,
table.vol-rolling tr.vol-vix-row td.k-label,
table.vol-rolling tr.vol-atm-row td.k-label,
table.vol-rolling tr.vol-iv-row td.k-label {
  z-index: 1;
  background: var(--card);
}

/* Mobile portrait / narrow: wider cells + horizontal scroll only when needed */
@media (max-width: 640px) {
  body { padding: 12px; }
  /*
   * Mobile: overflow-x on wrap makes overflow-y compute to auto and kills
   * viewport-sticky thead. Use an internal scroll box so thead/k-col sticky
   * work inside the matrix (vertical + horizontal).
   */
  .oi-matrix-wrap.vol-rolling-wrap {
    max-height: 65vh;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.vol-rolling {
    width: max-content;
    min-width: 100%;
    max-width: none;
    table-layout: auto;
    font-size: 0.82rem;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
  }
  table.vol-rolling th.sub,
  table.vol-rolling td {
    min-width: 2.7rem;
    padding: 7px 9px;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  table.vol-rolling th.k-col,
  table.vol-rolling td.k-label {
    min-width: 2.4rem;
    max-width: none;
    padding: 8px 10px;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card);
  }
  table.vol-rolling thead th {
    position: sticky;
    top: 0; /* stick inside wrap, not under page chrome */
    z-index: 2;
    background: var(--card);
  }
  table.vol-rolling thead th.k-col {
    z-index: 5;
    top: 0;
    left: 0;
  }
}


/* —— Macro calendar (match panel width; mobile no ugly wrap) —— */
.cal-panel {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.cal-section-title {
  margin: 12px 0 6px;
  font-size: 0.95rem;
}
.cal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
  max-width: 100%;
}
.cal-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.cal-when {
  flex: 0 0 auto;
  min-width: 5.5rem;
  max-width: 42%;
}
.cal-date {
  display: block;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.cal-et {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
  margin-top: 2px;
}
.cal-main {
  flex: 1 1 auto;
  min-width: 0; /* allow truncate */
}
.cal-label {
  font-weight: 600;
  word-break: break-word;
}
.cal-fred {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 640px) {
  .cal-row {
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
  }
  .cal-when {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
  }
  .cal-date,
  .cal-et {
    display: inline;
    white-space: nowrap;
  }
  .cal-main {
    width: 100%;
  }
}


/* —— Index: report list + session grid (mobile consistent) —— */
.list-table-wrap {
  width: 100%;
  max-width: 100%;
}
.session-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  width: 100%;
}
/* Desktop: SPX | VIX | Session | OHLC in one row when OHLC present */
@media (min-width: 720px) {
  .session-grid.session-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.card-ohlc .ohlc-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 4px;
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.card-ohlc .ohlc-line b {
  font-weight: 700;
  opacity: 0.75;
  margin-right: 2px;
}
.card-ohlc .ohlc-line span {
  white-space: nowrap;
}
.card-ohlc .ohlc-line .ohlc-range {
  color: var(--yellow);
  opacity: 0.95;
}
.session-grid .card {
  min-width: 0;
  padding: 10px 12px;
}
.session-grid .card .label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-grid .card .val {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}
/* OHLC / session sub-line: short MM-DD · context — allow wrap on narrow */
.session-grid .card-ohlc .sub,
.session-grid .card .sub {
  font-size: 0.72rem;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

@media (max-width: 640px) {
  body { padding: 12px; }
  .wrap { max-width: 100%; }
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .session-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Report list → stacked cards, full width, no horizontal scroll */
  .list-table-wrap { overflow: visible; }
  table.list-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
  table.list-table thead { display: none; }
  table.list-table tbody { display: block; width: 100%; }
  table.list-table tr {
    display: block;
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0;
    box-sizing: border-box;
  }
  table.list-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border: none;
    padding: 3px 0;
    text-align: right;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  table.list-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    flex: 0 0 auto;
    max-width: 42%;
  }
  table.list-table td:first-child {
    justify-content: flex-start;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }
  table.list-table td:first-child::before { content: none; }
  table.list-table td:last-child {
    justify-content: flex-end;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
  }
  table.list-table td:last-child::before { content: none; }
  /* Dates / numbers stay on one line when possible */
  table.list-table td[data-label="Session"],
  table.list-table td[data-label="Expiration"],
  table.list-table td[data-label="Spot"],
  table.list-table td[data-label="Put Wall"],
  table.list-table td[data-label="Call Wall"] {
    white-space: nowrap;
  }
  table.list-table td[data-label="Session"] span,
  table.list-table td[data-label="Expiration"] span {
    white-space: nowrap;
  }
}


/* Volume matrix — VIX level row */
table.vol-rolling tr.vol-vix-row td {
  background: rgba(92, 207, 230, 0.10);
  font-weight: 700;
  color: var(--cyan);
  white-space: nowrap;
}
table.vol-rolling tr.vol-vix-row td.k-label {
  color: var(--cyan);
  letter-spacing: 0.04em;
}


/* Volume matrix — SPX spot row */
table.vol-rolling tr.vol-spx-row td {
  background: rgba(255, 213, 128, 0.10);
  font-weight: 700;
  color: var(--yellow);
  white-space: nowrap;
  font-size: 0.78rem;
}
table.vol-rolling tr.vol-spx-row td.k-label {
  color: var(--yellow);
  letter-spacing: 0.04em;
}
table.vol-rolling tr.vol-vix-row td {
  font-size: 0.78rem;
}


/* Volume matrix — ATM straddle (EM proxy) */
table.vol-rolling tr.vol-atm-row td {
  background: rgba(126, 231, 135, 0.08);
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
  font-size: 0.78rem;
}
table.vol-rolling tr.vol-atm-row td.k-label {
  color: var(--green);
  letter-spacing: 0.04em;
}


/* Volume matrix — ATM IV % */
table.vol-rolling tr.vol-iv-row td {
  background: rgba(167, 139, 250, 0.10);
  font-weight: 700;
  color: #c4b5fd;
  white-space: nowrap;
  font-size: 0.78rem;
}
table.vol-rolling tr.vol-iv-row td.k-label {
  color: #c4b5fd;
  letter-spacing: 0.04em;
}


/* Mobile-friendly metric stacks (EM bands, term compare) */
.metric-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.metric-card {
  background: var(--panel, rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
}
.metric-title {
  font-weight: 700;
  margin-bottom: 6px;
  white-space: normal;
  word-break: normal;
}
.metric-line {
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 3px 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.metric-line .muted { color: var(--muted); }
.metric-card .sub {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;
}


/* Compare tables: no wrap + horizontal scroll on narrow screens */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 8px;
  border-radius: 8px;
}
.table-scroll::-webkit-scrollbar {
  height: 6px;
}
table.cmp-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
table.cmp-table th,
table.cmp-table td {
  white-space: nowrap;
  padding: 8px 10px;
  vertical-align: middle;
}
table.cmp-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}
table.cmp-table .nowrap {
  white-space: nowrap;
}

/* ---- Day-grouped report list ---- */
.day-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.day-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.day-group.day-today {
  border-color: rgba(80, 200, 120, 0.45);
}
.day-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.day-summary::-webkit-details-marker { display: none; }
.day-summary::marker { content: ''; }
.day-date {
  font-weight: 650;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.day-wd {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.85rem;
}
.day-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.day-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid var(--border);
  color: var(--muted);
  opacity: 0.45;
}
.day-pill.on {
  opacity: 1;
  color: var(--text);
  border-color: rgba(120, 160, 255, 0.5);
  background: rgba(80, 120, 200, 0.15);
}
.day-pill.off {
  opacity: 0.35;
}
.day-count {
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: 2px;
}
.day-body {
  border-top: 1px solid var(--border);
  padding: 6px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.day-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
}
.day-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.day-row-meta {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
  word-break: break-word;
}
.day-row-view {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  text-decoration: none;
}
.day-row-view:hover {
  border-color: rgba(120, 160, 255, 0.55);
}

/* Volume session path (Chart.js) */
.vol-path-panel {
  padding: 12px 14px 10px;
}
.vol-path-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.vol-path-chart-wrap {
  position: relative;
  width: 100%;
  height: 220px;
}
@media (max-width: 640px) {
  .vol-path-chart-wrap { height: 200px; }
}


/* EOD review tables — horizontal scroll on mobile (same idea as volume rolling) */
.eod-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
table.eod-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
table.eod-table th,
table.eod-table td {
  white-space: nowrap;
  padding: 8px 12px;
}
table.eod-table th {
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 640px) {
  table.eod-table {
    font-size: 0.8rem;
  }
  table.eod-table th,
  table.eod-table td {
    padding: 7px 10px;
  }
}

/* Sortable headers (EOD Remaining OI + Structure OI Chain) */
table.eod-table th.sortable,
table#oiChain th.sortable {
  user-select: none;
  color: var(--cyan, #22d3ee);
  cursor: pointer;
}
table.eod-table th.sortable .sort-ind,
table#oiChain th.sortable .sort-ind {
  opacity: 0.7;
  font-size: 0.75em;
}


/* Trading-day nav (same module) */
.day-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 14px;
  padding: 8px 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  font-size: 0.9rem;
}
.day-nav a {
  color: #7dd3fc;
  text-decoration: none;
  white-space: nowrap;
}
.day-nav a:hover { text-decoration: underline; }
.day-nav-cur {
  text-align: center;
  flex: 1;
}
.day-nav .muted { color: #94a3b8; font-size: 0.85em; }
@media (max-width: 520px) {
  .day-nav { font-size: 0.82rem; padding: 6px 8px; }
}

.day-nav.day-nav-loading { opacity: 0.55; pointer-events: none; }
.day-nav-ajax-hint { font-size: 0.8em; }

.day-nav.day-nav-matrix {
  margin: 0;
  border-radius: 8px 8px 0 0;
}

.day-nav-today {
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid #38bdf8;
  color: #e0f2fe !important;
  background: #0c4a6e;
  font-size: 0.85em;
  text-decoration: none !important;
  white-space: nowrap;
}
.day-nav-today:hover { background: #0369a1; }
.day-nav-page .day-nav-ajax-hint { display: none; }

/* Matrix session EOD from Ammo */
.matrix-session-eod {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  font-size: 0.88rem;
}
.matrix-session-eod .mse-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
.matrix-session-eod .mse-date {
  font-weight: 700;
  color: #7dd3fc;
  margin-right: 4px;
}
.matrix-session-eod .mse-label {
  color: #94a3b8;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.matrix-session-eod .mse-ohlc,
.matrix-session-eod .mse-vix {
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .matrix-session-eod { font-size: 0.8rem; }
}

/* Page Session bar sticks through Part1, releases at OI chain */
.structure-page-chrome {
  position: sticky;
  top: 0;
  z-index: 32;
  background: #0f172a;
  padding: 4px 0 8px;
  margin: 0 0 8px;
  border-bottom: 1px solid #1e293b;
}
.structure-page-chrome h1 { margin-bottom: 6px; }
.structure-page-chrome .day-nav { margin-bottom: 6px; }

/* Matrix nav + Ammo EOD stick together */
.matrix-sticky-chrome {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 12px 0 12px;
  background: #0b1220;
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.matrix-sticky-chrome .day-nav {
  border: none;
  border-radius: 8px 8px 0 0;
  margin: 0;
}
.matrix-sticky-chrome .matrix-session-eod {
  margin: 0;
  border: none;
  border-top: 1px solid #334155;
  border-radius: 0 0 8px 8px;
}

.vol-side-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  padding: 2px 8px;
  border: 1px solid #334155;
  border-radius: 6px;
  font-size: 0.85rem;
}
.vol-side-mode label.inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin: 0;
}

#oiTapePanel {
  margin: 16px 0 20px;
}
#oiTapePanel.tape-near tr[data-near="0"] { display: none; }
#oiTapePanel:not(.tape-older) .tape-old { display: none; }
#oiTapePanel table.oi-matrix {
  max-width: none;
  width: 100%;
  margin: 0;
  table-layout: auto;
}
#oiTapePanel table.oi-matrix th,
#oiTapePanel table.oi-matrix td {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#oiTapePanel table.oi-matrix th.k-col,
#oiTapePanel table.oi-matrix td.k-label {
  width: 56px;
  min-width: 56px;
  padding: 3px 6px;
}

#oiSlotMatrix td.oi-delta-pos { box-shadow: inset 0 -2px 0 #34d399; }
#oiSlotMatrix td.oi-delta-neg { box-shadow: inset 0 -2px 0 #f87171; }

/* Volume: mobile nav chrome toggle — compact, does not cover day-nav */
.chrome-toggle-bar {
  display: none;
  margin: 0 0 6px;
  padding: 0;
  position: static;
  z-index: auto;
  background: transparent;
  text-align: right;
}
.chrome-toggle-btn {
  font-size: 0.7rem;
  line-height: 1.2;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #475569;
  background: #1e293b;
  color: #cbd5e1;
  cursor: pointer;
  width: auto;
  max-width: 100%;
  text-align: center;
}
.chrome-toggle-btn:hover { background: #334155; color: #f1f5f9; }
.matrix-sticky-chrome.chrome-collapsed {
  display: none !important;
}
@media (max-width: 640px) {
  .chrome-toggle-bar { display: block; }
  /* chrome itself still sticky under page top when open */
  .matrix-sticky-chrome {
    top: 0;
  }
}
@media (min-width: 641px) {
  .chrome-toggle-bar { display: none !important; }
  .matrix-sticky-chrome.chrome-collapsed { display: block !important; }
}

/* Volume ΔVol: Total vs C/P simultaneous columns */
table.vol-rolling.vol-mode-total .vol-cp-only { display: none !important; }
table.vol-rolling.vol-mode-cp .vol-tot-only { display: none !important; }
table.vol-rolling .vol-side-tag {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 1px;
}
table.vol-rolling .vol-side-tag.vol-side-c { color: #4ade80; }
table.vol-rolling .vol-side-tag.vol-side-p { color: #f87171; }
table.vol-rolling td.vol-side-c { color: #86efac; }
table.vol-rolling td.vol-side-p { color: #fca5a5; }

/* SPX VIX ATM Rolling — slot ticks; no heat map */
.vol-ticks-wrap {
  margin-bottom: 18px;
}
table.vol-ticks {
  max-width: 100%;
}
.vol-ticks-note {
  margin: 6px 0 14px;
  font-size: 0.8rem;
}

/* Volume page: separate the 3 buckets (ticks / ΔVol / stock) */
#volRollingToolbar {
  margin: 18px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #334155);
}
.oi-matrix-wrap.vol-rolling-wrap + .chain-toolbar,
#volStockToolbar {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #334155);
}
h2 + .sub + #volStockToolbar,
#volStockToolbar {
  margin-top: 8px;
}
/* Space after ΔVol matrix before Volume Stock heading */
.oi-matrix-wrap.vol-rolling-wrap {
  margin-bottom: 8px;
}
.vol-ticks-wrap.vol-rolling-wrap {
  margin-bottom: 18px;
}
.vol-section-title {
  margin-top: 1.75rem;
  margin-bottom: 0.35rem;
  padding-top: 0.75rem;
}

/* Session anchor (replaces Today wording) */
.day-nav-session {
  font-weight: 600;
}
.day-nav-latest {
  margin-left: 6px;
  font-size: 0.85em;
  text-decoration: none;
}
.day-nav-latest:hover { text-decoration: underline; }

/* Strike profile panel + full-width slot timeline (under chart) */
.vol-strike-profile-panel {
  margin: 12px 0 16px;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.vol-tl {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 4px 4px;
  box-sizing: border-box;
}
.vol-tl-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: #1e293b;
  color: #e2e8f0;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.vol-tl-btn:hover { background: #334155; }
.vol-tl-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.vol-tl-track-wrap {
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
}
.vol-tl-range {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 22px;
}
.vol-tl-range::-webkit-slider-runnable-track {
  height: 4px;
  background: #2dd4bf;
  border-radius: 999px;
}
.vol-tl-range::-moz-range-track {
  height: 4px;
  background: #2dd4bf;
  border-radius: 999px;
}
.vol-tl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2dd4bf;
  border: 2px solid #0f172a;
  margin-top: -6px;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.35);
}
.vol-tl-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2dd4bf;
  border: 2px solid #0f172a;
  cursor: pointer;
}
.vol-tl-dots {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 2px;
}
.vol-tl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5eead4;
  opacity: 0.85;
}
.vol-tl-dot.is-active {
  background: #f8fafc;
  box-shadow: 0 0 0 2px #2dd4bf;
}
.vol-tl-dot.is-minor {
  width: 4px;
  height: 4px;
  opacity: 0.45;
}
.vol-tl-tick.is-minor {
  color: transparent;
}
.vol-tl-tick.is-major {
  letter-spacing: 0.02em;
}
.vol-tl-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.7rem;
  color: #94a3b8;
  min-height: 1.1em;
}
.vol-tl-tick {
  flex: 1 1 0;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
.vol-tl-tick.is-active {
  color: #e2e8f0;
  font-weight: 600;
}
.vol-tl-now {
  flex: 0 0 auto;
  text-align: right;
  min-width: 4.5rem;
  font-size: 0.8rem;
  line-height: 1.25;
}
.vol-tl-now-val {
  display: block;
  color: #f1f5f9;
  font-weight: 700;
}
.vol-tl-now-mode {
  display: block;
  font-size: 0.7rem;
}

/* Structure ΔOI by strike — match Session path panel sizing */
.oi-doi-panel {
  margin: 16px 0 20px;
  width: 100%;
  box-sizing: border-box;
}


/* SPX VIX ATM Rolling — force tick colors after ajax (beat vol-empty) */
table.vol-ticks tr.vol-spx-row td.vol-spx,
table.vol-rolling tr.vol-spx-row td.vol-spx {
  color: var(--yellow) !important;
  font-weight: 700;
  opacity: 1;
}
table.vol-ticks tr.vol-vix-row td.vol-vix,
table.vol-rolling tr.vol-vix-row td.vol-vix {
  color: var(--cyan) !important;
  font-weight: 700;
  opacity: 1;
}
table.vol-ticks tr.vol-atm-row td.vol-atm,
table.vol-rolling tr.vol-atm-row td.vol-atm {
  color: var(--green) !important;
  font-weight: 700;
  opacity: 1;
}
table.vol-ticks tr.vol-iv-row td.vol-iv,
table.vol-rolling tr.vol-iv-row td.vol-iv {
  color: #c4b5fd !important;
  font-weight: 700;
  opacity: 1;
}


/* Volume preparing overlay — prior session remains, not live */
#volumeMatrixAjax.vol-prep-active {
  position: relative;
}
#volumeMatrixAjax.vol-prep-active > *:not(.vol-prep-overlay) {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}
.vol-prep-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px 24px;
  background: rgba(11, 18, 32, 0.38);
}
.vol-prep-overlay[hidden] { display: none !important; }
.vol-prep-card {
  margin-top: 24px;
  min-width: min(92vw, 360px);
  padding: 22px 24px 18px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.vol-prep-kicker { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; }
.vol-prep-title { font-size: 1.35rem; font-weight: 700; margin: 6px 0 10px; color: #e2e8f0; }
.vol-prep-count { font-size: 2.1rem; font-variant-numeric: tabular-nums; font-weight: 700; color: #7dd3fc; letter-spacing: 0.04em; }
.vol-prep-sub { margin-top: 8px; font-size: 0.82rem; color: #cbd5e1; line-height: 1.4; }