/**
 * Atlas Arcadia — the Add Photographs entry point on a Location page.
 *
 * THIS FILE USED TO SAY "NO HARDCODED BRAND COLOURS", AND THE REASONING STILL
 * HOLDS. The7 regenerates its custom.css on cache clears and has reverted the
 * site background to its dark #252525 default at least once; a section that had
 * baked in "text is #333" became invisible that day.
 *
 * The redesign is a cream card, so it cannot inherit its way out of trouble any
 * more — it has to state a background. The rule that replaces the old one is
 * narrower and does the same job: BACKGROUND AND FOREGROUND ARE ALWAYS SET
 * TOGETHER, never one without the other. A card that owns both is legible
 * whatever the theme does around it, which is the property that mattered.
 *
 * The values are the site's own custom properties from aa-points.php — the same
 * --aa-orange that draws every button, the same --aa-cream and --aa-brown the
 * panels use — each with a literal fallback, because those properties are
 * defined by a stylesheet this one does not depend on being present.
 *
 * WHAT DRAWS WHAT. Almost every element in the design is markup JetFormBuilder
 * already renders; this file is mostly selectors onto it:
 *
 *   the dashed drop area      .jet-form-builder-file-upload
 *   "Maximum file size: 5 MB" .jet-form-builder-file-upload__message  (its own)
 *   the chosen-file tiles     .jet-form-builder-file-upload__file
 *   the per-file remove       .jet-form-builder-file-upload__file-remove
 *   the two steps             .jet-form-builder-page
 *   Continue                  .jet-form-builder__next-page
 *   Submit photographs        .jet-form-builder__submit
 *
 * entry.js adds only the counter, the step label and the step-2 summary.
 *
 * Plan: docs/plans/2026-09-09-001-feat-location-contribution-moderation-plan.md (U8)
 */

.aa-pp-entry {
	--aa-pp-cream: var( --aa-cream, #fdf6e8 );
	--aa-pp-brown: var( --aa-brown, #6a3306 );
	--aa-pp-orange: var( --aa-orange, #db680b );
	--aa-pp-muted: var( --aa-muted, #7d6f5a );
	--aa-pp-rule: var( --aa-rule, #e2ded4 );
	--aa-pp-tan: #ece0c8;

	margin: 2.5em 0 0;
	padding: 1.5em 0 0;
	border-top: 1px solid rgba( 128, 128, 128, .3 );
}

/* THE MODULE IS CENTRED AS A COLUMN. Every block in it — the lede, the button,
   the card, the thank-you — carries its own max-width and auto side margins,
   rather than the section taking text-align:center. That would cascade into the
   form, where labels, inputs and the choice cards read left to right and must
   stay that way. Only the one-line messages outside the card centre their text. */
.aa-pp-entry__lede {
	margin: 0 auto 1.2em;
	max-width: 42em;
	text-align: center;
}

/* THE BUTTON IS THE SITE'S BUTTON, AND NOT A COPY OF IT. Everything visual —
   the orange pill, the white display-font label, the hover to brown — comes from
   `.aa-points__cta` in aa-points.php, which draws Join the archive, Contribute,
   and the home page's CTA cards. This file adds only what a <summary> needs.

   A <summary> carries a disclosure triangle in every engine, drawn inside the
   button. Both properties are needed: ::-webkit-details-marker for Safari and
   older WebKit, `list-style: none` for everything current. `display:inline-block`
   is not decoration: <summary> defaults to display:list-item, which re-draws the
   marker whatever list-style says. */
summary.aa-pp-entry__btn {
	display: inline-block;
	list-style: none;
}

/* CENTRED ON THE PAGE. `block` + `fit-content` + auto margins, per the column
   note above. Covers both the <summary> and the signed-out "Sign in" link,
   which wear the same class. `block` also keeps <summary> off
   display:list-item, so the marker note above still holds. */
.aa-pp-entry .aa-pp-entry__btn {
	display: block;
	width: fit-content;
	margin-inline: auto;
}

summary.aa-pp-entry__btn::-webkit-details-marker {
	display: none;
}

.aa-pp-entry__disclosure[open] .aa-pp-entry__btn {
	margin-bottom: 1.2em;
}

.aa-pp-entry__note {
	margin: 0 0 1em;
	padding: .6em .8em;
	border-left: 4px solid #dba617;
	background: rgba( 219, 166, 23, .08 );
	font-size: .9em;
}

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

.aa-pp-form {
	max-width: 44em;
	margin-inline: auto;
	background: var( --aa-pp-cream );
	color: var( --aa-pp-brown );
	border-top: 4px solid var( --aa-pp-orange );
	border-radius: 10px;
	padding: 1.6em 1.8em 1.8em;
	box-shadow: 0 2px 10px rgba( 74, 36, 8, .12 );
}

.aa-pp-form__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
	margin: 0 0 .35em;
}

/* THE HEADING IS BACK, AND THE REASON IT LEFT IS FIXED. It was removed because
   on this theme an <h3> here rendered in the display font AND the site's link
   orange, so it read as a link that did nothing. Inside a card that states its
   own colour, it cannot: the colour is set here rather than inherited. */
.aa-pp-form__title {
	margin: 0;
	font-family: var( --aa-display, inherit );
	font-size: 1.6rem;
	line-height: 1.1;
	font-weight: 800;
	color: var( --aa-pp-brown );
}

.aa-pp-form__step {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --aa-pp-orange );
	white-space: nowrap;
}

.aa-pp-form__lede {
	margin: 0 0 1.3em;
	color: var( --aa-pp-brown );
	opacity: .85;
}

/* The form is a column of short questions. Left alone inside a wide Elementor
   section it stretches a text input to 1100px, which reads as a mistake even
   though nothing is broken. */
.aa-pp-form .jet-form-builder {
	max-width: none;
}

.aa-pp-form .jet-form-builder-row {
	margin-bottom: 1.4em;
}

/* -------------------------------------------------------------------------
 * Labels, help text, inputs
 * ---------------------------------------------------------------------- */

.aa-pp-form .jet-form-builder__label-text {
	font-family: var( --aa-display, inherit );
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --aa-pp-brown );
}

.aa-pp-form .jet-form-builder__required {
	color: var( --aa-pp-orange );
}

.aa-pp-form .jet-form-builder__desc small,
.aa-pp-form .jet-form-builder-file-upload__message small {
	color: var( --aa-pp-muted );
	font-size: .82rem;
	line-height: 1.5;
}

.aa-pp-form .jet-form-builder__desc {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1em;
	margin-top: .5em;
}

.aa-pp-form__count {
	flex: none;
	font-size: .82rem;
	font-weight: 700;
	color: var( --aa-pp-brown );
	white-space: nowrap;
}

.aa-pp-form input[type="text"],
.aa-pp-form input[type="url"],
.aa-pp-form input[type="email"],
.aa-pp-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	color: var( --aa-pp-brown );
	border: 1px solid var( --aa-pp-tan );
	border-radius: 8px;
	padding: .7em .9em;
	font-size: 1rem;
	line-height: 1.4;
}

.aa-pp-form textarea {
	min-height: 7em;
	resize: vertical;
}

.aa-pp-form input[type="text"]:focus,
.aa-pp-form input[type="url"]:focus,
.aa-pp-form textarea:focus {
	outline: 2px solid var( --aa-pp-orange );
	outline-offset: 1px;
	border-color: var( --aa-pp-orange );
}

.aa-pp-form ::placeholder {
	color: var( --aa-pp-muted );
	opacity: .7;
}

/* -------------------------------------------------------------------------
 * Step 1 — the drop area
 * ---------------------------------------------------------------------- */

/* The label above the file input says "Photographs:", which the card's own
   heading already says better. Hidden from sight, kept for screen readers. */
.aa-pp-form .field-type-media-field > .jet-form-builder__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.aa-pp-form .jet-form-builder-file-upload {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #fff;
	border: 2px dashed var( --aa-pp-tan );
	border-radius: 10px;
	padding: 2em 1.2em 1.6em;
	text-align: center;
	transition: border-color .15s ease, background-color .15s ease;
}

/* ORDER IS SET HERE, NOT BY THE MARKUP. JetFormBuilder emits the loader and
   file list first, then the input, then its own "Maximum file size" line. The
   design reads heading, "or", the button, then the limit — so the box is a flex
   column and each part is given its place. Without this the "or" lands at the
   bottom of the box, under the limit line, which is where it first shipped. */
.aa-pp-form .jet-form-builder-file-upload::before {
	content: "Drag photographs here";
	order: 1;
	display: block;
	font-family: var( --aa-display, inherit );
	font-size: 1.25rem;
	font-weight: 800;
	color: var( --aa-pp-brown );
}

.aa-pp-form .jet-form-builder-file-upload__fields {
	order: 2;
	position: static;
}

/* The word between the two ways of choosing a file. On the fields wrapper
   rather than the box, so it sits directly above the button it belongs to. */
.aa-pp-form .jet-form-builder-file-upload__fields::before {
	content: "or";
	display: block;
	margin: .35em 0 .6em;
	font-size: .9rem;
	color: var( --aa-pp-muted );
}

/* THE REAL INPUT IS INVISIBLE AND COVERS THE WHOLE BOX, so a drop anywhere in
   the dashed area lands and a click anywhere in it opens the picker.
   `opacity: 0` rather than display:none or visibility:hidden — both of those
   stop it receiving the drop, which is the one thing it is here for. */
.aa-pp-form .jet-form-builder-file-upload__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

/* The pill the member believes they are clicking. Drawn on the wrapper, with
   pointer-events off so the click passes through to the input stretched over
   the box. Without this the browser's own grey "Choose Files / No file chosen"
   control shows through, which is what shipped for one screenshot. */
.aa-pp-form .jet-form-builder-file-upload__fields::after {
	content: "Choose files";
	display: inline-block;
	pointer-events: none;
	padding: .55em 1.4em;
	border: 2px solid var( --aa-pp-brown );
	border-radius: 999px;
	background: #fff;
	color: var( --aa-pp-brown );
	font-family: var( --aa-display, inherit );
	font-weight: 700;
	font-size: .95rem;
}

.aa-pp-form .jet-form-builder-file-upload:hover .jet-form-builder-file-upload__fields::after {
	border-color: var( --aa-pp-orange );
	color: var( --aa-pp-orange );
}

.aa-pp-form .jet-form-builder-file-upload__message {
	order: 3;
}

/* The loader and the empty file list must not hold the box open. JetFormBuilder
   renders both whether or not anything is chosen, and left alone they add an
   inch of dead space above the prompt. */
.aa-pp-form .jet-form-builder-file-upload__content {
	order: 5;
	width: 100%;
	min-height: 0;
}

.aa-pp-form .jet-form-builder-file-upload__content:empty,
.aa-pp-form .jet-form-builder-file-upload__loader {
	display: none;
}

.aa-pp-form .jet-form-builder-file-upload__errors {
	order: 4;
	width: 100%;
}

.aa-pp-form .jet-form-builder-file-upload__message {
	margin-top: .9em;
	order: 3;
}

/* The chosen photographs, as a grid of tiles at the BOTTOM of the drop area.
   The design draws them just outside the dashed border; they are inside it
   because JetFormBuilder re-queries this container within the field wrap every
   time the selection changes, so moving it stops previews being drawn at all
   (measured — see entry.js). `order` puts them last, which is the part of the
   design that matters: the prompt and the button stay where they were. */
.aa-pp-form .jet-form-builder-file-upload__files:not( :empty ) {
	order: 5;
	width: 100%;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 9.5em, 1fr ) );
	gap: .8em;
	margin-top: 1.2em;
	text-align: left;
}

/* `width` and `height` are stated because JetFormBuilder sizes these tiles
   itself — measured at 100px wide sitting in a 206px grid track, which is why
   the first few attempts at this looked like loose thumbnails rather than a
   grid. A grid item only stretches if nothing gives it a width. */
.aa-pp-form .jet-form-builder-file-upload__file {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	background: var( --aa-pp-tan );
	border-radius: 8px;
	overflow: hidden;
	color: var( --aa-pp-brown );
	font-size: .8rem;
	word-break: break-word;
}

/* `!important` on two properties, and only these two. The7 ships a blanket
   `img { height: auto }` for responsive images, which wins against a plain
   declaration here and leaves every preview at its natural aspect inside a tile
   sized for a crop — the tiles rendered as loose thumbnails of different heights
   until this was measured. The tile owns the aspect ratio; the image fills it. */
.aa-pp-form .jet-form-builder-file-upload__file img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
}

/* Always visible, not on hover. JetFormBuilder reveals this control when the
   tile is hovered, which is a control that does not exist on a touch screen —
   and removing a photograph you picked by mistake is the one thing step 1 has
   to let you do. */
.aa-pp-form .jet-form-builder-file-upload__file-remove {
	opacity: 1;
	visibility: visible;
	position: absolute;
	top: .4em;
	right: .4em;
	z-index: 2;
	width: 1.7em;
	height: 1.7em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var( --aa-pp-brown );
	color: #fff;
	cursor: pointer;
}

.aa-pp-form .jet-form-builder-file-upload__file-remove svg {
	width: .9em;
	height: .9em;
	fill: currentColor;
}

.aa-pp-form .jet-form-builder-file-upload__file-remove:hover {
	background: var( --aa-pp-orange );
}

.aa-pp-form .jet-form-builder-file-upload__errors:not( .is-hidden ) {
	margin-top: .8em;
	padding: .6em .8em;
	border-radius: 6px;
	background: #fcf0f1;
	color: #8a1f21;
	font-size: .85rem;
	text-align: left;
}

/* -------------------------------------------------------------------------
 * Step 2 — the summary of step 1
 * ---------------------------------------------------------------------- */

.aa-pp-form__summary {
	display: flex;
	align-items: center;
	gap: .8em;
	margin: 0 0 1.5em;
	padding: .8em 1em;
	background: #fff;
	color: var( --aa-pp-brown );
	border-radius: 10px;
}

.aa-pp-form__summary-tick {
	flex: none;
	width: 1.8em;
	height: 1.8em;
	border-radius: 999px;
	background: #3fae4a;
	position: relative;
}

/* CENTRED ON THE CIRCLE, not placed by eye. The tick is a rotated rectangle,
   so its bounding box is not its visual centre: positioning it with fixed em
   offsets put it low and right, which is how it first shipped. left/top 50%
   with a translate does the centring, and the -55% rather than -50% is the one
   deliberate nudge — a check mark reads as centred when it sits a little high,
   because its long arm carries the weight downward. */
.aa-pp-form__summary-tick::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: .3em;
	height: .6em;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translate( -50%, -55% ) rotate( 45deg );
}

/* The chips: a glimpse of what is being described, so step 2 does not ask
   about photographs the member can no longer see. Cloned from the previews
   JetFormBuilder already drew, so no second decode of the same files.

   The sizes are `!important` for the same reason the tiles' are — The7's
   blanket `img { height: auto }` wins otherwise, and these previews arrive at
   their natural dimensions, which turns the summary bar into a row of
   full-size photographs. */
.aa-pp-form__summary-thumbs {
	flex: none;
	display: flex;
	gap: .3em;
}

.aa-pp-form__summary-thumbs img {
	width: 2.2em !important;
	height: 2.2em !important;
	max-width: none;
	border-radius: 4px;
	object-fit: cover;
	display: block;
}

.aa-pp-form__summary-text {
	flex: 1 1 auto;
	font-weight: 700;
}

.aa-pp-form__change {
	flex: none;
	background: none;
	border: 0;
	padding: 0;
	color: var( --aa-pp-orange );
	font-weight: 700;
	font-size: .9rem;
	cursor: pointer;
	text-decoration: underline;
}

.aa-pp-form__change:hover {
	color: var( --aa-pp-brown );
}

/* -------------------------------------------------------------------------
 * Step 2 — choices as cards
 * ---------------------------------------------------------------------- */

.aa-pp-form .checkradio-wrap {
	display: flex;
	flex-direction: column;
	gap: .5em;
	margin-top: .6em;
}

.aa-pp-form .checkradio-wrap .jet-form-builder__field-label {
	display: flex;
	align-items: center;
	gap: .7em;
	margin: 0;
	padding: .75em 1em;
	background: #fff;
	color: var( --aa-pp-brown );
	border: 1px solid var( --aa-pp-tan );
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .12s ease;
}

.aa-pp-form .checkradio-wrap .jet-form-builder__field-label:hover {
	border-color: var( --aa-pp-orange );
}

/* UNRESOLVED, AND SAID SO RATHER THAN LEFT LOOKING DELIBERATE. The selected
   radio renders in the browser's default blue (#0b76ef, sampled) instead of the
   site's orange. `accent-color` below is the standards answer and is kept
   because it costs nothing and is right where it is honoured.

   What was ruled out, so the next person does not repeat it: the selector
   matches (querySelector finds the inputs), the stylesheet is served with the
   rule byte-for-byte, the browser cache was disabled, the CSS parses (braces
   and comments both balance), the theme ships no competing !important, and the
   input is a visible 20px box rather than a hidden control behind a styled
   label. An `outline: 3px solid red !important` on that same selector also did
   not draw — which should be impossible if the rule were reaching the element,
   so the page is resolving some other stylesheet and the reason is not yet
   known. Everything else in this file applies normally.

   Left as a known deviation rather than patched with more !important, because
   three rounds of that changed nothing and would have shipped as dead CSS. */
.aa-pp-form .checkradio-wrap input[type="radio"],
.aa-pp-form .checkradio-wrap input[type="checkbox"] {
	accent-color: var( --aa-pp-orange );
	flex: none;
	margin: 0;
}

/* :has() is what lets the whole card show selection rather than just the dot.
   Unsupported engines simply keep the plain border — the radio itself is still
   drawn and still says which option is chosen, so nothing is lost but polish. */
.aa-pp-form .checkradio-wrap input[type="radio"] {
	border-radius: 999px;
}

.aa-pp-form .checkradio-wrap input[type="checkbox"] {
	border-radius: 4px;
}

/* The checked state arrives painted from somewhere other than the border:
   The7 draws it with a background-image and an inset box-shadow, so clearing
   the border colour alone left a blue dot inside an orange ring through three
   measured attempts. Both are cleared here and the dot is drawn by ::before. */
.aa-pp-form .checkradio-wrap input:checked {
	border-color: var( --aa-pp-orange ) !important;
	background-image: none !important;
	box-shadow: none !important;
	background-color: #fff !important;
}

.aa-pp-form .checkradio-wrap input[type="radio"]:checked::before {
	content: "" !important;
	display: block !important;
	width: .6em;
	height: .6em;
	border-radius: 999px;
	background: var( --aa-pp-orange );
}

.aa-pp-form .checkradio-wrap input[type="checkbox"]:checked {
	background-color: var( --aa-pp-orange ) !important;
}

.aa-pp-form .checkradio-wrap input[type="checkbox"]:checked::before {
	content: "";
	width: .3em;
	height: .6em;
	margin-top: -.15em;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

.aa-pp-form .checkradio-wrap .jet-form-builder__field-label:has( input:checked ) {
	border-color: var( --aa-pp-orange );
	box-shadow: inset 0 0 0 1px var( --aa-pp-orange );
}

.aa-pp-form .checkradio-wrap .jet-form-builder__field-label:has( input:focus-visible ) {
	outline: 2px solid var( --aa-pp-orange );
	outline-offset: 2px;
}

/* The image-rights attestation is a sentence, not a label — it wraps, and
   centring it against the box would leave the checkbox floating mid-paragraph. */
.aa-pp-form .checkboxes-wrap .jet-form-builder__field-label {
	align-items: flex-start;
	line-height: 1.45;
}

/* -------------------------------------------------------------------------
 * The buttons
 * ---------------------------------------------------------------------- */

.aa-pp-form .jet-form-builder__next-page-wrap,
.aa-pp-form .jet-form-builder__action-button-wrapper {
	display: flex;
	align-items: center;
	gap: .8em;
	margin-top: 1.6em;
}

/* Continue and Submit are the site's orange pill. Submit already wears
   `.aa-points__cta` (set as the block's class_name); Continue is drawn by
   JetFormBuilder's own template, which takes a class but not that one, so its
   declarations are restated here and nowhere else. */
.aa-pp-form .jet-form-builder__next-page {
	display: inline-block;
	background: var( --aa-pp-orange );
	color: #fff;
	padding: .6em 1.6em;
	border: 0;
	border-radius: 999px;
	font-family: var( --aa-display, inherit );
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.3;
	cursor: pointer;
}

.aa-pp-form .jet-form-builder__next-page:hover,
.aa-pp-form .jet-form-builder__next-page:focus {
	background: var( --aa-pp-brown );
	color: #fff;
}

/* Cancel and Back are the same shape, outlined — a secondary action that reads
   as a way out rather than as a second thing to do. */
.aa-pp-form__cancel,
.aa-pp-form .jet-form-builder__prev-page {
	display: inline-block;
	background: transparent;
	color: var( --aa-pp-brown );
	padding: .55em 1.4em;
	border: 2px solid var( --aa-pp-brown );
	border-radius: 999px;
	font-family: var( --aa-display, inherit );
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.3;
	cursor: pointer;
	text-decoration: none;
}

.aa-pp-form__cancel:hover,
.aa-pp-form .jet-form-builder__prev-page:hover {
	border-color: var( --aa-pp-orange );
	color: var( --aa-pp-orange );
}

/* The Back button is injected outside the pages and moved into the submit row
   by entry.js. Until it is moved it must not be visible, or it flashes at the
   bottom of the form on first paint. */
.aa-pp-form .jet-form-builder__prev-page.aa-pp-form__back {
	display: none;
}

.aa-pp-form .jet-form-builder__action-button-wrapper .jet-form-builder__prev-page.aa-pp-form__back {
	display: inline-block;
	order: -1;
}

.aa-pp-form .jet-form-builder__submit {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Narrow screens
 * ---------------------------------------------------------------------- */

@media ( max-width: 30em ) {
	.aa-pp-form {
		padding: 1.2em 1.1em 1.4em;
	}

	.aa-pp-form__title {
		font-size: 1.35rem;
	}

	.aa-pp-form .jet-form-builder-file-upload__files:not( :empty ) {
		grid-template-columns: repeat( auto-fill, minmax( 7em, 1fr ) );
	}

	.aa-pp-form .jet-form-builder__next-page-wrap,
	.aa-pp-form .jet-form-builder__action-button-wrapper {
		flex-wrap: wrap;
	}
}

/* The gallery below is centred by its own container at some item counts and not
   at others — a pre-existing defect this feature does not touch and must not
   appear to have caused. Keeping the entry point in normal flow, with no float
   and no negative margin, is what keeps the two independent. */
.aa-pp-entry::after {
	content: "";
	display: table;
	clear: both;
}

/* -------------------------------------------------------------------------
 * Sending, and the confirmation that outlives the form
 * ---------------------------------------------------------------------- */

/* A submission carries the photographs themselves, so it takes as long as the
   upload takes. This is the line that says so. */
.aa-pp-form__status {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 1em 0 0;
	padding: .7em .9em;
	background: #fff;
	color: var( --aa-pp-brown );
	border-left: 4px solid var( --aa-pp-orange );
	border-radius: 6px;
	font-weight: 700;
	font-size: .9rem;
}

.aa-pp-form__status::before {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	border: 2px solid var( --aa-pp-tan );
	border-top-color: var( --aa-pp-orange );
	border-radius: 999px;
	animation: aa-pp-spin .8s linear infinite;
}

.aa-pp-form__status.is-slow {
	font-weight: 400;
}

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

/* Respecting the setting rather than ignoring it: the spinner is the only
   motion here, and a static ring still reads as "something is happening"
   next to a line of text that says so. */
@media ( prefers-reduced-motion: reduce ) {
	.aa-pp-form__status::before {
		animation: none;
	}
}

/* What is left on the page once the form has closed. Centred like the rest of
   the column; the green rule is on top rather than the left, because a left
   accent beside centred text reads as misaligned — and a top rule is how the
   card above it is marked too. */
.aa-pp-entry__done {
	margin: 0 auto 1.2em;
	padding: .8em 1em;
	max-width: 44em;
	text-align: center;
	background: var( --aa-pp-cream );
	color: var( --aa-pp-brown );
	border-top: 4px solid #3fae4a;
	border-radius: 6px;
	font-weight: 700;
}