/*
 * Public calendar and "how it works" of the cycle engine. Kit tokens (--nx-*) only, with plain fallbacks so the page is
 * readable without the kit. Logical properties; no gradient, blur or shadow. Meaning is never carried by colour alone:
 * every state has a word. Focus uses the browser outline (never removed).
 */
.nrp-cycle {
	display: grid;
	gap: var(--nx-space-6, 1.5rem);
	font: 400 1rem/1.6 var(--nx-font-sans, system-ui, sans-serif);
	color: var(--nx-text-primary, CanvasText);
	max-inline-size: 70rem;
}

.nrp-cycle :where(h2, h3, p, ul, ol, dl) {
	margin: 0;
}

.nrp-cycle__meta {
	color: var(--nx-text-secondary, GrayText);
	font-size: 0.875rem;
}

.nrp-cycle__tablewrap {
	overflow-x: auto;
	border: 1px solid var(--nx-border, currentColor);
}

.nrp-cycle__tablewrap:focus-visible {
	outline: 2px solid var(--nx-focus, Highlight);
	outline-offset: 2px;
}

.nrp-cycle table {
	inline-size: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.nrp-cycle caption {
	text-align: start;
	padding: var(--nx-space-3, 0.75rem);
	font-weight: 600;
}

.nrp-cycle :where(th, td) {
	padding: var(--nx-space-2, 0.5rem) var(--nx-space-3, 0.75rem);
	text-align: start;
	vertical-align: top;
	border-block-start: 1px solid var(--nx-border, currentColor);
}

.nrp-cycle__state {
	display: inline-block;
	padding-inline: var(--nx-space-2, 0.5rem);
	border: 1px solid var(--nx-border, currentColor);
	font-size: 0.8125rem;
}

.nrp-cycle__unset {
	font-style: italic;
}

.nrp-cycle__local[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.nrp-cycle * {
		animation: none !important;
		transition: none !important;
	}
}