/**
 * Sign-up form — classic grid and Typeform-like wizard.
 *
 * Mobile first. Everything is visible by default so the form still works with
 * JavaScript off; the .is-enhanced class (added by form.js) is what turns it
 * into one question per screen.
 *
 * Depends on frontend.css for --pedev-brand / --pedev-brand-dark / --pedev-on-brand.
 *
 * Colour rule: this form is embedded in the site's own page, so it follows the
 * page — never the visitor's OS. There is deliberately no prefers-color-scheme
 * block anywhere in this file. A theme that wants a dark form overrides the
 * --pedev-fm-* custom properties below.
 *
 * Contrast (measured against the card surface #fff):
 *   --pedev-fm-ink     #101828  16.1:1
 *   --pedev-fm-label   #1d2939  13.7:1
 *   --pedev-fm-muted   #4b5565   7.5:1
 *   --pedev-fm-faint   #667085   5.0:1
 *   --pedev-fm-danger  #b42318   6.6:1
 *   --pedev-fm-border  #8a94a6   3.1:1  (WCAG 1.4.11, non-text)
 */

/* =========================================================================
 * Tokens
 * ====================================================================== */

.pedev-tf,
.pedev-signup,
.pedev-cf-grid {
	--pedev-fm-ink: #101828;
	--pedev-fm-label: #1d2939;
	--pedev-fm-muted: #4b5565;
	--pedev-fm-faint: #667085;
	--pedev-fm-line: #e4e7ec;
	--pedev-fm-border: #8a94a6;
	--pedev-fm-border-strong: #667085;
	--pedev-fm-surface: #fff;
	--pedev-fm-soft: #f7f8fa;
	--pedev-fm-danger: #b42318;
	--pedev-fm-danger-soft: #fef3f2;
	--pedev-fm-radius: 12px;

	--pedev-fm-accent: var(--pedev-brand, #0b5fff);
	--pedev-fm-accent-strong: var(--pedev-brand-dark, #06327f);

	/*
	 * Text drawn *on top of* the brand colour, and the brand colour used as
	 * text on white. Both are computed from --pedev-brand so a light brand
	 * (the orange this event uses) stays legible instead of white-on-orange.
	 * The static values below are the fallback for engines without relative
	 * colour syntax; see the @supports block right after.
	 */
	--pedev-fm-on-accent: var(--pedev-on-brand, #fff);
	--pedev-fm-accent-ink: var(--pedev-brand-ink, var(--pedev-brand-dark, #06327f));
	--pedev-fm-ring: rgba(16, 24, 40, 0.16);
}

@supports (color: rgb(from white r g b)) {
	.pedev-tf,
	.pedev-signup,
	.pedev-cf-grid {
		--pedev-fm-ring: color-mix(in srgb, var(--pedev-fm-accent) 32%, transparent);
	}
}

/* =========================================================================
 * Shared: card, buttons, controls
 * ====================================================================== */

/* The lot cards link here; keep the heading clear of sticky theme headers. */
.pedev-tf,
.pedev-signup,
.pedev-success {
	scroll-margin-top: 4rem;
}

.pedev-tf {
	box-sizing: border-box;
	color: var(--pedev-fm-ink);
	font-size: 1rem;
	line-height: 1.5;
	margin: 2rem auto;
	max-width: 46rem;
	width: 100%;

	/* Reused for the full-bleed progress rail. */
	--pedev-tf-pad: 1.25rem;
	--pedev-tf-radius: 16px;
}

@media (min-width: 40em) {
	.pedev-tf {
		--pedev-tf-pad: 2.25rem;
	}
}

@media (min-width: 60em) {
	.pedev-tf {
		--pedev-tf-pad: 3rem;
	}
}

.pedev-tf *,
.pedev-tf *::before,
.pedev-tf *::after {
	box-sizing: inherit;
}

.pedev-tf [hidden] {
	display: none !important;
}

.pedev-tf__form {
	background: var(--pedev-fm-surface);
	border: 1px solid var(--pedev-fm-line);
	border-radius: var(--pedev-tf-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 40px -24px rgba(16, 24, 40, 0.28);
	padding: var(--pedev-tf-pad);
}

/* Honeypot (also styled in frontend.css; repeated so the form is safe alone). */
.pedev-tf .pedev-hp {
	position: absolute !important;
	left: -9999px !important;
	height: 1px;
	overflow: hidden;
	width: 1px;
}

/* ------------------------------------------------------------- controls */

.pedev-step__input,
.pedev-cf__input {
	-webkit-appearance: none;
	appearance: none;
	background: var(--pedev-fm-surface);
	border: 1px solid var(--pedev-fm-border);
	border-radius: 10px;
	color: var(--pedev-fm-ink);
	display: block;
	font: inherit;
	/* 16px keeps iOS from zooming the viewport on focus. */
	font-size: 1rem;
	line-height: 1.4;
	min-height: 46px;
	padding: 0.6875rem 0.875rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

.pedev-step__input::placeholder,
.pedev-cf__input::placeholder {
	color: var(--pedev-fm-faint);
	opacity: 1;
}

.pedev-step__input:hover,
.pedev-cf__input:hover {
	border-color: var(--pedev-fm-border-strong);
}

.pedev-step__input:focus,
.pedev-step__input:focus-visible,
.pedev-cf__input:focus,
.pedev-cf__input:focus-visible {
	border-color: var(--pedev-fm-accent);
	box-shadow: 0 0 0 4px var(--pedev-fm-ring);
	outline: 2px solid var(--pedev-fm-accent-ink);
	outline-offset: 1px;
}

select.pedev-step__input,
select.pedev-cf__input {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234b5565' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 1.125rem 1.125rem;
	cursor: pointer;
	padding-right: 2.5rem;
}

textarea.pedev-step__input,
textarea.pedev-cf__input {
	line-height: 1.55;
	min-height: 6.5rem;
	resize: vertical;
}

.pedev-step__input--narrow {
	max-width: 7rem;
}

/* ------------------------------------------------------------- stepper */

/*
 * Quantity picker. The − / + buttons arrive hidden and form.js reveals them,
 * so with scripting off the visitor keeps a plain number input (spinners and
 * all). Both buttons are 46px squares — comfortably over the 44px target.
 */
.pedev-stepper {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
	/* Shrink-wrap even when the parent turns out to be a grid or flex item. */
	max-width: 100%;
	width: max-content;
}

.pedev-stepper__input {
	max-width: 4.75rem;
	text-align: center;
}

.pedev-stepper.is-ready .pedev-stepper__input {
	-moz-appearance: textfield;
	appearance: textfield;
}

.pedev-stepper.is-ready .pedev-stepper__input::-webkit-outer-spin-button,
.pedev-stepper.is-ready .pedev-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pedev-stepper__btn {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	background: var(--pedev-fm-surface);
	border: 1px solid var(--pedev-fm-border);
	border-radius: 10px;
	color: var(--pedev-fm-label);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font: inherit;
	font-size: 1.375rem;
	font-weight: 700;
	height: 46px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	width: 46px;
}

.pedev-stepper__btn:hover {
	background: var(--pedev-fm-soft);
	border-color: var(--pedev-fm-border-strong);
}

.pedev-stepper__btn:focus-visible {
	outline: 2px solid var(--pedev-fm-accent-ink);
	outline-offset: 2px;
}

.pedev-stepper__btn[disabled] {
	cursor: default;
	opacity: 0.45;
}

.pedev-qty-field {
	margin: 0;
}

.pedev-qty-field__hint {
	color: var(--pedev-fm-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
	margin: 0.4375rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.pedev-stepper__btn {
		transition: none;
	}
}

.pedev-step__input[aria-invalid="true"],
.pedev-cf__input[aria-invalid="true"],
.pedev-cf-field.has-error .pedev-cf__input,
.pedev-step.has-error .pedev-step__input {
	background: var(--pedev-fm-danger-soft);
	border-color: var(--pedev-fm-danger);
}

.pedev-step__input[aria-invalid="true"]:focus,
.pedev-cf-field.has-error .pedev-cf__input:focus,
.pedev-step.has-error .pedev-step__input:focus {
	box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.15);
	outline-color: var(--pedev-fm-danger);
}

/* Native ticks pick up the brand colour for free. */
.pedev-tf input[type="checkbox"],
.pedev-tf input[type="radio"],
.pedev-signup input[type="checkbox"],
.pedev-signup input[type="radio"] {
	accent-color: var(--pedev-fm-accent);
}

/* --------------------------------------------------------------- errors */

.pedev-step__error {
	color: var(--pedev-fm-danger);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0.4375rem 0 0;
}

.pedev-step__error:empty {
	display: none;
}

.pedev-step__error:not(:empty) {
	align-items: flex-start;
	display: flex;
	gap: 0.375rem;
}

.pedev-step__error:not(:empty)::before {
	background-color: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 1.05em;
	margin-top: 0.05em;
	width: 1.05em;
	-webkit-mask: var(--pedev-fm-alert-icon) center / contain no-repeat;
	mask: var(--pedev-fm-alert-icon) center / contain no-repeat;
}

.pedev-tf,
.pedev-signup,
.pedev-cf-grid {
	--pedev-fm-alert-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 3.75a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1Zm0 9a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z'/%3E%3C/svg%3E");
}

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

.pedev-tf .pedev-btn,
.pedev-signup .pedev-form .pedev-btn {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 700;
	gap: 0.5rem;
	justify-content: center;
	line-height: 1.2;
	min-height: 48px;
	padding: 0.6875rem 1.5rem;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.pedev-tf .pedev-btn--primary,
.pedev-signup .pedev-form .pedev-btn--primary {
	background: var(--pedev-fm-accent);
	border-color: var(--pedev-fm-accent);
	color: var(--pedev-fm-on-accent);
}

.pedev-tf .pedev-btn--primary:hover,
.pedev-signup .pedev-form .pedev-btn--primary:hover {
	background: var(--pedev-fm-accent-strong);
	border-color: var(--pedev-fm-accent-strong);
	color: var(--pedev-on-brand-dark, #fff);
}

.pedev-tf .pedev-btn--ghost {
	background: var(--pedev-fm-surface);
	border-color: var(--pedev-fm-border);
	color: var(--pedev-fm-label);
}

.pedev-tf .pedev-btn--ghost:hover {
	background: var(--pedev-fm-soft);
	border-color: var(--pedev-fm-border-strong);
}

.pedev-tf .pedev-btn--link {
	background: transparent;
	border-color: transparent;
	color: var(--pedev-fm-muted);
	font-weight: 600;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pedev-tf .pedev-btn--link:hover {
	color: var(--pedev-fm-ink);
}

.pedev-tf .pedev-btn:focus-visible,
.pedev-signup .pedev-form .pedev-btn:focus-visible {
	outline: 2px solid var(--pedev-fm-accent-ink);
	outline-offset: 2px;
}

.pedev-tf .pedev-btn:active {
	transform: translateY(1px);
}

.pedev-tf .pedev-btn[disabled] {
	cursor: default;
	opacity: 0.55;
	transform: none;
}

/* The ↵ glyph reads as a key cap, not as punctuation. */
.pedev-btn__kbd {
	border: 1px solid currentColor;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 600;
	height: 1.375rem;
	min-width: 1.375rem;
	opacity: 0.65;
}

/* =========================================================================
 * Wizard chrome (only meaningful once form.js runs)
 * ====================================================================== */

.pedev-tf__head {
	display: none;
}

.pedev-tf.is-enhanced .pedev-tf__head {
	display: block;
	/* Pull the rail out to the card edges. */
	margin: calc(-1 * var(--pedev-tf-pad)) calc(-1 * var(--pedev-tf-pad)) 1.75rem;
	padding: 0 var(--pedev-tf-pad);
}

.pedev-tf.is-enhanced .pedev-tf__form {
	/* Clips the full-bleed rail to the card's rounded corners. */
	overflow: hidden;
}

/* One question at a time deserves the room; a narrow card looks like a widget. */
.pedev-tf.is-enhanced {
	max-width: 52rem;
}

.pedev-tf__bar {
	background: var(--pedev-fm-line);
	height: 4px;
	margin: 0 calc(-1 * var(--pedev-tf-pad));
	overflow: hidden;
}

.pedev-tf__bar-fill {
	background: var(--pedev-fm-accent);
	border-radius: 0 999px 999px 0;
	display: block;
	height: 100%;
	transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	width: 0;
}

.pedev-tf__count {
	color: var(--pedev-fm-faint);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	margin: 1.25rem 0 0;
	text-transform: uppercase;
}

.pedev-tf__intro {
	margin-bottom: 1.75rem;
}

.pedev-tf__title {
	color: var(--pedev-fm-ink);
	font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0;
}

.pedev-tf__event {
	color: var(--pedev-fm-muted);
	font-size: 0.9375rem;
	margin: 0.375rem 0 0;
}

/*
 * Enhanced: the intro steps back so the question is the loudest thing on the
 * screen. It is still a real heading, just sized like a running header.
 */
.pedev-tf.is-enhanced .pedev-tf__intro {
	border-bottom: 1px solid var(--pedev-fm-line);
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
}

.pedev-tf.is-enhanced .pedev-tf__title {
	font-size: 1.0625rem;
	letter-spacing: 0;
}

.pedev-tf.is-enhanced .pedev-tf__event {
	font-size: 0.875rem;
	margin-top: 0.125rem;
}

.pedev-tf__intro .pedev-form__legend {
	margin: 0.625rem 0 0;
}

/* One question per screen: the legend has nothing to describe. */
.pedev-tf.is-enhanced .pedev-form__legend {
	display: none;
}

/* =========================================================================
 * Steps
 * ====================================================================== */

.pedev-step {
	border-top: 1px solid var(--pedev-fm-line);
	margin-top: 1.75rem;
	padding-top: 1.75rem;
}

.pedev-step:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

/* Enhanced: exactly one step on screen, with room to breathe. */
.pedev-tf.is-enhanced .pedev-step {
	border-top: 0;
	display: none;
	margin-top: 0;
	min-height: clamp(13rem, 32vh, 19rem);
	padding-top: 0;
}

.pedev-tf.is-enhanced .pedev-step.is-active {
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	.pedev-tf.is-enhanced .pedev-step.is-entering {
		animation: pedev-tf-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pedev-tf__bar-fill,
	.pedev-step__input,
	.pedev-cf__input,
	.pedev-tf .pedev-btn {
		transition: none;
	}
}

@keyframes pedev-tf-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.pedev-step__q {
	color: var(--pedev-fm-ink);
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 0.5rem;
}

.pedev-tf.is-enhanced .pedev-step__q {
	font-size: clamp(1.375rem, 1.05rem + 1.35vw, 2rem);
	letter-spacing: -0.015em;
	line-height: 1.22;
	margin-bottom: 0.625rem;
}

.pedev-step__sub {
	color: var(--pedev-fm-label);
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 1.25rem 0 0.4375rem;
}

.pedev-step__opt {
	color: var(--pedev-fm-faint);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.pedev-tf.is-enhanced .pedev-step__q .pedev-step__opt {
	font-size: 0.9375rem;
	vertical-align: middle;
}

.pedev-step__hint {
	color: var(--pedev-fm-muted);
	font-size: 0.9375rem;
	margin: 0 0 1rem;
}

.pedev-tf.is-enhanced .pedev-step__hint {
	font-size: 1rem;
	margin-bottom: 1.5rem;
	max-width: 42ch;
}

/* Big, comfortable controls once the wizard is driving. */
.pedev-tf.is-enhanced .pedev-step__input {
	border-radius: 12px;
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
	min-height: 56px;
	padding: 0.875rem 1rem;
}

.pedev-tf.is-enhanced .pedev-step__input--narrow {
	max-width: 8rem;
	text-align: center;
}

/* ----------------------------------------------------------------- nav */

.pedev-step__nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1.5rem;
}

/* The back button sits first; the primary action stays on the right. */
.pedev-tf__back {
	order: -1;
}

.pedev-tf.is-enhanced .pedev-step__nav {
	margin-top: 2rem;
}

.pedev-tf.is-enhanced .pedev-step__nav .pedev-btn--primary {
	font-size: 1.0625rem;
	min-height: 54px;
	padding: 0.75rem 2rem;
}

/* "ou pressione Enter" — only useful while the wizard is running. */
.pedev-step__enter {
	display: none;
}

.pedev-tf.is-enhanced .pedev-step__enter {
	color: var(--pedev-fm-faint);
	display: block;
	font-size: 0.8125rem;
	margin: 0.75rem 0 0;
}

@media (max-width: 29.99em) {
	.pedev-step__nav .pedev-btn--primary {
		flex: 1 1 auto;
	}
}

/* =========================================================================
 * Review + success
 * ====================================================================== */

.pedev-tf__review {
	background: var(--pedev-fm-soft);
	border: 1px solid var(--pedev-fm-line);
	border-radius: var(--pedev-fm-radius);
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0.25rem 1rem;
}

.pedev-tf__review-row {
	border-bottom: 1px solid var(--pedev-fm-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem 1.5rem;
	justify-content: space-between;
	padding: 0.75rem 0;
}

.pedev-tf__review-row:last-child {
	border-bottom: 0;
}

.pedev-tf__review-row span {
	color: var(--pedev-fm-muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

.pedev-tf__review-row strong {
	color: var(--pedev-fm-ink);
	overflow-wrap: anywhere;
	text-align: right;
}

.pedev-tf__success {
	background: var(--pedev-fm-surface);
	border: 1px solid var(--pedev-fm-line);
	border-radius: var(--pedev-tf-radius);
	padding: var(--pedev-tf-pad);
	text-align: center;
}

.pedev-tf__done:focus {
	outline: none;
}

.pedev-tf__check {
	align-items: center;
	background: var(--pedev-fm-accent);
	border-radius: 999px;
	color: var(--pedev-fm-on-accent);
	display: inline-flex;
	font-size: 1.75rem;
	height: 3.5rem;
	justify-content: center;
	margin-bottom: 1rem;
	width: 3.5rem;
}

.pedev-tf__success-title {
	color: var(--pedev-fm-ink);
	font-size: 1.375rem;
	margin: 0 0 0.5rem;
}

.pedev-tf__ref {
	color: var(--pedev-fm-muted);
	margin: 0 0 1.25rem;
}

.pedev-tf__success .pedev-ticket-list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.pedev-tf.is-busy {
	opacity: 0.7;
}

/* =========================================================================
 * Custom questions (perguntas da inscrição)
 *
 * One markup for both skins: a .pedev-cf-grid of .pedev-cf-field wrappers.
 * In the classic form the grid is the layout; in the wizard each step holds a
 * grid of one or two questions.
 * ====================================================================== */

.pedev-cf-grid {
	box-sizing: border-box;
	display: grid;
	gap: 1.375rem 1.25rem;
	grid-template-columns: 1fr;
	margin: 0 0 1.5rem;
}

.pedev-cf-grid *,
.pedev-cf-grid *::before,
.pedev-cf-grid *::after {
	box-sizing: inherit;
}

.pedev-cf-field {
	margin: 0;
	min-width: 0;
}

@media (min-width: 36em) {
	.pedev-cf-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pedev-cf-field--full,
	.pedev-cf-field--textarea,
	.pedev-cf-field--heading,
	.pedev-cf-field--paragraph,
	.pedev-cf-field--checkbox,
	.pedev-cf-field--checkbox_group,
	.pedev-cf-field--radio {
		grid-column: 1 / -1;
	}
}

/*
 * Two-column alignment.
 *
 * Without this, a field whose label wraps to two lines — or that carries help
 * text — pushes its own input down and the row stops lining up. Each field
 * becomes a subgrid of four rows (label / help / control / error) sharing the
 * parent's row tracks, so the controls of both columns always sit on the same
 * baseline no matter how tall the labels are.
 */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 36em) {
		/*
		 * A subgrid inherits the parent's row gutter between *every* track it
		 * spans, which would push each control 22px away from its own label.
		 * So the parent drops its row gutter and the fields carry the spacing
		 * between rows as a margin instead — same for both columns, so the
		 * tracks still line up.
		 */
		.pedev-cf-grid {
			/* The last field's own margin closes the grid. */
			margin-bottom: 0;
			row-gap: 0;
		}

		.pedev-cf-field {
			display: grid;
			grid-row: span 4;
			grid-template-rows: subgrid;
			margin-bottom: 1.375rem;
			row-gap: 0;
		}

		.pedev-cf-field > .pedev-cf__label {
			grid-row: 1;
		}

		.pedev-cf-field > .pedev-cf__help {
			grid-row: 2;
		}

		/*
		 * Row 3 is the control row. .pedev-cf__control is the wrapper the info
		 * icon needs (it positions against it), so it has to claim the row too —
		 * left to auto-placement it fell to row 4 and dragged its neighbour's
		 * input a whole track down.
		 */
		.pedev-cf-field > .pedev-cf__input,
		.pedev-cf-field > .pedev-cf__control,
		.pedev-cf-field > .pedev-cf__choices,
		.pedev-cf-field > .pedev-cf__choice {
			grid-row: 3;
		}

		.pedev-cf-field > .pedev-step__error {
			align-self: start;
			grid-row: 4;
		}

		/* Text blocks are not fields; they keep their own flow. */
		.pedev-cf-field--heading,
		.pedev-cf-field--paragraph {
			display: block;
		}
	}
}

/*
 * The quantity picker borrows .pedev-cf-field for its error/label styling but
 * never sits inside .pedev-cf-grid — it lives in the ticket band or in its own
 * wizard step. Undo the subgrid row layout the block above hands to every
 * field, which would otherwise stretch the stepper across the whole column.
 */
.pedev-cf-field.pedev-qty-field {
	display: block;
	margin-bottom: 0;
}

.pedev-cf__label {
	color: var(--pedev-fm-label);
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 0.4375rem;
}

.pedev-cf__opt {
	color: var(--pedev-fm-faint);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.pedev-cf__help {
	color: var(--pedev-fm-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
	margin: 0 0 0.5rem;
}

/*
 * No required asterisk: every optional question already says "(opcional)", so
 * the stray red stars were pure noise.
 */

.pedev-cf-field .pedev-step__error {
	margin-top: 0.4375rem;
}

/* Choices --------------------------------------------------------------- */

.pedev-cf__choices {
	display: grid;
	gap: 0.5rem;
}

@media (min-width: 36em) {
	.pedev-cf-field--full .pedev-cf__choices,
	.pedev-cf-field--checkbox_group .pedev-cf__choices,
	.pedev-cf-field--radio .pedev-cf__choices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pedev-cf__choice {
	align-items: flex-start;
	background: var(--pedev-fm-surface);
	border: 1px solid var(--pedev-fm-border);
	border-radius: 10px;
	color: var(--pedev-fm-label);
	cursor: pointer;
	display: flex;
	font-size: 0.9375rem;
	gap: 0.625rem;
	line-height: 1.45;
	min-height: 46px;
	padding: 0.75rem 0.875rem;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pedev-cf__choice:hover {
	background: var(--pedev-fm-soft);
	border-color: var(--pedev-fm-border-strong);
}

.pedev-cf__choice input {
	flex: 0 0 auto;
	height: 1.125rem;
	margin: 0.2rem 0 0;
	width: 1.125rem;
}

.pedev-cf__choice:focus-within {
	border-color: var(--pedev-fm-accent);
	box-shadow: 0 0 0 4px var(--pedev-fm-ring);
}

.pedev-cf__choice input:focus-visible {
	outline: 2px solid var(--pedev-fm-accent-ink);
	outline-offset: 2px;
}

/* A lone consent tick reads as a statement, not as a list option. */
.pedev-cf__choice--single {
	background: var(--pedev-fm-soft);
	border-color: var(--pedev-fm-line);
	gap: 0.75rem;
	padding: 0.875rem 1rem;
}

.pedev-cf__choice--single input {
	height: 1.25rem;
	margin-top: 0.1rem;
	width: 1.25rem;
}

.pedev-cf__choice--single:hover {
	border-color: var(--pedev-fm-border);
}

/* =========================================================================
 * LGPD consent
 *
 * Closes both skins. One short sentence per tick box, and the full legal text
 * folded away in a <details> so it stops competing with the button. The two
 * ticks are visually identical — the difference between them is the words and
 * the "(opcional)" tag, not the styling, because a louder mandatory box would
 * read as pressure to accept the optional one too.
 * ====================================================================== */

.pedev-consent {
	display: grid;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

/* The wrappers are plain grid children here; the grid owns the spacing. */
.pedev-consent .pedev-cf-field {
	margin: 0;
}

.pedev-consent .pedev-cf__choice {
	/* 44px minimum touch target even for a one-line sentence. */
	align-items: flex-start;
	min-height: 44px;
	padding: 0.9375rem 1.125rem;
}

/*
 * Keep the sentence from breaking into a long line plus a stub. Browsers
 * without text-wrap: pretty just wrap normally, which is the current behaviour.
 */
.pedev-consent .pedev-cf__choice > span,
.pedev-consent .pedev-cf__choice .pedev-cf__choice-text {
	line-height: 1.5;
	text-wrap: pretty;
}

/*
 * Top-aligned, then nudged to sit on the middle of the FIRST line — a tick
 * centred against a two-line sentence looks unattached to either of them.
 * (line box = 0.9375rem × 1.45 ≈ 1.36rem; the box is 1.25rem.)
 */
.pedev-consent .pedev-cf__choice input {
	flex: 0 0 auto;
	/* Half the first line box minus half the tick: sits on the first line. */
	margin-top: 0.1875rem;
}

.pedev-consent .has-error .pedev-cf__choice {
	background: var(--pedev-fm-danger-soft);
	border-color: var(--pedev-fm-danger);
}

/* The long text: one quiet line, expanded only by whoever wants it. */
.pedev-consent__more {
	color: var(--pedev-fm-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
}

.pedev-consent__summary {
	color: var(--pedev-fm-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0.25rem 0;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pedev-consent__summary:hover {
	color: var(--pedev-fm-ink);
}

.pedev-consent__summary:focus-visible {
	border-radius: 6px;
	outline: 2px solid var(--pedev-fm-accent-ink);
	outline-offset: 2px;
}

.pedev-consent__legal {
	background: var(--pedev-fm-soft);
	border-radius: var(--pedev-fm-radius);
	margin-top: 0.5rem;
	padding: 0.875rem 1rem;
}

.pedev-consent__legal p {
	margin: 0 0 0.625rem;
}

.pedev-consent__legal p:last-child {
	margin-bottom: 0;
}

.pedev-consent__legal a {
	color: var(--pedev-fm-accent-ink);
}

/* Text blocks ----------------------------------------------------------- */

.pedev-cf__heading {
	border-top: 1px solid var(--pedev-fm-line);
	color: var(--pedev-fm-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 0.5rem 0 0;
	padding-top: 1.5rem;
}

.pedev-cf-grid > .pedev-cf-field--heading:first-child .pedev-cf__heading {
	border-top: 0;
	padding-top: 0;
}

.pedev-cf__paragraph {
	background: var(--pedev-fm-soft);
	border-radius: var(--pedev-fm-radius);
	color: var(--pedev-fm-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
	padding: 0.875rem 1rem;
}

.pedev-cf__paragraph p {
	margin: 0 0 0.5rem;
}

.pedev-cf__paragraph p:last-child {
	margin-bottom: 0;
}

/* Wizard: a step never needs the grid margin at the bottom. */
.pedev-step--custom .pedev-cf-grid {
	margin-bottom: 0;
}

/* In the wizard a question label *is* the question. */
.pedev-tf.is-enhanced .pedev-step--custom .pedev-cf__label,
.pedev-tf.is-enhanced .pedev-step--qty .pedev-cf__label {
	color: var(--pedev-fm-ink);
	font-size: clamp(1.25rem, 1rem + 1.05vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.012em;
	line-height: 1.25;
	margin-bottom: 0.5rem;
}

.pedev-tf.is-enhanced .pedev-step--custom .pedev-cf__opt {
	font-size: 0.9375rem;
	vertical-align: middle;
}

.pedev-tf.is-enhanced .pedev-step--custom .pedev-cf__help {
	font-size: 1rem;
	margin-bottom: 1.25rem;
	max-width: 42ch;
}

.pedev-tf.is-enhanced .pedev-step--custom .pedev-cf__input {
	border-radius: 12px;
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
	min-height: 56px;
	padding: 0.875rem 1rem;
}

.pedev-tf.is-enhanced .pedev-step--custom .pedev-cf__paragraph {
	font-size: 0.875rem;
}

/* The quantity step gets the same generous sizing as a custom question. */
.pedev-tf.is-enhanced .pedev-step--qty .pedev-stepper__input {
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
	max-width: 5.5rem;
	min-height: 56px;
}

.pedev-tf.is-enhanced .pedev-step--qty .pedev-stepper__btn {
	height: 56px;
	width: 56px;
}

.pedev-tf.is-enhanced .pedev-step--qty .pedev-qty-field__hint {
	font-size: 0.9375rem;
}

/* =========================================================================
 * Classic skin
 * ====================================================================== */

.pedev-signup {
	border-radius: 16px;
	color: var(--pedev-fm-ink);
	margin: 2rem auto;
	max-width: 46rem;
	padding: 1.25rem;
}

@media (min-width: 40em) {
	.pedev-signup {
		padding: 2.25rem;
	}
}

.pedev-signup .pedev-signup__title {
	color: var(--pedev-fm-ink);
	font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 1.5rem;
	padding-bottom: 1.25rem;
	position: relative;
}

.pedev-signup .pedev-signup__title::after {
	background: var(--pedev-fm-accent);
	border-radius: 999px;
	bottom: 0;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	width: 2.5rem;
}

/*
 * Ticket context: which lote, how many. It sits between the heading and the
 * first personal question because it describes the *ticket*, not the person —
 * and because the quantity used to sit halfway down the data grid, alone on
 * its row, with a hole beside it.
 */
.pedev-signup__ticket {
	align-items: center;
	background: var(--pedev-fm-soft);
	border: 1px solid var(--pedev-fm-line);
	border-radius: var(--pedev-fm-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	justify-content: space-between;
	margin: 0 0 1.5rem;
	padding: 1rem 1.125rem;
}

.pedev-signup__ticket .pedev-field {
	flex: 1 1 14rem;
	margin: 0;
	min-width: 0;
}

/* A single lote is not a choice: it is context, printed as such. */
.pedev-signup__lot {
	display: flex;
	flex: 1 1 12rem;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	min-width: 0;
}

.pedev-signup__lot-name {
	color: var(--pedev-fm-ink);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.pedev-signup__lot-price {
	color: #067647;
	font-size: 0.875rem;
	font-weight: 600;
}

.pedev-signup__ticket .pedev-qty-field {
	flex: 0 0 auto;
	text-align: left;
}

/* Legend: the required/optional contract, stated once. */
.pedev-form__legend {
	color: var(--pedev-fm-muted);
	font-size: 0.875rem;
	line-height: 1.45;
	margin: 0 0 1.25rem;
}

/* The lot picker is the one built-in field outside the question grid. */
.pedev-signup .pedev-field {
	display: flex;
	flex-direction: column;
	gap: 0.4375rem;
	margin: 0 0 1.375rem;
}

.pedev-signup .pedev-field > label {
	color: var(--pedev-fm-label);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.pedev-signup .pedev-field select,
.pedev-signup .pedev-field input {
	-webkit-appearance: none;
	appearance: none;
	background: var(--pedev-fm-surface);
	border: 1px solid var(--pedev-fm-border);
	border-radius: 10px;
	color: var(--pedev-fm-ink);
	font: inherit;
	font-size: 1rem;
	min-height: 46px;
	padding: 0.6875rem 0.875rem;
	width: 100%;
}

.pedev-signup .pedev-field select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234b5565' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 1.125rem 1.125rem;
	padding-right: 2.5rem;
}

.pedev-signup .pedev-field select:focus,
.pedev-signup .pedev-field input:focus {
	border-color: var(--pedev-fm-accent);
	box-shadow: 0 0 0 4px var(--pedev-fm-ring);
	outline: 2px solid var(--pedev-fm-accent-ink);
	outline-offset: 1px;
}

/* Consent + submit sit below a hairline so the form has a clear closing. */
.pedev-signup .pedev-form > .pedev-consent {
	border-top: 1px solid var(--pedev-fm-line);
	margin-top: 1.75rem;
	padding-top: 1.5rem;
}

/*
 * The closing action is centred: it is the only thing left to do on the page,
 * and a lone button flush against the left edge of a 46rem card reads as an
 * afterthought. Full width on phones, comfortable and centred above that.
 */
.pedev-signup__actions {
	display: flex;
	justify-content: center;
	margin-top: 2.25rem;
}

.pedev-signup .pedev-form .pedev-signup__actions .pedev-btn--primary {
	width: 100%;
}

@media (min-width: 36em) {
	.pedev-signup .pedev-form .pedev-signup__actions .pedev-btn--primary {
		min-width: 18rem;
		width: auto;
	}
}

/* No JavaScript: the wizard is a long single page, so it closes the same way. */
.pedev-tf:not(.is-enhanced) .pedev-step--last .pedev-step__nav {
	justify-content: center;
}

/* Server-side feedback blocks. */
.pedev-signup .pedev-alert {
	margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------------------
 * Cloudflare Turnstile
 *
 * The widget is a fixed-size iframe (300x65 by default). Centre it and give it
 * consistent breathing room so neither skin jumps when it appears.
 * ------------------------------------------------------------------------ */
.pedev .pedev-turnstile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	margin: 1.5rem 0;
}

.pedev .pedev-turnstile .cf-turnstile {
	max-width: 100%;
	min-height: 65px;
}

/* Idle widget in the wizard: it only materialises when form.js executes it,
   so it must not reserve a blank strip above the submit button. */
.pedev .pedev-turnstile--deferred {
	margin: 0;
}

.pedev .pedev-turnstile--deferred .cf-turnstile {
	min-height: 0;
}

.pedev .pedev-turnstile--deferred .cf-turnstile:not(:empty) {
	margin: 1rem 0;
	min-height: 65px;
}

.pedev .pedev-turnstile__error {
	color: var(--pedev-fm-danger, #b3261e);
	font-size: .9375rem;
	margin: 0;
	text-align: center;
}

.pedev .pedev-turnstile__error[hidden] {
	display: none;
}

.pedev .pedev-turnstile__noscript {
	color: var(--pedev-fm-muted, #5b6472);
	font-size: .875rem;
	margin: 0;
	text-align: center;
}

/* Classic skin: the widget sits between the consent hairline and the button. */
.pedev-signup .pedev-form > .pedev-turnstile {
	margin-bottom: 0;
}

/* =========================================================================
 * Participants
 *
 * One card per extra ticket. The cards ship visible, all the way up to the
 * lote's max_per_order, so the form is complete without JavaScript; form.js
 * parks the ones past the chosen quantity with data-pedev-off, which is what
 * the rule below hides. It has to beat .is-active on a wizard step, hence the
 * !important — the only one in this file.
 * ====================================================================== */

.pedev [data-pedev-off] {
	display: none !important;
}

.pedev-attendees {
	display: grid;
	gap: 1rem;
	margin: 0 0 1.5rem;
}

.pedev-attendee {
	background: var(--pedev-fm-surface, #fff);
	border: 1px solid var(--pedev-fm-line, #e4e7ec);
	border-radius: var(--pedev-fm-radius, 12px);
	box-sizing: border-box;
	padding: 1rem 1rem 1.125rem;
}

.pedev-attendee > .pedev-cf-grid {
	margin-bottom: 0;
}

/*
 * With subgrid the questions carry their own bottom margin, so the card must
 * not add a second one underneath the last row.
 */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 36em) {
		.pedev-attendee {
			padding-bottom: 0;
		}
	}
}

.pedev-step--attendee .pedev-attendee {
	margin: 0 0 1.25rem;
}

/* The title strip, shared by the cards and by the holder's own questions. */
.pedev-attendee__head {
	align-items: center;
	color: var(--pedev-fm-label, #1d2939);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9375rem;
	font-weight: 700;
	gap: 0.5rem;
	line-height: 1.3;
	margin: 0 0 0.875rem;
}

.pedev-attendee__head--holder {
	margin: 0 0 0.75rem;
}

.pedev-attendee__badge {
	align-items: center;
	background: var(--pedev-fm-accent, #0b5fff);
	border-radius: 999px;
	box-sizing: border-box;
	color: var(--pedev-fm-on-accent, #fff);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 700;
	height: 1.5rem;
	justify-content: center;
	line-height: 1;
	width: 1.5rem;
}

.pedev-attendee__name {
	min-width: 0;
}

/* "você" — a quiet chip, never a second heading competing with the name. */
.pedev-attendee__you {
	background: var(--pedev-fm-soft, #f7f8fa);
	border-radius: 999px;
	color: var(--pedev-fm-muted, #4b5565);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.1875rem 0.5rem;
}

/* Why a stranger's CPF is being asked for. Printed once, on the first card. */
.pedev-attendee__lede {
	color: var(--pedev-fm-muted, #4b5565);
	font-size: 0.875rem;
	line-height: 1.45;
	margin: -0.25rem 0 0.875rem;
}

/* ---------------------------------------------------------------- info tip
 *
 * The icon lives inside the control and the tip floats over the layout, so
 * neither one takes a row from the grid — a hint printed under a label grew
 * that column and knocked its neighbour's input out of line.
 */
.pedev-cf__control {
	position: relative;
}

.pedev-cf__input--tipped {
	padding-right: 2.75rem;
}

.pedev-cf__info {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	background: transparent;
	border: 1px solid var(--pedev-fm-border);
	border-radius: 50%;
	color: var(--pedev-fm-muted);
	cursor: pointer;
	display: inline-flex;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.8125rem;
	font-style: italic;
	font-weight: 700;
	height: 1.375rem;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.375rem;
}

.pedev-cf__info:hover {
	border-color: var(--pedev-fm-accent);
	color: var(--pedev-fm-accent-ink);
}

.pedev-cf__info:focus-visible {
	outline: 2px solid var(--pedev-fm-accent-ink);
	outline-offset: 2px;
}

.pedev-cf__info[aria-expanded="true"] {
	background: var(--pedev-fm-accent);
	border-color: var(--pedev-fm-accent);
	color: var(--pedev-fm-on-accent);
}

/* Floating: absolute so opening it never reflows the form. */
.pedev-cf__tip {
	background: #101828;
	border-radius: 8px;
	bottom: calc(100% + 0.5rem);
	box-shadow: 0 8px 24px -8px rgba(16, 24, 40, 0.45);
	color: #fff;
	font-size: 0.8125rem;
	left: 0;
	line-height: 1.45;
	margin: 0;
	padding: 0.5rem 0.6875rem;
	position: absolute;
	right: 0;
	z-index: 5;
}

.pedev-cf__tip::after {
	border: 6px solid transparent;
	border-top-color: #101828;
	content: "";
	position: absolute;
	right: 0.9375rem;
	top: 100%;
}

.pedev-cf__tip[hidden] {
	display: none;
}

/* Required marker. Quiet but unmistakable; the legend at the top explains it. */
.pedev-cf__req,
.pedev-step__req {
	color: var(--pedev-fm-danger);
	font-weight: 700;
}

.pedev-form__legend .pedev-cf__req {
	margin-right: 0.125rem;
}

/* =========================================================================
 * Modal (modo="modal")
 *
 * The dialog is printed OPEN at the end of the page — that IS the no-script
 * fallback, a plain form the button anchors to — and an inline one-liner
 * closes it. Everything modal-shaped below therefore hangs off .is-open,
 * added by form.js. Two consequences worth spelling out:
 *
 *   1. With the script blocked the dialog stays an ordinary block of page,
 *      not a 90vh scroll box floating over the footer. That is also why the
 *      base rule forces position: static — the UA stylesheet makes an open
 *      <dialog> position: absolute, which would lift the fallback form out
 *      of the flow and drop it on top of the content.
 *   2. Open, both code paths look identical: the native <dialog> (top layer,
 *      ::backdrop) and the hand-driven fallback (data-pedev-dialog-fallback
 *      plus a .pedev-dialog-backdrop sibling) share every rule below.
 * ====================================================================== */

/* The button. Colours and padding come from .pedev-btn in frontend.css. */
.pedev-dialog-open {
	display: inline-block;
	max-width: 100%;
}

.pedev-dialog-host {
	margin: 0;
	padding: 0;
}

.pedev-dialog {
	background: #fff;
	border: 0;
	color: #101828;
	margin: 0 auto;
	max-width: 46rem;
	padding: 0;
	position: static;
	width: 100%;
}

/* Closed: the browser hides it. Only the hand-driven fallback needs saying. */
.pedev-dialog[data-pedev-dialog-fallback]:not(.is-open) {
	display: none;
}

/* An ✕ that closes nothing would only puzzle a visitor without scripting. */
.pedev-dialog:not(.is-open) .pedev-dialog__head {
	display: none;
}

.pedev-dialog.is-open {
	border-radius: 14px;
	bottom: auto;
	box-shadow: 0 24px 64px rgba(16, 24, 40, 0.28);
	display: block;
	left: 50%;
	margin: 0;
	max-height: 90vh;
	max-width: none;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Fixed on both paths: a top-layer <dialog> takes the viewport as its
	   containing block, so the maths is the same with or without support. */
	position: fixed;
	right: auto;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(46rem, calc(100% - 2rem));
	z-index: 100000;
}

.pedev-dialog::backdrop {
	background: rgba(16, 24, 40, 0.62);
}

.pedev-dialog-backdrop {
	background: rgba(16, 24, 40, 0.62);
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 99999;
}

/* Sticky, so the way out never scrolls away — phones above all. */
.pedev-dialog__head {
	align-items: center;
	background: #fff;
	border-bottom: 1px solid #e4e7ec;
	display: flex;
	justify-content: flex-end;
	min-height: 3rem;
	padding: 0.25rem 0.5rem;
	position: sticky;
	top: 0;
	z-index: 5;
}

/*
 * The form prints its own visible heading right below, so this one exists to
 * name the dialog for aria-labelledby — announced, never drawn.
 */
.pedev-dialog__title,
.pedev-dialog__close-label {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.pedev-dialog__close {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	color: #4b5565;
	cursor: pointer;
	display: inline-flex;
	font-size: 1.625rem;
	height: 44px;
	justify-content: center;
	line-height: 1;
	min-width: 44px;
	padding: 0;
}

.pedev-dialog__close:hover {
	background: #f2f4f7;
	color: #101828;
}

.pedev-dialog__close:focus-visible {
	outline: 2px solid var(--pedev-brand, #0b5fff);
	outline-offset: 2px;
}

.pedev-dialog__body {
	padding: 0 1rem 1.5rem;
}

/*
 * Open, the dialog IS the card. Left alone it would show a framed form inside
 * a framed panel, and the wizard's desktop padding (3rem a side) stacked on
 * the dialog's own would squeeze the questions into a gutter.
 */
.pedev-dialog.is-open .pedev-tf,
.pedev-dialog.is-open .pedev-signup,
.pedev-dialog.is-open .pedev-success {
	margin: 0.75rem 0 0;
	max-width: none;
	scroll-margin-top: 0;
}

.pedev-dialog.is-open .pedev-tf {
	--pedev-tf-pad: 1.25rem;
}

.pedev-dialog.is-open .pedev-tf__form,
.pedev-dialog.is-open .pedev-signup,
.pedev-dialog.is-open .pedev-success {
	border: 0;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

/* Opacity only: a transform here would fight the centring one above. */
.pedev-dialog.is-open {
	animation: pedev-dialog-in 0.18s ease-out;
}

.pedev-dialog.is-open::backdrop {
	animation: pedev-dialog-in 0.18s ease-out;
}

@keyframes pedev-dialog-in {
	from {
		opacity: 0;
	}
}

/* Scroll lock. showModal() already blocks most browsers; this covers the
   fallback and the ones that do not. */
.pedev-dialog-lock {
	overflow: hidden !important;
}

/* Phone: a full-screen sheet that scrolls on its own, ✕ pinned at the top. */
@media (max-width: 640px) {
	.pedev-dialog.is-open {
		border-radius: 0;
		height: 100vh;
		height: 100dvh;
		left: 0;
		max-height: 100vh;
		max-height: 100dvh;
		top: 0;
		transform: none;
		width: 100%;
	}

	.pedev-dialog__body {
		padding: 0 0.875rem 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pedev-dialog.is-open,
	.pedev-dialog.is-open::backdrop {
		animation: none;
	}
}