@beehexa/design-rules 0.0.0-stage → 2611.3.2

package/dist/docs/src/styles/docs.css

@@ -0,0 +1,323 @@
+/* Docs pages: sidebar, content, table of contents. Colour roles come from chrome.css, sizes
+   from the tokens. The page follows the app frame (Foundations › Layout): CSS starts from the
+   smallest window and adds to it at the md (768 px), lg (1024 px) and xl (1440 px) breakpoints. */
+
+/* Below lg: one column, the side navigation is a drawer. */
+.docs-grid { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - var(--header-bottom)); }
+/* A docs page is a Narrow page: the content column is at most 768 px, not counting the page
+   margins, and text runs the full column. The table of contents is not part of that width: from xl it
+   stands beside the column, and the two are centred together in the area beside the side
+   navigation. The left edge is rounded down to a whole pixel so images such as logos never
+   land on half pixels. */
+.docs-body {
+  --content-w: 768px;
+  --group-w: var(--content-w);
+  display: grid;
+  grid-template-columns: minmax(0, var(--content-w));
+  align-content: start;
+  padding-inline: max(var(--page-margin), round(down, (100% - var(--group-w)) / 2, 1px)) var(--page-margin);
+}
+
+/* Sidebar: sections, groups, pages, sub-pages. Items are 32 px high, 4 px apart and 8 px
+   from the sidebar edges, so the icons and labels start 20 px from the window edge, in line
+   with the logo (App frame). */
+.sidebar { position: sticky; top: var(--header-bottom); align-self: start; height: calc(100vh - var(--header-bottom)); padding: var(--bh-space-100) var(--bh-space-100) var(--bh-space-400); overflow-y: auto; border-right: 1px solid var(--c-line); background: var(--c-bg); }
+.sidebar ul { margin: 0; padding: 0; list-style: none; }
+.sidebar li + li { margin-top: var(--bh-space-050); }
+.sidebar-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--bh-space-100); padding-left: var(--bh-space-150); }
+.sidebar-title { color: var(--c-ink); text-decoration: none; font: var(--bh-font-heading-small); }
+.sidebar-close { display: inline-grid; place-items: center; width: var(--bh-size-control-default); height: var(--bh-size-control-default); padding: 0; border: 0; border-radius: var(--bh-radius-100); color: var(--c-muted); background: none; cursor: pointer; }
+.sidebar-label { margin: 0 0 var(--bh-space-050); padding-inline: var(--bh-space-150); color: var(--c-muted); font: var(--bh-font-label-small); }
+.sidebar-item, .sidebar-child { display: flex; align-items: center; gap: var(--bh-space-100); min-height: var(--bh-size-control-default); border-radius: var(--bh-radius-050); color: var(--c-ink); text-decoration: none; font: var(--bh-font-label-default); }
+.sidebar-item { padding: 0 var(--bh-space-150); }
+.sidebar-item > span:first-child, .sidebar-child > span:first-child { flex: 1; }
+.sidebar-item:hover, .sidebar-child:hover { background: var(--c-hover); }
+.sidebar-item[aria-current='page'] { background: var(--c-selected); box-shadow: inset 2px 0 0 var(--c-gold); }
+.sidebar-item[aria-current='page']:hover, .sidebar-child[aria-current='page']:hover { background: var(--c-selected-hover); }
+.sidebar-chevron { flex: none; color: var(--c-muted); transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); }
+.sidebar-item[aria-expanded='true'] .sidebar-chevron { transform: rotate(90deg); }
+
+.sidebar-item:focus-visible, .sidebar-child:focus-visible, .sidebar-section-toggle:focus-visible { outline: var(--bh-border-width-focused) solid var(--bh-color-border-focus); outline-offset: calc(var(--bh-border-width-focused) * -1); }
+
+/* One tree. Level 1: sections, bold. Level 2: the pages of the open section, on a guide line,
+   with the current page marked by a gold bar on that line. Group names (Design tokens,
+   Guidelines, Styles) are small labels, not links, so the tree stays two levels deep; a page
+   with sub-pages, such as Logos, opens a third level on its own line. The guide line is drawn
+   inside the branch, so the items sit on it without a negative margin. */
+.sidebar-section-toggle { display: flex; width: 100%; min-height: var(--bh-size-control-default); align-items: center; gap: var(--bh-space-100); padding: 0 var(--bh-space-100) 0 var(--bh-space-150); border: 0; border-radius: var(--bh-radius-050); color: var(--c-ink); background: none; cursor: pointer; text-align: left; font: var(--bh-font-heading-xsmall); }
+.sidebar-section-toggle:hover { background: var(--c-hover); }
+.sidebar-section-toggle .sidebar-chevron { margin-left: auto; }
+.sidebar-section-toggle[aria-expanded='true'] .sidebar-chevron { transform: rotate(90deg); }
+.sidebar-branch { margin: var(--bh-space-050) 0 var(--bh-space-200) var(--bh-space-250); box-shadow: inset 1px 0 0 var(--c-line); }
+/* Group names are not links: smaller, lighter, no hover, and a rule above each group after the
+   first, so they read as headings of the list below and never as one more page. */
+.sidebar-branch .sidebar-group + .sidebar-group { margin-top: var(--bh-space-150); padding-top: var(--bh-space-150); border-top: 1px solid var(--c-line); }
+.sidebar-branch .sidebar-label { margin: 0 0 var(--bh-space-050); padding: var(--bh-space-050) var(--bh-space-150) 0 var(--bh-space-200); color: var(--c-muted); cursor: default; user-select: none; font: var(--bh-font-label-small); }
+/* Text 16 px from the guide line, measured from the outer edge with the 2 px bar included. */
+.sidebar-branch .sidebar-item { padding: 0 var(--bh-space-150) 0 calc(var(--bh-space-200) - var(--bh-space-025)); border-left: var(--bh-border-width-selected) solid transparent; border-radius: 0 var(--bh-radius-050) var(--bh-radius-050) 0; }
+.sidebar-branch .sidebar-item[aria-current='page'] { border-left-color: var(--c-gold); box-shadow: none; }
+/* A closed folder that holds the current page keeps the gold bar, so the place is never lost. */
+.sidebar-branch .sidebar-item[data-has-current][aria-expanded='false'] { border-left-color: var(--c-gold); }
+.sidebar-branch[hidden], .sidebar-children[hidden] { display: none; }
+.sidebar-children { margin: var(--bh-space-050) 0 var(--bh-space-050) var(--bh-space-200) !important; box-shadow: inset 1px 0 0 var(--c-line); }
+.sidebar-child { padding: 0 var(--bh-space-150) 0 calc(var(--bh-space-150) - var(--bh-space-025)); border-left: var(--bh-border-width-selected) solid transparent; border-radius: 0 var(--bh-radius-050) var(--bh-radius-050) 0; }
+.sidebar-child[aria-current='page'] { border-left-color: var(--c-gold); background: var(--c-selected); }
+
+/* Scroll bars inside the sidebar and table of contents stay hidden until the pointer is over
+   them, then show as a thin line. The page's own scroll bar is left to the browser. */
+.sidebar, .toc, .toc-menu nav { scrollbar-width: thin; scrollbar-color: transparent transparent; }
+.sidebar:hover, .toc:hover, .toc-menu nav:hover { scrollbar-color: var(--c-line) transparent; }
+.sidebar::-webkit-scrollbar, .toc::-webkit-scrollbar { width: 6px; }
+.sidebar::-webkit-scrollbar-thumb, .toc::-webkit-scrollbar-thumb { border-radius: var(--bh-radius-050); background: transparent; }
+.sidebar:hover::-webkit-scrollbar-thumb, .toc:hover::-webkit-scrollbar-thumb { background: var(--c-line); }
+
+/* Table of contents. */
+.toc { position: sticky; top: var(--header-bottom); align-self: start; display: none; max-height: calc(100vh - var(--header-bottom)); padding: var(--page-margin) 0; overflow-y: auto; }
+.toc ul, .toc-menu ul { margin: 0; padding: 0; list-style: none; }
+.toc-title { margin: 0 0 var(--bh-space-100); color: var(--c-muted); font: var(--bh-font-heading-xsmall); }
+.toc a { display: block; padding: var(--bh-space-050) 0 var(--bh-space-050) calc(var(--bh-space-150) - var(--bh-space-025)); border-left: 2px solid var(--c-line); color: var(--c-muted); text-decoration: none; font: var(--bh-font-label-default); }
+.toc .toc-depth-3 a { padding-left: calc(var(--bh-space-300) - var(--bh-space-025)); }
+.toc a:hover { color: var(--c-ink); }
+.toc a[aria-current] { border-left-color: var(--c-gold); color: var(--c-ink); }
+
+/* Main column. The page header and the text run the full column. */
+.docs-main { min-width: 0; padding: var(--page-margin) 0 var(--bh-space-800); }
+.docs-main p { color: inherit; }
+.docs-header { padding-bottom: var(--bh-space-300); border-bottom: 1px solid var(--c-line); }
+.docs-header:has(.component-tabs) { padding-bottom: 0; }
+.breadcrumb ol { display: flex; flex-wrap: wrap; margin: 0 0 var(--bh-space-100); padding: 0; list-style: none; color: var(--c-muted); font: var(--bh-font-body-small); }
+.breadcrumb li + li::before { content: '/'; margin: 0 var(--bh-space-100); }
+.breadcrumb a { color: var(--c-muted); text-decoration: none; }
+.breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; }
+.breadcrumb [aria-current] { color: var(--c-ink); }
+.docs-header h1 { margin: 0 0 var(--bh-space-050); font: var(--bh-font-heading-xlarge); }
+.docs-lede { margin: 0 0 var(--bh-space-200); color: var(--c-muted) !important; font: var(--bh-font-body-large); }
+.docs-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bh-space-100) var(--bh-space-150); margin: 0; color: var(--c-muted) !important; font: var(--bh-font-body-small); }
+
+/* Release phase chip. */
+/* Release phase label, learned from GitHub Primer's Label: a pill with a 1 px border in the role
+   colour, text in the role's fg colour and no fill, 20 px tall. The words carry the meaning;
+   the colour only helps scanning. */
+.status-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 calc(var(--bh-space-100) - 1px); border: 1px solid var(--bh-color-border); border-radius: var(--bh-radius-full); color: var(--bh-color-text); background: transparent; text-decoration: none; white-space: nowrap; font: var(--bh-font-label-small); }
+.status-badge.is-large { height: var(--bh-size-control-small); padding: 0 calc(var(--bh-space-100) - 1px); }
+.status-early-access { border-color: var(--bh-color-border-brand); }
+.status-beta { border-color: var(--bh-color-border-info); color: var(--bh-color-text-info); }
+.status-ga { border-color: var(--bh-color-border-success); color: var(--bh-color-text-success); }
+.status-deprecated { border-color: var(--bh-color-border-warning); color: var(--bh-color-text-warning); }
+a.status-badge:hover { text-decoration: underline; }
+
+/* Component tabs: the only in-page tabs on the site. */
+.component-tabs { display: flex; gap: var(--bh-space-300); margin: var(--bh-space-300) 0 0; padding: 0; border-top: 0; color: inherit; overflow-x: auto; }
+.component-tabs a { display: flex; align-items: center; height: var(--bh-size-control-default); padding: 0; border-bottom: var(--bh-border-width-selected) solid transparent; color: var(--c-muted); text-decoration: none; white-space: nowrap; font: var(--bh-font-label-default); }
+.component-tabs a:hover { color: var(--c-ink); }
+.component-tabs a[aria-current='page'] { border-bottom-color: var(--c-ink); color: var(--c-ink); }
+
+/* Body text. */
+.prose { container: prose / inline-size; padding-top: var(--bh-space-300); font: var(--bh-font-body-large); }
+.prose > :first-child { margin-top: 0; }
+.prose p, .prose li { color: var(--c-ink); }
+.prose p { margin: 0 0 var(--bh-space-200); }
+.prose ul, .prose ol { margin: 0 0 var(--bh-space-200); padding-left: var(--bh-space-300); }
+.prose li + li { margin-top: var(--bh-space-050); }
+.prose h2 { margin: var(--bh-space-600) 0 var(--bh-space-250); font: var(--bh-font-heading-large); } /* 20 px between a section heading and its content */
+.prose h3 { margin: var(--bh-space-400) 0 var(--bh-space-150); font: var(--bh-font-heading-medium); }
+.prose h4 { margin: var(--bh-space-300) 0 var(--bh-space-100); font: var(--bh-font-heading-small); }
+.prose a { color: var(--c-link); text-underline-offset: 2px; }
+.prose :not(pre) > code { overflow-wrap: anywhere; padding: 0 var(--bh-space-050); border-radius: var(--bh-radius-050); background: var(--c-surf); font-family: var(--bh-font-family-mono); }
+.prose pre { margin: 0 0 var(--bh-space-200); padding: var(--bh-space-200); border-radius: var(--bh-radius-100); overflow-x: auto; font: var(--bh-font-code-default); }
+.prose pre.astro-code { background-color: var(--c-code-bg) !important; } /* Shiki writes its own background inline */
+.prose pre code { font: inherit; } /* the browser sets code to its own monospace */
+.prose kbd { padding: 0 var(--bh-space-050); border: 1px solid var(--c-line); border-radius: var(--bh-radius-050); background: var(--c-surf); font: var(--bh-font-label-small); }
+.prose table { width: 100%; margin: 0 0 var(--bh-space-200); border-collapse: collapse; font: var(--bh-font-body-default); }
+.prose th, .prose td { padding: var(--bh-space-100) var(--bh-space-150); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: baseline; } /* first lines share a baseline, even when code sits next to text */
+.prose th { color: var(--c-muted); font: var(--bh-font-label-small); }
+.prose td code { overflow-wrap: anywhere; } /* long token names wrap instead of widening the page */
+.prose blockquote, .callout { margin: 0 0 var(--bh-space-300); padding: calc(var(--bh-space-200) - 1px); border: 1px solid var(--c-note-line); border-radius: var(--bh-radius-100); background: var(--c-note-bg); }
+.prose blockquote p, .callout p { margin: 0; }
+.callout-title { margin-bottom: var(--bh-space-050) !important; font: var(--bh-font-heading-xsmall); }
+
+.table-wrap { overflow-x: auto; }
+.token-value { display: inline-flex; align-items: center; gap: var(--bh-space-100); }
+.token-value > code { align-self: baseline; } /* the value, not the swatch, sets the baseline of the row */
+.token-table td:nth-child(2) { min-width: 6.5rem; } /* short values such as 2.75rem stay on one line */
+.token-resolved { display: block; color: var(--c-muted); font: var(--bh-font-body-small); }
+.swatch { flex: none; width: 1rem; height: 1rem; border: 1px solid var(--c-line); border-radius: var(--bh-radius-050); }
+.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--bh-space-200); margin: var(--bh-space-300) 0; padding: 0 !important; list-style: none; font: var(--bh-font-body-small); }
+.swatch-grid li { display: grid; gap: var(--bh-space-050); margin: 0 !important; }
+.swatch-large { height: var(--bh-space-800); border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); }
+
+/* Cards. */
+.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-200); padding: 0 !important; list-style: none; }
+.card-grid > li { margin: 0 !important; }
+.card { display: block; height: 100%; padding: calc(var(--bh-space-300) - 1px); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); color: var(--c-ink) !important; text-decoration: none; transition: border-color 150ms ease, box-shadow 150ms ease; font: var(--bh-font-heading-small); }
+.card:hover { border-color: var(--c-muted); box-shadow: var(--c-shadow); }
+.card p { margin: var(--bh-space-050) 0 var(--bh-space-150); color: var(--c-muted) !important; font: var(--bh-font-body-default); }
+.child-pages h2 { margin-top: var(--bh-space-500); }
+
+/* Previous / next and page meta. */
+.pager { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin-top: var(--bh-space-600); }
+.pager-link { display: grid; gap: var(--bh-space-050); padding: calc(var(--bh-space-200) - 1px); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); color: var(--c-ink); text-decoration: none; }
+.pager-link:hover { border-color: var(--c-muted); }
+.pager-link span { color: var(--c-muted); font: var(--bh-font-body-small); }
+.pager-link b { font: var(--bh-font-heading-small); }
+.pager-next { text-align: right; }
+.page-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--bh-space-100) var(--bh-space-300); margin-top: var(--bh-space-300); padding-top: var(--bh-space-200); border-top: 1px solid var(--c-line); color: var(--c-muted); font: var(--bh-font-body-small); }
+.page-meta a { color: var(--c-muted); }
+.page-meta a:hover { color: var(--c-ink); }
+
+/* Pages listed before their content is written. */
+.in-development { display: flex; gap: var(--bh-space-200); padding: calc(var(--bh-space-300) - 1px); border: 1px dashed var(--c-muted); border-radius: var(--bh-radius-150); background: var(--c-surf); }
+.in-development-icon { flex: none; display: grid; place-items: center; width: var(--bh-space-500); height: var(--bh-space-500); border-radius: var(--bh-radius-100); color: var(--bh-color-text-on-brand); background: var(--bh-color-background-brand-subtle); box-shadow: inset 0 0 0 1px var(--bh-color-border-brand-subtle); }
+.in-development p { margin: 0 0 var(--bh-space-100); }
+.in-development p:last-child { margin-bottom: 0; }
+.in-development-title { font: var(--bh-font-heading-small); }
+.in-development-label { margin-top: var(--bh-space-150) !important; color: var(--c-muted) !important; font: var(--bh-font-heading-xsmall); }
+.in-development ul { margin: 0 0 var(--bh-space-150); }
+
+/* Component examples. The preview follows the page theme, so it shows the component in both. */
+.code-example { margin: var(--bh-space-300) 0; border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); overflow: hidden; }
+.code-example figcaption { padding: var(--bh-space-100) var(--bh-space-200); border-bottom: 1px solid var(--c-line); font: var(--bh-font-heading-xsmall); }
+.code-preview { display: flex; flex-wrap: wrap; gap: var(--bh-space-150); align-items: center; padding: var(--bh-space-400) var(--bh-space-300); background: var(--bh-color-surface-subtle); }
+.prose .code-example pre { margin: 0; border-radius: var(--bh-radius-0); }
+
+/* Demo styles for component examples, until the component library ships. */
+.bh-button { display: inline-flex; align-items: center; gap: var(--bh-space-050); height: var(--bh-size-control-default); padding: 0 calc(var(--bh-space-150) - var(--bh-border-width-default)); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-100); background: var(--bh-color-surface-page); color: var(--bh-color-text); cursor: pointer; transition: background var(--bh-motion-duration-fast) var(--bh-motion-easing-standard); font: var(--bh-font-label-default); }
+.bh-button:hover { background: var(--bh-color-background-neutral-subtle-hover); }
+.bh-button:focus-visible { outline: var(--bh-border-width-focused) solid var(--bh-color-border-focus); outline-offset: var(--bh-state-focus-offset); }
+.bh-button-primary { border-color: var(--bh-color-background-neutral-bold); background: var(--bh-color-background-neutral-bold); color: var(--bh-color-text-inverse); }
+.bh-button-primary:hover { border-color: var(--bh-color-background-neutral-bold-hover); background: var(--bh-color-background-neutral-bold-hover); }
+.bh-button-danger { border-color: var(--bh-color-background-danger-bold); background: var(--bh-color-background-danger-bold); color: var(--bh-color-text-on-bold); }
+.bh-button-danger:hover { border-color: var(--bh-color-background-danger-bold-hover); background: var(--bh-color-background-danger-bold-hover); }
+.bh-button:disabled, .bh-button:disabled:hover { border-color: var(--bh-color-border-disabled); color: var(--bh-color-text-disabled); background: var(--bh-color-background-disabled); cursor: not-allowed; }
+
+/* Label and state label, learned from GitHub Primer (@primer/react Label and StateLabel).
+   Label: outlined pill, 1 px border in the role's emphasis colour, text in its fg colour, no
+   fill; 20 px tall with 6 px padding (large: 24 px, 8 px). State label: solid emphasis fill,
+   white text and an icon. */
+.bh-label { display: inline-flex; align-items: center; height: 20px; padding: 0 calc(var(--bh-space-100) - 1px); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-full); color: var(--bh-color-text); background: transparent; white-space: nowrap; font: var(--bh-font-label-small); }
+.bh-label.is-large { height: var(--bh-size-control-small); padding: 0 calc(var(--bh-space-100) - 1px); }
+.bh-label.is-brand { border-color: var(--bh-color-border-brand); }
+.bh-label.is-info { border-color: var(--bh-color-border-info); color: var(--bh-color-text-info); }
+.bh-label.is-success { border-color: var(--bh-color-border-success); color: var(--bh-color-text-success); }
+.bh-label.is-warning { border-color: var(--bh-color-border-warning); color: var(--bh-color-text-warning); }
+.bh-label.is-danger { border-color: var(--bh-color-border-danger); color: var(--bh-color-text-danger); }
+.bh-label.is-neutral { border-color: var(--bh-color-border-bold); color: var(--bh-color-text-subtle); }
+.bh-state { display: inline-flex; align-items: center; gap: var(--bh-space-050); height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-full); color: var(--bh-color-text-on-bold); white-space: nowrap; font: var(--bh-font-heading-xsmall); }
+.bh-state svg { flex: none; }
+.bh-state.is-info { background: var(--bh-color-background-info-bold); }
+.bh-state.is-success { background: var(--bh-color-background-success-bold); }
+.bh-state.is-warning { background: var(--bh-color-background-warning-bold); }
+.bh-state.is-danger { background: var(--bh-color-background-danger-bold); }
+.bh-state.is-neutral { color: var(--bh-color-text-inverse); background: var(--bh-color-background-neutral-bold); }
+
+.news-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: 0; padding: 0 !important; list-style: none; }
+@container prose (min-width: 600px) { .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.news-list > li { margin: 0 !important; }
+.news-list time { color: var(--c-muted); font: var(--bh-font-body-small); }
+
+/* Below lg (1024 px) the side navigation is a drawer and a bar under the header opens it and
+   the folded table of contents. */
+.docs-mobilebar { position: sticky; z-index: 50; top: var(--header-bottom); box-sizing: content-box; display: flex; align-items: center; justify-content: space-between; gap: var(--bh-space-150); height: var(--header-h); padding: 0 var(--page-margin); border-bottom: 1px solid var(--c-line); background: var(--c-bg); font: var(--bh-font-label-default); }
+.drawer-open { display: flex; align-items: center; gap: var(--bh-space-050); min-width: 0; height: var(--bh-size-control-default); padding: 0; border: 0; color: var(--c-ink); background: none; font: inherit; cursor: pointer; }
+.drawer-open-label { overflow: hidden; color: var(--c-muted); text-overflow: ellipsis; white-space: nowrap; }
+.drawer-open-label b { color: var(--c-ink); }
+.toc-menu { position: relative; flex: none; }
+.toc-menu summary { display: flex; align-items: center; height: var(--bh-size-control-default); color: var(--c-muted); cursor: pointer; list-style: none; }
+.toc-menu summary::-webkit-details-marker { display: none; }
+.toc-menu summary::after { content: ' ▾'; }
+.toc-menu nav { position: absolute; top: calc(100% + var(--bh-space-050)); right: 0; width: min(300px, calc(100vw - 2 * var(--page-margin))); max-height: 60vh; padding: var(--bh-space-100); overflow-y: auto; border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); background: var(--c-bg); box-shadow: var(--c-shadow); }
+.toc-menu a { display: flex; align-items: center; min-height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-050); color: var(--c-ink); text-decoration: none; font: var(--bh-font-label-default); }
+.toc-menu .toc-depth-3 a { padding-left: var(--bh-space-300); color: var(--c-muted); }
+.toc-menu a:hover { background: var(--c-hover); }
+
+.sidebar { position: fixed; z-index: 120; top: 0; bottom: 0; left: 0; width: min(var(--sidebar-w), 86vw); height: auto; border-right: 1px solid var(--c-line); box-shadow: var(--c-shadow); transform: translateX(-105%); transition: transform 200ms ease; visibility: hidden; }
+body[data-drawer] .sidebar { transform: none; visibility: visible; }
+.drawer-backdrop { display: none; }
+.drawer-backdrop:not([hidden]) { position: fixed; z-index: 110; inset: 0; display: block; background: var(--bh-color-surface-scrim); }
+
+/* Tables marked stackable are one card per row in a narrow column, and a table once the column is 720 px wide. */
+.prose table.stackable, .prose table.stackable tbody, .prose table.stackable tr, .prose table.stackable td { display: block; width: 100%; }
+.prose table.stackable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.prose table.stackable tr { margin-bottom: var(--bh-space-150); padding: var(--bh-space-050) 0; border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); }
+/* The cell stays one block, so text, code and links inside it flow as one line of text; the label sits in the left column. */
+.prose table.stackable td { position: relative; display: block; min-height: var(--bh-space-500); padding: var(--bh-space-100) var(--bh-space-150) var(--bh-space-100) calc(7rem + 2 * var(--bh-space-150)); border: 0; }
+.prose table.stackable td::before { content: attr(data-label); position: absolute; top: var(--bh-space-100); left: var(--bh-space-150); width: 7rem; color: var(--c-muted); font: var(--bh-font-label-small); }
+@container prose (min-width: 720px) {
+  .prose table.stackable { display: table; }
+  .prose table.stackable thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
+  .prose table.stackable tbody { display: table-row-group; width: auto; }
+  .prose table.stackable tr { display: table-row; width: auto; margin: 0; padding: 0; border: 0; border-radius: var(--bh-radius-0); }
+  .prose table.stackable td { display: table-cell; width: auto; min-height: 0; padding: var(--bh-space-100) var(--bh-space-150); border-bottom: 1px solid var(--c-line); }
+  .prose table.stackable td::before { content: none; }
+}
+
+/* md (768 px): previous and next side by side. */
+@media (min-width: 768px) {
+  .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .pager-next { grid-column: 2; }
+}
+
+/* lg (1024 px): the side navigation is open at 280 px beside the page. */
+@media (min-width: 1024px) {
+  .docs-grid { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
+  .docs-grid.no-sidebar { grid-template-columns: minmax(0, 1fr); }
+  .docs-mobilebar { display: none; }
+  .sidebar { position: sticky; z-index: auto; top: var(--header-bottom); bottom: auto; width: auto; height: calc(100vh - var(--header-bottom)); box-shadow: none; transform: none; transition: none; visibility: visible; }
+  .sidebar-head { display: none; }
+  .drawer-backdrop:not([hidden]) { display: none; }
+}
+
+/* xl (1440 px): the table of contents stands beside the content. */
+@media (min-width: 1440px) {
+  .docs-body { --group-w: calc(var(--content-w) + var(--bh-space-400) + 14rem); grid-template-columns: minmax(0, var(--content-w)) 14rem; column-gap: var(--bh-space-400); }
+  .docs-grid.no-toc .docs-body { --group-w: var(--content-w); grid-template-columns: minmax(0, var(--content-w)); }
+  .toc { display: block; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidebar, .sidebar-chevron { transition: none; }
+}
+
+/* Get started. */
+.role-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin-bottom: var(--bh-space-200); }
+.role-card { padding: calc(var(--bh-space-300) - 1px); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
+.prose .role-card h3 { margin: 0 0 var(--bh-space-050); font: var(--bh-font-heading-small); }
+.prose .role-card h3 a { color: var(--c-ink); text-decoration: none; }
+.prose .role-card h3 a:hover { text-decoration: underline; }
+.prose .role-card p { margin: 0 0 var(--bh-space-150); color: var(--c-muted); font: var(--bh-font-body-default); }
+.prose .role-card ul { margin: 0; padding: var(--bh-space-150) 0 0; border-top: 1px solid var(--c-line); list-style: none; }
+.prose .role-card li { margin: 0; font: var(--bh-font-body-default); }
+.prose .role-card li + li { margin-top: var(--bh-space-050); }
+.area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.card-meta { color: var(--c-muted); font: var(--bh-font-label-small); }
+.prose .help-list { display: grid; gap: 0; margin: 0 0 var(--bh-space-200); padding: 0; border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); list-style: none; }
+.prose .help-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-050); margin: 0; padding: var(--bh-space-150) var(--bh-space-200); }
+.prose .help-list li + li { border-top: 1px solid var(--c-line); }
+.help-list b { }
+.help-list span { color: var(--c-muted); }
+
+/* Dark button, used for downloads. */
+.prose .button-dark { display: inline-flex; flex: none; align-items: center; justify-content: center; height: var(--bh-size-control-large); padding: 0 var(--bh-space-200); border-radius: var(--bh-radius-100); color: var(--bh-color-text-inverse); background: var(--bh-color-background-neutral-bold); text-decoration: none; font: var(--bh-font-label-default); }
+.prose .button-dark:hover { background: var(--bh-color-background-neutral-bold-hover); }
+
+/* Inside the content column: these follow the column's width (container queries). */
+@container prose (min-width: 600px) {
+  .role-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .prose .help-list li { grid-template-columns: 11.25rem minmax(0, 1fr); gap: var(--bh-space-150); }
+}
+@container prose (min-width: 760px) { .area-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+/* A 40 px button on small screens, the default 32 px from md. */
+@media (min-width: 768px) { .prose .button-dark { justify-content: flex-start; height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); } }
+/* Under /vi/, a page shown in English says so above its title. */
+.lang-notice { margin: 0 0 var(--bh-space-150); padding: calc(var(--bh-space-100) - 1px) calc(var(--bh-space-150) - 1px); border: 1px solid var(--c-note-line); border-radius: var(--bh-radius-100); color: var(--c-ink); background: var(--c-note-bg); font: var(--bh-font-body-default); }
+
+/* Moving between pages: the page fades across instead of flashing white, while the header and
+   the sidebar stay put (cross-document view transitions; browsers without them load as before). */
+@view-transition { navigation: auto; }
+.site-header { view-transition-name: site-header; }
+.sidebar { view-transition-name: docs-sidebar; }
+::view-transition-group(site-header), ::view-transition-group(docs-sidebar) { animation: none; }
+::view-transition-old(site-header), ::view-transition-old(docs-sidebar) { display: none; }
+::view-transition-new(site-header), ::view-transition-new(docs-sidebar) { animation: none; }
+::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
+@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

package/dist/docs/src/styles/global.css

@@ -0,0 +1,66 @@
+/* Fonts are served from this site (public/fonts, SIL Open Font License), not from the Google Fonts
+   API: no third-party request, and the API's files drop Inter's cv05, cv08, ss02 and zero features.
+   Inter is the Google Fonts repository build (github.com/google/fonts, ofl/inter, v4.001): hinted
+   for small text on Windows, with the optical size axis (opsz 14–32, Inter Display at large sizes)
+   and every OpenType feature, cut into the three unicode ranges below with pyftsubset.
+   JetBrains Mono comes from Fontsource (v5.3.0: Vietnamese, Latin Extended and Latin). The Latin file is
+   preloaded in BaseLayout so text usually draws in Inter on the first paint.
+*/
+@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-vietnamese-opsz-wght-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
+@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-ext-opsz-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
+@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-opsz-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
+@font-face { font-family: Inter; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-vietnamese-opsz-wght-italic.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
+@font-face { font-family: Inter; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-ext-opsz-wght-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
+@font-face { font-family: Inter; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-opsz-wght-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
+@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrains-mono-vietnamese-wght-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
+@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
+@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
+
+:root {
+  color: var(--bh-color-text);
+  background: var(--bh-color-surface-page);
+  font-family: var(--bh-font-family-sans);
+  font-synthesis: none;
+}
+
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; scroll-padding-top: var(--bh-space-1000); scrollbar-gutter: stable; } /* stable: the header does not shift between short and long pages */
+
+/* Page to page: no cross-fade. A cross-document view transition was tried on 23/10/2026 and
+   dropped: on a page's first (slow) load Chrome showed the new page, then the old snapshot,
+   then the new page again. Pages are prefetched instead (astro.config.mjs), and Chrome keeps
+   the old page on screen until the new one is ready, so the swap is direct. */
+/* The text style goes on body, not on :root: the root font size must stay the reader's own
+   (16 px by default), because every size token is in rem. */
+body { margin: 0; min-width: 320px; overflow-x: hidden; font: var(--bh-font-body-default); }
+/* Bold inside text is semibold: 700 belongs to the display styles only. */
+/* Inter character variants, on everywhere (decided 27/10/2026): cv05 gives lowercase l a tail and
+   cv08 gives uppercase I serifs, so l, I and 1 never look alike in names, IDs and keys.
+   Every text style is applied with the `font` shorthand, and the shorthand resets
+   font-feature-settings to normal, so inheritance alone can't carry the features. This rule sets
+   them on every element from one variable; change the variable, not the property:
+   `--bh-font-features: "cv05", "cv08", "zero"` adds the slashed zero to a code value.
+   JetBrains Mono has no cv05 or cv08, so code is not affected. */
+:root { --bh-font-features: "cv05", "cv08"; }
+*, ::before, ::after { font-feature-settings: var(--bh-font-features) !important; }
+b, strong { font-weight: var(--bh-font-weight-semibold); }
+h1, h2, h3, h4, h5, h6 { font-weight: var(--bh-font-weight-semibold); }
+code, kbd, pre, samp { font-family: var(--bh-font-family-mono); }
+button, input { font: inherit; }
+button, a { -webkit-tap-highlight-color: transparent; }
+a { color: inherit; }
+svg { display: block; }
+
+.skip-link { position: fixed; z-index: 200; top: -5rem; left: 1rem; display: inline-flex; align-items: center; height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-100); color: var(--bh-color-text-inverse); background: var(--bh-color-background-neutral-bold); font: var(--bh-font-label-default); }
+.skip-link:focus { top: 1rem; }
+h1, h2, h3, p { margin-top: 0; }
+h1, h2, h3 { text-wrap: balance; }
+
+/* Focus ring: blue, 2 px, offset 2 px (color.border.focus). The brand yellow is 1.85:1 on white,
+   below the 3:1 a focus indicator needs. */
+:focus-visible { outline: var(--bh-border-width-focused) solid var(--bh-color-border-focus); outline-offset: var(--bh-state-focus-offset); }
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
+}

package/dist/docs/src/styles/icons.css

@@ -0,0 +1,135 @@
+/* Icons pages: the icon library (IconBrowser.astro) and the illustrations (IconDemo.astro).
+   Colours are role tokens or the site variables; nothing here is a fixed colour. */
+
+.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+/* ---------- Library ---------- */
+.ib { margin: 0 0 var(--bh-space-400); }
+.ib-controls { position: sticky; z-index: 5; top: var(--header-bottom, 49px); display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--bh-space-150) var(--bh-space-200); padding: var(--bh-space-150) 0; border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
+.ib-search { position: relative; display: flex; align-items: center; flex: 1 1 280px; min-width: 0; }
+.ib-search-icon { position: absolute; left: var(--bh-space-150); color: var(--bh-color-icon-subtle); pointer-events: none; }
+.ib-search input { width: 100%; height: 40px; padding: 0 var(--bh-space-150) 0 var(--bh-space-400); border: 1px solid var(--bh-color-border-bold); border-radius: var(--bh-radius-100); color: var(--c-ink); background: var(--bh-color-surface); font: var(--bh-font-body-default); }
+.ib-search input::placeholder { color: var(--bh-color-text-subtlest); }
+.ib-field { display: grid; gap: var(--bh-space-050); color: var(--c-muted); font: var(--bh-font-label-small); }
+/* Category select: the browser's own arrow sits at a fixed spot of its own, so it is replaced by the
+   Lucide chevron at the spacing tokens: 12 px from the edge, 16 px icon, 4 px to the text (as the search field). */
+.ib-select { position: relative; display: flex; align-items: center; max-width: 100%; }
+.ib-select-icon { position: absolute; right: var(--bh-space-150); color: var(--bh-color-icon-subtle); pointer-events: none; }
+.ib-field select { appearance: none; -webkit-appearance: none; height: 40px; max-width: 100%; padding: 0 var(--bh-space-400) 0 var(--bh-space-150); border: 1px solid var(--bh-color-border-bold); border-radius: var(--bh-radius-100); color: var(--c-ink); background: var(--bh-color-surface); font: var(--bh-font-body-default); }
+.ib-sizes { display: flex; }
+.ib-size { position: relative; }
+.ib-size input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.ib-size span { display: grid; place-items: center; min-width: 44px; height: 40px; padding: 0 var(--bh-space-100); border: 1px solid var(--bh-color-border-bold); color: var(--c-muted); background: var(--bh-color-surface); font: var(--bh-font-label-default); font-variant-numeric: tabular-nums; }
+.ib-size + .ib-size span { margin-left: -1px; }
+.ib-size:first-of-type span { border-radius: var(--bh-radius-100) 0 0 var(--bh-radius-100); }
+.ib-size:last-of-type span { border-radius: 0 var(--bh-radius-100) var(--bh-radius-100) 0; }
+.ib-size input:checked + span { position: relative; color: var(--bh-color-text-inverse); border-color: var(--bh-color-background-neutral-bold); background: var(--bh-color-background-neutral-bold); }
+.ib-size input:focus-visible + span { position: relative; z-index: 1; outline: var(--bh-border-width-focused) solid var(--bh-color-border-focus); outline-offset: var(--bh-state-focus-offset); }
+.ib-size input:not(:checked):hover + span { background: var(--c-hover); }
+
+.prose .ib-status { margin: var(--bh-space-200) 0 var(--bh-space-150); color: var(--c-muted); font: var(--bh-font-body-small); font-variant-numeric: tabular-nums; }
+.prose .ib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--bh-space-100); margin: 0; padding: 0; list-style: none; }
+.prose .ib-grid li { margin: 0; padding: 0; content-visibility: auto; contain-intrinsic-size: auto 104px; }
+.ib-icon { display: grid; grid-template-rows: 40px auto; justify-items: center; align-items: center; align-content: start; gap: var(--bh-space-075); width: 100%; height: 100%; min-height: 104px; padding: var(--bh-space-150) var(--bh-space-075) var(--bh-space-100); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); color: var(--bh-color-icon); background: var(--bh-color-surface); cursor: pointer; }
+.ib-icon svg { width: var(--ib-size, 24px); height: var(--ib-size, 24px); }
+.ib-name { display: -webkit-box; max-width: 100%; overflow: hidden; color: var(--c-muted); font: var(--bh-font-body-small); text-align: center; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
+.ib-icon:hover { background: var(--c-hover); }
+.ib-icon:hover .ib-name { color: var(--c-ink); }
+.ib-icon[data-copied] { border-color: var(--bh-color-border-success); background: var(--bh-color-background-success-subtle); }
+.ib-icon[data-copied] .ib-name { color: var(--bh-color-text-success); }
+.prose .ib-empty { margin: var(--bh-space-300) 0; padding: var(--bh-space-300); border: 1px dashed var(--c-line); border-radius: var(--bh-radius-150); color: var(--c-muted); text-align: center; }
+.ib-toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; max-width: calc(100vw - 32px); padding: var(--bh-space-100) var(--bh-space-200); border-radius: var(--bh-radius-100); color: var(--bh-color-text-inverse); background: var(--bh-color-surface-inverse); box-shadow: var(--c-shadow); font: var(--bh-font-label-default); opacity: 0; transform: translate(-50%, 8px); transition: opacity 150ms ease, transform 150ms ease; pointer-events: none; }
+.ib-toast:empty { padding: 0; }
+.ib-toast[data-show] { opacity: 1; transform: translate(-50%, 0); }
+.prose .ib-credit { margin: var(--bh-space-300) 0 0; color: var(--c-muted); font: var(--bh-font-body-small); }
+@container prose (width < 640px) {
+  .ib-controls { position: static; padding: 0 0 var(--bh-space-150); }
+  .ib-search { flex-basis: 100%; }
+  .ib-field:has(select) { flex: 1 1 160px; }
+  .ib-field select, .ib-select { width: 100%; }
+  .prose .ib-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
+}
+@container prose (width < 400px) { .ib-field:has(select) { flex-basis: 100%; } }
+
+/* ---------- Illustrations ---------- */
+.ic-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.ic-size { display: grid; grid-template-rows: auto 1fr; margin: 0; border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); overflow: hidden; }
+.ic-size-stage { display: grid; place-items: center; height: 96px; color: var(--bh-color-icon); background: var(--bh-color-surface-subtle); }
+.ic-size figcaption { display: grid; align-content: start; gap: var(--bh-space-025); padding: var(--bh-space-150) var(--bh-space-200) var(--bh-space-200); color: var(--c-muted); font: var(--bh-font-body-small); }
+.ic-size figcaption b { color: var(--c-ink); font: var(--bh-font-heading-xsmall); }
+.ic-meta { font-variant-numeric: tabular-nums; }
+@container prose (min-width: 640px) { .ic-sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+
+.ic-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.ic-panel { display: grid; grid-template-rows: auto 1fr; margin: 0; border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); overflow: hidden; }
+.ic-panel-stage { display: grid; place-items: center; min-height: 112px; padding: var(--bh-space-300) var(--bh-space-200); background: var(--bh-color-surface-subtle); }
+.ic-panel figcaption { padding: var(--bh-space-150) var(--bh-space-200); color: var(--c-muted); font: var(--bh-font-body-default); }
+.ic-panel figcaption b { color: var(--c-ink); }
+@container prose (min-width: 640px) { .ic-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+/* Alignment: a guide through the centre of the line box. */
+.ic-line { position: relative; display: inline-flex; align-items: center; gap: var(--bh-space-050); padding: 0 var(--bh-space-100); color: var(--c-ink); font: var(--bh-font-label-default); }
+.ic-line svg { color: var(--bh-color-icon); }
+.ic-line.is-guided { box-shadow: inset 0 0 0 1px var(--bh-color-border-info-subtle); background: var(--bh-color-background-info-subtle); }
+.ic-line.is-guided::before, .ic-line.is-guided::after { content: ''; position: absolute; top: 50%; width: 16px; border-top: 1px dashed var(--bh-color-border-info); }
+.ic-line.is-guided::before { right: 100%; }
+.ic-line.is-guided::after { left: 100%; }
+.is-zoom > * { zoom: 2; }
+.ic-multi { display: flex; align-items: flex-start; gap: var(--bh-space-100); max-width: 320px; color: var(--c-ink); font: var(--bh-font-body-default); }
+.ic-multi-icon { display: flex; align-items: center; height: 1lh; box-shadow: inset 0 0 0 1px var(--bh-color-border-info-subtle); background: var(--bh-color-background-info-subtle); }
+.ic-multi .is-warning { color: var(--bh-color-icon-warning); }
+
+/* Spacing: the gap drawn as a coloured bar with its size. */
+.ic-spaced { display: inline-flex; align-items: center; color: var(--c-ink); }
+.ic-spaced svg { color: var(--bh-color-icon); }
+.ic-spaced.is-16 { font: var(--bh-font-label-default); }
+.ic-spaced.is-20 { font: var(--bh-font-body-large); }
+.ic-gap { position: relative; align-self: stretch; min-height: 24px; background: var(--bh-color-background-danger-subtle); box-shadow: inset 1px 0 0 var(--bh-color-border-danger), inset -1px 0 0 var(--bh-color-border-danger); }
+.is-16 .ic-gap { width: 4px; }
+.is-20 .ic-gap { width: 8px; }
+.ic-gap small { position: absolute; top: 100%; left: 50%; margin-top: var(--bh-space-050); color: var(--bh-color-text-danger); font: var(--bh-font-label-small); font-style: normal; transform: translateX(-50%); }
+
+/* Target size */
+.ic-target { position: relative; display: grid; place-items: center; border: 1px dashed var(--bh-color-border-info); border-radius: var(--bh-radius-100); color: var(--bh-color-icon); background: var(--bh-color-background-info-subtle); }
+.ic-target.is-24 { width: 24px; height: 24px; }
+.ic-target.is-32 { width: 32px; height: 32px; }
+.ic-target small { position: absolute; left: 100%; margin-left: var(--bh-space-100); color: var(--bh-color-text-info); font: var(--bh-font-label-small); }
+
+/* Common actions */
+.prose .ic-actions td { vertical-align: middle; }
+.prose .ic-actions code { white-space: nowrap; }
+.ic-action-icon { display: inline-flex; align-items: center; gap: var(--bh-space-150); color: var(--bh-color-icon); }
+
+/* Do / Don’t: same shape as the Color pages. */
+.ic-dd { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.ic-dd-panel { margin: 0; border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); overflow: hidden; }
+.ic-dd-panel figcaption { padding: var(--bh-space-100) var(--bh-space-200); border-bottom: 2px solid; font: var(--bh-font-label-default); }
+.ic-dd-panel.is-do figcaption { border-color: var(--bh-color-border-success); color: var(--bh-color-text-success); }
+.ic-dd-panel.is-dont figcaption { border-color: var(--bh-color-border-danger); color: var(--bh-color-text-danger); }
+.ic-dd-stage { display: grid; place-items: center; min-height: 112px; padding: var(--bh-space-200); color: var(--c-ink); background: var(--bh-color-surface-subtle); }
+.ic-dd-panel p { margin: 0; padding: var(--bh-space-150) var(--bh-space-200); color: var(--c-muted); font: var(--bh-font-body-default); }
+.ic-dd-code { font: var(--bh-font-code-default); overflow-wrap: anywhere; }
+.ic-dd-stage .bh-button svg { color: var(--bh-color-icon); }
+@container prose (min-width: 640px) { .ic-dd { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+.ic-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--bh-space-100); }
+.ic-row.is-icons { gap: var(--bh-space-200); color: var(--bh-color-icon); }
+.ic-ibtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--bh-radius-100); color: var(--bh-color-icon); }
+.ic-ibtn.is-outlined { border: 1px solid var(--bh-color-border); background: var(--bh-color-surface); }
+.ic-bare { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--bh-color-icon); outline: 1px dashed var(--bh-color-border-danger); outline-offset: 0; }
+.ic-text14 { display: inline-flex; align-items: center; gap: var(--bh-space-050); color: var(--c-ink); font: var(--bh-font-body-default); }
+.ic-text14 svg { color: var(--bh-color-icon); }
+.ic-text14.is-big { gap: var(--bh-space-100); }
+.ic-text14.is-danger { color: var(--bh-color-text-danger); }
+.ic-text14.is-danger svg { color: var(--bh-color-icon-danger); }
+.ic-text14.is-baseline { display: inline-block; }
+.ic-text14.is-baseline svg { display: inline; margin-right: var(--bh-space-050); vertical-align: baseline; }
+.ic-text14 .is-decor { color: var(--bh-color-border-brand); }
+.ic-nav { display: grid; gap: var(--bh-space-025); width: 180px; }
+.ic-nav-item { position: relative; display: flex; align-items: center; gap: var(--bh-space-100); height: 32px; padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-100); color: var(--c-ink); font: var(--bh-font-label-default); }
+.ic-nav-item svg { color: var(--bh-color-icon); }
+.ic-nav-item.is-selected { background: var(--bh-color-background-selected); }
+.ic-nav-item.is-selected::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: var(--bh-border-width-selected); border-radius: var(--bh-radius-025); background: var(--bh-color-border-selected); }
+.ic-tip-wrap { display: grid; justify-items: center; gap: var(--bh-space-075); }
+.ic-tip { position: relative; padding: var(--bh-space-050) var(--bh-space-100); border-radius: var(--bh-radius-050); color: var(--bh-color-text-inverse); background: var(--bh-color-surface-inverse); font: var(--bh-font-label-small); }
+.ic-tip::after { content: ''; position: absolute; left: 50%; top: 100%; border: 4px solid transparent; border-top-color: var(--bh-color-surface-inverse); transform: translateX(-50%); }