/* People-facing pages, modelled on Apple Invites: the event photo carries the page,
   content sits on glass over a blurred copy of it, one floating tab bar for the couple. */
html { height: auto; min-height: 100%; overflow: auto; background: #000; }
html:has(body.camera-mode) { height: 100%; overflow: hidden; }
/* Scroll the document. Content uses svh so retracting browser bars cannot resize covers or photo framing. */
body:not(.camera-mode) { height: auto; min-height: 100svh; overflow: visible; background: transparent; color: var(--ink); }
body.camera-mode { height: 100svh; overflow: hidden; }
.app-view { position: relative; width: 100%; min-height: 100svh; }
body.camera-mode .app-view { display: none; }
.app-loading { display: grid; align-content: center; justify-items: center; min-height: 100svh; animation: loading-appear 220ms 160ms both; }
.loading-mark { display: inline-flex; align-items: baseline; gap: 8px; padding-right: 8px; font-family: var(--script); font-size: 54px; line-height: 1; color: rgb(255 255 255 / .9); animation: loading-breathe 3200ms ease-in-out infinite; }
.loading-mark > span { font-size: 28px; }
.loading-symbol { width: 32px; height: 32px; fill: currentColor; }
@keyframes loading-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes loading-breathe { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* Page frame and transitions */
.page { position: relative; z-index: 1; width: 100%; max-width: 600px; min-height: 100svh; margin: 0 auto; padding-bottom: max(40px, env(safe-area-inset-bottom)); }
body:is([data-screen=dashboard], [data-screen=invite], [data-screen=settings]) .page, body[data-screen=album] .album-page { padding-bottom: calc(env(safe-area-inset-bottom) + 112px); }
.page-body { padding: 0 16px; }
.page-center { display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
.page-ghost { position: fixed; left: 0; right: 0; z-index: 0; margin: 0 auto; pointer-events: none; }
.ghost-forward { animation: page-out-left var(--dur-4) var(--ease-out) forwards; }
.ghost-back { animation: page-out-right var(--dur-4) var(--ease-out) forwards; }
.ghost-fade { animation: fade-out var(--dur-2) var(--ease-in) forwards; }
@keyframes fade-out { to { opacity: 0; } }

/* Navigation bar: clear over the large title, frosted once the title scrolls under it */
.topbar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: calc(env(safe-area-inset-top) + 52px); padding: env(safe-area-inset-top) 8px 0; transition: background-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.topbar.scrolled { background: rgb(0 0 0 / .42); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: 0 .5px 0 var(--hairline); }
.topbar-side { display: flex; align-items: center; gap: 2px; min-width: 0; }
.topbar-side.end { justify-content: flex-end; }
.topbar-title { margin: 0; max-width: 60vw; font-family: var(--heading); font-size: 24px; font-weight: 400; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.topbar.scrolled .topbar-title { opacity: 1; transform: none; }
.nav-back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px 0 0; font-size: 17px; }
.nav-back .glyph { width: 26px; height: 26px; }
.nav-text { min-height: 44px; padding: 0 8px; font-size: 17px; }
.nav-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.nav-icon.flipped .glyph { transform: scaleY(-1); }
.nav-icon.spinning .glyph { animation: spin 700ms linear infinite; }
.nav-pill { min-height: 32px; margin-left: 4px; padding: 0 14px; border-radius: var(--pill); background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); font-size: 15px; font-weight: 600; }
.step-count { padding-right: 8px; font-size: 15px; color: var(--graphite); font-variant-numeric: tabular-nums; }
.glyph { width: 22px; height: 22px; flex-shrink: 0; fill: currentColor; pointer-events: none; }

/* Type */
.large-title { margin: 4px 4px 24px; font-size: 40px; font-weight: 400; line-height: 1.2; letter-spacing: 0; overflow-wrap: anywhere; }
.amp { font-style: normal; color: rgb(255 255 255 / .7); }
.title-1 { margin: 0 0 8px; font-size: 34px; font-weight: 400; letter-spacing: 0; line-height: 1.2; }
.large-title:has(+ .lede) { margin-bottom: 8px; }
.lede { margin: 0 4px 24px; font-size: 17px; line-height: 1.45; color: var(--graphite); }
.footnote { margin: 16px 4px 0; font-size: 13px; line-height: 1.4; color: var(--graphite); text-align: center; }

/* Glass groups: the one container for settings, forms and lists */
.group, .card { margin: 0 0 20px; border-radius: 20px; background: var(--paper); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: inset 0 .5px 0 rgb(255 255 255 / .14); overflow: hidden; }
.group-label { margin: 0 0 8px 16px; font-size: 13px; color: var(--graphite); }
.group-note { margin: 0; padding: 12px 16px; font-size: 13px; line-height: 1.45; color: var(--graphite); }
.group-note.outside { margin: -8px 4px 24px; padding: 0 12px; }
.group-note code { font-size: 12px; overflow-wrap: anywhere; }
.group-action { padding: 4px 16px 16px; display: grid; gap: 8px; }
.group > * + .field, .group > * + .toggle-row, .group > * + .check-row, .group > * + .list-row, .group > * + .group-note, .card > * + .detail-row { box-shadow: inset 0 .5px 0 var(--hairline); }
.stack { display: grid; gap: 12px; }
.field { position: relative; padding: 11px 16px 12px; transition: background-color var(--dur-2) var(--ease-out); }
.field label { display: block; margin-bottom: 2px; font-size: 13px; color: var(--graphite); transition: color var(--dur-2) var(--ease-out); }
.field input, .field select { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-height: 30px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 17px; outline: none; color-scheme: dark; }
.field select { background: linear-gradient(45deg, transparent 50%, var(--graphite) 50%) calc(100% - 6px) 55% / 6px 6px no-repeat, linear-gradient(135deg, var(--graphite) 50%, transparent 50%) calc(100% - 1px) 55% / 6px 6px no-repeat; padding-right: 20px; }
.field select option { background: #1c1c1e; }
.field input::placeholder { color: var(--tertiary); }
.field:focus-within { background: rgb(255 255 255 / .05); }
.field:focus-within label { color: var(--ink); }
.field.invalid label, .field-error { color: var(--danger); }
.field-error { margin: 6px 0 0; font-size: 13px; }
.field-help { margin: 4px 0 0; font-size: 13px; color: var(--graphite); }
.field.shake { animation: shake var(--dur-4) var(--ease-out); }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.form-error { margin: 0; padding: 12px 16px; border-radius: var(--radius-m); background: rgb(255 69 58 / .14); color: #ff6961; font-size: 15px; line-height: 1.4; animation: fade-in var(--dur-3) var(--ease-out); }
.form-errors:empty { display: none; }

/* Rows */
.list-row, .row-button, .card-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 12px 0 16px; text-align: left; font-size: 17px; color: var(--ink); text-decoration: none; background: none; transition: background-color var(--dur-2) var(--ease-out); }
.list-row:active:not(.static), .row-button:active, .card-head:active { background: rgb(255 255 255 / .08); }
.list-row > .icon, .row-button > .icon { width: 22px; height: 22px; color: var(--graphite); }
.list-label { flex: 1; min-width: 0; }
.list-detail { color: var(--graphite); font-size: 15px; font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.list-row > .glyph, .row-button > .glyph, .card-head > .glyph { width: 18px; height: 18px; color: var(--tertiary); }
.list-row.danger, .list-row.danger > .icon { color: var(--danger); }
.list-row.confirming { background: rgb(255 69 58 / .12); }
.list-row.static { cursor: default; }
.row-button > span { flex: 1; }
.dot { width: 10px; height: 10px; margin: 0 6px; border-radius: 50%; background: var(--tertiary); }
.dot.on { background: var(--ok); box-shadow: 0 0 0 4px rgb(48 209 88 / .18); }

/* Switch and checkmark rows */
.toggle-row, .check-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; cursor: pointer; }
.toggle-row > span, .check-row > span { flex: 1; min-width: 0; }
.toggle-row strong, .check-row strong { display: block; font-size: 17px; font-weight: 400; }
.toggle-row small, .check-row small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--graphite); }
.toggle-row input { appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; width: 51px; height: 31px; margin: 0; border-radius: 16px; background: var(--fill); cursor: pointer; transition: background-color var(--dur-3) var(--ease-out); }
.toggle-row input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / .25), 0 1px 1px rgb(0 0 0 / .16); transition: transform var(--dur-4) cubic-bezier(.34, 1.4, .64, 1); }
.toggle-row input:checked { background: var(--ok); }
.toggle-row input:checked::after { transform: translateX(20px); }
.check-row input { position: absolute; opacity: 0; pointer-events: none; }
.check-row > .glyph { width: 20px; height: 20px; color: var(--gold); opacity: 0; transform: scale(.4); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-4) cubic-bezier(.34, 1.56, .64, 1); }
.check-row:has(input:checked) > .glyph { opacity: 1; transform: none; }
html.keyboard .check-row:has(input:focus-visible) { outline: 2px solid rgb(255 255 255 / .9); outline-offset: -2px; }
.reveal-date { animation: fade-in var(--dur-3) var(--ease-out); }

/* Setup wizard */
.progress { height: 3px; margin: 0 20px 8px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--gold); transform-origin: left; transition: transform var(--dur-4) var(--ease-out); }
/* The wizard fills the screen so its button rests at the bottom edge, like an iOS sheet. */
#event-form { display: flex; flex-direction: column; min-height: calc(100svh - env(safe-area-inset-top) - 64px); }
.sticky-action { position: sticky; bottom: 0; z-index: 2; margin: auto -16px 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); }
.cover-picker { display: grid; }
.cover-preview { display: block; width: 100%; max-height: 260px; object-fit: cover; animation: fade-in var(--dur-4) var(--ease-out); }
.disclosure { margin: -8px 0 20px; }
.disclosure summary { list-style: none; display: inline-flex; min-height: 44px; align-items: center; padding: 0 4px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hairline); }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure[open] .film-feature { animation: sheet-in var(--dur-4) var(--ease-out); }
.film-feature { max-width: 280px; margin: 8px auto 0; border-radius: var(--radius-m); overflow: hidden; background: var(--paper); }
.film-feature img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.film-feature figcaption { padding: 12px 16px 14px; }
.film-feature strong { display: block; font-size: 15px; }
.film-feature p { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--graphite); }
.setup-camera-shelf { margin: 0 -16px 16px; }

/* Owner sign-in */
.auth { width: 100%; max-width: 400px; text-align: center; }
.auth .lede { margin-bottom: 28px; }
.auth form { text-align: left; }
.auth .group { margin: 0; }
.brand-mark { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 22px; background: linear-gradient(160deg, #2c2c2e, #0d0d0d); color: var(--gold); box-shadow: inset 0 .5px 0 rgb(255 255 255 / .25), 0 16px 40px rgb(0 0 0 / .5); animation: mark-in 700ms var(--ease-out) both; }
.brand-mark .icon { width: 38px; height: 38px; }
@keyframes mark-in { from { opacity: 0; transform: scale(.7) rotate(-45deg); } }

/* Event hero: full-bleed photo, names and date over it */
.event-hero { position: relative; display: grid; align-content: end; min-height: min(68svh, 640px); padding: max(56px, env(safe-area-inset-top)) 24px 36px; overflow: hidden; text-align: center; }
.event-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: hero-in 1100ms var(--ease-out) both; }
@keyframes hero-in { from { opacity: 0; } }
.event-hero.has-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / .25), transparent 25%, transparent 45%, rgb(0 0 0 / .78)); }
.event-hero-copy { position: relative; z-index: 1; display: grid; justify-items: center; }
.event-title { margin: 12px 0 8px; font-family: var(--heading); font-size: clamp(46px, 14vw, 72px); font-weight: 400; line-height: 1.1; letter-spacing: 0; text-wrap: balance; animation: rise-in 800ms 120ms var(--ease-out) both; }
.event-title .amp { display: block; margin: 4px 0; font-size: .46em; letter-spacing: 0; }
.event-when { margin: 0; font-size: 17px; font-weight: 500; color: rgb(255 255 255 / .85); animation: rise-in 800ms 220ms var(--ease-out) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }
.event-hero .status-pill { animation: rise-in 600ms var(--ease-out) both; }
.hero-cameras { display: flex; justify-content: center; margin: 0 -24px 8px; }
.hero-cameras img { width: 31%; max-width: 160px; margin: 0 -5%; filter: drop-shadow(0 18px 24px rgb(0 0 0 / .5)); animation: camera-drop 900ms var(--ease-out) both; }
.hero-cameras img:nth-child(odd) { rotate: -9deg; translate: 0 14px; }
.hero-cameras img:nth-child(even) { rotate: 8deg; }
.hero-cameras img:nth-child(2) { animation-delay: 70ms; } .hero-cameras img:nth-child(3) { animation-delay: 140ms; } .hero-cameras img:nth-child(4) { animation-delay: 210ms; }
@keyframes camera-drop { from { opacity: 0; transform: translateY(-30px) scale(.9); } }
.event-hero:not(.has-photo) { min-height: 0; padding-top: max(64px, env(safe-area-inset-top)); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--pill); background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); color: #fff; font-size: 13px; font-weight: 600; }
.status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.status-pill[data-status=active]::before { background: var(--ok); animation: live 2s ease-in-out infinite; }
.status-pill[data-status=closed]::before { background: var(--graphite); }
@keyframes live { 50% { opacity: .35; } }

/* Dashboard pieces */
.event-page .page-body { position: relative; z-index: 2; margin-top: -8px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.stat { display: grid; justify-items: center; padding: 16px 8px 14px; border-radius: 18px; background: var(--paper); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: inset 0 .5px 0 rgb(255 255 255 / .14); }
.stat strong { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat span { margin-top: 2px; font-size: 13px; color: var(--graphite); }
.card-head { min-height: 56px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.card-head > span:first-child { flex: 1; }
.mosaic { display: grid; gap: 3px; padding: 0 3px 3px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
.mosaic img { width: 100%; height: 100%; min-height: 0; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: #2a2420; }
.mosaic img:first-child { grid-column: span 2; grid-row: span 2; border-radius: 4px 4px 4px 16px; }
.mosaic-1 { grid-template-columns: 1fr; } .mosaic-1 img:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; border-radius: 4px 4px 16px 16px; }
.mosaic-2 { grid-template-columns: 1fr 1fr; } .mosaic-2 img:first-child { grid-column: auto; grid-row: auto; }
.mosaic-3 img:first-child { grid-row: span 2; }
.mosaic-5 img:last-child { border-bottom-right-radius: 16px; }
.card-empty { display: grid; justify-items: center; gap: 8px; padding: 8px 24px 24px; text-align: center; color: var(--graphite); }
.card-empty .icon { width: 30px; height: 30px; }
.card-empty p { margin: 0; font-size: 15px; line-height: 1.4; }
.detail-row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; }
.detail-row > .icon { width: 24px; height: 24px; color: var(--gold); }
.detail-row strong { display: block; font-size: 17px; font-weight: 500; }
.detail-row small { display: block; margin-top: 2px; font-size: 13px; color: var(--graphite); }
img.develop { opacity: 0; transform: scale(.97); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
img.develop.developed { opacity: 1; transform: none; }

/* Invitation tab: a printable card, the only paper-white surface in the app */
.print-card { display: grid; justify-items: center; margin: 4px 0 20px; padding: 32px 24px 24px; border-radius: 24px; background: #fbfaf7; color: #1d1d1f; text-align: center; box-shadow: 0 24px 60px rgb(0 0 0 / .45); animation: card-in 600ms var(--ease-out) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) rotate(-1.5deg); } }
.print-names { margin: 0; font-family: var(--heading); font-size: 42px; line-height: 1.15; letter-spacing: 0; }
.print-names span { display: block; margin: 6px 0; font-size: 20px; font-style: normal; color: #8a857c; }
.print-date { margin: 12px 0 18px; font-size: 13px; letter-spacing: .02em; color: #6e6e73; }
.print-qr { width: 200px; height: 200px; }
.print-card figcaption { margin-top: 12px; font-size: 13px; font-weight: 600; color: #1d1d1f; }
.button-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.button-pair .btn { min-height: 50px; padding: 0 12px; font-size: 16px; }
.button-pair .btn .icon { width: 20px; height: 20px; }
.share-input { display: block; width: calc(100% - 32px); margin: 12px 16px; padding: 10px 12px; border: 0; border-radius: var(--radius-s); background: var(--fill); color: var(--graphite); font: inherit; font-size: 13px; text-overflow: ellipsis; }
.banner { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-m); background: var(--paper); font-size: 15px; color: var(--graphite); }

/* Guest invitation: hero, details, and a glass bar to join */
.invite-page .page-body { padding-bottom: 220px; }
.join-bar { position: fixed; z-index: 10; left: 50%; bottom: 0; width: min(100%, 600px); padding: 16px 16px max(16px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgb(0 0 0 / .65) 30%); transform: translateX(-50%); animation: join-up 700ms 450ms var(--ease-sheet) both; }
@keyframes join-up { from { opacity: 0; transform: translate(-50%, 40px); } }
.join-form { display: grid; gap: 10px; }
.join-form .group { margin: 0; }
.join-greeting { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; text-align: center; }
.join-bar .btn .icon { width: 22px; height: 22px; }

/* Empty and error states */
.empty { padding: 48px 24px; text-align: center; }
.empty h2 { margin: 0 0 8px; font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: 0; }
.empty p { margin: 0 auto; max-width: 32ch; font-size: 15px; line-height: 1.45; color: var(--graphite); }
.empty .btn { width: auto; margin-top: 24px; }
.empty-art { width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 22px; background: var(--paper) url("/public/cameras/warm.webp") center / 80% no-repeat; box-shadow: inset 0 .5px 0 rgb(255 255 255 / .14); }

@media (min-width: 768px) {
  .page-body { padding: 0 24px; }
  .event-hero { border-radius: 0 0 32px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-loading, .loading-mark { animation: none; }
  img.develop { opacity: 1; transform: none; }
  .status-pill[data-status=active]::before { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .group, .card, .stat, .status-pill { background: #1c1c1e; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Account onboarding reuses the same fields, rows and glass controls as the event app. */
.customer-logo{display:block;margin:0 auto 24px;border-radius:14px}.customer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.customer-register{margin-top:24px}.customer-register summary{cursor:pointer;min-height:44px;padding:12px 0;color:var(--graphite);font-size:14px}.customer-register form{margin-top:12px}.customer-section-title{margin-top:32px;margin-bottom:18px}