/**
 * Baseline styles for the [ss_booking] panel.
 *
 * This is the portability floor, not the design: the panel, its error summary,
 * its empty state and its confirmation screen must be presentable on ANY theme,
 * the same way the email sink means the lead pipeline works on any host. Every
 * rule is wrapped in :where() so its specificity is zero; a theme that styles
 * the same classes wins without ever fighting this file.
 *
 * The visual language is comp-cb ("The Field Guide"): sand and cream plates,
 * ink text, brown accents, Playfair for the one moment that deserves a serif.
 * Font sizes are rem only. Tap targets stay at 44px or better.
 */

#ss-booking {
	--ssb-sand: #efebdf;
	--ssb-cream: #f4f3ee;
	--ssb-ink: #191818;
	--ssb-brown: #4c453f;
	--ssb-white: #ffffff;
	--ssb-rule: rgba(76, 69, 63, 0.34);
	--ssb-rule-soft: rgba(76, 69, 63, 0.16);
	--ssb-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--ssb-sans: "Poppins", -apple-system, "Helvetica Neue", Arial, sans-serif;
	--ssb-fs-body: 1.125rem;
	--ssb-fs-small: 0.9375rem;
	--ssb-fs-caption: 0.875rem;
	--ssb-fs-kicker: 0.75rem;
	--ssb-fs-when: clamp(1.5rem, 1.25rem + 1vw, 1.75rem);
	--ssb-s-2xs: 8px;
	--ssb-s-xs: 12px;
	--ssb-s-sm: 16px;
	--ssb-s-md: 24px;
	--ssb-s-lg: 32px;
	--ssb-s-xl: 48px;
}

/* ------------------------------------------------------------
 * The shell and its two columns
 * ------------------------------------------------------------ */

:where(#ss-booking) :where(.book-shell) {
	background: var(--ssb-cream);
	border: 1px solid var(--ssb-rule-soft);
	padding: var(--ssb-s-lg);
	margin-top: var(--ssb-s-md);
	color: var(--ssb-ink);
	font-family: var(--ssb-sans);
	font-size: var(--ssb-fs-body);
	line-height: 1.6;
}

:where(#ss-booking) :where(.book-grid) {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--ssb-s-lg);
	align-items: start;
}

:where(#ss-booking) :where(.book-aside .note) {
	display: block;
	border-top: 1px solid var(--ssb-rule);
	padding-top: 10px;
	font-size: var(--ssb-fs-caption);
	line-height: 1.55;
}

:where(#ss-booking) :where(.book-aside .note + .note) {
	margin-top: var(--ssb-s-md);
}

:where(#ss-booking) :where(.note-k) {
	display: block;
	font-size: var(--ssb-fs-kicker);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ssb-brown);
	margin-bottom: 4px;
}

/* ------------------------------------------------------------
 * Timezone control (inside the POST form, never a sibling)
 * ------------------------------------------------------------ */

:where(#ss-booking) :where(.tz-note) {
	font-size: var(--ssb-fs-caption);
	line-height: 1.6;
	color: var(--ssb-brown);
	max-width: 52ch;
	margin: 0 0 var(--ssb-s-xs);
}

:where(#ss-booking) :where(.tzform) {
	display: flex;
	align-items: flex-end;
	gap: var(--ssb-s-2xs);
	flex-wrap: wrap;
	padding: 0 0 var(--ssb-s-sm);
	margin: 0 0 var(--ssb-s-sm);
	border-bottom: 1px solid var(--ssb-rule);
}

/* ------------------------------------------------------------
 * Fields, consent, submit
 * ------------------------------------------------------------ */

:where(#ss-booking) :where(.field) {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

:where(#ss-booking) :where(.field label) {
	font-size: var(--ssb-fs-kicker);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ssb-brown);
}

:where(#ss-booking) :where(.field input, .field select, .field textarea) {
	font-family: var(--ssb-sans);
	font-size: var(--ssb-fs-small);
	color: var(--ssb-ink);
	background: var(--ssb-white);
	border: 1px solid var(--ssb-rule);
	padding: 10px 12px;
	min-height: 44px;
}

:where(#ss-booking) :where(input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible) {
	outline: 2px solid var(--ssb-brown);
	outline-offset: 2px;
}

:where(#ss-booking) :where(.book-fields) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ssb-s-sm);
	margin-top: var(--ssb-s-md);
}

:where(#ss-booking) :where(.book-fields .field-wide) {
	grid-column: 1 / -1;
}

:where(#ss-booking) :where(.hint) {
	font-size: var(--ssb-fs-caption);
	line-height: 1.5;
	color: var(--ssb-brown);
	margin: 6px 0 0;
	max-width: 46ch;
}

:where(#ss-booking) :where(.consent) {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 14px;
	align-items: start;
	margin-top: var(--ssb-s-sm);
	padding-top: var(--ssb-s-sm);
	border-top: 1px solid var(--ssb-rule);
}

:where(#ss-booking) :where(.consent input) {
	width: 24px;
	height: 24px;
	margin: 2px 0 0;
	accent-color: var(--ssb-brown);
}

:where(#ss-booking) :where(.consent label) {
	font-size: var(--ssb-fs-caption);
	line-height: 1.6;
	max-width: 64ch;
}

:where(#ss-booking) :where(.book-submit) {
	display: flex;
	align-items: center;
	gap: var(--ssb-s-md);
	flex-wrap: wrap;
	margin-top: var(--ssb-s-md);
}

:where(#ss-booking) :where(.btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	background: var(--ssb-brown);
	color: var(--ssb-cream);
	font-family: var(--ssb-sans);
	font-size: var(--ssb-fs-caption);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: var(--ssb-s-sm) var(--ssb-s-md);
	border: 1px solid var(--ssb-brown);
	text-decoration: none;
	cursor: pointer;
}

:where(#ss-booking) :where(.btn:hover) {
	background: var(--ssb-ink);
	border-color: var(--ssb-ink);
	color: var(--ssb-cream);
}

:where(#ss-booking) :where(.textlink) {
	color: var(--ssb-ink);
	text-decoration: underline;
	text-decoration-color: var(--ssb-rule);
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------
 * Slots: each label is the tap target, radio inside
 * ------------------------------------------------------------ */

:where(#ss-booking) :where(.slots) {
	border: 0;
	margin: 0 0 var(--ssb-s-sm);
	padding: 0;
	min-inline-size: 0;
}

:where(#ss-booking) :where(.slots legend) {
	font-size: var(--ssb-fs-kicker);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ssb-brown);
	padding: 0 0 12px;
	margin: 0;
	width: 100%;
}

:where(#ss-booking) :where(.slot-row) {
	display: flex;
	gap: var(--ssb-s-2xs);
	flex-wrap: wrap;
	padding-top: 14px;
	border-top: 1px solid var(--ssb-rule-soft);
}

:where(#ss-booking) :where(.slot) {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--ssb-rule-soft);
	background: var(--ssb-white);
	padding: 12px 18px;
	min-height: 44px;
	cursor: pointer;
	font-size: var(--ssb-fs-small);
}

:where(#ss-booking) :where(.slot input) {
	width: 18px;
	height: 18px;
	accent-color: var(--ssb-brown);
	margin: 0;
	flex: none;
}

:where(#ss-booking) :where(.slot:hover) {
	border-color: var(--ssb-brown);
}

:where(#ss-booking) :where(.slot:has(input:checked)) {
	border-color: var(--ssb-brown);
	box-shadow: inset 0 0 0 1px var(--ssb-brown);
}

:where(#ss-booking) :where(.slot time) {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
 * The error summary. role="alert", focused on render.
 * The palette has no alarm red and does not need one: a white plate,
 * a heavy brown rule and the first-person copy carry the weight.
 * ------------------------------------------------------------ */

:where(#ss-booking) :where(.book-errors) {
	background: var(--ssb-white);
	border: 1px solid var(--ssb-rule);
	border-left: 4px solid var(--ssb-brown);
	padding: var(--ssb-s-sm) var(--ssb-s-md);
	margin: 0 0 var(--ssb-s-md);
	font-size: var(--ssb-fs-small);
	line-height: 1.6;
}

:where(#ss-booking) :where(.book-errors p) {
	margin: 0 0 var(--ssb-s-2xs);
}

:where(#ss-booking) :where(.book-errors ul) {
	margin: 0;
	padding-left: 1.25em;
}

:where(#ss-booking) :where(.book-errors li + li) {
	margin-top: 4px;
}

:where(#ss-booking) :where(.book-errors a) {
	color: var(--ssb-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------
 * The empty state. Two different sentences render here (calendar
 * unreadable vs genuinely nothing open); both get the same calm plate
 * and the phone-and-email fallback line.
 * ------------------------------------------------------------ */

:where(#ss-booking) :where(.book-empty) {
	background: var(--ssb-white);
	border: 1px solid var(--ssb-rule-soft);
	padding: var(--ssb-s-md);
	max-width: 56ch;
	font-size: var(--ssb-fs-small);
	line-height: 1.65;
}

:where(#ss-booking) :where(.book-empty p) {
	margin: 0;
}

:where(#ss-booking) :where(.book-empty p + p) {
	margin-top: var(--ssb-s-xs);
	padding-top: var(--ssb-s-xs);
	border-top: 1px solid var(--ssb-rule-soft);
}

/* ------------------------------------------------------------
 * The escape hatch. Rendered under the times in every state, so it
 * has to sit apart from the list without competing with the submit
 * button above it: a rule, a sand plate, and a quieter heading.
 * ------------------------------------------------------------ */

:where(#ss-booking) :where(.book-escape) {
	background: var(--ssb-sand);
	border: 1px solid var(--ssb-rule-soft);
	padding: var(--ssb-s-md);
	margin-top: var(--ssb-s-md);
	max-width: 56ch;
}

:where(#ss-booking) :where(.book-escape-h) {
	font-family: var(--ssb-serif);
	font-size: var(--ssb-fs-body);
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 var(--ssb-s-2xs);
	color: var(--ssb-ink);
}

:where(#ss-booking) :where(.book-escape-b) {
	font-size: var(--ssb-fs-small);
	line-height: 1.65;
	margin: 0;
	color: var(--ssb-brown);
}

:where(#ss-booking) :where(.book-escape-do) {
	display: flex;
	align-items: center;
	gap: var(--ssb-s-md);
	flex-wrap: wrap;
	margin: var(--ssb-s-sm) 0 0;
}

/* ------------------------------------------------------------
 * The confirmation. The one moment on the panel that earns the serif:
 * the date line is the payoff, everything after it is quiet logistics.
 * ------------------------------------------------------------ */

:where(#ss-booking) :where(.book-confirmation) {
	background: var(--ssb-white);
	border: 1px solid var(--ssb-rule);
	padding: var(--ssb-s-lg) var(--ssb-s-lg) var(--ssb-s-md);
	max-width: 62ch;
}

:where(#ss-booking) :where(.book-confirm-when) {
	font-family: var(--ssb-serif);
	font-size: var(--ssb-fs-when);
	line-height: 1.25;
	color: var(--ssb-ink);
	margin: 0 0 var(--ssb-s-sm);
	padding-bottom: var(--ssb-s-sm);
	border-bottom: 1px solid var(--ssb-rule);
}

:where(#ss-booking) :where(.book-confirm-when time) {
	font-variant-numeric: tabular-nums;
}

:where(#ss-booking) :where(.book-confirm-alt) {
	display: block;
	font-family: var(--ssb-sans);
	font-size: var(--ssb-fs-small);
	line-height: 1.5;
	color: var(--ssb-brown);
	margin-top: var(--ssb-s-2xs);
}

:where(#ss-booking) :where(.book-confirmation p:not(.book-confirm-when)) {
	font-size: var(--ssb-fs-small);
	line-height: 1.65;
	margin: 0 0 var(--ssb-s-xs);
	max-width: 58ch;
}

/* ------------------------------------------------------------
 * One column below 860px; slot rows and field pairs stack
 * ------------------------------------------------------------ */

@media (max-width: 860px) {
	:where(#ss-booking) :where(.book-grid) {
		grid-template-columns: 1fr;
	}

	:where(#ss-booking) :where(.book-fields) {
		grid-template-columns: 1fr;
	}

	:where(#ss-booking) :where(.book-shell) {
		padding: var(--ssb-s-md) var(--ssb-s-sm);
	}

	:where(#ss-booking) :where(.book-confirmation) {
		padding: var(--ssb-s-md) var(--ssb-s-sm);
	}

	:where(#ss-booking) :where(.slot) {
		flex: 1 1 40%;
		justify-content: flex-start;
	}
}