/* Time capsules: the parts css/app.css doesn't already cover. "Opens in 3 days" reminders, the
   countdown on the sealed envelope, voice and video messages, letters for the next generation.
   (Loaded by js/capsules.js on first use; harmless if index.html links it as well.) */

/* "opens in 3 days", at the top of the list */
.cap-soon {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 8px; padding: 12px 14px; border: 0; border-radius: 14px;
  text-align: left; font: inherit; color: #3a1d2b; background: linear-gradient(135deg, #ffe1ec, #ffd2a8);
}
.cap-soon .cap-icon { font-size: 22px; }
.cap-soon b { display: block; font-size: 15px; }
.cap-soon small { display: block; font-size: 12.5px; opacity: .8; }
.cap-banner.soon { background: linear-gradient(135deg, #fff0d6, #ffe1ec); }

/* letters for the next generation */
.cap-row.cap-write .cap-icon { font-size: 22px; }
.cap-row.cap-write b { white-space: normal; }
.cap-row.nested { padding-left: 24px; }
.cap-row.nested .cap-icon { font-size: 20px; }
.cap-nextgen { margin: 16px 4px 4px; }
.cap-ready-note { margin: 2px 2px 0; }
.cap-when { margin: 0; }

/* the countdown, on the envelope and under it */
.cap-count {
  position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
  color: #7a5520; font-variant-numeric: tabular-nums; text-transform: uppercase;
}
.cap-countdown { display: flex; justify-content: center; gap: 8px; margin: -6px 0 16px; }
.cap-countdown > div { min-width: 64px; padding: 8px 6px 6px; border-radius: 12px; background: var(--chip); text-align: center; }
.cap-countdown b { display: block; font-size: 24px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cap-countdown small { color: var(--muted); font-size: 11.5px; }
.cap-countdown .btn { flex: 1; }
.cap-state { color: var(--muted); font-size: 13.5px; margin: -6px 0 14px; }
.cap-unlock { margin-bottom: 8px; }

/* a voice or video message: recording it */
.cap-rec .cap-presets { margin-bottom: 0; }
.cap-presets .filter-chip:disabled { opacity: .45; }
.cap-rec-stage { margin: 4px 0 8px; }
.cap-rec-stage video { display: block; width: 100%; max-height: 42vh; border-radius: 12px; background: #000; object-fit: cover; }
.cap-rec-stage video.mirror { max-height: 30vh; transform: scaleX(-1); }
.cap-rec-stage audio { display: block; width: 100%; }
.cap-rec-wave { padding: 18px; border-radius: 12px; background: var(--chip); text-align: center; font-weight: 700; color: var(--muted); }
.cap-rec-live { display: flex; align-items: center; gap: 14px; margin: 2px 0 8px; }
.cap-rec-stop {
  width: 54px; height: 54px; flex: none; border-radius: 18px; border: 4px solid var(--fg); background: #ff3b30;
  box-shadow: inset 0 0 0 4px var(--bg); animation: pulse 1.2s ease-in-out infinite;
}
.cap-rec-time { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cap-rec-done { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cap-rec-what { font-size: 14px; }
.cap-rec-done .filter-chip { background: var(--tile); color: var(--fg); }
.cap-rec-note { margin: 6px 2px 0; line-height: 1.45; }

/* ...and hearing or watching it, once it's open */
.cap-voice { margin: 0 0 14px; }
.cap-voice small { display: block; color: var(--muted); font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.cap-voice video { display: block; width: 100%; border-radius: 10px; background: #000; }
.cap-voice audio { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .cap-rec-stop { animation: none; }
}

/* the photo picker with nothing in it: the note runs across the whole grid, not one narrow column */
.cap-pick .cap-pick-empty { grid-column: 1 / -1; margin: 6px 2px; }

/* 16px: an iPhone zooms the page in when you tap into smaller text, and doesn't zoom back out */
.cap-letter-input { font-size: 16px; }

/* "Couldn't send it" / "Adding photos…" in light mode: the pink is too faint on white (3.5:1) */
.cap-text small.cap-warn { color: #c8102e; }
@media (prefers-color-scheme: dark) { .cap-text small.cap-warn { color: var(--heart); } }