/* Foglio delle due pagine di diagnostica, /systemcheck e /mediacheck.
 *
 * Sono la stessa pagina con una sorgente diversa -- tracce sintetiche l'una,
 * webcam e microfono veri l'altra -- quindi condividono il foglio: un ritocco
 * al layout non puo' farle divergere.
 *
 * Sta qui e non in assets/style.css perche' quel foglio e' condiviso da tutta
 * l'applicazione: una regola aggiunta li' per una pagina di diagnostica
 * ricadrebbe su stanza e wizard. Qui invece nulla esce da .system-check /
 * .media-check / .nc-*, e le pagine lo caricano dopo style.css.
 *
 * Le regole su html/body non sono cosmetiche: style.css impone
 * overflow:hidden e height:100% a tutte le pagine, e su una pagina di
 * diagnostica che cresce in altezza quello significa contenuto non
 * raggiungibile. Il font-size porta !important perche' le media query di
 * style.css lo forzano a loro volta (stessa ragione per cui la .media-check
 * di style.css fa lo stesso). */

html.system-check,
body.system-check,
html.media-check,
body.media-check {
	background: #eef3f8;
	height: auto;
	min-height: 100%;
	overflow: auto;
	font-size: 11pt !important;
	color: #082842;
}

.nc-page {
	max-width: 880px;
	margin: 0 auto;
	padding: 32px 16px 56px;
}

.nc-card {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 2px 20px rgba(8, 40, 66, .10);
	padding: 28px 32px 32px;
}

.nc-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 18px;
	margin-bottom: 4px;
	border-bottom: 1px solid #e3ebf3;
}

.nc-logo {
	height: 38px;
	width: auto;
}

.nc-title {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 600;
}

/* --- Stato iniziale: solo introduzione e pulsante ---------------------- */

.nc-intro {
	text-align: center;
	padding: 30px 0 14px;
}

.nc-intro-text {
	max-width: 580px;
	margin: 0 auto 28px;
	line-height: 1.65;
	color: #3d5a73;
}

.nc-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 0;
	border-radius: 999px;
	padding: 14px 34px;
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 600;
	color: #ffffff;
	background: #0b74c4;
	box-shadow: 0 4px 14px rgba(11, 116, 196, .35);
	cursor: pointer;
	transition: background .15s ease, box-shadow .15s ease;
}

.nc-btn:hover {
	background: #0960a3;
}

.nc-btn:active {
	transform: translateY(1px);
}

.nc-btn:disabled {
	background: #9db6c9;
	box-shadow: none;
	cursor: default;
}

.nc-btn:focus-visible {
	outline: 3px solid rgba(11, 116, 196, .45);
	outline-offset: 2px;
}

/* --- Avanzamento ------------------------------------------------------- */

.nc-progress {
	margin: 22px 0 26px;
}

.nc-progress-track {
	height: 6px;
	border-radius: 999px;
	background: #e3ebf3;
	overflow: hidden;
}

.nc-progress-fill {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, #0b74c4, #35a8e0);
	transition: width .3s linear;
}

.nc-progress-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 9px;
	font-size: .85rem;
	color: #7b93a8;
}

/* La barra cresce su 25 secondi, quindi da ferma sembra ferma: la rotella
   accanto all'etichetta dice a colpo d'occhio che il test sta ancora
   lavorando, senza dover fissare la barra per capirlo. */
.nc-progress-spin {
	--fa-animation-duration: 1s;
	color: #9db6c9;
}

/* --- Sezioni ----------------------------------------------------------- */

.nc-section {
	margin-bottom: 28px;
}

.nc-section:last-child {
	margin-bottom: 0;
}

.nc-section-title {
	margin: 0 0 12px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #7b93a8;
}

/* --- Sistema: le tre voci compatte ------------------------------------- */

.nc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 6px;
}

.nc-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 6px 14px;
	border: 1px solid #e3ebf3;
	border-radius: 999px;
	background: #f4f8fb;
	font-size: .88rem;
	color: #5b768d;
}

.nc-chip b {
	font-weight: 600;
	color: #082842;
	text-transform: capitalize;
}

/* --- Righe di esito ---------------------------------------------------- */

.nc-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 11px 0;
	border-top: 1px solid #f0f5f9;
}

.nc-row:first-of-type {
	border-top: 0;
}

.nc-ico {
	flex: none;
	width: 20px;
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.55;
	color: #c3d3e0;
}

.nc-row-body {
	min-width: 0;
}

.nc-row-label {
	font-weight: 600;
}

.nc-row-value {
	margin-top: 1px;
	color: #4d6a83;
	line-height: 1.55;
}

/* Riga ancora in attesa: un trattino, cosi' la colonna non resta muta. */
.nc-row-value:empty::after {
	content: "\2014";
	color: #a9bccc;
}

/* --- Metriche ---------------------------------------------------------- */

.nc-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
	gap: 12px;
}

.nc-tile {
	padding: 14px 16px;
	border: 1px solid #e3ebf3;
	border-radius: 12px;
	background: #f4f8fb;
}

.nc-tile-label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 6px;
	font-size: .78rem;
	color: #7b93a8;
}

.nc-tile-value {
	font-size: 1.05rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- Video ------------------------------------------------------------- */

.nc-videos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.nc-video {
	margin: 0;
}

.nc-video-title {
	margin-bottom: 8px;
	font-weight: 600;
}

.nc-video video {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	background: #0b1a26;
}

.nc-video-info {
	margin-top: 9px;
	font-size: .82rem;
	line-height: 1.55;
	color: #6b849b;
}

/* --- Esito finale ------------------------------------------------------ */

.nc-final {
	/* Non e' piu' l'ultimo blocco della pagina: sotto ci sono metriche e video,
	   e senza questo stacco l'esito ci finirebbe appiccicato. */
	margin-bottom: 28px;
	padding: 16px 18px;
	border: 1px solid #bfe5d0;
	border-radius: 12px;
	background: #e8f6ee;
	font-weight: 600;
}

.nc-next {
	margin-top: 14px;
	padding: 16px 18px;
	border: 1px solid #e3ebf3;
	border-radius: 12px;
	background: #f4f8fb;
	line-height: 1.6;
}

.nc-final a,
.nc-next a,
.nc-video-info a {
	color: #0b74c4;
	text-decoration: underline;
}

@media (max-width: 576px) {
	.nc-page {
		padding: 16px 10px 40px;
	}

	.nc-card {
		padding: 20px 18px 24px;
		border-radius: 12px;
	}

	.nc-header {
		gap: 12px;
	}

	.nc-title {
		font-size: 1.1rem;
	}
}

/* Esito negativo: il test si e' concluso ma il percorso media non e' mai
   salito. Rosso e non giallo, perche' qui non c'e' un "funziona ma": con
   questa rete la stanza non si apre. */
.nc-final.nc-final-error {
	border-color: #f0c2c2;
	background: #fdeeee;
	font-weight: 400;
	line-height: 1.6;
}

/* Rotella delle verifiche in corso. Il giro di default di Font Awesome e' 2s,
   troppo lento per leggersi come "sto lavorando": a 1s si vede il movimento
   senza diventare irrequieto. */
.nc-ico.fa-spin {
	--fa-animation-duration: 1s;
}

/* Chi ha chiesto meno animazioni si tiene l'icona ferma: resta comunque
   distinguibile da un esito, che e' spunta, croce o triangolo. */
@media (prefers-reduced-motion: reduce) {
	.nc-ico.fa-spin,
	.nc-progress-spin {
		-webkit-animation: none;
		animation: none;
	}
}