/**
 * Visitor survey — page-templates/survey.php.
 *
 * Anonymous two-part questionnaire. Grayscale tokens only, 2px borders, no
 * radius (DESIGN.md). Section titles use `.kodansha-black` @ 4.115rem like the
 * other city pages.
 */

.survey {
	padding-block: var(--space-07);
}

.survey__intro {
	max-width: 48rem;
	margin-bottom: var(--space-06);
}

.survey__title {
	font-size: 4.115rem;
	line-height: var(--line-height-heading);
	margin: 0 0 var(--space-04);
}

.survey__lede,
.survey__part-lede {
	font-size: var(--font-size-05);
	color: var(--color-text-2);
	max-width: 44rem;
}

/* Honeypot — kept in flow but off-screen and out of the tab order. */
.survey__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.survey__part {
	margin-bottom: var(--space-07);
}

.survey__part-title {
	font-size: 2.5rem;
	line-height: var(--line-height-heading);
	margin: 0 0 var(--space-04);
}

.survey__part--done {
	opacity: 0.5;
}

/* Transition message shown after Part A submit, above Part B. */
.survey__bridge {
	margin: var(--space-06) 0;
	padding: var(--space-05);
	border: var(--border-width-md) solid var(--color-line);
}

.survey__bridge-thanks {
	font-family: "Maax Bold";
	font-size: var(--font-size-06);
	margin: 0 0 var(--space-03);
}

.survey__bridge-lede {
	margin: 0;
	color: var(--color-text-2);
	max-width: 44rem;
}

/* ------------------------------------------------------------------ *
 * Questions
 * ------------------------------------------------------------------ */

.survey-question {
	border: none;
	border-top: var(--border-width-md) solid var(--color-line-3);
	margin: 0;
	padding: var(--space-05) 0;
}

.survey-question__label {
	display: block;
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: var(--font-size-05);

	/* Right padding widens the gap the legend cuts in the fieldset's top
	   border, so the line doesn't butt against the required *. */
	padding: 0 var(--space-03) 0 0;
	margin-bottom: var(--space-03);
}

/* Outrank the reset's `abbr[title]` (0,1,1) so the required * has no
   dotted underline — the class alone (0,1,0) would lose. */
.survey-question .survey-question__required {
	color: var(--color-text-2);
	text-decoration: none;
	border: none;
}

.survey-question__help {
	color: var(--color-text-2);
	font-size: var(--font-size-03);
	margin: 0 0 var(--space-04);
}

.survey-question__error {
	color: var(--color-feedback-error-text);
	font-size: var(--font-size-03);
	margin: var(--space-03) 0 0;
	min-height: 1em;
}

/* A failed submit scrolls the visitor to the first blank required question and
   flags it here, so the prompt lands where they're looking instead of only in
   the banner by the submit button. Cleared by JS the moment it's answered. */
.survey-question--invalid {
	border-left: var(--border-width-lg) solid var(--color-feedback-error-border);
	padding-left: var(--space-03);
	background: var(--color-feedback-error-bg);
}

.survey-question__text,
.survey-question__textarea,
.survey-question__other,
.survey-question__email {
	display: block;
	width: 100%;
	max-width: 32rem;
	padding: var(--space-03);
	border: var(--border-width-md) solid var(--color-line);
	background: var(--color-background);
	color: var(--color-text);
	font: inherit;
}

.survey-question__other {
	margin-top: var(--space-03);
}

/* ------------------------------------------------------------------ *
 * Options (radio / checkbox)
 * ------------------------------------------------------------------ */

.survey-question__options {
	display: grid;
	gap: var(--space-02);
}

.survey-option {
	display: flex;
	align-items: flex-start;
	gap: var(--space-03);
	padding: var(--space-03);
	border: var(--border-width-md) solid var(--color-line-3);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.survey-option:hover {
	border-color: var(--color-line);
}

.survey-option__input {
	margin-top: 0.2em;
	flex: 0 0 auto;
	accent-color: var(--color-black);
}

.survey-option:has(.survey-option__input:checked) {
	border-color: var(--color-line);
	background: var(--color-background-2);
}

.survey-option--disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ *
 * Scale (1..N)
 * ------------------------------------------------------------------ */

.survey-scale {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-02);
}

.survey-scale__item {
	cursor: pointer;
}

.survey-scale__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.survey-scale__num {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 var(--space-02);
	border: var(--border-width-md) solid var(--color-line-3);
	font-family: "Maax Medium";
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.survey-scale__item:hover .survey-scale__num {
	border-color: var(--color-line);
}

.survey-scale__input:checked + .survey-scale__num {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}

.survey-scale__input:focus-visible + .survey-scale__num {
	outline: var(--border-width-md) solid var(--color-line);
	outline-offset: var(--border-width-sm);
}

/* ------------------------------------------------------------------ *
 * Rank-top-three
 * ------------------------------------------------------------------ */

.survey-rank {
	display: grid;
	gap: var(--space-02);
}

.survey-rank__option {
	display: flex;
	align-items: center;
	gap: var(--space-03);
	width: 100%;
	padding: var(--space-03);
	border: var(--border-width-md) solid var(--color-line-3);
	background: var(--color-background);
	color: var(--color-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.survey-rank__option:hover {
	border-color: var(--color-line);
}

.survey-rank__option--picked {
	border-color: var(--color-black);
	background: var(--color-background-2);
}

.survey-rank__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border: var(--border-width-md) solid var(--color-line-3);
	font-family: "Maax Black";
}

.survey-rank__option--picked .survey-rank__badge {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}

/* ------------------------------------------------------------------ *
 * Submit + completion
 * ------------------------------------------------------------------ */

.survey__submit {
	margin-top: var(--space-05);
}

.survey__error {
	color: var(--color-feedback-error-text);
	font-size: var(--font-size-04);
	margin: var(--space-04) 0 0;
	min-height: 1em;
}

.survey__done {
	max-width: 40rem;
	margin: var(--space-06) 0;
	padding: var(--space-06);
	border: var(--border-width-md) solid var(--color-line);
}

.survey__done-title {
	font-size: 2.5rem;
	margin: 0 0 var(--space-04);
}

.survey__coupon {
	margin: var(--space-04) 0;
	padding: var(--space-05);
	background: var(--color-black);
	color: var(--color-white);
}

.survey__coupon-label {
	margin: 0 0 var(--space-03);
	font-size: var(--font-size-04);
}

.survey__coupon-code {
	font-family: "Maax Black";
	font-size: var(--font-size-08);
	letter-spacing: 0.08em;
	margin: 0 0 var(--space-03);
	word-break: break-all;
}

.survey__coupon-note {
	margin: 0;
	font-size: var(--font-size-03);
	color: var(--color-gray-light);
}

.survey__privacy {
	margin-top: var(--space-06);
	font-size: var(--font-size-03);
	color: var(--color-text-2);
}

@media (max-width: 640px) {

	.survey__title {
		font-size: 2.75rem;
	}
}