/* Member avatar strip (js/memberstrip.js). All styles for the strip live here. */
.member-strip-host[hidden] { display: none; }
.member-strip-host { margin-block: -.15rem .5rem; min-inline-size: 0; }

/* Phones: one scrolling row (the strip scrolls, never the page). Padding leaves room for the focus ring / selection ring. */
.member-strip {
  display: flex; flex-wrap: nowrap; align-items: flex-start; gap: .2rem; min-inline-size: 0; max-inline-size: 100%;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  padding: .3rem .3rem .4rem;
}

.ms-item {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  min-inline-size: 64px; min-block-size: var(--tap); padding: .3rem .4rem .25rem;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--muted);
  font-size: .78rem; font-weight: 500; cursor: pointer;
}
.ms-item:hover { background: var(--surface-2, #eef2f7); }
.ms-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-radius: var(--radius-sm); }

.ms-avatar {
  position: relative; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%;
  background: var(--c, var(--surface-2)); color: var(--fg, var(--text)); font-size: 1.1rem; font-weight: 700; line-height: 1;
  border: 2px solid var(--ring); box-shadow: 0 0 0 1px rgba(128, 138, 156, .45);
}
.ms-all .ms-avatar { font-size: 1.2rem; }

/* name: a hidden bold copy reserves the bold width so selecting an item never shifts its neighbours */
.ms-name { display: grid; max-inline-size: 5.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.ms-name::after { content: attr(data-text); font-weight: 800; block-size: 0; visibility: hidden; overflow: hidden; }

/* selected: ring + check badge + bold name + tinted background (never colour alone) */
.ms-check {
  display: none; position: absolute; inset-block-end: -5px; inset-inline-end: -5px; inline-size: 18px; block-size: 18px; border-radius: 50%;
  place-items: center; background: var(--accent-fill); color: #fff; font-size: .68rem; font-weight: 800; border: 2px solid var(--ring);
}
.ms-item[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 800; }
.ms-item[aria-pressed="true"] .ms-avatar { box-shadow: 0 0 0 3px var(--accent-strong); }
.ms-item[aria-pressed="true"] .ms-check { display: grid; }

@media (forced-colors: active) {
  .ms-item[aria-pressed="true"] { outline: 3px solid Highlight; }
  .ms-avatar { border-color: CanvasText; }
}

/* Desktop / wide tablets: same strip, allowed to wrap instead of scroll */
@media (min-width: 900px) {
  .member-strip { flex-wrap: wrap; overflow: visible; }
}