/* Page layout + motion on top of base.css (the design system). */
:root{--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.4,.64,1);--shadow:0 10px 30px rgba(14,15,18,.10)}
html{scroll-behavior:smooth}
body{min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit;border:0;outline:0;background:transparent}
[data-a],[href]{cursor:pointer}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;border-radius:8px}

/* ---------- pages ---------- */
#app{position:relative;min-height:100vh}
.pg{position:relative;background:var(--paper);min-height:100vh}
.pg.webp{min-width:1100px}
.wrap{max-width:1360px;margin:0 auto}

/* mobile app frame: real phones get safe-area padding; ?m=1 (demo) shows the design's status bar */
.pg.app{max-width:430px;margin:0 auto;min-height:100vh;padding-bottom:0}
.status{display:none}
body.demo .status{display:flex}
body:not(.demo) .pg.app{padding-top:env(safe-area-inset-top)}
body:not(.demo) .app .status-gap{height:14px}
body.demo #app{max-width:390px;margin:0 auto;box-shadow:0 0 0 1px var(--line)}
body.demo .pg.app{max-width:390px;min-height:844px}
.pg.app .tabbar,.pg.app .bottombar{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:430px;z-index:20}
body.demo .pg.app .tabbar,body.demo .pg.app .bottombar{max-width:390px}
.pg.app .homebar{position:fixed;display:none}
body.demo .pg.app .homebar{display:block;z-index:30}
.bottombar{bottom:0;background:var(--paper)}
.scroll-x{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroll-x::-webkit-scrollbar{display:none}
.tab-spacer{height:100px}.bar-spacer{height:130px}

.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:500;line-height:1.3;color:var(--muted);width:64px}
.tabbar a.on{color:var(--ink)}.tabbar a.on .ic{stroke-width:2.4}

/* ---------- interaction polish ---------- */
.btn,.pill,.iconbtn,.chip,.seg span{transition:transform .18s var(--ease),background-color .2s,color .2s,box-shadow .2s,border-color .2s,opacity .2s}
.btn:active,.pill:active,.iconbtn:active{transform:scale(.96)}
.btn.ink:hover{background:#26282e}.btn.hl:hover{background:#ffcd1f}.btn.ghost:hover{border-color:var(--ink)}
.pill:hover:not(.on){background:#eae8e2}.pill.out:hover{border-color:var(--ink);background:var(--paper)}
.iconbtn:hover{background:#eae8e2}.iconbtn.w:hover{background:#fff}
.lift{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.lift:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.zoom{overflow:hidden}.zoom img{transition:transform .7s var(--ease)}
.lift:hover .zoom img,.zoom:hover img{transform:scale(1.05)}
.heart svg{transition:transform .3s var(--spring),fill .2s}
.heart.on svg{fill:var(--dd);stroke:var(--dd);animation:pop .45s var(--spring)}
.row-link{transition:background-color .2s;border-radius:12px}
.row-link:hover{background:var(--soft)}
.disabled{pointer-events:none;opacity:.45}
.check.on{background:var(--save);border-color:var(--save);display:grid;place-items:center;color:#fff}
.check.on svg{animation:pop .35s var(--spring)}

/* segmented control with a sliding thumb */
.seg{position:relative;isolation:isolate}
.seg .thumb{position:absolute;top:4px;bottom:4px;border-radius:99px;background:var(--ink);z-index:-1;transition:left .38s var(--ease),width .38s var(--ease)}
.seg.w .thumb{background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg.slid span.on{background:transparent!important;box-shadow:none!important}
.seg span{cursor:pointer;user-select:none}

/* ---------- entrance + motion ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}
@keyframes lineUp{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes shimmer{from{background-position:-160px 0}to{background-position:160px 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bump{0%,100%{transform:scale(1)}40%{transform:scale(1.35)}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetDown{from{transform:none}to{transform:translateY(100%)}}
@keyframes grow{from{width:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,20px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}

[data-stagger]>*{animation:fadeUp .6s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms + var(--d,0ms))}
.fade-in{animation:fadeIn .5s var(--ease) both}
.pop{animation:pop .45s var(--spring) both}
.bump{animation:bump .5s var(--spring)}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--rd,0ms)}
.reveal.in{opacity:1;transform:none}

/* hero */
.hero-img{animation:kenburns 2.6s var(--ease) both}
.hero-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-line>span{display:inline-block;animation:lineUp .9s var(--ease) both;animation-delay:var(--d,0ms)}
.hero-in{animation:fadeUp .8s var(--ease) both;animation-delay:var(--d,0ms)}
.hero-card{animation:rise .9s var(--ease) both;animation-delay:.55s}

/* price checking: rows shimmer, then resolve one by one */
.chk .val{transition:opacity .3s}
.chk.pending .val{opacity:0}
.chk .skel{display:none;height:14px;width:64px;border-radius:7px;background:linear-gradient(90deg,var(--soft) 0,#e6e4de 50%,var(--soft) 100%);background-size:320px 100%;animation:shimmer 1.1s linear infinite}
.chk.pending .skel{display:block}
.chk.pending .ab{position:relative}
.chk.pending .ab::after{content:"";position:absolute;inset:-4px;border-radius:13px;border:2px solid transparent;border-top-color:var(--ink);animation:spin .8s linear infinite}
.chk.done{animation:none}
.chk .later{transition:opacity .35s .1s}
.chk.pending .later{opacity:0}
.winbox{transition:border-color .45s var(--ease),box-shadow .45s var(--ease),background-color .45s}
.checking .winbox{border-color:transparent!important;box-shadow:none!important}
.banner-msg{display:inline-flex;align-items:center;gap:6px}
.banner-msg svg{animation:pop .4s var(--spring)}
.mini-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(14,15,18,.25);border-top-color:var(--ink);animation:spin .7s linear infinite;flex:none}

/* item sheet */
.sheet-bg{animation:fadeIn .35s var(--ease) both}
.sheet{animation:sheetUp .55s var(--ease) both}
.sheet.closing{animation:sheetDown .35s var(--ease) both}
.bar-fill{animation:grow 1s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 300ms)}
.acc{overflow:hidden;transition:height .4s var(--ease)}

/* chart */
.chart .line{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.3s var(--ease) .15s forwards}
.chart .area{animation:fadeIn .8s var(--ease) .9s both}
.chart .dot{transform-box:fill-box;transform-origin:center;animation:pop .5s var(--spring) 1.25s both}
.marker{transition:left 1s var(--ease)}

/* toast */
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:500;font-size:14px;line-height:1.35;z-index:100;box-shadow:0 12px 30px rgba(0,0,0,.25);animation:toastIn .4s var(--spring) both;max-width:340px;text-align:center}
.webp~.toast,.toast.web{bottom:40px}

/* collapse (recent search rows, welcome banner) */
.collapse{overflow:hidden;transition:height .35s var(--ease),opacity .25s,margin .35s var(--ease),padding .35s var(--ease)}

/* view transitions between pages */
::view-transition-old(root){animation:.22s var(--ease) both vtOut}
::view-transition-new(root){animation:.42s var(--ease) both vtIn}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}
html[data-dir=back]::view-transition-new(root){animation-name:vtInBack}
@keyframes vtInBack{from{opacity:0;transform:translateY(-14px)}}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:var(--ease)}

/* footer */
.foot{border-top:1px solid var(--line);padding:28px 40px 36px;color:var(--muted);font-size:13px;line-height:1.5}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
body.still *,body.still *::before,body.still *::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important;transition-delay:0ms!important}
body.still .reveal{opacity:1;transform:none}

/* verification mode (?still=1&m=1): pin the phone column to x=0 so headless captures line up with the design renders */
body.still.demo #app{margin:0}
body.still.demo .pg.app .tabbar,body.still.demo .pg.app .bottombar{left:0;transform:none}
body.still.demo .pg.app .homebar{left:195px}

/* icon-only links/buttons: no text line box, so they're exactly the icon's height (matches the design's bare <svg>) */
.ico{display:inline-grid;place-items:center;line-height:0}  /* set by app.js on links/buttons that hold only an icon */
/* real-place name tile (views-real.js photo) */
.nametile{display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px;color:var(--ink);text-align:left}
.nametile b{font-weight:700;letter-spacing:-.02em;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nametile span{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;line-height:1.25;opacity:.6}
/* real menu prices side by side (views-real.js menuTable) */
.mt{width:100%;font-size:13.5px;line-height:1.35}
.mt th{text-align:right;font-weight:600;padding:8px 0 8px 12px;border-bottom:1.5px solid var(--line);vertical-align:bottom;white-space:nowrap}
.mt td{text-align:right;padding:9px 0 9px 12px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
.mt th:first-child,.mt td:first-child{text-align:left;padding-left:0;white-space:normal;width:100%}
.mt td:first-child b{font-weight:500}
.mt .p{display:inline-block;padding:1px 6px;border-radius:6px;margin-right:-6px}
.mt .best .p{background:var(--hl);font-weight:700}
.mt tbody[hidden]{display:none}