/* Basis — gold ticket
   The palette, faces and weights are the ALPHAST funding desk's, so the two
   dashboards read as one product: near-black ground, one orange accent, green
   and blue reserved for the two sides of the trade. Density is a step looser
   than the funding desk — this page is read to decide, not scanned for rows. */

@font-face {
  font-family: "Geist";
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --bg: #0a0a0c;
  --panel: #0d0d10;
  --surface: #111114;
  --raised: #16161a;
  --line: #232329;
  --line-strong: #2e2e36;
  --ink: #e8e8ec;
  --ink-2: #83838f;
  --ink-3: #6c6c77;
  --accent: #ff6a1f;
  --gold: #ffb020;
  --go: #2ecc8f;
  --go-soft: rgba(46, 204, 143, 0.12);
  --take: #5b9dff;
  --take-soft: rgba(91, 157, 255, 0.12);
  --warn: #ffb020;
  --warn-soft: rgba(255, 176, 32, 0.12);
  --loss: #ff4d5e;

  --zone: var(--ink-2);
  --zone-soft: rgba(131, 131, 143, 0.1);

  /* State, named for what it means rather than what colour it is. `--loss` and
     `--warn` are the paint; these are the words the pages reach for, so a pill
     that says something is down cannot quietly be styled as if it were fine. */
  --ok: var(--go);
  --ok-soft: var(--go-soft);
  --caution: var(--warn);
  --caution-soft: var(--warn-soft);
  --danger: var(--loss);
  --danger-soft: rgba(255, 77, 94, 0.12);

  --ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* One spacing step (4px) and one type step, so three pages written months
     apart stop inventing their own 7px and 13.5px. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --t-micro: 10px;
  --t-xs: 11px;
  --t-sm: 12px;
  --t-base: 13px;
  --t-md: 15px;
  --t-lg: 18px;
  --t-xl: 24px;
  --t-hero: 32px;

  --r-sm: 6px;
  --r-md: 8px;
  --r: 12px;
  --r-pill: 999px;

  /* Anything a finger has to land on. 44px is the floor Apple and Android both
     publish; the desk is read on a phone standing up, so it is not optional. */
  --tap: 44px;
}

body[data-zone="entry"] { --zone: var(--go); --zone-soft: var(--go-soft); }
body[data-zone="exit"] { --zone: var(--take); --zone-soft: var(--take-soft); }
body[data-zone="stale"],
body[data-zone="no_data"] { --zone: var(--warn); --zone-soft: var(--warn-soft); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.5 var(--ui);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { display: block; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--accent); color: #140802; padding: 9px 14px; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.muted { color: var(--ink-3); }
.lbl {
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
}
.px, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── header ─────────────────────────────────────────────────────────── */
.top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2) var(--s3);
  max-width: 1120px; margin: 0 auto; padding: 14px 20px 12px;
}
.top-left { grid-column: 1; }
.top > .nav-seg { grid-column: 2; justify-self: end; }
.top-status { grid-column: 1 / -1; justify-self: end; }
.top-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; color: var(--ink); }
.brand:hover { color: #fff; }
.brand-mark { width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); display: block; flex-shrink: 0; }
.brand small { color: var(--ink-3); font-weight: 400; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; }
.venue-seg { margin-left: 0; }
.venue-seg button { font-family: var(--ui); font-size: 12px; padding: 5px 12px; }
.top-status { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.live { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-family: var(--mono); font-size: 11px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 3px var(--go-soft); }
.live[data-state="down"] { color: var(--loss); }
.live[data-state="down"] .live-dot { background: var(--loss); box-shadow: 0 0 0 3px rgba(255, 77, 94, 0.14); }
.live[data-state="connecting"] .live-dot { background: var(--ink-3); box-shadow: none; }
.icon-btn {
  border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink-2);
  border-radius: 7px; padding: 5px 10px; cursor: pointer; font-size: 11px; font-family: var(--ui);
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important; transition: all 0.15s ease;
}
.icon-btn:hover { border-color: #3a3a44; color: var(--ink); text-decoration: none !important; }
.icon-btn[aria-pressed="true"] { color: var(--accent); border-color: rgba(255, 106, 31, 0.4); background: rgba(255, 106, 31, 0.1); }

main.gold {
  max-width: 1120px; margin: 0 auto;
  padding: 4px 20px 72px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ── the one number ─────────────────────────────────────────────────── */
.head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.head-main { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.head-say { font-size: 16px; color: var(--ink); max-width: 56ch; }
/* The facts behind the figure — mid, crossing, where the marks came from — sit
   in the same panel language as the legs below, not loose against the edge. */
.head-side {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--s2);
  min-width: 260px; max-width: 360px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
  font-size: var(--t-sm);
}
.zone-line { display: flex; align-items: center; gap: 9px; }
.zone-name {
  font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--zone); border: 1px solid var(--zone); background: var(--zone-soft);
  border-radius: 999px; padding: 3px 10px;
}
.zone-since { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.head-mid { color: var(--ink-3); font-size: var(--t-xs); display: flex; justify-content: space-between; gap: var(--s3); }
.head-mid b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.mark-source:empty { display: none; }
.mark-source { color: var(--ink-3); font-size: var(--t-xs); font-family: var(--mono); }
/* When the marks are not percentiles of a real tape, the number on the page is
   a stand-in. That is the most important sentence on the screen and it used to
   be the smallest, so the warning state is a chip, not a tint. */
.mark-source.warn {
  color: var(--caution);
  display: inline-flex; align-items: flex-start; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid rgba(255, 176, 32, 0.32);
  background: var(--caution-soft);
  border-radius: var(--r-md);
  text-align: left;
}
.mark-source.warn::before {
  content: "!";
  flex-shrink: 0;
  width: 14px; height: 14px; margin-top: 1px;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: var(--t-micro); line-height: 13px; text-align: center; font-weight: 700;
}
.zone-announce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── the two legs ───────────────────────────────────────────────────── */
.legs {
  display: grid; grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden;
}
.leg { padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.leg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.leg-head b { font-weight: 600; }
.side { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; }
.side.sell { color: var(--loss); }
.side.buy { color: var(--go); }
.leg-price { display: flex; align-items: baseline; gap: 9px; }
.leg-price b { font-family: var(--mono); font-size: 25px; font-weight: 600; letter-spacing: -0.02em; }
.leg-meta { display: flex; flex-direction: column; gap: 5px; color: var(--ink-2); font-size: 12px; }
.leg-meta div { display: flex; justify-content: space-between; gap: 12px; }
.leg-meta span:last-child { font-family: var(--mono); color: var(--ink); }
.leg-meta .why { font-family: var(--ui); font-style: normal; color: var(--ink-3); text-align: right; }
.gap {
  background: var(--surface); border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px 10px; text-align: center;
}
.gap-target { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.gap-num {
  font-family: var(--mono); font-size: 38px; font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.1; color: var(--ink); margin: 4px 0 3px;
}
.gap-num .cents { font-size: 0.56em; font-weight: 500; opacity: 0.75; }
.gap-num.go { color: var(--go); }
.gap-num.take { color: var(--take); }
.gap-num.hit { text-shadow: 0 0 26px currentColor; }

/* ── ticket ─────────────────────────────────────────────────────────── */
.ticket { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.card-head h2 { font-size: 13px; }
.card-body { padding: 15px 16px; }

.kicker { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.next-title { font-size: 16px; margin-top: 5px; }
.next-body { color: var(--ink-2); margin-top: 4px; max-width: 62ch; }

.bars { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
/* Only one of these decides anything at a time; the others stay legible but quiet. */
.bars[data-focus="open"] .bar.close,
.bars[data-focus="close"] .bar.open,
.bar.cross { opacity: 0.5; }
.bar { display: grid; grid-template-columns: 76px minmax(60px, 1fr) auto; gap: 11px; align-items: center; }
.bar .t { color: var(--ink-2); }
.bar .track { height: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.bar .track i { display: block; height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.bar.open .track i { background: var(--go); }
.bar.close .track i { background: var(--take); }
.bar.cross .track i { background: var(--line-strong); }
.bar .n { font-family: var(--mono); font-size: 12px; }
.bar.open .n { color: var(--go); }
.bar.close .n { color: var(--take); }
.bar .n em { font-style: normal; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .bar .track i { transition: none; } }

.sizes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.sizes-label { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 5px 12px; cursor: pointer; font-family: var(--mono); font-size: 12px;
}
.chip:hover { border-color: #3a3a44; color: var(--ink); }
.chip[aria-checked="true"] { border-color: var(--accent); color: var(--accent); background: rgba(255, 106, 31, 0.1); }

.steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; counter-reset: step; }
.step {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
}
.step::before {
  counter-increment: step; content: counter(step);
  flex: none; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--line-strong);
  color: var(--ink-3); font-family: var(--mono); font-size: 10px; display: grid; place-items: center;
}
.step-text { flex: 1 1 200px; min-width: 0; }
.step-text b { font-weight: 600; }
.step-text .px { color: var(--ink); font-weight: 500; }
.step-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink);
  border-radius: 8px; padding: 7px 13px; font-weight: 500;
}
.btn:hover { border-color: #3a3a44; background: #1b1b20; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #140802; font-weight: 600; }
.btn.primary:hover { background: #ff7d3b; border-color: #ff7d3b; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.next-result {
  margin-top: 13px; padding: 10px 12px; border-radius: 9px; white-space: pre-line;
  font-family: var(--mono); font-size: 12px; border: 1px solid var(--line-strong); background: var(--surface);
}
.next-result.good { border-color: rgba(46, 204, 143, 0.45); background: var(--go-soft); color: var(--go); }
.next-result.bad { border-color: rgba(255, 77, 94, 0.45); background: rgba(255, 77, 94, 0.1); color: var(--loss); }

/* ── position ───────────────────────────────────────────────────────── */
.badge {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  border-radius: 999px; padding: 3px 9px; border: 1px solid var(--line-strong);
  background: var(--raised); color: var(--ink-2);
}
.badge.live-mode { color: var(--accent); border-color: rgba(255, 106, 31, 0.45); background: rgba(255, 106, 31, 0.12); }
.pos-rows { display: flex; flex-direction: column; gap: 10px; }
.pos-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pos-row > span:first-child { color: var(--ink-2); }
.pos-row > span:last-child { font-family: var(--mono); text-align: right; }
.pos-row .big { font-size: 15px; font-weight: 600; color: var(--ink); }
.pos-note { color: var(--ink-3); margin-top: 11px; }

/* ── history ────────────────────────────────────────────────────────── */
.seg { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.seg button {
  background: none; border: 0; border-radius: 6px; padding: 4px 10px; cursor: pointer;
  color: var(--ink-3); font-size: 11px; font-family: var(--mono);
}
.seg button:hover { color: var(--ink); }
.seg button.is-on { background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.legend { display: flex; gap: 16px; padding: 12px 16px 0; }
.lg { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 11px; }
.lg::before { content: ""; width: 14px; height: 2px; border-radius: 2px; }
.lg-spread::before { background: var(--gold); }
.lg-entry::before { background: var(--go); border-top: 1px dashed var(--go); }
.lg-close::before { background: var(--take); }
.chart { height: 260px; padding: 8px 10px 0; }
.chart-note { color: var(--ink-3); padding: 0 16px 15px; }
.live-chart { height: 200px; }
.live-stats { display: flex; gap: 14px; margin-right: auto; margin-left: 12px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex-wrap: wrap; }
.live-stats b { color: var(--ink); font-weight: 600; }
.live-stats .up { color: var(--go); }
.live-stats .down { color: var(--loss); }

/* ── details ────────────────────────────────────────────────────────── */
.extras { display: flex; flex-direction: column; gap: 10px; }
.details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.details > summary {
  padding: 13px 16px; cursor: pointer; font-weight: 500; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.details > summary::-webkit-details-marker { display: none; }
.details > summary::after { content: "+"; color: var(--ink-3); font-family: var(--mono); }
.details[open] > summary { border-bottom: 1px solid var(--line); }
.details[open] > summary::after { content: "−"; }
.help-body { padding: 15px 16px; display: flex; flex-direction: column; gap: 13px; }
.help-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.help-steps .muted { color: var(--ink-2); }

.ladder { margin: 0; padding: 15px 16px 0; }
.ladder-plot { width: 100%; }
.ladder-cap { color: var(--ink-3); margin-top: 8px; }
.lad-book { stroke-width: 5; stroke-linecap: round; }
.lad-book.lighter { stroke: var(--gold); }
.lad-book.vari { stroke: var(--take); }
.lad-gap { fill: var(--zone-soft); }
.lad-gap-edge { stroke: var(--zone); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.lad-gap-label { fill: var(--zone); font: 600 12px var(--mono); }
.lad-name { fill: var(--ink-3); font: 500 10px var(--ui); letter-spacing: 0.06em; text-transform: uppercase; }
.lad-px { fill: var(--ink); font: 500 12px var(--mono); }
.lad-side { fill: var(--ink-3); font-size: 10px; }
.lad-axis { stroke: var(--line-strong); stroke-width: 1; }
.lad-trigger { stroke-width: 1.5; }
.lad-trigger.entry { stroke: var(--go); }
.lad-trigger.exit { stroke: var(--take); }
.lad-trigger-label { font: 500 10px var(--mono); }
.lad-trigger-label.entry { fill: var(--go); }
.lad-trigger-label.exit { fill: var(--take); }

.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; padding: 15px 16px; }
.dl-grid dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dl-grid dt { color: var(--ink-3); font-size: 11px; }
.dl-grid dd { margin: 0 0 4px; font-family: var(--mono); }

/* ── narrow ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .ticket { grid-template-columns: 1fr; }
  .legs { grid-template-columns: 1fr; }
  .gap {
    border-left: 0; border-right: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 14px 18px;
  }
}
@media (max-width: 560px) {
  .top { padding: 12px 16px 10px; }
  main.gold { padding: 4px 16px 56px; }
  .head-say { font-size: 15px; }
  .gap-num { font-size: 32px; }
  .leg-price b { font-size: 21px; }
  .chart { height: 220px; }
  .step { align-items: flex-start; }
  .step-actions { width: 100%; }
  .step-actions .btn { flex: 1 1 auto; justify-content: center; }
}


/* ── regime page ─────────────────────────────────────────────────────── */
/* The svg carries its own aspect through the viewBox; without a width it lays
   out at the viewBox's 980px and pushes the page sideways on a phone. */
.chart-svg { width: 100%; height: auto; display: block; }
.regime-bars {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 6px; align-items: end; height: 220px;
  overflow-x: auto; max-width: 100%; min-width: 0;
}
.rb-col { display: flex; flex-direction: column; height: 100%; min-width: 26px; }
.rb-col.is-dim { opacity: 0.32; }
.rb-stack { flex: 1; display: flex; align-items: flex-end; gap: 2px; }
.rb { flex: 1; display: block; border-radius: 2px 2px 0 0; min-height: 1px; }
.rb-zk { background: var(--gold); }
.rb-ext { background: var(--take); }
.rb-by { background: var(--go); }
.rb-label {
  margin-top: 7px; text-align: center; color: var(--ink-3);
  font-family: var(--mono); font-size: 10px;
}
.lg-zk::before { background: var(--gold); }
.lg-ext::before { background: var(--take); }
.lg-by::before { background: var(--go); }
.lg-real::before { background: var(--accent); height: 3px; }
.regime-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-3); text-decoration: none; font-size: 11px;
}
.regime-link:hover { color: var(--ink); }
@media (max-width: 560px) {
  .regime-bars { height: 170px; gap: 3px; overflow-x: visible; }
  .rb-col { min-width: 0; }
  /* Eighteen five-character labels do not fit a phone; the quarters do. */
  .rb-col:not(.is-q) .rb-label { visibility: hidden; }
  .rb-label { white-space: nowrap; }
}
.top-status:empty { display: none; }

/* ── Web App Enhancements: Token Pill, Carry Strip, Bot Controller, Mobile Bar ── */
.token-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px; font-family: var(--mono); font-size: 11px;
  color: var(--ink-2);
}
.token-pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--go); }
.token-pill.warn .pill-dot { background: var(--warn); }
.token-pill.danger .pill-dot { background: var(--loss); }

.carry-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-top: 14px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 18px;
}
.carry-item { display: flex; flex-direction: column; gap: 4px; }
.carry-val { font-size: 16px; font-weight: 600; color: var(--ink); }
.carry-val.highlight { color: var(--gold); }
.carry-sub { font-size: 11px; color: var(--ink-3); }

.bot-card { margin-top: 14px; border: 1px solid var(--line-strong); background: var(--surface); }
.bot-head-left { display: flex; align-items: center; gap: 10px; }
.bot-head-actions { display: flex; align-items: center; gap: 8px; }
.badge-mode { background: rgba(255, 176, 32, 0.15); color: var(--gold); border: 1px solid rgba(255, 176, 32, 0.3); }
.bot-presets { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.preset-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.preset-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 8px 14px; border-radius: 8px; background: var(--raised);
  border: 1px solid var(--line); cursor: pointer; text-align: left;
  transition: all 0.15s ease;
}
.preset-btn:hover { border-color: var(--gold); }
.preset-btn.is-active { border-color: var(--accent); background: rgba(255, 106, 31, 0.1); }
.preset-btn b { font-size: 12px; color: var(--ink); }
.preset-btn small { font-size: 10px; color: var(--ink-3); }
.bot-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; align-items: end; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.input {
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 10px; color: var(--ink); font-family: var(--mono); font-size: 13px;
}
.input:focus { border-color: var(--accent); outline: none; }
.form-actions { display: flex; align-items: center; gap: 10px; }
.cfg-msg { font-size: 11px; color: var(--go); }

.mobile-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: rgba(13, 13, 16, 0.95); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-strong);
  padding: 10px 16px; align-items: center; justify-content: space-between;
}
.mb-info { display: flex; align-items: center; gap: 8px; }
.mb-zone {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; background: var(--zone-soft); color: var(--zone);
}
.mb-spread { font-size: 16px; font-weight: 600; }
.mb-target { font-size: 11px; color: var(--ink-3); }
.btn-hedge { background: var(--gold); color: #0a0a0c; font-weight: 600; padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; }

@media (max-width: 860px) {
  .carry-strip { grid-template-columns: 1fr; }
  .mobile-bar { display: flex; }
}

/* ── Unified Page Navigation Buttons ─────────────────────────────────── */
.nav-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
}
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  color: var(--ink-2) !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.2;
}
.nav-btn svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
  flex-shrink: 0;
}
.nav-btn:hover {
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none !important;
}
.nav-btn:hover svg {
  opacity: 1;
}
.nav-btn.is-on {
  background: var(--raised) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-weight: 600;
}
.nav-btn.is-on svg {
  opacity: 1;
  stroke: var(--gold);
}

/* Backward compatibility for nav-links */
.nav-links {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  color: var(--ink-2) !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.nav-link:hover {
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none !important;
}
.nav-link.is-on {
  background: var(--raised) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-weight: 600;
}

.cell-desk-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 176, 32, 0.08);
  color: var(--gold) !important;
  border: 1px solid rgba(255, 176, 32, 0.35);
  text-decoration: none !important;
  transition: all 0.15s ease;
  margin-right: 4px;
}
.cell-desk-btn:hover {
  background: rgba(255, 176, 32, 0.18);
  border-color: var(--gold);
}

/* ── All Exchanges Page ───────────────────────────────────────────────── */
.ex-stat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px; position: relative;
}
.ex-stat-card.highlight { border-color: rgba(255, 176, 32, 0.4); background: rgba(255, 176, 32, 0.04); }
.ex-stat-val { font-size: 24px; font-weight: 600; font-family: var(--mono); color: var(--ink); }
.ex-stat-sub { font-size: 11px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }

.ex-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.ex-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-search-box { position: relative; min-width: 180px; }
.ex-search-input {
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 12px; color: var(--ink); font-size: 12px; width: 100%;
}
.ex-search-input:focus { border-color: var(--gold); outline: none; }
.btn-refresh {
  background: var(--raised); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: 6px 12px; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.btn-refresh:hover { border-color: var(--line-strong); background: var(--panel); }

/* Table styling */
.ex-table-wrap {
  width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.ex-table {
  width: 100%; border-collapse: collapse; text-align: left; font-size: 12px;
}
.ex-table th {
  padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line-strong);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3);
  white-space: nowrap; user-select: none;
}
.ex-table th.sortable { cursor: pointer; }
.ex-table th.sortable:hover { color: var(--ink); }
.ex-table th.is-sorted { color: var(--gold); }
.ex-table td {
  padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap;
}
.ex-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
.ex-table tr:last-child td { border-bottom: none; }

.badge-tag {
  display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
  letter-spacing: 0.04em; font-family: var(--ui);
}
.badge-cex { background: rgba(91, 157, 255, 0.12); color: #8ec5fc; border: 1px solid rgba(91, 157, 255, 0.25); }
.badge-dex { background: rgba(255, 106, 31, 0.12); color: #ff9a62; border: 1px solid rgba(255, 106, 31, 0.25); }
.badge-pure7 { background: rgba(255, 176, 32, 0.16); color: #ffb020; border: 1px solid rgba(255, 176, 32, 0.4); }
.badge-xau { background: rgba(255, 176, 32, 0.12); color: var(--gold); border: 1px solid rgba(255, 176, 32, 0.3); }
.badge-xaut { background: rgba(46, 204, 143, 0.12); color: var(--go); border: 1px solid rgba(46, 204, 143, 0.3); }
.badge-paxg { background: rgba(180, 180, 190, 0.12); color: var(--ink-2); border: 1px solid var(--line); }
.badge-gld { background: rgba(255, 106, 31, 0.12); color: #ff8c42; border: 1px solid rgba(255, 106, 31, 0.3); }
.badge-standby { background: rgba(131, 131, 143, 0.12); color: var(--ink-3); border: 1px solid var(--line); }

.cell-trade-btn {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: 6px; background: var(--raised); color: var(--ink);
  border: 1px solid var(--line); text-decoration: none; transition: all 0.15s ease;
}
.cell-trade-btn:hover { border-color: var(--gold); color: var(--gold); }

.chg-pos { color: var(--go); }
.chg-neg { color: var(--loss); }

/* Price animations */
@keyframes flashUp {
  0% { background-color: rgba(46, 204, 143, 0.35); }
  100% { background-color: transparent; }
}
@keyframes flashDown {
  0% { background-color: rgba(255, 77, 94, 0.35); }
  100% { background-color: transparent; }
}
.flash-up { animation: flashUp 1.2s ease-out; }
.flash-down { animation: flashDown 1.2s ease-out; }

/* Matrix Table — diverging on what a cell keeps after crossing both books:
   red below the crossing cost, neutral at it, green above. --mag is 0..1 on
   either side of the centre. */
.matrix-cell {
  text-align: center; font-family: var(--mono); font-size: var(--t-xs); padding: var(--s2) var(--s3);
  background: rgba(46, 204, 143, calc(var(--mag, 0) * 0.42));
  color: color-mix(in srgb, var(--go) calc(35% + var(--mag, 0) * 65%), var(--ink-2));
  font-weight: 500;
}
.matrix-cell.is-under {
  background: rgba(255, 77, 94, calc(var(--mag, 0) * 0.36));
  color: color-mix(in srgb, var(--loss) calc(35% + var(--mag, 0) * 65%), var(--ink-2));
}
.matrix-cell.is-unscaled { background: none; color: var(--ink-2); }
.matrix-cell.is-empty { background: none; color: var(--ink-3); }
/* The matrix is the one view that wants the whole screen — ten venues by ten —
   so on a desktop it leaves the 1120px column and spreads to the window,
   centred, with the page gutter kept. */
@media (min-width: 761px) {
  #viewMatrixContainer { align-self: center; width: calc(100vw - 2 * var(--s5)); max-width: 2200px; }
  /* Never wider than the window: a fixed layout splits the width evenly, and
     the type scales with the window so the columns shrink instead of scrolling. */
  #matrixTableWrap .ex-table-wrap { overflow-x: hidden; }
  .ex-table.is-matrix { width: 100%; table-layout: fixed; font-size: clamp(10px, 0.9vw, 13px); }
  .ex-table.is-matrix th, .ex-table.is-matrix td {
    padding: var(--s2) clamp(2px, 0.3vw, var(--s2));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ex-table.is-matrix th { vertical-align: bottom; font-size: inherit; letter-spacing: 0; }
  .ex-table.is-matrix .matrix-corner, .ex-table.is-matrix .matrix-rowhead { width: 8.5%; }
  .ex-table.is-matrix .matrix-cell, .ex-table.is-matrix .matrix-sub,
  .ex-table.is-matrix .cell-sym { font-size: inherit; }
  .ex-table.is-matrix .matrix-sub { opacity: 0.85; }
}
/* The matrix's own tooltip — the browser's title tip never survived a redraw. */
.matrix-tip {
  position: fixed; z-index: 50; pointer-events: none;
  padding: var(--s2) var(--s3);
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: var(--ink); font-size: var(--t-xs); line-height: 1.5;
}
.mt-head { display: flex; align-items: center; gap: var(--s1); font-weight: 600; margin-bottom: var(--s2); white-space: nowrap; }
.mt-side { font-size: var(--t-micro); letter-spacing: 0.08em; padding: 1px 5px; border-radius: var(--r-sm); margin-right: 2px; }
.mt-side.is-buy { color: var(--take); background: var(--take-soft); }
.mt-side.is-sell { color: var(--loss); background: var(--danger-soft); }
.mt-arrow { color: var(--ink-3); margin: 0 var(--s1); }
.mt-sum {
  display: grid; grid-template-columns: 12px auto auto; column-gap: var(--s2); row-gap: 2px;
  font-family: var(--mono); white-space: nowrap;
}
.mt-sign { color: var(--ink-3); text-align: center; }
.mt-label { color: var(--ink-2); }
.mt-sum b { font-weight: 500; text-align: right; }
.mt-sum b small { color: var(--ink-3); font-size: var(--t-micro); margin-left: 4px; }
.mt-sum .mt-total { font-weight: 700; border-top: 1px solid var(--line-strong); padding-top: 1px; }
.mt-sum .mt-sign:has(+ .mt-label + .mt-total), .mt-sum .mt-label:has(+ .mt-total) { border-top: 1px solid var(--line-strong); padding-top: 1px; }
.mt-sum .is-go { color: var(--go); }
.mt-sum .is-loss { color: var(--loss); }
.mt-ok { color: var(--go); font-size: var(--t-micro); margin-left: 4px; }
.mt-warn { color: var(--caution); font-size: var(--t-micro); margin-left: 4px; }
.mt-dim { color: var(--ink-3); font-size: var(--t-micro); margin-left: 4px; }
.matrix-tip[hidden] { display: none; }
.ex-table.is-matrix .matrix-cell { cursor: default; }
/* Venue marks in the matrix headers and its tooltip. */
.venue-logo { display: inline-block; vertical-align: middle; border-radius: 5px; object-fit: contain; box-shadow: 0 0 0 1px var(--line-strong); }
.venue-logo.is-sm { width: 18px; height: 18px; flex-shrink: 0; }
.venue-logo.is-md { width: 20px; height: 20px; margin-bottom: 3px; }
.venue-logo.is-lg { width: 22px; height: 22px; }
.venue-logo.is-mono {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--line-strong); color: var(--ink); font-family: var(--ui);
  font-size: 9px; font-weight: 700; letter-spacing: 0;
}
/* Both legs on one venue. */
.matrix-cell.is-same-venue { box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.45); }

.matrix-controls {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3);
}
.matrix-legend { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); color: var(--ink-3); }
.matrix-ramp {
  position: relative;
  width: 140px; height: 8px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(255, 77, 94, 0.36), rgba(255, 77, 94, 0) 50%,
                                     rgba(46, 204, 143, 0) 50%, rgba(46, 204, 143, 0.42));
  border: 1px solid var(--line);
}
/* The centre is the crossing cost, and the legend says so. */
.matrix-ramp i {
  position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink-3);
}
.matrix-ramp i::after {
  content: "crossing"; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-size: var(--t-micro); font-style: normal; color: var(--ink-3); white-space: nowrap;
}
.matrix-legend { padding-bottom: var(--s3); }

/* View switcher */
.view-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-top: 6px; }
.view-tab {
  background: none; border: none; font-size: 13px; font-weight: 500; color: var(--ink-2);
  padding: 6px 14px; cursor: pointer; border-radius: 6px;
}
.view-tab:hover { color: var(--ink); }
.view-tab.is-active { background: var(--raised); color: var(--gold); }


/* ══ UX pass, 2026-09-19 ═══════════════════════════════════════════════════
   Four things the pages got wrong, fixed against the real screens rather than
   a mockup: a phone could not see a single price on the observatory table, the
   answer on the desk sat below five rows of chrome, the arbitrage headline was
   quoting a venue offset as if it were edge, and controls were smaller than a
   fingertip. */

/* ── the observatory table on a narrow screen ───────────────────────────────
   Below 760px eleven columns cannot be a table. Horizontal scroll hid the only
   thing the page is for — a phone showed Exchange and Asset and nothing else,
   with no hint the rest existed — so each row becomes a card that states its
   own field names. */
.ex-table-wrap { position: relative; }
.ex-table td.cell-note { color: var(--ink-3); font-style: italic; }
.ex-table td.cell-actions { text-align: right; white-space: nowrap; }
.ex-table td.cell-mid { font-weight: 600; font-size: var(--t-base); }
.ex-table td.cell-bid { color: var(--go); }
.ex-table td.cell-ask { color: var(--take); }
.ex-table tr.is-stale { opacity: 0.55; }
.ex-table tr.is-standby { opacity: 0.65; }
/* One line in the table, where the column is narrow and a wrapped badge reads
   as a second row; free to wrap on a card, where there is width to spare. */
.cell-ident { display: flex; align-items: center; gap: var(--s1) var(--s2); flex-wrap: nowrap; }
.cell-sym { color: var(--ink-3); font-size: var(--t-xs); font-family: var(--mono); }
.fund-apr { color: var(--gold); font-weight: 600; }

@media (max-width: 760px) {
  .ex-table-wrap { border: 0; background: none; overflow-x: visible; }
  .ex-table { font-size: var(--t-base); }
  .ex-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ex-table, .ex-table tbody { display: block; }
  .ex-table tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2) var(--s3);
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s2);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  }
  .ex-table tr:hover td { background: none; }
  .ex-table td { display: block; border: 0; padding: 0; white-space: normal; }
  /* The field name belongs to the value on a card; on the wide table the column
     header already says it, so it is only drawn here. */
  .ex-table td::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    color: var(--ink-3); font-size: var(--t-micro); font-family: var(--ui);
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .ex-table td.cell-exchange, .ex-table td.cell-asset,
  .ex-table td.cell-actions, .ex-table td.cell-note { grid-column: 1 / -1; }
  .ex-table td.cell-exchange::before, .ex-table td.cell-asset::before { content: none; }
  .ex-table td.cell-exchange { font-size: var(--t-md); }
  .cell-ident { flex-wrap: wrap; }
  .ex-table td.cell-type { display: none; }
  .ex-table td.cell-actions { display: flex; gap: var(--s2); text-align: left; }
  .ex-table td.cell-actions a { flex: 1; justify-content: center; min-height: var(--tap); }
  .ex-table td.cell-mid { font-size: var(--t-lg); }
}

/* ── one arbitrage figure, with the part that is not a trade taken out ──────
   A cross-venue pair inherits whatever the two venues disagree by, and that gap
   has no reason to close. Showing the gross number alone repeats the borrowed
   $15 mark in a new place, so the card carries the decomposition. */
.arb-card { gap: var(--s2); }
.arb-figure { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.arb-net { font-family: var(--mono); font-size: var(--t-xl); font-weight: 600; color: var(--gold); }
.arb-gross { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-3); }
.arb-route { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--t-xs); }
.arb-route a { color: var(--ink-2); }
.arb-route a:hover { color: var(--ink); }
.arb-caveat {
  display: flex; gap: var(--s2); align-items: flex-start;
  font-size: var(--t-xs); color: var(--caution); line-height: 1.45;
}
.arb-caveat.is-clean { color: var(--ink-3); }
.arb-tag {
  align-self: flex-start;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 2px var(--s2); border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); color: var(--ink-2);
}
.arb-tag.is-internal { border-color: rgba(46, 204, 143, 0.35); color: var(--ok); background: var(--ok-soft); }
.arb-tag.is-cross { border-color: rgba(255, 176, 32, 0.35); color: var(--caution); background: var(--caution-soft); }

/* ── header chrome ─────────────────────────────────────────────────────────
   The observatory repeated its own navigation as two buttons further down the
   page and spent five lines explaining itself before the first number. The
   explanation is still there, folded; the duplicate buttons are gone. */
.page-intro { color: var(--ink-2); font-size: var(--t-base); max-width: 72ch; }
.page-intro summary {
  cursor: pointer; list-style: none; color: var(--ink-3); font-size: var(--t-xs);
  display: inline-flex; align-items: center; gap: var(--s1);
}
.page-intro summary::-webkit-details-marker { display: none; }
.page-intro summary::after { content: "+"; font-family: var(--mono); }
.page-intro[open] summary::after { content: "−"; }
.page-intro p { margin-top: var(--s2); }

/* The refresh cadence is set once and then forgotten, so it stops competing
   with the live clock for the top line on a phone. */
@media (max-width: 760px) {
  .top {
    padding: var(--s3) var(--s4) var(--s2);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
  }
  .top > .nav-seg { grid-column: 1; justify-self: stretch; }
  .top-status { width: 100%; justify-self: stretch; gap: var(--s2); }
  .btn-refresh { order: 3; min-height: 32px; }
  .head-side { width: 100%; max-width: none; min-width: 0; }
}

/* ── the desk on a phone ───────────────────────────────────────────────────
   Stacked, the spread landed between its two legs and had to be scrolled to.
   It is the number the page exists for, so it goes first. */
@media (max-width: 860px) {
  .gap { order: -1; }
}

/* ── anything a finger lands on ────────────────────────────────────────────
   Below 760px the pills and segmented buttons were 22–26px tall. */
@media (max-width: 760px) {
  .icon-btn, .btn-refresh, .view-tab, .nav-btn { min-height: 36px; }
  .seg button { min-height: 32px; }
  .cell-trade-btn, .cell-desk-btn { min-height: 32px; display: inline-flex; align-items: center; }
}

/* Small utilities that replace the inline styles the observatory had grown, so
   one page stops carrying its own private spacing and colour decisions. */
.head.is-flush { border-bottom: 0; padding-bottom: 0; }
.is-gold { color: var(--gold); }
.is-inset { margin-left: var(--s2); }
.is-spaced { margin-top: var(--s3); }
.is-centered { text-align: center; padding: var(--s5) var(--s4); }
.is-padded { padding: var(--s4); }
.card-intro { margin-bottom: var(--s3); }
.card-title { font-size: var(--t-lg); margin-bottom: var(--s1); }
.col-actions { text-align: right; }
.help-list { margin: var(--s2) 0; padding-left: var(--s5); line-height: 1.6; }
.t-xau { color: var(--gold); }
.t-xaut { color: var(--go); }
.t-paxg { color: var(--ink-2); }
.t-gld { color: #ff8c42; }

/* The matrix keeps its first column pinned while the rest scrolls — with one
   venue per column there is no card layout that would read better. */
.matrix-corner { position: sticky; left: 0; z-index: 2; background: var(--panel); }
.matrix-rowhead { position: sticky; left: 0; z-index: 1; background: var(--surface); font-weight: 600; }
.matrix-sub { font-size: var(--t-micro); font-weight: 400; }
.matrix-sub.is-bid { color: var(--go); }
.matrix-sub.is-ask { color: var(--take); }
/* A venue-by-venue grid has no card form that reads better, so the matrix keeps
   scrolling sideways on a phone — with its first column pinned, which is what
   made the markets table unreadable when it did the same without one. */
@media (max-width: 760px) {
  .ex-table.is-matrix, .ex-table.is-matrix tbody { display: table; }
  .ex-table.is-matrix thead { position: static; width: auto; height: auto; clip-path: none; }
  .ex-table.is-matrix tr { display: table-row; padding: 0; margin: 0; background: none; border: 0; }
  .ex-table.is-matrix td, .ex-table.is-matrix th { display: table-cell; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
  .ex-table.is-matrix td::before { content: none; }
  #matrixTableWrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
}

/* ── the header says what the desk is doing, then what the reader prefers ───
   Link, Live and Bot report state and keep full weight. Notify and Sound are
   the reader's own switches: quiet behind a divider until one is on, so a dead
   link is no longer the same size as a muted bell. */
.top-prefs {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding-left: var(--s2); margin-left: var(--s1);
  border-left: 1px solid var(--line);
}
.top-prefs .icon-btn {
  border-color: transparent; background: none; color: var(--ink-3);
}
.top-prefs .icon-btn:hover { border-color: var(--line-strong); background: var(--raised); }
.top-prefs .icon-btn[aria-pressed="true"] {
  border-color: rgba(255, 106, 31, 0.4); background: rgba(255, 106, 31, 0.1); color: var(--accent);
}
.is-spaced-sm { margin-top: var(--s1); }

/* ── the observatory on a phone, after the table was fixed ──────────────────
   Three median cards at full width put the headline figure three screens down,
   and the view tabs broke "All Markets Table" across three lines. Nothing is
   hidden — the medians say where they come from and that provenance stays. */
@media (max-width: 760px) {
  .ex-stat-card { padding: var(--s3) var(--s4); }
  .ex-stat-val { font-size: var(--t-lg); }
  .arb-card .arb-net { font-size: var(--t-xl); }

  /* Tabs scroll sideways rather than stacking; the row keeps one line. */
  .view-tabs {
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .view-tabs::-webkit-scrollbar { display: none; }
  /* The last tab sits off-screen; the fade says there is more to the right. */
  .view-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  .view-tabs.at-end { -webkit-mask-image: none; mask-image: none; }
  .view-tab { white-space: nowrap; flex: 0 0 auto; }

  /* Refresh is a redundant control while the poller runs; it shrinks to its
     icon so the live clock and the cadence fit one line. */
  .btn-refresh { padding: var(--s1) var(--s2); }
  .btn-refresh .btn-label { display: none; }
}


/* ── the observatory wears the desk's rhythm ───────────────────────────────
   Four cards in one row left the three medians stretched to the height of the
   arbitrage card, with an inch of empty panel under each — the page read as
   unfinished next to the desk. It now has the desk's shape: the figure that
   decides on its own at the top, then a three-up strip of context, exactly the
   way the desk leads with the spread and follows it with the carry. */
.ex-headline { display: grid; grid-template-columns: minmax(0, 1fr); }
.ex-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s3) 18px;
}
.ex-strip .ex-stat-card {
  background: none; border: 0; border-radius: 0; padding: 0;
  gap: var(--s1);
}
.ex-strip .ex-stat-val { font-size: var(--t-xl); }
@media (max-width: 760px) {
  .ex-strip { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .ex-strip .ex-stat-val { font-size: var(--t-lg); }
}


/* One leg filled and the other not: the desk is long or short gold outright,
   which is the exposure the whole trade exists to avoid. Loudest thing on the
   line, and it only ever appears when it is true. */
.zone-alarm {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em;
  color: var(--danger); background: var(--danger-soft);
  border: 1px solid rgba(255, 77, 94, 0.45);
  border-radius: var(--r-pill); padding: 3px 10px;
}

/* ── the headline arbitrage card, in the desk's shape (21 Sep 2026) ─────────
   It was a label, a number and two underlined links: correct, and stiff. It now
   reads like the desk — buy leg, the spread between, sell leg — with a line of
   the figure since the page opened, and each leg saying whether its book moves. */
.arb-card { padding: 16px 18px; gap: var(--s3); }
.arb-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.arb-legs {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden;
}
.arb-leg {
  display: flex; flex-direction: column; gap: 5px; padding: 14px 16px;
  color: inherit; text-decoration: none; transition: background 0.15s ease;
}
.arb-leg[href]:hover { background: var(--raised); }
.arb-leg.is-sell { text-align: right; align-items: flex-end; }
.arb-side { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.arb-leg.is-buy .arb-side { color: var(--go); }
.arb-leg.is-sell .arb-side { color: var(--loss); }
.arb-side b { font-weight: 600; }
.arb-venue { font-size: var(--t-md); font-weight: 600; color: var(--ink); }
.arb-px { display: flex; align-items: baseline; gap: 6px; }
.arb-px b { font-family: var(--mono); font-size: var(--t-lg); font-weight: 600; color: var(--ink); }
.arb-px small { font-size: var(--t-micro); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.arb-meta { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); }
.arb-meta.is-still { color: var(--caution); }
.arb-mid {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 16px; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.arb-mid .arb-figure { justify-content: center; }
.arb-card .arb-net { font-size: var(--t-hero); line-height: 1; transition: color 0.6s ease; }
.arb-net.flash-up { animation: arb-flash-up 1.2s ease; }
.arb-net.flash-down { animation: arb-flash-down 1.2s ease; }
@keyframes arb-flash-up { 0% { color: var(--go); } 100% { color: var(--gold); } }
@keyframes arb-flash-down { 0% { color: var(--loss); } 100% { color: var(--gold); } }
.arb-spark { width: 100%; max-width: 240px; height: 36px; overflow: visible; }
.arb-spark-line { fill: none; stroke: var(--gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.arb-spark-area { fill: rgba(255, 176, 32, 0.08); stroke: none; }
.arb-spark-dot { fill: var(--gold); }
.arb-range { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); }
.arb-caveat { padding-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .arb-net.flash-up, .arb-net.flash-down { animation: none; }
}
@media (max-width: 760px) {
  .arb-legs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .arb-mid { grid-column: 1 / -1; grid-row: 1; border: 0; border-bottom: 1px solid var(--line); }
  .arb-leg { padding: 12px; }
  .arb-card .arb-net { font-size: var(--t-xl); }
}