/**
 * TS Forms — base styles.
 *
 * Everything visual is a custom property, so restyling a form means overriding a
 * variable, not fighting this file with !important. Per-form CSS is scoped to
 * .ts-form--{id} and printed in the footer.
 */

.ts-form {
	/* Colour */
	--tsf-accent: #0073aa;
	--tsf-error: #d63638;
	--tsf-success: #1a7f37;

	/* Shape and rhythm */
	--tsf-radius: 4px;
	--tsf-gap: 16px;
	--tsf-font-size: 16px;

	/* Fields */
	--tsf-field-bg: #fff;
	--tsf-field-border: #ccc;
	--tsf-field-border-width: 1px;
	--tsf-field-color: inherit;
	--tsf-field-padding: 10px 12px;

	/* Labels */
	--tsf-label-color: inherit;
	--tsf-label-weight: 600;
	--tsf-label-size: 0.9em;

	/* Button */
	--tsf-button-bg: var(--tsf-accent);
	--tsf-button-color: #fff;
	--tsf-button-padding: 12px 24px;

	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--tsf-gap);
	font-size: var(--tsf-font-size);
}

/* Everything is full width by default — including any raw HTML you write in the markup. */
.ts-form > * {
	grid-column: span 6;
	min-width: 0;
}

.ts-form .tsf-half {
	grid-column: span 3;
}

.ts-form .tsf-third {
	grid-column: span 2;
}

@media (max-width: 600px) {
	.ts-form .tsf-half,
	.ts-form .tsf-third {
		grid-column: span 6;
	}
}

.tsf-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.tsf-label {
	color: var(--tsf-label-color);
	font-weight: var(--tsf-label-weight);
	font-size: var(--tsf-label-size);
}

.tsf-required {
	color: var(--tsf-error);
}

/*
 * Scoped under .ts-form on purpose: themes commonly style bare
 * input[type="…"] (specificity 0,1,1), which would otherwise beat a plain
 * .tsf-input (0,1,0) and leave --tsf-radius/--tsf-field-* ignored on those
 * inputs. .ts-form .tsf-input (0,2,0) wins, so the variables always apply.
 */
.ts-form .tsf-input {
	width: 100%;
	box-sizing: border-box;
	padding: var(--tsf-field-padding);
	background: var(--tsf-field-bg);
	color: var(--tsf-field-color);
	border: var(--tsf-field-border-width) solid var(--tsf-field-border);
	border-radius: var(--tsf-radius);
	font: inherit;
	line-height: 1.4;
}

.ts-form .tsf-input:focus {
	outline: 2px solid var(--tsf-accent);
	outline-offset: 1px;
	border-color: var(--tsf-accent);
}

.tsf-textarea {
	resize: vertical;
}

.tsf-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.tsf-choice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
}

.tsf-submit {
	justify-self: start;
	padding: var(--tsf-button-padding);
	background: var(--tsf-button-bg);
	color: var(--tsf-button-color);
	border: 0;
	border-radius: var(--tsf-radius);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.tsf-submit:hover {
	filter: brightness(0.92);
}

.tsf-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ts-form .tsf-field--submit {
	flex-direction: row;
	align-items: center;
}

/* Validation */

.tsf-field-error:empty {
	display: none;
}

.tsf-field-error {
	color: var(--tsf-error);
	font-size: 0.85em;
}

.tsf-field--invalid .tsf-input {
	border-color: var(--tsf-error);
}

.tsf-response:empty {
	display: none;
}

.tsf-response {
	padding: 12px 16px;
	border-radius: var(--tsf-radius);
	border-left: 4px solid transparent;
}

.tsf-response--error {
	border-left-color: var(--tsf-error);
	background: color-mix(in srgb, var(--tsf-error) 8%, transparent);
	color: var(--tsf-error);
}

.tsf-response--success {
	border-left-color: var(--tsf-success);
	background: color-mix(in srgb, var(--tsf-success) 8%, transparent);
	color: var(--tsf-success);
}

/* Standalone success message, shown once the form is replaced. */
.tsf-sent {
	padding: 16px 20px;
	border-left: 4px solid #1a7f37;
	background: color-mix(in srgb, #1a7f37 8%, transparent);
}

/* Sending spinner */

.tsf-spinner {
	display: none;
	width: 16px;
	height: 16px;
	margin-left: 10px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: tsf-spin 0.7s linear infinite;
}

.ts-form--sending .tsf-spinner {
	display: inline-block;
}

@keyframes tsf-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsf-spinner {
		animation: none;
	}
}