/**
 * Autism Test, front end.
 *
 * Two things shape almost every decision in this file.
 *
 * First, it has to survive somebody else's theme. A plugin stylesheet loads into
 * a page it did not build, next to CSS written by somebody who has never heard
 * of it, and themes routinely set things like `button { text-transform:
 * uppercase }` or `li { list-style: disc }` globally. The resets near the top use
 * :where() so they sit at zero specificity: they clean up the inherited mess
 * without ever beating a deliberate rule of our own further down.
 *
 * Second, no web fonts, no images, no external anything. Every illustration is
 * inline SVG and every font is a system stack, so the whole plugin costs one
 * stylesheet and one script.
 *
 * Colours come from custom properties set on the wrapper by PHP, which is how a
 * site owner picks an accent without touching a line of this file.
 */

/* ===================================================================
   Tokens
   =================================================================== */

.ats {
	/* Fallbacks. The template overwrites these inline. */
	--ats-a: #4f46e5;
	--ats-a2: #0ea5a4;
	--ats-a-rgb: 79, 70, 229;
	--ats-a2-rgb: 14, 165, 164;
	--ats-r: 22px;
	--ats-scale: 1;
	--ats-display: inherit;

	--ats-bg: #ffffff;
	--ats-card: #ffffff;
	--ats-raise: #ffffff;
	--ats-ink: #14161c;
	--ats-mute: #565e6e;
	--ats-line: rgba(16, 18, 24, 0.11);
	--ats-soft: rgba(16, 18, 24, 0.045);
	--ats-softer: rgba(16, 18, 24, 0.025);
	--ats-shadow: 0 1px 2px rgba(16, 18, 24, 0.05), 0 12px 32px -12px rgba(16, 18, 24, 0.14);
	--ats-shadow-lg: 0 2px 4px rgba(16, 18, 24, 0.05), 0 28px 60px -20px rgba(16, 18, 24, 0.22);

	--ats-ok: #0f766e;
	--ats-ok-bg: rgba(15, 118, 110, 0.09);
	--ats-warn: #b45309;
	--ats-warn-bg: rgba(180, 83, 9, 0.09);

	/*
	 * The accent, but safe to put on top of a card as text or as a selected
	 * state. On a white card the raw accent is fine. On the dark card it is not:
	 * a mid tone indigo on #14171f measures about 2.9 to 1, which fails AA for
	 * text and sits under the 3 to 1 a control outline needs. The dark blocks
	 * below lighten it, and this line is the fallback for a browser without
	 * color-mix, which simply keeps the old behaviour.
	 */
	--ats-a-text: var(--ats-a);

	--ats-gap: 22px;
	--ats-fs: calc(16px * var(--ats-scale));

	color: var(--ats-ink);
	font-size: var(--ats-fs);
	line-height: 1.6;
	position: relative;
	isolation: isolate;
	container-type: inline-size;

	/*
	 * The wrapper paints its own canvas rather than borrowing the page's.
	 *
	 * Everything inside a card is safe either way, because the card brings its
	 * own background. The hero, the section headings, the ledes and the footer
	 * note do not sit on a card, and without this they are drawn in whichever
	 * ink this plugin picked on top of whatever colour the theme happens to
	 * use. The default colour mode follows the visitor device, so the ordinary
	 * case of a light WordPress theme and a visitor whose phone is set to dark
	 * produced near white text on the theme's white page. On a health screener
	 * that is not a cosmetic problem.
	 *
	 * In the overwhelmingly common case, a light theme with the plugin in light
	 * mode, this paints white on white and is invisible.
	 */
	background: var(--ats-bg);
}

/* Dark, either forced or followed. Both selectors carry the same declarations
   rather than sharing a block, because a browser that does not understand one
   of them must still apply the other. */
.ats--dark {
	--ats-bg: #0d0f14;
	--ats-card: #14171f;
	--ats-raise: #1b1f2a;
	--ats-ink: #eceff5;
	--ats-mute: #9ba3b4;
	--ats-line: rgba(255, 255, 255, 0.13);
	--ats-soft: rgba(255, 255, 255, 0.055);
	--ats-softer: rgba(255, 255, 255, 0.03);
	--ats-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
	--ats-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 28px 60px -20px rgba(0, 0, 0, 0.7);
	--ats-ok: #5eead4;
	--ats-ok-bg: rgba(94, 234, 212, 0.12);
	--ats-warn: #fbbf24;
	--ats-warn-bg: rgba(251, 191, 36, 0.12);
	--ats-a-text: color-mix(in srgb, var(--ats-a) 45%, #fff);
}

@media (prefers-color-scheme: dark) {
	.ats--auto {
		--ats-bg: #0d0f14;
		--ats-card: #14171f;
		--ats-raise: #1b1f2a;
		--ats-ink: #eceff5;
		--ats-mute: #9ba3b4;
		--ats-line: rgba(255, 255, 255, 0.13);
		--ats-soft: rgba(255, 255, 255, 0.055);
		--ats-softer: rgba(255, 255, 255, 0.03);
		--ats-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
		--ats-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 28px 60px -20px rgba(0, 0, 0, 0.7);
		--ats-ok: #5eead4;
		--ats-ok-bg: rgba(94, 234, 212, 0.12);
		--ats-warn: #fbbf24;
		--ats-warn-bg: rgba(251, 191, 36, 0.12);
		--ats-a-text: color-mix(in srgb, var(--ats-a) 45%, #fff);
	}
}

/* ===================================================================
   Resets that only defend, never dictate
   =================================================================== */

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

.ats :where(h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd) {
	margin: 0;
	padding: 0;
}

/* Themes set list-style on the li directly at least as often as on the list,
   and a direct rule beats an inherited value, so both are named. */
.ats :where(ul, ol, li) {
	list-style: none;
}

.ats :where(h2, h3, h4, h5, h6) {
	font-family: var(--ats-display);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--ats-ink);
}

.ats :where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
}

.ats :where(button) {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: inherit;
}

.ats :where(svg) {
	display: block;
	max-width: 100%;
	height: auto;
}

.ats :where(a) {
	color: var(--ats-a-text);
}

.ats :where(details summary) {
	list-style: none;
	cursor: pointer;
}

.ats :where(details summary)::-webkit-details-marker {
	display: none;
}

/* The illustrations are sized explicitly everywhere they appear, because a
   theme rule as ordinary as `svg { width: 100% }` otherwise turns a 40px icon
   into a full width banner. */
.ats .ats-art {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	max-inline-size: none;
}

.ats-btn__arrow,
.ats-tick,
.ats-cross,
.ats-faq__chev {
	flex: none;
	inline-size: 18px;
	block-size: 18px;
}

/* ===================================================================
   Illustration palette
   =================================================================== */

.ats-art__bg { fill: var(--ats-soft); }
.ats-art__ink { fill: var(--ats-ink); opacity: 0.82; }
.ats-art__acc { fill: var(--ats-a); }
.ats-art__acc2 { fill: var(--ats-a2); }
.ats-art__soft { fill: var(--ats-ink); opacity: 0.28; }
.ats-art__panel { fill: var(--ats-ink); opacity: 0.14; }
.ats-art__bgline,
.ats-art__bgdot { fill: var(--ats-ink); opacity: 0.34; }

.ats-art__st,
.ats-art__sline,
.ats-art__sacc {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ats-art__st { stroke: var(--ats-ink); stroke-width: 2.4; opacity: 0.8; }
.ats-art__st--on { stroke: var(--ats-bg); opacity: 1; }
.ats-art__sline { stroke: var(--ats-ink); stroke-width: 2.2; opacity: 0.3; }
.ats-art__sline--fat { stroke-width: 3.4; }
.ats-art__sacc { stroke: var(--ats-a); stroke-width: 2.6; }
.ats-art__sacc--fat { stroke-width: 3.6; }
.ats-art__dash { stroke-dasharray: 4 4; }
.ats-art__dashpanel {
	fill: none;
	stroke: var(--ats-ink);
	stroke-width: 2;
	stroke-dasharray: 5 5;
	opacity: 0.4;
}

.ats-art__glyph {
	fill: var(--ats-a);
	font-family: var(--ats-display);
	font-size: 26px;
	font-weight: 700;
}

.ats-art__glyph--on { fill: #fff; }
.ats-art__glyph--sm { font-size: 18px; fill: var(--ats-mute); }

/* ===================================================================
   Aura and hero
   =================================================================== */

/* The glow stays inside the wrapper. Letting it bleed past the edges looks
   marginally softer and costs a horizontal scrollbar on any phone, because the
   wrapper is already the full width of the content column. The gradients fade
   out well before 70% anyway, so nothing is actually lost. */
.ats-aura {
	position: absolute;
	inset-block-start: -60px;
	inset-inline: 0;
	block-size: 420px;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(45% 60% at 22% 12%, rgba(var(--ats-a-rgb), 0.18), transparent 70%),
		radial-gradient(40% 55% at 82% 4%, rgba(var(--ats-a2-rgb), 0.16), transparent 70%);
	filter: blur(6px);
}

.ats-hero {
	text-align: center;
	max-inline-size: 62ch;
	margin: 0 auto 26px;
}

.ats-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ats-mute);
	background: var(--ats-soft);
	border: 1px solid var(--ats-line);
	border-radius: 999px;
	padding: 6px 14px;
	margin-block-end: 16px;
}

.ats-dot {
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ats-a), var(--ats-a2));
	flex: none;
}

.ats-hero__title {
	font-size: clamp(1.7em, 1.15em + 2.4cqi, 2.6em);
	margin-block-end: 12px;
}

.ats-hero__sub {
	color: var(--ats-mute);
	font-size: 1.02em;
	text-wrap: pretty;
}

/* ===================================================================
   The app shell
   =================================================================== */

.ats-app {
	position: relative;
}

.ats-stage {
	position: relative;
}

.ats-card {
	background: var(--ats-card);
	border: 1px solid var(--ats-line);
	border-radius: var(--ats-r);
	box-shadow: var(--ats-shadow-lg);
	padding: clamp(20px, 4cqi, 38px);
}

/* Cards swap in and out. The transform is small on purpose: a big slide reads
   as a page change, and this is meant to read as the next question. */
.ats-in {
	animation: ats-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ats-in {
	from { opacity: 0; transform: translateY(10px) scale(0.994); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ats-in { animation: none; }
	.ats * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ===================================================================
   Opening card
   =================================================================== */

.ats-start {
	text-align: center;
}

.ats-start__art {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-block-end: 22px;
	flex-wrap: wrap;
}

.ats-start__tile {
	inline-size: 54px;
	block-size: 54px;
	display: block;
	border-radius: 16px;
	overflow: hidden;
}

.ats-start__tile:nth-child(even) {
	transform: translateY(-8px);
}

.ats-start__title {
	font-size: 1.34em;
	margin-block-end: 10px;
}

.ats-start__text {
	color: var(--ats-mute);
	max-inline-size: 56ch;
	margin-inline: auto;
	text-wrap: pretty;
}

.ats-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-block: 24px 26px;
}

.ats-facts li {
	background: var(--ats-soft);
	border: 1px solid var(--ats-line);
	border-radius: 14px;
	padding: 11px 16px;
	min-inline-size: 128px;
	text-align: center;
}

.ats-facts strong {
	display: block;
	font-weight: 700;
	font-size: 0.98em;
	line-height: 1.3;
}

.ats-facts span {
	display: block;
	font-size: 0.78em;
	color: var(--ats-mute);
	margin-block-start: 2px;
}

.ats-start__legal {
	font-size: 0.8em;
	color: var(--ats-mute);
	max-inline-size: 60ch;
	margin: 20px auto 0;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--ats-line);
	text-wrap: pretty;
}

/* ===================================================================
   Buttons
   =================================================================== */

/*
 * The two !important declarations are the only ones in this file and they are
 * deliberate. A theme that sets `button { text-transform: uppercase }` is
 * handled by the :where() reset near the top, but a theme that sets it with
 * !important cannot be beaten by any ordinary rule, and the result is every
 * button and every answer chip shouting. There is no case where this plugin
 * wants inherited casing or tracking on its own controls, so nothing is lost by
 * pinning them.
 */
.ats .ats-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: inherit;
	font-size: 0.96em;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none;
	padding: 14px 24px;
	border-radius: 999px;
	border: 1px solid var(--ats-line);
	background: var(--ats-soft);
	color: var(--ats-ink);
	cursor: pointer;
	transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.ats .ats-btn:hover {
	background: var(--ats-line);
	transform: translateY(-1px);
}

.ats .ats-btn:active {
	transform: none;
}

.ats .ats-btn--go {
	background: linear-gradient(135deg, var(--ats-a), var(--ats-a2));
	border-color: transparent;
	color: #fff;
	padding-inline: 30px;
	padding-block: 16px;
	font-size: 1.02em;
	box-shadow: 0 10px 26px -10px rgba(var(--ats-a-rgb), 0.7);
}

.ats .ats-btn--go:hover {
	box-shadow: 0 16px 34px -12px rgba(var(--ats-a-rgb), 0.8);
	background: linear-gradient(135deg, var(--ats-a), var(--ats-a2));
}

.ats .ats-btn--ghost {
	background: transparent;
}

.ats .ats-btn--sm {
	padding: 10px 18px;
	font-size: 0.86em;
}

.ats .ats-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.ats :where(button, a, input, summary):focus-visible {
	outline: 3px solid rgba(var(--ats-a-rgb), 0.55);
	outline-offset: 2px;
	border-radius: 12px;
}

/* ===================================================================
   Progress
   =================================================================== */

.ats-prog {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-block-end: 22px;
}

.ats-prog__bar {
	flex: 1;
	block-size: 7px;
	border-radius: 999px;
	background: var(--ats-soft);
	overflow: hidden;
}

.ats-prog__fill {
	display: block;
	block-size: 100%;
	inline-size: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ats-a), var(--ats-a2));
	transition: inline-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ats-prog__text {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--ats-mute);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ===================================================================
   Picker cards, used for audience and length
   =================================================================== */

.ats-q__head {
	text-align: center;
	margin-block-end: 24px;
}

.ats-q__title {
	font-size: clamp(1.16em, 1em + 1cqi, 1.44em);
	text-wrap: balance;
}

.ats-q__hint {
	color: var(--ats-mute);
	font-size: 0.86em;
	margin-block-start: 10px;
	max-inline-size: 52ch;
	margin-inline: auto;
	text-wrap: pretty;
}

.ats-picks {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.ats-pick {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	letter-spacing: normal !important;
	text-transform: none !important;
	padding: 22px 18px;
	border-radius: calc(var(--ats-r) * 0.7);
	border: 1.5px solid var(--ats-line);
	background: var(--ats-softer);
	transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.ats-pick:hover {
	border-color: rgba(var(--ats-a-rgb), 0.5);
	transform: translateY(-2px);
}

.ats-pick.is-on {
	border-color: var(--ats-a-text);
	background: rgba(var(--ats-a-rgb), 0.07);
}

.ats-pick__art {
	inline-size: 76px;
	block-size: 76px;
	display: block;
}

.ats-pick__name {
	font-weight: 700;
	font-size: 1.02em;
}

.ats-pick__note {
	font-size: 0.82em;
	color: var(--ats-mute);
	text-wrap: pretty;
}

/* ===================================================================
   Question card
   =================================================================== */

/* display:block is load bearing. This is a span, and a non replaced inline box
   ignores inline-size, so without it the SVG inside falls back to the 100% rule
   on .ats-art and resolves that against the card rather than against this
   element. The illustration then renders at the full width of the question
   card instead of at 110px. */
.ats-qart {
	display: block;
	inline-size: clamp(96px, 22cqi, 128px);
	block-size: clamp(96px, 22cqi, 128px);
	margin: 0 auto 18px;
}

/* The scale. A column on a phone, because five chips squeezed into 340px
   gives you five unreadable labels and five tap targets too small to hit,
   and a row from 560px up where there is genuinely room for it. */
.ats-scale {
	display: grid;
	gap: 8px;
}

.ats-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	inline-size: 100%;
	padding: 13px 16px;
	border-radius: 14px;
	border: 1.5px solid var(--ats-line);
	background: var(--ats-softer);
	font-size: 0.94em;
	font-weight: 550;
	letter-spacing: normal !important;
	text-transform: none !important;
	transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.14s ease;
}

.ats-opt:hover {
	border-color: rgba(var(--ats-a-rgb), 0.5);
	background: rgba(var(--ats-a-rgb), 0.04);
}

.ats-opt.is-on {
	border-color: var(--ats-a-text);
	background: rgba(var(--ats-a-rgb), 0.09);
}

/* The dot grows across the scale, so the shape of the answer is readable
   before the label is. */
.ats-opt__dot {
	flex: none;
	inline-size: 26px;
	block-size: 26px;
	border-radius: 50%;
	border: 2px solid var(--ats-line);
	display: grid;
	place-items: center;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.ats-opt__dot::after {
	content: "";
	display: block;
	inline-size: calc(4px + (var(--ats-w, 0) * 3.2px));
	block-size: calc(4px + (var(--ats-w, 0) * 3.2px));
	border-radius: 50%;
	background: var(--ats-mute);
	opacity: 0.4;
	transition: background-color 0.16s ease, opacity 0.16s ease;
}

.ats-opt.is-on .ats-opt__dot {
	border-color: var(--ats-a-text);
	background: rgba(var(--ats-a-rgb), 0.12);
}

.ats-opt.is-on .ats-opt__dot::after {
	background: var(--ats-a-text);
	opacity: 1;
}

.ats-opt__key {
	margin-inline-start: auto;
	font-size: 0.72em;
	color: var(--ats-mute);
	font-weight: 600;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 560px) {
	.ats-scale {
		grid-template-columns: repeat(5, 1fr);
		gap: 10px;
	}

	.ats-opt {
		flex-direction: column;
		gap: 10px;
		text-align: center;
		padding: 18px 8px 14px;
		font-size: 0.8em;
		line-height: 1.3;
		min-block-size: 116px;
		justify-content: center;
	}

	.ats-opt__key {
		display: none;
	}

	/* The context questions have four options that are whole sentences rather
	   than one word each, so they stay a column at every width. Squeezing
	   "Always there, but it got clearer as an adult" into a fifth of the card
	   produces six lines of two words. */
	.ats-scale--stack {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.ats-scale--stack .ats-opt {
		flex-direction: row;
		text-align: start;
		justify-content: flex-start;
		padding: 15px 18px;
		font-size: 0.92em;
		min-block-size: 0;
	}
}

.ats-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-start: 22px;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--ats-line);
}

.ats-nav__spacer {
	flex: 1;
}

/* ===================================================================
   Result
   =================================================================== */

.ats-res__top {
	display: grid;
	gap: 26px;
	align-items: center;
	margin-block-end: 26px;
}

@media (min-width: 700px) {
	.ats-res__top {
		grid-template-columns: minmax(0, 1fr) 260px;
	}

	.ats-res__top--flip .ats-res__vis {
		order: 2;
	}
}

.ats-res__band {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 999px;
	margin-block-end: 14px;
	background: rgba(var(--ats-a-rgb), 0.1);
	color: var(--ats-a-text);
	border: 1px solid rgba(var(--ats-a-rgb), 0.25);
}

.ats-res--strong .ats-res__band {
	background: var(--ats-warn-bg);
	color: var(--ats-warn);
	border-color: color-mix(in srgb, var(--ats-warn) 30%, transparent);
}

.ats-res--low .ats-res__band {
	background: var(--ats-ok-bg);
	color: var(--ats-ok);
	border-color: color-mix(in srgb, var(--ats-ok) 30%, transparent);
}

.ats-res__title {
	font-size: clamp(1.3em, 1.05em + 1.5cqi, 1.8em);
	margin-block-end: 12px;
	text-wrap: balance;
}

.ats-res__lede {
	color: var(--ats-mute);
	text-wrap: pretty;
}

.ats-res__vis {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.ats-dial {
	inline-size: 200px;
	block-size: 200px;
	max-inline-size: 100%;
	position: relative;
}

.ats-dial svg {
	inline-size: 100%;
	block-size: 100%;
}

.ats-dial__track {
	fill: none;
	stroke: var(--ats-soft);
	stroke-width: 13;
	stroke-linecap: round;
}

/* The gradient reference is set inline by the script, because the gradient id
   has to be unique per instance and a stylesheet cannot know what it is. A flat
   accent stays here as the fallback and as the printed colour. */
.ats-dial__fill {
	fill: none;
	stroke: var(--ats-a);
	stroke-width: 13;
	stroke-linecap: round;
	transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.ats-dial__num {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	text-align: center;
	gap: 2px;
}

.ats-dial__num b {
	font-family: var(--ats-display);
	font-size: 2.5em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.ats-dial__num span {
	font-size: 0.72em;
	color: var(--ats-mute);
	max-inline-size: 15ch;
	line-height: 1.35;
}

/* The hexagon. Six axes drawn as a polygon, which is the part people
   screenshot and the part neither competitor has. */
.ats-radar {
	inline-size: 100%;
	max-inline-size: 440px;
	margin: 0 auto;
	aspect-ratio: 380 / 300;
}

.ats-radar svg {
	inline-size: 100%;
	block-size: 100%;
}

.ats-radar__web {
	fill: none;
	stroke: var(--ats-line);
	stroke-width: 1;
}

.ats-radar__spoke {
	stroke: var(--ats-line);
	stroke-width: 1;
}

.ats-radar__shape {
	fill: rgba(var(--ats-a-rgb), 0.22);
	stroke: var(--ats-a);
	stroke-width: 2.2;
	stroke-linejoin: round;
	transition: opacity 0.6s ease;
}

.ats-radar__pt {
	fill: var(--ats-a);
}

.ats-radar__lab {
	fill: var(--ats-mute);
	font-size: 10.5px;
	font-weight: 600;
	font-family: inherit;
}

.ats-res__sec {
	margin-block-start: 30px;
	padding-block-start: 26px;
	border-block-start: 1px solid var(--ats-line);
}

/* The bars sit directly under the chart they describe, so the rule and the
   repeated heading between them are dropped. */
.ats-res__sec--tight {
	margin-block-start: 18px;
	padding-block-start: 0;
	border-block-start: 0;
}

.ats-res__h {
	font-size: 1.06em;
	margin-block-end: 16px;
	display: flex;
	align-items: center;
	gap: 9px;
}

.ats-res__h::before {
	content: "";
	inline-size: 4px;
	block-size: 1.1em;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--ats-a), var(--ats-a2));
	flex: none;
}

/* Area rows */
.ats-bars {
	display: grid;
	gap: 16px;
}

.ats-bar__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 7px;
}

.ats-bar__name {
	font-weight: 650;
	font-size: 0.94em;
}

.ats-bar__val {
	font-size: 0.76em;
	font-weight: 700;
	color: var(--ats-mute);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ats-bar__track {
	block-size: 9px;
	border-radius: 999px;
	background: var(--ats-soft);
	overflow: hidden;
}

.ats-bar__fill {
	display: block;
	block-size: 100%;
	inline-size: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ats-a), var(--ats-a2));
	transition: inline-size 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.ats-bar--low .ats-bar__fill {
	background: var(--ats-mute);
	opacity: 0.5;
}

.ats-bar__note {
	font-size: 0.85em;
	color: var(--ats-mute);
	margin-block-start: 8px;
	text-wrap: pretty;
}

/* Flagged items */
.ats-flags {
	display: grid;
	gap: 9px;
}

.ats-flag {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 13px 16px;
	background: var(--ats-softer);
	border: 1px solid var(--ats-line);
	border-radius: 14px;
	font-size: 0.9em;
}

.ats-flag__mark {
	flex: none;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: var(--ats-a);
	margin-block-start: 0.5em;
}

.ats-flag__ans {
	display: block;
	font-size: 0.85em;
	color: var(--ats-mute);
	margin-block-start: 3px;
}

/* Next steps */
.ats-next {
	display: grid;
	gap: 12px;
	counter-reset: ats-next;
}

.ats-nextitem {
	position: relative;
	padding: 18px 20px 18px 58px;
	background: var(--ats-softer);
	border: 1px solid var(--ats-line);
	border-radius: calc(var(--ats-r) * 0.65);
}

.ats-nextitem::before {
	counter-increment: ats-next;
	content: counter(ats-next);
	position: absolute;
	inset-block-start: 18px;
	inset-inline-start: 18px;
	inline-size: 26px;
	block-size: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ats-a), var(--ats-a2));
	color: #fff;
	font-size: 0.76em;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.ats-nextitem h5 {
	font-size: 0.98em;
	margin-block-end: 5px;
}

.ats-nextitem p {
	font-size: 0.88em;
	color: var(--ats-mute);
	text-wrap: pretty;
}

/* Context notes */
.ats-notes {
	display: grid;
	gap: 10px;
}

.ats-note {
	display: flex;
	gap: 12px;
	padding: 15px 18px;
	border-radius: 14px;
	font-size: 0.89em;
	background: var(--ats-soft);
	border: 1px solid var(--ats-line);
	text-wrap: pretty;
}

.ats-note--warn {
	background: var(--ats-warn-bg);
	border-color: color-mix(in srgb, var(--ats-warn) 26%, transparent);
}

.ats-note--ok {
	background: var(--ats-ok-bg);
	border-color: color-mix(in srgb, var(--ats-ok) 26%, transparent);
}

.ats-note__ic {
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	margin-block-start: 0.1em;
}

/* The offer to pick up an unfinished attempt, shown above the opening card. */
.ats-note--resume {
	flex-wrap: wrap;
	align-items: center;
	margin-block-end: 12px;
}

.ats-note--resume > span {
	flex: 1 1 200px;
	font-weight: 600;
	color: var(--ats-ink);
}

.ats-lead__skip {
	margin-block-start: 12px;
}

/* Actions */
.ats-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 26px;
	padding-block-start: 22px;
	border-block-start: 1px solid var(--ats-line);
}

.ats-res__legal {
	font-size: 0.8em;
	color: var(--ats-mute);
	margin-block-start: 20px;
	text-wrap: pretty;
}

/* Lead capture */
.ats-lead {
	margin-block-start: 26px;
	padding: 22px;
	border-radius: calc(var(--ats-r) * 0.7);
	border: 1px dashed var(--ats-line);
	background: var(--ats-softer);
}

.ats-lead h4 {
	font-size: 1.02em;
	margin-block-end: 6px;
}

.ats-lead p {
	font-size: 0.87em;
	color: var(--ats-mute);
	margin-block-end: 14px;
	text-wrap: pretty;
}

.ats-lead__row {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.ats .ats-lead__input {
	flex: 1 1 220px;
	min-inline-size: 0;
	padding: 13px 16px;
	border-radius: 999px;
	border: 1.5px solid var(--ats-line);
	background: var(--ats-card);
	color: var(--ats-ink);
	font-size: 0.94em;
}

.ats .ats-lead__input:focus {
	border-color: var(--ats-a);
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--ats-a-rgb), 0.18);
}

.ats-lead__check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 0.85em;
	color: var(--ats-mute);
	margin-block-start: 12px;
	cursor: pointer;
}

.ats-lead__check input {
	margin-block-start: 0.25em;
	accent-color: var(--ats-a);
	flex: none;
}

.ats-msg {
	font-size: 0.85em;
	margin-block-start: 10px;
	font-weight: 600;
}

.ats-msg--err { color: var(--ats-warn); }
.ats-msg--ok { color: var(--ats-ok); }

/* ===================================================================
   Reading sections
   =================================================================== */

.ats-sec {
	margin-block-start: clamp(38px, 7cqi, 62px);
}

.ats-sec__title {
	font-size: clamp(1.24em, 1.05em + 1.2cqi, 1.65em);
	margin-block-end: 12px;
	text-wrap: balance;
}

.ats-sec__lede {
	color: var(--ats-mute);
	max-inline-size: 68ch;
	margin-block-end: 24px;
	text-wrap: pretty;
}

/* What it is and is not */
.ats-scope__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ats-scope__col {
	padding: 22px;
	border-radius: calc(var(--ats-r) * 0.75);
	border: 1px solid var(--ats-line);
	background: var(--ats-card);
}

.ats-scope__col h4 {
	font-size: 1.02em;
	margin-block-end: 14px;
}

.ats-scope__col ul {
	display: grid;
	gap: 11px;
}

.ats-scope__col li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 0.9em;
	color: var(--ats-mute);
	text-wrap: pretty;
}

.ats-scope__col--is { border-inline-start: 3px solid var(--ats-ok); }
.ats-scope__col--not { border-inline-start: 3px solid var(--ats-warn); }
.ats-scope__col--is .ats-tick { color: var(--ats-ok); margin-block-start: 0.15em; }
.ats-scope__col--not .ats-cross { color: var(--ats-warn); margin-block-start: 0.15em; }

/* Steps */
.ats-steps {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ats-step {
	position: relative;
	padding: 24px 20px 20px;
	border-radius: calc(var(--ats-r) * 0.75);
	border: 1px solid var(--ats-line);
	background: var(--ats-card);
}

.ats-step__art {
	display: block;
	inline-size: 62px;
	block-size: 62px;
	margin-block-end: 14px;
}

.ats-step__num {
	position: absolute;
	inset-block-start: 20px;
	inset-inline-end: 20px;
	font-family: var(--ats-display);
	font-size: 1.8em;
	font-weight: 700;
	line-height: 1;
	color: var(--ats-ink);
	opacity: 0.1;
}

.ats-step__title {
	font-size: 0.99em;
	margin-block-end: 7px;
}

.ats-step__text {
	font-size: 0.87em;
	color: var(--ats-mute);
	text-wrap: pretty;
}

/* Areas */
.ats-areas {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ats-area {
	padding: 22px 20px;
	border-radius: calc(var(--ats-r) * 0.75);
	border: 1px solid var(--ats-line);
	background: var(--ats-card);
}

.ats-area__art {
	display: block;
	inline-size: 52px;
	block-size: 52px;
	margin-block-end: 13px;
}

.ats-area__title {
	font-size: 0.99em;
	margin-block-end: 7px;
}

.ats-area__text {
	font-size: 0.87em;
	color: var(--ats-mute);
	text-wrap: pretty;
}

/* Signs */
.ats-signs {
	padding: 22px;
	border-radius: calc(var(--ats-r) * 0.75);
	border: 1px solid var(--ats-line);
	background: var(--ats-card);
	margin-block-end: 12px;
}

.ats-signs__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.02em;
	margin-block-end: 16px;
}

.ats-signs__art {
	display: block;
	inline-size: 38px;
	block-size: 38px;
	flex: none;
}

.ats-signs__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.ats-signs__col h5 {
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ats-a-text);
	margin-block-end: 10px;
}

.ats-signs__col ul {
	display: grid;
	gap: 8px;
}

.ats-signs__col li {
	position: relative;
	padding-inline-start: 18px;
	font-size: 0.87em;
	color: var(--ats-mute);
	text-wrap: pretty;
}

.ats-signs__col li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.62em;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--ats-a);
	opacity: 0.5;
}

/* Myths */
.ats-myths {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.ats-myth {
	padding: 22px;
	border-radius: calc(var(--ats-r) * 0.75);
	border: 1px solid var(--ats-line);
	background: var(--ats-card);
}

.ats-myth__tag {
	display: inline-block;
	font-size: 0.66em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ats-warn);
	background: var(--ats-warn-bg);
	border-radius: 999px;
	padding: 4px 10px;
	margin-inline-end: 8px;
	vertical-align: 0.15em;
}

.ats-myth__claim {
	font-weight: 650;
	font-size: 0.98em;
	margin-block-end: 10px;
	text-wrap: pretty;
}

.ats-myth__real {
	font-size: 0.88em;
	color: var(--ats-mute);
	text-wrap: pretty;
}

/* FAQ */
.ats-faq {
	display: grid;
	gap: 8px;
}

.ats-faq__item {
	border: 1px solid var(--ats-line);
	border-radius: calc(var(--ats-r) * 0.6);
	background: var(--ats-card);
	overflow: hidden;
}

.ats-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 17px 20px;
	font-family: var(--ats-display);
	font-weight: 650;
	font-size: 0.96em;
	line-height: 1.4;
	text-wrap: pretty;
}

.ats-faq__q:hover {
	background: var(--ats-softer);
}

.ats-faq__chev {
	color: var(--ats-mute);
	transition: transform 0.22s ease;
}

.ats-faq__item[open] .ats-faq__chev {
	transform: rotate(180deg);
}

.ats-faq__a {
	padding: 0 20px 18px;
}

.ats-faq__a p {
	font-size: 0.89em;
	color: var(--ats-mute);
	text-wrap: pretty;
}

/* Footer legal */
.ats-legal {
	margin-block-start: clamp(30px, 5cqi, 46px);
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--ats-soft);
	border: 1px solid var(--ats-line);
	font-size: 0.79em;
	color: var(--ats-mute);
	text-wrap: pretty;
}

.ats-legal__rev {
	display: block;
	margin-block-start: 6px;
	font-weight: 600;
}

/* Visually hidden but read out */
.ats-sr {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ===================================================================
   Print. This is the sheet somebody takes to an appointment, so it has to
   come out on one page with the numbers and the areas intact and nothing
   else on it at all.
   =================================================================== */

@media print {
	.ats-aura,
	.ats-acts,
	.ats-lead,
	.ats-sec,
	.ats-nav,
	.ats-prog {
		display: none !important;
	}

	.ats {
		--ats-shadow: none;
		--ats-shadow-lg: none;
		color: #000;
	}

	.ats-card {
		border: 1px solid #ccc;
		box-shadow: none;
		padding: 0;
	}

	.ats-bar__fill,
	.ats-dial__fill,
	.ats-radar__shape {
		transition: none;
	}

	.ats-res__sec {
		break-inside: avoid;
	}
}