/**
 * Komorebi Whole counter request (km-request): Figma "V11 Request · Whole counter" (18:8771)
 * and "Whole counter · Error / Filled / Sent", at 1440, 834 and 390.
 *
 * Sage. Desktop: the km-split layout of main.css, the photo (as tall as the form) on the left
 * 720, the form on the right with padding 80 / 120 / 80 / 72. Tablet and phone: the photo on
 * top, 440 / 320 high (PLAN.md Q15f), then the form with padding 64 / 32 / 56 and 48 / 20 /
 * 32. Heading, text, fields, button and line 24 apart; fields 2 × 2 (24 across, 20 down),
 * one column on phone. Sent: a paper card, radius 12, padding 20 / 24.
 */

.km-request {
	--km-request-card: var(--km-c-paper);
}

.km .km-request__body .km-heading {
	margin-bottom: 24px;
}

.km .km-request__body .km-heading__text {
	margin-top: 24px;
}

.km-request__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.km-request__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}

.km-request__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.km-request__actions--sent {
	gap: 24px;
	margin-top: 24px;
}

/* Sent card: "Whole counter" (Shippori 24, 20 on phone), then two muted lines, 6 apart. */
.km-request__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 24px;
	border-radius: var(--km-radius-card);
	background: var(--km-request-card);
}

.km-request__card-line {
	color: var(--km-muted);
}

@media (max-width: 1024px) {
	.km-request .km-split__media {
		height: var(--km-request-photo-h, 440px);
	}

	.km-request .km-request__body {
		padding-top: 64px;
	}
}

@media (max-width: 767px) {
	.km-request .km-split__media {
		height: var(--km-request-photo-h, 320px);
	}

	.km-request .km-request__body {
		padding-top: 48px;
	}

	.km-request__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Buttons run the full 350 width and stack 12 apart; the menu link sits centred under them. */
	.km-request__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.km-request__actions--sent {
		gap: 12px;
	}

	.km-request__actions .km-request__link {
		align-self: center;
	}
}