/*
 * Submission forms.
 *
 * These render inside somebody else's theme -- ThemeToolbox on the live sites,
 * onmetro locally -- so this stylesheet has two jobs: look deliberate on a theme
 * that knows nothing about it, and get out of the way of one that does.
 *
 * How that is done:
 *   - Every colour reads a theme token first and falls back to a neutral:
 *     var(--om-accent, #553555). A site that sets its accent gets its accent.
 *   - Type is inherited, never set. The theme owns the typeface and scale.
 *   - Selectors stay at one class deep so a theme can override without !important.
 *   - Spacing comes from a local scale, so it is consistent whatever surrounds it.
 */

.toolbox-form,
.toolbox-picker {
	--tb-accent: var(--om-accent, #553555);
	--tb-ink: var(--om-fg, #1f1a20);
	--tb-muted: color-mix(in srgb, var(--tb-ink) 62%, transparent);
	--tb-line: color-mix(in srgb, var(--tb-ink) 16%, transparent);
	--tb-surface: color-mix(in srgb, var(--tb-accent) 4%, transparent);
	--tb-radius: 10px;
	--tb-gap: 1.15rem;

	/* The field edge follows the same rule as every colour here: take the
	   theme's if it has one, fall back to a neutral if it does not. onmetro
	   defines --om-field-border so its contact form matches its claim form and
	   directory filters; a theme that says nothing keeps the quiet 1px. */
	--tb-field-border: var(--om-field-border, 1px solid var(--tb-line));
	--tb-field-radius: var(--om-field-radius, var(--tb-radius));

	max-width: 42rem;
	color: var(--tb-ink);
}

/* color-mix is widely supported, but a browser without it would compute the
   custom properties as invalid and inherit something unpredictable. These
   fallbacks are declared first so they win only where color-mix does not. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.toolbox-form,
	.toolbox-picker {
		--tb-muted: #5f5a61;
		--tb-line: #d9d5db;
		--tb-surface: #faf8fb;
	}
}

/* ---------------------------------------------------------------- the form */

.toolbox-form {
	display: flex;
	flex-direction: column;
	gap: var(--tb-gap);
}

.toolbox-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.toolbox-form__field label {
	font-weight: 600;
	font-size: 0.95em;
	line-height: 1.3;
}

/* The required marker is decorative -- the input carries the real `required`
   attribute, which is what assistive technology reads. */
.toolbox-form__field label span[aria-hidden] {
	color: var(--tb-accent);
	margin-inline-start: 0.15em;
}

.toolbox-form__field input,
.toolbox-form__field select,
.toolbox-form__field textarea,
.toolbox-picker__search input {
	font: inherit;
	color: inherit;
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: var(--tb-field-border);
	border-radius: var(--tb-field-radius);
	background: #fff;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

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

.toolbox-form__field input:focus-visible,
.toolbox-form__field select:focus-visible,
.toolbox-form__field textarea:focus-visible,
.toolbox-picker__search input:focus-visible {
	outline: none;
	border-color: var(--tb-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tb-accent) 25%, transparent);
}

.toolbox-form__actions {
	margin: 0;
}

.toolbox-form__small {
	margin: 0;
	font-size: 0.85em;
	color: var(--tb-muted);
	line-height: 1.5;
}

/* -------------------------------------------------------------------- intro */

/* A few lines the flow itself wants read before the fields -- e.g. "want to
   advertise instead?" pointing at a different flow entirely. Plain content,
   escaped on the way out; styled here only as a quiet list above the fields. */
.toolbox-form__intro {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.9em;
	color: var(--tb-muted);
}

.toolbox-form__intro a {
	color: var(--tb-accent);
}

/* ------------------------------------------------------------------ notices */

.toolbox-form__notice {
	margin: 0;
	padding: 0.8rem 1rem;
	border-radius: var(--tb-radius);
	border-inline-start: 3px solid;
	font-size: 0.95em;
	line-height: 1.5;
}

/* Colour is not the only signal: the border side and the wording carry it too,
   so this still reads for someone who cannot distinguish the two hues. */
.toolbox-form__notice.is-ok {
	border-color: #2e7d52;
	background: color-mix(in srgb, #2e7d52 8%, transparent);
}

.toolbox-form__notice.is-err {
	border-color: #a33a3a;
	background: color-mix(in srgb, #a33a3a 8%, transparent);
}

/* ----------------------------------------------------------------- buttons */

/* Scoped to our own containers so this never restyles the theme's buttons.
   A theme that defines .om-btn wins on the shared elements because its own
   rules come later; this is the floor, not the ceiling. */
.toolbox-form .toolbox-btn,
.toolbox-picker .toolbox-btn {
	font: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0.65rem 1.15rem;
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-radius);
	background: #fff;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.toolbox-form .toolbox-btn--primary,
.toolbox-picker .toolbox-btn--primary {
	background: var(--tb-accent);
	border-color: var(--tb-accent);
	color: #fff;
}

.toolbox-form .toolbox-btn:hover,
.toolbox-picker .toolbox-btn:hover {
	border-color: var(--tb-accent);
}

.toolbox-form .toolbox-btn:focus-visible,
.toolbox-picker .toolbox-btn:focus-visible {
	outline: 2px solid var(--tb-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ picker */

.toolbox-picker {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.toolbox-picker__search {
	display: flex;
	flex-wrap: wrap;
	/* stretch, not flex-end: the field and the button sit on one line, and a
	   theme that thickens --tb-field-border makes the field taller than the
	   button. Aligning the ends left a few pixels of misalignment that grew
	   with the border width; stretching makes the button follow whatever the
	   field turns out to be. */
	align-items: stretch;
	gap: 0.6rem;
}

/* The label is a full-width flex item above the row, so it must not stretch. */
.toolbox-picker__search label {
	align-self: flex-start;
}

.toolbox-picker__search label {
	flex: 1 0 100%;
	font-weight: 600;
	font-size: 0.95em;
}

.toolbox-picker__search input {
	flex: 1 1 16rem;
	width: auto;
}

/* The chosen subject is a statement, not a field: it sits on a tinted plate so
   the reader can see at a glance what their message will be filed against. */
.toolbox-picker--chosen {
	display: block;
	margin: 0;
	padding: 0.7rem 0.9rem;
	border-radius: var(--tb-radius);
	background: var(--tb-surface);
	border: 1px solid var(--tb-line);
	font-size: 0.95em;
	line-height: 1.5;
}

.toolbox-picker__label {
	color: var(--tb-muted);
}

.toolbox-picker__change {
	margin-inline-start: 0.5em;
	font-size: 0.9em;
}

.toolbox-picker__results {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-radius);
	overflow: hidden;
}

.toolbox-picker__results li + li {
	border-top: 1px solid var(--tb-line);
}

.toolbox-picker__results li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.65rem 0.85rem;
}

.toolbox-picker__results li:hover {
	background: var(--tb-surface);
}

.toolbox-picker__results a {
	font-weight: 600;
	text-decoration: none;
}

.toolbox-picker__results a:hover,
.toolbox-picker__results a:focus-visible {
	text-decoration: underline;
}

.toolbox-picker__type {
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tb-muted);
	white-space: nowrap;
}

.toolbox-picker__none {
	margin: 0;
	color: var(--tb-muted);
}

/* ------------------------------------------------------------- small screens */

@media (max-width: 30rem) {
	.toolbox-picker__search input,
	.toolbox-form .toolbox-btn,
	.toolbox-picker .toolbox-btn {
		flex: 1 1 100%;
		width: 100%;
	}

	.toolbox-picker__results li {
		flex-direction: column;
		gap: 0.15rem;
	}
}

/* --------------------------------------------------------------- dark theme */

/* Only where the theme has actually asked for dark. A theme with no opinion
   keeps the light treatment above rather than being guessed at. */
@media (prefers-color-scheme: dark) {
	:root[data-theme="dark"] .toolbox-form,
	:root[data-theme="dark"] .toolbox-picker {
		--tb-ink: #ece8ee;
	}

	:root[data-theme="dark"] .toolbox-form__field input,
	:root[data-theme="dark"] .toolbox-form__field textarea,
	:root[data-theme="dark"] .toolbox-picker__search input {
		background: color-mix(in srgb, #ece8ee 8%, transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.toolbox-form *,
	.toolbox-picker * {
		transition: none;
	}
}

/* Contact page routes under the search. The theme's .om-chip supplies the look
   where the onmetro theme is active; these rules are the same look elsewhere. */
.toolbox-picker__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.toolbox-picker__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border: 1px solid var(--om-line-strong, #c3c4c7);
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	color: var(--om-ink-2, #1d2327);
	background: var(--om-surface, #fff);
}

.toolbox-picker__chip:hover,
.toolbox-picker__chip:focus-visible {
	border-color: var(--om-accent, #2271b1);
	color: var(--om-accent-dark, #135e96);
	background: var(--om-accent-tint, #f0f6fc);
}

/* The route chosen from the contact page, with a way back. */
.toolbox-form__route {
	margin: 0 0 1rem;
	font-weight: 600;
}

.toolbox-form__route-change {
	margin-left: 0.5rem;
	font-weight: 400;
	font-size: 0.875rem;
}