/* The GEX Heatmap panel (showcase/chapters/greeks/_gexmap.html, greek-gexmap.js), the GEX Heatmap tab
   of the Greeks & Gamma Exposure chapter on /how-it-works/.
   One app window with the real tool. Colours, radii and type come from the real page
   (intrinio_options/templates/intrinio/gex_heatmap.html: tokens :7-17, toolbar :27-139, tab pills
   :141-171, card and legend :190-234, tiles :254-324) and the details table from
   gex_details_heatmap.html (:24-57); the panel around it uses landing.css tokens.
   Everything is gkm-* and scoped under .gkm so it beats landing.css's element reset.
   JS state classes on .gkm: is-ready (grid built), is-nodata, is-filling (the fill wave), is-spotting
   (a spotlight is on), is-paused, is-still (reduced motion). On tiles and rows: is-lit, is-gone,
   is-spot, is-ink, is-press. Only opacity, transform, colours and the folding column width animate,
   and nothing does under reduced motion. */

.gkm {
  --gkm-card: #1a1a2e; --gkm-surface: #16213e; --gkm-accent: #6759d1; --gkm-accent-2: #8b5cf6;
  --gkm-bull: #4cd68f; --gkm-bear: #e24e4c; --gkm-muted: #8892b0; --gkm-border: rgba(103, 89, 209, .25);
  --gkm-bg: #17162b; --gkm-text: #e2e8f0; --gkm-cyan: rgb(0, 191, 255);
  --gkm-cw: 66px; --gkm-ch: 32px; --gkm-sw: 62px; --gkm-gap: 4px; --gkm-gh: 560px;
  position: relative; min-width: 0;
}
html:not(.js) .gkm-js, .gkm.is-nodata .gkm-js { display: none !important; }

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

/* ---- the window ---- */
.gkm-window {
  position: relative; overflow: hidden; min-width: 0;
  border: 1px solid var(--lp-border-strong); border-radius: 16px; background: var(--gkm-bg);
  box-shadow: var(--lp-shadow), 0 0 80px color-mix(in srgb, var(--lp-primary) 10%, transparent);
}
.gkm-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;
}
.gkm-lights { display: inline-flex; gap: 6px; flex: none; }
.gkm-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.gkm-lights i + i { background: #febc2e; }
.gkm-lights i + i + i { background: #28c840; }
.gkm-bar-tab { overflow: hidden; text-overflow: ellipsis; flex: none; padding: 4px 12px; border-radius: 8px 8px 0 0; background: var(--gkm-bg); color: #a7a3c9; font-size: 12px; }
.gkm-bar-tab b { color: #f4f2ff; font-weight: 800; letter-spacing: -.01em; }
.gkm .gkm-bar-url {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #8e8ab4; text-decoration: none;
  font: 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.gkm .gkm-bar-url:hover { color: #e0e7ff; text-decoration: underline; text-underline-offset: 3px; }

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

/* green page header, as on the member pages */
.gkm-pghead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 -16px; padding: 12px 18px;
  background: linear-gradient(90deg, #5aae8c, #6dbf9d); color: #fff;
}
.gkm .gkm-pgname { color: #fff; font: 700 17px/1.25 var(--lp-font-title); letter-spacing: -.01em; }
.gkm-pghead .lp-tier { --lp-tier-c: #fff3d6; background: rgba(12, 5, 32, .35); border-color: rgba(255, 255, 255, .45); }
.gkm-pghead .lp-sample { margin-left: auto; color: #fff3d6; border-color: rgba(255, 243, 214, .7); background: rgba(12, 5, 32, .3); }

/* ---- toolbar (heatmap-toolbar) ---- */
.gkm-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 10px 16px; border: 1px solid var(--gkm-border); border-radius: 12px; background: rgba(26, 26, 46, .9);
}
.gkm .gkm-tick { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.gkm-sym { color: var(--gkm-text); font: 800 24px/1.1 var(--lp-font); letter-spacing: .5px; }
.gkm-px { color: #fff; font: 600 18px/1.1 var(--lp-font); font-variant-numeric: tabular-nums; }
.gkm-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.gkm .gkm-ctrl { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.gkm-ctrl-l { color: var(--gkm-muted); font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.gkm .gkm-sel {
  height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--gkm-border); border-radius: 8px; cursor: pointer;
  color: #fff; font: 600 13px/1 var(--lp-font); appearance: none; -webkit-appearance: none;
  background: rgba(103, 89, 209, .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px;
  transition: border-color .2s, background-color .2s, transform .12s var(--lp-ease);
}
.gkm .gkm-sel:hover:not(:disabled), .gkm .gkm-sel:focus { border-color: var(--gkm-accent); background-color: rgba(103, 89, 209, .28); }
.gkm .gkm-sel:disabled { opacity: 1; cursor: default; }
.gkm .gkm-sel option { background: var(--gkm-card); color: #fff; }
.gkm-search {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; min-width: 140px; padding: 0 12px;
  border: 1px solid var(--gkm-border); border-radius: 8px; background: rgba(103, 89, 209, .15);
  color: var(--gkm-muted); font-size: 12px; font-weight: 500; white-space: nowrap; text-transform: uppercase;
}
.gkm-go {
  display: inline-flex; align-items: center; height: 34px; padding: 0 18px; border-radius: 8px;
  background: var(--gkm-accent); color: #fff; font: 700 13px/1 var(--lp-font);
}

/* ---- view pills (heatmap-tabs / tab-pills) ---- */
.gkm-tabs {
  display: inline-flex; align-self: flex-start; gap: 6px; padding: 5px;
  border: 1px solid var(--gkm-border); border-radius: 12px; background: rgba(26, 26, 46, .7);
}
.gkm .gkm-tab {
  padding: 7px 16px; border: 0; border-radius: 8px; cursor: pointer; background: none; white-space: nowrap;
  color: var(--gkm-muted); font: 600 12.5px/1.3 var(--lp-font); transition: color .2s, background-color .2s, transform .12s var(--lp-ease);
}
.gkm .gkm-tab:hover:not(:disabled) { color: #fff; background: rgba(103, 89, 209, .25); }
.gkm .gkm-tab[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, var(--gkm-accent) 0%, var(--gkm-accent-2) 100%); }
.gkm .gkm-tab:disabled { cursor: default; }

/* ---- the card (heatmap-card) ---- */
.gkm-card {
  position: relative; min-width: 0; padding: 16px 16px 12px;
  border: 1px solid var(--gkm-border); border-radius: 16px; background: var(--gkm-card); box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
}
.gkm-card[hidden] { display: none; }
.gkm-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.gkm .gkm-card-title { display: flex; align-items: center; gap: 10px; color: var(--gkm-text); font: 700 16px/1.2 var(--lp-font); }
.gkm .gkm-card-title::before {
  content: ""; display: inline-block; width: 4px; height: 20px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gkm-accent), var(--gkm-accent-2));
}
.gkm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--gkm-muted); font-size: 12px; }
.gkm-lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gkm-sw { display: inline-block; width: 28px; height: 10px; border-radius: 3px; }
.gkm-sw--pos { background: linear-gradient(90deg, rgba(76, 214, 143, .2), rgba(76, 214, 143, 1)); }
.gkm-sw--neg { background: linear-gradient(90deg, rgba(226, 78, 76, .2), rgba(226, 78, 76, 1)); }
.gkm .gkm-readout {
  min-height: 2.9em; margin: 0 0 10px; padding: 7px 12px; border-radius: 10px;
  border: 1px solid rgba(103, 89, 209, .18); background: rgba(103, 89, 209, .08); color: #cbd5e1; font-size: 12.5px; line-height: 1.45;
}

/* ---- the grid (cube_chart): scrolls inside the card, strike column and header row stay put ---- */
.gkm-gridwrap {
  position: relative; max-height: var(--gkm-gh); overflow: auto; padding: 0 0 6px;
  scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .55) transparent;
}
@media (min-width: 1000px) { .gkm-gridwrap { overscroll-behavior: contain; } }
.gkm-grid { width: max-content; }
.gkm-row { display: flex; margin-bottom: var(--gkm-gap); border-radius: 8px; }
.gkm-row[hidden] { display: none; }
.gkm-row--head { position: sticky; top: 0; z-index: 3; margin-bottom: 0; padding-bottom: var(--gkm-gap); background: var(--gkm-card); border-radius: 0; }
.gkm-row--cur { background: linear-gradient(90deg, transparent calc(var(--gkm-sw) + var(--gkm-gap)), rgba(0, 191, 255, .07) calc(var(--gkm-sw) + var(--gkm-gap))); }

.gkm-corner, .gkm-colh, .gkm-rowh, .gkm-cell {
  flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: var(--gkm-ch); margin-right: var(--gkm-gap); border-radius: 8px; overflow: hidden; white-space: nowrap;
  color: #fff; text-align: center; font: 700 11.5px/1 var(--lp-font); font-variant-numeric: tabular-nums;
}
/* strike / expiry labels: the purple label tiles */
.gkm-corner, .gkm-colh, .gkm-rowh {
  width: var(--gkm-sw); border: 1px solid rgba(103, 89, 209, .45);
  background: linear-gradient(135deg, rgba(103, 89, 209, .4) 0%, rgba(139, 92, 246, .25) 100%), var(--gkm-card);
  font-size: 10.5px;
}
.gkm-colh { width: var(--gkm-cw); height: 28px; font-size: 10px; font-weight: 600; transition: width .45s var(--lp-ease), margin .45s var(--lp-ease), opacity .3s, border-width .45s; }
.gkm-corner, .gkm-rowh { position: sticky; left: 0; z-index: 2; box-shadow: var(--gkm-gap) 0 0 var(--gkm-card); }
.gkm-corner { z-index: 4; height: 28px; }
.gkm-row--cur .gkm-rowh { background: linear-gradient(rgba(0, 191, 255, .85), rgba(0, 191, 255, .85)), var(--gkm-card); border-color: rgba(0, 191, 255, .6); box-shadow: var(--gkm-gap) 0 0 var(--gkm-card), 0 0 12px rgba(0, 191, 255, .35); }

/* value tiles (cube_box) */
.gkm-cell {
  position: relative; width: var(--gkm-cw); border: 1px solid rgba(255, 255, 255, .05); box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: default; opacity: 0; transform: scale(.86);
  transition: opacity .45s var(--lp-ease), transform .45s var(--lp-ease), background-color .4s, box-shadow .2s, border-color .2s,
    width .45s var(--lp-ease), margin .45s var(--lp-ease), border-width .45s;
}
.gkm-cell.is-lit { opacity: 1; transform: none; }
.gkm-cell.is-ink { color: #0b1f15; }
.gkm.is-filling .gkm-cell { transition-delay: var(--gkm-d, 0s); }
.gkm-cell:hover, .gkm-cell:focus-visible {
  z-index: 1; transform: scale(1.08); border-color: rgba(255, 255, 255, .25); box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.gkm-cell:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 1px; }
.gkm.is-spotting .gkm-cell.is-lit { opacity: .28; }
.gkm.is-spotting .gkm-cell.is-spot {
  z-index: 1; opacity: 1; transform: scale(1.08); border-color: rgba(255, 255, 255, .8);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 8px 24px rgba(0, 0, 0, .5);
}
/* a folding column (Expirations going down): width to 0, then hidden by the script */
.gkm-cell.is-gone, .gkm-colh.is-gone { width: 0; margin-right: 0; border-width: 0; opacity: 0; transform: none; }
.gkm-cell[hidden], .gkm-colh[hidden] { display: none; }

/* the no-JS poster: the same grid as a table */
.gkm.is-ready .gkm-poster { display: none; }
.gkm-ptable { border-collapse: separate; border-spacing: var(--gkm-gap); margin: calc(var(--gkm-gap) * -1); }
.gkm-ptable th, .gkm-ptable td {
  height: var(--gkm-ch); min-width: var(--gkm-cw); padding: 0 6px; border-radius: 8px; box-sizing: border-box;
  color: #fff; text-align: center; white-space: nowrap; font: 700 11.5px/1 var(--lp-font); font-variant-numeric: tabular-nums;
}
.gkm-ptable td { border: 1px solid rgba(255, 255, 255, .05); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.gkm-ptable th {
  border: 1px solid rgba(103, 89, 209, .45); font-size: 10.5px;
  background: linear-gradient(135deg, rgba(103, 89, 209, .4) 0%, rgba(139, 92, 246, .25) 100%), var(--gkm-card);
}
.gkm-ptable thead th { height: 28px; font-size: 10px; font-weight: 600; }
.gkm-ptable th[scope="row"], .gkm-ptable .gkm-pcorner { position: sticky; left: 0; z-index: 1; min-width: var(--gkm-sw); }
.gkm-ptable .gkm-pcorner { background: var(--gkm-card); }
.gkm-ptable .gkm-pcur th { background: linear-gradient(rgba(0, 191, 255, .85), rgba(0, 191, 255, .85)), var(--gkm-card); border-color: rgba(0, 191, 255, .6); }
.gkm-ptable .gkm-pcur td { box-shadow: 0 2px 8px rgba(0, 0, 0, .25), inset 0 0 0 999px rgba(0, 191, 255, .06); }
.gkm-g1 { background: rgba(76, 214, 143, .1); } .gkm-g2 { background: rgba(76, 214, 143, .2); }
.gkm-g3 { background: rgba(76, 214, 143, .3); } .gkm-g4 { background: rgba(76, 214, 143, .4); }
.gkm-g5 { background: rgba(76, 214, 143, .5); } .gkm-g6 { background: rgba(76, 214, 143, .6); color: #0b1f15 !important; }
.gkm-g7 { background: rgba(76, 214, 143, .7); color: #0b1f15 !important; } .gkm-g8 { background: rgba(76, 214, 143, .8); color: #0b1f15 !important; }
.gkm-g9 { background: rgba(76, 214, 143, .9); color: #0b1f15 !important; } .gkm-g10 { background: rgb(76, 214, 143); color: #0b1f15 !important; }
.gkm-r1 { background: rgba(226, 78, 76, .1); } .gkm-r2 { background: rgba(226, 78, 76, .2); }
.gkm-r3 { background: rgba(226, 78, 76, .3); } .gkm-r4 { background: rgba(226, 78, 76, .4); }
.gkm-r5 { background: rgba(226, 78, 76, .5); } .gkm-r6 { background: rgba(226, 78, 76, .6); }
.gkm-r7 { background: rgba(226, 78, 76, .7); } .gkm-r8 { background: rgba(226, 78, 76, .8); }
.gkm-r9 { background: rgba(226, 78, 76, .9); } .gkm-r10 { background: rgb(226, 78, 76); }

/* ---- tooltip ---- */
.gkm-tip {
  position: absolute; left: 0; top: 0; z-index: 5; min-width: 168px; padding: 9px 12px; border-radius: 12px; pointer-events: none;
  background: rgba(10, 12, 28, .97); border: 1px solid rgba(169, 158, 245, .28); color: #fff; font-size: 11.5px; line-height: 1.55;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .15s;
}
.gkm-tip[hidden] { display: none; }
.gkm-tip.is-on { opacity: 1; }
.gkm-tip b { display: block; margin-bottom: 1px; font-size: 12.5px; }
.gkm-tip-l { display: block; color: #cbd5e1; }
.gkm-tip strong { font-weight: 700; color: #fff; }
.gkm .gkm-pos { color: var(--gkm-bull); font-weight: 600; }
.gkm .gkm-neg { color: var(--gkm-bear); font-weight: 600; }
.gkm .gkm-flat { color: #aaa; }

/* ---- GEX Details (details-table) ---- */
.gkm-dwrap { max-height: var(--gkm-gh); overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .55) transparent; }
.gkm-dtable { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.gkm-dtable th {
  position: sticky; top: 0; z-index: 1; padding: 9px 11px; background: #6759d1; color: #fff;
  border-bottom: 2px solid #4a3fb5; text-align: center; white-space: nowrap; font-size: 11px; font-weight: 600;
}
.gkm-dtable td { padding: 8px 11px; color: #fff; text-align: center; white-space: nowrap; border-bottom: 1px solid #2a2a3d; transition: background-color .25s, opacity .25s; }
.gkm-dtable tr:hover td { background: #2a2a3d; }
.gkm-dtable.is-spotting tbody tr:not(.is-spot) td { opacity: .45; }
.gkm-dtable tbody tr.is-spot td { background: rgba(103, 89, 209, .22); }
.gkm-dtable tbody tr.is-spot td:first-child { box-shadow: inset 3px 0 0 var(--gkm-accent-2); }
.gkm-dte { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #333754; color: #ccc; font-size: 11px; font-weight: 700; }
.gkm-dbar { position: relative; display: inline-block; width: 104px; height: 20px; overflow: hidden; border-radius: 4px; background: #111; vertical-align: middle; }
.gkm-dbar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.gkm-dbar-t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; }
@keyframes gkm-row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gkm-dtable.is-enter tbody tr { animation: gkm-row-in .4s var(--lp-ease) both; animation-delay: calc(var(--gkm-i, 0) * 45ms); }

/* ---- controls under the window (as the regime panels) ---- */
.gkm-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--lp-sp-3) var(--lp-sp-5); margin-top: var(--lp-sp-4); }
.gkm-play { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-2); }
.gkm-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;
}
.gkm-auto-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-green); }
.gkm-auto.is-idle .gkm-auto-dot, .gkm-auto.is-stopped .gkm-auto-dot { background: var(--lp-amber); }
.gkm-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); }
.gkm-auto-bar i { display: block; height: 100%; background: var(--lp-primary); transform-origin: 0 50%; transform: scaleX(0); }
.gkm-auto.is-idle .gkm-auto-bar i, .gkm-auto.is-stopped .gkm-auto-bar i { background: var(--lp-amber); }
.gkm-ico-play, .gkm.is-paused .gkm-ico-pause { display: none; }
.gkm.is-paused .gkm-ico-play { display: inline; }
.gkm.is-still .gkm-play { display: none; }

/* ---- focus, press ---- */
.gkm :is(button, select, a, [tabindex]):focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.gkm .is-press { transform: scale(.94); }

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

/* ---- narrower ---- */
@media (max-width: 999px) {
  .gkm { --gkm-gh: 520px; }
}
@media (max-width: 640px) {
  .gkm { --gkm-cw: 62px; --gkm-sw: 54px; --gkm-ch: 30px; --gkm-gh: 440px; }
  .gkm-app { padding: 0 12px 14px; gap: 12px; }
  .gkm-pghead { margin: 0 -12px; padding: 10px 14px; }
  .gkm-bar-tab { display: none; }
  .gkm-toolbar { padding: 10px 12px; }
  .gkm-tools { justify-content: flex-start; width: 100%; }
  .gkm-search { flex: 1 1 120px; min-width: 0; }
  .gkm-card { padding: 12px 10px 10px; border-radius: 12px; }
  .gkm-legend { gap: 4px 12px; font-size: 11px; }
  .gkm-cell, .gkm-rowh, .gkm-ptable td, .gkm-ptable th { font-size: 10.5px; }
  .gkm-controls { justify-content: center; }
}
@media (max-width: 400px) {
  .gkm-search, .gkm-go { display: none; }
  .gkm-tabs { align-self: stretch; }
  .gkm .gkm-tab { flex: 1; padding: 7px 10px; }
}