/**
 * Allura Medical - component layer.
 *
 * Reusable, section-agnostic building blocks. Sections compose these; they
 * should not need to restyle them.
 *
 * Contents: buttons, eyebrow, section head, stats, tiles, cards, carousel,
 * comparison slider, media, forms, notices, star rating, prose.
 */

/*--------------------------------------------------------------
Buttons
--------------------------------------------------------------*/
.am-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--am-space-2);
	padding: 14px 32px;
	border: 1px solid var(--am-brand);
	border-radius: var(--am-radius);
	background-color: transparent;
	color: var(--am-brand);
	font-family: var(--am-font-body);
	font-size: var(--am-fs-ui);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--am-transition), border-color var(--am-transition), color var(--am-transition);
}

.am-btn--solid {
	background-color: var(--am-brand);
	color: var(--am-white);
}

.am-btn--solid:hover,
.am-btn--solid:focus {
	background-color: var(--am-brand-dark);
	border-color: var(--am-brand-dark);
	color: var(--am-white);
}

.am-btn--outline {
	background-color: var(--am-white);
	color: var(--am-brand);
}

.am-btn--outline:hover,
.am-btn--outline:focus {
	background-color: var(--am-brand);
	color: var(--am-white);
}

/* For use on dark backgrounds. */
.am-btn--ghost {
	border-color: rgba(var(--am-white-rgb), .6);
	color: var(--am-white);
}

.am-btn--ghost:hover,
.am-btn--ghost:focus {
	background-color: var(--am-white);
	border-color: var(--am-white);
	color: var(--am-ink);
}

.am-btn--block {
	width: 100%;
}

/*
 * A button whose form is on its way: a ring turning beside the label, and
 * no second press. site.js adds the class and the ring the moment the form
 * is submitted. The label stays, so the button still says what it is doing.
 */
.am-btn.is-busy,
.am-btn:disabled {
	cursor: default;
	pointer-events: none;
}

.am-btn.is-busy {
	opacity: .85;
}

.am-btn__spinner {
	flex: none;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: am-spin .7s linear infinite;
}

@keyframes am-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.am-btn__spinner {
		animation: none;
		border-right-color: currentColor;
		opacity: .5;
	}
}

/*
 * Phones get a narrower button everywhere, not just where one happened to
 * be crowding something. 18px type inside 32px of padding is an artboard
 * measurement — on a 350px row it is a third of the screen wide before it
 * has said anything, and two of them side by side never fit at all.
 *
 * The width is all that comes off: the desktop's 14px of vertical padding
 * stays, which is one height for every button on the page — hero, header,
 * submit — and roughly the 44px comfort figure rather than merely WCAG
 * 2.5.8's 24px minimum.
 */
@media (max-width: 767px) {
	.am-btn {
		padding: 14px 18px;
		font-size: .8125rem;
		letter-spacing: .02em;
	}
}

.am-section--dark .am-btn--solid {
	border-color: var(--am-brand);
}

/*--------------------------------------------------------------
Icons
--------------------------------------------------------------*/
/*
 * Icons inherit the text colour, so a button changing colour on hover takes
 * its icon with it — no separate hover rule needed.
 */
.am-icon {
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: middle;
	color: currentColor;
}

/* Inline arrow link */
.am-link {
	display: inline-block;
	color: var(--am-brand);
	font-weight: 600;
}

.am-link::after {
	content: " \2192";
}

.am-link:hover,
.am-link:focus {
	color: var(--am-brand-dark);
}

/*--------------------------------------------------------------
Eyebrow
--------------------------------------------------------------*/
.am-eyebrow {
	margin: 0;
	color: var(--am-ink);
	font-family: var(--am-font-body);
	font-size: var(--am-fs-lead);
	font-weight: 600;
	line-height: 1.4;
}

.am-eyebrow::before {
	content: "+ ";
}

.am-section--dark .am-eyebrow {
	color: var(--am-white);
}

/*--------------------------------------------------------------
Section head
--------------------------------------------------------------*/
.am-section-head {
	display: grid;
	gap: var(--am-space-5);
	margin-bottom: var(--am-space-8);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

/*
 * 80px under a heading is an artboard measurement, and on a phone it is a
 * third of the screen between the title and the thing it introduces — long
 * enough that the two stop reading as one section. Sections that want a
 * different gap still set their own; this only moves the default.
 */
@media (max-width: 767px) {
	.am-section-head {
		gap: var(--am-space-4);
		margin-bottom: var(--am-space-6);
	}
}

@media (min-width: 1024px) {
	/*
	 * The eyebrow column is sized to hold the longest of them — "+ Consultation
	 * locations" — on one line. It has to be fluid rather than a single width
	 * because the eyebrow itself is: --am-fs-lead runs from 16.8px up to 20px
	 * across this range, so a column wide enough at 1100px is too narrow by the
	 * time the type reaches full size. The clamp tracks it, and the ceiling is
	 * where the type stops growing.
	 */
	.am-section-head--split {
		grid-template-columns: clamp(240px, 19vw, 300px) minmax(0, 1fr) auto;
		gap: var(--am-space-7);
	}

	/*
	 * No eyebrow, no eyebrow column. Grid auto-placement puts the body in
	 * whatever track comes first, and the first track here is sized for the
	 * longest eyebrow — so a head without one crushed its heading into
	 * 300px. The landing pages' heads carry no eyebrows at all, which is
	 * what finally surfaced it.
	 */
	.am-section-head--split:not(:has(> .am-eyebrow)) {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.am-section-head__body {
	max-width: 750px;
}

.am-section-head__title {
	font-size: var(--am-fs-h2);
}

.am-section-head__title-top,
.am-section-head__title-bottom {
	display: block;
}

.am-section-head__title-bottom {
	color: var(--am-muted);
}

.am-section--dark .am-section-head__title-bottom {
	color: rgba(var(--am-white-rgb), .7);
}

.am-section-head__text {
	margin-top: var(--am-space-5);
	color: var(--am-body);
	font-size: var(--am-fs-lead);
	line-height: 1.65;
}

.am-section--dark .am-section-head__text {
	color: rgba(var(--am-white-rgb), .85);
}

.am-section-head__cta {
	justify-self: start;
}

@media (min-width: 1024px) {
	.am-section-head__cta {
		justify-self: end;
	}
}

/*--------------------------------------------------------------
Stats
--------------------------------------------------------------*/
.am-stats {
	display: grid;
	gap: var(--am-space-5) var(--am-space-6);
}

.am-stats--row {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.am-stats--column {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--am-space-5);
}

.am-stat__value {
	display: block;
	color: var(--am-muted);
	font-family: var(--am-font-display);
	font-size: var(--am-fs-h3);
	line-height: 1.1;
}

.am-stat__label {
	display: block;
	margin-top: var(--am-space-2);
	color: var(--am-body);
	font-size: var(--am-fs-lead);
	line-height: 1.4;
}

.am-stats--inverse .am-stat__value {
	color: var(--am-white);
}

.am-stats--inverse .am-stat__label {
	color: rgba(var(--am-white-rgb), .82);
}

/*
 * The approach figures read across a phone rather than down it.
 *
 * A column of three is the right shape beside a body of text, which is
 * what it sits next to on a wide screen. Stacked under that text on a
 * phone it is just three screens of scrolling for three short numbers.
 *
 * auto-flow rather than a count: the tracks are however many figures there
 * are, each an equal share, so adding a fourth widens the row instead of
 * silently starting a second one. minmax(0, 1fr) is what lets a long label
 * wrap inside its share instead of forcing the row wider than the screen.
 */
@media (max-width: 767px) {
	.am-stats--column {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: var(--am-space-4);
	}

	/* Three labels sharing a phone's width need the smaller step. */
	.am-stats--column .am-stat__label {
		margin-top: var(--am-space-1);
		font-size: var(--am-fs-base);
		line-height: 1.35;
	}
}

/*--------------------------------------------------------------
Tile (image card with a centred title)
--------------------------------------------------------------*/
.am-tile {
	position: relative;
	display: flex;
	min-height: clamp(340px, 26vw, 440px);
	padding: var(--am-space-5);
	border-radius: var(--am-radius);
	overflow: hidden;
	background-color: var(--am-brand);
	color: var(--am-white);
	isolation: isolate;
}

.am-tile__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.am-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

a.am-tile:hover .am-tile__media img,
a.am-tile:focus-visible .am-tile__media img {
	transform: scale(1.05);
}

.am-tile__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--am-space-4);
	text-align: center;
}

.am-tile__title {
	max-width: 15ch;
	color: var(--am-white);
	font-family: var(--am-font-display);
	font-size: var(--am-fs-h3);
	line-height: 1.15;
	/* Keeps a long title from wrapping to a lonely last word. */
	text-wrap: balance;
	/* Last-resort legibility over an unexpectedly bright photograph. */
	text-shadow: 0 1px 12px rgba(var(--am-ink-rgb), .45);
}

/*
 * With body copy the tile stops being a centred label and becomes a card: the
 * title, the copy and the button stack from the top-left, and the button is
 * held at the foot however long the copy runs.
 */
.am-tile--detail .am-tile__inner {
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--am-space-3);
	text-align: left;
}

/*
 * Capped so a long title falls onto two lines by itself, which is how the
 * design sets every card. text-wrap: balance on .am-tile__title then splits the
 * two evenly rather than leaving one word stranded on the second line.
 *
 * A ch cap cannot force a break into a title that already fits — "Oral Surgery"
 * stays on one line whatever the width, short of a cap so narrow it would push
 * the long titles onto four. Those few are broken by hand instead: the Title
 * field is a textarea, so pressing Enter puts the break exactly where the design
 * has it.
 */
.am-tile--detail .am-tile__title {
	max-width: 19ch;
}

.am-tile__text {
	color: rgba(var(--am-white-rgb), .9);
	font-size: var(--am-fs-base);
	line-height: 1.55;
	text-shadow: 0 1px 12px rgba(var(--am-ink-rgb), .45);
}

.am-tile__cta {
	margin-top: auto;
	padding: 10px 20px;
	font-size: var(--am-fs-small);
}

/*--------------------------------------------------------------
Card (white panel)
--------------------------------------------------------------*/
.am-card {
	display: flex;
	flex-direction: column;
	gap: var(--am-space-5);
	padding: var(--am-space-5);
	background-color: var(--am-white);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
}

/*--------------------------------------------------------------
Star rating
--------------------------------------------------------------*/
.am-review__rating {
	display: flex;
	gap: 6px;
}

.am-star {
	display: inline-flex;
	color: var(--am-line);
}

.am-star.is-filled {
	color: var(--am-star);
}

/*--------------------------------------------------------------
Carousel
--------------------------------------------------------------*/
.am-carousel__viewport {
	overflow: hidden;
}

.am-carousel__track {
	display: flex;
	margin: 0;
	padding: 0;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.am-carousel__slide {
	flex: 0 0 100%;
	min-width: 0;
}

/* Without JS every slide simply stacks. */
.no-js .am-carousel__track {
	display: block;
}

.am-carousel-nav {
	display: flex;
	align-items: center;
	gap: var(--am-space-3);
	margin-top: var(--am-space-5);
}

.am-carousel-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid var(--am-brand);
	border-radius: 100px;
	background-color: transparent;
	color: var(--am-brand);
	cursor: pointer;
	transition: background-color var(--am-transition), color var(--am-transition), opacity var(--am-transition);
}

.am-carousel-nav__btn--solid {
	background-color: var(--am-brand);
	color: var(--am-white);
}

.am-carousel-nav__btn:hover:not(:disabled) {
	background-color: var(--am-brand-dark);
	border-color: var(--am-brand-dark);
	color: var(--am-white);
}

.am-carousel-nav__btn:disabled {
	opacity: .4;
	cursor: default;
}

.am-carousel-nav__count {
	color: var(--am-muted);
	font-size: var(--am-fs-ui);
	font-weight: 600;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
Before / after comparison
--------------------------------------------------------------*/
.am-compare {
	margin: 0;
}

.am-compare__frame {
	position: relative;
	aspect-ratio: 3 / 4;
	background-color: var(--am-line);
	border-radius: var(--am-radius);
	overflow: hidden;
	touch-action: pan-y;
}

.am-compare__layer {
	position: absolute;
	inset: 0;
}

.am-compare__layer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Both layers stay full size and the top one is clipped, so the two photos are
 * guaranteed to share an identical crop. Clipping is also composited, unlike
 * resizing the layer and inversely scaling the image inside it, which forced a
 * layout and repaint on every frame of the drag.
 */
.am-compare__layer--before {
	clip-path: inset(0 calc(100% - var(--am-compare-pos, 50%)) 0 0);
	will-change: clip-path;
}

.am-compare__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--am-compare-pos, 50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2px;
	background-color: var(--am-white);
	transform: translateX(-1px);
	pointer-events: none;
}

/*
 * The supplied artwork carries its own white disc and arrows.
 *
 * flex: 0 0 auto is load-bearing. The handle is the only flex item inside a
 * divider just 2px wide, so with the default flex-shrink: 1 the browser
 * crushes it from 39px down to 2px and it disappears behind the line. This
 * keeps it at full size, overflowing the divider evenly on both sides.
 */
.am-compare__handle {
	flex: 0 0 auto;
	display: block;
	width: 39px;
	height: 39px;
	filter: drop-shadow(0 2px 8px rgba(var(--am-ink-rgb), .3));
	transition: transform var(--am-transition);
}

.am-compare__handle svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Confirms the panel is draggable before anyone has tried. */
.am-compare:hover .am-compare__handle,
.am-compare__range:focus-visible ~ .am-compare__divider .am-compare__handle {
	transform: scale(1.08);
}

/* The range input is the real control: invisible but on top. */
.am-compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: ew-resize;
	appearance: none;
	background: transparent;
}

.am-compare__range:focus-visible {
	outline: 2px solid var(--am-brand);
	outline-offset: 2px;
}

.am-compare__caption {
	margin-top: var(--am-space-3);
	color: var(--am-muted);
	font-size: var(--am-fs-small);
}

/*--------------------------------------------------------------
Media
--------------------------------------------------------------*/
.am-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.am-embed {
	position: relative;
	aspect-ratio: 16 / 9;
}

.am-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.am-media-cover img,
.am-media-cover video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*--------------------------------------------------------------
Background media
--------------------------------------------------------------*/
.am-bg-media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background-color: var(--am-ink);
}

.am-bg-media__video,
.am-bg-media__image,
.am-bg-media img,
.am-bg-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fills the frame regardless of the embed's own aspect ratio. */
.am-bg-media__embed {
	position: absolute;
	inset: 0;
}

.am-bg-media__embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.77vh;
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.am-bg-media__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--am-ink-rgb), .55) 0%, rgba(var(--am-ink-rgb), .3) 45%, rgba(var(--am-ink-rgb), .7) 100%);
}

/*--------------------------------------------------------------
Empty media slot
--------------------------------------------------------------*/
/*
 * Shown while a section is still waiting for its photography, so an
 * unfinished page reads as deliberate rather than broken. Once an image is
 * attached the class is dropped and this never applies.
 */
.am-media-empty {
	position: relative;
	min-height: 280px;
	background-color: var(--am-surface-soft);
	background-image:
		repeating-linear-gradient(
			45deg,
			rgba(var(--am-brand-rgb), .05) 0,
			rgba(var(--am-brand-rgb), .05) 10px,
			transparent 10px,
			transparent 20px
		);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
}

.am-media-empty::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 2px solid var(--am-line);
	border-radius: 50%;
}

.am-member__photo.am-media-empty {
	aspect-ratio: 4 / 5;
}

/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/
/*
 * A row carries the same bottom margin a single field does. Without it the
 * fields inside a row have theirs zeroed and the row has none of its own,
 * so two rows stack flush and the second row's labels sit tight against the
 * inputs above them.
 */
/*
 * Field padding as a token: the selector that applies it is a ten-line
 * exclusion list, and a second copy of that in a media query is a second
 * place for it to fall out of step.
 */
.am-form {
	--am-field-pad: 16px;
	/* The inline half on its own, for anything laid over the field's text. */
	--am-field-pad-x: 16px;
}

.am-form__row {
	display: grid;
	gap: var(--am-space-4);
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: var(--am-space-4);
}

@media (min-width: 640px) {
	.am-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.am-form__field {
	margin: 0 0 var(--am-space-4);
}

.am-form__row .am-form__field {
	margin-bottom: 0;
}

.am-form label,
.am-form legend {
	display: block;
	margin-bottom: 6px;
	color: var(--am-ink);
	font-size: var(--am-fs-base);
	font-weight: 500;
}

/*
 * Named by exclusion rather than by list. A whitelist of input types is a
 * standing invitation to a field that looks nothing like its neighbours:
 * the day someone adds a date, a number or a search box it drops through
 * to the browser's own control, at the browser's own width, in the
 * browser's own font. Only the types that must stay native are named.
 */
.am-form input:not(
	[type="radio"],
	[type="checkbox"],
	[type="submit"],
	[type="button"],
	[type="reset"],
	[type="image"],
	[type="file"],
	[type="range"],
	[type="color"],
	[type="hidden"]
),
.am-form select,
.am-form textarea {
	width: 100%;
	padding: var(--am-field-pad, 16px);
	/* Focus swaps the colour only, so the width is the same either way. */
	border: .6px solid var(--am-field-border);
	border-radius: var(--am-radius);
	background-color: var(--am-white);
	color: var(--am-ink);
	font-family: inherit;
	font-size: var(--am-fs-base);
	transition: border-color var(--am-transition), box-shadow var(--am-transition);
}

.am-form textarea {
	min-height: 120px;
	resize: vertical;
}

/*
 * Date and time controls lay themselves out at an intrinsic width in
 * WebKit and ignore the one they are given, which on a phone leaves a
 * stub of a field in a full-width column. Dropping the native appearance
 * hands the sizing back to us; the padding above then applies as it does
 * to every other field.
 */
.am-form input[type="date"],
.am-form input[type="datetime-local"],
.am-form input[type="month"],
.am-form input[type="time"],
.am-form input[type="week"] {
	-webkit-appearance: none;
	appearance: none;
	line-height: 1.5;
	/*
	 * Empty, the control holds no text to prop it open, and the mobile
	 * browsers collapse it to its padding — a squat box beside full-height
	 * neighbours. One line of text plus the padding and border, exactly
	 * what the filled control measures, so nothing moves on pick.
	 */
	min-height: calc(1.5em + 2 * var(--am-field-pad, 16px) + 1.2px);
}

/*
 * iOS draws the chosen date centred in a collapsed box of its own;
 * ranged left with a line's height, it sits as the text fields' values do.
 */
.am-form input::-webkit-date-and-time-value {
	min-height: 1.5em;
	text-align: left;
}

/*
 * The date field's stand-in placeholder. Date inputs ignore the placeholder
 * attribute; the desktop browsers at least show their own "dd/mm/yyyy", but
 * a phone draws the empty control blank — the one field on the form that
 * does not say what it wants. So a span sits over the field with the hint,
 * and the control's own text goes transparent underneath it, which also
 * retires the desktop browsers' format hint so the two never show at once.
 *
 * All of it hangs off the --ready class site.js sets: no JS, no overlay,
 * and the browser's own control stands unmodified — a picked date must
 * never be transparent with nobody there to lift it.
 */
.am-form__date {
	/* The mark's own measures: --am-field-pad is a shorthand on phones and cannot be calculated with. */
	--am-date-mark: 20px;
	--am-date-mark-inset: 14px;
	--am-date-mark-room: calc(var(--am-date-mark) + var(--am-date-mark-inset) * 2);

	position: relative;
	display: block;
}

/*
 * A calendar mark at the field's right edge, so the one control on the
 * form that opens a picker looks like it does. Drawn by the stylesheet
 * rather than the browser: Chrome shows its own indicator, Safari on a
 * phone shows nothing, and the field should read the same everywhere.
 * The browser's own indicator is kept — it is what opens the picker on
 * a click — but made invisible and laid over the mark, so the mark is
 * what the visitor sees and the indicator is what they press.
 */
.am-form__date::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--am-date-mark-inset);
	width: var(--am-date-mark);
	height: var(--am-date-mark);
	transform: translateY(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

/* Typed with the attribute so it outranks the base field rule's :not() list. */
.am-form__date input[type="date"] {
	position: relative;
	padding-right: var(--am-date-mark-room);
}

/*
 * Outranks the general indicator rules below by one class: they and this
 * would otherwise tie, and the later one — theirs, at half opacity —
 * won, which drew the browser's calendar beside the stylesheet's.
 */
.am-form .am-form__date input::-webkit-calendar-picker-indicator {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--am-date-mark-room);
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

.am-form__date-hint {
	display: none;
}

.am-form__date--ready:not(.has-value):not(:focus-within) input {
	color: transparent;
}

.am-form__date--ready:not(.has-value):not(:focus-within) .am-form__date-hint {
	display: block;
	position: absolute;
	top: 50%;
	left: calc(var(--am-field-pad-x, 16px) + .6px);
	right: var(--am-date-mark-room);
	transform: translateY(-50%);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--am-placeholder);
	pointer-events: none;
}

/* The picker button is the only part of the control still drawn for us. */
.am-form input::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: .5;
	transition: opacity var(--am-transition);
}

.am-form input:hover::-webkit-calendar-picker-indicator,
.am-form input:focus::-webkit-calendar-picker-indicator {
	opacity: 1;
}

/* Inside the wrapper the stylesheet's own mark is the visible one, always. */
.am-form .am-form__date input:hover::-webkit-calendar-picker-indicator,
.am-form .am-form__date input:focus::-webkit-calendar-picker-indicator {
	opacity: 0;
}

/*
 * Firefox draws a calendar button of its own inside a date field and
 * offers no way to style or hide it, so there it is the one that shows
 * and the stylesheet's mark stands down — one calendar, whichever browser.
 * -moz-appearance is only ever supported by Firefox, which is the test.
 */
@supports (-moz-appearance: none) {
	.am-form__date::after {
		display: none;
	}

	.am-form .am-form__date input[type="date"] {
		padding-right: var(--am-field-pad-x, 16px);
	}
}

.am-form input::placeholder,
.am-form textarea::placeholder {
	color: var(--am-placeholder);
}

/* ---------------------------------------------------------------
 * Select
 *
 * Two layers, because the drop-down list is not equally styleable
 * everywhere.
 *
 * The first flattens the native control and paints our own arrow. Every
 * browser gets that, and it has to stand on its own rather than assume the
 * second layer runs.
 *
 * The second opts into the customizable select API, which is the only way to
 * style the list itself rather than leave it to the operating system — that is
 * where the blue highlight comes from. Chrome and Edge 135+ and Safari 27 take
 * it; anywhere else the control still looks right and the list stays native.
 * ------------------------------------------------------------ */
.am-form select {
	appearance: none;
	/* Room for the arrow, so a long option cannot run underneath it. */
	padding-right: 46px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%23896F5C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px 9px;
	cursor: pointer;
}

@supports (appearance: base-select) {

	/*
	 * Both halves are required: opting in the picker alone does nothing.
	 */
	.am-form select,
	.am-form select::picker(select) {
		appearance: base-select;
	}

	/* The API draws its own arrow, so the painted one comes back off. */
	.am-form select {
		padding-right: 16px;
		background-image: none;
	}

	.am-form select::picker-icon {
		margin-left: auto;
		color: var(--am-brand);
		transition: rotate var(--am-transition);
	}

	.am-form select:open::picker-icon {
		rotate: 180deg;
	}

	.am-form select:open {
		border-color: var(--am-brand);
	}

	/* The list. */
	.am-form select::picker(select) {
		margin-top: 6px;
		padding: 6px;
		border: .6px solid var(--am-field-border);
		border-radius: var(--am-radius);
		background-color: var(--am-white);
		box-shadow: var(--am-shadow);
		opacity: 0;
		translate: 0 -6px;
		/*
		 * display and overlay are discrete properties, so without
		 * allow-discrete the list would vanish instantly on close and the
		 * fade would never be seen.
		 */
		transition:
			opacity var(--am-transition),
			translate var(--am-transition),
			display var(--am-transition) allow-discrete,
			overlay var(--am-transition) allow-discrete;
	}

	.am-form select:open::picker(select) {
		opacity: 1;
		translate: 0 0;
	}

	/* Where the open transition starts from, coming out of display: none. */
	@starting-style {
		.am-form select:open::picker(select) {
			opacity: 0;
			translate: 0 -6px;
		}
	}

	.am-form option {
		display: flex;
		align-items: center;
		padding: 12px 14px;
		border-radius: var(--am-radius);
		background-color: transparent;
		color: var(--am-ink);
		font-family: inherit;
		font-size: var(--am-fs-base);
		cursor: pointer;
	}

	/* Replaces the operating system's blue bar. */
	.am-form option:hover,
	.am-form option:focus {
		background-color: var(--am-brand-soft);
		color: var(--am-ink);
		outline: none;
	}

	.am-form option:checked {
		background-color: var(--am-brand-soft);
		font-weight: 700;
	}

	/*
	 * The fill already says which option is selected, and the tick reserves
	 * space in every row whether it is shown or not.
	 */
	.am-form option::checkmark {
		display: none;
	}
}

.am-form input:focus,
.am-form select:focus,
.am-form textarea:focus {
	border-color: var(--am-brand);
	box-shadow: 0 0 0 3px var(--am-brand-soft);
	outline: none;
}

.am-form__choices {
	padding: 0;
	border: 0;
	margin-bottom: var(--am-space-5);
}

.am-form__choices > legend {
	padding: 0;
}

.am-choice {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--am-space-2);
	flex: 1 1 auto;
	margin: 0;
	padding: 16px;
	/* Matches the inputs it sits beneath — they share one border treatment. */
	border: .6px solid var(--am-field-border);
	border-radius: var(--am-radius);
	cursor: pointer;
	font-weight: 400;
	transition: border-color var(--am-transition), background-color var(--am-transition);
}

.am-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--am-space-2);
}

.am-form__choices > legend {
	flex: 1 0 100%;
}

.am-choice:has(input:checked) {
	border-color: var(--am-brand);
	background-color: var(--am-brand-soft);
}

.am-choice input {
	accent-color: var(--am-brand);
}

.am-form__submit {
	margin: 0 0 var(--am-space-4);
}

.am-form__consent {
	margin: 0;
	color: var(--am-body);
	font-size: var(--am-fs-base);
}

/*
 * The form on a phone.
 *
 * 16px inside every field makes each one about 52px tall, and there are
 * six of them plus a legend and a button — the form was taller than two
 * screens before anyone typed anything. 12px keeps a field at 43px, which
 * is still a target you can hit, and the row spacing comes in with it.
 */
@media (max-width: 767px) {
	.am-form {
		--am-field-pad: 12px 14px;
		--am-field-pad-x: 14px;
	}

	.am-form textarea {
		min-height: 92px;
	}

	.am-form label,
	.am-form legend {
		margin-bottom: 4px;
	}

	.am-form__field {
		margin-bottom: var(--am-space-3);
	}

	.am-form__row {
		gap: var(--am-space-3);
		margin-bottom: var(--am-space-3);
	}

	/* The pills match the fields above them, as they do at full size. */
	.am-choice {
		padding: 12px 14px;
	}

	.am-form__choices {
		margin-bottom: var(--am-space-4);
	}
}

/* Honeypot */
.am-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*--------------------------------------------------------------
Notices
--------------------------------------------------------------*/
/*
 * The palette has no red or green, so success and failure are told apart by a
 * leading glyph and by weight rather than by hue. That is the accessible
 * pattern anyway — WCAG 1.4.1 says colour must never be the only signal, and
 * roughly 1 in 12 men cannot separate red from green.
 */
.am-notice {
	display: flex;
	gap: var(--am-space-3);
	margin: 0 0 var(--am-space-4);
	padding: 14px 18px;
	border-left: 3px solid var(--am-brand);
	border-radius: var(--am-radius);
	background-color: var(--am-surface-soft);
	color: var(--am-ink);
	font-size: var(--am-fs-base);
}

.am-notice::before {
	flex: 0 0 auto;
	font-weight: 700;
	line-height: inherit;
}

.am-notice--success {
	border-left-color: var(--am-brand);
}

.am-notice--success::before {
	content: "\2713"; /* check mark */
	color: var(--am-brand);
}

.am-notice--error {
	border-left-color: var(--am-ink);
	background-color: var(--am-surface-tint);
	font-weight: 600;
}

.am-notice--error::before {
	content: "\0021"; /* exclamation mark */
	color: var(--am-ink);
}

/*--------------------------------------------------------------
reCAPTCHA
--------------------------------------------------------------*/
.am-form__captcha {
	margin-bottom: var(--am-space-5);
}

/* The widget is a fixed 304px; let it shrink rather than overflow the panel. */
.am-form__captcha .g-recaptcha {
	display: block;
	max-width: 100%;
	overflow: hidden;
}

@media (max-width: 400px) {
	.am-form__captcha .g-recaptcha > div {
		transform: scale(.86);
		transform-origin: 0 0;
	}
}