/* ── PIM PageSpeed Monitor — front-end shortcode styles ──────────────────── */
.pim-psm-front {
	--pim-psm-teal: #00A79D;
	--pim-psm-teal-dim: #008f86;
	--pim-psm-mid: #6b6b6b;
	--pim-psm-dark: #2c2c2c;
	--pim-psm-good: #00A79D;
	--pim-psm-ok: #f59e0b;
	--pim-psm-bad: #ef4444;
	--pim-psm-none: #b9b9b9;
	--pim-psm-border: #e6e6e3;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--pim-psm-dark);
	line-height: 1.5;
	max-width: 100%;
	box-sizing: border-box;
}
.pim-psm-front *,
.pim-psm-front *::before,
.pim-psm-front *::after { box-sizing: inherit; }

.pim-psm-front__title {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--pim-psm-dark);
}

/* ── Highlights: legend + stat cards ──────────────────────────────────── */
.pim-psm-front__highlights {
	margin-bottom: 20px;
}

.pim-psm-front__legend {
	font-size: .85rem;
	color: var(--pim-psm-mid);
	margin: 0 0 12px;
}

.pim-psm-front__stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.pim-psm-front__stat {
	background: #fafaf8;
	border: 1.5px solid var(--pim-psm-border);
	border-radius: 12px;
	padding: 14px 16px;
}

.pim-psm-front__stat-label {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--pim-psm-mid);
	margin-bottom: 8px;
	line-height: 1.3;
}

.pim-psm-front__stat-value {
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--pim-psm-dark);
	line-height: 1.1;
}
.pim-psm-front__stat-value--muted { color: var(--pim-psm-none); }

.pim-psm-front__stat-pair {
	display: flex;
	gap: 16px;
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--pim-psm-dark);
	line-height: 1.1;
}
.pim-psm-front__stat-pair small {
	font-size: .6rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--pim-psm-mid);
}

.pim-psm-front__stat-sub {
	font-size: .78rem;
	color: var(--pim-psm-mid);
	margin-top: 4px;
}

@media (max-width: 640px) {
	.pim-psm-front__stat-row { grid-template-columns: 1fr; }
}

.pim-psm-front__empty {
	color: var(--pim-psm-mid);
	font-size: .95rem;
	font-style: italic;
}

.pim-psm-front__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.pim-psm-front__card {
	background: #fff;
	border: 1.5px solid var(--pim-psm-border);
	border-radius: 12px;
	padding: 16px;
}

.pim-psm-front__card-top { margin-bottom: 12px; }

.pim-psm-front__name {
	font-weight: 700;
	font-size: 1rem;
	color: var(--pim-psm-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pim-psm-front__url {
	font-size: .8rem;
	color: var(--pim-psm-mid);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 2px;
}

.pim-psm-front__status {
	font-size: .85rem;
	color: var(--pim-psm-mid);
	padding: 4px 0;
}
.pim-psm-front__status--warn { color: #b07300; }
.pim-psm-front__status--error { color: #b3261e; }

.pim-psm-front__scores {
	display: flex;
	justify-content: center;
	gap: 28px;
}

/* ── Score gauges (Lighthouse-style circular rings) ───────────────────── */
.pim-psm-front__gauge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.pim-psm-front__gauge-ring {
	position: relative;
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pim-psm-front__gauge-ring svg {
	position: absolute;
	inset: 0;
}

.pim-psm-front__gauge-track {
	stroke: #ececeb;
}

.pim-psm-front__gauge-fill {
	stroke-linecap: round;
	transition: stroke-dashoffset .6s ease;
}

.pim-psm-front__gauge-number {
	position: relative;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--pim-psm-dark);
}

.pim-psm-front__gauge-label {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pim-psm-mid);
}

/* Ring fill + number color by score band */
.pim-psm-front__gauge-ring.is-good .pim-psm-front__gauge-fill { stroke: var(--pim-psm-good); }
.pim-psm-front__gauge-ring.is-ok   .pim-psm-front__gauge-fill { stroke: var(--pim-psm-ok); }
.pim-psm-front__gauge-ring.is-bad  .pim-psm-front__gauge-fill { stroke: var(--pim-psm-bad); }
.pim-psm-front__gauge-ring.is-none .pim-psm-front__gauge-fill { stroke: var(--pim-psm-none); }

.pim-psm-front__gauge-ring.is-good .pim-psm-front__gauge-number { color: var(--pim-psm-good); }
.pim-psm-front__gauge-ring.is-ok   .pim-psm-front__gauge-number { color: var(--pim-psm-ok); }
.pim-psm-front__gauge-ring.is-bad  .pim-psm-front__gauge-number { color: var(--pim-psm-bad); }
.pim-psm-front__gauge-ring.is-none .pim-psm-front__gauge-number { color: var(--pim-psm-none); }

.pim-psm-front__checked {
	font-size: .72rem;
	color: #9b9b9b;
	margin-top: 10px;
}

.pim-psm-front__footer {
	margin-top: 14px;
	font-size: .78rem;
	color: #9b9b9b;
}

/* Shared text-color utility — used by the improvement stat's up/down arrow
   as well as the gauge number colors set above. */
.pim-psm-front .is-good { color: var(--pim-psm-good); }
.pim-psm-front .is-ok   { color: var(--pim-psm-ok); }
.pim-psm-front .is-bad  { color: var(--pim-psm-bad); }
.pim-psm-front .is-none { color: var(--pim-psm-none); }

@media (max-width: 480px) {
	.pim-psm-front__list { grid-template-columns: 1fr; }
}