/* Polish pass. Small fixes to things that were measurably wrong rather than
   restyling what already works. */

/* ---- the city name was being cut mid-word ----
   The pill was 83px wide holding a dot plus "Scottsdale", which needs about
   85px on its own, so it clipped to "Scottsdal". Let it take the room it
   needs, shrink before the other chips, and end in an ellipsis if a longer
   city ever arrives. */
.hdr { gap: 8px; }
.hdr .locbar { flex: 0 1 auto; min-width: 0; max-width: 46vw; }
.hdr .locbar .city {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the points and people chip can give up space first */
.hdr .pts, .hdr [class*=pts] { flex: 0 1 auto; min-width: 0; }

/* ---- conversation rows ----
   Seen at size: the thumbnail was bigger than the text it sat beside, the
   rows ran edge to edge with no separation, and an avatar with no photo was
   a flat grey disc. */
.dmh-prev img { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 3px; }
.dmh-row + .dmh-row { border-top: 1px solid rgba(255,255,255,.05); }
.dmh-av { background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); }

/* the switch sat flush against the list above it */
.dmh-tabs { margin-top: 2px; }
.dmh-list { padding-bottom: 14px; }

/* ---- venue logos were disappearing ----
   Event thumbnails sat on rgb(20,24,36) inside a card of rgb(17,22,36), so a
   dark or transparent logo had nothing to show against and the card looked
   like it had an empty hole on the left. A light backing makes every logo
   readable, the way the venue cards on the map already do it. */
.event-card img, .ev-r img, .deal-row img, .hub-list img[src] {
  background: #f4f6fb;
  object-fit: contain;
  padding: 6px;
}
/* photographs should still fill their frame */
.event-card img[src*="experiencescottsdale"], .event-card img[src*="unsplash"] {
  object-fit: cover; padding: 0; background: transparent;
}

/* ---- the map button was sitting on top of the cards ----
   It floats bottom-right and covered the tags and hours of whichever card was
   under it. Give the scrolling lists room to pass beneath it. */
.screen .list, .screen .cards, .deals-list, .events-list, .hub-list {
  padding-bottom: 96px;
}

/* the edit pencil sat on top of the Online badge (badge ended 362, pencil began 334) */
.ms-page .ms-bar { position: relative; padding-right: 40px; }
.ms-page .ms-online { margin-right: 34px; }

/* ---- the background scrolled away ----
   The image sits on the scrolling container, which is 566px tall while a
   profile runs to 4000px or more. Everything past the first screen was bare
   colour. Pin it so the picture is behind the whole page. */
.body.screen-in { background-attachment: fixed; }
@supports (-webkit-touch-callout: none) {
  /* iOS ignores fixed attachment inside a scroller; local keeps it with the
     content instead of cropping to the first screen */
  .body.screen-in { background-attachment: local; }
}