/* Friends on the map (src/friends-map.js): a dot with the friend's initial, their name and how long ago. */
.friend-marker { display:flex; flex-direction:column; align-items:center; gap:3px; padding:0; border:0; background:none; cursor:pointer; font:inherit; -webkit-tap-highlight-color:transparent; }
.friend-marker .friend-dot { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 6px #0006; color:#fff; font:700 12px/1 system-ui,sans-serif; }
.friend-marker .friend-label { padding:2px 7px; border-radius:999px; background:#16181ce6; color:#fff; font:650 11px/1.25 system-ui,sans-serif; white-space:nowrap; box-shadow:0 2px 6px #0004; }
.friend-marker .friend-label small { color:#c3c9d1; font-weight:500; font-size:10.5px; }
.friend-marker.stale { opacity:.55; }
.friend-marker.stale .friend-dot { filter:grayscale(.6); }
.vertex-v3 #app .friend-card { position:fixed; z-index:46; left:0; right:0; bottom:0; display:grid; gap:12px; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); border:1px solid #ffffff1c; border-bottom:0; border-radius:22px 22px 0 0; background:var(--ui-base,#1e2126); color:var(--ui-text,#fff); box-shadow:0 -8px 24px #0006; }
.vertex-v3 #app .friend-card[hidden] { display:none; }
.vertex-v3 #app .friend-card-head { display:flex; align-items:center; gap:12px; }
.vertex-v3 #app .friend-card-head>div { flex:1; min-width:0; }
.vertex-v3 #app .friend-card-avatar { flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:3px solid #fff; background:var(--friend,#3b82f6); color:#fff; font:700 19px/1 system-ui,sans-serif; }
.vertex-v3 #app .friend-card h2 { margin:0; font:650 19px/1.2 system-ui,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .friend-card-head small { display:block; margin-top:2px; color:var(--ui-muted,#9aa3ad); font:500 13px/1.3 system-ui,sans-serif; }
.vertex-v3 #app :is(#closeFriendCard,#closeMessageCard) { flex:none; width:40px; height:40px; border:0; border-radius:50%; background:#ffffff14; color:inherit; font-size:22px; line-height:1; }
.vertex-v3 #app .friend-card-stats { display:flex; gap:22px; }
.vertex-v3 #app .friend-card-stats p { margin:0; display:grid; gap:2px; }
.vertex-v3 #app .friend-card-stats b { font:650 18px/1.2 system-ui,sans-serif; white-space:nowrap; }
.vertex-v3 #app .friend-card-stats small { color:var(--ui-muted,#9aa3ad); font-size:12.5px; }
.vertex-v3 #app .friend-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vertex-v3 #app .friend-card-actions button { min-height:46px; padding:6px 10px; border:0; border-radius:999px; background:#2a2e35; color:#fff; font:650 15px/1.2 system-ui,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .friend-card-actions button.primary { background:#3b82f6; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#friendCard,#messageCard):not([hidden]) { bottom:var(--nav-h)!important; }
@media (min-width:900px) { .vertex-v3 #app .friend-card { left:var(--desk-card-left,12px); right:auto; bottom:16px; width:var(--desk-card,376px); border-radius:22px; border-bottom:1px solid #ffffff1c; } }
/* Sharing is on: a green ring on the account button. */
#shellAvatar.friend-sharing { box-shadow:0 0 0 2px #1e2126, 0 0 0 4px #22c55e; }
/* The account menu row "Show me to friends" carries the app's one switch (grey, white knob, blue when on). */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu .shell-menu-switch { flex:none; position:relative; width:44px; height:26px; border-radius:13px; background:#3a3f48; transition:background .15s; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu .shell-menu-switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#e6e9ee; box-shadow:0 1px 3px #00000060; transition:transform .15s; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu [aria-checked="true"] .shell-menu-switch { background:#3b82f6; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu [aria-checked="true"] .shell-menu-switch::after { background:#fff; transform:translateX(18px); }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app:has(#friendCard:not([hidden])) #thumbRail { bottom:calc(var(--nav-h) + var(--friend-card-h,250px) + 12px)!important; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app:has(#messageCard:not([hidden])) #thumbRail { bottom:calc(var(--nav-h) + var(--message-card-h,250px) + 12px)!important; }
.vertex-v3 #app .friend-card-stats p[hidden] { display:none; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu .shell-menu-two { display:flex; flex-direction:column; gap:3px; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu .shell-menu-two small:empty { display:none; }
/* Pin card → Send: the friends to send the pin to, one row each (same dot as on the map). */
.vertex-v3 #app .spot-send { display:grid; gap:8px; }
.vertex-v3 #app .spot-send[hidden] { display:none; }
.vertex-v3 #app .spot-send>small { color:var(--ui-muted,#9aa3ad); font-size:12.5px; }
.vertex-v3 #app .spot-send-list { display:grid; gap:6px; max-height:min(40dvh,260px); overflow:auto; color:var(--ui-muted,#9aa3ad); font-size:13px; }
.vertex-v3 #app .spot-send-friend { display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 10px; border:0; border-radius:12px; background:#2a2e35; color:#fff; font:600 15px/1.2 system-ui,sans-serif; text-align:left; }
.vertex-v3 #app .spot-send-friend:disabled { opacity:.5; }
.vertex-v3 #app .spot-send-friend i { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; border:2px solid #fff; color:#fff; font:700 13px/1 system-ui,sans-serif; font-style:normal; }
.vertex-v3 #app .spot-send-friend span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app #spotSendCancel { min-height:40px; border:0; border-radius:999px; background:none; color:var(--ui-muted,#9aa3ad); font:600 14px system-ui,sans-serif; }
.vertex-v3 #app .spot-actions[hidden] { display:none; }
/* Write to a friend: one line with a round send button, on the friend's card and under a received message. */
.vertex-v3 #app .friend-message-form { display:flex; gap:8px; align-items:center; }
.vertex-v3 #app .friend-message-form input { flex:1; min-width:0; height:44px; padding:0 14px; border:1px solid #ffffff1f; border-radius:999px; background:#16181c; color:#fff; font:500 15px/1.2 system-ui,sans-serif; }
.vertex-v3 #app .friend-message-form input::placeholder { color:#8a929c; }
.vertex-v3 #app .friend-message-form button { flex:none; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:#3b82f6; color:#fff; }
.vertex-v3 #app .friend-message-form button:disabled { opacity:.5; }
.vertex-v3 #app .friend-message-form svg { width:20px; height:20px; fill:currentColor; }
/* A message from a friend: the last few lines between you, theirs on the left, yours on the right. */
.vertex-v3 #app .message-card-list { display:flex; flex-direction:column; gap:6px; max-height:min(30dvh,220px); overflow:auto; }
.vertex-v3 #app .message-card-list p { margin:0; max-width:85%; padding:8px 12px; border-radius:16px 16px 16px 4px; background:#2a2e35; font:500 15px/1.35 system-ui,sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; align-self:flex-start; }
.vertex-v3 #app .message-card-list p.mine { align-self:flex-end; border-radius:16px 16px 4px 16px; background:#3b82f6; }
.vertex-v3 #app .message-card-list p small { display:block; margin-top:2px; color:#ffffffa0; font-size:11.5px; }
.vertex-v3 #app .message-card-show { min-height:40px; border:0; border-radius:999px; background:#2a2e35; color:#fff; font:650 14px/1.2 system-ui,sans-serif; }
.vertex-v3 #app .message-card-show[hidden] { display:none; }
/* With the keyboard up the card sits right on top of it, as tall as it needs. */
html[data-keyboard-open].phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#friendCard,#messageCard)[data-keyboard-panel] { bottom:var(--keyboard-bottom)!important; height:auto!important; }
html[data-keyboard-open] body.vertex-v3 #app#app#app#app#app#app :is(#friendCard,#messageCard)[data-keyboard-panel] { height:auto!important; }
/* Short phones (iPhone SE): the friend and message cards leave no room for the map buttons, so the
   buttons step aside while a card is open, as with an open tour card. */
@media (max-height:760px) {
  html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app:has(:is(#friendCard,#messageCard):not([hidden])) #thumbRail { display:none!important; }
  .vertex-v3 #app .friend-card { gap:10px; }
  .vertex-v3 #app .message-card-list { max-height:min(24dvh,170px); }
}