/* Set gauge tiles for the homepage. Theme: light by default, dark via html[data-theme=dark]. */
	/* Light is the default; add data-theme="dark" to <html> for the dark variant */
	:root { --page: #eee; --tile: #fff; --ink: #111; --line: #222; --side: #fafafa; --sep: #999; --muted: #555; --pill: #111; --pill-ink: #fff; --dim: rgba(255,255,255,.65); --logo-bg: #fff; --bezel: linear-gradient(135deg, #e5d4bc 0%, #b4a595 28%, #efe2cc 52%, #a39584 78%, #d9c9b0 100%); --keyline: #171719; --bezel-h: linear-gradient(to bottom, #efe2cc, #a39584 50%, #e5d4bc); --bezel-v: linear-gradient(to right, #efe2cc, #a39584 50%, #e5d4bc); }
	:root[data-theme="dark"] { --page: #000; --tile: #3b3f45; --ink: #eef0f2; --line: #8a919a; --side: #32363b; --sep: #6b727b; --muted: #a0a6ae; --pill: #eef0f2; --pill-ink: #111; --dim: rgba(59,63,69,.7); --logo-bg: #f4f4f2; }

	/* Tile scales with its own width (cqw), so it looks the same at 3, 4, 5+ across */
	/* --k scales the text and the count column down so the logo box and bar get the extra width */
	.set-cell { container-type: inline-size; --k: 0.68; --u: calc(1cqw * var(--k)); }
	.set-tile { position: relative; display: grid; grid-template-columns: 1fr calc(30 * var(--u)); border: calc(2.4 * var(--u)) solid transparent; border-radius: calc(5 * var(--u)); background: linear-gradient(var(--tile), var(--tile)) padding-box, var(--bezel) border-box; box-shadow: inset 0 0 0 1.5px var(--keyline), 0 2px 6px rgba(0,0,0,.35); color: var(--ink); font-size: calc(5 * var(--u)); }

	.set-left { display: grid; grid-template-rows: auto auto; min-width: 0; }
	.set-top { position: relative; height: calc(24 * var(--u)); border-bottom: max(2px, calc(1.6 * var(--u))) solid transparent; border-image: var(--bezel-h) 1; }
	.set-count { position: absolute; left: 0; width: calc(28 * var(--u)); top: 50%; transform: translateY(-50%); text-align: center; font-size: calc(5 * var(--u)); line-height: 1.05; }
	.set-count b { font-size: calc(15 * var(--u)); font-weight: 400; display: block; }
	.set-logo-wrap { position: absolute; left: calc(28 * var(--u)); right: calc(-3 * var(--u)); top: calc(-7 * var(--u)); height: calc(34.5 * var(--u)); z-index: 2; background: linear-gradient(var(--logo-bg), var(--logo-bg)) padding-box, var(--bezel) border-box; border: calc(1.8 * var(--u)) solid transparent; box-shadow: 0 0 0 1.5px var(--keyline); border-radius: calc(6 * var(--u)); display: flex; align-items: center; justify-content: center; padding: calc(2 * var(--u)) calc(4 * var(--u)); box-sizing: border-box; }
	.set-logo { max-width: 100%; max-height: 100%; object-fit: contain; }

	.set-gauge { position: relative; padding: calc(11.4 * var(--u)) calc(4 * var(--u)) calc(1.5 * var(--u)); }
	.set-pct { position: absolute; left: calc(4 * var(--u)); top: calc(2.2 * var(--u)); font-size: calc(7 * var(--u)); font-weight: 700; line-height: 1; }
	.gauge { position: relative; margin-bottom: calc(6.6 * var(--u)); }
	.gauge-bar { height: calc(5 * var(--u)); min-height: 10px; border-radius: 99px; background: linear-gradient(to right, #e32 0%, #f90 35%, #ec2 60%, #2b5 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
	.gauge-fill-rest { position: absolute; top: 0; right: 0; height: 100%; background: var(--dim); border-radius: 0 99px 99px 0; }
	.gauge-marker { position: absolute; top: 0; width: 0; }
	.gauge-marker::before { content: ""; position: absolute; left: -2px; top: 0; width: 4px; height: calc(6.8 * var(--u)); background: var(--pill); border-radius: 2px; }
	.gauge-label { position: absolute; top: calc(6.6 * var(--u)); left: 0; transform: translateX(var(--shift, -50%)); white-space: nowrap; font-size: calc(4.2 * var(--u)); font-weight: 700; background: var(--pill); color: var(--pill-ink); padding: 0 calc(1.8 * var(--u)); border-radius: 99px; }
	.gauge-pct { text-align: center; font-size: calc(4.8 * var(--u)); font-weight: 700; margin-top: calc(2 * var(--u)); }

	.set-side { border-left: max(2px, calc(1.6 * var(--u))) solid transparent; border-image: var(--bezel-v) 1; padding: calc(3 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)) calc(4.5 * var(--u)); font-size: calc(3.8 * var(--u)); white-space: nowrap; line-height: 1.25; background: var(--side); text-align: right; display: flex; flex-direction: column; justify-content: center; }
	.set-side div { margin-bottom: 0; }
	.side-sep { width: 40%; height: 0; border: 0; border-top: 1px solid var(--sep); margin: calc(2.5 * var(--u)) 0 calc(2.5 * var(--u)) auto; }
	.set-side b { display: block; font-size: calc(6.5 * var(--u)); }

/* Whole tile is a link to that set's table page */
.set-link { display: block; color: inherit; text-decoration: none; }
.set-link:hover .set-tile, .set-link:focus-visible .set-tile { filter: brightness(1.06); transform: translateY(-2px); }
.set-tile { transition: transform .12s, filter .12s; }

/* Tile grid. Tiles are a fixed width; the gap between them is never less than 60px, so as many tiles as
   fit with a 60px gap go on a row, and any leftover width is spread into the gaps (up to 1200px wide).
   Phones (640px and below) use flexible tiles with tight spacing instead. */
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, 220px); justify-content: space-between; column-gap: 60px; row-gap: 102px; max-width: 1200px; margin: 0 auto; padding-top: 24px; }
@media (max-width: 640px) {
	.set-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); justify-content: stretch; gap: 34px 16px; }
}