/* The Volume Surge & Money Flow panel (showcase/chapters/analytics/_flow.html, sa-flow.js), the `flow` tab of the
   Stock Analytics chapter on /how-it-works/.
   One app window with the real pages: intrinio_stock/templates/stock_data/surge-trade.html and money-flow.html.
   Colours inside the window are the pages' own: the header card (#252540 to #2e2e50, 2px #6759d1 border,
   subtitle #c4b5fd, violet #a78bfa title part; surge-trade.html:38-50, :198), the summary cells (:79-100: label
   #c4b5fd, value green #4ade80 / red #f87171), the chart and table cards with their violet top rule
   (:53-67, :103-121), the tables (:124-161: #6759d1 head at 10px, #e0e0ff cells, violet row lines and even-row
   tint), the Top Buy / Top Sell sub-labels (#4ade80 / #f87171, :250, :266), the pies and bars (#4CD68F /
   #E24E4C buy and sell, #6759d1 / #58bad7 dark pool and lit, :429, :464, :514-527); money-flow.html's Info
   button (:46-51), its modal (:107-164, shown here as a note over the table) and table card (:65-100).
   Bootstrap text-info is #38bdf8, text-success / text-danger use the site's #4cd68f / #e24e4c.
   The panel around the window uses landing.css tokens. Everything is sa-flow-* and scoped under .sa-flow.
   JS state classes (all is-*): on the root is-ready, is-nodata, is-paused, is-still (reduced motion); on rows
   and sector cells is-wait (not in yet) and is-new (just in); on a money flow row is-tick (its price just
   updated) and is-moving (re-sorting); on a view is-new; on pressed controls is-press; on the auto label
   is-idle / is-stopped; on the tooltip is-left (drawn left of its point).
   Only transform, opacity and background-color animate. Reduced motion (landing.css section 13, plus
   .is-still) and the paused state (.is-paused) stop it all. */

.sa-flow {
  --sa-flow-accent: #6759d1; --sa-flow-accent2: #a78bfa; --sa-flow-lav: #c4b5fd;
  --sa-flow-bg: #1a1a30; --sa-flow-card: #1e1e38; --sa-flow-card2: #252545;
  --sa-flow-line: rgba(103, 89, 209, .2); --sa-flow-border: rgba(169, 158, 245, .14);
  --sa-flow-text: #e0e0ff; --sa-flow-muted: rgba(224, 224, 255, .66);
  --sa-flow-info: #38bdf8; --sa-flow-up: #4cd68f; --sa-flow-dn: #e24e4c;
  --sa-flow-bull: #4ade80; --sa-flow-bear: #f87171; --sa-flow-dp: #6759d1; --sa-flow-lit: #58bad7;
  position: relative; min-width: 0;
}
.sa-flow [hidden] { display: none !important; }
html:not(.js) .sa-flow-js, .sa-flow.is-nodata .sa-flow-js { display: none !important; }

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

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

/* the bar over the pages: the inner switch, the tier and the sample label */
.sa-flow-appbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px;
  padding: 8px 18px 0; border-bottom: 1px solid var(--sa-flow-border); background: rgba(255, 255, 255, .02);
}
.sa-flow-appbar-end { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px auto; }
.sa-flow-nav { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sa-flow-nav::-webkit-scrollbar { display: none; }
.sa-flow .sa-flow-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(--sa-flow-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);
}
.sa-flow .sa-flow-navbtn[aria-selected="true"] { border-color: var(--sa-flow-border); background: var(--sa-flow-card); color: #fff; }
.sa-flow .sa-flow-navbtn:hover:not([aria-selected="true"]) { color: #fff; background: rgba(255, 255, 255, .05); }
.sa-flow .sa-flow-navbtn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: -2px; }
.sa-flow .sa-flow-navbtn.is-press { background: rgba(103, 89, 209, .35); }

/* ---- the stage: both pages, one at a time once JS runs ---- */
.sa-flow-stage { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 16px 18px; }
html.js .sa-flow:not(.is-nodata) .sa-flow-stage { height: 660px; overflow: hidden; }
html.js .sa-flow:not(.is-ready):not(.is-nodata) .sa-flow-view--mf { display: none; }
.sa-flow-view { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
html.js .sa-flow:not(.is-nodata) .sa-flow-view { flex: 1 1 auto; }
.sa-flow-view.is-new { animation: sa-flow-in .32s var(--lp-ease) both; }
@keyframes sa-flow-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Volume Surge Trades scrolls inside the window (the real page is a long page) */
.sa-flow-scroll { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html.js .sa-flow:not(.is-nodata) .sa-flow-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin-right: -6px; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .6) transparent;
}
.sa-flow-scroll:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

/* header card */
.sa-flow-hero {
  padding: 14px 18px 12px; border: 2px solid var(--sa-flow-accent); border-radius: 16px;
  background: linear-gradient(135deg, #252540 0%, #2e2e50 100%); box-shadow: 0 0 24px rgba(103, 89, 209, .2);
}
.sa-flow .sa-flow-h { color: #fff; font: 700 19px/1.2 var(--lp-font-title); letter-spacing: .02em; }
.sa-flow .sa-flow-h span { color: var(--sa-flow-accent2); }
.sa-flow .sa-flow-sub { margin-top: 3px; color: var(--sa-flow-lav); font-size: 12px; }

/* summary: the on-balance number and the two pies */
.sa-flow-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sa-flow-cell {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; padding: 14px 12px; border: 1px solid rgba(103, 89, 209, .35); border-radius: 12px;
  background: linear-gradient(145deg, var(--sa-flow-card) 0%, var(--sa-flow-card2) 100%);
}
.sa-flow-cell::before, .sa-flow-card::before, .sa-flow-tcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #6759d1, #c4b5fd, #6759d1);
}
.sa-flow .sa-flow-cell-l { color: var(--sa-flow-lav); font: 700 10px/1.2 var(--lp-font); letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.sa-flow .sa-flow-obv { color: #fff; font: 800 32px/1 var(--lp-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-flow .sa-flow-obv--up { color: var(--sa-flow-bull); }
.sa-flow .sa-flow-obv--dn { color: var(--sa-flow-bear); }
.sa-flow .sa-flow-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 0; padding: 0; list-style: none; color: #fff; font-size: 11px; }
.sa-flow .sa-flow-legend li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sa-flow-key { display: inline-block; flex: none; width: 12px; height: 10px; border-radius: 2px; background: currentColor; }
.sa-flow-key--buy { background: var(--sa-flow-up); }
.sa-flow-key--sell { background: var(--sa-flow-dn); }
.sa-flow-key--dp { background: var(--sa-flow-dp); }
.sa-flow-key--lit { background: var(--sa-flow-lit); }
.sa-flow-key--line { height: 3px; border-radius: 2px; background: var(--sa-flow-up); }
.sa-flow-pie { display: block; width: 100%; max-width: 140px; height: auto; overflow: visible; }
.sa-flow-slice { stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.sa-flow-slice--buy { fill: var(--sa-flow-up); }
.sa-flow-slice--sell { fill: var(--sa-flow-dn); }
.sa-flow-slice--dp { fill: var(--sa-flow-dp); }
.sa-flow-slice--lit { fill: var(--sa-flow-lit); }
.sa-flow-pie-t { fill: #fff; font: 700 11px/1 var(--lp-font); text-anchor: middle; dominant-baseline: middle; transition: opacity .3s var(--lp-ease); }

/* chart and table cards */
.sa-flow-card, .sa-flow-tcard {
  position: relative; overflow: hidden; min-width: 0; padding: 14px 16px 12px; border: 1px solid var(--sa-flow-accent); border-radius: 16px;
  background: linear-gradient(145deg, var(--sa-flow-card) 0%, var(--sa-flow-card2) 100%); box-shadow: 0 0 20px rgba(103, 89, 209, .15);
}
.sa-flow .sa-flow-card-l { margin-bottom: 8px; color: var(--sa-flow-lav); font: 600 11px/1.3 var(--lp-font); letter-spacing: .1em; text-transform: uppercase; }
.sa-flow .sa-flow-card-h { margin-bottom: 12px; color: var(--sa-flow-lav); font: 700 12px/1.3 var(--lp-font); letter-spacing: .08em; text-transform: uppercase; }
.sa-flow .sa-flow-legend--chart { margin-bottom: 6px; }
.sa-flow-chartscroll { min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .5) transparent; }
.sa-flow-chart { position: relative; min-width: 520px; }
.sa-flow-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sa-flow-gridl { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.sa-flow-gridl.sa-flow-zero { stroke: rgba(255, 255, 255, .22); }
.sa-flow-tick { fill: #fff; font: 10px/1 var(--lp-font); }
.sa-flow-ytitle { fill: #fff; font: 600 10px/1 var(--lp-font); }
.sa-flow-bar--buy { fill: var(--sa-flow-up); }
.sa-flow-bar--sell { fill: var(--sa-flow-dn); }
.sa-flow-cum { fill: none; stroke: var(--sa-flow-up); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.sa-flow-cum--dn { stroke: var(--sa-flow-dn); }
.sa-flow-dot { fill: var(--sa-flow-up); stroke: #fff; stroke-width: 1.5; }
.sa-flow-tip {
  position: absolute; z-index: 3; min-width: 168px; padding: 7px 10px; border-radius: 6px; background: rgba(0, 0, 0, .82);
  color: #fff; font-size: 11.5px; line-height: 1.45; white-space: nowrap; pointer-events: none;
  transform: translate(12px, -50%); animation: sa-flow-in .2s var(--lp-ease) both;
}
.sa-flow-tip.is-left { transform: translate(calc(-100% - 12px), -50%); }
.sa-flow .sa-flow-tip-t { font-weight: 700; }
.sa-flow .sa-flow-tip-v { display: flex; align-items: center; gap: 6px; }
.sa-flow-tip .sa-flow-key { border: 1px solid #fff; }

/* tables */
.sa-flow-tablewrap { position: relative; min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .5) transparent; }
.sa-flow-tablewrap:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.sa-flow .sa-flow-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sa-flow .sa-flow-table thead th {
  position: sticky; top: 0; z-index: 2; padding: 9px 12px; border: 0; background: var(--sa-flow-accent); color: #fff;
  font: 700 10px/1.2 var(--lp-font); letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.sa-flow .sa-flow-table td, .sa-flow .sa-flow-table tbody th {
  position: relative; height: 34px; padding: 4px 12px; border: 0; border-bottom: 1px solid var(--sa-flow-line); color: var(--sa-flow-text);
  font-weight: 400; text-align: left; white-space: nowrap; background: transparent;
  transition: opacity .3s var(--lp-ease), transform .3s var(--lp-ease), background-color .3s var(--lp-ease);
}
/* row tints are a background-image, so the sticky Symbol cell keeps its solid background-color under them */
.sa-flow .sa-flow-table tbody tr:nth-child(even) > * { background-image: linear-gradient(rgba(103, 89, 209, .1), rgba(103, 89, 209, .1)); }
.sa-flow .sa-flow-table tbody tr:hover > * { background-image: linear-gradient(rgba(103, 89, 209, .25), rgba(103, 89, 209, .25)); }
.sa-flow .sa-flow-table td.sa-flow-up { color: var(--sa-flow-up); }
.sa-flow .sa-flow-table td.sa-flow-dn { color: var(--sa-flow-dn); }
.sa-flow-up { color: var(--sa-flow-up); }
.sa-flow-dn { color: var(--sa-flow-dn); }
.sa-flow-sym, .sa-flow-info { color: var(--sa-flow-info); }
.sa-flow-sym { font-weight: 700; letter-spacing: .04em; }
.sa-flow-sort { margin-left: 4px; font-size: 9px; }

/* Largest Trade Imbalance by Stock: two tables side by side */
.sa-flow-imb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sa-flow-imb-col { min-width: 0; }
.sa-flow .sa-flow-sublabel { margin-bottom: 8px; font: 700 11px/1.2 var(--lp-font); letter-spacing: .08em; text-transform: uppercase; }
.sa-flow .sa-flow-sublabel--buy { color: var(--sa-flow-bull); }
.sa-flow .sa-flow-sublabel--sell { color: var(--sa-flow-bear); }

/* ---- Money Flow Leaders ---- */
.sa-flow-mfbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sa-flow .sa-flow-pgtitle { color: #fff; font: 700 17px/1.25 var(--lp-font-title); letter-spacing: .01em; }
.sa-flow .sa-flow-infobtn {
  margin: 0 0 0 auto; padding: 6px 16px; border: 1px solid var(--sa-flow-accent2); border-radius: 8px; background: rgba(103, 89, 209, .35);
  color: #fff; font: 600 12.5px/1.3 var(--lp-font); cursor: pointer;
  transition: background-color .2s var(--lp-ease), box-shadow .2s var(--lp-ease), transform .18s var(--lp-ease);
}
.sa-flow .sa-flow-infobtn:hover, .sa-flow .sa-flow-infobtn[aria-expanded="true"] { background: var(--sa-flow-accent); box-shadow: 0 0 12px rgba(103, 89, 209, .5); }
.sa-flow .sa-flow-infobtn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.sa-flow .sa-flow-infobtn.is-press { transform: scale(.95); }
/* the Info note: over the table like the real modal, but not modal */
.sa-flow-info {
  position: absolute; top: 46px; left: 50%; z-index: 6; display: flex; flex-direction: column; gap: 10px;
  width: min(560px, calc(100% - 8px)); max-height: calc(100% - 56px); overflow-y: auto; padding: 0 18px 16px;
  border: 2px solid var(--sa-flow-accent); border-radius: 18px; background: linear-gradient(160deg, #202040 0%, #181830 100%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .7), 0 0 40px rgba(103, 89, 209, .25); color: #d4d4f8; font-size: 12.5px; line-height: 1.55;
  transform: translateX(-50%);
}
html.js .sa-flow:not(.is-nodata) .sa-flow-info:not([hidden]) { animation: sa-flow-pop .24s var(--lp-ease) both; }
@keyframes sa-flow-pop { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
.sa-flow-info-head { position: relative; margin: 0 -18px; padding: 14px 56px 12px 18px; border-bottom: 1px solid rgba(103, 89, 209, .5); background: rgba(103, 89, 209, .06); }
.sa-flow-info-head::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #6759d1, #c4b5fd, #6759d1); }
.sa-flow .sa-flow-info-h { color: #fff; font: 700 15px/1.3 var(--lp-font); }
.sa-flow .sa-flow-info-h span { color: var(--sa-flow-accent2); }
.sa-flow .sa-flow-info-s { margin-top: 2px; color: #d0c4ff; font-size: 12px; }
.sa-flow .sa-flow-info-x {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; padding: 0; border: 1px solid var(--sa-flow-accent2); border-radius: 8px;
  background: rgba(103, 89, 209, .35); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; transition: background-color .2s var(--lp-ease);
}
.sa-flow .sa-flow-info-x:hover { background: var(--sa-flow-accent); }
.sa-flow .sa-flow-info-x:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.sa-flow .sa-flow-info-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sa-flow .sa-flow-info-list b { color: var(--sa-flow-lav); }
html:not(.js) .sa-flow .sa-flow-info, .sa-flow.is-nodata .sa-flow-info { display: none !important; }

.sa-flow-tcard { padding: 14px; }
html.js .sa-flow:not(.is-nodata) .sa-flow-tcard { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
html.js .sa-flow:not(.is-nodata) .sa-flow-tablewrap--mf { flex: 1 1 auto; min-height: 0; overflow: auto; }
.sa-flow .sa-flow-table--mf .sa-flow-c0 { position: sticky; left: 0; z-index: 1; min-width: 78px; background-color: #20203c; box-shadow: 1px 0 0 var(--sa-flow-line); }
.sa-flow .sa-flow-table--mf thead th.sa-flow-c0 { z-index: 3; background: var(--sa-flow-accent); }

/* rows and sector cells stream in; a money flow row ticks and re-sorts */
.sa-flow .sa-flow-row.is-wait > td, .sa-flow .sa-flow-table td.is-wait { opacity: 0; transform: translateY(-6px); }
.sa-flow .sa-flow-row.is-new > td::after, .sa-flow .sa-flow-table td.is-new::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(139, 125, 232, .3);
  animation: sa-flow-fade 1s ease-out both;
}
.sa-flow .sa-flow-row.is-tick > td { background-color: #1f3a3a; }
.sa-flow .sa-flow-row.is-tick > td.sa-flow-c0 { box-shadow: inset 3px 0 0 var(--sa-flow-up), 1px 0 0 var(--sa-flow-line); }
.sa-flow .sa-flow-row.is-moving { position: relative; z-index: 2; transition: transform .7s var(--lp-ease); }
@keyframes sa-flow-fade { from { opacity: 1; } to { opacity: 0; } }

/* ---- the readout: what the demo shows now ---- */
.sa-flow .sa-flow-readout {
  display: flex; align-items: flex-start; gap: 10px; min-height: 60px; margin: 0; padding: 11px 18px 13px;
  border-top: 1px solid var(--sa-flow-border); background: rgba(103, 89, 209, .1); color: #fff; font-size: 13px; line-height: 1.5;
}
.sa-flow-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-flow-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-flow-play { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-2); }
.sa-flow-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-flow-auto-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-green); }
.sa-flow-auto.is-idle .sa-flow-auto-dot, .sa-flow-auto.is-stopped .sa-flow-auto-dot { background: var(--lp-amber); }
.sa-flow-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-flow-auto-bar i { display: block; height: 100%; background: var(--lp-primary); transform-origin: 0 50%; transform: scaleX(0); }
.sa-flow-auto.is-idle .sa-flow-auto-bar i, .sa-flow-auto.is-stopped .sa-flow-auto-bar i { background: var(--lp-amber); }
.sa-flow-ico-play, .sa-flow.is-paused .sa-flow-ico-pause { display: none; }
.sa-flow.is-paused .sa-flow-ico-play { display: inline; }
.sa-flow .sa-flow-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-flow.is-still .sa-flow-play { display: none; }

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

/* ---- smaller screens ---- */
@media (max-width: 860px) {
  .sa-flow-imb { grid-template-columns: minmax(0, 1fr); }
  html.js .sa-flow:not(.is-nodata) .sa-flow-stage { height: 700px; }
}
@media (max-width: 640px) {
  .sa-flow-chrome-url { display: none; }
  .sa-flow-appbar { padding: 6px 10px 0; }
  .sa-flow-appbar-end { margin-left: 0; }
  .sa-flow-stage { padding: 12px; gap: 10px; }
  html.js .sa-flow:not(.is-nodata) .sa-flow-stage { height: 740px; }
  .sa-flow-hero { padding: 11px 12px; }
  .sa-flow .sa-flow-h { font-size: 16px; }
  .sa-flow-sum { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sa-flow .sa-flow-obv { font-size: 28px; }
  .sa-flow-pie { max-width: 120px; }
  .sa-flow-card, .sa-flow-tcard { padding: 12px 10px 10px; }
  .sa-flow .sa-flow-table { font-size: 12px; }
  .sa-flow .sa-flow-table td, .sa-flow .sa-flow-table tbody th { height: 32px; padding: 3px 9px; }
  .sa-flow .sa-flow-table thead th { padding: 8px 9px; }
  .sa-flow-info { top: 44px; padding: 0 14px 14px; }
  .sa-flow-info-head { margin: 0 -14px; padding-left: 14px; }
  .sa-flow .sa-flow-readout { min-height: 84px; padding: 10px 12px 12px; font-size: 12.5px; }
  .sa-flow-controls { justify-content: center; }
  .sa-flow .sa-flow-sample-note { justify-content: center; text-align: center; }
}