/* Generated by pavint-render from Pavint-Render-Design-Tokens.js and assets/pavint.css. */
:root
{
	color-scheme: light dark;
	--pi-ground: #f3f4f6;
	--pi-surface: #ffffff;
	--pi-ink: #2a2e37;
	--pi-ink-muted: #464d5d;
	--pi-ink-subtle: #5b6478;
	--pi-line: #dfe2e7;
	--pi-control-border: #767f92;
	--pi-charcoal: #2e333d;
	--pi-on-charcoal: #ffffff;
	--pi-on-charcoal-muted: #c3c8d2;
	--pi-link: #3348e6;
	--pi-link-hover: #2537b8;
	--pi-focus: #3348e6;
	--pi-tint: #e7eafd;
	--pi-note-rule: #5467f2;
	--pi-accent-headlight: #f26b1d;
	--pi-on-accent-headlight: #111418;
	--pi-pass: #0f7a2b;
	--pi-pass-tint: #e3f2e7;
	--pi-fail: #a12a12;
	--pi-chip: #ebecf0;
	--pi-layer-top: #2a2e37;
	--pi-layer-base: #b9a27a;
	--pi-layer-subbase: #7a5a3c;
	--pi-logo-top-on-dark: #ffffff;
	--pi-logo-base-on-dark: #d8c9a8;
	--pi-logo-subbase-on-dark: #b08a62;
	--pi-font-body: 'Atkinson Hyperlegible', 'Segoe UI', Helvetica, Arial, sans-serif;
	--pi-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	--pi-size-body: 1.1875rem;
	--pi-leading-body: 1.62;
	--pi-size-small: 0.9375rem;
	--pi-size-eyebrow: 0.8125rem;
	--pi-size-h1: clamp(2.125rem, 1.4rem + 2.4vw, 2.875rem);
	--pi-size-h2: 1.75rem;
	--pi-size-h3: 1.3125rem;
	--pi-measure: 52rem;
	--pi-radius: 0.5rem;
	--pi-radius-large: 0.75rem;
	--pi-target: 2.75rem;
}
@media (prefers-color-scheme: dark)
{
	:root
	{
		--pi-ground: #14161b;
		--pi-surface: #1c1f26;
		--pi-ink: #e7e9ee;
		--pi-ink-muted: #c3c8d2;
		--pi-ink-subtle: #a3abba;
		--pi-line: #343945;
		--pi-control-border: #8a93a6;
		--pi-charcoal: #0e1014;
		--pi-on-charcoal: #ffffff;
		--pi-on-charcoal-muted: #c3c8d2;
		--pi-link: #a9b4ff;
		--pi-link-hover: #ccd2ff;
		--pi-focus: #a9b4ff;
		--pi-tint: #242b4d;
		--pi-note-rule: #7f8cf7;
		--pi-accent-headlight: #f26b1d;
		--pi-on-accent-headlight: #111418;
		--pi-pass: #5fd07f;
		--pi-pass-tint: #1d3324;
		--pi-fail: #ff8f80;
		--pi-chip: #2a2f3a;
		--pi-layer-top: #e7e9ee;
		--pi-layer-base: #b9a27a;
		--pi-layer-subbase: #7a5a3c;
	}
}

/* Pavement Interactive: shared styles. Colors and type come from the custom properties the build
   writes above this line (Pavint-Render-Design-Tokens.js). Light by default, dark by preference. */

@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/atkinson-hyperlegible-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/atkinson-hyperlegible-latin-700-italic.woff2') format('woff2'); }

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; --pi-header-height: 4.5rem; }
/* The header stays at the top (2 Nov 2026), so jumps to a heading or calculator land just under it. */
html { scroll-padding-top: calc(var(--pi-header-height) + 1rem); }

body
{
	margin: 0;
	background: var(--pi-ground);
	color: var(--pi-ink);
	font-family: var(--pi-font-body);
	font-size: var(--pi-size-body);
	line-height: var(--pi-leading-body);
	/* Long URLs and run-together words in migrated text wrap instead of widening the page. */
	overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }

/* Links: always underlined in text, indigo, visible focus everywhere. */
a { color: var(--pi-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--pi-link-hover); text-decoration-thickness: 2px; }

:focus-visible
{
	outline: 3px solid var(--pi-focus);
	outline-offset: 2px;
	border-radius: 2px;
}
.pi-header :focus-visible, .pi-footer :focus-visible { outline-color: var(--pi-on-charcoal); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0; }
h1 { font-size: var(--pi-size-h1); line-height: 1.1; }
h2 { font-size: var(--pi-size-h2); }
h3 { font-size: var(--pi-size-h3); }
.pi-h3 { font-size: 1.1875rem; }

.pi-visually-hidden
{
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pi-skip
{
	position: absolute; left: 1rem; top: -4rem; z-index: 60;
	background: var(--pi-surface); color: var(--pi-link); padding: 0.75rem 1rem; border-radius: var(--pi-radius);
	font-weight: 700;
}
.pi-skip:focus { top: 0.75rem; }

.pi-eyebrow
{
	margin: 0;
	font-size: var(--pi-size-eyebrow); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--pi-ink-subtle);
}

/* ---------- Header and footer ---------- */

.pi-header { position: sticky; top: 0; z-index: 50; background: var(--pi-charcoal); color: var(--pi-on-charcoal); }
.pi-header-inner
{
	position: relative; max-width: 80rem; margin: 0 auto; padding: 0.375rem 1.5rem; min-height: 4.5rem; box-sizing: border-box;
	display: flex; align-items: center; gap: 2.25rem; flex-wrap: wrap;
}
.pi-logo { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--pi-on-charcoal); text-decoration: none; min-height: var(--pi-target); }
.pi-logo:hover { color: var(--pi-on-charcoal); }
.pi-logo svg { width: 2.75rem; height: 2.75rem; flex: none; }
.pi-logo-name { display: flex; flex-direction: column; font-weight: 700; font-size: 1.1875rem; line-height: 1.02; }
.pi-logo-top { fill: var(--pi-logo-top-on-dark); }
.pi-logo-base { fill: var(--pi-logo-base-on-dark); }
.pi-logo-subbase { fill: var(--pi-logo-subbase-on-dark); }

/* One centerline (option A, 2 Nov 2026): links, the divider and the account all center on the row; the
   current page's bar is an inset shadow, so it never pushes the words up. */
.pi-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; }
.pi-nav a
{
	display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--pi-target);
	color: var(--pi-on-charcoal); text-decoration: none; font-size: 1rem;
}
.pi-nav a .pi-ic { opacity: 0.85; }
.pi-nav a:hover { color: var(--pi-on-charcoal); box-shadow: inset 0 -3px 0 var(--pi-on-charcoal-muted); }
.pi-nav a[aria-current] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--pi-on-charcoal); }
.pi-nav a[aria-current] .pi-ic { opacity: 1; }
.pi-header-account { display: flex; align-items: center; gap: 1.5rem; margin-left: -0.75rem; }
.pi-header-account::before { content: ""; width: 1px; height: 1.5rem; background: var(--pi-on-charcoal-muted); }
.pi-signin
{
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1rem; box-sizing: border-box;
	color: var(--pi-on-charcoal); text-decoration: none; font-size: 1rem; font-weight: 700;
	border: 1px solid var(--pi-on-charcoal-muted); border-radius: 999px;
}
.pi-signin:hover { color: var(--pi-on-charcoal); background: rgba(255, 255, 255, 0.10); }
.pi-header .pi-acct-button { min-height: 2.5rem; }
.pi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The account button and menu (option A): the public header and the editor bar share it. */
.pi-acct { position: relative; }
.pi-acct-button
{
	display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--pi-target); padding: 0 0.75rem 0 0.3rem;
	background: rgba(255, 255, 255, 0.08); color: var(--pi-on-charcoal); font: inherit; font-size: 1rem;
	border: 1px solid var(--pi-on-charcoal-muted); border-radius: 999px; cursor: pointer;
}
.pi-acct-button:hover { background: rgba(255, 255, 255, 0.16); }
.pi-acct-avatar
{
	display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 999px;
	background: var(--pi-note-rule); color: #ffffff; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em;
}
.pi-acct-avatar-large { width: 2.5rem; height: 2.5rem; font-size: 0.9375rem; }
.pi-acct-menu
{
	position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 900; width: min(20rem, calc(100vw - 2rem));
	background: var(--pi-surface); color: var(--pi-ink); border: 1px solid var(--pi-line); border-radius: var(--pi-radius-large);
	box-shadow: 0 14px 36px rgba(20, 22, 27, 0.22); padding: 0.625rem; text-align: left;
}
.pi-acct-head { display: flex; gap: 0.75rem; align-items: center; padding: 0.5rem 0.5rem 0.75rem; }
.pi-acct-head > span:last-child { display: grid; gap: 0.15rem; min-width: 0; }
.pi-acct-head b { font-size: 1rem; }
.pi-acct-head small { color: var(--pi-ink-subtle); font-size: var(--pi-size-small); overflow-wrap: anywhere; }
.pi-acct-role { justify-self: start; font-size: 0.75rem; font-weight: 700; background: var(--pi-tint); color: var(--pi-link-hover); border-radius: 999px; padding: 0.05rem 0.5rem; }
.pi-acct-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.pi-acct-group { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pi-ink-subtle); padding: 0.5rem 0.5rem 0.25rem; }
.pi-acct-rule { height: 1px; background: var(--pi-line); margin: 0.375rem 0; }
.pi-acct-menu form { margin: 0; }
.pi-acct-menu a[role="menuitem"], .pi-nav .pi-acct-menu a[role="menuitem"], .pi-acct-out
{
	display: flex; justify-content: flex-start; align-items: center; gap: 0.625rem; width: 100%; min-height: 2.5rem; padding: 0 0.5rem;
	color: var(--pi-ink); background: none; border: 0; border-radius: 0.375rem; font: inherit; font-size: 0.9375rem; font-weight: 400; text-decoration: none; text-align: left; cursor: pointer;
}
.pi-acct-menu a[role="menuitem"]:hover, .pi-acct-menu a[role="menuitem"]:focus-visible, .pi-acct-out:hover, .pi-acct-out:focus-visible { background: var(--pi-tint); color: var(--pi-ink); border-bottom-color: transparent; }
/* Where you are: a tint, a bar at the left, a blue icon and "You're here", never bold alone. */
.pi-acct-menu a[aria-current="page"], .pi-nav .pi-acct-menu a[aria-current="page"] { background: var(--pi-tint); box-shadow: inset 3px 0 0 var(--pi-note-rule); }
.pi-acct-menu a[aria-current="page"] .ed-menu-icon { color: var(--pi-link); }
.pi-acct-here { font-size: 0.75rem; font-weight: 700; color: var(--pi-link-hover); white-space: nowrap; }
.pi-acct-strong { font-weight: 700 !important; }
.pi-acct-menu :focus-visible { outline: 2px solid var(--pi-focus); outline-offset: 0; }
.pi-acct-menu a[role="menuitem"] > .pi-acct-badge, .pi-acct-menu a[role="menuitem"] > .pi-acct-here { margin-left: auto; }
.pi-acct-badge { font-size: 0.75rem; font-weight: 700; background: var(--pi-charcoal); color: var(--pi-on-charcoal); border-radius: 999px; padding: 0.05rem 0.5rem; }
.pi-acct-out, .pi-acct-out .ed-menu-icon { color: var(--pi-fail); font-weight: 700; }
.pi-acct-menu .ed-menu-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; color: var(--pi-ink-subtle); }

.pi-menu-button
{
	display: none; gap: 0.5rem;
	min-height: 2.5rem; min-width: var(--pi-target); padding: 0 0.875rem;
	background: transparent; color: var(--pi-on-charcoal); font: inherit; font-size: 1rem; font-weight: 700;
	border: 1px solid var(--pi-on-charcoal-muted); border-radius: var(--pi-radius); cursor: pointer;
}

.pi-footer { background: var(--pi-charcoal); color: var(--pi-on-charcoal-muted); margin-top: 4rem; }
.pi-footer-inner
{
	max-width: 80rem; margin: 0 auto; padding: 1.75rem 1.5rem;
	display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
	font-size: var(--pi-size-small);
}
.pi-footer p { margin: 0; }
.pi-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.pi-footer a { color: var(--pi-on-charcoal); display: inline-flex; align-items: center; min-height: 1.5rem; }

/* ---------- Shared pieces ---------- */

.pi-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.pi-lead { font-size: 1.25rem; color: var(--pi-ink-muted); max-width: 46rem; margin: 0; }

.pi-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; font-size: var(--pi-size-small); }
.pi-breadcrumb li + li::before { content: "›"; margin-right: 0.35rem; color: var(--pi-ink-subtle); }
.pi-breadcrumb a { display: inline-flex; min-height: 1.5rem; align-items: center; }

.pi-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pi-chips li, .pi-chip
{
	display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0.125rem 0.75rem;
	border-radius: 999px; background: var(--pi-chip); color: var(--pi-ink); font-size: 0.875rem;
}
.pi-chips a { color: var(--pi-ink); }

.pi-card
{
	background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius-large);
	padding: 1.25rem 1.5rem;
}

.pi-button
{
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	min-height: var(--pi-target); padding: 0 1.125rem;
	border-radius: var(--pi-radius); border: 1px solid var(--pi-charcoal);
	background: var(--pi-charcoal); color: var(--pi-on-charcoal);
	font: inherit; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.pi-button:hover { color: var(--pi-on-charcoal); filter: brightness(1.15); }
.pi-button-quiet { background: transparent; color: var(--pi-ink); border-color: var(--pi-control-border); }
.pi-button-quiet:hover { color: var(--pi-ink); background: var(--pi-ground); filter: none; }
@media (prefers-color-scheme: dark)
{
	.pi-button:not(.pi-button-quiet) { border-color: var(--pi-control-border); }
}

.pi-field { display: flex; flex-direction: column; gap: 0.3rem; }
.pi-field label { font-size: var(--pi-size-small); font-weight: 700; }
.pi-field small { font-size: var(--pi-size-small); color: var(--pi-ink-subtle); }
input[type="search"], input[type="text"], input[type="email"], select, textarea
{
	font: inherit; font-size: 1rem; color: var(--pi-ink); background: var(--pi-surface);
	border: 1px solid var(--pi-control-border); border-radius: 0.375rem;
	min-height: var(--pi-target); padding: 0.5rem 0.75rem; width: 100%;
}
textarea { min-height: 7rem; resize: vertical; }
input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--pi-link); }

.pi-search { display: flex; gap: 0.5rem; max-width: 36rem; }
.pi-search input { flex: 1; }

/* ---------- Home ---------- */

.pi-facts
{
	list-style: none; margin: 2rem 0 0; padding: 0.75rem 1rem;
	display: flex; flex-wrap: wrap; gap: 0.375rem 1.75rem;
	background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
	font-size: var(--pi-size-small); color: var(--pi-ink-subtle);
}
.pi-facts li { display: inline-flex; gap: 0.5rem; align-items: center; }
.pi-facts .pi-ic { color: var(--pi-ink-subtle); }
.pi-facts b { color: var(--pi-ink); font-variant-numeric: tabular-nums; }

.pi-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin: 2.5rem 0 1rem; }
.pi-section-head p { margin: 0; font-size: var(--pi-size-small); color: var(--pi-ink-subtle); }

.pi-contents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.pi-contents > li { border-top: 3px solid var(--pi-ink); padding-top: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.pi-contents h3 { font-size: 1.1875rem; }
.pi-contents h3 a { color: var(--pi-ink); text-decoration: none; }
.pi-contents h3 a:hover { text-decoration: underline; }
.pi-contents ul { list-style: none; margin: 0.25rem 0 0; padding: 0; font-size: var(--pi-size-small); }
.pi-contents ul a { display: inline-flex; min-height: 1.75rem; align-items: center; }

.pi-home-lower { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem; margin-top: 2.5rem; align-items: start; }
.pi-start-list { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.pi-start-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--pi-line); }
.pi-start-list li:last-child { border-bottom: 0; }
.pi-start-list span { font-size: var(--pi-size-small); color: var(--pi-ink-subtle); }
.pi-home-cards { display: flex; flex-direction: column; gap: 1rem; }
.pi-home-cards .pi-card { background: var(--pi-chip); border: 0; }
.pi-home-cards h3 { font-size: 1.1875rem; margin-bottom: 0.25rem; }
.pi-home-cards p { margin: 0; font-size: var(--pi-size-small); color: var(--pi-ink-muted); }

/* ---------- Photo hero on the main pages ----------
   A decorative photo with a dark gradient behind the words, so the title passes contrast on any photo. */
.pi-photo-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; height: var(--pi-hero-height, 26rem); background: var(--pi-charcoal); color: #ffffff; overflow: hidden; }
.pi-photo-hero-image, .pi-photo-hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pi-photo-hero-image { z-index: -2; }
.pi-photo-hero-image img { object-fit: cover; }
/* The words and the search sit above the photo, so they take clicks and taps. */
.pi-photo-hero-text { position: relative; }
.pi-photo-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 16, 20, 0.82) 0%, rgba(14, 16, 20, 0.6) 45%, rgba(14, 16, 20, 0.15) 80%); }
.pi-photo-hero-text { width: 100%; padding-top: 1.5rem; padding-bottom: 2.25rem; }
.pi-photo-hero h1 { color: #ffffff; max-width: 22ch; margin: 0.25rem 0 0.5rem; text-wrap: balance; }
.pi-photo-hero .pi-lead { color: #e4e7ed; max-width: 38rem; }
.pi-photo-hero .pi-eyebrow { color: #e4e7ed; display: inline-flex; gap: 0.5rem; align-items: center; }
.pi-photo-hero .pi-breadcrumb, .pi-photo-hero .pi-breadcrumb a, .pi-photo-hero .pi-breadcrumb li { color: #e4e7ed; }
.pi-photo-hero .pi-search { margin-top: 1.25rem; }
.pi-filters-band { padding-top: 1.5rem; }
.pi-chapter-eyebrow { display: inline-flex; gap: 0.5rem; align-items: center; }
.pi-chapter-eyebrow .pi-ic { color: var(--pi-note-rule); font-size: 1.1em; }

/* ---------- Tools: a gallery of calculators by group; each opens in place or on its own page ---------- */
.pi-tools { padding-top: 1.5rem; padding-bottom: 3rem; }
.pi-tool-bar { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin: -0.75rem 0 1.25rem; padding: 0.75rem 0; background: var(--pi-ground); border-bottom: 1px solid var(--pi-line); }
.pi-photo-hero.pi-photo-hero-compact { height: auto; min-height: 15rem; }
/* On wider screens the search and group filters stay in reach; on phones they would cover a third of the screen. */
@media (min-width: 48rem) { .pi-tool-bar { position: sticky; top: var(--pi-header-height); z-index: 2; } }
.pi-tool-find { flex: 1 1 18rem; max-width: 32rem; display: flex; gap: 0.5rem; align-items: center; background: var(--pi-surface); border: 1px solid var(--pi-control-border); border-radius: var(--pi-radius); padding: 0 0.75rem; color: var(--pi-ink-subtle); }
.pi-tool-find input { flex: 1; min-height: var(--pi-target); border: 0; background: transparent; font: inherit; color: var(--pi-ink); }
.pi-tool-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.pi-tool-pills button { display: inline-flex; gap: 0.4rem; align-items: center; min-height: 2.25rem; padding: 0 0.8rem; border-radius: 999px; border: 1px solid var(--pi-line); background: var(--pi-surface); color: var(--pi-ink-muted); font: inherit; font-size: var(--pi-size-small); font-weight: 700; cursor: pointer; }
.pi-tool-pills button[aria-pressed="true"] { border-color: var(--pi-ink); color: var(--pi-ink); }
.pi-tool-group { margin-bottom: 2rem; }
.pi-tool-group h2 { display: flex; gap: 0.625rem; align-items: center; font-size: 1.25rem; margin: 0 0 0.75rem; }
.pi-tool-group h2 small { font-weight: 400; font-size: var(--pi-size-small); color: var(--pi-ink-subtle); }
.pi-tool-badge { width: 2.25rem; height: 2.25rem; border-radius: var(--pi-radius); background: var(--pi-tint); color: var(--pi-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; flex: none; }
.pi-tool-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 0.625rem; }
.pi-tool-tile { position: relative; height: 100%; display: flex; flex-direction: column; gap: 0.375rem; padding: 0.875rem; background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius-large); color: var(--pi-ink); text-decoration: none; }
.pi-tool-tile:hover { border-color: var(--pi-control-border); box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.08); }
.pi-tool-tile b { padding-right: 1.5rem; line-height: 1.3; }
.pi-tool-tile .pi-tool-meta { margin-top: auto; }
.pi-tool-glyph { position: absolute; right: 0.875rem; top: 0.875rem; color: var(--pi-ink-subtle); }
.pi-tool-meta { display: flex; flex-wrap: wrap; gap: 0.375rem; font-size: 0.75rem; }
.pi-tool-meta span { background: var(--pi-chip); border-radius: 999px; padding: 0 0.5rem; color: var(--pi-ink-muted); }
.pi-tool-from { margin-top: auto; font-size: 0.8125rem; color: var(--pi-ink-subtle); }
.pi-tool-none { color: var(--pi-ink-subtle); }
.pi-tool-sheet { margin: 0 0 2rem; padding: 1.25rem 1.5rem 1.5rem; background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius-large); box-shadow: 0 0.875rem 2.25rem rgba(0, 0, 0, 0.14); }
.pi-tool-close { border: 0; background: none; padding: 0; min-height: 2rem; color: var(--pi-link); font: inherit; text-decoration: underline; cursor: pointer; }
.pi-tool-close::before { content: "← "; }
.pi-tool-head { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; }
.pi-tool-head h1 { margin: 0.25rem 0; }
.pi-tool-sheet .pi-tool-head h1 { font-size: 1.75rem; }
.pi-chip { display: inline-flex; background: var(--pi-chip); border-radius: 999px; padding: 0.05rem 0.6rem; font-size: var(--pi-size-small); color: var(--pi-ink); }
.pi-tool-explained { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.25rem 0 0.75rem; font-size: var(--pi-size-small); color: var(--pi-ink-muted); }
.pi-tool-explained a { display: inline-flex; gap: 0.4rem; align-items: center; }
.pi-tool-detail { max-width: 64rem; }
.pi-tool-back a { display: inline-flex; gap: 0.4rem; align-items: center; }

/* ---------- Reading layout: chapter list | wide column ----------
   The chapter list is open by default; minimized (html.pi-chapter-min, the reader's choice) it is a
   rail of chapter icons. Text keeps the reading measure; figures, tables, equations and calculators
   take the full column. */

.pi-ic { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -0.125em; }
.pi-reading
{
	max-width: 90rem; margin: 0 auto; padding: 0 1.5rem 0 0;
	display: grid;
	grid-template-columns: 17rem minmax(0, 1fr);
	gap: 2.25rem;
	align-items: start;
}
.pi-reading > main { min-width: 0; padding-top: 2.25rem; }
.pi-chapter { position: sticky; top: var(--pi-header-height); max-height: calc(100vh - var(--pi-header-height)); overflow-y: auto; border-right: 1px solid var(--pi-line); background: var(--pi-ground); font-size: var(--pi-size-small); }
.pi-chapter-full { padding: 0.75rem 1rem 2rem 1.25rem; }
.pi-chapter-rail { display: none; flex-direction: column; align-items: center; gap: 0.125rem; padding: 0.75rem 0; background: var(--pi-surface); min-height: 100%; }
.pi-chapter-rail ul { list-style: none; margin: 0.25rem 0 0; padding: 0.5rem 0 0; border-top: 1px solid var(--pi-line); display: flex; flex-direction: column; gap: 0.125rem; }
.pi-chapter-rail li { position: relative; }
.pi-chapter-bar { display: flex; justify-content: flex-end; min-height: 2rem; margin-bottom: 0.25rem; }
.pi-icon-button
{
	width: var(--pi-target); height: var(--pi-target); display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: var(--pi-radius); background: transparent; color: var(--pi-ink-subtle); cursor: pointer; font-size: 1rem;
}
.pi-icon-button:hover { background: var(--pi-chip); color: var(--pi-ink); }
.pi-chapter-bar .pi-icon-button { width: 2rem; height: 2rem; }
.pi-rail-chapter
{
	position: relative; width: var(--pi-target); height: var(--pi-target); display: flex; align-items: center; justify-content: center;
	border-radius: var(--pi-radius); color: var(--pi-ink-subtle); font-size: 1.05rem; text-decoration: none;
}
.pi-rail-chapter:hover, .pi-rail-chapter[aria-expanded="true"] { background: var(--pi-chip); color: var(--pi-ink); }
.pi-rail-chapter[aria-current] { background: var(--pi-tint); color: var(--pi-ink); }
.pi-rail-num { position: absolute; right: 0.2rem; bottom: 0.15rem; font-size: 0.625rem; font-weight: 700; line-height: 1; }
.pi-flyout
{
	position: absolute; left: calc(100% + 0.25rem); top: -0.5rem; z-index: 20; width: 17rem;
	background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius-large);
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.16); padding: 0.75rem;
}
.pi-flyout-title { margin: 0 0 0.375rem; font-weight: 700; }
.pi-flyout-title a { display: flex; gap: 0.5rem; align-items: center; color: var(--pi-ink); text-decoration: none; }
.pi-flyout-title .pi-ic { color: var(--pi-note-rule); }
.pi-flyout ul { list-style: none; margin: 0; padding: 0; }
.pi-flyout li a { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0.5rem; border-radius: 0.375rem; color: var(--pi-ink-muted); text-decoration: none; }
.pi-flyout li a:hover { background: var(--pi-chip); color: var(--pi-ink); }
.pi-flyout small, .pi-chapter-section small { color: var(--pi-ink-subtle); font-size: 0.8125rem; }

.pi-chapter summary { list-style: none; cursor: pointer; }
.pi-chapter summary::-webkit-details-marker { display: none; }
.pi-chapter-switch { position: relative; margin-bottom: 0.75rem; }
.pi-chapter-switch > summary { display: flex; gap: 0.625rem; align-items: center; padding: 0.25rem; border-radius: var(--pi-radius); }
.pi-chapter-switch > summary:hover { background: var(--pi-chip); }
.pi-chapter-badge { width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--pi-radius); background: var(--pi-tint); color: var(--pi-ink); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.pi-chapter-name { display: flex; flex-direction: column; line-height: 1.25; font-size: var(--pi-size-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--pi-ink-subtle); }
.pi-chapter-name b { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--pi-ink); }
.pi-chapter-switch > summary .pi-chev { margin-left: auto; color: var(--pi-ink-subtle); font-size: 0.75rem; }
.pi-chapter-switch[open] > summary .pi-chev { transform: rotate(180deg); }
.pi-chapter-menu
{
	position: absolute; left: 0; right: 0; top: calc(100% + 0.25rem); z-index: 20; list-style: none; margin: 0; padding: 0.375rem;
	background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius-large); box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.16);
}
.pi-chapter-menu a { display: flex; gap: 0.625rem; align-items: center; padding: 0.4rem 0.5rem; border-radius: 0.375rem; color: var(--pi-ink-muted); text-decoration: none; }
.pi-chapter-menu a .pi-ic { color: var(--pi-ink-subtle); }
.pi-chapter-menu a:hover { background: var(--pi-chip); color: var(--pi-ink); }
.pi-chapter-menu a[aria-current] { background: var(--pi-tint); color: var(--pi-ink); font-weight: 700; }
.pi-chapter-section > summary { display: flex; gap: 0.375rem; align-items: center; min-height: 2.25rem; padding: 0.25rem 0.375rem; border-radius: 0.375rem; font-weight: 700; color: var(--pi-ink); }
.pi-chapter-section > summary:hover { background: var(--pi-chip); }
.pi-chapter-section > summary .pi-chev { font-size: 0.7rem; color: var(--pi-ink-subtle); }
.pi-chapter-section[open] > summary .pi-chev { transform: rotate(90deg); }
.pi-chapter-section > summary small { margin-left: auto; font-weight: 400; }
.pi-chapter-section ul { list-style: none; margin: 0.125rem 0 0.5rem 0.75rem; padding: 0 0 0 0.625rem; border-left: 1px solid var(--pi-line); }
.pi-chapter-section li a { display: block; padding: 0.2rem 0.5rem; border-radius: 0.3rem; color: var(--pi-ink-muted); text-decoration: none; line-height: 1.35; }
.pi-chapter-section li a:hover { background: var(--pi-chip); color: var(--pi-ink); }
.pi-chapter-section li a[aria-current] { background: var(--pi-tint); color: var(--pi-ink); font-weight: 700; }
.pi-chapter-intro { margin: 0; }
.pi-chapter-intro a { display: flex; align-items: center; min-height: 2.25rem; padding: 0.25rem 0.375rem 0.25rem 1.375rem; border-radius: 0.375rem; font-weight: 700; color: var(--pi-ink); text-decoration: none; }
.pi-chapter-intro a:hover { background: var(--pi-chip); }
.pi-chapter-intro a[aria-current] { background: var(--pi-tint); }

/* Groups inside a section, and the material switch */
.pi-chapter-group > span { display: block; margin: 0.5rem 0 0.125rem 0.5rem; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--pi-ink-subtle); }
.pi-chapter-group > ul { list-style: none; margin: 0; padding: 0; }
.pi-material-switch { display: flex; gap: 0.25rem; margin: 0 0 0.75rem; }
.pi-material-switch button { flex: 1; min-height: 2rem; padding: 0 0.5rem; border-radius: 0.375rem; border: 1px solid var(--pi-line); background: var(--pi-surface); color: var(--pi-ink-muted); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }
.pi-material-switch button[aria-pressed="true"] { border-color: var(--pi-ink); color: var(--pi-ink); }
.pi-article-head .pi-material-switch { max-width: 20rem; margin-top: 0.25rem; }
html.pi-material-asphalt [data-material="concrete"], html.pi-material-concrete [data-material="asphalt"] { display: none; }
.pi-section-groups { list-style: none; margin: 0; padding: 0; }
.pi-section-group > h2 { margin: 1.75rem 0 0.25rem; font-size: 1.25rem; }
.pi-section-group > .pi-index-list h3 { font-size: 1.125rem; margin: 0 0 0.25rem; }

html.pi-chapter-min .pi-reading { grid-template-columns: 3.5rem minmax(0, 1fr); }
html.pi-chapter-min .pi-chapter { overflow: visible; }
html.pi-chapter-min .pi-chapter-full { display: none; }
html.pi-chapter-min .pi-chapter-rail { display: flex; }

.pi-article { max-width: 72rem; }
.pi-section-intro { margin-bottom: 1.5rem; }
.pi-section-articles > li > p { max-width: var(--pi-measure); }
/* A section page's rows: the article's shield by the title, then its standards as text and its calculators by name. */
.pi-reviewed { display: inline-flex; vertical-align: -0.1em; margin-left: 0.25rem; color: var(--pi-pass); }
.pi-reviewed .pi-ic { width: 1.25rem; height: 1.25rem; fill: none; }
.pi-entry-key { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 0.5rem; color: var(--pi-ink-subtle); font-size: var(--pi-size-small); }
.pi-entry-key .pi-reviewed { margin: 0; }
.pi-index-list .pi-entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 1.25rem; margin: 0.25rem 0 0; color: var(--pi-ink-subtle); font-size: 0.875rem; }
.pi-entry-calc { display: inline-flex; gap: 0.375rem; align-items: center; min-height: 1.75rem; font-weight: 700; text-decoration: none; }
.pi-entry-calc span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.pi-entry-calc .pi-ic { width: 1rem; height: 1rem; flex: none; }
.pi-chapter-overview { font-style: italic; }
.pi-body > * { min-width: 0; }
.pi-body > p, .pi-body > ul, .pi-body > ol, .pi-body > blockquote, .pi-body > h2, .pi-body > h3, .pi-body > h4, .pi-body > dl,
.pi-article-head > p, .pi-closing > p { max-width: var(--pi-measure); }

.pi-body > *, .pi-article > * { margin: 0 0 1.25rem; }
.pi-body p, .pi-body li { max-width: var(--pi-measure); }
.pi-terms { display: grid; gap: 1rem; padding-left: 1.5rem; }
.pi-terms p { margin: 0.25rem 0 0; }
.pi-prose > * { margin: 0 0 1.25rem; }
.pi-prose h2 { margin-top: 1.5rem; }
.pi-body h2 { margin-top: 1.5rem; margin-bottom: 0.75rem; }
.pi-body h3 { margin-top: 1rem; margin-bottom: 0.5rem; }
.pi-body blockquote { margin-left: 0; padding-left: 1.25rem; border-left: 3px solid var(--pi-line); color: var(--pi-ink-muted); }
.pi-body code, .pi-code { font-family: var(--pi-font-mono); font-size: 0.9em; background: var(--pi-chip); border-radius: 0.25rem; padding: 0.05em 0.3em; }
.pi-code { display: block; padding: 1rem; overflow-x: auto; }

.pi-article-head { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.pi-article-head h1 { margin: 0; }
.pi-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; }
.pi-nowrap { white-space: nowrap; }
/* The reviewed badge rides the title's last word and opens the review note (a popover placed under it by pavint-site.js). */
.pi-review-badge { display: inline-flex; vertical-align: 0.12em; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; margin-left: 0.15rem; padding: 0; border: 0; border-radius: 999px; background: var(--pi-pass-tint); color: var(--pi-pass); cursor: pointer; }
.pi-review-badge .pi-ic { width: 1.5rem; height: 1.5rem; fill: none; }
.pi-review-badge:hover { filter: brightness(0.95); }
.pi-review-note { margin: auto; width: min(22rem, calc(100vw - 2rem)); padding: 0.875rem 1rem; border: 1px solid var(--pi-line); border-radius: var(--pi-radius); background: var(--pi-surface); color: var(--pi-ink); box-shadow: 0 0.5rem 1.5rem rgba(20, 22, 27, 0.16); font-size: var(--pi-size-small); line-height: 1.45; }
.js .pi-review-note { position: fixed; inset: auto; margin: 0; }
.pi-review-note p { margin: 0; }
.pi-review-note p + p { margin-top: 0.4rem; }
.pi-review-note b { color: var(--pi-pass); }
/* Page tools: quiet links; their panels sit at the end of the article. */
.pi-page-tools { display: flex; flex-wrap: wrap; gap: 0.125rem 1.125rem; margin: 0; font-size: var(--pi-size-small); }
.pi-page-tools a { display: inline-flex; gap: 0.4rem; align-items: center; min-height: 2rem; color: var(--pi-ink-subtle); text-decoration: none; }
.pi-page-tools a:hover { color: var(--pi-link); text-decoration: underline; }
/* A calculator in the article is the one page tool in the link color: it's the thing to scroll to. */
.pi-page-tools a.pi-head-calc { color: var(--pi-link); font-weight: 700; }
.pi-otp .pi-otp-calc a { font-weight: 700; }
.pi-count { background: var(--pi-chip); color: var(--pi-ink); border-radius: 999px; padding: 0 0.4rem; font-size: 0.75rem; line-height: 1.5; }
/* On this page: one muted line, folded, for articles with more than three sections. */
.pi-otp { font-size: var(--pi-size-small); }
.pi-otp summary { list-style: none; display: inline-flex; gap: 0.4rem; align-items: center; min-height: 2rem; color: var(--pi-ink-subtle); cursor: pointer; }
.pi-otp summary::-webkit-details-marker { display: none; }
.pi-otp summary:hover { color: var(--pi-ink); }
.pi-otp .pi-chev { font-size: 0.7rem; }
.pi-otp[open] .pi-chev, .pi-more[open] > summary .pi-chev { transform: rotate(180deg); }
.pi-otp ol { margin: 0.25rem 0 0; padding-left: 1.4rem; columns: 2; column-gap: 2rem; max-width: var(--pi-measure); color: var(--pi-ink-subtle); }
.pi-otp li { break-inside: avoid; padding: 0.0625rem 0; }
.pi-otp li a { color: var(--pi-ink-muted); text-decoration: none; }
.pi-otp li a:hover { color: var(--pi-link); text-decoration: underline; }
/* The closing panels: Cite, Sources, Report an error, each folded. */
.pi-closing { margin-top: 2.5rem; max-width: 72rem; }
.pi-more { border-top: 1px solid var(--pi-line); }
.pi-more:last-child { border-bottom: 1px solid var(--pi-line); }
.pi-more > summary { list-style: none; display: flex; gap: 0.625rem; align-items: center; min-height: var(--pi-target); cursor: pointer; font-weight: 700; color: var(--pi-ink-muted); font-size: 1rem; }
.pi-more > summary::-webkit-details-marker { display: none; }
.pi-more > summary:hover { color: var(--pi-ink); }
.pi-more > summary .pi-chev { margin-left: auto; font-size: 0.8rem; }
.pi-more > :not(summary) { max-width: var(--pi-measure); }
.pi-more { padding-bottom: 0.25rem; }
/* Teaching this? A row like Cite / Sources / Report that links out, in the note color. */
.pi-more-teach { margin: 0; padding-bottom: 0; }
.pi-more-teach > a { display: flex; gap: 0.625rem; align-items: center; min-height: var(--pi-target); font-weight: 700; font-size: 1rem; color: var(--pi-note-rule); text-decoration: none; }
.pi-more-teach > a:hover { color: var(--pi-link-hover); }
.pi-more-teach > a:hover .pi-more-note { text-decoration: underline; }
.pi-more-teach .pi-more-note { font-weight: 400; color: var(--pi-ink-muted); margin-left: 0.25rem; }
.pi-more-teach .pi-chev { margin-left: auto; font-size: 0.8rem; flex: none; }

.pi-term { text-decoration-style: dotted; text-decoration-thickness: 2px; }
.pi-cite { line-height: 0; font-size: 0.75em; }
.pi-cite a { padding: 0 0.15em; }
.pi-cite + .pi-cite::before { content: ","; }

/* Figures, tables, equations, calculators */
.pi-figure { margin: 0 0 1.5rem; }
.pi-figure-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.pi-figure picture { display: block; }
.pi-figure img { display: block; width: auto; max-width: 100%; height: auto; border-radius: var(--pi-radius); background: var(--pi-surface); border: 1px solid var(--pi-line); }
.pi-figure figcaption { margin-top: 0.625rem; font-size: var(--pi-size-small); line-height: 1.5; color: var(--pi-ink-subtle); }
/* Videos: the thumbnail in a 16:9 frame; the site script swaps in the player on click. */
.pi-video-frame { position: relative; max-width: 40rem; aspect-ratio: 16 / 9; border-radius: var(--pi-radius); overflow: hidden; background: #000; }
.pi-video-play { position: absolute; inset: 0; display: block; color: #e1251b; }
.pi-video-play picture, .pi-video .pi-video-play img { width: 100%; height: 100%; }
.pi-video .pi-video-play img { object-fit: cover; border: 0; border-radius: 0; max-width: none; }
.pi-video-button { position: absolute; left: 50%; top: 50%; width: 4.25rem; height: 3rem; transform: translate(-50%, -50%); fill: currentColor; opacity: 0.9; }
.pi-video-button path { fill: #fff; }
.pi-video-play:hover .pi-video-button, .pi-video-play:focus-visible .pi-video-button { opacity: 1; }
.pi-video-play:focus-visible { outline: 3px solid var(--pi-link); outline-offset: -3px; }
.pi-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pi-video-youtube { margin-left: 0.375rem; white-space: nowrap; }
.pi-figure figcaption b { color: var(--pi-ink); }
.pi-credit { display: block; margin-top: 0.25rem; }

.pi-table-wrap { overflow-x: auto; background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius); }
.pi-table-wrap table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; line-height: 1.4; }
.pi-table-wrap caption { text-align: left; padding: 0.75rem 1rem; font-weight: 700; caption-side: top; }
.pi-table-wrap th, .pi-table-wrap td { padding: 0.625rem 1rem; border-top: 1px solid var(--pi-line); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.pi-table-wrap tr.pi-row-group th { background: var(--pi-tint); font-weight: 700; font-size: var(--pi-size-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; padding-top: 0.375rem; padding-bottom: 0.375rem; }
.pi-table-wrap tfoot td { font-size: var(--pi-size-small); color: var(--pi-ink-subtle); }
.pi-table-wrap caption .pi-ic { color: var(--pi-ink-subtle); margin-right: 0.4rem; }
.pi-rating { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.pi-rating::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; flex: none; }
.pi-rating-good { color: var(--pi-pass); }
.pi-rating-good::before { background: currentColor; }
.pi-rating-fair { color: var(--pi-ink-muted); }
.pi-rating-fair::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.pi-rating-poor { color: var(--pi-fail); }
.pi-table-wrap thead th { background: var(--pi-ground); }
.pi-table-wrap tbody th { font-weight: 400; }
.pi-table-wrap td { font-variant-numeric: tabular-nums; }
.pi-units { font-weight: 400; color: var(--pi-ink-subtle); }

.pi-equation { background: var(--pi-tint); border-radius: var(--pi-radius); padding: 0.75rem 1rem; overflow-x: auto; font-size: 1.1rem; }
.pi-equation .katex-display { margin: 0.25rem 0; }
.pi-math .katex { font-size: 1.05em; }

.pi-calculator { background: var(--pi-ground); border: 1px solid var(--pi-line); border-radius: var(--pi-radius-large); padding: 1rem 1.25rem; }
.pi-calculator-title { margin: 0 0 0.5rem; font-weight: 700; }
.pi-calculator-stub { margin: 0; font-size: var(--pi-size-small); color: var(--pi-ink-subtle); border: 2px dashed var(--pi-control-border); border-radius: var(--pi-radius); padding: 0.75rem; }

.pi-missing { background: var(--pi-tint); color: var(--pi-fail); font-weight: 700; padding: 0 0.25rem; }

/* Sources, citation, error report */
.pi-sources { padding-left: 1.5rem; font-size: 1rem; line-height: 1.55; }
.pi-sources li { margin-bottom: 0.5rem; }
.pi-sources li:target { background: var(--pi-tint); }
.pi-backlink { display: inline-flex; min-width: 1.5rem; min-height: 1.5rem; justify-content: center; align-items: center; }

.pi-panel { background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius-large); padding: 1.25rem 1.5rem; }
.pi-panel > h2 { font-size: 1.375rem; }
.pi-cite-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.pi-tabs { display: inline-flex; gap: 0.25rem; padding: 0.2rem; background: var(--pi-ground); border-radius: 999px; }
.pi-tabs button
{
	font: inherit; font-size: 0.875rem; font-weight: 700; min-height: 2rem; min-width: 3.5rem; padding: 0 0.875rem;
	border: 0; border-radius: 999px; background: transparent; color: var(--pi-ink); cursor: pointer;
}
.pi-tabs button[aria-selected="true"] { background: var(--pi-charcoal); color: var(--pi-on-charcoal); }
.pi-cite-style h3 { font-size: 1rem; margin: 0.75rem 0 0.25rem; }
.pi-cite-text { margin: 0; background: var(--pi-ground); border-radius: var(--pi-radius); padding: 0.875rem 1rem; font-size: 1rem; overflow-wrap: anywhere; }
pre.pi-cite-text { font-family: var(--pi-font-mono); font-size: 0.875rem; white-space: pre-wrap; }
.pi-cite-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.75rem; font-size: var(--pi-size-small); color: var(--pi-ink-subtle); }
.js .pi-cite-style h3 { display: none; }

.pi-report summary { cursor: pointer; font-weight: 700; min-height: var(--pi-target); display: flex; align-items: center; color: var(--pi-link); text-decoration: underline; }
.pi-report form { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.75rem; max-width: 34rem; }
.pi-report p { margin: 0; font-size: var(--pi-size-small); color: var(--pi-ink-subtle); }

.pi-flush { margin-top: 0 !important; margin-bottom: 0; }
#register-course { margin-top: 2.5rem; }
.pi-form-fields { display: flex; flex-direction: column; gap: 1rem; max-width: 34rem; }

/* Index pages */
.pi-index-list { list-style: none; margin: 0; padding: 0; }
.pi-index-list > li { padding: 1rem 0; border-bottom: 1px solid var(--pi-line); }
.pi-index-list h2, .pi-index-list h3 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.pi-index-list p { margin: 0.25rem 0 0.5rem; color: var(--pi-ink-muted); font-size: 1rem; }
/* Glossary terms fill the page width in columns; each definition keeps a readable line length. */
.pi-term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); column-gap: 2.5rem; }
.pi-glossary section > h2 { margin-top: 2rem; }
.pi-sections { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; }
.pi-sections > li { border-top: 3px solid var(--pi-ink); padding-top: 0.75rem; }
.pi-sections h2 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.pi-sections > li > p { margin: 0; font-size: 1rem; color: var(--pi-ink-muted); }
.pi-sections ul { list-style: none; margin: 0; padding: 0; font-size: 1rem; }
.pi-sections ul a { display: inline-flex; min-height: 1.75rem; align-items: center; }

.pi-az { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pi-az a { display: inline-flex; min-width: 2rem; min-height: 2rem; align-items: center; justify-content: center; }

.pi-standards table { min-width: 34rem; }
.pi-standards tbody th { white-space: nowrap; }

.pi-page-head { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
.pi-plain { max-width: 80rem; margin: 0 auto; padding: 2.5rem 1.5rem 0; }
.pi-plain .pi-text { max-width: var(--pi-measure); }

/* Educators */
.pi-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.pi-three .pi-card h2, .pi-three .pi-card h3 { font-size: 1.1875rem; margin-bottom: 0.4rem; }
.pi-three .pi-card p { margin: 0; font-size: 1rem; color: var(--pi-ink-muted); }
.pi-three .pi-card ul { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 1rem; }
.pi-three .pi-card li { padding: 0.15rem 0; }
.pi-callout { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; background: var(--pi-tint); border-radius: var(--pi-radius-large); padding: 1rem 1.25rem; margin-top: 1.25rem; }
/* display: flex would otherwise override the hidden attribute. */
.pi-callout[hidden] { display: none; }
.pi-callout p { margin: 0; }
.pi-standards-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 2.5rem; align-items: start; }
.pi-standards-grid ol { padding-left: 1.25rem; }
.pi-standards-grid li { margin-bottom: 0.75rem; }
.pi-board { list-style: none; margin: 0.5rem 0 1rem; padding: 0; font-size: 1rem; }
.pi-board li { padding: 0.5rem 0; border-bottom: 1px solid var(--pi-line); display: flex; flex-direction: column; }
.pi-board span { color: var(--pi-ink-subtle); font-size: var(--pi-size-small); }

/* Directory */
.pi-filters { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; margin-top: 1.5rem; }
.pi-check { display: inline-flex; gap: 0.5rem; align-items: center; min-height: var(--pi-target); font-size: 1rem; }
.pi-directory { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; margin-top: 2rem; }
.pi-listing { display: flex; justify-content: space-between; gap: 1.25rem; }
.pi-listing h3 { font-size: 1.25rem; }
.pi-listing p { margin: 0.35rem 0; font-size: 1rem; color: var(--pi-ink-muted); }
.pi-listing-actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; flex: none; }
.pi-verified { display: inline-flex; gap: 0.3rem; align-items: center; font-size: 0.875rem; font-weight: 700; color: var(--pi-pass); }
.pi-listings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.pi-listing-fact { font-size: var(--pi-size-small) !important; color: var(--pi-ink-subtle) !important; }
.pi-directory-note { margin: 0; color: var(--pi-ink-muted); font-size: 1rem; }
.pi-records { margin-bottom: 1.75rem; }
.pi-records h3 { font-size: 1.1875rem; margin-bottom: 0.5rem; }
.pi-records h3 span { font-weight: 400; color: var(--pi-ink-subtle); font-size: var(--pi-size-small); margin-left: 0.4rem; }
/* Thousands of rows scroll inside the frame, under a header that stays put. */
.pi-records .pi-table-wrap { max-height: min(36rem, 70vh); overflow: auto; }
.pi-records thead th { position: sticky; top: 0; z-index: 1; }
.pi-records .pi-records-license,
.pi-records .pi-records-licenses td:nth-child(3) { white-space: nowrap; }
.pi-records-source { margin: 0.5rem 0 0; font-size: var(--pi-size-small); color: var(--pi-ink-subtle); }
.pi-records [data-records-group] th { font-size: var(--pi-size-small); font-weight: 600; color: var(--pi-ink-muted); background: var(--pi-surface); border-top: 2px solid var(--pi-line); }
.pi-records-more { margin: 0.75rem 0 0; }
@media (max-width: 40rem)
{
	.pi-records .pi-table-wrap table { font-size: 0.875rem; }
	.pi-records .pi-table-wrap th, .pi-records .pi-table-wrap td { padding: 0.5rem 0.5rem; }
	.pi-records .pi-table-wrap th:first-child, .pi-records .pi-table-wrap td:first-child { padding-left: 0.75rem; }
}
.pi-aside-stack { display: flex; flex-direction: column; gap: 1rem; font-size: 1rem; }
.pi-aside-stack .pi-card p { margin: 0.4rem 0; color: var(--pi-ink-muted); }
.pi-aside-dark { background: var(--pi-charcoal); color: var(--pi-on-charcoal); border-color: var(--pi-charcoal); }
.pi-aside-dark p { color: var(--pi-on-charcoal-muted) !important; }
.pi-aside-dark .pi-button { background: transparent; border-color: var(--pi-on-charcoal); }
.pi-aside-dark a:not(.pi-button) { color: var(--pi-on-charcoal); }

/* Search */
.pi-results { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: var(--pi-measure); }
.pi-results li { padding: 0.75rem 0; border-bottom: 1px solid var(--pi-line); }
.pi-results p { margin: 0.2rem 0 0; font-size: 1rem; color: var(--pi-ink-muted); }
.pi-results .pi-eyebrow { margin-top: 0.15rem; }

/* ---------- Narrower screens ---------- */

/* Below 860 px the chapter list minimizes to the icons on its own. */
@media (max-width: 54rem)
{
	.pi-reading, html.pi-chapter-min .pi-reading { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.25rem; }
	.pi-chapter { overflow: visible; }
	.pi-chapter-full { display: none; }
	.pi-chapter-rail { display: flex; }
	.pi-chapter-rail [data-chapter-toggle] { display: none; }
}

@media (max-width: 62rem)
{
	.pi-home-lower, .pi-standards-grid, .pi-directory { grid-template-columns: minmax(0, 1fr); }
	.pi-contents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pi-three { grid-template-columns: minmax(0, 1fr); }
	.pi-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Between phone and wide desktop the words need the room: the icons step aside (they return in the Menu). */
@media (min-width: 48.01rem) and (max-width: 72rem)
{
	.pi-nav a .pi-ic { display: none; }
	.pi-header .pi-acct-first { display: none; }
	.pi-header .pi-acct-button { padding-right: 0.3rem; }
	.pi-header-inner { gap: 1.75rem; }
	.pi-nav ul { column-gap: 1.25rem; }
}

/* Phone layout (E2-Phone, R3-Phone): one-line logo, menu button, stacked calculators. */
@media (max-width: 48rem)
{
	html { --pi-header-height: 3.75rem; }
	body { font-size: 1.0625rem; }
	/* An open Menu taller than a short screen scrolls inside the bar. */
	.pi-header:has(.pi-nav.pi-open) { max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
	/* One 60 px row: the logo, then the account and Menu, both 40 px; the Menu opens below as 52 px rows. */
	/* A grid, so a narrow phone squeezes the name onto two lines before Menu would drop a row. */
	.pi-header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; padding: 0.625rem 1rem; min-height: 3.75rem; gap: 0 0.5rem; }
	.pi-logo { min-width: 0; min-height: 2.5rem; gap: 0.5rem; }
	.pi-logo svg { width: 1.875rem; height: 1.875rem; }
	.pi-logo-name { display: block; font-size: 1rem; line-height: 1.15; }
	.js .pi-menu-button { display: inline-flex; align-items: center; padding: 0 0.75rem; }
	.pi-nav { grid-column: 1 / -1; width: 100%; }
	.js .pi-nav { display: none; }
	.js .pi-nav.pi-open { display: block; }
	.pi-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 0.5rem; }
	.pi-nav a { width: 100%; box-sizing: border-box; min-height: 3.25rem; gap: 0.875rem; padding: 0 0.625rem; font-size: 1.125rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
	.pi-nav a .pi-ic { width: 1.125rem; height: 1.125rem; }
	.pi-nav a:hover { box-shadow: none; background: rgba(255, 255, 255, 0.06); }
	.pi-nav a[aria-current] { background: rgba(255, 255, 255, 0.10); box-shadow: inset 3px 0 0 var(--pi-logo-base-on-dark); }
	.pi-header-account { margin-left: 0; gap: 0; }
	.pi-header-account::before { display: none; }
	.pi-signin { width: 2.5rem; padding: 0; }
	.pi-signin-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.pi-header .pi-acct-button { width: 2.5rem; padding: 0; justify-content: center; }
	.pi-header .pi-acct-first { display: none; }
	/* The account menu drops down full width under the bar. */
	.pi-header .pi-acct { position: static; }
	.pi-header .pi-acct-menu { left: 0.5rem; right: 0.5rem; top: calc(100% - 0.25rem); width: auto; }
	.pi-header .pi-acct-menu a[role="menuitem"], .pi-header .pi-acct-out { min-height: 3rem; font-size: 1.0625rem; }
	.pi-wrap, .pi-plain { padding-left: 1rem; padding-right: 1rem; }
	/* Phones: the chapter list follows the article, open, without the rail. */
	.pi-reading, html.pi-chapter-min .pi-reading { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "chapter"; padding: 0 1rem; gap: 1.5rem; }
	.pi-reading > main { grid-area: main; }
	.pi-chapter { grid-area: chapter; }
	.pi-reading > main { padding-top: 1.25rem; }
	.pi-chapter { position: static; max-height: none; overflow: visible; border-right: 0; border-top: 1px solid var(--pi-line); }
	.pi-chapter-full, html.pi-chapter-min .pi-chapter-full { display: block; padding: 1rem 0 2rem; }
	.pi-chapter-rail, html.pi-chapter-min .pi-chapter-rail { display: none; }
	.pi-chapter-bar { display: none; }
	.pi-otp ol { columns: 1; }
	/* Phones: one height for every hero; the trail and long intros give way to keep it. */
	.pi-photo-hero { --pi-hero-height: 26rem; }
	.pi-photo-hero::before { background: rgba(14, 16, 20, 0.7); }
	.pi-photo-hero .pi-breadcrumb { display: none; }
	.pi-photo-hero .pi-lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 1.0625rem; }
	.pi-photo-hero h1 { font-size: 1.875rem; }
	.pi-photo-hero .pi-search { flex-direction: row; }
	.pi-photo-hero-text { padding-bottom: 1.5rem; }
	.pi-contents, .pi-filters { grid-template-columns: minmax(0, 1fr); }
	.pi-facts { flex-direction: column; }
	.pi-search { flex-direction: column; }
	.pi-listing { flex-direction: column; }
	.pi-listing-actions { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
	.pi-panel { padding: 1rem; }
	.pi-equation { font-size: 0.95rem; padding: 0.5rem 0.75rem; }
}

@media (prefers-reduced-motion: no-preference)
{
	html { scroll-behavior: smooth; }
}

@media print
{
	.pi-header, .pi-footer, .pi-chapter, .pi-report, .pi-cite-actions, .pi-tabs, .pi-skip, .pi-page-tools, .pi-otp { display: none !important; }
	body { background: #ffffff; color: #000000; }
	.pi-reading { display: block; }
}

/* ===== Equations (track/equations): look B =====
   Each display equation sits in a quiet panel with a rule at the left (equations are not numbered).
   A metric / US customary pair shares one panel, side by side, stacking on a phone.
   "where" definitions follow under the panel. These rules supersede the earlier .pi-equation ones. */
.pi-equation
{
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem;
	background: var(--pi-surface); border-left: 3px solid var(--pi-note-rule); border-radius: 0 var(--pi-radius) var(--pi-radius) 0;
	padding: 0.75rem 1rem; margin: 0.5rem 0 1.25rem; overflow: visible; font-size: 1.1rem;
}
.pi-equation-math { min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 0.15rem 0; }
.pi-equation .katex-display { margin: 0; text-align: left; }
.pi-equation .katex-display > .katex { text-align: left; }
/* A pair wraps by content width: side by side when both fit, stacked when they don't. */
.pi-equation-pair { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 2.5rem; }
.pi-equation-pair .pi-equation-math { flex: 0 1 auto; max-width: 100%; }
.pi-equation-label
{
	display: block; margin-bottom: 0.15rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--pi-ink-subtle);
}
.pi-equation-where { margin: -0.5rem 0 1.25rem; max-width: var(--pi-measure); }
.pi-equation-where-label { margin: 0 0 0.25rem; }
.pi-equation-where ul { margin: 0; padding-left: 1.5rem; display: grid; gap: 0.25rem; }
.pi-table-wrap .pi-math { white-space: nowrap; }
@media (max-width: 40rem)
{
	.pi-equation { font-size: 0.95rem; padding: 0.6rem 0.75rem; gap: 0.5rem 1rem; }
}
@media print
{
	.pi-equation { break-inside: avoid; }
}
/* ===== end Equations ===== */