Haven/public/css/style-badges.css

/* Profile badges (#5632): the row on the profile card, the admin list in
   Settings > Badges, the badge editor and the hand-give dialog. */

.badge-icon {
  width: 1.375rem;
  height: 1.375rem;
  object-fit: contain;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.badge-icon-emoji { font-size: 1.125rem; line-height: 1; }
.badge-icon-lg { width: 1.75rem; height: 1.75rem; }
.badge-icon-lg.badge-icon-emoji { font-size: 1.5rem; }

/* ── Profile card ── */
.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.profile-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1875rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.profile-badge:hover,
.profile-badge:focus-visible { transform: translateY(-1px); border-color: var(--border-light); }
.profile-badge.is-open { border-color: var(--accent); }
.profile-badge.is-hidden { opacity: 0.4; }
.profile-badge-detail {
  margin: -0.25rem 0 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg-secondary);
  font-size: 0.8125rem;
}
.profile-badge-detail[hidden] { display: none; }
.profile-badge-detail-head { display: flex; align-items: center; gap: 0.5rem; }
.profile-badge-detail-desc { margin-top: 0.25rem; color: var(--text-secondary); }
.profile-badge-detail-how { margin-top: 0.25rem; color: var(--text-muted); font-size: 0.75rem; }
.profile-badge-detail .profile-badge-hide { margin-top: 0.5rem; }

/* ── Settings > Badges ── */
.badge-admin-list { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.badge-admin-group { display: flex; flex-direction: column; gap: 0.25rem; }
.badge-admin-group-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.badge-admin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.625rem;
  padding: 0.4375rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg-secondary);
}
.badge-admin-row.is-off > .badge-icon,
.badge-admin-row.is-off > .badge-admin-text { opacity: 0.55; }
.badge-admin-text { flex: 1 1 10rem; min-width: 0; }
.badge-admin-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-admin-how { font-size: 0.75rem; color: var(--text-muted); }
/* The On/Off control is a standard .toggle-row, so it follows the Toggle Style setting. */
.badge-admin-switch { display: inline-flex; cursor: pointer; }
.badge-admin-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
/* Delete is a quiet danger button, red text on the row, filled only on
   hover. The confirm dialog is where the loud red button lives. */
.badge-admin-actions .badge-admin-delete {
  background: transparent;
  color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--border);
}
.badge-admin-actions .badge-admin-delete:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger);
}
.badge-admin-actions .badge-admin-delete:disabled:hover { background: transparent; color: var(--danger); }
.badge-admin-holder-list { flex: 1 0 100%; display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.25rem; border-top: 1px dashed var(--border); }
.badge-admin-holder-list[hidden] { display: none; }
.badge-holder { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.badge-holder-name { font-weight: 600; }
.badge-holder .badge-holder-revoke { margin-left: auto; }

/* ── Editor and hand-give dialog ── */
.badge-modal { width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; }
.badge-editor { display: flex; flex-direction: column; gap: 0.625rem; }
.badge-editor-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; color: var(--text-secondary); }
.badge-editor-field[hidden] { display: none; }
.badge-editor-pane[hidden] { display: none; }
.badge-editor-inline { display: flex; gap: 0.375rem; }
.badge-editor select,
.badge-editor input[type="number"] {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3125rem 0.5rem;
  font-size: 0.8125rem;
  font-family: inherit;
  outline: none;
}
.badge-editor select { cursor: pointer; }
.badge-editor select:focus,
.badge-editor input[type="number"]:focus { border-color: var(--accent); }
.badge-editor-inline input { width: 6rem; }
.badge-editor-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  background: var(--bg-secondary);
  font-weight: 600;
}
.badge-editor-preview-icon { display: inline-flex; min-width: 1.75rem; min-height: 1.75rem; }
.badge-editor-tabs { display: flex; gap: 0.25rem; margin-bottom: 0.375rem; }
.badge-editor-builtins { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.badge-editor-builtin {
  padding: 0.25rem;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  background: var(--bg-secondary);
  cursor: pointer;
}
.badge-editor-builtin.is-selected { border-color: var(--accent); }
/* Shown by another badge: no two badges share an icon. */
.badge-editor-builtin.is-used { opacity: 0.3; filter: grayscale(0.7); cursor: not-allowed; }
.badge-editor-icon-used { display: block; margin-top: 0.375rem; color: var(--danger); font-size: 0.75rem; }
.badge-editor-icon-used[hidden] { display: none; }
.badge-editor-emoji { width: 6rem; font-size: 1.25rem; }
.badge-member-list { display: flex; flex-direction: column; gap: 0.25rem; }
.badge-member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  background: var(--bg-secondary);
  cursor: pointer;
}
.badge-member-row.is-off { opacity: 0.7; }
.badge-member-text { display: flex; flex-direction: column; min-width: 0; }