/* ==========================================================================
   BG7BAG Core — main.css
   Wikipedia-inspired, mobile-first reading styles for bg7bag.com rebuild.

   Rules of this file
   -------------------
   1. Exactly ONE stylesheet owns reading typography. Nothing else on the
      site may set body/h1-h6/p/a sizes — page templates have no <style>.
   2. NO !important anywhere. Specificity is kept deliberately low
      (single class or element+class) so nothing needs to fight it.
   3. Mobile-first: base rules are for the phone; @media (min-width: …)
      only *adds* desktop affordances (sidebar, sticky TOC).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	--bhi-font: Roboto, "Noto Sans SC", -apple-system, BlinkMacSystemFont,
		"Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
		Arial, sans-serif;
	--bhi-ink: #212121;
	--bhi-ink-soft: #5f6368;
	--bhi-ink-faint: #9aa0a6;
	--bhi-link: #0000ee;
	--bhi-link-visited: #551a8b;
	--bhi-border: #dadce0;
	--bhi-surface: #f8f9fa;
	--bhi-measure: 42rem; /* ~672px at 16px — Wikipedia-like line length */
	--bhi-radius: 8px;
	--bhi-tap: 48px; /* minimum touch target */
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

html body {
	font-family: var(--bhi-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--bhi-ink);
	background: #fff;
	-webkit-text-size-adjust: 100%;
}

html body p {
	margin: 0 0 1em;
	max-width: var(--bhi-measure);
}

/* Headings — Google Material scale, weight 500, Wikipedia-like rhythm.
   Line-heights are per-level (audited Google scale, Phase 12.4):
   H1 1.25 · H2 1.33 · H3 1.4 · H4 1.44 · H5/H6 1.4 — no group value. */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
	font-weight: 500;
	margin: 1.5em 0 0.5em;
	max-width: var(--bhi-measure);
	text-wrap: balance;
}

html body h1 { font-size: 2rem; line-height: 1.25; }      /* 32px */
html body h2 {
	font-size: 1.5rem;                 /* 24px */
	line-height: 1.33;
	padding-bottom: 0.25em;
	border-bottom: 1px solid var(--bhi-border);
}
html body h3 { font-size: 1.25rem; line-height: 1.4; }   /* 20px */
html body h4 { font-size: 1.125rem; line-height: 1.44; }  /* 18px */
html body h5 { font-size: 1rem; line-height: 1.4; }      /* 16px */
html body h6 {
	font-size: 0.875rem;              /* 14px */
	line-height: 1.4;
	color: var(--bhi-ink-soft);
}

/* Anchor affordance: hover a heading to reveal its permalink (¶). */
html body .bhi-content h2 .bhi-anchor,
html body .bhi-content h3 .bhi-anchor {
	margin-left: 0.4em;
	font-size: 0.7em;
	color: var(--bhi-ink-faint);
	text-decoration: none;
	opacity: 0;
}
html body .bhi-content h2:hover .bhi-anchor,
html body .bhi-content h3:hover .bhi-anchor {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Links — content links only. Chrome (logo, top nav, buttons) is
   excluded by scoping: these rules live under .bhi-content.
   -------------------------------------------------------------------------- */

html body .bhi-content a {
	color: var(--bhi-link);
	text-decoration: none;
}
html body .bhi-content a:visited {
	color: var(--bhi-link-visited);
}
html body .bhi-content a:hover,
html body .bhi-content a:focus-visible {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. Prose elements
   -------------------------------------------------------------------------- */

html body .bhi-content ul,
html body .bhi-content ol {
	max-width: var(--bhi-measure);
	margin: 0 0 1em;
	padding-left: 1.5em;
}
html body .bhi-content li {
	margin-bottom: 0.25em;
}
html body .bhi-content blockquote {
	max-width: var(--bhi-measure);
	margin: 0 0 1em;
	padding: 0.5em 1em;
	border-left: 3px solid var(--bhi-border);
	color: var(--bhi-ink-soft);
}
html body .bhi-content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	background: var(--bhi-surface);
	padding: 0.1em 0.35em;
	border-radius: 4px;
}
html body .bhi-content pre {
	max-width: var(--bhi-measure);
	overflow-x: auto;
	background: var(--bhi-surface);
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 1em;
}
html body .bhi-content pre code {
	background: none;
	padding: 0;
}
html body .bhi-content table {
	border-collapse: collapse;
	margin: 0 0 1em;
	max-width: 100%;
	display: block;
	overflow-x: auto;
}
html body .bhi-content th,
html body .bhi-content td {
	border: 1px solid var(--bhi-border);
	padding: 0.5em 0.75em;
	text-align: left;
	font-size: 0.9375rem;
}
html body .bhi-content th {
	background: var(--bhi-surface);
	font-weight: 500;
}
html body .bhi-content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}
html body .bhi-content figure {
	margin: 0 0 1em;
	max-width: var(--bhi-measure);
}
html body .bhi-content figcaption {
	font-size: 0.875rem;
	color: var(--bhi-ink-soft);
	margin-top: 0.25em;
}

/* --------------------------------------------------------------------------
   5. Page shell — centered column, Wikipedia-like.
   -------------------------------------------------------------------------- */

.bhi-page {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1rem;
}
.bhi-main {
	padding: 1rem 0 3rem;
}
.bhi-content > *:first-child {
	margin-top: 0;
}

/* Two-column (content + sticky sidebar) on desktop only. */
@media (min-width: 64rem) {
	.bhi-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 18.75rem;
		gap: 2rem;
		align-items: start;
	}
	.bhi-sidebar {
		position: sticky;
		top: 1rem;
	}
}
@media (max-width: 63.9375rem) {
	.bhi-sidebar {
		margin-top: 2rem;
		border-top: 1px solid var(--bhi-border);
		padding-top: 1rem;
	}
}

/* --------------------------------------------------------------------------
   6. Breadcrumb
   -------------------------------------------------------------------------- */

.bhi-breadcrumb {
	font-size: 0.8125rem;
	color: var(--bhi-ink-soft);
	margin-bottom: 0.75rem;
}
.bhi-breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	margin: 0;
	padding: 0;
}
.bhi-breadcrumb li + li::before {
	content: "›";
	margin-right: 0.25em;
	color: var(--bhi-ink-faint);
}
.bhi-breadcrumb a {
	color: var(--bhi-ink-soft);
	text-decoration: none;
}
.bhi-breadcrumb a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Table of contents — <details> on mobile, static card on desktop.
   -------------------------------------------------------------------------- */

.bhi-toc {
	max-width: var(--bhi-measure);
	margin: 0 0 1.5em;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	background: var(--bhi-surface);
	font-size: 0.9375rem;
}
.bhi-toc summary {
	padding: 0.75em 1em;
	font-weight: 500;
	cursor: pointer;
	min-height: var(--bhi-tap);
	display: flex;
	align-items: center;
	list-style: none;
}
.bhi-toc summary::-webkit-details-marker {
	display: none;
}
.bhi-toc summary::before {
	content: "▸";
	margin-right: 0.5em;
	color: var(--bhi-ink-soft);
}
.bhi-toc details[open] summary::before {
	content: "▾";
}
.bhi-toc__list {
	margin: 0;
	padding: 0 1em 1em 2.25em;
}
.bhi-toc__list li {
	margin-bottom: 0.25em;
}
.bhi-toc__list ol {
	margin-top: 0.25em;
	padding-left: 1.25em;
}
.bhi-toc__list a {
	color: var(--bhi-ink);
	text-decoration: none;
}
.bhi-toc__list a:hover {
	text-decoration: underline;
	color: var(--bhi-link);
}

/* --------------------------------------------------------------------------
   8. Prev / index / next bar
   -------------------------------------------------------------------------- */

.bhi-prevnext {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 0.5rem;
	align-items: center;
	max-width: var(--bhi-measure);
	margin: 2em 0;
	padding: 0.75em 0;
	border-top: 1px solid var(--bhi-border);
	border-bottom: 1px solid var(--bhi-border);
}
.bhi-prevnext__prev,
.bhi-prevnext__next,
.bhi-prevnext__index {
	display: inline-flex;
	align-items: center;
	min-height: var(--bhi-tap);
	padding: 0.5em 1em;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	text-decoration: none;
	color: var(--bhi-ink);
	font-size: 0.9375rem;
	background: #fff;
}
.bhi-prevnext__prev:hover,
.bhi-prevnext__next:hover,
.bhi-prevnext__index:hover {
	background: var(--bhi-surface);
	text-decoration: none;
}
.bhi-prevnext__prev { justify-self: start; }
.bhi-prevnext__next { justify-self: end; }
.bhi-prevnext__index { justify-self: center; }
.bhi-prevnext__prev--disabled,
.bhi-prevnext__next--disabled {
	visibility: hidden;
}

/* --------------------------------------------------------------------------
   9. Chapter select (jump-to-chapter dropdown)
   -------------------------------------------------------------------------- */

.bhi-chapter-select {
	display: flex;
	align-items: center;
	gap: 0.5em;
	max-width: var(--bhi-measure);
	margin: 0 0 1em;
	font-size: 0.9375rem;
}
.bhi-chapter-select select {
	flex: 1;
	min-height: var(--bhi-tap);
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 0.5em;
	background: #fff;
	color: var(--bhi-ink);
}

/* --------------------------------------------------------------------------
   10. Infobox (device manuals) — Wikipedia-style, right on desktop,
   stacked on mobile.
   -------------------------------------------------------------------------- */

.bhi-infobox {
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	background: var(--bhi-surface);
	font-size: 0.875rem;
	margin: 0 0 1.5em;
	overflow: hidden;
}
.bhi-infobox__title {
	font-weight: 500;
	font-size: 1rem;
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--bhi-border);
	background: #fff;
}
.bhi-infobox table {
	width: 100%;
	border-collapse: collapse;
}
.bhi-infobox th,
.bhi-infobox td {
	padding: 0.5em 1em;
	border-bottom: 1px solid var(--bhi-border);
	vertical-align: top;
	text-align: left;
}
.bhi-infobox tr:last-child th,
.bhi-infobox tr:last-child td {
	border-bottom: none;
}
.bhi-infobox th {
	font-weight: 500;
	color: var(--bhi-ink-soft);
	width: 38%;
}
@media (min-width: 48rem) {
	.bhi-infobox {
		float: right;
		width: 19rem;
		margin: 0 0 1em 1.5em;
	}
}

/* --------------------------------------------------------------------------
   11. "See also" block
   -------------------------------------------------------------------------- */

.bhi-seealso {
	max-width: var(--bhi-measure);
	margin: 2em 0;
	padding: 1em;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	background: var(--bhi-surface);
}
.bhi-seealso h2 {
	font-size: 1.125rem;
	margin: 0 0 0.5em;
	border: none;
	padding: 0;
}
.bhi-seealso ul {
	margin: 0;
	padding-left: 1.25em;
}

/* --------------------------------------------------------------------------
   12. Ad slots — labelled placeholders; ad tags wired in a later phase.
   Positioned per the approved spec, never inside a question list or a
   tool's task flow. Hidden in print.
   -------------------------------------------------------------------------- */

.bhi-ad {
	max-width: var(--bhi-measure);
	margin: 1.5em 0;
	min-height: 90px;
}
.bhi-ad--sidebar {
	max-width: none;
}
@media (min-width: 64rem) {
	.bhi-ad--sidebar {
		position: sticky;
		top: 1rem;
	}
}

/* --------------------------------------------------------------------------
   13. Question bank
   -------------------------------------------------------------------------- */

.bhi-question {
	max-width: var(--bhi-measure);
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 1em;
	margin: 0 0 1em;
	background: #fff;
}
.bhi-question__stem {
	font-weight: 500;
	margin: 0 0 0.75em;
}
.bhi-question__options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5em;
}
.bhi-question__options button {
	width: 100%;
	text-align: left;
	min-height: var(--bhi-tap);
	padding: 0.75em 1em;
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	background: #fff;
	color: var(--bhi-ink);
	cursor: pointer;
}
.bhi-question__options button:hover {
	background: var(--bhi-surface);
}
.bhi-question__options button[aria-pressed="true"] {
	border-color: var(--bhi-link);
	background: #eef3ff;
}
.bhi-question__feedback {
	margin-top: 0.75em;
	padding: 0.75em 1em;
	border-radius: var(--bhi-radius);
	font-size: 0.9375rem;
}
.bhi-question__feedback--correct {
	background: #e6f4ea;
	color: #137333;
}
.bhi-question__feedback--wrong {
	background: #fce8e6;
	color: #a50e0e;
}
.bhi-question__stem-cn {
	font-weight: 400;
	color: #5f6368;
	margin: -0.5em 0 0.75em;
}
.bhi-question__opt-cn {
	display: block;
	font-size: 0.875rem;
	color: #5f6368;
	margin-top: 0.25em;
}
/* Driving-bank question figure + supplementary-question note (Phase 48).
 * Figure images ship at source width (up to ~1580px); without max-width
 * they would overflow the card on phones. The global prose img rule
 * sets height only, so this max-width does not fight it. */
.bhi-question__fig {
	margin: 0 0 0.75em;
}
.bhi-question__fig img {
	max-width: 100%;
	height: auto;
}
.bhi-question__new {
	font-size: 0.875rem;
	color: #5f6368;
	margin: 0 0 0.5em;
}
/* Question-bank / exam disclaimer (Phase 39). Short line on every
 * question page; full block on bank index, mock-exam and study pages.
 * Muted note styling only — no sizing that could fight the global
 * prose rules, and no tap target to disturb the answer flow. */
.bhi-disclaimer {
	max-width: var(--bhi-measure);
	margin: 1em 0;
	padding: 0.75em 1em;
	border-left: 3px solid var(--bhi-border);
	background: #f8f9fa;
	color: var(--bhi-ink-soft);
	font-size: 0.9375rem;
}
.bhi-disclaimer p {
	margin: 0 0 0.5em;
}
.bhi-disclaimer p:last-child {
	margin-bottom: 0;
}
.bhi-disclaimer--short {
	font-size: 0.875rem;
}
.bhi-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: var(--bhi-measure);
	margin: 2em 0;
}
.bhi-pagination a,
.bhi-pagination span {
	min-height: var(--bhi-tap);
	display: inline-flex;
	align-items: center;
	padding: 0.5em 1em;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	text-decoration: none;
	color: var(--bhi-ink);
}
.bhi-progress {
	max-width: var(--bhi-measure);
	font-size: 0.875rem;
	color: var(--bhi-ink-soft);
	margin-bottom: 1em;
}
.bhi-progress__bar {
	height: 6px;
	background: var(--bhi-border);
	border-radius: 3px;
	overflow: hidden;
	margin-top: 0.25em;
}
.bhi-progress__fill {
	height: 100%;
	background: var(--bhi-link);
	width: 0;
}

/* Wave 3 (Phase 52): resume entry + wrong-answer book on bank index
   pages. Both render client-side from this device's localStorage;
   the template keeps the containers hidden until JS fills them. */
.bhi-resume,
.bhi-wrongbook {
	max-width: var(--bhi-measure);
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 1em 1.125em;
	margin: 1.5em 0;
	background: var(--bhi-surface);
}
.bhi-resume h2,
.bhi-wrongbook h2 {
	font-size: 1.25rem;
	font-weight: 500;
	margin: 0 0 0.5em;
}
.bhi-resume__zh,
.bhi-wrongbook__zh {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--bhi-ink-soft);
	margin-top: 0.125em;
}
.bhi-resume__note,
.bhi-wrongbook__note,
.bhi-wrongbook__empty {
	font-size: 0.875rem;
	color: var(--bhi-ink-soft);
}
.bhi-wrongbook__item {
	border-top: 1px solid var(--bhi-border);
	padding: 1em 0;
}
.bhi-wrongbook__qid {
	font-weight: 700;
	color: var(--bhi-link);
	margin: 0 0 0.25em;
}
.bhi-wrongbook__options {
	margin: 0.5em 0;
	padding-left: 1.5em;
}
.bhi-wrongbook__correct {
	font-weight: 700;
	color: var(--bhi-link);
}
.bhi-wrongbook__explain summary {
	cursor: pointer;
	font-weight: 500;
}
.bhi-wrongbook button {
	font-size: 1rem;
	font-weight: 500;
	min-height: 48px;
	padding: 0.5em 1.25em;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	background: #fff;
	color: var(--bhi-link);
	cursor: pointer;
	font-family: inherit;
}

/* Grouped chapter index (driving banks): EN name + CN subtitle per
   chapter, page links below. Flat .bhi-toc lists are untouched. */
.bhi-toc--grouped .bhi-toc__group {
	margin-bottom: 1.25em;
}
.bhi-toc--grouped .bhi-toc__group h2 {
	font-size: 1.25rem;
	font-weight: 500;
	margin: 0 0 0.25em;
}
.bhi-toc--grouped .bhi-toc__group small {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--bhi-ink-soft);
	margin-top: 0.125em;
}

/* --------------------------------------------------------------------------
   13b. Mock exam — one question per screen, palette, clock. The question
   card itself reuses section 13; only the exam chrome lives here.
   -------------------------------------------------------------------------- */

.bhi-exam-cta {
	max-width: var(--bhi-measure);
	margin: 1.5em 0;
}
.bhi-exam-cta a {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0.5em 1.25em;
	border: 1px solid var(--bhi-link);
	border-radius: var(--bhi-radius);
	font-weight: 500;
	text-decoration: none;
}
.bhi-exam-cta a:hover {
	background: #eef3ff;
	text-decoration: underline;
}
.bhi-exam__loading {
	max-width: var(--bhi-measure);
	padding: 2em 0;
	color: var(--bhi-ink-soft);
}
.bhi-exam__levels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	max-width: var(--bhi-measure);
	margin-bottom: 1em;
}
.bhi-exam__level {
	min-height: var(--bhi-tap);
	padding: 0.5em 1em;
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	background: #fff;
	color: var(--bhi-ink);
	cursor: pointer;
}
.bhi-exam__level--on {
	border-color: var(--bhi-link);
	background: #eef3ff;
	font-weight: 500;
}
.bhi-exam__card {
	max-width: var(--bhi-measure);
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 1em;
	margin: 0 0 1em;
	background: #fff;
}
.bhi-exam__card h2 {
	margin-top: 0;
}
.bhi-exam__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.5em 1.25em;
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	background: #fff;
	color: var(--bhi-ink);
	cursor: pointer;
	text-decoration: none;
}
.bhi-exam__btn:hover {
	background: var(--bhi-surface);
}
.bhi-exam__btn--solid {
	border-color: var(--bhi-link);
	background: var(--bhi-link);
	color: #fff;
}
.bhi-exam__btn--solid:hover {
	background: var(--bhi-link);
	text-decoration: underline;
}
.bhi-exam__btn[disabled] {
	opacity: 0.45;
	cursor: default;
}
.bhi-exam__intro .bhi-exam__btn {
	width: 100%;
	margin-top: 0.5em;
}
.bhi-exam__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: var(--bhi-measure);
	margin-bottom: 0.75em;
}
.bhi-exam__confirm {
	max-width: var(--bhi-measure);
	border: 2px solid var(--bhi-link);
	border-radius: var(--bhi-radius);
	padding: 1em;
	margin: 0 0 1em;
	background: #eef3ff;
}
.bhi-exam__confirm-text {
	font-size: 1.125rem;
	font-weight: 500;
	margin: 0 0 0.25em;
}
.bhi-exam__confirm-note {
	margin: 0 0 0.75em;
}
.bhi-exam__confirm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}
.bhi-exam__clock {
	font-size: 1.5rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.bhi-exam__clock--low {
	color: #a50e0e;
}
.bhi-exam__palette {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375em;
	max-width: var(--bhi-measure);
	margin-bottom: 1em;
}
.bhi-exam__pal {
	min-width: 40px;
	min-height: 40px;
	padding: 0.25em;
	font-size: 0.875rem;
	font-family: inherit;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	background: #fff;
	color: var(--bhi-ink);
	cursor: pointer;
}
.bhi-exam__pal--done {
	border-color: var(--bhi-link);
	background: #eef3ff;
}
.bhi-exam__pal--cur {
	border-color: var(--bhi-ink);
	font-weight: 700;
}
.bhi-exam__qpos {
	font-size: 0.875rem;
	color: var(--bhi-ink-soft);
	margin: 0 0 0.75em;
}
.bhi-exam__multi {
	display: inline-block;
	border: 1px solid var(--bhi-border);
	border-radius: 4px;
	padding: 0 0.4em;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--bhi-ink);
}
.bhi-exam__hint {
	font-size: 0.875rem;
	color: var(--bhi-ink-soft);
	margin: 0 0 0.75em;
}
.bhi-exam__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5em;
	max-width: var(--bhi-measure);
	margin: 0 0 2em;
}
.bhi-exam__result {
	text-align: center;
}
.bhi-exam__scorelabel {
	color: var(--bhi-ink-soft);
	margin: 0;
}
.bhi-exam__score {
	font-size: 3rem;
	font-weight: 500;
	line-height: 1.2;
	margin: 0.1em 0;
}
.bhi-exam__pass {
	display: inline-block;
	font-size: 1.25rem;
	font-weight: 700;
	padding: 0.25em 0.75em;
	border-radius: var(--bhi-radius);
	margin: 0.25em 0;
}
.bhi-exam__pass--yes {
	background: #e6f4ea;
	color: #137333;
}
.bhi-exam__pass--no {
	background: #fce8e6;
	color: #a50e0e;
}
.bhi-exam__note {
	color: var(--bhi-ink-soft);
}
.bhi-exam__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	justify-content: center;
	margin-top: 1em;
}
.bhi-exam__reviewtitle {
	max-width: var(--bhi-measure);
}
.bhi-exam__ansline {
	font-size: 0.9375rem;
	color: var(--bhi-ink-soft);
	margin: 0.5em 0 0;
}
.bhi-exam__ansline--right {
	color: #137333;
}
.bhi-exam__ok {
	color: #137333;
	font-weight: 700;
}
.bhi-exam__bad {
	color: #a50e0e;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   14. FAQ (tools) — <details> accordions, 48px targets.
   -------------------------------------------------------------------------- */

.bhi-faq {
	max-width: var(--bhi-measure);
	margin: 2em 0;
}
.bhi-faq h2 {
	font-size: 1.25rem;
}
.bhi-faq details {
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	margin-bottom: 0.5em;
}
.bhi-faq summary {
	min-height: var(--bhi-tap);
	display: flex;
	align-items: center;
	padding: 0.75em 1em;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.bhi-faq summary::-webkit-details-marker {
	display: none;
}
.bhi-faq summary::before {
	content: "+";
	margin-right: 0.5em;
	color: var(--bhi-ink-soft);
	font-weight: 400;
}
.bhi-faq details[open] summary::before {
	content: "–";
}
.bhi-faq .bhi-faq__answer {
	padding: 0 1em 1em;
}
.bhi-faq .bhi-faq__answer p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   15. Tool form controls — one shared size so every tool feels the same.
   (Phase 1 keeps specificity modest; per-tool inline styles are banned.)
   -------------------------------------------------------------------------- */

.bhi-tool input[type="number"],
.bhi-tool input[type="text"],
.bhi-tool input[type="email"],
.bhi-tool input[type="tel"],
.bhi-tool input[type="search"],
.bhi-tool input[type="date"],
.bhi-tool input[type="datetime-local"],
.bhi-tool textarea,
.bhi-tool select {
	font-size: 1.125rem;
	min-height: 52px;
	padding: 0.75em;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	color: var(--bhi-ink);
}
.bhi-tool input[type="file"] {
	font-size: 1rem;
	min-height: 52px;
	padding: 0.75em 0;
	font-family: inherit;
	box-sizing: border-box;
}
.bhi-tool input[type="checkbox"],
.bhi-tool input[type="radio"] {
	/* Wave 3 (Phase 52): 20px boxes read small next to 18px control
	   text (the 2026-10-18 "big text, small boxes" complaint); 24px
	   keeps the box visibly proportionate, and pill labels
	   (.bhi-tool__choices) already supply the 48px tap target. */
	width: 1.5rem;
	height: 1.5rem;
	min-height: 0;
	accent-color: var(--bhi-link);
	vertical-align: middle;
}
.bhi-tool input[type="range"] {
	font-size: 1rem;
	/* Wave 3 (Phase 52): min-height alone left some browsers rendering
	   a ~21px box around the track; pin the box to the 52px row. */
	height: 52px;
	min-height: 52px;
	width: 100%;
	box-sizing: border-box;
	accent-color: var(--bhi-link);
}
.bhi-tool button,
.bhi-tool input[type="submit"] {
	font-size: 1.125rem;
	font-weight: 700;
	min-height: 52px;
	padding: 0.75em 1.5em;
	border: none;
	border-radius: var(--bhi-radius);
	background: var(--bhi-link);
	color: #fff;
	cursor: pointer;
	font-family: inherit;
}
.bhi-tool button:hover {
	filter: brightness(0.92);
}
/* Secondary action (copy, reset, toggles) — still a 48px tap target. */
.bhi-tool button.bhi-tool__btn-secondary,
.bhi-tool input[type="submit"].bhi-tool__btn-secondary {
	background: var(--bhi-surface);
	color: var(--bhi-link);
	border: 1px solid var(--bhi-border);
}
.bhi-tool label,
.bhi-tool__label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.25em;
}

/* --------------------------------------------------------------------------
   15.1 Tool components — the shared kit every migrated tool is built from.
   Old tools each carried 2–4KB of inline CSS; everything that recurred is
   mapped here once so per-tool <style> blocks are banned by construction.
   -------------------------------------------------------------------------- */

/* Chinese sub-label under EN headings, labels and result keys. */
.bhi-tool__zh {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--bhi-ink-soft);
	margin-top: 0.125em;
	line-height: 1.4;
}

/* One form field with its label. */
.bhi-tool__field {
	margin-bottom: 1em;
}
/* Flexible row of fields; wraps to one column on narrow screens. */
.bhi-tool__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin-bottom: 1em;
}
.bhi-tool__row > .bhi-tool__field {
	flex: 1 1 11rem;
	margin-bottom: 0;
	min-width: 0;
}

/* Tab bar (e.g. "Power to SWR / SWR to Loss"). */
/* Phase 60: the base rule MUST be scoped under .bhi-tool__tabs.
   The generic .bhi-tool button rule (0,1,1) silently beat the bare
   .bhi-tool__tab (0,1,0), so every tab rendered blue and the
   selected state was invisible — the 0.1.67 deploy proved it on
   both Calorie and SWR. Scoped to (0,2,0) the base wins over the
   generic rule, and .bhi-tool__tab.is-on (0,2,0) below still wins
   ties by source order. */
.bhi-tool__tabs {
	display: flex;
	gap: 0.625em;
	margin: 0 0 1.25em;
}
.bhi-tool__tabs .bhi-tool__tab {
	flex: 1;
	min-height: 56px;
	border: 2px solid var(--bhi-border);
	background: #fff;
	border-radius: var(--bhi-radius);
	/* Wave 3 (Phase 52): tabs sat at 15px, below the 16px body text
	   and the 18px controls around them — unified to body size. */
	font-size: 1rem;
	font-weight: 700;
	color: var(--bhi-link);
	cursor: pointer;
	font-family: inherit;
	padding: 0.5em 0.75em;
}
.bhi-tool__tab.is-on {
	background: var(--bhi-link);
	color: #fff;
	border-color: var(--bhi-link);
}
.bhi-tool__tab.is-on .bhi-tool__zh {
	color: #cfe3ff;
}
.bhi-tool__panel {
	display: none;
}
.bhi-tool__panel.is-on {
	display: block;
}

/* Segmented toggle (e.g. units, gender). */
.bhi-tool__toggle {
	display: inline-flex;
	gap: 0;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	overflow: hidden;
	margin-bottom: 1em;
}
.bhi-tool__toggle button {
	border: none;
	border-radius: 0;
	background: #fff;
	color: var(--bhi-ink);
	font-weight: 500;
	min-height: 48px;
	padding: 0.5em 1em;
}
.bhi-tool__toggle button.is-on {
	background: var(--bhi-link);
	color: #fff;
	font-weight: 700;
}

/* Result grid — KPI boxes under the inputs. */
.bhi-tool__results {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75em;
	margin: 1.25em 0;
}
.bhi-tool__result {
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 1em 0.75em;
	text-align: center;
	background: #fff;
}
.bhi-tool__result--wide {
	grid-column: 1 / -1;
}
.bhi-tool__result-k {
	font-size: 0.8125rem;
	color: var(--bhi-ink-soft);
	font-weight: 600;
}
.bhi-tool__result-v {
	font-size: 1.625rem;
	font-weight: 700;
	color: var(--bhi-link);
	margin-top: 0.25em;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

/* Inline variant of the Chinese sub-label (next to a label's EN text). */
.bhi-tool__zh--inline {
	display: inline;
	margin: 0 0 0 0.375em;
	font-size: 0.75rem;
}

/* Input + unit side by side. */
.bhi-tool__inrow {
	display: flex;
	align-items: center;
	gap: 0.625em;
	flex-wrap: wrap;
}
.bhi-tool__inrow > input,
.bhi-tool__inrow > select {
	flex: 1 1 12rem;
	min-width: 0;
}
.bhi-tool__unit {
	font-size: 0.9375rem;
	color: var(--bhi-ink-soft);
	font-weight: 700;
	white-space: nowrap;
}

/* Surface output box (JS writes result lines into it). */
.bhi-tool__outbox {
	background: var(--bhi-surface);
	border-radius: var(--bhi-radius);
	padding: 0.875em 1em;
	margin: 0.75em 0;
	font-size: 1rem;
}
.bhi-tool__outbox:empty {
	display: none;
}

/* Key/value spans inside output boxes — several old tools emit these. */
.bhi-tool .k {
	color: var(--bhi-ink-soft);
	font-size: 0.84375rem;
}
.bhi-tool .v {
	font-weight: 700;
	color: var(--bhi-link);
	font-size: 1.1875rem;
}
.bhi-tool .num {
	font-weight: 700;
	color: var(--bhi-link);
}
/* Highlighted table cell/column (e.g. the active unit column). */
.bhi-tool .hl {
	background: #fff8e8;
}
.bhi-tool th.hl {
	background: #fdf3d8;
}

/* Big number readout (e.g. "22.9 BMI"). */
.bhi-tool__big {
	font-size: 3.25rem;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--bhi-ink);
}
.bhi-tool__big small {
	font-size: 1rem;
	font-weight: 400;
	color: var(--bhi-ink-soft);
}

/* Status badge (coloured pill, e.g. BMI category). */
.bhi-tool__badge {
	display: inline-block;
	margin-top: 0.625em;
	font-size: 1.0625rem;
	font-weight: 800;
	color: #fff;
	border-radius: 8px;
	padding: 0.375em 1.125em;
}
.bhi-tool__badge--c1 { background: #2b7cd3; }
.bhi-tool__badge--c2 { background: #1e9e6a; }
.bhi-tool__badge--c3 { background: #e08a00; }
.bhi-tool__badge--c4 { background: #d64545; }

/* Show/hide helper for JS-driven visibility (replaces inline display:). */
.bhi-tool .is-hidden {
	display: none;
}

/* BMI-zone gauge: 14–36 scale split at 18.5 / 25 / 30. */
.bhi-tool__meter-bar--bmi {
	background: linear-gradient(to right,
		#bcd7f5 0%, #bcd7f5 20.45%,
		#bfe8d2 20.45%, #bfe8d2 50%,
		#f5d9a8 50%, #f5d9a8 72.73%,
		#f3bcbc 72.73%, #f3bcbc 100%);
}
.bhi-tool__meter-ticks {
	position: relative;
	height: 1.25em;
	font-size: 0.6875rem;
	color: var(--bhi-ink-soft);
	margin-top: 0.25em;
}
.bhi-tool__meter-ticks--bmi span { position: absolute; transform: translateX(-50%); }
.bhi-tool__meter-ticks--bmi span:nth-child(1) { left: 0; transform: none; }
.bhi-tool__meter-ticks--bmi span:nth-child(2) { left: 20.45%; }
.bhi-tool__meter-ticks--bmi span:nth-child(3) { left: 50%; }
.bhi-tool__meter-ticks--bmi span:nth-child(4) { left: 72.73%; }
.bhi-tool__meter-ticks--bmi span:nth-child(5) { left: 100%; transform: translateX(-100%); }

/* Bordered content card (e.g. compound interest growth breakdown). */
.bhi-tool__card {
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 1em 1.125em;
	margin: 1.25em 0;
	background: #fff;
}

/* Big single readout (e.g. "Your BMI is 23.4"). */
.bhi-tool__out {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--bhi-link);
	margin: 1em 0;
	font-variant-numeric: tabular-nums;
}

/* Info / formula note box at the bottom of the tool. */
.bhi-tool__note {
	background: var(--bhi-surface);
	border-radius: var(--bhi-radius);
	padding: 1em 1.125em;
	margin-top: 1.375em;
	font-size: 0.84375rem;
	color: var(--bhi-ink-soft);
}
.bhi-tool__note b,
.bhi-tool__note strong {
	color: var(--bhi-ink);
}
.bhi-tool__note code {
	background: #eaf0f8;
	padding: 0.125em 0.5em;
	border-radius: 4px;
	font-size: 0.8125rem;
	color: var(--bhi-link);
}

/* Error / unavailable state (e.g. bad input, API down). */
.bhi-tool__err {
	background: #fdecea;
	border: 1px solid #f5c6c2;
	border-radius: var(--bhi-radius);
	padding: 0.75em 1em;
	margin: 0.75em 0;
	font-size: 0.9375rem;
	color: #a63d32;
}

/* Data tables inside tools — horizontally scrollable on phones. */
.bhi-tool__scroll {
	overflow-x: auto;
	margin: 1em 0;
	-webkit-overflow-scrolling: touch;
}
.bhi-tool table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.875rem;
	min-width: 34rem;
}
.bhi-tool th,
.bhi-tool td {
	border: 1px solid var(--bhi-border);
	padding: 0.5em 0.625em;
	text-align: left;
	font-variant-numeric: tabular-nums;
}
.bhi-tool th {
	background: var(--bhi-surface);
	font-weight: 700;
}

/* Meter bar (SWR-style gauge). The mark is positioned by JS. */
.bhi-tool__meter {
	margin: 1.625em 0 0.375em;
}
.bhi-tool__meter-cap {
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 0.625em;
}
.bhi-tool__meter-bar {
	position: relative;
	height: 26px;
	border-radius: 13px;
	background: linear-gradient(to right, #22a355 0%, #22a355 33%, #e0a800 33%, #e0a800 66%, #d64545 66%, #d64545 100%);
}
/* Quarter stops (e.g. the SWR gauge: green 1.0–1.5, amber 1.5–2.0, red 2.0+). */
.bhi-tool__meter-bar--quarters {
	background: linear-gradient(to right, #22a355 0%, #22a355 25%, #e0a800 25%, #e0a800 50%, #d64545 50%, #d64545 100%);
}
/* Day cycle (tz-planner 24h bar: night 0–6h, edge 6–8h, good 8–22h, edge 22–24h). */
.bhi-tool__meter-bar--daycycle {
	background: linear-gradient(to right, #f6d2d2 0%, #f6d2d2 25%, #f7e6bd 25%, #f7e6bd 33.33%, #c9e9cd 33.33%, #c9e9cd 91.66%, #f7e6bd 91.66%, #f7e6bd 100%);
}
.bhi-tool__meter-mark {
	position: absolute;
	top: -7px;
	width: 5px;
	height: 40px;
	background: var(--bhi-ink);
	border-radius: 2px;
	display: none;
}
.bhi-tool__meter-scale {
	display: flex;
	justify-content: space-between;
	font-size: 0.78125rem;
	color: var(--bhi-ink-soft);
	margin-top: 0.5em;
	font-variant-numeric: tabular-nums;
}

/* Chips (small selectable pills, e.g. coax cable presets). */
.bhi-tool__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0.5em 0 1em;
}
.bhi-tool__chips button {
	border: 1px solid var(--bhi-border);
	border-radius: 999px;
	background: #fff;
	color: var(--bhi-ink);
	font-size: 0.875rem;
	font-weight: 500;
	min-height: 48px;
	padding: 0.375em 1em;
}
.bhi-tool__chips button.is-on {
	background: var(--bhi-link);
	border-color: var(--bhi-link);
	color: #fff;
	font-weight: 700;
}
/* Static info chips (no interaction). */
.bhi-tool__chip {
	border: 1px solid var(--bhi-border);
	border-radius: 999px;
	background: #fff;
	font-size: 0.8125rem;
	padding: 0.375em 1em;
}

/* Choice labels (e.g. gender radios): flex row of tappable pills. */
.bhi-tool__choices {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
}
.bhi-tool__choices label {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375em;
	border: 2px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 0.625em;
	min-height: 48px;
	cursor: pointer;
	background: #fff;
	margin: 0;
	font-weight: 500;
}

/* Two-column field grid (collapses to one column on phones). */
.bhi-tool__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.875em;
	margin-bottom: 1em;
}
@media (max-width: 640px) {
	.bhi-tool__grid {
		grid-template-columns: 1fr;
	}
}

/* Three-column target cards (Lose / Maintain / Gain), collapse on phones. */
.bhi-tool__targets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75em;
}
@media (max-width: 640px) {
	.bhi-tool__targets {
		grid-template-columns: 1fr;
	}
}
.bhi-tool__result--lose { border-top: 4px solid #0f766e; }
.bhi-tool__result--keep { border-top: 4px solid var(--bhi-link); }
.bhi-tool__result--gain { border-top: 4px solid #b45309; }

/* Full-width primary button. */
.bhi-tool__btn-block {
	width: 100%;
}

/* Title line inside output surfaces (mirrors .k). */
.bhi-tool .t {
	color: var(--bhi-ink-soft);
	font-size: 0.84375rem;
	font-weight: 600;
}

/* Message result boxes (ok / warn states, e.g. fee split result). */
.bhi-tool__resultbox {
	padding: 1em 1.125em;
	border-radius: var(--bhi-radius);
	border: 1px solid var(--bhi-border);
	margin-top: 1.125em;
}
.bhi-tool__resultbox--ok {
	background: #e8f5e9;
	border-color: #4caf50;
}
.bhi-tool__resultbox--warn {
	background: #fff8e1;
	border-color: #ff9800;
}
.bhi-tool__resultbox--fail {
	background: #ffebee;
	border-color: #f44336;
}
.bhi-tool__resultbox .big {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0.25em 0;
}

/* Dashed sub-panel inside a result (split suggestion etc.). */
.bhi-tool__split {
	margin-top: 0.75em;
	padding: 0.75em;
	background: #fff;
	border-radius: 6px;
	border: 1px dashed #999;
}

/* Red-accent warning box (risk warnings). */
.bhi-tool__warnbox {
	background: #ffebee;
	border-left: 4px solid #f44336;
	border-radius: 4px;
	padding: 0.75em 1em;
	font-size: 0.875rem;
	margin: 1em 0;
}

/* Highlighted result well (green success state, e.g. coax loss). */
.bhi-tool__well {
	border-radius: var(--bhi-radius);
	padding: 1.25em;
	border: 1px solid var(--bhi-border);
}
.bhi-tool__well--ok {
	background: #eef7f0;
	border-color: #bfe3c9;
}

/* 4-up stat grid (2-up on phones). */
.bhi-tool__nums {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75em;
}
@media (max-width: 640px) {
	.bhi-tool__nums {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Highlight row inside tool tables (selected row in comparison). */
.bhi-tool table tr.hl td {
	background: #f0f6ff;
	font-weight: 700;
}

/* Uppercase input (locators, callsigns). */
.bhi-tool__upper {
	text-transform: uppercase;
}

/* Chart legend row + colour swatches. */
.bhi-tool__legend {
	display: flex;
	gap: 1.125em;
	justify-content: center;
	font-size: 0.8125rem;
	color: var(--bhi-ink-soft);
	margin-top: 0.5em;
	flex-wrap: wrap;
}
.bhi-tool__swatch {
	display: inline-block;
	width: 22px;
	height: 4px;
	border-radius: 2px;
	margin-right: 0.375em;
	vertical-align: middle;
	background: var(--bhi-link);
}
.bhi-tool__swatch--alt {
	background: #0f766e;
}

/* Numeric table variant: right-aligned figures (growth tables etc.). */
.bhi-tool table.bhi-tool__table--num td,
.bhi-tool table.bhi-tool__table--num th {
	text-align: right;
}
.bhi-tool table.bhi-tool__table--num td:first-child,
.bhi-tool table.bhi-tool__table--num th:first-child {
	text-align: left;
}

/* Scroll box capped in height too (long year-by-year tables). */
.bhi-tool__scroll--cap {
	max-height: 420px;
	overflow-y: auto;
}

/* Canvases (charts, maps) scale to the column; JS owns pixel size. */
.bhi-tool canvas {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Tool-local h2/h3 follow the type scale but stay inside the tool. */
.bhi-tool h2 {
	font-size: 1.125rem;
	margin: 1.5em 0 0.5em;
}
.bhi-tool h3 {
	font-size: 1rem;
	margin: 1.25em 0 0.5em;
}

/* Index / archive cards (theme index.php fallback loop). */
.bhi-card {
	max-width: var(--bhi-measure);
	margin-bottom: 2em;
}
.bhi-card__title {
	border: none;
	padding: 0;
}
.bhi-card__title a {
	color: var(--bhi-ink);
}
.bhi-card__meta {
	color: var(--bhi-ink-soft);
	font-size: 0.875rem;
}

/* Article meta line under the H1. */
.bhi-meta {
	color: var(--bhi-ink-soft);
	font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   17. Fullscreen toggle (map page) — keeps the header; the map element
   itself goes fullscreen instead of the page losing its navigation.
   -------------------------------------------------------------------------- */

.bhi-fullscreen-btn {
	min-height: var(--bhi-tap);
	min-width: var(--bhi-tap);
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	background: #fff;
	cursor: pointer;
	font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   18. Site chrome — header / nav / footer.
   The header is ALWAYS rendered (Wikipedia rule: no navigation-less
   pages). Fullscreen is a per-element toggle (see .bhi-fullscreen-btn),
   never a page without a header.
   -------------------------------------------------------------------------- */

.bhi-site-header {
	border-bottom: 1px solid var(--bhi-border);
	background: #fff;
}
.bhi-site-header__inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0.5rem 1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.bhi-site-logo {
	display: inline-flex;
	align-items: center;
	min-height: var(--bhi-tap);
	text-decoration: none;
	color: var(--bhi-ink);
	font-weight: 700;
	font-size: 1.125rem;
}
.bhi-site-logo img {
	height: 2rem;
	width: auto;
}
.bhi-site-search {
	flex: 1 1 12rem;
	max-width: 24rem;
	margin-left: auto;
}
.bhi-site-search form {
	display: flex;
}
.bhi-site-search input[type="search"] {
	flex: 1;
	min-height: var(--bhi-tap);
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius) 0 0 var(--bhi-radius);
	padding: 0.5em 0.75em;
	font-size: 1rem;
	font-family: inherit;
}
.bhi-site-search button {
	min-height: var(--bhi-tap);
	min-width: var(--bhi-tap);
	border: 1px solid var(--bhi-border);
	border-left: none;
	border-radius: 0 var(--bhi-radius) var(--bhi-radius) 0;
	background: var(--bhi-surface);
	cursor: pointer;
	font-size: 1rem;
}
.bhi-nav {
	width: 100%;
}
/* Menu toggle — rendered by the theme on every page, but visible
   only when (a) JS is available (html.bhi-js, set pre-paint in the
   theme header) and (b) the viewport is below the desktop bar's
   breakpoint. Without JS it never appears and the list below simply
   renders expanded: the no-JS fallback keeps every link reachable. */
.bhi-nav-toggle {
	display: none;
	align-items: center;
	gap: 0.5em;
	min-height: var(--bhi-tap);
	min-width: var(--bhi-tap);
	padding: 0 0.75em;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	background: #fff;
	color: var(--bhi-ink);
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
}
html.bhi-js .bhi-nav-toggle {
	display: inline-flex;
}
.bhi-nav-toggle__icon {
	font-size: 1.125rem;
	line-height: 1;
}
/* Base is the phone (this file's rule 3): a stacked list. It renders
   EXPANDED only as the no-JS fallback; the max-width block further
   down collapses it (and the submenus) whenever JS is available.
   History: Phase 12 shipped the submenus statically expanded for
   everyone because hover does not exist on touch — on a phone that
   put a 25-link wall on top of EVERY page (user audit, 2026-10-20).
   The fix is the Wikipedia pattern: collapsed panel + accordions,
   never a permanently open list. */
.bhi-nav__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0.5em 0 0;
	font-size: 0.9375rem;
}
.bhi-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--bhi-tap);
	color: var(--bhi-ink);
	text-decoration: none;
	padding: 0 0.25em;
}
.bhi-nav__list a:hover {
	color: var(--bhi-link);
	text-decoration: underline;
}
/* Parent rows (Study / Tools): link grows, accordion button sits at
   the row's end. The button is display:none unless JS is available
   (it is dead weight otherwise — the submenu is already expanded). */
.bhi-nav__list > li.menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.bhi-nav__list > li.menu-item-has-children > a {
	flex: 1 1 auto;
}
.bhi-nav__subtoggle {
	display: none;
	align-items: center;
	justify-content: center;
	min-height: var(--bhi-tap);
	min-width: var(--bhi-tap);
	padding: 0;
	border: none;
	background: transparent;
	color: var(--bhi-ink);
	cursor: pointer;
}
.bhi-nav__chevron {
	width: 0;
	height: 0;
	border-left: 0.32em solid transparent;
	border-right: 0.32em solid transparent;
	border-top: 0.42em solid currentColor;
	transition: transform 0.15s ease;
}
.bhi-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0.25em 1em;
	flex: 1 1 100%;
}
.bhi-nav__list .sub-menu a {
	display: flex;
	align-items: center;
	min-height: var(--bhi-tap);
	padding: 0.25em 0.5em;
}
/* Separator item (Study dropdown): meaningless in the stacked list,
   so it only renders inside the desktop dropdown. */
.bhi-nav__list .bhi-nav__sep {
	display: none;
}
/* Mobile, JS available: the whole panel is collapsed behind the
   Menu toggle, and each submenu behind its accordion button. These
   rules are max-width-scoped AND bhi-js-gated, so desktop and no-JS
   rendering are untouched by them. */
@media (max-width: 47.99rem) {
	html.bhi-js .bhi-nav__list {
		display: none;
	}
	html.bhi-js .bhi-nav.is-open .bhi-nav__list {
		display: flex;
	}
	html.bhi-js .bhi-nav__subtoggle {
		display: inline-flex;
	}
	html.bhi-js .bhi-nav__list .sub-menu {
		display: none;
	}
	html.bhi-js .bhi-nav__list li.is-open > .sub-menu {
		display: block;
	}
	html.bhi-js .bhi-nav__list li.is-open > .bhi-nav__subtoggle .bhi-nav__chevron {
		transform: rotate(180deg);
	}
}
@media (min-width: 48rem) {
	/* Desktop has the horizontal bar: no Menu button, no accordion
	   buttons (hover/focus-within below runs the dropdowns). */
	.bhi-nav-toggle,
	html.bhi-js .bhi-nav-toggle {
		display: none;
	}
	.bhi-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.25em 1em;
	}
	.bhi-nav__list li {
		position: relative;
	}
	.bhi-nav__list > li.menu-item-has-children {
		display: block;
	}
	/* Dropdowns (desktop): simple hover/focus reveal. */
	.bhi-nav__list .sub-menu {
		display: none;
		position: absolute;
		z-index: 20;
		background: #fff;
		border: 1px solid var(--bhi-border);
		border-radius: var(--bhi-radius);
		padding: 0.5em 0;
		margin: 0;
		min-width: 12rem;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}
	.bhi-nav__list li:hover > .sub-menu,
	.bhi-nav__list li:focus-within > .sub-menu {
		display: block;
	}
	.bhi-nav__list .sub-menu a {
		padding: 0.5em 1em;
		white-space: nowrap;
	}
	.bhi-nav__list .bhi-nav__sep {
		display: block;
		border-top: 1px solid var(--bhi-border);
		margin-top: 0.5em;
		padding-top: 0.5em;
	}
	.bhi-nav__list .bhi-nav__sep a {
		min-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		color: var(--bhi-ink-faint);
		pointer-events: none;
	}
}

.bhi-site-footer {
	border-top: 1px solid var(--bhi-border);
	margin-top: 3rem;
	padding: 1.5rem 1rem;
	font-size: 0.875rem;
	color: var(--bhi-ink-soft);
}
.bhi-site-footer__inner {
	max-width: 72rem;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	align-items: center;
}
.bhi-site-footer a {
	color: var(--bhi-ink-soft);
	text-decoration: none;
}
.bhi-site-footer a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   18b. Directory pages (Wave 3, Phase 52) — china-services,
   everyday-tools, ham-links. The page markup already carried search
   inputs, data-k cards, counts and empty messages; the filter script
   (directory-filter.js) and these rules were both stripped in
   migration, so the pages rendered unstyled with a dead search box.
   Kept minimal and on-spec: 16px body text, 48px search input,
   #0000ee content links, no underline until hover.
   -------------------------------------------------------------------------- */

.csn-search input,
.tbl-search input,
.hln-searchbox input {
	font-size: 1rem;
	min-height: 48px;
	padding: 0.5em 0.75em;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	color: var(--bhi-ink);
}
.hln-searchbox label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.25em;
}
.csn-count,
.tbl-count,
.hln-meta {
	font-size: 0.9375rem;
	color: var(--bhi-ink-soft);
}
.csn-empty[hidden],
.tbl-empty[hidden],
.hln-empty[hidden] {
	display: none;
}
.csn-empty,
.tbl-empty,
.hln-empty {
	font-size: 0.9375rem;
	color: var(--bhi-ink-soft);
	margin: 1em 0;
}
.csn-grid,
.tbl-grid,
.hln-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.75em;
	margin: 0.75em 0 1.5em;
}
.csn-card,
.tbl-card,
.hln-card {
	display: block;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 0.875em 1em;
	background: #fff;
	color: var(--bhi-ink);
	text-decoration: none;
}
.csn-card:hover,
.tbl-card:hover,
.hln-card:hover {
	text-decoration: underline;
}
.csn-name,
.tbl-name,
.hln-name {
	display: block;
	font-weight: 700;
	color: var(--bhi-link);
}
.csn-cname,
.tbl-cname,
.hln-tag {
	font-size: 0.8125rem;
	color: var(--bhi-ink-soft);
	font-weight: 400;
}
.csn-desc,
.tbl-desc,
.hln-desc {
	display: block;
	font-size: 0.9375rem;
	margin-top: 0.25em;
}
.csn-desc-cn,
.tbl-desc-cn {
	display: block;
	font-size: 0.8125rem;
	color: var(--bhi-ink-soft);
	margin-top: 0.125em;
}
.csn-sect,
.tbl-sect {
	font-size: 1.5rem;
	font-weight: 500;
	margin: 1.25em 0 0.25em;
}
.csn-sect small,
.tbl-sect small,
.hln-sec small {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--bhi-ink-soft);
	margin-top: 0.125em;
}
.hln-sec {
	font-size: 1.25rem;
	font-weight: 500;
	margin: 1.25em 0 0.25em;
}

/* --------------------------------------------------------------------------
   19. Print — Wikipedia-clean: content only.
   -------------------------------------------------------------------------- */

@media print {
	.bhi-site-header,
	.bhi-site-footer,
	.bhi-breadcrumb,
	.bhi-toc,
	.bhi-prevnext,
	.bhi-chapter-select,
	.bhi-ad,
	.bhi-progress,
	.bhi-pagination,
	.bhi-fullscreen-btn,
	.bhi-exam-cta,
	.bhi-exam__top,
	.bhi-exam__palette,
	.bhi-exam__nav,
	.bhi-exam__actions,
	.bhi-newsletter {
		display: none;
	}
	html body {
		font-size: 12pt;
		color: #000;
	}
	html body .bhi-content a {
		color: #000;
		text-decoration: none;
	}
	html body .bhi-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #555;
	}
	.bhi-page {
		max-width: none;
	}
	.bhi-infobox {
		float: none;
		width: auto;
	}
}

/* --------------------------------------------------------------------------
   20. Homepage (theme front-page.php).
   No hero (Phase 27) and no visible site-name row (Phase 30 — the
   H1 is visually hidden; the header already carries the name): the
   page opens with the stats grid, then ordinary content in the
   standard .bhi-page column, so homepage links inherit the standard
   content-link blue from section 3.
   -------------------------------------------------------------------------- */

/* Visually-hidden text (WordPress convention; core does not ship
   this rule on the front end of a minimal theme). Used for form
   labels (the newsletter box) and, since Phase 30, for the
   homepage H1: the heading keeps the site name in the document
   outline without repeating it visibly under the header. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Homepage sections — fixed order, no dynamic ranking. */
.bhi-home-section {
	margin-top: 2.5rem;
}
.bhi-home-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 48rem) {
	.bhi-home-grid {
		grid-template-columns: 1fr 1fr;
	}
}
.bhi-home-card {
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 1rem 1.25rem;
}
.bhi-home-card h3 {
	margin: 0 0 0.5em;
}
.bhi-home-card ul {
	margin: 0;
	padding-left: 1.25em;
}
.bhi-home-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bhi-home-links li {
	margin-bottom: 0.5em;
}
.bhi-home-more {
	margin-top: 1em;
}

/* Repeater Map card (Phase 27) — the Phase 18 satellite/coverage
   image, demoted from hero banner to an ordinary content card
   between the Tools block and Latest Articles. The picture is a
   wide, short crop (object-fit: cover): 7rem on phones, 10rem
   (160px) from 48rem up (Phase 33: shrunk from 10rem/16rem at the
   owner's call — the image stays, just lower). Copy and count are
   rendered by the plugin (includes/home-index.php) from the same
   stats constant as the strip at the top of the page.
   Phase 35: the img selectors below are scoped .bhi-content
   .bhi-mapcard__img (specificity 0,2,0) on purpose. The bare
   .bhi-mapcard__img (0,1,0) silently lost its height to the base
   rule html body .bhi-content img (0,1,3, height:auto) from the
   day the card landed in Phase 27 — the image always rendered
   at natural aspect (about 650px tall at desktop width),
   Phase 33's shrink never showed on the front end, and the
   owner's two "the image is big" calls were both this bug. The
   global prose img rule is correct for body images and stays
   byte-untouched; the win happens here, not there.
   home-index-test asserts the cascade outcome computed from the
   shipped selectors. */
.bhi-mapcard {
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	overflow: hidden;
}
.bhi-content .bhi-mapcard__img {
	display: block;
	width: 100%;
	height: 7rem;
	object-fit: cover;
}
@media (min-width: 48rem) {
	.bhi-content .bhi-mapcard__img {
		height: 10rem;
	}
}
.bhi-mapcard__body {
	padding: 1rem 1.25rem 1.25rem;
}
.bhi-mapcard__text {
	margin: 0 0 1em;
}
.bhi-mapcard__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.5em 1.5em;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	font-weight: 700;
	text-decoration: none;
}
.bhi-mapcard__cta:hover,
.bhi-mapcard__cta:focus-visible {
	text-decoration: underline;
}

/* Homepage tool index (Phase 19) — every registered tool as a plain
   text link, grouped like the hub, rendered by the plugin from the
   tool registry (includes/home-index.php). Wikipedia-index density:
   small type, hairline rows, full-row tap targets. */
.bhi-home-toolindex {
	margin-top: 2rem;
}
.bhi-home-toolindex__title {
	margin: 0 0 0.25em;
}

.bhi-home-toolindex__groups {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 48rem) {
	.bhi-home-toolindex__groups {
		grid-template-columns: 1fr 1fr;
	}
}
.bhi-home-toolindex__group h4 {
	font-size: 1rem;
	margin: 0 0 0.25em;
}
.bhi-home-toolindex__zh {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--bhi-ink-soft);
	margin-left: 0.375em;
}
.bhi-home-toolindex__group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bhi-home-toolindex__group li {
	border-bottom: 1px solid var(--bhi-border);
}
.bhi-home-toolindex__group a {
	display: block;
	padding: 0.5em 0;
	font-size: 0.875rem;
}

/* Study landing list (/study/, Phase 20.1) — the page that replaced
   the Study dropdown: one tappable row per destination, English
   name + Chinese sub-label (.bhi-tool__zh--inline, shared) + one
   factual line. Single column at every width, phone first. */
.bhi-study-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bhi-study-list li {
	border-bottom: 1px solid var(--bhi-border);
}
.bhi-study-list a {
	display: block;
	padding: 0.875em 0.25em;
}
.bhi-study-list__name {
	font-weight: 500;
}
.bhi-study-list__desc {
	display: block;
	font-size: 0.875rem;
	color: var(--bhi-ink-soft);
	margin-top: 0.25em;
	line-height: 1.45;
}

/* Latest Articles — date and title on one line, newest first. */
.bhi-home-news {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: var(--bhi-measure);
}
.bhi-home-news li {
	display: flex;
	align-items: baseline;
	gap: 1em;
	padding: 0.5em 0;
	border-bottom: 1px solid var(--bhi-border);
}
.bhi-home-news time {
	flex: none;
	color: var(--bhi-ink-soft);
	font-size: 0.875rem;
}

/* Newsletter box — one static box, zero popups. */
.bhi-newsletter {
	margin-top: 2.5rem;
	max-width: var(--bhi-measure);
	background: var(--bhi-surface);
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 1.25rem;
}
.bhi-newsletter h2 {
	border: none;
	padding: 0;
	margin-top: 0;
}
.bhi-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.bhi-newsletter__form input[type="email"] {
	flex: 1 1 14rem;
	min-height: var(--bhi-tap);
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 0.5em 0.75em;
	font-size: 1rem; /* 16px floor: no iOS focus zoom */
	font-family: inherit;
}
.bhi-newsletter__form button {
	min-height: var(--bhi-tap);
	padding: 0 1.25em;
	border: none;
	border-radius: var(--bhi-radius);
	background: #1a1a1a;
	color: #fff;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   21. Radio-manuals library (.bhi-rmlib) — handheld reference library
   pages imported from the legacy /radio-manuals/ tree (Phase 11).
   Content comes from the old .rm component markup; these rules keep
   the components readable inside the rebuild's typography and palette.
   No !important; everything is scoped under .bhi-rmlib.
   -------------------------------------------------------------------------- */

.bhi-rmlib .bhi-rm-notice {
	background: var(--bhi-surface);
	border: 1px solid var(--bhi-border);
	border-left: 4px solid var(--bhi-link);
	border-radius: var(--bhi-radius);
	padding: 0.625em 0.875em;
	font-size: 0.8125rem;
	color: var(--bhi-ink-soft);
	margin: 0 0 1.25em;
}

.bhi-rmlib .subtitle {
	color: var(--bhi-ink-soft);
	font-size: 0.9375rem;
	margin: 0 0 1.5em;
}

.bhi-rmlib .model-tabs {
	display: flex;
	gap: 0.25em;
	overflow-x: auto;
	border-bottom: 1px solid var(--bhi-border);
	margin: 0 0 1.5em;
	padding-bottom: 0;
	-webkit-overflow-scrolling: touch;
}

.bhi-rmlib .model-tabs a {
	padding: 0.625em 1em;
	font-weight: 700;
	font-size: 0.875rem;
	white-space: nowrap;
	color: var(--bhi-ink-soft);
	border-bottom: 3px solid transparent;
}

.bhi-rmlib .model-tabs a:hover {
	text-decoration: none;
	color: var(--bhi-link);
}

.bhi-rmlib .model-tabs a.active {
	color: var(--bhi-link);
	border-bottom-color: var(--bhi-link);
}

.bhi-rmlib .callout {
	border-radius: var(--bhi-radius);
	padding: 0.875em 1.125em;
	margin: 1.125em 0;
	border: 1px solid var(--bhi-border);
	background: var(--bhi-surface);
	display: flex;
	gap: 0.75em;
	align-items: flex-start;
}

.bhi-rmlib .callout .ic {
	font-weight: 800;
	flex: 0 0 auto;
}

.bhi-rmlib .callout.info {
	background: #eef4fd;
	border-color: #c9dcf6;
}

.bhi-rmlib .callout.warn {
	background: #fff8ea;
	border-color: #f0dcb0;
}

.bhi-rmlib .callout.danger {
	background: #fdecea;
	border-color: #f0b8b2;
}

.bhi-rmlib .callout.ok {
	background: #e8f6ee;
	border-color: #b7dfc8;
}

.bhi-rmlib .step {
	background: var(--bhi-surface);
	border-left: 4px solid var(--bhi-link);
	border-radius: var(--bhi-radius);
	padding: 0.75em 1em;
	margin: 0.875em 0;
}

.bhi-rmlib kbd {
	background: #1a1a1a;
	color: #e8eaed;
	border-radius: 4px;
	padding: 0.15em 0.45em;
	font-size: 0.8125rem;
	font-family: ui-monospace, Consolas, monospace;
}

.bhi-rmlib .menu-key {
	background: var(--bhi-surface);
	border: 1px solid var(--bhi-border);
	border-radius: 4px;
	padding: 0.05em 0.4em;
	font-weight: 700;
	font-size: 0.875em;
}

.bhi-rmlib .fig {
	margin: 1.25em 0;
	text-align: center;
}

.bhi-rmlib .fig svg {
	width: 100%;
	max-width: 680px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.bhi-rmlib .faq {
	margin: 1.125em 0;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	overflow: hidden;
}

.bhi-rmlib .faq details {
	border-top: 1px solid var(--bhi-border);
}

.bhi-rmlib .faq details:first-child {
	border-top: none;
}

.bhi-rmlib .faq summary {
	padding: 0.875em 1.125em;
	font-weight: 700;
	cursor: pointer;
	min-height: var(--bhi-tap);
	display: flex;
	align-items: center;
	gap: 0.625em;
}

.bhi-rmlib .faq .a {
	padding: 0 1.125em 1em;
	color: var(--bhi-ink-soft);
}

.bhi-rmlib .related {
	margin-top: 1.875em;
}

.bhi-rmlib .related h3 {
	font-size: 1rem;
	margin: 0 0 0.625em;
}

.bhi-rmlib .related .cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.75em;
}

.bhi-rmlib .related .card {
	display: block;
	background: var(--bhi-surface);
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 0.875em 1em;
}

.bhi-rmlib .related .card:hover {
	text-decoration: none;
	border-color: var(--bhi-link);
}

.bhi-rmlib .related .card b {
	display: block;
	margin-bottom: 0.25em;
}

.bhi-rmlib .related .card span {
	font-size: 0.8125rem;
	color: var(--bhi-ink-soft);
}

.bhi-rmlib .models {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.125em;
	margin-top: 0.625em;
}

.bhi-rmlib .model-card {
	background: #fff;
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 1.375em;
}

.bhi-rmlib .model-card h3 {
	margin: 0 0 0.375em;
}

.bhi-rmlib .model-card p {
	color: var(--bhi-ink-soft);
	font-size: 0.875rem;
	margin-bottom: 0.5em;
}

.bhi-rmlib .model-card .links {
	margin-top: 0.875em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.bhi-rmlib .model-card .links a {
	background: var(--bhi-surface);
	border-radius: 999px;
	padding: 0.375em 0.875em;
	font-size: 0.8125rem;
	min-height: var(--bhi-tap);
	display: inline-flex;
	align-items: center;
}

/* --------------------------------------------------------------------------
   22. HTML-native manual chapters (.bhi-manual-html) — Phase 14.
   Chapters whose data is the author's own HTML (ic7300) are stored
   verbatim inside one wrapper div; these rules style the delivered
   structures (.pair / .kn / .pair.box / figure.ph / figure.tb …)
   against the site tokens and type scale. Reading order is the DOM
   order everywhere — pairs stack zh over en on desktop too; no
   two-column visual reordering. No !important; all rules scoped.
   -------------------------------------------------------------------------- */

.bhi-manual-html .pair {
	margin: 0 0 1.25em;
}

.bhi-manual-html .pair > p {
	margin-bottom: 0.375em;
}

.bhi-manual-html .pair > p:last-child {
	margin-bottom: 0;
}

/* Chapter-intro pair: a touch larger, like a lede. */
.bhi-manual-html .pair.lead {
	font-size: 1.0625rem;
}

/* Bilingual label spans sit adjacent in the markup (no whitespace
   between </span><span>); give the English half breathing room. */
.bhi-manual-html .cn + .en {
	margin-left: 0.5em;
}

/* Chapter band: the delivered chapter header, as a quiet strip. */
.bhi-manual-html .ch-band {
	display: flex;
	align-items: center;
	gap: 1em;
	background: var(--bhi-surface);
	border: 1px solid var(--bhi-border);
	border-radius: var(--bhi-radius);
	padding: 0.75em 1em;
	margin: 0 0 1.5em;
	max-width: var(--bhi-measure);
}

.bhi-manual-html .ch-num {
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	color: var(--bhi-ink);
}

.bhi-manual-html .ch-num span {
	display: block;
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	color: var(--bhi-ink-soft);
}

.bhi-manual-html .ch-title {
	margin: 0;
	padding-bottom: 0;
	border-bottom: none;
	font-size: 1.25rem;
	line-height: 1.4;
}

/* Section numbers ride soft; anchored sections clear the top. */
.bhi-manual-html .secno {
	color: var(--bhi-ink-soft);
	margin-right: 0.375em;
}

.bhi-manual-html [id^="s-"] {
	scroll-margin-top: 1rem;
}

/* Key bars (.kn): number chip + key name + page reference row. */
.bhi-manual-html .pair.key {
	margin-bottom: 1em;
}

.bhi-manual-html .kn {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
	margin-bottom: 0.375em;
}

.bhi-manual-html .kn .no {
	min-width: 1.75em;
	text-align: center;
	background: var(--bhi-surface);
	border: 1px solid var(--bhi-border);
	border-radius: 4px;
	padding: 0.05em 0.3em;
	font-weight: 500;
}

.bhi-manual-html .kn .nm {
	font-weight: 500;
}

.bhi-manual-html .kn .pg {
	margin-left: auto;
	font-size: 0.875rem;
	white-space: nowrap;
}

@media (max-width: 30rem) {
	.bhi-manual-html .kn .pg {
		margin-left: 0;
	}
}

/* Physical key names delivered as <kbd>: key-cap styling. */
.bhi-manual-html kbd {
	font-family: inherit;
	font-size: 0.875em;
	font-weight: 500;
	white-space: nowrap;
	background: #fff;
	border: 1px solid var(--bhi-border);
	border-bottom-width: 2px;
	border-radius: 4px;
	padding: 0.05em 0.4em;
}

/* Tip / note / ham-tip / warning boxes: real boxes, quiet palette,
   warnings and field experience get their own accent. */
.bhi-manual-html .pair.box {
	border: 1px solid var(--bhi-border);
	border-left: 4px solid var(--bhi-ink-faint);
	background: var(--bhi-surface);
	border-radius: var(--bhi-radius);
	padding: 0.75em 1em;
}

.bhi-manual-html .pair.box.ham {
	border-left-color: #146c2e;
}

.bhi-manual-html .pair.box.warn {
	border-left-color: #b3261e;
}

.bhi-manual-html .box-h {
	font-weight: 500;
	margin: 0 0 0.5em;
}

/* List blocks inside pairs: the pair supplies the outer rhythm. */
.bhi-manual-html .blk {
	margin-bottom: 0.375em;
}

.bhi-manual-html .pair .lst {
	margin-bottom: 0;
}

.bhi-manual-html .stepno {
	font-weight: 500;
	margin-right: 0.25em;
}

/* Figures and tables run the full content column (the prose measure
   still governs paragraphs via the base rules). */
.bhi-manual-html figure {
	max-width: 100%;
}

.bhi-manual-html figure.ph img {
	border: 1px solid var(--bhi-border);
}

.bhi-manual-html figure.tb figcaption {
	margin: 0 0 0.5em;
}

/* The delivered .tb-scroll wrapper owns horizontal scrolling on
   narrow screens, so the table itself renders as a real table. */
.bhi-manual-html .tb-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bhi-manual-html table.bt {
	display: table;
	margin-bottom: 0;
}

.bhi-manual-html table.bt td.k,
.bhi-manual-html table.bt th.k {
	font-weight: 500;
	background: var(--bhi-surface);
	white-space: nowrap;
}

/* Phase 16 — FTX-1 grammar: .bi bilingual pairs (kept in delivered
   EN-over-CN order), headed boxes with CN/EN lines, section heads,
   part banners, key bars, front/back matter. The delivery's five
   images do not appear on the site (owner decision), so there are no
   figure.ph / .gal / .support rules here by design. */
.bhi-manual-html td.k,
.bhi-manual-html th.k {
	font-weight: 500;
	background: var(--bhi-surface);
	white-space: nowrap;
}
.bhi-manual-html figure.tb {
	margin: 0 0 1.25em;
}
.bhi-manual-html .bi {
	margin: 0 0 1.25em;
}
.bhi-manual-html .bi > .en {
	margin: 0 0 0.5em;
}
.bhi-manual-html .bi .lh {
	display: inline-block;
	padding: 0.0625em 0.5em;
	margin: 0 0 0.5em;
	border: 1px solid var(--bhi-border);
	border-radius: 999px;
	font-size: 0.8125rem;
	color: var(--bhi-ink-soft);
}
.bhi-manual-html .ch-lead {
	border-left: 3px solid var(--bhi-border);
	background: var(--bhi-surface);
	padding: 0.75em 1em;
	margin: 0 0 1.25em;
}
.bhi-manual-html .part-banner {
	border-top: 2px solid var(--bhi-ink);
	border-bottom: 1px solid var(--bhi-border);
	padding: 0.375em 0;
	margin: 0 0 1.5em;
	font-weight: 500;
}
.bhi-manual-html .ch-head {
	margin: 0 0 1.25em;
}
.bhi-manual-html .ch-head .cn {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.4;
	font-weight: 500;
}
.bhi-manual-html .ch-head > .en {
	display: block;
	margin-top: 0.25em;
	color: var(--bhi-ink-soft);
	font-size: 0.9375rem;
}
.bhi-manual-html h2.sec[id] {
	scroll-margin-top: 5rem;
}
.bhi-manual-html h2.sec > .en,
.bhi-manual-html h3.sub > .en,
.bhi-manual-html h4.mini > .en {
	margin-left: 0.5em;
	color: var(--bhi-ink-soft);
	font-weight: 400;
}
.bhi-manual-html h4.mini {
	font-size: 1rem;
	font-weight: 500;
	margin: 1.25em 0 0.5em;
}
.bhi-manual-html .tip,
.bhi-manual-html .note,
.bhi-manual-html .warn,
.bhi-manual-html .ham {
	border-left: 3px solid var(--bhi-border);
	background: var(--bhi-surface);
	padding: 0.75em 1em;
	margin: 0 0 1.25em;
}
.bhi-manual-html .warn {
	border-left-color: #b3261e;
}
.bhi-manual-html .ham {
	border-left-color: #146c2e;
}
.bhi-manual-html .tip .box-h,
.bhi-manual-html .note .box-h,
.bhi-manual-html .warn .box-h,
.bhi-manual-html .ham .box-h {
	display: block;
	font-weight: 500;
	margin: 0 0 0.375em;
}
.bhi-manual-html .tip .box-h .en,
.bhi-manual-html .note .box-h .en,
.bhi-manual-html .warn .box-h .en,
.bhi-manual-html .ham .box-h .en {
	margin-left: 0.5em;
	color: var(--bhi-ink-soft);
	font-weight: 400;
}
.bhi-manual-html .cnline,
.bhi-manual-html .enline {
	display: block;
}
.bhi-manual-html .enline {
	margin-top: 0.375em;
}
.bhi-manual-html .ky,
.bhi-manual-html .keys {
	margin: 0 0 1.25em;
}
.bhi-manual-html .kn {
	margin: 0 0 0.375em;
}
.bhi-manual-html .kn > b {
	font-weight: 500;
}
.bhi-manual-html .kn > i {
	font-style: normal;
	color: var(--bhi-ink-soft);
}
.bhi-manual-html .kb {
	font-family: var(--bhi-font);
	font-size: 0.875em;
	font-weight: 500;
	border: 1px solid var(--bhi-border);
	border-bottom-width: 2px;
	border-radius: 4px;
	padding: 0 0.375em;
	white-space: nowrap;
}
.bhi-manual-html .slot {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 1px dashed var(--bhi-ink-faint);
	border-radius: 2px;
	vertical-align: -0.125em;
}
.bhi-manual-html .disc {
	margin: 0 0 1.25em;
}
.bhi-manual-html .tp-box {
	border-left: 3px solid var(--bhi-border);
	background: var(--bhi-surface);
	padding: 0.75em 1em;
	margin: 0 0 1.25em;
}
.bhi-manual-html .cover {
	text-align: center;
	margin: 0 0 2em;
}
.bhi-manual-html .cv-brand {
	color: var(--bhi-ink-soft);
	font-size: 0.875rem;
	letter-spacing: 0.05em;
}
.bhi-manual-html .cv-rule {
	border-top: 2px solid var(--bhi-ink);
	margin: 0.75em auto;
	max-width: 12rem;
}
.bhi-manual-html .cv-title {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 0.5em 0;
}
.bhi-manual-html .cv-title small {
	font-size: 1rem;
	font-weight: 400;
	color: var(--bhi-ink-soft);
}
.bhi-manual-html .cv-sub {
	font-weight: 500;
}
.bhi-manual-html .cv-desc {
	color: var(--bhi-ink-soft);
	margin-top: 0.75em;
}
.bhi-manual-html .cv-foot {
	margin-top: 1.5em;
	color: var(--bhi-ink-soft);
	font-size: 0.875rem;
}
.bhi-manual-html .cv-tag {
	display: inline-block;
	border: 1px solid var(--bhi-border);
	border-radius: 999px;
	padding: 0.125em 0.75em;
	margin: 0.25em;
}

/* Uniden grammar (HTML edition) — the delivery's loose bilingual flow:
   .pair blocks (EN over CN), loose p.en / p.cn / p.mix paragraphs,
   three-column bilingual tables (table.tbl), note / usdiff / whitebox
   boxes, banner + part titles, cover hero. Rules are ported from the
   delivery's own stylesheet (page furniture excluded — the site
   supplies chrome) and scoped under the device modifier class the
   importer adds to this book's wrapper only, because the grammar
   reuses generic names (.pair, .note) that mean something else in
   the ic7300/ftx1 grammars. No !important. */
.bhi-manual-html--uniden p {
	margin: 0 0 0.75em;
}
.bhi-manual-html--uniden p.en {
	color: #3d4a5c;
	font-size: 0.9375rem;
}
.bhi-manual-html--uniden .pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.125em;
	margin: 0 0 0.875em;
	padding: 0.625em 0.875em;
	border-left: 3px solid #d7dee9;
	background: #fbfcfe;
	border-radius: 0 8px 8px 0;
}
.bhi-manual-html--uniden .pair p {
	margin: 0;
}
.bhi-manual-html--uniden h1.sec-banner {
	background: #e8f1fa;
	border: 1px solid #cfe0f2;
	border-left: 5px solid #2b6cb0;
	border-radius: 8px;
	padding: 0.6em 0.9em;
	font-size: 1.25rem;
	line-height: 1.4;
	margin: 0.375em 0 1.375em;
	color: #1c3d63;
}
.bhi-manual-html--uniden h1.part-title {
	font-size: 1.5rem;
	margin: 0.625em 0 0.5em;
	color: #12365e;
}
.bhi-manual-html--uniden .part-sub {
	color: var(--bhi-ink-soft);
	font-size: 0.875rem;
	margin: 0 0 1.375em;
	border-bottom: 2px solid #2b6cb0;
	padding-bottom: 0.625em;
}
.bhi-manual-html--uniden h3.sub-head {
	font-size: 1.0625rem;
	margin: 1.625em 0 0.625em;
	color: #223344;
	border-left: 4px solid #2b6cb0;
	padding-left: 0.625em;
	line-height: 1.45;
}
.bhi-manual-html--uniden .note {
	background: #fff8e6;
	border: 1px solid #e6b83c;
	border-left: 5px solid #b8860b;
	border-radius: 8px;
	padding: 0.75em 1.125em;
	margin: 1em 0;
}
.bhi-manual-html--uniden .note p {
	font-size: 0.9375rem;
}
.bhi-manual-html--uniden .box-title {
	font-weight: 700;
	color: #8a6400;
	font-size: 0.9375rem;
	margin-bottom: 0.5em;
}
.bhi-manual-html--uniden .usdiff {
	background: #eef7f0;
	border: 1px solid #4e9a5e;
	border-left: 5px solid #2f7d46;
	border-radius: 8px;
	padding: 0.75em 1.125em;
	margin: 1em 0;
}
.bhi-manual-html--uniden .usdiff-tag {
	font-weight: 600;
	color: #2f7d46;
	font-size: 0.875rem;
	margin-bottom: 0.375em;
}
.bhi-manual-html--uniden .usdiff p {
	font-size: 0.9375rem;
}
.bhi-manual-html--uniden .whitebox {
	border: 1px solid var(--bhi-border);
	border-radius: 8px;
	padding: 0.75em 1.125em;
	margin: 1em 0;
	background: #fff;
}
.bhi-manual-html--uniden .whitebox p {
	font-size: 0.9375rem;
}
.bhi-manual-html--uniden table.tbl {
	width: 100%;
	border-collapse: collapse;
	margin: 0.875em 0 1.25em;
	font-size: 0.875rem;
	background: #fff;
	border: 1px solid var(--bhi-border);
}
.bhi-manual-html--uniden table.tbl.narrow {
	font-size: 0.75rem;
}
.bhi-manual-html--uniden table.tbl th {
	background: #f4f6fa;
	font-weight: 600;
	color: #33415c;
	text-align: left;
}
.bhi-manual-html--uniden table.tbl th,
.bhi-manual-html--uniden table.tbl td {
	border: 1px solid var(--bhi-border);
	padding: 0.4375em 0.625em;
	vertical-align: top;
	white-space: pre-line;
	line-height: 1.6;
}
.bhi-manual-html--uniden table.tbl.narrow th,
.bhi-manual-html--uniden table.tbl.narrow td {
	padding: 0.25em 0.375em;
	white-space: normal;
}
.bhi-manual-html--uniden table.tbl tbody tr:nth-child(even) td {
	background: #fafbfd;
}
.bhi-manual-html--uniden p.colophon {
	color: var(--bhi-ink-soft);
	font-size: 0.8125rem;
	text-align: center;
	margin: 0.125em 0;
}
.bhi-manual-html--uniden .cover-hero {
	text-align: center;
	padding: 1.5em 0.625em 1em;
}
.bhi-manual-html--uniden .cover-hero .t1 {
	font-size: 1.625rem;
	font-weight: 700;
	color: #12365e;
	line-height: 1.4;
}
.bhi-manual-html--uniden .cover-hero .t2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 0.5em;
	color: #1c3d63;
	line-height: 1.5;
}
.bhi-manual-html--uniden .cover-hero .t3 {
	font-size: 0.9375rem;
	color: var(--bhi-ink-soft);
	margin-top: 0.875em;
	line-height: 1.8;
}
.bhi-manual-html--uniden .cover-meta {
	max-width: 47.5rem;
	margin: 1.125em auto 0;
	font-size: 0.875rem;
	color: var(--bhi-ink-soft);
	line-height: 1.9;
}

/* Phase 51: article read-aloud row (Web Speech API; article posts only). */
.bhi-tts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
}
.bhi-tts__btn {
	min-height: 48px;
	padding: 0 1rem;
	font-size: 1rem;
	line-height: 1.5;
	border: 1px solid #ccc;
	border-radius: 0.375rem;
	background: #fff;
	cursor: pointer;
}
.bhi-tts__btn:hover {
	text-decoration: underline;
}
.bhi-tts__status {
	font-size: 1rem;
	color: #555;
}

/* Manual section notice (0.1.75): prominent bilingual owner/translation
   notice atop /manual/ pages. Boxed + tinted + blue accent bar, so it
   reads as a notice without shouting; body type inherits (16px/1.5). */
.bhi-manual-notice {
	background: #f8f9fa;
	border: 1px solid #a2a9b1;
	border-left: 4px solid #3366cc;
	padding: 0.75rem 1rem;
	margin: 0 0 1.5rem;
}
.bhi-manual-notice p {
	margin: 0 0 0.5rem;
}
.bhi-manual-notice p:last-child {
	margin-bottom: 0;
}

/* Bilingual radio guides (0.1.76): single-page guides under /manual/
   (uv5r/uvk5/ft65r). Every rule in this section is scoped under
   .manual-guide so nothing leaks into the header, footer or other
   content. No shadows, no card style: plain bordered boxes, site type
   (16px/1.5) and site link blue (#0000ee). Heading sizes follow
   Material: H2 24px, H3 20px, H4 18px, all weight 500. The standalone
   source palette is deliberately NOT reused here (no brand blue, no
   accent orange, no tinted fills); accents below are the site's own
   notice/border neutrals plus muted semantic bar shades. */
.manual-guide {
	font-size: 1rem;
	line-height: 1.5;
}
.manual-guide h2 {
	font-size: 1.5rem;
	font-weight: 500;
}
.manual-guide h3 {
	font-size: 1.25rem;
	font-weight: 500;
}
.manual-guide h4 {
	font-size: 1.125rem;
	font-weight: 500;
}
.manual-guide a {
	color: #0000ee;
	text-decoration: none;
}
.manual-guide a:hover {
	text-decoration: underline;
}
.manual-guide p {
	margin: 0 0 1rem;
}
.manual-guide ul,
.manual-guide ol {
	margin: 0 0 1rem;
	padding-left: 1.5rem;
}
.manual-guide table {
	border-collapse: collapse;
	margin: 0 0 1rem;
}
.manual-guide th,
.manual-guide td {
	border: 1px solid #a2a9b1;
	padding: 0.5rem;
	text-align: left;
}
.manual-guide th {
	background: #f8f9fa;
}
/* Language visibility: default (no mode class) shows both, same as
   show-both. show-zh hides English, show-en hides Chinese. The toggle
   script only ever touches the .manual-guide element's own class list
   (never body), so theme body classes are untouched. */
.manual-guide.show-zh .lang-en {
	display: none;
}
.manual-guide.show-en .lang-zh {
	display: none;
}
/* Bilingual labels on paragraph blocks, show-both only (answers
   .q-a stay unlabeled, as in the source design; labels are hidden on
   narrow screens where they cost horizontal room — same specificity
   as the label rules so the override actually wins). */
.manual-guide.show-both .blk.lang-zh::before {
	content: "中文";
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 1px 7px;
	border: 1px solid #a2a9b1;
	background: #f8f9fa;
	margin: 0 8px 6px 0;
	vertical-align: middle;
}
.manual-guide.show-both .blk.lang-en::before {
	content: "EN";
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 1px 7px;
	border: 1px solid #a2a9b1;
	background: #f8f9fa;
	margin: 0 8px 6px 0;
	vertical-align: middle;
}
.manual-guide.show-both .q-a.blk::before {
	content: "";
	display: none;
}
@media (max-width: 63.9375em) {
	.manual-guide.show-both .blk.lang-zh::before,
	.manual-guide.show-both .blk.lang-en::before {
		display: none;
	}
}
/* Language toggle: three buttons, 48px tap targets, selected state
   unmistakable (dark fill) so it never reads as unselected. */
.manual-guide .lang-toggle {
	margin: 0 0 1.5rem;
}
.manual-guide .lang-toggle button {
	min-height: 48px;
	padding: 0 1rem;
	font-size: 1rem;
	line-height: 1.5;
	border: 1px solid #a2a9b1;
	border-radius: 0.375rem;
	background: #fff;
	cursor: pointer;
}
.manual-guide .lang-toggle button.is-active {
	background: #555;
	color: #fff;
	border-color: #555;
}
/* Guide's own table of contents (10 anchors, curated in the content). */
.manual-guide .toc {
	border: 1px solid #a2a9b1;
	padding: 0.75rem 1rem;
	margin: 0 0 1.5rem;
}
.manual-guide .toc h4 {
	margin: 0 0 0.5rem;
}
.manual-guide .toc ol {
	margin: 0;
}
.manual-guide .toc li {
	margin: 0.375rem 0;
}
/* Sections: plain spacing, no cards, no shadows. */
.manual-guide .topic {
	margin: 0 0 2rem;
}
.manual-guide .sec {
	margin: 0 0 1rem;
}
.manual-guide .blk {
	margin: 0.5rem 0;
}
.manual-guide .sub {
	color: #555;
}
/* Callouts: neutral box + left accent bar only (no tinted fills, no
   shadows). The icon character (.ic: ⚠ / i) carries the severity;
   the bar shade distinguishes info / warn / danger / ok. */
.manual-guide .callout {
	border: 1px solid #a2a9b1;
	border-left: 4px solid #666;
	padding: 0.75rem 1rem;
	margin: 1rem 0;
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}
.manual-guide .callout .ic {
	font-weight: 800;
	flex: 0 0 auto;
}
.manual-guide .callout.info {
	border-left-color: #3366cc;
}
.manual-guide .callout.warn {
	border-left-color: #7a5a00;
}
.manual-guide .callout.danger {
	border-left-color: #8b1a1a;
}
.manual-guide .callout.ok {
	border-left-color: #2e6b30;
}
/* Steps, key caps, figures, Q&A, closing disclaimer. */
.manual-guide .step {
	border: 1px solid #a2a9b1;
	border-left: 4px solid #666;
	padding: 0.75rem 1rem;
	margin: 1rem 0;
}
.manual-guide kbd,
.manual-guide .menu-key {
	background: #f8f9fa;
	border: 1px solid #a2a9b1;
	border-radius: 4px;
	padding: 1px 6px;
	font-weight: 700;
}
.manual-guide .fig {
	margin: 1.25rem 0;
	text-align: center;
}
.manual-guide .fig svg {
	max-width: 100%;
	height: auto;
}
.manual-guide .faq-sec {
	border: 1px solid #a2a9b1;
	padding: 0.75rem 1rem;
	margin: 1rem 0;
}
.manual-guide .q-q {
	font-weight: 700;
	margin: 0 0 0.375rem;
}
.manual-guide .guide-disclaimer {
	border: 1px solid #a2a9b1;
	background: #f8f9fa;
	padding: 0.75rem 1rem;
	margin: 1.5rem 0 0;
}