/**
 * The form family.
 *
 * Baseline only: enough that a form dropped on a blank page is usable and
 * legible before anybody styles it, and nothing that fights a theme style or a
 * class the builder adds afterwards. Every colour and radius reads a design
 * token first and falls back to a plain value, so a site with a design system
 * inherits it and a site without one still gets a form that works.
 */

.form{
	display: grid;
	gap: var(--space-md, 0.95rem);
}

/* ---------------------------------------------------------------------------
 * Fields
 * ------------------------------------------------------------------------- */

.form .field{
	display: grid;
	gap: 0.35rem;
}

/*
 * The weight lives on the label rather than on the field, which is where it used
 * to be. A bold `.field` made the help text bold, and the option labels inside a
 * checkbox group bold, because they inherit from it.
 */
.field__label{
	font-weight: 600;
	line-height: 1.3;
}

/*
 * The asterisk is decoration: `required` on the control is what actually tells
 * an assistive technology the field is required, and the element marks the span
 * aria-hidden so it is not also read out as "star".
 */
.field__required{
	margin-inline-start: 0.15em;
	color: var(--color-danger, #b32d2e);
}

.field__help{
	font-size: 0.875em;
	line-height: 1.4;
	opacity: 0.75;
}

.form .input{
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--color-border, #dcdcde);
	border-radius: var(--radius, 8px);
	background: var(--color-surface, #fff);
	color: inherit;
	font: inherit;
}

.form .input:focus-visible{
	outline: 2px solid var(--color-accent, #2271b1);
	outline-offset: 1px;
	border-color: transparent;
}

/*
 * Only once the browser has decided the value is wrong *and* the person has had
 * a go at it. Plain `:invalid` paints every required field red before a single
 * character is typed, which reads as "you have already failed".
 */
.form .input:user-invalid{
	border-color: var(--color-danger, #b32d2e);
}

.form textarea.input{
	resize: vertical;
	min-height: 6rem;
}

/* ---------------------------------------------------------------------------
 * Choices — checkboxes, radios, consent
 * ------------------------------------------------------------------------- */

.form .field--group{
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.form .field--group > .field__label{
	padding: 0;
	margin-block-end: 0.15rem;
}

.form .choice{
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-weight: 400;
	line-height: 1.45;
	cursor: pointer;
}

.form .choice__input{
	/* Nudged down so the box sits on the first line's baseline, not above it. */
	margin-block-start: 0.2em;
	flex: none;
	accent-color: var(--color-accent, #2271b1);
}

/* ---------------------------------------------------------------------------
 * Submit
 * ------------------------------------------------------------------------- */

.form__submit{
	justify-self: start;
}

.form__submit.button--full{
	justify-self: stretch;
	width: 100%;
}

.form__submit[aria-busy="true"]{
	cursor: progress;
	opacity: 0.75;
}

.form__submit:disabled{
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * The notice
 *
 * Created by forms.js on first submit, so it has no size until it has something
 * to say — an empty paragraph reserving a line under every form is a gap nobody
 * asked for.
 * ------------------------------------------------------------------------- */

.form__notice{
	margin: 0;
	line-height: 1.5;
}

.form__notice:empty{
	display: none;
}

.form__notice[data-state]{
	padding: 0.7rem 0.85rem;
	border-inline-start: 3px solid currentColor;
	border-radius: var(--radius, 8px);
}

.form__notice[data-state="sending"]{
	opacity: 0.7;
}

.form__notice[data-state="success"]{
	color: var(--color-success, #1a7f37);
	background: color-mix( in srgb, currentColor 8%, transparent );
}

.form__notice[data-state="error"]{
	color: var(--color-danger, #b32d2e);
	background: color-mix( in srgb, currentColor 8%, transparent );
}

/*
 * While the request is in flight the fields stay visible and stay readable —
 * they are simply not touchable. Hiding or blanking them mid-send means a
 * failure leaves the person staring at an empty form wondering what they typed.
 */
.form[data-shilpi-state="sending"] .field,
.form[data-shilpi-state="sending"] .field--group{
	opacity: 0.6;
	pointer-events: none;
}

/*
 * `data-notice="replace"`: on success the form gets out of the way and only the
 * thank-you remains. Worth having for a newsletter box, where leaving the empty
 * field behind invites a second identical signup.
 */
.form[data-notice="replace"][data-shilpi-state="success"] > *:not(.form__notice){
	display: none;
}