/* Visualisation page. Everything here inherits the glass tokens from
   style.css, so it themes with the rest of the site and never hardcodes a
   colour that only works on one ground. */

.viz-shell { padding: 0; overflow: hidden; }

.viz-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--edge);
}
.viz-modes { display: flex; gap: 8px; }
.chip {
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--edge); background: transparent; color: var(--text-dim);
  font: 600 12.5px/1 var(--sans);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.chip:hover { color: var(--text); }
.chip.is-on {
  color: var(--orange); border-color: rgba(245,117,13,.5);
  background: rgba(245,117,13,.09);
}
.viz-note { font: 400 12px/1.5 var(--sans); color: var(--text-faint); flex: 1 1 260px; }

.viz-stage { position: relative; height: clamp(380px, 58vh, 620px); }
#graph { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#graph:active { cursor: grabbing; }

.viz-legend {
  position: absolute; left: 14px; top: 14px;
  display: flex; flex-direction: column; gap: 7px;
  font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--text-faint);
  pointer-events: none;
}
.viz-legend span { display: flex; align-items: center; gap: 8px; }
.k { width: 9px; height: 9px; border-radius: 50%; display: block; flex: none; }
.k-you { background: #f5750d; box-shadow: 0 0 0 3px rgba(245,117,13,.22); }
.k-up { background: #b7bbbe; }
.k-down { background: #7fa7d4; }
.k-client { background: #6ec5a0; }
.k-txn { background: #d4b25f; }

.viz-hint {
  position: absolute; right: 14px; bottom: 12px;
  font: 400 11.5px/1 var(--sans); color: var(--text-faint); pointer-events: none;
}
@media (max-width: 720px) { .viz-hint { display: none; } }

.viz-controls {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end;
  padding: 16px 18px; border-top: 1px solid var(--edge);
}
.tl { flex: 1 1 320px; }
.tl input[type="range"] {
  width: 100%; padding: 0; margin: 6px 0 8px; background: transparent;
  -webkit-appearance: none; appearance: none; border: 0; outline: none;
}
.tl input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), rgba(245,117,13,.18));
}
.tl input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), rgba(245,117,13,.18));
}
.tl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; margin-top: -6.5px; border-radius: 50%;
  background: var(--orange); border: 2px solid var(--silver-hi);
  box-shadow: 0 2px 8px rgba(0,0,0,.45); cursor: pointer;
}
.tl input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--orange); border: 2px solid var(--silver-hi); cursor: pointer;
}
.tl-btns { display: flex; gap: 10px; }

.viz-readout {
  display: grid; gap: 1px; border-top: 1px solid var(--edge);
  background: var(--edge);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .viz-readout { grid-template-columns: repeat(4, 1fr); } }
.ro {
  padding: 16px 18px;
  background: linear-gradient(160deg, var(--glass-2), var(--glass-1));
}
.ro .num { display: block; margin-bottom: 6px; }
.ro .v { font: 600 clamp(19px, 2.4vw, 26px)/1.1 var(--serif); letter-spacing: -.015em; color: var(--text); }
.ro .v.orange { color: var(--orange); }

.cmp td:first-child { font-weight: 600; white-space: nowrap; }
.cmp td:last-child { color: var(--text); }
.cmp th:last-child { color: var(--orange); }
@media (max-width: 760px) { .cmp td:first-child { white-space: normal; } }

.code {
  margin: 12px 0 0; padding: 14px 16px; border-radius: var(--r-sm);
  background: rgba(0,0,0,.34); border: 1px solid var(--edge);
  font: 400 12.5px/1.65 var(--mono); color: var(--text-dim);
  overflow-x: auto; white-space: pre;
}
:root[data-theme="light"] .code { background: rgba(20,16,13,.055); color: #3a4046; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .code { background: rgba(20,16,13,.055); color: #3a4046; }
}
code { font: 400 .92em/1.4 var(--mono); color: var(--silver); }
:root[data-theme="light"] code { color: #3a4046; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) code { color: #3a4046; }
}

.rec-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--edge); }
.rec-row:last-child { border-bottom: 0; }
.rec-row span:first-child { color: var(--text-faint); font: 500 10.5px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.rec-row span:last-child { text-align: right; word-break: break-all; color: var(--text); }

.ep-ok { color: var(--ok); font: 500 10.5px/1 var(--mono); }
.ep-no { color: var(--text-faint); font: 500 10.5px/1 var(--mono); }