/* App shell: page frame, app bar, tab bar placement, desktop rail, footer. Uses tokens only. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100dvh; min-height: 100lvh;   /* large viewport: every page can scroll enough to collapse the browser toolbar, so the tab bar sits the same on short and long pages */ display: flex; flex-direction: column; }

.app { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: var(--content-max); margin: 0 auto; }
.page { flex: 1; padding-bottom: calc(var(--tabbar-h) + var(--s-10) + var(--safe-b)); }
.page.no-tabbar { padding-bottom: calc(var(--s-14) + var(--safe-b)); }
.page-gutter { padding-inline: var(--gutter); }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: var(--z-toast); background: var(--ink-900); color: var(--white); padding: var(--s-3) var(--s-4); border-radius: var(--r-full); }
.skip-link:focus { top: var(--s-3); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- app bar: translucent once content scrolls under it (sentinel toggles .is-stuck) ---- */
.appbar { view-transition-name: appbar; transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.appbar.is-stuck { background: color-mix(in srgb, var(--bg) 86%, transparent); box-shadow: 0 1px 0 var(--line); }
@supports (backdrop-filter: blur(1px)) {
  .appbar.is-stuck { backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); }
}
.appbar-title { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--spring); }
.appbar.has-large-title .appbar-title { opacity: 0; transform: translateY(6px); }
.appbar.has-large-title.is-stuck .appbar-title { opacity: 1; transform: none; }
.appbar-sentinel { height: 1px; margin-top: -1px; pointer-events: none; }
.appbar-end { display: flex; gap: var(--s-2); margin-left: auto; }
.large-title { padding: var(--s-2) var(--gutter) var(--s-4); font-size: var(--fs-display); line-height: var(--lh-tight);
               font-weight: 800; letter-spacing: -.025em; }
.large-title small { display: block; margin-top: var(--s-1); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; color: var(--text-3); }

/* ---- logo / location in the Home header ---- */
.brandmark { display: flex; align-items: center; gap: var(--s-2); font-weight: 800; letter-spacing: -.01em; }
.brandmark img { width: 32px; height: 32px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface); }
.hero-ink .brandmark { color: var(--white); }

/* ---- tab bar content ---- */
.tabbar { view-transition-name: tabbar; }
.tab .tab-label, .tab-cart .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* server-rendered fallback dot (shown until JS places the sliding indicator) */
.tab[aria-current="page"]::after { content: ""; position: absolute; bottom: -1px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
                                   border-radius: var(--r-full); background: var(--accent-500); }
.tabbar.has-ind .tab[aria-current="page"]::after { display: none; }
.tabbar.is-hidden { transform: translateY(calc(100% + var(--s-6) + var(--safe-b))); opacity: 0; pointer-events: none; }
.tabbar { transition: transform var(--dur-3) var(--spring-soft), opacity var(--dur-2) var(--ease-out); }

/* ---- desktop: tab bar becomes a top rail, footer shown ---- */
@container (min-width: 1024px) {
  .page { padding-bottom: var(--s-14); }
}
.footer-slim { padding: var(--s-8) var(--gutter) calc(var(--tabbar-h) + var(--s-14)); color: var(--text-2); font-size: var(--fs-small); display: none; }
.footer-slim a { font-weight: 700; color: var(--text); }
.footer-slim nav { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-3); }
@media (min-width: 1024px) { .footer-slim { display: block; padding-bottom: var(--s-10); } }

/* horizontal rails: snap to the gutter, not the raw scrollport edge */
.hscroll, .chips { scroll-padding-inline: var(--gutter); }

/* the active-order tab is a persistent element: it stays put across page changes instead of re-appearing */
.order-pill { view-transition-name: order-pill; }
::view-transition-group(order-pill) { animation: none; }

/* top progress bar while the next page loads (static/store/js/nav.js) */
.nav-bar { position: fixed; top: var(--safe-t); left: 0; right: 0; height: 3px; z-index: var(--z-toast); background: var(--accent-500); pointer-events: none;
           transform-origin: left; transform: scaleX(0); opacity: 0; }
.nav-bar.is-on { opacity: 1; animation: nav-bar 6s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes nav-bar { to { transform: scaleX(.92); } }

/* hidden native switch used only to trigger an iPhone haptic tick (core.js haptic) */
.haptic-switch { position: fixed; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }