/* bch2.org price page, v1 (/assets/editorial/price.v1.css)
   Loaded after bch2.v1.css on price.html only. Design-system tokens only; no new colours.
   price.js keeps writing #priceMain, #priceChange, #vol24h, #high24h, #low24h, #bidAsk,
   #lastUpdated, #blockHeight, #hashrate and #circSupply; site.v1.js sets the market state. */

/* Quote: the market panel hangs from the page-heading rule ------------------------------- */
.price-quote { padding-bottom: var(--section-pad); }
.price-quote .market { border-top: 0; }

/* Change + signal never shrink; on narrow phones the pair label wraps instead. */
.market__status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-xs);
}
/* price.js replaces the class attribute with "price-change up|down". The sign is in the text,
   so colour is never the only cue. */
.price-change {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;              /* shorter than the pair label's line: the head never grows */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-change.up { color: var(--green); }
.price-change.down { color: var(--ink); }

.price-quote__actions { margin-top: var(--space-m); }

/* Markets: one row per exchange under the quote, on the split tracks --------------------------
   <li class="markets__row" data-market="…" data-state="loading"> name + pair | last price and
   24h volume | trade button. markets.v1.js fills [data-market-last] and [data-market-volume] and
   sets data-state to live or unavailable, with the market panel's marks: hollow square while
   loading, filled when live, crossed when unavailable. The pair label sits over the name (DOM:
   name first) so both columns read label over value and share the value baseline. */
.markets { margin-top: var(--space-xl); }
.markets__body { min-width: 0; }
.markets__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--rule-strong);
}
.markets__row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr) auto;
  column-gap: var(--space-m);
  align-items: last baseline;
  padding-block: 1.125rem 1.25rem;
  border-bottom: var(--rule);
}
.markets__name { display: flex; flex-direction: column; min-width: 0; }
.markets__exchange {
  margin-top: 0.25rem;
  font-size: var(--text-md);
  line-height: 1.35;
  letter-spacing: var(--tracking-title);
}
.markets__pair {
  order: -1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  letter-spacing: var(--tracking-label);
  color: var(--muted);
}
.markets__pair::before {
  content: "";
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: 0.5rem;
  vertical-align: 0.08em;
  border: 1px solid var(--line-ui);
}
.markets__row[data-state="live"] .markets__pair::before { background: var(--green); border-color: var(--green); }
.markets__row[data-state="unavailable"] .markets__pair::before {
  border-color: var(--muted);
  background: linear-gradient(to top right, transparent calc(50% - 0.75px), var(--muted) calc(50% - 0.75px), var(--muted) calc(50% + 0.75px), transparent calc(50% + 0.75px));
}
.markets__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-m);
  min-width: 0;
}
.markets__figures > div { min-width: 0; }
.markets__figures dt { color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
.markets__figures dd {
  margin-top: 0.25rem;
  font-size: 1.0625rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.markets__row[data-state="loading"] .markets__figures dd {
  color: transparent;
  background: linear-gradient(var(--line-ui), var(--line-ui)) 0 60% / 4ch 1px no-repeat;
}
.markets__figures dd[data-empty] { color: var(--muted); }
.markets__trade { align-self: center; }

/* Where the quote shows its four figures in one row (768-899px, and from 1280px in the 2.1fr
   track), the rows use the same four columns and gap: last price under 24h High, 24h volume under
   24h Low, the button in the Bid / Ask column, ending on the column edge. */
@media (min-width: 48rem) and (max-width: 56.24rem), (min-width: 80rem) {
  .markets__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .markets__figures { grid-column: span 2; }
  .markets__trade { justify-self: end; }
}

/* Phones: name and trade button on one line, the two figures under them. */
@media (max-width: 47.99rem) {
  .markets__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-s); }
  .markets__figures { grid-column: 1 / -1; grid-row: 2; }
  .markets__trade { grid-column: 2; grid-row: 1; }
}

/* Tablets: the four quote figures fit one row. */
@media (min-width: 48rem) and (max-width: 56.24rem) {
  .price-quote .market__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Desktop: price in the 1fr split track, figures in the 2.1fr track, so the figures start on
   the same line as the section bodies below. */
@media (min-width: 56.25rem) {
  .price-quote .market {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: end;
  }
  .price-quote .market__head,
  .price-quote .market__source { grid-column: 1 / -1; }
  .price-quote .market__stats {
    padding-block: 0 1.375rem;
    border-top: 0;
  }
  .price-quote .market__source { margin-top: 0; }
}
@media (min-width: 80rem) {
  .price-quote .market__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Phones: the source line holds two lines in every state, so "loading..." -> "Updated 1:02:33 PM"
   never moves the page. (The buttons stack through .actions--stack-mobile.) */
@media (max-width: 47.99rem) {
  .price-quote .market__source { min-height: calc(3.2em + 0.875rem + 1px); }
}

/* Chain figures: a slim live row under the quote -----------------------------------------
   Block height, hashrate and circulating supply, the three figures price.js fills from the
   explorer. The row hangs from the market panel's closing hairline and closes with one of its
   own, so quote and chain read as two bands of one block. Each cell keeps the baseline's DOM
   order (label, then value); bch2.v1.css shows the value first.
   #difficulty stays in the markup, visually hidden: the id is part of the page's published
   contract, but no script ever writes it, so the page must not show a figure that can never
   arrive. Being out of flow, the hidden cell takes no column. */
.price-chain {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 0;
  border-bottom: var(--rule);
}
.price-chain .stat {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  padding: 0.875rem 1.25rem;
}
.price-chain .stat:first-child { padding-left: 0; }
.price-chain .stat__label { font-size: 0.8125rem; line-height: 1.4; }
.price-chain .stat__value {
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: normal;
  white-space: normal;      /* "4,066,205 BCH2" wraps at its space rather than leave the cell */
}

/* Phones: one figure per line, label left and value right, as the baseline page read them. */
@media (max-width: 29.99rem) {
  .price-chain { grid-template-columns: minmax(0, 1fr); }
  .price-chain .stat {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    padding: 0.625rem 0;
    border-left: 0;
    border-top: var(--rule);
  }
  .price-chain .stat:first-child { border-top: 0; }
  .price-chain .stat__label + .stat__value { order: 0; }
}

/* Listed On: the three exchanges, beside the markets list -------------------------------- */
/* Kept from the Network Stats table the price page no longer carries. The label is the mono
   eyebrow; each icon stays with its exchange name through .nowrap. */
.listed-on {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: var(--rule);
}
.listed-on dd { margin: 0.25rem 0 0; line-height: 1.9; }