@birdycom/omniaui 0.11.0 → 0.11.1

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

@@ -1,78 +1,78 @@
-/* File: packages/ui/src/parts/media-flip-card.css | Map: card (perspective) -> hidden checkbox -> inner (3D) -> faces
-   -> flip label -> flipped states (checkbox, .is-flipped, --hover) -> vertical -> reduced motion (cross-fade)
-   Flip card: front and back in one grid cell; the inner layer turns 180deg. Triggers: a checkbox (CSS :has()),
-   hover / focus (--hover) or the .is-flipped class for frameworks. No JavaScript. */
-
-.oc-flip-card {
-  --oc-flip-card-turn: rotateY(180deg);
-  position: relative;
-  display: block;
-  inline-size: 100%;
-  perspective: 60rem;
-}
-
-/* The checkbox stays in the page (focusable, Space toggles) but is invisible. */
-.oc-flip-card__toggle { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; opacity: 0; pointer-events: none; }
-
-.oc-flip-card__inner {
-  display: grid;
-  transform-style: preserve-3d;
-  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
-}
-
-/* Both faces share one grid cell, so the card is as tall as the taller face. */
-.oc-flip-card__face {
-  position: relative;
-  grid-area: 1 / 1;
-  display: grid;
-  align-content: center;
-  gap: 0.5rem;
-  min-block-size: 10rem;
-  padding: 1.25rem;
-  border: 1px solid var(--oc-border);
-  border-radius: calc(var(--oc-radius) + 4px);
-  background: var(--oc-card);
-  color: var(--oc-foreground);
-  backface-visibility: hidden;
-}
-.oc-flip-card__face--back {
-  transform: var(--oc-flip-card-turn);
-  border-color: transparent;
-  background: var(--oc-primary);
-  color: var(--oc-primary-foreground);
-}
-.oc-flip-card__title { margin: 0; font-size: 1.25rem; font-weight: 700; }
-.oc-flip-card__text { margin: 0; font-size: 0.875rem; opacity: 0.85; }
-
-/* Flip label ("Show answer"): its ::after covers the face, so a click anywhere flips. */
-.oc-flip-card__flip { justify-self: start; font-size: 0.8125rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
-.oc-flip-card__flip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
-
-/* Keyboard focus on the checkbox (or inside a --hover card) rings the card. */
-.oc-flip-card:has(.oc-flip-card__toggle:focus-visible) .oc-flip-card__face,
-.oc-flip-card--hover:focus-visible .oc-flip-card__face { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
-.oc-flip-card--hover:focus-visible { outline: none; }
-
-/* Flipped: checkbox checked, .is-flipped, or hover / focus on a --hover card. */
-.oc-flip-card:has(> .oc-flip-card__toggle:checked) .oc-flip-card__inner,
-.oc-flip-card.is-flipped .oc-flip-card__inner,
-.oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__inner { transform: var(--oc-flip-card-turn); }
-
-/* Vertical flip (top over bottom). */
-.oc-flip-card--vertical { --oc-flip-card-turn: rotateX(180deg); }
-
-/* Reduced motion: no turning. The faces simply cross-fade. */
-@media (prefers-reduced-motion: reduce) {
-  .oc-flip-card .oc-flip-card__inner { transform: none; transition: none; }
-  .oc-flip-card .oc-flip-card__face { transform: none; transition: opacity 0.2s, visibility 0.2s; }
-  .oc-flip-card .oc-flip-card__face--back { opacity: 0; visibility: hidden; }
-  .oc-flip-card:has(> .oc-flip-card__toggle:checked) .oc-flip-card__inner,
-  .oc-flip-card.is-flipped .oc-flip-card__inner,
-  .oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__inner { transform: none; }
-  .oc-flip-card:has(> .oc-flip-card__toggle:checked) .oc-flip-card__face--front,
-  .oc-flip-card.is-flipped .oc-flip-card__face--front,
-  .oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__face--front { opacity: 0; visibility: hidden; }
-  .oc-flip-card:has(> .oc-flip-card__toggle:checked) .oc-flip-card__face--back,
-  .oc-flip-card.is-flipped .oc-flip-card__face--back,
-  .oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__face--back { opacity: 1; visibility: visible; }
-}
+/* File: packages/ui/src/parts/media-flip-card.css | Map: card (perspective) -> hidden checkbox -> inner (3D) -> faces
+   -> flip label -> flipped states (checkbox, .is-flipped, --hover) -> vertical -> reduced motion (cross-fade)
+   Flip card: front and back in one grid cell; the inner layer turns 180deg. Triggers: a checkbox (CSS :has()),
+   hover / focus (--hover) or the .is-flipped class for frameworks. No JavaScript. */
+
+.oc-flip-card {
+  --oc-flip-card-turn: rotateY(180deg);
+  position: relative;
+  display: block;
+  inline-size: 100%;
+  perspective: 60rem;
+}
+
+/* The checkbox stays in the page (focusable, Space toggles) but is invisible. */
+.oc-flip-card__toggle { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; opacity: 0; pointer-events: none; }
+
+.oc-flip-card__inner {
+  display: grid;
+  transform-style: preserve-3d;
+  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
+}
+
+/* Both faces share one grid cell, so the card is as tall as the taller face. */
+.oc-flip-card__face {
+  position: relative;
+  grid-area: 1 / 1;
+  display: grid;
+  align-content: center;
+  gap: 0.5rem;
+  min-block-size: 10rem;
+  padding: 1.25rem;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  backface-visibility: hidden;
+}
+.oc-flip-card__face--back {
+  transform: var(--oc-flip-card-turn);
+  border-color: transparent;
+  background: var(--oc-primary);
+  color: var(--oc-primary-foreground);
+}
+.oc-flip-card__title { margin: 0; font-size: 1.25rem; font-weight: 700; }
+.oc-flip-card__text { margin: 0; font-size: 0.875rem; opacity: 0.85; }
+
+/* Flip label ("Show answer"): its ::after covers the face, so a click anywhere flips. */
+.oc-flip-card__flip { justify-self: start; font-size: 0.8125rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
+.oc-flip-card__flip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
+
+/* Keyboard focus on the checkbox (or inside a --hover card) rings the card. */
+.oc-flip-card:has(.oc-flip-card__toggle:focus-visible) .oc-flip-card__face,
+.oc-flip-card--hover:focus-visible .oc-flip-card__face { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-flip-card--hover:focus-visible { outline: none; }
+
+/* Flipped: checkbox checked, .is-flipped, or hover / focus on a --hover card. */
+.oc-flip-card:has(> .oc-flip-card__toggle:checked) .oc-flip-card__inner,
+.oc-flip-card.is-flipped .oc-flip-card__inner,
+.oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__inner { transform: var(--oc-flip-card-turn); }
+
+/* Vertical flip (top over bottom). */
+.oc-flip-card--vertical { --oc-flip-card-turn: rotateX(180deg); }
+
+/* Reduced motion: no turning. The faces simply cross-fade. */
+@media (prefers-reduced-motion: reduce) {
+  .oc-flip-card .oc-flip-card__inner { transform: none; transition: none; }
+  .oc-flip-card .oc-flip-card__face { transform: none; transition: opacity 0.2s, visibility 0.2s; }
+  .oc-flip-card .oc-flip-card__face--back { opacity: 0; visibility: hidden; }
+  .oc-flip-card:has(> .oc-flip-card__toggle:checked) .oc-flip-card__inner,
+  .oc-flip-card.is-flipped .oc-flip-card__inner,
+  .oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__inner { transform: none; }
+  .oc-flip-card:has(> .oc-flip-card__toggle:checked) .oc-flip-card__face--front,
+  .oc-flip-card.is-flipped .oc-flip-card__face--front,
+  .oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__face--front { opacity: 0; visibility: hidden; }
+  .oc-flip-card:has(> .oc-flip-card__toggle:checked) .oc-flip-card__face--back,
+  .oc-flip-card.is-flipped .oc-flip-card__face--back,
+  .oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__face--back { opacity: 1; visibility: visible; }
+}

package/dist/parts/media-image-zoom.css

@@ -1,68 +1,68 @@
-/* File: packages/ui/src/parts/media-image-zoom.css | Map: root + zoom variable -> toolbar + level chips
-   -> viewport (scroll = pan) -> canvas (grows with the zoom) -> zoom levels (classes + radios via :has()) -> motion
-   Image zoom: the canvas gets wider than the viewport, so the native scrollbars / touch scrolling pan the image.
-   No JavaScript and no transform tricks: zooming is just inline-size: calc(100% * var(--oc-zoom)). */
-
-.oc-image-zoom {
-  --oc-zoom: 1;
-  --oc-image-zoom-ratio: 16 / 9;
-  display: grid;
-  gap: 0.5rem;
-  inline-size: 100%;
-}
-
-/* ---- Toolbar with zoom level chips (radio buttons) ---- */
-.oc-image-zoom__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
-.oc-image-zoom__label { margin-inline-end: 0.25rem; }
-.oc-image-zoom__level {
-  position: relative;
-  display: inline-grid;
-  place-items: center;
-  min-inline-size: 2.5rem;
-  padding: 0.25rem 0.5rem;
-  border: 1px solid var(--oc-border);
-  border-radius: 999px;
-  background: var(--oc-card);
-  color: var(--oc-foreground);
-  font-variant-numeric: tabular-nums;
-  cursor: pointer;
-}
-/* The radio itself is invisible but stays focusable (keyboard: arrow keys switch levels). */
-.oc-image-zoom__level > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
-.oc-image-zoom__level:has(input:checked) { border-color: var(--oc-primary); background: var(--oc-primary); color: var(--oc-primary-foreground); }
-.oc-image-zoom__level:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
-
-/* ---- Viewport: fixed ratio window; scrolling it pans the image ---- */
-.oc-image-zoom__viewport {
-  aspect-ratio: var(--oc-image-zoom-ratio);
-  overflow: auto;
-  overscroll-behavior: contain;
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius);
-  background: var(--oc-muted);
-  scrollbar-width: thin;
-}
-.oc-image-zoom__viewport:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
-
-/* ---- Canvas: same ratio as the viewport, scaled by --oc-zoom ---- */
-.oc-image-zoom__canvas { inline-size: calc(100% * var(--oc-zoom)); aspect-ratio: var(--oc-image-zoom-ratio); }
-.oc-image-zoom__canvas > * { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
-
-/* ---- Zoom levels: fixed classes, or radio chips (value = level) ---- */
-.oc-image-zoom--150 { --oc-zoom: 1.5; }
-.oc-image-zoom--200 { --oc-zoom: 2; }
-.oc-image-zoom--300 { --oc-zoom: 3; }
-.oc-image-zoom:has(.oc-image-zoom__level input[value="1"]:checked) { --oc-zoom: 1; }
-.oc-image-zoom:has(.oc-image-zoom__level input[value="1.5"]:checked) { --oc-zoom: 1.5; }
-.oc-image-zoom:has(.oc-image-zoom__level input[value="2"]:checked) { --oc-zoom: 2; }
-.oc-image-zoom:has(.oc-image-zoom__level input[value="3"]:checked) { --oc-zoom: 3; }
-.oc-image-zoom:has(.oc-image-zoom__level input[value="4"]:checked) { --oc-zoom: 4; }
-
-/* Ratio presets. */
-.oc-image-zoom--square { --oc-image-zoom-ratio: 1 / 1; }
-.oc-image-zoom--photo { --oc-image-zoom-ratio: 4 / 3; }
-
-/* Smooth resize only when motion is welcome. */
-@media (prefers-reduced-motion: no-preference) {
-  .oc-image-zoom__canvas { transition: inline-size var(--oc-transition-normal); }
-}
+/* File: packages/ui/src/parts/media-image-zoom.css | Map: root + zoom variable -> toolbar + level chips
+   -> viewport (scroll = pan) -> canvas (grows with the zoom) -> zoom levels (classes + radios via :has()) -> motion
+   Image zoom: the canvas gets wider than the viewport, so the native scrollbars / touch scrolling pan the image.
+   No JavaScript and no transform tricks: zooming is just inline-size: calc(100% * var(--oc-zoom)). */
+
+.oc-image-zoom {
+  --oc-zoom: 1;
+  --oc-image-zoom-ratio: 16 / 9;
+  display: grid;
+  gap: 0.5rem;
+  inline-size: 100%;
+}
+
+/* ---- Toolbar with zoom level chips (radio buttons) ---- */
+.oc-image-zoom__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-image-zoom__label { margin-inline-end: 0.25rem; }
+.oc-image-zoom__level {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  min-inline-size: 2.5rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 999px;
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+/* The radio itself is invisible but stays focusable (keyboard: arrow keys switch levels). */
+.oc-image-zoom__level > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.oc-image-zoom__level:has(input:checked) { border-color: var(--oc-primary); background: var(--oc-primary); color: var(--oc-primary-foreground); }
+.oc-image-zoom__level:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+
+/* ---- Viewport: fixed ratio window; scrolling it pans the image ---- */
+.oc-image-zoom__viewport {
+  aspect-ratio: var(--oc-image-zoom-ratio);
+  overflow: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  background: var(--oc-muted);
+  scrollbar-width: thin;
+}
+.oc-image-zoom__viewport:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+
+/* ---- Canvas: same ratio as the viewport, scaled by --oc-zoom ---- */
+.oc-image-zoom__canvas { inline-size: calc(100% * var(--oc-zoom)); aspect-ratio: var(--oc-image-zoom-ratio); }
+.oc-image-zoom__canvas > * { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
+
+/* ---- Zoom levels: fixed classes, or radio chips (value = level) ---- */
+.oc-image-zoom--150 { --oc-zoom: 1.5; }
+.oc-image-zoom--200 { --oc-zoom: 2; }
+.oc-image-zoom--300 { --oc-zoom: 3; }
+.oc-image-zoom:has(.oc-image-zoom__level input[value="1"]:checked) { --oc-zoom: 1; }
+.oc-image-zoom:has(.oc-image-zoom__level input[value="1.5"]:checked) { --oc-zoom: 1.5; }
+.oc-image-zoom:has(.oc-image-zoom__level input[value="2"]:checked) { --oc-zoom: 2; }
+.oc-image-zoom:has(.oc-image-zoom__level input[value="3"]:checked) { --oc-zoom: 3; }
+.oc-image-zoom:has(.oc-image-zoom__level input[value="4"]:checked) { --oc-zoom: 4; }
+
+/* Ratio presets. */
+.oc-image-zoom--square { --oc-image-zoom-ratio: 1 / 1; }
+.oc-image-zoom--photo { --oc-image-zoom-ratio: 4 / 3; }
+
+/* Smooth resize only when motion is welcome. */
+@media (prefers-reduced-motion: no-preference) {
+  .oc-image-zoom__canvas { transition: inline-size var(--oc-transition-normal); }
+}

package/dist/parts/media-lightbox.css

@@ -1,131 +1,131 @@
-/* File: packages/ui/src/parts/media-lightbox.css | Map: thumbnails -> dialog + backdrop -> bar -> track + slides
-   -> nav buttons -> caption + counter -> single image -> small screens -> motion
-   Lightbox: one native <dialog> with a scroll-snap track of slides. Thumbnails open it with
-   command="show-modal"; prev / next are anchor links to the slide ids, so it works without JavaScript. */
-
-/* ---- Thumbnails (buttons that open the dialog) ---- */
-.oc-lightbox-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; inline-size: 100%; }
-.oc-lightbox-thumb {
-  display: block;
-  padding: 0;
-  aspect-ratio: 4 / 3;
-  overflow: hidden;
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius);
-  background: var(--oc-muted);
-  cursor: zoom-in;
-}
-.oc-lightbox-thumb > * { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--oc-transition-normal); }
-.oc-lightbox-thumb:hover > * { transform: scale(1.04); }
-.oc-lightbox-thumb:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
-
-/* ---- The viewer: full-screen modal dialog, dark and blurred behind ---- */
-.oc-lightbox {
-  inline-size: 100vw;
-  block-size: 100dvh;
-  max-inline-size: none;
-  max-block-size: none;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  background: transparent;
-  color: var(--color-white-50);
-}
-.oc-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
-.oc-lightbox::backdrop { background: oklch(from var(--color-black-60) l c h / 0.88); backdrop-filter: blur(10px); }
-
-/* ---- Top bar: title left, close button right ---- */
-.oc-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; }
-.oc-lightbox__title { margin: 0; font-size: 0.95rem; font-weight: 600; }
-
-/* ---- Track: one slide per screen, snapping. Arrow keys scroll it when it has focus. ---- */
-.oc-lightbox__track {
-  display: flex;
-  min-block-size: 0;
-  overflow-x: auto;
-  overscroll-behavior: contain;
-  scroll-snap-type: x mandatory;
-  scrollbar-width: none;
-}
-.oc-lightbox__track:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
-.oc-lightbox__slide {
-  flex: 0 0 100%;
-  display: grid;
-  grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem;
-  grid-template-rows: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 1rem 0;
-  margin: 0;
-  padding-block-end: 1.5rem;
-  scroll-snap-align: center;
-  scroll-snap-stop: always;
-}
-.oc-lightbox__media { grid-column: 2; grid-row: 1; display: grid; place-items: center; min-block-size: 0; block-size: 100%; }
-.oc-lightbox__media > * {
-  max-inline-size: 100%;
-  max-block-size: calc(100dvh - 9rem);
-  object-fit: contain;
-  border: 1px solid oklch(from var(--color-white-50) l c h / 0.15);
-  border-radius: calc(var(--oc-radius) - 2px);
-  box-shadow: 0 40px 100px -30px oklch(from var(--color-black-60) l c h / 0.9);
-}
-/* Placeholder artwork has no natural size: give it one. */
-.oc-lightbox__media > .oc-media-art { inline-size: min(56rem, 100%); block-size: auto; aspect-ratio: 3 / 2; }
-
-/* ---- Round buttons: close (button) and prev / next (links) ---- */
-.oc-lightbox__close,
-.oc-lightbox__nav {
-  display: inline-grid;
-  place-items: center;
-  inline-size: 2.75rem;
-  aspect-ratio: 1;
-  border: 1px solid oklch(from var(--color-white-50) l c h / 0.25);
-  border-radius: 50%;
-  background: oklch(from var(--color-white-50) l c h / 0.08);
-  color: inherit;
-  font-size: 1.1rem;
-  line-height: 1;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background var(--oc-transition-fast), transform var(--oc-transition-fast);
-}
-.oc-lightbox__close:hover,
-.oc-lightbox__nav:hover { background: oklch(from var(--color-white-50) l c h / 0.18); transform: scale(1.06); }
-.oc-lightbox__close:focus-visible,
-.oc-lightbox__nav:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
-.oc-lightbox__nav { grid-row: 1; justify-self: center; }
-.oc-lightbox__nav--prev { grid-column: 1; }
-.oc-lightbox__nav--next { grid-column: 3; }
-
-/* ---- Caption with the "2 / 5" counter ---- */
-.oc-lightbox__caption {
-  grid-column: 1 / -1;
-  grid-row: 2;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.25rem 0.75rem;
-  padding-inline: 1rem;
-  font-size: 0.95rem;
-  text-align: center;
-  color: oklch(from var(--color-white-50) l c h / 0.8);
-}
-.oc-lightbox__counter { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; color: oklch(from var(--color-white-50) l c h / 0.6); }
-
-/* One image only: no prev / next and no counter needed. */
-.oc-lightbox--single .oc-lightbox__nav,
-.oc-lightbox--single .oc-lightbox__counter { visibility: hidden; }
-
-/* Small screens: narrower side columns, smaller buttons. */
-@media (max-width: 40rem) {
-  .oc-lightbox__slide { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
-  .oc-lightbox__nav { inline-size: 2.25rem; }
-}
-
-/* Motion only when the user has not asked for less. */
-@media (prefers-reduced-motion: no-preference) {
-  .oc-lightbox__track { scroll-behavior: smooth; }
-  .oc-lightbox[open] { animation: oc-lightbox-in 0.25s ease-out; }
-}
-@keyframes oc-lightbox-in { from { opacity: 0; scale: 0.98; } }
+/* File: packages/ui/src/parts/media-lightbox.css | Map: thumbnails -> dialog + backdrop -> bar -> track + slides
+   -> nav buttons -> caption + counter -> single image -> small screens -> motion
+   Lightbox: one native <dialog> with a scroll-snap track of slides. Thumbnails open it with
+   command="show-modal"; prev / next are anchor links to the slide ids, so it works without JavaScript. */
+
+/* ---- Thumbnails (buttons that open the dialog) ---- */
+.oc-lightbox-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; inline-size: 100%; }
+.oc-lightbox-thumb {
+  display: block;
+  padding: 0;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  background: var(--oc-muted);
+  cursor: zoom-in;
+}
+.oc-lightbox-thumb > * { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--oc-transition-normal); }
+.oc-lightbox-thumb:hover > * { transform: scale(1.04); }
+.oc-lightbox-thumb:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+
+/* ---- The viewer: full-screen modal dialog, dark and blurred behind ---- */
+.oc-lightbox {
+  inline-size: 100vw;
+  block-size: 100dvh;
+  max-inline-size: none;
+  max-block-size: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  background: transparent;
+  color: var(--color-white-50);
+}
+.oc-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
+.oc-lightbox::backdrop { background: oklch(from var(--color-black-60) l c h / 0.88); backdrop-filter: blur(10px); }
+
+/* ---- Top bar: title left, close button right ---- */
+.oc-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; }
+.oc-lightbox__title { margin: 0; font-size: 0.95rem; font-weight: 600; }
+
+/* ---- Track: one slide per screen, snapping. Arrow keys scroll it when it has focus. ---- */
+.oc-lightbox__track {
+  display: flex;
+  min-block-size: 0;
+  overflow-x: auto;
+  overscroll-behavior: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+.oc-lightbox__track:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-lightbox__slide {
+  flex: 0 0 100%;
+  display: grid;
+  grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem;
+  grid-template-rows: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1rem 0;
+  margin: 0;
+  padding-block-end: 1.5rem;
+  scroll-snap-align: center;
+  scroll-snap-stop: always;
+}
+.oc-lightbox__media { grid-column: 2; grid-row: 1; display: grid; place-items: center; min-block-size: 0; block-size: 100%; }
+.oc-lightbox__media > * {
+  max-inline-size: 100%;
+  max-block-size: calc(100dvh - 9rem);
+  object-fit: contain;
+  border: 1px solid oklch(from var(--color-white-50) l c h / 0.15);
+  border-radius: calc(var(--oc-radius) - 2px);
+  box-shadow: 0 40px 100px -30px oklch(from var(--color-black-60) l c h / 0.9);
+}
+/* Placeholder artwork has no natural size: give it one. */
+.oc-lightbox__media > .oc-media-art { inline-size: min(56rem, 100%); block-size: auto; aspect-ratio: 3 / 2; }
+
+/* ---- Round buttons: close (button) and prev / next (links) ---- */
+.oc-lightbox__close,
+.oc-lightbox__nav {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.75rem;
+  aspect-ratio: 1;
+  border: 1px solid oklch(from var(--color-white-50) l c h / 0.25);
+  border-radius: 50%;
+  background: oklch(from var(--color-white-50) l c h / 0.08);
+  color: inherit;
+  font-size: 1.1rem;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background var(--oc-transition-fast), transform var(--oc-transition-fast);
+}
+.oc-lightbox__close:hover,
+.oc-lightbox__nav:hover { background: oklch(from var(--color-white-50) l c h / 0.18); transform: scale(1.06); }
+.oc-lightbox__close:focus-visible,
+.oc-lightbox__nav:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-lightbox__nav { grid-row: 1; justify-self: center; }
+.oc-lightbox__nav--prev { grid-column: 1; }
+.oc-lightbox__nav--next { grid-column: 3; }
+
+/* ---- Caption with the "2 / 5" counter ---- */
+.oc-lightbox__caption {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.25rem 0.75rem;
+  padding-inline: 1rem;
+  font-size: 0.95rem;
+  text-align: center;
+  color: oklch(from var(--color-white-50) l c h / 0.8);
+}
+.oc-lightbox__counter { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; color: oklch(from var(--color-white-50) l c h / 0.6); }
+
+/* One image only: no prev / next and no counter needed. */
+.oc-lightbox--single .oc-lightbox__nav,
+.oc-lightbox--single .oc-lightbox__counter { visibility: hidden; }
+
+/* Small screens: narrower side columns, smaller buttons. */
+@media (max-width: 40rem) {
+  .oc-lightbox__slide { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
+  .oc-lightbox__nav { inline-size: 2.25rem; }
+}
+
+/* Motion only when the user has not asked for less. */
+@media (prefers-reduced-motion: no-preference) {
+  .oc-lightbox__track { scroll-behavior: smooth; }
+  .oc-lightbox[open] { animation: oc-lightbox-in 0.25s ease-out; }
+}
+@keyframes oc-lightbox-in { from { opacity: 0; scale: 0.98; } }