/* The sample stays outside app state, and reads well without motion or network. */
html body dialog.first-memory-preview {
  width: min(820px, calc(100% - 24px)); max-width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); margin: auto; padding: 0;
  color: #00243f; background: #f9fcf9; border: 1px solid #b9d4d8;
  border-radius: 26px; box-shadow: 0 24px 80px #00243f40; overflow: auto;
  overscroll-behavior: contain;
}
.first-memory-preview::backdrop { background: #00243f9c; }
.first-memory-preview [hidden] { display: none !important; }
.first-memory-preview header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; background:#f9fcf9; border-bottom:1px solid #deebe7; }
.first-preview-eyebrow { font:650 .75rem/1.4 system-ui; letter-spacing:.03em; }
.first-memory-preview button { min-width:44px; min-height:44px; cursor:pointer; font:650 .875rem/1.4 system-ui; }
.first-memory-preview button:focus-visible, .first-preview-trigger:focus-visible { outline:3px solid #267999; outline-offset:3px; }
.first-memory-preview [data-preview-close] { padding:0; border:1px solid #c7dedc; border-radius:50%; background:#edf6f3; color:#00243f; font-size:1.6rem; }
.first-preview-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.first-preview-stage { position:relative; display:grid; align-content:center; padding:48px 22px 24px; background:#eaf3f0; min-width:0; }
.first-preview-sample { position:absolute; top:18px; left:22px; font:650 .6875rem/1.4 system-ui; color:#456975; }
.first-preview-stage svg { display:block; width:100%; height:auto; }
.first-preview-stage > [data-preview-scene]:not([hidden]) { animation:first-preview-reveal 260ms ease both; }
@keyframes first-preview-reveal { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) {
  .first-preview-stage > [data-preview-scene]:not([hidden]) { animation:none; }
}
.first-preview-photo, .first-preview-map, .first-preview-capsule { overflow:hidden; margin:0; border-radius:18px; border:3px solid #fff; box-shadow:0 8px 24px #00243f14; background:#fffefd; }
.first-preview-photo > span, .first-preview-map > span { display:block; padding:14px; font:600 1rem/1.3 Georgia,serif; text-align:center; }
.first-preview-capsule > div { padding:16px; }
.first-preview-capsule small { display:block; margin-bottom:8px; color:#547079; font:650 .625rem/1.4 system-ui; letter-spacing:.06em; }
.first-preview-capsule strong { font:600 1.125rem/1.3 Georgia,serif; }
.first-preview-capsule p { margin:10px 0 0; color:#45636b; font:italic .875rem/1.5 Georgia,serif; }
.first-preview-copy { padding:28px; min-width:0; align-self:center; }
.first-preview-progress { margin:0 0 12px; color:#286a67; font:650 .75rem/1.4 system-ui; }
.first-preview-copy h2 { margin:0 0 14px; font:600 clamp(1.5rem,3vw,2rem)/1.15 Georgia,serif; letter-spacing:-.025em; text-wrap:balance; }
.first-preview-copy [data-preview-description] { margin:0; color:#496570; font:400 .9375rem/1.6 system-ui; }
.first-preview-assurance { margin:18px 0; color:#547079; font:400 .75rem/1.5 system-ui; }
.first-preview-actions { display:grid; gap:6px; }
.first-preview-actions button { width:100%; padding:12px; border-radius:14px; border:1px solid #28546a; color:#fff; background:#00243f; }
.first-preview-actions [data-preview-back] { background:transparent; color:#315967; border-color:transparent; }
html body .first-preview-trigger { display:block; min-height:44px; padding:10px; border:0; background:transparent; color:#285b6b; font:650 .8125rem/1.4 system-ui; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
html body #authWelcome #authPreview { width:100%; margin:6px 0 0; }
html body #authGate #authWelcome #authWelcomeLogin { margin-top:0; }
html body #firstTimeOnboarding .first-preview-trigger { margin:0 auto; }
html body #firstTimeOnboarding .welcome-memory-demo { margin-bottom:8px; }
/* Use content flow, not landscape row heights, for the first real saves. */
html body main.app-shell section.map-stage.home-focus #homeDashboard[data-first-moments]:not([data-first-moments=""]) {
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  gap:24px !important; min-height:0 !important; height:auto !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard :is(#homeSpotlightHero, #homeMemoryOfDay, #homeOnThisDay, #homeJourney, #homeEmotionHighlights, #homeTimelineStrip)[data-first-moments-hidden] { display:none !important; }
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard[data-first-moments="pair"] #homeTimelineStrip.home-section {
  width:100% !important; max-width:560px !important; margin:0 auto !important; padding-bottom:12px !important; align-self:center !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard[data-first-moments="pair"] #homeTimelineStrip.home-section .recent-memory-card-shelf {
  display:grid !important; grid-template-columns:none !important; grid-auto-columns:100% !important;
  grid-auto-flow:column !important; gap:16px !important; height:auto !important; min-height:0 !important;
  padding:2px 0 10px !important; overflow-x:auto !important; overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important; scroll-padding-inline:0 !important;
  overscroll-behavior-inline:contain !important; scrollbar-width:none !important;
  touch-action:auto !important; -webkit-overflow-scrolling:touch !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard[data-first-moments="pair"] #homeTimelineStrip.home-section .recent-memory-card-shelf::-webkit-scrollbar { display:none !important; }
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard[data-first-moments="pair"] #homeTimelineStrip.home-section .recent-memory-shelf-item {
  width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important;
  justify-self:stretch !important; scroll-snap-align:start !important; scroll-snap-stop:always !important;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard[data-first-moments="pair"] #homeTimelineStrip.home-section .recent-memory-shelf-card:focus-visible { outline-offset:-3px !important; }
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeTimelineStrip .first-memories-pagination {
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:16px !important; margin:4px 0 0 !important; padding:0 !important;
  color:#52717c; font:500 .8125rem/1.4 system-ui,sans-serif;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeTimelineStrip .first-memories-pagination > span {
  min-width:4.5em; text-align:center; font:inherit; font-variant-numeric:tabular-nums;
  background:transparent; border:0; padding:0;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeTimelineStrip .first-memories-control {
  display:grid !important; place-items:center !important; flex:0 0 44px !important;
  width:44px !important; height:44px !important; min-height:44px !important; padding:0 !important;
  border:1px solid #c9dedf !important; border-radius:50% !important;
  color:#315b69 !important; background:#f8fcfb !important; box-shadow:none !important; transform:none !important;
  cursor:pointer;
}
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeTimelineStrip .first-memories-control svg { width:18px !important; height:18px !important; }
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeTimelineStrip .first-memories-control[aria-disabled="true"] { opacity:.4; cursor:default; }
html body main.app-shell section.map-stage.home-focus #homeDashboard.home-dashboard #homeTimelineStrip .first-memories-control:focus-visible { outline:2px solid #21746f !important; outline-offset:3px !important; }
@media (max-width:600px) {
  .first-preview-body { grid-template-columns:minmax(0,1fr); }
  .first-preview-stage { padding:42px 22px 18px; }
  .first-preview-stage svg { max-height:170px; object-fit:cover; }
  .first-preview-copy { padding:22px; }
}
@media (orientation:landscape) and (max-height:520px) {
  .first-preview-stage { padding:42px 16px 16px; }
  .first-preview-copy { padding:18px; }
  html body main.app-shell section.map-stage.home-focus:has(#homeDashboard[data-first-moments="single"]) { align-items:start !important; }
}