@layer pages {
  .photo-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-5);
  }

  .photo-navigation > :last-child { justify-self: end; }
  .photo-navigation > :first-child { justify-self: start; }
  .photo-navigation__position { display: grid; gap: .25rem; text-align: center; font-size: var(--text-sm); }
  .photo-navigation [aria-disabled="true"] { opacity: .5; cursor: default; }
  .photo-viewer-hint { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
  .photo-detail .description { overflow-wrap: anywhere; }
  [data-photo-viewer-trigger][aria-haspopup="dialog"] { cursor: zoom-in; }

  html.photo-viewer-open { overflow: hidden; }

  .photo-viewer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: #f8f6f2;
    background: #141414;
    color-scheme: dark;
  }

  .photo-viewer:not([open]) { display: none; }
  .photo-viewer::backdrop { background: rgb(0 0 0 / .9); }
  .photo-viewer__shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .photo-viewer__shell:fullscreen { background: #141414; }
  .photo-viewer__toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    padding: max(.5rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) .5rem max(.75rem, env(safe-area-inset-left));
    border-bottom: 1px solid #444;
    background: #202020;
  }

  .photo-viewer__zoom-controls,
  .photo-viewer__window-controls,
  .photo-viewer__navigation { display: flex; align-items: center; gap: .375rem; }
  .photo-viewer :where(button, .button) {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: .4rem .65rem;
    border: 1px solid #686868;
    border-radius: .4rem;
    color: #fff;
    background: #303030;
    box-shadow: none;
    font-size: .875rem;
    text-decoration: none;
  }
  .photo-viewer :where(button, .button):hover { border-color: #ddd; color: #fff; background: #484848; }
  .photo-viewer :where(button, a):focus-visible { outline: 3px solid #ffd082; outline-offset: 2px; }
  .photo-viewer button:disabled { opacity: .4; cursor: default; }
  .photo-viewer [hidden] { display: none; }
  .photo-viewer__zoom { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; font-size: .875rem; }
  .photo-viewer__stage { position: relative; min-height: 0; overflow: hidden; touch-action: none; user-select: none; }
  .photo-viewer__stage[data-zoomed="true"] { cursor: grab; }
  .photo-viewer__stage[data-dragging="true"] { cursor: grabbing; }
  .photo-viewer__image { position: absolute; top: 50%; left: 50%; max-width: none; max-height: none; margin: 0; transform-origin: center; }
  .photo-viewer__status { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; pointer-events: none; }
  .photo-viewer__footer {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: .6rem max(.75rem, env(safe-area-inset-right)) max(.6rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    border-top: 1px solid #444;
    background: #202020;
    text-align: center;
  }
  .photo-viewer__navigation span { min-width: 5rem; font-size: .875rem; font-variant-numeric: tabular-nums; }
  .photo-viewer__caption { max-width: 100%; overflow-wrap: anywhere; }
  .photo-viewer__caption h2 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: inherit; font-size: 1rem; }
  .photo-viewer__caption a { color: #ffd082; font-size: .875rem; }
  #photo-viewer-help { max-width: 60rem; margin: 0; color: #d0d0d0; font-size: .75rem; }

  @media (max-width: 40rem) {
    .photo-navigation { grid-template-columns: 1fr 1fr; }
    .photo-navigation__position { grid-column: 1 / -1; grid-row: 2; }
    .photo-navigation .button { padding-inline: .6rem; font-size: .875rem; }
    .photo-viewer__toolbar { justify-content: center; }
  }
}