@layer components {
	:is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="url"], input[type="date"], select, textarea).field,
	.form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="url"], select, textarea) {
		display: block;
		width: 100%;
		min-height: 2.75rem;
		padding: 0.55rem 0.75rem;
		border: 1px solid var(--color-field);
		border-radius: 2px;
		background-color: var(--color-white);
		color: var(--color-ink);
		font-family: var(--font-sans);
		/* 1rem or more, so phones do not zoom in on the field. */
		font-size: var(--text-small);
		line-height: 1.4;
	}

	:is(select.field, .form select) {
		appearance: none;
		padding-right: 2.25rem;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000000' d='M239 401c9.4 9.4 24.6 9.4 33.9 0L465 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-175 175L81 175c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L239 401z'/%3E%3C/svg%3E");
		background-position: right 0.75rem center;
		background-repeat: no-repeat;
		background-size: 0.75rem;
	}

	textarea.field,
	.form textarea {
		min-height: 8rem;
		resize: vertical;
	}

	:is(.field, .form input, .form select, .form textarea):focus {
		border-color: var(--color-ink);
		outline: 2px solid var(--color-ink);
		outline-offset: 0;
	}

	.field-inline {
		display: inline-block;
		width: auto;
	}

	.form-label {
		display: block;
		margin-bottom: 0.35rem;
		font-family: var(--font-sans);
		font-size: var(--text-small);
		font-weight: 600;
	}

	.form-help {
		margin-top: 0.35rem;
		color: var(--color-muted);
		font-family: var(--font-sans);
		font-size: var(--text-label);
		line-height: 1.45;
	}

	.check {
		display: flex;
		align-items: flex-start;
		gap: 0.6rem;
		font-family: var(--font-sans);
		font-size: var(--text-small);
		line-height: 1.4;
		cursor: pointer;
	}

	.check input {
		flex: none;
		width: 1.15rem;
		height: 1.15rem;
		margin-top: 0.05rem;
		accent-color: var(--color-ink);
	}

	/* Search box: a field with a button joined on the right. */
	.search-form {
		display: flex;
		width: 100%;
	}

	.search-form input {
		flex: 1;
		min-width: 0;
		min-height: 2.5rem;
		padding: 0.45rem 0.75rem;
		border: 1px solid var(--color-field);
		border-right: 0;
		border-radius: 2px 0 0 2px;
		background: var(--color-white);
		font-family: var(--font-sans);
		font-size: var(--text-small);
	}

	.search-form input:focus {
		border-color: var(--color-ink);
		outline: 2px solid var(--color-ink);
		outline-offset: 0;
	}

	.search-form button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		border: 1px solid var(--color-ink);
		border-radius: 0 2px 2px 0;
		background: var(--color-ink);
		color: var(--color-paper);
		cursor: pointer;
	}

	.search-form .icon {
		width: 1rem;
		height: 1rem;
	}

	/* Forminator, with its own styles turned off ("None" design) so these apply. */
	.forminator-ui.forminator-custom-form {
		font-family: var(--font-sans);
	}

	/* Two columns on wider screens: the name across the top, then email and phone side by side. */
	.forminator-ui.forminator-custom-form {
		display: grid;
		gap: 1rem 1.25rem;
	}

	.forminator-ui.forminator-custom-form > * {
		grid-column: 1 / -1;
	}

	/* Forminator's own row spacing; the grid gap spaces the rows instead. */
	.forminator-ui.forminator-custom-form .forminator-row {
		margin-bottom: 0;
	}

	@media (min-width: 40rem) {
		.forminator-ui.forminator-custom-form {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.forminator-ui .forminator-row:has(.forminator-field-email, .forminator-field-phone) {
			grid-column: auto;
		}
	}

	/* Forminator's honeypot and empty message box take no space in the grid. */
	.forminator-ui :is(.forminator-hidden, .forminator-response-message:empty, input[type="hidden"]) {
		display: none;
	}

	.forminator-ui .forminator-label {
		display: block;
		margin-bottom: 0.35rem;
		font-size: var(--text-small);
		font-weight: 600;
	}

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

	.forminator-ui :is(.forminator-input, .forminator-textarea, select) {
		display: block;
		width: 100%;
		min-height: 2.75rem;
		padding: 0.55rem 0.75rem;
		border: 1px solid var(--color-field);
		border-radius: 2px;
		background: var(--color-white);
		color: var(--color-ink);
		font-size: var(--text-small);
	}

	.forminator-ui .forminator-textarea {
		min-height: 7rem;
	}

	.forminator-ui :is(.forminator-input, .forminator-textarea):focus {
		border-color: var(--color-ink);
		outline: 2px solid var(--color-ink);
		outline-offset: 0;
	}

	.forminator-ui .forminator-description {
		display: block;
		margin-top: 0.35rem;
		color: var(--color-muted);
		font-size: var(--text-label);
		line-height: 1.45;
	}

	.forminator-ui :is(.forminator-error-message, .forminator-response-message.forminator-error) {
		margin-top: 0.35rem;
		color: var(--color-error);
		font-size: var(--text-label);
	}

	.forminator-ui .forminator-response-message:not(:empty) {
		margin-bottom: 1rem;
		padding: 0.75rem 1rem;
		border-left: 3px solid var(--color-ink);
		background: var(--color-panel);
		font-size: var(--text-small);
	}

	.forminator-ui .forminator-checkbox {
		display: flex;
		align-items: flex-start;
		gap: 0.6rem;
		font-size: var(--text-small);
	}

	.forminator-ui .forminator-checkbox input {
		width: 1.15rem;
		height: 1.15rem;
		accent-color: var(--color-ink);
	}

	.forminator-ui .forminator-button-submit {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0.6rem 1.5rem;
		border: 1px solid var(--color-ink);
		border-radius: 2px;
		background: var(--color-ink);
		color: var(--color-paper);
		font-family: var(--font-sans);
		font-size: var(--text-small);
		font-weight: 600;
		cursor: pointer;
	}

	.forminator-ui .forminator-button-submit:hover {
		background: var(--color-paper);
		color: var(--color-ink);
	}
}