/* The Options Flow panel (showcase/chapters/explorer/_flow.html, tx-flow.js), the Options Flow tab of the
   Ticker Explorer & Options Flow chapter on /how-it-works/.
   One app window with the real pages: intrinio/templates/intrinio/feed-redis.html (Live Flow) and
   unusual-activity.html. Colours inside the window are the pages' own, as they render inside the member area:
   the violet table head and #333754 row lines (as the other panels and the Ticker Explorer tables), CALL green
   and PUT red (feed-redis.html:330-335), the side colours (:318-329), the Fill vs Spread bar (ASK #22c55e, BID
   #ef4444, :1641-1645), the ORDER pills (formatFlag :2383-2395: SWEEP #f59e0b, BLOCK #3b82f6, FLOOR #8b5cf6,
   CROSS #06b6d4, LATE #f97316; unusual-activity.html:547-552 LARGE #667eea), the direction pills (green, red,
   violet for neutral) and the green page header. Amber, cyan and orange pills carry dark text for contrast.
   The panel around the window uses landing.css tokens. Everything is txf-* and scoped under .txf.
   JS state classes (all is-*): on the root .txf is-ready (data loaded and drawn), is-nodata, is-paused,
   is-still (reduced motion); on rows is-new (just printed), is-wait (not streamed in yet), is-tip (its
   tooltip is open); on a view is-new (just opened); on the live badge is-off; on pressed controls is-press;
   on the auto label is-idle / is-stopped; on the tooltip is-on.
   Only transform and opacity animate. Reduced motion (landing.css section 13, plus .is-still) and the paused
   state (.is-paused) stop it all. */

.txf {
  --txf-accent: #6759d1; --txf-accent2: #8b7de8; --txf-grad: linear-gradient(135deg, #6759d1 0%, #8b7de8 100%);
  --txf-bg: #1f2238; --txf-panel: #292d4a; --txf-row: #292d4a; --txf-row2: #2f334f; --txf-rowhi: #333460;
  --txf-line: #333754; --txf-border: rgba(139, 125, 232, .16);
  --txf-text: #fff; --txf-soft: #e4e2f3; --txf-muted: rgba(255, 255, 255, .65); --txf-name: #a99ef5;
  --txf-call: #5ccf9c; --txf-put: #f0616d; --txf-ask: #9aa5ff; --txf-bid: #f59e0b; --txf-mid: #22d3ee;
  --txf-pos: #3f9f7b; --txf-neg: #d9474f; --txf-neu: #6759d1;
  --txf-c0w: 104px;
  position: relative; min-width: 0;
}
.txf [hidden] { display: none !important; }
html:not(.js) .txf-js, .txf.is-nodata .txf-js { display: none !important; }

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

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

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

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

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

/* ---- Live Flow: preset chips, live badge, totals ---- */
.txf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.txf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.txf .txf-chip {
  margin: 0; padding: 7px 14px; border: 1px solid rgba(139, 125, 232, .25); border-radius: 999px; background: rgba(255, 255, 255, .04);
  color: var(--txf-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);
}
.txf .txf-chip[aria-pressed="true"] { border-color: transparent; background: var(--txf-grad); color: #fff; box-shadow: 0 2px 8px rgba(103, 89, 209, .4); }
.txf .txf-chip:hover:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .08); color: #fff; }
.txf .txf-chip:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.txf .txf-chip.is-press { transform: scale(.94); }
.txf-live {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid rgba(34, 197, 94, .35); border-radius: 999px;
  background: rgba(34, 197, 94, .1); color: #bbf7d0; font: 700 11.5px/1.2 var(--lp-font); letter-spacing: .04em; text-transform: uppercase;
}
.txf-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: txf-pulse 1.6s ease-in-out infinite; }
@keyframes txf-pulse { 50% { opacity: .35; transform: scale(.8); } }
.txf-live.is-off { border-color: rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: var(--txf-muted); }
.txf-live.is-off .txf-live-dot { background: var(--lp-amber); animation: none; }

.txf-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.txf-kpi { min-width: 0; padding: 9px 14px; border: 1px solid rgba(139, 125, 232, .12); border-radius: 12px; background: rgba(255, 255, 255, .05); }
.txf .txf-kpi-l { color: var(--txf-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.txf .txf-kpi-v { margin-top: 3px; color: #fff; font: 800 17px/1.2 var(--lp-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.txf .txf-kpi-v--call { color: var(--txf-call); }
.txf .txf-kpi-v--put { color: var(--txf-put); }

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

.txf .txf-rk { display: inline-block; padding: 2px 4px; margin-left: -4px; border-radius: 6px; color: var(--txf-soft); font-weight: 600; cursor: default; }
.txf .txf-rk:focus { outline: none; }
.txf .txf-rk:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 1px; }
.txf-tk { font-weight: 800; letter-spacing: .06em; color: var(--txf-name); }
.txf-prem { font-weight: 800; }
.txf-cp { font-weight: 700; letter-spacing: .02em; }
.txf-cp--call { color: var(--txf-call); }
.txf-cp--put { color: var(--txf-put); }
.txf-side { font-weight: 800; letter-spacing: .04em; }
.txf-side--ask { color: var(--txf-ask); }
.txf-side--bid { color: var(--txf-bid); }
.txf-side--mid { color: var(--txf-mid); }

/* Fill vs Spread: where the fill sits between the bid (left) and the ask (right) */
.txf-fvs { position: relative; display: inline-block; width: 90px; height: 3px; border-radius: 2px; vertical-align: middle; opacity: .85; background: #8b5cf6; }
.txf-fvs--ask { background: #22c55e; }
.txf-fvs--bid { background: #ef4444; }
.txf-fvs i { position: absolute; top: -5px; width: 2px; height: 13px; margin-left: -1px; border-radius: 1px; background: #fff; }

/* ORDER and DIRECTION pills */
.txf-pill, .txf-lean {
  display: inline-block; padding: 2px 9px; border-radius: 12px; color: #fff; font: 700 11.5px/1.5 var(--lp-font); letter-spacing: .02em; white-space: nowrap;
  background: rgba(255, 255, 255, .15);
}
.txf-pill--large { background: #667eea; }
.txf-pill--sweep { background: #f59e0b; color: #1c1400; }
.txf-pill--block { background: #3b82f6; }
.txf-pill--floor { background: #8b5cf6; }
.txf-pill--cross { background: #06b6d4; color: #04222a; }
.txf-pill--late { background: #f97316; color: #1f0d00; }
.txf-lean--pos { background: var(--txf-pos); }
.txf-lean--neg { background: var(--txf-neg); }
.txf-lean--neu { background: var(--txf-neu); }

/* a trade prints: a brief highlight that fades, the row eases in */
.txf .txf-row.is-new > td { animation: txf-print .42s var(--lp-ease) both; }
.txf .txf-row.is-new > td::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(139, 125, 232, .38);
  animation: txf-flash 1.2s ease-out both;
}
@keyframes txf-print { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes txf-flash { from { opacity: 1; } to { opacity: 0; } }
.txf .txf-row.is-wait > td { opacity: 0; transform: translateY(-6px); }

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

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

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

/* ---- smaller screens ---- */
@media (max-width: 760px) {
  .txf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .txf { --txf-c0w: 90px; }
  .txf-chrome-url { display: none; }
  .txf-pghead { padding: 10px 12px; }
  .txf .txf-pgname { font-size: 16px; }
  .txf-nav { padding: 6px 10px 0; }
  .txf-stage { padding: 12px; gap: 10px; }
  html.js .txf:not(.is-nodata) .txf-stage { height: 700px; }
  .txf-view { gap: 10px; }
  .txf .txf-chip { padding: 6px 11px; font-size: 12px; }
  .txf-kpis { gap: 8px; }
  .txf-kpi { padding: 7px 10px; }
  .txf .txf-kpi-l { font-size: 9.5px; letter-spacing: .05em; }
  .txf .txf-kpi-v { font-size: 15px; }
  .txf .txf-table { font-size: 12px; }
  .txf .txf-table td { height: 34px; padding: 3px 9px; }
  .txf .txf-table th { padding: 9px 9px; }
  .txf .txf-readout { min-height: 84px; padding: 10px 12px 12px; font-size: 12.5px; }
  .txf-controls { justify-content: center; }
  .txf .txf-sample-note { justify-content: center; text-align: center; }
}