/* DS Forms front-end styles - Typeform-inspired, one-question-at-a-time layout. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

.surveyflow-root {
	--sf-bg: #ffffff;
	--sf-text: #1a1a1a;
	--sf-accent: #0ea06c;
	--sf-btn-text: #ffffff;
	--sf-btn-bg: #0ea06c;
	--sf-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--sf-heading-font: inherit;
	--sf-mono-font: inherit;
	--sf-danger: #cc4b3f;
	--sf-warning: #c9821c;
	--sf-success: #00c873;
	--sf-line: rgba(0,0,0,0.12);

	/* Every color here is explicitly author-set from the admin's chosen
	   theme, never left to browser defaults - so this never has a "dark
	   mode" of its own to adapt to. Without this, some mobile browsers
	   auto-darken native form controls (most noticeably a focused
	   textarea, which has an intentionally transparent background so the
	   card's own color shows through) when the visitor's OS is in dark
	   mode, which looks like a glitch rather than the form's own design.
	   "only" forces it even in browsers that would otherwise still
	   auto-adapt some chrome despite the scheme being declared. */
	color-scheme: only light;

	position: relative;
	box-sizing: border-box;
	width: var(--sf-width, 100%);
	min-height: var(--sf-min-height, 560px);
	min-width: var(--sf-min-width, 0);
	max-height: 90vh;
	height: var(--sf-height, 640px);
	background: var(--sf-bg);
	background-size: cover;
	background-position: center;
	color: var(--sf-text);
	font-family: var(--sf-font);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 30px rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
}

/* "Full size" display mode - the card grows to fit all of its content
   instead of staying capped at a fixed/max height with its own inner
   scrollbar. Higher specificity than the plain .surveyflow-root rule
   above, so these override it with no !important needed. min-height/
   min-width above still apply as a floor either way. */
.surveyflow-root.sf-size-full {
	height: auto;
	max-height: none;
}
.surveyflow-root.sf-size-full .sf-stage {
	overflow-y: visible;
}

.surveyflow-root.sf-bg-pattern::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(color-mix(in srgb, var(--sf-accent) 7%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--sf-accent) 7%, transparent) 1px, transparent 1px);
	background-size: 28px 28px;
	-webkit-mask-image: linear-gradient(to bottom, black, transparent 75%);
	mask-image: linear-gradient(to bottom, black, transparent 75%);
}
.surveyflow-root.sf-bg-pattern .sf-stage {
	position: relative;
	z-index: 1;
}

.surveyflow-root *, .surveyflow-root *::before, .surveyflow-root *::after {
	box-sizing: border-box;
}

.sf-progress {
	/* The plain "bar" style is a hairline meant to sit flush across the very
	   top edge of the card, so it stays absolutely positioned and out of
	   flow. The taller dots/percentage/ruler styles below override this
	   back to a normal, in-flow header instead - left absolute (and with a
	   transparent background, for the ruler/percentage/dots styles) they'd
	   float over the scrollable question area beneath them rather than
	   sit above it, overlapping its content as soon as it scrolls. */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: rgba(0,0,0,0.06);
	z-index: 5;
}
.sf-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--sf-accent);
	transition: width 0.35s ease;
}
.sf-progress-dots {
	position: static;
	flex-shrink: 0;
	height: auto;
	background: transparent;
	padding: 14px 20px 0;
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
}
.sf-progress-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0,0,0,0.12);
	transition: background 0.2s ease;
}
.sf-progress-dot.is-done {
	background: var(--sf-accent);
}
.sf-progress-percentage {
	position: static;
	flex-shrink: 0;
	height: auto;
	background: transparent;
	padding: 14px 20px 0;
	text-align: center;
}
.sf-progress-percentage-text {
	font-size: 13px;
	font-weight: 700;
	color: var(--sf-accent);
	letter-spacing: 0.02em;
}

.sf-progress-ruler {
	position: static;
	flex-shrink: 0;
	height: auto;
	background: transparent;
	padding: 20px 24px 0;
}
.sf-progress-ruler-label {
	display: flex;
	justify-content: space-between;
	font-family: var(--sf-mono-font);
	font-size: 11.5px;
	color: var(--sf-text);
	opacity: 0.55;
	letter-spacing: 0.02em;
	margin-bottom: 8px;
}
.sf-progress-ruler-percent {
	font-family: var(--sf-mono-font);
}
.sf-progress-ruler-track {
	display: flex;
	gap: 5px;
}
.sf-progress-ruler-tick {
	flex: 1;
	height: 5px;
	border-radius: 3px;
	background: var(--sf-line);
	position: relative;
	overflow: hidden;
}
.sf-progress-ruler-tick.done::after,
.sf-progress-ruler-tick.current::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sf-accent);
	border-radius: 3px;
}
.sf-progress-ruler-tick.current::after {
	opacity: 0.65;
}

.sf-stage {
	flex: 1;
	display: flex;
	align-items: center;
	/* Centering a flex item taller than its container (a long results
	   screen) can otherwise clip the container's own top padding once it
	   scrolls - "safe" keeps it centered while it fits, then falls back
	   to flush-with-the-padding once it doesn't. Browsers that don't
	   support the keyword simply ignore this line and keep plain
	   "center" above. */
	align-items: safe center;
	justify-content: center;
	overflow-y: auto;
	padding: 56px 24px;
}
.sf-spacing-compact .sf-stage {
	padding: 32px 20px;
}
.sf-spacing-comfortable .sf-stage {
	padding: 56px 24px;
}
.sf-spacing-spacious .sf-stage {
	padding: 84px 28px;
}

.sf-screen {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	text-align: start;
}
.sf-width-narrow .sf-screen {
	max-width: 480px;
}
.sf-width-medium .sf-screen {
	max-width: 640px;
}
.sf-width-wide .sf-screen {
	max-width: 820px;
}

.sf-align-center .sf-kicker,
.sf-align-center .sf-heading,
.sf-align-center .sf-subheading {
	text-align: center;
}
.sf-align-center .sf-continue {
	display: block;
	margin: 20px auto 0;
}

/* Explicit, physical right alignment - always visually on the right,
   regardless of the Text direction setting above (unlike the default
   "Left" choice, which is really "start" and so already flips to the
   right under RTL on its own - this option is for anyone who wants
   right-aligned text no matter what, or whose "Left" isn't flipping as
   expected, e.g. due to a stale cached copy of this stylesheet). */
.sf-align-right .sf-kicker,
.sf-align-right .sf-heading,
.sf-align-right .sf-subheading {
	text-align: right;
}
.sf-align-right .sf-continue {
	display: block;
	margin: 20px 0 0 auto;
}

.sf-subfield {
	margin-bottom: var(--sf-subfield-gap, 24px);
}
.sf-subfield-label {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 6px;
}
.sf-subfield-description {
	font-size: 13px;
	opacity: 0.65;
	margin-bottom: 8px;
}
.sf-field-compact {
	margin-bottom: 0;
}
.sf-page-multi .sf-continue {
	margin-top: 8px;
}

.sf-welcome, .sf-thankyou, .sf-loading {
	text-align: center;
}

@keyframes sf-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}
.sf-enter {
	animation: sf-fade-up 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes sf-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}
.sf-shake {
	animation: sf-shake 0.4s;
}

.sf-kicker {
	font-family: var(--sf-mono-font);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sf-accent);
	margin-bottom: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sf-heading {
	font-family: var(--sf-heading-font);
	font-size: 30px;
	line-height: 1.3;
	font-weight: 600;
	margin: 0 0 12px;
	color: var(--sf-text);
}
.sf-welcome .sf-heading, .sf-thankyou .sf-heading {
	font-size: 34px;
}
.sf-heading-small .sf-heading {
	font-size: 23px;
}
.sf-heading-small .sf-welcome .sf-heading, .sf-heading-small .sf-thankyou .sf-heading {
	font-size: 27px;
}
.sf-heading-large .sf-heading {
	font-size: 38px;
}
.sf-heading-large .sf-welcome .sf-heading, .sf-heading-large .sf-thankyou .sf-heading {
	font-size: 44px;
}

.sf-subheading {
	font-size: 17px;
	line-height: 1.5;
	color: var(--sf-text);
	opacity: 0.72;
	margin: 0 0 28px;
}

.sf-required {
	color: #e03e3e;
}

.sf-logo {
	max-height: 56px;
	margin-bottom: 24px;
}

.sf-field {
	margin-bottom: 20px;
}

.sf-input {
	width: 100%;
	font-family: var(--sf-font);
	font-size: 22px;
	padding: 10px 4px;
	border: none;
	border-bottom: 2px solid var(--sf-input-border, rgba(0,0,0,0.15));
	background: var(--sf-input-bg, transparent);
	color: var(--sf-text);
	outline: none;
	transition: border-color 0.2s ease;
}
.sf-input:focus {
	border-bottom-color: var(--sf-accent);
}
.sf-textarea {
	resize: vertical;
	min-height: 100px;
	border: 2px solid var(--sf-input-border, rgba(0,0,0,0.12));
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 18px;
}
.sf-textarea:focus {
	border-color: var(--sf-accent);
}

.sf-input-style-boxed .sf-input:not(.sf-textarea) {
	border: 2px solid var(--sf-input-border, rgba(0,0,0,0.12));
	border-radius: 8px;
	padding: 12px 14px;
}
.sf-input-style-boxed .sf-input:not(.sf-textarea):focus {
	border-color: var(--sf-accent);
}

.sf-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sf-option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: start;
	padding: 14px 16px;
	border: 2px solid rgba(0,0,0,0.12);
	border-radius: 10px;
	background: transparent;
	color: var(--sf-text);
	font-family: var(--sf-font);
	font-size: 17px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.sf-option:hover {
	border-color: var(--sf-accent);
	background: rgba(0,0,0,0.02);
}
.sf-option.is-selected {
	border-color: var(--sf-accent);
	background: color-mix(in srgb, var(--sf-accent) 12%, transparent);
}
.sf-option-badge {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgba(0,0,0,0.2);
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
}
.sf-option.is-selected .sf-option-badge {
	border-color: var(--sf-accent);
	background: var(--sf-accent);
	color: var(--sf-btn-text);
}
.sf-option-label {
	flex: 1;
}

/* Choice option style variants */
.sf-option-style-list .sf-option {
	border: none;
	border-bottom: 1px solid rgba(0,0,0,0.12);
	border-radius: 0;
	padding: 14px 4px;
}
.sf-option-style-list .sf-option:hover {
	background: transparent;
	border-bottom-color: var(--sf-accent);
}
.sf-option-style-list .sf-option.is-selected {
	background: transparent;
	border-bottom-color: var(--sf-accent);
}

.sf-option-style-minimal .sf-option {
	border: none;
	border-radius: 6px;
	padding: 12px 10px;
}
.sf-option-style-minimal .sf-option-badge {
	display: none;
}
.sf-option-style-minimal .sf-option.is-selected {
	background: color-mix(in srgb, var(--sf-accent) 14%, transparent);
}

.sf-rating {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.sf-rating-btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid rgba(0,0,0,0.15);
	background: transparent;
	color: var(--sf-text);
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}
.sf-rating-btn:hover {
	border-color: var(--sf-accent);
}
.sf-rating-btn.is-selected {
	border-color: var(--sf-accent);
	background: var(--sf-accent);
	color: var(--sf-btn-text);
}

.sf-btn {
	font-family: var(--sf-font);
	font-size: 16px;
	font-weight: 600;
	padding: var(--sf-btn-padding-y, 12px) var(--sf-btn-padding-x, 26px);
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: transform 0.1s ease, opacity 0.15s ease;
}
.sf-btn:hover {
	opacity: 0.92;
}
.sf-btn:active {
	transform: scale(0.98);
}
.sf-btn-primary {
	background: var(--sf-btn-bg);
	color: var(--sf-btn-text);
	box-shadow: 0 1px 2px rgba(18,22,31,0.08), 0 8px 20px -10px rgba(18,22,31,0.3);
}
.sf-btn-primary:hover {
	transform: translateY(-1px);
}

/* Button style variants */
.sf-btn-style-rounded .sf-btn {
	border-radius: 8px;
}
.sf-btn-style-square .sf-btn {
	border-radius: 2px;
}
.sf-btn-style-pill .sf-btn {
	border-radius: 999px;
	padding: var(--sf-btn-padding-y, 12px) var(--sf-btn-padding-x, 30px);
}

.sf-hint {
	margin-top: 18px;
	font-size: 13px;
	opacity: 0.5;
}

.sf-error {
	min-height: 20px;
	color: #e03e3e;
	font-size: 14px;
	margin: -8px 0 14px;
}

.sf-nav {
	position: absolute;
	/* Logical, not physical - under dir="rtl" this correctly mirrors to
	   the left edge instead, matching the Back button and everything
	   else that flips with the text direction setting. */
	inset-inline-end: 20px;
	bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 5;
}
.sf-nav-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: var(--sf-btn-bg);
	color: var(--sf-btn-text);
	font-size: 16px;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.sf-nav-btn:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.sf-nav-btn:active:not(:disabled) {
	transform: translateY(0);
}
.sf-nav-btn:disabled {
	background: rgba(0,0,0,0.12);
	color: var(--sf-text);
	opacity: 0.4;
	box-shadow: none;
	cursor: default;
}

.sf-check {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Width/height both grow from the same padding value so the icon
	   always stays a perfect circle, no matter how much padding is set. */
	width: calc(30px + var(--sf-check-padding, 17px) * 2);
	height: calc(30px + var(--sf-check-padding, 17px) * 2);
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--sf-accent);
	color: var(--sf-btn-text);
	font-size: 30px;
	line-height: 1;
	text-align: center;
}

.sf-score {
	display: inline-block;
	margin-top: 8px;
	padding: 14px 22px;
	border-radius: 10px;
	background: rgba(0,0,0,0.05);
	font-size: 18px;
}

/* ---- Graded results (letter grade, rank, category breakdown, focus tips) ---- */

.sf-thankyou {
	text-align: start;
	/* Guarantees breathing room above/below the results content even
	   when it's tall enough to scroll - relying on .sf-stage's own
	   padding alone left this flush against the top/bottom edges once
	   scrolled (see the "safe center" note on .sf-stage above). */
	padding: 28px 0 48px;
}
.sf-thankyou .sf-heading, .sf-thankyou .sf-subheading {
	text-align: inherit;
}

/*
 * The "Back" button on the results screen shares the exact ".sf-btn
 * .sf-btn-primary" box model used by the Start/Continue buttons (same
 * padding - including the custom Button padding setting, if any - same
 * border-radius per button style, same colors) so it is always a
 * properly proportioned, evenly-padded pill/rounded/square button, never
 * a lopsided one-off. This block only adds the small icon+text gap and
 * the spacing above it.
 */
.sf-back-to-form {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.sf-grade-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 12px;
	padding: 16px 20px;
	border-radius: 14px;
	margin: 4px 0 16px;
	border: 1.5px solid var(--sf-grade-color, var(--sf-accent));
	background: color-mix(in srgb, var(--sf-grade-color, var(--sf-accent)) 9%, var(--sf-bg));
}
.sf-grade-letter {
	font-family: var(--sf-heading-font);
	font-weight: 700;
	font-size: 42px;
	color: var(--sf-grade-color, var(--sf-accent));
	line-height: 1;
}
.sf-grade-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.sf-grade-tier {
	font-weight: 600;
	font-size: 15px;
}
.sf-grade-score {
	font-family: var(--sf-mono-font);
	font-size: 12px;
	opacity: 0.6;
}

.sf-rank-tag {
	margin-bottom: 16px;
}
.sf-rank-pill {
	display: inline-flex;
	font-family: var(--sf-mono-font);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--sf-grade-color, var(--sf-accent));
	padding: 7px 14px;
	border-radius: 100px;
}
.sf-rank-alert {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: color-mix(in srgb, var(--sf-grade-color, #cc4b3f) 12%, var(--sf-bg));
	border: 1.5px solid var(--sf-grade-color, #cc4b3f);
	border-radius: 10px;
	padding: 14px 16px;
}
.sf-rank-alert-mark {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sf-grade-color, #cc4b3f);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sf-rank-alert p {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
}

.sf-result-message {
	font-size: 15px;
	line-height: 1.65;
	opacity: 0.78;
	max-width: 60ch;
	margin: 0 0 26px;
}

.sf-breakdown {
	margin-bottom: 26px;
}
.sf-breakdown-heading, .sf-focus-heading {
	font-family: var(--sf-mono-font);
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	opacity: 0.55;
	font-weight: 600;
	margin: 0 0 14px;
}
.sf-bd-row {
	display: grid;
	grid-template-columns: 140px 1fr 46px;
	align-items: center;
	gap: 12px;
	margin-bottom: 9px;
}
.sf-bd-label {
	font-size: 12.5px;
	opacity: 0.78;
}
.sf-bd-track {
	height: 7px;
	border-radius: 4px;
	background: rgba(0,0,0,0.06);
	overflow: hidden;
}
.sf-bd-fill {
	height: 100%;
	border-radius: 4px;
}
.sf-bd-val {
	font-family: var(--sf-mono-font);
	font-size: 11px;
	opacity: 0.55;
	text-align: end;
}

.sf-focus-box {
	background: rgba(0,0,0,0.03);
	border: 1px solid var(--sf-line);
	border-inline-start: 3px solid var(--sf-grade-color, var(--sf-accent));
	/* Logical equivalents of border-radius: 4px 12px 12px 4px - the
	   sharp corners stay on the accent-border side (start) and the
	   round corners on the opposite side (end), in both LTR and RTL. */
	border-start-start-radius: 4px;
	border-start-end-radius: 12px;
	border-end-end-radius: 12px;
	border-end-start-radius: 4px;
	padding: 18px 20px;
	margin-bottom: 26px;
}
.sf-focus-item {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}
.sf-focus-item:last-child {
	margin-bottom: 0;
}
.sf-focus-mark {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sf-grade-color, var(--sf-accent));
	color: #fff;
	font-family: var(--sf-mono-font);
	font-size: 11px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.sf-focus-item p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	opacity: 0.82;
}

@media (max-width: 480px) {
	.sf-bd-row {
		grid-template-columns: 100px 1fr 40px;
	}
}

.sf-spinner {
	width: 36px;
	height: 36px;
	margin: 0 auto 18px;
	border-radius: 50%;
	border: 3px solid rgba(0,0,0,0.12);
	border-top-color: var(--sf-accent);
	animation: sf-spin 0.8s linear infinite;
}
@keyframes sf-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
	.surveyflow-root {
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}
	.sf-heading {
		font-size: 24px;
	}
	.sf-welcome .sf-heading, .sf-thankyou .sf-heading {
		font-size: 26px;
	}
	.sf-stage {
		padding: 40px 18px 90px;
	}
	.sf-nav {
		inset-inline-end: 14px;
		bottom: 14px;
	}
}