@layer components {
  /* Fullscreen zoomable image lightbox: the same .photo-review surface the
     reviews use, wrapped in a native <dialog> so it gets the backdrop, Esc, and
     focus trapping for free. See app/views/shared/_image_lightbox.html.erb. */
  /* The .photo-review class sets display: flex, which overrides the native
     `dialog:not([open]) { display: none }`. Restore it, or the closed dialog
     renders as a full-viewport box that breaks the host layout. It only shows
     when open (showModal adds the [open] attribute). */
  dialog.photo-review--lightbox:not([open]) {
    display: none;
  }

  dialog.photo-review--lightbox {
    /* Reset the user-agent dialog box so the .photo-review surface fills the
       whole viewport. */
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border: none;
    padding: 0;
    margin: 0;
    background: #1a1d1a;
    overflow: hidden;
  }

  dialog.photo-review--lightbox::backdrop {
    background: rgba(10, 12, 10, 0.7);
  }

  /* .photo-review is normally position: fixed; inset: 0. Inside the top-layer
     dialog we let it fill the dialog box (already viewport-sized above) instead. */
  dialog.photo-review--lightbox.photo-review {
    position: static;
  }

  .photo-review--lightbox .photo-review__topbar {
    justify-content: flex-end;
  }
}