/* The booking wizard and manage-my-lessons page.
 * SSOT: tokens.css
 * Loads on the app routes, /book/ and /manage/ (its `when` in inc/config.php).
 */

/* Boot: the wizard keeps its space but stays invisible until book.js has
   chosen the step to open on (restored draft, return from Stripe, released
   hold), so step 1 never flashes first and nothing shifts. If the script
   never runs, it shows anyway after 3s. */
.wizard[data-booting] > * {
	visibility: hidden;
	animation: wizard-boot-fallback 0s 3s forwards;
}
@keyframes wizard-boot-fallback { to { visibility: visible; } }

/* The route locks to the viewport; the card body scrolls, so card, dots
   and Continue never move. Footer hidden: one job. */
/* Lock only when the viewport can hold the card (a height query, not the
   width scale). Both html and body: with the admin bar <html> scrolls.
   Not 100svb: the admin bar pushes <html> down by its height. */
/* 52rem: the tallest step (intake) needs it; below, the page scrolls. */
@media (min-height: 52rem) {
	/* Admin bar margin-top on <html>; a full-viewport root would overhang by it. */
	:root:has(body.route-book.admin-bar) { --admin-bar-h: 32px; }

	:root:has(body.route-book) {
		block-size: calc(100% - var(--admin-bar-h, 0px));
		overflow: hidden;
	}
	body.route-book {
		block-size: 100%;
		/* Undo theme.css min-block-size: 100svb, which beats a height. */
		min-block-size: 0;
		overflow: hidden;
	}
	body.route-book .site-main { min-block-size: 0; overflow: hidden; }
	.wizard {
		block-size: 100%;
		padding-block-end: var(--s-5);
	}
	/* Fixed size: the card never resizes between steps while locked. */
	.wizard .card {
		block-size: 100%;
		max-block-size: 42rem;
	}
	/* Safety net for a tight locked window, not the normal state. */
	body.route-book .card__body {
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}
@media screen and (max-width: 782px) {
	:root:has(body.route-book.admin-bar) { --admin-bar-h: 46px; }
}

body.route-book .site-footer { display: none; }

.wizard {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	inline-size: min(100% - 2 * var(--gutter), 58rem);
	margin-inline: auto;
	/* Room under Pay plus the home indicator when the page scrolls;
   the locked route resets to --s-5. */
	padding-block: var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
}

/* One-screen notice: sizes to content, sits at the top. */
.wizard--notice {
	grid-template-rows: auto;
	align-content: start;
}
.wizard--notice .card {
	display: block;
	align-self: start;
	block-size: auto;
	max-block-size: none;
}
.wizard--notice .card__body {
	display: grid;
	gap: var(--s-3);
	overflow: visible;
}
.wizard--notice .card__body > * { margin: 0; }
.wizard--notice .summary { margin-block: var(--s-2); }

/* --------------------------------------------------------------- progress */

.dots {
	display: flex;
	justify-content: center;
	gap: var(--s-2);
	list-style: none;
	margin: 0 0 var(--s-4);
	padding: 0;
}
.dots__dot {
	inline-size: 12px;
	block-size: 8px;
	border-radius: var(--radius-pill);
	background: var(--yellow-line);
	transition: inline-size var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dots__dot.is-done { background: var(--ok); }
.dots__dot.is-current { inline-size: 34px; background: var(--navy); }

/* ------------------------------------------------------------------- card */

.wizard .card {
	display: grid;
	/* Explicit rows: a hidden notice takes no cell, so the body would slide up and push the nav out. */
	grid-template-rows: auto minmax(0, 1fr) auto;
	/* Fixed size, no scroll: long steps use two columns. */
	align-self: stretch;
	background: var(--white);
	border-radius: var(--radius-panel);
	padding: var(--s-5);
	color: var(--navy-surface);
	box-shadow: var(--shadow-panel);
}

.wizard__resumed { grid-row: 1; }
.wizard__nav { grid-row: 3; }
.card__body {
	grid-row: 2;
	min-block-size: 0;
	/* room for a focus ring on the edge fields */
	padding-inline: 2px;
	margin-inline: -2px;
}

.step { border: 0; margin: 0; padding: 0; min-inline-size: 0; }

/* Two columns instead of scrolling the fixed card. */
.split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: 0 var(--s-4);
	align-items: start;
}
.step__title {
	display: block;
	float: none;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--text-2xl);
	line-height: 1.15;
	margin: 0 0 var(--s-2);
	padding: 0;
	color: var(--navy-surface);
}
.step__sub {
	font-size: var(--text-sm);
	color: var(--muted);
	line-height: 1.7;
	margin: 0 0 var(--s-3);
}

/* ----------------------------------------------------------------- fields */

.fields { display: grid; gap: var(--s-3); }
.fields--2 { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }

.field { display: block; margin-block-end: var(--s-3); }
.field > span,
.field__label {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	margin-block-end: var(--s-1);
	color: var(--navy-surface);
}
.field em { font-style: normal; color: var(--muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
	inline-size: 100%;
	background: var(--field);
	border: 1.5px solid var(--field-line);
	border-radius: var(--radius-input);
	padding: var(--s-2) var(--s-3);
	/* max(1rem, …) so iOS does not zoom the page on focus. */
	font: inherit;
	font-size: max(1rem, var(--text-lg));
	color: var(--navy-surface);
	min-block-size: var(--tap);
}
.field textarea { min-block-size: auto; line-height: 1.6; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
	outline: none;
	border-color: var(--navy-deep);
}
.field .sig { font-family: var(--font-display); font-style: italic; }

.check {
	display: flex;
	gap: var(--s-2);
	align-items: flex-start;
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-block-end: var(--s-3);
	cursor: pointer;
}
.check input {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	margin-block-start: 2px;
	accent-color: var(--navy-deep);
	flex: none;
}

/* Space so it does not read as another summary row. */
.summary + .note { margin-block-start: var(--s-4); }

/* --------------------------------------------------------------- resumed */

.wizard__resumed {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	margin: 0 0 var(--s-4);
	padding: var(--s-3);
	background: var(--field);
	border-inline-start: 3px solid var(--navy-deep);
	border-radius: var(--radius-input);
	font-size: var(--text-sm);
	color: var(--navy-surface);
}
/* A button that reads as a link — the quiet action beside a line of text. */
.link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var(--navy-deep);
	text-decoration: underline;
	cursor: pointer;
}

/* ----------------------------------------------------------------- waiver */

/* Own scroller, so reaching the end is observable. */
/* Waiver step unlocks the route: the card grows, the page scrolls (one scrollbar).
   Body class set by show(). */
/* Matches the lock threshold. */
@media (min-height: 52rem) {
	:root:has(body.is-waiver),
	body.is-waiver {
		block-size: auto;
		overflow: visible;
	}
	body.is-waiver .site-main { overflow: visible; }
	body.is-waiver .wizard { block-size: auto; }
	body.is-waiver .wizard .card {
		block-size: auto;
		max-block-size: none;
	}
	body.is-waiver .card__body { overflow: visible; }
}

/* No inner scroller to trap the wheel. */
.waiver {
	display: block;
	padding: var(--s-4);
	background: var(--field);
	border: 1.5px solid var(--field-line);
	border-radius: var(--radius-input);
	font-size: var(--text-sm);
	line-height: 1.75;
	color: var(--navy-surface);
}
.waiver:focus-visible {
	outline: 2px solid var(--navy-deep);
	outline-offset: 2px;
}

.waiver__head { margin-block-end: var(--s-3); }
.waiver__head h3 {
	font-family: var(--font-display);
	font-size: var(--text-base);
	margin: 0;
	color: var(--navy);
}
.waiver__head p {
	margin: var(--s-1) 0 0;
	font-size: var(--text-xs);
	/* --warm vanishes on the field grey. */
	color: var(--navy-surface);
	opacity: .7;
}

.waiver__text p { margin: 0 0 var(--s-2); }

/* Make-up policy: below the signature, its box under it. */
.waiver--short {
	margin-block: var(--s-5) var(--s-3);
}

.waiver__end {
	margin: var(--s-4) 0 0;
	padding-block-start: var(--s-3);
	border-block-start: 1.5px solid var(--field-line);
	font-weight: 700;
	color: var(--navy-surface);
	text-align: center;
}

.waiver__hint {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: var(--s-3) 0 0;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--navy-surface);
}
.waiver__hint::before {
	content: "\2193";
	font-weight: 700;
	color: var(--navy-deep);
}
.waiver__hint.is-unlocked { color: var(--ok); }
.waiver__hint.is-unlocked::before { content: "\2713"; color: var(--ok); }

/* Always visible; reaching the end enables it. */
.waiver__sign {
	margin-block-start: var(--s-4);
	transition: opacity var(--dur) var(--ease);
}
.waiver__sign.is-locked {
	opacity: .45;
	cursor: not-allowed;
}
.waiver__sign.is-locked .check,
.waiver__sign.is-locked .field {
	pointer-events: none;
}
.waiver__sign input:disabled { cursor: not-allowed; }

/* ------------------------------------------------------------------ chips */

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-3); }
.chip {
	min-inline-size: var(--tap);
	min-block-size: var(--tap);
	padding: var(--s-2) var(--s-3);
	background: var(--field);
	border: 1.5px solid var(--field-line);
	border-radius: var(--radius-input);
	font: inherit;
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--navy-deep);
	cursor: pointer;
}
.chip--wide { padding-inline: var(--s-4); background: var(--white); }
.chip[aria-checked="true"],
.chip[aria-pressed="true"] {
	background: var(--navy-deep);
	border-color: var(--navy-deep);
	color: var(--white);
}

/* ------------------------------------------------------- picks and slots */

.picks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: var(--s-2);
	margin-block-end: var(--s-3);
}
.picks--2 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.pick {
	display: block;
	text-align: start;
	background: var(--white);
	border: 1.5px solid var(--field-line);
	border-radius: var(--radius-input);
	padding: var(--s-2) var(--s-3);
	font: inherit;
	cursor: pointer;
	color: var(--navy-surface);
}
.pick[aria-checked="true"] { border-color: var(--navy-deep); background: var(--field-sel); }
.pick__title { display: block; font-weight: 700; font-size: var(--text-lg); }
.pick__desc { display: block; font-size: var(--text-xs); color: var(--muted); margin-block-start: 2px; }
.pick__price {
	display: block;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--text-xl);
	margin-block-start: var(--s-1);
	color: var(--navy-deep);
}
.pick__price em { font-family: var(--font-body); font-style: normal; font-size: var(--text-xs); font-weight: 600; color: var(--muted); }

.slots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: var(--s-2);
	margin-block-end: var(--s-3);
}
.slot {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 2px var(--s-3);
	text-align: start;
	background: var(--white);
	border: 1.5px solid var(--field-line);
	border-radius: var(--radius-input);
	padding: var(--s-2) var(--s-3);
	min-block-size: var(--tap);
	font: inherit;
	font-weight: 600;
	color: var(--navy-surface);
	cursor: pointer;
}
.slot:hover { border-color: var(--navy-deep); }
.slot[aria-checked="true"],
.slot:has(:checked) { border-color: var(--navy-deep); background: var(--field-sel); }
/* Real radios, works without JS; the label shows focus. */
.slot > input { position: absolute; opacity: 0; pointer-events: none; }
.slot:has(:focus-visible) { outline: 2px solid var(--navy-deep); outline-offset: 2px; }
.slot__day { font-size: var(--text-lg); }
.slot__time {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--text-lg);
	white-space: nowrap;
}
/* Spans both columns; auto row keeps height either way. */
.slot__match {
	grid-column: 1 / -1;
	color: var(--ok);
	font-size: var(--text-xxs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- notices */

.note {
	border-radius: var(--radius-input);
	padding: var(--s-2) var(--s-3);
	font-size: var(--text-xs);
	line-height: 1.6;
	background: var(--field-sel);
	color: var(--navy-surface);
	margin: 0 0 var(--s-3);
}
.note--teal { background: var(--pill-eval-bg); color: var(--navy-surface); }
.note--ok { background: var(--ok-bg); color: var(--ok); }
.note--warn { background: var(--warn-bg); color: var(--warn); }

.wizard__error {
	background: var(--err-bg);
	color: var(--err);
	border-radius: var(--radius-input);
	padding: var(--s-3);
	font-size: var(--text-sm);
	font-weight: 600;
	margin: var(--s-3) 0 0;
}

/* ---------------------------------------------------------------- summary */

.summary {
	background: var(--field);
	border-radius: var(--radius-input);
	padding: var(--s-2) var(--s-3);
	margin: var(--s-3) 0 0;
}
.summary > div {
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);
	padding-block: var(--s-1);
	font-size: var(--text-sm);
}
.summary > div + div { border-block-start: 1px solid var(--field-line); }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 600; text-align: end; }
.summary__total dd { font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); }

.summary--pinned { margin-block-start: var(--s-4); }

/* ----------------------------------------------------------- confirmation */

.step--done { text-align: center; }
.done__tick {
	inline-size: 3.5rem;
	block-size: 3.5rem;
	margin: 0 auto var(--s-3);
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ok-bg);
	color: var(--ok);
	font-size: var(--text-xl);
	font-weight: 700;
}
.step--done .summary { text-align: start; margin-block-end: var(--s-4); }
.step--done .l-cluster { justify-content: center; }

/* -------------------------------------------------------------- wizard nav */

.wizard__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-3);
	margin-block-start: var(--s-4);
	padding-block-start: var(--s-3);
	border-block-start: 1px solid var(--field-line);
}
.btn--quiet {
	background: none;
	color: var(--muted);
	font-weight: 600;
	padding-inline: 0;
}
.btn--quiet:hover { color: var(--navy-deep); }
.wizard__nav .btn--cta:disabled {
	background: color-mix(in srgb, var(--red-cta) 25%, var(--field-line));
	cursor: not-allowed;
}

/* Honeypot off-canvas, not display:none: some bots skip unrendered fields. */
.hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------- manage my lessons */

/* One card per swimmer: header, Needs you, Coming up, fold. */
.manage-page { row-gap: var(--s-4); }
.manage-page .manage {
	display: grid;
	gap: var(--s-4);
}
.manage .note { margin: 0; }

.manage__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--s-1) var(--s-3);
}
.manage__name {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--text-2xl);
	line-height: 1.1;
	color: var(--navy-surface);
}
.manage__meta { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); color: var(--muted); }

/* Status colour: ok set, act to do, wait someone else, quiet none booked. Chips match. */
.pill {
	display: inline-flex;
	align-items: center;
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius-pill);
	font-size: var(--text-xxs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}
.pill--ok    { background: var(--ok-bg); color: var(--ok); }
.pill--act   { background: var(--warn-bg); color: var(--warn); }
.pill--wait  { background: var(--pill-eval-bg); color: var(--navy-surface); }
.pill--quiet { background: var(--field); color: var(--muted); }
.pill-dot {
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-radius: 50%;
	flex: none;
}
.pill-dot--ok    { background: var(--ok); }
.pill-dot--act   { background: var(--warn); }
.pill-dot--wait  { background: var(--teal); }
.pill-dot--quiet { background: var(--field-line); }

/* A section inside a card: a small label over its content. */
.manage__block { display: grid; gap: var(--s-2); }
.manage__label {
	margin: 0;
	font-size: var(--text-xxs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
/* The one tinted block; its notes drop their boxes. */
.manage__block--needs {
	padding: var(--s-3);
	background: color-mix(in srgb, var(--warn-bg) 55%, var(--white));
	border-inline-start: 3px solid var(--warn);
	border-radius: var(--radius-input);
}
.manage__block--needs .manage__label { color: var(--warn); }
.manage__block--needs .note { background: none; padding: 0; }
.manage__form { display: grid; gap: var(--s-2); margin: 0; }
.manage__form .field { margin: 0; }

/* The rarer jobs, folded under a rule at the card's foot. */
.manage__more { border-block-start: 1px solid var(--field-line); padding-block-start: var(--s-3); }
.manage__more[open] { gap: var(--s-4); }

/* With more than one swimmer: a chip per swimmer that jumps to their card. */
.manage-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.manage-chips__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-block-size: var(--tap);
	padding-inline: var(--s-3);
	background: var(--white);
	border: 1.5px solid var(--field-line);
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--navy-deep);
	text-decoration: none;
}
.manage-chips__chip:hover { border-color: var(--navy-deep); }
.manage__stop { display: grid; gap: var(--s-3); }
.manage__stop-link { margin: 0; font-size: var(--text-sm); }
/* A date and one action each. */
.manage__lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.manage__lessons li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--s-3); padding-block: var(--s-1); border-block-end: 1px solid var(--field-line); font-size: var(--text-sm); }
.manage__lessons li.is-away span { opacity: 0.7; }
.manage__lessons li.is-makeup span { color: var(--navy-deep); }
.manage__lessons form, .manage__makeup { margin: 0; }
.manage__makeup { display: grid; gap: var(--s-1); justify-items: start; }
.fold > summary { cursor: pointer; font-weight: 700; font-size: var(--text-sm); color: var(--navy-deep); padding-block: var(--s-1); }
.fold[open] > summary { margin-block-end: var(--s-3); }
.fold[open] { display: grid; gap: var(--s-2); }