@layer components {
  /* ——— Lightbox ———
     Chalet's photo sheet, not a card: the picture over the whole screen on a
     translucent wash of paper, the page blurred to nothing behind it. Around
     it: close at the top end, previous and next at the sides, and a foot bar
     under the picture with its name and the verbs.
     The <dialog> is the platform's, so esc — and tap-outside where
     `closedby` exists — are free. */
  .lightbox {
    inline-size: 100dvw;
    block-size: 100dvh;
    max-inline-size: unset;
    max-block-size: unset;
    inset: 0;
    margin: auto;
    /* The sheet is edge to edge, so it owns the insets its verbs and picture
       must clear — the status bar above, the home indicator below (the bar
       rode over the clock on a phone, user 2026-08-24). */
    padding: calc(var(--block-space) + var(--safe-inset-top))
      calc(var(--inline-space-double) + var(--safe-inset-right))
      calc(var(--block-space) + var(--safe-inset-bottom))
      calc(var(--inline-space-double) + var(--safe-inset-left));
    background-color: oklch(var(--lch-paper) / 0.66);
    border: 0;
    overflow: hidden;
    transition:
      display var(--speed) allow-discrete,
      overlay var(--speed) allow-discrete,
      opacity var(--speed) var(--ease-out),
      scale var(--speed) var(--ease-out);
    opacity: 0;
    scale: 0.95;

    &[open] {
      display: grid;
      grid-template:
        "close    close   close" auto
        "previous picture next" minmax(0, 1fr)
        "bar      bar     bar" auto / auto minmax(0, 1fr) auto;
      gap: var(--block-space) var(--inline-space);
      place-items: center;
      opacity: 1;
      scale: 1;

      @starting-style {
        opacity: 0;
        scale: 0.95;
      }
    }

    &::backdrop {
      -webkit-backdrop-filter: blur(66px);
      backdrop-filter: blur(66px);
    }
  }

  /* Every control has a cell of its own beside the picture, never on it,
     so each stays the quiet circle the chat's T is, over any picture. */
  .lightbox__close {
    grid-area: close;
    justify-self: end;
  }

  .lightbox__previous {
    grid-area: previous;
  }

  .lightbox__next {
    grid-area: next;
  }

  .lightbox__image {
    grid-area: picture;
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
  }

  /* A PDF takes the whole cell: the viewer inside scrolls its own pages. */
  .lightbox__frame {
    grid-area: picture;
    place-self: stretch;
    border: 0;
  }

  .lightbox__bar {
    grid-area: bar;
    justify-self: stretch;
  }

  /* The picture on the clipboard: the glyph says so until the next one. */
  .lightbox__copy--copied .icon {
    --svg: url("/assets/check-af489e59.svg");
  }
}