/*
 * Shared progressive (multi-step) form styles: policy review form (Task 11) and quote form (Task 11A).
 * Spec inner-pages.md 1.3 to 1.8. Tokens only, no color literals.
 */

.di-pf {
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 36px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--band);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
}
.di-pf [hidden] {
	display: none !important;
}

/* Header row: step title and counter. */
.di-pf__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}
.di-pf__title,
.di-pf__subtitle {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--heading-2);
	letter-spacing: normal;
}
.di-pf__title:focus {
	outline: none;
}
.di-pf__title:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
}
.di-pf__count {
	flex: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
	white-space: nowrap;
}

/* Progress bar: three 4px segments, accent up to the current step, line after. No transition. */
.di-progress {
	display: flex;
	gap: 6px;
	margin-bottom: 28px;
}
.di-progress span {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--wp--preset--color--line);
}
.di-progress span.is-on {
	background: var(--wp--preset--color--accent);
}

.di-pf__alert {
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--small);
	color: var(--wp--preset--color--error);
}
.di-pf__alert:empty {
	display: none;
}

/* Step bodies. */
.di-pf__step {
	display: grid;
	gap: 18px;
	min-width: 0;
}
/*
 * Two shapes for the server-rendered (.di-pf--static) form:
 * - .di-pf--pending (set on the form by its inline safety-net script before it paints): step 1 only, counter
 *   and progress shown, submit reads "Continue", so nothing moves when the engine takes over.
 * - not pending (JavaScript off, or the safety net removed the class because the engine never marked this
 *   form ready): every step stacked with its subtitle, final submit label, and the form posts without JS.
 */
.di-pf--pending.di-pf--static [data-pf-step]:not([data-pf-step="1"]),
.di-pf--pending.di-pf--static [data-pf-subtitle],
.di-pf--pending.di-pf--static .di-pf__label-nojs,
.di-pf--static:not(.di-pf--pending) [data-pf-count],
.di-pf--static:not(.di-pf--pending) [data-pf-progress],
.di-pf--static:not(.di-pf--pending) .di-pf__label-js {
	display: none;
}
.di-pf--static:not(.di-pf--pending) .di-pf__step + .di-pf__step {
	margin-top: 28px;
	padding-top: 28px;
	border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
}
.di-pf__fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.di-pf__legend {
	margin-bottom: 8px;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.di-pf__optional {
	font-weight: 400;
	color: var(--wp--preset--color--slate);
}
.di-pf__help {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--small);
	color: var(--wp--preset--color--slate);
}
.di-pf .di-select:focus,
.di-pf .di-input:focus,
.di-pf .di-textarea:focus {
	outline-offset: 1px;
}

/* Radio group styled as buttons (spec 1.4 Field A). The same look for the JS buttons and the no-JS labels. */
.di-pf__radios {
	display: grid;
	gap: 8px;
}
.di-pf__radio {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 8px 16px;
	border: var(--wp--custom--border--emphasis) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}
.di-pf__radio:focus-visible,
.di-pf__radio:has(input:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
}
.di-pf__radio input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}
.di-pf__dot {
	flex: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 2px solid var(--wp--preset--color--slate);
	border-radius: 50%;
	background: var(--wp--preset--color--card);
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--card);
}
.di-pf__radio[aria-checked="true"],
.di-pf__radio:has(input:checked) {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-soft);
}
.di-pf__radio[aria-checked="true"] .di-pf__dot,
.di-pf__radio:has(input:checked) .di-pf__dot {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--accent-soft);
}

/* Drop zone and file button (spec 1.5). */
.di-pf__drop {
	box-sizing: border-box;
	min-width: 0;
	padding: 28px;
	border: var(--wp--custom--border--emphasis) dashed var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--accent-soft);
	text-align: center;
}
.di-pf__drop.is-drag {
	border-style: solid;
}
.di-pf__drop.is-invalid {
	border-color: var(--wp--preset--color--error);
}
.di-pf__drop-icon {
	display: inline-flex;
	margin-bottom: 8px;
	color: var(--wp--preset--color--accent);
}
.di-pf__drop-title {
	margin: 0 0 6px;
	font-weight: 600;
}
.di-pf__drop-hint {
	margin: 0 0 14px;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--small);
	color: var(--wp--preset--color--slate);
}
.di-pf__file-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--wp--custom--control--min-tap-target);
	padding: 0 18px;
	border: var(--wp--custom--border--emphasis) solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	cursor: pointer;
}
.di-pf__file-btn:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--card);
}
.di-pf__file-btn:has(input:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
}
.di-pf__file {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.di-pf__file-name {
	margin: 12px 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	overflow-wrap: anywhere;
}
.di-pf__drop .di-field__error {
	display: block;
	margin-top: 10px;
}

/* Confirmation (spec 1.7). */
.di-pf__done {
	padding: 24px;
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--accent-soft);
}
.di-pf__done-lead {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
}
.di-pf__done-text,
.di-pf__done-upload {
	margin: 0;
	color: var(--wp--preset--color--slate);
}
.di-pf__done-upload {
	margin-top: 12px;
	color: var(--wp--preset--color--ink);
}

/* Navigation row (spec 1.8). */
.di-pf__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
}
.di-pf__back,
.di-pf__next {
	font-size: 17px;
}
.di-pf__back {
	padding: 0 18px;
}
.di-pf__next {
	margin-left: auto;
}

/* Honeypot: off screen, inert, never announced. */
.di-pf__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 781px) {
	.di-pf {
		padding: 24px 20px;
	}
	.di-pf__drop {
		padding: 24px 16px;
	}
}