/* ============================================================
   Quiz funnel cards (assets/quiz-funnel.js), same two layers as the QCM:
   1. TOKENS under :where(), zero specificity: a site overrides them from its
      own CSS without fighting, e.g. .qf-card { --qf-accent: #c8a24a; }
      List and usage: docs/plugin-quiz-funnel.md.
   2. RULES scoped on .qf-card.qf-card with !important where themes leak
      (links, headings, buttons: some themes paint the button background on
      hover, so every button state declares its own background). Rules only
      read tokens: adapt a site through the tokens, never by rewriting rules.
   Mobile first; the wider layout starts at 640px.
   ============================================================ */

/* 1. Tokens ----------------------------------------------------------- */
:where(.qf-card) {
	--qf-font: inherit;
	--qf-fg: #14233a;            /* ink: text, sticky bar, secondary button */
	--qf-fg-2: #1f3658;          /* second tone, bar fill */
	--qf-muted: #5b6b82;         /* secondary text */
	--qf-accent: #f59e0b;        /* main button */
	--qf-accent-hover: #fbbf24;
	--qf-accent-fg: #14233a;     /* text on the accent */
	--qf-bg: #ffffff;            /* card background */
	--qf-soft: #f2f7fc;          /* milestone and review background */
	--qf-line: #dde5f0;          /* card border */
	--qf-track: #eaf0f7;         /* empty part of a bar */
	--qf-weak: #dc2626;          /* weakest domain */
	--qf-radius: 18px;
	--qf-max-width: 680px;
	--qf-margin: 1.5rem auto;
	--qf-sticky-bottom: 0px;     /* lift the bar above a site's own fixed footer */
	--qf-z: 9990;
}

/* Palette "site": the theme palette (--primary, --primary-dark, --accent),
   as for the QCM. Without one, back to the default values. */
:where(.qf-card.qf-card--palette-site) {
	--qf-fg: var(--primary-dark, #14233a);
	--qf-fg-2: var(--primary, #1f3658);
	--qf-accent: var(--accent, #f59e0b);
	--qf-accent-hover: color-mix(in srgb, var(--accent, #f59e0b) 80%, #ffffff);
	--qf-accent-fg: var(--primary-dark, #14233a);
	--qf-soft: color-mix(in srgb, var(--primary, #1f3658) 6%, #ffffff);
	--qf-line: color-mix(in srgb, var(--primary, #1f3658) 14%, #ffffff);
	--qf-track: color-mix(in srgb, var(--primary, #1f3658) 10%, #ffffff);
}

/* 2. Root ------------------------------------------------------------- */
.qf-card.qf-card,
.qf-card.qf-card *,
.qf-card.qf-card *::before,
.qf-card.qf-card *::after {
	box-sizing: border-box !important;
}
.qf-card.qf-card {
	display: block !important;
	width: 100% !important;
	max-width: var(--qf-max-width) !important;
	margin: var(--qf-margin) !important;
	padding: 18px !important;
	background: var(--qf-bg) !important;
	border: 1px solid var(--qf-line) !important;
	border-radius: var(--qf-radius) !important;
	box-shadow: 0 14px 34px -20px color-mix(in srgb, var(--qf-fg) 35%, transparent) !important;
	color: var(--qf-fg) !important;
	font-family: var(--qf-font) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	text-align: left !important;
	-webkit-font-smoothing: antialiased;
}
.qf-card.qf-card--milestone,
.qf-card.qf-card--review {
	background: var(--qf-soft) !important;
	box-shadow: none !important;
}
/* Theme decorations on text blocks (borders, indents, drop caps). */
.qf-card.qf-card p,
.qf-card.qf-card ul,
.qf-card.qf-card li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	list-style: none !important;
	text-indent: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: inherit;
}
.qf-card.qf-card li::before,
.qf-card.qf-card li::marker,
.qf-card.qf-card p::first-letter {
	content: none;
	float: none !important;
	font-size: inherit !important;
}

/* 3. Texts ------------------------------------------------------------ */
.qf-card.qf-card .qf-card__title {
	margin: 0 0 6px !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--qf-muted) !important;
}
.qf-card.qf-card .qf-card__text {
	margin: 0 0 14px !important;
	font-size: 15px !important;
	color: var(--qf-fg) !important;
}
.qf-card.qf-card .qf-card__score {
	margin: 0 0 14px !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	color: var(--qf-fg) !important;
}
.qf-card.qf-card .qf-card__weakest {
	margin: 0 0 16px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--qf-fg) !important;
}
.qf-card.qf-card .qf-card__note {
	margin: 10px 0 0 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--qf-muted) !important;
	text-align: center !important;
}

/* 4. Domain bars ------------------------------------------------------ */
.qf-card.qf-card .qf-card__domains {
	display: grid !important;
	gap: 10px;
	margin: 0 0 16px !important;
}
.qf-card.qf-card .qf-card__domain {
	display: grid !important;
	grid-template-columns: 1fr auto;
	grid-template-areas: "name count" "bar bar";
	align-items: center;
	gap: 4px 10px;
	font-size: 14px !important;
}
.qf-card.qf-card .qf-card__domain-name {
	grid-area: name;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}
.qf-card.qf-card .qf-card__domain-count {
	grid-area: count;
	font-variant-numeric: tabular-nums;
	color: var(--qf-muted);
}
.qf-card.qf-card .qf-card__bar {
	grid-area: bar;
	display: block !important;
	height: 8px;
	border-radius: 999px;
	background: var(--qf-track) !important;
	overflow: hidden;
}
.qf-card.qf-card .qf-card__bar-fill {
	display: block !important;
	height: 100%;
	min-width: 2px;
	border-radius: 999px;
	background: var(--qf-fg-2) !important;
}
.qf-card.qf-card .qf-card__domain.is-weak .qf-card__domain-name,
.qf-card.qf-card .qf-card__domain.is-weak .qf-card__domain-count {
	color: var(--qf-weak) !important;
}
.qf-card.qf-card .qf-card__domain.is-weak .qf-card__bar-fill {
	background: var(--qf-weak) !important;
}

/* 5. Buttons: links and <button>, every state declares its background --- */
.qf-card.qf-card .qf-card__actions {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
}
.qf-card.qf-card a.qf-card__button,
.qf-card.qf-card a.qf-card__button:link,
.qf-card.qf-card a.qf-card__button:visited,
.qf-card.qf-card a.qf-card__button:hover,
.qf-card.qf-card a.qf-card__button:focus,
.qf-card.qf-card a.qf-card__button:active {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 13px 18px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--qf-accent) !important;
	color: var(--qf-accent-fg) !important;
	font-family: var(--qf-font) !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--qf-accent) 70%, transparent) !important;
	cursor: pointer;
}
.qf-card.qf-card a.qf-card__button:hover,
.qf-card.qf-card a.qf-card__button:focus-visible {
	background: var(--qf-accent-hover) !important;
	color: var(--qf-accent-fg) !important;
}
.qf-card.qf-card a.qf-card__button:focus-visible,
.qf-card.qf-card button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--qf-accent) 55%, transparent) !important;
	outline-offset: 2px !important;
}
.qf-card.qf-card button.qf-card__secondary,
.qf-card.qf-card button.qf-card__secondary:hover,
.qf-card.qf-card button.qf-card__secondary:focus,
.qf-card.qf-card button.qf-card__secondary:active {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 11px 18px !important;
	border: 1.5px solid var(--qf-line) !important;
	border-radius: 999px !important;
	background: var(--qf-bg) !important;
	color: var(--qf-fg) !important;
	font-family: var(--qf-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.qf-card.qf-card button.qf-card__secondary:hover {
	border-color: var(--qf-fg) !important;
}

/* 6. Sticky bar ------------------------------------------------------- */
.qf-card.qf-card.qf-sticky {
	position: fixed !important;
	left: 8px !important;
	right: 8px !important;
	bottom: calc(8px + var(--qf-sticky-bottom)) !important;
	z-index: var(--qf-z) !important;
	width: auto !important;
	max-width: var(--qf-max-width) !important;
	margin: 0 auto !important;
	padding: 10px 44px 10px 14px !important;
	display: flex !important;
	align-items: center;
	gap: 10px;
	background: var(--qf-fg) !important;
	border: 0 !important;
	color: #ffffff !important;
	box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--qf-fg) 60%, transparent) !important;
	animation: qfRise .3s ease both;
}
.qf-card.qf-card.qf-sticky .qf-card__text {
	flex: 1 1 auto;
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
	color: #ffffff !important;
}
.qf-card.qf-card.qf-sticky a.qf-card__button,
.qf-card.qf-card.qf-sticky a.qf-card__button:hover,
.qf-card.qf-card.qf-sticky a.qf-card__button:visited {
	flex: 0 0 auto;
	width: auto !important;
	padding: 9px 14px !important;
	font-size: 14px !important;
	white-space: nowrap;
}
.qf-card.qf-card button.qf-card__close,
.qf-card.qf-card button.qf-card__close:hover,
.qf-card.qf-card button.qf-card__close:focus,
.qf-card.qf-card button.qf-card__close:active {
	position: absolute !important;
	top: 50% !important;
	right: 8px !important;
	transform: translateY(-50%);
	width: 30px !important;
	height: 30px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: #ffffff !important;
	font: 400 22px/30px var(--qf-font) !important;
	text-align: center !important;
	box-shadow: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.qf-card.qf-card button.qf-card__close:hover {
	background: rgba(255, 255, 255, .15) !important;
}

/* 7. Wider screens ---------------------------------------------------- */
@media (min-width: 640px) {
	.qf-card.qf-card {
		padding: 24px 26px !important;
	}
	.qf-card.qf-card .qf-card__actions {
		flex-direction: row;
		align-items: center;
	}
	.qf-card.qf-card a.qf-card__button,
	.qf-card.qf-card a.qf-card__button:hover,
	.qf-card.qf-card a.qf-card__button:visited,
	.qf-card.qf-card button.qf-card__secondary,
	.qf-card.qf-card button.qf-card__secondary:hover {
		width: auto !important;
	}
	.qf-card.qf-card--result a.qf-card__button,
	.qf-card.qf-card--result a.qf-card__button:hover,
	.qf-card.qf-card--result a.qf-card__button:visited {
		flex: 1 1 auto;
	}
	.qf-card.qf-card .qf-card__domain {
		grid-template-columns: minmax(0, 14em) 1fr auto;
		grid-template-areas: "name bar count";
	}
	.qf-card.qf-card.qf-sticky {
		bottom: calc(16px + var(--qf-sticky-bottom)) !important;
		padding: 12px 52px 12px 20px !important;
	}
	.qf-card.qf-card.qf-sticky .qf-card__text {
		font-size: 15px !important;
	}
}

@keyframes qfRise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.qf-card.qf-card,
	.qf-card.qf-card * {
		animation: none !important;
		transition: none !important;
	}
}