/* Dominium map app — mobile-first. Brand colours are injected as --brand/--brand2/--accent/--accent2 by index.php */
:root{
  --ink:#14201A;--muted:#5C6B62;--line:#E4E0D4;--canvas:#F6F4EE;--card:#fff;
  --ok:#1F8A4C;--bad:#C0392B;--blue:#2F6BFF;
  --nav-h:64px;--top-h:112px;--r:18px;
  --sh1:0 1px 2px rgba(20,32,26,.08),0 2px 8px rgba(20,32,26,.06);
  --sh2:0 8px 28px rgba(20,32,26,.18),0 2px 6px rgba(20,32,26,.08);
  --f-d:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  --f-b:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px);
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{font:15px/1.45 var(--f-b);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;touch-action:manipulation}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 70%,#fff);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--f-d);letter-spacing:-.015em;line-height:1.15}

/* ───────── map ───────── */
#map{position:fixed;inset:0;background:#E9E6DC;z-index:0}
.leaflet-container{font:inherit;background:#E9E6DC}
.leaflet-control-attribution{font-size:10px!important;background:rgba(255,255,255,.7)!important;margin-bottom:calc(var(--nav-h) + var(--sab) + 6px)!important}
.leaflet-control-zoom{display:none}
.pin{position:relative;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .18s var(--ease)}
.pin b{display:block;white-space:nowrap;background:var(--brand);color:#fff;font:700 13px/1 var(--f-d);padding:8px 11px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.28);border:2px solid #fff}
.pin::after{content:"";width:9px;height:9px;background:var(--brand);border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg);margin-top:-6px;box-shadow:2px 2px 4px rgba(0,0,0,.15)}
.pin.feat b{background:var(--accent)}.pin.feat::after{background:var(--accent)}
.pin small{position:absolute;top:-8px;right:-8px;min-width:19px;height:19px;border-radius:99px;background:#fff;color:var(--brand);font:700 11px/19px var(--f-b);text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.3);padding:0 4px}
.pin.sel{z-index:900!important;transform:translate(-50%,-100%) scale(1.14)}
.pin.sel b{background:var(--ink)}.pin.sel::after{background:var(--ink)}
.pin.seen b{opacity:.78}
.cl{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;font:700 15px var(--f-d);border:3px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.3)}
.cl.m{width:54px;height:54px}.cl.l{width:62px;height:62px}
.you{width:18px;height:18px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.3);position:relative}
.you::after{content:"";position:absolute;inset:-12px;border-radius:50%;background:rgba(47,107,255,.22);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* ───────── top: search + chips ───────── */
#top{position:fixed;z-index:20;left:0;right:0;top:0;padding:calc(10px + var(--sat)) 12px 0;pointer-events:none}
#top>*{pointer-events:auto}
.search{position:relative;display:flex;align-items:center;gap:6px;height:52px;background:var(--card);border-radius:999px;box-shadow:var(--sh2);padding:0 8px 0 6px;max-width:560px;margin:0 auto}
.brandmark{width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font:800 18px var(--f-d);overflow:hidden;flex:none}
.brandmark img{width:100%;height:100%;object-fit:cover}
#q{flex:1;min-width:0;border:0;outline:0;background:none;height:100%;font-size:16px;padding:0 6px}
#q::placeholder{color:#8A958E}
.iconbtn{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--muted)}
.iconbtn:hover{background:var(--canvas)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--canvas) center/cover;display:grid;place-items:center;font:700 15px var(--f-d);color:var(--brand);border:1.5px solid var(--line);flex:none;overflow:hidden}
.avatar svg{width:20px;height:20px;color:var(--muted)}
.suggest{position:absolute;left:0;right:0;top:58px;background:var(--card);border-radius:20px;box-shadow:var(--sh2);padding:6px;max-height:60vh;overflow:auto;animation:pop .16s var(--ease)}
.suggest button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:10px;border-radius:14px}
.suggest button:hover,.suggest button.on{background:var(--canvas)}
.suggest .ic{width:34px;height:34px;border-radius:50%;background:var(--canvas);display:grid;place-items:center;color:var(--brand);flex:none}
.suggest .ic svg{width:18px;height:18px}
.suggest strong{display:block;font-weight:600}.suggest span.s{font-size:13px;color:var(--muted)}
.suggest .hd{font:600 11px var(--f-b);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 10px 2px}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 6px;scrollbar-width:none;max-width:560px;margin:0 auto;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:36px;padding:0 14px;border-radius:999px;background:var(--card);box-shadow:var(--sh1);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1.5px solid transparent;transition:background .15s,color .15s}
.chip.on{background:var(--brand);color:#fff}
.chip svg{width:15px;height:15px}

/* ───────── fabs ───────── */
.fabs{position:fixed;z-index:15;right:12px;display:flex;flex-direction:column;gap:10px;bottom:calc(var(--nav-h) + var(--sab) + var(--sheet-vis,0px) + 14px);transition:bottom .3s var(--ease)}
.fab{width:46px;height:46px;border-radius:50%;background:var(--card);box-shadow:var(--sh2);display:grid;place-items:center;color:var(--ink)}
.fab:active{transform:scale(.94)}
.fab.on{color:var(--blue)}
/* labelled Satellite | Map switch */
.fab.lyr{width:auto;height:40px;border-radius:20px;padding:3px;display:flex;align-items:center;gap:0;align-self:flex-end}
.fab.lyr .lo{padding:0 12px;height:34px;display:grid;place-items:center;border-radius:17px;font-weight:700;font-size:12px;font-family:inherit;color:var(--ink);opacity:.65}
.fab.lyr .lo.on{background:var(--blue);color:#fff;opacity:1}

/* ───────── bottom nav ───────── */
#nav{position:fixed;z-index:60;left:0;right:0;bottom:0;height:calc(var(--nav-h) + var(--sab));padding-bottom:var(--sab);background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
#nav button,#nav a{text-decoration:none;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font:600 11.5px var(--f-b);transition:color .15s}
#nav .on{color:var(--brand)}
#nav .on svg{fill:color-mix(in srgb,var(--brand) 14%,transparent)}
#nav a:active svg{transform:scale(.9)}
#nav b{position:absolute;top:7px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--accent);color:#fff;font:700 10.5px/17px var(--f-b);text-align:center;padding:0 4px}

/* ───────── bottom sheet ───────── */
.sheet{position:fixed;z-index:40;left:0;right:0;bottom:calc(var(--nav-h) + var(--sab));height:var(--sheet-h,70dvh);background:var(--card);border-radius:22px 22px 0 0;box-shadow:0 -6px 30px rgba(20,32,26,.2);display:flex;flex-direction:column;transform:translateY(var(--sheet-y,110%));transition:transform .34s var(--ease);will-change:transform;max-width:640px;margin:0 auto;overflow:hidden}
.sheet.drag,.sheet.drag .sheet-foot{transition:none}
.sheet:has(.sheet-foot:not([hidden])) .sheet-body{padding-bottom:92px}

.sheet.full{border-radius:0}
.grab{flex:none;height:22px;display:grid;place-items:center;cursor:grab;touch-action:none}
.grab i{width:40px;height:5px;border-radius:9px;background:#D3CFC2}
.sheet-head{flex:none;padding:0 16px 10px;touch-action:none}
.sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 0 24px}
.sheet:not(.full) .sheet-body{overflow-y:hidden}
.sheet-foot{transform:translateY(calc(var(--sheet-y,0px) * -1));transition:transform .34s var(--ease);flex:none;padding:10px 16px calc(10px);background:#fff;border-top:1px solid var(--line);display:flex;gap:10px}
.hrow{display:flex;gap:10px;align-items:flex-start}
.hrow .t{flex:1;min-width:0}
.hrow h2{font-size:19px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hrow .sub{color:var(--muted);font-size:13.5px;margin-top:3px}
.round{width:38px;height:38px;border-radius:50%;background:var(--canvas);display:grid;place-items:center;flex:none}
.round:active{transform:scale(.92)}
.round.heart.on svg{fill:#E0334F;stroke:#E0334F}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tag{font-size:12.5px;font-weight:600;background:var(--canvas);border-radius:999px;padding:5px 10px;color:var(--ink);display:inline-flex;align-items:center;gap:5px}
.tag.g{background:#E3F3EA;color:#16693A}.tag.a{background:#FBEFD9;color:#8A5A12}.tag svg{width:14px;height:14px}
.price{font:800 22px var(--f-d)}.price small{font:500 13px var(--f-b);color:var(--muted)}

.ulist{list-style:none;padding:0}
.urow{display:flex;gap:12px;padding:12px 16px;align-items:center;cursor:pointer;border-top:1px solid var(--line);width:100%;text-align:left;position:relative}
.urow:hover{background:#FBFAF6}.urow:active{background:var(--canvas)}
.urow .th{width:84px;height:72px;border-radius:14px;background:var(--canvas) center/cover;flex:none;position:relative;overflow:hidden}
.urow .info{flex:1;min-width:0}
.urow .info b{display:block;font-weight:650;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.urow .info .p{font:800 17px var(--f-d);margin-top:2px}.urow .info .p small{font:500 12px var(--f-b);color:var(--muted)}
.urow .info .m{font-size:12.5px;color:var(--muted);margin-top:2px}
.urow .heart{align-self:flex-start;margin:-4px -6px 0 0}
.sect{padding:16px}.sect h3{font-size:16.5px;margin-bottom:8px}
.sect p{color:#33433A;white-space:pre-line}
.sect+.sect{border-top:1px solid var(--line)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px 14px}
.fact{background:var(--canvas);border-radius:14px;padding:10px 6px;text-align:center}
.fact b{display:block;font:800 17px var(--f-d)}.fact span{font-size:11.5px;color:var(--muted)}
.amen{display:flex;flex-wrap:wrap;gap:8px}
.amen .tag{background:#fff;border:1px solid var(--line);font-weight:500}
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding:0 16px 14px;scrollbar-width:none;touch-action:pan-x}
.gallery::-webkit-scrollbar{display:none}
.gallery img{flex:none;width:86%;max-width:420px;height:200px;object-fit:cover;border-radius:18px;scroll-snap-align:center;background:var(--canvas)}
.gallery img:only-child{width:100%;max-width:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 20px;border-radius:15px;font:700 15.5px var(--f-b);background:var(--brand);color:#fff;flex:1;text-decoration:none;transition:transform .12s,opacity .15s;white-space:nowrap}
.btn:active{transform:scale(.97)}.btn[disabled]{opacity:.6;pointer-events:none}
.btn.alt{background:var(--canvas);color:var(--ink)}.btn.acc{background:var(--accent);color:#fff}.btn.wa{background:#1FAF5B}
.btn.line{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn.sm{height:40px;font-size:14px;border-radius:12px;flex:none;padding:0 14px}
.btn svg{width:19px;height:19px}
.spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite}
.dark-spin{border-color:rgba(0,0,0,.15);border-top-color:var(--brand)}
@keyframes rot{to{transform:rotate(1turn)}}
.skel{background:linear-gradient(90deg,#EFECE3 25%,#F8F6F0 50%,#EFECE3 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:12px}
@keyframes sk{to{background-position:-200% 0}}
.empty{text-align:center;padding:36px 24px;color:var(--muted)}
.empty h3{color:var(--ink);font-size:19px;margin:10px 0 6px}
.empty .big{width:64px;height:64px;border-radius:50%;background:var(--canvas);display:grid;place-items:center;margin:0 auto;color:var(--brand)}
.empty .big svg{width:30px;height:30px}
.empty .btn{margin-top:16px;flex:none;display:inline-flex}
.banner{margin:0 16px 12px;padding:12px 14px;border-radius:14px;background:#FBEFD9;color:#7A5210;font-size:13.5px}
.pillrow{display:flex;gap:8px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none}.pillrow::-webkit-scrollbar{display:none}

/* forms */
.form{padding:4px 16px 20px;display:grid;gap:14px}
.fld label{display:block;font:600 13px var(--f-b);margin-bottom:6px}
.fld input,.fld textarea,.fld select{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;font-size:16px;background:#fff;outline:0;transition:border .15s,box-shadow .15s}
.fld textarea{min-height:104px;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}
.fld.err input,.fld.err textarea{border-color:var(--bad)}.fld .e{color:var(--bad);font-size:12.5px;margin-top:5px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg button{height:44px;border-radius:12px;border:1.5px solid var(--line);font-weight:600;background:#fff}
.seg button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.success{text-align:center;padding:30px 20px}
.success .tick{width:70px;height:70px;border-radius:50%;background:#E3F3EA;color:var(--ok);display:grid;place-items:center;margin:0 auto 14px;animation:pop .4s var(--ease)}
.success .tick svg{width:34px;height:34px;stroke-width:2.6}

/* ───────── pages (browse / saved / account) ───────── */
.page{position:fixed;z-index:30;inset:0 0 calc(var(--nav-h) + var(--sab)) 0;background:var(--canvas);overflow-y:auto;overscroll-behavior:contain;padding-top:calc(14px + var(--sat));animation:fade .22s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.pg{max-width:1100px;margin:0 auto;padding:0 16px 40px}
.pg>h1{font-size:28px;font-weight:800;margin:6px 0 4px}.pg>.lead{color:var(--muted);margin-bottom:14px}
.pg .tools{position:sticky;top:-1px;z-index:5;background:var(--canvas);padding:8px 0 10px;display:grid;gap:10px}
.tools .row{display:flex;gap:10px}
.tools .inp{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:0 12px;height:46px;box-shadow:var(--sh1)}
.tools .inp input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px}
.tools select{height:46px;border-radius:14px;border:0;background:#fff;padding:0 12px;box-shadow:var(--sh1);font-weight:600}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--sh1);cursor:pointer;position:relative;text-align:left;transition:transform .18s var(--ease),box-shadow .18s;display:block;width:100%}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.card .im{height:170px;background:var(--canvas) center/cover;position:relative}
.card .ft{position:absolute;left:10px;top:10px;display:flex;gap:6px}
.card .ft .tag{background:rgba(255,255,255,.95);box-shadow:var(--sh1)}
.card .heart{position:absolute;right:8px;top:8px;background:rgba(255,255,255,.95);box-shadow:var(--sh1)}
.card .bd{padding:12px 14px 14px}
.card .bd .p{font:800 20px var(--f-d)}.card .bd .p small{font:500 12.5px var(--f-b);color:var(--muted)}
.card .bd b{display:block;font-weight:650;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .bd .m{font-size:13px;color:var(--muted);margin-top:2px}
.more{display:flex;justify-content:center;padding:22px}
.acc-hero{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-radius:24px;padding:22px;display:flex;gap:16px;align-items:center;margin-bottom:16px}
.acc-hero .avatar{width:64px;height:64px;font-size:24px;border:3px solid rgba(255,255,255,.4);background-color:#fff}
.acc-hero h2{font-size:21px}.acc-hero p{opacity:.8;font-size:14px;overflow-wrap:anywhere}
.menu{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--sh1);margin-bottom:16px}
.menu a,.menu button{display:flex;align-items:center;gap:14px;padding:15px 16px;border-top:1px solid var(--line);width:100%;text-align:left;text-decoration:none;color:inherit;font-weight:550}
.menu>:first-child{border-top:0}.menu a:hover,.menu button:hover{background:#FBFAF6}
.menu svg{color:var(--brand)}.menu .r{margin-left:auto;color:var(--muted);font-size:13px;font-weight:500}
.guest-card{background:#fff;border-radius:24px;padding:26px 22px;text-align:center;box-shadow:var(--sh1);margin-bottom:16px}
.guest-card h2{font-size:23px;margin-bottom:6px}.guest-card p{color:var(--muted);margin-bottom:16px}

/* ───────── auth sheet ───────── */
.auth{position:fixed;inset:0;z-index:100;background:rgba(10,20,15,.5);display:flex;align-items:flex-end;justify-content:center;animation:fadeb .2s}
@keyframes fadeb{from{opacity:0}}
.auth .box{background:#fff;width:100%;max-width:440px;border-radius:26px 26px 0 0;padding:10px 22px calc(24px + var(--sab));animation:up .34s var(--ease);max-height:94dvh;overflow:auto;position:relative;touch-action:pan-y}
@keyframes up{from{transform:translateY(100%)}}
.auth .box .grab{margin:0 -22px}
.auth h2{font-size:24px;margin:4px 0 4px;font-weight:800}.auth .why{color:var(--muted);margin-bottom:18px}
.gbtn{min-height:46px;display:flex;justify-content:center;margin-bottom:4px}
.gfall{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:999px;border:1.5px solid var(--line);width:100%;font-weight:650;background:#fff;text-decoration:none;color:var(--ink)}
.gfall svg{width:20px;height:20px;stroke:none}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12.5px;margin:14px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth .form{padding:0}
.auth .sw{text-align:center;margin-top:14px;color:var(--muted);font-size:14px}.auth .sw button{color:var(--brand);font-weight:700}
.auth .msg{background:#FDECEA;color:#8E2A1F;border-radius:12px;padding:10px 12px;font-size:13.5px;margin-bottom:12px}
.auth .fine{font-size:12px;color:var(--muted);text-align:center;margin-top:14px}
.auth .x{position:absolute;right:14px;top:12px}

#toasts{position:fixed;z-index:200;left:0;right:0;bottom:calc(var(--nav-h) + var(--sab) + 16px);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;box-shadow:var(--sh2);font-weight:550;font-size:14px;max-width:420px;animation:pop .25s var(--ease);pointer-events:auto}
.toast.bad{background:var(--bad)}.toast button{color:var(--accent2);font-weight:700;margin-left:12px}

/* ───────── desktop: left panel + rail ───────── */
@media (min-width:900px){
  :root{--nav-h:0px}
  #nav{top:0;bottom:0;right:auto;left:0;width:76px;height:auto;padding:14px 0;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;border-top:0;border-right:1px solid var(--line);background:#fff}
  #nav button,#nav a{text-decoration:none;height:64px;width:100%}
  #top{left:76px;right:auto;width:440px;padding:12px 16px 0}
  .search{max-width:none;margin:0}.chips{max-width:none;margin:0}
  .sheet{left:92px;right:auto;width:408px;top:128px;bottom:16px;height:auto;max-width:none;margin:0;transform:none!important;border-radius:22px;transition:opacity .2s,translate .3s var(--ease)}
  .sheet.hidden{opacity:0;pointer-events:none;translate:-20px 0}
  .sheet .grab{display:none}.sheet-head{padding-top:16px}.sheet:not(.full) .sheet-body{overflow-y:auto}
  .fabs{bottom:24px}
  .page{left:76px;bottom:0}
  .leaflet-control-attribution{margin-bottom:0!important}
  #toasts{bottom:24px;left:76px}
  .auth{align-items:center}.auth .box{border-radius:26px;padding-bottom:24px}.auth .grab{display:none}
  .fabs{right:16px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.grab,.sheet-head{user-select:none;-webkit-user-select:none}
.auth a{color:var(--brand);font-weight:600}.auth .fine a{text-decoration:underline}
.tools select{max-width:132px;min-width:0;flex:none;font-size:14px}.tools .inp{min-width:0}

.brandmark{text-decoration:none}
#nav a:hover{color:var(--brand)}
.pg>*,.tools,.tools .row{min-width:0}.tools .inp input{width:100%;min-width:0}

/* ───────── v4: loading veil, no-photo tiles, suggest layering, SEO pages ───────── */
:root{--sun:#F2A93B;--coral:#EF6F4F;--leaf:#2E9E6B}
#top:focus-within,#top:has(.suggest:not([hidden])){z-index:55}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#map{background:linear-gradient(135deg,#EFEAD9,#E3EFE4)}
.skel{background:linear-gradient(90deg,#EEE9DB 25%,#F8F4E8 45%,#EEE9DB 65%);background-size:200% 100%;animation:shine 1.3s linear infinite;border-radius:14px}
@keyframes shine{to{background-position:-200% 0}}
#veil{position:fixed;inset:0;z-index:60;display:grid;place-items:center;align-content:center;gap:14px;background:linear-gradient(160deg,#FFF6E3,#E6F3EA);transition:opacity .5s var(--ease),visibility .5s;text-align:center;pointer-events:none}
#veil.out{opacity:0;visibility:hidden}
#veil .vpin{position:relative;width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(160deg,var(--sun),var(--coral));box-shadow:0 10px 18px rgba(239,111,79,.35);animation:bob 1.1s ease-in-out infinite}
#veil .vpin::after{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff}
#veil .vsh{width:26px;height:7px;border-radius:50%;background:rgba(20,32,26,.18);animation:shd 1.1s ease-in-out infinite}
#veil p{font:600 15px var(--f-d);color:var(--ink);margin:0}#veil small{color:var(--muted);font-size:13px}
@keyframes bob{50%{transform:rotate(-45deg) translate(6px,6px)}}
@keyframes shd{50%{transform:scale(.6);opacity:.5}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}
.ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px;color:hsl(var(--h) 42% 36%);
  background:radial-gradient(circle at 25% 20%,hsl(var(--h) 90% 96%),transparent 55%),linear-gradient(145deg,hsl(var(--h) 75% 91%),hsl(calc(var(--h) + 28) 62% 82%))}
.ph::before{content:"";position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(135deg,transparent 0 14px,hsl(var(--h) 60% 98%/.55) 14px 16px)}
.ph svg{position:relative;width:34px;height:34px;opacity:.9}.ph.big svg{width:56px;height:56px}
.ph em{position:relative;font:700 11px var(--f-b);font-style:normal;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.urow .th,.card .im{position:relative;overflow:hidden}
.urow .th .ph svg{width:28px;height:28px}
.phbox{position:relative;flex:none;width:100%;height:170px;border-radius:18px;overflow:hidden}
.crumbs{font-size:13px;color:var(--muted);margin:4px 0 10px}.crumbs a{color:inherit}
.lnk{color:inherit;text-decoration:none}.lnk:hover{text-decoration:underline}
.page .pg h2{font:700 19px var(--f-d);margin:18px 0 10px}
body[data-page=listing] .page,body[data-page=building] .page,body[data-page=area] .page{display:block}

/* ───────── v5: landmarks, directions, browse modes, install, settings ───────── */
.lmline{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:12.5px;font-weight:600;color:var(--brand)}
.lmline svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.tag.lm{display:inline-flex;align-items:center;gap:4px;background:#E7F1EA;color:#1d5a3a}
.tag.lm svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.chip.near{display:inline-flex;align-items:center;gap:6px}.chip.near svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.flag{display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.flag svg{width:30px;height:30px;stroke:#fff;fill:#E0334F;stroke-width:1.6}
.flag span{margin-top:-2px;background:#fff;border-radius:999px;padding:2px 9px;font:700 12px var(--f-b);color:var(--ink);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.card .sharebtn{position:absolute;right:54px;top:8px;background:rgba(255,255,255,.95);box-shadow:var(--sh1);width:38px;height:38px}
.card.apt .sharebtn{right:8px}
.card.apt{cursor:pointer}
.seg.two{grid-template-columns:1fr 1fr;margin:4px 0 6px}
.pg .tools .row{flex-wrap:wrap}.pg .tools #bform{flex:1;min-width:0}
.pg .tools .suggest{top:52px;z-index:30}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--canvas);padding:4px;border-radius:14px;margin:2px 0 10px}
.modes button{height:38px;border-radius:11px;font-weight:700;color:var(--muted)}.modes button.on{background:#fff;color:var(--brand);box-shadow:var(--sh1)}
.wayp{display:flex;align-items:center;gap:12px;padding:8px 4px;font-weight:600}
.wayp i{width:14px;height:14px;border-radius:50%;flex:none;border:3px solid #fff;box-shadow:0 0 0 2px #2563eb;background:#2563eb}.wayp i.b{background:#E0334F;box-shadow:0 0 0 2px #E0334F}
.wayp span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkbtn{color:var(--brand);font-weight:700;font-size:13px;padding:6px}
.rsum{display:flex;align-items:baseline;gap:10px;padding:10px 4px 8px;border-top:1px solid var(--line);margin-top:6px}.rsum b{font:800 26px var(--f-d)}.rsum span{color:var(--muted)}
.steps{list-style:none;margin:0;padding:0}.steps li{border-top:1px solid var(--line)}
.steps button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 4px}
.steps .ico{width:34px;height:34px;border-radius:50%;background:var(--canvas);display:grid;place-items:center;flex:none;color:var(--brand)}
.steps .ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;transform:rotate(var(--r,0deg))}
.steps .tx{flex:1;font-weight:600}.steps .ds{color:var(--muted);font-size:13px;white-space:nowrap}
.inst{position:fixed;z-index:45;left:12px;right:12px;bottom:calc(var(--nav-h) + var(--sab) + 12px);display:flex;align-items:center;gap:12px;background:#fff;border-radius:20px;box-shadow:var(--sh2);padding:12px 12px 12px 14px;animation:pop .25s var(--ease)}
.inst .ic{width:42px;height:42px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none}.inst .ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.inst div{flex:1;min-width:0}.inst b{display:block}.inst small{color:var(--muted)}
.inst .btn{flex:none;min-height:38px;padding:0 16px}
@media (min-width:900px){.inst{left:92px;right:auto;width:380px;bottom:20px}}
.inst-steps{margin:8px 0 18px;padding-left:20px;display:grid;gap:10px;line-height:1.45}
.setcard{background:#fff;border-radius:20px;padding:16px;box-shadow:var(--sh1);margin-bottom:12px}.setcard h3{margin:0 0 8px;font:700 17px var(--f-d)}
.row-ok{display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--leaf);font-weight:700}.row-ok svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4}
#bsort{max-width:46%}

.actrow{display:flex;gap:8px;padding:2px 0 12px;flex-wrap:wrap}.actrow .chip{height:40px;border:1.5px solid var(--line);box-shadow:none}