:root{color-scheme:light;--ink:#080808;--paper:#FFFFFF;--muted:#777777;--soft:#FFFFFF;--line:#080808;--blue:#166F00;--spring:cubic-bezier(.22,1,.36,1);--swift:cubic-bezier(.2,.8,.2,1)}
*,*::before,*::after{box-sizing:border-box;scrollbar-width:none!important}
*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
html{width:100%;max-width:100%;background:#FFFFFF;overflow-x:clip;overscroll-behavior-x:none;-webkit-text-size-adjust:100%;}
body{margin:0;max-width:100%;overflow-x:clip;background:#FFFFFF;color:var(--ink);font-family:'Arimo',Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;min-width:0}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{opacity:.58;cursor:wait}a,a:visited{color:var(--ink)}img{max-width:100%;display:block}svg{display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}h1,h2,h3,.anton{font-family:'Archivo Black','Trebuchet MS',sans-serif;font-weight:400;letter-spacing:.015em}p{line-height:1.5}[hidden]{display:none!important}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:3px}input,textarea,select{accent-color:var(--blue);font-size:16px!important;max-width:100%}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:#080808!important;box-shadow:0 0 0 1000px #FFFFFF inset!important;-webkit-box-shadow:0 0 0 1000px #FFFFFF inset!important}
.solid,.outline{font-size:12px;letter-spacing:.07em;font-weight:700;min-height:47px;padding:12px 15px;border:1.5px solid var(--ink);transition:transform .2s var(--spring),background-color .18s ease,box-shadow .2s ease;color:var(--ink);text-decoration:none}
.solid{background:#080808;color:#FFFFFF}.outline{background:#FFFFFF}.full{width:100%}button:not(:disabled):active{transform:scale(.977)}.solid:not(:disabled):active{background:#080808}.outline:not(:disabled):active{background:#FFFFFF}.muted{color:var(--muted)}.tiny{font-size:12px}.status{font-size:12px;color:#080808;line-height:1.4;min-height:14px;margin:12px 0}.status:empty{min-height:0;margin:0}
.field{margin:17px 0;min-width:0;max-width:100%}.field label{display:block;margin-bottom:9px;font-size:11px;font-weight:700;letter-spacing:.08em}.field input:not([type=file]):not([type=checkbox]),.field textarea{appearance:none;-webkit-appearance:none;border-radius:0;display:block;width:100%;height:49px;min-width:0;min-height:49px;padding:12px 13px;background:#FFFFFF;color:#080808;border:1.5px solid #080808;box-shadow:none}.field textarea{height:auto;min-height:118px;resize:vertical;line-height:1.5}.field input::placeholder,.field textarea::placeholder{color:#777777}
.wrap{width:min(100%,980px);margin:0 auto;padding:0 18px}.page{padding-bottom:calc(99px + env(safe-area-inset-bottom))}.header{display:flex;justify-content:space-between;align-items:center;gap:14px;min-width:0;padding:calc(14px + env(safe-area-inset-top)) 0 15px;border-bottom:3px solid #080808}.wordmark{width:clamp(155px,38vw,230px);height:auto;flex:none}.iconbtn{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1.5px solid #080808;background:#FFFFFF;color:var(--blue);transition:background-color .2s,transform .2s var(--spring)}.iconbtn svg{width:23px;height:23px;stroke-width:1.9}
.intro{padding:26px 0 20px;border-bottom:2px solid #080808;display:flex;justify-content:space-between;align-items:end;gap:9px}.intro-copy{min-width:0}.intro h1{font-size:clamp(30px,7.2vw,72px);line-height:1.08;margin:10px 0 0;overflow-wrap:anywhere}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em}.counter{text-align:right;flex:none;white-space:nowrap;font-size:10px;font-weight:700}.counter b{display:block;font-size:26px;line-height:1.2;font-weight:700}.page-view{min-width:0;max-width:100%}.page-view.view-enter{animation:viewIn .31s var(--spring) both}@keyframes viewIn{from{opacity:.55;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.bar{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;margin:19px 0 17px}.tabs{display:flex;gap:3px;min-width:0;flex-wrap:wrap}.tab{font-size:11px;font-weight:700;letter-spacing:.04em;border:0;background:#FFFFFF;padding:10px 11px;white-space:nowrap;color:#080808;transition:background-color .2s,color .2s}.tab.active{background:#080808;color:#FFFFFF}.sort-wrap{position:relative;min-width:0;flex:none}.sort{display:flex;align-items:center;justify-content:center;gap:8px;background:#FFFFFF;border:1.4px solid #080808;padding:9px 10px;min-height:38px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#080808}.sort-arrow{font-size:18px;line-height:1;color:var(--blue)}.sort-menu{position:absolute;top:calc(100% + 6px);right:0;background:#FFFFFF;border:1.5px solid #080808;z-index:25;min-width:154px;box-shadow:3px 4px 0 #080808;transform-origin:top right;animation:dropIn .2s var(--spring) both}@keyframes dropIn{from{opacity:0;transform:translateY(-7px) scale(.97)}to{opacity:1;transform:none}}.sort-menu button{width:100%;display:block;border:0;border-bottom:1px solid #FFFFFF;background:#FFFFFF;padding:13px 12px;text-align:left;font-weight:700;font-size:11px;letter-spacing:.06em}.sort-menu button:last-child{border:0}.sort-menu button[aria-selected=true]{background:#080808;color:#FFFFFF}.sort-menu button:active{background:#FFFFFF}.custom-hint{display:flex;align-items:center;gap:8px;margin:0 0 17px;color:#777777;font-size:10px;letter-spacing:.05em;font-weight:700}.custom-hint svg{width:17px;height:17px;color:var(--blue);flex:none}
.masonry{columns:2;column-gap:12px;min-width:0;min-height:1px;padding:0 2px 20px}.masonry.custom-mode{columns:initial;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:6px;column-gap:12px;row-gap:12px;align-items:start;touch-action:pan-y}
.polaroid{position:relative;display:inline-block;width:100%;vertical-align:top;break-inside:avoid;page-break-inside:avoid;border:1px solid #080808;background:#FFFFFF;padding:7px 7px 0;margin:0 0 13px;box-shadow:2px 2px 0 #080808;perspective:1100px;isolation:isolate;overflow:visible;min-width:0;contain:layout style}.masonry.custom-mode .polaroid{display:block;width:100%;margin:0;align-self:start;user-select:none;-webkit-user-select:none}.polaroid.flip-active{z-index:4}.flip-stage{display:grid;grid-template-areas:'card';width:100%;transform-style:preserve-3d;transition:transform .47s cubic-bezier(.2,.77,.22,1)}.polaroid.is-flipped .flip-stage{transform:rotateY(180deg)}.flip-front,.flip-back{grid-area:card;min-width:0;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}.flip-front{display:block;text-align:left;padding:0;margin:0;background:transparent;border:0;color:#080808;cursor:pointer;transform:rotateY(0deg)}.polaroid.is-flipped .flip-front{pointer-events:none}.flip-image{aspect-ratio:auto;min-height:60px;max-width:100%;display:block;width:100%;height:auto;object-fit:cover}.polaroid-foot{padding:10px 2px 15px;min-height:68px}.polaroid-foot strong{display:block;font-size:clamp(11px,2.7vw,15px);line-height:1.22;overflow-wrap:anywhere;font-weight:700}.polaroid-foot .card-location{margin:7px 0 0;font-size:clamp(10px,2.25vw,12px);color:#080808;display:flex;gap:3px;align-items:flex-start}.card-location svg{width:12px;height:12px;flex:none;margin-top:2px;color:var(--blue)}.card-location span{min-width:0;overflow-wrap:anywhere}.polaroid-foot .card-story{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;margin:7px 0 0;line-height:1.4;font-size:clamp(10px,2.25vw,12px)}.card-date{display:block;font-size:clamp(10px,2.15vw,11px);color:#777777;margin-top:9px}
.flip-back{transform:rotateY(180deg);background:#FFFFFF;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;padding:16px 7px 14px;pointer-events:none;min-height:196px}.polaroid.is-flipped .flip-back{pointer-events:auto}.flip-back-title{font-family:'Archivo Black','Trebuchet MS',sans-serif;font-size:clamp(15px,4vw,26px);text-align:center;overflow-wrap:anywhere;line-height:1.2;margin:0 0 6px}.card-action{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 5px;min-height:39px;width:100%;background:#FFFFFF;border:1px solid #080808;font-size:clamp(9px,2vw,11px);font-weight:700;letter-spacing:.02em;color:#080808}.card-action svg{width:14px;height:14px;flex:none}.card-action.delete{color:#080808}.flip-back .back-link{color:#777777;background:transparent;border:0;text-decoration:underline;font-size:10px;font-weight:700;margin-top:5px;padding:6px}.delete-confirm{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:5px;animation:dropIn .2s var(--spring) both}.delete-confirm button{border:1px solid #080808;background:#FFFFFF;padding:8px 4px;font-size:9px;font-weight:700}.delete-confirm button.yes{background:#080808;color:#FFFFFF}.delete-confirm .confirm-label{grid-column:1/-1;font-size:10px;text-align:center;color:#080808}
.favorite-star{position:absolute;top:13px;right:13px;z-index:6;display:grid;place-items:center;width:33px;height:33px;padding:5px;border:1px solid #080808;background:#FFFFFF;color:#080808;transition:opacity .17s,transform .2s var(--spring),background-color .2s}.favorite-star svg{width:20px;height:20px;stroke-width:1.8;stroke-linejoin:round}.favorite-star svg path{fill:transparent;transition:fill .18s ease}.favorite-star.is-favorite svg path{fill:#080808}.favorite-star.star-pop svg{animation:starBounce .3s var(--spring)}@keyframes starBounce{0%{transform:scale(.7)}55%{transform:scale(1.3)}100%{transform:scale(1)}}.polaroid.is-flipped .favorite-star{opacity:0;pointer-events:none}.masonry.custom-mode .polaroid.is-dragging{opacity:.18;box-shadow:none}.drag-ghost{position:fixed!important;z-index:250!important;pointer-events:none!important;isolation:isolate;opacity:.93;will-change:transform;transform-origin:center top;box-shadow:0 18px 32px rgba(0,0,0,.16),3px 3px 0 #080808!important;transition:none!important}.drag-ghost .favorite-star{display:none}.masonry.custom-mode.is-reordering .polaroid{cursor:grabbing}.masonry.custom-mode .polaroid:not(.is-dragging){cursor:grab}
.empty{border:2px dashed #777777;padding:35px 20px;text-align:center;margin:22px 0}.empty h2{font-size:26px;margin:0 0 9px}.empty p{color:#080808;font-size:13px}.section-title{font-size:29px;margin:24px 0 14px}.card{border:2px solid #080808;padding:17px;margin:17px 0}.card h2{font-size:24px;margin:0 0 9px}.card p{font-size:13px;color:#080808}.archivepick{width:100%;text-align:left;background:#FFFFFF;color:#080808;border:2px solid #080808;padding:15px;margin:9px 0;transition:transform .2s var(--spring),background-color .2s}.archivepick.selected{background:#080808;color:#FFFFFF}.archivepick strong{display:block;font-size:17px}.archivepick small{display:block;margin-top:4px;font-size:11px}.invite-copy-row{margin:15px 0 6px;display:flex;gap:8px;align-items:stretch;min-width:0}.invite-copy-code{flex:1;min-width:0;word-break:break-all;border:1px solid #080808;background:var(--soft);display:flex;align-items:center;padding:10px;font-size:14px;font-weight:700;letter-spacing:.08em}.invite-copy-btn{display:grid;place-items:center;flex:none;width:52px;min-height:48px;background:#080808;color:#FFFFFF;border:1px solid #080808}.invite-copy-btn svg{width:20px;height:20px}.footer{border-top:1px solid #080808;padding:17px 0;color:#080808;font-size:11px;margin-top:22px}
.nav{position:fixed;z-index:30;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:0;padding:5px 10px calc(4px + env(safe-area-inset-bottom));background:#FFFFFF;border-top:0;isolation:isolate}.nav::before{content:"";position:absolute;top:-7px;left:0;right:0;border-top:2px solid #080808;background:#FFFFFF}.nav button{border:0;background:transparent;color:#777777;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:33.33%;max-width:180px;min-height:48px;padding:2px;font-size:10px;font-weight:700;letter-spacing:.06em;transition:color .2s,transform .22s var(--spring)}.nav button.active{color:#080808}.nav svg{width:23px;height:23px}.nav .add-nav{color:#FFFFFF}.nav .plus{width:47px;height:47px;border-radius:12px;display:grid;place-items:center;background:#080808;transition:transform .25s var(--spring),border-radius .25s var(--spring)}.nav .plus svg{width:26px;height:26px;stroke:#FFFFFF}.nav .add-nav:active .plus{transform:scale(.89);border-radius:14px}
.modal{position:fixed;z-index:60;inset:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}.modal[hidden]{display:none!important}.modal-backdrop{position:absolute;inset:0;background:#FFFFFF;opacity:0;transition:opacity .33s ease}.sheet{position:relative;z-index:2;background:#FFFFFF;width:100%;max-width:640px;max-height:calc(100dvh - env(safe-area-inset-top));height:calc(100dvh - env(safe-area-inset-top));margin-top:env(safe-area-inset-top);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;overscroll-behavior-x:none;padding:18px 18px calc(30px + env(safe-area-inset-bottom));border:0;min-width:0;transform:translate3d(0,103%,0);opacity:1;will-change:transform;transition:transform .41s cubic-bezier(.22,1,.36,1)}.modal.is-open{pointer-events:auto}.modal.is-open .sheet{transform:translate3d(0,0,0);opacity:1}.modal.is-open .modal-backdrop{opacity:1}.sheethead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:2px solid #080808;min-width:0}.sheethead h2{min-width:0;margin:0;font-size:clamp(24px,7vw,34px);overflow-wrap:anywhere}.close{width:41px;height:41px;border:1px solid #080808;display:grid;place-items:center;flex:none;background:#FFFFFF;color:var(--blue);transition:transform .23s var(--spring)}.close svg{width:22px;height:22px}.sheet-body-enter{animation:sheetContentIn .26s var(--spring) both}@keyframes sheetContentIn{from{opacity:.1;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}body.modalopen{overflow:hidden}.notice{position:fixed;z-index:300;bottom:calc(100px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;background:#080808;color:#FFFFFF;padding:12px 17px;font-size:12px;text-align:center;box-shadow:0 3px 12px #0002;animation:toastIn .25s var(--spring) both}@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
/* Account — classic centered profile layout */
.profile-center{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 0 23px}.profile-avatar{width:116px;height:116px;display:grid;place-items:center;background:#FFFFFF;border-radius:50%;border:2px solid #080808;overflow:hidden;flex:none}.profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.profile-avatar-fallback{font-size:35px;font-family:'Archivo Black','Trebuchet MS',sans-serif;color:#777777}.profile-user{font-size:27px;margin:17px 0 1px;max-width:100%;overflow-wrap:anywhere}.profile-email{margin:3px 0 16px;color:#777777;font-size:12px;max-width:100%;overflow-wrap:anywhere}.profile-edit-btn{min-width:145px;min-height:39px;padding:9px 15px}.profile-section{border-top:2px solid #080808;padding-top:17px;margin:16px 0 12px;font-size:25px}.profile-archive{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #080808;background:#FFFFFF;color:#080808;padding:15px;text-align:left;margin:9px 0}.profile-archive small{display:block;color:#777777;font-size:11px;margin-top:4px}.profile-archive-arrow{flex:none;color:var(--blue)}.profile-archive-arrow svg{width:19px;height:19px}.profile-editor-photo{display:flex;flex-direction:column;align-items:center;padding:22px 0 7px;gap:10px}.profile-editor-photo .profile-avatar{width:106px;height:106px}.profile-photo-controls{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}.profile-photo-controls button{min-height:39px;padding:9px;font-size:10px}.profile-remove{color:#777777!important;background:#FFFFFF;border:1px solid #777777!important}.back-button{border:0;background:transparent;color:var(--blue);padding:12px 0;font-size:11px;font-weight:700}.back-button svg{width:15px;height:15px;display:inline;vertical-align:middle;margin-right:5px}
/* Moment editor */
.date-shell{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;height:49px;min-width:0;border:1.5px solid #080808;background:#FFFFFF;padding:0 13px;overflow:hidden;font-size:16px}.date-label{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.date-shell svg{width:19px;height:19px;flex:none;color:var(--blue)}.date-shell input[type=date]{position:absolute;inset:0;opacity:0;min-width:0;width:100%;height:100%;padding:0;margin:0;border:0;font-size:16px;cursor:pointer}.date-shell:focus-within{outline:2px solid var(--blue);outline-offset:2px}.location-field{position:relative}.location-results{border:1px solid #080808;border-top:0;background:#FFFFFF;max-height:205px;overflow-y:auto;overscroll-behavior-y:contain}.location-choice{width:100%;display:block;text-align:left;border:0;border-bottom:1px solid #FFFFFF;background:#FFFFFF;color:#080808;padding:11px 12px;transition:background-color .15s ease}.location-choice:last-child{border-bottom:0}.location-choice strong{display:block;font-size:13px;overflow-wrap:anywhere}.location-choice small{display:block;font-size:11px;color:#777777;margin-top:3px;overflow-wrap:anywhere}.location-hint{padding:12px;color:#777777;font-size:11px}.location-selected{display:flex;align-items:center;gap:10px;padding:9px 11px;background:#FFFFFF;border:1px solid #FFFFFF;margin:9px 0 0;animation:locationIn .26s var(--spring) both}.location-selected-pin{width:16px;height:16px;flex:none;color:var(--blue)}.location-selected-copy{min-width:0;flex:1;overflow-wrap:anywhere}.location-selected-copy strong{font-size:13px}.location-selected-copy small{display:block;font-size:11px;color:#777777;line-height:1.4;margin-top:2px}.location-clear{width:30px;height:30px;border:0;background:transparent;display:grid;place-items:center;color:var(--blue);flex:none}.location-clear svg{width:18px;height:18px}@keyframes locationIn{from{opacity:0;transform:translateY(-6px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}.location-credit{display:block;margin-top:6px;color:#777777;font-size:9px}.location-credit a{color:#777777;text-decoration:underline}.location-loading{display:inline-block;position:relative;width:12px;height:12px;margin-left:6px;border:2px solid #777777;border-top-color:var(--blue);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.photo-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;clip-path:inset(50%)}.add-photo{width:100%;min-height:51px;border:1.5px solid #080808;background:#FFFFFF;font-size:12px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;gap:9px;color:#080808}.add-photo svg{width:17px;height:17px;color:var(--blue)}.photo-preview{position:relative;display:inline-block;width:min(45%,165px);margin-top:13px;border:1px solid #080808}.photo-preview img{width:100%;height:auto;max-height:180px;object-fit:cover}.photo-preview .photo-clear{position:absolute;right:-7px;top:-7px;width:27px;height:27px;display:grid;place-items:center;background:#FFFFFF;border:1px solid #080808;color:var(--blue)}.photo-preview .photo-clear svg{width:15px;height:15px}.editor-note{font-size:11px;color:#777777}.legacy-note{border-left:2px solid #777777;padding:8px 11px;background:#FFFFFF;color:#777777;font-size:11px;margin:13px 0}
/* Authentication — elevated layout */
.authpage{height:100dvh;min-height:0;max-width:100%;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;padding:clamp(52px,10dvh,92px) 20px max(13px,env(safe-area-inset-bottom))}.authbox{width:min(100%,440px);max-height:100%;overflow-y:auto;overscroll-behavior-y:contain}.authlogo{width:min(43%,135px);height:auto;margin:0 auto 24px}.authbox h1{font-size:clamp(28px,7.4vw,40px);margin:0 0 8px}.tagline{font-size:12px;color:#777777;margin:0 0 18px}.authbox .field{margin:12px 0}.authbox .field input{height:46px!important;min-height:46px!important}.authswitch{text-align:center;font-size:13px;color:#777777;margin:31px 0}.authswitch button{background:none;border:0;color:#080808;font-weight:700;text-decoration:underline;padding:7px}.splash{position:fixed;inset:0;z-index:500;display:grid;place-items:center;background:#FFFFFF;transition:opacity .4s ease}.splash.done{opacity:0;pointer-events:none}.splash-inner{width:min(45vw,185px);max-width:185px;text-align:center}.splash-inner img{width:100%;height:auto}.track{height:4px;background:#FFFFFF;margin-top:15px}.fill{height:100%;background:#080808;animation:fill 1.1s var(--swift) both}@keyframes fill{from{width:0}to{width:100%}}
@media(min-width:700px){.masonry{columns:3;column-gap:18px}.masonry.custom-mode{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px}.polaroid{margin-bottom:19px;padding:10px 10px 0}.favorite-star{top:17px;right:17px}.modal{align-items:center}.modal-backdrop{background:rgba(0,0,0,.40)}.sheet{height:auto;max-height:min(90dvh,900px);border:2px solid #080808;margin:0;transform:translate3d(0,105%,0)}.wrap{padding:0 28px}.profile-avatar{width:130px;height:130px}}
@media(max-width:370px){.wrap{padding:0 13px}.bar{gap:3px}.tabs .tab{padding:9px 8px;font-size:10px}.sort{font-size:10px;padding:8px}.masonry{column-gap:9px}.masonry.custom-mode{column-gap:9px}.polaroid{padding:5px 5px 0}.favorite-star{width:29px;height:29px;top:10px;right:10px}.favorite-star svg{width:17px;height:17px}.polaroid-foot{padding:8px 2px 12px}.sheet{padding:17px 13px calc(26px + env(safe-area-inset-bottom))}.intro h1{font-size:clamp(29px,7.3vw,40px)}.nav{padding-inline:5px}.nav .plus{width:44px;height:44px}}
@media(max-height:690px){.authpage{padding-top:35px}.authlogo{width:min(31%,95px);margin-bottom:13px}.authbox h1{font-size:27px}.authbox .field{margin:9px 0}.authswitch{margin:16px 0}.tagline{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.sheet,.flip-stage{transition-duration:0ms!important}}

/* Optimistic favorites must not fade while the network is saving. */
.favorite-star:disabled{opacity:1;cursor:default}
/* Use one responsive masonry grid for every sort mode, preserving visual left-to-right chronological ordering. */
.masonry,.masonry.custom-mode{columns:initial;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:6px;column-gap:12px;row-gap:12px;align-items:start}
.masonry .polaroid,.masonry.custom-mode .polaroid{display:block;width:100%;margin:0;align-self:start}
@media(min-width:700px){.masonry,.masonry.custom-mode{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px}}
@media(max-width:370px){.masonry,.masonry.custom-mode{column-gap:9px}}

/* ARCHIVE. v1.6 — iPhone 15 Pro (393 x 852 CSS px) */
:root{--blue:#166F00}
.accent-dot{color:var(--blue);font-weight:inherit}
html,body{width:100%;overscroll-behavior-x:none;overflow-x:clip;touch-action:pan-y}
body{background:#FFFFFF!important}
body.crop-open{overflow:hidden}
button,a{touch-action:manipulation}
.header .archive-header-icon{width:27px;height:27px;object-fit:contain}
.header .iconbtn{color:#080808}
.intro-counters{flex:none;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:8px}
.intro-counters .counter{line-height:1.2}
.intro-counters .counter b{font-size:25px}
#archiveCounter{margin-bottom:1px}
/* Real, uninterrupted white navigation surface. Its top rule belongs to the same box. */
.nav{background:#FFFFFF!important;border-top:2px solid #080808!important;padding:11px 7px calc(6px + env(safe-area-inset-bottom))!important;gap:0;justify-content:space-between;isolation:isolate}
.nav::before{display:none!important;content:none!important}
.nav button{width:20%;max-width:none;min-height:51px;gap:4px;padding:2px 0;font-size:8px;letter-spacing:.025em;flex:none}
.nav svg{width:21px;height:21px;stroke-width:1.9}
.nav .plus{width:49px;height:49px;border-radius:12px}
.nav .plus svg{width:27px;height:27px}
.nav .add-nav{align-self:center}
.page{padding-bottom:calc(118px + env(safe-area-inset-bottom))}
/* Cards contain one archive-specific square image and metadata. */
.archive-list{display:grid;gap:10px;margin:18px 0 16px}
.archive-row{position:relative;min-width:0;display:flex}
.archivepick{display:flex;align-items:center;gap:14px;width:100%;min-height:109px;margin:0;border:2px solid #080808;padding:12px 55px 12px 12px;text-align:left;overflow:hidden}
.archivepick .archive-info{min-width:0;flex:1;overflow-wrap:anywhere}
.archivepick strong{font-size:17px;line-height:1.3}
.archivepick small{font-size:10px;line-height:1.45;margin-top:7px;letter-spacing:.025em}
.archive-cover{width:76px;height:76px;flex:none;border:1px solid currentColor;display:grid;place-items:center;background:#FFFFFF;overflow:hidden}
.archive-cover img{width:100%;height:100%;object-fit:cover}
.archive-cover .archive-cover-default{width:68%;height:68%;object-fit:contain}
.archive-row-edit{position:absolute;right:13px;top:50%;transform:translateY(-50%);display:grid;place-items:center;background:#FFFFFF;border:1px solid #080808;width:39px;height:39px;color:var(--blue)}
.archive-row-edit svg{width:19px;height:19px}
.archive-row-edit:active{transform:translateY(-50%) scale(.94)!important}
.archive-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;margin:19px 0 28px}
.archive-actions .solid{min-height:57px;padding:11px 6px;text-align:center;font-size:10px;letter-spacing:.005em;white-space:nowrap}
.empty-archives{border:1.5px dashed #777777;padding:24px 12px;color:#777777;text-align:center;font-size:11px}
.archive-cover-preview{width:130px;height:130px;display:grid;place-items:center;border:2px solid #080808;background:#FFFFFF;margin:8px auto 16px;overflow:hidden}
.archive-cover-preview img{width:100%;height:100%;object-fit:cover}
.archive-cover-preview img.archive-cover-default{width:62%;height:62%;object-fit:contain}
#editArchiveRemovePhoto{margin-top:9px;min-height:38px}
/* The search page reuses the same moment cards and masonry sizing. */
.search-note{color:#777777;font-size:12px;line-height:1.4;margin:6px 0 18px;min-height:20px}
.search-entry{position:relative}
.search-entry svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--blue);pointer-events:none}
.field .search-entry input{padding-left:43px!important}
#searchResults{padding-top:2px}
/* Account is its own tab, not a popup. */
#accountView .section-title{margin-top:22px}
.account-archive-row{display:flex;align-items:stretch;gap:8px;margin:9px 0}
.account-archive-row .profile-archive{flex:1;margin:0;min-width:0;overflow-wrap:anywhere}
.manage-archive{width:42px;flex:none;border:1px solid #080808;background:#FFFFFF;color:var(--blue);font-size:17px;font-weight:800;letter-spacing:1px}
.manage-actions{display:grid;gap:12px;margin-top:22px}
.manage-name{font-family:'Archivo Black','Trebuchet MS',sans-serif;font-size:25px;overflow-wrap:anywhere}
.danger-btn{border-color:#080808}
.danger-copy{font-size:13px;color:#080808;margin:23px 0;line-height:1.6}
.cancel-danger{margin-top:10px}
.account-logout{margin:28px 0 25px}
.profile-center{padding:19px 0 28px}
.profile-avatar{border-radius:0!important;width:120px;height:120px;border:2px solid #080808}
.profile-avatar img{border-radius:0!important}
.profile-editor-photo .profile-avatar{width:118px;height:118px}
.profile-user{font-size:30px;margin-top:14px}
.profile-section{margin:15px 0 15px}
/* Small real preview of the moment card, updated from editable fields. */
.live-preview{border-top:1.5px solid #080808;margin:22px 0;padding-top:20px}
.live-preview-heading{font-size:22px;margin:0 0 4px}
.live-preview>p{font-size:10px;color:#777777;letter-spacing:.03em;margin:0 0 14px}
.live-preview-card{width:min(65%,210px);padding:7px 7px 0;border:1px solid #080808;box-shadow:2px 2px 0 #080808;background:#FFFFFF;overflow:hidden}
.live-preview-frame{width:100%;min-height:130px;display:grid;place-items:center;background:#FFFFFF}
.live-preview-frame img{width:100%;height:auto;max-height:255px;object-fit:contain}
.live-preview-frame span{font-size:9px;color:#777777;font-weight:700;letter-spacing:.07em}
.live-preview-copy{padding:10px 3px 13px;min-width:0}
.live-preview-copy strong{display:block;font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.live-preview-copy small{display:block;font-size:10px;color:#777777;margin-top:6px;overflow-wrap:anywhere}
.live-preview-copy p{font-size:10px;line-height:1.4;margin:7px 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
/* Square cropper, same pattern for account and archive pictures. */
.crop-overlay{position:fixed;z-index:700;inset:0;padding:calc(19px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;background:#FFFFFF;overflow:hidden}
.crop-panel{width:100%;max-width:345px;text-align:center}
.crop-panel h2{font-size:29px;margin:0 0 8px}
.crop-panel p{font-size:12px;color:#777777;line-height:1.4;margin:0 0 20px}
.crop-frame{width:min(72vw,290px);aspect-ratio:1;position:relative;margin:0 auto;background:#FFFFFF;border:2px solid #080808;touch-action:none;overflow:hidden;user-select:none;-webkit-user-select:none}
.crop-frame img{max-width:none;position:absolute;left:50%;top:50%;pointer-events:none;user-select:none;-webkit-user-select:none}
.crop-zoom-label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-align:left;margin:24px auto 8px;width:min(72vw,290px)}
.crop-zoom{width:min(72vw,290px);display:block;margin:0 auto 24px;accent-color:var(--blue);height:28px}
.crop-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* No interactive animation on favorites. One touch = filled/unfilled immediately. */
.favorite-star,.favorite-star svg,.favorite-star svg path{transition:none!important;animation:none!important}
.favorite-star.star-pop svg{animation:none!important}
/* Login and registration fit the 393px-wide app canvas; no page or nested panel scrolling. */
.authpage{width:100%;max-width:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;padding:clamp(25px,5dvh,49px) 20px calc(9px + env(safe-area-inset-bottom));align-items:flex-start}
.authbox{overflow:hidden!important;max-height:100%;overscroll-behavior:none}
.authlogo{margin-bottom:20px}
.authswitch{margin:24px 0 8px}
body.auth-visible{overflow:hidden;height:100dvh;overscroll-behavior:none}
/* Do not display system UI zoom artifacts caused by small controls. */
input,select,textarea{font-size:16px!important;touch-action:manipulation}
@media(max-width:420px){.wrap{padding:0 17px}.intro h1{font-size:clamp(29px,7.2vw,36px)}.header .wordmark{width:clamp(151px,38vw,200px)}.profile-archive{padding:13px}.nav button{font-size:8px}}
@media(max-height:680px){.authpage{padding-top:16px}.authlogo{width:92px;margin-bottom:12px}.authbox h1{font-size:25px}.authswitch{margin-top:11px}}
@media(prefers-reduced-motion:reduce){.crop-overlay *{animation:none!important;transition:none!important}}

.favorite-star:not(:disabled):active{transform:none!important}

/* ARCHIVE. v1.7 — permanent scroll surface, iPhone 15 Pro 393x852 */
:root{--archive-nav-clearance:100px}
/* The main page is the only vertical scroller while logged in. The nav overlays none of the last content. */
html:has(#app:not([hidden])),body:has(#app:not([hidden])){height:100%;min-height:0;overflow:hidden!important;overscroll-behavior:none}
#app{height:100dvh;max-height:100dvh;overflow:hidden;position:relative;background:#FFFFFF}
#pageScroller{height:100dvh;height:100%;max-height:100%;width:100%;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-y;padding-bottom:calc(var(--archive-nav-clearance) + 30px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:calc(var(--archive-nav-clearance) + 25px)}
#pageScroller::-webkit-scrollbar{display:none}
#app .footer{position:relative;display:block;margin-top:26px;margin-bottom:16px}
/* The navigation's black rule stays attached to the same continuous white surface. */
#app .nav{z-index:40;background:#FFFFFF!important}
/* Header archive switcher (content never collides with the ARCHIVE. wordmark). */
#app .header{position:relative;z-index:50;gap:10px}
#app .header .wordmark{flex-shrink:0;width:clamp(145px,37vw,190px)}
.archive-switch-area{position:relative;flex:1;min-width:0;display:flex;justify-content:flex-end;z-index:55}
.archive-switch-btn{border:1.5px solid #080808;background:#FFFFFF;display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;height:45px;padding:5px 7px;color:#080808}
.archive-switch-photo{height:31px;width:31px;flex:none;object-fit:cover;aspect-ratio:1;border:1px solid #080808}
.archive-switch-photo.is-default{object-fit:contain;border:0;padding:1px}
.archive-switch-label{min-width:0;font-size:10px;letter-spacing:.015em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.archive-switch-chevron{width:16px;height:16px;color:var(--blue);flex:none;transition:transform .22s var(--spring)}
.archive-switch-btn[aria-expanded=true] .archive-switch-chevron{transform:rotate(180deg)}
.archive-switch-menu{position:absolute;right:0;top:calc(100% + 7px);width:min(258px,calc(100vw - 34px));max-height:min(375px,60dvh);overflow-y:auto;background:#FFFFFF;border:1.5px solid #080808;box-shadow:3px 4px 0 #080808;animation:dropIn .22s var(--spring) both;z-index:100;padding:5px}
.archive-switch-option{display:flex;align-items:center;gap:9px;width:100%;padding:8px 7px;border:0;background:#FFFFFF;text-align:left;min-height:50px;color:#080808}
.archive-switch-option + .archive-switch-option{border-top:1px solid #FFFFFF}
.archive-switch-option.is-active{background:#FFFFFF}
.archive-switch-option:active{background:#FFFFFF}
.archive-switch-photo-frame{height:34px;width:34px;flex:none;display:grid;place-items:center;border:1px solid #080808;overflow:hidden}
.archive-switch-photo-frame img{height:100%;width:100%;object-fit:cover}
.archive-switch-photo-frame img.is-default{height:75%;width:75%;object-fit:contain}
.archive-switch-option-name{flex:1;min-width:0;font-size:12px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.archive-switch-check{font-weight:800;color:var(--blue);font-size:16px}
.archive-switch-empty{font-size:11px;color:#777777;padding:11px;line-height:1.4;margin:0}
/* New moment: thumbnail sits in the header, full preview opens without destroying the editor. */
.sheethead h2{flex:1;min-width:0;line-height:1.1}
.sheethead-tools{display:flex;align-items:center;gap:8px;flex:none}
.preview-thumb{background:#FFFFFF;color:#080808;border:1px solid #080808;width:62px;min-height:70px;padding:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .2s var(--spring)}
.preview-thumb-photo{display:grid;place-items:center;width:52px;height:48px;overflow:hidden;background:#FFFFFF;color:#777777}
.preview-thumb-photo img{width:100%;height:100%;object-fit:cover}
.preview-thumb-photo>span{font-size:21px;color:#777777;font-weight:400;line-height:1}
.preview-thumb-label{font-size:8px;font-weight:800;letter-spacing:.04em}
.preview-overlay{position:fixed;inset:0;z-index:650;background:#FFFFFF;overflow-y:auto;overscroll-behavior:contain;padding:calc(18px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom));display:flex;align-items:flex-start;justify-content:center}
.preview-panel{width:min(100%,370px);margin:auto 0}
.preview-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:2px solid #080808;padding-bottom:15px}
.preview-panel-head h2{margin:0;font-size:28px}
.preview-description{font-size:11px;color:#777777;margin:14px 0 18px}
.preview-full-card{border:1.5px solid #080808;padding:9px 9px 0;box-shadow:3px 3px 0 #080808;background:#FFFFFF;width:min(100%,300px);margin:0 auto 25px}
.preview-full-photo{display:grid;place-items:center;background:#FFFFFF;width:100%;min-height:165px}
.preview-full-photo img{width:100%;max-height:320px;object-fit:contain}
.preview-full-photo span{font-size:12px;font-weight:700;color:#777777}
.preview-full-info{padding:13px 5px 17px}
.preview-full-info strong{display:block;font-size:17px;line-height:1.35;overflow-wrap:anywhere}
.preview-full-info small{display:block;color:#777777;font-size:11px;margin-top:9px}
.preview-full-info p{font-size:12px;margin:10px 0 0;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
body.preview-open{overflow:hidden}
/* Auth logo is not moved; the heading/form underneath moves down to balance whitespace. */
.authpage{height:100dvh;overflow:hidden;align-items:flex-start}
.authbox{overflow:hidden!important}
.authlogo{margin-bottom:50px}
.authpage:has(#confirmWrap:not([hidden])) .authlogo{margin-bottom:33px}
.authpage:has(#confirmWrap:not([hidden])) .authswitch{margin-top:18px}
/* Slightly smaller, visually centered splash logo and loader. */
.splash-inner{width:min(39vw,160px);max-width:160px;transform:translateY(-7px)}
/* No surprise back-scrolling on mobile. */
#pageScroller:focus{outline:none}
@media(prefers-reduced-motion:reduce){.archive-switch-menu{animation:none}.archive-switch-chevron{transition:none}.preview-thumb{transition:none}}

/* v1.7 QA refinements: real footer clearance measured from its fixed navigation box. */
#pageScroller{padding-bottom:calc(var(--archive-nav-clearance,82px) + 20px)!important;scroll-padding-bottom:calc(var(--archive-nav-clearance,82px) + 18px)}
#app .footer{margin-bottom:0}
/* Keep mini live preview in view while the long editor is scrolled or keyboard is showing. */
.sheethead{position:sticky;top:0;background:#FFFFFF;z-index:20}
.preview-thumb{width:73px;min-height:78px;gap:1px}
.preview-thumb-photo{width:61px;height:47px}
.preview-thumb-title{display:block;max-width:65px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;font-weight:800;line-height:1.2;text-align:center}
.preview-thumb-label{font-size:7px;color:#777777;line-height:1.15}
@media(max-width:370px){.preview-thumb{width:65px}.preview-thumb-photo{width:53px;height:43px}.preview-thumb-title{max-width:56px}.sheethead h2{font-size:25px}}

/* ARCHIVE. v1.8 — minimal, mobile-first profile and editor redesign */
/* Profile: larger square photo on the left; username, e-mail and edit button on the right. */
#accountView .profile-center{display:grid;grid-template-columns:clamp(120px,39vw,166px) minmax(0,1fr);align-items:center;column-gap:clamp(10px,3.8vw,22px);text-align:left;padding:19px 0 24px;min-width:0}
#accountView .profile-center .profile-avatar{width:100%;height:auto;aspect-ratio:1;align-self:center;border-radius:0;}
#accountView .profile-details{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;overflow-wrap:anywhere}
#accountView .profile-user{font-size:clamp(22px,6.6vw,33px);line-height:1.12;margin:0;max-width:100%;overflow-wrap:anywhere}
#accountView .profile-email{font-size:clamp(11px,3.15vw,13px);line-height:1.38;color:#777777;margin:7px 0 14px;max-width:100%;overflow-wrap:anywhere}
#accountView .profile-edit-btn{min-width:0;width:min(100%,175px);min-height:42px;padding:9px 7px;font-size:11px;letter-spacing:.035em;text-align:center;white-space:nowrap}
#accountView .profile-section{margin:0 0 14px;padding-top:17px}
@media(min-width:700px){#accountView .profile-center{grid-template-columns:170px minmax(0,1fr);max-width:590px;column-gap:25px}#accountView .profile-user{font-size:35px}#accountView .profile-email{font-size:14px}#accountView .profile-edit-btn{width:175px}}
@media(max-width:350px){#accountView .profile-center{grid-template-columns:110px minmax(0,1fr);column-gap:10px}#accountView .profile-user{font-size:22px}#accountView .profile-edit-btn{font-size:10px;min-height:39px}}

/* Archive tiles stay WHITE, are not buttons, and cannot change archive when tapped. */
#archivesView .archivepick,#archivesView .archivepick.selected{background:#FFFFFF!important;color:#080808!important;cursor:default;transition:none!important}
#archivesView .archivepick:active{transform:none!important}
#archivesView .archive-row-edit{z-index:1}

/* The editor preview sits alongside Title/Date/Location, not beside the modal heading. */
.moment-editor-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(125px,40%);align-items:start;gap:12px;max-width:100%;margin-top:21px}
.moment-editor-fields{min-width:0}
.moment-editor-fields .field{margin:0 0 18px}
.moment-editor-fields .field label{font-size:10px;letter-spacing:.04em;line-height:1.35;min-height:15px}
.moment-editor-fields .date-shell{gap:5px;padding:0 10px}
.moment-editor-fields .date-shell svg{width:17px;height:17px}
.moment-editor-fields .date-label{font-size:13px;min-width:0}
.moment-editor-fields .field input:not([type=file]):not([type=checkbox]){padding:10px}
.moment-editor-fields .location-credit{font-size:8px;line-height:1.4}
.moment-editor-fields .location-results{position:relative;z-index:3}
.moment-preview-wrap{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:7px}
.moment-preview-eyebrow{font-size:10px;line-height:1.35;font-weight:700;letter-spacing:.055em}
.moment-preview-wrap .preview-thumb{width:100%;min-width:0;min-height:246px;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;text-align:left;background:#FFFFFF;border:1.5px solid #080808;padding:7px;box-shadow:2px 2px 0 #080808;color:#080808}
.moment-preview-wrap .preview-thumb-photo{width:100%;height:auto;aspect-ratio:4/5;display:grid;place-items:center;background:#FFFFFF;overflow:hidden}
.moment-preview-wrap .preview-thumb-photo img{width:100%;height:100%;object-fit:cover}
.moment-preview-wrap .preview-thumb-photo>span{font-size:26px}
.moment-preview-wrap .preview-thumb-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;overflow:hidden;max-width:none;font-size:12px;line-height:1.3;margin:9px 2px 4px;text-align:left;overflow-wrap:anywhere}
.moment-preview-wrap .preview-thumb-location{display:block;color:#080808;font-size:9px;line-height:1.3;margin:0 2px 4px;overflow-wrap:anywhere}
.moment-preview-wrap .preview-thumb-date{font-size:9px;line-height:1.25;color:#777777;margin:0 2px 6px;overflow-wrap:anywhere}
.moment-preview-wrap .preview-thumb-label{display:block;font-size:8px;color:var(--blue);font-weight:700;line-height:1.25;letter-spacing:.02em;margin: auto 2px 1px;text-align:left}
/* Selected photo is shown only in the live preview. Keep an unobtrusive remove action. */
.photo-remove-button{display:block;width:max-content;margin:10px 0 0 auto;padding:5px 0;border:0;background:transparent;color:#777777;font-size:10px;font-weight:700;letter-spacing:.045em;text-decoration:underline}
@media(max-width:370px){.moment-editor-top{grid-template-columns:minmax(0,1fr) minmax(118px,40%);gap:9px}.moment-editor-fields .field label{font-size:9px}.moment-editor-fields .date-label{font-size:12px}.moment-preview-wrap .preview-thumb{padding:5px;min-height:223px}.moment-preview-eyebrow{font-size:9px}}
@media(min-width:700px){.moment-editor-top{grid-template-columns:minmax(0,1fr) minmax(165px,36%);gap:20px}.moment-preview-wrap .preview-thumb{min-height:305px}.moment-preview-wrap .preview-thumb-photo{aspect-ratio:1/1}.moment-preview-wrap .preview-thumb-title{font-size:14px}}


/* ARCHIVE. v1.9 — full physical card flip, including all borders and shadows.
   Both sides are COMPLETE polaroids inside the same rotating 3D stage.
   Unlike v1.8, the card's black border is not left behind on the static shell. */
.masonry .polaroid, .masonry.custom-mode .polaroid {
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  -webkit-perspective:1100px;
  perspective:1100px;
}
.flip-stage{
  display:grid;
  grid-template-areas:"card";
  width:100%;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
  transform-origin:center center;
  transition:transform .52s cubic-bezier(.22,.76,.23,1);
}
.flip-face{
  grid-area:card;
  display:block;
  min-width:0;
  width:100%;
  height:100%;
  padding:7px 7px 0;
  background:#FFFFFF;
  border:1px solid #080808;
  box-shadow:2px 2px 0 #080808;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.flip-face-front{
  position:relative;
  transform:rotateY(0deg);
}
.flip-face-back{
  transform:rotateY(180deg);
  pointer-events:none;
}
.flip-face .flip-front{
  display:block;
  width:100%;
  height:100%;
}
.flip-face .flip-back{
  width:100%;
  height:100%;
  transform:none;
  min-height:196px;
}
.polaroid.is-flipped .flip-face-front{pointer-events:none}
.polaroid.is-flipped .flip-face-back{pointer-events:auto}
/* Favorite button belongs to the front surface and turns with it. */
.polaroid.is-flipped .favorite-star{opacity:1;pointer-events:none}
.drag-ghost .flip-face{box-shadow:none}
@media(min-width:700px){.flip-face{padding:10px 10px 0}}
@media(max-width:370px){.flip-face{padding:5px 5px 0}}

/* Pixel-centred vector arrows, independent of font baseline/Unicode glyph metrics. */
.sort{align-items:center}
.sort-arrow{
  flex:none;
  display:grid;
  place-items:center;
  width:20px;
  height:22px;
  line-height:0;
  align-self:center;
  color:var(--blue);
}
.sort-arrow svg{display:block;width:20px;height:22px;stroke-width:1.8}

/* Archive name at the right end of the existing footer line. */
#app .footer{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  font-size:clamp(9px,2.55vw,11px);
  line-height:1.45;
}
.footer-caption{flex:none;white-space:nowrap}
.footer-archive-name{
  min-width:0;
  flex:1;
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
  color:#080808;
}
.footer-archive-name:empty{display:none}
@media(max-width:350px){#app .footer{gap:7px;font-size:9px}}

/* Inactive tabs remain grey; active icon AND its label use ARCHIVE. blue. */
#app .nav button.active:not(.add-nav){color:var(--blue)}
/* Switch the blue active state immediately so it always matches the visible page. */
#app .nav button{transition:transform .22s var(--spring)}


/* ARCHIVE. v2.0 — blue accents and interaction refinements */
/* All branded images now use the approved PHOTO BOX mark; header keeps the original font, blue period. */
.archive-actions .solid{display:flex;align-items:center;justify-content:center;gap:7px}
.archive-action-icon{display:inline-grid;place-items:center;flex:none;color:var(--blue)}
.archive-action-icon svg{width:17px;height:17px;stroke-width:2.4}
/* Back of a flipped moment: black text and black outlines, blue symbolic actions only. */
.flip-back .card-action svg{color:var(--blue)}
.flip-back .back-link{color:var(--blue)}

/* Closing X runs the reverse of opening: full white sheet moves DOWN, backdrop fades. */
.modal.is-closing{pointer-events:auto}
.modal .sheet{transition:transform .34s cubic-bezier(.4,0,.7,1)}
.modal.is-open .sheet{transition:transform .41s cubic-bezier(.22,1,.36,1)}
.modal .modal-backdrop{transition:opacity .34s ease}
/* Live preview and photo crop use matching slide transitions, including their cancel actions. */
.preview-overlay,.crop-overlay{
 opacity:1;
 transform:translate3d(0,105%,0);
 transition:transform .33s cubic-bezier(.4,0,.7,1);
 will-change:transform;
}
.preview-overlay.is-open,.crop-overlay.is-open{
 transform:translate3d(0,0,0);
 transition:transform .37s cubic-bezier(.22,1,.36,1);
}
.preview-overlay.is-closing,.crop-overlay.is-closing{pointer-events:auto}

/* A location search must NOT increase the sheet height or reveal a second
   scrollable page. Only the suggestions themselves may scroll. */
.moment-editor-fields .location-field{z-index:24}
.moment-editor-fields .location-results{
 position:absolute;
 z-index:40;
 left:0;
 right:0;
 width:100%;
 max-height:min(188px,30dvh);
 overflow-y:auto;
 overscroll-behavior:contain;
 -webkit-overflow-scrolling:touch;
 box-shadow:2px 3px 0 #080808;
 border:1px solid #080808;
 background:#FFFFFF;
}
.modal.location-locked .sheet{overflow-y:hidden!important;overscroll-behavior-y:none!important}
.modal.location-locked{overscroll-behavior:none}
/* Defensive: fixed app screen may never scroll behind modal while editing location. */
body.modalopen #pageScroller{overscroll-behavior:none}
@media(prefers-reduced-motion:reduce){
 .modal .sheet,.preview-overlay,.crop-overlay{transition-duration:0ms!important}
}


/* ARCHIVE. v2.1 — moment images are inseparable from their polaroid cards.
   Native iOS image long-press/callout is suppressed, while the card keeps the
   touchstart events needed to trigger the existing CUSTOM reorder gesture. */
#masonry .polaroid, #searchResults .polaroid,
#masonry .polaroid *, #searchResults .polaroid * {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
#masonry .flip-image, #searchResults .flip-image {
  pointer-events:none;
  -webkit-user-drag:none;
  user-drag:none;
}
/* More breathing room on the right of the archive edit action, without
   changing its size or losing space for the archive name. */
#archivesView .archive-row-edit { right:17px; }
#archivesView .archivepick { padding-right:59px; }

/* TRIPS. v1.0: brand typography, green accents and the SPOTS.-inspired app shell */
:root{--blue:#166F00;--accent:#166F00;--accent-dark:#166F00;--ink:#080808;--paper:#FFFFFF;--muted:#777777}
body,button,input,textarea,select{font-family:'Arimo',Arial,sans-serif}
h1,h2,h3,h4,.anton,.manage-name,.profile-user,.flip-back-title,.section-title{font-family:'Archivo Black','Trebuchet MS',sans-serif;font-weight:800;letter-spacing:-.018em}
.accent-dot{color:var(--accent);font-weight:inherit}
.header .wordmark{width:auto!important;max-width:48vw;font-family:'Archivo Black','Trebuchet MS',sans-serif;font-size:clamp(29px,8.3vw,42px);letter-spacing:-.075em;font-weight:800;white-space:nowrap;line-height:1}
.brand-text{font-family:'Archivo Black','Trebuchet MS',sans-serif;font-weight:800;letter-spacing:-.055em;color:#080808;font-size:clamp(29px,8.4vw,44px);line-height:1;display:block}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:7px;width:min(54vw,196px);max-width:196px}.splash-inner .track{width:100%;margin-top:14px}.splash-brand-icon{display:block;width:82px;height:82px}.splash-brand-icon img{width:100%;height:100%;object-fit:contain}
.auth-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:0 auto 36px}.auth-brand img{height:88px;width:88px;object-fit:contain}.auth-brand .brand-text{font-size:34px}
.authpage:has(#confirmWrap:not([hidden])) .auth-brand{margin-bottom:23px}
@media(max-height:690px){.auth-brand{margin-bottom:13px}.auth-brand img{height:60px;width:60px}}
.sort-arrow,.archive-switch-chevron,.archive-switch-check,.custom-hint svg,.card-location svg{color:var(--accent-dark)}
.nav button.active{color:#080808!important;position:relative}.nav button.active svg{stroke:#080808}.nav button.active::after{content:'';position:absolute;width:14px;height:3px;background:var(--accent);border-radius:2px;bottom:1px;left:calc(50% - 7px)}.nav .add-nav::after{display:none!important}.nav .plus{background:#080808}.nav .plus svg{color:var(--accent)!important}
.profile-archive-arrow,.archive-action-icon,.archive-row-edit,.manage-archive,.card-action svg{color:#080808!important}.archive-row-edit,.manage-archive{background:#166F00}.archive-row-edit svg,.manage-archive svg{stroke:#080808}.archive-action-icon svg{stroke:#166F00}
.flip-back .back-link{color:#080808;text-decoration-color:var(--accent);text-decoration-thickness:3px}.card-action svg{color:var(--accent-dark)!important}
.spot-status-filters{display:flex;flex-wrap:wrap;gap:7px;margin:-3px 0 15px}.spot-status-chip{border:1px solid #080808;background:#FFFFFF;padding:8px 10px;min-height:34px;font:700 10px 'Arimo',Arial,sans-serif;letter-spacing:.03em;white-space:nowrap}.spot-status-chip.is-active{background:#166F00;color:#080808}.spot-badges{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:7px 0 1px}.spot-badge{font:700 9px 'Arimo',Arial,sans-serif;letter-spacing:.02em;padding:3px 5px;background:#FFFFFF;color:#080808;border:1px solid #FFFFFF}.spot-badge.status{background:#166F00;border-color:#166F00;color:#080808;margin:0;min-height:0}.spot-rating{font:800 10px 'Arimo',Arial,sans-serif;color:#080808;padding-top:5px}.spot-rating .rating-star{color:#166F00}
.spot-select{width:100%;height:48px;padding:11px 12px;border:1.5px solid #080808;border-radius:0;background:#FFFFFF;color:#080808;font-size:16px!important}.spot-editor-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.spot-editor-options .field{margin-top:5px}.location-required{color:#080808;font-weight:700}.list-manager-link{margin:14px 0 24px}.empty h2{line-height:1.1}.profile-section{font-weight:800}
@media(max-width:370px){.spot-status-filters{gap:4px}.spot-status-chip{padding:7px 8px;font-size:9px}}

/* Brand surface and precise control details. */
.modal .close,.preview-overlay .close{background:#166F00;color:#080808}.modal .close svg,.preview-overlay .close svg{stroke:#080808}.field .search-entry svg,.location-clear,.location-selected-pin{color:#166F00}.spot-rating .rating-star{color:#166F00}.spot-badge.status{color:#080808}.footer{font-family:'Arimo',Arial,sans-serif}.date-shell svg{color:#166F00}
/* Ported SPOTS. Modern Smooth design system, adapted for TRIPS. */
:root{
  --ink:#080808;--paper:#FFFFFF;--muted:#777777;--accent:#166F00;--blue:#166F00;
  --accent-dark:#166F00;--r-small:10px;--r-field:16px;--r-card:24px;
  --shadow-soft:0 9px 23px rgba(8,8,8,.10);--shadow-pop:0 12px 28px rgba(8,8,8,.15);
}
html,body,#app{background:#FFFFFF;color:#080808}
button,input,textarea,select{font-family:'Arimo',Arial,sans-serif}
h1,h2,h3,h4,.profile-user,.section-title,.flip-back-title,.manage-name{font-family:'Archivo Black','Trebuchet MS',sans-serif;font-weight:800}
button:focus-visible,input:focus-visible,textarea:focus-visible,.combo-trigger:focus-visible{outline:2px solid #080808;outline-offset:3px}
.solid,.outline{border:1.5px solid #080808;border-radius:16px;min-height:46px;letter-spacing:.025em;font-weight:700;transition:transform .22s var(--spring),box-shadow .22s var(--spring),background .22s ease}
.solid{background:#080808;color:#FFFFFF}.outline{background:#FFFFFF;color:#080808}
.solid:not(:disabled):active,.outline:not(:disabled):active{transform:scale(.97)}
.solid:not(:disabled):hover,.outline:not(:disabled):hover{box-shadow:0 4px 11px rgba(8,8,8,.13)}
.field label{font-size:11px;letter-spacing:.035em;color:#080808;font-weight:700;margin-bottom:6px}
.field input:not([type=file]):not([type=checkbox]),.field textarea{
  background:#FFFFFF;border:1.5px solid #080808;border-radius:16px;color:#080808;box-shadow:none;
  transition:border-color .2s,box-shadow .2s;resize:none
}
.field input:focus,.field textarea:focus{border-color:#080808;outline:2px solid #166F00;outline-offset:0;box-shadow:0 0 0 2px #166F00}
.field input::placeholder,.field textarea::placeholder{color:#777777}
.header{border-bottom:2px solid #080808;padding-bottom:14px}
.archive-switch-btn{border:1.5px solid #080808;border-radius:16px;box-shadow:0 4px 10px rgba(8,8,8,.06);height:48px;gap:8px}
.archive-switch-photo,.archive-switch-photo-frame{border-radius:9px;overflow:hidden}
.archive-switch-menu{border:1.5px solid #080808;border-radius:17px;box-shadow:var(--shadow-pop);overflow:hidden;padding:6px}
.archive-switch-option{border-radius:11px;transition:background .18s ease}
.archive-switch-option.is-active{background:#166F00;color:#080808}
.archive-switch-chevron,.archive-switch-check,.sort-arrow,.custom-hint svg,.profile-archive-arrow{color:#166F00!important;stroke:#166F00!important;opacity:1!important;filter:none!important}
.archive-switch-btn svg,.sort-arrow svg,.custom-hint svg{stroke:#166F00!important;filter:none!important;opacity:1!important}
.intro{border-bottom:1.5px solid #080808}
.intro h1{letter-spacing:-.035em}
.tabs{gap:7px}.tab{border:1px solid #080808;border-radius:13px;padding:10px 13px;background:#FFFFFF;transition:background .2s,transform .2s}
.tab.active{background:#166F00;color:#080808}
.sort{border:1.5px solid #080808;border-radius:14px;min-height:42px;padding:9px 12px;gap:6px}
.sort-menu{border:1.5px solid #080808;border-radius:15px;box-shadow:var(--shadow-pop);overflow:hidden;padding:4px}
.sort-menu button{border:0;border-radius:10px;font-size:12px}
.sort-menu button[aria-selected=true]{background:#166F00;color:#080808}
.spot-status-filters{gap:7px;flex-wrap:wrap}
.spot-status-chip{border:1px solid #080808;border-radius:999px;min-height:37px;background:#080808;color:#166F00!important;padding:9px 13px;font-size:10px}
.spot-status-chip.is-active{background:#166F00!important;color:#080808!important}
/* Entire physical spot card rotates: both sides receive matching curved edges. */
.masonry .polaroid,.masonry.custom-mode .polaroid{border:0;box-shadow:none;background:transparent;border-radius:24px;overflow:visible;padding:0}
.flip-face{border:1px solid #080808;background:#FFFFFF;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-soft);padding:7px 7px 0}
.flip-face-front,.flip-face-back{border-radius:24px}
.flip-face .flip-back{border-radius:24px}
.flip-image{border-radius:17px;display:block;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;pointer-events:none}
.favorite-star{border:1.5px solid #080808;border-radius:12px;right:13px;top:13px;background:#FFFFFF;box-shadow:0 2px 8px rgba(8,8,8,.11)}
.favorite-star.is-favorite{background:#166F00}
.favorite-star svg,.card-location svg,.spot-rating .rating-star{color:#166F00;stroke:#080808}
.polaroid-foot{padding:11px 5px 15px}
.polaroid-foot strong{font-family:'Archivo Black','Trebuchet MS',sans-serif;font-weight:700;line-height:1.18;font-size:clamp(14px,3.8vw,19px)}
.spot-badges{gap:5px}.spot-badge{border:1px solid #080808;border-radius:999px;background:#FFFFFF;color:#080808;padding:4px 7px;font-size:9px}
.spot-badge.status{background:#166F00;color:#080808}
.spot-rating,.card-story,.card-date{color:#777777}
.flip-back{border-radius:24px;gap:10px;padding:16px 9px}
.flip-back-title{font-size:clamp(19px,4.5vw,27px)}
.card-action,.delete-confirm button{border:1px solid #080808;border-radius:12px;background:#FFFFFF;color:#080808;padding:9px 7px}
.card-action svg{color:#166F00!important;stroke:#166F00!important}
.flip-back .back-link{color:#080808;text-decoration-color:#166F00;text-decoration-thickness:3px}
.delete-confirm button.yes{background:#080808;color:#FFFFFF}
.drag-ghost .flip-face{box-shadow:var(--shadow-pop)!important}
/* LIST archive collection */
.archive-list{gap:12px}
.archivepick{border:1.5px solid #080808;border-radius:20px;min-height:105px;background:#FFFFFF;padding:12px 61px 12px 12px;box-shadow:var(--shadow-soft)}
.archive-cover{border:1px solid #080808;border-radius:14px;overflow:hidden}
.archive-info strong{font-family:'Archivo Black','Trebuchet MS',sans-serif;font-weight:800;line-height:1.15;font-size:clamp(18px,4.6vw,25px)}
.archive-row-edit{right:17px!important;border:1.5px solid #080808;border-radius:13px;background:#166F00;color:#080808;box-shadow:0 3px 10px rgba(8,8,8,.07)}
.archive-row-edit svg{stroke:#080808!important}
.archive-actions .solid{border-radius:17px;min-height:57px}
.archive-action-icon,.archive-action-icon svg{color:#166F00!important;stroke:#166F00!important;opacity:1!important}
#inviteBox,.card{border:1.5px solid #080808;border-radius:22px;box-shadow:var(--shadow-soft)}
.profile-center{border-radius:22px}
.profile-avatar,.profile-avatar img,#accountView .profile-avatar,#accountView .profile-avatar img{border-radius:19px!important}
.profile-archive,.manage-archive,.account-archive-row{border-radius:16px}
.profile-archive{border:1px solid #080808;box-shadow:0 4px 12px rgba(8,8,8,.07)}
.manage-archive{border:1px solid #080808;background:#166F00;color:#080808}
.archive-cover-preview,.crop-frame,.preview-full-card{border-radius:21px;overflow:hidden}
.profile-remove{border-radius:12px}
/* Floating detached navigation with black outline. Keep space below it for safe-area. */
#app .nav{
 position:fixed!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;
 left:12px!important;right:12px!important;width:auto!important;max-width:565px!important;margin-inline:auto!important;
 height:76px!important;padding:7px 8px!important;display:flex!important;align-items:center!important;
 border:1.8px solid #080808!important;border-radius:25px!important;background:#FFFFFF!important;
 box-shadow:0 9px 24px rgba(8,8,8,.16)!important;gap:0!important;z-index:40!important;
}
#app .nav::before{display:none!important}
#app .nav button{flex:1 1 0;min-width:0;width:auto;max-width:none;min-height:57px;gap:4px;font-size:clamp(8px,2.1vw,10px);letter-spacing:0;color:#777777;position:relative}
#app .nav button.active,#app .nav button.active svg{color:#080808!important;stroke:#080808!important}
#app .nav button.active::after{background:#166F00;bottom:2px;height:4px;border-radius:6px}
#app .nav .add-nav::after{display:none!important}
#app .nav .plus{display:grid;place-items:center;width:52px;height:52px;background:#080808;border-radius:17px;box-shadow:0 4px 10px rgba(8,8,8,.18);transition:transform .24s var(--spring),border-radius .24s var(--spring)}
#app .nav .plus svg{width:28px;height:28px;stroke:#166F00!important;color:#166F00!important}
#app .nav .add-nav:active .plus{transform:scale(.92);border-radius:20px}
#pageScroller{padding-bottom:calc(var(--archive-nav-clearance) + 44px + env(safe-area-inset-bottom))!important}
.notice{bottom:calc(106px + env(safe-area-inset-bottom));background:#080808;color:#FFFFFF;border-radius:15px;box-shadow:var(--shadow-soft)}
.footer{border-top:1.5px solid #080808;color:#777777}
/* Modal sheets and overlays: smooth corners, consistent white surface. */
.modal .sheet{border-radius:26px 26px 0 0;background:#FFFFFF;box-shadow:0 -8px 28px rgba(8,8,8,.12)}
.modal .modal-backdrop{background:rgba(8,8,8,.15)}
.sheethead{border-bottom:1.5px solid #080808}
.sheethead h2{font-family:'Archivo Black','Trebuchet MS',sans-serif;font-weight:800}
.modal .close,.preview-overlay .close{border-radius:13px;background:#166F00;color:#080808}
.modal .close svg,.preview-overlay .close svg{stroke:#080808}
.preview-panel,.crop-panel{border-radius:22px}
.crop-frame{border:1.5px solid #080808}
/* Native selects are kept only as hidden values; this portal owns interaction. */
.select-native-hidden{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)!important}
.combo-wrap{position:relative;width:100%}
.combo-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;width:100%;height:44px;min-height:44px;padding:9px 11px;border:1.5px solid #080808;border-radius:14px;background:#FFFFFF;color:#080808;font-size:13px;font-weight:600;transition:background .2s,box-shadow .2s}
.combo-trigger.is-open{background:#166F00;box-shadow:0 3px 12px rgba(8,8,8,.09)}
.combo-trigger svg{width:17px;height:17px;stroke:#080808;flex:none;transition:transform .2s var(--spring)}
.combo-trigger.is-open svg{transform:rotate(180deg)}
.combo-current{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-panel{position:fixed;z-index:1000;background:#FFFFFF;color:#080808;border:1.5px solid #080808;border-radius:17px;box-shadow:var(--shadow-pop);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:5px;opacity:0;transform:translateY(-7px) scale(.985);transition:opacity .18s ease,transform .18s var(--spring)}
.combo-panel.is-open{opacity:1;transform:translateY(0) scale(1)}
.combo-panel.is-closing{opacity:0;transform:translateY(-4px) scale(.99);pointer-events:none}
.combo-option{width:100%;min-height:43px;padding:10px 13px;border:0;border-radius:11px;background:#FFFFFF;color:#080808;display:flex;justify-content:space-between;align-items:center;text-align:left;gap:10px;font-size:12px;font-weight:650;cursor:pointer}
.combo-option[aria-selected="true"]{background:#166F00;color:#080808}
.combo-option:not([aria-selected="true"]):active{background:#166F00}
.combo-check{opacity:0;color:#080808;font-weight:800;font-size:16px}.combo-option[aria-selected="true"] .combo-check{opacity:1}
/* Fast optional location search, stays above every field without shifting layout. */
.moment-editor-fields .location-field{position:relative;z-index:10}
.moment-editor-fields .location-results{position:absolute;left:0;right:0;top:calc(100% - 4px);width:100%;max-height:min(180px,27dvh);overflow-y:auto;border:1.5px solid #080808;border-radius:0 0 16px 16px;box-shadow:var(--shadow-pop);background:#FFFFFF;z-index:50}
.location-choice{border:0;border-bottom:1px solid #FFFFFF;display:flex;align-items:center;gap:7px;text-align:left;padding:9px 10px;border-radius:12px}
.location-choice:active{background:#166F00}
.location-choice strong{font-size:11px}.location-choice small,.location-hint{font-size:10px;color:#777777}
.location-manual{background:#166F00;color:#080808}.location-manual-icon{background:#080808;color:#166F00;border-radius:9px;display:grid;place-items:center;width:21px;height:21px;flex:none;font-size:17px;font-weight:700}
.location-selected{border:1px solid #080808;border-radius:13px;margin:0;background:#FFFFFF;padding:8px;min-height:43px}
.location-selected-pin,.location-clear,.location-selected-pin svg{color:#166F00;stroke:#166F00}
/* Compact New Spot editor: no document or sheet vertical scrolling. */
.modal.spot-editor-open .sheet{
 height:calc(100dvh - env(safe-area-inset-top));max-height:calc(100dvh - env(safe-area-inset-top));
 padding:10px 15px calc(12px + env(safe-area-inset-bottom));overflow:hidden!important;display:flex;flex-direction:column;
}
.modal.spot-editor-open .sheethead{flex:0 0 auto;padding:0 0 9px;min-height:49px;position:relative}
.modal.spot-editor-open .sheethead h2{font-size:clamp(25px,6.5vw,36px)}
.modal.spot-editor-open #modalBody{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
#momentForm{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;gap:clamp(5px,1.1dvh,10px);margin-top:10px}
#momentForm .field{margin:0;min-width:0;flex-shrink:0}
#momentForm .field label{font-size:clamp(9px,2.4vw,11px);margin-bottom:5px;line-height:1.15;min-height:0;white-space:nowrap}
#momentForm .field input:not([type=file]):not([type=checkbox]){height:43px;min-height:43px;padding:8px 10px;font-size:16px!important}
#momentForm .field textarea{min-height:53px!important;height:clamp(53px,8.6dvh,80px);max-height:85px;padding:8px 11px;line-height:1.32;font-size:16px!important}
#momentForm .moment-editor-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(126px,40%);gap:10px;align-items:stretch;margin:0;flex:1 1 205px;min-height:160px;max-height:340px;overflow:visible}
#momentForm .moment-editor-fields{display:flex;flex-direction:column;justify-content:flex-start;gap:13px;min-height:0}
#momentForm .moment-editor-fields .field{margin:0}
#momentForm .location-credit{font-size:9px;line-height:1.35;margin-top:5px;color:#777777}
#momentForm .moment-preview-wrap{min-height:0;display:flex;flex-direction:column;gap:5px}
#momentForm .moment-preview-eyebrow{font-size:10px;min-height:13px;letter-spacing:.015em}
#momentForm .moment-preview-wrap .preview-thumb{flex:1 1 auto;min-height:0;height:100%;border:1px solid #080808;border-radius:17px;background:#FFFFFF;box-shadow:0 4px 15px rgba(8,8,8,.09);padding:5px;overflow:hidden}
#momentForm .preview-thumb-photo{border-radius:12px;min-height:0;max-height:none;aspect-ratio:auto;flex:1 1 auto;overflow:hidden;background:#FFFFFF}
#momentForm .preview-thumb-photo img{border-radius:12px;height:100%;object-fit:cover}
#momentForm .preview-thumb-title{font-family:'Archivo Black','Trebuchet MS',sans-serif;font-size:clamp(11px,2.8vw,16px);line-height:1.2;margin:5px 1px 2px}
#momentForm .preview-thumb-location,#momentForm .preview-thumb-date{font-size:9px;margin:1px}
#momentForm .preview-thumb-label{color:#166F00!important;letter-spacing:0;margin:3px 1px 2px;font-size:9px;text-shadow:0 0 0 #080808}
#momentForm .spot-editor-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:0 0 auto}
#momentForm .spot-editor-options .field{margin:0}
#momentForm #ratingWrap{flex:0 0 auto}
#momentForm #ratingWrap:not([hidden]){width:100%}
#momentForm .spot-notes-field{flex:0 0 auto}
#momentForm .spot-photo-field{flex:0 0 auto}
#momentForm .add-photo{min-height:43px;height:43px;border-radius:14px;background:#FFFFFF;gap:7px}
#momentForm .add-photo svg{color:#166F00;stroke:#166F00;opacity:1}
#momentForm #photoRemove:not([hidden]){margin:0;position:absolute;right:14px;font-size:9px}
#momentForm .spot-photo-field{position:relative}
#momentForm #saveMoment{flex:0 0 auto;min-height:45px;padding:8px 12px;border-radius:15px;background:#080808;color:#FFFFFF}
#momentForm #formStatus{flex:0 0 auto;margin:0!important;padding:0;min-height:0;max-height:29px;overflow:hidden;font-size:11px;line-height:1.25;color:#080808}
.modal.spot-editor-open.location-locked .sheet{overflow:hidden!important}
@media(max-width:370px){
 #app .nav{left:9px!important;right:9px!important;height:69px!important;border-radius:22px!important;padding:6px!important}
 #app .nav button{font-size:8px;min-height:50px}#app .nav .plus{width:45px;height:45px;border-radius:15px}
 .modal.spot-editor-open .sheet{padding:7px 11px calc(8px + env(safe-area-inset-bottom))}
 #momentForm{gap:5px;margin-top:7px}
 #momentForm .moment-editor-top{grid-template-columns:minmax(0,1fr) minmax(110px,41%);gap:8px;min-height:143px}
 #momentForm .moment-editor-fields{gap:8px}
 #momentForm .field label{font-size:9px;margin-bottom:3px}
 #momentForm .field input:not([type=file]):not([type=checkbox]),#momentForm .combo-trigger{height:39px;min-height:39px}
 #momentForm .field textarea{height:52px;min-height:52px!important}
 #momentForm .add-photo{height:39px;min-height:39px}
 #momentForm #saveMoment{min-height:42px}
 #momentForm .moment-preview-wrap .preview-thumb{padding:4px}
}
@media(max-height:730px){
 .modal.spot-editor-open .sheet{padding-top:7px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
 .modal.spot-editor-open .sheethead{min-height:44px;padding-bottom:7px}
 #momentForm{margin-top:7px;gap:5px}
 #momentForm .moment-editor-fields{gap:8px}
 #momentForm .moment-editor-top{min-height:140px}
 #momentForm .field textarea{height:51px;min-height:51px!important}
 #momentForm #saveMoment{min-height:41px}
 #momentForm .location-credit{font-size:8px}
}
@media(min-width:700px){
 .modal.spot-editor-open .sheet{height:min(90dvh,780px);max-height:min(90dvh,780px);border:1.5px solid #080808;border-radius:26px;padding:14px 24px 20px}
 #momentForm .moment-editor-top{grid-template-columns:minmax(0,1fr) minmax(180px,34%);gap:19px}
 #momentForm .moment-editor-fields{gap:14px}
}
@media(prefers-reduced-motion:reduce){.combo-panel,.combo-trigger,#app .nav .plus{transition:none!important}}
/* Use the available vertical space evenly without introducing a page scroller. */
#momentForm{justify-content:space-between}

/* Ported refinements: alignment, navigation, private Tripmates, location and all sheet corners */
/* 2: the selected list icon uses only the official mark. Do not stack borders. */
.archive-switch-photo,.archive-switch-photo-frame{border:0!important;background:#FFFFFF!important;box-shadow:none!important;padding:0!important;display:grid!important;place-items:center!important;overflow:hidden;border-radius:11px!important}
.archive-switch-photo.is-default,.archive-switch-photo-frame img.is-default{object-fit:contain!important;object-position:center!important;padding:3px!important;background:#FFFFFF!important;mix-blend-mode:normal!important;filter:none!important}
.archive-switch-photo-frame img{width:100%!important;height:100%!important;object-fit:cover}
.archive-switch-option.is-active .archive-switch-photo-frame{background:#FFFFFF!important}
/* 4: color the actual TURN BACK text, never an underline */
.flip-back .back-link{color:#166F00!important;text-decoration:none!important;border-bottom:0!important;font-weight:800!important;letter-spacing:.02em}
/* 5: active icon AND label are green; remove every underline indicator. */
#app .nav button.active:not(.add-nav),#app .nav button.active:not(.add-nav) span{color:#166F00!important}
#app .nav button.active:not(.add-nav) svg{color:#166F00!important;stroke:#166F00!important}
#app .nav button.active::after,#app .nav button.active::before{display:none!important;content:none!important}
#app .nav button:not(.active):not(.add-nav),#app .nav button:not(.active):not(.add-nav) svg{color:#777777!important;stroke:#777777!important}
/* 6: Tripmates get their own real section, only people connected through shared lists. */
.tripmates-section{margin-top:26px;padding-top:22px;border-top:1.5px solid #080808}
.tripmates-heading{margin:0 0 8px!important}
.tripmates-description{font-size:12px;color:#777777;margin:0 0 18px}
.tripmates-list{display:grid;gap:10px;margin-bottom:24px}
.tripmate-card{display:flex;align-items:center;gap:13px;padding:12px 13px;background:#FFFFFF;border:1.5px solid #080808;border-radius:20px;box-shadow:0 5px 12px rgba(8,8,8,.07)}
.tripmate-avatar{flex:0 0 49px;width:49px;height:49px;background:#166F00;border-radius:16px;display:grid;place-items:center;overflow:hidden;color:#080808;font:800 24px 'Archivo Black',sans-serif}
.tripmate-avatar img{width:100%;height:100%;object-fit:cover}
.tripmate-details{flex:1;min-width:0;display:grid;gap:3px}
.tripmate-details strong{font-size:13px;color:#080808;overflow-wrap:anywhere}
.tripmate-details small{font-size:11px;color:#777777;overflow-wrap:anywhere;line-height:1.4}
.tripmate-count{font-size:10px;font-weight:800;color:#080808;white-space:nowrap}
.tripmates-empty{color:#777777;font-size:12px;line-height:1.6;padding:18px 14px;margin:0;border:1px solid #080808;border-radius:17px}
/* 7: compact, readable geocoder choices (results first, optional manual entry last). */
#momentForm .location-field{isolation:isolate}
#momentForm .location-results{position:absolute;top:calc(100% + 4px)!important;left:0;right:0;z-index:60;border:1.5px solid #080808!important;border-radius:16px!important;box-shadow:0 12px 25px rgba(8,8,8,.14)!important;background:#FFFFFF;overflow-y:auto;max-height:min(242px,36dvh);padding:5px;animation:dropIn .18s var(--spring) both}
.location-results-heading{font-size:9px;font-weight:800;letter-spacing:.07em;color:#777777;padding:7px 10px 4px}
.location-choice{background:#FFFFFF!important;border:0!important;min-height:44px;padding:9px 10px!important;display:flex;align-items:center;text-align:left;gap:9px;border-radius:11px!important;transition:background-color .16s ease}
.location-choice:hover,.location-choice:focus-visible{background:#FFFFFF!important;box-shadow:inset 0 0 0 2px #166F00;outline:none}
.location-choice-copy{display:block;min-width:0;flex:1;text-align:left}
.location-choice strong{font-size:11px!important;line-height:1.3;font-weight:750;display:block;overflow-wrap:anywhere}
.location-choice small{display:block;color:#777777!important;font-size:10px!important;line-height:1.35;overflow-wrap:anywhere;margin-top:2px}
.location-result-pin{width:29px;height:29px;display:grid;place-items:center;flex:none;border-radius:10px;background:#166F00;color:#080808}
.location-result-pin svg{width:16px;height:16px;stroke:#080808}
.location-results-divider{height:1px;background:#777777;margin:5px 8px;opacity:.36}
.location-choice.location-manual{background:#FFFFFF!important;color:#080808!important}
.location-manual-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:10px;background:#080808;color:#166F00;flex:none}
.location-manual-icon svg{width:17px;height:17px;stroke:#166F00}
.location-option-arrow{font-size:18px;font-weight:500;color:#080808;align-self:center}
.location-hint{color:#777777!important;font-size:10px;line-height:1.4;padding:9px 11px}
/* 8+10: entirely white safe-area and sheet background; no gray corner wedges or mixed surfaces. */
@media(max-width:699px){
 .modal{background:#FFFFFF!important;isolation:isolate}
 .modal .modal-backdrop{background:#FFFFFF!important;opacity:1!important}
 .modal .sheet{background:#FFFFFF!important;box-shadow:none!important;border-radius:26px 26px 0 0!important;overflow-x:hidden!important;isolation:isolate}
 .preview-overlay,.crop-overlay{background:#FFFFFF!important}
}
/* 9: fill left-hand whitespace while keeping right-hand live preview. */
#momentForm .moment-editor-top{flex:1 1 auto!important;max-height:none!important;min-height:0!important;align-items:stretch!important;grid-template-columns:minmax(0,1fr) minmax(115px,40%)!important;gap:11px!important}
#momentForm .moment-editor-fields{display:flex!important;flex-direction:column;justify-content:flex-start;gap:clamp(8px,1.4dvh,12px)!important;min-height:0;min-width:0;overflow:visible}
#momentForm .moment-editor-fields .spot-editor-options{display:flex!important;flex-direction:column!important;gap:clamp(6px,1dvh,9px)!important;min-width:0}
#momentForm .moment-editor-fields .spot-editor-options .field{width:100%;min-width:0}
#momentForm .moment-editor-fields .spot-notes-field{display:flex;flex:1 1 auto!important;min-height:49px;flex-direction:column;min-width:0;overflow:hidden}
#momentForm .moment-editor-fields .spot-notes-field textarea{flex:1 1 auto;min-height:47px!important;height:auto!important;max-height:none!important;resize:none;overflow-y:auto}
#momentForm .moment-editor-fields #ratingWrap:not([hidden]){flex:0 0 auto}
#momentForm .moment-preview-wrap{height:100%!important;min-height:0}
#momentForm .moment-preview-wrap .preview-thumb{min-height:0;max-height:100%!important;overflow:hidden}
#momentForm .moment-preview-wrap .preview-thumb-photo{min-height:0}
#momentForm .spot-photo-field{flex-shrink:0}
#momentForm .spot-notes-field label{white-space:normal}
@media(max-width:370px), (max-height:730px){
 #momentForm .moment-editor-fields{gap:6px!important}
 #momentForm .moment-editor-fields .spot-editor-options{gap:5px!important}
 #momentForm .moment-editor-top{gap:7px!important;grid-template-columns:minmax(0,1fr) minmax(110px,41%)!important}
 #momentForm .moment-editor-fields .spot-notes-field{min-height:42px}
 #momentForm .location-credit{font-size:8px!important;line-height:1.22!important;margin-top:3px!important}
 #momentForm .moment-editor-fields .spot-notes-field textarea{min-height:42px!important;padding:7px!important}
}
@media(min-width:700px){#momentForm .moment-editor-top{grid-template-columns:minmax(0,1fr) minmax(180px,34%)!important}}

/* Ported visual refinements; retain the smooth rounded TRIPS. style. */
:root{--blue:#166F00;--accent:#166F00;--accent-dark:#166F00}
/* Header: larger mark, contextual control. */
#app .header .wordmark{font-size:clamp(34px,9.45vw,53px)!important;line-height:1!important;letter-spacing:-.072em!important;max-width:52vw!important;flex:0 0 auto}
#app .header{gap:10px;min-height:72px}
#app .archive-switch-area[hidden],#app .header-static-icon[hidden]{display:none!important}
#app .archive-switch-area{min-width:0;flex:1}
#app .archive-switch-btn{max-width:100%;min-width:0}
#app .archive-switch-label{max-width:clamp(55px,23vw,200px);overflow:hidden;text-overflow:ellipsis}
#app .header-static-icon:not([hidden]){width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;background:#FFFFFF;border:0;pointer-events:none;user-select:none}
#app .header-static-icon img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
/* Permanently CUSTOM sorting, independent category / favorites / status filters. */
#momentsView .bar{display:flex;gap:9px;align-items:center;justify-content:space-between;min-width:0}
#momentsView .tabs{display:flex;gap:8px;min-width:0;flex:1;flex-wrap:nowrap;align-items:center}
#momentsView .tabs .tab{height:44px;min-height:44px;border:1.5px solid #080808;background:#FFFFFF;border-radius:15px;padding:10px 13px;color:#080808;font-size:11px;white-space:nowrap}
#momentsView .tabs .tab.active{background:#166F00;color:#080808}
#momentsView .tabs .tab[data-filter="favorite"]{flex:0 0 auto}
#momentsView .category-filter{position:relative;flex:1 1 auto;min-width:0;max-width:170px}
#momentsView .tabs .category-filter-button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:5px;padding-inline:12px;background:#166F00!important;color:#080808!important;min-width:0}
#momentsView .category-filter-button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#momentsView .category-filter-button svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:#080808;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;transition:transform .22s ease}
#momentsView .category-filter-button[aria-expanded="true"] svg{transform:rotate(180deg)}
#momentsView .category-filter-menu{position:absolute;top:calc(100% + 8px);left:0;width:min(244px,calc(100vw - 40px));max-height:min(380px,52dvh);padding:6px;overflow-y:auto;border:1.5px solid #080808;border-radius:18px;background:#FFFFFF;box-shadow:0 10px 25px rgba(0,0,0,.16);z-index:95;animation:dropIn .18s ease both;overscroll-behavior:contain}
#momentsView .category-filter-menu[hidden]{display:none!important}
#momentsView .category-filter-option{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:43px;width:100%;padding:9px 12px;border:0;border-radius:12px;text-align:left;background:#FFFFFF;color:#080808;font-size:11px;font-weight:700}
#momentsView .category-filter-option.selected{background:#166F00}
#momentsView .category-filter-option:active,#momentsView .category-filter-option:focus-visible{background:#166F00;outline:0}
#momentsView .category-filter-option span{font-size:17px}
#momentsView .static-sort{display:inline-flex;align-items:center;justify-content:center;height:44px;min-height:44px;padding:10px 12px;background:#FFFFFF;color:#080808;border:1.5px solid #080808;border-radius:15px;font-size:11px;font-weight:750;pointer-events:none;user-select:none}
#momentsView .custom-hint{display:flex;gap:7px}
#momentsView .sort-wrap{margin:0;flex:0 0 auto}
#momentsView .sort-menu{display:none!important}
/* Favorite action always white with black star, selected = filled outline = empty. */
.favorite-star,.favorite-star.is-favorite,.favorite-star:hover,.favorite-star:active{background:#FFFFFF!important;color:#080808!important;border-color:#080808!important}
.favorite-star svg,.favorite-star.is-favorite svg{stroke:#080808!important;fill:none!important}
.favorite-star svg path{fill:transparent!important}
.favorite-star.is-favorite svg path{fill:#080808!important}
/* No dates anywhere in user-visible spot cards or previews. */
.card-date,.preview-thumb-date,#previewFullDate{display:none!important}
/* Account lists have exactly the same thumbnail style as LIST. */
#accountView .profile-archive{display:flex;align-items:center;gap:11px;padding:10px 12px;min-height:91px}
#accountView .account-list-cover{display:block;width:62px;height:62px;flex:0 0 62px;border-radius:15px;overflow:hidden;background:#FFFFFF;border:1px solid #080808}
#accountView .account-list-cover img{width:100%;height:100%;object-fit:cover;display:block}
#accountView .account-list-cover img.is-default{object-fit:contain;padding:6px}
#accountView .account-list-body{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px}
#accountView .account-list-body strong{display:block;line-height:1.23;font-size:clamp(14px,3.9vw,18px);overflow-wrap:anywhere}
#accountView .account-list-body small{line-height:1.4;font-size:10px;margin:0}
#accountView .profile-archive-arrow{flex:none}
#accountView .list-manager-link,#accountView #manageLists{display:none!important}
/* Tripmate profile sheet and accessible clickable tiles. */
.tripmate-card{width:100%;text-align:left;cursor:pointer;font-family:Arimo,sans-serif}
.tripmate-card:focus-visible{outline:3px solid #166F00;outline-offset:2px}
.tripmate-card:active{transform:scale(.992)}
.tripmate-profile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:23px 0 18px}
.tripmate-profile-avatar{height:118px;width:118px;display:grid;place-items:center;border:1.5px solid #080808;border-radius:24px;background:#166F00;overflow:hidden;font:800 48px 'Archivo Black',sans-serif}
.tripmate-profile-avatar img{width:100%;height:100%;object-fit:cover}
.tripmate-profile h3{font:800 29px 'Archivo Black',sans-serif;margin:11px 0 0;overflow-wrap:anywhere}
.tripmate-profile-subtitle{color:#777777;margin:0;font-size:11px;font-weight:700}
.tripmate-profile-title{font:800 24px 'Archivo Black',sans-serif;margin:18px 0 12px}
.tripmate-shared-lists{display:grid;gap:10px}
.tripmate-shared-lists .outline{border-radius:16px;white-space:normal;min-height:50px}
/* Modal transparency fix: show the underlying page through a continuously fading scrim.
   Never paint the modal root or backdrop opaque white during slide-out. */
@media(max-width:699px){
 .modal{background:transparent!important;isolation:auto!important;backdrop-filter:none!important}
 .modal .modal-backdrop{background:rgba(8,8,8,.14)!important;opacity:0!important;transition:opacity .34s ease!important;backdrop-filter:none!important}
 .modal.is-open .modal-backdrop{opacity:1!important}
 .modal.is-closing .modal-backdrop{opacity:0!important}
 .modal .sheet{background:#FFFFFF!important;box-shadow:0 -12px 25px rgba(0,0,0,.08)!important;border-radius:25px 25px 0 0!important;isolation:auto!important;will-change:transform;transform:translate3d(0,103%,0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
 .modal.is-open .sheet{transform:translate3d(0,0,0)}
}
/* NEW SPOT -- stable, well-proportioned 1/4-width preview at top-right.
   Category / status / notes use the full lower width: no stretched preview. */
.modal.spot-editor-open #modalBody{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
#momentForm{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;flex:1 1 auto!important;min-height:0!important;gap:clamp(7px,1.1dvh,11px)!important;overflow:hidden!important;margin-top:10px!important}
#momentForm .moment-editor-top{display:grid!important;grid-template-columns:minmax(0,1fr) 25%!important;gap:12px!important;flex:0 0 auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;align-items:start!important;margin:0!important}
#momentForm .moment-editor-fields{display:flex!important;flex-direction:column!important;gap:12px!important;min-width:0;min-height:0!important;overflow:visible!important}
#momentForm .moment-editor-fields .field{margin:0!important}
#momentForm .moment-editor-fields .location-field{z-index:70;position:relative}
#momentForm .moment-editor-fields .location-results{max-height:min(235px,34dvh)!important;z-index:75!important}
#momentForm .moment-preview-wrap{display:flex!important;flex-direction:column!important;gap:5px!important;height:auto!important;max-height:none!important;min-height:0!important;min-width:0}
#momentForm .moment-preview-eyebrow{font-size:clamp(8px,2.3vw,10px);white-space:nowrap;letter-spacing:0;font-weight:800}
#momentForm .moment-preview-wrap .preview-thumb{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;padding:4px!important;border-radius:14px!important;border:1.5px solid #080808!important;overflow:hidden!important;box-shadow:0 4px 10px rgba(8,8,8,.06)!important;flex:0 0 auto!important}
#momentForm .moment-preview-wrap .preview-thumb-photo{display:grid!important;place-items:center!important;width:100%!important;height:auto!important;aspect-ratio:4/5!important;flex:0 0 auto!important;border-radius:10px!important;overflow:hidden!important;min-height:0!important;max-height:none!important;background:#FFFFFF}
#momentForm .moment-preview-wrap .preview-thumb-photo img{height:100%!important;width:100%!important;object-fit:cover!important;object-position:center!important}
#momentForm .preview-thumb-title{font-size:clamp(9px,2.7vw,12px)!important;line-height:1.13!important;margin:6px 0 2px!important;max-height:2.28em!important;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
#momentForm .preview-thumb-location{font-size:9px!important;max-height:2.2em!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 2px!important}
#momentForm .preview-thumb-location[hidden]{display:none!important}
#momentForm .preview-thumb-label{font-size:clamp(7px,1.85vw,9px)!important;line-height:1.1!important;margin:4px 0 2px!important;overflow-wrap:anywhere}
#momentForm .moment-editor-secondary{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;gap:clamp(7px,1dvh,11px)!important;overflow:hidden!important}
#momentForm .spot-editor-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;flex:0 0 auto!important;min-height:0!important}
#momentForm .moment-editor-secondary .field{min-width:0;flex-shrink:0!important;margin:0!important}
#momentForm .moment-editor-secondary .spot-notes-field{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:65px!important;overflow:hidden!important;min-width:0}
#momentForm .moment-editor-secondary .spot-notes-field textarea{display:block!important;flex:1 1 auto!important;width:100%!important;height:100%!important;min-height:43px!important;max-height:none!important;overflow:auto!important;resize:none!important;padding:10px 12px!important;line-height:1.35!important;font-size:16px!important}
#momentForm #ratingWrap:not([hidden]){flex:0 0 auto!important}
#momentForm .spot-photo-field{display:block!important;flex:0 0 auto!important;position:relative;margin:0!important}
#momentForm .add-photo{min-height:42px!important;height:42px!important;border-radius:15px!important}
#momentForm #photoRemove{display:none!important}
#momentForm #saveMoment{display:block!important;flex:0 0 auto!important;min-height:44px!important;margin:0!important;padding:10px!important;border-radius:15px!important}
#momentForm #formStatus{min-height:0!important;max-height:22px!important;flex:0 0 auto!important;margin:0!important}
@media(max-width:370px),(max-height:740px){
 .modal.spot-editor-open .sheet{padding:8px 12px calc(7px + env(safe-area-inset-bottom))!important}
 .modal.spot-editor-open .sheethead{min-height:40px!important;padding-bottom:6px!important}
 .modal.spot-editor-open .sheethead h2{font-size:clamp(23px,6.8vw,31px)!important}
 #momentForm{margin-top:7px!important;gap:6px!important}
 #momentForm .moment-editor-top{gap:8px!important;grid-template-columns:minmax(0,1fr) 25%!important}
 #momentForm .moment-editor-fields{gap:8px!important}
 #momentForm .field label{font-size:9px!important;margin-bottom:4px!important}
 #momentForm .field input:not([type=file]):not([type=checkbox]),#momentForm .combo-trigger{height:38px!important;min-height:38px!important}
 #momentForm .moment-editor-secondary{gap:6px!important}
 #momentForm .moment-editor-secondary .spot-notes-field{min-height:42px!important}
 #momentForm .add-photo{height:38px!important;min-height:38px!important}
 #momentForm #saveMoment{min-height:41px!important}
 #momentForm .preview-thumb-title{font-size:9px!important}
 #momentForm .preview-thumb-label{font-size:7px!important}
}
@media(min-width:700px){
 #momentForm .moment-editor-top{grid-template-columns:minmax(0,1fr) 25%!important;gap:18px!important}
 .modal.spot-editor-open .sheet{max-height:min(90dvh,780px)!important}
 #momentForm .moment-preview-eyebrow{font-size:11px!important}
}
/* Final layout balance: avoid an oversized notes textarea on tall iPhones.
   Space is distributed evenly between sections instead of stretching fields. */
#momentForm{justify-content:space-between!important}
#momentForm .moment-editor-secondary{flex:0 0 auto!important;min-height:0!important;overflow:visible!important}
#momentForm .moment-editor-secondary .spot-notes-field{flex:0 0 auto!important;min-height:0!important;overflow:visible!important}
#momentForm .moment-editor-secondary .spot-notes-field textarea{flex:none!important;height:clamp(118px,22dvh,180px)!important;min-height:0!important;max-height:180px!important;overflow-y:auto!important}
@media(max-height:740px){
 #momentForm .moment-editor-secondary .spot-notes-field textarea{height:clamp(88px,19dvh,145px)!important;min-height:0!important;max-height:145px!important}
}
/* Tall mobile displays: keep the editing surface compact rather than stretching empty space. */
@media (max-width:699px) and (min-height:780px){
 .modal.spot-editor-open .sheet{height:min(calc(100dvh - env(safe-area-inset-top)),740px)!important;max-height:min(calc(100dvh - env(safe-area-inset-top)),740px)!important}
}
@media(min-width:700px){
 #momentForm .moment-editor-secondary .spot-notes-field textarea{height:125px!important;max-height:125px!important}
}


/* Ported refinements: modal corners, preview, filters and icon consistency. */
/* Sort is always CUSTOM internally. Keep the category selector and FAVORITES on opposite sides. */
#momentsView .bar{display:flex!important;justify-content:space-between!important;gap:10px!important;align-items:center!important}
#momentsView .bar .tabs{width:100%!important;flex:1 1 auto!important;display:flex!important;justify-content:space-between!important;gap:9px!important}
#momentsView .category-filter{max-width:none!important;flex:0 1 43%!important;min-width:0!important}
#momentsView .category-filter-button{width:100%!important;min-width:0!important}
#momentsView .bar .tabs .tab[data-filter="favorite"]{margin-left:auto!important;flex:0 0 auto!important}
#momentsView .sort-wrap{display:none!important}
@media(max-width:360px){#momentsView .category-filter{flex-basis:40%!important}#momentsView .bar .tabs .tab{padding:10px 10px!important;font-size:10px!important}}
/* iOS overlays: a WHITE safe-area/corner backing ONLY behind the top rounded corners.
   The rest of the scrim stays transparent and fades out with the sliding sheet.
   This avoids both gray corner wedges and the full-screen white flash on exit. */
@media(max-width:699px){
 .modal{background:transparent!important;isolation:isolate!important}
 .modal::before{content:'';display:block;position:absolute;left:0;right:0;top:0;height:calc(env(safe-area-inset-top) + 33px);background:#FFFFFF;z-index:1;pointer-events:none;opacity:0;transition:opacity .27s ease}
 .modal.is-open::before{opacity:1}
 .modal.is-closing::before{opacity:0}
 .modal .modal-backdrop{z-index:0;background:rgba(8,8,8,.14)!important}
 .modal .sheet{z-index:2;box-shadow:none!important;border-radius:25px 25px 0 0!important;overflow-x:hidden!important;background:#FFFFFF!important}
}
/* Account -> ... -> Manage List now opens a complete cover/name/action overview. */
.manage-summary{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin:19px 0 25px}
.manage-summary-photo{width:clamp(104px,32vw,142px);aspect-ratio:1;border:1.5px solid #080808;border-radius:24px;display:grid;place-items:center;overflow:hidden;background:#FFFFFF;box-shadow:0 5px 14px rgba(8,8,8,.07)}
.manage-summary-photo img{width:100%;height:100%;object-fit:cover;display:block}
.manage-summary-photo img.is-default{object-fit:contain;padding:9px}
.manage-summary .manage-name{font-family:'Archivo Black','Trebuchet MS',sans-serif;letter-spacing:-.02em;font-size:clamp(22px,6.5vw,30px);font-weight:800;line-height:1.18;margin:0;max-width:100%;overflow-wrap:anywhere}
.manage-summary + .manage-actions{margin-top:0;gap:10px}
.manage-summary + .manage-actions button{min-height:48px;border-radius:16px}
/* Maintain the familiar SPOTS. editor composition: title and location at left, proportional live
   preview at the upper right; category, status, notes and photo controls below.
   Only the overly tall preview is reduced. No HTML field rearrangement. */
#momentForm{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:clamp(7px,1.0dvh,11px)!important;min-height:0!important;overflow:hidden!important}
#momentForm .moment-editor-top{display:grid!important;grid-template-columns:minmax(0,1fr) 35%!important;align-items:start!important;gap:11px!important;height:auto!important;min-height:0!important;max-height:none!important;flex:0 0 auto!important;overflow:visible!important;margin:0!important}
#momentForm .moment-editor-fields{display:flex!important;flex-direction:column!important;gap:clamp(11px,1.7dvh,17px)!important;justify-content:flex-start!important}
#momentForm .moment-preview-wrap{display:flex!important;height:auto!important;min-height:0!important;max-height:none!important;gap:5px!important;align-self:start!important}
#momentForm .moment-preview-wrap .preview-thumb{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important;width:100%!important;height:clamp(185px,29dvh,248px)!important;min-height:0!important;max-height:none!important;border-radius:18px!important;padding:5px!important;overflow:hidden!important;flex:0 0 auto!important}
#momentForm .moment-preview-wrap .preview-thumb-photo{display:grid!important;place-items:center!important;flex:1 1 auto!important;min-height:0!important;max-height:none!important;height:auto!important;aspect-ratio:auto!important;border-radius:12px!important;overflow:hidden!important}
#momentForm .moment-preview-wrap .preview-thumb-photo img{width:100%!important;height:100%!important;object-fit:cover!important}
#momentForm .preview-thumb-title{font-size:clamp(10px,2.7vw,13px)!important;line-height:1.15!important;max-height:2.3em!important;margin:6px 1px 2px!important;overflow:hidden}
#momentForm .preview-thumb-label{font-size:clamp(7px,1.8vw,9px)!important;margin:3px 1px!important;line-height:1.1!important;flex:0 0 auto}
#momentForm .moment-editor-secondary{display:flex!important;flex-direction:column!important;gap:clamp(7px,1.1dvh,12px)!important;flex:0 0 auto!important;min-height:0!important;overflow:visible!important}
#momentForm .moment-editor-secondary .spot-notes-field{flex:0 0 auto!important;min-height:0!important;overflow:visible!important}
#momentForm .moment-editor-secondary .spot-notes-field textarea{height:clamp(95px,17dvh,150px)!important;max-height:150px!important;min-height:0!important;overflow-y:auto!important}
#momentForm .spot-photo-field,#momentForm #saveMoment{flex:0 0 auto!important}
#momentForm .spot-photo-field{margin:0!important}
#momentForm #photoRemove{display:none!important}
@media(max-width:370px),(max-height:740px){
 #momentForm{gap:6px!important;margin-top:7px!important}
 #momentForm .moment-editor-top{grid-template-columns:minmax(0,1fr) 35%!important;gap:8px!important}
 #momentForm .moment-editor-fields{gap:9px!important}
 #momentForm .moment-preview-wrap .preview-thumb{height:clamp(160px,27dvh,195px)!important}
 #momentForm .moment-editor-secondary{gap:6px!important}
 #momentForm .moment-editor-secondary .spot-notes-field textarea{height:clamp(74px,13.5dvh,104px)!important;max-height:104px!important}
}
@media(min-width:700px){
 #momentForm .moment-editor-top{grid-template-columns:minmax(0,1fr) 32%!important;gap:18px!important}
 #momentForm .moment-preview-wrap .preview-thumb{height:245px!important}
 #momentForm .moment-editor-secondary .spot-notes-field textarea{height:115px!important}
}
@media(prefers-reduced-motion:reduce){.modal::before{transition:none!important}}
/* QA rule: the rating selector must never push SAVE outside the sheet. */
#momentForm .moment-preview-wrap .preview-thumb{height:clamp(176px,24.5dvh,223px)!important}
#momentForm .moment-editor-secondary .spot-notes-field textarea{height:clamp(95px,14.5dvh,136px)!important;max-height:136px!important}
@media(max-width:370px),(max-height:740px){
 #momentForm .moment-preview-wrap .preview-thumb{height:clamp(158px,26dvh,192px)!important}
 #momentForm .moment-editor-secondary .spot-notes-field textarea{height:clamp(74px,13.5dvh,104px)!important;max-height:104px!important}
}
@media(min-width:700px){
 #momentForm .moment-preview-wrap .preview-thumb{height:224px!important}
 #momentForm .moment-editor-secondary .spot-notes-field textarea{height:112px!important}
}
/* Tall iPhones can center a 740px editor lower than the safe area.
   White backing must reach the actual top corners, not stop at the status bar. */
@media(max-width:699px) and (min-height:780px){
 .modal.spot-editor-open::before{height:calc(100dvh - min(calc(100dvh - env(safe-area-inset-top)), 740px) + 35px)!important}
}
/* Extra vertical headroom for VISITED, which reveals an additional rating selector. */
@media(max-width:699px){
 #momentForm:has(#ratingWrap:not([hidden])) .moment-preview-wrap .preview-thumb{height:clamp(162px,22dvh,199px)!important}
 #momentForm:has(#ratingWrap:not([hidden])) .spot-notes-field textarea{height:clamp(78px,12dvh,115px)!important;max-height:115px!important}
}


/* TRIPS. v1.0 -- branded Journey UI, Archivo Black headings, Arimo body. */
:root{--ink:#080808;--paper:#FFFFFF;--accent:#166F00;--blue:#166F00;--accent-dark:#105100}
body,button,input,select,textarea{font-family:'Arimo',Arial,sans-serif}
h1,h2,h3,.anton,.section-title,.intro h1,.polaroid-foot strong,.flip-back-title,.preview-thumb-title,.profile-section,.profile-user,.manage-name,.journey-meta strong{font-family:'Archivo Black',Impact,sans-serif!important;font-weight:400!important;letter-spacing:-.045em}
#app .header .wordmark{width:clamp(130px,39vw,235px)!important;max-width:51vw!important;height:auto!important;display:flex!important;align-items:center!important;line-height:1!important;flex:0 0 auto!important}
#app .header .wordmark .brand-logo{width:100%;height:auto;object-fit:contain;display:block}
.splash .brand-logo{width:min(58vw,275px);height:auto;display:block;margin:0 auto}
.auth-brand .brand-logo{width:100%;max-width:256px;height:auto;object-fit:contain}
.splash .splash-inner{display:flex;flex-direction:column;align-items:center}
.header .archive-switch-chevron,.custom-hint svg,.card-location svg,.accent-dot{color:#166F00!important}
.intro h1{font-size:clamp(28px,6.85vw,65px);letter-spacing:-.05em;line-height:1.09}
.intro .eyebrow{font-size:10px}
#app .header{border-color:#080808}
/* Accessible controls: dark-green surfaces need white foreground, unlike yellow styling inherited from SPOTS.. */
#momentsView .tabs .category-filter-button{background:#166F00!important;color:#FFFFFF!important}
#momentsView .category-filter-button svg{stroke:#FFFFFF!important}
#momentsView .tabs .tab.active{background:#166F00!important;color:#FFFFFF!important}
#momentsView .category-filter-option.selected,#momentsView .category-filter-option:active{background:#166F00!important;color:#FFFFFF!important}
.spot-status-chip.is-active,.spot-status-chip.active{background:#166F00!important;color:#FFFFFF!important}
.spot-badge.status{background:#166F00!important;color:#FFFFFF!important}
#app .nav .add-nav .plus{background:#080808!important}
#app .nav .add-nav .plus svg{color:#FFFFFF!important;stroke:#FFFFFF!important}
#app .nav button.active{color:#166F00!important}
#app .nav button.active svg{color:#166F00!important}
#app .nav .add-nav{color:#FFFFFF!important}
.close{background:#166F00!important;color:#FFFFFF!important;border-color:#080808!important}
.close svg{stroke:#FFFFFF!important}
.category-filter-menu .category-filter-option.selected{color:#FFFFFF!important}
.combo-option[aria-selected=true],.combo-option.is-selected{background:#166F00!important;color:#FFFFFF!important}
.archive-switch-check,.sort-arrow{color:#166F00!important}
.splash .track .fill{background:#166F00!important}
.profile-avatar-fallback,.tripmate-profile-avatar{background:#166F00!important;color:#FFFFFF!important}
.tripmates-section,.journey-grid{min-width:0}
/* Travel album cards: a Journey is tappable to open, not merely selectable. */
#archivesView .section-title{margin-bottom:18px}
#archivesList{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;align-items:start;margin:0 0 22px!important}
.journey-tile{border:1.6px solid #080808;border-radius:22px;overflow:hidden;background:#FFFFFF;min-width:0;box-shadow:0 4px 0 rgba(0,0,0,.07);transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s}
.journey-tile:active{transform:scale(.988)}
.journey-open{padding:9px 9px 3px;display:block;width:100%;border:0;background:transparent;text-align:left;color:#080808}
.journey-cover{width:100%;aspect-ratio:4/5;display:block;border-radius:15px;overflow:hidden;background:#F3F5F2}
.journey-cover img{display:block;width:100%;height:100%;object-fit:cover}
.journey-cover img.is-default{object-fit:contain;padding:25px;background:#FFFFFF}
.journey-meta{display:block;padding:12px 3px 9px}
.journey-meta strong{display:block;font-size:clamp(14px,3.8vw,21px);line-height:1.18;overflow-wrap:anywhere}
.journey-meta small{display:block;font-size:11px;font-weight:700;color:#777777;margin-top:8px;letter-spacing:.035em}
.journey-corner{display:none}
.journey-tile-actions{border-top:1px solid #E6E6E6;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:37px;padding:3px 10px}
.journey-tile-actions span{font-size:9px;letter-spacing:.06em;font-weight:700;color:#777777}
.journey-tile-actions button{border:0;background:transparent;color:#080808;font-size:22px;letter-spacing:.07em;line-height:1;min-width:34px;min-height:30px}
.journey-empty{grid-column:1/-1;text-align:center;max-width:440px;margin:8px auto 20px;padding:34px 15px;background:#FAFBF9;border:1.5px dashed #AEBDAC;border-radius:23px}
.journey-empty h3{font-size:clamp(21px,5vw,28px);margin:0 0 9px;line-height:1.2}
.journey-empty p{font-size:13px;color:#777777;line-height:1.55;margin:0}
#archivesView .archive-actions{margin-top:18px}
#archivesView .archive-actions .solid{background:#080808;color:#FFFFFF}
.member-count-text{font-size:12px;letter-spacing:.07em;font-weight:800;color:#166F00;margin:0}
.invite-intro{display:flex;flex-direction:column;gap:12px;margin:10px 0 24px}
.invite-intro h3{font-size:clamp(20px,5vw,29px);line-height:1.15;margin:0}
.invite-intro p{margin:0;color:#777777;font-size:13px;line-height:1.5}
.invite-intro .member-count-text{color:#166F00}
.manage-summary .member-count-text{color:#166F00}
/* Keep premium rounded treatment everywhere, preserve original working SPA components. */
.authpage,.splash,.modal,.preview-overlay{background-color:#FFFFFF}
#app .nav{background:#FFFFFF}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #166F00;outline-offset:2px}
#momentForm .preview-thumb-label{color:#166F00!important}
@media(max-width:375px){
 #app .header .wordmark{width:clamp(119px,36vw,155px)!important}
 #archivesList{gap:10px}
 .journey-tile{border-radius:18px}
 .journey-cover{border-radius:12px}
 .journey-tile-actions{padding:3px 7px}
 .journey-tile-actions span{font-size:8px}
}
@media(min-width:740px){#archivesList{grid-template-columns:repeat(3,minmax(0,1fr))}}

#app .nav button span{white-space:nowrap}
#app .nav #listNav span{font-size:clamp(7px,1.9vw,10px)}
/* Do not add an opaque screen backdrop: retain rounded corner white modal corner fix. */
@media(max-width:699px){.modal{background:transparent!important}}
/* Layout regression guard: intrinsic card heights prevent overlap with footer on
   fast-loading images. Preserve long-press custom ordering of the DOM elements. */
#masonry.masonry.custom-mode,#searchResults.masonry{grid-auto-rows:auto!important;row-gap:14px!important;align-items:start!important}
#masonry.masonry.custom-mode .polaroid,#searchResults.masonry .polaroid{grid-row-end:auto!important;height:auto!important}
/* Accessible white labels on dark buttons (green is too dark on black). */
.spot-status-chip:not(.is-active){color:#FFFFFF!important}
.archive-actions .archive-action-icon svg{stroke:#FFFFFF!important;color:#FFFFFF!important}
#momentsView .tabs .tab[data-filter="favorite"]{color:#080808!important}
#momentsView .tabs .tab[data-filter="favorite"].active{color:#FFFFFF!important}

/* TRIPS. v1.1: approved mountain branding and viewport-sized editors. */
.auth-brand{gap:14px!important;margin-bottom:25px!important}
.auth-brand .auth-mountains{width:150px!important;height:92px!important;object-fit:contain}
.auth-brand .brand-logo{width:220px!important;height:auto!important}
#app .header-static-icon:not([hidden]){width:64px;height:48px;flex-basis:64px}
.modal.creation-editor-open .sheet{height:calc(100dvh - env(safe-area-inset-top))!important;max-height:calc(100dvh - env(safe-area-inset-top))!important;margin-top:env(safe-area-inset-top)!important;padding:12px 15px calc(12px + env(safe-area-inset-bottom))!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
.modal.creation-editor-open::before{height:calc(env(safe-area-inset-top) + 33px)!important}
.modal.creation-editor-open .sheethead{position:relative!important;flex:none!important;min-height:48px!important;padding:0 0 10px!important}
.modal.creation-editor-open #modalBody{display:flex!important;flex:1!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
.modal.creation-editor-open form{display:flex!important;flex:1!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important;margin-top:12px!important;gap:10px!important}
.modal.creation-editor-open form>.status:empty{display:none!important}
.modal.creation-editor-open form>.status:not(:empty){flex:none;max-height:30px;margin:0!important;font-size:11px}
#momentForm .moment-editor-secondary{flex:1 1 auto!important;overflow:hidden!important;min-height:0!important}
#momentForm .moment-editor-secondary .spot-notes-field{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;overflow:hidden!important;min-height:55px!important}
#momentForm .moment-editor-secondary .spot-notes-field textarea{flex:1 1 auto!important;height:0!important;max-height:none!important;min-height:30px!important}
#momentForm .moment-preview-wrap .preview-thumb{height:clamp(150px,23dvh,210px)!important}
#createArchive>.field,#editArchiveForm>.field{flex:none;margin:0}
#createArchiveSubmit,#editArchiveSubmit{margin-top:auto!important;flex:none}
.creation-editor-open .archive-cover-preview{width:min(160px,25dvh);height:min(160px,25dvh);margin:8px auto}
@media(max-height:700px){
 .modal.creation-editor-open .sheet{padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important}
 .modal.creation-editor-open form{gap:6px!important;margin-top:7px!important}
 #momentForm .moment-preview-wrap .preview-thumb{height:150px!important}
 #momentForm .moment-editor-fields{gap:8px!important}
 #momentForm .field input:not([type=file]),#momentForm .combo-trigger{height:38px!important;min-height:38px!important}
}
@media(max-height:500px){
 .modal.creation-editor-open .sheethead{min-height:36px!important;padding-bottom:4px!important}
 .modal.creation-editor-open .sheethead h2{font-size:23px!important}
 .modal.creation-editor-open .close{height:32px;width:32px}
 #momentForm .moment-preview-wrap{display:none!important}
 #momentForm .moment-editor-top{grid-template-columns:1fr!important}
 #momentForm .moment-editor-fields{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
 #momentForm .field label{font-size:9px!important;margin-bottom:3px!important}
 #momentForm .field input:not([type=file]),#momentForm .combo-trigger{height:32px!important;min-height:32px!important}
 #momentForm .moment-editor-secondary{gap:4px!important}
 #momentForm .add-photo,#momentForm #saveMoment{height:34px!important;min-height:34px!important;padding:5px!important}
 .creation-editor-open .archive-cover-preview{height:60px;width:60px;margin:4px auto}
}
@media(max-height:500px){
 #momentForm .moment-editor-secondary{display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:auto minmax(0,1fr)!important;gap:5px 8px!important}
 #momentForm .spot-editor-options{grid-column:1/-1}
 #momentForm .moment-editor-secondary .spot-notes-field{grid-column:1/-1;min-height:42px!important}
 #momentForm .moment-editor-secondary:has(#ratingWrap:not([hidden])) .spot-notes-field{grid-column:2}
}