/* The Gamma Exposure panel (showcase/chapters/greeks/_gex.html, greek-gex.js), the Gamma Exposure tab
   of the Greeks & Gamma Exposure chapter on /how-it-works/.
   One app frame drawn after the real page (intrinio_options/templates/intrinio/gamma_exposure.html).
   Colours inside the frame are the page's own: tokens :13-24, the purple table head #6759d1 :84-92,
   the centred Net GEX bar :136-163, the KPI cards :165-201 (#4CD68F up, #E24E4C down, #40C5F9 blue),
   the signal pills and row tints :213-274 (#ffb300 spot, #6759d1 expected move, #4CD68F call wall,
   #E24E4C put wall) and the watermark :275-287. The panel around it uses landing.css tokens.
   Everything is gkx-* and scoped under .gkx so it beats landing.css's element reset.
   JS state classes (all is-*): on the root .gkx is-ready (data loaded and drawn), is-nodata,
   is-paused, is-still (reduced motion); on rows is-wait (not streamed in yet), is-hot (a signal just
   landed), is-tip (its tooltip is open), is-t-spot / -call / -put / -move (row tint); on pills, legend
   dots and the readout is-t-*; on numbers is-up / is-down; on bar fills is-neg; on the select wraps
   is-press; on the auto label is-idle / is-stopped.
   Only transform and opacity animate, plus a short background-colour fade on a row tint. Reduced motion
   (landing.css section 13, plus .is-still) and the paused state (.is-paused) stop it all. */

.gkx {
  --gkx-bg: #1c1b36; --gkx-bg2: #22263a; --gkx-card: #2a2f45; --gkx-row: #1a1932; --gkx-row2: #1f1e3b;
  --gkx-line: rgba(255, 255, 255, .07); --gkx-line2: #333754;
  --gkx-head: #6759d1; --gkx-accent: #6366f1;
  --gkx-text: #f9fafb; --gkx-soft: #d1d5e4; --gkx-muted: #a3a9c2;
  --gkx-up: #4CD68F; --gkx-down: #E24E4C; --gkx-down-t: #ff7b79; --gkx-blue: #40C5F9;
  --gkx-spot: #ffb300; --gkx-move: #6759d1; --gkx-call: #4CD68F; --gkx-put: #E24E4C;
  position: relative; min-width: 0;
}
html:not(.js) .gkx-js, .gkx.is-nodata .gkx-js { display: none !important; }

/* ---- panel head ---- */
.gkx-head { max-width: 72ch; margin: 0 auto var(--lp-sp-5); text-align: center; }
.gkx .gkx-title { margin: 0; color: var(--lp-text); font: 700 var(--lp-fs-lg)/1.25 var(--lp-font-title); letter-spacing: -.01em; }
.gkx .gkx-lead { margin: var(--lp-sp-2) 0 0; color: var(--lp-muted); font-size: var(--lp-fs-base); line-height: 1.6; }

/* ---- the window ---- */
.gkx-window {
  position: relative; overflow: hidden; min-width: 0;
  border: 1px solid var(--lp-border-strong); border-radius: 16px; background: var(--gkx-bg);
  box-shadow: var(--lp-shadow), 0 0 80px color-mix(in srgb, var(--lp-primary) 10%, transparent);
}
.gkx-bar {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px;
  background: #0c0a17; border-bottom: 1px solid var(--gkx-line); white-space: nowrap; overflow: hidden;
}
.gkx-lights { display: inline-flex; gap: 6px; flex: none; }
.gkx-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.gkx-lights i + i { background: #febc2e; }
.gkx-lights i + i + i { background: #28c840; }
.gkx-bar-tab { overflow: hidden; text-overflow: ellipsis; padding: 4px 12px; border-radius: 8px 8px 0 0; background: var(--gkx-bg); color: #a7a3c9; font-size: 12px; }
.gkx-bar-tab b { color: #f4f2ff; font-weight: 800; letter-spacing: -.01em; }
.gkx-bar-url { overflow: hidden; text-overflow: ellipsis; color: #8e8ab4; font: 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.gkx-app {
  min-width: 0; color: var(--gkx-soft); font-size: 13px; line-height: 1.45;
  background: radial-gradient(900px 420px at 92% -10%, rgba(103, 89, 209, .14), transparent 60%), var(--gkx-bg);
}
.gkx .gkx-app p { margin: 0; }

/* green page header, as on the member pages */
.gkx-pghead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 18px;
  background: linear-gradient(90deg, #5aae8c, #6dbf9d); color: #fff;
}
.gkx .gkx-pgname { color: #fff; font: 700 18px/1.2 var(--lp-font-title); letter-spacing: .01em; }
.gkx-pghead .lp-tier { --lp-tier-c: #fff; }
.gkx-pghead-end { margin-left: auto; }
.gkx-pghead .lp-sample { border-color: rgba(255, 255, 255, .7); color: #fff; background: rgba(12, 10, 23, .25); }

.gkx-body { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px 18px 20px; }
/* The diagonal watermark (gamma_exposure.html:275-287), clipped to the body. */
.gkx-wm { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; }
.gkx-wm span {
  position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg);
  color: rgba(255, 255, 255, .045); font: 800 clamp(34px, 6vw, 64px)/1 var(--lp-font); white-space: nowrap;
}
.gkx-body > :not(.gkx-wm):not(.gkx-tip) { position: relative; z-index: 1; }

/* ---- filter bar ---- */
.gkx-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 0; }
.gkx .gkx-ticker { margin: 0; color: var(--gkx-text); font: 700 24px/1.2 var(--lp-font); letter-spacing: .2px; white-space: nowrap; }
.gkx-price { font-variant-numeric: tabular-nums; }
.gkx .gkx-field { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; }
.gkx-select { position: relative; display: inline-flex; border-radius: 10px; transition: transform .18s var(--lp-ease); }
.gkx-select::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.6px solid var(--gkx-muted); border-bottom: 1.6px solid var(--gkx-muted); transform: rotate(45deg); pointer-events: none;
}
.gkx .gkx-sel {
  appearance: none; -webkit-appearance: none; margin: 0; min-width: 132px; padding: 8px 32px 8px 12px;
  border: 1px solid var(--gkx-line2); border-radius: 10px; background: #2E2E40; color: #fff;
  font: 500 14px/1.2 var(--lp-font); cursor: pointer; opacity: 1;
}
.gkx .gkx-select--n .gkx-sel { min-width: 72px; }
.gkx .gkx-sel:disabled, .gkx .gkx-input:disabled, .gkx .gkx-go:disabled { cursor: default; opacity: 1; }
.gkx .gkx-sel:focus-visible, .gkx .gkx-input:focus-visible, .gkx .gkx-go:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.gkx-select.is-press { transform: scale(.96); }
.gkx-select.is-press .gkx-sel { border-color: var(--gkx-accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, .3); }
.gkx-search { display: inline-flex; align-items: center; gap: 8px; color: var(--gkx-muted); }
.gkx-search svg { flex: none; margin-right: -32px; position: relative; z-index: 1; }
.gkx .gkx-input {
  width: 150px; margin: 0; padding: 8px 10px 8px 34px; border: 1px solid var(--gkx-line2); border-radius: 10px;
  background: #2E2E40; color: #fff; font: 500 13px/1.2 var(--lp-font);
}
.gkx .gkx-input::placeholder { color: var(--gkx-muted); text-transform: uppercase; letter-spacing: .04em; }
.gkx .gkx-go {
  margin: 0; padding: 8px 18px; border: 0; border-radius: 8px; background: var(--gkx-accent); color: #fff;
  font: 600 13px/1.2 var(--lp-font); cursor: pointer;
}
.gkx .gkx-go:hover:not(:disabled) { background: #4f46e5; }
.gkx .gkx-notice { margin: -6px 0 0; color: #fcd34d; font-size: 12px; }

/* ---- KPI cards ---- */
.gkx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gkx-kpi {
  min-width: 0; padding: 14px 16px; border: 1px solid var(--gkx-line); border-radius: 10px;
  background: linear-gradient(135deg, var(--gkx-bg2) 0%, var(--gkx-card) 100%);
}
.gkx .gkx-kpi-t { color: var(--gkx-muted); font-size: 12.5px; }
.gkx .gkx-kpi-v { margin: 4px 0; color: #fff; font: 600 22px/1.2 var(--lp-font); font-variant-numeric: tabular-nums; }
.gkx .gkx-kpi-s { color: var(--gkx-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---- colours for numbers ---- */
.gkx .is-up { color: var(--gkx-up); }
.gkx .is-down { color: var(--gkx-down-t); }
.gkx .is-blue { color: var(--gkx-blue); }

/* ---- the readout: what the demo shows now ---- */
.gkx .gkx-readout {
  display: flex; align-items: flex-start; gap: 10px; min-height: 42px; padding: 10px 14px;
  border: 1px solid rgba(103, 89, 209, .3); border-radius: 10px; background: rgba(103, 89, 209, .1);
  color: var(--gkx-text); font-size: 13px; line-height: 1.45;
}
.gkx-readout-dot { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--lp-accent); }
.gkx-readout.is-t-spot .gkx-readout-dot { background: var(--gkx-spot); }
.gkx-readout.is-t-move .gkx-readout-dot { background: #8b7ff0; }
.gkx-readout.is-t-call .gkx-readout-dot { background: var(--gkx-call); }
.gkx-readout.is-t-put .gkx-readout-dot { background: var(--gkx-put); }
.gkx-readout.is-t-flip .gkx-readout-dot { background: #fff; }

/* ---- the table ---- */
.gkx-tablewrap {
  min-width: 0; overflow-x: auto; border-radius: 10px; border: 1px solid var(--gkx-line);
  scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .45) transparent;
}
.gkx-tablewrap:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.gkx .gkx-table { width: 100%; min-width: 780px; margin: 0; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.gkx .gkx-table th {
  padding: 10px 12px; border: 0; border-right: 1px solid rgba(255, 255, 255, .14); background: var(--gkx-head); color: #fff;
  font: 600 12.5px/1.2 var(--lp-font); letter-spacing: .02em; text-align: left; white-space: nowrap;
}
.gkx .gkx-table th:last-child { border-right: 0; }
.gkx .gkx-table td { height: 34px; padding: 4px 12px; border: 0; border-top: 1px solid var(--gkx-line); color: var(--gkx-soft); white-space: nowrap; background-color: transparent;
  transition: background-color .35s var(--lp-ease), opacity .35s var(--lp-ease), transform .35s var(--lp-ease); }
.gkx-row { background: var(--gkx-row); }
.gkx-row:nth-child(even) { background: var(--gkx-row2); }
.gkx .gkx-strike { color: #fff; font-weight: 600; }
.gkx .gkx-sig { width: 1%; min-width: 170px; }
.gkx-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.gkx .gkx-num.is-up { color: var(--gkx-up); }
.gkx .gkx-num.is-down { color: var(--gkx-down-t); }

/* row tints (gamma_exposure.html:249-260), lighter than the real 50% so the numbers stay readable */
.gkx .gkx-row.is-t-spot > td { background-color: rgba(255, 179, 0, .26); }
.gkx .gkx-row.is-t-call > td { background-color: rgba(76, 214, 143, .22); }
.gkx .gkx-row.is-t-put > td { background-color: rgba(226, 78, 76, .26); }
.gkx .gkx-row.is-t-move > td { background-color: rgba(103, 89, 209, .42); }
.gkx .gkx-row.is-t-spot .gkx-num.is-down, .gkx .gkx-row.is-t-put .gkx-num.is-down { color: #ffd0cf; }
.gkx .gkx-row.is-t-call .gkx-num.is-up, .gkx .gkx-row.is-t-spot .gkx-num.is-up { color: #c9f7de; }
.gkx .gkx-row.is-hot > .gkx-strike { box-shadow: inset 3px 0 0 #fff; }
.gkx .gkx-row.is-tip > td { box-shadow: inset 0 1px 0 rgba(196, 163, 255, .55), inset 0 -1px 0 rgba(196, 163, 255, .55); }
.gkx .gkx-row:focus { outline: none; }
.gkx .gkx-row:focus-visible > td { box-shadow: inset 0 2px 0 var(--lp-accent), inset 0 -2px 0 var(--lp-accent); }
.gkx-row[tabindex] { cursor: default; }

/* streaming in */
.gkx .gkx-row.is-wait > td { opacity: 0; transform: translateY(-6px); }

/* the signal pills (gamma_exposure.html:213-247, :261-274): dark text on the light fills for contrast */
.gkx-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 8px;
  color: #fff; font: 700 12px/1.5 var(--lp-font); white-space: nowrap;
}
.gkx-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gkx-pill.is-t-spot { background: var(--gkx-spot); color: #1a1d2e; }
.gkx-pill.is-t-move { background: var(--gkx-move); }
.gkx-pill.is-t-call { background: var(--gkx-call); color: #0f1d17; }
.gkx-pill.is-t-put { background: var(--gkx-put); }
.gkx-pill.is-t-flip.is-down { background: var(--gkx-put); color: #fff; }
.gkx-pill.is-t-flip.is-up { background: var(--gkx-call); color: #0f1d17; }
.gkx-pill.is-new { animation: gkx-pop .5s var(--lp-ease) both; }
@keyframes gkx-pop { from { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } to { opacity: 1; transform: none; } }

/* the centred Net GEX bar (gamma_exposure.html:136-163): positive grows right of centre, negative left */
.gkx .gkx-barc { width: 1%; padding-inline: 14px; }
.gkx-gbar { position: relative; display: block; width: 160px; height: 12px; border-radius: 4px; }
.gkx-gbar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(255, 255, 255, .14); }
.gkx-gfill {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%; border-radius: 0 3px 3px 0;
  background: var(--gkx-up); transform-origin: left center; transform: scaleX(0);
}
.gkx-gfill.is-neg { left: auto; right: 50%; border-radius: 3px 0 0 3px; background: var(--gkx-down); transform-origin: right center; }

/* ---- legend ---- */
.gkx .gkx-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--gkx-muted); font-size: 12px; line-height: 1.5; }
.gkx .gkx-legend li { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; }
.gkx .gkx-legend b { color: var(--gkx-soft); font-weight: 600; }
.gkx-ldot { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; }
.gkx-ldot.is-t-call { background: var(--gkx-call); }
.gkx-ldot.is-t-put { background: var(--gkx-put); }
.gkx-ldot.is-t-flip { background: linear-gradient(90deg, var(--gkx-call) 50%, var(--gkx-put) 50%); }
.gkx-ldot.is-t-spot { background: var(--gkx-spot); }
.gkx-ldot.is-t-move { background: #8b7ff0; }

/* ---- the row tooltip (hover or keyboard focus) ---- */
.gkx-tip {
  position: absolute; top: 0; left: 0; z-index: 5; width: 300px; max-width: calc(100% - 16px); padding: 12px 14px;
  border: 1px solid rgba(196, 163, 255, .35); border-radius: 12px; background: rgba(20, 18, 40, .97);
  box-shadow: 0 14px 34px rgba(4, 2, 18, .6); color: var(--gkx-soft); font-size: 12.5px; line-height: 1.45;
  pointer-events: none; opacity: 0; transition: opacity .16s var(--lp-ease);
}
.gkx-tip.is-on { opacity: 1; }
.gkx .gkx-tip-h { margin: 0 0 6px; color: #fff; font-weight: 700; font-size: 13.5px; }
.gkx .gkx-tip-h span { color: var(--gkx-muted); font-weight: 500; }
.gkx .gkx-tip-g { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; }
.gkx .gkx-tip-g dt { margin: 0; color: var(--gkx-muted); }
.gkx .gkx-tip-g dd { margin: 0; color: var(--gkx-text); font-variant-numeric: tabular-nums; text-align: right; }
.gkx .gkx-tip-s { margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--gkx-line); }
.gkx .gkx-tip-s b { color: #fff; }

/* ---- controls under the window (as regime-intraday.css) ---- */
.gkx-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lp-sp-3) var(--lp-sp-5); margin-top: var(--lp-sp-4); }
.gkx-play { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-2); }
.gkx-auto {
  position: relative; display: inline-flex; align-items: center; gap: var(--lp-sp-2); min-height: 38px; padding: 0 var(--lp-sp-3);
  border: 1px solid var(--lp-border); border-radius: var(--lp-r-sm); background: var(--lp-surface-2);
  color: var(--lp-muted); font-size: var(--lp-fs-xs); font-weight: 600;
}
.gkx-auto-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-green); }
.gkx-auto.is-idle .gkx-auto-dot, .gkx-auto.is-stopped .gkx-auto-dot { background: var(--lp-amber); }
.gkx-auto-bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--lp-text) 10%, transparent); }
.gkx-auto-bar i { display: block; height: 100%; background: var(--lp-primary); transform-origin: 0 50%; transform: scaleX(0); }
.gkx-auto.is-idle .gkx-auto-bar i, .gkx-auto.is-stopped .gkx-auto-bar i { background: var(--lp-amber); }
.gkx-ico-play, .gkx.is-paused .gkx-ico-pause { display: none; }
.gkx.is-paused .gkx-ico-play { display: inline; }
.gkx .gkx-sample-note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-2); margin: 0; color: var(--lp-muted); font-size: var(--lp-fs-xs); }
.gkx.is-still .gkx-play { display: none; }

/* ---- motion off ---- */
.gkx.is-paused *, .gkx.is-paused *::before, .gkx.is-paused *::after { animation-play-state: paused !important; }
.gkx.is-still *, .gkx.is-still *::before, .gkx.is-still *::after { animation: none !important; transition: none !important; }

/* ---- smaller screens ---- */
@media (max-width: 1099px) {
  .gkx-filters { justify-content: flex-start; }
  .gkx .gkx-ticker { flex: 1 0 100%; }
}
@media (max-width: 900px) {
  .gkx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gkx-bar-url { display: none; }
  .gkx-body { padding: 14px 12px 16px; gap: 12px; }
  .gkx-pghead { padding: 10px 12px; }
  .gkx .gkx-ticker { font-size: 20px; }
  .gkx .gkx-field { flex: 1 1 100%; justify-content: space-between; }
  .gkx .gkx-sel { min-width: 150px; }
  .gkx-search { flex: 1 1 100%; }
  .gkx .gkx-input { flex: 1; width: auto; min-width: 0; }
  .gkx-kpis { gap: 8px; }
  .gkx-kpi { padding: 10px 12px; }
  .gkx .gkx-kpi-v { font-size: 18px; }
  .gkx .gkx-kpi-t, .gkx .gkx-kpi-s { font-size: 11.5px; }
  .gkx .gkx-table { min-width: 700px; font-size: 12px; }
  .gkx .gkx-table td { height: 32px; padding: 3px 10px; }
  .gkx .gkx-table th { padding: 9px 10px; }
  .gkx-gbar { width: 110px; }
  .gkx .gkx-sig { min-width: 150px; }
  .gkx-pill { font-size: 11px; padding: 1px 7px; }
  .gkx-controls { justify-content: center; }
  .gkx .gkx-sample-note { justify-content: center; text-align: center; }
}
@media (max-width: 400px) {
  .gkx .gkx-sel { min-width: 0; }
  .gkx .gkx-field { gap: 6px; font-size: 12px; }
}