.blueprint-form-layout {
	--cs-blueprint-sidebar-width: 220px;

	display: grid;
	grid-template-columns: var(--cs-blueprint-sidebar-width) 1fr;
	gap: 0;
	border: 1px solid var(--cs-color-border);
	border-radius: 0 0 var(--cs-card-radius) var(--cs-card-radius);
	overflow: hidden;

	@media (width <= 960px) {
		grid-template-columns: 1fr;
	}
}

.blueprint-form-sidebar {
	display: flex;
	flex-direction: column;
	background: var(--cs-color-surface-subtle);
	padding: 0;

	ul {
		flex: 0 0 auto;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	li {
		margin: 0;
	}

	&__item {
		display: block;
		inline-size: 100%;
		padding: 12px 16px;
		border: none;
		border-block-end: 1px solid var(--cs-color-border-subtle);
		border-inline-end: 1px solid var(--cs-color-border);
		border-radius: 0;
		background: var(--cs-color-surface-subtle);
		color: var(--cs-color-text);
		cursor: pointer;
		font-weight: 400;
		text-align: start;
		transition:
			background 150ms ease,
			color 150ms ease;

		&:hover,
		&:focus-visible {
			background: var(--cs-color-accent-subtle);

			// The lighter accent reaches only 3.8:1 on this background; the
			// hover shade clears AA for normal text.
			color: var(--cs-color-accent-hover);
		}

		// The fill alone separates the focused item from its neighbours by
		// 1.26:1, so keyboard focus needs a border of its own. Drawn inside the
		// item, which sits flush against the ones above and below it.
		&:focus-visible {
			outline: 2px solid var(--cs-color-accent-hover);
			outline-offset: -2px;
		}

		&.is-active {
			background: var(--cs-color-surface);
			color: var(--cs-color-accent);
			border-inline-end: none;
		}
	}

	&__generate-wrap {
		flex: 1 1 auto;
		min-block-size: 0;
		border-inline-end: 1px solid var(--cs-color-border-subtle);
		padding: 16px;
		display: flex;
		flex-direction: column;
	}

	&__generate {
		background-color: var(--cs-color-accent);
		border: none;
		border-radius: 5px;
		box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
		color: #fff;
		cursor: pointer;
		display: block;
		font-size: 14px;
		font-weight: 600;
		line-height: 14px;
		margin: 0;
		padding: 12px;
		text-align: center;
		transition: box-shadow 0.15s ease;
		margin-block-start: auto;
		inline-size: 100%;

		&:hover,
		&:focus-visible {
			box-shadow: 0 2px 6px rgb(0 0 0 / 16%);
			outline: none;
		}
	}
}

.blueprint-form-content {
	background: var(--cs-color-surface);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 32px;

	h2 {
		margin: 0;
		font-size: 20px;
		font-weight: 500;
		color: var(--cs-color-text);
	}

	input[type='date'],
	input[type='datetime-local'],
	input[type='datetime'],
	input[type='email'],
	input[type='month'],
	input[type='number'],
	input[type='password'],
	input[type='search'],
	input[type='tel'],
	input[type='text'],
	input[type='time'],
	input[type='url'],
	input[type='week'] {
		padding: 0 8px;
		line-height: 3;
		min-block-size: 30px;
	}

	select {
		padding: 0 8px;
		min-block-size: 30px;
		line-height: 3;
		max-inline-size: 100%;
	}
}

.blueprint-form-section-description {
	color: var(--cs-color-text-muted);
	font-size: 0.95rem;
	line-height: 1.4;
	margin: 0 0 24px;
}

.blueprint-form-content .blueprint-form-field label {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cs-color-text);
}