@birdycom/omniaui 0.0.0-stage → 0.11.1

package/dist/parts/forms-password-requirements.css

@@ -0,0 +1,55 @@
+/* File: packages/ui/src/parts/forms-password-requirements.css
+   Map: list -> rule (icon via ::before) -> met state -> --inline variant
+   Password requirements: a live checklist of password rules under a password field.
+   A rule is "met" with the modifier .oc-password-requirement--met (set by the tiny script or a wrapper).
+   The list uses aria-live="polite" so screen readers hear the changes. */
+
+/* List: compact, no bullets. */
+.oc-password-requirements {
+  display: grid;
+  gap: 0.25rem;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.8rem;
+}
+
+/* One rule: icon + text. Not met = muted with a cross. */
+.oc-password-requirement {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--oc-muted-foreground);
+  transition: color var(--oc-transition-fast);
+}
+
+/* Icon in a small circle (text glyph, no icon font needed). */
+.oc-password-requirement::before {
+  content: "\2715";
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  inline-size: 1rem;
+  block-size: 1rem;
+  border-radius: 999px;
+  background: var(--oc-surface-strong);
+  font-size: 0.6rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+/* Met: success color with a check mark. */
+.oc-password-requirement--met { color: var(--oc-success); }
+
+.oc-password-requirement--met::before {
+  content: "\2713";
+  background: var(--oc-success);
+  color: var(--oc-success-foreground);
+}
+
+/* Inline variant: rules side by side, wrapping (short rule texts). */
+.oc-password-requirements--inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+}

package/dist/parts/forms-phone-input.css

@@ -0,0 +1,85 @@
+/* File: packages/ui/src/parts/forms-phone-input.css
+   Map: wrapper (one border around both parts) -> dial-code select -> number input -> states (focus, invalid, disabled) -> sizes
+   Phone input: a country dial code (native <select>) and the national number (input type="tel") in one frame.
+   No JavaScript needed; the React/Vue wrappers only add digit grouping ("485 12 34 56"). */
+
+/* Wrapper: draws the single border, so both controls look like one field. */
+.oc-phone-input {
+  display: flex;
+  align-items: stretch;
+  inline-size: 100%;
+  border: 1px solid var(--oc-input);
+  border-radius: var(--oc-radius);
+  background: transparent;
+  overflow: hidden;
+  transition: border-color var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
+}
+
+/* Focus ring on the whole frame while either part has focus. */
+.oc-phone-input:focus-within {
+  border-color: var(--oc-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
+}
+
+/* Dial code: compact native select, separated by a divider line. */
+.oc-phone-input-dial {
+  flex: none;
+  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
+  border: 0;
+  border-inline-end: 1px solid var(--oc-input);
+  background: var(--oc-surface);
+  color: var(--oc-foreground);
+  font: inherit;
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  outline: none;
+}
+
+/* Dark mode: keep the opened option list readable (same as .oc-select option). */
+.oc-phone-input-dial option {
+  background: var(--oc-background);
+  color: var(--oc-foreground);
+}
+
+/* National number: borderless, fills the rest of the frame. */
+.oc-phone-input-number {
+  flex: 1;
+  min-inline-size: 0;
+  padding: 0.5rem 0.75rem;
+  border: 0;
+  background: transparent;
+  color: var(--oc-foreground);
+  font: inherit;
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+  outline: none;
+}
+
+.oc-phone-input-number::placeholder { color: var(--oc-muted-foreground); }
+
+/* Invalid: modifier, aria-invalid on the input, or the browser's own check after user input. */
+.oc-phone-input--error,
+.oc-phone-input:has([aria-invalid="true"]),
+.oc-phone-input:has(.oc-phone-input-number:user-invalid) {
+  border-color: var(--oc-destructive);
+}
+
+.oc-phone-input--error:focus-within,
+.oc-phone-input:has([aria-invalid="true"]):focus-within {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-destructive) 25%, transparent);
+}
+
+/* Disabled: dim the whole frame when the number input is disabled. */
+.oc-phone-input:has(.oc-phone-input-number:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Small size for toolbars and dense forms. */
+.oc-phone-input--sm .oc-phone-input-dial,
+.oc-phone-input--sm .oc-phone-input-number {
+  padding-block: 0.25rem;
+  font-size: 0.8rem;
+}

package/dist/parts/forms-time-input.css

@@ -0,0 +1,74 @@
+/* File: packages/ui/src/parts/forms-time-input.css
+   Map: 24h text field (HH:mm) -> invalid state -> slot list (radio chips) -> slot states -> --sm
+   Time input: a short text field with pattern="HH:mm" and a <datalist> of suggested slots,
+   plus an optional slot list (radio chips) to pick a time without typing. No JavaScript needed. */
+
+/* Field: add next to .oc-input. Narrow, centered digits. */
+.oc-time-input {
+  inline-size: 6.5rem;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.04em;
+}
+
+/* Wrong format (e.g. 25:00) after the user typed: native pattern check. */
+.oc-time-input:user-invalid { border-color: var(--oc-destructive); }
+
+/* Slot list: a wrapping grid of radio chips (role="radiogroup"). */
+.oc-time-slots {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
+  gap: 0.375rem;
+  /* Fill the row (also inside flex parents) so auto-fill can create several columns. */
+  inline-size: 100%;
+  max-block-size: 12rem;
+  overflow-y: auto;
+  padding: 0.25rem;
+}
+
+/* One slot: a label that wraps a hidden radio input. */
+.oc-time-slot {
+  position: relative;
+  padding: 0.375rem 0.25rem;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) - 2px);
+  color: var(--oc-foreground);
+  font-size: 0.8rem;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  cursor: pointer;
+  transition: background var(--oc-transition-fast), border-color var(--oc-transition-fast);
+}
+
+/* The radio stays in the tab order (keyboard works) but is invisible. */
+.oc-time-slot input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.oc-time-slot:hover { background: var(--oc-surface); }
+
+.oc-time-slot:has(input:checked) {
+  border-color: var(--oc-primary);
+  background: var(--oc-primary);
+  color: var(--oc-primary-foreground);
+}
+
+.oc-time-slot:has(input:focus-visible) {
+  outline: 2px solid var(--oc-ring);
+  outline-offset: 1px;
+}
+
+/* Booked / unavailable slot. */
+.oc-time-slot:has(input:disabled) {
+  opacity: 0.45;
+  text-decoration: line-through;
+  cursor: not-allowed;
+}
+
+/* Small slots for dense layouts. */
+.oc-time-slots--sm { grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); }
+.oc-time-slots--sm .oc-time-slot { padding-block: 0.25rem; font-size: 0.72rem; }

package/dist/parts/forms-toggle-field.css

@@ -0,0 +1,69 @@
+/* File: packages/ui/src/parts/forms-toggle-field.css
+   Map: row (label wraps text + switch) -> text block (label + description) -> states -> --card / --reverse
+   Toggle field: a settings row with a title, a description and a switch.
+   The whole row is a <label>, so clicking the text flips the switch. The switch inside is a
+   <span class="oc-switch"> (a label inside a label is not valid HTML). */
+
+/* Row: text on the left, switch on the right. */
+.oc-toggle-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-block: 0.5rem;
+  cursor: pointer;
+}
+
+/* Text block. */
+.oc-toggle-field-text {
+  display: grid;
+  gap: 0.125rem;
+  min-inline-size: 0;
+}
+
+.oc-toggle-field-label {
+  color: var(--oc-foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.oc-toggle-field-description {
+  color: var(--oc-muted-foreground);
+  font-size: 0.8rem;
+  line-height: 1.4;
+}
+
+/* Disabled switch: dim the row and show it can't be used. */
+.oc-toggle-field:has(input:disabled) {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.oc-toggle-field:has(input:disabled) .oc-switch { cursor: not-allowed; }
+
+/* Card: bordered box; the border turns primary while the switch is on. */
+.oc-toggle-field--card {
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  background: var(--oc-card);
+  transition: border-color var(--oc-transition-fast), background var(--oc-transition-fast);
+}
+
+.oc-toggle-field--card:hover { background: var(--oc-surface); }
+
+.oc-toggle-field--card:has(input:checked) {
+  border-color: color-mix(in srgb, var(--oc-primary) 55%, var(--oc-border));
+}
+
+.oc-toggle-field--card:has(input:focus-visible) {
+  outline: 2px solid var(--oc-ring);
+  outline-offset: 2px;
+}
+
+/* Reverse: switch first, text after it. */
+.oc-toggle-field--reverse {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}

package/dist/parts/media-art.css

@@ -0,0 +1,21 @@
+/* File: packages/ui/src/parts/media-art.css | Map: base placeholder -> palette variants (--2 … --6)
+   Placeholder artwork for media demos: a soft palette gradient instead of an image file.
+   Use it wherever an <img> would go: <div class="oc-media-art oc-media-art--3" role="img" aria-label="…"></div>.
+   Only Omnia palette tokens, so no hex and no external image URLs. */
+
+.oc-media-art {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  /* Light spot top-left + diagonal gradient; the two colors come from the variant. */
+  background:
+    radial-gradient(circle at 28% 30%, oklch(from var(--color-white-50) l c h / 0.35), transparent 45%),
+    linear-gradient(135deg, var(--oc-media-art-from, var(--color-vividblue-60)), var(--oc-media-art-to, var(--color-purple-50)));
+}
+
+/* Variants: just another pair of palette colors. */
+.oc-media-art--2 { --oc-media-art-from: var(--color-teal-50); --oc-media-art-to: var(--color-skycyan-50); }
+.oc-media-art--3 { --oc-media-art-from: var(--color-orange-60); --oc-media-art-to: var(--color-red-50); }
+.oc-media-art--4 { --oc-media-art-from: var(--color-green-40); --oc-media-art-to: var(--color-teal-70); }
+.oc-media-art--5 { --oc-media-art-from: var(--color-magenta-50); --oc-media-art-to: var(--color-indigo-50); }
+.oc-media-art--6 { --oc-media-art-from: var(--color-yellow-60); --oc-media-art-to: var(--color-peru-60); }

package/dist/parts/media-attachment.css

@@ -0,0 +1,160 @@
+/* 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. */
+
+.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; }
+
+/* ---- File chip ---- */
+.oc-attachment {
+  --oc-attachment-tone: var(--oc-muted-foreground);
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-inline-size: 0;
+  max-inline-size: 20rem;
+  padding: 0.4rem 0.5rem 0.4rem 0.4rem;
+  overflow: hidden;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 2px);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  font-size: 0.8rem;
+  line-height: 1.3;
+  text-decoration: none;
+  transition: background var(--oc-transition-normal), border-color var(--oc-transition-normal);
+}
+.oc-attachment-list--stack > .oc-attachment,
+.oc-attachment-list--stack > li > .oc-attachment { max-inline-size: none; }
+a.oc-attachment:hover { border-color: var(--oc-border-strong, var(--oc-border)); background: var(--oc-surface-strong); }
+a.oc-attachment:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+
+/* Icon tile: a page with a folded corner, the extension in the type tone */
+.oc-attachment__icon {
+  flex: none;
+  display: grid;
+  place-items: end center;
+  inline-size: 2.1rem;
+  block-size: 2.5rem;
+  padding-block-end: 0.3rem;
+  overflow: hidden;
+  border-radius: 0.3rem;
+  background:
+    linear-gradient(225deg, color-mix(in oklch, var(--oc-attachment-tone) 35%, var(--oc-card)) 0.45rem, transparent 0.45rem),
+    color-mix(in oklch, var(--oc-attachment-tone) 14%, var(--oc-card));
+  color: var(--oc-attachment-tone);
+  font-size: 0.6rem;
+  font-weight: 750;
+  letter-spacing: 0.03em;
+  clip-path: polygon(0 0, calc(100% - 0.45rem) 0, 100% 0.45rem, 100% 100%, 0 100%);
+}
+.oc-attachment__icon:has(> :is(img, .oc-media-art)) { padding: 0; clip-path: none; }
+.oc-attachment__icon > :is(img, .oc-media-art) { inline-size: 100%; block-size: 100%; object-fit: cover; }
+.oc-attachment__body { display: grid; flex: 1 1 auto; min-inline-size: 0; }
+.oc-attachment__name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
+.oc-attachment__size { color: var(--oc-muted-foreground); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
+
+.oc-attachment__remove {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  display: grid;
+  place-items: center;
+  inline-size: 1.6rem;
+  block-size: 1.6rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+.oc-attachment__remove:hover { background: oklch(from var(--oc-destructive) l c h / 0.12); color: var(--oc-destructive); }
+.oc-attachment__remove:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* ---- Type tones (theme tokens, so both color schemes stay readable) ---- */
+.oc-attachment--pdf { --oc-attachment-tone: var(--oc-destructive); }
+.oc-attachment--doc { --oc-attachment-tone: var(--oc-chart-1, var(--oc-primary)); }
+.oc-attachment--sheet { --oc-attachment-tone: var(--oc-success); }
+.oc-attachment--zip { --oc-attachment-tone: var(--oc-warning); }
+.oc-attachment--image { --oc-attachment-tone: var(--oc-chart-4, var(--oc-primary)); }
+
+/* ---- Upload state: a thin progress line along the bottom (--oc-attachment-progress) and an error state ---- */
+.oc-attachment--uploading::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  inline-size: var(--oc-attachment-progress, 40%);
+  block-size: 3px;
+  background: var(--oc-primary);
+  transition: inline-size var(--oc-transition-normal);
+}
+.oc-attachment--uploading .oc-attachment__size { color: var(--oc-primary); }
+.oc-attachment--error { border-color: oklch(from var(--oc-destructive) l c h / 0.55); }
+.oc-attachment--error .oc-attachment__size { color: var(--oc-destructive); }
+
+/* ---- Image preview inside a message: the picture with an optional caption ---- */
+.oc-attachment-image {
+  position: relative;
+  display: block;
+  inline-size: min(100%, 18rem);
+  overflow: hidden;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 2px);
+  background: var(--oc-muted);
+  color: var(--color-white-50);
+  text-decoration: none;
+}
+.oc-attachment-image > :is(img, .oc-media-art) {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  max-block-size: 14rem;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+}
+.oc-attachment-image__caption {
+  position: absolute;
+  inset: auto 0 0;
+  padding: 1.25rem 0.6rem 0.4rem;
+  overflow: hidden;
+  background: linear-gradient(transparent, oklch(from var(--color-black-60) l c h / 0.6));
+  font-size: 0.72rem;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+a.oc-attachment-image:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05); }
+
+/* ---- Thumbnail chip (pasted screenshot in a composer): square image with a remove button on top ---- */
+.oc-attachment-thumb {
+  position: relative;
+  flex: none;
+  inline-size: 4rem;
+  block-size: 4rem;
+  overflow: hidden;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 2px);
+  background: var(--oc-muted);
+}
+.oc-attachment-thumb > :is(img, .oc-media-art) { inline-size: 100%; block-size: 100%; object-fit: cover; }
+.oc-attachment-thumb > .oc-attachment__remove {
+  position: absolute;
+  inset-block-start: 0.2rem;
+  inset-inline-end: 0.2rem;
+  inline-size: 1.35rem;
+  block-size: 1.35rem;
+  background: oklch(from var(--color-black-60) l c h / 0.6);
+  color: var(--color-white-50);
+  font-size: 0.65rem;
+}
+.oc-attachment-thumb > .oc-attachment__remove:hover { background: var(--oc-destructive); color: var(--color-white-50); }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-attachment, .oc-attachment--uploading::after { transition: none; }
+}

package/dist/parts/media-browser-frame.css

@@ -0,0 +1,73 @@
+/* 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
+   Browser frame: fake browser chrome around a screenshot or any live content (portfolio, product shots). */
+
+.oc-browser-frame {
+  --oc-browser-frame-ratio: 16 / 10;
+  display: grid;
+  inline-size: 100%;
+  margin: 0;
+  overflow: hidden;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  box-shadow: 0 30px 60px -30px oklch(from var(--color-black-60) l c h / 0.45);
+}
+
+/* ---- Chrome bar ---- */
+.oc-browser-frame__bar {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.55rem 0.8rem;
+  border-block-end: 1px solid var(--oc-border);
+  background: var(--oc-muted);
+}
+.oc-browser-frame__bar > i { flex: none; inline-size: 0.65rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-red-50); }
+.oc-browser-frame__bar > i:nth-of-type(2) { background: var(--color-orange-60); }
+.oc-browser-frame__bar > i:nth-of-type(3) { background: var(--color-green-20); }
+
+/* Address pill with a lock; the text is cut off with "…" when the frame is narrow. */
+.oc-browser-frame__address {
+  flex: 1;
+  min-inline-size: 0;
+  max-inline-size: 28rem;
+  margin-inline: auto;
+  padding: 0.2rem 0.75rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--oc-card);
+  color: var(--oc-muted-foreground);
+  font-size: 0.75rem;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.oc-browser-frame__address::before { content: "\1F512\FE0E" / ""; margin-inline-end: 0.35rem; font-size: 0.65rem; opacity: 0.7; }
+/* Balance the dots on the left so the address stays centered. */
+.oc-browser-frame__actions { display: flex; gap: 0.35rem; min-inline-size: 2.4rem; justify-content: flex-end; color: var(--oc-muted-foreground); font-size: 0.8rem; }
+
+/* ---- View: the screenshot (or any content) ---- */
+.oc-browser-frame__view { position: relative; aspect-ratio: var(--oc-browser-frame-ratio); overflow: hidden; background: var(--oc-background); }
+.oc-browser-frame__view > :is(img, video, iframe, .oc-media-art) { display: block; inline-size: 100%; block-size: 100%; border: 0; object-fit: cover; object-position: top; }
+/* Free height: the content decides (live HTML inside the frame). */
+.oc-browser-frame--auto .oc-browser-frame__view { aspect-ratio: auto; }
+
+.oc-browser-frame__caption { padding: 0.6rem 0.9rem; border-block-start: 1px solid var(--oc-border); font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+
+/* ---- Modifiers ---- */
+.oc-browser-frame--minimal .oc-browser-frame__address,
+.oc-browser-frame--minimal .oc-browser-frame__actions { display: none; }
+/* Dark chrome in both themes (light-dark() tokens resolve to their dark side). */
+.oc-browser-frame--dark { color-scheme: dark; }
+
+/* Tilt: a slight 3D angle that straightens on hover / focus. Static with reduced motion. */
+.oc-browser-frame--tilt { transform: perspective(80rem) rotateX(6deg) rotateY(-8deg); transform-origin: center; }
+@media (prefers-reduced-motion: no-preference) {
+  .oc-browser-frame--tilt { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
+  .oc-browser-frame--tilt:is(:hover, :focus-within) { transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .oc-browser-frame--tilt { transform: none; }
+}

package/dist/parts/media-card.css

@@ -0,0 +1,83 @@
+/* File: packages/ui/src/parts/media-card.css | Map: card grid -> body row (avatar | text | menu) -> title (stretched link)
+   -> meta -> menu button -> compact modifier -> hover
+   Media card: a .oc-media-thumb on top, then avatar + title + meta + an overflow menu button.
+   The title link stretches over the whole card (::after), the menu button sits above it. */
+
+.oc-media-card {
+  position: relative;
+  display: grid;
+  gap: 0.75rem;
+  align-content: start;
+  inline-size: 100%;
+  color: var(--oc-foreground);
+}
+
+/* Avatar | text | menu. */
+.oc-media-card__body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; }
+.oc-media-card__body:not(:has(.oc-media-card__avatar)) { grid-template-columns: minmax(0, 1fr) auto; }
+
+.oc-media-card__avatar {
+  display: grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: 50%;
+  background: var(--oc-muted);
+  color: var(--oc-foreground);
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+.oc-media-card__avatar > * { inline-size: 100%; block-size: 100%; object-fit: cover; }
+
+.oc-media-card__text { display: grid; gap: 0.2rem; min-inline-size: 0; }
+
+/* Two lines max, then "…". */
+.oc-media-card__title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+.oc-media-card__title > a { color: inherit; text-decoration: none; }
+.oc-media-card__title > a::after { content: ""; position: absolute; inset: 0; border-radius: var(--oc-radius); }
+.oc-media-card__title > a:focus-visible { outline: none; }
+.oc-media-card__title > a:focus-visible::after { outline: 2px solid var(--oc-ring); outline-offset: 4px; }
+
+.oc-media-card__meta { margin: 0; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-media-card__meta > a { position: relative; z-index: 1; color: inherit; text-decoration: none; }
+.oc-media-card__meta > a:hover { color: var(--oc-foreground); }
+
+/* Overflow menu (⋮): above the stretched link, so it gets its own clicks. */
+.oc-media-card__menu {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  inline-size: 2rem;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  font-size: 1.1rem;
+  cursor: pointer;
+}
+.oc-media-card__menu:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
+.oc-media-card__menu:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* Compact: smaller avatar and text, e.g. for a dense grid. */
+.oc-media-card--compact { gap: 0.5rem; }
+.oc-media-card--compact .oc-media-card__avatar { inline-size: 1.75rem; }
+.oc-media-card--compact .oc-media-card__title { font-size: 0.875rem; }
+
+/* Hovering the card zooms its thumb a little (the stretched link covers the thumb). */
+@media (prefers-reduced-motion: no-preference) {
+  .oc-media-card:hover .oc-media-thumb > :is(img, video, .oc-media-art) { transform: scale(1.04); }
+}