/**
 * Stile dei risultati del survey.
 *
 * I colori riprendono i token del sito (plugins/jef4website/css/jef-object-frontend.css)
 * con un valore di ripiego, così il blocco resta leggibile anche dentro un
 * iframe dove quel foglio non fosse caricato.
 */

.espc-results {
	--espc-ink: var(--primary-website-color, #222222);
	--espc-ink-soft: var(--secondary-website-color, #4e5762);
	--espc-accent: #066aab;
	--espc-rule: #e2e5e9;
	--espc-surface: var(--grey-light-website-color, #f5f5f5);

	/* Barra proporzionale: token separati dall'accent, così si ricolora da sola. */
	--espc-bar-fill: var(--espc-accent);
	--espc-bar-track: var(--espc-rule);
	--espc-bar-height: .5rem;

	font-family: var(--primary-website-font, "Open Sans", sans-serif);
	color: var(--espc-ink);
}

/* Totale delle risposte: in alto a destra del blocco */

.espc-results__summary {
	font-size: 1.05rem;
	margin: 0 0 2rem;
	text-align: right;
}

.espc-results__empty,
.espc-results-q__empty {
	color: var(--espc-ink-soft);
	font-style: italic;
}

/* Domanda */

.espc-results-q {
	margin: 0 0 2.75rem;
}

.espc-results-q__title {
	font-size: 1.1rem;
	line-height: 1.4;
	margin: 0 0 .35rem;
}

p.espc-results-q__note {
	display: none;
}

.espc-results-q__note {
	color: var(--espc-ink-soft);
	font-size: .875rem;
	margin: 0 0 .9rem;
}

/* Utility: visibile solo agli screen reader */

.espc-results-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Risposte: tabella a due colonne, senza intestazioni visibili */

.espc-results-table {
	border-collapse: collapse;
	width: 100%;
}

.espc-results-table th,
.espc-results-table td {
	/*
	 * Niente border-bottom: da qui in poi il separatore fra le righe è la
	 * traccia grigia della barra, che corre per tutta la larghezza. Due linee
	 * a pochi pixel di distanza sarebbero solo rumore.
	 */
	padding: .45rem 0 .85rem;
	vertical-align: baseline;
}

/*
 * I background delle celle vengono dipinti sopra quello della riga: vanno
 * forzati trasparenti, altrimenti una zebratura del tema coprirebbe la barra.
 */

.espc-results .espc-results-table tbody th,
.espc-results .espc-results-table tbody td {
	background-color: transparent;
}

/*
 * La barra è lo sfondo della riga, non un elemento in più: non tocca la
 * larghezza delle due colonne (decisiva sotto i 400px e dentro l'iframe), non
 * aggiunge nodi che l'aggiornamento automatico debba ricostruire e resta fuori
 * dall'albero di accessibilità, dove la percentuale è già leggibile come testo.
 *
 * I quattro stop sono espliciti di proposito: la forma compatta
 * "colore 0 var(--espc-pct)" è un multi-position color stop, che Firefox
 * interpreta solo dalla versione 83.
 */

.espc-results-table__row {
	--espc-pct: 0%;

	background-image: linear-gradient(
		to right,
		var(--espc-bar-fill) 0,
		var(--espc-bar-fill) var(--espc-pct),
		var(--espc-bar-track) var(--espc-pct),
		var(--espc-bar-track) 100%
	);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% var(--espc-bar-height);

	/*
	 * Gli sfondi in stampa vengono eliminati per impostazione predefinita:
	 * senza questa riga il foglio stampato perderebbe tutte le barre.
	 */
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact;
}

.espc-results-table__label {
	font-weight: 400;
	text-align: left;
	line-height: 1.4;
}

.espc-results-table__value {
	text-align: right;
	white-space: nowrap;
	padding-left: 1.5rem;
}

/*
 * Valore registrato che non corrisponde a nessuna opzione attuale del form:
 * di norma significa che l'etichetta è stata rinominata dopo che erano già
 * arrivate delle risposte.
 */

.espc-results-table__row.is-unmatched {
	opacity: .65;
	font-style: italic;
}

.espc-results-pct {
	color: var(--espc-accent);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.espc-results-n {
	color: var(--espc-ink-soft);
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
}

/* Matrice delle priorità */

.espc-results-scroll {
	overflow-x: auto;
}

.espc-results-matrix {
	border-collapse: collapse;
	width: 100%;
	min-width: 40rem;
}

.espc-results-matrix th,
.espc-results-matrix td {
	border-bottom: 1px solid var(--espc-rule);
	padding: .5rem .7rem;
	text-align: left;
	vertical-align: top;
}

.espc-results-matrix thead th {
	background: var(--espc-surface);
	font-size: .8125rem;
	line-height: 1.3;
	vertical-align: bottom;
}

.espc-results-matrix tbody th {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.espc-results-matrix td .espc-results-pct {
	display: inline-block;
	text-align: left;
	min-width: 3.4rem;
}

/* Avvisi e debug: visibili solo a chi può modificare i contenuti */

.espc-results-notice {
	border-left: 3px solid #d63637;
	background: var(--espc-surface);
	padding: .6rem .9rem;
	font-size: .9rem;
}

.espc-results-debug {
	margin-top: 2.5rem;
	border: 1px solid var(--espc-rule);
	padding: .75rem 1rem;
	font-size: .8125rem;
}

.espc-results-debug__table {
	border-collapse: collapse;
	width: 100%;
}

.espc-results-debug__table th,
.espc-results-debug__table td {
	border: 1px solid var(--espc-rule);
	padding: .25rem .5rem;
	text-align: left;
	vertical-align: top;
}

.espc-results-debug pre {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: .75rem;
}

@media print {
	.espc-results-q {
		break-inside: avoid;
	}

	.espc-results-debug {
		display: none;
	}
}