/* Globe app: the family gallery. The library on the stage (tablets and desktops) or in the sheet (phones): a sticky
   toolbar, time headers that stay while their photos scroll by, justified rows of photos with a soft placeholder and a
   blur that settles, year cards, albums, Recently deleted, the empty states, the sidebar, and the profile's row of
   tagged photos. Photos sit on the cell; chrome stays calm and only the controls wear the action blue. */

/* ---------- the stage ---------- */
.gstage { overflow: hidden; background: var(--stage); --gl-head-bg: color-mix(in srgb, var(--stage) 88%, transparent); }
.sheet { --gl-head-bg: var(--material-strong); }
.gs-scroll { position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--panel-right, 432px) + 8px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 28px calc(48px + var(--safe-b)) 20px; outline: none; transition: box-shadow 160ms ease; }
.gs-scroll.is-drop { box-shadow: inset 0 0 0 3px var(--accent-ring); }
.gs-bar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px;
  margin: 0 -28px 4px -20px; padding: 18px 28px 14px 20px; min-height: 80px;
  background: var(--material); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 0.5px 0 var(--sep); }
.gl-bar-t { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.gl-bar-title { min-width: 0; overflow-wrap: anywhere; }
.gs-bar .gl-bar-title { font-size: var(--s-t1); line-height: var(--l-t1); font-weight: 700; letter-spacing: -0.02em; }
.gl-bar-n { color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); }
.gl-bar.is-none .gl-zoom, .gs-bar.is-none .gl-zoom { visibility: hidden; }
.gl-zoom { flex: none; }
.gl-zoom.seg-fit .seg-item { min-width: 52px; }
.gl-bar.is-sheet { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; margin: 20px var(--gutter) 4px; }
.gl-bar.is-sheet .gl-bar-title { font-size: var(--s-body); line-height: var(--l-body); font-weight: 600; letter-spacing: 0; }
.gl-bar.is-sheet .gl-bar-t { gap: 8px; }
/* the phone's library and album page sit on the sheet's content margin; the time headers' band runs edge to edge */
.g-phone .gs-body, .g-album .gs-body { padding: 0 var(--gutter); }
.g-phone .gl-head, .g-album .gl-head { margin: 0 calc(-1 * var(--gutter)); padding: 16px var(--gutter) 10px; }

/* ---------- time headers ---------- */
.gl-head { position: sticky; top: var(--gl-top, 0px); z-index: 2; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin: 0 -4px; padding: 16px 4px 10px;
  background: var(--gl-head-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gl-h-title { font-size: var(--s-t2); line-height: var(--l-t2); font-weight: 700; letter-spacing: -0.012em; font-variant-numeric: tabular-nums; }
.gl-h-sub { color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); }
.gl-h-count { margin-left: auto; color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); }
.gl[data-zoom="months"] .gl-h-title { font-size: var(--s-body); line-height: var(--l-body); font-weight: 600; }

/* ---------- photos ---------- */
.gl-rows { display: flex; flex-direction: column; gap: 3px; padding-bottom: 8px; }
.gstage .gl-rows { gap: 4px; }
.gl-row { display: flex; }
.gl { touch-action: pan-y; }
.gl-tile { position: relative; flex: none; padding: 0; border-radius: 6px; overflow: hidden; background: var(--fill); -webkit-touch-callout: none;
  transition: transform 160ms var(--ease); }
.gstage .gl-tile { border-radius: var(--rad-thumb); }
.gl-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(12px); transform: scale(1.04);
  transition: opacity 320ms ease, filter 560ms var(--ease-out), transform 560ms var(--ease-out); }
.gl-tile.is-in img { opacity: 1; filter: none; transform: none; }
.gl-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--cell) 55%, transparent) 50%, transparent 70%);
  background-size: 220% 100%; animation: gl-shimmer 1.5s linear infinite; pointer-events: none; }
.gl-tile.is-in::after { display: none; }
@keyframes gl-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.gl-tile.is-broken { background: var(--fill-strong); }
.gl-tile:active { transform: scale(0.98); }
.gl-tile:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; z-index: 1; }
@media (hover: hover) { .gl-tile:hover img { filter: brightness(1.05); } }
.gl-me { position: absolute; left: 6px; bottom: 6px; z-index: 1; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--me); color: var(--me-on); font-size: var(--s-foot); line-height: var(--l-foot); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 0.5px var(--me-edge); }
.gl-tile.is-small .gl-me { display: none; }
.gl-foot:empty { display: none; }
.gl-wait { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px 16px; color: var(--label-2); font-size: var(--s-sub); }
.spin { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--fill-strong); border-top-color: var(--accent); animation: g-spin 0.9s linear infinite; }
@keyframes g-spin { to { transform: rotate(360deg); } }
.gl-err { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 16px; text-align: center; color: var(--label-2); }

/* ---------- Years ---------- */
.gy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 2px 0 16px; }
.gy-card { position: relative; aspect-ratio: 4 / 3; border-radius: var(--rad-cell); overflow: hidden; background: var(--fill); text-align: left; color: var(--label);
  box-shadow: var(--shadow-1); transition: transform 180ms var(--ease); }
.gy-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 320ms ease; }
.gy-card.is-in img { opacity: 1; }
.gy-label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 32px 12px 10px; }
.gy-card.is-in .gy-label { color: #fff; background: linear-gradient(180deg, transparent, rgba(8, 10, 14, 0.62)); }
.gy-year { font-size: var(--s-t2); line-height: var(--l-t2); font-weight: 700; letter-spacing: -0.012em; font-variant-numeric: tabular-nums; }
.gy-n { font-size: var(--s-sub); line-height: var(--l-sub); color: var(--label-2); }
.gy-card.is-in .gy-n { color: rgba(255, 255, 255, 0.9); }
.gy-card:active { transform: scale(0.98); }
.gy-card:focus-visible { outline-offset: 3px; }

/* ---------- empty states ---------- */
.g-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 460px; margin: 0 auto; padding: 48px 24px; text-align: center; }
.g-empty-art { width: 104px; height: 104px; border-radius: 30px; display: grid; place-items: center; color: var(--accent);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 18%, var(--cell)), var(--cell)); box-shadow: var(--shadow-1); }
.g-empty-art .ph { font-size: 48px; }
.g-empty-t { font-size: var(--s-body); line-height: 24px; color: var(--label); text-wrap: pretty; }
.g-empty .btn-block { width: auto; padding: 0 24px; }

/* ---------- the sidebar and the phone's header ---------- */
.g-add { width: calc(100% - var(--gutter) * 2); margin: 16px var(--gutter) 0; display: flex; }
.g-add .ph { font-size: 22px; }
.g-seg { margin: 16px var(--gutter) 0; }
.g-chips { margin-top: 14px; }
.g-chips .pull .ph { font-size: 16px; }
.g-chips a.pull { text-decoration: none; }
.g-show.is-current .row-title { font-weight: 600; color: var(--accent); }
.g-show > .ph-check { flex: none; color: var(--accent); font-size: 18px; }
.g-show { --inset: 68px; }
.g-me-av { flex: none; display: grid; }
.chips.is-wrap { flex-wrap: wrap; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
.chip.is-on { background: var(--c-s2); color: var(--c-ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--c); }
a.chip { text-decoration: none; }
.g-find { margin: 0 0 10px; }
.g-person.is-current .row-title { color: var(--accent); }
.g-person > .ph-check { flex: none; color: var(--accent); font-size: 18px; }

/* ---------- albums ---------- */
.ga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px 18px; padding: 12px 0 8px; }
.g-phone .ga-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px 12px; padding-top: 16px; }
.ga-card { display: flex; flex-direction: column; min-width: 0; padding: 0; color: var(--label); text-align: left; text-decoration: none; border-radius: var(--rad-cell); }
.ga-cover { position: relative; display: grid; aspect-ratio: 1; margin-bottom: 10px; border-radius: var(--rad-cell); overflow: hidden; background: var(--fill);
  box-shadow: var(--shadow-1); transition: transform 180ms var(--ease); }
.ga-cover img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.ga-cover.is-mosaic { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: var(--cell); }
.ga-cover.is-mosaic .ga-c0 { grid-row: 1 / 3; }
.ga-cover.is-empty, .ga-cover.is-new { place-items: center; color: var(--label-3); }
.ga-cover .ph { font-size: 40px; }
.ga-cover.is-new { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.ga-title { font-size: var(--s-body); line-height: var(--l-body); font-weight: 600; overflow-wrap: anywhere; }
.ga-sub { font-size: var(--s-sub); line-height: var(--l-sub); color: var(--label-2); }
.ga-card:active .ga-cover { transform: scale(0.98); }
.ga-card:focus-visible { outline-offset: 4px; }
@media (hover: hover) { .ga-card:hover .ga-cover { transform: translateY(-2px); box-shadow: var(--shadow-2); } }
.ga-new .ga-title { color: var(--accent); }
.ga-empty { margin: 8px 4px 0; }
.g-al-title { overflow-wrap: anywhere; }
.g-al-sub { margin-top: 6px; color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); }
.g-al-desc { margin-top: 12px; max-width: 62ch; white-space: pre-line; overflow-wrap: anywhere; }
.g-al-acts { display: grid; gap: 10px; margin: 16px var(--gutter) 0; }
.g-al-acts .g-add { margin: 0; width: 100%; }
.g-al-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.g-al-btn { min-width: 0; padding: 0 12px; font-size: var(--s-sub); }
.g-al-btn .ph { font-size: 18px; }
.g-album .view-head { padding-top: 8px; }

/* ---------- Recently deleted ---------- */
.gt .lede { margin: 16px 4px 0; }
.gt .group { margin-left: 0; margin-right: 0; }
.gt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; }
.gt-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gt-pic { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--fill); }
.gt-pic img { width: 100%; height: 100%; object-fit: cover; opacity: 0.86; }
.gt-left { color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); }
.gt-restore { width: 100%; padding: 0 12px; }
.gt-album .gt-restore { width: auto; }

/* ---------- the profile's row of tagged photos ---------- */
.gp .group-title .btn-text { margin: -10px -8px; text-decoration: none; }
.gp-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--rad-cell); background: var(--cell); }
.gp-ph { aspect-ratio: 1; border-radius: var(--rad-thumb); overflow: hidden; background: var(--fill); padding: 0; transition: transform 160ms var(--ease); }
.gp-ph img { width: 100%; height: 100%; object-fit: cover; }
.gp-ph.is-wait { animation: g-breathe 1.6s ease-in-out infinite; }
@keyframes g-breathe { 50% { opacity: 0.55; } }
.gp-ph:active { transform: scale(0.96); }
.gp-ph:focus-visible { outline-offset: 2px; }

/* ---------- the undo bar ---------- */
.gsnack { position: fixed; z-index: 82; left: 50%; bottom: calc(24px + var(--safe-b)); display: flex; align-items: center; gap: 8px; width: max-content;
  max-width: min(560px, calc(100vw - 32px)); min-height: 52px; padding: 4px 6px 4px 20px; border-radius: 26px; font-size: var(--s-sub); line-height: var(--l-sub);
  font-weight: 500; transform: translate(-50%, 160%); opacity: 0; transition: transform 380ms var(--ease), opacity 200ms ease; }
.gsnack.is-on { transform: translate(-50%, 0); opacity: 1; }
.gsnack .btn-text { flex: none; }