/**
 * Frontend form styles.
 *
 * Design tokens are the public contract, not these class names and not the
 * Tailwind that will eventually author the chrome. Anything a site wants to
 * restyle should be reachable by overriding a custom property:
 *
 *   .forge-form { --forge-accent: #7c3aed; --forge-radius: 10px; }
 *
 * Everything below reads from those tokens. Values are deliberately neutral so
 * a form inherits its surroundings rather than announcing itself.
 */

.forge-form-wrap {
	--forge-accent: currentColor;
	--forge-text: inherit;
	--forge-muted: color-mix( in srgb, currentColor 60%, transparent );
	--forge-border: color-mix( in srgb, currentColor 25%, transparent );
	--forge-border-focus: var( --forge-accent );
	--forge-error: #b32d2e;
	--forge-success: #00713b;
	--forge-radius: 4px;
	--forge-gap: 1.25rem;
	--forge-control-padding: 0.55em 0.7em;
	--forge-field-width: 100;

	max-width: 100%;
}

/* Layout ----------------------------------------------------------------- */

.forge-form__fields {
	display: flex;
	flex-wrap: wrap;
	gap: var( --forge-gap );
}

.forge-form__field {
	flex: 1 1 calc( var( --forge-field-width ) * 1% - var( --forge-gap ) );
	min-width: min( 100%, 12rem );
}

.forge-form__field.forge-hidden {
	display: none;
}

.forge-form__title {
	margin-top: 0;
}

.forge-form__description {
	color: var( --forge-muted );
}

/* Labels and help -------------------------------------------------------- */

.forge-form__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.forge-form__required {
	color: var( --forge-error );
}

.forge-form__help {
	margin: 0 0 0.4em;
	font-size: 0.875em;
	color: var( --forge-muted );
}

/* Controls --------------------------------------------------------------- */

.forge-form__control input[type="text"],
.forge-form__control input[type="email"],
.forge-form__control input[type="url"],
.forge-form__control input[type="tel"],
.forge-form__control input[type="number"],
.forge-form__control input[type="date"],
.forge-form__control input[type="time"],
.forge-form__control input[type="datetime-local"],
.forge-form__control textarea,
.forge-form__control select {
	width: 100%;
	box-sizing: border-box;
	padding: var( --forge-control-padding );
	border: 1px solid var( --forge-border );
	border-radius: var( --forge-radius );
	background: transparent;
	color: var( --forge-text );
	font: inherit;
}

.forge-form__control input:focus-visible,
.forge-form__control textarea:focus-visible,
.forge-form__control select:focus-visible {
	outline: 2px solid var( --forge-border-focus );
	outline-offset: 1px;
	border-color: var( --forge-border-focus );
}

.forge-form__field.is-invalid .forge-form__control input,
.forge-form__field.is-invalid .forge-form__control textarea,
.forge-form__field.is-invalid .forge-form__control select {
	border-color: var( --forge-error );
}

.forge-form__error {
	margin: 0.35em 0 0;
	font-size: 0.875em;
	color: var( --forge-error );
}

/* Messages --------------------------------------------------------------- */

.forge-form__summary,
.forge-form__confirmation {
	padding: 0.9em 1.1em;
	border-radius: var( --forge-radius );
	border-left: 3px solid;
	margin-bottom: var( --forge-gap );
}

.forge-form__summary {
	border-color: var( --forge-error );
	color: var( --forge-error );
}

.forge-form__summary ul {
	margin: 0.4em 0 0 1.2em;
}

.forge-form__confirmation {
	border-color: var( --forge-success );
	color: var( --forge-success );
}

.forge-form__summary:focus-visible,
.forge-form__confirmation:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Actions ---------------------------------------------------------------- */

.forge-form__actions {
	margin-top: var( --forge-gap );
}

.forge-form__submit {
	font: inherit;
	padding: var( --forge-control-padding );
	padding-inline: 1.4em;
	border: 1px solid var( --forge-accent );
	border-radius: var( --forge-radius );
	background: var( --forge-accent );
	color: Canvas;
	cursor: pointer;
}

.forge-form__submit[aria-disabled="true"] {
	opacity: 0.6;
	cursor: progress;
}

/* Honeypot ---------------------------------------------------------------- */

/*
 * Positioned away rather than display:none. Some bots skip anything that is
 * not rendered; this is invisible to people and present to everything else.
 * aria-hidden and tabindex="-1" on the markup keep it out of the way of
 * assistive technology and keyboard users.
 */
.forge-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media ( prefers-reduced-motion: reduce ) {
	.forge-form * {
		transition: none !important;
	}
}

/* Repeater ---------------------------------------------------------------- */

.forge-repeater__row {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.9rem;
	margin-bottom: 0.75rem;
	border: 1px solid var( --forge-border );
	border-radius: var( --forge-radius );
}

.forge-repeater__fields {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var( --forge-gap );
	min-width: 0;
}

.forge-form__field--sub {
	flex: 1 1 12rem;
	min-width: 0;
}

.forge-repeater__remove,
.forge-repeater__add {
	font: inherit;
	font-size: 0.875em;
	padding: 0.4em 0.9em;
	border: 1px solid var( --forge-border );
	border-radius: var( --forge-radius );
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.forge-repeater__remove:hover {
	border-color: var( --forge-error );
	color: var( --forge-error );
}

.forge-repeater__add:hover {
	border-color: var( --forge-accent );
}

.forge-repeater__add[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

.forge-repeater__actions {
	margin: 0;
}

/* Group ------------------------------------------------------------------- */

.forge-group-field {
	display: flex;
	flex-wrap: wrap;
	gap: var( --forge-gap );
}

.forge-group-field--row .forge-form__field--sub {
	flex: 1 1 0;
}

/* Progress ---------------------------------------------------------------- */

.forge-form__progress ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0 0 var( --forge-gap );
	padding: 0;
	counter-reset: none;
}

.forge-form__step {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.9em;
	color: var( --forge-muted );
}

.forge-form__step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	border: 1px solid var( --forge-border );
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

.forge-form__step--current {
	color: inherit;
	font-weight: 600;
}

.forge-form__step--current .forge-form__step-number {
	border-color: var( --forge-accent );
	background: var( --forge-accent );
	color: Canvas;
}

.forge-form__step--done .forge-form__step-number {
	border-color: var( --forge-success );
	color: var( --forge-success );
}

.forge-form__previous {
	font: inherit;
	padding: var( --forge-control-padding );
	padding-inline: 1.2em;
	border: 1px solid var( --forge-border );
	border-radius: var( --forge-radius );
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.forge-form__previous:hover {
	border-color: var( --forge-accent );
}

/* Only shown to screen readers. Themes usually define this, but a plugin
   cannot assume it. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

/* Accordion sections ------------------------------------------------------- */

/* A native <details>: nothing here depends on JavaScript. The summary is the
   whole affordance, so it gets a real hit target and a visible marker. */
.forge-form__accordion {
	flex: 1 1 100%;
	border-top: 1px solid var( --forge-border );
	padding-top: 0.25rem;
}

.forge-form__accordion-summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 0;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
}

.forge-form__accordion-summary::-webkit-details-marker {
	display: none;
}

.forge-form__accordion-summary::marker {
	content: "";
}

/* A plus that loses its vertical bar when open — drawn in CSS so it inherits
   the text colour instead of baking a hex into an SVG. */
.forge-form__accordion-marker {
	position: relative;
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

.forge-form__accordion-marker::before,
.forge-form__accordion-marker::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	translate: 0 -50%;
}

.forge-form__accordion-marker::after {
	rotate: 90deg;
}

.forge-form__accordion[open] .forge-form__accordion-marker::after {
	rotate: 0deg;
	opacity: 0;
}

.forge-form__accordion-note {
	margin: 0.25rem 0 1.25rem;
	font-size: 0.9375em;
	color: var( --forge-muted );
}

.forge-form__accordion-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var( --forge-gap );
}