/** Customer health declaration — vintage studio care note. */

.yoga-health-shell,
.yoga-health-empty,
.yoga-health-order-card {
	--health-paper: var(--color-vellum, #FBF4E8);
	--health-ink: var(--color-ink, #2E2A24);
	--health-soft: var(--color-ink-soft, #5C5347);
	--health-line: var(--border, #DCD2C2);
	color: var(--health-ink);
}

.yoga-health-shell {
	position: relative;
	overflow: clip;
	border: 1px solid var(--health-line);
	border-radius: var(--radius-card-a, 22px 9px 26px 12px);
	background:
		radial-gradient(circle at 95% 5%, rgba(168, 132, 50, 0.11), transparent 28%),
		linear-gradient(145deg, var(--health-paper), var(--color-parchment, #F6F1E7));
	box-shadow: var(--shadow-md, 0 16px 40px rgba(61, 46, 34, 0.11));
}

.yoga-health-shell::after {
	content: "care before class";
	position: absolute;
	inset: 1.2rem 1rem auto auto;
	font: 600 1.05rem var(--font-hand, "Caveat", cursive);
	color: color-mix(in srgb, var(--color-clay, #A34A1E) 65%, transparent);
	transform: rotate(3deg);
	pointer-events: none;
}

.yoga-health-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-lg, 1.5rem);
	padding: clamp(1.4rem, 4vw, 2.5rem);
	border-block-end: 1px dashed var(--health-line);
}

.yoga-health-hero h2,
.yoga-health-order-card h2,
.yoga-health-empty h2 {
	margin: 0.2rem 0 0.55rem;
	font-family: var(--font-display, "Fraunces", Georgia, serif);
	font-weight: 520;
	font-size: clamp(1.75rem, 4vw, 2.65rem);
	line-height: 1.05;
}

.yoga-health-hero p,
.yoga-health-order-card p,
.yoga-health-empty p { margin: 0; max-width: 58ch; color: var(--health-soft); }

.yoga-health-eyebrow {
	display: block;
	font: 700 0.7rem var(--font-mono, "IBM Plex Mono", monospace);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--color-clay, #A34A1E);
}

.yoga-health-icon {
	display: grid;
	place-items: center;
	inline-size: clamp(3.4rem, 8vw, 5rem);
	block-size: clamp(3.4rem, 8vw, 5rem);
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	border-radius: 48% 52% 45% 55% / 58% 42% 58% 42%;
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: var(--color-moss, #4A382A);
	transform: rotate(-2deg);
}

.yoga-health-icon--todo { color: var(--color-clay, #A34A1E); }
.yoga-health-icon--complete { color: var(--color-moss, #4A382A); }
.yoga-health-icon svg { inline-size: 58%; block-size: 58%; }
.yoga-health-icon svg path,
.yoga-health-icon svg circle {
	stroke-dasharray: 70;
	animation: yoga-health-draw 1s var(--ease-settle, ease) both;
}

@keyframes yoga-health-draw { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }

.yoga-health-path {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
	background: rgba(255, 255, 255, 0.28);
}

.yoga-health-path li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font: 650 0.75rem var(--font-body, "Karla", sans-serif);
	color: var(--color-ink-mute, #756853);
}

.yoga-health-path li:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline: calc(1.65rem + 0.5rem) 0.7rem;
	top: 50%;
	border-block-start: 1px dashed var(--health-line);
	z-index: 0;
}

.yoga-health-path li span {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: 1.65rem;
	block-size: 1.65rem;
	border: 1px solid var(--health-line);
	border-radius: 50%;
	background: var(--health-paper);
	font: 600 0.68rem var(--font-mono, monospace);
}

.yoga-health-path li.is-current,
.yoga-health-path li.is-done { color: var(--health-ink); }
.yoga-health-path li.is-current span { border-color: var(--color-clay, #A34A1E); color: var(--color-clay, #A34A1E); box-shadow: 0 0 0 4px rgba(163, 74, 30, 0.09); }
.yoga-health-path li.is-done span { border-color: var(--color-moss, #4A382A); background: var(--color-moss, #4A382A); color: var(--color-parchment, #F7F1E7); }

.yoga-health-saved {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.25rem clamp(1rem, 4vw, 2.5rem) 0;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(90, 60, 44, 0.25);
	border-radius: var(--radius-card-c, 14px 8px 18px 10px);
	background: var(--color-sage-glow, #F1EADF);
	font-size: 0.86rem;
}
.yoga-health-saved span { color: var(--health-soft); }

.yoga-health-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 3vw, 1.5rem);
	padding: clamp(1.3rem, 4vw, 2.5rem);
}

.yoga-health-field { grid-column: 1 / -1; min-width: 0; }
.yoga-health-field--half { grid-column: span 1; }
.yoga-health-field > label,
.yoga-health-field legend {
	display: block;
	margin-block-end: 0.45rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--health-ink);
}
.yoga-health-field b { color: var(--color-clay, #A34A1E); }
.yoga-health-field fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.yoga-health-field small { display: block; margin-block-start: 0.35rem; color: var(--color-ink-mute, #756853); font-size: 0.78rem; }

.yoga-health-field input:not([type="radio"]):not([type="checkbox"]),
.yoga-health-field textarea,
.yoga-health-field select {
	box-sizing: border-box;
	inline-size: 100%;
	border: 1px solid var(--health-line);
	border-radius: 9px 14px 9px 14px;
	background: rgba(255, 253, 248, 0.8);
	color: var(--health-ink);
	font: inherit;
	padding: 0.85rem 0.95rem;
	transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.yoga-health-field textarea { resize: vertical; min-block-size: 7rem; }
.yoga-health-field input:focus,
.yoga-health-field textarea:focus,
.yoga-health-field select:focus {
	outline: none;
	border-color: var(--color-clay, #A34A1E);
	background: #FFFDF8;
	box-shadow: 0 0 0 3px rgba(163, 74, 30, 0.1);
}

.yoga-health-choices { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.yoga-health-choices label { cursor: pointer; }
.yoga-health-choices input { position: absolute; opacity: 0; pointer-events: none; }
.yoga-health-choices span {
	display: inline-flex;
	min-inline-size: 5.5rem;
	justify-content: center;
	padding: 0.62rem 1rem;
	border: 1px solid var(--health-line);
	border-radius: 999px;
	background: rgba(255, 253, 248, 0.7);
	font-weight: 650;
}
.yoga-health-choices input:checked + span { border-color: var(--color-moss, #4A382A); background: var(--color-sage-tint, #EADBCB); color: var(--color-moss, #4A382A); box-shadow: inset 0 0 0 1px var(--color-moss, #4A382A); }
.yoga-health-choices input:focus-visible + span { outline: 2px solid var(--color-clay, #A34A1E); outline-offset: 2px; }

.yoga-health-check {
	display: flex !important;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	border: 1px dashed color-mix(in srgb, var(--color-moss, #4A382A) 40%, var(--health-line));
	border-radius: var(--radius-card-b, 8px 18px 10px 20px);
	background: var(--color-sage-glow, #F1EADF);
	cursor: pointer;
}
.yoga-health-check input { flex: 0 0 auto; inline-size: 1.2rem; block-size: 1.2rem; margin-block-start: 0.1rem; accent-color: var(--color-moss, #4A382A); }

.yoga-health-submit {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px dashed var(--health-line);
}
.yoga-health-submit div { display: grid; }
.yoga-health-submit span { color: var(--health-soft); font-size: 0.8rem; }
.yoga-health-submit button,
.yoga-health-order-card .button {
	display: inline-flex;
	justify-content: center;
	border: 1px solid var(--color-clay, #A34A1E) !important;
	border-radius: 9px 15px 9px 15px !important;
	background: var(--color-clay, #A34A1E) !important;
	color: #FFF9F0 !important;
	font: 750 0.95rem var(--font-body, "Karla", sans-serif) !important;
	padding: 0.82rem 1.35rem !important;
	box-shadow: 4px 4px 0 rgba(61, 46, 34, 0.22);
	cursor: pointer;
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.yoga-health-submit button:hover,
.yoga-health-order-card .button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(61, 46, 34, 0.22); }
.yoga-health-submit button:focus-visible,
.yoga-health-order-card .button:focus-visible { outline: 2px solid var(--color-clay, #A34A1E); outline-offset: 4px; }

.yoga-health-order-card,
.yoga-health-empty {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(1rem, 3vw, 1.7rem);
	margin-block: clamp(1.5rem, 4vw, 2.5rem);
	padding: clamp(1.2rem, 4vw, 2rem);
	border: 1px solid var(--health-line);
	border-radius: var(--radius-card-b, 9px 22px 12px 25px);
	background: linear-gradient(120deg, var(--health-paper), var(--color-sage-glow, #F1EADF));
}
.yoga-health-order-card h2,
.yoga-health-empty h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.yoga-health-order-card .button { margin-block-start: 1rem; }
.yoga-health-order-card small { display: block; margin-block-start: 0.75rem; color: var(--health-soft); }

@media (max-width: 680px) {
	.yoga-health-shell::after { display: none; }
	.yoga-health-hero { align-items: start; }
	.yoga-health-path { grid-template-columns: 1fr; gap: 0.55rem; }
	.yoga-health-path li:not(:last-child)::after { display: none; }
	.yoga-health-fields { grid-template-columns: 1fr; }
	.yoga-health-field--half { grid-column: 1 / -1; }
	.yoga-health-saved,
	.yoga-health-submit { align-items: stretch; flex-direction: column; }
	.yoga-health-submit button { inline-size: 100%; }
	.yoga-health-order-card,
	.yoga-health-empty { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.yoga-health-icon svg path,
	.yoga-health-icon svg circle { animation: none; }
	.yoga-health-submit button,
	.yoga-health-order-card .button { transition: none; }
}