/* The Short Extremes panel (showcase/chapters/shorts/_extremes.html, short-extremes.js), the Short
   Extremes tab of the Short Interest & Volume chapter on /how-it-works/.
   One app frame drawn after the real page (intrinio_stock/templates/stock_data/shortex_leaderboard.html).
   Colours inside the frame are the page's own: the filter and table cards :42-56 and :175-184 (gradient
   #1e1e38 to #252545, #6759d1 border, the violet top rule), inputs and selects :59-82, Apply / Reset /
   Filter Columns :85-112, the column menu :115-121, the sliders and their value pills :124-164, the
   Optionable checkbox :167-172, the table head #6759d1 with its sort arrows and the zebra rows :187-215,
   the history note :36-41 and the watermark :26-32. The panel around it uses landing.css tokens.
   Everything is shx-* and scoped under .shx so it beats landing.css's element reset.
   JS state classes (all is-*): on the root .shx is-ready (data loaded and drawn), is-nodata, is-paused,
   is-still (reduced motion), is-filtered (a filter is on), is-menu (Filter Columns is open); on rows
   is-wait (not streamed in yet), is-leave (folding away), is-enter (fading in), is-moving (gliding to a
   new place, --shx-dy), is-tip (its summary is open); on cells is-sorted, is-fold (a column fading),
   is-na, is-up / is-down; on headers is-sorted and is-flash; on the arrows is-asc / is-desc; on the
   slider is-drag; on controls is-press; on the auto label is-idle / is-stopped.
   Only transform and opacity animate, plus short colour fades. Reduced motion (landing.css section 13,
   plus .is-still) and the paused state (.is-paused) stop it all. */

.shx {
  --shx-bg: #17162e; --shx-card: #1e1e38; --shx-card2: #252545; --shx-row: #21213f; --shx-row2: #28264b;
  --shx-hover: #332f5f; --shx-line: rgba(103, 89, 209, .2); --shx-violet: #6759d1; --shx-violet2: #c4b5fd;
  --shx-field: rgba(102, 126, 234, .12); --shx-field-b: rgba(102, 126, 234, .3);
  --shx-text: #f9fafb; --shx-cell: #e0e0ff; --shx-muted: #a3a9c2; --shx-na: #7f84a6;
  --shx-up: #4CD68F; --shx-down: #ff7b79; --shx-cyan: #0dcaf0; --shx-amber: #fbbf24;
  position: relative; min-width: 0;
}
html:not(.js) .shx-js, .shx.is-nodata .shx-js { display: none !important; }
.shx [hidden] { display: none !important; }

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

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

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

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

.shx-body { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px 18px 20px; }
/* The watermark (shortex_leaderboard.html:26-32), clipped to the body. */
.shx-wm { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; }
.shx-wm span {
  position: absolute; top: 58%; left: 50%; transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .03); font: 700 clamp(30px, 5vw, 48px)/1 var(--lp-font); white-space: nowrap;
}
.shx-body > :not(.shx-wm):not(.shx-tip) { position: relative; z-index: 1; }
.shx .shx-body > .shx-filters { z-index: 3; }   /* the column menu opens over the table */

/* ---- the two cards (:42-56, :175-184) ---- */
.shx-card {
  position: relative; min-width: 0; border: 1px solid var(--shx-violet); border-radius: 14px;
  background: linear-gradient(145deg, var(--shx-card) 0%, var(--shx-card2) 100%);
  box-shadow: 0 0 20px rgba(103, 89, 209, .15);
}
.shx-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #6759d1, #c4b5fd, #6759d1); pointer-events: none;
}

/* ---- the filter card ---- */
.shx .shx-filters { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 18px 18px 16px; }
.shx-frow { display: grid; grid-template-columns: 3fr 3fr 2fr 2fr 2.2fr; gap: 10px; align-items: center; }
.shx .shx-input, .shx .shx-sel {
  width: 100%; height: 36px; margin: 0; padding: 0 12px; border: 1px solid var(--shx-field-b); border-radius: 8px;
  background: var(--shx-field); color: rgba(255, 255, 255, .9); font: 500 13px/1.2 var(--lp-font); opacity: 1;
  transition: background-color .2s var(--lp-ease), border-color .2s var(--lp-ease);
}
.shx .shx-input::placeholder { color: var(--shx-muted); text-transform: uppercase; letter-spacing: .04em; }
.shx .shx-input { text-transform: uppercase; }
.shx .shx-sel { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer; }
.shx .shx-sel option { background: var(--shx-card); color: var(--shx-cell); }
.shx-select { position: relative; display: block; min-width: 0; }
.shx-select::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.6px solid var(--shx-muted); border-bottom: 1.6px solid var(--shx-muted); transform: rotate(45deg); pointer-events: none;
}
.shx .shx-input:hover:not(:disabled), .shx .shx-sel:hover:not(:disabled) { background: rgba(102, 126, 234, .18); border-color: rgba(102, 126, 234, .5); }
.shx .shx-input:focus-visible, .shx .shx-sel:focus-visible { outline: none; border-color: rgba(102, 126, 234, .7); box-shadow: 0 0 0 3px rgba(102, 126, 234, .25); }
.shx .shx-input:disabled, .shx .shx-sel:disabled, .shx .shx-btn:disabled, .shx .shx-sort:disabled, .shx .shx-range:disabled, .shx .shx-checkbox:disabled { cursor: default; opacity: 1; }

.shx .shx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 36px; margin: 0;
  padding: 0 14px; border: 1px solid var(--shx-violet); border-radius: 8px; color: #fff;
  font: 600 13px/1.2 var(--lp-font); white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--lp-ease), box-shadow .2s var(--lp-ease), transform .18s var(--lp-ease);
}
.shx .shx-btn--apply { background: rgba(103, 89, 209, .45); }
.shx .shx-btn--apply:hover:not(:disabled) { background: var(--shx-violet); box-shadow: 0 0 12px rgba(103, 89, 209, .5); }
.shx .shx-btn--reset { border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .1); color: #f87171; }
.shx .shx-btn--reset:hover:not(:disabled) { border-color: #ef4444; background: rgba(239, 68, 68, .22); }
.shx .shx-btn--cols { justify-content: space-between; border-color: #4CD68F; background: rgba(76, 214, 143, .18); }
.shx .shx-btn--cols:hover:not(:disabled), .shx.is-menu .shx-btn--cols { background: rgba(76, 214, 143, .32); }
.shx .shx-btn:focus-visible, .shx .shx-sort:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.shx-chev { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .2s var(--lp-ease); }
.shx.is-menu .shx-chev { transform: rotate(180deg); }
.shx .is-press { transform: scale(.95); }

/* the column menu (:115-121) */
.shx-cols { position: relative; display: block; min-width: 0; }
.shx-colmenu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 6; display: flex; flex-direction: column; gap: 1px;
  width: 240px; max-width: calc(100vw - 48px); max-height: 300px; overflow-y: auto; padding: 6px;
  border: 1px solid rgba(103, 89, 209, .4); border-radius: 10px; background: var(--shx-card);
  box-shadow: 0 14px 34px rgba(4, 2, 18, .6); animation: shx-drop .2s var(--lp-ease) both;
}
@keyframes shx-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.shx .shx-colitem {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 10px; border-radius: 6px;
  color: var(--shx-cell); font-size: 13px; cursor: pointer; transition: background-color .15s var(--lp-ease), transform .18s var(--lp-ease);
}
.shx .shx-colitem:hover, .shx .shx-colitem:focus-within { background: rgba(103, 89, 209, .2); }
.shx .shx-colitem input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--shx-violet); cursor: pointer; }

.shx .shx-notice { color: #fcd34d; font-size: 12px; }

/* the history note (:36-41, :674-715) */
.shx-history { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.shx .shx-history-t { flex: 1 1 320px; color: rgba(255, 255, 255, .8); font-size: 13px; }
.shx-select--asof { flex: 0 0 160px; }
.shx .shx-select--asof .shx-sel { height: 32px; }

/* the sliders (:124-164) and Optionable (:167-172) */
.shx-sliders { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 26px; }
.shx-slider { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.shx .shx-slabel, .shx .shx-check span { margin: 0; color: var(--shx-violet2); font: 700 11px/1.2 var(--lp-font); letter-spacing: .9px; text-transform: uppercase; }
.shx-srow { display: flex; align-items: center; gap: 12px; }
.shx .shx-range {
  --shx-fill: 0%;
  -webkit-appearance: none; appearance: none; width: 150px; height: 20px; margin: 0; padding: 0;
  background: transparent; cursor: pointer;
}
.shx .shx-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 10px;
  background: linear-gradient(90deg, #8b7ff0 0, #8b7ff0 var(--shx-fill), #334155 var(--shx-fill), #334155 100%);
}
.shx .shx-range::-moz-range-track { height: 6px; border-radius: 10px; background: #334155; }
.shx .shx-range::-moz-range-progress { height: 6px; border-radius: 10px; background: #8b7ff0; }
.shx .shx-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 3px solid #fff; border-radius: 50%;
  background: linear-gradient(135deg, #6759d1, #a78bfa); box-shadow: 0 2px 8px rgba(103, 89, 209, .5); transition: transform .2s var(--lp-ease), box-shadow .2s var(--lp-ease);
}
.shx .shx-range::-moz-range-thumb {
  width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%;
  background: linear-gradient(135deg, #6759d1, #a78bfa); box-shadow: 0 2px 8px rgba(103, 89, 209, .5); transition: transform .2s var(--lp-ease), box-shadow .2s var(--lp-ease);
}
.shx .shx-range:hover:not(:disabled)::-webkit-slider-thumb, .shx-slider.is-drag .shx-range::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(139, 127, 240, .25), 0 4px 12px rgba(103, 89, 209, .7); }
.shx .shx-range:hover:not(:disabled)::-moz-range-thumb, .shx-slider.is-drag .shx-range::-moz-range-thumb { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(139, 127, 240, .25), 0 4px 12px rgba(103, 89, 209, .7); }
.shx .shx-range:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 4px; border-radius: 10px; }
.shx .shx-sval {
  min-width: 56px; padding: 5px 12px; border: 1px solid var(--shx-violet); border-radius: 8px;
  background: rgba(103, 89, 209, .35); box-shadow: 0 2px 6px rgba(103, 89, 209, .3);
  color: #fff; font: 700 13px/1.2 var(--lp-font); font-variant-numeric: tabular-nums; text-align: center;
}
.shx .shx-check { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px auto; cursor: pointer; border-radius: 6px; transition: transform .18s var(--lp-ease); }
.shx .shx-checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--shx-violet); cursor: pointer; }
.shx .shx-checkbox:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

/* ---- the readout: what the demo shows now, and the count ---- */
.shx .shx-readout {
  display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px 10px 14px;
  border: 1px solid rgba(103, 89, 209, .3); border-radius: 10px; background: rgba(103, 89, 209, .1);
}
.shx-readout-dot { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--lp-accent); }
.shx .shx-readout-t { flex: 1; min-width: 0; color: var(--shx-text); font-size: 13px; line-height: 1.45; }
.shx-count {
  flex: none; align-self: center; padding: 3px 10px; border: 1px solid rgba(196, 181, 253, .35); border-radius: 999px;
  background: rgba(12, 10, 23, .35); color: var(--shx-violet2); font: 700 12px/1.4 var(--lp-font); font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: border-color .25s var(--lp-ease), color .25s var(--lp-ease);
}
.shx.is-filtered .shx-count { border-color: rgba(251, 191, 36, .55); color: var(--shx-amber); }

/* ---- the table card and the table (:174-216) ---- */
.shx .shx-tablecard { padding: 14px; overflow: hidden; }
.shx-tablewrap {
  min-width: 0; max-height: 440px; overflow: auto; border-radius: 8px;
  scrollbar-width: thin; scrollbar-color: #6759d1 rgba(103, 89, 209, .15);
}
.shx-tablewrap:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.shx .shx-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.shx .shx-th {
  position: sticky; top: 0; z-index: 2; padding: 0; border: 0; background: var(--shx-violet); color: #fff;
  font: 700 11px/1.25 var(--lp-font); letter-spacing: .6px; text-align: left; text-transform: uppercase; vertical-align: middle;
  transition: background-color .2s var(--lp-ease), opacity .22s var(--lp-ease), box-shadow .3s var(--lp-ease);
}
.shx .shx-th--rank, .shx .shx-th--sym { padding: 11px 14px; white-space: nowrap; }
.shx .shx-th--sym { left: 0; z-index: 3; }
.shx .shx-sort {
  display: flex; align-items: center; gap: 4px; width: 100%; min-width: 74px; max-width: 120px; min-height: 52px; margin: 0;
  padding: 8px 14px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left;
  text-transform: inherit; cursor: pointer; transition: transform .18s var(--lp-ease);
}
.shx .shx-th--wide .shx-sort { max-width: 132px; }
.shx .shx-th:has(.shx-sort:hover:not(:disabled)) { background: #5648b8; }
.shx .shx-th.is-sorted { background: #5a4cc4; }
.shx .shx-th.is-flash { animation: shx-flash 1.2s var(--lp-ease) 2; }
@keyframes shx-flash { 50% { background: #8b7ff0; box-shadow: inset 0 -3px 0 #fff; } }
.shx-arrow { flex: none; font-size: 12px; letter-spacing: 0; }
.shx-arrow::before { content: "\21C5"; opacity: .5; }
.shx-arrow.is-desc::before { content: "\2193"; opacity: 1; }
.shx-arrow.is-asc::before { content: "\2191"; opacity: 1; }

.shx .shx-table td, .shx .shx-table .shx-sym {
  height: 40px; padding: 6px 14px; border: 0; border-bottom: 1px solid var(--shx-line); background-color: var(--shx-row);
  color: var(--shx-cell); font-size: 13px; font-weight: 400; text-align: left; white-space: nowrap;
  transition: background-color .2s var(--lp-ease), opacity .3s var(--lp-ease), transform .3s var(--lp-ease);
}
.shx-row:nth-child(even) > td, .shx .shx-row:nth-child(even) > .shx-sym { background-color: var(--shx-row2); }
.shx .shx-table td.is-sorted { background-image: linear-gradient(rgba(139, 127, 240, .09), rgba(139, 127, 240, .09)); color: #fff; }
.shx .shx-table .shx-sym { position: sticky; left: 0; z-index: 1; color: var(--shx-cyan); font-weight: 700; letter-spacing: .02em; box-shadow: 1px 0 0 var(--shx-line); }
.shx .shx-table .shx-rank { color: var(--shx-muted); }
.shx .shx-table td.is-up { color: var(--shx-up); }
.shx .shx-table td.is-down { color: var(--shx-down); }
.shx .shx-table td.is-na { color: var(--shx-na); }
.shx .shx-row:hover > td, .shx .shx-row:hover > .shx-sym, .shx .shx-row.is-tip > td, .shx .shx-row.is-tip > .shx-sym { background-color: var(--shx-hover); }
.shx .shx-row:focus { outline: none; }
.shx .shx-row:focus-visible > td, .shx .shx-row:focus-visible > .shx-sym { box-shadow: inset 0 2px 0 var(--lp-accent), inset 0 -2px 0 var(--lp-accent); }
.shx-row[tabindex] { cursor: default; }
.shx .shx-empty td { height: 64px; color: var(--shx-muted); text-align: center; background: var(--shx-row); }

/* rows: streaming in, folding away, fading in, gliding to a new place; columns fading */
.shx .shx-row.is-wait > * { opacity: 0; transform: translateY(-6px); }
.shx .shx-row.is-leave > * { opacity: 0; transform: translateX(-14px); }
.shx .shx-row.is-enter > * { opacity: 0; }
.shx .shx-row.is-moving > * { transform: translateY(var(--shx-dy, 0px)); transition: background-color .2s var(--lp-ease), opacity .3s var(--lp-ease); }
.shx .shx-row.is-moving > .shx-sym { z-index: 2; }
.shx .shx-table .is-fold { opacity: 0; }

.shx .shx-pageinfo { margin: 10px 2px 0; color: #94a3b8; font-size: 12.5px; }

/* ---- legend ---- */
.shx .shx-legend { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--shx-muted); font-size: 12px; line-height: 1.5; }
.shx .shx-legend li { margin: 0; }
.shx .shx-legend b { color: var(--shx-cell); font-weight: 600; }

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

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

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

/* ---- smaller screens ---- */
@media (max-width: 1099px) {
  .shx-frow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .shx-frow > .shx-input, .shx-frow > .shx-select { grid-column: span 3; }
  .shx-frow > .shx-btn, .shx-frow > .shx-cols { grid-column: span 2; }
  .shx-sliders { gap: 14px 22px; }
  .shx .shx-check { margin-left: 0; }
}
@media (max-width: 640px) {
  .shx-bar-url { display: none; }
  .shx-body { padding: 14px 12px 16px; gap: 12px; }
  .shx-pghead { padding: 10px 12px; }
  .shx .shx-filters { padding: 16px 12px 14px; gap: 12px; }
  .shx-frow > .shx-input, .shx-frow > .shx-select, .shx-frow > .shx-cols { grid-column: 1 / -1; }
  .shx-frow > .shx-btn { grid-column: span 3; }
  .shx .shx-history-t { flex-basis: 100%; font-size: 12px; }
  .shx-select--asof { flex: 1 1 100%; }
  .shx-sliders { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .shx-srow { gap: 10px; }
  .shx .shx-range { flex: 1; width: auto; min-width: 0; }
  .shx .shx-check { margin: 2px 0 0; }
  .shx-colmenu { left: 0; right: auto; width: 100%; max-width: none; }
  .shx .shx-readout { flex-wrap: wrap; }
  .shx .shx-readout-t { flex-basis: calc(100% - 20px); font-size: 12.5px; }
  .shx-count { margin-left: 19px; }
  .shx .shx-tablecard { padding: 8px; }
  .shx-tablewrap { max-height: 400px; }
  .shx .shx-table td, .shx .shx-table .shx-sym { height: 36px; padding: 4px 10px; font-size: 12px; }
  .shx .shx-th--rank, .shx .shx-th--sym { padding: 9px 10px; }
  .shx .shx-sort { min-width: 64px; max-width: 100px; padding: 7px 10px; }
  .shx-controls { justify-content: center; }
  .shx .shx-sample-note { justify-content: center; text-align: center; }
}