/* ==========================================================================
   SMP-30 School Motivation Profile
   ==========================================================================

   >>> TO MATCH YOUR WEBSITE, EDIT ONLY THE THEME BLOCK BELOW. <<<

   Everything after the theme block is layout and should not need changing.
   All selectors are scoped and doubled (.smp30.smp30) so your theme cannot
   break the questionnaire.

   No external fonts or assets are loaded, so no third-party server ever
   sees a visitor's IP address.
   ========================================================================== */

.smp30.smp30 {

	/* ---- 1. COLOURS -----------------------------------------------------
	   Wired into the Revere design tokens in style.css rather than to fixed
	   hex values, so the questionnaire follows the site automatically and
	   switches with the dark theme along with everything else.

	   Note there is deliberately no --ink here. The site already defines
	   --ink on :root, so leaving it out lets it inherit, and redefining it
	   in terms of itself would be a circular reference.                    */

	--accent:          var(--laurel);      /* buttons, selected answers, bars */
	--accent-strong:   var(--laurel-deep); /* darker shade, used on hover     */
	--accent-contrast: var(--paper);       /* label on top of the accent      */
	--accent-tint:     var(--laurel-wash); /* soft background wash            */

	--ink-soft:        var(--muted);       /* secondary text                  */

	--surface:         var(--card);        /* panel background                */
	--field:           var(--paper-2);     /* unselected answer background    */
	--rule:            var(--line);        /* hairlines                       */

	--counter:         var(--taupe);       /* "pressure" bars in the report   */
	--flag:            var(--gold);        /* gentle notice colour            */
	--flag-tint:       var(--paper-2);

	/* ---- 2. TYPE --------------------------------------------------------
	   Fraunces for the questions and headings, Karla for the interface, the
	   same pairing the rest of the site uses. Both are already loaded by the
	   page, so this file still fetches nothing of its own.                 */

	--font-ui:      var(--body);
	--font-display: var(--display);

	--display-weight: 600;
	--tracking: -0.01em;

	/* ---- 3. SHAPE -------------------------------------------------------
	   Matched to the site's own radii. Buttons are overridden to the full
	   pill shape further down, so they match .btn.                         */

	--radius:       var(--r-sm);
	--radius-panel: var(--r-md);
	--maxwidth:     var(--wrap-narrow);

	/* ===== END OF THEME BLOCK: no need to edit past this point ===== */

	font-family: var(--font-ui);
	color: var(--ink);
	max-width: var(--maxwidth);
	margin-inline: auto;
	line-height: 1.55;
	font-size: 1rem;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Defensive resets against host themes ---------- */

.smp30.smp30 fieldset {
	border: 0;
	background: none;
	min-width: 0;
	padding: 0;
	margin: 0;
}

.smp30.smp30 legend {
	color: inherit;
	padding: 0;
	width: auto;
	max-width: none;
	float: none;
	border: 0;
	background: none;
	font-size: inherit;
	font-weight: inherit;
	text-transform: none;
	letter-spacing: normal;
	line-height: inherit;
}

.smp30.smp30 label {
	color: var(--ink);
	display: flex;
	font-weight: inherit;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
	width: auto;
	float: none;
}

.smp30.smp30 ul,
.smp30.smp30 ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.smp30.smp30 button {
	width: auto;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	box-shadow: none;
	text-decoration: none;
	font-family: inherit;
}

.smp30.smp30 details,
.smp30.smp30 summary {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}

.smp30.smp30 h1,
.smp30.smp30 h2,
.smp30.smp30 h3 {
	color: var(--ink);
	text-transform: none;
	clear: none;
	font-family: var(--font-display);
}

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

.smp30.smp30 p {
	margin: 0 0 1em;
	color: inherit;
}

.smp30.smp30 p:last-child {
	margin-bottom: 0;
}

/* ---------- Intro ---------- */

.smp30.smp30 .smp30-intro-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.3rem;
}

.smp30.smp30 .smp30-chip {
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent);
	background: var(--accent-tint);
	border-radius: 999px;
	padding: 0.34rem 0.85rem;
}

.smp30.smp30 .smp30-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.3rem + 3.2vw, 3.1rem);
	font-weight: var(--display-weight);
	letter-spacing: var(--tracking);
	line-height: 1.08;
	margin: 0 0 0.7rem;
	text-wrap: balance;
}

.smp30.smp30 .smp30-lede {
	font-size: 1.14rem;
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 32rem;
	margin-bottom: 2rem;
}

.smp30.smp30 .smp30-facts {
	margin: 0 0 1.6rem;
	display: grid;
	gap: 1px;
	background: var(--rule);
	border-radius: var(--radius-panel);
	overflow: hidden;
}

.smp30.smp30 .smp30-facts li {
	background: var(--surface);
	padding: 1rem 1.15rem 1rem 2.6rem;
	position: relative;
	font-size: 0.97rem;
	line-height: 1.5;
}

.smp30.smp30 .smp30-facts li::before {
	content: "";
	position: absolute;
	left: 1.15rem;
	top: 1.4rem;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--accent);
}

.smp30.smp30 .smp30-draft {
	font-size: 0.89rem;
	line-height: 1.55;
	color: var(--ink-soft);
	background: var(--field);
	border-radius: var(--radius-panel);
	padding: 0.95rem 1.15rem;
	margin-bottom: 2rem;
	max-width: 34rem;
}

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

.smp30.smp30 .smp30-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font: inherit;
	font-weight: 600;
	background: var(--accent);
	color: var(--accent-contrast);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	padding: 0.8rem 1.7rem;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.smp30.smp30 .smp30-btn:hover {
	background: var(--accent-strong);
	border-color: var(--accent-strong);
	color: var(--accent-contrast);
}

.smp30.smp30 .smp30-btn:active {
	transform: translateY(1px);
}

.smp30.smp30 .smp30-btn:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}

.smp30.smp30 .smp30-btn--quiet {
	background: transparent;
	color: var(--accent);
	border-color: var(--rule);
}

.smp30.smp30 .smp30-btn--quiet:hover {
	background: var(--accent-tint);
	border-color: var(--accent);
	color: var(--accent);
}

/* ---------- Progress ---------- */

.smp30.smp30 .smp30-progress {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--surface);
	padding: 0.85rem 0 0.7rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--rule);
}

.smp30.smp30 .smp30-progress-track {
	display: block;
	height: 5px;
	background: var(--field);
	border-radius: 999px;
	overflow: hidden;
}

.smp30.smp30 .smp30-progress-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--accent);
	border-radius: 999px;
	transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.smp30.smp30 .smp30-progress-text {
	margin: 0.5rem 0 0;
	font-size: 0.83rem;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

/* ---------- Sections and items ---------- */

.smp30.smp30 .smp30-part {
	margin: 0 0 3rem;
}

.smp30.smp30 .smp30-parthead {
	font-family: var(--font-display);
	font-size: 1.45rem;
	font-weight: var(--display-weight);
	letter-spacing: var(--tracking);
	margin: 0 0 0.4rem;
}

.smp30.smp30 .smp30-partnote {
	color: var(--ink-soft);
	font-size: 0.96rem;
	max-width: 33rem;
	margin-bottom: 0.6rem;
}

.smp30.smp30 .smp30-item {
	padding: 1.5rem 0 1.6rem;
	position: relative;
}

/* Drawn at the bottom edge: inside a fieldset, top:0 measures below the
   legend, which would put the rule between the question and the answers. */
.smp30.smp30 .smp30-item::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--rule);
}

.smp30.smp30 .smp30-item:last-of-type::after {
	display: none;
}

.smp30.smp30 .smp30-item--check {
	background: var(--flag-tint);
	border-radius: var(--radius-panel);
	padding-left: 1.15rem;
	padding-right: 1.15rem;
	margin-top: 0.6rem;
}

.smp30.smp30 .smp30-item--check::after {
	display: none;
}

.smp30.smp30 .smp30-legend {
	display: flex;
	gap: 0.85rem;
	margin: 0 0 1rem;
	max-width: 34rem;
	font-size: 1.05rem;
	line-height: 1.45;
}

.smp30.smp30 .smp30-num {
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
	font-size: 0.78rem;
	font-weight: 700;
	padding-top: 0.32rem;
	min-width: 1.5rem;
	letter-spacing: 0.04em;
	transition: color 0.15s ease;
}

.smp30.smp30 .smp30-item--answered .smp30-num {
	color: var(--accent);
}

/* ---------- Response scale ---------- */

.smp30.smp30 .smp30-scale {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-left: 2.35rem;
}

.smp30.smp30 .smp30-opt {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.62rem 0.85rem;
	background: var(--field);
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--radius);
	transition: background 0.13s ease, border-color 0.13s ease;
}

.smp30.smp30 .smp30-opt:hover {
	background: var(--accent-tint);
	border-color: var(--accent-tint);
}

.smp30.smp30 .smp30-opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.smp30.smp30 .smp30-bar {
	flex: none;
	width: 1.15rem;
	border-radius: 1px;
	background: var(--ink-soft);
	opacity: 0.4;
	transition: background 0.13s ease, opacity 0.13s ease;
}

.smp30-opt--1 .smp30-bar { height: 0.34rem; }
.smp30-opt--2 .smp30-bar { height: 0.62rem; }
.smp30-opt--3 .smp30-bar { height: 0.9rem; }
.smp30-opt--4 .smp30-bar { height: 1.18rem; }
.smp30-opt--5 .smp30-bar { height: 1.46rem; }

.smp30.smp30 .smp30-optlabel {
	font-size: 0.94rem;
	transition: color 0.13s ease;
}

.smp30.smp30 .smp30-opt.is-checked {
	background: var(--accent);
	border-color: var(--accent);
}

.smp30.smp30 .smp30-opt.is-checked .smp30-optlabel {
	color: var(--accent-contrast);
	font-weight: 600;
}

.smp30.smp30 .smp30-opt.is-checked .smp30-bar {
	background: var(--accent-contrast);
	opacity: 1;
}

.smp30.smp30 .smp30-opt:has(input:focus-visible) {
	outline: 3px solid var(--ink);
	outline-offset: 1px;
}

@media (min-width: 34rem) {
	.smp30.smp30 .smp30-scale {
		flex-direction: row;
		align-items: stretch;
		gap: 4px;
	}

	.smp30.smp30 .smp30-opt {
		flex: 1;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		gap: 0.5rem;
		min-height: 4.3rem;
		padding: 0.6rem 0.65rem 0.65rem;
	}

	.smp30.smp30 .smp30-optlabel {
		order: 1;
		margin-bottom: auto;
		font-size: 0.8rem;
		line-height: 1.25;
	}

	.smp30.smp30 .smp30-bar {
		order: 2;
		width: 0.9rem;
	}
}

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

.smp30.smp30 .smp30-itemerror,
.smp30.smp30 .smp30-formerror {
	color: #9c2f21;
	font-size: 0.9rem;
	margin: 0.75rem 0 0;
	padding-left: 2.35rem;
}

.smp30.smp30 .smp30-item--missing {
	background: #fdf4f3;
	border-radius: var(--radius-panel);
	padding-left: 1.15rem;
	padding-right: 1.15rem;
}

.smp30.smp30 .smp30-formerror {
	padding: 0.9rem 1.15rem;
	font-weight: 600;
	background: #fdf4f3;
	border-radius: var(--radius-panel);
}

.smp30.smp30 .smp30-notice {
	background: var(--flag-tint);
	border-left: 3px solid var(--flag);
	border-radius: var(--radius);
	padding: 0.9rem 1.15rem;
	font-size: 0.95rem;
}

.smp30.smp30 .smp30-submitwrap {
	padding-top: 0.6rem;
}

/* ---------- Result ---------- */

.smp30.smp30 .smp30-kicker {
	font-size: 0.77rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent);
	margin: 0 0 0.6rem;
}

.smp30.smp30 .smp30-profile {
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.3rem);
	font-weight: var(--display-weight);
	letter-spacing: var(--tracking);
	line-height: 1.05;
	margin: 0 0 1.5rem;
	text-wrap: balance;
}

.smp30.smp30 .smp30-prose {
	font-family: var(--font-display);
	font-size: 1.13rem;
	line-height: 1.68;
	max-width: 33rem;
	color: var(--ink);
}

.smp30.smp30 .smp30-h {
	font-family: var(--font-ui);
	font-size: 0.79rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ink-soft);
	margin: 2.6rem 0 1.1rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var(--rule);
}

.smp30.smp30 .smp30-moves {
	max-width: 34rem;
	display: grid;
	gap: 0.9rem;
	counter-reset: smp30move;
}

.smp30.smp30 .smp30-moves li {
	position: relative;
	padding-left: 2.2rem;
	font-size: 1.01rem;
	line-height: 1.55;
}

.smp30.smp30 .smp30-moves li::before {
	counter-increment: smp30move;
	content: counter(smp30move);
	position: absolute;
	left: 0;
	top: 0.08rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--accent-tint);
	color: var(--accent);
	font-size: 0.78rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Meter panels ---------- */

.smp30.smp30 .smp30-panel {
	background: var(--field);
	border-radius: var(--radius-panel);
	padding: 1.3rem 1.4rem;
	margin: 0 0 1rem;
}

.smp30.smp30 .smp30-panel-title {
	font-size: 0.94rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
}

.smp30.smp30 .smp30-panel-note {
	font-size: 0.86rem;
	color: var(--ink-soft);
	margin: 0 0 1.1rem;
}

.smp30.smp30 .smp30-meter {
	display: grid;
	grid-template-columns: minmax(6rem, 8.5rem) 1fr auto;
	align-items: center;
	gap: 0.9rem;
	padding: 0.42rem 0;
	font-size: 0.87rem;
}

.smp30.smp30 .smp30-meter-label {
	line-height: 1.3;
}

.smp30.smp30 .smp30-meter-track {
	display: block;
	height: 0.62rem;
	background: var(--surface);
	border-radius: 999px;
	overflow: hidden;
}

.smp30.smp30 .smp30-meter-fill {
	display: block;
	height: 100%;
	min-width: 3px;
	border-radius: 999px;
	background: var(--accent);
	transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.smp30.smp30 .smp30-meter--counter .smp30-meter-fill {
	background: var(--counter);
}

.smp30.smp30 .smp30-meter-val {
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
	font-size: 0.81rem;
	min-width: 2rem;
	text-align: right;
}

.smp30.smp30 .smp30-legendrow {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
	margin-top: 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--rule);
	font-size: 0.79rem;
	color: var(--ink-soft);
}

.smp30.smp30 .smp30-key {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.smp30.smp30 .smp30-key::before {
	content: "";
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 2px;
	background: var(--accent);
}

.smp30.smp30 .smp30-key--counter::before {
	background: var(--counter);
}

/* ---------- Callouts ---------- */

.smp30.smp30 .smp30-leverage {
	background: var(--accent-tint);
	border-radius: var(--radius-panel);
	padding: 1.2rem 1.35rem;
	margin: 0 0 0.9rem;
	max-width: 36rem;
	font-size: 0.98rem;
	line-height: 1.6;
}

.smp30.smp30 .smp30-care {
	background: var(--flag-tint);
	border-left: 3px solid var(--flag);
	border-radius: var(--radius);
	padding: 1.15rem 1.35rem;
	margin: 1.5rem 0;
	max-width: 36rem;
	font-size: 0.96rem;
	line-height: 1.6;
}

/* ---------- Disclosure ---------- */

.smp30.smp30 .smp30-details {
	margin: 1.6rem 0 0;
	border: 1px solid var(--rule);
	border-radius: var(--radius-panel);
	padding: 1rem 1.2rem;
}

.smp30.smp30 .smp30-details summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 0.92rem;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.smp30.smp30 .smp30-details summary::-webkit-details-marker {
	display: none;
}

.smp30.smp30 .smp30-details summary::before {
	content: "+";
	color: var(--accent);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1;
}

.smp30.smp30 .smp30-details[open] summary::before {
	content: "\2212";
}

.smp30.smp30 .smp30-details summary:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

.smp30.smp30 .smp30-details > *:not(summary) {
	margin-top: 1.2rem;
}

.smp30.smp30 .smp30-scoregroup {
	font-weight: 700;
	font-size: 0.79rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: 1.4rem 0 0.3rem;
}

.smp30.smp30 .smp30-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 2.6rem 0 1.3rem;
	padding-top: 1.7rem;
	border-top: 1px solid var(--rule);
}

.smp30.smp30 .smp30-privacy {
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 34rem;
}

/* ---------- Motion and print ---------- */

@media (prefers-reduced-motion: reduce) {
	.smp30.smp30 * {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.smp30.smp30 .smp30-actions,
	.smp30.smp30 .smp30-progress {
		display: none;
	}

	.smp30.smp30 {
		max-width: none;
		font-size: 11pt;
	}

	.smp30.smp30 .smp30-details {
		border: 0;
		padding: 0;
	}

	.smp30.smp30 .smp30-panel,
	.smp30.smp30 .smp30-leverage,
	.smp30.smp30 .smp30-care {
		break-inside: avoid;
	}
}

/* ==========================================================================
   CARD MODE
   One question at a time. Applied by JavaScript; if scripts fail the form
   falls back to the single-scroll layout above.
   ========================================================================== */

.smp30.smp30 .smp30-form.is-cards .smp30-part {
	margin: 0;
}

.smp30.smp30 .smp30-form.is-cards .smp30-parthead,
.smp30.smp30 .smp30-form.is-cards .smp30-partnote,
.smp30.smp30 .smp30-form.is-cards .smp30-submitwrap {
	display: none;
}

.smp30.smp30 .smp30-form.is-cards .smp30-item {
	display: none;
}

.smp30.smp30 .smp30-form.is-cards .smp30-item.is-active {
	display: block;
	padding: 0;
	min-height: 20rem;
	animation: smp30in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.smp30.smp30 .smp30-form.is-cards .smp30-item.is-active::after {
	display: none;
}

@keyframes smp30in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.smp30.smp30 .smp30-form.is-cards .smp30-item.is-back {
	animation-name: smp30inback;
}

@keyframes smp30inback {
	from { opacity: 0; transform: translateY(-14px); }
	to   { opacity: 1; transform: none; }
}

/* Question text carries the screen, so it is much larger here. */
.smp30.smp30 .smp30-form.is-cards .smp30-legend {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 1.05rem + 1.7vw, 2rem);
	line-height: 1.3;
	letter-spacing: var(--tracking);
	margin: 0 0 1.7rem;
	max-width: 32rem;
}

.smp30.smp30 .smp30-form.is-cards .smp30-num {
	display: none;
}

.smp30.smp30 .smp30-form.is-cards .smp30-scale {
	padding-left: 0;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 34rem;
}

.smp30.smp30 .smp30-form.is-cards .smp30-opt {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0.9rem;
	min-height: 0;
	padding: 0.95rem 1.1rem;
	border-radius: 10px;
	border: 1px solid var(--rule);
	background: var(--surface);
	font-size: 1.02rem;
}

.smp30.smp30 .smp30-form.is-cards .smp30-opt:hover {
	border-color: var(--accent);
	background: var(--accent-tint);
}

.smp30.smp30 .smp30-form.is-cards .smp30-optlabel {
	order: 0;
	margin: 0;
	font-size: 1.02rem;
}

.smp30.smp30 .smp30-form.is-cards .smp30-bar {
	order: -1;
	width: 1.1rem;
	opacity: 0.55;
}

.smp30.smp30 .smp30-form.is-cards .smp30-opt.is-checked {
	background: var(--accent);
	border-color: var(--accent);
}

.smp30.smp30 .smp30-form.is-cards .smp30-itemerror {
	padding-left: 0;
}

/* Card chrome */

.smp30.smp30 .smp30-cardbar {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 2rem;
}

.smp30.smp30 .smp30-back {
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	border: 1px solid var(--rule);
	background: var(--surface);
	color: var(--ink-soft);
	font-size: 1.1rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.smp30.smp30 .smp30-back:hover:not(:disabled) {
	border-color: var(--accent);
	color: var(--accent);
}

.smp30.smp30 .smp30-back:disabled {
	opacity: 0.35;
	cursor: default;
}

.smp30.smp30 .smp30-back:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}

.smp30.smp30 .smp30-seg {
	flex: 1;
	display: block;
	height: 6px;
	background: var(--field);
	border-radius: 999px;
	overflow: hidden;
}

.smp30.smp30 .smp30-seg i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--accent);
	border-radius: 999px;
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.smp30.smp30 .smp30-seg span {
	flex: 1;
	background: var(--field);
	border-radius: 999px;
	transition: background 0.3s ease;
}

.smp30.smp30 .smp30-seg span.is-done {
	background: var(--accent);
}

.smp30.smp30 .smp30-seg span.is-now {
	background: var(--accent);
	opacity: 0.45;
}

.smp30.smp30 .smp30-cardcount {
	flex: none;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
	font-weight: 600;
	min-width: 3.4rem;
	text-align: right;
}

.smp30.smp30 .smp30-cardsection {
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent);
	margin: 0 0 0.9rem;
}

.smp30.smp30 .smp30-milestone {
	font-size: 0.88rem;
	color: var(--ink-soft);
	margin-top: 1.4rem;
	min-height: 1.3rem;
	animation: smp30fade 0.4s ease both;
}

@keyframes smp30fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.smp30.smp30 .smp30-hint {
	font-size: 0.8rem;
	color: var(--ink-soft);
	margin-top: 2rem;
	opacity: 0.75;
}

/* Section interstitial */

.smp30.smp30 .smp30-interstitial {
	text-align: left;
	padding: 2.5rem 0 1rem;
	animation: smp30in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
	min-height: 20rem;
}

.smp30.smp30 .smp30-interstitial h3 {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.4rem);
	font-weight: var(--display-weight);
	letter-spacing: var(--tracking);
	line-height: 1.15;
	margin: 0 0 0.7rem;
}

.smp30.smp30 .smp30-interstitial p {
	color: var(--ink-soft);
	font-size: 1.05rem;
	max-width: 28rem;
	margin-bottom: 1.8rem;
}

/* Result reveal */

.smp30.smp30 .smp30-reveal {
	animation: smp30in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The question is focused programmatically so screen readers announce each
   new card. The user never tabs to it, so the ring would be noise. */
.smp30.smp30 .smp30-form.is-cards .smp30-legend:focus {
	outline: none;
}

/* Touch devices: no keyboard to tip about, and tap targets need 44px. */
@media (pointer: coarse) {
	.smp30.smp30 .smp30-hint {
		display: none;
	}

	.smp30.smp30 .smp30-back {
		width: 2.9rem;
		height: 2.9rem;
	}
}


/* ==========================================================================
   REVERE COUNSELLING OVERRIDES
   --------------------------------------------------------------------------
   Added on integration. Everything above is the questionnaire as delivered;
   everything below bends it to the house style in style.css. Same selector
   weight as the rules it replaces, so it wins simply by coming later.
   ========================================================================== */

/* Buttons take the site's shape and its call-to-action colour: a gold pill
   with a dark label, the same as .btn--primary. Olive stays the accent for
   chosen answers, the progress bar and the report meters, which is the same
   division of labour the rest of the site uses. */
.smp30.smp30 .smp30-btn {
	font-family: var(--body);
	font-size: var(--t-sm);
	font-weight: 700;
	letter-spacing: .02em;
	border-radius: 999px;
	padding: .8rem 1.6rem;
	background: var(--cta);
	border-color: var(--cta);
	/* Gold is a mid-tone, so the label stays dark in both themes. */
	color: #1B1A16;
	box-shadow: var(--shadow);
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.smp30.smp30 .smp30-btn:hover {
	background: var(--cta-hover);
	border-color: var(--cta-hover);
	color: #1B1A16;
	box-shadow: var(--shadow-lift);
	transform: translateY(-1px);
}

.smp30.smp30 .smp30-btn:active { transform: translateY(1px); }

/* The quiet variant is the site's .btn--ghost. */
.smp30.smp30 .smp30-btn--quiet {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
	box-shadow: none;
}

.smp30.smp30 .smp30-btn--quiet:hover {
	background: var(--laurel-wash);
	border-color: var(--laurel);
	color: var(--laurel-deep);
	box-shadow: none;
}

/* Same focus ring as every other control on the site. */
.smp30.smp30 :focus-visible {
	outline: 2px solid var(--laurel);
	outline-offset: 3px;
}

/* Chips pick up the tracking of the site's eyebrow labels. */
.smp30.smp30 .smp30-chip {
	letter-spacing: .12em;
}

/* The big display type is Fraunces, which sets a little wider than the serif
   it replaced, so the tightest sizes get their line-height back. */
.smp30.smp30 .smp30-title { line-height: 1.06; }
.smp30.smp30 .smp30-parthead { letter-spacing: 0; }

/* The site header is sticky and 72px tall, so the questionnaire's own sticky
   progress bar has to start below it rather than at the top of the viewport,
   and anything the script scrolls to needs the same clearance. */
.smp30.smp30 .smp30-progress {
	top: 73px;
	background: var(--paper);
}

.smp30.smp30,
.smp30.smp30 .smp30-stage {
	scroll-margin-top: 88px;
}

/* Report panels sit on the page ground rather than a card, so they take the
   site's hairline and soft shadow to lift off it. */
.smp30.smp30 .smp30-panel {
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}

/* In the dark theme the site's --card and --paper-2 resolve to the same
   colour, which would leave the report's meter tracks invisible inside their
   panel. A tint of the text colour reads on either ground, in either theme. */
.smp30.smp30 .smp30-meter-track {
	background: color-mix(in srgb, var(--ink) 9%, transparent);
}