/* System State — the shared loading / empty / success / error partial (inc/system-state-render.php).
   A single calm, centred block on the raised surface; the mark/spinner is decorative and the copy
   carries the meaning. Reduced-motion collapses the spinner to a static ring (motion.css already
   zeroes durations, but the spin is a keyframe so it is disabled explicitly here too). */

.tmk-state{
	display:grid;
	justify-items:center;
	text-align:center;
	gap:var(--space-3);
	max-width:var(--container-narrow);
	margin:0 auto;
	padding:var(--space-8) var(--space-6);
}

.tmk-state__title{
	margin:0;
	font-family:var(--font-voice);
	font-weight:var(--weight-voice);
	font-size:var(--text-h3);
	line-height:1.05;
	color:var(--color-text-primary);
	text-wrap:balance;
}
.tmk-state__copy{
	margin:0;
	max-width:46ch;
	font-family:var(--font-structure);
	font-size:var(--text-body);
	line-height:1.6;
	color:var(--color-text-secondary);
	text-wrap:pretty;
}
.tmk-state .tmk-cta{margin-top:var(--space-3)}

/* Marks — small tokens of state, drawn from tokens so they inherit theme + concept accents. */
.tmk-state__mark{
	width:44px;height:44px;border-radius:var(--radius-pill);
	display:grid;place-items:center;
	font-family:var(--font-voice);font-size:1.5rem;line-height:1;color:#fff;
}
.tmk-state__mark--empty{background:var(--tatami-300);color:var(--color-text-secondary)}
.tmk-state__mark--empty::before{content:"·"}
.tmk-state__mark--success{background:var(--color-feedback-success)}
.tmk-state__mark--success::before{content:"✓"}
.tmk-state__mark--error{background:var(--color-feedback-error)}
.tmk-state__mark--error::before{content:"!"}

/* Loading — a ring that spins; static under reduced motion. */
.tmk-state__spinner{
	width:38px;height:38px;border-radius:50%;
	border:3px solid var(--tatami-200);
	border-top-color:var(--color-action-primary);
	animation:tmk-state-spin 0.9s linear infinite;
}
@keyframes tmk-state-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
	.tmk-state__spinner{animation:none}
}