/* Small, purposeful interactions over the existing five-page impressionist UI. */
:root{--motion-quick:180ms;--motion-panel:300ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
#modal{position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 32px)}
.icon-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:10px;border:1px solid var(--moment-edge);border-radius:12px;background:var(--moment-paper);color:var(--text-body);font-size:20px;line-height:1;transition:background var(--motion-quick),transform var(--motion-quick);cursor:pointer}
.icon-button svg{width:19px;height:19px}.icon-button.selected{background:#e1eadf;border-color:#92a895}.icon-button:active{transform:scale(.96)}
.topbar{position:sticky;top:0;z-index:8;isolation:isolate;background:#f8f7efef;backdrop-filter:blur(10px);padding-inline:12px;border-radius:0 0 16px 16px;transition:background var(--motion-panel),border-color var(--motion-panel)}
.topbar:before{content:'';position:absolute;z-index:-1;inset:8px 0 10px;border-radius:30px;background:#f8f7eff5;border:1px solid var(--moment-edge);opacity:0;transform:scale(.97);transition:opacity var(--motion-panel),transform var(--motion-panel);pointer-events:none}
.header-identity{display:flex;align-items:center;gap:0;min-width:0}.header-identity .compact-symbol{display:grid;place-items:center;flex-shrink:0;width:0;opacity:0;transform:scale(.65);color:var(--text-body);transition:width var(--motion-panel),opacity var(--motion-panel),transform var(--motion-panel)}
.compact-symbol svg{width:23px;height:26px}.topbar .breadcrumb,.topbar .mobile-logo,.topbar .tag,.topbar .status-label,.topbar .auth-state{transition:opacity var(--motion-panel),max-width var(--motion-panel),transform var(--motion-panel);overflow:hidden;max-width:380px;white-space:nowrap}
.topbar.is-compact{background:transparent;border-color:transparent;backdrop-filter:none}.topbar.is-compact:before{opacity:1;transform:scale(1)}.topbar.is-compact .compact-symbol{width:44px;opacity:1;transform:scale(1)}
.topbar.is-compact :is(.breadcrumb,.mobile-logo,.tag,.status-label,.auth-state){opacity:0;max-width:0;transform:translateY(-5px)}
.topbar .site-login{min-height:44px;white-space:nowrap;font-size:13px;padding-inline:12px}.topbar .top-actions{gap:8px}.topbar.is-compact .top-actions{gap:0}
.menu-toggle{width:44px;height:44px;position:relative;border:1px solid var(--moment-edge);border-radius:50%;background:var(--moment-paper);color:var(--text-body);padding:12px;flex-shrink:0}
.menu-toggle>span{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;top:21px;transform-origin:center;transition:transform var(--motion-panel) var(--motion-ease),opacity var(--motion-quick),width var(--motion-panel)}
.menu-toggle>span:nth-child(1){transform:translateY(-6px)}.menu-toggle>span:nth-child(3){transform:translateY(6px)}.menu-toggle[aria-expanded="true"]>span:nth-child(1){transform:rotate(45deg)}.menu-toggle[aria-expanded="true"]>span:nth-child(2){opacity:0;transform:scaleX(0)}.menu-toggle[aria-expanded="true"]>span:nth-child(3){transform:rotate(-45deg)}
html[data-menu-open="true"]{overflow:hidden}
#site-menu{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:clamp(20px,5vw,64px);border:0;border-radius:0;background:var(--moment-paper);color:var(--text-body);overflow:auto;clip-path:circle(150% at var(--menu-origin-x,calc(100% - 40px)) var(--menu-origin-y,40px));transition:clip-path 300ms var(--motion-ease);box-shadow:none;isolation:isolate}
#site-menu:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 0 20%,#dbe7d5b8,transparent 55%),radial-gradient(ellipse at 100% 90%,#e9d7e280,transparent 65%),var(--grain);opacity:.5;z-index:-1;pointer-events:none}#site-menu::backdrop{background:#33483f45;backdrop-filter:blur(4px)}
#site-menu.is-closing{clip-path:circle(0 at var(--menu-origin-x,calc(100% - 40px)) var(--menu-origin-y,40px))}.site-menu-head{display:flex;align-items:center;justify-content:space-between;max-width:800px;margin:0 auto 35px;font:24px var(--serif);letter-spacing:2px}
#site-menu nav{max-width:800px;margin:auto;display:grid;gap:4px}#site-menu nav button{display:grid;grid-template-columns:40px 1fr 30px;align-items:center;gap:20px;border:0;border-bottom:1px solid var(--moment-edge);background:transparent;color:var(--text-body);padding:clamp(18px,3vh,32px) 8px;text-align:left;font:clamp(25px,4vw,40px)/1.5 var(--serif);min-height:64px;transition:padding-left var(--motion-panel),background var(--motion-panel)}
#site-menu nav button[aria-current="page"]{background:#e4ecde7a;border-radius:15px}.menu-order{font:12px system-ui,sans-serif;color:var(--text-body);letter-spacing:1px}.site-menu-note{max-width:800px;margin:30px auto 0;color:var(--text-muted);font-size:13px;line-height:1.9}
.quick-add{position:fixed;z-index:9;right:28px;bottom:28px;display:flex;flex-direction:column;align-items:flex-end;gap:12px}.quick-add-toggle{width:54px;height:54px;border-radius:50%;border:1px solid #e4eadd;background:var(--accent);color:white;box-shadow:0 6px 22px #314b3c30;position:relative;transition:transform var(--motion-panel) var(--motion-ease),background var(--motion-panel)}
.quick-add-toggle span{position:absolute;width:19px;height:1.5px;background:currentColor;top:26px;left:17px}.quick-add-toggle span:last-child{transform:rotate(90deg)}.quick-add.is-open .quick-add-toggle{transform:rotate(45deg);background:var(--accent-dark)}
.quick-add-panel{width:230px;padding:14px;border:1px solid var(--moment-edge);border-radius:20px;background:var(--moment-paper);box-shadow:0 12px 38px #314b3c26;transform-origin:bottom right}.quick-add-panel[hidden]{display:none}.quick-add-panel p{font-size:12px;color:var(--text-body);padding:4px 8px;margin:0 0 8px}.quick-add-panel button{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;width:100%;padding:10px 12px;font-size:14px;text-align:left;border:0;border-radius:12px;background:transparent;color:var(--text-body)}
.timeline-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}.timeline-search{display:flex;align-items:center;gap:0;border-radius:14px;background:var(--moment-paper);border:1px solid var(--moment-edge);min-width:44px;overflow:hidden}
.timeline-search .icon-button{border:0;background:transparent}.search-toggle{position:relative}.search-toggle svg{transition:opacity var(--motion-quick),transform var(--motion-panel)}.search-close{position:absolute;opacity:0;transform:rotate(-90deg) scale(.6);transition:opacity var(--motion-quick),transform var(--motion-panel);font-size:25px}.is-open .search-toggle svg{opacity:0;transform:scale(.6)}.is-open .search-close{opacity:1;transform:none}
.search-field{display:grid;grid-template-columns:0fr;opacity:0;width:0;transition:width var(--motion-panel) var(--motion-ease),opacity var(--motion-panel)}.timeline-search.is-open .search-field{width:260px;grid-template-columns:1fr;opacity:1}
.search-field input{width:100%;min-width:0;height:44px;padding:9px 12px 9px 0;border:0;background:transparent;color:var(--text-body);font-size:16px}.timeline-view-switch{display:flex;gap:6px}.timeline-filter-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 24px}
.timeline-tabs{display:flex;position:relative;border:1px solid var(--moment-edge);border-radius:14px;padding:4px;background:var(--moment-paper);max-width:100%;isolation:isolate}
.timeline-tabs button{position:relative;z-index:1;min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--text-body);font-size:13px;padding:10px 15px;white-space:nowrap;transition:color var(--motion-quick)}.timeline-tabs button[aria-selected="true"]{color:var(--text-body);font-weight:600}
.tab-indicator{position:absolute;left:0;top:4px;height:44px;background:#e2eadf;border:1px solid #b7c9b4;border-radius:10px;z-index:0;transition:transform var(--motion-panel) var(--motion-ease),width var(--motion-panel) var(--motion-ease)}.timeline-result-count{font-size:12px;color:var(--text-body);background:var(--moment-paper);padding:4px 8px;border-radius:8px}.timeline-result-count:empty{display:none}
.timeline-no-results{padding:28px 20px;text-align:center;background:var(--moment-paper);border:1px solid var(--moment-edge);border-radius:20px;margin-bottom:24px}.timeline-no-results p{color:var(--text-body)}
.journey-export-tools{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}.recap-picker{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.recap-picker.is-expanded{padding:6px 10px;border:1px solid var(--moment-edge);border-radius:14px;background:#eef2e9}.recap-label{font-size:12px;color:var(--text-muted)}.recap-stepper{display:flex;align-items:center;gap:10px}.recap-stepper .icon-button{border:0;background:transparent}.recap-stepper output{min-width:24px;text-align:center;font-size:16px;font-variant-numeric:tabular-nums;color:var(--text-body)}.recap-picker .link{min-height:44px;font-size:12px}
.moment-title-toggle{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;color:inherit;font:inherit;line-height:inherit;min-height:44px;overflow-wrap:anywhere}.moment-title-toggle:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.disclosure-body{padding-top:4px}.journey-details[open]>summary{color:var(--text-muted)}
.journey-track[data-mode="grid"]:before{display:none}.journey-track[data-mode="grid"] .journey-year ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}.journey-track[data-mode="grid"] .journey-row{display:block;margin:0;min-width:0}.journey-track[data-mode="grid"] .journey-dot{display:none}.journey-track[data-mode="grid"] .journey-time{margin:0 0 12px;text-align:left;padding:10px 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.journey-track[data-mode="grid"] .journey-time>.link{margin-left:auto}.journey-track[data-mode="grid"] .journey-card:before{display:none}.journey-track[data-mode="grid"] .journey-year-label{text-align:left}.journey-track[data-mode="grid"] .journey-description{-webkit-line-clamp:2}.journey-track[data-mode="grid"] .journey-photo{transform:none}.journey-track[data-mode="grid"] .journey-photo img{height:190px}
.submit-state{display:flex;align-items:center;justify-content:center;gap:9px;min-height:24px}.submit-state svg{width:19px;height:19px}.submit-spinner{width:18px;height:18px;border:1.5px solid #ffffff66;border-top-color:white;border-radius:50%;animation:submit-spin .8s linear infinite}@keyframes submit-spin{to{transform:rotate(360deg)}}
#compose-submit{min-width:152px;transition:background var(--motion-panel),box-shadow var(--motion-panel);position:relative}#compose-submit[data-phase="success"]{background:var(--accent);opacity:1}#compose-submit[data-phase="error"]{background:var(--accent-dark)}
.photo-playback{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:18px}.photo-playback .btn{min-height:44px;gap:9px;background:var(--moment-paper);background-image:none}.photo-slide-count{text-align:center;margin:10px 0 0;font-size:12px;color:var(--text-body)}
.play-morph{position:relative;display:block;width:18px;height:18px}.play-morph i{position:absolute;inset:1px 0;display:block;background:currentColor;transition:clip-path var(--motion-panel) var(--motion-ease)}.play-morph i:first-child{clip-path:polygon(10% 0,52% 25%,52% 75%,10% 100%)}.play-morph i:last-child{clip-path:polygon(52% 25%,94% 50%,94% 50%,52% 75%)}.is-playing .play-morph i:first-child{clip-path:polygon(8% 0,38% 0,38% 100%,8% 100%)}.is-playing .play-morph i:last-child{clip-path:polygon(62% 0,92% 0,92% 100%,62% 100%)}
@media(hover:hover) and (pointer:fine){.quick-add-panel button:hover{background:#e4ecde}.site-menu-head~nav button:hover{padding-left:18px}.icon-button:hover{background:#e7eee1}}
@media(max-width:760px){.topbar{height:68px;padding-inline:8px}.topbar .mobile-logo{font-size:18px}.topbar .tag{display:none}.topbar .top-actions{gap:6px}.quick-add{right:18px;bottom:calc(94px + env(safe-area-inset-bottom))}.quick-add-toggle{width:52px;height:52px}.quick-add-toggle span{top:25px;left:16px}.timeline-search.is-open{flex:1;min-width:0}.timeline-search.is-open .search-field{width:100%;min-width:0;flex:1}.timeline-tabs{width:100%;justify-content:space-between}.timeline-tabs button{padding-inline:10px;font-size:12px}.journey-export-tools{justify-content:flex-start;width:100%;gap:8px}.recap-picker.is-expanded{width:100%}.recap-picker .recap-label{margin-right:auto}.recap-picker .link{width:100%;padding-block:4px}.journey-track[data-mode="grid"] .journey-year ol{gap:12px}.journey-track[data-mode="grid"] .journey-time{font-size:11px;padding:10px;gap:3px}.journey-track[data-mode="grid"] .journey-time>strong{font-size:16px!important}.journey-track[data-mode="grid"] .journey-time>span{font-size:10px;letter-spacing:0}.journey-track[data-mode="grid"] .journey-time>.link{width:100%;margin:0;text-align:left;font-size:11px}.journey-track[data-mode="grid"] .journey-row .journey-card{padding:12px!important}.journey-track[data-mode="grid"] .journey-card h3{font-size:16px;letter-spacing:0}.journey-track[data-mode="grid"] .journey-kind{font-size:10px!important;padding:4px 7px!important}.journey-track[data-mode="grid"] .journey-confirmed{display:none}.journey-track[data-mode="grid"] .journey-description{font-size:13px;line-height:1.8}.journey-track[data-mode="grid"] .journey-location{font-size:11px}.journey-track[data-mode="grid"] .journey-photo{padding:5px;margin-top:12px}.journey-track[data-mode="grid"] .journey-photo img{height:130px}.journey-track[data-mode="grid"] .journey-photo figcaption{font-size:11px;padding:8px 2px 2px}.journey-track[data-mode="grid"] .journey-photo-action{font-size:11px;padding-inline:5px;gap:5px}.journey-track[data-mode="grid"] .journey-card-bottom>span{font-size:10px;line-height:1.8}.journey-track[data-mode="grid"] .journey-details>summary{font-size:11px}.journey-track[data-mode="grid"] .journey-details[open] .disclosure-body{font-size:12px}.journey-track[data-mode="grid"] .journey-details[open] p{font-size:13px}.site-menu-head{margin-bottom:22px}#site-menu nav button{gap:12px;grid-template-columns:28px 1fr 24px}#site-menu{padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom))}.site-menu-note{max-width:290px}html[data-keyboard-open="true"] .quick-add{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}.topbar,.topbar:before,.header-identity *, .top-actions *, .menu-toggle span,.quick-add-toggle,.search-field,.search-toggle *,.tab-indicator,.timeline-tabs button,.icon-button,.play-morph i,#site-menu,#compose-submit{transition:none!important}.submit-spinner{animation:none}.submit-state[data-phase="loading"] .submit-spinner{border-style:dotted}}