/* exchange.bch2.org — market terminal, editorial style.
   Layered on bch2.v1.css, which supplies the tokens, type and page shell.
   Only the components the terminal adds live here.

   The one token this page needs and the shell does not define is a down/sell
   colour: the editorial palette is built around a single green accent, but a
   book and a tape are unreadable without a second direction. --down is a deep
   brick that reads as ink-adjacent rather than alarm-red, and clears 5.9:1 on
   paper so a falling price is never the hardest thing on the page to read. */
:root {
  --down: #a3301c;
  --up: var(--green);
  --book-gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
}

/* ── Venue picker ──────────────────────────────────────────────────────────
   A segmented control, not tabs: three peers, one selected. Ink fill marks
   the selection so it survives greyscale and does not lean on colour alone. */
.exchange-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--space-l);
  border: 1px solid var(--line-ui);
  width: fit-content;
  max-width: 100%;
}

.exchange-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border: 0;
  border-left: 1px solid var(--line-ui);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.exchange-tab:first-child { border-left: 0; }
.exchange-tab:hover { background: var(--wash); }
.exchange-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

.exchange-tab.active {
  background: var(--ink);
  color: var(--on-dark);
}

/* The live dot: green on paper, bright on the ink fill so it stays visible. */
.exchange-tab::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  flex: none;
  background: var(--line-ui);
}
.exchange-tab.active::before { background: var(--bright); }

/* ── Quote ─────────────────────────────────────────────────────────────────
   The pair sits above the number as a mono label; the number itself is the
   largest thing on the page after the title. */
.market-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem var(--space-m);
  padding-block: var(--space-m);
}

.market-head__pair {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.market-head__price {
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* The shell's .stat-strip is a four-up; the terminal carries four figures
   beside the quote, so it is reused as-is and only the numerals are pinned
   to the mono face for column alignment. */
.stat-strip .stat__value { font-variant-numeric: tabular-nums; }

/* ── Panels ────────────────────────────────────────────────────────────────
   A panel is a hairline box on paper. No shadow, no radius, no fill: depth
   comes from the rule weight, matching the rest of the site. */
.term-panel {
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.term-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem var(--space-m);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.term-panel__title {
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-title);
}

.term-panel__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Chart ─────────────────────────────────────────────────────────────────
   Height is viewport-relative with a floor, so the candles stay legible on a
   phone without pushing the book below two screens. */
.chart-panel__body { position: relative; }

#chart-container {
  height: clamp(320px, 46vh, 460px);
  width: 100%;
}

.chart-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  pointer-events: none;
}

.tf-buttons { display: flex; gap: 0; border: 1px solid var(--line-ui); }

.tf-btn {
  appearance: none;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border: 0;
  border-left: 1px solid var(--line-ui);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.tf-btn:first-child { border-left: 0; }
.tf-btn:hover { background: var(--wash); color: var(--ink); }
.tf-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.tf-btn.active { background: var(--ink); color: var(--on-dark); }

/* ── Book and tape ─────────────────────────────────────────────────────────
   Both are mono, tabular and right-aligned on the numeric columns so the
   decimal points form a straight edge down the page. */
.market-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--book-gap);
  margin-top: var(--book-gap);
}

.book-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-m);
}

.col-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-s);
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.col-head span:last-child,
.trades-head span:nth-child(2) { text-align: right; }

.trades-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 0 var(--space-s);
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.trades-head span:last-child { text-align: right; }

.orderbook-side,
.trades-body {
  padding: 0.5rem 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.orderbook-side { padding-inline: 1.25rem; }
.trades-body { padding-inline: 1.25rem; max-height: 23rem; overflow-y: auto; }

/* Rows are emitted by exchange.js; these selectors are its contract. */
.orderbook-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-s);
  padding-block: 0.1875rem;
}

.trade-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 0 var(--space-s);
  padding-block: 0.1875rem;
}

.orderbook-row span:last-child,
.trade-row span:last-child { text-align: right; }

.orderbook-qty,
.trade-row span:nth-child(2),
.trade-row span:last-child { color: var(--muted); }

.trade-row span:nth-child(2) { text-align: right; }

.bid-price, .trade-buy  { color: var(--up); }
.ask-price, .trade-sell { color: var(--down); }

.orderbook-spread {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.loading-placeholder {
  margin: 0;
  padding-block: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Narrow ────────────────────────────────────────────────────────────────
   Below 900px the book and tape stack; below 560px the book's own two columns
   stack too, because eight mono characters per column is the floor before the
   prices start wrapping mid-number. */
@media (max-width: 900px) {
  .market-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  /* The shell pins .stat__value to nowrap, which is right for a single figure but
     clips "Bid / Ask" — it carries two prices and a separator. Let that one cell
     wrap and step it down a size; the other three stay on one line. */
  #bidask {
    white-space: normal;
    font-size: clamp(1.25rem, 1rem + 2.2vw, 1.625rem);
    line-height: 1.15;
  }

  .book-cols { grid-template-columns: minmax(0, 1fr); }
  .book-cols > * + * { border-top: 1px solid var(--line); }
  .exchange-tabs { width: 100%; }
  .exchange-tab { flex: 1 1 auto; justify-content: center; }
  .term-panel__head { padding-inline: 1rem; }
  .orderbook-side, .trades-body, .col-head, .trades-head, .orderbook-spread { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .exchange-tab, .tf-btn { transition: none; }
}