/* Alpha friend-test fixes: picker, live suggest, listing photos */

.quick-add-results {
  margin: 0 0 var(--space-lg);
}

.card-picker,
.card-suggest {
  padding: var(--space-md);
  border: 1px solid var(--obsidian-600);
  border-radius: var(--radius-lg);
  background: var(--obsidian-800);
}

.card-picker__title,
.card-suggest__empty {
  margin-bottom: var(--space-sm);
  color: var(--bone-300);
  font-size: 0.875rem;
}

.card-picker__grid,
.card-suggest {
  display: grid;
  gap: var(--space-sm);
}

.card-picker__button,
.card-suggest__button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  border: 1px solid var(--obsidian-600);
  border-radius: var(--radius-md);
  background: var(--obsidian-700);
  text-align: left;
  cursor: pointer;
}

.card-picker__button:hover,
.card-suggest__button:hover {
  border-color: var(--ember);
}

.card-picker__image,
.card-suggest__image,
.alert-card__listing-image {
  width: 48px;
  height: 66px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--obsidian-600);
  flex-shrink: 0;
}

.alert-card__listing-image {
  width: 88px;
  height: 120px;
}

.card-picker__image--placeholder,
.card-suggest__image--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bone-500);
  font-family: var(--font-serif);
}

.card-picker__name,
.card-suggest__name {
  display: block;
  color: var(--bone-100);
}

.card-picker__set,
.card-suggest__set {
  display: block;
  color: var(--bone-500);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.alert-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}