/*
 * Quiz Unstale Pro : le socle, charge quel que soit le style choisi.
 *
 * Deux couches, et un pont entre elles.
 *
 * 1. DEFENSE. Les themes visent les listes et les boutons du contenu avec des
 *    selecteurs larges : `.content-container ul > li::before` pose une puce
 *    FontAwesome devant chaque reponse, `.entry-content button` peint tous les
 *    boutons en vert et en capitales, `.entry-content p` ecarte les questions
 *    de 30 px. Mesure sur seopepper.com et webandseo.fr. Cette couche les bat
 *    par la classe doublee `.unstale-quiz.unstale-quiz`, sans aucun !important :
 *    (0,2,x) l'emporte sur tout selecteur de theme a une seule classe.
 *
 * 2. DESIGN, dans quiz-full.css ou quiz-minimal.css, entierement sous :where()
 *    donc a specificite nulle : un theme ou le CSS additionnel d'un site le
 *    surcharge sans lutter.
 *
 * Le PONT. Une defense qui poserait `margin: 0` a (0,2,1) interdirait au design
 *    a (0,0,0) de remettre la moindre marge. Les proprietes que les themes
 *    attaquent sont donc lues ici dans des variables internes (`--_uq-*`) que
 *    le design renseigne. Le theme perd la propriete, le design garde la main
 *    sur la valeur. Chaque variable porte le nom de SON element : une
 *    propriete personnalisee s'herite, et une variable partagee entre la
 *    question et ses choix fuirait de l'une aux autres.
 *
 * Rien ici ne masque d'information : sans ce fichier le quiz reste jouable,
 * son volet est un <details> natif (voir Blocks::quiz()).
 */

/*
 * Un mot sans espace (une URL, un nom de fichier) ne pousse jamais l'encart
 * hors de l'ecran d'un telephone. `anywhere` et non `break-word` : lui seul
 * compte dans la largeur minimale, donc dans la colonne de grille du style
 * Complet.
 */
.unstale-quiz.unstale-quiz {
	overflow-wrap: anywhere;
}

/* Defense : les listes. Le compteur est le notre, jamais celui du theme. */
.unstale-quiz.unstale-quiz ol {
	counter-reset: unstale-q;
	list-style: var(--_uq-ol-ls, none);
	margin: 0;
	padding: var(--_uq-ol-p, 0);
}

.unstale-quiz.unstale-quiz ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.unstale-quiz.unstale-quiz li {
	background: none;
	border: 0;
	list-style: inherit;
	padding: 0;
}

.unstale-quiz.unstale-quiz ol > li {
	counter-increment: unstale-q;
	display: var(--_uq-item-d, list-item);
	margin: var(--_uq-item-m, 0);
}

.unstale-quiz.unstale-quiz ul > li {
	display: block;
	margin: var(--_uq-opt-m, 0);
}

/* Puces, compteurs et icones poses par le theme en pseudo-elements. */
.unstale-quiz.unstale-quiz li::before,
.unstale-quiz.unstale-quiz li::after {
	content: none;
}

/*
 * La pastille de numero, vide tant que le design ne la demande pas.
 *
 * `all: unset` d'abord : le ::before que le theme dessinait (position absolue,
 * police d'icones, fond) perd tout, puis la pastille est reconstruite. Elle
 * vit ici et non dans le design parce qu'un pseudo-element sous :where() ne
 * battrait pas le ::before du theme.
 *
 * Sa COULEUR est celle de l'accent et son chiffre est peint par
 * -webkit-text-fill-color : c'est ce qui garde currentColor egal a l'accent
 * dans ce pseudo-element, et permet au design de deriver le fond de la
 * pastille de l'accent meme quand l'accent est la couleur du texte.
 */
.unstale-quiz.unstale-quiz ol > li::before {
	all: unset;
	align-self: baseline;
	background: var(--_uq-badge-bg, currentColor);
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--unstale-accent, currentColor);
	content: var(--_uq-badge, none);
	display: block;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	grid-column: 1;
	grid-row: 1;
	height: 1.6em;
	line-height: 1.6em;
	text-align: center;
	-webkit-text-fill-color: var(--unstale-accent-contrast, #fff);
	width: 1.6em;
}

@media (forced-colors: active) {
	.unstale-quiz.unstale-quiz ol > li::before {
		border: 1px solid CanvasText;
		-webkit-text-fill-color: CanvasText;
	}
}

/*
 * Articles rafraichis AVANT le passage au volet : leur bonne reponse est
 * marquee dans la liste des choix, pas repliee. Ce repere les garde lisibles
 * et ne peut pas etre retire tant qu'un seul article publie porte l'ancienne
 * forme, c'est-a-dire pour toujours.
 */
.unstale-quiz.unstale-quiz ul > li.is-answer::before {
	all: unset;
	content: "\2713\00a0";
}

.unstale-quiz.unstale-quiz p {
	margin: var(--_uq-m, 0);
	padding: var(--_uq-pad, 0);
}

.unstale-quiz.unstale-quiz details {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
}

.unstale-quiz.unstale-quiz .unstale-quiz-sol::before {
	all: unset;
	content: "\2713\00a0";
}

/* Le resume a fait son travail : la reponse est ouverte sous les yeux. */
.unstale-quiz.unstale-quiz .unstale-quiz-a.is-revealed > summary {
	display: none;
}

/*
 * Les choix cliquables, poses par assets/quiz.js.
 *
 * `all: unset` encore : un bouton herite de chaque theme une pile de regles
 * (fond, capitales, espacement de lettres, ombre, hauteur minimale, marge
 * basse, transformation au survol). Elles tombent toutes, et le bouton ne
 * garde que ce que le design lui donne par les variables. Cette regle couvre
 * aussi :hover, car elle s'applique dans tous les etats : un
 * `.entry-content button:hover` (0,2,1) ne la bat pas.
 */
.unstale-quiz.unstale-quiz .unstale-quiz-choice {
	all: unset;
	background: var(--_uq-choice-bg, none);
	border: var(--_uq-choice-bw, 1px) solid var(--_uq-choice-bc, currentColor);
	border-radius: var(--_uq-choice-r, 4px);
	box-shadow: none;
	box-sizing: border-box;
	color: var(--_uq-choice-fg, inherit);
	cursor: pointer;
	display: block;
	font-size: var(--_uq-choice-fs, 1em);
	font-weight: var(--_uq-choice-fw, inherit);
	letter-spacing: normal;
	line-height: var(--_uq-choice-lh, inherit);
	margin: 0;
	min-height: 0;
	opacity: var(--_uq-choice-o, 1);
	overflow-wrap: anywhere;
	padding: var(--_uq-choice-p, 0.35em 0.6em);
	text-align: start;
	text-transform: none;
	transition: var(--_uq-choice-tr, none);
	width: 100%;
}

.unstale-quiz.unstale-quiz .unstale-quiz-choice[aria-disabled="true"] {
	cursor: default;
}

/* Visible quoi que le theme fasse de `button:focus { outline: none }`. */
.unstale-quiz.unstale-quiz .unstale-quiz-choice:focus-visible {
	outline: 2px solid var(--_uq-focus, currentColor);
	outline-offset: 2px;
}

.unstale-quiz.unstale-quiz .unstale-quiz-choice::before,
.unstale-quiz.unstale-quiz .unstale-quiz-choice::after {
	content: none;
}

/*
 * Le verdict est porte par un SYMBOLE, jamais par une couleur seule : une
 * couleur seule serait illisible pour un daltonien, et le style Minimal n'en
 * pose aucune. Le design choisit seulement ou il se place.
 */
.unstale-quiz.unstale-quiz .unstale-quiz-choice.is-correct::after,
.unstale-quiz.unstale-quiz .unstale-quiz-choice.is-wrong::after {
	all: unset;
	float: var(--_uq-mark-float, none);
	margin-inline-start: var(--_uq-mark-gap, 0);
}

.unstale-quiz.unstale-quiz .unstale-quiz-choice.is-correct::after {
	content: "\00a0\2713";
}

.unstale-quiz.unstale-quiz .unstale-quiz-choice.is-wrong::after {
	content: "\00a0\2717";
}