/*
 * Appointment widget step guidance (§7.2): the two-step progress bar, the
 * date-first state of the time list, and spacing for page one. The widget's
 * markup is the plugin's [pinnacle_appointment] shortcode; its presentation
 * lives here with the rest of the theme's CSS (§3.2).
 *
 * This was printed inline on every page by pinnacle-core as a PHP heredoc
 * (never cached, invisible to spec-lint). It is unlayered and enqueued right
 * after main.css, which is exactly where the inline block used to land, so
 * the cascade is unchanged.
 */

/* The theme's progressive no-JS fallback intentionally stacks every rendered
 * month before JavaScript takes over. On a normal JS page that also means the
 * next month can paint beneath the active month during reload. This exact
 * selector intentionally matches the fallback selector's specificity and is
 * emitted after main.css, so inactive months remain hidden from first paint. */
.calendar:not([data-cal-ready]) .calendar__grid[data-cal-hidden] {
	display: none;
}

.appointment-guide {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-1);
	margin-block-end: var(--s-5);
	padding: var(--s-1);
	background-color: var(--bg-tint);
	border-radius: var(--r-control);
}

.appointment-guide[hidden] {
	display: none;
}

.appointment-guide__item {
	min-inline-size: 0;
}

.appointment-guide__step {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: var(--btn-h);
	padding-inline: var(--s-2);
	border: 0;
	border-radius: calc(var(--r-control) - var(--s-1));
	background: transparent;
	color: var(--ink-500);
	font-size: var(--fs-small);
	font-weight: var(--fw-ui);
	text-align: start;
	cursor: pointer;
}

.appointment-guide__step:hover:not(:disabled) {
	background-color: var(--bg-alt);
	color: var(--ink-900);
}

.appointment-guide__step.is-current {
	background-color: var(--surface);
	color: var(--ink-900);
}

.appointment-guide__step.is-complete {
	color: var(--ink-700);
}

.appointment-guide__step:disabled {
	cursor: default;
}

.appointment-guide__number {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: var(--s-6);
	block-size: var(--s-6);
	border-radius: var(--r-full);
	background-color: var(--bg-alt);
	color: var(--ink-700);
	font-size: var(--fs-micro);
}

.appointment-guide__step.is-current .appointment-guide__number {
	background-color: var(--ink-900);
	color: var(--surface);
}

/* Keep the selected summary visually attached to the time choices, with the
 * same modest breathing room above and below before the primary action. */
.appointment__panel[data-panel="1"] > .appointment__legend {
	margin-block-end: var(--s-5);
}

.appointment__panel[data-panel="1"] > .appointment__picked {
	margin-block: var(--s-4);
}

.appointment__panel[data-panel="1"] > .appointment__picked + .appointment__continue {
	margin-block-start: 0;
}

/* The step-two back control is the same secondary-button component as the
 * rest of the site. The legacy appointment rule still owns its placement, but
 * it must not make the painted box taller than the shared button height. The
 * standard .btn pseudo-element keeps the larger touch target invisibly. */
.appointment__back.btn {
	min-block-size: var(--btn-h);
	padding-inline: var(--s-4);
	padding-block: var(--s-1);
}

.appointment__picked.is-incomplete {
	color: var(--accent);
}

.appointment--awaiting-date .appointment__times {
	color: var(--ink-500);
}

.appointment--awaiting-date .time-list {
	opacity: 0.55;
}

.appointment--awaiting-date .time-chip,
.appointment--awaiting-date .time-chip input {
	cursor: default;
}