/* Tool-screen forms (ADR-019): query inputs, the secondary query band, the
   segmented Toggle, SeedInput, result output and the Translator source box.
   Enqueued only on tool screens. Depends on terminal.css for the shared :root
   tokens and on readout.css for .lk-term-help (the field-label glossary jump). */

.lk-form {
	label {
		display: block;
		color: var(--muted);
		font-size: 0.78rem;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 4px;
	}

	input[type="text"],
	input[type="number"],
	select,
	textarea {
		width: 100%;
		background: var(--bg-control);
		border: 1px solid var(--border);
		color: var(--text);
		font-family: var(--font-mono);
		font-size: 0.95rem;
		padding: 8px 10px;
		/* Render UA-drawn affordances (number spinners, the select arrow, the
		   focus ring) in the terminal's dark scheme instead of bright OS chrome,
		   and tint any accentable control amber. */
		color-scheme: dark;
		accent-color: var(--amber);
	}

	/* The placeholder is a dim amber prompt, not the browser's light gray, so it
	   reads as part of the phosphor field rather than floating on top of it. */
	input::placeholder,
	textarea::placeholder {
		color: var(--muted);
		opacity: 1;
	}

	/* The number spinner: drop the OS-blue backing and tint the stepper arrows
	   amber. color-scheme:dark renders them near-white, so a sepia/hue filter
	   pushes that toward the phosphor amber; they brighten fully on hover. */
	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
		opacity: 1;
		filter: sepia(1) saturate(6) hue-rotate(-7deg) brightness(0.95);
	}

	input[type="number"]:hover::-webkit-inner-spin-button,
	input[type="number"]:focus::-webkit-inner-spin-button {
		filter: sepia(1) saturate(6) hue-rotate(-7deg) brightness(1.2);
	}

	input:focus,
	select:focus,
	textarea:focus {
		outline: none;
		border-color: var(--amber);
		box-shadow: 0 0 6px var(--amber-alpha-35);
	}
}

.lk-field {
	margin-bottom: 14px;
}

/* Label row: the field label and its optional `[?]` glossary jump on one line,
   so the help sits beside the label instead of pushing the control down. */
.lk-field-label {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

/* The form `[?]` reuses .lk-term-help but, with no hovered `.lk-line` around it,
   carries its own resting tint so the affordance is visible while filling out the
   form (it still brightens on hover/focus via the shared rules). */
.lk-field-label .lk-term-help {
	margin-left: 0;
	color: var(--amber-dim);
}

.lk-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 18px;
}

/* An optional secondary band of query fields (the Distance tool's flight-plan
   inputs): a faint hairline above and a quiet uppercase legend, so it reads as a
   distinct, skippable section under the primary row. */
.lk-fieldset {
	border: none;
	border-top: 1px solid var(--border);
	margin: 6px 0 0;
	padding: 14px 0 0;
}

.lk-legend {
	color: var(--muted);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 0;
	margin-bottom: 10px;
}

.lk-btn {
	background: var(--transparent);
	border: 1px solid var(--amber);
	color: var(--amber);
	font-family: var(--font-mono);
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 9px 22px;
	cursor: pointer;
	transition: all .12s;

	&:hover {
		background: var(--amber);
		color: var(--text-inverse);
		box-shadow: 0 0 12px var(--amber-alpha-50);
	}
}

/* Live instrument: once assets/live.js takes over (it adds `is-live`), the form
   recomputes on every change, so the Generate button is redundant — hide it. With
   JS off the form keeps its visible button and the plain GET submit still works. */
.lk-form.is-live .lk-btn {
	display: none;
}

/* Segmented toggle (View\Toggle): a radio group rendered as a horizontal row of
   buttons — the generators' Distinction (Plain/Archaic) and the Translator's
   Register (Formal/Casual/Slang). The native radios are visually hidden but kept
   focusable and submittable (so the choice serialises with JS off and fires
   `change` for the live forms); each <label> is the button, and the checked one
   lights like a .lk-btn hover. */
.lk-toggle {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border: 1px solid var(--border);
}

.lk-form .lk-toggle-btn {
	flex: 1 1 auto;
	margin: 0; /* override the .lk-form label spacing */
}

/* Hide the radio but leave it in the layout for focus + form submission. */
.lk-toggle-btn input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.lk-toggle-btn span {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* Lock every button — checked or not — to the 37px of the other single-line
	   controls (select/text inputs), so the toggle row aligns with them and the
	   active option never grows or shrinks. The label is centred rather than
	   padded, so the height is the box, not the text. */
	min-height: 37px;
	color: var(--amber-dim);
	font-size: 0.82rem;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	padding: 0 12px;
	margin: 0;
	cursor: pointer;
	transition: all .12s;
}

.lk-toggle-btn input:checked + span {
	border-bottom: 1px solid var(--amber);
	color: var(--amber);
	font-weight: bold;
}

.lk-toggle-btn:hover input + span {
	background: var(--amber-alpha-40);
	color: var(--text-bright)
}

/* Keyboard focus ring on the active control (mouse clicks stay quiet). */
.lk-toggle-btn input:focus-visible + span {
	outline: 1px solid var(--amber);
	outline-offset: 2px;
}

/* The result block the live form swaps in place: a faint dim while a recompute is
   in flight, so the readout reads as "settling" rather than flashing out. */
#hmb-tool-result {
	transition: opacity .12s;
}

#hmb-tool-result.is-settling {
	opacity: 0.55;
}

/* Modulators band: the treatment knobs sit subordinate to the primary identity
   grid. The .lk-fieldset hairline + quiet legend already set it apart; shrink its
   controls a touch more so the hierarchy reads at a glance. */
.lk-fieldset .lk-field input,
.lk-fieldset .lk-field select {
	font-size: 0.86rem;
}

.lk-fieldset .lk-toggle-btn span {
	font-size: 0.78rem;
	padding: 0 10px;
}

/* Seed field (View\SeedInput): a text input with an inline Randomize button that
   clears it and resubmits the form (assets/tools.js wires the click). The input
   flexes to fill the row; the button is a compact, quieter variant of .lk-btn. */
.lk-seed {
	display: flex;
	gap: 8px;
}

.lk-seed .lk-seed-input {
	flex: 1 1 auto;
	min-width: 0;
}

.lk-seed-rand {
	flex: 0 0 auto;
	background: var(--transparent);
	border: 1px solid var(--border);
	color: var(--amber-dim);
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 0 12px;
	cursor: pointer;
	transition: all .12s;
}

.lk-seed-rand:hover {
	border-color: var(--amber);
	background: var(--amber);
	color: var(--text-inverse);
}

/* Result output — terminal readout with dotted leaders. */
.lk-output {
	background: var(--bg-output);
	border-left: 2px solid var(--amber);
	padding: 12px 16px;
	overflow-x: auto;
	font-size: 0.9rem;
}

/* Translator: the source box is the screen's main control, so it stands taller than
   a one-line field and grows vertically; the worn passage reads as glowing terminal
   output. An empty box shows a quiet, italic "awaiting input" cue instead of a blank
   frame, so the instrument always looks live. */
.lk-translate-input {
	min-height: 8.5rem;
	line-height: 1.55;
	resize: vertical;
}

.lk-translation {
	margin: 0;
	color: var(--amber);
	line-height: 1.65;
	letter-spacing: 0.3px;
	white-space: pre-wrap;
}

.lk-translation--empty {
	color: var(--muted);
	font-style: italic;
	letter-spacing: 1px;
}