@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, and
     the three verbs standing in three corners — close top end, download foot
     end, share top start — each a full button the picture cannot swallow.
     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;
      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 child shares the one cell and self-aligns to its corner. */
  .lightbox > * {
    grid-area: 1 / 1;
  }

  .lightbox__close {
    align-self: start;
    justify-self: end;
    z-index: 1;
  }

  .lightbox__download {
    align-self: end;
    justify-self: end;
    z-index: 1;
  }

  .lightbox__share {
    align-self: start;
    justify-self: start;
    z-index: 1;
  }

  /* A verb must survive any picture behind it: a filled circle with the
     float's shadow, never the quiet transparency (chalet's buttons carry
     their fill by default; ours opt in). */
  .lightbox :is(.lightbox__close .btn, .lightbox__download, .lightbox__share) {
    --btn-background: var(--color-canvas);

    box-shadow: var(--shadow);
  }

  .lightbox__image {
    max-inline-size: calc(100dvw - var(--inline-space-double) * 2);
    max-block-size: calc(100dvh - var(--block-space) * 2);
    object-fit: contain;
  }
}