/*
 * Style Quiz, front end.
 *
 * Everything is scoped under .bsq so the theme cannot bleed in and the plugin
 * cannot bleed out. Colours come from four custom properties set inline on the
 * root element, and every other shade is mixed from those, so dark mode and
 * the admin colour pickers stay in step with one another.
 *
 * Fallback values are declared before each color-mix() so browsers without
 * color-mix() still get a sensible palette.
 */

.bsq {
	/* Light palette. Defaults are the beautyliestruth.com global palette. */
	--c-accent: var(--bsq-accent, #1e73be);
	--c-bg: var(--bsq-bg, #f7f8f9);
	--c-surface: var(--bsq-surface, #ffffff);
	--c-text: var(--bsq-text, #2a2e30);
	--c-on: #ffffff;
	--c-muted: #5c6164;
	--c-muted: color-mix(in srgb, var(--c-text) 72%, var(--c-bg));
	--c-line: #e0e3e5;
	--c-line: color-mix(in srgb, var(--c-text) 15%, var(--c-bg));
	/*
	 * Boundaries of things you can click get their own shade. WCAG 2.2 asks
	 * for 3:1 on the edge that identifies a control, and a hairline mixed for
	 * looks alone does not reach it. --c-line stays soft for dividers and
	 * panel edges, which carry no such duty.
	 */
	--c-edge: #7f8486;
	--c-edge: color-mix(in srgb, var(--c-text) 56%, var(--c-bg));
	--c-tint: #eaf1f8;
	--c-tint: color-mix(in srgb, var(--c-accent) 9%, var(--c-surface));
	--c-face: #eceef0;
	--c-face: color-mix(in srgb, var(--c-text) 8%, var(--c-bg));

	/*
	 * Dark palette, worked out from the same four settings but held in its own
	 * names. Nothing reads these until a theme class maps them across, so a
	 * quiz set to light stays light whatever the visitor's device is doing.
	 */
	--d-accent: #8ebde8;
	--d-accent: color-mix(in srgb, var(--bsq-accent, #1e73be) 45%, #ffffff);
	--d-bg: #191b1c;
	--d-bg: color-mix(in srgb, var(--bsq-text, #2a2e30) 96%, #000000);
	--d-surface: #3e4245;
	--d-surface: color-mix(in srgb, var(--bsq-text, #2a2e30) 88%, #ffffff);
	--d-text: #f8f9fa;
	--d-text: color-mix(in srgb, var(--bsq-bg, #f7f8f9) 96%, #ffffff);
	--d-on: #14181a;
	--d-muted: #c3c7c9;
	--d-muted: color-mix(in srgb, var(--d-text) 76%, var(--d-bg));
	--d-edge: #8f9295;
	--d-edge: color-mix(in srgb, var(--d-surface) 54%, var(--d-text));
	--d-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -14px rgba(0, 0, 0, .6);

	--r: 18px;
	--r-sm: 12px;
	--gap: 10px;
	--pad: clamp(16px, 4vw, 30px);
	--shadow: 0 1px 2px rgba(16, 18, 20, .05), 0 8px 24px -12px rgba(16, 18, 20, .18);

	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--pad);
	border-radius: var(--r);
	background: var(--c-bg);
	color: var(--c-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

/*
 * Take the page's own typeface. It is already loaded for the article, so this
 * costs no request. The quiz keeps its own size scale either way.
 */
.bsq--font-inherit {
	font-family: inherit;
}

/*
 * The one place the dark palette is switched on. bsq--auto follows the device,
 * bsq--dark is always on, and bsq--light never matches either rule.
 */
@media (prefers-color-scheme: dark) {
	.bsq--auto {
		--c-accent: var(--d-accent);
		--c-bg: var(--d-bg);
		--c-surface: var(--d-surface);
		--c-text: var(--d-text);
		--c-on: var(--d-on);
		--c-muted: var(--d-muted);
		--c-edge: var(--d-edge);
		--shadow: var(--d-shadow);
	}
}

.bsq--dark {
	--c-accent: var(--d-accent);
	--c-bg: var(--d-bg);
	--c-surface: var(--d-surface);
	--c-text: var(--d-text);
	--c-on: var(--d-on);
	--c-muted: var(--d-muted);
	--c-edge: var(--d-edge);
	--shadow: var(--d-shadow);
}

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

.bsq__inner {
	position: relative;
}

.bsq p,
.bsq ul,
.bsq dl,
.bsq dd,
.bsq dt {
	margin: 0;
	padding: 0;
}

.bsq ul {
	list-style: none;
}

.bsq fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.bsq legend {
	display: block;
	width: 100%;
	padding: 0;
	float: none;
}

/*
 * Off screen but still read out. The step count joins this list once
 * scripting is on, because the sticky bar then shows it instead.
 */
.bsq__sr,
.bsq__live,
.bsq--js .bsq__step {
	position: absolute !important;
	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;
}

/* ---------------------------------------------------------------- headings */

.bsq__title {
	margin: 0 0 6px;
	font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
	font-weight: 650;
	line-height: 1.18;
	letter-spacing: -.015em;
	color: var(--c-text);
}

.bsq__meta,
.bsq__help,
.bsq__step {
	color: var(--c-muted);
	font-size: .84rem;
	letter-spacing: .01em;
}

.bsq__step {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: .7rem;
}

/* ------------------------------------------------------------ start screen */

.bsq__screen--start {
	padding: clamp(4px, 2vw, 14px) 0 2px;
}

.bsq__startbtn {
	margin-top: 16px;
}

.bsq__resume {
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	background: var(--c-surface);
}

.bsq__resume-t {
	margin-bottom: 10px;
	font-size: .92rem;
	color: var(--c-muted);
}

.bsq__resume-b {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* --------------------------------------------------------------- progress */

.bsq__bar {
	margin: 0 0 16px;
}

/*
 * The bar sticks to the top of the viewport while the visitor scrolls a long
 * question. Set --bsq-sticky-top on the quiz if your theme has a fixed header
 * that would sit over it.
 */
.bsq--js .bsq__bar {
	position: sticky;
	top: var(--bsq-sticky-top, 0px);
	z-index: 3;
	margin: 0 calc(var(--pad) * -1) 16px;
	padding: 10px var(--pad) 4px;
	background: var(--c-bg);
}

.bsq--js .bsq__bar::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 14px;
	background: linear-gradient(var(--c-bg), transparent);
	pointer-events: none;
}

.bsq__bar-track {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: var(--c-line);
	overflow: hidden;
}

.bsq__bar-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--c-accent);
	transition: width .32s cubic-bezier(.32, .72, .3, 1);
}

.bsq__bar-txt {
	margin-top: 7px;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--c-muted);
}

/* --------------------------------------------------------------- question */

.bsq__legend {
	margin-bottom: 14px;
}

.bsq__q {
	margin: 0;
	font-size: clamp(1.08rem, .96rem + .7vw, 1.42rem);
	font-weight: 620;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--c-text);
}

.bsq__help {
	display: block;
	margin-top: 5px;
}

.bsq__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
}

@media (min-width: 620px) {
	.bsq__grid {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 14px;
	}
}

.bsq__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	opacity: 0;
	pointer-events: none;
}

.bsq__card {
	display: flex;
	flex-direction: column;
	min-height: 44px;
	padding: 6px 6px 10px;
	border: 1.5px solid var(--c-edge);
	border-radius: var(--r);
	background: var(--c-surface);
	box-shadow: var(--shadow);
	cursor: pointer;
	transition: transform .18s cubic-bezier(.34, 1.3, .5, 1), border-color .18s ease, background-color .18s ease;
}

.bsq__face {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 5;
	max-height: min(21vh, 230px);
	border-radius: var(--r-sm);
	background: var(--c-face);
	overflow: hidden;
}

.bsq__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bsq__face picture {
	display: contents;
}

.bsq__mark {
	font-size: clamp(1.5rem, 5vw, 2.1rem);
	font-weight: 300;
	letter-spacing: .06em;
	color: var(--c-muted);
	opacity: .55;
}

.bsq__label {
	display: block;
	padding: 9px 6px 0;
	font-size: .86rem;
	font-weight: 550;
	line-height: 1.28;
	color: var(--c-text);
}

@media (min-width: 620px) {
	.bsq__label {
		font-size: .92rem;
		padding-top: 11px;
	}
}

.bsq__tick {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--c-accent);
	color: var(--c-on);
	opacity: 0;
	transform: scale(.5);
	transition: opacity .16s ease, transform .22s cubic-bezier(.34, 1.5, .5, 1);
}

@media (hover: hover) {
	.bsq__card:hover {
		transform: translateY(-3px);
		border-color: var(--c-text);
	}
}

.bsq__input:checked + .bsq__card {
	border-color: var(--c-accent);
	background: var(--c-tint);
	animation: bsq-pop .3s cubic-bezier(.34, 1.4, .5, 1);
}

.bsq__input:checked + .bsq__card .bsq__tick {
	opacity: 1;
	transform: scale(1);
}

.bsq__input:focus-visible + .bsq__card {
	outline: 3px solid var(--c-accent);
	outline-offset: 3px;
}

@keyframes bsq-pop {
	0% { transform: scale(1); }
	45% { transform: scale(1.035); }
	100% { transform: scale(1); }
}

.bsq__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 16px;
}

.bsq__nav [data-act="back"] {
	margin-right: auto;
}

.bsq__nav [data-act="next"] {
	margin-left: auto;
}

/* ---------------------------------------------------------------- buttons */

.bsq__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 20px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease;
}

.bsq__btn--primary {
	background: var(--c-accent);
	color: var(--c-on);
}

.bsq__btn--ghost {
	background: transparent;
	border-color: var(--c-edge);
	color: var(--c-text);
}

@media (hover: hover) {
	.bsq__btn:hover {
		transform: translateY(-1px);
	}
	.bsq__btn--ghost:hover {
		border-color: var(--c-muted);
	}
}

.bsq__btn:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 3px;
}

.bsq__btn[disabled] {
	opacity: .42;
	cursor: not-allowed;
	transform: none;
}

.bsq__btn[hidden] {
	display: none;
}

/* ----------------------------------------------------------------- result */

.bsq__screen--result {
	padding-top: 2px;
}

.bsq__blend {
	margin: 0 0 20px;
	font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem);
	font-weight: 600;
	color: var(--c-accent);
	letter-spacing: -.008em;
}

.bsq__bars {
	display: grid;
	gap: 9px;
	margin-bottom: 24px;
	padding: 16px;
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	background: var(--c-surface);
}

.bsq__row {
	display: grid;
	grid-template-columns: minmax(74px, 92px) 1fr 38px;
	align-items: center;
	gap: 10px;
}

.bsq__row-n {
	font-size: .8rem;
	font-weight: 550;
	color: var(--c-muted);
}

.bsq__row-t {
	height: 8px;
	border-radius: 999px;
	background: var(--c-line);
	overflow: hidden;
}

.bsq__row-f {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--c-accent);
	opacity: .42;
	transition: width .7s cubic-bezier(.22, .68, .3, 1);
}

.bsq__row.is-top .bsq__row-f {
	opacity: 1;
}

.bsq__row.is-second .bsq__row-f {
	opacity: .72;
}

.bsq__row-v {
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--c-muted);
}

.bsq__row.is-top .bsq__row-n,
.bsq__row.is-top .bsq__row-v {
	color: var(--c-text);
	font-weight: 650;
}

.bsq__styles {
	display: grid;
	gap: 16px;
}

.bsq__style {
	padding: 20px;
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	background: var(--c-surface);
}

.bsq__style.is-primary {
	border-color: var(--c-accent);
	border-width: 1.5px;
	box-shadow: var(--shadow);
}

.bsq__style-img {
	margin: -20px -20px 16px;
	border-radius: var(--r) var(--r) 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.bsq__style-n {
	margin: 0 0 8px;
	font-size: clamp(1.15rem, 1.02rem + .6vw, 1.45rem);
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -.012em;
	color: var(--c-text);
}

/*
 * Both badges ship in the markup and both start off. An author rule beats the
 * browser's own [hidden] rule whatever the specificity, so the default here
 * has to be display:none rather than relying on the attribute alone.
 */
.bsq__badge {
	display: none;
	margin-bottom: 5px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-accent);
}

.bsq__style.is-primary .bsq__badge--p,
.bsq__style.is-secondary .bsq__badge--s {
	display: block;
}

.bsq__style-d {
	margin: 0 0 14px;
	font-size: 1rem;
	line-height: 1.55;
}

.bsq__notes {
	display: grid;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--c-line);
}

.bsq__notes dt {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 3px;
}

.bsq__notes dd {
	font-size: .94rem;
	line-height: 1.5;
}

@media (min-width: 720px) {
	.bsq__notes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}
	.bsq__notes dt {
		grid-row: 1;
	}
	.bsq__notes dd {
		grid-row: 2;
	}
}

/* ----------------------------------------------------- lead, cta and links */

.bsq__lead,
.bsq__cta {
	margin-top: 20px;
	padding: 18px 20px;
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	background: var(--c-surface);
}

.bsq__cta {
	border-color: var(--c-accent);
	background: var(--c-tint);
}

.bsq__lead-h,
.bsq__cta-h {
	margin-bottom: 6px;
	font-size: 1.02rem;
	font-weight: 650;
}

.bsq__cta-t {
	margin-bottom: 14px;
	font-size: .94rem;
	color: var(--c-text);
}

.bsq__lead-f {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.bsq__field {
	flex: 1 1 200px;
	min-height: 46px;
	padding: 10px 14px;
	border: 1.5px solid var(--c-edge);
	border-radius: 999px;
	background: var(--c-bg);
	color: var(--c-text);
	font: inherit;
	font-size: .95rem;
}

.bsq__field:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
}

.bsq__lead-m {
	margin-top: 9px;
	font-size: .88rem;
	color: var(--c-muted);
	min-height: 1.2em;
}

.bsq__lead-m.is-err {
	color: var(--c-accent);
}

.bsq__links {
	display: grid;
	gap: 8px;
	margin-top: 20px;
}

.bsq__links a {
	display: block;
	padding: 14px 44px 14px 18px;
	border: 1px solid var(--c-edge);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	color: var(--c-text);
	font-size: .94rem;
	font-weight: 550;
	text-decoration: none;
	position: relative;
	transition: border-color .16s ease;
}

.bsq__links a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-right: 2px solid var(--c-accent);
	border-bottom: 2px solid var(--c-accent);
	transform: rotate(-45deg);
}

@media (hover: hover) {
	.bsq__links a:hover {
		border-color: var(--c-accent);
	}
}

.bsq__links a:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
}

.bsq__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

/* ------------------------------------------------- the interactive machine */

.bsq--js .bsq__screen {
	display: none;
}

.bsq--js .bsq__screen--start,
.bsq--js .bsq__screen.is-on {
	display: block;
	animation: bsq-in .28s ease both;
}

.bsq--js .bsq__screen--start.is-off {
	display: none;
}

.bsq--js .bsq__style {
	display: none;
}

.bsq--js .bsq__style.is-primary,
.bsq--js .bsq__style.is-secondary {
	display: block;
}

@keyframes bsq-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- surfaces */

@media (min-width: 900px) {
	.bsq__styles {
		gap: 20px;
	}
}

/*
 * Short screens: an old handset at 320 by 568, or anything in landscape. The
 * promise is that every answer for a question is reachable without scrolling,
 * so the picture tile gives up height first, then the type tightens.
 */
@media (max-height: 700px) {
	.bsq__face {
		max-height: min(17vh, 160px);
	}
	.bsq__label {
		padding-top: 7px;
		font-size: .8rem;
	}
	.bsq__q {
		font-size: 1.02rem;
	}
	.bsq__legend {
		margin-bottom: 10px;
	}
	.bsq__nav {
		margin-top: 12px;
	}
	.bsq--js .bsq__bar {
		padding-top: 6px;
	}
}

@media (min-width: 1400px) {
	.bsq {
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bsq *,
	.bsq *::before,
	.bsq *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.bsq__card,
	.bsq__btn,
	.bsq__links a {
		border-color: ButtonBorder;
	}
	.bsq__input:checked + .bsq__card {
		border-color: Highlight;
		border-width: 3px;
	}
}