/* The Intraday GEX and DEX panel (showcase/chapters/greeks/_intraday.html, greek-intraday.js), the
   `intraday` tab of the Greeks & Gamma Exposure chapter on /how-it-works/.
   One app window with the real page (intrinio_options/templates/intrinio/gex_dex_realtime.html).
   Colours inside the window are the page's own (:14-22: --accent #6759d1, --accent-light #a29bfe,
   green rgba(76,214,143), red rgba(226,78,76), muted #a0a3b1; the DEX card's #4fc3f7 :167-181;
   cards rgba(26,26,46,.7) :149-160); the panel around it uses landing.css tokens.
   Everything is gkd-* and scoped under .gkd so it beats landing.css's element reset. JS state
   classes are is-* only. Only transform and opacity animate. Reduced motion (landing.css section 13,
   plus .is-still) and the paused state (.is-paused) stop it all. */

.gkd {
  --gkd-accent: #6759d1; --gkd-accent-l: #a29bfe; --gkd-green: #4cd68f; --gkd-red: #e24e4c; --gkd-sky: #4fc3f7;
  --gkd-yellow: #ffdc50; --gkd-flip: #ff8c00;
  --gkd-bg: #17162b; --gkd-card: rgba(26, 26, 46, .7); --gkd-chip: rgba(255, 255, 255, .04);
  --gkd-line: rgba(255, 255, 255, .08); --gkd-text: #e2e3ee; --gkd-muted: #a0a3b1;
  --gkd-stage-h: 430px;
  position: relative; min-width: 0;
}
html:not(.js) .gkd-js, .gkd.is-nodata .gkd-js { display: none !important; }

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

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

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

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

.gkd-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px 18px 20px; }

/* ---- info banner (.info-banner :241-254) ---- */
.gkd .gkd-banner {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 16px;
  border: 1px solid rgba(103, 89, 209, .25); border-radius: 12px; background: rgba(103, 89, 209, .1);
  color: var(--gkd-accent-l); font-size: 13px;
}
.gkd-ico { flex: none; }
.gkd .gkd-banner-link {
  display: inline; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: #fff; font: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.gkd .gkd-banner-link:disabled { cursor: default; }

/* ---- control bar (.control-bar :28-108) ---- */
.gkd-ctrl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 18px; border: 1px solid var(--gkd-line); border-radius: 16px; background: var(--gkd-chip);
}
.gkd-quote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gkd-sym { color: #fff; font: 700 22px/1.1 var(--lp-font); letter-spacing: 1px; }
.gkd-px {
  padding: 3px 10px; border: 1px solid rgba(103, 89, 209, .3); border-radius: 8px; background: rgba(103, 89, 209, .15);
  color: var(--gkd-accent-l); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.gkd-px.is-flash { animation: gkd-flash .9s var(--lp-ease); }
.gkd-upd {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(76, 214, 143, .3); background: rgba(76, 214, 143, .08); color: var(--gkd-green);
  font-size: 11px; font-weight: 700; letter-spacing: .3px; font-variant-numeric: tabular-nums;
}
.gkd-upd-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.gkd-upd-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(76, 214, 143, .45);
  animation: gkd-pulse 2s ease-in-out infinite;
}
.gkd-upd.is-off { border-color: var(--gkd-line); background: var(--gkd-chip); color: var(--gkd-muted); }
.gkd-upd.is-off .gkd-upd-dot::after { display: none; }
.gkd-div { width: 1px; height: 28px; background: var(--gkd-line); }
.gkd .gkd-field { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.gkd-flabel { color: var(--gkd-muted); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }
.gkd .gkd-select {
  margin: 0; padding: 6px 10px; border: 1px solid rgba(103, 89, 209, .35); border-radius: 10px;
  background: rgba(103, 89, 209, .1); color: #fff; font: 13px/1.3 var(--lp-font); cursor: pointer; color-scheme: dark;
}
.gkd .gkd-select option { background: #333754; color: #fff; }
.gkd .gkd-select:hover { border-color: var(--gkd-accent); }
.gkd .gkd-select:disabled { opacity: 1; cursor: default; }
.gkd .gkd-search {
  display: flex; align-items: stretch; margin: 0 0 0 auto; overflow: hidden;
  border: 1px solid var(--gkd-line); border-radius: 10px; background: rgba(255, 255, 255, .06);
}
.gkd .gkd-input {
  width: 130px; min-width: 0; margin: 0; padding: 7px 12px; border: 0; background: transparent;
  color: #fff; font: 13px/1.3 var(--lp-font); outline: none;
}
.gkd .gkd-input::placeholder { color: var(--gkd-muted); opacity: 1; }
.gkd .gkd-search:focus-within { border-color: var(--gkd-accent); }
.gkd .gkd-go {
  margin: 0; padding: 7px 16px; border: 0; background: var(--gkd-accent); color: #fff;
  font: 600 13px/1.3 var(--lp-font); cursor: pointer;
}
.gkd .gkd-go:hover { background: #7b6ee0; }
.gkd .gkd-go:disabled { cursor: default; background: var(--gkd-accent); }
.gkd .gkd-msg { margin-top: -6px; color: var(--gkd-accent-l); font-size: 12px; }

/* ---- Intraday / Conventional pills and the Guide (.nav-pills-custom :112-146) ---- */
.gkd-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gkd-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.gkd .gkd-tab, .gkd .gkd-guide-btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 16px; border-radius: 10px;
  border: 1px solid var(--gkd-line); background: var(--gkd-chip); color: var(--gkd-muted);
  font: 600 13px/1.3 var(--lp-font); cursor: pointer; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .12s var(--lp-ease);
}
.gkd .gkd-tab:hover:not(:disabled) { border-color: var(--gkd-accent); color: #fff; }
.gkd .gkd-tab[aria-selected="true"] { background: var(--gkd-accent); border-color: var(--gkd-accent); color: #fff; }
.gkd .gkd-guide-btn { margin-left: auto; }
.gkd .gkd-guide-btn:hover:not(:disabled), .gkd .gkd-guide-btn[aria-expanded="true"] { border-color: var(--gkd-accent); color: #fff; }
.gkd :is(.gkd-tab, .gkd-guide-btn):disabled { cursor: default; }
.gkd-guide {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
  border: 1px solid rgba(103, 89, 209, .3); border-left: 3px solid var(--gkd-accent); border-radius: 12px;
  background: rgba(103, 89, 209, .08); color: #d6d7e4; font-size: 13px; line-height: 1.55;
}
.gkd .gkd-guide-h { color: #fff; font-weight: 700; }
.gkd-guide b { color: var(--gkd-accent-l); }

/* ---- the two chart cards (.chart-card :149-201) ---- */
.gkd-views { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gkd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.gkd-card {
  position: relative; overflow: hidden; min-width: 0; padding: 14px 16px 10px;
  border: 1px solid var(--gkd-line); border-radius: 16px; background: var(--gkd-card);
}
.gkd-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.gkd-card--gex::before { background: linear-gradient(90deg, var(--gkd-green), transparent); }
.gkd-card--dex::before { background: linear-gradient(90deg, var(--gkd-sky), transparent); }
.gkd-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.gkd .gkd-card-title { display: flex; align-items: center; gap: 9px; color: #fff; font: 700 15px/1.3 var(--lp-font); }
.gkd-cdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.gkd-card--gex .gkd-cdot { background: var(--gkd-green); box-shadow: 0 0 8px var(--gkd-green); }
.gkd-card--dex .gkd-cdot { background: var(--gkd-sky); box-shadow: 0 0 8px var(--gkd-sky); }
.gkd-tag { padding: 1px 7px; border: 1px solid var(--gkd-line); border-radius: 6px; background: var(--gkd-chip); color: var(--gkd-muted); font-size: 11px; font-weight: 500; }

/* the Call / Put to Net switch (.toggle-pill :204-238) */
.gkd-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px;
  border: 1px solid var(--gkd-line); border-radius: 10px; background: var(--gkd-chip);
  color: var(--gkd-muted); font-size: 12px; white-space: nowrap;
}
.gkd .gkd-switch {
  position: relative; flex: none; width: 40px; height: 20px; margin: 0; padding: 0;
  border: 0; border-radius: 20px; background: #444; cursor: pointer; transition: background-color .3s;
}
.gkd .gkd-switch i {
  position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  transition: transform .3s var(--lp-ease);
}
.gkd .gkd-switch[aria-checked="true"] { background: var(--gkd-accent); }
.gkd .gkd-switch[aria-checked="true"] i { transform: translateX(20px); }
.gkd .gkd-switch:disabled { cursor: default; }

/* legend: real buttons once the demo runs (Chart.js legend clicks hide a dataset) */
.gkd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; min-height: 22px; margin-bottom: 4px; }
.gkd .gkd-lg {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 2px 0; border: 0; background: none;
  color: rgba(255, 255, 255, .75); font: 12px/1.4 var(--lp-font);
}
.gkd button.gkd-lg { cursor: pointer; }
.gkd button.gkd-lg[aria-pressed="false"] { color: rgba(255, 255, 255, .4); text-decoration: line-through; }
.gkd-lg-sw { width: 14px; height: 8px; border-radius: 3px; flex: none; }
.gkd-sw-green { background: rgb(76, 214, 143); }
.gkd-sw-yellow { background: rgb(255, 220, 80); }
.gkd-sw-violet { background: rgb(103, 89, 209); }

/* the chart: a poster without JS, a canvas with it */
.gkd-stage { position: relative; min-width: 0; }
.gkd.is-live .gkd-stage { height: var(--gkd-stage-h); touch-action: pan-y; }
.gkd.is-live .gkd-poster { display: none; }
.gkd-poster { display: block; width: 100%; height: auto; }
.gkd-poster text { font-family: var(--lp-font); font-size: 11px; dominant-baseline: middle; }
.gkd-poster .gkd-pw { font-size: 15px; font-weight: 600; }
.gkd-poster .gkd-px10 { font-size: 10px; }
.gkd-poster .gkd-pt { font-size: 12px; font-weight: 600; }
.gkd-poster .gkd-plab { font-weight: 700; stroke-width: 3px; paint-order: stroke; }
.gkd-poster .gkd-pglow { filter: drop-shadow(0 0 4px rgba(255, 220, 0, .6)); }
.gkd-cv { display: block; width: 100%; height: 100%; cursor: crosshair; }

/* tooltip (:1147-1175) */
.gkd-tip {
  position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 4px;
  min-width: 150px; max-width: calc(100% - 8px); padding: 10px 12px; pointer-events: none;
  border: 1px solid rgba(103, 89, 209, .4); border-radius: 10px; background: rgba(15, 15, 30, .92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); color: rgba(200, 200, 220, .85); font-size: 12px; line-height: 1.35;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gkd-tip[hidden] { display: none; }
.gkd .gkd-tip-t { color: rgba(255, 255, 255, .9); font-weight: 700; }
.gkd-tip-row { display: flex; align-items: center; gap: 7px; }
.gkd-tip-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; border: 1px solid rgba(255, 255, 255, .5); }

/* ---- marker key under the cards ---- */
.gkd .gkd-keys { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 2px 4px 0; list-style: none; }
.gkd .gkd-key {
  display: flex; align-items: center; gap: 8px; margin: 0; color: var(--gkd-muted); font-size: 12.5px;
  transition: opacity .4s var(--lp-ease);
}
.gkd-key b { color: #fff; font-weight: 600; }
.gkd-key.is-dim { opacity: .35; }
.gkd-key-sw { width: 18px; height: 0; flex: none; border-top: 3px solid rgb(255, 220, 0); }
.gkd-key--flip .gkd-key-sw { border-top: 2px dashed rgb(255, 140, 0); }
.gkd-key--pole .gkd-key-sw { border-top: 2px dashed rgb(76, 214, 143); }

/* ---- controls under the window (as regime-intraday.css) ---- */
.gkd-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); }
.gkd-play { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-2); }
.gkd-auto {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 2px;
  border: 1px solid var(--lp-border); border-radius: var(--lp-r-pill); background: var(--lp-surface-2);
  color: var(--lp-muted); font-size: var(--lp-fs-xs); font-weight: 600; white-space: nowrap;
}
.gkd-auto-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-green); }
.gkd-auto.is-idle .gkd-auto-dot, .gkd-auto.is-stopped .gkd-auto-dot { background: var(--lp-amber); }
.gkd-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); }
.gkd-auto-bar i { display: block; height: 100%; background: var(--lp-primary); transform-origin: 0 50%; transform: scaleX(0); }
.gkd-auto.is-idle .gkd-auto-bar i, .gkd-auto.is-stopped .gkd-auto-bar i { background: var(--lp-amber); }
.gkd-ico-play, .gkd.is-paused .gkd-ico-pause { display: none; }
.gkd.is-paused .gkd-ico-play { display: inline; }
.gkd .gkd-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); }
.gkd.is-still .gkd-play { display: none; }

/* ---- focus and press ---- */
.gkd :is(button, input, select, a, canvas, [tabindex]):focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.gkd .gkd-cv:focus-visible { outline-offset: -2px; border-radius: 8px; }
.gkd .is-press { transform: scale(.94); }

/* ---- motion ---- */
@keyframes gkd-pulse { 0%, 100% { opacity: .9; transform: scale(.6); } 50% { opacity: 0; transform: scale(1.5); } }
@keyframes gkd-flash { 0% { background: rgba(255, 220, 0, .28); } 100% { background: rgba(103, 89, 209, .15); } }
.gkd.is-paused *, .gkd.is-paused *::before, .gkd.is-paused *::after { animation-play-state: paused !important; }
.gkd.is-still *, .gkd.is-still *::before, .gkd.is-still *::after { animation: none !important; transition: none !important; }

/* ---- narrower: the cards stack ---- */
@media (max-width: 999px) {
  .gkd-cards { grid-template-columns: minmax(0, 1fr); }
  .gkd { --gkd-stage-h: 400px; }
}
@media (max-width: 640px) {
  .gkd { --gkd-stage-h: 380px; }
  .gkd-body { padding: 14px 12px 16px; gap: 12px; }
  .gkd-pghead { padding: 10px 14px; }
  .gkd-bar-url { display: none; }
  .gkd-ctrl { padding: 12px; gap: 10px; }
  .gkd-div { display: none; }
  .gkd-quote { width: 100%; }
  .gkd .gkd-search { width: 100%; margin-left: 0; }
  .gkd .gkd-input { flex: 1; width: auto; }
  .gkd .gkd-banner { align-items: flex-start; padding: 9px 12px; font-size: 12.5px; }
  .gkd-card { padding: 12px 10px 8px; }
  .gkd .gkd-guide-btn { margin-left: 0; }
  .gkd-controls { justify-content: center; }
  .gkd .gkd-sample-note { justify-content: center; text-align: center; }
}
@media (max-width: 400px) {
  .gkd .gkd-tab, .gkd .gkd-guide-btn { padding: 7px 11px; font-size: 12px; }
  .gkd-toggle { padding: 4px 8px; gap: 6px; }
}