/* Regression fix 2026-10-28: desktop/tablet Nearby panel */
html,body{max-width:100%;overflow-x:hidden}
@media (min-width:900px){
  .yard-arrow{display:none!important}           /* decorative arrow looked like a stuck spinner */
  #bottomSheet{box-sizing:border-box;max-width:100%;overflow-x:hidden}
  #bottomSheet .kind-chips{flex-wrap:wrap;overflow:visible}
  #bottomSheet p,#bottomSheet .muted-note{white-space:normal;overflow-wrap:anywhere}
  .desk-nav{flex:0 1 auto;min-width:0}
}
@media (min-width:900px) and (max-width:1279.98px){
  .desk-nav{gap:2px}
  .desk-nav a{padding:8px 8px}
  .desk-nav .desk-how,.desk-nav .desk-install{display:none!important}
}
@media (min-width:900px) and (max-width:1099.98px){
  .desk-nav a:not(.desk-post) span{display:none}
}
/* Silver ring on kind chips (All types / Shops / ...) */
html[data-linkstyle="silver"] body[data-mode] .kind-chips button{border:2px solid transparent!important;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#C9CED5 0%,#8E959F 45%,#B9BFC7 70%,#7D848E 100%) border-box!important;color:#2B3037!important;box-shadow:0 0 5px rgba(120,128,138,.35)!important}
html[data-linkstyle="silver"] body[data-mode="night"] .kind-chips button{background:linear-gradient(#22262C,#22262C) padding-box,linear-gradient(135deg,#F4F6F8 0%,#B8BEC6 45%,#E6E9ED 70%,#A9B0B9 100%) border-box!important;color:#E4E7EB!important;box-shadow:0 0 8px rgba(217,221,227,.35)!important}
html[data-linkstyle="silver"] body[data-mode] .kind-chips button.active{background:linear-gradient(#2B3037,#2B3037) padding-box,linear-gradient(135deg,#F4F6F8 0%,#B8BEC6 45%,#E6E9ED 70%,#A9B0B9 100%) border-box!important;color:#fff!important}
/* Regfix 2 (1:33 PM): arrow off everywhere; pills wrap at every width so mouse users reach all */
.yard-arrow{display:none!important}
.kind-chips{flex-wrap:wrap!important;overflow:visible!important;row-gap:8px}
/* Header pin mockups (preview): ?pin=off | ?pin=small | ?pin=default */
html[data-pin="off"] .b4u-mark .b4u-pin{display:none!important}
html[data-pin="off"] .b4u-mark{gap:0!important}
html[data-pin="small"] .b4u-mark{align-items:center!important;gap:5px!important}
html[data-pin="small"] .b4u-mark .b4u-pin{width:18px!important;height:18px!important;flex:0 0 18px!important;border-radius:5px!important;transform:translateY(1px)}
/* Day-mode app icon art (preview): day B in day, night 4a in night */
body[data-mode="day"] img.install-banner-icon{content:url("../assets/icon-day-192.png?v=1")}
body[data-mode="day"] img.b4u-appicon{content:url("../assets/header-icon-day.png?v=1")}
html[data-dayicon="c"] body[data-mode="day"] img.install-banner-icon{content:url("../assets/icon-dayc-192.png?v=1")}
html[data-dayicon="c"] body[data-mode="day"] img.b4u-appicon{content:url("../assets/header-icon-dayc.png?v=1")}
/* Phone: install box was rendering behind the Nearby sales sheet (z 60) */
html body:not(#_r):not(#_s):not(#_t) #installBanner.install-banner{z-index:1200!important}
/* slim install bar v76 */
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner.install-banner{position:fixed!important;z-index:1200!important;display:flex!important;align-items:center!important;gap:10px!important;padding:8px 40px 8px 10px!important;min-height:0!important;height:auto!important;border-radius:14px!important;left:12px!important;right:12px!important;width:auto!important;max-width:none!important;top:calc(env(safe-area-inset-top,0px) + 150px)!important;bottom:auto!important;margin:0!important;box-sizing:border-box!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner .install-banner-row{display:flex!important;align-items:center!important;gap:10px!important;flex:1 1 auto!important;min-width:0!important;margin:0!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner img.install-banner-icon{width:34px!important;height:34px!important;border-radius:8px!important;flex:0 0 34px!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner .install-banner-copy strong{font-size:14px!important;line-height:1.2!important;display:block!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner .install-banner-copy p{font-size:11.5px!important;line-height:1.25!important;margin:2px 0 0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner[data-kind="ios"] .install-banner-cta{display:none!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner .install-banner-cta{width:auto!important;flex:0 0 auto!important;margin:0!important;padding:6px 12px!important;min-height:0!important;font-size:13px!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner .install-banner-x{position:absolute!important;top:50%!important;right:6px!important;transform:translateY(-50%)!important;width:30px!important;height:30px!important;margin:0!important}
@media (min-width:900px){html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner.install-banner{top:auto!important;left:auto!important;right:16px!important;bottom:40px!important;width:380px!important}}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner .install-banner-copy{min-width:0!important;flex:1 1 auto!important;overflow:hidden!important}
/* smaller install bar v78 */
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner.install-banner{min-height:44px!important;height:44px!important;padding:0 36px 0 8px!important;gap:8px!important;border-radius:12px!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner img.install-banner-icon{width:28px!important;height:28px!important;flex:0 0 28px!important;border-radius:7px!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner .install-banner-copy strong{font-size:14px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner .install-banner-copy p{display:none!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner[data-kind] .install-banner-cta{display:inline-flex!important;align-items:center!important;height:30px!important;padding:0 12px!important;font-size:13px!important;line-height:1!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner .install-banner-x{width:28px!important;height:28px!important;right:4px!important;font-size:20px!important;padding:0!important}
@media (min-width:900px){html body[data-mode]:not(#_r):not(#_s):not(#_t) #installBanner.install-banner{width:340px!important;height:42px!important;min-height:42px!important;bottom:36px!important}}
@media (max-width:380px){#installBanner .ib-brand{display:none}}

/* route planner: keep hint below install bar on phones (preview) */
@media (max-width:899px){html body:has(#installBanner) .ai-screen .rt-hint{margin-top:66px!important}}
/* address privacy (preview) */
.addr-lock-box{margin:0;padding:10px 12px;border-radius:12px;background:rgba(138,28,28,.08);border:1px solid rgba(138,28,28,.25);font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.pin-meta.addr-lock{font-size:12.5px;overflow-wrap:anywhere}
.safety-tip{margin:4px 0;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.04);font-size:13.5px;line-height:1.4}
[data-mode="night"] .safety-tip,[data-mode="night"] .addr-lock-box{background:rgba(255,255,255,.06)}
.approx-tag{display:inline-block;font-size:11px;font-weight:700;padding:1px 6px;border-radius:8px;background:#8a1c1c;color:#fff;vertical-align:middle}
/* v278j1: the selected type pill must be obvious in Day and Night (Night silver active was #2B3037 vs #22262C, almost invisible) */
html body[data-mode]:not(#_r):not(#_s):not(#_t) .kind-chips button.active,html[data-linkstyle] body[data-mode]:not(#_r):not(#_s):not(#_t) .kind-chips button.active{background:#F4F6F8!important;background-image:none!important;border-color:#F4F6F8!important;color:#0B0B0B!important;box-shadow:0 0 0 2px #22c55e,0 0 10px rgba(34,197,94,.45)!important}
html body[data-mode="day"]:not(#_r):not(#_s):not(#_t) .kind-chips button.active,html[data-linkstyle] body[data-mode="day"]:not(#_r):not(#_s):not(#_t) .kind-chips button.active{background:#0B0B0B!important;background-image:none!important;border-color:#0B0B0B!important;color:#fff!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) .kind-chips button.active *{color:inherit!important}
html body .kind-chips button{-webkit-tap-highlight-color:transparent}

/* v278m: giveaway never shows benefit fields (post + edit, any load path) */
form:has(select[name="kind"] option[value="free"]:checked) .gv-hide{display:none!important}
/* v278j2: the selected type pill must be obvious in Day and Night (Night silver active was #2B3037 vs #22262C, almost invisible) */
html body[data-mode]:not(#_r):not(#_s):not(#_t) .kind-chips button.active,html[data-linkstyle] body[data-mode]:not(#_r):not(#_s):not(#_t) .kind-chips button.active{background:#F4F6F8!important;background-image:none!important;border-color:#F4F6F8!important;color:#0B0B0B!important;box-shadow:0 0 0 2px #22c55e,0 0 10px rgba(34,197,94,.45)!important}
html body[data-mode="day"]:not(#_r):not(#_s):not(#_t) .kind-chips button.active,html[data-linkstyle] body[data-mode="day"]:not(#_r):not(#_s):not(#_t) .kind-chips button.active{background:#0B0B0B!important;background-image:none!important;border-color:#0B0B0B!important;color:#fff!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) .kind-chips button.active *{color:inherit!important}
html body .kind-chips button{-webkit-tap-highlight-color:transparent}
/* v278m2: Night form dropdowns readable (options were white on white) */
body[data-mode="night"] select,html[data-mode="night"] select{color-scheme:dark;background-color:#22262C!important;color:#F4F6F8!important;border-color:#3A4048}
body[data-mode="night"] select option,body[data-mode="night"] select optgroup,html[data-mode="night"] select option{background-color:#22262C!important;color:#F4F6F8!important}
body[data-mode="day"] select option{background-color:#fff;color:#0B0B0B}
/* v278m3: declare the page's own color scheme so browser Auto Dark Mode (Chrome/DevTools "auto dark") does not re-darken the white selected pill */
html[data-mode="night"]{color-scheme:dark}
html[data-mode="day"]{color-scheme:light}