/**
 * DocNest design system.
 *
 * Loaded after docnest.css and authoritative for anything visual. The base
 * sheet keeps layout plumbing; this layer owns tokens, spacing, type and
 * components, so the visual language can be reworked without disturbing the
 * grid or the JavaScript hooks.
 *
 * Direction: the restraint and density of a good developer-docs site, in
 * GEMSDocs' own colours. One accent, hairlines instead of shadows, and a single
 * bold move — the accent trace down the branch you are currently inside, so
 * your position in a deep tree is readable without reading.
 *
 * Sections
 *   1. Tokens
 *   2. Surfaces and reset
 *   3. Layout
 *   4. Docs bar
 *   5. Sidebar and tree
 *   6. Content
 *   7. Table of contents
 *   8. Components
 *   9. Search results
 *  10. Responsive
 *  11. Motion and focus
 */

/* ========================================================== 1. Tokens */

.docnest-page {
	/* Ink */
	--dn-ink: #16202b;
	--dn-ink-2: #55636f;
	--dn-ink-3: #8592a0;

	/* Surfaces */
	--dn-surface: #ffffff;
	--dn-canvas: #f7f9fb;
	--dn-raised: #f2f5f8;

	/* Lines */
	--dn-line: #e7ebef;
	--dn-line-soft: #f0f3f6;

	/* Accent is set per site; these are the derived tints. */
	--dn-accent-soft: rgba(var(--dn-accent-rgb, 22, 104, 214), 0.09);
	--dn-accent-line: rgba(var(--dn-accent-rgb, 22, 104, 214), 0.55);

	/* Type */
	--dn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	--dn-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Rhythm */
	--dn-r-sm: 5px;
	--dn-r: 8px;
	--dn-r-lg: 12px;
	--dn-row-h: 32px;
	--dn-indent: 14px;

	/* One shadow, used sparingly. */
	--dn-shadow: 0 1px 2px rgba(16, 32, 48, 0.04), 0 8px 24px -12px rgba(16, 32, 48, 0.16);

	--dn-ease: cubic-bezier(0.32, 0.72, 0, 1);

	/*
	 * Sticky geometry — one source of truth.
	 *
	 * Everything that pins itself to the top of the window derives its offset
	 * from --dn-pane-top, so turning the docs bar off, logging in (which adds
	 * the admin bar), or changing the bar height can never leave one rail
	 * aligned and another tucked underneath.
	 *
	 *   --dn-bar-h    docs bar height; set from settings, 0 when the bar is off
	 *   --dn-admin-h  WordPress admin bar; 0 for logged-out visitors
	 *   --dn-pane-gap breathing room at the bottom of a full-height pane
	 */
	--dn-admin-h: 0px;
	--dn-pane-gap: 12px;
	--dn-pane-top: calc(var(--dn-bar-h, 62px) + var(--dn-admin-h));
}

/*
 * The admin bar is fixed, so a pane at top: 0 slides underneath it. WordPress
 * switches it to 46px on small screens, and drops it out of fixed positioning
 * entirely under 600px — at which point it scrolls away and costs us nothing.
 */
body.admin-bar .docnest-page {
	--dn-admin-h: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .docnest-page {
		--dn-admin-h: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .docnest-page {
		--dn-admin-h: 0px;
	}
}

/* ============================================== 2. Surfaces and reset */

/*
 * The layout paints its own surface. Without this a dark theme shows through
 * every gap and the result is the cramped black page this replaces.
 */
.docnest-page {
	font-family: var(--dn-font);
	color: var(--dn-ink);
	background: var(--dn-canvas);
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * Themes commonly colour headings and links from a body-level rule that beats a
 * single class. Scoping to .docnest-page and naming the element wins that
 * without resorting to !important.
 */
.docnest-page h1,
.docnest-page h2,
.docnest-page h3,
.docnest-page h4,
.docnest-page h5,
.docnest-page h6 {
	color: var(--dn-ink);
	font-family: inherit;
	text-transform: none;
	letter-spacing: -0.011em;
}

.docnest-page p,
.docnest-page li,
.docnest-page dd,
.docnest-page dt,
.docnest-page td,
.docnest-page th {
	color: inherit;
}

.docnest-page a {
	color: var(--dn-accent, #1668d6);
	text-underline-offset: 2px;
}

/*
 * Themes and page builders style bare `button` elements, and several controls
 * here are buttons by design — a folder label toggles rather than navigates, so
 * it must not be an anchor. Without this reset a dark theme paints those rows
 * solid, which is what turned folder rows into unreadable black blocks.
 */
.docnest-page button,
.docnest-page input[type="search"] {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-height: 0;
	min-width: 0;
	margin: 0;
	text-shadow: none;
}

.docnest-page button:hover,
.docnest-page button:focus {
	box-shadow: none;
	text-decoration: none;
}

/* ========================================================== 3. Layout */

.docnest-shell {
	display: grid;
	grid-template-columns: var(--dn-sidebar-w, 300px) minmax(0, 1fr) var(--dn-toc-w, 264px);
	align-items: start;
	/*
	 * Wide enough that a large monitor is used rather than framed, capped so the
	 * reading column never drifts away from the navigation on an ultrawide.
	 */
	max-width: 1760px;
	margin: 0 auto;
	background: var(--dn-surface);
	border-left: 1px solid var(--dn-line);
	border-right: 1px solid var(--dn-line);
	transition: grid-template-columns 0.26s var(--dn-ease);
}

.docnest-shell--no-toc {
	grid-template-columns: var(--dn-sidebar-w, 300px) minmax(0, 1fr);
}

/* --- Sticky side panels --------------------------------------------------- */

/*
 * Both rails are built the same way, and the split matters:
 *
 *   .docnest-shell__nav / __toc        the grid column — the *track*
 *   .docnest-shell__nav-inner / ...    the sticky pane that rides it
 *
 * A sticky element can only travel inside its containing block. So the track
 * has to be as tall as the article (align-self: stretch), otherwise the pane
 * runs out of room and scrolls away — which is exactly what happened before:
 * the nav column was capped at 100vh, and the TOC column had no height rule at
 * all, so it was only ever as tall as the outline itself and the pane had
 * effectively zero travel.
 *
 * Stretching the tracks has a second, welcome effect: the column rules now run
 * the full height of the page instead of stopping mid-article.
 */
.docnest-shell__nav,
.docnest-shell__toc {
	position: relative;
	align-self: stretch;
	min-width: 0;
	background: var(--dn-surface);
}

.docnest-shell__nav {
	border-right: 1px solid var(--dn-line);
}

.docnest-shell__nav-inner,
.docnest-shell__toc-inner {
	position: sticky;
	top: var(--dn-pane-top);
	/*
	 * dvh first where it is understood, so the panes do not sit under a mobile
	 * browser's collapsing toolbar. vh stays as the fallback declaration.
	 */
	max-height: calc(100vh - var(--dn-pane-top) - var(--dn-pane-gap));
	max-height: calc(100dvh - var(--dn-pane-top) - var(--dn-pane-gap));
	/* Independent scroll, and only when the pane actually overflows. */
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-gutter: stable;
}

.docnest-shell__nav-inner {
	padding: 20px 16px 56px 24px;
}

.docnest-shell__main {
	min-width: 0;
	padding: 40px 64px 96px;
	background: var(--dn-surface);
}

/*
 * Prose still needs a measure, but the leftover room is split either side rather
 * than piled up on the right — that asymmetry is what reads as "a component
 * dropped on the page" instead of a layout.
 */
.docnest-doc {
	max-width: var(--dn-content-w, 880px);
	margin-inline: auto;
}

.docnest-shell__toc-inner {
	padding: 40px 28px 56px 20px;
}

/*
 * Machine-generated headings can carry long unbroken tokens. Without this they
 * push the pane wider than its column and produce a horizontal scrollbar —
 * "never break the content layout" includes not doing that.
 */
.docnest-toc__link {
	overflow-wrap: anywhere;
}

/* --- Collapsed state ------------------------------------------------------ */

/*
 * Collapsing sets the column to zero rather than display:none so the width can
 * animate. The panel is taken out of the tab order too, otherwise focus walks
 * into an invisible tree.
 */
.docnest-shell.is-nav-collapsed {
	grid-template-columns: 0 minmax(0, 1fr) var(--dn-toc-w, 264px);
}

.docnest-shell.is-nav-collapsed.docnest-shell--no-toc {
	grid-template-columns: 0 minmax(0, 1fr);
}

/*
 * max-height: 0 matters now the track is stretched. A stretched item still
 * contributes its content height to the auto row, so a collapsed sidebar on a
 * short doc would otherwise leave a tall blank column behind. Clamping it to
 * nothing — it is already hidden and clipped — keeps the row honest.
 */
.docnest-shell.is-nav-collapsed > .docnest-shell__nav {
	overflow: hidden;
	max-height: 0;
	border-right-color: transparent;
	visibility: hidden;
}

/* The reveal rail. Only visible while collapsed, and never inside the panel. */
/*
 * Fixed, not sticky, and deliberately never a grid item.
 *
 * As a grid child with grid-column:1 it occupied the first cell, so the nav was
 * auto-placed into the 1fr column, the content into the 260px TOC column and the
 * TOC onto a second row. Out-of-flow positioning keeps it out of auto-placement
 * entirely, so collapsing can no longer reshuffle the layout.
 */
.dn-rail {
	position: fixed;
	top: calc(var(--dn-pane-top) + 18px);
	left: 10px;
	display: none;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	z-index: 25;
	color: var(--dn-ink-2);
	background: var(--dn-surface);
	border: 1px solid var(--dn-line);
	border-radius: 50%;
	box-shadow: var(--dn-shadow);
	cursor: pointer;
	transition: color 0.14s ease, border-color 0.14s ease;
}

.docnest-shell.is-nav-collapsed > .dn-rail {
	display: grid;
}

.dn-rail:hover {
	color: var(--dn-accent, #1668d6);
	border-color: var(--dn-accent-line);
}

.dn-rail svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* ======================================================== 4. Docs bar */

.docnest-bar {
	position: sticky;
	top: var(--dn-admin-h, 0px);
	z-index: 40;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--dn-line);
}

.docnest-bar__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1560px;
	height: var(--dn-bar-h, 62px);
	margin: 0 auto;
	padding: 0 24px;
}

.docnest-bar__brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	color: var(--dn-ink);
	text-decoration: none;
	font-weight: 640;
	font-size: 15px;
	letter-spacing: -0.012em;
}

.docnest-bar__logo {
	display: block;
	width: auto;
	height: 26px;
}

.docnest-bar__search {
	flex: 1 1 auto;
	max-width: 560px;
	margin: 0 auto;
}

.docnest-bar__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	margin-left: auto;
}

/* =============================================== 5. Sidebar and tree */

.docnest-nav__head {
	position: sticky;
	top: 0;
	z-index: 3;
	margin: 0 -16px 10px -24px;
	padding: 0 16px 10px 24px;
	background: var(--dn-surface);
}

.docnest-nav__title {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 640;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dn-ink-3);
}

/* Filter field */
.docnest-nav__filter {
	position: relative;
	display: flex;
	align-items: center;
}

.docnest-nav__filter .docnest-icon {
	position: absolute;
	left: 9px;
	width: 14px;
	height: 14px;
	fill: var(--dn-ink-3);
	pointer-events: none;
}

.docnest-nav__search {
	width: 100%;
	height: 32px;
	padding: 0 28px 0 29px;
	font: inherit;
	font-size: 13px;
	color: var(--dn-ink);
	background: var(--dn-raised);
	border: 1px solid transparent;
	border-radius: var(--dn-r-sm);
	transition: background-color 0.14s ease, border-color 0.14s ease;
	appearance: none;
}

.docnest-nav__search::placeholder {
	color: var(--dn-ink-3);
}

.docnest-nav__search:focus {
	outline: none;
	background: var(--dn-surface);
	border-color: var(--dn-accent, #1668d6);
	box-shadow: 0 0 0 3px var(--dn-accent-soft);
}

.docnest-nav__clear {
	position: absolute;
	right: 6px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	font-size: 15px;
	line-height: 1;
	color: var(--dn-ink-3);
	background: none;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.docnest-nav__clear:hover {
	color: var(--dn-ink);
	background: var(--dn-raised);
}

/* Toolbar */
.docnest-nav__tools {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-top: 8px;
}

.docnest-nav__tool {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 6px;
	font: inherit;
	font-size: 11.5px;
	color: var(--dn-ink-3);
	background: none;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: color 0.12s ease, background-color 0.12s ease;
}

.docnest-nav__tool:hover {
	color: var(--dn-ink);
	background: var(--dn-raised);
}

.docnest-nav__tool svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* --- Rows ---------------------------------------------------------------- */

.docnest-tree--level-1 > .docnest-tree__item + .docnest-tree__item {
	margin-top: 2px;
}

/* Breathing room between top-level groups: this is what fixes "cramped". */
.docnest-tree--level-1 > .docnest-tree__item.has-children + .docnest-tree__item {
	margin-top: 14px;
}

.docnest-tree__item > ul {
	margin-left: 15px;
	padding-left: 11px;
	border-left: 1px solid var(--dn-line);
}

.docnest-tree__row {
	display: flex;
	align-items: center;
	gap: 1px;
	min-height: var(--dn-row-h);
	border-radius: var(--dn-r-sm);
}

.docnest-tree__row:hover {
	background: var(--dn-raised);
}

.docnest-tree__item.is-current > .docnest-tree__row {
	background: var(--dn-accent-soft);
}

.docnest-tree__item.is-current > .docnest-tree__row:hover {
	background: var(--dn-accent-soft);
}

/* Disclosure arrow */
.docnest-tree__toggle {
	flex: 0 0 18px;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-left: 2px;
	color: var(--dn-ink-3);
	background: none;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.docnest-tree__toggle:hover {
	color: var(--dn-ink);
	background: rgba(16, 32, 48, 0.06);
}

.docnest-chevron {
	width: 13px;
	height: 13px;
	fill: currentColor;
	transition: transform 0.2s var(--dn-ease);
}

.docnest-tree__leaf {
	flex: 0 0 18px;
	width: 18px;
	margin-left: 2px;
}

/* The base sheet draws a dot on leaves; the icons carry that job now. */
.docnest-tree__leaf::after {
	display: none;
}

/* Labels */
.docnest-tree__link {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	padding: 5px 9px 5px 5px;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 450;
	color: var(--dn-ink-2);
	text-decoration: none;
	border-radius: var(--dn-r-sm);
	background: none;
	transition: color 0.12s ease;
}

.docnest-tree__row:hover .docnest-tree__link {
	color: var(--dn-ink);
}

/* Top-level entries read as group headings. */
.docnest-tree--level-1 > .docnest-tree__item > .docnest-tree__row > .docnest-tree__link {
	font-size: 13.5px;
	font-weight: 620;
	color: var(--dn-ink);
}

.docnest-tree__item.is-ancestor > .docnest-tree__row > .docnest-tree__link {
	color: var(--dn-ink);
	font-weight: 550;
}

.docnest-tree__item.is-current > .docnest-tree__row > .docnest-tree__link {
	color: var(--dn-accent, #1668d6);
	font-weight: 600;
}


/* --- The signature: trace the branch you are inside ---------------------- */

/*
 * Not just a bar on the active row. The accent runs down the guide line of
 * every ancestor, so in a tree eight levels deep the path from the root to
 * where you are is legible at a glance. This is the one loud thing in the
 * design; everything else stays quiet on purpose.
 */
.docnest-nav--guides .docnest-tree__item.is-ancestor > ul,
.docnest-nav--guides .docnest-tree__item.is-current > ul {
	border-left-color: var(--dn-accent-line);
}

.docnest-nav--guides .docnest-tree__item.is-current > .docnest-tree__row {
	position: relative;
}

.docnest-nav--guides .docnest-tree__item.is-current > .docnest-tree__row::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 3px;
	bottom: 3px;
	width: 2px;
	border-radius: 2px;
	background: var(--dn-accent, #1668d6);
}

/* At the root there is no guide to sit against, so the marker is dropped. */
.docnest-tree--level-1 > .docnest-tree__item.is-current > .docnest-tree__row::before {
	display: none;
}

/* Icons */
.docnest-tree__icon {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	margin-right: 8px;
	color: var(--dn-ink-3);
}

.docnest-tree__icon svg {
	width: 15px;
	height: 15px;
}

.docnest-tree__item.is-current > .docnest-tree__row .docnest-tree__icon {
	color: var(--dn-accent, #1668d6);
}

/* Draft marker: a dot, not a coloured bullet glued to the text. */
.docnest-tree__item.is-unpublished > .docnest-tree__row > .docnest-tree__link::after {
	content: "";
	flex: 0 0 5px;
	width: 5px;
	height: 5px;
	margin-left: 6px;
	border-radius: 50%;
	background: #d3900c;
	color: transparent;
}

.docnest-tree__text mark {
	padding: 0 1px;
	color: var(--dn-ink);
	background: rgba(var(--dn-accent-rgb, 22, 104, 214), 0.18);
	border-radius: 2px;
}

/* ========================================================= 6. Content */

.docnest-breadcrumbs {
	margin-bottom: 18px;
	font-size: 12.5px;
	color: var(--dn-ink-3);
}

.docnest-breadcrumbs a {
	color: var(--dn-ink-3);
	text-decoration: none;
}

.docnest-breadcrumbs a:hover {
	color: var(--dn-accent, #1668d6);
}

.docnest-breadcrumbs [aria-current="page"] {
	color: var(--dn-ink-2);
	font-weight: 500;
}

.docnest-doc__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.docnest-doc__title {
	margin: 0;
	font-size: clamp(27px, 3.1vw, 33px);
	line-height: 1.18;
	font-weight: 680;
	letter-spacing: -0.022em;
	color: var(--dn-ink);
}

.docnest-doc__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 14px 0 30px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--dn-line);
	font-size: 12.5px;
	color: var(--dn-ink-3);
	font-variant-numeric: tabular-nums;
}

.docnest-doc__body {
	font-size: 16.5px;
	line-height: 1.75;
	color: #263241;
}

.docnest-doc__body > * + * {
	margin-top: 1.1em;
}

.docnest-doc__body p {
	margin: 0;
}

.docnest-doc__body h2 {
	margin: 2.3em 0 0.7em;
	padding-top: 0;
	border-top: 0;
	font-size: 1.42em;
	font-weight: 660;
	line-height: 1.3;
}

.docnest-doc__body h3 {
	margin: 1.9em 0 0.55em;
	font-size: 1.14em;
	font-weight: 640;
}

.docnest-doc__body h4 {
	margin: 1.5em 0 0.45em;
	font-size: 1em;
	font-weight: 640;
}

.docnest-doc__body ul,
.docnest-doc__body ol {
	padding-left: 1.35em;
}

.docnest-doc__body li + li {
	margin-top: 0.35em;
}

.docnest-doc__body img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r);
}

.docnest-doc__body hr {
	height: 1px;
	margin: 2.2em 0;
	background: var(--dn-line);
	border: 0;
}

.docnest-doc__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94em;
}

.docnest-doc__body th,
.docnest-doc__body td {
	padding: 9px 12px;
	text-align: left;
	border-bottom: 1px solid var(--dn-line);
}

.docnest-doc__body th {
	font-weight: 620;
	color: var(--dn-ink);
	background: var(--dn-canvas);
}

/* Child cards at the end of a section */
.docnest-doc__children {
	margin-top: 3em;
	padding-top: 1.6em;
	border-top: 1px solid var(--dn-line);
}

.docnest-doc__children > h2 {
	margin: 0 0 1em;
	font-size: 11px;
	font-weight: 640;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dn-ink-3);
}

.docnest-childlist {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.docnest-childlist__link {
	display: block;
	height: 100%;
	padding: 14px 16px;
	color: inherit;
	text-decoration: none;
	background: var(--dn-surface);
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r);
	transition: border-color 0.14s ease, transform 0.14s var(--dn-ease), box-shadow 0.14s ease;
}

.docnest-childlist__link:hover {
	border-color: var(--dn-accent-line);
	transform: translateY(-1px);
	box-shadow: var(--dn-shadow);
}

.docnest-childlist__title {
	display: block;
	font-size: 14px;
	font-weight: 620;
	color: var(--dn-ink);
}

.docnest-childlist__desc {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--dn-ink-3);
}

/* Prev / next */
.docnest-pager {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
	margin-top: 2.6em;
	padding-top: 1.6em;
	border-top: 1px solid var(--dn-line);
}

.docnest-pager__link {
	display: block;
	padding: 14px 16px;
	color: inherit;
	text-decoration: none;
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r);
	transition: border-color 0.14s ease, background-color 0.14s ease;
}

.docnest-pager__link:hover {
	border-color: var(--dn-accent-line);
	background: var(--dn-canvas);
}

.docnest-pager__label {
	display: block;
	font-size: 10.5px;
	font-weight: 640;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--dn-ink-3);
}

.docnest-pager__title {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	font-weight: 560;
	color: var(--dn-ink);
}

/* ============================================ 7. Table of contents */

.docnest-toc__title {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 640;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dn-ink-3);
}

.docnest-toc__link {
	display: block;
	padding: 4px 0 4px 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--dn-ink-3);
	text-decoration: none;
	border-left: 2px solid var(--dn-line);
	transition: color 0.12s ease, border-color 0.12s ease;
}

.docnest-toc__link:hover {
	color: var(--dn-ink);
}

.docnest-toc__link.is-active {
	color: var(--dn-accent, #1668d6);
	border-left-color: var(--dn-accent, #1668d6);
	font-weight: 550;
}

/* ====================================================== 8. Components */

/* --- Buttons ------------------------------------------------------------- */

.dn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	font: inherit;
	font-size: 13px;
	font-weight: 550;
	line-height: 1;
	color: var(--dn-ink);
	text-decoration: none;
	white-space: nowrap;
	background: var(--dn-surface);
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r-sm);
	cursor: pointer;
	transition: background-color 0.13s ease, border-color 0.13s ease, color 0.13s ease;
}

.dn-btn svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	flex: 0 0 14px;
}

.dn-btn:hover {
	background: var(--dn-raised);
	border-color: #d9e0e6;
}

.dn-btn--primary {
	color: #fff;
	background: var(--dn-accent, #1668d6);
	border-color: var(--dn-accent, #1668d6);
}

.dn-btn--primary:hover {
	color: #fff;
	filter: brightness(0.93);
	background: var(--dn-accent, #1668d6);
	border-color: var(--dn-accent, #1668d6);
}

.dn-btn--ghost {
	background: none;
	border-color: transparent;
	color: var(--dn-ink-2);
}

.dn-btn--ghost:hover {
	color: var(--dn-ink);
	background: var(--dn-raised);
	border-color: transparent;
}

.dn-btn--icon {
	padding: 0 9px;
}

.dn-btn[disabled],
.dn-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* The edit and copy-link controls adopt the button language. */
.docnest-doc__edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 550;
	color: var(--dn-ink);
	text-decoration: none;
	background: var(--dn-surface);
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r-sm);
	transition: border-color 0.13s ease, background-color 0.13s ease;
}

.docnest-doc__edit:hover {
	background: var(--dn-raised);
	border-color: #d9e0e6;
}

.docnest-copy-link {
	height: 28px;
	padding: 0 10px;
	margin-left: auto;
	font-size: 12.5px;
	color: var(--dn-ink-2);
	background: none;
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r-sm);
	cursor: pointer;
	transition: color 0.13s ease, border-color 0.13s ease;
}

.docnest-copy-link:hover {
	color: var(--dn-ink);
	border-color: #d9e0e6;
}

.docnest-copy-link.is-done {
	color: var(--dn-accent, #1668d6);
	border-color: var(--dn-accent-line);
}

/* --- Fields -------------------------------------------------------------- */

.dn-field,
.docnest-search__input {
	width: 100%;
	height: 36px;
	padding: 0 12px;
	font: inherit;
	font-size: 13.5px;
	color: var(--dn-ink);
	background: var(--dn-raised);
	border: 1px solid transparent;
	border-radius: var(--dn-r-sm);
	appearance: none;
	transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.dn-field::placeholder,
.docnest-search__input::placeholder {
	color: var(--dn-ink-3);
}

.dn-field:focus,
.docnest-search__input:focus {
	outline: none;
	background: var(--dn-surface);
	border-color: var(--dn-accent, #1668d6);
	box-shadow: 0 0 0 3px var(--dn-accent-soft);
}

/* --- Badges -------------------------------------------------------------- */

.dn-badge {
	display: inline-flex;
	align-items: center;
	height: 18px;
	padding: 0 6px;
	font-size: 10.5px;
	font-weight: 620;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 4px;
	vertical-align: 2px;
}

.dn-badge--draft {
	color: #8a5406;
	background: #fdf4e3;
}

/* --- Cards --------------------------------------------------------------- */

.dn-card {
	padding: 18px 20px;
	background: var(--dn-surface);
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r);
}

/* --- Empty and loading states ------------------------------------------- */

.dn-empty {
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: 64px 24px;
	text-align: center;
	background: var(--dn-surface);
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r-lg);
}

.dn-empty__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 6px;
	color: var(--dn-ink-3);
	background: var(--dn-raised);
	border-radius: 50%;
}

.dn-empty__icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.dn-empty__title {
	margin: 0;
	font-size: 17px;
	font-weight: 640;
}

.dn-empty__body {
	margin: 0 0 12px;
	max-width: 42ch;
	font-size: 14px;
	color: var(--dn-ink-3);
}

.dn-skeleton {
	height: 12px;
	background: linear-gradient(90deg, var(--dn-raised) 25%, #e9eef3 37%, var(--dn-raised) 63%);
	background-size: 400% 100%;
	border-radius: 4px;
	animation: dn-shimmer 1.3s ease infinite;
}

@keyframes dn-shimmer {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}

.dn-note {
	margin: 18px 0 0;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--dn-ink-2);
	background: var(--dn-canvas);
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r);
}

/* --- Pagination ---------------------------------------------------------- */

.dn-pagination {
	display: flex;
	gap: 4px;
	justify-content: center;
	margin-top: 32px;
}

.dn-pagination a,
.dn-pagination span {
	display: grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	font-size: 13px;
	color: var(--dn-ink-2);
	text-decoration: none;
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r-sm);
}

.dn-pagination a:hover {
	color: var(--dn-ink);
	background: var(--dn-raised);
}

.dn-pagination .current {
	color: #fff;
	background: var(--dn-accent, #1668d6);
	border-color: var(--dn-accent, #1668d6);
}

/* --- Instant search dropdown -------------------------------------------- */

.docnest-search {
	position: relative;
}

.docnest-search__results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 60;
	max-height: 420px;
	overflow-y: auto;
	padding: 6px;
	background: var(--dn-surface);
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r);
	box-shadow: var(--dn-shadow);
}

.docnest-search__result {
	display: block;
	padding: 8px 10px;
	color: var(--dn-ink);
	text-decoration: none;
	border-radius: var(--dn-r-sm);
}

.docnest-search__result:hover,
.docnest-search__result.is-active {
	background: var(--dn-raised);
}

/* ================================================= 9. Search results */

.dn-search {
	max-width: 820px;
	margin: 0 auto;
	padding: 48px 24px 96px;
}

.dn-search__title {
	margin: 0;
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 680;
	letter-spacing: -0.022em;
}

.dn-search__count {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--dn-ink-3);
}

.dn-search__form {
	position: relative;
	display: flex;
	gap: 8px;
	margin: 22px 0 30px;
}

.dn-search__icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	pointer-events: none;
}

.dn-search__icon svg {
	width: 15px;
	height: 15px;
	fill: var(--dn-ink-3);
}

.dn-search__input {
	flex: 1 1 auto;
	height: 40px;
	padding: 0 14px 0 36px;
	font: inherit;
	font-size: 14.5px;
	color: var(--dn-ink);
	background: var(--dn-surface);
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r);
	appearance: none;
}

.dn-search__input:focus {
	outline: none;
	border-color: var(--dn-accent, #1668d6);
	box-shadow: 0 0 0 3px var(--dn-accent-soft);
}

.dn-search__form .dn-btn {
	height: 40px;
	padding: 0 18px;
}

.dn-results {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.dn-result__link {
	display: block;
	padding: 16px 18px;
	color: inherit;
	text-decoration: none;
	background: var(--dn-surface);
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r);
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.dn-result__link:hover {
	border-color: var(--dn-accent-line);
	box-shadow: var(--dn-shadow);
}

.dn-result__trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin: 0 0 5px;
	font-size: 12px;
	color: var(--dn-ink-3);
}

.dn-result__sep {
	color: #c3ccd5;
}

.dn-result__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16px;
	font-weight: 640;
	color: var(--dn-ink);
}

.dn-result__excerpt {
	margin: 6px 0 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--dn-ink-2);
}

.dn-result__excerpt mark,
.dn-result__title mark {
	padding: 0 2px;
	color: var(--dn-ink);
	background: rgba(var(--dn-accent-rgb, 22, 104, 214), 0.16);
	border-radius: 3px;
}

.dn-result__kind {
	display: inline-block;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dn-ink-3);
}

/* ===================================================== 10. Responsive */

@media (max-width: 1280px) {
	.docnest-shell {
		grid-template-columns: var(--dn-sidebar-w, 300px) minmax(0, 1fr);
	}

	.docnest-shell__toc {
		display: none;
	}

	.docnest-shell__main {
		padding: 36px 44px 80px;
	}
}

@media (max-width: 1024px) {
	/* The sidebar becomes an overlay drawer. */
	.docnest-shell,
	.docnest-shell--no-toc,
	.docnest-shell.is-nav-collapsed {
		grid-template-columns: minmax(0, 1fr);
	}

	.dn-rail,
	.docnest-shell.is-nav-collapsed > .dn-rail {
		display: none;
	}

	.docnest-shell__nav {
		position: fixed;
		top: var(--dn-admin-h, 0px);
		left: 0;
		bottom: 0;
		z-index: 70;
		width: min(340px, 86vw);
		border-right: 1px solid var(--dn-line);
		box-shadow: var(--dn-shadow);
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.28s var(--dn-ease), visibility 0.28s linear;
	}

	.docnest-shell__nav.is-open {
		transform: none;
		visibility: visible;
	}

	/* Collapsed is meaningless for a drawer; never let it hide the panel. */
	.docnest-shell.is-nav-collapsed > .docnest-shell__nav {
		visibility: hidden;
	}

	.docnest-shell.is-nav-collapsed > .docnest-shell__nav.is-open {
		visibility: visible;
	}

	.docnest-shell__nav-inner {
		position: static;
		max-height: 100%;
		height: 100%;
		padding: 18px 18px 48px;
	}

	.docnest-shell__nav-close {
		display: grid;
		place-items: center;
		width: 30px;
		height: 30px;
		margin-left: auto;
		font-size: 20px;
		line-height: 1;
		color: var(--dn-ink-2);
		background: none;
		border: 0;
		border-radius: var(--dn-r-sm);
		cursor: pointer;
	}

	.docnest-scrim {
		position: fixed;
		inset: 0;
		z-index: 65;
		background: rgba(16, 32, 48, 0.4);
	}

	.docnest-shell__main {
		padding: 28px 24px 72px;
	}

	.docnest-bar__search {
		max-width: none;
	}
}

@media (max-width: 720px) {
	.docnest-bar__inner {
		gap: 10px;
		padding: 0 14px;
	}

	.docnest-bar__toggle-text,
	.docnest-bar__title {
		display: none;
	}

	.docnest-shell__main {
		padding: 22px 16px 64px;
	}

	.docnest-doc__header {
		flex-direction: column;
		gap: 12px;
	}

	.docnest-doc__title {
		font-size: 25px;
	}

	.docnest-doc__body {
		font-size: 16px;
	}

	.docnest-pager {
		grid-template-columns: 1fr;
	}

	.docnest-childlist {
		grid-template-columns: 1fr;
	}

	.dn-search {
		padding: 28px 16px 72px;
	}

	.dn-search__form {
		flex-wrap: wrap;
	}

	.dn-search__form .dn-btn {
		width: 100%;
	}

	.docnest-copy-link {
		margin-left: 0;
	}
}

/* ============================================= 11. Motion and focus */

.docnest-page :focus-visible {
	outline: 2px solid var(--dn-accent, #1668d6);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.docnest-shell,
	.docnest-shell__nav,
	.docnest-chevron,
	.docnest-childlist__link,
	.dn-result__link,
	.dn-skeleton {
		transition: none !important;
		animation: none !important;
	}
}

/* --- Dropdown ------------------------------------------------------------ */

/*
 * Used for the doc actions beside Edit. A split control: the primary action
 * stays one click away, and the rest live behind the chevron rather than
 * crowding the header.
 */
.dn-split {
	display: inline-flex;
	align-items: stretch;
	position: relative;
}

.dn-split > .dn-btn:first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.dn-split > .dn-btn + .dn-btn {
	margin-left: -1px;
	padding: 0 7px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.dn-split > .dn-btn + .dn-btn svg {
	width: 12px;
	height: 12px;
	transition: transform 0.16s var(--dn-ease);
}

.dn-split > .dn-btn[aria-expanded="true"] {
	background: var(--dn-raised);
	z-index: 1;
}

.dn-split > .dn-btn[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.dn-dropdown {
	position: absolute;
	top: calc(100% + 5px);
	right: 0;
	z-index: 30;
	min-width: 184px;
	padding: 5px;
	margin: 0;
	list-style: none;
	background: var(--dn-surface);
	border: 1px solid var(--dn-line);
	border-radius: var(--dn-r-md, 8px);
	box-shadow: var(--dn-shadow);
}

.dn-dropdown[hidden] {
	display: none;
}

.dn-dropdown__item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 9px;
	font: inherit;
	font-size: 13px;
	color: var(--dn-ink);
	text-align: left;
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: var(--dn-r-sm, 6px);
	cursor: pointer;
}

.dn-dropdown__item:hover,
.dn-dropdown__item:focus-visible {
	background: var(--dn-raised);
	color: var(--dn-ink);
}

.dn-dropdown__item svg {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	fill: currentColor;
	color: var(--dn-ink-3);
}

.dn-dropdown__sep {
	height: 1px;
	margin: 5px 4px;
	background: var(--dn-line-soft);
}

/* --- Tabs ---------------------------------------------------------------- */

.dn-tabs {
	display: flex;
	gap: 2px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--dn-line);
}

.dn-tab {
	position: relative;
	padding: 9px 13px;
	font-size: 13.5px;
	font-weight: 550;
	color: var(--dn-ink-2);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 0.13s ease;
}

.dn-tab:hover {
	color: var(--dn-ink);
}

.dn-tab[aria-selected="true"] {
	color: var(--dn-accent, #1668d6);
}

/* The indicator sits on the shared rule, so it reads as one control strip. */
.dn-tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: -1px;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--dn-accent, #1668d6);
}

.dn-tabpanel[hidden] {
	display: none;
}

/* ================================== 12. Full-bleed layout escape ========== */

/*
 * A docs layout has to own the window. Themes render page content inside a
 * centred, max-width container, and no amount of internal spacing fixes a
 * three-column app squeezed into ~1000px of it: the sidebar ends up narrow, the
 * reading column narrower still, and the rest of the monitor goes unused.
 *
 * This pulls the docs shell back out to the viewport edges from wherever the
 * theme placed it. `50% - 50vw` is measured against the container, so it works
 * for any centred wrapper without needing to know the theme's markup.
 *
 * overflow-x: clip rather than hidden — hidden would make <body> a scroll
 * container and break every sticky element inside, which is most of this design.
 */
body.docnest-fullwidth {
	overflow-x: clip;
}

body.docnest-fullwidth .docnest-page {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* Page builders love a stacking context; keep the bar above theme chrome. */
body.docnest-fullwidth .docnest-bar {
	z-index: 30;
}

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

/*
 * Machine-generated titles like 30_01_01_Detailed View_DW have no natural break
 * points, so breaking anywhere produced "30_01_01_Detail / ed View_DW". Two
 * lines then ellipsis keeps rows scannable and the same height; the full title
 * is on the element as a tooltip.
 */
.docnest-tree__text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* A match must stay visible even when the line it sits on is clamped away. */
.docnest-tree__item[data-docnest-hit="1"] .docnest-tree__text {
	-webkit-line-clamp: 3;
}

/* --- Quieter hierarchy ---------------------------------------------------- */

/*
 * The guides were doing too much: a saturated rule on every level competed with
 * the accent trace that actually tells you where you are.
 */
.docnest-nav--guides .docnest-tree__item > ul {
	border-left-color: var(--dn-line-soft);
}

.docnest-tree__item.is-current > .docnest-tree__row {
	background: var(--dn-accent-soft);
	box-shadow: none;
}

/* Keyboard focus should read as focus, not as a second selected row. */
.docnest-tree__item.is-kb-focus > .docnest-tree__row > .docnest-tree__link {
	background: transparent;
}

/* --- Content type scale --------------------------------------------------- */

/*
 * H1 was competing with the first H2 at these title lengths. Scale by ratio and
 * let the long machine titles shrink rather than wrap three times.
 */
.docnest-doc__title {
	font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.35rem);
	line-height: 1.18;
	letter-spacing: -0.021em;
	overflow-wrap: break-word;
}

.docnest-doc__body h2 {
	font-size: 1.35em;
	line-height: 1.3;
}

.docnest-doc__body h3 {
	font-size: 1.12em;
}

.docnest-doc__body h4 {
	font-size: 1em;
}

/* Breadcrumbs on a deep tree should be one quiet line, not a stacked list. */
.docnest-breadcrumbs {
	row-gap: 2px;
	line-height: 1.5;
}

.docnest-breadcrumbs a,
.docnest-breadcrumbs [aria-current="page"] {
	max-width: 22ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Wide monitors -------------------------------------------------------- */

@media (min-width: 1600px) {
	.docnest-shell {
		grid-template-columns: 320px minmax(0, 1fr) 280px;
	}

	.docnest-shell__main {
		padding-inline: 80px;
	}
}

/* --- Narrow desktop: drop the TOC before the sidebar ---------------------- */

@media (min-width: 1025px) and (max-width: 1240px) {
	.docnest-shell,
	.docnest-shell--no-toc {
		grid-template-columns: var(--dn-sidebar-w, 300px) minmax(0, 1fr);
	}

	.docnest-shell__toc {
		display: none;
	}

	.docnest-shell__main {
		padding-inline: 40px;
	}
}

/* ================================== 13. Accordion sidebar ================= */

/*
 * Two levels only: module headings, each opening to a flat list of pages.
 *
 * The markup is identical to tree mode on purpose — same classes, same data
 * attributes — so filtering, highlighting, keyboard navigation, open-state
 * persistence and the height animation all keep working untouched. Only the
 * appearance differs, which is what these rules do.
 */

.docnest-nav--accordion {
	--dn-acc-gap: 2px;
}

/* --- Module headings ------------------------------------------------------ */

.docnest-nav--accordion .docnest-tree--level-1 > .docnest-tree__item + .docnest-tree__item {
	margin-top: var(--dn-acc-gap);
}

.docnest-nav--accordion .docnest-tree--level-1 > .docnest-tree__item > .docnest-tree__row {
	min-height: 40px;
	padding-right: 8px;
	border-radius: 8px;
}

.docnest-nav--accordion .docnest-tree--level-1 > .docnest-tree__item > .docnest-tree__row:hover {
	background: var(--dn-raised);
}

.docnest-nav--accordion .docnest-tree--level-1 > .docnest-tree__item > .docnest-tree__row > .docnest-tree__link {
	padding: 8px 6px 8px 2px;
	font-size: 14.5px;
	font-weight: 560;
	line-height: 1.35;
	color: var(--dn-ink);
	letter-spacing: -0.006em;
}

/* The chevron is its own hit target, so a module that is also a page stays
   openable and readable at once. */
.docnest-nav--accordion .docnest-tree__toggle {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-left: 2px;
	color: var(--dn-ink-3);
	border-radius: 5px;
}

.docnest-nav--accordion .docnest-tree__toggle:hover {
	color: var(--dn-ink);
	background: transparent;
}

.docnest-nav--accordion .docnest-chevron {
	width: 13px;
	height: 13px;
	transition: transform 0.22s var(--dn-ease);
}

/* A module with no pages beneath it gets no chevron and no phantom indent. */
.docnest-nav--accordion .docnest-tree--level-1 > .docnest-tree__item > .docnest-tree__row > .docnest-tree__leaf {
	flex: 0 0 22px;
	width: 22px;
	margin-left: 2px;
}

.docnest-nav--accordion .docnest-tree__leaf::after {
	display: none;
}

/* --- The flat page list -------------------------------------------------- */

.docnest-nav--accordion .docnest-tree__item > ul {
	margin: 2px 0 6px;
	padding-left: 0;
	margin-left: 13px;
	border-left: 1px solid var(--dn-line);
}

.docnest-nav--accordion .docnest-tree--level-2 > .docnest-tree__item + .docnest-tree__item {
	margin-top: 1px;
}

.docnest-nav--accordion .docnest-tree--level-2 > .docnest-tree__item > .docnest-tree__row {
	min-height: 34px;
	padding-left: 0;
	border-radius: 8px;
}

.docnest-nav--accordion .docnest-tree--level-2 > .docnest-tree__item > .docnest-tree__row > .docnest-tree__leaf {
	display: none;
}

.docnest-nav--accordion .docnest-tree--level-2 > .docnest-tree__item > .docnest-tree__row > .docnest-tree__link {
	padding: 7px 10px 7px 16px;
	font-size: 14px;
	font-weight: 450;
	line-height: 1.35;
	color: var(--dn-ink-2);
	border-radius: 8px;
}

.docnest-nav--accordion .docnest-tree--level-2 > .docnest-tree__item > .docnest-tree__row:hover > .docnest-tree__link {
	color: var(--dn-ink);
}

.docnest-nav--accordion .docnest-tree--level-2 > .docnest-tree__item > .docnest-tree__row:hover {
	background: var(--dn-raised);
}

/* --- Selected page ------------------------------------------------------- */

/*
 * The reference marks the current page with an outlined pill rather than a fill,
 * which stays legible against the hover state on the row above it.
 */
.docnest-nav--accordion .docnest-tree__item.is-current > .docnest-tree__row {
	background: var(--dn-accent-soft);
	box-shadow: inset 0 0 0 1px var(--dn-accent, #1668d6);
}

.docnest-nav--accordion .docnest-tree__item.is-current > .docnest-tree__row > .docnest-tree__link {
	color: var(--dn-ink);
	font-weight: 550;
}

/* The ancestor trace has nothing to trace in two levels; keep it off. */
.docnest-nav--accordion .docnest-tree__item.is-current > .docnest-tree__row::before,
.docnest-nav--accordion .docnest-tree__item.is-ancestor > .docnest-tree__row::before {
	display: none;
}

.docnest-nav--accordion .docnest-tree__item.is-ancestor > .docnest-tree__row > .docnest-tree__link {
	color: var(--dn-ink);
	font-weight: 560;
}

/* Guides stay a hairline in both states; the pill does the work. */
.docnest-nav--accordion.docnest-nav--guides .docnest-tree__item.is-ancestor > ul,
.docnest-nav--accordion.docnest-nav--guides .docnest-tree__item.is-current > ul {
	border-left-color: var(--dn-line);
}

/* --- Draft marker -------------------------------------------------------- */

/* Quieter than the tree's dot: a thin amber tick at the row's end. */
.docnest-nav--accordion .docnest-tree__item.is-unpublished > .docnest-tree__row > .docnest-tree__link::after {
	content: "";
	flex: 0 0 5px;
	width: 5px;
	height: 5px;
	margin-left: auto;
	border-radius: 50%;
	background: #d3900c;
}

/* ========================================================= 14. Print */

/*
 * Sticky panes and paged media do not get along: a pinned element is resolved
 * against the page box, so both rails would either repeat on every sheet or
 * land on top of the prose. There is also nothing useful about printing a
 * navigation tree or an outline of links you cannot click — the article is the
 * artefact. So the layout unwinds to a single column and the chrome goes away.
 */
@media print {
	.docnest-shell,
	.docnest-shell--no-toc,
	.docnest-shell.is-nav-collapsed {
		display: block;
		max-width: none;
		border: 0;
	}

	.docnest-shell__nav,
	.docnest-shell__toc,
	.docnest-bar,
	.dn-rail,
	.docnest-scrim,
	.docnest-toc-inline,
	.dn-split,
	.docnest-copy-link,
	.docnest-pager {
		display: none !important;
	}

	.docnest-shell__main {
		padding: 0;
		background: none;
	}

	.docnest-doc {
		max-width: none;
		margin-inline: 0;
	}

	/* Nothing is pinned any more, so headings need no landing offset. */
	.docnest-doc__body h2,
	.docnest-doc__body h3,
	.docnest-doc__body h4 {
		scroll-margin-top: 0;
		break-after: avoid;
		page-break-after: avoid;
	}

	.docnest-doc__body pre,
	.docnest-doc__body table,
	.docnest-doc__body figure,
	.docnest-doc__body blockquote {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/*
	 * A link's destination is invisible on paper. Print it once, beside the
	 * text, skipping in-page anchors and anything already showing its own URL.
	 */
	.docnest-doc__body a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}