/**
 * Public booking calendar — premium "warm retreat" redesign (v2).
 *
 * Card-based week grid + list view, category-coded session cards,
 * slide-over/bottom-sheet booking panel, pass-or-pay cards.
 * Handles 5–10+ classes per day with full-height views and no inner scroll.
 * Themed via tokens.css (warm earthy palette).
 */

.yoga-calendar {
	font-family: var(--font-body);
	color: var(--color-ink);
	max-width: 78rem;
	margin-inline: auto;
	--yc-radius: 1.25rem;
	--yc-card-bg: #FBF7EF;
	--yc-card-border: #E6DCC9;
	--yc-line: #DCD2C2;
}

/* ================= Toolbar ================= */

.yoga-cal__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--space-lg);
}

.yoga-cal__nav {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	background: var(--yc-card-bg);
	border: 1px solid var(--yc-card-border);
	border-radius: 999px;
	padding: 0.3rem;
	box-shadow: 0 2px 10px rgba(61, 46, 34, 0.06);
}

.yoga-cal__range {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 600;
	min-width: 13ch;
	text-align: center;
	color: var(--color-ink);
}

.yoga-cal__btn {
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--color-ink);
	padding: 0.55rem 0.95rem;
	cursor: pointer;
	transition: background-color var(--dur-quick) var(--ease-settle), color var(--dur-quick), transform var(--dur-quick);
}

.yoga-cal__btn:hover { background: var(--color-sage-tint); }
.yoga-cal__btn:active { transform: scale(0.96); }
.yoga-cal__btn[aria-pressed="true"] {
	background: var(--color-moss);
	color: var(--color-parchment);
	box-shadow: 0 4px 12px rgba(61, 46, 34, 0.25);
}

.yoga-cal__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
}

.yoga-cal__filters select {
	font: inherit;
	font-size: var(--text-sm);
	border: 1px solid var(--yc-card-border);
	background: var(--yc-card-bg);
	color: var(--color-ink);
	padding: 0.6rem 2rem 0.6rem 0.9rem;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(61, 46, 34, 0.05);
	transition: border-color var(--dur-quick), box-shadow var(--dur-quick);
}
.yoga-cal__filters select:hover { border-color: var(--color-moss); }
.yoga-cal__filters select:focus-visible { outline: 2px solid var(--color-clay); outline-offset: 2px; }

.yoga-cal__filters label.yoga-cal__check {
	display: inline-flex;
	gap: 0.45em;
	align-items: center;
	font-size: var(--text-sm);
	cursor: pointer;
	background: var(--yc-card-bg);
	border: 1px solid var(--yc-card-border);
	border-radius: 999px;
	padding: 0.55rem 0.9rem;
	box-shadow: 0 2px 10px rgba(61, 46, 34, 0.05);
}
.yoga-cal__check input { accent-color: var(--color-clay); }

/* ================= Loading: breath-rhythm line ================= */

.yoga-cal__loading {
	display: grid;
	place-items: center;
	padding: var(--space-xl) 0;
	color: var(--color-walnut, var(--color-moss));
}

.yoga-breath-line { stroke: currentColor; fill: none; stroke-width: 1.5; }

.yoga-breath-line path {
	stroke-dasharray: 240;
	stroke-dashoffset: 240;
	animation: yoga-breath var(--breath) ease-in-out infinite alternate;
}

@keyframes yoga-breath {
	from { stroke-dashoffset: 240; }
	to   { stroke-dashoffset: 0; }
}

.yoga-cal__loading-label {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	margin-block-start: var(--space-xs);
	color: var(--color-ink-mute, #756853);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ================= Week grid ================= */

.yoga-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--space-xs);
	align-items: start;
}

.yoga-cal__day-head {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-ink-mute, #756853);
	padding-block-end: var(--space-2xs);
	margin-block-end: var(--space-2xs);
	border-block-end: 1px solid var(--yc-line);
	text-align: center;
}

.yoga-cal__day-head.is-today {
	color: var(--color-clay);
	border-block-end-color: var(--color-clay);
	border-block-end-width: 2px;
}

/* Day column: expands to fit ALL classes of the week (no inner scroll). */
.yoga-cal__day {
	display: grid;
	gap: var(--space-xs);
	align-content: start;
}

/* List view + mobile: day sections instead of columns */
.yoga-calendar[data-view="list"] .yoga-cal__grid { grid-template-columns: 1fr; }
.yoga-calendar[data-view="list"] .yoga-cal__day {
	max-block-size: none;
	mask-image: none;
	-webkit-mask-image: none;
	overflow: visible;
}
.yoga-calendar[data-view="list"] .yoga-cal__day-head { text-align: left; font-size: var(--text-sm); }

/* ================= Session card ================= */

.yoga-card {
	--yc-accent: var(--color-moss);
	position: relative;
	text-align: left;
	width: 100%;
	font: inherit;
	background: var(--yc-card-bg);
	border: 1px solid var(--yc-card-border);
	border-inline-start: 3px solid var(--yc-accent);
	border-radius: 1rem;
	padding: var(--space-sm) var(--space-sm) var(--space-sm) calc(var(--space-sm) + 2px);
	cursor: pointer;
	display: grid;
	gap: 0.3rem;
	box-shadow: 0 2px 8px rgba(61, 46, 34, 0.05);
	transition: transform var(--dur-quick) var(--ease-settle),
	            box-shadow var(--dur-quick) var(--ease-settle),
	            border-color var(--dur-quick),
	            background-color var(--dur-quick);
}

/* Category colour-coding (earthy; plum sparingly for retreats) */
.yoga-card[data-category="yoga"]     { --yc-accent: #7A5C3E; }
.yoga-card[data-category="strength"] { --yc-accent: #4A3A2C; }
.yoga-card[data-category="sauna"]    { --yc-accent: #B0562F; }
.yoga-card[data-category="retreat"]  { --yc-accent: var(--color-plum); }

.yoga-card:hover {
	background: #FFFDF8;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(61, 46, 34, 0.12);
	border-color: var(--yc-accent);
}
.yoga-card:active { transform: translateY(0); }

.yoga-card__time {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--yc-accent);
	letter-spacing: 0.02em;
}

.yoga-card__title {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-ink);
	position: relative;
	width: fit-content;
}

/* Self-drawing underline on hover/focus */
.yoga-card__title::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -2px;
	height: 1.5px;
	background: var(--color-clay);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-panel) var(--ease-settle);
}

.yoga-card:hover .yoga-card__title::after,
.yoga-card:focus-visible .yoga-card__title::after { transform: scaleX(1); }

.yoga-card__meta { font-size: 0.82rem; color: var(--color-ink-soft, #5C5347); }

.yoga-card__spots {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-success);
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-block-start: 0.15rem;
}
.yoga-card__spots::before {
	content: "";
	inline-size: 0.45rem;
	block-size: 0.45rem;
	border-radius: 50%;
	background: currentColor;
}
.yoga-card__spots.is-low { color: #7C6424; }
.yoga-card.is-full { opacity: 0.55; cursor: default; box-shadow: none; }
.yoga-card.is-full:hover { transform: none; border-color: var(--yc-card-border); }
.yoga-card.is-full .yoga-card__spots { color: var(--color-error); }

/* Past sessions: faded, unclickable, quietly present */
.yoga-card.is-past {
	opacity: 0.45;
	cursor: default;
	box-shadow: none;
	filter: saturate(0.6);
}
.yoga-card.is-past:hover { transform: none; border-color: var(--yc-card-border); background: var(--yc-card-bg); }
.yoga-card.is-past .yoga-card__spots { color: var(--color-ink-mute, #756853); }
.yoga-card.is-past .yoga-card__title::after { content: none; }

/* Scroll reveal */
.yoga-reveal { opacity: 0; translate: 0 12px; transition: opacity 600ms var(--ease-settle), translate 600ms var(--ease-settle); }
.yoga-reveal.is-in { opacity: 1; translate: 0 0; }

.yoga-cal__empty {
	padding: var(--space-xl);
	text-align: center;
	color: var(--color-ink-mute, #756853);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-style: italic;
}

/* ================= Month view ================= */

.yoga-cal__month {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1px;
	background: var(--yc-line);
	border: 1px solid var(--yc-line);
	border-radius: var(--yc-radius);
	overflow: clip;
}

.yoga-cal__month-cell {
	background: var(--color-parchment);
	min-height: 8rem;
	padding: var(--space-2xs);
	display: grid;
	gap: var(--space-2xs);
	align-content: start;
	font-size: var(--text-sm);
}

.yoga-cal__month-cell.is-out { background: var(--color-linen, #F0E8DA); }
.yoga-cal__month-cell.is-out .yoga-cal__month-cell-head { color: var(--color-ink-soft, #5C5347); }

.yoga-cal__month-cell-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--color-ink-mute, #756853);
}

.yoga-cal__month-cell-head.is-today { color: var(--color-clay); font-weight: 600; }

.yoga-cal__month-card {
	--yc-accent: var(--color-moss);
	text-align: left;
	background: var(--yc-card-bg);
	border: 1px solid var(--yc-card-border);
	border-inline-start: 2px solid var(--yc-accent);
	border-radius: 0.5rem;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	font: inherit;
	font-size: 0.75rem;
	display: grid;
	gap: 1px;
	width: 100%;
	transition: background-color var(--dur-quick);
}
.yoga-cal__month-card[data-category="yoga"]     { --yc-accent: #7A5C3E; }
.yoga-cal__month-card[data-category="strength"] { --yc-accent: #4A3A2C; }
.yoga-cal__month-card[data-category="sauna"]    { --yc-accent: #B0562F; }
.yoga-cal__month-card[data-category="retreat"]  { --yc-accent: var(--color-plum); }

.yoga-cal__month-card:hover { background: #FFFDF8; }
.yoga-cal__month-card.is-full { opacity: 0.5; cursor: default; }
.yoga-cal__month-card.is-past { opacity: 0.4; cursor: default; filter: saturate(0.6); }
.yoga-cal__month-card.is-past:hover { background: var(--yc-card-bg); }

.yoga-cal__month-card-time { font-family: var(--font-mono); color: var(--yc-accent); }
.yoga-cal__month-card-title { font-family: var(--font-display); font-size: 0.875rem; line-height: 1.1; }

.yoga-cal__month-more {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--color-clay);
	background: none;
	border: none;
	padding: 0.25rem 0;
	cursor: pointer;
	text-align: left;
}
.yoga-cal__month-more:hover { text-decoration: underline; }

@media (max-width: 720px) {
	.yoga-cal__month-cell { min-height: 5rem; padding: 2px; font-size: 0.75rem; }
	.yoga-cal__month-card-title { display: none; }
}

/* ================= Booking panel ================= */

.yoga-panel__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(42, 31, 22, 0.45);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity var(--dur-panel) var(--ease-settle);
	z-index: 999;
}

.yoga-panel__backdrop.is-open { opacity: 1; }

.yoga-panel {
	position: fixed;
	z-index: 1000;
	background: var(--color-parchment);
	color: var(--color-ink);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-lg);
	overflow-y: auto;
	box-shadow: -24px 0 70px rgba(42, 31, 22, 0.25);
	inset-block: 0;
	inset-block-start: var(--adminbar-h, 0px);
	inset-inline-end: 0;
	width: min(30rem, 94vw);
	translate: 105% 0;
	transition: translate var(--dur-panel) var(--ease-settle);
}

/* WP admin bar compensation for logged-in viewers (32px desktop / 46px mobile). */
body.admin-bar { --adminbar-h: 32px; }
@media (max-width: 782px) {
	body.admin-bar { --adminbar-h: 46px; }
}

.yoga-panel.is-open { translate: 0 0; }

@media (max-width: 719px) {
	.yoga-panel {
		inset-inline: 0;
		inset-block-end: 0;
		inset-block-start: auto;
		width: auto;
		max-height: 88vh;
		translate: 0 105%;
		border-radius: 1.5rem 1.5rem 0 0;
		box-shadow: 0 -18px 60px rgba(42, 31, 22, 0.3);
	}
	.yoga-panel.is-open { translate: 0 0; }
}

.yoga-panel__close {
	position: absolute;
	inset-block-start: var(--space-sm);
	inset-inline-end: var(--space-sm);
	background: var(--color-sage-tint);
	border: none;
	border-radius: 50%;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	display: grid;
	place-items: center;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-ink);
	transition: background-color var(--dur-quick), transform var(--dur-quick);
}
.yoga-panel__close:hover { background: var(--color-beige, #E6DCC9); transform: rotate(90deg); }

.yoga-panel__title {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: 1.15;
	margin: 0;
	padding-inline-end: 2.5rem;
}
.yoga-panel__when { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-clay); }
.yoga-panel__who { margin: 0; color: var(--color-ink-soft, #5C5347); }
.yoga-panel__facts {
	font-size: var(--text-sm);
	color: var(--color-ink-mute, #756853);
	display: grid;
	gap: var(--space-2xs);
	padding-block-start: var(--space-xs);
	border-block-start: 1px solid var(--yc-line);
}

.yoga-panel__credits { font-family: var(--font-mono); font-size: var(--text-sm); color: #7C6424; }
.yoga-panel__guest-note {
	padding: 0.65rem 0.8rem;
	border-inline-start: 3px solid var(--color-brass, #A88432);
	background: var(--color-sage-glow, #F1EADF);
	border-radius: 0 0.65rem 0.65rem 0;
	font-size: var(--text-sm);
	color: var(--color-ink-soft, #5C5347);
}

/* Payment method cards */
.yoga-pay { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }

@media (max-width: 420px) {
	.yoga-pay { grid-template-columns: 1fr; }
}

.yoga-pay__card {
	font: inherit;
	text-align: left;
	background: var(--yc-card-bg);
	border: 2px solid var(--yc-card-border);
	border-radius: 1rem;
	padding: var(--space-md);
	cursor: pointer;
	display: grid;
	gap: var(--space-2xs);
	position: relative;
	transition: border-color var(--dur-quick) var(--ease-settle), box-shadow var(--dur-quick), background-color var(--dur-quick);
}
.yoga-pay__card:hover:not(:disabled) { border-color: var(--color-taupe, #B4A893); }
.yoga-pay__card:focus-visible {
	outline: 2px solid var(--color-clay);
	outline-offset: 2px;
}

.yoga-pay__card[aria-pressed="true"] {
	border-color: var(--color-clay);
	background: #FFFDF8;
	box-shadow: 0 8px 24px rgba(163, 74, 30, 0.14);
}
.yoga-pay__card[aria-pressed="true"]::after {
	content: "";
	position: absolute;
	inset-block-start: var(--space-sm);
	inset-inline-end: var(--space-sm);
	inline-size: 1.15rem;
	block-size: 1.15rem;
	border-radius: 50%;
	background: var(--color-clay);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F1E7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E");
	background-size: 0.7rem;
	background-position: center;
	background-repeat: no-repeat;
}
.yoga-pay__card:disabled { opacity: 0.6; cursor: not-allowed; }

/* Name + "Recommended" badge share one flex row — the badge sits AFTER the
 * text with a guaranteed gap instead of floating over it (no collisions at
 * any popup width; the row wraps before the badge can ever overlap). */
.yoga-pay__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.yoga-pay__name { font-weight: 600; font-size: var(--text-base); }
.yoga-pay__detail { font-size: var(--text-sm); color: var(--color-ink-mute, #756853); }
.yoga-pay__detail.is-owned { color: #7C6424; font-family: var(--font-mono); font-weight: 500; }
.yoga-pay__price { font-family: var(--font-mono); font-size: var(--text-base); }

/* "Recommended" ribbon — only on an enabled pass card (the default). */
.yoga-pay__rec {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-clay);
	background: rgba(163, 74, 30, 0.10);
	padding: 0.12rem 0.5rem;
	border-radius: 999px;
	line-height: 1.4;
	white-space: nowrap;
	translate: 0 -0.1em; /* optically centre against the heavier title */
}

.yoga-pay__passes { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); grid-column: 1 / -1; }
.yoga-pay__passes select {
	font: inherit;
	padding: var(--space-2xs) var(--space-xs);
	border: 1px solid var(--yc-card-border);
	border-radius: 0.5rem;
	background: var(--color-parchment);
}
.yoga-pay__passes select:focus-visible { outline: 2px solid var(--color-clay); outline-offset: 2px; }
.yoga-panel__account-link { grid-column: 1 / -1; justify-self: start; }

/* The one clay CTA */
.yoga-panel__cta {
	font: inherit;
	font-weight: 600;
	font-size: var(--text-base);
	background: linear-gradient(135deg, var(--color-clay) 0%, #BC6134 100%);
	color: var(--color-parchment);
	border: none;
	border-radius: 999px;
	padding: 1rem var(--space-md);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	box-shadow: 0 10px 30px rgba(163, 74, 30, 0.30);
	transition: transform var(--dur-quick) var(--ease-settle), box-shadow var(--dur-quick);
}
.yoga-panel__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(163, 74, 30, 0.38); }
.yoga-panel__cta:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.yoga-panel__error { color: var(--color-error); font-size: var(--text-sm); margin: 0; }

.yoga-panel__done { display: grid; gap: var(--space-sm); padding-block: var(--space-md); text-align: center; }
.yoga-panel__done-title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-success); margin: 0; }
.yoga-panel__link { color: var(--color-clay); font-size: var(--text-sm); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.yoga-panel, .yoga-panel__backdrop, .yoga-card, .yoga-reveal, .yoga-panel__close { transition: none; }
	.yoga-reveal { opacity: 1; translate: 0 0; }
	.yoga-breath-line path { animation: none; stroke-dashoffset: 0; }
}

/* ================= Mobile ================= */

@media (max-width: 720px) {
	.yoga-cal__toolbar { flex-direction: column; align-items: stretch; }
	.yoga-cal__nav { justify-content: space-between; }
	.yoga-cal__filters { justify-content: center; }

	.yoga-cal__grid { grid-template-columns: 1fr; }
	.yoga-cal__day {
		max-block-size: none;
		mask-image: none;
		-webkit-mask-image: none;
		overflow: visible;
	}
	.yoga-cal__day-head { text-align: left; font-size: var(--text-sm); }

	.yoga-card { padding: var(--space-md); min-height: 44px; }
}

@media (max-width: 480px) {
	.yoga-cal__range { font-size: var(--text-base); min-width: auto; }
	.yoga-cal__filters select { font-size: 0.8rem; }
	.yoga-panel { padding: var(--space-md); }
}

/* ============================================================
 * Time-grid week view (Wix-style calendar)
 * Day columns × hour rows; axis = first→last class of the week.
 * ============================================================ */

.yoga-tg { --hour-h: 72px; }

.yoga-tg__head {
	display: grid;
	grid-template-columns: 56px repeat(7, minmax(0, 1fr));
	border-block-end: 1px solid var(--yc-card-border, #E6DECF);
}
.yoga-tg__axis-head { border-inline-end: 1px solid var(--yc-card-border, #E6DECF); }
.yoga-tg__day-head {
	padding: var(--space-xs, 8px) 4px;
	text-align: center;
	font-family: var(--font-mono, 'IBM Plex Mono', monospace);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-ink-mute, #756853);
	border-inline-end: 1px solid var(--yc-card-border, #E6DECF);
}
.yoga-tg__day-head.is-today { color: var(--color-clay, #A34A1E); font-weight: 700; }

.yoga-tg__scroll { overflow: visible; }

/* --- Responsive week grid (admin) ---
 * On narrow screens the 7×min-120px columns cannot fit, so the grid scrolls
 * sideways INSIDE .yoga-tg__scroll (swipe to reach later days) instead of
 * being cut off with no way to reach them. The hour axis stays sticky.
 * contain:paint keeps the wide grid from panning the whole page. */
@media (max-width: 1024px) {
	.yoga-admin-tg .yoga-tg__scroll {
		overflow-x: auto;
		overflow-y: hidden;
		contain: paint;
		-webkit-overflow-scrolling: touch;
	}
	.yoga-admin-tg .yoga-tg__head,
	.yoga-admin-tg .yoga-tg__body {
		/* fixed column plan: axis + 7 comfortably-wide days = 968px,
		 * horizontally scrollable within the viewport */
		grid-template-columns: 44px repeat(7, minmax(132px, 1fr)) !important;
		min-width: 968px;
		width: max-content;
	}
	.yoga-admin-tg .yoga-tg__axis-head,
	.yoga-admin-tg .yoga-tg__axis { position: sticky; left: 0; }
	.yoga-admin-tg .yoga-tg__day-head { font-size: 0.7rem; padding: 6px 2px; }
	/* Cards: keep text legible on the 132px columns. Overlap lanes (3-wide
	 * splits) would squeeze cards to ~40px — below legibility. Give every
	 * card a 104px minimum so the title fits; overlapping lanes stack with
	 * the active one raised (the click menu reveals full details). */
	.yoga-admin-tg .yoga-tg__card { font-size: 0.66rem; padding: 3px 4px; min-width: 104px; z-index: 1; }
	.yoga-admin-tg .yoga-tg__card:hover { z-index: 5; }
}

.yoga-tg__body {
	display: grid;
	grid-template-columns: 56px repeat(7, minmax(0, 1fr));
	position: relative;
}

/* Hour axis (sticky when scrolling sideways) */
.yoga-tg__axis {
	position: sticky;
	left: 0;
	z-index: 3;
	background: var(--yc-bg, #FFFDF8);
	border-inline-end: 1px solid var(--yc-card-border, #E6DECF);
}
.yoga-tg__hour {
	position: absolute;
	inset-inline-end: 6px;
	transform: translateY(-50%);
	font-family: var(--font-mono, 'IBM Plex Mono', monospace);
	font-size: 0.68rem;
	color: var(--color-ink-mute, #756853);
	background: var(--yc-bg, #FFFDF8);
	padding-inline: 2px;
}

/* Day columns with hourly grid lines */
.yoga-tg__col {
	position: relative;
	border-inline-end: 1px solid var(--yc-card-border, #E6DECF);
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent calc(var(--hour-h) - 1px),
		var(--yc-card-border, #E6DECF) calc(var(--hour-h) - 1px),
		var(--yc-card-border, #E6DECF) var(--hour-h)
	);
	background-size: 100% var(--hour-h);
}
.yoga-tg__col.is-today { background-color: rgba(163, 74, 30, 0.03); }

.yoga-tg__now {
	position: absolute;
	inset-inline: 0;
	border-block-start: 2px solid var(--color-clay, #A34A1E);
	z-index: 2;
	pointer-events: none;
}
.yoga-tg__now::before {
	content: "";
	position: absolute;
	inset-inline-start: -3px;
	top: -4px;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--color-clay, #A34A1E);
}

/* Session blocks — category-tinted, Wix-like */
.yoga-tg__card {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 4px 6px;
	border: 1px solid transparent;
	border-inline-start: 3px solid var(--cat, #7A5C3E);
	border-radius: 6px;
	background: var(--cat-bg, #F3EDE2);
	color: var(--color-ink, #2E2A26);
	font: inherit;
	text-align: start;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	z-index: 1;
}
.yoga-tg__card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(46, 42, 38, 0.14); z-index: 4; }
.yoga-tg__card:focus-visible { outline: 2px solid var(--color-clay, #A34A1E); outline-offset: 1px; z-index: 4; }

.yoga-tg__card.cat-yoga     { --cat: #6E563D; --cat-bg: #EFE8DB; }
.yoga-tg__card.cat-strength { --cat: #6B4C38; --cat-bg: #F0E4DC; }
.yoga-tg__card.cat-sauna    { --cat: #A34A1E; --cat-bg: #F8E8DE; }
.yoga-tg__card.cat-retreat  { --cat: #5D4A5E; --cat-bg: #ECE4EF; }

.yoga-tg__card-time {
	font-family: var(--font-mono, 'IBM Plex Mono', monospace);
	font-size: 0.64rem;
	letter-spacing: 0.02em;
	color: var(--color-ink-mute, #756853);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.yoga-tg__card-title {
	font-weight: 600;
	font-size: 0.8rem;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: var(--title-lines, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.yoga-tg__card-meta {
	font-size: 0.68rem;
	color: var(--color-ink-mute, #756853);
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Tiny (very short) sessions: no meta, single title line, smaller type */
.yoga-tg__card.is-tiny .yoga-tg__card-meta,
.yoga-tg__card.is-nometa .yoga-tg__card-meta { display: none; }
.yoga-tg__card.is-tiny .yoga-tg__card-title { font-size: 0.72rem; }
.yoga-tg__card.is-tiny .yoga-tg__card-time { font-size: 0.58rem; }

/* Narrow (side-by-side) lanes: shrink type so more title fits the column.
 * The card is its own size container — lane-split cards are narrower than the day column. */
.yoga-tg__card { container-type: inline-size; }
@container (max-width: 150px) {
	.yoga-tg__card-title { font-size: 0.7rem; -webkit-line-clamp: 5; }
	.yoga-tg__card-time  { font-size: 0.56rem; }
}
@container (max-width: 96px) {
	.yoga-tg__card-title { font-size: 0.62rem; -webkit-line-clamp: 6; }
	.yoga-tg__card-time  { font-size: 0.52rem; }
	.yoga-tg__card-meta  { font-size: 0.58rem; }
}
/* Ultra-narrow: two overlapping sessions inside one phone-width day column.
   A smaller face fits MORE characters per line, so long names need fewer
   lines and stop clipping. */
@container (max-width: 72px) {
	.yoga-tg__card-title { font-size: 0.55rem; -webkit-line-clamp: 6; line-height: 1.15; }
	.yoga-tg__card-time  { font-size: 0.48rem; }
}

/* States */
.yoga-tg__card.is-full { opacity: 0.55; cursor: default; }
.yoga-tg__card.is-full:hover { transform: none; box-shadow: none; }
.yoga-tg__card.is-past { opacity: 0.4; cursor: default; filter: saturate(0.6); }
.yoga-tg__card.is-past:hover { transform: none; box-shadow: none; }

/* Compact screens use the stacked week agenda rendered by calendar.js. */
@media (max-width: 900px) {
	.yoga-cal__toolbar,
	.yoga-cal__filters { align-items: stretch; }
	.yoga-cal__filters select { flex: 1 1 10rem; min-inline-size: 0; }
}

.yoga-week-agenda { display: grid; gap: var(--space-md, 16px); }
.yoga-week-agenda__day {
	display: grid;
	grid-template-columns: minmax(8.5rem, 0.28fr) minmax(0, 1fr);
	gap: var(--space-md, 16px);
	padding-block-end: var(--space-md, 16px);
	border-block-end: 1px dashed var(--yc-line, #DCD2C2);
}
.yoga-week-agenda__day h3 {
	margin: 0;
	font: 600 clamp(1rem, 3vw, 1.25rem) / 1.15 var(--font-display, Fraunces, serif);
	color: var(--color-ink, #2E2A24);
}
.yoga-week-agenda__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs, 8px); }

@media (max-width: 620px) {
	.yoga-cal__nav { inline-size: 100%; justify-content: space-between; }
	.yoga-cal__range { min-width: 0; font-size: 1rem; }
	.yoga-cal__btn { padding-inline: 0.7rem; }
	.yoga-cal__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; }
	.yoga-cal__filters select,
	.yoga-cal__filters label.yoga-cal__check { inline-size: 100%; }
	.yoga-week-agenda__day { grid-template-columns: 1fr; gap: var(--space-xs, 8px); }
	.yoga-week-agenda__cards { grid-template-columns: 1fr; }
}

/* Short sessions: availability stays visible (teacher drops in JS) */
.yoga-tg__card.is-compact .yoga-tg__card-title { -webkit-line-clamp: var(--title-lines, 2); }

/* Availability states (front calendar) */
.yoga-tg__card.is-low .yoga-tg__card-meta { color: var(--color-clay, #A34A1E); font-weight: 600; }
.yoga-tg__card.is-full .yoga-tg__card-meta { color: var(--color-error, #8A4A3C); font-weight: 600; }

/* Days behind today: visibly disabled */
.yoga-tg__col.is-past-day { background-color: rgba(46, 42, 38, 0.025); }
.yoga-tg__day-head.is-past { opacity: 0.45; }
.yoga-pay__scope-note {
	grid-column: 1 / -1;
	margin: .15rem 0 0;
	padding: .7rem .8rem;
	border-inline-start: 3px solid var(--color-clay);
	background: color-mix(in srgb, var(--color-clay) 8%, var(--color-paper));
	font-size: .86rem;
	line-height: 1.45;
	color: var(--color-ink-soft);
}

/* ============================================================
 * Norfolk booking sheet — quiet, legible and decisional.
 * Clay is deliberately reserved for the final booking action.
 * ============================================================ */
.yoga-panel__backdrop {
	background: rgba(19, 31, 28, 0.58);
	backdrop-filter: blur(5px) saturate(0.8);
}

.yoga-panel {
	gap: clamp(0.75rem, 2.2vh, 1.1rem);
	width: min(31rem, 94vw);
	padding: clamp(1.35rem, 3vw, 2rem);
	border-inline-start: 1px solid rgba(184, 132, 102, 0.48);
	background:
		radial-gradient(circle at 100% 0, rgba(216, 185, 162, 0.35), transparent 15rem),
		linear-gradient(145deg, #F7F1E7, #EADBCB);
	box-shadow: -18px 0 52px rgba(19, 31, 28, 0.24);
}
.yoga-panel::before {
	content: "";
	display: block;
	inline-size: 4.5rem;
	block-size: 0.35rem;
	margin-block-end: 0.15rem;
	border-block: 1px solid rgba(184, 132, 102, 0.72);
	border-radius: 50%;
	opacity: 0.9;
}
.yoga-panel__close {
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border: 1px solid rgba(184, 132, 102, 0.42);
	background: rgba(234, 219, 203, 0.86);
	color: var(--color-moss, #4A382A);
}
.yoga-panel__close:hover {
	background: var(--color-sea-glass, #D8B9A2);
	transform: rotate(45deg);
}
.yoga-panel__title {
	font-size: clamp(2rem, 5vw, 3.15rem);
	letter-spacing: -0.035em;
}
.yoga-panel__when {
	font-size: 0.74rem;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	color: var(--color-walnut, #5B4030);
}
.yoga-panel__who { color: var(--color-ink-soft, #5D4436); }
.yoga-panel__facts {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.45rem;
	padding: 0;
	border: 0;
}
.yoga-panel__facts > span {
	display: grid;
	align-content: center;
	min-block-size: 2.8rem;
	padding: 0.48rem 0.6rem;
	border: 1px solid rgba(184, 132, 102, 0.27);
	border-radius: 0.7rem;
	background: rgba(255, 255, 255, 0.45);
	color: var(--color-walnut, #5B4030);
	text-align: center;
}
.yoga-panel__credits,
.yoga-panel__guest-note {
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba(184, 132, 102, 0.34);
	border-inline-start: 3px solid var(--color-field-sage, #B88466);
	border-radius: 0.7rem;
	background: rgba(234, 219, 203, 0.72);
	color: var(--color-walnut, #5B4030);
	line-height: 1.45;
}

.yoga-pay { gap: 0.7rem; }
.yoga-pay__card {
	min-block-size: 6.6rem;
	align-content: center;
	padding: 1rem;
	border: 1px solid rgba(184, 132, 102, 0.38);
	border-radius: 0.85rem;
	background: rgba(255, 255, 255, 0.58);
	box-shadow: none;
}
.yoga-pay__card:hover:not(:disabled) {
	border-color: var(--color-field-sage, #B88466);
	background: rgba(234, 219, 203, 0.52);
}
.yoga-pay__card[aria-pressed="true"] {
	border-color: var(--color-moss, #4A382A);
	background: var(--color-sage-tint, #EADBCB);
	box-shadow: inset 0 0 0 1px rgba(90, 60, 44, 0.14);
}
.yoga-pay__card[aria-pressed="true"]::after { background-color: var(--color-moss, #4A382A); }
.yoga-pay__detail.is-owned { color: var(--color-moss, #4A382A); }
.yoga-pay__rec {
	color: var(--color-moss, #4A382A);
	background: rgba(216, 185, 162, 0.5);
}.yoga-pay__passes select {
	min-block-size: 3rem;
	padding: 0.65rem 0.8rem;
	border-color: rgba(184, 132, 102, 0.5);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.72);
	color: var(--color-ink, #33251F);
}
.yoga-panel__account-link,
.yoga-panel__link { color: var(--color-moss, #4A382A); text-underline-offset: 0.18em; }

.yoga-panel__cta {
	min-block-size: 3.35rem;
	border: 1px solid var(--color-clay, #9C5B45);
	background: var(--color-clay, #9C5B45);
	color: #F7F1E7;
	box-shadow: 0 7px 20px rgba(76, 47, 38, 0.18);
}
.yoga-panel__cta:hover {
	background: #814634;
	box-shadow: 0 10px 26px rgba(76, 47, 38, 0.22);
}
.yoga-panel__done {
	align-content: center;
	min-block-size: 45vh;
	padding: 2rem 0;
}
.yoga-panel__done::before {
	content: "";
	justify-self: center;
	inline-size: 4.2rem;
	block-size: 4.2rem;
	border: 1px solid var(--color-success, #76513C);
	border-radius: 50%;
	box-shadow: inset 0 0 0 0.8rem transparent, inset 0 0 0 calc(0.8rem + 1px) rgba(87, 117, 100, 0.3);
}
.yoga-panel__done-title { font-size: clamp(1.45rem, 4vw, 2rem); color: var(--color-moss, #4A382A); }

/* Already booked / in basket: an outlined secondary route to one more spot
   (the clay CTA stays the single primary action). */
.yoga-panel__another-hint { margin: var(--space-xs, 0.5rem) 0 0; font-size: var(--text-sm); color: var(--color-ink-soft, #5C5347); }
.yoga-panel__another {
	font: inherit;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-block-size: 3rem;
	padding: 0.75rem var(--space-md, 1.25rem);
	border: 1px solid var(--color-moss, #4A382A);
	border-radius: 999px;
	background: transparent;
	color: var(--color-moss, #4A382A);
	cursor: pointer;
	transition: background var(--dur-quick, 0.15s);
}
.yoga-panel__another:hover,
.yoga-panel__another:focus-visible { background: rgba(74, 56, 42, 0.07); }
.yoga-panel__another:disabled { opacity: 0.5; cursor: progress; }
.yoga-panel__notice { margin: 0; font-size: var(--text-sm); color: var(--color-ink-soft, #5C5347); }

/* ---------- studio closure banner (settings windows) ---------- */
.yoga-closure {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin-block-end: 1.1rem;
	padding: 1rem 1.15rem;
	border: 1px solid rgba(124, 100, 36, 0.32);
	border-radius: var(--radius-card-a, 1rem);
	background: linear-gradient(135deg, rgba(234, 224, 208, 0.55), rgba(246, 241, 231, 0.9));
	box-shadow: var(--shadow-soft, 0 2px 10px rgba(61, 46, 34, 0.07));
}
.yoga-closure--live {
	border-color: rgba(163, 74, 30, 0.42);
	background: linear-gradient(135deg, rgba(217, 164, 65, 0.14), rgba(246, 241, 231, 0.92));
}
.yoga-closure__mark { color: var(--color-brass-strong, #7C6424); flex: 0 0 auto; margin-block-start: 0.1rem; }
.yoga-closure--live .yoga-closure__mark { color: var(--color-clay, #A34A1E); }
.yoga-closure__body { display: grid; gap: 0.2rem; }
.yoga-closure__label { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: 1.02rem; color: var(--color-ink, #2E2A26); }
.yoga-closure__note { font-size: 0.86rem; color: var(--color-ink-mute, #756853); }

@media (max-width: 440px) {
	.yoga-panel { gap: 0.7rem; padding: 1rem; }
	.yoga-panel__title { font-size: 1.85rem; }
	.yoga-panel__facts { grid-template-columns: 1fr; }
	.yoga-panel__facts > span { min-block-size: auto; text-align: start; }
	.yoga-pay__card { min-block-size: 5rem; }
	.yoga-closure { gap: 0.7rem; padding: 0.85rem; }
}

@media (max-width: 719px) {
	.yoga-panel {
		max-height: min(90vh, 50rem);
		border: 1px solid rgba(184, 132, 102, 0.42);
		border-block-end: 0;
		border-radius: 1.15rem 1.15rem 0 0;
		box-shadow: 0 -14px 42px rgba(19, 31, 28, 0.26);
	}
	.yoga-panel::before { align-self: center; }
}

@media (max-width: 440px) {
	.yoga-panel { gap: 0.7rem; padding: 1rem; }
	.yoga-panel__title { font-size: 1.85rem; }
	.yoga-panel__facts { grid-template-columns: 1fr; }
	.yoga-panel__facts > span { min-block-size: auto; text-align: start; }
	.yoga-pay__card { min-block-size: 5rem; }
}