/* 大額掛單 (resting large orders, live). Loads after the liquidation-family
   CSS (rd.css()), which supplies the page frame, card, coin row, picker,
   segment and footnote; only what this page adds lives here. Role vars
   (--surface-card / --ink / --border-hairline …) carry both themes, so there
   are no body.dark-mode rules except where the liquidation CSS paints a base
   token this page has to answer on dark. */

.lo_card {
  container-type: inline-size;
}
body.dark-mode .lo_card {
  background-color: var(--surface-card);
}

.lo_sec_head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-bottom: var(--space-8);
}
.lo_sec_head h6 {
  margin: 0;
  color: var(--ink);
}
/* period buttons: the dashboard's .btn_chart_period (chart_setting.css); only placement
   and a 44px hit layer are added here */
.lo_periods {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
  flex-wrap: wrap;
}
.lo_periods .btn_chart_period {
  position: relative;
}
.lo_periods .btn_chart_period::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}

.lo_sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Chart: the dashboard's LWC chart + one canvas overlay for the walls ── */
.lo_chart {
  position: relative;
  height: 360px;
  margin-bottom: var(--space-24);
}
.lo_overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.is-wait .lo_chart .skel,
.lo_chart.is-wait .skel {
  background: var(--surface-card);
}

/* legend = the raw-data pages' .rd_ch_head (raw_data.css); only the swatch is ours */
.is-stale .lo_leg_wall {
  display: none;
}
.rd_ch_head .lo_leg_bar {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 6px;
  border-radius: var(--radius-micro);
  background-color: var(--color-data-2);
  opacity: var(--wall-alpha);
}

/* ── Summary: the liquidation / long-short summary (.liq_sum_top, liquidation/exchanges.css
   and raw_data.css) — total left, ask | bid over a capped split bar at the right edge.
   Only what that recipe doesn't cover lives here. ── */
.lo_head {
  min-height: 64px;
}
.lo_sum[hidden] {
  display: none;
}
/* "N 張" is Han in zh/cn/ja: body font, never the mono of the figure it follows */
/* (raw_data.css sets `.liq_split_r b .liq_pc { font-family: inherit }`, hence the b) */
.lo_sum .lo_n,
.lo_sum .liq_split_r b .lo_n {
  font-family: "Plus Jakarta Sans", "Noto Sans TC", sans-serif;
  font-weight: 400;
}
.lo_sum .liq_tot_v .lo_n {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.lo_sum .liq_split_r b {
  white-space: nowrap;
}
body.dark-mode .lo_card .liq_bar {
  background-color: var(--surface-muted);
}
/* card foot: source + live dot · 更新 HH:mm:ss UTC+8 (liq_sum_foot recipe) */
.lo_foot {
  border-top-color: var(--border-hairline);
}
.lo_src {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}
.lo_livedot[hidden] {
  display: none;
}

/* live dot — canon Components › Command bar (7px green, pulse 2s, reduced
   motion → static). Same recipe as the TAIEX futures page (twstock txf.css);
   the 2s period is the canon's live-dot convention, not a page duration. */
.lo_livedot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background-color: var(--color-green);
  animation: lo-pulse 2s infinite;
  flex: none;
}
@keyframes lo-pulse {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lo_livedot {
    animation: none;
  }
}

p.lo_stale {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
  padding: var(--space-8) 0 var(--space-12);
  font-variant-numeric: tabular-nums;
}
p.lo_stale[hidden] {
  display: none;
}
.lo_staledot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background-color: var(--color-greyMedium);
  flex: none;
}

/* ── Table toolbar: range segment · 30s switch · threshold note. The hairline splits the
   summary (the chart's) from the list's own toolbar, as .liq_sum_foot does ── */
.lo_tbar {
  display: flex;
  align-items: center;
  gap: var(--space-12) var(--space-16);
  flex-wrap: wrap;
  border-top: 1px solid var(--border-hairline);
  margin-top: var(--space-16);
  padding-top: var(--space-4);
  padding-bottom: var(--space-12);
}
.lo_range {
  display: inline-flex;
  align-items: center;
}
.lo_sp {
  flex: 1;
}
.lo_switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  margin: 0;
  padding: 0;
}
.lo_switch .form-check-input {
  float: none;
  margin: 0;
  cursor: pointer;
}
.lo_switch .form-check-label {
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
/* the whole 44px row toggles: the label's hit layer spans the row, input included */
.lo_switch .form-check-label::before {
  content: "";
  position: absolute;
  inset: 0;
}
/* threshold = a note on the table (the liquidation table's .liq_unit_line), not a control;
   that recipe hides itself ≤768 on the liquidation page, this one stays */
/* the pieces sit 4px apart: a 12px space alone read as "1MUSD" */
.lo_tbar .lo_thr {
  display: inline-flex;
  gap: var(--space-4);
  white-space: nowrap;
}
.lo_tbar .lo_thr[hidden] {
  display: none;
}
body.dark-mode .lo_card .liq_seg button[aria-pressed="true"] {
  background-color: var(--surface-muted);
}

/* ── Ladder (Terminal density: 13px, 32px rows, 7·12 cells) ── */
.lo_list {
  position: relative;
  min-height: 180px;
}
.lo_list .skel {
  background: var(--surface-card);
}
.lo_lad {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.lo_lad col.c_px { width: 16%; }
.lo_lad col.c_d { width: 12%; }
.lo_lad col.c_amt { width: 14%; }
.lo_lad col.c_bar { width: 26%; }
.lo_lad col.c_ex { width: 16%; }
.lo_lad col.c_age { width: 16%; }
.lo_lad thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-greyMedium);
  text-align: left;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-hairline);
  white-space: nowrap;
  vertical-align: bottom;
}
.lo_lad tbody td,
.lo_lad tbody th {
  padding: 7px 12px;
  height: 32px;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--ink-2);
  text-align: left;
  font-weight: 400;
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lo_lad tr > *:first-child {
  padding-left: 0;
}
.lo_lad tr > *:last-child {
  padding-right: 0;
}
.lo_lad .r {
  text-align: right;
}
.lo_lad td.px {
  color: var(--ink);
  font-weight: 500;
}
.lo_lad td.amt {
  color: var(--ink);
}
.lo_lad .soft {
  color: var(--color-greyMedium);
}
.lo_lad tbody tr:hover > * {
  background-color: var(--surface-row-hover);
}
.lo_lad tbody tr.grp:hover > *,
.lo_lad tbody tr.mid:hover > *,
.lo_lad tbody tr.more:hover > * {
  background-color: transparent;
}
.lo_lad tr.grp th {
  height: 36px;
  padding-top: var(--space-12);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-greyMedium);
}
.lo_lad tr.grp .sd-a {
  color: var(--color-redText);
}
.lo_lad tr.grp .sd-b {
  color: var(--color-greenText);
}
.lo_lad tr.mid td {
  border-top: 1px solid var(--border-frame);
  border-bottom: 1px solid var(--border-frame);
  height: 36px;
  color: var(--ink);
  font-weight: 600;
}
.lo_lad tr.mid .k {
  font-weight: 500;
  color: var(--color-greyMedium);
  margin-right: var(--space-8);
}
.lo_lad tr.more td {
  color: var(--color-greyMedium);
  white-space: normal;
}
.lo_lad .qb-wrap {
  display: flex;
  align-items: center;
  height: 100%;
}
.lo_lad .qb {
  display: block;
  height: 6px;
  border-radius: var(--radius-micro);
  min-width: 2px;
}
.lo_lad .qb {
  background-color: var(--color-data-2);
}
.lo_lad td.ex .pc {
  color: var(--color-greyMedium);
  margin-left: var(--space-6);
}
.lo_lad .ex-sub {
  display: none;
}
/* 44px hit area on the in-row quiet links, not a taller row */
.lo_list .liq_quiet {
  position: relative;
  margin-left: var(--space-8);
  white-space: nowrap;
}
.lo_list .liq_quiet::before {
  content: "";
  position: absolute;
  inset: -12px 0;
}
body.dark-mode .lo_card .liq_quiet {
  color: var(--link-quiet);
}
body.dark-mode .lo_card .liq_quiet:hover {
  color: var(--link-quiet-hover);
}

p.lo_state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  margin: 0;
  padding: var(--space-32) 0;
  text-align: center;
  font-size: 13px;
  color: var(--color-greyMedium);
}
p.lo_state[hidden] {
  display: none;
}
/* history load failed: sits under the chart that is still showing the previous period */
p.lo_chart_err {
  padding: 0 0 var(--space-16);
}

/* ── Footnote list ── */
.lo_meth {
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--border-hairline);
}
.lo_meth summary {
  min-height: 32px;
}
.lo_meth ul {
  margin: var(--space-8) 0 0;
  padding-left: 18px;
  max-width: 44em;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}
.lo_meth li + li {
  margin-top: var(--space-4);
}

/* ── RWD ── the ladder follows the card, not the viewport: at 769–1300 the
   content column is 588 wide, already too narrow for six columns. */
@media (max-width: 768px) {
  .lo_chart {
    height: 280px;
  }
  .lo_tbar {
    gap: var(--space-4) var(--space-12);
  }
  .lo_tbar .lo_sp {
    display: none;
  }
  .lo_tbar .lo_thr {
    flex-basis: 100%;
    padding-bottom: var(--space-8);
  }
  /* period buttons: their own row under the title, seven equal cells */
  .lo_periods {
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    gap: 0;
  }
  .lo_periods .btn_chart_period {
    flex: 1;
    min-width: 0;
    padding: 0;
    text-align: center;
  }
}
@container (max-width: 640px) {
  .lo_lad col.c_bar,
  .lo_lad .bar,
  .lo_lad col.c_ex,
  .lo_lad .ex {
    display: none;
  }
  /* four columns sized by their content ("+2.99%", "≥ 14m 30s" never clip); the
     slack goes to 價位 and 目前金額 */
  .lo_lad {
    table-layout: auto;
  }
  .lo_lad col.c_px,
  .lo_lad col.c_d,
  .lo_lad col.c_amt,
  .lo_lad col.c_age {
    width: auto;
  }
  .lo_lad tbody td,
  .lo_lad tbody th {
    text-overflow: clip;
  }
  .lo_lad .ex-sub {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    color: var(--color-greyMedium);
  }
  .lo_lad tbody td,
  .lo_lad tbody th,
  .lo_lad thead th {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}