/* =========================================================
   MetaScalp — live terminal demos
   Replaces the heavy screen-recording mp4s in the feature
   sections with real, animated components.

   SOURCE OF TRUTH
     · uploads/HANDOFF-order-book-view.md   (design handoff)
     · orderbook-view-v10.html              (current prototype)
   Tokens are the v10 `.ob.metascalp` set. Structure follows the
   handoff: single-column click-to-trade ladder, tape as a
   time x price bubble scatter, cluster as volume-by-price with
   a TF footer.

   HARD RULES carried over from the handoff:
     · up-colour is CYAN #27d3f0, never green
     · gold #e8b84b is reserved for market structure only
       (liquidity walls + cluster POC) — never own-orders/position
     · Montserrat for UI, JetBrains Mono tabular for all numbers
     · lighter = less visual weight, never less data
   ========================================================= */

.tdemo {
  /* ---- v10 .ob.metascalp tokens ---- */
  --canvas:  #040a16;
  --panel:   #081326;
  --raised:  #0e2240;
  --row:     #123257;
  --line:    #143055;
  --line2:   #1d4d80;
  --tx:      #bcd3ee;
  --tx-br:   #ffffff;
  --tx-dim:  #88a6c8;
  --tx-faint:#5d7da3;
  --accent:  #3aa0f0;
  --accentln:#1ac0ea;
  --bid:     #27d3f0;                 /* up = cyan, never green */
  --ask:     #ff5566;
  --bidf:    rgba(39,211,240,.18);
  --bide:    rgba(39,211,240,.95);
  --askf:    rgba(255,85,102,.22);
  --aske:    rgba(255,99,114,1);
  --gold:    #e8b84b;                 /* walls + POC ONLY */
  --orange:  #f0a23c;
  --purple:  #8db4ff;                 /* position */
  --mark:    #9ecdee;
  --glow:    rgba(26,192,234,.5);
  --mono:    'JetBrains Mono', ui-monospace, monospace;
  --ROWH:    18px;                    /* Compact density, for tiling */

  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line2);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.6),
    0 0 80px -34px var(--glow);
  transition: transform .35s var(--ease, cubic-bezier(.2,.7,.2,1)),
              box-shadow .35s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.tdemo:hover {
  transform: translateY(-3px);
  box-shadow: 0 36px 70px -20px rgba(0,0,0,.7), 0 0 110px -34px var(--glow);
}
.tdemo :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- header (exchange · ticker · change) ---- */
.tdemo__hd {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px;
  background: var(--raised);
  border-bottom: 1px solid var(--line2);
  font-size: 11px; color: var(--tx);
}
.tdemo__hd .ex { display: inline-flex; align-items: center; gap: 6px; color: var(--tx-dim); }
.tdemo__hd .ex::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accentln); box-shadow: 0 0 7px var(--accentln);
}
.tdemo__hd .tkr { color: var(--tx-br); font-weight: 600; }
.tdemo__hd .live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accentln);
}
.tdemo__hd .live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accentln); box-shadow: 0 0 8px var(--accentln);
  animation: td-pulse 2s ease-in-out infinite;
}
@keyframes td-pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

.tdemo__body { padding: 10px; background: var(--canvas); }
.tdemo__ft {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  background: var(--raised);
  font-size: 10px; color: var(--tx-dim);
}
.tdemo__ft b { color: var(--accentln); font-weight: 600; }
@media (max-width: 460px) { .tdemo__ft { display: none; } }

/* =========================================================
   1 · TILED LADDERS
   Handoff §2: "Traders tile several of these at once."
   Single-column click-to-trade ladder, per the hard constraint.
   ========================================================= */
.tdemo__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 560px) { .tdemo__tiles { grid-template-columns: repeat(2, 1fr); } }

.tdemo .bk {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.tdemo .bk.is-hot {
  box-shadow: 0 0 0 1px var(--accent), 0 12px 26px -14px var(--glow);
  transform: translateY(-2px);
}
.tdemo .bk__hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  padding: 4px 6px;
  background: var(--raised);
  border-bottom: 1px solid var(--line);
}
.tdemo .mkt { font-size: 10px; font-weight: 600; color: var(--tx-br); }
.tdemo .exn { font-size: 8.5px; color: var(--tx-dim); text-transform: uppercase; letter-spacing: .08em; }

/* single price column: asks stack above, bids below */
.tdemo .ob__list { display: flex; flex-direction: column; padding: 2px 0; }
.tdemo .row {
  position: relative;
  display: grid; grid-template-columns: 1fr 52px;
  align-items: center;
  height: 12px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  isolation: isolate;
}
/* trade grammar: faint zone tint — short above the spread, long below */
.tdemo .row.ask::after,
.tdemo .row.bid::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.tdemo .row.ask::after { background: rgba(255,85,102,.045); }
.tdemo .row.bid::after { background: rgba(39,211,240,.045); }

.tdemo .row .sz {
  text-align: left; padding-left: 6px; font-size: 10px;
  white-space: nowrap; overflow: hidden;
}
.tdemo .row .px {
  text-align: right; padding-right: 5px; font-size: 10px; color: var(--tx-dim);
  transition: background .4s cubic-bezier(.2,.7,.2,1);
}
.tdemo .row.ask .sz { color: var(--ask); }
.tdemo .row.bid .sz { color: var(--bid); }
.tdemo .row.ask .px { background: var(--askf); }
.tdemo .row.bid .px { background: var(--bidf); }
.tdemo .row.gap .px { background: transparent; }
.tdemo .row.best-ask .px { background: var(--ask); color: #1a0509; font-weight: 700; }
.tdemo .row.best-bid .px { background: var(--bid); color: #04141a; font-weight: 700; }
/* liquidity wall — the ONLY place gold is allowed on the ladder */
.tdemo .row.wall .sz { background: var(--gold); color: #17120a; font-weight: 700; }
/* your own resting order — purple, never gold */
.tdemo .row.pos .sz { color: var(--purple); font-weight: 700; }
.tdemo .row.pos .px { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--tx-br); }

/* spread demoted to a thin rule, last price docked in (decision 2) */
.tdemo .spr {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 14px;
  border-block: 1px solid var(--accentln);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 9.5px; font-weight: 700; color: var(--tx-br);
}
.tdemo .spr span { color: var(--tx-dim); font-weight: 500; }

/* =========================================================
   2 · TAPE — time x price bubble scatter (SVG)
   Handoff: buy = filled circle, sell = hollow ring, sized by
   volume, newest at right. Left half carries the
   volume-by-price profile. NOT a vertical list.
   ========================================================= */
.tdemo .lane {
  position: relative; overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 4px;
}
.tdemo .lane svg { display: block; width: 100%; height: 100%; }
.tdemo .lane__ax {
  position: absolute; top: 0; right: 0; bottom: 0; width: 58px;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--raised) 70%, transparent);
  pointer-events: none;
}
.tdemo .lane__ax i {
  position: absolute; right: 5px;
  transform: translateY(-50%);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 9.5px; font-style: normal; color: var(--tx-faint);
}
.tdemo .lane__ax i.last { color: var(--tx-br); font-weight: 700; }
.tdemo .lane__lg {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 11px;
  border-top: 1px solid var(--line);
  background: var(--raised);
  font-size: 10px; color: var(--tx-dim);
}
.tdemo .lane__lg s { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tdemo .lane__lg s::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
}
.tdemo .lane__lg s.b::before { background: var(--bid); }
.tdemo .lane__lg s.s::before { border: 1.6px solid var(--ask); }
.tdemo .lane__lg em { margin-left: auto; font-style: normal; color: var(--tx-faint); }

/* =========================================================
   3 · CLUSTER — volume-by-price + TF footer (interactive)
   Handoff: cluster is a quieter context lane.
   ========================================================= */
.tdemo .clusters {
  position: relative; display: flex;
  background: var(--canvas);
  border: 1px solid var(--line2);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  filter: saturate(.78) brightness(.95);   /* quieter than the ladder */
}
.tdemo .cl-col {
  flex: 1; min-width: 0; position: relative;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.tdemo .cl-col:first-child { border-left: 1px solid var(--line); }
.tdemo .cl-stack { position: relative; height: 195px; }
.tdemo .cl-cell {
  position: absolute; left: 0; right: 0;
  height: 13px; line-height: 13px; padding: 0 4px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 10.5px; font-weight: 700; color: var(--tx-br);
  white-space: nowrap; overflow: hidden;
  border-top: 1px solid rgba(0,0,0,.28);
  transition: filter .15s ease;
}
.tdemo .cl-cell.buy    { background: color-mix(in srgb, var(--bid) 40%, var(--canvas)); }
.tdemo .cl-cell.sell   { background: color-mix(in srgb, var(--ask) 40%, var(--canvas)); }
.tdemo .cl-cell.buy.s  { background: var(--bid); color: #04141a; }
.tdemo .cl-cell.sell.s { background: color-mix(in srgb, var(--ask) 78%, #000); }
/* POC — the one other place gold is permitted */
.tdemo .cl-cell.poc { box-shadow: inset 0 0 0 1.5px var(--gold); }
.tdemo .cl-cell:hover { filter: brightness(1.35); }

.tdemo .cl-vol, .tdemo .cl-delta, .tdemo .cl-time {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 11px; padding: 2px 5px; line-height: 1.15;
  text-align: center; overflow: hidden;
}
.tdemo .cl-vol   { background: var(--raised); color: var(--tx); font-weight: 700; }
.tdemo .cl-delta { font-weight: 700; }
.tdemo .cl-delta.pos { background: var(--bid); color: #04141a; }
.tdemo .cl-delta.neg { background: var(--ask); color: #1a0509; }
.tdemo .cl-time  { background: var(--panel); color: var(--tx-dim); font-size: 10px; }

/* timeframe menu — left-click the cluster zone */
.tdemo .tf-menu {
  position: absolute; z-index: 60; min-width: 124px;
  background: var(--raised);
  border: 1px solid var(--line2);
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  padding: 4px 0; display: none;
}
.tdemo .tf-menu.open { display: block; }
.tdemo .tf-item {
  position: relative; padding: 5px 14px 5px 28px;
  font-size: 12px; color: var(--tx); white-space: nowrap; cursor: pointer;
}
.tdemo .tf-item:hover { background: var(--accent); color: #fff; }
.tdemo .tf-item.sel::before { content: '\2713'; position: absolute; left: 10px; font-weight: 700; }
.tdemo .tf-sep { height: 1px; background: var(--line2); margin: 4px 0; }

.tdemo .cl-read {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 7px 11px; min-height: 30px;
  border-top: 1px solid var(--line);
  background: var(--raised);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 10px; color: var(--tx-dim);
}
.tdemo .cl-read b { color: var(--tx-br); font-weight: 700; }
.tdemo .cl-read .buy  { color: var(--bid); font-weight: 700; }
.tdemo .cl-read .sell { color: var(--ask); font-weight: 700; }
.tdemo .cl-read .hint { color: var(--tx-faint); }
.tdemo .cl-read .tf {
  margin-left: auto; padding: 2px 8px; border-radius: 3px;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accentln); font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .tdemo, .tdemo .bk, .tdemo .row .px { transition: none; }
  .tdemo__hd .live::before { animation: none; }
}