/* tas.css — design/42 §4 (P5): the Time & Sales (tas.js) and DOM ladder (dom.js) dock tabs. Both roots fill the
   host rdock.js hands them (a flex column; only the list scrolls). Colours are chart.css's tokens, so the light theme
   comes free; aggressive BUYS are --pos, SELLS --neg. Monospaced digits everywhere (a ladder is read by column). */
.tas,
.dom {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: var(--bg);
  container-type: inline-size;
}
.tas-bar,
.dom-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 4px;
  flex: none;
  min-width: 0;
}
.dom-bar { flex-wrap: wrap; row-gap: 2px; }
.tas-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  flex: none;
}
.tas-mode {
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 2px 7px;
  font: inherit;
  cursor: pointer;
}
.tas-mode + .tas-mode { border-left: 1px solid var(--border); }
.tas-mode[aria-pressed='true'] { background: var(--panel-2); color: var(--fg); }
.tas-mode:hover { background: var(--hover); }
.tas-flt { color: var(--muted); white-space: nowrap; flex: none; }
.tas-sel,
.dom-grp {
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  padding: 1px 2px;
  max-width: 120px;
}
.tas-st {
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tas-st.tone-ok { color: var(--pos); }
.tas-st.tone-warn { color: #e0a030; }
.tas-st.tone-muted { color: var(--muted); }
.tas-stats,
.dom-tot {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 0 6px 4px;
  color: var(--muted);
  flex: none;
  min-height: 14px;
}
.tas-stats .s-w,
.dom-tot .t-w { color: var(--muted); }
.tas-stats .s-b,
.dom-tot .t-b { color: var(--pos); }
.tas-stats .s-a,
.dom-tot .t-a { color: var(--neg); }
.tas-stats .s-z { color: var(--fg); }
.tas-stats .s-u,
.dom-tot .t-e { color: #e0a030; }
.tas-note,
.dom-note {
  flex: none;
  padding: 3px 6px 4px;
  color: var(--muted);
  font-size: 10px;
  border-top: 1px solid var(--border);
  line-height: 1.3;
}

/* ---- Time & Sales rows: a virtual list (a spacer + ~40 absolutely placed rows) ---- */
.tas-cols,
.tas-row {
  display: grid;
  grid-template-columns: 56px 20px minmax(0, 1fr) 54px 30px;
  column-gap: 4px;
  align-items: center;
  padding: 0 6px;
}
.tas-m-seconds .tas-cols,
.tas-row.tas-s {
  grid-template-columns: 56px 38px 38px 44px minmax(0, 1fr) 26px;
}
.tas-cols {
  flex: none;
  color: var(--muted);
  font-size: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.tas-cols span,
.tas-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tas-cols .c-v,
.tas-cols .c-n,
.tas-cols .c-bv,
.tas-cols .c-sv,
.tas-cols .c-d,
.tas-row .c-v,
.tas-row .c-n,
.tas-row .c-bv,
.tas-row .c-sv,
.tas-row .c-d { text-align: right; }
.tas-list,
.dom-list { scrollbar-width: thin; }
.tas-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  contain: strict;
}
.tas-spacer { width: 1px; }
.tas-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  line-height: 18px;
  cursor: default;
}
.tas-row:hover { background: var(--hover); }
.tas-row .c-t { color: var(--muted); }
.tas-p.tas-b .c-s,
.tas-p.tas-b .c-v { color: var(--pos); }
.tas-p.tas-a .c-s,
.tas-p.tas-a .c-v { color: var(--neg); }
.tas-p { cursor: pointer; }
.tas-s .c-bv { color: var(--pos); }
.tas-s .c-sv { color: var(--neg); }
.tas-s.tas-b .c-d { color: var(--pos); }
.tas-s.tas-a .c-d { color: var(--neg); }
.tas-s.tas-quiet .c-q { color: var(--muted); font-style: italic; grid-column: 2 / -1; }
.tas-s .c-r { color: var(--muted); }
/* >= 10x the rolling median of the shown rows: bold on a side-coloured wash; >= 50x: a full-width bar (every cell
   white on the side colour — !important, since the per-column side colours would otherwise vanish into the bar) */
.tas-big { font-weight: 700; }
.tas-big.tas-b { background: rgba(38, 166, 154, 0.18); }
.tas-big.tas-a { background: rgba(239, 83, 80, 0.18); }
.tas-huge { font-weight: 700; }
.tas-huge.tas-b { background: rgba(38, 166, 154, 0.78); }
.tas-huge.tas-a { background: rgba(239, 83, 80, 0.78); }
.tas-row.tas-huge span { color: #fff !important; }
.tas-u .c-un { grid-column: 2 / -1; color: var(--muted); font-style: italic; }
.tas-gap {
  display: flex;
  gap: 8px;
  color: var(--muted);
  font-style: italic;
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--hover) 5px 10px);
}
.tas-gap .c-gapt { margin-left: auto; }
.tas-lost { color: #e0a030; }
.tas-resume {
  position: absolute;
  left: 50%;
  top: 76px;
  transform: translateX(-50%);
  z-index: 2;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 2px 10px;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.tas-resume.hidden,
.dom-center.hidden { display: none; }

/* ---- DOM ladder ---- */
.dom-src { color: var(--muted); white-space: nowrap; }
.dom-asof { margin-left: auto; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dom-live .dom-asof { color: var(--pos); }
.dom-stale .dom-asof { color: #e0a030; }
.dom-stale .dom-list { opacity: 0.55; }
.dom-cols,
.dom-row {
  display: grid;
  grid-template-columns: minmax(26px, 1fr) 48px minmax(26px, 1fr) 34px 36px 40px 36px;
  column-gap: 2px;
  align-items: center;
  padding: 0 3px;
  font-size: 10.5px;
}
.dom-cols {
  flex: none;
  font-size: 10px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.dom-cols span,
.dom-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.dom-cols .d-px,
.dom-row .d-px { text-align: center; }
.dom-cols .d-ask,
.dom-row .d-ask { text-align: left; }
.dom-list {
  position: relative; /* the rows' offsetParent: centring on the touch reads offsetTop against the list */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.dom-row {
  height: 17px;
  line-height: 17px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.dom-row:hover { background: var(--hover); }
.dom-row .d-px { color: var(--muted); }
.dom-row.d-bid .d-px,
.dom-row.d-both .d-px { color: var(--fg); }
.dom-row.d-ask .d-px { color: var(--fg); }
/* depth bars: a size cell's background, width = its share of the largest row on screen (--w) */
.dom-row .d-bid,
.dom-row .d-ask { position: relative; }
.dom-row .d-bid { color: var(--pos); background: linear-gradient(to left, rgba(38, 166, 154, 0.22) var(--w, 0%), transparent var(--w, 0%)); }
.dom-row .d-ask { color: var(--neg); background: linear-gradient(to right, rgba(239, 83, 80, 0.22) var(--w, 0%), transparent var(--w, 0%)); }
.dom-row .d-usd,
.dom-row .d-cum { color: var(--muted); }
.dom-row .d-d5 { color: var(--muted); }
.dom-row .d-d5.d-up { color: var(--pos); }
.dom-row .d-d5.d-dn { color: var(--neg); }
/* the touch: a rule between the best ask row and the best bid row */
.dom-row.d-ba { border-bottom-color: var(--border); }
.dom-row.d-bb.d-ba { border-bottom-color: transparent; background: var(--hover); }
/* traded 60 s: a tape BLOCK is one bracket across the rows it covers; --tb = its buy share */
.dom-row .d-tr {
  font-size: 10px;
  padding-right: 3px;
  border-right: 2px solid transparent;
}
.dom-row .d-tr.d-tr-b { color: var(--pos); }
.dom-row .d-tr.d-tr-a { color: var(--neg); }
.dom-row .d-tr.d-tr-one,
.dom-row .d-tr.d-tr-top,
.dom-row .d-tr.d-tr-mid,
.dom-row .d-tr.d-tr-bot {
  border-right-color: var(--muted);
  background: linear-gradient(to right, rgba(38, 166, 154, 0.18) var(--tb, 50%), rgba(239, 83, 80, 0.18) var(--tb, 50%));
}
.dom-center {
  position: absolute;
  right: 8px;
  bottom: 40px;
  z-index: 2;
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 8px;
  font: inherit;
  cursor: pointer;
}
/* narrow dock: drop the ≈USD and cumulative columns before anything is truncated */
@container (max-width: 279px) {
  .dom-cols,
  .dom-row { grid-template-columns: minmax(26px, 1fr) 50px minmax(26px, 1fr) 42px 34px; }
  .dom-cols .d-usd,
  .dom-cols .d-cum,
  .dom-row .d-usd,
  .dom-row .d-cum { display: none; }
}