/*
 * Service pages: the compact variant's hero instruments (VOY-984, spec
 * KB-526 "compact variant": services with no natural measurable view skip
 * the live-surface section, and the instrument sits in the hero).
 *
 * Two instruments share this pair, both on the hub's glass panel
 * (.vy-svc-inst) and both labelled Illustration:
 *
 *   .vy-svc-health    a site-health readout. Each row reads "Label: A to B";
 *                     svc-readout.js counts A to B and flips the row to
 *                     fixed. Without JavaScript the row reads "A to B".
 *   .vy-svc-calendar  an editorial month. The script publishes the rows one
 *                     at a time. Without JavaScript every row reads as
 *                     published.
 *
 * No dither here: the rule is one live surface per screen, and a compact
 * page has none.
 */

.vy-svc-page .vy-svc-health__head,
.vy-svc-page .vy-svc-calendar__head {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--um-500);
}
.vy-svc-page .vy-svc-health__rows,
.vy-svc-page .vy-svc-calendar__rows {
	display: grid;
	gap: 8px;
	padding: 0;
	list-style: none;
}

/* ---- Site-health readout --------------------------------------------------------------- */

.vy-svc-page .vy-svc-health__rows > li:nth-child(n) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 16px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid var(--border-hair);
	border-radius: 6px;
	background: var(--bg-canvas);
	font-size: 14px;
	color: var(--fg-2);
	transition: border-color 300ms var(--svc-ease);
}
.vy-svc-page .vy-svc-health__value {
	font-family: var(--font-mono);
	font-size: 16px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-health__chip {
	min-width: 64px;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--fg-4);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	color: var(--bg-canvas);
	transition: background-color 300ms var(--svc-ease);
}
.vy-svc-page .vy-svc-health__rows > li.is-bad .vy-svc-health__chip { background: var(--accent-bright); }
.vy-svc-page .vy-svc-health__rows > li.is-fixed { border-color: color-mix(in oklab, var(--um-500) 45%, transparent); }
.vy-svc-page .vy-svc-health__rows > li.is-fixed .vy-svc-health__chip { background: var(--um-500); }

/* ---- Editorial calendar ---------------------------------------------------------------- */

.vy-svc-page .vy-svc-calendar__rows > li:nth-child(n) {
	position: relative;
	padding: 14px 16px 14px 44px;
	border: 1px solid var(--border-hair);
	border-radius: 6px;
	background: var(--bg-canvas);
	font-size: 14px;
	line-height: 1.45;
	color: var(--fg-2);
	transition: border-color 300ms var(--svc-ease), color 300ms var(--svc-ease), opacity 300ms var(--svc-ease);
}
/* The status dot: hollow while drafting, solid once published. */
.vy-svc-page .vy-svc-calendar__rows > li::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 19px;
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	border: 2px solid var(--um-500);
	border-radius: 50%;
	background: var(--um-500);
}
.vy-svc-page .vy-svc-calendar.is-js .vy-svc-calendar__rows > li { opacity: 0.5; }
.vy-svc-page .vy-svc-calendar.is-js .vy-svc-calendar__rows > li::before { background: transparent; }
.vy-svc-page .vy-svc-calendar.is-js .vy-svc-calendar__rows > li.is-live {
	opacity: 1;
	border-color: color-mix(in oklab, var(--um-500) 45%, transparent);
	color: var(--fg-1);
}
.vy-svc-page .vy-svc-calendar.is-js .vy-svc-calendar__rows > li.is-live::before { background: var(--um-500); }
.vy-svc-page .vy-svc-calendar__count {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-3);
}

@media (prefers-reduced-motion: reduce) {
	.vy-svc-page .vy-svc-health__rows > li,
	.vy-svc-page .vy-svc-health__chip,
	.vy-svc-page .vy-svc-calendar__rows > li { transition: none; }
}

/* The monthly-report variant (VOY-986, managed hosting): rows count up to
   the month's totals. A report has nothing to fix, so no chip. */
.vy-svc-page .vy-svc-health--report .vy-svc-health__chip { display: none; }
.vy-svc-page .vy-svc-health--report .vy-svc-health__rows > li:nth-child(n) { grid-template-columns: minmax(0, 1fr) auto; }

/* The workflow-run variant (VOY-987, AI Operations): the step where a person
   approves is the point of the page, so it carries the practice colour. */
.vy-svc-page .vy-svc-steps .vy-svc-calendar__rows > li.is-approval.is-live {
	border-color: var(--um-500);
	background: color-mix(in oklab, var(--um-500) 12%, var(--bg-canvas));
}