/*
 * Fairways Club Manager 3.34.0 — one size for every field (Ben, Sun Nov 8: "Check field clipping").
 *
 * On his iPad Pro (Safari, portrait) the New booking sheet's Date ran wider than its column and over
 * Length, text fields were taller than the selects, and the date taller again. That is WebKit's own
 * date and time control (a minimum width, centred and padded text) and its own select (it keeps its
 * height unless its appearance is none). These rules make every date, time, select and text field in
 * the Club app and on the member pages an ordinary field: it fits its column, and the fields in a row
 * share one height and one padding.
 *
 * One rule set, loaded on every Club app page (a dependency of fcm-club-base.css), on the member pages
 * (after fcm-public.css) and on the Coach Center (after fcm-instructor-center.css; coaches use iPads).
 * Club Admin inside the app gets the date and time part (body.fcm-spa).
 * The page stylesheets keep their own borders and colours; the size comes from here (section 3's
 * selector outweighs each page's own field rule wherever the sheets print). Keep the field list in
 * step with a new field class.
 *
 * Tokens (DESIGN.md: the 44 px touch target, the inputs' 12 px inset):
 *   --fcm-field-h   every single-line field's height
 *   --fcm-field-py  its padding top and bottom (one line of 15–16 px text in the height, less the border)
 *   --fcm-field-px  its padding left and right
 *   --fcm-field-lh  its line height
 *   --fcm-field-chev-w, --fcm-field-chev  a select's room on the right for its chevron, and the chevron
 *   --fcm-field-icon-w, --fcm-field-date-icon, --fcm-field-time-icon  a date's or time's room on the right,
 *     and the calendar and the clock it shows there
 *     (iOS draws none once the field has no native look), ink on paper, paper on the dark pages; drawn
 *     everywhere but Firefox (@supports not (-moz-appearance: none)), which draws its own
 * On a touch screen (pointer: coarse) every field's text is 16 px: iPhone zooms the page into a field
 * whose text is smaller.
 *
 * v3.35.0 (Ben, Mon Nov 9: "Fix form"): also on Club Manager's own WP Admin screens (FCM_Admin::enqueue()
 * loads it there and nowhere else in WP Admin). There only section 5 applies, to Club Manager's forms
 * (.wp-admin .fcm-wrap .fcm-form-group): every field fits its column at the one height, dates and times read
 * from the left with a calendar or clock (in paper: WP Admin's fields are dark), the "$" sits inside the
 * price field, toggles sit on the fields' line, 16 px text on a touch screen. WordPress's own menus, bars,
 * notices and Club Manager's list filters and settings tables are untouched.
 */

:root {
	--fcm-field-h: 44px;
	--fcm-field-py: 10px;
	--fcm-field-px: 12px;
	--fcm-field-lh: 1.35;
	--fcm-field-chev-w: 36px;
	--fcm-field-icon-w: 32px; /* a date's or time's room on the right for its calendar or clock */
	/* A select's chevron, in the ink colour (#1a1a1a, --sc-ink). */
	--fcm-field-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	/* A calendar and a clock, 16 px, in the ink colour. */
	--fcm-field-date-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%231a1a1a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='1.5'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3E%3C/svg%3E");
	--fcm-field-time-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%231a1a1a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 4.5V8l2.5 1.5'/%3E%3C/svg%3E");
}
/* The dark pages (My Club, Book a Bay, the member-style sheets): the icons in paper. v3.34.0 (review N5):
 * not Club Admin inside the app (body.fcm-spa), whose fields are paper: its icons stay ink. v3.35.0: Club
 * Manager's WP Admin screens (dark fields; not the paper settings tabs inside the Club app). */
.fcm-member-portal, .fcm-mp, .fcm-mc-modal-overlay, .fcm-booking-widget, .wp-admin .fcm-wrap {
	--fcm-field-date-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f4f1ea' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='1.5'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3E%3C/svg%3E");
	--fcm-field-time-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f4f1ea' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 4.5V8l2.5 1.5'/%3E%3C/svg%3E");
}

/* ── 1. Date and time fields, everywhere FCM draws one ───────────────────────────────────────────
 * No native look (WebKit's has a minimum width and centred, padded text), never wider than its
 * column, the text from the left. Block and full width at no weight, so a page that sizes its own
 * time field (Settings' 140 px times) keeps that size. */
:where([class*="fcm-"], [class*="fca-"], .fcm-spa) :is(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]):where(:not(.wp-admin *)) {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	box-sizing: border-box;
	text-align: left;
}
:where([class*="fcm-"], [class*="fca-"], .fcm-spa) :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]):where(:not(.wp-admin *)) {
	display: block;
	width: 100%;
	max-width: 100%;
}
/* WebKit's parts of the field (each its own rule: a browser that doesn't know one drops only it). */
:where([class*="fcm-"], [class*="fca-"], .fcm-spa) input:where(:not(.wp-admin *))::-webkit-date-and-time-value {
	text-align: left;
	margin: 0;
	min-height: calc(var(--fcm-field-lh) * 1em);
}
:where([class*="fcm-"], [class*="fca-"], .fcm-spa) input:where(:not(.wp-admin *))::-webkit-datetime-edit {
	padding: 0;
}
:where([class*="fcm-"], [class*="fca-"], .fcm-spa) input:where(:not(.wp-admin *))::-webkit-datetime-edit-fields-wrapper {
	padding: 0;
}

/* v3.34.0 (review N9, R2): not in Firefox, which draws its own calendar and clock (a drawn one would make
 * two). Firefox is told apart by -moz-appearance, which only it knows; Safari, iOS, Chrome and Edge draw
 * ours. (Not @supports selector(::-webkit-calendar-picker-indicator): WebKit may answer no for that
 * part, which would leave iOS with no icon at all.) The see-through picker button is its own rule: a
 * browser that doesn't know that part drops only it. */
@supports not (-moz-appearance: none) {
	/* v3.34.0 (review): with no native look iOS shows no calendar or clock, so a date looks like a plain text
	 * box. One is drawn here on the right, in the room the field's right padding makes. Chromium's own picker
	 * button is see-through and laid over that icon, so a click there still opens the picker: one icon in both
	 * browsers, not two. The selector carries Settings → Hours' time field so it outweighs each page's own
	 * field rule (several set the whole background) wherever the stylesheets print. */
	:is(.fca-body, .fcm-member-portal, .fcm-mc-modal-overlay, .fcm-booking-widget, .fcm-mp, .fcm-ic2, .fcm-spa) :is(.fcm-club-set .cs-wp .fcm-hours-time-input input, input):is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"]) {
		position: relative;
		padding-right: var(--fcm-field-icon-w);
		background-image: var(--fcm-field-date-icon);
		background-repeat: no-repeat;
		background-position: right 10px center;
		background-size: 16px 16px;
	}
	:is(.fca-body, .fcm-member-portal, .fcm-mc-modal-overlay, .fcm-booking-widget, .fcm-mp, .fcm-ic2, .fcm-spa) :is(.fcm-club-set .cs-wp .fcm-hours-time-input input, input)[type="time"] {
		background-image: var(--fcm-field-time-icon);
	}
	:is(.fca-body, .fcm-member-portal, .fcm-mc-modal-overlay, .fcm-booking-widget, .fcm-mp, .fcm-ic2, .fcm-spa) :is(.fcm-club-set .cs-wp .fcm-hours-time-input input, input):is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"])::-webkit-calendar-picker-indicator {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: var(--fcm-field-icon-w);
		height: auto;
		margin: 0;
		padding: 0;
		opacity: 0;
		background: none;
		cursor: pointer;
	}
	/* My Club's dark theme sets its fields' whole background with !important (fcm-public.css): the icon too. */
	.fcm-mp.fcm-mp-dark :is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"]) {
		padding-right: var(--fcm-field-icon-w) !important;
		background-image: var(--fcm-field-date-icon) !important;
		background-repeat: no-repeat !important;
		background-position: right 10px center !important;
		background-size: 16px 16px !important;
	}
	.fcm-mp.fcm-mp-dark input[type="time"] {
		background-image: var(--fcm-field-time-icon) !important;
	}
}

/* ── 2. A control's column can shrink to the column ──────────────────────────────────────────────
 * (Sections 1 and 2 stay out of WP Admin — :where(:not(.wp-admin *)), at no weight — where every screen's
 * body carries an "fcm-" class: its list filters and settings tables size their own fields. Section 5 has
 * Club Manager's WP Admin forms.)
 * A grid or flex child holding a field may be narrower than the field's own minimum (min-width: 0),
 * so the field fits the column instead of running into the next one. At no weight: a page that
 * gives a column a minimum keeps it. */
:where(.fca-body, [class*="fcm-"]) :where(:has(> input:not([type="checkbox"], [type="radio"], [type="hidden"]), > select, > textarea)):where(:not(.wp-admin *)) {
	min-width: 0;
}
:where(.fca-body, [class*="fcm-"]) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="color"]), select, textarea):where(:not(.wp-admin *)) {
	min-width: 0;
	max-width: 100%;
}

/* ── 3. One height and one padding: the Club app's fields ────────────────────────────────────────
 * Every field class the Club app draws (the console's sc-input, Settings' cs-input and the WP
 * settings tabs inside it, Displays' fcm-cd-input, the person sheets' fpa-input, the Overview
 * editor's fob-in, Club controls' ctl-select, the waiver desk, Memberships and prices' text, the
 * member-style sheets' fcm-mc-input) and the member pages' fields. Not textareas (several lines).
 * The list carries the WP tabs' "input[type=text]" so the rule outweighs each page's own field rule
 * wherever the stylesheets print. */
:is(.fca-body, .fcm-member-portal, .fcm-mc-modal-overlay, .fcm-booking-widget, .fcm-mp, .fcm-ic2) :is(
	.sc-input, .cs-input, .fcm-cd-input, .fpa-input, .fob-in, .ctl-select, .fcm-wv-in, .mpa-text, .fcm-mc-input, .fcm-mp-input, .fcm-form-input,
	.ic-input, .ic-coach-pick select,
	.bk-own-f input, .bk-own-f select,
	.cs-wp input[type="text"], .cs-wp input[type="email"], .cs-wp input[type="url"], .cs-wp input[type="tel"], .cs-wp input[type="number"],
	.cs-wp input[type="password"], .cs-wp input[type="search"], .cs-wp input[type="time"], .cs-wp input[type="date"], .cs-wp input[type="datetime-local"], .cs-wp select
):not(textarea, select[multiple], select[size]) {
	box-sizing: border-box;
	height: var(--fcm-field-h);
	min-height: var(--fcm-field-h);
	padding: var(--fcm-field-py) var(--fcm-field-px);
	line-height: var(--fcm-field-lh);
	margin-top: 0;
	margin-bottom: 0;
}
/* A select in the Club app and the Coach Center: no native look (WebKit keeps its own height otherwise),
 * the chevron drawn here in the ink colour, on the paper fields. (The member pages' selects, and the dark
 * member-style sheets' fcm-mc-input, already draw their own.) */
:is(.fca-body, .fcm-ic2) :is(
	.sc-input, .cs-input, .fcm-cd-input, .fpa-input, .fob-in, .ctl-select, .fcm-wv-in, .ic-input, .ic-coach-pick select,
	.bk-own-f select, .cs-wp select, .cs-wp input[type="text"]
):is(select):not([multiple], [size]) {
	-webkit-appearance: none;
	appearance: none;
	padding-right: var(--fcm-field-chev-w);
	background-image: var(--fcm-field-chev);
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
	text-overflow: ellipsis;
}

/* A field made of a box with a borderless input or select inside (Memberships and prices' "$ 179" and
 * its menus): the box is the field, so it takes the height, and what's inside fills it. */
.fca-body :is(.fcm-mpa .mpa-in, .fcm-mpa .mpa-sheet .mpa-in.mpa-sel) {
	box-sizing: border-box;
	height: var(--fcm-field-h);
	min-height: var(--fcm-field-h);
}
.fca-body :is(.fcm-mpa .mpa-in input, .fcm-mpa .mpa-in select, .fcm-mpa .mpa-sheet .mpa-in.mpa-sel select, .fcm-mpa .mpa-bt-f input[type="text"]) {
	box-sizing: border-box;
	height: calc(var(--fcm-field-h) - 2px);
	min-height: 0;
	line-height: var(--fcm-field-lh);
}
.fca-body .fcm-mpa .mpa-in select:not([multiple], [size]) {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 22px;
	background-image: var(--fcm-field-chev);
	background-repeat: no-repeat;
	background-position: right 4px center;
	background-size: 12px 8px;
	cursor: pointer;
	text-overflow: ellipsis;
}

/* v3.34.0 (review): the member pages' own selects draw their chevron at right .7rem (fcm-public.css); the
 * one padding above mustn't take away its room. My Club's dark theme sets their whole background with
 * !important, which takes that chevron away (3.33.0 too): drawn again here, in paper. */
:is(.fca-body, .fcm-member-portal, .fcm-mc-modal-overlay, .fcm-booking-widget, .fcm-mp) :is(.fcm-mp-input, .fcm-form-input, .cs-wp input[type="text"]):is(select):not(textarea, select[multiple], select[size]) {
	padding-right: 2rem;
}
.fcm-mp.fcm-mp-dark :is(select.fcm-mp-input, select.fcm-form-input):not([multiple], [size]) {
	padding-right: 2rem !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f4f1ea' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right .7rem center !important;
	background-size: 12px 8px !important;
}

/* ── 4. 16 px text on a touch screen ─────────────────────────────────────────────────────────────
 * iPhone zooms the page into a field whose text is under 16 px, and stays zoomed. On a coarse pointer
 * (a phone, an iPad) every field's text is 16 px. The selector carries Settings → Hours' time field so it
 * outweighs each page's own font rule wherever the stylesheets print. */
@media (pointer: coarse) {
	:is(.fca-body, .fcm-member-portal, .fcm-mc-modal-overlay, .fcm-booking-widget, .fcm-mp, .fcm-ic2, .fcm-spa) :is(
		input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]),
		select, textarea, .fcm-club-set .cs-wp .fcm-hours-time-input input
	) {
		font-size: 16px;
	}
}

/* ── 5. Club Manager's WP Admin screens (v3.35.0) ────────────────────────────────────────────────
 * Loaded on Club Manager's own WP Admin screens only (FCM_Admin::enqueue()), and scoped to .wp-admin .fcm-wrap,
 * the wrapper of every Club Manager page: WordPress's own screens and chrome never see these rules. (Inside
 * the Club app the same .fcm-wrap sits under .fcm-club-set .cs-wp, never under .wp-admin: section 3 has it.)
 * Ben's iPad (Edit Membership): the Start Date ran past its column into Billing Cycle, and the "$" price box
 * was shorter than the selects with its "$" outside. Every field in a form group is the one 44 px field and
 * fits its column; a form grid's column can shrink to its column. */
.wp-admin .fcm-wrap :is(.fcm-form-grid, .fcm-two-col) > * {
	min-width: 0;
}
.wp-admin .fcm-wrap .fcm-form-group :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="color"], [type="range"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select):not([multiple], [size]) {
	box-sizing: border-box;
	height: var(--fcm-field-h);
	min-height: var(--fcm-field-h);
	padding: var(--fcm-field-py) var(--fcm-field-px);
	line-height: var(--fcm-field-lh);
	margin: 0;
	min-width: 0;
	max-width: 100%;
}
/* Dates and times: no native look (WebKit's minimum width and centred text ran the Start Date into Billing
 * Cycle), the text from the left, never wider than the column. */
.wp-admin .fcm-wrap .fcm-form-group :is(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]) {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	text-align: left;
}
.wp-admin .fcm-wrap .fcm-form-group input::-webkit-date-and-time-value {
	text-align: left;
	margin: 0;
	min-height: calc(var(--fcm-field-lh) * 1em);
}
.wp-admin .fcm-wrap .fcm-form-group input::-webkit-datetime-edit {
	padding: 0;
}
.wp-admin .fcm-wrap .fcm-form-group input::-webkit-datetime-edit-fields-wrapper {
	padding: 0;
}
/* The calendar or clock drawn in the field, Chromium's picker button see-through over it (one icon; not in
 * Firefox, which draws its own), as section 1 does in the Club app. */
@supports not (-moz-appearance: none) {
	.wp-admin .fcm-wrap .fcm-form-group input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"]) {
		position: relative;
		padding-right: var(--fcm-field-icon-w);
		background-image: var(--fcm-field-date-icon);
		background-repeat: no-repeat;
		background-position: right 10px center;
		background-size: 16px 16px;
	}
	.wp-admin .fcm-wrap .fcm-form-group input[type="time"] {
		background-image: var(--fcm-field-time-icon);
	}
	.wp-admin .fcm-wrap .fcm-form-group input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"])::-webkit-calendar-picker-indicator {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: var(--fcm-field-icon-w);
		height: auto;
		margin: 0;
		padding: 0;
		opacity: 0;
		background: none;
		cursor: pointer;
	}
}
/* 16 px text on a touch screen (an iPad zooms into a smaller field). */
@media (pointer: coarse) {
	.wp-admin .fcm-wrap .fcm-form-group :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea) {
		font-size: 16px;
	}
}
/* A select: no native look (WebKit keeps its own height otherwise), the chevron drawn in paper. */
.wp-admin .fcm-wrap .fcm-form-group select:not([multiple], [size]) {
	-webkit-appearance: none;
	appearance: none;
	padding-right: var(--fcm-field-chev-w);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f4f1ea' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	text-overflow: ellipsis;
	cursor: pointer;
}
/* A field with a prefix and a suffix inside it ("$" … "/mo"): the box is the field, full width at the one
 * height; the input inside fills it, borderless. */
.wp-admin .fcm-wrap .fcm-input-affix {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: var(--fcm-field-h);
	border: 1px solid var(--fcm-border);
	border-radius: var(--fcm-radius-sm);
	background: var(--fcm-input-bg);
	color: var(--fcm-text);
	overflow: hidden;
}
.wp-admin .fcm-wrap .fcm-input-affix:focus-within {
	border-color: var(--fcm-gold);
}
.wp-admin .fcm-wrap .fcm-input-prefix,
.wp-admin .fcm-wrap .fcm-input-suffix {
	flex: 0 0 auto;
	color: var(--fcm-text-muted);
	font-weight: 600;
	line-height: 1;
	user-select: none;
}
.wp-admin .fcm-wrap .fcm-input-prefix {
	padding-left: var(--fcm-field-px);
}
.wp-admin .fcm-wrap .fcm-input-suffix {
	padding-right: var(--fcm-field-px);
	font-weight: 500;
}
.wp-admin .fcm-wrap .fcm-form-group .fcm-input-affix input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: calc(var(--fcm-field-h) - 2px);
	min-height: 0;
	padding-left: 6px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
}
.wp-admin .fcm-wrap .fcm-form-group .fcm-input-readonly {
	background: transparent;
	border-style: dashed;
	color: var(--fcm-text);
	cursor: default;
}
/* A toggle on the fields' line: centred in the 44 px band a field takes under its label. */
.wp-admin .fcm-wrap .fcm-form-group > .fcm-toggle {
	align-self: flex-start;
	margin: calc((var(--fcm-field-h) - 22px) / 2) 0;
	flex: 0 0 auto;
}