/* The Exchange Volume panel (showcase/chapters/shorts/_exchange.html, short-exchange.js), the Exchange Volume
   tab of the Short Interest & Volume chapter on /how-it-works/.
   One app window with both real pages: intrinio_stock/templates/stock_data/exchange_volume_leaderboard.html
   and exchange_details.html. Colours inside the window are the pages' own: the tokens :5-15 of both
   (#6759d1 accent, #8b7de8 strong, #292d4a panel, #313654 panel strong, rgba(139,125,232,.16) border,
   65% white muted), the hero gradient :27-34, the KPI tiles :38-45, the sliders and violet value pills
   (leaderboard :55-94), the gradient pill tabs :103-112, the violet table head and #333754 row lines
   :120-134, #a99ef5 ticker and exchange names, the share bars :136-138, the amber / red off-exchange and
   increase colours (:146-147; details :251-258). The panel around the window uses landing.css tokens.
   Everything is she-* and scoped under .she so it beats landing.css's element reset.
   JS state classes (all is-*): on the root .she is-ready (data loaded and drawn), is-nodata, is-paused,
   is-still (reduced motion); on rows is-wait (not streamed in yet), is-leave (filtered out, fading),
   is-tip (its tooltip is open); on a view is-new (just opened); on numbers is-up / is-down / is-big; on
   the cursor is-on / is-click; on pressed controls is-press; on the auto label is-idle / is-stopped.
   Only transform and opacity animate (plus a short background fade on a pressed tab). Reduced motion
   (landing.css section 13, plus .is-still) and the paused state (.is-paused) stop it all. */

.she {
  --she-accent: #6759d1; --she-accent2: #8b7de8; --she-grad: linear-gradient(135deg, #6759d1 0%, #8b7de8 100%);
  --she-bg: #1f2238; --she-panel: #292d4a; --she-panel2: #313654; --she-row: #292d4a; --she-row2: #2f334f;
  --she-rowhi: #333460; --she-line: #333754; --she-border: rgba(139, 125, 232, .16);
  --she-text: #fff; --she-soft: #e4e2f3; --she-muted: rgba(255, 255, 255, .65); --she-name: #a99ef5;
  --she-amber: #f59e0b; --she-red: #ef4444; --she-red-t: #ff8a8a;
  position: relative; min-width: 0;
}
.she [hidden] { display: none !important; }
html:not(.js) .she-js, .she.is-nodata .she-js { display: none !important; }

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

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

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

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

/* the two pages, as tabs inside the window */
.she-nav {
  display: flex; gap: 4px; padding: 8px 18px 0; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--she-border); background: rgba(255, 255, 255, .02);
}
.she-nav::-webkit-scrollbar { display: none; }
.she .she-navbtn {
  flex: none; margin: 0 0 -1px; padding: 8px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0;
  background: transparent; color: var(--she-muted); font: 600 12.5px/1.2 var(--lp-font); cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--lp-ease), color .2s var(--lp-ease);
}
.she .she-navbtn[aria-selected="true"] { border-color: var(--she-border); background: var(--she-panel); color: #fff; }
.she .she-navbtn:hover:not([aria-selected="true"]) { color: #fff; background: rgba(255, 255, 255, .05); }
.she .she-navbtn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: -2px; }
.she .she-navbtn.is-press { background: rgba(103, 89, 209, .35); }

/* ---- the stage: both pages, one at a time once JS runs ---- */
.she-stage { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px 18px; }
html.js .she:not(.is-nodata) .she-stage { height: 620px; overflow: hidden; }
html.js .she:not(.is-ready):not(.is-nodata) .she-view--tk { display: none; }
.she-view { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
html.js .she:not(.is-nodata) .she-view { flex: 1 1 auto; }
.she-view.is-new { animation: she-in .32s var(--lp-ease) both; }
@keyframes she-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.she .she-poster-l { margin: 8px 0 0; color: #fff; font: 700 15px/1.3 var(--lp-font-title); }
.she.is-ready .she-poster-l { display: none; }
html.js .she:not(.is-nodata) .she-poster-l { display: none; }

/* the diagonal watermark (both pages :18-24) */
.she-wm { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; }
.she-wm span {
  position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg);
  color: rgba(255, 255, 255, .04); font: 800 clamp(34px, 6vw, 60px)/1 var(--lp-font); white-space: nowrap;
}

/* ---- the hero card: KPI tiles, sliders, search ---- */
.she-hero {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; padding: 14px 16px;
  border: 1px solid var(--she-border); border-radius: 16px;
  background: radial-gradient(circle at top left, rgba(103, 89, 209, .22), transparent 32%),
    radial-gradient(circle at right center, rgba(139, 125, 232, .14), transparent 30%),
    linear-gradient(145deg, #1e1e2f 0%, #292d4a 60%, #313654 100%);
}
.she-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.she-kpis--tk { grid-template-columns: repeat(3, minmax(0, auto)); }
.she-kpi { min-width: 0; padding: 9px 14px; border: 1px solid rgba(139, 125, 232, .12); border-radius: 12px; background: rgba(255, 255, 255, .05); }
.she .she-kpi-l { color: var(--she-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.she .she-kpi-v { margin-top: 3px; color: #fff; font: 800 17px/1.2 var(--lp-font); font-variant-numeric: tabular-nums; white-space: nowrap; }

.she-filters { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-right: auto; }
.she-slider { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.she .she-slider-l { margin: 0; color: var(--she-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.she-slider-row { display: flex; align-items: center; gap: 10px; }
.she .she-range {
  -webkit-appearance: none; appearance: none; width: 150px; height: 6px; margin: 6px 0; padding: 0;
  border: 0; border-radius: 10px; background: #334155; cursor: pointer;
}
.she .she-range:disabled { cursor: default; }
.she .she-range::-webkit-slider-runnable-track { height: 6px; border-radius: 10px; background: #334155; }
.she .she-range::-moz-range-track { height: 6px; border-radius: 10px; background: #334155; }
.she .she-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px;
  border: 2px solid #fff; border-radius: 50%; background: var(--she-grad); box-shadow: 0 2px 8px rgba(103, 89, 209, .5);
}
.she .she-range::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: var(--she-grad); box-shadow: 0 2px 8px rgba(103, 89, 209, .5); }
.she .she-range:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 4px; }
.she-pill {
  min-width: 48px; padding: 3px 9px; border-radius: 8px; background: var(--she-grad); color: #fff;
  font: 700 12px/1.3 var(--lp-font); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(103, 89, 209, .4);
}
.she .she-search {
  width: 190px; margin: 0; padding: 9px 12px; border: 1px solid rgba(139, 125, 232, .2); border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: #fff; font: 700 13px/1.2 var(--lp-font); letter-spacing: .08em; text-transform: uppercase;
}
.she .she-search::placeholder { color: var(--she-muted); }
.she .she-search:disabled, .she .she-gobtn:disabled { opacity: 1; cursor: default; }
.she .she-search:focus-visible { outline: none; border-color: rgba(139, 125, 232, .8); box-shadow: 0 0 0 3px rgba(103, 89, 209, .25); }
.she-form { display: flex; gap: 10px; margin: 0; }
.she .she-search--tk { width: 150px; }
.she .she-gobtn {
  margin: 0; padding: 9px 22px; border: 0; border-radius: 12px; background: var(--she-grad); color: #fff;
  font: 700 13px/1.2 var(--lp-font); cursor: pointer; transition: transform .18s var(--lp-ease);
}
.she .she-gobtn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.she .she-gobtn.is-press { transform: scale(.95); }
.she .she-notice { margin: -4px 0 0; color: #fcd34d; font-size: 12px; }

/* ---- view tabs (exchange_volume_leaderboard.html:217-224) ---- */
.she-ptabs { display: flex; gap: 6px; flex: none; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.she-ptabs::-webkit-scrollbar { display: none; }
.she .she-ptab {
  flex: none; margin: 0; padding: 7px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--she-muted);
  font: 700 12.5px/1.2 var(--lp-font); white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--lp-ease), color .2s var(--lp-ease), transform .18s var(--lp-ease);
}
.she .she-ptab[aria-selected="true"] { background: var(--she-grad); color: #fff; }
.she .she-ptab:hover:not([aria-selected="true"]) { background: rgba(255, 255, 255, .06); color: #fff; }
.she .she-ptab:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 1px; }
.she .she-ptab.is-press { transform: scale(.95); }

/* ---- the tables ---- */
.she-tablewrap {
  position: relative; min-width: 0; overflow-x: auto; border: 1px solid var(--she-border); border-radius: 14px; background: var(--she-panel);
  scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .5) transparent;
}
html.js .she:not(.is-nodata) .she-tablewrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
html.js .she:not(.is-nodata) .she-tablewrap--tk { flex: 0 1 auto; }
.she-tablewrap:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.she .she-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.she .she-table th {
  position: sticky; top: 0; z-index: 2; padding: 10px 14px; border: 0; background: var(--she-accent); color: #fff;
  font: 700 11.5px/1.2 var(--lp-font); letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.she .she-table--tk th { text-transform: none; letter-spacing: .01em; font-size: 12.5px; }
.she .she-table td { height: 38px; padding: 4px 14px; border: 0; border-bottom: 1px solid var(--she-line); color: var(--she-text); white-space: nowrap; background: var(--she-row);
  transition: opacity .3s var(--lp-ease), transform .3s var(--lp-ease); }
.she .she-row:nth-child(even) > td { background: var(--she-row2); }
.she .she-row.is-tip > td { background: var(--she-rowhi); }
.she .she-row:hover > td { background: var(--she-rowhi); }
/* the Ticker / Exchange column stays put while the table scrolls sideways */
.she .she-table .she-tkc { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--she-line); }
.she .she-table th.she-tkc { z-index: 3; }
.she .she-table td.she-empty { height: 120px; color: var(--she-muted); text-align: center; white-space: normal; }

.she-rk { display: inline-block; font-weight: 800; letter-spacing: .06em; color: var(--she-name); }
.she .she-tk { margin: 0; padding: 2px 4px; margin-left: -4px; border: 0; border-radius: 6px; background: transparent; font: 800 13px/1.3 var(--lp-font); letter-spacing: .06em; color: var(--she-name); cursor: pointer; }
.she .she-tk:hover { color: var(--she-accent2); text-decoration: underline; }
.she .she-ex { letter-spacing: .01em; font-weight: 700; }
.she .she-rk:focus { outline: none; }
.she .she-rk:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; border-radius: 6px; }
.she .she-tk.is-press { transform: scale(.94); background: rgba(103, 89, 209, .35); }
.she-vol { font-weight: 800; }
.she-pct { margin-left: 2px; color: var(--she-muted); font-size: .85em; font-weight: 600; }
.she-share { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.she-bar { display: block; width: 74px; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.she-fill { display: block; height: 100%; background: var(--she-grad); border-radius: inherit; transform-origin: left center; transform: scaleX(0); }
.she .is-up { color: var(--she-amber); font-weight: 800; }
.she .is-big { color: var(--she-red-t); font-weight: 800; }
.she .is-down { color: var(--she-red-t); font-weight: 800; }
.she-inc { font-weight: 800; }

/* streaming in, filtering out */
.she .she-row.is-wait > td { opacity: 0; transform: translateY(-6px); }
.she .she-row.is-leave > td { opacity: 0; transform: translateX(-10px); }

/* ---- the cursor (autoplay only) ---- */
.she-cursor {
  position: absolute; top: 0; left: 0; z-index: 6; width: 22px; height: 22px; margin: -3px 0 0 -4px; pointer-events: none;
  opacity: 0; transition: opacity .25s var(--lp-ease); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}
.she-cursor svg { display: block; transition: transform .14s var(--lp-ease); }
.she-cursor.is-on { opacity: 1; }
.she-cursor.is-click svg { transform: scale(.82); }
.she-cursor::after {
  content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -10px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgba(196, 163, 255, .9); opacity: 0; transform: scale(.4);
}
.she-cursor.is-click::after { animation: she-ring .45s var(--lp-ease) both; }
@keyframes she-ring { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.3); } }

/* ---- the row tooltip (hover or keyboard focus) ---- */
.she-tip {
  position: absolute; top: 0; left: 0; z-index: 7; width: 290px; 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(--she-soft); font-size: 12.5px; line-height: 1.45;
  pointer-events: none; opacity: 0; transition: opacity .16s var(--lp-ease);
}
.she-tip.is-on { opacity: 1; }
.she .she-tip-h { margin: 0 0 6px; color: #fff; font-weight: 700; font-size: 13.5px; }
.she .she-tip-h span { color: var(--she-muted); font-weight: 500; }
.she .she-tip-g { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; }
.she .she-tip-g dt { margin: 0; color: var(--she-muted); }
.she .she-tip-g dd { margin: 0; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.she .she-tip-n { margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--she-muted); }

/* ---- the readout: what the demo shows now ---- */
.she .she-readout {
  display: flex; align-items: flex-start; gap: 10px; min-height: 60px; margin: 0; padding: 11px 18px 13px;
  border-top: 1px solid var(--she-border); background: rgba(103, 89, 209, .1); color: #fff; font-size: 13px; line-height: 1.5;
}
.she-readout-dot { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--lp-accent); }

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

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

/* ---- smaller screens ---- */
@media (max-width: 1099px) {
  .she-filters { margin-right: 0; }
}
@media (max-width: 760px) {
  .she-hero { align-items: stretch; }
  .she-kpis { flex: 1 1 100%; }
  .she-filters { flex: 1 1 100%; }
  .she-slider { flex: 1 1 200px; }
  .she .she-range { flex: 1; width: auto; min-width: 0; }
  .she .she-search { flex: 1 1 100%; width: auto; }
  .she-form { flex: 1 1 100%; }
  .she .she-search--tk { flex: 1; min-width: 0; }
  .she-kpis--tk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .she-chrome-url { display: none; }
  .she-pghead { padding: 10px 12px; }
  .she .she-pgname { font-size: 16px; }
  .she-nav { padding: 6px 10px 0; }
  .she-stage { padding: 12px; gap: 10px; }
  html.js .she:not(.is-nodata) .she-stage { height: 700px; }
  .she-hero { padding: 12px; gap: 10px; border-radius: 14px; }
  .she-kpi { padding: 8px 10px; }
  .she .she-kpi-l { font-size: 9.5px; letter-spacing: .05em; }
  .she .she-kpi-v { font-size: 15px; }
  .she .she-table { font-size: 12px; }
  .she .she-table td { height: 34px; padding: 3px 10px; }
  .she .she-table th { padding: 9px 10px; }
  .she-bar { width: 52px; }
  .she .she-readout { min-height: 84px; padding: 10px 12px 12px; font-size: 12.5px; }
  .she-controls { justify-content: center; }
  .she .she-sample-note { justify-content: center; text-align: center; }
}
@media (max-width: 420px) {
  /* three ticker tiles do not fit a phone row: symbol and count side by side, the volume below */
  .she-kpis--tk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .she-kpis--tk .she-kpi:nth-child(2) { grid-column: 1 / -1; order: 3; }
}