/* terminal-spot.css: the SPOT ENGINE panel (web/static/terminal-spot.js builds this DOM inside [data-tm-spot] on /terminal).
   A trading desk's density: mono micro-labels in capitals, hairlines, tabular numbers that never shift; green up and bids,
   red down and asks, amber the whales and anything waiting, blue the live line before it has a direction. Every class starts
   tm-sp-. The panel lays itself out on its own width (container queries), so it fits wherever the page puts it: stacked
   under 620px (chart, book, tape), chart over book and tape to 1080px, then the three side by side. Its background stays
   transparent: the page's own black shows through. */
.tm-sp-panel {
  --sp-ink: #ECEFF4; --sp-dim: rgba(236, 239, 244, .55); --sp-faint: rgba(236, 239, 244, .36);
  --sp-mint: #38F2A4; --sp-red: #FF4D5E; --sp-amber: #FFB44D; --sp-blue: #4F8CFF; --sp-cyan: #5FD3E8;
  --sp-hair: rgba(255, 255, 255, .08); --sp-row: 17px;
  --sp-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  container-type: inline-size;
  position: relative; min-width: 0; color: var(--sp-ink); background: transparent;
  font: 500 11px/1.3 var(--sp-mono); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
.tm-sp-panel .tm-sp-up { color: var(--sp-mint); }
.tm-sp-panel .tm-sp-dn { color: var(--sp-red); }

/* ---- the header: who and how live, the price, the window's numbers ---- */
.tm-sp-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 22px; padding: 0 2px 10px; border-bottom: 1px solid var(--sp-hair); }
.tm-sp-id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; min-width: 0; font-size: 10.5px; letter-spacing: .1em; color: var(--sp-dim); }
.tm-sp-name { color: var(--sp-ink); font-weight: 800; letter-spacing: .18em; }
.tm-sp-sep { color: var(--sp-faint); }
.tm-sp-pair { color: var(--sp-ink); font-weight: 600; }
.tm-sp-led { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--sp-amber); box-shadow: 0 0 8px var(--sp-amber); }
.tm-sp-st { margin-left: auto; max-width: 100%; padding: 2px 7px; border: 1px solid rgba(255, 180, 77, .3); border-radius: 3px;
  background: rgba(255, 180, 77, .06); color: var(--sp-amber); font-size: 10px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-sp-panel[data-st="live"] .tm-sp-led { background: var(--sp-mint); box-shadow: 0 0 10px var(--sp-mint); animation: tm-sp-pulse 1.4s ease-in-out infinite; }
.tm-sp-panel[data-st="live"] .tm-sp-st { color: var(--sp-mint); border-color: rgba(56, 242, 164, .3); background: rgba(56, 242, 164, .06); }
.tm-sp-panel[data-st="down"] .tm-sp-led { background: var(--sp-red); box-shadow: 0 0 10px var(--sp-red); }
.tm-sp-panel[data-st="down"] .tm-sp-st { color: var(--sp-red); border-color: rgba(255, 77, 94, .32); background: rgba(255, 77, 94, .07); }
@keyframes tm-sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.tm-sp-quote { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.tm-sp-last { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--sp-ink); white-space: nowrap; }
.tm-sp-arr { font-style: normal; font-size: 12px; line-height: 1; margin-left: -4px; }
.tm-sp-chg { display: inline-flex; flex-direction: column; gap: 2px; }
.tm-sp-chg b { font-size: 14px; font-weight: 700; line-height: 1; }
.tm-sp-chg small { font-size: 10px; letter-spacing: .08em; color: var(--sp-dim); white-space: nowrap; }

.tm-sp-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 0; margin: 0; min-width: 0; }
.tm-sp-kv > div { min-width: 0; padding: 1px 8px; border-left: 1px solid var(--sp-hair); }
.tm-sp-kv dt { font-size: 10px; letter-spacing: .08em; color: var(--sp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-sp-kv dd { margin: 3px 0 0; font-size: 12px; font-weight: 600; color: var(--sp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- the body: three boxes ---- */
.tm-sp-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "chart" "book" "tape"; gap: 8px; margin-top: 10px; }
.tm-sp-box { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px 9px 9px; border: 1px solid var(--sp-hair);
  border-radius: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .024), rgba(255, 255, 255, .006)); }
.tm-sp-chart { grid-area: chart; } .tm-sp-book { grid-area: book; } .tm-sp-tape { grid-area: tape; }
.tm-sp-ph { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; min-width: 0; font-size: 10px; letter-spacing: .08em; color: var(--sp-dim); white-space: nowrap; }
.tm-sp-ph b { color: var(--sp-ink); font-weight: 700; letter-spacing: .14em; }
.tm-sp-ph span { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
.tm-sp-crc.tm-sp-ok { color: var(--sp-mint); }
.tm-sp-crc.tm-sp-warn { color: var(--sp-amber); }

/* the chart: the canvas fills its box; on a wide panel the box is as tall as the book beside it */
.tm-sp-cvw { position: relative; flex: 1 1 auto; min-height: 250px; margin: 0 -3px -3px; }
.tm-sp-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; }

/* the column heads of the book and the tape */
.tm-sp-cols { display: grid; gap: 6px; padding: 0 4px 4px; margin: 0 0 3px; border-bottom: 1px solid var(--sp-hair);
  font-size: 10px; letter-spacing: .08em; color: var(--sp-faint); }
.tm-sp-cols span { text-align: right; white-space: nowrap; overflow: hidden; }

/* ---- the book: a ladder, each level's running depth a bar growing in from the right, both sides on one scale ---- */
.tm-sp-lcols, .tm-sp-lv { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 1fr); }
.tm-sp-lad { list-style: none; margin: 0; padding: 0; }
.tm-sp-lv { position: relative; display: grid; gap: 6px; align-items: center; height: var(--sp-row); padding: 0 4px; overflow: hidden; border-radius: 2px; }
.tm-sp-lv span { position: relative; text-align: right; white-space: nowrap; overflow: hidden; border-radius: 2px; }
.tm-sp-bar { position: absolute; left: 0; top: 1px; bottom: 1px; width: 100%; transform: translateX(100%); transition: transform .22s cubic-bezier(.2, .7, .3, 1); pointer-events: none; }
.tm-sp-asks .tm-sp-bar { background: linear-gradient(90deg, rgba(255, 77, 94, .07), rgba(255, 77, 94, .2)); }
.tm-sp-bids .tm-sp-bar { background: linear-gradient(90deg, rgba(56, 242, 164, .06), rgba(56, 242, 164, .17)); }
.tm-sp-asks .tm-sp-p { color: var(--sp-red); }
.tm-sp-bids .tm-sp-p { color: var(--sp-mint); }
.tm-sp-q { color: var(--sp-ink); }
.tm-sp-c { color: var(--sp-dim); }
.tm-sp-asks .tm-sp-lv:last-child .tm-sp-p, .tm-sp-bids .tm-sp-lv:first-child .tm-sp-p { font-weight: 800; }
.tm-sp-mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 26px; margin: 3px 0; padding: 0 4px;
  border-top: 1px solid var(--sp-hair); border-bottom: 1px solid var(--sp-hair); background: rgba(255, 255, 255, .025); }
.tm-sp-mid b { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.tm-sp-mid span { font-size: 10px; letter-spacing: .06em; color: var(--sp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-sp-mid.tm-sp-midx { justify-content: center; }
.tm-sp-mid.tm-sp-midx span { letter-spacing: .1em; }

/* ---- the tape ---- */
.tm-sp-tcols, .tm-sp-tr { grid-template-columns: 8.6ch 4.3ch minmax(9.3ch, 1fr) minmax(6.2ch, 1fr) 7.3ch 5.5ch; }
.tm-sp-tcols { letter-spacing: .03em; }
.tm-sp-trw { position: relative; }
.tm-sp-trs { list-style: none; margin: 0; padding: 0; }
.tm-sp-tr { position: relative; display: grid; gap: 5px; align-items: center; height: var(--sp-row); padding: 0 4px; border-radius: 2px; }
.tm-sp-tr span { text-align: right; white-space: nowrap; overflow: hidden; }
.tm-sp-tcols span:nth-child(-n+2), .tm-sp-tr .tm-sp-tt, .tm-sp-tr .tm-sp-ts { text-align: left; }
.tm-sp-tt { color: var(--sp-dim); }
.tm-sp-ts { font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.tm-sp-buy .tm-sp-ts, .tm-sp-buy .tm-sp-tp { color: var(--sp-mint); }
.tm-sp-sell .tm-sp-ts, .tm-sp-sell .tm-sp-tp { color: var(--sp-red); }
.tm-sp-tq { color: var(--sp-ink); }
.tm-sp-lv, .tm-sp-tr { transition: background-color .12s; }
.tm-sp-lv:hover, .tm-sp-tr:hover { background-color: rgba(79, 140, 255, .14); box-shadow: inset 2px 0 0 rgba(95, 211, 232, .8); }   /* its words: data-tt (terminal-spot.js) */
.tm-sp-tu { color: var(--sp-dim); }
.tm-sp-whale { background: linear-gradient(90deg, rgba(255, 180, 77, .17), rgba(255, 180, 77, .04)); box-shadow: inset 2px 0 0 var(--sp-amber); }
.tm-sp-whale .tm-sp-tu { color: var(--sp-amber); font-weight: 800; }
.tm-sp-whale .tm-sp-tq { font-weight: 700; }
.tm-sp-whale .tm-sp-tw { padding: 1px 0; border-radius: 2px; background: var(--sp-amber); color: #050608; text-align: center;
  font-size: 9px; font-weight: 800; letter-spacing: .06em; line-height: 1.25; box-shadow: 0 0 10px rgba(255, 180, 77, .45); }

/* ---- the share bars under the book (bids against asks) and the tape (bought against sold) ---- */
.tm-sp-split { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 9px 0 0;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.tm-sp-sl { color: var(--sp-mint); white-space: nowrap; }
.tm-sp-sr { color: var(--sp-red); white-space: nowrap; }
.tm-sp-sbar { position: relative; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255, 77, 94, .62); box-shadow: 0 0 12px -3px rgba(255, 77, 94, .5); }
.tm-sp-sbar i { position: absolute; inset: 0; background: var(--sp-mint); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.2, .7, .3, 1); }
.tm-sp-sbar.tm-sp-off { background: rgba(255, 255, 255, .06); box-shadow: none; }
.tm-sp-cap { margin: 5px 0 0; font-size: 10px; letter-spacing: .05em; color: var(--sp-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- by trade size: the dollars each size of trade moved, bought (green) and sold (red), on one scale ---- */
.tm-sp-mixh { margin: 12px 0 4px; padding-top: 9px; border-top: 1px solid var(--sp-hair); }
.tm-sp-mixh i { display: inline-block; width: 7px; height: 7px; margin: 0 4px 0 6px; border-radius: 1px; vertical-align: 0; }
.tm-sp-kb { background: var(--sp-mint); } .tm-sp-ks { background: var(--sp-red); }
.tm-sp-mix { list-style: none; margin: 0; padding: 0; }
.tm-sp-mx { display: grid; grid-template-columns: 9.6ch 3ch minmax(0, 1fr) 7.3ch; gap: 8px; align-items: center; height: 18px; padding: 0 4px; }
.tm-sp-ml { color: var(--sp-dim); font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.tm-sp-mn { text-align: right; color: var(--sp-ink); }
.tm-sp-mu { text-align: right; color: var(--sp-dim); white-space: nowrap; }
.tm-sp-mb { display: flex; height: 7px; border-radius: 1px; background: rgba(255, 255, 255, .035); overflow: hidden; }
.tm-sp-mb i { display: block; height: 100%; width: 0; transition: width .35s cubic-bezier(.2, .7, .3, 1); }
.tm-sp-mbb { background: linear-gradient(90deg, rgba(56, 242, 164, .45), var(--sp-mint)); }
.tm-sp-mbs { background: linear-gradient(90deg, var(--sp-red), rgba(255, 77, 94, .55)); }
.tm-sp-mxw .tm-sp-ml, .tm-sp-mxw .tm-sp-mu { color: var(--sp-amber); }

/* no data yet in a box: one plain line across its middle */
.tm-sp-empty { position: absolute; left: 10px; right: 10px; top: 52%; margin: 0; transform: translateY(-50%); text-align: center;
  font-size: 10.5px; letter-spacing: .1em; color: var(--sp-dim); pointer-events: none; }
.tm-sp-empty[hidden] { display: none; }

/* ---- wider panels ---- */
@container (min-width: 520px) {
  .tm-sp-kv dd { font-size: 12.5px; }
}
@container (min-width: 620px) {
  .tm-sp-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "chart chart" "book tape"; }
  .tm-sp-cvw { min-height: 300px; }
}
@container (min-width: 760px) {
  .tm-sp-head { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .tm-sp-id { grid-column: 1 / -1; }
}
@container (min-width: 1080px) {
  .tm-sp-body { grid-template-columns: minmax(0, 1fr) 252px 344px; grid-template-areas: "chart book tape"; }
  .tm-sp-cvw { min-height: 0; }
}
@container (min-width: 1200px) {
  .tm-sp-head { align-items: end; }
  .tm-sp-kv { display: flex; }
  .tm-sp-kv > div { flex: 1 1 0; }
  .tm-sp-last { font-size: 32px; }
}
/* narrow phones: the tape's time keeps its seconds, the columns close up */
@container (max-width: 380px) {
  .tm-sp-kv > div { padding: 1px 6px; }
  .tm-sp-kv dt { letter-spacing: .02em; }
  .tm-sp-kv dd { font-size: 11.5px; }
  .tm-sp-tr, .tm-sp-tcols { gap: 4px; font-size: 10.5px; }
  .tm-sp-last { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-sp-panel[data-st="live"] .tm-sp-led { animation: none; }
  .tm-sp-bar, .tm-sp-sbar i, .tm-sp-mb i { transition: none; }
}