@birdycom/omniaui 0.11.0 → 0.11.1

package/dist/docs-ui.css

@@ -1,265 +1,267 @@
-/* ===================================================================
-   DOCS UI — the pieces the OmniaCSS documentation site is built from, offered as components.
-   Index: sidebar--docs · toc · topbar (+ navmenu--site) · footerbar · search · demo panel · code-window copy ·
-          btn--toggle ("Show more")
-   Every color is an --oc-* theme token or an Omnia palette token, so light and dark follow the theme.
-   =================================================================== */
-
-/* ---- Sidebar, documentation variant: .oc-sidebar.oc-sidebar--docs -------------------------------
-   Same parts as the app sidebar (menu, menu-button, menu-sub, group-label) plus .oc-sidebar-title.
-   Outlined "pill" items, always-visible sub items, no own scroll (the page shell scrolls it).        */
-.oc-sidebar--docs {
-  --oc-sidebar-width: auto;
-  --oc-sidebar-docs-active: oklch(from var(--oc-primary) l c h / 0.1);
-  inline-size: auto;
-  block-size: auto;
-  background: transparent;
-  border: 0;
-  gap: 0;
-}
-.oc-sidebar-title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; color: var(--oc-foreground); }
-.oc-sidebar--docs .oc-sidebar-group-label {
-  margin: 1rem 0 0.5rem;
-  padding: 0;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--oc-muted-foreground);
-}
-.oc-sidebar--docs .oc-sidebar-menu { gap: 6px; }
-.oc-sidebar--docs .oc-sidebar-menu-button {
-  display: block;
-  padding: 0.5rem 0.625rem;
-  border: 1px solid transparent;
-  border-radius: 8px;
-}
-.oc-sidebar--docs .oc-sidebar-menu-button:hover {
-  color: var(--oc-foreground);
-  border-color: var(--oc-border);
-  background: oklch(from var(--oc-foreground) l c h / 0.03);
-}
-.oc-sidebar--docs .oc-sidebar-menu-button[aria-current="page"],
-.oc-sidebar--docs .oc-sidebar-menu-button.is-active {
-  color: var(--oc-foreground);
-  font-weight: 500;
-  border-color: var(--oc-primary);
-  background: var(--oc-sidebar-docs-active);
-}
-.oc-sidebar--docs .oc-sidebar-menu-sub {
-  margin: 4px 0 0 0.625rem;
-  padding: 0 0 0 0.625rem;
-  gap: 4px;
-  border-inline-start: 1px dashed var(--oc-border);
-}
-.oc-sidebar--docs .oc-sidebar-menu-sub .oc-sidebar-menu-button { padding: 0.375rem 0.5rem; font-size: 0.84rem; }
-.oc-sidebar--docs details.oc-sidebar-collapsible > summary { display: flex; }
-/* Docs sidebars never switch to icon-only mode */
-.oc-sidebar--docs.oc-sidebar--collapsed { inline-size: auto; }
-
-/* ---- On this page: .oc-toc ---------------------------------------------------------------------- */
-.oc-toc { position: sticky; inset-block-start: 0; max-block-size: 100%; overflow: auto; padding-block-start: 2px; padding-inline-end: 0.5rem; }
-.oc-toc-title { margin: 1rem 0 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--oc-muted-foreground); }
-.oc-toc-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
-.oc-toc-link {
-  display: block;
-  padding: 0.375rem 0.5rem;
-  font-size: 0.875rem;
-  color: var(--oc-muted-foreground);
-  text-decoration: none;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  overflow-wrap: anywhere;
-}
-.oc-toc-link:hover { color: var(--oc-foreground); border-color: var(--oc-border); }
-.oc-toc-link:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
-.oc-toc-link[aria-current],
-.oc-toc-link.is-active { color: var(--oc-foreground); border-color: var(--oc-primary); background: oklch(from var(--oc-primary) l c h / 0.1); }
-/* Scroll-spy without JavaScript: the link of the heading you are reading is highlighted (native :target-current). */
-.oc-toc-list { scroll-target-group: auto; }
-.oc-toc-link:target-current { color: var(--oc-foreground); border-color: var(--oc-primary); background: oklch(from var(--oc-primary) l c h / 0.1); }
-.oc-toc-item--sub { margin-inline-start: 0.75rem; }
-.oc-toc-item--sub .oc-toc-link { font-size: 0.8125rem; }
-
-/* ---- Site header: .oc-topbar (+ .oc-navmenu--site) ----------------------------------------------
-   Brand · navigation · actions. Tune per site with --ocm-header-height, --ocm-header-bg, --ocm-header-border. */
-.oc-topbar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  box-sizing: border-box;
-  min-block-size: var(--ocm-header-height, 3.75rem);
-  flex-wrap: wrap;
-  padding-inline: clamp(14px, 2vw, 28px);
-  color: var(--oc-foreground);
-  background: var(--ocm-header-bg, oklch(from var(--oc-background) l c h / 0.78));
-  border-block-end: 1px solid var(--ocm-header-border, var(--oc-border));
-  backdrop-filter: blur(6px);
-}
-.oc-topbar--fixed { position: fixed; inset: 0 0 auto 0; z-index: 1100; }
-.oc-topbar-brand { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; color: inherit; text-decoration: none; white-space: nowrap; }
-.oc-topbar-nav { display: block; }
-.oc-topbar-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; margin: 0; }
-
-/* Pill style menu (site navigation) */
-.oc-navmenu--site { gap: 8px; }
-.oc-navmenu--site .oc-navmenu-link {
-  gap: 4px;
-  padding: 0.5rem 0.75rem;
-  font-weight: 400;
-  border: 1px solid var(--oc-border);
-  border-radius: 10px;
-  background: oklch(from var(--oc-foreground) l c h / 0.03);
-}
-.oc-navmenu--site .oc-navmenu-link:hover,
-.oc-navmenu--site .oc-navmenu-link[aria-current="page"] {
-  color: var(--oc-foreground);
-  border-color: var(--oc-primary);
-  background: oklch(from var(--oc-foreground) l c h / 0.03);
-}
-.oc-navmenu-icon { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; }
-
-/* CSS-only mobile menu: <input type="checkbox" class="oc-topbar-toggle"> + <label class="oc-topbar-burger"> */
-.oc-topbar-toggle { position: absolute; opacity: 0; pointer-events: none; }
-.oc-topbar-burger {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  inline-size: 2.25rem;
-  block-size: 2.25rem;
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius);
-  cursor: pointer;
-  color: var(--oc-foreground);
-}
-.oc-topbar-burger:hover { background: var(--oc-accent); }
-.oc-topbar-toggle:focus-visible + .oc-topbar-burger { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
-@media (max-width: 760px) {
-  .oc-topbar { padding-block: 8px; }
-  .oc-topbar--collapsible .oc-topbar-burger { display: inline-flex; }
-  .oc-topbar--collapsible .oc-topbar-nav { display: none; order: 3; inline-size: 100%; }
-  .oc-topbar--collapsible:has(.oc-topbar-toggle:checked) .oc-topbar-nav { display: block; }
-}
-
-/* ---- Site footer bar: .oc-footerbar ------------------------------------------------------------- */
-.oc-footerbar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25em;
-  box-sizing: border-box;
-  block-size: var(--ocm-footer-height, 2.25rem);
-  padding-inline: clamp(14px, 2vw, 28px);
-  font-size: 0.82rem;
-  text-align: center;
-  color: var(--oc-muted-foreground);
-  background: var(--ocm-footer-bg, oklch(from var(--oc-background) l c h / 0.9));
-  border-block-start: 1px solid var(--ocm-header-border, var(--oc-border));
-  backdrop-filter: blur(6px);
-}
-.oc-footerbar a { color: var(--oc-primary); }
-.oc-footerbar--fixed { position: fixed; inset: auto 0 0 0; z-index: 1000; }
-
-/* ---- Search field: .oc-search ------------------------------------------------------------------- */
-.oc-search {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  inline-size: 100%;
-  max-inline-size: 20rem;
-  padding-inline: 0.625rem;
-  color: var(--oc-muted-foreground);
-  background: var(--oc-background);
-  border: 1px solid var(--oc-border-strong);
-  border-radius: var(--oc-radius);
-}
-.oc-search:focus-within { border-color: var(--oc-ring); box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent); }
-.oc-search-icon { inline-size: 1rem; block-size: 1rem; flex-shrink: 0; }
-.oc-search-input { flex: 1; min-inline-size: 0; padding-block: 0.5rem; font: inherit; font-size: 0.875rem; color: var(--oc-foreground); background: none; border: 0; outline: 0; }
-.oc-search-input::placeholder { color: var(--oc-muted-foreground); }
-.oc-search-input::-webkit-search-cancel-button { cursor: pointer; }
-.oc-search-hint {
-  padding: 0.1rem 0.4rem;
-  font: 0.72rem var(--oc-font-mono, ui-monospace, monospace);
-  color: var(--oc-muted-foreground);
-  border: 1px solid var(--oc-border);
-  border-radius: 4px;
-}
-.oc-search:focus-within .oc-search-hint { display: none; }
-
-/* ---- Demo panel: .oc-demo -----------------------------------------------------------------------
-   "Demo" title -> live preview -> "Code" title -> code block. Variant --tabs shows preview OR code (radio tabs, CSS only). */
-.oc-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin: 12px 0 20px;
-  padding: clamp(12px, 2vw, 20px);
-  border: 1px solid var(--oc-border);
-  border-radius: 12px;
-  background: color-mix(in oklch, light-dark(var(--color-white-50), var(--color-shallowblue-80)) 70%, transparent);
-}
-.oc-demo > .oc-preview__title { margin: 4px 0 0; }
-.oc-demo__preview {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  align-items: flex-start;
-  padding: clamp(12px, 2vw, 20px);
-  border: 1px solid var(--oc-border);
-  border-radius: 10px;
-  background: var(--oc-background);
-  overflow-x: auto;
-}
-.oc-demo__preview > * { min-width: 0; }
-.oc-demo__preview--tall { min-block-size: 20rem; align-items: flex-start; overflow: visible; }
-.oc-demo__preview--center { justify-content: center; align-items: center; }
-.oc-demo .oc-code-block { margin: 0; }
-
-.oc-demo__tablist { display: flex; gap: 4px; padding: 3px; inline-size: fit-content; border-radius: calc(var(--oc-radius) + 2px); background: var(--oc-muted); }
-.oc-demo__tab { position: relative; padding: 0.3rem 0.9rem; font-size: 0.8125rem; font-weight: 500; color: var(--oc-muted-foreground); border-radius: var(--oc-radius); cursor: pointer; }
-.oc-demo__tab input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
-.oc-demo__tab:has(input:checked) { color: var(--oc-foreground); background: var(--oc-background); box-shadow: 0 1px 2px oklch(from var(--oc-foreground) l c h / 0.15); }
-.oc-demo__tab:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
-.oc-demo--tabs > .oc-demo__code { display: none; }
-.oc-demo--tabs:has(.oc-demo__tab:nth-child(2) input:checked) > .oc-demo__preview { display: none; }
-.oc-demo--tabs:has(.oc-demo__tab:nth-child(2) input:checked) > .oc-demo__code { display: block; }
-
-/* ---- Code window + copy button ------------------------------------------------------------------- */
-.oc-code-copy {
-  position: absolute;
-  inset-block-start: 0.5rem;
-  inset-inline-end: 0.5rem;
-  padding: 0.25rem 0.625rem;
-  font: inherit;
-  font-size: 0.75rem;
-  color: var(--oc-muted-foreground);
-  background: var(--oc-card);
-  border: 1px solid var(--oc-border);
-  border-radius: calc(var(--oc-radius) - 2px);
-  cursor: pointer;
-  transition: color var(--oc-transition-fast), border-color var(--oc-transition-fast);
-}
-.oc-code-copy:hover { color: var(--oc-foreground); border-color: var(--oc-border-strong); }
-.oc-code-copy:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
-.oc-code-copy.is-copied { color: var(--oc-success); border-color: currentColor; }
-.oc-code-window:has(.oc-code-copy) { position: relative; }
-.oc-code-window__bar .oc-code-copy { position: static; margin-inline-start: auto; }
-
-/* ---- Toggle button ("Show more / Show less"): .oc-btn--toggle ------------------------------------
-   <label class="oc-btn oc-btn--outline oc-btn--toggle"><input type="checkbox"> <span class="oc-btn-toggle__off">…</span> <span class="oc-btn-toggle__on">…</span></label>
-   Reveal content in the same container with .oc-showmore / .oc-showmore__extra.                          */
-.oc-btn--toggle { position: relative; }
-.oc-btn--toggle > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
-.oc-btn--toggle:has(> input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
-.oc-btn--toggle .oc-btn-toggle__on,
-.oc-btn--toggle:has(> input:checked) .oc-btn-toggle__off { display: none; }
-.oc-btn--toggle:has(> input:checked) .oc-btn-toggle__on { display: inline; }
-.oc-showmore__extra { display: none; }
-.oc-showmore:has(.oc-btn--toggle > input:checked) .oc-showmore__extra { display: revert; }
-
-/* Wide docs components take the full width of a demo preview */
-.oc-demo__preview > :is(.oc-topbar, .oc-footerbar, .oc-demo, .oc-code-window, .oc-expandable-table, .oc-showmore) { flex: 1 1 100%; }
-/* Marketing pieces that should span the preview stage (timeline, facts, project and price cards). */
-.oc-demo__preview > :is(.oc-timeline, .oc-fact-list, .oc-project-card, .oc-price-card) { inline-size: 100%; }
+/* ===================================================================
+   DOCS UI — the pieces the OmniaCSS documentation site is built from, offered as components.
+   Index: sidebar--docs · toc · topbar (+ navmenu--site) · footerbar · search · demo panel · code-window copy ·
+          btn--toggle ("Show more")
+   Every color is an --oc-* theme token or an Omnia palette token, so light and dark follow the theme.
+   =================================================================== */
+
+/* ---- Sidebar, documentation variant: .oc-sidebar.oc-sidebar--docs -------------------------------
+   Same parts as the app sidebar (menu, menu-button, menu-sub, group-label) plus .oc-sidebar-title.
+   Outlined "pill" items, always-visible sub items, no own scroll (the page shell scrolls it).        */
+.oc-sidebar--docs {
+  --oc-sidebar-width: auto;
+  --oc-sidebar-docs-active: oklch(from var(--oc-primary) l c h / 0.1);
+  inline-size: auto;
+  block-size: auto;
+  background: transparent;
+  border: 0;
+  gap: 0;
+}
+.oc-sidebar-title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; color: var(--oc-foreground); }
+.oc-sidebar--docs .oc-sidebar-group-label {
+  margin: 1rem 0 0.5rem;
+  padding: 0;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--oc-muted-foreground);
+}
+.oc-sidebar--docs .oc-sidebar-menu { gap: 6px; }
+.oc-sidebar--docs .oc-sidebar-menu-button {
+  display: block;
+  padding: 0.5rem 0.625rem;
+  border: 1px solid transparent;
+  border-radius: 8px;
+}
+.oc-sidebar--docs .oc-sidebar-menu-button:hover {
+  color: var(--oc-foreground);
+  border-color: var(--oc-border);
+  background: oklch(from var(--oc-foreground) l c h / 0.03);
+}
+.oc-sidebar--docs .oc-sidebar-menu-button[aria-current="page"],
+.oc-sidebar--docs .oc-sidebar-menu-button.is-active {
+  color: var(--oc-foreground);
+  font-weight: 500;
+  border-color: var(--oc-primary);
+  background: var(--oc-sidebar-docs-active);
+}
+.oc-sidebar--docs .oc-sidebar-menu-sub {
+  margin: 4px 0 0 0.625rem;
+  padding: 0 0 0 0.625rem;
+  gap: 4px;
+  border-inline-start: 1px dashed var(--oc-border);
+}
+.oc-sidebar--docs .oc-sidebar-menu-sub .oc-sidebar-menu-button { padding: 0.375rem 0.5rem; font-size: 0.84rem; }
+.oc-sidebar--docs details.oc-sidebar-collapsible > summary { display: flex; }
+/* Docs sidebars never switch to icon-only mode */
+.oc-sidebar--docs.oc-sidebar--collapsed { inline-size: auto; }
+
+/* ---- On this page: .oc-toc ---------------------------------------------------------------------- */
+.oc-toc { position: sticky; inset-block-start: 0; max-block-size: 100%; overflow: auto; padding-block-start: 2px; padding-inline-end: 0.5rem; }
+.oc-toc-title { margin: 1rem 0 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--oc-muted-foreground); }
+.oc-toc-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.oc-toc-link {
+  display: block;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  color: var(--oc-muted-foreground);
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  overflow-wrap: anywhere;
+}
+.oc-toc-link:hover { color: var(--oc-foreground); border-color: var(--oc-border); }
+.oc-toc-link:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-toc-link[aria-current],
+.oc-toc-link.is-active { color: var(--oc-foreground); border-color: var(--oc-primary); background: oklch(from var(--oc-primary) l c h / 0.1); }
+/* Scroll-spy without JavaScript: the link of the heading you are reading is highlighted (native :target-current). */
+.oc-toc-list { scroll-target-group: auto; }
+.oc-toc-link:target-current { color: var(--oc-foreground); border-color: var(--oc-primary); background: oklch(from var(--oc-primary) l c h / 0.1); }
+.oc-toc-item--sub { margin-inline-start: 0.75rem; }
+.oc-toc-item--sub .oc-toc-link { font-size: 0.8125rem; }
+
+/* ---- Site header: .oc-topbar (+ .oc-navmenu--site) ----------------------------------------------
+   Brand · navigation · actions. Tune per site with --ocm-header-height, --ocm-header-bg, --ocm-header-border. */
+.oc-topbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  box-sizing: border-box;
+  min-block-size: var(--ocm-header-height, 3.75rem);
+  flex-wrap: wrap;
+  padding-inline: clamp(14px, 2vw, 28px);
+  color: var(--oc-foreground);
+  background: var(--ocm-header-bg, oklch(from var(--oc-background) l c h / 0.78));
+  border-block-end: 1px solid var(--ocm-header-border, var(--oc-border));
+  backdrop-filter: blur(6px);
+}
+.oc-topbar--fixed { position: fixed; inset: 0 0 auto 0; z-index: 1100; }
+.oc-topbar-brand { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; color: inherit; text-decoration: none; white-space: nowrap; }
+.oc-topbar-nav { display: block; }
+.oc-topbar-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; margin: 0; }
+
+/* Pill style menu (site navigation) */
+.oc-navmenu--site { gap: 8px; }
+.oc-navmenu--site .oc-navmenu-link {
+  gap: 4px;
+  padding: 0.5rem 0.75rem;
+  font-weight: 400;
+  border: 1px solid var(--oc-border);
+  border-radius: 10px;
+  background: oklch(from var(--oc-foreground) l c h / 0.03);
+}
+.oc-navmenu--site .oc-navmenu-link:hover,
+.oc-navmenu--site .oc-navmenu-link[aria-current="page"] {
+  color: var(--oc-foreground);
+  border-color: var(--oc-primary);
+  background: oklch(from var(--oc-foreground) l c h / 0.03);
+}
+.oc-navmenu-icon { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; }
+
+/* CSS-only mobile menu: <input type="checkbox" class="oc-topbar-toggle"> + <label class="oc-topbar-burger"> */
+.oc-topbar-toggle { position: absolute; opacity: 0; pointer-events: none; }
+.oc-topbar-burger {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  cursor: pointer;
+  color: var(--oc-foreground);
+}
+.oc-topbar-burger:hover { background: var(--oc-accent); }
+.oc-topbar-toggle:focus-visible + .oc-topbar-burger { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+@media (max-width: 760px) {
+  .oc-topbar { padding-block: 8px; }
+  .oc-topbar--collapsible .oc-topbar-burger { display: inline-flex; }
+  .oc-topbar--collapsible .oc-topbar-nav { display: none; order: 3; inline-size: 100%; }
+  .oc-topbar--collapsible:has(.oc-topbar-toggle:checked) .oc-topbar-nav { display: block; }
+}
+
+/* ---- Site footer bar: .oc-footerbar ------------------------------------------------------------- */
+.oc-footerbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25em;
+  box-sizing: border-box;
+  block-size: var(--ocm-footer-height, 2.25rem);
+  padding-inline: clamp(14px, 2vw, 28px);
+  font-size: 0.82rem;
+  text-align: center;
+  color: var(--oc-muted-foreground);
+  background: var(--ocm-footer-bg, oklch(from var(--oc-background) l c h / 0.9));
+  border-block-start: 1px solid var(--ocm-header-border, var(--oc-border));
+  backdrop-filter: blur(6px);
+}
+.oc-footerbar a { color: var(--oc-primary); }
+.oc-footerbar--fixed { position: fixed; inset: auto 0 0 0; z-index: 1000; }
+
+/* ---- Search field: .oc-search ------------------------------------------------------------------- */
+.oc-search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  inline-size: 100%;
+  max-inline-size: 20rem;
+  padding-inline: 0.625rem;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-background);
+  border: 1px solid var(--oc-border-strong);
+  border-radius: var(--oc-radius);
+}
+.oc-search:focus-within { border-color: var(--oc-ring); box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent); }
+.oc-search-icon { inline-size: 1rem; block-size: 1rem; flex-shrink: 0; }
+.oc-search-input { flex: 1; min-inline-size: 0; padding-block: 0.5rem; font: inherit; font-size: 0.875rem; color: var(--oc-foreground); background: none; border: 0; outline: 0; }
+.oc-search-input::placeholder { color: var(--oc-muted-foreground); }
+.oc-search-input::-webkit-search-cancel-button { cursor: pointer; }
+.oc-search-hint {
+  padding: 0.1rem 0.4rem;
+  font: 0.72rem var(--oc-font-mono, ui-monospace, monospace);
+  color: var(--oc-muted-foreground);
+  border: 1px solid var(--oc-border);
+  border-radius: 4px;
+}
+.oc-search:focus-within .oc-search-hint { display: none; }
+
+/* ---- Demo panel: .oc-demo -----------------------------------------------------------------------
+   "Demo" title -> live preview -> "Code" title -> code block. Variant --tabs shows preview OR code (radio tabs, CSS only). */
+.oc-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 12px 0 20px;
+  padding: clamp(12px, 2vw, 20px);
+  border: 1px solid var(--oc-border);
+  border-radius: 12px;
+  background: color-mix(in oklch, light-dark(var(--color-white-50), var(--color-shallowblue-80)) 70%, transparent);
+}
+.oc-demo > .oc-preview__title { margin: 4px 0 0; }
+.oc-demo__preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: flex-start;
+  padding: clamp(12px, 2vw, 20px);
+  border: 1px solid var(--oc-border);
+  border-radius: 10px;
+  background: var(--oc-background);
+  overflow-x: auto;
+}
+.oc-demo__preview > * { min-width: 0; }
+.oc-demo__preview--tall { min-block-size: 20rem; align-items: flex-start; overflow: visible; }
+.oc-demo__preview--center { justify-content: center; align-items: center; }
+.oc-demo .oc-code-block { margin: 0; }
+
+.oc-demo__tablist { display: flex; gap: 4px; padding: 3px; inline-size: fit-content; border-radius: calc(var(--oc-radius) + 2px); background: var(--oc-muted); }
+.oc-demo__tab { position: relative; padding: 0.3rem 0.9rem; font-size: 0.8125rem; font-weight: 500; color: var(--oc-muted-foreground); border-radius: var(--oc-radius); cursor: pointer; }
+.oc-demo__tab input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
+.oc-demo__tab:has(input:checked) { color: var(--oc-foreground); background: var(--oc-background); box-shadow: 0 1px 2px oklch(from var(--oc-foreground) l c h / 0.15); }
+.oc-demo__tab:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-demo--tabs > .oc-demo__code { display: none; }
+.oc-demo--tabs:has(.oc-demo__tab:nth-child(2) input:checked) > .oc-demo__preview { display: none; }
+.oc-demo--tabs:has(.oc-demo__tab:nth-child(2) input:checked) > .oc-demo__code { display: block; }
+
+/* ---- Code window + copy button ------------------------------------------------------------------- */
+.oc-code-copy {
+  position: absolute;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+  padding: 0.25rem 0.625rem;
+  font: inherit;
+  font-size: 0.75rem;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+  transition: color var(--oc-transition-fast), border-color var(--oc-transition-fast);
+}
+.oc-code-copy:hover { color: var(--oc-foreground); border-color: var(--oc-border-strong); }
+.oc-code-copy:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-code-copy.is-copied { color: var(--oc-success); border-color: currentColor; }
+.oc-code-window:has(.oc-code-copy) { position: relative; }
+.oc-code-window__bar .oc-code-copy { position: static; margin-inline-start: auto; }
+
+/* ---- Toggle button ("Show more / Show less"): .oc-btn--toggle ------------------------------------
+   <label class="oc-btn oc-btn--outline oc-btn--toggle"><input type="checkbox"> <span class="oc-btn-toggle__off">…</span> <span class="oc-btn-toggle__on">…</span></label>
+   Reveal content in the same container with .oc-showmore / .oc-showmore__extra.                          */
+.oc-btn--toggle { position: relative; }
+.oc-btn--toggle > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
+.oc-btn--toggle:has(> input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-btn--toggle .oc-btn-toggle__on,
+.oc-btn--toggle:has(> input:checked) .oc-btn-toggle__off { display: none; }
+.oc-btn--toggle:has(> input:checked) .oc-btn-toggle__on { display: inline; }
+.oc-showmore__extra { display: none; }
+.oc-showmore:has(.oc-btn--toggle > input:checked) .oc-showmore__extra { display: revert; }
+
+/* Wide docs components take the full width of a demo preview */
+.oc-demo__preview > :is(.oc-topbar, .oc-footerbar, .oc-demo, .oc-code-window, .oc-expandable-table, .oc-showmore) { flex: 1 1 100%; }
+/* Marketing pieces that should span the preview stage (timeline, facts, project and price cards). */
+.oc-demo__preview > :is(.oc-timeline, .oc-fact-list, .oc-project-card) { inline-size: 100%; }
+/* A single price card keeps a card width; in a grid it fills its column. */
+.oc-demo__preview > .oc-price-card { inline-size: min(100%, 24rem); }