/**
 * OSHIDA — the three form pages: hero + form panel.
 *
 * @figma 1690:2479 (شخص حقیقی) · 1690:2434 (شخص حقوقی) · 1557:1103 (پروژه)
 * Owner: work packages D1 / D2 / D3.
 *
 * One file for all three routes: the pages share a single shape (hero block,
 * outlined form panel, sticky step rail in the inline-start gutter, gold submit,
 * reassurance line) and differ only in their strings and in how many fieldsets
 * the registry gives them. Per-page rules live at the bottom and are three
 * declarations in total.
 *
 * What this file does NOT do
 * --------------------------
 * The form itself is components/form.css, owned by C5. Everything here either
 * sits outside `.o-form` or is a page-level placement override scoped under
 * `.o-form-page`, listed in the report as a cross-request so the component can
 * absorb it. Nothing here re-implements a control.
 *
 * Geometry
 * --------
 * Every length is measured off tools/figma/renders/form-1440.webp and
 * tools/figma/section-metadata.xml at the 1440px design width, so the raw px
 * values below are design pixels, not opinions. They are declared once as local
 * custom properties and never repeated.
 *
 * Type sizes that tokens.css does not carry
 * ----------------------------------------
 * The hero heading is 44px/64px — larger than `--o-fs-h1` (36px max), which A1
 * measured from a *section* heading. It is declared here as a local until A1
 * adds a display size. Same for the two measure widths.
 */

.o-form-hero,
.o-form-page {
	/* @figma 1703:2832 — the 90px hero glyph. */
	--o-form-hero-icon: 90px;
	/*
	 * @figma 1703:2819 — Group 440 is 733px wide and the paragraph 669px. The
	 * heading measure carries 27px over the measured 733px because shipped
	 * Estedad sets the design's first line in 748px of ink where the render
	 * takes 728px (+2.7%); at 733px that line breaks one word early and drops
	 * «اوشیدا» to line 2, which the design does not do.
	 */
	--o-form-hero-measure: 760px;
	--o-form-hero-intro-measure: 669px;
	/* @figma 1703:2825 — the text box is 733×128: 64px of leading over two
	   lines, and line 1 measures 728px of ink, which is a 44px face. */
	--o-form-hero-size: clamp(28px, 3.06vw, 44px);
	--o-form-hero-leading: 1.455;
	/*
	 * @figma 1703:2820 — 87px over three lines whose ink measures 652/630/492px.
	 * Shipped Estedad needs 1965px of ink for the same string at 17px against the
	 * render's 1774px, which puts the design face at ~15px — `--o-fs-xs`, and the
	 * leading is then 29/15.
	 */
	--o-form-hero-intro-leading: 1.933;
	/* Header ends y=143; the hero glyph starts y=223.2. */
	--o-form-hero-lead: clamp(40px, 5.56vw, 80px);
	/* Paragraph ends y=608.2; Frame 336 starts y=720.2. */
	--o-form-panel-lead: clamp(50px, 7.78vw, 112px);
	/* @figma 1707:3365 — Frame 336: 70px block / 58.4px inline padding, r=50. */
	--o-form-panel-pad-block: 70px;
	--o-form-panel-pad-inline: 58px;
	/* Card 1 ends y=480, card 2 starts y=532. */
	--o-form-card-gap: 52px;
	/* Frame 336 ends y=4614.7; the submit starts y=4734.7. */
	--o-form-actions-lead: 120px;
	/* Clear the parked nav pill (16px + 62px) when a rail link jumps a card. */
	--o-form-scroll-margin: 100px;
}

/* --------------------------------------------------------------------------
 * Hero — @figma 1703:2819 / 1703:2834 / 1703:2727
 * -------------------------------------------------------------------------- */

.o-form-hero {
	padding-block-start: var(--o-form-hero-lead);
	padding-inline: var(--o-space-xs);
}

.o-form-hero__inner {
	inline-size: min(100%, var(--o-form-hero-measure));
	margin-inline: auto;
	text-align: center;
}

.o-form-hero__icon {
	display: block;
	inline-size: var(--o-form-hero-icon);
	block-size: var(--o-form-hero-icon);
	margin-inline: auto;
}

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

.o-form-hero__title {
	/* Icon ends y=313.2, heading starts y=363.2. */
	margin-block: var(--o-space-xl) 0;
	font-size: var(--o-form-hero-size);
	font-weight: var(--o-fw-black);
	line-height: var(--o-form-hero-leading);
	letter-spacing: var(--o-track-snug);
	/*
	 * base/typography.css balances every heading. Here that is wrong: balancing
	 * evens the two lines at 532/567px and in doing so pushes the arch mark and
	 * «اوشیدا» onto line 2. The design fills line 1 (728px of ink) and leaves
	 * «به‌عنوان شخص حقیقی» alone on line 2, which is what greedy wrapping does.
	 */
	text-wrap: wrap;
}

/* The arch mark is set inside the sentence (@figma 1703:2824), so it scales
   with the heading rather than carrying a fixed px size. */
.o-form-hero__mark {
	display: inline-block;
	inline-size: 1.031em;
	block-size: 0.945em;
	vertical-align: -0.06em;
}

.o-form-hero__intro {
	/* Heading ends y=491.2, paragraph starts y=521.2. */
	margin-block: var(--o-space-md) 0;
	margin-inline: auto;
	inline-size: min(100%, var(--o-form-hero-intro-measure));
	color: var(--o-text);
	font-size: var(--o-fs-xs);
	font-weight: var(--o-fw-extralight);
	line-height: var(--o-form-hero-intro-leading);
}

/* --------------------------------------------------------------------------
 * The form panel — @figma 1707:3365 / 1703:2846 / 1557:1127
 * -------------------------------------------------------------------------- */

.o-form-page {
	padding-block: var(--o-form-panel-lead) var(--o-space-3xl);
	padding-inline: var(--o-space-xs);
}

/* The design's fieldset card is LIGHTER than the page behind it: sampling the
   render at y=4600 gives rgb(33,33,33) inside the card against rgb(17,17,17)
   outside it, and the difference grows as the page's own vertical gradient
   darkens — i.e. a translucent light veil, not a darker well. form.css needs an
   opaque value for the notched label to paint over the field border, so this is
   the flat equivalent, written so it defers to a real token the moment A1 adds
   one. */
.o-form-page .o-form {
	--o-form-card-token: var(--o-surface-card, var(--o-cta-from));
}

/* Frame 336 is one outlined, rounded panel around the fieldset stack. The
   submit button sits 120px below the last card; in the design that is just
   outside the panel outline, here it is inside its bottom padding — the outline
   is a hairline at 8% white, so the two read the same. Deliberate: pulling the
   actions out would mean re-templating the engine's own <form>. */
.o-form-page .o-form__form {
	gap: var(--o-form-card-gap);
	padding-block: var(--o-form-panel-pad-block);
	padding-inline: var(--o-form-panel-pad-inline);
	border: var(--o-line-width) solid var(--o-line-soft);
	border-radius: var(--o-radius-xl);
}

.o-form-page .o-fieldset {
	scroll-margin-block-start: var(--o-form-scroll-margin);
}

.o-form-page .o-form__actions {
	padding-block-start: var(--o-form-actions-lead);
	gap: var(--o-space-md);
}

/* @figma 1707:3770 — the reassurance line is pure white in the render, not the
   0.4 muting the component applies by default. */
.o-form-page .o-form__reassurance {
	opacity: 1;
	font-size: var(--o-fs-sm);
}

/* --------------------------------------------------------------------------
 * Small screens — the component's own padding is a 1440px value
 * -------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.o-form-page .o-form__form {
		padding-block: var(--o-space-md);
		padding-inline: var(--o-space-2xs);
		border-radius: var(--o-radius-lg);
	}

	.o-form-page .o-fieldset {
		padding: var(--o-space-sm) var(--o-space-xs);
	}

	.o-form-page .o-form__form {
		gap: var(--o-space-sm);
	}

	.o-form-page .o-form__actions {
		padding-block-start: var(--o-space-2xl);
	}
}

/* --------------------------------------------------------------------------
 * Desktop — the rail belongs in the inline-start gutter, beside a CENTRED panel
 *
 * The design centres Frame 336 (1201px of 1440) and parks Group 378 in the
 * margin on the reading side — x=1360, i.e. physical right, which is the inline
 * start under `dir="rtl"`. components/form.css instead gives the rail its own
 * 13rem track in grid column 2, which is the physical LEFT and pushes the panel
 * off centre by half the rail's width.
 *
 * Three columns fix both at once: gutter · panel · gutter. The rail lives in the
 * inline-start gutter and the trailing gutter is left empty, so the panel stays
 * centred on the page exactly as the design draws it. The rail is wider than the
 * design's 47px pill because it is a list of ten NAMED steps — the deliberate
 * departure recorded in docs/ai/forms-contract.md §9.3, which is not reverted
 * here; the gutter is sized to hold it rather than the pill.
 * -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
	.o-form-page .o-form {
		/* @figma 1707:3365 vs 1690:2509 — (1440 − 1201) / 2 = 119.5px. */
		--o-form-rail-track: clamp(104px, 8.3vw, 132px);

		inline-size: min(100%, var(--o-canvas));
		grid-template-columns:
			minmax(0, var(--o-form-rail-track))
			minmax(0, 1fr)
			minmax(0, var(--o-form-rail-track));
		column-gap: 0;
	}

	.o-form-page .o-form__rail {
		grid-column: 1;
		inset-block-start: var(--o-form-scroll-margin);
		padding-inline-end: var(--o-space-2xs);
	}

	.o-form-page .o-form__rail-list {
		inline-size: 100%;
	}

	/*
	 * The gutter is 104–132px, which is not enough for a two-line clamp: it cut
	 * «حقوق مورد انتظار» to «حقوق مورد» and «زمان شروع همکاری» to «زمان شروع».
	 * Three lines fits the longest label, and one shared minimum height keeps
	 * the column on a single rhythm instead of going ragged again.
	 */
	.o-form-page .o-form__rail-link {
		align-items: center;
		block-size: auto;
		min-block-size: 4.5rem;
	}

	.o-form-page .o-form__rail-label {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.o-form-page .o-form__form,
	.o-form-page .o-form__notice {
		grid-column: 2;
	}
}

/* --------------------------------------------------------------------------
 * Per page — the only three places the pages actually differ
 * -------------------------------------------------------------------------- */

/* @figma 1703:2727 — the project hero is one heading line and one paragraph
   line inside a 670px group, not 733px over five lines. */
.o-form-project-hero .o-form-hero__inner {
	--o-form-hero-measure: 670px;
	--o-form-hero-intro-measure: 478px;
}