/*
 * Upswing Engagement: front-end styles.
 *
 * Every rule is scoped under .uswe.uswe (doubled class) to beat theme / Beaver Builder / .entry-content
 * specificity without !important. Tokens are copied from the theme's upswing-global.css on purpose,
 * not referenced: the widget must survive that sheet failing to load or a token being renamed.
 * Type is in px because the theme compresses the root font size.
 */

/* ---------- tokens ---------- */
.uswe.uswe {
	--uswe-ink: #0c0d0f;
	--uswe-text: #343a42;
	--uswe-text-subtle: #6e7681;
	--uswe-line: #e4e6e9;
	--uswe-surface: #f8f9fa;
	--uswe-paper: #ffffff;
	--uswe-red: #ff2c1f;
	--uswe-cta: #00a651;
	/* --uswe-cta-hover (#008B46) is intentionally unused: ink on it is 4.4:1, under the 4.5:1 floor. */
	/* Post-answer CTA buttons. Mapped to the theme tokens named on the right; style the button only through these. */
	--uswe-cta-green-bg: #00a651;    /* --color-accent-500 */
	--uswe-cta-green-text: #ffffff;  /* White on this green is 3.2:1: it passes only as large bold text, so the CTA has no small size. */
	--uswe-cta-green-hover: #008b46; /* --color-accent-600 */
	--uswe-cta-gold-bg: #ffb800;     /* --color-secondary-500 */
	--uswe-cta-gold-text: #0c0d0f;   /* --color-neutral-950. Never white on gold: it fails contrast. */
	--uswe-cta-gold-hover: #e0a200;  /* --color-secondary-600 */
	--uswe-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
	--uswe-font-body: 'DM Sans', system-ui, sans-serif;
	--uswe-font-mono: 'JetBrains Mono', monospace;
	--uswe-fs-sm: 15px;
	--uswe-fs-base: 17px;
	--uswe-fs-lg: 19px;
	--uswe-fs-xl: 22px;
	--uswe-fs-2xl: 28px;
	--uswe-space-2: 8px;
	--uswe-space-3: 12px;
	--uswe-space-4: 16px;
	--uswe-space-6: 24px;
	--uswe-radius-box: 2px;
	--uswe-radius-btn: 8px;
	--uswe-radius-pill: 9999px;
	--uswe-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--uswe-dur-fast: 120ms;
	--uswe-dur-base: 200ms;
}

/* Dark mode mirrors upswing-global.css: [data-theme="dark"] on the widget or any ancestor. */
[data-theme="dark"] .uswe.uswe,
.uswe.uswe[data-theme="dark"] {
	--uswe-ink: #ffffff;
	--uswe-text: #e4e6e9;
	--uswe-text-subtle: #9da3ab;
	--uswe-line: #343a42;
	--uswe-surface: #14171b;
	--uswe-paper: #0c0d0f;
	/* The CTA fills keep their light values on dark surfaces: they already clear 3:1 against #0c0d0f and #14171b. */
	--uswe-cta-green-bg: #00a651;
	--uswe-cta-green-text: #ffffff;
	--uswe-cta-green-hover: #008b46; /* Stays dark: white on the lighter #33c687 would be 2.2:1. */
	--uswe-cta-gold-bg: #ffb800;
	--uswe-cta-gold-text: #0c0d0f;
	--uswe-cta-gold-hover: #ffc200;
}

/* ---------- scoped reset ---------- */
.uswe.uswe,
.uswe.uswe *,
.uswe.uswe *::before,
.uswe.uswe *::after {
	box-sizing: border-box;
	margin: 0;
}

.uswe.uswe p,
.uswe.uswe ul,
.uswe.uswe ol,
.uswe.uswe li,
.uswe.uswe button,
.uswe.uswe input,
.uswe.uswe textarea,
.uswe.uswe a,
.uswe.uswe h2,
.uswe.uswe h3,
.uswe.uswe fieldset,
.uswe.uswe legend,
.uswe.uswe label {
	margin: 0;
	padding: 0;
	list-style: none;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	text-decoration: none;
	letter-spacing: normal;
	text-transform: none;
	text-indent: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.uswe.uswe button {
	cursor: pointer;
	border-radius: 0;
	line-height: inherit;
	text-align: inherit;
}

/* ---------- root ---------- */
.uswe.uswe {
	display: block;
	position: relative;
	max-width: 100%;
	font-family: var(--uswe-font-body);
	font-size: var(--uswe-fs-base);
	line-height: 1.5;
	font-weight: 400;
	color: var(--uswe-text);
}

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

.uswe.uswe [tabindex="-1"]:focus:not(:focus-visible) {
	outline: none;
}

.uswe.uswe .uswe__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Honeypot: off-screen, not display:none (bots skip display:none fields less often than off-screen ones). */
.uswe.uswe .uswe__website {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- shared pieces ---------- */
.uswe.uswe .uswe__q {
	font-family: var(--uswe-font-display);
	font-size: var(--uswe-fs-lg);
	font-weight: 700;
	line-height: 1.3;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__btn,
.uswe.uswe .uswe__opt,
.uswe.uswe .uswe__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--uswe-space-6);
	background: var(--uswe-paper);
	color: var(--uswe-ink);
	border: 1px solid var(--uswe-line);
	font-size: var(--uswe-fs-base);
	font-weight: 600;
	line-height: 1.25;
	transition: border-color var(--uswe-dur-fast) var(--uswe-ease);
}

.uswe.uswe .uswe__btn:hover,
.uswe.uswe .uswe__opt:hover,
.uswe.uswe .uswe__chip:hover {
	border-color: var(--uswe-ink);
}

.uswe.uswe .uswe__btn,
.uswe.uswe .uswe__opt {
	border-radius: var(--uswe-radius-btn);
}

.uswe.uswe .uswe__btn[disabled],
.uswe.uswe .uswe__opt[disabled],
.uswe.uswe .uswe__send[disabled] {
	cursor: progress;
}

.uswe.uswe .uswe__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.uswe.uswe .uswe__error {
	margin-top: var(--uswe-space-3);
	font-size: var(--uswe-fs-base);
	font-weight: 600;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__error::before {
	content: "!";
	display: inline-block;
	width: 1.25em;
	margin-right: var(--uswe-space-2);
	text-align: center;
	border: 2px solid var(--uswe-red);
	border-radius: var(--uswe-radius-pill);
	color: var(--uswe-red);
	font-family: var(--uswe-font-mono);
	font-size: var(--uswe-fs-sm);
	line-height: 1.1;
}

/* ---------- helpful ---------- */
/* A card: surface fill, hairline border, prompt, one quiet line, two buttons. */
.uswe.uswe.uswe--helpful {
	display: block;
	margin: var(--uswe-space-6) 0 0;
	padding: var(--uswe-space-6);
	background: var(--uswe-surface);
	border: 1px solid var(--uswe-line);
	border-radius: var(--uswe-radius-box);
	clear: both;
}

.uswe.uswe.uswe--helpful .uswe__q {
	font-size: var(--uswe-fs-xl);
	line-height: 1.25;
}

.uswe.uswe .uswe__sub {
	margin-top: var(--uswe-space-2);
	font-size: var(--uswe-fs-base);
	color: var(--uswe-text-subtle);
}

.uswe.uswe .uswe__sub[hidden] {
	display: none;
}

.uswe.uswe.uswe--helpful .uswe__actions {
	margin-top: var(--uswe-space-4);
}

.uswe.uswe.uswe--helpful .uswe__msg,
.uswe.uswe.uswe--helpful .uswe__count {
	margin-top: var(--uswe-space-3);
}

.uswe.uswe.uswe--helpful .uswe__msg:empty {
	margin-top: 0;
}

.uswe.uswe.uswe--helpful .uswe__form {
	margin-top: var(--uswe-space-4);
}

/* Yes is the one action on the card, so it gets the CTA fill with white text (requested; ~3.2:1, passes only as large/bold UI text). */
.uswe.uswe.uswe--helpful .uswe__btn[data-value="1"] {
	background: var(--uswe-cta);
	border-color: var(--uswe-cta);
	color: #ffffff;
}

.uswe.uswe.uswe--helpful .uswe__btn {
	gap: var(--uswe-space-2);
}

.uswe.uswe .uswe__ico {
	flex: none;
	width: 20px;
	height: 20px;
}

/* No count yet: don't reserve a blank line under the buttons (the card was visibly bottom-heavy). */
.uswe.uswe.uswe--helpful .uswe__count:empty {
	display: none;
}

.uswe.uswe.uswe--helpful .uswe__btn[data-value="1"]:hover {
	border-color: var(--uswe-ink);
}

/* No is the outlined twin. The heavier border keeps it visible on the surface fill. */
.uswe.uswe.uswe--helpful .uswe__btn[data-value="-1"] {
	border-width: 2px;
	border-color: var(--uswe-line);
}

.uswe.uswe.uswe--helpful .uswe__btn[data-value="-1"]:hover {
	border-color: var(--uswe-ink);
}

.uswe.uswe .uswe__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uswe-space-3);
	margin-top: 0;
}

.uswe.uswe .uswe__msg {
	margin-top: 0;
	font-size: var(--uswe-fs-base);
	font-weight: 600;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__msg:empty {
	display: none;
}

.uswe.uswe .uswe__link,
.uswe.uswe .uswe__skip,
.uswe.uswe .uswe__reveal {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--uswe-space-3);
	color: var(--uswe-text-subtle);
	font-size: var(--uswe-fs-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.uswe.uswe .uswe__link:hover,
.uswe.uswe .uswe__skip:hover,
.uswe.uswe .uswe__reveal:hover {
	color: var(--uswe-ink);
}

/* The count area keeps its height from first paint so the late REST response cannot shift layout. */
.uswe.uswe .uswe__count {
	min-height: 24px;
	margin-top: 0;
	font-family: var(--uswe-font-mono);
	font-size: var(--uswe-fs-sm);
	color: var(--uswe-text-subtle);
}

.uswe.uswe .uswe__form {
	margin-top: var(--uswe-space-4);
}

.uswe.uswe .uswe__fh {
	font-family: var(--uswe-font-display);
	font-size: var(--uswe-fs-lg);
	font-weight: 700;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uswe-space-2);
	margin-top: var(--uswe-space-3);
}

.uswe.uswe .uswe__chip {
	border-radius: var(--uswe-radius-pill);
	padding: 0 var(--uswe-space-4);
	font-weight: 500;
}

.uswe.uswe .uswe__chip[aria-pressed="true"] {
	background: var(--uswe-ink);
	border-color: var(--uswe-ink);
	color: var(--uswe-paper);
}

/* A glyph, so the pressed state is not carried by colour alone. */
.uswe.uswe .uswe__chip[aria-pressed="true"]::before {
	content: "\2713";
	margin-right: 6px;
}

.uswe.uswe .uswe__label {
	display: block;
	margin-top: var(--uswe-space-4);
	font-size: var(--uswe-fs-sm);
	font-weight: 600;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__ta {
	display: block;
	width: 100%;
	min-height: 96px;
	margin-top: var(--uswe-space-2);
	padding: var(--uswe-space-3);
	background: var(--uswe-paper);
	color: var(--uswe-ink);
	border: 1px solid var(--uswe-text-subtle);
	border-radius: var(--uswe-radius-btn);
	font-size: var(--uswe-fs-base);
	line-height: 1.5;
	resize: vertical;
}

.uswe.uswe .uswe__hint {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--uswe-space-2) var(--uswe-space-4);
	margin-top: var(--uswe-space-2);
	font-size: var(--uswe-fs-sm);
	color: var(--uswe-text-subtle);
}

.uswe.uswe .uswe__counter {
	font-family: var(--uswe-font-mono);
}

.uswe.uswe .uswe__formrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--uswe-space-3);
	margin-top: var(--uswe-space-4);
}

/* The one green control in the plugin. Ink text: white on this green is only 3.2:1. */
.uswe.uswe .uswe__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--uswe-space-6);
	background: var(--uswe-cta);
	color: var(--uswe-ink);
	border-radius: var(--uswe-radius-btn);
	font-size: var(--uswe-fs-base);
	font-weight: 700;
}

.uswe.uswe .uswe__send:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- poll ---------- */
.uswe.uswe.uswe--poll {
	margin: 32px 0;
	padding: var(--uswe-space-6);
	background: var(--uswe-surface);
	border: 1px solid var(--uswe-line);
	border-radius: var(--uswe-radius-box);
	clear: both;
}

.uswe.uswe .uswe__spot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uswe-space-2) var(--uswe-space-6);
	margin-bottom: var(--uswe-space-4);
	padding-bottom: var(--uswe-space-4);
	border-bottom: 1px solid var(--uswe-line);
}

.uswe.uswe .uswe__spot-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--uswe-space-2);
}

.uswe.uswe .uswe__k {
	font-size: var(--uswe-fs-sm);
	color: var(--uswe-text-subtle);
}

.uswe.uswe .uswe__v {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	font-weight: 600;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__card {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px 8px;
	background: var(--uswe-paper);
	color: var(--uswe-ink);
	border: 1px solid var(--uswe-line);
	border-radius: var(--uswe-radius-box);
	font-family: var(--uswe-font-mono);
	font-size: var(--uswe-fs-base);
	font-weight: 700;
	line-height: 1.2;
}

.uswe.uswe .uswe__card--red {
	color: var(--uswe-red);
}

.uswe.uswe .uswe__fs {
	min-width: 0;
	border: 0;
}

.uswe.uswe .uswe__fs .uswe__q {
	display: block;
	float: none;
	width: 100%;
	margin-bottom: var(--uswe-space-4);
	font-size: var(--uswe-fs-xl);
}

.uswe.uswe .uswe__opts {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--uswe-space-3);
}

@media (min-width: 560px) {
	.uswe.uswe .uswe__opts {
		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	}
}

.uswe.uswe.is-voted .uswe__opts,
.uswe.uswe.is-revealed .uswe__opts {
	grid-template-columns: 1fr;
}

.uswe.uswe .uswe__opt {
	padding: var(--uswe-space-3) var(--uswe-space-4);
	text-align: center;
	background: var(--uswe-paper);
}

/* Result rows. DECISION: a thin bar under the label instead of a full-height fill, because an ink fill
   would sit under ink text. Correct = ink bar; others = subtle grey (3:1+ on paper), not --uswe-line. */
.uswe.uswe .uswe__res {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px var(--uswe-space-3);
	padding: var(--uswe-space-3) var(--uswe-space-4);
	background: var(--uswe-paper);
	color: var(--uswe-ink);
	border: 1px solid var(--uswe-line);
	border-radius: var(--uswe-radius-box);
}

.uswe.uswe .uswe__res.is-pick {
	border: 2px solid var(--uswe-ink);
	padding: calc(var(--uswe-space-3) - 1px) calc(var(--uswe-space-4) - 1px);
}

.uswe.uswe .uswe__lbl {
	font-weight: 500;
}

.uswe.uswe .uswe__res.is-correct .uswe__lbl {
	font-weight: 700;
}

.uswe.uswe .uswe__pct {
	font-family: var(--uswe-font-mono);
	font-weight: 700;
}

.uswe.uswe .uswe__tags {
	grid-column: 1 / -1;
	font-size: var(--uswe-fs-sm);
	font-weight: 600;
	color: var(--uswe-text);
}

.uswe.uswe .uswe__tags:empty {
	display: none;
}

.uswe.uswe .uswe__track {
	grid-column: 1 / -1;
	display: block;
	height: 6px;
	margin-top: 6px;
	background: var(--uswe-line);
	border-radius: var(--uswe-radius-box);
	overflow: hidden;
}

.uswe.uswe .uswe__bar {
	display: block;
	width: 0;
	height: 100%;
	background: var(--uswe-text-subtle);
	transition: width var(--uswe-dur-base) var(--uswe-ease);
}

.uswe.uswe .uswe__res.is-correct .uswe__bar {
	background: var(--uswe-ink);
}

.uswe.uswe .uswe__revealwrap {
	margin-top: var(--uswe-space-3);
}

.uswe.uswe .uswe__verdict {
	margin-top: var(--uswe-space-4);
	font-family: var(--uswe-font-display);
	font-size: var(--uswe-fs-lg);
	font-weight: 700;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__verdict:empty,
.uswe.uswe .uswe__note:empty {
	display: none;
}

.uswe.uswe .uswe__note {
	margin-top: var(--uswe-space-2);
	font-size: var(--uswe-fs-sm);
	color: var(--uswe-text-subtle);
}

/* Explanation is author content inside the reset scope, so give it back normal article typography. */
.uswe.uswe .uswe__explain {
	margin-top: var(--uswe-space-6);
	padding-top: var(--uswe-space-4);
	border-top: 1px solid var(--uswe-line);
	line-height: 1.6;
}

.uswe.uswe .uswe__explain p,
.uswe.uswe .uswe__explain ul,
.uswe.uswe .uswe__explain ol {
	margin: 0 0 var(--uswe-space-4);
}

.uswe.uswe .uswe__explain ul {
	padding-left: var(--uswe-space-6);
	list-style: disc;
}

.uswe.uswe .uswe__explain ol {
	padding-left: var(--uswe-space-6);
	list-style: decimal;
}

.uswe.uswe .uswe__explain li {
	display: list-item;
	margin: 0 0 var(--uswe-space-2);
	list-style: inherit;
}

.uswe.uswe .uswe__explain a {
	color: var(--uswe-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.uswe.uswe .uswe__explain img {
	max-width: 100%;
	height: auto;
}

.uswe.uswe .uswe__explain > :last-child {
	margin-bottom: 0;
}

/* ---------- poll extras: spot line, difficulty, takeaway, per-option feedback, beat line ---------- */
.uswe.uswe .uswe__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--uswe-space-2) var(--uswe-space-3);
	margin-bottom: var(--uswe-space-3);
	font-size: var(--uswe-fs-sm);
	color: var(--uswe-text);
}

.uswe.uswe .uswe__fmt,
.uswe.uswe .uswe__diff {
	display: inline-block;
	padding: 0 var(--uswe-space-3);
	border: 1px solid var(--uswe-line);
	border-radius: var(--uswe-radius-pill);
	background: var(--uswe-paper);
	font-size: var(--uswe-fs-sm);
	font-weight: 600;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__diff {
	margin-bottom: var(--uswe-space-3);
}

.uswe.uswe .uswe__closed {
	margin-bottom: var(--uswe-space-3);
	font-weight: 600;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__vrow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--uswe-space-3);
}

.uswe.uswe .uswe__streak {
	margin-top: var(--uswe-space-4);
	padding: 0 var(--uswe-space-3);
	border: 1px solid var(--uswe-ink);
	border-radius: var(--uswe-radius-pill);
	font-family: var(--uswe-font-mono);
	font-size: var(--uswe-fs-sm);
	font-weight: 700;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__explain .uswe__take {
	font-family: var(--uswe-font-display);
	font-size: var(--uswe-fs-lg);
	font-weight: 700;
	line-height: 1.35;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__deeper,
.uswe.uswe .uswe__share,
.uswe.uswe .uswe__confbtn,
.uswe.uswe .uswe__nextlink,
.uswe.uswe .uswe__yeslink,
.uswe.uswe .uswe__again,
.uswe.uswe .uswe__dnext,
.uswe.uswe .uswe__drestart,
.uswe.uswe .uswe__next {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--uswe-space-4);
	border: 1px solid var(--uswe-line);
	border-radius: var(--uswe-radius-btn);
	background: var(--uswe-paper);
	font-size: var(--uswe-fs-base);
	font-weight: 600;
	color: var(--uswe-ink);
	cursor: pointer;
	transition: border-color var(--uswe-dur-fast) var(--uswe-ease);
}

.uswe.uswe .uswe__deeper:hover,
.uswe.uswe .uswe__share:hover,
.uswe.uswe .uswe__confbtn:hover,
.uswe.uswe .uswe__nextlink:hover,
.uswe.uswe .uswe__yeslink:hover,
.uswe.uswe .uswe__again:hover,
.uswe.uswe .uswe__dnext:hover,
.uswe.uswe .uswe__drestart:hover,
.uswe.uswe .uswe__next:hover {
	border-color: var(--uswe-ink);
}

.uswe.uswe .uswe__deeper {
	margin-bottom: var(--uswe-space-4);
}

.uswe.uswe .uswe__deeper::after {
	content: "\25BE";
	margin-left: var(--uswe-space-2);
}

.uswe.uswe .uswe__deeper[aria-expanded="true"]::after {
	content: "\25B4";
}

.uswe.uswe .uswe__whys {
	margin-bottom: var(--uswe-space-4);
}

.uswe.uswe .uswe__why {
	margin-bottom: var(--uswe-space-4);
}

.uswe.uswe .uswe__explain .uswe__whylbl,
.uswe.uswe .uswe__explain .uswe__beat {
	font-weight: 700;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__explain .uswe__whylbl {
	margin-bottom: var(--uswe-space-2);
}

.uswe.uswe .uswe__after {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uswe-space-3);
	margin-top: var(--uswe-space-4);
}

.uswe.uswe .uswe__after:empty {
	display: none;
}

/* Confidence step, recommended size marker, helpful next links. Every control is a real button or link, 44px high. */
.uswe.uswe .uswe__conf {
	margin-top: var(--uswe-space-4);
}

.uswe.uswe .uswe__explain .uswe__confq,
.uswe.uswe .uswe__explain .uswe__confthanks {
	margin-bottom: var(--uswe-space-2);
	font-weight: 600;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__confopts,
.uswe.uswe .uswe__nexts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uswe-space-3);
}

.uswe.uswe .uswe__nexts:empty {
	display: none;
}

.uswe.uswe .uswe__yes {
	margin-top: var(--uswe-space-3);
}

.uswe.uswe .uswe__yeslegal {
	margin-top: var(--uswe-space-2);
	font-size: var(--uswe-fs-sm);
	color: var(--uswe-text);
}

.uswe.uswe .uswe__res.is-rec {
	outline: 2px solid var(--uswe-ink);
	outline-offset: 2px;
}

/* Read-only modules: lists and static result bars (a <progress>, so no inline widths are needed). */
.uswe.uswe .uswe__list {
	display: grid;
	gap: var(--uswe-space-3);
}

.uswe.uswe .uswe__lrow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--uswe-space-2) var(--uswe-space-4);
}

.uswe.uswe .uswe__llink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: var(--uswe-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.uswe.uswe .uswe__lmeta {
	align-self: center;
	font-family: var(--uswe-font-mono);
	font-size: var(--uswe-fs-sm);
	color: var(--uswe-text);
}

.uswe.uswe .uswe__meter {
	grid-column: 1 / -1;
	width: 100%;
	height: 6px;
	border: 0;
	border-radius: var(--uswe-radius-pill);
	background: var(--uswe-line);
	-webkit-appearance: none;
	appearance: none;
}

.uswe.uswe .uswe__meter::-webkit-progress-bar {
	background: var(--uswe-line);
	border-radius: var(--uswe-radius-pill);
}

.uswe.uswe .uswe__meter::-webkit-progress-value {
	background: var(--uswe-text-subtle);
	border-radius: var(--uswe-radius-pill);
}

.uswe.uswe .uswe__meter::-moz-progress-bar {
	background: var(--uswe-text-subtle);
	border-radius: var(--uswe-radius-pill);
}

.uswe.uswe .is-correct .uswe__meter::-webkit-progress-value {
	background: var(--uswe-ink);
}

.uswe.uswe .is-correct .uswe__meter::-moz-progress-bar {
	background: var(--uswe-ink);
}

/* ---------- post-answer CTA ---------- */
/* Selectors are four classes deep on purpose: the button sits inside .uswe__explain, whose link rule would
   otherwise turn its label ink and underline it. Green and gold fill the button only, never the wrapper. */
.uswe.uswe .uswe-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--uswe-space-2);
	margin-top: var(--uswe-space-6);
}

.uswe.uswe .uswe-cta .uswe-cta__note,
.uswe.uswe .uswe-cta .uswe-cta__legal {
	margin: 0;
	font-size: var(--uswe-fs-sm);
	line-height: 1.45;
	color: var(--uswe-text);
}

.uswe.uswe .uswe-cta .uswe-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--uswe-space-6);
	border-radius: var(--uswe-radius-btn);
	font-family: var(--uswe-font-display);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--uswe-dur-fast) var(--uswe-ease);
}

.uswe.uswe .uswe-cta .uswe-cta__btn--lg {
	min-height: 52px;
	font-size: var(--uswe-fs-xl);
}

.uswe.uswe .uswe-cta .uswe-cta__btn--xl {
	min-height: 60px;
	font-size: var(--uswe-fs-2xl);
}

.uswe.uswe .uswe-cta .uswe-cta__btn--green {
	background-color: var(--uswe-cta-green-bg);
	color: var(--uswe-cta-green-text);
}

.uswe.uswe .uswe-cta .uswe-cta__btn--green:hover {
	background-color: var(--uswe-cta-green-hover);
}

.uswe.uswe .uswe-cta .uswe-cta__btn--gold {
	background-color: var(--uswe-cta-gold-bg);
	color: var(--uswe-cta-gold-text);
}

.uswe.uswe .uswe-cta .uswe-cta__btn--gold:hover {
	background-color: var(--uswe-cta-gold-hover);
}

.uswe.uswe .uswe-cta .uswe-cta__btn:focus-visible {
	outline: 3px solid var(--uswe-ink);
	outline-offset: 3px;
}

@media (max-width: 639px) {
	.uswe.uswe .uswe-cta {
		align-items: stretch;
	}

	.uswe.uswe .uswe-cta .uswe-cta__btn {
		width: 100%;
	}
}

/* ---------- practice formats: steps, drill, compare, scorecard ---------- */
.uswe.uswe .uswe__step {
	margin-top: var(--uswe-space-6);
	padding-top: var(--uswe-space-4);
	border-top: 1px solid var(--uswe-line);
}

.uswe.uswe .uswe__step[data-step="0"] {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.uswe.uswe .uswe__stname {
	margin-bottom: var(--uswe-space-2);
	font-size: var(--uswe-fs-sm);
	font-weight: 700;
	color: var(--uswe-text-subtle);
}

.uswe.uswe .uswe__board {
	margin-bottom: var(--uswe-space-3);
}

.uswe.uswe .uswe__opt.is-correct,
.uswe.uswe .uswe__opt.is-pick {
	cursor: default;
}

.uswe.uswe .uswe__opt.is-correct {
	border-color: var(--uswe-ink);
	border-width: 2px;
}

.uswe.uswe .uswe__opt.is-correct::before {
	content: "\2713\00a0";
}

.uswe.uswe .uswe__opt.is-pick:not(.is-correct)::before {
	content: "\2717\00a0";
}

.uswe.uswe .uswe__done {
	margin-top: var(--uswe-space-4);
}

.uswe.uswe .uswe__summary,
.uswe.uswe .uswe__scoreline {
	font-family: var(--uswe-font-display);
	font-size: var(--uswe-fs-lg);
	font-weight: 700;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__summary:empty {
	display: none;
}

.uswe.uswe .uswe__best,
.uswe.uswe .uswe__prog {
	font-size: var(--uswe-fs-sm);
	color: var(--uswe-text);
}

.uswe.uswe .uswe__dtitle {
	margin-bottom: var(--uswe-space-3);
}

.uswe.uswe .uswe__dlist {
	display: grid;
	gap: var(--uswe-space-2);
}

.uswe.uswe .uswe__drow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uswe-space-4);
	font-family: var(--uswe-font-mono);
}

.uswe.uswe .uswe__dcard {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--uswe-space-4);
	margin: var(--uswe-space-3) 0 var(--uswe-space-4);
	font-family: var(--uswe-font-mono);
	font-size: var(--uswe-fs-xl);
	font-weight: 700;
	color: var(--uswe-ink);
}

.uswe.uswe .uswe__dactions {
	margin-top: var(--uswe-space-3);
}

.uswe.uswe.uswe--compare .uswe__verdict {
	margin-top: 0;
}

/* ---------- narrow screens ---------- */
@media (max-width: 559px) {
	.uswe.uswe .uswe__actions .uswe__btn {
		flex: 1 1 120px;
	}

	.uswe.uswe.uswe--poll {
		padding: var(--uswe-space-4);
	}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.uswe.uswe *,
	.uswe.uswe *::before,
	.uswe.uswe *::after {
		transition: none;
		animation: none;
	}
}

/* Keep last: must beat every display rule above (same specificity, later wins). */
.uswe.uswe [hidden] {
	display: none;
}

/* ---------- hero byline count ---------- */
/* Sits inside the theme's date line, which is always on the dark hero band, so the colours are fixed (not themed). */
.uswe-hp.uswe-hp {
	--uswe-hp-gold: #ffb800;
	--uswe-hp-strong: #ffffff;
	--uswe-hp-sep: #4d545e;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
	margin-left: 12px;
	font: inherit;
	color: inherit;
}

.uswe-hp.uswe-hp[hidden] {
	display: none;
}

.uswe-hp.uswe-hp .uswe-hp__sep {
	color: var(--uswe-hp-sep);
}

.uswe-hp.uswe-hp .uswe-hp__body {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.uswe-hp.uswe-hp .uswe-hp__icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--uswe-hp-gold);
}

.uswe-hp.uswe-hp .uswe-hp__count {
	font-weight: 700;
	color: var(--uswe-hp-strong);
}

/* Narrow screens: drop the pipe and give the count its own line so a wrapped pipe never dangles. */
@media (max-width: 520px) {
	.uswe-hp.uswe-hp {
		display: flex;
		margin: 4px 0 0;
	}

	.uswe-hp.uswe-hp[hidden] {
		display: none;
	}

	.uswe-hp.uswe-hp .uswe-hp__sep {
		display: none;
	}
}