/* Tokens mirror InstantDocs' globals.css: shadcn neutral palette, --radius 0.625rem
   (sm=6/md=8/lg=10px), border hsl(0 0% 89.8%) light / white-10% dark. */
:root {
  --kb-brand: #2563eb;
  --kb-bg: #ffffff;
  --kb-fg: hsl(0 0% 3.9%);
  --kb-muted: hsl(0 0% 45.2%);
  --kb-border: hsl(0 0% 89.8%);
  --kb-card: #ffffff;
  /* Muted surface (shadcn muted/accent) — used for the updated badge, prose code, hover states. */
  --kb-accent: hsl(0 0% 96.1%);
  /* The page surface behind the documentation sidebar + inset (shadcn zinc-50). */
  --kb-surface: hsl(0 0% 98%);
  /* The documentation island fill (InstantDocs' bg-white dark:bg-black). */
  --kb-island: #ffffff;
  /* Brand-tint: the brand color at low alpha for hero/island/active states. */
  --kb-brand-tint: color-mix(in srgb, var(--kb-brand) 10%, transparent);
  /* Highlight mark (`<mark>`) — matches the editor's `--highlight` gold so authored ≙ published. */
  --kb-highlight: oklch(0.852 0.199 91.936);
  --kb-radius: 0.625rem;
  --kb-radius-lg: var(--kb-radius);
  --kb-radius-md: calc(var(--kb-radius) - 2px);
  --kb-radius-sm: calc(var(--kb-radius) - 4px);
  --kb-radius-xl: calc(var(--kb-radius) + 0.375rem);
  --kb-content-width: 972px;
  /* Shared help-centre chrome gutter (InstantDocs px-2) — header, hero, and home content all consume
     it so their edges stay locked together; article/collection/search keep the wider 1rem prose gutter. */
  --kb-hc-gutter: 0.5rem;
  /* Documentation island's own inset, consumed by the island, the home body, and the hero band's text
     so they can't drift apart. Stepped up at the breakpoints below. */
  --kb-doc-gutter-x: 1.5rem;
  --kb-doc-gutter-y: 1.5rem;
  /* Island border width; the hero band's top-corner radius is derived from this to sit flush inside it. */
  --kb-island-border: 1px;
  --kb-sidebar-width: 256px;
  --kb-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --kb-font-heading: var(--kb-font);
}
@media (min-width: 768px) {
  :root { --kb-doc-gutter-x: 2.25rem; --kb-doc-gutter-y: 2rem; }
}
@media (min-width: 1024px) {
  :root { --kb-doc-gutter-x: 3rem; --kb-doc-gutter-y: 2.5rem; }
}
.dark {
  --kb-bg: #09090b;
  --kb-fg: hsl(0 0% 98%);
  --kb-muted: hsl(0 0% 63%);
  --kb-border: rgba(255, 255, 255, 0.1);
  --kb-card: hsl(0 0% 9.1%);
  --kb-accent: hsl(0 0% 14.9%);
  --kb-surface: hsl(0 0% 9.1%);
  --kb-island: #000000;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    --kb-bg: #09090b;
    --kb-fg: hsl(0 0% 98%);
    --kb-muted: hsl(0 0% 63%);
    --kb-border: rgba(255, 255, 255, 0.1);
    --kb-card: hsl(0 0% 9.1%);
    --kb-accent: hsl(0 0% 14.9%);
    --kb-surface: hsl(0 0% 9.1%);
    --kb-island: #000000;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
/* Sticky-footer shell: the body is a full-height flex column, the main region grows to fill it, and
   the footer is pushed to the bottom on short pages (margin-top:auto) — no floating mid-page. */
body {
  font-family: var(--kb-font);
  color: var(--kb-fg);
  background: var(--kb-bg);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
/* Documentation = fixed full-viewport shell: the page never scrolls; each panel scrolls internally. */
body.kb-body-doc { height: 100vh; min-height: 0; overflow: hidden; }

/* Pre-publish preview banner (admin draft preview only; never the public reader). */
body.kb-preview { --kb-preview-h: 2.5rem; }
.kb-preview-banner {
  flex: none;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: var(--kb-preview-h); padding: 0 1rem;
  background: #fef3c7; color: #92400e; border-bottom: 1px solid #fde68a;
  font-size: 0.8125rem; font-weight: 500; text-align: center;
}
.kb-preview-banner-icon { flex: none; }
/* Documentation pins each panel to the viewport (body overflow:hidden), so shrink them by the banner
   height; help center scrolls, so its banner rides in normal flow above the hero. */
body.kb-preview.kb-body-doc .kb-doc,
body.kb-preview.kb-body-doc .kb-doc-inset,
body.kb-preview.kb-body-doc .kb-doc-sidebar { height: calc(100vh - var(--kb-preview-h)); }
body.kb-preview.kb-body-doc .kb-doc-sidebar { max-height: calc(100vh - var(--kb-preview-h)); }

a { color: var(--kb-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.kb-hero h1,
.kb-article-title,
.kb-section-title,
.kb-card-title,
.kb-list-title { font-family: var(--kb-font-heading); }


.kb-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 14px 1.5rem; border-bottom: 1px solid var(--kb-border);
}
.kb-header-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.kb-logo { display: flex; align-items: center; gap: 0.625rem; font-weight: 600; color: var(--kb-fg); font-size: 18px; min-width: 0; }
.kb-logo:hover { text-decoration: none; }
.kb-logo span { line-height: 1; }
.kb-logo-img { width: auto; display: block; }
.kb-logo-small .kb-logo-img { height: 26px; }
.kb-logo-medium .kb-logo-img { height: 36px; }
.kb-logo-large .kb-logo-img { height: 48px; }
/* Paired light/dark logo: show the variant matching the active theme (forced .dark or system dark-OS).
   A single-variant logo carries only .kb-logo-img and stays visible in every theme. */
.kb-logo-dark { display: none; }
.dark .kb-logo-light { display: none; }
.dark .kb-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) .kb-logo-light { display: none; }
  :root:not(.light):not(.dark) .kb-logo-dark { display: block; }
}
/* Nav links match InstantDocs' buttonVariants link variant (h-9, px-2, text-sm, font-medium). */
.kb-nav { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.kb-nav a {
  color: var(--kb-header-link, var(--kb-fg)); font-weight: 500;
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.5rem;
}
.kb-nav a:hover { text-decoration: none; opacity: 0.7; }
/* Documentation top-nav links read at full foreground weight (InstantDocs' text-foreground override),
   not the faint help-centre header-link tint. */
.kb-doc-topnav .kb-nav a { color: var(--kb-fg); font-weight: 500; }
.kb-header-actions { display: flex; align-items: center; gap: 0.5rem; position: relative; }
/* Collapsible header group (nav links + CTA): inline on desktop, folds behind .kb-menu-btn into an
   absolute dropdown below md — shared by the help-centre header and the documentation top-nav. */
.kb-header-menu { display: flex; align-items: center; gap: 0.5rem; }
/* The reader's strict CSP forbids inline JS, so a checkbox + label drives disclosure in pure CSS; these
   toggles stay focusable (not display:none) to preserve keyboard/Space toggling. */
.kb-menu-toggle, .kb-drawer-toggle {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Mobile-only chrome, revealed by the mobile media block below. */
.kb-menu-btn, .kb-drawer-open, .kb-doc-topnav-brand, .kb-drawer-scrim { display: none; }
/* CTA mirrors InstantDocs' default button (h-9 px-4 py-2 rounded-md text-sm font-medium); radius is a
   literal 6px since --kb-radius-md resolves to 8px. Help-centre CTA defaults to white-on-hero for
   contrast over the (brand/cover) hero; configured header button colors override when set. */
.kb-cta {
  display: inline-flex; align-items: center; white-space: nowrap;
  min-height: 36px; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500;
  background: var(--kb-btn-bg, #ffffff); color: var(--kb-btn-fg, #0a0a0a);
}
.kb-cta:hover { text-decoration: none; opacity: 0.9; }
/* Documentation CTA is brand-filled + brandedText, independent of the help-centre header-button colors. */
.kb-doc-topnav .kb-cta { background: var(--kb-brand); color: var(--kb-branded-text, #ffffff); }

.kb-main { flex: 1 0 auto; width: 100%; }
.kb-layout-help_center {
  max-width: var(--kb-content-width); margin: 0 auto; padding: 2.25rem 1rem 3rem;
}
/* Help-centre HOME aligns with the header + hero at the shared chrome gutter; article/collection/search
   keep the wider 1rem prose gutter. */
.kb-layout-help_center.kb-hc-home { padding-left: var(--kb-hc-gutter); padding-right: var(--kb-hc-gutter); }
.kb-layout-help_center > .kb-content { width: 100%; min-width: 0; }
/* Help-centre article pages with a ToC split into a content + right-rail grid, capped at the 972px
   content width; below 1280px the rail is hidden and this collapses to one column. */
.kb-layout-help_center.kb-has-toc {
  display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start;
}

/* Mirrors InstantDocs' Sidebar + SidebarInset: a full-height 256px sidebar flush at the viewport edge,
   and an inset holding a sticky top-nav + rounded island. No horizontal shell padding — the sidebar
   starts at x=0 (the inset/island carry their own gutters via the island margin + topnav padding). */
.kb-doc { display: flex; height: 100vh; width: 100%; background: var(--kb-surface); overflow: hidden; }
.kb-doc-inset { flex: 1 1 auto; min-width: 0; height: 100vh; display: flex; flex-direction: column; }
/* Sticky inset top-nav, right-aligned actions only (the sidebar carries the logo). */
.kb-doc-topnav {
  position: sticky; top: 0; z-index: 50; flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 0.5rem; gap: 1rem;
  background: var(--kb-surface); backdrop-filter: blur(12px);
}
@media (min-width: 768px) { .kb-doc-topnav { padding: 0 1rem; } }
.kb-doc-topnav-spacer { flex: 1 1 auto; min-width: 0; }
.kb-doc-topnav-actions { display: flex; align-items: center; gap: 0.5rem; position: relative; }
/* The rounded island floating on the page (InstantDocs' rounded-2xl border bg-white dark:bg-black). */
.kb-doc-island {
  /* No LEFT margin: the island butts against the sidebar so its scrollbar sits flush against the island. */
  flex: 1 1 auto; min-height: 0; min-width: 0; margin: 0 0.5rem 0.5rem 0;
  padding: var(--kb-doc-gutter-y) var(--kb-doc-gutter-x);
  background: var(--kb-island); border: var(--kb-island-border) solid var(--kb-border);
  border-radius: var(--kb-radius-xl);
  overflow-y: auto;
}
@media (min-width: 768px) { .kb-doc-island { margin: 0 1rem 1rem 0; } }
/* Mirrors InstantDocs' content column (px-4 md:px-8); with border-box this trims prose to that width. */
.kb-doc-island > .kb-content { min-width: 0; max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) { .kb-doc-island > .kb-content { padding-left: 2rem; padding-right: 2rem; } }
/* InstantDocs caps and centers the documentation content column: 672px at xl, 768px at 2xl. */
@media (min-width: 1280px) {
  .kb-doc-island:not(.kb-doc-island-has-toc) > .kb-content { max-width: 42rem; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1536px) {
  .kb-doc-island:not(.kb-doc-island-has-toc) > .kb-content { max-width: 48rem; }
}
.kb-doc-island > .kb-section-title:first-child,
.kb-doc-island .kb-content > .kb-section-title:first-child { margin-top: 0; }
/* Documentation HOME island: the hero band is unpadded full-bleed, so the island drops its inset here
   and the body below carries it instead (mirrors InstantDocs' unpadded main + padded content container).
   Not .kb-content — that column is capped/centered for prose, wrong for the home card grid. */
.kb-doc-island-home {
  padding: 0;
  /* Homepage column inset, shared by the hero band and body below: the plain island gutter until the
     island outgrows --kb-content-width, then it absorbs the overflow so content settles at that width. */
  --kb-doc-home-inset: max(var(--kb-doc-gutter-x), calc((100% - var(--kb-content-width)) / 2));
}
.kb-doc-home-body { padding: 0 var(--kb-doc-home-inset) var(--kb-doc-gutter-y); }
.kb-doc-home-body > .kb-section-title:first-child { margin-top: 0; }
/* Article island with a ToC: content centered in the left track, rail a fixed 300px (InstantDocs
   w-[300px] min-w-[268px]); below 1280px collapses to block and the rail hides. The island carries NO
   vertical padding here (it's the unpadded scroll container) — that moves onto the content column so
   the rail's sticky top:0 lines up with the true scrollport top. */
.kb-doc-island-has-toc { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; padding-top: 0; padding-bottom: 0; }
.kb-doc-island-has-toc > .kb-content { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 768px) { .kb-doc-island-has-toc > .kb-content { padding-top: 2rem; padding-bottom: 2rem; } }
@media (min-width: 1024px) { .kb-doc-island-has-toc > .kb-content { padding-top: 2.5rem; padding-bottom: 2.5rem; } }
@media (min-width: 1280px) {
  .kb-doc-island-has-toc > .kb-content { max-width: 42rem; margin-left: auto; margin-right: auto; width: 100%; }
}
@media (min-width: 1536px) {
  .kb-doc-island-has-toc > .kb-content { max-width: 48rem; }
}

/* Mirrors InstantDocs' published-sidebar-inner: a full-height ~256px rail with a logo header, a
   button-styled search field, bold collection group labels, and a pinned footer. */
.kb-doc-sidebar {
  position: sticky; top: 0; align-self: flex-start; height: 100vh; max-height: 100vh; flex: none;
  width: var(--kb-sidebar-width); overflow: hidden; background: var(--kb-surface);
  display: flex; flex-direction: column; font-size: 0.875rem;
}
/* Pinned head (logo + search): doesn't scroll — only the tree below it does. */
.kb-doc-sidebar-head { flex: none; display: flex; flex-direction: column; gap: 0; padding: 0 0 0.5rem; }
.kb-doc-sidebar-head .kb-logo { height: 64px; padding: 0 1rem; font-size: 1rem; }
/* The sidebar search affordance — a bordered, button-styled field with a ⌘K hint. */
.kb-doc-sidebar-head .kb-search { flex: 1 1 auto; margin: 0 0.5rem; }
.kb-doc-sidebar-head .kb-search-input {
  width: 100%; height: 36px; padding: 0 2.75rem 0 2.1rem; border-radius: var(--kb-radius-lg);
  background: var(--kb-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.dark .kb-doc-sidebar-head .kb-search-input { background: rgba(255, 255, 255, 0.05); }
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) .kb-doc-sidebar-head .kb-search-input { background: rgba(255, 255, 255, 0.05); }
}
.kb-sidebar-kbd {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  font-size: 0.75rem; color: var(--kb-muted); pointer-events: none;
}
.kb-doc-tree { flex: 1 1 auto; min-height: 0; padding: 0.5rem 0; overflow-y: auto; }
/* Scoped under .kb-doc-sidebar to outrank the generic ".kb-doc-sidebar ul { padding: 0 }" reset below. */
.kb-doc-sidebar .kb-doc-tree > ul { padding-left: 0.5rem; padding-right: 0.5rem; }
.kb-doc-sidebar ul { list-style: none; margin: 0; padding: 0; }
.kb-doc-sidebar li { margin: 1px 0; }
/* A tree row is the styled, clickable button box — a leaf link or a collapsible group's <summary> —
   so the group's chevron sits inside the button. */
.kb-doc-sidebar a,
.kb-doc-tree summary.kb-tree-summary {
  color: var(--kb-fg); display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.5rem; border-radius: var(--kb-radius-sm); line-height: 1.35; min-height: 32px;
}
/* Native <details> disclosure (no JS): the summary IS the button; the chevron rotates when open. */
.kb-doc-tree summary.kb-tree-summary { list-style: none; cursor: pointer; }
.kb-doc-tree summary.kb-tree-summary::-webkit-details-marker { display: none; }
/* The inner link fills the row (chevron to its right) and drops its own box. */
.kb-doc-tree summary.kb-tree-summary > a {
  flex: 1 1 auto; min-width: 0; padding: 0; min-height: 0; border-radius: 0; color: inherit; font-weight: inherit;
}
.kb-doc-tree summary.kb-tree-summary > a:hover { background: none; }
.kb-doc-tree details.kb-tree-group[open] > summary > .kb-tree-chevron { transform: rotate(90deg); }
/* Top-level collections/articles read as bold ~70%-foreground group labels. */
.kb-doc-sidebar > .kb-doc-tree > ul > li > a,
.kb-doc-sidebar > .kb-doc-tree > ul > li > details.kb-tree-group > summary {
  font-weight: 500; color: color-mix(in srgb, var(--kb-fg) 70%, transparent);
}
/* `layout.showItemPreview`: a root collection is a non-clickable section label with its children listed
   flat below it, so it carries full foreground to read as a heading above them. */
.kb-tree-section { margin-top: 0.75rem; }
.kb-doc-tree > ul > .kb-tree-section:first-child { margin-top: 0; }
.kb-tree-section-title {
  display: flex; align-items: center; min-height: 32px; padding: 0.375rem 0.5rem;
  font-weight: 500; color: var(--kb-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Section children replace the collapsed group, so they skip the sub-list inset/guide line. */
.kb-doc-sidebar ul.kb-tree-section-items { margin-left: 0; padding-left: 0; border-left: none; }
/* Nested items (articles + subcollections) are normal-weight items with a 16px icon. */
.kb-doc-sidebar ul ul a { color: var(--kb-fg); font-weight: 400; }
/* Nested items carry a left guide line showing indentation. */
.kb-doc-sidebar ul ul { margin-left: 0.875rem; padding-left: 0.625rem; border-left: 1px solid var(--kb-border); }
.kb-doc-sidebar a:hover,
.kb-doc-tree summary.kb-tree-summary:hover { background: var(--kb-accent); text-decoration: none; }
.kb-doc-sidebar a.is-active,
.kb-doc-tree summary.kb-tree-summary.is-active {
  color: var(--kb-brand); background: var(--kb-brand-tint); font-weight: 600;
}
/* currentColor SVGs + emoji inherit the row color on active/hover; img icons can't be recolored. */
.kb-doc-sidebar a.is-active .kb-tree-icon,
.kb-doc-tree summary.kb-tree-summary.is-active .kb-tree-icon,
.kb-doc-tree summary.kb-tree-summary.is-active > a .kb-tree-icon { color: var(--kb-brand); }
.kb-doc-sidebar a:hover .kb-tree-icon,
.kb-doc-tree summary.kb-tree-summary:hover .kb-tree-icon { color: inherit; }
.kb-doc-sidebar .kb-tree-icon { font-size: 16px; line-height: 1; flex: none; width: 16px; height: 16px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.kb-doc-sidebar .kb-tree-icon svg, .kb-doc-sidebar .kb-tree-icon.kb-icon-img, .kb-doc-sidebar .kb-tree-icon.kb-icon-mask { width: 16px; height: 16px; }
.kb-doc-sidebar .kb-tree-label-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-tree-chevron { flex: none; width: 16px; height: 16px; color: var(--kb-muted); margin-left: auto; transition: transform 0.15s ease; }
.kb-doc-sidebar-foot { flex: none; margin-top: auto; border-top: 1px solid var(--kb-border); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.kb-doc-foot-links { display: flex; flex-direction: column; }
.kb-doc-foot-link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  height: 32px; padding: 0 0.5rem; color: var(--kb-fg); font-size: 0.875rem; border-radius: var(--kb-radius-sm);
}
.kb-doc-foot-link:hover { background: var(--kb-accent); text-decoration: none; }
.kb-doc-foot-arrow { flex: none; width: 16px; height: 16px; color: var(--kb-muted); }

/* DEAD — `.kb-hero`/`.kb-hero-cover` are emitted by no component; superseded by `.kb-hc-hero` and
   `.kb-doc-hero` below. Kept only to avoid folding a hero-background fix into a dead-code sweep. */
.kb-hero { padding: 1rem 0 0; display: flex; flex-direction: column; gap: 1rem; }
.kb-hero h1 { font-size: 1.5rem; font-weight: 700; margin: 0; line-height: 1.2; }
.kb-hero p { color: var(--kb-muted); font-size: 1rem; margin: 0; }
@media (min-width: 640px) { .kb-hero h1 { font-size: 2.25rem; } }
.kb-hero-cover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.5)), var(--kb-cover);
  background-size: cover; background-position: center;
  border-radius: var(--kb-radius); padding: 3rem 2rem; margin-top: 0.5rem; color: #ffffff;
}
.kb-hero-cover h1 { color: inherit; }
.kb-hero-cover p { color: inherit; opacity: 0.92; }

/* HELP-CENTRE full-bleed hero: spans the viewport, dark cover/brand bg, header overlaid on top. */
.kb-hc-hero {
  width: 100%; min-height: 368px; background: var(--kb-brand);
  background-size: cover; background-position: center;
}
/* A cover image is laid on bare, with nothing layered over it — readability is controlled by the
   header-text color, not a darkening layer. */
.kb-hc-hero.kb-hc-hero-cover {
  background-image: var(--kb-cover);
}
/* The header inside the hero is transparent (overlay) and tinted by the header-text color. */
.kb-hc-hero .kb-header {
  background: transparent; border-bottom: 0; max-width: var(--kb-content-width); margin: 0 auto;
  /* Shared help-centre chrome gutter, so the logo lines up with the hero title/search + home content. */
  padding: 14px var(--kb-hc-gutter);
}
.kb-hc-hero .kb-logo, .kb-hc-hero .kb-nav a {
  color: var(--kb-header-link, #ffffff);
}
/* Hero content block: centered title/description + big search, sized to approach InstantDocs' h-[368px]. */
.kb-hc-hero-inner {
  max-width: var(--kb-content-width); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.25rem; padding: 1rem var(--kb-hc-gutter) 0;
}
@media (min-width: 640px) { .kb-hc-hero-inner { padding: 4rem var(--kb-hc-gutter) 0; } }
.kb-hc-hero-title { font-size: 1.5rem; font-weight: 700; margin: 0; line-height: 1.2; color: var(--kb-header-link, #ffffff); }
.kb-hc-hero-desc { font-size: 1rem; font-weight: 400; margin: 0; color: var(--kb-header-link, #ffffff); }
@media (min-width: 640px) { .kb-hc-hero-title { font-size: 2.25rem; } }
/* Alignment text-aligns the hero title/description only; the search bar below always spans the column. */
.kb-hc-hero-text { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; text-align: left; }
.kb-hc-hero-text.kb-hc-align-center { text-align: center; }

/* DOCUMENTATION home island hero: a full-bleed band crowning the island (not a contained card), so it
   carries no outer gutter and rounds its own top corners; the home body below owns the content gutter. */
.kb-doc-hero {
  display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; text-align: left;
  min-height: 288px; margin: 0 0 3rem; overflow: hidden;
  /* Full-bleed background, capped text: the inset matches the home column's, so titles and cards align. */
  padding: 2rem var(--kb-doc-home-inset, var(--kb-doc-gutter-x));
  /* Rounded to sit inside the island's border rather than depending on an ancestor's overflow mode. */
  border-radius: calc(var(--kb-radius-xl) - var(--kb-island-border))
    calc(var(--kb-radius-xl) - var(--kb-island-border)) 0 0;
  background: var(--kb-brand-tint); background-size: cover; background-position: center;
}
/* Bare cover image, no scrim — same as the help-centre hero above. */
.kb-doc-hero.kb-doc-hero-cover { background-image: var(--kb-cover); }
/* Alignment text-aligns the band's title/description; `.kb-align-center` is set on the doc shell. */
.kb-align-center .kb-doc-hero { text-align: center; }
.kb-doc-hero h1 { font-size: 1.875rem; font-weight: 700; margin: 0; line-height: 1.15; }
.kb-doc-hero p { font-size: 1rem; margin: 0; color: var(--kb-muted); }
@media (min-width: 768px) { .kb-doc-hero h1 { font-size: 2.25rem; } }

/* Section headers (Featured/Collections/Articles) are muted on home + collection alike. */
.kb-section-title { font-size: 0.875rem; font-weight: 600; color: var(--kb-muted); line-height: 1; margin: 2.25rem 0 0.75rem; }
@media (min-width: 640px) { .kb-section-title { font-size: 1rem; } }
.kb-content > .kb-section-title:first-child { margin-top: 0; }
.kb-hero + .kb-section-title, .kb-hc-hero + .kb-section-title { margin-top: 0; }

.kb-cards { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .kb-cards { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .kb-cards { grid-template-columns: repeat(3, 1fr); } }
/* Collection card: icon on its own line, then title, then a 3-line clamped description. */
.kb-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  border: 1px solid var(--kb-border); border-radius: var(--kb-radius-lg);
  padding: 1.25rem 1.5rem; background: var(--kb-card); color: var(--kb-fg);
  transition: border-color 300ms ease-in-out;
}
.kb-card:hover { border-color: var(--kb-brand); text-decoration: none; }
.kb-card-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; width: 100%; }
.kb-card .kb-card-title { font-weight: 500; font-size: 0.875rem; line-height: 1.3; }
.kb-card .kb-card-desc {
  color: var(--kb-muted); font-size: 0.75rem; line-height: 1.4; font-weight: 400;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
@media (min-width: 640px) {
  .kb-card .kb-card-title { font-size: 1rem; }
  .kb-card .kb-card-desc { font-size: 0.875rem; }
}
.kb-card .kb-icon { font-size: 32px; line-height: 1; color: var(--kb-brand); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.kb-card .kb-icon-fallback svg, .kb-card .kb-icon-img, .kb-card .kb-icon-mask { width: 24px; height: 24px; }

/* Article-card row: icon on the left, then a title (clamp-1) + description (clamp-2 → clamp-1 sm+). */
.kb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.kb-list li { margin: 0; }
.kb-list a {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; color: var(--kb-fg);
  border: 1px solid var(--kb-border); border-radius: var(--kb-radius-lg); transition: border-color 300ms ease-in-out;
}
.kb-list a:hover { border-color: color-mix(in srgb, var(--kb-border) 80%, transparent); text-decoration: none; }
.kb-list a .kb-icon { font-size: 24px; line-height: 1; color: var(--kb-brand); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; }
.kb-list a .kb-icon-fallback svg, .kb-list a .kb-icon-img, .kb-list a .kb-icon-mask { width: 24px; height: 24px; }
.kb-list-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.kb-list-title {
  font-weight: 500; font-size: 0.875rem; line-height: 1.3; color: var(--kb-fg);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
}
.kb-list-desc {
  color: var(--kb-muted); font-size: 0.75rem; line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
@media (min-width: 640px) {
  .kb-list { gap: 0.75rem; }
  .kb-list a { gap: 1rem; padding: 1.25rem 1.5rem; }
  .kb-list-title { font-size: 1rem; }
  .kb-list-desc { font-size: 0.875rem; -webkit-line-clamp: 1; }
}

/* Classic Help Center HOME. Preview off: stacked collection cards + featured/other grids. Preview on:
   a CSS-column masonry of cards each listing their child article links. */
.kb-hc-classic { display: flex; flex-direction: column; gap: 2.25rem; }
.kb-hc-section { display: flex; flex-direction: column; gap: 0.75rem; }
.kb-hc-section-title { font-size: 1rem; font-weight: 600; color: var(--kb-fg); line-height: 1.2; margin: 0; }
.kb-hc-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .kb-hc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kb-hc-grid { grid-template-columns: repeat(3, 1fr); } }
.kb-hc-stack { display: flex; flex-direction: column; gap: 0.75rem; }
.kb-hc-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  border: 1px solid var(--kb-border); border-radius: var(--kb-radius-lg);
  padding: 1.25rem 1.5rem; background: var(--kb-card); color: var(--kb-fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.kb-hc-card:hover { text-decoration: none; }
/* Card titles + masonry links take the brand color (--kb-branded-text is the CTA text color, not this). */
.kb-hc-card-title { font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--kb-brand); }
.kb-hc-card-desc { font-size: 0.875rem; font-weight: 400; line-height: 1.4; color: var(--kb-muted); margin: 0; }
.kb-hc-card-metas { display: flex; flex-direction: column; gap: 0.25rem; }
.kb-hc-card-meta { font-size: 0.875rem; color: var(--kb-muted); margin: 0; }
.kb-hc-masonry { columns: 1; column-gap: 1rem; }
@media (min-width: 768px) { .kb-hc-masonry { columns: 2; } }
.kb-hc-mcard {
  display: flex; flex-direction: column; gap: 1.5rem; break-inside: avoid; margin-bottom: 1rem;
  border: 1px solid var(--kb-border); border-radius: var(--kb-radius-lg);
  padding: 1.25rem 1.5rem; background: var(--kb-card); color: var(--kb-fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.kb-hc-mcard-head { display: flex; flex-direction: column; gap: 0.125rem; }
.kb-hc-mcard-title { font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--kb-fg); }
.kb-hc-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.kb-hc-links a { font-size: 0.875rem; font-weight: 400; line-height: 1.4; color: var(--kb-brand); }
.kb-hc-links a:hover { opacity: 0.85; text-decoration: none; }
.kb-hc-view-all { font-size: 0.875rem; font-weight: 600; color: var(--kb-brand); }
.kb-hc-view-all:hover { text-decoration: underline; }

.kb-breadcrumb { font-size: 0.875rem; color: var(--kb-muted); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.kb-breadcrumb a { color: var(--kb-muted); display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; }
.kb-breadcrumb a:hover { color: var(--kb-fg); text-decoration: none; }
/* Each crumb truncates with an ellipsis (root/ancestors ~10rem, current page ~15rem). */
.kb-breadcrumb a span, .kb-breadcrumb-current { display: block; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-breadcrumb-current { color: var(--kb-fg); max-width: 15rem; }
.kb-breadcrumb-sep { display: inline-flex; align-items: center; color: var(--kb-muted); }
.kb-breadcrumb-chevron { width: 14px; height: 14px; }

/* Eyebrow (parent-collection label above the title) takes the brand accent (--kb-branded-text is the
   on-brand CTA text color, not this). */
.kb-article-eyebrow { font-size: 1rem; font-weight: 600; line-height: 1; color: var(--kb-brand); margin: 0 0 0.75rem; }
/* Large page-header icon (top of every collection + article page): an emoji span, an iconify/image img,
   or the fallback icon renderer. */
.kb-page-icon { margin-bottom: 1rem; }
.kb-page-icon .kb-page-icon-glyph { font-size: 44px; line-height: 1; color: var(--kb-fg); display: inline-flex; align-items: center; justify-content: center; }
.kb-page-icon .kb-page-icon-glyph svg, .kb-page-icon .kb-page-icon-glyph.kb-icon-img, .kb-page-icon .kb-page-icon-glyph.kb-icon-mask { width: 44px; height: 44px; }
.kb-align-center .kb-page-icon { display: flex; justify-content: center; }
.kb-article-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.75rem; line-height: 1.15; }
@media (min-width: 640px) { .kb-article-title { font-size: 1.875rem; } }
@media (min-width: 768px) { .kb-article-title { font-size: 2.25rem; } }
.kb-article-desc { color: var(--kb-muted); font-size: 1rem; margin: 0 0 1rem; }
.kb-updated {
  display: inline-flex; align-items: center; height: 1.5rem; padding: 0 0.75rem; margin-bottom: 1.75rem;
  font-size: 0.75rem; color: var(--kb-fg); background: var(--kb-accent); border-radius: var(--kb-radius-md);
}

.kb-prevnext {
  display: flex; align-items: center; gap: 0; min-height: 74px; margin-top: 1.5rem;
  border: 1px solid var(--kb-border); border-radius: var(--kb-radius-lg); background: var(--kb-bg); padding: 0.5rem;
}
@media (min-width: 640px) { .kb-prevnext { gap: 1rem; } }
@media (min-width: 768px) { .kb-prevnext { gap: 2rem; } }
@media (min-width: 1024px) { .kb-prevnext { gap: 3rem; } }
.kb-prevnext-prev {
  display: flex; align-items: center; align-self: stretch; gap: 0.375rem; flex: none; white-space: nowrap;
  padding: 0.5rem; color: var(--kb-fg); font-size: 0.875rem; font-weight: 500;
}
@media (min-width: 640px) { .kb-prevnext-prev { gap: 0.5rem; padding: 0.5rem 1rem; } }
.kb-prevnext-prev:hover { text-decoration: none; }
.kb-prevnext-disabled { opacity: 0.5; cursor: not-allowed; }
.kb-prevnext-next {
  display: flex; align-items: center; align-self: stretch; gap: 0.75rem; flex: 1 1 auto; min-width: 0;
  background: var(--kb-accent); border-radius: var(--kb-radius-md); padding: 0.75rem;
}
@media (min-width: 640px) { .kb-prevnext-next { gap: 1.25rem; padding: 0.75rem 1.5rem; } }
.kb-prevnext-title {
  flex: 1 1 auto; min-width: 0; font-size: 0.875rem; color: var(--kb-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-prevnext-sep { flex: none; width: 1px; align-self: stretch; background: var(--kb-border); }
.kb-prevnext-next > a {
  display: flex; align-items: center; gap: 0.375rem; flex: none; white-space: nowrap;
  padding: 0.5rem 0 0.5rem 0.5rem; color: var(--kb-fg); font-size: 0.875rem; font-weight: 500;
}
@media (min-width: 640px) { .kb-prevnext-next > a { gap: 0.5rem; padding-left: 1rem; } }
.kb-prevnext-next > a:hover { text-decoration: none; }
.kb-prevnext-chevron { flex: none; width: 16px; height: 16px; }

/* Sticky right rail shown only xl+ (>=1280px): an "On this page" header, a guide line, a brand-colored
   active indicator, and items that track the scroll position via the same-origin toc bootstrap script. */
.kb-toc-rail {
  width: 300px; min-width: 268px; flex: none; position: sticky; top: 0; align-self: start;
  height: calc(100svh - 74px); overflow: auto; padding: 36px 0 16px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.kb-toc-rail::-webkit-scrollbar { display: none; }
.kb-toc-header { display: flex; align-items: center; gap: 8px; padding: 8px; color: var(--kb-muted); }
.kb-toc-icon { flex: none; width: 16px; height: 16px; }
.kb-toc-title { font-size: 14px; font-weight: 500; color: var(--kb-muted); }
.kb-toc-nav { position: relative; padding-left: 24px; }
.kb-toc-guide { position: absolute; left: 16px; top: 6px; bottom: 0; width: 1px; background: var(--kb-accent); }
.kb-toc-indicator {
  position: absolute; left: 16px; top: 0; height: 0; width: 1px; background: var(--kb-brand);
  transition: all 200ms ease-out;
}
.kb-toc-nav ul { position: relative; list-style: none; margin: 0; padding: 0; }
.kb-toc-item {
  padding: 8px; font-size: 14px; font-weight: 400; color: var(--kb-muted);
  transition: color 150ms; cursor: pointer;
}
.kb-toc-item.kb-toc-strong { font-weight: 500; }
.kb-toc-item:hover { color: var(--kb-fg); }
.kb-toc-item.is-active { color: var(--kb-brand); }
.kb-toc-item a { color: inherit; display: block; }
.kb-toc-item a:hover { text-decoration: none; }
.kb-toc-indent-1 { padding-left: 24px; }
.kb-toc-indent-2 { padding-left: 48px; }

.kb-align-center .kb-content { text-align: center; }
.kb-align-center .kb-hero { align-items: center; }
.kb-align-center .kb-breadcrumb { justify-content: center; }
.kb-align-center .kb-cards, .kb-align-center .kb-list { text-align: left; }
.kb-align-center .kb-card { align-items: flex-start; }
.kb-align-center .kb-toc-rail { text-align: left; }

.kb-footer {
  margin-top: auto; border-top: 1px solid var(--kb-border);
  width: 100%; max-width: var(--kb-content-width); margin-left: auto; margin-right: auto;
  padding: 1.5rem 1rem; color: var(--kb-muted); font-size: 0.8125rem;
  display: flex; flex-direction: column; gap: 1rem;
}
/* The documentation footer sits directly after the prev/next card; a top margin keeps their borders
   from joining into a double line. */
.kb-footer-documentation { max-width: none; padding-left: 0; padding-right: 0; margin-top: 2rem; }
/* No social icons by default in documentation, so the bottom row is left-aligned there. */
.kb-footer-documentation .kb-footer-bottom { justify-content: flex-start; }
.kb-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.kb-footer-links a { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--kb-muted); font-size: 0.875rem; }
.kb-footer-links a:hover { color: var(--kb-fg); text-decoration: none; }
.kb-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kb-footer-social { display: flex; align-items: center; gap: 0.625rem; }
.kb-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--kb-radius-md); color: var(--kb-muted); }
.kb-footer-social a:hover { color: var(--kb-fg); text-decoration: none; }
.kb-footer a:hover { color: var(--kb-fg); }
.kb-social-icon { width: 1rem; height: 1rem; fill: currentColor; }
.kb-footer-name { color: var(--kb-muted); font-size: 0.75rem; }

/* InstantDocs' KBLanguageSelector: a globe + current-locale trigger opening a menu of links to the
   same page in each available locale. CSS-only (<details>), so it works under script-src 'self'. */
.kb-lang { position: relative; }
.kb-lang-summary {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
  padding: 0.375rem 0.5rem; border-radius: var(--kb-radius-md); color: var(--kb-fg); font-size: 0.875rem;
}
.kb-lang-summary::-webkit-details-marker { display: none; }
.kb-lang-summary:hover { background: var(--kb-accent); }
.kb-lang-globe { flex: none; width: 16px; height: 16px; color: var(--kb-muted); }
.kb-lang-current { line-height: 1; }
.kb-lang-chevron { flex: none; width: 16px; height: 16px; color: var(--kb-muted); transition: transform 150ms ease; }
.kb-lang[open] .kb-lang-chevron { transform: rotate(180deg); }
/* Opens downward by default (the help-centre trigger sits at the top of the page); footer-anchored
   triggers flip it upward below. */
.kb-lang-menu {
  position: absolute; z-index: 60; min-width: 8rem; right: 0; top: calc(100% + 0.35rem);
  display: flex; flex-direction: column; padding: 0.25rem;
  background: var(--kb-card); border: 1px solid var(--kb-border); border-radius: var(--kb-radius-md);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.kb-lang-item {
  display: flex; align-items: center; padding: 0.375rem 0.5rem; border-radius: var(--kb-radius-sm);
  color: var(--kb-fg); font-size: 0.875rem; white-space: nowrap;
}
.kb-lang-item:hover { background: var(--kb-accent); text-decoration: none; }
.kb-lang-item[aria-current="true"] { background: var(--kb-accent); }
/* In the documentation sidebar footer the menu opens upward toward the inset (start-aligned). */
.kb-doc-sidebar-foot .kb-lang-menu { left: 0; right: auto; top: auto; bottom: calc(100% + 0.35rem); }
/* In the help-centre header the trigger inherits the header-text color over the hero. */
.kb-header .kb-lang-summary { color: var(--kb-header-link, currentColor); }
.kb-hc-hero .kb-lang-summary, .kb-hc-hero .kb-lang-globe, .kb-hc-hero .kb-lang-chevron {
  color: var(--kb-header-link, #ffffff);
}

.kb-404 { max-width: 540px; margin: 6rem auto; text-align: center; padding: 0 1.5rem; }

/* One renderer emits four shapes: an emoji span, an iconify/image img, or a fallback lucide svg.
   Per-context sizing lives in each surface's block above; these are the cross-context base rules. */
.kb-icon { line-height: 1; }
.kb-icon-img { object-fit: contain; display: inline-block; vertical-align: middle; }
.kb-icon-fallback { display: inline-flex; align-items: center; justify-content: center; }
.kb-icon-fallback svg { display: block; }
/* Monochrome iconify glyph as a CSS mask so it paints in currentColor under the strict CSP (the mask
   URL is an img-src resource); intentionally not covered by the .kb-icon-img invert below. */
.kb-icon-mask {
  display: inline-block; flex: none;
  /* Base size so a call site with no per-surface class never collapses to 0x0. */
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--kb-icon-url) center / contain no-repeat;
  mask: var(--kb-icon-url) center / contain no-repeat;
}
/* DARK MODE: monochrome black icons vanish on the dark surface, so invert them; this also re-colours
   genuinely coloured/brand logos, an accepted trade since monochrome icons are the common case. */
.dark .kb-icon-img { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) .kb-icon-img { filter: invert(1) hue-rotate(180deg); }
}

.kb-search { position: relative; flex: 0 1 240px; display: flex; align-items: center; }
/* searchBoxTheme: pin the search field's theme independently of the page by re-scoping the tokens it
   consumes on the wrapper; 'system' (default) emits no class and inherits the page theme. */
.kb-search-light { --kb-bg: #ffffff; --kb-fg: hsl(0 0% 3.9%); --kb-muted: hsl(0 0% 45.2%); --kb-border: hsl(0 0% 89.8%); }
.kb-search-dark { --kb-bg: #09090b; --kb-fg: hsl(0 0% 98%); --kb-muted: hsl(0 0% 63%); --kb-border: rgba(255, 255, 255, 0.1); }
.kb-search-icon {
  position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: var(--kb-muted); pointer-events: none;
}
.kb-search-input {
  width: 100%; padding: 0.5rem 0.85rem 0.5rem 2.1rem; border: 1px solid var(--kb-border); border-radius: var(--kb-radius-md);
  background: var(--kb-bg); color: var(--kb-fg); font: inherit; font-size: 0.9rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.kb-search-input:focus { outline: none; border-color: var(--kb-brand); }
.kb-search-input::placeholder { color: var(--kb-muted); }
/* Help-centre hero search: a large, centered, white 48px field. */
.kb-hc-hero-inner .kb-search { flex: none; width: 100%; max-width: var(--kb-content-width); }
.kb-hc-hero-inner .kb-search-icon { left: 0.95rem; width: 1.25rem; height: 1.25rem; color: var(--kb-muted); }
.kb-hc-hero-inner .kb-search-input {
  height: 48px; padding: 0 1rem 0 2.85rem; font-size: 1rem; background: var(--kb-bg); color: var(--kb-fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border-color: var(--kb-border);
}
.kb-search-results {
  position: absolute; top: calc(100% + 0.35rem); left: 0; right: 0; z-index: 20;
  background: var(--kb-bg); border: 1px solid var(--kb-border); border-radius: var(--kb-radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); max-height: 60vh; overflow-y: auto; padding: 0.35rem;
  text-align: left;
}
.kb-search-opt { display: block; padding: 0.55rem 0.7rem; border-radius: var(--kb-radius-sm); color: var(--kb-fg); }
.kb-search-opt:hover { background: color-mix(in srgb, var(--kb-fg) 6%, transparent); text-decoration: none; }
.kb-search-opt-title { display: block; font-weight: 600; font-size: 0.92rem; }
.kb-search-opt-snippet { display: block; color: var(--kb-muted); font-size: 0.82rem; margin-top: 0.15rem; }
.kb-search-none { padding: 0.7rem; color: var(--kb-muted); font-size: 0.88rem; }

.kb-search-list { list-style: none; margin: 0; padding: 0; }
.kb-search-hit { border-bottom: 1px solid var(--kb-border); }
.kb-search-hit a { display: block; padding: 0.9rem 0; color: var(--kb-fg); }
.kb-search-hit-title { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.kb-search-snippet { color: var(--kb-muted); font-size: 0.9rem; margin-top: 0.25rem; }
.kb-search-empty { color: var(--kb-muted); }
mark { background: var(--kb-highlight); color: #000; padding: 0 0.1em; border-radius: 2px; }

/* ToC rail only shows xl+; below 1280px hide it and drop the article back to a single content column. */
@media (max-width: 1279px) {
  .kb-toc-rail { display: none; }
  .kb-layout-help_center.kb-has-toc { display: block; max-width: var(--kb-content-width); }
  .kb-doc-island-has-toc { display: block; }
}
/* Below md (768px) both layouts collapse navigation: help-centre header nav+CTA fold into a dropdown,
   and the documentation sidebar becomes an off-canvas drawer — both pure-CSS checkbox toggles. */
@media (max-width: 767.98px) {
  /* The two mobile icon buttons share identical 36px-square ghost-button chrome. */
  .kb-menu-btn, .kb-drawer-open {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px; border-radius: var(--kb-radius-md); cursor: pointer; color: var(--kb-fg);
  }
  .kb-menu-btn:hover, .kb-drawer-open:hover { background: var(--kb-accent); }
  .kb-menu-btn:has(.kb-menu-toggle:focus-visible),
  .kb-drawer-toggle:focus-visible ~ .kb-doc-inset .kb-drawer-open { outline: 2px solid var(--kb-brand); outline-offset: 2px; }

  /* Over the help-centre hero the header text is the header-link color; tint the button to match. */
  .kb-hc-hero .kb-menu-btn { color: var(--kb-header-link, #ffffff); }
  /* The collapsed menu — an absolute dropdown anchored under the hamburger, on a solid popover surface. */
  .kb-header-menu {
    display: none; position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0.25rem;
    min-width: 12rem; max-width: calc(100vw - 2rem); padding: 0.5rem;
    background: var(--kb-bg); border: 1px solid var(--kb-border); border-radius: var(--kb-radius-md);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  }
  .kb-menu-btn:has(.kb-menu-toggle:checked) ~ .kb-header-menu { display: flex; }
  .kb-header-menu .kb-nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .kb-header-menu .kb-nav a { width: 100%; min-height: 40px; padding: 0 0.5rem; color: var(--kb-fg); border-radius: var(--kb-radius-sm); }
  .kb-header-menu .kb-nav a:hover { background: var(--kb-accent); opacity: 1; }
  .kb-header-menu .kb-cta {
    width: 100%; justify-content: center; margin-top: 0.25rem;
    background: var(--kb-brand); color: var(--kb-branded-text, #ffffff);
  }

  /* The help-centre SEARCH page carries the search box in the header; wrap it full-width below the row. */
  .kb-header { flex-wrap: wrap; }
  .kb-header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .kb-header .kb-search { flex: 1 1 100%; order: 3; }

  /* Drop the fixed full-viewport shell and revert to normal page scroll. */
  body.kb-body-doc { height: auto; min-height: 0; overflow: visible; }
  .kb-doc { display: block; height: auto; min-height: 0; overflow: visible; }
  .kb-doc-inset { height: auto; min-height: 0; }
  /* Drop the island's own side padding so the content column's gutter is the single source, and
     tighten the island margin toward the edge. */
  .kb-doc-island { margin: 0.5rem; padding-left: 0; padding-right: 0; max-height: none; overflow-y: visible; }
  /* Off-canvas rail (18rem): fixed + slid out; the checkbox slides it in. */
  .kb-doc-sidebar {
    position: fixed; top: 0; left: 0; z-index: 70; height: 100vh; height: 100svh; max-height: none;
    width: min(18rem, 85vw); transform: translateX(-100%); transition: transform 0.25s ease;
    border-right: 1px solid var(--kb-border); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  }
  #kb-doc-nav-toggle:checked ~ .kb-doc-sidebar { transform: translateX(0); }
  .kb-doc-tree { overflow-y: auto; }
  /* Dimmed scrim behind the open drawer; tapping it (a <label> for the toggle) closes the drawer. */
  .kb-drawer-scrim {
    display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, 0.45);
    opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  #kb-doc-nav-toggle:checked ~ .kb-drawer-scrim { opacity: 1; visibility: visible; }
  /* The drawer trigger + brand live in the top-nav (the sidebar carries the logo on desktop). */
  .kb-doc-topnav-brand { display: flex; align-items: center; min-width: 0; max-width: 60%; overflow: hidden; }
  .kb-doc-topnav-brand .kb-logo { font-size: 1rem; min-width: 0; overflow: hidden; }
  .kb-doc-topnav-brand .kb-logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/*
 * Shared published-KB `.kb-prose` article-body styling, consumed by both the server-rendered
 * help-center reader and the ticket-sidebar knowledge panel. Token-driven via `--kb-*` custom
 * properties so the two surfaces can never drift.
 */

/* INVARIANT: soft line breaks are a literal `\n` in the text (never `<br>`), matching the editor's
   pre-wrap; the renderer must stay minified or that whitespace renders as a line break. */
.kb-prose { font-size: 1rem; color: color-mix(in srgb, var(--kb-fg) 80%, transparent); white-space: pre-wrap; }
.kb-prose h1, .kb-prose h2, .kb-prose h3 { font-family: var(--kb-font-heading); color: var(--kb-fg); font-weight: 600; letter-spacing: 0; margin: 22px 0 6px; position: relative; scroll-margin-top: 1.5rem; }
.kb-prose h1 { font-size: 1.875rem; line-height: 2rem; }
.kb-prose h2 { font-size: 1.5rem; line-height: 1.75rem; }
.kb-prose h3 { font-size: 1.25rem; line-height: 1.5rem; }
.kb-prose p { font-size: 1rem; line-height: 1.5rem; margin: 6px 0; padding: 6px 0; }
.kb-prose ul, .kb-prose ol { margin: 8px 0; }
.kb-prose ul { padding-left: 16px; }
.kb-prose ol { padding-left: 18px; }
.kb-prose li { margin: 0.25rem 0; }
.kb-prose li::marker { font-weight: 300; }
.kb-prose a {
  color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2.5px;
  text-decoration-thickness: 1.5px; text-decoration-color: var(--kb-muted); opacity: 0.9;
  text-decoration-skip-ink: none; transition: text-decoration-thickness 150ms ease;
}
.kb-prose a:hover { text-decoration-thickness: 2.5px; opacity: 1; }
.kb-prose img { max-width: 100%; height: auto; margin: 22px 0; border-radius: var(--kb-radius-md); }
.kb-prose pre {
  background: var(--kb-card); border: 1px solid var(--kb-border); border-radius: var(--kb-radius-md);
  padding: 1rem; overflow-x: auto; margin: 22px 0;
}
.kb-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
.kb-prose :not(pre) > code {
  background: color-mix(in srgb, var(--kb-fg) 6%, transparent); padding: 0.1em 0.35em; border-radius: var(--kb-radius-sm);
}
.kb-prose blockquote { margin: 22px 0; padding-left: 1rem; border-left: 3px solid var(--kb-border); color: var(--kb-muted); font-style: normal; }
/* `table-layout: fixed` with per-column widths from a <colgroup> the renderer emits, sized to match
   the editor's `w-fit`; `max-width` keeps a very wide table on-page. */
.kb-prose table { border-collapse: collapse; table-layout: fixed; max-width: 100%; margin: 22px 0; font-size: 0.875rem; }
.kb-prose th, .kb-prose td { border: 1px solid var(--kb-border); padding: 8px 12px; text-align: left; vertical-align: top; overflow-wrap: break-word; }
.kb-prose th { font-weight: 600; }
.kb-prose td p, .kb-prose th p { margin: 0; padding: 0; }
.kb-prose td > :first-child, .kb-prose th > :first-child { margin-top: 0; }
.kb-prose td > :last-child, .kb-prose th > :last-child { margin-bottom: 0; }

/* Code syntax highlighting: lowlight `hljs-*` tokens, GitHub-light palette to match the editor. */
.kb-prose pre code, .kb-prose pre :not(pre) > code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
.kb-prose pre .hljs-comment, .kb-prose pre .hljs-code, .kb-prose pre .hljs-formula { color: #6a737d; }
.kb-prose pre .hljs-keyword, .kb-prose pre .hljs-doctag, .kb-prose pre .hljs-template-tag,
.kb-prose pre .hljs-template-variable, .kb-prose pre .hljs-type { color: #d73a49; }
.kb-prose pre .hljs-name, .kb-prose pre .hljs-quote, .kb-prose pre .hljs-selector-tag,
.kb-prose pre .hljs-selector-pseudo { color: #22863a; }
.kb-prose pre .hljs-attr, .kb-prose pre .hljs-attribute, .kb-prose pre .hljs-literal, .kb-prose pre .hljs-meta,
.kb-prose pre .hljs-number, .kb-prose pre .hljs-operator, .kb-prose pre .hljs-selector-attr,
.kb-prose pre .hljs-selector-class, .kb-prose pre .hljs-selector-id, .kb-prose pre .hljs-variable { color: #005cc5; }
.kb-prose pre .hljs-built_in, .kb-prose pre .hljs-symbol { color: #e36209; }
.kb-prose pre .hljs-regexp, .kb-prose pre .hljs-string { color: #032f62; }
.kb-prose pre .hljs-title { color: #6f42c1; }
.kb-prose pre .hljs-section { color: #005cc5; font-weight: 600; }
.kb-prose pre .hljs-bullet { color: #735c0f; }
.kb-prose pre .hljs-emphasis { font-style: italic; }
.kb-prose pre .hljs-strong { font-weight: 600; }
.kb-prose pre .hljs-addition { color: #187733; background: #f0fff4; }
.kb-prose pre .hljs-deletion { color: #b31d28; background: #ffeef0; }

.kb-prose h4, .kb-prose h5, .kb-prose h6 { color: var(--kb-fg); font-weight: 600; margin: 18px 0 6px; }
.kb-prose h4 { font-size: 1.125rem; line-height: 1.5rem; position: relative; scroll-margin-top: 1.5rem; }
.kb-prose h5 { font-size: 1rem; line-height: 1.4rem; }
.kb-prose h6 { font-size: 0.875rem; line-height: 1.3rem; color: var(--kb-muted); }
.kb-prose hr { border: 0; border-top: 1px solid var(--kb-border); margin: 24px 0; }
.kb-prose kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; white-space: nowrap;
  padding: 0.1em 0.4em; border: 1px solid var(--kb-border); border-radius: var(--kb-radius-sm);
  background: var(--kb-accent); box-shadow: 0 1px 0 var(--kb-border);
}

/* Callout — muted rounded box; colour variants add a themed fill via `kb-callout-{variant}`. */
.kb-prose .kb-callout { display: flex; gap: 0.625rem; align-items: flex-start; margin: 22px 0; padding: 0.75rem 1rem; border-radius: var(--kb-radius-md); background: var(--kb-accent); line-height: 1.5; }
.kb-prose .kb-callout-icon { flex: 0 0 auto; line-height: 1.5rem; }
.kb-prose .kb-callout-icon.kb-icon-mask { width: 1.25rem; height: 1.25rem; }
.kb-prose .kb-callout-content { flex: 1 1 auto; min-width: 0; }
.kb-prose .kb-callout-content > :first-child { margin-top: 0; padding-top: 0; }
.kb-prose .kb-callout-content > :last-child { margin-bottom: 0; padding-bottom: 0; }
.kb-prose .kb-callout-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.kb-prose .kb-callout-warning { background: #fefce8; border: 1px solid #fef08a; color: #854d0e; }
.kb-prose .kb-callout-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.kb-prose .kb-callout-alert { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.kb-prose .kb-callout-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.dark .kb-prose .kb-callout-success { background: #052e16; border-color: #15803d; color: #dcfce7; }
.dark .kb-prose .kb-callout-warning { background: #422006; border-color: #a16207; color: #fef9c3; }
.dark .kb-prose .kb-callout-info { background: #172554; border-color: #1d4ed8; color: #dbeafe; }
.dark .kb-prose .kb-callout-alert { background: #451a03; border-color: #b45309; color: #fef3c7; }
.dark .kb-prose .kb-callout-error { background: #450a0a; border-color: #b91c1c; color: #fee2e2; }
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) .kb-prose .kb-callout-success { background: #052e16; border-color: #15803d; color: #dcfce7; }
  :root:not(.light):not(.dark) .kb-prose .kb-callout-warning { background: #422006; border-color: #a16207; color: #fef9c3; }
  :root:not(.light):not(.dark) .kb-prose .kb-callout-info { background: #172554; border-color: #1d4ed8; color: #dbeafe; }
  :root:not(.light):not(.dark) .kb-prose .kb-callout-alert { background: #451a03; border-color: #b45309; color: #fef3c7; }
  :root:not(.light):not(.dark) .kb-prose .kb-callout-error { background: #450a0a; border-color: #b91c1c; color: #fee2e2; }
}
.kb-prose .kb-button { display: inline-block; padding: 8px 16px; border-radius: 6px; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; text-decoration: none; transition: opacity 0.15s ease; }
.kb-prose .kb-button:hover { opacity: 0.9; text-decoration: none; }
.kb-prose .kb-inline-image { display: inline; vertical-align: middle; height: auto; margin: 0 2px; }
/* Steps — a numbered stepper mirroring the editor: badge in a left gutter with a connector line
   trailing to the next step, like Mintlify's Steps component. */
.kb-prose ol.kb-steps { list-style: none; margin: 22px 0; padding: 0; }
.kb-prose ol.kb-steps > li { position: relative; min-height: 1.5rem; margin: 0; padding-bottom: 1.25rem; padding-left: 2.25rem; }
/* `counter(list-item)`, not a custom counter, so a mid-sequence `start` on the <ol> is honoured. */
.kb-prose ol.kb-steps > li::before {
  content: counter(list-item);
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 9999px; line-height: 1;
  background: var(--kb-accent); color: var(--kb-fg); font-size: 0.75rem; font-weight: 600;
}
.kb-prose ol.kb-steps > li::after {
  content: '';
  position: absolute; top: 1.75rem; bottom: 0.25rem; left: 0.75rem; width: 1px;
  background: var(--kb-border);
}
.kb-prose ol.kb-steps > li > :first-child { margin-top: 0; }
.kb-prose ol.kb-steps > li > :last-child { margin-bottom: 0; }
.kb-prose ol.kb-steps ol.kb-steps { margin: 0.375rem 0 0; }
/* Accordion — a bordered card of native <details> items (zero-JS collapse); a CSS chevron rotates
   when the item is open. */
.kb-prose .kb-accordion { margin: 22px 0; overflow: hidden; border: 1px solid var(--kb-border); border-radius: var(--kb-radius); }
.kb-prose .kb-accordion-item { border-bottom: 1px solid var(--kb-border); }
.kb-prose .kb-accordion-item:last-child { border-bottom: none; }
.kb-prose .kb-accordion-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.75rem; font-weight: 500; cursor: pointer; list-style: none; }
.kb-prose .kb-accordion-summary::-webkit-details-marker { display: none; }
.kb-prose .kb-accordion-summary:hover { background: var(--kb-accent); }
.kb-prose .kb-accordion-summary::after {
  content: ''; flex: 0 0 auto; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--kb-muted); border-bottom: 2px solid var(--kb-muted);
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
.kb-prose .kb-accordion-item[open] > .kb-accordion-summary::after { transform: rotate(45deg); }
.kb-prose .kb-accordion-body { padding: 0 0.75rem 0.75rem; }
.kb-prose .kb-accordion-body > :first-child { margin-top: 0; }
.kb-prose .kb-accordion-body > :last-child { margin-bottom: 0; }
/* Checklist — static check items; a CSS box + tick reflects the authored `checked` state. */
.kb-prose ul.kb-checklist { list-style: none; margin: 22px 0; padding: 0; }
.kb-prose ul.kb-checklist > li.kb-check { position: relative; min-height: 1.25rem; margin: 0.25rem 0; padding-left: 1.75rem; }
.kb-prose ul.kb-checklist > li.kb-check::before {
  content: ''; position: absolute; left: 0; top: 0.15rem;
  width: 1rem; height: 1rem; border: 1.5px solid var(--kb-border); border-radius: 4px; background: var(--kb-bg);
}
.kb-prose ul.kb-checklist > li.kb-checked::before { background: var(--kb-brand); border-color: var(--kb-brand); }
.kb-prose ul.kb-checklist > li.kb-checked::after {
  content: ''; position: absolute; left: 0.34rem; top: 0.3rem;
  width: 0.28rem; height: 0.55rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.kb-prose ul.kb-checklist > li.kb-checked { color: var(--kb-muted); text-decoration: line-through; }
.kb-prose ul.kb-checklist ul.kb-checklist { margin: 0.25rem 0 0; }
/* Card group — one responsive grid, two looks by variant, in its own `kb-cg-*` namespace (not
   `.kb-card`, the collection-index card) so styles can't leak between them. */
.kb-prose .kb-card-group { display: grid; gap: 0.5rem; margin: 22px 0; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .kb-prose .kb-card-group.kb-cards-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .kb-prose .kb-card-group.kb-cards-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .kb-prose .kb-card-group.kb-cards-cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.kb-prose .kb-cg-card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--kb-border); border-radius: 0.75rem; color: inherit; text-decoration: none;
  transition: border-color 0.15s ease;
}
.kb-prose a.kb-cg-card { cursor: pointer; }
.kb-prose .kb-cg-card:hover { border-color: var(--kb-brand); }
.kb-prose .kb-cg-text { display: flex; min-width: 0; flex-direction: column; gap: 0.25rem; }
.kb-prose .kb-cg-title { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.375; }
.kb-prose .kb-cg-body { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--kb-muted); }
/* Connected cards clamp (title 2 lines / description 6) since a linked node's content can be
   arbitrarily long; custom authored cards are not clamped. */
.kb-prose .kb-cg-connected .kb-cg-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.kb-prose .kb-cg-connected .kb-cg-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
/* Default card-icon colour lives on the cover wrapper (inherited via currentColor) so a custom
   per-card hex can override it there; `.kb-cg-icon` sets no colour of its own. */
.kb-prose .kb-cg-cover { color: var(--kb-brand); }
.kb-prose .kb-cg-icon { display: flex; align-items: center; justify-content: flex-start; font-size: 1.5rem; line-height: 1; }
.kb-prose .kb-cg-icon.kb-icon-mask { width: 1.5rem; height: 1.5rem; }
/* Connected card whose target is unavailable — an inert, muted tombstone with no link/hover. */
.kb-prose .kb-cg-card-unavailable { min-height: 3.5rem; padding: 1rem; cursor: default; opacity: 0.6; background: var(--kb-accent); }
.kb-prose .kb-cg-card-unavailable:hover { border-color: var(--kb-border); }
.kb-prose .kb-cards-icon .kb-cg-card { gap: 0.75rem; padding: 1rem; }
.kb-prose .kb-cards-icon .kb-cg-horizontal { flex-direction: row; }
.kb-prose .kb-cards-icon .kb-cg-cover { flex: 0 0 auto; }
.kb-prose .kb-cards-image .kb-cg-card { gap: 0; overflow: hidden; }
.kb-prose .kb-cards-image .kb-cg-cover { position: relative; width: 100%; height: var(--kb-cg-cover-h, 6rem); overflow: hidden; }
/* Reset the generic `.kb-prose img` margin/radius, else the prose margin shifts this absolutely
   positioned cover down from the card's top edge. */
.kb-prose .kb-cards-image .kb-cg-cover img { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.kb-prose .kb-cards-image .kb-cg-cover + .kb-cg-text { border-top: 1px solid var(--kb-border); }
.kb-prose .kb-cards-image .kb-cg-text { padding: 1rem; }
/* A connected card in an `image` group has no cover image, so it shows the node icon and lays out
   like a horizontal icon card instead of the full-bleed top cover. */
.kb-prose .kb-cards-image .kb-cg-horizontal { flex-direction: row; gap: 0.75rem; padding: 1rem; }
.kb-prose .kb-cards-image .kb-cg-horizontal .kb-cg-cover { position: static; width: auto; height: auto; flex: 0 0 auto; }
.kb-prose .kb-cards-image .kb-cg-horizontal .kb-cg-cover + .kb-cg-text { padding: 0; border-top: none; }

.kb-prose .kb-cards-none .kb-cg-card { gap: 0.75rem; padding: 1rem; }
.kb-prose .kb-cards-none .kb-cg-cover { display: none; }

.kb-prose .kb-cg-no-desc .kb-cg-body { display: none; }
/* Columns: flex tracks sized by each column's inline `width` (flex-basis auto + no grow); `flex: 1 1 0`
   would force a definite 0 basis and render every column equal, ignoring the width. */
.kb-prose .kb-columns { display: flex; gap: 1rem; margin: 22px 0; align-items: flex-start; }
.kb-prose .kb-column { flex: 0 1 auto; min-width: 0; }
@media (max-width: 640px) { .kb-prose .kb-columns { flex-direction: column; } }
.kb-prose details.kb-toggle { margin: 8px 0; }
.kb-prose details.kb-toggle > summary {
  position: relative; padding-left: 1.5rem; cursor: pointer; list-style: none; font-weight: 500;
}
.kb-prose details.kb-toggle > summary::-webkit-details-marker { display: none; }
.kb-prose details.kb-toggle > summary::before {
  content: "▸"; position: absolute; left: 0.35rem; color: var(--kb-muted); transition: transform 0.15s ease;
}
.kb-prose details.kb-toggle[open] > summary::before { transform: rotate(90deg); }
.kb-prose details.kb-toggle > *:not(summary) { margin-top: 4px; }
/* Media figures: centered by default; `kb-align-left`/`-right` override the horizontal side. */
.kb-prose figure.kb-image, .kb-prose figure.kb-video, .kb-prose figure.kb-audio, .kb-prose .kb-embed { margin: 22px auto; max-width: 100%; }
.kb-prose figure.kb-align-left, .kb-prose .kb-embed.kb-align-left { margin-left: 0; margin-right: auto; }
.kb-prose figure.kb-align-center, .kb-prose .kb-embed.kb-align-center { margin-left: auto; margin-right: auto; }
.kb-prose figure.kb-align-right, .kb-prose .kb-embed.kb-align-right { margin-left: auto; margin-right: 0; }
.kb-prose figure.kb-image img { margin: 0; display: block; width: 100%; height: auto; }
/* One rule shared by the plain `<video controls>` and its post-upgrade `<media-controller>` wrapper
   keeps the frame pixel-identical across the swap. `display: block` avoids the inline-replaced
   baseline gap under the frame; `aspect-ratio` reserves the frame before bytes arrive. */
.kb-prose figure.kb-video video,
.kb-prose figure.kb-video media-controller {
  display: block; width: 100%; max-width: 100%; height: auto;
  aspect-ratio: var(--kb-media-ratio, auto);
  border: 1px solid var(--kb-border); border-radius: var(--kb-radius-md);
}
/* `/_kb/video.js` upgrades the native `<video controls>` above into the same media-chrome control bar
   the editor renders; until it loads (or 404s) the browser's own controls show instead. */
.kb-prose figure.kb-video media-controller {
  overflow: hidden;
  /* `white-space: pre-wrap` is inherited into media-chrome's shadow-root templates and renders their
     indentation as real line breaks, inflating the control bar; reset it for this subtree only. */
  white-space: normal;
  /* Neutral, never the KB brand — media-chrome's own default targets a dark overlay bar and would be
     near-invisible here. */
  --media-primary-color: var(--kb-fg);
  --media-secondary-color: var(--kb-bg);
  --media-background-color: var(--kb-bg);
  --media-control-hover-background: var(--kb-accent);
  --media-font-family: var(--kb-font);
  --media-range-track-background: var(--kb-border);
}
.kb-prose figure.kb-video media-controller video { border: 0; border-radius: 0; }
.kb-prose figure.kb-audio audio { width: 100%; }
.kb-prose figcaption { margin-top: 0.5rem; color: var(--kb-muted); font-size: 0.875rem; text-align: center; }
.kb-prose .kb-file { margin: 12px 0; }
.kb-prose .kb-file a {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; opacity: 1;
  border: 1px solid var(--kb-border); border-radius: var(--kb-radius-md); color: var(--kb-fg); font-weight: 500; text-decoration: none;
}
.kb-prose .kb-file a:hover { border-color: var(--kb-brand); text-decoration: none; }
.kb-prose .kb-embed { position: relative; aspect-ratio: 16 / 9; }
.kb-prose .kb-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--kb-radius-md); }
/* Height comes from the editor's persisted measurement on the iframe's `height` attribute. */
.kb-prose .kb-html { margin: 22px 0; }
.kb-prose .kb-html iframe { display: block; width: 100%; border: 0; }
.kb-prose .kb-equation { margin: 22px 0; text-align: center; overflow-x: auto; }
.kb-prose .kb-footnote-ref a { color: var(--kb-brand); font-weight: 500; text-decoration: none; opacity: 1; }
.kb-prose .kb-footnote { display: flex; gap: 0.5rem; margin: 4px 0; font-size: 0.875rem; color: var(--kb-muted); }
.kb-prose .kb-footnote-backref { flex: none; color: var(--kb-brand); text-decoration: none; opacity: 1; }
/* Scoped under .kb-prose a to beat the generic prose-link rule's opacity, else the hidden copy-link
   would show through. */
.kb-prose a.kb-copy-link {
  position: absolute; left: -1.25rem; top: 0; width: 1.25rem;
  color: var(--kb-muted); font-weight: 400; opacity: 0; text-decoration: none;
  transition: opacity 0.12s ease;
}
.kb-prose h1:hover .kb-copy-link, .kb-prose h2:hover .kb-copy-link, .kb-prose h3:hover .kb-copy-link,
.kb-prose h4:hover .kb-copy-link, .kb-prose a.kb-copy-link:focus { opacity: 1; text-decoration: none; }
/* A step's left gutter holds its number badge. */
.kb-prose ol.kb-steps a.kb-copy-link { display: none; }
.kb-prose a.kb-copy-link:hover { color: var(--kb-brand); text-decoration: none; }
.kb-align-center .kb-prose { text-align: left; }