/*
 * /coins/ — "Browse by category" (owner 03.10: the cards sat compact on the left with empty space on the right).
 * The design's grid used auto-fill with 150px tracks, which leaves empty tracks after the last card on wide screens.
 * The cards now fill the row: 2 columns on phones, 4 from 900 px (2 × 4 for the eight sectors), every
 * card in one row on wide screens. A lone last card on a phone spans the row.
 */
.cAdld4a {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.cAdld4a > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
@media (min-width: 900px) {
	.cAdld4a {
		grid-template-columns: repeat(4, minmax(0, 1fr)); /* eight sectors (Categories page): 2 rows of 4 */
	}
	.cAdld4a > :last-child:nth-child(odd) {
		grid-column: auto;
	}
}
@media (min-width: 1600px) {
	.cAdld4a {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
}
/* wider cards: the coin count stays on one line next to the logos */
.cAdld4a .cNlklBG {
	white-space: nowrap;
}

/* Trending coins on wide screens: two rows of five instead of a sideways row whose scrollbar is hidden (cards 6–10
 * could not be reached with a mouse). Narrower screens keep the swipe row. */
@media (width >= 1100px) {
  html main section[data-screen-label="Trending coins"] div:has(> a ~ a ~ a ~ a ~ a ~ a) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
  html main section[data-screen-label="Trending coins"] div:has(> a ~ a ~ a ~ a ~ a ~ a) > a { width: auto; min-width: 0; }
}

/* Full list, list view on phones (audit 06.10): the name column got ~46 px next to the logo, so names showed one
 * letter ("B.", "E.."). Under 600 px the name and ticker stack, the row padding and gaps shrink and the 24h column
 * narrows, which leaves the name ~80 px at 390 px (long names wrap to two lines). */
@media (width < 600px) {
	html.st-nlist .hUMhwHK { gap: 10px; padding: 0 14px; grid-template-columns: 24px minmax(0, 1fr) minmax(84px, auto) 64px; }
	html.st-nlist .hEFjtRy { gap: 10px; }
	html.st-nlist .hv1WA3Q { flex-direction: column; align-items: flex-start; gap: 1px; }
	html.st-nlist .h33Ul3H { max-width: 100%; font-size: 14px; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
@media (width < 380px) {
	html.st-nlist .h33Ul3H { font-size: 13px; }
	html.st-nlist .hUMhwHK { padding: 0 12px; gap: 8px; }
}

/* List view on wide screens: the market cap cell is a flex box, so its text-align:right did nothing and the value
 * sat glued to the 24h change ("-0.73% $1.73T"). It now lines up on the right like price and change. */
@media (width >= 900px) {
	html.st-nlist .hEoXJ5i { justify-content: flex-end; }
}