/* HANA 2026-10-19 phone-only map presentation. No PC layouts, data, Runner, or map API changes. */
@media screen and (max-width:760px){
  :root{color-scheme:light}
  html,body,.public-app{max-width:100vw;overflow:hidden}
  .public-app{height:100dvh;background:#fff}
  .public-header{
    position:relative!important;display:flex!important;flex:0 0 auto!important;flex-wrap:wrap!important;
    align-content:center!important;align-items:center!important;
    height:auto!important;min-height:0!important;gap:7px 8px!important;
    padding:8px max(12px,env(safe-area-inset-right,0px)) 9px max(12px,env(safe-area-inset-left,0px))!important;
    border-top:3px solid #ed792f!important;border-bottom:1px solid #e5e8ed!important;
    background:#fff!important;color:#263749!important;color-scheme:light!important;
    box-shadow:0 2px 8px rgb(16 40 68 / 6%)!important;z-index:9!important;
  }
  .public-brand{
    order:0!important;flex:1 1 145px!important;min-width:0!important;
    width:auto!important;max-width:calc(100% - 98px)!important;
    min-height:42px!important;padding:4px 5px!important;
    background:#fff!important;border-radius:10px!important;
    -webkit-tap-highlight-color:transparent;
  }
  .public-brand img[data-brand-logo]{
    display:block!important;width:auto!important;max-width:156px!important;
    height:36px!important;object-fit:contain!important;object-position:left center!important;
    filter:none!important;mix-blend-mode:normal!important;
  }
  /* Bright/white branded artwork receives a dark tile, even if the system uses dark mode. */
  .public-brand.hana-mobile-light-logo{
    background:#17314c!important;border:1px solid #284967!important;
    box-shadow:inset 0 0 0 1px #ffffff12!important;
  }
  .public-session-controls{
    order:1!important;position:static!important;right:auto!important;top:auto!important;
    display:flex!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;
    max-width:calc(100% - 155px)!important;gap:4px!important;margin:0 0 0 auto!important;
  }
  .public-session-controls[hidden]{display:none!important}
  .public-session-controls .public-session-name{display:none!important}
  .public-session-link,.public-session-button{
    box-sizing:border-box!important;height:42px!important;min-height:42px!important;
    padding:0 10px!important;font-size:13px!important;font-weight:750!important;
    border:1px solid #dbe1e9!important;border-radius:10px!important;
    color:#233e59!important;background:#fff!important;white-space:nowrap!important;
  }
  .public-search-group{
    order:2!important;flex:1 1 100%!important;display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;grid-template-rows:44px 39px!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    margin:0!important;padding:0!important;gap:7px!important;
  }
  .public-search{
    position:relative!important;order:0!important;grid-column:1/-1!important;grid-row:1!important;
    box-sizing:border-box!important;flex:none!important;width:100%!important;
    min-width:0!important;max-width:100%!important;height:44px!important;
    padding:0 12px!important;border-radius:11px!important;
    background:#f5f7fa!important;border:1px solid #d8dfe9!important;
  }
  .public-search input{min-width:0!important;width:100%!important;font-size:16px!important;color:#1f3147!important}
  .public-search input::placeholder{color:#77879b!important}
  .public-quick-filters{
    position:static!important;order:1!important;grid-column:1/-1!important;grid-row:2!important;
    display:flex!important;align-items:center!important;flex:none!important;
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
    height:39px!important;margin:0!important;padding:0 2px 1px 0!important;gap:6px!important;
    overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;
    scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;
  }
  .public-quick-filters::-webkit-scrollbar{display:none}
  .public-quick-filters select,.public-mode-fields select,.public-range-button{
    display:inline-flex!important;flex:0 0 auto!important;min-width:100px!important;
    max-width:165px!important;height:38px!important;min-height:38px!important;
    padding:0 9px!important;border:1px solid #dbe2eb!important;border-radius:10px!important;
    background:#fff!important;color:#2f4155!important;font-size:13px!important;font-weight:650!important;
  }
  #public-property-type-filter,#public-trade-filter{display:block!important;flex:0 0 calc(50% - 3px)!important;min-width:0!important;max-width:none!important}
  .public-mode-fields{flex:0 0 auto!important;display:flex!important;min-width:0!important}
  #public-search-submit{display:none!important}
  #public-youtube-open:not(.hana-mobile-map-youtube){display:none!important}
  .public-main{position:relative!important;display:block!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important}
  .public-map-area{position:relative!important;height:100%!important;min-height:0!important}
  .public-map{inset:0!important}
  /* The original list is still the original interactive list; only its mobile entrance moves to the left. */
  .public-results{
    position:absolute!important;top:0!important;bottom:0!important;left:0!important;right:auto!important;
    z-index:16!important;display:flex!important;flex-direction:column!important;
    width:min(88vw,370px)!important;max-width:calc(100% - 42px)!important;height:100%!important;
    min-height:0!important;border:0!important;border-right:1px solid #dce4ee!important;
    border-radius:0 16px 16px 0!important;background:#fff!important;
    box-shadow:6px 0 24px rgb(18 36 58 / 16%)!important;
    transform:translateX(calc(-100% - 8px))!important;
    transition:transform .22s cubic-bezier(.22,.8,.34,1)!important;
    overflow:hidden!important;
  }
  .public-results.is-open{transform:translateX(0)!important}
  .public-results .property-rail{
    display:flex!important;flex:0 0 auto!important;min-height:68px!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    border-bottom:1px solid #e7edf3!important;overscroll-behavior-x:contain!important;
  }
  .public-results-content{display:flex!important;flex:1 1 auto!important;min-height:0!important;flex-direction:column!important}
  .public-results .results-heading{
    position:relative!important;flex:0 0 auto!important;height:66px!important;
    min-height:66px!important;align-items:center!important;cursor:default!important;
    padding:12px 16px!important;border-top:0!important;border-bottom:1px solid #e7edf3!important;
  }
  .public-results .results-heading::before{display:none!important}
  .public-results .results-heading strong{font-size:18px!important;color:#1b344f!important}
  .public-results .results-heading span{font-size:13px!important;color:#63758a!important}
  .public-results .public-list{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;padding:10px 10px 90px!important}
  .public-results .listing-card{min-height:120px!important;gap:10px!important;margin-bottom:8px!important;padding:11px!important;border:1px solid #e6ebf1!important;border-radius:12px!important;background:#fff!important}
  .public-results .listing-photo-frame{width:108px!important;height:94px!important;flex:0 0 108px!important}
  .public-results .listing-price{font-size:17px!important;line-height:1.4!important}
  .public-results .listing-title{font-size:14px!important;line-height:1.4!important}
  .public-results .listing-meta,.public-results .listing-address{font-size:13px!important;line-height:1.45!important}
  #public-mobile-list-toggle{display:none!important}
  .hana-map-list-backdrop{
    display:none;position:absolute;inset:0;z-index:15!important;background:rgb(11 26 43 / 38%);
  }
  .public-main.hana-list-open .hana-map-list-backdrop{display:block!important}
  .hana-mobile-swipe-handle{
    position:absolute!important;top:47%!important;left:0!important;z-index:7!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:25px!important;height:72px!important;padding:0!important;
    border:1px solid #dbe3ea!important;border-left:3px solid #ef7c29!important;
    border-radius:0 12px 12px 0!important;background:#fff!important;color:#b76128!important;
    box-shadow:2px 2px 8px #14283b1f!important;font-size:18px!important;font-weight:800!important;
    touch-action:pan-y!important;
  }
  .public-main.hana-list-open .hana-mobile-swipe-handle{visibility:hidden!important}
  .hana-map-bottom-nav{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:100!important;
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    box-sizing:border-box!important;width:100%!important;
    height:calc(68px + env(safe-area-inset-bottom,0px))!important;
    padding:5px max(8px,env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))!important;
    gap:3px!important;border-top:1px solid #e1e6ee!important;
    background:#fff!important;box-shadow:0 -3px 14px #112b4617!important;color-scheme:light!important;
  }
  .hana-map-bottom-nav button{
    box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;min-width:0!important;min-height:53px!important;
    margin:0!important;padding:6px 2px!important;gap:3px!important;border:0!important;
    border-radius:12px!important;background:transparent!important;color:#596a7d!important;
    font-family:inherit!important;font-size:12px!important;font-weight:750!important;line-height:1.1!important;
    -webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;
  }
  .hana-map-bottom-nav button svg{display:block!important;width:23px!important;height:23px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .hana-map-bottom-nav button[aria-current=page]{background:#fff0e4!important;color:#b45414!important}
  .hana-map-bottom-nav button:focus-visible,.hana-mobile-swipe-handle:focus-visible{outline:3px solid #f5a263!important;outline-offset:2px!important}
  .map-tools{
    top:10px!important;right:9px!important;bottom:auto!important;max-width:calc(100% - 18px)!important;
    gap:6px!important;align-items:flex-end!important;
  }
  .map-type-tools{
    display:flex!important;flex-direction:row!important;max-width:calc(100vw - 18px)!important;
    width:max-content!important;gap:2px!important;overflow-x:auto!important;scrollbar-width:none!important;
    background:#ffffffef!important;border-radius:11px!important;padding:4px!important;
  }
  .map-type-tools button{min-height:35px!important;height:35px!important;padding:0 6px!important;font-size:11px!important;border-radius:8px!important}
  #public-map-roadmap[hidden]{display:none!important}
  .map-type-tools #public-youtube-open.hana-mobile-map-youtube{
    position:static!important;order:initial!important;grid-column:auto!important;grid-row:auto!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;
    box-sizing:border-box!important;margin:0!important;width:auto!important;min-width:98px!important;max-width:none!important;
    height:35px!important;min-height:35px!important;padding:0 8px!important;border:1px solid #dce3ea!important;
    border-radius:8px!important;background:#fff!important;color:#34465b!important;font-size:11px!important;font-weight:750!important;
    white-space:nowrap!important;box-shadow:none!important;
  }
  .map-type-tools #public-youtube-open.hana-mobile-map-youtube img{width:17px!important;height:17px!important;flex:none!important}
  .map-tools>button{min-width:44px!important;width:44px!important;min-height:44px!important;height:44px!important;border-radius:11px!important;background:#fff!important}
  .map-side-switch{top:62px!important;right:65px!important;left:auto!important}
  .public-map-legend{
    left:10px!important;right:10px!important;top:auto!important;
    bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;
    width:max-content!important;max-width:calc(100% - 78px)!important;
    gap:4px 6px!important;padding:7px 9px!important;font-size:10px!important;
    background:#fffffff0!important;
  }
  .public-detail{
    top:auto!important;right:10px!important;bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;
    left:10px!important;z-index:10!important;width:auto!important;
    max-height:min(65dvh,540px)!important;height:auto!important;
    border-radius:17px!important;box-shadow:0 9px 30px rgb(16 40 70 / 22%)!important;
  }
  .public-detail .detail-close{width:44px!important;height:44px!important;right:9px!important;top:9px!important}
  .public-filter-popover{
    position:absolute!important;z-index:14!important;top:auto!important;
    left:12px!important;right:12px!important;bottom:calc(79px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;max-height:min(62dvh,550px)!important;overflow-y:auto!important;
    padding:16px!important;border-radius:16px!important;box-shadow:0 8px 28px #14283b26!important;
  }
  .public-range-popover{
    bottom:calc(69px + env(safe-area-inset-bottom,0px))!important;z-index:22!important;
    max-height:65dvh!important;padding-bottom:20px!important;
  }
  .public-youtube-drawer{
    bottom:calc(68px + env(safe-area-inset-bottom,0px))!important;
    max-height:calc(100% - 80px)!important;z-index:13!important;
  }
  .public-youtube-player-overlay{z-index:21!important}
  .public-map-status{max-width:calc(100% - 45px)!important;top:42%!important}
  .public-search input:focus-visible,.public-quick-filters select:focus-visible,.public-header button:focus-visible{
    outline:3px solid #eaa36a!important;outline-offset:1px!important
  }
  #public-admin-dialog,#public-filter-dialog{max-width:calc(100vw - 22px)!important}
  #public-admin-dialog input,#public-filter-dialog input,#public-filter-dialog select{min-height:48px!important;font-size:16px!important}
}
@media screen and (max-width:350px){
  .public-brand img[data-brand-logo]{max-width:118px!important;height:33px!important}
  .public-session-link,.public-session-button{padding:0 7px!important;font-size:12px!important}
  .map-type-tools #public-youtube-open.hana-mobile-map-youtube{min-width:92px!important;padding:0 6px!important;font-size:10px!important}
  .map-type-tools #public-youtube-open.hana-mobile-map-youtube img{width:16px!important;height:16px!important}
  .map-type-tools button{padding:0 4px!important;font-size:10px!important}
}
@media screen and (min-width:761px),print{
  .hana-map-bottom-nav,.hana-map-list-backdrop,.hana-mobile-swipe-handle{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  @media screen and (max-width:760px){.public-results{transition:none!important}}
}
/* Compact, scrollable mobile detail: the map stays visible above and around the card. */
@media screen and (max-width:760px){
  .public-detail{
    max-height:min(43dvh,350px)!important;
    height:auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;
  }
  .public-detail .detail-hero-frame{
    min-height:125px!important;
    max-height:150px!important;
    aspect-ratio:16/7!important;
    overflow:hidden!important;
  }
  .public-detail .detail-hero{
    min-height:125px!important;
    max-height:150px!important;
    height:145px!important;
    object-fit:cover!important;
  }
  .public-detail .detail-body{
    padding:14px!important;
  }
  .public-detail .detail-price{font-size:23px!important}
  .public-detail .detail-title{font-size:17px!important}
  .public-detail .detail-close{
    position:sticky!important;
    top:7px!important;
    right:8px!important;
    float:right!important;
    margin:6px 7px -50px 0!important;
    background:#fff!important;
    border:1px solid #e0e6ed!important;
    box-shadow:0 2px 8px #132b4420!important;
  }
  .public-detail .detail-drag-handle{min-height:21px!important}
}
/* Slide-to-close feedback is mobile-only; existing close/cancel logic stays authoritative. */
@media screen and (max-width:760px){
  .public-detail.is-open:not(.is-closing){animation:hana-mobile-detail-in .14s ease-out both!important}
  .public-detail.is-closing{animation:hana-mobile-detail-out .13s ease-in both!important;pointer-events:none!important}
  .public-detail .detail-panel-heading{cursor:grab!important;touch-action:pan-y!important}
  .public-detail .detail-panel-heading:active{cursor:grabbing!important}
  @keyframes hana-mobile-detail-in{
    from{opacity:.65;transform:translateX(26px)}
    to{opacity:1;transform:translateX(0)}
  }
  @keyframes hana-mobile-detail-out{
    from{opacity:1;transform:translateX(0)}
    to{opacity:.1;transform:translateX(-105vw)}
  }
}
@media(prefers-reduced-motion:reduce){
  @media screen and (max-width:760px){
    .public-detail.is-open:not(.is-closing),.public-detail.is-closing{animation:none!important}
  }
}

/* Keep the map, location and scope controls while removing advanced modes on phones. */
@media screen and (max-width:760px){
 #public-map-skyview,#public-map-terrain,#public-map-cadastral,#public-map-roadview,#public-zoom-in,#public-zoom-out{display:none!important}
}

/* Keep the same phone geometry while authentication and role controls resolve. */
@media screen and (max-width:760px){
  .public-header .public-brand{flex:0 0 min(215px,calc(100% - 151px))!important;width:min(215px,calc(100% - 151px))!important;max-width:none!important}
  .public-header .public-session-controls:not([hidden]){flex:0 0 143px!important;width:143px!important;max-width:143px!important;justify-content:flex-end!important}
  #public-my-listings[hidden]{display:flex!important}
  #public-my-listings:has(input:disabled){opacity:.65}
}

/* The shared All/Mine switch belongs in the top-right map corner on every role. */
@media screen and (max-width:760px){
 .public-map-area .map-tools{top:56px!important;right:9px!important}
 .public-map-area #public-my-listings.map-side-switch{top:10px!important;right:9px!important;left:auto!important;max-width:calc(100% - 18px)!important;z-index:8!important}
}