/**
 * owner-stack.css — Styles for the shared owner-stack widget.
 * Pair with /static/owner-stack.js.
 *
 * Variables you can override per surface:
 *   --ostack-size       avatar diameter (set inline by JS, default 28px)
 *   --ostack-border     ring around each avatar (default rgba(0,0,0,0.55))
 *   --ostack-bg         fallback initial-circle bg
 *   --ostack-fg         fallback initial-circle text
 *   --ostack-overflow-bg background of the "+N" chip
 */
.ostack {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 0;
  --ostack-size: 28px;
  --ostack-border: rgba(0, 0, 0, 0.55);
  --ostack-bg: #2c2c2c;
  --ostack-fg: #ddd;
  --ostack-overflow-bg: #1f1f1f;
}

.ostack-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  var(--ostack-size);
  height: var(--ostack-size);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--ostack-border);
  background: var(--ostack-bg);
  color: var(--ostack-fg);
  margin-left: calc(var(--ostack-size) * -0.32);
  flex-shrink: 0;
  text-decoration: none;
  font-size: calc(var(--ostack-size) * 0.42);
  font-weight: 600;
  line-height: 1;
  transition: transform 0.12s ease, z-index 0s;
  position: relative;
  z-index: 1;
}

.ostack-item:first-child {
  margin-left: 0;
}

.ostack-item:hover,
.ostack-item:focus {
  transform: translateY(-1px) scale(1.06);
  z-index: 5;
}

.ostack-item img {
  display: block;
  width:  100%;
  height: 100%;
  object-fit: cover;
}

.ostack-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  100%;
  height: 100%;
  background: var(--ostack-bg);
  color:      var(--ostack-fg);
}

.ostack-overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ostack-size);
  min-width: var(--ostack-size);
  padding: 0 8px;
  margin-left: calc(var(--ostack-size) * -0.20);
  border-radius: 999px;
  border: 2px solid var(--ostack-border);
  background: var(--ostack-overflow-bg);
  color: #ddd;
  font-size: calc(var(--ostack-size) * 0.42);
  font-weight: 600;
  line-height: 1;
}