/* Globe app: the photo viewer, Apple Photos-grade. An opaque black room for the picture whatever the theme (nothing of
   the page behind shows through; only dragging a photo down to close lets the room fade), labelled actions (icon and
   word together) in a toolbar at the bottom on phones and at the top on wide screens, and the picture sized to the
   space between the bars, so no title or button ever sits on it. A tap hides the bars and the picture grows to the
   whole screen; another brings them back. The details are a sheet from below on phones and a side panel on wide
   screens. Modal sheets and menus opened from it sit above it. */
.gv { position: fixed; inset: 0; z-index: 55; outline: none; color: #f4f6f8; --gv-dim: 1; --gv-info-w: 380px;
  --gv-top: calc(var(--safe-t) + 68px); --gv-bot: calc(var(--safe-b) + 84px); --gv-side: 0px; }
.gv-back { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 260ms ease; }
.gv.is-open .gv-back { opacity: var(--gv-dim); }
.gv.is-closing { pointer-events: none; }
.gv.is-closing .gv-back, .gv.is-closing .gv-stage, .gv.is-closing .gv-top, .gv.is-closing .gv-acts { opacity: 0; transition: opacity 220ms ease; }
.gv-stage { position: absolute; top: var(--gv-top); bottom: var(--gv-bot); left: var(--gv-side); right: var(--gv-side); overflow: hidden; touch-action: none;
  user-select: none; -webkit-user-select: none; opacity: 0; transform: scale(0.97);
  transition: opacity 260ms ease, transform 360ms var(--ease), top 320ms var(--ease), bottom 320ms var(--ease), left 320ms var(--ease), right 320ms var(--ease); }
.gv.is-open .gv-stage { opacity: 1; transform: none; }
.gv.is-bare .gv-stage { top: 0; bottom: 0; left: 0; right: 0; }
.gv-track { display: flex; width: 100%; height: 100%; will-change: transform; transform: translate3d(-100%, 0, 0); }
.gv-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size; }
/* the picture at its own shape (--ar, width over height), as large as the space between the bars allows */
.gv-pic { position: relative; flex: none; transform-origin: center; will-change: transform; --ar: 1.333;
  width: min(100cqw, 100cqh * var(--ar)); height: min(100cqh, 100cqw / var(--ar)); }
.gv-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.gv-low { filter: blur(10px); transform: scale(1.01); }
.gv-full { opacity: 0; transition: opacity 260ms ease; }
.gv-pic.has-full .gv-full { opacity: 1; }
.gv-pic.has-full .gv-low { visibility: hidden; transition: visibility 0s linear 300ms; }
.gv.is-zoomed .gv-stage { cursor: grab; }

/* ---------- chrome ---------- */
.gv-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-t) + 12px) 12px 12px;
  transition: opacity 200ms ease; }
.gv-head { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gv-title { max-width: 100%; font-size: var(--s-body); line-height: var(--l-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-sub { font-size: var(--s-sub); line-height: var(--l-sub); color: rgba(244, 246, 248, 0.78); }
.gv-sub:empty { display: none; }
.gv-top-end { display: flex; gap: 8px; }
.gv-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: inherit; background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color 140ms ease, transform 160ms var(--ease), opacity 160ms ease; }
.gv-btn .ph { font-size: 22px; }
.gv-btn:active:not(:disabled) { transform: scale(0.94); }
.gv-btn[aria-pressed="true"] { background: #f4f6f8; color: #0d0f12; }
@media (hover: hover) { .gv-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.24); } .gv-btn[aria-pressed="true"]:hover { background: #fff; } }
.gv :focus-visible { outline: 3px solid rgba(244, 246, 248, 0.9); outline-offset: 2px; }
.gv-prev, .gv-next { position: absolute; z-index: 2; top: 50%; width: 52px; height: 52px; margin-top: -26px; }
.gv-prev { left: 16px; }
.gv-next { right: 16px; }
.gv-prev:disabled, .gv-next:disabled { opacity: 0; pointer-events: none; }
@media (hover: none) { .gv-prev, .gv-next { display: none; } }
.gv-acts { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-around; gap: 4px; padding: 14px 8px calc(var(--safe-b) + 10px);
  transition: opacity 200ms ease; }
.gv-acts .gv-btn { width: auto; height: auto; min-width: 68px; min-height: 58px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 10px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.gv-btn-l { font-size: var(--s-foot); line-height: var(--l-foot); font-weight: 500; }
.gv.is-bare .gv-top, .gv.is-bare .gv-acts, .gv.is-bare .gv-prev, .gv.is-bare .gv-next { opacity: 0; pointer-events: none; }

/* ---------- details ---------- */
.gv-info { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; max-height: 64%; overflow-y: auto; overscroll-behavior: contain; color: var(--label); background: var(--bg);
  border-radius: var(--rad-sheet) var(--rad-sheet) 0 0; box-shadow: var(--shadow-2); transform: translateY(105%); visibility: hidden;
  transition: transform 320ms var(--ease), visibility 0s linear 320ms; }
.gv.has-info .gv-info { transform: none; visibility: visible; transition: transform 320ms var(--ease), visibility 0s; }
.gv.has-info .gv-stage { bottom: 64%; }
.gv.is-bare.has-info .gv-stage { top: 0; }
.gv.has-info .gv-acts { opacity: 0; pointer-events: none; }
.gv-info :focus-visible { outline-color: var(--accent-ring); }
.gv-info-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 8px var(--gutter); background: var(--bg); }
.gv-info-head h2:focus { outline: none; }
.gv-info-x { font-weight: 600; }
.gv-info-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 4px var(--gutter) calc(28px + var(--safe-b)); }
.gv-cap { font-size: var(--s-body); line-height: 24px; white-space: pre-line; overflow-wrap: anywhere; max-width: 62ch; }
.gv-when, .gv-album { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--s-body); }
.gv-when .ph, .gv-album .ph { font-size: 22px; color: var(--label-2); }
.gv-album { color: var(--accent); text-decoration: none; font-weight: 600; }
.gv-album .ph { color: var(--accent); }
.gv-people { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; padding-top: 6px; border-top: 0.5px solid var(--sep); }
.gv-h { padding-top: 10px; }
.gv-note { color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); }
.gv-tag .ph, .gv-prof .ph { font-size: 20px; }
.gv-prof { white-space: normal; text-align: left; }

/* wide screens and phones on their side: details beside the photo, actions at the top */
@media (min-width: 900px), (min-width: 640px) and (max-height: 500px) {
  .gv { --gv-top: calc(var(--safe-t) + 66px); --gv-bot: 24px; --gv-side: 84px; }
  .gv-info { top: 0; bottom: 0; left: auto; width: var(--gv-info-w); max-height: none; border-radius: 0; transform: translateX(100%); }
  .gv.has-info .gv-stage { bottom: var(--gv-bot); right: calc(var(--gv-info-w) + var(--gv-side)); }
  .gv.is-bare.has-info .gv-stage { bottom: 0; right: var(--gv-info-w); }
  .gv.has-info .gv-top, .gv.has-info .gv-acts { right: var(--gv-info-w); }
  .gv.has-info .gv-next { right: calc(var(--gv-info-w) + 16px); }
  .gv-acts { top: 0; bottom: auto; left: auto; right: 112px; justify-content: flex-end; padding: calc(var(--safe-t) + 10px) 8px 0 0; background: none; }
  .gv.has-info .gv-acts { right: calc(var(--gv-info-w) + 112px); opacity: 1; pointer-events: auto; }
  .gv-acts .gv-btn { flex-direction: row; min-height: 44px; min-width: 0; gap: 8px; padding: 0 14px; border-radius: 22px; background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .gv-acts .gv-btn .ph { font-size: 20px; }
  .gv-btn-l { font-size: var(--s-sub); line-height: var(--l-sub); }
  .gv-head { align-items: flex-start; text-align: left; padding-left: 8px; }
}
@media (max-height: 500px) and (min-width: 640px) { .gv { --gv-info-w: 320px; --gv-top: calc(var(--safe-t) + 56px); --gv-bot: 8px; --gv-side: 72px; } .gv-top { padding-top: calc(var(--safe-t) + 6px); } }
@media (min-width: 900px) and (max-width: 1180px), (min-width: 640px) and (max-height: 500px) { .gv-acts .gv-btn-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .gv-acts .gv-btn { padding: 0 12px; } }