/*
 * AES 2026 — Registration theme.
 *
 * Everything here is either the site frame (header, footer) or a component the
 * registration screens need. Colours, fonts, sizes and spacing come from
 * theme.json as custom properties, so nothing below hard-codes a brand value
 * that could drift from the marketing site.
 *
 * Contents
 *   1. Frame            header, footer, main
 *   2. Page head        eyebrow, title, step indicator
 *   3. Layout           the form-and-summary two-column grid
 *   4. Form             sections, fields, choice cards, upload, consent
 *   5. Summary          the booking panel
 *   6. Notices          errors, secure note, test-mode banner
 *   7. Responsive
 */

/* ---------------------------------------------------------------------------
 * 1. Frame
 * ------------------------------------------------------------------------ */

/*
 * Border-box sizing, everywhere.
 *
 * Without this a text input computes as its min-height PLUS its padding PLUS
 * its border — 46 + 22 + 2 = 70px — while a <select> sizes itself differently.
 * Two fields side by side in the same grid row then have visibly different
 * heights and the rows appear to collide. WordPress's own stylesheets set this
 * for blocks but not for arbitrary plugin markup, so it has to be stated.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--aesrt-radius: 14px;
	--aesrt-radius-sm: 10px;
	--aesrt-field: 46px;
	--aesrt-gutter: clamp( 16px, 4vw, 32px );
}

body {
	background: var( --wp--preset--color--white );
	-webkit-font-smoothing: antialiased;
}

.aesrt-header {
	background: var( --wp--preset--color--white );
	border-bottom: 1px solid var( --wp--preset--color--line );
	position: sticky;
	top: 0;
	z-index: 40;
}

.aesrt-header__inner,
.aesrt-footer__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 18px var( --aesrt-gutter );
	gap: 20px;
}

.aesrt-brand {
	gap: 12px !important;
}

/* The mark, drawn rather than shipped as an image: one fewer request on a page
   where every millisecond is a chance to lose somebody mid-payment. It hides
   itself if a real logo is set in the Site Editor. */
/* The "10th" tile from the summit logo, so the registration site is visibly
   the same event as the marketing site rather than a payment page somebody
   has been redirected to. */
.aesrt-brand__mark {
	width: 34px;
	height: 34px;
	margin: 0 !important;
	background: url( ../images/mark-180.png ) center / contain no-repeat;
	flex: 0 0 auto;
}

@media ( -webkit-min-device-pixel-ratio: 1.5 ), ( min-resolution: 144dpi ) {
	.aesrt-brand__mark { background-image: url( ../images/mark-256.png ); }
}

.aesrt-brand__text > * {
	margin: 0 !important;
}

.aesrt-brand__name {
	font-family: var( --wp--preset--font-family--display );
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.aesrt-brand__name a {
	color: var( --wp--preset--color--ink );
	text-decoration: none;
}

.aesrt-brand__sub {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mute );
	line-height: 1.4;
	margin-top: 2px !important;
}

.aesrt-header__aux {
	gap: 18px !important;
}

.aesrt-header__aux p {
	margin: 0 !important;
	font-size: 13px;
}

/* A padlock drawn in CSS, for the same reason as the mark. */
.aesrt-header__secure {
	color: var( --wp--preset--color--mute );
	display: flex;
	align-items: center;
	gap: 7px;
}

.aesrt-header__secure::before {
	content: "";
	width: 13px;
	height: 15px;
	flex: 0 0 auto;
	background: var( --wp--preset--color--green );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 15'%3E%3Cpath d='M2.6 6V4a3.9 3.9 0 0 1 7.8 0v2h.4a1.2 1.2 0 0 1 1.2 1.2v6.1A1.2 1.2 0 0 1 10.8 14.5H2.2A1.2 1.2 0 0 1 1 13.3V7.2A1.2 1.2 0 0 1 2.2 6zm1.6 0h4.6V4a2.3 2.3 0 0 0-4.6 0z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 15'%3E%3Cpath d='M2.6 6V4a3.9 3.9 0 0 1 7.8 0v2h.4a1.2 1.2 0 0 1 1.2 1.2v6.1A1.2 1.2 0 0 1 10.8 14.5H2.2A1.2 1.2 0 0 1 1 13.3V7.2A1.2 1.2 0 0 1 2.2 6zm1.6 0h4.6V4a2.3 2.3 0 0 0-4.6 0z'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

.aesrt-header__link a {
	color: var( --wp--preset--color--body );
	text-decoration: none;
}

.aesrt-header__link a:hover {
	color: var( --wp--preset--color--green );
}

.aesrt-main {
	min-height: 60vh;
	padding-bottom: 72px;
}

.aesrt-footer {
	border-top: 1px solid var( --wp--preset--color--line );
	margin-top: 64px;
	background: var( --wp--preset--color--white );
}

.aesrt-footer__inner {
	padding-top: 26px;
	padding-bottom: 26px;
}

.aesrt-footer p {
	margin: 0 !important;
	font-size: 12.5px;
	color: var( --wp--preset--color--mute );
}

.aesrt-footer__links a {
	color: var( --wp--preset--color--body );
	text-decoration: none;
}

.aesrt-footer__links a:hover {
	color: var( --wp--preset--color--green );
	text-decoration: underline;
}

.aesrt-footer__links span {
	color: var( --wp--preset--color--line );
	margin: 0 6px;
}

/* ---------------------------------------------------------------------------
 * 2. Page head
 * ------------------------------------------------------------------------ */

.aesrt-head {
	background: var( --wp--preset--color--mist );
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.aesrt-head__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 44px var( --aesrt-gutter ) 32px;
}

.aesrt-crumb {
	font-size: 12.5px;
	color: var( --wp--preset--color--mute );
	margin: 0 0 14px;
}

.aesrt-crumb a {
	color: var( --wp--preset--color--green );
	font-weight: 600;
	text-decoration: none;
}

.aesrt-crumb span {
	margin: 0 7px;
	color: var( --wp--preset--color--line );
}

.aesrt-head h1 {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.9rem, 3.4vw, 2.5rem );
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.08;
	color: var( --wp--preset--color--ink );
	margin: 0;
}

.aesrt-head__lede {
	margin: 12px 0 0;
	max-width: 52ch;
	color: var( --wp--preset--color--body );
	font-size: 15px;
	line-height: 1.6;
}

/* The step indicator. Rendered as an ordered list so that a screen reader
   announces "step 2 of 4" rather than reading four disconnected words. */
.aesrt-steps {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}

.aesrt-steps__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 16px 7px 8px;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 999px;
	background: var( --wp--preset--color--white );
	font-size: 13px;
	font-weight: 500;
	color: var( --wp--preset--color--mute );
	white-space: nowrap;
}

.aesrt-steps__num {
	width: 21px;
	height: 21px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var( --wp--preset--color--haze );
	color: var( --wp--preset--color--body );
	font-size: 11px;
	font-weight: 700;
}

.aesrt-steps__item.is-current {
	background: var( --wp--preset--color--green );
	border-color: var( --wp--preset--color--green );
	color: var( --wp--preset--color--white );
	font-weight: 600;
}

.aesrt-steps__item.is-current .aesrt-steps__num {
	background: rgba( 255, 255, 255, 0.24 );
	color: var( --wp--preset--color--white );
}

.aesrt-steps__item.is-done {
	color: var( --wp--preset--color--ink );
}

.aesrt-steps__item.is-done .aesrt-steps__num {
	background: var( --wp--preset--color--green );
	color: transparent;
	position: relative;
}

/* A tick, so a completed step reads as finished rather than merely numbered. */
.aesrt-steps__item.is-done .aesrt-steps__num::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var( --wp--preset--color--white );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E" ) center / 13px no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E" ) center / 13px no-repeat;
}

.aesrt-steps__rule {
	width: 22px;
	height: 1px;
	background: var( --wp--preset--color--line );
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * 3. Layout
 * ------------------------------------------------------------------------ */

.aesrt-shell {
	max-width: 1120px;
	margin: 0 auto;
	padding: 34px var( --aesrt-gutter ) 0;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 330px;
	gap: 24px;
	align-items: start;
}

.aesrt-panel {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --aesrt-radius );
	padding: 30px clamp( 20px, 3vw, 34px ) 32px;
}

/* ---------------------------------------------------------------------------
 * 4. Form
 * ------------------------------------------------------------------------ */

.aesrt-sec + .aesrt-sec {
	margin-top: 30px;
}

.aesrt-sec__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
}

.aesrt-sec__num {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var( --wp--preset--color--green );
	color: var( --wp--preset--color--white );
	font-size: 10.5px;
	font-weight: 700;
}

.aesrt-sec__title {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink );
}

.aesrt-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	/* Roomier than before: the designs give the fields air, and an error
	   message under one field was landing close enough to the next row to read
	   as belonging to it. */
	gap: 22px 24px;
	/* Without this, a field beside one carrying an error message stretches to
	   the taller row and its control drifts away from its own label. */
	align-items: start;
}

.aesrt-field--full {
	grid-column: 1 / -1;
}

.aesrt-field label,
.aesrt-label {
	display: block;
	font-size: 12.5px;
	font-weight: 500;
	color: var( --wp--preset--color--ink );
	margin-bottom: 6px;
}

.aesrt-field input[type="text"],
.aesrt-field input[type="email"],
.aesrt-field input[type="tel"],
.aesrt-field input[type="url"],
.aesrt-field input[type="number"],
.aesrt-field select,
.aesrt-field textarea {
	width: 100%;
	/* A fixed height rather than a minimum, so an input and a select in the
	   same row are exactly the same size. Browsers give selects their own
	   intrinsic height otherwise, and a one-pixel difference between two
	   adjacent fields is the kind of thing that looks like a broken layout
	   without anyone being able to say why. */
	height: var( --aesrt-field );
	padding: 11px 14px;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --aesrt-radius-sm );
	background: var( --wp--preset--color--white );
	font-family: inherit;
	font-size: 14.5px;
	color: var( --wp--preset--color--ink );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* A select loses its native arrow to appearance:none, so one is drawn back on.
   Right padding leaves room for it, and the arrow is a background image so it
   cannot be clicked separately from the control. */
.aesrt-field select {
	padding-right: 40px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2355606B' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 15px center;
	cursor: pointer;
}

.aesrt-field textarea {
	/* Overrides the fixed height the inputs share — a textarea grows. */
	height: auto;
	min-height: 118px;
	padding: 13px 14px;
	resize: vertical;
	line-height: 1.55;
}

.aesrt-field input:focus,
.aesrt-field select:focus,
.aesrt-field textarea:focus {
	outline: none;
	border-color: var( --wp--preset--color--green );
	box-shadow: 0 0 0 3px rgba( 19, 160, 92, 0.15 );
}

.aesrt-field input::placeholder,
.aesrt-field textarea::placeholder {
	color: var( --wp--preset--color--mute );
}

.aesrt-field__help {
	margin: 6px 0 0;
	font-size: 12px;
	color: var( --wp--preset--color--mute );
	line-height: 1.5;
}

/* What will actually be stored, shown live under a web-address box. Green and
   quiet: it is a confirmation, not a correction, and it must not read as an
   error to somebody who has typed something perfectly good. */
.aesrt-field__echo {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var( --wp--preset--color--green );
	word-break: break-all;
}

.aesrt-field__echo[hidden] {
	display: none;
}

.aesrt-field__echo::before {
	content: "\2192"; /* → */
	flex: 0 0 auto;
	font-size: 13px;
	line-height: 1.35;
}

/* An invalid field is marked in three ways at once — colour, a border and a
   message — because colour alone fails anyone who cannot distinguish it. */
.aesrt-field.has-error input,
.aesrt-field.has-error select,
.aesrt-field.has-error textarea {
	border-color: #B42318;
	/* background-color, not the background shorthand: the shorthand resets
	   background-image too, which silently strips the arrow off a select and
	   leaves an error-state dropdown looking like a dead text box. */
	background-color: #FFFBFA;
}

.aesrt-field__error {
	margin: 6px 0 0;
	font-size: 12.5px;
	font-weight: 500;
	color: #B42318;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	line-height: 1.45;
}

.aesrt-field__error::before {
	content: "!";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 1px;
	border-radius: 50%;
	background: #B42318;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

/* Choice cards — used for both the category list and the payment methods. */
.aesrt-choices {
	display: grid;
	gap: 12px;
}

.aesrt-choice {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 20px;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --aesrt-radius-sm );
	background: var( --wp--preset--color--white );
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.aesrt-choice:hover {
	border-color: var( --wp--preset--color--green );
}

.aesrt-choice input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.aesrt-choice__dot {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	margin-top: 2px;
	border: 1.5px solid var( --wp--preset--color--line );
	border-radius: 50%;
	background: var( --wp--preset--color--white );
	transition: border-color 0.15s ease, border-width 0.15s ease;
}

.aesrt-choice__body {
	min-width: 0;
}

.aesrt-choice__title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	color: var( --wp--preset--color--ink );
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
}

.aesrt-choice__price {
	font-size: 13px;
	font-weight: 600;
	color: var( --wp--preset--color--green );
}

.aesrt-choice__blurb {
	margin: 5px 0 0;
	font-size: 13px;
	color: var( --wp--preset--color--body );
	line-height: 1.5;
}

.aesrt-choice.is-selected {
	border-color: var( --wp--preset--color--green );
	background: var( --wp--preset--color--tint );
	box-shadow: 0 0 0 1px var( --wp--preset--color--green );
}

.aesrt-choice.is-selected .aesrt-choice__dot {
	border: 6px solid var( --wp--preset--color--green );
}

/* Keyboard focus has to be visible on the card, since the real radio is
   hidden. */
.aesrt-choice input[type="radio"]:focus-visible ~ .aesrt-choice__dot {
	outline: 2px solid var( --wp--preset--color--green );
	outline-offset: 3px;
}

/* Badge photograph upload. */
.aesrt-upload {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 20px;
	border: 1.5px dashed var( --wp--preset--color--line );
	border-radius: var( --aesrt-radius-sm );
	background: var( --wp--preset--color--sand );
}

.aesrt-upload__preview {
	width: 58px;
	height: 72px;
	flex: 0 0 auto;
	border-radius: 7px;
	background: var( --wp--preset--color--haze ) center / cover no-repeat;
	border: 1px solid var( --wp--preset--color--line );
}

.aesrt-upload__body {
	min-width: 0;
	flex: 1 1 auto;
}

/* These are spans inside a <label>, because a label may not contain block-level
   headings. Made block-level here so they stack as the design shows. */
.aesrt-upload__body {
	display: flex;
	flex-direction: column;
}

.aesrt-upload__title {
	display: block;
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	color: var( --wp--preset--color--ink );
}

.aesrt-upload__spec {
	display: block;
	margin: 4px 0 0;
	font-size: 12px;
	color: var( --wp--preset--color--mute );
	line-height: 1.5;
}

.aesrt-upload__spec strong {
	display: block;
	margin-top: 3px;
	color: var( --wp--preset--color--green );
	font-weight: 600;
}

.aesrt-upload.has-error {
	border-color: #FDA29B;
	background: #FFFBFA;
}

.aesrt-upload input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

/* Consent block. */
.aesrt-consent {
	margin-top: 22px;
	padding: 16px 18px;
	border-left: 3px solid var( --wp--preset--color--green );
	background: var( --wp--preset--color--tint );
	border-radius: 0 var( --aesrt-radius-sm ) var( --aesrt-radius-sm ) 0;
}

.aesrt-consent__label {
	margin: 0 0 6px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--green );
}

.aesrt-consent p {
	margin: 0;
	font-size: 12.5px;
	color: var( --wp--preset--color--body );
	line-height: 1.55;
}

.aesrt-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	font-size: 13px;
	color: var( --wp--preset--color--ink );
	line-height: 1.5;
	cursor: pointer;
}

.aesrt-check input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	flex: 0 0 auto;
	accent-color: var( --wp--preset--color--green );
}

/* Actions. */
.aesrt-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	flex-wrap: wrap;
}

.aesrt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: var( --aesrt-radius-sm );
	background: var( --wp--preset--color--green );
	color: var( --wp--preset--color--white );
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.aesrt-btn:hover {
	background: var( --wp--preset--color--deep );
	color: var( --wp--preset--color--white );
}

.aesrt-btn--ghost {
	background: var( --wp--preset--color--white );
	border-color: var( --wp--preset--color--line );
	color: var( --wp--preset--color--ink );
}

.aesrt-btn--ghost:hover {
	background: var( --wp--preset--color--mist );
	border-color: var( --wp--preset--color--mute );
	color: var( --wp--preset--color--ink );
}

.aesrt-btn[disabled],
.aesrt-btn.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.aesrt-btn--add {
	min-height: 40px;
	padding: 9px 18px;
	font-size: 13.5px;
	background: var( --wp--preset--color--white );
	border-color: var( --wp--preset--color--green );
	color: var( --wp--preset--color--green );
}

.aesrt-btn--add:hover {
	background: var( --wp--preset--color--tint );
	color: var( --wp--preset--color--deep );
}

/* ---------------------------------------------------------------------------
 * 5. Summary
 * ------------------------------------------------------------------------ */

.aesrt-summary {
	background: var( --wp--preset--color--mist );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --aesrt-radius );
	padding: 22px 24px 24px;
	position: sticky;
	top: 96px;
}

.aesrt-summary__label {
	margin: 0 0 14px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var( --wp--preset--color--green );
}

.aesrt-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 5px 0;
	font-size: 13px;
}

.aesrt-summary__row dt {
	color: var( --wp--preset--color--body );
	margin: 0;
}

.aesrt-summary__row dd {
	margin: 0;
	font-weight: 600;
	color: var( --wp--preset--color--ink );
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.aesrt-summary__row--discount dd {
	color: var( --wp--preset--color--green );
}

.aesrt-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px solid var( --wp--preset--color--line );
}

.aesrt-summary__total dt {
	font-size: 13.5px;
	font-weight: 600;
	color: var( --wp--preset--color--ink );
	margin: 0;
}

.aesrt-summary__total dd {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--ink );
	font-variant-numeric: tabular-nums;
}

.aesrt-note {
	margin-top: 18px;
	padding: 13px 15px;
	border-left: 3px solid var( --wp--preset--color--green );
	background: var( --wp--preset--color--white );
	border-radius: 0 var( --aesrt-radius-sm ) var( --aesrt-radius-sm ) 0;
}

.aesrt-note__label {
	margin: 0 0 5px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--green );
}

.aesrt-note p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --wp--preset--color--body );
}

/* ---------------------------------------------------------------------------
 * 6. Notices
 * ------------------------------------------------------------------------ */

.aesrt-alert {
	margin-bottom: 22px;
	padding: 14px 16px;
	border-radius: var( --aesrt-radius-sm );
	border: 1px solid #FDA29B;
	background: #FFFBFA;
	color: #7A271A;
	font-size: 13.5px;
	line-height: 1.55;
}

.aesrt-alert strong {
	display: block;
	margin-bottom: 3px;
}

.aesrt-testbar {
	background: #FEF3C7;
	color: #78350F;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 16px;
	letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
 * 7. Responsive
 * ------------------------------------------------------------------------ */

@media ( max-width: 980px ) {
	.aesrt-shell {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* The summary moves above the form on narrow screens. Someone on a phone
	   should see what they are about to pay before they start typing, not
	   after scrolling past the whole form. */
	.aesrt-summary {
		position: static;
		order: -1;
	}
}

@media ( max-width: 640px ) {
	.aesrt-grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.aesrt-header__secure {
		display: none;
	}

	.aesrt-brand__sub {
		white-space: nowrap;
	}
}

/* Below this, the edition line and the return link fight for the same row and
   both wrap, which doubles the height of a sticky header on the smallest
   screens. The edition line is the one that can go: it is decoration, and the
   summit's name is already right beside it. */
@media ( max-width: 520px ) {
	.aesrt-brand__sub {
		display: none;
	}

	.aesrt-header__inner {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.aesrt-head__inner {
		padding-top: 30px;
		padding-bottom: 24px;
	}

	.aesrt-steps {
		gap: 8px;
	}

	.aesrt-steps__rule {
		display: none;
	}

	.aesrt-steps__item {
		font-size: 12px;
		padding: 6px 13px 6px 7px;
	}

	.aesrt-actions .aesrt-btn {
		flex: 1 1 100%;
	}

	.aesrt-upload {
		flex-wrap: wrap;
	}
}

/* Respect a reduced-motion preference: the only transitions here are colour
   changes, but honour it anyway rather than making an exception. */
@media ( prefers-reduced-motion: reduce ) {
	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Small pieces the flow templates rely on. */

.aesrt-optional {
	font-weight: 400;
	color: var( --wp--preset--color--mute );
	font-size: 11.5px;
	margin-left: 4px;
}

/* Visible only to screen readers. Used to say "completed" on a finished step,
   where the tick conveys it to everyone else. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.aesrt-sec legend {
	border: 0;
	margin: 0;
}

.aesrt-sec legend .aesrt-sec__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
}

/* The quantity section hides itself for single-booking categories. */
[data-aesr-qty-section][hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 8. Waiting, done, and the pass
 * ------------------------------------------------------------------------ */

.aesrt-waiting {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px;
	border-radius: var( --aesrt-radius-sm );
	background: var( --wp--preset--color--mist );
}

.aesrt-waiting__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var( --wp--preset--color--ink );
}

.aesrt-waiting__note {
	margin: 5px 0 0;
	font-size: 13px;
	color: var( --wp--preset--color--body );
}

.aesrt-spinner {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	margin-top: 2px;
	border: 2.5px solid var( --wp--preset--color--haze );
	border-top-color: var( --wp--preset--color--green );
	border-radius: 50%;
	animation: aesrt-spin 0.9s linear infinite;
}

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

/* With reduced motion the ring stops turning, so it becomes a static marker
   rather than nothing at all. */
@media ( prefers-reduced-motion: reduce ) {
	.aesrt-spinner {
		animation: none;
		border-top-color: var( --wp--preset--color--green );
	}
}

/* ---------------------------------------------------------------------------
 * 8b. The confirming screen
 *
 * One status bar that says where the payment has got to, and a four-step list
 * underneath that says what the server is doing. The list carries state in a
 * class rather than in colour alone: every row also has a distinct mark shape,
 * so it still reads when colour is unavailable.
 * ------------------------------------------------------------------------ */

.aesrt-statusbar {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --aesrt-radius-sm );
	background: var( --wp--preset--color--mist );
}

.aesrt-statusbar__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --wp--preset--color--ink );
}

.aesrt-statusbar__note {
	margin: 5px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --wp--preset--color--body );
	font-variant-numeric: tabular-nums;
}

/* Taking longer than expected. Amber, not red: nothing has gone wrong yet. */
.aesrt-statusbar--warn {
	border-color: #FDE68A;
	background: #FFFBEB;
}

.aesrt-statusbar--warn .aesrt-statusbar__title {
	color: #78350F;
}

.aesrt-statusbar--warn .aesrt-statusbar__note {
	color: #92400E;
}

/* The dot stands in for the spinner once we have stopped polling, so the bar
   keeps the same shape instead of the text jumping left. */
.aesrt-statusbar__dot {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	margin-top: 2px;
	border-radius: 50%;
	background: #F59E0B;
	box-shadow: 0 0 0 4px rgba( 245, 158, 11, 0.18 );
}

/* ---- The four steps ---- */

.aesrt-progress {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aesrt-progress__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 0 0 20px;
}

/* The line joining one mark to the next, drawn from the mark downwards and
   omitted on the last row so the list does not trail off. */
.aesrt-progress__item::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 22px;
	bottom: 0;
	width: 2px;
	background: var( --wp--preset--color--line );
}

.aesrt-progress__item:last-child {
	padding-bottom: 0;
}

.aesrt-progress__item:last-child::before {
	display: none;
}

.aesrt-progress__mark {
	position: relative;
	z-index: 1;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin-top: 1px;
	border-radius: 50%;
	border: 2px solid var( --wp--preset--color--line );
	background: var( --wp--preset--color--white );
}

.aesrt-progress__title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --wp--preset--color--ink );
}

.aesrt-progress__note {
	margin: 3px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --wp--preset--color--body );
}

/* Done: a filled green disc with a tick drawn as two borders of a rotated
   box, which needs no icon font and no extra request. */
.aesrt-progress__item.is-done .aesrt-progress__mark {
	border-color: var( --wp--preset--color--green );
	background: var( --wp--preset--color--green );
}

.aesrt-progress__item.is-done .aesrt-progress__mark::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 3px;
	width: 5px;
	height: 9px;
	border: solid var( --wp--preset--color--white );
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

.aesrt-progress__item.is-done .aesrt-progress__title {
	color: var( --wp--preset--color--body );
	font-weight: 500;
}

/* The line above a completed step is green, so the eye can see how far the
   payment has travelled without reading a word. */
.aesrt-progress__item.is-done::before {
	background: var( --wp--preset--color--green );
}

/* Active: a green ring with a breathing halo. */
.aesrt-progress__item.is-active .aesrt-progress__mark {
	border-color: var( --wp--preset--color--green );
	background: var( --wp--preset--color--white );
	box-shadow: 0 0 0 4px rgba( 14, 105, 70, 0.14 );
	animation: aesrt-pulse 1.6s ease-in-out infinite;
}

.aesrt-progress__item.is-active .aesrt-progress__mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var( --wp--preset--color--green );
}

.aesrt-progress__item.is-active .aesrt-progress__title {
	color: var( --wp--preset--color--ink );
	font-weight: 700;
}

@keyframes aesrt-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba( 14, 105, 70, 0.10 ); }
	50%      { box-shadow: 0 0 0 7px rgba( 14, 105, 70, 0.18 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.aesrt-progress__item.is-active .aesrt-progress__mark {
		animation: none;
	}
}

/* Waiting: hollow and quiet. Nothing here has happened yet. */
.aesrt-progress__item.is-waiting .aesrt-progress__mark {
	border-style: dashed;
}

.aesrt-progress__item.is-waiting .aesrt-progress__title,
.aesrt-progress__item.is-waiting .aesrt-progress__note {
	color: var( --wp--preset--color--mute );
}

/* Stopped: the only red on the page, and only when a payment truly failed. */
.aesrt-progress__item.is-stopped .aesrt-progress__mark {
	border-color: #D92D20;
	background: #D92D20;
}

.aesrt-progress__item.is-stopped .aesrt-progress__mark::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3px;
	width: 2px;
	height: 10px;
	background: var( --wp--preset--color--white );
	border-radius: 1px;
}

.aesrt-progress__item.is-stopped .aesrt-progress__title {
	color: #7A271A;
	font-weight: 700;
}

/* ---- The two notes under the list ---- */

.aesrt-note--good {
	border-left-color: var( --wp--preset--color--green );
	background: var( --wp--preset--color--tint );
}

.aesrt-note--good .aesrt-note__label {
	color: var( --wp--preset--color--green );
}

.aesrt-note--warn {
	border-left-color: #F59E0B;
	background: #FFFBEB;
}

.aesrt-note--warn .aesrt-note__label {
	color: #B45309;
}

.aesrt-note--warn p {
	color: #78350F;
}

.aesrt-done {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.aesrt-done__tick {
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var( --wp--preset--color--green );
	position: relative;
}

.aesrt-done__tick::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var( --wp--preset--color--white );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E" ) center / 22px no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E" ) center / 22px no-repeat;
}

.aesrt-done__title {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--ink );
}

.aesrt-done__note {
	margin: 4px 0 0;
	font-size: 13.5px;
	color: var( --wp--preset--color--body );
}

.aesrt-passlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.aesrt-passlist__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 15px 18px;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --aesrt-radius-sm );
}

.aesrt-passlist__name {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var( --wp--preset--color--ink );
}

.aesrt-passlist__meta {
	margin: 3px 0 0;
	font-size: 12.5px;
	color: var( --wp--preset--color--mute );
}

.aesrt-passlist__pending {
	font-size: 13px;
	color: var( --wp--preset--color--mute );
}

/* The pass itself. */

.aesrt-passcard {
	text-align: center;
	max-width: 480px;
	margin: 0 auto;
}

.aesrt-passcard__chip {
	display: inline-block;
	margin: 0 0 18px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var( --wp--preset--color--green );
	color: var( --wp--preset--color--white );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.aesrt-passcard__name {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.4rem, 5vw, 1.8rem );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var( --wp--preset--color--ink );
}

.aesrt-passcard__role {
	margin: 8px 0 0;
	font-size: 14px;
	color: var( --wp--preset--color--body );
}

.aesrt-passcard__org {
	margin: 3px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var( --wp--preset--color--ink );
}

.aesrt-passcard__qr {
	margin: 26px auto 0;
	width: min( 260px, 72vw );
}

.aesrt-passcard__qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.aesrt-passcard__uid {
	margin: 16px 0 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var( --wp--preset--color--ink );
	font-variant-numeric: tabular-nums;
}

.aesrt-passcard__in {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var( --wp--preset--color--green );
}

/* A void pass must not be mistakable for a good one at a glance across a
   registration desk, so the whole card is desaturated and the code removed. */
.aesrt-passcard.is-void .aesrt-passcard__chip {
	background: var( --wp--preset--color--mute );
}

.aesrt-passcard.is-void .aesrt-passcard__name,
.aesrt-passcard.is-void .aesrt-passcard__uid {
	color: var( --wp--preset--color--mute );
	text-decoration: line-through;
}


/* ---------------------------------------------------------------------------
 * 9. The portal
 *
 * One person per row: who they are, what state they are in, and the one thing
 * to do about it. Three columns on a desktop, stacked on a phone — where the
 * action must stay full width, because a 90px button beside a name is the thing
 * people miss and then telephone the desk about.
 * ------------------------------------------------------------------------ */

.aesrt-shell--single {
	grid-template-columns: minmax( 0, 1fr );
	max-width: 720px;
}

.aesrt-personcard {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto auto;
	gap: 16px;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.aesrt-personcard:last-of-type { border-bottom: 0; }

.aesrt-personcard__name {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var( --wp--preset--color--ink );
	line-height: 1.3;
}

.aesrt-personcard__meta {
	margin: 3px 0 0;
	font-size: 12.5px;
	color: var( --wp--preset--color--mute );
	line-height: 1.45;
}

.aesrt-chip {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 999px;
	background: var( --wp--preset--color--haze );
	color: var( --wp--preset--color--body );
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

.aesrt-chip--good { background: var( --wp--preset--color--tint ); color: var( --wp--preset--color--green ); }
.aesrt-chip--bad  { background: #FBEAEA; color: #8A1F11; }

.aesrt-personcard__do .aesrt-btn { min-height: 40px; padding: 10px 18px; font-size: 13.5px; }

@media ( max-width: 640px ) {
	.aesrt-personcard {
		grid-template-columns: minmax( 0, 1fr );
		gap: 10px;
	}

	.aesrt-personcard__state { justify-self: start; }

	/* Full width, because a button tucked beside a name on a phone is the one
	   people do not see. */
	.aesrt-personcard__do,
	.aesrt-personcard__do .aesrt-btn { width: 100%; }
}

/* A booking's figures, under its people. */
.aesrt-minitable {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var( --wp--preset--color--line );
}

.aesrt-minitable > div { display: flex; align-items: baseline; gap: 8px; }
.aesrt-minitable dt { margin: 0; font-size: 12.5px; color: var( --wp--preset--color--mute ); }
.aesrt-minitable dd {
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var( --wp--preset--color--ink );
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * 10. Solewant brand rules
 *
 * From the brand guidelines supplied with the rebrand. These are stated last so
 * they win over anything above without each earlier rule having to be hunted
 * down and edited — and so the whole brand decision is readable in one place
 * when the 11th edition changes it again.
 *
 * The guidelines are specific about two things that were previously the
 * opposite:
 *
 *   "Avoid excessive rounded pill buttons."  — buttons were fully rounded.
 *   Red is reserved for high-attention actions and must never compete with
 *   the blue system — there was no red at all.
 *
 * So: buttons are 8px, 48px tall, Bricolage Grotesque SemiBold; navy carries the
 * ordinary journey; red is used only on the step that commits — paying, or
 * submitting an application — because that is the "Register" moment the
 * guidelines name, and using it on every Continue would make it meaningless by
 * the third screen.
 * ------------------------------------------------------------------------ */

.aesrt-btn,
.aesrt-flow .wp-block-button__link,
.aesrt-portal .wp-block-button__link {
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 8px;
	font-family: var( --wp--preset--font-family--display );
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0;
}

.aesrt-btn {
	background: var( --wp--preset--color--green );
	border-color: var( --wp--preset--color--green );
	color: var( --wp--preset--color--white );
}

.aesrt-btn:hover {
	background: var( --wp--preset--color--deep );
	border-color: var( --wp--preset--color--deep );
}

.aesrt-btn--ghost {
	background: var( --wp--preset--color--white );
	border-color: var( --wp--preset--color--line );
	color: var( --wp--preset--color--green );
}

.aesrt-btn--ghost:hover {
	background: var( --wp--preset--color--white );
	border-color: var( --wp--preset--color--green );
	color: var( --wp--preset--color--green );
}

/* The one action that commits: pay, or submit an application. */
.aesrt-btn--commit {
	background: var( --wp--preset--color--red );
	border-color: var( --wp--preset--color--red );
	color: var( --wp--preset--color--white );
}

.aesrt-btn--commit:hover {
	background: var( --wp--preset--color--red-deep );
	border-color: var( --wp--preset--color--red-deep );
}

.aesrt-btn:focus-visible {
	outline: 3px solid var( --wp--preset--color--orange );
	outline-offset: 2px;
}

/* Headings and body both in Bricolage Grotesque, per the type scale. */
.aesrt-head h1,
.aesrt-sec__title,
.aesrt-summary__total dd,
.aesrt-panel__title {
	font-family: var( --wp--preset--font-family--display );
}

/* ---- Package cards ---- */

.aesrt-tiers {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 232px, 1fr ) );
	gap: 16px;
}

.aesrt-tiers[hidden] { display: none; }

.aesrt-tier {
	position: relative;
	display: block;
	padding: 18px 20px 20px;
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.aesrt-tier:hover { border-color: var( --wp--preset--color--green ); }

.aesrt-tier.is-selected {
	border-color: var( --wp--preset--color--green );
	box-shadow: 0 0 0 2px var( --wp--preset--color--green ) inset;
}

/* The radio is the control; the card is its label. Hidden visually, still
   focusable and still announced. */
.aesrt-tier input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.aesrt-tier:focus-within {
	outline: 3px solid var( --wp--preset--color--orange );
	outline-offset: 2px;
}

.aesrt-tier__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.aesrt-tier__name {
	font-family: var( --wp--preset--font-family--display );
	font-size: 15px;
	font-weight: 700;
	color: var( --wp--preset--color--ink );
}

.aesrt-tier__price {
	font-family: var( --wp--preset--font-family--display );
	font-size: 17px;
	font-weight: 700;
	color: var( --wp--preset--color--green );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.aesrt-tier__size {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	color: var( --wp--preset--color--mute );
}

.aesrt-tier__list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 7px;
}

.aesrt-tier__list li {
	position: relative;
	padding-left: 19px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --wp--preset--color--body );
}

.aesrt-tier__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 11px;
	height: 7px;
	border-left: 2px solid var( --wp--preset--color--green );
	border-bottom: 2px solid var( --wp--preset--color--green );
	transform: rotate( -45deg );
}


/* ----------------------------------------------------------- Header nav

   The registration site had no navigation at all: once somebody was on it,
   the only link anywhere was "Back to the summit site". Somebody who had
   already registered and wanted their pass had no way to reach the portal
   except by knowing the URL, and somebody half-way through a booking could
   not get back to the start.
*/
.aesrt-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.aesrt-nav__item {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 7px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --wp--preset--color--ink, #202A36 );
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease;
}

.aesrt-nav__item:hover,
.aesrt-nav__item:focus-visible {
	background: var( --wp--preset--color--tint, #EAF1FA );
	color: var( --wp--preset--color--green, #173F73 );
}

.aesrt-nav__item:focus-visible {
	outline: 3px solid var( --wp--preset--color--orange, #DD9404 );
	outline-offset: 2px;
}

/* The nav is the first thing to go when the bar gets tight; the brand and
   the "back to the summit" link matter more on a phone. */
@media ( max-width: 860px ) {
	.aesrt-nav { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.aesrt-nav__item { transition-duration: 1ms; }
}

/* ------------------------------------------------------- Portal navigation

   The signed-in dashboard carried no menu: a delegate could open a pass or
   sign out, and nothing else. These are the links somebody would look for.
*/
.aesrt-portalnav {
	border-bottom: 1px solid var( --wp--preset--color--line, #D9E1E8 );
	background: #fff;
}

.aesrt-portalnav__inner {
	max-width: 1120px;
	margin-inline: auto;
	padding: 0 24px;
	display: flex;
	gap: 2px;
	flex-wrap: wrap;
	align-items: center;
}

.aesrt-portalnav__item {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 14px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --wp--preset--color--body, #4A5566 );
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.aesrt-portalnav__item:hover {
	color: var( --wp--preset--color--green, #173F73 );
	background: var( --wp--preset--color--tint, #EAF1FA );
}

/* The current page is marked by weight and a keyline, not colour alone. */
.aesrt-portalnav__item.is-current {
	color: var( --wp--preset--color--green, #173F73 );
	border-bottom-color: var( --wp--preset--color--orange, #DD9404 );
}

.aesrt-portalnav__item:focus-visible {
	outline: 3px solid var( --wp--preset--color--orange, #DD9404 );
	outline-offset: -3px;
}

@media ( prefers-reduced-motion: reduce ) {
	.aesrt-portalnav__item { transition-duration: 1ms; }
}

/* ------------------------------------------------------------- Header nav
   Two kinds of link sat in one undifferentiated row: Register and My pass,
   which stay on this site, and four that leave for the marketing site. A
   delegate mid-booking could not tell which would take them away from a form
   they had half filled in. They are now grouped, with the outbound set marked
   and separated, and the current page named.                                */

.aesrt-nav__group { display: inline-flex; align-items: center; gap: 2px; }

.aesrt-nav__rule {
	width: 1px;
	height: 20px;
	margin: 0 10px;
	background: var( --wp--preset--color--line );
	flex: 0 0 auto;
}

/* The one you are on. */
.aesrt-nav__item[aria-current="page"] {
	background: var( --wp--preset--color--tint );
	color: var( --wp--preset--color--deep );
}

/* Leaving the registration site: a small arrow, and quieter than the pair
   that do not. */
.aesrt-nav__item--away { color: var( --wp--preset--color--mute ); }

.aesrt-nav__item--away::after {
	content: "";
	width: 9px;
	height: 9px;
	margin-left: 6px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6H7.5V3.56L1.56 9.5.5 8.44 6.44 2.5H3z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6H7.5V3.56L1.56 9.5.5 8.44 6.44 2.5H3z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	opacity: .75;
}

.aesrt-nav__item--away:hover { color: var( --wp--preset--color--green ); }

/*
 * On a narrow screen the outbound four are what goes.
 *
 * Six links plus "Secure registration" wrapped under the brand and pushed the
 * form below the fold on a phone. Register and My pass are why somebody is on
 * this site; the rest are a page away on the site they just came from.
 */
@media ( max-width: 860px ) {
	.aesrt-nav__group--away,
	.aesrt-nav__rule { display: none; }
}

/* ---------------------------------------------------------------------
   Artwork, in the exhibitor's own portal

   One card per piece: what it is, what state it is in, what the team said
   if they asked for changes, and the control that replaces it. Bordered
   rather than flat, because these are the only places on the page where
   somebody is being asked to do something rather than read something.
   ------------------------------------------------------------------ */
.aesrt-artcard {
	padding: 14px 16px;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 12px;
	background: var( --wp--preset--color--paper, #fff );
}

.aesrt-artcard__file { word-break: break-word; }

.aesrt-artcard form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.aesrt-artcard input[type="file"] {
	flex: 1 1 220px;
	min-width: 0;
	font-size: 13px;
	color: var( --wp--preset--color--body );
}

/* A file input is the one control people lose on a phone, so it gets a
   line of its own there and the button goes full width under it. */
@media ( max-width: 640px ) {
	.aesrt-artcard form { display: block; }
	.aesrt-artcard input[type="file"] { width: 100%; margin-bottom: 10px; }
	.aesrt-artcard .aesrt-btn { width: 100%; }
}

/* The limited-time offer: today's price, with the old one struck through. */
.aesrt-tier__was,
.aesrt-choice__was {
	margin-left: 6px;
	font-size: 0.78em;
	font-weight: 600;
	opacity: 0.65;
	text-decoration-thickness: 2px;
}
.aesrt-offer {
	display: flex;
	gap: 10px;
	align-items: baseline;
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid rgba( 17, 138, 78, 0.25 );
	border-radius: 12px;
	background: rgba( 17, 138, 78, 0.07 );
	font-size: 14px;
	line-height: 1.45;
}
.aesrt-offer__tag {
	flex: none;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 12px;
}

/* The price beside each payment choice. */
.aesrt-choice__amount {
	margin-left: 8px;
	font-weight: 700;
	white-space: nowrap;
}

/* The summit's own bank accounts, for a direct transfer. */
.aesrt-accounts {
	display: grid;
	gap: 12px;
	margin: 12px 0 0;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
}
.aesrt-account {
	padding: 12px 14px;
	border: 1px solid rgba( 17, 24, 39, 0.12 );
	border-radius: 10px;
	background: #fff;
}
.aesrt-account__label {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
}
.aesrt-account__line { margin: 0; font-size: 13.5px; line-height: 1.5; }
.aesrt-account__number {
	margin: 4px 0 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}
.aesrt-accounts__ref { margin: 10px 0 0; font-size: 13.5px; }
.aesrt-accounts__note { margin: 6px 0 0; font-size: 12.5px; opacity: 0.75; }