@birdycom/omniaui 0.12.5 → 0.13.0

package/dist/components.css

@@ -1,4 +1,4 @@
-/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.5. Do not edit. */
+/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.13.0. Do not edit. */
 /* Semantic theme tokens: every color is light-dark() of an Omnia palette token (oc-colors.css). */
 /* Same source as the desktop export: npx omniacss tokens --format json|dtcg|python */
 :root {
@@ -14,6 +14,7 @@
   --oc-foreground: light-dark(var(--color-duskblue-60), var(--color-frostblue-10));
   --oc-muted: light-dark(var(--color-frostblue-60), var(--color-shallowblue-50));
   --oc-muted-foreground: light-dark(var(--color-stormblue-40), var(--color-mistblue-70));
+  --oc-subtle-foreground: light-dark(var(--color-stormblue-10), var(--color-mistblue-95));
   --oc-card: light-dark(var(--color-white-50), var(--color-shallowblue-70));
   --oc-popover: light-dark(var(--color-white-50), var(--color-shallowblue-60));
   --oc-popover-foreground: var(--oc-foreground);
@@ -58,6 +59,7 @@
   --oc-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
   --oc-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Cantarell, "Helvetica Neue", sans-serif;
   --oc-font-mono: "Cascadia Code", "JetBrains Mono", Consolas, ui-monospace, monospace;
+  --oc-font-display: system-ui, -apple-system, "Segoe UI", Roboto, Cantarell, "Helvetica Neue", sans-serif;
 
   /* Shadows (x y blur spread; color + alpha per mode in --oc-shadow-<name>-color) */
   --oc-shadow-sm-color: light-dark(oklch(from var(--color-stormblue-50) l c h / 0.08), oklch(from var(--color-black-50) l c h / 0.4));
@@ -346,7 +348,8 @@ flex-direction: column;
   justify-content: center;
   gap: 8px;
   font-family: inherit;
-  font-weight: 500;
+  /* --oc-btn-weight: a theme can make every button bolder (600). */
+  font-weight: var(--oc-btn-weight, 500);
   font-size: 0.875rem;
   line-height: 1.25rem;
   padding: 0.5rem 1rem;
@@ -481,19 +484,68 @@ flex-direction: column;
 }
 
 .oc-btn--lg {
-  font-size: 1rem;
-  padding: 0.625rem 1.5rem;
+  font-size: var(--oc-btn-lg-size, 1rem);
+  padding: var(--oc-btn-lg-padding, 0.625rem 1.5rem);
   border-radius: calc(var(--oc-radius) + 2px);
 }
 
+/* Square, exactly as tall as a text button of the same size, so both line up in a toolbar. */
 .oc-btn--icon {
-  padding: 0.5rem;
-  aspect-ratio: 1;
+  --oc-btn-square: calc(2.25rem + 2px);
+  padding: 0;
+  inline-size: var(--oc-btn-square);
+  block-size: var(--oc-btn-square);
+  flex-shrink: 0;
+}
+
+.oc-btn--icon.oc-btn--xs { --oc-btn-square: calc(1.75rem + 2px); }
+.oc-btn--icon.oc-btn--sm { --oc-btn-square: calc(2rem + 2px); }
+.oc-btn--icon.oc-btn--lg { --oc-btn-square: calc(2.5rem + 2px); }
+
+/* Webicons in a button: <iconify-icon> before (or after) the label, the same size as an inline SVG. */
+.oc-btn > iconify-icon { font-size: 1.15em; flex-shrink: 0; }
+
+/* Soft — tinted background in a tone, for row actions (edit, view, delete …) and quiet secondary actions.
+   --soft-primary | --soft-success | --soft-warning | --soft-destructive | --soft-info */
+.oc-btn[class*="oc-btn--soft-"] {
+  background: light-dark(oklch(from var(--oc-btn-tone) l c h / 0.12), oklch(from var(--oc-btn-tone) l c h / 0.22));
+  color: var(--oc-btn-tone);
+  border-color: transparent;
+}
+.oc-btn[class*="oc-btn--soft-"]:hover {
+  background: light-dark(oklch(from var(--oc-btn-tone) l c h / 0.2), oklch(from var(--oc-btn-tone) l c h / 0.32));
+  opacity: 1;
+}
+.oc-btn--soft-primary { --oc-btn-tone: var(--oc-primary); }
+.oc-btn--soft-success { --oc-btn-tone: var(--oc-success); }
+.oc-btn--soft-warning { --oc-btn-tone: var(--oc-warning); }
+.oc-btn--soft-destructive { --oc-btn-tone: var(--oc-destructive); }
+.oc-btn--soft-info { --oc-btn-tone: var(--oc-info, light-dark(var(--color-deepskyblue-70), var(--color-skyblue-50))); }
+
+/* Plain — only the icon: no surface, no padding; muted until hovered (menus, toolbars, inline actions). */
+.oc-btn--plain {
+  padding: 0;
+  background: transparent;
+  border-color: transparent;
+  color: var(--oc-muted-foreground);
 }
+.oc-btn--plain:hover,
+.oc-btn--plain[aria-expanded="true"] { color: var(--oc-primary); opacity: 1; }
 
-.oc-btn--icon.oc-btn--xs { padding: 0.25rem; }
-.oc-btn--icon.oc-btn--sm { padding: 0.375rem; }
-.oc-btn--icon.oc-btn--lg { padding: 0.625rem; }
+/* Loading — aria-busy="true": a spinner in front of the label (it replaces a leading icon); not clickable. */
+.oc-btn[aria-busy="true"] { pointer-events: none; }
+.oc-btn[aria-busy="true"]::before {
+  content: "";
+  inline-size: 1em;
+  block-size: 1em;
+  flex-shrink: 0;
+  border: 2px solid currentColor;
+  border-inline-end-color: transparent;
+  border-radius: 50%;
+  animation: oc-btn-spin 0.7s linear infinite;
+}
+.oc-btn[aria-busy="true"] > :is(svg, iconify-icon):first-child { display: none; }
+@keyframes oc-btn-spin { to { rotate: 360deg; } }
 
 /* Button group */
 .oc-btn-group {
@@ -661,8 +713,10 @@ flex-direction: column;
 }
 
 .oc-field-error {
+  margin: 0;
   font-size: 0.8rem;
-  color: var(--oc-destructive);
+  /* In dark mode lifted to at least OKLCH L 0.78, so the message stays readable on a dark card. */
+  color: light-dark(var(--oc-destructive), oklch(from var(--oc-destructive) max(l, 0.78) c h));
 }
 
 /* Field group — wraps multiple fields with consistent spacing */
@@ -675,17 +729,23 @@ flex-direction: column;
   grid-template-columns: 1fr 1fr;
 }
 
-/* Text input */
+/* Narrow screens: the fields of a row stack. */
+@media (max-width: 560px) {
+  .oc-field-group--row { grid-template-columns: 1fr; }
+}
+
+/* Text input. A theme or a form variant (.oc-form--filled) can set the field tokens: --oc-input-bg, --oc-input-border,
+   --oc-input-padding, --oc-input-radius, --oc-input-size, --oc-ring-width and --oc-ring-alpha (focus ring). */
 .oc-input {
   display: block;
   width: 100%;
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: var(--oc-input-size, 0.875rem);
   line-height: 1.5;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--oc-input);
-  border-radius: var(--oc-radius);
-  background: transparent;
+  padding: var(--oc-input-padding, 0.5rem 0.75rem);
+  border: 1px solid var(--oc-input-border, var(--oc-input));
+  border-radius: var(--oc-input-radius, var(--oc-radius));
+  background: var(--oc-input-bg, transparent);
   color: var(--oc-foreground);
   transition: border-color var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
   outline: none;
@@ -697,7 +757,7 @@ flex-direction: column;
 
 .oc-input:focus {
   border-color: var(--oc-ring);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
+  box-shadow: 0 0 0 var(--oc-ring-width, 2px) color-mix(in srgb, var(--oc-ring) var(--oc-ring-alpha, 25%), transparent);
 }
 
 .oc-input:disabled {
@@ -713,12 +773,13 @@ flex-direction: column;
 
 .oc-input[aria-invalid="true"]:focus,
 .oc-input--error:focus {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-destructive) 25%, transparent);
+  box-shadow: 0 0 0 var(--oc-ring-width, 2px) color-mix(in srgb, var(--oc-destructive) var(--oc-ring-alpha, 25%), transparent);
 }
 
 /* Textarea — same base as input */
-textarea.oc-input {
-  min-height: 80px;
+textarea.oc-input,
+.oc-textarea {
+  min-height: var(--oc-textarea-min, 80px);
   resize: vertical;
 }
 
@@ -762,12 +823,13 @@ textarea.oc-input {
   display: block;
   width: 100%;
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: var(--oc-input-size, 0.875rem);
   line-height: 1.5;
-  padding: 0.5rem 2rem 0.5rem 0.75rem;
-  border: 1px solid var(--oc-input);
-  border-radius: var(--oc-radius);
-  background: transparent;
+  padding: var(--oc-input-padding, 0.5rem 0.75rem);
+  padding-inline-end: 2rem;
+  border: 1px solid var(--oc-input-border, var(--oc-input));
+  border-radius: var(--oc-input-radius, var(--oc-radius));
+  background-color: var(--oc-input-bg, transparent);
   color: var(--oc-foreground);
   appearance: none;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
@@ -781,8 +843,9 @@ textarea.oc-input {
 
 .oc-select:focus {
   border-color: var(--oc-ring);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
+  box-shadow: 0 0 0 var(--oc-ring-width, 2px) color-mix(in srgb, var(--oc-ring) var(--oc-ring-alpha, 25%), transparent);
 }
+.oc-select[aria-invalid="true"] { border-color: var(--oc-destructive); }
 
 /* Select option dark theme — prevents white background in dropdowns */
 .oc-select option {
@@ -1550,7 +1613,7 @@ textarea.oc-input {
   border: none;
   height: 1px;
   background: var(--oc-border);
-  margin: 16px 0;
+  margin: var(--oc-separator-space, 16px) 0;
 }
 
 .oc-separator--vertical {
@@ -1633,6 +1696,8 @@ textarea.oc-input {
 /* Vertical tabs */
 .oc-tab-list--vertical {
   flex-direction: column;
+  /* Every tab as wide as the list, so the active line on the right stays on one vertical line. */
+  align-items: stretch;
   border-bottom: none;
   border-right: 1px solid var(--oc-border);
 }
@@ -1645,7 +1710,9 @@ textarea.oc-input {
   text-align: left;
 }
 
-.oc-tab-list--vertical .oc-tab-trigger.is-active {
+.oc-tab-list--vertical .oc-tab-trigger.is-active,
+.oc-tab-list--vertical .oc-tab-trigger[aria-selected="true"] {
+  border-bottom-color: transparent;
   border-right-color: var(--oc-foreground);
 }
 
@@ -1848,6 +1915,12 @@ textarea.oc-input {
   border-radius: calc(var(--oc-radius) + 2px);
 }
 .oc-table-wrap > .oc-table { min-inline-size: 32rem; }
+/* The rounded frame draws the outer border; the cells keep only the inner lines, so nothing is cut at the corners. */
+.oc-table-wrap:has(> .oc-table) { border: 1px solid var(--oc-border); }
+.oc-table-wrap > .oc-table :is(th, td):first-child { border-inline-start: 0; }
+.oc-table-wrap > .oc-table :is(th, td):last-child { border-inline-end: 0; }
+.oc-table-wrap > .oc-table > :first-child > tr:first-child > * { border-block-start: 0; }
+.oc-table-wrap > .oc-table > :last-child > tr:last-child > * { border-block-end: 0; }
 
 /* ===================================================================
    Shared docs utility table styles (dark theme)
@@ -1984,6 +2057,42 @@ a.oc-breadcrumb-item:hover {
   font-weight: 500;
 }
 
+/* Icons: a webicon or SVG before the label of any item (the link or the item itself). */
+.oc-breadcrumb-item,
+.oc-breadcrumb-item a { gap: 0.375rem; }
+.oc-breadcrumb-item a { display: inline-flex; align-items: center; }
+.oc-breadcrumb-item :is(svg, iconify-icon) { font-size: 1.1em; inline-size: 1.1em; block-size: 1.1em; flex-shrink: 0; }
+
+/* --chevron: a › chevron between the items instead of "/". */
+.oc-breadcrumb--chevron .oc-breadcrumb-item + .oc-breadcrumb-item::before {
+  content: "";
+  inline-size: 1em;
+  block-size: 1em;
+  margin: 0 0.25rem;
+  background: currentColor;
+  color: var(--oc-muted-foreground);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+/* Collapsed middle of a long trail: a "…" button (opens a menu with the hidden levels). */
+.oc-breadcrumb-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75rem;
+  block-size: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--oc-radius) - 2px);
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  font: inherit;
+  cursor: pointer;
+}
+.oc-breadcrumb-ellipsis:hover { background: var(--oc-accent); color: var(--oc-foreground); }
+.oc-breadcrumb-ellipsis:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
 /* ===================================================================
    PROGRESS BAR
    =================================================================== */
@@ -3670,6 +3779,9 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
   background: var(--oc-gradient-brand);
   -webkit-background-clip: text;
   background-clip: text;
+  /* The gradient only paints the box: keep italic or tight last letters inside it without moving the text. */
+  padding-inline-end: 0.08em;
+  margin-inline-end: -0.08em;
   color: transparent;
 }
 .oc-text-accent { background-image: linear-gradient(100deg, var(--oc-accent-from), var(--oc-accent-to)); }
@@ -3691,7 +3803,8 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
   /* border-box: the gradient also runs under the transparent 1px border of .oc-btn; from the padding box it would
      repeat in that border and show a thin stripe of the other end's color on both sides. */
   background: linear-gradient(100deg, var(--oc-accent-from), var(--oc-accent-to)) border-box;
-  color: var(--color-white-50);
+  /* --oc-btn-gradient-ink: dark text on a light accent (set it with the accent). */
+  color: var(--oc-btn-gradient-ink, var(--color-white-50));
   box-shadow: 0 10px 30px -10px var(--oc-accent-to);
   transition: transform 0.2s var(--oc-ease-out), box-shadow 0.2s;
 }
@@ -3718,7 +3831,8 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 
 /* Backdrop: slowly drifting color blobs + fine grid behind the page.
    <div class="oc-backdrop" aria-hidden="true"><i class="oc-backdrop__blob"></i><i class="oc-backdrop__grid"></i></div>
-   .oc-backdrop--local keeps it inside a positioned section instead of the viewport. */
+   .oc-backdrop--local keeps it inside a positioned section instead of the viewport.
+   A theme sets the colors: --oc-backdrop-1, -2, -3 (the blobs), --oc-backdrop-3-opacity and --oc-backdrop-grid (the lines). */
 .oc-backdrop {
   position: fixed;
   inset: 0;
@@ -3739,24 +3853,27 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
   opacity: var(--oc-backdrop-opacity, 0.35);
   animation: oc-drift 24s ease-in-out infinite alternate;
 }
-.oc-backdrop::before { background: var(--color-blue-40); inset-block-start: -18rem; inset-inline-start: -12rem; }
-.oc-backdrop::after { background: var(--color-purple-30); inset-block-start: 10rem; inset-inline-end: -16rem; animation-delay: -8s; }
-.oc-backdrop > .oc-backdrop__blob { background: var(--color-teal-40); inset-block-end: -20rem; inset-inline-start: 30%; animation-delay: -16s; opacity: calc(var(--oc-backdrop-opacity, 0.35) * 0.6); }
+.oc-backdrop::before { background: var(--oc-backdrop-1, var(--color-blue-40)); inset-block-start: -18rem; inset-inline-start: -12rem; }
+.oc-backdrop::after { background: var(--oc-backdrop-2, var(--color-purple-30)); inset-block-start: 10rem; inset-inline-end: -16rem; animation-delay: -8s; }
+.oc-backdrop > .oc-backdrop__blob { background: var(--oc-backdrop-3, var(--color-teal-40)); inset-block-end: -20rem; inset-inline-start: 30%; animation-delay: -16s; opacity: var(--oc-backdrop-3-opacity, calc(var(--oc-backdrop-opacity, 0.35) * 0.6)); }
 .oc-backdrop > .oc-backdrop__grid {
   position: absolute;
   inset: 0;
   background-image:
-    linear-gradient(oklch(from var(--oc-foreground) l c h / 0.05) 1px, transparent 1px),
-    linear-gradient(90deg, oklch(from var(--oc-foreground) l c h / 0.05) 1px, transparent 1px);
+    linear-gradient(var(--oc-backdrop-grid, oklch(from var(--oc-foreground) l c h / 0.05)) 1px, transparent 1px),
+    linear-gradient(90deg, var(--oc-backdrop-grid, oklch(from var(--oc-foreground) l c h / 0.05)) 1px, transparent 1px);
   background-size: 64px 64px;
   mask-image: radial-gradient(ellipse at 50% 0%, black 20%, transparent 70%);
 }
 @keyframes oc-drift { to { transform: translate(6rem, 4rem) scale(1.15); } }
 
 /* Container, section spacing and display headings */
-.oc-container { inline-size: min(100% - 2.5rem, var(--oc-container, 1200px)); margin-inline: auto; }
+/* --oc-container is the width, --oc-container-gutter the room on each side on a narrower screen (1.25rem). */
+.oc-container { inline-size: min(100% - 2 * var(--oc-container-gutter, 1.25rem), var(--oc-container, 1200px)); margin-inline: auto; }
 .oc-section-pad { padding-block: clamp(4rem, 9vw, 7rem); }
 .oc-section-pad--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
+/* The hero of a home page: a little less room on top and below than a section. */
+.oc-section-pad--hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); }
 .oc-display {
   margin: 0 0 1.5rem;
   font-size: clamp(2.6rem, 5.6vw, 4.6rem);
@@ -3766,20 +3883,67 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
   text-wrap: balance;
 }
 .oc-display--md { font-size: clamp(1.9rem, 4vw, 3rem); }
+.oc-display--sm { font-size: clamp(1.5rem, 3vw, 2.1rem); }
 .oc-lead { margin: 0 0 1rem; color: var(--oc-muted-foreground); font-size: 1.15rem; line-height: 1.65; max-inline-size: 42rem; text-wrap: pretty; }
-.oc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 3rem; align-items: center; }
-
-/* Code window: editor frame with traffic lights and a file name (always dark, like an editor) */
+/* Larger and narrower, for a home hero. */
+.oc-lead--lg { font-size: 1.2rem; max-inline-size: 36rem; }
+.oc-split { display: grid; grid-template-columns: var(--oc-split-cols, repeat(auto-fit, minmax(min(100%, 24rem), 1fr))); gap: var(--oc-split-gap, 3rem); align-items: center; }
+/* Ratio presets (one column up to 960px): --lead makes the text column wider, --media the image column.
+   Your own ratio: set --oc-split-cols in a class (and to 1fr in a media query for small screens). */
+.oc-split--lead { --oc-split-cols: 1.25fr 1fr; }
+.oc-split--media { --oc-split-cols: 1fr 1.15fr; }
+.oc-split__media { display: grid; place-items: center; }
+/* Columns aligned at the top (a fact list next to a long text). */
+.oc-split--top { align-items: start; }
+/* --oc-split-cols-wide: your own ratio that only applies above 960px, so the split still stacks on a phone. */
+@media (min-width: 961px) {
+  .oc-split { grid-template-columns: var(--oc-split-cols-wide, var(--oc-split-cols, repeat(auto-fit, minmax(min(100%, 24rem), 1fr)))); }
+}
+@media (max-width: 960px) {
+  .oc-split--lead, .oc-split--media { --oc-split-cols: 1fr; }
+  /* The image (a product mark, a screenshot) comes first on a small screen, aligned at the start, and an xl tile shrinks. */
+  .oc-split__media { order: -1; justify-items: start; }
+  .oc-split__media .oc-icon-tile--xl { --oc-tile-size: 7rem; }
+}
+
+/* Code window: editor frame with traffic lights and a file name. It follows the page theme: a light frame and light
+   syntax colors in light mode, the Omnia Dark editor colors in dark mode. --dark keeps it dark on a light page (the
+   hero blocks, where it reads as an editor screenshot). */
 .oc-code-window {
   position: relative;
   border: 1px solid var(--oc-border-strong);
   border-radius: var(--oc-radius-lg);
-  background: oklch(from var(--color-shallowblue-60) l c h / 0.9);
+  background: light-dark(var(--oc-card), oklch(from var(--color-shallowblue-60) l c h / 0.9));
   box-shadow: 0 40px 80px -30px oklch(from var(--color-black-50) l c h / 0.6);
   backdrop-filter: blur(12px);
   overflow: hidden;
-  color-scheme: dark;
-}
+  /* Syntax colors (oc-code-syntax.css) for both themes; the code sits on the window surface. */
+  --oc-syntax-bg: transparent;
+  --oc-syntax-bg-preview: transparent;
+  --oc-syntax-fg: light-dark(var(--color-shallowblue-60), var(--color-silver-60));
+  --oc-syntax-comment: light-dark(var(--color-gray-60), var(--color-purple-2));
+  --oc-syntax-string: light-dark(var(--color-green-80), var(--color-green-2));
+  --oc-syntax-keyword: light-dark(var(--color-purple-70), var(--color-purple-2));
+  --oc-syntax-variable: light-dark(var(--color-skycyan-90), var(--color-skycyan-30));
+  --oc-syntax-function: light-dark(var(--color-skycyan-90), var(--color-skycyan-60));
+  --oc-syntax-number: light-dark(var(--color-peru-80), var(--color-peru-40));
+  --oc-syntax-operator: light-dark(var(--color-red-70), var(--color-red-50));
+  --oc-syntax-constant: light-dark(var(--color-skycyan-90), var(--color-skycyan-70));
+  --oc-syntax-storage: light-dark(var(--color-green-80), var(--color-green-2));
+  --oc-syntax-tag: light-dark(var(--color-brown-70), var(--color-brown-10));
+  --oc-syntax-attr: light-dark(var(--color-skycyan-90), var(--color-skycyan-70));
+  --oc-syntax-prop: light-dark(var(--color-green-80), var(--color-green-2));
+  --oc-syntax-value: light-dark(var(--color-teal-80), var(--color-teal-10));
+  --oc-syntax-cls: light-dark(var(--color-darkgoldenrod-80), var(--color-wheat-70));
+  --oc-syntax-id: light-dark(var(--color-skycyan-90), var(--color-skycyan-70));
+  --oc-syntax-unit: light-dark(var(--color-peru-80), var(--color-peru-40));
+  --oc-syntax-key: light-dark(var(--color-brown-70), var(--color-brown-10));
+  --oc-code-block-line-number-color: light-dark(var(--color-gray-40), oklch(from var(--color-white-2) l c h / 0.25));
+}
+.oc-code-window--dark { color-scheme: dark; box-shadow: 0 40px 80px -30px oklch(from var(--color-black-50) l c h / 0.6); }
+.oc-code-window:not(.oc-code-window--dark) { box-shadow: 0 24px 60px -30px oklch(from var(--color-black-50) l c h / 0.25); }
+/* The code block inside follows the window instead of its own always-dark theme. */
+.oc-code-window :is(.oc-code-block, pre.code-preview) { color-scheme: inherit; }
 .oc-code-window__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.8rem 1rem; border-block-end: 1px solid var(--oc-border); }
 .oc-code-window__bar > i { inline-size: 0.7rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-red-50); }
 .oc-code-window__bar > i:nth-child(2) { background: var(--color-orange-60); }
@@ -3828,7 +3992,12 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 @keyframes oc-float { 50% { translate: 0 -12px; } }
 
 /* Product / feature card with hover lift and accent glow */
-.oc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--oc-card-min, 17rem)), 1fr)); gap: 1.25rem; }
+.oc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--oc-card-min, 17rem)), 1fr)); gap: var(--oc-card-gap, 1.25rem); }
+/* Wide cards (projects, case studies): from 32rem, three in a row on a wide screen. */
+.oc-card-grid--wide { --oc-card-min: 32rem; --oc-card-gap: 1.5rem; }
+/* --fit: the cards stretch over the full width when there are fewer than fit in a row (auto-fit instead of auto-fill). */
+.oc-card-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--oc-card-min, 17rem)), 1fr)); }
+@media (min-width: 1280px) { .oc-card-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
 .oc-product-card {
   position: relative;
   display: flex;
@@ -3842,7 +4011,7 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
     var(--oc-surface);
   color: var(--oc-foreground);
   text-decoration: none;
-  transition: transform 0.35s var(--oc-ease-out), border-color 0.35s, --oc-glow 0.35s;
+  transition: translate 0.35s var(--oc-ease-out), border-color 0.35s, --oc-glow 0.35s;
 }
 @property --oc-glow {
   syntax: "<number>";
@@ -3851,7 +4020,8 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 }
 .oc-product-card:hover {
   --oc-glow: 0.22;
-  transform: translateY(-6px);
+  /* The lift uses translate; a fly-in (.oc-reveal--fly) animates the transform, so both keep working. */
+  translate: 0 calc(-1 * var(--oc-hover-lift, 6px));
   border-color: oklch(from var(--oc-accent-from) l c h / 0.55);
 }
 .oc-product-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-block-end: 0.75rem; }
@@ -3907,9 +4077,17 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 }
 .oc-stat-strip__item { padding: 2rem 1.5rem; border-inline-start: 1px solid var(--oc-border); }
 .oc-stat-strip__item:first-child { border-inline-start: 0; }
-.oc-stat-strip__value { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; }
+.oc-stat-strip__value { font-family: var(--oc-font-display, inherit); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; }
 .oc-stat-strip__suffix { color: var(--oc-brand-1); }
 .oc-stat-strip__label { display: block; color: var(--oc-muted-foreground); font-size: 0.92rem; }
+/* Plain: no lines and no background of its own, for a strip inside an .oc-band (full width) or a card. */
+.oc-stat-strip--plain { border-block: 0; background: none; }
+/* Four figures on a narrower screen: two rows of two instead of three and one. */
+@media (max-width: 960px) {
+  .oc-stat-strip:has(> .oc-stat-strip__item:nth-child(4):last-child) { grid-template-columns: 1fr 1fr; }
+  .oc-stat-strip:has(> .oc-stat-strip__item:nth-child(4):last-child) > .oc-stat-strip__item:nth-child(3) { border-inline-start: 0; }
+  .oc-stat-strip:has(> .oc-stat-strip__item:nth-child(4):last-child) > .oc-stat-strip__item:nth-child(n + 3) { border-block-start: 1px solid var(--oc-border); }
+}
 
 /* Spotlight: large highlighted panel with copy + module list */
 .oc-spotlight {
@@ -3927,8 +4105,12 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 }
 .oc-spotlight__title { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 0.5rem; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.1; }
 .oc-spotlight__tagline { color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h)); font-size: 1.2rem; font-weight: 600; }
+/* --oc-spotlight-cols: your own ratio above 960px (copy | modules); on a smaller screen the spotlight stacks. */
+@media (min-width: 961px) {
+  .oc-spotlight { grid-template-columns: var(--oc-spotlight-cols, repeat(auto-fit, minmax(min(100%, 22rem), 1fr))); }
+}
 .oc-spotlight__modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
-.oc-spotlight__modules > li { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); background: var(--oc-surface); font-size: 0.95rem; }
+.oc-spotlight__modules > li { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); background: var(--oc-spotlight-module-bg, var(--oc-surface)); font-size: 0.95rem; }
 
 /* Steps: numbered process with a gradient tick (numbers come from a CSS counter) */
 .oc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: oc-step; }
@@ -3961,6 +4143,9 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 /* Tag list (tech stack) and check list */
 .oc-tag-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
 .oc-tag-list > li { padding: 0.55rem 1.1rem; border: 1px solid oklch(from var(--oc-accent-from) l c h / 0.35); border-radius: 999px; background: oklch(from var(--oc-accent-from) l c h / 0.1); font-family: var(--oc-font-mono); font-size: 0.88rem; }
+/* Neutral chips (no accent color) and large chips in the display font, e.g. a strip of brand names. */
+.oc-tag-list--neutral > li { border-color: var(--oc-border); background: var(--oc-surface); color: var(--oc-foreground); }
+.oc-tag-list--lg > li { padding: 0.45rem 1rem; font-family: var(--oc-font-display, inherit); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; }
 .oc-check-list { display: grid; gap: 0.5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; font-size: 0.93rem; }
 .oc-check-list > li { display: flex; gap: 0.5rem; align-items: baseline; }
 .oc-check-list > li::before { content: "✓"; color: var(--oc-brand-1); font-weight: 700; }
@@ -3995,6 +4180,8 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 .oc-site-header__nav a:not(.oc-btn):hover,
 .oc-site-header__nav a[aria-current="page"] { color: var(--oc-foreground); }
 .oc-site-header__toggle { display: none; padding: 0.5rem 0.7rem; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); background: var(--oc-surface); color: var(--oc-foreground); cursor: pointer; }
+/* The icon in the menu button is a block, so the button is as tall as a line of text (no inline gap under it). */
+.oc-site-header__toggle :is(svg, img, iconify-icon, .oc-icon) { display: block; }
 @media (min-width: 861px) {
   /* Desktop: the popover nav is always visible in the header bar. */
   .oc-site-header__nav[popover] { display: flex; }
@@ -4019,6 +4206,8 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
     backdrop-filter: blur(16px);
   }
   .oc-site-header__nav[popover] a:not(.oc-btn) { padding: 0.75rem 0; font-size: 1.1rem; }
+  /* The call to action (.oc-site-header__cta, a button) gets room above it in the open menu. */
+  .oc-site-header__cta { margin-block-start: 0.75rem; }
 }
 
 /* Site footer: brand column + link columns + bottom bar */
@@ -4026,21 +4215,33 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
   margin-block-start: 4rem;
   padding-block-start: 4rem;
   border-block-start: 1px solid var(--oc-border);
-  background: linear-gradient(to bottom, transparent, var(--oc-surface-strong));
+  background: var(--oc-footer-bg, linear-gradient(to bottom, transparent, var(--oc-surface-strong)));
   color: var(--oc-muted-foreground);
   font-size: 0.95rem;
+  container-type: inline-size;
 }
-.oc-site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
+/* Columns: --oc-footer-cols (about + 3 link columns). Footer narrower than 66rem (about a 1060px screen):
+   --oc-footer-cols-md columns (3) with the about column over the full width; narrower than 54rem: two columns.
+   Container queries on the footer, so a footer in a narrow column or a preview follows its own width. */
+.oc-site-footer__grid { display: grid; grid-template-columns: var(--oc-footer-cols, 1.6fr repeat(3, 1fr)); gap: 2.5rem; }
 .oc-site-footer__about p { margin-block: 1rem 0; max-inline-size: 22rem; }
 .oc-site-footer__title { margin: 0 0 1rem; color: var(--oc-foreground); font-size: 0.95rem; font-weight: 700; }
 .oc-site-footer__list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-style: normal; }
 .oc-site-footer a { color: inherit; text-decoration: none; }
 .oc-site-footer a:hover { color: var(--oc-foreground); }
-.oc-site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block-start: 3rem; padding-block: 1.5rem; border-block-start: 1px solid var(--oc-border); font-size: 0.85rem; }
-@media (max-width: 860px) {
-  .oc-site-footer__grid { grid-template-columns: 1fr 1fr; }
+.oc-site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block-start: 3rem; padding-block: 1.5rem; border-block-start: 1px solid var(--oc-border); color: var(--oc-footer-bottom-color, inherit); font-size: 0.85rem; }
+/* A second title further down in a column (e.g. "Tools" under the projects). */
+.oc-site-footer__subtitle { margin-block-start: 1.75rem; }
+/* Legal links in the bottom bar (Terms · Privacy · Cookies) and the build number after them. */
+.oc-site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
+.oc-site-footer__build { opacity: 0.7; font-variant-numeric: tabular-nums; }
+@container (max-width: 66rem) {
+  .oc-site-footer__grid { grid-template-columns: repeat(var(--oc-footer-cols-md, 3), minmax(0, 1fr)); }
   .oc-site-footer__about { grid-column: 1 / -1; }
 }
+@container (max-width: 54rem) {
+  .oc-site-footer__grid { grid-template-columns: 1fr 1fr; }
+}
 
 /* Reveal on scroll: elements slide in when they enter the viewport (scroll-driven, no JS; visible without support) */
 @supports (animation-timeline: view()) {
@@ -4437,7 +4638,21 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 .oc-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px oklch(from var(--oc-ring) l c h / 0.28); }
 .oc-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px oklch(from var(--oc-ring) l c h / 0.28); }
 .oc-slider:disabled { opacity: 0.5; cursor: not-allowed; }
-.oc-slider--vertical { writing-mode: vertical-lr; direction: rtl; inline-size: var(--oc-slider-thumb); block-size: 10rem; }
+/* In a vertical writing mode the inline axis is vertical: inline-size is the height of the slider. */
+.oc-slider--vertical { writing-mode: vertical-lr; direction: rtl; inline-size: 10rem; block-size: var(--oc-slider-thumb); }
+/* Scale under a stepped slider: one mark per step (or per labelled value), centered under the thumb positions.
+   The padding keeps the first and last mark under the thumb center at min and max. */
+.oc-slider-scale {
+  display: flex;
+  justify-content: space-between;
+  padding-inline: calc(var(--oc-slider-thumb, 1.125rem) / 2);
+  margin-block-start: 0.25rem;
+  font-size: 0.6875rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--oc-muted-foreground);
+}
+.oc-slider-scale > * { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; inline-size: 0; }
+.oc-slider-scale > *::before { content: ""; inline-size: 1px; block-size: 0.375rem; background: var(--oc-border); }
 .oc-slider--vertical::-webkit-slider-runnable-track {
   background: linear-gradient(to top, var(--oc-primary) var(--oc-slider-progress), var(--oc-muted) var(--oc-slider-progress));
 }
@@ -5440,93 +5655,6 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
 @keyframes oc-busy-in { from { opacity: 0; } }
 @media (prefers-reduced-motion: reduce) { .oc-busy-overlay[open], .oc-busy-overlay[open]::backdrop { animation-duration: 0s; } }
 
-/* parts/app-column-menu.css */
-/* File: packages/ui/src/parts/app-column-menu.css | Map: menu panel -> title + list -> item states -> footer -> CSS-only column hiding (scope) */
-/* Column menu: a popover with one checkbox per table column (column visibility).
-   CSS-only hiding: wrap the menu and the table in .oc-column-menu-scope and give each checkbox
-   data-col="<column number>". An unchecked box hides that column (th and td) through :has(). */
-
-/* Panel look. Without the popover attribute it is a normal block (e.g. inside a sheet or sidebar). */
-.oc-column-menu {
-  inline-size: 14rem;
-  max-inline-size: calc(100vw - 1rem);
-  padding: 0.375rem;
-  font-size: 0.875rem;
-  color: var(--oc-popover-foreground);
-  background: var(--oc-popover);
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius);
-  box-shadow: 0 8px 24px oklch(from var(--color-black-60) l c h / 0.15);
-}
-/* As a popover: in the top layer, tethered to its trigger like the dropdown. */
-.oc-column-menu[popover] {
-  position: fixed;
-  inset: auto;
-  margin: 4px 0 0;
-  position-area: block-end span-inline-start;
-  position-try-fallbacks: flip-block, flip-inline;
-  transition: opacity var(--oc-transition-fast), display var(--oc-transition-fast) allow-discrete, overlay var(--oc-transition-fast) allow-discrete;
-}
-.oc-column-menu[popover]:popover-open {
-  display: block;
-  @starting-style { opacity: 0; }
-}
-
-/* Small heading above the list ("Columns"). */
-.oc-column-menu-title {
-  margin: 0;
-  padding: 0.375rem 0.5rem 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--oc-muted-foreground);
-}
-
-/* The list is a <form>, so a native <button type="reset"> restores the default columns. */
-.oc-column-menu-list { display: grid; gap: 1px; margin: 0; max-block-size: 18rem; overflow-y: auto; }
-
-/* One row: label around a checkbox and the column name. */
-.oc-column-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: calc(var(--oc-radius) - 2px);
-  cursor: pointer;
-  user-select: none;
-}
-.oc-column-menu-item:hover { background: var(--oc-accent); }
-.oc-column-menu-item:has(:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
-.oc-column-menu-item input { margin: 0; accent-color: var(--oc-primary); }
-/* Locked column (always visible): <input disabled checked>. */
-.oc-column-menu-item:has(input:disabled) { color: var(--oc-muted-foreground); cursor: default; }
-.oc-column-menu-item:has(input:disabled):hover { background: none; }
-
-/* Footer row with "Reset" (type="reset") or other small buttons. */
-.oc-column-menu-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.25rem;
-  margin-block-start: 0.375rem;
-  padding-block-start: 0.375rem;
-  border-block-start: 1px solid var(--oc-border);
-}
-
-/* ---- CSS-only column hiding (columns 1 to 10) ---- */
-.oc-column-menu-scope:has([data-col="1"]:not(:checked)) .oc-table :is(th, td):nth-child(1),
-.oc-column-menu-scope:has([data-col="2"]:not(:checked)) .oc-table :is(th, td):nth-child(2),
-.oc-column-menu-scope:has([data-col="3"]:not(:checked)) .oc-table :is(th, td):nth-child(3),
-.oc-column-menu-scope:has([data-col="4"]:not(:checked)) .oc-table :is(th, td):nth-child(4),
-.oc-column-menu-scope:has([data-col="5"]:not(:checked)) .oc-table :is(th, td):nth-child(5),
-.oc-column-menu-scope:has([data-col="6"]:not(:checked)) .oc-table :is(th, td):nth-child(6),
-.oc-column-menu-scope:has([data-col="7"]:not(:checked)) .oc-table :is(th, td):nth-child(7),
-.oc-column-menu-scope:has([data-col="8"]:not(:checked)) .oc-table :is(th, td):nth-child(8),
-.oc-column-menu-scope:has([data-col="9"]:not(:checked)) .oc-table :is(th, td):nth-child(9),
-.oc-column-menu-scope:has([data-col="10"]:not(:checked)) .oc-table :is(th, td):nth-child(10) { display: none; }
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-column-menu[popover] { transition: none; }
-}
-
 /* parts/app-confirm-dialog.css */
 /* File: packages/ui/src/parts/app-confirm-dialog.css | Map: confirm modifier (icon ring) -> close button -> typed confirm field -> confirm lock -> three-button footer -> narrow screens */
 /* Confirm dialog: a variant of the alert dialog (dialog.oc-modal + .oc-alert-dialog).
@@ -5664,9 +5792,213 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
 }
 @media (prefers-reduced-motion: reduce) { .oc-cookie-consent { transition: none; } }
 
+/* parts/app-data-table-footer.css */
+/* File: packages/ui/src/parts/app-data-table-footer.css | Map: footer grid (count, rows per page, pager) -> page buttons -> narrow screens */
+/* Footer of the list table (app-data-table.css): the count on the left, rows per page in the middle, the pager on the right. */
+
+/* Footer: count on the left, rows-per-page in the middle, pager on the right. */
+.oc-data-table-footer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 0.75rem;
+}
+.oc-data-table-summary { margin: 0; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-data-table-per-page { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
+.oc-data-table-per-page .oc-select { inline-size: auto; }
+.oc-data-table-pager { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
+.oc-data-table-page {
+  min-inline-size: 2rem;
+  padding: 0.25rem 0.45rem;
+  font: inherit;
+  font-size: 0.8125rem;
+  color: var(--oc-foreground);
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+}
+.oc-data-table-page[aria-current="page"] {
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.1);
+  border-color: oklch(from var(--oc-primary) l c h / 0.35);
+}
+.oc-data-table-page:disabled { opacity: 0.4; cursor: default; }
+.oc-data-table-page:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-data-table-ellipsis { padding-inline: 0.25rem; color: var(--oc-muted-foreground); }
+
+@media (max-width: 40rem) {
+  .oc-data-table-footer { grid-template-columns: 1fr; }
+  .oc-data-table-pager { justify-content: flex-start; }
+}
+
+/* parts/app-data-table-rich.css */
+/* File: packages/ui/src/parts/app-data-table-rich.css | Map: control height -> header (sort icons, columns) -> type tabs -> filter row -> name, truncate and count cells -> card fields */
+/* The rich relations list on top of app-data-table.css: tabs that filter a column, filter selects with an icon,
+   rich cells and the label/value lines of the card view. Behaviour: data-oc-col-filter in src/data-table.js. */
+
+/* Every control is 2rem high: search, filter selects, trash pills, icon buttons, rows per page and the pager. */
+.oc-data-table :is(.oc-data-table-toolbar, .oc-data-table-filters, .oc-data-table-footer) :is(.oc-input, .oc-select) { block-size: 2rem; padding-block: 0; font-size: 0.8125rem; }
+.oc-data-table .oc-data-table-page { min-block-size: 2rem; }
+.oc-data-table :is(.oc-data-table-toolbar, .oc-data-table-filters, thead) .oc-btn--icon { --oc-btn-square: 2rem; }
+.oc-data-table-toolbar .oc-filter-pill {
+  display: inline-flex;
+  align-items: center;
+  block-size: 2rem;
+  padding-inline: 0.625rem;
+  border-radius: calc(var(--oc-radius) - 2px);
+}
+
+/* Header: the sort mark only on the sorted column (and on hover); the actions header holds the column button. */
+/* The sort mark always keeps its 1rem, so sorting another column never moves the header: empty while unsorted,
+   faint chevrons on hover, the accent sort icon on the sorted column. */
+:is(.oc-data-table, .oc-block-datatable) th:has(.oc-table-sort) { cursor: pointer; }
+:is(.oc-data-table, .oc-block-datatable) th .oc-table-sort::after { content: ""; flex-shrink: 0; inline-size: 1rem; block-size: 1rem; opacity: 1; }
+:is(.oc-data-table, .oc-block-datatable) th:not([aria-sort]):hover .oc-table-sort::after {
+  background: var(--oc-muted-foreground);
+  opacity: 0.6;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18.17L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18.17L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+/* Sorted column: a bold label and a sort icon in the accent color. aria-sort on a header in the HTML
+   is the column sorted when the page opens. */
+:is(.oc-data-table, .oc-block-datatable) th[aria-sort] .oc-table-sort { color: var(--oc-foreground); }
+:is(.oc-data-table, .oc-block-datatable) th[aria-sort] .oc-table-sort::after {
+  content: "";
+  inline-size: 1rem;
+  block-size: 1rem;
+  opacity: 1;
+  background: var(--oc-primary);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 17h3l-4 4l-4-4h3V3h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 17h3l-4 4l-4-4h3V3h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+:is(.oc-data-table, .oc-block-datatable) th[aria-sort="descending"] .oc-table-sort::after {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 7h3l-4-4l-4 4h3v14h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 7h3l-4-4l-4 4h3v14h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z'/%3E%3C/svg%3E");
+}
+.oc-data-table th[data-oc-col="actions"] .oc-data-table-th { justify-content: flex-end; gap: 0.5rem; font-weight: 500; color: var(--oc-muted-foreground); }
+.oc-data-table td[data-oc-col="actions"] { text-align: end; }
+/* Row actions per status: data-oc-when="active" (edit, view) only on live rows, data-oc-when="deleted" (restore,
+   delete permanently) only on rows in the trash. */
+.oc-data-table tr[data-oc-status="deleted"] [data-oc-when="active"],
+.oc-data-table tr:not([data-oc-status="deleted"]) [data-oc-when="deleted"] { display: none; }
+/* The column chooser in the actions header: a large plain icon (1.75rem), no button frame. */
+.oc-data-table-columns-btn { font-size: 1.75rem; }
+.oc-data-table-columns-btn > :is(svg, iconify-icon) { font-size: 1em; inline-size: 1em; block-size: 1em; }
+
+/* Tabs above the toolbar (All / Customers / Companies …): icon, label and a count; they filter one column. */
+.oc-data-table-tabs { display: flex; inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
+.oc-data-table-tabs .oc-tab-trigger { flex-shrink: 0; }
+.oc-data-table-tabs .oc-tab-trigger { display: inline-flex; align-items: center; gap: 0.4rem; }
+.oc-data-table-tabs .oc-tab-trigger :is(svg, iconify-icon) { font-size: 1.1em; inline-size: 1.1em; block-size: 1.1em; }
+.oc-data-table-tabs .oc-tab-trigger[aria-selected="true"] { color: var(--oc-primary); border-bottom-color: var(--oc-primary); }
+.oc-data-table-tab-count {
+  min-inline-size: 1.25rem;
+  padding: 0 0.375rem;
+  font-size: 0.6875rem;
+  line-height: 1.125rem;
+  text-align: center;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-muted);
+  border-radius: 999px;
+}
+.oc-data-table-tabs [aria-selected="true"] .oc-data-table-tab-count { color: var(--oc-primary); background: oklch(from var(--oc-primary) l c h / 0.12); }
+/* A count in the color of its type (the same tone as the type badge in the table). */
+.oc-data-table-tab-count:is(.oc-data-table-tab-count--success, .oc-data-table-tab-count--info, .oc-data-table-tab-count--warning) {
+  color: var(--oc-tab-tone);
+  background: oklch(from var(--oc-tab-tone) l c h / 0.12);
+  box-shadow: inset 0 0 0 1px oklch(from var(--oc-tab-tone) l c h / 0.35);
+}
+.oc-data-table-tab-count--success { --oc-tab-tone: var(--oc-success); }
+.oc-data-table-tab-count--info { --oc-tab-tone: var(--oc-info, light-dark(var(--color-deepskyblue-70), var(--color-skyblue-50))); }
+.oc-data-table-tab-count--warning { --oc-tab-tone: var(--oc-warning); }
+
+/* Filter row: selects with a leading icon (status, type …) and the column button on the right. */
+.oc-data-table-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.oc-data-table-filters[hidden] { display: none; }
+.oc-data-table-filters > :last-child:is(.oc-btn) { margin-inline-start: auto; }
+.oc-data-table-filter { position: relative; display: inline-flex; align-items: center; }
+.oc-data-table-filter > :is(svg, iconify-icon) {
+  position: absolute;
+  inset-inline-start: 0.625rem;
+  font-size: 1rem;
+  inline-size: 1rem;
+  block-size: 1rem;
+  color: var(--oc-muted-foreground);
+  pointer-events: none;
+}
+.oc-data-table-filter > .oc-select { inline-size: auto; min-inline-size: 11rem; padding-inline-start: 2.125rem; }
+
+/* Cells. Name: avatar, name with a badge, and a muted second line (VAT number, e-mail …). */
+.oc-data-table-name { display: flex; align-items: center; gap: 0.625rem; min-inline-size: 0; }
+.oc-data-table-name .oc-avatar { inline-size: 2.25rem; block-size: 2.25rem; font-size: 0.75rem; }
+.oc-data-table-name-text { display: grid; min-inline-size: 0; }
+.oc-data-table-name-line { display: flex; align-items: center; gap: 0.375rem; font-weight: 600; }
+.oc-data-table-name-sub { font-size: 0.75rem; color: var(--oc-muted-foreground); }
+/* One line with an ellipsis; put the full text in title="". */
+.oc-data-table-truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: var(--oc-data-table-truncate, 18rem); }
+/* A count that opens the related list (projects, invoices …); muted while it is 0. */
+.oc-data-table-count { font-variant-numeric: tabular-nums; }
+.oc-data-table-count[data-count="0"] { color: var(--oc-muted-foreground); opacity: 0.75; }
+/* The sort is visible in the header (icon, bold label); the summary line is for screen readers only. */
+.oc-data-table-sort-summary {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.oc-data-table-file { display: none; }
+
+/* The other visible columns as label / value lines, and the row actions at the bottom. */
+.oc-data-table-card-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.75rem; margin: 0; font-size: 0.8125rem; }
+.oc-data-table-card-fields dt { color: var(--oc-muted-foreground); }
+.oc-data-table-card-fields dd { margin: 0; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oc-data-table-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; margin-block-start: auto; }
+
+/* Code cells (article numbers, SKUs): monospace and a step smaller. */
+.oc-data-table-code { font-family: var(--oc-font-mono); font-size: 0.75rem; }
+
+/* Version 2, ".oc-data-table--bordered": a tinted header row, a line between the columns and the
+   sort chevrons always visible; the filter select has its icon in a zone of its own. The rest is the same table. */
+.oc-data-table.oc-data-table--bordered .oc-table :is(th, td) { border-inline-end: 1px solid var(--oc-border); }
+.oc-data-table.oc-data-table--bordered .oc-table :is(th, td):last-child { border-inline-end: 0; }
+.oc-data-table.oc-data-table--bordered .oc-table thead th {
+  font-weight: 500;
+  background: color-mix(in oklch, var(--oc-card), var(--oc-foreground) 4%);
+}
+.oc-data-table.oc-data-table--bordered .oc-table thead th[data-oc-col="actions"] {
+  background: color-mix(in oklch, var(--oc-card), var(--oc-foreground) 4%);
+}
+.oc-data-table--bordered td[data-oc-col="actions"] { text-align: center; }
+.oc-data-table--bordered th[data-oc-col="actions"] .oc-data-table-th { justify-content: center; }
+.oc-data-table--bordered th:not([aria-sort]) .oc-table-sort::after,
+.oc-data-table--bordered th:not([aria-sort]):hover .oc-table-sort::after {
+  content: "";
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+  opacity: 0.5;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18.17L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18.17L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+.oc-data-table--bordered .oc-data-table-filter::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 2rem;
+  inline-size: 1px;
+  background: var(--oc-border);
+  pointer-events: none;
+}
+.oc-data-table--bordered .oc-data-table-filter > .oc-select { padding-inline-start: 2.75rem; }
+
 /* parts/app-data-table.css */
-/* File: packages/ui/src/parts/app-data-table.css | Map: shell -> toolbar -> frame and scroll -> header resize -> select and actions columns -> deleted row -> bulk bar -> card view -> footer and pager -> compact density */
-/* List table from Korrekt and OmniaDesk. The frame, toolbar and footer are styling.
+/* File: packages/ui/src/parts/app-data-table.css | Map: shell -> toolbar -> frame and scroll -> header label -> select and actions columns -> deleted row -> bulk bar -> card view -> compact density */
+/* List table for business apps. The frame, toolbar and footer are styling. Tabs, filter row, rich cells and
+   card fields: app-data-table-rich.css; footer and pager: app-data-table-footer.css.
    Behaviour (search, sort, pages, resize, drag, trash, bulk) lives in src/data-table.js.
    Set --oc-data-table-max on the shell when the body should scroll and the header should stick. */
 
@@ -5679,13 +6011,16 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
   background: var(--oc-card);
   border: 1px solid var(--oc-border);
   border-radius: var(--oc-radius);
+  /* Full width, and in a grid or flex parent the table scrolls inside the frame instead of stretching the card. */
+  inline-size: 100%;
+  min-inline-size: 0;
 }
 
-/* Toolbar: title + gear, search, trash pills, table/cards toggle, page actions. */
+/* Toolbar: title + gear/filter button, search (takes the free width), trash pills, table/cards toggle, page actions. */
 .oc-data-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
 .oc-data-table-heading { display: flex; align-items: center; gap: 0.5rem; min-inline-size: 0; }
 .oc-data-table-title { font-size: 0.875rem; font-weight: 600; }
-.oc-data-table-search { flex: 1 1 12rem; min-inline-size: 10rem; max-inline-size: 22rem; }
+.oc-data-table-search { flex: 1 1 10rem; min-inline-size: 9rem; }
 .oc-data-table-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-inline-start: auto; }
 .oc-data-table-view { display: inline-flex; gap: 0.25rem; }
 .oc-data-table-view [aria-pressed="true"] {
@@ -5693,55 +6028,52 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
   background: oklch(from var(--oc-primary) l c h / 0.1);
   border-color: oklch(from var(--oc-primary) l c h / 0.35);
 }
-.oc-data-table-sort-summary { flex-basis: 100%; margin: 0; font-size: 0.75rem; color: var(--oc-muted-foreground); }
-.oc-data-table-sort-summary:empty { display: none; }
-.oc-data-table-file { display: none; }
+/* In the toolbar the trash pills read as one switch: the chosen one is filled. */
+.oc-data-table-toolbar .oc-filter-pills { border-inline-start: 0; padding-inline-start: 0; }
+.oc-data-table-toolbar .oc-filter-pill[aria-current="true"] {
+  color: var(--oc-primary-foreground);
+  background: var(--oc-primary);
+  border-color: var(--oc-primary);
+}
 
 /* The table sits in its own rounded frame. The scroll box keeps the header sticky. */
 .oc-data-table-frame {
+  min-inline-size: 0;
   overflow: hidden;
-  background: var(--oc-background);
+  background: var(--oc-card);
   border: 1px solid var(--oc-border);
   border-radius: calc(var(--oc-radius) - 2px);
 }
 .oc-data-table-scroll { overflow: auto; max-block-size: var(--oc-data-table-max, none); }
 .oc-data-table .oc-table :is(th, td) { border-inline: 0; border-block-start: 0; }
+/* Columns size to their content and cells stay on one line: a narrow screen scrolls the frame sideways instead of
+   squeezing names and phone numbers onto two lines. .oc-data-table-wrap on a cell lets long text wrap again. */
+.oc-data-table .oc-data-table-table { table-layout: auto; }
+.oc-data-table .oc-data-table-table :is(th, td) { white-space: nowrap; vertical-align: middle; padding-inline: 0.625rem; }
+.oc-data-table .oc-data-table-table td.oc-data-table-wrap { white-space: normal; }
 .oc-data-table .oc-table thead th {
   position: sticky;
   inset-block-start: 0;
   z-index: 1;
-  block-size: 2.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
+  block-size: 2.75rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--oc-foreground);
   background: var(--oc-card);
 }
-.oc-data-table .oc-table tbody tr:nth-child(even) { background: var(--oc-surface); }
+/* Striped rows (every second visible row), the row under the pointer a step stronger. Solid colors, so the sticky
+   actions cell can take the same background (inherit) and nothing scrolls through it. */
+.oc-data-table {
+  --oc-data-table-stripe: color-mix(in oklch, var(--oc-card), var(--oc-foreground) 3.5%);
+  --oc-data-table-hover: color-mix(in oklch, var(--oc-card), var(--oc-primary) 8%);
+}
+.oc-data-table .oc-table tbody tr:nth-child(even of :not([hidden])) { background: var(--oc-data-table-stripe); }
+.oc-data-table .oc-table tbody tr:hover { background: var(--oc-data-table-hover); }
+.oc-data-table--plain .oc-table tbody tr:nth-child(even of :not([hidden])):not(:hover) { background: none; }
 .oc-data-table .oc-table tbody tr:last-child > td { border-block-end: 0; }
 
-/* Header label and the drag handle that sets the column width. */
-.oc-data-table-th { display: flex; align-items: center; gap: 0.25rem; position: relative; min-inline-size: 0; }
-.oc-data-table-resize {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-end: -0.45rem;
-  inline-size: 0.55rem;
-  padding: 0;
-  background: none;
-  border: 0;
-  cursor: col-resize;
-  touch-action: none;
-}
-.oc-data-table-resize::after {
-  content: "";
-  position: absolute;
-  inset-block: 0.4rem;
-  inset-inline-start: 0.25rem;
-  inline-size: 1px;
-  background: var(--oc-border);
-}
-.oc-data-table.is-resizing { cursor: col-resize; user-select: none; }
-/* After a resize the table grows with its columns and the frame scrolls sideways. */
-.oc-data-table-table--sized { inline-size: max-content; min-inline-size: 100%; }
+/* Header label (column width by dragging is OmniaUI Pro: app-data-table-pro.css). */
+.oc-data-table-th { display: flex; align-items: center; gap: 0.25rem; min-inline-size: 0; }
 
 /* Narrow control columns. The actions column stays on the right while the rest scrolls. */
 .oc-data-table .oc-table :is(th, td)[data-oc-col="select"],
@@ -5757,8 +6089,8 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
   background: var(--oc-card);
   box-shadow: -1px 0 0 var(--oc-border);
 }
-.oc-data-table .oc-table thead th[data-oc-col="actions"] { z-index: 3; }
-.oc-data-table .oc-table tbody tr:nth-child(even) > td[data-oc-col="actions"] { background: var(--oc-surface); }
+.oc-data-table .oc-table thead th[data-oc-col="actions"] { z-index: 3; background: var(--oc-card); }
+.oc-data-table .oc-table tbody tr:is(:nth-child(even of :not([hidden])), :hover) > td[data-oc-col="actions"] { background: inherit; }
 
 /* Trash and archive rows stay readable but quieter than active rows. */
 .oc-data-table tr[data-oc-status="deleted"],
@@ -5787,55 +6119,24 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
   padding: 0.75rem;
 }
 .oc-data-table-card {
-  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.875rem;
   background: var(--oc-card);
   border: 1px solid var(--oc-border);
   border-radius: calc(var(--oc-radius) - 2px);
 }
 .oc-data-table-card-title { margin: 0; font-size: 0.875rem; font-weight: 600; }
-
+.oc-data-table-card-title .oc-data-table-name-sub { font-weight: 400; }
 .oc-data-table-empty { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--oc-muted-foreground); }
 .oc-data-table-empty[hidden] { display: none; }
 
-/* Footer: count on the left, rows-per-page in the middle, pager on the right. */
-.oc-data-table-footer {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  gap: 0.75rem;
-}
-.oc-data-table-summary { margin: 0; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
-.oc-data-table-per-page { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
-.oc-data-table-per-page .oc-select { inline-size: auto; }
-.oc-data-table-pager { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
-.oc-data-table-page {
-  min-inline-size: 2rem;
-  padding: 0.25rem 0.45rem;
-  font: inherit;
-  font-size: 0.8125rem;
-  color: var(--oc-foreground);
-  background: var(--oc-card);
-  border: 1px solid var(--oc-border);
-  border-radius: calc(var(--oc-radius) - 2px);
-  cursor: pointer;
-}
-.oc-data-table-page[aria-current="page"] {
-  color: var(--oc-primary);
-  background: oklch(from var(--oc-primary) l c h / 0.1);
-  border-color: oklch(from var(--oc-primary) l c h / 0.35);
-}
-.oc-data-table-page:disabled { opacity: 0.4; cursor: default; }
-.oc-data-table-page:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
-.oc-data-table-ellipsis { padding-inline: 0.25rem; color: var(--oc-muted-foreground); }
 
 /* Design choice from the gear menu: tighter rows, like the compact article lists. */
 .oc-data-table--compact .oc-table :is(th, td) { padding: 0.25rem 0.5rem; font-size: 0.8125rem; }
 .oc-data-table--compact .oc-table thead th { block-size: 2rem; }
 
-@media (max-width: 40rem) {
-  .oc-data-table-footer { grid-template-columns: 1fr; }
-  .oc-data-table-pager { justify-content: flex-start; }
-}
 @media (prefers-reduced-motion: reduce) {
   .oc-data-table .oc-table tbody tr { transition: none; }
 }
@@ -5972,6 +6273,73 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
   .oc-list-toolbar-view { transition: none; }
 }
 
+/* parts/app-name-card.css */
+/* File: packages/ui/src/parts/app-name-card.css | Map: card (details) -> head (chevron, name, rename, amount, actions) -> rename input -> body -> nested cards */
+/* Name card: a collapsible card for one part of a quote or plan,
+   with its name, a rename pencil, an optional amount and a delete button. Native <details>: it opens without script;
+   packages/ui/src/name-card.js adds the rename (pencil -> input, Enter saves, Escape cancels). */
+
+.oc-name-card {
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+}
+.oc-name-card + .oc-name-card { margin-block-start: 0.5rem; }
+.oc-name-card__head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-block-size: 2.75rem;
+  padding: 0.375rem 0.5rem 0.375rem 0.75rem;
+  list-style: none;
+  cursor: pointer;
+}
+.oc-name-card__head::-webkit-details-marker { display: none; }
+.oc-name-card__head::before {
+  content: "";
+  flex-shrink: 0;
+  inline-size: 1rem;
+  block-size: 1rem;
+  background: var(--oc-muted-foreground);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
+  transition: rotate var(--oc-transition-fast);
+}
+.oc-name-card[open] > .oc-name-card__head::before { rotate: 90deg; }
+.oc-name-card__head:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; border-radius: var(--oc-radius); }
+.oc-name-card__title { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+.oc-name-card__meta { font-size: 0.75rem; color: var(--oc-muted-foreground); white-space: nowrap; }
+.oc-name-card__head .oc-btn { flex-shrink: 0; }
+/* Amount and actions sit on the right; the amount is tabular so a column of cards lines up. */
+.oc-name-card__amount { margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.oc-name-card__actions { display: inline-flex; flex-shrink: 0; gap: 0.25rem; margin-inline-start: auto; }
+.oc-name-card__amount + .oc-name-card__actions { margin-inline-start: 0.5rem; }
+
+/* Rename: the title becomes an input of the same size (hidden toggles between the two). */
+.oc-name-card__input {
+  flex: 1;
+  min-inline-size: 0;
+  block-size: 2rem;
+  padding: 0 0.5rem;
+  font: inherit;
+  font-weight: 600;
+  color: var(--oc-foreground);
+  background: var(--oc-background);
+  border: 1px solid var(--oc-ring);
+  border-radius: calc(var(--oc-radius) - 2px);
+}
+.oc-name-card__input[hidden],
+.oc-name-card__title[hidden] { display: none; }
+
+.oc-name-card__body { padding: 0.75rem 0.75rem 0.875rem 2.25rem; border-block-start: 1px solid var(--oc-border); }
+/* Nested cards (the parts of a title) use a quieter surface; --total colors the amount of the main card. */
+.oc-name-card__body > .oc-name-card { background: var(--oc-surface); }
+.oc-name-card--total > .oc-name-card__head .oc-name-card__amount { color: var(--oc-primary); }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-name-card__head::before { transition: none; }
+}
+
 /* parts/app-page-header.css */
 /* File: packages/ui/src/parts/app-page-header.css | Map: header (container) -> back link row -> main row (text + actions) -> title + subtitle + meta -> wide layout (@container) -> modifiers (bordered, sticky, sm) */
 /* Page header: back link + title + subtitle + actions at the top of an app page.
@@ -6028,6 +6396,47 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
 .oc-page-header--sm { padding-block: 0.5rem 0.75rem; }
 .oc-page-header--sm .oc-page-header-title { font-size: 1.125rem; }
 
+/* parts/app-result.css */
+/* File: packages/ui/src/parts/app-result.css */
+/* Map: result -> icon tile -> title -> text -> actions */
+/* The outcome of an action in the place where the form was: "Thank you, your message was sent" with an icon tile, a
+   short text and a button ("Send another message"). Give it role="status" and tabindex="-1" and move the focus to it.
+   --center centers it; the tile takes its color from an .oc-accent--* preset. */
+
+.oc-result {
+  display: grid;
+  justify-items: start;
+  gap: 0.75rem;
+}
+.oc-result:focus { outline: none; }
+.oc-result[hidden] { display: none; }
+.oc-result > .oc-icon-tile { margin-block-end: 0.35rem; }
+.oc-result__title {
+  margin: 0;
+  font-size: 1.2rem;
+  line-height: 1.25;
+}
+.oc-result__text {
+  margin: 0;
+  color: var(--oc-muted-foreground);
+}
+.oc-result__text a {
+  color: var(--oc-primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.oc-result__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-block-start: 0.5rem;
+}
+.oc-result--center {
+  justify-items: center;
+  text-align: center;
+}
+.oc-result--center .oc-result__actions { justify-content: center; }
+
 /* parts/app-severity-card.css */
 /* File: packages/ui/src/parts/app-severity-card.css | Map: card (details) -> head (summary) -> icon + title + tags -> level badge + chevron -> body + actions -> severity modifiers -> resolved state -> reduced motion */
 /* Severity card: risk-colored expandable card (security finding, incident, audit item).
@@ -6456,6 +6865,11 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   min-block-size: 0;
   timeline-scope: --oc-titlebar-scroll;
 }
+/* A card with a title bar on top: the bar runs edge to edge, its last button follows the card corner. */
+.oc-card:has(> .oc-titlebar:first-child) { padding: 0; --oc-titlebar-radius: calc(var(--oc-radius) + 3px); }
+/* As the heading of a card section (bar + .oc-card-content): the title lines up with the content below. */
+.oc-card > .oc-titlebar:first-child:has(+ .oc-card-content) { padding-inline-start: 24px; }
+.oc-card > .oc-titlebar:first-child:has(+ .oc-card-content) .oc-titlebar__title { font-size: 0.9375rem; }
 
 .oc-titlebar {
   display: flex;
@@ -6463,7 +6877,7 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   align-items: center;
   gap: 2px;
   min-block-size: 46px;
-  padding: 0 8px 0 14px;
+  padding: 0 0 0 14px;
   border-block-end: 1px solid transparent;
   -webkit-user-select: none;
   user-select: none;
@@ -6480,7 +6894,7 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 /* Title area: grows, cuts the subtitle off with …. */
 .oc-titlebar__main { display: flex; flex: 1; align-items: center; gap: 8px; min-inline-size: 0; }
 .oc-titlebar__icon { flex: none; inline-size: 18px; block-size: 18px; }
-.oc-titlebar__title { flex: none; font-size: 0.8667rem; font-weight: 650; letter-spacing: -0.01em; }
+.oc-titlebar__title { flex: none; margin: 0; font-size: 0.8667rem; font-weight: 650; letter-spacing: -0.01em; }
 .oc-titlebar__subtitle {
   min-inline-size: 0;
   overflow: hidden;
@@ -6490,17 +6904,19 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   white-space: nowrap;
 }
 .oc-titlebar__subtitle::before { content: "·"; margin-inline-end: 8px; }
-.oc-titlebar__actions { display: flex; flex: none; align-items: center; gap: 2px; }
+/* Window buttons sit in the top right corner (as on a desktop window), not centred on the title line. */
+.oc-titlebar__actions { display: flex; flex: none; align-self: flex-start; align-items: flex-start; margin-inline-start: auto; }
 
-/* Compact icon buttons: muted, a light surface on hover, the close button red. */
+/* Window buttons: muted, a light surface on hover, the close button red. The last one follows the
+   rounded corner of the card or window around the bar (--oc-titlebar-radius). */
 .oc-titlebar__btn {
   display: inline-grid;
   place-items: center;
-  inline-size: 30px;
-  block-size: 30px;
+  inline-size: 40px;
+  block-size: 34px;
   padding: 0;
   border: 0;
-  border-radius: 8px;
+  border-radius: 0;
   background: transparent;
   color: var(--oc-muted-foreground);
   font: inherit;
@@ -6511,6 +6927,7 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 .oc-titlebar__btn:hover { background: var(--oc-glass-panel-strong, var(--oc-accent)); color: var(--oc-foreground); }
 .oc-titlebar__btn:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
 .oc-titlebar__btn--close:hover { background: var(--oc-destructive); color: var(--oc-destructive-foreground); }
+.oc-titlebar__actions > .oc-titlebar__btn:last-child { border-start-end-radius: var(--oc-titlebar-radius, calc(var(--oc-radius) - 1px)); }
 
 /* Body: the part that scrolls under the bar. */
 .oc-titlebar-body {
@@ -6535,7 +6952,7 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 
 /* Sizes */
 .oc-titlebar--sm { min-block-size: 36px; padding-inline-start: 10px; }
-.oc-titlebar--sm .oc-titlebar__btn { inline-size: 26px; block-size: 26px; border-radius: 6px; }
+.oc-titlebar--sm .oc-titlebar__btn { inline-size: 34px; block-size: 28px; }
 
 @media (prefers-reduced-motion: reduce) {
   .oc-titlebar-window > .oc-titlebar { animation: none; }
@@ -7060,6 +7477,229 @@ a.oc-tree-label:focus-visible { outline: 2px solid var(--oc-ring); outline-offse
   .oc-chart-line__dot, .oc-chart-line__tip { transition: none; }
 }
 
+/* parts/data-meter-row.css */
+/* File: packages/ui/src/parts/data-meter-row.css | Map: row grid -> label and value -> bar and fill -> levels -> reset line -> list */
+/* Usage meter row: a label, the usage as text, a bar and when it resets. The fill comes from
+   --oc-meter (0–100%); data-level="warn" or "critical" changes the color. */
+
+.oc-meter-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: 0.375rem 0.75rem;
+}
+.oc-meter-row__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 600; }
+.oc-meter-row__value { font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--oc-muted-foreground); white-space: nowrap; }
+.oc-meter-row__value strong { color: var(--oc-foreground); }
+.oc-meter-row__bar {
+  grid-column: 1 / -1;
+  block-size: 0.5rem;
+  overflow: hidden;
+  background: var(--oc-muted);
+  border-radius: 999px;
+}
+.oc-meter-row__bar::before {
+  content: "";
+  display: block;
+  inline-size: clamp(0%, var(--oc-meter, 0%), 100%);
+  block-size: 100%;
+  background: var(--oc-meter-color, var(--oc-success));
+  border-radius: inherit;
+  transition: inline-size 0.4s ease;
+}
+.oc-meter-row[data-level="warn"] { --oc-meter-color: var(--oc-warning); }
+.oc-meter-row[data-level="critical"] { --oc-meter-color: var(--oc-destructive); }
+.oc-meter-row[data-level="critical"] .oc-meter-row__value strong { color: var(--oc-destructive); }
+.oc-meter-row__reset { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--oc-muted-foreground); }
+.oc-meter-list { display: grid; gap: 1rem; }
+.oc-meter-list--compact { gap: 0.625rem; }
+.oc-meter-list--compact .oc-meter-row__bar { block-size: 0.375rem; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-meter-row__bar::before { transition: none; }
+}
+
+/* parts/data-price.css */
+/* File: packages/ui/src/parts/data-price.css | Map: price block -> main line (amount, old price, discount) -> VAT note and alternative -> sizes and sale */
+/* A price as shops and quotes show it: the amount, an optional old price and discount badge, a VAT note
+   ("excl. VAT") and the other amount ("€ 121,00 incl. VAT"). Numbers use tabular digits. */
+
+.oc-price { display: inline-grid; gap: 0.125rem; min-inline-size: 0; }
+.oc-price__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
+.oc-price__amount { font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.oc-price__old { font-size: 0.875rem; color: var(--oc-muted-foreground); text-decoration: line-through; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.oc-price__main > .oc-badge { align-self: center; }
+.oc-price__note { font-size: 0.75rem; font-weight: 500; color: var(--oc-muted-foreground); }
+.oc-price__alt { font-size: 0.8125rem; color: var(--oc-muted-foreground); font-variant-numeric: tabular-nums; }
+
+.oc-price--sm .oc-price__amount { font-size: 1rem; }
+.oc-price--lg .oc-price__amount { font-size: 1.75rem; }
+.oc-price--sale .oc-price__amount { color: var(--oc-destructive); }
+/* Inline: amount and note on one line (table cells, lists). */
+.oc-price--inline { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
+.oc-price--inline .oc-price__amount { font-size: inherit; font-weight: 600; }
+td[data-numeric] > .oc-price, .oc-price--end { justify-items: end; text-align: end; }
+td[data-numeric] > .oc-price .oc-price__main, .oc-price--end .oc-price__main { justify-content: flex-end; }
+
+/* parts/data-ribbon.css */
+/* File: packages/ui/src/parts/data-ribbon.css | Map: host (positioned, clipped) -> ribbon band -> four corners -> tones -> size -> RTL */
+/* Corner ribbon: a diagonal band across one corner of a card, an image or a document ("Paid", "New", "Sale").
+   Put .oc-ribbon as a child of the box; the box gets position: relative and clips the band (zero specificity,
+   so your own position or overflow wins). The text is real text, so screen readers read it. */
+
+:where(:has(> .oc-ribbon)) { position: relative; overflow: clip; }
+
+.oc-ribbon {
+  /* Distance from the corner to the middle of the band, along both edges. */
+  --oc-ribbon-inset: 2.25rem;
+  --oc-ribbon-x: 1;
+  --oc-ribbon-y: -1;
+  --oc-ribbon-turn: 45deg;
+  --oc-ribbon-bg: var(--oc-primary);
+  --oc-ribbon-fg: var(--oc-primary-foreground);
+  position: absolute;
+  z-index: 2;
+  inset-block-start: var(--oc-ribbon-inset);
+  inset-inline-end: var(--oc-ribbon-inset);
+  inline-size: calc(var(--oc-ribbon-inset) * 2.83 + 3rem);
+  padding: 0.3em 0;
+  overflow: hidden;
+  color: var(--oc-ribbon-fg);
+  background: var(--oc-ribbon-bg);
+  box-shadow: 0 1px 3px oklch(0 0 0 / 0.18);
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: 0.08em;
+  text-align: center;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+  pointer-events: none;
+  translate: calc(50% * var(--oc-ribbon-x)) calc(50% * var(--oc-ribbon-y));
+  rotate: var(--oc-ribbon-turn);
+}
+
+/* Corners: top end is the default. */
+.oc-ribbon--top-start {
+  inset-inline-end: auto;
+  inset-inline-start: var(--oc-ribbon-inset);
+  --oc-ribbon-x: -1;
+  --oc-ribbon-turn: -45deg;
+}
+.oc-ribbon--bottom-end {
+  inset-block-start: auto;
+  inset-block-end: var(--oc-ribbon-inset);
+  --oc-ribbon-y: 1;
+  --oc-ribbon-turn: -45deg;
+}
+.oc-ribbon--bottom-start {
+  inset-block-start: auto;
+  inset-block-end: var(--oc-ribbon-inset);
+  inset-inline-end: auto;
+  inset-inline-start: var(--oc-ribbon-inset);
+  --oc-ribbon-x: -1;
+  --oc-ribbon-y: 1;
+}
+
+/* Tones. */
+.oc-ribbon--success { --oc-ribbon-bg: var(--oc-success); --oc-ribbon-fg: var(--oc-success-foreground); }
+.oc-ribbon--warning { --oc-ribbon-bg: var(--oc-warning); --oc-ribbon-fg: var(--oc-warning-foreground); }
+.oc-ribbon--destructive { --oc-ribbon-bg: var(--oc-destructive); --oc-ribbon-fg: var(--oc-destructive-foreground); }
+.oc-ribbon--muted { --oc-ribbon-bg: var(--oc-muted); --oc-ribbon-fg: var(--oc-muted-foreground); }
+
+/* Sizes: a smaller band for a product card, a larger one for a document or a hero image. */
+.oc-ribbon--sm { --oc-ribbon-inset: 1.6rem; font-size: 0.625rem; }
+.oc-ribbon--lg { --oc-ribbon-inset: 2.9rem; font-size: 0.875rem; }
+
+/* Right to left: start and end swap sides, so the band leans the other way. */
+.oc-ribbon:dir(rtl) { translate: calc(-50% * var(--oc-ribbon-x)) calc(50% * var(--oc-ribbon-y)); rotate: calc(var(--oc-ribbon-turn) * -1); }
+
+@media (forced-colors: active) {
+  .oc-ribbon { forced-color-adjust: none; color: Canvas; background: CanvasText; }
+}
+
+/* parts/data-spec-list.css */
+/* File: packages/ui/src/parts/data-spec-list.css | Map: list (container) -> groups in columns -> group title -> rows (term / value) -> stack modifier */
+/* Technical specifications in named groups (Dimensions, Electrical, Package …): label / value rows with tabular
+   digits. Two columns of groups once the list is wide enough (container query), one column with --stack. */
+
+.oc-spec-list { container-type: inline-size; inline-size: 100%; display: grid; gap: 1.25rem; min-inline-size: 0; }
+@container (min-width: 40rem) {
+  .oc-spec-list:not(.oc-spec-list--stack) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.25rem 2rem; }
+}
+.oc-spec-group { min-inline-size: 0; }
+.oc-spec-group__title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 0.25rem;
+  padding-block-end: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--oc-muted-foreground);
+  border-block-end: 1px solid var(--oc-border);
+}
+.oc-spec-group__title > :is(svg, iconify-icon) { inline-size: 1rem; block-size: 1rem; font-size: 1rem; }
+.oc-spec-group__rows { margin: 0; }
+.oc-spec-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
+  gap: 1rem;
+  padding: 0.4rem 0;
+  font-size: 0.875rem;
+  border-block-end: 1px dashed var(--oc-border);
+}
+.oc-spec-row:last-child { border-block-end: 0; }
+.oc-spec-row > dt { margin: 0; color: var(--oc-muted-foreground); }
+.oc-spec-row > dd { margin: 0; min-inline-size: 0; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.oc-spec-row > dd > small { margin-inline-start: 0.25rem; font-weight: 400; color: var(--oc-muted-foreground); }
+
+/* parts/data-stock.css */
+/* File: packages/ui/src/parts/data-stock.css | Map: indicator (dot + text) -> levels (ok, low, out, order) -> badge variant -> count */
+/* Stock status: a colored dot with a short text ("In stock", "Only 3 left", "Out of stock", "On order").
+   data-level picks the color; the text always says it too, so color is never the only signal. */
+
+.oc-stock {
+  --oc-stock-color: var(--oc-success);
+  /* Inline text (not flex), so "Only <b>3</b> left" keeps normal word spacing. */
+  display: inline-block;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--oc-foreground);
+  white-space: nowrap;
+}
+.oc-stock::before {
+  content: "";
+  display: inline-block;
+  margin-inline-end: 0.4rem;
+  vertical-align: 0.05em;
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  background: var(--oc-stock-color);
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px oklch(from var(--oc-stock-color) l c h / 0.18);
+}
+.oc-stock[data-level="low"] { --oc-stock-color: var(--oc-warning); }
+.oc-stock[data-level="out"] { --oc-stock-color: var(--oc-destructive); }
+.oc-stock[data-level="order"] { --oc-stock-color: var(--oc-info, light-dark(var(--color-deepskyblue-70), var(--color-skyblue-50))); }
+.oc-stock__count { font-weight: 700; font-variant-numeric: tabular-nums; }
+.oc-stock__note { font-weight: 400; color: var(--oc-muted-foreground); }
+
+/* Badge: a tinted pill (table cells, product cards). */
+.oc-stock--badge {
+  padding: 0.125rem 0.5rem 0.125rem 0.45rem;
+  font-size: 0.75rem;
+  color: color-mix(in oklch, var(--oc-stock-color) 75%, var(--oc-foreground));
+  background: oklch(from var(--oc-stock-color) l c h / 0.12);
+  border: 1px solid oklch(from var(--oc-stock-color) l c h / 0.3);
+  border-radius: 999px;
+}
+.oc-stock--badge::before { inline-size: 0.4rem; block-size: 0.4rem; margin-inline-end: 0.3rem; vertical-align: 0.1em; box-shadow: none; }
+
 /* parts/forms-affix-input.css */
 /* File: packages/ui/src/parts/forms-affix-input.css
    Map: --affix group (frame on the wrapper) -> inner input -> inline affix (€, %, @) -> states -> --end alignment
@@ -7088,7 +7728,7 @@ a.oc-tree-label:focus-visible { outline: 2px solid var(--oc-ring); outline-offse
   min-inline-size: 0;
 }
 
-/* Symbol column: same chrome as the Korrekt / OmniaDesk fields (€, %, @, barcode icon).
+/* Symbol column: the same chrome as the other fields (€, %, @, barcode icon).
    A divider separates the symbol from the value. */
 .oc-input-group.oc-input-group--affix .oc-input-addon {
   align-self: stretch;
@@ -7137,6 +7777,51 @@ a.oc-tree-label:focus-visible { outline: 2px solid var(--oc-ring); outline-offse
 }
 .oc-input-group--affix:has(.oc-input:disabled) .oc-input { opacity: 1; }
 
+/* parts/forms-avatar-picker.css */
+/* File: packages/ui/src/parts/forms-avatar-picker.css | Map: picker -> preview (initials or image) -> file input -> text and buttons -> drop state -> square and logo */
+/* Logo or avatar picker: a preview, "Upload" and "Remove", a hint, and dropping a file
+   on the preview. The file input is a real <input type="file">; packages/ui/src/avatar-picker.js shows the preview. */
+
+.oc-avatar-picker { display: flex; align-items: center; gap: 1rem; }
+.oc-avatar-picker__preview {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: var(--oc-avatar-picker-size, 4.5rem);
+  block-size: var(--oc-avatar-picker-size, 4.5rem);
+  overflow: hidden;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-muted);
+  border: 1px dashed var(--oc-border-strong, var(--oc-border));
+  border-radius: 50%;
+  cursor: pointer;
+}
+.oc-avatar-picker--square .oc-avatar-picker__preview { border-radius: var(--oc-radius); }
+.oc-avatar-picker__preview img { inline-size: 100%; block-size: 100%; object-fit: cover; }
+.oc-avatar-picker--logo .oc-avatar-picker__preview img { object-fit: contain; padding: 0.375rem; background: var(--color-white-50); }
+.oc-avatar-picker__preview:has(img) { border-style: solid; }
+.oc-avatar-picker__preview:hover,
+.oc-avatar-picker.is-dragover .oc-avatar-picker__preview {
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.08);
+  border-color: var(--oc-primary);
+}
+.oc-avatar-picker__preview:has(:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-avatar-picker__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+.oc-avatar-picker__text { display: grid; gap: 0.375rem; min-inline-size: 0; }
+.oc-avatar-picker__label { font-size: 0.875rem; font-weight: 600; }
+.oc-avatar-picker__hint { font-size: 0.75rem; color: var(--oc-muted-foreground); }
+.oc-avatar-picker__actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
+/* "Remove" only while there is an image. */
+.oc-avatar-picker:not(:has(.oc-avatar-picker__preview img)) [data-oc-avatar-remove] { display: none; }
+/* A refused file (wrong type or too large): red outline and the reason under the buttons. */
+.oc-avatar-picker.is-invalid .oc-avatar-picker__preview { border-color: var(--oc-destructive); }
+.oc-avatar-picker__error { font-size: 0.75rem; font-weight: 500; color: var(--oc-destructive); }
+
 /* parts/forms-barcode-input.css */
 /* File: packages/ui/src/parts/forms-barcode-input.css
    Map: wrapper (field + preview stacked) -> monospace field -> preview area -> placeholder bars -> code caption -> empty / invalid states
@@ -7406,6 +8091,61 @@ a.oc-tree-label:focus-visible { outline: 2px solid var(--oc-ring); outline-offse
 /* Small swatches. */
 .oc-color-select--sm .oc-color-select-swatch { inline-size: 1.25rem; block-size: 1.25rem; }
 
+/* parts/forms-date-field.css */
+/* File: packages/ui/src/parts/forms-date-field.css | Map: field frame -> icon zone -> native date input -> ISO week label -> sizes and states */
+/* Date field: calendar icon | line | date, with the ISO week at the end when wanted.
+   The date is a native <input type="date"> (keyboard, picker and locale from the browser). The week label is filled
+   by packages/ui/src/date-field.js (or by your own code). */
+
+.oc-date-field {
+  display: inline-flex;
+  align-items: stretch;
+  block-size: 2.5rem;
+  background: var(--oc-background);
+  border: 1px solid var(--oc-input, var(--oc-border));
+  border-radius: var(--oc-radius);
+  overflow: hidden;
+}
+.oc-date-field:focus-within { border-color: var(--oc-ring); box-shadow: 0 0 0 3px oklch(from var(--oc-ring) l c h / 0.18); }
+.oc-date-field__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.5rem;
+  font-size: 1.125rem;
+  color: var(--oc-muted-foreground);
+  border-inline-end: 1px solid var(--oc-border);
+}
+.oc-date-field__input {
+  min-inline-size: 0;
+  padding: 0 0.75rem;
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--oc-foreground);
+  background: transparent;
+  border: 0;
+  outline: none;
+}
+.oc-date-field__input::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
+/* ISO week: a quiet label at the end ("Week 45"); hidden while there is no date. */
+.oc-date-field__week {
+  display: inline-flex;
+  align-items: center;
+  padding-inline: 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.08);
+  border-inline-start: 1px solid var(--oc-border);
+  white-space: nowrap;
+}
+.oc-date-field__week:empty { display: none; }
+.oc-date-field--sm { block-size: 2rem; }
+.oc-date-field--sm .oc-date-field__icon { inline-size: 2rem; font-size: 1rem; }
+.oc-date-field:has(.oc-date-field__input:disabled) { opacity: 0.55; }
+.oc-date-field:has(.oc-date-field__input[aria-invalid="true"]) { border-color: var(--oc-destructive); }
+
 /* parts/forms-decimal-input.css */
 /* File: packages/ui/src/parts/forms-decimal-input.css
    Map: field (right-aligned tabular digits) -> unit suffix wrapper -> states -> --start alignment
@@ -7459,6 +8199,21 @@ a.oc-tree-label:focus-visible { outline: 2px solid var(--oc-ring); outline-offse
 /* Disabled wrapper. */
 .oc-decimal-field:has(.oc-decimal-input:disabled) { opacity: 0.5; cursor: not-allowed; }
 
+/* parts/forms-density.css */
+/* File: packages/ui/src/parts/forms-density.css | Map: compact scope -> inputs, selects, date fields, textareas -> buttons -> field gaps */
+/* Form density: .oc-density-compact on a form or any wrapper makes its controls
+   2rem high instead of 2.5rem, for dense editors (invoice templates, inline tables). The default needs no class. */
+
+.oc-density-compact :is(.oc-input, .oc-select, .oc-date-field) { block-size: 2rem; font-size: 0.8125rem; }
+.oc-density-compact :is(.oc-input, .oc-select) { padding-block: 0; }
+.oc-density-compact .oc-textarea { padding-block: 0.375rem; font-size: 0.8125rem; }
+.oc-density-compact .oc-date-field__icon { inline-size: 2rem; font-size: 1rem; }
+.oc-density-compact .oc-date-field__input { font-size: 0.8125rem; }
+.oc-density-compact .oc-btn:not(.oc-btn--icon, .oc-btn--plain, .oc-btn--inline) { padding-block: 0.3125rem; font-size: 0.8125rem; }
+.oc-density-compact .oc-btn--icon { --oc-btn-square: 2rem; }
+.oc-density-compact .oc-field { gap: 0.25rem; }
+.oc-density-compact .oc-field-label { font-size: 0.75rem; }
+
 /* parts/forms-filter-counts.css */
 /* File: packages/ui/src/parts/forms-filter-counts.css
    Map: group (grid of tiles) -> tile (label + hidden radio) -> value / label / hint -> tones -> states -> --compact
@@ -7555,38 +8310,182 @@ a.oc-tree-label:focus-visible { outline: 2px solid var(--oc-ring); outline-offse
 .oc-filter-counts--compact .oc-filter-counts-label { font-size: 0.8rem; font-weight: 500; }
 .oc-filter-counts--compact .oc-filter-counts-hint { display: none; }
 
-/* parts/forms-language-select.css */
-/* File: packages/ui/src/parts/forms-language-select.css
-   Map: wrapper (icon + native select) -> icon -> select control -> chevron -> states -> --ghost / --currency
-   Language select: compact locale (or currency) switcher for a site header.
-   A native <select> inside a small frame with a leading icon or symbol. The app reacts to "change". */
+/* parts/forms-form-section.css */
+/* File: packages/ui/src/parts/forms-form-section.css | Map: section (details) -> summary (icon, title, hint, status, chevron) -> body grid -> invalid state */
+/* Collapsible form section: a long form in named parts that open and close.
+   Native <details>; sections with the same name="" keep one open at a time. */
 
-/* Wrapper: inline frame; the select is stretched over it so the whole pill is clickable. */
-.oc-language-select {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding-inline: 0.625rem 0.5rem;
-  border: 1px solid var(--oc-input);
-  border-radius: 999px;
-  color: var(--oc-foreground);
-  font-size: 0.8rem;
-  transition: border-color var(--oc-transition-fast), background var(--oc-transition-fast);
+.oc-form-section {
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
 }
-
-.oc-language-select:hover { background: var(--oc-surface); }
-
-.oc-language-select:focus-within {
-  border-color: var(--oc-ring);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
+.oc-form-section + .oc-form-section { margin-block-start: 0.75rem; }
+.oc-form-section__summary {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 0.25rem 0.75rem;
+  padding: 0.875rem 1rem;
+  list-style: none;
+  cursor: pointer;
 }
-
-/* Leading icon (inline SVG globe) or symbol (€, $). Decorative: aria-hidden="true". */
-.oc-language-select-icon {
+.oc-form-section__summary::-webkit-details-marker { display: none; }
+.oc-form-section__summary:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; border-radius: var(--oc-radius); }
+.oc-form-section__icon {
   display: inline-flex;
-  flex: none;
-  inline-size: 1rem;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  font-size: 1.25rem;
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.1);
+  border-radius: calc(var(--oc-radius) - 2px);
+}
+.oc-form-section__heading { display: grid; gap: 0.125rem; min-inline-size: 0; }
+.oc-form-section__title { margin: 0; font-size: 0.9375rem; font-weight: 600; }
+.oc-form-section__hint { margin: 0; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-form-section__status { font-size: 0.75rem; white-space: nowrap; }
+.oc-form-section__summary::after {
+  content: "";
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+  background: var(--oc-muted-foreground);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
+  transition: rotate var(--oc-transition-fast);
+}
+.oc-form-section[open] > .oc-form-section__summary::after { rotate: 180deg; }
+.oc-form-section__body {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+  gap: 1rem;
+  padding: 1rem;
+  border-block-start: 1px solid var(--oc-border);
+}
+.oc-form-section__body > .oc-form-section__wide { grid-column: 1 / -1; }
+/* A section with an invalid field gets a red edge, also while closed, so an error is never hidden. */
+.oc-form-section:has(:user-invalid, [aria-invalid="true"]) { border-color: var(--oc-destructive); }
+.oc-form-section:has(:user-invalid, [aria-invalid="true"]) .oc-form-section__icon {
+  color: var(--oc-destructive);
+  background: oklch(from var(--oc-destructive) l c h / 0.1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-form-section__summary::after { transition: none; }
+}
+
+/* parts/forms-form.css */
+/* File: packages/ui/src/parts/forms-form.css */
+/* Map: form grid -> label hint -> actions + note -> busy -> filled variant */
+/* A form as one grid of fields with one gap, an "(optional)" hint in a label, a row with the submit button and a short
+   note, the busy state while it sends (aria-busy on the form), and .oc-form--filled: fields with a fill and a stronger
+   border, for a form on a card, a photo or a dark band. All through the field tokens of .oc-input. */
+
+.oc-form {
+  display: grid;
+  gap: var(--oc-form-gap, 1.1rem);
+}
+.oc-form .oc-field-group { gap: var(--oc-form-gap, 1.1rem); }
+.oc-form .oc-field {
+  gap: 0.4rem;
+  margin-bottom: 0;
+}
+
+/* <label class="oc-field-label">Phone <span class="oc-field-label__hint">(optional)</span></label> */
+.oc-field-label__hint {
+  color: var(--oc-muted-foreground);
+  font-weight: 400;
+}
+
+/* Submit button with a short note next to it (wraps under it on a narrow form). */
+.oc-form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem 1.5rem;
+  margin-block-start: 0.4rem;
+}
+.oc-form-note {
+  flex: 1 1 16rem;
+  margin: 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.85rem;
+}
+.oc-form-note a {
+  color: var(--oc-primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.oc-form-note a:hover { color: var(--oc-foreground); }
+
+/* While the form sends (form aria-busy="true"): the submit button dims and shows a progress cursor. */
+.oc-form[aria-busy="true"] :is([type="submit"], button:not([type])) {
+  opacity: 0.7;
+  cursor: progress;
+}
+
+/* Filled fields: a fill (dark in dark mode), the strong border, more room and a wider focus ring. */
+.oc-form--filled {
+  --oc-input-bg: light-dark(oklch(from var(--oc-foreground) l c h / 0.03), oklch(0 0 0 / 0.25));
+  --oc-input-border: var(--oc-border-strong);
+  --oc-input-padding: 0.75rem 0.9rem;
+  --oc-input-radius: var(--oc-radius-md, 0.75rem);
+  --oc-input-size: 1rem;
+  --oc-ring-width: 3px;
+  --oc-textarea-min: 9rem;
+}
+.oc-form--filled .oc-field-label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.oc-form--filled .oc-field-error { font-size: 0.85rem; }
+.oc-form--filled .oc-select option { background: var(--oc-card); }
+
+/* Honeypot: a field for bots, off screen for people. Not display:none (some bots skip hidden fields). Give the wrapper
+   aria-hidden="true" and the input tabindex="-1" autocomplete="off"; the server ignores a form where it is filled. */
+.oc-honeypot {
+  position: absolute;
+  inset-inline-start: -10000px;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+}
+
+/* parts/forms-language-select.css */
+/* File: packages/ui/src/parts/forms-language-select.css
+   Map: wrapper (icon + native select) -> icon -> select control -> chevron -> states -> --ghost / --currency
+   Language select: compact locale (or currency) switcher for a site header.
+   A native <select> inside a small frame with a leading icon or symbol. The app reacts to "change". */
+
+/* Wrapper: inline frame; the select is stretched over it so the whole pill is clickable. */
+.oc-language-select {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding-inline: 0.625rem 0.5rem;
+  border: 1px solid var(--oc-input);
+  border-radius: 999px;
+  color: var(--oc-foreground);
+  font-size: 0.8rem;
+  transition: border-color var(--oc-transition-fast), background var(--oc-transition-fast);
+}
+
+.oc-language-select:hover { background: var(--oc-surface); }
+
+.oc-language-select:focus-within {
+  border-color: var(--oc-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
+}
+
+/* Leading icon (inline SVG globe) or symbol (€, $). Decorative: aria-hidden="true". */
+.oc-language-select-icon {
+  display: inline-flex;
+  flex: none;
+  inline-size: 1rem;
   justify-content: center;
   color: var(--oc-muted-foreground);
   font-weight: 600;
@@ -7890,6 +8789,146 @@ button.oc-language-select:hover { background: var(--oc-surface); }
   font-size: 0.8rem;
 }
 
+/* parts/forms-quantity.css */
+/* File: packages/ui/src/parts/forms-quantity.css | Map: frame -> step buttons -> number input (no spinners) -> focus and disabled -> sizes */
+/* Quantity field: minus, a number input and plus in one frame. Without a script it is a normal number input
+   (the browser's arrows and keyboard); form-extras.js makes the buttons step within min / max / step. */
+
+.oc-quantity {
+  display: inline-flex;
+  inline-size: fit-content;
+  justify-self: start;
+  align-items: stretch;
+  block-size: 2.25rem;
+  background: var(--oc-background);
+  border: 1px solid var(--oc-input, var(--oc-border));
+  border-radius: var(--oc-radius);
+  overflow: hidden;
+}
+.oc-quantity__step {
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: 2.25rem;
+  padding: 0;
+  font: inherit;
+  color: var(--oc-muted-foreground);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+.oc-quantity__step > :is(svg, iconify-icon) { inline-size: 1rem; block-size: 1rem; font-size: 1rem; }
+.oc-quantity__step:hover { color: var(--oc-foreground); background: var(--oc-accent); }
+.oc-quantity__step:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-quantity__step:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; }
+.oc-quantity__input {
+  inline-size: 3.25rem;
+  min-inline-size: 0;
+  padding: 0 0.25rem;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  color: var(--oc-foreground);
+  background: transparent;
+  border: 0;
+  border-inline: 1px solid var(--oc-border);
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.oc-quantity__input::-webkit-outer-spin-button,
+.oc-quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.oc-quantity__input:focus { outline: none; }
+.oc-quantity:has(.oc-quantity__input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-quantity:has(.oc-quantity__input:disabled) { opacity: 0.5; }
+.oc-quantity--sm { block-size: 2rem; }
+.oc-quantity--sm .oc-quantity__step { inline-size: 2rem; }
+.oc-quantity--sm .oc-quantity__input { inline-size: 2.75rem; font-size: 0.8125rem; }
+
+/* parts/forms-rating.css */
+/* File: packages/ui/src/parts/forms-rating.css | Map: star mask -> rating (display) -> sizes -> summary line -> rating input (radios, hover preview) -> focus */
+/* Star rating without JavaScript. .oc-rating shows a score (--oc-rating, halves and decimals work); .oc-rating-input
+   is five radio buttons drawn as stars: :has() fills up to the checked or hovered star. */
+
+.oc-rating,
+.oc-rating-input {
+  --oc-rating-size: 1.125rem;
+  --oc-rating-color: var(--oc-warning);
+  --oc-rating-empty: oklch(from var(--oc-muted-foreground) l c h / 0.28);
+  --oc-rating-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21z'/%3E%3C/svg%3E");
+}
+
+/* Display: one bar of five stars; the fill is the score out of --oc-rating-max (default 5). */
+.oc-rating {
+  --oc-rating: 0;
+  --oc-rating-max: 5;
+  display: inline-block;
+  flex-shrink: 0;
+  inline-size: calc(var(--oc-rating-size) * var(--oc-rating-max));
+  block-size: var(--oc-rating-size);
+  vertical-align: middle;
+  background: linear-gradient(90deg, var(--oc-rating-color) calc(var(--oc-rating) / var(--oc-rating-max) * 100%), var(--oc-rating-empty) 0);
+  -webkit-mask: var(--oc-rating-star) left center / var(--oc-rating-size) var(--oc-rating-size) repeat-x;
+  mask: var(--oc-rating-star) left center / var(--oc-rating-size) var(--oc-rating-size) repeat-x;
+}
+.oc-rating--sm, .oc-rating-input.oc-rating-input--sm { --oc-rating-size: 0.875rem; }
+.oc-rating--lg, .oc-rating-input.oc-rating-input--lg { --oc-rating-size: 1.5rem; }
+
+/* Summary: stars, the score and the number of reviews on one line. */
+.oc-rating-summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.875rem; }
+.oc-rating-summary__score { font-weight: 700; font-variant-numeric: tabular-nums; }
+.oc-rating-summary__count { color: var(--oc-muted-foreground); }
+a.oc-rating-summary__count { text-decoration: underline; text-underline-offset: 0.2em; }
+a.oc-rating-summary__count:hover { color: var(--oc-foreground); }
+
+/* Input: a fieldset with five labels (radio inside). The stars are one masked bar behind the labels. */
+.oc-rating-input {
+  position: relative;
+  display: inline-flex;
+  inline-size: calc(var(--oc-rating-size) * 5 + 0.5rem);
+  block-size: calc(var(--oc-rating-size) + 0.5rem);
+  margin: 0;
+  padding: 0.25rem;
+  border: 0;
+  border-radius: calc(var(--oc-radius) - 2px);
+}
+.oc-rating-input::before {
+  content: "";
+  position: absolute;
+  inset: 0.25rem;
+  background: linear-gradient(90deg, var(--oc-rating-color) calc(var(--oc-rating-hover, var(--oc-rating-pick, 0)) * var(--oc-rating-size)), var(--oc-rating-empty) 0);
+  -webkit-mask: var(--oc-rating-star) left center / var(--oc-rating-size) var(--oc-rating-size) repeat-x;
+  mask: var(--oc-rating-star) left center / var(--oc-rating-size) var(--oc-rating-size) repeat-x;
+  pointer-events: none;
+}
+.oc-rating-input > legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.oc-rating-input > label { position: relative; z-index: 1; flex: 0 0 var(--oc-rating-size); cursor: pointer; }
+.oc-rating-input > label > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.oc-rating-input > label > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+.oc-rating-input:has(label:nth-of-type(1) input:checked) { --oc-rating-pick: 1; }
+.oc-rating-input:has(label:nth-of-type(2) input:checked) { --oc-rating-pick: 2; }
+.oc-rating-input:has(label:nth-of-type(3) input:checked) { --oc-rating-pick: 3; }
+.oc-rating-input:has(label:nth-of-type(4) input:checked) { --oc-rating-pick: 4; }
+.oc-rating-input:has(label:nth-of-type(5) input:checked) { --oc-rating-pick: 5; }
+/* Hover preview (pointer devices only, so a tap does not leave a preview behind). */
+@media (hover: hover) {
+  .oc-rating-input:has(label:nth-of-type(1):hover) { --oc-rating-hover: 1; }
+  .oc-rating-input:has(label:nth-of-type(2):hover) { --oc-rating-hover: 2; }
+  .oc-rating-input:has(label:nth-of-type(3):hover) { --oc-rating-hover: 3; }
+  .oc-rating-input:has(label:nth-of-type(4):hover) { --oc-rating-hover: 4; }
+  .oc-rating-input:has(label:nth-of-type(5):hover) { --oc-rating-hover: 5; }
+}
+.oc-rating-input:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-rating-input:has(input:disabled) { opacity: 0.5; }
+.oc-rating-input:has(input:disabled) > label,
+.oc-rating-input:has(input:disabled) > label > input { cursor: not-allowed; }
+
+@media (forced-colors: active) {
+  .oc-rating, .oc-rating-input::before { --oc-rating-color: CanvasText; --oc-rating-empty: GrayText; forced-color-adjust: none; }
+}
+
 /* parts/forms-time-input.css */
 /* File: packages/ui/src/parts/forms-time-input.css
    Map: 24h text field (HH:mm) -> invalid state -> slot list (radio chips) -> slot states -> --sm
@@ -8064,7 +9103,7 @@ button.oc-language-select:hover { background: var(--oc-surface); }
 /* File: packages/ui/src/parts/media-attachment.css | Map: list -> file chip (icon by type, name, size, open/remove) -> type tones
    -> uploading progress + error -> image preview (in a message) -> thumbnail chip (in a composer) -> reduced motion
    Attachment: a file chip or an image preview inside a chat message or a composer. The icon tile shows the extension and is
-   tinted per type (--pdf, --doc, --sheet, --zip, --image). Based on the attachment picker of the Korrekt question chat. */
+   tinted per type (--pdf, --doc, --sheet, --zip, --image). */
 
 .oc-attachment-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
 .oc-attachment-list--stack { flex-direction: column; flex-wrap: nowrap; }
@@ -8222,6 +9261,31 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
   .oc-attachment, .oc-attachment--uploading::after { transition: none; }
 }
 
+/* parts/media-barcode.css */
+/* File: packages/ui/src/parts/media-barcode.css | Map: barcode figure -> svg bars -> digits -> sizes (hero, compact) -> error */
+/* Barcode display: EAN-13, EAN-8, UPC-A or Code 128, drawn as SVG by
+   packages/ui/src/barcode.js from data-value. Always black bars on white, in both themes, so scanners read it. */
+
+.oc-barcode {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: var(--color-black-50);
+  background: var(--color-white-50);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+}
+.oc-barcode svg { display: block; inline-size: auto; block-size: var(--oc-barcode-height, 4rem); max-inline-size: 100%; }
+.oc-barcode__digits { font-family: var(--oc-font-mono); font-size: 0.8125rem; letter-spacing: 0.18em; color: inherit; }
+.oc-barcode--hero { padding: 1.25rem 1.5rem; --oc-barcode-height: 6rem; }
+.oc-barcode--hero .oc-barcode__digits { font-size: 1rem; }
+.oc-barcode--compact { padding: 0.375rem 0.5rem; --oc-barcode-height: 2.25rem; }
+.oc-barcode--compact .oc-barcode__digits { font-size: 0.6875rem; letter-spacing: 0.1em; }
+.oc-barcode[data-error] .oc-barcode__digits { color: var(--color-red-70); letter-spacing: 0; }
+
 /* parts/media-browser-frame.css */
 /* File: packages/ui/src/parts/media-browser-frame.css | Map: frame -> chrome bar (dots, address pill, actions)
    -> view (screenshot slot, ratio) -> caption -> minimal / dark / tilt modifiers -> motion
@@ -8441,6 +9505,9 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
   line-height: 1;
   cursor: pointer;
 }
+/* Webicons in the buttons (inline SVG or <iconify-icon>): a fixed size, so nothing is cut off at the round edge. */
+.oc-chat-composer__tool > :is(svg, iconify-icon) { inline-size: 1.25rem; block-size: 1.25rem; font-size: 1.25rem; }
+.oc-chat-composer__send > :is(svg, iconify-icon) { inline-size: 1.125rem; block-size: 1.125rem; font-size: 1.125rem; }
 .oc-chat-composer__tool:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
 .oc-chat-composer__tool:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
 
@@ -8645,9 +9712,11 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
   background: transparent;
   font-size: 1.15rem;
   line-height: 1;
+  color: var(--oc-muted-foreground);
   cursor: pointer;
 }
-.oc-emoji-picker__trigger:hover { background: var(--oc-surface-strong); }
+.oc-emoji-picker__trigger > :is(svg, iconify-icon) { inline-size: 1.25rem; block-size: 1.25rem; font-size: 1.25rem; }
+.oc-emoji-picker__trigger:hover { color: var(--oc-foreground); background: var(--oc-surface-strong); }
 .oc-emoji-picker__trigger:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
 
 /* The panel: floats above the trigger (implicit anchor of popovertarget), flips when there is no room. */
@@ -8851,6 +9920,216 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
   .oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__face--back { opacity: 1; visibility: visible; }
 }
 
+/* parts/media-gallery.css */
+/* File: packages/ui/src/parts/media-gallery.css | Map: gallery grid -> stage and slides (radio + :has, up to 8) -> badge -> thumbnails -> side layout (container query) */
+/* Product gallery without JavaScript: one large photo and a row of thumbnails. Every thumbnail is a label with a
+   radio; :has() shows the slide at the same position. Arrow keys move between the photos (native radios). */
+
+.oc-gallery { container-type: inline-size; inline-size: 100%; display: grid; gap: 0.75rem; min-inline-size: 0; }
+.oc-gallery__stage {
+  position: relative;
+  aspect-ratio: var(--oc-gallery-ratio, 4 / 3);
+  overflow: hidden;
+  background: var(--oc-muted);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+}
+.oc-gallery__slide { display: none; margin: 0; block-size: 100%; }
+.oc-gallery__slide > img { display: block; inline-size: 100%; block-size: 100%; object-fit: var(--oc-gallery-fit, contain); }
+.oc-gallery:not(:has(.oc-gallery__thumb input:checked)) .oc-gallery__slide:first-of-type,
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(1) input:checked) .oc-gallery__slide:nth-of-type(1),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(2) input:checked) .oc-gallery__slide:nth-of-type(2),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(3) input:checked) .oc-gallery__slide:nth-of-type(3),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(4) input:checked) .oc-gallery__slide:nth-of-type(4),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(5) input:checked) .oc-gallery__slide:nth-of-type(5),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(6) input:checked) .oc-gallery__slide:nth-of-type(6),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(7) input:checked) .oc-gallery__slide:nth-of-type(7),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(8) input:checked) .oc-gallery__slide:nth-of-type(8) { display: block; }
+.oc-gallery__badge { position: absolute; inset: 0.75rem auto auto 0.75rem; z-index: 1; }
+
+.oc-gallery__thumbs { display: flex; gap: 0.5rem; min-inline-size: 0; margin: 0; padding: 0.125rem; overflow-x: auto; border: 0; scrollbar-width: thin; }
+.oc-gallery__thumbs > legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.oc-gallery__thumb {
+  position: relative;
+  flex: 0 0 auto;
+  inline-size: var(--oc-gallery-thumb, 4rem);
+  aspect-ratio: 1;
+  overflow: hidden;
+  background: var(--oc-muted);
+  border: 2px solid transparent;
+  border-radius: var(--oc-radius);
+  outline: 1px solid var(--oc-border);
+  outline-offset: -1px;
+  cursor: pointer;
+}
+.oc-gallery__thumb > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
+.oc-gallery__thumb > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.oc-gallery__thumb:hover { outline-color: var(--oc-muted-foreground); }
+.oc-gallery__thumb:has(input:checked) { border-color: var(--oc-primary); outline-color: transparent; }
+.oc-gallery__thumb:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--oc-background), 0 0 0 4px var(--oc-ring); }
+
+/* Side: thumbnails in a column on the left once the gallery itself is 32rem wide or more. The grid is always two
+   tracks; below 32rem both children span them, so the query only moves the children (a container cannot query itself). */
+.oc-gallery--side { grid-template-columns: auto minmax(0, 1fr); }
+.oc-gallery--side > * { grid-column: 1 / -1; }
+@container (min-width: 32rem) {
+  .oc-gallery--side > .oc-gallery__stage { grid-column: 2; grid-row: 1; }
+  .oc-gallery--side > .oc-gallery__thumbs { grid-column: 1; grid-row: 1; flex-direction: column; overflow: visible; }
+}
+
+/* parts/media-glass-liquid.css */
+/* File: packages/ui/src/parts/media-glass-liquid.css
+   Map: liquid sheet (.oc-glass--liquid: clear tint, strong blur + saturation, inner light, specular rim) -> menu bar
+   (.oc-glass-bar: items with icon and label, the current one in a raised bubble) -> icon-only and round button -> fallbacks
+   Liquid glass in the style of recent desktop and phone systems, in CSS only: the backdrop is blurred and brightened,
+   the edge catches light. Put it over a photo or colourful content; on a plain page it looks like a soft card. */
+
+.oc-glass.oc-glass--liquid,
+.oc-glass--liquid,
+.oc-glass-bar,
+.oc-site-header--glass .oc-site-header__inner {
+  --oc-liquid-tint: light-dark(oklch(100% 0 0deg / 0.1), oklch(100% 0 0deg / 0.05));
+  --oc-liquid-edge: light-dark(oklch(100% 0 0deg / 0.55), oklch(100% 0 0deg / 0.22));
+  --oc-liquid-blur: 5px;
+  position: relative;
+  isolation: isolate;
+  background: var(--oc-liquid-tint);
+  border: 1px solid var(--oc-liquid-edge);
+  /* Light enters at the top left and leaves at the bottom right; a soft glow runs along the inner edge,
+     so the sheet reads as a thick, clear lens rather than frosted plastic. */
+  box-shadow:
+    0 10px 30px -10px oklch(0% 0 0deg / 0.35),
+    inset 2px 2px 1px -2px oklch(100% 0 0deg / 0.95),
+    inset -2px -2px 1px -2px oklch(100% 0 0deg / 0.7),
+    inset 0 0 10px 1px oklch(100% 0 0deg / 0.22),
+    inset 0 -8px 16px -12px oklch(100% 0 0deg / 0.35);
+  backdrop-filter: blur(var(--oc-liquid-blur)) saturate(1.9) brightness(1.1) contrast(1.05);
+}
+/* Specular rim: bright on the top-left and bottom-right edge, only on the border ring. */
+.oc-glass--liquid::before,
+.oc-glass-bar::before,
+.oc-site-header--glass .oc-site-header__inner::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  z-index: 1;
+  padding: 1.5px;
+  border-radius: inherit;
+  background: linear-gradient(135deg, oklch(100% 0 0deg / 1), oklch(100% 0 0deg / 0.15) 25%, oklch(100% 0 0deg / 0) 50%, oklch(100% 0 0deg / 0.15) 75%, oklch(100% 0 0deg / 0.8));
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+/* Menu bar: a pill of items, each an icon over a short label. */
+.oc-glass-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.35rem;
+  border-radius: 999px;
+}
+.oc-glass-bar__item {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 0.15rem;
+  min-inline-size: 4.25rem;
+  padding: 0.45rem 0.85rem;
+  border: 0;
+  border-radius: 999px;
+  color: light-dark(oklch(22% 0.02 260deg / 0.78), oklch(100% 0 0deg / 0.82));
+  background: none;
+  font: inherit;
+  font-size: 0.7rem;
+  font-weight: 600;
+  line-height: 1.1;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, scale 0.2s;
+}
+.oc-glass-bar__item > :is(svg, iconify-icon) { inline-size: 1.4rem; block-size: 1.4rem; font-size: 1.4rem; }
+.oc-glass-bar__item:hover { background: light-dark(oklch(100% 0 0deg / 0.28), oklch(100% 0 0deg / 0.08)); }
+.oc-glass-bar__item:active { scale: 0.94; }
+.oc-glass-bar__item:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+/* The current item sits in a raised, lighter bubble. */
+.oc-glass-bar__item:is([aria-current="page"], [aria-pressed="true"], :has(> input:checked)) {
+  color: light-dark(var(--oc-primary), var(--color-white-50));
+  background: light-dark(oklch(100% 0 0deg / 0.62), oklch(100% 0 0deg / 0.24));
+  box-shadow: inset 0 1px 1px oklch(100% 0 0deg / 0.85), 0 6px 14px -8px oklch(0% 0 0deg / 0.4);
+}
+.oc-glass-bar__item > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.oc-glass-bar__item:has(> input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* Icons only, and a separate round button next to the bar (search, compose). */
+.oc-glass-bar--icons .oc-glass-bar__item { min-inline-size: 0; padding: 0.6rem; }
+.oc-glass-bar--round { padding: 0.35rem; border-radius: 999px; }
+.oc-glass-bar--round .oc-glass-bar__item { min-inline-size: 0; padding: 0.6rem; }
+.oc-glass-bar__sep { align-self: stretch; inline-size: 1px; margin: 0.4rem 0.15rem; background: var(--oc-liquid-edge); }
+
+/* Less transparency asked for, or no backdrop-filter: a solid bar that still reads as one. */
+@media (prefers-reduced-transparency: reduce) {
+  .oc-glass--liquid, .oc-glass-bar { --oc-liquid-tint: var(--oc-card); backdrop-filter: none; }
+}
+@supports not (backdrop-filter: blur(1px)) {
+  .oc-glass--liquid, .oc-glass-bar { --oc-liquid-tint: light-dark(oklch(100% 0 0deg / 0.85), oklch(25% 0.02 260deg / 0.9)); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .oc-glass-bar__item { transition: none; }
+}
+
+/* parts/media-glass-options.css */
+/* File: packages/ui/src/parts/media-glass-options.css
+   Map: amount (--clear: more see-through, --frost: more frosted) -> light content on a colourful backdrop -> stage (moving colour blobs to show it off)
+   Extras for .oc-glass, .oc-glass--liquid and .oc-glass-bar (media-glass.css, media-glass-liquid.css). The selectors
+   carry two classes so they win over the base glass whatever order the parts load in. */
+
+/* Amount of glass: --clear lets more of the backdrop through, --frost hides more of it. */
+:is(.oc-glass, .oc-glass-bar).oc-glass--clear {
+  --oc-glass-sheet: light-dark(oklch(from var(--oc-background) l c h / 0.32), oklch(from var(--oc-background) l c h / 0.26));
+  --oc-glass-blur: 10px;
+  --oc-liquid-tint: light-dark(oklch(100% 0 0deg / 0.05), oklch(100% 0 0deg / 0.03));
+  --oc-liquid-blur: 2px;
+}
+:is(.oc-glass, .oc-glass-bar).oc-glass--frost {
+  --oc-glass-sheet: light-dark(oklch(from var(--oc-background) l c h / 0.86), oklch(from var(--oc-background) l c h / 0.8));
+  --oc-glass-blur: 40px;
+  --oc-liquid-tint: light-dark(oklch(100% 0 0deg / 0.38), oklch(100% 0 0deg / 0.12));
+  --oc-liquid-blur: 18px;
+}
+
+
+/* Light content: white icons and labels for glass over a dark or very colourful backdrop. */
+.oc-glass-bar.oc-glass-bar--light .oc-glass-bar__item {
+  color: oklch(100% 0 0deg / 0.92);
+  text-shadow: 0 1px 2px oklch(0% 0 0deg / 0.25);
+}
+.oc-glass-bar.oc-glass-bar--light .oc-glass-bar__item:is([aria-current="page"], [aria-pressed="true"], :has(> input:checked)) {
+  color: var(--color-white-50);
+  background: oklch(100% 0 0deg / 0.2);
+}
+.oc-glass-bar.oc-glass-bar--light .oc-glass-bar__item:hover { background: oklch(100% 0 0deg / 0.12); }
+
+/* Stage: round colour shapes that drift slowly, so the change through the glass shows. A background for a hero or a demo. */
+.oc-glass-stage {
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 22% 72%, var(--color-magenta-50) 0 16%, transparent 16.5%),
+    radial-gradient(circle at 82% 68%, var(--color-orange-50) 0 18%, transparent 18.5%),
+    radial-gradient(circle at 58% 18%, var(--color-skycyan-50) 0 13%, transparent 13.5%),
+    radial-gradient(60% 70% at 30% 30%, var(--color-magenta-60), transparent 70%),
+    linear-gradient(120deg, var(--color-purple-60), var(--color-violet-80));
+  background-size: 140% 140%;
+  animation: oc-glass-stage 18s ease-in-out infinite alternate;
+}
+@keyframes oc-glass-stage {
+  to { background-position: 100% 60%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .oc-glass-stage { animation: none; }
+}
+
 /* parts/media-glass.css */
 /* File: packages/ui/src/parts/media-glass.css
    Map: tokens (light-dark) -> sheet (.oc-glass: see-through, blurred, light top edge, soft shadow) -> panel (.oc-glass-panel:
@@ -8994,6 +10273,54 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
   .oc-image-zoom__canvas { transition: inline-size var(--oc-transition-normal); }
 }
 
+/* parts/media-lazy.css */
+/* File: packages/ui/src/parts/media-lazy.css | Map: box (aspect ratio, shimmer placeholder or a tiny blurred preview) -> image fades in -> error -> lazy sections
+   Lazy loading. .oc-lazy: an image box that keeps its place, shows a shimmer (or --oc-lazy-preview, a tiny blurred
+   copy) until the photo is there and then fades it in (lazy.js adds .is-loaded). .oc-lazy-section: content the browser
+   only lays out and draws when it comes near the screen (content-visibility). */
+
+.oc-lazy {
+  --oc-lazy-ratio: 16 / 10;
+  position: relative;
+  display: block;
+  margin: 0;
+  overflow: hidden;
+  aspect-ratio: var(--oc-lazy-ratio);
+  border-radius: var(--oc-radius);
+  background:
+    linear-gradient(100deg, transparent 30%, oklch(from var(--oc-background) l c h / 0.55) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat,
+    var(--oc-muted);
+  animation: oc-lazy-shimmer 1.4s ease-in-out infinite;
+}
+/* A tiny blurred preview instead of the shimmer: style="--oc-lazy-preview: url(photo-20px.webp)". */
+.oc-lazy[style*="--oc-lazy-preview"] { animation: none; background: var(--oc-muted); }
+.oc-lazy[style*="--oc-lazy-preview"]::before { content: ""; position: absolute; inset: 0; background: var(--oc-lazy-preview) center / cover no-repeat; filter: blur(14px); scale: 1.15; }
+.oc-lazy > img { position: relative; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity 0.45s ease; }
+.oc-lazy.is-loaded { animation: none; background: none; }
+.oc-lazy.is-loaded::before { display: none; }
+.oc-lazy.is-loaded > img { opacity: 1; }
+.oc-lazy.is-error { animation: none; }
+.oc-lazy.is-error > img { opacity: 0; }
+.oc-lazy > figcaption { position: absolute; inset: auto 0 0; padding: 0.4rem 0.6rem; font-size: 0.75rem; color: var(--color-white-50); background: linear-gradient(transparent, oklch(0% 0 0deg / 0.55)); }
+/* Without the script (or when it is off) the photo shows as soon as it is there. */
+@media (scripting: none) { .oc-lazy > img { opacity: 1; } }
+@keyframes oc-lazy-shimmer { to { background-position: 250% 0, 0 0; } }
+
+/* Sections far down a long page: laid out and drawn only when they come near the screen. */
+.oc-lazy-section { content-visibility: auto; contain-intrinsic-size: auto var(--oc-lazy-size, 600px); }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-lazy { animation: none; }
+  .oc-lazy > img { transition: none; }
+}
+
+/* In a table or a list: a small square thumbnail, and placeholder rows (.oc-lazy-row) while the next page loads. */
+.oc-lazy.oc-lazy--thumb { --oc-lazy-ratio: 1; inline-size: 2.5rem; flex: none; border-radius: calc(var(--oc-radius) - 2px); }
+.oc-lazy-row > :is(td, th) { padding-block: 0.6rem; }
+.oc-lazy-row .oc-lazy-bar { display: block; block-size: 0.75rem; inline-size: var(--oc-lazy-bar, 70%); border-radius: 999px; background: var(--oc-muted); animation: oc-lazy-pulse 1.2s ease-in-out infinite alternate; }
+@keyframes oc-lazy-pulse { to { opacity: 0.45; } }
+@media (prefers-reduced-motion: reduce) { .oc-lazy-row .oc-lazy-bar { animation: none; } }
+
 /* parts/media-lightbox.css */
 /* File: packages/ui/src/parts/media-lightbox.css | Map: thumbnails -> dialog + backdrop -> bar -> track + slides
    -> nav buttons -> caption + counter -> single image -> small screens -> motion
@@ -9094,6 +10421,10 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
 .oc-lightbox__nav { grid-row: 1; justify-self: center; }
 .oc-lightbox__nav--prev { grid-column: 1; }
 .oc-lightbox__nav--next { grid-column: 3; }
+.oc-lightbox__close :is(svg, iconify-icon, .oc-icon) { inline-size: 1.1rem; block-size: 1.1rem; font-size: 1.1rem; }
+/* A <picture> (animated WebP with a still image for "reduce motion") gets the frame; the image fits in it. */
+.oc-lightbox__media > picture { display: grid; overflow: hidden; }
+.oc-lightbox__media > picture > img { max-inline-size: 100%; max-block-size: calc(100dvh - 9rem); object-fit: contain; }
 
 /* ---- Caption with the "2 / 5" counter ---- */
 .oc-lightbox__caption {
@@ -9172,7 +10503,7 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
    people, status, actions) -> wallpaper (masked doodles in a token color) -> scroll area (starts at the bottom)
    -> composer footer -> sending overlay (aria-busy) -> reduced motion
    Message thread: one conversation. The scroll area uses flex-direction: column-reverse, so it opens at the newest message
-   and stays there when messages are added, without a script. Based on the question chat of the Korrekt app. */
+   and stays there when messages are added, without a script. */
 
 .oc-message-thread {
   --oc-message-thread-height: 32rem;
@@ -9310,7 +10641,7 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
    -> grouping (:has) -> hover actions -> date divider + system line -> reduced motion
    Message: one chat bubble. Incoming on the left with the avatar, outgoing on the right in the primary tint.
    Consecutive messages of one sender group by themselves: the avatar shows once (on the last one), the name once (on the
-   first one). Based on the question chat of the Korrekt app. */
+   first one). */
 
 .oc-message-list {
   --oc-message-in: var(--oc-card);
@@ -9880,6 +11211,382 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   .oc-watermark { --oc-watermark-opacity: 0.2; print-color-adjust: exact; }
 }
 
+/* parts/nav-topbar-variants.css */
+/* File: packages/ui/src/parts/nav-topbar-variants.css
+   Map: brand (logo tile, room before the menu) -> centred menu -> plain links -> dark / brand colour -> floating pill
+   -> strip above the bar -> footer bar (split, links, dark)
+   Variants of the site header (.oc-topbar in docs-ui.css) and the footer bar (.oc-footerbar). Colours are tokens. */
+
+/* Brand: a logo tile and the name, always with room before the menu. */
+.oc-topbar-brand { display: inline-flex; align-items: center; gap: 0.55rem; margin-inline-end: 1rem; }
+.oc-topbar-logo {
+  display: grid;
+  place-items: center;
+  flex: none;
+  inline-size: 1.85rem;
+  block-size: 1.85rem;
+  border-radius: 9px;
+  color: var(--color-white-50);
+  background: linear-gradient(135deg, var(--oc-accent-from, var(--oc-primary)), var(--oc-accent-to, var(--oc-primary)));
+  font-size: 0.95rem;
+}
+.oc-topbar-logo > :is(svg, iconify-icon) { inline-size: 1.1rem; block-size: 1.1rem; font-size: 1.1rem; }
+.oc-topbar-nav { min-inline-size: 0; }
+.oc-topbar-actions .oc-btn { white-space: nowrap; }
+
+/* Centred menu: brand left, menu in the middle, actions right (from 761px; smaller screens keep the burger). */
+@media (min-width: 761px) {
+  .oc-topbar--center { display: grid; grid-template-columns: 1fr auto 1fr; }
+  .oc-topbar--center .oc-topbar-brand { justify-self: start; }
+  .oc-topbar--center .oc-topbar-actions { justify-self: end; }
+}
+
+/* Plain links: no pill frames, the current page underlined. */
+.oc-topbar--plain .oc-navmenu--site .oc-navmenu-link {
+  border-color: transparent;
+  border-radius: 0;
+  background: none;
+  color: var(--oc-muted-foreground);
+  box-shadow: inset 0 -2px 0 transparent;
+}
+.oc-topbar--plain .oc-navmenu--site .oc-navmenu-link:hover { color: var(--oc-foreground); border-color: transparent; background: none; }
+.oc-topbar--plain .oc-navmenu--site .oc-navmenu-link[aria-current="page"] {
+  color: var(--oc-foreground);
+  border-color: transparent;
+  background: none;
+  box-shadow: inset 0 -2px 0 var(--oc-primary);
+}
+
+/* Dark bar and brand-colour bar: light text, links as soft pills. */
+.oc-topbar:is(.oc-topbar--dark, .oc-topbar--brand) { color: var(--color-white-50); border-block-end-color: transparent; }
+.oc-topbar.oc-topbar--dark { background: var(--oc-dark-band, var(--color-duskblue-95)); }
+.oc-topbar--brand { background: linear-gradient(100deg, var(--oc-accent-from, var(--oc-primary)), var(--oc-accent-to, var(--oc-primary))); }
+.oc-topbar:is(.oc-topbar--dark, .oc-topbar--brand) .oc-navmenu--site .oc-navmenu-link {
+  color: oklch(from var(--color-white-50) l c h / 0.8);
+  border-color: transparent;
+  background: none;
+}
+.oc-topbar:is(.oc-topbar--dark, .oc-topbar--brand) .oc-navmenu--site .oc-navmenu-link:is(:hover, [aria-current="page"]) {
+  color: var(--color-white-50);
+  border-color: transparent;
+  background: oklch(from var(--color-white-50) l c h / 0.14);
+}
+.oc-topbar--dark .oc-topbar-logo { background: oklch(from var(--color-white-50) l c h / 0.14); }
+.oc-topbar--brand .oc-topbar-logo { color: var(--oc-primary); background: var(--color-white-50); }
+.oc-topbar:is(.oc-topbar--dark, .oc-topbar--brand) .oc-topbar-burger { color: inherit; border-color: oklch(from var(--color-white-50) l c h / 0.3); }
+
+/* Floating: a rounded bar with room around it and a soft shadow (over a hero or a photo). */
+.oc-topbar--floating {
+  margin: 0.75rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 16px;
+  box-shadow: 0 14px 34px -18px oklch(from var(--color-black-60) l c h / 0.35);
+}
+
+/* Strip: a small row above the bar (contact, language, account). */
+.oc-topbar-strip {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.25rem 1rem;
+  padding: 0.35rem clamp(14px, 2vw, 28px);
+  font-size: 0.78rem;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-muted);
+}
+.oc-topbar-strip a { color: inherit; text-decoration: none; }
+.oc-topbar-strip a:hover { color: var(--oc-foreground); }
+.oc-topbar-strip > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
+
+/* Footer bar: text left and links right (--split), a link list, a dark bar. */
+.oc-footerbar--split { justify-content: space-between; gap: 1rem; text-align: start; }
+.oc-footerbar--tall { block-size: auto; min-block-size: var(--ocm-footer-height, 2.25rem); padding-block: 0.85rem; flex-wrap: wrap; }
+.oc-footerbar-links { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; }
+.oc-footerbar-links a { color: var(--oc-muted-foreground); text-decoration: none; }
+.oc-footerbar-links a:hover { color: var(--oc-foreground); }
+.oc-footerbar.oc-footerbar--dark { color: oklch(from var(--color-white-50) l c h / 0.7); background: var(--oc-dark-band, var(--color-duskblue-95)); border-block-start-color: transparent; }
+.oc-footerbar--dark :is(a, .oc-footerbar-links a) { color: oklch(from var(--color-white-50) l c h / 0.85); }
+.oc-footerbar--dark .oc-footerbar-links a:hover { color: var(--color-white-50); }
+
+/* parts/site-base.css */
+/* File: packages/ui/src/parts/site-base.css */
+/* Map: skip link -> icon */
+/* Two small site helpers: a skip link for keyboard users (hidden above the page until it gets the focus) and a basic
+   inline icon (svg or iconify-icon) that is as large as the text around it. */
+
+/* <a class="oc-skip-link" href="#main">Skip to content</a> as the first element in <body>. */
+.oc-skip-link {
+  position: absolute;
+  inset-inline-start: 1rem;
+  inset-block-start: 1rem;
+  /* Fully above the edge, whatever its height; drops in on focus. */
+  translate: 0 calc(-100% - 2rem);
+  z-index: 100;
+  padding: 0.6rem 1rem;
+  border-radius: var(--oc-radius-md, 0.75rem);
+  background: var(--oc-foreground);
+  color: var(--oc-background);
+  font-weight: 600;
+  text-decoration: none;
+  transition: translate var(--oc-transition-fast);
+}
+.oc-skip-link:focus { translate: none; }
+
+/* Inline icon: 1.25em (1.1em in a button), never squeezed in a flex row. */
+.oc-icon {
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  flex-shrink: 0;
+}
+.oc-btn > .oc-icon {
+  inline-size: 1.1em;
+  block-size: 1.1em;
+}
+
+/* parts/site-brand-mark.css */
+/* File: packages/ui/src/parts/site-brand-mark.css */
+/* Map: brand mark (icon + text) -> word (accent part in the brand gradient) -> tagline -> sizes */
+/* A logo built from an icon and text: the mark (svg or img) with a soft glow in the brand color, the word mark with one
+   part in the brand gradient, and a small tagline under it. Sizes --sm and --lg (a footer, a hero or a map). */
+
+.oc-brand-mark {
+  --oc-brand-mark-icon: 2.25rem;
+  --oc-brand-mark-word: 1.35rem;
+  --oc-brand-mark-tagline: 0.6rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  color: var(--oc-foreground);
+  text-decoration: none;
+}
+.oc-brand-mark__icon {
+  flex: none;
+  inline-size: var(--oc-brand-mark-icon);
+  block-size: var(--oc-brand-mark-icon);
+  filter: drop-shadow(0 6px 14px oklch(from var(--oc-brand-1) l c h / 0.35));
+}
+.oc-brand-mark__text {
+  display: grid;
+  line-height: 1;
+}
+.oc-brand-mark__word {
+  font-family: var(--oc-font-display, inherit);
+  font-size: var(--oc-brand-mark-word);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+}
+.oc-brand-mark__accent {
+  background: linear-gradient(90deg, var(--oc-brand-1), var(--oc-brand-2));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.oc-brand-mark__tagline {
+  margin-block-start: 0.3rem;
+  color: var(--oc-subtle-foreground, var(--oc-muted-foreground));
+  font-family: var(--oc-font-mono);
+  font-size: var(--oc-brand-mark-tagline);
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+.oc-brand-mark--sm {
+  --oc-brand-mark-icon: 1.75rem;
+  --oc-brand-mark-word: 1.1rem;
+  --oc-brand-mark-tagline: 0.55rem;
+}
+.oc-brand-mark--lg {
+  --oc-brand-mark-icon: 2.6rem;
+  --oc-brand-mark-word: 1.6rem;
+  --oc-brand-mark-tagline: 0.66rem;
+}
+
+/* parts/site-cards.css */
+/* File: packages/ui/src/parts/site-cards.css */
+/* Map: feature card -> link card -> icon list (+ points) -> accent list + note -> badge row + accent tagline
+   -> screenshot grid -> browser frame glow + mark */
+/* Cards and lists for the pages of a company site: services and features (icon tile + title + text), cards that are
+   links, a list of icon rows in frames (or as points with a title), a list with markers in the accent color, a small
+   note, a row of badges, a tagline in the accent color, a grid of screenshots that open in the lightbox, and a browser
+   frame with a glow in the accent color and a product mark on it. */
+
+/* Feature / service card: tile, title, text; a quiet hover. In an .oc-card-grid (--oc-card-min sets the column width). */
+.oc-feature-card {
+  padding: 1.6rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 1.25rem);
+  background: var(--oc-surface);
+  transition: border-color 0.3s, background 0.3s;
+}
+.oc-feature-card:hover {
+  border-color: var(--oc-border-strong);
+  background: var(--oc-surface-strong);
+}
+.oc-feature-card > .oc-icon-tile { margin-block-end: 1.1rem; }
+.oc-feature-card__title {
+  margin: 0 0 0.6rem;
+  font-family: var(--oc-font-display, inherit);
+  font-size: 1.2rem;
+  line-height: 1.25;
+}
+.oc-feature-card__text {
+  margin: 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.95rem;
+}
+
+/* Card that is a link (an agent, a tool, a document): tile, title, text and a "more" line; hover in the accent color. */
+.oc-link-card {
+  display: grid;
+  align-content: start;
+  gap: 0.4rem;
+  padding: 1.25rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 1.25rem);
+  background: var(--oc-surface);
+  color: var(--oc-foreground);
+  text-decoration: none;
+  transition: border-color 0.3s, background 0.3s;
+}
+/* --oc-link-card-hover: the hover color alone (without an accent preset, so the tile keeps its own color). */
+.oc-link-card:hover {
+  border-color: oklch(from var(--oc-link-card-hover, var(--oc-accent-from)) l c h / 0.5);
+  background: var(--oc-surface-strong);
+}
+.oc-link-card:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-link-card > .oc-icon-tile { margin-block-end: 0.4rem; }
+.oc-link-card__title { font-family: var(--oc-font-display, inherit); font-weight: 700; }
+.oc-link-card__text { color: var(--oc-muted-foreground); font-size: 0.93rem; }
+.oc-link-card__more {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-block-start: 0.4rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.oc-link-card__more::after { content: "→"; transition: translate 0.25s var(--oc-ease-out, ease); }
+.oc-link-card:hover .oc-link-card__more::after { translate: 4px 0; }
+
+/* Icon list: rows with an icon in a frame. --points: an icon tile next to a title and a text, without frames. */
+.oc-icon-list {
+  display: grid;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.oc-icon-list > li {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-md, 0.75rem);
+  background: var(--oc-surface);
+}
+.oc-icon-list > li > :is(svg, iconify-icon, .oc-icon) {
+  flex: none;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  font-size: 1.25rem;
+  color: var(--oc-primary);
+}
+.oc-icon-list--points { gap: 1rem; }
+.oc-icon-list--points > li {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  gap: 0.25rem 0.9rem;
+  padding: 0;
+  border: 0;
+  background: none;
+}
+.oc-icon-list--points > li > .oc-icon-tile { grid-row: span 2; }
+.oc-icon-list__title { font-family: var(--oc-font-display, inherit); font-weight: 700; }
+.oc-icon-list__text { color: var(--oc-muted-foreground); font-size: 0.95rem; }
+
+/* List with markers in the accent color, and a small note under a block. */
+.oc-list--accent {
+  display: grid;
+  gap: 0.6rem;
+  margin: 0;
+  padding-inline-start: 1.1rem;
+  list-style: disc;
+  color: var(--oc-muted-foreground);
+  font-size: 0.95rem;
+}
+.oc-list--accent > li::marker { color: var(--oc-accent-from, var(--oc-primary)); }
+.oc-note {
+  margin: 1.25rem 0 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.85rem;
+}
+.oc-note--md {
+  max-inline-size: 60rem;
+  font-size: 1rem;
+}
+
+/* Row of badges or pills above a title, and a tagline in the accent color (lighter, so it reads on a dark page). */
+.oc-badge-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-block-end: 1.25rem;
+}
+.oc-tagline--accent {
+  margin: 0 0 1rem;
+  color: light-dark(var(--oc-accent-from), color-mix(in oklch, var(--oc-accent-from) 55%, white));
+  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
+  font-weight: 600;
+}
+
+/* Screenshot grid: figures with the whole image visible (contain, 16:10 on the card color) and a caption;
+   a link or a button around the image opens the lightbox
+   (<button command="show-modal" commandfor="<lightbox id>">). A <picture> (animated WebP with a still image) works the same. */
+.oc-shot-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--oc-shot-min, 18rem)), 1fr));
+  gap: 1.25rem;
+}
+.oc-shot {
+  margin: 0;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 1.25rem);
+  overflow: hidden;
+  background: var(--oc-surface);
+}
+.oc-shot > :is(a, button) { display: block; inline-size: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
+.oc-shot > :is(a, button):focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-shot :is(picture) { display: block; }
+.oc-shot img {
+  display: block;
+  inline-size: 100%;
+  aspect-ratio: var(--oc-shot-ratio, 16 / 10);
+  object-fit: contain;
+  background: var(--oc-card);
+}
+.oc-shot > figcaption {
+  padding: 0.8rem 1rem;
+  color: var(--oc-muted-foreground);
+  font-size: 0.88rem;
+}
+
+/* Browser frame with a shadow in the accent color and a product mark on the bottom end corner. */
+.oc-browser-frame--glow {
+  position: relative;
+  box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--oc-accent-from) 70%, transparent);
+}
+.oc-browser-frame--glow :is(.oc-browser-frame__view, .oc-browser-frame__body) img { transition: scale 0.6s var(--oc-ease-out, ease); }
+.oc-browser-frame--glow:hover :is(.oc-browser-frame__view, .oc-browser-frame__body) img { scale: 1.02; }
+.oc-browser-frame__mark {
+  position: absolute;
+  inset-block-end: 1rem;
+  inset-inline-end: 1rem;
+  filter: drop-shadow(0 10px 20px oklch(0 0 0 / 0.6));
+}
+
 /* parts/site-fact-list.css */
 /* File: packages/ui/src/parts/site-fact-list.css
    Map: plain -> compact -> stacked -> accent values -> narrow screens
@@ -9907,6 +11614,191 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 /* Very narrow containers: wrap instead of squeezing label and value together. */
 .oc-fact-list > div { flex-wrap: wrap; }
 
+/* parts/site-fly.css */
+/* File: packages/ui/src/parts/site-fly.css */
+/* Map: fly in (only with fly.js) -> visible -> reduced motion -> product card badge -> code window tokens */
+/* Cards that fly in when they scroll into view: they start from the middle of their row (--oc-fly-x, set by fly.js),
+   70px lower, smaller and tilted, and land in their place. Without fly.js (html.oc-fly-ready is missing) or with
+   "reduce motion" everything simply stands in its place. Options: --oc-fly-step (offset per column), --oc-fly-stagger
+   (delay per column) and data-oc-fly-repeat (fly out again when leaving the view). The lift on hover uses translate, so it never fights the
+   transform of the fly-in. Also: a "New" badge in a product card name and short syntax classes for a code window. */
+
+.oc-fly-ready .oc-reveal--fly {
+  /* --oc-fly-delay: set per card by fly.js from --oc-fly-stagger (delay per column). */
+  transition:
+    opacity 0.6s var(--oc-ease-out, ease) var(--oc-fly-delay, 0s),
+    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--oc-fly-delay, 0s),
+    border-color 0.35s;
+}
+.oc-fly-ready .oc-reveal--fly:not(.is-visible) {
+  opacity: 0;
+  transform: perspective(900px) translate3d(var(--oc-fly-x, 0), 70px, 0) scale(0.9) rotateX(14deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .oc-fly-ready .oc-reveal--fly:not(.is-visible) { opacity: 1; transform: none; }
+}
+
+/* "New" after the name of a product card: <h3 class="oc-product-card__name">Product 1 <span class="oc-product-card__badge oc-pill">New</span></h3> */
+.oc-product-card__badge {
+  margin-inline-start: 0.4rem;
+  vertical-align: middle;
+  font-family: var(--oc-font-sans);
+  font-size: 0.7rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* Short syntax classes for hand-written code in an .oc-code-window: keyword, string, constant, function, muted.
+   They take the colors of the window (--oc-syntax-*), so they follow light and dark mode and a theme can change them. */
+.oc-code-window .oc-tok-k { color: var(--oc-syntax-keyword); }
+.oc-code-window .oc-tok-s { color: var(--oc-syntax-string); }
+.oc-code-window .oc-tok-c { color: var(--oc-syntax-constant); }
+.oc-code-window .oc-tok-f { color: var(--oc-syntax-function); }
+.oc-code-window .oc-tok-m { color: var(--oc-syntax-comment); }
+
+/* parts/site-header-variants.css */
+/* File: packages/ui/src/parts/site-header-variants.css
+   Map: actions slot -> centred menu -> dark -> floating pill -> glass pill -> footer: centred, dark, newsletter, social
+   Variants of the marketing header (.oc-site-header) and footer (.oc-site-footer) in showcase.css. The sticky header
+   turns to glass while scrolling; the coloured variants keep their own background (no scroll animation). */
+
+.oc-site-header__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
+.oc-site-header__brand { white-space: nowrap; flex: none; }
+.oc-site-header__nav > :is(a, button):not(.oc-btn) { white-space: nowrap; }
+
+/* Centred menu: brand left, menu in the middle, actions right. */
+@media (min-width: 861px) {
+  .oc-site-header--center .oc-site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
+  .oc-site-header--center .oc-site-header__brand { justify-self: start; }
+  .oc-site-header--center .oc-site-header__actions { justify-self: end; }
+}
+
+/* Dark: a solid dark bar with light text. */
+.oc-site-header--dark {
+  animation: none;
+  color: var(--color-white-50);
+  background: var(--oc-dark-band, var(--color-duskblue-95));
+}
+.oc-site-header--dark :is(.oc-site-header__brand, .oc-site-header__nav a[aria-current="page"], .oc-site-header__nav a:not(.oc-btn):hover) { color: var(--color-white-50); }
+.oc-site-header--dark .oc-site-header__nav a:not(.oc-btn) { color: oklch(from var(--color-white-50) l c h / 0.72); }
+
+/* Floating: the bar as a rounded card with room around it. */
+.oc-site-header:is(.oc-site-header--floating, .oc-site-header--glass) { animation: none; padding: 0.75rem; }
+.oc-site-header--floating .oc-site-header__inner {
+  block-size: 4rem;
+  padding-inline: 1rem 0.75rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 18px;
+  background: var(--oc-background);
+  box-shadow: 0 16px 36px -22px oklch(from var(--color-black-60) l c h / 0.45);
+}
+
+/* Glass: a clear liquid-glass pill over a photo or a hero (look in media-glass-liquid.css). */
+.oc-site-header--glass .oc-site-header__inner { block-size: 3.75rem; padding-inline: 1.1rem 0.6rem; border-radius: 999px; }
+.oc-site-header--glass :is(.oc-site-header__brand, .oc-site-header__nav a:not(.oc-btn)) { color: light-dark(var(--color-black-95), var(--color-white-50)); text-shadow: 0 1px 2px light-dark(oklch(100% 0 0deg / 0.5), oklch(0% 0 0deg / 0.4)); }
+
+/* ---- Footer variants ---- */
+/* Centred: brand, one row of links, social icons and the bottom line, all centred. */
+.oc-site-footer--center { text-align: center; }
+.oc-site-footer--center :is(.oc-site-footer__about, .oc-site-footer__bottom) { justify-items: center; justify-content: center; }
+.oc-site-footer--center .oc-site-footer__about { display: grid; gap: 1rem; }
+.oc-site-footer--center .oc-site-footer__about p { margin: 0; max-inline-size: 34rem; }
+.oc-site-footer__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
+.oc-site-footer__social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
+.oc-site-footer--center .oc-site-footer__social { justify-content: center; margin-block-start: 1.5rem; }
+.oc-site-footer__social a {
+  display: grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 999px;
+  transition: border-color 0.2s, color 0.2s;
+}
+.oc-site-footer__social a:hover { border-color: var(--oc-primary); color: var(--oc-primary); }
+.oc-site-footer__social :is(svg, iconify-icon) { inline-size: 1.1rem; block-size: 1.1rem; font-size: 1.1rem; }
+
+/* Dark: light text on a dark band, the same deep blue in light and dark mode (--oc-dark-band), no top border. */
+.oc-site-footer--dark { border-block-start: 0; color: oklch(from var(--color-white-50) l c h / 0.7); background: var(--oc-dark-band, var(--color-duskblue-95)); }
+.oc-site-footer--dark :is(.oc-site-footer__title, .oc-site-header__brand, a:hover) { color: var(--color-white-50); }
+.oc-site-footer--dark :is(.oc-site-footer__bottom, .oc-site-footer__social a) { border-color: oklch(from var(--color-white-50) l c h / 0.16); }
+
+/* Newsletter: a sign-up field in the brand column. */
+.oc-site-footer__signup { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1.25rem; max-inline-size: 24rem; }
+.oc-site-footer__signup .oc-input { flex: 1 1 12rem; min-inline-size: 0; }
+.oc-site-footer--dark .oc-site-footer__signup .oc-input { color: var(--color-white-50); background: oklch(from var(--color-white-50) l c h / 0.08); border-color: oklch(from var(--color-white-50) l c h / 0.2); }
+
+/* parts/site-layout.css */
+/* File: packages/ui/src/parts/site-layout.css */
+/* Map: page hero -> section head / more -> action row -> group title -> band -> meta line */
+/* Page building blocks for a marketing or company site, on top of the showcase classes (.oc-section-pad, .oc-display):
+   the larger header of an inner page, a section head and a "see more" row, a row of buttons, a group title with a count,
+   a full-width band (for a stat strip) and a meta line (version · date). */
+
+/* Inner page header: more room on top, less below, and a larger display title. */
+.oc-section-pad--page { padding-block: clamp(4rem, 10vw, 7rem) clamp(2rem, 5vw, 3rem); }
+.oc-display--page {
+  margin-block-end: 1.25rem;
+  font-size: clamp(2.5rem, 6.5vw, 4.75rem);
+}
+
+/* Head of a section (eyebrow, title, lead) and the row with a "see all" link under the section. */
+.oc-section-head {
+  max-inline-size: 46rem;
+  margin-block-end: 3rem;
+}
+.oc-section-head--center {
+  margin-inline: auto;
+  text-align: center;
+}
+.oc-section-more { margin-block-start: 2.5rem; }
+
+/* Row of buttons under a text: wraps on a narrow screen. */
+.oc-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-block-start: 2rem;
+}
+.oc-actions--center { justify-content: center; }
+.oc-actions--end { justify-content: flex-end; }
+.oc-actions--tight { margin-block-start: 1rem; }
+
+/* Title of a group of cards with the number of items in a pill: <h3 class="oc-group-title">Apps <span class="oc-group-title__count">8</span></h3> */
+.oc-group-title {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 0 0 1.5rem;
+  font-size: 1.4rem;
+}
+.oc-group-title__count {
+  padding: 0.1rem 0.6rem;
+  border-radius: 999px;
+  background: var(--oc-surface-strong);
+  color: var(--oc-muted-foreground);
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+/* Band over the full width of the page with a line above and below; the content stays in its .oc-container.
+   Put a .oc-stat-strip--plain in it for a row of key figures. */
+.oc-band {
+  border-block: 1px solid var(--oc-border);
+  background: var(--oc-band-bg, var(--oc-surface));
+}
+
+/* Meta line under a page title: version · date, author. */
+.oc-meta {
+  margin: 0 0 1rem;
+  color: var(--oc-subtle-foreground, var(--oc-muted-foreground));
+  font-size: 0.9rem;
+}
+
+/* Muted and subtle text from the theme tokens, for running text inside a panel, a spotlight or a split. */
+.oc-text-muted { color: var(--oc-muted-foreground); }
+.oc-text-subtle { color: var(--oc-subtle-foreground, var(--oc-muted-foreground)); }
+
 /* parts/site-link-arrow.css */
 /* File: packages/ui/src/parts/site-link-arrow.css
    Map: focus ring -> back arrow -> external arrow -> color modifiers -> sizes -> reduced motion
@@ -10112,6 +12004,37 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   .oc-next-teaser__tagline::before { transition: none; }
 }
 
+/* parts/site-panel.css */
+/* File: packages/ui/src/parts/site-panel.css */
+/* Map: panel -> glow (start / end / both) */
+/* A framed panel on the page (a form, a call to action, a feature with a list): card background, strong border, large
+   radius, and room above it when a link jumps to it (#form). --glow adds a soft radial light in a corner:
+   --oc-panel-glow-color (brand 1) and --oc-panel-glow-at (top left); --glow-end puts it top right, --glow-both adds a
+   second light (brand 3) bottom right. */
+
+.oc-panel {
+  --oc-panel-glow-color: var(--oc-brand-1);
+  --oc-panel-glow-at: 0% 0%;
+  position: relative;
+  padding: var(--oc-panel-padding, clamp(1.5rem, 4vw, 2.5rem));
+  border: 1px solid var(--oc-border-strong);
+  border-radius: calc(var(--oc-radius-lg, 1.25rem) * 1.2);
+  background: var(--oc-card);
+  scroll-margin-top: var(--oc-scroll-offset, 6rem);
+}
+.oc-panel--glow {
+  background:
+    radial-gradient(30rem circle at var(--oc-panel-glow-at), oklch(from var(--oc-panel-glow-color) l c h / 0.12), transparent 60%),
+    var(--oc-card);
+}
+.oc-panel--glow-end { --oc-panel-glow-at: 100% 0%; }
+.oc-panel--glow-both {
+  background:
+    radial-gradient(40rem circle at 0% 0%, oklch(from var(--oc-brand-1) l c h / 0.18), transparent 55%),
+    radial-gradient(40rem circle at 100% 100%, oklch(from var(--oc-brand-3) l c h / 0.2), transparent 55%),
+    var(--oc-card);
+}
+
 /* parts/site-price-card.css */
 /* File: packages/ui/src/parts/site-price-card.css
    Map: card -> head + discount badge -> period toggle -> monthly / yearly / lifetime price (:has) -> features -> featured
@@ -10400,7 +12323,7 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
    -> sizes (--sm, --lg) -> full width
    Prose: typography for long-form text from a CMS, blog or help page, where the HTML has no classes of its own.
    Every rule is scoped with :where(), so a utility class on an element inside still wins. Spacing is in em, so --sm and --lg
-   scale the whole text. Based on the help and maintenance pages of the Korrekt app. */
+   scale the whole text. */
 
 .oc-prose {
   max-inline-size: 68ch;
@@ -10531,6 +12454,18 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 @media (prefers-reduced-motion: reduce) {
   .oc-prose :where(a) { transition: none; }
 }
+
+/* ---- Legal text (terms, privacy, cookies): narrower, muted body text in a slightly larger size, headings and strong
+   in the foreground, disc lists with a gap, links in brand 1. A table in an .oc-table-wrap scrolls on a phone. ---- */
+.oc-prose--legal { max-inline-size: 46rem; color: var(--oc-muted-foreground); font-size: 1.0625rem; }
+.oc-prose--legal :where(h2) { margin-block-start: 2.5rem; font-size: 1.35rem; color: var(--oc-foreground); }
+.oc-prose--legal :where(h3) { margin-block-start: 1.5rem; font-size: 1.05rem; color: var(--oc-foreground); }
+.oc-prose--legal :where(strong, b) { color: var(--oc-foreground); }
+.oc-prose--legal :where(ul) { display: grid; gap: 0.4rem; padding-inline-start: 1.25rem; list-style: disc; }
+.oc-prose--legal :where(ul > li) { margin-block-start: 0; }
+.oc-prose--legal :where(a) { color: var(--oc-brand-1); font-weight: inherit; text-decoration-color: currentColor; text-underline-offset: 3px; }
+.oc-prose--legal :where(a:hover) { color: var(--oc-foreground); }
+.oc-prose--legal :where(table) { font-size: 0.93rem; }
 
 /* parts/site-stack-list.css */
 /* File: packages/ui/src/parts/site-stack-list.css
@@ -10638,6 +12573,52 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 /* Line in the accent color instead of the neutral border. */
 .oc-timeline--accent { border-inline-start-color: color-mix(in oklch, var(--oc-accent-from) 55%, transparent); }
 
+/* parts/utility-hover.css */
+/* File: packages/ui/src/parts/utility-hover.css */
+/* Map: smooth timing -> lift / grow / glow / none -> steady hover area -> reduced motion */
+/* Hover effect of a card, chosen with one class on the card (any card: .oc-card, product, feature, link, price, project …):
+     .oc-hover-lift   moves up (--oc-hover-lift, 6px) with a soft shadow; what a product card does by default
+     .oc-hover-grow   grows a little in place (--oc-hover-scale, 1.02)
+     .oc-hover-glow   stays in place, with a glow in the accent color
+     .oc-hover-none   no movement (also turns off the default lift of a product or price card)
+   They share one smooth curve: --oc-hover-duration (0.45s) and --oc-hover-ease. This file loads after the cards, so the class wins. */
+
+:is(.oc-hover-lift, .oc-hover-grow, .oc-hover-glow, .oc-product-card) {
+  transition:
+    translate var(--oc-hover-duration, 0.45s) var(--oc-hover-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+    scale var(--oc-hover-duration, 0.45s) var(--oc-hover-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+    box-shadow var(--oc-hover-duration, 0.45s) var(--oc-hover-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+    border-color 0.35s,
+    background-color 0.35s,
+    --oc-glow 0.35s;
+}
+.oc-product-card:hover { translate: 0 calc(-1 * var(--oc-hover-lift, 6px)); }
+.oc-hover-lift:hover {
+  translate: 0 calc(-1 * var(--oc-hover-lift, 6px));
+  box-shadow: 0 1.25rem 2.5rem -1.25rem oklch(from var(--color-black-60) l c h / 0.35);
+}
+.oc-hover-grow:hover { translate: none; scale: var(--oc-hover-scale, 1.02); }
+.oc-hover-glow:hover {
+  translate: none;
+  box-shadow:
+    0 0 0 1px oklch(from var(--oc-accent-from, var(--oc-primary)) l c h / 0.4),
+    0 0.75rem 2.5rem -0.75rem oklch(from var(--oc-accent-from, var(--oc-primary)) l c h / 0.5);
+}
+.oc-hover-none:hover { translate: none; scale: none; }
+
+/* While a card moves up, the strip it leaves keeps the hover, so a mouse at the bottom edge does not make it bounce. */
+:where(.oc-hover-lift) { position: relative; }
+:is(.oc-hover-lift, .oc-product-card:not([class*="oc-hover-"])):hover::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 calc(-1 * var(--oc-hover-lift, 6px) - 2px);
+  z-index: -1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.oc-hover-lift, .oc-hover-grow, .oc-product-card):hover { translate: none; scale: none; }
+}
+
 /* File: packages/ui/src/code-block.css — Code-block component (line numbers + Omnia syntax theme) */
 /* Map: pre.code base -> CSS variables -> token spans (.hl-tag, .hl-attr, .hl-string, etc.) */
 /*