/* ports/_shared/forms.css — shared form-control system.
   Token-themed `<select>` / `<input type="checkbox|radio|range|text|email|search|tel|number">` /
   `<textarea>` so every form surface across the mockup reads as one design system.
   Native semantics preserved (no ARIA rebuilds — appearance:none + custom paint).

   API surface (opt-in classes — never auto-applied to bare elements):
     .input               — text inputs and textareas
     .input--search       — adds magnifying-glass icon prefix (label or wrapping div)
     .select              — <select> trigger
     .check               — <input type="checkbox"> (multi-select fields, "include in export" lists)
     .radio               — <input type="radio">
     .range               — <input type="range">; reads --range-fill set by forms.js
     .form-row            — flex layout row: label + control
     .form-row__label     — left-aligned secondary label, optional Phosphor prefix
     .form-row__control   — right-aligned control wrapper

   The existing `.toggle` switch (d9.css, used for boolean settings) is the
   canonical binary toggle. `.check` is for multi-state forms only — do not
   replace `.toggle` with `.check`.

   Hard rules: tokens only, no transition:all, GPU-safe animation. */

/* ─── Text inputs + textarea (.input) ────────────────────────────────────── */
.input {
	display: block;
	width: 100%;
	height: 30px;
	padding: 0 var(--sp-3);
	background: var(--surface);
	color: var(--text-primary);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	font-family: var(--font-sans);
	font-size: var(--fs-13);
	font-weight: var(--fw-regular);
	line-height: 28px;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

textarea.input {
	height: auto;
	min-height: 64px;
	padding: var(--sp-2) var(--sp-3);
	line-height: 1.5;
	resize: vertical;
}

.input::placeholder {
	color: var(--text-tertiary);
}

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

.input:focus,
.input:focus-visible {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-soft);
}

.input:disabled,
.input[aria-disabled="true"] {
	background: var(--surface-2);
	color: var(--text-tertiary);
	cursor: not-allowed;
}

/* Search variant — wrapper carries the class, input sits inside. */
.input--search {
	position: relative;
	display: block;
}
.input--search > .ph,
.input--search > i.ph {
	position: absolute;
	top: 50%;
	left: var(--sp-2);
	transform: translateY(-50%);
	color: var(--text-tertiary);
	font-size: 14px;
	pointer-events: none;
	transition: color var(--dur-fast) var(--ease-out);
}
.input--search > .input {
	padding-left: 28px;
}
.input--search:focus-within > .ph,
.input--search:focus-within > i.ph {
	color: var(--text-secondary);
}

/* ─── Select (.select) ────────────────────────────────────────────────────
   Native <select> with custom chevron via inline-SVG background. Native
   dropdown opens on click — we don't custom-portal, that's a real-product job. */
.select {
	display: inline-flex;
	width: 100%;
	height: 30px;
	padding: 0 28px 0 var(--sp-3);
	background: var(--surface);
	color: var(--text-primary);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	font-family: var(--font-sans);
	font-size: var(--fs-13);
	font-weight: var(--fw-regular);
	line-height: 28px;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%23828998' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px 12px;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

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

.select:focus,
.select:focus-visible {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-soft);
}

.select:disabled,
.select[aria-disabled="true"] {
	background-color: var(--surface-2);
	color: var(--text-tertiary);
	cursor: not-allowed;
}

/* Native dropdown options inherit OS chrome; we only style the trigger.
   Token surface for option menus is a real-product enhancement. */
.select option {
	background: var(--surface);
	color: var(--text-primary);
}

/* ─── Checkbox (.check) ──────────────────────────────────────────────────── */
.check {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	margin: 0;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition:
		background var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

.check:hover {
	border-color: var(--accent);
}

.check:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.check:checked {
	background: var(--accent);
	border-color: var(--accent);
}

.check:checked::after {
	content: "";
	width: 10px;
	height: 10px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 5.5L4 7.5L8 3' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 10px;
	animation: forms-check-pop var(--dur-fast) var(--ease-spring);
	transform-origin: center;
}

.check:disabled,
.check[aria-disabled="true"] {
	background: var(--surface-2);
	border-color: var(--border);
	cursor: not-allowed;
	opacity: 0.6;
}

@keyframes forms-check-pop {
	0%   { transform: scale(0); }
	100% { transform: scale(1); }
}

/* ─── Radio (.radio) ─────────────────────────────────────────────────────── */
.radio {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	margin: 0;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition:
		background var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

.radio:hover { border-color: var(--accent); }

.radio:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.radio:checked {
	border-color: var(--accent);
}

.radio:checked::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	animation: forms-check-pop var(--dur-fast) var(--ease-spring);
	transform-origin: center;
}

.radio:disabled,
.radio[aria-disabled="true"] {
	background: var(--surface-2);
	border-color: var(--border);
	cursor: not-allowed;
	opacity: 0.6;
}

/* ─── Range slider (.range) ──────────────────────────────────────────────── */
.range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 16px;
	background: transparent;
	cursor: pointer;
	margin: 0;
	padding: 0;
	/* Local CSS prop; forms.js updates per input event. Declared here so
	   token audits see it as locally-defined, not invented. */
	--range-fill: 0%;
}

/* WebKit track + thumb */
.range::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--accent) 0%,
		var(--accent) var(--range-fill, 0%),
		var(--surface-2) var(--range-fill, 0%),
		var(--surface-2) 100%
	);
}
.range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-1);
	cursor: pointer;
	margin-top: -6px;
	transition:
		transform var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}
.range:hover::-webkit-slider-thumb { transform: scale(1.06); border-color: var(--accent); }
.range:focus-visible::-webkit-slider-thumb {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.range:active::-webkit-slider-thumb { transform: scale(1.02); }

/* Firefox track + thumb */
.range::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: var(--surface-2);
}
.range::-moz-range-progress {
	height: 4px;
	border-radius: 999px;
	background: var(--accent);
}
.range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-1);
	cursor: pointer;
	transition:
		transform var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}
.range:hover::-moz-range-thumb { transform: scale(1.06); border-color: var(--accent); }
.range:focus-visible::-moz-range-thumb {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.range:disabled,
.range[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Optional inline value chip — wrap range + chip with .range-row. */
.range-row {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
}
.range-row > .range { flex: 1 1 auto; }
.range-row > .range-row__value {
	flex: 0 0 auto;
	min-width: 32px;
	text-align: right;
}

/* ─── Form-row primitive ─────────────────────────────────────────────────── */
.form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-2) 0;
}

.form-row + .form-row {
	border-top: 1px solid var(--border-subtle);
}

.form-row__label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--text-secondary);
	font-size: var(--fs-13);
	font-weight: var(--fw-medium);
	flex: 0 1 auto;
}
.form-row__label > .ph,
.form-row__label > i.ph {
	font-size: 14px;
	color: var(--text-tertiary);
}

.form-row__control {
	flex: 0 1 50%;
	max-width: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--sp-2);
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.check:checked::after,
	.radio:checked::after {
		animation: none;
	}
	.range::-webkit-slider-thumb,
	.range::-moz-range-thumb {
		transition: border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
	}
	.range:hover::-webkit-slider-thumb,
	.range:hover::-moz-range-thumb,
	.range:active::-webkit-slider-thumb {
		transform: none;
	}
}
[data-reduce-motion="true"] .check:checked::after,
[data-reduce-motion="true"] .radio:checked::after {
	animation: none;
}