/* Per-coin liquidation page (charts/liquidation/coin.html). Loads AFTER
   exchanges.css, which carries every shared component (summary card, tables,
   footnote <details>, Pro card, dark ramp). Only what this page adds lives
   here: the four-window strip, the hourly long/short chart, the 4-column
   table widths and the pending / error shell. New rules take the semantic
   role variables (--ink / --surface-muted / --border-hairline / --chart-*),
   so `body.dark-mode` needs no override for them. */

/* ── Strip: four totals that are the window switch (spec 09-13 §5.1) ──
   Active = black/white top line + bold (canon Interaction states), never a
   fill, never orange; the line sits on the card hairline via margin-top:-1px.
   High-frequency control: no transition. */
.liq_strip {
  display: flex;
  border-top: 1px solid var(--border-hairline);
  margin-top: var(--space-16);
}
.liq_strip button {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  margin-top: -1px;
  padding: var(--space-8) var(--space-12) 0;
  border: 0;
  border-top: 2px solid transparent;
  border-radius: 0;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2);
  text-align: left;
  color: var(--color-greyMedium);
  cursor: pointer;
}
.liq_strip button:first-child {
  padding-left: 0;
}
.liq_strip button:last-child {
  padding-right: 0;
}
.liq_strip button .l {
  font-size: 12px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
/* the figure carries `.mono` in the markup (main.css stack); only size/colour here */
.liq_strip button .v {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.liq_strip button:hover .v {
  color: var(--ink);
}
.liq_strip button[aria-pressed="true"] {
  border-top-color: var(--active-line);
  color: var(--ink);
}
.liq_strip button[aria-pressed="true"] .v {
  color: var(--ink);
  font-weight: 600;
}
.liq_strip button .v.zero {
  color: var(--color-greyMedium);
}

/* ── Hourly long/short chart (spec 09-20 §4) ── */
.liq_ch {
  margin-top: var(--space-12);
}
.liq_ch_head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-greyMedium);
  margin-bottom: var(--space-8);
}
.liq_ch_head .lg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}
.liq_ch_head .lg i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-micro);
}
.liq_ch_head .lg i.r {
  background-color: var(--color-red);
}
.liq_ch_head .lg i.g {
  background-color: var(--color-green);
}
/* The readout line is the chart's precise output (no tooltip on a Terminal
   surface); min-height keeps the row from collapsing before the first value. */
.liq_ch_read {
  margin-left: auto;
  min-height: 18px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.liq_ch_read b {
  font-weight: 500;
  color: var(--ink);
}
.liq_ch_read .rr {
  color: var(--color-redText);
}
.liq_ch_read .gg {
  color: var(--color-greenText);
}
/* 220px plot + 20px hour-label row (the chart's own bottom padding), held by
   CSS so mounting the canvas moves nothing (CLS 0). */
.liq_ch_plot {
  position: relative;
  height: 240px;
}
.liq_ch_plot canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
/* Spinner, not a skeleton: the shape of a chart is unknown until it draws. */
.liq_ch_wait {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -22px 0 0 -22px;
}
.liq_ch.is-ready .liq_ch_wait {
  display: none;
}
.liq_ch_foot {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin-top: var(--space-12);
}

/* ── Per-exchange table: exchange | long | short | total ── */
.liq_coin_mx col.c_ex {
  width: 150px;
}
.liq_coin_mx col.c_tot {
  width: 104px;
}
.liq_coin_mx tbody th.nm .mini_tag {
  margin-left: var(--space-6);
  vertical-align: 2px;
}
p.liq_rowsnote {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-greyMedium);
  margin: var(--space-8) 0 0;
}

/* ── Pending shell (anonymous SSR hit the wall, or the api was down) ── */
.liq_coin_wait {
  display: flex;
  justify-content: center;
  padding: var(--space-48) 0;
}
.liq_coin_wait.liq_hidden {
  display: none;
}
/* a `0` total is one grey step down like every other zero cell */
.liq_coin_mx td.tot.soft {
  color: var(--color-greyMedium);
  font-weight: 400;
}

/* ── RWD — the site-wide two steps only ── */
@media (max-width: 1300px) {
  /* the tabs row already carries the way back (交易所彙總) */
  .liq_back {
    display: none;
  }
  .liq_coin_mx col.c_ex {
    width: 112px;
  }
  .liq_coin_mx col.c_tot {
    width: 92px;
  }
  .liq_ch_plot {
    height: 220px;
  }
  /* 112px holds "Bitfinex" or its stale tag, not both: the tag drops under
     the name (exchanges.css clips th.nm with an ellipsis on desktop). */
  .liq_coin_mx tbody th.nm {
    white-space: normal;
    overflow: visible;
  }
  .liq_coin_mx tbody th.nm .mini_tag {
    display: flex;
    width: fit-content;
    margin: 2px 0 0;
  }
}

@media (max-width: 768px) {
  .liq_coin_mx col.c_ex {
    width: auto;
  }
  .liq_coin_mx col.c_n {
    width: 64px;
  }
  .liq_coin_mx col.c_tot {
    width: 60px;
  }
  .liq_strip button {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .liq_strip button .v {
    font-size: 14px;
  }
  .liq_ch_plot {
    height: 188px;
  }
  .liq_ch_read {
    margin-left: 0;
    flex-basis: 100%;
  }
  /* The sign-in link wraps to its own row: a 44px flex row of its own, no
     pseudo spill, so the coin links' hit areas above keep their full 44. */
  .liq_coins .liq_more {
    flex-basis: 100%;
    position: static;
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .liq_coins .liq_more::before {
    content: none;
  }
  /* exchanges.css hides the unit line on phones for the matrix (its picker
     options carry the unit); here the caption is the only place the unit and
     window are said. */
  .liq_coin .liq_unit_line {
    display: inline;
  }
}