:root {
  --bg: #faf7f2;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-solid: #ffffff;
  --text: #2b2723;
  --muted: #5f574e;
  --accent: #8a6c40;
  --accent-contrast: #ffffff;
  --border: rgba(43, 39, 35, 0.16);
  --scrim-top: rgba(250, 247, 242, 0.3);
  --scrim-bottom: rgba(250, 247, 242, 0.6);
  --danger: #a33d2f;
  --ok: #3f7a4e;
  --surface-clear: rgba(255, 255, 255, 0.2);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-fill: rgba(255, 255, 255, 0.32);
  --glass-btn-top: rgba(255, 255, 255, 0.65);
  --glass-btn-bottom: rgba(190, 190, 198, 0.45);
}

:root[data-theme="dark"] {
  --bg: #16130f;
  --surface: rgba(24, 21, 17, 0.78);
  --surface-solid: #201c17;
  --text: #f0e9df;
  --muted: #b3a898;
  --accent: #c9a86e;
  --accent-contrast: #1c1712;
  --border: rgba(240, 233, 223, 0.18);
  --scrim-top: rgba(12, 10, 8, 0.4);
  --scrim-bottom: rgba(12, 10, 8, 0.68);
  --danger: #d8705f;
  --ok: #7dbb8c;
  --surface-clear: rgba(24, 21, 17, 0.2);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-fill: rgba(255, 255, 255, 0.08);
  --glass-btn-top: rgba(255, 255, 255, 0.24);
  --glass-btn-bottom: rgba(255, 255, 255, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  /* iOS body text style: 17pt regular, ~1.29 line height */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- slideshow background ---------- */

#slideshow { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

.slide {
  position: absolute; inset: -4%;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 2.2s ease;
  transform: scale(1);
}
.slide.visible { opacity: 1; animation: kenburns 22s ease-in-out infinite alternate; }

@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

.scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--scrim-top), var(--scrim-bottom));
}

@media (prefers-reduced-motion: reduce) {
  .slide { transition: opacity 0.3s ease; }
  .slide.visible { animation: none; }
  .button, .cog { transition: none; }
}

/* ---------- landing ---------- */

.hero {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem;
  padding: calc(1.5rem + env(safe-area-inset-top)) calc(1.25rem + env(safe-area-inset-right))
           calc(2rem + env(safe-area-inset-bottom)) calc(1.25rem + env(safe-area-inset-left));
  text-align: center;
}

.eyebrow {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; font-size: 1.2rem; color: var(--text);
  letter-spacing: 0.08em;
}

.names {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 4.5rem);
  line-height: 1.1;
  text-shadow: 0 1px 24px var(--scrim-top);
  text-wrap: balance;
}

.amp {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; color: var(--accent);
}

.tagline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem; color: var(--text);
  max-width: 26rem; margin-bottom: 1rem;
  text-wrap: balance;
}

.upload-card {
  width: min(24rem, 100%);
  background: var(--surface-clear);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), inset 0 1px 0 var(--glass-border);
}

input[type="text"], input[type="password"] {
  font: inherit;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-fill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  width: 100%;
}
input::placeholder { color: var(--muted); opacity: 0.85; }
#uploaderName::placeholder { font-style: italic; }
input:focus-visible { outline-offset: 0; }

/* Buttons: 44pt minimum target, clear hierarchy */
.button {
  font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 44px;
  padding: 0.55rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.button:active { transform: scale(0.97); opacity: 0.85; }
.button.primary {
  min-height: 88px;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 var(--glass-border), 0 4px 18px rgba(0, 0, 0, 0.1);
  font-size: 1.1rem;
}
.button.danger { color: var(--danger); }
.button:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* Provider sign-in buttons per Apple/Google branding guidance:
   Apple: black button in light mode, white in dark. Google: neutral outlined. */
.button.apple { background: #000; color: #fff; border-color: #000; }
:root[data-theme="dark"] .button.apple { background: #fff; color: #000; border-color: #fff; }
.button.google { background: #fff; color: #1f1f1f; border-color: #d5d0c8; }
:root[data-theme="dark"] .button.google { background: #131314; color: #e3e3e3; border-color: rgba(227, 227, 227, 0.25); }

.upload-list {
  list-style: none; text-align: left;
  display: flex; flex-direction: column; gap: 0.45rem;
  max-height: 9.5rem; overflow-y: auto;
  font-size: 0.9rem;
}
.upload-list li { display: flex; justify-content: space-between; gap: 0.75rem; color: var(--muted); }
.upload-list li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-list li span:last-child { flex-shrink: 0; }
.upload-list .status-done { color: var(--ok); }
.upload-list .status-error { color: var(--danger); }

.photo-count {
  font-size: 0.9rem; color: var(--muted);
  margin-top: 0.5rem;
}

/* ---------- cog / admin link (44pt target) ---------- */

.cog {
  position: fixed;
  top: calc(0.5rem + env(safe-area-inset-top));
  right: calc(0.5rem + env(safe-area-inset-right));
  z-index: 5;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--muted);
  opacity: 0.7;
  transition: opacity 0.15s ease, transform 0.3s ease;
}
.cog:hover { opacity: 1; transform: rotate(30deg); }

.qr-link {
  left: calc(0.5rem + env(safe-area-inset-left));
  right: auto;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.qr-link:hover { transform: none; }

/* ---------- QR modal ---------- */

.qr-modal {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0, 0, 0, 0.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.75rem;
  padding: calc(1.5rem + env(safe-area-inset-top)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  animation: qr-fade 0.25s ease;
}

@keyframes qr-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mostly-square card whose bottom edge forms a downward chevron ("roof") point */
.qr-shape {
  --qr-w: min(76vw, 46vh, 21rem);
  width: var(--qr-w);
  height: calc(var(--qr-w) * 1.18);
  background: #faf7f2;
  clip-path: polygon(0 0, 100% 0, 100% 84.5%, 50% 100%, 0 84.5%);
  display: flex; justify-content: center;
  padding-top: calc(var(--qr-w) * 0.075);
  animation: qr-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes qr-pop {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.qr-code {
  width: calc(var(--qr-w) * 0.85);
  height: calc(var(--qr-w) * 0.85);
}

.qr-modal-hint {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.35rem;
  color: rgba(250, 247, 242, 0.85);
}

.qr-close {
  position: absolute;
  top: calc(0.5rem + env(safe-area-inset-top));
  left: calc(0.5rem + env(safe-area-inset-left));
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(250, 247, 242, 0.12);
  border: 0; border-radius: 50%;
  color: #faf7f2;
  cursor: pointer;
}
.qr-close:active { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .qr-modal, .qr-shape { animation: none; }
}

/* ---------- admin ---------- */

.admin-page {
  position: relative; z-index: 1;
  min-height: 100dvh;
  padding: calc(1rem + env(safe-area-inset-top)) calc(1.25rem + env(safe-area-inset-right))
           calc(1.5rem + env(safe-area-inset-bottom)) calc(1.25rem + env(safe-area-inset-left));
  max-width: 72rem;
  margin: 0 auto;
}

.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.admin-header h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: 1.7rem; }
.admin-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.admin-actions .button { padding: 0.45rem 0.9rem; font-size: 0.95rem; }

/* Login presented as a popup matching the QR modal: black backdrop, centered box.
   Its close sits top-right — the same spot as the cog that opens it. */
.login-modal .qr-close {
  left: auto;
  right: calc(0.5rem + env(safe-area-inset-right));
}
.login-modal {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0, 0, 0, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: calc(1.5rem + env(safe-area-inset-top)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  animation: qr-fade 0.25s ease;
}
.login-box {
  width: min(22rem, 100%);
  background: #1d1a16;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  padding: 2rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: qr-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.login-box h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400; font-size: 1.6rem; margin-bottom: 0.25rem;
  color: #f0e9df;
}
/* The popup is always dark, so pin the providers' on-dark button variants */
.login-box .button.apple { background: #fff; color: #000; border-color: #fff; }
.login-box .button.google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.login-box .error-text { color: #d8705f; }
@media (prefers-reduced-motion: reduce) {
  .login-modal, .login-box { animation: none; }
}
.error-text { color: var(--danger); font-size: 0.9rem; min-height: 1.25em; overflow-wrap: anywhere; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}

.photo-card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.photo-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: pointer; }
.photo-card .meta { padding: 0.5rem 0.6rem; font-size: 0.8rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.15rem; }
.photo-card .meta .who { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-card .row { display: flex; align-items: center; justify-content: space-between; padding: 0 0.35rem 0.25rem; }
.photo-card .row a {
  color: var(--accent); font-size: 0.85rem; text-decoration: none; font-weight: 600;
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.5rem; border-radius: 8px;
}
.photo-card .check {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.photo-card input[type="checkbox"] { width: 1.35rem; height: 1.35rem; accent-color: var(--accent); }
.photo-card.selected { outline: 2px solid var(--accent); }

.empty-state { color: var(--muted); text-align: center; margin-top: 4rem; }

.back-link {
  color: var(--muted); text-decoration: none; font-size: 0.9rem;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.back-link:hover { color: var(--text); }