/* Buttons, icon buttons and the user avatar: small interactive controls used in the top bar and in forms. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); cursor: pointer; white-space: nowrap;
  padding: 9px var(--s-4); border-radius: var(--r); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 500; font-size: 14px;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.danger { color: var(--err-line); border-color: var(--err-line); }
.btn[disabled] { color: var(--muted); cursor: default; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); flex: none;
  color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

@media (max-width: 860px) {
  .top .btn.primary { display: none; } /* registration is linked from the login page */
  .btn { min-height: 44px; }
  .icon-btn, .avatar { width: 44px; height: 44px; }
}