/* Raw-data pages: long/short ratio, open interest, CVD (overview + per-coin).
   Loads AFTER liquidation/exchanges.css and liquidation/coin.css, which carry
   every shared component (summary card, strip, segment, picker, tables,
   footnote, boundary row, Pro card, dark ramp) — spec-raw-lsr-oi-cvd 09-21 §2:
   one component, no per-page tuning. Only what these pages add lives here.
   New rules take the semantic role variables, so `body.dark-mode` needs no
   override except where the spec names a different dark token. */

/* Long / buy = green, short / sell = red. The liquidation pages colour by the
   price move instead (long liquidation = red); that is their exception, so the
   direction classes are separate rather than a re-point of .liq_long. */
.liq_split_r b.up,
.liq_strip button .v.up,
.liq_mx td.up,
.rd_ch_read .up {
  color: var(--color-greenText);
}
.liq_split_r b.dn,
.liq_strip button .v.dn,
.liq_mx td.dn,
.rd_ch_read .dn {
  color: var(--color-redText);
}
.liq_bar i.buy {
  background-color: var(--color-green);
}
.liq_bar i.sell {
  background-color: var(--color-red);
}
.liq_split_r b .liq_pc {
  font-family: inherit;
}

/* Summary with three stats on the right (open interest) */
.liq_sum_top.n3 {
  grid-template-columns: minmax(9.5rem, max-content) 1fr repeat(3, minmax(0, 9rem));
}
.liq_sum_top.n3 .liq_split_r:nth-child(2) > span {
  grid-area: 1 / 4;
  justify-self: start;
}
.liq_sum_top.n3 .liq_split_r:nth-child(2) > b {
  grid-area: 2 / 4;
  justify-self: start;
}
.liq_sum_top.n3 .liq_split_r:nth-child(3) > span {
  grid-area: 1 / 5;
  justify-self: end;
}
.liq_sum_top.n3 .liq_split_r:nth-child(3) > b {
  grid-area: 2 / 5;
  justify-self: end;
}

/* Type segment row above the venue strip (long/short per-coin) */
.rd_seg_row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--border-hairline);
}
.rd_seg_row + .liq_strip {
  margin-top: var(--space-12);
}
.liq_strip button:disabled {
  cursor: default;
}
.liq_strip button:disabled .v,
.liq_strip button:disabled:hover .v {
  color: var(--color-greyMedium);
}
/* the stale tag sits under the figure, so every cell keeps name and figure on
   the same two lines */
.liq_strip button > .mini_tag {
  margin-bottom: var(--space-4);
}

/* ── Dual-axis series chart (spec §4) ── */
.rd_ch {
  margin-top: var(--space-12);
}
.rd_ch_head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  min-height: 18px;
  margin-bottom: var(--space-8);
  font-size: 12px;
  color: var(--color-greyMedium);
}
.rd_ch_head .lg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}
/* `.rd_ch_head .lg` out-specifies the family's `.liq_hidden`, so a legend entry
   whose series is absent (no price, no other venue) has to be hidden here */
.rd_ch_head .lg.liq_hidden {
  display: none;
}
.rd_ch_head .lg i {
  display: inline-block;
  width: 14px;
  border-top: 2px solid var(--ink);
}
.rd_ch_head .lg i.d1 {
  border-top-color: var(--color-data-1);
}
.rd_ch_head .lg i.gm {
  border-top-color: var(--color-green);
}
.rd_ch_head .lg i.rm {
  border-top-color: var(--color-red);
}
/* one line, one entry: the swatch is green up to 1.00 and red below it */
.rd_ch_head .sw {
  display: inline-flex;
}
.rd_ch_head .sw i {
  width: 7px;
}
/* bars get the square swatch of the liquidation chart legend, split in two */
.rd_ch_head .sw.sq {
  border-radius: var(--radius-micro);
  overflow: hidden;
}
.rd_ch_head .sw.sq i {
  width: 5px;
  height: 10px;
  border-top: 0;
}
.rd_ch_head .sw.sq i.gm {
  background-color: var(--color-green);
}
.rd_ch_head .sw.sq i.rm {
  background-color: var(--color-red);
}
/* one-venue CVD page: the cross-link stands alone above the source line */
p.liq_meth_note.rd_solo_link {
  margin-bottom: var(--space-12);
}
.rd_ch_read {
  margin-left: auto;
  min-height: 18px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.rd_ch_read b {
  font-weight: 500;
  color: var(--ink);
}
/* plot + the 20px date-label row (the chart's own bottom padding), held by CSS
   so mounting the canvas moves nothing */
.rd_ch_plot {
  position: relative;
  height: 320px;
}
.rd_ch_plot canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.rd_ch_wait {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -22px 0 0 -22px;
}
.rd_ch.is-ready .rd_ch_wait {
  display: none;
}
/* Colour probes: canvas reads their computed colour, so the theme split and
   the color-mix() tint are decided here, not in JS. */
.rd_probe {
  position: absolute;
  width: 0;
  height: 0;
  visibility: hidden;
}
.rd_probe.out {
  color: var(--color-greyLightMedium);
}
.rd_probe.fill_up {
  background-color: color-mix(in srgb, var(--color-green) 12%, var(--surface-card));
}
.rd_probe.fill_dn {
  background-color: color-mix(in srgb, var(--color-red) 12%, var(--surface-card));
}
body.dark-mode .rd_probe.out {
  color: var(--color-darkBorder);
}

/* ── Overview tables ── */
.rd_search {
  height: 32px;
  width: 180px;
  border: 1px solid var(--border-frame);
  background-color: transparent;
  color: var(--ink);
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-family: inherit;
  padding: 0 var(--space-8);
}
.rd_search::placeholder {
  color: var(--color-greyMedium);
}
.rd_mx col.c_coin {
  width: 132px;
}
/* Five columns share 972px, so each number column takes 210 and the figures
   drift apart. Pin them and let the slack land in the coin column — the same
   rule (and the same 132) the liquidation matrix uses below six columns. */
@media (min-width: 1301px) {
  .rd_mx col.c_coin {
    width: auto;
  }
  .rd_mx colgroup col:not(.c_coin) {
    width: 132px;
  }
  /* a 132px column holds the figures; a long header ("Taker Buy Share · 24h")
     wraps to two lines instead of pushing the table out of its card */
  .rd_mx thead th {
    white-space: normal;
    line-height: 1.3;
  }
}
.rd_mx thead th[data-sort]:focus-visible {
  outline-offset: -2px;
}
.rd_mx tbody th.nm .mini_tag,
.rd_mx thead th .mini_tag {
  margin-left: var(--space-6);
  vertical-align: 2px;
}
/* an absent figure is one grey step down, also in the emphasised column */
.rd_mx td.tot.soft,
.rd_ex_mx td.tot.soft {
  color: var(--color-greyMedium);
  font-weight: 400;
}
/* Signed-in tables run to several hundred rows: the body scrolls inside the
   card (the old OI table at this URL did the same) so the notes below stay
   reachable. The anonymous 30 rows sit in the page flow. */
.rd_scroll.is-full {
  max-height: 672px;
  overflow-y: auto;
}
.rd_scroll.is-full thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--surface-card);
}
.rd_bound {
  border-top: 1px solid var(--border-hairline);
  margin: var(--space-12) 0 0;
  padding-top: var(--space-12);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-greyMedium);
}
/* inline text links: ink + underline (the family's quiet-link recipe); without
   it the explanation's cross-links fall back to Bootstrap's blue */
.rd_bound a,
.rd_explain > p a {
  color: var(--ink);
  text-underline-offset: 3px;
}
.rd_bound a:hover,
.rd_explain > p a:hover {
  color: var(--ink-2);
}
/* methodology <details>: a plain definition list per venue */
.rd_meth_list {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-greyMedium);
  max-width: 78ch;
}
.rd_meth_list li + li {
  margin-top: var(--space-4);
}
.rd_meth_list b {
  font-weight: 600;
  color: var(--ink-2);
}

/* Long/short overview: matrix form shows the type segment, list form (≤768,
   or ≤1300 once a 7th venue lands) shows the venue picker instead. The page
   JS reads which one is visible — the breakpoint lives here only. */
.rd_lsr_pick {
  display: none;
}

/* Long/short methodology: each exchange's definition of "top", inside the
   <details> — the liquidation coverage table recipe (.liq_cov), prose cells */
p.liq_meth_note.rd_def_h {
  margin-top: var(--space-16);
  font-weight: 600;
  color: var(--ink-2);
}
.rd_def {
  margin-top: var(--space-8);
}
.rd_def thead th,
.rd_def tbody td,
.rd_def tbody th {
  white-space: normal;
  vertical-align: top;
}
/* .liq_cov pins column 2 to the coverage table's 44em rule column; here the
   long prose sits in column 3 */
.rd_def thead th:nth-child(2),
.rd_def tbody td:nth-child(2) {
  width: 26%;
  max-width: none;
}

/* Per-exchange tables on the per-coin pages */
.rd_ex_mx col.c_ex {
  width: 150px;
}
.rd_share {
  display: inline-flex;
  width: 56px;
  height: 6px;
  margin-left: var(--space-8);
  vertical-align: 1px;
  border-radius: var(--radius-micro);
  overflow: hidden;
  background-color: var(--surface-muted);
}
.rd_share i {
  display: block;
  height: 100%;
  background-color: var(--color-greyMedium);
}
/* CVD per-coin, single venue: the table card is not rendered, so the sentence
   is followed directly by the source line */
.rd_page > #rd_body > #rd_gated > p.liq_rowsnote {
  margin-bottom: var(--space-12);
}
.rd_explain {
  margin-top: var(--space-32);
}

@media (max-width: 1300px) {
  .rd_mx col.c_coin {
    width: 96px;
  }
  /* Narrow columns hold the CJK headers on one line but not "Top Positions"
     or "Cuota de compra · 24 h": headers wrap instead of shrinking the type. */
  .rd_mx thead th,
  .rd_ex_mx thead th {
    white-space: normal;
    line-height: 1.3;
  }
  .rd_force_list .rd_lsr_seg {
    display: none;
  }
  .rd_force_list .rd_lsr_pick {
    display: inline-block;
  }
  .rd_mx .hide-md,
  .rd_ex_mx .hide-md {
    display: none;
  }
  .rd_ch_plot {
    height: 296px;
  }
  .rd_ex_mx col.c_ex {
    width: 112px;
  }
  .rd_ex_mx tbody th.nm {
    white-space: normal;
    overflow: visible;
  }
  .rd_ex_mx tbody th.nm .mini_tag {
    display: flex;
    width: fit-content;
    margin: 2px 0 0;
  }
  .liq_sum_top.n3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  /* exchanges.css addresses the eyebrow by id, so the span has to as well */
  .liq_sum_top.n3 .liq_tot > #liq_tot_lab {
    grid-area: 1 / 1 / 2 / 4;
  }
  .liq_sum_top.n3 .liq_tot_v {
    grid-area: 2 / 1 / 3 / 4;
  }
  .liq_sum_top.n3 .liq_split_r:nth-child(2) > span {
    grid-area: 3 / 2;
    margin-top: var(--space-16);
  }
  .liq_sum_top.n3 .liq_split_r:nth-child(2) > b {
    grid-area: 4 / 2;
  }
  .liq_sum_top.n3 .liq_split_r:nth-child(3) > span {
    grid-area: 3 / 3;
    margin-top: var(--space-16);
  }
  .liq_sum_top.n3 .liq_split_r:nth-child(3) > b {
    grid-area: 4 / 3;
  }
}

@media (max-width: 768px) {
  .rd_mx col.c_coin {
    width: 78px;
  }
  .rd_mx thead th,
  .rd_mx tbody td,
  .rd_mx tbody th,
  .rd_ex_mx thead th,
  .rd_ex_mx tbody td,
  .rd_ex_mx tbody th {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .rd_mx .liq_ci {
    display: none;
  }
  .rd_lsr_seg {
    display: none;
  }
  select.rd_lsr_pick {
    display: inline-block;
  }
  .rd_mx .hide-sm,
  .rd_ex_mx .hide-sm {
    display: none;
  }
  .rd_scroll.is-full {
    max-height: min(672px, 70vh);
  }
  .rd_search,
  .rd_tbar .liq_pick {
    width: 100%;
  }
  .rd_tbar .liq_pick_lab {
    display: none;
  }
  .rd_ch_plot {
    height: 248px;
  }
  .rd_ch_read {
    margin-left: 0;
    flex-basis: 100%;
  }
  /* long/short per-coin chart foot: the "can't compare" note starts its own
     line instead of trailing the sampling note */
  .rd_nocmp_sep {
    display: none;
  }
  #rd_nocmp:not(.liq_hidden) {
    display: block;
  }
  /* the note is written to trail " · " (lower-case start in Latin scripts);
     once it opens its own line it takes a capital. No-op for CJK. */
  #rd_nocmp::first-letter {
    text-transform: uppercase;
  }
  .rd_ex_mx col.c_ex {
    width: auto;
  }
  /* three venues a row, two rows (long/short per-coin strip) */
  .liq_strip.wrap3 {
    flex-wrap: wrap;
    row-gap: var(--space-8);
  }
  .liq_strip.wrap3 button {
    flex: 0 0 33.33%;
  }
  .liq_strip.wrap3 button:nth-child(3n + 1) {
    padding-left: 0;
  }
  /* coin.css keeps the caption on phones for `.liq_coin`; same reason here */
  .rd_page .liq_unit_line {
    display: inline;
  }
}