/* ═══════════════════════════════════════════════════════════════════
   bm-manual.css — manual template shell (single-manual_section.php
   ONLY). v1.0 — July 26, 2026.

   Shell only: two-column grid, left nav (collapse states + the approved
   2026-07-26 two-level current treatment), sidebar head/stamp,
   breadcrumb, prev/next pager, mobile "Sections" bar, the ☾/☀ theme
   toggle button, and the scoped dark/light layer. Typography, links and
   ALL content styling inherit from style.css + bm-anatomy.css — content
   is deliberately not restyled here.

   LIGHT values are copied VERBATIM from the theme stylesheets (light
   mode is pixel-identical to the blog; the theme itself is untouched):
     --bm-manual-page    #f8f8f8  style.css body background
     --bm-manual-panel   #ffffff  style.css .blog-post-item / #masthead
     --bm-manual-side    #f8f8f8  style.css body background (nav column)
     --bm-manual-border  #ddd     style.css table/td/th border
     --bm-manual-heading #000     style.css h1–h6 color
     --bm-manual-ink     #555     style.css body color
     --bm-manual-soft    #666     style.css .posted-on color
   The accent stays #d40000 in BOTH modes (house accent — same red the
   bm-screen sidecar/PDF contract pins). Current-section tints are
   literal per-theme hex, NOT color-mix() (a mockup convenience only):
   #d40000 at 7% over each mode's panel —
     light: 7% #d40000 over #ffffff → #fceded
     dark:  7% #d40000 over #1f1f1e → #2c1d1c

   DARK layer: scoped to html[data-bm-theme="dark"] + the
   .single-manual_section body class — no other template can ever see
   it. The site header darkens via these scoped overrides only; theme
   header styles are never edited. bm-anatomy.css is re-skinned by
   overriding its :root custom properties at the same scope. Dark-mode
   LOGO treatment is DEFERRED (logo/toolbar changes pending separately):
   the logo renders as-is in dark mode.

   The html.bm-manual-js marker class (set pre-paint by the inline head
   snippet, see inc/manual.php) gates all JS-dependent chrome — the
   no-JS state is a fully expanded TOC, no Sections bar, no toggle.

   Breakpoints: theme ladder only (the min-width 1024px / max-width
   1023px pair the site header itself switches on). Never invent new
   breakpoints here.

   Deploy:   wp-content/themes/bm_theme/assets/css/bm-manual.css
   Enqueue:  wp_enqueue_style on is_singular('manual_section'),
             filemtime() version — see bm_theme_scripts().
   ═══════════════════════════════════════════════════════════════════ */

/* ── Theme layer variables ──────────────────────────────────────── */
body.single-manual_section {
	--bm-manual-page:       #f8f8f8;
	--bm-manual-panel:      #ffffff;
	--bm-manual-side:       #f8f8f8;
	--bm-manual-border:     #ddd;
	--bm-manual-heading:    #000;
	--bm-manual-ink:        #555;
	--bm-manual-soft:       #666;
	--bm-manual-accent:     #d40000;
	--bm-manual-current-bg: #fceded;
}

html[data-bm-theme="dark"] body.single-manual_section {
	--bm-manual-page:       #161615;
	--bm-manual-panel:      #1f1f1e;
	--bm-manual-side:       #1a1a19;
	--bm-manual-border:     #333331;
	--bm-manual-heading:    #e8e8e6;
	--bm-manual-ink:        #a5a5a1;
	--bm-manual-soft:       #7c7c78;
	--bm-manual-current-bg: #2c1d1c;

	/* bm-anatomy.css re-skin — same custom properties its rules consume.
	   (Derived vars like --bm-calc-ink resolve at :root declaration time,
	   so every one that matters in dark is overridden explicitly.) */
	--bm-ink:              #e8e8e6;
	--bm-ink-soft:         #a5a5a1;
	--bm-line:             #333331;
	--bm-code-bg:          #262624;
	--bm-code-band:        #2c2c2a;
	--bm-code-linenum:     #7c7c78;
	--bm-btn-bg:           #262624;
	--bm-btn-text:         #79c0ff;
	--bm-btn-border:       #3d3d3a;
	--bm-btn-border-hover: #79c0ff;
	--bm-note-bg:          #2a2415;
	--bm-warn-bg:          #2c1a18;
	--bm-row-alt:          #232322;
	--bm-step-thread:      #333331;
	--bm-calc-bg:          #1f1f1e;
	--bm-calc-ink:         #e8e8e6;
	--bm-tok-comment:      #8b949e;
	--bm-tok-number:       #ffa657;
	--bm-tok-keyword:      #79c0ff;
	--bm-tok-function:     #e8e8e6;
	--bm-tok-string:       #7ee787;
	--bm-tok-constant:     #79c0ff;
}

/* ── Shell: two-column grid ─────────────────────────────────────── */
.bm-manual-shell {
	display: grid;
	grid-template-columns: 265px minmax(0, 1fr);
	background-color: var(--bm-manual-panel);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06); /* matches .blog-post-item */
}

/* Degraded case (no manual term / bm-tools absent): no sidebar renders —
   the content must not fall into the 265px nav column. */
.bm-manual-shell--nonav {
	grid-template-columns: minmax(0, 1fr);
}

.bm-manual-sidebar {
	background-color: var(--bm-manual-side);
	border-right: 1px solid var(--bm-manual-border);
	padding: 18px 0 32px;
}

.bm-manual-main {
	min-width: 0;
	padding: 24px 36px 40px;
}

.bm-manual-main .entry-title {
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 14px;
}

/* ── Sidebar head: manual name + revision/firmware stamp ────────── */
.bm-manual-sidebar__head {
	padding: 0 18px 16px;
}

.bm-manual-sidebar__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--bm-manual-heading);
}

.bm-manual-sidebar__stamp {
	margin-top: 2px;
	font-size: 12px;
	color: var(--bm-manual-soft);
}

/* ── Left nav ───────────────────────────────────────────────────── */
.bm-manual-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
}

.bm-manual-nav a {
	display: block;
	padding: 6px 18px;
	color: var(--bm-manual-soft);
	text-decoration: none;
	line-height: 1.5;
}

.bm-manual-nav a:hover,
.bm-manual-nav a:focus {
	color: var(--bm-manual-heading);
}

/* Chapters are expand/collapse headers, never links (chapter URLs are
   never surfaced — a direct hit 301s to the first child). Explicit
   resets against the theme's global button rules (style.css Forms). */
.bm-manual-chapter__toggle {
	display: block;
	width: 100%;
	text-align: left;
	padding: 6px 18px;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	color: var(--bm-manual-heading);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: normal;
}

.bm-manual-chapter__toggle:hover,
.bm-manual-chapter__toggle:focus,
.bm-manual-chapter__toggle:active {
	background-color: transparent;
	color: var(--bm-manual-heading);
	outline: thin dotted;
}

.bm-manual-chapter__toggle::before {
	content: "\203A\00a0";
	color: var(--bm-manual-soft);
}

.bm-manual-chapter.is-open > .bm-manual-chapter__toggle::before {
	content: "\2304\00a0";
}

/* Collapse is chrome: only under the JS marker class, so the no-JS
   state is the complete, fully expanded TOC. */
html.bm-manual-js .bm-manual-chapter:not(.is-open) > ul {
	display: none;
}

.bm-manual-chapter ul a {
	padding-left: 36px;
}

/* Two-level current treatment (approved 2026-07-26, per the mockup):
   current section = thicker red left-bar + faint accent tint; parent
   chapter heading in accent red. */
.bm-manual-chapter.has-current > .bm-manual-chapter__toggle {
	color: var(--bm-manual-accent);
}

.bm-manual-nav li.is-current > a {
	background-color: var(--bm-manual-current-bg);
	border-left: 4px solid var(--bm-manual-accent);
	padding-left: 14px;
	color: var(--bm-manual-heading);
	font-weight: 600;
}

.bm-manual-chapter ul li.is-current > a {
	padding-left: 32px;
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.bm-manual-breadcrumb {
	font-size: 13px;
	color: var(--bm-manual-soft);
	margin-bottom: 16px;
}

.bm-manual-breadcrumb a {
	color: var(--bm-manual-soft);
	text-decoration: none;
}

.bm-manual-breadcrumb a:hover,
.bm-manual-breadcrumb a:focus {
	color: var(--bm-manual-accent);
}

/* ── Prev/next pager ────────────────────────────────────────────── */
.bm-manual-pager {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid var(--bm-manual-border);
	margin-top: 34px;
	padding-top: 16px;
	font-size: 14px;
}

.bm-manual-pager a {
	font-weight: 600;
	max-width: 48%;
	color: var(--bm-manual-accent);
	text-decoration: none;
}

.bm-manual-pager a:hover,
.bm-manual-pager a:focus {
	color: var(--bm-manual-heading);
}

.bm-manual-pager__next {
	margin-left: auto;
	text-align: right;
}

.bm-manual-pager svg {
	fill: currentColor;
	width: 14px;
	height: 14px;
}

/* ── Mobile "Sections" bar + theme toggle button ────────────────── */
.bm-manual-sectionsbar {
	display: none; /* mobile-only, and only once JS is confirmed */
}

.bm-manual-sections-toggle {
	background-color: var(--bm-manual-side);
	border: 0;
	border-radius: 0;
	padding: 12px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bm-manual-heading);
	text-transform: none;
	letter-spacing: normal;
	text-align: left;
	flex: 1;
	cursor: pointer;
}

.bm-manual-sections-toggle:hover,
.bm-manual-sections-toggle:focus,
.bm-manual-sections-toggle:active {
	background-color: var(--bm-manual-side);
	color: var(--bm-manual-heading);
}

.bm-manual-sections-toggle svg {
	fill: currentColor;
	width: 12px;
	height: 12px;
}

.bm-manual-theme-toggle {
	background-color: transparent;
	border: 1px solid var(--bm-manual-border);
	border-radius: 6px;
	padding: 5px 9px;
	font-size: 15px;
	line-height: 1;
	color: var(--bm-manual-soft);
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.bm-manual-theme-toggle:hover,
.bm-manual-theme-toggle:focus,
.bm-manual-theme-toggle:active {
	background-color: transparent;
	color: var(--bm-manual-heading);
	border-color: var(--bm-manual-soft);
}

/* ☾ shown in light mode (click = go dark), ☀ in dark (click = go light). */
.bm-manual-theme-toggle__sun {
	display: none;
}

html[data-bm-theme="dark"] .bm-manual-theme-toggle__moon {
	display: none;
}

html[data-bm-theme="dark"] .bm-manual-theme-toggle__sun {
	display: inline;
}

/* Desktop instance mounts into the header's right-side search area
   (see bm-manual.js); give it breathing room beside the search icon. */
.bm-manual-theme-toggle--desktop {
	margin-left: 6px;
}

/* ── Responsive (theme ladder: 1024 / 1023 pair) ────────────────── */
@media screen and (max-width: 1023px) {
	.bm-manual-shell {
		display: block;
	}

	.bm-manual-sidebar {
		border-right: 0;
		border-bottom: 1px solid var(--bm-manual-border);
	}

	/* With JS: nav collapses behind the Sections bar. Without JS the
	   bar never shows and the nav stays stacked above the content. */
	html.bm-manual-js .bm-manual-sectionsbar {
		display: flex;
		align-items: center;
		gap: 10px;
		background-color: var(--bm-manual-side);
		border: 1px solid var(--bm-manual-border);
		border-bottom: 0;
		padding-right: 12px;
	}

	html.bm-manual-js .bm-manual-sidebar {
		display: none;
	}

	html.bm-manual-js .bm-manual-sidebar.is-open {
		display: block;
	}

	.bm-manual-theme-toggle--desktop {
		display: none;
	}

	.bm-manual-main {
		padding: 20px 18px 32px;
	}
}

@media screen and (min-width: 1024px) {
	.bm-manual-theme-toggle--mobile {
		display: none;
	}
}

/* ── Dark layer: scoped element overrides ───────────────────────────
   Everything below only exists under html[data-bm-theme="dark"] on the
   manual body class. The header darkens HERE, never in style.css. */

html[data-bm-theme="dark"] body.single-manual_section {
	background-color: var(--bm-manual-page);
	color: var(--bm-manual-ink);
}

html[data-bm-theme="dark"] body.single-manual_section h1,
html[data-bm-theme="dark"] body.single-manual_section h2,
html[data-bm-theme="dark"] body.single-manual_section h3,
html[data-bm-theme="dark"] body.single-manual_section h4,
html[data-bm-theme="dark"] body.single-manual_section h5,
html[data-bm-theme="dark"] body.single-manual_section h6 {
	color: var(--bm-manual-heading);
}

/* Theme global a:hover/:active is #000 — invisible on dark. */
html[data-bm-theme="dark"] body.single-manual_section a:hover,
html[data-bm-theme="dark"] body.single-manual_section a:focus,
html[data-bm-theme="dark"] body.single-manual_section a:active {
	color: #fff;
}

/* Site header (inside the scoped dark region on manual pages; the logo
   itself is left as-is — dark-mode logo treatment is deferred). */
html[data-bm-theme="dark"] .single-manual_section #masthead {
	background-color: var(--bm-manual-panel);
}

html[data-bm-theme="dark"] .single-manual_section .navigation-menu a {
	color: var(--bm-manual-heading);
}

html[data-bm-theme="dark"] .single-manual_section .navigation-menu .nav-menu > li > a,
html[data-bm-theme="dark"] .single-manual_section .navigation-menu .nav-menu > ul > li > a {
	border-right-color: var(--bm-manual-border);
}

html[data-bm-theme="dark"] .single-manual_section .navigation-menu ul {
	background: var(--bm-manual-panel);
}

html[data-bm-theme="dark"] .single-manual_section .menu-toggle {
	color: var(--bm-manual-heading);
}

html[data-bm-theme="dark"] .single-manual_section .menu-toggle svg,
html[data-bm-theme="dark"] .single-manual_section .bm-search-toggle svg,
html[data-bm-theme="dark"] .single-manual_section .bm-search-close svg {
	fill: var(--bm-manual-heading);
}

html[data-bm-theme="dark"] .single-manual_section .bm-search-panel {
	background-color: var(--bm-manual-panel);
}

html[data-bm-theme="dark"] .single-manual_section .bm-search-panel .search-field {
	background-color: var(--bm-manual-page);
	border-color: var(--bm-manual-border);
	color: var(--bm-manual-ink);
}

/* Content-column hardcoded theme colors (style.css) that the anatomy
   variables don't reach. */
html[data-bm-theme="dark"] body.single-manual_section table,
html[data-bm-theme="dark"] body.single-manual_section td,
html[data-bm-theme="dark"] body.single-manual_section th {
	border-color: var(--bm-manual-border);
}

html[data-bm-theme="dark"] body.single-manual_section hr {
	background-color: var(--bm-manual-border);
}

/* Screenshots and figures: a subtle (slightly lifted) border in dark
   mode so light-UI captures don't glow against the dark panel. */
html[data-bm-theme="dark"] body.single-manual_section .bm-screen img,
html[data-bm-theme="dark"] body.single-manual_section .bm-screen__frame,
html[data-bm-theme="dark"] body.single-manual_section .bm-figure img {
	border-color: #4a4a46;
}