/**
 * Application form.
 *
 * Built to the redesign: eight numbered section cards, selectable meet cards,
 * hotel-night chips grouped by meet, pill selectors, and a drop-zone upload.
 *
 * TWO DELIBERATE DEPARTURES FROM THE DESIGN FILE
 * ---------------------------------------------
 * Font is Barlow, not Kanit. The theme is Barlow throughout, and a form in a
 * different typeface — sitting between the site's banner and its red sidebar
 * cards — reads as a third-party form embedded in the page, which is the exact
 * impression this rebuild exists to remove.
 *
 * Red is the site's #ff0000, not the design's #E4131B. Same reason: the header,
 * the CONTACT US button and the four sidebar cards are all #ff0000, and a form
 * a shade off them looks like a mistake rather than a choice.
 *
 * Both live in the variables below. Switching to the design's palette is two
 * lines if that is what is wanted.
 */

.coacho-application-form {
	--ca-red: #ff0000;
	--ca-red-dark: #cc0000;
	--ca-ink: #16181d;
	--ca-label: #1a1c22;
	--ca-body: #3a3d45;
	--ca-muted: #6a6e78;
	--ca-faint: #9a9ea8;
	--ca-card-border: #e9eaee;
	--ca-input-border: #e2e4e9;
	--ca-control-border: #c3c6cd;
	--ca-input-bg: #fbfbfc;
	--ca-tint: #fff7f7;

	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	font-family: inherit;
	color: var(--ca-ink);
}

.coacho-application-form *,
.coacho-application-form *::before,
.coacho-application-form *::after {
	box-sizing: border-box;
}

/* ---------- Section cards ---------- */
.coacho-application-card {
	background: #fff;
	border: 1px solid var(--ca-card-border);
	border-radius: 16px;
	padding: 28px 30px;
	box-shadow: 0 1px 2px rgba(16, 17, 20, 0.04);
}

.coacho-application-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
}

.coacho-application-card-num {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--ca-ink);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
}

.coacho-application-card-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ca-ink);
}

/* Each card holds its own 12-column grid; spans still pair fields on a row. */
.coacho-application-card-body {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 24px;
	/*
	 * Rows are given noticeably more room than columns. Two fields side by
	 * side are read as a pair and want to sit close; two stacked are separate
	 * questions, and at 20px the pills above ran into the label below them.
	 */
	row-gap: 28px;
}

.coacho-application-span-6 { grid-column: span 6; }
.coacho-application-span-12 { grid-column: span 12; }

@media (max-width: 700px) {
	.coacho-application-span-6 { grid-column: span 12; }
	.coacho-application-card { padding: 22px 18px; }
}

.coacho-application-span-6.coacho-application-field--row-start { grid-column: 1 / span 6; }
.coacho-application-span-12.coacho-application-field--row-start { grid-column: 1 / span 12; }

/* ---------- Fields ---------- */
.coacho-application-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.coacho-application-field[hidden] { display: none; }

.coacho-application-label {
	display: block;
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ca-label);
}

/*
 * A heading inside a card, over a sub-group — "Address:" above the four
 * address parts. Larger than a field label, which is what marks it as the
 * parent of the fields beneath rather than a label of its own.
 */
.coacho-application-group-label {
	grid-column: 1 / -1;
	margin: 6px 0 -6px;
	font-size: 17px;
	font-weight: 600;
	color: var(--ca-label);
}

/*
 * The address parts read as ordinary field labels — same size, weight and
 * colour as every other one. Only the heading above them is set apart, by
 * size alone.
 */
.coacho-application-field--sub .coacho-application-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--ca-label);
}

.coacho-required {
	display: inline-block;
	padding-inline-start: 0.25em;
	color: var(--ca-red);
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
}

.coacho-application-desc {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ca-muted);
}

/*
 * For a description that is a rule rather than a hint — lodging being by
 * request only. Set as a callout, because an applicant who skims past it can
 * turn up expecting a room nobody booked, and grey 12.5px under a list of
 * radios is exactly what gets skimmed past.
 */
.coacho-application-desc--notice {
	margin-top: 12px;
	padding: 12px 16px;
	border: 1px solid #f6d5d6;
	border-left: 4px solid var(--ca-red);
	border-radius: 8px;
	background: var(--ca-tint);
	font-size: 14px;
	font-weight: 500;
	color: #7a2f32;
}

.coacho-application-field fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* ---------- Text inputs, selects, textareas ---------- */
.coacho-application-form input[type="text"],
.coacho-application-form input[type="email"],
.coacho-application-form input[type="tel"],
.coacho-application-form input[type="date"],
.coacho-application-form select,
.coacho-application-form textarea {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1.5px solid var(--ca-input-border);
	border-radius: 10px;
	background: var(--ca-input-bg);
	font-family: inherit;
	font-size: 14.5px;
	color: var(--ca-ink);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.coacho-application-form textarea {
	height: auto;
	min-height: 104px;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}

.coacho-application-form input::placeholder,
.coacho-application-form textarea::placeholder {
	color: var(--ca-faint);
}

.coacho-application-form input:focus,
.coacho-application-form select:focus,
.coacho-application-form textarea:focus {
	border-color: var(--ca-red);
	box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.08);
	background: #fff;
}

.coacho-application-form select {
	appearance: none;
	cursor: pointer;
	padding-right: 38px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239a9ea8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
}

/* ---------- Dates ----------
   The browser's own date field, restyled — not replaced with a scripted
   calendar. The native picker is the one people already know, it is the one
   that works on a phone, and it needs no JavaScript to be keyboard
   accessible. What was wrong with it was only that it looked like nothing
   else on the form: default height, default border, a grey system glyph.

   So it takes the same box as every other field and gets the calendar mark
   the design uses, in place of the browser's. */
.coacho-application-form input[type="date"] {
	position: relative;
	padding-right: 42px;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect x='1' y='2.5' width='14' height='12.5' rx='2.5' stroke='%239a9ea8' stroke-width='1.6'/%3E%3Cpath d='M1 6.5h14' stroke='%239a9ea8' stroke-width='1.6'/%3E%3Cpath d='M5 1v3M11 1v3' stroke='%239a9ea8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

/*
 * The whole field opens the picker, not just the small glyph at its end.
 *
 * The indicator is stretched over the input and made transparent, so the icon
 * above shows through and a click anywhere on the box opens the calendar —
 * which is what everybody tries first, and what the native control does not do
 * on its own.
 */
.coacho-application-form input[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

/* Only the date fields have a hover state, and deliberately: they are the only
   inputs where the whole box does something on click, so they are the only
   ones that need to say so. */
.coacho-application-form input[type="date"]:hover {
	border-color: #c9ced6;
}

/*
 * "mm/dd/yyyy" before anything is chosen reads as an answer rather than a
 * prompt, so it is toned back to match every other placeholder.
 *
 * Driven by a class rather than :invalid, because an empty optional date —
 * End Date, which is meant to be left blank for a one-day meet — is perfectly
 * valid and would have stayed dark. form.js sets it.
 */
.coacho-application-form input[type="date"].is-empty:not(:focus)::-webkit-datetime-edit {
	color: var(--ca-faint);
}

/* ---------- Radios and checkboxes ----------
   Real inputs throughout, restyled rather than replaced: keyboard behaviour,
   labels and screen-reader output all stay native. */
.coacho-application-choices {
	display: flex;
	gap: 10px 22px;
}

/*
 * Long options stack; short ones sit on a row. Travel type, phone type and
 * Yes/No are three or fewer short words each — stacking them wastes a third
 * of the card and separates a question from its answers.
 */
.coacho-application-choices--list { flex-direction: column; }

/*
 * Matched to the height of a text input and centred inside it, so a row of
 * options sitting beside one — Type against Phone, Yes/No against
 * Certification Number — lines up through the middle rather than riding
 * along the top of it.
 */
.coacho-application-choices--inline {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	min-height: 46px;
}

.coacho-application-choices--pills { flex-wrap: wrap; gap: 12px; }

/* Pills are blocks under their label, like the cards and chips are. */
.coacho-application-field--radio:has(.coacho-application-choices--pills) > fieldset > .coacho-application-label {
	margin-bottom: 14px;
}

/*
 * 15px, matching the live form rather than the design file's 14px. These are
 * full sentences on the roommate question, not one-word options, and they are
 * the answer to the label directly above them — reading a size smaller than
 * everything around them makes them look like help text.
 */
.coacho-application-choice {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ca-body);
	cursor: pointer;
}

.coacho-application-choice input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ca-red);
	cursor: pointer;
}

/* ---------- Pills ---------- */
.coacho-application-pill {
	position: relative;
	cursor: pointer;
}

/* Hidden but still focusable and still the thing being toggled. */
.coacho-application-pill input,
.coacho-application-chip input,
.coacho-application-meet input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.coacho-application-pill span {
	display: inline-block;
	padding: 10px 20px;
	border: 1.5px solid var(--ca-input-border);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ca-body);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.coacho-application-pill input:checked + span {
	background: var(--ca-red);
	border-color: var(--ca-red);
	color: #fff;
	box-shadow: 0 3px 10px rgba(255, 0, 0, 0.25);
}

.coacho-application-pill input:focus-visible + span,
.coacho-application-chip input:focus-visible + span,
.coacho-application-meet input:focus-visible ~ .coacho-application-meet-text {
	outline: 2px solid var(--ca-ink);
	outline-offset: 2px;
}

/* ---------- Hotel-night chips, grouped by meet ---------- */
.coacho-application-chip-groups {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.coacho-application-chip-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.coacho-application-chip-group {
	flex: 0 0 210px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ca-body);
}

.coacho-application-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.coacho-application-chip { cursor: pointer; }

.coacho-application-chip span {
	display: inline-block;
	padding: 7px 15px;
	border: 1.5px solid var(--ca-input-border);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--ca-body);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.coacho-application-chip input:checked + span {
	background: var(--ca-red);
	border-color: var(--ca-red);
	color: #fff;
}

@media (max-width: 700px) {
	.coacho-application-chip-group { flex-basis: 100%; }
}

/* ---------- Selectable meet cards ---------- */
/*
 * A question answered by cards or chips needs more air under its label than
 * one answered by a text box: the controls below are blocks, not a single
 * line, and 7px leaves the label sitting on top of them.
 */
.coacho-application-field--checkbox > .coacho-application-label,
.coacho-application-field--checkbox legend.coacho-application-label {
	margin-bottom: 14px;
}

/*
 * Extra room where one block question follows another — the hotel nights
 * under the meet cards. The grid's row gap is sized for a label above an
 * input; between two blocks of controls it reads as though the second
 * question belongs to the first.
 */
.coacho-application-field--checkbox + .coacho-application-field--checkbox {
	margin-top: 16px;
}

.coacho-application-meets {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

@media (max-width: 700px) {
	.coacho-application-meets { grid-template-columns: 1fr; }
}

.coacho-application-meet {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 17px 18px;
	border: 1.5px solid var(--ca-input-border);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.coacho-application-meet-box {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 1.5px solid var(--ca-control-border);
	border-radius: 6px;
	background: #fff;
	transition: background 0.15s, border-color 0.15s;
}

.coacho-application-meet input:checked ~ .coacho-application-meet-box {
	background: var(--ca-red) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
	border-color: var(--ca-red);
}

.coacho-application-meet:has(input:checked) {
	border-color: var(--ca-red);
	background: var(--ca-tint);
	box-shadow: 0 3px 10px rgba(255, 0, 0, 0.08);
}

.coacho-application-meet-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.coacho-application-meet-name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ca-ink);
}

/*
 * Same size as the meet name above it, distinguished by weight and colour
 * rather than scale. With four meets all called "Clemson ...", the date is
 * what tells them apart — it is not secondary information.
 */
.coacho-application-meet-date {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--ca-muted);
}

/* ---------- Upload drop zone ---------- */
.coacho-application-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 26px 20px;
	border: 1.5px dashed #cfd2d9;
	border-radius: 12px;
	background: var(--ca-input-bg);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.coacho-application-drop:hover {
	border-color: var(--ca-red);
	background: var(--ca-tint);
}

.coacho-application-drop-icon {
	color: var(--ca-red);
	line-height: 0;
}

/*
 * Hidden by clip, not display:none — the input is still the real control and
 * keeps its place in the tab order; the label around it opens the picker.
 */
.coacho-application-drop input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.coacho-application-drop-text {
	font-size: 15px;
	font-weight: 400;
	color: var(--ca-body);
}

.coacho-application-drop-text strong {
	font-weight: 600;
	color: var(--ca-ink);
}

/* Keyboard focus lands on the hidden input, so the panel shows it. */
.coacho-application-drop:focus-within {
	border-color: var(--ca-red);
	background: var(--ca-tint);
	box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.08);
}

/* Once a file is chosen the panel reads as done rather than as an invitation. */
.coacho-application-drop--filled {
	border-style: solid;
	border-color: var(--ca-red);
	background: var(--ca-tint);
}

.coacho-application-filehint {
	font-size: 12.5px;
	color: var(--ca-faint);
}

/* ---------- Notes ---------- */
.coacho-application-note {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ca-body);
}

.coacho-application-note strong {
	font-weight: 600;
	color: var(--ca-label);
}

.coacho-application-note em {
	color: var(--ca-red);
	font-size: 14px;
}

/*
 * A rule above the note, where one card holds two unrelated questions — the
 * T-shirt size and the four assignment preferences share Work Preferences.
 */
.coacho-application-note--divided {
	margin-top: 10px;
	padding-top: 26px;
	border-top: 1px solid var(--ca-card-border);
}

/*
 * The accurate-email warning, outside the cards and directly above the
 * button. Set a size up and a weight heavier than the notes inside the
 * cards: it is the last thing read before submitting, and a wrong address
 * here means the applicant never hears back at all.
 */
.coacho-application-note--panel {
	padding: 18px 22px;
	border: 1px solid #f6d5d6;
	border-radius: 12px;
	background: var(--ca-tint);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	color: #7a2f32;
}

/* ---------- Errors ---------- */
.coacho-application-field--error input,
.coacho-application-field--error select,
.coacho-application-field--error textarea {
	border-color: var(--ca-red);
	background: #fff;
}

.coacho-application-error {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: #b32d2e;
}

.coacho-application-errors {
	padding: 16px 20px;
	border: 1px solid #f6d5d6;
	border-radius: 12px;
	background: var(--ca-tint);
	color: #7a2f32;
}

.coacho-application-errors p { margin: 0; }

/* ---------- Submit ---------- */
.coacho-application-submit {
	margin: 4px 0 0;
}

.coacho-application-submit button {
	padding: 17px 42px;
	border: 0;
	border-radius: 10px;
	background: var(--ca-red);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(255, 0, 0, 0.28);
	transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}

.coacho-application-submit button:hover {
	background: var(--ca-red-dark);
	box-shadow: 0 8px 24px rgba(255, 0, 0, 0.34);
}

.coacho-application-submit button:active { transform: translateY(1px); }

/* ---------- Notices, chooser, thanks ---------- */
.coacho-application-notice {
	padding: 16px 20px;
	border: 1px solid #f6d5d6;
	border-radius: 12px;
	background: var(--ca-tint);
	color: #7a2f32;
}

.coacho-application-thanks {
	padding: 24px 28px;
	border: 1px solid var(--ca-card-border);
	border-radius: 16px;
	background: #fff;
}

.coacho-application-thanks h2 { margin-top: 0; }

.coacho-application-chooser ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.coacho-application-chooser li {
	padding: 12px 0;
	border-bottom: 1px solid var(--ca-card-border);
}

/*
 * The honeypot. Moved off-screen rather than display:none — some bots skip
 * fields that are display:none, and the point is that they fill this one in.
 * aria-hidden and tabindex="-1" in the markup keep it away from people.
 */
.coacho-application-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}