/*
 * Service pages: the map-pack instrument and the service-area rank grid
 * (VOY-976, spec KB-526, the Local SEO short service page).
 *
 * THE INSTRUMENT is the hub instrument's glass panel (.vy-svc-inst) with one
 * view: the query types, then "Your business" climbs from fifth into the top
 * three, under a dashed "top three" cut. svc-mappack.js moves the list item
 * itself, so the counter numbers follow. Without JavaScript the list reads
 * in its server order, fifth place included.
 *
 * THE RANK GRID is the page's only live dither surface: 35 squares the
 * script builds as buttons, a readout ("Rank N · X mi from your address")
 * and a top-three counter. Squares tint by rank band. The field under them is
 * a vy-dither.js field with the comet; the hovered square lights it. Labelled
 * Illustration.
 */

/* ---- The instrument ------------------------------------------------------------------ */

.vy-svc-page .vy-svc-mappack { gap: 14px; }
.vy-svc-page .vy-svc-mappack .vy-svc-inst__query { margin-bottom: 6px; }

.vy-svc-page .vy-svc-mappack__cut {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--um-500);
}

.vy-svc-page .vy-svc-mappack__list > li::before { content: counter(pin); }
/* The cut: a dashed line between third and fourth place. */
.vy-svc-page .vy-svc-mappack__list > li:nth-child(4) { position: relative; margin-top: 18px; }
.vy-svc-page .vy-svc-mappack__list > li:nth-child(4)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	border-top: 1px dashed color-mix(in oklab, var(--um-500) 60%, transparent);
}
.vy-svc-page .vy-svc-mappack__list > li:nth-child(n + 4) { opacity: 0.6; }
.vy-svc-page .vy-svc-mappack__list > li.is-you { opacity: 1; }
.vy-svc-page .vy-svc-mappack__list > li.is-you:nth-child(-n + 3) {
	box-shadow: 0 0 0 1px var(--um-500), 0 12px 40px -16px var(--um-500);
}

/* ---- The rank grid ------------------------------------------------------------------- */

.vy-svc-page .vy-svc-track {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}
.vy-svc-page .vy-svc-track__copy .vy-svc-h2 { margin-bottom: 24px; }

.vy-svc-page .vy-svc-rankgrid {
	position: relative;
	isolation: isolate;
	padding: 24px;
	border: 1px solid var(--border-1);
	border-radius: 6px;
	background: var(--bg-panel);
}
.vy-svc-page .vy-svc-rankgrid > .vy-dither {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	border-radius: inherit;
}

.vy-svc-page .vy-svc-rankgrid__squares {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 20px;
}
.vy-svc-page .vy-svc-rankgrid__squares button {
	aspect-ratio: 1;
	min-width: 0;
	padding: 0;
	border: 1px solid var(--border-1);
	border-radius: 4px;
	background: color-mix(in oklab, var(--bg-canvas) 70%, transparent);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--fg-4);
	cursor: crosshair;
	transition: background-color 400ms var(--svc-ease), border-color 200ms var(--svc-ease), color 400ms var(--svc-ease);
}
/* Rank bands: top three in the 500, four to ten in the 700. */
.vy-svc-page .vy-svc-rankgrid__squares button.is-top {
	border-color: color-mix(in oklab, var(--um-500) 70%, transparent);
	background: color-mix(in oklab, var(--um-500) 30%, transparent);
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-rankgrid__squares button.is-mid {
	border-color: color-mix(in oklab, var(--um-700) 70%, transparent);
	background: color-mix(in oklab, var(--um-700) 22%, transparent);
	color: var(--fg-2);
}
.vy-svc-page .vy-svc-rankgrid__squares button.is-home { outline: 2px solid var(--fg-1); outline-offset: -4px; }
.vy-svc-page .vy-svc-rankgrid__squares button:is(:hover, :focus-visible, .is-active) {
	border-color: var(--um-500);
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-rankgrid__squares button:focus-visible { outline: 2px solid var(--um-500); outline-offset: 2px; }
.vy-svc-page .vy-svc-rankgrid__squares button.is-better { animation: vy-svc-better 900ms var(--svc-ease); }
@keyframes vy-svc-better {
	30% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--um-500) 45%, transparent); }
}

.vy-svc-page .vy-svc-rankgrid__readout {
	min-height: 1.5em;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-rankgrid__count {
	margin-top: 6px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--um-500);
}

@media (max-width: 1023px) {
	.vy-svc-page .vy-svc-track { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 767px) {
	.vy-svc-page .vy-svc-rankgrid { padding: 16px; }
	.vy-svc-page .vy-svc-rankgrid__squares {
		grid-template-columns: repeat(7, 40px);
		gap: 6px;
		justify-content: center;
	}
	.vy-svc-page .vy-svc-rankgrid__squares button { width: 40px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.vy-svc-page .vy-svc-rankgrid__squares button { transition: none; }
	.vy-svc-page .vy-svc-rankgrid__squares button.is-better { animation: none; }
}