/**
 * Tri Alliance Tools — front-end styles.
 *
 * Visual language is the Coachly AI Calendar's (coachly-ai-calendar/assets/
 * public.css): Tri Alliance navy #000947 and yellow #ffcc00, Roboto Condensed
 * display headings over Open Sans body, soft-navy shadowed cards on generous
 * radii, and a navy gradient hero carrying the one number that matters.
 *
 * Two Kleo facts drive the way this file is written and must not be undone:
 *
 *   1. Kleo sets `html { font-size: 10px }`. Every rem here would render at
 *      62.5% of its intended size, so sizes are stated in PX, not rem.
 *   2. Kleo's `.main-color h2/h3/h4/a` (0,1,1) load after this stylesheet, so
 *      a bare `.ta-tool__title` (0,1,0) loses. Every rule is therefore scoped
 *      under `.ta-tool` / `.ta-tools-index` to clear it on specificity rather
 *      than on !important.
 *
 * Everything stays scoped under .ta-tool so nothing leaks back into the theme,
 * and is written against ROLE custom properties so the light/dark values swap
 * in one place and the chart body never names a raw hex.
 *
 * The data-viz palette is the validated reference instance, checked with the
 * dataviz validator against this plugin's real surfaces (#ffffff / #101431):
 *   categorical 3 slots  light CVD ΔE 9.2 / normal 24.0 · dark 9.4 / 20.9  PASS
 *   ordinal 5 steps      monotone L, ΔL ≥ 0.06, light end ≥ 2:1 both modes  PASS
 * The ordinal ramp is re-anchored on the brand navy; the categorical trio is
 * the discipline identity (swim/bike/run) and is unchanged. Dark is a SELECTED
 * set of steps for the dark surface, not an automatic flip.
 */

.ta-tool,
.ta-tools-index,
.ta-tools-hub {
	color-scheme: light;

	/* Brand */
	--ta-navy: #000947;
	--ta-yellow: #ffcc00;

	/* Surfaces & ink */
	--ta-surface: #ffffff;
	--ta-plane: #f5f6f9;
	--ta-ink: #17191f;
	--ta-ink-2: #454956;
	--ta-muted: #686d7d;
	--ta-grid: #e3e5ec;
	--ta-axis: #d7dae3;
	--ta-border: rgba(0, 9, 71, 0.10);

	/* Categorical — identity. Three slots; transitions use the neutral. */
	--ta-s1: #2a78d6;  /* swim  */
	--ta-s2: #eb6834;  /* bike  */
	--ta-s3: #1baf7a;  /* run   */
	--ta-s-neutral: #898781;

	/* Ordinal ramp — ordered categories (phases, bands), anchored on navy.
	   Five steps because the zone tools run Z1–Z5; monotone in lightness
	   (L* 69/58/44/28/11) with every step ≥ 11 apart, light end 2.2:1 on white. */
	--ta-o1: #9aa7d6;
	--ta-o2: #7385c6;
	--ta-o3: #4e60ad;
	--ta-o4: #2a3a86;
	--ta-o5: #000947;

	/* Status — reserved, never reused as a series */
	--ta-good: #0b7a53;
	--ta-warning: #fab219;
	--ta-serious: #d68b13;
	--ta-critical: #b42318;

	/* Headings and links are navy on white; the dark scopes below swap them
	   for ink/yellow, where navy would disappear into the plane. */
	--ta-heading: var(--ta-navy);
	--ta-link: var(--ta-navy);

	--ta-radius: 18px;
	--ta-radius-sm: 11px;
	--ta-pad: clamp(18px, 2.6vw, 30px);
	--ta-shadow: 0 14px 42px rgba(0, 9, 71, 0.07);
	--ta-shadow-lg: 0 22px 60px rgba(0, 9, 71, 0.12), 0 2px 8px rgba(0, 9, 71, 0.06);
	--ta-display: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	--ta-body: "Open Sans", Arial, Helvetica, sans-serif;

	color: var(--ta-ink);
	max-width: 1060px;
	margin: 0 auto 40px;
	line-height: 1.55;
	font-family: var(--ta-body);
	font-size: 15px;
}

/* Dark values declared under BOTH scopes: the media query covers the OS
   setting, the data-theme scope covers an explicit toggle and must win both
   ways. The :not() guard lets a light stamp beat OS-dark. */
@media (prefers-color-scheme: dark) {
	:root:where(:not([data-theme="light"])) .ta-tool,
	:root:where(:not([data-theme="light"])) .ta-tools-index,
	:root:where(:not([data-theme="light"])) .ta-tools-hub {
		color-scheme: dark;
		--ta-surface: #101431;
		--ta-plane: #0a0d24;
		--ta-ink: #ffffff;
		--ta-ink-2: #ccd1e4;
		--ta-muted: #9096ad;
		--ta-grid: #262c50;
		--ta-axis: #363d68;
		--ta-border: rgba(255, 255, 255, 0.12);
		--ta-s1: #3987e5;
		--ta-s2: #d95926;
		--ta-s3: #199e70;
		--ta-o1: #2a3a86;
		--ta-o2: #4e60ad;
		--ta-o3: #7385c6;
		--ta-o4: #9aa7d6;
		--ta-o5: #c3cbe8;
		--ta-good: #35b98a;
		--ta-critical: #f0776a;
		--ta-shadow: 0 14px 42px rgba(0, 0, 0, 0.35);
		--ta-shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.45);
		/* Headings and links go to ink/yellow on the dark plane — the navy
		   they wear on white disappears into it. */
		--ta-heading: var(--ta-ink);
		--ta-link: var(--ta-yellow);
	}
}

:root[data-theme="dark"] .ta-tool,
:root[data-theme="dark"] .ta-tools-index,
:root[data-theme="dark"] .ta-tools-hub {
	color-scheme: dark;
	--ta-surface: #101431;
	--ta-plane: #0a0d24;
	--ta-ink: #ffffff;
	--ta-ink-2: #ccd1e4;
	--ta-muted: #9096ad;
	--ta-grid: #262c50;
	--ta-axis: #363d68;
	--ta-border: rgba(255, 255, 255, 0.12);
	--ta-s1: #3987e5;
	--ta-s2: #d95926;
	--ta-s3: #199e70;
	--ta-o1: #2a3a86;
	--ta-o2: #4e60ad;
	--ta-o3: #7385c6;
	--ta-o4: #9aa7d6;
	--ta-o5: #c3cbe8;
	--ta-good: #35b98a;
	--ta-critical: #f0776a;
	--ta-shadow: 0 14px 42px rgba(0, 0, 0, 0.35);
	--ta-shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.45);
	--ta-heading: var(--ta-ink);
	--ta-link: var(--ta-yellow);
}

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

/* The focus ring is navy rather than the brand yellow: yellow on white clears
   1.6:1, which is not a visible indicator. */
.ta-tool :focus-visible,
.ta-tools-index:focus-visible,
.ta-tools-index :focus-visible {
	outline: 3px solid var(--ta-link);
	outline-offset: 2px;
}

/* -- Tool page masthead --------------------------------------------------- */

/* Wears the card art under a navy wash, so it reads as a different surface
   from the RESULT hero further down — two identical navy slabs on one page
   would look like a repeat rather than a rhythm. */
.ta-tool .ta-tool__masthead {
	margin: 0 0 26px;
	padding: clamp(26px, 4.5vw, 50px);
	border-radius: var(--ta-radius);
	background:
		radial-gradient(circle at 88% 12%, #243c8b 0, transparent 42%),
		linear-gradient(135deg, var(--ta-navy), #06155d 62%, #12277a);
	color: #fff;
	box-shadow: var(--ta-shadow-lg);
}

.ta-tool .ta-tool__masthead.has-image {
	background:
		linear-gradient(100deg, rgba(0, 9, 71, 0.96) 0%, rgba(0, 9, 71, 0.86) 46%, rgba(0, 9, 71, 0.55) 100%),
		var(--ta-hero-image) center / cover no-repeat,
		linear-gradient(135deg, var(--ta-navy), #12277a);
}

.ta-tool .ta-tool__masthead-copy {
	max-width: 760px;
}

/* fit-content rather than inline-flex: the kicker that follows is inline-block
   and would otherwise sit on the same line as the back link. */
.ta-tool .ta-tool__back {
	display: flex;
	align-items: center;
	width: fit-content;
	gap: 6px;
	margin-bottom: 18px;
	color: rgba(255, 255, 255, 0.78) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none !important;
	text-transform: uppercase;
}

.ta-tool .ta-tool__back::before { content: "←"; }
.ta-tool .ta-tool__back:hover { color: var(--ta-yellow) !important; }

.ta-tool .ta-tool__kicker {
	display: inline-block;
	color: var(--ta-yellow);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ta-tool .ta-tool__title {
	margin: 8px 0 0;
	color: #fff;
	font-family: var(--ta-display);
	font-size: clamp(32px, 4.2vw, 50px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.02;
	text-wrap: balance;
}

.ta-tool .ta-tool__tagline {
	margin: 14px 0 0;
	max-width: 640px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 17px;
	line-height: 1.5;
}

.ta-tool .ta-tool__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.ta-tool .ta-tool__meta li {
	margin: 0;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 999px;
	background: rgba(0, 9, 71, 0.4);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ta-tool .ta-tool__intro {
	margin: 0 0 26px;
	max-width: 760px;
	color: var(--ta-ink-2);
	font-size: 16px;
	line-height: 1.6;
}

/* -- Form ---------------------------------------------------------------- */

.ta-tool .ta-tool__form {
	background: var(--ta-surface);
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius);
	padding: var(--ta-pad);
	margin-bottom: 28px;
	box-shadow: var(--ta-shadow);
}

.ta-tool .ta-tool__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 18px 22px;
}

.ta-tool .ta-tool__field--bool {
	grid-column: 1 / -1;
}

.ta-tool .ta-tool__label {
	display: block;
	margin-bottom: 7px;
	color: var(--ta-heading);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.ta-tool .ta-tool__field select,
.ta-tool .ta-tool__field input[type="text"],
.ta-tool .ta-tool__field input[type="number"],
.ta-tool .ta-tool__lead input {
	width: 100%;
	min-height: 44px;
	padding: 9px 12px;
	border: 1px solid var(--ta-axis);
	border-radius: var(--ta-radius-sm);
	background: var(--ta-surface);
	font-size: 15px;
	font-family: inherit;
	color: var(--ta-ink);
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.ta-tool .ta-tool__field select:hover,
.ta-tool .ta-tool__field input:hover {
	border-color: var(--ta-muted);
}

.ta-tool .ta-tool__field select:focus,
.ta-tool .ta-tool__field input:focus,
.ta-tool .ta-tool__lead input:focus {
	border-color: var(--ta-link);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(0, 9, 71, 0.09);
}

.ta-tool .ta-tool__help {
	margin: 6px 0 0;
	color: var(--ta-muted);
	font-size: 12px;
	line-height: 1.45;
}

.ta-tool .ta-tool__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--ta-radius-sm);
	background: var(--ta-plane);
	color: var(--ta-ink-2);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.ta-tool .ta-tool__checkbox input {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	accent-color: var(--ta-navy);
}

.ta-tool .ta-tool__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ta-border);
}

.ta-tool .ta-tool__submit,
.ta-tool .ta-tool__lead button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--ta-radius-sm);
	background: var(--ta-yellow);
	color: var(--ta-navy);
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(255, 204, 0, 0.22);
	transition: background 0.12s ease, transform 0.12s ease;
}

.ta-tool .ta-tool__submit:hover,
.ta-tool .ta-tool__lead button:hover {
	background: #f3c300;
	transform: translateY(-1px);
}

.ta-tool .ta-tool__lead button[disabled] {
	opacity: 0.55;
	cursor: default;
	transform: none;
}

.ta-tool .ta-tool__pending {
	color: var(--ta-muted);
	font-size: 14px;
	font-weight: 600;
}

/* Off-screen rather than display:none — some bots detect the latter. */
.ta-tool .ta-tool__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -- Result -------------------------------------------------------------- */

.ta-tool .ta-tool__example-note {
	margin-bottom: 16px;
	padding: 14px 18px;
	border: 1px solid var(--ta-border);
	border-left: 4px solid var(--ta-yellow);
	border-radius: 0 var(--ta-radius-sm) var(--ta-radius-sm) 0;
	background: var(--ta-plane);
	color: var(--ta-ink-2);
	font-size: 14px;
}

.ta-tool .ta-tool__example-note strong { color: var(--ta-heading); }

.ta-tool .ta-tool__result {
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius);
	padding: var(--ta-pad);
	background: var(--ta-surface);
	box-shadow: var(--ta-shadow);
	overflow: hidden;
}

/* Full-bleed navy hero, pulled out to the card edge by exactly the card's own
   padding — same silhouette as the calendar's event hero. */
.ta-tool .ta-tool__verdict {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 38px);
	margin: calc(var(--ta-pad) * -1) calc(var(--ta-pad) * -1) 0;
	padding: clamp(26px, 4vw, 42px) var(--ta-pad);
	background:
		radial-gradient(circle at 88% 14%, #243c8b 0, transparent 38%),
		linear-gradient(135deg, var(--ta-navy), #06155d 62%, #12277a);
	color: #fff;
}

/* Hero figure: the display face, in brand yellow. Exactly one per result.
   NOT the page masthead above — these are different elements that used to
   share a class name, which made the masthead's slab styles bleed onto the
   score. Keep the names distinct. */
.ta-tool .ta-tool__hero {
	flex-shrink: 0;
	display: flex;
	align-items: baseline;
	gap: 2px;
	line-height: 1;
}

.ta-tool .ta-tool__hero-value {
	font-family: var(--ta-display);
	font-size: clamp(58px, 8vw, 78px);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--ta-yellow);
}

.ta-tool .ta-tool__hero-unit {
	font-size: 16px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.6);
}

.ta-tool .ta-tool__verdict-text {
	flex: 1 1 320px;
	min-width: 0;
}

.ta-tool .ta-tool__band {
	display: inline-flex;
	margin: 0 0 12px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--ta-yellow);
	color: var(--ta-navy);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ta-tool .ta-tool__headline {
	margin: 0 0 10px;
	color: #fff;
	font-family: var(--ta-display);
	font-size: clamp(25px, 3vw, 34px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.ta-tool .ta-tool__summary {
	margin: 0;
	max-width: 700px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 15px;
	line-height: 1.55;
}

.ta-tool .ta-tool__safety {
	margin-top: 28px;
	padding: 18px 20px;
	border: 1px solid var(--ta-border);
	border-left: 4px solid var(--ta-critical);
	border-radius: 0 var(--ta-radius-sm) var(--ta-radius-sm) 0;
	background: var(--ta-plane);
}

.ta-tool .ta-tool__safety h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	color: var(--ta-critical);
	font-family: var(--ta-body);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Status never rides on colour alone — the icon + label pairing is the
   mitigation, so the heading carries a mark as well as a hue. */
.ta-tool .ta-tool__safety h4::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--ta-critical);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
}

.ta-tool .ta-tool__safety p {
	margin: 0 0 11px;
	color: var(--ta-ink-2);
	font-size: 14px;
}

.ta-tool .ta-tool__safety p:last-child { margin-bottom: 0; }

.ta-tool .ta-tool__section {
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--ta-border);
}

.ta-tool .ta-tool__section h4 {
	margin: 0 0 8px;
	color: var(--ta-heading);
	font-family: var(--ta-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.ta-tool .ta-tool__section-intro {
	margin: 0 0 18px;
	max-width: 700px;
	color: var(--ta-ink-2);
	font-size: 14px;
}

.ta-tool .ta-tool__footnote {
	margin: 14px 0 0;
	max-width: 700px;
	color: var(--ta-muted);
	font-size: 13px;
}

/* -- Charts -------------------------------------------------------------- */

.ta-tool .ta-viz__figure {
	margin: 0;
}

.ta-tool .ta-viz {
	display: block;
	max-width: 100%;
	height: auto;
	overflow: visible;
}

/* Chrome is recessive: hairline, solid, one step off the surface. Never
   dashed — dashing reads as "projection" when it is just a grid. */
.ta-tool .ta-viz__grid {
	stroke: var(--ta-grid);
	stroke-width: 1;
}

.ta-tool .ta-viz__axis {
	stroke: var(--ta-axis);
	stroke-width: 1;
}

.ta-tool .ta-viz__track {
	fill: var(--ta-grid);
}

/* Single-series bars sit on the brand ramp, not the swim slot — the meter is
   an amount, not a discipline. */
.ta-tool .ta-viz__bar {
	fill: var(--ta-o3);
}

/* Text wears text tokens, never the series colour. */
.ta-tool .ta-viz__label {
	fill: var(--ta-ink-2);
	font-size: 13px;
	font-family: var(--ta-body);
}

.ta-tool .ta-viz__value {
	fill: var(--ta-ink);
	font-size: 13px;
	font-weight: 700;
	font-family: var(--ta-body);
	font-variant-numeric: tabular-nums;
}

.ta-tool .ta-viz__total {
	fill: var(--ta-ink);
	font-size: 13px;
	font-weight: 700;
	font-family: var(--ta-body);
	font-variant-numeric: tabular-nums;
}

.ta-tool .ta-viz__tick {
	fill: var(--ta-muted);
	font-size: 11px;
	font-family: var(--ta-body);
	font-variant-numeric: tabular-nums;
}

.ta-tool .ta-viz__axis-title,
.ta-tool .ta-viz__legend {
	fill: var(--ta-ink-2);
	font-size: 12px;
	font-family: var(--ta-body);
}

.ta-tool .ta-viz__row,
.ta-tool .ta-viz__seg-group,
.ta-tool .ta-viz__phase-group,
.ta-tool .ta-viz__range-group,
.ta-tool .ta-viz__band-group,
.ta-tool .ta-viz__feed-group {
	cursor: help;
}

.ta-tool .ta-viz__row:hover .ta-viz__bar,
.ta-tool .ta-viz__seg-group:hover .ta-viz__seg,
.ta-tool .ta-viz__phase-group:hover .ta-viz__phase,
.ta-tool .ta-viz__range-group:hover .ta-viz__range {
	filter: brightness(1.12);
}

/* Series fills. Transitions take the neutral: overhead, not a discipline —
   which keeps the categorical count at the three that clear all-pairs. */
.ta-tool .ta-viz__fill--swim { fill: var(--ta-s1); }
.ta-tool .ta-viz__fill--bike { fill: var(--ta-s2); }
.ta-tool .ta-viz__fill--run { fill: var(--ta-s3); }
.ta-tool .ta-viz__fill--transitions { fill: var(--ta-s-neutral); }

.ta-tool .ta-viz__key { stroke: none; }

/* A label set inside a coloured fill is the one place text may leave the ink
   tokens — white or ink is picked by the fill's luminance so it always clears
   contrast. */
.ta-tool .ta-viz__seg-label {
	fill: #ffffff;
	font-size: 11px;
	font-weight: 600;
	font-family: var(--ta-body);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* Ordinal ramp — ordered categories only */
.ta-tool .ta-viz__phase--1, .ta-tool .ta-viz__band--1 { fill: var(--ta-o1); }
.ta-tool .ta-viz__phase--2, .ta-tool .ta-viz__band--2 { fill: var(--ta-o2); }
.ta-tool .ta-viz__phase--3, .ta-tool .ta-viz__band--3 { fill: var(--ta-o3); }
.ta-tool .ta-viz__phase--4, .ta-tool .ta-viz__band--4 { fill: var(--ta-o4); }
.ta-tool .ta-viz__phase--5, .ta-tool .ta-viz__band--5 { fill: var(--ta-o5); }

.ta-tool .ta-viz__phase-label {
	font-size: 12px;
	font-weight: 600;
	font-family: var(--ta-body);
	pointer-events: none;
}

.ta-tool .ta-viz__phase-label--1,
.ta-tool .ta-viz__phase-label--2 { fill: #0b0b0b; }
.ta-tool .ta-viz__phase-label--3,
.ta-tool .ta-viz__phase-label--4,
.ta-tool .ta-viz__phase-label--5 { fill: #ffffff; }

@media (prefers-color-scheme: dark) {
	:root:where(:not([data-theme="light"])) .ta-tool .ta-viz__phase-label--1,
	:root:where(:not([data-theme="light"])) .ta-tool .ta-viz__phase-label--2 { fill: #ffffff; }
	:root:where(:not([data-theme="light"])) .ta-tool .ta-viz__phase-label--3,
	:root:where(:not([data-theme="light"])) .ta-tool .ta-viz__phase-label--4,
	:root:where(:not([data-theme="light"])) .ta-tool .ta-viz__phase-label--5 { fill: #0b0b0b; }
}

:root[data-theme="dark"] .ta-tool .ta-viz__phase-label--1,
:root[data-theme="dark"] .ta-tool .ta-viz__phase-label--2 { fill: #ffffff; }
:root[data-theme="dark"] .ta-tool .ta-viz__phase-label--3,
:root[data-theme="dark"] .ta-tool .ta-viz__phase-label--4,
:root[data-theme="dark"] .ta-tool .ta-viz__phase-label--5 { fill: #0b0b0b; }

.ta-tool .ta-viz__band-label {
	fill: var(--ta-ink-2);
	font-size: 11px;
	font-family: var(--ta-body);
}

/* The "you are here" marker stays in ink so it reads against every band. */
.ta-tool .ta-viz__marker { fill: var(--ta-ink); }

.ta-tool .ta-viz__marker-rule {
	stroke: var(--ta-ink);
	stroke-width: 2;
}

.ta-tool .ta-viz__marker-label {
	fill: var(--ta-ink);
	font-size: 13px;
	font-weight: 700;
	font-family: var(--ta-body);
	font-variant-numeric: tabular-nums;
}

.ta-tool .ta-viz__range { fill: var(--ta-o3); }

/* The cap is a limit, not a series — it wears the reserved status colour and
   ships with its own text label. */
.ta-tool .ta-viz__cap {
	stroke: var(--ta-critical);
	stroke-width: 2;
}

.ta-tool .ta-viz__cap-label {
	fill: var(--ta-critical);
	font-size: 11px;
	font-weight: 600;
	font-family: var(--ta-body);
}

/* 2px surface ring keeps overlapping markers legible where they collide. */
.ta-tool .ta-viz__feed {
	fill: var(--ta-s1);
	stroke: var(--ta-surface);
	stroke-width: 2;
}

.ta-tool .ta-viz__feed--weigh { fill: var(--ta-ink); }
.ta-tool .ta-viz__feed--caffeine { fill: var(--ta-s2); }

.ta-tool .ta-viz__table {
	margin-top: 14px;
}

.ta-tool .ta-viz__table > summary {
	padding: 5px 0;
	color: var(--ta-muted);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	list-style-position: inside;
}

.ta-tool .ta-viz__table > summary:hover { color: var(--ta-heading); }

/* -- Findings (status: colour + icon + label, never colour alone) --------- */

.ta-tool .ta-tool__findings {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.ta-tool .ta-tool__finding {
	padding: 15px 18px;
	border: 1px solid var(--ta-border);
	border-left: 4px solid var(--ta-axis);
	border-radius: 0 var(--ta-radius-sm) var(--ta-radius-sm) 0;
	background: var(--ta-plane);
}

.ta-tool .ta-tool__finding strong {
	display: block;
	margin-bottom: 4px;
	color: var(--ta-heading);
	font-family: var(--ta-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.ta-tool .ta-tool__finding span {
	font-size: 14px;
	color: var(--ta-ink-2);
}

.ta-tool .ta-tool__steps {
	margin: 9px 0 0;
	padding-left: 20px;
	color: var(--ta-ink-2);
	font-size: 14px;
}

.ta-tool .ta-tool__steps li { margin-bottom: 7px; }
.ta-tool .ta-tool__steps li:last-child { margin-bottom: 0; }

.ta-tool .ta-tool__finding::before {
	display: inline-block;
	margin-bottom: 7px;
	padding: 3px 9px;
	border-radius: 999px;
	color: #0b0b0b;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.07em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ta-tool .ta-tool__finding--high { border-left-color: var(--ta-critical); }
.ta-tool .ta-tool__finding--high::before { content: "Blocker"; background: var(--ta-critical); color: #fff; }
.ta-tool .ta-tool__finding--medium { border-left-color: var(--ta-serious); }
.ta-tool .ta-tool__finding--medium::before { content: "Address"; background: var(--ta-serious); }
.ta-tool .ta-tool__finding--low { border-left-color: var(--ta-warning); }
.ta-tool .ta-tool__finding--low::before { content: "Minor"; background: var(--ta-warning); }
.ta-tool .ta-tool__finding--ok { border-left-color: var(--ta-good); }
.ta-tool .ta-tool__finding--ok::before { content: "Clear"; background: var(--ta-good); color: #fff; }

/* -- Timeline (the written detail beneath the chart) --------------------- */

.ta-tool .ta-tool__timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ta-tool .ta-tool__phase {
	display: grid;
	grid-template-columns: minmax(88px, 112px) 1fr;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--ta-border);
}

.ta-tool .ta-tool__phase:last-child { border-bottom: 0; }

.ta-tool .ta-tool__phase-time {
	color: var(--ta-heading);
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.ta-tool .ta-tool__phase-body strong {
	display: block;
	margin-bottom: 3px;
	color: var(--ta-ink);
	font-size: 15px;
}

.ta-tool .ta-tool__phase-body span {
	font-size: 14px;
	color: var(--ta-ink-2);
}

/* -- Tables -------------------------------------------------------------- */

.ta-tool .ta-tool__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-sm);
}

.ta-tool .ta-tool__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ta-tool .ta-tool__table th,
.ta-tool .ta-tool__table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--ta-border);
	color: var(--ta-ink-2);
	font-variant-numeric: tabular-nums;
	text-align: left;
}

.ta-tool .ta-tool__table tr:last-child td { border-bottom: 0; }

.ta-tool .ta-tool__table th {
	background: var(--ta-plane);
	color: var(--ta-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* -- Sessions ------------------------------------------------------------ */

.ta-tool .ta-tool__sessions ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.ta-tool .ta-tool__sessions li {
	padding: 16px 18px;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-sm);
	background: var(--ta-plane);
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.ta-tool .ta-tool__sessions li:hover {
	border-color: var(--ta-link);
	box-shadow: 0 6px 18px rgba(0, 9, 71, 0.08);
}

.ta-tool .ta-tool__sessions a {
	color: var(--ta-link);
	font-family: var(--ta-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.ta-tool .ta-tool__sessions a:hover { text-decoration: underline; }

.ta-tool .ta-tool__session-why {
	display: block;
	margin-top: 4px;
	color: var(--ta-ink-2);
	font-size: 14px;
}

.ta-tool .ta-tool__disclaimer {
	margin-top: 28px;
	padding: 15px 18px;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-sm);
	background: var(--ta-plane);
	color: var(--ta-muted);
	font-size: 13px;
}

/* -- Lead capture -------------------------------------------------------- */

.ta-tool .ta-tool__lead {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--ta-border);
}

.ta-tool .ta-tool__lead-intro {
	color: var(--ta-ink-2);
	font-size: 14px;
}

.ta-tool .ta-tool__lead-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.ta-tool .ta-tool__lead-fields label span {
	display: block;
	margin-bottom: 6px;
	color: var(--ta-heading);
	font-size: 13px;
	font-weight: 700;
}

.ta-tool .ta-tool__lead-form.is-sent button { display: none; }

.ta-tool .ta-tool__lead-status {
	margin: 12px 0 0;
	color: var(--ta-good);
	font-size: 14px;
	font-weight: 700;
}

.ta-tool .ta-tool__error {
	color: var(--ta-critical);
	font-size: 14px;
}

/* -- Supporting content -------------------------------------------------- */

.ta-tool .ta-tool__supporting > section { margin-top: 38px; }

.ta-tool .ta-tool__capsule {
	padding: 24px 26px;
	border: 1px solid var(--ta-border);
	border-left: 4px solid var(--ta-yellow);
	border-radius: 0 var(--ta-radius) var(--ta-radius) 0;
	background: var(--ta-plane);
}

.ta-tool .ta-tool__capsule h4,
.ta-tool .ta-tool__howto h4,
.ta-tool .ta-tool__faq h4,
.ta-tool .ta-tool__related h4 {
	margin: 0 0 14px;
	color: var(--ta-heading);
	font-family: var(--ta-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.ta-tool .ta-tool__capsule p {
	margin: 0;
	color: var(--ta-ink-2);
	font-size: 15px;
}

/* Numbered like the hub's "how they work" strip — the yellow disc is drawn
   from a counter, so the markup stays a plain ordered list. */
.ta-tool .ta-tool__howto ol {
	counter-reset: ta-step;
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-tool .ta-tool__howto li {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-sm);
	background: var(--ta-plane);
	color: var(--ta-ink-2);
	font-size: 15px;
}

.ta-tool .ta-tool__howto li::before {
	counter-increment: ta-step;
	content: counter(ta-step);
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border-radius: 50%;
	background: var(--ta-yellow);
	color: var(--ta-navy);
	font-family: var(--ta-display);
	font-size: 16px;
	font-weight: 700;
}

.ta-tool .ta-tool__faq details {
	border-top: 1px solid var(--ta-border);
}

.ta-tool .ta-tool__faq details:last-child { border-bottom: 1px solid var(--ta-border); }

.ta-tool .ta-tool__faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 0;
	color: var(--ta-heading);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.ta-tool .ta-tool__faq summary::-webkit-details-marker { display: none; }

.ta-tool .ta-tool__faq summary::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--ta-muted);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.2s ease;
}

.ta-tool .ta-tool__faq details[open] summary::after { transform: rotate(45deg); }

.ta-tool .ta-tool__faq p {
	margin: -2px 0 18px;
	color: var(--ta-ink-2);
	font-size: 15px;
}

/* Related tools reuse the hub's cards verbatim, so moving between a tool and
   the hub never changes what a tool looks like. */
.ta-tool .ta-tool__related .ta-tools-index {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	max-width: none;
}

/* -- Hub (the /tools/ landing page) --------------------------------------- */

.ta-tools-hub {
	max-width: 1060px;
	margin: 0 auto 48px;
	color: var(--ta-ink);
	font-family: var(--ta-body);
	font-size: 15px;
	line-height: 1.55;
}

.ta-tools-hub *,
.ta-tools-hub *::before,
.ta-tools-hub *::after { box-sizing: border-box; }

.ta-tools-hub :focus-visible {
	outline: 3px solid var(--ta-link);
	outline-offset: 2px;
}

/* Hero — the navy slab that tells you what this page is */
.ta-tools-hub .ta-tools-hub__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(240px, 1fr);
	gap: clamp(24px, 4vw, 52px);
	align-items: center;
	padding: clamp(28px, 5vw, 54px);
	border-radius: var(--ta-radius);
	background:
		radial-gradient(circle at 88% 12%, #243c8b 0, transparent 42%),
		linear-gradient(135deg, var(--ta-navy), #06155d 62%, #12277a);
	color: #fff;
	box-shadow: var(--ta-shadow-lg);
}

.ta-tools-hub .ta-tools-hub__kicker,
.ta-tool .ta-tools-hub__kicker {
	display: inline-block;
	color: var(--ta-yellow);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ta-tools-hub .ta-tools-hub__title {
	margin: 10px 0 0;
	color: #fff;
	font-family: var(--ta-display);
	font-size: clamp(30px, 4.4vw, 50px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.02;
	text-wrap: balance;
}

.ta-tools-hub .ta-tools-hub__lead {
	margin: 16px 0 0;
	max-width: 620px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 16px;
	line-height: 1.6;
}

.ta-tools-hub .ta-tools-hub__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.ta-tools-hub .ta-tools-hub__button,
.ta-tool .ta-tools-hub__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 22px;
	border: 1px solid var(--ta-yellow);
	border-radius: var(--ta-radius-sm);
	background: var(--ta-yellow);
	color: var(--ta-navy);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	transition: background 0.12s ease, transform 0.12s ease;
}

.ta-tools-hub .ta-tools-hub__button:hover,
.ta-tool .ta-tools-hub__button:hover {
	background: #f3c300;
	color: var(--ta-navy);
	transform: translateY(-1px);
}

.ta-tools-hub .ta-tools-hub__button--ghost {
	border-color: rgba(255, 255, 255, 0.45);
	background: transparent;
	color: #fff;
}

.ta-tools-hub .ta-tools-hub__button--ghost:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

/* Stat strip */
.ta-tools-hub .ta-tools-hub__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--ta-radius-sm);
	background: rgba(255, 255, 255, 0.18);
	list-style: none;
}

.ta-tools-hub .ta-tools-hub__stats li {
	margin: 0;
	padding: 18px 14px;
	background: rgba(0, 9, 71, 0.55);
	text-align: center;
}

.ta-tools-hub .ta-tools-hub__stats strong,
.ta-tools-hub .ta-tools-hub__stats span { display: block; }

.ta-tools-hub .ta-tools-hub__stats strong {
	color: var(--ta-yellow);
	font-family: var(--ta-display);
	font-size: 27px;
	font-weight: 700;
	line-height: 1;
}

.ta-tools-hub .ta-tools-hub__stats span {
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* How it works */
.ta-tools-hub .ta-tools-hub__how {
	margin-top: 44px;
}

.ta-tools-hub .ta-tools-hub__how h3,
.ta-tools-hub .ta-tools-hub__group-head h3 {
	margin: 0 0 8px;
	color: var(--ta-heading);
	font-family: var(--ta-display);
	font-size: clamp(24px, 2.8vw, 32px);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

.ta-tools-hub .ta-tools-hub__how ol {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ta-tools-hub .ta-tools-hub__how li {
	margin: 0;
	padding: 20px;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-sm);
	background: var(--ta-plane);
}

.ta-tools-hub .ta-tools-hub__how b {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--ta-yellow);
	color: var(--ta-navy);
	font-family: var(--ta-display);
	font-size: 16px;
	font-weight: 700;
}

.ta-tools-hub .ta-tools-hub__how strong {
	display: block;
	margin-bottom: 4px;
	color: var(--ta-heading);
	font-size: 15px;
	font-weight: 700;
}

.ta-tools-hub .ta-tools-hub__how span {
	color: var(--ta-ink-2);
	font-size: 14px;
}

/* Category groups */
.ta-tools-hub .ta-tools-hub__group {
	margin-top: 48px;
	scroll-margin-top: 24px;
}

.ta-tools-hub .ta-tools-hub__group-head {
	max-width: 720px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--ta-yellow);
}

.ta-tools-hub .ta-tools-hub__group-head p {
	margin: 0;
	color: var(--ta-ink-2);
	font-size: 15px;
}

/* Closing CTA */
.ta-tools-hub .ta-tools-hub__cta,
.ta-tool .ta-tools-hub__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 52px;
	padding: clamp(24px, 4vw, 40px);
	border-radius: var(--ta-radius);
	background:
		radial-gradient(circle at 90% 20%, #243c8b 0, transparent 44%),
		linear-gradient(135deg, var(--ta-navy), #06155d 70%);
	color: #fff;
	box-shadow: var(--ta-shadow-lg);
}

.ta-tools-hub .ta-tools-hub__cta > div,
.ta-tool .ta-tools-hub__cta > div { flex: 1 1 380px; min-width: 0; }

.ta-tools-hub .ta-tools-hub__cta h3,
.ta-tool .ta-tools-hub__cta h3 {
	margin: 10px 0 8px;
	color: #fff;
	font-family: var(--ta-display);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 700;
	line-height: 1.08;
}

.ta-tools-hub .ta-tools-hub__cta p,
.ta-tool .ta-tools-hub__cta p {
	margin: 0;
	max-width: 560px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
}

/* -- Index cards ---------------------------------------------------------- */

.ta-tools-index {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	max-width: 1060px;
	margin: 0 auto;
	font-family: var(--ta-body);
}

.ta-tools-index .ta-tools-index__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius);
	background: var(--ta-surface);
	box-shadow: var(--ta-shadow);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.ta-tools-index .ta-tools-index__card:hover {
	border-color: var(--ta-link);
	transform: translateY(-3px);
	box-shadow: var(--ta-shadow-lg);
}

.ta-tools-index .ta-tools-index__image {
	display: block;
	height: 150px;
	background-position: center;
	background-size: cover;
	background-color: var(--ta-navy);
}

.ta-tools-index .ta-tools-index__image--fallback {
	display: grid;
	place-items: center;
	background-image:
		radial-gradient(circle at 78% 22%, #243c8b 0, transparent 46%),
		linear-gradient(135deg, var(--ta-navy), #12277a);
}

.ta-tools-index .ta-tools-index__image--fallback b {
	color: var(--ta-yellow);
	font-family: var(--ta-display);
	font-size: 42px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ta-tools-index .ta-tools-index__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 22px 18px;
}

.ta-tools-index .ta-tools-index__card h4 {
	margin: 0 0 7px;
	color: var(--ta-heading);
	font-family: var(--ta-display);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
}

.ta-tools-index .ta-tools-index__card p {
	margin: 0 0 12px;
	color: var(--ta-ink-2);
	font-size: 14px;
}

.ta-tools-index .ta-tools-index__outcome {
	display: block;
	margin-bottom: 18px;
	padding-top: 12px;
	border-top: 1px solid var(--ta-border);
	color: var(--ta-muted);
	font-size: 13px;
	line-height: 1.5;
}

.ta-tools-index .ta-tools-index__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.ta-tools-index .ta-tools-index__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ta-link);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.ta-tools-index .ta-tools-index__cta::after { content: "→"; }

.ta-tools-index .ta-tools-index__minutes {
	flex: 0 0 auto;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--ta-plane);
	color: var(--ta-muted);
	font-size: 11px;
	font-weight: 700;
}

/* -- Responsive ---------------------------------------------------------- */

@media (max-width: 860px) {
	.ta-tools-hub .ta-tools-hub__hero { grid-template-columns: 1fr; }
	.ta-tools-hub .ta-tools-hub__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.ta-tools-hub .ta-tools-hub__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ta-tools-hub .ta-tools-hub__actions > * { flex: 1 1 100%; }
	.ta-tools-hub .ta-tools-hub__cta,
.ta-tool .ta-tools-hub__cta { flex-direction: column; align-items: flex-start; }
	.ta-tools-hub .ta-tools-hub__button,
.ta-tool .ta-tools-hub__button { width: 100%; }
	.ta-tool .ta-tool__verdict { align-items: flex-start; gap: 14px; }
	.ta-tool .ta-tool__phase { grid-template-columns: 1fr; gap: 3px; }
	.ta-tool .ta-tool__submit,
	.ta-tool .ta-tool__lead button { width: 100%; }
	.ta-tool .ta-tool__capsule { padding: 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.ta-tool *,
	.ta-tools-index * {
		transition: none !important;
	}
}