/* Mobile acceptance pass, 2026-10-16. Keep original photo geometry/momentum. */
.onboard{touch-action:pan-y;outline:none}
.onboard img{user-select:none;-webkit-user-drag:none}
.onboard-enter .onboard-copy,.onboard-enter .line-illustration{animation:guide-arrive .28s ease-out both}
@keyframes guide-arrive{from{opacity:.25;translate:var(--enter-x,28px) 0}to{opacity:1;translate:0 0}}
.template-grid .template-item{grid-template-rows:150px 26px;height:201px;gap:8px;padding:8px;align-content:start}
.template-grid .template-item strong{font-size:15px;line-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.template-grid .template-art{height:150px;min-height:150px;margin:0}
.template-sheet .modal-head{margin-bottom:18px}
.editor-meta .clear-photos{margin-left:10px;margin-right:auto;min-height:44px;padding:0 7px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.clear-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.studio .device .bottom-nav,.studio .device[data-route=home] .bottom-nav{height:calc(64px + env(safe-area-inset-bottom,0px));min-height:calc(64px + env(safe-area-inset-bottom,0px));padding:9px 17px calc(7px + env(safe-area-inset-bottom,0px));align-items:center;flex-shrink:0}
.studio .device .bottom-nav button{height:48px;min-height:48px;gap:3px}
.studio .memories-header.memory-collection-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:142px;height:auto;flex-shrink:0;padding:16px 22px 19px;position:relative;overflow:hidden}
.memory-collection-header .collection-heading{position:relative;z-index:1;min-width:0}
.memory-collection-header .collection-heading h1{margin:0 0 6px;line-height:1.1;font-size:36px}
.memory-collection-header .collection-heading p{font-size:12px;margin:0 0 12px;line-height:1.4;color:var(--ink);opacity:.75}
.memory-collection-header .collection-stats{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}
.collection-stats b{font-size:17px;font-weight:600}
.collection-stats i{font-style:normal;opacity:.4}
.memory-collection-header .collection-reader{display:block;width:112px;height:119px;object-fit:contain;align-self:center;flex-shrink:0;transform:rotate(4deg);position:relative;z-index:1}
.memory-collection-header .text-link{font-size:11px;padding:4px 0}
.studio[data-theme=lemon] .memory-collection-header,.studio[data-theme=doodle] .memory-collection-header{background:var(--header)}
.studio[data-theme=collage] .memory-collection-header .collection-stats{background:#d7ff57;border:1px solid var(--ink);padding:3px 9px;border-radius:7px;width:max-content}
.studio[data-theme=journal] .memory-collection-header .collection-reader{filter:saturate(.7)}
@media(max-width:360px){.studio .memories-header.memory-collection-header{padding-left:17px;padding-right:17px}.memory-collection-header .collection-reader{width:94px}.editor-meta .clear-photos{margin-left:4px;font-size:11px;padding:0 3px}}
@media(prefers-reduced-motion:reduce){.onboard-enter .onboard-copy,.onboard-enter .line-illustration{animation:none}}

.memory-collection-header .collection-heading h1{width:max-content}
.onboard-dots button{width:44px;height:44px}
/* Second acceptance pass, 2026-10-17. The frame and its delete button rotate together. */
.live-frame{position:relative;width:100%;height:var(--live-height);transform:rotate(var(--photo-tilt));transform-origin:50% 50%}
.native-rope-track .live-frame>.live-photo.scene-hit{transform:none}
.live-frame>.live-remove{top:-10px;right:-10px;width:32px;height:32px}
.live-frame>.live-remove::after{inset:-6px}
.live-photo{-webkit-touch-callout:none}
.editor-meta .clear-photos{margin-right:0;margin-left:6px;letter-spacing:0}
.editor-meta .reorder-photos{margin:0 auto 0 3px;min-height:44px;padding:0 5px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:12px;letter-spacing:0;text-decoration:underline;text-underline-offset:4px}
.editor-meta .scene-navigation{margin-left:auto;gap:5px}
/* A light hand-drawn frame groups the guide's illustration, copy and page dots. */
.onboard::after{content:"";position:absolute;top:62px;left:12px;right:12px;bottom:calc(94px + env(safe-area-inset-bottom,0px));border:1.7px solid var(--ink);border-radius:18px 13px 19px 12px/12px 18px 14px 19px;pointer-events:none;z-index:3;opacity:.7}
.studio[data-theme=collage] .onboard::after{border-width:2px;border-radius:12px;opacity:1}
.studio[data-theme=journal] .onboard::after{border-width:1px;opacity:.5}
/* Collection header is a distinct illustrated panel on every interface palette. */
.studio .memories-header.memory-collection-header{margin:12px 14px 4px;padding:12px 16px;min-height:137px;border:1.7px solid var(--ink);border-radius:17px 20px 15px 18px/18px 15px 21px 16px;background:var(--header);box-shadow:3px 4px 0 color-mix(in srgb,var(--accent) 20%,transparent)}
.studio[data-theme=butter] .memories-header.memory-collection-header{background:#fff0ba}
.studio[data-theme=doodle] .memories-header.memory-collection-header{background:#fff740}
.studio[data-theme=collage] .memories-header.memory-collection-header{background:#e4edff;border:2px solid var(--ink);border-radius:13px;box-shadow:3px 4px 0 #184ef0}
.studio[data-theme=journal] .memories-header.memory-collection-header{background:#e7eddc;border:1px solid #75866d;box-shadow:none;border-radius:13px}
.memory-collection-header .collection-reader{width:102px;height:108px}
.sort-sheet,.import-sheet{display:flex;flex-direction:column;gap:0;max-height:91%;overscroll-behavior:contain}
.sort-sheet .modal-head,.import-sheet .modal-head{flex-shrink:0;margin-bottom:4px}
.sort-instruction,.import-note{margin:4px 0 15px;font-size:13px;line-height:1.6;color:var(--ink)}
.sort-grid,.import-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;flex-shrink:0}
.sort-thumb,.import-thumb{position:relative;aspect-ratio:1;border:2px solid transparent;border-radius:10px;background:var(--paper);padding:3px;min-width:0;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sort-thumb{touch-action:none;cursor:grab}
.sort-thumb img,.import-thumb img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block;pointer-events:none;-webkit-user-drag:none}
.sort-thumb.selected,.import-thumb.selected{border-color:var(--ink);background:var(--brand)}
.sort-number,.import-thumb>span{position:absolute;left:7px;top:7px;min-width:23px;height:23px;border:1px solid var(--ink);background:var(--paper);border-radius:7px;display:grid;place-items:center;font:12px/1 "PingFang SC",sans-serif;color:var(--ink)}
.import-thumb>span{left:auto;right:7px;border-radius:50%}
.import-thumb.selected>span{background:var(--brand)}
.sort-dragging{opacity:.22;border-style:dashed}
.sort-ghost{position:fixed;z-index:10000;pointer-events:none;margin:0;padding:3px;border:2px solid #222;background:#fffef7;border-radius:12px;box-shadow:0 12px 24px #0003;transform:scale(1.06) rotate(-3deg);overflow:hidden;opacity:.95}
.sort-ghost img{width:100%;height:100%;object-fit:cover;border-radius:7px}
.sort-ghost .sort-number{background:#fffef7;color:#222}
.sort-status{font-size:12px;min-height:19px;margin:14px 0 9px;color:var(--ink)}
.sort-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.sort-toolbar .secondary-btn{font-size:15px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:4px}
.sort-toolbar .icon{width:16px;height:16px}
.sort-sheet>.wide,.import-sheet>.wide{margin-top:10px;flex-shrink:0;font-size:18px}
@media(max-width:360px){.editor-meta .clear-photos,.editor-meta .reorder-photos{font-size:11px;padding:0 2px;margin-left:2px}.editor-meta .scene-navigation{gap:3px}.editor-meta .scene-arrow{width:40px;height:40px}.editor-meta .photo-more{width:36px}.sort-grid,.import-grid{gap:9px}.studio .memories-header.memory-collection-header{margin-left:12px;margin-right:12px;padding:12px}.memory-collection-header .collection-reader{width:90px}}