@beehexa/design-rules 0.0.0-stage → 2611.3.3

package/dist/docs/src/lib/tokens.ts

@@ -0,0 +1,67 @@
+import { flattenTokens, cssVarName, resolveValue } from '../../scripts/token-utils.mjs';
+
+export interface Token {
+  name: string;
+  cssVar: string;
+  type: string;
+  value: string;
+  resolved: string;
+  /** Dark-theme value, when it differs from the light one. */
+  dark?: string;
+  darkResolved?: string;
+  /** Value for Vietnamese text (lang="vi"), when it differs. */
+  vi?: string;
+  viResolved?: string;
+  description: string;
+}
+
+const files = import.meta.glob<Record<string, unknown>>('/tokens/*.json', { eager: true, import: 'default' });
+
+const raw = Object.values(files).flatMap((tree) => flattenTokens(tree));
+const byName = new Map(raw.map((token) => [token.name, token]));
+
+// A dark value can point at tokens that have dark values of their own (text.link → status.accent.fg).
+function resolveDark(value: string, seen = new Set<string>()): string {
+  return value.replace(/\{([^}]+)\}/g, (_, ref) => {
+    if (seen.has(ref)) throw new Error(`Circular token reference: ${ref}`);
+    const target = byName.get(ref);
+    if (!target) throw new Error(`Unknown token reference: {${ref}}`);
+    return resolveDark(target.dark ?? target.value, new Set([...seen, ref]));
+  });
+}
+
+export const tokens: Token[] = raw.map((token) => {
+  const resolved = resolveValue(token.value, byName);
+  const darkResolved = resolveDark(token.dark ?? token.value);
+  return {
+    name: token.name,
+    cssVar: cssVarName(token.name),
+    type: token.type,
+    value: token.value,
+    resolved,
+    dark: token.dark,
+    darkResolved: darkResolved !== resolved ? darkResolved : undefined,
+    vi: token.vi,
+    viResolved: token.vi ? resolveValue(token.vi, byName) : undefined,
+    description: token.description,
+  };
+});
+
+/** Tokens whose name starts with `prefix`, e.g. `color` or `color.brand`. */
+// Numbered steps sort by their number (space.025 before space.100), whatever order the JSON keys come in:
+// JavaScript puts integer-like keys such as "100" ahead of "025". Other tokens keep their file order.
+const stepOf = (name: string) => {
+  const last = name.split('.').pop() ?? '';
+  return /^\d+$/.test(last) ? Number(last) : null;
+};
+export function tokensByPrefix(prefix: string): Token[] {
+  return tokens
+    .filter((token) => token.name === prefix || token.name.startsWith(`${prefix}.`))
+    .sort((a, b) => {
+      const sa = stepOf(a.name);
+      const sb = stepOf(b.name);
+      const pa = a.name.slice(0, a.name.lastIndexOf('.'));
+      const pb = b.name.slice(0, b.name.lastIndexOf('.'));
+      return sa !== null && sb !== null && pa === pb ? sa - sb : 0;
+    });
+}

package/dist/docs/src/lib/tri-grid.ts

@@ -0,0 +1,28 @@
+// Lines of an equilateral triangle grid with vertical lines, cut to a rectangle (no clip path,
+// so the figure screenshots stay reliable). The grid passes through (x0, y0); h is one band
+// (the distance between vertical lines); one triangle side is h / cos 30°.
+export function triGrid(x0: number, y0: number, h: number, box: { x1: number; y1: number; x2: number; y2: number }): string {
+  const a = h / Math.cos(Math.PI / 6);
+  const t = Math.tan(Math.PI / 6);
+  const out: string[] = [];
+  const eps = 1e-6;
+  for (let k = Math.ceil((box.x1 - x0) / h); x0 + k * h <= box.x2 + eps; k++) out.push(`M${x0 + k * h} ${box.y1}V${box.y2}`);
+  const cut = (slope: number, c: number) => {
+    // y = slope * x + c
+    const pts: [number, number][] = [];
+    for (const x of [box.x1, box.x2]) { const y = slope * x + c; if (y >= box.y1 - eps && y <= box.y2 + eps) pts.push([x, y]); }
+    for (const y of [box.y1, box.y2]) { const x = (y - c) / slope; if (x > box.x1 + eps && x < box.x2 - eps) pts.push([x, y]); }
+    if (pts.length < 2) return;
+    pts.sort((p, q) => p[0] - q[0]);
+    const [p, q] = [pts[0], pts[pts.length - 1]];
+    if (Math.hypot(q[0] - p[0], q[1] - p[1]) > h * 0.05) out.push(`M${p[0]} ${p[1]}L${q[0]} ${q[1]}`);
+  };
+  for (const slope of [t, -t]) {
+    // lines y = slope (x - x0) + y0 + n a
+    const c0 = y0 - slope * x0;
+    const cs = [box.x1, box.x2].flatMap((x) => [box.y1, box.y2].map((y) => y - slope * x - c0));
+    const nMin = Math.floor(Math.min(...cs) / a), nMax = Math.ceil(Math.max(...cs) / a);
+    for (let n = nMin; n <= nMax; n++) cut(slope, c0 + n * a);
+  }
+  return out.join('');
+}

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

@@ -0,0 +1,122 @@
+/* Site chrome: colour roles, header, search and the docs footer. */
+
+:root {
+  /* Site roles, mapped to the design-system colour tokens (tokens/color.json). The tokens switch
+     between light and dark on their own. */
+  --c-bg: var(--bh-color-surface-page);
+  --c-ink: var(--bh-color-text);
+  --c-muted: var(--bh-color-text-subtle);
+  --c-line: var(--bh-color-border);
+  --c-surf: var(--bh-color-surface-subtle);
+  --c-gold: var(--bh-color-border-selected); /* indicators only, never text */
+  --c-link: var(--bh-color-link);
+  --c-hover: var(--bh-color-background-neutral-subtle-hover);
+  --c-selected: var(--bh-color-background-selected);
+  --c-selected-hover: var(--bh-color-background-selected-hover);
+  --c-code-bg: var(--bh-color-code-background);
+  --c-code-ink: var(--bh-color-code-text);
+  --c-note-line: var(--bh-color-border-brand-subtle);
+  --c-note-bg: var(--bh-color-background-brand-subtle);
+  --c-shadow: var(--bh-elevation-shadow-overlay);
+  /* App frame (Foundations › Layout › App frame). */
+  --header-h: calc(var(--bh-size-control-default) + 2 * var(--bh-space-100)); /* 48 px: a 32 px control, 8 px above and below */
+  /* The 1 px line under the header is not part of its 48 px; sticky parts start below both. */
+  --header-bottom: calc(var(--header-h) + 1px);
+  --sidebar-w: 17.5rem; /* 280 px */
+  /* Page margin: 16 px, 24 px from md (768 px), 32 px from xl (1440 px). */
+  --page-margin: var(--bh-space-200);
+  color-scheme: light;
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+}
+@media (min-width: 768px) { :root { --page-margin: var(--bh-space-300); } }
+@media (min-width: 1440px) { :root { --page-margin: var(--bh-space-400); } }
+
+:root[data-theme="dark"] { background: var(--c-bg); }
+body.docs { color: var(--c-ink); background: var(--c-bg); }
+
+.site-header { position: sticky; z-index: 100; top: 0; container-type: inline-size; box-sizing: content-box; height: var(--header-h); border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
+/* The logo sits 20 px from the window edge, in line with the side navigation icons and labels
+   (8 px inset + 12 px item padding); the tools end at the page margin. */
+.header-inner { position: relative; display: flex; align-items: center; gap: var(--bh-space-150); height: 100%; padding: 0 var(--page-margin) 0 var(--bh-space-250); }
+
+/* Header logo: PNG at 3× shown at 1× (see SiteHeader.astro). The image is 28 px high: a 24 px
+   icon with 2 px above and below (room for the "g"), centred in the 48 px header. */
+.header-brand { display: flex; flex: none; text-decoration: none; }
+.header-logo-img { display: block; width: auto; height: 28px; }
+
+/* Theme: draw the light or the dark artwork. */
+.logo-dark { display: none !important; }
+:root[data-theme='dark'] .logo-light { display: none !important; }
+:root[data-theme='dark'] .logo-dark { display: block !important; }
+
+
+/* Design system · News sit on the right, next to search, as on atlassian.design: the header
+   switches between the two parts of the site, the sidebar holds the design system itself. */
+.header-nav { display: none; align-self: stretch; gap: var(--bh-space-300); margin-left: auto; }
+.header-nav a { position: relative; display: flex; align-items: center; color: var(--c-muted); text-decoration: none; white-space: nowrap; font: var(--bh-font-label-default); }
+.header-nav a:hover { color: var(--c-ink); }
+.header-nav a[aria-current='page'] { color: var(--c-ink); }
+.header-nav a[aria-current='page']::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--c-gold); }
+
+.header-tools { display: flex; align-items: center; gap: var(--bh-space-100); margin-left: auto; }
+
+.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); color: var(--c-ink); background: var(--c-bg); cursor: pointer; list-style: none; }
+.icon-button:hover { background: var(--c-hover); }
+.icon-button::-webkit-details-marker { display: none; }
+.theme-sun { display: none; }
+:root[data-theme='dark'] .theme-sun { display: block; }
+:root[data-theme='dark'] .theme-moon { display: none; }
+
+.search { position: relative; display: none; align-items: center; width: 240px; height: 32px; border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); background: var(--c-surf); }
+.search:focus-within { border-color: var(--c-muted); background: var(--c-bg); }
+.search-icon { flex: none; margin-left: calc(var(--bh-space-150) - 1px); color: var(--c-muted); } /* 12 px from the outer edge, border included */
+.search input { flex: 1; min-width: 0; height: 100%; padding: 0 var(--bh-space-100) 0 var(--bh-space-050); border: 0; outline: 0; color: var(--c-ink); background: transparent; font: var(--bh-font-body-default); }
+.search input::placeholder { color: var(--c-muted); }
+.search input::-webkit-search-cancel-button { display: none; }
+.search-hint { margin-right: calc(var(--bh-space-100) - 1px); padding: 0 var(--bh-space-050); border: 1px solid var(--c-line); border-radius: var(--bh-radius-050); color: var(--c-muted); background: var(--c-bg); white-space: nowrap; font: var(--bh-font-label-small); }
+.search:focus-within .search-hint { display: none; }
+.search-results { position: absolute; z-index: 10; top: calc(100% + var(--bh-space-050)); right: 0; width: 360px; max-width: calc(100vw - 2 * var(--page-margin)); margin: 0; padding: var(--bh-space-100); border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); background: var(--c-bg); box-shadow: var(--c-shadow); list-style: none; }
+.search-results a { display: grid; gap: var(--bh-space-050); padding: var(--bh-space-100) var(--bh-space-150); border-radius: var(--bh-radius-050); color: var(--c-ink); text-decoration: none; }
+.search-results b { font: var(--bh-font-label-default); }
+.search-results span { color: var(--c-muted); font: var(--bh-font-body-small); }
+.search-results [aria-selected='true'] a, .search-results a:hover { background: var(--c-hover); }
+.search-empty { padding: var(--bh-space-100) var(--bh-space-150); color: var(--c-muted); font: var(--bh-font-body-default); }
+.search-open { display: inline-grid; }
+
+.header-menu { position: relative; display: block; }
+.header-menu nav { position: absolute; top: calc(100% + var(--bh-space-050)); right: 0; display: grid; gap: var(--bh-space-050); width: 220px; padding: var(--bh-space-100); border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); background: var(--c-bg); box-shadow: var(--c-shadow); }
+.header-menu nav 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); }
+.header-menu nav a:hover { background: var(--c-hover); }
+.header-menu nav a[aria-current='page'] { background: linear-gradient(to right, var(--c-gold) var(--bh-border-width-selected), var(--c-selected) 0); }
+.header-menu nav a[aria-current='page']:hover { background: var(--c-selected-hover); }
+
+/* Footer: one 48 px line, on the same edges as the header. Muted until hover, so it never
+   competes with the page. */
+.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bh-space-100) var(--bh-space-400); box-sizing: content-box; min-height: var(--header-h); padding: 0 var(--page-margin) 0 var(--bh-space-250); border-top: 1px solid var(--c-line); color: var(--c-muted); background: var(--c-bg); font: var(--bh-font-body-small); }
+.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--bh-space-050) var(--bh-space-250); }
+.site-footer a { color: var(--c-muted); text-decoration: none; }
+.site-footer a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
+
+/* Small windows first: the site menu, and search as a button that opens a field over the
+   header. From lg (1024 px) the header shows its links and the search field. */
+body[data-search-open] .search { position: absolute; z-index: 5; inset: var(--bh-space-100) var(--page-margin); display: flex; width: auto; background: var(--c-bg); }
+body[data-search-open] .search-results { left: 0; right: 0; width: auto; }
+@media (min-width: 1024px) {
+  .header-inner { gap: var(--bh-space-300); }
+  .header-nav { display: flex; }
+  .header-tools { margin-left: 0; }
+  .header-menu { display: none; }
+  .search { display: flex; }
+  .search-open { display: none; }
+  body[data-search-open] .search { position: relative; inset: auto; width: 240px; background: var(--c-surf); }
+  body[data-search-open] .search-results { left: auto; width: 360px; }
+}
+/* Language switch: the other language's short name, links to the same page in it. */
+.lang-switch { width: auto; min-width: var(--bh-size-control-default); padding: 0 var(--bh-space-100); color: var(--c-ink); text-decoration: none; font: var(--bh-font-label-small); }
+/* The site menu repeats the language link; on narrow headers it is the only one, so the tools fit 360 px. */
+.header-menu nav .menu-lang { margin-top: var(--bh-space-050); padding-top: var(--bh-space-050); border-top: 1px solid var(--c-line); border-radius: 0 0 var(--bh-radius-050) var(--bh-radius-050); }
+.site-header .lang-switch { display: none; }
+@container (min-width: 400px) { .site-header .lang-switch { display: inline-grid; } }

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

@@ -0,0 +1,270 @@
+/* Color page: brand cards, scales, role tables, status and labels. Values come from the tokens. */
+
+.c-num { font-variant-numeric: tabular-nums; }
+.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+/* Brand */
+.c-brand { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.c-brand-card { display: grid; grid-template-rows: auto 1fr; margin: 0; border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); overflow: hidden; }
+.c-brand-chip { display: flex; align-items: flex-end; height: 120px; padding: var(--bh-space-200); font: var(--bh-font-heading-small); }
+.c-brand-card.is-yellow .c-brand-chip { color: var(--bh-color-text-on-brand); }
+.c-brand-card.is-graphite .c-brand-chip { color: var(--bh-color-brand-white); }
+.c-brand-card.is-white .c-brand-chip { color: var(--bh-color-brand-graphite); box-shadow: inset 0 -1px 0 var(--c-line); }
+.c-brand-card figcaption { display: grid; align-content: start; gap: var(--bh-space-050); padding: var(--bh-space-200); color: var(--c-muted); font: var(--bh-font-body-default); }
+.c-brand-card figcaption code { color: var(--c-ink); }
+@container prose (min-width: 640px) { .c-brand { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+
+/* Scales */
+.c-scales { margin: 0 0 var(--bh-space-300); }
+.c-scale { margin: 0 0 var(--bh-space-250); }
+.c-scale figcaption { margin-bottom: var(--bh-space-100); color: var(--c-muted); font: var(--bh-font-body-default); }
+.c-scale figcaption b { color: var(--c-ink); }
+.prose .c-scale-table { width: 100%; min-width: 640px; table-layout: fixed; margin: 0; }
+.prose .c-scale-table th, .prose .c-scale-table td { padding: var(--bh-space-050) var(--bh-space-025); border: 0; text-align: center; vertical-align: top; }
+.prose .c-scale-table th[scope='row'] { width: 48px; text-align: left; }
+.c-chip { display: block; height: 40px; margin-bottom: var(--bh-space-050); border-radius: var(--bh-radius-050); box-shadow: inset 0 0 0 1px rgb(127 127 127 / 18%); }
+.c-scale-table .c-num { color: var(--c-muted); font: var(--bh-font-body-small); font-variant-numeric: tabular-nums; }
+.prose .c-steps { display: flex; flex-wrap: wrap; gap: var(--bh-space-050) var(--bh-space-250); margin: 0; padding: 0; list-style: none; color: var(--c-muted); font: var(--bh-font-body-small); }
+.prose .c-steps li { margin: 0; }
+.prose .c-steps b { color: var(--c-ink); }
+
+/* Role and status tables */
+.c-cell { display: inline-flex; align-items: center; gap: var(--bh-space-100); white-space: nowrap; }
+.c-cell > .c-num { align-self: baseline; font: var(--bh-font-code-default); }
+.c-dot { flex: none; width: 16px; height: 16px; border-radius: var(--bh-radius-050); box-shadow: inset 0 0 0 1px rgb(127 127 127 / 25%); }
+.c-check { display: block; color: var(--c-muted); font: var(--bh-font-body-small); font-variant-numeric: tabular-nums; }
+.c-from { color: var(--c-muted); font: var(--bh-font-body-small); }
+.prose .c-status td.c-num { font: var(--bh-font-body-small); font-variant-numeric: tabular-nums; }
+
+/* Actions */
+.c-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.c-action { margin: 0; border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); overflow: hidden; }
+.c-action-stage { display: grid; place-items: center; height: 96px; background: var(--bh-color-surface-subtle); }
+.c-action figcaption { display: grid; gap: var(--bh-space-050); padding: var(--bh-space-200); color: var(--c-muted); font: var(--bh-font-body-default); }
+.c-action figcaption code { color: var(--c-ink); }
+.c-button { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-100); font: var(--bh-font-label-default); }
+.c-button.is-primary { color: var(--bh-color-text-inverse); background: var(--bh-color-background-neutral-bold); }
+.c-button.is-danger { color: var(--bh-color-text-on-bold); background: var(--bh-color-background-danger-bold); }
+@container prose (min-width: 640px) { .c-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+/* Labels */
+.c-labels { display: grid; gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.c-label-set { margin: 0; padding: var(--bh-space-250); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
+.c-label-set figcaption { margin-bottom: var(--bh-space-150); color: var(--c-muted); font: var(--bh-font-body-default); }
+.c-label-set figcaption b { color: var(--c-ink); }
+.c-label-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bh-space-100); }
+.c-label-row + .c-label-row { margin-top: var(--bh-space-150); }
+
+/* Token reference */
+.c-tokens > p { margin: 0 0 var(--bh-space-150); }
+.c-var { display: block; color: var(--c-muted); font: var(--bh-font-body-small); }
+.prose .c-token-ref { width: 100%; table-layout: fixed; }
+.prose .c-token-ref th:nth-child(1) { width: 36%; }
+.prose .c-token-ref th:nth-child(6) { width: 17%; }
+.prose .c-token-ref td { vertical-align: top; }
+.c-token-ref .c-cell { display: flex; white-space: normal; overflow-wrap: anywhere; }
+.c-token-ref .c-cell + .c-cell { margin-top: var(--bh-space-050); }
+
+/* Pairing */
+.prose .c-pairing { width: 100%; table-layout: fixed; }
+.prose .c-pairing td { vertical-align: top; }
+.c-pair-token { display: inline-block; margin: 0 var(--bh-space-050) var(--bh-space-050) 0; }
+
+/* Do / Don't */
+.c-dd { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.c-dd-panel { margin: 0; border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); overflow: hidden; }
+.c-dd-panel figcaption { padding: var(--bh-space-100) var(--bh-space-200); border-bottom: 2px solid; font: var(--bh-font-label-default); }
+.c-dd-panel.is-do figcaption { border-color: var(--bh-color-border-success); color: var(--bh-color-text-success); }
+.c-dd-panel.is-dont figcaption { border-color: var(--bh-color-border-danger); color: var(--bh-color-text-danger); }
+.c-dd-stage { display: grid; place-items: center; min-height: 96px; padding: var(--bh-space-200); background: var(--bh-color-surface-subtle); }
+.c-dd-panel p { margin: 0; padding: var(--bh-space-150) var(--bh-space-200); color: var(--c-muted); font: var(--bh-font-body-default); }
+.c-dd-row { display: inline-flex; flex-wrap: wrap; gap: var(--bh-space-100); }
+.c-dd-code { font: var(--bh-font-code-default); }
+.c-dd-tabs { display: flex; gap: var(--bh-space-250); border-bottom: 1px solid var(--bh-color-border); }
+.c-dd-tab { padding: var(--bh-space-100) 0; color: var(--bh-color-text-subtle); font: var(--bh-font-label-default); }
+.c-dd-tab.is-current { color: var(--bh-color-text); box-shadow: inset 0 -2px 0 var(--bh-color-border-selected); }
+/* The Don't examples show colours used wrongly on purpose, so they read the scale directly. */
+.c-dd-yellow-text { color: var(--bh-color-brand-yellow); font: var(--bh-font-label-default); text-decoration: underline; }
+.c-dd-yellow-button { display: inline-flex; align-items: center; padding: var(--bh-space-100) var(--bh-space-200); border-radius: var(--bh-radius-100); color: var(--bh-color-brand-white); background: var(--bh-color-brand-yellow); font: var(--bh-font-label-default); }
+.c-dd-dot { width: 12px; height: 12px; border-radius: var(--bh-radius-full); background: var(--bh-color-red-9); }
+@container prose (min-width: 640px) { .c-dd { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+/* Annotated example */
+.c-ex { margin: 0 0 var(--bh-space-300); }
+.c-ex-card { border: 1px solid var(--bh-color-border); border-radius: var(--bh-radius-150); background: var(--bh-color-surface); overflow: hidden; }
+.c-ex-head { display: flex; align-items: center; justify-content: space-between; gap: var(--bh-space-150); padding: var(--bh-space-200); border-bottom: 1px solid var(--bh-color-border); }
+.c-ex-title { color: var(--bh-color-text); font: var(--bh-font-heading-small); }
+.c-ex-row { display: flex; align-items: center; justify-content: space-between; gap: var(--bh-space-150); padding: var(--bh-space-150) var(--bh-space-200); border-bottom: 1px solid var(--bh-color-border); }
+.c-ex-row:last-child { border-bottom: 0; }
+.c-ex-row.is-selected { background: var(--bh-color-background-selected); box-shadow: inset var(--bh-border-width-selected) 0 0 var(--bh-color-border-selected); }
+.c-ex-name { display: block; color: var(--bh-color-text); font: var(--bh-font-heading-xsmall); }
+.c-ex-meta { color: var(--bh-color-text-subtlest); font: var(--bh-font-body-small); }
+.c-ex-link { color: var(--bh-color-link); }
+.c-ex-n { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: var(--bh-space-050); border-radius: var(--bh-radius-full); color: var(--bh-color-text-inverse); background: var(--bh-color-surface-inverse); font: var(--bh-font-label-small); vertical-align: middle; }
+.c-ex figcaption { margin-top: var(--bh-space-150); }
+.prose .c-ex-legend { margin: 0; color: var(--c-muted); font: var(--bh-font-body-default); }
+
+/* Extra Do / Don't stages */
+.c-dd-fill { display: grid; gap: var(--bh-space-025); padding: var(--bh-space-100) var(--bh-space-150); border-radius: var(--bh-radius-100); color: var(--bh-color-text-on-bold); background: var(--bh-color-background-danger-bold); font: var(--bh-font-label-default); }
+.c-dd-fill small { font: var(--bh-font-body-small); }
+.c-dd-fill.is-wrong small { color: var(--bh-color-red-7); }
+.c-dd-fill.is-wrong { color: var(--bh-color-red-12); }
+.c-dd-yellow-label { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--bh-space-075); border: 1px solid var(--bh-color-brand-yellow); border-radius: var(--bh-radius-full); color: var(--bh-color-yellow-9); font: var(--bh-font-label-small); }
+
+/* Balance bar */
+.c-balance { margin: 0 0 var(--bh-space-300); }
+.c-balance-bar { display: flex; height: 40px; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); }
+.c-balance figcaption { margin-top: var(--bh-space-100); color: var(--c-muted); font: var(--bh-font-body-default); }
+
+/* Token name anatomy */
+.c-anat { display: grid; gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); padding: var(--bh-space-250); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
+.c-anat-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--bh-space-025); }
+.c-anat-part { display: grid; justify-items: center; gap: var(--bh-space-050); }
+.c-anat-part code { padding: var(--bh-space-050) var(--bh-space-100); border-radius: var(--bh-radius-050); font: var(--bh-font-code-default); }
+.c-anat-part small { color: var(--c-muted); font: var(--bh-font-body-small); }
+.c-anat-part.is-prop code { box-shadow: inset 0 -3px 0 var(--bh-color-border-info); }
+.c-anat-part.is-role code { box-shadow: inset 0 -3px 0 var(--bh-color-border-danger); }
+.c-anat-part.is-emph code { box-shadow: inset 0 -3px 0 var(--bh-color-border-success); }
+.c-anat-part.is-state code { box-shadow: inset 0 -3px 0 var(--bh-color-border-warning); }
+.c-anat-part.is-skip code { text-decoration: line-through; color: var(--c-muted); }
+.c-anat-dot { padding-top: var(--bh-space-050); font: var(--bh-font-code-default); }
+.c-anat figcaption { color: var(--c-muted); font: var(--bh-font-body-default); }
+
+/* Surfaces */
+.c-surf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.c-surf figure { margin: 0; }
+.c-surf figcaption { margin-top: var(--bh-space-100); color: var(--c-muted); font: var(--bh-font-body-default); }
+.c-surf-page { position: relative; display: grid; grid-template-columns: 42% 1fr; gap: var(--bh-space-150); min-height: 180px; padding: var(--bh-space-300) var(--bh-space-150) var(--bh-space-150); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); background: var(--bh-color-surface-page); }
+.c-surf-page > .c-tag { position: absolute; top: 6px; left: 12px; }
+.c-surf-side { padding: var(--bh-space-100); border-radius: var(--bh-radius-100); background: var(--bh-color-surface-subtle); }
+.c-surf-card { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--bh-space-050); padding: var(--bh-space-100); border: 1px solid var(--bh-color-border); border-radius: var(--bh-radius-100); background: var(--bh-color-surface); }
+.c-surf-tip { position: absolute; right: 8px; bottom: 8px; padding: var(--bh-space-050) var(--bh-space-100); border-radius: var(--bh-radius-100); color: var(--bh-color-text-inverse); background: var(--bh-color-surface-inverse); font: var(--bh-font-body-small); }
+.c-tag { display: inline-block; padding: 1px var(--bh-space-075); border-radius: var(--bh-radius-050); color: var(--bh-color-text-subtle); background: var(--bh-color-background-neutral); font: var(--bh-font-code-default); font-size: 12px; }
+.c-tag.is-on-dark { color: var(--bh-color-text-inverse); background: var(--bh-color-surface-inverse); }
+.c-surf-page.is-dimmed { display: grid; place-items: center; grid-template-columns: 1fr; padding: var(--bh-space-500) var(--bh-space-150) var(--bh-space-200); overflow: hidden; }
+.c-surf-scrim { position: absolute; inset: 0; padding: var(--bh-space-075) var(--bh-space-150); background: var(--bh-color-surface-scrim); }
+.c-surf-dialog { position: relative; display: grid; gap: var(--bh-space-100); max-width: 280px; padding: var(--bh-space-200); border-radius: var(--bh-radius-100); color: var(--bh-color-text-subtle); background: var(--bh-color-surface); box-shadow: var(--bh-elevation-shadow-overlay); font: var(--bh-font-body-default); }
+.c-surf-dialog b { color: var(--bh-color-text); font: var(--bh-font-heading-xsmall); }
+@container prose (min-width: 640px) { .c-surf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+/* States */
+.prose .c-states { width: 100%; margin: 0 0 var(--bh-space-300); }
+.prose .c-states td, .prose .c-states th { text-align: center; vertical-align: middle; }
+.prose .c-states th[scope='row'] { text-align: left; }
+.c-focus { outline: var(--bh-border-width-focused) solid var(--bh-color-border-focus); outline-offset: var(--bh-state-focus-offset); }
+.c-disabled { border-color: var(--bh-color-border-disabled) !important; color: var(--bh-color-text-disabled) !important; background: var(--bh-color-background-disabled) !important; }
+.c-state-row { display: block; min-width: 88px; padding: var(--bh-space-100) var(--bh-space-150); border-radius: var(--bh-radius-100); color: var(--bh-color-text); text-align: left; white-space: nowrap; font: var(--bh-font-body-default); }
+.c-state-row.is-selected { background: linear-gradient(to right, var(--bh-color-border-selected) var(--bh-border-width-selected), var(--bh-color-background-selected) 0); }
+
+/* Banners */
+.c-banners { display: grid; gap: var(--bh-space-100); margin: 0 0 var(--bh-space-300); }
+.c-banner { display: flex; align-items: center; gap: var(--bh-space-100); padding: calc(var(--bh-space-100) - 1px) calc(var(--bh-space-150) - 1px); border: 1px solid; border-radius: var(--bh-radius-100); color: var(--bh-color-text); font: var(--bh-font-body-default); }
+.c-banner-icon { display: inline-flex; }
+.c-banner.is-info { border-color: var(--bh-color-border-info-subtle); background: var(--bh-color-background-info-subtle); }
+.c-banner.is-info .c-banner-icon { color: var(--bh-color-icon-info); }
+.c-banner.is-success { border-color: var(--bh-color-border-success-subtle); background: var(--bh-color-background-success-subtle); }
+.c-banner.is-success .c-banner-icon { color: var(--bh-color-icon-success); }
+.c-banner.is-warning { border-color: var(--bh-color-border-warning-subtle); background: var(--bh-color-background-warning-subtle); }
+.c-banner.is-warning .c-banner-icon { color: var(--bh-color-icon-warning); }
+.c-banner.is-danger { border-color: var(--bh-color-border-danger-subtle); background: var(--bh-color-background-danger-subtle); }
+.c-banner.is-danger .c-banner-icon { color: var(--bh-color-icon-danger); }
+
+/* Step jobs */
+.c-steps-ill { display: grid; gap: var(--bh-space-150); margin: 0 0 var(--bh-space-300); padding: var(--bh-space-200); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
+/* Twelve steps always fit the column: on narrow columns the scale name goes on its own line. */
+.c-steps-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: var(--bh-space-050); }
+.c-steps-row > b { grid-column: 1 / -1; }
+@container prose (min-width: 560px) { .c-steps-row { grid-template-columns: 4.5rem repeat(12, minmax(0, 1fr)); gap: var(--bh-space-075); } .c-steps-row > b { grid-column: auto; } }
+.c-steps-row > b { align-self: center; font: var(--bh-font-label-default); }
+.c-step-cell { display: grid; justify-items: center; gap: var(--bh-space-050); }
+.c-step-cell small { color: var(--c-muted); font: var(--bh-font-body-small); }
+.c-step-bg { width: 100%; height: 32px; border: 1px solid var(--c-line); border-radius: var(--bh-radius-050); }
+.c-step-pill, .c-step-fill { display: grid; place-items: center; overflow: hidden; width: 100%; height: 32px; border-radius: var(--bh-radius-100); color: var(--bh-color-text); font: var(--bh-font-label-small); }
+.c-step-fill { color: var(--bh-color-text-on-bold); }
+.c-step-line { width: 100%; height: 32px; border: 2px solid; border-radius: var(--bh-radius-100); }
+.c-step-text { display: grid; place-items: center; height: 32px; font: var(--bh-font-heading-small); }
+.c-steps-ill figcaption { color: var(--c-muted); font: var(--bh-font-body-small); }
+
+/* Themes */
+.c-themes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.c-themes figure { margin: 0; }
+.c-theme-stage { padding: var(--bh-space-200); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
+.c-themes figcaption { margin-top: var(--bh-space-100); color: var(--c-muted); font: var(--bh-font-body-default); }
+@container prose (min-width: 640px) { .c-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+/* Contrast samples */
+.c-contrast { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-150); margin: 0 0 var(--bh-space-300); }
+.c-contrast figure { margin: 0; border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); overflow: hidden; }
+.c-contrast-chip { display: grid; place-items: center; height: 72px; font: var(--bh-font-label-default); }
+.c-contrast-box { width: 20px; height: 20px; border: 1px solid; border-radius: var(--bh-radius-050); background: var(--bh-color-surface); }
+.c-contrast figcaption { padding: var(--bh-space-100) var(--bh-space-150); color: var(--c-muted); font: var(--bh-font-body-small); }
+.c-contrast .is-pass b { color: var(--bh-color-text-success); }
+.c-contrast .is-fail b { color: var(--bh-color-text-danger); }
+@container prose (min-width: 640px) { .c-contrast { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+
+/* Values that differ by theme: show the one for the current theme. */
+.v-dark { display: none; }
+:root[data-theme='dark'] .v-light { display: none; }
+:root[data-theme='dark'] .v-dark { display: inline; }
+
+/* Palette: large swatches, one column per scale, light and dark */
+.c-pal-set { display: grid; gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.c-pal { margin: 0; padding: var(--bh-space-200); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
+.c-pal figcaption { margin: 0 0 var(--bh-space-150); font: var(--bh-font-heading-xsmall); }
+.c-pal-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--bh-space-100); }
+.c-pal-col { display: grid; gap: var(--bh-space-025); }
+.c-pal-col > b { margin-bottom: var(--bh-space-075); font: var(--bh-font-body-default); font-weight: var(--bh-font-weight-semibold); }
+.c-pal-sw { display: flex; justify-content: space-between; align-items: center; gap: var(--bh-space-050); min-height: 36px; padding: 0 var(--bh-space-100); border-radius: var(--bh-radius-050); font: var(--bh-font-body-small); }
+.c-pal-sw:first-of-type { border-radius: var(--bh-radius-100) var(--bh-radius-100) var(--bh-radius-050) var(--bh-radius-050); }
+.c-pal-sw:last-of-type { border-radius: var(--bh-radius-050) var(--bh-radius-050) var(--bh-radius-100) var(--bh-radius-100); }
+.c-pal-sw .c-num { font: var(--bh-font-label-small); font-family: var(--bh-font-family-mono); opacity: .9; }
+.c-pal-sw em { margin-left: var(--bh-space-050); font-style: normal; font-weight: var(--bh-font-weight-semibold); text-transform: lowercase; }
+.c-pal.is-light .c-pal-sw:is(:nth-of-type(1), :nth-of-type(2)) { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%); }
+@container prose (width < 640px) { .c-pal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--bh-space-200); } }
+
+/* Ramps on the overview */
+.c-ramps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.c-ramp-card { display: grid; gap: var(--bh-space-075); margin: 0; padding: var(--bh-space-300); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
+.c-ramp { display: grid; grid-template-columns: repeat(12, 1fr); height: 22px; overflow: hidden; border-radius: var(--bh-radius-050); }
+.c-ramp-card figcaption { margin-top: var(--bh-space-100); font: var(--bh-font-body-small); }
+@container prose (min-width: 640px) { .c-ramps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+/* Role specimens */
+.c-roles { width: 100%; table-layout: fixed; }
+.c-roles .c-col-token { width: 30%; }
+.c-roles .c-col-mode { width: 15%; }
+.c-roles .c-col-use { width: 40%; }
+.c-roles td { vertical-align: top; overflow-wrap: anywhere; }
+.c-roles .c-check { margin-top: var(--bh-space-050); }
+@container prose (width < 560px) { .c-roles { table-layout: auto; } .c-roles .c-spec { display: inline-grid; margin: 0 var(--bh-space-100) 0 0; vertical-align: middle; } .c-roles .c-num { display: inline; } }
+.c-spec { display: grid; place-items: center; width: 72px; height: 44px; margin-bottom: var(--bh-space-075); border-radius: var(--bh-radius-050); box-shadow: inset 0 0 0 1px rgb(127 127 127 / 25%); font: var(--bh-font-heading-small); }
+.c-spec.is-border { box-shadow: none; }
+.c-spec-fill { width: 52px; height: 28px; border-radius: var(--bh-radius-050); background: var(--fill); box-shadow: inset 0 0 0 1px var(--edge); }
+.c-roles .c-num { display: block; font: var(--bh-font-code-default); }
+
+/* Pairing cards */
+.c-pairs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-300); }
+.c-pair { margin: 0; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
+.c-pair-stage { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--bh-space-050) var(--bh-space-150); min-height: 96px; padding: var(--bh-space-200); font: var(--bh-font-body-default); }
+.c-pair-text { font: var(--bh-font-code-default); }
+.c-pair-marks { display: flex; flex-basis: 100%; gap: var(--bh-space-100); margin-top: var(--bh-space-050); }
+.c-pair-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--bh-radius-050); }
+.c-pair figcaption { padding: var(--bh-space-150) var(--bh-space-200); border-top: 1px solid var(--c-line); font: var(--bh-font-body-small); }
+.c-pair figcaption b { margin-right: var(--bh-space-050); }
+.c-pair figcaption .c-from { display: block; margin-top: var(--bh-space-050); }
+@container prose (min-width: 640px) { .c-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+/* State key */
+.c-state-key { margin: var(--bh-space-150) 0 0; padding: 0; list-style: none; color: var(--c-muted); font: var(--bh-font-body-small); }
+.c-state-key li + li { margin-top: var(--bh-space-050); }
+.c-state-key b { color: var(--c-ink); font-weight: var(--bh-font-weight-semibold); }
+
+/* Emphasis */
+.c-emph { margin: 0 0 var(--bh-space-300); padding: var(--bh-space-200); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
+.c-emph-grid { display: grid; grid-template-columns: 80px repeat(3, minmax(0, 1fr)); gap: var(--bh-space-100); align-items: center; font: var(--bh-font-body-small); }
+.c-emph-fill { display: flex; align-items: center; min-height: 40px; padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-100); font: var(--bh-font-body-default); overflow-wrap: anywhere; }
+.c-emph-none { color: var(--c-muted); text-align: center; }
+.c-emph figcaption { margin-top: var(--bh-space-150); color: var(--c-muted); font: var(--bh-font-body-default); }
+.c-emph-fill { box-shadow: inset 0 0 0 1px rgb(127 127 127 / 18%); }
+.c-status .c-dot { width: 32px; height: 32px; border-radius: var(--bh-radius-050); }
+.c-pair-warn { margin-left: var(--bh-space-025); color: var(--c-ink); font-family: var(--bh-font-family-sans); }