/**
 * JMeks Exit Scorecard.
 *
 * Two cards, one showing at a time: the levers (a few to a step) and the
 * result. A lever is a header row (number, name, the score once rated) over a
 * rule, and a panel that opens by animating its grid row from 0fr to 1fr, as
 * the JMeks accordions do. jmeks-exit-scorecard.js sets data-state on each
 * lever: open, done, next (the one to rate) or locked.
 *
 * Buttons are real buttons; Hello Elementor paints every button pink with a
 * border, so each one here takes that back, :hover and :focus included.
 *
 * Knobs (the panel sets most of them):
 *   --jmeks-esc-ink                 text, rules, buttons (primary)
 *   --jmeks-esc-muted               numbers, context, notes (ink at 60%)
 *   --jmeks-esc-card-bg / -radius
 *   --jmeks-esc-rule-color / -width
 *   --jmeks-esc-row-pad             above and below a lever name (14px)
 *   --jmeks-esc-desc-max            description width (380px)
 *   --jmeks-esc-scale-width         Weak ... Strong width (420px)
 *   --jmeks-esc-tile                a score tile's width and height (44px)
 *   --jmeks-esc-picked              the chosen tile's fill
 *   --jmeks-esc-duration            open / close (350ms)
 *   --jmeks-esc-btn-hover-bg / -btn-hover-color
 *   --jmeks-esc-cta-bg / -color / -hover-bg / -hover-color
 *   --jmeks-esc-ring-size / -ring-width / -bar-height
 *   --jmeks-esc-weak / -mid / -strong   score colours
 *   --jmeks-esc-band                the result's band colour (set by the script)
 */

.elementor-widget-jmeks_exit_scorecard {
	width: 100%;
}

.jmeks-esc {
	--_ink: var( --jmeks-esc-ink, var( --e-global-color-primary, #05001c ) );
	/* 60% of the ink on the card is 5.5:1, past WCAG AA's 4.5:1 for small text. */
	--_muted: var( --jmeks-esc-muted, color-mix( in srgb, var( --_ink ) 60%, transparent ) );
	--_rule: var( --jmeks-esc-rule-color, var( --_ink ) );
	--_dur: var( --jmeks-esc-duration, 350ms );
	--_ease: cubic-bezier( 0.4, 0, 0.2, 1 );
	color: var( --_ink );
}

.jmeks-esc__card {
	box-sizing: border-box;
	padding: 48px 60px;
	border-radius: var( --jmeks-esc-radius, 24px );
	background: var( --jmeks-esc-card-bg, var( --e-global-color-accent, #f9f9f9 ) );
}

.jmeks-esc__card[hidden],
.jmeks-esc__lever[hidden] {
	display: none;
}

.jmeks-esc p {
	margin: 0;
}

/* ------------------------------------------------------------ levers */

.jmeks-esc__levers {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The lever name's tag (h3 by default) takes nothing from the site's heading
 * styles: the kit writes `.elementor-kit-N h3` (a class and a tag), so two
 * classes here.
 */
.jmeks-esc .jmeks-esc__head {
	margin: 0;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.jmeks-esc .jmeks-esc__trigger,
.jmeks-esc .jmeks-esc__trigger:hover,
.jmeks-esc .jmeks-esc__trigger:focus,
.jmeks-esc .jmeks-esc__trigger:disabled {
	display: flex;
	align-items: baseline;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var( --jmeks-esc-row-pad, 14px ) 0;
	border: 0;
	border-bottom: var( --jmeks-esc-rule-width, 1px ) solid var( --_rule );
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: start;
	opacity: 1;
	cursor: default;
}

.jmeks-esc [data-state="done"] .jmeks-esc__trigger {
	cursor: pointer;
}

.jmeks-esc [data-state="done"] .jmeks-esc__trigger:hover .jmeks-esc__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jmeks-esc .jmeks-esc__trigger:focus-visible {
	outline: 2px solid var( --_ink );
	outline-offset: 4px;
}

.jmeks-esc__num {
	flex: none;
	min-width: 1.8em;
	color: var( --_muted );
	font-variant-numeric: tabular-nums;
}

.jmeks-esc__name {
	flex: 1;
	min-width: 0;
}

.jmeks-esc__chosen {
	flex: none;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* The panel: 0fr to 1fr, the browser works out the height. */
.jmeks-esc__panel,
.jmeks-esc__context {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition:
		grid-template-rows var( --_dur ) var( --_ease ),
		visibility 0s linear var( --_dur );
}

.jmeks-esc [data-state="open"] > .jmeks-esc__panel,
.jmeks-esc .jmeks-esc__more[aria-expanded="true"] + .jmeks-esc__context {
	grid-template-rows: 1fr;
	visibility: visible;
	transition:
		grid-template-rows var( --_dur ) var( --_ease ),
		visibility 0s;
}

.jmeks-esc__clip {
	min-height: 0;
	overflow: hidden;
}

.jmeks-esc__body {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px;
	padding: 16px 0 28px;
}

.jmeks-esc__text {
	flex: 0 1 var( --jmeks-esc-desc-max, 380px );
	min-width: 0;
}

.jmeks-esc .jmeks-esc__more,
.jmeks-esc .jmeks-esc__more:hover,
.jmeks-esc .jmeks-esc__more:focus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --_muted );
	cursor: pointer;
}

.jmeks-esc .jmeks-esc__more:hover {
	color: var( --_ink );
}

.jmeks-esc .jmeks-esc__more:focus-visible {
	outline: 2px solid var( --_ink );
	outline-offset: 3px;
}

.jmeks-esc__context-text {
	padding-top: 8px;
	color: var( --_muted );
}

/* ------------------------------------------------------ rating scale */

.jmeks-esc__scale {
	flex: 0 1 var( --jmeks-esc-scale-width, 420px );
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * "Your rating" twice: the legend names the scale for screen readers (and
 * shows above it on phones); the copy in the open lever's header row is the
 * visible one elsewhere, a column heading lined up with Weak.
 */
.jmeks-esc__rating-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.jmeks-esc__col {
	display: none;
	flex: 0 1 var( --jmeks-esc-scale-width, 420px );
	color: var( --_muted );
	text-align: start;
}

.jmeks-esc [data-state="open"] .jmeks-esc__col {
	display: block;
}

/*
 * Each score is a tile, the number inside a square outline, so it reads as
 * something to press. Picked, the tile fills. Weak and Strong hold the edges;
 * the tiles stay together in the middle rather than spreading out.
 */
.jmeks-esc__track {
	display: grid;
	grid-template-columns: 1fr auto auto auto 1fr;
	align-items: center;
	gap: 8px;
}

.jmeks-esc__end {
	line-height: 1;
}

.jmeks-esc__end:first-child {
	justify-self: start;
}

.jmeks-esc__end:last-child {
	justify-self: end;
}

.jmeks-esc__option {
	position: relative;
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: var( --jmeks-esc-tile, 44px );
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 1px solid color-mix( in srgb, var( --_ink ) 35%, transparent );
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 200ms var( --_ease ), border-color 200ms var( --_ease );
}

.jmeks-esc__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.jmeks-esc__value {
	color: var( --_ink );
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: color 200ms var( --_ease );
}

.jmeks-esc__option:hover {
	border-color: var( --jmeks-esc-picked, var( --_ink ) );
}

.jmeks-esc__option:has( .jmeks-esc__input:checked ) {
	border-color: var( --jmeks-esc-picked, var( --_ink ) );
	background: var( --jmeks-esc-picked, var( --_ink ) );
	animation: jmeks-esc-tile 320ms var( --_ease );
}

.jmeks-esc__option:has( .jmeks-esc__input:checked ) .jmeks-esc__value {
	color: var( --jmeks-esc-card-bg, var( --e-global-color-accent, #f9f9f9 ) );
}

.jmeks-esc__option:has( .jmeks-esc__input:focus-visible ) {
	outline: 2px solid var( --_ink );
	outline-offset: 2px;
}

/* -------------------------------------------------------- navigation */

.jmeks-esc__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
}

.jmeks-esc__nav-end {
	display: inline-flex;
	align-items: center;
	gap: 28px;
	margin-inline-start: auto;
}

.jmeks-esc__count {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * No margin here: this rule also matches :focus, and a margin reset on focus
 * made a spaced button (the CTA) jump as it was pressed, so the release landed
 * off it and the click was lost. The margin is set once, below, without :focus.
 */
.jmeks-esc .jmeks-esc__btn,
.jmeks-esc .jmeks-esc__btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border: 1px solid var( --_ink );
	border-radius: 999px;
	background: transparent;
	color: var( --_ink );
	font: inherit;
	line-height: 21px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.jmeks-esc .jmeks-esc__btn {
	margin: 0;
}

.jmeks-esc .jmeks-esc__btn[hidden],
.jmeks-esc a.jmeks-esc__btn[hidden] {
	display: none;
}

.jmeks-esc .jmeks-esc__btn:hover {
	border-color: var( --jmeks-esc-btn-hover-bg, var( --_ink ) );
	background: var( --jmeks-esc-btn-hover-bg, var( --_ink ) );
	color: var( --jmeks-esc-btn-hover-color, var( --e-global-color-accent, #f9f9f9 ) );
}

.jmeks-esc .jmeks-esc__btn[aria-disabled="true"],
.jmeks-esc .jmeks-esc__btn[aria-disabled="true"]:hover {
	border-color: var( --_ink );
	background: transparent;
	color: var( --_ink );
	opacity: 0.35;
	cursor: not-allowed;
}

.jmeks-esc .jmeks-esc__btn:focus-visible {
	outline: 2px solid var( --_ink );
	outline-offset: 3px;
}

.jmeks-esc .jmeks-esc__btn--solid,
.jmeks-esc .jmeks-esc__btn--solid:focus {
	border-color: var( --jmeks-esc-cta-bg, var( --_ink ) );
	background: var( --jmeks-esc-cta-bg, var( --_ink ) );
	color: var( --jmeks-esc-cta-color, var( --e-global-color-accent, #f9f9f9 ) );
}

.jmeks-esc .jmeks-esc__btn--finish,
.jmeks-esc .jmeks-esc__btn--finish:focus,
.jmeks-esc .jmeks-esc__btn--finish[aria-disabled="true"],
.jmeks-esc .jmeks-esc__btn--finish[aria-disabled="true"]:hover {
	border-color: var( --jmeks-esc-finish-bg, var( --_ink ) );
	background: var( --jmeks-esc-finish-bg, var( --_ink ) );
	color: var( --jmeks-esc-finish-color, var( --e-global-color-accent, #f9f9f9 ) );
}

.jmeks-esc .jmeks-esc__btn--finish:not( [aria-disabled="true"] ):hover {
	border-color: var( --jmeks-esc-finish-hover-bg, var( --e-global-color-secondary, #ded57d ) );
	background: var( --jmeks-esc-finish-hover-bg, var( --e-global-color-secondary, #ded57d ) );
	color: var( --jmeks-esc-finish-hover-color, var( --_ink ) );
}

.jmeks-esc .jmeks-esc__btn--solid:hover {
	border-color: var( --jmeks-esc-cta-hover-bg, var( --e-global-color-secondary, #ded57d ) );
	background: var( --jmeks-esc-cta-hover-bg, var( --e-global-color-secondary, #ded57d ) );
	color: var( --jmeks-esc-cta-hover-color, var( --_ink ) );
}

/* ----------------------------------------------------------- results */

.jmeks-esc__results:focus {
	outline: none;
}

.jmeks-esc__score {
	display: flex;
	align-items: center;
	gap: 56px;
}

.jmeks-esc__ring {
	position: relative;
	flex: none;
	width: var( --jmeks-esc-ring-size, 180px );
	aspect-ratio: 1;
}

.jmeks-esc__ring svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform: rotate( -90deg );
}

.jmeks-esc__ring circle {
	fill: none;
	stroke-width: var( --jmeks-esc-ring-width, 3px );
	vector-effect: non-scaling-stroke;
}

.jmeks-esc__ring-track {
	stroke: color-mix( in srgb, var( --_ink ) 12%, transparent );
}

.jmeks-esc__ring-fill {
	stroke: var( --jmeks-esc-band, var( --_ink ) );
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

.jmeks-esc__ring-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
}

.jmeks-esc__total {
	font-size: calc( var( --jmeks-esc-ring-size, 180px ) * 0.24 );
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.jmeks-esc__max {
	color: var( --_muted );
	font-size: 0.45em;
}

.jmeks-esc__score-label {
	color: var( --_muted );
	font-size: 13px;
}

.jmeks-esc__verdict {
	flex: 1;
	min-width: 0;
	max-width: 560px;
}

/* The band's square, like the site's eyebrow squares. */
.jmeks-esc__status {
	display: flex;
	align-items: center;
	gap: 14px;
}

.jmeks-esc__status::before {
	content: "";
	flex: none;
	width: 0.28em;
	height: 0.28em;
	background: var( --jmeks-esc-band, var( --_ink ) );
}

/* The score %, a tag in the band's colour at the start of the summary. */
.jmeks-esc__pct {
	display: inline-block;
	margin-inline-end: 10px;
	padding: 2px 10px;
	border: 1px solid var( --jmeks-esc-band, var( --_ink ) );
	border-radius: 999px;
	background: color-mix( in srgb, var( --jmeks-esc-band, var( --_ink ) ) 15%, transparent );
	color: var( --_ink );
	font-weight: 500;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	vertical-align: baseline;
}

.jmeks-esc__summary {
	margin-top: 20px;
}

.jmeks-esc__summary p + p,
.jmeks-esc__valuation p + p {
	margin-top: 0.8em;
}

.jmeks-esc__section {
	margin-top: 48px;
	padding-top: 40px;
	border-top: var( --jmeks-esc-rule-width, 1px ) solid color-mix( in srgb, var( --_rule ) 20%, transparent );
}

.jmeks-esc .jmeks-esc__heading {
	margin: 0 0 24px;
	color: inherit;
}

.jmeks-esc__valuation {
	max-width: 720px;
}

/* Gap bars: name, bar, score; a weak lever's note underneath. */
.jmeks-esc__gaps {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jmeks-esc__gap {
	--_score: var( --jmeks-esc-mid, #c9a227 );
	display: grid;
	grid-template-columns: minmax( 0, 240px ) minmax( 0, 1fr ) 3em;
	grid-template-areas: "name bar score" "note note note";
	align-items: center;
	column-gap: 24px;
}

.jmeks-esc__gap-name { grid-area: name; }
.jmeks-esc__bar { grid-area: bar; }
.jmeks-esc__gap-score { grid-area: score; }
.jmeks-esc__gap-note { grid-area: note; }

.jmeks-esc__gap--weak {
	--_score: var( --jmeks-esc-weak, #c8553d );
}

.jmeks-esc__gap--strong {
	--_score: var( --jmeks-esc-strong, #1e9e5a );
}

.jmeks-esc__bar {
	display: block;
	height: var( --jmeks-esc-bar-height, 4px );
	background: color-mix( in srgb, var( --_ink ) 10%, transparent );
}

.jmeks-esc__bar-fill {
	display: block;
	width: var( --jmeks-esc-fill, 0% );
	height: 100%;
	background: var( --_score );
	transform-origin: left center;
}

.jmeks-esc__results.is-shown .jmeks-esc__bar-fill {
	animation: jmeks-esc-bar 900ms var( --_ease ) both;
}

.jmeks-esc__gap-score {
	color: var( --_score );
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	text-align: end;
}

.jmeks-esc__gap-note {
	margin-top: 4px !important;
	color: var( --_muted );
	font-size: 0.9em;
}

.jmeks-esc__cta-text {
	max-width: 560px;
}

.jmeks-esc .jmeks-esc__cta .jmeks-esc__btn {
	margin-top: 24px;
}

.jmeks-esc__note {
	margin-top: 12px !important;
	color: var( --_muted );
	font-size: 13px;
}

.jmeks-esc .jmeks-esc__retake,
.jmeks-esc .jmeks-esc__retake:hover,
.jmeks-esc .jmeks-esc__retake:focus {
	display: inline-block;
	margin: 40px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --_muted );
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.jmeks-esc .jmeks-esc__retake:hover {
	color: var( --_ink );
}

/* -------------------------------------------------------- animations */

.jmeks-esc__quiz.is-entering .jmeks-esc__lever:not( [hidden] ) {
	animation: jmeks-esc-in 450ms var( --_ease ) both;
}

.jmeks-esc__quiz.is-entering .jmeks-esc__lever:not( [hidden] ):nth-child( 4n + 2 ) { animation-delay: 50ms; }
.jmeks-esc__quiz.is-entering .jmeks-esc__lever:not( [hidden] ):nth-child( 4n + 3 ) { animation-delay: 100ms; }
.jmeks-esc__quiz.is-entering .jmeks-esc__lever:not( [hidden] ):nth-child( 4n + 4 ) { animation-delay: 150ms; }

.jmeks-esc__results.is-shown {
	animation: jmeks-esc-in 500ms var( --_ease ) both;
}

@keyframes jmeks-esc-in {
	from {
		opacity: 0;
		transform: translateY( 12px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes jmeks-esc-tile {
	0% { transform: scale( 0.9 ); }
	60% { transform: scale( 1.06 ); }
	100% { transform: scale( 1 ); }
}

@keyframes jmeks-esc-bar {
	from { transform: scaleX( 0 ); }
	to { transform: scaleX( 1 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.jmeks-esc__panel,
	.jmeks-esc__context,
	.jmeks-esc [data-state="open"] > .jmeks-esc__panel,
	.jmeks-esc .jmeks-esc__more[aria-expanded="true"] + .jmeks-esc__context,
	.jmeks-esc__option,
	.jmeks-esc__value {
		transition: none;
	}

	.jmeks-esc__quiz.is-entering .jmeks-esc__lever,
	.jmeks-esc__results.is-shown,
	.jmeks-esc__results.is-shown .jmeks-esc__bar-fill,
	.jmeks-esc__option:has( .jmeks-esc__input:checked ) {
		animation: none;
	}
}

/* ------------------------------------------------------------ phones */

@media ( max-width: 767px ) {
	.jmeks-esc__card {
		padding: 28px 20px;
	}

	.jmeks-esc__body {
		flex-direction: column;
		gap: 24px;
		padding-bottom: 24px;
	}

	.jmeks-esc__text,
	.jmeks-esc__scale {
		flex: none;
		width: 100%;
	}

	.jmeks-esc__rating-label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		float: left;
		margin-bottom: 14px;
		padding: 0;
		color: var( --_muted );
		white-space: normal;
	}

	.jmeks-esc [data-state="open"] .jmeks-esc__col {
		display: none;
	}

	.jmeks-esc__track {
		gap: 16px;
		clear: both;
		padding-bottom: 16px;
		border-bottom: var( --jmeks-esc-rule-width, 1px ) solid color-mix( in srgb, var( --_rule ) 25%, transparent );
	}

	.jmeks-esc__nav-end {
		gap: 16px;
	}

	/* Counter first, Next last, as the mobile design has it. */
	.jmeks-esc__count {
		order: -1;
	}

	.jmeks-esc__score {
		flex-direction: column;
		align-items: center;
		gap: 28px;
	}

	.jmeks-esc__verdict {
		width: 100%;
	}

	.jmeks-esc__status {
		justify-content: center;
		text-align: center;
	}

	.jmeks-esc__section {
		margin-top: 36px;
		padding-top: 32px;
	}

	.jmeks-esc__gaps {
		gap: 18px;
	}

	.jmeks-esc__gap {
		grid-template-columns: minmax( 0, 1fr ) auto;
		grid-template-areas: "name score" "bar bar" "note note";
		row-gap: 8px;
	}
}