:root{color-scheme:light;--ink:#080808;--paper:#FFFFFF;--muted:#777777;--soft:#FFFFFF;--line:#080808;--blue:#FFD600;--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:'Montserrat',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:'Sour Gummy','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:'Sour Gummy','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:'Sour Gummy','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:#FFD600}
.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:'Sour Gummy','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; }

/* SPOTS. v1.0: brand typography, yellow accents and the ARCHIVE.-inspired app shell */
:root{--blue:#FFD600;--accent:#FFD600;--accent-dark:#FFD600;--ink:#080808;--paper:#FFFFFF;--muted:#777777}
body,button,input,textarea,select{font-family:'Montserrat',Arial,sans-serif}
h1,h2,h3,h4,.anton,.manage-name,.profile-user,.flip-back-title,.section-title{font-family:'Sour Gummy','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:'Sour Gummy','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:'Sour Gummy','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:#FFD600}.archive-row-edit svg,.manage-archive svg{stroke:#080808}.archive-action-icon svg{stroke:#FFD600}
.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 'Montserrat',Arial,sans-serif;letter-spacing:.03em;white-space:nowrap}.spot-status-chip.is-active{background:#FFD600;color:#080808}.spot-badges{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:7px 0 1px}.spot-badge{font:700 9px 'Montserrat',Arial,sans-serif;letter-spacing:.02em;padding:3px 5px;background:#FFFFFF;color:#080808;border:1px solid #FFFFFF}.spot-badge.status{background:#FFD600;border-color:#FFD600;color:#080808;margin:0;min-height:0}.spot-rating{font:800 10px 'Montserrat',Arial,sans-serif;color:#080808;padding-top:5px}.spot-rating .rating-star{color:#FFD600}
.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}}

/* Accessible contrast: yellow surface, black close icons and precise brand details. */
.modal .close,.preview-overlay .close{background:#FFD600;color:#080808}.modal .close svg,.preview-overlay .close svg{stroke:#080808}.field .search-entry svg,.location-clear,.location-selected-pin{color:#FFD600}.spot-rating .rating-star{color:#FFD600}.spot-badge.status{color:#080808}.footer{font-family:'Montserrat',Arial,sans-serif}.date-shell svg{color:#FFD600}
/* SPOTS. 1.1 — Modern Smooth design system. Four brand colors only. */
:root{
  --ink:#080808;--paper:#FFFFFF;--muted:#777777;--accent:#FFD600;--blue:#FFD600;
  --accent-dark:#FFD600;--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:'Montserrat',Arial,sans-serif}
h1,h2,h3,h4,.profile-user,.section-title,.flip-back-title,.manage-name{font-family:'Sour Gummy','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 #FFD600;outline-offset:0;box-shadow:0 0 0 2px #FFD600}
.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:#FFD600;color:#080808}
.archive-switch-chevron,.archive-switch-check,.sort-arrow,.custom-hint svg,.profile-archive-arrow{color:#FFD600!important;stroke:#FFD600!important;opacity:1!important;filter:none!important}
.archive-switch-btn svg,.sort-arrow svg,.custom-hint svg{stroke:#FFD600!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:#FFD600;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:#FFD600;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:#FFD600!important;padding:9px 13px;font-size:10px}
.spot-status-chip.is-active{background:#FFD600!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:#FFD600}
.favorite-star svg,.card-location svg,.spot-rating .rating-star{color:#FFD600;stroke:#080808}
.polaroid-foot{padding:11px 5px 15px}
.polaroid-foot strong{font-family:'Sour Gummy','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:#FFD600;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:#FFD600!important;stroke:#FFD600!important}
.flip-back .back-link{color:#080808;text-decoration-color:#FFD600;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:'Sour Gummy','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:#FFD600;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:#FFD600!important;stroke:#FFD600!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:#FFD600;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:#FFD600;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:#FFD600!important;color:#FFD600!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:'Sour Gummy','Trebuchet MS',sans-serif;font-weight:800}
.modal .close,.preview-overlay .close{border-radius:13px;background:#FFD600;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:#FFD600;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:#FFD600;color:#080808}
.combo-option:not([aria-selected="true"]):active{background:#FFD600}
.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:#FFD600}
.location-choice strong{font-size:11px}.location-choice small,.location-hint{font-size:10px;color:#777777}
.location-manual{background:#FFD600;color:#080808}.location-manual-icon{background:#080808;color:#FFD600;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:#FFD600;stroke:#FFD600}
/* 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:'Sour Gummy','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:#FFD600!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:#FFD600;stroke:#FFD600;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}

/* SPOTS. v1.2 — alignment, navigation, private spotmates, 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:#FFD600!important;text-decoration:none!important;border-bottom:0!important;font-weight:800!important;letter-spacing:.02em}
/* 5: active icon AND label are yellow; remove every underline indicator. */
#app .nav button.active:not(.add-nav),#app .nav button.active:not(.add-nav) span{color:#FFD600!important}
#app .nav button.active:not(.add-nav) svg{color:#FFD600!important;stroke:#FFD600!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: Spotmates get their own real section, only people connected through shared lists. */
.spotmates-section{margin-top:26px;padding-top:22px;border-top:1.5px solid #080808}
.spotmates-heading{margin:0 0 8px!important}
.spotmates-description{font-size:12px;color:#777777;margin:0 0 18px}
.spotmates-list{display:grid;gap:10px;margin-bottom:24px}
.spotmate-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)}
.spotmate-avatar{flex:0 0 49px;width:49px;height:49px;background:#FFD600;border-radius:16px;display:grid;place-items:center;overflow:hidden;color:#080808;font:800 24px 'Sour Gummy',sans-serif}
.spotmate-avatar img{width:100%;height:100%;object-fit:cover}
.spotmate-details{flex:1;min-width:0;display:grid;gap:3px}
.spotmate-details strong{font-size:13px;color:#080808;overflow-wrap:anywhere}
.spotmate-details small{font-size:11px;color:#777777;overflow-wrap:anywhere;line-height:1.4}
.spotmate-count{font-size:10px;font-weight:800;color:#080808;white-space:nowrap}
.spotmates-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 #FFD600;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:#FFD600;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:#FFD600;flex:none}
.location-manual-icon svg{width:17px;height:17px;stroke:#FFD600}
.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}}