/*
 * Service pages: the monitored month (VOY-986, the managed hosting page's
 * live surface; spec KB-526 section 2).
 *
 * Thirty day squares the script builds as buttons, filling in one day at a
 * time as the month is "watched", with a readout ("Day N · …") and a running
 * tally. It is the page's only dither surface: a vy-dither.js field with the
 * comet, where the hovered day lights the field under it. Labelled
 * Illustration.
 *
 * NO PERCENTAGES. The hosting page promises none (its FAQ says so), so the
 * readout speaks in events and load times, never an uptime figure.
 */

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

.vy-svc-page .vy-svc-month__days {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 20px;
}
.vy-svc-page .vy-svc-month__days 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: 11px;
	color: var(--fg-4);
	cursor: crosshair;
	transition: background-color 400ms var(--svc-ease), border-color 200ms var(--svc-ease), color 300ms var(--svc-ease);
}
/* A watched day: quiet 700 tint. A day with updates tested: the 500. */
.vy-svc-page .vy-svc-month__days button.is-watched {
	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-month__days button.is-watched.has-updates {
	border-color: color-mix(in oklab, var(--um-500) 70%, transparent);
	background: color-mix(in oklab, var(--um-500) 28%, transparent);
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-month__days button:is(:hover, :focus-visible, .is-active) {
	border-color: var(--um-500);
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-month__days button:focus-visible { outline: 2px solid var(--um-500); outline-offset: 2px; }

.vy-svc-page .vy-svc-month__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-month__tally {
	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: 767px) {
	.vy-svc-page .vy-svc-month { padding: 16px; }
	.vy-svc-page .vy-svc-month__days { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.vy-svc-page .vy-svc-month__days button { min-height: 44px; font-size: 12px; }
}

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