/*
 * Quiz Unstale Pro, style Complet (defaut) : pastilles numerotees, choix en
 * cartes, verdict en couleur en plus du symbole.
 *
 * Tout est sous :where(), a specificite nulle : un theme reprend n'importe
 * quelle valeur avec une seule classe. La palette passe par les variables
 * publiques ci-dessous, la seule surface documentee pour les sites :
 *
 *   --unstale-accent           pastilles, survol, focus, lien "voir la reponse"
 *   --unstale-accent-contrast  chiffre pose sur la pastille
 *   --unstale-text             texte du quiz
 *   --unstale-bg               fond de l'encart
 *   --unstale-card-bg          fond des choix
 *   --unstale-border           bordures de l'encart, des choix et du score
 *   --unstale-correct          texte et bordure de la bonne reponse
 *   --unstale-correct-bg       fond de la bonne reponse
 *   --unstale-wrong            texte de la mauvaise reponse
 *   --unstale-wrong-bg         fond de la mauvaise reponse
 *   --unstale-radius           rayon de l'encart (les choix en prennent 2px de moins)
 *
 * Les fonds et bordures neutres derivent de currentColor : sur un theme
 * sombre ils s'eclaircissent au lieu de poser du blanc sous un texte clair.
 * Les deux etats du verdict restent opaques et clairs, eux : leur texte fonce
 * y garde le contraste AA sur n'importe quel theme.
 */

:where(.unstale-quiz) {
	/* L'accent suit, dans l'ordre : le reglage du site (style en ligne pose
	   par Plugin::enqueue_content_assets()), la couleur des liens lue par
	   quiz.js, puis la couleur du texte. */
	--unstale-accent: var(--unstale-link, currentColor);
	--unstale-accent-contrast: #fff;
	--unstale-text: currentColor;
	--unstale-bg: color-mix(in srgb, currentColor 3%, transparent);
	--unstale-card-bg: transparent;
	--unstale-border: color-mix(in srgb, currentColor 16%, transparent);
	--unstale-correct: #1d6b3c;
	--unstale-correct-bg: color-mix(in srgb, var(--unstale-correct) 8%, #fff);
	--unstale-wrong: #8a3a3a;
	--unstale-wrong-bg: color-mix(in srgb, var(--unstale-wrong) 7%, #fff);
	--unstale-radius: 10px;

	/* Internes : lues par la defense de quiz.css. currentColor y vaut
	   l'accent, voir la pastille dans quiz.css. Repli sans syntaxe de
	   couleur relative : l'accent melange a 28 % de noir. */
	--_uq-badge: counter(unstale-q);
	--_uq-badge-bg: color-mix(in srgb, currentColor 72%, #000);
	--_uq-focus: var(--unstale-accent);

	background: var(--unstale-bg);
	border: 1px solid var(--unstale-border);
	border-radius: var(--unstale-radius);
	color: var(--unstale-text);
	margin: 1.5em 0;
	padding: 1.5em clamp(1em, 4.5vw, 1.75em);
}

/*
 * Ou la syntaxe de couleur relative existe, deux derivations exactes.
 *
 * La pastille garde la teinte de l'accent mais plafonne sa luminosite : un
 * chiffre blanc reste ainsi au-dessus de 4,5:1 (AA) quel que soit l'accent
 * choisi, meme un jaune ou un bleu clair. Mesure dans
 * dev/quiz-demo/check.mjs sur tout le cercle chromatique.
 *
 * Les choix prennent un fond blanc quand le texte est fonce, et restent
 * transparents quand il est clair : sur un theme sombre une carte blanche
 * effacerait le texte.
 */
@supports (color: rgb(from currentColor r g b)) {
	:where(.unstale-quiz) {
		--unstale-card-bg: rgb(from currentColor 255 255 255 / clamp(0, (128 - (0.299 * r + 0.587 * g + 0.114 * b)) * 1000, 1));
		--_uq-badge-bg: oklch(from currentColor min(l, 0.5) c h);
	}
}

:where(.unstale-quiz .unstale-quiz-title) {
	--_uq-m: 0 0 1em;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * Chaque question est une grille : la pastille en premiere colonne, tout le
 * reste en seconde, aligne sous l'intitule. L'alignement sur la LIGNE DE BASE
 * pose le chiffre a hauteur de la premiere ligne de la question, quelle que
 * soit la taille de police que le theme donne a ses paragraphes.
 */
:where(.unstale-quiz ol > li) {
	--_uq-item-d: grid;
	align-items: baseline;
	column-gap: 0.75em;
	grid-template-columns: auto minmax(0, 1fr);
}

:where(.unstale-quiz ol > li > *) {
	grid-column: 2;
	min-width: 0;
}

:where(.unstale-quiz ol > li + li) {
	--_uq-item-m: 1.75em 0 0;
}

:where(.unstale-quiz .unstale-quiz-q) {
	--_uq-m: 0 0 0.75em;
	font-weight: 700;
	line-height: 1.5;
}

:where(.unstale-quiz ul > li + li) {
	--_uq-opt-m: 0.25em 0 0;
}

:where(.unstale-quiz li.is-live ul > li + li) {
	--_uq-opt-m: 0.5em 0 0;
}

:where(.unstale-quiz ul > li.is-answer) {
	font-weight: 600;
}

:where(.unstale-quiz .unstale-quiz-choice) {
	--_uq-choice-bg: var(--unstale-card-bg);
	--_uq-choice-bc: var(--unstale-border);
	--_uq-choice-fg: var(--unstale-text);
	--_uq-choice-fs: 15px;
	--_uq-choice-fw: 500;
	--_uq-choice-lh: 1.4;
	--_uq-choice-p: 0.75em 1em;
	--_uq-choice-r: calc(var(--unstale-radius) - 2px);
	--_uq-choice-tr: border-color 0.15s ease, background-color 0.15s ease;
	--_uq-mark-float: right;
	--_uq-mark-gap: 0.5em;
}

:where(.unstale-quiz .unstale-quiz-choice:not([aria-disabled="true"]):hover, .unstale-quiz .unstale-quiz-choice:focus-visible) {
	--_uq-choice-bc: var(--unstale-accent);
	--_uq-choice-bg: color-mix(in srgb, var(--unstale-accent) 7%, var(--unstale-card-bg));
}

/* Les deux etats viennent APRES le survol : un choix corrige qui garde le
   focus clavier doit montrer son verdict, pas la teinte du survol. La bordure
   de 2px reprend 1px au padding pour que le texte ne bouge pas. */
:where(.unstale-quiz .unstale-quiz-choice.is-correct) {
	--_uq-choice-bc: color-mix(in srgb, var(--unstale-correct) 80%, #fff);
	--_uq-choice-bg: var(--unstale-correct-bg);
	--_uq-choice-bw: 2px;
	--_uq-choice-fg: var(--unstale-correct);
	--_uq-choice-fw: 600;
	--_uq-choice-p: calc(0.75em - 1px) calc(1em - 1px);
}

:where(.unstale-quiz .unstale-quiz-choice.is-wrong) {
	--_uq-choice-bc: color-mix(in srgb, var(--unstale-wrong) 45%, #fff);
	--_uq-choice-bg: var(--unstale-wrong-bg);
	--_uq-choice-fg: var(--unstale-wrong);
	--_uq-choice-o: 1;
}

/* Le lien prend l'accent tire vers le texte : un accent clair choisi pour
   ses pastilles resterait sinon trop pale pour du texte de 14px. */
:where(.unstale-quiz .unstale-quiz-a > summary) {
	color: color-mix(in oklab, var(--unstale-accent) 70%, var(--unstale-text));
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	margin-top: 0.75em;
}

:where(.unstale-quiz .unstale-quiz-sol) {
	--_uq-m: 0.5em 0 0;
	font-weight: 600;
}

:where(.unstale-quiz .unstale-quiz-why) {
	--_uq-m: 0.35em 0 0;
	font-size: 15px;
	line-height: 1.6;
}

:where(.unstale-quiz .unstale-quiz-score) {
	--_uq-m: 1.5em 0 0;
	--_uq-pad: 1em 0 0;
	border-top: 1px solid var(--unstale-border);
	font-weight: 700;
	text-align: right;
}

:where(.unstale-quiz .unstale-quiz-score.is-final) {
	font-size: 1.15em;
}

@media (prefers-reduced-motion: reduce) {
	:where(.unstale-quiz .unstale-quiz-choice) {
		--_uq-choice-tr: none;
	}
}