/* Snap Trenches — minimal and dark. SubQ's colours sit in a few quiet places: the PAPER badge (yellow), Snap's PnL
   (green from zero up, orange-red below) and the tape (blue for open, green gains, orange losses, always with a sign).
   The background behind everything (pairs.js; owner, 2026-10-16: draft 92): a point drops in for every new pair in
   Snap's New column and drifts down, each in the colour of SubQ's logo quadrant it is nearest; no lines between them.
   */
:root {
  --bg: #000000; /* pure black (owner, 2026-10-17) */
  --stage: #000000;
  --line: #1D2026;
  --line-strong: #2A2E35;
  --text: #E6E8EB;
  --soft: #B4B9C2;
  --muted: #8B9099;
  /* SubQ's colours, lifted a little where they are thin lines or text on a dark page */
  --subq-blue: #5B7FE6;
  --subq-blue-text: #8EA7FA;
  --subq-green: #8FC484;
  --subq-yellow: #F2DC5D;
  --subq-orange: #EA5324;
  --up: var(--subq-green);
  --down: var(--subq-orange);
  --sans: Geist, system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
.pairs { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
body { font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--text); }
a[href]:hover { color: var(--subq-blue-text); }
::selection { background: rgba(91, 127, 230, 0.4); }
p { margin: 0; }
[hidden] { display: none !important; }
.num { font-family: var(--mono); }
.up { color: var(--up); }
.down { color: var(--down); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Bar on top, the stream between it and the tape at the bottom, everything over the background. */
.page { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(420px, 1fr) auto; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }

/* Top bar (owner, 2026-10-16: no logo): Snap's PnL left, after PAPER while it paper trades (live, no badge); the
   links right: $Snap, Snap's X, the docs and Snap's wallet. */
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; min-height: 58px; padding: 10px 24px; border-bottom: 1px solid rgba(230, 232, 235, 0.07); }
.status { justify-self: start; display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.mode { font-size: 11px; letter-spacing: 0.08em; padding: 2px 8px; border: 1px solid rgba(242, 220, 93, 0.35); border-radius: 999px; color: var(--subq-yellow); }
/* Snap's PnL links to its wallet (Solscan): the label stays quiet, the value green from zero up, red below (owner,
   2026-10-16). */
.pnl { color: inherit; text-decoration: none; }
.pnl .num { color: var(--text); }
.pnl .num.up { color: var(--up); }
.pnl .num.down { color: var(--down); }
a.pnl[href]:hover, a.pnl[href]:hover .num { color: var(--subq-blue-text); }
/* Snap offline (its Mac isn't pushing, on the public site): the last PnL, greyed */
.status.offline .pnl .num { color: var(--muted); }
.links { justify-self: end; display: flex; align-items: center; gap: 2px; margin-right: -12px; }
.links a { padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--muted); white-space: nowrap; }

/* The stream: whole, 16:9, as large as fits between the bar and the tape, the background showing round it. The
   notice ("Connecting to the stream") takes exactly the picture's box, so nothing changes size when the stream
   starts, whatever the window's shape. */
.stage { position: relative; min-height: 0; overflow: hidden; container-type: size; }
.stage video,
.stage .hold,
.slate { position: absolute; left: 50%; top: 50%; width: min(100cqw, 100cqh * 16 / 9); height: auto; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); box-shadow: 0 0 48px 6px rgba(0, 0, 0, 0.55); }
.stage video { object-fit: contain; background: var(--stage); }
.slate { display: grid; place-content: center; gap: 6px; padding: 24px; text-align: center; background: var(--stage); }
.slate-title { font-size: 18px; font-weight: 600; }
.slate-text { max-width: 420px; color: var(--muted); }
.links a:focus-visible, .pnl:focus-visible { outline: 2px solid var(--subq-blue); outline-offset: 2px; }

/* Ticker tape: open and recent positions. It moves from script (so updates don't restart it) and stands still
   for people who prefer less motion. */
.tape { position: relative; border-top: 1px solid rgba(230, 232, 235, 0.07); overflow: hidden; }
.track { display: flex; width: max-content; will-change: transform; }
.track ul { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 14px 18px; }
.track li { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font-family: var(--mono); font-size: 13px; }
.tag { font-size: 10px; letter-spacing: 0.08em; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); }
.tag.open { color: var(--subq-blue-text); border-color: rgba(142, 167, 250, 0.5); }
.hold { color: var(--muted); }
.empty { padding: 14px 20px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .tape { overflow-x: auto; }
}

/* Phones: the stream 16:9 between the bar and the tape; the bar a little tighter, and on the narrowest the links
   under the PnL. */
@media (max-width: 760px) {
  .page { grid-template-rows: auto auto auto; align-content: start; }
  .bar { column-gap: 12px; min-height: 54px; padding: 8px 14px; }
  .status { gap: 10px; }
  .links { margin-right: -8px; }
  .links a { padding: 8px; }
  .stage { aspect-ratio: 16 / 9; }
}
@media (max-width: 400px) {
  .pnl-label { display: none; }
  .links { margin-right: -6px; }
  .links a { padding: 8px 6px; }
}
@media (max-width: 350px) {
  .bar { grid-template-columns: minmax(0, 1fr); }
  .links { justify-self: start; margin: 0 0 0 -6px; }
}