.buddy-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 2.75rem;
  padding: .4rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 45%, transparent), 0 8px 24px rgba(0, 0, 0, .12);
}
.buddy-pill:hover,
.buddy-pill:focus-visible { background: color-mix(in srgb, var(--bg-elevated) 80%, transparent); outline: none; }
.buddy-pill.is-accent {
  background: var(--accent-strong);
  color: var(--accent-contrast);
  border-color: transparent;
}
.buddy-pill.is-on {
  box-shadow: inset 0 0 0 2px var(--accent-strong), inset 0 1px 0 color-mix(in srgb, white 45%, transparent);
}
button.buddy-pill { appearance: none; }
.buddy-pill.share-icon { padding: 6px; }

.buddy-filters { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 1rem 0 1.5rem; }
.buddy-filters .input { max-width: 12rem; }
.buddy-pill-vehicle { width: 4.25rem; height: 4.25rem; padding: .35rem; }
.buddy-pill-vehicle .vehicle-svg { width: 100%; height: 100%; }

.buddy-list { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.25rem; }
.buddy-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .5rem;
  border-radius: 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.buddy-bar.is-mine { outline: 2px solid var(--accent); outline-offset: 0; }
.buddy-bar-vehicle {
  min-width: 88px;
  height: 88px;
  border-radius: 1.15rem;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.buddy-bar-vehicle .vehicle-svg { width: 76px; height: 76px; }
.buddy-bar-copy { min-width: 0; }
.buddy-bar-copy strong,
.buddy-bar-copy a { color: inherit; text-decoration: none; }
.buddy-bar-copy p,
.buddy-bar-copy span { display: block; margin: .1rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buddy-count {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 .9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: var(--text-xs);
}
.buddy-bar-actions { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; align-items: center; }
.buddy-bar-actions form { margin: 0; }
.buddy-bar .buddy-joins { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0 .4rem .3rem; }

.buddy-contact { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.buddy-post-vehicle { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.buddy-post-vehicle .vehicle-svg { width: 88px; height: 88px; flex-shrink: 0; }
.buddy-joins > li { display: block; margin: .6rem 0; }
.buddy-join-line { display: flex; align-items: center; gap: .45rem; margin: 0; }
.buddy-replies { list-style: none; margin: .35rem 0 0 1.5rem; padding: 0; }
.buddy-replies li { display: flex; align-items: center; gap: .4rem; margin: .25rem 0; }
.buddy-reply-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .35rem 0 0 1.5rem; }
.buddy-reply-form .input { max-width: 14rem; }
.buddy-joins .vehicle-svg { width: 36px; height: 36px; }

.share-pills, .share-links { display: flex; flex-wrap: wrap; gap: .45rem; align-items: flex-start; margin: .8rem 0; }
.buddy-empty { text-align: center; padding: 1.5rem 0; }
.buddy-empty img { width: min(280px, 80%); height: auto; }
.buddy-honeypot { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.buddy-tiles ul, .buddy-tiles div { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; }
.buddy-tiles li, .buddy-tiles label { margin: 0; }
.buddy-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.buddy-form .buddy-pill,
.buddy-form .btn { margin-top: .8rem; margin-right: .4rem; }

@media (max-width: 640px) {
  .home-rides .buddy-bar { column-gap: 1.5rem; }
  .buddy-bar { grid-template-columns: 72px minmax(0, 1fr); }
  .buddy-bar-vehicle, .buddy-bar-vehicle .vehicle-svg { width: 72px; height: 72px; }
  .buddy-bar-vehicle .vehicle-svg { width: 60px; height: 60px; }
  .buddy-bar-actions { grid-column: 1 / -1; justify-content: flex-start; }
}