/**
 * OSHIDA — the form component.
 *
 * @figma 1707:3365 (Frame 336, the شخص حقیقی form)
 * Owner: work package C5.
 *
 * Structure
 * ---------
 *   .o-form                  the wrapper: rail + form, side by side at xl
 *     .o-form__notice        success / error summary, focusable
 *     .o-form__rail          sticky <ol> of the fieldsets
 *     .o-form__form
 *       .o-fieldset          one rounded card per design fieldset
 *         .o-fieldset__legend  icon + title, over a hairline rule
 *         .o-fieldset__grid    two columns at xl, one below md
 *           .o-field         one control and its messages
 *
 * The notched outline
 * -------------------
 * The design draws a field as a hairline-outlined box whose block-start border
 * is interrupted by the label. That gap is not a mask trick or an SVG: the
 * label simply paints the card's own background over the border it crosses.
 * For that to work the card background must be OPAQUE, which is why
 * `--o-form-card` resolves to a flat token and not to one of the translucent
 * veils. The measured render agrees: the fieldset card is darker than the page
 * behind it, not a lighter veil on top of it.
 *
 * Colour
 * ------
 * Tokens only. Two locals are declared on `.o-form` because `tokens.css` (owned
 * by A1) has no error colour and no form-card colour yet; both are written as
 * `var(--o-token, fallback)` so they pick up the real token the moment A1 adds
 * it, with no change here.
 */

/* --------------------------------------------------------------------------
 * Wrapper
 * -------------------------------------------------------------------------- */

.o-form {
	--o-form-card: var(--o-form-card-token, var(--o-bg-deep));
	--o-form-danger: var(--o-danger, #e5484d);
	--o-form-row: 3.125rem;
	--o-form-gap: var(--o-space-md);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--o-space-lg);
	inline-size: min(100%, var(--o-container-panel));
	margin-inline: auto;
	color: var(--o-text);
}

/* --------------------------------------------------------------------------
 * Notice / error summary
 * -------------------------------------------------------------------------- */

.o-form__notice {
	grid-column: 1 / -1;
	padding: var(--o-pad-well);
	border: var(--o-line-width) solid var(--o-line);
	border-radius: var(--o-radius-sm);
	background-color: var(--o-form-card);
	font-size: var(--o-fs-sm);
	line-height: var(--o-lh-snug);
}

.o-form__notice:focus-visible {
	outline: 2px solid var(--o-gold);
	outline-offset: 3px;
}

.o-form__notice--success {
	border-color: var(--o-gold);
	color: var(--o-gold);
}

.o-form__notice--error {
	border-color: var(--o-form-danger);
}

.o-form__notice-title {
	margin: 0 0 var(--o-space-2xs);
	font-weight: var(--o-fw-semibold);
}

.o-form__notice-list {
	margin: 0;
	padding-inline-start: var(--o-space-xs);
	list-style: disc;
}

.o-form__notice-list a {
	color: var(--o-form-danger);
}

/* --------------------------------------------------------------------------
 * Step rail
 * -------------------------------------------------------------------------- */

.o-form__rail {
	grid-column: 1 / -1;
}

.o-form__rail-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: o-step;
}

.o-form__rail-link {
	display: flex;
	align-items: center;
	gap: var(--o-space-3xs);
	padding: var(--o-space-3xs) var(--o-space-2xs);
	border: var(--o-line-width) solid var(--o-line-soft);
	border-radius: var(--o-radius-pill);
	color: var(--o-text);
	font-size: var(--o-fs-xs);
	line-height: 1.35;
	text-align: start;
	text-decoration: none;
	opacity: var(--o-muted-opacity);
}

.o-form__rail-link:hover,
.o-form__rail-link:focus-visible {
	opacity: 1;
}

.o-form__rail-link[aria-current="step"] {
	border-color: var(--o-gold);
	color: var(--o-gold);
	opacity: 1;
}

.o-form__rail-num {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border: var(--o-line-width) solid currentColor;
	border-radius: 50%;
	font-size: var(--o-fs-xs);
	font-variant-numeric: tabular-nums;
}

.o-form__rail-label {
	min-inline-size: 0;
}

/* --------------------------------------------------------------------------
 * Fieldset card
 * -------------------------------------------------------------------------- */

.o-form__form {
	display: grid;
	gap: var(--o-space-md);
	min-inline-size: 0;
}

.o-fieldset {
	margin: 0;
	padding: var(--o-pad-grid);
	border: var(--o-line-width) solid var(--o-line-soft);
	border-radius: var(--o-radius-lg);
	background-color: var(--o-form-card);
	box-shadow: var(--o-shadow-panel);
}

/* A <legend> is painted on the fieldset's border box, not inside it. The design
   puts the title inside the card, over a hairline rule — floating the legend is
   the one thing that pulls it into the flow in every engine. Everything after it
   must then `clear`, because a grid container beside a float shrinks to fit the
   space the float leaves, which here is nothing. */
.o-fieldset__legend {
	display: flex;
	align-items: center;
	gap: var(--o-space-3xs);
	float: inline-start;
	inline-size: 100%;
	margin: 0;
	padding: 0 0 var(--o-space-sm);
	border-block-end: var(--o-line-width) solid var(--o-line-soft);
	font-size: var(--o-fs-h4);
	font-weight: var(--o-fw-black);
	letter-spacing: var(--o-track-tight);
}

.o-fieldset__icon {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	color: var(--o-text);
}

.o-fieldset__icon-svg {
	inline-size: 100%;
	block-size: 100%;
}

.o-fieldset__help {
	clear: both;
	margin: var(--o-space-2xs) 0 0;
	font-size: var(--o-fs-xs);
	color: var(--o-text);
	opacity: var(--o-muted-opacity);
}

.o-fieldset__grid {
	clear: both;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--o-form-gap);
	padding-block-start: var(--o-space-lg);
}

/* --------------------------------------------------------------------------
 * Field — the notched outline
 * -------------------------------------------------------------------------- */

.o-field {
	min-inline-size: 0;
}

.o-field--full {
	grid-column: 1 / -1;
}

.o-field__control {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--o-space-3xs);
	min-block-size: var(--o-form-row);
	padding-inline: var(--o-space-xs);
	border: var(--o-line-width) solid var(--o-line);
	border-radius: var(--o-radius-xs);
}

/* The label sits ON the block-start border and paints over it. */
.o-field__label {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: var(--o-space-xs);
	z-index: var(--o-z-raised);
	padding-inline: var(--o-space-3xs);
	translate: 0 -50%;
	background-color: var(--o-form-card);
	color: var(--o-text);
	font-size: var(--o-fs-xs);
	line-height: 1;
	white-space: nowrap;
}

.o-field__required {
	color: var(--o-gold);
}

.o-field__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding-block: var(--o-space-3xs);
	border: 0;
	background: none;
	color: var(--o-text);
	font-family: var(--o-font);
	font-size: var(--o-fs-sm);
	font-weight: var(--o-fw-light);
	text-align: start;
	appearance: none;
}

.o-field__input::placeholder {
	color: var(--o-text);
	opacity: var(--o-muted-opacity);
}

.o-field__input:focus {
	outline: none;
}

.o-field__control:focus-within {
	border-color: var(--o-gold);
}

.o-field__control:focus-within .o-field__label {
	color: var(--o-gold);
}

.o-field__textarea {
	min-block-size: 8rem;
	padding-block: var(--o-space-2xs);
	line-height: var(--o-lh-snug);
	resize: vertical;
}

.o-field--textarea .o-field__control {
	align-items: stretch;
	padding-block: var(--o-space-3xs);
}

.o-field__select {
	cursor: pointer;
}

.o-field__icon {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	opacity: var(--o-muted-opacity);
}

/* A field whose label repeats its fieldset's title: the card heading is the
   label, so the control is bare and the label is kept for assistive tech only. */
.o-field--bare .o-field__control {
	border-color: transparent;
	background-color: var(--o-veil-card);
}

.o-field--bare .o-field__label:not(:focus):not(:active) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

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

.o-field__help {
	margin: var(--o-space-3xs) 0 0;
	font-size: var(--o-fs-xs);
	color: var(--o-text);
	opacity: var(--o-muted-opacity);
}

.o-field__error {
	margin: var(--o-space-3xs) 0 0;
	font-size: var(--o-fs-xs);
	font-weight: var(--o-fw-semibold);
	color: var(--o-form-danger);
}

.o-field.is-invalid .o-field__control,
.o-field.is-invalid .o-field__group {
	border-color: var(--o-form-danger);
}

.o-field.is-invalid .o-field__label,
.o-field.is-invalid .o-field__legend {
	color: var(--o-form-danger);
}

/* --------------------------------------------------------------------------
 * Choice groups
 * -------------------------------------------------------------------------- */

.o-field__group {
	position: relative;
	min-inline-size: 0;
	margin: 0;
	padding: var(--o-space-sm) var(--o-space-xs) var(--o-space-xs);
	border: var(--o-line-width) solid var(--o-line);
	border-radius: var(--o-radius-xs);
}

.o-field__legend {
	padding-inline: var(--o-space-3xs);
	margin-inline-start: var(--o-space-3xs);
	background-color: var(--o-form-card);
	font-size: var(--o-fs-xs);
	line-height: 1;
}

.o-field__cells {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: var(--o-space-3xs);
	padding-block-start: var(--o-space-3xs);
}

.o-field__cell {
	display: flex;
	align-items: center;
	gap: var(--o-space-3xs);
	padding: var(--o-space-2xs) var(--o-space-2xs);
	border: var(--o-line-width) solid var(--o-line-soft);
	border-radius: var(--o-radius-xs);
	background-color: var(--o-veil-card);
	font-size: var(--o-fs-sm);
	cursor: pointer;
}

.o-field__cell:hover {
	border-color: var(--o-line);
}

/* The native control is kept in the layout and in the tab order; the painted
   box beside it is decoration. Never `display: none` — that removes it from the
   accessibility tree and from the tab order with it. */
.o-field__checkbox,
.o-field__radio {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
}

.o-field__cell-box {
	display: inline-block;
	flex: 0 0 auto;
	inline-size: 1rem;
	block-size: 1rem;
	border: var(--o-line-width) solid var(--o-line);
	border-radius: 3px;
}

.o-field__cell-box--round {
	border-radius: 50%;
}

.o-field__checkbox:checked ~ .o-field__cell-box,
.o-field__radio:checked ~ .o-field__cell-box {
	border-color: var(--o-gold);
	background-color: var(--o-gold);
}

.o-field__checkbox:focus-visible ~ .o-field__cell-box,
.o-field__radio:focus-visible ~ .o-field__cell-box {
	outline: 2px solid var(--o-gold);
	outline-offset: 2px;
}

.o-field__cell-label {
	min-inline-size: 0;
}

/* --------------------------------------------------------------------------
 * Chips
 * -------------------------------------------------------------------------- */

.o-chips {
	flex-wrap: wrap;
	padding-block: var(--o-space-3xs);
}

.o-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-chips__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--o-space-3xs);
	padding: 0.25rem var(--o-space-3xs);
	border: var(--o-line-width) solid var(--o-line-soft);
	border-radius: var(--o-radius-xs);
	background-color: var(--o-veil-card);
	font-size: var(--o-fs-xs);
}

.o-chips__chip:focus-visible {
	outline: 2px solid var(--o-gold);
	outline-offset: 2px;
}

.o-chips__remove {
	display: inline-grid;
	place-items: center;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--o-text);
	font-size: var(--o-fs-xs);
	line-height: 1;
	cursor: pointer;
	opacity: var(--o-muted-opacity);
}

.o-chips__remove:hover,
.o-chips__remove:focus-visible {
	opacity: 1;
}

.o-chips__entry {
	flex: 1 1 8rem;
	min-inline-size: 6rem;
}

.o-chips__add {
	display: inline-grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	margin-inline-start: auto;
	padding: 0;
	border: var(--o-line-width) solid var(--o-line-soft);
	border-radius: var(--o-radius-xs);
	background-color: var(--o-veil-card);
	color: var(--o-text);
	font-size: var(--o-fs-md);
	line-height: 1;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
 * File
 * -------------------------------------------------------------------------- */

.o-file__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding-block: var(--o-space-3xs);
	color: var(--o-text);
	font-family: var(--o-font);
	font-size: var(--o-fs-xs);
}

.o-file__input::file-selector-button {
	padding: 0.25rem var(--o-space-2xs);
	margin-inline-end: var(--o-space-2xs);
	border: var(--o-line-width) solid var(--o-line);
	border-radius: var(--o-radius-xs);
	background-color: var(--o-veil-card);
	color: var(--o-text);
	font-family: var(--o-font);
	font-size: var(--o-fs-xs);
	cursor: pointer;
}

.o-file__icon {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	opacity: var(--o-muted-opacity);
}

.o-file__name {
	flex: 0 1 auto;
	font-size: var(--o-fs-xs);
	opacity: var(--o-muted-opacity);
	overflow-wrap: anywhere;
}

.o-file--drop {
	flex-direction: column;
	justify-content: center;
	min-block-size: 8.5rem;
	padding: var(--o-space-md);
	border-style: dashed;
	border-radius: var(--o-radius-sm);
	background-color: var(--o-veil-card);
	text-align: center;
}

.o-file--drop .o-file__input {
	flex: 0 0 auto;
	text-align: center;
}

/* --------------------------------------------------------------------------
 * Honeypot — off-screen, out of the tab order, out of the a11y tree.
 * Not `display: none`: a bot that skips invisible inputs would skip this one.
 * -------------------------------------------------------------------------- */

.o-form__trap {
	position: absolute;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

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

.o-form__actions {
	display: grid;
	justify-items: center;
	gap: var(--o-space-xs);
	padding-block-start: var(--o-space-xl);
}

.o-form__submit {
	min-inline-size: min(100%, 26rem);
	padding: var(--o-space-2xs) var(--o-space-lg);
	border: 0;
	border-radius: var(--o-radius-xs);
	background-image: var(--o-gold-gradient);
	background-color: var(--o-gold);
	color: var(--o-text-on-gold);
	font-family: var(--o-font);
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-semibold);
	line-height: 2.5;
	cursor: pointer;
}

.o-form__submit:focus-visible {
	outline: 2px solid var(--o-gold);
	outline-offset: 3px;
}

.o-form__submit[disabled] {
	cursor: progress;
	opacity: var(--o-muted-opacity);
}

.o-form__reassurance {
	margin: 0;
	font-size: var(--o-fs-xs);
	color: var(--o-text);
	text-align: center;
	opacity: var(--o-muted-opacity);
}

/* --------------------------------------------------------------------------
 * Breakpoints
 * -------------------------------------------------------------------------- */

@media (min-width: 600px) {
	.o-fieldset__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.o-field--half {
		grid-column: span 1;
	}
}

@media (min-width: 1200px) {
	.o-form {
		/*
		 * A named track, not `auto`: with `auto` the rail lost the negotiation
		 * against the form column and was squeezed to ~123px, which truncated
		 * «حقوق مورد انتظار» and «زمان شروع همکاری» mid-label.
		 */
		grid-template-columns: minmax(0, 1fr) 13rem;
		align-items: start;
	}

	.o-form__notice {
		grid-column: 1 / -1;
	}

	.o-form__rail {
		position: sticky;
		inset-block-start: var(--o-space-xl);
		grid-column: 2;
		grid-row: 2;
	}

	/*
	 * A column of pills that each shrink-wrap their own label reads as a jumble,
	 * not a rail: every step ends up a different width and the ragged inline
	 * edge is the first thing the eye lands on. Stretch them to one width, give
	 * them one minimum height, and hang them off a single hairline so the
	 * sequence is legible as a sequence.
	 */
	.o-form__rail-list {
		position: relative;
		flex-direction: column;
		align-items: stretch;
		gap: var(--o-space-2xs);
		inline-size: 13rem;
		padding-inline-end: var(--o-space-2xs);
	}

	.o-form__rail-list::before {
		content: "";
		position: absolute;
		inset-block: 0.75rem;
		inset-inline-end: 0.75rem;
		inline-size: var(--o-line-width);
		background-color: var(--o-line-soft);
	}

	.o-form__rail-item {
		position: relative;
		display: flex;
	}

	/* One fixed height for every step, so the column has a single rhythm. */
	.o-form__rail-link {
		inline-size: 100%;
		block-size: 3.5rem;
		background-color: var(--o-bg);
	}

	/* Two lines is enough for the longest label; a third would break the rhythm. */
	.o-form__rail-label {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.o-form__form {
		grid-column: 1;
		grid-row: 2;
	}
}

/* --------------------------------------------------------------------------
 * Motion — every transition in this component lives inside this guard.
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.o-form__rail-link,
	.o-field__control,
	.o-field__group,
	.o-field__cell,
	.o-field__cell-box,
	.o-form__submit {
		transition:
			border-color var(--o-dur-fast) var(--o-ease-standard),
			background-color var(--o-dur-fast) var(--o-ease-standard),
			opacity var(--o-dur-fast) var(--o-ease-standard);
	}

	.o-form {
		scroll-behavior: smooth;
	}
}