/* Scoped to Messenger Meet Up. No global theme, guard or overlay changes. */
.msg-bubble-row.meetup-row .msg-bubble-col { width:min(100%,480px); max-width:100%; min-width:0; }
.msg-meetup.mu-card,.msg-bubble-row.mine .msg-meetup.mu-card { width:100%; max-width:480px; margin:6px 0; padding:0; border:1px solid #51452c; border-radius:22px; color:#f8f5ed; background:#151a20; box-shadow:0 10px 30px #0003; font-family:Inter,system-ui,sans-serif; overflow:hidden; }
.mu-card * { box-sizing:border-box; }
.mu-top { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:17px 17px 0; }
.mu-brand { font-size:11px; font-weight:850; letter-spacing:.13em; color:#edce8e; }
.mu-live { color:#a9b2bc; font-size:9px; letter-spacing:.055em; font-weight:750; text-align:right; }
.mu-live.on { color:#84e1b0; }
.mu-heading { display:flex; justify-content:space-between; align-items:center; padding:12px 17px 15px; gap:10px; }
.mu-heading h3 { margin:0; color:#fff8e9; font:750 clamp(19px,5vw,27px)/1.15 Inter,system-ui,sans-serif; letter-spacing:-.045em; }
.mu-clock { font-size:10px; font-weight:700; color:#e8c785; background:#2c2b27; padding:7px 9px; border-radius:8px; white-space:nowrap; }
.mu-people { display:flex; gap:8px; padding:0 17px 16px; }
.mu-person { display:flex; gap:9px; align-items:center; min-width:0; flex:1; color:#f3f1eb; text-decoration:none; min-height:44px; }
.mu-person-text { min-width:0; }
.mu-person strong { display:block; font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
.mu-person small { display:block; color:#a9b3bf; font-size:10px; margin-top:3px; }
.mu-avatar { width:37px; height:37px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; color:#f4d491; background:#353d47; border:2px solid #ba9654; overflow:hidden; font-size:12px; font-weight:800; }
.mu-avatar img { width:100%; height:100%; object-fit:cover; }
.mu-map-wrap { position:relative; height:310px; background:#1c252c; border-block:1px solid #394149; }
.mu-map-wrap[hidden] { display:none; }
.mu-map { width:100%; height:100%; }
.mu-recenter { position:absolute; right:12px; top:12px; z-index:2; width:44px; height:44px; background:#f6f1e7; color:#15222d; border:0; border-radius:12px; font-size:26px; cursor:pointer; box-shadow:0 2px 10px #0003; }
.mu-map-status { position:absolute; left:12px; bottom:35px; right:12px; pointer-events:none; background:#17212beb; color:#e6ebee; padding:8px 12px; border-radius:8px; font-size:11px; text-align:center; }
.mu-map-status:empty { display:none; }
.mu-distance { margin:16px 17px 0; color:#f4d494; font-size:26px; font-weight:750; letter-spacing:-.04em; }
.mu-distance:empty { display:none; }
.mu-status { color:#d1d9e0; font-size:12px; line-height:1.55; margin:12px 17px; overflow-wrap:anywhere; }
.mu-actions { display:flex; flex-wrap:wrap; gap:8px; padding:0 17px; }
.mu-actions button { flex:1; min-height:44px; border-radius:11px; padding:10px 12px; font:700 12px/1.3 Inter,system-ui,sans-serif; cursor:pointer; }
.mu-primary { color:#1a211c; background:#ecd092; border:1px solid #f2d7a2; }
.mu-secondary { color:#eff3f5; background:#27333f; border:1px solid #52606c; }
.mu-stop { color:#ffb6ad; background:#38272a; border:1px solid #855047; }
.mu-footnote { padding:0 17px; margin:12px 0 16px; font-size:10px; line-height:1.5; color:#a9b4bf; }
.mu-card a:focus-visible,.mu-card button:focus-visible { outline:3px solid #fff3bb; outline-offset:3px; }
.mu-map-marker { position:relative; width:44px; height:44px; }
.mu-marker-face { width:44px; height:44px; display:grid; place-items:center; position:relative; border:3px solid #f6d998; border-radius:50%; overflow:hidden; background:#293a48; color:white; font:800 13px Inter,system-ui; box-shadow:0 0 0 6px #ead29930,0 3px 12px #0006; }
.mu-marker-face img { width:100%; height:100%; object-fit:cover; }
/* width:max-content, or the label shrink-to-fits inside the 44px marker
   that contains it and wraps ONE LETTER PER LINE. Seen on the first real
   render: "Angelo" came out as a vertical column. */
.mu-marker-name { position:absolute; top:49px; left:50%; transform:translateX(-50%); width:max-content; max-width:135px; padding:5px 9px; border-radius:7px; background:#17212bf0; color:#fff; font:650 10px Inter,system-ui; text-align:center; overflow-wrap:anywhere; box-shadow:0 2px 6px #0003; }
.mu-marker-direction { position:absolute; inset:-12px; transform-origin:center; }
.mu-marker-direction::before { content:''; position:absolute; left:calc(50% - 6px); top:-3px; border-inline:6px solid transparent; border-bottom:10px solid #f8dc9d; }
.mu-map-marker.stale .mu-marker-face { border-color:#aab4bf; box-shadow:none; }
.mu-map-marker:not(.stale) .mu-marker-face { animation:mu-pulse 3s ease-in-out infinite; }
@keyframes mu-pulse { 50% { box-shadow:0 0 0 9px #ead2990a,0 3px 12px #0006; } }
@media(max-width:360px) { .mu-top,.mu-heading { padding-inline:12px; }.mu-people { padding-inline:12px; gap:7px; }.mu-person { gap:6px; }.mu-avatar { width:32px;height:32px; }.mu-live { font-size:8px; }.mu-map-wrap { height:280px; }.mu-actions { padding-inline:12px; }.mu-actions button { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .mu-map-marker .mu-marker-face { animation:none !important; } }

/* ══════════════════════════════════════════════════════════
   TRAVEL MODE + ETA PANEL

   Designed at 320px first — the narrowest phone still in real use — and
   allowed to breathe up to 430. Everything here is touch-first: the mode
   buttons are 44px tall because that is the smallest target a thumb hits
   reliably, and they wrap rather than scroll horizontally.
   ══════════════════════════════════════════════════════════ */

.mu-modes { display:flex; gap:5px; padding:10px 12px 0; flex-wrap:wrap; }
.mu-mode {
  /* 52px, not 64: the card is capped at 292px, and at 64 the fourth mode
     wrapped onto a row of its own on every phone. */
  flex:1 1 auto; min-width:52px; min-height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-radius:12px; cursor:pointer;
  background:var(--s-3,#1c1913); border:1px solid var(--line,rgba(255,255,255,.12));
  color:var(--ink,rgba(255,255,255,.82));
  font-family:'Inter',sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.02em;
  transition:background .15s, border-color .15s, transform .12s;
}
.mu-mode .mu-mode-i { font-size:1.05rem; line-height:1; }
.mu-mode:active { transform:scale(.96); }
.mu-mode.on {
  background:linear-gradient(160deg, rgba(201,162,39,.26), rgba(201,162,39,.10));
  border-color:var(--g-400,#C9A227); color:var(--g-300,#D9B948);
}
/* The other member's mode is shown, never chosen from here. */
.mu-mode.theirs { opacity:.85; cursor:default; }

.mu-eta { padding:10px 12px 0; }
.mu-eta-row { display:flex; align-items:baseline; gap:8px; font-size:.8rem; line-height:1.5; }
.mu-eta-who { color:var(--ink,rgba(255,255,255,.8)); flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mu-eta-val { font-weight:800; color:#fff; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.mu-eta-total { margin-top:6px; padding-top:6px; border-top:1px solid var(--line,rgba(255,255,255,.1));
  display:flex; align-items:baseline; gap:8px; }
.mu-eta-total .mu-eta-who { color:var(--g-300,#D9B948); font-weight:800;
  text-transform:uppercase; font-size:.62rem; letter-spacing:.06em; }
.mu-eta-total .mu-eta-val { color:var(--g-300,#D9B948); }
.mu-eta-note { font-size:.72rem; color:var(--ink-low,rgba(255,255,255,.5)); margin-top:3px; }
/* The refusal. Deliberately plain — it is information, not an error. */
.mu-eta-none { font-size:.75rem; color:var(--ink-low,rgba(255,255,255,.5)); padding:10px 12px 0; }

/* Running out of session. Warm rather than alarming: nothing has gone
   wrong, there just is not enough time left to get there. */
.mu-extend { margin:10px 12px 0; padding:10px; border-radius:12px;
  background:rgba(201,162,39,.09); border:1px solid rgba(201,162,39,.28); }
.mu-extend-t { font-size:.75rem; font-weight:800; color:var(--g-300,#D9B948); margin-bottom:7px; }
.mu-extend-row { display:flex; gap:6px; flex-wrap:wrap; }
.mu-extend-row button {
  flex:1 1 auto; min-width:62px; min-height:40px; border-radius:10px; cursor:pointer;
  background:var(--s-3,#1c1913); border:1px solid var(--line,rgba(255,255,255,.14));
  color:var(--ink,rgba(255,255,255,.85));
  font-family:'Inter',sans-serif; font-size:.76rem; font-weight:700; }
/* The one that actually covers the shortfall. The others stay available:
   a shorter extension is a legitimate choice and must not be hidden. */
.mu-extend-row button.enough { border-color:var(--g-400,#C9A227); color:var(--g-300,#D9B948); }
.mu-extend-note { font-size:.68rem; color:var(--ink-low,rgba(255,255,255,.45)); margin-top:6px; }

@media (prefers-reduced-motion: reduce) {
  .mu-mode { transition:none; }
  .mu-mode:active { transform:none; }
}

/* ══════════════════════════════════════════════════════════
   THE HANDSHAKE MARK

   Two shapes that come together. It replaces the ↗ arrow on the card
   and the 🤝 emoji in the attach menu, for one reason beyond taste:
   an emoji is drawn by the operating system, so it looks different on
   every phone and cannot be animated. This is ours, it is identical
   everywhere, and it moves.

   The motion is the meaning — the two halves start apart and close.
   It plays once when the card appears and again on press, never on a
   loop: a mark that fidgets forever is noise, not branding.
   ══════════════════════════════════════════════════════════ */
/* HOW YOU ARE TRAVELLING ============================================
   Five modes, one row, always all five. Wide flat targets rather than
   a dropdown, because this gets tapped while walking. */
.mu-modes { display:flex; gap:6px; padding:13px 17px 2px; }
.mu-mode { position:relative; flex:1; min-width:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; padding:8px 2px 7px;
  border-radius:14px; border:1px solid #2a3441; background:#1b222b; color:#95a0ac;
  font:650 8.5px/1 Inter,system-ui,sans-serif; letter-spacing:.03em; cursor:pointer;
  transition:background .2s, border-color .2s, color .2s, transform .16s; }
/* The icons are drawn now, so they inherit the button's colour instead
   of arriving pre-coloured. No grayscale hack is needed to calm them. */
.mu-mode-i { display:block; width:21px; height:21px; opacity:.92;
  color:var(--mu-tint,#95a0ac);
  transition:opacity .2s, transform .24s cubic-bezier(.3,1.4,.4,1); }
.mu-mode-i svg { display:block; width:100%; height:100%; }
.mu-mode-l { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mu-mode:hover { border-color:#4a5666; color:#c9d3de; }
.mu-mode.on { background:linear-gradient(180deg,#3b3117,#251f13); border-color:#e3bc66; color:#f6e6c0; }
.mu-mode.on .mu-mode-i { opacity:1; transform:scale(1.14); }
/* The selected mode keeps its own colour rather than turning gold: the
   colour IS how you recognise the mode, so overriding it on selection
   would remove the one cue at the moment it matters most. The gold
   border and ground carry the selected state instead. */
.mu-mode.on { border-color:var(--mu-tint,#e3bc66); }
.mu-mode.on .mu-mode-l { color:#f6e6c0; }
.mu-mode:active { transform:scale(.94); }
/* A green pip on the mode the OTHER member is using. Their choice is
   shown here, never editable from here. */
.mu-mode-peer { position:absolute; top:5px; right:6px; width:6px; height:6px; border-radius:50%;
  background:#84e1b0; box-shadow:0 0 0 2px #151a20; }

/* WHEN YOU ACTUALLY MEET ============================================ */
.mu-eta { margin:11px 17px 0; padding:11px 14px; border-radius:16px;
  background:linear-gradient(180deg,#1d2530,#181e26); border:1px solid #2a3441; }
.mu-eta-main { color:#fff8e9; font:600 13px/1.35 Inter,system-ui,sans-serif; }
.mu-eta-main strong { font-weight:800; color:#f0d9a4; font-size:16.5px; letter-spacing:-.02em; }
.mu-eta-sub { margin-top:3px; color:#8b96a2; font-size:10.5px; line-height:1.35; }
/* A refusal is styled as calmly as an answer. It is not an error. */
.mu-eta.waiting { background:#181e26; }
.mu-eta.waiting .mu-eta-main { color:#c3ccd6; font-weight:550; font-size:12px; }

/* THE OSM CREDIT MUST STAY, AND MUST STOP SHOUTING.
   ODbL requires the attribution to be visible, so it is never hidden or
   faded out - but on a 340px card it was arriving at the same weight as
   the controls. Smaller, quieter, still legible, still a real link. */
.mu-map-wrap .maplibregl-ctrl-bottom-right { transform:scale(.82); transform-origin:100% 100%; }
.mu-map-wrap .maplibregl-ctrl-attrib { font-size:9.5px; line-height:1.5;
  background:rgba(10,14,19,.58); border-radius:9px; padding:1px 7px; backdrop-filter:blur(3px); }
.mu-map-wrap .maplibregl-ctrl-attrib, .mu-map-wrap .maplibregl-ctrl-attrib a { color:#9aa5b1; }
.mu-map-wrap .maplibregl-ctrl-attrib a:hover { color:#e3bc66; }
.mu-map-wrap .maplibregl-ctrl-attrib-button { width:17px; height:17px; }

/* WHERE, EXACTLY ==================================================== */
.mu-spot { margin:11px 17px 0; display:flex; flex-direction:column; gap:5px; }
.mu-spot-hint { color:#7f8b97; font-size:10px; line-height:1.35; }
.mu-chip.spot { align-self:flex-start; display:inline-flex; align-items:center; gap:7px; }
.mu-chip.spot[disabled] { opacity:.45; cursor:not-allowed; }
.mu-chip.spot[disabled]:hover { border-color:#3a4552; color:#dbe3ec; }
.mu-pin { color:#e3bc66; font-size:12px; line-height:1; }
.mu-spot.set .mu-spot-row { display:flex; align-items:center; gap:8px; padding:9px 11px;
  border-radius:14px; border:1px solid #4a3f22; background:linear-gradient(180deg,#2a2416,#1e1c14); }
.mu-spot-name { flex:1; min-width:0; border:0; background:transparent; color:#f6e6c0;
  font:650 12px Inter,system-ui,sans-serif; padding:2px 0; }
.mu-spot-name::placeholder { color:#8b7d5c; font-weight:500; }
.mu-spot-name:focus { outline:none; border-bottom:1px solid #e3bc66; }
.mu-spot-x { border:0; background:transparent; color:#9aa5b1; font-size:17px; line-height:1;
  padding:0 2px; cursor:pointer; transition:color .18s; }
.mu-spot-x:hover { color:#ffb9a4; }

.mu-spot-tools { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
/* ONE TAP BEFORE ANY TYPING. This was a small grey chip above three
   address fields, so members typed a street by hand on a phone that
   already knew where they were standing. It leads now. */
.mu-spot-gps { width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px; border-radius:14px; border:1px solid #6a5526; cursor:pointer;
  background:linear-gradient(180deg,#3a3018,#251f11); color:#f6e6c0;
  font:700 12.5px Inter,system-ui,sans-serif; letter-spacing:.2px;
  transition:border-color .18s, background .18s, transform .12s; }
.mu-spot-gps:hover { border-color:#e3bc66; background:linear-gradient(180deg,#453919,#2b2413); }
.mu-spot-gps:active { transform:scale(.985); }
.mu-spot-gps[disabled] { opacity:.5; cursor:not-allowed; transform:none; }
.mu-spot-gps .mu-pin { font-size:13px; }
.mu-spot.busy .mu-spot-gps .mu-pin { animation:mu-pin-pulse 1s ease-in-out infinite; }
@keyframes mu-pin-pulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }
/* A quiet divider, so "or type it" reads as the alternative it is. */
.mu-spot-or { display:flex; align-items:center; gap:8px; color:#6d7883;
  font:600 9.5px Inter,system-ui,sans-serif; letter-spacing:.9px; text-transform:uppercase; }
.mu-spot-or::before, .mu-spot-or::after { content:""; flex:1; height:1px; background:#2a3441; }
/* Full width, on its own line: a street name needs room to be read. */
.mu-spot-find { display:flex; width:100%; gap:0; border-radius:999px;
  border:1px solid #3a4552; background:#1b222b; overflow:hidden; }
.mu-spot-q { flex:1; min-width:0; border:0; background:transparent; color:#dbe3ec;
  font:500 12.5px Inter,system-ui,sans-serif; padding:9px 14px; }
.mu-spot-q::-webkit-search-cancel-button { filter:invert(.6); }
.mu-spot-q::placeholder { color:#78838f; }
.mu-spot-q:focus { outline:none; }
.mu-spot-find:focus-within { border-color:#e3bc66; }
.mu-spot-go { border:0; border-left:1px solid #3a4552; background:#222b36; color:#e3bc66;
  font:700 11px Inter,system-ui,sans-serif; padding:0 13px; cursor:pointer; transition:background .18s; }
.mu-spot-go:hover { background:#2b3644; }
/* Results are a short list of real places, never a free-text guess. */
.mu-spot-list { list-style:none; margin:2px 0 0; padding:0; display:flex;
  flex-direction:column; gap:3px; max-height:172px; overflow-y:auto; }
.mu-spot-hit { display:block; width:100%; text-align:left; padding:8px 11px; border-radius:11px;
  border:1px solid #2a3441; background:#1b222b; color:#dbe3ec;
  font:550 11.5px/1.35 Inter,system-ui,sans-serif; cursor:pointer;
  transition:border-color .16s, background .16s, color .16s; }
.mu-spot-hit:hover { border-color:#e3bc66; background:#222b36; color:#f6e6c0; }
/* "Toscana" ran straight into "number 88 is not on the map", so the one
   line that exists to stop a wrong number being trusted was the hardest
   line on the card to read. It gets its own line and its own colour. */
.mu-spot-hit small { display:block; margin-top:3px; color:#d8a97a;
  font:500 10px/1.4 Inter,system-ui,sans-serif; }
.mu-spot-hit.approx { border-color:#4a3f2a; }
.mu-spot-hit.approx:hover { border-color:#e3bc66; }
.mu-spot-attr { color:#6d7883; font-size:9.5px; }

/* THE INVITE SHEET'S "WHERE?" ====================================== */
.mu-where { margin:14px 0 4px; text-align:left; }
.mu-where label { display:block; color:#dbe3ec; font:700 12px Inter,system-ui,sans-serif; margin-bottom:6px; }
.mu-where label span { color:#7f8b97; font-weight:500; }
.mu-where-bar { display:flex; width:100%; border-radius:999px; overflow:hidden;
  border:1px solid #3a4552; background:#1b222b; }
.mu-where-bar:focus-within { border-color:#e3bc66; }
.mu-where-bar input { flex:1; min-width:0; border:0; background:transparent; color:#dbe3ec;
  font:500 12.5px Inter,system-ui,sans-serif; padding:9px 14px; }
.mu-where-bar input:focus { outline:none; }
.mu-where-bar input::placeholder { color:#78838f; }
.mu-where-bar button { border:0; border-left:1px solid #3a4552; background:#222b36;
  color:#e3bc66; font:700 11px Inter,system-ui,sans-serif; padding:0 14px; cursor:pointer; }
.mu-where-hits { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column;
  gap:3px; max-height:150px; overflow-y:auto; }
.mu-where-hit { display:block; width:100%; text-align:left; padding:8px 11px; border-radius:11px;
  border:1px solid #2a3441; background:#1b222b; color:#dbe3ec;
  font:550 11.5px/1.35 Inter,system-ui,sans-serif; cursor:pointer; }
.mu-where-hit:hover { border-color:#e3bc66; color:#f6e6c0; }
.mu-where-note { margin:7px 0 0; color:#7f8b97; font-size:10.5px; line-height:1.4; }
.mu-where-note.chosen { color:#f6e6c0; font-weight:650; }

/* MORE TIME ========================================================= */
.mu-ext { margin:10px 17px 0; }
.mu-ext-q { color:#b9c3ce; font-size:11px; line-height:1.4; margin-bottom:7px; }
.mu-ext-a { display:flex; gap:6px; flex-wrap:wrap; }
.mu-chip { padding:7px 13px; border-radius:999px; border:1px solid #3a4552; background:#1b222b;
  color:#dbe3ec; font:700 11px Inter,system-ui,sans-serif; cursor:pointer;
  transition:border-color .18s, background .18s, color .18s, transform .16s; }
.mu-chip:hover { border-color:#e3bc66; color:#f6e6c0; }
.mu-chip:active { transform:scale(.95); }
/* The offer that is actually long enough is marked, and the shorter
   ones stay on screen. Hiding them would push members into sharing for
   longer than they meant to. */
.mu-chip.enough { border-color:#e3bc66; background:#2b2416; color:#f6e6c0; }
.mu-ext.asking { padding:12px 14px; border-radius:16px; border:1px solid #4d6b3f;
  background:linear-gradient(180deg,#26331f,#1b2219); }
.mu-ext.asking .mu-ext-q { color:#e7f2e0; font-size:12px; }
.mu-ext.asking strong { color:#fff; font-weight:800; }
.mu-ext.asking .mu-ext-a button { padding:8px 16px; border-radius:999px; border:1px solid transparent;
  font:700 11.5px Inter,system-ui,sans-serif; cursor:pointer; transition:filter .18s, transform .16s; }
.mu-ext.asking .mu-ext-a button:active { transform:scale(.95); }
.mu-ext.waiting .mu-ext-q { color:#8b96a2; font-style:italic; }

/* The last two minutes. The clock does the work, not the whole card. */
.mu-heading.ending .mu-clock { color:#ffb9a4; animation:mu-tick 1.1s steps(2,end) infinite; }
@keyframes mu-tick { 50% { opacity:.4; } }

/* ══════════════════════════════════════════════════════════
   CARD POLISH — depth, a warmer edge, and a live pulse that
   only ever runs while something is actually live.
   ══════════════════════════════════════════════════════════ */
.msg-meetup.mu-card {
  background:
    radial-gradient(120% 80% at 50% -20%, #23303c 0%, transparent 62%),
    linear-gradient(180deg, #18202a 0%, #141a20 60%);
  border-color:#5d4f30;
  box-shadow:0 1px 0 #ffffff10 inset, 0 14px 38px #0000005c;
}
/* A single gold hairline across the top — the same accent the rest of
   the site uses for anything that belongs to Italy Lions. */
.msg-meetup.mu-card::before {
  content:''; display:block; height:2px;
  background:linear-gradient(90deg, transparent, #d9b948 22%, #f0d79b 50%, #d9b948 78%, transparent);
  opacity:.85;
}
.mu-brand { display:inline-flex; align-items:center; color:#f0d79b; }
.mu-live.on { display:inline-flex; align-items:center; gap:6px; }
.mu-live.on::before {
  content:''; width:6px; height:6px; border-radius:50%; background:#84e1b0;
  box-shadow:0 0 0 0 #84e1b0b3; animation:mu-livedot 2s ease-out infinite;
}
@keyframes mu-livedot { 70% { box-shadow:0 0 0 6px #84e1b000; } 100% { box-shadow:0 0 0 0 #84e1b000; } }
.mu-heading h3 { background:linear-gradient(180deg,#fffaf0,#e7d6ae); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.mu-person { border-radius:12px; padding:4px; transition:background .15s; }
.mu-person:hover { background:#ffffff08; }
.mu-avatar { box-shadow:0 0 0 3px #ba965426, 0 2px 8px #0006; }
.mu-actions button { transition:transform .12s ease, filter .15s ease; }
.mu-actions button:active { transform:scale(.97); }
.mu-primary:hover { filter:brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .mu-shake .arm, .mu-shake .clasp, .mu-shake .grip { transition:none; }
  .mu-shake.met svg { animation:none; }
  .mu-live.on::before { animation:none; }
  .mu-heading.ending .mu-clock { animation:none; }
  .mu-actions button:active, .mu-mode:active, .mu-chip:active { transform:none; }
  .mu-mode, .mu-mode-i, .mu-chip { transition:none; }
}

/* Narrow phones: the mode row runs out of width first. */
@media (max-width:360px) {
  .mu-modes { padding-inline:12px; gap:4px; }
  .mu-mode { padding:7px 1px 6px; font-size:8px; }
  .mu-mode-i { width:19px; height:19px; }
  .mu-eta, .mu-ext { margin-inline:12px; }
  .mu-eta { padding:10px 12px; }
  .mu-eta-main strong { font-size:15px; }
}

/* A place that has been PROPOSED but not yet accepted is information,
   not a control: no name field, no remove button, nothing that would
   write while the rules still refuse writes to a waiting invitation. */
.mu-spot-row.read { border-style:dashed; }
.mu-spot-fixed { flex:1; min-width:0; color:#f6e6c0; font:650 12px Inter,system-ui,sans-serif;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* THE AGREED SPOT ON THE MAP.
   A teardrop, not a circle: the two members are circles with faces, and
   the place must never be mistaken for a person standing there. */
.mu-place-pin { width:26px; height:32px; position:relative; cursor:default; }
.mu-place-pin::before {
  content:''; position:absolute; inset:0 0 6px 0;
  background:#e3bc66; border:2px solid #1b1408;
  border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;
  box-shadow:0 3px 10px #0007;
}
.mu-place-pin::after {
  content:''; position:absolute; left:50%; bottom:1px; width:2px; height:9px;
  transform:translateX(-50%); background:#1b1408; border-radius:1px;
}
.mu-place-pin i {
  position:absolute; left:50%; top:8px; width:8px; height:8px; margin-left:-4px;
  background:#1b1408; border-radius:50%;
}

/* The crosshair is how you get automatic framing back once you have
   moved the map yourself, so it says so instead of sitting there inert. */
.mu-map-wrap .mu-map.mu-map-free ~ .mu-recenter {
  background:#e3bc66; color:#1b1408; box-shadow:0 2px 10px #0006;
}

/* The build tag. A diagnostic, not decoration: small enough to ignore,
   readable enough to end an argument about which version a phone has. */
.mu-build { margin-left:7px; color:#6d7883; font:600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em; vertical-align:middle; }
.mu-spot-edit { border:0; background:transparent; color:#e3bc66; cursor:pointer;
  font:700 10.5px Inter,system-ui,sans-serif; padding:2px 4px; white-space:nowrap; }
.mu-spot-edit:hover { text-decoration:underline; }
.mu-spot-back { align-self:flex-start; border:0; background:transparent; color:#8b96a2;
  font:600 10.5px Inter,system-ui,sans-serif; padding:2px 0; cursor:pointer; }
.mu-spot-back:hover { color:#e3bc66; }

/* Messenger Meet Up: a single visual language for the invitation and live card. */
.msg-meetup.mu-card,.msg-bubble-row.mine .msg-meetup.mu-card {
  box-sizing:border-box;
  border-color:#34414c; border-radius:26px; background:#111b24;
  box-shadow:0 12px 36px #0002; text-align:left;
}
.mu-card [hidden] { display:none !important; }
.mu-top { padding:20px 20px 0; gap:10px; }
.mu-brand { display:flex; align-items:center; gap:10px; letter-spacing:.12em; color:#f0d7a3; }
.mu-brand small { display:block; margin-top:5px; color:#a6b5c1; font-size:10px;
  font-weight:450; letter-spacing:0; }
.mu-shake { display:inline-flex; flex:none; width:32px; height:28px; margin:0; vertical-align:middle; }
.mu-shake svg { display:block; width:100%; height:100%; overflow:visible; }
.mu-shake .mu-cuff-left { fill:#ddc48c; fill-opacity:.16; }
.mu-shake .mu-cuff-right { fill:#8bbfaf; fill-opacity:.24; }
.mu-brand > .mu-shake,.mu-invite-top > .mu-shake { width:50px; height:50px; padding:8px;
  background:#23313b; border:1px solid #42515a; border-radius:16px; }
.mu-shake.met svg { animation:mu-handshake .65s ease-out; }
@keyframes mu-handshake {
  0% { transform:rotate(0); }
  30% { transform:rotate(-9deg) translateY(1px); }
  65% { transform:rotate(6deg) translateY(-1px); }
  100% { transform:rotate(0); }
}
.mu-live { max-width:90px; color:#b0bdc6; font-size:9px; line-height:1.5; letter-spacing:.08em; }
.mu-heading { padding:20px 20px 17px; align-items:center; }
.mu-heading h3 { font-size:27px; font-weight:650; letter-spacing:-.055em; color:#f5f7f8; }
.mu-clock { background:#23313a; color:#e4d3ae; border:1px solid #3b4851; border-radius:999px;
  font-size:10px; font-variant-numeric:tabular-nums; }
.mu-clock:empty { display:none; }
.mu-people { margin:0 20px 16px; padding:0; gap:12px; }
.mu-person { gap:9px; }
.mu-person + .mu-person { padding-left:12px; border-left:1px solid #34414c; }
.mu-avatar { width:38px; height:38px; border:1px solid #61726e; background:#2d4245; color:#e5dfc9; }
.mu-person strong { font-size:12px; font-weight:600; }
.mu-person small { color:#a6b5c1; font-size:10px; }
.mu-map-wrap { margin:0 12px; border:1px solid #3c4a53; border-radius:19px; height:265px; overflow:hidden; }
.mu-modes { padding:12px 20px 0; gap:5px; }
.mu-mode { border-radius:12px; background:#1b2832; border-color:#34424e; min-height:54px; font-size:9px; }
.mu-mode.on { background:#293a40; color:#f3ecda; }
.mu-section-label { color:#b7c4cc; font:650 10px/1.4 Inter,system-ui,sans-serif; letter-spacing:.1em; margin-bottom:5px; }
.mu-spot { margin:18px 20px 0; gap:9px; }
.mu-city-label,.mu-where .mu-city-label { display:flex; align-items:center; gap:12px; margin:0;
  font:500 12px/1.4 Inter,system-ui,sans-serif; color:#acbbc7; text-transform:none; letter-spacing:0; }
.mu-city { flex:1; min-width:0; width:100%; min-height:44px; padding:9px 12px; border-radius:12px;
  border:1px solid #3d4c57; color:#e4eaf0; background:#1c2a35; font:500 16px/1.4 Inter,system-ui,sans-serif; }
.mu-address-details { display:grid; grid-template-columns:minmax(95px,.7fr) minmax(0,1.3fr); gap:10px; margin-bottom:9px; }
.mu-address-details > label,.mu-where .mu-address-details > label { display:block; min-width:0; margin:0;
  color:#afbfcc; font:500 11px/1.4 Inter,system-ui,sans-serif; text-transform:none; letter-spacing:0; }
.mu-address-details input,.mu-address-details select { display:block; width:100%; min-width:0; min-height:44px; margin-top:5px; padding:9px 12px;
  border:1px solid #3d4c57; border-radius:12px; color:#e4eaf0; background:#1c2a35; font:500 16px/1.4 Inter,system-ui,sans-serif; }
.mu-address-details .mu-region-label { grid-column:1 / -1; }
.mu-address-details input:focus-visible,.mu-address-details select:focus-visible { outline:3px solid #f2dca7; outline-offset:2px; }
.mu-open-map { display:inline-flex; align-items:center; min-height:44px; color:#e4d3ae; font-size:12px; }
.mu-spot-gps { min-height:52px; font-size:13.5px; border-radius:15px; }
.mu-spot-find,.mu-where-bar { min-height:48px; border-radius:13px; border-color:#455663; background:#1c2a35; }
.mu-spot-q,.mu-where-bar input { font-size:16px; padding:12px; color:#eef1f4; }
.mu-spot-go,.mu-where-bar button { padding:0 16px; color:#17252c; background:#ead6a8;
  border:0; min-width:58px; font:700 12px Inter,system-ui,sans-serif; }
.mu-spot-go:hover,.mu-where-bar button:hover { background:#f7e6bf; }
.mu-spot-hint,.mu-where-note { color:#a7b6c3; font-size:11px; line-height:1.55; }
.mu-spot-attr { color:#a0b1bf; font-size:10px; }
.mu-spot-hit small { font-size:11px; }
.mu-spot-hit,.mu-where-hit { min-height:48px; padding:12px; font-size:13px; line-height:1.5;
  background:#20303c; border-color:#405260; border-radius:12px; }
.mu-spot-list,.mu-where-hits { gap:6px; max-height:225px; }
.mu-spot-x,.mu-spot-edit { min-width:44px; min-height:44px; }
.mu-eta { margin:14px 20px 0; background:#1e2d37; border-color:#344752; border-radius:14px; }

/* THE TRIP (2026-10-02) — the ride-app view the owner asked for: who,
   whether they are moving, stopped or there, real speed, minutes and the
   clock time, distance left and a bar that fills as they close in. The
   other member's row first, edged in gold: that is who you are waiting for. */
.mu-trip { margin:12px 12px 0; display:flex; flex-direction:column; gap:8px; }
.mu-trip[hidden] { display:none; }
.mu-trip-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; grid-template-areas:"face who eta" "foot foot foot";
  align-items:center; gap:4px 12px; padding:12px 14px; border-radius:16px;
  background:linear-gradient(180deg,#1f2e38,#19252e); border:1px solid #33444f; }
.mu-trip-row[data-who="peer"] { border-color:#c9a65a77; box-shadow:0 6px 18px #0004; }
.mu-trip-face { grid-area:face; width:44px; height:44px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  border:2px solid #f6d998; background:#293a48; color:#fff; font:800 13px Inter,system-ui,sans-serif; }
.mu-trip-face img { width:100%; height:100%; object-fit:cover; }
.mu-trip-row[data-who="you"] .mu-trip-face { border-color:#8fa0ad; }
.mu-trip-who { grid-area:who; min-width:0; display:flex; flex-direction:column; gap:4px; }
.mu-trip-who b { color:#f1f5f7; font:650 14px/1.3 Inter,system-ui,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mu-trip-who small { display:flex; align-items:center; gap:7px; color:#aab9c5; font:600 11.5px/1.3 Inter,system-ui,sans-serif; }
.mu-trip-dot { width:8px; height:8px; flex-shrink:0; border-radius:50%; background:#6b7a86; }
.mu-trip-row[data-state="moving"] .mu-trip-dot { background:#5ed39a; animation:mu-trip-live 1.8s ease-out infinite; }
.mu-trip-row[data-state="stopped"] .mu-trip-dot { background:#f0b44c; }
.mu-trip-row[data-state="arrived"] .mu-trip-dot { background:#e3bc66; }
.mu-trip-row[data-state="moving"] .mu-trip-who small { color:#bfe9d3; }
.mu-trip-row[data-state="stopped"] .mu-trip-who small { color:#f3d39a; }
.mu-trip-row[data-state="arrived"] .mu-trip-who small { color:#f1dcab; }
@keyframes mu-trip-live { 0% { box-shadow:0 0 0 0 #5ed39a99; } 70% { box-shadow:0 0 0 7px #5ed39a00; } 100% { box-shadow:0 0 0 0 #5ed39a00; } }
.mu-trip-eta { grid-area:eta; display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right; }
.mu-trip-eta b { color:#f6e6c0; font:750 20px/1 Inter,system-ui,sans-serif; letter-spacing:-.02em; white-space:nowrap; }
.mu-trip-row[data-state="arrived"] .mu-trip-eta b { color:#e3bc66; }
.mu-trip-row[data-state="waiting"] .mu-trip-eta b, .mu-trip-row[data-state="stale"] .mu-trip-eta b { color:#6b7a86; }
.mu-trip-eta small { color:#9fb0bd; font-size:10.5px; white-space:nowrap; }
.mu-trip-eta small:empty { display:none; }
.mu-trip-foot { grid-area:foot; display:flex; flex-direction:column; gap:6px; margin-top:7px; }
.mu-trip-bar { display:block; height:5px; border-radius:999px; background:#2b3a45; overflow:hidden; }
.mu-trip-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b98f3e,#f0d391);
  transition:width .8s ease; }
.mu-trip-foot small { color:#9fb0bd; font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
@media(prefers-reduced-motion:reduce) { .mu-trip-dot { animation:none !important; } .mu-trip-bar i { transition:none; } }
.mu-eta.waiting { background:#1a2731; }
.mu-eta-sub { color:#a8b6c3; line-height:1.5; }
.mu-ext { margin:12px 20px 0; }
.mu-status { margin:14px 20px; color:#b9c6cf; }
.mu-actions { padding:0 20px; }
.mu-actions .mu-primary { background:#ead6a8; border-color:#ead6a8; }
.mu-actions .mu-stop { background:transparent; color:#dfb5ae; border-color:#61504f; }
.mu-footnote { padding:0 20px; color:#a6b5c1; margin:12px 0 20px; line-height:1.6; }
.mu-card[data-phase="expired"] .mu-people,.mu-card[data-phase="ended"] .mu-people { margin-bottom:8px; }
.mu-card[data-phase="expired"] .mu-heading,.mu-card[data-phase="ended"] .mu-heading { padding-block:16px; }
.mu-card[data-phase="expired"] .mu-footnote:empty,.mu-card[data-phase="ended"] .mu-footnote:empty { display:none; }
.msg-sheet:has(.mu-invite) { background:#111b24; border:1px solid #3c4a53; border-radius:26px;
  padding:26px; width:100%; max-width:460px; max-height:90dvh; overflow-y:auto;
  color-scheme:dark; scrollbar-width:thin; scrollbar-color:#455663 #111b24; }
.mu-invite { text-align:left; font-family:Inter,system-ui,sans-serif; }
.mu-invite,.mu-invite *,.msg-sheet:has(.mu-invite) { box-sizing:border-box; }
.mu-invite-top { display:flex; align-items:center; justify-content:space-between; color:#ecd7a9; margin-bottom:20px; }
.mu-invite-top > span:last-child { color:#aabac6; font-size:10px; font-weight:600; letter-spacing:.12em; }
.msg-sheet .mu-invite h3 { color:#f4f7f8; font:650 32px/1.1 Inter,system-ui,sans-serif;
  letter-spacing:-.055em; margin:0 0 12px; }
.msg-sheet .mu-invite p { color:#afbfcc; font-size:13px; line-height:1.6; }
.mu-invite .mu-where { padding:18px 0; margin:0 0 18px; border-block:1px solid #32424e; }
.mu-invite .mu-where > label:first-child { font-size:11px; color:#c6d1d8; margin-bottom:10px; }
.mu-invite .mu-city-label { margin-bottom:9px; }
.msg-sheet .mu-invite .mu-where-note { margin:9px 0 4px; font-size:11px; }
.mu-invite .msg-sheet-btns { gap:8px; }
.mu-invite .mu-duration { flex:1; min-height:64px; padding:10px; border:1px solid #42525d;
  border-radius:14px; background:#1b2933; color:#dce5eb; font-size:22px; }
.mu-duration span { display:block; margin-top:3px; font-size:10px; font-weight:450; }
.mu-invite .mu-duration.selected { background:#2e3b3d; border-color:#dfc993; color:#f5dfaf; }
.msg-sheet .mu-invite .mu-invite-privacy { font-size:11px; margin:16px 0; color:#a8b8c5; }
.mu-invite #muSendInvite { flex:1; min-height:48px; border-radius:13px; background:#ead6a8;
  border:1px solid #ead6a8; color:#14232c; font-weight:750; }
.mu-invite #muCancel { min-height:48px; background:transparent; border-color:#44515a; border-radius:13px; color:#c0cbd3; }
.mu-invite button:focus-visible,.mu-city:focus-visible { outline:3px solid #f2dca7; outline-offset:2px; }

/* WHERE SHALL WE MEET? — THE SWITCH, THE SEARCH, THE PREVIEW (2026-10-02)
   The owner could not tell whether "Use my current location" was on or
   off. It is a switch now, in a row that says its state in words; the
   whole row is the control. Gold when on, a quiet pulse while finding. */
.mu-where-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:11px; }
.mu-invite .mu-where-head label { margin:0; font:650 11px/1.3 Inter,system-ui,sans-serif; color:#c6d1d8;
  letter-spacing:.1em; text-transform:uppercase; }
.mu-where-head span { color:#7f8f9b; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; }
.mu-here { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:12px 12px 12px 12px; border-radius:16px; cursor:pointer; user-select:none;
  border:1px solid #3a4855; background:linear-gradient(180deg,#1d2a34,#18232c);
  transition:border-color .2s, background .25s, box-shadow .25s; }
.mu-here:hover { border-color:#5a6a76; }
.mu-here-ico { width:42px; height:42px; display:grid; place-items:center; border-radius:13px;
  color:#8fa0ad; background:#25333e; transition:color .2s, background .25s; }
.mu-here-text { min-width:0; display:flex; flex-direction:column; gap:3px; }
.mu-here-text b { color:#eef2f5; font:650 14px/1.3 Inter,system-ui,sans-serif; }
.mu-here-text small { color:#9fb0bd; font:500 11.5px/1.4 Inter,system-ui,sans-serif; overflow-wrap:anywhere; }
.mu-here[data-state="on"], .mu-here[data-state="finding"] { border-color:#c9a65a;
  background:linear-gradient(180deg,#3a3119,#271f10); box-shadow:0 0 0 3px #e3bc6614, 0 6px 18px #0004; }
.mu-here[data-state="on"] .mu-here-ico, .mu-here[data-state="finding"] .mu-here-ico { color:#1b1408; background:#e3bc66; }
.mu-here[data-state="on"] .mu-here-text small { color:#f1dcab; }
.mu-here[data-state="finding"] .mu-here-ico { animation:mu-here-pulse 1.4s ease-in-out infinite; }
@keyframes mu-here-pulse { 0%,100% { box-shadow:0 0 0 0 #e3bc6666; } 50% { box-shadow:0 0 0 8px #e3bc6600; } }
.mu-switch { position:relative; width:52px; height:30px; flex-shrink:0; border-radius:999px; padding:0; cursor:pointer;
  border:1px solid #4a5a66; background:#2a3742; transition:background .22s, border-color .22s; }
.mu-switch-knob { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#cfd8de; box-shadow:0 2px 5px #0006; transition:transform .22s cubic-bezier(.3,.7,.4,1.2), background .22s; }
.mu-switch[aria-checked="true"] { background:#e3bc66; border-color:#f0d391; }
.mu-switch[aria-checked="true"] .mu-switch-knob { transform:translateX(22px); background:#fffaf0; }
.mu-here-help { margin:9px 0 0; padding:10px 12px; border-radius:12px; border:1px solid #6b5a33;
  background:#2a2416; color:#f1e2bf; font-size:12px; line-height:1.55; }
.mu-invite .mu-spot-or { margin:16px 0 12px; }
/* One continuous field: the magnifier, the text and Find share a single
   rounded bar. A broader input rule elsewhere gave the text its own box
   inside the bar, which read as a field inside a field. */
.mu-search-ico { display:grid; place-items:center; align-self:center; padding-left:13px; color:#8fa0ad; }
/* styles.css sets every search box's background and border !important,
   so only !important undoes it - scoped to this one bar. */
.mu-invite .mu-where-bar input[type="search"] { background:transparent !important; border:0 !important;
  border-radius:0 !important; box-shadow:none !important; padding:12px 10px 12px 9px; min-height:46px; }
.mu-invite .mu-where-bar:focus-within .mu-search-ico { color:#e3bc66; }
/* Suggestions: the street large, the town small, and a correction in gold. */
.mu-invite .mu-where-hits { margin:8px 0 12px; max-height:260px; }
.mu-invite .mu-where-hit { display:flex; align-items:flex-start; gap:10px; text-align:left; }
.mu-hit-pin { color:#e3bc66; flex-shrink:0; margin-top:1px; }
.mu-hit-main { min-width:0; display:flex; flex-direction:column; gap:2px; }
.mu-hit-main b { color:#f2f5f7; font:650 13.5px/1.35 Inter,system-ui,sans-serif; overflow-wrap:anywhere; }
.mu-hit-main small { color:#a2b2be; font-size:11.5px; }
.mu-hit-note, .mu-hit-fix { font-style:normal; font-size:11px; line-height:1.4; margin-top:2px; }
.mu-hit-note { color:#c9d4dc; }
.mu-hit-fix { color:#efd08c; }
.mu-hit-fix::before { content:"↺ "; }
/* The meeting point, shown on the map before anything is sent. The map
   is a picture here, not a control: inside a scrolling sheet a draggable
   map would steal the scroll. "Open in OpenStreetMap" is the explorer. */
.mu-chosen { margin-top:12px; border:1px solid #c9a65a; border-radius:16px; overflow:hidden;
  background:#16212a; box-shadow:0 8px 22px #0005; animation:mu-chosen-in .28s ease-out; }
@keyframes mu-chosen-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.mu-chosen-map { position:relative; height:170px; background:#1c252c; }
.mu-chosen-map .mu-map { pointer-events:none; }
.mu-chosen-status { position:absolute; left:10px; right:10px; bottom:10px; padding:7px 10px; border-radius:9px;
  background:#17212beb; color:#e6ebee; font-size:11px; line-height:1.45; text-align:center; pointer-events:none; }
.mu-chosen-status:empty { display:none; }
.mu-chosen-row { display:flex; align-items:center; gap:10px; padding:12px 12px 2px 14px; }
.mu-chosen-pin { color:#e3bc66; flex-shrink:0; }
.mu-chosen-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mu-chosen-text b { color:#f6e6c0; font:650 13.5px/1.4 Inter,system-ui,sans-serif; overflow-wrap:anywhere; }
.mu-chosen-text small { color:#a9b8c4; font-size:11.5px; line-height:1.45; }
.mu-chosen-x { width:40px; height:40px; flex-shrink:0; border-radius:12px; border:1px solid #44515a;
  background:transparent; color:#c0cbd3; font-size:20px; line-height:1; cursor:pointer; }
.mu-chosen-x:hover { border-color:#e3bc66; color:#f6e6c0; }
.mu-chosen .mu-open-map { padding:0 14px 6px; }
.mu-invite .mu-where-note.chosen { display:none; }   /* the card below says it, with the map */
.mu-invite .mu-switch:focus-visible { outline:3px solid #f2dca7; outline-offset:2px; }
@media(prefers-reduced-motion:reduce) {
  .mu-here, .mu-switch, .mu-switch-knob, .mu-here-ico { transition:none; }
  .mu-here[data-state="finding"] .mu-here-ico, .mu-chosen { animation:none; }
}
@media(max-width:360px) {
  .mu-top,.mu-heading { padding-inline:14px; }
  .mu-brand { gap:7px; }.mu-brand small { font-size:9px; }.mu-live { max-width:65px; font-size:8px; }
  .mu-heading h3 { font-size:24px; }.mu-people { margin-inline:14px; gap:7px; }
  .mu-person + .mu-person { padding-left:7px; }.mu-person { gap:6px; }
  .mu-avatar { width:32px; height:32px; }.mu-spot,.mu-eta,.mu-ext { margin-inline:14px; }
  .mu-modes,.mu-actions { padding-inline:14px; }.mu-map-wrap { height:245px; margin-inline:9px; }
  .msg-sheet:has(.mu-invite) { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { .mu-shake.met svg { animation:none; } }