/* Native-app feel on phones (≤650px): app bar with back + title, no web chrome (breadcrumbs,
   footer), safe areas for notched devices, touch feedback and a light page transition.
   Desktop keeps the website layout. */
.app-back,.app-title,.app-account{display:none}
@media(max-width:650px){
  html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
  body{overscroll-behavior-y:none}
  button,.button,.bottom-nav a,.category-tabs a,.collection-tabs a,.template-card,.area-card,.home-choice,.home-continue,.project-new{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  :is(button,.button,.home-choice,.home-continue,.template-card,.area-card,.project-card,.project-new,.wishlist-card,.category-tabs a,.collection-tabs a):active{transform:scale(.97);transition:transform .08s}
  .bottom-nav a:active{background:#0000000a}

  /* App bar on every page except the photo hero home. */
  body:not([data-route=home]) .site-header{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:4px;height:calc(54px + env(safe-area-inset-top));min-height:0;padding:env(safe-area-inset-top) 6px 0;background:#f7f5eff5;border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
  body:not([data-route=home]) .site-header .logo{display:none}
  body:not([data-route=home]) .app-back{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink)}
  body:not([data-route=home]) .app-back svg{width:24px;height:24px}
  body:not([data-route=home]) .app-title{display:block;text-align:center;font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* The account button replaces the hamburger; navigation lives in the bottom bar. */
  .site-header .mobile-menu-toggle{display:none!important}
  .app-account{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink)}
  .app-account svg{width:24px;height:24px}
  body[data-route=home] .app-account{width:40px;height:40px;color:#fff;border:1px solid #ffffff66;background:#ffffff12;backdrop-filter:blur(8px)}
  body:not([data-route=home]) .site-header>nav{display:none}
  body:not([data-route=home])[data-menu-open=true] .site-header>nav{display:flex;position:absolute;top:100%;left:10px;right:10px;flex-wrap:wrap;gap:16px;padding:18px;background:#fffdf9;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 25px #27211818;font-size:13px}
  body:not([data-route=home])[data-menu-open=true] .site-header>nav>a{display:block}
  body[data-route=home] .site-header{padding-top:calc(16px + env(safe-area-inset-top))}

  /* Editor keeps its own toolbar; align it under the taller notch-aware app bar. */
  body[data-route=editor] .site-header{height:calc(54px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  body[data-route=editor] .editor-page{height:calc(100dvh - 54px - env(safe-area-inset-top))}
  body[data-route=editor] .editor-toolbar{top:calc(54px + env(safe-area-inset-top))}
  body[data-route=camera] .camera-view{top:calc(54px + env(safe-area-inset-top))}

  /* Web-only chrome: the app bar replaces breadcrumbs, step labels and the site footer. */
  .breadcrumb,.journey-top,.journey-back,.cr-back{display:none}
  body:not([data-route=home]) .site-footer{display:none}
  .page{padding-top:18px}
  .journey-page{padding-top:18px}

  /* Page transition. */
  #app.app-enter{animation:app-enter .22s ease-out}
}
@keyframes app-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#app.app-enter{animation:none}}

#account-sheet{margin:auto 0 0;width:100vw;max-width:100vw;max-height:85dvh;border:0;border-radius:20px 20px 0 0;padding:10px 16px calc(16px + env(safe-area-inset-bottom));background:#fffdf9;color:var(--ink)}
#account-sheet::backdrop{background:#1f2a2459}
.sheet-handle{width:38px;height:4px;border-radius:2px;background:#d5ddce;margin:0 auto 14px}
.sheet-head{display:flex;align-items:center;gap:12px;padding:4px 4px 14px;border-bottom:1px solid var(--line)}
.sheet-head>span:last-child{display:grid;min-width:0}
.sheet-head strong{font-size:16px;font-weight:600}
.sheet-head small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.sheet-avatar{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#253b30;color:#fff;font-size:18px;font-weight:600}
.sheet-avatar svg{width:24px;height:24px}
.sheet-list{display:grid;padding:8px 0}
.sheet-item{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 6px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-size:15px;text-align:left;text-decoration:none;cursor:pointer}
.sheet-item:active{background:#0000000a}
.sheet-item svg{width:22px;height:22px;color:#53694a}
.sheet-close{width:100%;min-height:46px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-weight:600}