/*
 * TED-IELTS Speaking Test: component styles (1.1.0 visual system).
 *
 * Scope: every selector starts with `.ted-tst`, `html.ted-tst-focus` or
 * `body.ted-tst-focus-page`. The first is the component; the other two are the
 * plugin-owned focus page template, where the theme's layout is absent but its
 * `wp_head` CSS may still print, so the page-level rules below deliberately
 * out-rank element selectors such as `body`, `h1` or `a`.
 *
 * Tokens (qa/anatomy/system.md): canvas / ink / paper / green, hard offset
 * shadows, ink outlines, Lato at 400 / 700 / 900. No gradients, no soft shadows,
 * no images, no icon fonts.
 */

/* ------------------------------------------------------------------ font */

@font-face {
	font-family: "TED-TST Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/LatoLatin-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "TED-TST Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/LatoLatin-Bold.woff2") format("woff2");
}

@font-face {
	font-family: "TED-TST Lato";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/LatoLatin-Black.woff2") format("woff2");
}

/* ---------------------------------------------------------------- tokens */

.ted-tst,
.ted-tst-focus,
.ted-tst-focus-page {
	--ted-canvas: #f6d43a;
	--ted-ink: #1d1b16;
	--ted-paper: #fff4d2;
	--ted-paper-light: #fffbec;
	--ted-green: #245a46;
	--ted-muted: #6f684f;
	--ted-rule: #cdbf92;
	--ted-rule-strong: #7a7150;
	--ted-error: #9e1b1b;

	--ted-font: "TED-TST Lato", "Lato", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ted-shadow-board: 8px 8px 0 0 var(--ted-ink);
	--ted-shadow-row: 2px 2px 0 0 var(--ted-ink);
	--ted-shadow-btn: 4px 4px 0 0 var(--ted-ink);

	--ted-radius-board: 12px;
	--ted-radius-ctl: 7px;
	--ted-outline-board: 4px;
	--ted-outline-ctl: 2px;
	--ted-col: 1004px;
}

@media (max-width: 1023.98px) {
	.ted-tst,
	.ted-tst-focus,
	.ted-tst-focus-page {
		--ted-shadow-board: 6px 6px 0 0 var(--ted-ink);
		--ted-outline-board: 3px;
	}
}

@media (max-width: 599.98px) {
	.ted-tst,
	.ted-tst-focus,
	.ted-tst-focus-page {
		--ted-shadow-board: 4px 4px 0 0 var(--ted-ink);
		--ted-shadow-btn: 3px 3px 0 0 var(--ted-ink);
		--ted-radius-board: 10px;
	}
}

/* ------------------------------------------------------- focus page canvas */

html.ted-tst-focus {
	background: var(--ted-canvas);
}

body.ted-tst-focus-page {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: var(--ted-canvas);
	color: var(--ted-ink);
	font-family: var(--ted-font);
	font-size: 18px;
	line-height: 28px;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

/* A logged-in visitor's admin bar is printed by WordPress as a fixed 32px strip
   (46px at ≤782px) plus `html { margin-top }` of the same height. The body's
   100vh minimum then overshoots the viewport by exactly that margin and the
   page scrolls by the bar's height whatever the content; the minimum gives the
   bar's height back so the viewport-fit contract holds for authenticated
   previews too. */
body.ted-tst-focus-page.admin-bar {
	min-height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
	body.ted-tst-focus-page.admin-bar {
		min-height: calc(100vh - 46px);
	}
}

/* ----------------------------------------------------------------- shell */

.ted-tst-shell {
	display: block;
	box-sizing: content-box;
	max-width: 1092px;
	margin: 0 auto;
	padding: 40px 40px 48px;
	border: 0;
	background: none;
	box-shadow: none;
}

/* Type-selector rules a site prints through wp_head() (Additional CSS, page
   builders) must not paint the shell's landmarks. Flex, not block: on a block
   line the inline-flex brand is baseline-aligned against the inherited 18px
   strut and the head grows by ~4.5px, pushing the board down. */
/* Site-wide banners other plugins inject through wp_body_open (Simple Banner's
   #simple-banner strip in production) are theme chrome on the focus page. The
   plugin unhooks them server-side; this guard hides anything that still arrives
   through a path it does not know, on the focus page only. */
body.ted-tst-focus-page #simple-banner,
body.ted-tst-focus-page .simple-banner {
	display: none !important;
}

.ted-tst-shell .ted-tst-shell__head {
	display: flex;
	align-items: flex-start;
	margin: 0 0 36px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	line-height: 20px;
}

.ted-tst-shell .ted-tst-brand {
	display: inline-flex;
	align-items: center;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: var(--ted-font);
	font-size: 20px;
	font-weight: 900;
	line-height: 20px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ted-ink);
	white-space: nowrap;
}

.ted-tst-shell .ted-tst-brand::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 40px;
	height: 5px;
	margin-right: 16px;
	background: var(--ted-green);
}

.ted-tst-shell .ted-tst-brand:hover,
.ted-tst-shell .ted-tst-brand:focus-visible {
	color: var(--ted-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.ted-tst-shell .ted-tst-brand:focus-visible {
	outline: 3px solid var(--ted-ink);
	outline-offset: 4px;
}

@media (min-width: 1200px) {
	/* The brand sits 26px outside the board's left edge (measured on the reference). */
	.ted-tst-shell .ted-tst-brand {
		margin-left: -26px;
	}
}

@media (max-width: 1023.98px) {
	.ted-tst-shell {
		padding: 32px 24px 40px;
	}

	.ted-tst-shell .ted-tst-shell__head {
		margin-bottom: 28px;
		line-height: 18px;
	}

	.ted-tst-shell .ted-tst-brand {
		height: 18px;
		font-size: 18px;
		line-height: 18px;
	}

	.ted-tst-shell .ted-tst-brand::before {
		width: 34px;
		margin-right: 14px;
	}
}

@media (max-width: 599.98px) {
	.ted-tst-shell {
		padding: 24px 16px 32px;
	}

	.ted-tst-shell .ted-tst-shell__head {
		margin-bottom: 20px;
		line-height: 16px;
	}

	.ted-tst-shell .ted-tst-brand {
		height: 16px;
		font-size: 16px;
		line-height: 16px;
	}

	.ted-tst-shell .ted-tst-brand::before {
		width: 28px;
		height: 4px;
		margin-right: 12px;
	}
}

/* ------------------------------------------------------------- component */

.ted-tst {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: var(--ted-font);
	font-size: 18px;
	line-height: 28px;
	color: var(--ted-ink);
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

/* Shortcode inside an ordinary theme page: paint the canvas margin locally so
   the board keeps its outline and shadow. */
.ted-tst--embedded {
	padding: 24px;
	background: var(--ted-canvas);
}

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

.ted-tst h1,
.ted-tst h2,
.ted-tst h3,
.ted-tst h4,
.ted-tst p,
.ted-tst ul,
.ted-tst ol,
.ted-tst li,
.ted-tst dl,
.ted-tst dt,
.ted-tst dd,
.ted-tst fieldset,
.ted-tst legend,
.ted-tst label,
.ted-tst button,
.ted-tst input,
.ted-tst details,
.ted-tst summary,
.ted-tst svg {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	max-width: 100%;
}

.ted-tst ul,
.ted-tst ol {
	list-style: none;
}

.ted-tst button,
.ted-tst input {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
	width: auto;
}

.ted-tst a {
	color: var(--ted-green);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	box-shadow: none;
}

.ted-tst a:hover,
.ted-tst a:focus {
	color: var(--ted-ink);
}

.ted-tst [hidden] {
	display: none !important;
}

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

/* ------------------------------------------------------------ focus ring */

.ted-tst :focus-visible {
	outline: 3px solid var(--ted-ink);
	outline-offset: 3px;
}

.ted-tst .ted-tst__radio:focus-visible + .ted-tst__option,
.ted-tst .ted-tst__consent-input:focus-visible + .ted-tst__checkbox {
	outline: 3px solid var(--ted-ink);
	outline-offset: 3px;
}

@supports not selector(:focus-visible) {
	.ted-tst :focus {
		outline: 3px solid var(--ted-ink);
		outline-offset: 3px;
	}

	.ted-tst .ted-tst__radio:focus + .ted-tst__option,
	.ted-tst .ted-tst__consent-input:focus + .ted-tst__checkbox {
		outline: 3px solid var(--ted-ink);
		outline-offset: 3px;
	}
}

/* ----------------------------------------------------------------- board */

.ted-tst .ted-tst__board {
	position: relative;
	background: var(--ted-paper);
	border: var(--ted-outline-board) solid var(--ted-ink);
	border-radius: var(--ted-radius-board);
	box-shadow: var(--ted-shadow-board);
	padding: 25px 40px 26px;
}

.ted-tst .ted-tst__panel {
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* -------------------------------------------------------------- typography */

.ted-tst .ted-tst__label {
	display: block;
	margin: 6px 0 22px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ted-green);
}

/* T-label-s: the small tracked label (section counters, list captions). */
.ted-tst .ted-tst__label-s {
	display: block;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ted-green);
}

.ted-tst .ted-tst__headline {
	margin: 0 0 22px;
	max-width: 900px;
	font-size: 44px;
	font-weight: 900;
	line-height: 50px;
	letter-spacing: 0;
	color: var(--ted-ink);
	text-wrap: balance;
}

.ted-tst .ted-tst__headline:focus {
	outline: none;
}

.ted-tst .ted-tst__headline:focus-visible {
	outline: 3px solid var(--ted-ink);
	outline-offset: 6px;
}

.ted-tst .ted-tst__promise {
	margin: 0 0 26px;
	max-width: 760px;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--ted-ink);
}

.ted-tst .ted-tst__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 0 0 30px;
	padding: 14px 0;
	border-top: 2px solid var(--ted-rule);
	border-bottom: 2px solid var(--ted-rule);
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: var(--ted-ink);
}

.ted-tst .ted-tst__fact {
	display: inline-block;
}

.ted-tst .ted-tst__dot {
	display: inline-block;
	margin: 0 14px;
	color: var(--ted-green);
}

.ted-tst .ted-tst__disclosure {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	color: var(--ted-ink);
}

.ted-tst .ted-tst__fine {
	margin: 40px 0 0;
	padding: 18px 0 0;
	border-top: 2px solid var(--ted-rule);
	font-size: 15px;
	font-weight: 400;
	line-height: 22px;
	color: var(--ted-muted);
}

.ted-tst .ted-tst__fine a {
	color: var(--ted-green);
}

/* --------------------------------------------------------------- buttons */

.ted-tst .ted-tst__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	border: 0;
	border-radius: var(--ted-radius-ctl);
	font-family: var(--ted-font);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.ted-tst .ted-tst__btn--primary,
.ted-tst .ted-tst__btn--secondary {
	min-height: 60px;
	padding: 0 32px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.ted-tst .ted-tst__btn--primary {
	background: var(--ted-ink);
	color: var(--ted-canvas);
	box-shadow: var(--ted-shadow-btn);
}

.ted-tst .ted-tst__btn--primary:hover {
	background: var(--ted-ink);
	color: var(--ted-canvas);
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 0 var(--ted-ink);
}

.ted-tst .ted-tst__btn--primary:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 0 var(--ted-ink);
}

.ted-tst .ted-tst__btn--secondary {
	background: var(--ted-paper-light);
	color: var(--ted-ink);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	box-shadow: var(--ted-shadow-row);
}

.ted-tst .ted-tst__btn--secondary:hover {
	background: var(--ted-paper-light);
	color: var(--ted-ink);
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 0 var(--ted-ink);
}

.ted-tst .ted-tst__btn--secondary:active {
	transform: translate(2px, 2px);
	box-shadow: none;
}

/* Ink button: the question state's Back. Same footing as the primary, the
   label solved at 24px with tighter tracking (anatomy §3.11). */
.ted-tst .ted-tst__btn--ink {
	min-height: 60px;
	padding: 0 32px;
	background: var(--ted-ink);
	color: var(--ted-canvas);
	box-shadow: var(--ted-shadow-btn);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ted-tst .ted-tst__btn--ink:hover {
	background: var(--ted-ink);
	color: var(--ted-canvas);
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 0 var(--ted-ink);
}

.ted-tst .ted-tst__btn--ink:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 0 var(--ted-ink);
}

.ted-tst .ted-tst__btn--tertiary {
	min-height: 44px;
	padding: 0 4px;
	border-radius: 4px;
	background: none;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	color: var(--ted-green);
	white-space: normal;
}

.ted-tst .ted-tst__btn--tertiary:hover {
	background: none;
	color: var(--ted-ink);
}

.ted-tst .ted-tst__btn:focus-visible {
	outline: 3px solid var(--ted-ink);
	outline-offset: 3px;
}

/* Loading (gate submit): the label changes, clicks stop landing, nothing dims.
   `disabled` is never used, so focus is not thrown away mid-submit. */
.ted-tst .ted-tst__btn[aria-disabled="true"] {
	pointer-events: none;
	cursor: progress;
}

/* --------------------------------------------------------------- landing */

.ted-tst .ted-tst__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.ted-tst .ted-tst__restart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin: 18px 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: var(--ted-ink);
}

.ted-tst .ted-tst__restartstep {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.ted-tst .ted-tst__restartq {
	display: inline-block;
}

/* ---------------------------------------------------------------- notice */

.ted-tst .ted-tst__notice {
	margin: 0 0 24px;
	padding: 16px 20px;
	background: var(--ted-paper-light);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-radius: var(--ted-radius-ctl);
	box-shadow: var(--ted-shadow-row);
	font-size: 18px;
	line-height: 28px;
	color: var(--ted-ink);
}

.ted-tst .ted-tst__notice p + p {
	margin-top: 8px;
}

/* -------------------------------------------------------------- question */

/* Progress: one square per question, the first n filled. The row is the
   progressbar; the visible count label beneath names it. */
.ted-tst .ted-tst__progress {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 7px;
	margin: 0 0 14px;
	padding: 0 0 15px;
	border-bottom: 2px solid var(--ted-rule);
}

.ted-tst .ted-tst__seg {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border: 2px solid var(--ted-rule-strong);
	border-radius: 2px;
	background: transparent;
}

.ted-tst .ted-tst__seg--done {
	border-color: var(--ted-green);
	background: var(--ted-green);
}

/* Meta row: count label at the left, Part badge at the right. */
.ted-tst .ted-tst__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	margin: 0;
}

.ted-tst .ted-tst__count {
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ted-green);
}

.ted-tst .ted-tst__part {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: var(--ted-part-min, 0px);
	text-align: center;
	padding: 0 18px;
	border: 2px solid var(--ted-green);
	border-radius: var(--ted-radius-ctl);
	font-size: 18px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ted-green);
}

.ted-tst .ted-tst__part:empty {
	display: none;
}

/* Stem: the state's heading, scenario line then question line. */
.ted-tst .ted-tst__question {
	min-width: 0;
}

/* Fixed tracks (1.2.2): quiz.js measures every question at the current
   viewport and writes the tallest prompt, the tallest answer row and the widest
   Part badge as custom properties on the component, so the prompt region, the
   four rows and the badge have the same geometry on all twelve questions.
   Without the script (or before it runs) the fallbacks leave the layout
   content-sized. */
.ted-tst .ted-tst__questions {
	position: relative;
}

.ted-tst .ted-tst__question .ted-tst__stem {
	min-height: var(--ted-stem-min, 0px);
}

/* Measurement pass: every question laid out at once at the real width, all but
   the first taken out of the flow and made invisible, the landing and gate
   shown with their tallest variants (restart confirmation, error callout), so
   one layout yields the worst case. The attribute lives for one synchronous
   pass; nothing is painted in this state. */
.ted-tst[data-ted-measuring] .ted-tst__panel--quiz,
.ted-tst[data-ted-measuring] .ted-tst__panel--landing,
.ted-tst[data-ted-measuring] .ted-tst__panel--gate {
	display: flex !important;
}

.ted-tst[data-ted-measuring] .ted-tst__question {
	display: block !important;
}

/* No transform may be in effect while measuring: the panel entrance and the
   row hover/press translate boxes by a few px, and WebKit reports the
   bounding rect of a translated box snapped to device pixels, so an 80px row
   read as 80.36px mid-animation would round the shared row track up to 81px
   for that page load alone. An important declaration outranks the running
   animation without restarting it. */
.ted-tst[data-ted-measuring],
.ted-tst[data-ted-measuring] * {
	transform: none !important;
}

.ted-tst[data-ted-measuring] .ted-tst__question + .ted-tst__question {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	visibility: hidden;
	pointer-events: none;
}

.ted-tst[data-ted-measuring] .ted-tst__restart[hidden] {
	display: flex !important;
}

.ted-tst[data-ted-measuring] .ted-tst__restartstep[data-ted-restartstep="ask"] {
	display: none !important;
}

.ted-tst[data-ted-measuring] .ted-tst__restartstep[data-ted-restartstep="confirm"][hidden] {
	display: inline-flex !important;
}

.ted-tst[data-ted-measuring] .ted-tst__formerror[hidden] {
	display: grid !important;
}

/* One card footprint for every non-result state: the question, landing and
   gate panels are flex columns at least as tall as the tallest of the three
   (--ted-panel-min, measured above at the chosen density); the question footer
   and the landing fine print sit at the foot of the card through a flexible
   spacer, so nothing moves between screens. The measurement pass lays the
   three panels out as the same flex columns (their minimum reset to 0), so the
   heights it reads are exactly the heights they render at. */
.ted-tst .ted-tst__panel--quiz,
.ted-tst .ted-tst__panel--landing,
.ted-tst .ted-tst__panel--gate {
	display: flex;
	flex-direction: column;
	min-height: var(--ted-panel-min, 0px);
}

.ted-tst .ted-tst__panel--quiz::before {
	content: "";
	order: 1;
	flex: 1 0 0;
}

.ted-tst .ted-tst__panel--quiz > .ted-tst__quizfoot {
	order: 2;
}

.ted-tst .ted-tst__panel--quiz[hidden],
.ted-tst .ted-tst__panel--landing[hidden],
.ted-tst .ted-tst__panel--gate[hidden] {
	display: none;
}

/* A flexible spacer between the landing's content and its fine print takes the
   free height, so the fine print keeps its own top margin and sits at the foot
   of the card; DOM and reading order are unchanged. */
.ted-tst .ted-tst__panel--landing::before {
	content: "";
	order: 1;
	flex: 1 0 0;
}

.ted-tst .ted-tst__panel--landing > .ted-tst__fine {
	order: 2;
}

.ted-tst .ted-tst__stem {
	margin: 22px 0 28px;
	max-width: 100%;
	font-size: 32px;
	font-weight: 900;
	line-height: 40px;
	letter-spacing: 0;
	color: var(--ted-ink);
	text-wrap: balance;
}

.ted-tst .ted-tst__stem:focus {
	outline: none;
}

.ted-tst .ted-tst__stem:focus-visible {
	outline: 3px solid var(--ted-ink);
	outline-offset: 6px;
}

.ted-tst .ted-tst__setup,
.ted-tst .ted-tst__ask {
	display: block;
}

/* Answer rows: key tile, text, and a check slot that is always reserved so
   selecting never reflows the text. */
.ted-tst .ted-tst__options {
	display: grid;
	row-gap: 14px;
}

.ted-tst .ted-tst__option {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: max(var(--ted-row-min, 0px), 76px);
	padding: 13px 20px;
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-radius: var(--ted-radius-ctl);
	background: var(--ted-paper-light);
	box-shadow: var(--ted-shadow-row);
	color: var(--ted-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	cursor: pointer;
}

.ted-tst .ted-tst__option:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 0 var(--ted-ink);
}

.ted-tst .ted-tst__option:active {
	transform: translate(2px, 2px);
	box-shadow: 0 0 0 0 var(--ted-ink);
}

.ted-tst .ted-tst__key {
	flex: 0 0 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-right: 32px;
	border: var(--ted-outline-ctl) solid var(--ted-rule-strong);
	border-radius: var(--ted-radius-ctl);
	background: var(--ted-paper);
	font-size: 26px;
	font-weight: 900;
	line-height: 1;
	color: var(--ted-ink);
}

.ted-tst .ted-tst__optiontext {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}

/* Selection marker: a cream disc that shows an ink dot once the row is chosen.
   The state says "chosen", never "correct" (no green, no tick) because
   correctness stays hidden until the result and its review. */
.ted-tst .ted-tst__mark {
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	/* The 50px circle must not set the row height: with −2px vertical margins its
	   margin box is 46px, the key tile's size, so a single-line row is 76px as the
	   anatomy sheet specifies (the raster's rows are 76.5) instead of 80. Two-line
	   rows are still governed by their text (90). Tablet/phone circles are no
	   taller than their tiles and set their own margins. */
	margin: -2px 0 -2px 22px;
	border-radius: 50%;
	background: var(--ted-paper-light);
	visibility: hidden;
}

.ted-tst .ted-tst__mark svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ted-tst .ted-tst__mark circle {
	fill: var(--ted-ink);
	stroke: none;
}

/* Chosen row: one step deeper cream, a 3px ink outline drawn inside the border
   (no layout shift), the key tile inverted to ink with a paper letter, and the
   marker disc showing its dot. Fill, tile and marker communicate the choice
   together, none of them with a correctness cue. */
.ted-tst .ted-tst__radio:checked + .ted-tst__option {
	background: var(--ted-paper);
	color: var(--ted-ink);
	box-shadow: inset 0 0 0 1px var(--ted-ink), var(--ted-shadow-row);
}

.ted-tst .ted-tst__radio:checked + .ted-tst__option .ted-tst__key {
	border-color: var(--ted-ink);
	background: var(--ted-ink);
	color: var(--ted-paper);
}

.ted-tst .ted-tst__radio:checked + .ted-tst__option .ted-tst__mark {
	visibility: visible;
}

/* Footer: Back at the left, the reveal note at the right. */
.ted-tst .ted-tst__quizfoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
	/* The Back button's hard shadow is paint, not layout; the board's bottom gap is
	   measured from the shadow edge in the raster and the anatomy sheet, so the
	   footer reserves the shadow's height (4px desktop/tablet, 3px phone). */
	margin-bottom: 4px;
	padding-top: 22px;
	border-top: 2px solid var(--ted-rule);
}

.ted-tst .ted-tst__hint {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	text-align: right;
	color: var(--ted-ink);
}

@media (max-width: 1023.98px) {
	.ted-tst .ted-tst__progress {
		gap: 6px;
	}

	.ted-tst .ted-tst__seg {
		flex-basis: 22px;
		width: 22px;
		height: 22px;
	}

	.ted-tst .ted-tst__count {
		font-size: 16px;
	}

	.ted-tst .ted-tst__part {
		padding: 0 14px;
		font-size: 16px;
		line-height: 36px;
	}

	.ted-tst .ted-tst__stem {
		margin: 20px 0 24px;
		font-size: 28px;
		line-height: 36px;
	}

	.ted-tst .ted-tst__options {
		row-gap: 12px;
	}

	.ted-tst .ted-tst__option {
		min-height: max(var(--ted-row-min, 0px), 68px);
		padding: 12px 16px;
		font-size: 18px;
		line-height: 28px;
	}

	.ted-tst .ted-tst__key {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
		margin-right: 20px;
		font-size: 24px;
	}

	.ted-tst .ted-tst__mark {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
		margin-left: 16px;
	}

	.ted-tst .ted-tst__quizfoot {
		margin-top: 24px;
		padding-top: 18px;
	}

	.ted-tst .ted-tst__btn--ink {
		min-height: 52px;
		padding: 0 26px;
		font-size: 20px;
	}

	.ted-tst .ted-tst__hint {
		font-size: 18px;
		line-height: 26px;
	}
}

@media (max-width: 599.98px) {
	.ted-tst .ted-tst__progress {
		gap: 6px;
		margin-bottom: 12px;
		padding-bottom: 12px;
	}

	/* Twelve squares share the row: they shrink together below 24px. */
	.ted-tst .ted-tst__seg {
		flex: 1 1 0;
		width: auto;
		max-width: 24px;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.ted-tst .ted-tst__meta {
		flex-wrap: wrap;
		gap: 8px;
		min-height: 0;
	}

	.ted-tst .ted-tst__count {
		font-size: 13px;
	}

	.ted-tst .ted-tst__part {
		padding: 0 12px;
		font-size: 14px;
		line-height: 30px;
	}

	.ted-tst .ted-tst__stem {
		margin: 16px 0 20px;
		font-size: 24px;
		line-height: 32px;
	}

	/* Rows top-align: the tile and the check sit on the first text line. */
	.ted-tst .ted-tst__option {
		align-items: flex-start;
		min-height: max(var(--ted-row-min, 0px), 64px);
		padding: 12px 14px;
		font-size: 16px;
		line-height: 24px;
	}

	.ted-tst .ted-tst__key {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
		margin-right: 14px;
		font-size: 22px;
	}

	.ted-tst .ted-tst__optiontext {
		padding: 8px 0;
	}

	.ted-tst .ted-tst__mark {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
		margin: 2px 0 0 12px;
	}

	.ted-tst .ted-tst__quizfoot {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 14px;
		margin-top: 20px;
		margin-bottom: 3px;
		padding-top: 16px;
	}

	.ted-tst .ted-tst__btn--ink {
		min-height: 48px;
		padding: 0 22px;
		font-size: 18px;
	}

	.ted-tst .ted-tst__hint {
		font-size: 16px;
		line-height: 24px;
		text-align: left;
	}
}

@media (max-width: 360px) {
	.ted-tst .ted-tst__stem {
		font-size: 22px;
		line-height: 30px;
	}

	.ted-tst .ted-tst__option {
		min-height: max(var(--ted-row-min, 0px), 60px);
	}

	.ted-tst .ted-tst__key {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
		font-size: 20px;
	}

	.ted-tst .ted-tst__optiontext {
		padding: 6px 0;
	}

	.ted-tst .ted-tst__mark {
		flex-basis: 32px;
		width: 32px;
		height: 32px;
	}
}

/* ------------------------------------------------------------------ gate */

/* Score block, shared by the gate (locked: `?`) and the result. The value is
   the big figure; the separator and the total follow in muted at half size,
   baseline-aligned, so `9 / 12` reads as one figure. */
.ted-tst .ted-tst__score {
	display: block;
	margin: 0 0 14px;
	font-size: 88px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ted-ink);
	font-variant-numeric: tabular-nums;
}

.ted-tst .ted-tst__score-visual {
	display: inline-flex;
	align-items: baseline;
}

.ted-tst .ted-tst__score .ted-tst__score-sep,
.ted-tst .ted-tst__score .ted-tst__score-total {
	font-size: 44px;
	font-weight: 900;
	letter-spacing: 0;
	color: var(--ted-muted);
}

.ted-tst .ted-tst__score .ted-tst__score-sep {
	margin: 0 10px 0 12px;
}

/* Locked: the `?` sits in a paper tile so "locked" reads as a shape as well
   as a glyph. No real or previewed score ever appears here. */
.ted-tst .ted-tst__score--locked {
	margin: 0 0 20px;
}

.ted-tst .ted-tst__score--locked .ted-tst__score-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	background: var(--ted-paper-light);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-radius: var(--ted-radius-ctl);
	box-shadow: var(--ted-shadow-row);
}

.ted-tst .ted-tst__panel--gate .ted-tst__label {
	margin: 6px 0 18px;
}

/* The state heading reuses the stem style with the state's own spacing. */
.ted-tst .ted-tst__panel--gate .ted-tst__stem--state {
	margin: 0 0 26px;
	max-width: 680px;
}

.ted-tst .ted-tst__form {
	display: grid;
	gap: 18px;
	margin: 0;
	max-width: 680px;
}

.ted-tst .ted-tst__field {
	display: grid;
	gap: 8px;
}

.ted-tst .ted-tst__field-label {
	display: block;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: var(--ted-ink);
}

/* I-text */
.ted-tst .ted-tst__input {
	display: block;
	width: 100%;
	max-width: 520px;
	min-height: 60px;
	padding: 0 18px;
	background: var(--ted-paper-light);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-radius: var(--ted-radius-ctl);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: var(--ted-ink);
}

.ted-tst .ted-tst__input::placeholder {
	color: var(--ted-muted);
	opacity: 1;
}

.ted-tst .ted-tst__input:focus {
	outline: none;
}

.ted-tst .ted-tst__input:focus-visible {
	outline: 3px solid var(--ted-green);
	outline-offset: 2px;
}

.ted-tst .ted-tst__input[aria-invalid="true"] {
	border-color: var(--ted-error);
}

/* Honeypot: off-screen, never focusable, never announced. */
.ted-tst .ted-tst__hp {
	position: absolute !important;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Consent: an optional box, unchecked by default, drawn beside its text. */
.ted-tst .ted-tst__consent {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-height: 44px;
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--ted-ink);
	cursor: pointer;
}

/* I-check */
.ted-tst .ted-tst__checkbox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	background: var(--ted-paper-light);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-radius: 4px;
}

.ted-tst .ted-tst__checkbox svg {
	display: block;
	width: 20px;
	height: 20px;
	opacity: 0;
	fill: none;
	stroke: var(--ted-paper);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ted-tst .ted-tst__consent-input:checked + .ted-tst__checkbox {
	background: var(--ted-green);
	border-color: var(--ted-green);
}

.ted-tst .ted-tst__consent-input:checked + .ted-tst__checkbox svg {
	opacity: 1;
}

.ted-tst .ted-tst__consent-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* S-callout-error: text in an ink-outlined row with an error-coloured rule.
   Directly above the button, so the eye lands on the fix, then the retry. */
.ted-tst .ted-tst__formerror {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 14px 18px;
	background: var(--ted-paper-light);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-left: 8px solid var(--ted-error);
	border-radius: var(--ted-radius-ctl);
	box-shadow: var(--ted-shadow-row);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--ted-ink);
}

.ted-tst .ted-tst__formerror-label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ted-error);
}

.ted-tst .ted-tst__formerror-text {
	display: block;
}

.ted-tst .ted-tst__form .ted-tst__btn--primary {
	justify-self: start;
}

.ted-tst .ted-tst__fine--privacy {
	margin: 6px 0 0;
	padding: 0;
	border-top: 0;
	max-width: 680px;
}

@media (max-width: 1023.98px) {
	.ted-tst .ted-tst__score {
		font-size: 72px;
	}

	.ted-tst .ted-tst__score .ted-tst__score-sep,
	.ted-tst .ted-tst__score .ted-tst__score-total {
		font-size: 36px;
	}

	.ted-tst .ted-tst__score--locked .ted-tst__score-value {
		width: 80px;
		height: 80px;
	}

	.ted-tst .ted-tst__input {
		min-height: 56px;
	}
}

@media (max-width: 599.98px) {
	.ted-tst .ted-tst__score {
		font-size: 56px;
	}

	.ted-tst .ted-tst__score .ted-tst__score-sep,
	.ted-tst .ted-tst__score .ted-tst__score-total {
		font-size: 28px;
	}

	.ted-tst .ted-tst__score .ted-tst__score-sep {
		margin: 0 6px 0 8px;
	}

	.ted-tst .ted-tst__score--locked {
		margin-bottom: 16px;
	}

	.ted-tst .ted-tst__score--locked .ted-tst__score-value {
		width: 64px;
		height: 64px;
	}

	.ted-tst .ted-tst__panel--gate .ted-tst__stem--state {
		margin-bottom: 20px;
	}

	.ted-tst .ted-tst__form {
		gap: 16px;
	}

	.ted-tst .ted-tst__field-label {
		font-size: 18px;
		line-height: 28px;
	}

	.ted-tst .ted-tst__input {
		max-width: none;
		min-height: 52px;
		padding: 0 16px;
		font-size: 18px;
	}

	.ted-tst .ted-tst__consent {
		font-size: 16px;
		line-height: 24px;
	}

	.ted-tst .ted-tst__checkbox {
		margin-top: -1px;
	}

	.ted-tst .ted-tst__formerror {
		padding: 12px 14px;
		font-size: 16px;
		line-height: 24px;
	}

	.ted-tst .ted-tst__form .ted-tst__btn--primary {
		justify-self: stretch;
		width: 100%;
	}
}

@media (max-width: 360px) {
	.ted-tst .ted-tst__score {
		font-size: 48px;
	}

	.ted-tst .ted-tst__score .ted-tst__score-sep,
	.ted-tst .ted-tst__score .ted-tst__score-total {
		font-size: 24px;
	}

	.ted-tst .ted-tst__score--locked .ted-tst__score-value {
		width: 56px;
		height: 56px;
	}
}

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

/* Mail notice: one factual line with a green rule; the same row with an error
   rule when the email could not be sent. */
.ted-tst .ted-tst__mailnotice {
	margin: 0 0 24px;
	padding: 12px 18px;
	background: var(--ted-paper-light);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-left: 8px solid var(--ted-green);
	border-radius: var(--ted-radius-ctl);
	box-shadow: var(--ted-shadow-row);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--ted-ink);
	overflow-wrap: anywhere;
}

.ted-tst .ted-tst__mailnotice--failed {
	border-left-color: var(--ted-error);
}

.ted-tst .ted-tst__scoreblock {
	margin: 0 0 30px;
}

.ted-tst .ted-tst__scoreblock .ted-tst__label {
	margin: 0 0 12px;
}

.ted-tst .ted-tst__scoreblock .ted-tst__stem--state {
	margin: 0 0 12px;
	max-width: 900px;
}

.ted-tst .ted-tst__lede {
	margin: 0;
	max-width: 760px;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--ted-ink);
}

/* S-strip-green: the blind spot, paper on green (7.1:1), no translucent text. */
.ted-tst .ted-tst__blindspot {
	margin: 0 0 30px;
	padding: 22px 28px;
	background: var(--ted-green);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-radius: var(--ted-radius-ctl);
	color: var(--ted-paper);
}

/* Compound selector on purpose: the generic phone .ted-tst__label rule in the
   responsive block would otherwise win on source order and hand the strip's
   caption the landing label's 4px/16px margins and 13px size. */
.ted-tst .ted-tst__label.ted-tst__label--onink {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.1em;
	color: var(--ted-paper);
}

.ted-tst .ted-tst__blindspot-name {
	margin: 0 0 8px;
	font-size: 28px;
	font-weight: 900;
	line-height: 36px;
	color: var(--ted-paper);
	text-wrap: balance;
}

.ted-tst .ted-tst__blindspot-blurb {
	margin: 0;
	max-width: 760px;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--ted-paper);
}

/* Criterion tiles: label and a plain fraction. No bars, no meters. */
.ted-tst .ted-tst__criteria {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 34px;
}

.ted-tst .ted-tst__criterion {
	display: flex;
	flex-direction: column;
	min-height: 120px;
	margin: 0;
	padding: 18px 20px 20px;
	background: var(--ted-paper-light);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-radius: var(--ted-radius-ctl);
	box-shadow: var(--ted-shadow-row);
}

.ted-tst .ted-tst__criterion--weak {
	border-color: var(--ted-green);
	box-shadow: inset 0 0 0 1px var(--ted-green), var(--ted-shadow-row);
}

.ted-tst .ted-tst__criterion-label {
	display: block;
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ted-green);
}

.ted-tst .ted-tst__criterion-score {
	display: block;
	margin-top: auto;
	font-size: 36px;
	font-weight: 900;
	line-height: 40px;
	color: var(--ted-ink);
	font-variant-numeric: tabular-nums;
}

.ted-tst .ted-tst__criterion-score .ted-tst__score-sep {
	margin: 0 6px;
	font-size: 28px;
	color: var(--ted-muted);
}

.ted-tst .ted-tst__criterion-tag {
	display: block;
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ted-green);
}

/* Section headings: a 3px ink rule above, like a new section of a paper. */
.ted-tst .ted-tst__h2 {
	margin: 0 0 18px;
	padding: 34px 0 0;
	border-top: 3px solid var(--ted-ink);
	font-size: 28px;
	font-weight: 900;
	line-height: 36px;
	letter-spacing: 0;
	color: var(--ted-ink);
	text-wrap: balance;
}

.ted-tst .ted-tst__h3 {
	margin: 18px 0 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: var(--ted-ink);
}

.ted-tst .ted-tst__details-body .ted-tst__h3:first-child {
	margin-top: 4px;
}

/* D-details: a paper row whose summary carries a green square marker with a
   plus that becomes a minus when open. Native disclosure, no script. */
.ted-tst .ted-tst__details {
	margin: 0;
	background: var(--ted-paper-light);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-radius: var(--ted-radius-ctl);
	box-shadow: var(--ted-shadow-row);
}

.ted-tst .ted-tst__summary {
	position: relative;
	display: block;
	padding: 16px 20px 16px 56px;
	border-radius: calc(var(--ted-radius-ctl) - 2px);
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: var(--ted-ink);
	cursor: pointer;
	list-style: none;
}

.ted-tst .ted-tst__summary::-webkit-details-marker {
	display: none;
}

.ted-tst .ted-tst__summary::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 19px;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background:
		linear-gradient(var(--ted-paper), var(--ted-paper)) center / 12px 3px no-repeat,
		linear-gradient(var(--ted-paper), var(--ted-paper)) center / 3px 12px no-repeat,
		var(--ted-green);
}

.ted-tst .ted-tst__details[open] > .ted-tst__summary::before {
	background:
		linear-gradient(var(--ted-paper), var(--ted-paper)) center / 12px 3px no-repeat,
		var(--ted-green);
}

/* Missed-answer disclosures under "Review your mistakes" carry the error red
   instead of green: a deep red tile with a light plus while closed, a light
   minus once open; red means "mistake: open for the correction". Generic
   disclosures (Resources and methodology) keep the green tile. The colour is
   never the only cue: each summary names itself as a mistake/correction for
   assistive technology, and forced-colours mode draws the same marks in
   system colours below. Contrast: #9e1b1b against the light glyph 7.9:1,
   against the paper row 7.3:1 (WCAG 1.4.11 needs 3:1). */
.ted-tst .ted-tst__miss > .ted-tst__summary::before {
	background:
		linear-gradient(var(--ted-paper-light), var(--ted-paper-light)) center / 12px 3px no-repeat,
		linear-gradient(var(--ted-paper-light), var(--ted-paper-light)) center / 3px 12px no-repeat,
		var(--ted-error);
}

.ted-tst .ted-tst__miss[open] > .ted-tst__summary::before {
	background:
		linear-gradient(var(--ted-paper-light), var(--ted-paper-light)) center / 12px 3px no-repeat,
		var(--ted-error);
}

.ted-tst .ted-tst__summary:hover {
	background: var(--ted-paper);
}

.ted-tst .ted-tst__details-body {
	padding: 0 20px 18px;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--ted-ink);
}

/* The corrections. */
.ted-tst .ted-tst__misses {
	display: grid;
	gap: 12px;
	margin: 0 0 34px;
}

.ted-tst .ted-tst__miss-q {
	color: var(--ted-green);
}

.ted-tst .ted-tst__miss-cat {
	display: inline-block;
	margin-left: 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ted-muted);
	vertical-align: 2px;
}

.ted-tst .ted-tst__miss-stem {
	display: block;
	margin-top: 4px;
}

.ted-tst .ted-tst__miss-dl {
	display: grid;
	gap: 12px;
	margin: 0;
}

.ted-tst .ted-tst__miss-row {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 2px 0 2px 16px;
	border-left: 8px solid var(--ted-rule);
}

.ted-tst .ted-tst__miss-row--wrong {
	border-left-color: var(--ted-error);
}

.ted-tst .ted-tst__miss-row--right {
	border-left-color: var(--ted-green);
}

.ted-tst .ted-tst__miss-row dt {
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ted-green);
}

.ted-tst .ted-tst__miss-row--wrong dt {
	color: var(--ted-error);
}

.ted-tst .ted-tst__miss-row dd {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--ted-ink);
}

.ted-tst .ted-tst__success {
	margin: 0;
	padding: 18px 20px;
	background: var(--ted-paper-light);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-radius: var(--ted-radius-ctl);
	box-shadow: var(--ted-shadow-row);
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: var(--ted-ink);
}

/* Checklist call to action: the one prominent block on the sheet. */
.ted-tst .ted-tst__ctaBlock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 34px;
	padding: 24px 28px;
	background: var(--ted-paper-light);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-radius: var(--ted-radius-ctl);
	box-shadow: var(--ted-shadow-row);
}

.ted-tst .ted-tst__ctaText {
	flex: 1 1 420px;
	min-width: 0;
}

.ted-tst .ted-tst__ctaBlock .ted-tst__btn {
	flex: 0 0 auto;
}

.ted-tst .ted-tst__strong {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: var(--ted-ink);
}

.ted-tst .ted-tst__body {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--ted-ink);
}

/* Next actions: three numbered blocks. */
.ted-tst .ted-tst__actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 34px;
}

.ted-tst .ted-tst__actions li {
	margin: 0;
	padding: 18px 20px;
	background: var(--ted-paper-light);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-radius: var(--ted-radius-ctl);
	box-shadow: var(--ted-shadow-row);
}

.ted-tst .ted-tst__num {
	display: block;
	margin: 0 0 10px;
	font-size: 36px;
	font-weight: 900;
	line-height: 40px;
	color: var(--ted-green);
	font-variant-numeric: tabular-nums;
}

.ted-tst .ted-tst__actions p {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--ted-ink);
}

/* Resources and methodology: secondary, closed by default. */
.ted-tst .ted-tst__details--secondary {
	margin: 0 0 30px;
}

.ted-tst .ted-tst__resources {
	display: grid;
	gap: 6px;
	margin: 0;
}

.ted-tst .ted-tst__sources {
	display: grid;
	gap: 0;
	margin: 0;
}

/* Resource and source links are stacked text links, not inline links in a
   sentence, so on screen each one is at least a 44px-tall target: the line
   box plus 11px above and below (sources: 22px line → a 44px pitch). */
.ted-tst .ted-tst__reslink,
.ted-tst .ted-tst__sources a {
	display: inline-block;
	padding: 11px 0;
}

.ted-tst .ted-tst__reslink {
	font-weight: 700;
}

.ted-tst .ted-tst__resdesc {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--ted-muted);
}

/* Share and start again. */
.ted-tst .ted-tst__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0;
}

.ted-tst .ted-tst__sharenote {
	font-size: 18px;
	line-height: 28px;
	color: var(--ted-ink);
	overflow-wrap: anywhere;
}

.ted-tst .ted-tst__restart--result {
	margin: 18px 0 0;
}

@media (max-width: 1023.98px) {
	.ted-tst .ted-tst__criteria {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ted-tst .ted-tst__blindspot-name,
	.ted-tst .ted-tst__h2 {
		font-size: 26px;
		line-height: 34px;
	}

	.ted-tst .ted-tst__actions p,
	.ted-tst .ted-tst__lede,
	.ted-tst .ted-tst__blindspot-blurb,
	.ted-tst .ted-tst__body,
	.ted-tst .ted-tst__mailnotice,
	.ted-tst .ted-tst__details-body,
	.ted-tst .ted-tst__miss-row dd,
	.ted-tst .ted-tst__sharenote {
		font-size: 17px;
		line-height: 26px;
	}
}

@media (max-width: 599.98px) {
	.ted-tst .ted-tst__mailnotice {
		margin-bottom: 20px;
		padding: 10px 14px;
	}

	.ted-tst .ted-tst__scoreblock,
	.ted-tst .ted-tst__blindspot {
		margin-bottom: 24px;
	}

	.ted-tst .ted-tst__scoreblock .ted-tst__label {
		margin-bottom: 10px;
	}

	.ted-tst .ted-tst__blindspot {
		padding: 16px 18px;
	}

	.ted-tst .ted-tst__blindspot-name {
		font-size: 22px;
		line-height: 28px;
	}

	.ted-tst .ted-tst__criteria {
		gap: 10px;
		margin-bottom: 28px;
	}

	.ted-tst .ted-tst__criterion {
		min-height: 104px;
		padding: 14px 16px 16px;
	}

	.ted-tst .ted-tst__criterion-label,
	.ted-tst .ted-tst__criterion-tag {
		font-size: 12px;
		line-height: 18px;
	}

	.ted-tst .ted-tst__criterion-score {
		font-size: 28px;
		line-height: 32px;
	}

	.ted-tst .ted-tst__criterion-score .ted-tst__score-sep {
		margin: 0 4px;
		font-size: 22px;
	}

	.ted-tst .ted-tst__h2 {
		margin-bottom: 14px;
		padding-top: 26px;
		font-size: 22px;
		line-height: 30px;
	}

	.ted-tst .ted-tst__h3 {
		font-size: 18px;
		line-height: 28px;
	}

	.ted-tst .ted-tst__summary {
		padding: 14px 14px 14px 48px;
		font-size: 16px;
		line-height: 24px;
	}

	.ted-tst .ted-tst__summary::before {
		left: 14px;
		top: 14px;
	}

	.ted-tst .ted-tst__miss-cat {
		display: block;
		margin: 2px 0 0;
		font-size: 12px;
		line-height: 18px;
	}

	.ted-tst .ted-tst__details-body {
		padding: 0 14px 16px;
	}

	.ted-tst .ted-tst__miss-row {
		padding-left: 12px;
		border-left-width: 6px;
	}

	.ted-tst .ted-tst__misses,
	.ted-tst .ted-tst__actions,
	.ted-tst .ted-tst__ctaBlock {
		margin-bottom: 28px;
	}

	.ted-tst .ted-tst__ctaBlock {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 18px 16px 20px;
	}

	.ted-tst .ted-tst__ctaText {
		flex-basis: auto;
	}

	.ted-tst .ted-tst__ctaBlock .ted-tst__btn {
		width: 100%;
	}

	.ted-tst .ted-tst__actions {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.ted-tst .ted-tst__actions li {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0 14px;
		align-items: start;
		padding: 14px 16px 16px;
	}

	.ted-tst .ted-tst__num {
		margin: 0;
		font-size: 28px;
		line-height: 32px;
	}

	.ted-tst .ted-tst__actions p,
	.ted-tst .ted-tst__lede,
	.ted-tst .ted-tst__blindspot-blurb,
	.ted-tst .ted-tst__body,
	.ted-tst .ted-tst__mailnotice,
	.ted-tst .ted-tst__details-body,
	.ted-tst .ted-tst__miss-row dd,
	.ted-tst .ted-tst__sharenote,
	.ted-tst .ted-tst__strong,
	.ted-tst .ted-tst__success {
		font-size: 16px;
		line-height: 24px;
	}

	.ted-tst .ted-tst__details--secondary {
		margin-bottom: 24px;
	}

	.ted-tst .ted-tst__share {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

@media (max-width: 360px) {
	.ted-tst .ted-tst__criteria {
		grid-template-columns: minmax(0, 1fr);
	}

	.ted-tst .ted-tst__criterion {
		min-height: 0;
	}
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1023.98px) {
	.ted-tst .ted-tst__board {
		padding: 22px 28px 26px;
	}

	.ted-tst .ted-tst__label {
		font-size: 16px;
	}

	.ted-tst .ted-tst__headline {
		font-size: 38px;
		line-height: 44px;
	}

	.ted-tst .ted-tst__promise {
		font-size: 17px;
		line-height: 26px;
	}

	.ted-tst .ted-tst__facts {
		font-size: 18px;
		line-height: 28px;
	}

	.ted-tst .ted-tst__disclosure {
		font-size: 17px;
		line-height: 26px;
	}

	.ted-tst .ted-tst__btn--primary,
	.ted-tst .ted-tst__btn--secondary {
		min-height: 52px;
		padding: 0 28px;
		font-size: 20px;
	}

	.ted-tst .ted-tst__restart,
	.ted-tst .ted-tst__btn--tertiary {
		font-size: 18px;
		line-height: 28px;
	}
}

@media (max-width: 599.98px) {
	.ted-tst--embedded {
		padding: 16px;
	}

	.ted-tst .ted-tst__board {
		padding: 18px 16px 20px;
	}

	.ted-tst .ted-tst__label {
		margin: 4px 0 16px;
		font-size: 13px;
	}

	.ted-tst .ted-tst__headline {
		margin-bottom: 16px;
		font-size: 30px;
		line-height: 36px;
	}

	.ted-tst .ted-tst__promise {
		margin-bottom: 20px;
		font-size: 16px;
		line-height: 24px;
	}

	.ted-tst .ted-tst__facts {
		display: grid;
		gap: 6px;
		margin-bottom: 24px;
		padding: 12px 0;
		font-size: 16px;
		line-height: 24px;
	}

	.ted-tst .ted-tst__dot {
		display: none;
	}

	.ted-tst .ted-tst__cta {
		gap: 14px;
	}

	.ted-tst .ted-tst__cta .ted-tst__btn--primary {
		width: 100%;
	}

	.ted-tst .ted-tst__disclosure {
		font-size: 16px;
		line-height: 24px;
	}

	.ted-tst .ted-tst__btn--primary,
	.ted-tst .ted-tst__btn--secondary {
		min-height: 52px;
		padding: 0 24px;
		font-size: 18px;
	}

	.ted-tst .ted-tst__restart,
	.ted-tst .ted-tst__btn--tertiary {
		font-size: 16px;
		line-height: 24px;
	}

	/* "Take the test again" is too long for a nowrap pill on narrow phones: stack it like the other phone buttons.
	   The step wrapper must span the row first, because width: 100% of a content-sized inline-flex wrapper is just the
	   button's own width, which left a 257px pill at 390 wide and a full-width button only once the label wrapped. */
	.ted-tst .ted-tst__restart .ted-tst__restartstep {
		flex: 1 1 100%;
	}

	.ted-tst .ted-tst__restart .ted-tst__btn--secondary {
		width: 100%;
		padding: 12px 20px;
		white-space: normal;
		line-height: 1.2;
	}

	.ted-tst .ted-tst__fine {
		margin-top: 28px;
		padding-top: 14px;
	}

	/* The privacy line sits inside the gate form, right under the button; the
	   landing-fine spacing above must not reopen the 42px gap on phones. */
	.ted-tst .ted-tst__fine--privacy {
		margin-top: 6px;
		padding-top: 0;
	}

	.ted-tst .ted-tst__notice {
		padding: 14px 16px;
		font-size: 16px;
		line-height: 24px;
	}
}

@media (max-width: 360px) {
	.ted-tst .ted-tst__board {
		padding: 16px 14px 18px;
	}

	.ted-tst .ted-tst__headline {
		font-size: 28px;
		line-height: 34px;
	}
}

/* ------------------------------------------------------- viewport fit (density) */

/* The landing, the questions and the email gate fit inside one viewport on the
   focus page. quiz.js measures the page after each of those states renders and
   steps `data-ted-density` on <html> from 1 (the anatomy sheets) to 5 (the
   floor) until nothing sits below the fold; `data-ted-compact` lists every
   level reached, so `[data-ted-compact~="3"]` reads "level 3 and above". Every
   tier steps spacing, type and control sizes down together; nothing is
   scaled, zoomed, clipped or truncated; answer text never drops below 15px,
   controls never below 44px, small tracked labels and fine print never below
   13px. The result sheet is never compacted. Tiers are cumulative; within each
   tier the desktop values come first, then tablet (≤1023.98px) and phone
   (≤599.98px) overrides, matching the base breakpoints above. */

/* ---- level 2 and above: gentle */

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst-shell {
	padding: 28px 40px 32px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst-shell .ted-tst-shell__head {
	margin-bottom: 24px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__board {
	padding: 20px 40px 20px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__progress {
	margin-bottom: 12px;
	padding-bottom: 12px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__meta {
	min-height: 40px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__stem {
	margin: 16px 0 20px;
	font-size: 30px;
	line-height: 38px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__options {
	row-gap: 12px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__option {
	min-height: max(var(--ted-row-min, 0px), 68px);
	padding: 10px 20px;
	line-height: 28px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__quizfoot {
	margin-top: 20px;
	padding-top: 16px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__btn--ink {
	min-height: 56px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__label {
	margin: 4px 0 16px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__headline {
	margin-bottom: 16px;
	font-size: 40px;
	line-height: 46px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__promise {
	margin-bottom: 20px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__facts {
	margin-bottom: 22px;
	padding: 10px 0;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__restart {
	margin-top: 14px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__fine {
	margin-top: 28px;
	padding-top: 14px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__panel--gate .ted-tst__label {
	margin: 4px 0 14px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__score {
	font-size: 76px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__score--locked {
	margin-bottom: 14px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__score--locked .ted-tst__score-value {
	width: 84px;
	height: 84px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__panel--gate .ted-tst__stem--state {
	margin-bottom: 20px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__form {
	gap: 14px;
}

html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__fine--privacy {
	margin-top: 4px;
	padding-top: 0;
}

@media (max-width: 1023.98px) {
	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst-shell {
		padding: 24px 24px 28px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst-shell .ted-tst-shell__head {
		margin-bottom: 20px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__board {
		padding: 18px 28px 18px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__stem {
		margin: 14px 0 18px;
		font-size: 26px;
		line-height: 34px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__option {
		min-height: max(var(--ted-row-min, 0px), 62px);
		padding: 9px 16px;
		line-height: 26px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__quizfoot {
		margin-top: 18px;
		padding-top: 14px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__btn--ink {
		min-height: 50px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__headline {
		font-size: 34px;
		line-height: 40px;
	}
}

@media (max-width: 599.98px) {
	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst-shell {
		padding: 16px 16px 20px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst-shell .ted-tst-shell__head {
		margin-bottom: 14px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__board {
		padding: 14px 16px 14px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__progress {
		margin-bottom: 10px;
		padding-bottom: 10px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__stem {
		margin: 12px 0 14px;
		font-size: 22px;
		line-height: 28px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__options {
		row-gap: 10px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__option {
		min-height: max(var(--ted-row-min, 0px), 56px);
		padding: 10px 12px;
		line-height: 24px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__optiontext {
		padding: 6px 0;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__key {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
		margin-right: 12px;
		font-size: 20px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__mark {
		flex-basis: 32px;
		width: 32px;
		height: 32px;
		margin: 2px 0 0 10px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__quizfoot {
		gap: 10px;
		margin-top: 14px;
		padding-top: 12px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__btn--ink {
		min-height: 46px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__hint {
		font-size: 15px;
		line-height: 22px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__headline {
		margin-bottom: 12px;
		font-size: 28px;
		line-height: 32px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__promise {
		margin-bottom: 14px;
		font-size: 15px;
		line-height: 22px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__facts {
		gap: 4px;
		margin-bottom: 16px;
		padding: 10px 0;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__cta {
		gap: 10px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__disclosure {
		font-size: 15px;
		line-height: 22px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__fine {
		margin-top: 20px;
		padding-top: 10px;
		font-size: 14px;
		line-height: 20px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__score {
		font-size: 52px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__score--locked .ted-tst__score-value {
		width: 60px;
		height: 60px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__panel--gate .ted-tst__stem--state {
		margin-bottom: 14px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__form {
		gap: 12px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__input {
		min-height: 48px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__consent {
		font-size: 15px;
		line-height: 22px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__formerror {
		padding: 10px 12px;
		font-size: 15px;
		line-height: 22px;
	}

	html.ted-tst-focus[data-ted-compact~="2"] .ted-tst .ted-tst__fine--privacy {
		font-size: 14px;
		line-height: 20px;
	}
}

/* ---- level 3 and above: compact */

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst-shell {
	padding: 20px 40px 24px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst-shell .ted-tst-shell__head {
	margin-bottom: 16px;
	line-height: 18px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst-shell .ted-tst-brand {
	height: 18px;
	font-size: 18px;
	line-height: 18px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__board {
	padding: 16px 40px 16px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__progress {
	gap: 6px;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__seg {
	flex-basis: 20px;
	width: 20px;
	height: 20px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__meta {
	min-height: 36px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__count {
	font-size: 16px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__part {
	padding: 0 14px;
	font-size: 16px;
	line-height: 36px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__stem {
	margin: 12px 0 16px;
	font-size: 28px;
	line-height: 36px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__options {
	row-gap: 10px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__option {
	min-height: max(var(--ted-row-min, 0px), 60px);
	padding: 8px 18px;
	font-size: 18px;
	line-height: 26px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__key {
	flex-basis: 42px;
	width: 42px;
	height: 42px;
	margin-right: 24px;
	font-size: 24px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__mark {
	flex-basis: 42px;
	width: 42px;
	height: 42px;
	margin: 0 0 0 18px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__quizfoot {
	margin-top: 14px;
	padding-top: 12px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__btn--ink {
	min-height: 52px;
	padding: 0 26px;
	font-size: 22px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__hint {
	font-size: 18px;
	line-height: 26px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__headline {
	margin-bottom: 12px;
	font-size: 36px;
	line-height: 42px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__promise {
	margin-bottom: 16px;
	font-size: 17px;
	line-height: 26px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__facts {
	margin-bottom: 18px;
	padding: 8px 0;
	font-size: 18px;
	line-height: 28px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__btn--primary,
html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__btn--secondary {
	min-height: 54px;
	font-size: 20px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__disclosure {
	font-size: 17px;
	line-height: 26px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__restart {
	margin-top: 12px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__fine {
	margin-top: 20px;
	padding-top: 12px;
	font-size: 14px;
	line-height: 20px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__score {
	font-size: 64px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__score .ted-tst__score-sep,
html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__score .ted-tst__score-total {
	font-size: 32px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__score--locked .ted-tst__score-value {
	width: 72px;
	height: 72px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__panel--gate .ted-tst__label {
	margin: 2px 0 12px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__panel--gate .ted-tst__stem--state {
	margin-bottom: 16px;
	font-size: 26px;
	line-height: 34px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__form {
	gap: 12px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__field {
	gap: 6px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__field-label {
	font-size: 18px;
	line-height: 28px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__input {
	min-height: 52px;
	font-size: 18px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__consent {
	font-size: 17px;
	line-height: 26px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__formerror {
	padding: 12px 16px;
	font-size: 17px;
	line-height: 26px;
}

html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__fine--privacy {
	margin-top: 4px;
	padding-top: 0;
}

@media (max-width: 1023.98px) {
	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst-shell {
		padding: 18px 24px 22px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst-shell .ted-tst-shell__head {
		margin-bottom: 14px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__board {
		padding: 14px 24px 14px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__stem {
		font-size: 24px;
		line-height: 32px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__option {
		min-height: max(var(--ted-row-min, 0px), 56px);
		padding: 8px 14px;
		font-size: 17px;
		line-height: 25px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__key {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
		margin-right: 16px;
		font-size: 22px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__mark {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
		margin-left: 12px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__quizfoot {
		margin-top: 12px;
		padding-top: 10px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__btn--ink {
		min-height: 48px;
		font-size: 20px;
	}
}

@media (max-width: 599.98px) {
	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst-shell {
		padding: 12px 14px 14px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst-shell .ted-tst-shell__head {
		margin-bottom: 10px;
		line-height: 15px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst-shell .ted-tst-brand {
		height: 15px;
		font-size: 15px;
		line-height: 15px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst-shell .ted-tst-brand::before {
		width: 24px;
		height: 4px;
		margin-right: 10px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__board {
		padding: 12px 14px 12px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__progress {
		gap: 5px;
		margin-bottom: 8px;
		padding-bottom: 8px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__seg {
		flex: 1 1 0;
		width: auto;
		max-width: 18px;
		height: auto;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__meta {
		gap: 6px;
		min-height: 0;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__count {
		font-size: 13px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__part {
		padding: 0 10px;
		font-size: 13px;
		line-height: 26px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__stem {
		margin: 10px 0 12px;
		font-size: 20px;
		line-height: 26px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__options {
		row-gap: 8px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__option {
		min-height: max(var(--ted-row-min, 0px), 48px);
		padding: 8px 10px;
		font-size: 15px;
		line-height: 21px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__optiontext {
		padding: 4px 0;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__key {
		flex-basis: 32px;
		width: 32px;
		height: 32px;
		margin-right: 10px;
		font-size: 18px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__mark {
		flex-basis: 28px;
		width: 28px;
		height: 28px;
		margin: 2px 0 0 8px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__quizfoot {
		gap: 8px;
		margin-top: 12px;
		padding-top: 10px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__btn--ink {
		min-height: 44px;
		padding: 0 18px;
		font-size: 16px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__hint {
		font-size: 14px;
		line-height: 20px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__label {
		margin: 2px 0 10px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__headline {
		margin-bottom: 10px;
		font-size: 26px;
		line-height: 30px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__promise {
		margin-bottom: 12px;
		font-size: 15px;
		line-height: 21px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__facts {
		gap: 3px;
		margin-bottom: 14px;
		padding: 8px 0;
		font-size: 15px;
		line-height: 21px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__cta {
		gap: 8px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__btn--primary,
	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__btn--secondary {
		min-height: 48px;
		font-size: 17px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__disclosure {
		font-size: 15px;
		line-height: 21px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__restart {
		gap: 8px 12px;
		margin-top: 10px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__fine {
		margin-top: 16px;
		padding-top: 8px;
		font-size: 14px;
		line-height: 19px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__notice {
		margin-bottom: 14px;
		padding: 10px 12px;
		font-size: 15px;
		line-height: 21px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__score {
		font-size: 44px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__score .ted-tst__score-sep,
	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__score .ted-tst__score-total {
		font-size: 22px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__score--locked {
		margin-bottom: 10px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__score--locked .ted-tst__score-value {
		width: 52px;
		height: 52px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__panel--gate .ted-tst__label {
		margin: 2px 0 8px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__panel--gate .ted-tst__stem--state {
		margin-bottom: 12px;
		font-size: 19px;
		line-height: 25px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__form {
		gap: 10px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__field {
		gap: 4px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__field-label {
		font-size: 16px;
		line-height: 24px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__input {
		min-height: 46px;
		padding: 0 12px;
		font-size: 16px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__consent {
		gap: 10px;
		font-size: 15px;
		line-height: 21px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__checkbox {
		flex-basis: 24px;
		width: 24px;
		height: 24px;
		margin-top: 0;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__formerror {
		padding: 8px 10px;
		font-size: 15px;
		line-height: 21px;
	}

	html.ted-tst-focus[data-ted-compact~="3"] .ted-tst .ted-tst__fine--privacy {
		font-size: 13px;
		line-height: 18px;
	}
}

/* ---- level 4 and above: dense */

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst-shell {
	padding: 14px 40px 16px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst-shell .ted-tst-shell__head {
	margin-bottom: 10px;
	line-height: 16px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst-shell .ted-tst-brand {
	height: 16px;
	font-size: 16px;
	line-height: 16px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst-shell .ted-tst-brand::before {
	width: 32px;
	margin-right: 12px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__board {
	padding: 12px 36px 12px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__progress {
	gap: 5px;
	margin-bottom: 8px;
	padding-bottom: 8px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__seg {
	flex-basis: 16px;
	width: 16px;
	height: 16px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__meta {
	min-height: 32px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__count {
	font-size: 15px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__part {
	padding: 0 12px;
	font-size: 15px;
	line-height: 32px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__stem {
	margin: 10px 0 12px;
	font-size: 25px;
	line-height: 32px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__options {
	row-gap: 8px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__option {
	min-height: max(var(--ted-row-min, 0px), 54px);
	padding: 6px 16px;
	font-size: 17px;
	line-height: 24px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__key {
	flex-basis: 38px;
	width: 38px;
	height: 38px;
	margin-right: 20px;
	font-size: 21px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__mark {
	flex-basis: 36px;
	width: 36px;
	height: 36px;
	margin: 0 0 0 16px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__quizfoot {
	margin-top: 10px;
	margin-bottom: 2px;
	padding-top: 8px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__btn--ink {
	min-height: 48px;
	padding: 0 22px;
	font-size: 20px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__hint {
	font-size: 17px;
	line-height: 24px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__label {
	margin: 2px 0 10px;
	font-size: 16px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__headline {
	margin-bottom: 10px;
	font-size: 32px;
	line-height: 38px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__promise {
	margin-bottom: 12px;
	font-size: 16px;
	line-height: 24px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__facts {
	margin-bottom: 14px;
	padding: 6px 0;
	font-size: 17px;
	line-height: 26px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__btn--primary,
html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__btn--secondary {
	min-height: 50px;
	font-size: 19px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__disclosure {
	font-size: 16px;
	line-height: 24px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__restart {
	margin-top: 10px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__fine {
	margin-top: 14px;
	padding-top: 10px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__score {
	font-size: 56px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__score .ted-tst__score-sep,
html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__score .ted-tst__score-total {
	font-size: 28px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__score--locked {
	margin-bottom: 10px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__score--locked .ted-tst__score-value {
	width: 64px;
	height: 64px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__panel--gate .ted-tst__stem--state {
	margin-bottom: 12px;
	font-size: 24px;
	line-height: 31px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__form {
	gap: 10px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__field {
	gap: 4px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__field-label {
	font-size: 17px;
	line-height: 26px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__input {
	min-height: 48px;
	font-size: 17px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__consent {
	font-size: 16px;
	line-height: 24px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__formerror {
	padding: 10px 14px;
	font-size: 16px;
	line-height: 24px;
}

html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__fine--privacy {
	margin-top: 2px;
	font-size: 14px;
	line-height: 20px;
}

@media (max-width: 1023.98px) {
	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst-shell {
		padding: 12px 20px 14px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__board {
		padding: 12px 20px 12px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__stem {
		font-size: 22px;
		line-height: 29px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__option {
		min-height: max(var(--ted-row-min, 0px), 52px);
		padding: 6px 12px;
		font-size: 16px;
		line-height: 24px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__key {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
		margin-right: 14px;
		font-size: 20px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__mark {
		flex-basis: 34px;
		width: 34px;
		height: 34px;
		margin-left: 10px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__btn--ink {
		min-height: 46px;
		font-size: 18px;
	}
}

@media (max-width: 599.98px) {
	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst-shell {
		padding: 8px 12px 10px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst-shell .ted-tst-shell__head {
		margin-bottom: 8px;
		line-height: 14px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst-shell .ted-tst-brand {
		height: 14px;
		font-size: 14px;
		line-height: 14px;
		letter-spacing: 0.09em;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst-shell .ted-tst-brand::before {
		width: 22px;
		height: 3px;
		margin-right: 8px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__board {
		padding: 10px 12px 10px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__progress {
		gap: 4px;
		margin-bottom: 6px;
		padding-bottom: 6px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__seg {
		max-width: 14px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__part {
		padding: 0 8px;
		line-height: 24px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__stem {
		margin: 8px 0 10px;
		font-size: 19px;
		line-height: 24px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__options {
		row-gap: 6px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__option {
		min-height: max(var(--ted-row-min, 0px), 44px);
		padding: 7px 8px;
		font-size: 15px;
		line-height: 20px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__optiontext {
		padding: 3px 0;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__key {
		flex-basis: 28px;
		width: 28px;
		height: 28px;
		margin-right: 8px;
		font-size: 16px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__mark {
		flex-basis: 24px;
		width: 24px;
		height: 24px;
		margin: 1px 0 0 6px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__quizfoot {
		gap: 6px;
		margin-top: 8px;
		padding-top: 8px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__btn--ink {
		padding: 0 16px;
		font-size: 15px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__hint {
		font-size: 14px;
		line-height: 19px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__label {
		margin: 2px 0 8px;
		font-size: 13px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__headline {
		margin-bottom: 8px;
		font-size: 24px;
		line-height: 28px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__promise {
		margin-bottom: 10px;
		font-size: 15px;
		line-height: 20px;
	}

	/* Facts back on one wrapping line, dots restored. */
	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__facts {
		display: flex;
		flex-wrap: wrap;
		gap: 0;
		margin-bottom: 10px;
		padding: 6px 0;
		font-size: 14px;
		line-height: 20px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__dot {
		display: inline-block;
		margin: 0 8px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__cta {
		gap: 6px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__btn--primary,
	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__btn--secondary {
		min-height: 46px;
		font-size: 16px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__disclosure {
		font-size: 14px;
		line-height: 20px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__restart {
		margin-top: 8px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__fine {
		margin-top: 12px;
		padding-top: 8px;
		font-size: 13px;
		line-height: 18px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__score {
		font-size: 40px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__score .ted-tst__score-sep,
	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__score .ted-tst__score-total {
		font-size: 20px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__score--locked {
		margin-bottom: 8px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__score--locked .ted-tst__score-value {
		width: 48px;
		height: 48px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__panel--gate .ted-tst__label {
		margin: 0 0 6px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__panel--gate .ted-tst__stem--state {
		margin-bottom: 10px;
		font-size: 18px;
		line-height: 24px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__form {
		gap: 8px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__field-label {
		font-size: 15px;
		line-height: 22px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__input {
		min-height: 44px;
		font-size: 15px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__consent {
		gap: 8px;
		font-size: 14px;
		line-height: 20px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__checkbox {
		flex-basis: 22px;
		width: 22px;
		height: 22px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__checkbox svg {
		width: 16px;
		height: 16px;
	}

	html.ted-tst-focus[data-ted-compact~="4"] .ted-tst .ted-tst__formerror {
		padding: 8px 10px;
		font-size: 14px;
		line-height: 20px;
	}
}

/* ---- level 5: the floor */

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst-shell {
	padding: 10px 40px 12px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst-shell .ted-tst-shell__head {
	margin-bottom: 8px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__board {
	padding: 10px 32px 10px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__progress {
	margin-bottom: 6px;
	padding-bottom: 6px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__seg {
	flex-basis: 14px;
	width: 14px;
	height: 14px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__meta {
	min-height: 28px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__count {
	font-size: 14px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__part {
	padding: 0 10px;
	font-size: 14px;
	line-height: 28px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__stem {
	margin: 8px 0 10px;
	font-size: 23px;
	line-height: 29px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__options {
	row-gap: 6px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__option {
	min-height: max(var(--ted-row-min, 0px), 48px);
	padding: 5px 14px;
	font-size: 16px;
	line-height: 22px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__key {
	flex-basis: 34px;
	width: 34px;
	height: 34px;
	margin-right: 16px;
	font-size: 19px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__mark {
	flex-basis: 32px;
	width: 32px;
	height: 32px;
	margin: 0 0 0 12px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__quizfoot {
	margin-top: 8px;
	padding-top: 6px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__btn--ink {
	min-height: 44px;
	padding: 0 18px;
	font-size: 18px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__hint {
	font-size: 16px;
	line-height: 22px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__headline {
	margin-bottom: 8px;
	font-size: 28px;
	line-height: 34px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__promise {
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 22px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__facts {
	margin-bottom: 10px;
	padding: 5px 0;
	font-size: 16px;
	line-height: 24px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__btn--primary,
html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__btn--secondary {
	min-height: 46px;
	font-size: 18px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__disclosure {
	font-size: 15px;
	line-height: 22px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__restart {
	margin-top: 8px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__fine {
	margin-top: 10px;
	padding-top: 8px;
	font-size: 13px;
	line-height: 18px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__score {
	font-size: 48px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__score .ted-tst__score-sep,
html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__score .ted-tst__score-total {
	font-size: 24px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__score--locked .ted-tst__score-value {
	width: 56px;
	height: 56px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__panel--gate .ted-tst__stem--state {
	margin-bottom: 10px;
	font-size: 22px;
	line-height: 28px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__form {
	gap: 8px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__input {
	min-height: 46px;
	font-size: 16px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__consent {
	font-size: 15px;
	line-height: 22px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__formerror {
	padding: 8px 12px;
	font-size: 15px;
	line-height: 22px;
}

html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__fine--privacy {
	font-size: 13px;
	line-height: 18px;
}

@media (max-width: 1023.98px) {
	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst-shell {
		padding: 8px 16px 10px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__board {
		padding: 10px 16px 10px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__stem {
		font-size: 20px;
		line-height: 26px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__option {
		min-height: max(var(--ted-row-min, 0px), 48px);
		padding: 5px 10px;
		font-size: 15px;
		line-height: 21px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__key {
		flex-basis: 32px;
		width: 32px;
		height: 32px;
		font-size: 18px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__mark {
		flex-basis: 30px;
		width: 30px;
		height: 30px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__btn--ink {
		min-height: 44px;
	}
}

@media (max-width: 599.98px) {
	/* Side gutters stay at the phone minimum of 12px; only the vertical padding compacts. */
	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst-shell {
		padding: 3px 12px 5px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst-shell .ted-tst-shell__head {
		margin-bottom: 3px;
		line-height: 13px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst-shell .ted-tst-brand {
		height: 13px;
		font-size: 13px;
		line-height: 13px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__board {
		padding: 4px 6px 4px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__progress {
		gap: 3px;
		margin-bottom: 3px;
		padding-bottom: 3px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__seg {
		max-width: 12px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__count {
		font-size: 13px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__part {
		padding: 0 6px;
		font-size: 13px;
		line-height: 20px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__stem {
		margin: 2px 0 4px;
		font-size: 16px;
		line-height: 19px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__options {
		row-gap: 4px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__option {
		min-height: max(var(--ted-row-min, 0px), 44px);
		padding: 3px 5px;
		font-size: 15px;
		line-height: 17px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__optiontext {
		padding: 0;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__key {
		flex-basis: 26px;
		width: 26px;
		height: 26px;
		margin-right: 6px;
		font-size: 15px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__mark {
		flex-basis: 22px;
		width: 22px;
		height: 22px;
		margin: 1px 0 0 5px;
	}

	/* Footer as one row: Back at the left, the reveal note beside it. */
	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__quizfoot {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin-top: 3px;
		margin-bottom: 2px;
		padding-top: 3px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__btn--ink {
		flex: 0 0 auto;
		padding: 0 14px;
		font-size: 15px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__hint {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 14px;
		line-height: 18px;
		text-align: right;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__label {
		margin: 0 0 6px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__headline {
		margin-bottom: 6px;
		font-size: 22px;
		line-height: 26px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__promise {
		margin-bottom: 8px;
		font-size: 15px;
		line-height: 19px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__facts {
		margin-bottom: 8px;
		padding: 5px 0;
		font-size: 14px;
		line-height: 19px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__cta {
		gap: 5px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__btn--primary,
	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__btn--secondary {
		min-height: 44px;
		font-size: 15px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__disclosure {
		font-size: 14px;
		line-height: 19px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__restart {
		margin-top: 6px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__fine {
		margin-top: 8px;
		padding-top: 6px;
		font-size: 13px;
		line-height: 17px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__score {
		font-size: 36px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__score .ted-tst__score-sep,
	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__score .ted-tst__score-total {
		font-size: 18px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__score--locked {
		margin-bottom: 6px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__score--locked .ted-tst__score-value {
		width: 44px;
		height: 44px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__panel--gate .ted-tst__label {
		margin: 0 0 4px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__panel--gate .ted-tst__stem--state {
		margin-bottom: 8px;
		font-size: 17px;
		line-height: 22px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__form {
		gap: 6px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__field {
		gap: 3px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__field-label {
		font-size: 15px;
		line-height: 20px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__input {
		min-height: 44px;
		font-size: 15px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__consent {
		font-size: 14px;
		line-height: 19px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__checkbox {
		flex-basis: 20px;
		width: 20px;
		height: 20px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__formerror {
		padding: 6px 8px;
		font-size: 14px;
		line-height: 19px;
	}

	html.ted-tst-focus[data-ted-compact~="5"] .ted-tst .ted-tst__fine--privacy {
		font-size: 13px;
		line-height: 17px;
	}
}

/* ------------------------------------------------------------- checklist */

/* The printable 20-mistake sheet (Checklist::render): the quiz's shell, board
   and type scale, laid out as a document. Four criterion sections of five
   paper rows each, then the sources. */
.ted-tst--checklist .ted-tst__board {
	padding: 40px 48px 44px;
}

.ted-tst--checklist .ted-tst__label {
	margin: 0 0 18px;
}

.ted-tst--checklist .ted-tst__headline {
	margin: 0 0 18px;
}

.ted-tst--checklist .ted-tst__lede {
	margin: 0 0 26px;
}

.ted-tst .ted-tst__actions-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0 0 40px;
}

.ted-tst .ted-tst__criterion-section {
	margin: 0 0 40px;
	padding: 26px 0 0;
	border-top: 3px solid var(--ted-ink);
}

/* The section carries the rule, so its heading drops the one .ted-tst__h2 draws. */
.ted-tst .ted-tst__criterion-section .ted-tst__h2 {
	margin: 0 0 22px;
	padding: 0;
	border-top: 0;
}

/* "Criterion n of 4" sits above the title inside the heading (one accessible name). */
.ted-tst .ted-tst__h2 .ted-tst__label-s {
	display: block;
	margin: 0 0 8px;
}

.ted-tst .ted-tst__items {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* S-row, static: no hover lift, nothing to press. */
.ted-tst .ted-tst__item {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	margin: 0;
	padding: 18px 20px;
	background: var(--ted-paper-light);
	border: var(--ted-outline-ctl) solid var(--ted-ink);
	border-radius: var(--ted-radius-ctl);
	box-shadow: var(--ted-shadow-row);
}

/* N-marker: the running number on a green square, centred on the title's first line. */
.ted-tst .ted-tst__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: -1px 0 0;
	border-radius: 6px;
	background: var(--ted-green);
	color: var(--ted-paper-light);
	font-size: 16px;
	font-weight: 900;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ted-tst .ted-tst__item-text {
	min-width: 0;
}

.ted-tst .ted-tst__item-title {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: var(--ted-ink);
}

.ted-tst .ted-tst__item-body {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--ted-ink);
}

/* Sources and the disclaimer close the sheet under a paper rule. */
.ted-tst .ted-tst__colophon {
	margin: 0;
	padding: 22px 0 0;
	border-top: 2px solid var(--ted-rule);
}

.ted-tst .ted-tst__colophon-title {
	margin: 0 0 12px;
}

.ted-tst .ted-tst__colophon .ted-tst__sources {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 22px;
}

.ted-tst .ted-tst__colophon .ted-tst__fine {
	margin: 0;
	padding: 0;
	border-top: 0;
}

@media (max-width: 1023.98px) {
	.ted-tst--checklist .ted-tst__board {
		padding: 28px 28px 32px;
	}

	.ted-tst .ted-tst__criterion-section {
		margin: 0 0 34px;
		padding-top: 22px;
	}

	.ted-tst .ted-tst__item-title {
		font-size: 18px;
		line-height: 28px;
	}

	.ted-tst .ted-tst__item-body {
		font-size: 17px;
		line-height: 26px;
	}
}

@media (max-width: 599.98px) {
	.ted-tst--checklist .ted-tst__board {
		padding: 22px 16px 24px;
	}

	.ted-tst--checklist .ted-tst__label {
		margin: 0 0 14px;
	}

	.ted-tst--checklist .ted-tst__lede {
		margin: 0 0 22px;
		font-size: 16px;
		line-height: 24px;
	}

	/* Two full-width stacked buttons; the labels may wrap. */
	.ted-tst .ted-tst__actions-row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin: 0 0 32px;
	}

	.ted-tst .ted-tst__actions-row .ted-tst__btn {
		width: 100%;
		padding: 12px 20px;
		white-space: normal;
		line-height: 1.2;
	}

	.ted-tst .ted-tst__criterion-section {
		margin: 0 0 30px;
		padding-top: 20px;
	}

	.ted-tst .ted-tst__criterion-section .ted-tst__h2 {
		margin: 0 0 16px;
	}

	.ted-tst .ted-tst__label-s {
		font-size: 12px;
		line-height: 18px;
	}

	.ted-tst .ted-tst__items {
		gap: 12px;
	}

	.ted-tst .ted-tst__item {
		grid-template-columns: 28px minmax(0, 1fr);
		gap: 14px;
		padding: 16px;
	}

	.ted-tst .ted-tst__marker {
		width: 28px;
		height: 28px;
		font-size: 14px;
	}

	.ted-tst .ted-tst__item-title {
		font-size: 18px;
		line-height: 26px;
	}

	.ted-tst .ted-tst__item-body {
		font-size: 16px;
		line-height: 24px;
	}

	.ted-tst .ted-tst__colophon {
		padding-top: 18px;
	}
}

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

@media (prefers-reduced-motion: no-preference) {
	.ted-tst .ted-tst__btn,
	.ted-tst .ted-tst__option,
	.ted-tst .ted-tst__input,
	.ted-tst .ted-tst__key,
	.ted-tst .ted-tst__checkbox,
	.ted-tst .ted-tst__summary {
		transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease;
	}

	.ted-tst .ted-tst__panel[data-ted-panel]:not([hidden]) {
		animation: ted-tst-enter 160ms ease-out both;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ted-tst .ted-tst__panel[data-ted-panel]:not([hidden]) {
		animation: ted-tst-fade 120ms ease-out both;
	}

	.ted-tst .ted-tst__option:hover,
	.ted-tst .ted-tst__option:active,
	.ted-tst .ted-tst__btn:hover,
	.ted-tst .ted-tst__btn:active {
		transform: none;
	}
}

@keyframes ted-tst-enter {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ted-tst-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* -------------------------------------------------------- high contrast */

@media (forced-colors: active) {
	.ted-tst .ted-tst__board,
	.ted-tst .ted-tst__option,
	.ted-tst .ted-tst__btn--primary,
	.ted-tst .ted-tst__btn--secondary,
	.ted-tst .ted-tst__btn--ink,
	.ted-tst .ted-tst__part,
	.ted-tst .ted-tst__notice,
	.ted-tst .ted-tst__input,
	.ted-tst .ted-tst__checkbox,
	.ted-tst .ted-tst__score--locked .ted-tst__score-value,
	.ted-tst .ted-tst__blindspot,
	.ted-tst .ted-tst__criterion,
	.ted-tst .ted-tst__details,
	.ted-tst .ted-tst__success,
	.ted-tst .ted-tst__ctaBlock,
	.ted-tst .ted-tst__actions li {
		border: 2px solid;
	}

	.ted-tst .ted-tst__facts,
	.ted-tst .ted-tst__fine,
	.ted-tst .ted-tst__progress,
	.ted-tst .ted-tst__quizfoot,
	.ted-tst .ted-tst__h2,
	.ted-tst .ted-tst__mailnotice,
	.ted-tst .ted-tst__formerror,
	.ted-tst .ted-tst__miss-row {
		border-color: CanvasText;
	}

	.ted-tst .ted-tst__criterion--weak {
		outline: 3px solid;
		outline-offset: -1px;
	}

	.ted-tst .ted-tst__summary::before {
		forced-color-adjust: none;
		background:
			linear-gradient(Canvas, Canvas) center / 12px 3px no-repeat,
			linear-gradient(Canvas, Canvas) center / 3px 12px no-repeat,
			CanvasText;
	}

	.ted-tst .ted-tst__details[open] > .ted-tst__summary::before {
		background:
			linear-gradient(Canvas, Canvas) center / 12px 3px no-repeat,
			CanvasText;
	}

	/* The red mistake tile follows the same system-colour marks. */
	.ted-tst .ted-tst__miss > .ted-tst__summary::before {
		forced-color-adjust: none;
		background:
			linear-gradient(Canvas, Canvas) center / 12px 3px no-repeat,
			linear-gradient(Canvas, Canvas) center / 3px 12px no-repeat,
			CanvasText;
	}

	.ted-tst .ted-tst__miss[open] > .ted-tst__summary::before {
		background:
			linear-gradient(Canvas, Canvas) center / 12px 3px no-repeat,
			CanvasText;
	}

	.ted-tst .ted-tst__consent-input:checked + .ted-tst__checkbox svg {
		stroke: CanvasText;
	}

	.ted-tst .ted-tst__seg {
		forced-color-adjust: none;
		border-color: CanvasText;
		background: Canvas;
	}

	.ted-tst .ted-tst__seg--done {
		background: CanvasText;
	}

	.ted-tst .ted-tst__mark circle {
		fill: CanvasText;
	}

	.ted-tst .ted-tst__radio:checked + .ted-tst__option {
		outline: 2px solid;
	}

	.ted-tst .ted-tst__radio:checked + .ted-tst__option .ted-tst__key {
		forced-color-adjust: none;
		background: CanvasText;
		color: Canvas;
	}

	.ted-tst-shell .ted-tst-brand::before {
		background: CanvasText;
	}
}

/* ----------------------------------------------------------------- print */

@media print {
	html.ted-tst-focus,
	body.ted-tst-focus-page,
	.ted-tst--embedded {
		background: none;
	}

	.ted-tst .ted-tst__board {
		border-width: 1px;
		box-shadow: none;
	}

	.ted-tst .ted-tst__cta,
	.ted-tst .ted-tst__restart,
	.ted-tst .ted-tst__share,
	.ted-tst .ted-tst__ctaBlock .ted-tst__btn {
		display: none;
	}

	.ted-tst .ted-tst__miss,
	.ted-tst .ted-tst__criterion,
	.ted-tst .ted-tst__actions li,
	.ted-tst .ted-tst__blindspot,
	.ted-tst .ted-tst__ctaBlock {
		break-inside: avoid;
	}

	/* Paper-on-green must survive a printer that drops backgrounds. */
	.ted-tst .ted-tst__blindspot {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* Printed checklist: white paper, one criterion per page, ink type in points,
   numbered boxes that survive a printer that drops backgrounds, and the
   source URLs written out. */
@media print {
	.ted-tst-checklist-page .ted-tst-shell {
		max-width: none;
		padding: 0;
	}

	.ted-tst-checklist-page .ted-tst-shell__head {
		margin: 0 0 6mm;
	}

	.ted-tst--checklist .ted-tst__board {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.ted-tst--checklist .ted-tst__actions-row {
		display: none;
	}

	.ted-tst--checklist .ted-tst__label {
		margin: 0 0 3mm;
		font-size: 10pt;
	}

	.ted-tst--checklist .ted-tst__headline {
		margin: 0 0 4mm;
		max-width: none;
		font-size: 26pt;
		line-height: 1.15;
	}

	.ted-tst--checklist .ted-tst__lede {
		margin: 0 0 8mm;
		max-width: none;
		font-size: 11pt;
		line-height: 1.4;
	}

	.ted-tst .ted-tst__criterion-section {
		margin: 0;
		padding: 5mm 0 0;
		border-top: 2pt solid var(--ted-ink);
	}

	.ted-tst .ted-tst__criterion-section + .ted-tst__criterion-section {
		break-before: page;
		page-break-before: always;
	}

	.ted-tst .ted-tst__criterion-section .ted-tst__h2 {
		margin: 0 0 5mm;
		font-size: 17pt;
		line-height: 1.2;
		break-after: avoid;
		page-break-after: avoid;
	}

	.ted-tst .ted-tst__h2 .ted-tst__label-s {
		margin: 0 0 2mm;
		font-size: 9pt;
		line-height: 1.2;
	}

	.ted-tst .ted-tst__items {
		gap: 3mm;
	}

	.ted-tst .ted-tst__item {
		grid-template-columns: 8mm minmax(0, 1fr);
		gap: 4mm;
		padding: 3mm 4mm;
		background: none;
		border-width: 1pt;
		box-shadow: none;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.ted-tst .ted-tst__marker {
		width: 8mm;
		height: 8mm;
		margin: 0;
		border: 1.5pt solid var(--ted-ink);
		border-radius: 1.5mm;
		background: none;
		color: var(--ted-ink);
		font-size: 10pt;
	}

	.ted-tst .ted-tst__item-title {
		margin: 0 0 1mm;
		font-size: 12pt;
		line-height: 1.3;
	}

	.ted-tst .ted-tst__item-body {
		font-size: 10.5pt;
		line-height: 1.4;
	}

	.ted-tst .ted-tst__colophon {
		margin: 8mm 0 0;
		padding: 4mm 0 0;
		border-top: 1pt solid var(--ted-rule-strong);
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.ted-tst .ted-tst__colophon-title {
		margin: 0 0 2mm;
		font-size: 9pt;
	}

	.ted-tst .ted-tst__colophon .ted-tst__sources {
		margin: 0 0 3mm;
		gap: 1.5mm;
	}

	.ted-tst .ted-tst__colophon .ted-tst__sources,
	.ted-tst .ted-tst__colophon .ted-tst__fine {
		font-size: 9pt;
		line-height: 1.35;
	}

	.ted-tst .ted-tst__colophon a {
		color: var(--ted-green);
		text-decoration: none;
	}

	.ted-tst .ted-tst__colophon .ted-tst__sources a {
		display: inline;
		padding: 0;
	}

	.ted-tst .ted-tst__colophon .ted-tst__sources a[href]::after {
		content: " (" attr(href) ")";
		overflow-wrap: anywhere;
	}
}

@page {
	size: auto;
	margin: 16mm;
}