/* Personal photos: a large, swipeable view with no placeholder cards. */
.memory-section {
  min-width: 0;
  padding: 2px 0 32px;
}

.memory-section [hidden],
.memory-viewer [hidden] {
  display: none !important;
}

.memory-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 2px 18px;
}

.memory-intro h2 {
  margin: 0;
  color: #413a37;
  font: 600 clamp(23px, 3vw, 29px)/1.25 Manrope, sans-serif;
  letter-spacing: -.8px;
}

.memory-intro .eyebrow {
  margin-bottom: 6px;
}

.memory-intro .muted {
  max-width: 340px;
  margin: 0;
  color: #81746e;
  font-size: 14px;
  line-height: 1.6;
  text-align: right;
}

.memory-carousel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ece3dc;
  border-radius: 22px;
  background: #fffdfa;
  box-shadow: 0 12px 36px rgba(75, 58, 48, .055);
}

.memory-viewport {
  display: flex;
  width: 100%;
  height: clamp(380px, 44vw, 560px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: #eee7e1;
  -webkit-overflow-scrolling: touch;
}

.memory-viewport::-webkit-scrollbar {
  display: none;
}

.memory-viewport[data-dragging="true"] {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
}

.memory-viewport[data-dragging="true"] .memory-slide {
  cursor: grabbing;
}

.memory-slide {
  position: relative;
  display: block;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: white;
  cursor: zoom-in;
  scroll-snap-align: center;
  -webkit-tap-highlight-color: transparent;
}

.memory-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.memory-open-hint {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 24px;
  background: rgba(37, 31, 31, .76);
  color: #fff;
  font: 600 13px/1.3 'DM Sans', sans-serif;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .1);
  pointer-events: none;
}

.memory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 91px;
  padding: 18px 22px;
}

.memory-details {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.memory-details strong {
  display: block;
  overflow: hidden;
  color: #594a47;
  font: 600 17px/1.4 Manrope, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-details > span {
  display: block;
  margin-top: 3px;
  color: #8a7a72;
  font-size: 13px;
  line-height: 1.5;
}

.memory-controls {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.memory-controls button {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #e9ded7;
  border-radius: 50%;
  background: #faf5f0;
  color: #79635e;
  font: 400 28px/1 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  -webkit-tap-highlight-color: transparent;
}

.memory-counter {
  min-width: 45px;
  color: #82716a;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.memory-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 16px 2px 0;
}

.memory-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 19px;
  border-radius: 13px;
  font-size: 14px;
  line-height: 1.5;
}

.memory-actions .button > span {
  margin-right: 6px;
  font-size: 20px;
}

.memory-status {
  flex: 1 1 250px;
  margin: 0;
  color: #887a73;
  font-size: 13px;
  line-height: 1.6;
}

.memory-controls button:disabled,
.memory-actions button:disabled {
  opacity: .4;
  cursor: default;
  transform: none;
}

.memory-section button:focus-visible {
  outline: 3px solid #a65d70;
  outline-offset: 4px;
}

.memory-slide:focus-visible {
  outline-offset: -5px;
}

body.memory-viewer-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.memory-viewer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #171415;
  color: #fff;
  color-scheme: dark;
}

.memory-viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: memory-viewer-reveal .2s ease-out;
}

.memory-viewer::backdrop {
  background: #171415;
}

.viewer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
}

#viewerCount {
  padding: 0 6px;
  color: #dfd7d8;
  font: 500 15px/1.4 'DM Sans', sans-serif;
  font-variant-numeric: tabular-nums;
}

.memory-viewer button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 10px 17px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 24px;
  background: rgba(255, 255, 255, .08);
  color: white;
  font: 600 15px/1.4 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .18s;
  -webkit-tap-highlight-color: transparent;
}

.memory-viewer button:disabled {
  opacity: .32;
  cursor: default;
}

.memory-viewer button:focus-visible {
  outline: 3px solid #efb9c3;
  outline-offset: 4px;
}

.viewer-stage {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  touch-action: pan-y pinch-zoom;
}

#viewerImage {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

#viewerError {
  max-width: 360px;
  margin: 24px;
  color: #eadfe2;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

.viewer-bottom {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 18px;
  width: min(100%, 660px);
  margin: 0 auto;
  padding: 16px max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.viewer-bottom button {
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 27px;
}

#viewerTitle {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #f0e7e9;
  font: 500 15px/1.5 'DM Sans', sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#viewerPrev {
  grid-column: 1;
  grid-row: 1;
}

#viewerNext {
  grid-column: 3;
  grid-row: 1;
}

@keyframes memory-viewer-reveal {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

@media (hover: hover) {
  .memory-controls button:not(:disabled):hover {
    border-color: #d5a0ac;
    background: #fae9ec;
  }

  .memory-viewer button:not(:disabled):hover {
    background: rgba(255, 255, 255, .17);
  }
}

@media (max-width: 600px) {
  .memory-section {
    padding-bottom: 24px;
  }

  .memory-intro {
    display: block;
    margin-bottom: 14px;
  }

  .memory-intro .muted {
    max-width: none;
    margin-top: 7px;
    font-size: 13px;
    text-align: left;
  }

  .memory-carousel {
    border-radius: 18px;
  }

  .memory-viewport {
    height: clamp(320px, 55vh, 470px);
    height: clamp(320px, 55svh, 470px);
  }

  .memory-open-hint {
    right: 12px;
    bottom: 12px;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .memory-toolbar {
    align-items: center;
    gap: 12px;
    min-height: 86px;
    padding: 14px;
  }

  .memory-details strong {
    font-size: 15px;
  }

  .memory-details > span {
    font-size: 12px;
  }

  .memory-controls {
    gap: 5px;
  }

  .memory-counter {
    min-width: 38px;
    font-size: 12px;
  }

  .memory-actions {
    gap: 10px;
    margin-top: 12px;
  }

  .memory-actions .button {
    flex: 1 1 125px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .memory-status {
    flex-basis: 100%;
    font-size: 12px;
  }

  .viewer-top {
    min-height: 72px;
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  .viewer-stage {
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
  }

  .viewer-bottom {
    gap: 12px;
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }
}

@media (max-width: 380px) {
  .memory-toolbar {
    flex-wrap: wrap;
    justify-content: center;
  }

  .memory-details {
    width: 100%;
    text-align: center;
  }

  .memory-controls {
    gap: 13px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .memory-viewport {
    height: 74vh;
    height: 74svh;
    min-height: 230px;
  }

  .viewer-top {
    min-height: 60px;
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: 6px;
  }

  .viewer-bottom {
    padding-top: 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-viewport {
    scroll-behavior: auto;
  }

  .memory-viewer[open] {
    animation: none;
  }

  .memory-section button,
  .memory-viewer button {
    transition: none;
  }
}

/* A quiet welcome, with the useful things first. */
html { scroll-padding-top: 88px; }
.daily-welcome { padding: 34px 2px 28px; scroll-margin-top: 80px; }
.daily-welcome h1 { margin: 0 0 7px; font: 600 clamp(30px, 4vw, 42px)/1.2 Manrope, sans-serif; letter-spacing: -1.4px; }
.daily-welcome h1 span { color: #bf8793; }
.daily-welcome h2 { margin: 0 0 18px; color: #8b7770; font: 400 16px/1.5 'DM Sans', sans-serif; }
.daily-welcome .care-tips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.daily-welcome .care-tip { padding: 13px; background: #fffdfa; border: 1px solid #eee5dc; font-size: 14px; line-height: 1.45; }
.daily-welcome .care-tip span { width: 32px; height: 32px; font-size: 17px; }
.daily-welcome .text-button { min-height: 44px; font-size: 12px; }
.below-grid { display: block; }
.log-card { min-height: auto; }
.log-card .mood-list { margin-top: 18px; }
.extra-care { margin: 26px 0; border-top: 1px solid #e9e1d9; }
.extra-care > summary, .forecast-panel > summary { min-height: 48px; cursor: pointer; }
.extra-care > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; color: #8b7770; font-size: 14px; list-style: none; }
.extra-care > summary::-webkit-details-marker, .forecast-panel > summary::-webkit-details-marker { display: none; }
.extra-care[open] > summary span { transform: rotate(45deg); }
.extra-care .learn-section { padding-top: 24px; }
.extra-care .learn-header > .muted, .extra-care .learn-card .eyebrow { display: none; }
.forecast-panel > summary { list-style: none; }
.forecast-panel .forecast-list { margin-top: 8px; }
.forecast-panel[open] .forecast-heading > span { transform: rotate(45deg); }
.memory-intro h2 { font-size: clamp(22px, 3vw, 27px); }
.memory-status:empty { display: none; }
.memory-actions { margin-top: 12px; }
.memory-details > span:empty { display: none; }

/* The slide stays still for reliable swiping; only its inner frame sways. */
.memory-viewport {
  background: radial-gradient(ellipse at 50% 25%, #faf5ed, #eee4d7);
}
.memory-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 68px 42px 30px;
}
.memory-frame {
  position: relative;
  display: block;
  width: min(100%, 720px);
  height: 100%;
  padding: 11px 11px 34px;
  background: #fffefa;
  box-shadow: 3px 12px 20px #634e3826, 0 2px 4px #634e381a;
  transform-origin: 50% -46px;
  transform: rotate(-1deg);
  animation: wall-sway 8s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.memory-frame::after { content: '♡'; position: absolute; bottom: 5px; left: 0; width: 100%; color: #c99a9c; font: 20px/1.2 Georgia, serif; text-align: center; }
.memory-hanger { position: absolute; top: -41px; left: calc(50% - 32px); width: 64px; height: 64px; border-top: 1.5px solid #ad9270; border-left: 1.5px solid #ad9270; transform: rotate(45deg); pointer-events: none; z-index: -1; }
.memory-hanger::after { content: ''; position: absolute; width: 7px; height: 7px; top: -4px; left: -4px; border-radius: 50%; background: #907250; box-shadow: 1px 1px 2px #634e3840; }
.memory-carousel[data-wall-visible="true"] .memory-slide[aria-current="true"] .memory-frame { animation-play-state: running; }
.memory-slide:nth-child(even) .memory-frame { animation-direction: alternate-reverse; }
.memory-slide:hover .memory-frame, .memory-slide:focus-visible .memory-frame, body.memory-viewer-open .memory-frame { animation-play-state: paused !important; }
.memory-open-hint { right: 14px; bottom: 12px; min-height: 34px; padding: 6px 11px; font-size: 11px; }
.memory-toolbar { min-height: 76px; padding-top: 12px; padding-bottom: 12px; }
.memory-message { max-width: 650px; margin: 20px auto 12px; padding: 0 16px; color: #9c6976; font: italic 22px/1.6 Georgia, serif; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
.memory-message-editor { margin: 9px 2px 0; }
.memory-message-editor summary { display: inline-flex; align-items: center; min-height: 44px; color: #a2717e; cursor: pointer; font-size: 13px; list-style: none; }
.memory-message-editor summary::-webkit-details-marker { display: none; }
.memory-message-editor form { max-width: 650px; padding: 12px 16px; border: 1px solid #e9ded7; border-radius: 14px; background: #fffdfa; }
.memory-message-editor label { display: block; color: #8a7770; font-size: 13px; margin-bottom: 8px; }
.memory-message-editor textarea { font: 16px/1.5 'DM Sans', sans-serif; min-height: 84px; padding: 10px; }
.message-save-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
#memoryMessageStatus { color: #9c6976; font-size: 12px; }
.message-save-row button { flex: none; min-height: 44px; }
@keyframes wall-sway { from { transform: rotate(-1.25deg); } to { transform: rotate(1.25deg); } }
@media (max-width: 600px) {
  .daily-welcome { padding-top: 28px; padding-bottom: 22px; }
  .daily-welcome .care-tips { grid-template-columns: 1fr; gap: 8px; }
  .daily-welcome .care-tip { padding: 10px 12px; font-size: 14px; }
  .daily-welcome h2 { margin-bottom: 14px; }
  .memory-slide { padding: 62px 20px 24px; }
  .memory-frame { padding: 8px 8px 30px; }
  .memory-message { font-size: 21px; margin-top: 16px; }
  .memory-toolbar { min-height: 76px; }
  .memory-message-editor form { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .memory-frame { animation: none; transform: none; }
}
.viewer-caption { grid-column: 2; grid-row: 1; min-width: 0; }
.memory-message-editor label { overflow-wrap: anywhere; }
#viewerNote { max-height: 110px; overflow-y: auto; margin: 5px 0 0; color: #cbb8be; font: 400 14px/1.5 'DM Sans', sans-serif; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
.intimacy-card { margin-top: 20px; padding: 23px 25px; background: #fff7fa; }
.intimacy-heading { display: flex; align-items: center; justify-content: space-between; }
.intimacy-heading .eyebrow { margin-bottom: 5px; }
.intimacy-heading > span { color: #d58aa5; font-size: 32px; }
.intimacy-phase { margin: 14px 0 9px; color: #ad7188; font-size: 12px; }
#intimacyTips { display: grid; gap: 9px; padding-left: 18px; margin: 0; color: #78636c; font-size: 14px; line-height: 1.65; }
.intimacy-more { margin-top: 12px; }
.intimacy-more summary { display: flex; align-items: center; min-height: 44px; color: #ad7188; font-size: 13px; cursor: pointer; list-style: none; }
.intimacy-more summary::after { content: '+'; margin-left: 8px; }
.intimacy-more[open] summary::after { content: '−'; }
.intimacy-more summary::-webkit-details-marker { display: none; }
.intimacy-more p { color: #8a747d; font-size: 13px; line-height: 1.7; margin: 5px 0 12px; }
.intimacy-sources { display: flex; gap: 15px; flex-wrap: wrap; }
.intimacy-sources a { color: #aa6b83; min-height: 40px; display: inline-flex; align-items: center; font-size: 12px; }
.storage-tools { border-top: 1px solid #f0e0e7; margin: 16px 0 0; padding: 8px 0 16px; }
.storage-tools > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; color: #987b89; font-size: 13px; cursor: pointer; list-style: none; }
.storage-tools > summary::-webkit-details-marker { display: none; }
.storage-tools p, .storage-tools small { color: #9b858f; font-size: 12px; line-height: 1.7; }
.storage-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.storage-actions .button { min-height: 46px; font-family: 'DM Sans', sans-serif; }
.data-save-status { margin: 0 0 12px; color: #ad8698; font-size: 11px; }
.data-save-status:empty, #backupStatus:empty { display: none; }
@media (max-width: 600px) {
  .intimacy-card { padding: 22px; border-radius: 24px; }
  #intimacyTips { font-size: 14px; }
  .storage-actions .button { flex: 1; }
}