/*
 * One form field, sitewide (the field version of buttons.css).
 *
 * Fields were built page by page and drifted: 34 to 58px tall, 13 to 17px
 * text, some borderless. This gives every text box, select and textarea the
 * design system's field (system.css .ui-input): 48px, 16px text, 1px border,
 * 5px corners. Border colours, icons and side padding stay with each page.
 *
 *   Field          48px tall, 16px text (public and owner pages)
 *   Compact field  40px tall, 14px text (team tool, owner list toolbars)
 *
 * Left alone on purpose:
 *   - joined search bars (field + button in one box, no border of their
 *     own): the bar sets their height, so they are matched as bars below;
 *   - the WordPress admin bar.
 *
 * 16px text also stops iPhones zooming in when a field is tapped.
 * :not(#cul-ui) adds an id's weight so this wins over page styles without
 * relying on load order. New fields should just use .ui-input.
 */

/* ── Field ───────────────────────────────────────────────────────────── */
:is(
	input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"],
		[type="password"], [type="search"], [type="date"], [type="time"],
		[type="datetime-local"], [type="month"], :not([type])),
	select
):not(#cul-ui):not(#wpadminbar *, .cul-sales-page *, #cul-hero-q, #cul-hc-find, #bx-q1, #bx-q2, #cul-sr-q, #cul-finder-q, #cul-nl-email-nl-archive, .ui-joined *, .cul-mo__search *) {
	box-sizing: border-box !important;
	height: var(--ui-control, 48px) !important;
	min-height: var(--ui-control, 48px) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	font-size: 1rem !important;
	line-height: normal !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-radius: var(--ui-radius, 5px) !important;
}

textarea:not(#cul-ui):not(#wpadminbar *, .cul-sales-page *) {
	box-sizing: border-box !important;
	min-height: 96px !important;
	padding: 12px 14px !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-radius: var(--ui-radius, 5px) !important;
}

/* ── Compact field: team tool, and owner list toolbars ──────────────── */
:is(.cul-sales-page, .cul-field-compact) :is(
	input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"],
		[type="password"], [type="search"], [type="date"], [type="time"], :not([type])),
	select
):not(#cul-ui):not(#cul-hero-q, #cul-hc-find, #bx-q1, #bx-q2, #cul-sr-q, #cul-finder-q, #cul-nl-email-nl-archive, .ui-joined *, .cul-mo__search *),
:is(#cul-mo-sort, #culClWOffer, [data-cul-cl-search]):not(#cul-ui):not(#cul-ui) {
	box-sizing: border-box !important;
	height: 40px !important;
	min-height: 40px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	font-size: .9rem !important;
	line-height: normal !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-radius: var(--ui-radius, 5px) !important;
}
.cul-sales-page textarea:not(#cul-ui) {
	box-sizing: border-box !important;
	padding: 10px 12px !important;
	font-size: .9rem !important;
	line-height: 1.5 !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-radius: var(--ui-radius, 5px) !important;
}

/* Boxed fields: the border and icon sit on a wrapper and the input inside
   is borderless, so the wrapper gets the compact height. */
.cul-mo__search:not(#cul-ui) { box-sizing: border-box !important; min-height: 40px !important; border-radius: var(--ui-radius, 5px) !important; }
.cul-mo__search input:not(#cul-ui) { font-size: .9rem !important; }

/* Joined search bars on pages (field + button in one box): the field sets
   the bar's height, so 48px here makes the whole bar 48px. The home hero bar
   (#cul-hero-q, the page's main call) and the header bar (#cul-finder-q,
   sized to the 72px header) keep their own height. */
:is(#cul-hc-find, #bx-q1, #bx-q2, #cul-sr-q, #cul-nl-email-nl-archive):not(#cul-ui) {
	box-sizing: border-box !important;
	height: var(--ui-control, 48px) !important;
	min-height: var(--ui-control, 48px) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	font-size: 1rem !important;
	line-height: normal !important;
}