/*
 * Order book, recent trades and depth chart of the pro terminal: dense rows of tabular numbers, depth bars drawn with
 * transform only (no layout), flashes that restart without reflow, everything still under prefers-reduced-motion.
 */

/* ---------- shared: column heads, small controls ---------- */
.ob, .tt { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; outline: none; }
.ob-cols, .tt-cols {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; flex: 0 0 auto; padding: 5px 10px 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.03em; color: var(--dim); white-space: nowrap;
}
.ob-cols span:not(:first-child), .tt-cols span:not(:first-child) { text-align: right; }
.panel-tools .seg { padding: 1px; border-radius: 7px; }
.panel-tools .chip { min-height: 22px; padding: 0 7px; font-size: 11px; border-radius: 6px; }
.panel-tools .icon-chip { width: 24px; padding: 0; display: inline-grid; place-items: center; }
.ob-view svg path:nth-child(1) { color: var(--down); }
.ob-view[data-view="both"] svg path:nth-child(2), .ob-view[data-view="bids"] svg path:nth-child(1) { color: var(--up); }
.ob-view svg { opacity: 0.7; }
.ob-view[aria-pressed="true"] svg { opacity: 1; }
.mini-select {
  width: auto; min-height: 24px; height: 24px; padding: 0 22px 0 6px; font-size: 11px;
  background-color: var(--bg-2); border-radius: 6px; cursor: pointer;
}
.mini-chip[aria-pressed="true"] { color: var(--acc); }
.ob-stale {
  padding: 1px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--warn); background: var(--warn-soft); border-radius: var(--r-pill);
}
.ob .pane-msg, .tt .pane-msg {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: max-content; max-width: calc(100% - 24px); margin: 0;
  padding: 6px 12px; transform: translate(-50%, -50%); font-size: 11.5px; color: var(--mute); text-align: center;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.8);
}
/* skeleton: before the first book (or when the server does not publish it) the empty rows show the panel to come */
.ob-row.empty::after {
  content: ""; position: absolute; left: 10px; right: 10px; top: 6px; height: 7px; border-radius: 4px; opacity: 0.6;
  background: linear-gradient(90deg, var(--surface-3) 0 24%, transparent 24% 44%, var(--surface-3) 44% 64%, transparent 64% 80%, var(--surface-3) 80% 100%);
}
.ob[data-state="ok"] .ob-row.empty::after, .ob[data-state="stale"] .ob-row.empty::after { display: none; }
.tt:not([data-state="ok"]) .tt-body::before {
  content: ""; position: absolute; inset: 0 10px; opacity: 0.6; pointer-events: none;
  background: linear-gradient(90deg, var(--surface-3) 0 26%, transparent 26% 46%, var(--surface-3) 46% 66%, transparent 66% 80%, var(--surface-3) 80% 100%);
  -webkit-mask-image: repeating-linear-gradient(180deg, transparent 0 6px, #000 6px 13px, transparent 13px 19px);
  mask-image: repeating-linear-gradient(180deg, transparent 0 6px, #000 6px 13px, transparent 13px 19px);
}

/* ---------- order book ---------- */
.ob-body { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ob-side { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden; }
.ob-asks { justify-content: flex-end; }
.ob[data-view="bids"] .ob-asks, .ob[data-view="asks"] .ob-bids { display: none; }
.ob-row {
  position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; align-items: center;
  flex: 0 0 19px; height: 19px; padding: 0 10px; font-size: 11.5px; line-height: 19px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.ob-row.empty { cursor: default; }
.ob-row > span:not(.ob-bar) { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; }
.ob-sz, .ob-tot { text-align: right; color: var(--text); }
.ob-tot { color: var(--mute); }
.ob-row[data-side="asks"] .ob-px { color: var(--down); }
.ob-row[data-side="bids"] .ob-px { color: var(--up); }
.ob-bar { position: absolute; top: 1px; bottom: 1px; right: 0; width: 100%; transform: scaleX(0); transform-origin: right center; pointer-events: none; transition: transform 160ms linear; }
.ob-row[data-side="asks"] .ob-cum { background: color-mix(in srgb, var(--down) 14%, transparent); }
.ob-row[data-side="bids"] .ob-cum { background: color-mix(in srgb, var(--up) 14%, transparent); }
.ob-row[data-side="asks"] .ob-lvl { background: color-mix(in srgb, var(--down) 26%, transparent); }
.ob-row[data-side="bids"] .ob-lvl { background: color-mix(in srgb, var(--up) 26%, transparent); }
.ob-row.in-range { background: var(--surface-3); }
.ob-row.kbd { box-shadow: inset 0 0 0 1px var(--focus); }
.ob-row.flash-a { animation: ob-flash-a 150ms ease-out; }
.ob-row.flash-b { animation: ob-flash-b 150ms ease-out; }
@keyframes ob-flash-a { from { background-color: color-mix(in srgb, var(--text) 14%, transparent); } to { background-color: transparent; } }
@keyframes ob-flash-b { from { background-color: color-mix(in srgb, var(--text) 14%, transparent); } to { background-color: transparent; } }
.ob-mid {
  display: flex; align-items: center; gap: 8px; flex: 0 0 30px; padding: 0 10px; margin: 1px 0;
  background: var(--bg-2); border-block: 1px solid var(--line);
}
.ob-last { font-size: 15.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.ob-last[data-tone="up"] { color: var(--up); }
.ob-last[data-tone="down"] { color: var(--down); }
.ob-arrow { width: 0; height: 0; border: 5px solid transparent; }
.ob-arrow[data-dir="up"] { border-bottom-color: var(--up); margin-top: -5px; }
.ob-arrow[data-dir="down"] { border-top-color: var(--down); margin-top: 5px; }
.ob-spread { margin-left: auto; font-size: 11px; color: var(--dim); white-space: nowrap; }
.ob-ratio { display: flex; align-items: center; gap: 8px; flex: 0 0 24px; padding: 0 10px; font-size: 11px; font-weight: 600; border-top: 1px solid var(--line); }
.ob-ratio #obRatioB { color: var(--up); }
.ob-ratio #obRatioS { color: var(--down); }
.ob-ratio-bar { position: relative; flex: 1 1 auto; height: 4px; overflow: hidden; border-radius: var(--r-pill); background: var(--down); }
.ob-ratio-fill { position: absolute; inset: 0; background: var(--up); transform-origin: left center; transform: scaleX(0.5); transition: transform 300ms var(--ease); }
.ob-tip {
  position: fixed; left: 0; top: 0; z-index: 170; display: grid; grid-template-columns: auto auto; gap: 3px 14px;
  padding: 8px 10px; font-size: 11.5px; color: var(--text); pointer-events: none;
  background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
}
.ob-tip .mono { text-align: right; }
.ob-tip-k { color: var(--mute); }
@media (hover: hover) {
  .ob-row:not(.empty):hover { background: var(--surface-3); }
}

/* ---------- recent trades ---------- */
.tt-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-anchor: none; scrollbar-width: thin; }
.tt-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; align-items: center; height: 19px; padding: 0 10px;
  font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tt-sz, .tt-time { text-align: right; }
.tt-time { color: var(--dim); }
.tt-row[data-side="buy"] .tt-px { color: var(--up); }
.tt-row[data-side="sell"] .tt-px { color: var(--down); }
.tt-row.big { font-weight: 700; }
.tt-row.big[data-side="buy"] { background: color-mix(in srgb, var(--up) 11%, transparent); }
.tt-row.big[data-side="sell"] { background: color-mix(in srgb, var(--down) 11%, transparent); }
.tt-row.new-a { animation: ob-flash-a 400ms ease-out; }
.tt-row.new-b { animation: ob-flash-b 400ms ease-out; }

/* ---------- chart panel: Chart | Depth tabs, "+" to draft a limit beside the price axis ---------- */
.chart-area { position: relative; }
.view-tabs { flex: 0 0 auto; }
.view-tabs .chip[aria-selected="true"] { color: var(--text); background: var(--surface-4); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); }
.chart-panel.depth-on .toolbar .group, .chart-panel.depth-on #fullscreenBtn { opacity: 0.35; pointer-events: none; }
.chart-plus {
  position: absolute; left: 0; top: 0; z-index: 5; display: grid; place-items: center; width: 20px; height: 20px; padding: 0;
  font: 700 15px/1 var(--font-sans); color: var(--acc); cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--acc); border-radius: 50%; box-shadow: 0 4px 12px -4px rgb(0 0 0 / 0.7);
}
@media (hover: none) {
  .chart-plus { display: none !important; }
}
@media (hover: hover) {
  .chart-plus:hover { color: var(--acc-ink); background: var(--acc); }
}

/* ---------- depth chart (tab of the chart panel) ---------- */
.depth-box { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; background: var(--surface); }
.depth-box canvas { flex: 1 1 auto; width: 100%; min-height: 0; cursor: crosshair; touch-action: none; }
.depth-legend { display: flex; gap: 14px; padding: 6px 12px 0; font-size: 11px; color: var(--mute); }
.depth-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 0; }
.depth-legend .dl-bids::before { background: var(--up); }
.depth-legend .dl-asks::before { background: var(--down); }
.depth-box .pane-msg { z-index: 1; }