@birdycom/omniaui 0.11.0 → 0.11.2

package/dist/parts/media-doc-viewer.css

@@ -1,151 +1,151 @@
-/* File: packages/ui/src/parts/media-doc-viewer.css | Map: grid -> card (bar, label, expand) -> frame (pdf, video, image)
-   -> full-screen dialog -> small screens
-   Document viewer: a PDF, video or image shown inline in a card with a label, plus a full-screen view on a native
-   <dialog> opened with command="show-modal". Based on the PDF and video viewers of the Verdavita service pages. */
-
-/* ---- Grid of viewers: cards keep their width, the group is centred ---- */
-.oc-doc-viewer-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
-  gap: 1rem 1.5rem;
-  inline-size: 100%;
-}
-
-/* ---- Card ---- */
-.oc-doc-viewer {
-  display: grid;
-  align-content: start;
-  gap: 0.5rem;
-  min-inline-size: 0;
-  margin: 0;
-}
-.oc-doc-viewer__bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  min-inline-size: 0;
-}
-.oc-doc-viewer__label {
-  flex: 1 1 auto;
-  min-inline-size: 0;
-  overflow: hidden;
-  color: var(--oc-foreground);
-  font-size: 0.875rem;
-  font-weight: 600;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.oc-doc-viewer__meta { flex: none; color: var(--oc-muted-foreground); font-size: 0.75rem; }
-.oc-doc-viewer__expand {
-  flex: none;
-  display: grid;
-  place-items: center;
-  inline-size: 2rem;
-  block-size: 2rem;
-  padding: 0;
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius);
-  background: var(--oc-card);
-  color: var(--oc-foreground);
-  font-size: 0.95rem;
-  cursor: zoom-in;
-  transition: background var(--oc-transition-normal), border-color var(--oc-transition-normal);
-}
-.oc-doc-viewer__expand:hover { background: var(--oc-muted); border-color: var(--oc-border-strong, var(--oc-border)); }
-.oc-doc-viewer__expand:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
-
-/* ---- Frame: A4 for PDF, 16/9 for video, free for images ---- */
-.oc-doc-viewer__frame {
-  position: relative;
-  overflow: hidden;
-  aspect-ratio: 1 / 1.414;
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius);
-  background: var(--oc-muted);
-}
-.oc-doc-viewer--video .oc-doc-viewer__frame { aspect-ratio: 16 / 9; background: var(--color-black-40); }
-.oc-doc-viewer--image .oc-doc-viewer__frame { aspect-ratio: auto; }
-.oc-doc-viewer__frame > :is(iframe, video, img, object, .oc-media-art) {
-  display: block;
-  inline-size: 100%;
-  block-size: 100%;
-  border: 0;
-  object-fit: contain;
-}
-.oc-doc-viewer--image .oc-doc-viewer__frame > img { block-size: auto; }
-
-/* A whole-card link variant ("click for full screen") */
-.oc-doc-viewer__frame > .oc-doc-viewer__open {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  place-items: end center;
-  padding: 0.75rem;
-  border: 0;
-  background: linear-gradient(transparent 55%, oklch(from var(--color-black-50) l c h / 0.55));
-  color: var(--color-white-50);
-  font: inherit;
-  font-size: 0.8rem;
-  font-weight: 600;
-  opacity: 0;
-  cursor: zoom-in;
-  transition: opacity var(--oc-transition-normal);
-}
-.oc-doc-viewer__frame:hover > .oc-doc-viewer__open,
-.oc-doc-viewer__open:focus-visible { opacity: 1; }
-.oc-doc-viewer__open:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -4px; }
-
-/* ---- Full-screen view ---- */
-.oc-doc-viewer-dialog {
-  inline-size: min(100vw - 2rem, 72rem);
-  block-size: min(100dvh - 2rem, 60rem);
-  max-inline-size: none;
-  max-block-size: none;
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius-lg, 12px);
-  background: var(--oc-card);
-  color: var(--oc-foreground);
-}
-.oc-doc-viewer-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
-.oc-doc-viewer-dialog::backdrop { background: oklch(from var(--color-black-60) l c h / 0.8); backdrop-filter: blur(6px); }
-.oc-doc-viewer-dialog--video { background: var(--color-black-40); color: var(--color-white-50); }
-.oc-doc-viewer-dialog__bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.6rem 0.75rem 0.6rem 1rem;
-  border-block-end: 1px solid var(--oc-border);
-}
-.oc-doc-viewer-dialog--video .oc-doc-viewer-dialog__bar { border-color: oklch(from var(--color-white-50) l c h / 0.15); }
-.oc-doc-viewer-dialog__title { margin: 0; overflow: hidden; font-size: 0.95rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
-.oc-doc-viewer-dialog__actions { display: flex; align-items: center; gap: 0.5rem; }
-.oc-doc-viewer-dialog__close {
-  display: grid;
-  place-items: center;
-  inline-size: 2.25rem;
-  block-size: 2.25rem;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: transparent;
-  color: inherit;
-  font-size: 1.1rem;
-  cursor: pointer;
-}
-.oc-doc-viewer-dialog__close:hover { background: oklch(from currentColor l c h / 0.1); }
-.oc-doc-viewer-dialog__close:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
-.oc-doc-viewer-dialog__body { display: grid; min-block-size: 0; }
-.oc-doc-viewer-dialog__body > :is(iframe, video, img, object, .oc-media-art) {
-  inline-size: 100%;
-  block-size: 100%;
-  border: 0;
-  object-fit: contain;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-doc-viewer__open, .oc-doc-viewer__expand { transition: none; }
-}
+/* File: packages/ui/src/parts/media-doc-viewer.css | Map: grid -> card (bar, label, expand) -> frame (pdf, video, image)
+   -> full-screen dialog -> small screens
+   Document viewer: a PDF, video or image shown inline in a card with a label, plus a full-screen view on a native
+   <dialog> opened with command="show-modal". Based on the PDF and video viewers of the Verdavita service pages. */
+
+/* ---- Grid of viewers: cards keep their width, the group is centred ---- */
+.oc-doc-viewer-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
+  gap: 1rem 1.5rem;
+  inline-size: 100%;
+}
+
+/* ---- Card ---- */
+.oc-doc-viewer {
+  display: grid;
+  align-content: start;
+  gap: 0.5rem;
+  min-inline-size: 0;
+  margin: 0;
+}
+.oc-doc-viewer__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-inline-size: 0;
+}
+.oc-doc-viewer__label {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--oc-foreground);
+  font-size: 0.875rem;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.oc-doc-viewer__meta { flex: none; color: var(--oc-muted-foreground); font-size: 0.75rem; }
+.oc-doc-viewer__expand {
+  flex: none;
+  display: grid;
+  place-items: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  padding: 0;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  font-size: 0.95rem;
+  cursor: zoom-in;
+  transition: background var(--oc-transition-normal), border-color var(--oc-transition-normal);
+}
+.oc-doc-viewer__expand:hover { background: var(--oc-muted); border-color: var(--oc-border-strong, var(--oc-border)); }
+.oc-doc-viewer__expand:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+
+/* ---- Frame: A4 for PDF, 16/9 for video, free for images ---- */
+.oc-doc-viewer__frame {
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: 1 / 1.414;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  background: var(--oc-muted);
+}
+.oc-doc-viewer--video .oc-doc-viewer__frame { aspect-ratio: 16 / 9; background: var(--color-black-40); }
+.oc-doc-viewer--image .oc-doc-viewer__frame { aspect-ratio: auto; }
+.oc-doc-viewer__frame > :is(iframe, video, img, object, .oc-media-art) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
+  object-fit: contain;
+}
+.oc-doc-viewer--image .oc-doc-viewer__frame > img { block-size: auto; }
+
+/* A whole-card link variant ("click for full screen") */
+.oc-doc-viewer__frame > .oc-doc-viewer__open {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: end center;
+  padding: 0.75rem;
+  border: 0;
+  background: linear-gradient(transparent 55%, oklch(from var(--color-black-50) l c h / 0.55));
+  color: var(--color-white-50);
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 600;
+  opacity: 0;
+  cursor: zoom-in;
+  transition: opacity var(--oc-transition-normal);
+}
+.oc-doc-viewer__frame:hover > .oc-doc-viewer__open,
+.oc-doc-viewer__open:focus-visible { opacity: 1; }
+.oc-doc-viewer__open:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -4px; }
+
+/* ---- Full-screen view ---- */
+.oc-doc-viewer-dialog {
+  inline-size: min(100vw - 2rem, 72rem);
+  block-size: min(100dvh - 2rem, 60rem);
+  max-inline-size: none;
+  max-block-size: none;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 12px);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+}
+.oc-doc-viewer-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
+.oc-doc-viewer-dialog::backdrop { background: oklch(from var(--color-black-60) l c h / 0.8); backdrop-filter: blur(6px); }
+.oc-doc-viewer-dialog--video { background: var(--color-black-40); color: var(--color-white-50); }
+.oc-doc-viewer-dialog__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.6rem 0.75rem 0.6rem 1rem;
+  border-block-end: 1px solid var(--oc-border);
+}
+.oc-doc-viewer-dialog--video .oc-doc-viewer-dialog__bar { border-color: oklch(from var(--color-white-50) l c h / 0.15); }
+.oc-doc-viewer-dialog__title { margin: 0; overflow: hidden; font-size: 0.95rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
+.oc-doc-viewer-dialog__actions { display: flex; align-items: center; gap: 0.5rem; }
+.oc-doc-viewer-dialog__close {
+  display: grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  font-size: 1.1rem;
+  cursor: pointer;
+}
+.oc-doc-viewer-dialog__close:hover { background: oklch(from currentColor l c h / 0.1); }
+.oc-doc-viewer-dialog__close:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-doc-viewer-dialog__body { display: grid; min-block-size: 0; }
+.oc-doc-viewer-dialog__body > :is(iframe, video, img, object, .oc-media-art) {
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
+  object-fit: contain;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-doc-viewer__open, .oc-doc-viewer__expand { transition: none; }
+}

package/dist/parts/media-emoji-picker.css

@@ -1,88 +1,88 @@
-/* File: packages/ui/src/parts/media-emoji-picker.css | Map: trigger button -> popover panel (anchor positioned)
-   -> group label -> grid -> emoji buttons -> inline modifier -> motion
-   Emoji picker: a popover with a grid of emoji buttons. Opening / closing is the popover attribute;
-   inserting the emoji into a field is one small optional script (see the snippet). */
-
-/* Round trigger (a smiley), the same size as a toolbar icon button. */
-.oc-emoji-picker__trigger {
-  display: inline-grid;
-  place-items: center;
-  inline-size: 2.25rem;
-  aspect-ratio: 1;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: transparent;
-  font-size: 1.15rem;
-  line-height: 1;
-  cursor: pointer;
-}
-.oc-emoji-picker__trigger:hover { 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. */
-.oc-emoji-picker[popover] {
-  position: fixed;
-  inset: auto;
-  margin: 0 0 0.375rem;
-  position-area: block-start span-inline-end;
-  position-try-fallbacks: flip-block, flip-inline;
-  inline-size: 17.5rem;
-  max-block-size: 18rem;
-  overflow-y: auto;
-  padding: 0.5rem;
-  border: 1px solid var(--oc-border);
-  border-radius: calc(var(--oc-radius) + 2px);
-  background: var(--oc-popover);
-  color: var(--oc-popover-foreground);
-  box-shadow: 0 8px 24px oklch(from var(--color-black-60) l c h / 0.15);
-  scrollbar-width: thin;
-}
-
-/* Inline: the same panel, always visible inside the page (no popover). */
-.oc-emoji-picker--inline {
-  inline-size: 17.5rem;
-  padding: 0.5rem;
-  border: 1px solid var(--oc-border);
-  border-radius: calc(var(--oc-radius) + 2px);
-  background: var(--oc-popover);
-}
-
-.oc-emoji-picker__label {
-  position: sticky;
-  inset-block-start: -0.5rem;
-  margin: 0;
-  padding: 0.375rem 0.25rem 0.25rem;
-  background: var(--oc-popover);
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--oc-muted-foreground);
-}
-
-.oc-emoji-picker__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.125rem; margin-block-end: 0.25rem; }
-.oc-emoji-picker__item {
-  display: grid;
-  place-items: center;
-  aspect-ratio: 1;
-  padding: 0;
-  border: 0;
-  border-radius: calc(var(--oc-radius) - 2px);
-  background: transparent;
-  font-size: 1.25rem;
-  line-height: 1;
-  cursor: pointer;
-}
-.oc-emoji-picker__item:hover { background: var(--oc-surface-strong); }
-.oc-emoji-picker__item:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
-
-/* Fade + small rise when it opens. */
-@media (prefers-reduced-motion: no-preference) {
-  .oc-emoji-picker[popover] {
-    transition: opacity var(--oc-transition-fast), translate var(--oc-transition-fast), display var(--oc-transition-fast) allow-discrete, overlay var(--oc-transition-fast) allow-discrete;
-  }
-  .oc-emoji-picker[popover]:popover-open { @starting-style { opacity: 0; translate: 0 0.25rem; } }
-  .oc-emoji-picker__item { transition: transform var(--oc-transition-fast); }
-  .oc-emoji-picker__item:hover { transform: scale(1.15); }
-}
+/* File: packages/ui/src/parts/media-emoji-picker.css | Map: trigger button -> popover panel (anchor positioned)
+   -> group label -> grid -> emoji buttons -> inline modifier -> motion
+   Emoji picker: a popover with a grid of emoji buttons. Opening / closing is the popover attribute;
+   inserting the emoji into a field is one small optional script (see the snippet). */
+
+/* Round trigger (a smiley), the same size as a toolbar icon button. */
+.oc-emoji-picker__trigger {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  font-size: 1.15rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.oc-emoji-picker__trigger:hover { 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. */
+.oc-emoji-picker[popover] {
+  position: fixed;
+  inset: auto;
+  margin: 0 0 0.375rem;
+  position-area: block-start span-inline-end;
+  position-try-fallbacks: flip-block, flip-inline;
+  inline-size: 17.5rem;
+  max-block-size: 18rem;
+  overflow-y: auto;
+  padding: 0.5rem;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 2px);
+  background: var(--oc-popover);
+  color: var(--oc-popover-foreground);
+  box-shadow: 0 8px 24px oklch(from var(--color-black-60) l c h / 0.15);
+  scrollbar-width: thin;
+}
+
+/* Inline: the same panel, always visible inside the page (no popover). */
+.oc-emoji-picker--inline {
+  inline-size: 17.5rem;
+  padding: 0.5rem;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 2px);
+  background: var(--oc-popover);
+}
+
+.oc-emoji-picker__label {
+  position: sticky;
+  inset-block-start: -0.5rem;
+  margin: 0;
+  padding: 0.375rem 0.25rem 0.25rem;
+  background: var(--oc-popover);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--oc-muted-foreground);
+}
+
+.oc-emoji-picker__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.125rem; margin-block-end: 0.25rem; }
+.oc-emoji-picker__item {
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--oc-radius) - 2px);
+  background: transparent;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.oc-emoji-picker__item:hover { background: var(--oc-surface-strong); }
+.oc-emoji-picker__item:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+
+/* Fade + small rise when it opens. */
+@media (prefers-reduced-motion: no-preference) {
+  .oc-emoji-picker[popover] {
+    transition: opacity var(--oc-transition-fast), translate var(--oc-transition-fast), display var(--oc-transition-fast) allow-discrete, overlay var(--oc-transition-fast) allow-discrete;
+  }
+  .oc-emoji-picker[popover]:popover-open { @starting-style { opacity: 0; translate: 0 0.25rem; } }
+  .oc-emoji-picker__item { transition: transform var(--oc-transition-fast); }
+  .oc-emoji-picker__item:hover { transform: scale(1.15); }
+}

package/dist/parts/media-entity-card.css

@@ -1,52 +1,52 @@
-/* File: packages/ui/src/parts/media-entity-card.css | Map: card grid (frame | body) -> framed media cell
-   -> glyph -> body (eyebrow, title, description) -> facts (key / value) -> stacked + small modifiers -> narrow containers
-   Entity card: a framed square "specimen" cell (image, glyph, icon) next to a detail column.
-   Good for dictionary entries, collection items, symbols, products. */
-
-.oc-entity-card {
-  container-type: inline-size;
-  inline-size: 100%;
-  border: 1px solid var(--oc-border);
-  border-radius: calc(var(--oc-radius) + 4px);
-  background: var(--oc-card);
-  color: var(--oc-foreground);
-}
-.oc-entity-card__grid { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; }
-
-/* Framed cell: a double frame (border + inset ring) around a soft radial background. */
-.oc-entity-card__frame {
-  display: grid;
-  place-items: center;
-  aspect-ratio: 1;
-  overflow: hidden;
-  border: 1px solid var(--oc-border-strong);
-  border-radius: var(--oc-radius);
-  background: radial-gradient(circle at 50% 40%, var(--oc-surface-strong), var(--oc-muted));
-  box-shadow: inset 0 0 0 0.35rem var(--oc-card), inset 0 0 0 calc(0.35rem + 1px) var(--oc-border);
-}
-.oc-entity-card__frame > :is(img, svg, .oc-media-art) { inline-size: 100%; block-size: 100%; object-fit: cover; }
-/* Contained pictures (logos, symbols) keep a margin inside the frame. */
-.oc-entity-card__frame--contain > :is(img, svg) { inline-size: 70%; block-size: 70%; object-fit: contain; }
-.oc-entity-card__glyph { font-size: 3.5rem; line-height: 1; color: var(--oc-foreground); }
-
-/* Detail column. */
-.oc-entity-card__body { display: grid; align-content: start; gap: 0.35rem; min-inline-size: 0; }
-.oc-entity-card__eyebrow { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oc-primary); }
-.oc-entity-card__title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
-.oc-entity-card__description { margin: 0; font-size: 0.875rem; color: var(--oc-muted-foreground); }
-
-/* Facts: small key / value grid. */
-.oc-entity-card__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 1rem; margin: 0.5rem 0 0; font-size: 0.8125rem; }
-.oc-entity-card__facts > dt { color: var(--oc-muted-foreground); }
-.oc-entity-card__facts > dd { margin: 0; font-weight: 500; }
-
-/* Footer row for tags or actions. */
-.oc-entity-card__footer { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1.25rem; border-block-start: 1px solid var(--oc-border); }
-
-/* Stacked: frame on top (also used automatically in narrow containers). */
-.oc-entity-card--stacked .oc-entity-card__grid { grid-template-columns: minmax(0, 1fr); }
-.oc-entity-card--sm .oc-entity-card__grid { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.875rem; padding: 0.875rem; }
-.oc-entity-card--sm .oc-entity-card__glyph { font-size: 2.25rem; }
-@container (max-width: 22rem) {
-  .oc-entity-card__grid { grid-template-columns: minmax(0, 1fr); }
-}
+/* File: packages/ui/src/parts/media-entity-card.css | Map: card grid (frame | body) -> framed media cell
+   -> glyph -> body (eyebrow, title, description) -> facts (key / value) -> stacked + small modifiers -> narrow containers
+   Entity card: a framed square "specimen" cell (image, glyph, icon) next to a detail column.
+   Good for dictionary entries, collection items, symbols, products. */
+
+.oc-entity-card {
+  container-type: inline-size;
+  inline-size: 100%;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+}
+.oc-entity-card__grid { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; }
+
+/* Framed cell: a double frame (border + inset ring) around a soft radial background. */
+.oc-entity-card__frame {
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border: 1px solid var(--oc-border-strong);
+  border-radius: var(--oc-radius);
+  background: radial-gradient(circle at 50% 40%, var(--oc-surface-strong), var(--oc-muted));
+  box-shadow: inset 0 0 0 0.35rem var(--oc-card), inset 0 0 0 calc(0.35rem + 1px) var(--oc-border);
+}
+.oc-entity-card__frame > :is(img, svg, .oc-media-art) { inline-size: 100%; block-size: 100%; object-fit: cover; }
+/* Contained pictures (logos, symbols) keep a margin inside the frame. */
+.oc-entity-card__frame--contain > :is(img, svg) { inline-size: 70%; block-size: 70%; object-fit: contain; }
+.oc-entity-card__glyph { font-size: 3.5rem; line-height: 1; color: var(--oc-foreground); }
+
+/* Detail column. */
+.oc-entity-card__body { display: grid; align-content: start; gap: 0.35rem; min-inline-size: 0; }
+.oc-entity-card__eyebrow { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oc-primary); }
+.oc-entity-card__title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
+.oc-entity-card__description { margin: 0; font-size: 0.875rem; color: var(--oc-muted-foreground); }
+
+/* Facts: small key / value grid. */
+.oc-entity-card__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 1rem; margin: 0.5rem 0 0; font-size: 0.8125rem; }
+.oc-entity-card__facts > dt { color: var(--oc-muted-foreground); }
+.oc-entity-card__facts > dd { margin: 0; font-weight: 500; }
+
+/* Footer row for tags or actions. */
+.oc-entity-card__footer { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1.25rem; border-block-start: 1px solid var(--oc-border); }
+
+/* Stacked: frame on top (also used automatically in narrow containers). */
+.oc-entity-card--stacked .oc-entity-card__grid { grid-template-columns: minmax(0, 1fr); }
+.oc-entity-card--sm .oc-entity-card__grid { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.875rem; padding: 0.875rem; }
+.oc-entity-card--sm .oc-entity-card__glyph { font-size: 2.25rem; }
+@container (max-width: 22rem) {
+  .oc-entity-card__grid { grid-template-columns: minmax(0, 1fr); }
+}