/* The gallery: a folder's display list, laid out by the core (gallery-core.js) and painted by
   gallery-view.js as absolutely placed elements over the style's sheet. Nothing here moves
   anything: every position comes from the core, so the Mac and the browser agree. */

.gallery {
  position: fixed;
  inset: 0;
  z-index: 0;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-variant-ligatures: none;
  font-kerning: none;
}
.gallery[hidden] { display: none; }
.gallery-sheet { position: absolute; inset: 0; }
/* The view's area: what scrolls, what is fixed over it (Peek), and, during a move, a copy of the
   old view beneath; a zoom stays inside it. */
.gallery-stage { position: absolute; overflow: hidden; }
.gallery-clip {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.gallery-fixed, .gallery-ghost { position: absolute; inset: 0; pointer-events: none; }
/* Each layer stacks its own items: the old view's copy, then the content, then Peek over both. */
.gallery-ghost, .gallery-clip { z-index: 0; }
.gallery-fixed { z-index: 1; }
.gallery-ghost { overflow: hidden; }
.gallery-ghost-inner { position: absolute; inset: 0; }
.gallery-content { position: relative; width: 100%; }
.gallery-content > *, .gallery-fixed > *, .g-lane-content > * {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.gallery-content > [hidden], .gallery-fixed > [hidden], .g-lane-content > [hidden] { display: none; }
/* A lane: a band that scrolls sideways on its own, its items placed in content points inside. */
.g-lane { overflow: hidden; }
.g-lane-content { position: absolute; width: 0; height: 0; }
.g-text { white-space: pre; line-height: 1.3; overflow: visible; }
.g-probe { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.g-picture { image-rendering: auto; }

/* The gallery's toolbar (gallery-toolbar.js), in the viewer toolbar's place. */
/* One line: the bar is sized from its contents, and a label that could wrap would narrow it. */
.gallery-toolbar { white-space: nowrap; }
.gallery-toolbar .group { display: flex; align-items: center; gap: 8px; }
.gallery-toolbar .group.off, .gallery-toolbar .views button[hidden] { display: none; }
.gallery-toolbar .tlabel {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 2px 0 4px;
}
.gallery-toolbar .views button { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 9px; }
.gallery-toolbar .views button .glyph { display: inline-flex; align-self: center; }
.gallery-toolbar .views button .nm, .gallery-toolbar .views button .k { line-height: 28px; }
.gallery-toolbar .views button .k { font-size: 9.5px; font-weight: 500; color: var(--faint); }
.gallery-toolbar .views button.on .k { color: var(--muted); }
.gallery-toolbar .slider { width: 110px; }
/* Short of room (gallery-toolbar.js #fit): the view switch's keys go, then two pills' titles. */
.gallery-toolbar.tight .views button .k { display: none; }
.gallery-toolbar.tighter .pill.fold > span { display: none; }
.gallery-toolbar.tighter .pill.fold { padding: 0 9.5px; }
body.phone .gallery-toolbar .nm, body.phone .gallery-toolbar .k, body.phone .gallery-toolbar .tlabel { display: none; }

/* While a poster shows: its two buttons in the top right margin, outside the printed picture. */
.gallery-poster-bar {
  position: fixed;
  top: 6px;
  right: 30px;
  z-index: 5;
  display: flex;
  gap: 6px;
  padding: 3px;
}
.gallery-poster-bar[hidden] { display: none; }
.gallery-poster-bar .pill { height: 24px; min-width: 24px; padding: 0 8px; font-size: var(--text-xs); }

/* On a phone: the view between the masthead and the toolbar, edge to edge but for 8 pt, and the
   toolbar's buttons as icons. */
body.phone .gallery-stage {
  left: 8px !important;
  right: 8px !important;
  top: calc(58px + env(safe-area-inset-top)) !important;
  bottom: calc(66px + env(safe-area-inset-bottom)) !important;
}
body.phone .gallery-toolbar .pill > span { display: none; }
body.phone .gallery-toolbar .pill { padding: 0; width: var(--pill); }