@veluai/velu 0.2.25 → 0.2.28

package/runtime/velu-ui/base.css

@@ -1,320 +1,320 @@
-/* Fonts are loaded via <link rel="preconnect"/"stylesheet"> in template.html
-   (faster than an @import inside critical CSS — non-blocking, parallel). */
-:root {
-  --ratio: 1.25;
-  --s-6: calc(var(--s-5) / var(--ratio));
-  --s-5: calc(var(--s-4) / var(--ratio));
-  --s-4: calc(var(--s-3) / var(--ratio));
-  --s-3: calc(var(--s-2) / var(--ratio));
-  --s-2: calc(var(--s-1) / var(--ratio));
-  --s-1: calc(var(--s0) / var(--ratio));
-  --s0: 1rem;
-  --s1: calc(var(--s0) * var(--ratio));
-  --s2: calc(var(--s1) * var(--ratio));
-  --s3: calc(var(--s2) * var(--ratio));
-  --s4: calc(var(--s3) * var(--ratio));
-  --s5: calc(var(--s4) * var(--ratio));
-}
-
-/* Semantic color tokens — verbatim from Figma (1:1 names, no translation).
-   Components reference ONLY these (never raw hex), so theme switching =
-   swapping this block (zero component changes).
-   --page-bg is PROVISIONAL: Figma has no explicit page-background token yet
-   (see note to Aravind) — replace once defined. */
-:root {
-  --page-bg: #ffffff;
-
-  --border-color: #dcdcde;
-  --text-color: #000000;
-  --accent-color: #dc143c;
-  --muted-color: #7a7a7a;
-  --surface-color: #f2f3f4;
-
-  --note-bg-color: #f2f3f4;
-  --note-stroke-color: #6b7280;
-  --warning-bg-color: #fef3e2;
-  --warning-stroke-color: #d97706;
-  --info-bg-color: #e8f4fd;
-  --info-stroke-color: #3b82f6;
-  --tip-bg-color: #e8f5e9;
-  --tip-stroke-color: #16a34a;
-  --check-bg-color: #e6f9ed;
-  --check-stroke-color: #22c55e;
-  --danger-bg-color: #fde8e8;
-  --danger-stroke-color: #dc2626;
-  --callout-bg-color: #f3e8fd;
-  --callout-stroke-color: #8b5cf6;
-
-  --post-pill-color: #e8f4fd;
-  --post-pill-stroke-color: #91bbf9;
-  --post-cta-color: #3064e3;
-  --get-pill-color: #e6f9ed;
-  --get-pill-stroke-color: #22c55e;
-  --get-cta-color: #22c55e;
-  --put-pill-color: #fef3e2;
-  --put-pill-stroke-color: #d97706;
-  --put-cta-color: #d97706;
-  --delete-pill-color: #fde8e8;
-  --delete-pill-stroke-color: #dc2626;
-  --delete-cta-color: #dc2626;
-  --patch-pill-color: #f3e8fd;
-  --patch-pill-stroke-color: #8b5cf6;
-  --patch-cta-color: #8b5cf6;
-}
-:root[data-theme="dark"] {
-  --page-bg: #0D0E10;
-
-  --border-color: #262827;
-  --text-color: #eeeff1;
-  --accent-color: #dc143c;
-  --muted-color: #7a7a7a;
-  --surface-color: #323334;
-
-  --note-bg-color: #1a1a1c;
-  --note-stroke-color: #eeeff1;
-  --warning-bg-color: #2a1f0d;
-  --warning-stroke-color: #7a5a1f;
-  --info-bg-color: #0d1f2a;
-  --info-stroke-color: #1f5a7a;
-  --tip-bg-color: #0d2a1a;
-  --tip-stroke-color: #1f7a4a;
-  --check-bg-color: #0d2a1a;
-  --check-stroke-color: #1f7a4a;
-  --danger-bg-color: #2a0d0d;
-  --danger-stroke-color: #7a1f1f;
-  --callout-bg-color: #1f0d2a;
-  --callout-stroke-color: #5a1f7a;
-
-  --post-pill-color: #1e3a8a;
-  --post-pill-stroke-color: #3b82f6;
-  --post-cta-color: #2563eb;
-  --get-pill-color: #065f46;
-  --get-pill-stroke-color: #10b981;
-  --get-cta-color: #059669;
-  --put-pill-color: #78350f;
-  --put-pill-stroke-color: #f59e0b;
-  --put-cta-color: #d97706;
-  --delete-pill-color: #7f1d1d;
-  --delete-pill-stroke-color: #ef4444;
-  --delete-cta-color: #dc2626;
-  --patch-pill-color: #4c1d95;
-  --patch-pill-stroke-color: #8b5cf6;
-  --patch-cta-color: #7c3aed;
-}
-
-:root {
-  --measure: 66ch;
-  --font-sans: "Google Sans Flex", sans-serif;
-  --font-mono: "Google Sans Code", ui-monospace, SFMono-Regular, monospace;
-  --font-brand: "Outfit", var(--font-sans);
-  font-family: var(--font-sans);
-
-  /* Approx height of the docs PageHeader (used as the offset for sticky
-     sidebars / TOC so they stick BELOW the header, not behind it). */
-  --velu-header-height: 7rem;
-
-  /* Fluid font sizes — 375px → 1440px viewport */
-  --f-body:  1rem;                                            /* 16 → 16 */
-  --f-h7:    calc(var(--f-h6) / var(--ratio));                /* micro UI text — one modular step below h6 (chips, captions, kbd) */
-  --f-h6:    clamp(0.75rem,  0.188vw + 0.68rem,  0.875rem);   /* 12 → 14 (reversed: mobile 14 → desktop 12, see note) */
-  --f-h5:    1rem;                                            /* 16 → 16 */
-  --f-h4:    clamp(1.125rem, 0.235vw + 1.07rem,  1.375rem);   /* 18 → 22 */
-  --f-h3:    clamp(1.3125rem,0.423vw + 1.214rem, 1.75rem);    /* 21 → 28 */
-  --f-h2:    clamp(1.5rem,   0.704vw + 1.335rem, 2.25rem);    /* 24 → 36 */
-  --f-h1:    clamp(1.6875rem,1.972vw + 1.226rem, 3rem);       /* 27 → 48 */
-
-  /* Line-height tokens — unitless (height ÷ font-size from Figma). The
-     single source of truth for leading; components reference these, never
-     a hardcoded ratio. */
-  --lh-body: 1.75;
-  --lh-h1:   1.75;
-  --lh-h2:   1.78;
-  --lh-h3:   1.71;
-  --lh-h4:   1.82;
-  --lh-h5:   1.75;
-  --lh-h6:   1.71;
-  --lh-h7:   1.71;
-
-  /* Hairline width — single source of truth for every box border, divider
-     and rail. (Sub-pixel: crisp on hi-dpi; some 1x displays round it.) */
-  --border-width: 0.5px;
-
-  /* Icon stroke weight — single source of truth for every lucide icon. */
-  --icon-stroke: 1.5;
-
-  /* Icon size scale — em-relative so an icon next to text inherits the
-     text size automatically. `--icon-size` matches surrounding text;
-     `--icon-size-lg` is one modular step larger (for nav lists / trees
-     where the icon should slightly outweigh the label). */
-  --icon-size:    1em;
-  --icon-size-lg: calc(1em * var(--ratio));
-
-  /* Corner-radius scale, derived from --s0 (16px) — no raw literals.
-     sm 8 / md 16 / lg 32. Components pick the right step. */
-  --radius-sm: calc(var(--s0) / 2);
-  --radius-md: var(--s0);
-  --radius-lg: calc(var(--s0) * 2);
-
-  /* Font-weight scale — single source of truth so components never
-     write raw 300/400/500/600/700. Matches Google Sans Flex's
-     variable-font axis stops. */
-  --weight-light:    300;
-  --weight-normal:   400;
-  --weight-medium:   500;
-  --weight-semibold: 600;
-  --weight-bold:     700;
-}
-
-/* lucide-react adds class="lucide …" to every icon svg. This one rule
-   tokenizes stroke weight app-wide (CSS overrides the svg's stroke-width
-   attribute), so no component sets it per-icon. */
-.lucide {
-  stroke-width: var(--icon-stroke);
-}
-
-/* Prose rhythm — wraps MDX content. MDX compiles to a flat list of
-   sibling block elements (h1, p, the velu-ui components, etc.).
-   Spacing is scaled by HEADING LEVEL so the document's structure is
-   readable at a glance:
-     - default sibling pair (paragraph rhythm):  --s1
-     - before any heading (section break):        scaled by level
-     - after  a heading  (heading → first child): one step under default
-   The rules use adjacent-sibling selectors so every same-level heading
-   gets the same lead-in regardless of what came before it (sibling
-   equality), and the larger before-heading gap reads as the section
-   break in every case. The owl rule sets the default; per-heading
-   rules below override it via source order (same specificity). */
-
-/* Scroll-anchor offset for in-page links: when a TOC click lands on
-   a heading, the browser scrolls so the heading sits at the viewport
-   top — which would otherwise put it BEHIND the sticky chrome
-   (header + TocBar). `scroll-margin-block-start` tells the scroll
-   algorithm to leave that much space above the target.
-
-   --velu-scroll-offset is published by App.jsx as
-   `headerHeight + tocbarHeight + 1rem`, measured live via
-   ResizeObserver. The scroll-spy reads the SAME variable as its
-   trigger line, so scrollIntoView lands the heading exactly where
-   the spy promotes it — no magic numbers, no drift. */
-.velu-hero h1,
-.velu-prose :is(h1, h2, h3, h4, h5, h6) {
-  scroll-margin-block-start: var(--velu-scroll-offset, 5rem);
-}
-
-/* Default prose rhythm. */
-.velu-prose > * + * {
-  margin-block-start: var(--s1);
-}
-
-/* Before-heading: progressively larger gap above higher-level headings.
-   Same level → same gap → siblings read at equal intervals. */
-.velu-prose > * + h2 {
-  margin-block-start: var(--s4);
-}
-.velu-prose > * + h3 {
-  margin-block-start: var(--s3);
-}
-.velu-prose > * + h4 {
-  margin-block-start: var(--s2);
-}
-
-/* After-heading: tighter, so the heading reads as "introducing" what
-   follows rather than floating alone above a chasm. */
-.velu-prose > h1 + *,
-.velu-prose > h2 + *,
-.velu-prose > h3 + *,
-.velu-prose > h4 + *,
-.velu-prose > h5 + *,
-.velu-prose > h6 + * {
-  margin-block-start: var(--s0);
-}
-
-/* Page hero — the frontmatter (title + description) is wrapped in
-   `.velu-hero` so the title and description sit tight as a single
-   unit, and a larger break separates the hero from the prose body. */
-.velu-hero > h1 + p {
-  margin-block-start: var(--s-2);
-}
-/* hero → body is an h1 → h2 transition (level-down, not peer-to-peer),
-   so the break is one modular step LARGER than the regular section
-   break above an h2 (--s4). Keeps the scale strictly monotonic:
-   level-down break > peer break. */
-.velu-hero + .velu-prose {
-  margin-block-start: var(--s5);
-}
-
-/* Discreet thin scrollbar with a tokenised colour in every state — applied
-   GLOBALLY (the `*` selector) so every scrollable element inherits it by
-   default: the chatbot, dialogs, and any future component, with no
-   per-component opt-in. Component-specific scrollbar rules win via
-   specificity (e.g. the nav/TOC reveal-on-hover overrides below).
-   `.velu-hide-scrollbar` stays as an explicit alias for existing markup.
-
-   No transitions: Firefox doesn't honour CSS transitions on `scrollbar-color`
-   consistently, and the in-between interpolation + its auto-derived
-   hover/active colours can flash a yellow/amber accent (an OS / system accent
-   when interpolating). Hard switches avoid that. Same reason every WebKit
-   thumb pseudo-state is set explicitly — otherwise Chromium can fall back to
-   the Windows 11 system accent on hover. */
-*,
-.velu-hide-scrollbar {
-  scrollbar-width: thin;
-  /* Single colour both at rest and on hover. Firefox auto-darkens on
-     interaction, but starting from a defined light grey keeps the
-     derived shade in the same family (no yellow flash). */
-  scrollbar-color: var(--border-color) transparent;
-}
-*::-webkit-scrollbar,
-.velu-hide-scrollbar::-webkit-scrollbar {
-  inline-size: 6px;
-  block-size: 6px;
-}
-*::-webkit-scrollbar-track,
-.velu-hide-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-*::-webkit-scrollbar-thumb,
-.velu-hide-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--border-color);
-  border-radius: 999px;
-}
-*::-webkit-scrollbar-thumb:hover,
-*::-webkit-scrollbar-thumb:active,
-.velu-hide-scrollbar::-webkit-scrollbar-thumb:hover,
-.velu-hide-scrollbar::-webkit-scrollbar-thumb:active {
-  background: var(--muted-color);
-}
-
-/* Unitless line-height ratios (height ÷ font-size from Figma) */
-body {
-  font-size: var(--f-body);
-  line-height: var(--lh-body);
-  font-weight: var(--weight-normal);
-  background: var(--page-bg);
-  color: var(--text-color);
-}
-h1   { font-size: var(--f-h1);   line-height: var(--lh-h1); font-weight: var(--weight-semibold); }
-h2   { font-size: var(--f-h2);   line-height: var(--lh-h2); font-weight: var(--weight-medium); }
-h3   { font-size: var(--f-h3);   line-height: var(--lh-h3); font-weight: var(--weight-medium); }
-h4   { font-size: var(--f-h4);   line-height: var(--lh-h4); font-weight: var(--weight-normal); }
-h5   { font-size: var(--f-h5);   line-height: var(--lh-h5); font-weight: var(--weight-normal); }
-h6   { font-size: var(--f-h6);   line-height: var(--lh-h6); font-weight: var(--weight-normal); }
-
-* {
-  max-width: var(--measure);
-  box-sizing: border-box;
-}
-
-html,
-body,
-div,
-header,
-nav,
-main,
-footer,
-pre,
-code,
-span,
-button {
-  max-width: none;
-}
+/* Fonts are loaded via <link rel="preconnect"/"stylesheet"> in template.html
+   (faster than an @import inside critical CSS — non-blocking, parallel). */
+:root {
+  --ratio: 1.25;
+  --s-6: calc(var(--s-5) / var(--ratio));
+  --s-5: calc(var(--s-4) / var(--ratio));
+  --s-4: calc(var(--s-3) / var(--ratio));
+  --s-3: calc(var(--s-2) / var(--ratio));
+  --s-2: calc(var(--s-1) / var(--ratio));
+  --s-1: calc(var(--s0) / var(--ratio));
+  --s0: 1rem;
+  --s1: calc(var(--s0) * var(--ratio));
+  --s2: calc(var(--s1) * var(--ratio));
+  --s3: calc(var(--s2) * var(--ratio));
+  --s4: calc(var(--s3) * var(--ratio));
+  --s5: calc(var(--s4) * var(--ratio));
+}
+
+/* Semantic color tokens — verbatim from Figma (1:1 names, no translation).
+   Components reference ONLY these (never raw hex), so theme switching =
+   swapping this block (zero component changes).
+   --page-bg is PROVISIONAL: Figma has no explicit page-background token yet
+   (see note to Aravind) — replace once defined. */
+:root {
+  --page-bg: #ffffff;
+
+  --border-color: #dcdcde;
+  --text-color: #000000;
+  --accent-color: #dc143c;
+  --muted-color: #7a7a7a;
+  --surface-color: #f2f3f4;
+
+  --note-bg-color: #f2f3f4;
+  --note-stroke-color: #6b7280;
+  --warning-bg-color: #fef3e2;
+  --warning-stroke-color: #d97706;
+  --info-bg-color: #e8f4fd;
+  --info-stroke-color: #3b82f6;
+  --tip-bg-color: #e8f5e9;
+  --tip-stroke-color: #16a34a;
+  --check-bg-color: #e6f9ed;
+  --check-stroke-color: #22c55e;
+  --danger-bg-color: #fde8e8;
+  --danger-stroke-color: #dc2626;
+  --callout-bg-color: #f3e8fd;
+  --callout-stroke-color: #8b5cf6;
+
+  --post-pill-color: #e8f4fd;
+  --post-pill-stroke-color: #91bbf9;
+  --post-cta-color: #3064e3;
+  --get-pill-color: #e6f9ed;
+  --get-pill-stroke-color: #22c55e;
+  --get-cta-color: #22c55e;
+  --put-pill-color: #fef3e2;
+  --put-pill-stroke-color: #d97706;
+  --put-cta-color: #d97706;
+  --delete-pill-color: #fde8e8;
+  --delete-pill-stroke-color: #dc2626;
+  --delete-cta-color: #dc2626;
+  --patch-pill-color: #f3e8fd;
+  --patch-pill-stroke-color: #8b5cf6;
+  --patch-cta-color: #8b5cf6;
+}
+:root[data-theme="dark"] {
+  --page-bg: #0D0E10;
+
+  --border-color: #262827;
+  --text-color: #eeeff1;
+  --accent-color: #dc143c;
+  --muted-color: #7a7a7a;
+  --surface-color: #323334;
+
+  --note-bg-color: #1a1a1c;
+  --note-stroke-color: #eeeff1;
+  --warning-bg-color: #2a1f0d;
+  --warning-stroke-color: #7a5a1f;
+  --info-bg-color: #0d1f2a;
+  --info-stroke-color: #1f5a7a;
+  --tip-bg-color: #0d2a1a;
+  --tip-stroke-color: #1f7a4a;
+  --check-bg-color: #0d2a1a;
+  --check-stroke-color: #1f7a4a;
+  --danger-bg-color: #2a0d0d;
+  --danger-stroke-color: #7a1f1f;
+  --callout-bg-color: #1f0d2a;
+  --callout-stroke-color: #5a1f7a;
+
+  --post-pill-color: #1e3a8a;
+  --post-pill-stroke-color: #3b82f6;
+  --post-cta-color: #2563eb;
+  --get-pill-color: #065f46;
+  --get-pill-stroke-color: #10b981;
+  --get-cta-color: #059669;
+  --put-pill-color: #78350f;
+  --put-pill-stroke-color: #f59e0b;
+  --put-cta-color: #d97706;
+  --delete-pill-color: #7f1d1d;
+  --delete-pill-stroke-color: #ef4444;
+  --delete-cta-color: #dc2626;
+  --patch-pill-color: #4c1d95;
+  --patch-pill-stroke-color: #8b5cf6;
+  --patch-cta-color: #7c3aed;
+}
+
+:root {
+  --measure: 66ch;
+  --font-sans: "Google Sans Flex", sans-serif;
+  --font-mono: "Google Sans Code", ui-monospace, SFMono-Regular, monospace;
+  --font-brand: "Outfit", var(--font-sans);
+  font-family: var(--font-sans);
+
+  /* Approx height of the docs PageHeader (used as the offset for sticky
+     sidebars / TOC so they stick BELOW the header, not behind it). */
+  --velu-header-height: 7rem;
+
+  /* Fluid font sizes — 375px → 1440px viewport */
+  --f-body:  1rem;                                            /* 16 → 16 */
+  --f-h7:    calc(var(--f-h6) / var(--ratio));                /* micro UI text — one modular step below h6 (chips, captions, kbd) */
+  --f-h6:    clamp(0.75rem,  0.188vw + 0.68rem,  0.875rem);   /* 12 → 14 (reversed: mobile 14 → desktop 12, see note) */
+  --f-h5:    1rem;                                            /* 16 → 16 */
+  --f-h4:    clamp(1.125rem, 0.235vw + 1.07rem,  1.375rem);   /* 18 → 22 */
+  --f-h3:    clamp(1.3125rem,0.423vw + 1.214rem, 1.75rem);    /* 21 → 28 */
+  --f-h2:    clamp(1.5rem,   0.704vw + 1.335rem, 2.25rem);    /* 24 → 36 */
+  --f-h1:    clamp(1.6875rem,1.972vw + 1.226rem, 3rem);       /* 27 → 48 */
+
+  /* Line-height tokens — unitless (height ÷ font-size from Figma). The
+     single source of truth for leading; components reference these, never
+     a hardcoded ratio. */
+  --lh-body: 1.75;
+  --lh-h1:   1.75;
+  --lh-h2:   1.78;
+  --lh-h3:   1.71;
+  --lh-h4:   1.82;
+  --lh-h5:   1.75;
+  --lh-h6:   1.71;
+  --lh-h7:   1.71;
+
+  /* Hairline width — single source of truth for every box border, divider
+     and rail. (Sub-pixel: crisp on hi-dpi; some 1x displays round it.) */
+  --border-width: 0.5px;
+
+  /* Icon stroke weight — single source of truth for every lucide icon. */
+  --icon-stroke: 1.5;
+
+  /* Icon size scale — em-relative so an icon next to text inherits the
+     text size automatically. `--icon-size` matches surrounding text;
+     `--icon-size-lg` is one modular step larger (for nav lists / trees
+     where the icon should slightly outweigh the label). */
+  --icon-size:    1em;
+  --icon-size-lg: calc(1em * var(--ratio));
+
+  /* Corner-radius scale, derived from --s0 (16px) — no raw literals.
+     sm 8 / md 16 / lg 32. Components pick the right step. */
+  --radius-sm: calc(var(--s0) / 2);
+  --radius-md: var(--s0);
+  --radius-lg: calc(var(--s0) * 2);
+
+  /* Font-weight scale — single source of truth so components never
+     write raw 300/400/500/600/700. Matches Google Sans Flex's
+     variable-font axis stops. */
+  --weight-light:    300;
+  --weight-normal:   400;
+  --weight-medium:   500;
+  --weight-semibold: 600;
+  --weight-bold:     700;
+}
+
+/* lucide-react adds class="lucide …" to every icon svg. This one rule
+   tokenizes stroke weight app-wide (CSS overrides the svg's stroke-width
+   attribute), so no component sets it per-icon. */
+.lucide {
+  stroke-width: var(--icon-stroke);
+}
+
+/* Prose rhythm — wraps MDX content. MDX compiles to a flat list of
+   sibling block elements (h1, p, the velu-ui components, etc.).
+   Spacing is scaled by HEADING LEVEL so the document's structure is
+   readable at a glance:
+     - default sibling pair (paragraph rhythm):  --s1
+     - before any heading (section break):        scaled by level
+     - after  a heading  (heading → first child): one step under default
+   The rules use adjacent-sibling selectors so every same-level heading
+   gets the same lead-in regardless of what came before it (sibling
+   equality), and the larger before-heading gap reads as the section
+   break in every case. The owl rule sets the default; per-heading
+   rules below override it via source order (same specificity). */
+
+/* Scroll-anchor offset for in-page links: when a TOC click lands on
+   a heading, the browser scrolls so the heading sits at the viewport
+   top — which would otherwise put it BEHIND the sticky chrome
+   (header + TocBar). `scroll-margin-block-start` tells the scroll
+   algorithm to leave that much space above the target.
+
+   --velu-scroll-offset is published by App.jsx as
+   `headerHeight + tocbarHeight + 1rem`, measured live via
+   ResizeObserver. The scroll-spy reads the SAME variable as its
+   trigger line, so scrollIntoView lands the heading exactly where
+   the spy promotes it — no magic numbers, no drift. */
+.velu-hero h1,
+.velu-prose :is(h1, h2, h3, h4, h5, h6) {
+  scroll-margin-block-start: var(--velu-scroll-offset, 5rem);
+}
+
+/* Default prose rhythm. */
+.velu-prose > * + * {
+  margin-block-start: var(--s1);
+}
+
+/* Before-heading: progressively larger gap above higher-level headings.
+   Same level → same gap → siblings read at equal intervals. */
+.velu-prose > * + h2 {
+  margin-block-start: var(--s4);
+}
+.velu-prose > * + h3 {
+  margin-block-start: var(--s3);
+}
+.velu-prose > * + h4 {
+  margin-block-start: var(--s2);
+}
+
+/* After-heading: tighter, so the heading reads as "introducing" what
+   follows rather than floating alone above a chasm. */
+.velu-prose > h1 + *,
+.velu-prose > h2 + *,
+.velu-prose > h3 + *,
+.velu-prose > h4 + *,
+.velu-prose > h5 + *,
+.velu-prose > h6 + * {
+  margin-block-start: var(--s0);
+}
+
+/* Page hero — the frontmatter (title + description) is wrapped in
+   `.velu-hero` so the title and description sit tight as a single
+   unit, and a larger break separates the hero from the prose body. */
+.velu-hero > h1 + p {
+  margin-block-start: var(--s-2);
+}
+/* hero → body is an h1 → h2 transition (level-down, not peer-to-peer),
+   so the break is one modular step LARGER than the regular section
+   break above an h2 (--s4). Keeps the scale strictly monotonic:
+   level-down break > peer break. */
+.velu-hero + .velu-prose {
+  margin-block-start: var(--s5);
+}
+
+/* Discreet thin scrollbar with a tokenised colour in every state — applied
+   GLOBALLY (the `*` selector) so every scrollable element inherits it by
+   default: the chatbot, dialogs, and any future component, with no
+   per-component opt-in. Component-specific scrollbar rules win via
+   specificity (e.g. the nav/TOC reveal-on-hover overrides below).
+   `.velu-hide-scrollbar` stays as an explicit alias for existing markup.
+
+   No transitions: Firefox doesn't honour CSS transitions on `scrollbar-color`
+   consistently, and the in-between interpolation + its auto-derived
+   hover/active colours can flash a yellow/amber accent (an OS / system accent
+   when interpolating). Hard switches avoid that. Same reason every WebKit
+   thumb pseudo-state is set explicitly — otherwise Chromium can fall back to
+   the Windows 11 system accent on hover. */
+*,
+.velu-hide-scrollbar {
+  scrollbar-width: thin;
+  /* Single colour both at rest and on hover. Firefox auto-darkens on
+     interaction, but starting from a defined light grey keeps the
+     derived shade in the same family (no yellow flash). */
+  scrollbar-color: var(--border-color) transparent;
+}
+*::-webkit-scrollbar,
+.velu-hide-scrollbar::-webkit-scrollbar {
+  inline-size: 6px;
+  block-size: 6px;
+}
+*::-webkit-scrollbar-track,
+.velu-hide-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+*::-webkit-scrollbar-thumb,
+.velu-hide-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 999px;
+}
+*::-webkit-scrollbar-thumb:hover,
+*::-webkit-scrollbar-thumb:active,
+.velu-hide-scrollbar::-webkit-scrollbar-thumb:hover,
+.velu-hide-scrollbar::-webkit-scrollbar-thumb:active {
+  background: var(--muted-color);
+}
+
+/* Unitless line-height ratios (height ÷ font-size from Figma) */
+body {
+  font-size: var(--f-body);
+  line-height: var(--lh-body);
+  font-weight: var(--weight-normal);
+  background: var(--page-bg);
+  color: var(--text-color);
+}
+h1   { font-size: var(--f-h1);   line-height: var(--lh-h1); font-weight: var(--weight-semibold); }
+h2   { font-size: var(--f-h2);   line-height: var(--lh-h2); font-weight: var(--weight-medium); }
+h3   { font-size: var(--f-h3);   line-height: var(--lh-h3); font-weight: var(--weight-medium); }
+h4   { font-size: var(--f-h4);   line-height: var(--lh-h4); font-weight: var(--weight-normal); }
+h5   { font-size: var(--f-h5);   line-height: var(--lh-h5); font-weight: var(--weight-normal); }
+h6   { font-size: var(--f-h6);   line-height: var(--lh-h6); font-weight: var(--weight-normal); }
+
+* {
+  max-width: var(--measure);
+  box-sizing: border-box;
+}
+
+html,
+body,
+div,
+header,
+nav,
+main,
+footer,
+pre,
+code,
+span,
+button {
+  max-width: none;
+}