/* LegalAtoms manual help center — three-pane doc shell (sidebar · prose · TOC).
   Ports the jdivorce-ui in-app doc site into the Harbor design system with the
   Libre Caslon editorial face (same face as the blog). Namespaced la-man-*;
   layered after tokens.css + legalatoms-gutenberg.css + legalatoms-prose.css.
   Enqueued only on manual singles. Theme-aware via [data-theme]; motion honors
   prefers-reduced-motion through the tokens.css .la-page * guard. */

body.la-manual {
	--la-man-header: 68px; /* fixed site-header height */
	--la-man-sidebar-w: 280px;
	--la-man-toc-w: 240px;
	padding-top: var(--la-man-header); /* clear the fixed header (no la-chrome-off here) */
	background: var(--surface-page);
}

/* Header/footer wordmark to the Caslon Text face (base uses --font-display). */
body.la-manual .la-site-header__wordmark,
body.la-manual .la-site-footer__wordmark {
	font-family: var(--font-heading);
}

.la-man-ic {
	width: 18px;
	height: 18px;
	flex: none;
}

/* ============================================================
   Layout — three-pane grid, centered.
   ============================================================ */
.la-man-shell {
	display: grid;
	grid-template-columns: var(--la-man-sidebar-w) minmax(0, 800px) var(--la-man-toc-w);
	justify-content: center;
	gap: var(--space-6);
	align-items: start;
	max-width: 1460px;
	margin: 0 auto;
	padding: var(--space-6) var(--space-6) var(--space-9);
}

/* ============================================================
   Sidebar (F2 accordion + F3 pin) — sticky, scrolls internally.
   ============================================================ */
.la-man-sidebar {
	position: sticky;
	top: calc(var(--la-man-header) + var(--space-5));
	align-self: start;
	max-height: calc(100vh - var(--la-man-header) - var(--space-5));
	min-width: 0;
}
.la-man-sidebar__inner {
	max-height: calc(100vh - var(--la-man-header) - var(--space-5));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 6px;
	scrollbar-width: thin;
}

.la-man-sidebar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}
.la-man-sidebar__home {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--text-heading);
	font: 400 1.15rem/1 var(--font-heading);
	letter-spacing: -0.01em;
	text-decoration: none;
}
.la-man-sidebar__home .la-man-ic {
	color: var(--la-navy-500);
	width: 19px;
	height: 19px;
}
.la-man-sidebar__home:hover {
	color: var(--la-navy-700);
}
.la-man-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--text-muted);
	cursor: pointer;
	transition: color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.la-man-pin:hover {
	color: var(--text-heading);
	background: var(--surface-subtle);
}
.la-man-pin[aria-pressed="false"] {
	color: var(--la-navy-500);
	border-color: var(--border-default);
}
.la-man-pin:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Search trigger button */
.la-man-searchtrigger {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	margin-bottom: var(--space-5);
	padding: 9px 12px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	color: var(--text-muted);
	font: var(--text-body-sm);
	cursor: pointer;
	text-align: left;
	transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}
.la-man-searchtrigger:hover {
	border-color: var(--la-navy-400);
	background: var(--surface-subtle);
}
.la-man-searchtrigger:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
.la-man-searchtrigger .la-man-ic {
	width: 16px;
	height: 16px;
	color: var(--text-muted);
}
.la-man-searchtrigger > span {
	flex: 1;
}
.la-man-kbd,
.la-man-palette__foot kbd,
.la-man-hero__search kbd {
	font: var(--text-mono-sm);
	color: var(--text-secondary);
	background: var(--surface-subtle);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm);
	padding: 1px 6px;
	line-height: 1.4;
}

/* Accordion sections */
.la-man-nav__section {
	border-top: 1px solid var(--border-default);
}
.la-man-nav__section:first-child {
	border-top: none;
}
.la-man-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	width: 100%;
	padding: 11px 4px;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--text-secondary);
	text-align: left;
}
.la-man-nav__toggle:hover {
	color: var(--text-heading);
}
.la-man-nav__toggle:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}
.la-man-nav__label {
	font: 600 0.9375rem/1.3 var(--font-sans);
	letter-spacing: 0.005em;
}
.la-man-nav__chev {
	display: inline-flex;
	color: var(--text-muted);
	transition: transform var(--duration-base) var(--ease-out);
}
.la-man-nav__chev .la-man-ic {
	width: 16px;
	height: 16px;
}
.la-man-nav__section[data-open="true"] .la-man-nav__chev {
	transform: rotate(180deg);
}

/* Panel height animation via grid-rows 0fr -> 1fr */
.la-man-nav__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--duration-base) var(--ease-out);
}
.la-man-nav__section[data-open="true"] .la-man-nav__panel {
	grid-template-rows: 1fr;
}
.la-man-nav__panel-inner {
	overflow: hidden;
	min-height: 0;
}
.la-man-nav__list {
	list-style: none;
	margin: 0 0 var(--space-3);
	padding: 0;
}
.la-man-nav__link {
	display: block;
	padding: 6px 10px;
	margin: 1px 0;
	border-radius: var(--radius-sm);
	color: var(--text-body);
	font: 400 0.9rem/1.4 var(--font-sans);
	text-decoration: none;
	transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.la-man-nav__link:hover {
	background: var(--surface-subtle);
	color: var(--text-heading);
}
.la-man-nav__link.is-active {
	background: var(--surface-tint);
	color: var(--text-heading);
	font-weight: 500;
}
.la-man-nav__link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
.la-man-nav__group {
	margin: var(--space-2) 0 var(--space-1);
}
.la-man-nav__grouplabel {
	margin: 0 0 2px;
	padding: 0 10px;
	color: var(--text-muted);
	font: var(--text-eyebrow);
	font-size: 0.6875rem;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}
.la-man-nav__group .la-man-nav__list {
	margin-bottom: var(--space-2);
}
.la-man-nav__group .la-man-nav__link {
	padding-left: 16px;
}

/* ============================================================
   Main column — breadcrumbs, article, pager.
   ============================================================ */
.la-man-main {
	min-width: 0;
}
.la-man-crumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin: 0 0 var(--space-5);
	font: 400 0.875rem/1.4 var(--font-sans);
	color: var(--text-muted);
}
.la-man-crumb a {
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease-out);
}
.la-man-crumb a:hover {
	color: var(--text-link);
}
.la-man-crumb__sep {
	display: inline-flex;
	color: var(--border-strong);
}
.la-man-crumb__sep .la-man-ic {
	width: 13px;
	height: 13px;
}
.la-man-crumb__current {
	color: var(--text-heading);
}

/* The Beaver Builder theme skin styles bare `h1` (color + IBM Plex Sans) with
   enough weight to beat a class selector — prose.css fights the same battle for
   article headings. Win the title's face/color with !important so it renders in
   Caslon Display and stays theme-aware in dark mode. */
.la-man-article__title {
	margin: 0 0 var(--space-3);
	color: var(--text-heading) !important;
	font-family: var(--font-display) !important;
	font-size: clamp(2.1rem, 3.6vw, 2.9rem) !important;
	font-weight: 400 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.la-man-article__date {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 var(--space-6);
	color: var(--text-muted);
	font: var(--text-mono-sm);
}
.la-man-article__date .la-man-ic {
	width: 15px;
	height: 15px;
}
.la-man-article__date time {
	color: var(--text-secondary);
}

/* Article body reuses legalatoms-prose.css (.la-prose). Step the section
   headers onto the Caslon Text cut and h3 onto Public Sans (prose.css maps
   h1–h3 to --font-display = Caslon Display), matching the blog editorial face.
   scroll-margin so TOC anchor jumps clear the fixed header. */
.la-manual .la-prose {
	margin-left: 0;
	max-width: none;
}
.la-manual .la-prose h2 {
	font-family: var(--font-heading) !important;
}
.la-manual .la-prose h3 {
	font-family: var(--font-sans) !important;
	font-weight: 600 !important;
}
.la-manual .la-prose :is(h2, h3, h4) {
	scroll-margin-top: calc(var(--la-man-header) + 20px);
}

/* Prev / Next (F6) */
.la-man-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	margin: var(--space-8) 0 var(--space-6);
	border-top: 1px solid var(--border-default);
	padding-top: var(--space-6);
}
.la-man-pager__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	text-decoration: none;
	transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.la-man-pager__card--next {
	text-align: right;
	align-items: flex-end;
}
.la-man-pager__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--la-navy-400);
}
.la-man-pager__dir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-muted);
	font: var(--text-mono-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.la-man-pager__dir .la-man-ic {
	width: 15px;
	height: 15px;
}
.la-man-pager__title {
	color: var(--text-heading);
	font: 500 1.0625rem/1.35 var(--font-sans);
}

/* ============================================================
   On this page (F4) — sticky, sliding indicator.
   ============================================================ */
.la-man-toc {
	position: sticky;
	top: calc(var(--la-man-header) + var(--space-5));
	align-self: start;
	max-height: calc(100vh - var(--la-man-header) - var(--space-5));
	overflow-y: auto;
	min-width: 0;
}
.la-man-toc__title {
	margin: 0 0 var(--space-3);
	color: var(--text-muted);
	font: var(--text-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}
.la-man-toc__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
.la-man-toc__link {
	display: block;
	padding: 6px 0 6px 16px;
	color: var(--text-secondary);
	font: 500 0.875rem/1.4 var(--font-sans);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease-out);
}
.la-man-toc__link.lvl-3 {
	padding-left: 28px;
	font-size: 0.84rem;
}
.la-man-toc__link.lvl-4 {
	padding-left: 40px;
	font-size: 0.84rem;
}
.la-man-toc__link:hover {
	color: var(--text-heading);
}
.la-man-toc__link.is-active {
	color: var(--text-heading);
	font-weight: 600;
}
.la-man-toc__marker {
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: 0;
	background: var(--la-navy-500);
	border-radius: 2px;
	transition: transform var(--duration-slow) var(--ease-out), height var(--duration-slow) var(--ease-out);
}

/* ============================================================
   Mobile top bar + drawer (F8) + F3 floating overlay.
   ============================================================ */
.la-man-topbar {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	position: sticky;
	top: var(--la-man-header);
	z-index: 900;
	padding: 10px 16px;
	background: color-mix(in srgb, var(--surface-page) 88%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border-default);
}
.la-man-topbar__menu {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: none;
	background: none;
	color: var(--text-heading);
	font: 600 0.95rem/1 var(--font-sans);
	cursor: pointer;
}
.la-man-topbar__search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	color: var(--text-secondary);
	cursor: pointer;
}

/* Scrim (mobile drawer) */
.la-man-scrim {
	position: fixed;
	inset: 0;
	z-index: 1100;
	background: var(--surface-overlay);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-out);
}
.la-man-scrim:not([hidden]) {
	opacity: 1;
}

/* Floating "show sidebar" / search FAB cluster (created by JS when unpinned) */
.la-man-fab {
	position: fixed;
	left: 18px;
	top: calc(var(--la-man-header) + 16px);
	z-index: 1050;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.la-man-fab button {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-pill);
	background: var(--surface-card);
	color: var(--text-secondary);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	transition: color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.la-man-fab button:hover {
	color: var(--la-navy-600);
	border-color: var(--la-navy-400);
	transform: translateY(-1px);
}

/* --- F3 unpinned: sidebar leaves the grid, reveals as a floating overlay --- */
@media (min-width: 1025px) {
	/* Keep the grid tracks exactly as pinned so nothing re-centers — the main +
	   TOC columns must NOT shift left when the sidebar collapses. The sidebar
	   goes position:fixed (out of flow, floating overlay below); pin main + TOC
	   to their original tracks and leave column 1 empty as the FAB / panel gutter. */
	.la-man-shell.is-unpinned .la-man-main {
		grid-column: 2;
	}
	.la-man-shell.is-unpinned .la-man-toc {
		grid-column: 3;
	}
	.la-man-shell.is-unpinned .la-man-sidebar {
		position: fixed;
		left: 0;
		top: var(--la-man-header);
		width: 300px;
		max-height: calc(100vh - var(--la-man-header));
		padding: var(--space-5) var(--space-4) var(--space-5) var(--space-5);
		background: var(--surface-card);
		border-right: 1px solid var(--border-default);
		border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
		box-shadow: var(--shadow-lg);
		z-index: 1200;
		transform: translateX(-102%);
		opacity: 0;
		pointer-events: none;
		transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-base) var(--ease-out);
	}
	.la-man-shell.is-unpinned .la-man-sidebar__inner {
		max-height: calc(100vh - var(--la-man-header) - var(--space-6));
	}
	.la-man-shell.is-unpinned.is-revealed .la-man-sidebar {
		transform: translateX(0);
		opacity: 1;
		pointer-events: auto;
	}
}

/* ============================================================
   ⌘K search palette (F1) — JS builds the DOM; styled here.
   Phase 2 searches sidebar titles; Phase 3 swaps in the scored index.
   ============================================================ */
.la-man-palette {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 16px 16px;
	/* Modal open/close timing (scale + fade). Slower, springy open; snappy
	   close. --ease-out is the house springy ease. --modal-close-dur must stay
	   in sync with PALETTE_CLOSE_MS in legalatoms-manual.js. */
	--modal-open-dur: 250ms;
	--modal-close-dur: 150ms;
	--modal-scale: 0.96;
}
.la-man-palette[hidden] {
	display: none;
}
.la-man-palette__backdrop {
	position: absolute;
	inset: 0;
	background: var(--surface-overlay);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity var(--modal-open-dur) var(--ease-out);
}
.la-man-palette__box {
	position: relative;
	width: 600px;
	max-width: 92vw;
	max-height: 76vh;
	display: flex;
	flex-direction: column;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	transform: scale(var(--modal-scale));
	transform-origin: center;
	opacity: 0;
	pointer-events: none;
	transition:
		transform var(--modal-open-dur) var(--ease-out),
		opacity var(--modal-open-dur) var(--ease-out);
	will-change: transform, opacity;
}
/* Open — box scales up from --modal-scale + fades in; backdrop fades in. */
.la-man-palette.is-open .la-man-palette__backdrop {
	opacity: 1;
}
.la-man-palette.is-open .la-man-palette__box {
	transform: scale(1);
	opacity: 1;
	pointer-events: auto;
}
/* Close — quicker scale down + fade out. JS keeps the node mounted for
   --modal-close-dur, then sets [hidden] and drops .is-closing. */
.la-man-palette.is-closing .la-man-palette__backdrop {
	opacity: 0;
	transition: opacity var(--modal-close-dur) var(--ease-out);
}
.la-man-palette.is-closing .la-man-palette__box {
	transform: scale(var(--modal-scale));
	opacity: 0;
	pointer-events: none;
	transition:
		transform var(--modal-close-dur) var(--ease-out),
		opacity var(--modal-close-dur) var(--ease-out);
}
.la-man-palette__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border-default);
}
.la-man-palette__head .la-man-ic {
	color: var(--text-muted);
	width: 19px;
	height: 19px;
}
.la-man-palette__input {
	flex: 1;
	border: none;
	background: none;
	outline: none;
	color: var(--text-body);
	font: var(--text-body);
}
.la-man-palette__input::placeholder {
	color: var(--text-muted);
}
.la-man-palette__close {
	display: inline-flex;
	border: none;
	background: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 4px;
	border-radius: var(--radius-sm);
}
.la-man-palette__close:hover {
	color: var(--text-heading);
	background: var(--surface-subtle);
}
.la-man-palette__results {
	list-style: none;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	min-height: 0;
}
.la-man-palette__result {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	border: none;
	border-radius: var(--radius-md);
	background: none;
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	color: inherit;
}
.la-man-palette__result.is-active,
.la-man-palette__result:hover {
	background: var(--surface-subtle);
}
.la-man-palette__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: var(--radius-sm);
	background: var(--surface-tint);
	color: var(--la-navy-500);
}
.la-man-palette__chip .la-man-ic {
	width: 17px;
	height: 17px;
}
.la-man-palette__text {
	min-width: 0;
	flex: 1;
}
.la-man-palette__rtitle {
	display: block;
	color: var(--text-heading);
	font: 500 0.95rem/1.3 var(--font-sans);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.la-man-palette__rcrumb {
	display: block;
	margin-top: 2px;
	color: var(--text-muted);
	font: var(--text-mono-sm);
	font-size: 0.75rem;
}
.la-man-palette__rtitle mark {
	background: var(--la-navy-100);
	color: var(--la-navy-800);
	border-radius: 2px;
	padding: 0 1px;
}
.la-man-palette__empty {
	padding: 28px 16px;
	text-align: center;
	color: var(--text-muted);
	font: var(--text-body-sm);
}
.la-man-palette__foot {
	display: flex;
	gap: 16px;
	padding: 10px 16px;
	border-top: 1px solid var(--border-default);
	color: var(--text-muted);
	font: var(--text-body-sm);
}
.la-man-palette__foot span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Dark-mode spot fixes (most colors flip via tokens). */
:root[data-theme="dark"] .la-man-palette__rtitle mark {
	background: var(--la-navy-700);
	color: #fff;
}
:root[data-theme="dark"] .la-man-searchtrigger,
:root[data-theme="dark"] .la-man-topbar__search {
	background: var(--surface-subtle);
}

/* Theme toggle + the dark-mode header/footer/burger flip are shared chrome —
   they now live once in legalatoms-gutenberg.css scoped to body.la-page (loaded
   site-wide before this sheet), so the blog and manual surfaces share one source
   of truth. Manual keeps only its own light-mode divergence: the header stays the
   base white glass (no navy retint like the blog's FA frame). */

/* ============================================================
   Beaver Builder theme reset — the skin's global button:hover (coral fill +
   white text) and a:hover (underline) leak onto the shell's own buttons and
   links. Neutralize, scoped to body.la-manual so it beats the bare
   button:hover / a:hover selectors. Prose article links keep their underline.
   ============================================================ */
/* The skin recolors button :hover, :focus AND :active coral — cover all three
   so a just-clicked (still-focused) accordion header / pin doesn't stay red. */
body.la-manual .la-man-nav__toggle:is(:hover, :focus, :active) {
	background: var(--surface-subtle);
	color: var(--text-heading);
	border: none;
}
body.la-manual .la-man-searchtrigger:is(:hover, :focus, :active) {
	background: var(--surface-subtle);
	color: var(--text-secondary);
	border-color: var(--la-navy-400);
}
body.la-manual .la-man-searchtrigger:is(:hover, :focus) .la-man-ic {
	color: var(--text-secondary);
}
body.la-manual .la-man-pin:is(:hover, :focus, :active) {
	background: var(--surface-subtle);
	color: var(--text-heading);
	border-color: var(--border-default);
}
body.la-manual .la-man-topbar__menu:is(:hover, :focus, :active) {
	background: transparent;
	color: var(--text-heading);
	border: none;
}
body.la-manual .la-man-topbar__search:is(:hover, :focus, :active) {
	background: var(--surface-subtle);
	color: var(--text-heading);
	border-color: var(--la-navy-400);
}
body.la-manual .la-man-fab button:is(:hover, :focus, :active) {
	background: var(--surface-card);
	color: var(--la-navy-600);
	border-color: var(--la-navy-400);
}
body.la-manual .la-man-palette__close:is(:hover, :focus, :active) {
	background: var(--surface-subtle);
	color: var(--text-heading);
	border: none;
}
body.la-manual .la-man-palette__result:is(:hover, :focus) {
	background: var(--surface-subtle);
}
body.la-manual .la-man-hero__search:is(:hover, :focus, :active) {
	background: var(--surface-card);
	color: var(--text-secondary);
	border-color: var(--la-navy-400);
	box-shadow: var(--shadow-md);
}
body.la-manual .la-man-nav__link:is(:hover, :focus),
body.la-manual .la-man-sidebar__home:is(:hover, :focus),
body.la-manual .la-man-crumb a:is(:hover, :focus),
body.la-manual .la-man-toc__link:is(:hover, :focus),
body.la-manual .la-man-pager__card:is(:hover, :focus),
body.la-manual .la-man-palette__result:is(:hover, :focus),
body.la-manual .la-man-hero__search:is(:hover, :focus),
body.la-manual .la-man-cat__link:is(:hover, :focus),
body.la-manual .la-man-cat__more:is(:hover, :focus) {
	text-decoration: none;
}

/* ============================================================
   /manual index (landing) — masthead + category grid.
   ============================================================ */
/* The index reuses the shell, sidebar + main only (no TOC rail). */
.la-man-shell--index {
	grid-template-columns: var(--la-man-sidebar-w) minmax(0, 1fr);
}
.la-man-hero {
	margin: 0 0 var(--space-7);
	padding: clamp(var(--space-7), 6vw, var(--space-8)) var(--space-6);
	background: var(--gradient-hero); /* theme-aware (flips in dark) */
	border: 1px solid var(--border-default);
	border-radius: var(--radius-xl);
	text-align: center;
}
.la-man-hero__inner {
	max-width: 640px;
	margin: 0 auto;
}
.la-man-hero__eyebrow {
	margin: 0 0 var(--space-3);
	color: var(--text-muted);
	font: var(--text-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}
/* !important to beat the BB skin's bare h1 rule (IBM Plex Sans + dark color),
   same as the article title. */
.la-man-hero__title {
	margin: 0 0 var(--space-3);
	color: var(--text-heading) !important;
	font-family: var(--font-display) !important;
	font-size: clamp(2.4rem, 5vw, 3.4rem) !important;
	font-weight: 400 !important;
	line-height: 1.06 !important;
	letter-spacing: -0.01em;
}
.la-man-hero__dek {
	margin: 0 auto var(--space-6);
	max-width: 46ch;
	color: var(--text-secondary);
	font: var(--text-body-lg);
}
.la-man-hero__search {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 360px;
	max-width: 100%;
	padding: 12px 18px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	color: var(--text-muted);
	font: var(--text-body);
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.la-man-hero__search .la-man-ic {
	color: var(--text-muted);
}
.la-man-hero__search > span {
	flex: 1;
	text-align: left;
}
.la-man-index__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-5);
}
.la-man-cat {
	display: flex;
	flex-direction: column;
	padding: var(--space-5);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.la-man-cat:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--la-navy-400);
}
.la-man-cat__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--border-default);
}
.la-man-cat__name {
	color: var(--text-heading);
	font: 400 1.4rem/1.15 var(--font-heading);
	letter-spacing: -0.01em;
}
.la-man-cat__count {
	flex: none;
	color: var(--text-muted);
	font: var(--text-mono-sm);
}
.la-man-cat__list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}
.la-man-cat__link {
	display: block;
	padding: 6px 0;
	color: var(--text-body);
	font: 400 0.95rem/1.45 var(--font-sans);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out);
}
.la-man-cat__link:hover {
	color: var(--text-link);
}
.la-man-cat__more {
	display: inline-block;
	margin-top: var(--space-3);
	color: var(--text-link);
	font: 600 0.875rem/1 var(--font-sans);
	text-decoration: none;
}
.la-man-cat__more:hover {
	color: var(--la-navy-800);
}

/* ============================================================
   Responsive.
   ============================================================ */
@media (max-width: 1024px) {
	.la-man-shell {
		grid-template-columns: 250px minmax(0, 1fr);
		max-width: 900px;
	}
	.la-man-toc {
		display: none;
	}
	/* The floating unpin (FAB cluster + overlay sidebar) is desktop-only — its
	   CSS is gated to >=1025px, so below that the sidebar is always docked. Hide
	   the FAB and pin button here; otherwise a persisted is-unpinned state (from a
	   wider session) leaks the floating FABs alongside the docked sidebar. */
	.la-man-fab,
	.la-man-pin {
		display: none;
	}
}

@media (max-width: 768px) {
	.la-man-shell {
		display: block;
		padding: 0 16px var(--space-8);
	}
	.la-man-topbar {
		display: flex;
		margin: 0 -16px var(--space-5);
	}
	/* Sidebar becomes an off-canvas drawer spanning the FULL viewport height,
	   including the header band — it covers the site header (z-index 1200 > the
	   header's 1000), so it reads as one panel from the very top of the screen.
	   An explicit dvh/JS height (not bottom:0, which doesn't stretch this fixed
	   element and ignores the collapsing mobile browser chrome) fills to the
	   viewport bottom so page content never shows below the drawer. */
	.la-man-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		width: 300px;
		max-width: 85vw;
		max-height: none;
		/* Full viewport height. --la-drawer-h is set by JS from the real
		   window.innerHeight (bulletproof against dvh/zoom quirks); the calc()
		   chain is the no-JS fallback (dvh, then vh). */
		height: 100vh;
		height: 100dvh;
		height: var(--la-drawer-h, 100dvh);
		z-index: 1200;
		padding: var(--space-5) var(--space-4);
		background: var(--surface-card);
		border-right: 1px solid var(--border-default);
		box-shadow: var(--shadow-lg);
		transform: translateX(-102%);
		transition: transform var(--duration-slow) var(--ease-out);
		/* Column layout so the scrolling menu (__inner) grows to fill the
		   full-height drawer and scrolls internally. */
		display: flex;
		flex-direction: column;
	}
	.la-man-sidebar__inner {
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
	}
	.la-man-shell.is-drawer-open .la-man-sidebar {
		transform: translateX(0);
	}
	.la-man-pin {
		display: none; /* pin is a desktop affordance */
	}
	.la-man-main {
		padding-top: var(--space-3);
	}
	.la-man-pager {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.la-man-shell {
		padding: 0 14px var(--space-7);
	}
}

@media (max-width: 768px) {
	.la-man-hero {
		margin: 0 0 var(--space-5);
		padding: var(--space-7) var(--space-5);
	}
	.la-man-hero__search {
		min-width: 0;
		width: 100%;
	}
	.la-man-index__grid {
		grid-template-columns: 1fr;
	}
}