/* ---------- Speed test [speed_test] ---------- */

.hat[data-hat-tool="speed-test"] {
	--st-good: #0cce6b;
	--st-good-text: #0a7a43;
	--st-good-soft: #e7f8ef;
	--st-average: #ffa400;
	--st-average-text: #a35200;
	--st-average-soft: #fff4e0;
	--st-poor: #ff4e42;
	--st-poor-text: #c9231a;
	--st-poor-soft: #ffeceb;
}

/* Form: device switch under the search bar */
.hat .hat-st-device {
	display: flex;
	justify-content: center;
	gap: 6px;
	width: fit-content;
	max-width: 100%;
	margin: 14px auto 0;
	padding: 5px;
	border: 0;
	border-radius: 999px;
	background: var(--hat-surface);
}

.hat .hat-st-device-opt {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.hat .hat-st-device-opt input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.hat .hat-st-device-opt span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 7px 20px;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--hat-text);
	transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.hat .hat-st-device-opt:hover span {
	color: var(--hat-primary);
}

.hat .hat-st-device-opt input:checked + span {
	background: var(--hat-white);
	color: var(--hat-primary-dark);
	box-shadow: 0 4px 14px -6px rgba(25, 42, 61, 0.35);
}

.hat .hat-st-device-opt input:focus-visible + span {
	outline: 3px solid rgba(40, 114, 250, 0.45);
	outline-offset: 2px;
}

.hat .hat-st-device-opt input:disabled,
.hat .hat-st-device-opt input:disabled + span {
	cursor: not-allowed;
}

.hat .hat-st-device-opt input:disabled:not(:checked) + span {
	opacity: 0.55;
}

.hat .hat-st-hint {
	text-align: center;
}

/* ---------- Progress ---------- */

.hat .hat-st-loading {
	display: grid;
	gap: 18px;
}

.hat .hat-st-progress {
	padding: 20px 22px;
	border: 1.5px solid var(--hat-border);
	border-radius: var(--hat-radius-lg);
	background: var(--hat-surface-2);
}

.hat .hat-st-progress-head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.hat .hat-st-pulse {
	position: relative;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--hat-primary-soft);
	color: var(--hat-primary);
}

.hat .hat-st-pulse::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2.5px solid transparent;
	border-top-color: var(--hat-primary);
	animation: hat-spin 1s linear infinite;
}

.hat .hat-st-pulse .hat-icon {
	width: 22px;
	height: 22px;
}

.hat .hat-st-progress-text {
	flex: 1;
	min-width: 0;
}

.hat .hat-st-step {
	margin: 0;
	font-weight: 700;
	color: var(--hat-heading);
	animation: hat-fade 0.4s var(--hat-ease);
}

.hat .hat-st-elapsed {
	flex: none;
	min-width: 52px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--hat-white);
	border: 1px solid var(--hat-border);
	font-size: 0.85rem;
	font-weight: 700;
	text-align: center;
	color: var(--hat-text);
	font-variant-numeric: tabular-nums;
}

.hat .hat-st-progress-bar {
	height: 8px;
	margin: 16px 0 10px;
	border-radius: 999px;
	background: var(--hat-border);
	overflow: hidden;
}

.hat .hat-st-progress-bar > span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--hat-primary), #5b9bff);
	transition: width 0.25s linear;
	margin-inline-start: 0;
}

.hat .hat-st-progress-note {
	margin: 0;
	font-size: 0.875rem;
	opacity: 0.85;
}

.hat .hat-st-ghost {
	display: grid;
	gap: 14px;
}

.hat .hat-st-ghost span,
.hat .hat-st-ghost-block {
	display: block;
	border-radius: var(--hat-radius);
	background: linear-gradient(90deg, var(--hat-surface) 25%, #e9eef3 50%, var(--hat-surface) 75%);
	background-size: 200% 100%;
	animation: hat-shimmer 1.4s linear infinite;
}

.hat .hat-st-ghost-scores {
	display: flex;
	justify-content: space-around;
	gap: 12px;
	padding: 18px 0;
}

.hat .hat-st-ghost-scores span {
	width: 96px;
	height: 96px;
	border-radius: 50%;
}

.hat .hat-st-ghost-block {
	height: 150px;
	opacity: 0.85;
}

.hat .hat-st-ghost-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.hat .hat-st-ghost-grid span {
	height: 110px;
	opacity: 0.7;
}

.hat .hat-st-error-extra .hat-actions {
	margin-top: 10px;
}

.hat .hat-st-error-tip {
	margin: 6px 0 0 !important;
	font-size: 0.9rem;
}

/* ---------- Summary ---------- */

.hat .hat-st-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 22px;
	border-radius: var(--hat-radius-lg);
	background: var(--hat-surface);
}

.hat .hat-st-summary-main {
	min-width: 0;
	flex: 1 1 320px;
}

.hat .hat-st-summary-label {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.85;
}

.hat .hat-st-url {
	display: block;
	margin: 2px 0 8px;
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--hat-heading);
	text-decoration: none;
	text-align: right;
	unicode-bidi: plaintext;
	overflow-wrap: anywhere;
}

.hat .hat-st-url:hover {
	color: var(--hat-primary);
}

.hat .hat-st-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	font-size: 0.875rem;
}

.hat .hat-st-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hat .hat-st-meta-item .hat-icon {
	width: 15px;
	height: 15px;
	color: var(--hat-primary);
}

/* ---------- Score gauges ---------- */

.hat .hat-st-scores {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.hat .hat-st-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	min-width: 0;
}

.hat .hat-st-score-label {
	font-weight: 700;
	color: var(--hat-heading);
	font-size: 0.95rem;
	line-height: 1.4;
}

.hat .hat-st-gauge {
	--st-color: #9aa8b6;
	--st-soft: var(--hat-surface);
	--st-text: var(--hat-text);
	position: relative;
	width: 112px;
	height: 112px;
	display: grid;
	place-items: center;
}

.hat .hat-st-gauge svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hat .hat-st-gauge-track {
	fill: var(--st-soft);
	stroke: var(--st-soft);
	stroke-width: 10;
}

.hat .hat-st-gauge-arc {
	fill: none;
	stroke: var(--st-color);
	stroke-width: 10;
	stroke-linecap: round;
	animation: hat-st-draw 1s var(--hat-ease) both;
}

.hat .hat-st-gauge-num {
	position: relative;
	font-size: 2rem;
	font-weight: 800;
	color: var(--st-text);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.hat .hat-st-gauge.is-good { --st-color: var(--st-good); --st-soft: var(--st-good-soft); --st-text: var(--st-good-text); }
.hat .hat-st-gauge.is-average { --st-color: var(--st-average); --st-soft: var(--st-average-soft); --st-text: var(--st-average-text); }
.hat .hat-st-gauge.is-poor { --st-color: var(--st-poor); --st-soft: var(--st-poor-soft); --st-text: var(--st-poor-text); }

@keyframes hat-st-draw {
	from { stroke-dasharray: 0 400; }
}

.hat .hat-st-verdict {
	margin: 18px 0 0;
	padding: 10px 14px;
	border-radius: 12px;
	text-align: center;
	font-weight: 700;
	background: var(--hat-surface);
	color: var(--hat-heading);
}

.hat .hat-st-verdict.is-good { background: var(--st-good-soft); color: var(--st-good-text); }
.hat .hat-st-verdict.is-average { background: var(--st-average-soft); color: var(--st-average-text); }
.hat .hat-st-verdict.is-poor { background: var(--st-poor-soft); color: var(--st-poor-text); }

.hat .hat-st-legend {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}

.hat .hat-st-legend li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.hat .hat-st-legend i {
	display: inline-block;
	width: 10px;
	height: 10px;
}

.hat .hat-st-legend .is-poor i {
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 10px solid var(--st-poor);
}

.hat .hat-st-legend .is-average i {
	background: var(--st-average);
}

.hat .hat-st-legend .is-good i {
	border-radius: 50%;
	background: var(--st-good);
}

/* ---------- Shared bits ---------- */

.hat .hat-st-intro {
	margin: -4px 0 14px;
	font-size: 0.92rem;
}

.hat .hat-st-h4 {
	margin: 4px 0 10px;
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--hat-heading);
}

.hat .hat-st-scope-note {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--hat-primary-soft);
	color: var(--hat-heading);
	font-size: 0.9rem;
}

.hat .hat-st-scope-note .hat-icon {
	margin-top: 4px;
	color: var(--hat-primary);
}

.hat .hat-st-dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #9aa8b6;
}

.hat .is-good > * > .hat-st-dot { background: var(--st-good); }
.hat .is-average > * > .hat-st-dot { background: var(--st-average); border-radius: 2px; }
.hat .is-poor > * > .hat-st-dot {
	width: 0;
	height: 0;
	border-radius: 0;
	background: none;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 10px solid var(--st-poor);
}

.hat .hat-st-mname {
	font-weight: 700;
	color: var(--hat-heading);
	min-width: 0;
}

.hat .hat-st-abbr {
	font-weight: 600;
	font-size: 0.8em;
	color: var(--hat-text);
	opacity: 0.8;
}

.hat .hat-st-value {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hat .hat-st-value small {
	font-size: 0.6em;
	font-weight: 700;
}

.hat .hat-st-rating {
	display: inline-block;
	padding: 1px 9px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
	vertical-align: middle;
}

.hat .is-good .hat-st-value { color: var(--st-good-text); }
.hat .is-average .hat-st-value { color: var(--st-average-text); }
.hat .is-poor .hat-st-value { color: var(--st-poor-text); }
.hat .is-good .hat-st-rating { background: var(--st-good-soft); color: var(--st-good-text); }
.hat .is-average .hat-st-rating { background: var(--st-average-soft); color: var(--st-average-text); }
.hat .is-poor .hat-st-rating { background: var(--st-poor-soft); color: var(--st-poor-text); }

.hat .hat-st-thresholds {
	font-size: 0.78rem;
	opacity: 0.75;
}

/* ---------- Field data ---------- */

.hat .hat-st-tabs {
	margin: 0 0 16px;
}

.hat .hat-st-field-list {
	display: grid;
	gap: 12px;
	margin-bottom: 14px;
}

.hat .hat-st-frow {
	padding: 14px 16px;
	border: 1px solid var(--hat-border);
	border-radius: 14px;
	background: var(--hat-surface-2);
}

.hat .hat-st-frow-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.hat .hat-st-frow-head .hat-st-mname {
	flex: 1 1 150px;
}

.hat .hat-st-frow-val {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hat .hat-st-frow-val .hat-st-value {
	font-size: 1.2rem;
}

.hat .hat-st-dist {
	display: flex;
	height: 22px;
	margin: 10px 0 8px;
	border-radius: 7px;
	overflow: hidden;
	background: var(--hat-surface);
	gap: 2px;
}

.hat .hat-st-dist > span {
	flex-basis: 0;
	display: grid;
	place-items: center;
	min-width: 3px;
	font-size: 0.72rem;
	font-weight: 800;
	color: #fff;
	line-height: 1;
	overflow: hidden;
}

.hat .hat-st-dist .is-good { background: var(--st-good); color: #064d2a; }
.hat .hat-st-dist .is-average { background: var(--st-average); color: #5a3000; }
.hat .hat-st-dist .is-poor { background: var(--st-poor); color: #fff; }

.hat .hat-st-frow-foot {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2px 14px;
	margin: 0;
	font-size: 0.85rem;
}

/* ---------- Lab metrics ---------- */

.hat .hat-st-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 12px;
}

.hat .hat-st-metric {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: 1px solid var(--hat-border);
	border-top: 3px solid #9aa8b6;
	border-radius: 14px;
	background: var(--hat-white);
	min-width: 0;
}

.hat .hat-st-metric.is-good { border-top-color: var(--st-good); }
.hat .hat-st-metric.is-average { border-top-color: var(--st-average); }
.hat .hat-st-metric.is-poor { border-top-color: var(--st-poor); }

.hat .hat-st-metric-head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hat .hat-st-metric-val {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 6px 0 4px;
}

.hat .hat-st-metric-val .hat-st-value {
	font-size: 1.75rem;
	line-height: 1.3;
}

.hat .hat-st-metric-text {
	margin: 0 0 6px;
	font-size: 0.88rem;
	line-height: 1.6;
	flex: 1;
}

.hat .hat-st-metric-extra {
	margin: 0 0 6px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--hat-heading);
}

.hat .hat-st-metric .hat-st-thresholds {
	margin: 0;
	padding-top: 8px;
	border-top: 1px dashed var(--hat-border);
}

/* ---------- Page weight ---------- */

.hat .hat-st-page.has-shot {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 18px;
	align-items: start;
}

.hat .hat-st-page-main {
	min-width: 0;
}

.hat .hat-st-page .hat-kv {
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.hat .hat-st-shot {
	margin: 0;
	text-align: center;
}

.hat .hat-st-shot img {
	display: block;
	width: 100%;
	max-width: 170px;
	height: auto;
	margin: 0 auto;
	border: 1px solid var(--hat-border);
	border-radius: 12px;
	box-shadow: var(--hat-shadow);
	background: var(--hat-surface);
}

.hat .hat-st-shot figcaption {
	margin-top: 8px;
	font-size: 0.78rem;
	opacity: 0.8;
}

/* ---------- Opportunities / diagnostics ---------- */

.hat .hat-st-audits {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--hat-border);
	border-radius: 14px;
	overflow: hidden;
}

.hat .hat-st-audit {
	margin: 0;
	border-top: 1px solid var(--hat-border);
}

.hat .hat-st-audit:first-child {
	border-top: 0;
}

.hat .hat-st-audit summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.15s;
}

.hat .hat-st-audit summary::-webkit-details-marker {
	display: none;
}

.hat .hat-st-audit summary::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-inline-start: 2px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.55;
	transition: transform 0.2s;
}

.hat .hat-st-audit details[open] summary::after {
	transform: rotate(135deg);
}

.hat .hat-st-audit summary:hover {
	background: var(--hat-surface-2);
}

.hat .hat-st-audit summary:focus-visible {
	outline: 3px solid rgba(40, 114, 250, 0.45);
	outline-offset: -3px;
}

.hat .hat-st-shape {
	flex: none;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 10px solid var(--st-poor);
}

.hat .hat-st-audit.is-average .hat-st-shape {
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 2px;
	background: var(--st-average);
}

.hat .hat-st-audit-title {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	color: var(--hat-heading);
	line-height: 1.5;
}

.hat .hat-st-savings {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}

.hat .hat-st-save {
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
	background: var(--st-poor-soft);
	color: var(--st-poor-text);
}

.hat .hat-st-audit.is-average .hat-st-save {
	background: var(--st-average-soft);
	color: var(--st-average-text);
}

.hat .hat-st-save.is-text {
	white-space: normal;
}

.hat .hat-st-audit-display {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--hat-text);
	text-align: left;
	max-width: 45%;
}

.hat .hat-st-audit-body {
	padding: 2px 38px 16px 16px;
	font-size: 0.92rem;
	animation: hat-fade 0.2s var(--hat-ease);
}

.hat .hat-st-audit-body p {
	margin: 0 0 8px;
}

.hat .hat-st-audit-value span {
	font-weight: 700;
	color: var(--hat-heading);
}

.hat .hat-st-audit-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}

.hat .hat-st-chip {
	padding: 1px 8px;
	border-radius: 6px;
	background: var(--hat-surface);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--hat-heading);
}

.hat .hat-st-learn {
	margin-inline-start: auto;
	font-size: 0.85rem;
}

/* ---------- Hosting CTA ---------- */

.hat .hat-st-cta {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border-radius: var(--hat-radius-lg);
	border: 1.5px solid rgba(40, 114, 250, 0.25);
	background: linear-gradient(135deg, var(--hat-primary-soft), var(--hat-white));
}

.hat .hat-st-cta-icon {
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--hat-white);
	color: var(--hat-primary);
	box-shadow: 0 6px 16px -10px rgba(40, 114, 250, 0.8);
}

.hat .hat-st-cta-icon .hat-icon {
	width: 24px;
	height: 24px;
}

.hat .hat-st-cta-body {
	flex: 1;
	min-width: 0;
}

.hat .hat-st-cta-body p {
	margin: 0;
	font-size: 0.92rem;
}

.hat .hat-st-cta-body .hat-st-cta-title {
	margin-bottom: 2px;
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--hat-heading);
}

/* ---------- Notes ---------- */

.hat .hat-st-tips {
	margin: 0 0 16px;
	padding: 0 20px 0 0;
}

.hat .hat-st-tips li {
	margin: 0 0 6px;
	font-size: 0.92rem;
}

.hat .hat-st-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--hat-border);
}

.hat .hat-st-foot-meta {
	margin: 0;
	font-size: 0.8rem;
	opacity: 0.8;
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
	.hat .hat-st-scores {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 22px;
	}

	.hat .hat-st-page.has-shot {
		grid-template-columns: 110px 1fr;
		gap: 14px;
	}
}

@media (max-width: 640px) {
	.hat .hat-st-device {
		width: 100%;
	}

	.hat .hat-st-device-opt {
		flex: 1;
	}

	.hat .hat-st-device-opt span {
		width: 100%;
		justify-content: center;
	}

	.hat .hat-st-progress {
		padding: 16px;
	}

	.hat .hat-st-ghost-scores span {
		width: 64px;
		height: 64px;
	}

	.hat .hat-st-ghost-grid {
		grid-template-columns: 1fr;
	}

	.hat .hat-st-ghost-grid span:nth-child(n + 2) {
		display: none;
	}

	.hat .hat-st-summary {
		padding: 16px;
	}

	.hat .hat-st-summary-side,
	.hat .hat-st-summary-side .hat-btn {
		width: 100%;
	}

	.hat .hat-st-gauge {
		width: 96px;
		height: 96px;
	}

	.hat .hat-st-gauge-num {
		font-size: 1.7rem;
	}

	.hat[data-hat-tool="speed-test"] .hat-section {
		padding: 16px 14px;
	}

	.hat .hat-st-metrics {
		grid-template-columns: 1fr;
	}

	.hat .hat-st-frow {
		padding: 12px;
	}

	.hat .hat-st-page.has-shot {
		grid-template-columns: 1fr;
	}

	.hat .hat-st-shot img {
		max-width: 140px;
	}

	.hat .hat-st-page .hat-kv {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hat .hat-st-audit summary {
		flex-wrap: wrap;
		padding: 12px;
	}

	.hat .hat-st-audit-title {
		flex-basis: calc(100% - 40px);
	}

	.hat .hat-st-savings {
		margin-inline-start: 22px;
		justify-content: flex-start;
	}

	.hat .hat-st-audit-display {
		max-width: none;
		margin-inline-start: 22px;
		text-align: right;
	}

	.hat .hat-st-audit summary::after {
		display: none;
	}

	.hat .hat-st-audit-body {
		padding: 0 12px 14px;
	}

	.hat .hat-st-cta {
		flex-direction: column;
		text-align: center;
	}

	.hat .hat-st-cta .hat-btn {
		width: 100%;
	}

	.hat .hat-st-foot .hat-actions,
	.hat .hat-st-foot .hat-btn,
	.hat .hat-st-links,
	.hat .hat-st-links .hat-btn {
		width: 100%;
	}
}