/**
 * L'esame lato pilota.
 *
 * Tutto è confinato dentro .wpvams-exam: questa pagina finisce dentro il tema
 * della compagnia, e un selettore generico verrebbe sovrascritto o
 * sovrascriverebbe. I colori sono pochi e dichiarati qui in cima: un esame che
 * cambia aspetto a metà, fra la presentazione e il compito, sembra rotto.
 */

.wpvams-exam {
	--wpvams-exam-ink: #1d2327;
	--wpvams-exam-soft: #646970;
	--wpvams-exam-line: #dcdcde;
	--wpvams-exam-bg: #fff;
	--wpvams-exam-accent: #2271b1;
	--wpvams-exam-ok: #1e7b34;
	--wpvams-exam-warn: #8a5700;
	--wpvams-exam-bad: #b32d2e;

	color: var(--wpvams-exam-ink);
	max-width: 52em;
}

.wpvams-exam-title {
	margin-bottom: .3em;
}

.wpvams-exam-intro {
	color: var(--wpvams-exam-soft);
}

.wpvams-exam-warn,
.wpvams-exam-warn-start {
	color: var(--wpvams-exam-warn);
	font-weight: 600;
}

.wpvams-exam-hint {
	color: var(--wpvams-exam-soft);
	font-size: .9em;
}

/* --- presentazione ----------------------------------------------------- */

.wpvams-exam-rules,
.wpvams-exam-material,
.wpvams-exam-blocked,
.wpvams-exam-result {
	border: 1px solid var(--wpvams-exam-line);
	border-radius: 6px;
	padding: 1em 1.4em;
	margin: 1.2em 0;
	background: var(--wpvams-exam-bg);
}

.wpvams-exam-rules h3,
.wpvams-exam-material h3,
.wpvams-exam-blocked h3,
.wpvams-exam-result h3 {
	margin-top: 0;
}

.wpvams-exam-rules ul,
.wpvams-exam-blocked ul {
	margin: 0;
	padding-left: 1.2em;
}

.wpvams-exam-award {
	margin-bottom: 0;
	font-weight: 600;
	color: var(--wpvams-exam-accent);
}

.wpvams-exam-blocked {
	border-left: 4px solid var(--wpvams-exam-warn);
}

.wpvams-exam-btn {
	display: inline-block;
	background: var(--wpvams-exam-accent);
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: .7em 1.6em;
	font-size: 1.05em;
	cursor: pointer;
	text-decoration: none;
}

.wpvams-exam-btn:hover,
.wpvams-exam-btn:focus {
	background: #135e96;
	color: #fff;
}

.wpvams-exam-btn-small {
	padding: .35em .9em;
	font-size: .9em;
}

/* --- il compito -------------------------------------------------------- */

/*
 * La barra resta a vista mentre si scorre: il pilota deve poter sapere quanto
 * tempo gli resta senza tornare in cima, che è il momento in cui si perde il
 * segno di dov'era arrivato.
 */
.wpvams-exam-bar {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 1em;
	background: #1d2327;
	color: #fff;
	padding: .7em 1.1em;
	border-radius: 6px;
}

.wpvams-exam-name {
	font-weight: 600;
	flex: 1 1 auto;
}

.wpvams-exam-clock {
	font-family: "SF Mono", "Roboto Mono", Consolas, "Courier New", monospace;
	font-size: 1.4em;
	font-variant-numeric: tabular-nums;
}

/* Gli ultimi due minuti. Il colore da solo non basta a chi non lo distingue:
   il countdown resta comunque leggibile in cifre, che è l'informazione vera. */
.wpvams-exam-clock.is-urgent {
	color: #ff8a80;
}

.wpvams-exam-state {
	font-size: .85em;
	opacity: .8;
	min-width: 8em;
	text-align: right;
}

.wpvams-exam-note {
	min-height: 1.4em;
	color: var(--wpvams-exam-warn);
	font-weight: 600;
}

.wpvams-exam-q {
	border: 1px solid var(--wpvams-exam-line);
	border-radius: 6px;
	padding: 1em 1.3em;
	margin: 1em 0;
}

.wpvams-exam-q legend {
	font-weight: 600;
	padding: 0 .4em;
}

.wpvams-exam-qn {
	display: inline-block;
	background: var(--wpvams-exam-accent);
	color: #fff;
	border-radius: 50%;
	width: 1.7em;
	height: 1.7em;
	line-height: 1.7em;
	text-align: center;
	margin-right: .5em;
	font-size: .85em;
}

.wpvams-exam-pts {
	color: var(--wpvams-exam-soft);
	font-weight: 400;
	font-size: .85em;
	margin-left: .5em;
}

.wpvams-exam-opt {
	display: block;
	padding: .45em .2em;
	cursor: pointer;
}

.wpvams-exam-opt input {
	margin-right: .6em;
}

.wpvams-exam-text {
	width: 100%;
	padding: .6em;
	border: 1px solid var(--wpvams-exam-line);
	border-radius: 4px;
}

/*
 * Niente selezione del testo durante il compito. È un deterrente e non una
 * difesa — vedi il commento in cima a public/js/exam.js — e resta confinato al
 * compito: sulla presentazione e sul materiale di studio il testo si seleziona
 * e si copia come su qualunque altra pagina, perché serve a studiare.
 */
.wpvams-exam-paper,
.wpvams-exam-paper legend,
.wpvams-exam-paper label {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

/* La risposta libera è l'eccezione: lì si scrive, e impedire di selezionare
   quello che si è appena scritto significa impedire di correggerlo. */
.wpvams-exam-text {
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}

/* --- esito ------------------------------------------------------------- */

.wpvams-exam-result.wpvams-exam-passed {
	border-left: 4px solid var(--wpvams-exam-ok);
}

.wpvams-exam-result.wpvams-exam-failed,
.wpvams-exam-result.wpvams-exam-invalidated {
	border-left: 4px solid var(--wpvams-exam-bad);
}

.wpvams-exam-result.wpvams-exam-pending_review {
	border-left: 4px solid var(--wpvams-exam-warn);
}

.wpvams-exam-score {
	font-size: 1.15em;
	font-weight: 600;
}

.wpvams-exam-notes {
	background: #f6f7f7;
	border-radius: 4px;
	padding: .8em 1em;
	font-style: italic;
}

/* --- bacheca ----------------------------------------------------------- */

.wpvams-exam-notice {
	border: 1px solid var(--wpvams-exam-accent);
	border-left: 4px solid var(--wpvams-exam-accent);
	border-radius: 6px;
	padding: 1em 1.3em;
	margin: 1.2em 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6em;
}

.wpvams-exam-table {
	width: 100%;
	border-collapse: collapse;
}

.wpvams-exam-table th,
.wpvams-exam-table td {
	border-bottom: 1px solid var(--wpvams-exam-line);
	padding: .7em .5em;
	text-align: left;
	vertical-align: top;
}

.wpvams-exam-table th {
	font-size: .85em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wpvams-exam-soft);
}

/* Su telefono la tabella diventa un elenco: quattro colonne su 360 pixel
   producono una riga per parola, ed è il punto in cui i piloti la chiudono. */
@media (max-width: 640px) {
	.wpvams-exam-table thead {
		display: none;
	}

	.wpvams-exam-table tr {
		display: block;
		border-bottom: 2px solid var(--wpvams-exam-line);
		padding: .6em 0;
	}

	.wpvams-exam-table td {
		display: block;
		border: 0;
		padding: .15em 0;
	}

	.wpvams-exam-bar {
		flex-wrap: wrap;
	}

	.wpvams-exam-state {
		text-align: left;
	}
}