/* ============================================================
   WAYPOINT TOOLS — the free tools, repainted in Waypoint
   (consolidation plan WS3.9, V5)
   ------------------------------------------------------------
   The tools (src/routes/tools) are Tailwind markup. WS3.8 named their
   colours: every colour class reads a --pgx-* custom property that falls
   back to the hex it replaced (src/lib/theme/pgx.js). This sheet — the
   `tools` template family, which WaypointCohortHead links after Waypoint's
   controls on a Waypoint page under /tools only (cohorts.ts
   TEMPLATE_FAMILIES) — does three things:

   1. points each --pgx-* property at a Waypoint token, so every colour
      utility on the page — its hover and group-hover states included —
      follows, with no per-class override;
   2. re-points the Tailwind radii to Waypoint's three (r-1 controls,
      r-2 tiles, r-3 plates);
   3. dresses the tools' hooks as Waypoint: the tl-* classes and the wp-*
      component classes (controls family: wp-slider__range, wp-input,
      wp-select, wp-readout; core: wp-tag, wp-label, wp-btn; chrome:
      wp-seg) that the V5 commit added to the existing markup. Where a
      wp-* class meets a Tailwind utility on the same element, the rule
      here restates the Waypoint value at a higher specificity, so the
      result never depends on stylesheet order.

   THE RULES: Bricolage announces (h1, section h2), Inter reads, Geist
   Mono counts — every figure a tool computes, every label over one, the
   table heads, the dates and the breadcrumb trail. One accent, the
   laser: the primary action, the links, and the answer — the lead result
   sits on the ink plate with its figure lit. Hairline plates, flat
   grounds, no glow.

   Declares NO colour of its own (no hex, no rgb()): every colour is a
   --u-* token Waypoint's contrast gate measured. src/lib/theme/
   waypointTools.test.ts holds that, and that every rule is scoped to a
   Waypoint page's .tool-page — so a rolled-back cohort (its entry
   deleted) paints exactly as the V0 tools did, hooks and all.
   ============================================================ */

/* ---- 1. The pgx tokens, pointed at Waypoint ------------------------- */
html[data-public-theme='waypoint'] .tool-page {
	/* the accent: one laser */
	--pgx-flame: var(--u-laser-text);
	--pgx-flame-deep: var(--u-laser-700);
	--pgx-flame-wash: var(--u-laser-wash);
	--pgx-flame-mist: var(--u-laser-50);
	--pgx-flame-text: var(--u-laser-text);
	/* ink */
	--pgx-ink: var(--u-text-hi);
	--pgx-ink-2: var(--u-ink-800);
	/* grounds and lines */
	--pgx-paper: var(--u-paper);
	--pgx-sand: var(--u-paper-2);
	--pgx-sand-2: var(--u-rule);
	--pgx-rule: var(--u-rule);
	--pgx-rule-soft: var(--u-rule);
	/* text: body, meta; on the ink band */
	--pgx-body: var(--u-text-2);
	--pgx-muted: var(--u-text-3);
	--pgx-faint: var(--u-text-3);
	--pgx-chip: var(--u-plate);
	--pgx-on-ink: var(--u-on-ink-2);
	--pgx-on-ink-cool: var(--u-on-ink-2);
	/* status: always with words, never colour alone */
	--pgx-ok: var(--u-ok);
	--pgx-ok-deep: var(--u-ok);
	--pgx-ok-wash: var(--u-ok-wash);
	--pgx-error: var(--u-error);
	--pgx-warn: var(--u-warning);
	--pgx-warn-wash: var(--u-warning-wash);

	font-family: var(--u-font-sans);
	color: var(--u-text);
}

/* A band drawn to the viewport's edges (the index's hero) never makes the
   page scroll sideways where a scrollbar takes part of 100vw. Every tool
   stands on the same paper, to the foot of the viewport (the college
   predictor's markup names no ground, and showed the layout's paper-2). */
html[data-public-theme='waypoint'] .tool-page {
	overflow-x: clip;
	min-height: 100vh;
	background-color: var(--u-paper);
}

/* ---- 2. Radii: Waypoint's three ------------------------------------- */
html[data-public-theme='waypoint'] .tool-page :is(.rounded-2xl) {
	border-radius: var(--u-r-3);
}
html[data-public-theme='waypoint'] .tool-page :is(.rounded-xl) {
	border-radius: var(--u-r-2);
}
html[data-public-theme='waypoint'] .tool-page :is(.rounded-lg, .rounded-md) {
	border-radius: var(--u-r-1);
}

/* ---- 3. Type: the head of the page ---------------------------------- */
/* A tool starts close under the header: the instrument is the page, and a
   planner's primary action must stay in the first viewport at 1280x800
   (tests/public cta-above-fold). The index's hero band takes the same
   2rem back (below). */
html[data-public-theme='waypoint'] .tool-page > .mx-auto {
	padding-top: 2rem;
}
/* The trail: addressed, so mono; the current page in ink. */
html[data-public-theme='waypoint'] .tool-page .tl-crumbs {
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-12);
	letter-spacing: 0.04em;
	color: var(--u-text-3);
}
html[data-public-theme='waypoint'] .tool-page .tl-crumbs a {
	color: var(--u-text-2);
	text-decoration: underline;
	text-decoration-color: var(--u-rule-strong);
	text-underline-offset: 0.25em;
}
html[data-public-theme='waypoint'] .tool-page .tl-crumbs a:hover {
	color: var(--u-laser-text);
	text-decoration-color: var(--u-laser-line);
}
html[data-public-theme='waypoint'] .tool-page .tl-crumbs > span:last-child {
	color: var(--u-text-hi);
}
/* The eyebrow is Waypoint's tag (mono, the laser, a 6px square before it). */
html[data-public-theme='waypoint'] .tool-page .wp-tag {
	display: flex;
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-12);
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--u-laser-text);
}
html[data-public-theme='waypoint'] .tool-page .tl-crumbs + .wp-tag {
	margin-top: 0.75rem;
}
/* The H1's and the lede's measures are in em, never ch: ch is the width of
   "0" in the face in use, so a ch box is narrower in the fallback than in
   Bricolage or Inter and changes width at the font swap. On a first visit
   with the fonts late, "JEE Main Rank Predictor 2027" set on two lines in
   the fallback and one in Bricolage, and the page below jumped (CLS 0.507
   at 768px). 14em is about 22 characters of Bricolage at display sizes and
   39.1em is 62 of Inter: with the fonts loaded, every tool's H1 and lede
   break exactly where they did at 22ch and 62ch, from 320 to 1440px. */
html[data-public-theme='waypoint'] .tool-page h1 {
	margin-top: 0.75rem;
	max-width: 14em;
	font-size: var(--u-fs-d2);
	line-height: 1.04;
	color: var(--u-text-hi);
	text-wrap: balance;
}
/* The dek under the H1 — who it is for, what data — is dated and sourced: mono. */
html[data-public-theme='waypoint'] .tool-page .tl-dek {
	margin-top: 1rem;
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-12);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--u-text-3);
}
html[data-public-theme='waypoint'] .tool-page .tl-lede {
	margin-top: 0.75rem;
	max-width: 39.1em;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.55;
	color: var(--u-text-2);
	text-wrap: pretty;
}
html[data-public-theme='waypoint'] .tool-page :is(.tl-lede, .tl-callout) strong {
	color: var(--u-text-hi);
	font-weight: 600;
}

/* ---- The index's hero: the ink band, edge to edge -------------------- */
/* The index opens as prepgraph.ai opens a page: eyebrow, H1 and lede on
   the ink band, flush under the header and drawn to the viewport's edges.
   Like Waypoint's .wp-ink, the band re-assigns the tokens, and the page's
   own rules follow (the tag lit, the H1 bright, the lede quiet). */
html[data-public-theme='waypoint'] .tool-page .tl-hero {
	--u-text-hi: var(--u-on-ink-hi);
	--u-text: var(--u-on-ink);
	--u-text-2: var(--u-on-ink-2);
	--u-text-3: var(--u-on-ink-3);
	--u-laser-text: var(--u-laser-on-ink);
	--u-laser-line: var(--u-laser-path);
	--u-focus: var(--u-focus-on-ink);
	position: relative;
	isolation: isolate;
	margin-top: -2rem;
	padding-block: clamp(3.25rem, 2.25rem + 4vw, 6rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
	color: var(--u-on-ink);
}
html[data-public-theme='waypoint'] .tool-page .tl-hero::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0 calc(50% - 50vw);
	background: linear-gradient(180deg, var(--u-ink-900), var(--u-ink-950));
}
html[data-public-theme='waypoint'] .tool-page .tl-hero h1 {
	margin-top: 1.25rem;
}
/* The index is a page of pages: its column is Waypoint's container, so the
   hero's words, the sections and the band start where the header's mark
   does (x=152 at 1440), as they do on prepgraph.ai. A tool keeps its
   narrower instrument column. */
html[data-public-theme='waypoint'] .tool-page > .tl-wide {
	max-width: var(--u-container);
	padding-inline: max(1.25rem, var(--u-gutter));
}

/* ---- Sections: generous rhythm, Bricolage heads ---------------------- */
html[data-public-theme='waypoint'] .tool-page :is(section, .tl-sec) {
	margin-top: clamp(3.5rem, 2.5rem + 3vw, 5rem);
}
html[data-public-theme='waypoint'] .tool-page h2:not(.tl-h2--card) {
	font-size: var(--u-fs-h2);
	line-height: 1.15;
	color: var(--u-text-hi);
	text-wrap: balance;
}
html[data-public-theme='waypoint'] .tool-page .tl-band h2:not(.tl-h2--card) {
	color: var(--u-on-ink-hi);
}
html[data-public-theme='waypoint'] .tool-page h2.tl-h2--card {
	font-family: var(--u-font-sans) !important;
	font-size: var(--u-fs-15);
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	color: var(--u-text-hi);
}
html[data-public-theme='waypoint'] .tool-page h3 {
	font-size: var(--u-fs-17);
	line-height: 1.35;
	color: var(--u-text-hi);
}
/* A link in running text is underlined, never told by its colour alone
   (WCAG 1.4.1; axe link-in-text-block). */
html[data-public-theme='waypoint'] .tool-page :is(p, li) a {
	text-decoration-line: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
/* A link that names no colour of its own ("Related", a source, the MCC
   link in the college predictor's note) would take app.postcss's indigo for
   every <a>: a second accent. It is the laser, like every other link on the
   page — wherever it sits, not only in a <p> or <li>. Buttons and the
   index's cards are not links in this sense, and :where() keeps the rule
   below the trail's and the band's own. */
html[data-public-theme='waypoint'] .tool-page a:where(:not([class*='text-pgx-'], .wp-btn, .tl-card)) {
	color: var(--u-laser-text);
}
html[data-public-theme='waypoint'] .tool-page a:where(:not(.wp-btn, .tl-card)):hover {
	color: var(--u-laser-700);
}
/* Running text keeps a reading measure (about 88 characters, as on
   prepgraph.ai) where the column is wider: tables, plates and the
   instrument still take the full column. */
html[data-public-theme='waypoint'] .tool-page :is(section, .tl-sec) > :is(p, ul, ol) {
	max-width: 40rem;
}

/* ---- The callout: a plate with the laser's line down its edge -------- */
html[data-public-theme='waypoint'] .tool-page .tl-callout {
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--u-rule);
	border-left: 2px solid var(--u-laser-line);
	border-radius: var(--u-r-2);
	background: var(--u-plate);
	color: var(--u-text-2);
	font-size: var(--u-fs-15);
	line-height: 1.6;
}
html[data-public-theme='waypoint'] .tool-page .tl-callout > p:first-child {
	color: var(--u-text-hi);
}
html[data-public-theme='waypoint'] .tool-page .tl-callout--warn {
	border-left-color: var(--u-warning-line);
	background: var(--u-warning-wash);
}

/* ---- The instrument: the calculator's plate, with a ruler along its top */
/* 1.25rem under the lede (Tailwind's mt-8 says 2rem): the merged copy's
   planner ledes run a line longer than the lane's, and a planner's primary
   action must still end inside 1280x800 (cta-above-fold). With the lede's
   0.75rem above and the actions' 1rem below (Actions, further down), the
   head and the plate give back 20px; the planners' CTA ended at 810px in
   the gates image without them. */
html[data-public-theme='waypoint'] .tool-page .tl-instrument {
	position: relative;
	margin-top: 1.25rem;
	padding: clamp(1.25rem, 0.75rem + 2vw, 2rem);
	padding-top: calc(clamp(1.25rem, 0.75rem + 2vw, 2rem) + 0.75rem);
	border: 1px solid var(--u-rule);
	border-radius: var(--u-r-3);
	background: var(--u-plate);
	box-shadow: var(--u-shadow-2);
}
/* The ruler: a hairline tick every 8px and a taller one every 40px — the
   tool measures, so its plate is marked like a scale. Decorative. */
html[data-public-theme='waypoint'] .tool-page .tl-instrument::before {
	content: '';
	position: absolute;
	top: 0;
	left: clamp(1.25rem, 0.75rem + 2vw, 2rem);
	right: clamp(1.25rem, 0.75rem + 2vw, 2rem);
	height: 12px;
	background:
		repeating-linear-gradient(90deg, var(--u-rule-strong) 0 1px, transparent 1px 40px) 0 0 / 100% 12px no-repeat,
		repeating-linear-gradient(90deg, var(--u-rule) 0 1px, transparent 1px 8px) 0 0 / 100% 6px no-repeat;
	pointer-events: none;
}

/* ---- Controls: Waypoint's (controls family) over the tools' inputs ---- */
/* A planner's field: its label, then the number and the slider on one row,
   as every other tool sets them (the number first, as the markup has it,
   so the visual order is the tab order). */
html[data-public-theme='waypoint'] .tool-page .tl-field {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	align-items: center;
	column-gap: 1rem;
}
html[data-public-theme='waypoint'] .tool-page .tl-field > label {
	grid-column: 1 / -1;
}
html[data-public-theme='waypoint'] .tool-page .tl-field > :is(.wp-input, .wp-slider__range) {
	margin-top: 0.5rem;
}
html[data-public-theme='waypoint'] .tool-page label {
	color: var(--u-text-hi);
}
/* "out of 54": a count, in mono. */
html[data-public-theme='waypoint'] .tool-page .tl-count {
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-12);
	letter-spacing: 0.02em;
	color: var(--u-text-3);
}
html[data-public-theme='waypoint'] .tool-page .wp-seg {
	display: inline-flex;
	flex-wrap: wrap;
	padding: 2px;
	border: 1px solid var(--u-rule-input);
	border-radius: var(--u-r-pill);
	background: var(--u-plate);
	font-size: var(--u-fs-13);
}
html[data-public-theme='waypoint'] .tool-page .wp-seg__opt {
	min-height: 40px;
	padding: 0 1rem;
	border-radius: var(--u-r-pill);
	background: transparent;
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-13);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--u-text-2);
}
html[data-public-theme='waypoint'] .tool-page .wp-seg__opt:hover {
	color: var(--u-text-hi);
}
html[data-public-theme='waypoint'] .tool-page .wp-seg__opt[aria-pressed='true'] {
	background: var(--u-ink-900);
	color: var(--u-on-ink-hi);
}
html[data-public-theme='waypoint'] .tool-page .wp-seg__opt:focus-visible {
	outline: none;
	box-shadow: var(--u-focus);
}
/* A phone: the options share the row, and a long label wraps inside its own. */
@media (max-width: 480px) {
	html[data-public-theme='waypoint'] .tool-page .wp-seg {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		width: 100%;
		border-radius: var(--u-r-2);
	}
	html[data-public-theme='waypoint'] .tool-page .wp-seg__opt {
		min-height: 44px;
		padding: 0.375rem 0.5rem;
		border-radius: calc(var(--u-r-2) - 2px);
		font-size: var(--u-fs-12);
		letter-spacing: 0.02em;
		line-height: 1.25;
		white-space: normal;
	}
}
/* The slider: a 44px target, a 6px track lit up to the value (--wp-fill,
   set by the page), the thumb a waypoint node. */
html[data-public-theme='waypoint'] .tool-page .wp-slider__range {
	height: 44px;
	border-radius: 0;
	background: transparent;
}
html[data-public-theme='waypoint'] .tool-page .wp-slider__range::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
	margin-top: -9px;
	border: 2px solid var(--u-laser-line);
	border-radius: var(--u-r-pill);
	background: var(--u-plate);
	box-shadow: var(--u-shadow-1);
}
@media (prefers-reduced-motion: no-preference) {
	html[data-public-theme='waypoint'] .tool-page .wp-slider__range::-webkit-slider-thumb {
		transition:
			transform var(--u-t-1) var(--u-ease),
			box-shadow var(--u-t-1) var(--u-ease);
	}
	html[data-public-theme='waypoint'] .tool-page .wp-slider__range:active:not(:focus-visible)::-webkit-slider-thumb {
		transform: scale(1.12);
		box-shadow: 0 0 0 6px var(--u-laser-halo);
	}
}
/* A slider reached by the keyboard shows the focus ring on its thumb (WCAG
   2.4.7). The thumb's resting shadow above out-ranks controls.css's own
   focus rule, so the ring is restated at this rank, after it. The pressed
   halo is the pointer's, never the keyboard's. */
html[data-public-theme='waypoint'] .tool-page .wp-slider__range:focus-visible::-webkit-slider-thumb {
	box-shadow: var(--u-focus);
}
html[data-public-theme='waypoint'] .tool-page .wp-slider__range:focus-visible::-moz-range-thumb {
	box-shadow: var(--u-focus);
}
/* Typed figures: mono, tabular, on a control border (3.85:1). */
html[data-public-theme='waypoint'] .tool-page .wp-input,
html[data-public-theme='waypoint'] .tool-page .wp-select {
	min-height: 44px;
	border: 1px solid var(--u-rule-input);
	border-radius: var(--u-r-1);
	background-color: var(--u-plate);
	color: var(--u-text-hi);
}
/* controls.css makes a field fill its column; the tools size theirs, so the
   widths their markup names stand (Tailwind's own values). */
html[data-public-theme='waypoint'] .tool-page .wp-input.w-20 {
	width: 5rem;
}
html[data-public-theme='waypoint'] .tool-page .wp-input.w-24 {
	width: 6rem;
}
html[data-public-theme='waypoint'] .tool-page .wp-input.w-28 {
	width: 7rem;
}
html[data-public-theme='waypoint'] .tool-page .wp-input.w-32 {
	width: 8rem;
}
html[data-public-theme='waypoint'] .tool-page .wp-input--num {
	font-family: var(--u-font-mono);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
html[data-public-theme='waypoint'] .tool-page :is(.wp-input, .wp-select):hover {
	border-color: var(--u-text-2);
}
html[data-public-theme='waypoint'] .tool-page :is(.wp-input, .wp-select):focus,
html[data-public-theme='waypoint'] .tool-page :is(.wp-input, .wp-select):focus-visible {
	border-color: var(--u-laser-500);
	box-shadow: var(--u-focus);
	outline: none;
}
html[data-public-theme='waypoint'] .tool-page .wp-select {
	padding-right: 2.5rem;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--u-text-2) 50%),
		linear-gradient(135deg, var(--u-text-2) 50%, transparent 50%);
	background-position:
		calc(100% - 1.15rem) 55%,
		calc(100% - 0.8rem) 55%;
	background-size: 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

/* The checkbox: Waypoint's (a 24px box, the label a target too). */
html[data-public-theme='waypoint'] .tool-page .wp-check {
	align-items: center;
	gap: 0.65rem;
	min-height: 44px;
	font-size: var(--u-fs-15);
	color: var(--u-text);
}
html[data-public-theme='waypoint'] .tool-page .wp-check input {
	width: 1.5rem;
	height: 1.5rem;
	border-color: var(--u-rule-input);
	border-radius: var(--u-r-1);
	/* the forms plugin fills a checked box with currentColor */
	color: var(--u-laser-600);
	accent-color: var(--u-laser-600);
}
/* The forms plugin rings a focused box in its own blue on every focus; the
   ring is Waypoint's, and only for the keyboard. */
html[data-public-theme='waypoint'] .tool-page .wp-check input:focus {
	outline: none;
	box-shadow: none;
}
html[data-public-theme='waypoint'] .tool-page .wp-check input:focus-visible {
	box-shadow: var(--u-focus);
}

/* ---- Results: tiles, labels, readouts ------------------------------- */
/* The answer first and across the row; what qualifies it, two by two below. */
html[data-public-theme='waypoint'] .tool-page .tl-results {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1.25rem;
}
html[data-public-theme='waypoint'] .tool-page .tl-results > .tl-tile--lead {
	grid-column: 1 / -1;
	order: -1;
	margin-bottom: 0.25rem;
	padding: 1.5rem 1.75rem 1.375rem;
}
html[data-public-theme='waypoint'] .tool-page .tl-results > .tl-tile--lead::before {
	top: 1.5rem;
	right: 1.5rem;
}
html[data-public-theme='waypoint'] .tool-page .tl-results > .tl-tile--lead .wp-readout {
	font-size: clamp(2.125rem, 1.6rem + 2.2vw, 3rem);
	letter-spacing: -0.035em;
}
/* A planner: its answer, then three figures that qualify it, in one row. */
html[data-public-theme='waypoint'] .tool-page .tl-results--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* A phone: one tile to a row, and the answer on one line — a range like
   1,16,924–1,29,231 never breaks at its dash. The answer keeps the phone's
   full 2.125rem, so it stays the largest figure on the page; only a figure
   too long for its plate is set smaller, to fit: the rank predictors pass
   their answer's length as --tl-chars, and a mono character is 0.6 of its
   size (0.565 with the readout's tracking). A 19-character range fits at
   320px. The results are the size container, so --tl-answer (the answer's
   size: the plate's text column, 100cqi less its 1.25rem insets and 1px
   rules, over the answer's width in characters) is one length for every
   tile, and the figures under the answer never outgrow it: at most 0.875
   of it, never below 1rem, never above their own size. At 320px a
   17-character range is 19px, and the percentile beside it 17px, not 24. */
@media (max-width: 480px) {
	html[data-public-theme='waypoint'] .tool-page .tl-results {
		grid-template-columns: minmax(0, 1fr);
		container-type: inline-size;
		--tl-answer: clamp(1rem, (100cqi - 2.5rem - 2px) / (var(--tl-chars, 8) * 0.6), 2.125rem);
	}
	html[data-public-theme='waypoint'] .tool-page .tl-results > .tl-tile--lead {
		padding-inline: 1.25rem;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-results > .tl-tile--lead .wp-readout {
		white-space: nowrap;
		font-size: var(--tl-answer);
	}
	/* (A planner's ledger, below, sets its own smaller figures.) */
	html[data-public-theme='waypoint'] .tool-page .tl-results > .tl-tile:not(.tl-tile--lead) .wp-readout {
		font-size: min(clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem), max(1rem, var(--tl-answer) * 0.875));
	}
}
/* Below the planner panel's width: a planner's three figures are a ledger
   under its answer, one to a row — the label to the left, the figure to the
   right — as the panel sets them beside it. Three to a row cut "CURRENT
   PERCENTILE" off its tile at 320–375px. */
@media (max-width: 639.98px) {
	html[data-public-theme='waypoint'] .tool-page .tl-results--3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-results--3 > .tl-tile:not(.tl-tile--lead) {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.625rem 1rem;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-results--3 > .tl-tile:not(.tl-tile--lead) .wp-readout {
		margin-top: 0;
		font-size: 1.25rem;
	}
}
/* A wider screen: the planner reads as one panel — the answer on the ink
   plate with its route beside the figure, and the three figures that
   qualify it as a mono ledger to its right. Compact on purpose: the
   primary action below it stays in the first viewport at 1280x800. */
@media (min-width: 640px) {
	html[data-public-theme='waypoint'] .tool-page .tl-results--3 {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		grid-auto-flow: row dense;
		gap: 0.5rem 0.75rem;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-results--3 > .tl-tile--lead {
		grid-column: 1;
		grid-row: 1 / span 3;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		align-items: center;
		column-gap: 1.5rem;
		margin-bottom: 0;
		padding: 1.25rem 1.5rem;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-results--3 > .tl-tile--lead .wp-label {
		grid-column: 1 / -1;
		align-self: start;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-results--3 > .tl-tile--lead .wp-readout {
		font-size: 2.5rem;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-results--3 > .tl-tile--lead .tl-path {
		margin: 0.5rem 0.4375rem 0;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-results--3 > .tl-tile:not(.tl-tile--lead) {
		grid-column: 2;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.4375rem 1rem;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-results--3 > .tl-tile:not(.tl-tile--lead) .wp-readout {
		margin-top: 0;
		font-size: 1.375rem;
	}
}
/* Every tile reads from the left, as the page does. */
html[data-public-theme='waypoint'] .tool-page .tl-tile {
	padding: 1rem 1.125rem;
	text-align: left;
}
html[data-public-theme='waypoint'] .tool-page .tl-tile {
	position: relative;
	border: 1px solid transparent;
	border-radius: var(--u-r-2);
	background: var(--u-paper-2);
	color: var(--u-text-hi);
}
html[data-public-theme='waypoint'] .tool-page .tl-tile--plate {
	border-color: var(--u-rule);
	background: var(--u-plate);
}
/* Over a figure: what it counts — its own line, at its own leading (the
   college predictor's label is a <span>, and wrapped on the plate's). */
html[data-public-theme='waypoint'] .tool-page .tl-tile .wp-label {
	display: block;
}
html[data-public-theme='waypoint'] .tool-page .wp-label {
	font-family: var(--u-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.1em;
	color: var(--u-text-3);
	opacity: 1;
}
html[data-public-theme='waypoint'] .tool-page .wp-readout {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--u-font-mono);
	font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--u-text-hi);
}
html[data-public-theme='waypoint'] .tool-page .wp-readout.text-pgx-flame,
html[data-public-theme='waypoint'] .tool-page .wp-readout .text-pgx-flame {
	color: var(--u-laser-text);
}
html[data-public-theme='waypoint'] .tool-page .wp-readout :is(.text-base, span) {
	font-size: 0.6em;
	letter-spacing: 0;
	color: var(--u-text-2);
}
/* The answer: the ink plate, the figure lit in the laser. */
html[data-public-theme='waypoint'] .tool-page .tl-tile--lead {
	border-color: var(--u-ink-900);
	background: linear-gradient(180deg, var(--u-ink-900), var(--u-ink-950));
	color: var(--u-on-ink);
}
html[data-public-theme='waypoint'] .tool-page .tl-tile--lead .wp-label {
	color: var(--u-on-ink-2);
}
html[data-public-theme='waypoint'] .tool-page .tl-tile--lead .wp-readout {
	color: var(--u-laser-on-ink);
}
html[data-public-theme='waypoint'] .tool-page .tl-tile--lead .tl-sub {
	color: var(--u-on-ink-3);
	opacity: 1;
}
/* The waypoint node in the plate's corner: the reading is live. */
html[data-public-theme='waypoint'] .tool-page .tl-tile--lead::before {
	content: '';
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 12px;
	height: 12px;
	border: 2px solid var(--u-laser-path);
	border-radius: var(--u-r-pill);
	background: var(--u-ink-900);
	box-shadow: 0 0 0 5px var(--u-laser-halo);
}
/* A lead plate whose answer is a count in words (the college predictor's):
   the count is the figure, lit in mono; its words read, in Inter. */
html[data-public-theme='waypoint'] .tool-page .tl-tile--start .wp-readout {
	margin-top: 0.625rem;
	font-size: clamp(2rem, 1.6rem + 1.4vw, 2.625rem);
	line-height: 1.05;
	/* the space before the words is a mono space: close it up */
	word-spacing: -0.3em;
}
/* It stands alone (not in a results grid), with the inset every answer
   plate has. */
html[data-public-theme='waypoint'] .tool-page .tl-tile--start {
	padding: 1.5rem 1.75rem 1.375rem;
}
html[data-public-theme='waypoint'] .tool-page .tl-tile--start::before {
	top: 1.5rem;
	right: 1.5rem;
}
/* A phone: the label ("…at AIR 5,000 (General)") keeps two lines whatever
   rank is typed, so the list under it never moves as the digits change. */
@media (max-width: 480px) {
	html[data-public-theme='waypoint'] .tool-page .tl-tile--start {
		padding-inline: 1.25rem;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-tile--start .wp-label {
		min-height: 2.9em;
	}
}
html[data-public-theme='waypoint'] .tool-page .tl-tile--start .wp-readout .tl-words {
	word-spacing: normal;
	font-family: var(--u-font-sans);
	font-size: var(--u-fs-17);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--u-on-ink-2);
}

/* ---- The path: the score scale as a waypoint route ------------------ */
/* Under a planner's answer: the node where you stand, the lit run to the
   node you aim for. Under a calculator's: the run from the foot of the
   scale to where the score lands. The scale is ticked at the exam's own
   steps (--wp-steps, set by the page: 100 SAT points, 5 ACT points).
   Decorative — aria-hidden, the figures above say it in words — and it
   moves by transform and clip-path only, so dragging a slider shifts no
   layout (the tools' CLS budget). The page sets --wp-from and --wp-to as
   percentages of the scale. */
html[data-public-theme='waypoint'] .tool-page .tl-tile--path {
	padding-bottom: 1.25rem;
}
html[data-public-theme='waypoint'] .tool-page .tl-tile--lead.tl-tile--path::before {
	display: none;
}
html[data-public-theme='waypoint'] .tool-page .tl-path {
	--wp-from: 0%;
	position: relative;
	height: 1.5rem;
	margin: 1.125rem 0.4375rem 0;
}
html[data-public-theme='waypoint'] .tool-page .tl-path::before {
	content: '';
	position: absolute;
	inset: 0.4375rem 0;
	background:
		linear-gradient(var(--u-rule-on-ink-strong), var(--u-rule-on-ink-strong)) 0 50% / 100% 1px no-repeat,
		linear-gradient(var(--u-rule-on-ink-strong), var(--u-rule-on-ink-strong)) 100% 0 / 1px 100% no-repeat,
		repeating-linear-gradient(90deg, var(--u-rule-on-ink-strong) 0 1px, transparent 1px calc(100% / var(--wp-steps, 10))) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}
html[data-public-theme='waypoint'] .tool-page .tl-path__run {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% - 1.5px);
	height: 3px;
	border-radius: var(--u-r-pill);
	background: var(--u-laser-path);
	clip-path: inset(0 calc(100% - max(var(--wp-from), var(--wp-to))) 0 min(var(--wp-from), var(--wp-to)));
}
/* A node spans the scale and is carried along it by transform; its dot
   sits at its left edge. */
html[data-public-theme='waypoint'] .tool-page .tl-path__node {
	position: absolute;
	inset: 0;
	transform: translateX(var(--wp-from));
	pointer-events: none;
}
html[data-public-theme='waypoint'] .tool-page .tl-path__node::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 0.875rem;
	height: 0.875rem;
	margin: -0.4375rem 0 0 -0.4375rem;
	box-sizing: border-box;
	border: 2px solid var(--u-on-ink-3);
	border-radius: var(--u-r-pill);
	background: var(--u-ink-900);
}
html[data-public-theme='waypoint'] .tool-page .tl-path__node--to {
	transform: translateX(var(--wp-to));
}
html[data-public-theme='waypoint'] .tool-page .tl-path__node--to::before {
	border-color: var(--u-laser-path);
	box-shadow: 0 0 0 5px var(--u-laser-halo);
}
@media (prefers-reduced-motion: no-preference) {
	html[data-public-theme='waypoint'] .tool-page .tl-path__node {
		transition: transform var(--u-t-1) var(--u-ease);
	}
	html[data-public-theme='waypoint'] .tool-page .tl-path__run {
		transition: clip-path var(--u-t-1) var(--u-ease);
	}
}
/* A figure inside a sentence ("you need about 612/720"): mono, the laser. */
html[data-public-theme='waypoint'] .tool-page .tl-readout-inline {
	display: inline-block;
	border: 1px solid var(--u-laser-line);
	border-radius: var(--u-r-1);
	background: var(--u-plate);
	font-family: var(--u-font-mono);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var(--u-laser-text);
}
html[data-public-theme='waypoint'] .tool-page .tl-sub {
	margin-top: 0.5rem;
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-12);
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: var(--u-text-3);
}
@media (prefers-reduced-motion: no-preference) {
	html[data-public-theme='waypoint'] .tool-page .tl-tile .wp-readout {
		transition: color var(--u-t-2) var(--u-ease);
	}
}

/* ---- Notes, chips, the capture form --------------------------------- */
html[data-public-theme='waypoint'] .tool-page .tl-note {
	border-radius: var(--u-r-2);
	background: var(--u-paper-2);
	color: var(--u-text-2);
	font-size: var(--u-fs-13);
	line-height: 1.6;
}
html[data-public-theme='waypoint'] .tool-page .tl-note strong {
	color: var(--u-text-hi);
}
html[data-public-theme='waypoint'] .tool-page .tl-chip {
	border: 1px solid transparent;
	border-radius: var(--u-r-pill);
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-12);
	font-weight: 500;
	letter-spacing: 0.02em;
}
/* A chip that is not a status is a neutral plate in ink: a college band
   ("~1–20,000", "varies enormously by state") is information, not the
   answer, so it takes no laser; and "below cutoff" reads as firmly as
   "qualifies" (its paper-2 ground was the eligibility block's own). The
   status chip keeps its wash and its words. */
html[data-public-theme='waypoint'] .tool-page .tl-chip:is(.bg-pgx-chip, .bg-pgx-flame-wash) {
	border-color: var(--u-rule-strong);
	background: var(--u-plate);
	color: var(--u-text-hi);
}
html[data-public-theme='waypoint'] .tool-page .tl-capture {
	border: 1px solid var(--u-rule);
	border-radius: var(--u-r-2);
	background: var(--u-paper-2);
}

/* ---- Actions: Waypoint's buttons ------------------------------------ */
/* 1rem under the plate's notes (Tailwind's mt-6 says 1.5rem; the lane set
   1.25rem): with the instrument's 1.25rem and the lede's 0.75rem above, a
   planner's primary action ends inside 1280x800 with the merged ledes. */
html[data-public-theme='waypoint'] .tool-page .tl-actions {
	margin-top: 1rem;
}
html[data-public-theme='waypoint'] .tool-page .wp-btn {
	min-height: 48px;
	border-radius: var(--u-r-1);
	box-shadow: none;
	font-family: var(--u-font-sans);
	font-size: var(--u-fs-15);
	font-weight: 600;
	letter-spacing: 0;
	text-wrap: balance;
}
html[data-public-theme='waypoint'] .tool-page .wp-btn--primary {
	border-color: transparent;
	background: var(--u-laser-fill);
	color: var(--u-on-laser);
}
html[data-public-theme='waypoint'] .tool-page .wp-btn--primary:hover {
	background: var(--u-laser-700);
}
html[data-public-theme='waypoint'] .tool-page .wp-btn--line {
	border: 1px solid var(--u-rule-input);
	background: transparent;
	color: var(--u-text-hi);
}
html[data-public-theme='waypoint'] .tool-page .wp-btn--line:hover {
	border-color: var(--u-laser-line);
	background: transparent;
	color: var(--u-laser-text);
}
html[data-public-theme='waypoint'] .tool-page .wp-btn--ink {
	min-height: 44px;
	border: 1px solid transparent;
	background: var(--u-ink-900);
	color: var(--u-on-ink-hi);
}
html[data-public-theme='waypoint'] .tool-page .wp-btn--ink:hover {
	background: var(--u-ink-800);
}
html[data-public-theme='waypoint'] .tool-page .wp-btn--on-ink {
	border: 1px solid var(--u-rule-input-on-ink);
	background: transparent;
	color: var(--u-on-ink-hi);
}
html[data-public-theme='waypoint'] .tool-page .wp-btn--on-ink:hover {
	border-color: var(--u-laser-on-ink);
	background: transparent;
	color: var(--u-laser-on-ink);
}
html[data-public-theme='waypoint'] .tool-page .wp-btn:focus-visible {
	outline: none;
	box-shadow: var(--u-focus);
}
html[data-public-theme='waypoint'] .tool-page .tl-band .wp-btn:focus-visible {
	box-shadow: var(--u-focus-on-ink);
}

/* ---- Tables: mono heads, tabular figures ---------------------------- */
html[data-public-theme='waypoint'] .tool-page .tl-tablewrap {
	border: 1px solid var(--u-rule);
	border-radius: var(--u-r-2);
	background: var(--u-plate);
	box-shadow: var(--u-shadow-1);
}
html[data-public-theme='waypoint'] .tool-page .tl-table {
	font-size: var(--u-fs-15);
	font-variant-numeric: tabular-nums;
	color: var(--u-text);
}
html[data-public-theme='waypoint'] .tool-page .tl-table thead {
	background: var(--u-paper-2);
}
html[data-public-theme='waypoint'] .tool-page .tl-table thead td {
	border-bottom: 1px solid var(--u-rule-strong);
}
html[data-public-theme='waypoint'] .tool-page .tl-table th {
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-12);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--u-text-3);
	border-bottom: 1px solid var(--u-rule-strong);
}
html[data-public-theme='waypoint'] .tool-page .tl-table th :is(span, .block) {
	margin-top: 0.2rem;
	letter-spacing: 0.02em;
	text-transform: none;
}
html[data-public-theme='waypoint'] .tool-page .tl-table .tl-num {
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-14);
	font-weight: 400;
	white-space: nowrap;
}
/* Dates and rounds: mono, but they wrap (a round's name can be long). */
html[data-public-theme='waypoint'] .tool-page .tl-table .tl-date {
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-13);
	line-height: 1.5;
}
/* A reference table drawn without cell insets (the planners' score-to-
   percentile tables) takes its plate's inset, as every other table does. */
html[data-public-theme='waypoint'] .tool-page .tl-table--inset :is(th, td) {
	padding: 0.625rem 1rem;
}
/* A phone: the plate's inset and the heads' tracking tighten so the table
   fits the column at 320px ("COMPOSITE", "PERCENTILE" and "Competitive"
   cannot wrap) and never becomes a scroll region (axe
   scrollable-region-focusable). */
@media (max-width: 480px) {
	html[data-public-theme='waypoint'] .tool-page .tl-table--inset {
		font-size: var(--u-fs-14);
	}
	html[data-public-theme='waypoint'] .tool-page .tl-table--inset :is(th, td) {
		padding: 0.625rem;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-table--inset th {
		font-size: 0.6875rem;
		letter-spacing: 0.04em;
	}
}
/* The row where the visitor stands (a planner's current score): the laser's
   wash and its line, as the NEET table marks its row. */
html[data-public-theme='waypoint'] .tool-page .tl-table tr.tl-row--now {
	background: var(--u-laser-wash);
	box-shadow: inset 2px 0 0 var(--u-laser-line);
}
html[data-public-theme='waypoint'] .tool-page .tl-table tr.tl-row--now td {
	color: var(--u-text-hi);
	font-weight: 600;
}
/* A source link in a cell ("↗") is a 24px target (WCAG 2.5.8), not the
   glyph's 10x20. */
html[data-public-theme='waypoint'] .tool-page .tl-table td a {
	display: inline-grid;
	min-width: 24px;
	min-height: 24px;
	place-items: center;
}
/* A phone: the college table becomes a card to a row, so the answer — the
   closing AIR — is on screen (it sat past the edge at 390px). The college
   and its closing AIR on the first line; the state, and the year and round,
   as a mono line under it; the source at its end. The head is kept for
   assistive tech (the markup names every role, so the table stays a table
   whatever its boxes), and each figure is labelled in its card. */
@media (max-width: 640px) {
	html[data-public-theme='waypoint'] .tool-page .tl-table--cards,
	html[data-public-theme='waypoint'] .tool-page .tl-table--cards tbody {
		display: block;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-table--cards thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-table--cards tr {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			'college college air'
			'state round src';
		align-items: start;
		column-gap: 0.75rem;
		row-gap: 0.375rem;
		padding: 0.875rem 1rem;
	}
	/* The first card sits on the plate's own edge: no second rule under it. */
	html[data-public-theme='waypoint'] .tool-page .tl-table--cards tbody tr:first-child {
		border-top-width: 0;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-table--cards td {
		padding: 0;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-table--cards td:nth-child(1) {
		grid-area: college;
		font-size: var(--u-fs-15);
		line-height: 1.4;
		color: var(--u-text-hi);
	}
	html[data-public-theme='waypoint'] .tool-page .tl-table--cards td:nth-child(2) {
		grid-area: state;
		align-self: center;
		font-family: var(--u-font-mono);
		font-size: var(--u-fs-12);
		letter-spacing: 0.02em;
		color: var(--u-text-3);
	}
	html[data-public-theme='waypoint'] .tool-page .tl-table--cards td:nth-child(3) {
		grid-area: round;
		align-self: center;
		font-size: var(--u-fs-12);
		color: var(--u-text-3);
	}
	html[data-public-theme='waypoint'] .tool-page .tl-table--cards td:nth-child(4) {
		grid-area: air;
		font-size: var(--u-fs-17);
		line-height: 1.2;
		text-align: right;
	}
	html[data-public-theme='waypoint'] .tool-page .tl-table--cards td:nth-child(4)::before {
		content: 'Closing AIR';
		content: 'Closing AIR' / '';
		display: block;
		margin-bottom: 0.125rem;
		font-size: 0.625rem;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--u-text-3);
	}
	html[data-public-theme='waypoint'] .tool-page .tl-table--cards td:nth-child(5) {
		grid-area: src;
		justify-self: end;
		align-self: center;
	}
}
html[data-public-theme='waypoint'] .tool-page .tl-table .tl-num.font-bold,
html[data-public-theme='waypoint'] .tool-page .tl-table .font-semibold .tl-num {
	font-weight: 600;
	color: var(--u-text-hi);
}
html[data-public-theme='waypoint'] .tool-page .tl-table tr.bg-pgx-flame-wash {
	box-shadow: inset 2px 0 0 var(--u-laser-line);
}

/* ---- Plates: FAQ, cards ---------------------------------------------- */
html[data-public-theme='waypoint'] .tool-page .tl-plate {
	border: 1px solid var(--u-rule);
	border-radius: var(--u-r-2);
	background: var(--u-plate);
	box-shadow: none;
}
html[data-public-theme='waypoint'] .tool-page details.tl-plate > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	list-style: none;
	color: var(--u-text-hi);
}
html[data-public-theme='waypoint'] .tool-page details.tl-plate > summary::-webkit-details-marker {
	display: none;
}
/* The browser's black triangle gives way to a mono "+" in the meta ink; it
   turns to a "×" and lights when the answer is open. Decorative: the
   disclosure's state is the element's own. */
html[data-public-theme='waypoint'] .tool-page details.tl-plate > summary::after {
	content: '+';
	content: '+' / '';
	flex: none;
	font-family: var(--u-font-mono);
	font-size: var(--u-fs-17);
	font-weight: 400;
	line-height: 1;
	color: var(--u-text-3);
}
html[data-public-theme='waypoint'] .tool-page details.tl-plate[open] > summary {
	color: var(--u-laser-text);
}
html[data-public-theme='waypoint'] .tool-page details.tl-plate[open] > summary::after {
	transform: rotate(45deg);
	color: var(--u-laser-text);
}
@media (prefers-reduced-motion: no-preference) {
	html[data-public-theme='waypoint'] .tool-page details.tl-plate > summary::after {
		transition:
			transform var(--u-t-2) var(--u-ease),
			color var(--u-t-2) var(--u-ease);
	}
}
/* A tool card on the index: a Waypoint tile that lifts to the laser. */
html[data-public-theme='waypoint'] .tool-page .tl-card {
	border: 1px solid var(--u-rule);
	border-radius: var(--u-r-3);
	background: var(--u-plate);
	box-shadow: var(--u-shadow-1);
	/* the card is a link: its own ink, never app.postcss's indigo for an <a> */
	color: var(--u-text-hi);
}
@media (hover: hover) and (pointer: fine) {
	html[data-public-theme='waypoint'] .tool-page .tl-card:hover {
		border-color: var(--u-laser-line);
		box-shadow: var(--u-shadow-2);
		transform: translateY(-2px);
	}
}
@media (prefers-reduced-motion: no-preference) {
	html[data-public-theme='waypoint'] .tool-page .tl-card {
		transition:
			border-color var(--u-t-2) var(--u-ease),
			box-shadow var(--u-t-2) var(--u-ease),
			transform var(--u-t-2) var(--u-ease);
	}
}
html[data-public-theme='waypoint'] .tool-page .tl-card:focus-visible {
	outline: none;
	border-color: var(--u-laser-line);
	box-shadow: var(--u-focus);
}
html[data-public-theme='waypoint'] .tool-page .tl-card h3 {
	font-size: var(--u-fs-d3);
	line-height: 1.2;
}

/* ---- The ink band: the one dark island, the tutor's case -------------- */
/* Its inset is its own (--tl-pad), because the route at its foot is drawn
   on it: generous, as prepgraph.ai's bands are. */
html[data-public-theme='waypoint'] .tool-page .tl-band {
	--tl-pad: clamp(1.5rem, 1rem + 2vw, 2.25rem);
	position: relative;
	overflow: hidden;
	padding: var(--tl-pad) var(--tl-pad) calc(var(--tl-pad) + 2.875rem);
	border-color: transparent;
	border-radius: var(--u-r-3);
	background: linear-gradient(180deg, var(--u-ink-900), var(--u-ink-950));
	color: var(--u-on-ink);
}
/* Its running text, whatever the markup painted it for paper. */
html[data-public-theme='waypoint'] .tool-page .tl-band p {
	color: var(--u-on-ink-2);
}
/* The waypoint route across its foot, inside its inset (so no radius clips
   it): the node where the visitor stands, a lit run through a waypoint to
   the node they are heading for — prepgraph.ai's spine laid on its side.
   Decorative. The line is ::before; the three nodes, and the halo of the
   last, are ::after, drawn over it with the band's own ink inside each ring. */
html[data-public-theme='waypoint'] .tool-page .tl-band::before {
	content: '';
	position: absolute;
	left: var(--tl-pad);
	right: var(--tl-pad);
	bottom: calc(var(--tl-pad) + 0.8125rem - 1px);
	height: 2px;
	background: var(--u-laser-path);
	pointer-events: none;
}
html[data-public-theme='waypoint'] .tool-page .tl-band::after {
	content: '';
	position: absolute;
	left: calc(var(--tl-pad) - 0.8125rem);
	right: calc(var(--tl-pad) - 0.8125rem);
	bottom: var(--tl-pad);
	height: 1.625rem;
	background:
		radial-gradient(circle closest-side, var(--u-ink-950) calc(100% - 2.5px), var(--u-on-ink-3) calc(100% - 2px) calc(100% - 0.5px), transparent 100%) 0.375rem 50% / 0.875rem 0.875rem no-repeat,
		radial-gradient(circle closest-side, var(--u-ink-950) calc(100% - 2.5px), var(--u-laser-path) calc(100% - 2px) calc(100% - 0.5px), transparent 100%) 50% 50% / 0.875rem 0.875rem no-repeat,
		radial-gradient(circle closest-side, var(--u-ink-950) calc(100% - 2.5px), var(--u-laser-path) calc(100% - 2px) calc(100% - 0.5px), transparent 100%) calc(100% - 0.375rem) 50% / 0.875rem 0.875rem no-repeat,
		radial-gradient(circle closest-side, var(--u-laser-halo) calc(100% - 1px), transparent 100%) 100% 50% / 1.625rem 1.625rem no-repeat;
	pointer-events: none;
}