/* memory.css
   Phase 2, Theme 3: styles for the photo / memory / keepsake features (flag
   group `memory`). All colours come from the design tokens (main.css :root,
   themeable via themes.css); tap targets stay large for small hands (--tap);
   every animation is gated behind a reduced-motion guard. These reuse the
   existing .panel-title / .panel-note / .btn-amber / .btn-small / .f-input /
   .cert-label / .cert-photo-select primitives from the shared CSS. */

/* ------------------------------------------------------- Memory keepsakes hub */
.memory-panel { max-width: 560px; }
.memory-card {
  margin: 14px 0;
  padding: 14px;
  border: 2px solid var(--gold, #c9a84c);
  border-radius: var(--radius, 12px);
  background: rgba(255, 255, 255, 0.04);
}
.memory-card-title { font-family: var(--font-head, Georgia, serif); color: var(--gold-bright, #ffe08a); margin: 0 0 4px; }
.memory-card .cert-photo-select,
.memory-card .btn-amber,
.memory-card .btn-small { margin-top: 8px; }
.memory-filter-row { margin: 10px 0; }
.memory-empty { color: var(--cream, #fdf6e3); opacity: 0.85; padding: 12px 0; }

/* Saga reel slideshow stage. */
.saga-reel-stage { margin-top: 12px; }
.saga-reel-canvas {
  width: 100%;
  max-width: 480px;
  height: auto;
  border: 3px solid var(--gold, #c9a84c);
  border-radius: var(--radius, 12px);
  display: block;
  background: var(--near-black, #06080f);
}

/* ------------------------------------------------------------------ Storybook */
.storybook-panel { max-width: 520px; }

/* --------------------------------------------------------- Gratitude board */
.gratitude-panel { max-width: 560px; }
.gratitude-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.gratitude-prompt-btn { min-height: var(--tap, 64px); }
.gratitude-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.gratitude-item {
  padding: 10px 12px;
  border-left: 4px solid var(--gold, #c9a84c);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 var(--radius, 12px) var(--radius, 12px) 0;
}
.gratitude-item-text { color: var(--cream, #fdf6e3); }
.gratitude-item-name { color: var(--gold-bright, #ffe08a); font-style: italic; }

/* ------------------------------------------------ Photo caption extras (28/26) */
.photo-cap-suggest { display: block; margin: 6px 0; }
.photo-cap-voice { margin: 10px 0; padding: 8px 0; border-top: 1px solid rgba(201, 168, 76, 0.4); }
.photo-cap-voice-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-cap-voice-status { display: inline-block; margin-top: 6px; color: var(--gold-bright, #ffe08a); font-style: italic; }

/* ---------------------------------------------------- Postcard address (30) */
.postcard-address { resize: vertical; min-height: 88px; font-family: inherit; }

/* -------------------------------------------------------- Photo pins on map (27) */
.illus-photo-pins { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.illus-photo-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  min-width: 36px;
  min-height: 36px;
  padding: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}
.illus-photo-pin .photo-pin-glyph {
  display: inline-block;
  font-size: 22px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
  transition: transform 140ms ease;
}
.illus-photo-pin:hover .photo-pin-glyph,
.illus-photo-pin:focus-visible .photo-pin-glyph { transform: scale(1.2); }

@media (prefers-reduced-motion: reduce) {
  .illus-photo-pin .photo-pin-glyph { transition: none; }
}
body.reduce-motion .illus-photo-pin .photo-pin-glyph { transition: none; }