/**
 * Verification widget styling.
 *
 * Single consolidated file for this plugin, .theaisle-* class names, no inline
 * styles in the templates (claude.md CSS rules).
 */

.theaisle-otp {
	margin: 0 0 10px;
}

.theaisle-otp__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
}

.theaisle-otp__code {
	/* `flex: 1 1 160px` here was a direction-dependent bug. flex-basis is
	   measured along the main axis, so the moment the row became a column - on
	   every screen under 480px, in the registration column, and in the listing
	   form - 160px stopped meaning "at least this wide" and started meaning
	   "at least this *tall*". The code box grew to 160px with 90px of nothing
	   under a 50px input, and the Confirm button was pushed off the bottom of
	   a phone screen at the one moment a vendor is holding a text message.

	   Sizing from content works in both directions: in a row the code field
	   takes what the buttons leave, in a column it is as tall as it is. */
	flex: 1 1 auto;
	min-width: 0;
}

/* Numeric, evenly spaced, so a six-digit code is easy to check by eye. */
.theaisle-otp__code input,
.theaisle-otp__code-input {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.25em;
}

.theaisle-otp__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.theaisle-otp__btn {
	white-space: nowrap;
}

/* Send code has to look like something you press.
   The theme's button-5 is its quiet ghost style - a pale grey slab - and on the
   one control that stands between a finished listing and an account, quiet read
   as *disabled*. But the customiser fills the site's buttons red, so left to the
   theme it came out a third solid-red slab competing with Submit and Save.

   It is a "keep going" utility, not the committing action, so it takes the
   #004346 system colour that the step marker, the progress bar and "Next" now
   share - filled, because a required step people must not miss should not be a
   faint outline, and distinctly not the red that only Submit is allowed to be.
   The customiser's flat `.buttons`/`.button-5` fill is a two-class rule printed
   after this file, so a plain `.theaisle-otp__btn[data-otp-send]` ties it and
   loses on order - which is exactly why this button came out solid red on the
   live site. The always-present `.theaisle-otp` wrapper lifts the selector to
   three classes so it wins outright, in every place the widget renders.
   White on #004346 clears WCAG AA. */
.theaisle-otp .theaisle-otp__btn[data-otp-send] {
	background: #004346;
	border: 2px solid #004346;
	color: #fff;
	padding-top: 12px;
	padding-bottom: 12px;
}

.theaisle-otp .theaisle-otp__btn[data-otp-send]:hover,
.theaisle-otp .theaisle-otp__btn[data-otp-send]:focus-visible {
	background: #00595d;
	border-color: #00595d;
	color: #fff;
}

/* Counting down is the one time it *is* inert, and should look it. */
.theaisle-otp__btn[data-otp-send].is-counting {
	border-color: #d8d8e0;
	background: transparent;
	color: #7a7a86;
}

.theaisle-otp__btn.is-counting {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}

/* Helper text, sized as helper text. It carries a real argument - why we want
   the number, that the code is free, that we do not send adverts - so it is not
   fine print; but at full paragraph size it out-shouted the control it
   explains, which matters most on the 320px registration column where the
   widget now also lives. */
.theaisle-otp__description {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: #6a6a76;
}

/* In the listing card it sits between a field and its button, so at body size
   it was the largest block of text in the section - louder than the control it
   exists to explain. Matched to the theme's own field descriptions instead
   (#submit-job-form .field-head .description). */
.theaisle-otp--stacked .theaisle-otp__description {
	font-size: 13px;
	line-height: 1.55;
}

.theaisle-otp-status {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.4;
	/* Reserved so the layout does not jump when a message arrives - but only
	   just: at a full line plus margins it left a visible hole between the
	   control and whatever came next, on every screen where nothing had
	   happened yet. */
	min-height: 1em;
}

.theaisle-otp-status:empty {
	margin-top: 0;
}

.theaisle-otp-status.is-error {
	color: #8a2424;
}

.theaisle-otp-status.is-success {
	color: #007017;
}

/* The code entry only appears once a code has actually been sent — offering an
   empty box first invites people to type something into it and fail. */
.theaisle-otp__entry {
	display: none;
}

.theaisle-otp.is-sent .theaisle-otp__entry {
	display: block;
}

.theaisle-otp.is-verified .theaisle-otp__entry,
.theaisle-otp.is-verified .theaisle-otp__actions {
	display: none;
}

.theaisle-otp__done {
	display: none;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: #007017;
}

.theaisle-otp.is-verified .theaisle-otp__done {
	display: flex;
}

/* Once confirmed, both the explanation and the status line have done their job.
   Leaving them produced "Number confirmed" twice, stacked, in the same green -
   the badge and the status message saying the identical words - under a
   paragraph still explaining why we would text a code. */
.theaisle-otp.is-verified .theaisle-otp__description,
.theaisle-otp.is-verified .theaisle-otp-status {
	display: none;
}

@media (max-width: 480px) {
	.theaisle-otp__row {
		flex-direction: column;
	}

	.theaisle-otp__code,
	.theaisle-otp__actions {
		width: 100%;
	}

	.theaisle-otp__btn {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * The account card
 *
 * This card used to carry its own field shape - bordered inputs, a tighter
 * rhythm, its own label and description sizes - because it was the only place
 * on the listing form where the theme's ruled-slab look plainly failed: four
 * short account fields dressed that way left four labels floating over four
 * rows with no visible edge to tap.
 *
 * That shape is now the WHOLE FORM's, in the child theme's style.css under
 * "The field: a box you can see", and the copy that lived here has been
 * deleted rather than left to drift out of step with it. One value changed on
 * the way across: the resting border was #d9d9e3, which is 1.40:1 against white
 * and fails WCAG 1.4.11 on the one edge that identifies the control. It is
 * #91919e there, at 3.11:1.
 *
 * What is left below is only what is genuinely this card's: the phone control's
 * `.iti` wrapper, the confirmation line, the password reveal, the consent row,
 * and the widget's own layout.
 * ---------------------------------------------------------------------- */

/* The phone field is the exception, because intl-tel-input wraps the input in
   `.iti` and hangs the country picker inside it. Border the wrapper instead and
   the flag, the dial code and the number read as one control rather than as a
   grey chip beside a bare line. */
#form-section-account .theaisle-phone-form-group .iti {
	/* Match the 40px height of every other single-row field on the form. */
	min-height: 40px;
	border: 1px solid var(--theaisle-lf-border, #91919e);
	border-radius: var(--theaisle-lf-radius, 10px);
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The same edge and the same ring as every other control on the form. It used
   to be #d9d9e3 with a mint `--accent` ring, which left the phone field both
   the one border on the page below 3:1 and the one focus state a different
   colour from its neighbours. */
#form-section-account .theaisle-phone-form-group .iti:focus-within {
	border-color: var(--theaisle-lf-focus, #004346);
	box-shadow: 0 0 0 3px var(--theaisle-lf-focus-ring, rgba(0, 67, 70, 0.18));
	outline: 2px solid transparent;
	outline-offset: 2px;
}

#submit-job-form #form-section-account .theaisle-phone-form-group input[type="tel"] {
	min-height: 38px;
	padding: 8px 14px;
	border: 0 !important;
	border-radius: var(--theaisle-lf-radius, 10px);
	background: transparent;
	font-size: 15px;
	line-height: 1.4;
	box-shadow: none;
}

/* A divider, not a filled block. The grey slab read as a disabled field sitting
   in front of an active one. */
#form-section-account .theaisle-phone-form-group .iti__selected-flag {
	padding-left: 12px;
	border-right: 1px solid #ececf1;
	background: transparent;
	border-radius: var(--theaisle-lf-radius, 10px) 0 0 var(--theaisle-lf-radius, 10px);
}

/*
 * Phone + verification.
 *
 * Desktop: the number and its "Send code" / "Resend" button share the top row -
 * the button hugging its label at the right, bottom-aligned to the input - and
 * the six-digit box drops to its own full-width row beneath, followed by the
 * sent / confirmed lines. Tablet and phone (<= 768px): everything stacks full
 * width in order - number, button, then the code box - so the step reads
 * straight down.
 *
 * The button and the code box live inside the verification widget, which is a
 * sibling of the phone field, so the widget and its inner row are flattened with
 * `display: contents`. That brings the number, the button and the box into one
 * flex context, where `order` seats the button beside the number (it follows it
 * in the markup) and a full-width basis drops the box onto the next line.
 *
 * Where a browser is too old for `display: contents` - a share of the WebViews
 * here - the widget stays a real block and the fallback basis below sends it
 * full width beneath the number: the same stacked order, just without the
 * desktop two-up. The wrapper still lifts the phone field out of the form's
 * two-up field pairing (it is not a direct `.pf-body > .form-group`).
 */
#form-section-account .theaisle-signup__verify {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 14px 12px;
}

/* Flatten the widget so its button and code box join the row that holds the
   number. On an engine without display:contents these generate their normal
   boxes and the fallback basis below keeps the whole widget full width. */
#form-section-account .theaisle-signup__verify .theaisle-otp,
#form-section-account .theaisle-signup__verify .theaisle-otp__row {
	display: contents;
}

/* Only bites when display:contents did not (an old WebView): the widget is then
   a real flex item, and this drops it onto its own full-width row so the layout
   degrades to number-then-widget stacked rather than a ragged side-by-side. */
#form-section-account .theaisle-signup__verify > .theaisle-otp {
	flex-basis: 100%;
}

/* Row one, left: the number fills whatever the button leaves. */
#form-section-account .theaisle-signup__verify .theaisle-phone-form-group {
	flex: 1 1 260px;
	order: 1;
}

/* Row one, right: Send code / Resend, hugging its label and bottom-aligned to
   the number's input. Ordered before the code box so it sits beside the number
   even though the markup lists it after. */
#form-section-account .theaisle-signup__verify .theaisle-otp__actions {
	flex: 0 0 auto;
	order: 2;
	align-self: end;
}

/* Row two: the six-digit box on its own full-width line under the number. */
#form-section-account .theaisle-signup__verify .theaisle-otp__code {
	flex: 1 1 100%;
	order: 3;
}

/* The confirmed chip, the Turnstile mount and the status line each take a full
   width line of their own beneath. */
#form-section-account .theaisle-signup__verify .theaisle-otp__done {
	flex: 1 1 100%;
	order: 4;
}

#form-section-account .theaisle-signup__verify .theaisle-otp__check {
	flex: 1 1 100%;
	order: 5;
}

#form-section-account .theaisle-signup__verify .theaisle-otp-status {
	flex: 1 1 100%;
	order: 6;
}

/* An empty Turnstile mount must not spend a flex line, and the gap around it, on
   nothing; it appears only when Cloudflare actually draws a challenge. */
#form-section-account .theaisle-signup__verify .theaisle-otp__check:empty {
	display: none;
}

/* The six digits presented as a code: centred, large and evenly tracked across
   the full-width box, so a texted code is easy to read and check against the
   phone in the vendor's other hand. The trailing letter-spacing is offset by an
   equal indent so the digits stay optically centred, and 20px clears the iOS
   zoom-on-focus threshold. */
#submit-job-form #form-section-account .theaisle-signup__verify .theaisle-otp__code-input {
	text-align: center;
	font-size: 20px;
	letter-spacing: 0.4em;
	text-indent: 0.4em;
	padding: 12px 14px;
	min-height: 52px;
}

/* Auto-verify confirms the code, so the Confirm button is redundant here. It
   stays in the DOM (the JS calls .click() on it), just hidden. `!important`
   because the theme's `.buttons` sets display with one. */
#form-section-account .theaisle-signup__verify .theaisle-otp__btn[data-otp-verify] {
	display: none !important;
}

/* Desktop: Send code / Resend hugs its content beside the number. */
#form-section-account .theaisle-signup__verify .theaisle-otp__actions,
#form-section-account .theaisle-signup__verify .theaisle-otp__btn {
	width: auto;
}

/* Tablet and phone: one full-width column - number, then button, then the code
   box - each on its own line, comfortably spaced. */
@media (max-width: 768px) {
	#form-section-account .theaisle-signup__verify .theaisle-phone-form-group,
	#form-section-account .theaisle-signup__verify .theaisle-otp__actions {
		flex-basis: 100%;
	}

	#form-section-account .theaisle-signup__verify .theaisle-otp__actions,
	#form-section-account .theaisle-signup__verify .theaisle-otp__btn {
		width: 100%;
	}
}

/* The ruled-row divider and 20px padding the theme puts on every `.form-group`
   are reset only for direct `.pf-body` rows; nested in this wrapper the phone
   field and the widget would get them back as stray lines, so clear them here. */
#submit-job-form #form-section-account .theaisle-signup__verify .form-group {
	margin: 0;
	padding: 0;
	border-top: 0;
}

/* The explanation that used to float below this row is now the phone field's
   own `.field-head .description`, styled with every other field's. */

/* Confirmation, as a quiet chip under the field it confirms. It was a
   full-width ruled row of its own, which gave the one thing on the card that
   needs no action the same weight as the four that do. */
#form-section-account .theaisle-otp__done {
	margin: 0;
	padding: 9px 12px;
	border-radius: 8px;
	background: #edfaf5;
	font-size: 14px;
	line-height: 1.35;
	color: #10634c;
}

#form-section-account .theaisle-otp__done i {
	font-size: 18px;
}

/* The terms checkbox.
 *
 * The theme's `.md-checkbox` is built for a one-line label: 20px tall,
 * `overflow: hidden`, and `line-height: 0; white-space: nowrap` on the label
 * itself. The terms sentence is two lines on a phone, so it was clipped to a
 * strip and its box drawn somewhere else entirely. The sign-in page carries its
 * own `height: auto; overflow: auto` repair; this is that repair, plus the room
 * a wrapping label needs.
 */
/* Room for the Show button, so a long password does not run underneath it. */
#submit-job-form #form-section-account .theaisle-signup__password .field > input.input-text {
	padding-right: 74px;
}

/* Quieter inside a bordered field than it was inside a borderless one: there,
   its grey ground was the only thing marking the control; here the field
   already has an edge, and a filled slab inside another filled slab reads as
   two controls. The 44px box stays - it is a tap target, not decoration. */
#form-section-account .theaisle-signup__reveal {
	right: 5px;
	background: transparent;
	color: #5a5a66;
}

#form-section-account .theaisle-signup__reveal:hover {
	background: rgba(0, 0, 0, 0.05);
	color: #242429;
}

#form-section-account .terms-and-conditions {
	margin: 4px 0 0;
}

/*
 * A real checkbox beside its label, laid out with flexbox.
 *
 * The child theme dresses every `.md-checkbox` on the form as a bordered choice
 * card, and the drawn-box-plus-transparent-overlay approach this row used before
 * left the box drifting away from its sentence. Here it is a plain native
 * checkbox in a flex row: the tick is a real, visible, keyboard-reachable
 * control with a teal accent, top-aligned to the first line of the sentence, and
 * the sentence's links (terms, privacy policy) stay clickable because nothing
 * overlays them.
 *
 * EVERY SELECTOR CARRIES `#submit-job-form` PURELY FOR SPECIFICITY, to beat the
 * child theme's `.add-listing-step #submit-job-form .md-checkbox ...` rules at
 * (1,3,0). Two ids settle it.
 */
#submit-job-form #form-section-account .terms-and-conditions .md-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	height: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* Load-bearing for submission, not only for looks: the checkbox carries
   `required` (class-signup.php render_terms), and the theme hides
   `.md-checkbox input` with `visibility:hidden`. A required control that stays
   visibility-hidden makes the browser refuse Submit silently - no bubble, just a
   console warning - so `visibility: visible` here (with a real position and box)
   is what keeps the terms gate focusable and the refusal visible. Keep it in any
   Used-CSS safelist for the add-listing page. */
#submit-job-form #form-section-account .terms-and-conditions .md-checkbox input[type="checkbox"] {
	position: static;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	/* Nudge down so the box centres on the first line of the sentence. */
	margin: 2px 0 0;
	visibility: visible;
	opacity: 1;
	accent-color: #004346;
	cursor: pointer;
}

#submit-job-form #form-section-account .terms-and-conditions .md-checkbox label {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	white-space: normal;
	color: #4a4a4a;
	cursor: pointer;
}

/* Hide the theme's drawn box and tick; the native checkbox above is the control. */
#submit-job-form #form-section-account .terms-and-conditions .md-checkbox label:before,
#submit-job-form #form-section-account .terms-and-conditions .md-checkbox label:after {
	display: none;
}

#submit-job-form #form-section-account .terms-and-conditions .md-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--accent, #5DD4BE);
	outline-offset: 2px;
}

/* The "what the three buttons do" note, which closes the card. `--wide` centres
   it in a 700px column for the days when it sat outside the padded body; in
   here the body's own padding sets the column. */
#form-section-account .theaisle-note--wide {
	margin: 0;
	max-width: none;
}

/* -------------------------------------------------------------------------
 * The widget in the listing form's own field shape
 *
 * Every native field on that page is `.field-head > label` above
 * `.field > input.input-text`. The widget's code entry now matches, so the
 * label lands where the vendor has just read ten others.
 * ---------------------------------------------------------------------- */

/*
 * Keep the code entry hidden until a code has actually been sent, ON THIS FORM.
 *
 * The widget hides it globally with `.theaisle-otp__entry { display: none }`
 * (one class), and reveals it with `.is-sent`. But the code box is a
 * `.form-group` nested inside the widget's `.form-group`, and the listing
 * form's shell sets `... .form-section .form-group .form-group { display: block }`
 * - one id, four classes - which out-ranks the one-class hide and forced an
 * empty "Enter the code" box to sit above Send code before anything was sent,
 * inviting people to type a code nobody had texted them. Two ids here beat the
 * shell's one id whatever its class count, so the hide holds and `.is-sent`
 * still reveals. `.is-verified` hides both again, as it does everywhere.
 */
#submit-job-form #form-section-account .theaisle-otp__entry {
	display: none;
}

#submit-job-form #form-section-account .theaisle-otp.is-sent .theaisle-otp__entry {
	display: block;
}

#submit-job-form #form-section-account .theaisle-otp.is-verified .theaisle-otp__entry {
	display: none;
}

.theaisle-otp--stacked .theaisle-otp__code .field-head label {
	/* The theme sets these for the sign-in family, where the label floats
	   inside the field. Here it is an ordinary label above one. */
	position: static;
	top: auto;
}

/* The row is a column here: the listing form's fields are full-width blocks,
   and a code box sitting beside its buttons in a 700px card read as a different
   kind of thing from every field above it. */
.theaisle-otp--stacked .theaisle-otp__row {
	flex-direction: column;
	gap: 12px;
}

.theaisle-otp--stacked .theaisle-otp__code,
.theaisle-otp--stacked .theaisle-otp__actions {
	width: 100%;
}

.theaisle-otp--stacked .theaisle-otp__actions {
	gap: 10px;
	justify-content: flex-start;
}

/* Send code hugs its label at every width and sits where the fields start,
   rather than stretching full-bleed. A full-width solid dark-teal button for
   this secondary step read with near-primary weight stacked above Submit on a
   phone - two full-width solids in a row, and the wrong one drawing the eye.
   Compact and left-aligned keeps it clearly the utility action tied to the
   number above it, on the phone as well as the desktop. The code box itself
   stays full width; only its buttons hug. */
.theaisle-otp--stacked .theaisle-otp__btn {
	flex: 0 0 auto;
	width: auto;
}

/* -------------------------------------------------------------------------
 * The same widget on the /my-account/ registration form
 *
 * The theme gives that form a 320px column, which is narrower than the 480px
 * breakpoint above - so the widget kept its side-by-side desktop layout in a
 * space that cannot hold it, and the field and its two buttons wrapped into a
 * ragged stack. Layout here follows the container it is in, not the viewport.
 * ---------------------------------------------------------------------- */

.theaisle-register-phone .theaisle-otp {
	margin-top: 12px;
}

/* Same reason as the listing form: in a 320px column three lines of body text
   between a field and its button is the largest thing in the form, and it is
   explaining a control rather than being one. */
.theaisle-register-phone .theaisle-otp__description {
	font-size: 13px;
	line-height: 1.55;
}

.theaisle-register-phone .theaisle-otp__row {
	flex-direction: column;
}

.theaisle-register-phone .theaisle-otp__code,
.theaisle-register-phone .theaisle-otp__actions,
.theaisle-register-phone .theaisle-otp__btn {
	width: 100%;
}

/* No Confirm button here, exactly as on the listing form's account section:
   six digits auto-verify (phone-auth.js fires the verify path on a full code),
   so a Confirm tap is redundant and only offers a second way to do the one
   thing that already happens on its own. The button stays in the DOM because
   the auto-verify calls `.click()` on it - it is only hidden. `!important`
   beats the theme's `.buttons` display rule, which is why it showed through the
   widget's one-class `.theaisle-otp__entry` hide even before a code was sent. */
.theaisle-register-phone .theaisle-otp__btn[data-otp-verify] {
	display: none !important;
}

/* Same reasoning for the logged-in back-fill prompt (phone-field.php), which
   confirms an existing number or adds a missing one through this same widget:
   six digits auto-verify, so the Confirm button is redundant and only hidden.
   With this, every place the widget renders - signup, registration and the
   prompt - shares one auto-verify, no-Confirm flow. */
.theaisle-phone-prompt .theaisle-otp__btn[data-otp-verify] {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Signup block inside the listing form
 * ---------------------------------------------------------------------- */

/* The terms checkbox, which the listing form now renders on the same condition
   the registration form does. The login/register stylesheet that normally
   colours its link is not loaded on this page, so the rule is repeated here
   rather than left to inherit body text - an agreement whose link does not look
   like a link is an agreement nobody reads before ticking. */
#form-section-account .terms-and-conditions {
	margin: 4px 0 0;
}

/* #004346, not the red accent. A red link on this card is the exact red of the
   Submit button and the error state, so "terms and conditions" read as either a
   warning or the primary action rather than a link to read. The dark-teal link
   is unmistakably a link and stops competing with the one red CTA. */
#form-section-account .terms-and-conditions a {
	color: #004346;
	text-decoration: underline;
}

#form-section-account .terms-and-conditions a:hover,
#form-section-account .terms-and-conditions a:focus-visible {
	color: #00595d;
}

/* The three empty divs that balance submit-form.php's closers. The `hidden`
   attribute is doing the work; this makes sure no theme rule setting `display`
   on a div can turn three empty boxes into visible ones. */
.theaisle-signup__tail {
	display: none !important;
}

.theaisle-signup__password {
	position: relative;
}

/* Sits inside the field.
   .theaisle-signup__password is the whole fieldset now - label above, input
   below - so anchoring to 50% of *that* dropped the button onto the boundary
   between the two, half in the field and half out of it. The offset parent is
   the `.field` that actually holds the input; the floating-label forms have no
   `.field`, so they fall back to the fieldset, where 50% is still the middle of
   the input. */
.theaisle-signup__password .field {
	position: relative;
}

.theaisle-signup__reveal {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 44px minimum. The old 4px/13px box measured about 21px tall and sat
	   inside the input's own hit area, so a thumb aiming for it landed in the
	   field instead - on the one control that lets a vendor check the password
	   they are about to be locked out by. */
	min-width: 44px;
	min-height: 44px;
	padding: 0 8px;
	border: 0;
	border-radius: 6px;
	/* A quiet ground of its own. The listing form's inputs are borderless - the
	   row dividers imply the field - so a bare word at the right of an empty
	   row read as stray text rather than as the control inside the field it
	   belongs to. */
	background: rgba(0, 0, 0, 0.04);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	/* Explicit colour, not opacity. Opacity multiplies against whatever the
	   theme has inherited, so the contrast ratio is unknowable - and this is
	   read in direct sunlight on a mid-range LCD. */
	color: #444;
}

.theaisle-signup__reveal:hover {
	background: rgba(0, 0, 0, 0.08);
	color: #111;
}

/* A real focus indicator. The old rule set opacity back to 1, which stopped
   meaning anything the moment the base rule became an explicit colour - so a
   keyboard user could not see where focus was on the one control that keeps a
   typo from becoming a lockout. */
.theaisle-signup__reveal:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	color: #111;
}

/* -------------------------------------------------------------------------
 * Phone sign-in panel
 * ---------------------------------------------------------------------- */

.theaisle-phone-login__intro {
	margin: 0 0 18px;
	color: #4a4a4a;
}

/* The sign-in pane opens with only "Send me a code" showing (the code box and
   Sign in are .theaisle-otp__entry, hidden until a code is on its way), so let
   that button own the row rather than sit small and left-aligned in an empty
   one. Once .is-sent lands, the entry appears and the row returns to the shared
   widget layout the registration and add-listing forms use. */
.theaisle-phone-login__otp:not(.is-sent) .theaisle-otp__actions,
.theaisle-phone-login__otp:not(.is-sent) .theaisle-otp__btn[data-otp-send] {
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Guest panel at the top of the listing form
 *
 * It used to run six stacked paragraphs and most of a phone screen before the
 * first field. A panel that long is a panel people scroll past, which cost it
 * the one line it exists for - the phone warning. That warning and a link row
 * now say what is left to say, in about a fifth of the height.
 * ---------------------------------------------------------------------- */

/* No padding of its own any more. It used to supply the inset for a `.pf-body`
   that had none - the theme's field rows carried theirs individually - and the
   child theme now sets it once on the body itself for every section on the
   form. Left here it was applied twice, and the panel sat 40px in from a card
   whose fields sit 20px in. */
.theaisle-guest {
	padding: 0;
}

/* The phone line carries the whole panel: it is what decides whether the next
   twenty minutes are wasted. Weight and size alone give it that emphasis now -
   the notice rail (a left border and its indent) is gone, so the line sits flush
   with the rest of the panel's centred text rather than pinned to a margin. */
.theaisle-guest__key {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: #242429;
	/* Stop the last word wrapping alone - on a phone this line broke to a
	   lonely "end." on its own row. `pretty` re-flows the break to avoid that
	   orphan; `balance` does the same on engines that have it but not `pretty`;
	   both are ignored where neither is supported, so nothing regresses. */
	text-wrap: balance;
	text-wrap: pretty;
}

/* Both ways out, on one row where they fit. Two full paragraphs of body text
   for links most people will not take is two paragraphs of noise for everyone
   who will not. */
.theaisle-guest__links {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 18px;
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid #ececf1;
}

.theaisle-guest__links a {
	/* Vertical padding, not just text: these are the only two tap targets in
	   the panel and they sit next to each other. */
	display: inline-block;
	padding: 4px 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	/* #004346, the one link colour on this flow (the terms links match). A
	   returning vendor's "Sign in" is a real fork in the journey, so it reads
	   as a link rather than as quiet grey chrome - without wearing the red that
	   only the Submit button is allowed. */
	color: #004346;
	text-decoration: underline;
}

.theaisle-guest__links a:hover,
.theaisle-guest__links a:focus-visible {
	color: #00595d;
}

/* Autosave reassurance, shown from the first keystroke rather than only after
   a restore. Quiet by design - it must not compete with the form. */
/* Ambient "your work is safe" status, pinned low so it stays with the vendor
   instead of scrolling away, and never inserted above content mid-typing. */
.theaisle-autosave-live {
	position: sticky;
	bottom: 0;
	z-index: 4;
	margin: 14px 0 0;
	padding: 8px 12px;
	border-radius: 6px;
	background: #f4f7f6;
	color: #3d5a54;
	font-size: 13px;
	line-height: 1.4;
	opacity: 0;
	transition: opacity 200ms ease;
}

.theaisle-autosave-live.is-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.theaisle-autosave-live {
		transition: none;
	}
}


/* Switching between the password and phone panes inside the sign-in tab.
   Directly under the primary button, so weight here put two loud things in a
   row and made the escape hatch compete with the action. */
.theaisle-alt-signin {
	margin: 16px 0 0;
	font-size: 14px;
	color: #5a5a66;
}

.theaisle-alt-signin a {
	color: #5a5a66;
	text-decoration: underline;
}

.theaisle-alt-signin a:hover,
.theaisle-alt-signin a:focus-visible {
	color: #242429;
}

/* A tappable way out, rendered beside a status message. */
.theaisle-otp-status__action {
	display: inline-block;
	margin-top: 4px;
	font-weight: 600;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Notes
 *
 * One panel, four uses. These were five separate rules saying almost the same
 * thing in slightly different numbers - two of them called
 * .theaisle-autosave-note, defined twice with different padding and colours, so
 * whichever came last silently won. A vendor meets three of these on one page,
 * and they should look like three of the same thing, because they are.
 * ---------------------------------------------------------------------- */

.theaisle-note {
	margin: 0 0 16px;
	padding: 12px 16px;
	/* #004346 rail - the one notice colour used across this flow (the save note
	   and the guest phone line now share the family). Not var(--accent): the
	   accent is the site's action colour, spoken for by the Submit button. The
	   light teal this used to be sat a whisker off white on the #f7fbfa ground
	   and barely registered as a rail at all; the dark teal actually reads. */
	border-left: 4px solid #004346;
	border-radius: 4px;
	background: #f7fbfa;
	color: #333;
	font-size: 14px;
	line-height: 1.5;
}

.theaisle-note p {
	margin: 0;
}

/* Something was put back for you. Green, because it is good news about work you
   thought you had lost. */
.theaisle-note--restore {
	background: #eefaf7;
	color: #1f4f45;
}

/* Sits under the account card on the listing form, which the theme lays out at
   700px. At full width it overhung the card it belongs to. */
.theaisle-note--wide {
	margin: 18px auto 0;
	max-width: 700px;
}

/* Stands in for the registration form. More room, because it is the whole
   content of the panel rather than an aside beside something else. */
.theaisle-note--route {
	margin: 4px 0 0;
	padding: 20px;
}

.theaisle-note--route .theaisle-route__lead {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
	color: #222;
}

.theaisle-note--route .theaisle-route__detail {
	margin: 0 0 18px;
}

/* An anchor, not a button element, so it needs the theme's button metrics
   spelled out - `.buttons` sets padding and radius but assumes a <button> for
   its box and line-up. */
.theaisle-route__cta {
	display: block;
	text-align: center;
	color: #fff;
}

.theaisle-route__cta:hover,
.theaisle-route__cta:focus,
.theaisle-route__cta:visited {
	color: #fff;
}

/* The one recovery control on the sign-in form.
   Given a real tap target but not real weight. At 600 it rendered bold and
   dark, sitting alone in the parent theme's 50px of trailing whitespace - so on
   a form with two fields and a button it read as a heading, and was the second
   loudest thing on the screen after the button itself. It is a way out for the
   minority who need one, not a step in signing in. */
.forgot-password__primary {
	display: inline-block;
	padding: 10px 0;
	font-size: 14px;
	font-weight: 400;
	color: #5a5a66;
	text-decoration: underline;
}

.forgot-password__primary:hover,
.forgot-password__primary:focus-visible {
	color: #242429;
}

/* The parent reserves 50px above this. That is a gap for a page that ended
   here; the pane below now continues. */
.login-form-wrap .forgot-password {
	margin-top: 28px;
}

/* The emailed reset, in its proper home: the bottom of the phone pane, for the
   one cohort a code cannot reach. Quiet, but a real tap target - 13px text with
   no padding beside a primary button is a miss waiting to happen. */
.theaisle-phone-login__reset {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid #ececf1;
	font-size: 13px;
	line-height: 1.5;
	color: #5a5a5a;
}

.theaisle-phone-login__reset a {
	display: inline-block;
	padding: 8px 0;
	color: #5a5a5a;
	text-decoration: underline;
}

.theaisle-phone-login__reset a:hover,
.theaisle-phone-login__reset a:focus {
	color: #242429;
}

/* -------------------------------------------------------------------------
 * The Turnstile mount
 *
 * Empty and zero-height on almost every load: the widget is created in
 * interaction-only mode, so Cloudflare draws nothing unless a visitor actually
 * has to click something. `:not(:empty)` is what keeps a permanent gap from
 * opening above the status line on the other ninety-nine loads.
 * ------------------------------------------------------------------ */
.theaisle-otp__check:not(:empty) {
    margin: 12px 0 0;
}