/**
 * Hopeleaf Growth Tools — front end styles.
 *
 * Everything is scoped under .hlgt and sized in rem so it inherits the host
 * theme's typography rather than fighting it. Colours are custom properties,
 * so a theme can restyle the whole set of tools by redefining a handful of
 * values. The palette is the one the Domain Health plugin established, so a
 * site running both does not look like it is running two plugins.
 */

.hlgt {
	--hlgt-bg: #ffffff;
	--hlgt-bg-0: rgba( 255, 255, 255, 0 );
	--hlgt-panel: #f7f8fa;
	--hlgt-ink: #14171f;
	--hlgt-muted: #5b6474;
	--hlgt-line: #e3e6ec;
	--hlgt-accent: #1f6feb;
	--hlgt-pass: #17803d;
	--hlgt-good: #2f9e5e;
	--hlgt-warn: #b45309;
	--hlgt-fail: #c2323b;
	--hlgt-info: #4b5563;

	/* Text laid on top of a solid status colour. */
	--hlgt-on-status: #ffffff;
	--hlgt-on-accent: #ffffff;

	--hlgt-radius: 10px;
	--hlgt-radius-sm: 6px;
	--hlgt-focus: var( --hlgt-accent );
	--hlgt-tool-accent: var( --hlgt-accent );

	color: var( --hlgt-ink );
	max-width: 62rem;
	margin-inline: auto;
	font-size: 1rem;
	line-height: 1.55;
}

/*
 * Dark palette. Off by default: most WordPress themes are light and do not
 * follow the visitor's OS setting, so a tool that darkens itself on its own
 * looks broken on a light page. Opt in per shortcode with theme="dark", or
 * theme="auto" to follow the OS the way the old plugins did.
 */

.hlgt[data-theme="dark"] {
	--hlgt-bg: #14171d;
	--hlgt-bg-0: rgba( 20, 23, 29, 0 );
	--hlgt-panel: #1b1f27;
	--hlgt-ink: #e8eaf0;
	--hlgt-muted: #9aa3b4;
	--hlgt-line: #2a2f3a;
	--hlgt-accent: #5a9bff;
	--hlgt-pass: #3fba6c;
	--hlgt-good: #57c47f;
	--hlgt-warn: #e0a044;
	--hlgt-fail: #f0666f;
	--hlgt-info: #9aa3b4;

	/* The dark palette's status colours are light, so ink reads on them. */
	--hlgt-on-status: #14171d;
	--hlgt-on-accent: #10131a;
}

@media ( prefers-color-scheme: dark ) {

	.hlgt[data-theme="auto"] {
		--hlgt-bg: #14171d;
		--hlgt-bg-0: rgba( 20, 23, 29, 0 );
		--hlgt-panel: #1b1f27;
		--hlgt-ink: #e8eaf0;
		--hlgt-muted: #9aa3b4;
		--hlgt-line: #2a2f3a;
		--hlgt-accent: #5a9bff;
		--hlgt-pass: #3fba6c;
		--hlgt-good: #57c47f;
		--hlgt-warn: #e0a044;
		--hlgt-fail: #f0666f;
		--hlgt-info: #9aa3b4;

		/* The dark palette's status colours are light, so ink reads on them. */
		--hlgt-on-status: #14171d;
		--hlgt-on-accent: #10131a;
	}
}


.hlgt *,
.hlgt *::before,
.hlgt *::after {
	box-sizing: border-box;
}

.hlgt img,
.hlgt svg {
	max-width: 100%;
}

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

/* One focus treatment for everything that takes focus. */
.hlgt a:focus-visible,
.hlgt button:focus-visible,
.hlgt input:focus-visible,
.hlgt select:focus-visible,
.hlgt summary:focus-visible,
.hlgt details:focus-visible {
	outline: 2px solid var( --hlgt-focus );
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- Intro */

.hlgt-intro {
	margin-bottom: 1.4rem;
}

.hlgt-title {
	margin: 0 0 0.3em;
	font-size: 1.6rem;
	line-height: 1.2;
}

.hlgt-sub {
	margin: 0;
	color: var( --hlgt-muted );
}

.hlgt-section-title {
	margin: 0 0 0.3em;
	font-size: 1.05rem;
	line-height: 1.3;
}

.hlgt-section-note {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	color: var( --hlgt-muted );
}

.hlgt-empty {
	margin: 1.5rem 0 0;
	padding: 1rem 1.1rem;
	font-size: 0.95rem;
	color: var( --hlgt-muted );
	background: var( --hlgt-panel );
	border: 1px dashed var( --hlgt-line );
	border-radius: var( --hlgt-radius );
}

/* ----------------------------------------------------- Controls, shared */

.hlgt-input,
.hlgt-select,
.hlgt-gate-email {
	width: 100%;
	min-width: 0;
	padding: 0.8rem 0.9rem;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.3;
	color: var( --hlgt-ink );
	background: var( --hlgt-bg );
	border: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius );
	appearance: none;
	-webkit-appearance: none;
}

.hlgt-select {
	/* A caret drawn in the border colour, so no image is needed. */
	padding-right: 2.2rem;
	background-image:
		linear-gradient( 45deg, transparent 50%, currentColor 50% ),
		linear-gradient( 135deg, currentColor 50%, transparent 50% );
	background-position: right 1.1rem center, right 0.75rem center;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
	cursor: pointer;
}

.hlgt-input:focus,
.hlgt-select:focus,
.hlgt-gate-email:focus {
	border-color: var( --hlgt-accent );
	outline: 2px solid var( --hlgt-focus );
	outline-offset: 1px;
}

.hlgt-input::placeholder,
.hlgt-gate-email::placeholder {
	color: var( --hlgt-muted );
	opacity: 1;
}

.hlgt-btn {
	display: inline-block;
	padding: 0.8rem 1.4rem;
	font-size: 1rem;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.3;
	color: var( --hlgt-on-accent );
	text-align: center;
	text-decoration: none;
	background: var( --hlgt-accent );
	border: 1px solid transparent;
	border-radius: var( --hlgt-radius );
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.hlgt-btn:hover,
.hlgt-btn:focus {
	color: var( --hlgt-on-accent );
	opacity: 0.92;
}

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

.hlgt-btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.hlgt-btn-quiet {
	padding: 0.8rem 1.1rem;
	font-size: 0.95rem;
	font-family: inherit;
	font-weight: 600;
	color: var( --hlgt-muted );
	background: transparent;
	border: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius );
	cursor: pointer;
}

.hlgt-btn-quiet:hover {
	color: var( --hlgt-ink );
	border-color: var( --hlgt-muted );
}

.hlgt-error,
.hlgt-gate-error {
	display: none;
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	font-weight: 500;
	color: var( --hlgt-fail );
}

.hlgt-error.is-visible,
.hlgt-gate-error.is-visible {
	display: block;
}

/* An error is a failure state, not only a red one. */
.hlgt-error.is-visible::before,
.hlgt-gate-error.is-visible::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	margin-right: 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var( --hlgt-on-status );
	background: var( --hlgt-fail );
	border-radius: 999px;
	vertical-align: -0.15rem;
}

/* --------------------------------------------------------- Scanner form */

.hlgt-field {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.hlgt-field .hlgt-input,
.hlgt-field .hlgt-target {
	flex: 1 1 14rem;
	font-size: 1.05rem;
	padding: 0.85rem 1rem;
}

.hlgt-submit {
	flex: 0 0 auto;
	padding: 0.85rem 1.5rem;
}

@media ( max-width: 26rem ) {

	.hlgt-submit {
		flex: 1 1 100%;
	}
}

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

.hlgt-progress {
	margin-top: 1.4rem;
}

.hlgt-progress[hidden] {
	display: none;
}

.hlgt-progress-bar {
	height: 4px;
	overflow: hidden;
	background: var( --hlgt-line );
	border-radius: 999px;
}

.hlgt-progress-bar span {
	display: block;
	width: 0;
	height: 100%;
	background: var( --hlgt-accent );
	border-radius: inherit;
	transition: width 0.3s ease;
}

.hlgt-progress-step {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	color: var( --hlgt-muted );
}

/* ------------------------------------------------- Report header + dial */

.hlgt-report {
	margin-top: 2rem;
}

.hlgt-report:focus {
	outline: none;
}

.hlgt-head {
	display: flex;
	gap: 1.6rem;
	align-items: center;
	flex-wrap: wrap;
	padding: 1.5rem;
	background: var( --hlgt-panel );
	border: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius );
}

.hlgt-dial {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 7rem;
	height: 7rem;
	line-height: 1;
}

/* The ring sits behind the number rather than pushing it around. */
.hlgt-dial svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	/* Start the ring at twelve o'clock. */
	transform: rotate( -90deg );
}

.hlgt-dial circle {
	fill: none;
	stroke-width: 3.2;
}

.hlgt-dial-track {
	stroke: var( --hlgt-line );
}

/*
 * The circle has r="15.9155", so its circumference is 100 and the
 * stroke-dasharray PHP writes is literally "<score> <100 - score>". The
 * animation starts from an empty ring; the implicit closing keyframe is the
 * element's own attribute value, so the score never has to be repeated here.
 */
.hlgt-dial-value {
	stroke: var( --hlgt-info );
	stroke-linecap: round;
	animation: hlgt-dial-in 900ms cubic-bezier( 0.22, 0.8, 0.3, 1 );
}

@keyframes hlgt-dial-in {

	from {
		stroke-dasharray: 0 100;
	}
}

.hlgt-dial-number {
	position: relative;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.hlgt-dial-of {
	position: relative;
	margin-top: 0.3rem;
	font-size: 0.75rem;
	line-height: 1;
	color: var( --hlgt-muted );
}

/* Grade colours the ring, the bars and the score number together. */
.hlgt-grade-excellent .hlgt-dial-value { stroke: var( --hlgt-pass ); }
.hlgt-grade-good .hlgt-dial-value { stroke: var( --hlgt-good ); }
.hlgt-grade-fair .hlgt-dial-value { stroke: var( --hlgt-warn ); }
.hlgt-grade-poor .hlgt-dial-value { stroke: var( --hlgt-fail ); }

.hlgt-grade-excellent .hlgt-dial-number { color: var( --hlgt-pass ); }
.hlgt-grade-good .hlgt-dial-number { color: var( --hlgt-good ); }
.hlgt-grade-fair .hlgt-dial-number { color: var( --hlgt-warn ); }
.hlgt-grade-poor .hlgt-dial-number { color: var( --hlgt-fail ); }

.hlgt-grade-excellent > .hlgt-bar span { background: var( --hlgt-pass ); }
.hlgt-grade-good > .hlgt-bar span { background: var( --hlgt-good ); }
.hlgt-grade-fair > .hlgt-bar span { background: var( --hlgt-warn ); }
.hlgt-grade-poor > .hlgt-bar span { background: var( --hlgt-fail ); }

.hlgt-head-body {
	flex: 1 1 17rem;
	min-width: 0;
}

.hlgt-eyebrow {
	margin: 0 0 0.25em;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --hlgt-muted );
}

.hlgt-head-target {
	margin: 0 0 0.3em;
	font-size: 1.35rem;
	line-height: 1.2;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.hlgt-head-summary {
	margin: 0 0 0.9em;
	color: var( --hlgt-muted );
}

.hlgt-head-meta {
	margin: 0;
	font-size: 0.82rem;
	color: var( --hlgt-muted );
}

.hlgt-recheck {
	margin-left: 0.5rem;
	padding: 0;
	font: inherit;
	color: var( --hlgt-accent );
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.hlgt-recheck:hover {
	text-decoration: none;
}

.hlgt-recheck[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* ---------------------------------------------------------------- Tally */

.hlgt-tally {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin: 0 0 0.85rem;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}

.hlgt-tally li {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	color: var( --hlgt-muted );
}

.hlgt-tally strong {
	font-size: 1.1rem;
	font-weight: 700;
}

.hlgt-tally-fail strong { color: var( --hlgt-fail ); }
.hlgt-tally-warn strong { color: var( --hlgt-warn ); }
.hlgt-tally-pass strong { color: var( --hlgt-pass ); }

/* A shape as well as a colour, so the tally survives a greyscale print. */
.hlgt-tally li::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	flex: 0 0 auto;
	align-self: center;
	background: currentColor;
}

.hlgt-tally-fail::before {
	color: var( --hlgt-fail );
	clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
}

.hlgt-tally-warn::before {
	color: var( --hlgt-warn );
	clip-path: polygon( 50% 0, 100% 100%, 0 100% );
}

.hlgt-tally-pass::before {
	color: var( --hlgt-pass );
	border-radius: 999px;
}

/* ----------------------------------------------------------- Categories */

.hlgt-cats {
	margin-top: 1.6rem;
}

.hlgt-cat-list {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) );
	gap: 0.9rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.hlgt-cat {
	padding: 0.9rem 1rem;
	background: var( --hlgt-bg );
	border: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius );
}

.hlgt-cat-head {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.hlgt-cat-label {
	font-size: 0.92rem;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

.hlgt-cat-score {
	flex: 0 0 auto;
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.hlgt-grade-excellent .hlgt-cat-score { color: var( --hlgt-pass ); }
.hlgt-grade-good .hlgt-cat-score { color: var( --hlgt-good ); }
.hlgt-grade-fair .hlgt-cat-score { color: var( --hlgt-warn ); }
.hlgt-grade-poor .hlgt-cat-score { color: var( --hlgt-fail ); }

.hlgt-cat-counts {
	margin: 0.5rem 0 0;
	font-size: 0.78rem;
	color: var( --hlgt-muted );
}

/* ------------------------------------------------------------ Meter bar */

.hlgt-bar {
	height: 6px;
	overflow: hidden;
	background: var( --hlgt-line );
	border-radius: 999px;
}

.hlgt-bar > span {
	display: block;
	height: 100%;
	background: var( --hlgt-accent );
	border-radius: inherit;
	transform-origin: left center;
	animation: hlgt-bar-in 700ms cubic-bezier( 0.22, 0.8, 0.3, 1 );
}

@keyframes hlgt-bar-in {

	from {
		transform: scaleX( 0 );
	}
}

/* ------------------------------------------------------------- Fix list */

.hlgt-fixes {
	position: relative;
	margin-top: 2rem;
}

.hlgt-fixes .hlgt-section-title {
	font-size: 1.2rem;
}

.hlgt-fix-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hlgt-fix {
	position: relative;
	padding: 1.15rem 1.25rem;
	margin-bottom: 0.75rem;
	background: var( --hlgt-bg );
	border: 1px solid var( --hlgt-line );
	border-left: 4px solid var( --hlgt-info );
	border-radius: var( --hlgt-radius );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 ), 0 6px 18px -12px rgba( 0, 0, 0, 0.35 );
}

.hlgt-fix.hlgt-status-fail { border-left-color: var( --hlgt-fail ); }
.hlgt-fix.hlgt-status-warn { border-left-color: var( --hlgt-warn ); }
.hlgt-fix.hlgt-status-pass { border-left-color: var( --hlgt-pass ); }
.hlgt-fix.hlgt-status-info { border-left-color: var( --hlgt-info ); }

.hlgt-fix-head {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.hlgt-fix-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	font-size: 0.8rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var( --hlgt-muted );
	background: var( --hlgt-panel );
	border-radius: 999px;
}

.hlgt-fix-title {
	flex: 1 1 10rem;
	min-width: 0;
	margin: 0;
	font-size: 1.02rem;
	font-weight: 650;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.hlgt-fix-what {
	margin: 0 0 0.65rem;
	font-size: 0.94rem;
	line-height: 1.55;
	color: var( --hlgt-muted );
}

/* The thing people screenshot: the instruction, boxed and legible. */
.hlgt-fix-how {
	margin: 0;
	padding: 0.75rem 0.9rem;
	font-size: 0.93rem;
	line-height: 1.55;
	color: var( --hlgt-ink );
	background: var( --hlgt-panel );
	border-left: 2px solid var( --hlgt-accent );
	border-radius: var( --hlgt-radius-sm );
}

.hlgt-fix-how strong {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --hlgt-muted );
}

/* ------------------------------------------------- Pips, badges, status */

.hlgt-pip {
	display: inline-block;
	flex: 0 0 auto;
	width: 0.65rem;
	height: 0.65rem;
	background: var( --hlgt-info );
}

/* Shape carries the status too, so colour is never the only signal. */
.hlgt-status-pass > .hlgt-pip {
	background: var( --hlgt-pass );
	border-radius: 999px;
}

.hlgt-status-warn > .hlgt-pip {
	background: var( --hlgt-warn );
	clip-path: polygon( 50% 0, 100% 100%, 0 100% );
}

.hlgt-status-fail > .hlgt-pip {
	background: var( --hlgt-fail );
	clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
}

.hlgt-status-info > .hlgt-pip {
	background: var( --hlgt-info );
	height: 0.25rem;
	align-self: center;
	border-radius: 2px;
}

.hlgt-badge {
	display: inline-block;
	flex: 0 0 auto;
	padding: 0.15rem 0.5rem;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var( --hlgt-on-status );
	background: var( --hlgt-info );
	border-radius: 4px;
}

.hlgt-badge-pass { background: var( --hlgt-pass ); }
.hlgt-badge-warn { background: var( --hlgt-warn ); }
.hlgt-badge-fail { background: var( --hlgt-fail ); }
.hlgt-badge-info { background: var( --hlgt-info ); }

/* ----------------------------------------------------------------- Gate */

/*
 * A stopping point, not a wall: the fixes above fade out under the panel
 * rather than being chopped off, so it reads as "there is more" instead of
 * "you have been blocked".
 */
.hlgt-gate {
	position: relative;
	margin-top: -3rem;
	padding: 1.5rem;
	text-align: center;
	background: var( --hlgt-panel );
	border: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius );
}

.hlgt-gate::before {
	content: "";
	position: absolute;
	right: -1px;
	bottom: 100%;
	left: -1px;
	height: 5.5rem;
	background: linear-gradient(
		to bottom,
		var( --hlgt-bg-0 ),
		var( --hlgt-bg ) 78%,
		var( --hlgt-panel ) 100%
	);
	pointer-events: none;
}

.hlgt-gate-lock {
	position: relative;
	width: 2.6rem;
	height: 2.6rem;
	margin: 0 auto 0.75rem;
	background: var( --hlgt-bg );
	border: 1px solid var( --hlgt-line );
	border-radius: 999px;
}

/* Shackle. */
.hlgt-gate-lock::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: 50%;
	width: 0.85rem;
	height: 0.6rem;
	border: 2px solid var( --hlgt-muted );
	border-bottom: 0;
	border-radius: 0.5rem 0.5rem 0 0;
	transform: translateX( -50% );
}

/* Body. */
.hlgt-gate-lock::after {
	content: "";
	position: absolute;
	top: 1.1rem;
	left: 50%;
	width: 1.15rem;
	height: 0.85rem;
	background: var( --hlgt-accent );
	border-radius: 3px;
	transform: translateX( -50% );
}

.hlgt-gate-title {
	margin: 0 0 0.35em;
	font-size: 1.15rem;
	line-height: 1.3;
}

.hlgt-gate-note {
	margin: 0 0 1.1rem;
	font-size: 0.93rem;
	color: var( --hlgt-muted );
}

.hlgt-gate-form {
	margin: 0;
}

.hlgt-gate-fields {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	max-width: 30rem;
	margin: 0 auto;
	text-align: left;
}

.hlgt-gate-email {
	flex: 1 1 13rem;
}

.hlgt-gate-fields .hlgt-btn {
	flex: 0 0 auto;
}

@media ( max-width: 30rem ) {

	.hlgt-gate-fields .hlgt-btn {
		flex: 1 1 100%;
	}
}

.hlgt-consent {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	max-width: 30rem;
	margin: 0.85rem auto 0;
	font-size: 0.8rem;
	line-height: 1.5;
	text-align: left;
	color: var( --hlgt-muted );
	cursor: pointer;
}

.hlgt-consent input,
.hlgt-gate-consent {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin: 0.2rem 0 0;
	accent-color: var( --hlgt-accent );
}

.hlgt-gate .hlgt-gate-error {
	max-width: 30rem;
	margin: 0.7rem auto 0;
	text-align: left;
}

/* --------------------------------------------------------- Clean report */

.hlgt-clean {
	margin-top: 2rem;
	padding: 1.4rem 1.5rem;
	background: var( --hlgt-panel );
	border: 1px solid var( --hlgt-line );
	border-left: 4px solid var( --hlgt-pass );
	border-radius: var( --hlgt-radius );
}

.hlgt-clean h4 {
	margin: 0 0 0.35em;
	font-size: 1.1rem;
	color: var( --hlgt-pass );
}

.hlgt-clean p {
	margin: 0;
	color: var( --hlgt-muted );
}

/* --------------------------------------------------------------- Panels */

.hlgt-panel {
	margin-top: 1rem;
	background: var( --hlgt-bg );
	border: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius );
}

.hlgt-panel > summary {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0.9rem 1.1rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.hlgt-panel > summary::-webkit-details-marker {
	display: none;
}

.hlgt-panel > summary::after {
	content: "";
	order: 3;
	width: 0.5rem;
	height: 0.5rem;
	margin-left: auto;
	align-self: center;
	border-right: 2px solid var( --hlgt-muted );
	border-bottom: 2px solid var( --hlgt-muted );
	transform: rotate( 45deg ) translate( -0.1rem, -0.1rem );
	transition: transform 0.15s ease;
}

.hlgt-panel[open] > summary::after {
	transform: rotate( -135deg ) translate( -0.1rem, -0.1rem );
}

.hlgt-panel > summary:hover {
	background: var( --hlgt-panel );
	border-radius: var( --hlgt-radius );
}

.hlgt-panel-title {
	font-size: 0.98rem;
}

.hlgt-panel-note {
	font-size: 0.82rem;
	font-weight: 400;
	color: var( --hlgt-muted );
}

.hlgt-panel-body {
	padding: 0 1.1rem 1.1rem;
	border-top: 1px solid var( --hlgt-line );
	padding-top: 1.1rem;
}

.hlgt-panel-body > *:first-child {
	margin-top: 0;
}

.hlgt-panel-body > *:last-child {
	margin-bottom: 0;
}

.hlgt-panel-heading {
	margin: 1.3rem 0 0.5rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --hlgt-muted );
}

.hlgt-panel-line {
	margin: 0 0 0.6rem;
	font-size: 0.88rem;
	overflow-wrap: anywhere;
}

.hlgt-panel-note-inline {
	margin: 0.6rem 0 0;
	font-size: 0.82rem;
	font-style: italic;
	color: var( --hlgt-muted );
}

.hlgt-group-title {
	margin: 1.3rem 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var( --hlgt-muted );
}

.hlgt-panel-body > .hlgt-group-title:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------- Every check */

.hlgt-panel-all {
	margin-top: 1.5rem;
}

.hlgt-check-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hlgt-check {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	padding: 0.55rem 0;
	border-bottom: 1px solid var( --hlgt-line );
}

.hlgt-check:last-child {
	border-bottom: 0;
}

.hlgt-check > .hlgt-pip {
	margin-top: 0.4rem;
}

.hlgt-check-body {
	display: block;
	min-width: 0;
	font-size: 0.9rem;
}

.hlgt-check-label {
	display: block;
	font-weight: 600;
}

.hlgt-check-message {
	display: block;
	color: var( --hlgt-muted );
	overflow-wrap: anywhere;
}

/* ------------------------------------------- Tables, chips, copy, lists */

.hlgt-table {
	width: 100%;
	margin: 0 0 0.6rem;
	font-size: 0.88rem;
	border-collapse: collapse;
	table-layout: fixed;
}

.hlgt-table th,
.hlgt-table td {
	padding: 0.5rem 0.6rem 0.5rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var( --hlgt-line );
	overflow-wrap: anywhere;
}

.hlgt-table th {
	width: 42%;
	font-weight: 600;
	color: var( --hlgt-muted );
}

.hlgt-table tr:last-child th,
.hlgt-table tr:last-child td {
	border-bottom: 0;
}

.hlgt-row-total th,
.hlgt-row-total td {
	font-weight: 700;
	color: var( --hlgt-ink );
	border-top: 2px solid var( --hlgt-line );
}

.hlgt-chips {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
}

.hlgt-chip {
	display: inline-flex;
	gap: 0.35rem;
	align-items: baseline;
	padding: 0.25rem 0.6rem;
	font-size: 0.8rem;
	background: var( --hlgt-panel );
	border: 1px solid var( --hlgt-line );
	border-radius: 999px;
	overflow-wrap: anywhere;
}

.hlgt-chip span {
	color: var( --hlgt-muted );
}

.hlgt-copy {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	max-width: 100%;
	padding: 0.15rem 0.15rem 0.15rem 0.5rem;
	background: var( --hlgt-panel );
	border: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius-sm );
	overflow-wrap: anywhere;
}

.hlgt-copy code {
	min-width: 0;
	font-size: 0.82rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	overflow-wrap: anywhere;
}

.hlgt-copy-btn {
	flex: 0 0 auto;
	padding: 0.25rem 0.55rem;
	font-size: 0.72rem;
	font-family: inherit;
	font-weight: 700;
	color: var( --hlgt-accent );
	background: var( --hlgt-bg );
	border: 1px solid var( --hlgt-line );
	border-radius: 4px;
	cursor: pointer;
}

.hlgt-copy-btn:hover {
	border-color: var( --hlgt-accent );
}

.hlgt-copy-btn.is-copied {
	color: var( --hlgt-on-status );
	background: var( --hlgt-pass );
	border-color: var( --hlgt-pass );
}

.hlgt-plain-list,
.hlgt-notes {
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
	font-size: 0.88rem;
}

.hlgt-plain-list li {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.45rem 0;
	border-bottom: 1px solid var( --hlgt-line );
	overflow-wrap: anywhere;
}

.hlgt-plain-list li:last-child {
	border-bottom: 0;
}

.hlgt-notes {
	margin-top: 1rem;
	color: var( --hlgt-muted );
}

.hlgt-notes li {
	position: relative;
	padding-left: 1rem;
	margin-bottom: 0.35rem;
}

.hlgt-notes li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 0.35rem;
	height: 0.35rem;
	background: var( --hlgt-muted );
	border-radius: 999px;
}

/* Heading outline: indent by level so the shape of the page is visible. */
.hlgt-outline {
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}

.hlgt-outline li {
	display: flex;
	gap: 0.45rem;
	align-items: baseline;
	padding: 0.25rem 0;
	overflow-wrap: anywhere;
}

.hlgt-outline-tag {
	flex: 0 0 auto;
	min-width: 1.7rem;
	padding: 0.05rem 0.3rem;
	font-size: 0.68rem;
	font-weight: 700;
	text-align: center;
	color: var( --hlgt-muted );
	background: var( --hlgt-panel );
	border: 1px solid var( --hlgt-line );
	border-radius: 3px;
}

.hlgt-outline-1 { margin-left: 0; }
.hlgt-outline-2 { margin-left: 0.85rem; }
.hlgt-outline-3 { margin-left: 1.7rem; }
.hlgt-outline-4 { margin-left: 2.55rem; }
.hlgt-outline-5 { margin-left: 3.4rem; }
.hlgt-outline-6 { margin-left: 4.25rem; }

@media ( max-width: 30rem ) {

	.hlgt-outline-3 { margin-left: 0.85rem; }
	.hlgt-outline-4,
	.hlgt-outline-5,
	.hlgt-outline-6 { margin-left: 1.7rem; }
}

/* ------------------------------------------------------ Calculator form */

.hlgt-runner-calc {
	margin-top: 1.5rem;
}

.hlgt-calc-form {
	padding: 1.4rem;
	background: var( --hlgt-panel );
	border: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius );
}

.hlgt-calc-grid {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 1.1rem;
}

/* Widths collapse to one column on a phone and open up as room appears. */
.hlgt-w-full,
.hlgt-w-half,
.hlgt-w-third {
	grid-column: span 6;
	min-width: 0;
}

@media ( min-width: 34rem ) {

	.hlgt-w-half,
	.hlgt-w-third {
		grid-column: span 3;
	}
}

@media ( min-width: 52rem ) {

	.hlgt-w-third {
		grid-column: span 2;
	}
}

.hlgt-calc-field {
	min-width: 0;
}

.hlgt-calc-label {
	display: block;
	margin-bottom: 0.4rem;
	padding: 0;
	font-size: 0.9rem;
	font-weight: 600;
}

.hlgt-calc-help {
	margin: 0.4rem 0 0;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var( --hlgt-muted );
}

.hlgt-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.hlgt-input-wrap {
	display: flex;
	align-items: stretch;
	background: var( --hlgt-bg );
	border: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius );
}

.hlgt-input-wrap:focus-within {
	border-color: var( --hlgt-accent );
	outline: 2px solid var( --hlgt-focus );
	outline-offset: 1px;
}

.hlgt-input-wrap .hlgt-number {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	border-radius: var( --hlgt-radius );
}

.hlgt-input-wrap .hlgt-number:focus {
	outline: none;
}

.hlgt-affix {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 0.75rem;
	font-size: 0.9rem;
	color: var( --hlgt-muted );
	background: var( --hlgt-panel );
}

.hlgt-affix:first-child {
	border-right: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius ) 0 0 var( --hlgt-radius );
}

.hlgt-affix:last-child {
	border-left: 1px solid var( --hlgt-line );
	border-radius: 0 var( --hlgt-radius ) var( --hlgt-radius ) 0;
}

/* --------------------------------------------------- Choices as cards */

.hlgt-choices {
	display: grid;
	gap: 0.5rem;
}

.hlgt-choice {
	position: relative;
	display: block;
	cursor: pointer;
}

/*
 * The input stays in the accessibility tree and keeps its own focus; the
 * card next to it is what gets painted.
 */
.hlgt-choice input {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	opacity: 0;
}

.hlgt-choice-body {
	display: block;
	padding: 0.75rem 0.9rem 0.75rem 2.6rem;
	background: var( --hlgt-bg );
	border: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius );
	transition: border-color 0.12s ease, background 0.12s ease;
}

/* The control itself. */
.hlgt-choice-body::before {
	content: "";
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	width: 1.15rem;
	height: 1.15rem;
	background: var( --hlgt-bg );
	border: 2px solid var( --hlgt-muted );
	border-radius: 4px;
}

.hlgt-choice input[type="radio"] ~ .hlgt-choice-body::before {
	border-radius: 999px;
}

/* The tick or dot. */
.hlgt-choice-body::after {
	content: "";
	position: absolute;
	top: 1.18rem;
	left: 1.2rem;
	width: 0.45rem;
	height: 0.45rem;
	background: var( --hlgt-on-accent );
	border-radius: 999px;
	opacity: 0;
	transform: scale( 0.4 );
	transition: opacity 0.12s ease, transform 0.12s ease;
}

.hlgt-choice:hover .hlgt-choice-body {
	border-color: var( --hlgt-muted );
}

.hlgt-choice input:checked ~ .hlgt-choice-body {
	border-color: var( --hlgt-accent );
	box-shadow: inset 0 0 0 1px var( --hlgt-accent );
}

.hlgt-choice input:checked ~ .hlgt-choice-body::before {
	background: var( --hlgt-accent );
	border-color: var( --hlgt-accent );
}

.hlgt-choice input:checked ~ .hlgt-choice-body::after {
	opacity: 1;
	transform: scale( 1 );
}

.hlgt-choice input:focus-visible ~ .hlgt-choice-body {
	outline: 2px solid var( --hlgt-focus );
	outline-offset: 2px;
}

/* Older engines without :focus-visible still get a ring. */
.hlgt-choice input:focus ~ .hlgt-choice-body {
	outline: 2px solid var( --hlgt-focus );
	outline-offset: 2px;
}

.hlgt-choice input:focus:not( :focus-visible ) ~ .hlgt-choice-body {
	outline: none;
}

.hlgt-choice-label {
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
}

.hlgt-choice-note {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var( --hlgt-muted );
}

/* --------------------------------------------------------------- Toggle */

.hlgt-toggle {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	cursor: pointer;
}

.hlgt-toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.hlgt-toggle-track {
	position: relative;
	flex: 0 0 auto;
	width: 2.6rem;
	height: 1.5rem;
	background: var( --hlgt-line );
	border: 1px solid var( --hlgt-line );
	border-radius: 999px;
	transition: background 0.15s ease;
}

.hlgt-toggle-thumb {
	position: absolute;
	top: 0.15rem;
	left: 0.15rem;
	width: 1.05rem;
	height: 1.05rem;
	background: var( --hlgt-bg );
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.15s ease;
}

.hlgt-toggle input:checked ~ .hlgt-toggle-track {
	background: var( --hlgt-accent );
	border-color: var( --hlgt-accent );
}

.hlgt-toggle input:checked ~ .hlgt-toggle-track .hlgt-toggle-thumb {
	transform: translateX( 1.05rem );
}

.hlgt-toggle input:focus-visible ~ .hlgt-toggle-track {
	outline: 2px solid var( --hlgt-focus );
	outline-offset: 2px;
}

.hlgt-toggle-label {
	font-size: 0.9rem;
	font-weight: 600;
}

/* On is stated in text as well as position, for anyone who cannot see it. */
.hlgt-toggle input:checked ~ .hlgt-toggle-label::after {
	content: " ✓";
	color: var( --hlgt-pass );
}

.hlgt-calc-actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 1.3rem;
}

.hlgt-calc-submit {
	flex: 0 0 auto;
}

.hlgt-calc-reset {
	flex: 0 0 auto;
}

@media ( max-width: 26rem ) {

	.hlgt-calc-submit,
	.hlgt-calc-reset {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------- Calculator result */

.hlgt-calc-result {
	margin-top: 2rem;
}

.hlgt-headline {
	padding: 1.6rem 1.5rem;
	text-align: center;
	background: var( --hlgt-panel );
	border: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius );
}

.hlgt-headline-label {
	margin: 0 0 0.35em;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --hlgt-muted );
}

.hlgt-headline-value {
	margin: 0;
	font-size: clamp( 2rem, 8vw, 3rem );
	font-weight: 700;
	line-height: 1.1;
	color: var( --hlgt-accent );
	overflow-wrap: anywhere;
}

.hlgt-headline-note {
	margin: 0.5em 0 0;
	font-size: 0.9rem;
	color: var( --hlgt-muted );
}

.hlgt-calc-summary {
	margin: 1.2rem 0 0;
	font-size: 1rem;
	line-height: 1.6;
}

.hlgt-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 9.5rem, 1fr ) );
	gap: 0.8rem;
	margin: 1.3rem 0 0;
	padding: 0;
	list-style: none;
}

.hlgt-stat {
	padding: 0.9rem 1rem;
	background: var( --hlgt-bg );
	border: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius );
}

.hlgt-stat-accent {
	border-color: var( --hlgt-accent );
	box-shadow: inset 0 0 0 1px var( --hlgt-accent );
}

.hlgt-stat-value {
	display: block;
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.hlgt-stat-accent .hlgt-stat-value {
	color: var( --hlgt-accent );
}

.hlgt-stat-label {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.85rem;
	color: var( --hlgt-muted );
}

.hlgt-stat-note {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.78rem;
	color: var( --hlgt-muted );
}

.hlgt-compare {
	margin-top: 1.4rem;
}

.hlgt-compare-row {
	display: grid;
	grid-template-columns: minmax( 6rem, 9rem ) 1fr auto;
	gap: 0.75rem;
	align-items: center;
	padding: 0.5rem 0;
}

.hlgt-compare-label {
	font-size: 0.88rem;
	color: var( --hlgt-muted );
	overflow-wrap: anywhere;
}

.hlgt-compare-value {
	font-size: 0.9rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hlgt-compare-row.is-accent .hlgt-compare-label,
.hlgt-compare-row.is-accent .hlgt-compare-value {
	color: var( --hlgt-ink );
}

.hlgt-compare-row.is-accent .hlgt-bar > span {
	background: var( --hlgt-accent );
}

.hlgt-compare-row:not( .is-accent ) .hlgt-bar > span {
	background: var( --hlgt-muted );
}

@media ( max-width: 30rem ) {

	.hlgt-compare-row {
		grid-template-columns: 1fr auto;
	}

	.hlgt-compare-row .hlgt-bar {
		grid-column: 1 / -1;
		order: 3;
	}
}

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

.hlgt-cta {
	display: flex;
	gap: 1.2rem;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1.5rem;
	margin-top: 2rem;
	background: var( --hlgt-panel );
	border: 1px solid var( --hlgt-line );
	border-radius: var( --hlgt-radius );
}

.hlgt-cta-body {
	flex: 1 1 18rem;
	min-width: 0;
}

.hlgt-cta-body h4 {
	margin: 0 0 0.35em;
	font-size: 1.15rem;
	line-height: 1.3;
}

.hlgt-cta-body p {
	margin: 0;
	color: var( --hlgt-muted );
}

.hlgt-btn-cta {
	flex: 0 0 auto;
	padding: 0.9rem 1.6rem;
}

@media ( max-width: 30rem ) {

	.hlgt-btn-cta {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------------ What this checks */

.hlgt-checklist {
	margin-top: 2rem;
}

.hlgt-checklist-items {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
	gap: 0.6rem 1.2rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.hlgt-checklist-items li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.92rem;
	line-height: 1.5;
}

.hlgt-checklist-items li::before {
	content: "";
	position: absolute;
	top: 0.35em;
	left: 0;
	width: 0.65rem;
	height: 0.35rem;
	border-left: 2px solid var( --hlgt-pass );
	border-bottom: 2px solid var( --hlgt-pass );
	transform: rotate( -45deg );
}

.hlgt-checklist-items strong {
	display: block;
}

.hlgt-checklist-items span {
	color: var( --hlgt-muted );
}

/* -------------------------------------------------------- Page content */

.hlgt-content {
	margin-top: 2.5rem;
}

.hlgt-content-section {
	margin-bottom: 2rem;
}

.hlgt-content-section h2,
.hlgt-faq h2 {
	margin: 0 0 0.5em;
	font-size: 1.3rem;
	line-height: 1.25;
}

.hlgt-content-section p {
	margin: 0 0 1em;
	line-height: 1.65;
}

.hlgt-content-list {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.hlgt-content-list li {
	position: relative;
	padding-left: 1.1rem;
	margin-bottom: 0.5rem;
	line-height: 1.6;
}

.hlgt-content-list li::before {
	content: "";
	position: absolute;
	top: 0.65em;
	left: 0;
	width: 0.35rem;
	height: 0.35rem;
	background: var( --hlgt-accent );
	border-radius: 999px;
}

.hlgt-content-list strong {
	display: block;
}

.hlgt-content-list span {
	color: var( --hlgt-muted );
}

.hlgt-faq {
	margin-top: 2.5rem;
}

.hlgt-faq-item {
	border-bottom: 1px solid var( --hlgt-line );
}

.hlgt-faq-item > summary {
	position: relative;
	padding: 0.9rem 2rem 0.9rem 0;
	font-size: 1rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.hlgt-faq-item > summary::-webkit-details-marker {
	display: none;
}

.hlgt-faq-item > summary::after {
	content: "";
	position: absolute;
	top: 1.3rem;
	right: 0.35rem;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var( --hlgt-muted );
	border-bottom: 2px solid var( --hlgt-muted );
	transform: rotate( 45deg );
	transition: transform 0.15s ease;
}

.hlgt-faq-item[open] > summary::after {
	transform: rotate( -135deg );
}

.hlgt-faq-answer {
	padding: 0 0 1rem;
}

.hlgt-faq-answer p {
	margin: 0 0 0.8em;
	line-height: 1.65;
	color: var( --hlgt-muted );
}

.hlgt-faq-answer p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------- Other tools */

.hlgt-related {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var( --hlgt-line );
}

.hlgt-related-list,
.hlgt-dir-list {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) );
	gap: 0.8rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.hlgt-related-item a,
.hlgt-dir-item a {
	display: block;
	height: 100%;
	padding: 1rem 1.1rem;
	text-decoration: none;
	color: var( --hlgt-ink );
	background: var( --hlgt-bg );
	border: 1px solid var( --hlgt-line );
	border-left: 3px solid var( --hlgt-tool-accent );
	border-radius: var( --hlgt-radius );
	transition: border-color 0.12s ease, transform 0.12s ease;
}

.hlgt-related-item a:hover,
.hlgt-dir-item a:hover {
	color: var( --hlgt-ink );
	border-color: var( --hlgt-tool-accent );
	transform: translateY( -1px );
}

.hlgt-related-name,
.hlgt-dir-name {
	display: block;
	font-size: 0.98rem;
	font-weight: 650;
}

.hlgt-related-desc,
.hlgt-dir-desc {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var( --hlgt-muted );
}

/* ------------------------------------------------------------ Directory */

.hlgt-directory {
	margin-block: 1.5rem;
}

.hlgt-dir-kind {
	display: inline-block;
	margin-bottom: 0.45rem;
	padding: 0.1rem 0.45rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --hlgt-tool-accent );
	background: var( --hlgt-panel );
	border-radius: 3px;
}

@media ( min-width: 40rem ) {

	.hlgt-cols-1 .hlgt-dir-list { grid-template-columns: 1fr; }
	.hlgt-cols-2 .hlgt-dir-list { grid-template-columns: repeat( 2, 1fr ); }
	.hlgt-cols-3 .hlgt-dir-list { grid-template-columns: repeat( 2, 1fr ); }
	.hlgt-cols-4 .hlgt-dir-list { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( min-width: 56rem ) {

	.hlgt-cols-3 .hlgt-dir-list { grid-template-columns: repeat( 3, 1fr ); }
	.hlgt-cols-4 .hlgt-dir-list { grid-template-columns: repeat( 4, 1fr ); }
}

/* ------------------------------------------------------ Reduced motion */

@media ( prefers-reduced-motion: reduce ) {

	.hlgt *,
	.hlgt *::before,
	.hlgt *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* --------------------------------------------------------------- Print */

@media print {

	.hlgt {
		max-width: none;
		color: #000;
		--hlgt-bg: #fff;
		--hlgt-bg-0: rgba( 255, 255, 255, 0 );
		--hlgt-panel: #fff;
		--hlgt-ink: #000;
		--hlgt-muted: #333;
		--hlgt-line: #bbb;
	}

	/* Anything that only exists to be clicked. */
	.hlgt-form,
	.hlgt-progress,
	.hlgt-calc-form,
	.hlgt-gate,
	.hlgt-related,
	.hlgt-checklist,
	.hlgt-content,
	.hlgt-recheck,
	.hlgt-copy-btn,
	.hlgt-error,
	.hlgt-gate-error {
		display: none !important;
	}

	.hlgt-intro {
		margin-bottom: 0.5rem;
	}

	.hlgt-report,
	.hlgt-calc-result {
		margin-top: 0;
	}

	/* Keep the score: it is the reason the page gets printed. */
	.hlgt-head,
	.hlgt-fix,
	.hlgt-cat,
	.hlgt-stat,
	.hlgt-headline,
	.hlgt-panel {
		border-color: #bbb;
		box-shadow: none;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.hlgt-dial svg,
	.hlgt-bar,
	.hlgt-bar > span,
	.hlgt-badge,
	.hlgt-pip {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Every collapsed panel opens, so nothing is missing from the paper. */
	.hlgt details > summary {
		display: block;
	}

	.hlgt details > summary::after {
		display: none;
	}

	.hlgt-panel-body,
	.hlgt-faq-answer {
		display: block !important;
	}

	.hlgt-fixes {
		margin-top: 1.2rem;
	}

	.hlgt-fix {
		margin-bottom: 0.5rem;
	}

	/* Keep the offer, drop the button chrome. */
	.hlgt-cta {
		padding: 0.8rem 0;
		margin-top: 1rem;
		border: 0;
		border-top: 1px solid #bbb;
		border-radius: 0;
	}

	.hlgt-btn-cta {
		padding: 0;
		font-weight: 700;
		color: #000;
		background: none;
		border: 0;
	}

	.hlgt-btn-cta::after {
		content: " (" attr( href ) ")";
		font-weight: 400;
		font-size: 0.8em;
		word-break: break-all;
	}
}

/* ------------------------------------------ Small screens, down to 320px */

@media ( max-width: 24rem ) {

	.hlgt-head,
	.hlgt-calc-form,
	.hlgt-cta,
	.hlgt-gate,
	.hlgt-headline {
		padding: 1.1rem;
	}

	.hlgt-fix {
		padding: 0.95rem 1rem;
	}

	.hlgt-title {
		font-size: 1.35rem;
	}

	.hlgt-head-target {
		font-size: 1.15rem;
	}

	.hlgt-dial {
		width: 6rem;
		height: 6rem;
	}

	.hlgt-dial-number {
		font-size: 1.7rem;
	}
}

/* Nothing inside a tool may push the page sideways. */
.hlgt,
.hlgt-runner,
.hlgt-output,
.hlgt-report {
	overflow-wrap: break-word;
}

.hlgt-panel-body {
	overflow-x: auto;
}