/*
 * Forms, notices and the threaded answer list.
 */

/* ── Notices ────────────────────────────────────────────────────────────────── */

.slf-notice {
	padding: var(--slf-space-3) var(--slf-space-4);
	margin: 0 0 var(--slf-space-4);
	border-radius: var(--slf-radius);
	border-left: 3px solid var(--slf-border-strong);
	background: var(--slf-surface-2);
	font-size: var(--slf-text-sm);
}

.slf-notice--success {
	border-left-color: var(--slf-solved);
	background: var(--slf-accent-soft);
	color: var(--slf-text);
}

.slf-notice--warning {
	border-left-color: #b8860b;
}

.slf-notice--error {
	border-left-color: var(--slf-urgent);
	background: var(--slf-urgent-soft);
	color: var(--slf-urgent);
}

/* ── Fields ─────────────────────────────────────────────────────────────────── */

.slf-form {
	margin: 0;
}

.slf-field {
	margin: 0 0 var(--slf-space-5);
	padding: 0;
	border: 0;
}

.slf-field__label {
	display: block;
	margin-bottom: var(--slf-space-2);
	font-weight: 600;
	font-size: var(--slf-text-sm);
}

.slf-required {
	color: var(--slf-urgent);
}

.slf-field__hint {
	margin: var(--slf-space-2) 0 0;
	font-size: var(--slf-text-sm);
	color: var(--slf-text-muted);
}

.slf-field__error {
	margin: var(--slf-space-2) 0 0;
	font-size: var(--slf-text-sm);
	font-weight: 600;
	color: var(--slf-urgent);
}

.slf-input {
	display: block;
	width: 100%;
	padding: var(--slf-space-3);
	background: var(--slf-surface-2);
	border: 1px solid var(--slf-border-strong);
	border-radius: var(--slf-radius);
	color: var(--slf-text);
	/*
	 * 16px minimum on the controls. Mobile Safari zooms the whole page in when it focuses
	 * an input smaller than this, and the reader is then left scrolled sideways on a layout
	 * that was fine — which reads as the site being broken rather than as a browser
	 * behaviour. This is also why the field font size is not on the --slf-text-sm scale.
	 */
	font-size: 1rem;
	line-height: 1.5;
}

.slf-input:focus {
	border-color: var(--slf-accent);
}

.slf-input[aria-invalid="true"] {
	border-color: var(--slf-urgent);
}

.slf-textarea {
	resize: vertical;
	min-height: 8rem;
}

.slf-file {
	padding: var(--slf-space-2);
	background: transparent;
	border-style: dashed;
}

/* ── Choice groups ──────────────────────────────────────────────────────────── */

.slf-choices {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--slf-space-2);
}

.slf-choice {
	display: flex;
	align-items: center;
	gap: var(--slf-space-3);
	/* Full-width hit target: on a phone the label is what people actually tap, not the box. */
	padding: var(--slf-space-3);
	min-height: 44px;
	border: 1px solid var(--slf-border);
	border-radius: var(--slf-radius);
	background: var(--slf-surface-2);
	cursor: pointer;
	font-size: var(--slf-text-sm);
}

.slf-choice:hover {
	border-color: var(--slf-border-strong);
}

.slf-choice:has( input:checked ) {
	border-color: var(--slf-accent);
	background: var(--slf-accent-soft);
}

/* Old Safari and Firefox ESR have no :has(); JS mirrors the state onto a class for them. */
.slf-choice.is-checked {
	border-color: var(--slf-accent);
	background: var(--slf-accent-soft);
}

.slf-choice input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: var(--slf-accent);
}

.slf-choice__icon {
	flex: 0 0 auto;
	color: color-mix(in srgb, var(--slf-cat, var(--slf-accent-text)) var(--slf-cat-strength), var(--slf-cat-blend));
}

.slf-choice--wide {
	align-items: flex-start;
}

.slf-choice--wide .slf-field__hint {
	display: block;
	margin-top: var(--slf-space-1);
}

.slf-details {
	border: 1px solid var(--slf-border);
	border-radius: var(--slf-radius);
	background: var(--slf-surface-2);
}

.slf-details > summary {
	padding: var(--slf-space-3);
	min-height: 44px;
	cursor: pointer;
	font-size: var(--slf-text-sm);
	font-weight: 600;
}

.slf-details .slf-choices {
	padding: 0 var(--slf-space-3) var(--slf-space-3);
}

/* ── Actions ────────────────────────────────────────────────────────────────── */

.slf-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--slf-space-3);
}

.slf-form__actions .slf-field__hint {
	margin: 0;
	flex: 1 1 14rem;
}

.slf-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--slf-text-muted);
}

.slf-btn--ghost:hover {
	background: var(--slf-surface-2);
	color: var(--slf-text);
}

.slf-form__row {
	display: grid;
	gap: var(--slf-space-4);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48em) {
	.slf-choices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.slf-choices--compact {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.slf-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.slf-form-card .slf-choices {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.slf-choices--compact {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}