/* Gate 1 overrides. Source CSS remains the primary visual contract. */

:root {
  --v2-page: rgb(238, 240, 244);
  --v2-surface: rgb(255, 255, 255);
  --v2-ink: rgb(33, 37, 41);
  --v2-muted: rgb(108, 117, 125);
  --v2-border: rgb(222, 226, 230);
}

html,
body {
  min-height: 100%;
  background: var(--v2-page);
}

body.v2-ready .gex-loading-overlay {
  display: none !important;
}

body.v2-ready #gex-bars-view {
  display: block !important;
}

body.v2-ready #gex-ohlc-view {
  display: none !important;
}

body.v2-ready.v2-ohlc #gex-bars-view {
  display: none !important;
}

body.v2-ready.v2-ohlc #gex-ohlc-view {
  display: flex !important;
}

body.v2-ready.v2-ohlc #gex-ohlc-view > .gex-ohlc-container {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

body.v2-ready.v2-expiry #gex-bars-view,
body.v2-ready.v2-expiry #gex-ohlc-view {
  display: none !important;
}

body.v2-ready.v2-expiry #gex-term-container:not([hidden]) {
  display: flex !important;
}

body.v2-ready.v2-history #gex-bars-view,
body.v2-ready.v2-history #gex-ohlc-view,
body.v2-ready.v2-history #gex-term-container,
body.v2-ready.v2-history #gex-flow-view {
  display: none !important;
}

body.v2-ready.v2-history #gex-heatmap-view:not([hidden]) {
  display: flex !important;
}

body.v2-ready.v2-forecast #gex-bars-view,
body.v2-ready.v2-forecast #gex-ohlc-view,
body.v2-ready.v2-forecast #gex-term-container,
body.v2-ready.v2-forecast #gex-heatmap-view {
  display: none !important;
}

body.v2-ready.v2-flow #gex-bars-view,
body.v2-ready.v2-flow #gex-ohlc-view,
body.v2-ready.v2-flow #gex-term-container,
body.v2-ready.v2-flow #gex-heatmap-view,
body.v2-ready.v2-flow #gex-forecast-view {
  display: none !important;
}

body.v2-ready.v2-flow #gex-flow-view:not([hidden]) {
  display: flex !important;
}

body.v2-ready.v2-forecast #gex-forecast-view:not([hidden]) {
  display: flex !important;
}

#gex-term-container[hidden],
#term-oi-metric-toggle[hidden],
.term-levels-view-toggle[hidden],
#gex-term-table-view[hidden],
#gex-term-chart-view[hidden] {
  display: none !important;
}

#gex-heatmap-view[hidden],
#gex-flow-view[hidden],
#gex-forecast-view[hidden],
#heatmap-loading[hidden],
#heatmap-empty-state[hidden] {
  display: none !important;
}

body.v2-history .chart-section {
  min-height: 260px;
}

body.v2-history #chart-widgets-container {
  min-height: 0;
}

.v2-history-view {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

body.v2-flow .chart-section,
body.v2-flow #chart-widgets-container {
  min-height: 260px;
}

.v2-flow-view {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: #f8f9fa;
}

#flow-chart-title {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 4px 8px 2px;
}

#flow-chart-stage {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-height: 0;
}

#gex-flow-plot {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.v2-flow-empty {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: #6c757d;
  background: #fff;
  font-size: .9rem;
  text-align: center;
}

.v2-flow-empty span { max-width: 520px; }
.v2-flow-empty[hidden] { display: none; }

body.v2-forecast .chart-section,
body.v2-forecast #chart-widgets-container {
  min-height: 260px;
}

.v2-forecast-view {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: #f8f9fa;
}

#forecast-chart-title {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 4px 8px 2px;
}

#forecast-chart-title b { font-size: 12px; }
#forecast-chart-title span { font-size: 10.8px; opacity: .8; }

#forecast-chart-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 260px;
  overflow: hidden;
  background: #fff;
}

#gex-forecast-plot {
  width: 100%;
  height: 100%;
  min-height: 260px;
}

#forecast-free-hover {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  transform: translate(-100%, -50%);
}

#forecast-free-hover[hidden] { display: none; }

#forecast-free-hover::before {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  top: var(--forecast-hover-y, 50%);
  border-top: 1px dashed rgba(84, 96, 114, .65);
}

#forecast-free-hover span {
  position: relative;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(26, 30, 38, .92);
  color: #f7f8fa;
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
  font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

#forecast-hover-chance { color: #a8c7ff !important; }

#mc-config-empty {
  position: absolute;
  inset: 38px 0 0;
  z-index: 4;
  display: grid;
  place-items: center;
  color: #888;
  background: #fff;
  font-size: 16px;
}

#mc-config-empty[hidden] { display: none; }

.v2-forecast-nav-content .gex-nav-axis { flex: 0 0 auto; }

.v2-forecast-nav-content .v2-mc-horizon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  white-space: nowrap;
}

.v2-forecast-nav-content .v2-mc-horizon[hidden] { display: none; }

.v2-forecast-nav-content .v2-mc-horizon label {
  color: var(--theme-text-secondary, #6c757d);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}

.v2-forecast-nav-content .v2-mc-horizon select {
  width: 118px;
  min-height: 30px;
  padding: 3px 28px 3px 8px;
  border: 1px solid var(--v2-border);
  border-radius: 7px;
  background-color: #fff;
  color: #343a40;
  font-size: 12px;
}

.v2-mc-run {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  border: 1px solid #5aa951;
  border-radius: 7px;
  background: #63b75b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.v2-mc-run:disabled { opacity: .65; }

.heatmap-image-wrapper {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid var(--theme-border-primary, #dee2e6);
  border-radius: 8px;
  background: var(--theme-bg-card, #fff);
}

#heatmap-header-row {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 4px 8px 2px;
  pointer-events: none;
}

#heatmap-header-row b {
  font-size: 12px;
}

#heatmap-header-row span {
  font-size: 10.8px;
  opacity: 0.8;
}

.heatmap-image-area {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--theme-chart-bg, #fff);
  cursor: crosshair;
}

#heatmap-image-area {
  width: 100%;
}

.heatmap-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity 120ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

#heatmap-chart-img:not([hidden]) {
  display: block !important;
}

.heatmap-img[data-metric="abs"] {
  object-fit: contain;
}

.heatmap-loading {
  position: absolute;
  z-index: 25;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 58%);
}

.heatmap-crosshair-v,
.heatmap-crosshair-h {
  position: absolute;
  z-index: 15;
  display: none;
  pointer-events: none;
  background: #fff;
  mix-blend-mode: difference;
  opacity: 0.85;
}

.heatmap-crosshair-v { width: 1px; }
.heatmap-crosshair-h { height: 1px; }

.heatmap-axis-x,
.heatmap-axis-y,
.heatmap-price-label,
.heatmap-flip-label {
  position: absolute;
  z-index: 18;
  display: none;
  padding: 1px 6px;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 4px;
  background: rgb(10 10 30 / 95%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

.heatmap-axis-x { transform: translateX(-50%); }
.heatmap-axis-y { transform: translate(-100%, -50%); }

.heatmap-price-dot,
.heatmap-flip-dot {
  position: absolute;
  z-index: 17;
  display: none;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgb(0 0 0 / 75%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px rgb(0 0 0 / 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.heatmap-flip-dot {
  background: #ff00ff;
  box-shadow: 0 0 6px rgb(255 0 255 / 85%);
}

.heatmap-flip-label {
  border-color: rgb(255 0 255 / 60%);
  color: #ff5cff;
}

.heatmap-tooltip {
  position: absolute;
  z-index: 20;
  display: none;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 6px;
  background: rgb(10 10 30 / 92%);
  color: #e0e0e0;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.v2-heatmap-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #6c757d;
  font-size: 0.9rem;
}

.v2-history-nav-content .gex-nav-axis {
  flex: 0 0 auto;
}

.v2-flow-nav-content .gex-nav-axis { flex: 0 0 auto; }

/* Flow's source Metric is a direct two-state control.  Unlike generic
   parameter axes it must stay visible at compact widths, where the original
   still exposes Notional/Gamma before the window controls. */
.v2-flow-nav-content .gex-nav-axis[data-kind="param"] {
  display: inline-flex;
  padding: 3px 4px;
}

.v2-flow-nav-content #flow-metric-chip {
  border: 0;
  box-shadow: none;
  background: transparent;
  color: inherit;
  min-height: 26px;
}

.gex-category-tab[data-cat="flow"] .cat-ico { color: #e495d8; }

.v2-history-nav-content .gex-nav-axis-sep {
  align-self: center;
}

.v2-history-nav-content .gex-nav-view:focus-visible {
  outline: 2px solid #6574d9;
  outline-offset: 1px;
}

body.v2-expiry .chart-section {
  min-height: 260px;
}

body.v2-expiry #gex-term-container {
  background: #f8f9fa;
}

body.v2-expiry #term-chart-title {
  flex: 0 0 auto;
  padding: 4px 8px 2px;
}

body.v2-expiry #gex-term-chart-view {
  min-height: 0;
}

body.v2-expiry #gex-term-plot {
  height: 100% !important;
}

body.v2-expiry .slider-section-container {
  flex: 0 0 auto;
}

.term-cycle-quarterly { color: #dc2626; }
.term-cycle-monthly { color: #7c3aed; }
.term-cycle-weekly { color: #2563eb; }

.v2-term-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.v2-term-table th,
.v2-term-table td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--v2-border);
  text-align: right;
  white-space: nowrap;
}

.v2-term-table th:first-child,
.v2-term-table td:first-child { text-align: left; }

.v2-term-table thead {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.v2-ohlc-frame {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.v2-ohlc-empty {
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9rem;
  text-align: center;
}

.v2-ohlc-main {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.v2-strike-dock {
  display: block;
  flex: 0 0 auto;
  height: 100%;
  background: #fff;
  cursor: crosshair;
}

.gex-segmented-label {
  display: flex;
  align-items: center;
}

.gex-segmented {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  background: #f1f3f5;
}

.gex-segmented-btn {
  border: 0;
  border-radius: 6px;
  padding: 5px 7px;
  background: transparent;
  color: #6c757d;
  font-size: 12px;
}

.gex-segmented-btn.active {
  background: #fff;
  color: #343a40;
  box-shadow: 0 1px 3px rgb(0 0 0 / 14%);
}

.v2-subnav-content { display: contents; }
.v2-subnav-content[hidden] { display: none; }

#gex-chart {
  min-width: 0;
}

body.v2-ready #gex-bars-view {
  display: flex !important;
}

#gex-chart {
  height: 100% !important;
}

.v2-live-dot {
  margin-left: 6px;
  color: #28a745;
  font-size: 0.85em;
}

.v2-replay-dot,
.v2-cached-dot {
  margin-left: 6px;
  color: #dc3545;
  font-size: 0.85em;
}

#tm-share-btn[data-copied="true"] {
  border-color: #28a745;
  color: #28a745;
}

.marker-item {
  appearance: none;
  color: inherit;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.marker-item:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 1px;
}

.marker-badge {
  display: inline-flex;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: #6c757d;
  font-size: 10px;
  font-weight: 700;
}

.marker-glyph {
  display: inline-block;
  margin-right: 3px;
  font-size: .82em;
  line-height: 1;
}

.marker-item.positive .marker-badge,
.marker-item.stability .marker-badge { background: var(--marker-pos-bg, #28a745); }
.marker-item.negative .marker-badge,
.marker-item.volatility .marker-badge { background: var(--marker-neg-bg, #dc3545); }
.marker-item.absolute .marker-badge { background: var(--marker-abs-bg, #6c00cd); }
.marker-item.flip .marker-badge { background: var(--marker-flip-bg, #ff00ff); }

.marker-price {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.marker-value {
  color: var(--theme-text-secondary, #6c757d);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

.noUi-connect { background: #287fb6; }
.noUi-horizontal { height: 4px; }
.noUi-horizontal .noUi-handle {
  top: -10px;
  right: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border-color: #287fb6;
  cursor: grab;
}
.noUi-handle::before,
.noUi-handle::after { display: none; }

.v2-drawer {
  position: fixed;
  z-index: 2050;
  inset: 0 0 0 auto;
  width: min(420px, 94vw);
  padding: 28px 24px;
  border-left: 1px solid var(--v2-border);
  background: var(--v2-surface);
  box-shadow: -12px 0 36px rgb(0 0 0 / 15%);
  transform: translateX(100%);
  transition: transform 180ms ease;
}

.v2-drawer.is-open { transform: translateX(0); }

.v2-drawer-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
}

.v2-drawer-backdrop {
  position: fixed;
  z-index: 2040;
  inset: 0;
  background: rgb(20 24 31 / 58%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.v2-drawer-backdrop.is-open { opacity: 1; }

.v2-help-drawer {
  z-index: 2050;
  width: min(380px, 100vw);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.v2-help-header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid #dfe3e8;
  background: var(--v2-surface, #fff);
}

.v2-help-header h2 {
  margin: 0;
  color: #252a32;
  font-size: 18px;
  font-weight: 700;
}

.v2-help-header .v2-drawer-close {
  position: static;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #616975;
  font-size: 36px;
  font-weight: 300;
}

.v2-help-body {
  min-height: 0;
  padding: 16px 14px 28px;
  overflow: auto;
  overscroll-behavior: contain;
}

.v2-help-search {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 2px solid #1f2933;
  border-radius: 8px;
  outline: 0;
  background: #fff;
  color: #252a32;
  font: inherit;
  font-size: 14px;
}

.v2-help-search:focus { border-color: #287fb6; box-shadow: 0 0 0 3px rgb(40 127 182 / 16%); }

.v2-help-tour-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 12px; }
.v2-help-tour-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #cdc3ff;
  border-radius: 7px;
  background: #f0efff;
  color: #252a32;
  text-align: left;
}
.v2-help-tour-card strong { display: block; font-size: 13px; line-height: 1.15; }
.v2-help-tour-card small { display: block; margin-top: 2px; color: #69717d; font-size: 11px; }
.v2-help-tour-icon { font-size: 18px; }
.v2-help-tour-chevron { color: #69717d; font-size: 22px; }

.v2-help-category { border-bottom: 1px solid #e5e7ea; }
.v2-help-category-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  width: 100%;
  min-height: 43px;
  gap: 8px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #252a32;
  text-align: left;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}
.v2-help-category-icon { font-size: 15px; }
.v2-help-category-count { min-width: 22px; padding: 1px 6px; border-radius: 99px; background: #737c87; color: #fff; text-align: center; font-size: 11px; line-height: 18px; }
.v2-help-category-chevron { color: #6d7580; font-size: 12px; }
.v2-help-category-body { padding: 0 0 4px; }
.v2-help-entry { width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid #eff0f2; background: transparent; color: #252a32; text-align: left; font: inherit; }
.v2-help-entry:last-child { border-bottom: 0; }
.v2-help-entry-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.v2-help-entry-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.v2-help-entry-summary { margin: 3px 0 0 15px; color: #69717d; font-size: 11px; line-height: 1.35; }
.v2-help-entry-body { display: none; margin: 8px 0 4px; padding: 10px 12px; border: 1px solid #eedeb5; border-radius: 7px; background: #fff9e9; color: #40464f; font-size: 12px; line-height: 1.5; }
.v2-help-entry.is-expanded .v2-help-entry-body { display: block; }
.v2-help-entry-body p { margin: 0 0 9px; }
.v2-help-entry-body p:last-child { margin-bottom: 0; }
.v2-help-entry-body ul { margin: 0 0 9px; padding-left: 19px; }
.v2-help-entry-body li { margin-bottom: 3px; }
.v2-help-entry-body img, .v2-help-entry-body video { display: block; width: 100%; height: auto; margin: 0 0 8px; border-radius: 5px; }
.v2-help-entry-body a { color: #287fb6; }
.v2-help-entry-body .mk-pos { color: #28a745; font-weight: 700; }
.v2-help-entry-body .mk-neg { color: #dc3545; font-weight: 700; }
.v2-help-entry-body .mk-abs { color: #6c00cd; font-weight: 700; }
.v2-help-entry-body .mk-flip { color: #df00df; font-weight: 700; }
.v2-help-empty { padding: 20px 4px; color: #69717d; font-size: 13px; }

/* Forecast → Hedging Profile tour — reconstructed from the three saved Brave
   frames, not from a generic product-tour template. */
.v2-forecast-tour { position: fixed; inset: 0; z-index: 3100; }
.v2-forecast-tour-shade { position: absolute; inset: 0; background: rgb(0 0 0 / 58%); }
.v2-forecast-tour-focus {
  display: none; position: fixed; z-index: 1; border-radius: 8px; outline: 9999px solid rgb(0 0 0 / 58%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 76%), 0 8px 32px rgb(0 0 0 / 26%);
  pointer-events: none;
}
.v2-forecast-tour.is-spotlight .v2-forecast-tour-shade { display: none; }
.v2-forecast-tour.is-spotlight .v2-forecast-tour-focus { display: block; }
.v2-forecast-tour-card {
  position: fixed; z-index: 2; width: min(376px, calc(100vw - 32px)); padding: 20px 18px 16px;
  border: 1px solid #d9dce4; border-radius: 12px; background: #fff; color: #2a2f38;
  box-shadow: 0 12px 28px rgb(0 0 0 / 30%); font-size: 16px; line-height: 1.4;
}
.v2-forecast-tour-card[data-position="bottom-left"] { left: max(40px, 6vw); bottom: 30px; }
.v2-forecast-tour-card[data-position="center"] { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.v2-forecast-tour-card h3 { margin: 0 32px 10px 0; font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.v2-forecast-tour-card p { margin: 0; color: #586170; font-size: 15px; }
.v2-forecast-tour-card footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.v2-forecast-tour-progress { color: #858b95; font-size: 13px; }
.v2-forecast-tour-actions { display: flex; gap: 7px; }
.v2-forecast-tour-back, .v2-forecast-tour-next {
  min-width: 68px; height: 34px; border-radius: 7px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 700;
}
.v2-forecast-tour-back { border: 1px solid #d7dbe2; background: #fff; color: #68707d; }
.v2-forecast-tour-back:disabled { opacity: .45; }
.v2-forecast-tour-next { border: 1px solid #7058e9; background: #7159e9; color: #fff; }
.v2-forecast-tour-close {
  position: absolute; top: 0; right: 0; width: 38px; height: 38px; border: 0; border-radius: 0 11px 0 8px;
  background: #7259ec; color: #fff; font-size: 26px; font-weight: 300; line-height: 1; cursor: pointer;
}

@media (max-width: 767.98px) {
  .v2-help-drawer { width: 100vw; }
  .v2-help-header { min-height: 58px; padding-inline: 20px; }
  .v2-help-body { padding: 16px 38px 34px; }
  .v2-help-search { min-height: 54px; padding: 10px 24px; font-size: 18px; border-radius: 12px; }
  .v2-help-tour-row { gap: 16px; margin-block: 32px; }
  .v2-help-tour-card { min-height: 128px; padding: 16px; border-radius: 14px; }
  .v2-help-tour-card strong { font-size: 20px; }
  .v2-help-tour-card small { font-size: 15px; }
  .v2-help-category-header { min-height: 92px; font-size: 20px; }
  .v2-help-category-icon { font-size: 24px; }
  .v2-help-category-count { min-width: 36px; font-size: 17px; line-height: 30px; }
  .v2-help-category-chevron { font-size: 16px; }
  .v2-help-entry-title { font-size: 17px; }
  .v2-help-entry-summary { font-size: 14px; }
  .v2-forecast-tour-card { width: min(376px, calc(100vw - 32px)); padding: 18px 16px 15px; }
  .v2-forecast-tour-card[data-position="bottom-left"] { left: 16px; bottom: max(18px, env(safe-area-inset-bottom)); }
}

.v2-gate-note {
  position: fixed;
  z-index: 3000;
  right: 16px;
  bottom: 16px;
  max-width: 420px;
  padding: 10px 14px;
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  background: var(--v2-surface);
  color: var(--v2-ink);
  box-shadow: 0 8px 30px rgb(0 0 0 / 15%);
  font-size: 13px;
}

.v2-spin { animation: v2-spin 650ms linear; }
@keyframes v2-spin { to { transform: rotate(360deg); } }

#gex-chart .modebar {
  opacity: 0;
  transition: opacity 120ms ease;
}

#gex-chart:hover .modebar,
#gex-chart:focus-within .modebar {
  opacity: 1;
}

.v2-unimplemented-state {
  position: fixed;
  inset: auto 16px 16px auto;
  z-index: 3000;
  max-width: 360px;
  padding: 10px 12px;
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  background: var(--v2-surface);
  color: var(--v2-muted);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  font-size: 12px;
}

@media (max-width: 767.98px) {
  #gex-chart { height: 100% !important; }
  .marker-display .marker-item { border: 1px solid rgba(0, 0, 0, 0.08); }
  .v2-ohlc-frame { min-height: 390px; }
  .v2-strike-dock { max-width: 150px; }
  .heatmap-image-wrapper { border-radius: 0; }
  #heatmap-header-row { padding-inline: 6px; }
  .v2-history-nav-content .gex-nav-axis[data-kind="param"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* Global expiration selector: native checkbox affordance and cumulative presets. */
@media (max-width: 767px) {
  #gex-ctx-modal .gex-ctx-card {
    position: fixed;
    left: 8px !important;
    right: 8px !important;
    top: max(64px, env(safe-area-inset-top)) !important;
    width: calc(100vw - 16px);
    height: min(660px, calc(100dvh - 88px));
    max-height: calc(100dvh - 88px);
    transform: none !important;
    overflow: hidden;
  }
  #gex-ctx-modal .gex-ctx-cols { min-height: 0; grid-template-columns: 0.8fr 0.85fr 1.5fr; }
  #gex-ctx-modal .gex-ctx-col { min-width: 0; min-height: 0; }
  #gex-ctx-modal .gex-ctx-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #gex-ctx-modal .gex-ctx-list li { min-height: 44px; padding: 8px 4px; gap: 4px; }
  #gex-ctx-modal .ctx-exp-presets { flex-wrap: wrap; }
}

.marker-item[data-marker="F"] .marker-subtitle { white-space: normal; line-height: 1.25; }

.ctx-preset.is-active {
  color: #355bd6;
  border-color: #8ca4ff;
  background: #edf1ff;
}

#v2-marker-breakdown { position:fixed; z-index:10000; width:min(310px,calc(100vw - 32px)); padding:18px; border-radius:16px; background:white; color:#292e33; box-shadow:0 12px 35px #0004; font:14px system-ui; }
#v2-marker-breakdown>b {font-size:20px;}
#v2-marker-breakdown>button {float:right;border:0;background:none;font-size:20px;cursor:pointer;}
#v2-marker-breakdown p {margin:8px 0;color:#666;}
#v2-marker-breakdown svg {display:block;width:220px;max-width:100%;margin:10px auto;}
#v2-marker-breakdown .breakdown-row {display:grid;grid-template-columns:14px 1fr auto auto;gap:10px;align-items:center;margin:7px 0;}
#v2-marker-breakdown i {width:13px;height:13px;border-radius:4px;}
#v2-marker-breakdown small {display:block;color:#667;margin-top:8px;}
.tippy-box[data-theme~='marker-explanation'] {background:#fff;color:#292e33;border:1px solid #dce1e7;border-radius:7px;box-shadow:0 5px 14px #0002;font:16px/1.4 system-ui;}
.tippy-box[data-theme~='marker-explanation'] .tippy-content {padding:8px 11px;}
.tippy-box[data-theme~='marker-explanation'] .tippy-arrow {color:#fff;}
.tippy-box[data-theme~='marker-explanation'] hr {margin:7px 0;border:0;border-top:1px solid #ddd;}
.tippy-box[data-theme~='marker-explanation'] a {color:#529aff;text-decoration:none;}
#v2-marker-breakdown {max-height:calc(100vh - 16px);overflow:auto;}
#v2-marker-breakdown svg {width:260px;}
#gex-ohlc-chart .v2-expected-move-toggle {
  position: absolute; top: 8px; right: 12px; z-index: 3;
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: #8b95a5; cursor: pointer;
}
.v2-source-unavailable > :not(.v2-source-error) { display:none !important; }
.v2-source-error {padding:48px 24px;text-align:center;min-height:300px;background:#fff;color:#495057;}

#flow-footer { flex:0 0 auto; padding:6px 12px; background:#fff; font-size:11px; color:#76818e; text-align:center; }
#flow-footer[hidden], .flow-pagination[hidden] { display:none; }
#flow-captions { display:flex; justify-content:space-between; gap:20px; padding:10px 40px 4px 68px; font-size:11px; color:#76818e; }
#flow-captions[hidden], #flow-captions [hidden] { display:none; }
#flow-captions span:first-child { flex:1; }
#flow-captions span:last-child { max-width:25%; text-align:center; }
.flow-metric-switch { display:inline-block; width:30px; height:18px; background:#388c40; border-radius:10px; margin-right:7px; vertical-align:middle; }
.flow-metric-switch::before { content:''; display:block; width:14px; height:14px; margin:2px; background:white; border-radius:50%; }
[aria-pressed="true"] > .flow-metric-switch::before { transform:translateX(12px); }
body.v2-flow .gex-nav-axis[data-kind="flow-metric"] { display:inline-flex !important; flex-shrink:0; }
#flow-footer small { display:block; margin-top:4px; }
.flow-pagination { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:5px; }
.flow-pagination button { border:1px solid #dde2e8; background:#fff; border-radius:5px; min-width:30px; height:28px; }
.flow-pagination button:disabled { opacity:.35; }
.v2-flow-control-row { display:flex; flex-direction:column; gap:5px; margin:10px 0; }
.v2-flow-control-row > div { display:flex; gap:3px; flex-wrap:wrap; }
.v2-flow-control-row button { border:1px solid #e0e4eb; border-radius:5px; background:#fff; color:#687380; padding:5px 8px; }
.v2-flow-control-row button.active { background:#eeedfa; border-color:#b7b8f5; color:#585fce; }
body.v2-ready.v2-flow #gex-nav-subs { overflow:visible !important; min-width:0; flex-wrap:wrap !important; justify-content:flex-start !important; height:auto !important; }
body.v2-flow .v2-flow-nav-content { flex-wrap:wrap; height:auto; gap:5px; }
body.v2-flow #gex-nav-bar { flex-wrap:wrap; }
@media (max-width:640px) {
  body.v2-flow #gex-nav-subs { flex-basis:100%; }
  .v2-flow-nav-content .gex-nav-axis-btns { flex-wrap:wrap; }
  .v2-flow-control-row button, .flow-pagination button { min-height:44px; }
  #flow-chart-stage { min-height:360px; }
}