/* PixelSpeed – test velocità. Si appoggia ai colori della grafica "Galleria" (body.pxp-v2), con valori di riserva. */
.pxpst {
	--pxpst-line: var(--pxp-line, rgba(255, 255, 255, .08));
	--pxpst-line2: var(--pxp-line2, rgba(255, 255, 255, .16));
	--pxpst-text: var(--pxp-text, #e9ebec);
	--pxpst-muted: var(--pxp-muted, #8f9aa1);
	--pxpst-accent: var(--pxp-orange-lt, #d98a50);
	--pxpst-serif: var(--pxp-serif, "Cormorant Garamond", Georgia, serif);
	--pxpst-good: #4cc38a;
	--pxpst-avg: #e3a13b;
	--pxpst-poor: #ef6a5f;
	color: var(--pxpst-text);
}

/* Modulo */
.pxpst-form { margin: 0; }
.pxpst .pxpst-label { display: block; margin-bottom: .6em; }
.pxpst-row { display: flex; gap: 16px; align-items: flex-end; }
.pxpst .pxpst-url { flex: 1; min-width: 0; margin: 0; font-size: clamp(1.1rem, 2vw, 1.4rem); height: 3.1em; }
.pxpst .pxpst-go { margin: 0; flex: none; }
.pxpst .pxpst-go[disabled] { opacity: .55; cursor: progress; }
.pxpst-device { border: 0; padding: 0; margin: 1.1em 0 0; display: flex; gap: 22px; }
.pxpst .pxpst-device label { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; letter-spacing: .18em; padding: 6px 0; }
.pxpst-device input { accent-color: var(--pxpst-accent); margin: 0; }
.pxpst-note { font-size: 13px; color: var(--pxpst-muted); margin: 1.2em 0 0; max-width: 46em; }

/* Stato e avanzamento */
.pxpst-status:empty { display: none; }
.pxpst-status { margin-top: 2em; }
.pxpst-msg { margin: 0 0 .8em; font-family: var(--pxpst-serif); font-size: 1.5rem; font-style: italic; color: var(--pxpst-text); }
.pxpst-bar { height: 1px; background: var(--pxpst-line2); position: relative; overflow: hidden; }
.pxpst-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 2%); background: var(--pxpst-accent); transition: width .5s linear; }
.pxpst-error { margin: 0; padding: 14px 18px; border-left: 2px solid var(--pxpst-poor); background: rgba(239, 106, 95, .08); }

/* Risultato */
.pxpst-result { margin-top: 3em; padding-top: 2.4em; border-top: 1px solid var(--pxpst-line); }
.pxpst-eyebrow { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--pxpst-accent); margin: 0 0 .6em; word-break: break-all; }
.pxpst-verdict { font-family: var(--pxpst-serif); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.2; margin: 0 0 1.4em; max-width: 26em; }
.pxpst-verdict:focus { outline: none; }

.pxpst-gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 2.6em; }
.pxpst-gauge { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pxpst-gauge svg { width: 104px; height: 104px; transform: rotate(-90deg); }
.pxpst-ring-bg { fill: none; stroke: var(--pxpst-line2); stroke-width: 3; }
.pxpst-ring { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .2, 1); }
.pxpst-score { position: absolute; top: 52px; left: 50%; transform: translate(-50%, -50%); font-family: var(--pxpst-serif); font-size: 2.3rem; line-height: 1; color: var(--pxpst-text); }
.pxpst-gauge-label { margin-top: .8em; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pxpst-muted); }
.pxpst-gauge.pxpst-good { color: var(--pxpst-good); }
.pxpst-gauge.pxpst-avg { color: var(--pxpst-avg); }
.pxpst-gauge.pxpst-poor { color: var(--pxpst-poor); }
.pxpst-gauge.pxpst-na { color: var(--pxpst-muted); }

.pxpst-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.pxpst .pxpst-h { font-size: 1.5rem; margin: 0 0 .8em; }
.pxpst-metrics { margin: 0; border-top: 1px solid var(--pxpst-line); }
.pxpst-metric { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--pxpst-line); }
.pxpst .pxpst-metric dt, .pxpst .pxpst-metric dd { margin: 0; padding: 0; float: none; width: auto; font-size: .98rem; text-transform: none; letter-spacing: 0; font-style: normal; }
.pxpst-metric dt { color: var(--pxpst-text); font-weight: 300; display: flex; align-items: center; gap: 10px; }
.pxpst-metric dt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pxpst-muted); flex: none; }
.pxpst-metric.pxpst-good dt::before { background: var(--pxpst-good); }
.pxpst-metric.pxpst-avg dt::before { background: var(--pxpst-avg); }
.pxpst-metric.pxpst-poor dt::before { background: var(--pxpst-poor); }
.pxpst .pxpst-metric dd { font-family: var(--pxpst-serif); font-size: 1.35rem; white-space: nowrap; }
.pxpst-field { font-size: 13px; color: var(--pxpst-muted); margin: 1em 0 0; }

.pxpst-issues { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pxpst-line); }
.pxpst-issues li { margin: 0; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--pxpst-line); position: relative; }
.pxpst-issues li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 10px; height: 1px; background: var(--pxpst-accent); }
.pxpst-issue-title { display: block; }
.pxpst-issue-gain { display: block; font-size: 13px; color: var(--pxpst-muted); margin-top: .2em; }

.pxpst-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 2.6em; }
.pxpst-cta .button { margin: 0; }
.pxpst-report::after { content: " ↗"; }

@media (max-width: 849px) {
	.pxpst-cols { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 549px) {
	.pxpst-row { flex-direction: column; align-items: stretch; }
	.pxpst .pxpst-go { width: 100%; }
	.pxpst-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
	.pxpst-gauge svg { width: 88px; height: 88px; }
	.pxpst-score { top: 44px; font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
	.pxpst-ring, .pxpst-bar::after { transition: none; }
}