/*
	Declaration form layout
	Owns the form-specific layout used by the declaration-maker tool.
	Loaded after main.css; relies on its base typography and tokens.
*/

:root {
	--color-instruction-bar: var(--color-dark-orange);
	--color-instruction-description: #6e6e6e;
	--section-header-height: 2.75rem;
	--instruction-header-height: 2.25rem;
	/* Width budget the form questions + inputs share, so left/right edges
	   line up no matter which question they belong to. */
	--form-content-max-width: 40rem;
	/* Fixed left-column width inside .options-grid so inline followups
	   (text input / textarea on the right) start at the same x position
	   in every options group. Long option labels are allowed to wrap. */
	--options-label-column: 13rem;
}

.page-h1 {
	font-size: 2rem;
	margin: 0 0 2rem 0;
}

.spec-version-note {
	font-size: 0.875rem;
	color: var(--color-instruction-description);
	margin: 2rem 0 0 0;
}

#keepright-form {
	display: block;
}

/*
	Sections (top-level groups in the form)

	`.form-section` and `.instruction` use display: contents so all sticky
	headers share the form as their containing block and stack permanently
	at the top as the user scrolls past each section.
*/
.form-section,
.form-section-instructions,
.instruction {
	display: contents;
}

.section-header {
	position: sticky;
	background-color: var(--color-background);
	margin: 2rem 0 0 0;
	padding: 0.5rem 0;
	min-height: var(--section-header-height);
	box-sizing: border-box;
	z-index: 30;
}

.form-section:first-of-type > .section-header {
	margin-top: 0;
}

/* Fallback sticky slots; declaration-form.js recalculates these dynamically. */
.form-section:nth-of-type(1) > .section-header {
	top: 0;
}
.form-section:nth-of-type(2) > .section-header {
	top: var(--section-header-height);
}
.form-section:nth-of-type(3) > .section-header {
	top: calc(var(--section-header-height) * 2);
}
.form-section:nth-of-type(4) > .section-header {
	top: calc(var(--section-header-height) * 3);
}

.section-title {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	font-size: 1.125rem;
	font-weight: normal;
	line-height: 1.4;
}

.section-square {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background-color: var(--color-dark-orange);
	flex: 0 0 auto;
}

.section-title-text {
	display: inline-flex;
	flex-direction: column;
}

/* Reserve the bold width so toggling .is-current never shifts layout */
.section-title-text::after {
	content: attr(data-text);
	font-weight: bold;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	pointer-events: none;
}

.form-section.is-current .section-title-text {
	font-weight: bold;
}

/* Beats `.page-content p` in main.css (higher specificity), which was zeroing margin-left */
.page-content .section-description {
	margin: 0.25rem 0 1.5rem 0;
	margin-left: calc(1rem + 1rem); /* .section-square + .section-title gap */
	color: inherit;
}

/*
	Instructions (Keep Right / Copy Right / Machine Right under "Specifics")
*/
.instruction-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	position: sticky;
	background-color: var(--color-background);
	padding: 0.25rem 0;
	min-height: var(--instruction-header-height);
	box-sizing: border-box;
	z-index: 20;
	margin: 1rem 0 0 0;
	width: 100%;
}

.form-section-instructions .instruction:first-of-type > .instruction-header {
	margin-top: 0.25rem;
}

/* Fallback instruction slots; declaration-form.js recalculates these dynamically. */
.form-section-instructions .instruction:nth-of-type(1) > .instruction-header {
	top: calc(var(--section-header-height) * 3);
}
.form-section-instructions .instruction:nth-of-type(2) > .instruction-header {
	top: calc(
		var(--section-header-height) *
		3 +
		var(--instruction-header-height)
	);
}
.form-section-instructions .instruction:nth-of-type(3) > .instruction-header {
	top: calc(
		var(--section-header-height) *
		3 +
		var(--instruction-header-height) *
		2
	);
}

.instruction-square {
	display: inline-block;
	width: 0.5rem;
	height: 1rem;
	background-color: var(--color-instruction-bar);
	flex: 0 0 auto;
}

.instruction-name {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-weight: normal;
	font-size: 1rem;
	display: inline-flex;
	flex-direction: column;
}

.instruction-name::after {
	content: attr(data-text);
	font-weight: bold;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	pointer-events: none;
}

.instruction.is-current .instruction-name {
	font-weight: bold;
}

.instruction-empty-hint {
	margin: 0.75rem 0 1.5rem 1.5rem !important;
	max-width: var(--form-content-max-width);
	color: var(--color-instruction-description);
	font-size: 0.9375rem !important;
	font-style: italic;
}

.instruction-description {
	color: var(--color-instruction-description);
	font-style: italic;
}

/*
	Sticky header stack

	The browser's native sticky behaviour keeps each original header within its
	own section. declaration-form.js mirrors any passed headers into this fixed
	stack so earlier section/instruction headers remain visible too.
*/
.sticky-header-stack {
	position: fixed;
	top: 0;
	z-index: 100;
	pointer-events: none;
	background-color: var(--color-background);
}

.sticky-header-stack[hidden] {
	display: none;
}

.sticky-header-stack .section-header,
.sticky-header-stack .instruction-header {
	position: static;
	top: auto;
	margin: 0;
	visibility: visible;
}

.section-header.is-stacked,
.instruction-header.is-stacked {
	visibility: hidden;
}

.sticky-header-stack .section-header.is-current .section-title-text,
.sticky-header-stack .instruction-header.is-current .instruction-name {
	font-weight: bold;
}

/*
	Notes
*/
.form-note {
	margin: 0.25rem 0 1.5rem 1.75rem;
	color: var(--color-instruction-description);
	font-style: italic;
}

/*
	Questions
*/
.field {
	margin: 1.5rem 0 2rem 1.75rem;
	max-width: var(--form-content-max-width);
}

.field.followup {
	margin: 0.75rem 0 1.5rem 1.5rem;
}

.question-label {
	display: block;
	margin-bottom: 1rem;
	font-size: 1rem;
}

.field input[type="text"],
.field input[type="email"],
.field textarea,
.field select {
	font: inherit;
	padding: 0.5rem 0.625rem;
	border: 1px solid #aaa;
	border-radius: 2px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.field textarea {
	min-height: 7rem;
	resize: vertical;
}

/*
	Two-column option / inline-followup grid

	Column 1 is fixed so the right-hand inputs/textareas line up no matter
	which question they belong to. Column 2 stretches to the form content
	right edge.
*/
.options-grid {
	display: grid;
	grid-template-columns: var(--options-label-column) minmax(0, 1fr);
	column-gap: 1rem;
	row-gap: 0.75rem;
	align-items: start;
	margin: 0;
	max-width: 100%;
}

.option-label {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	grid-column: 1;
	cursor: pointer;
	line-height: 1.4;
}

.option-label input[type="radio"],
.option-label input[type="checkbox"] {
	flex: 0 0 auto;
}

.followup-inline,
.followup-slot {
	grid-column: 2;
	min-height: 1.75rem;
}

.followup-inline {
	display: block;
}

/* Visually hide labels for inline followups; they're contextual to the option */
.followup-inline .followup-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.followup-inline input[type="text"],
.followup-inline input[type="email"] {
	width: 100%;
	padding: 0.5rem 0.625rem;
	font: inherit;
	border: 1px solid #aaa;
	border-radius: 2px;
	box-sizing: border-box;
}

.followup-inline textarea {
	width: 100%;
	min-height: 7rem;
	padding: 0.5rem 0.625rem;
	font: inherit;
	border: 1px solid #aaa;
	border-radius: 2px;
	box-sizing: border-box;
	resize: vertical;
}

/* Reserve layout space while hidden so the options grid does not jump */
.followup-inline[hidden] {
	display: block;
	visibility: hidden;
	pointer-events: none;
}

/*
	Form group (fieldset) — used for "Crux" / "Details" inside The Material.
	Visually flatten so it looks like the rest of the form.
*/
.form-group {
	border: 0;
	padding: 0;
	margin: 0 0 1.5rem 0;
}

.form-group > legend {
	padding: 0;
	font-weight: bold;
}

/*
	Form actions (Preview button)
*/
.form-actions {
	margin: 3rem 0 1rem 0;
	display: flex;
	justify-content: center;
}

.primary-button {
	font: inherit;
	font-weight: bold;
	background-color: black;
	color: white;
	border: 0;
	border-radius: 999px;
	padding: 0.875rem 2.25rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.primary-button:hover,
.primary-button:focus {
	background-color: #222;
}

/*
	Preview screen
*/
.preview-actions {
	margin: 1.5rem 0;
	display: flex;
	justify-content: flex-start;
}

.preview-actions-top {
	margin: 0 0 2rem 0;
}

.preview-body {
	max-width: var(--form-content-max-width);
	margin: 0 0 2rem 0;
	padding: 1.5rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #f4f4f4;
}

.preview-body[hidden] {
	display: none;
}

.preview-body .declaration-text {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.875rem;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-x: auto;
}

.preview-body > :first-child {
	margin-top: 0;
}

.preview-body > :last-child {
	margin-bottom: 0;
}

.preview-body section {
	margin: 1.5rem 0;
}

.preview-body section h2 {
	font-size: 1rem;
	font-weight: bold;
	margin: 0 0 0.5rem 0;
}

.preview-body section p {
	margin: 0;
	white-space: pre-wrap;
}

.preview-body dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 1rem;
	row-gap: 0.25rem;
	margin: 0 0 1.5rem 0;
	font-size: 0.875rem;
	color: var(--color-instruction-description);
}

.preview-body dt {
	font-weight: bold;
}

.preview-body dd {
	margin: 0;
}

.preview-make-form {
	margin: 0;
}

/*
	BACK and OK, MAKE! share the same box (padding, font, radius, height).
	They sit inside .page-content, so we scope the BACK link selector under
	.preview-actions to outweigh main.css's `.page-content a { color: inherit }`
	rule, which would otherwise hide the white text on the black pill.
*/
.preview-actions .secondary-button,
.preview-actions .confirm-button {
	display: inline-block;
	font-family: inherit;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.4;
	padding: 0.625rem 1.5rem;
	border: 0;
	border-radius: 0.5rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	color: white;
}

.preview-actions .secondary-button {
	background-color: black;
}

.preview-actions .secondary-button:hover,
.preview-actions .secondary-button:focus {
	background-color: #222;
	color: white;
}

.preview-actions .confirm-button {
	background-color: #21d6a8;
}

.preview-actions .confirm-button:hover,
.preview-actions .confirm-button:focus {
	background-color: #1bbf95;
}

/*
	Result screen: plain Text / HTML links + unstyled copy button
*/
.result-preview-toolbar {
	margin: 1.25rem 0 1rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 3rem;
	row-gap: 0.75rem;
}

.preview-mode-links {
	display: inline;
	font-size: inherit;
}

.preview-mode-links a {
	text-decoration: underline;
}

.preview-mode-links a[aria-current="page"] {
	font-weight: bold;
	text-decoration: none;
}

.preview-mode-sep {
	margin: 0 0.25rem;
	user-select: none;
}

/*
	Mobile breakpoint - collapse the options grid, stack the result toolbar,
	and remove the field indentation that wastes horizontal space on phones.

	Sticky section/instruction headers are switched off on mobile because the
	form is short enough to scroll naturally on a phone, and the multi-level
	sticky stack we use on desktop relies on display: contents siblings
	sharing a containing block which Chrome on narrow viewports renders
	inconsistently (the outer section headers reserve vertical space but
	don't repaint once the next section's header reaches the top). The form
	already flows top-to-bottom on a small screen so the section/instruction
	headings still read clearly as the user scrolls.
*/
@media (max-width: 719px) {
	.form-section,
	.form-section-instructions,
	.instruction {
		display: block;
	}

	.section-header,
	.instruction-header {
		position: static;
		top: auto;
		z-index: auto;
	}

	.sticky-header-stack {
		display: none;
	}

	.field {
		margin-left: 0;
	}

	.field.followup {
		margin-left: 0.75rem;
	}

	.form-note {
		margin-left: 0;
	}

	.page-content .section-description {
		margin-left: 0;
	}

	.options-grid {
		grid-template-columns: 1fr;
		row-gap: 0.5rem;
	}

	.option-label,
	.followup-inline,
	.followup-slot {
		grid-column: 1;
	}

	.followup-inline {
		margin-left: 1.5rem;
	}

	.preview-body {
		padding: 1rem;
	}

	.preview-body dl {
		grid-template-columns: 1fr;
		row-gap: 0.5rem;
	}

	.preview-body dt {
		margin-top: 0.5rem;
	}

	.preview-body dt:first-of-type {
		margin-top: 0;
	}

	.result-preview-toolbar {
		flex-direction: column;
		align-items: stretch;
		column-gap: 0;
	}

	.result-preview-toolbar [data-copy-declaration] {
		width: 100%;
	}

	.preview-actions {
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.preview-actions .secondary-button,
	.preview-actions .confirm-button {
		flex: 1 1 auto;
		text-align: center;
	}
}