/* ============================================================
   Simo components — form fields, badges, consent banner.
   (Button styles live in site.css alongside the chrome.)
   Built on the design-system tokens.
   ============================================================ */

/* ---------- Field (input / textarea / select) ---------- */
.field {
	margin-bottom: 4px;
}
.field__label {
	display: block;
	font-size: 0.92rem;
	font-weight: 500;
	margin-bottom: 9px;
	color: var(--ink);
}
.field__req {
	color: var(--muted);
	font-weight: 400;
}
.field__control {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--sans);
	font-size: 0.94rem;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--control-border);
	border-radius: var(--radius-md);
	padding: 13px 14px;
	line-height: 1.4;
	transition: border-color var(--dur-base) var(--ease-out);
}
.field__control::placeholder {
	color: var(--faint);
}
.field__control:hover {
	border-color: var(--control-border-hover);
}
.field__control:focus {
	border-color: var(--ink-2);
}
.field__control--error {
	border-color: var(--neg);
}
textarea.field__control {
	resize: vertical;
	min-height: 80px;
}
/* Custom chevron on selects (replace the native arrow); colour is the muted ink. */
select.field__control {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23565C68' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
	cursor: pointer;
}
[data-theme="dark"] select.field__control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A6ACB8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.field__error {
	margin-top: 7px;
	font-size: 0.8rem;
	color: var(--neg);
	display: flex;
	align-items: center;
	gap: 6px;
}
/* Client-validation errors render hidden and are revealed by JS (toggling [hidden]). */
.field__error[hidden] {
	display: none;
}
.field__error-icon {
	flex: none;
	width: 15px;
	height: 15px;
	border-radius: 999px;
	background: var(--neg);
	color: var(--bg);
	font-size: 11px;
	font-weight: 700;
	display: grid;
	place-items: center;
}
.field__hint {
	margin-top: 7px;
	font-size: 0.8rem;
	color: var(--muted);
}

/* ---------- Badge ---------- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
}
.badge--mono {
	font-family: var(--mono);
	letter-spacing: 0.03em;
}
.badge--neutral {
	background: var(--surface-2);
	color: var(--ink-2);
	border-color: var(--line);
}
.badge--accent {
	background: var(--surface-2);
	color: var(--ink);
}
.badge--up {
	background: var(--surface-2);
	color: var(--pos);
}
.badge--down {
	background: var(--surface-2);
	color: var(--neg);
}
.badge--live {
	background: var(--pos);
	color: var(--bg);
}
.badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	flex: none;
}

/* ---------- Consent banner ---------- */
.consent {
	position: fixed;
	left: var(--space-4);
	right: var(--space-4);
	bottom: var(--space-4);
	margin-inline: auto;
	max-width: 560px;
	z-index: 60;
	display: none;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}
.consent[data-open="true"] {
	display: flex;
}
.consent--static {
	position: static;
	max-width: 560px;
}
.consent p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-2);
}
.consent__row {
	display: flex;
	gap: 10px;
}
/* Match the source's compact consent buttons (9px 16px / 14px). */
.consent .btn {
	padding: 9px 16px;
	font-size: 14px;
}