/* dm-motion.css (2026-10-01): press feedback, pointer-only hover lift, state colour eases,
   reduced motion. Built on the app's own tokens: --ease-out, --dur-press, --drawer. */
:root{--lift:0 10px 24px rgba(0,0,0,.28)}
/* pressing anything confirms the tap in 120-160ms on a strong ease-out */
button,.chip,.tab,.vrow,.tcard,.pin,.map-ctl button{transition:transform 160ms var(--ease-out),background-color 140ms ease,color 140ms ease,border-color 140ms ease,box-shadow 160ms var(--ease-out)}
.vrow:active,.tcard:active{transform:scale(.985)}
.chip:active,.tab:active{transform:scale(.96)}
.pin:active .mono{transform:scale(.94)}
/* cards and pins lift under a real pointer only, so phones never get stuck hovers */
@media (hover:hover) and (pointer:fine){
  /* lift wins over the runtime hover rule: up 2px, never down */
  .vrow:hover,.tcard:hover,.vrow.dm-vcard:hover{transform:translateY(-2px)!important;box-shadow:var(--lift)!important}
  .vrow:hover:active,.tcard:hover:active{transform:translateY(-1px) scale(.99)}
  .pin:hover .mono{transform:scale(1.08)}
  .chip:hover:not(.on){border-color:rgba(255,255,255,.28)}
  .map-ctl button:hover{background:rgba(255,255,255,.1)}
}
/* pins: transform transitions so the hover and the pop never fight */
.pin .mono{transition:transform 180ms var(--ease-out)}
/* status pills ease in, never snap */
.badge,.st,.open,.pill{transition:background-color 140ms ease,color 140ms ease,opacity 140ms ease}
/* new rows arriving in a list rise 6px (uses the browser's starting style, no JS) */
.vrow,.tcard{transition-property:transform,box-shadow,opacity,background-color}
@starting-style{.vlist .vrow,.scroll-x .tcard{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion: reduce){
  .vrow:hover,.tcard:hover,.pin:hover .mono{transform:none;box-shadow:none}
  .vrow:active,.tcard:active,.chip:active,.tab:active{transform:none}
  @starting-style{.vlist .vrow,.scroll-x .tcard{transform:none}}
  .stag,.screen-in,.tcard{animation-duration:.18s!important}
}

/* ---- pin labels: bold white names, data-pos says which side fit ---- */
.pin .pin-inner{position:relative}
.pin .tag{position:absolute;white-space:nowrap;margin:0;padding:3px 7px;border-radius:8px;font:800 12px/1.1 Outfit,system-ui,sans-serif;letter-spacing:.01em;color:#fff;background:rgba(6,8,15,.72);backdrop-filter:blur(6px);text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none;opacity:0;transition:opacity 160ms ease,transform 180ms var(--ease-out)}
.leaflet-container.labels .pin .tag{opacity:1}
.pin[data-pos=b] .tag{top:100%;left:50%;transform:translate(-50%,5px)}
.pin[data-pos=t] .tag{bottom:100%;left:50%;transform:translate(-50%,-5px)}
.pin[data-pos=r] .tag{left:100%;top:50%;transform:translate(5px,-50%)}
.pin[data-pos=l] .tag{right:100%;top:50%;transform:translate(-5px,-50%)}
.pin[data-pos=x] .tag{opacity:0!important}
.pin.sel .tag,.pin:hover .tag{opacity:1!important;z-index:5}
.pin .tag .dist,.pin .tag small{display:none}

/* ---- mobile fit pass ----
   1. the city pill never clips: the LIVE tag folds away on narrow phones, the name ellipsises
   2. the map button never covers the last row: the scroller leaves room for it
   3. deal lines wrap to two lines instead of cutting mid-word */
@media (max-width:430px){
  .hdr .locbar.locbar{flex:1 1 auto!important;min-width:0!important;max-width:190px!important}
  .hdr .city .fb-live.fb-live{display:none!important}
  .hdr .city.city{display:block!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;min-width:0!important}
  /* clearance for the map button comes from a spacer placed before the tab bar (see dm-myspace), not frame padding, which would float the sticky tab bar at page end */
  #frame{padding-bottom:0!important}
  .dm-tabspacer{height:calc(96px + env(safe-area-inset-bottom,0px))}
  .tcard .deal,.vrow .deal,.card .deal{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
}
}