/* The Technicals panel (showcase/chapters/analytics/_technicals.html, sa-technicals.js), the Technicals tab of the
   Stock Analytics chapter on /how-it-works/.
   One app window with two real pages behind a switch: intrinio_stock/templates/stock_data/technical_analysis.html
   and stock_charts/top_50_aggregate_technicals.html. Colours inside the window are the pages' own:
     Technical Analysis: .gauge-card (technical_analysis.html:32-45, raised as on hover :47-50 for Summary),
       .gauge-title (:58-66), the gauge bands, ring, track and ticks (:253-386), .gauge-value (:115-120) with the
       result colours (:429-434), .gauge-subtext (:105-113) with its three colours (:440-444), .chart-card (:68-73)
       and the table cells (:86-88), signal colours (:684-695), .chart-dropdown (:122-130).
     Top-50: .modern-card with its top rule (top_50_aggregate_technicals.html:30-60), .metric-value / .metric-label
       (:61-75), .progress-container / labels / values / .modern-progress-bar and its parts (:76-140), the band
       gradients (:2213-2218, :2242-2249), .chart-container (:20-29), .info-btn-main (:544-559), the zone and dot
       colours of the scatter (:1859-1881, :1996-2012).
   The panel around the window uses landing.css tokens. Everything is sa-tech-* and scoped under .sa-tech.
   JS state classes (all is-*): on the root .sa-tech is-ready (data loaded and drawn), is-nodata, is-paused, is-still
   (reduced motion); on rows is-wait (not streamed in yet) and is-new (reading just changed); on a view is-new (just
   opened); on the chart frame is-new (re-laid out); on pressed controls is-press; on the auto label is-idle /
   is-stopped.
   Only transform and opacity animate. Reduced motion (landing.css section 13, plus .is-still) and the paused state
   (.is-paused) stop it all. */

.sa-tech {
  --sa-tech-accent: #6759d1; --sa-tech-violet: #a78bfa; --sa-tech-lilac: #c4b5fd;
  --sa-tech-bg: #1a1d2e; --sa-tech-card: linear-gradient(135deg, #22263a, #2a2f45);
  --sa-tech-text: #f9fafb; --sa-tech-muted: #9ca3af;
  --sa-tech-up: #4cd68f; --sa-tech-dn: #ef4444; --sa-tech-info: #5fd3f3;
  position: relative; min-width: 0;
}
.sa-tech [hidden] { display: none !important; }
html:not(.js) .sa-tech-js, .sa-tech.is-nodata .sa-tech-js { display: none !important; }

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

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

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

/* green page header, as the other panels */
.sa-tech-pghead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 18px;
  background: linear-gradient(90deg, #5aae8c, #6dbf9d); color: #fff;
}
.sa-tech .sa-tech-pgname { color: #fff; font: 700 18px/1.2 var(--lp-font-title); letter-spacing: .01em; }
.sa-tech-pghead .lp-tier { --lp-tier-c: #fff; }
.sa-tech-pghead-end { margin-left: auto; }
.sa-tech-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 */
.sa-tech-switch {
  display: flex; gap: 4px; padding: 8px 18px 0; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid rgba(139, 125, 232, .16); background: rgba(255, 255, 255, .02);
}
.sa-tech-switch::-webkit-scrollbar { display: none; }
.sa-tech .sa-tech-swbtn {
  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: rgba(255, 255, 255, .65); 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);
}
.sa-tech .sa-tech-swbtn[aria-selected="true"] { border-color: rgba(139, 125, 232, .16); background: #292d4a; color: #fff; }
.sa-tech .sa-tech-swbtn:hover:not([aria-selected="true"]) { color: #fff; background: rgba(255, 255, 255, .05); }
.sa-tech .sa-tech-swbtn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: -2px; }
.sa-tech .sa-tech-swbtn.is-press { background: rgba(103, 89, 209, .35); }

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

/* drawn controls: the timeframe select, the ticker search, Go (.chart-dropdown) */
.sa-tech-ctl {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px;
  border: 1px solid #333754; border-radius: 10px; background: #2e2e40; color: #fff; font-size: 13px; white-space: nowrap;
}
.sa-tech-select { justify-content: space-between; min-width: 96px; }
.sa-tech-search { min-width: 170px; color: #8b8fa8; background: #232637; }
.sa-tech-go { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 8px; background: var(--sa-tech-accent); color: #fff; font-weight: 600; font-size: 13px; }

/* ================= Technical Analysis ================= */
.sa-tech-tahead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sa-tech .sa-tech-ticker { flex: 1 1 auto; color: #fff; font: 700 22px/1.2 var(--lp-font-title); font-variant-numeric: tabular-nums; }

.sa-tech-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 6px; }
.sa-tech-gcard {
  min-width: 0; padding: 10px 8px 12px; border: 1px solid rgba(99, 102, 241, .2); border-radius: 20px; text-align: center;
  background: linear-gradient(145deg, rgba(42, 47, 69, .6), rgba(34, 38, 58, .8));
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.sa-tech-gcard--sum { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(99, 102, 241, .2), inset 0 1px 0 rgba(255, 255, 255, .05); }
.sa-tech .sa-tech-gtitle { color: #e0e7ff; opacity: .9; font: 700 12.5px/1.2 var(--lp-font); letter-spacing: 1.5px; text-transform: uppercase; }
.sa-tech-gsvg { display: block; width: 100%; max-width: 250px; height: auto; margin: 4px auto 0; overflow: visible; }
.sa-tech-gglow { fill: none; stroke: rgba(99, 102, 241, .15); stroke-width: 2; }
.sa-tech-gtrack { fill: none; stroke: rgba(255, 255, 255, .05); stroke-width: 22; }
.sa-tech-gseg { fill: none; stroke-width: 22; }
.sa-tech-gtick { stroke: rgba(255, 255, 255, .2); stroke-width: 2; }
.sa-tech-glab { fill: #fff; font: 500 11px var(--lp-font); text-anchor: middle; dominant-baseline: middle; }
.sa-tech-anchor { stroke: rgba(255, 255, 255, .3); stroke-width: 2; }
.sa-tech-gresult { position: relative; margin-top: -26px; }
.sa-tech .sa-tech-gstatus { font: 700 22px/1.2 var(--lp-font); text-shadow: 0 0 20px currentColor; }
.sa-tech-gstatus[data-sa-tech-tone="sb"] { color: #22c55e; }
.sa-tech-gstatus[data-sa-tech-tone="b"] { color: #4ade80; }
.sa-tech-gstatus[data-sa-tech-tone="n"] { color: #cbd5e1; }
.sa-tech-gstatus[data-sa-tech-tone="s"] { color: #ff9f40; }
.sa-tech-gstatus[data-sa-tech-tone="ss"] { color: #ff4d4d; }
.sa-tech .sa-tech-gcounts {
  display: inline-block; margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .2);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sa-tech-gcounts b { font-weight: 600; }
.sa-tech-cb { color: #4ade80; }
.sa-tech-cn { margin: 0 8px; color: #8b9dc3; }
.sa-tech-cs { color: #ff4d4d; }

.sa-tech-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-height: 0; }
html.js .sa-tech:not(.is-nodata) .sa-tech-tables { flex: 1 1 auto; }
.sa-tech-tcard { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px; border-radius: 10px; background: var(--sa-tech-card); }
.sa-tech .sa-tech-tname { margin: 0 0 8px; color: #fff; font: 600 15px/1.2 var(--lp-font-title); }
.sa-tech-tablewrap {
  position: relative; min-width: 0; min-height: 0; overflow: auto; border-radius: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .7) transparent;
}
html.js .sa-tech:not(.is-nodata) .sa-tech-tablewrap { flex: 1 1 auto; }
.sa-tech-tablewrap:focus-visible, .sa-tech-chartwrap:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.sa-tech .sa-tech-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sa-tech .sa-tech-table th {
  position: sticky; top: 0; z-index: 1; padding: 8px 10px; border: 0; border-bottom: 1px solid #374151; background: #262a40;
  color: #e5e7eb; font: 700 12px/1.2 var(--lp-font); text-align: left; white-space: nowrap;
}
.sa-tech .sa-tech-table td {
  position: relative; padding: 7px 10px; border: 0; border-bottom: 1px solid rgba(55, 65, 81, .6); color: var(--sa-tech-text);
  background: var(--sa-tech-card); transition: opacity .28s var(--lp-ease);
}
.sa-tech .sa-tech-table td:first-child { white-space: normal; }
.sa-tech .sa-tech-table td + td { white-space: nowrap; }
.sa-tech-sig { font-weight: 600; }
.sa-tech-sig--buy { color: #4ade80; }
.sa-tech-sig--sell { color: #ef4444; }
.sa-tech-sig--neu { color: #d1d5db; }
.sa-tech .sa-tech-row.is-wait > td { opacity: 0; }
.sa-tech .sa-tech-row.is-new > td::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(139, 125, 232, .32);
  animation: sa-tech-flash 1.4s ease-out both;
}
@keyframes sa-tech-flash { from { opacity: 1; } to { opacity: 0; } }

/* ================= Top-50 Aggregate Technicals ================= */
.sa-tech-t5top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sa-tech-pills { display: flex; flex: 1 1 auto; gap: 6px; min-width: 0; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.sa-tech-pills::-webkit-scrollbar { display: none; }
.sa-tech .sa-tech-pill {
  flex: none; margin: 0; padding: 6px 14px; border: 1px solid var(--sa-tech-accent); border-radius: 999px; background: transparent;
  color: var(--sa-tech-violet); 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), transform .18s var(--lp-ease);
}
.sa-tech .sa-tech-pill:hover:not([aria-pressed="true"]) { background: rgba(103, 89, 209, .18); color: #fff; }
.sa-tech .sa-tech-pill[aria-pressed="true"] { background: var(--sa-tech-accent); color: #fff; }
.sa-tech .sa-tech-pill:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.sa-tech .sa-tech-pill.is-press { transform: scale(.94); }
.sa-tech-t5top .sa-tech-select { flex: none; min-width: 72px; }
.sa-tech .sa-tech-infobtn {
  display: inline-flex; flex: none; align-items: center; margin: 0; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 6px;
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background-color .2s var(--lp-ease);
}
.sa-tech .sa-tech-infobtn:hover, .sa-tech .sa-tech-infobtn[aria-expanded="true"] { background: rgba(255, 255, 255, .2); }
.sa-tech .sa-tech-infobtn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

/* the info note: inline under the controls, the real page opens a modal */
.sa-tech-info {
  position: absolute; top: 46px; right: 0; z-index: 4; display: flex; flex-direction: column; gap: 6px; max-width: 420px;
  padding: 12px 16px; border: 1px solid rgba(167, 139, 250, .55); border-radius: 12px;
  background: rgba(20, 18, 40, .96); color: var(--sa-tech-text); font-size: 12.5px; line-height: 1.5; box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
html.js .sa-tech:not(.is-nodata) .sa-tech-info:not([hidden]) { animation: sa-tech-in .26s var(--lp-ease) both; }
.sa-tech .sa-tech-info-h { color: #fff; font-weight: 700; font-size: 13.5px; }
html:not(.js) .sa-tech .sa-tech-info, .sa-tech.is-nodata .sa-tech-info { display: none !important; }

.sa-tech-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sa-tech-mcard {
  position: relative; min-width: 0; overflow: hidden; padding: 14px 18px; border: 1px solid rgba(59, 130, 246, .2); border-radius: 20px;
  background: var(--sa-tech-card); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .3);
}
.sa-tech-mcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6); }
.sa-tech .sa-tech-mlabel { color: #94a3b8; font: 600 12.5px/1.2 var(--lp-font); letter-spacing: .05em; text-transform: uppercase; }
.sa-tech .sa-tech-mvalue {
  margin-top: 6px; font: 700 28px/1.2 var(--lp-font); font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #60a5fa, #34d399); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sa-tech-prog { margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(59, 130, 246, .1); border-radius: 12px; background: rgba(15, 23, 42, .6); }
.sa-tech-bands { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sa-tech-band { display: flex; flex: 1 1 0; flex-direction: column; gap: 2px; min-width: 0; }
.sa-tech-band:last-child { text-align: right; }
.sa-tech-bands .sa-tech-band:not(:first-child):not(:last-child) { text-align: center; }
.sa-tech-blab { font: 600 11px/1.2 var(--lp-font); letter-spacing: .025em; text-transform: uppercase; }
.sa-tech-bval { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sa-tech-up { color: var(--sa-tech-up); }
.sa-tech-dn { color: var(--sa-tech-dn); }
.sa-tech-inf { color: var(--sa-tech-info); }
.sa-tech-pbar { height: 12px; overflow: hidden; border: 1px solid rgba(59, 130, 246, .1); border-radius: 8px; background: rgba(15, 23, 42, .8); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); }
.sa-tech-pfill { display: flex; height: 100%; transform-origin: 0 50%; }
.sa-tech-seg { display: block; flex: 0 1 0; height: 100%; min-width: 0; }
.sa-tech-seg--v1 { background: rgba(76, 214, 143, .7); }
.sa-tech-seg--v2 { background: rgba(76, 214, 143, .4); }
.sa-tech-seg--v3 { background: rgba(226, 78, 76, .4); }
.sa-tech-seg--v4 { background: rgba(226, 78, 76, .7); }
.sa-tech-seg--r1, .sa-tech-seg--pos { background: linear-gradient(90deg, #4cd68f, #3cb371); }
.sa-tech-seg--r2 { background: rgba(226, 78, 76, .7); }
.sa-tech-seg--r3 { background: rgba(103, 89, 209, .8); }
.sa-tech-seg--r4 { background: rgba(76, 214, 143, .7); }
.sa-tech-seg--r5, .sa-tech-seg--neg { background: linear-gradient(90deg, #e24e4c, #c53030); }

/* the scatter (.chart-container) */
.sa-tech-chart { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px 10px 8px; border: 1px solid rgba(59, 130, 246, .2); border-radius: 20px; background: var(--sa-tech-card); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
html.js .sa-tech:not(.is-nodata) .sa-tech-chart { flex: 1 1 auto; }
.sa-tech-chartwrap { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .7) transparent; }
.sa-tech-svg { display: block; width: 100%; min-width: 620px; height: auto; font-family: var(--lp-font); }
.sa-tech-zpill rect { stroke: rgba(255, 255, 255, .5); stroke-width: 1; }
.sa-tech-zpill text { fill: #fff; font-size: 10px; font-weight: 700; dominant-baseline: middle; }
.sa-tech-ytk { fill: #fff; font-size: 11px; text-anchor: end; dominant-baseline: middle; }
.sa-tech-xtk { fill: #fff; font-size: 11px; text-anchor: middle; }
.sa-tech-axt { fill: #fff; font-size: 12px; text-anchor: middle; }
.sa-tech-dot text { fill: #fff; font-size: 10px; text-anchor: middle; }
.sa-tech-avg polyline { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
.sa-tech-avg circle { fill: #fff; }
.sa-tech-avg, .sa-tech-dot { transition: opacity .3s var(--lp-ease); }
[data-sa-tech-frame].is-new { animation: sa-tech-fade .4s var(--lp-ease) both; }
@keyframes sa-tech-fade { from { opacity: 0; } to { opacity: 1; } }

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

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

/* ---- motion off ---- */
.sa-tech.is-paused *, .sa-tech.is-paused *::before, .sa-tech.is-paused *::after { animation-play-state: paused !important; }
.sa-tech.is-still *, .sa-tech.is-still *::before, .sa-tech.is-still *::after { animation: none !important; transition: none !important; }
.sa-tech.is-still .sa-tech-row > td::after { display: none; }

/* ---- medium screens: the tables stack under smaller gauges ---- */
@media (max-width: 900px) {
  .sa-tech .sa-tech-gstatus { font-size: 18px; }
  .sa-tech-gresult { margin-top: -20px; }
  .sa-tech-gcounts { padding: 5px 8px; }
  .sa-tech-cn { margin: 0 5px; }
}

/* ---- small screens ---- */
@media (max-width: 640px) {
  .sa-tech-chrome-url { display: none; }
  .sa-tech-pghead { padding: 10px 12px; }
  .sa-tech .sa-tech-pgname { font-size: 16px; }
  .sa-tech-switch { padding: 6px 10px 0; }
  .sa-tech .sa-tech-swbtn { padding: 8px 11px; font-size: 12px; }
  .sa-tech-stage { padding: 12px; gap: 16px; }
  html.js .sa-tech:not(.is-nodata) .sa-tech-stage { height: 1000px; }
  .sa-tech-view { gap: 10px; }
  .sa-tech .sa-tech-ticker { flex-basis: 100%; font-size: 19px; }
  .sa-tech-search { flex: 1 1 auto; min-width: 0; }
  .sa-tech-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "sum sum" "osc ma"; gap: 10px; }
  .sa-tech-gcard[data-sa-tech-gauge="sum"] { grid-area: sum; }
  .sa-tech-gcard[data-sa-tech-gauge="osc"] { grid-area: osc; }
  .sa-tech-gcard[data-sa-tech-gauge="ma"] { grid-area: ma; }
  .sa-tech-gcard--sum { transform: none; }
  .sa-tech-gcard--sum .sa-tech-gsvg { max-width: 220px; }
  .sa-tech .sa-tech-gtitle { font-size: 11px; letter-spacing: 1px; }
  .sa-tech .sa-tech-gstatus { font-size: 16px; }
  .sa-tech .sa-tech-gcounts { font-size: 11px; padding: 4px 7px; }
  .sa-tech-tables { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sa-tech .sa-tech-table { font-size: 12px; }
  .sa-tech .sa-tech-table td { padding: 6px 8px; }
  .sa-tech-t5top { flex-wrap: wrap; }
  .sa-tech-pills { flex-basis: 100%; }
  .sa-tech-t5top .sa-tech-select { margin-left: auto; }
  .sa-tech-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html.js .sa-tech:not(.is-nodata) .sa-tech-chart { justify-content: center; }
  .sa-tech-mcard { padding: 12px 14px; }
  .sa-tech .sa-tech-mvalue { font-size: 24px; }
  .sa-tech-blab { font-size: 10px; }
  .sa-tech-bval { font-size: 12px; }
  .sa-tech-info { top: 88px; left: 0; max-width: none; }
  .sa-tech .sa-tech-readout { min-height: 84px; padding: 10px 12px 12px; font-size: 12.5px; }
  .sa-tech-controls { justify-content: center; }
  .sa-tech .sa-tech-sample-note { justify-content: center; text-align: center; }
}