/*
 * Hercules Terminal — the dealing surface.
 *
 * `@hercules/ui`'s tokens.css positions the two client-facing front ends as "the terminal,
 * softened". This is the third surface and it is the unsoftened one: a dealing screen is read at
 * a glance, all day, by someone who already knows what every field means. So the type scale drops
 * to 11px, the spacing scale halves, radii go to zero on anything holding a number, and the
 * accent moves from the product blue to amber — the colour a dealer's eye has been trained on
 * since a CRT was the only option, and one that cannot be confused with the green and red that
 * carry the only meaning on this screen that must never be misread.
 *
 * ONE ACCENT, and it is never used for a value. Amber marks structure — the active symbol, a
 * focused control, a section rule. Green and red mean up and down and nothing else. The instant an
 * accent starts appearing inside the numbers, the eye stops being able to scan a column.
 *
 * EVERY NUMERAL IS TABULAR. `font-variant-numeric: tabular-nums` on every cell that holds a price
 * or a size, so digits sit in the same column from row to row. Proportional numerals in a price
 * ladder make the decimal point wander, and a wandering decimal point is the single fastest way
 * to misread a book.
 */

:root {
  /* Surfaces — deeper than the portal's, because this screen is looked at for eight hours. */
  --t-bg: #06080B;
  --t-panel: #0B0F14;
  --t-panel-2: #10151C;
  --t-raised: #161C25;
  --t-line: #1B222C;
  --t-line-2: #262F3C;

  --t-text: #D8E0EA;
  --t-dim: #8494A8;
  --t-faint: #55647A;

  /* The single accent. Structure only. */
  --t-accent: #FFB020;
  --t-accent-dim: #6B4A0E;
  --t-accent-wash: rgba(255, 176, 32, .10);

  /* Direction. These two carry all the meaning. */
  --t-up: #26C281;
  --t-up-wash: rgba(38, 194, 129, .16);
  --t-down: #FF4D5E;
  --t-down-wash: rgba(255, 77, 94, .16);
  --t-warn: #F5A524;
  --t-info: #4FB6E8;

  --t-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --t-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-1: 2px; --t-2: 4px; --t-3: 6px; --t-4: 8px; --t-5: 12px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--t-bg);
  color: var(--t-text);
  font: 400 11px/1.35 var(--t-mono);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ── Frame ────────────────────────────────────────────────────────────────── */

#app {
  display: grid;
  height: 100vh;
  gap: 1px;
  background: var(--t-line);
  grid-template-columns: 268px minmax(320px, 1fr) 308px 264px 252px;
  grid-template-rows: 34px minmax(240px, 1fr) 236px 22px;
  /*
   * The book and the tape share ONE full-height column. A depth ladder is fifteen or twenty rows
   * whatever the window height is, so giving it a row of its own in a tall grid leaves six
   * hundred pixels of empty panel above the touch — the ladder floats in the middle of nothing
   * and the screen stops reading as dense. Stacked with the tape, the ladder takes its natural
   * height against the spread bar and the tape absorbs everything left over, which is also the
   * right allocation: the tape is the panel that benefits from every extra row.
   */
  grid-template-areas:
    "head  head    head   head   head"
    "watch chart   chart  book   rail"
    "watch blotter equity book   rail"
    "stat  stat    stat   stat   stat";
}

.panel {
  background: var(--t-panel);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.panel > header {
  display: flex;
  align-items: center;
  gap: var(--t-4);
  height: 20px;
  flex: 0 0 20px;
  padding: 0 var(--t-3);
  background: var(--t-panel-2);
  border-bottom: 1px solid var(--t-line);
  font: 500 9px/1 var(--t-ui);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--t-faint);
  user-select: none;
}
.panel > header .t { color: var(--t-dim); }
.panel > header .sp { margin-left: auto; }
.panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.panel-body::-webkit-scrollbar { width: 7px; height: 7px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--t-line-2); }
.panel-body::-webkit-scrollbar-track { background: transparent; }

/* ── Header ───────────────────────────────────────────────────────────────── */

#head {
  grid-area: head;
  background: var(--t-panel-2);
  display: flex;
  align-items: center;
  gap: var(--t-5);
  padding: 0 var(--t-4) 0 0;
  border-bottom: 1px solid var(--t-line-2);
}

#brand {
  display: flex; align-items: baseline; gap: var(--t-3);
  padding: 0 var(--t-5); height: 100%;
  background: linear-gradient(180deg, rgba(255,176,32,.10), transparent);
  border-right: 1px solid var(--t-line-2);
}
#brand b {
  font: 600 13px/1 var(--t-ui);
  letter-spacing: .16em;
  color: var(--t-accent);
}
#brand span { font-size: 9px; color: var(--t-faint); letter-spacing: .12em; }

.hstat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hstat .k {
  font: 500 8px/1 var(--t-ui); letter-spacing: .10em; text-transform: uppercase; color: var(--t-faint);
}
.hstat .v { font-size: 12px; line-height: 1; white-space: nowrap; }
.hstat .v.big { font-size: 14px; font-weight: 500; }

#head .sep { width: 1px; height: 20px; background: var(--t-line); }
#head .grow { margin-left: auto; }

#sym-badge {
  display: flex; align-items: center; gap: var(--t-3);
  padding: 2px var(--t-4);
  border: 1px solid var(--t-accent-dim);
  background: var(--t-accent-wash);
  color: var(--t-accent);
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
}

/* Heartbeat: a pulse, and a ring that fades. Stops moving the instant the stream stops. */
#beat {
  display: flex; align-items: center; gap: var(--t-3);
  padding-right: var(--t-4);
}
#beat .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--t-up);
  box-shadow: 0 0 0 0 var(--t-up-wash);
}
#beat.on .dot { animation: pulse 1s ease-out; }
#beat.stale .dot { background: var(--t-down); animation: none; }
#beat .lbl { font: 500 8px/1 var(--t-ui); letter-spacing: .10em; text-transform: uppercase; color: var(--t-faint); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--t-up-wash); }
  70%  { box-shadow: 0 0 0 7px rgba(38,194,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(38,194,129,0); }
}

/* ── Areas ────────────────────────────────────────────────────────────────── */

#watch  { grid-area: watch; }
#booktape { grid-area: book; display: flex; flex-direction: column; gap: 1px; background: var(--t-line); min-height: 0; }
/* The ladder takes its natural height; the tape absorbs whatever is left. */
#booktape > #book { flex: 0 0 auto; }
#booktape > #tape { flex: 1 1 auto; min-height: 0; }
#chart  { grid-area: chart; }
#rail   { grid-area: rail; }
#blotter{ grid-area: blotter; }
#equity { grid-area: equity; }
#stat   { grid-area: stat; }

/* ── Tables ───────────────────────────────────────────────────────────────── */

table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
  position: sticky; top: 0; z-index: 2;
  background: var(--t-panel-2);
  border-bottom: 1px solid var(--t-line);
  font: 500 8px/1 var(--t-ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--t-faint);
  padding: 3px var(--t-3);
  text-align: right;
  white-space: nowrap;
  user-select: none;
}
table.grid th:first-child, table.grid td:first-child { text-align: left; }
table.grid td {
  padding: 2px var(--t-3);
  border-bottom: 1px solid rgba(27,34,44,.55);
  text-align: right;
  white-space: nowrap;
  font-size: 11px;
}
table.grid tbody tr:hover { background: rgba(255,176,32,.05); }
table.grid tbody tr.sel { background: var(--t-accent-wash); box-shadow: inset 2px 0 0 var(--t-accent); }
.up { color: var(--t-up); }
.down { color: var(--t-down); }
.flat { color: var(--t-dim); }
.dim { color: var(--t-dim); }
.faint { color: var(--t-faint); }

/* Tick flash. Short, because a flash that outlives the next tick smears the whole column. */
@keyframes flashUp   { from { background: var(--t-up-wash); }   to { background: transparent; } }
@keyframes flashDown { from { background: var(--t-down-wash); } to { background: transparent; } }
.fu { animation: flashUp 380ms ease-out; }
.fd { animation: flashDown 380ms ease-out; }

/* ── Watchlist ────────────────────────────────────────────────────────────── */

#watch table.grid { table-layout: fixed; width: 100%; }
#watch col.c-sym { width: auto; }
/* Wide enough for TRX/BTC's eleven decimals; the board spans ten orders of magnitude and the
   widest price has to fit, or it collides with the change column. */
#watch col.c-last { width: 90px; }
#watch col.c-chg { width: 38px; }
#watch col.c-spk { width: 42px; }
#watch td.sym { font-weight: 500; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; }
#watch td, #watch th { padding-left: 4px; padding-right: 4px; }
#watch canvas.spark { display: block; width: 38px; height: 14px; }
#watch td.sparkcell { padding: 1px 4px 1px 0; }
#watch .cls {
  display: inline-block; width: 5px; height: 5px; margin-right: 4px;
  vertical-align: middle;
}
.cls-STABLE { background: var(--t-info); }
.cls-ECOSYSTEM { background: var(--t-accent); }
.cls-MEME { background: #B96BFF; }
.cls-WRAPPED_MAJOR { background: #6ED3C6; }

/* ── Chart ────────────────────────────────────────────────────────────────── */

#chart .toolbar { display: flex; align-items: center; gap: var(--t-2); margin-left: var(--t-4); }
.tbtn {
  background: transparent; border: 1px solid var(--t-line-2); color: var(--t-dim);
  padding: 1px 6px; font: 500 9px/1.4 var(--t-ui); letter-spacing: .06em;
  border-radius: 0;
}
.tbtn:hover { border-color: var(--t-accent-dim); color: var(--t-text); }
.tbtn[aria-pressed="true"] { background: var(--t-accent-wash); border-color: var(--t-accent-dim); color: var(--t-accent); }

#chart .panel-body { position: relative; overflow: hidden; }
#chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ohlc {
  position: absolute; top: var(--t-3); left: var(--t-4); z-index: 3;
  display: flex; gap: var(--t-5); pointer-events: none;
  font-size: 10px; color: var(--t-dim);
  text-shadow: 0 0 6px var(--t-bg), 0 0 6px var(--t-bg);
}
#ohlc b { font-weight: 500; color: var(--t-text); }
#ohlc .k { color: var(--t-faint); }

/* ── Order book ───────────────────────────────────────────────────────────── */

.bookside { display: flex; flex-direction: column; }
.bookrow {
  position: relative; display: grid;
  grid-template-columns: 1fr 74px 40px;
  align-items: center;
  height: 15px; padding: 0 var(--t-3);
  font-size: 11px;
}
.bookrow .bar { position: absolute; top: 1px; bottom: 1px; right: 0; z-index: 0; }
.bookrow.ask .bar { background: var(--t-down-wash); }
.bookrow.bid .bar { background: var(--t-up-wash); }
.bookrow > span { position: relative; z-index: 1; }
.bookrow .px { text-align: left; }
.bookrow.ask .px { color: var(--t-down); }
.bookrow.bid .px { color: var(--t-up); }
.bookrow .sz { text-align: right; color: var(--t-text); }
.bookrow .vn { text-align: right; color: var(--t-faint); font-size: 9px; letter-spacing: .04em; }
.bookrow .vn.hx { color: var(--t-accent); }

#spreadbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--t-4);
  padding: 3px var(--t-3);
  background: var(--t-panel-2);
  border-top: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line);
  font-size: 11px;
}
#spreadbar .mid { font-size: 12px; color: var(--t-text); text-align: center; }
#spreadbar .lab { font: 500 8px/1 var(--t-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--t-faint); }
#spreadbar .r { text-align: right; }

/* ── Tape ─────────────────────────────────────────────────────────────────── */

#tape .row {
  display: grid; grid-template-columns: 52px 1fr 62px 34px;
  gap: var(--t-3); padding: 1px var(--t-3);
  font-size: 10px;
}
#tape .row .tm { color: var(--t-faint); }
#tape .row.buy .px { color: var(--t-up); }
#tape .row.sell .px { color: var(--t-down); }
#tape .row .sz { text-align: right; color: var(--t-dim); }
#tape .row .vn { text-align: right; color: var(--t-faint); font-size: 9px; }
#tape .row.own { background: rgba(255,176,32,.07); box-shadow: inset 2px 0 0 var(--t-accent); }
#tape .row.own .vn { color: var(--t-accent); }

/* ── Right rail: ticket, venues, treasury ─────────────────────────────────── */

#rail .panel-body { display: flex; flex-direction: column; }
.sub { border-bottom: 1px solid var(--t-line); }
.sub > h4 {
  margin: 0; padding: 3px var(--t-3);
  background: var(--t-panel-2);
  font: 500 8px/1.3 var(--t-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--t-faint);
  display: flex; align-items: center; gap: var(--t-3);
}
.sub > h4 .sp { margin-left: auto; }
.sub .body { padding: var(--t-3); display: flex; flex-direction: column; gap: var(--t-3); }

.qtyrow { display: grid; grid-template-columns: auto 1fr auto; gap: var(--t-2); align-items: center; }
.qtyrow label { font: 500 8px/1 var(--t-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--t-faint); }
#qty {
  background: var(--t-bg); border: 1px solid var(--t-line-2); color: var(--t-text);
  padding: 3px var(--t-3); width: 100%; text-align: right; font-size: 12px;
}
#qty:focus { outline: none; border-color: var(--t-accent); }
.qstep { background: var(--t-raised); border: 1px solid var(--t-line-2); color: var(--t-dim); width: 20px; padding: 2px 0; }
.qstep:hover { color: var(--t-accent); border-color: var(--t-accent-dim); }

.tradebtns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t-3); }
.trade {
  border: 1px solid; padding: var(--t-3) 0; border-radius: 0;
  font: 600 11px/1.2 var(--t-ui); letter-spacing: .10em;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.trade small { font: 400 11px/1 var(--t-mono); letter-spacing: 0; opacity: .9; }
.trade.buy { background: rgba(38,194,129,.13); border-color: rgba(38,194,129,.45); color: var(--t-up); }
.trade.buy:hover { background: rgba(38,194,129,.24); }
.trade.sell { background: rgba(255,77,94,.13); border-color: rgba(255,77,94,.45); color: var(--t-down); }
.trade.sell:hover { background: rgba(255,77,94,.24); }
.trade kbd {
  font: 500 8px/1 var(--t-ui); letter-spacing: .08em; color: var(--t-faint);
  border: 1px solid var(--t-line-2); padding: 1px 3px; margin-top: 1px;
}

.kv { display: grid; grid-template-columns: auto 1fr; gap: 1px var(--t-3); font-size: 10px; }
.kv .k { color: var(--t-faint); white-space: nowrap; }
.kv .v { text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A contract address is 34 characters and will not fit beside its label; it gets its own line. */
.kv .v.mono-sm { grid-column: 1 / -1; font-size: 9px; word-break: break-all; text-align: left;
  white-space: normal; color: var(--t-dim); padding-bottom: 2px; }

.chip {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--t-line-2); padding: 0 4px; height: 14px;
  font: 500 8px/1 var(--t-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--t-dim);
}
.chip.on { border-color: rgba(38,194,129,.45); color: var(--t-up); background: rgba(38,194,129,.10); }
.chip.off { border-color: var(--t-line-2); color: var(--t-faint); }
.chip.warn { border-color: rgba(245,165,36,.5); color: var(--t-warn); background: rgba(245,165,36,.10); }
.chip.bad { border-color: rgba(255,77,94,.45); color: var(--t-down); background: rgba(255,77,94,.10); }

.venue { display: grid; grid-template-columns: 1fr auto; gap: 1px var(--t-3); padding: var(--t-2) 0; border-top: 1px solid rgba(27,34,44,.6); }
.venue:first-child { border-top: 0; }
.venue .nm { font-size: 10px; color: var(--t-text); }
.venue .meta { grid-column: 1 / -1; display: flex; gap: var(--t-4); font-size: 9px; color: var(--t-faint); }
.gauge { grid-column: 1 / -1; height: 3px; background: var(--t-line); position: relative; }
.gauge i { position: absolute; inset: 0 auto 0 0; background: var(--t-up); }
.gauge.amber i { background: var(--t-warn); }
.gauge.red i { background: var(--t-down); }

.addr {
  font-size: 9px; color: var(--t-dim); word-break: break-all; line-height: 1.4;
  background: var(--t-bg); border: 1px solid var(--t-line); padding: 3px var(--t-2);
}
.addr b { color: var(--t-text); font-weight: 400; }

/* ── Blotter tabs ─────────────────────────────────────────────────────────── */

.tabs { display: flex; gap: 0; margin-left: var(--t-4); }
.tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--t-faint); padding: 1px 7px;
  font: 500 9px/1.4 var(--t-ui); letter-spacing: .08em; text-transform: uppercase;
}
.tab[aria-selected="true"] { color: var(--t-accent); border-bottom-color: var(--t-accent); }
.tab:hover { color: var(--t-text); }

.act {
  background: var(--t-raised); border: 1px solid var(--t-line-2); color: var(--t-dim);
  padding: 0 5px; font: 500 8px/1.5 var(--t-ui); letter-spacing: .06em; text-transform: uppercase;
}
.act:hover { color: var(--t-down); border-color: rgba(255,77,94,.4); }

/* ── Equity ───────────────────────────────────────────────────────────────── */

#equity .panel-body { position: relative; }
#equity canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#eqlegend {
  position: absolute; top: var(--t-3); left: var(--t-4); z-index: 2;
  display: flex; gap: var(--t-5); font-size: 9px; color: var(--t-faint);
  text-shadow: 0 0 6px var(--t-bg);
}
#eqlegend i { display: inline-block; width: 8px; height: 2px; vertical-align: middle; margin-right: 3px; }

/* ── Status bar ───────────────────────────────────────────────────────────── */

#stat {
  grid-area: stat;
  display: flex; align-items: center; gap: var(--t-5);
  padding: 0 var(--t-4);
  background: var(--t-panel-2);
  border-top: 1px solid var(--t-line-2);
  font-size: 10px; color: var(--t-faint);
  overflow: hidden; white-space: nowrap;
}
#stat b { color: var(--t-dim); font-weight: 400; }
#stat .grow { margin-left: auto; }
#stat .seg { display: flex; align-items: center; gap: var(--t-3); }

/* ── Toast ────────────────────────────────────────────────────────────────── */

#toasts {
  position: fixed; right: 10px; bottom: 32px; z-index: 50;
  display: flex; flex-direction: column-reverse; gap: var(--t-2);
  pointer-events: none;
}
.toast {
  border: 1px solid var(--t-line-2); background: var(--t-raised);
  padding: var(--t-3) var(--t-4); min-width: 240px; max-width: 380px;
  font-size: 10px; color: var(--t-text);
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
  animation: toastIn 160ms ease-out;
}
.toast .hd { display: flex; gap: var(--t-4); font: 500 9px/1.4 var(--t-ui); letter-spacing: .08em; text-transform: uppercase; }
.toast.ok .hd { color: var(--t-up); }
.toast.err .hd { color: var(--t-down); }
.toast .dt { color: var(--t-dim); margin-top: 2px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #beat.on .dot, .fu, .fd, .toast { animation: none; }
}

/* Below this the five-column frame stops being dense and starts being cramped. */
@media (max-width: 1420px) {
  #app {
    grid-template-columns: 212px minmax(280px, 1fr) 246px 228px;
    grid-template-areas:
      "head  head    head  head"
      "watch chart   book  rail"
      "watch blotter book  rail"
      "stat  stat    stat  stat";
  }
  #equity { display: none; }
}