/* Amber on black, the way a trading terminal has looked since the 1980s.
 *
 * The constraints that produce the look are worth stating, because they are what
 * make it legible rather than just retro: one monospace grid so columns line up
 * without measurement, no rounded corners or shadows so nothing implies depth that
 * is not data, reversed header bars so section boundaries need no whitespace, and
 * colour reserved entirely for meaning -- amber is a label, white is a value, green
 * and red are direction, cyan is a heading. Nothing is coloured for decoration. */

:root {
  --bg: #000000;
  --panel: #050505;
  --line: #2a2a2a;
  --line-bright: #444444;
  --amber: #ff9e1b;
  --amber-dim: #a86b12;
  --value: #ffffff;
  --head: #4fc3f7;
  --up: #00c853;
  --down: #ff3b30;
  --muted: #6a6a6a;
  --warn: #ffd400;
  --sel: #17324a;
  --font: Consolas, "DejaVu Sans Mono", "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--value);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
}

body { display: flex; flex-direction: column; }

/* ---- chrome ---------------------------------------------------------- */

#topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 8px;
  background: #101010;
  border-bottom: 1px solid var(--line-bright);
  flex: 0 0 auto;
}

#brand { color: var(--amber); font-weight: bold; letter-spacing: 1px; }

#cmd {
  flex: 1 1 auto;
  background: #000;
  border: 1px solid var(--line-bright);
  color: var(--amber);
  font-family: var(--font);
  font-size: 12px;
  padding: 2px 6px;
  outline: none;
  text-transform: uppercase;
}
#cmd:focus { border-color: var(--amber); }

#status { color: var(--muted); white-space: nowrap; }
#status .live { color: var(--up); }
#status .dead { color: var(--down); }
#status .replay { color: var(--warn); }

#fkeys {
  display: flex;
  gap: 0;
  background: #0a0a0a;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
  overflow-x: auto;
}
#fkeys button {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--amber-dim);
  font-family: var(--font);
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
}
#fkeys button:hover { color: var(--amber); background: #151515; }
#fkeys button.active { background: var(--amber); color: #000; font-weight: bold; }
#fkeys .fk { color: var(--head); margin-right: 5px; }
#fkeys button.active .fk { color: #000; }

#main { flex: 1 1 auto; overflow: auto; padding: 4px; }

/* ---- panels ---------------------------------------------------------- */

.panel { border: 1px solid var(--line); background: var(--panel); margin-bottom: 4px; }
.panel > h2 {
  margin: 0;
  padding: 1px 6px;
  background: var(--amber);
  color: #000;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}
.panel > h2 .sub { font-weight: normal; opacity: 0.75; }
.panel .body { padding: 4px 6px; overflow-x: auto; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
@media (max-width: 1100px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ---- tables ---------------------------------------------------------- */

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th {
  color: var(--head);
  text-align: right;
  font-weight: normal;
  padding: 1px 6px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--panel);
}
th.l, td.l { text-align: left; }
td { padding: 0 6px; text-align: right; white-space: nowrap; color: var(--value); }
tbody tr:hover { background: #121212; }
tbody tr.sel { background: var(--sel); }
tbody tr.clickable { cursor: pointer; }

.k { color: var(--amber); }
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--muted); }
.warn { color: var(--warn); }
.head { color: var(--head); }
.pending { color: var(--muted); font-style: italic; }

/* ---- ladder ---------------------------------------------------------- */

.ladder { width: 100%; }
.ladder td { position: relative; }
/* The size bar sits behind the number rather than beside it, so the column stays
 * narrow and the eye reads magnitude and value in one place. */
.ladder .bar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 0;
  opacity: 0.28;
}
.ladder .bid .bar { background: var(--up); }
.ladder .ask .bar { background: var(--down); }
.ladder .px { color: var(--value); }
.ladder .bid .px { color: var(--up); }
.ladder .ask .px { color: var(--down); }
.ladder tr.inband td { box-shadow: inset 2px 0 0 var(--amber); }
.ladder .spreadrow td {
  border-top: 1px solid var(--line-bright);
  border-bottom: 1px solid var(--line-bright);
  color: var(--amber);
  text-align: center;
  background: #0d0d0d;
}

canvas { display: block; width: 100%; image-rendering: pixelated; }

.stat { display: flex; justify-content: space-between; gap: 12px; padding: 0 2px; }
.stat .lbl { color: var(--amber); }
.stat .val { color: var(--value); }

.legend { color: var(--muted); font-size: 11px; padding: 2px 0; }
.note { color: var(--muted); font-size: 11px; padding: 2px 6px; border-top: 1px solid var(--line); }
.empty { color: var(--muted); padding: 8px 6px; }

#tapebody { max-height: calc(100vh - 190px); overflow-y: auto; }
#tapebody tr.new td { background: #1a1200; }