/* styles/crypto.css — widgets for the CRYPTO page */

/* ── Empty state — quiet skeleton when upstream source is unreachable.
 * Doctrine §3 zero-fixture: panels show "AWAITING …" instead of stale seed data. */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; min-height: 80px;
  padding: 12px 14px;
  text-align: center;
  color: var(--gold);
  border: 1px dashed rgba(201,168,106,0.18);
  border-radius: 4px;
  opacity: 0.7;
  gap: 6px;
}
.empty-state__lbl {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--gold-bright);
}
.empty-state__hint {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--txt-3);
  line-height: 1.4;
}


/* depth ladder — overflow:auto so bids/asks scroll inside their flex slot
 * (previously overflow:hidden clipped 139px of rows at 1440×900). */
.depth { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 11px; min-height: 0; height: 100%; }
.depth__side { display: flex; flex-direction: column; gap: 1px; flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; scrollbar-width: thin; scrollbar-color: rgba(201,165,92,0.32) transparent; }
.depth__side::-webkit-scrollbar { width: 3px; }
.depth__side::-webkit-scrollbar-thumb { background: rgba(201,165,92,0.35); border-radius: 2px; }
.depth__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 3px 12px;
  align-items: center;
}
.depth__row--bid .depth__fill { background: linear-gradient(90deg, rgba(52,211,153,0.18), rgba(52,211,153,0.02)); right: 0; }
.depth__row--ask .depth__fill { background: linear-gradient(90deg, rgba(248,113,113,0.18), rgba(248,113,113,0.02)); right: 0; }
.depth__fill { position: absolute; top: 1px; bottom: 1px; right: 0; pointer-events: none; }
.depth__px  { position: relative; font-weight: 600; }
.depth__sz  { position: relative; color: var(--txt-2); text-align: right; min-width: 42px; }
.depth__cum { position: relative; color: var(--txt-3); text-align: right; min-width: 48px; }
.depth__mid {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px;
  background: rgba(201,168,106,0.08);
  border-top: 1px solid rgba(201,168,106,0.18);
  border-bottom: 1px solid rgba(201,168,106,0.18);
  font-size: 10px; letter-spacing: 0.16em;
}
.depth__spread { color: var(--txt-3); }
.depth__mark   { font-size: 14px; color: var(--gold); font-weight: 700; }

/* funding table */
.ftable { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11.5px; }
.ftable th {
  text-align: right;
  padding: 6px 6px;
  font-weight: 500;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--txt-3);
  border-bottom: 1px solid var(--hairline-2);
}
.ftable th:first-child { text-align: left; }
.ftable td { padding: 6px 6px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ftable td.mute { color: var(--txt-3); }
.ftable__v { text-align: left !important; color: var(--txt-1); font-weight: 600; letter-spacing: 0.04em; }
.ftable tr:last-child td { border-bottom: 0; }

/* OI bars by venue */
.oibars { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-mono); font-size: 11px; min-height: 0; }
.oibars__row { display: grid; grid-template-columns: 78px 1fr 64px; gap: 8px; align-items: center; }
.oibars__v   { color: var(--txt-1); font-weight: 600; font-size: 11px; }
.oibars__val { text-align: right; color: var(--gold-soft); font-weight: 600; }
.oibars__bar-wrap { display: flex; height: 10px; background: rgba(255,255,255,0.04); border-radius: 2px; overflow: hidden; }
.oibars__bar--btc { background: linear-gradient(90deg, rgba(201,168,106,0.85), rgba(201,168,106,0.5)); }
.oibars__bar--eth { background: linear-gradient(90deg, rgba(96,165,250,0.7),  rgba(96,165,250,0.4)); }
.oibars__legend { display: flex; gap: 14px; padding-top: 4px; font-size: 9.5px; color: var(--txt-3); letter-spacing: 0.14em; text-transform: uppercase; }
.oibars__legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: middle; border-radius: 1px; }
.oibars__sw--btc { background: rgba(201,168,106,0.85); }
.oibars__sw--eth { background: rgba(96,165,250,0.7); }

/* long/short gauge */
.lsgauge { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-mono); font-size: 9.5px; }
.lsgauge__head { display: flex; justify-content: space-between; align-items: baseline; }
.lsgauge__sym  { font-size: 11.5px; font-weight: 700; color: var(--txt-1); letter-spacing: 0.04em; }
.lsgauge__ratio { color: var(--gold-soft); font-size: 10.5px; font-weight: 600; }
.lsgauge__bar  { display: flex; height: 5px; border-radius: 1.5px; overflow: hidden; background: rgba(255,255,255,0.04); margin: 0; }
.lsgauge__long  { background: linear-gradient(90deg, rgba(52,211,153,0.9),  rgba(52,211,153,0.55)); }
.lsgauge__short { background: linear-gradient(90deg, rgba(248,113,113,0.55), rgba(248,113,113,0.9)); }
.lsgauge__pct  { display: flex; justify-content: space-between; font-size: 9.5px; }

/* on-chain grid */
.onchain { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; min-height: 0; }
.onchain__cell {
  padding: 3px 9px;
  background: rgba(15,13,9,0.96);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 4px;
  display: grid; gap: 2px;
  min-width: 0;
}
.onchain__lbl { font-family: var(--font-mono); font-size: 8.5px; color: var(--txt-3); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onchain__val { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--txt-1); line-height: 1.1; }
.onchain__sub { font-family: var(--font-mono); font-size: 9.5px; color: var(--txt-3); }
.onchain__hint { color: var(--txt-3); }

/* alt movers */
.altmov { font-family: var(--font-mono); font-size: 10.5px; }
.altmov__row {
  display: grid;
  grid-template-columns: 24px 56px 44px 1fr 56px 64px;
  gap: 8px;
  align-items: center;
  padding: 2px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.altmov__row:last-child { border-bottom: 0; }
.altmov__rk  { color: var(--txt-3); font-size: 10px; }
.altmov__sym { font-weight: 700; color: var(--txt-1); letter-spacing: 0.04em; }
.altmov__cap { color: var(--txt-3); font-size: 10.5px; }
.altmov__bar-wrap { height: 6px; background: rgba(255,255,255,0.04); border-radius: 1.5px; overflow: hidden; }
.altmov__bar { height: 100%; }
.altmov__bar.up-bg { background: linear-gradient(90deg, rgba(52,211,153,0.85),  rgba(52,211,153,0.4)); }
.altmov__bar.dn-bg { background: linear-gradient(90deg, rgba(248,113,113,0.85), rgba(248,113,113,0.4)); }
.altmov__chg { text-align: right; font-weight: 600; }
.altmov__vol { text-align: right; font-size: 10px; color: var(--txt-3); }

/* liquidation map */
.liqmap { display: flex; flex-direction: column; gap: 1px; font-family: var(--font-mono); font-size: 10px; }
.liqmap__row { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; gap: 4px; }
.liqmap__side { display: flex; align-items: center; height: 14px; }
.liqmap__side--l { justify-content: flex-end; }
.liqmap__side--s { justify-content: flex-start; }
.liqmap__bar { height: 10px; display: flex; align-items: center; padding: 0 4px; border-radius: 1.5px; min-width: 0; }
.liqmap__bar--l { background: linear-gradient(90deg, rgba(248,113,113,0.4), rgba(248,113,113,0.9)); justify-content: flex-start; color: #fff; }
.liqmap__bar--s { background: linear-gradient(90deg, rgba(52,211,153,0.9),  rgba(52,211,153,0.4)); justify-content: flex-end;   color: #fff; }
.liqmap__v   { font-size: 9px; font-weight: 600; }
.liqmap__px  { text-align: center; color: var(--gold-soft); font-weight: 600; font-size: 11px; }

/* common util */
.up-bg { background: rgba(52,211,153,0.18); }
.dn-bg { background: rgba(248,113,113,0.18); }
.mute  { color: var(--txt-3); }

/* responsive */
@media (max-width: 1100px) {
  .onchain { grid-template-columns: 1fr; }
  .altmov__row { grid-template-columns: 24px 56px 1fr 56px; }
  .altmov__cap, .altmov__vol { display: none; }
}