/* Portal rework step 6, page 4: Liquidations. Every rule sits under html[data-flag-rw-s6-liq], which public/flags.js
   sets only while the flag rw-s6-liq is on; flag off, nothing here applies. */

/* Five figures on one line where each gets about 180px (a viewport of 1220px or more); narrower, the page's own grid
   (two or three to a row) keeps them whole. Whatever the width, no text is cut off: a label, a figure or a note under
   it wraps (or breaks inside a long word) in its card instead of running past it with an ellipsis. This holds when
   another flag (rw-s4-sizes, rw-s5-window) changes the room each card gets. */
html[data-flag-rw-s6-liq] .kpis.liq-kpis .kpi :is(.l, .v, .d) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@media (min-width: 1220px) {
  html[data-flag-rw-s6-liq] .kpis.liq-kpis { display: flex; }
  html[data-flag-rw-s6-liq] .kpis.liq-kpis > .kpi { flex: 1 1 0; min-width: 0; }
}
/* Notes no wider than 75 characters: 55ch, because the ch unit is the width of a "0", wider than an average letter
   (75ch measured about 101 characters a line). */
html[data-flag-rw-s6-liq] .view-liquidations .panel-foot { max-width: 55ch; }
/* From 2560px wide (in the page's own text size) the heatmap takes the left half and the liquidation map and Open
   Interest the right half side by side, each as tall as its own content; Long / Short Accounts, when it has data, goes
   under them (the heatmap spans both rows) instead of leaving a hole. With the layout classes running (rw-s4-sizes or
   rw-s5-window) "2560 wide" is layout.js's html.lay-ultra, the window at the chosen Text Size; without them there is no
   Text Size to follow and the window's own width is the measure. */
html[data-flag-rw-s6-liq].lay-ultra .view-liquidations #l-panel { grid-column: span 6; align-self: start; }
html[data-flag-rw-s6-liq].lay-ultra .view-liquidations .dash:has(#l-ls:not([hidden])) #l-panel { grid-row: span 2; }
html[data-flag-rw-s6-liq].lay-ultra .view-liquidations #l-map-p,
html[data-flag-rw-s6-liq].lay-ultra .view-liquidations #l-oi { grid-column: span 3; align-self: start; }
html[data-flag-rw-s6-liq].lay-ultra .view-liquidations #l-ls { align-self: start; }
@media (min-width: 2560px) {
  html[data-flag-rw-s6-liq]:not(.lay-phone, .lay-tablet, .lay-strip, .lay-desk) .view-liquidations #l-panel { grid-column: span 6; align-self: start; }
  html[data-flag-rw-s6-liq]:not(.lay-phone, .lay-tablet, .lay-strip, .lay-desk) .view-liquidations .dash:has(#l-ls:not([hidden])) #l-panel { grid-row: span 2; }
  html[data-flag-rw-s6-liq]:not(.lay-phone, .lay-tablet, .lay-strip, .lay-desk) .view-liquidations #l-map-p,
  html[data-flag-rw-s6-liq]:not(.lay-phone, .lay-tablet, .lay-strip, .lay-desk) .view-liquidations #l-oi { grid-column: span 3; align-self: start; }
  html[data-flag-rw-s6-liq]:not(.lay-phone, .lay-tablet, .lay-strip, .lay-desk) .view-liquidations #l-ls { align-self: start; }
}
/* A phone: the coins stay on one line and scroll inside the switch. */
@media (max-width: 699px) {
  html[data-flag-rw-s6-liq] .view-liquidations .v-ctl { display: flex; min-width: 0; max-width: 100%; }
  html[data-flag-rw-s6-liq] .view-liquidations #l-coins { display: block; min-width: 0; max-width: 100%; }
  html[data-flag-rw-s6-liq] .view-liquidations #l-coins .seg { display: flex; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html[data-flag-rw-s6-liq] .view-liquidations #l-coins .seg::-webkit-scrollbar { display: none; }
  html[data-flag-rw-s6-liq] .view-liquidations #l-coins .seg a { flex: none; }
}
/* By Coin: the columns that fit hide with .c-off; "All Columns" shows them and the table scrolls sideways again. */
html[data-flag-rw-s6-liq] .view-liquidations .tbl .c-off { display: none; }
html[data-flag-rw-s6-liq] .view-liquidations .liq-fit:empty { display: none; }
html[data-flag-rw-s6-liq] .view-liquidations .liq-all {
  padding: 0; border: 0; background: none; color: var(--sky, var(--k-sky-38bdf8)); font: inherit; text-decoration: underline; cursor: pointer;
}
html[data-flag-rw-s6-liq] .view-liquidations .liq-all:focus-visible { outline: 2px solid var(--sky, var(--k-sky-38bdf8)); outline-offset: 2px; border-radius: 4px; }
/* A touch screen: the switch is a 44px target. */
@media (pointer: coarse) {
  html[data-flag-rw-s6-liq] .view-liquidations .liq-all { min-height: 44px; padding-inline: 0.5rem; }
}