/* Markets page, live blocks.
 * Top categories: the eight sectors of the Categories page — 4 columns on wide screens, 2 on tablets, 1 on phones, so
 * no row is left half empty (the design's auto-fill grid left one card alone on a row). */
@media (width >= 600px) and (width < 1100px) {
  html main [data-wc-cats] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width >= 1100px) {
  html main [data-wc-cats] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Heatmap, light theme: the tiles are deep greens and reds (wc_heat_bg()); the coin name and price under the ticker
 * stay near-white so they keep 4.5:1 (the page script draws its tiles the same way). */
html[data-theme=light] main .wc-hm-nm,
html[data-theme=light] main .wc-hm-pr { color: rgba(255, 255, 255, 0.94); }

/* Market highlights on phones: the coin's name gets the free width (it was squeezed to one letter by fixed columns);
 * the ticker is left out there, the name and logo say which coin it is. */
@media (width < 600px) {
  html main section[data-screen-label="Highlights"] a[data-wc-li] { grid-template-columns: 24px minmax(0, 1fr) auto auto; column-gap: 10px; }
  html main section[data-screen-label="Highlights"] a[data-wc-li] > span:nth-child(2) { min-width: 0; }
  html main section[data-screen-label="Highlights"] a[data-wc-li] > span:nth-child(2) > span { min-width: 0; flex: 1 1 auto; }
  html main section[data-screen-label="Highlights"] a[data-wc-li] > span:nth-child(2) > span > span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html main section[data-screen-label="Highlights"] a[data-wc-li] > span:nth-child(2) > span > span:nth-child(2) { display: none; }
}

/* Phones: the chart's range buttons are at least 36px tall (they were 28px, hard to hit). */
@media (width < 600px) {
  html main [role="tablist"][aria-label="Time range"] button { min-height: 36px; }
}