/* Pro Terminal: a dense, dark trading terminal. Amber chrome, tabular mono numerals, flat 3 px panels with title bars and
   crisp 1 px rules. Up = blue, Down = orange (a CVD-safe pair); P&L uses green / red WITH its sign; our shadow = violet.
   Spec: the "1-terminal" mockup (term.css) and its MOTION.md. All text is the mono face except long prose notes. */
:root {
  /* colours live in tokens.css (light + dark); this sheet only adds type, shape and chart settings */
  --radius: 3px;
  --font: "Inter V", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono V", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gut: 12px;
  --flash: rgba(var(--accent-rgb), .25);
  /* charts (read by charts.js from the canvas) */
  --ch-up: var(--up); --ch-dn: var(--dn); --ch-shadow: var(--shadow);
  --ch-ink: var(--ink); --ch-ink2: var(--ink2);
  --ch-him: var(--accent); --ch-us: var(--shadow);
  --ch-font: var(--font); --ch-mono: var(--mono); --ch-fs: 11.5; --ch-label-weight: 600;
  --ch-grid-dash: 1 3; --ch-band: .15; --ch-area: .09; --ch-line: 2; --ch-pulse: 0; --ch-tip-radius: 3;
}
html { font-feature-settings: "zero" 1, "tnum" 1; font-variant-numeric: tabular-nums; }
html, body { background: var(--bg); color: var(--ink); }
body { font: 13px/1.35 var(--mono); }
b, strong { font-weight: 700; }
/* long prose stays in the sans face; labels, numbers and controls are mono */
.tp-note, .tw-note, .tw-out-sub, .tw-menu-n, .tw-empty, .tw-ck, .tw-age-k, .tw-beta, .tp-foot { font-family: var(--font); }

/* ---------------------------------------------------------------- shared pieces */
.lbl, .tp-q i, .tp-cell i, .tp-leg i, .tp-phase, .tp-lead-k, .tw-sum-c i { font: 600 12px/1 var(--mono); font-style: normal; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.tp-brand { display: flex; align-items: center; gap: 8px; font: 800 14px/1 var(--mono); letter-spacing: .14em; white-space: nowrap; min-width: 0; }
.tp-mark { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 3px; background: var(--accent-bg); color: #1a1200; font: 800 13px/1 var(--mono); letter-spacing: 0; }
.tp-sl { color: var(--accent); margin: 0 1px; }
.tp-conn { display: inline-flex; align-items: center; gap: 7px; font: 700 12px/1 var(--mono); letter-spacing: .08em; padding: 0 10px; height: 32px; border: 1px solid var(--line2); border-radius: var(--radius); white-space: nowrap; background: var(--panel); }
.tp-conn b { text-transform: uppercase; letter-spacing: .08em; }
.tp-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
html[data-conn="ok"] .tp-dot { background: var(--pos); box-shadow: 0 0 0 0 rgba(var(--pos-rgb), .7); animation: tp-ping 1.6s infinite; }
html[data-conn="warn"] .tp-dot { background: var(--warn); }
html[data-conn="bad"] .tp-dot { background: var(--neg); }
html[data-conn="ok"] .tp-conn b { color: var(--pos); }
html[data-conn="warn"] .tp-conn b { color: var(--warn); }
html[data-conn="bad"] .tp-conn b { color: var(--neg); }
html[data-conn="warn"] .tp-conn, html[data-conn="bad"] .tp-conn { border-color: currentColor; }
.tp-conn-m { color: var(--ink2); }
.tp-conn-a { color: var(--muted); min-width: 4.6ch; text-align: right; }
@keyframes tp-ping { 70% { box-shadow: 0 0 0 7px rgba(var(--pos-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--pos-rgb), 0); } }

.tw-switch, [data-c="switch"] { display: flex; gap: 4px; }
.tw-sw { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 32px; padding: 0 10px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--panel); color: var(--tx, var(--ink)); text-decoration: none; font: 700 12px/1 var(--mono); letter-spacing: .08em; }
.tw-sw:hover { color: var(--accent); border-color: var(--accent); }

/* panel = title bar + body. Flat 3 px corners, a 1 px rule under the title. */
.tp-panel { --pad: 10px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); padding: 0 var(--pad) var(--pad); min-width: 0; position: relative; }
.tp-ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; margin: 0 calc(-1 * var(--pad)) 10px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); }
.tp-ph h2 { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-ph-v { color: var(--ink); font: 600 12px/1 var(--mono); letter-spacing: .02em; text-transform: none; }
.tp-meta { font: 12px/1.2 var(--mono); color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tp-note { color: var(--ink2); font-size: 12.5px; margin: 8px 0 0; }
.tp-foot { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.tp-dim { color: var(--muted); }
.tp-link { border: 0; background: none; padding: 6px 0; color: var(--accent); font: 700 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }

.tp-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; flex: none; border: 1px solid var(--line2); border-radius: var(--radius); background: transparent; color: var(--muted); font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.tp-chip.on { color: var(--ink); border-color: rgba(184, 146, 255, .7); background: rgba(184, 146, 255, .1); }
.tp-dia { display: inline-block; flex: none; width: 8px; height: 8px; background: var(--shadow); transform: rotate(45deg); }
.tp-chip:not(.on) .tp-dia { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }

.tp-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 12px/1.2 var(--mono); color: var(--muted); margin: -2px 0 6px; }
.tp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tp-legend .tw-mk { --side: var(--ink); }
.tp-sw { display: inline-block; width: 14px; height: 3px; background: var(--side); }
.tp-sw[data-s="cl"] { background: var(--ch-cl); }
.tp-sw[data-s="bn"] { background: var(--ch-bn); }
.tp-sw[data-s="zone"] { height: 10px; width: 10px; background: rgba(var(--accent-rgb), .2); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); }
.tp-chart { position: relative; min-width: 0; }

/* hero: countdown + projected winner */
.tp-hero-b { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: end; }
.tp-cd { font: 800 56px/1 var(--mono); letter-spacing: -.03em; color: var(--accent); text-shadow: var(--glow); }
html[data-low] .tp-cd { color: var(--neg); text-shadow: 0 0 24px rgba(var(--neg-rgb), .25); animation: tp-low 1s steps(2) infinite; }
@keyframes tp-low { 50% { opacity: .55; } }
.tp-phase { margin-top: 7px; }
.tp-phase-h { text-transform: uppercase; letter-spacing: .08em; }
html[data-final] .tp-hero .tp-phase-h, html[data-final] .tp-hero .tp-meta[data-k="phase"] { color: #1a1200; background: var(--accent-bg); padding: 3px 6px; border-radius: 2px; font-weight: 700; }
.tp-lead { text-align: right; min-width: 0; align-self: end; padding-bottom: 5px; }
.tp-lead-k { margin-bottom: 6px; }
.tp-lead-v { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tp-lead-side { font: 800 30px/1.05 var(--mono); letter-spacing: .01em; color: var(--side, var(--ink2)); }
.tp-lead-amt { font: 600 14px/1 var(--mono); color: var(--ink); white-space: nowrap; border-radius: 2px; }
/* stale values keep their weight but drop to the muted ink (AA on both themes) instead of fading with opacity */
.tp-lead-side[data-stale], .tp-lead-amt[data-stale] { color: var(--muted); }
.tp-lead-amt[data-stale]::after { content: "STALE"; margin-left: 6px; padding: 2px 4px; vertical-align: 2px; font: 700 10px/1 var(--mono); letter-spacing: .08em; color: #1a1200; background: var(--warn); border-radius: 2px; }
.tp-lead-x { font-size: 12px; color: var(--muted); margin-top: 6px; }
.tp-wsub { margin: -10px calc(-1 * var(--pad)) 8px; padding: 6px var(--pad); border-bottom: 1px solid var(--line); font: 12px/1.3 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* progress through the window: a transform-driven bar (compositor only), the settlement zone outlined at its end */
.tp-prog { position: relative; display: flex; justify-content: space-between; padding-top: 19px; margin: 10px 0 0; font: 12px/1 var(--mono); color: var(--muted); }
.tp-prog::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 2px; }
.tp-prog-b { position: absolute; left: 1px; right: 1px; top: 1px; height: 6px; transform-origin: left center; transform: scaleX(var(--prog, 0)); background: linear-gradient(90deg, #c98a12, var(--accent-bg)); will-change: transform; } /* 4 updates a second, each a sub-pixel step: no transition, so the page is not repainted every frame */
html[data-low] .tp-prog-b { background: var(--neg); }
.tp-prog-z { position: absolute; top: -2px; height: 12px; left: var(--zl, 79.333%); width: var(--zw, 20%); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .12); z-index: 1; border-radius: 1px; }
.tp-prog-t { position: relative; }

/* number grids: 1 px rules between cells (gap on a line-coloured ground), the panel's own border outside */
.tp-quotes, .tp-cells { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.tp-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px calc(-1 * var(--pad)) calc(-1 * var(--pad)); border-width: 1px 0 0; border-radius: 0 0 2px 2px; }
.tp-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp-cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.tp-q, .tp-cell { background: var(--panel); padding: 8px 10px; display: grid; gap: 4px; min-width: 0; align-content: start; position: relative; overflow: hidden; }
.tp-q i, .tp-cell i, .tp-leg i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-q b, .tp-cell b { font: 700 16px/1.25 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-q small, .tp-cell small { display: block; font: 12px/1.2 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }
.tp-q em { font: normal 12px/1 var(--mono); color: var(--muted); }
.tp-q b[data-side], .tp-q b[data-side] { color: var(--side); }
.tp-q b[data-stale], .tp-q b[data-stale] .tw-fl { color: var(--muted); }
.tp-cell-w { grid-column: 1 / -1; }
.tp-q .dn { color: var(--dn); } .tp-q .up { color: var(--up); }

/* position */
.tp-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-leg { padding: 8px 10px; background: var(--panel2); border-left: 3px solid var(--side); display: grid; gap: 3px; min-width: 0; }
.tp-leg b { font: 700 22px/1.1 var(--mono); color: var(--ink); }
.tp-leg span { font: 12px/1.2 var(--mono); color: var(--ink2); min-height: 1.2em; }
.tp-leg span em { font-style: normal; }
.tp-mix { position: relative; height: 6px; margin: 0 calc(-1 * var(--pad)) 8px; background: var(--dn); }
.tp-mix i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--upfrac, .5) * 100%); background: var(--up); transition: width .3s; }
.tp-mix-mt { background: var(--line2); margin: 0; height: 4px; }
.tp-mix-mt i { width: calc(var(--makerfrac, 0) * 100%); background: var(--ink2); }
.tp-split { margin-top: 10px; }
.tp-split .tp-note { margin-top: 6px; font: 12px/1.35 var(--mono); }
[data-stale-fills][data-stale] .tw-kv b, [data-stale-fills][data-stale] .tp-leg b, [data-stale-fills][data-stale] .tp-cell b { color: var(--muted); }
.tw-kv b[data-stale] { color: var(--muted); }
.tp-sub { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line2); }
.tp-sub h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.tp-sub h3 span { color: var(--muted); letter-spacing: .04em; text-transform: none; font-weight: 500; }
.tp-shadow .tp-ph h2 { color: var(--shadow); }

/* today */
.tp-big { font: 800 40px/1.05 var(--mono); letter-spacing: -.03em; margin: 4px 0 2px; }
.tp-seg { display: inline-flex; flex: none; border: 1px solid var(--line2); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.tp-seg button { border: 0; background: transparent; height: 32px; padding: 0 14px; font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.tp-seg button + button { border-left: 1px solid var(--line2); }
.tp-seg button.on { background: var(--accent-bg); color: #1a1200; }
.tp-vsline { display: flex; justify-content: space-between; gap: 10px; font: 600 12px/1.2 var(--mono); letter-spacing: .06em; margin: -2px 0 6px; }
.tp-vs-h { color: var(--accent); } .tp-vs-u { color: var(--shadow); }
.tp-vs-h b, .tp-vs-u b { margin-left: 4px; }
.tp-more { text-align: center; padding: 14px; color: var(--muted); font: 12px/1.3 var(--mono); }

/* replay */
.tp-rnav-row, .tp-dh { display: flex; align-items: center; gap: 6px; }
.tp-nb { flex: none; width: 40px; height: 40px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--panel2); color: var(--ink); font: 600 18px/1 var(--mono); cursor: pointer; }
.tp-nb:disabled { opacity: .35; cursor: default; }
.tp-nb:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.tp-rtitle { flex: 1; min-width: 0; display: grid; gap: 3px; text-align: center; }
.tp-rtitle b { font: 700 16px/1.1 var(--mono); letter-spacing: .02em; }
.tp-rtitle span { font: 12px/1.25 var(--mono); color: var(--muted); }
/* the title carries the clock suffix and the sub line UTC + ET + date: let them wrap instead of cutting */
html[data-device="m"] .tp-rtitle b { font-size: 14.5px; }
html[data-device="m"] .tp-rtitle span { overflow-wrap: anywhere; }
.tw-out { padding-top: 12px; }
.tw-out .tw-out-sub { font: 12px/1.45 var(--mono); }

/* fills: time, marker, side, price, shares, USDC */
.tw-frow, .tw-fhead { grid-template-columns: 8.2ch 12px 4.8ch minmax(5ch, 1fr) minmax(6ch, 1fr) minmax(8.5ch, 1.25fr); gap: 6px; font-size: 13px; padding-left: 2px; padding-right: 2px; }
.tw-fhead { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tw-frow[data-kind="taker"] .tw-ft::after { content: ""; }
.tw-fgrp { font-size: 12px; }
.tw-fgrp .tw-muted { font-weight: 500; }
.tw-frow { position: relative; }
.tw-fs { font-size: 13px; }

/* ================================================================ PHONE */
html[data-device="m"] body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
html[data-device="m"] .tp-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gut) 0; background: var(--bg);
}
html[data-device="m"] .tp-brand { flex: 1; overflow: hidden; }
html[data-device="m"] .tp-wb, html[data-device="m"] .tp-sl { display: none; }
html[data-device="m"] .tp-swm { order: 3; }
html[data-device="m"] .tp-conn { order: 2; }
html[data-device="m"] .tp-swm .tw-sw[data-sw] { display: none; } /* phone <-> laptop layout: the "..." menu */
/* the trader chooser: one bordered strip of 36 px tabs, scrolls sideways (the open trader is scrolled into view) */
html[data-device="m"] .tw-who { order: 9; flex: 1 1 100%; max-width: none; margin: 0; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--panel); overflow-x: auto; }
/* soft fade where more chips scroll out of view, and chips snap to the left edge so none is left half-cut */
html[data-device="m"] .tw-who { position: relative; scroll-snap-type: x proximity; }
html[data-device="m"] .tw-who-b { scroll-snap-align: start; }
html[data-device="m"] .tw-who[data-fr]:not([data-fl]) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
html[data-device="m"] .tw-who[data-fl]:not([data-fr]) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
html[data-device="m"] .tw-who[data-fl][data-fr] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
html[data-device="m"] .tw-who-b { flex: none; height: 36px; padding: 0 11px; font: 700 12px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
html[data-device="m"] .tw-who-b + .tw-who-b { border-left: 1px solid var(--line); }
html[data-device="m"] .tw-who-b.on { background: var(--accent-bg); color: #1a1200; border-left-color: var(--accent-bg); }
html[data-device="m"] .tw-mkt { order: 10; flex: 1 1 0; min-width: 0; gap: 8px; flex-wrap: nowrap; margin-bottom: 8px; }
html[data-device="m"] .tw-mkt-g { flex: none; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--panel); }
html[data-device="m"] .tw-mkt-g:first-child .tw-mkt-b { padding: 0 8px; }
html[data-device="m"] .tw-mkt-g:first-child { flex: none; }
html[data-device="m"] .tw-mkt-t { flex: none; }
html[data-device="m"] .tw-mkt-b { flex: none; height: 34px; padding: 0 10px; font: 700 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
html[data-device="m"] .tw-mkt-t .tw-mkt-b { padding: 0 3px; letter-spacing: 0; min-width: 32px; }
html[data-device="m"] .tw-mkt-b.on { background: var(--accent-bg); color: #1a1200; }
html[data-device="m"] .tp-wl { order: 10; margin: 0 0 8px auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 0; flex: none; max-width: 40%; }
html[data-device="m"] .tp-wl b { font: 700 13px/1.15 var(--mono); color: var(--ink); white-space: nowrap; }
html[data-device="m"] .tp-wl span { font: 12px/1.2 var(--mono); color: var(--muted); white-space: nowrap; }
@media (max-width: 389px) { html[data-device="m"] .tp-wl span { display: none; } }
.tp-wl { display: none; }
html[data-device="m"] .tp-wl { display: flex; }
.tw-extra { }
.tp-main { padding: 0 var(--gut) 16px; }
.tp-view { display: grid; gap: 8px; min-width: 0; }
html[data-device="m"] .tp-chart-price { height: 214px; }
html[data-device="m"] .tp-chart-btc { height: 170px; }
html[data-device="m"] .tp-chart-cum { height: 176px; }
html[data-device="m"] .tp-chart { margin: 0 -4px; }
html[data-device="m"] .tp-hero .tp-ph { margin-bottom: 10px; }
html[data-device="m"] .tp-hero .tp-wsub + .tp-hero-b { margin-top: 0; }
html[data-device="m"] [data-view="today"] .tp-hero .tp-seg { margin: 0 0 6px; }
html[data-device="m"] .tp-cells-4 { margin-top: 10px; }
html[data-device="m"] .tw-feed { background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); padding: 0 8px; }
html[data-device="m"] .tw-feed .tw-fgrp { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6px); background: var(--panel); z-index: 2; margin-top: 0; }
html[data-device="m"] .tp-rnav .tw-pick { margin-top: 10px; }
html[data-device="m"] .tp-rnav { padding-top: 12px; }
html[data-device="m"] .tw-pick .tw-pk { flex: 1; }
html[data-device="m"] .tw-pick .tw-pk select { width: 100%; }
html[data-device="m"] .tw-grid { gap: 3px; }
html[data-frozen] .tp-view .tp-panel:not(.tp-hero) { opacity: var(--frozen-op); }
html[data-device="m"] .tp-m-fills .tw-fhead { padding-top: 0; padding-bottom: 0; height: 28px; align-items: center; }
html[data-device="m"] .tp-m-fills .tw-frow { padding: 0 2px; height: 34px; }
html[data-device="m"] .tp-m-fills .tw-fills { margin: 0 calc(-1 * var(--pad)); padding: 0 calc(var(--pad) - 2px); }
html[data-device="m"] .tp-m-fills .tw-fhead { margin: 0 calc(-1 * var(--pad)); width: auto; padding: 0 var(--pad); border-bottom: 1px solid var(--line); }
.tp-m-fills { padding-bottom: 0; }

/* stats strip (win rate, entry, timing, lean, maker) */
html[data-device="m"] .tw-extra { padding: 0 var(--gut); display: grid; gap: 8px; margin: 0 0 8px; }
html[data-device="m"] .tw-extra:empty { padding: 0; margin: 0; }
html[data-device="m"] .tw-sum { grid-template-columns: repeat(5, auto); gap: 1px; background: var(--line); border: 1px solid var(--line2); border-radius: var(--radius); }
html[data-device="m"] .tw-sum-h { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 30px; padding: 0 10px; background: var(--panel); border-bottom: 1px solid var(--line); font: 700 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-device="m"] .tw-sum-c { padding: 7px 6px 8px; }
html[data-device="m"] .tw-sum-c b { margin-top: 5px; font: 700 15px/1.2 var(--mono); }
html[data-device="m"] .tw-sum-c i { letter-spacing: .04em; }
.tw-sum-c i .s { display: none; }
html[data-device="m"] .tw-sum-c i .l { display: none; }
html[data-device="m"] .tw-sum-c i .s { display: inline; }
html[data-device="m"] .tw-heat { padding: 0 var(--pad) var(--pad); }
.tw-hint { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
html[data-device="m"] .tw-heat .tw-sum-h { justify-content: space-between; margin: 0 calc(-1 * var(--pad)) 10px; padding: 0 var(--pad); min-height: 36px; display: flex; align-items: center; border-bottom: 1px solid var(--line); font: 700 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* bottom tab bar: LIVE / TODAY / REPLAY / FEED */
.tp-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--bar); border-top: 1px solid var(--line2); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tp-tabs button { position: relative; height: 62px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--muted); font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.tp-tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.tp-tabs button.on { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }

@media (max-width: 374px) {
  .tp-conn-m { display: none; }
  .tp-cd { font-size: 48px; }
  .tp-lead-side { font-size: 26px; }
  .tp-q, .tp-cell { --fs: 13px; }
}

/* ================================================================ LAPTOP */
html[data-device="l"], html[data-device="l"] body { height: 100%; }
html[data-device="l"] body { overflow: hidden; }
.tp-app { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100vh; min-height: 0; } /* header, extras (beta note, trader profile), screen, keys */
html[data-device="l"] .tp-top { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 10px; background: var(--bar2); border-bottom: 1px solid var(--line); min-width: 0; }
.tp-sym { display: flex; align-items: baseline; gap: 8px; flex: none; padding-left: 14px; border-left: 1px solid var(--line); font: 600 13px/1 var(--mono); }
.tp-sym b { color: var(--accent); letter-spacing: .06em; }
.tp-sym em { font-style: normal; color: var(--muted); font-size: 11px; }
.tp-tick { display: flex; gap: 0; flex: 1; min-width: 0; overflow: hidden; border-left: 1px solid var(--line); }
.tp-tick .tp-q { background: none; padding: 0 14px; border-right: 1px solid var(--line); gap: 3px; flex: none; }
.tp-tick .tp-q em { margin-left: 4px; }
.tp-tick .tp-q { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; }
.tp-tick .tp-q i { grid-column: 1 / -1; }
.tp-tick .tp-q em { align-self: end; margin: 0; }
.tp-fn { display: flex; gap: 4px; flex: none; }
.tp-fn button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 6px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--panel); color: var(--ink2); font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.tp-fn button:hover, .tp-fn button.on { color: var(--accent); border-color: var(--accent); }
.tp-fn kbd { background: var(--accent-bg); color: #111; border-color: var(--accent); }
.tp-swl { flex: none; }

.tp-grid {
  display: grid; gap: 6px; padding: 6px; min-height: 0;
  grid-template-columns: minmax(0, 1fr) 340px 318px;
  grid-template-rows: auto minmax(0, 1.1fr) minmax(0, 1fr) 236px;
  grid-template-areas: "price hero hero" "price pos feed" "btc pos feed" "today today today";
}
.tp-p-price { grid-area: price; } .tp-p-btc { grid-area: btc; } .tp-p-hero { grid-area: hero; } .tp-p-pos { grid-area: pos; } .tp-p-feed { grid-area: feed; } .tp-p-today { grid-area: today; }
html[data-device="l"] .tp-grid > .tp-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
html[data-device="l"] .tp-grid .tp-chart { flex: 1; min-height: 110px; }
html[data-device="l"] .tp-p-pos { overflow: auto; }
/* hero across the two right columns: clock + winner left, numbers right */
html[data-device="l"] .tp-grid > .tp-p-hero { display: grid; grid-template-columns: minmax(0, 1fr) 236px; grid-template-rows: auto auto auto auto; column-gap: 18px; align-content: start; }
.tp-p-hero > .tp-ph { grid-column: 1 / -1; }
.tp-p-hero > .tp-hero-b { grid-column: 1; grid-row: 2; }
.tp-p-hero > .tp-prog { grid-column: 1; grid-row: 3; }
.tp-p-hero > .tp-cells-3 { grid-column: 2; grid-row: 2 / 4; grid-template-columns: 1fr; margin: 0; align-self: center; }
.tp-p-hero > .tp-cells-3 .tp-cell { grid-template-columns: auto 1fr; align-items: baseline; padding: 6px 9px; }
.tp-p-hero > .tp-prev { grid-column: 1 / -1; grid-row: 4; }
.tp-p-hero .tp-lead-side { font-size: 34px; }
.tp-p-hero .tp-lead-amt { font-size: 19px; }
.tp-poscells { margin-top: 2px; }
.tp-poscells i em { font-style: normal; letter-spacing: .02em; color: var(--muted); font-weight: 500; text-transform: none; }
.tp-cell-hi { background: var(--panel2); }
html[data-device="l"] .tp-ph { min-height: 32px; margin-bottom: 8px; }
.tp-legend-in { margin: 0 0 0 auto; flex-wrap: nowrap; overflow: hidden; }
.tp-p-price .tp-ph h2 .tp-ph-v, .tp-p-btc .tp-ph h2 .tp-ph-v { color: var(--muted); font-weight: 500; }
html[data-device="l"] .tp-hero .tp-cd { font-size: 52px; }
html[data-device="l"] .tp-hero .tp-prog { margin-top: 12px; }
html[data-device="l"] .tw-kv { padding: 5px 0; }
html[data-device="l"] .tw-kv-big > b { font-size: 17px; }
button.tp-prev { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; width: 100%; margin-top: 10px; padding: 8px 0 0; border: 0; border-top: 1px dashed var(--line2); background: none; text-align: left; cursor: pointer; }
.tp-prev-k { font: 600 10.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--muted); }
button.tp-prev b { font: 600 12.5px/1.3 var(--mono); margin-left: auto; }
button.tp-prev:hover .tp-prev-k { color: var(--accent); }
.tp-p-feed .tw-fills { flex: 1; min-height: 0; overflow: auto; margin: 0 -6px; padding: 0 6px; }
.tp-scroll { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.tw-fhead { padding-top: 0; padding-bottom: 6px; }

.tp-p-today .tp-ph { gap: 14px; justify-content: flex-start; }
.tp-p-today .tp-ph .tp-meta { margin-left: auto; }
.tp-p-today .tp-seg button { height: 24px; padding: 0 10px; }
.tp-today { flex: 1; min-height: 0; display: grid; gap: 14px; grid-template-columns: 252px minmax(330px, 1.35fr) minmax(240px, 1fr) minmax(300px, .95fr); }
.tp-today > div { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.tp-kpi .tp-big { font-size: 32px; margin: 0 0 8px; }
.tp-kpi .tp-cells { flex: none; }
.tp-kpi .tp-cell { padding: 5px 8px; gap: 3px; }
.tp-kpi .tp-cell { --fs: 13px; }
.tp-sh { font: 650 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; white-space: nowrap; overflow: hidden; }
.tp-sh span { letter-spacing: .04em; margin-left: 6px; font-weight: 500; }
.tp-sh .tp-vs-h, .tp-sh .tp-vs-u { font: 600 10.5px/1 var(--mono); letter-spacing: .04em; margin-left: 10px; }
.tp-tgrid [data-c="grid"] { flex: 1; min-height: 0; grid-template-rows: auto repeat(var(--gk, 12), minmax(0, 1fr)); }
html[data-win="900"] { --zl: 93.1%; --zw: 6.9%; } /* the final TWAP minute of a 15-minute window */
.tp-tgrid .tw-gridlegend { margin-top: 6px; font-size: 10px; gap: 4px 8px; }
.tp-tcum .tp-chart { flex: 1; min-height: 0; }
[data-c="cum"] { --ch-area: 0; --ch-end-labels: 0; --ch-line: 2; }
.tp-pt { display: flex; gap: 0; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.tp-pt button { white-space: nowrap; border: 0; background: none; padding: 4px 6px 6px; font: 650 10px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tp-pt button.on { color: var(--accent); border-bottom-color: var(--accent); }
.tp-pane { flex: 1; min-height: 0; overflow: auto; }
.tp-pane .tw-tbl { font-size: 12px; }
.tp-pane .tw-tbl td, .tp-pane .tw-tbl th { padding: 5px 3px; }
.tp-pane .tw-kv { padding: 4px 0; font-size: 12.5px; }
.tp-pane .tw-kv > b { font-size: 13px; }
.tp-pane .tp-note { font-size: 11px; margin-top: 6px; }
.tp-pane .tw-ck { font-size: 11.5px; }
.tp-pane .tw-age { font-size: 11.5px; padding: 3px 0; }

.tp-status { display: flex; align-items: center; gap: 18px; height: 26px; padding: 0 10px; border-top: 1px solid var(--line); background: var(--bar2); font: 11px/1 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; }
.tp-keys kbd { margin: 0 3px 0 8px; font-size: 10px; padding: 1px 4px; }
.tp-keys kbd:first-child { margin-left: 0; }
.tp-fresh { margin-left: auto; }
.tp-fresh[data-stale] { color: var(--warn); }
.tp-lag b { color: var(--ink2); font-weight: 600; }
html[data-frozen] .tp-grid > .tp-panel, html[data-frozen] .tp-p-pos { opacity: var(--frozen-op); }

/* drawers */
.tp-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(1180px, 94vw); display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line2); box-shadow: -24px 0 48px rgba(0, 0, 0, .45);
  transform: translateX(102%); transition: transform .22s ease-out; visibility: hidden;
}
.tp-drawer-feed { width: min(560px, 94vw); }
html[data-drawer="replay"] [data-drawer="replay"], html[data-drawer="feed"] [data-drawer="feed"] { transform: none; visibility: visible; }
.tp-dh { flex: none; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--bar2); flex-wrap: wrap; }
.tp-dh .tp-rtitle { flex: 0 1 230px; text-align: left; padding: 0 8px; }
.tp-dh .tw-pick { margin-left: auto; align-items: center; }
.tp-dh .tw-pk { grid-auto-flow: column; align-items: center; gap: 6px; }
.tp-x { flex: none; height: 34px; padding: 0 12px; margin-left: 8px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--panel); color: var(--ink2); font: 600 11px/1 var(--mono); letter-spacing: .06em; cursor: pointer; }
.tp-x:hover { color: var(--accent); border-color: var(--accent); }
.tp-drawer-feed .tp-dh .tp-rtitle { flex: 1; }
.tp-dbody { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.tp-rgrid { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
.tp-rmain, .tp-rside { display: grid; gap: 8px; min-width: 0; }
.tp-chart-rprice { height: 360px; }
.tp-chart-rbtc { height: 230px; }
.tp-drawer-feed .tw-feed { padding: 0 4px; }

@media (max-width: 1320px) {
  .tp-grid { grid-template-columns: minmax(0, 1fr) 320px 290px; }
  .tp-today { grid-template-columns: 236px minmax(300px, 1.3fr) minmax(220px, 1fr) minmax(280px, .95fr); gap: 10px; }
}
@media (min-width: 1700px) {
  .tp-grid { grid-template-columns: minmax(0, 1fr) 380px 360px; grid-template-rows: auto minmax(0, 1.1fr) minmax(0, 1fr) 272px; }
  html[data-device="l"] .tp-hero .tp-cd { font-size: 60px; }
}
/* short viewports (1280x720, 1366x768 and browsers with toolbars): the page keeps its own row heights and scrolls,
   so TODAY and the status bar are always reachable */
@media (max-height: 800px) {
  html[data-device="l"] body { overflow: auto; }
  .tp-app { height: auto; min-height: 100vh; }
  .tp-grid { grid-template-rows: auto 280px 230px 236px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-conn="ok"] .tp-dot { animation: none; }
}
.tp-dbody > .tp-note { margin: 2px 4px 12px; }
/* small laptops (1280 wide, 800 tall) */
@media (max-width: 1320px) {
  .tp-grid { grid-template-columns: minmax(0, 1fr) 312px 300px; }
  .tp-p-feed .tw-frow, .tp-p-feed .tw-fhead { gap: 4px; font-size: 11.5px; grid-template-columns: 8.2ch 9px 4.6ch minmax(4.5ch, 1fr) minmax(5ch, 1fr) minmax(7.5ch, 1.2fr); }
  .tp-pt button { padding: 4px 4px 6px; font-size: 9.5px; letter-spacing: .03em; }
  .tp-sh-w { display: none; }
  .tp-sh .tp-vs-h { margin-left: 0; }
}
@media (max-height: 920px) and (min-height: 801px) {
  .tp-grid { grid-template-rows: auto minmax(0, .7fr) minmax(0, 1fr) 206px; }
  .tp-kpi .tp-big { font-size: 26px; margin-bottom: 6px; }
  .tp-kpi .tp-cell { padding: 4px 8px; gap: 2px; }
  .tp-kpi .tp-cell:nth-child(n+7) { display: none; } /* yday all-in and our P&L are in the tabs and the chart header */
  .tw-grid-cols .tw-gm:not(.tw-gm-q) { visibility: hidden; }
  html[data-device="l"] .tp-hero .tp-cd { font-size: 44px; }
  .tp-p-hero .tp-lead-side { font-size: 28px; }
  html[data-device="l"] .tp-hero .tp-prog { margin-top: 8px; }
}

/* Shadow removed from the UI (Vicky, 2026-10-12): hide every shadow panel, chip, cell, tab and legend item. */
.tp-shadow, .tp-vs-u, [data-act="shadow"], [data-c="rsh"], [data-k="us.pnl"], [data-ptab="vs"], .tp-legend span:has(.tp-dia), .tp-legend .tp-dia, .tw-rnd-u,
.tp-sub:has(> h3 > .tp-dia), .tp-cell:has([data-k="us.pnl"]), .tp-panel:has([data-c="rsh"]), .tp-panel:has(.tp-chart-cum) .tp-meta-us { display: none !important; }

/* data-freshness badge: the age of the newest data, green < 3 s, amber < 15 s, red beyond */
.tp-conn-a { font-weight: 700; }
.tp-conn-a[data-age="ok"] { color: var(--pos); }
.tp-conn-a[data-age="warn"] { color: var(--warn); }
.tp-conn-a[data-age="bad"] { color: var(--neg); }

/* ================================================================ LAPTOP FIXES (small screens, long wallet names) */
/* heat-map of today's windows: a cell is exactly as wide as its hour column, on every width and for 5m and 15m
   (the 15m rule gives cells a 4.5 aspect ratio, which made them wider than their column and ran past the grid) */
.tw-grid.tw-grid-cols .tw-cell, .tw-grid.tw-grid-cols[data-win="900"] .tw-cell { aspect-ratio: auto; width: 100%; min-width: 0; }
.tp-tgrid, .tp-tgrid [data-c="grid"] { min-width: 0; }

/* header: pieces drop out whole (a.js hides trailing chips / quotes that do not fit), nothing is cut in half */
html[data-device="l"] .tp-top { gap: 12px; }
html[data-device="l"] .tp-brand { flex: none; }
html[data-device="l"] .tw-who { overflow: hidden; flex: 0 1 auto; }
html[data-device="l"] .tp-tick { flex: 1 1 0; min-width: 0; }
.tp-sym { white-space: nowrap; }
.tp-sym em { display: inline-flex; gap: 0; }
.tp-utc { margin-right: .7ch; }
.tp-et-s { display: none; }
@media (max-width: 1999px) {
  html[data-device="l"] .tp-sl, html[data-device="l"] .tp-bt { display: none; }
  .tp-conn-m { display: none; }
  .tp-swl .tw-sw:first-child { display: none; } /* the phone layout stays in the ... menu */
  html[data-device="l"] .tw-who-b { padding: 0 10px; }
}
@media (max-width: 1699px) {
  .tp-utc { display: none; }
}
@media (max-width: 1440px) {
  html[data-device="l"] .tp-top { gap: 10px; }
  .tp-sym { padding-left: 10px; gap: 6px; }
  .tp-sym > b { display: none; }   /* the BTC / ETH and 5m / 15m switch already says which market this is */
  .tp-et-l { display: none; }
  .tp-et-s { display: inline; }
}

/* panel titles: the wallet name shrinks (with an ellipsis) before the key word does; the right-hand note shrinks first */
.tp-ph h2 { flex: 0 1 auto; }
html[data-device="l"] .tp-ph > .tp-meta { flex: 0 100 auto; }
html[data-device="l"] .tp-ph:has(> .tp-meta) > h2 { flex-shrink: 0; max-width: 100%; } /* the note gives way; the title only when it alone is wider than the header */
.tw-wl { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tw-wl[data-addr] { text-transform: none; }
.tw-ht { flex: none; }
.tp-ph-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* chart legends keep every item whole; the title text next to them gives way */
.tp-legend-in { flex: none; }
.tp-ph .tp-chip { flex: none; }
/* 5m grid: 12 rows of labels do not fit a short TODAY band, so only :00 :15 :30 :45 are written (every cell stays) */
@media (max-height: 1000px) { .tw-grid[data-win="300"].tw-grid-cols .tw-gm:not(.tw-gm-q) { visibility: hidden; } }

/* ================================================================ 1h / 4h / 1d MARKETS */
/* the Chainlink kinds' final-TWAP minute is a sliver of a 4-hour bar; a Binance candle has no such zone */
html[data-tf="4h"] { --zl: 99.55%; --zw: .45%; }
html[data-tf="1d"] { --zl: 99.9%; --zw: .1%; }
html[data-settle="binance"] .tp-prog-z { display: none; }
/* the daily market has no UTC-day toggle: its TODAY panel is the last 7 windows */
html[data-tf="1d"] .tp-seg[aria-label="Day"] { display: none; }
/* TODAY grid of the long kinds: one labelled cell per window (24 hours / 6 four-hour blocks / 7 days) */
.tw-grid.tw-grid-long { display: grid; grid-template-columns: repeat(var(--lcols, 6), minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.tw-grid-long .tw-cell { aspect-ratio: auto; width: 100%; min-width: 0; min-height: 46px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 4px 5px; text-align: left; color: var(--ink); }
.tw-grid-long[data-tf="1h"] .tw-cell { min-height: 34px; align-items: center; justify-content: center; }
.tw-lc-t { font: 600 10px/1 var(--mono); font-style: normal; color: inherit; }
.tw-lc-v { font: 700 11px/1.1 var(--mono); }
.tw-grid-long .tw-cell[data-st="none"] .tw-lc-t, .tw-grid-long .tw-cell[data-st="future"] .tw-lc-t { color: var(--muted); }
html[data-device="m"] .tw-grid-long .tw-lc-v { font-size: 10.5px; }

/* ================================================================ MARKET ONLY (no trader: the page of a market with nobody on it) */
html[data-market="1"] .tw-tr, html[data-market="1"] .tp-p-pos, html[data-market="1"] .tp-p-feed, html[data-market="1"] .tp-p-today,
html[data-market="1"] [data-tab="today"], html[data-market="1"] [data-tab="feed"], html[data-market="1"] .tw-who { display: none !important; }
html[data-market="1"] .tp-tabs { grid-template-columns: repeat(2, 1fr); }
html[data-market="1"][data-device="l"] .tp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "hero hero" "price btc"; }

/* ================================================================ WINDOW TITLES on a phone */
/* the hero header carries the local window time (line 1) and Polymarket's Eastern title time plus the UTC range (line 2): it wraps instead of being cut */
html[data-device="m"] .tp-hero .tp-ph:has(> .tp-meta[data-k="win.utcr"]) { flex-wrap: wrap; row-gap: 2px; padding-top: 6px; padding-bottom: 6px; }
html[data-device="m"] .tp-hero .tp-ph > .tp-meta[data-k="win.utcr"] { flex: 1 1 100%; text-align: left; white-space: normal; overflow: visible; }

/* ================================================================ LAPTOP: Pro Terminal pass (M2) */
html[data-device="l"] .tp-top { height: 50px; padding: 0 12px; gap: 12px; background: var(--bg); border-bottom: 1px solid var(--line2); }
html[data-device="l"] .tp-wb, html[data-device="l"] .tp-sl { display: none; }
html[data-device="l"] .tp-bt { display: inline; }
html[data-device="l"] .tp-brand { gap: 9px; padding-right: 4px; }
html[data-device="l"] .tw-who { height: 34px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
html[data-device="l"] .tw-who-b { height: 32px; padding: 0 11px; font: 700 12px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
html[data-device="l"] .tw-who-b + .tw-who-b { border-left: 1px solid var(--line); }
html[data-device="l"] .tw-who-b.on { background: var(--accent-bg); color: #1a1200; border-left-color: var(--accent-bg); }
html[data-device="l"] .tw-mkt-g { border: 1px solid var(--line2); border-radius: var(--radius); background: var(--panel); }
html[data-device="l"] .tw-mkt-b { height: 32px; padding: 0 10px; font: 700 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
html[data-device="l"] .tw-mkt-t .tw-mkt-b { padding: 0 8px; letter-spacing: .02em; }
html[data-device="l"] .tw-mkt-b.on { background: var(--accent-bg); color: #1a1200; }
html[data-device="l"] .tp-sym { margin-left: auto; flex-direction: column; align-items: flex-end; gap: 3px; padding: 0 4px 0 0; border: 0; font: 700 13px/1.15 var(--mono); color: var(--ink); }
html[data-device="l"] .tp-sym > b { display: none; }
html[data-device="l"] .tp-sym em { display: block; font: 12px/1.15 var(--mono); color: var(--muted); white-space: nowrap; }
html[data-device="l"] .tp-utc { display: none; }
.tp-fn button { height: 32px; font: 700 12px/1 var(--mono); letter-spacing: .08em; background: var(--panel); border-radius: var(--radius); }
.tp-fn kbd { border-radius: 2px; font-weight: 700; }
html[data-device="l"] .tp-conn { height: 32px; }
html[data-device="l"] .tw-sw { height: 32px; }

/* the stats strip is a bordered panel of five cells */
html[data-device="l"] .tw-extra { padding: 8px 8px 0; }
html[data-device="l"] .tw-extra:empty { padding: 0; }
html[data-device="l"] .tw-sum { grid-template-columns: minmax(220px, auto) repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line2); border-radius: var(--radius); }
html[data-device="l"] .tw-sum-h { background: var(--panel); padding: 0 14px; font: 700 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
html[data-device="l"] .tw-sum-c { background: var(--panel); display: flex; align-items: baseline; gap: 10px; padding: 9px 14px; }
html[data-device="l"] .tw-sum-c i { font-size: 12px; }
html[data-device="l"] .tw-sum-c b { font: 700 16px/1.2 var(--mono); }
html[data-device="l"] .tw-beta { margin: 0; border: 0; border-bottom: 1px solid var(--line2); padding: 6px 14px; font-size: 12px; }

.tp-grid { gap: 8px; padding: 8px; }
html[data-device="l"] .tp-grid > .tp-panel { --pad: 12px; }
html[data-device="l"] .tp-ph { min-height: 36px; margin-bottom: 10px; }

/* window card: clock + winner, progress, the 6 quote cells in one row */
html[data-device="l"] .tp-grid > .tp-p-hero { display: flex; flex-direction: column; overflow: hidden; }
html[data-device="l"] .tp-p-hero .tp-hero-b { margin-top: 2px; }
html[data-device="l"] .tp-hero .tp-cd { font-size: 60px; }
html[data-device="l"] .tp-p-hero .tp-lead-side { font-size: 38px; }
html[data-device="l"] .tp-p-hero .tp-lead-amt { font-size: 16px; }
html[data-device="l"] .tp-p-hero .tp-lead-x { font: 12px/1 var(--mono); color: var(--muted); margin-top: 7px; }
html[data-device="l"] .tp-p-hero .tp-lead-x b { color: var(--ink2); font-weight: 600; }
html[data-device="l"] .tp-p-hero .tp-prog { margin-top: 10px; }
html[data-device="l"] .tp-p-hero .tp-quotes { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 10px; margin-bottom: calc(-1 * var(--pad)); }
html[data-device="l"] .tp-p-hero .tp-q { padding: 7px 10px 8px; gap: 3px; }
html[data-device="l"] .tp-p-hero .tp-q { --fs: 15px; }
html[data-device="l"] .tp-p-hero .tp-q i { font-size: 11px; letter-spacing: .06em; }
html[data-device="l"] .tp-p-hero .tp-q small { font-size: 11.5px; }
html[data-device="l"] .tp-p-hero > .tp-prev { margin: calc(var(--pad) + 2px) 0 0; }
button.tp-prev { margin-top: 12px; }

/* position: a 3 x 2 grid (shares up / down, cost, if up, if down, expected at mid) */
.tp-pos6 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 calc(-1 * var(--pad)); border-width: 0 0 1px; border-radius: 0; }
.tp-pos6 .tp-cell { padding: 8px 10px; }
.tp-pos6 .tp-leg i { color: var(--side); }
.tp-pos6 .tp-leg { border-left: 0; background: var(--panel); }
.tp-pos6 .tp-cell-hi { background: var(--panel2); }
html[data-device="l"] .tp-p-pos .tp-mix { margin-bottom: 0; }
.tp-pos6 small { white-space: nowrap; }

/* fills feed */
html[data-device="l"] .tp-p-feed .tw-frow { padding: 0 2px; height: 31px; font-size: 12.5px; }
html[data-device="l"] .tp-p-feed .tw-fhead { height: 26px; align-items: center; padding: 0 2px; margin-bottom: 0; font-size: 11.5px; }
html[data-device="l"] .tp-p-feed .tw-fgrp-s { padding: 6px 2px 3px; font: 600 12px/1.2 var(--mono); color: var(--ink2); }
html[data-device="l"] .tp-p-feed .tw-fills { margin: 0 -6px; padding: 0 6px 0 4px; scrollbar-gutter: stable; }

/* status bar */
.tp-status { height: 28px; padding: 0 12px; background: var(--bg); border-top: 1px solid var(--line2); font: 12px/1 var(--mono); }
.tp-keys kbd { background: var(--panel2); border-color: var(--line2); color: var(--ink); font: 700 11px/1 var(--mono); padding: 2px 5px; }

/* TODAY strip */
html[data-device="l"] .tp-p-today .tp-seg button { height: 26px; padding: 0 11px; }
.tp-sh { font: 700 12px/1 var(--mono); letter-spacing: .08em; }
.tp-pt button { font: 700 12px/1 var(--mono); letter-spacing: .04em; }
.tw-tbl th { font-family: var(--mono); font-size: 12px; }

/* drawers (replay / feed) */
.tp-drawer { background: var(--bg); border-left: 1px solid var(--line2); }
.tp-dh { background: var(--bg); border-bottom: 1px solid var(--line2); }
.tp-x { height: 32px; font: 700 12px/1 var(--mono); letter-spacing: .06em; background: var(--panel); }

/* a 900 px tall laptop: the window card, position and TODAY strip are trimmed so every panel keeps its numbers */
@media (max-height: 920px) and (min-height: 801px) {
  html[data-device="l"] .tp-hero .tp-cd { font-size: 52px; }
  html[data-device="l"] .tp-p-hero .tp-lead-side { font-size: 32px; }
  html[data-device="l"] .tp-p-hero .tp-prog { margin-top: 8px; }
  html[data-device="l"] .tp-p-hero .tp-lead-x { margin-top: 5px; }
  .tp-pos6 .tp-cell { padding: 6px 10px; gap: 3px; }
  .tp-pos6 .tp-cell { --fs: 15px; }
  html[data-device="l"] .tp-p-pos .tp-split .tp-note { margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html[data-device="l"] .tp-ph { margin-bottom: 8px; min-height: 34px; }
}
html[data-device="l"] .tp-p-feed .tw-frow, html[data-device="l"] .tp-p-feed .tw-fhead { grid-template-columns: 8.2ch 10px 4.4ch minmax(4.5ch, 1fr) minmax(5.5ch, 1fr) minmax(7.5ch, 1.2fr); gap: 4px; }

html[data-device="l"] .tp-p-pos .tp-pos-n { display: none; }
@media (min-height: 921px) { html[data-device="l"] .tp-p-pos .tp-pos-n { display: block; font: 12px/1.35 var(--mono); margin-top: 4px; } }
@media (max-height: 920px) and (min-height: 801px) { .tp-tgrid .tw-gridlegend .tw-muted { display: none; } }

/* ================================================================ MOTION (Pro Terminal, MOTION.md) */
/* 1 digit flash: the changed digits fade from a green / red wash (800 ms), the cell gets a faint wash from the top */
.tw-fl { font: inherit; color: var(--ink); border-radius: 2px; animation: tw-fl-u .8s steps(5, end); } /* stepped fade: ~6 frames, not a 60 fps repaint */
.tw-fl.d { animation-name: tw-fl-d; }
@keyframes tw-fl-u { 0% { background: rgba(var(--pos-rgb), .4); } 100% { background: transparent; } }
@keyframes tw-fl-d { 0% { background: rgba(var(--neg-rgb), .4); } 100% { background: transparent; } }
.tw-wash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.tw-wash[data-d="u"] { background: linear-gradient(180deg, rgba(var(--pos-rgb), .22), transparent); }
.tw-wash[data-d="d"] { background: linear-gradient(180deg, rgba(var(--neg-rgb), .22), transparent); }
/* 3 head ping: the newest point of a live line (overlay, transform + opacity only) */
.tw-hd { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; --c: var(--ink); }
.tw-hd[data-s="up"] { --c: var(--up); } .tw-hd[data-s="dn"] { --c: var(--dn); } .tw-hd[data-s="cl"] { --c: var(--ch-cl); }
.tw-hd b { position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--c); opacity: .9; animation: tw-ping 1.3s steps(9, end) infinite; }
@keyframes tw-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
/* 4 fill arrival: toast (top), row slide with an amber left bar */
.tw-ftoast { position: fixed; left: var(--gut); right: var(--gut); top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 90; display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 3px; background: var(--accent-bg); color: #1a1200; font: 700 13px/1.3 var(--mono); box-shadow: 0 6px 24px rgba(0, 0, 0, .5); transform: translateY(-220%); transition: transform .32s cubic-bezier(.2, .9, .2, 1); pointer-events: none; }
.tw-ftoast.on { transform: none; }
html[data-device="l"] .tw-ftoast { left: auto; right: 24px; width: 420px; }
.tw-frow.tw-new { animation: tw-rowin .45s cubic-bezier(.2, .9, .2, 1); }
.tw-frow.tw-new::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-bg); animation: tw-bar 1.6s ease-out forwards; }
@keyframes tw-rowin { from { transform: translateY(-14px); opacity: 0; background: rgba(var(--accent-rgb), .25); } to { transform: none; opacity: 1; } }
@keyframes tw-bar { to { opacity: 0; } }
/* 5 window roll: a dark card over the window panel */
.tw-roll { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(var(--bg-rgb), .94); border-radius: 3px; opacity: 0; pointer-events: none; text-align: center; }
.tw-roll-k { font: 600 12px/1 var(--mono); letter-spacing: .09em; color: var(--muted); }
.tw-roll b { font: 800 22px/1.1 var(--mono); }
.tw-roll b small { font: 600 14px var(--mono); color: var(--ink); }
.tw-roll b .up { color: var(--up); } .tw-roll b .dn { color: var(--dn); }
.tw-roll-s { font: 12px/1.3 var(--mono); color: var(--muted); padding: 0 12px; }
/* 6 skeleton load: grey bars + an amber scan line over the live panels until the first data has painted */
html[data-loading] .tp-view[data-view="live"] > .tp-panel, html[data-loading] .tp-grid > .tp-panel:not(.tp-p-today), html[data-loading] .tw-sum { overflow: hidden; }
html[data-loading] .tp-view[data-view="live"] > .tp-panel::before, html[data-loading] .tp-grid > .tp-panel:not(.tp-p-today)::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 36px; z-index: 6; background:
    linear-gradient(var(--panel2), var(--panel2)) 12px 16px / 38% 12px no-repeat,
    linear-gradient(var(--panel2), var(--panel2)) 12px 44px / 66% 52px no-repeat,
    linear-gradient(var(--panel2), var(--panel2)) 12px 112px / 90% 12px no-repeat,
    linear-gradient(var(--panel2), var(--panel2)) 12px 140px / 60% 12px no-repeat, var(--panel);
}
html[data-loading] .tp-view[data-view="live"] > .tp-panel::after, html[data-loading] .tp-grid > .tp-panel:not(.tp-p-today)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 36px; z-index: 7; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(var(--accent-rgb), .10) 50%, transparent 70%); animation: tw-sh 1s linear infinite;
}
@keyframes tw-sh { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .tw-hd b, .tw-fl, .tw-frow.tw-new, .tw-frow.tw-new::before { animation: none !important; } .tw-ftoast { transition: none; } }

/* ================================================================ FIT: values never truncate or overlap
   A number in a fixed-column grid cell (quotes, position, TODAY numbers) shrinks to its cell: core.js writes the text length into
   --n, the mono face is 0.6 em per character, and the cell is a size container, so the font size is simply
   cell width / (0.62 x characters), between 10 px and the cell's own size (--fs). Pure CSS, no layout reads per tick.
   Sub-lines wrap (anywhere) instead of being cut. */
.tp-cells .tp-cell, .tp-quotes .tp-q { container-type: inline-size; --fs: 16px; }
@supports (width: 1cqi) {
  .tp-cells .tp-cell b, .tp-quotes .tp-q b { font-size: clamp(10px, calc(100cqi / (.62 * var(--n, 1))), var(--fs, 16px)); }
}
.tp-cell small, .tp-q small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
.tp-pos6 small span:empty { display: none; }
.tp-pos6 small span + span:not(:empty)::before { content: " "; }
.tp-pos6 .tp-cell { padding: 8px 10px; }
.tp-pos6 .tp-leg i { color: var(--side); }

/* phone position: the same 3 x 2 grid as the laptop (shares up / down, cost, if up, if down, expected at mid) */
html[data-device="m"] .tp-m-pos .tp-pos6 { margin-bottom: 0; }
html[data-device="m"] .tp-m-pos .tp-mix { margin-top: 0; }

/* stats strip on a narrow phone (320 - 389 px): 3 + 2 cells, each wide enough for "T+20:23:54" */
@media (max-width: 389px) {
  html[data-device="m"] .tw-sum { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html[data-device="m"] .tw-sum-c { grid-column: span 2; }
  html[data-device="m"] .tw-sum-c:nth-child(n+5) { grid-column: span 3; }
  html[data-device="m"] .tw-sum-c b { font-size: 14px; }
}

/* a short laptop (<= 800 px tall): the page scrolls, and the TODAY strip keeps every number: tighter KPI cells, and the column scrolls
   inside if the card is still taller than the strip */
@media (max-height: 800px) {
  .tp-grid { grid-template-rows: auto 280px 230px 252px; }
  .tp-kpi { overflow-y: auto; scrollbar-width: thin; }
  .tp-kpi .tp-big { font-size: 24px; margin: 0 0 4px; }
  .tp-kpi .tp-cell { padding: 3px 8px; gap: 1px; }
  .tp-kpi .tp-cell small { display: none; }
}

/* 320 - 359 px phones: nothing may run past the screen. The window label gets its own line under the market switch,
   the price-chart legend wraps under its title, and the fills table uses tighter columns. */
@media (max-width: 359px) {
  html[data-device="m"] .tw-mkt { flex: 1 1 100%; margin-bottom: 4px; }
  html[data-device="m"] .tp-wl { order: 11; flex: 1 1 100%; max-width: none; flex-direction: row; align-items: baseline; justify-content: space-between; margin: 0 0 8px; }
  html[data-device="m"] .tp-wl span { display: inline; }
  html[data-device="m"] .tp-m-price .tp-ph { flex-wrap: wrap; row-gap: 2px; padding-top: 6px; padding-bottom: 6px; }
  html[data-device="m"] .tp-m-price .tp-legend-in { flex: 1 1 100%; margin: 0; }
  html[data-device="m"] .tw-frow, html[data-device="m"] .tw-fhead { grid-template-columns: 8ch 10px 4.4ch minmax(4.2ch, 1fr) minmax(5ch, 1fr) minmax(7ch, 1.2fr); gap: 4px; font-size: 12px; }
  html[data-device="m"] .tw-fs { font-size: 12px; }
  html[data-device="m"] .tp-ph { flex-wrap: wrap; row-gap: 0; padding-top: 6px; padding-bottom: 6px; }
  html[data-device="m"] .tp-ph .tp-meta { margin-left: auto; white-space: normal; text-overflow: clip; overflow: visible; text-align: right; }
}