/*
 * The appraisal and referral forms — [ks_appraisal] and [ks_referral], plain
 * HTML from inc/appraisal.php and inc/referral.php — in the contact skin.
 *
 * THE SAME LOOK AS assets/css/contact-form.css, restated rather than reused.
 * That file is written against Gravity Forms' markup (.gform_wrapper, its
 * orbital variables, its button classes) and none of it matches a plain form.
 * The values below are the same values — 50px controls, 11px tracked caps
 * labels, Jost 300, the brass button — so the two read as one family; if the
 * contact skin changes, change these alongside it.
 *
 * Scoped to .ks-form throughout. The site runs many forms, and a rule that
 * escapes its scope silently redesigns one nobody is looking at.
 *
 * This replaces assets/css/appraisal-form.css, the skin over the Survey
 * add-on's Likert tables, which no page renders any more.
 */

.ks-form {
	font: 300 15px/1.6 Jost, sans-serif;
	color: #1c2a33;
	min-width: 0;
}

.ks-form [hidden] {
	display: none !important;
}

.ks-form__field,
.ks-form__group {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.ks-form__group {
	margin-bottom: 34px;
}

/* -------------------------------------------------------------------------
 * Headings, labels, hints.
 * ---------------------------------------------------------------------- */

.ks-form__heading {
	font: 400 22px/1.3 Jost, sans-serif;
	letter-spacing: -0.01em;
	color: #1c2a33;
	margin: 8px 0 20px;
	padding: 0;
}

legend.ks-form__heading {
	float: left;
	width: 100%;
}

legend.ks-form__heading + * {
	clear: both;
}

.ks-form__label {
	display: block;
	font: 500 11px/1.5 Jost, sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8c9099;
	margin: 0 0 9px;
	padding: 0;
}

.ks-form__req {
	color: #b08d57;
}

.ks-form__cond-hint {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 300;
	font-size: 12px;
}

/* With script, a follow-up only appears when it applies, so the note saying
   when to answer it would only be noise. */
.ks-form--js .ks-form__cond-hint {
	display: none;
}

.ks-form__hint {
	font: 300 12px/1.6 Jost, sans-serif;
	color: #8c9099;
	margin: -3px 0 9px;
}

.ks-form__check .ks-form__hint {
	margin: 8px 0 0 30px;
}

.ks-form__hint a {
	color: inherit;
	text-decoration: underline;
}

.ks-form__intro,
.ks-form__greeting p {
	margin: 0 0 14px;
}

.ks-form__greeting {
	margin: 0 0 30px;
}

.ks-form__hello {
	font: 400 22px/1.3 Jost, sans-serif;
	color: #1c2a33;
}

/* -------------------------------------------------------------------------
 * Controls.
 * ---------------------------------------------------------------------- */

.ks-form input[type="text"],
.ks-form input[type="email"],
.ks-form input[type="tel"],
.ks-form select,
.ks-form textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 50px;
	font: 300 15px/1.5 Jost, sans-serif;
	color: #1c2a33;
	background: #ffffff;
	border: 1px solid rgba(28, 42, 51, 0.2);
	border-radius: 0;
	padding: 12px 14px;
	box-shadow: none;
}

/* iOS Safari zooms the page into any control under 16px when it is focused,
   and leaves it zoomed. 15px is the design's size on a desktop; on a phone the
   controls go to 16px rather than have the page lurch on every tap. */
@media (max-width: 767px) {
	.ks-form input[type="text"],
	.ks-form input[type="email"],
	.ks-form input[type="tel"],
	.ks-form select,
	.ks-form textarea {
		font-size: 16px;
	}
}

.ks-form textarea {
	min-height: 120px;
	resize: vertical;
}

.ks-form input:hover,
.ks-form select:hover,
.ks-form textarea:hover {
	border-color: rgba(28, 42, 51, 0.4);
}

.ks-form input:focus,
.ks-form select:focus,
.ks-form textarea:focus {
	outline: none;
	border-color: #b08d57;
}

/* -------------------------------------------------------------------------
 * Radio and checkbox choices.
 *
 * Each choice is a bordered box with the whole box as its label, so the tap
 * target is the box and not the 16px circle — these are filled in on phones.
 * The checked box is picked out with :has(), which every current browser
 * supports; one that does not still shows the checked radio itself.
 * ---------------------------------------------------------------------- */

.ks-choices {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

.ks-choices--inline {
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.ks-choices--extra {
	margin-top: 8px;
}

.ks-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	min-height: 46px;
	padding: 10px 14px;
	background: #ffffff;
	border: 1px solid rgba(28, 42, 51, 0.2);
	cursor: pointer;
	font: 300 15px/1.35 Jost, sans-serif;
	color: #1c2a33;
	min-width: 0;
}

.ks-choice span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ks-choice input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #b08d57;
}

.ks-choice:hover {
	border-color: rgba(28, 42, 51, 0.4);
}

.ks-choice:has(input:checked) {
	border-color: #b08d57;
	box-shadow: inset 0 0 0 1px #b08d57;
}

.ks-choice:has(input:focus-visible) {
	outline: 2px solid #1c2a33;
	outline-offset: 2px;
}

.ks-form__check .ks-choice {
	align-items: flex-start;
	background: transparent;
	border: 0;
	padding: 0;
	min-height: 0;
}

/* A 44px tap target: at min-height 0 the "Join our referral scheme" line was
   a 20px strip to hit with a thumb (Dan, 2026-10-02). The padding grows the
   label, which is the hit area, without moving the box away from its text.
   Scoped to that one tick: /refer/'s consent sentence runs to three lines and
   is already well past 44px. */
#ksf-appraisal-referralOptIn-wrap .ks-choice {
	padding: 12px 0;
	min-height: 44px;
}

.ks-form__check .ks-choice input {
	margin-top: 3px;
}

/* A lone checkbox is a statement to agree to, not one of a set of boxes, so
   ticking it must not draw the selected-choice outline around its sentence. */
.ks-form__check .ks-choice:has(input:checked) {
	box-shadow: none;
}

/* The five-point scale in one row where there is room for it. Below 768px
   the panel is too narrow for "Very poor" beside four others, so it stacks. */
@media (min-width: 768px) {
	.ks-rating > .ks-choices:not(.ks-choices--extra) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.ks-rating .ks-choice {
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		text-align: center;
		padding: 10px 6px;
		font-size: 14px;
	}

	.ks-rating .ks-choices--extra .ks-choice {
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
		padding: 10px 14px;
	}
}

/* -------------------------------------------------------------------------
 * Buttons.
 * ---------------------------------------------------------------------- */

.ks-form__actions {
	margin: 32px 0 0;
}

.ks-form__button {
	display: block;
	box-sizing: border-box;
	width: 100%;
	font: 500 12px/1.4 Jost, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: #16222a;
	background: #b08d57;
	border: 0;
	border-radius: 0;
	padding: 21px 24px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.ks-form__button:hover,
.ks-form__button:focus-visible {
	background: #1c2a33;
	color: #f5f2ec;
}

.ks-form__button:focus-visible {
	outline: 2px solid #1c2a33;
	outline-offset: 3px;
}

/* A secondary control: an outline, so it does not compete with Send. */
.ks-form__add {
	display: block;
	width: 100%;
	margin: -10px 0 30px;
	font: 500 12px/1.4 Jost, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #1c2a33;
	background: transparent;
	border: 1px solid rgba(28, 42, 51, 0.4);
	border-radius: 0;
	padding: 15px 20px;
	cursor: pointer;
}

.ks-form__add:hover,
.ks-form__add:focus-visible {
	border-color: #b08d57;
	color: #b08d57;
}

@media (prefers-reduced-motion: reduce) {
	.ks-form__button {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Errors.
 * ---------------------------------------------------------------------- */

.ks-form__field--error input,
.ks-form__field--error select,
.ks-form__field--error textarea,
.ks-form__field--error .ks-choice {
	border-color: #9b2c2c;
}

.ks-form__error {
	font: 400 13px/1.5 Jost, sans-serif;
	color: #9b2c2c;
	margin: 6px 0 0;
}

.ks-form__summary {
	border-left: 3px solid #9b2c2c;
	padding: 4px 0 4px 16px;
	margin: 0 0 30px;
	font: 400 14px/1.6 Jost, sans-serif;
	color: #9b2c2c;
}

.ks-form__summary p {
	margin: 0 0 6px;
}

.ks-form__summary ul {
	margin: 0;
	padding-left: 18px;
}

.ks-form__summary a {
	color: inherit;
}

/* -------------------------------------------------------------------------
 * The honeypot: off-screen, never display:none (some bots skip hidden
 * inputs). aria-hidden and tabindex=-1 in the markup keep people out of it.
 * ---------------------------------------------------------------------- */

.ks-form__hp {
	position: absolute !important;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The thank-you is landed on by its #ks-thanks fragment. Without this the
   heading scrolls up under the sticky site header and the reader sees the
   middle of a paragraph first (Dan, 2026-10-02). */
#ks-thanks {
	scroll-margin-top: 88px;
}

/* The page's own note under the form ("Your project reference and designer
   are on your paperwork…" on /appraisal/, "Please make sure they are happy…"
   on /refer/) is Elementor content seeded from tools/pages/*.php, not part of
   the form. It is about the questions, so it is hidden where they are not
   asked: on a private link (the job is already known) and on either
   thank-you (Dan, 2026-10-02). Hidden from here rather than edited, so the
   page copy stays the copy review's. A browser without :has() still shows the
   note, which is only a superfluous line. */
.elementor-widget:has(.ks-form--thanks, input[name="ksf[token]"]) + .elementor-widget-text-editor {
	display: none;
}

.ks-form--thanks p {
	font: 300 17px/1.8 Jost, sans-serif;
	margin: 0 0 16px;
}

.ks-form--thanks a:not(.ks-form__button) {
	color: inherit;
	text-decoration: underline;
}