:root {
    --aeon-ink: #111827;
    --aeon-muted: #5b6470;
    --aeon-border: #d7dde5;
    --aeon-surface: #f5f7fa;
    --aeon-surface-strong: #ffffff;
    --aeon-font: Georgia, "Times New Roman", serif;
}

/* --aeon-accent and --aeon-accent-end are set dynamically via inline CSS
   from the theme's primary/secondary color settings (zi_ option).
   No hardcoded fallbacks here — the theme colors are the source of truth. */

@supports (color: color-mix(in srgb, red, transparent)) {
    :root {
        --aeon-accent-soft: color-mix(in srgb, var(--aeon-accent), transparent 86%);
    }
}

.aeon-poll-card,
.aeon-quiz-card {
    background: var(--aeon-surface, #f5f7fa);
    border: 1px solid rgba(128, 128, 128, 0.15);
    border-radius: 18px;
    color: var(--aeon-ink);
    font-family: var(--aeon-interactives-font, var(--aeon-font, inherit));
    margin: 28px 0;
    overflow: hidden;
    padding: 24px;
    position: relative;
}

.aeon-poll-card::before {
    background: linear-gradient(90deg, var(--aeon-accent), var(--aeon-accent-end));
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.aeon-quiz-card__progress-track {
    background: var(--aeon-border, rgba(215, 221, 229, 0.9));
    height: 4px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.aeon-quiz-card__progress-bar {
    background: linear-gradient(90deg, var(--aeon-accent), var(--aeon-accent-end));
    height: 100%;
    transition: width 0.4s ease;
    width: 0;
}

.aeon-poll-card__header,
.aeon-quiz-card__header {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.aeon-poll-card__kicker,
.aeon-quiz-card__kicker {
    color: var(--aeon-accent);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.aeon-poll-card__question,
.aeon-quiz-card__title,
.aeon-quiz-question__title {
    font-family: var(--aeon-interactives-font, var(--aeon-font));
    line-height: 1.2;
    margin: 0;
}

.aeon-poll-card__question {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.aeon-quiz-card__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.aeon-poll-card__media,
.aeon-quiz-question__media {
    margin-bottom: 18px;
}

.aeon-poll-card__media {
    border-radius: 14px;
    overflow: hidden;
}

.aeon-poll-card__image,
.aeon-quiz-question__image {
    border-radius: 14px;
    display: block;
    height: auto;
    width: 100%;
}

.aeon-poll-form__choices,
.aeon-quiz-question__answers {
    display: grid;
    gap: 12px;
}

.aeon-poll-form__choice,
.aeon-quiz-answer {
    align-items: center;
    background: rgba(128, 128, 128, 0.06);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.aeon-poll-form__choice:hover,
.aeon-quiz-answer:hover {
    border-color: var(--aeon-accent);
    box-shadow: 0 0 0 3px var(--aeon-accent-soft), 0 10px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.aeon-poll-form__choice input,
.aeon-quiz-answer input {
    accent-color: var(--aeon-accent);
    margin: 0;
}

/* Quiz answer feedback states */
.aeon-quiz-question--answered .aeon-quiz-answer {
    cursor: default;
    transform: none;
}

.aeon-quiz-question--answered .aeon-quiz-answer:hover {
    border-color: rgba(128, 128, 128, 0.2);
    box-shadow: none;
    transform: none;
}

.aeon-quiz-answer--correct {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: #22c55e !important;
}

.aeon-quiz-answer--correct.aeon-quiz-answer--selected {
    background: rgba(34, 197, 94, 0.18) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25) !important;
}

.aeon-quiz-answer--wrong {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: #ef4444 !important;
}

.aeon-quiz-answer--wrong.aeon-quiz-answer--selected {
    background: rgba(239, 68, 68, 0.18) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

.aeon-quiz-answer--dimmed {
    opacity: 0.45;
}

.aeon-quiz-answer--correct span::after {
    content: " ✓";
    color: #16a34a;
    font-weight: 700;
}

.aeon-quiz-answer--wrong.aeon-quiz-answer--selected span::after {
    content: " ✗";
    color: #dc2626;
    font-weight: 700;
}

.aeon-poll-form__footer,
.aeon-quiz-question__nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.aeon-poll-form__submit,
.aeon-quiz-question__button,
.aeon-quiz-card__retake {
    appearance: none;
    background: var(--aeon-accent);
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 12px 18px;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.aeon-poll-form__submit:hover,
.aeon-quiz-question__button:hover,
.aeon-quiz-card__retake:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.aeon-poll-form__submit:disabled,
.aeon-quiz-question__button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.aeon-quiz-question__button--secondary {
    background: transparent;
    border: 1px solid var(--aeon-border);
    color: var(--aeon-ink);
}

.aeon-poll-form__feedback,
.aeon-poll-card__status,
.aeon-quiz-card__intro,
.aeon-quiz-card__score {
    color: var(--aeon-muted);
    margin: 0;
}

.aeon-poll-results {
    display: grid;
    gap: 14px;
}

.aeon-poll-results__row {
    display: grid;
    gap: 8px;
}

.aeon-poll-results__meta {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.aeon-poll-results__bar {
    background: rgba(128, 128, 128, 0.15);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
}

.aeon-poll-results__bar span {
    background: linear-gradient(90deg, var(--aeon-accent), var(--aeon-accent-end));
    border-radius: inherit;
    display: block;
    height: 100%;
    min-width: 2px;
}

.aeon-poll-results__count,
.aeon-quiz-card__progress {
    color: var(--aeon-muted);
    font-size: 0.95rem;
}

.aeon-poll-results__total {
    color: var(--aeon-muted);
    font-size: 0.95rem;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
}

.aeon-quiz-card__progress {
    align-items: center;
    gap: 6px;
}

.aeon-quiz-card__progress:not([hidden]) {
    display: inline-flex;
}

.aeon-quiz-card__cover {
    border-radius: 12px;
    margin: 8px 0 18px;
    overflow: hidden;
}

.aeon-quiz-card__cover-image {
    display: block;
    height: auto;
    width: 100%;
}

.aeon-quiz-card__intro {
    margin-bottom: 20px;
    padding-bottom: 18px;
}

.aeon-quiz-card__start {
    background: var(--aeon-accent, #0073aa);
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-family: var(--aeon-interactives-font, var(--aeon-font));
    font-size: 1rem;
    font-weight: 600;
    margin: 0 auto 20px;
    padding: 12px 32px;
    transition: background 0.2s, transform 0.1s;
}

.aeon-quiz-card__start:hover {
    background: var(--aeon-accent-end, #005a87);
    transform: translateY(-1px);
}

.aeon-quiz-question__caption {
    color: var(--aeon-muted);
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 8px;
}

.aeon-quiz-question__media {
    margin: 0;
}

.aeon-quiz-question__body {
    display: grid;
    gap: 16px;
}

.aeon-quiz-card__result {
    background: transparent;
    border: 1px solid rgba(128, 128, 128, 0.15);
    border-radius: 16px;
    gap: 12px;
    margin-top: 10px;
    padding: 20px;
}

.aeon-quiz-card__result:not([hidden]) {
    display: grid;
}

.aeon-quiz-card__result-title {
    font-family: var(--aeon-interactives-font, var(--aeon-font));
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    line-height: 1.2;
    margin: 0;
}

.aeon-quiz-card__result-message {
    color: var(--aeon-muted);
    margin: 0;
}

@media (max-width: 640px) {
    .aeon-poll-card,
    .aeon-quiz-card {
        border-radius: 16px;
        margin: 22px 0;
        padding: 18px;
    }

    .aeon-poll-form__choice,
    .aeon-quiz-answer {
        align-items: center;
    }

    .aeon-poll-form__footer,
    .aeon-quiz-question__nav {
        align-items: stretch;
        flex-direction: column;
    }

    .aeon-poll-form__submit,
    .aeon-quiz-question__button,
    .aeon-quiz-card__retake {
        width: 100%;
    }
}

/* Dark mode overrides — prevent WP Dark Mode / theme dark mode from injecting gradients and colored borders */
html.aeon-dark-mode-active .aeon-poll-card,
html.aeon-dark-mode-active .aeon-quiz-card,
html.wp-dark-mode-active .aeon-poll-card,
html.wp-dark-mode-active .aeon-quiz-card,
body.aeon-dark-mode-active .aeon-poll-card,
body.aeon-dark-mode-active .aeon-quiz-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(128, 128, 128, 0.15) !important;
    color: inherit !important;
}

html.aeon-dark-mode-active .aeon-poll-form__choice,
html.aeon-dark-mode-active .aeon-quiz-answer,
html.wp-dark-mode-active .aeon-poll-form__choice,
html.wp-dark-mode-active .aeon-quiz-answer {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(128, 128, 128, 0.2) !important;
    color: inherit !important;
}

html.aeon-dark-mode-active .aeon-quiz-card__result,
html.wp-dark-mode-active .aeon-quiz-card__result {
    background: transparent !important;
    border-color: rgba(128, 128, 128, 0.15) !important;
}

html.aeon-dark-mode-active .aeon-poll-results__bar,
html.wp-dark-mode-active .aeon-poll-results__bar {
    background: rgba(128, 128, 128, 0.15) !important;
}

html.aeon-dark-mode-active .aeon-poll-card__kicker,
html.aeon-dark-mode-active .aeon-quiz-card__kicker,
html.wp-dark-mode-active .aeon-poll-card__kicker,
html.wp-dark-mode-active .aeon-quiz-card__kicker {
    color: rgba(255, 255, 255, 0.6) !important;
}

html.aeon-dark-mode-active .aeon-poll-card__question,
html.aeon-dark-mode-active .aeon-quiz-card__title,
html.wp-dark-mode-active .aeon-poll-card__question,
html.wp-dark-mode-active .aeon-quiz-card__title {
    color: #f0f0f0 !important;
}

html.aeon-dark-mode-active .aeon-poll-form__choice,
html.aeon-dark-mode-active .aeon-quiz-answer,
html.aeon-dark-mode-active .aeon-poll-results__meta,
html.aeon-dark-mode-active .aeon-poll-results__count,
html.aeon-dark-mode-active .aeon-poll-results__total,
html.aeon-dark-mode-active .aeon-poll-card__status,
html.aeon-dark-mode-active .aeon-poll-form__feedback,
html.wp-dark-mode-active .aeon-poll-form__choice,
html.wp-dark-mode-active .aeon-quiz-answer,
html.wp-dark-mode-active .aeon-poll-results__meta,
html.wp-dark-mode-active .aeon-poll-results__count,
html.wp-dark-mode-active .aeon-poll-results__total,
html.wp-dark-mode-active .aeon-poll-card__status,
html.wp-dark-mode-active .aeon-poll-form__feedback {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ------------------------------------------------ Extended quiz types (v2) */

/* Image credit line for question/answer/cover media. */
.aeon-quiz-credit {
	display: block;
	margin-top: 6px;
	color: var(--aeon-muted, #5b6470);
	font-family: "Roboto", Arial, sans-serif;
	font-size: 0.72rem;
	letter-spacing: .02em;
	line-height: 1.4;
}

.aeon-quiz-card__cover figcaption.aeon-quiz-credit {
	padding: 6px 2px 0;
}

/* Image answers: a grid of selectable picture cards. */
.aeon-quiz-question__answers--images {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aeon-quiz-question__answers--images .aeon-quiz-answer {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 10px;
	text-align: center;
}

.aeon-quiz-answer__media {
	display: block;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
}

.aeon-quiz-answer__media img {
	display: block;
	width: 100%;
	height: auto;
}

.aeon-quiz-answer__text {
	font-weight: 600;
}

.aeon-quiz-answer--selected {
	border-color: var(--aeon-accent) !important;
	box-shadow: 0 0 0 3px var(--aeon-accent-soft), 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

/* Result: profile hero + ranking list. */
.aeon-quiz-result-hero {
	display: grid;
	gap: 8px;
	justify-items: center;
	text-align: center;
	margin-bottom: 18px;
}

.aeon-quiz-result-hero__media {
	display: block;
	width: 100%;
	max-width: 320px;
	border-radius: 14px;
	overflow: hidden;
}

.aeon-quiz-result-hero__media img {
	display: block;
	width: 100%;
	height: auto;
}

.aeon-quiz-result-hero .aeon-quiz-card__score {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 0.8rem;
}

.aeon-quiz-ranking {
	display: grid;
	gap: 10px;
}

.aeon-quiz-ranking__title {
	margin: 0 0 2px;
	font-size: 1rem;
}

.aeon-quiz-ranking__row {
	display: grid;
	grid-template-columns: minmax(90px, 1.4fr) 2fr auto;
	align-items: center;
	gap: 10px;
	font-size: 0.95rem;
}

.aeon-quiz-ranking__row.is-winner .aeon-quiz-ranking__name {
	font-weight: 700;
}

.aeon-quiz-ranking__bar {
	background: rgba(128, 128, 128, 0.15);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.aeon-quiz-ranking__bar span {
	background: linear-gradient(90deg, var(--aeon-accent), var(--aeon-accent-end));
	border-radius: inherit;
	display: block;
	height: 100%;
	min-width: 2px;
}

.aeon-quiz-ranking__percent {
	color: var(--aeon-muted);
	font-variant-numeric: tabular-nums;
}

.aeon-quiz-card__result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}

.aeon-quiz-card__share {
	appearance: none;
	background: transparent;
	border: 1px solid var(--aeon-border);
	border-radius: 999px;
	color: var(--aeon-ink);
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 700;
	padding: 12px 18px;
}

.aeon-quiz-card__share:hover {
	border-color: var(--aeon-accent);
	color: var(--aeon-accent);
}

@media (max-width: 640px) {
	.aeon-quiz-question__answers--images {
		grid-template-columns: 1fr;
	}

	.aeon-quiz-ranking__row {
		grid-template-columns: minmax(70px, 1fr) 1.4fr auto;
		font-size: 0.9rem;
	}
}

/* --------------------------------------------------- Polish (improvement round) */

/* Rounded media everywhere, like the live valkompass. */
.aeon-quiz-question__image,
.aeon-quiz-card__cover-image,
.aeon-quiz-answer__media img,
.aeon-quiz-result-hero__media img {
	border-radius: 16px;
}

.aeon-quiz-question__media {
	margin: 0;
}

.aeon-quiz-question__media-frame {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
}

/* Subtle branded tint over the image (accent colour, top). */
.aeon-quiz-question__tint {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, color-mix(in srgb, var(--aeon-accent, #0073aa) 16%, transparent) 0%, transparent 45%);
}

/* Caption + credit sit on the image, in a dark strip at the bottom. */
.aeon-quiz-media-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	padding: 26px 14px 10px;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .62) 100%);
	color: #fff;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 0.78rem;
	line-height: 1.45;
}

.aeon-quiz-media-caption__text {
	font-weight: 600;
}

.aeon-quiz-media-caption .aeon-quiz-credit {
	margin: 0;
	color: rgba(255, 255, 255, .82);
	font-size: 0.72rem;
}

/* Section headings inside a matching guide. */
.aeon-quiz-section {
	margin: 6px 0 14px;
	color: var(--aeon-accent);
	font-family: "Roboto", Arial, sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* "Double weight" badge on a question. */
.aeon-quiz-question__weight {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--aeon-accent) 14%, transparent);
	color: var(--aeon-accent);
	font-family: "Roboto", Arial, sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Slightly larger, selectable image-answer cards. */
.aeon-quiz-question__answers--images .aeon-quiz-answer {
	border-radius: 16px;
}

/* Result: no inner "card in card". */
.aeon-quiz-card__result {
	border: 0 !important;
	background: transparent !important;
	padding: 4px 0 0 !important;
	margin-top: 4px;
}

/* Large result image on the final step. */
.aeon-quiz-result-hero {
	justify-items: stretch;
	text-align: left;
}

.aeon-quiz-result-hero__media {
	max-width: 100%;
	width: 100%;
	border-radius: 16px;
}

.aeon-quiz-result-hero__media img {
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.aeon-quiz-result-hero .aeon-quiz-card__score {
	margin-top: 4px;
}

.aeon-quiz-answers__actions {
	display: inline-flex;
	gap: 8px;
}

/* Image answers must select the option on click, never open a lightbox/link. */
.aeon-quiz-answer a,
.aeon-quiz-question__media a {
	pointer-events: none;
}

/* ------------------------------- Uniform media treatment (all quiz types) */

/* One rounded frame; the image is cropped to fill it; caption/credit inside. */
.aeon-quiz-media-frame {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 16px;
	background: rgba(128, 128, 128, .1);
}

.aeon-quiz-media-frame img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	border-radius: 0 !important;
}

.aeon-quiz-media-frame--cover { aspect-ratio: 21 / 9; }
.aeon-quiz-media-frame--question { aspect-ratio: 16 / 9; }
.aeon-quiz-media-frame--answer { aspect-ratio: 4 / 3; }
.aeon-quiz-media-frame--result { aspect-ratio: 16 / 9; }

/* The cover figure itself should not add a second frame. */
.aeon-quiz-card__cover {
	border-radius: 0;
	overflow: visible;
}

.aeon-quiz-card__cover .aeon-quiz-media-caption .aeon-quiz-credit {
	font-size: 0.72rem;
}

@media (max-width: 640px) {
	.aeon-quiz-media-frame--cover { aspect-ratio: 16 / 9; }
	.aeon-quiz-media-frame--question { aspect-ratio: 4 / 3; }
	.aeon-quiz-media-frame--result { aspect-ratio: 4 / 3; }
}

/* Media: exact cover crop, no fill edge, no tint band. */
.aeon-quiz-media-frame {
	background: transparent !important;
}

.aeon-quiz-question__tint {
	display: none !important;
}

.aeon-quiz-media-frame img {
	object-position: center center;
}

.aeon-quiz-media-frame--cover { aspect-ratio: 3 / 2; }
.aeon-quiz-media-frame--question { aspect-ratio: 3 / 2; }
.aeon-quiz-media-frame--result { aspect-ratio: 3 / 2; }
.aeon-quiz-media-frame--answer { aspect-ratio: 4 / 3; }

/* Respondent "extra important" toggle. */
.aeon-quiz-weight-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	max-width: 100%;
	margin: 6px 0 22px;
	padding: 6px 12px;
	border: 1px dashed rgba(128, 128, 128, .28);
	border-radius: 999px;
	cursor: pointer;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--aeon-muted, #5b6470);
}

.aeon-quiz-weight-toggle:hover {
	border-color: var(--aeon-accent);
	color: var(--aeon-ink);
}

.aeon-quiz-weight-toggle input {
	margin: 0;
	accent-color: var(--aeon-accent);
}

.aeon-quiz-weight-toggle input:checked + span {
	color: var(--aeon-accent);
}

/* Never inherit the article image margins inside a quiz media frame. */
.aeon-quiz-media-frame img,
.aeon-quiz-media-frame picture,
.aeon-quiz-result-hero__media img {
	margin: 0 !important;
}

/* ------------------- Standard image proportion: 1170 x 600 (site standard) */

.aeon-quiz-media-frame--cover,
.aeon-quiz-media-frame--question,
.aeon-quiz-media-frame--result,
.aeon-quiz-media-frame--answer {
	aspect-ratio: 1170 / 600;
}

.aeon-quiz-media-frame--cover,
.aeon-quiz-media-frame--question,
.aeon-quiz-media-frame--result {
	width: 100%;
}

.aeon-quiz-media-frame--cover picture,
.aeon-quiz-media-frame--cover img,
.aeon-quiz-media-frame--question picture,
.aeon-quiz-media-frame--question img,
.aeon-quiz-media-frame--result picture,
.aeon-quiz-media-frame--result img {
	display: block;
	height: 100%;
	width: 100%;
}

/* Cover: keep it from dominating the intro text. */
.aeon-quiz-card__cover {
	margin: 8px 0 24px;
}

/* Intro / presentation copy: a clear lead, not body text. */
.aeon-quiz-card__intro {
	margin: 0 0 26px;
	padding-bottom: 0;
	font-family: var(--aeon-interactives-font, var(--aeon-font));
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	font-weight: 500;
	line-height: 1.55;
}

.aeon-quiz-card__intro p {
	margin: 0 0 14px;
}

.aeon-quiz-card__intro p:last-child {
	margin-bottom: 0;
}

/* Presentation spacing: tighter lines, more air above and below the lead. */
.aeon-quiz-card__cover {
	margin: 10px 0 34px;
}

.aeon-quiz-card__intro {
	margin: 0 0 40px;
	line-height: 1.4;
}

.aeon-quiz-card__start {
	margin: 0 auto 28px;
}

/* Opinion compass ------------------------------------------------------- */

.aeon-compass__heading {
	float: none !important;
	font-family: var(--aeon-interactives-font, var(--aeon-font));
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	line-height: 1.25;
	margin: 0 0 16px;
	outline: none;
}

/* The theme floats headings left; neutralise that inside the compass so
   headings stay in normal flow (otherwise they drift to the left edge). */
.aeon-quiz-card--compass .aeon-compass-question__title,
.aeon-quiz-card--compass .aeon-compass-party__name,
.aeon-quiz-card--compass .aeon-compass-winner__name,
.aeon-quiz-card--compass .aeon-compass-compare h4 {
	float: none !important;
}

.aeon-compass,
.aeon-compass__screen,
.aeon-compass__questions,
.aeon-compass__topics {
	width: 100%;
}

.aeon-compass__topics {
	display: grid;
	gap: 8px;
	margin: 0 0 18px;
}

.aeon-compass-topic {
	align-items: center;
	background: var(--aeon-surface-strong, #fff);
	border: 1px solid var(--aeon-border, #d7dde5);
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 10px 14px;
}

.aeon-compass-topic input {
	accent-color: var(--aeon-accent);
}

.aeon-compass__note {
	color: var(--aeon-muted, #5b6470);
	font-size: 0.95rem;
	margin: 0 0 18px;
}

.aeon-compass__actions,
.aeon-compass__result-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}

.aeon-compass__button {
	background: var(--aeon-surface-strong, #fff);
	border: 1px solid var(--aeon-border, #d7dde5);
	border-radius: 999px;
	color: var(--aeon-ink);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 11px 20px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.aeon-compass__button:hover:not(:disabled) {
	border-color: var(--aeon-accent);
	color: var(--aeon-accent);
}

.aeon-compass__button--primary {
	background: var(--aeon-accent);
	border-color: var(--aeon-accent);
	color: #fff;
}

.aeon-compass__button--primary:hover:not(:disabled) {
	background: var(--aeon-accent-end, var(--aeon-accent));
	color: #fff;
}

.aeon-compass__button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.aeon-compass-question__meta {
	align-items: baseline;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.aeon-compass-question__counter {
	color: var(--aeon-muted, #5b6470);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

.aeon-compass__progress {
	accent-color: var(--aeon-accent);
	margin: 8px 0 18px;
	width: 100%;
}

.aeon-compass-question__title {
	font-family: var(--aeon-interactives-font, var(--aeon-font));
	font-size: clamp(1.3rem, 2.6vw, 1.8rem);
	line-height: 1.25;
	margin: 0 0 18px;
	outline: none;
}

.aeon-compass-question__media {
	margin: 0 0 20px;
}

.aeon-compass-question__context {
	color: var(--aeon-ink);
	margin: 0 0 20px;
}

.aeon-compass__answers {
	display: grid;
	gap: 8px;
	margin-bottom: 16px;
}

@media (min-width: 640px) {
	.aeon-compass__answers {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.aeon-compass-answer {
	background: var(--aeon-surface-strong, #fff);
	border: 1px solid var(--aeon-border, #d7dde5);
	border-radius: 10px;
	color: var(--aeon-ink);
	cursor: pointer;
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.25;
	padding: 12px 10px;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.aeon-compass-answer:hover {
	border-color: var(--aeon-accent);
}

.aeon-compass-answer.is-selected {
	background: var(--aeon-accent);
	border-color: var(--aeon-accent);
	color: #fff;
}

.aeon-compass-question__nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

.aeon-compass-question__nav .aeon-compass__button--primary {
	margin-left: auto;
}

.aeon-compass-question__links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
}

.aeon-compass-link {
	background: none;
	border: 0;
	color: var(--aeon-muted, #5b6470);
	cursor: pointer;
	font: inherit;
	font-size: 0.9rem;
	padding: 0;
	text-decoration: underline;
}

.aeon-compass-link:hover {
	color: var(--aeon-accent);
}

.aeon-compass__flag {
	background: var(--aeon-surface-strong, #fff);
	border: 1px solid var(--aeon-border, #d7dde5);
	border-radius: 12px;
	color: var(--aeon-muted, #5b6470);
	font-size: 0.95rem;
	margin: 0 0 20px;
	padding: 12px 16px;
}

.aeon-compass-compare {
	background: var(--aeon-surface-strong, #fff);
	border: 1px solid var(--aeon-border, #d7dde5);
	border-radius: 12px;
	margin-bottom: 20px;
	padding: 16px;
}

.aeon-compass-compare h4 {
	margin: 0 0 12px;
}

.aeon-compass-compare__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.aeon-compass-compare__row select {
	flex: 1 1 160px;
	max-width: 100%;
}

.aeon-compass-party {
	background: var(--aeon-surface-strong, #fff);
	border: 1px solid var(--aeon-border, #d7dde5);
	border-radius: 14px;
	margin-bottom: 16px;
	padding: 18px;
}

.aeon-compass-party.is-rankable {
	border-color: var(--aeon-accent);
}

.aeon-compass-party__name {
	font-size: 1.35rem;
	margin: 0;
}

.aeon-compass-party__person {
	color: var(--aeon-muted, #5b6470);
	font-size: 0.9rem;
	margin: 2px 0 10px;
}

.aeon-compass-party__score {
	color: var(--aeon-accent);
	font-size: 2rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	margin: 6px 0;
}

.aeon-compass-party__muted {
	color: var(--aeon-muted, #5b6470);
	font-size: 0.9rem;
}

.aeon-compass-party__note {
	color: var(--aeon-muted, #5b6470);
	margin: 8px 0;
}

.aeon-compass-details {
	border-top: 1px solid var(--aeon-border, #d7dde5);
	margin-top: 12px;
	padding-top: 10px;
}

.aeon-compass-details summary {
	cursor: pointer;
	font-weight: 600;
}

.aeon-compass-evidence {
	border-top: 1px solid var(--aeon-border, #d7dde5);
	padding: 12px 0;
}

.aeon-compass-evidence:first-child {
	border-top: 0;
}

.aeon-compass-evidence__question {
	font-weight: 600;
	margin: 0 0 6px;
}

.aeon-compass-evidence p {
	margin: 4px 0;
}

.aeon-compass-evidence blockquote {
	border-left: 3px solid var(--aeon-accent);
	margin: 8px 0;
	padding: 2px 0 2px 12px;
}

.aeon-compass__status {
	color: var(--aeon-muted, #5b6470);
	font-size: 0.9rem;
	font-style: italic;
}

/* Dark-mode safety: the sub-cards (topics, party cards, compare box, flag)
   keep a light surface, so their text must stay dark ink regardless of the
   theme's dark-mode heading/paragraph colours. Text directly on the quiz card
   follows the theme, which is correct in both modes. */
.aeon-quiz-card--compass .aeon-compass-topic,
.aeon-quiz-card--compass .aeon-compass-topic *,
.aeon-quiz-card--compass .aeon-compass-party,
.aeon-quiz-card--compass .aeon-compass-party *,
.aeon-quiz-card--compass .aeon-compass-compare,
.aeon-quiz-card--compass .aeon-compass-compare *,
.aeon-quiz-card--compass .aeon-compass-winner,
.aeon-quiz-card--compass .aeon-compass-winner *,
.aeon-quiz-card--compass .aeon-compass__flag,
.aeon-quiz-card--compass .aeon-compass-evidence,
.aeon-quiz-card--compass .aeon-compass-evidence * {
	color: var(--aeon-ink, #111827) !important;
}

.aeon-quiz-card--compass .aeon-compass-party__muted,
.aeon-quiz-card--compass .aeon-compass-party__person,
.aeon-quiz-card--compass .aeon-compass-party__note,
.aeon-quiz-card--compass .aeon-compass__flag {
	color: var(--aeon-muted, #5b6470) !important;
}

.aeon-quiz-card--compass .aeon-compass-party__score,
.aeon-quiz-card--compass .aeon-compass-evidence a {
	color: var(--aeon-accent) !important;
}

/* Branding: a subtle NyD tone fading into the question image. */
.aeon-compass-question__media .aeon-quiz-media-frame--question {
	box-shadow: 0 6px 18px rgba(61, 21, 34, .10);
}

.aeon-compass-question__media .aeon-quiz-media-frame--question::after {
	background: linear-gradient(180deg, rgba(45, 9, 21, 0) 38%, rgba(45, 9, 21, .30) 100%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

@supports (color: color-mix(in srgb, red, transparent)) {
	.aeon-compass-question__media .aeon-quiz-media-frame--question::after {
		background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--aeon-accent) 28%, transparent));
	}
}

.aeon-compass-question__media .aeon-quiz-media-caption {
	background: transparent !important;
	bottom: 8px;
	color: #fff !important;
	font-size: 12px;
	left: 12px;
	line-height: 1.3;
	margin: 0;
	position: absolute;
	right: 12px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
	z-index: 1;
}

.aeon-compass-question__media .aeon-quiz-media-caption .aeon-quiz-credit {
	background: transparent;
}

/* Result: closest match hero + ranking. */
.aeon-compass-winner {
	background: var(--aeon-surface-strong, #fff);
	border: 1px solid var(--aeon-border, #d7dde5);
	border-left: 4px solid var(--aeon-accent);
	border-radius: 14px;
	color: var(--aeon-ink, #111827);
	margin: 0 0 18px;
	padding: 18px 20px;
}

.aeon-compass-winner__eyebrow {
	color: var(--aeon-accent) !important;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.aeon-compass-winner__row {
	align-items: center;
	display: flex;
	gap: 14px;
	justify-content: space-between;
}

.aeon-compass-winner__id {
	min-width: 0;
}

.aeon-compass-winner__name {
	font-size: 1.5rem;
	line-height: 1.15;
	margin: 0;
}

.aeon-compass-winner__person {
	color: var(--aeon-muted, #5b6470) !important;
	font-size: .95rem;
	margin: 2px 0 0;
}

.aeon-compass-winner__score {
	color: var(--aeon-accent) !important;
	font-size: 2.2rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.aeon-compass-winner__score {
		font-size: 1.8rem;
	}
}

.aeon-compass-winner__meta {
	color: var(--aeon-muted, #5b6470) !important;
	font-size: .9rem;
	margin: 12px 0 0;
}

.aeon-compass__ranking-intro {
	color: var(--aeon-muted, #5b6470);
	font-size: .9rem;
	margin: 0 0 12px;
}

.aeon-compass-ranking,
.aeon-quiz-card--compass .aeon-compass-ranking {
	display: grid;
	gap: 6px;
	list-style: none;
	margin: 0 0 14px;
	margin-left: 0;
	padding: 0;
	padding-left: 0;
}

.aeon-compass-ranking__row {
	align-items: center;
	background: var(--aeon-surface-strong, #fff);
	border: 1px solid var(--aeon-border, #d7dde5);
	border-radius: 10px;
	display: grid;
	gap: 10px;
	grid-template-columns: 22px minmax(0, 1.4fr) 1fr auto;
	padding: 8px 12px;
}

.aeon-compass-ranking__row.is-top {
	border-color: var(--aeon-accent);
}

.aeon-compass-ranking__rank {
	color: var(--aeon-muted, #5b6470);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: center;
}

.aeon-compass-ranking__name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.aeon-compass-ranking__bar {
	background: rgba(128, 128, 128, .18);
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
}

.aeon-compass-ranking__bar > span {
	background: linear-gradient(90deg, var(--aeon-accent), var(--aeon-accent-end, var(--aeon-accent)));
	display: block;
	height: 100%;
}

.aeon-compass-ranking__percent {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.aeon-compass-ranking__aside {
	color: var(--aeon-muted, #5b6470);
	font-size: .9rem;
	margin: 0 0 10px;
}

@media (max-width: 560px) {
	.aeon-compass-ranking__row {
		grid-template-columns: 20px 1fr auto;
	}

	.aeon-compass-ranking__bar {
		display: none;
	}
}

/* Result: calmer compare controls. */
.aeon-compass-compare__row select {
	background: #fff;
	border: 1px solid var(--aeon-border, #d7dde5);
	border-radius: 10px;
	color: var(--aeon-ink, #111827);
	flex: 1 1 180px;
	font: inherit;
	height: 44px;
	max-width: 100%;
	padding: 0 12px;
}

.aeon-compass__button {
	min-height: 42px;
}

.aeon-quiz-card--compass .aeon-compass-ranking__row,
.aeon-quiz-card--compass .aeon-compass-ranking__row *,
.aeon-quiz-card--compass .aeon-compass-compare__row select {
	color: var(--aeon-ink, #111827) !important;
}

.aeon-quiz-card--compass .aeon-compass-winner__eyebrow,
.aeon-quiz-card--compass .aeon-compass-winner__score {
	color: var(--aeon-accent) !important;
}

.aeon-quiz-card--compass .aeon-compass-winner__person,
.aeon-quiz-card--compass .aeon-compass-winner__meta {
	color: var(--aeon-muted, #5b6470) !important;
}