/* Globe app: the gallery's sheets. Fields (48px, a clear edge, the blue ring on focus), "When was this taken?" as large
   choices, face chips (yours wears the you ring and "You"), the people and album pickers, and the upload sheet: photo
   tiles with their progress rings, the calm summary bar and the friendly result. */

/* ---------- fields ---------- */
.gf { padding-bottom: calc(24px + var(--safe-b)); }
.gf-field { display: flex; flex-direction: column; gap: 8px; margin: 24px var(--gutter) 0; }
.gf-label { font-size: var(--s-sub); line-height: var(--l-sub); color: var(--label-2); font-weight: 500; }
.gf-input { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--label) 32%, transparent);
  background: var(--cell); color: var(--label); font: inherit; font-size: var(--s-body); line-height: var(--l-body); transition: border-color 140ms ease, box-shadow 140ms ease; }
.gf-input::placeholder { color: var(--label-2); opacity: 1; }
.gf-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.gf-input:disabled { opacity: 0.5; }
.gf-area { resize: vertical; min-height: 88px; }
.gf-year { width: 11em; max-width: 100%; flex: none; font-variant-numeric: tabular-nums; }
.gf-select { width: auto; min-width: 9em; }
.gf-hint { color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); }
.gf-err { margin: 10px calc(var(--gutter) + 4px) 0; color: var(--danger); font-size: var(--s-sub); line-height: var(--l-sub); }
.gf-err:empty { display: none; }
.gw-wrap .gf-err { margin: 8px 4px 0; }
.gf-preview { display: flex; justify-content: center; margin: 4px var(--gutter) 0; padding: 8px; border-radius: var(--rad-cell); background: #0d0f12; }
.gf-thumb { width: auto; max-width: 100%; max-height: 260px; border-radius: 6px; object-fit: contain; }
.gf-row { --inset: 68px; }
.gf-people { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.gf-people .gf-hint:empty { display: none; }
.gf-who .ph { font-size: 20px; }

/* ---------- when was this taken ---------- */
.gw-opt + .gw-opt { border-top: 0.5px solid var(--sep); }
.gw .sel-radio { min-height: 56px; }
.gw .sel-radio .sel-box { width: 26px; box-shadow: inset 0 0 0 1.5px var(--label-3); }
.gw .sel-radio .sel-box .ph { font-size: 16px; }
.gw .sel-radio .sel-input:checked + .sel-box { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.gw .sel-radio .row-title { font-weight: 500; }
.gw-opt.is-on .sel-radio .row-title { font-weight: 600; }
.gw-extra { display: none; flex-wrap: wrap; gap: 10px; padding: 0 16px 16px 58px; }
.gw-opt.is-on .gw-extra { display: flex; }
.gw-month { flex: 1 1 160px; }
@media (max-width: 380px) { .gw-extra { padding-left: 16px; } }

/* ---------- face chips ---------- */
.fc-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fc { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 6px; border-radius: 999px; background: var(--cell); color: var(--label);
  text-decoration: none; font-size: var(--s-sub); line-height: var(--l-sub); font-weight: 600; box-shadow: inset 0 0 0 0.5px var(--sep); transition: background-color 120ms ease, transform 160ms var(--ease); }
.fc .av { width: 32px; height: 32px; font-size: 13px; }
.fc .me-tag { margin-left: 0; height: 22px; padding: 0 8px; font-size: var(--s-foot); }
/* your chip: the compact you ring stays inside the capsule (you.css), with room before the name, on the you tint */
.fc.is-me { gap: 12px; padding-left: 8px; background: var(--me-s1); }
@media (hover: hover) { a.fc.is-me:hover { background: var(--me-s2); } }
a.fc:active { transform: scale(0.97); }
@media (hover: hover) { a.fc:hover { background: var(--cell-hover); } }
.fc-wrap { display: inline-flex; align-items: center; }
.fc-wrap .fc { padding-right: 46px; }
.fc-x { flex: none; width: 44px; height: 44px; margin-left: -44px; border-radius: 50%; display: grid; place-items: center; color: var(--label-2); }
.fc-x .ph { font-size: 16px; }
@media (hover: hover) { .fc-x:hover { color: var(--danger); } }
.fc-x:focus-visible { outline-offset: -4px; }

/* ---------- pickers ---------- */
.pp-view .filter-field { margin-top: 4px; }
.pp-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px var(--gutter) 8px; scrollbar-width: none; }
.pp-strip::-webkit-scrollbar { display: none; }
.pp-strip .fc-wrap { flex: none; }
.pp-row.is-active { background: var(--accent-soft); }
.pp-row > .ph-check { flex: none; color: var(--accent); }
.ap-row { --inset: 72px; }
.ap-row.is-active .row-title { font-weight: 600; }
.ap-row > .ph-check { flex: none; color: var(--accent); }
.ap-thumb { flex: none; width: 44px; height: 44px; border-radius: var(--rad-thumb); overflow: hidden; display: grid; place-items: center; background: var(--fill); color: var(--label-2); }
.ap-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ap-thumb.is-new { background: var(--accent-soft); color: var(--accent); }

/* ---------- the upload sheet ---------- */
.modal-gu .modal-body { padding-bottom: 0; }
.gu { padding-bottom: 0; }
.gu-top { padding: 8px var(--gutter) 0; }
.gu-form > .group:first-child { margin-top: 28px; }
.gu-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
.gu-cell { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gu-tile { position: relative; width: 100%; aspect-ratio: 1; padding: 0; border-radius: 10px; overflow: hidden; background: var(--fill); transition: transform 160ms var(--ease); }
.gu-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 240ms ease; }
.gu-tile:active:not(:disabled) { transform: scale(0.97); }
.gu-tile:disabled { cursor: default; }
.gu-tile.is-wait img, .gu-tile.is-prep img, .gu-tile.is-send img { opacity: 0.55; }
.gu-state { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.gu-state .ph { font-size: 36px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
.gu-tile.is-done .gu-state { background: rgba(8, 10, 14, 0.18); }
.gu-tile.is-fail .gu-state, .gu-cell.is-bad .gu-state { background: rgba(8, 10, 14, 0.5); }
.gu-ring { width: 42px; height: 42px; border-radius: 50%; background: conic-gradient(#fff calc(var(--p, 0) * 360deg), rgba(255, 255, 255, 0.32) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.gu-tile.is-prep .gu-ring { --p: 0.25; animation: g-spin 1s linear infinite; }
.gu-x { position: absolute; top: -12px; right: -12px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; }
.gu-x .ph { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: var(--label); color: var(--cell); box-shadow: 0 0 0 2px var(--bg); }
.gu-own { position: absolute; left: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.gu-own .ph { font-size: 14px; }
.gu-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; background: var(--accent-soft); color: var(--accent);
  font-size: var(--s-sub); line-height: var(--l-sub); font-weight: 600; text-align: center; }
.gu-add .ph { font-size: 28px; }
.gu-err { font-size: var(--s-foot); line-height: var(--l-foot); color: var(--danger); overflow-wrap: anywhere; }
.gu-skipped { margin: 12px 4px 0; }
.gu-sub-h { margin: 16px 4px 10px; }
.gu-exif:empty { display: none; }
.gu-exif .row-sub { margin-top: 2px; }
.gu-foot { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 10px; margin-top: 28px; padding: 12px var(--gutter) calc(16px + var(--safe-b));
  background: var(--material-strong); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -0.5px 0 var(--sep); }
.gu-sum { text-align: center; color: var(--label-2); font-size: var(--s-sub); line-height: var(--l-sub); }
.gu-sum:empty { display: none; }
.gu-bar { height: 6px; border-radius: 3px; overflow: hidden; background: var(--fill); }
.gu-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 300ms ease; }
.gu-go .ph { font-size: 20px; }
.gu-done { padding-bottom: calc(24px + var(--safe-b)); }
.gu-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin: 16px var(--gutter) 0; }
.gu-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rad-thumb); }
@media (max-height: 500px) {
  .gu-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-top: 16px; padding-top: 8px; padding-bottom: calc(8px + var(--safe-b)); }
  .gu-foot .gu-bar { grid-column: 1 / -1; order: -1; }
  .gu-foot .btn-block { width: auto; min-height: 44px; }
}