/* Color Palette Generator styles. */

.aah-palette__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin-bottom: 12px;
}

.aah-palette__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 700;
	font-size: 0.95em;
}

.aah-palette__field input[type="color"] {
	width: 64px;
	height: 44px;
	padding: 2px;
	border: 1px solid var(--aah-border, #d9d9d9);
	border-radius: 6px;
	background: var(--aah-bg, #ffffff);
	cursor: pointer;
}

.aah-palette__field input[type="text"] {
	width: 120px;
}

.aah-palette__error {
	color: var(--aah-crimson-dark, #b81f2e);
	font-weight: 600;
}

.aah-palette__error:empty {
	display: none;
}

.aah-palette__swatches {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}

.aah-palette__swatch {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 12px;
	border: 1px solid var(--aah-border, #d9d9d9);
	border-radius: var(--aah-radius, 8px);
	min-height: 140px;
}

.aah-palette__swatch strong {
	font-size: 1.1em;
	font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.aah-palette__swatch span {
	font-size: 0.85em;
	font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
	word-break: break-all;
}

.aah-palette__swatch button {
	margin-top: auto;
	align-self: flex-start;
	padding: 0.35rem 0.7rem;
}

.aah-palette__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.aah-palette__status {
	font-weight: 600;
}

.aah-palette__status:empty {
	display: none;
}