/* Part of the component CSS split: one file per component.
   Loaded by views/layout.templ in cascade order after tokens.css.
   Component: see views/components/ (same base name). */

/* Forms */
.field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.field label {
	font: 700 .68rem/1.2 var(--font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.field input,
.field textarea {
	width: 100%;
	padding: .9rem 1rem;
	border: 1px solid var(--border);
	color: var(--fg);
	background: var(--bg);
	font: inherit;
}

.field input:focus,
.field textarea:focus {
	outline: 3px solid var(--accent);
	outline-offset: -3px;
}

.form-feedback { margin-top: 1rem; font-family: var(--font-mono); font-weight: 700; }
.form-feedback.ok { color: var(--accent); }
.form-feedback.err { color: var(--danger); }

/* Form actions: submit + clear side by side, stacked on small screens. */
.form-actions {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;