/**
 * CreatoScale front-end styles.
 *
 * Everything derives from the custom properties on `.creatoscale`, so a theme can
 * restyle the whole thing by overriding five values. Typography is inherited
 * on purpose — the host theme's fonts flow straight through.
 */

.creatoscale {
	--cs-accent: var(--e-global-color-primary, #2f6f6b);
	--cs-accent-ink: #fff;
	--cs-surface: #fff;
	--cs-surface-muted: rgba(0, 0, 0, 0.03);
	--cs-border: rgba(0, 0, 0, 0.12);
	--cs-radius: 14px;
	--cs-focus: var(--cs-accent);
	--cs-gap: 1rem;
	--cs-crisis: #b3261e;

	font-family: inherit;
	color: inherit;
	max-width: 46rem;
	margin-inline: auto;
}

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

.creatoscale-title {
	margin: 0 0 0.5rem;
	font-family: inherit;
}

.creatoscale-intro {
	margin: 0 0 1.5rem;
	opacity: 0.85;
}

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

/*
 * A sticky bar has to sit on whatever the page background happens to be, and
 * painting it `--cs-surface` drew a hard white band across a cream page. A
 * translucent, blurred, rounded pill reads as a deliberate element on any
 * background; browsers without backdrop-filter keep the flat fallback.
 */
/*
 * Not sticky, and no background of its own. A sticky bar has to paint something
 * opaque to stop content showing through, and whatever it paints is wrong on a
 * page whose background it cannot know — which is how this ended up as a white
 * slab on a cream page, then a white pill on a cream page. Sitting in the flow
 * with no backdrop, it inherits the page and disappears into it, which is what
 * a progress bar should do.
 */
.creatoscale-progress {
	padding: 0 0 0.25rem;
	margin-bottom: 1.25rem;
	background: none;
}

.creatoscale-progress[hidden] {
	display: none;
}

.creatoscale-progress__track {
	height: var(--cs-progress-height, 8px);
	border-radius: 999px;
	background: var(--cs-surface-muted);
	overflow: hidden;
}

/*
 * One answer out of thirty is three per cent, which rounds to nothing you can
 * see. A minimum width keeps the bar legible as a bar rather than an empty
 * groove the moment anything has been answered.
 */
.creatoscale-progress__bar {
	height: 100%;
	width: 0;
	min-width: 0;
	border-radius: 999px;
	background: var(--cs-accent);
	transition: width 240ms ease;
}

/*
 * One of thirty is three per cent, which at the old minimum rendered as a
 * circular dot that read as a bullet point rather than progress. Wide enough
 * to be unmistakably a bar.
 */
.creatoscale-progress__bar[style*="width"]:not([style*="width: 0%"]) {
	min-width: 1.5rem;
}

.creatoscale .creatoscale-progress__text {
	margin: 0.4375rem 0 0;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--cs-ink, inherit);
	opacity: 0.75;
}

/* ------------------------------------------------------------------- Cards */

.creatoscale-questions {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.creatoscale-card {
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	background: var(--cs-surface);
	transition: border-color 200ms ease;
}

.creatoscale-card.is-answered {
	border-color: var(--cs-accent);
}

.creatoscale-card.is-missing {
	border-color: var(--cs-crisis);
}

/*
 * A <legend> is painted straddling its fieldset's top border, which is not
 * what this card wants. Floating it opts out of that rendering entirely and
 * makes it lay out as an ordinary block, keeping the fieldset semantics that
 * group the radios for screen readers. Everything after it clears the float.
 */
.creatoscale-card__q {
	float: left;
	width: 100%;
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	padding: 0;
	margin-bottom: 1rem;
	font-size: var(--cs-question-size, 1.0625rem);
	font-weight: var(--cs-question-weight, 700);
	line-height: 1.4;
}

.creatoscale-card__help,
.creatoscale-card__options {
	clear: both;
}

.creatoscale-card__num {
	flex: none;
	font-variant-numeric: tabular-nums;
	font-size: 0.8125rem;
	opacity: 0.5;
}

.creatoscale-card__help {
	margin: -0.5rem 0 1rem;
	font-size: 0.9375rem;
	opacity: 0.75;
}

/* ----------------------------------------------------------------- Options */

.creatoscale-card__options {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*
 * Each option is a <label>, so a theme's form-label colour lands on it
 * directly — which is why these read as washed-out grey next to the question.
 * Claim the body colour back explicitly, scoped hard enough to win.
 */
.creatoscale .creatoscale-option,
.creatoscale .creatoscale-contact__label {
	color: var(--cs-ink, inherit);
}

.creatoscale-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--cs-border);
	border-radius: calc(var(--cs-radius) - 4px);
	cursor: pointer;
	line-height: 1.35;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.creatoscale-option:hover {
	border-color: var(--cs-accent);
}

/* The real input stays in the accessibility tree; only its paint is removed. */
.creatoscale-option__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.creatoscale-option__marker {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--cs-border);
	border-radius: 50%;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.creatoscale-option__input:checked ~ .creatoscale-option__marker {
	border-color: var(--cs-accent);
	box-shadow: inset 0 0 0 4px var(--cs-accent);
}

/* `is-selected` is set by the script; `:has()` covers the no-JS case on
   browsers that support it. Either way the marker above already shows state. */
.creatoscale-option.is-selected,
.creatoscale-option:has(.creatoscale-option__input:checked) {
	border-color: var(--cs-accent);
	background: var(--cs-surface-muted);
}

/* Focus lives on the label, because the input itself is visually hidden. */
.creatoscale-option:has(.creatoscale-option__input:focus-visible) {
	outline: 3px solid var(--cs-focus);
	outline-offset: 2px;
}

.creatoscale-option__label {
	flex: 1 1 auto;
}

/* ----------------------------------------------------------------- Actions */

.creatoscale-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.creatoscale-actions__status {
	margin: 0;
	flex: 1 1 12rem;
	font-size: 0.9375rem;
	opacity: 0.8;
}

.creatoscale-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: calc(var(--cs-radius) - 4px);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 160ms ease, background-color 160ms ease;
}

.creatoscale-button:focus-visible {
	outline: 3px solid var(--cs-focus);
	outline-offset: 2px;
}

.creatoscale-button--primary {
	background: var(--cs-accent);
	color: var(--cs-accent-ink);
}

.creatoscale-button--primary:hover {
	filter: brightness(0.92);
}

.creatoscale-button--secondary {
	background: transparent;
	border-color: var(--cs-accent);
	color: var(--cs-accent);
}

.creatoscale-button--secondary:hover {
	background: var(--cs-accent);
	color: var(--cs-accent-ink);
}

/*
 * A quiet button sat on a white card with only a hairline border and inherited
 * body colour, which read as disabled rather than secondary. A muted fill and a
 * full-strength label give it enough presence to look deliberate.
 */
.creatoscale-button--quiet {
	background: var(--cs-surface-muted);
	border-color: var(--cs-border);
	color: inherit;
	font-weight: 600;
}

.creatoscale-button--quiet:hover {
	border-color: var(--cs-accent);
	color: var(--cs-accent);
}

.creatoscale-button--crisis {
	background: var(--cs-crisis);
	color: #fff;
}

.creatoscale-button--crisis:hover {
	filter: brightness(0.92);
}

.creatoscale-button:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.creatoscale-button:active {
		transform: none;
	}
}

.creatoscale-button[disabled],
.creatoscale-button[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ Alerts */

.creatoscale-alert {
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--cs-crisis);
	border-radius: calc(var(--cs-radius) - 4px);
	background: rgba(179, 38, 30, 0.06);
}

.creatoscale-notice {
	padding: 1rem;
	border: 1px dashed var(--cs-border);
	border-radius: var(--cs-radius);
}

/* ------------------------------------------------------- Gate and crisis */

.creatoscale-gate {
	padding: 1.75rem;
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	background: var(--cs-surface);
}

.creatoscale-gate__heading {
	margin: 0 0 0.75rem;
}

.creatoscale-gate__body {
	margin-bottom: 1.5rem;
}

.creatoscale-gate__actions,
.creatoscale-result__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* The band's call to action, on its own row above the housekeeping buttons. */
.creatoscale-result__cta {
	margin: 1.5rem 0 0.75rem;
}

.creatoscale-button--block {
	display: flex;
	width: 100%;
	min-height: 3.5rem;
	font-size: 1.0625rem;
}

/*
 * Three buttons that mean equally little next to the call to action, so they
 * share the row evenly rather than being sized by their labels.
 */
.creatoscale-result__actions .creatoscale-button {
	flex: 1 1 8rem;
}

/* ------------------------------------------------------------ Contact form */

.creatoscale-contact {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	margin: 1.5rem 0 0;
}

.creatoscale-contact__field {
	display: flex;
	flex-direction: column;
	gap: 0.4375rem;
	margin: 0;
}

.creatoscale-contact__label {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

/*
 * Scoped under `.creatoscale` rather than styled bare. Themes style form
 * controls aggressively and a single class would lose to most of them —
 * Woostify included, which is where these were rendering as raw browser
 * defaults.
 */
.creatoscale .creatoscale-contact__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--cs-border);
	border-radius: calc(var(--cs-radius) - 4px);
	background: var(--cs-surface);
	color: inherit;
	font: inherit;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.creatoscale .creatoscale-contact__input::placeholder {
	color: inherit;
	opacity: 0.45;
}

.creatoscale .creatoscale-contact__input:hover {
	border-color: var(--cs-accent);
}

.creatoscale .creatoscale-contact__input:focus,
.creatoscale .creatoscale-contact__input:focus-visible {
	outline: none;
	border-color: var(--cs-accent);
	box-shadow: 0 0 0 3px var(--cs-focus);
}

.creatoscale-contact__field.is-invalid .creatoscale-contact__input {
	border-color: var(--cs-crisis);
}

.creatoscale-contact__field.is-invalid .creatoscale-contact__input:focus {
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.25);
}

.creatoscale-contact__error {
	font-size: 0.875rem;
	color: var(--cs-crisis);
}

.creatoscale-contact__notice {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	opacity: 0.7;
}

.creatoscale-contact__actions {
	display: flex;
	margin: 0;
}

.creatoscale-crisis {
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--cs-crisis);
	border-left-width: 5px;
	border-radius: var(--cs-radius);
	background: rgba(179, 38, 30, 0.05);
}

.creatoscale-crisis__heading {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.creatoscale-crisis__actions {
	margin: 1rem 0 0;
}

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

.creatoscale-result {
	padding: 1.75rem;
	border: 1px solid var(--cs-border);
	border-top: 5px solid var(--cs-accent);
	border-radius: var(--cs-radius);
	background: var(--cs-surface);
}

.creatoscale-result--high {
	border-top-color: var(--cs-crisis);
}

/*
 * The score is the headline now, so it is no longer a small uppercase label
 * above the real content — it is the largest thing on the card, with the
 * maximum sitting quietly beside it for scale.
 */
.creatoscale-result__heading {
	margin: 0 0 0.25rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
	opacity: 1;
}

.creatoscale-result__outof {
	display: inline-block;
	margin-left: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	opacity: 0.55;
	white-space: nowrap;
}

.creatoscale-result__band {
	margin: 0 0 1rem;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.25;
}

.creatoscale-result__byline {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--cs-border);
	font-size: 0.875rem;
	opacity: 0.7;
}

.creatoscale-result__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1.5rem 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--cs-border);
}

.creatoscale-result__meta-item dt {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.6;
}

.creatoscale-result__meta-item dd {
	margin: 0.25rem 0 0;
	font-weight: 600;
}

.creatoscale-empty {
	padding: 1.75rem;
	border: 1px dashed var(--cs-border);
	border-radius: var(--cs-radius);
	text-align: center;
}

.creatoscale-empty__heading {
	margin: 0 0 0.5rem;
}

.creatoscale-empty__body {
	margin: 0 0 1.5rem;
	opacity: 0.85;
}

/* ----------------------------------------------------------------- History */

.creatoscale--history {
	margin-top: 2.5rem;
}

.creatoscale-history__table {
	width: 100%;
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}

.creatoscale-history__table th,
.creatoscale-history__table td {
	padding: 0.75rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid var(--cs-border);
	white-space: nowrap;
}

/* -------------------------------------------------------------- Responsive */

@media (max-width: 30rem) {

	.creatoscale-card,
	.creatoscale-gate,
	.creatoscale-result {
		padding: 1rem;
	}

	.creatoscale-result__band {
		font-size: 1.375rem;
	}

	.creatoscale-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.creatoscale-actions .creatoscale-button,
	.creatoscale-gate__actions .creatoscale-button,
	.creatoscale-result__actions .creatoscale-button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.creatoscale *,
	.creatoscale *::before,
	.creatoscale *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------- Print */

/*
 * The downloaded copy.
 *
 * The visitor triggers the browser's own print dialogue, which is where "Save
 * as PDF" lives. That keeps the real theme fonts, the real logo and the real
 * colours without vendoring a PDF library into the plugin.
 *
 * Everything on the page other than the result itself is hidden. The result is
 * lifted out of the document flow so a themed wrapper cannot drag it down the
 * first page or clip it.
 */

.creatoscale-print-header,
.creatoscale-print-footer {
	display: none;
}

@media print {

	/*
	 * The script moves the result to be a direct child of <body> before
	 * printing, so hiding its siblings is enough. Everything left is in normal
	 * flow, which is what lets a long result break across pages — the previous
	 * approach took it out of flow and silently lost everything after page one.
	 */
	body.creatoscale-printing > *:not(.creatoscale-result) {
		display: none !important;
	}

	body.creatoscale-printing .creatoscale-result[data-creatoscale-printable] {
		margin: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: none;
	}

	body.creatoscale-printing .creatoscale-actions,
	body.creatoscale-printing [data-creatoscale-print],
	body.creatoscale-printing .creatoscale-result__actions {
		display: none !important;
	}

	/*
	 * No booking button on paper. Nobody taps a printout, and the footer
	 * already carries the practice's contact details — which is how someone
	 * holding it actually gets in touch. A dead button and a URL underneath it
	 * were just noise above that.
	 */
	body.creatoscale-printing .creatoscale-result__cta {
		display: none !important;
	}

	.creatoscale-print-header,
	.creatoscale-print-footer {
		display: block;
	}

	.creatoscale-print-header {
		margin-bottom: 1.25rem;
		padding-bottom: 0.75rem;
		border-bottom: 1px solid currentColor;
	}

	/*
	 * Constrained by height, not width. A wide logo and a tall one are the same
	 * width and wildly different sizes on the page otherwise.
	 */
	.creatoscale-print-header__logo {
		max-height: 3rem;
		max-width: 11rem;
		width: auto;
		height: auto;
	}

	.creatoscale-print-header__name {
		font-size: 1.25rem;
		font-weight: 600;
		margin: 0;
	}

	/*
	 * Pinned to the foot of the page rather than left floating in whatever gap
	 * the content happens to leave. A one-band result is short, and the
	 * disclaimer was ending up marooned in the middle of an empty sheet.
	 */
	.creatoscale-print-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0;
		padding-top: 0.75rem;
		border-top: 1px solid currentColor;
		font-size: 0.75rem;
	}

	body.creatoscale-printing .creatoscale-result[data-creatoscale-printable] {
		padding-bottom: 5rem;
	}

	/* Keep the score, band and description together on one sheet. */
	body.creatoscale-printing .creatoscale-result__header,
	body.creatoscale-printing .creatoscale-result__band,
	body.creatoscale-printing .creatoscale-result__byline {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	body.creatoscale-printing .creatoscale-result__band {
		margin-bottom: 0.75rem;
	}

	body.creatoscale-printing .creatoscale-result__description {
		margin-bottom: 1rem;
	}

	.creatoscale-print-footer__disclaimer {
		margin: 0 0 0.5rem;
	}

	.creatoscale-print-footer__sep {
		opacity: 0.5;
	}

	.creatoscale-print-footer__contact {
		margin: 0;
		font-weight: 600;
	}

	/* Buttons are not useful on paper. */
	.creatoscale-result__actions {
		display: none !important;
	}

	.creatoscale-result {
		break-inside: avoid;
	}
}