/* tape-web v2 base: structure of the components core.js renders (tw-*). Colours and fonts come
   from the design's variables:
   --bg --panel --panel2 --line --ink --ink2 --muted --up --dn --pos --neg --warn --accent
   --font --mono --radius */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tw-muted { color: var(--muted); }
.tw-empty { color: var(--muted); padding: 10px 0; font-size: 13px; }
.tw-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }

/* signed numbers: never colour alone, the text always carries + / − */
[data-sign="pos"] { color: var(--pos); }
[data-sign="neg"] { color: var(--neg); }
[data-side="up"] { --side: var(--up); }
[data-side="dn"] { --side: var(--dn); }

/* key/value rows */
.tw-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.tw-kv:first-child { border-top: 0; }
.tw-kv > span { color: var(--ink2); min-width: 0; }
.tw-kv > b { font: 600 14px/1.3 var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tw-kv em { font-style: normal; color: var(--muted); font-size: 12px; }
.tw-kv-big > b { font-size: 18px; }
.tw-note, .tw-out-sub { color: var(--ink2); font-size: 13px; margin: 8px 0 0; }

/* tables */
.tw-tbl { width: 100%; border-collapse: collapse; font: 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.tw-tbl th { font: 600 10.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: right; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.tw-tbl td { text-align: right; padding: 7px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tw-tbl th:first-child, .tw-tbl td:first-child { text-align: left; font-family: var(--font); color: var(--ink2); white-space: normal; }
.tw-tbl tfoot td { border-bottom: 0; font-weight: 700; color: var(--ink); }
.tw-tbl tfoot td:first-child { color: var(--ink); }
.tw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--side); margin-right: 6px; vertical-align: 1px; }

/* checks */
.tw-checks { display: grid; gap: 8px; }
.tw-ck { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 13px; color: var(--ink2); align-items: start; }
.tw-ck b { color: var(--ink); font-family: var(--mono); }
.tw-ic { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 3px; font: 700 11px/1 var(--mono); background: var(--panel2); color: var(--muted); }
.tw-ck[data-ok="yes"] .tw-ic { color: var(--pos); }
.tw-ck[data-ok="no"] .tw-ic { color: var(--bg); background: var(--warn); }

/* freshness */
.tw-ages { display: grid; }
.tw-age { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.tw-age:first-child { border-top: 0; }
.tw-age-k { color: var(--ink2); }
.tw-age-v { font: 500 12px/1.4 var(--mono); text-align: right; }
.tw-age.bad .tw-age-v, .tw-age.bad .tw-age-k { color: var(--warn); }

/* fill rows (live list, replay list, feed) */
.tw-fills { display: grid; }
.tw-frow, .tw-fhead {
  display: grid; grid-template-columns: 6.6ch 16px 5.2ch minmax(5ch, 1fr) minmax(6ch, 1fr) minmax(8ch, 1.2fr); gap: 8px; align-items: center;
  width: 100%; padding: 7px 4px; text-align: left; background: none; border: 0; border-top: 1px solid var(--line);
  font: 13px/1.2 var(--mono); font-variant-numeric: tabular-nums; cursor: pointer;
}
.tw-fhead { cursor: default; font: 600 10px/1 var(--font); letter-spacing: .08em; color: var(--muted); border-top: 0; padding-top: 4px; }
.tw-fhead span:nth-child(n+4), .tw-frow > span:nth-child(n+4) { text-align: right; }
.tw-frow:hover { background: var(--panel2); }
.tw-ft { color: var(--ink2); }
.tw-fs { font-weight: 700; color: var(--side); font-size: 12px; }
.tw-mk { display: inline-block; width: 9px; height: 9px; background: var(--side, var(--ink2)); vertical-align: middle; }
.tw-mk[data-kind="maker"] { border-radius: 50%; }
.tw-mk[data-kind="taker"] { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 10px; }
.tw-fm { display: grid; place-items: center; }
.tw-fgrp {
  display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 4px 6px; margin-top: 4px; border: 0; background: none;
  font: 600 12px/1.2 var(--mono); color: var(--ink); text-align: left; cursor: pointer; border-top: 1px solid var(--line);
}
.tw-fgrp-s { cursor: pointer; padding: 7px 4px 4px; font-size: 11px; color: var(--accent); }

/* window grid: rows = hours (12 cells each) or, with data-orient=cols, columns = hours */
.tw-grid { display: grid; grid-template-columns: var(--glw, 2.4ch) repeat(var(--gk, 12), minmax(0, 1fr)); gap: 3px; align-items: center; }
.tw-grid.tw-grid-cols { grid-template-columns: 3ch repeat(var(--gcols, 24), minmax(0, 1fr)); gap: 2px; }
.tw-gh { font: 10px/1 var(--mono); color: var(--muted); text-align: right; padding-right: 3px; }
.tw-grid-cols .tw-gh { text-align: center; padding: 0 0 2px; }
.tw-grid-cols .tw-gm { text-align: right; padding: 0 3px 0 0; }
.tw-grid[data-win="900"] .tw-cell { aspect-ratio: 4.5; }
.tw-cell { display: block; aspect-ratio: 1.5; min-height: 0; border-radius: 2px; border: 0; padding: 0; background: var(--panel2); cursor: pointer; position: relative; }
.tw-grid-cols .tw-cell { aspect-ratio: auto; height: 100%; min-height: 9px; }
.tw-cell[data-st="none"] { background: transparent; box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.tw-cell[data-st="future"] { background: transparent; cursor: default; }
.tw-cell[data-st="loss"] { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.28) 0 2px, transparent 2px 5px); }
.tw-cell[data-st="pend"] { box-shadow: inset 0 0 0 1.5px var(--ink2); }
.tw-cell[data-cur] { box-shadow: 0 0 0 1.5px var(--accent); z-index: 1; }
.tw-cell:hover { outline: 1.5px solid var(--ink); outline-offset: 1px; z-index: 2; }
.tw-gridlegend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 11px; color: var(--ink2); }
.tw-ramp { display: inline-flex; gap: 2px; }
.tw-ramp i { width: 14px; height: 9px; border-radius: 1px; }

/* replay outcome + picker */
.tw-out-big { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tw-out-side { font: 800 22px/1.1 var(--mono); letter-spacing: .02em; color: var(--side, var(--ink2)); }
.tw-out-pnl { font: 700 22px/1.1 var(--mono); }
.tw-link { color: var(--accent); }
.tw-pick { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.tw-pk { display: grid; gap: 3px; font: 600 10px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tw-pk select {
  font: 13px/1 var(--mono); color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 7px 8px; min-height: 34px;
}
.tw-pk-go { min-height: 34px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--accent); background: transparent; color: var(--accent); font: 700 12px/1 var(--mono); letter-spacing: .08em; cursor: pointer; }

/* race track (rounds) */
.tw-rnd { border: 0; padding: 0; cursor: pointer; }

/* fill details sheet */
.tw-sheet-bg { position: fixed; inset: 0; background: var(--scrim); z-index: 60; }
.tw-sheet {
  position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow: auto;
  background: var(--panel); color: var(--ink); border-top: 1px solid var(--line); border-radius: 10px 10px 0 0;
  padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px)); font-family: var(--font);
}
[data-device="l"] .tw-sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(480px, 92vw); border: 1px solid var(--line); border-radius: 6px; }
.tw-grab { display: grid; place-items: center; height: 22px; margin: -4px 0 2px; touch-action: none; }
.tw-grab::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--line2, var(--line)); }
[data-device="l"] .tw-grab { display: none; }
.tw-sheet-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tw-sheet-h h3 { margin: 0; font: 700 14px/1.2 var(--mono); letter-spacing: .04em; }
.tw-x { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--panel2); border-radius: var(--radius); font-size: 20px; cursor: pointer; }
.tw-tx { word-break: break-all; color: var(--ink2); font-family: var(--mono); font-size: 12px; }

/* toast, help, scrim */
.tw-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--panel2); color: var(--ink); border: 1px solid var(--line); padding: 10px 14px; border-radius: var(--radius); z-index: 70; font-size: 13px; }
.tw-help { position: fixed; inset: 0; z-index: 80; background: var(--scrim); display: grid; place-items: center; }
.tw-help-card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 16px 20px; width: min(420px, 92vw); }
.tw-help-card h3 { margin: 0 0 8px; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
kbd { font: 600 11px/1 var(--mono); padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: var(--panel2); color: var(--ink); }
.tw-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .18s; }
[data-drawer] .tw-scrim, html[data-drawer] .tw-scrim { opacity: 1; pointer-events: auto; }

@keyframes tw-flash { from { background: var(--flash, rgba(var(--accent-rgb), .22)); } to { background: transparent; } }
.tw-chg { animation: tw-flash .9s ease-out; }
.tw-new { animation: tw-flash 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* trader chooser (WHISKAS | 0x9417): segmented toggle in every header; plain links, no script needed */
.tw-who { display: inline-flex; flex: 0 1 auto; min-width: 0; max-width: 100%; border: 1px solid var(--line2, var(--line)); border-radius: var(--radius, 4px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: var(--panel); }
.tw-who::-webkit-scrollbar { display: none; }
.tw-who-b { display: inline-flex; flex: none; align-items: center; justify-content: center; height: 30px; padding: 0 12px; font: 700 11px/1 var(--mono); letter-spacing: .08em; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tw-who-b + .tw-who-b { border-left: 1px solid var(--line2, var(--line)); }
.tw-who-b:hover { color: var(--ink); }
.tw-who-b.on { background: var(--accent-bg); color: #111; }
html[data-device="m"] .tw-who-b { height: 32px; padding: 0 9px; font-size: 10.5px; letter-spacing: .04em; }
/* Coin (BTC | ETH) x timeframe (5m | 15m) switch, next to the trader chips */
.tw-mkt { display: inline-flex; flex: none; gap: 8px; }
.tw-mkt-g { display: inline-flex; border: 1px solid var(--line2, var(--line)); border-radius: var(--radius, 4px); overflow: hidden; background: var(--panel); }
.tw-mkt-b { display: inline-flex; flex: none; align-items: center; justify-content: center; height: 30px; padding: 0 11px; font: 700 11px/1 var(--mono); letter-spacing: .08em; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tw-mkt-b + .tw-mkt-b { border-left: 1px solid var(--line2, var(--line)); }
.tw-mkt-b:hover { color: var(--ink); }
.tw-mkt-b.on { background: var(--accent-bg); color: #111; }
html[data-device="m"] .tw-mkt { order: 10; flex: 1 1 100%; flex-wrap: wrap; }
html[data-device="m"] .tw-mkt-g { flex: 1 1 0; }
html[data-device="m"] .tw-mkt-b { flex: 1 1 0; height: 34px; }
/* five timeframes: BTC | ETH take a third of the row, 5m 15m 1h 4h 1d the rest (they wrap onto a row of their own on a very narrow phone) */
html[data-device="m"] .tw-mkt-g:first-child { flex: 0 0 34%; }
html[data-device="m"] .tw-mkt-t { flex: 1 1 11.5em; }
html[data-device="m"] .tw-mkt-t .tw-mkt-b { padding: 0 2px; }
.tw-mkt-t .tw-mkt-b { padding: 0 9px; }
/* a laptop header already holds the trader chips, the window title and the quote strip: five timeframes get tighter buttons so
   the quote strip keeps its place at 1440 px */
html[data-device="l"] .tw-mkt { gap: 6px; }
html[data-device="l"] .tw-mkt-b { padding: 0 7px; letter-spacing: .03em; }
html[data-device="l"] .tw-mkt-t .tw-mkt-b { padding: 0 6px; }
.tw-beta { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--warn, var(--accent)); border-radius: var(--radius, 4px); color: var(--ink2); font-size: 12px; line-height: 1.45; }
.tw-beta b { color: var(--warn, var(--accent)); letter-spacing: .08em; }
html[data-device="l"] .tw-beta { margin: 0; padding: 5px 12px; border-width: 0 0 1px; border-radius: 0; font-size: 11.5px; }
/* trader profile strip (win rate, entry, timing, lean, maker) and today's window squares */
html[data-device="m"] .tw-extra { padding: 8px 8px 0; display: grid; gap: 8px; }
html[data-device="m"] .tw-extra:empty { padding: 0; }
.tw-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius, 4px); overflow: hidden; }
.tw-sum-h { grid-column: 1 / -1; padding: 6px 10px; background: var(--panel); font: 600 11px/1.2 var(--mono); letter-spacing: .02em; color: var(--muted); }
.tw-sum-c { padding: 7px 10px 8px; background: var(--panel); min-width: 0; }
.tw-sum-c i { display: block; font: 600 9.5px/1 var(--font); font-style: normal; letter-spacing: .08em; color: var(--muted); }
.tw-sum-c b { display: block; margin-top: 4px; font: 600 15px/1.1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tw-sum-c b[data-side="up"] { color: var(--up); }
.tw-sum-c b[data-side="dn"] { color: var(--dn); }
html[data-device="l"] .tw-sum { grid-template-columns: auto repeat(5, minmax(0, 1fr)); border-width: 0 0 1px; border-radius: 0; }
html[data-device="l"] .tw-sum-h { grid-column: auto; display: flex; align-items: center; padding: 0 12px; }
html[data-device="l"] .tw-sum-c { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px; }
html[data-device="l"] .tw-sum-c b { margin-top: 0; font-size: 13.5px; }
html[data-device="l"] .tw-heat { display: none; }
.tw-heat { padding: 8px 10px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius, 4px); }
.tw-heat .tw-sum-h { padding: 0 0 7px; background: none; }
.tw-heat-g { display: flex; flex-wrap: wrap; gap: 3px; }
.tw-hs { width: 21px; height: 21px; padding: 0; border: 0; border-radius: 3px; background: var(--panel2); cursor: pointer; }
.tw-hs[data-st="loss"] { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.28) 0 2px, transparent 2px 5px); }
.tw-hs[data-st="pend"] { box-shadow: inset 0 0 0 1.5px var(--ink2); }
.tw-hs[data-cur] { box-shadow: 0 0 0 1.5px var(--accent); }
@media (max-width: 380px) { html[data-device="m"] .tw-who-b { padding: 0 7px; font-size: 10px; letter-spacing: .02em; } }

/* ---- phone: slide-up fill sheet, bigger tap targets */
html[data-device="m"] .tw-sheet { transform: translateY(100%); transition: transform .22s ease-out; box-shadow: 0 -12px 32px rgba(0, 0, 0, .5); }
html[data-device="m"] .tw-sheet.open { transform: none; }
html[data-device="m"] .tw-sheet.drag { transition: none; }
html[data-device="m"] .tw-sheet .tw-kv { padding: 10px 0; }
@media (prefers-reduced-motion: reduce) { html[data-device="m"] .tw-sheet { transition: none; } }
html[data-device="m"] .tw-who-b { height: 42px; }
html[data-device="m"] .tw-mkt-b { height: 42px; }
html[data-device="m"] .tw-sw, html[data-device="m"] .tp-swm .tw-sw { min-width: 42px; height: 42px; }
html[data-device="m"] button.tw-sw { background: transparent; cursor: pointer; }
html[data-device="m"] .tp-conn { min-height: 42px; }
html[data-device="m"] .tp-chip { height: 42px; }
html[data-device="m"] .tp-nb { width: 48px; height: 48px; }
html[data-device="m"] .tw-pk select { min-height: 46px; }
html[data-device="m"] .tw-pk-go { min-height: 46px; }
html[data-device="m"] .tw-x { width: 46px; height: 46px; }
html[data-device="m"] .tw-frow { padding: 12px 4px; }
html[data-device="m"] .tw-fgrp { padding-top: 13px; padding-bottom: 10px; }
html[data-device="m"] .tp-link { padding: 13px 0; }
html[data-device="m"] .tw-hs { width: 24px; height: 24px; }
button.tw-sw { background: transparent; cursor: pointer; color: var(--ink2); }

/* ... menu */
.tw-menu { position: fixed; z-index: 75; top: calc(env(safe-area-inset-top, 0px) + 56px); right: 8px; width: min(300px, calc(100vw - 16px)); padding: 12px; background: var(--panel); border: 1px solid var(--line2, var(--line)); border-radius: 6px; box-shadow: 0 12px 32px var(--scrim); }
.tw-menu-k { font: 600 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tw-menu-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line2, var(--line)); border-radius: var(--radius, 4px); overflow: hidden; }
.tw-menu-seg button { height: 44px; border: 0; background: none; color: var(--muted); font: 700 12px/1 var(--mono); letter-spacing: .06em; cursor: pointer; }
.tw-menu-seg button + button { border-left: 1px solid var(--line2, var(--line)); }
.tw-menu-seg button[aria-pressed="true"] { background: var(--accent-bg); color: var(--on-accent); }
.tw-menu-seg2 { grid-template-columns: repeat(2, 1fr); }
.tw-menu-k2 { margin-top: 12px; }
.tw-menu-n { margin: 8px 0 4px; color: var(--ink2); font-size: 12px; line-height: 1.45; }
.tw-menu-a { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13.5px; }
.tw-menu-a:hover { color: var(--accent); }