/* ═══════════════════════════════════════════════════════════════════
   App shell — native-app navigation on phones & tablets (≤1020px)
   Top app bar · bottom tab bar · bottom sheets · full-screen search
   ═══════════════════════════════════════════════════════════════════ */
.abar,.tabbar,.sheet,.sheet-scrim,.sx{display:none}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
.tabbar{view-transition-name:tabbar}
.abar{view-transition-name:abar}

@media (max-width:1020px){
  :root{--hdr:56px;--tb:62px;--tbh:calc(var(--tb) + env(safe-area-inset-bottom))}
  html{scroll-padding-top:72px}
  body{padding-bottom:var(--tbh);-webkit-tap-highlight-color:transparent}
  .hdr,.menu-btn{display:none!important}
  body.nav-open{overflow:visible}

  /* ── Top app bar ─────────────────────────────────────────────── */
  .abar{display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:1050;height:calc(var(--hdr) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 8px 0 12px;
    background:rgba(255,255,255,.86);backdrop-filter:saturate(1.8) blur(18px);-webkit-backdrop-filter:saturate(1.8) blur(18px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
  body.scrolled .abar{border-bottom-color:rgba(20,40,25,.08);box-shadow:0 6px 18px -14px rgba(20,40,25,.45)}
  .abar-brand{display:flex;align-items:center;gap:9px;color:var(--ink);font:800 21px/1 var(--display);letter-spacing:-.03em;min-width:0}
  .abar-brand:hover{color:var(--ink)}
  .abar-title{flex:1;min-width:0;font:650 17px/1.2 var(--ui);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
  body.scrolled .abar-title,body.no-hero .abar-title{opacity:1;transform:none}
  .abar-act{margin-left:auto;display:flex;align-items:center;gap:2px}
  .abar-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:0;background:transparent;color:var(--ink);font-size:19px;cursor:pointer;transition:background .15s,transform .1s}
  .abar-btn:active{background:var(--paper-2);transform:scale(.92)}
  .abar-back{font-size:18px;margin-left:-6px}
  .abar-dot{position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--berry);color:#fff;font:700 10.5px/17px var(--ui);text-align:center;border:2px solid #fff}
  .abar-login{font-weight:650;font-size:15px;color:var(--forest);padding:9px 12px;border-radius:999px}
  .abar-login:active{background:var(--mint)}

  /* ── Bottom tab bar ──────────────────────────────────────────── */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:1100;height:var(--tbh);padding:0 6px env(safe-area-inset-bottom);
    background:rgba(255,255,255,.92);backdrop-filter:saturate(1.8) blur(18px);-webkit-backdrop-filter:saturate(1.8) blur(18px);border-top:1px solid rgba(20,40,25,.08)}
  .tabbar>a,.tabbar>button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;border:0;background:none;color:#6B776F;font:600 10.5px/1 var(--ui);letter-spacing:.01em;cursor:pointer;padding:0}
  .tabbar>a i,.tabbar>button>i{font-size:20px;width:56px;height:30px;display:grid;place-items:center;border-radius:999px;transition:background .2s,color .2s,transform .15s}
  .tabbar>a:active i,.tabbar>button:active>i{transform:scale(.88)}
  .tabbar .on{color:var(--forest)}
  .tabbar .on i{background:var(--mint);color:var(--forest)}
  .tabbar .tab-add{justify-self:center}
  .tabbar .tab-add i{width:52px;height:52px;border-radius:18px;background:var(--forest);color:var(--lime);font-size:22px;box-shadow:0 8px 20px -6px rgba(20,83,45,.6);margin-top:-14px}
  .tabbar .tab-add:active i{transform:scale(.9) rotate(90deg)}
  .tab-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;padding:2px;transition:box-shadow .2s}
  .tab-av .avatar{width:26px!important;height:26px!important;font-size:12px!important}
  .tabbar .on .tab-av{box-shadow:0 0 0 2px var(--forest)}
  .tab-dot{position:absolute;top:6px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--berry);color:#fff;font:700 10.5px/17px var(--ui);text-align:center;border:2px solid #fff}

  /* ── Bottom sheets ───────────────────────────────────────────── */
  .sheet-scrim{display:block;position:fixed;inset:0;z-index:1150;background:rgba(10,22,14,.45);opacity:0;transition:opacity .25s}
  .sheet-scrim.show{opacity:1}
  .sheet-scrim[hidden]{display:none}
  .sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:1160;max-height:86vh;max-height:86dvh;overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:26px 26px 0 0;
    padding:0 18px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px -20px rgba(0,0,0,.35);transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.9,.25,1)}
  .sheet.show{transform:none}
  .sheet[hidden]{display:none}
  .sheet.dragging{transition:none}
  .sheet-tall{height:86vh;height:86dvh}
  .sheet-grab{position:sticky;top:0;z-index:2;display:flex;justify-content:center;padding:10px 0 12px;background:#fff;margin:0 -18px;cursor:grab;touch-action:none}
  .sheet-grab span{width:40px;height:5px;border-radius:5px;background:#D9D4C5}
  .sheet-h{font-size:22px;margin:0 0 14px}
  .sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .sheet-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:14px 4px 12px;border-radius:18px;background:var(--paper);color:var(--ink);transition:transform .1s,background .15s}
  .sheet-tile:active{transform:scale(.97);background:var(--paper-2)}
  .sheet-tile .st-ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);font-size:17px;margin-bottom:6px}
  .sheet-tile b{font-size:13px;font-weight:650}
  .sheet-tile small{display:none}
  @media (min-width:600px){.sheet-tile small{display:block;font-size:12px;color:var(--muted);line-height:1.3}.sheet-grid{gap:10px}}

  .me-card{display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;background:linear-gradient(135deg,#F0FDF4,#ECFCCB);color:var(--ink);margin-bottom:12px}
  .me-card>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .me-card b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .me-card small{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
  .me-card>i{color:var(--muted)}
  .me-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
  .me-quick a{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 4px 12px;border-radius:16px;background:var(--paper);color:var(--ink);font-size:12.5px;font-weight:600}
  .me-quick a:active{background:var(--paper-2)}
  .me-quick i{font-size:20px;color:var(--forest)}
  .me-quick b{position:absolute;top:6px;right:10px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--berry);color:#fff;font-size:11px;line-height:18px;text-align:center}
  .me-guest{text-align:center;padding:6px 6px 14px}
  .me-guest .brand-mark{margin:0 auto 10px}
  .me-guest h2{font-size:22px;margin-bottom:6px}
  .me-guest p{color:var(--muted);font-size:14.5px;margin:0 auto 16px;max-width:320px}
  .me-auth{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .me-list h3{font:700 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:20px 4px 6px}
  .me-list a{display:flex;align-items:center;gap:14px;min-height:50px;padding:0 6px;border-bottom:1px solid var(--line-2);color:var(--ink);font-size:15.5px;font-weight:550}
  .me-list a:active{background:var(--paper)}
  .me-list a i{width:22px;text-align:center;color:var(--leaf-2);font-size:17px}
  .me-list a::after{content:"\f054";font:900 11px "Font Awesome 6 Free";color:#C9C3B3;margin-left:auto}
  .me-list .me-out{color:var(--berry);border-bottom:0;margin-top:8px}
  .me-list .me-out i{color:var(--berry)}
  .me-list .me-out::after{display:none}

  /* ── Full-screen search ──────────────────────────────────────── */
  .sx{display:flex;flex-direction:column;position:fixed;inset:0;z-index:1200;background:var(--paper);opacity:0;transform:translateY(12px);transition:opacity .2s,transform .22s}
  .sx.show{opacity:1;transform:none}
  .sx[hidden]{display:none}
  .sx-bar{position:relative;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px 16px;background:#fff;border-bottom:1px solid var(--line)}
  .sx-bar>i{position:absolute;left:30px;color:var(--muted);font-size:15px;pointer-events:none}
  .sx .sx-bar input[type=search]{flex:1;height:44px;border-radius:14px;border:0;background:var(--paper-2);padding:0 14px 0 40px;font-size:16px;min-width:0}
  .sx .sx-bar input[type=search]:focus{outline:none;box-shadow:0 0 0 3px rgba(22,163,74,.25);background:#fff}
  .sx-cancel{border:0;background:none;color:var(--forest);font-weight:650;font-size:15.5px;padding:8px 4px;cursor:pointer}
  .sx-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px calc(28px + env(safe-area-inset-bottom))}
  .sx-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}
  .sx-quick a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:600;text-align:center}
  .sx-quick a i{font-size:19px;color:var(--forest)}
  .sx-quick a:active{transform:scale(.96)}
  .sx-body h3{font:700 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 2px 10px}
  .sx-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .sx-cats a{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:12px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--ink);min-height:92px}
  .sx-cats a:active{transform:scale(.96)}
  .sx-cats span{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);font-size:15px}
  .sx-cats b{font-size:13px;font-weight:650;line-height:1.25}
  .sx-results{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
  .sx-results a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line-2);color:var(--ink)}
  .sx-results a:first-child{border-top:0}
  .sx-results a:active,.sx-results a.act{background:var(--paper)}
  .sx-results .s-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--mint);color:var(--forest);flex-shrink:0}
  .sx-results b{display:block;font-weight:600;font-size:15px;line-height:1.3}
  .sx-results small{color:var(--muted);font-size:12.5px}
  .sx-results .s-all{justify-content:center;font-weight:650;color:var(--leaf-2)}
  body.sheet-open,body.sx-open{overflow:hidden}

  /* ── Page chrome adjustments ─────────────────────────────────── */
  .flashes{z-index:1250;top:calc(var(--hdr) + env(safe-area-inset-top) + 10px)}
  .toast{bottom:calc(var(--tbh) + 14px)}
  .banner{font-size:13.5px}
  .ftr{margin-top:40px}
  .ftr-top{padding:36px 0 20px;gap:26px}
  .ftr-brand p{margin:10px 0 16px}
  .ftr-cols{gap:6px 18px}
  .ftr-cols a{padding:6px 0}
  .ftr-bot{padding-bottom:20px}
  body.map-page .ftr{display:none}

  /* fixed bottom UI from other areas sits ABOVE the tab bar */
  .dr-page .ld-mbar{bottom:var(--tbh)!important;padding-bottom:10px!important}
  .dr-page .filters-apply{bottom:var(--tbh)!important}
  .dr-page.filters-open .tabbar,.filters-open .tabbar{display:none}
  .map-wrap{height:calc(100vh - var(--hdr) - var(--tbh));height:calc(100dvh - var(--hdr) - var(--tbh) - env(safe-area-inset-top))}
  .sc-msg{height:calc(100vh - var(--hdr) - var(--tbh) - 24px)!important;height:calc(100dvh - var(--hdr) - var(--tbh) - 24px)!important}
}

/* Phones: single-column sheets are a bit tighter */
@media (max-width:380px){
  .sx-cats{grid-template-columns:repeat(2,1fr)}
  .tabbar>a i,.tabbar>button>i{width:48px}
}
/* Installed / standalone feel */
@media (display-mode:standalone){ .ftr{display:none} }

@media (max-width:1020px){
  .map-page .map-fab .btn-line{display:none}
  /* Home hero becomes a compact app header with a tap-to-search pill */
  .home .hero-in{padding:26px 16px 28px;gap:0}
  .home .hero h1{font-size:34px;margin-bottom:10px}
  .home .hero p.lead{font-size:15.5px;margin-bottom:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .home .hero-search{flex-direction:row;border-radius:999px;padding:5px;align-items:center}
  .home .hero-search .hs-where{display:none}
  .home .hero-search .hs-field{padding:0 6px 0 12px}
  .home .hero-search input{height:44px}
  .home .hero-search .btn{width:auto;min-height:44px;padding:0 18px}
  .home .hero-chips{flex-wrap:nowrap;overflow-x:auto;margin:16px -16px 0;padding:0 16px;scrollbar-width:none}
  .home .hero-chips::-webkit-scrollbar{display:none}
  .home .hero-chips a{flex-shrink:0}
  .home .hero-leaves{width:300px;right:-80px}
}
@media (max-width:1020px){
  .dr-page .ld-mbar{z-index:1090!important;background:rgba(255,255,255,.98)!important}
  /* Chat: the app bar has the back button; give the conversation the full height (no tab bar) */
  .sc-msg-page .sc-back-btn{display:none}
  body.sc-msg-page.has-thread{padding-bottom:0}
  body.sc-msg-page.has-thread .tabbar{display:none}
  body.sc-msg-page.has-thread .sc-msg{height:calc(100vh - var(--hdr) - 24px)!important;height:calc(100dvh - var(--hdr) - env(safe-area-inset-top) - 24px - env(safe-area-inset-bottom))!important}
}