/* overlays.css | split from styles.css (cascade-preserving; see index.html link order) */
/* ── 22. Error messages ────────────────────────────────────────── */

.field-error {
  font-size: 13px;
  color: #dc2626;
  min-height: 18px;
}

/* ── 24. Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Step 7: completion-actions container ── */

/* Spacing between gallery and the actions row is owned by step-inner's
   `gap: 20px` ([data-step="generating"] .step-inner). No divider. */
#genEmailSection {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.gen-email-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}

.gen-email-sub {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

.gen-restart-btn {
  display: block;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 120ms;
}
.gen-restart-btn:hover { color: var(--ink); }

/* ── Toast / error banner ─────────────────────────────────────── */

.wizard-toast {
  position: fixed;
  top: calc(var(--header-h) * 2 + 10px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 480px;
  width: calc(100% - 48px);
  background: #1c1c1e;
  color: #fff;
  padding: 11px 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 450;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: var(--sh-lg);
  /* Above every overlay (sign-in 1000, legal/feedback 1100, exit-confirm
     1200) — error/info messages must never sit behind the modal that
     triggered them. */
  z-index: 1300;
  cursor: pointer;
  animation: toastIn 180ms ease;
  transition: opacity 360ms ease, transform 360ms ease;
  opacity: 1;
}
.wizard-toast.is-leaving {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}
.wizard-toast-icon {
  flex-shrink: 0;
  color: #fbbf24;
  margin-top: 2px;
}
#wizardToastMsg {
  min-width: 0;
  overflow-wrap: anywhere;
}
.wizard-toast-close {
  margin-left: auto;
  flex-shrink: 0;
  color: rgba(255,255,255,0.45);
  padding: 2px;
  margin-top: 1px;
  transition: color 120ms;
}
.wizard-toast-close:hover { color: #fff; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Optional field label ─────────────────────────────────────── */

.field-optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--faint);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

/* ── Moment detail overlay ─────────────────────────────────────── */

.moment-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(17,17,17,0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Top-anchored layout: the image always starts at the same Y across
     moments (no jump on prev/next), and content sits high in the viewport
     instead of being vertically centered. Description length below can
     vary freely — only the bottom of the content changes. */
  padding: 64px 24px 64px;
  overflow-y: auto;
  /* Always reserve scrollbar space so swapping moments with different body
     lengths never causes a horizontal jump. */
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  animation: fadeIn 180ms ease;
}

/* No white card — content floats on the dark overlay */
.moment-detail-card {
  background: transparent;
  max-width: 480px;
  width: 100%;
  animation: modalCardFloat 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.moment-detail-image {
  width: 100%;
  aspect-ratio: 3/2;        /* landscape — matches server-side 1536x1024 render */
  border-radius: var(--r-lg);
  overflow: hidden;
}

.moment-detail-body {
  padding: 14px 4px 0;
}

.moment-detail-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  color: #fff;
}

.moment-detail-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.60);
  line-height: 1.6;
}

.moment-detail-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms;
  backdrop-filter: blur(4px);
}
.moment-detail-close:hover { background: rgba(255,255,255,0.28); }

/* Revealed gallery cards become clickable */
.gallery-card.is-revealed { cursor: pointer; }
.gallery-card.is-revealed:hover { transform: translateY(-3px); transition: transform 160ms ease; }

/* ── Moment detail — navigation and counter ───────────────────── */

/* Frame: same max-width as card. Image position is pinned via the overlay's
   padding-top, so the frame itself doesn't need to be the positioning anchor. */
.moment-detail-frame {
  max-width: 480px;
  width: 100%;
}

/* Wraps the image and anchors the chevrons so they always sit at the image's
   vertical center, regardless of how long the description below is. */
.moment-detail-image-wrap {
  position: relative;
  width: 100%;
}

/* Watermark is enforced server-side: anonymous generations are baked with
   a 2-3-2 Pikumo brick before they hit R2 (worker/src/lib/watermark.ts).
   No CSS overlay — the bytes themselves carry the mark through email,
   permalink, and screenshot. */

.moment-detail-nav {
  position: absolute;
  left: -68px;
  right: -68px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.moment-detail-nav-btn {
  pointer-events: all;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms;
  backdrop-filter: blur(4px);
}
.moment-detail-nav-btn:hover { background: rgba(255,255,255,0.28); }
.moment-detail-nav-btn:disabled { visibility: hidden; pointer-events: none; background: transparent; }

/* On phones the card fills the viewport, so inset the chevrons over the image
   edges and darken them for legibility against arbitrary photo content. Body
   text centers since there's no surrounding whitespace to anchor it. The card
   stays top-anchored (image Y must not jump between moments with different
   description lengths) but the top padding is pushed down so the image sits
   in the upper-middle rather than pinned to the viewport top. */
@media (max-width: 640px) {
  .moment-detail-overlay {
    padding-top: 200px;
    padding-bottom: 24px;
  }
  .moment-detail-nav { left: 8px; right: 8px; }
  .moment-detail-nav-btn { background: rgba(0,0,0,0.45); }
  .moment-detail-nav-btn:hover { background: rgba(0,0,0,0.55); }
  .moment-detail-body { text-align: center; }
}

.moment-detail-counter {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height: 16px;
  display: block;
}

/* ── Example cards — clickable ─────────────────────────────────── */

.example-card[data-demo-id] {
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.example-card[data-demo-id]:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.example-card[data-demo-id]:focus-visible {
  outline: 2px solid rgba(255,90,110,0.55);
  outline-offset: 3px;
}

/* ── Exit confirmation dialog ──────────────────────────────────── */

.exit-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(17,17,17,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 160ms ease;
}

.exit-confirm-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 32px 28px 24px;
  max-width: 340px;
  width: 100%;
  box-shadow: var(--sh-lg);
  animation: modalCardFloat 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.exit-confirm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  border-radius: var(--r-pill);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
}
.exit-confirm-close:hover { background: var(--stone); color: var(--ink); }

.exit-confirm-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  color: var(--ink);
}

.exit-confirm-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 24px;
}

.exit-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exit-confirm-cancel {
  height: 46px;
  border-radius: var(--r-pill);
  background: var(--stone);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  transition: background 120ms;
}
.exit-confirm-cancel:hover { background: var(--line-md); }

.exit-confirm-leave {
  height: 46px;
  border-radius: var(--r-pill);
  background: transparent;
  color: #dc2626;
  font-size: 15px;
  font-weight: 600;
  transition: background 120ms, color 120ms;
}
.exit-confirm-leave:hover { background: rgba(220,38,38,0.08); color: #b91c1c; }

/* ── Example memory gallery overlay ───────────────────────────── */

.example-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(17,17,17,0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 24px 64px;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: fadeIn 180ms ease;
}

.example-detail-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 120ms;
}
.example-detail-close:hover { background: rgba(255,255,255,0.28); }

/* No white card — content floats directly on the dark overlay */
.example-detail-modal {
  background: transparent;
  max-width: 480px;
  width: 100%;
  animation: modalCardFloat 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.example-detail-header {
  padding: 0 0 24px;
}

.example-detail-type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--coral);
  margin-bottom: 6px;
}

.example-detail-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
}

.example-detail-place {
  font-size: 14px;
  font-weight: 550;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 6px;
}

.example-detail-created {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
}

.example-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.example-moment-card { }

.example-moment-image {
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: var(--r-md);
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
}

.example-moment-body {
  padding: 12px 4px 0;
}

.example-moment-title {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin-bottom: 5px;
  color: #fff;
}

.example-moment-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.60);
  line-height: 1.55;
}

/* Album story modal — per-moment "Try again" overlay on a failed (gradient) beat.
   Reuses the .retry-msg / .retry-btn / .retry-sub styling from .gallery-card-retry. */
.example-moment-image { position: relative; }
.example-moment-image .gallery-card-retry.album-retry-dark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
  background: rgba(12, 15, 22, 0.62);
  border-radius: inherit;
}
.example-moment-image .album-retry-dark .retry-msg { color: #fff; }
.example-moment-image .album-retry-dark .retry-sub { color: rgba(255,255,255,0.70); }

/* ── Story mode: storybook reading view ─────────────────────────────────
   A warm, paper-like reading surface: the user's story prose interleaved with the
   illustrations + captions, like a picture book. Serif type reinforces the "book" feel. */
.story-reader-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: #2b2620;
  color: #f7f1e6;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.story-reader-open:hover { opacity: 0.88; }
.story-reader-open svg { flex: none; }

.story-reader-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #f7f1e6;                 /* warm paper */
  color: #2b2620;                      /* ink */
}
.story-reader-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(43, 38, 32, 0.08);
  color: #2b2620;
  cursor: pointer;
  transition: background 0.15s ease;
}
.story-reader-close:hover { background: rgba(43, 38, 32, 0.16); }

.story-reader-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 84px 28px 120px;
}
.story-reader-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  margin: 0 0 8px;
}
.story-reader-body {
  font-family: Georgia, "Times New Roman", serif;
}
.reader-prose {
  font-size: 18px;
  line-height: 1.75;
  margin: 0 0 22px;
  color: #3a342c;
  white-space: pre-line;   /* keep paragraph / transcript line breaks (esp. punctuation-sparse voice text) */
}
.story-reader-body > .reader-prose:first-child::first-letter {
  /* A small drop-cap flourish on the opening paragraph. */
  font-size: 3.1em;
  line-height: 0.82;
  float: left;
  margin: 6px 8px 0 0;
  font-weight: 600;
  color: #2b2620;
}
.reader-plate {
  margin: 30px 0 34px;
}
.reader-plate-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 34px rgba(43, 38, 32, 0.18);
}
.reader-plate-pending {
  box-shadow: none;
  opacity: 0.85;
}
.reader-caption {
  margin: 14px 6px 0;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  color: #6f6557;
}
@media (max-width: 520px) {
  .story-reader-page { padding: 72px 20px 96px; }
  .reader-prose { font-size: 17px; }
}