@charset "UTF-8";
/*
 * PreProduct Docs. Single doc follows the "Docs — Doc page (final)" frame in
 * marketing-site.pen; the docs home and term pages are interim until their own
 * redesign. Everything is scoped to .ppd / body.ppd-view.
 *
 * The theme sets html { font-size: 10px }, so 1rem = 10px here (1.6rem = 16px).
 * The theme also styles bare h3/h4 globally (37.5px / 25px), so content headings
 * get an explicit scale below.
 */

.ppd {
	/* The theme's floating nav is fixed 40px–95px from the top once scrolled;
	   sticky columns and anchor targets sit clear of it. */
	--ppd-sticky-top: 12.8rem;
	--ppd-title-size: clamp(3.6rem, 4.4vw, 5.2rem);
	--ppd-nav-size: 1.25rem;
	/* Breadcrumbs (24.8px line + 24px gap) plus the h1's first baseline (0.923
	   of its size at line-height 1.1): where the side columns' headings sit so
	   their baselines line up with the title's. */
	--ppd-title-baseline: calc(4.92rem + var(--ppd-title-size) * 0.923);
	--ppd-ink: #130041;
	--ppd-primary: #29165e;
	--ppd-primary-soft: #5e4c92;
	--ppd-lilac: #e7e3ff;
	--ppd-sun: #ffe256;
	--ppd-text: #3d464d;
	--ppd-text-card: #484550;
	--ppd-subtle: #667280;
	--ppd-muted: #75797c;
	--ppd-line: #e0e0e5;
	--ppd-line-soft: #f1f2f3;
	--ppd-tint: #f7f8fb;
	--ppd-surface: #fff;
	--ppd-radius: 10px;
	--ppd-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	position: relative;
	z-index: 1;
	color: var(--ppd-text);
	/* The theme's #masthead is position:absolute (80px); clear it like BetterDocs did. */
	padding-top: calc(80px + 4rem);

	padding-bottom: 8rem;
}

.ppd a {
	color: var(--ppd-primary);
}

.ppd a:hover {
	color: var(--ppd-ink);
}

/* The theme's `li a:hover` sets weight 500, which made the 600-weight pills
   change width under the pointer. Hover keeps the resting weight. */
.ppd li a.ppd-pill:hover {
	font-weight: 600;
}

/* Page ground: white, with the brand glow (the theme's green-to-purple pair)
   held to the right third of the viewport. ------------------------------- */

body.ppd-view {
	position: relative;
	background: #fff;
}

body.ppd-view::before {
	content: none;
}

@media (min-width: 1024px) {
body.ppd-view::before {
	content: "";
	/* Fixed, so the glow stays in the corner as the page scrolls. Behind all
	   page content (z-index -1), so the dark footer covers it. */
	position: fixed;
	top: 0;
	right: 0;
	z-index: -1;
	width: 33.333vw;
	height: 900px;
	pointer-events: none;
	background: radial-gradient(
		33.333vw 667px at 100% 211px,
		rgba(147, 95, 172, 0.28) 0%,
		rgba(184, 116, 217, 0.19) 30%,
		rgba(60, 154, 137, 0.15) 62%,
		rgba(60, 154, 137, 0) 100%
	);
}
}

/* Breadcrumbs ------------------------------------------------------------- */

.ppd-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.8rem;
	margin: 0 0 2.4rem;
	padding: 0;
	list-style: none;
	font-size: 1.4rem;
	color: var(--ppd-muted);
}

.ppd-breadcrumbs__item + .ppd-breadcrumbs__item::before {
	content: "\203A";
	margin-right: 0.8rem;
	color: var(--ppd-muted);
}

.ppd-breadcrumbs a {
	color: var(--ppd-muted);
	text-decoration: none;
}

.ppd-breadcrumbs a:hover {
	color: var(--ppd-ink);
	text-decoration: underline;
}

.ppd-breadcrumbs [aria-current="page"] {
	color: var(--ppd-primary);
	font-weight: 600;
}

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

/* Doc links on a hairline rule: the home topics and the doc sidebar. */
.ppd-doc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ppd-doc-list__item {
	margin: 0;
}

.ppd-doc-list__link {
	display: block;
	padding: 0.6rem 0 0.6rem 1.6rem;
	border-left: 1px solid var(--ppd-line);
	color: var(--ppd-text) !important;
	font-size: 1.4rem;
	line-height: 1.4;
	text-decoration: none;
}

.ppd-doc-list__link:hover {
	color: var(--ppd-primary) !important;
	text-decoration: underline;
}

/* Name + count rows on the same rule: topics, tags. */
.ppd .ppd-rule-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ppd .ppd-rule-list li {
	margin: 0;
}

.ppd .ppd-rule-list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.2rem;
	padding: 0.7rem 0 0.7rem 1.6rem;
	border-left: 1px solid var(--ppd-line);
	color: var(--ppd-subtle);
	font-size: 1.4rem;
	line-height: 1.4;
	text-decoration: none;
}

.ppd .ppd-rule-list--small a {
	padding: 0.5rem 0 0.5rem 1.2rem;
}

.ppd .ppd-rule-list a:hover {
	color: var(--ppd-ink);
}

.ppd .ppd-rule-list a[aria-current] {
	padding-left: 1.5rem;
	border-left: 2px solid var(--ppd-primary);
	color: var(--ppd-primary);
	font-weight: 700;
}

.ppd .ppd-rule-list--small a[aria-current] {
	padding-left: 1.1rem;
}

.ppd .ppd-rule-list__count {
	color: var(--ppd-muted);
	font-size: 1.2rem;
	font-weight: 400;
}

.ppd-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.4rem;
	font-weight: 700;
	text-decoration: none;
}

.ppd-arrow-link::after {
	content: "\2192";
}

.ppd-arrow-link--back::after {
	content: none;
}

.ppd-arrow-link--back::before {
	content: "\2190";
}

.ppd-pill {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border: 1px solid var(--ppd-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.8);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.ppd-pill:hover {
	border-color: var(--ppd-primary-soft);
}

.ppd .ppd-button {
	/* The site's shared pill (themes/preproduct/assets/css/buttons.css). */
	display: inline-flex;
	align-items: center;
	padding: 1.1rem 1.8rem;
	border: 1px solid var(--ppd-primary);
	border-radius: 999px;
	background: transparent;
	color: var(--ppd-primary);
	font: inherit;
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.ppd .ppd-button--solid {
	background: var(--ppd-primary);
	color: #fff;
}

.ppd .ppd-button:hover {
	border-color: var(--ppd-ink);
	color: var(--ppd-ink);
}

.ppd .ppd-button--solid:hover {
	background: var(--ppd-ink);
	color: #fff;
}

/* Search box: opens DocSearch. */
.ppd .ppd-search {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	width: 100%;
	max-width: 68rem;
	min-height: 6rem;
	/* Even padding both ends keeps the square keys clear of the round end. */
	padding: 0 2.4rem 0 2.2rem;
	border: 1px solid var(--ppd-line);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(19, 0, 65, 0.06);
	color: var(--ppd-muted);
	font: inherit;
	text-align: left;
	cursor: text;
}

.ppd .ppd-search:hover,
.ppd .ppd-search:focus-visible {
	border-color: var(--ppd-primary-soft);
	box-shadow: 0 0 0 3px rgba(94, 76, 146, 0.1), 0 8px 24px rgba(19, 0, 65, 0.06);
}

.ppd-search__icon {
	flex: 0 0 auto;
}

.ppd-search__placeholder {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: 1.7rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ppd-search__keys {
	display: flex;
	gap: 0.4rem;
}

.ppd .ppd-search__keys kbd {
	padding: 0.3rem 0.8rem;
	background: #fff;
	box-shadow: none;
	border: 1px solid var(--ppd-line);
	border-radius: 6px;
	color: var(--ppd-muted);
	font: inherit;
	font-size: 1.2rem;
	font-weight: 600;
}

@media (max-width: 640px) {
	.ppd-search__keys {
		display: none;
	}
}

/* "Still stuck?" box. */
.ppd-help {
	padding: 2.4rem;
	border-radius: 12px;
	background: var(--ppd-tint);
}

.ppd .ppd-help__title {
	margin: 0 0 1.2rem;
	color: var(--ppd-ink);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.25;
}

.ppd .ppd-help__text {
	margin: 0 0 2rem;
	color: var(--ppd-subtle);
	font-size: 1.4rem;
	line-height: 1.5;
}

.ppd-help__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

/* Docs home --------------------------------------------------------------- */

/* Narrower than the doc pages: four topic columns read better tighter. */
@media (min-width: 1280px) {
	.ppd-home.site_container {
		max-width: 1280px;
	}
}

.ppd-home__hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2.4rem;
	margin-bottom: 7.2rem;
}

.ppd-home__hero .ppd-doc__title {
	margin: 0;
	font-size: clamp(4rem, 5vw, 6rem);
}

.ppd .ppd-home__intro {
	max-width: 64rem;
	margin: 0;
	color: var(--ppd-subtle);
	font-size: 2rem;
	line-height: 1.5;
}

.ppd-home__popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem;
}

.ppd-home__popular ul {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ppd-home__popular li {
	margin: 0;
}

.ppd-home__popular-label {
	margin-right: 0.4rem;
	color: var(--ppd-muted);
	font-size: 1.3rem;
	font-weight: 600;
}

.ppd-home__browse-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 4rem;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--ppd-line);
}

.ppd .ppd-home__browse-head .ppd-toc__title {
	margin: 0;
}

.ppd-home__browse-count {
	color: var(--ppd-muted);
	font-size: 1.3rem;
}

.ppd-topic-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4.8rem;
}

@media (min-width: 640px) {
	.ppd-topic-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ppd-topic-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: 5.6rem;
	}
}

.ppd-topic {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.ppd .ppd-topic__title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.2rem;
	margin: 0;
	/* A hairline under the name and count separates it from the topic. */
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--ppd-line);
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.ppd-topic__title a {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	color: var(--ppd-ink) !important;
	text-decoration: none;
}

.ppd-topic__title .ppd-icon {
	flex: 0 0 auto;
	width: 2.2rem;
	height: 2.2rem;
	color: var(--ppd-primary-soft);
}

.ppd-topic__title a:hover {
	color: var(--ppd-primary) !important;
}

.ppd-topic__count {
	color: var(--ppd-primary-soft);
	font-size: 1.2rem;
	font-weight: 700;
}

.ppd .ppd-topic__blurb {
	margin: 0;
	color: var(--ppd-subtle);
	font-size: 1.4rem;
	line-height: 1.5;
}

.ppd-topic .ppd-arrow-link {
	margin-top: auto;
}

/* Topic and tag pages ----------------------------------------------------- */

/* Below the three-column width the tags follow the list rather than push it
   down the page. */
@media (max-width: 1279px) {
	.ppd-term__body {
		display: flex;
		flex-direction: column;
	}

	.ppd-term__body > .ppd-tags {
		order: 1;
		margin: 4.8rem 0 0;
	}
}

/* Topic icon to the left of the topic's one-line description. */
.ppd .ppd-term__lead {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
}

.ppd-term__lead .ppd-icon {
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	/* Centred on the first line (1.9rem type at line-height 1.5). */
	margin-top: 0.23rem;
	color: var(--ppd-ink);
}

.ppd .ppd-term__count {
	margin: 0;
	color: var(--ppd-primary);
	font-size: 1.3rem;
	font-weight: 500;
}

.ppd-topics__title {
	margin: 0 0 1.2rem;
	color: var(--ppd-ink);
	font-size: 1.5rem;
	font-weight: 800;
}

.ppd-topics .ppd-rule-list {
	margin-bottom: 2.4rem;
}

.ppd-rows {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ppd-line);
	list-style: none;
}

.ppd-row {
	margin: 0;
	border-top: 1px solid var(--ppd-line);
}

.ppd-row__link {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 2rem 0;
	text-decoration: none;
}

.ppd-row__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 2rem;
}

.ppd-row__title {
	color: var(--ppd-ink);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.35;
}

.ppd-row__link:hover .ppd-row__title {
	color: var(--ppd-primary);
}

.ppd-row__meta {
	flex: 0 0 auto;
	color: var(--ppd-muted);
	font-size: 1.3rem;
}

.ppd-row__summary {
	max-width: 64rem;
	color: var(--ppd-subtle);
	font-size: 1.5rem;
	line-height: 1.5;
}

.ppd .ppd-rows__more {
	margin-top: 2.4rem;
}

/* Single doc layout -------------------------------------------------------- */

.ppd-single,
.ppd-term {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4.8rem;
}

@media (min-width: 1024px) {
	.ppd-home {
		padding-top: calc(80px + 7.2rem);
	}

	.ppd-single,
	.ppd-term {
		/* The floating nav ends 95px down; the breadcrumbs, nav and TOC all
		   start on one line well clear of it. */
		padding-top: calc(80px + 7.2rem);
		grid-template-columns: 260px minmax(0, 1fr);
		grid-template-areas: "nav main";
		column-gap: 5.6rem;
	}

	.ppd-single__main,
	.ppd-term__main {
		grid-area: main;
	}

	.ppd-sidebar {
		/* Its first heading (baseline 19px in) lines up with the title's first
		   line. */
		margin-top: calc(var(--ppd-title-baseline) - 1.9rem);
		grid-area: nav;
	}

	/* The "Topics" label sits a touch higher in its box. */
	.ppd-topics.ppd-sidebar {
		margin-top: calc(var(--ppd-title-baseline) - 1.75rem);
	}

	.ppd-sidebar {
		align-self: start;
		position: sticky;
		top: var(--ppd-sticky-top);
		max-height: calc(100vh - var(--ppd-sticky-top) - 2.4rem);
		overflow-y: auto;
		/* Room for the scrollbar without clipping the list's rule. */
		padding-right: 0.4rem;
	}
}

@media (min-width: 1280px) {
	.ppd-single,
	.ppd-term {
		column-gap: 7.2rem;
	}

	.ppd-term__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 220px;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"header toc"
			"rows   toc";
		column-gap: 7.2rem;
		align-items: start;
	}

	.ppd-term__body > .ppd-doc__header {
		grid-area: header;
	}

	.ppd-term__body > .ppd-rows-wrap {
		grid-area: rows;
	}

	.ppd-term__body > .ppd-toc {
		grid-area: toc;
		position: sticky;
		top: var(--ppd-sticky-top);
		margin: 0;
	}

	.ppd-doc {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 220px;
		column-gap: 7.2rem;
		/* The TOC spans all three rows; the 1fr row soaks up its extra height so
		   a tall TOC can't push the article down. */
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"header  toc"
			"content toc"
			"footer  toc";
		align-items: start;
	}

	.ppd-doc__header {
		grid-area: header;
	}

	.ppd-doc__content {
		grid-area: content;
	}

	.ppd-doc__footer {
		grid-area: footer;
	}

	/* Right rail: the TOC, then "Still stuck?", sticky together. Its label
	   (baseline 14px into the rail) lines up with the title's first line. */
	.ppd-doc > .ppd-rail,
	.ppd-term__body > .ppd-toc {
		margin-top: calc(var(--ppd-title-baseline) - 1.4rem);
	}

	.ppd-doc > .ppd-rail {
		grid-area: toc;
		align-self: start;
		position: sticky;
		top: var(--ppd-sticky-top);
		max-height: calc(100vh - var(--ppd-sticky-top) - 2.4rem);
		overflow-y: auto;
	}

	.ppd-rail > .ppd-toc {
		margin: 0;
	}

	/* The rail carries "Still stuck?" here, so the footer doesn't repeat it. */
	.ppd-doc__footer .ppd-doc__help {
		display: none;
	}
}

/* Below the three-column width the rail is just the TOC above the article;
   "Still stuck?" stays in the doc footer. */
@media (max-width: 1279px) {
	.ppd-help--rail {
		display: none;
	}
}

.ppd-help--rail {
	margin-top: 3.2rem;
	padding: 2rem;
}

.ppd .ppd-help--rail .ppd-help__title {
	margin-bottom: 0.8rem;
	font-size: 1.6rem;
}

.ppd .ppd-help--rail .ppd-help__text {
	margin-bottom: 1.6rem;
	font-size: 1.3rem;
}


/* Doc header --------------------------------------------------------------- */

.ppd-doc__header {
	margin-bottom: 4rem;
	scroll-margin-top: var(--ppd-sticky-top);
}

/* A hairline under the reading time / AI actions closes the header off from
   the body. Topic and tag pages get theirs from the first row's rule. */
.ppd-doc > .ppd-doc__header {
	padding-bottom: 3.2rem;
	border-bottom: 1px solid var(--ppd-line);
}

.ppd-doc__title {
	margin: 0 0 2rem;
	color: var(--ppd-ink);
	font-size: var(--ppd-title-size);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

/* Highlighter bar under the title, the site's marker treatment at its quietest. */
.ppd-doc__title-mark {
	padding: 0 0.2rem;
	background: linear-gradient(
		to bottom,
		transparent 72%,
		rgba(255, 226, 86, 0.7) 72%,
		rgba(255, 226, 86, 0.7) 90%,
		transparent 90%
	);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* With JS the bar sits under the title's last line only, however many lines
   it wraps to; docs.js measures that line into --ppd-mark-*. */
.ppd-doc__title--marked {
	position: relative;
}

.ppd-doc__title--marked .ppd-doc__title-mark {
	position: relative;
	z-index: 1;
	background: none;
}

.ppd-doc__title--marked::before {
	content: "";
	position: absolute;
	left: var(--ppd-mark-left);
	top: var(--ppd-mark-top);
	width: var(--ppd-mark-width);
	height: var(--ppd-mark-height);
	background: rgba(255, 226, 86, 0.7);
}

.ppd-doc__lead {
	max-width: 72rem;
	margin: 0 0 2rem;
	color: var(--ppd-subtle);
	font-size: 1.9rem;
	line-height: 1.5;
}

.ppd-doc__lead p {
	margin: 0 0 1rem;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.ppd-doc__lead p:last-child {
	margin-bottom: 0;
}

.ppd-doc__lead a {
	color: var(--ppd-primary);
}

.ppd-doc__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 2rem;
	font-size: 1.3rem;
}

.ppd-doc__reading-time {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ppd-primary);
	font-weight: 500;
}

/* Clock glyph in CSS. */
.ppd-doc__reading-time::before {
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	border: 1.5px solid var(--ppd-primary-soft);
	border-radius: 50%;
	box-sizing: border-box;
	background:
		linear-gradient(var(--ppd-primary-soft), var(--ppd-primary-soft)) 50% 30% / 1.5px 40% no-repeat,
		linear-gradient(var(--ppd-primary-soft), var(--ppd-primary-soft)) 62% 50% / 28% 1.5px no-repeat;
}

/* The markdown-endpoint actions sit in the meta row as plain links, not pills. */
.ppd-doc__meta .ppmd-actions {
	gap: 2rem;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	font-size: 1.3rem;
	color: var(--ppd-primary);
}

.ppd-doc__meta .ppmd-actions__btn {
	gap: 0.6rem;
	padding: 0;
	border-radius: 0;
	color: var(--ppd-primary);
	font-weight: 500;
}

.ppd-doc__meta .ppmd-actions__btn:hover,
.ppd-doc__meta .ppmd-actions__btn:focus-visible {
	background: transparent;
	color: var(--ppd-ink);
	text-decoration: underline;
}

.ppd-doc__meta .ppmd-actions__btn svg {
	fill: var(--ppd-primary-soft);
}

.ppd-doc__meta .ppmd-actions__sep {
	display: none;
}

/* Table of contents: a hairline rule, the current section a thicker segment. */

.ppd-toc {
	margin: 0 0 4rem;
}

.ppd-toc__title {
	margin: 0 0 1.2rem;
	color: var(--ppd-muted);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ppd-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ppd-toc__item {
	margin: 0;
}

.ppd-toc a {
	display: block;
	padding: 0.4rem 0 0.4rem 1.2rem;
	border-left: 2px solid var(--ppd-line);
	color: var(--ppd-subtle);
	font-size: var(--ppd-nav-size);
	line-height: 1.45;
	text-decoration: none;
}

.ppd-toc__list--nested a {
	padding-left: 2.4rem;
}

.ppd-toc a:hover {
	color: var(--ppd-ink);
}

.ppd-toc a[aria-current] {
	border-left-color: var(--ppd-primary);
	color: var(--ppd-primary);
	font-weight: 700;
}

/* Article body ------------------------------------------------------------ */

.ppd .ppd-doc__content {
	/* Beats the theme's .entry-content 5em top margin, which loads later. */
	margin: 0;
	font-size: 1.7rem;
	line-height: 1.65;
}

.ppd-doc__content > :first-child {
	margin-top: 0;
}

.ppd-doc__content p {
	margin: 0 0 2rem;
}

.ppd-doc__content h2,
.ppd-doc__content h3,
.ppd-doc__content h4,
.ppd-doc__content h5 {
	color: var(--ppd-ink);
	line-height: 1.25;
	scroll-margin-top: var(--ppd-sticky-top);
}

.ppd-doc__content h2 {
	margin: 4.8rem 0 1.6rem;
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: -0.015em;
}

/* Most docs use h3 as their section heading and h4 below it. */
.ppd-doc__content h3 {
	margin: 4rem 0 1.4rem;
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: -0.015em;
}

.ppd-doc__content h4 {
	margin: 3.2rem 0 1rem;
	font-size: 2rem;
	font-weight: 700;
}

.ppd-doc__content h5 {
	margin: 2.4rem 0 0.8rem;
	font-size: 1.7rem;
	font-weight: 700;
}

.ppd-doc__content ul,
.ppd-doc__content ol {
	margin: 0 0 2rem;
	padding-left: 2.4rem;
}

.ppd-doc__content li {
	margin-bottom: 0.6rem;
	font-size: inherit;
	line-height: inherit;
}

.ppd-doc__content img,
.ppd-doc__content video,
.ppd-doc__content iframe {
	max-width: 100%;
	height: auto;
	border-radius: 5px;
}

.ppd-doc__content .wp-block-image img {
	border: 1px solid var(--ppd-line);
}

.ppd-doc__content figcaption {
	margin-top: 0.8rem;
	color: var(--ppd-muted);
	font-size: 1.3rem;
}

.ppd-doc__content .wp-block-embed iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
}

/* Spacer blocks were sized for BetterDocs' layout; let the type set the rhythm. */
.ppd-doc__content .wp-block-spacer {
	height: 1.6rem !important;
}

.ppd-doc__content .wp-block-genesis-blocks-gb-spacer hr {
	height: 1.6rem !important;
}

/* Quotes and callouts: a straight rule, no box. */
.ppd-doc__content .wp-block-quote,
.ppd-doc__content blockquote {
	margin: 0 0 2.4rem;
	padding: 0.4rem 0 0.4rem 1.6rem;
	border: 0;
	border-left: 2px solid var(--ppd-primary-soft);
	border-radius: 0;
	background: transparent;
	color: var(--ppd-ink);
	font-size: inherit;
	font-style: normal;
}

.ppd-doc__content .wp-block-quote > :last-child,
.ppd-doc__content blockquote > :last-child {
	margin-bottom: 0;
}

.ppd-doc__content :not(pre) > code {
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background: var(--ppd-tint);
	color: var(--ppd-ink);
	font-family: var(--ppd-mono);
	font-size: 0.88em;
}

.ppd-doc__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.52rem;
}

.ppd-doc__content th,
.ppd-doc__content td {
	padding: 0.8rem 1.2rem;
	border: 1px solid var(--ppd-line);
	text-align: left;
	vertical-align: top;
}

/* Video embeds fill the article column at 16:9. Many sit in a vertical flex
   group, where the figure would otherwise shrink to the iframe's 300px. */
.ppd-doc__content .wp-block-embed.is-type-video {
	align-self: stretch;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.ppd-doc__content .wp-block-embed.is-type-video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--ppd-radius);
}

/* Code blocks ------------------------------------------------------------- */
/* Light panel with a language bar. Prism (code-syntax-block, a11y-dark theme)
   still tokenises; the colours below replace its dark palette. */

.ppd-code {
	margin: 0 0 2.4rem;
	overflow: hidden;
	border: 1px solid var(--ppd-line);
	border-radius: var(--ppd-radius);
	background: #fbfbfd;
}

.ppd-code__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
	padding: 1rem 1.6rem;
	border-bottom: 1px solid var(--ppd-line);
	background: var(--ppd-tint);
}

.ppd-code__label {
	color: var(--ppd-muted);
	font-family: var(--ppd-mono);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ppd-code__copy {
	margin: 0;
	padding: 0 0 0 1.9rem;
	border: 0;
	background: transparent;
	color: var(--ppd-primary-soft);
	font: 600 1.2rem/1.6 inherit;
	font-family: inherit;
	cursor: pointer;
	position: relative;
}

/* Two overlapping squares: the copy glyph, in CSS. */
.ppd-code__copy::before,
.ppd-code__copy::after {
	content: "";
	position: absolute;
	width: 0.8rem;
	height: 0.9rem;
	border: 1.5px solid currentColor;
	border-radius: 2px;
}

.ppd-code__copy::before {
	left: 0;
	top: 0.55rem;
}

.ppd-code__copy::after {
	left: 0.35rem;
	top: 0.2rem;
	background: var(--ppd-tint);
}

.ppd-code__copy:hover,
.ppd-code__copy:focus-visible {
	color: var(--ppd-ink);
}

.ppd-doc__content pre,
.ppd-doc__content pre[class*="language-"],
.ppd-doc__content .wp-block-code {
	margin: 0;
	padding: 1.6rem 2rem;
	overflow-x: auto;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ppd-ink);
	font-family: var(--ppd-mono);
	font-size: 1.4rem;
	line-height: 1.6;
	text-shadow: none;
	white-space: pre;
}

/* code-syntax-block's JS adds the title as its own line; the bar already shows it. */
.ppd-code .prism-titlename {
	display: none;
}

/* A code block that isn't wrapped (e.g. classic HTML) still gets the panel. */
.ppd-doc__content > pre,
.ppd-doc__content > .wp-block-code {
	margin-bottom: 2.4rem;
	border: 1px solid var(--ppd-line);
	border-radius: var(--ppd-radius);
	background: #fbfbfd;
}

.ppd-doc__content pre code,
.ppd-doc__content pre code[class*="language-"] {
	padding: 0;
	background: transparent;
	color: var(--ppd-ink);
	font: inherit;
	text-shadow: none;
}

.ppd-doc__content .token.comment,
.ppd-doc__content .token.prolog,
.ppd-doc__content .token.doctype,
.ppd-doc__content .token.cdata {
	color: #8a8f98;
	font-style: italic;
}

.ppd-doc__content .token.punctuation,
.ppd-doc__content .token.operator {
	color: #75797c;
}

.ppd-doc__content .token.keyword,
.ppd-doc__content .token.tag,
.ppd-doc__content .token.boolean,
.ppd-doc__content .token.number,
.ppd-doc__content .token.atrule,
.ppd-doc__content .token.important,
.ppd-doc__content .token.delimiter {
	color: #935fac;
}

.ppd-doc__content .token.property,
.ppd-doc__content .token.function,
.ppd-doc__content .token.class-name,
.ppd-doc__content .token.attr-name,
.ppd-doc__content .token.selector,
.ppd-doc__content .token.builtin {
	color: #2e7d70;
}

.ppd-doc__content .token.string,
.ppd-doc__content .token.attr-value,
.ppd-doc__content .token.char,
.ppd-doc__content .token.regex,
.ppd-doc__content .token.url {
	color: #b4561f;
}

/* Doc footer -------------------------------------------------------------- */

.ppd-doc__footer {
	display: grid;
	gap: 2.4rem;
	margin-top: 4rem;
}

.ppd-doc__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem;
}

.ppd-doc__tags-label {
	color: var(--ppd-muted);
	font-size: 1.3rem;
}

.ppd-doc__tags ul {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ppd-doc__tags li {
	margin: 0;
}

.ppd-doc__tags a {
	display: inline-block;
	padding: 0.4rem 1rem;
	border: 1px solid var(--ppd-line);
	border-radius: 999px;
	color: var(--ppd-primary);
	font-size: 1.2rem;
	font-weight: 600;
	text-decoration: none;
}

.ppd-doc__tags a:hover {
	border-color: var(--ppd-primary-soft);
}

.ppd-doc__pager {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 1.6rem;
}

.ppd-doc__pager-link {
	display: block;
	padding: 1.8rem 0;
	border-top: 1px solid var(--ppd-line);
	color: var(--ppd-ink) !important;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

.ppd-doc__pager-link:hover {
	border-top-color: var(--ppd-primary);
}

.ppd-doc__pager-link--next {
	grid-column: -2;
	text-align: right;
}

.ppd-doc__pager-label {
	display: block;
	margin-bottom: 0.6rem;
	color: var(--ppd-muted);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.ppd-doc__pager-link--prev .ppd-doc__pager-label::before {
	content: "\2190\00A0";
}

.ppd-doc__pager-link--next .ppd-doc__pager-label::after {
	content: "\00A0\2192";
}

.ppd-doc__help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
	padding-top: 2.4rem;
	border-top: 1px solid var(--ppd-line);
}

.ppd-doc__help p {
	margin: 0;
}

.ppd-doc__help-title {
	color: var(--ppd-ink);
	font-size: 1.8rem;
	font-weight: 800;
}

.ppd-doc__help-text {
	color: var(--ppd-subtle);
	font-size: 1.5rem;
}

.ppd-doc__help-button {
	display: inline-block;
	padding: 1rem 1.8rem;
	border: 1px solid var(--ppd-primary);
	border-radius: 999px;
	color: var(--ppd-primary) !important;
	font-size: 1.4rem;
	font-weight: 800;
	text-decoration: none;
}

.ppd-doc__help-button:hover {
	background: var(--ppd-primary);
	color: #fff !important;
}

/* Sidebar ------------------------------------------------------------------ */

.ppd-sidebar__group {
	margin: 0;
}

.ppd-sidebar__heading {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.9rem 0;
	color: var(--ppd-ink);
	font-size: 1.4rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.ppd-sidebar__heading::-webkit-details-marker {
	display: none;
}

/* Chevron in CSS. */
.ppd-sidebar__heading::before {
	content: "";
	flex: 0 0 auto;
	width: 0.6rem;
	height: 0.6rem;
	margin: 0 0.4rem 0 0.2rem;
	border-right: 1.5px solid var(--ppd-muted);
	border-bottom: 1.5px solid var(--ppd-muted);
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}

.ppd-sidebar__group[open] > .ppd-sidebar__heading::before {
	transform: rotate(45deg);
}

.ppd-sidebar__name {
	flex: 1;
}

.ppd-sidebar__count {
	color: var(--ppd-muted);
	font-size: 1.2rem;
	font-weight: 400;
}

/* The current category: a plain heading over its list, then a divider. */
.ppd-sidebar__group--current {
	margin-bottom: 1.6rem;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--ppd-line);
}

.ppd-sidebar__group--current > .ppd-sidebar__heading {
	padding: 0 0 1.2rem;
	font-size: 1.5rem;
	font-weight: 800;
}

.ppd-sidebar__group--current > .ppd-sidebar__heading::before {
	display: none;
}

.ppd-sidebar__group--current .ppd-sidebar__count {
	color: var(--ppd-primary-soft);
	font-weight: 700;
}

/* Doc list in the sidebar: a hairline rule, the current doc a thicker segment
   (the same treatment as the table of contents). */
.ppd-sidebar .ppd-doc-list {
	margin: 0 0 1.2rem;
}

/* "See more" under a sidebar topic's first few docs: a quiet text button on
   the same rule as the list. */
.ppd .ppd-list-more {
	display: block;
	width: 100%;
	margin: 0 0 1.2rem;
	padding: 0.6rem 0 0.6rem 1.6rem;
	border: 0;
	border-left: 1px solid var(--ppd-line);
	background: none;
	color: var(--ppd-primary);
	font: inherit;
	font-size: var(--ppd-nav-size);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.ppd .ppd-list-more:hover {
	text-decoration: underline;
}

/* The list's own bottom margin moves below the button when there is one. */
.ppd-sidebar .ppd-doc-list:has(+ .ppd-list-more) {
	margin-bottom: 0;
}

/* The pages in each topic, a step smaller than the topic names. The table of
   contents uses the same size (--ppd-nav-size). */
.ppd .ppd-sidebar .ppd-doc-list__link {
	font-size: var(--ppd-nav-size);
}

.ppd-sidebar .ppd-doc-list__link {
	padding: 0.6rem 0 0.6rem 1.6rem;
	border-left: 1px solid var(--ppd-line);
	color: var(--ppd-subtle) !important;
	line-height: 1.4;
}

.ppd-sidebar .ppd-doc-list__link:hover {
	color: var(--ppd-ink) !important;
}

.ppd-sidebar .ppd-doc-list__link[aria-current="page"] {
	padding-left: 1.5rem;
	border-left: 2px solid var(--ppd-primary);
	color: var(--ppd-primary) !important;
	font-weight: 700;
}